/* ============================================================
   BOB TOSH — Editorial Dark Cinematográfico
   Paleta oficial del brand book (Junio 2024)
   ============================================================ */

:root{
  --black:#050506;
  --ink:#0a0a0c;
  --ink-2:#101014;
  --ink-3:#16161b;
  --fog:#8c97a2;
  --fog-dim:#5d6670;
  --white:#ffffff;
  --lime:#cfde43;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.06);

  --font-display:'Anton','Arial Narrow',Haettenschweiler,Impact,sans-serif;
  --font-body:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'DM Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --pad:clamp(1.25rem,4.5vw,5rem);
  --gap:clamp(1.5rem,3vw,3rem);
  --maxw:1680px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:clamp(.95rem,1.05vw,1.05rem);
  line-height:1.6;
  font-weight:350;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden}

/* height:auto es imprescindible: los <img> traen los atributos width/height y
   valen como hint de presentación. Donde el CSS fijaba sólo el ancho, el alto
   quedaba clavado en el del atributo y la foto salía estirada (las de la bio
   llegaban a 72% de deformación). Las que usan object-fit fijan su propio
   height por clase, así que no las toca. */
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--lime);color:#000}

/* ---------- Tipografía base ---------- */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.86;
  margin:0;
}

.display{
  font-size:clamp(3.2rem,12.5vw,11.5rem);
  line-height:.82;
  letter-spacing:-.025em;
}
.display--md{font-size:clamp(2.6rem,8.5vw,7.5rem)}
.display--sm{font-size:clamp(2rem,5.5vw,4.5rem)}

.kicker{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--fog);
  margin:0;
}
.kicker__i{color:var(--lime)}

.lead{
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.55;
  color:rgba(255,255,255,.86);
  font-weight:350;
  max-width:62ch;
}

.muted{color:var(--fog)}
.text-lime{color:var(--lime)}

/* ---------- Layout ---------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{
  position:relative;
  padding-block:clamp(5rem,11vw,10rem);
}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}

.section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  padding-bottom:1.1rem;
  margin-bottom:clamp(2rem,4vw,4rem);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Grano + niebla (atmósfera global) ---------- */

.atmos{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
}

.atmos__grain{
  position:absolute;
  inset:-150%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.16;
  mix-blend-mode:overlay;
  animation:grainShift 900ms steps(4) infinite;
  will-change:transform;
}

@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)}
  75%{transform:translate3d(-2%,-2%,0)}
  100%{transform:translate3d(3%,3%,0)}
}

.atmos__fog{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(46% 34% at 22% 18%,rgba(140,151,162,.16),transparent 62%),
    radial-gradient(38% 30% at 78% 72%,rgba(207,222,67,.05),transparent 60%),
    radial-gradient(52% 40% at 55% 100%,rgba(120,132,145,.12),transparent 65%);
  animation:fogDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes fogDrift{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(3%,-2%,0) scale(1.08)}
  100%{transform:translate3d(-1%,2%,0) scale(1.03)}
}

/* ---------- Splash ---------- */

.splash{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--black);
  display:grid;
  place-items:center;
  animation:splashOut .9s var(--ease) 1.9s forwards;
}
.splash.is-done{opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
/* Red de seguridad final: si la transición nunca corre, el splash igual desaparece */
.splash.is-gone{display:none !important}

@keyframes splashOut{to{opacity:0;visibility:hidden;pointer-events:none}}

.splash__inner{text-align:center;width:min(420px,72vw)}
.splash__logo{width:100%;opacity:0;animation:splashIn .9s var(--ease) .15s forwards}
@keyframes splashIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.splash__bar{
  margin-top:1.6rem;
  height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.splash__bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:left;
  animation:splashBar 1.7s var(--ease-io) .1s forwards;
}
@keyframes splashBar{to{transform:scaleX(1)}}

/* ---------- Cursor custom ---------- */

.cursor{
  position:fixed;
  top:0;left:0;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--white);
  pointer-events:none;
  z-index:180;
  mix-blend-mode:difference;
  transform:translate3d(-50%,-50%,0);
  transition:width .28s var(--ease),height .28s var(--ease),background-color .28s var(--ease),opacity .3s;
  opacity:0;
  will-change:transform;
}
.cursor.is-on{opacity:1}
.cursor.is-hover{width:52px;height:52px;background:var(--lime)}
.cursor.is-media{width:84px;height:84px;background:var(--lime)}
.cursor__label{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.18em;
  color:#000;
  opacity:0;
  transition:opacity .2s;
  text-transform:uppercase;
}
.cursor.is-media .cursor__label{opacity:1}

