/* ═══════════════════════════════════════════════════════════════
   NOCTURNE — molde 02

   La inversa del molde 01. Allí la página es una galería blanca y el
   color sale sólo en la entrada; aquí es una sala oscura y la luz es lo
   que se raciona. Mismo sistema, otra temperatura.

   Una sola tipografía. Inter, exprimida: pesos capilares a tamaño de
   display contra pesos pesados a tamaño de etiqueta. Ninguna segunda
   familia — la variedad sale del peso y de la escala, que es donde
   tiene que salir.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#08080a;
  --ink:#f4f4f5;
  --ash:#74747e;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.32);

  --edge:clamp(18px, 3.4vw, 64px);
  --gut:clamp(10px, 1.5vw, 24px);
  --bay:clamp(5rem, 15vh, 13rem);
  --nav-h:clamp(52px, 6vh, 68px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.2,1);

  --f:"Inter","Helvetica Neue",Arial,sans-serif;

  --vb:0px;   /* desenfoque de movimiento, lo escribe js/flow.js */

  /* Acento de club. Monocromo hasta que se pulsa un escudo, momento en
     que js/clubs.js escribe valores reales sobre :root. Caer por defecto
     en --ink hace que todas las reglas de abajo funcionen sin vestir, y
     sin una segunda ruta de código. */
  --accent:var(--ink);
  --accent-ink:var(--ink);
  --accent-mark:var(--ink);
}

/* El bloque claro. En el molde 01 `.inv` era el negro que interrumpe el
   blanco; aquí es al revés — el papel que interrumpe la sala. */
.inv{
  --paper:#f2f2f0;
  --ink:#0a0a0b;
  --ash:#8d8d92;
  --line:rgba(10,10,11,.14);
  --line-strong:rgba(10,10,11,.3);
  background:var(--paper);
  color:var(--ink);
}

/* ── Vestido de club ────────────────────────────────────────────
   Pulsar un escudo repinta el sistema, no sólo un acento: el acento
   toma el color vivo del club, las reglas y los grises se tiñen con
   él, y los bloques claros cambian de blanco a un papel templado. La
   página sigue siendo negra — ahí está la diferencia con el molde 01,
   donde seguía siendo blanca. */
