/* ══════════════════════════════════════════════════════════════════════════
   EL CLUB · «NOCHE DE LEYENDAS» — MIDNIGHT STADIUM, EDICIÓN TIENDA 2026
   ──────────────────────────────────────────────────────────────────────────
   Decisión de Diego, 6-oct-2026: «Midnight stadium SÍ VA y el logo anterior
   sí va sin los acentos anaranjados». Aprobó como look and feel la propuesta
   «Noche de Leyendas» (negro, dorado y brasas) y pidió la página completa a
   nivel de premio.

   Reemplaza a «Archivo de Grada» (papel claro y naranja, firmada el 30-jul),
   que queda guardada con su porqué en coo/archivo/2026-10-sitio-archivo-de-grada/.

   ── LA IDEA ─────────────────────────────────────────────────────────────
   El sitio es un estadio de noche: fondo negro, la camiseta bajo un foco y
   las leyendas a contraluz dorado. Hielo (#4DA8FF) es el color que se toca
   (botones, enlaces, foco del teclado); el oro (#D4AF37) es el que se mira
   (nombres, números, brasas). Nada más tiene color: la camiseta es el color.

   ── CONTRATOS QUE NO CAMBIAN ────────────────────────────────────────────
   Los nombres de las variables (--papel, --tinta, --acento…) y de las clases
   son los mismos de antes: el HTML que arman cart.js, checkout.js, app.js y
   shell.js sigue funcionando sin tocarlos. Solo cambian los valores.

   ── TIPOGRAFÍA ──────────────────────────────────────────────────────────
   Oswald         → titulares, precios, botones y dorsales (la voz del estadio).
   Space Grotesk  → interfaz y lectura.
   EB Garamond    → las crónicas de cada pieza (la voz que cuenta).
   WOFF2 recortado a latín y latín extendido A (Modrić, Matthäus, Leão).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Oswald · variable 200-700 ── */
@font-face{
  font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('../fonts/Oswald-latin.woff2') format('woff2');
}
/* ── Space Grotesk · variable 300-700 ── */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/SpaceGrotesk-latin.woff2') format('woff2');
}
/* ── EB Garamond · solo para las crónicas (se descarga cuando aparece una) ── */
@font-face{
  font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/EBGaramond-1.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/EBGaramond-2.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/EBGaramond-3.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/EBGaramond-4.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ══════════════ LA NOCHE · tokens ══════════════
   Los nombres vienen del sistema anterior (papel = fondo, tinta = texto):
   así el HTML que arman los scripts se viste solo. */
:root,
[data-tema="noche"]{
  color-scheme:dark;

  /* Midnight Stadium */
  --midnight:#0D0D0D;
  --pitch:#1C1C1C;
  --chalk:#2A2A2A;
  --smoke:#999999;
  --ash:#666666;
  --hielo:#4DA8FF;
  --hielo-claro:#8CC8FF;
  --oro:#D4AF37;
  --oro-claro:#E9CB6B;

  /* nombres de siempre, valores de noche */
  --papel:#0D0D0D;
  --papel-2:#141414;
  --papel-3:#1C1C1C;
  --tinta:#F4F4F4;
  --tinta-2:#BDBDBD;          /* 10,3:1 sobre el fondo ✓ */
  --tinta-3:#8F8F8F;          /* 6,0:1 sobre el fondo · 5,3:1 sobre pitch ✓ */
  --regla:#262626;
  --regla-fuerte:#3A3A3A;
  --acento:#4DA8FF;           /* hielo: lo que se toca */
  --acento-legible:#4DA8FF;   /* 7,7:1 como texto · 7,7:1 con texto negro encima ✓ */
  --acento-txt:#0D0D0D;
  --acento-tenue:rgba(77,168,255,.12);
  --exito:#5BD18B;            /* «se entrega ya» · 10:1 ✓ */
  --exito-tenue:rgba(91,209,139,.12);
  --espera:#D4AF37;           /* Personalizalo: el oro del Vault de siempre · 9,2:1 ✓ */
  --espera-tenue:rgba(212,175,55,.12);
  --oscuro:#070707;
  --oscuro-txt:#F4F4F4;
  --whatsapp:#25D366;         /* con texto negro: 9,8:1 ✓ */
  --sol:#D4AF37;
  --foto-fondo:#121212;
  --render-fondo:#0E0E0E;

  --f-titular:'Oswald','Arial Narrow',Impact,sans-serif;
  --f-ui:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-cronica:'EB Garamond',Georgia,serif;
  --f-cifra:'Oswald','Arial Narrow',sans-serif;

  --titular-peso:700;
  --titular-tracking:.004em;
  --titular-transform:uppercase;
  --radio:2px;
  --radio-2:3px;
  --sello-radio:2px;
  --sombra:0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.45);
  --sombra-alta:0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.6);
  --filete:1px solid var(--regla);
  --brillo-hielo:0 0 0 1px rgba(77,168,255,.5),0 14px 40px -12px rgba(77,168,255,.65);
  --brillo-oro:0 0 0 1px rgba(212,175,55,.45),0 14px 40px -12px rgba(212,175,55,.55);

  /* escalas */
  --t-hero:clamp(56px,14.4vw,176px);
  --t-h1:clamp(44px,8vw,112px);
  --t-h2:clamp(38px,6.4vw,92px);
  --t-h3:clamp(21px,2.3vw,28px);
  --t-lg:18px; --t-base:16px; --t-sm:14px; --t-xs:12.5px; --t-2xs:11px;

  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px; --e5:20px;
  --e6:24px; --e8:32px; --e10:40px; --e12:48px; --e16:64px;
  --e20:80px; --e24:96px; --e32:128px;

  --ancho:1320px;
  --ancho-texto:64ch;
  --nav-alto:68px;
  --franja-alto:32px;

  --rapido:160ms; --normal:260ms; --lento:420ms;
  --curva:cubic-bezier(.2,0,0,1);
  --curva-sale:cubic-bezier(.16,1,.3,1);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h15M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* ══════════════ BASE ══════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--papel)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-ui);
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
/* grano de película sobre todo el sitio: la noche se siente filmada, no plana */
body::after{
  content:"";position:fixed;inset:0;z-index:300;pointer-events:none;
  background-image:var(--grano);opacity:.6;mix-blend-mode:overlay;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--hielo);outline-offset:3px;border-radius:1px}
::selection{background:var(--oro);color:#0D0D0D}
h1,h2,h3,h4{
  font-synthesis:none;
  font-family:var(--f-titular);
  font-weight:var(--titular-peso);
  letter-spacing:var(--titular-tracking);
  text-transform:uppercase;
  line-height:.95;
  text-wrap:balance;
  color:#fff;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);line-height:.92}
h3{font-size:var(--t-h3);line-height:1.08}
p{text-wrap:pretty}
strong,b{font-weight:600;color:#fff}

/* enlace de salto — teclado */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--hielo);color:#0D0D0D;padding:12px 20px;font-size:var(--t-sm);font-weight:600;
}
.saltar:focus{left:0}

/* ══════════════ ESTRUCTURA ══════════════ */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--e5)}
.env-estrecho{max-width:860px}
@media(min-width:768px){.env{padding-inline:var(--e8)}}
@media(min-width:1440px){.env{padding-inline:var(--e10)}}
.seccion{padding-block:var(--e16)}
@media(min-width:768px){.seccion{padding-block:var(--e20)}}
.seccion-ajustada{padding-block:var(--e12)}
.seccion-xl{padding-block:var(--e20)}
@media(min-width:900px){.seccion-xl{padding-block:var(--e32)}}
.filete-arriba{border-top:var(--filete)}

/* encabezado de sección: antetítulo + título + enlace (apilado en celular,
   porque el botón flotante de WhatsApp vive abajo a la derecha) */