html.has-cursor,
html.has-cursor a,
html.has-cursor button{cursor:none}

/* ---------- Nav ---------- */

.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem var(--pad);
  transition:background-color .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(5,5,6,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
  padding-block:.75rem;
}

.nav__brand{display:block;flex:0 0 auto}
.nav__brand img{width:clamp(112px,11vw,168px);height:auto}

.nav__links{
  display:flex;
  gap:clamp(1.1rem,2.4vw,2.6rem);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.nav__links a{
  position:relative;
  padding-block:.3rem;
  color:rgba(255,255,255,.66);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--white)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.72rem 1.35rem;
  border:1px solid var(--line);
  border-radius:100px;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{background:var(--lime);color:#000;border-color:var(--lime)}

.nav__burger{
  display:none;
  width:44px;height:44px;
  position:relative;
  flex:0 0 auto;
}
.nav__burger span{
  position:absolute;
  left:11px;
  width:22px;height:1px;
  background:var(--white);
  transition:transform .4s var(--ease),opacity .25s;
}
.nav__burger span:nth-child(1){top:19px}
.nav__burger span:nth-child(2){top:25px}
.nav__burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;
  inset:0;
  z-index:115;
  background:var(--black);
  padding:6rem var(--pad) 2.5rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:translateY(-100%);
  transition:transform .7s var(--ease);
  visibility:hidden;
}
.menu.is-open{transform:none;visibility:visible}
.menu__links{display:flex;flex-direction:column;gap:.2rem}
.menu__links a{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(2.4rem,13vw,4.5rem);
  line-height:1;
  padding-block:.35rem;
  border-bottom:1px solid var(--line-soft);
  color:rgba(255,255,255,.8);
  transition:color .3s,padding-left .4s var(--ease);
}
.menu__links a:hover,.menu__links a[aria-current="page"]{color:var(--lime);padding-left:.6rem}
.menu__foot{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.6rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fog);
  padding-top:2rem;
}
.menu__foot a:hover{color:var(--lime)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}

.hero__media{
  position:absolute;
  inset:-12% 0 -12% 0;
  z-index:-2;
  will-change:transform;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  filter:grayscale(.28) contrast(1.08) brightness(.82);
  transform:scale(1.06);
  animation:heroZoom 3s var(--ease) forwards;
}
@keyframes heroZoom{to{transform:scale(1)}}

.hero__media--mobile{display:none}

.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to top,rgba(5,5,6,.97) 0%,rgba(5,5,6,.72) 26%,rgba(5,5,6,.3) 58%,rgba(5,5,6,.52) 100%),
    linear-gradient(to right,rgba(5,5,6,.66),rgba(5,5,6,.12) 62%);
}

.hero__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--pad) clamp(2.5rem,5vw,4.5rem);
}

.hero__meta{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:1.4rem;
}
.hero__meta .kicker{color:rgba(255,255,255,.72)}

.hero__title{
  font-size:clamp(3.6rem,19.5vw,19rem);
  line-height:.78;
  letter-spacing:-.04em;
  margin:0;
  text-shadow:0 10px 60px rgba(5,5,6,.55);
}