:root[data-club]{
  --accent:var(--club-accent);
  --accent-ink:color-mix(in srgb, var(--club-accent) 78%, #ffffff);
  --accent-mark:var(--club-mark);
  --paper:color-mix(in srgb, var(--club-deep) 62%, #08080a);
  --ash:color-mix(in srgb, #ffffff 44%, var(--paper));
  --line:color-mix(in srgb, var(--club-accent) 26%, rgba(255,255,255,.1));
  --line-strong:color-mix(in srgb, var(--club-accent) 46%, rgba(255,255,255,.2));
}
:root[data-club] .inv{
  --paper:#f4f3f1;
  --ink:var(--club-ink);
  --accent-ink:var(--club-ink);
  --ash:color-mix(in srgb, var(--club-ink) 48%, #ffffff);
  --line:color-mix(in srgb, var(--club-ink) 18%, transparent);
  --line-strong:color-mix(in srgb, var(--club-ink) 38%, transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-size:16px;
  line-height:1.45;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.is-loading{overflow:hidden;height:100vh}

img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0}

::selection{background:var(--accent-ink);color:#08080a}

.edge{padding-inline:var(--edge)}
.bay{padding-block:var(--bay)}

/* ── Tipografía ─────────────────────────────────────────────── */

.meta{
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.3;
  font-feature-settings:"tnum" 1;
}
.meta--ash{color:var(--ash)}

.kicker{
  display:block;
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ash);
}
:root[data-club] .kicker{color:var(--accent-ink)}

.d-heavy{font-weight:700;text-transform:uppercase;line-height:.82;letter-spacing:-.045em}
.d-light{font-weight:200;line-height:.94;letter-spacing:-.035em}
.d-xxl{font-size:clamp(3.2rem,15vw,15rem)}
.d-xl {font-size:clamp(2.6rem,9.5vw,9rem)}
.d-lg {font-size:clamp(2rem,6vw,5.6rem)}
.d-md {font-size:clamp(1.5rem,3.6vw,3.2rem)}

/* La cifra. Es el motivo gráfico de este molde, así que tiene su propia
   clase: tabular, muy apretada, y pensada para ir enorme. */
.d-num{
  font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.06em;line-height:.78;
}

.body-lg{
  font-size:clamp(1.05rem,1.55vw,1.45rem);
  font-weight:300;line-height:1.45;letter-spacing:-.012em;max-width:42ch;
}
.body-sm{
  font-size:clamp(.92rem,1.05vw,1.05rem);
  font-weight:300;line-height:1.6;letter-spacing:-.005em;max-width:52ch;color:var(--ash);
}

.rule{display:block;height:1px;background:var(--accent-ink);transform-origin:left;transform:scaleX(0)}

[data-split-lines]{display:block}
.sl{display:block;overflow:hidden;padding-block:.16em;margin-block:-.16em}
.sl > i{display:block;font-style:normal;will-change:transform}
.line{display:block;overflow:hidden;padding-block:.18em;margin-block:-.18em}
.line > span{display:block;will-change:transform}
.wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.14em;margin-block:-.14em}
.wd > i{display:inline-block;font-style:normal;will-change:transform,opacity}

/* ── Cromo ──────────────────────────────────────────────────── */

/* Sobre negro el grano va en screen, no en multiply: multiply sobre un
   fondo casi negro no hace absolutamente nada. */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite;
  mix-blend-mode:screen;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s;
}
.cursor.is-on{opacity:1}
.cursor__dot{
  display:block;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:#fff;transition:transform .4s var(--e-out);
}
.cursor.is-big .cursor__dot{transform:scale(4.2)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── Enlaces de barra: sólo tipografía, sin cajas ────────────────
   El hover es una regla que se dibuja bajo la palabra, nunca un cambio
   de opacidad — una etiqueta apagada se lee como deshabilitada, no como
   señalada. */

.btn{
  display:inline-block;position:relative;
  padding:2px 0;
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  background:none;border:0;
}
.btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);transform-origin:left}
.btn:focus-visible{outline:none}
.btn--lang{letter-spacing:.14em}
.btn--lang.is-on::after{transform:scaleX(1)}

/* ── Loader ─────────────────────────────────────────────────── */

.loader{position:fixed;inset:0;z-index:9800;background:#08080a;display:grid;place-items:center}
.loader__canvas{position:absolute;inset:0;width:100%;height:100%;will-change:filter,transform,opacity}
.loader__ui{
  position:absolute;inset:0;padding:var(--edge);
  display:flex;flex-direction:column;justify-content:space-between;
  color:#f4f4f5;pointer-events:none;
  transition:opacity .3s linear;
}
.loader__row{display:flex;justify-content:space-between;align-items:baseline}
.loader__count{font-variant-numeric:tabular-nums}

/* ── Barra ──────────────────────────────────────────────────────
   Nunca una capa en difference: eso sólo es fiable sobre casi negro o
   casi blanco, y aquí la entrada acaba siendo una fotografía a sangre
   que cae en tonos medios. Es explícita: tipo claro por defecto, tipo
   oscuro sobre bloques que se declaran claros, y un velo suave debajo
   para que ninguna fotografía se la coma. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  height:var(--nav-h);padding-inline:var(--edge);
  display:flex;align-items:center;gap:var(--gut);
  color:#f4f4f5;
  opacity:0;transform:translateY(-10px);
  transition:color .45s var(--e-io);
}
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) * 2.1);
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events:none;z-index:-1;
  transition:background .45s var(--e-io);
}
.nav[data-on="light"]{color:#0a0a0b}
.nav[data-on="light"]::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,0));
}
.nav.is-in{opacity:1;transform:none;transition:opacity .9s var(--e-out),transform .9s var(--e-out),color .45s var(--e-io)}
.nav__left{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.nav .btn{color:currentColor}
.nav .btn[aria-current="page"]::after{transform:scaleX(1)}

/* La marca de la barra es la cifra, no un monograma trazado: así un
   molde sirve para cualquier jugador sin volver a dibujar nada. */
.nav__mark{
  display:block;flex:none;color:currentColor;
  font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(15px,1.5vw,20px);letter-spacing:-.05em;line-height:1;
}
.nav__links{display:flex;gap:clamp(14px,1.8vw,30px);margin-left:auto;align-items:center}
.nav__lang{display:flex;gap:12px;margin-left:clamp(22px,3vw,52px)}
@media (max-width:820px){ .nav__links{display:none} }

/* ══ MENÚ MÓVIL ═════════════════════════════════════════════════ */

.burger{
  display:none;position:relative;z-index:2;
  width:30px;height:20px;margin-left:auto;
  cursor:pointer;background:none;border:0;padding:0;
}
.burger span{
  position:absolute;left:0;right:0;height:1.5px;
  background:currentColor;
  transition:transform .45s var(--e-io),opacity .3s linear;
}
.burger span:nth-child(1){top:5px}
.burger span:nth-child(2){bottom:5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-6.5px) rotate(-45deg)}
.burger:focus-visible{outline:1px solid currentColor;outline-offset:6px}

.menu{
  position:fixed;inset:0;z-index:7900;
  background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + var(--edge)) var(--edge) var(--edge);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--e-io);
  pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}