.cabecera{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e3);margin-bottom:var(--e8)}
@media(min-width:640px){
  .cabecera{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--e5);flex-wrap:wrap}
}
/* el antetítulo lleva un punto de luz: el foco encendido del estadio */
.antetitulo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-titular);font-size:13px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--hielo);
  margin-bottom:var(--e4);line-height:1.3;
}
.antetitulo::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:currentColor;box-shadow:0 0 10px currentColor,0 0 2px currentColor;
}
.antetitulo.oro{color:var(--oro)}
.sub{color:var(--tinta-2);font-size:var(--t-lg);line-height:1.55;max-width:var(--ancho-texto)}
.sub b,.sub strong{color:#fff}
.enlace-mas{
  position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--f-titular);font-size:14px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.enlace-mas::after{
  content:"";width:18px;height:12px;flex-shrink:0;background:var(--hielo);
  -webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat;
  transition:transform var(--normal) var(--curva-sale);
}
.enlace-mas::before{
  content:"";position:absolute;left:0;right:28px;bottom:8px;height:1px;background:currentColor;
  transform-origin:left;transform:scaleX(.35);opacity:.5;transition:transform var(--lento) var(--curva-sale),opacity var(--normal);
}
.enlace-mas:hover::before{transform:scaleX(1);opacity:1}
.enlace-mas:hover::after{transform:translateX(5px)}

/* ══════════════ FRANJA + BARRA ══════════════
   La franja dice lo que todo comprador en Guatemala pregunta primero. El
   bloque entero se pega arriba con top negativo: al bajar, la franja se
   esconde y solo queda la barra. La altura queda reservada antes de que
   shell.js pinte, para que la página no salte. */
#shell-top{
  position:sticky;top:calc(-1 * var(--franja-alto));z-index:50;
  min-height:calc(var(--franja-alto) + var(--nav-alto) + 1px);
}
.franja{
  height:var(--franja-alto);overflow:hidden;
  background:#000;color:var(--tinta-2);
  font-family:var(--f-ui);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:var(--franja-alto);
  border-bottom:1px solid #161616;
}
.franja-pista{display:flex;width:max-content;animation:franja 46s linear infinite}
.franja-pista span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap}
.franja-pista span::after{content:"";width:5px;height:5px;background:var(--oro);transform:rotate(45deg);flex-shrink:0}
@keyframes franja{to{transform:translateX(-50%)}}
@media(min-width:1100px){
  .franja-pista{animation:none;width:100%;justify-content:center}
  .franja-pista span[aria-hidden]{display:none}
  .franja-pista span:nth-child(2)::after{content:none}
}
@media(prefers-reduced-motion:reduce){.franja-pista{animation:none}}

.barra{
  position:relative;
  background:rgba(13,13,13,.78);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background var(--lento),border-color var(--lento);
}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);min-height:var(--nav-alto)}
.marca{display:flex;align-items:center;gap:var(--e2);flex-shrink:0;min-height:44px}
.marca img{height:40px;width:auto}
.menu{display:none;align-items:center;gap:clamp(24px,3vw,44px)}
@media(min-width:900px){.menu{display:flex}}
.menu a{
  position:relative;padding:8px 0;
  font-family:var(--f-titular);font-size:15px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#E6E6E6;
  transition:color var(--rapido);
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--hielo);
  transform:scaleX(0);transform-origin:right;transition:transform var(--lento) var(--curva-sale);
}
.menu a:hover{color:#fff}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.menu a[aria-current="page"]{color:#fff}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.barra-acciones{display:flex;align-items:center;gap:var(--e1)}
.icono-btn{
  position:relative;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#F4F4F4;transition:background var(--rapido),color var(--rapido);
}
.icono-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.icono-btn svg{width:22px;height:22px}
@media(min-width:900px){.solo-movil{display:none}}
.cart-badge{
  position:absolute;top:3px;right:2px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--hielo);color:#0D0D0D;
  font-family:var(--f-ui);font-size:10.5px;font-weight:700;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--papel);
}
.cart-badge.hidden{display:none}
.cart-badge.pulso{animation:pulso .6s var(--curva-sale)}
@keyframes pulso{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* La portada pone la barra sobre la foto: transparente arriba, sólida al bajar */
body.portada:not(.desplazado) .barra{
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ── menú móvil ── */
.menu-movil{
  position:fixed;inset:0;z-index:60;background:#090909;
  transform:translateY(-100%);visibility:hidden;
  transition:transform var(--lento) var(--curva-sale),visibility 0s linear var(--lento);
  display:flex;flex-direction:column;padding:0 var(--e5) var(--e6);
  overscroll-behavior:contain;overflow-y:auto;
}
.menu-movil::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%,rgba(212,175,55,.14),rgba(0,0,0,0) 60%);
}
.menu-movil.open{transform:translateY(0);visibility:visible;transition:transform var(--lento) var(--curva-sale),visibility 0s}
.menu-movil-cab{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:var(--nav-alto);margin-bottom:var(--e8)}
.menu-movil-cab img{height:38px;width:auto}
.menu-movil nav{position:relative;display:flex;flex-direction:column;counter-reset:menu}
.menu-movil nav a{
  counter-increment:menu;position:relative;
  font-family:var(--f-titular);font-size:clamp(38px,11vw,60px);font-weight:700;
  letter-spacing:.005em;text-transform:uppercase;line-height:1;color:#fff;
  padding:var(--e4) 0 var(--e4) 44px;border-bottom:1px solid #1E1E1E;
}
.menu-movil nav a::before{
  content:counter(menu,decimal-leading-zero);position:absolute;left:0;top:var(--e5);
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--oro);
}
.menu-movil nav a span{
  display:block;font-family:var(--f-ui);font-size:var(--t-sm);
  font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--tinta-3);margin-top:6px;line-height:1.3;
}
.menu-movil-pie{position:relative;margin-top:auto;padding-top:var(--e8);display:flex;gap:var(--e2);align-items:center}
.menu-movil-pie a{
  width:46px;height:46px;border:1px solid #2A2A2A;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#E6E6E6;
}
.menu-movil-pie svg{width:19px;height:19px;fill:currentColor}

/* ══════════════ BOTONES ══════════════ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f-titular);font-size:15px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.15;
  padding:14px 28px;border-radius:var(--radio);
  min-height:54px;text-align:center;
  border:1.5px solid transparent;
  transition:transform var(--normal) var(--curva-sale),background var(--normal),color var(--normal),border-color var(--normal),box-shadow var(--normal);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-1{background:var(--hielo);color:#0D0D0D}
.btn-1:hover{background:var(--hielo-claro);box-shadow:var(--brillo-hielo);transform:translateY(-2px)}
.btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn-2:hover{background:#fff;color:#0D0D0D;border-color:#fff}
.btn-3{background:transparent;color:var(--tinta-2);padding-inline:var(--e3);min-height:48px}
.btn-3:hover{color:#fff}
.btn-oro{background:var(--oro);color:#0D0D0D}
.btn-oro:hover{background:var(--oro-claro);box-shadow:var(--brillo-oro);transform:translateY(-2px)}
.btn-claro{background:#fff;color:#0D0D0D}
.btn-claro:hover{background:var(--hielo-claro)}
.btn-wa{background:var(--whatsapp);color:#0D0D0D}
.btn-wa:hover{background:#4BE07F;box-shadow:0 14px 36px -12px rgba(37,211,102,.6);transform:translateY(-2px)}
.btn-ancho{width:100%}
.btn-grande{padding:18px 34px;font-size:16px;min-height:60px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-flecha::after{
  content:"";width:18px;height:12px;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat;
  transition:transform var(--normal) var(--curva-sale);
}
.btn-flecha:hover::after{transform:translateX(5px)}
/* un brillo que cruza el botón principal al pasar el mouse */
.btn-1::before,.btn-oro::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--curva-sale);
}
.btn-1:hover::before,.btn-oro:hover::before{transform:translateX(120%)}

/* ══════════════ SELLOS DE ENTREGA ══════════════
   Cada pieza dice sola cómo llega: inmediata o Personalizalo. */
.sello{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-ui);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--sello-radio);
  border:1px solid currentColor;white-space:nowrap;line-height:1.3;
}
.sello-ya{color:var(--exito);background:var(--exito-tenue)}
.sello-pedido{color:var(--espera);background:var(--espera-tenue)}
.sello-agotado{color:var(--tinta-3);background:var(--papel-2)}
.sello-solido{border:none}
.sello-ya.sello-solido{background:var(--exito);color:#0D0D0D}
.sello-pedido.sello-solido{background:var(--espera);color:#0D0D0D}

/* ══════════════ EL CROMO · tarjeta de producto ══════════════
   La camiseta vive en su vitrina negra (assets/img/vitrina/): se funde con
   la página y flota bajo su foco. Al pasar el mouse aparece la espalda. */
.rejilla{
  display:grid;gap:var(--e8) var(--e3);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:640px){.rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e10) var(--e5)}}
@media(min-width:1024px){.rejilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e12) var(--e6)}}
.rejilla-3{display:grid;gap:var(--e5);grid-template-columns:1fr}
@media(min-width:768px){.rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e6)}}