.hero__sub{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  flex-wrap:wrap;
  margin-top:clamp(1.5rem,3vw,2.4rem);
  padding-top:1.3rem;
  border-top:1px solid var(--line);
}
.hero__tagline{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  max-width:46ch;
}

.hero__scroll{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--fog);
}
.hero__scroll i{
  display:block;
  width:52px;height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.hero__scroll i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--lime);
  transform:translateX(-100%);
  animation:scrollLine 2.4s var(--ease-io) infinite;
}
@keyframes scrollLine{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}

/* Hero interior (páginas secundarias) */

.pagehero{
  position:relative;
  min-height:clamp(58vh,70vh,760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.pagehero__media{position:absolute;inset:-10% 0;z-index:-2;will-change:transform}
.pagehero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.06) brightness(.72);
}
.pagehero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,5,6,.97),rgba(5,5,6,.5) 45%,rgba(5,5,6,.35));
}
.pagehero__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:8rem var(--pad) clamp(2.5rem,5vw,4rem);
}
.pagehero .kicker{margin-bottom:1rem}

/* ---------- Split text ---------- */

.split{display:inline-block}
.split__w{display:inline-block;white-space:nowrap}
.split__c{
  display:inline-block;
  transform:translateY(105%) rotate(4deg);
  opacity:0;
  will-change:transform,opacity;
}
.split.is-in .split__c{
  transform:none;
  opacity:1;
  transition:transform 1.05s var(--ease),opacity .8s var(--ease);
  transition-delay:var(--d,0ms);
}
/* Red de seguridad: si el JS no corre, el texto es visible igual */
.reveal[data-split]{opacity:1;transform:none}
.split:not(.is-split) .split__c{transform:none;opacity:1}

/* ---------- Reveals ---------- */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease),transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.reveal--fade{transform:none}
.reveal--right{transform:translateX(-28px)}
.reveal--clip{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease);
}
.reveal--clip.is-in{clip-path:inset(0 0 0 0)}

/* ---------- Marquee ---------- */

.marquee{
  position:relative;
  overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:clamp(1rem,2vw,1.5rem);
  background:var(--ink);
  --mq-dur:52s;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee var(--mq-dur) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{
  display:flex;
  align-items:center;
  gap:clamp(1.6rem,3.2vw,3.2rem);
  padding-right:clamp(1.6rem,3.2vw,3.2rem);
  flex:0 0 auto;
}
.marquee__item{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.35rem,3.1vw,2.5rem);
  letter-spacing:-.01em;
  color:rgba(255,255,255,.4);
  white-space:nowrap;
  transition:color .35s var(--ease);
}
.marquee__item:nth-child(3n+2){color:var(--lime);opacity:.85}
.marquee:hover .marquee__item{color:rgba(255,255,255,.68)}
.marquee__dot{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--lime);
  flex:0 0 auto;
  opacity:.7;
}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.marquee--reverse .marquee__track{animation-direction:reverse}

/* ---------- Intro editorial ---------- */

.intro{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,4rem);
}
@media(min-width:900px){
  .intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
}

.intro__statement{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,4.2rem);
  line-height:.95;
  letter-spacing:-.02em;
}
.intro__statement em{font-style:normal;color:var(--lime)}

.intro__body p{margin:0 0 1.15rem}
.intro__body p:last-child{margin-bottom:0}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(3rem,6vw,5rem);
}
.stat{
  background:var(--black);
  padding:clamp(1.4rem,2.6vw,2.2rem);
}
.stat__n{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4.4vw,3.6rem);
  line-height:1;
  letter-spacing:-.02em;
}
.stat__l{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog);
  margin-top:.65rem;
}

/* ---------- Crossfade cinematográfico (Música) ---------- */

.crossfade{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
}
@media(min-width:900px){
  .crossfade{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

.stage{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
}
@media(min-width:900px){.stage{aspect-ratio:3/4}}

.stage__img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.08);
  filter:grayscale(.3) contrast(1.06) brightness(.9);
  transition:opacity 1.5s var(--ease),transform 6.5s linear;
}
.stage__img.is-active{opacity:1;transform:scale(1)}

