/* ============================================================
   ECLIPSE — hoja de estilos del sitio

   Antes cada página llevaba su propio bloque <style> con las mismas
   reglas repetidas once veces. Acá viven una sola vez. Sigue sin haber
   paso de compilación: es un archivo estático que el navegador carga
   tal cual.

   La paleta es la de siempre —negro, hueso, bronce— y no cambia. Lo
   que cambió es la forma: raíl-índice a la izquierda, retícula con
   filete, y un sistema de movimiento con curvas largas donde nada
   rebota.

   TODO el movimiento de este archivo se apaga con
   prefers-reduced-motion. Está al final, en un solo bloque.
   ============================================================ */

:root{
  /* Fondo */
  --black:#0a0a09;
  --ink:#131211;      /* un paso arriba del negro */
  --ink-2:#1a1916;    /* dos pasos: paneles, tarjetas */
  --ink-3:#232120;

  /* Texto */
  --bone:#f2ede3;
  --silver:#b7b2a6;
  --steel:#857f72;   /* 4,98:1 sobre --black, 4,66:1 sobre --ink (medido en la fase 8; con #827c6f las tarjetas y el pie daban 4,47) */

  /* Acento — es color de texto y de filete, nunca de relleno grande */
  --accent:#c99457;

  /* Filetes */
  --line:rgba(242,237,228,0.09);
  --line-2:rgba(242,237,228,0.16);
  --line-3:rgba(242,237,228,0.30);

  /* Profundidad */
  --lift:0 26px 60px -34px rgba(0,0,0,.9);
  --lift-2:0 44px 90px -44px rgba(0,0,0,.95);

  /* Métrica */
  --rail-w:248px;
  --pad:clamp(20px,4vw,58px);
  --maxw:1560px;
  --promo-h:0px;
  --topbar-h:60px;

  /* Curvas — una sola familia para todo el sitio. La larga es la que
     da la sensación de que las cosas llegan frenando en vez de
     aparecer de golpe. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-soft:cubic-bezier(.33,1,.68,1);

  --t-xs:140ms;
  --t-s:260ms;
  --t-m:520ms;
  --t-l:900ms;
  --t-xl:1400ms;

  /* Compatibilidad con el nombre viejo del token */
  --ease:var(--e-out);
  --line-strong:var(--line-2);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scrollbar-color:rgba(242,237,228,0.22) var(--black);
  scrollbar-width:thin;
  scroll-padding-top:calc(var(--topbar-h) + var(--promo-h) + 20px);
}
@media (min-width:1080px){ html{ scroll-padding-top:40px; } }

body{
  background:var(--black);
  color:var(--bone);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:17px;
  /* Cormorant es un serif de trazo fino y alto contraste. En 400 sobre
     negro se deshilacha; en 500 tiene cuerpo y sigue siendo el mismo
     tipo. Pirata One tiene un solo grosor, así que los títulos no se
     enteran. */
  font-weight:500;
  line-height:1.62;
  overflow-x:hidden;
  /* Sin -webkit-font-smoothing:antialiased a propósito: adelgaza el
     texto claro sobre fondo oscuro, que es casi todo el sitio. El
     suavizado por defecto lo deja más sólido. */
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--bone); color:var(--black); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
/* El atributo hidden gana siempre: si no, cualquier regla de componente
   con display lo pisa y deja el elemento a la vista. */
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:rgba(242,237,228,0.22); border:2px solid var(--black); background-clip:padding-box; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(242,237,228,0.4); background-clip:padding-box; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:1px; }

/* ---------- Atmósfera ----------
   El negro plano se lee como espacio muerto. Estas dos capas fijas le
   dan profundidad: una luz cálida arriba que cae hacia el negro, y una
   viñeta que cierra los bordes. Van en fixed + pointer-events:none
   para no costar repintados durante el scroll. */
.atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(201,148,87,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 70% 45% at 82% 12%, rgba(107,150,168,0.045) 0%, transparent 60%);
}
/* Fotocopia. Motas de tóner y rayones de una hoja copiada muchas veces:
   la textura de la marca, en el fondo y nunca encima del texto. Sale de
   Higgsfield, pasada por un filtro de paso alto para quitarle las bandas
   de la fotocopiadora —repetida en mosaico, una banda se vuelve una raya
   cada 560 px— y empalmada para que no se vea la costura. 20 KB. */
.atmosphere::after{
  content:''; position:absolute; inset:0;
  background:url("../img/tex-fotocopia.webp") repeat;
  background-size:560px 560px;
  mix-blend-mode:screen;
  /* .12: el dueño la pidió más sutil dos veces (.45 → .2 → .12). El
     techo por contraste era .45; más baja sólo lo mejora. */
  opacity:.12;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 76% 66% at 50% 46%, transparent 42%, rgba(0,0,0,0.42) 100%);
}
/* La viñeta oscurece el fondo, no el texto: encima del contenido
   rompería el contraste ya verificado. */
.rail, .topbar, .shell, .sheet{ position:relative; z-index:2; }

/* Grano. Fijo, sin eventos, y NUNCA más ancho que la ventana: un
   pseudo-elemento centrado y más ancho que 100vw es exactamente lo
   que ya provocó scroll horizontal en móvil en este proyecto. */
body::after{
  content:'';
  position:fixed; inset:0; z-index:300;
  pointer-events:none;
  opacity:.03;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

.display{ font-family:'Pirata One', 'Cormorant Garamond', serif; font-weight:400; letter-spacing:.012em; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

/* La etiqueta con índice: «01 / FILOSOFÍA». Es lo que le da al sitio el
   aire de ficha técnica, y aparece en todas las páginas. */
.label{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--silver);
  display:flex; align-items:center; gap:11px;
}
.label::before{ content:attr(data-n); color:var(--accent); }
.label:not([data-n])::before{ content:none; }
.label::after{
  content:''; height:1px; flex:1; max-width:64px;
  background:linear-gradient(90deg, var(--line-2), transparent);
}
.label--plain::after{ content:none; }

h1,h2,h3,h4{ font-weight:400; line-height:1.06; }

.t-xl{ font-size:clamp(3.8rem,13vw,11rem); line-height:.86; letter-spacing:.006em; }
.t-lg{ font-size:clamp(2.6rem,7vw,5.6rem); line-height:.95; }
.t-md{ font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.04; }
.t-sm{ font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.14; }

.lede{ font-size:clamp(18px,2.2vw,23px); line-height:1.56; color:var(--silver); max-width:58ch; }
.prose p{ color:var(--silver); max-width:66ch; }
.prose p + p{ margin-top:.9em; }
.muted{ color:var(--silver); }
.italic{ font-style:italic; }

.num{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ============================================================
   ESTRUCTURA
   ============================================================ */

.skip-link{
  position:absolute; left:14px; top:-120px; z-index:900;
  background:var(--bone); color:var(--black);
  padding:11px 18px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:top var(--t-s) var(--e-out);
}
.skip-link:focus{ top:14px; }

.shell{ position:relative; }
@media (min-width:1080px){ .shell{ margin-left:var(--rail-w); } }

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

.band{
  position:relative;
  border-top:1px solid var(--line);
  padding-block:clamp(60px,9vw,140px);
}
.band--flush{ border-top:0; }
.band--tight{ padding-block:clamp(38px,5vw,70px); }
/* El «capítulo»: un paso arriba del negro. En el sitio oscuro no puede
   ser un bloque negro sobre negro, así que la separación la dan la
   superficie más clara y el filete de bronce que se dibuja al llegar. */
.band--capitulo{ background:var(--ink); border-top-color:transparent; }
.band--capitulo::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--accent), rgba(201,148,87,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-xl) var(--e-out);
}
.band--capitulo.seen::before{ transform:scaleX(1); }
.band--seam{ padding-bottom:clamp(30px,4vw,52px); }

.sec-head{ display:grid; gap:18px clamp(28px,5vw,80px); align-items:start; margin-bottom:clamp(34px,4.5vw,64px); }
@media (min-width:900px){ .sec-head{ grid-template-columns:190px minmax(0,1fr); } }
.sec-head .label{ padding-top:.5em; }

.grid{ display:grid; gap:clamp(20px,2.6vw,38px); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

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

/* ============================================================
   MOVIMIENTO — EL NÚCLEO

   Cuatro primitivas, y con esas cuatro está hecho el sitio entero:

   .rv       bloque que sube y aparece
   [data-lines]  título que se revela línea por línea desde una máscara
   .mask     imagen que se descubre con una cortina y asienta el zoom
   [data-par]    capa que se mueve más lento que el scroll

   Todas quedan en su estado final si no hay JS: la clase .in la pone el
   observador, pero .no-js las deja visibles de entrada.
   ============================================================ */

.rv{ opacity:0; transform:translate3d(0,26px,0); }
.rv.in{
  opacity:1; transform:none;
  transition:opacity var(--t-l) var(--e-out), transform var(--t-l) var(--e-out);
}
.rv-1.in{ transition-delay:.08s; }
.rv-2.in{ transition-delay:.16s; }
.rv-3.in{ transition-delay:.24s; }
.rv-4.in{ transition-delay:.32s; }
.rv-5.in{ transition-delay:.40s; }

/* El JS parte el texto en palabras y las agrupa por línea real (medida
   en el navegador, no adivinada), y cada línea sube desde detrás de su
   propia máscara. Es el gesto tipográfico principal del sitio. */
.line-mask{ display:block; overflow:hidden; padding-block:.02em; }
.line-inner{
  display:block;
  transform:translate3d(0,110%,0);
  transition:transform var(--t-xl) var(--e-out);
}
.lines.in .line-inner{ transform:none; }
.lines.in .line-mask:nth-child(1) .line-inner{ transition-delay:.02s; }
.lines.in .line-mask:nth-child(2) .line-inner{ transition-delay:.10s; }
.lines.in .line-mask:nth-child(3) .line-inner{ transition-delay:.18s; }
.lines.in .line-mask:nth-child(4) .line-inner{ transition-delay:.26s; }
.lines.in .line-mask:nth-child(5) .line-inner{ transition-delay:.34s; }
.lines.in .line-mask:nth-child(6) .line-inner{ transition-delay:.42s; }

.words .w{
  display:inline-block;
  opacity:0; transform:translate3d(0,.5em,0);
  transition:opacity var(--t-m) var(--e-out), transform var(--t-m) var(--e-out);
}
.words.in .w{ opacity:1; transform:none; }

/* La cortina baja y descubre la foto; adentro, la foto viene un 8% más
   grande y asienta. Dos velocidades = profundidad. */
.mask{ position:relative; overflow:hidden; }
.mask::after{
  content:''; position:absolute; inset:0; z-index:3;
  background:var(--black);
  transform-origin:bottom;
  transition:transform var(--t-xl) var(--e-io);
}
.mask.in::after{ transform:scaleY(0); }
.mask > img, .mask > video, .mask .mask-inner{
  transform:scale(1.08);
  transition:transform 1.8s var(--e-out);
}
.mask.in > img, .mask.in > video, .mask.in .mask-inner{ transform:none; }

.par{ will-change:transform; }
.count{ font-variant-numeric:tabular-nums; }

.no-js .rv, .no-js .words .w{ opacity:1; transform:none; }
.no-js .mask::after{ transform:scaleY(0); }
.no-js .mask > img{ transform:none; }
.no-js .line-inner{ transform:none; }

/* ============================================================
   CORTINA DE ENTRADA Y DE NAVEGACIÓN

   Reemplaza al preloader, que retenía la página entre 2.600 y 5.500 ms.
   Ésta dura lo que dura su animación (~1,1 s la primera vez de la
   sesión, 0 después) y NO espera a la red. La misma pieza cubre el
   salto entre páginas.

   Sobre un sitio negro una cortina negra sería invisible, así que el
   movimiento lo cuenta un filo de bronce que barre con ella.
   ============================================================ */
.curtain{
  position:fixed; inset:0; z-index:600;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transform:translate3d(0,0,0);
}
.curtain::before, .curtain::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 22px 1px rgba(201,148,87,.45);
}
.curtain::before{ top:0; }
.curtain::after{ bottom:0; }
.curtain-mark{ width:64px; height:64px; opacity:0; transform:scale(.82); }
.curtain-line{
  position:absolute; left:50%; bottom:14%;
  transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--steel);
  opacity:0;
}
.curtain.intro .curtain-mark{ animation:curtain-mark 1100ms var(--e-out) forwards; }
.curtain.intro .curtain-line{ animation:curtain-line 1100ms var(--e-out) forwards; }
/* Pantalla de carga: la cuenta regresiva a 00:00:00. Mientras corre, la
   cortina recibe el toque que la salta (si no, caería en la página). */