.menu__links{display:flex;flex-direction:column;gap:clamp(.4rem,1.6vh,1rem)}
.menu__link{
  display:block;
  font-size:clamp(2rem,11vw,3.6rem);
  font-weight:200;letter-spacing:-.04em;line-height:1.02;
  color:var(--ink);
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out);
  transition-delay:calc(var(--i) * 45ms);
}
body.menu-open .menu__link{opacity:1;transform:none}
.menu__link[aria-current="page"]{color:var(--accent-ink)}
.menu__link[aria-current="page"]::after{
  content:"";display:inline-block;width:.32em;height:.32em;
  margin-left:.4em;vertical-align:.18em;border-radius:50%;
  background:var(--accent);
}

.menu__foot{
  margin-top:auto;padding-top:clamp(1.6rem,5vh,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  border-top:1px solid var(--line);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--e-out) .22s,transform .6s var(--e-out) .22s;
}
body.menu-open .menu__foot{opacity:1;transform:none}
.menu__lang{display:flex;gap:14px}

/* aquí sí se llega a todos los escudos, a diferencia de la barra */
.menu .crests{gap:16px}
.menu .crest{display:grid}
.menu .crest img{width:30px}
.menu .crest--now img{width:40px}
.menu .crest__yrs{display:none}

@media (max-width:820px){ .burger{display:block} .nav__lang{display:none} }
@media (min-width:821px){ .menu{display:none} }

/* ── Escudos ────────────────────────────────────────────────────
   En escala de grises hasta que se pulsan. El halo es lo que permite
   que un escudo se apoye sobre una fotografía clara y sobre un capítulo
   negro sin llevar una placa detrás. */