.stage__frame{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,6,.62),transparent 45%);
}
.stage__idx{
  position:absolute;
  left:1.1rem;bottom:1rem;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  color:var(--lime);
}

.releases{border-top:1px solid var(--line)}

.release{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.1rem;
  padding:clamp(1rem,2vw,1.5rem) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease),background-color .4s;
  position:relative;
}
.release::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--lime);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.release:hover::before{transform:scaleY(1);transform-origin:top}
.release:hover{padding-left:1.1rem}

.release__n{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--fog-dim);
  letter-spacing:.1em;
}
.release__t{
  display:block;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.1rem,2.2vw,1.75rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
.release__m{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fog);
  margin-top:.35rem;
}
.release__go{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.18em;
  color:var(--fog);
  text-transform:uppercase;
  transition:color .3s,transform .4s var(--ease);
  white-space:nowrap;
}
.release:hover .release__go{color:var(--lime);transform:translateX(4px)}

/* ---------- Sets / video cards ---------- */

.sets{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem,2.2vw,2rem);
}
/* 4 sets → rejilla 2×2, sin huérfanos y con thumbnails grandes */
@media(min-width:720px){.sets{grid-template-columns:repeat(2,1fr)}}

.set{
  display:block;
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .6s var(--ease);
}
.set:hover{border-color:rgba(207,222,67,.5);transform:translateY(-5px)}

.set__thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-3);
}
.set__thumb img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.42) contrast(1.06) brightness(.78);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.set:hover .set__thumb img{transform:scale(1.06);filter:grayscale(0) contrast(1.02) brightness(.94)}

.set__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.set__play span{
  width:62px;height:62px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  display:grid;
  place-items:center;
  backdrop-filter:blur(4px);
  transition:background-color .4s var(--ease),border-color .4s,transform .5s var(--ease);
}
.set__play svg{width:13px;height:15px;fill:var(--white);transition:fill .4s;margin-left:2px}
.set:hover .set__play span{background:var(--lime);border-color:var(--lime);transform:scale(1.08)}
.set:hover .set__play svg{fill:#000}

.set__body{
  padding:clamp(1rem,1.8vw,1.4rem);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.set__name{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.05;
}
.set__meta{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fog);
  margin-top:.45rem;
}
.set__date{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.12em;
  color:var(--lime);
  white-space:nowrap;
}

/* ---------- Tríptico de CTAs (booking / streaming / redes) ---------- */

.triptych{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
@media(min-width:900px){.triptych{grid-template-columns:repeat(3,1fr)}}

.tri{
  background:var(--black);
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem);
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  min-height:clamp(300px,34vw,420px);
  position:relative;
  overflow:hidden;
  transition:background-color .6s var(--ease);
}
.tri::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--ease);
}
.tri:hover{background:var(--ink)}
.tri:hover::after{transform:scaleX(1)}

.tri__n{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.24em;
  color:var(--lime);
}
.tri__t{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:.94;
  letter-spacing:-.02em;
}
.tri__d{
  color:var(--fog);
  font-size:.92rem;
  line-height:1.55;
  flex:1;
}
.tri__links{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

/* ---------- Botones ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:.85rem 1.5rem;
  border:1px solid var(--line);
  border-radius:100px;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;
  white-space:nowrap;
}
.btn:hover{background:var(--white);color:#000;border-color:var(--white)}
.btn--lime:hover{background:var(--lime);border-color:var(--lime)}
.btn--solid{background:var(--lime);color:#000;border-color:var(--lime)}
.btn--solid:hover{background:var(--white);border-color:var(--white)}
.btn--big{padding:1.05rem 2.1rem;font-size:.72rem}
.btn svg{width:12px;height:12px;fill:currentColor;flex:0 0 auto}

.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- Micro-parallax (Bio) ---------- */

.plx{will-change:transform}

.bio-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
}
@media(min-width:900px){
  .bio-grid{grid-template-columns:repeat(12,1fr)}
  .bio-grid__a{grid-column:1/6}
  .bio-grid__b{grid-column:7/13;padding-top:clamp(3rem,9vw,9rem)}
  .bio-grid__c{grid-column:2/7;padding-top:clamp(2rem,6vw,6rem)}
  .bio-grid__d{grid-column:7/12}
}