.curtain.carga{ pointer-events:auto; cursor:pointer; }
.curtain.carga .curtain-mark, .curtain.carga .curtain-line{ display:none; }
.curtain.carga::before, .curtain.carga::after{ z-index:4; }
.carga-cuenta{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,3vh,28px);
  pointer-events:none; opacity:0;
}
.carga-cuenta.en{ opacity:1; }
.carga-label{
  font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--silver);
  padding-left:.34em;
}
/* La letra del título del hero. Cada cifra en su caja fija: Pirata One no
   tiene cifras tabulares y el reloj bailaría al cambiar un número. El
   transform es del empujón, que así crece desde el centro. */
.carga-reloj{
  font-family:'Pirata One', serif; font-size:clamp(4rem,14vw,9.5rem);
  line-height:.84; color:var(--bone); white-space:nowrap;
}
.carga-reloj .d{ display:inline-block; width:.56em; text-align:center; }
.carga-reloj .p{ display:inline-block; width:.26em; text-align:center; }
/* La barra se vacía con la cuenta, desde los dos lados hacia el centro,
   con el filo de bronce de la cortina. */
.carga-barra{ display:block; width:min(220px, 56vw); height:1px; background:rgba(242,237,228,.14); overflow:hidden; }
.carga-barra i{
  display:block; height:100%; width:100%;
  background:var(--accent); box-shadow:0 0 12px rgba(201,148,87,.6);
  transform-origin:center;
}
/* El paso a negativo: un parpadeo gradual y de vuelta (pedido del dueño).
   Una capa hueso en «difference»: el negro pasa a hueso y los números a
   negro, como los cortes positivo/negativo del reel. */
.carga-neg{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--bone); mix-blend-mode:difference; opacity:0;
}
.curtain.blink .carga-neg{ animation:carga-blink 540ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes carga-blink{
  0%{ opacity:0; }
  38%{ opacity:1; }
  52%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes curtain-mark{
  0%{ opacity:0; transform:scale(.82); }
  46%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes curtain-line{
  0%{ opacity:0; letter-spacing:.5em; }
  60%{ opacity:1; letter-spacing:.34em; }
  100%{ opacity:1; letter-spacing:.34em; }
}

/* ============================================================
   PROGRESO DE LECTURA
   ============================================================ */
.progress{
  position:fixed; top:var(--promo-h); left:0; right:0; z-index:150;
  height:2px; pointer-events:none; background:transparent;
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(201,148,87,.35), var(--accent));
  transform-origin:left;
}
@media (min-width:1080px){ .progress{ left:var(--rail-w); } }

/* ============================================================
   TIRA DE PROMOCIONES
   Es fija y empuja a la barra superior: su alto tiene que viajar al CSS
   por --promo-h. Se remide al cambiar el ancho porque en móvil envuelve
   a dos o tres líneas, y cuando cargan las webfonts, porque cambian el
   alto del texto.
   ============================================================ */
.promo{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:none;
  background:var(--ink);
  color:var(--bone);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.promo.visible{ display:block; }
.promo-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:9px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px clamp(18px,3vw,34px);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
}
.promo-item{
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(7px);
  animation:promo-in var(--t-l) var(--e-out) forwards;
}
.promo-item::before{ content:''; width:4px; height:4px; background:var(--accent); flex:none; }
.promo-item:nth-child(2){ animation-delay:.09s; }
.promo-item:nth-child(3){ animation-delay:.18s; }
.promo-item:nth-child(4){ animation-delay:.27s; }
@keyframes promo-in{ to{ opacity:1; transform:none; } }

/* ============================================================
   NAVEGACIÓN
   Dos formas distintas, no una barra que se encoge:
   - Escritorio: raíl-índice fijo que marca la sección visible.
   - Móvil: barra que se esconde al bajar + hoja a pantalla completa.
     En 390 px un raíl lateral no cabe, así que ahí no existe.
   ============================================================ */

.rail{
  display:none;
  position:fixed; top:var(--promo-h); bottom:0; left:0; width:var(--rail-w);
  z-index:100;
  background:var(--black);
  border-right:1px solid var(--line);
  padding:30px 24px 24px;
  flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
@media (min-width:1080px){ .rail{ display:flex; } }

.rail-mark{
  display:flex; align-items:center; gap:11px;
  font-family:'Pirata One', serif; font-size:25px; letter-spacing:.1em;
  margin-bottom:34px;
}
.rail-mark img{ width:24px; height:24px; transition:transform var(--t-l) var(--e-out); }
.rail-mark:hover img{ transform:rotate(180deg); }

.rail-group{ margin-bottom:28px; }
.rail-group > .label{ margin-bottom:12px; }

.rail-nav{ display:flex; flex-direction:column; }
.rail-nav a{
  position:relative;
  display:flex; align-items:baseline; gap:11px;
  padding:10px 0;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--silver);
  overflow:hidden;
  transition:color var(--t-s) var(--e-out), padding-left var(--t-s) var(--e-out);
}
.rail-nav a:last-child{ border-bottom:1px solid var(--line); }
.rail-nav a .n{ color:var(--steel); font-size:10px; transition:color var(--t-s) var(--e-out); }
/* El filete que barre por debajo al pasar el mouse */
.rail-nav a::before{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-m) var(--e-out);
}
.rail-nav a:hover::before{ transform:scaleX(1); transform-origin:left; }
.rail-nav a:hover{ color:var(--bone); padding-left:8px; }
.rail-nav a[aria-current="true"]{ color:var(--bone); }
.rail-nav a[aria-current="true"] .n{ color:var(--accent); }
.rail-nav a[aria-current="true"]::after{
  content:''; margin-left:auto; align-self:center;
  width:16px; height:1px; background:var(--accent);
  animation:dash-in var(--t-m) var(--e-out) both;
}
@keyframes dash-in{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.rail-foot{ margin-top:auto; padding-top:22px; }
.rail-foot .mono{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); line-height:2.1; display:block;
  transition:color var(--t-s) var(--e-out);
}
.rail-foot a.mono:hover{ color:var(--bone); }

.rail-switch{
  margin-top:14px;
  display:inline-flex; align-items:center; gap:9px;
  min-height:32px; padding:6px 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel);
  transition:color var(--t-s) var(--e-out);
}
.rail-switch:hover{ color:var(--bone); }
.rail-switch .dot{
  width:7px; height:7px; border:1px solid currentColor; border-radius:50%;
  transition:background var(--t-s) var(--e-out), border-color var(--t-s) var(--e-out);
}
.rail-switch[aria-pressed="true"] .dot{ background:var(--accent); border-color:var(--accent); }

/* El selector de idioma: ES / EN. En el raíl va en la misma fila que el
   interruptor del scroll (el raíl de las fichas ya va justo de alto). */
.idioma{
  display:inline-flex; align-items:center; gap:2px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.16em;
}
.idioma button{
  min-width:30px; min-height:32px; padding:4px 6px;
  color:var(--steel); text-transform:uppercase;
  transition:color var(--t-s) var(--e-out);
}
.idioma button[aria-pressed="true"]{
  color:var(--bone);
  text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px;
}
@media (hover:hover){ .idioma button:hover{ color:var(--bone); } }
.rail-foot .idioma{ margin:14px 0 0 10px; vertical-align:top; }
.sheet .idioma{ display:flex; margin-top:30px; font-size:12px; }
.sheet .idioma button{ min-width:44px; min-height:44px; }
/* Mientras se traduce, la página no se ve (sólo en inglés, y un instante). */
html.en-pend body{ visibility:hidden; }

/* Laptop baja: desde que el raíl lleva «ECLIPSE VIP», el de la portada y
   el de las fichas no cabían enteros y lo que quedaba fuera era el
   interruptor del pie. Medido con los packs de verdad (la ficha lleva
   «En pack»): la ficha pide 856 px de alto, y una MacBook Air con Chrome
   da 789. Se aprieta el aire entre filas y grupos, no la letra; sólo el
   vertical, para no pisar el corrimiento del :hover. */
@media (min-width:1080px) and (max-height:880px){
  .rail{ padding-top:24px; }
  .rail-mark{ margin-bottom:26px; }
  .rail .rail-group{ margin-bottom:22px; }
  .rail .rail-nav a{ padding-block:8px; }
}

