/* ═══════════════════════════════════════════════════════════════
   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}
}


/* ══ REEL — la entrada ══════════════════════════════════════════
   Portado de la web de Ferran (molde 01), con una diferencia: allí
   el papel es blanco y aquí es negro, así que la tira de cartas no
   flota sobre luz sino sobre oscuridad, y la aurora deja de ser un
   tinte suave para ser la única fuente de color de la pantalla. */

.reel{position:relative;background:var(--paper)}
.reel__stage{
  position:sticky;top:0;height:100svh;width:100%;max-width:100%;
  overflow:hidden;background:var(--paper);
}
.reel__track{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;
  transform-origin:0 0;will-change:transform;z-index:1;
}
.reel__card{position:relative;flex:none;overflow:hidden;background:#141418}

/* La entrada va en color. Todo lo que viene después es monocromo, así
   que el carrusel es el único sitio donde la paleta canta. */
.reel__card > img,.reel__card > video{
  width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:contrast(1.03) blur(var(--vb));
}
.reel__card[data-keep-color] > img,
.reel__card[data-keep-color] > video{filter:blur(var(--vb))}

/* El nombre baja por el margen izquierdo. writing-mode hace el giro
   como toca — los signos giran con la línea en vez de transformar el
   bloque entero —, así que el texto sigue siendo seleccionable.

   nowrap en las dos líneas no es opcional: sin él el navegador parte
   la línea en una segunda columna vertical y el orden de lectura se
   deshace. */
.reel__title{
  position:absolute;left:var(--edge);top:50%;
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;align-items:center;gap:clamp(1.4rem,3vh,2.6rem);
  max-height:84svh;
  color:var(--ink);pointer-events:none;
  will-change:transform,opacity;z-index:30;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.reel__title b{
  white-space:nowrap;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,2.5vw,2.1rem);letter-spacing:.04em;line-height:1;
}
.reel__title i{
  white-space:nowrap;font-style:normal;
  font-size:clamp(8.5px,.62vw,10px);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
}
@media (max-height:680px){ .reel__title i{display:none} }
@media (max-width:760px){ .reel__card > img,.reel__card > video{object-position:50% 20%} }

/* ══ AURORA ═════════════════════════════════════════════════════
   Cuatro manchas radiales a la deriva. Son degradados, no sólidos
   desenfocados: un degradado que muere en transparente ya es blando
   y moverlo no cuesta nada, mientras que un desenfoque grande se
   recalcula en cada fotograma que se anima detrás.

   Sobre papel negro el gris de la web de Ferran no se vería, así que
   sin vestir la aurora arranca en un azul y un grana muy apagados —
   los del club actual —, y al pulsar un escudo toma los suyos. */
.reel__aurora{
  position:absolute;inset:-22%;
  z-index:0;pointer-events:none;overflow:hidden;
  opacity:.62;
  --au1:#123a6b; --au2:#5c1030; --au3:#4a4134;
}
:root[data-club] .reel__aurora{
  --au1:var(--club-ink);
  --au2:var(--club-accent);
  --au3:var(--club-mark);
  opacity:.8;
}
/* El desenfoque va en cada mancha, nunca en el contenedor: un filtro
   en el padre repinta el área entera cada fotograma que se mueven sus
   hijos; por elemento, cada mancha es su propia capa compuesta y
   moverla es sólo una transformación. Las escribe js/aurora.js. */
.au{
  position:absolute;top:0;left:0;display:block;
  border-radius:50%;
  filter:blur(28px) saturate(1.45);
  will-change:transform;
}
.au--1{
  width:74vmax;height:42vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au1) 94%, transparent) 0%,
    color-mix(in srgb, var(--au1) 42%, transparent) 40%, transparent 70%);
}
.au--2{
  width:62vmax;height:36vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au2) 90%, transparent) 0%,
    color-mix(in srgb, var(--au2) 38%, transparent) 42%, transparent 72%);
}
.au--3{
  width:56vmax;height:50vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au3) 82%, transparent) 0%,
    color-mix(in srgb, var(--au3) 34%, transparent) 44%, transparent 74%);
}
.au--4{
  width:50vmax;height:29vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au2) 74%, transparent) 0%,
    color-mix(in srgb, var(--au1) 32%, transparent) 48%, transparent 76%);
}


/* ══ CTA — vidrio líquido, centrado ═════════════════════════════
   La diferencia entre esto y el "glassmorphism" de manual es cuánto
   se desenfoca. Un blur de 20px da vidrio esmerilado: opaco, lechoso,
   y lo de detrás desaparece. La barra flotante de Instagram desenfoca
   poco — unos 7px — y en cambio satura y aclara lo que hay debajo.
   Por eso se ve a través: no es cristal helado, es una gota.

   Lo que lo convierte en gelatina y no en un rectángulo son los
   cantos. Hay tres reflejos interiores: uno fuerte arriba, que es el
   borde superior del vidrio recogiendo la luz; uno débil abajo, que
   es esa misma luz rebotada; y un halo interior amplio que da cuerpo
   al grosor. Sin los tres, el botón es plano.

   Y se centra sin `transform`: `left:0; right:0; margin-inline:auto`
   con `width:max-content`. Así el eje X queda libre y no pelea ni con
   el balanceo (que va en `translate`) ni con el rebote del hover (que
   va en `transform`). Tres propiedades distintas, tres trabajos. */