.crests{display:flex;align-items:center;gap:clamp(7px,.9vw,14px)}
.crest{
  position:relative;display:grid;place-items:center;
  cursor:pointer;background:none;border:0;padding:0;line-height:0;
}
.crest img{
  width:clamp(19px,1.75vw,26px);height:auto;object-fit:contain;
  filter:grayscale(1) contrast(1.15)
         drop-shadow(0 0 1px rgba(0,0,0,.85))
         drop-shadow(0 0 3px rgba(255,255,255,.28));
  transition:filter .45s var(--e-io),transform .45s var(--e-out);
}
/* el club de hoy es simplemente más grande — ni placa, ni etiqueta */
.crest--now img{width:clamp(27px,2.5vw,37px)}
.crest:hover img,.crest:focus-visible img{transform:translateY(-2px)}
.crest.is-on img,.crest.is-front img{
  filter:drop-shadow(0 0 1px rgba(0,0,0,.8))
         drop-shadow(0 0 4px rgba(255,255,255,.3));
}
.crest:focus-visible{outline:1px solid var(--accent-ink);outline-offset:4px}
.crest::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--e-out);
}
.crest.is-on::after{transform:scaleX(1)}
.crest__yrs{
  position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);
  white-space:nowrap;color:var(--ash);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.crest:hover .crest__yrs{opacity:1}

@media (max-width:640px){
  .crest{display:none}
  .crest--now{display:grid}
  .crest__yrs{display:none}
}

/* ══ VAULT — la entrada ═════════════════════════════════════════
   Una baraja en perspectiva. El escenario lleva la perspectiva, la
   baraja lleva preserve-3d y las cartas viven en translateZ. La
   perspectiva va en el padre y no en cada carta a propósito: si cada
   carta tuviera la suya, todas compartirían punto de fuga en su propio
   centro y el apilado se desmontaría. */

.vault{position:relative;background:var(--paper)}
.vault__stage{
  position:sticky;top:0;height:100svh;width:100%;max-width:100%;
  overflow:hidden;
  perspective:1500px;
  perspective-origin:50% 46%;
}
.vault__deck{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.vault__card{
  position:absolute;top:50%;left:50%;
  width:var(--cw,320px);height:var(--ch,420px);
  overflow:hidden;background:#111114;
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.65);
}
.vault__card > img,.vault__card > video{
  width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:grayscale(1) contrast(1.1) blur(var(--vb));
}
/* La entrada es el único sitio donde el color puede cantar. Todo lo que
   viene después se queda en monocromo, y por eso funciona. */
.vault__card[data-keep-color] > img,
.vault__card[data-keep-color] > video{filter:contrast(1.04) blur(var(--vb))}

/* La cifra vive detrás de la baraja, en contorno, enorme. Es la marca
   de agua del molde y lo que hace que la entrada sea suya y no de una
   plantilla cualquiera. */
.vault__ghost{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:min(76vh,58vw);
  color:transparent;
  -webkit-text-stroke:1.5px var(--line-strong);
  pointer-events:none;z-index:0;
  will-change:transform,opacity;
}
.vault__title{
  position:absolute;left:var(--edge);bottom:calc(var(--edge) + 1.2rem);
  z-index:300;pointer-events:none;
  display:flex;flex-direction:column;gap:.5rem;
  will-change:transform,opacity;
  mix-blend-mode:difference;color:#fff;
}
.vault__title b{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,3.4vw,2.8rem);
  letter-spacing:-.035em;line-height:.95;
}
.vault__title i{
  font-style:normal;
  font-size:clamp(8.5px,.62vw,10px);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;opacity:.72;
}
.vault__count{
  position:absolute;right:var(--edge);bottom:calc(var(--edge) + 1.2rem);
  z-index:300;color:var(--ash);pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* ══ ORBIT — la trayectoria en metal ════════════════════════════ */

.orbit{position:relative;background:var(--paper)}
.orbit__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.orbit__canvas{position:absolute;inset:0;width:100%;height:100%}
/* el degradado que convierte la copia volcada en un reflejo */
.orbit__stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top,var(--paper) 12%,transparent);
  pointer-events:none;z-index:2;
}
.orbit__head{
  position:absolute;left:var(--edge);right:var(--edge);top:calc(var(--nav-h) + 2.2rem);
  z-index:3;pointer-events:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
}
.orbit__label{
  position:absolute;left:var(--edge);right:var(--edge);bottom:calc(var(--edge) + 1rem);
  z-index:3;pointer-events:none;text-align:center;
}
.orbit__name{
  display:block;font-weight:200;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.6rem,4.6vw,3.6rem);
  transition:color .5s var(--e-io);
}
.orbit__years{display:block;margin-top:.9rem;color:var(--ash)}