/* Sin JavaScript no hay precios ni pedido: se dice, en vez de dejar la
   página a medias (la colección salía vacía y la ficha, sin precio). */
.sin-js{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  margin:0; padding:12px var(--pad);
  background:var(--ink); border-top:1px solid var(--line-2);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver); text-align:center;
}

/* --- Barra superior (móvil / tablet) --- */
.topbar{
  position:fixed; top:var(--promo-h); left:0; right:0; z-index:110;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-inline:var(--pad);
  background:rgba(10,10,9,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-m) var(--e-out), transform var(--t-m) var(--e-out);
}
.topbar.stuck{ border-bottom-color:var(--line); }
/* Se esconde al bajar y vuelve al subir: gana pantalla sin perder el acceso. */
.topbar.away{ transform:translate3d(0,-102%,0); }
@media (min-width:1080px){ .topbar{ display:none; } }

.topbar .wordmark{ display:flex; align-items:center; gap:10px; font-family:'Pirata One', serif; font-size:22px; letter-spacing:.09em; }
.topbar .wordmark img{ width:21px; height:21px; }
.topbar-actions{ display:flex; align-items:center; gap:4px; }

.icon-btn{
  position:relative; overflow:hidden; isolation:isolate;
  min-width:42px; min-height:42px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 13px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid transparent;
  transition:border-color var(--t-s) var(--e-out), color var(--t-s) var(--e-out);
}
.icon-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:translateY(101%);
  transition:transform var(--t-m) var(--e-out);
}
.icon-btn:hover{ border-color:var(--bone); color:var(--black); }
.icon-btn:hover::before{ transform:none; }
.icon-btn[aria-expanded="true"]{ background:var(--bone); color:var(--black); border-color:var(--bone); }
.icon-btn [data-cart-count]{
  font-variant-numeric:tabular-nums;
  min-width:17px; height:17px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--black);
  font-size:9px; border-radius:50%;
}
[data-cart-count].bump{ animation:bump 620ms var(--e-out); }
@keyframes bump{ 0%{ transform:scale(1); } 34%{ transform:scale(1.5); } 100%{ transform:scale(1); } }

/* --- Hoja de navegación (móvil) --- */
.sheet{
  position:fixed; inset:0; z-index:130;
  background:var(--ink); color:var(--bone);
  padding:calc(var(--topbar-h) + var(--promo-h) + 32px) var(--pad) 40px;
  overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path 620ms var(--e-io), visibility 620ms;
}
.sheet.open{ clip-path:inset(0 0 0 0); visibility:visible; }
.sheet .rail-nav a{
  font-size:clamp(19px,6vw,26px);
  font-family:'Pirata One', serif;
  letter-spacing:.04em; text-transform:none;
  padding:17px 0;
  color:var(--bone);
  opacity:0; transform:translateY(18px);
}
.sheet .rail-nav a .n{ color:var(--steel); font-family:'IBM Plex Mono', monospace; font-size:11px; }
.sheet.open .rail-nav a{
  opacity:1; transform:none;
  transition:opacity var(--t-l) var(--e-out), transform var(--t-l) var(--e-out);
}
.sheet.open .rail-nav a:nth-child(1){ transition-delay:.16s; }
.sheet.open .rail-nav a:nth-child(2){ transition-delay:.21s; }
.sheet.open .rail-nav a:nth-child(3){ transition-delay:.26s; }
.sheet.open .rail-nav a:nth-child(4){ transition-delay:.31s; }
.sheet.open .rail-nav a:nth-child(5){ transition-delay:.36s; }
.sheet.open .rail-nav a:nth-child(6){ transition-delay:.41s; }
.sheet.open .rail-nav a:nth-child(n+7){ transition-delay:.46s; }
.sheet-close{
  position:absolute; top:calc(var(--promo-h) + 9px); right:var(--pad);
  min-width:42px; min-height:42px;
}

/* ============================================================
   BOTONES
   El relleno entra desde abajo con una curva larga. Sin brillos.
   ============================================================ */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:52px;
  padding:14px 30px;
  background:transparent; color:var(--black);
  border:1px solid var(--bone);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  text-align:center;
  transition:color var(--t-m) var(--e-out), border-color var(--t-m) var(--e-out), opacity var(--t-s) var(--e-out);
}
.btn::before{
  content:''; position:absolute; inset:-1px; z-index:-1;
  background:var(--bone);
  transform:translate3d(0,0,0);
  transition:transform var(--t-m) var(--e-io);
}
/* El relleno sólo se retira con un mouse encima. En pantalla táctil el
   :hover se queda pegado después de tocar, y el botón quedaba vacío. */
@media (hover:hover){
  .btn:hover{ color:var(--bone); }
  .btn:hover::before{ transform:translate3d(0,-101%,0); }
}
.btn:active{ transform:scale(.985); }
.btn .arw{ transition:transform var(--t-m) var(--e-out); }
.btn:hover .arw{ transform:translateX(5px); }
.btn[disabled], .btn:disabled{ opacity:.3; cursor:not-allowed; pointer-events:none; }
.btn--full{ width:100%; }
.btn--sm{ min-height:42px; padding:10px 18px; font-size:11px; letter-spacing:.14em; }

.btn--ghost{ color:var(--bone); border-color:var(--line-2); }
.btn--ghost::before{ transform:translate3d(0,101%,0); }
@media (hover:hover){
  .btn--ghost:hover{ color:var(--black); border-color:var(--bone); }
  .btn--ghost:hover::before{ transform:none; }
}

/* Enlace con filete que se redibuja */
.link{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone);
  padding-block:9px;
  transition:gap var(--t-m) var(--e-out);
}
.link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:right;
  transition:transform var(--t-m) var(--e-io);
}
.link:hover{ gap:15px; }
.link:hover::after{ transform:scaleX(0); }

/* ============================================================
   CHIPS / PESTAÑAS
   ============================================================ */
.chips{ display:flex; gap:9px; flex-wrap:wrap; }
.chips--scroll{
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  padding-bottom:2px; -webkit-overflow-scrolling:touch;
}
.chips--scroll::-webkit-scrollbar{ display:none; }
.chip{
  position:relative; overflow:hidden; isolation:isolate;
  flex:none; min-height:38px;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px;
  border:1px solid var(--line-2);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver); white-space:nowrap;
  transition:color var(--t-m) var(--e-out), border-color var(--t-m) var(--e-out);
}
.chip::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform var(--t-m) var(--e-io);
}
.chip:hover{ color:var(--black); border-color:var(--bone); }
.chip:hover::before{ transform:none; }
.chip[aria-selected="true"], .chip[aria-pressed="true"], .chip.active{ color:var(--black); border-color:var(--bone); }
.chip[aria-selected="true"]::before, .chip[aria-pressed="true"]::before, .chip.active::before{ transform:none; }
.chip .count{ opacity:.75; font-size:10px; }   /* .55 daba 3,48:1 en los dos estados */

/* ============================================================
   TARJETA DE PRODUCTO
   ============================================================ */
.card{
  position:relative;
  display:flex; flex-direction:column;
  transition:transform var(--t-l) var(--e-out);
}
.card-media{
  position:relative;
  aspect-ratio:4/5;
  /* Sobre un sitio negro la foto de producto (que ya viene sobre negro)
     se perdería contra el fondo: el panel va un paso arriba. */
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  border:1px solid var(--line);
  overflow:hidden;
}
.card-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:9%;
  transition:opacity 700ms var(--e-out), transform 1.4s var(--e-out);
}
/* La espalda va sin fondo y con el mismo margen que el frente: con el JPG
   en «cover» llenaba el cuadro, se agrandaba y se salía de él. */
.card-media img.back{ opacity:0; }
.card:hover .card-media img.front{ opacity:0; transform:scale(1.05); }
.card:hover .card-media img.back{ opacity:1; transform:scale(1.05); }
.card-media::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,10,9,.75), transparent 52%);
  opacity:0; transition:opacity var(--t-m) var(--e-out);
}
.card:hover .card-media::after{ opacity:1; }
.card:hover .card-media{ border-color:var(--line-2); }

.card-media .flag{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--bone); color:var(--black);
  padding:6px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  transform:translateY(-101%);
  transition:transform var(--t-m) var(--e-out) 60ms;
}
.card.in .flag, .no-js .card .flag{ transform:none; }
.card-media .flag--out{ background:var(--ink-3); color:var(--silver); box-shadow:inset 0 0 0 1px var(--line-2); }

.card-media .low{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:9px 12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  transform:translateY(101%);
  transition:transform var(--t-m) var(--e-out);
}
.card:hover .low{ transform:none; }

.card-body{ padding:16px 2px 0; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.card-name{
  font-family:'Pirata One', serif;
  font-size:clamp(1.6rem,2.8vw,2.1rem); line-height:1;
  transition:color var(--t-m) var(--e-out);
}
.card:hover .card-name{ color:var(--accent); }
.card-desc{ font-size:15px; color:var(--silver); line-height:1.55; }
.card-foot{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); }

.price{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-size:15px; letter-spacing:.04em;
  display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.price .was{ color:var(--steel); text-decoration:line-through; font-size:12px; }
.price .off{ background:var(--accent); color:var(--black); padding:3px 7px; font-size:9px; letter-spacing:.14em; }

.sizes-mini{ display:flex; gap:5px; }
.sizes-mini span{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.08em;
  width:23px; height:23px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); color:var(--silver);
}
.sizes-mini span.out{ color:var(--steel); opacity:.4; border-style:dashed; text-decoration:line-through; }

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.ficha{ display:grid; gap:clamp(28px,4vw,64px); align-items:start; }
@media (min-width:900px){ .ficha{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); } }

/* La galería: una foto debajo de otra en escritorio, con el panel de
   compra pegado al costado; en pantalla chica la misma lista se desliza
   de costado con el dedo, una foto por vez. */