.cta{
  position:absolute;z-index:20;
  left:0;right:0;margin-inline:auto;
  width:max-content;max-width:min(86%,30rem);
  bottom:clamp(26px,7vh,72px);

  display:flex;align-items:center;
  gap:clamp(.85rem,1.5vw,1.4rem);
  padding:clamp(.7rem,1.25vw,.95rem) clamp(.75rem,1.5vw,1.1rem)
          clamp(.7rem,1.25vw,.95rem) clamp(1.15rem,2.1vw,1.7rem);
  border-radius:999px;
  text-decoration:none;color:#fff;
  isolation:isolate;

  /* poco desenfoque, mucha saturación: eso es lo acristalado */
  -webkit-backdrop-filter:blur(7px) saturate(200%) brightness(1.12);
  backdrop-filter:blur(7px) saturate(200%) brightness(1.12);
  background:linear-gradient(180deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.06) 44%,
    rgba(255,255,255,.13) 100%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    0 12px 34px rgba(0,0,0,.30),
    0 3px 10px rgba(0,0,0,.20),
    inset 0 1px 1px rgba(255,255,255,.66),
    inset 0 -1px 1px rgba(255,255,255,.20),
    inset 0 0 24px rgba(255,255,255,.10);

  opacity:0;pointer-events:none;
  transform:translateY(14px) scale(.96);
  transition:opacity .55s var(--e-out),
             transform .6s cubic-bezier(.34,1.46,.64,1),
             box-shadow .4s var(--e-out),
             border-color .4s var(--e-out);
}
.reel__card.is-live .cta{
  opacity:1;pointer-events:auto;transform:none;
  animation:cta-flota 5.4s ease-in-out infinite;
}
@keyframes cta-flota{
  0%,100%{translate:0 0}
  50%    {translate:0 -8px}
}

/* el brillo del canto superior, siempre puesto: es lo que hace que
   parezca que tiene grosor y no que es una capa de color */
.cta::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,.38) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,0) 60%);
  pointer-events:none;z-index:-1;
}
/* y un destello que lo recorre al pasar por encima */
.cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(105deg, transparent 40%,
             rgba(255,255,255,.34) 50%, transparent 60%);
  transform:translateX(-130%);
  transition:transform .95s var(--e-out);
  pointer-events:none;z-index:-1;
}
.reel__card.is-live .cta:hover::after{transform:translateX(130%)}

/* el rebote: sube y se hincha con una curva que se pasa de largo y
   vuelve, que es lo que se lee como gelatina */
.reel__card.is-live .cta:hover{
  transform:translateY(-4px) scale(1.035);
  border-color:rgba(255,255,255,.52);
  box-shadow:
    0 20px 48px rgba(0,0,0,.38),
    0 4px 12px rgba(0,0,0,.22),
    inset 0 1px 1px rgba(255,255,255,.80),
    inset 0 -1px 1px rgba(255,255,255,.26),
    inset 0 0 30px rgba(255,255,255,.14);
}
/* y al pulsarlo se aplasta un poco, como una gota */
.reel__card.is-live .cta:active{
  transform:translateY(-1px) scale(.975);
  transition:transform .12s ease-out;
}
.cta:focus-visible{outline:2px solid #fff;outline-offset:5px}

/* El vidrio deja pasar lo de detrás, y detrás hay cartas claras — el
   césped, la sala de GQ. Una sombra mínima, casi invisible sobre las
   oscuras, es lo que sostiene el blanco sobre las claras sin tener que
   opacar el cristal. */
.cta__body{
  display:grid;gap:.24rem;text-align:left;min-width:0;
  text-shadow:0 1px 3px rgba(0,0,0,.42), 0 0 14px rgba(0,0,0,.22);
}
.cta__k{
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.80);
}
.cta__t{
  font-size:clamp(.92rem,1.7vw,1.18rem);font-weight:600;
  letter-spacing:-.015em;line-height:1.14;
}

/* la ficha de la flecha, con su propio vidrio */
.cta__go{
  flex:none;width:clamp(36px,3vw,42px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.62);
  transition:background .35s var(--e-out),
             transform .45s cubic-bezier(.34,1.46,.64,1);
}
.cta__go svg{
  width:42%;height:auto;display:block;
  fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.reel__card.is-live .cta:hover .cta__go{
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.18));
  transform:translateX(3px) scale(1.06);
}

/* Sin backdrop-filter un vidrio poco desenfocado es casi transparente
   y el texto se pierde sobre la fotografía. Ahí se cierra a panel. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta{background:rgba(16,16,20,.80)}
}

@media (max-width:640px){
  .cta{max-width:calc(100% - var(--edge) * 2)}
  .cta__t{font-size:.98rem}
}
@media (prefers-reduced-motion:reduce){
  .cta,.cta::after,.cta__go{transition:none}
  .reel__card.is-live .cta{animation:none}
}