/* ==========================================================================
   ÓSCAR GAMARRA — componentes de sitio
   ========================================================================== */

/* ---- Tipografía display fina para el nombre --------------------------- */
.display { font-family: var(--font-display); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; }
.h-xl { font-size: clamp(2.8rem, 11vw, 7.5rem); }
.h-lg { font-size: clamp(2.2rem, 6vw, 4rem); }
.h-md { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--paper-dim); max-width: 46ch; }
.muted { color: var(--paper-mut); }
.gold { color: var(--gold-400); }
.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--gold-300); }

/* ==== NAV ================================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem var(--pad-x);
  transition: background-color .5s var(--ease-out), padding .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in oklab, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
  padding-block: .85rem;
}
.nav__brand {
  font-family: var(--font-display); font-weight: 600; color: var(--paper);
  font-size: 1.15rem; letter-spacing: .01em; white-space: nowrap;
}
.nav__brand b { color: var(--gold-400); font-weight: 600; }
.nav__links { display: none; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: .82rem; letter-spacing: .04em; color: var(--paper-dim); font-weight: 500;
  position: relative; padding-block: .3rem; transition: color .3s var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold-500); transition: width .4s var(--ease-out);
}
.nav__links a:hover { color: var(--paper); }
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--gold-400); }
.nav__cta { display: none; }

.nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 0; cursor: pointer;
  z-index: 50;
}
.nav__burger span {
  height: 1.5px; width: 100%; background: var(--paper); border-radius: 2px;
  transition: transform .5s var(--ease-spring), opacity .3s var(--ease-out);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__panel {
  position: fixed; inset: 0; z-index: 45;
  background: color-mix(in oklab, var(--ink-900) 92%, transparent);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  padding: var(--pad-x); opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.nav.is-open .nav__panel { opacity: 1; visibility: visible; }
.nav__panel a {
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); color: var(--paper);
  padding-block: .35rem; opacity: 0; transform: translateY(1.5rem);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.nav__panel a:hover { color: var(--gold-400); }
.nav.is-open .nav__panel a { opacity: 1; transform: none; }
.nav.is-open .nav__panel a:nth-child(1) { transition-delay: .08s; }
.nav.is-open .nav__panel a:nth-child(2) { transition-delay: .14s; }
.nav.is-open .nav__panel a:nth-child(3) { transition-delay: .20s; }
.nav.is-open .nav__panel a:nth-child(4) { transition-delay: .26s; }
.nav.is-open .nav__panel a:nth-child(5) { transition-delay: .32s; }
.nav__panel-foot { margin-top: 2.5rem; display: flex; gap: 1.5rem; opacity: 0; transition: opacity .6s .4s; }
.nav.is-open .nav__panel-foot { opacity: 1; }
.nav__panel-foot a { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mut); }

@media (min-width: 900px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__burger { display: none; }
}

/* ==== HERO =============================================================== */
.hero {
  position: relative; min-height: 100dvh; display: flex; align-items: flex-end;
  padding-bottom: clamp(3rem, 8vh, 6rem); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Duotono cálido para armonizar la luz cian de tarima con el tema oro/negro */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,9,6,.55) 0%, rgba(11,9,6,.15) 32%, rgba(11,9,6,.72) 74%, var(--ink-900) 100%),
    radial-gradient(120% 90% at 78% 20%, transparent 30%, rgba(11,9,6,.55) 100%);
  mix-blend-mode: normal;
}
.hero__tint {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(215deg, rgba(201,162,75,.14), transparent 42%);
  mix-blend-mode: soft-light;
}
.hero__inner { position: relative; }
.hero h1 { margin: 1.1rem 0 0; }
.hero h1 .sur { display: block; font-size: .42em; letter-spacing: .12em; color: var(--gold-300); font-weight: 500; margin-top: .35em; }
.hero__lead { margin-top: 1.6rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--paper); line-height: 1; }
.stat span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mut); }