.ficha-media{ min-width:0; }
.galeria{ display:flex; flex-direction:column; gap:6px; }
.galeria-cuadro{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:4/5;
  background:var(--ink);
}
.galeria-cuadro--prenda{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); }
.galeria-ampliar{
  display:block; width:100%; height:100%; padding:0;
  cursor:zoom-in;
}
.galeria-cuadro img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--e-out);
}
.galeria-cuadro--prenda img{ object-fit:contain; padding:9% 8%; }
.galeria-cuadro:hover img{ transform:scale(1.025); }
.galeria-ampliar:focus-visible{ outline:1px solid var(--bone); outline-offset:-6px; }
.galeria-marcas{ display:none; justify-content:center; gap:8px; padding-top:14px; }
.galeria-marcas span{ width:22px; height:2px; background:var(--line-2); transition:background var(--t-s) var(--e-out); }
.galeria-marcas span.on{ background:var(--bone); }
@media (max-width:899px){
  /* La ficha pasa a ocupar todo el ancho: la foto manda. */
  .ficha-media{ margin-inline:calc(var(--pad) * -1); }
  .galeria{
    flex-direction:row; gap:0;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .galeria::-webkit-scrollbar{ display:none; }
  .galeria-cuadro{ flex:0 0 100%; scroll-snap-align:start; }
  .galeria-cuadro:hover img{ transform:none; }
  .galeria-marcas{ display:flex; }
}

.ficha-panel{ display:flex; flex-direction:column; gap:20px; min-width:0; }
@media (min-width:900px){ .ficha-panel{ position:sticky; top:40px; } }

/* ---- Elegir la talla ---- */
.elegir{ position:relative; margin:0; padding:0; border:0; min-width:0; }
/* Leyenda y «Guía de tallas» en una fila. La leyenda flota para
   salir del dibujo especial que le da el navegador dentro del fieldset;
   si no, las tallas se montan encima del botón y se comen el clic. */
.elegir legend{
  float:left; padding:9px 0 6px; margin:0;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver);
}
.elegir-guia{
  float:right;
  padding:9px 0 6px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver);
  border-bottom:1px solid var(--line-2);
  transition:color var(--t-s) var(--e-out), border-color var(--t-s) var(--e-out);
}
.elegir-guia:hover{ color:var(--bone); border-color:var(--bone); }
.elegir-tallas{ clear:both; padding-top:10px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:7px; }
.talla-f{
  position:relative;
  min-height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:1px solid var(--line-2);
  cursor:pointer;
  transition:border-color var(--t-s) var(--e-out), background var(--t-s) var(--e-out), color var(--t-s) var(--e-out);
}
.talla-f input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.talla-f .t{ font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:.08em; }
.talla-f small{
  font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--silver);
}
.talla-f small:empty{ display:none; }
.talla-f:hover{ border-color:var(--bone); }
.talla-f:has(input:checked){ background:var(--bone); border-color:var(--bone); color:var(--black); }
.talla-f:has(input:checked) small{ color:#4d4a44; }
.talla-f:has(input:focus-visible){ outline:1px solid var(--bone); outline-offset:3px; }
.talla-f.agotada{ border-style:dashed; cursor:not-allowed; color:var(--steel); }
.talla-f.agotada:hover{ border-color:var(--line-2); }
.talla-f.agotada .t{ text-decoration:line-through; }
.elegir-aviso{
  margin:10px 0 0; min-height:1em;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.elegir-aviso:empty{ display:none; }
.elegir.falta .talla-f:not(.agotada){ border-color:rgba(201,148,87,.6); }
.agregar{ width:100%; min-height:58px; }
.agregar.ok{ animation:talla-ok .5s var(--e-out); }
.ficha-ir{
  align-self:flex-start;
  display:inline-flex; gap:10px; align-items:baseline;
  padding:6px 0 4px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver);
  border-bottom:1px solid var(--line-2);
}
.ficha-ir:hover{ color:var(--bone); border-color:var(--bone); }
.ficha-ir b{ font-weight:500; color:var(--bone); }

/* ---- Visor a pantalla completa ---- */
.visor{
  position:fixed; inset:0; z-index:300;
  background:var(--black);
  opacity:0; transition:opacity var(--t-m) var(--e-out);
}
.visor.open{ opacity:1; }
.visor-pista{
  position:absolute; inset:0;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain;
}
.visor-pista::-webkit-scrollbar{ display:none; }
.visor-cuadro{
  flex:0 0 100%; height:100%; margin:0;
  scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(56px,7vh,80px) clamp(12px,4vw,64px) clamp(70px,9vh,96px);
  overflow:hidden;
}
.visor-cuadro img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform .45s var(--e-out);
}
@media (hover:hover) and (pointer:fine){ .visor-cuadro img{ cursor:zoom-in; } }
.visor-cuadro.cerca img{ transform:scale(2.2); cursor:zoom-out; transition:transform .45s var(--e-out), transform-origin .12s linear; }
.visor-barra{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:6px;
  padding:14px clamp(12px,4vw,40px) calc(14px + env(safe-area-inset-bottom, 0px));
}
.visor-n{
  margin-right:auto;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.2em; color:var(--silver);
  font-variant-numeric:tabular-nums;
}
.visor-btn{
  min-width:46px; min-height:46px; padding:0 14px;
  border:1px solid var(--line-2); color:var(--bone);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color var(--t-s) var(--e-out);
}
.visor-btn:hover{ border-color:var(--bone); }

/* ---- Guía de tallas: cajón lateral ---- */
.cajon{ position:fixed; inset:0; z-index:300; }
.cajon-fondo{
  position:absolute; inset:0; background:rgba(10,10,9,.72);
  opacity:0; transition:opacity .32s var(--e-out);
}
.cajon-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(470px, 100vw);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(64px,9vh,88px) clamp(20px,4vw,36px) 40px;
  background:var(--ink); border-left:1px solid var(--line-2);
  transform:translate3d(100%,0,0);
  transition:transform .32s var(--e-io);
}
.cajon.open .cajon-fondo{ opacity:1; }
.cajon.open .cajon-panel{ transform:none; }
.cajon-cerrar{
  position:absolute; top:18px; right:clamp(14px,3vw,26px);
  min-height:44px; padding:0 4px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver);
}
.cajon-cerrar:hover{ color:var(--bone); }
.cajon-t{ font-family:'Pirata One', serif; font-weight:400; font-size:clamp(2.2rem,5vw,2.8rem); line-height:1; margin:12px 0 18px; }
.cajon-lede{ color:var(--silver); font-size:18px; line-height:1.5; margin:0; }
.calce{ margin:26px 0; border-top:1px solid var(--line); }
.calce div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.calce dt{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.calce dd{ margin:0; font-size:18px; text-align:right; }
.medidas{ margin:0 0 26px; }
.medidas caption{ text-align:left; padding-bottom:10px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.cajon-nota{ color:var(--silver); font-size:17px; line-height:1.55; margin:0 0 14px; }
.cajon-nota a{ color:var(--bone); border-bottom:1px solid var(--line-2); }
.cajon-nota a:hover{ border-color:var(--bone); }
@media (prefers-reduced-motion:reduce){
  .cajon-panel, .cajon-fondo, .visor, .visor-cuadro img{ transition:none; }
}

.sizes{ display:flex; gap:9px; flex-wrap:wrap; }
.size{
  position:relative; overflow:hidden; isolation:isolate;
  min-width:54px; min-height:52px;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:1px solid var(--line-2);
  font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:.06em;
  transition:color var(--t-m) var(--e-out), border-color var(--t-m) var(--e-out);
}
.size::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform var(--t-m) var(--e-io);
}
.size .stk{ font-size:8px; letter-spacing:.12em; color:var(--steel); transition:color var(--t-m) var(--e-out); }
.size:hover:not(:disabled){ color:var(--black); border-color:var(--bone); }
.size:hover:not(:disabled)::before{ transform:none; }
.size:hover:not(:disabled) .stk{ color:var(--ink); }
.size[aria-pressed="true"]{ color:var(--black); border-color:var(--bone); }
.size[aria-pressed="true"]::before{ transform:none; }
.size[aria-pressed="true"] .stk{ color:var(--ink); }
.size:disabled{ opacity:.3; cursor:not-allowed; border-style:dashed; text-decoration:line-through; }

.stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-2); }
.stepper button{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1;
  transition:background var(--t-s) var(--e-out), color var(--t-s) var(--e-out);
}
.stepper button:hover:not(:disabled){ background:var(--bone); color:var(--black); }
.stepper button:disabled{ opacity:.28; cursor:not-allowed; }
.stepper .val{
  min-width:48px; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:15px;
  border-inline:1px solid var(--line-2); line-height:46px;
}

.spec{ width:100%; border-collapse:collapse; }
.spec th, .spec td{ text-align:left; padding:13px 0; border-top:1px solid var(--line); vertical-align:top; }
.spec th{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); width:38%; padding-right:16px;
}
.spec td{ font-size:16px; color:var(--silver); }

/* Las especificaciones de la tela, debajo de la ficha técnica (TELA_POLO
   en eclipse.js). La misma tabla, con su propio título. */
.ficha-especs{ margin-top:10px; }
.ficha-especs .label{ margin-bottom:12px; }

/* ============================================================
   FILAS NUMERADAS
   ============================================================ */
.rows{ border-top:1px solid var(--line); }
.row-item{
  position:relative;
  display:grid; gap:8px 26px;
  padding:clamp(22px,3vw,38px) 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:padding-left var(--t-l) var(--e-out);
}
@media (min-width:760px){
  .row-item{ grid-template-columns:60px minmax(0,280px) minmax(0,1fr); gap:26px; }
  .row-item:hover{ padding-left:14px; }
}
.row-item::before{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-l) var(--e-out);
}
.row-item:hover::before{ transform:scaleX(1); }
.row-n{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.18em; color:var(--accent); padding-top:.6em; }
.row-title{ font-family:'Pirata One', serif; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.08; }
.row-body{ color:var(--silver); font-size:16px; line-height:1.62; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; position:relative; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  transition:color var(--t-s) var(--e-out);
}
.field input, .field textarea{
  width:100%; min-height:50px;
  padding:12px 14px;
  background:rgba(242,237,228,.02);
  border:1px solid var(--line-2);
  font-family:'Cormorant Garamond', serif; font-size:17px;
  color:var(--bone);
  transition:border-color var(--t-m) var(--e-out), background var(--t-m) var(--e-out);
}
.field input::placeholder{ color:var(--steel); }
.field input:hover{ border-color:var(--line-3); }
.field input:focus{ border-color:var(--bone); background:rgba(242,237,228,.05); }
.field:focus-within label{ color:var(--bone); }
.field .hint{ font-size:15px; color:var(--silver); }
.field .err{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#e59595;
  animation:err-in var(--t-m) var(--e-out) both;
}
@keyframes err-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.field.is-err input{ border-color:#a33; }
.field.is-ok input{ border-color:var(--line-3); }
.form-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.msg{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.07em; color:var(--silver); min-height:1.4em; }
.msg.is-err{ color:#e59595; }
.msg.in{ animation:err-in var(--t-m) var(--e-out) both; }

.zonas{ display:grid; gap:9px; }
.zona{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:58px; padding:12px 16px;
  border:1px solid var(--line-2); text-align:left;
  color:var(--bone);
  transition:color var(--t-m) var(--e-out), border-color var(--t-m) var(--e-out);
}
.zona::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translate3d(-101%,0,0);
  transition:transform var(--t-m) var(--e-io);
}
.zona:hover{ color:var(--black); border-color:var(--bone); }
.zona:hover::before{ transform:none; }
.zona[aria-pressed="true"]{ color:var(--black); border-color:var(--bone); }
.zona[aria-pressed="true"]::before{ transform:none; }
.zona-name{ font-size:17px; }
.zona-sub{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); transition:color var(--t-m) var(--e-out); }
.zona:hover .zona-sub, .zona[aria-pressed="true"] .zona-sub{ color:var(--ink); }
.zona-cost{ font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:15px; flex:none; }