.cromo{display:flex;flex-direction:column;height:100%;position:relative;color:var(--tinta)}
.cromo-foto{
  position:relative;aspect-ratio:4/5;background:var(--foto-fondo);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:var(--radio-2);isolation:isolate;
}
/* la línea de hielo que se dibuja bajo la foto al pasar el mouse */
.cromo-foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;background:var(--hielo);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--curva-sale);
}
.cromo:hover .cromo-foto::after,.cromo:focus-visible .cromo-foto::after{transform:scaleX(1)}
.cromo-foto picture{display:contents}
.cromo-foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--curva-sale),opacity .5s ease;
}
.cromo:hover .cromo-foto img{transform:scale(1.045)}
.cromo-foto .cromo-alt{position:absolute;inset:0;opacity:0;display:none}
@media(hover:hover) and (pointer:fine){
  .cromo-foto .cromo-alt{display:block}
  .cromo:hover .cromo-foto .cromo-alt{opacity:1}
}
/* La foto puesta (modelo) solo sale en la pieza destacada del archivo */
.cromo-foto .cromo-puesta{display:none}
.cromo-sello{position:absolute;top:var(--e2);left:var(--e2);z-index:2;max-width:calc(100% - 2 * var(--e2));white-space:normal}
.cromo-num{
  position:absolute;bottom:var(--e3);right:var(--e3);z-index:2;
  font-family:var(--f-ui);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  color:rgba(255,255,255,.38);
}
.cromo-queda{
  position:absolute;left:var(--e3);top:var(--e3);z-index:2;
  font-family:var(--f-titular);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#0D0D0D;background:var(--hielo);border-radius:var(--radio);padding:5px 10px;line-height:1.2;
}
.cromo-cuerpo{padding:var(--e4) 2px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.cromo-meta{
  font-family:var(--f-ui);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
}
.cromo-estado{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0}
.cromo-estado::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tinta-3);flex-shrink:0}
.cromo-estado.sello-ya{color:var(--exito);background:none}
.cromo-estado.sello-ya::before{background:var(--exito);box-shadow:0 0 8px var(--exito)}
.cromo-estado.sello-pedido{color:var(--espera);background:none}
.cromo-estado.sello-pedido::before{background:var(--espera)}
.cromo-nombre{
  font-family:var(--f-titular);font-size:17px;font-weight:500;
  line-height:1.12;letter-spacing:.02em;text-transform:uppercase;color:#F4F4F4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--rapido);
}
@media(min-width:640px){.cromo-nombre{font-size:19px}}
.cromo:hover .cromo-nombre{color:#fff}
.cromo-pie{margin-top:auto;padding-top:var(--e3);display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2)}
.precio{
  font-family:var(--f-titular);font-weight:600;font-size:var(--t-lg);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#fff;
}
.cromo .precio{font-size:22px}
.precio-grande{font-size:clamp(36px,4vw,50px);line-height:1}
.cromo-tallas{font-family:var(--f-ui);font-size:12px;color:var(--tinta-3);letter-spacing:.06em}
.rejilla .cromo-cronica{display:none}
/* los renders viejos de Personalizalo ya vienen sobre negro */
.cromo-render .cromo-foto{background:var(--render-fondo)}
.cromo-render .cromo-foto img{object-fit:contain}

/* ══════════════ LA SALA DE LECTURA (archivo) ══════════════
   Mosaico de 3 tamaños: la primera pieza es la de portada. */
.sala{display:grid;gap:var(--e8) var(--e3);grid-template-columns:repeat(2,minmax(0,1fr))}
.sala .cromo-cronica{
  font-family:var(--f-cronica);font-size:var(--t-base);line-height:1.45;
  color:var(--tinta-2);margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:639px){
  .sala .cromo:nth-child(1){grid-column:1/-1}
  .sala .cromo:nth-child(1) .cromo-cronica{-webkit-line-clamp:6;font-size:17px}
  .sala .cromo:nth-child(n+4) .cromo-cronica{display:none}
  .sala .cromo:nth-child(n+2) .cromo-cronica{display:none}
}
@media(min-width:640px){
  .sala{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--e10) var(--e5)}
  .sala .cromo:nth-child(1){grid-column:span 6}
  .sala .cromo:nth-child(2),.sala .cromo:nth-child(3){grid-column:span 3}
  .sala .cromo:nth-child(n+4){grid-column:span 2}
  .sala .cromo:nth-child(n+4) .cromo-cronica{display:none}
}
@media(min-width:1024px){
  .sala{gap:var(--e12) var(--e6)}
  .sala .cromo:nth-child(1){grid-column:span 4;grid-row:span 2}
  .sala .cromo:nth-child(2),.sala .cromo:nth-child(3){grid-column:span 2}
  .sala .cromo:nth-child(n+4){grid-column:span 2}
}
.sala .cromo:nth-child(1) .cromo-foto .cromo-puesta{display:block;position:absolute;inset:0;z-index:0}
@media(min-width:640px){
  .sala .cromo:nth-child(1) .cromo-nombre{font-size:clamp(24px,2.6vw,38px);line-height:1;font-weight:600}
  .sala .cromo:nth-child(1) .precio{font-size:32px}
}
.sala>.esqueleto{margin-bottom:118px}
@media(max-width:639px){.sala>.esqueleto:nth-child(1){grid-column:1/-1}}
@media(min-width:640px) and (max-width:1023px){.sala>.esqueleto:nth-child(1){grid-column:span 6}.sala>.esqueleto:nth-child(2),.sala>.esqueleto:nth-child(3){grid-column:span 3}.sala>.esqueleto:nth-child(n+4){grid-column:span 2}}
@media(min-width:1024px){.sala>.esqueleto:nth-child(1){grid-column:span 4;grid-row:span 2}.sala>.esqueleto:nth-child(n+2){grid-column:span 2}}

/* ══════════════ FRANJA DE CONFIANZA ══════════════ */
.confianza{background:var(--papel-2);border-block:var(--filete)}
.confianza ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e3) var(--e8);justify-content:center;padding-block:var(--e4)}
.confianza li{display:flex;align-items:center;gap:var(--e2);font-size:var(--t-sm);color:var(--tinta-2)}
.confianza svg{width:17px;height:17px;color:var(--exito);flex-shrink:0}

/* ══════════════ CHIPS ══════════════ */
.chips{display:flex;gap:var(--e2);flex-wrap:wrap}
.chips-scroll{
  display:flex;gap:var(--e2);overflow-x:auto;padding-bottom:var(--e2);
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
}
.chips-scroll::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-ui);font-size:var(--t-sm);font-weight:500;
  padding:9px 16px;border:1px solid var(--regla-fuerte);border-radius:999px;
  background:transparent;color:var(--tinta-2);white-space:nowrap;
  transition:all var(--rapido);min-height:42px;scroll-snap-align:start;
}
.chip:hover{border-color:#fff;color:#fff}
.chip[aria-pressed="true"],.chip.activo{background:#fff;color:#0D0D0D;border-color:#fff}
.chip-num{font-variant-numeric:tabular-nums;opacity:.7;font-size:var(--t-xs)}

/* ══════════════ ESTADOS VACÍOS ══════════════ */
.vacio{
  grid-column:1/-1;text-align:center;padding:var(--e16) var(--e5);
  border:1px dashed var(--regla-fuerte);border-radius:var(--radio-2);
  background:radial-gradient(80% 120% at 50% 0%,rgba(212,175,55,.06),rgba(0,0,0,0) 60%),var(--papel-2);
}
.vacio h3{margin-bottom:var(--e3)}
.vacio p{color:var(--tinta-2);max-width:46ch;margin-inline:auto;margin-bottom:var(--e6)}
.vacio-acciones{display:flex;gap:var(--e3);justify-content:center;flex-wrap:wrap}

/* ══════════════ VER MÁS (catálogo bajo pedido) ══════════════ */
.ver-mas{display:flex;flex-direction:column;align-items:center;gap:var(--e3);margin-top:var(--e10)}
.ver-mas[hidden]{display:none}
.ver-mas .btn{min-width:min(100%,320px)}
.ver-mas .btn[disabled]{opacity:.55;cursor:progress}
.ver-mas .sub{font-size:var(--t-sm);color:var(--tinta-3);font-variant-numeric:tabular-nums}

/* ══════════════ ZONA OSCURA ══════════════ */
.oscuro{background:var(--oscuro);color:var(--oscuro-txt)}
.oscuro .sub,.oscuro p{color:var(--tinta-2)}

/* ══════════════ LA CRÓNICA ══════════════
   El mejor activo del sitio: la historia de cada pieza, en Garamond. */
.cronica{
  font-family:var(--f-cronica);
  font-size:clamp(20px,2vw,25px);
  line-height:1.5;color:#D9D9D9;max-width:60ch;
}
.cronica p+p{margin-top:var(--e4)}
.cronica p:first-of-type::first-letter{
  font-family:var(--f-titular);font-weight:700;float:left;font-size:3.3em;line-height:.82;
  padding:6px 10px 0 0;color:var(--oro);
}
.cronica-marca{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-titular);font-size:13px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin-bottom:var(--e3);
}
.cronica-marca::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.cronica-corta{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* ══════════════ FICHA DE PRODUCTO ══════════════ */
.ficha{display:grid;gap:var(--e8);align-items:start}
@media(min-width:900px){
  .ficha{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,4.5vw,72px)}
  /* La galería es la columna corta: queda pegada mientras se baja por el
     panel de compra (antes el panel llevaba un top de 88 px sin sticky y
     arrancaba más abajo que la foto). */
  .galeria{position:sticky;top:calc(var(--nav-alto) + var(--e5))}
}
.galeria-principal{
  position:relative;display:block;width:100%;
  background:var(--foto-fondo);border:0;border-radius:var(--radio-2);
  aspect-ratio:4/5;overflow:hidden;cursor:zoom-in;
}
.galeria-principal img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--lento) var(--curva),opacity .35s ease;
}
.galeria-principal.ampliada{cursor:zoom-out}
.galeria-principal.ampliada img{transform:scale(2)}
.galeria-principal.es-render{background:var(--render-fondo)}
.galeria-principal.es-render img{object-fit:contain}
.galeria-tiras{display:flex;gap:var(--e2);margin-top:var(--e3);overflow-x:auto;scrollbar-width:none}
.galeria-tiras::-webkit-scrollbar{display:none}
.galeria-tira{
  flex:0 0 68px;aspect-ratio:4/5;background:var(--foto-fondo);
  border:1px solid var(--regla-fuerte);border-radius:var(--radio);overflow:hidden;
  opacity:.6;transition:border-color var(--rapido),opacity var(--rapido);
}
.galeria-tira:hover{opacity:1}
.galeria-tira[aria-current="true"]{border-color:var(--hielo);opacity:1}
.galeria-tira img{width:100%;height:100%;object-fit:cover}
.galeria-pista{
  font-size:var(--t-xs);color:var(--tinta-3);
  margin-top:var(--e2);display:flex;align-items:center;gap:6px;
}
.galeria-pista .pista-mouse{display:none}
@media(hover:hover) and (pointer:fine){.galeria-pista .pista-tacto{display:none}.galeria-pista .pista-mouse{display:inline}}
/* La galería: foto grande con las miniaturas abajo; en pantallas anchas las
   miniaturas van en una columna a la izquierda, pegadas al bajar. */