/* ══ STRATA — paneles que se apilan ═════════════════════════════ */

.strata{position:relative}
.strata__panel{
  position:sticky;top:0;height:100svh;
  overflow:hidden;background:#0c0c0f;
  transform-origin:50% 0%;
  will-change:transform,clip-path;
}
.strata__panel img,.strata__panel video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.08) blur(var(--vb));
  will-change:transform;
}
.strata__panel[data-keep-color] img{filter:contrast(1.03) blur(var(--vb))}
/* el velo que apaga el panel según lo tapa el siguiente: una capa
   propia, para no tocar el filtro de la imagen y perder el grayscale */
.strata__panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:#000;opacity:var(--dim,0);
}
.strata__meta{
  position:absolute;left:var(--edge);right:var(--edge);bottom:var(--edge);
  z-index:2;display:flex;justify-content:space-between;align-items:end;gap:1rem;
  color:#fff;mix-blend-mode:difference;
}
.strata__n{font-variant-numeric:tabular-nums}
.strata__t{
  font-weight:200;letter-spacing:-.04em;line-height:1;
  font-size:clamp(1.8rem,5.4vw,4.6rem);
}

/* ══ SPLIT — copia fija, imágenes corriendo ═════════════════════ */

.split{padding-block:var(--bay)}
.split__grid{display:grid;gap:var(--gut)}
@media (min-width:900px){
  .split__grid{grid-template-columns:1fr 1.15fr;align-items:start;gap:clamp(2rem,6vw,7rem)}
  .split__copy{position:sticky;top:calc(var(--nav-h) + 12vh);align-self:start}
}
.split__stack{display:grid;gap:clamp(2rem,6vw,5rem)}
.split__fig{position:relative;overflow:hidden;background:#111114}
.split__fig img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform;
}
.split__fig:nth-child(odd){aspect-ratio:4/5}
.split__fig:nth-child(even){aspect-ratio:3/4;margin-left:clamp(0px,8vw,7rem)}
.split__fig figcaption{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference;
}

/* ── Statement ──────────────────────────────────────────────── */

.statement{padding-block:var(--bay)}
.statement__name{
  font-size:clamp(2.1rem,10.4vw,10rem);
  line-height:.9;
  transform-origin:left center;
  will-change:transform,opacity;
  white-space:nowrap;
}
.statement__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;
  padding-bottom:1.2rem;margin-bottom:clamp(2rem,5vw,4rem);
  border-bottom:1px solid var(--line);color:var(--ash);
}
.statement__grid{display:grid;gap:var(--gut)}
@media (min-width:900px){.statement__grid{grid-template-columns:1.3fr 1fr;align-items:end}}

/* ── Plano anclado a sangre ─────────────────────────────────── */