/* ---------- Método de pago ----------
   Era un <select> nativo, y el desplegable de un select lo dibuja el
   sistema operativo: no acepta estilo. Sobre el negro abría una lista
   blanca con la opción ya elegida casi ilegible.

   Acá son radios de verdad dentro de un fieldset, así que el teclado
   sigue funcionando solo —flechas dentro del grupo— sin reimplementar
   nada, y el número o el QR cuelgan de la opción elegida en vez de
   vivir en un panel suelto más abajo. */
.pagos-set{
  border:0; padding:0; margin:0;
  /* Un fieldset trae un ancho mínimo intrínseco que desborda en 390 px. */
  min-width:0;
}
.pagos-legend{
  padding:0; margin-bottom:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.pagos{ display:grid; gap:10px; }
.pago-item{ border:1px solid var(--line-2); transition:border-color var(--t-m) var(--e-out); }
.pago-item.is-on{ border-color:var(--bone); }

.pago{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:15px;
  min-height:66px; padding:14px 16px;
  cursor:pointer;
  transition:color var(--t-m) var(--e-out);
}
.pago::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translate3d(-101%,0,0);
  transition:transform var(--t-m) var(--e-io);
}
/* El input está oculto a la vista pero sigue siendo el control real:
   recibe foco, responde a las flechas y dispara change. */
.pago input{ position:absolute; width:1px; height:1px; opacity:0; margin:0; }

.pago-mark{
  flex:none; width:17px; height:17px; border-radius:50%;
  border:1px solid var(--line-3);
  display:grid; place-items:center;
  transition:border-color var(--t-m) var(--e-out);
}
.pago-mark::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  transform:scale(0);
  transition:transform var(--t-m) var(--e-out), background var(--t-m) var(--e-out);
}
.pago input:checked ~ .pago-mark::after{ transform:scale(1); }
.pago input:focus-visible ~ .pago-mark{ outline:2px solid var(--accent); outline-offset:3px; }

.pago-name{ font-size:17px; display:block; }
.pago-sub{
  display:block; margin-top:3px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
  transition:color var(--t-m) var(--e-out);
}

.pago:hover{ color:var(--black); }
.pago:hover::before{ transform:none; }
.pago:hover .pago-sub{ color:var(--ink); }
.pago:hover .pago-mark{ border-color:var(--black); }
.pago:hover .pago-mark::after{ background:var(--black); }

.pago.is-on{ color:var(--black); }
.pago.is-on::before{ transform:none; }
.pago.is-on .pago-sub{ color:var(--ink); }
.pago.is-on .pago-mark{ border-color:var(--black); }
.pago.is-on .pago-mark::after{ background:var(--black); }

/* El detalle se abre con grid-template-rows, igual que el FAQ: no hace
   falta medir alturas a mano. */
.pago-detalle{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-m) var(--e-out); }
.pago-detalle.abierto{ grid-template-rows:1fr; }
.pago-detalle > div{ overflow:hidden; }
.pago-detalle-inner{
  display:flex; flex-direction:column; gap:14px;
  padding:16px; border-top:1px solid var(--line);
}
.pago-numero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:20px; font-weight:500; letter-spacing:.06em;
}
.pago-qr{ max-width:210px; border:1px solid var(--line); }
.pago-nota{ font-size:16px; line-height:1.55; color:var(--silver); }

.drop{
  min-height:110px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:20px;
  border:1px dashed var(--line-2); text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel);
  transition:border-color var(--t-m) var(--e-out), color var(--t-m) var(--e-out), background var(--t-m) var(--e-out);
}
.drop:hover, .drop.over{ border-color:var(--bone); color:var(--bone); background:var(--ink); }
.drop-preview img{ max-height:240px; width:auto; border:1px solid var(--line); margin-bottom:12px; box-shadow:var(--lift); }

/* ============================================================
   PEDIDO
   ============================================================ */
.lines{ border-top:1px solid var(--line); }
.line{
  display:grid; grid-template-columns:70px minmax(0,1fr); gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line); align-items:start;
  animation:line-in var(--t-l) var(--e-out) both;
}
@media (min-width:620px){ .line{ grid-template-columns:84px minmax(0,1fr) auto; align-items:center; } }
@keyframes line-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.line.leaving{ animation:line-out 260ms var(--e-io) both; }
@keyframes line-out{ to{ opacity:0; transform:translateY(-8px); } }
.line-img{ background:var(--ink); border:1px solid var(--line); aspect-ratio:4/5; overflow:hidden; }
.line-img img{ width:100%; height:100%; object-fit:contain; padding:9%; transition:transform var(--t-l) var(--e-out); }
.line:hover .line-img img{ transform:scale(1.07); }
.line-name{ font-family:'Pirata One', serif; font-size:1.45rem; line-height:1.08; }
.line-meta{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin-top:4px; }
.line-ctl{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.line-right{ display:flex; align-items:center; gap:16px; justify-content:space-between; }
/* Por debajo de 620 px la fila son dos columnas y .line-right caía en la
   primera, que mide 70 px: «S/ 55.00» se partía en dos renglones en cada
   línea del carrito. Va en la columna del texto, que tiene 264 px — y la
   miniatura ocupa las dos filas, para que el precio quede pegado al texto
   y no debajo del borde inferior de la foto. */
@media (max-width:619px){
  .line-img{ grid-row:1 / span 2; }
  .line-right{ grid-column:2; justify-content:flex-start; margin-top:10px; }
}
@media (min-width:620px){ .line-right{ flex-direction:column; align-items:flex-end; gap:7px; } }
.line-price{ font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:16px; }
.remove{
  position:relative;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
  padding-block:8px;
  transition:color var(--t-s) var(--e-out);
}
.remove::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:#e59595;
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-m) var(--e-out);
}
.remove:hover{ color:#e59595; }
.remove:hover::after{ transform:scaleX(1); }

.totals{ display:flex; flex-direction:column; gap:2px; }
.total-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:9px 0;
  font-family:'IBM Plex Mono', monospace; font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--silver);
}
.total-row.grand{ border-top:1px solid var(--line-2); margin-top:7px; padding-top:16px; font-size:19px; color:var(--bone); }

.nudge{
  margin-top:14px; padding:12px 15px;
  background:var(--ink-2); border-left:2px solid var(--accent);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.09em; color:var(--silver);
  animation:err-in var(--t-l) var(--e-out) both;
}
.nudge strong{ color:var(--accent); font-weight:500; }
.nudge.done{ background:var(--bone); color:var(--black); border-left-color:var(--black); }
.nudge.done strong{ color:var(--black); }

.empty{
  padding:clamp(32px,6vw,64px);
  border:1px dashed var(--line-2);
  text-align:center; color:var(--silver); font-style:italic;
}
/* La placa de lo vacío: una órbita sola, con el cometa que se va
   (Higgsfield; plan-rediseno.md, registro). Decorativa: el texto dice lo
   que pasa. */
.empty::before{
  content:''; display:block;
  width:clamp(112px,18vw,150px); aspect-ratio:1; margin:0 auto 14px;
  background:url(../img/placa-vacio.webp) center / contain no-repeat;
}

/* ============================================================
   PASOS DEL CHECKOUT
   ============================================================ */
.steps{ display:flex; flex-wrap:wrap; border:1px solid var(--line); margin-bottom:clamp(26px,3.5vw,42px); }
.step-tab{
  position:relative; overflow:hidden; isolation:isolate;
  flex:1 1 150px; min-height:58px;
  display:flex; align-items:center; gap:11px;
  padding:14px 16px;
  border-right:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--steel); text-align:left;
  transition:color var(--t-m) var(--e-out);
}
.step-tab::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform var(--t-m) var(--e-io);
}
.step-tab:last-child{ border-right:0; }
.step-tab .n{ color:var(--steel); transition:color var(--t-m) var(--e-out); }
.step-tab[aria-current="step"]{ color:var(--black); }
.step-tab[aria-current="step"]::before{ transform:none; }
.step-tab[aria-current="step"] .n{ color:var(--ink); }
.step-tab.done{ color:var(--bone); }
.step-tab.done .n{ color:var(--accent); }
.step-tab:disabled{ opacity:.42; cursor:not-allowed; }

.step-panel{ animation:step-in var(--t-l) var(--e-out) both; }
@keyframes step-in{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }

.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:115;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px var(--pad);
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--ink); color:var(--bone);
  border-top:1px solid var(--line-2);
  transform:translate3d(0,101%,0);
  transition:transform var(--t-m) var(--e-io);
}
.dock.show{ transform:none; }
.dock-total{ display:flex; flex-direction:column; gap:2px; }
.dock-total .k{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }
.dock-total .v{ font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:18px; }
@media (min-width:1080px){ .dock{ left:var(--rail-w); } }

/* ============================================================
   SEGUIMIENTO DE PEDIDO
   ============================================================ */
.pedido{
  border:1px solid var(--line);
  padding:clamp(20px,3vw,34px);
  margin-bottom:20px;
  background:var(--ink);
  transition:box-shadow var(--t-l) var(--e-out), border-color var(--t-l) var(--e-out);
}
.pedido:hover{ box-shadow:var(--lift); border-color:var(--line-2); }
.pedido-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.pedido-num{ font-family:'IBM Plex Mono', monospace; font-size:15px; letter-spacing:.12em; }
.pedido-fecha{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }

