/* ==========================================================================
   VILLANOMANÍA · World Tour — landing
   Calco del layout de tour: foto a sangre, cartel arriba, X de lazos celestes
   cruzando el centro y tira de cajas de vídeo pisando el borde inferior.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía de titulares — Mechapunk (Press Gang Studios)
   OJO licencia: freeware solo para no comercial / cómic independiente.
   Uso comercial requiere pagar licencia. Ver fonts/LICENCIA-mechapunk.txt

   unicode-range: el font mapea Á É Í Ó Ú Ñ pero con el glifo VACÍO, así que
   sin esta restricción esas letras desaparecían en vez de caer al font de
   respaldo. Limitado a ASCII, cualquier acentuada la dibuja --font.
   Aun así, mejor evitar acentos en los titulares: se nota el cambio de letra.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Chill Chirp";
  src:url("../fonts/ChillChirp.otf") format("opentype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  /* La demo trae los dígitos 0-4 como caja vacía (el 5-9 sí están). Excluimos
     TODO U+0030-0039 para que los números los dibuje entero el font siguiente
     de la pila (Mechapunk) y no salgan mezclados dentro de una misma cifra. */
  unicode-range:U+0000-002F, U+003A-10FFFF;
}
@font-face{
  font-family:"Mechapunk";
  src:url("../fonts/Mechapunk-Regular.otf") format("opentype");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020-007E;
}
@font-face{
  font-family:"Mechapunk";
  src:url("../fonts/Mechapunk-BoldItalic.otf") format("opentype");
  font-weight:400 900;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0020-007E;
}

:root{
  --cyan:        #4fe3ff;
  --cyan-hot:    #a3f4ff;
  --cyan-deep:   #17b6d8;
  --ink:         #04080c;
  --ink-2:       #0a141b;
  --smoke:       #9fc9d8;
  --white:       #ffffff;

  /* Azul de las alas del logo, aclarado. El rango muestreado de logo.png va de
     #0898b8 a #08b0d0; este es un punto por encima, más luminoso. */
  --logo-blue:   #2bbfe2;

  --shell:       min(1280px, 92vw);
  --head-h:      88px;

  /* Encuadre de la foto del hero. La silueta recortada usa el mismo valor
     para que ambas capas casen al píxel. */
  --hero-pos:    center 22%;

  /* Oscurecido del hero. Se aplica dos veces: al fondo y, enmascarado,
     a la silueta — así el recorte no queda más claro que la foto. */
  --hero-veil:
    linear-gradient(180deg, rgba(2,6,10,.82) 0%, rgba(2,6,10,.28) 26%, rgba(2,6,10,0) 46%),
    radial-gradient(120% 75% at 50% 42%, transparent 40%, rgba(2,6,10,.5) 88%),
    linear-gradient(0deg, #04080c 0%, rgba(4,8,12,.72) 12%, transparent 34%);

  /* Chill Chirp para el texto; Mechapunk cubre los dígitos que le faltan;
     el resto es red de seguridad para acentos y símbolos raros. */
  --font: "Chill Chirp", "Mechapunk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-display: "Mechapunk", var(--font);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

::selection{ background:var(--cyan); color:#00131a; }

/* --------------------------------------------------------------------------
   Marquesina infinita (.mq)
   js/app.js clona .mq__seq hasta pasar del ancho del contenedor y guarda el
   ancho de UNA secuencia en --seq-w. La animación desplaza exactamente esa
   distancia, así que al terminar el fotograma coincide con el inicial: no hay
   salto ni hueco, da igual lo ancha que sea la pantalla.
   -------------------------------------------------------------------------- */
.mq{
  display:flex; align-items:center;
  white-space:nowrap;
  will-change:transform;
}
.mq__seq{
  display:flex; align-items:center;
  flex:0 0 auto;
}
.mq.is-ready{
  animation:mq-left var(--mq-dur, 30s) linear infinite;
}
.mq.is-ready[data-dir="right"]{ animation-name:mq-right; }

@keyframes mq-left{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-1 * var(--seq-w)),0,0); }
}
@keyframes mq-right{
  from{ transform:translate3d(calc(-1 * var(--seq-w)),0,0); }
  to  { transform:translate3d(0,0,0); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--head-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,44px);
  transition:background .35s ease, backdrop-filter .35s ease, height .35s ease;
}
/* El cristal del header va en un pseudo-elemento, no en el header.
   Si el backdrop-filter se pone en el propio .header, este pasa a ser el
   "backdrop root" de sus hijos y el desenfoque del panel del menú deja de
   tener nada que desenfocar: se veía como un tapón opaco. Como ::before es
   hermano del panel y no su padre, cada uno difumina lo suyo. */