/* ==== PLAYER STRIP ====================================================== */
.player {
  display: flex; align-items: center; gap: 1rem;
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: 999px; padding: .6rem .6rem .6rem 1.2rem; max-width: 560px;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.8);
}
.player__play {
  flex: none; width: 3rem; height: 3rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--gold-500); color: var(--ink-900); display: grid; place-items: center;
  transition: transform .4s var(--ease-spring), background-color .3s;
}
.player__play:active { transform: scale(.94); }
.player__play .ico-pause { display: none; }
.player.is-playing .player__play .ico-play { display: none; }
.player.is-playing .player__play .ico-pause { display: block; }
.player__meta { min-width: 0; flex: 1; }
.player__meta small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.player__meta strong { display: block; color: var(--paper); font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__wave { display: flex; align-items: center; gap: 3px; height: 26px; padding-inline: .4rem; }
.player__wave i {
  width: 3px; border-radius: 2px; background: var(--paper-mut); opacity: .5;
  animation: none; height: 40%;
}
.player.is-playing .player__wave i { animation: eq 1.1s var(--ease-out) infinite alternate; background: var(--gold-400); opacity: .9; }
.player__wave i:nth-child(2){animation-delay:.1s} .player__wave i:nth-child(3){animation-delay:.25s}
.player__wave i:nth-child(4){animation-delay:.4s} .player__wave i:nth-child(5){animation-delay:.15s}
.player__wave i:nth-child(6){animation-delay:.3s} .player__wave i:nth-child(7){animation-delay:.05s}
@keyframes eq { from { height: 25%; } to { height: 95%; } }

/* ==== SECTION HEADERS =================================================== */
.sec-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.sec-head h2 { margin-top: 1rem; }
.sec-head p { margin-top: 1rem; }

/* ==== BIO (editorial split) ============================================ */
.bio { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .bio { grid-template-columns: 0.85fr 1fr; } }
/* Double-bezel frame */
.frame { background: var(--ink-750); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: .5rem; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.frame__inner { position: relative; border-radius: calc(var(--r-lg) - .35rem); overflow: hidden; box-shadow: inset 0 1px 1px rgba(244,239,230,.12); }
.frame__inner img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 20%; }
.frame__tag {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  background: color-mix(in oklab, var(--ink-900) 70%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .85rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper);
}
.bio__body p { margin-top: 1.1rem; }
.bio__body p:first-child { margin-top: 0; }
.milestones { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.milestone { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.milestone b { font-family: var(--font-display); color: var(--gold-400); font-size: 1.05rem; }
.milestone span { color: var(--paper-dim); font-size: .95rem; }

/* ==== MÚSICA (track list editorial) ==================================== */
.tracks { border-top: 1px solid var(--line); }
.track {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.15rem .5rem; border-bottom: 1px solid var(--line);
  transition: background-color .4s var(--ease-out), padding-inline .4s var(--ease-out);
  cursor: default;
}
.track:hover { background: var(--ink-800); padding-inline: 1.1rem .9rem; }
.track__n { font-family: var(--font-display); font-size: 1.1rem; color: var(--paper-mut); width: 2.2rem; }
.track:hover .track__n { color: var(--gold-400); }
.track__name { min-width: 0; }
.track__name strong { display: block; color: var(--paper); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.track__name span { font-size: .82rem; color: var(--paper-mut); }
.track__play {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--paper); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transform: scale(.9); transition: all .4s var(--ease-spring); background: transparent;
}
.track:hover .track__play { opacity: 1; transform: none; }
.track__play:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }
.albums { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem 1rem; font-size: .82rem; color: var(--paper-dim); }
.chip b { color: var(--gold-400); font-weight: 600; }

/* ==== GIRA / conciertos ================================================ */
.tour { border-top: 1px solid var(--line); }
.event {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
  padding: 1.5rem .5rem; border-bottom: 1px solid var(--line);
  transition: background-color .4s var(--ease-out);
}
.event:hover { background: var(--ink-800); }
.event__date { text-align: center; min-width: 3.5rem; }
.event__date b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--paper); line-height: 1; }
.event__date span { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-400); }
.event__info strong { display: block; color: var(--paper); font-size: 1.15rem; font-weight: 600; }
.event__info span { color: var(--paper-mut); font-size: .9rem; }
.event__badge { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; }
.badge--live { color: var(--live-400); border: 1px solid color-mix(in oklab, var(--live-500) 45%, transparent); }
.tour__note { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; justify-content: space-between; }

/* ==== GALERÍA (bento asimétrico) ======================================= */
.gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 12rem; } }
.gtile { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gtile:hover img { transform: scale(1.05); }
@media (min-width: 720px) {
  .gtile--a { grid-column: span 4; grid-row: span 2; }
  .gtile--b { grid-column: span 2; grid-row: span 1; }
  .gtile--c { grid-column: span 2; grid-row: span 1; }
}
/* Tile-CTA Instagram */
.gtile--ig {
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); padding: 1.4rem;
  grid-column: span 1; min-height: 12rem;
}
@media (min-width: 720px) { .gtile--ig { grid-column: span 2; grid-row: span 2; } }
.gtile--ig .igh { font-family: var(--font-display); font-size: 1.4rem; color: var(--paper); }
.gtile--ig .igk { font-size: .8rem; color: var(--paper-mut); }
.gtile--ig .igf { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-400); font-weight: 600; font-size: .9rem; }
.gtile__cap { position: absolute; left: 1rem; bottom: 1rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.gtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,9,6,.7)); pointer-events: none; }
.gtile--ig::after { display: none; }