.track{ list-style:none; display:grid; gap:16px; margin-bottom:24px; }
@media (min-width:720px){ .track{ grid-auto-flow:column; grid-auto-columns:1fr; gap:0; } }
.track li{ position:relative; padding-left:26px; }
@media (min-width:720px){ .track li{ padding-left:0; padding-top:24px; padding-right:14px; } }
.track .dot{
  position:absolute; left:0; top:6px;
  width:11px; height:11px;
  border:1px solid var(--line-2); background:var(--black);
  transition:background var(--t-m) var(--e-out), border-color var(--t-m) var(--e-out);
}
@media (min-width:720px){
  .track .dot{ top:0; left:0; }
  .track li::before{ content:''; position:absolute; top:5px; left:11px; right:0; height:1px; background:var(--line); }
  .track li:last-child::before{ display:none; }
}
.track li.hecho .dot{ background:var(--bone); border-color:var(--bone); }
.track li.hecho::before{ background:var(--line-2); }
.track li.ahora .dot{
  background:var(--accent); border-color:var(--accent);
  animation:pulse 2.6s var(--e-soft) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,148,87,.5); }
  50%{ box-shadow:0 0 0 7px rgba(201,148,87,0); }
}
.track-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--steel); display:block; }
.track li.hecho .track-label, .track li.ahora .track-label{ color:var(--bone); }
.track-fecha{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--steel); display:block; margin-top:3px; }
.track-nota{ font-size:16px; color:var(--silver); display:block; margin-top:6px; max-width:32ch; }
.corte{
  padding:14px 16px; background:var(--ink-3);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:22px;
}
.piezas{ list-style:none; border-top:1px solid var(--line); margin-bottom:18px; }
.piezas li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.pieza-nombre{ font-size:17px; }
.pieza-meta{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.pieza-precio{ font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:15px; }
.envio-a{ font-size:16px; color:var(--silver); padding-top:16px; border-top:1px solid var(--line); }

/* ============================================================
   FAQ — <details> nativo, animado con grid-template-rows.
   Funciona sin una sola línea de JS.
   ============================================================ */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 0; min-height:48px;
  font-size:clamp(18px,2.2vw,23px);
  transition:color var(--t-m) var(--e-out), padding-left var(--t-m) var(--e-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); padding-left:8px; }
.faq summary .sign{
  flex:none; font-family:'IBM Plex Mono', monospace; font-size:17px; color:var(--steel);
  transition:transform var(--t-m) var(--e-out), color var(--t-m) var(--e-out);
}
.faq details[open] summary .sign{ transform:rotate(135deg); color:var(--accent); }
.faq .answer-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-m) var(--e-out); }
.faq details[open] .answer-wrap{ grid-template-rows:1fr; }
.faq .answer{ overflow:hidden; }
.faq .answer p{ padding:0 0 24px; color:var(--silver); font-size:16px; line-height:1.65; max-width:70ch; }

/* ============================================================
   BANDA TIPOGRÁFICA
   Decorativa (aria-hidden), cada texto que dice está escrito en otro
   lugar de la página, se congela con prefers-reduced-motion y se pausa
   fuera de pantalla. La velocidad reacciona al scroll.
   ============================================================ */
.marquee{
  overflow:hidden; background:var(--ink); color:var(--bone);
  padding-block:14px; user-select:none;
  border-block:1px solid var(--line);
}
.marquee-track{
  display:flex; align-items:center; gap:30px;
  width:max-content;
  animation:marquee 46s linear infinite;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  white-space:nowrap;
}
.marquee-track i{ color:var(--accent); font-style:normal; font-size:9px; }
.marquee-track .ghost{ color:var(--steel); }
.marquee.is-paused .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ============================================================
   MODAL
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity var(--t-m) var(--e-out), visibility var(--t-m);
}
.modal.open{ opacity:1; visibility:visible; }
.modal-card{
  position:relative; width:100%; max-width:440px;
  background:var(--ink); border:1px solid var(--line-2);
  padding:clamp(30px,5vw,44px); text-align:center;
  box-shadow:var(--lift-2);
  transform:translateY(20px) scale(.97);
  transition:transform var(--t-l) var(--e-out);
}
.modal.open .modal-card{ transform:none; }
.modal-card img.mark{ width:38px; height:38px; margin:0 auto 18px; }
.modal-card h2{ font-family:'Pirata One', serif; font-size:2.1rem; margin-bottom:16px; }
.modal-card p{ color:var(--silver); font-size:16px; }
.modal-clock{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,8vw,2.9rem); letter-spacing:.07em;
  padding:16px 0; margin-bottom:16px;
  border-block:1px solid var(--line);
}
.modal-close{
  position:absolute; top:7px; right:7px;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--steel);
  transition:color var(--t-s) var(--e-out), transform var(--t-s) var(--e-out);
}
.modal-close:hover{ color:var(--bone); transform:rotate(90deg); }
.modal-card .field{ margin-top:18px; text-align:left; }

/* ============================================================
   AVISO FLOTANTE
   ============================================================ */
.toast{
  position:fixed; z-index:210;
  left:50%; bottom:26px;
  transform:translate(-50%,110%);
  /* Con left:50% el ancho disponible es la mitad de la pantalla, y el
     aviso se partía en cinco renglones en el celular. */
  width:max-content;
  max-width:min(460px, calc(100vw - 32px));
  display:flex; align-items:center; gap:16px;
  padding:14px 18px;
  background:var(--bone); color:var(--black);
  box-shadow:var(--lift-2);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  visibility:hidden;
  transition:transform var(--t-l) var(--e-out), visibility var(--t-l);
}
.toast.show{ transform:translate(-50%,0); visibility:visible; }
.toast a{ color:var(--black); border-bottom:1px solid currentColor; padding-block:5px; white-space:nowrap; }

/* ============================================================
   PIE
   ============================================================ */
.foot{
  background:var(--ink); color:var(--bone);
  padding-block:clamp(56px,8vw,110px) 0;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.foot--seam{ padding-top:clamp(34px,4vw,60px); }
.foot-grid{
  display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:clamp(38px,5vw,64px);
}
.foot-brand .wordmark{ display:flex; align-items:center; gap:11px; font-family:'Pirata One', serif; font-size:28px; letter-spacing:.09em; margin-bottom:14px; }
.foot-brand .wordmark img{ width:24px; height:24px; }
.foot-brand p{ color:var(--silver); font-style:italic; max-width:34ch; }
.foot-col{ display:flex; flex-direction:column; gap:2px; }
.foot-col .label{ margin-bottom:10px; }
.foot-col a, .foot-col span.txt{
  position:relative; width:fit-content;
  padding-block:8px; font-size:16px; color:var(--silver);
  transition:color var(--t-m) var(--e-out);
}
.foot-col a::before{
  content:''; position:absolute; left:0; bottom:4px; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-m) var(--e-out);
}
.foot-col a:hover{ color:var(--bone); }
.foot-col a:hover::before{ transform:scaleX(1); transform-origin:left; }
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:20px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
}
.foot-bottom .route{ display:flex; align-items:center; gap:9px; }
.foot-bottom .route i{ font-style:normal; color:var(--accent); }
/* Las coordenadas de Ilo, de donde sale la marca. Un dato, no un adorno. */
.foot-bottom .coord{ font-variant-numeric:tabular-nums; letter-spacing:.16em; }

/* La marca gigante al pie, recortada por el borde inferior. */
.foot-mark{
  font-family:'Pirata One', serif;
  font-size:clamp(4.5rem,17vw,15rem);
  line-height:.78;
  color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  text-align:center;
  margin-bottom:-.16em;
  user-select:none; pointer-events:none;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.stack{ display:flex; flex-direction:column; }
.gap-s{ gap:12px; } .gap-m{ gap:20px; } .gap-l{ gap:32px; }
.row-flex{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hidden{ display:none !important; }

/* Área táctil — WCAG 2.2 AA, 24x24 mínimo. La excepción permitida es el
   enlace dentro de un párrafo de texto corrido. */
@media (pointer:coarse){
  .rail-nav a, .foot-col a, .link, .remove{ min-height:24px; }
  .foot-bottom{ row-gap:8px; }
}

/* ============================================================
   PACKS

   Una tarjeta de pack se lee distinto a una de pieza: no muestra una
   prenda, muestra una combinación. Por eso la miniatura se parte en
   tantas columnas como piezas tenga — el contenido de la imagen ES la
   información.
   ============================================================ */

.packs-grid{
  display:grid; gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}

.pack-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--ink);
  padding:14px 14px 18px;
  transition:border-color var(--t-m) var(--e-out), background var(--t-m) var(--e-out), transform var(--t-m) var(--e-out);
}
.pack-card:hover{ border-color:var(--line-2); background:var(--ink-2); transform:translateY(-3px); }

.pack-card-media{
  position:relative; display:grid; gap:6px;
  grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--black); border:1px solid var(--line);
  padding:12px; min-height:150px; align-items:center;
}
.pack-card-media img{
  width:100%; height:100%; max-height:190px; object-fit:contain;
  transition:transform var(--t-m) var(--e-out);
}
.pack-card:hover .pack-card-media img{ transform:scale(1.04); }
.pack-card-media .flag{ position:absolute; top:8px; left:8px; }