.header::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(4,8,12,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(79,227,255,.18);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
/* Solo al hacer scroll. Con el menú abierto el header NO se oscurece: se queda
   como esté, el negro es cosa del panel. */
.header.is-stuck::before{ opacity:1; }

.header.is-stuck{ height:66px; }

.brand{
  display:flex; align-items:center; text-decoration:none;
  /* Al abrir el menú se desplaza al centro y crece un poco. El punto de origen
     es el borde izquierdo para que js/app.js pueda calcular el desplazamiento
     exacto sin que la escala lo descuadre. */
  transform-origin:left center;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.brand__logo{
  height:clamp(52px,7vw,84px); width:auto;
  filter:drop-shadow(0 0 22px rgba(79,227,255,.5));
  transition:height .35s ease;
}
.header.is-stuck .brand__logo{ height:46px; }
.brand__fallback{
  display:none;
  font-size:22px; font-weight:900; letter-spacing:-.02em;
  color:var(--cyan); text-shadow:0 0 18px rgba(79,227,255,.7);
}
.brand.is-textonly .brand__logo{ display:none; }
.brand.is-textonly .brand__fallback{ display:block; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav a{
  color:rgba(255,255,255,.86); text-decoration:none;
  font-size:14px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  transition:color .2s ease;
}
.nav a:hover{ color:var(--cyan); }
.nav__cta{
  color:#00151d !important;
  background:var(--cyan);
  padding:10px 20px; border-radius:999px;
  text-shadow:none;
  box-shadow:0 0 22px rgba(79,227,255,.4);
}
.nav__cta:hover{ background:var(--cyan-hot); }

.burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.burger span{ width:26px; height:2px; background:var(--white); transition:.3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero — la foto manda
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  /* 75vw = la proporción de hero.jpg (1086/1448). En pantallas anchas el hero
     crece hasta que la foto cabe entera de alto: así la cara nunca sube hasta
     el botón y las suelas siguen dentro del cuadro. En pantallas normales y en
     móvil manda 100svh y esto no entra en juego. */
  min-height:max(100svh, 75vw);
  overflow:hidden;
  isolation:isolate;
  background:#02060a;
}

.hero__photo{
  position:absolute; inset:0; z-index:1;
  background-image:url("../assets/hero.jpg");
  background-size:cover;
  background-position:var(--hero-pos);
  background-repeat:no-repeat;
}

/* Oscurecido suave para que el texto blanco respire, sin matar el humo */
.hero__vignette{
  position:absolute; inset:0; z-index:2;
  background:var(--hero-veil);
}

/* Silueta recortada (Vision), encima de .ribbon--b y debajo de .ribbon--a:
   así una banda pasa por detrás del cuerpo y la otra por delante. */
.hero__cutout{
  position:absolute; inset:0; z-index:4;
  pointer-events:none;
  background-image:url("../assets/hero-cutout.png");
  background-size:cover;
  background-position:var(--hero-pos);
  background-repeat:no-repeat;
}
/* Mismo velo que el fondo, recortado a la silueta */
.hero__cutout::after{
  content:"";
  position:absolute; inset:0;
  background:var(--hero-veil);
  -webkit-mask-image:url("../assets/hero-cutout.png");
          mask-image:url("../assets/hero-cutout.png");
  -webkit-mask-size:cover;      mask-size:cover;
  -webkit-mask-position:var(--hero-pos); mask-position:var(--hero-pos);
  -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
}

.hero__content{
  position:relative; z-index:6;
  padding:calc(var(--head-h) + clamp(10px,3vh,42px)) 20px 0;
  text-align:center;
}
.hero__kicker{
  margin:0 0 12px;
  font-size:clamp(10px,1.05vw,12px); font-weight:900; letter-spacing:.42em; text-transform:uppercase;
  color:var(--cyan);
  text-shadow:0 0 22px rgba(79,227,255,.85);
}
.hero__title{
  margin:0 auto;
  max-width:24ch;
  font-family:var(--font-display);
  font-size:clamp(28px,4.3vw,56px);
  line-height:1.06;
  font-weight:700;
  font-style:italic;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-shadow:0 6px 34px rgba(0,0,0,.8);
}

/* Tilde dibujada a mano para Mechapunk, que no tiene acentuadas.
   Se pone sobre una I normal y todo va en em, así escala con el titular.
   La inclinación imita la cursiva del propio font. */
.tilde{ position:relative; }
.tilde::after{
  content:"";
  position:absolute;
  left:.20em; top:-.02em;
  width:.115em; height:.17em;
  background:currentColor;
  transform:rotate(26deg) skewX(-6deg);
  transform-origin:50% 100%;
  border-radius:.02em;
  pointer-events:none;
}

.btn-pill{
  display:inline-block; margin-top:clamp(16px,2.4vh,26px);
  background:var(--white); color:#00131a;
  text-decoration:none;
  font-size:clamp(13px,1.3vw,15px); font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px; border-radius:12px;
  box-shadow:0 0 0 0 rgba(79,227,255,.6), 0 14px 44px rgba(0,0,0,.55);
  transition:transform .22s ease, box-shadow .3s ease, background .22s ease;
}
.btn-pill:hover{
  transform:translateY(-2px);
  background:var(--cyan-hot);
  box-shadow:0 0 0 10px rgba(79,227,255,.14), 0 16px 48px rgba(0,0,0,.6);
}
.btn-pill--big{ padding:20px 46px; border-radius:999px; font-size:15px; }

/* --------------------------------------------------------------------------
   Lazos celestes cruzados (la X)
   -------------------------------------------------------------------------- */
/* Sin z-index propio: así cada banda se ordena respecto a la silueta */
.ribbons{ position:absolute; inset:0; pointer-events:none; }

.ribbon{
  position:absolute; left:-20%; width:140%;
  height:clamp(40px, 5vw, 74px);
  display:flex; align-items:center;
  overflow:hidden;
  /* Color plano: sin degradado ni sombra interior, para que no haga relieve.
     La sombra va desplazada y muy difuminada, sin contorno duro. Al colgar de
     la propia banda gira con ella, así que cae siempre hacia su lado de abajo. */
  background:var(--logo-blue);
  color:#fff;
  box-shadow:0 14px 38px rgba(0,0,0,.45);
}
/* --a pasa por DELANTE del cuerpo, --b por DETRÁS */
.ribbon--a{ top:54%; z-index:5; transform:translateY(-50%) rotate(-18deg); }
.ribbon--b{ top:54%; z-index:3; transform:translateY(-50%) rotate(18deg); }

.ribbon__track{
  font-size:clamp(24px, 3vw, 40px);
  font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}
.ribbon__track .mq__seq{ gap:20px; padding-right:20px; }

/* Separador: el murciélago del logo en silueta blanca. Se usa el PNG como
   máscara, así que lo que se ve es su canal alfa pintado del color de la
   banda — no hace falta una versión aparte del logo en blanco. */
.ribbon__track .mq__seq > i{
  flex:0 0 auto;
  width:1.55em; height:.95em;
  background:currentColor;
  -webkit-mask:url("../assets/logo.png") center/contain no-repeat;
          mask:url("../assets/logo.png") center/contain no-repeat;
  opacity:.92;
}

/* Centrado óptico: la caja de línea reserva hueco para las descendentes, que
   esta tipografía en mayúsculas no usa, así que las letras quedaban 0.19em
   altas dentro de la banda. El murciélago, al ser una caja con alto propio,
   ya lo centra el flex. */
.ribbon__track .mq__seq > span{ transform:translateY(.19em); }

/* --------------------------------------------------------------------------
   Tira de cajas de vídeo — pisa el borde inferior del hero
   -------------------------------------------------------------------------- */
.strip{
  position:relative; z-index:20;
  margin-top:clamp(-92px, -7vh, -48px);
  padding:0 0 clamp(50px,8vw,90px);
}
.strip__rail{
  width:var(--shell); margin:0 auto;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(190px, 17vw, 250px);
  gap:clamp(12px,1.6vw,20px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Aire arriba para que el hover levante la caja sin que se recorte */
  padding:10px 0 4px;
  /* Sin barras de scroll: se arrastra y ya */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.strip__rail::-webkit-scrollbar{ display:none; }

/* El vídeo a sangre y el cristal DENTRO, tapándole el pie: el nombre del pueblo
   va sobre ese cristal. Antes el cristal era el marco de fuera y el nombre
   quedaba debajo, en su propia franja. */
.show-card{
  position:relative;
  scroll-snap-align:start;
  border-radius:20px;
  overflow:hidden;                      /* recorta el cristal con la tarjeta */
  background:#050c11;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
  opacity:0; transform:translateY(26px);
}
.show-card.is-in{ opacity:1; transform:translateY(0); }

.show-card__media{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(79,227,255,.22), transparent 72%),
    linear-gradient(180deg,#0c1e29,#050c11);
}
.show-card__media video,
.show-card__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.show-card:hover .show-card__media video,
.show-card:hover .show-card__media img{ transform:scale(1.08); }

/* Escudo del pueblo, en línea junto a su nombre y a la manera del sello de
   verificado: a opacidad plena y en em, para que escale con el texto. */
.crest{
  flex:0 0 auto;
  display:inline-block;
  height:1.7em; aspect-ratio:.575;
  margin-left:.45em;
  background:center/contain no-repeat;
  transform:translateY(-.05em);
}

/* La franja de cristal, apoyada en el pie del vídeo. El desenfoque es de
   verdad —coge lo que pasa por debajo—, y el tinte oscuro va porque el vídeo
   no se sabe cómo viene: sin él, un plano claro se come el nombre. */
.show-card__info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(9px,1vw,13px) clamp(11px,1.2vw,15px) clamp(10px,1.1vw,14px);
  background:linear-gradient(180deg, rgba(5,14,20,.30), rgba(5,14,20,.55));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.20);
}

/* Marcadores del carril: la silueta del logo en vez de un círculo. Se pinta el
   color a través del canal alfa del PNG, blanco el actual y gris los demás. */
.strip__dots{
  display:flex; gap:12px; justify-content:center; align-items:center;
  margin-top:18px;
}
.strip__dot{
  width:24px; height:15px; padding:0;
  border:0; background:rgba(255,255,255,.3);
  cursor:pointer;
  -webkit-mask:url("../assets/logo.png") center/contain no-repeat;
          mask:url("../assets/logo.png") center/contain no-repeat;
  transition:background .25s ease, transform .25s ease;
}
.strip__dot:hover{ background:rgba(255,255,255,.55); }
.strip__dot.is-active{
  background:#fff;
  transform:scale(1.25);
}
.show-card__city{
  margin:0;
  font-size:clamp(17px,1.5vw,21px); font-weight:900; letter-spacing:-.01em; line-height:1.1;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.show-card__meta{
  margin:4px 0 0;
  display:flex; align-items:center;
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.show-card__meta > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }


/* --------------------------------------------------------------------------
   Reproductor: carrusel 3D de portadas + barra de cristal
   -------------------------------------------------------------------------- */
.player{
  position:relative;
  width:var(--shell); margin:0 auto;
  padding:clamp(10px,2vw,26px) 0 clamp(40px,6vw,70px);
}
/* Luz ambiente detrás de las portadas */
.player__glow{
  position:absolute; z-index:0;
  left:50%; top:6%;
  width:min(760px,86%); height:62%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(43,191,226,.3), transparent 70%);
  filter:blur(50px);
  pointer-events:none;
}

/* A sangre: así las portadas del fondo se desvanecen con sitio de sobra en vez
   de cortarse contra el borde de la sección */
/* Logo de Spotify en blanco: se pinta el color a través del canal alfa del PNG,
   así no hace falta una versión aparte en blanco. */
.player__spotify{
  display:block;
  position:relative; z-index:2;
  width:clamp(78px,9vw,108px);
  aspect-ratio:399/120;
  margin:calc(-1 * clamp(16px,2.6vw,30px)) auto clamp(16px,2.4vw,28px);
  background:#fff;
  opacity:.55;
  -webkit-mask:url("../assets/spotify.png") center/contain no-repeat;
          mask:url("../assets/spotify.png") center/contain no-repeat;
  transition:opacity .25s ease;
}
.player__spotify:hover{ opacity:.85; }

.player__stage{
  position:relative; z-index:1;
  width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(230px,27vw,300px);
  perspective:1200px;
  transform-style:preserve-3d;
}

/* Los tres escenarios en 3D (portadas, fotos con fans y las dos tiras de
   fichas) tienen el mismo problema: las de los lados van hundidas con
   translateZ negativo, o sea DETRÁS del plano de su escenario, y entonces el
   clic se lo queda el escenario y no llega nunca a la tarjeta. Solo se podía
   pulsar la del centro, que está a profundidad cero. Con esto el escenario
   deja pasar el ratón y solo cazan las tarjetas — las de los lados incluidas,
   que es lo que las trae al medio. Las que están fuera de la vista las apaga
   setupCoverflow al colocarlas. */
.player__stage,
.fans__stage,
.kit{ pointer-events:none; }
.cover,
.fan,
.kit__item{ pointer-events:auto; }

.cover{
  position:absolute; top:0; left:50%;
  width:clamp(150px,18vw,205px);
  margin-left:calc(clamp(150px,18vw,205px) / -2);
  /* Marco de cristal con la portada dentro, redondeada por sus cuatro
     esquinas, no pegada al borde de la tarjeta */
  padding:8px;
  border-radius:20px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  cursor:pointer;
  backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
.cover__art{
  aspect-ratio:1;
  border-radius:13px;
  overflow:hidden;
  background-size:cover; background-position:center;
  display:grid; place-items:center;
}
/* Sin imagen: degradado con el murciélago en marca de agua, para que no quede
   un hueco ni cinco portadas con la misma letra */
.cover__mark{
  width:52%; height:34%;
  background:#fff;
  opacity:.34;
  -webkit-mask:url("../assets/logo.png") center/contain no-repeat;
          mask:url("../assets/logo.png") center/contain no-repeat;
}
/* Sin fondo propio: el cristal ya lo pone la tarjeta. Si llevara su propio
   backdrop-filter anularía el de .cover al quedar anidado dentro. */
.cover__label{
  padding:10px 6px 4px;
  text-align:center;
}
.cover__label b{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:14px; font-weight:900; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden;
}

/* Sello de verificado junto al nombre. Va con sus colores, no enmascarado:
   el azul y el tick blanco son lo que lo hace reconocible. */
.vcheck{
  flex:0 0 auto;
  display:inline-block;
  width:.84em; height:.84em;
  margin-left:.32em;
  /* El contenedor centra respecto a la caja de línea, pero esta tipografía en
     mayúsculas deja libre el hueco de las descendentes, así que las letras
     visibles quedan más arriba que ese centro. Se sube el sello para casarlo
     con el texto y no con la caja. */
  transform:translateY(-.13em);
  background:url("../assets/verificado.png") center/contain no-repeat;
}
.cover__label span{
  display:block; margin-top:2px;
  font-size:12px; color:rgba(255,255,255,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cover.is-active{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 30px 70px rgba(0,0,0,.7), 0 0 50px rgba(43,191,226,.25);
}

/* --- Barra --- */
.player__bar{
  position:relative; z-index:2;
  margin:clamp(16px,2.4vw,26px) auto 0;
  width:min(720px,100%);
  display:flex; align-items:center; gap:clamp(10px,1.6vw,20px);
  padding:12px clamp(14px,2vw,20px);
  border-radius:26px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}

.player__ctrls{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.player__extras{ display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }

.pbtn{
  display:grid; place-items:center;
  width:38px; height:38px; padding:0;
  border:0; border-radius:50%;
  background:transparent; color:#fff;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.pbtn svg{ width:20px; height:20px; fill:currentColor; }
.pbtn:hover{ background:rgba(255,255,255,.14); }
.pbtn:active{ transform:scale(.92); }
.pbtn--sm{ width:28px; height:28px; }
.pbtn--sm svg{ width:16px; height:16px; }
.pbtn--play svg{ width:22px; height:22px; }
.pbtn--play .ico-pause{ display:none; }
.player.is-playing .pbtn--play .ico-play{ display:none; }
.player.is-playing .pbtn--play .ico-pause{ display:block; }

/* Chip de "sonando ahora" */
.player__now{
  position:relative;
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 10px;
  border-radius:14px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.1);
}
.player__thumb{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:8px;
  background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.12);
}
.player__meta{ min-width:0; flex:1 1 auto; }
.player__meta b{
  display:block; font-size:13px; font-weight:900;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__meta span{
  display:flex; align-items:center; font-size:11px; color:rgba(255,255,255,.6);
  white-space:nowrap; overflow:hidden;
}
.player__wave{
  flex:0 0 auto; width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
  opacity:.8;
}
.player__progress{
  position:absolute; left:8px; right:8px; bottom:5px;
  height:3px; border-radius:99px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.player__progress i{
  display:block; height:100%; width:0;
  border-radius:99px;
  background:#fff;
  transition:width .2s linear;
}

@media (max-width:640px){
  .player__extras{ display:none; }        /* en móvil sobran, la barra respira */
  .player__bar{ gap:10px; padding:10px 12px; }
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.section{
  position:relative;
  width:var(--shell); margin:0 auto;
  padding:clamp(50px,8vw,110px) 0;
}

.section__head{ margin-bottom:clamp(28px,4.5vw,50px); }
.section__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px,7vw,90px);
  font-weight:700; font-style:italic;
  letter-spacing:.01em; line-height:.94; text-transform:uppercase;
}
.section__title em{
  font-style:normal; color:var(--cyan);
  text-shadow:0 0 30px rgba(79,227,255,.6);
}
.section__note{
  margin:14px 0 0;
  color:var(--smoke); font-size:16px; letter-spacing:.06em;
}

/* --------------------------------------------------------------------------
   Sobre el artista
   -------------------------------------------------------------------------- */
/* Una sola columna en todos los tamaños: el texto arriba y la foto centrada
   debajo, como estaba en móvil. */
.about{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,3vw,34px);
  align-items:start;
}
.about__media{ width:min(100%, 320px); margin:0 auto; }
.about__text p{
  margin:0 0 1.1em;
  font-size:17px; line-height:1.65; color:rgba(255,255,255,.82);
}
.about__lead{
  font-size:clamp(19px,2.2vw,24px) !important;
  color:#fff !important;
}

/* La foto se disuelve por abajo con una máscara en degradado, así las piernas
   se funden con el fondo en vez de cortarse. */
/* Contenedor de foto + firma: la firma va fuera de .about__photo para que no
   la recorte la máscara del degradado. */
.about__media{ position:relative; }

/* Firma sobre la barriga, justo encima del ombligo (que cae sobre el 70% del
   alto de la foto), con su granate original */
.about__sign{
  position:absolute; z-index:2;
  /* Posición elegida a mano con ?firma */
  left:28.5%; top:55.8%;
  width:46%; aspect-ratio:460/300;
  background:url("../assets/firma.png") center/contain no-repeat;
  transform:rotate(-6deg);
  pointer-events:none;
}

/* Sin máscara ni recorte aquí: solo reserva el hueco. Lo que se difumina es
   cada foto, no la caja, así se pueden agrandar sin que las corte el borde. */
.about__photo{
  position:relative;
  aspect-ratio:700/1076;
}

/* Cada foto es una capa que se puede mover y escalar con --x, --y y --w.
   El degradado va en la propia imagen, así que las piernas se difuminan igual
   sea cual sea su tamaño, y vale para las dos fotos. */
.about__frame{
  --x:0%; --y:0%; --w:100%;
  /* dónde empieza y dónde acaba el difuminado de abajo, en % de la propia foto */
  --fade1:55%; --fade2:80%;
  position:absolute; left:50%; top:0;
  /* max-width:none anula la regla global de img, que si no impide agrandarla */
  width:var(--w); max-width:none; height:auto;
  opacity:0;
  transform:translate(calc(-50% + var(--x)), calc(var(--y) + 12%));
  transition:opacity .85s ease, transform .95s cubic-bezier(.2,.7,.3,1);
  -webkit-mask-image:linear-gradient(180deg, #000 var(--fade1), rgba(0,0,0,.45) var(--fade2), transparent 100%);
          mask-image:linear-gradient(180deg, #000 var(--fade1), rgba(0,0,0,.45) var(--fade2), transparent 100%);
}
.about__frame.is-on{
  opacity:1;
  transform:translate(calc(-50% + var(--x)), var(--y));
}

/* Cita centrada entre el carrusel y las siluetas. En una sola línea y sin
   márgenes gordos: no debe separar las fotos de las siluetas. El tamaño va
   con el ancho de pantalla para que quepa entera sin partirse. */
.quote{
  margin:2px auto 16px;
  text-align:center;
  white-space:nowrap;
  font-size:clamp(12px,2.1vw,26px);
  line-height:1.2;
  color:#fff;
  transition:opacity .32s ease;
}
/* mientras se cambia de frase */
.quote.is-off{ opacity:0; }

@media (max-width:760px){
  /* Con todo en una columna, el titular y el texto también van centrados */
  #sobre .section__head,
  .about__text{ text-align:center; }
}

#sobre{ position:relative; }

/* --- Fotos con los fans: carrusel por capas, igual que las portadas del
       reproductor pero con las tarjetas algo más separadas --- */
/* Sube por encima de la foto: el desplazamiento lo calcula js/app.js a partir
   del alto real de la foto, para que caiga siempre a la altura del pantalón. */
.fans{ position:relative; z-index:2; margin-top:clamp(30px,4.5vw,56px); }

.fans__stage{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(260px,30vw,350px);
  perspective:1200px;
  transform-style:preserve-3d;
  /* js/app.js lo baja durante el giro de entrada para que el arranque sea seco */
  --flow-t:.5s;
}

.fan{
  position:absolute; top:0; left:50%;
  width:clamp(160px,19vw,225px);
  margin-left:calc(clamp(160px,19vw,225px) / -2);
  padding:8px;
  border-radius:20px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  cursor:pointer;
  backface-visibility:hidden;
  transition:transform var(--flow-t) cubic-bezier(.2,.7,.3,1), opacity var(--flow-t) ease;
}
.fan.is-active{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 30px 70px rgba(0,0,0,.7), 0 0 50px rgba(43,191,226,.25);
}

/* Desenfoque de movimiento durante el giro de entrada. El backdrop-filter del
   cristal se apaga mientras dura: filtro y backdrop-filter en el mismo elemento
   se estorban, y así además el giro va más suelto. */
.fans__stage.is-spinning .fan{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  filter:blur(var(--flow-blur, 0px));
}

.fan__img{
  aspect-ratio:4/5;
  border-radius:13px;
  overflow:hidden;
  background:center/cover no-repeat;
  /* Sin foto todavía: fondo con el murciélago en marca de agua */
  background-color:rgba(255,255,255,.04);
  display:grid; place-items:center;
}
.fan__mark{
  width:46%; height:30%;
  background:#fff; opacity:.16;
  -webkit-mask:url("../assets/logo.png") center/contain no-repeat;
          mask:url("../assets/logo.png") center/contain no-repeat;
}
/* La del medio se puede abrir; las de los lados solo traen la foto al centro */
.fan.is-active{ cursor:zoom-in; }

/* --- Visor a tamaño completo --- */
.photobox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,40px);
  background:rgba(2,6,10,.9);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  opacity:0; visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease;
}
.photobox.is-open{ opacity:1; visibility:visible; }

.photobox__img{
  max-width:100%; max-height:88svh;
  border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.8);
  transform:scale(.96);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.photobox.is-open .photobox__img{ transform:scale(1); }

.photobox__close,
.photobox__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  color:#fff; cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s ease, transform .2s ease;
}
.photobox__close{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); font-size:18px; }
.photobox__close:hover{ background:var(--cyan); color:#00131a; transform:rotate(90deg); }

.photobox__nav{ top:50%; margin-top:-23px; font-size:30px; line-height:0; padding-bottom:5px; }
.photobox__nav--prev{ left:clamp(10px,2.5vw,26px); }
.photobox__nav--next{ right:clamp(10px,2.5vw,26px); }
.photobox__nav:hover{ background:var(--cyan); color:#00131a; }

body.is-locked{ overflow:hidden; }

.fan__caption{
  padding:9px 6px 2px;
  text-align:center;
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --------------------------------------------------------------------------
   Los dos móviles con vídeo dentro
   -------------------------------------------------------------------------- */
/* El margen de abajo es negativo a propósito: la imagen se apaga con una
   máscara mucho antes de su borde inferior (al 94% ya va por el 20% de
   opacidad), así que sin morder ese trozo transparente la banda de abajo queda
   despegada del degradado del personaje. */
.manos{
  width:var(--shell);
  margin:0 auto clamp(-18px,-1.8vw,-8px);
  padding:clamp(6px,1.2vw,16px) 0 0;
}
.manos__caja{ position:relative; }

/* La imagen va encima: sus pantallas son huecos y por ahí se ven los vídeos.
   Se difumina por abajo para que el torso se funda con el fondo. */
.manos__img{
  position:relative; z-index:2;
  width:100%; height:auto;
  display:block;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.5) 84%, transparent 100%);
}

/* Recorte con la forma del hueco de cada móvil, sacado del canal alfa del PNG.
   Lo que el vídeo se salga por fuera del teléfono se corta aquí. */
.manos__hueco{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
.manos__hueco--izq{
  clip-path:polygon(13.82% 43.78%, 14.77% 35.28%, 15.01% 33.58%, 16.39% 24.02%, 17.40% 18.28%, 17.58% 17.43%, 18.30% 14.35%, 19.02% 11.58%, 19.38% 10.52%, 19.62% 9.99%, 20.45% 8.50%, 20.99% 7.86%, 21.47% 7.55%, 21.77% 7.44%, 22.79% 7.44%, 24.34% 7.76%, 25.72% 8.50%, 33.13% 13.39%, 34.33% 14.24%, 36.00% 15.73%, 36.84% 16.58%, 37.26% 17.32%, 37.44% 18.07%, 37.44% 20.94%, 37.38% 21.36%, 28.59% 76.83%, 27.99% 78.75%, 27.69% 79.28%, 26.85% 79.91%, 25.78% 80.45%, 25.06% 80.77%, 23.27% 81.19%, 20.99% 81.62%, 17.88% 82.04%, 16.21% 82.25%, 14.59% 82.25%, 13.94% 81.72%, 13.58% 81.30%, 13.28% 80.87%, 12.56% 79.38%, 12.32% 78.75%, 12.26% 78.32%, 12.14% 76.83%, 12.14% 75.98%, 12.26% 60.68%);
}
.manos__hueco--der{
  clip-path:polygon(65.19% 21.36%, 65.19% 19.77%, 65.25% 19.55%, 65.55% 19.02%, 66.15% 18.17%, 66.63% 17.53%, 69.50% 15.09%, 71.41% 13.60%, 79.55% 7.86%, 80.32% 7.33%, 80.98% 7.01%, 81.94% 6.80%, 82.83% 6.80%, 83.55% 7.23%, 84.33% 8.50%, 84.57% 9.14%, 85.11% 11.05%, 85.59% 13.39%, 86.90% 20.62%, 87.74% 25.29%, 89.65% 38.26%, 89.89% 40.60%, 91.81% 61.21%, 91.93% 76.09%, 91.93% 76.94%, 91.63% 78.00%, 90.85% 79.38%, 90.43% 79.81%, 89.89% 80.13%, 88.70% 80.55%, 84.99% 81.40%, 82.36% 81.83%, 80.56% 82.04%, 79.19% 82.04%, 78.59% 81.83%, 77.75% 81.40%, 76.85% 79.91%, 76.38% 78.53%);
}

/* Plano de cada móvil: js/app.js lo calza en las mismas cuatro esquinas que el
   vídeo, así lo que va dentro sale ya con la perspectiva del teléfono. A
   diferencia del hueco, este NO recorta: el rótulo puede asomar por fuera.
   --u es el ancho del plano en píxeles, y de ahí cuelga el tamaño del texto
   para que escale con la imagen. */
.manos__plano{
  position:absolute; top:0; left:0; z-index:3;
  transform-origin:0 0;
  pointer-events:none;
}

/* Rótulos sobre los móviles. js/app.js los mapea a un cuadrilátero dentro del
   plano: --q son sus cuatro esquinas en % del plano (arriba-izq, arriba-der,
   abajo-der, abajo-izq) y es lo que arrastra ?rotulos. Si no hay --q se calcula
   una vez a partir de --x/--y/--r/--s, que es la forma cómoda de escribirlo. */
.rotulo{
  --x:50%; --y:9%; --r:0deg; --s:1;
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  font-family:var(--font-display);
  font-style:italic; font-weight:700;
  /* el tamaño de verdad lo pone el cuadrilátero; esto es solo la caja de
     partida, en unidades del plano para que escale con la imagen */
  font-size:calc(var(--u,260px) * .155);
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  /* sobre el vídeo hay de todo, así que el texto lleva su propio contorno */
  -webkit-text-stroke:.055em rgba(0,0,0,.55);
  paint-order:stroke fill;
  text-shadow:0 .12em .3em rgba(0,0,0,.55);
}

/* js/app.js les pone el tamaño y la matriz que las encaja en cada pantalla */
.manos__pantalla{
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  object-fit:cover;
  will-change:transform;
}

/* --------------------------------------------------------------------------
   Banda CTA
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(60px,9vw,120px) 20px;
  text-align:center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(79,227,255,.28), transparent 62%),
    linear-gradient(180deg,#03090e,#061520 60%,#03090e);
  border-top:1px solid rgba(79,227,255,.22);
  border-bottom:1px solid rgba(79,227,255,.22);
}
.cta-band__inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
.cta-band h2{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(32px,6.4vw,80px); font-weight:700; font-style:italic;
  letter-spacing:.01em; text-transform:uppercase; line-height:.96;
}
.cta-band p{ margin:0 0 30px; color:var(--smoke); font-size:17px; }

/* --------------------------------------------------------------------------
   Equipamiento — el carrusel de herramientas

   Mismo escenario por capas que el reproductor y las fotos de fans (lo coloca
   setupCoverflow en js/app.js): la del medio de frente y a tamaño completo, y
   una a cada lado más pequeña y hundida. Pero sin contenedor: ni tarjeta, ni
   marco, ni fondo. Las fotos se apoyan directamente sobre la banda.
   -------------------------------------------------------------------------- */
.kit{
  /* El ancho manda sobre la separación (spread en js/app.js): tres a 1,06 de
     paso ocupan unas tres veces esto, así que de aquí para arriba las de los
     lados se empiezan a salir por el borde. */
  --ancho:clamp(230px,31vw,400px);
  --alto:clamp(240px,33vw,420px);
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  margin-bottom:clamp(26px,4vw,46px);
  height:clamp(320px,40vw,500px);
  perspective:1200px;
  transform-style:preserve-3d;
}
.kit__item{
  position:absolute; top:0; left:50%;
  width:var(--ancho); margin:0 0 0 calc(var(--ancho) / -2);
  text-align:center;
  cursor:pointer;
  backface-visibility:hidden;
  /* lento a propósito: el carrusel se pasea, no cambia de golpe */
  transition:transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease;
}

/* La foto manda sobre su hueco, pero entera: nada de recortes. Un PNG
   recortado se apoya en la banda como si estuviera puesto ahí. */
.kit__foto{ position:relative; }
/* --escala encoge SOLO el dibujo, no su hueco: las fotos vienen encuadradas
   de maneras muy distintas (una pistola en diagonal deja aire de sobra, una
   máquina cuadrada llena el marco entero y parece el doble de grande), y así
   se iguala a ojo cada una sin que se muevan los títulos de sitio. */
.kit__img{
  display:block; width:100%;
  height:var(--alto); object-fit:contain;
  transform:scale(var(--escala,1));
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.6));
}
.kit__falta{ display:none; }
.kit__foto.is-falta .kit__img{ display:none; }
.kit__foto.is-falta .kit__falta{
  display:grid; place-items:center;
  height:var(--alto); padding:10px;
  border:1px dashed rgba(79,227,255,.3); border-radius:16px;
  color:rgba(255,255,255,.4);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}

/* Los murciélagos, colgados del carrusel y no del botón. El escenario tiene el
   alto fijo —lo marcan las tres capas, no el contenido—, así que debajo del
   título sobraba un buen trozo y las siluetas caían más cerca del botón que de
   las armas. Suben ese trozo y devuelven el mismo hueco por abajo, de forma
   que lo que viene después no se mueve ni un píxel. */
.kit__dots{
  --sube:clamp(38px,5.8vw,72px);
  margin-top:calc(18px - var(--sube));
  margin-bottom:var(--sube);
}

/* Debajo solo va el nombre: sin renglón que explique nada. Y en Chill Chirp,
   no en la de titulares: aquí es una etiqueta, no un titular. */
.kit__pie{ margin-top:clamp(12px,1.8vw,22px); }
.kit__nombre{
  display:block;
  font-family:var(--font);
  font-weight:800;
  font-size:clamp(15px,1.9vw,25px);
  letter-spacing:.06em; text-transform:uppercase;
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */
.section--news{ text-align:center; }
.news{ max-width:680px; margin:0 auto; }
.news__title{
  margin:0 0 28px;
  font-family:var(--font-display);
  font-size:clamp(30px,5.8vw,70px); font-weight:700; font-style:italic;
  letter-spacing:.01em; line-height:.98; text-transform:uppercase;
}
/* El formulario de email ya no está en el HTML: la sección es ahora el
   carrusel de merchandising. Estos estilos se quedan a la espera de saber por
   dónde se va a poder contactar (¿un formulario de contrata?, ¿un WhatsApp?),
   que es lo único que queda por decidir de esta página. Si al final no hace
   falta ningún formulario, esto se borra de una pieza. */
.news__form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.news__form input{
  flex:1 1 300px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(79,227,255,.35);
  border-radius:999px;
  color:#fff; font-size:15px; font-family:inherit;
  padding:17px 24px;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.news__form input::placeholder{ color:rgba(255,255,255,.35); }
.news__form input:focus{ border-color:var(--cyan); box-shadow:0 0 0 4px rgba(79,227,255,.16); }
.news__form button{
  border:0; cursor:pointer;
  padding:17px 36px; border-radius:999px;
  background:var(--cyan); color:#00131a;
  font-family:inherit; font-size:13px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  transition:background .2s ease, transform .2s ease;
}
.news__form button:hover{ background:var(--cyan-hot); transform:translateY(-2px); }
.news__msg{ min-height:22px; margin:16px 0 0; font-size:13px; color:var(--cyan); letter-spacing:.06em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer{
  border-top:1px solid rgba(79,227,255,.18);
  padding:52px 20px 40px; text-align:center;
}
.footer__logo img{
  height:96px; width:auto; margin:0 auto 26px;
  opacity:.92; filter:drop-shadow(0 0 24px rgba(79,227,255,.4));
}
.footer__links{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.footer__links a{
  color:rgba(255,255,255,.72); text-decoration:none;
  font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.footer__links a:hover{ color:var(--cyan); }
.footer__legal{ margin:0; font-size:13px; color:rgba(255,255,255,.35); letter-spacing:.08em; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .burger{ display:flex; }
  /* Colgado del propio header (top:100%), no a 66px fijos: así queda siempre
     pegado a su borde inferior aunque el header encoja al hacer scroll. */
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:#000;
    border-bottom:1px solid rgba(79,227,255,.2);
    padding:10px 0 22px;
    /* Aparece con fundido en vez de deslizarse por detrás del header, que
       ahora es translúcido y dejaría ver el panel pasando por debajo. */
    opacity:0; visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1), visibility .28s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav a{ width:100%; text-align:center; padding:16px 0; }
  .nav__cta{ width:auto; margin:12px auto 0; }

  :root{ --hero-pos:center 18%; }
  .ribbon--a{ top:58%; transform:translateY(-50%) rotate(-26deg); }
  .ribbon--b{ top:58%; transform:translateY(-50%) rotate(26deg); }

  .strip{ margin-top:-56px; }
  .strip__rail{ grid-auto-columns:clamp(160px, 46vw, 225px); }

}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .show-card{ opacity:1; transform:none; }
}