.galeria{display:grid;gap:var(--e3);align-items:start}
.galeria-tiras[hidden],.galeria-pista[hidden]{display:none}
@media(min-width:1100px){
  .galeria:not(.sin-tiras){grid-template-columns:76px minmax(0,1fr)}
  .galeria:not(.sin-tiras) .galeria-tiras{order:-1;flex-direction:column;margin-top:0;overflow:visible}
  .galeria:not(.sin-tiras) .galeria-tira{flex:0 0 auto;width:76px}
  .galeria:not(.sin-tiras) .galeria-pista{grid-column:2}
}

.ficha-cab{position:relative;border-bottom:var(--filete);padding-bottom:var(--e5);margin-bottom:var(--e2)}
.ficha-liga{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-titular);font-size:13px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--hielo);margin-bottom:var(--e3);
}
.ficha-liga::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.ficha-liga img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.ficha-liga.con-logo::before{display:none}
.ficha-titulo{position:relative;font-size:clamp(34px,4.2vw,58px);line-height:.92;margin-bottom:var(--e3)}
.ficha-sub{font-size:var(--t-base);color:var(--tinta-2)}
/* el dorsal de la pieza, gigante y calado detrás del título */
.ficha-dorsal{
  position:absolute;right:-6px;top:-28px;z-index:-1;pointer-events:none;user-select:none;
  font-family:var(--f-titular);font-weight:700;font-size:clamp(150px,16vw,240px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.28);
}
.ficha-panel{isolation:isolate}

.bloque{padding-block:var(--e5);border-bottom:var(--filete)}
.bloque:last-of-type{border-bottom:none}
.bloque-titulo{
  font-family:var(--f-ui);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:var(--e3);display:flex;justify-content:space-between;align-items:center;gap:var(--e3);
}
.enlace-fino{
  font-family:var(--f-ui);font-size:var(--t-xs);font-weight:500;color:var(--hielo);
  text-transform:none;letter-spacing:0;border-bottom:1px solid currentColor;
}

/* selector de talla — solo se muestran las que existen */
.tallas{display:flex;gap:var(--e2);flex-wrap:wrap}
.talla{
  min-width:56px;height:56px;padding:0 var(--e3);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--regla-fuerte);border-radius:var(--radio);
  font-family:var(--f-titular);font-weight:500;font-size:17px;letter-spacing:.06em;
  background:transparent;color:#fff;transition:all var(--rapido);
}
.talla:hover{border-color:#fff}
.talla[aria-pressed="true"]{background:#fff;color:#0D0D0D;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.talla-unica{font-size:var(--t-sm);color:var(--tinta-2);margin-top:var(--e2)}

.medidas{background:var(--papel-2);border:var(--filete);border-radius:var(--radio-2);padding:var(--e4);margin-top:var(--e3)}
.medidas table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.medidas td{padding:7px 0;border-bottom:1px solid var(--regla);color:var(--tinta-2)}
.medidas tr:last-child td{border-bottom:none}
.medidas td:last-child{text-align:right;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.medidas-nota{font-size:var(--t-xs);color:var(--tinta-3);margin-top:var(--e2);line-height:1.45}
/* la guía de tallas va plegada: se abre solo si hace falta */
.medidas-plegable summary{cursor:pointer;list-style:none;margin-bottom:0;min-height:44px;align-items:center;color:var(--tinta-2)}
.medidas-plegable summary::-webkit-details-marker{display:none}
.medidas-plegable summary::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--normal)}
.medidas-plegable[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.medidas-plegable summary:hover{color:#fff}
.medidas-plegable .medidas{margin-top:var(--e2)}

/* la salida del callejón sin salida */
.desvio{background:var(--espera-tenue);border:1px solid rgba(212,175,55,.5);border-radius:var(--radio-2);padding:var(--e5)}
.desvio h3{font-size:var(--t-h3);margin-bottom:var(--e2)}
.desvio p{font-size:var(--t-sm);color:var(--tinta-2);margin-bottom:var(--e4);max-width:44ch}

/* bloque editorial: etiqueta lateral + cuerpo, patrón de revista */
.bloque-editorial{display:grid;gap:var(--e4)}
@media(min-width:900px){
  .bloque-editorial{grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:var(--e12);align-items:start}
  .bloque-editorial>div:first-child{position:sticky;top:calc(var(--nav-alto) + var(--e5))}
}

.specs{display:grid;grid-template-columns:auto 1fr;gap:var(--e3) var(--e5);font-size:var(--t-sm)}
.specs dt{color:var(--tinta-3)}
.specs dd{font-weight:500;text-align:right;color:#fff}

/* barra de acción fija en el celular */
.barra-accion{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(13,13,13,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--regla-fuerte);
  padding:var(--e3) var(--e5);padding-bottom:calc(var(--e3) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:var(--e4);
  transform:translateY(110%);transition:transform var(--normal) var(--curva);
}
.barra-accion.visible{transform:translateY(0)}
.barra-accion .precio{flex-shrink:0;font-size:24px}
.barra-accion .btn{flex:1}
@media(min-width:900px){.barra-accion{display:none}}
body.con-barra-accion{padding-bottom:86px}
@media(min-width:900px){body.con-barra-accion{padding-bottom:0}}

.ficha-confianza{list-style:none;display:grid;gap:12px;margin-top:var(--e5);padding:0}
.ficha-confianza li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm);color:var(--tinta-2);line-height:1.5}
.ficha-confianza svg{width:18px;height:18px;flex-shrink:0;color:var(--exito);margin-top:1px}
.ficha-confianza a{color:#fff}

/* «Así se ve de noche»: la leyenda de esa misma camiseta, en la ficha */
.ficha-leyenda{display:grid;gap:var(--e8);align-items:center}
@media(min-width:900px){.ficha-leyenda{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--e16)}}
.ficha-leyenda figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radio-2);background:#000}
.ficha-leyenda figure img{width:100%;height:100%;object-fit:cover}
.ficha-leyenda .titulo-xl{margin:var(--e2) 0 var(--e5)}

/* ══════════════ ACORDEÓN ══════════════ */
.faq{border-top:var(--filete)}
.faq details{border-bottom:var(--filete)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  padding:var(--e5) 0;cursor:pointer;list-style:none;
  font-family:var(--f-ui);font-weight:500;font-size:var(--t-lg);color:#fff;min-height:56px;
  transition:color var(--rapido);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:12px;height:12px;flex-shrink:0;
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;
  color:var(--tinta-3);transition:transform var(--normal) var(--curva-sale);
}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--hielo)}
.faq details[open] summary,.faq summary:hover{color:var(--hielo)}
.faq-cuerpo{padding-bottom:var(--e6);color:var(--tinta-2);max-width:var(--ancho-texto);font-size:var(--t-base)}