.pack-card-body{ display:flex; flex-direction:column; gap:8px; padding-top:15px; flex:1; }
.pack-card-top{
  display:flex; justify-content:space-between; gap:10px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.pack-card-name{ font-family:'Pirata One', serif; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.02; }
.pack-card:hover .pack-card-name{ color:var(--accent); }
.pack-card-lema{ font-style:italic; color:var(--silver); font-size:15px; }
.pack-card-price{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric:tabular-nums; font-size:16px;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.pack-card-price .was{ font-size:13px; color:var(--steel); text-decoration:line-through; }
.pack-card-price .off{ background:var(--accent); color:var(--black); padding:3px 7px; font-size:9px; letter-spacing:.14em; }

/* ---------- La marca de que algo abre el acceso ----------
   Es bronce sobre negro y no un color nuevo: la paleta del sitio no se
   toca por esto. Lo que la distingue es el punto que respira. */
.vip-tag{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(201,148,87,.34);
  padding:6px 10px; min-height:24px;
}
.vip-tag-dot{
  width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none;
  animation:vipLatido 3.2s var(--e-io) infinite;
}
@keyframes vipLatido{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

/* ============================================================
   PÁGINA DE PACK
   ============================================================ */

.pack-cab{ display:grid; gap:clamp(24px,4vw,54px); grid-template-columns:1fr; }
@media (min-width:900px){
  .pack-cab{ grid-template-columns:1.05fr .95fr; align-items:start; }
  /* Un pack de cuatro piezas hace una columna derecha muy alta y la
     izquierda se quedaba vacía media pantalla. Pegado, el lienzo
     acompaña la elección de tallas en vez de irse arriba. */
  .pack-lienzo{ position:sticky; top:calc(var(--topbar-h) + var(--promo-h) + 20px); }
}

.pack-lienzo{
  display:grid; gap:10px; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--ink); border:1px solid var(--line); padding:clamp(14px,2vw,24px);
}
.pack-lienzo img{ width:100%; object-fit:contain; max-height:min(56vh,520px); }

.pack-cab .label b{ font-weight:inherit; color:var(--accent); }
.pack-nombre{ font-family:'Pirata One', serif; font-size:clamp(2.6rem,6vw,4.2rem); line-height:.94; }
.pack-lema{
  font-style:italic; font-size:clamp(17px,2vw,20px); color:var(--silver);
  padding-left:16px; border-left:1px solid var(--accent);
}
.pack-precio{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(20px,2.4vw,26px); display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.pack-precio .was{ font-size:16px; color:var(--steel); text-decoration:line-through; }
.pack-precio .off{ background:var(--accent); color:var(--black); padding:4px 8px; font-size:10px; letter-spacing:.14em; }
.pack-ahorro{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* Una fila por pieza: miniatura, nombre y su propia talla. Un pack de
   cuatro piezas son cuatro tallas distintas, no una. */
.pack-piezas{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.pack-pieza{
  display:grid; gap:14px; grid-template-columns:56px 1fr;
  align-items:center; padding:13px 0; border-bottom:1px solid var(--line);
}
.pack-pieza.falta .pack-pieza-nombre b{ color:var(--accent); }

/* ---------- Lo que trae el pack ----------
   Como un acta: a la izquierda qué es, a la derecha cuánto vale o que va
   incluido. Las piezas suman el precio tachado de arriba. */
.pack-incluye{ padding-top:8px; }
.pack-incluye ul{ list-style:none; margin:12px 0 0; padding:0; border-top:1px solid var(--line); }
.pack-incluye li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 18px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.pack-incluye .pi-n{ font-weight:600; font-size:18px; line-height:1.25; }
.pack-incluye .pi-n a{
  display:inline-block; padding-block:2px;
  text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:5px;
  transition:text-decoration-color var(--t-s) var(--e-out);
}
.pack-incluye .pi-n a:hover{ text-decoration-color:currentColor; }
.pack-incluye .pi-v{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--silver); text-align:right; white-space:nowrap;
}
.pack-incluye .pi-v.mono{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.pack-incluye .pi-m{
  grid-column:1 / -1;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.pack-incluye .pi-d{ grid-column:1 / -1; font-size:16px; color:var(--silver); line-height:1.5; }
.pack-incluye .pi-d .link{ margin-left:4px; }
.pack-incluye .pi-vip{ border-left:1px solid var(--accent); padding-left:14px; }
.pack-incluye .pi-vip .pi-n{ color:var(--accent); }
.pack-pieza-img{ background:var(--ink); border:1px solid var(--line); padding:6px; }
.pack-pieza-img img{ width:100%; aspect-ratio:1; object-fit:contain; display:block; }
.pack-pieza-nombre{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pack-pieza-nombre b{ font-weight:600; font-size:18px; }
.pack-pieza-nombre .mono{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.pack-pieza .sizes{ margin-top:9px; }
.pack-pieza .size{ min-width:44px; }
.pack-pieza-agotada{ font-size:13px; color:var(--steel); font-style:italic; margin-top:8px; }

/* ---------- El aviso VIP, antes de comprar ---------- */
.vip-aviso{
  position:relative; border:1px solid rgba(201,148,87,.30); background:var(--ink);
  padding:clamp(18px,2.6vw,26px); display:flex; flex-direction:column; gap:10px;
}
.vip-aviso::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, rgba(201,148,87,.09), transparent 62%);
}
.vip-aviso > *{ position:relative; }
.vip-aviso-t{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
}
.vip-aviso-h{ font-family:'Pirata One', serif; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.04; }
.vip-aviso p{ color:var(--silver); font-size:16px; }
.vip-aviso .link{ align-self:flex-start; }

/* ============================================================
   ECLIPSE VIP

   Misma paleta, misma tipografía, otro ritmo: más aire, menos
   elementos, todo alineado a una sola columna angosta. Se siente
   privado porque está vacío, no porque tenga otro color.
   ============================================================ */

.vip-mast{
  text-align:center; display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2vw,22px);
}
.vip-mast-marca{ width:44px; opacity:.85; }
.vip-kicker{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent);
  padding-left:.42em;
}
.vip-titulo{ font-family:'Pirata One', serif; font-size:clamp(3rem,9vw,6rem); line-height:.9; }
.vip-reloj{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
  font-size:12px; letter-spacing:.34em; color:var(--steel);
}
.vip-regla{ width:min(200px,60vw); height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }

/* Estado: tres renglones de datos, no una tarjeta de felicitación. */
.vip-estado{
  border:1px solid var(--line-2); background:var(--ink);
  padding:clamp(20px,3vw,34px); display:flex; flex-direction:column; gap:0;
}
.vip-fila{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:13px 0; border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.vip-fila:last-child{ border-bottom:0; }
.vip-fila .k{ color:var(--steel); }
.vip-fila .v{ color:var(--bone); }
.vip-fila .v.on{ color:var(--accent); }
.vip-fila--grande .v{ font-family:'Pirata One', serif; font-size:clamp(1.3rem,3vw,1.9rem); letter-spacing:.02em; text-transform:none; }

.vip-secs{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .vip-secs{ grid-template-columns:repeat(2,1fr); } }
.vip-sec{
  background:var(--black); padding:clamp(20px,2.6vw,30px);
  display:flex; flex-direction:column; gap:9px; min-height:170px;
  transition:background var(--t-m) var(--e-out);
}
.vip-sec:hover{ background:var(--ink); }
.vip-sec-t{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
}
.vip-sec-h{ font-family:'Pirata One', serif; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.04; }
.vip-sec p{ color:var(--silver); font-size:15px; line-height:1.55; }
.vip-sec-estado{
  margin-top:auto; padding-top:12px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
}

/* ---------- Portada de acceso ---------- */
.vip-portada{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(18px,2.6vw,26px); }
.vip-portada .field{ text-align:left; }
.vip-msg{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.14em; color:var(--silver); min-height:1.4em;
  opacity:0; transform:translateY(6px);
}
.vip-msg.in{ opacity:1; transform:none; transition:opacity var(--t-m) var(--e-out), transform var(--t-m) var(--e-out); }
.vip-msg.is-err{ color:#e0a3a3; }
.vip-negado{
  border:1px solid var(--line-2); padding:clamp(18px,2.4vw,26px); text-align:center;
  display:flex; flex-direction:column; gap:10px;
}
.vip-negado-t{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--steel);
}

/* ---------- Post-compra ---------- */
.vip-entraste{
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vw,20px); text-align:center;
  border:1px solid rgba(201,148,87,.30); background:var(--ink);
  padding:clamp(26px,4vw,46px); position:relative; overflow:hidden;
}
.vip-entraste::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(560px,100%); height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.vip-entraste-h{
  font-family:'Pirata One', serif; font-size:clamp(2.6rem,8vw,4.6rem); line-height:.92; color:var(--accent);
}

/* ---------- Consentimiento del correo de bienvenida ---------- */
.consent{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); background:var(--ink); padding:16px;
  cursor:pointer; transition:border-color var(--t-m) var(--e-out), background var(--t-m) var(--e-out);
}
.consent:hover{ border-color:var(--line-2); background:var(--ink-2); }
.consent:focus-within{ border-color:var(--accent); }
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.consent-mark{
  flex:none; width:22px; height:22px; margin-top:1px;
  border:1px solid var(--line-3); display:grid; place-items:center;
  transition:border-color var(--t-s) var(--e-out), background var(--t-s) var(--e-out);
}
.consent-mark::after{
  content:'✓'; font-size:13px; line-height:1; color:var(--black);
  opacity:0; transform:scale(.6); transition:opacity var(--t-s) var(--e-out), transform var(--t-s) var(--e-out);
}
.consent input:checked + .consent-mark{ background:var(--accent); border-color:var(--accent); }
.consent input:checked + .consent-mark::after{ opacity:1; transform:none; }
.consent-txt{ display:flex; flex-direction:column; gap:5px; }
.consent-txt b{ font-weight:600; font-size:16px; }
.consent-txt span{ color:var(--silver); font-size:14px; line-height:1.5; }

/* ---------- El pack dentro del pedido ----------

   Un pack es una sola cosa del pedido, no cuatro piezas sueltas que se
   parecen. Antes se pintaban como cuatro filas iguales, cada una con su
   «PACK · 00:00:00» repetido, y el botón de quitarlo era un enlace
   diminuto en color terciario metido dentro de una de las cuatro: nadie
   lo encontraba. Ahora el pack es un bloque con cabecera, y el botón
   vive ahí arriba, donde se busca. */
.pack-grupo{
  border:1px solid rgba(201,148,87,.34);
  border-bottom:1px solid rgba(201,148,87,.34);
  margin-bottom:18px;
}
.pack-grupo-cab{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 16px;
  background:rgba(201,148,87,.06);
  border-bottom:1px solid rgba(201,148,87,.22);
}
.pack-grupo-k{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.pack-grupo-n{ font-family:'Pirata One', serif; font-size:1.5rem; line-height:1.1; margin-top:3px; }

/* El botón sí se ve: borde, área táctil de verdad y --silver (9,37:1),
   no --steel, que es para etiquetas mono cortas y no para una acción. */
.pack-quitar{
  flex:none;
  display:inline-flex; align-items:center; gap:8px;
  min-height:38px; padding:9px 14px;
  border:1px solid var(--line-2);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver);
  transition:color var(--t-s) var(--e-out), border-color var(--t-s) var(--e-out);
}
.pack-quitar:hover,
.pack-quitar:focus-visible{ color:#e59595; border-color:#e59595; }

.pack-grupo.leaving{ animation:line-out 260ms var(--e-io) both; }
.pack-grupo-lineas{ padding:0 16px; }
.pack-grupo-lineas .line:last-child{ border-bottom:0; }
.pack-grupo-pie{
  margin:0; padding:0 16px 13px;
  font-family:'Cormorant Garamond', serif; font-size:14px; color:var(--steel);
}

/* Dentro del bloque, la barra bronce de cada fila ya no hace falta:
   el borde del grupo entero dice lo mismo una sola vez. */
.pack-grupo .line.is-pack{ border-left:0; padding-left:0; }
.line.is-pack{ border-left:1px solid rgba(201,148,87,.34); padding-left:12px; }
.line-pack{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}

@media (max-width:620px){
  .pack-grupo-cab{ padding:12px 13px; }
  .pack-grupo-lineas{ padding:0 13px; }
  .pack-grupo-pie{ padding:0 13px 12px; }
  .pack-quitar{ width:100%; justify-content:center; }
}

@media (max-width:640px){
  /* De a dos, no una debajo de otra: apiladas empujaban el nombre y el
     precio del pack fuera de la primera pantalla. */
  .pack-lienzo{ grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-columns:auto; }
  .pack-lienzo img{ max-height:24vh; }
  .pack-card-media{ min-height:120px; }
  .vip-titulo{ font-size:clamp(2.6rem,14vw,3.6rem); }
  .vip-kicker{ letter-spacing:.3em; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   Un solo bloque, al final, que apaga TODO el movimiento del sitio. El
   contenido queda en su estado final: nada se queda invisible ni a
   medio camino.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .rv, .words .w{ opacity:1 !important; transform:none !important; }
  .line-inner{ transform:none !important; }
  .mask::after{ transform:scaleY(0) !important; }
  .mask > img, .mask > video, .mask .mask-inner{ transform:none !important; }
  .card-media .flag{ transform:none !important; }
  .galeria-cuadro img{ transform:none !important; }
  .curtain{ display:none !important; }
  .track li.ahora .dot{ animation:none !important; }
  .par{ transform:none !important; }
}

/* ============================================================
   BARRA DE COMPRA — sólo pantallas chicas

   En ≥900 px el panel de la ficha es sticky y el botón de reservar
   nunca se va de pantalla. Debajo de eso el botón queda a ~970 px del
   inicio, o sea fuera de la primera pantalla, y quien sigue bajando lo
   pierde. La barra lo devuelve, y se retira sola cuando el botón de
   arriba vuelve a estar a la vista.
   ============================================================ */
.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:none;
  align-items:center; justify-content:space-between; gap:14px;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom, 0px));
  background:rgba(10,10,9,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  transform:translate3d(0,102%,0);
  transition:transform var(--t-m) var(--e-io);
}
@media (max-width:899px){ .barra-compra{ display:flex; } }
.barra-compra.visible{ transform:none; }
.barra-compra-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.barra-compra-txt .n{
  font-family:'Pirata One', serif; font-size:19px; line-height:1;
  letter-spacing:.03em; color:var(--bone);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra-compra-txt .p{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--silver);
  display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap;
}
.barra-compra-txt .p .was{ font-size:11px; color:var(--steel); text-decoration:line-through; }
.barra-compra-txt .p .off{ background:var(--accent); color:var(--black); padding:2px 6px; font-size:9px; letter-spacing:.12em; }
.barra-compra-txt .p .t{ color:var(--bone); white-space:nowrap; }
/* El aviso de «en tu pedido» sale por encima de la barra, no encima de ella. */
@media (max-width:899px){ body:has(.barra-compra.visible) .toast{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); } }
.barra-compra .btn{ flex:none; }
@media (prefers-reduced-motion:reduce){
  .barra-compra{ transition:none; }
}

/* ============================================================
   CONTADOR DE PEDIDO EN EL RAÍL

   En ≥1080 px la barra superior no existe, y con ella desaparecía el
   único indicador de que hay algo en el pedido: quedaba sólo el texto
   «Pedido · 3», fácil de no ver. Acá va la misma marca redonda que
   lleva la barra superior en móvil.
   ============================================================ */
.rail-nav a [data-cart-count]{
  font-variant-numeric:tabular-nums;
  min-width:17px; height:17px; margin-left:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--black);
  font-size:9px; border-radius:50%;
  vertical-align:middle;
}

/* Acciones al pie de una tarjeta de catálogo. Vivían en el <style> de
   coleccion.html; la portada las usa igual, así que van acá una sola vez. */
.card-acciones{ display:flex; gap:9px; padding-top:14px; }
.card-acciones .btn{ flex:1; }
.card-name a{ color:inherit; text-decoration:none; }
.card-name a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Cuatro piezas en tres columnas dejan una sola en la fila de abajo y el
   catálogo parece a medio cargar. Se fija el número de columnas para que
   nunca caiga en tres. */
.catalogo:not(.lista),
.drop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* En el celular van de a dos, como en las tiendas de referencia: con una
   sola columna, cuatro piezas eran cuatro pantallas de scroll. */
@media (max-width:639px){
  .catalogo:not(.lista),
  .drop-grid{ column-gap:10px; row-gap:26px; }
  .catalogo:not(.lista) .card-desc,
  .drop-grid .card-desc{ display:none; }
  .catalogo:not(.lista) .card-name,
  .drop-grid .card-name{ font-size:1.45rem; }
  .catalogo:not(.lista) .card-top,
  .drop-grid .card-top{ font-size:8.5px; letter-spacing:.12em; }
  .catalogo:not(.lista) .card-foot,
  .drop-grid .card-foot{ flex-wrap:wrap; gap:4px; }
}
@media (max-width:340px){
  .catalogo:not(.lista),
  .drop-grid{ grid-template-columns:1fr; }
}
@media (min-width:1180px){
  .catalogo:not(.lista),
  .drop-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ---- Tallas tocables en la tarjeta ----
   Cada talla es un botón: tocarlo suma la pieza al pedido. Las agotadas
   se ven, tachadas, pero no se pueden tocar. */
.tallas-rapidas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.tallas-rapidas button{
  min-height:38px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em;
  color:var(--bone); border:1px solid var(--line-2);
  transition:background var(--t-s) var(--e-out), color var(--t-s) var(--e-out), border-color var(--t-s) var(--e-out);
}
.tallas-rapidas button:hover:not(:disabled),
.tallas-rapidas button:focus-visible{ background:var(--bone); color:var(--black); border-color:var(--bone); }
.tallas-rapidas button:disabled{ color:var(--steel); border-style:dashed; text-decoration:line-through; opacity:.55; cursor:not-allowed; }
.tallas-rapidas button.ok{ animation:talla-ok 900ms var(--e-out); }
@keyframes talla-ok{ 0%{ background:var(--accent); color:var(--black); border-color:var(--accent); } 100%{ background:transparent; } }
.tallas-k{ margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.card-ficha{ display:inline-block; margin-top:12px; padding:6px 0 3px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); border-bottom:1px solid var(--line-2); align-self:flex-start; }
.card-ficha:hover{ color:var(--bone); border-color:var(--bone); }
@media (max-width:639px){
  .tallas-rapidas{ gap:4px; }
  .tallas-rapidas button{ min-height:36px; font-size:10px; letter-spacing:.04em; }
}
@media (prefers-reduced-motion:reduce){ .tallas-rapidas button.ok{ animation:none; } }

/* ---- Díptico de campaña ----
   Dos fotos verticales lado a lado, a sangre. Primero se ve la ropa. */
.diptico{ display:grid; grid-template-columns:1fr 1fr; gap:4px; position:relative; z-index:2; }
.diptico figure{ margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink); }
.diptico img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e-out); }
.diptico figure:hover img{ transform:scale(1.025); }
.diptico figure::after{ content:''; position:absolute; inset:auto 0 0 0; height:32%; background:linear-gradient(transparent, rgba(10,10,9,.82)); pointer-events:none; }
.diptico figcaption{ position:absolute; left:clamp(12px,1.6vw,20px); bottom:clamp(10px,1.4vw,18px); z-index:2; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); }
.diptico-pie{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; padding:clamp(18px,2.6vw,30px) var(--pad) 0; position:relative; z-index:2; }
.diptico-pie .lat{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(22px,2.6vw,34px); letter-spacing:.03em; }