/* ==== CONTACTO / redes (home) ========================================== */
.social { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .social { grid-template-columns: 1fr 1fr; } }
.social a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-800); transition: border-color .4s var(--ease-out), background-color .4s;
}
.social a:hover { border-color: color-mix(in oklab, var(--gold-500) 40%, transparent); background: var(--ink-750); }
.social a b { color: var(--paper); font-weight: 600; display: block; }
.social a small { color: var(--paper-mut); font-size: .8rem; }
.social a .arr { color: var(--gold-400); }

/* ==== FOOTER ============================================================ */
.foot { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 6vw, 4rem) 2.5rem; }
.foot__top { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-end; }
.foot__brand { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.4rem); color: var(--paper); line-height: .9; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot__links a { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mut); transition: color .3s; }
.foot__links a:hover { color: var(--gold-400); }
.foot__bar { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--paper-mut); }

/* ==== WhatsApp float ==================================================== */
.wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--live-500); color: #05170d; font-weight: 600; font-size: .9rem;
  padding: .8rem 1.1rem; border-radius: 999px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7);
  transition: transform .4s var(--ease-spring);
}
.wa:active { transform: scale(.95); }
.wa span { display: none; }
@media (min-width: 560px) { .wa span { display: inline; } }

/* ==== CONTRATACIONES: cards + form ===================================== */
.booking-cols { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 820px) { .booking-cols { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.2rem); }
.panel > h3 { display: flex; align-items: center; gap: .7rem; color: var(--paper); font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1.4rem; }
.panel > h3 .dot { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--gold-glow); color: var(--gold-400); flex: none; }
.deflist { display: grid; gap: 1.3rem; }
.deflist > div { display: grid; grid-template-columns: auto 1fr; gap: .9rem; }
.deflist .mk { color: var(--gold-400); margin-top: .15rem; }
.deflist b { color: var(--paper); font-weight: 600; display: block; margin-bottom: .2rem; }
.deflist span { color: var(--paper-dim); font-size: .92rem; }

.form-card { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.4rem); }
.field { margin-top: 1.1rem; }
.field:first-child { margin-top: 0; }
.grid-2 { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
label { display: block; font-size: .8rem; letter-spacing: .04em; color: var(--paper-dim); margin-bottom: .5rem; font-weight: 500; }
label .req { color: var(--gold-400); }
.input, .select, .textarea {
  width: 100%; background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .85rem 1rem; color: var(--paper); font-size: .95rem;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--paper-mut) 80%, transparent); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-glow); }
.textarea { resize: vertical; min-height: 7rem; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238f877a' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 1.6rem; }

.contact-side { display: grid; gap: 1.2rem; align-content: start; }
.side-card { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 4vw, 1.9rem); }
.side-card h3 { display: flex; align-items: center; gap: .6rem; color: var(--paper); font-size: 1.25rem; margin-bottom: 1rem; }
.side-card p { color: var(--paper-dim); font-size: .92rem; }
.side-line { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; color: var(--paper-dim); font-size: .92rem; }
.side-line .mk { color: var(--gold-400); flex: none; }
.side-line b { color: var(--paper); font-weight: 600; }
.steps { counter-reset: s; display: grid; gap: 1.1rem; }
.steps > div { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.steps .num { counter-increment: s; width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--gold-400); display: grid; place-items: center; font-size: .8rem; font-weight: 600; flex: none; }
.steps .num::before { content: counter(s); }
.steps b { color: var(--paper); display: block; margin-bottom: .15rem; }
.steps span { color: var(--paper-mut); font-size: .88rem; }