.frame{position:relative;height:200vh;background:var(--paper)}
.frame__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.frame__pin img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform;
}
.frame__pin[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.frame__cap{
  position:absolute;left:var(--edge);right:var(--edge);bottom:var(--edge);
  display:flex;justify-content:space-between;align-items:end;gap:1rem;
  color:#fff;mix-blend-mode:difference;
}
.frame__word{
  position:absolute;left:var(--edge);right:var(--edge);top:50%;
  transform:translateY(-50%);color:#fff;mix-blend-mode:difference;
  text-align:center;pointer-events:none;
}

/* ── Dúo desplazado ─────────────────────────────────────────── */

.duo{display:grid;gap:var(--gut);padding-block:var(--bay)}
@media (min-width:820px){
  .duo{grid-template-columns:1.25fr 1fr;align-items:start}
  .duo__b{margin-top:22vh}
}
.duo figure{position:relative;overflow:hidden;background:#111114}
.duo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.duo__a{aspect-ratio:4/5}
.duo__b{aspect-ratio:3/4}
.duo figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference}

/* ── Capítulo horizontal ────────────────────────────────────── */

.rail{position:relative;background:var(--paper)}
.rail__pin{height:100svh;max-width:100%;overflow:hidden;display:flex;align-items:center}
.rail__track{display:flex;align-items:center;gap:var(--gut);padding-inline:var(--edge);will-change:transform}
.rail__lead{
  flex:none;width:clamp(220px,28vw,420px);
  display:flex;flex-direction:column;justify-content:space-between;
  height:54svh;padding-right:clamp(1rem,3vw,3rem);
}
.rail__lead .rl-t{font-weight:200;font-size:clamp(1.8rem,4.6vw,4rem);letter-spacing:-.04em;line-height:.95}
.rl{flex:none;position:relative;overflow:hidden;background:#111114}
.rl img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.rl figcaption{position:absolute;left:10px;bottom:10px;color:#fff;mix-blend-mode:difference}
.rl--tall{width:clamp(230px,26vw,430px);height:74svh}
.rl--wide{width:clamp(320px,42vw,700px);height:54svh}
.rl--sm{width:clamp(170px,18vw,290px);height:38svh}

/* ── Índice de capítulos ────────────────────────────────────── */

.chapters{padding-block:var(--bay)}
.chapters ol{border-top:1px solid var(--line);margin-top:clamp(1.6rem,4vw,3rem)}
.ch-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding-block:clamp(1rem,2.6vw,2rem);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.ch-row--dated{grid-template-columns:auto 1fr auto}
.ch-row__n{font-size:10px;letter-spacing:.2em;color:var(--ash);font-variant-numeric:tabular-nums}
.ch-row__t{
  font-size:clamp(1.6rem,5.2vw,4.4rem);font-weight:200;letter-spacing:-.04em;line-height:1;
  display:inline-block;transition:transform .6s var(--e-out),color .4s var(--e-io);
}
.ch-row:hover .ch-row__t{transform:translateX(clamp(8px,1.6vw,26px));color:var(--accent-ink)}
.ch-row__d{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
/* la fila entera se enciende, no sólo su etiqueta */
.ch-row::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--accent);opacity:.1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out);
}
.ch-row:hover::before{transform:scaleX(1)}

/* ── Datos y marcadores ─────────────────────────────────────── */

.facts{display:grid;gap:0}
.fact{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:clamp(.7rem,1.6vw,1.1rem);border-bottom:1px solid var(--line);
}
.fact:first-child{border-top:1px solid var(--line)}
.fact b{font-weight:500;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.025em}
.fact span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);font-variant-numeric:tabular-nums}

.boards{display:grid;gap:var(--gut)}
@media (min-width:820px){.boards{grid-template-columns:1fr 1fr}}
.board{border:1px solid var(--line-strong);padding:clamp(1.1rem,2.6vw,2rem)}
.board__k{display:block;color:var(--ash);margin-bottom:clamp(1.6rem,4vw,3rem)}
.board__teams{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  font-size:clamp(1.1rem,2.8vw,2.3rem);font-weight:600;letter-spacing:-.04em;
  text-transform:uppercase;line-height:1;
}
.board__v{font-weight:200;color:var(--ash)}
.board__meta{display:flex;justify-content:space-between;gap:1rem;margin-top:clamp(1rem,2.6vw,2rem);color:var(--ash)}

/* ── Cifras grandes ─────────────────────────────────────────── */

.tally{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);margin-top:clamp(2rem,5vw,4rem)}
@media (min-width:860px){.tally{grid-template-columns:repeat(4,1fr)}}
.tally__cell{border-top:1px solid var(--line-strong);padding-top:clamp(.9rem,2vw,1.4rem)}
.tally__v{
  display:block;font-size:clamp(2.6rem,7vw,6rem);
  font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.055em;line-height:.85;
  color:var(--accent-ink);
}
/* Un dato sin confirmar baja a tamaño de etiqueta. A cuerpo de cifra se
   sale de su celda y se come la de al lado — y además mentiría sobre su
   propia importancia: es una ausencia, no un titular. */