/* ---- Bloque de colección, con la próxima sellada ---- */
/* Banda de la colección: la foto de campaña a todo el ancho, sin texto
   encima, y abajo los cuatro nombres. Las columnas no son iguales: cada
   una va centrada bajo su persona (Génesis ~20 %, Pacto ~41 %, Omega
   ~55 %, Velo ~77 % del ancho de la foto). */
.banda-grupo{ position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.banda-grupo-img{ background:var(--ink); }
.banda-grupo-img img{ display:block; width:100%; height:auto; aspect-ratio:2400/1340; object-fit:cover; }
.banda-grupo-nombres{ display:grid; grid-template-columns:30.6fr 17.4fr 18fr 34fr; border-top:1px solid var(--line); }
.banda-grupo-nombres a{
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  min-height:48px; padding:14px 6px;
  font-family:'Pirata One', serif; font-size:clamp(1.05rem,2.2vw,1.6rem); line-height:1;
  color:var(--bone); text-decoration:none;
  transition:color var(--t-s) var(--e-out), background var(--t-s) var(--e-out);
}
.banda-grupo-nombres a + a{ border-left:1px solid var(--line); }
.banda-grupo-nombres span{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.2em; color:var(--steel); }
@media (hover:hover){ .banda-grupo-nombres a:hover{ color:var(--accent); background:rgba(242,237,228,.03); } }
.banda-grupo-nombres a:focus-visible{ outline:1px solid var(--accent); outline-offset:-4px; }
.banda-grupo-pie{ margin:0 var(--pad); padding-bottom:22px; }
/* En el celular siguen siendo cuatro columnas, para que cada nombre quede
   debajo de su modelo; el número se va para que el nombre quepa. */
@media (max-width:599px){ .banda-grupo-nombres span{ display:none; } }
.proxima{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.proxima-sello{ display:flex; align-items:center; gap:14px; }
.proxima-sello img{ width:54px; height:54px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.proxima-r{ font-family:'Pirata One', serif; font-size:34px; line-height:1; }