.calendly {
  margin-top: clamp(2.5rem, 6vw, 4rem); border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(80% 60% at 50% 0%, var(--gold-glow), transparent 70%),
    var(--ink-850);
  padding: clamp(2.5rem, 8vw, 5rem) var(--pad-x); text-align: center;
  position: relative; overflow: hidden;
}
.calendly::before {
  content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.calendly > * { position: relative; }
.calendly .ico-cal { color: var(--gold-400); margin-bottom: 1rem; display: inline-block; }
.calendly h3 { color: var(--paper); font-size: clamp(1.5rem, 4vw, 2.2rem); }
.calendly p { color: var(--paper-dim); max-width: 42ch; margin: 1rem auto 2rem; }

/* Placeholder honesto para bloques a completar por Felipe */
.placeholder { outline: 1px dashed color-mix(in oklab, var(--gold-500) 45%, transparent); outline-offset: 4px; }

/* ==========================================================================
   v2 — cinematográfico, image-led, menos texto
   ========================================================================== */

/* Hero: Ken Burns lento + scroll cue --------------------------------------- */
.hero__media img { animation: kenburns 22s var(--ease-out) infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.14) translateY(-2%); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }
.hero__cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-mut);
}
.hero__cue i { width: 1px; height: 2.2rem; background: linear-gradient(var(--gold-400), transparent); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }

/* Marquee cinético --------------------------------------------------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.3rem; background: var(--ink-850); }
.marquee__row { display: flex; width: max-content; gap: 2.5rem; animation: slide 32s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } }
.marquee__row span {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 500;
  color: var(--paper); white-space: nowrap; display: inline-flex; align-items: center; gap: 2.5rem;
}
.marquee__row span::after { content: "✶"; color: var(--gold-500); font-size: .7em; }
.marquee__row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--paper-mut); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Statement — cita a sangre sobre imagen ---------------------------------- */
.statement { position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: var(--section-y) var(--pad-x); }
.statement__bg { position: absolute; inset: 0; z-index: -1; }
.statement__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.statement__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 45%, rgba(11,9,6,.55), var(--ink-900) 92%); }
.statement blockquote { max-width: 18ch; margin: 0 auto; }
.statement q { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1.04; color: var(--paper); quotes: "“" "”"; }
.statement q::before, .statement q::after { color: var(--gold-500); }
.statement cite { display: block; margin-top: 2rem; font-style: normal; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-400); }
.statement cite small { display:block; color: var(--paper-mut); letter-spacing: .1em; margin-top:.35rem; }

/* Featured single band ----------------------------------------------------- */
.featured { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 760px) { .featured { grid-template-columns: auto 1fr auto; gap: 2.5rem; } }
.featured__k { font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 5rem); color: var(--paper); line-height: .9; }
.featured__k em { font-style: italic; color: var(--gold-300); font-weight: 400; }
.featured__meta { color: var(--paper-mut); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }

/* Section header sobre imagen tenue --------------------------------------- */
.section--bg { position: relative; overflow: hidden; }
.section--bg .bgimg { position: absolute; inset: 0; z-index: -1; opacity: .22; }
.section--bg .bgimg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.section--bg .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ink-900), transparent 30%, transparent 70%, var(--ink-900)); }

/* Galería v2 — más grande y cinematográfica ------------------------------- */
.gallery2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 760px) { .gallery2 { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 9rem; gap: 1rem; } }
.g2 { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); }
.g2 img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.g2:hover img { transform: scale(1.06); }
.g2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(11,9,6,.72)); pointer-events: none; }
.g2 figcaption { position: absolute; left: 1rem; bottom: .9rem; z-index: 2; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.g2--tall { grid-column: span 1; aspect-ratio: 3/4; }
@media (min-width: 760px) {
  .g2--hero { grid-column: span 7; grid-row: span 3; aspect-ratio: auto; }
  .g2--tall { grid-column: span 5; grid-row: span 3; aspect-ratio: auto; }
  .g2--wide { grid-column: span 7; grid-row: span 2; aspect-ratio: auto; }
  .g2--sm  { grid-column: span 5; grid-row: span 2; aspect-ratio: auto; }
}
.g2--ig { display: flex; flex-direction: column; justify-content: space-between; padding: 1.3rem; background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); }
.g2--ig::after { display: none; }
.g2--ig .igh { font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); }
.g2--ig .igf { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-400); font-weight: 600; font-size: .88rem; }

/* Refinar hero name a más grande ------------------------------------------ */
.h-xl { font-size: clamp(3.2rem, 13vw, 9rem); }

/* ==========================================================================
   v3 — museo oscuro / clase mundial (refs Awwwards: Moranta, FKA twigs, Obys)
   ========================================================================== */