.tally__v.is-tbd{
  font-size:clamp(.9rem,1.5vw,1.15rem);
  font-weight:400;letter-spacing:.01em;line-height:1.25;
  color:var(--ash);
  /* se reserva la altura de una cifra para que la fila no se descuadre */
  min-height:clamp(2.2rem,6vw,5.1rem);
  display:flex;align-items:flex-end;
}
.tally__k{display:block;margin-top:.9rem;color:var(--ash)}

/* ── Pie ────────────────────────────────────────────────────── */

.foot{padding-block:var(--bay) var(--edge)}
.foot__grid{display:grid;gap:2.6rem;padding-bottom:clamp(3rem,10vh,7rem)}
@media (min-width:820px){.foot__grid{grid-template-columns:repeat(3,1fr);gap:var(--gut)}}
.foot__col{display:flex;flex-direction:column;align-items:start;gap:.35rem}
.foot__col .kicker{margin-bottom:.9rem}
.foot__a{font-size:clamp(1rem,1.9vw,1.4rem);font-weight:300;letter-spacing:-.02em;position:relative}
.foot__a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.foot__a:hover::after{transform:scaleX(1);transform-origin:left}
.foot__a:hover{color:var(--accent-ink)}
.foot__base{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:1rem}

/* ── Cabecera de página interior ────────────────────────────── */

.phead{padding-block:calc(var(--nav-h) + var(--bay)) var(--bay)}
.phead__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
  margin-bottom:clamp(2rem,6vw,5rem);color:var(--ash);
}
.phead__lede{margin-top:clamp(2rem,5vw,3.5rem)}

/* ── Retícula editorial ─────────────────────────────────────── */

.grid12{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:860px){.grid12{grid-template-columns:repeat(12,1fr)}}
.cell{position:relative;overflow:hidden;background:#111114;transition:transform .5s var(--e-out)}
.cell img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.cell[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.cell figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference}

.c-2{grid-column:span 2}.c-3{grid-column:span 3}.c-4{grid-column:span 4}
.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}
.c-8{grid-column:span 8}.c-12{grid-column:1/-1}
@media (max-width:859px){
  .c-2,.c-3,.c-4,.c-5,.c-6,.c-7,.c-8{grid-column:span 1}
  .c-12{grid-column:1/-1}
}
.r-45{aspect-ratio:4/5}.r-34{aspect-ratio:3/4}.r-11{aspect-ratio:1/1}
.r-32{aspect-ratio:3/2}.r-169{aspect-ratio:16/9}
.push{margin-top:clamp(2rem,10vw,9rem)}

/* ══ CASCADE ════════════════════════════════════════════════════ */