/* ══════════════ CARRITO (contrato de cart.js — NO tocar sus IDs) ══════════════ */
.cart-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity var(--normal);
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:100%;max-width:430px;background:#101010;
  border-left:1px solid var(--regla-fuerte);
  transform:translateX(100%);transition:transform var(--lento) var(--curva-sale);
  display:flex;flex-direction:column;overscroll-behavior:contain;
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
}
.cart-drawer.open{transform:translateX(0)}
.cart-cab{display:flex;align-items:center;justify-content:space-between;padding:var(--e4) var(--e5);border-bottom:1px solid var(--regla)}
.cart-cab h2{font-size:26px}
.cart-pie{border-top:1px solid var(--regla);padding:var(--e5);padding-bottom:calc(var(--e5) + env(safe-area-inset-bottom));background:#0B0B0B}
.cart-total-fila{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--e3)}
.cart-total-fila span:first-child{font-family:var(--f-titular);font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
#cart-total{font-family:var(--f-titular);font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
#cart-items{flex:1;overflow-y:auto;padding-inline:var(--e5);overscroll-behavior:contain}
#cart-items img{background:var(--foto-fondo)}
#cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--e5);gap:var(--e2)}
#cart-empty svg{width:52px;height:52px;color:var(--regla-fuerte);margin-bottom:var(--e2)}
#cart-empty.hidden,#cart-filled.hidden{display:none}
#cart-filled{flex:1;display:flex;flex-direction:column;min-height:0}

/* utilidades que cart.js, checkout.js y gracias.html generan — por contrato */
.flex{display:flex}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.block{display:block}
.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.py-4{padding-block:16px}.pt-2{padding-top:8px}.pt-4{padding-top:16px}.p-4{padding:16px}
.mt-0\.5{margin-top:2px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.ml-auto{margin-left:auto}.ml-4{margin-left:16px}.mx-auto{margin-inline:auto}.min-w-0{min-width:0}
.w-5{width:20px}.h-5{height:20px}.w-6{width:24px}.w-7{width:28px}.h-7{height:28px}.w-16{width:64px}.h-16{height:64px}.w-20{width:80px}.h-20{height:80px}
.w-full{width:100%}.h-full{height:100%}
.object-cover{object-fit:cover}.overflow-hidden{overflow:hidden}
.rounded{border-radius:var(--radio)}.rounded-lg{border-radius:var(--radio-2)}
.border{border:1px solid var(--regla-fuerte)}
.border-b{border-bottom:1px solid var(--regla)}
.border-t{border-top:1px solid var(--regla-fuerte)}
.border-sand,.border-sand-light,.border-chalk{border-color:var(--regla-fuerte)}
.bg-sand-light,.bg-pitch{background:var(--papel-3)}
.text-sm{font-size:var(--t-sm)}.text-xs{font-size:var(--t-xs)}.text-lg{font-size:var(--t-lg)}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.text-center{text-align:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}
.text-warm,.text-smoke{color:var(--tinta-2)}
.text-ash{color:var(--tinta-3)}
.text-white{color:var(--tinta)}
.text-ice{color:var(--hielo)}
.text-green-400{color:var(--exito)}
.text-red-400{color:#FF8A8A}
.border-red-500{border-color:#FF6B6B}
.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.08em}.leading-relaxed{line-height:1.65}
.hover\:bg-sand-light:hover{background:var(--papel-3)}
.hover\:text-urgency:hover,.hover\:text-ice:hover{color:var(--hielo)}
.hover\:text-white:hover{color:#fff}
.hover\:border-ice:hover{border-color:var(--hielo)}
.transition-colors{transition:color var(--rapido),border-color var(--rapido),background var(--rapido)}
.cursor-pointer{cursor:pointer}
.opacity-25{opacity:.25}.opacity-75{opacity:.75}
.animate-spin{animation:gira 1s linear infinite}
.space-y-1>*+*{margin-top:4px}.space-y-2>*+*{margin-top:8px}.space-y-3>*+*{margin-top:12px}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-span-full{grid-column:1/-1}
.hidden{display:none}
.fixed{position:fixed}.relative{position:relative}.absolute{position:absolute}.top-0{top:0}.left-0{left:0}.right-0{right:0}
.z-\[70\]{z-index:70}.transform{transform:translateZ(0)}.-translate-y-full{transform:translateY(-100%)}
.item-plazo{font-size:var(--t-2xs);color:var(--tinta-3);letter-spacing:.04em;margin-top:2px}
.cromo-pago-nota{font-size:var(--t-xs);color:var(--tinta-3);margin-top:var(--e2)}
.vault-nota{font-size:var(--t-xs);color:var(--tinta-3);margin-top:var(--e3)}

/* ══════════════ EL AVISO DE «AGREGADO AL CARRITO» ══════════════
   cart.js lo dibuja con estilos escritos en el propio JavaScript. Ese
   archivo es maquinaria y no se toca: lo vestimos desde acá (por eso el
   !important: hay que ganarle al atributo style). */
#cart-toast > div{
  background:rgba(16,16,16,.96)!important;
  border-bottom:1px solid var(--regla-fuerte)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#cart-toast p{font-family:var(--f-ui)!important;color:#fff!important}
#cart-toast p:last-of-type{color:var(--tinta-2)!important}
#cart-toast div[style*="border-radius:50%"]{background:var(--exito)!important}
#cart-toast div[style*="border-radius:50%"] svg{color:#0D0D0D!important}
#cart-toast button{font-family:var(--f-titular)!important;font-weight:500!important;letter-spacing:.12em!important;border-radius:var(--radio)!important}
#cart-toast button[onclick*="openCartDrawer"]{background:var(--hielo)!important;color:#0D0D0D!important}
#cart-toast button[onclick="dismissCartToast()"]{color:#fff!important;border:1px solid var(--regla-fuerte)!important}
#cart-toast svg{color:var(--tinta-3)}

/* El aviso de confirmar pedido que arma checkout.js (también maquinaria) */
#confirm-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#confirm-modal > div{background:#111!important;border:1px solid var(--regla-fuerte)!important;border-radius:var(--radio-2)!important;box-shadow:var(--sombra-alta)}
#confirm-modal p:first-child{font-family:var(--f-titular)!important;font-size:28px!important;text-transform:uppercase;color:#fff!important}
#confirm-modal p{color:var(--tinta-2)!important}
#confirm-modal button{font-family:var(--f-titular)!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radio)!important}
#confirm-modal button[onclick="closeConfirmModal()"]{border:1px solid rgba(255,255,255,.8)!important;color:#fff!important}
#confirm-modal button[onclick="executeCustomOrder()"]{background:var(--hielo)!important;color:#0D0D0D!important}

/* ══════════════ BOTÓN FLOTANTE DE WHATSAPP ══════════════ */
.wa-flota{
  position:fixed;right:var(--e4);bottom:var(--e4);z-index:40;
  width:56px;height:56px;border-radius:50%;
  background:var(--whatsapp);color:#0D0D0D;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.45),0 0 0 1px rgba(0,0,0,.4);
  transition:transform var(--normal) var(--curva-sale),opacity .3s ease;
}
.wa-flota:hover{transform:scale(1.08)}
.wa-flota svg{width:28px;height:28px;fill:currentColor}
body.con-barra-accion .wa-flota{bottom:calc(86px + var(--e3))}
@media(min-width:900px){body.con-barra-accion .wa-flota{bottom:var(--e4)}}
@media(max-width:959px){body.compra .wa-flota{display:none}}

/* ══════════════ PIE ══════════════
   Termina con el nombre a todo el ancho, calado, como un marcador apagado. */
.pie{background:#050505;color:var(--tinta-2);border-top:1px solid #161616;overflow:hidden;position:relative}
.pie::before{
  content:"";position:absolute;left:50%;top:0;width:min(1200px,120vw);height:420px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(212,175,55,.1),rgba(0,0,0,0) 70%);
}
.pie .env{position:relative}
.pie-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e6);
  padding-block:var(--e16) var(--e10);border-bottom:1px solid #1C1C1C;
}
.pie-cta p{font-family:var(--f-titular);font-weight:700;text-transform:uppercase;color:#fff;font-size:clamp(30px,4.4vw,56px);line-height:.95;max-width:18ch;margin:0}
.pie-cta p em{font-style:normal;color:var(--oro)}
.pie-rejilla{display:grid;gap:var(--e8);padding-block:var(--e12) var(--e8)}
@media(min-width:768px){.pie-rejilla{grid-template-columns:1.4fr 1fr 1fr}}
.pie h3{font-family:var(--f-ui);font-size:var(--t-2xs);font-weight:600;letter-spacing:.2em;color:var(--tinta-3);margin-bottom:var(--e3)}
.pie img{height:44px;width:auto;margin-bottom:var(--e4)}
.pie p{font-size:var(--t-sm);color:var(--tinta-2);max-width:36ch}
.pie nav{display:flex;flex-direction:column;gap:2px}
.pie nav a{font-size:var(--t-sm);color:#E6E6E6;transition:color var(--rapido);display:inline-flex;align-items:center;min-height:40px;padding-block:2px}
.pie nav a:hover{color:var(--hielo)}
.pie-social{display:flex;gap:var(--e2)}
.pie-social a{
  width:44px;height:44px;border:1px solid #2A2A2A;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#E6E6E6;transition:all var(--rapido);
}
.pie-social a:hover{background:#fff;color:#0D0D0D;border-color:#fff}
.pie-social svg{width:19px;height:19px;fill:currentColor}
.pie-legal{
  border-top:1px solid #1C1C1C;padding-block:var(--e5);
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;justify-content:space-between;
  font-size:var(--t-xs);color:var(--tinta-3);
}
.pie-legal nav{flex-direction:row;gap:var(--e4)}
.pie-legal a{color:var(--tinta-3)}
.pie-legal a:hover{color:#fff}
.pie .btn-wa{color:#0D0D0D}
.pie-gigante{
  display:block;font-family:var(--f-titular);font-weight:700;text-transform:uppercase;
  font-size:27vw;line-height:.76;letter-spacing:-.02em;text-align:center;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
  margin:var(--e6) 0 -3.4vw;user-select:none;pointer-events:none;
  background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,0) 70%);
  -webkit-background-clip:text;background-clip:text;
}

/* ══════════════ MIGA DE PAN ══════════════ */
.miga{
  font-size:var(--t-xs);color:var(--tinta-3);letter-spacing:.04em;
  padding-block:var(--e3);display:flex;gap:var(--e2);align-items:center;white-space:nowrap;min-width:0;
}
.miga>*{flex-shrink:0}
.miga a{color:var(--tinta-2)}
.miga a:hover{color:var(--hielo)}
.miga span[aria-current]{color:#fff;font-weight:500;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ══════════════ AVISOS ══════════════ */
.aviso{
  border-left:3px solid var(--hielo);background:var(--acento-tenue);
  padding:var(--e4) var(--e5);border-radius:0 var(--radio) var(--radio) 0;
  font-size:var(--t-sm);color:var(--tinta-2);
}
.aviso-ok{border-left-color:var(--exito);background:var(--exito-tenue)}
.error-msg{color:#FF8A8A;font-size:var(--t-xs);margin-top:6px;min-height:1em}

/* ══════════════ CARGANDO ══════════════ */
.esqueleto{
  background:linear-gradient(90deg,#141414 25%,#1E1E1E 50%,#141414 75%);
  background-size:200% 100%;animation:brillo 1.6s ease-in-out infinite;
  border-radius:var(--radio);
}
@keyframes brillo{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════ FORMULARIOS (pedido, seguimiento, contacto) ══════════════ */
.campo,.input-buscar,.buscador input{background:#111;color:#fff;border-color:var(--regla-fuerte)}
.campo:focus,.input-buscar:focus,.buscador input:focus{border-color:var(--hielo);outline:none;box-shadow:0 0 0 3px var(--acento-tenue)}
input[type="radio"],input[type="checkbox"]{accent-color:var(--hielo)}
select option{background:#111;color:#fff}

/* ══════════════ CABECERAS GRANDES ══════════════
   El titular a escala de estadio. La palabra final puede ir en hielo (em)
   o calada en oro (.calado). */
.cabecera-xl{display:grid;gap:var(--e6);margin-bottom:var(--e12);align-items:end}
@media(min-width:900px){.cabecera-xl{grid-template-columns:1.3fr 1fr;gap:var(--e12)}}
.titulo-xl{font-size:clamp(46px,8.4vw,128px);line-height:.86;letter-spacing:-.006em}
.titulo-xl em{font-style:normal;color:var(--hielo)}
.titulo-xl .calado{color:transparent;-webkit-text-stroke:1.5px var(--oro)}
.titulo-xl .oro{color:var(--oro)}
.cabecera-xl-lado .sub{margin-bottom:var(--e5)}
.cabecera-xl-lado .sub b{font-family:var(--f-titular);font-size:1.3em;font-weight:600;color:#fff}

/* ══════════════ PASOS NUMERADOS ══════════════
   Tres pasos con el número calado, como dorsal. */
.pasos{display:grid;gap:0;border-top:1px solid var(--regla-fuerte)}
@media(min-width:900px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{position:relative;padding:var(--e8) 0;border-bottom:1px solid var(--regla)}
@media(min-width:900px){.paso{padding:var(--e10) var(--e8) var(--e10) 0;border-bottom:0;border-right:1px solid var(--regla)}.paso+.paso{padding-left:var(--e8)}.paso:last-child{border-right:0}}
.paso-n{
  display:block;font-family:var(--f-titular);font-weight:700;font-size:clamp(76px,8.4vw,120px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(212,175,55,.75);margin-bottom:var(--e5);
  transition:color .6s var(--curva-sale);
}
.paso:hover .paso-n{color:rgba(212,175,55,.16)}
.paso h3{font-size:clamp(26px,2.7vw,34px);line-height:1;margin-bottom:var(--e3)}
.paso p{color:var(--tinta-2);max-width:36ch}

/* ══════════════ EL VIDEO de la Mystery Box ══════════════
   Reemplaza al lacre girando (Diego, 19-oct-2026). Lo produce el hilo
   Contenido; hasta que exista, el <video> va `hidden` y la banda a una
   columna (ver index.html, sección #caja). */
.caja-video{margin-inline:auto;width:min(100%,360px)}
.caja-video video{display:block;width:100%;height:auto;max-height:70vh;border-radius:var(--radio-2);background:#000;object-fit:cover}
.caja-video video[hidden]{display:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* ══════════════ CAJA SELLADA (página) ══════════════
   Toda la página ya es de noche: el cuerpo .caja-sellada solo suma el oro. */
body.caja-sellada{background:var(--papel)}
body.caja-sellada .menu a[aria-current]{color:var(--oro)}
body.caja-sellada .menu a[aria-current]::after{background:var(--oro)}
.banda-papel{
  position:relative;background:var(--papel-2);color:var(--tinta);
  padding:var(--e10) 0;border-block:1px solid var(--regla);
}
.banda-papel::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--oro),transparent)}
.banda-papel .sub,.banda-papel p{color:var(--tinta-2)}
.banda-papel .contrato-lista{list-style:none;display:grid;gap:var(--e3);margin-top:var(--e5)}
.banda-papel .contrato-lista li{display:grid;grid-template-columns:22px 1fr;gap:var(--e3);align-items:start;font-size:var(--t-sm);color:var(--tinta-2)}
.banda-papel .contrato-lista li::before{content:"";width:8px;height:8px;margin-top:7px;background:var(--oro);transform:rotate(45deg)}
.armador-card{border:1px solid var(--regla-fuerte);border-radius:var(--radio-2);background:#101010;padding:var(--e6)}
body.caja-sellada .talla[aria-pressed="true"]{background:var(--oro);color:#0D0D0D;border-color:var(--oro)}
body.caja-sellada .sobre-lacrado{position:relative;padding-top:var(--e8)}
body.caja-sellada .sello-lacre{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3DB84,#D4AF37 45%,#8A6B18);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(212,175,55,.35);
}
body.caja-sellada .sello-lacre img{width:26px;height:26px;display:block}
body.caja-sellada .sobre-lacrado::before{content:"";display:block;height:14px;margin:0 0 var(--e4);border-bottom:1px dashed var(--regla-fuerte)}
.trato-caja{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center}
@media (max-width:640px){.trato-caja{grid-template-columns:64px 1fr}.trato-caja .precio{grid-column:1 / -1}}

/* ══════════════════════════════════════════════════════════════════════
   PORTADA · «NOCHE DE LEYENDAS»
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · El estadio encendido ──
   Foto a sangre (las leyendas a contraluz), brasas vivas en un canvas, el
   titular abajo a la izquierda. La barra queda encima, transparente. */
.estadio{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(640px,100svh);
  margin-top:calc(-1 * (var(--franja-alto) + var(--nav-alto) + 1px));
  display:flex;align-items:flex-end;background:#000;
}
.estadio-foto,.estadio-foto img{position:absolute;inset:0;width:100%;height:100%}
.estadio-foto{z-index:-3}
.estadio-foto img{object-fit:cover;object-position:50% 30%;transform-origin:62% 40%}
.js .estadio-foto img{animation:enciende 2.4s var(--curva-sale) both}
@keyframes enciende{from{transform:scale(1.09)}to{transform:scale(1)}}
.estadio-velo{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,0) 22%),
    linear-gradient(180deg,rgba(13,13,13,0) 42%,rgba(13,13,13,.78) 66%,#0D0D0D 92%);
}
.estadio-brasas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.estadio-in{position:relative;width:100%;padding-bottom:clamp(36px,7vh,80px);padding-top:calc(var(--franja-alto) + var(--nav-alto) + 40px)}
/* el titular de las diapositivas 2-4 es un <p> (un solo h1 por página): lleva la misma voz que el h1 */
.estadio-titulo{font-synthesis:none;font-family:var(--f-titular);font-weight:var(--titular-peso);text-transform:uppercase;color:#fff;text-wrap:balance;font-size:var(--t-hero);line-height:.84;letter-spacing:-.012em;margin:0 0 var(--e5);max-width:12ch}
.estadio-titulo .linea{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.estadio-titulo .linea>span{display:block}
.estadio-titulo em{font-style:normal;color:var(--hielo);text-shadow:0 0 40px rgba(77,168,255,.35)}
.js .estadio-titulo .linea>span{animation:subeLinea 1.2s var(--curva-sale) both;animation-delay:.15s}
.js .estadio-titulo .linea:nth-child(2)>span{animation-delay:.27s}
.js .estadio-aparece{animation:apareceSuave 1.2s var(--curva-sale) both;animation-delay:.5s}
.js .estadio-aparece.tarde{animation-delay:.68s}
@keyframes subeLinea{from{transform:translateY(108%)}to{transform:none}}
@keyframes apareceSuave{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.estadio-bajada{font-size:clamp(17px,1.6vw,20px);color:#DADADA;max-width:44ch;margin-bottom:var(--e6)}
.estadio-bajada b{color:#fff;font-weight:600}
.estadio-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e6)}
.estadio-confianza{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);margin-top:var(--e6);padding:0}
.estadio-confianza li{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--tinta-2)}
.estadio-confianza svg{width:15px;height:15px;color:var(--exito)}
.estadio-bajar{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:none;flex-direction:column;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.estadio-bajar i{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:baja 2.2s var(--curva) infinite;transform-origin:top}
@keyframes baja{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:760px){
  /* en el celular la foto sube: el grupo queda arriba y el texto debajo, sin taparlo */
  .estadio-foto{inset:auto 0 auto 0;top:-64px;height:calc(80% + 64px)}
  .estadio-foto img{object-position:50% 0;transform-origin:50% 30%}
  .estadio-velo{background:linear-gradient(180deg,rgba(13,13,13,.5) 0%,rgba(13,13,13,0) 16%),linear-gradient(180deg,rgba(13,13,13,0) 44%,rgba(13,13,13,.9) 62%,#0D0D0D 76%)}
  .estadio-acciones .btn{flex:1 1 100%}
  .estadio-confianza{display:none}
}
@media(min-width:761px){
  .estadio-velo{background:
    linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.62) 30%,rgba(13,13,13,0) 56%),
    linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,0) 20%),
    linear-gradient(180deg,rgba(13,13,13,0) 70%,#0D0D0D 100%)}
  .estadio{align-items:center}
  /* el grupo de leyendas ocupa la derecha de la foto: el texto va pegado a
     la izquierda de la pantalla (no al centro) para no taparlo */
  .estadio-foto img{object-position:25% 30%}
  .estadio-in{max-width:none;padding-inline:clamp(24px,5vw,96px);padding-bottom:clamp(60px,10vh,120px)}
  .estadio-titulo{font-size:clamp(56px,7vw,120px)}
  .estadio-bajada{max-width:36ch}
  .estadio-bajar{display:flex}
}

/* ── 1b · El carrusel: cuatro mensajes sobre el mismo estadio ──
   Leyendas · Retro · Temporada · Mystery Box. Se ve uno; al cambiar, el
   que entra vuelve a correr las animaciones del titular (pasa de
   display:none a visible). Los puntos son botones. */
.estadio-diapo[hidden]{display:none}
.estadio-puntos{display:flex;gap:10px;margin-top:var(--e6)}
.estadio-punto{position:relative;width:34px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.estadio-punto::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(255,255,255,.3);transition:background var(--normal) ease}
.estadio-punto:hover::before,.estadio-punto:focus-visible::before{background:#fff}
.estadio-punto[aria-current="true"]::before{background:var(--oro);box-shadow:0 0 10px rgba(212,175,55,.6)}
.estadio-punto:focus-visible{outline:2px solid var(--hielo);outline-offset:2px;border-radius:4px}

/* Lo que está lejos de la primera pantalla no se dibuja hasta que se acerca:
   ahorra trabajo al celular y no pide la letra de las crónicas antes de tiempo. */
#ya,#caja,#como,#sin-inventos{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* en el celular el carril no se mide (no va pegado): también espera, y sus fotos no compiten con la del estadio */
@media(max-width:899px){#leyendas{content-visibility:auto;contain-intrinsic-size:auto 1150px}}

/* ── 2 · Marquesina de equipos ── */
.marquesina{position:relative;overflow:hidden;padding-block:clamp(18px,2.4vw,30px);border-block:1px solid #1C1C1C;background:#090909}
.marquesina-pista{display:flex;width:max-content;animation:marquesina 70s linear infinite}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
.marquesina-pista span{
  font-family:var(--f-titular);font-weight:700;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(40px,6.6vw,96px);line-height:1;letter-spacing:.005em;padding-right:.5em;
  display:inline-flex;align-items:center;gap:.5em;color:#F4F4F4;
}
.marquesina-pista span img{height:clamp(34px,4.6vw,64px);width:auto}
.marquesina-pista span::after{content:"";width:.16em;height:.16em;background:var(--oro);transform:rotate(45deg);flex-shrink:0;box-shadow:0 0 14px rgba(212,175,55,.6)}
@keyframes marquesina{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquesina-pista{animation:none}}

/* ── 3 · Héroes de compra: el carril de leyendas ──
   En la computadora la sección se pega y el carril corre de lado mientras
   se baja (lo mueve un script, sin librerías). En el celular es un carril
   que se desliza con el dedo. Sin JavaScript, también se desliza. */
.leyendas{position:relative}
.leyendas-cab{display:grid;gap:var(--e5);align-items:end;margin-bottom:var(--e8)}
@media(min-width:900px){.leyendas-cab{grid-template-columns:1.3fr 1fr;gap:var(--e12);margin-bottom:var(--e10)}}
.carril{
  display:flex;gap:var(--e3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--e5) var(--e4);margin:0;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-padding-inline:var(--e5);
}
.carril::-webkit-scrollbar{display:none}
.heroe{
  position:relative;flex:0 0 min(84vw,440px);scroll-snap-align:start;
  display:flex;flex-direction:column;background:#0A0A0A;border:1px solid #1C1C1C;border-radius:var(--radio-2);overflow:hidden;
  transition:border-color var(--normal),transform var(--lento) var(--curva-sale);
}
.heroe:hover{border-color:#333}
.heroe-foto{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#000}
.heroe-foto picture,.heroe-foto img{position:absolute;inset:0;width:100%;height:100%}
.heroe-foto img{object-fit:cover;transition:transform 1.4s var(--curva-sale),filter .6s ease}
.heroe:hover .heroe-foto img{transform:scale(1.05)}
.heroe-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(10,10,10,.9) 92%,#0A0A0A 100%)}
.heroe-queda{position:absolute;right:12px;top:12px;left:auto;z-index:2}
.heroe-dorsal{
  position:absolute;right:-4px;bottom:-14px;z-index:1;pointer-events:none;
  font-family:var(--f-titular);font-weight:700;font-size:clamp(150px,14vw,210px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.55);
  transition:transform .9s var(--curva-sale),-webkit-text-stroke-color .5s;
}
.heroe:hover .heroe-dorsal{transform:translateY(-8px);-webkit-text-stroke-color:rgba(212,175,55,.9)}
.heroe-txt{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding:0 var(--e5) var(--e5);margin-top:-30px}
.heroe-eti{font-family:var(--f-titular);font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--hielo)}
.heroe h3{font-size:clamp(38px,3.6vw,50px);line-height:.92;margin:8px 0 10px}
.heroe h3 span{color:var(--oro)}
.heroe-hist{color:var(--tinta-2);font-size:var(--t-sm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.heroe-compra{display:flex;align-items:center;gap:var(--e3);margin-top:auto;padding-top:var(--e5)}
.heroe-compra .precio{font-size:30px;line-height:1}
.heroe-tallas{flex:1;color:var(--tinta-3);font-size:12.5px;letter-spacing:.06em;line-height:1.3}
.heroe-compra .btn{min-height:48px;padding:10px 20px;font-size:14px}
.heroe-final{
  flex:0 0 min(70vw,320px);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--e4);
  padding:var(--e6);border:1px dashed #2A2A2A;border-radius:var(--radio-2);
  background:radial-gradient(100% 70% at 50% 100%,rgba(77,168,255,.10),rgba(0,0,0,0) 70%);
}
.heroe-final p{font-family:var(--f-titular);font-size:clamp(30px,3vw,40px);font-weight:700;text-transform:uppercase;line-height:.95;color:#fff}
.leyendas-pie{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e4)}
.leyendas-riel{position:relative;flex:1;height:2px;background:#1E1E1E;overflow:hidden}
.leyendas-riel i{position:absolute;inset:0;background:var(--hielo);transform-origin:left;transform:scaleX(.1)}
.leyendas-cuenta{font-family:var(--f-titular);font-size:14px;letter-spacing:.16em;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.leyendas-cuenta b{color:#fff;font-weight:500}
.leyendas-nota{font-size:var(--t-xs);color:var(--tinta-3);margin-top:var(--e5);max-width:70ch}
/* el carril pegado (solo computadora, con JS y sin «menos movimiento») */
@media(min-width:900px){
  .carril{padding-inline:max(var(--e8),calc((100vw - var(--ancho)) / 2 + var(--e8)))}
  .heroe{flex-basis:clamp(340px,27vw,420px)}
  .leyendas.pegada{height:var(--alto-pegado,300vh)}
  .leyendas.pegada .leyendas-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .leyendas.pegada .carril{overflow:visible;scroll-snap-type:none;will-change:transform}
}

/* el círculo que sigue al mouse sobre las leyendas («Ver») */
.cursor-ver{
  position:fixed;left:0;top:0;z-index:90;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;
  background:var(--hielo);color:#0D0D0D;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-titular);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;opacity:0;transform:scale(.3);transition:opacity .25s,transform .35s var(--curva-sale);
}
.cursor-ver.activo{opacity:1;transform:scale(1)}
@media(hover:none),(pointer:coarse){.cursor-ver{display:none}}

/* ── 4 · Caja Sellada: la banda de oro ── */
.caja-banda{position:relative;overflow:hidden;background:#070707;border-block:1px solid #1A1A1A}
.caja-banda::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 75% 50%,rgba(212,175,55,.16),rgba(0,0,0,0) 65%),radial-gradient(40% 50% at 10% 100%,rgba(77,168,255,.06),rgba(0,0,0,0) 70%);
}
.caja-in{position:relative;display:grid;gap:var(--e12);align-items:center;padding-block:var(--e20)}
@media(min-width:900px){.caja-in{padding-block:var(--e32)}.caja-in.con-video{grid-template-columns:1.15fr .85fr}}
.caja-banda .antetitulo{color:var(--oro)}
.caja-banda .titulo-xl em{color:var(--oro);text-shadow:0 0 40px rgba(212,175,55,.3)}
.caja-texto>p{font-size:var(--t-lg);color:var(--tinta-2);max-width:46ch;margin:var(--e6) 0 var(--e8)}
.caja-pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2A2A2A;margin:0 0 var(--e8);padding:0}
.caja-pasos li{padding:var(--e4) var(--e3) 0 0;font-family:var(--f-titular);font-weight:600;text-transform:uppercase;font-size:clamp(18px,2vw,24px);line-height:1.05;color:#fff}
.caja-pasos b{display:block;font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.2em;color:var(--oro);margin-bottom:8px}
.caja-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e6)}
.caja-cta span{font-size:var(--t-sm);color:var(--tinta-3)}

/* ── 7 · Personalizalo, en una tira ── */
.personaliza-tira{
  position:relative;overflow:hidden;margin-top:var(--e12);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e5);
  background:#101010;border:1px solid #1E1E1E;border-radius:var(--radio-2);padding:var(--e8);
}
.personaliza-tira::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 50%,rgba(212,175,55,.12),rgba(0,0,0,0) 60%);pointer-events:none}
.personaliza-tira>*{position:relative}
.personaliza-tira h3{font-size:clamp(28px,3.2vw,42px);line-height:.95}
.personaliza-tira p{color:var(--tinta-2);margin-top:8px}
.personaliza-tira .precio{font-size:38px;color:var(--oro)}

/* ── 8 · Sin inventos ── */
.honesto{text-align:center;max-width:1000px;margin-inline:auto}
.honesto .antetitulo{justify-content:center}
.honesto-cita{font-family:var(--f-cronica);font-size:clamp(28px,4.2vw,54px);line-height:1.12;letter-spacing:-.01em;color:#fff;margin:var(--e6) 0 var(--e8)}
.honesto-cita::before{content:"“";display:block;font-family:var(--f-titular);font-size:1.8em;line-height:.6;color:var(--oro);margin-bottom:var(--e4)}
.honesto p{color:var(--tinta-2);max-width:62ch;margin-inline:auto}
.honesto small{display:block;margin-top:var(--e6);font-size:var(--t-xs);color:var(--tinta-3);max-width:66ch;margin-inline:auto;line-height:1.55}

/* ══════════════ APARICIÓN AL BAJAR ══════════════
   Solo si hay JavaScript (html.js); sin él, todo se ve de entrada. */
.js .aparece{opacity:0;transform:translateY(30px);transition:opacity 1s var(--curva-sale),transform 1s var(--curva-sale)}
.js .aparece.visible{opacity:1;transform:none}
.js .aparece[data-retraso="1"]{transition-delay:.08s}
.js .aparece[data-retraso="2"]{transition-delay:.16s}
.js .aparece[data-retraso="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .aparece{opacity:1;transform:none}}

/* ══════════════ ENTRE PÁGINAS ══════════════
   Chrome y Safari recientes funden una página con la siguiente; los demás
   navegadores cambian de página como siempre. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sale .32s var(--curva) both}
::view-transition-new(root){animation:vt-entra .5s var(--curva-sale) both}
@keyframes vt-sale{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ══════════════ IMPRESIÓN ══════════════ */
@media print{
  .barra,.franja,.wa-flota,.barra-accion,.cart-drawer,.cart-overlay,.menu-movil,.estadio-brasas{display:none!important}
  body::after{display:none}
  body,html{background:#fff;color:#000}
  h1,h2,h3,strong,b{color:#000}
}

/* ── Modal «Confirmá tu pedido» (Personalizalo, pedidos.html) ──
   checkout.js lo arma con estilos en línea de la marca anterior y checkout.js no se toca:
   la noche se impone desde acá con !important. */
#confirm-modal{background:rgba(0,0,0,.82)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#confirm-modal>div{background:var(--papel-2)!important;border:1px solid rgba(212,175,55,.45)!important;border-radius:var(--radio-2)!important;box-shadow:0 30px 80px -20px #000}
#confirm-modal p{color:var(--tinta-2)!important;font-family:var(--f-ui)!important;line-height:1.5}
#confirm-modal p:first-child{color:var(--tinta)!important;font-family:var(--f-titular)!important;font-size:24px!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase;line-height:1.15}
#confirm-modal button{min-height:52px;font-family:var(--f-titular)!important;font-size:14px!important;font-weight:500!important;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--radio)!important;transition:background var(--normal),border-color var(--normal)}
#confirm-modal button:first-child{background:transparent!important;border:1.5px solid var(--tinta-3)!important;color:var(--tinta)!important}
#confirm-modal button:first-child:hover{border-color:var(--tinta)!important}
#confirm-modal button:last-child{background:var(--hielo)!important;border:none!important;color:#0D0D0D!important}
#confirm-modal button:last-child:hover{background:var(--hielo-claro)!important}