/* Atmósfera: negro casi puro + glow dorado a la deriva (no negro plano) ---- */
html { background: var(--ink-900); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50vmax 50vmax at 12% -8%, var(--gold-glow), transparent 55%),
    radial-gradient(48vmax 48vmax at 92% 108%, rgba(201,162,75,.09), transparent 55%),
    radial-gradient(40vmax 40vmax at 80% 30%, rgba(201,162,75,.05), transparent 60%);
  animation: atmos 28s ease-in-out infinite alternate;
}
@keyframes atmos { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-3vh,0) scale(1.1); } }

/* Contener stacking contexts de secciones con capas negativas -------------- */
.hero, .statement, .section--bg { isolation: isolate; }

/* Tipografía a escala brutal ---------------------------------------------- */
.h-xl { font-size: clamp(3.6rem, 16vw, 11.5rem); letter-spacing: -0.03em; line-height: .86; }
.hero h1 { margin-top: .4rem; }

/* Capítulos — numeral editorial en outline dorado -------------------------- */
.ch {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 5rem); line-height: .8; margin-bottom: .5rem;
  color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--gold-500) 40%, transparent);
}

/* Reveal con MÁSCARA (clip-path wipe) — refina el sistema de reveal -------- */
[data-reveal="mask"] {
  opacity: 1; transform: none; filter: none;
  clip-path: inset(0 103% 0 0);
  transition: clip-path 1.1s var(--ease-spring);
}
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="up"] { filter: none; } /* variante sin blur para bloques grandes */

/* Foto que EMERGE de la oscuridad — viñeta + disolución en negro ----------- */
.emerge { position: relative; }
.emerge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 7rem 1.5rem rgba(7,6,4,.72);
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(7,6,4,.5) 100%);
}

/* Hero: la foto emerge de negro (viñeta fuerte) */
.hero__media::after {
  background:
    linear-gradient(180deg, rgba(7,6,4,.72) 0%, rgba(7,6,4,.12) 34%, rgba(7,6,4,.78) 72%, var(--ink-900) 100%),
    radial-gradient(115% 95% at 72% 22%, transparent 32%, rgba(7,6,4,.7) 100%);
}

/* Galería v2 → dissolve en negro (sin borde duro, viñeta) ------------------ */
.g2 { border-color: transparent; background: var(--ink-850); }
.g2::after {
  background:
    linear-gradient(180deg, transparent 45%, rgba(7,6,4,.82)),
    radial-gradient(110% 90% at 50% 35%, transparent 60%, rgba(7,6,4,.45));
  box-shadow: inset 0 0 4rem .5rem rgba(7,6,4,.5);
}

/* Statement: la imagen emerge de negro con reveal de máscara --------------- */
.statement__bg img { object-position: center 20%; filter: brightness(1.1) contrast(1.04); }
.statement__bg::after {
  background:
    linear-gradient(180deg, var(--ink-900), transparent 24%, transparent 76%, var(--ink-900)),
    radial-gradient(80% 92% at 50% 38%, rgba(7,6,4,.18), rgba(7,6,4,.75) 96%);
}

/* Featured single: VINILO giratorio como objeto de marca ------------------- */
.disc {
  position: relative; width: 5.5rem; height: 5.5rem; flex: none; border: 0; padding: 0;
  background: transparent; cursor: pointer; border-radius: 50%;
}
.disc__vinyl {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #16120c 0 1.5px, #0c0a07 1.5px 3px);
  box-shadow: 0 12px 32px -12px #000, inset 0 0 0 1px var(--line-strong), inset 0 0 2rem rgba(0,0,0,.8);
  animation: spin 9s linear infinite;
}
.disc__vinyl::before { /* etiqueta central dorada */
  content: ""; position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-400), var(--gold-500));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.disc__vinyl::after { /* agujero */
  content: ""; position: absolute; inset: 47%; border-radius: 50%; background: var(--ink-900);
}
.disc__ico {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; color: var(--ink-900);
  transition: transform .4s var(--ease-spring);
}
.disc:active .disc__ico { transform: scale(.9); }
.disc .ico-pause { display: none; }
.featured.is-playing .disc .ico-play { display: none; }
.featured.is-playing .disc .ico-pause { display: block; }
.featured.is-playing .disc__vinyl { animation-duration: 3.2s; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disc__vinyl { animation: none; } }

/* Marquee: más grande y con outline dorado alterno ------------------------ */
.marquee__row span:nth-child(even) { -webkit-text-stroke: 1px var(--gold-500); color: transparent; }
.marquee { background: transparent; border-color: var(--line); }

/* Nav brand + links un punto más finos para el aire editorial ------------- */
.foot__brand { letter-spacing: -0.02em; }