.cascade{position:relative;height:430vh}
.cascade__pin{
  position:sticky;top:0;height:100svh;max-width:100%;overflow:hidden;
  display:grid;place-items:center;
}
.cascade__item{
  position:absolute;
  width:min(30vw,300px);aspect-ratio:4/5;
  overflow:hidden;background:#111114;
  will-change:transform,opacity;opacity:0;
}
.cascade__item img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.08) blur(var(--vb))}
.cascade__item[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.cascade__item--wide{width:min(42vw,460px);aspect-ratio:3/2}
.cascade__item--tall{width:min(26vw,270px);aspect-ratio:2/3}
.cascade__copy{
  position:absolute;left:var(--edge);right:var(--edge);
  top:50%;transform:translateY(-50%);
  text-align:center;pointer-events:none;z-index:40;
  mix-blend-mode:difference;color:#fff;
}

/* ══ SWAP ═══════════════════════════════════════════════════════ */

.swap{position:relative;height:300vh}
.swap__pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.swap__stack{position:relative;display:grid;place-items:center;width:100%}
.swap__w{
  grid-area:1/1;
  transition:opacity .45s var(--e-out),transform .45s var(--e-out);
  will-change:opacity,transform;text-align:center;
}

/* ══ BANDA ══════════════════════════════════════════════════════ */

.band{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(.5rem,1.2vw,.9rem)}
.band__track{display:flex;width:max-content;will-change:transform}
.band__track > span{
  display:inline-block;white-space:nowrap;
  font-size:clamp(1.4rem,4.4vw,4rem);font-weight:200;
  letter-spacing:-.035em;line-height:1.05;
  padding-inline:clamp(.5rem,1.6vw,1.6rem);
}
.band__track .dot{font-weight:200;color:var(--accent);transition:color .5s var(--e-io)}

/* ══ CAMPAÑAS ═══════════════════════════════════════════════════ */

.camp{padding-block:var(--bay)}
.camp__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:860px){.camp__grid{grid-template-columns:repeat(12,1fr)}}
.camp__card{position:relative;overflow:hidden;background:#111114;transition:transform .5s var(--e-out)}
.camp__card img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.camp__card figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;justify-content:space-between;align-items:end;gap:1rem;
  color:#fff;mix-blend-mode:difference;
}
.camp__brand{font-size:clamp(.95rem,1.8vw,1.35rem);font-weight:600;letter-spacing:-.02em}

/* ══ INSTAGRAM ══════════════════════════════════════════════════ */

.feed{padding-block:var(--bay)}
.feed__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
  margin-bottom:clamp(1.4rem,3.5vw,2.6rem);
}
.feed__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:640px){.feed__grid{grid-template-columns:repeat(4,1fr)}}
.ig{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#111114;will-change:transform,opacity}
.ig img{
  width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.08) blur(var(--vb));
  transition:transform .7s var(--e-out);
}
.ig[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.ig:hover img{transform:scale(1.06)}
/* difference va bien sobre una foto casi clara o casi oscura, pero estas
   celdas no son ni una cosa ni la otra — un pie sobre un tono medio
   desaparece. Velo abajo y el pie en blanco encima. */
.ig::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  pointer-events:none;
}
.ig__cap{position:absolute;left:10px;bottom:9px;z-index:2;color:#fff}
.feed__note{margin-top:1.2rem}

/* ── Barrido líquido: sólo mientras la página se mueve ───────── */

.flow{
  position:fixed;inset:0;z-index:7000;
  width:100%;height:100%;pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:0;transition:opacity .45s linear;
}

/* ── Huecos: una imagen que todavía no está ──────────────────────
   Un molde recién copiado no tiene fotos. En vez del icono roto, el
   hueco se dibuja con el mismo encuadre, una diagonal fina y el nombre
   del archivo que falta. La maqueta se puede enseñar antes de tenerlo
   todo, y de un vistazo se ve qué queda por traer. */

.is-slot{
  background-image:linear-gradient(to top right,
    transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));
  outline:1px solid var(--line);outline-offset:-1px;
}
.is-slot > img{visibility:hidden}
.slot__label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--ash);z-index:3;white-space:nowrap;pointer-events:none;
  font-size:9.5px;
}

/* ── Primitivas de aparición ────────────────────────────────── */

[data-reveal]{opacity:0}
[data-img]{will-change:transform}

/* Primero las caras. Un recorte cover centra en el pecho de una figura
   de pie; estos valores suben cada encuadre hacia la cabeza, y lo suben
   más en un móvil, donde la misma fotografía se recorta mucho más. */
@media (max-width:760px){
  .vault__card > img,.vault__card > video{object-position:50% 20%}
  .frame__pin img,.duo img,.rl img,.cell img,.camp__card img,
  .strata__panel img,.split__fig img{object-position:50% 18%}
  .cascade__item img{object-position:50% 16%}
  .ig img{object-position:50% 20%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .grain{animation:none}
  .flow{display:none}
  :root{--vb:0px !important}
  [data-reveal]{opacity:1}
}