.figure{position:relative;overflow:hidden;background:var(--ink-2)}

/* Marco recortador del micro-parallax. Mismo criterio que los heroes
   (.pagehero__media usa inset:-10% 0): la capa que se mueve tiene que sobrar
   respecto del marco. El marco es algo más bajo que la foto (4:5), y esa
   diferencia es el aire por el que se desplaza .plx sin destapar el fondo.
   Sin esto la foto se corre y deja una banda vacía sobre el epígrafe. */
.figure__frame{
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
  aspect-ratio:4/4.6;
  display:flex;
  align-items:center;      /* centra el sobrante arriba y abajo por igual */
}
.figure__frame .plx{flex:none;width:100%}

.figure img{
  width:100%;
  display:block;
  filter:grayscale(.32) contrast(1.05) brightness(.88);
  transition:filter .8s var(--ease),transform 1.4s var(--ease);
}
.figure:hover img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.03)}
.figure figcaption{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog-dim);
  padding-top:.7rem;
}

/* ---------- Timeline ---------- */

.timeline{border-top:1px solid var(--line)}
.tl{
  display:grid;
  grid-template-columns:1fr;
  gap:.4rem 2rem;
  padding:clamp(1.3rem,2.6vw,2rem) 0;
  border-bottom:1px solid var(--line);
  transition:background-color .5s var(--ease);
}
@media(min-width:760px){
  .tl{grid-template-columns:130px minmax(0,1fr) minmax(0,1.2fr);align-items:baseline}
}
.tl__y{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--lime);
}
.tl__t{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.7rem);
  line-height:1.05;
}
.tl__d{color:var(--fog);font-size:.92rem;line-height:1.55}

/* ---------- Miembros ---------- */

.members{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.4rem,3vw,2.5rem);
}
@media(min-width:760px){.members{grid-template-columns:1fr 1fr}}

.member{
  border:1px solid var(--line);
  padding:clamp(1.4rem,2.6vw,2.2rem);
  display:flex;
  flex-direction:column;
  gap:.8rem;
  transition:border-color .5s var(--ease),background-color .5s var(--ease);
}
.member:hover{border-color:rgba(207,222,67,.45);background:var(--ink)}
.member__n{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:.98;
}
.member__r{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--lime);
}

/* ---------- Tour placeholder ---------- */

.soon{
  position:relative;
  border:1px solid var(--line);
  padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,4vw,4rem);
  text-align:center;
  overflow:hidden;
}
.soon::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px);
  pointer-events:none;
}
.soon__t{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(2.6rem,11vw,8.5rem);
  line-height:.85;
  letter-spacing:-.03em;
  position:relative;
}
/* El acento lima se reserva para la página Tour, no para el teaser del home */
.soon--accent .soon__t{color:var(--lime)}
.soon__d{
  color:var(--fog);
  max-width:52ch;
  margin:1.6rem auto 0;
  position:relative;
}

.tour-empty{border-top:1px solid var(--line)}
.tour-row{
  display:grid;
  grid-template-columns:1fr;
  gap:.4rem 2rem;
  padding:clamp(1.2rem,2.4vw,1.8rem) 0;
  border-bottom:1px solid var(--line);
  opacity:.42;
}
@media(min-width:760px){
  .tour-row{grid-template-columns:150px minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center}
}
.tour-row__d{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--fog)}
.tour-row__v{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.5rem)}
.tour-row__c{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
.tour-row__s{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog-dim);border:1px solid var(--line);border-radius:100px;padding:.35rem .8rem;justify-self:start;
}

/* ---------- Contacto ---------- */

.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,4rem);
}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

.mailcard{
  border:1px solid var(--line);
  padding:clamp(1.6rem,3.2vw,2.6rem);
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.mailcard__mail{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.15rem,3.1vw,2.1rem);
  line-height:1.05;
  word-break:break-word;
  letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.mailcard__mail:hover{color:var(--lime)}

.agency{
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.agency img{width:104px;height:auto}
.agency__t{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog);
}

.form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog);
}
.field input,.field textarea,.field select{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--white);
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:0;
  padding:.9rem 1rem;
  transition:border-color .35s var(--ease),background-color .35s;
  width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-color:var(--lime);
  background:var(--ink-2);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fog-dim)}
.form__note{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fog-dim);
  line-height:1.7;
}

.copy-ok{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lime);
  opacity:0;
  transition:opacity .3s;
}
.copy-ok.is-on{opacity:1}

/* ---------- Panel invertido (fondo claro, logo negro) ---------- */

.invert{
  background:var(--white);
  color:#000;
}
.invert .kicker{color:rgba(0,0,0,.55)}
.invert .kicker__i{color:#000}
.invert .muted{color:rgba(0,0,0,.6)}
.invert .rule{background:rgba(0,0,0,.14)}
.invert .btn{border-color:rgba(0,0,0,.2)}
.invert .btn:hover{background:#000;color:var(--white);border-color:#000}

/* ---------- Redes ---------- */

.socials{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.social{
  background:var(--black);
  padding:clamp(1.3rem,2.4vw,2rem);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  transition:background-color .45s var(--ease),color .45s;
}
.social:hover{background:var(--lime);color:#000}
.social__n{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.7rem);
  line-height:1;
}
.social__h{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  color:var(--fog);
  transition:color .45s;
}
.social:hover .social__h{color:rgba(0,0,0,.6)}

/* ---------- Footer ---------- */

.footer{
  border-top:1px solid var(--line);
  padding-block:clamp(3rem,6vw,5rem) 2rem;
  background:var(--black);
}
.footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media(min-width:860px){
  .footer__top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
}
.footer__logo{width:min(340px,80%);opacity:.92;margin-bottom:1.2rem}
.footer__col h4{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.24em;
  color:var(--fog);
  font-weight:400;
  margin-bottom:1rem;
  text-transform:uppercase;
}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.footer__col a{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:rgba(255,255,255,.75);
  transition:color .3s;
  text-transform:uppercase;
}
.footer__col a:hover{color:var(--lime)}

.footer__bar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fog-dim);
}
.footer__mgmt{display:flex;align-items:center;gap:.9rem}
.footer__mgmt img{width:84px;height:auto;opacity:.85;transition:opacity .3s}
.footer__mgmt:hover img{opacity:1}

/* ---------- Responsive ---------- */

@media(max-width:880px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .hero__media--desktop{display:none}
  .hero__media--mobile{display:block}
  .hero__title{font-size:clamp(3rem,19vw,6rem)}
  .hero__sub{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .hero__scroll{display:none}
  .bio-grid__b,.bio-grid__c{padding-top:0}
  .plx{transform:none !important}
}

@media(max-width:520px){
  .release{grid-template-columns:auto 1fr;row-gap:.3rem}
  .release__go{grid-column:2;justify-self:start}
  .section__head{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* Solo desactivamos lo verdaderamente intrusivo, nunca las micro-interacciones */
@media(prefers-reduced-motion:reduce){
  .atmos__grain{animation:none}
  .atmos__fog{animation:none}
  .hero__media img{animation:none;transform:none}
}

@media print{
  .nav,.atmos,.cursor,.splash,.marquee{display:none !important}
  body{background:#fff;color:#000}
}