@charset "UTF-8";
/* ==========================================================================
   PINTURAS OPTIMUS · SISTEMA DE DISEÑO "CAMPO AZUL"
   --------------------------------------------------------------------------
   Dirección : campo de color saturado de pared a pared, tipografía de póster
               y un héroe anclado donde la lata vierte pintura al hacer scroll.
   Color     : azul del envase (#0B3A8C) + amarillo del envase (#FFD400).
   Tipografía: Anton (póster) · Inter (texto) · JetBrains Mono (datos).
   Propósito : catálogo de producto y presentación de la empresa.
   --------------------------------------------------------------------------
   1 Tokens   2 Reset   3 Tipografía   4 Utilidades   5 Cabecera
   6 Héroe (vertido)   7 Componentes   8 Secciones   9 Movimiento  10 Impresión
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root{
  color-scheme:dark;

  /* --- Azul del envase -------------------------------------------------- */
  --blue:#0B3A8C;         /* campo principal */
  --blue-deep:#061E4C;    /* secciones alternas */
  --blue-abyss:#04132F;   /* pie y fondos profundos */
  --blue-bright:#1F6FEB;  /* pintura y acentos vivos */
  --blue-light:#5C9FFF;
  --blue-pale:#DCE8FF;    /* texto sobre azul */
  --blue-mute:#9FB6E8;    /* texto secundario sobre azul */

  /* --- Amarillo del envase ---------------------------------------------- */
  --yellow:#FFD400;
  --yellow-dim:#E8BE00;
  --yellow-pale:#FFEB99;

  --white:#FFFFFF;
  --danger:#FF8A8A;
  --success:#7BE8A8;

  /* --- Tipografía -------------------------------------------------------- */
  --font-display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-2xs:0.75rem;
  --text-xs:0.8125rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-md:1.0625rem;
  --text-lg:1.1875rem;
  --text-xl:1.375rem;

  --tracking-label:0.18em;
  --tracking-display:-0.015em;

  /* --- Espaciado --------------------------------------------------------- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px;  --space-10:128px;

  --section-y:clamp(72px,9vw,140px);
  --gutter:clamp(18px,3.5vw,40px);
  --container:1400px;
  --container-narrow:760px;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-full:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms;
  --dur-base:260ms;
  --dur-slow:560ms;

  --header-h:64px;
  --z-header:100;
  --z-overlay:900;
  --z-toast:1000;

  /* --- Semánticos --------------------------------------------------------- */
  --bg:var(--blue);
  --text:var(--blue-pale);
  --text-strong:var(--white);
  --text-muted:var(--blue-mute);
  --display-color:var(--yellow);

  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.09);
  --line-yellow:rgba(255,212,0,.34);

  --shadow-md:0 10px 30px rgba(2,10,28,.4);
  --shadow-lg:0 32px 70px -24px rgba(2,10,28,.75);

  --focus-ring:var(--yellow);
}

/* ==========================================================================
   2 · RESET Y BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 20px);
  background:var(--bg);
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse}
::selection{background:var(--yellow);color:var(--blue-abyss)}

:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
/* ---------------------------------------------------------------------------
   GRANO
   Una capa fija de ruido sobre todo el sitio. Es lo que le quita el aspecto
   de degradado digital plano y le da el aire impreso del referente.
   Va en un pseudo-elemento del <body>: no estorba al puntero ni al lector
   de pantalla, y no obliga a repintar nada al hacer scroll.
--------------------------------------------------------------------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
@media print{body::after{display:none}}

.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:calc(var(--z-header) + 10);
  background:var(--yellow);color:var(--blue-abyss);padding:12px 20px;border-radius:var(--radius-sm);
  font-weight:700;font-size:var(--text-sm);transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:var(--space-3)}

/* ==========================================================================
   3 · TIPOGRAFÍA
   ========================================================================== */
/* Anton: caps enormes y apretadas, una sola caja de grosor */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:1.2;
  letter-spacing:var(--tracking-display);
  color:var(--display-color);
  text-wrap:balance;
}
h1,.display--xl{font-size:clamp(3rem,1rem + 11vw,10rem)}
h2,.display--lg{font-size:clamp(2.25rem,1rem + 6.4vw,5.5rem)}
h3,.display--md{font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);line-height:1.2}
h4{
  font-family:var(--font-sans);font-weight:600;font-size:var(--text-lg);
  letter-spacing:-.01em;color:var(--text-strong);line-height:1.25;
}
p{text-wrap:pretty}

.lead{
  font-size:clamp(var(--text-md),.95rem + .6vw,1.3125rem);
  color:var(--text);max-width:52ch;line-height:1.55;
}
.label{
  display:inline-block;
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--yellow);
}
.label--pale{color:var(--blue-mute)}
.muted{color:var(--text-muted)}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ==========================================================================
   4 · UTILIDADES
   ========================================================================== */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--container-narrow)}
.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;
}
.hide,[hidden]{display:none!important}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.section--deep{background:var(--blue-deep)}
.section--abyss{background:var(--blue-abyss)}
.section--line{border-top:1px solid var(--line-soft)}

.section-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,38ch);
  gap:var(--space-5) var(--space-8);align-items:end;margin-bottom:var(--space-8);
}
.section-head .label{margin-bottom:var(--space-4)}
.section-head p{color:var(--text);font-size:var(--text-md);max-width:60ch}
@media (max-width:900px){.section-head{grid-template-columns:1fr;gap:var(--space-4)}}

/* línea punteada: guiño al referente */
.dashed{height:0;border:0;border-top:2px dashed var(--line-yellow);margin:0}

/* --- Texto que se enciende palabra por palabra -------------------------
   La opacidad la pone el JS. Sin JS el texto se ve completo: aquí no se
   atenúa nada por CSS a propósito. */
.word{display:inline-block;will-change:opacity}
/* Al parar el scroll, app.js retira la opacidad en línea y añade esta clase:
   el titular sube a plena luz en 0.4s. Durante el barrido no hay transición,
   para que el efecto siga siendo instantáneo palabra a palabra. */
.words-settled .word{opacity:1;transition:opacity .4s var(--ease-out)}
[data-words]{text-wrap:balance}

/* Bloque de declaración: frases cortas y enormes, una debajo de otra.
   El límite de ancho va en las líneas, no en el bloque: si no, el texto
   de apoyo se quedaría en una columna demasiado angosta. */
.statement__lines{display:grid;gap:clamp(4px,1vw,14px);max-width:20ch}
.statement__lines .display{display:block}
.statement__note{
  margin-top:var(--space-6);color:var(--blue-pale);
  font-size:var(--text-md);max-width:48ch;
}

/* ==========================================================================
   5 · CABECERA
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:var(--z-header)}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--blue) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line-soft);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header::before{background:var(--blue)}
}
.header-inner{display:flex;align-items:center;gap:var(--space-4);height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none;min-height:44px;border-radius:var(--radius-sm)}
.brand img{height:22px;width:auto}

/* enlaces en cápsula, como los chips del referente */
.nav{display:flex;align-items:center;gap:6px;margin-inline:auto}
.nav a:not(.btn){
  position:relative;padding:8px 15px;border-radius:var(--radius-full);
  border:1px solid transparent;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-pale);
  transition:color var(--dur-fast) ease,background var(--dur-fast) ease,border-color var(--dur-fast) ease;
  white-space:nowrap;
}
.nav a:not(.btn):hover{color:var(--yellow);border-color:var(--line-yellow)}
.nav a:not(.btn)[aria-current="page"]{background:var(--yellow);color:var(--blue-abyss);border-color:var(--yellow)}
.header-actions{display:flex;align-items:center;gap:var(--space-2);flex:none;margin-left:auto}
.nav+.header-actions{margin-left:0}
.header-actions .btn{min-height:38px;padding:8px 16px}

.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;position:relative;flex:none;
  border:1px solid var(--line);border-radius:var(--radius-full);
  color:var(--blue-pale);background:transparent;
  transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease,background var(--dur-fast) ease;
}
.icon-btn::after{content:"";position:absolute;inset:-3px}
.icon-btn:hover{color:var(--yellow);border-color:var(--line-yellow)}
.icon-btn svg{width:18px;height:18px}
.nav-toggle{display:none}
.nav [data-hide-desktop]{display:none}

@media (max-width:1080px){
  .nav-toggle{display:grid}
  .header-actions .btn--header-cta{display:none}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--blue-deep);border-bottom:1px solid var(--line);
    padding:var(--space-3) var(--gutter) var(--space-6);
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav[data-open="true"]{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav a:not(.btn){
    padding:16px 4px;border-radius:0;border:0;border-bottom:1px solid var(--line-soft);
    font-family:var(--font-display);font-size:1.75rem;letter-spacing:0;color:var(--yellow);
  }
  .nav a:not(.btn)[aria-current="page"]{background:transparent;color:var(--white)}
  .nav [data-hide-desktop]{display:inline-flex;margin-top:var(--space-5);border-bottom:0}
}

/* ==========================================================================
   6 · HÉROE CON VERTIDO DE PINTURA
   --------------------------------------------------------------------------
   Estructura calcada del referente:

     .pour                     alto = la suma de los bloques
       .pour__stage            ANCLADO, una pantalla: aquí vive la lata
       .pour__flow             flujo normal, pasa POR ENCIMA de la lata
         .pour__beat           un bloque de texto por pantalla
         .pour__beat--blank    pantalla vacía: solo se ve la lata

   La clave es que el texto NO se cruza en el mismo sitio: entra y sale
   con el scroll, como cualquier contenido. La lata se queda quieta detrás.
   ========================================================================== */
.pour{position:relative;background:var(--blue-abyss)}

/* la lata se queda fija mientras el bloque entero pasa por delante */
.pour__stage{
  position:sticky;top:0;height:100svh;margin-bottom:-100svh;
  z-index:0;overflow:hidden;
  background:
    radial-gradient(closest-side at 50% 46%,rgba(31,111,235,.34),transparent 72%),
    var(--blue-abyss);
}
.pour__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pour__canvas--3d{z-index:1}
.pour__canvas--paint{z-index:3}

/* Velo entre la lata y el chorro.
   La etiqueta del bote es casi blanca (#E6E7EB en su punto más claro) y los
   bloques de texto le pasan por encima: el amarillo #FFD400 caía a 1.0:1 y el
   párrafo #DCE8FF a 1.2:1, o sea ilegibles. Con .62 en el núcleo el amarillo
   sube a 4.0:1 y el párrafo a 4.7:1 sobre ese mismo punto.
   Va en z-index 2, por DEBAJO del lienzo de pintura (3): así el chorro y la
   inundación conservan su color y sólo se atenúa la lata.
   .pour__stage tiene z-index 0 y crea contexto de apilamiento, de modo que
   este velo nunca puede taparle el texto a .pour__flow. */
.pour__stage::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 72% 58% at 50% 52%,
    rgba(4,19,47,.62),rgba(4,19,47,.42) 64%,rgba(4,19,47,.24));
}
@media print{.pour__stage::after{display:none}}

/* respaldo estático: sin JS, sin canvas o con movimiento reducido */
.pour__fallback{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
}
.pour__fallback img{
  height:min(46vh,420px);width:auto;
  filter:drop-shadow(0 30px 50px rgba(2,10,28,.8));
}
.pour[data-canvas="on"] .pour__fallback{display:none}

/* --- los bloques de texto, en flujo normal, por encima de la lata --- */
.pour__flow{position:relative;z-index:2;pointer-events:none}
.pour__beat{
  min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  width:100%;max-width:var(--container);margin-inline:auto;
  padding:calc(var(--header-h) + clamp(20px,4vh,44px)) var(--gutter) clamp(48px,7vh,76px);
}
.pour__beat--blank{min-height:55svh}          /* respiro: solo la lata */
.pour__beat--tall{min-height:130svh}          /* el último, mientras vierte */

.pour__beat__top,.pour__beat__bottom{width:100%}
.pour__beat__mid{display:flex;align-items:center;width:100%;padding-block:var(--space-5)}
.pour__beat .btn-row{margin-top:var(--space-5);pointer-events:auto}
.pour__eyebrow{display:block;margin-bottom:var(--space-5);color:var(--white)}

/* apunte: párrafo corto y angosto, anclado a un costado */
.pour__aside{
  max-width:26ch;font-size:var(--text-sm);line-height:1.55;
  color:var(--blue-pale);text-shadow:0 2px 16px rgba(4,19,47,.95);
}
.pour__beat h1,.pour__beat .display{text-shadow:0 4px 30px rgba(4,19,47,.5)}

/* --- anclaje por bloque: izquierda, centro, derecha --- */
.pour__beat--left   .pour__beat__top,
.pour__beat--left   .pour__aside{text-align:left}
.pour__beat--left   .pour__beat__mid{justify-content:flex-start}
.pour__beat--left   .btn-row{justify-content:flex-start}

.pour__beat--right  .pour__beat__top{text-align:right}
.pour__beat--right  .pour__beat__mid{justify-content:flex-end}
.pour__beat--right  .pour__aside{text-align:right}
.pour__beat--right  .btn-row{justify-content:flex-end}

.pour__beat--center .pour__beat__top,
.pour__beat--center .pour__aside{text-align:center}
.pour__beat--center .pour__beat__mid{justify-content:center}
.pour__beat--center .btn-row{justify-content:center}

/* indicador de scroll, solo en el primer bloque */
.pour__hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-mute);
  transition:opacity var(--dur-base) ease;
}
.pour__hint svg{width:15px;height:15px;animation:nudge-down 1.8s var(--ease-out) infinite}
.pour[data-started="true"] .pour__hint{opacity:0}
@keyframes nudge-down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media (max-width:820px){
  .pour__beat__top,.pour__aside{text-align:center!important}
  .pour__beat__mid{justify-content:center!important}
  .pour__beat .btn-row{justify-content:center!important}
  .pour__aside{max-width:34ch;margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  .pour__stage{position:relative;margin-bottom:0;height:auto;min-height:70svh}
  .pour__canvas,.pour__hint{display:none!important}
  .pour__fallback{position:relative;padding-block:var(--space-8)}
  .pour__beat{min-height:0;padding-block:var(--space-8)}
  .pour__beat--blank{display:none}
}

/* ==========================================================================
   7 · COMPONENTES
   ========================================================================== */

/* --- Botones ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:13px 26px;
  border:2px solid transparent;border-radius:var(--radius-full);
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,
             border-color var(--dur-fast) ease,transform var(--dur-fast) ease;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--yellow);color:var(--blue-abyss);border-color:var(--yellow)}
.btn--primary:hover{background:var(--yellow-pale);border-color:var(--yellow-pale)}

.btn--outline{background:transparent;color:var(--blue-pale);border-color:var(--line)}
.btn--outline:hover{color:var(--yellow);border-color:var(--yellow)}

.btn--solid{background:var(--white);color:var(--blue-abyss);border-color:var(--white)}
.btn--solid:hover{background:var(--blue-pale);border-color:var(--blue-pale)}

.btn--lg{min-height:56px;padding:16px 34px;font-size:var(--text-sm)}
.btn--block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 2px;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow);border-radius:var(--radius-sm);
}
.link-arrow svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}

/* --- Distintivos --------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:var(--radius-full);
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.badge--yellow{background:var(--yellow);color:var(--blue-abyss)}
.badge--outline{border:1px solid var(--line);color:var(--blue-pale)}
.badge--ink{background:rgba(4,19,47,.72);color:var(--blue-pale)}
.badge--neutral{border:1px solid var(--line);color:var(--blue-mute)}
.badge--doc{border:1px solid var(--line-yellow);color:var(--yellow)}
/* el precio de arranque es el dato más consultado de la ficha: va sólido */
.badge--brand{background:var(--yellow);color:var(--blue-abyss);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.04em}

/* --- Tarjeta de producto -------------------------------------------------- */
.product-grid{
  display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));
}
.product-card{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:var(--blue-deep);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  transition:border-color var(--dur-base) ease,transform var(--dur-base) var(--ease-out),background var(--dur-base) ease;
}
.product-card:hover{transform:translateY(-5px);border-color:var(--line-yellow);background:#0A2660}
.product-card:has(a:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.product-card__media{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  padding:var(--space-6) var(--space-5);
  background:radial-gradient(closest-side,rgba(31,111,235,.34),transparent 72%),var(--blue-abyss);
  border-bottom:1px solid var(--line-soft);
}
.product-card__media img{
  position:relative;z-index:1;width:auto;height:100%;max-height:208px;object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(2,10,28,.7));
  transition:transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img{transform:translateY(-6px) scale(1.04)}
.product-card__tags{
  position:absolute;inset:var(--space-3) var(--space-3) auto;z-index:2;
  display:flex;justify-content:space-between;gap:var(--space-2);pointer-events:none;
}
.product-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-5)}
.product-card__title{
  font-family:var(--font-display);text-transform:uppercase;color:var(--yellow);
  font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px;
}
.product-card__title a{color:inherit}
.product-card__title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-md)}
.product-card__title a:focus-visible{outline:none}
.product-card__type{font-size:var(--text-sm);color:var(--blue-mute);margin-bottom:var(--space-4);line-height:1.5}
.product-card__feats{display:grid;gap:7px;font-size:var(--text-sm);color:var(--blue-pale);margin-bottom:var(--space-5)}
.product-card__feats li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.product-card__feats svg{width:15px;height:15px;margin-top:3px;flex:none;color:var(--yellow)}
.product-card__sizes{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:var(--space-5)}
.product-card__sizes span{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  padding:4px 9px;border-radius:var(--radius-full);
  border:1px solid var(--line-soft);color:var(--blue-mute);
}
.product-card__foot{
  margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--line-soft);
}
.product-card__price .k{
  display:block;font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--blue-mute);
}
.product-card__price .v{
  font-family:var(--font-display);font-size:1.5rem;color:var(--white);
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.product-card__cta{
  position:relative;z-index:1;color:var(--yellow);
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;padding:8px 2px;
}
.product-card__cta svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-out)}
.product-card:hover .product-card__cta svg{transform:translateX(3px)}

/* --- Familia (categoría) --------------------------------------------------- */
.family-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.family-card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:210px;padding:var(--space-5);overflow:hidden;
  background:var(--blue-deep);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) ease,background var(--dur-base) ease;
}
.family-card:hover{transform:translateY(-5px);border-color:var(--line-yellow);background:#0A2660}
/* gota con el color de la familia */
.family-card::before{
  content:"";position:absolute;right:-42px;top:-42px;width:154px;height:154px;border-radius:50%;
  background:var(--family,var(--blue-bright));opacity:.26;
  transition:opacity var(--dur-base) ease,transform var(--dur-base) var(--ease-out);
}
.family-card:hover::before{opacity:.42;transform:scale(1.12)}
.family-card__name{
  position:relative;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.375rem,1rem + 1.4vw,1.875rem);line-height:1.2;color:var(--yellow);
  overflow-wrap:break-word;hyphens:auto;
}
.family-card__desc{position:relative;font-size:var(--text-sm);color:var(--blue-mute);margin-top:var(--space-3)}
.family-card__count{
  position:relative;margin-top:var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-pale);
}

/* --- Cifras --------------------------------------------------------------- */
/* auto-fit con minmax(min(100%,180px),1fr) resolvía DOS pistas de 180px dentro
   de un contenedor de 284px a 320px de ancho: 350px de rejilla y 47px de
   desborde en toda la portada. Con un número de columnas explícito por tramo
   el ancho es determinista y no puede pasar. */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px dashed var(--line-yellow)}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof>div:nth-child(2n){border-right:0}}
@media (max-width:430px){.proof{grid-template-columns:minmax(0,1fr)}
  .proof>div{border-right:0}
  .proof>div:nth-last-child(-n+2){border-bottom:1px dashed var(--line-yellow)}
  .proof>div:last-child{border-bottom:0}}
/* En el marcado el <dt> va primero, como exige la especificación de <dl>.
   column-reverse mantiene la cifra arriba y la etiqueta debajo, sin invertir
   la semántica que anuncia un lector de pantalla. */
.proof>div{padding:var(--space-6) var(--space-5);border-right:1px dashed var(--line-yellow);
  display:flex;flex-direction:column-reverse;justify-content:flex-end}
.proof>div:last-child{border-right:0}
.proof dd{
  font-family:var(--font-display);font-size:clamp(3rem,1.6rem + 4.4vw,5.5rem);
  line-height:.92;color:var(--yellow);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;margin:0;
}
.proof dt{
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--blue-mute);margin-top:var(--space-4);line-height:1.6;
}
@media (max-width:640px){
  .proof>div{border-bottom:1px dashed var(--line-yellow)}
  .proof>div:nth-last-child(-n+2){border-bottom:0}
}

/* --- Bloque de característica --------------------------------------------- */
.feature-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.feature{
  padding:var(--space-6);background:var(--blue-deep);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);
  transition:border-color var(--dur-base) ease,transform var(--dur-base) var(--ease-out);
}
.feature:hover{border-color:var(--line-yellow);transform:translateY(-3px)}
.feature__icon{
  width:46px;height:46px;border-radius:var(--radius-full);
  display:grid;place-items:center;margin-bottom:var(--space-5);
  background:var(--yellow);color:var(--blue-abyss);
}
.feature__icon svg{width:22px;height:22px}
.feature h3{margin-bottom:var(--space-3);font-size:1.5rem}
.feature p{font-size:var(--text-sm);color:var(--blue-pale)}
.feature__index{
  display:block;font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--blue-mute);letter-spacing:.14em;margin-bottom:var(--space-3);
}

/* --- Pasos ---------------------------------------------------------------- */
.steps{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));counter-reset:step}
.step{padding-top:var(--space-5);border-top:2px dashed var(--line-yellow);counter-increment:step}
.step::before{
  content:"0" counter(step);display:block;font-family:var(--font-display);
  font-size:2.5rem;line-height:1;color:var(--yellow);margin-bottom:var(--space-4);
}
.step h3{margin-bottom:var(--space-3);font-size:1.5rem}
.step p{font-size:var(--text-sm);color:var(--blue-pale)}
/* Concreciones bajo cada paso. Los bloques de .steps eran un número, un
   título y dos renglones repartidos en 1100px: se leían como una franja
   vacía. */
.step__lista{margin-top:var(--space-4);display:grid;gap:9px}
.step__lista li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:var(--text-sm);color:var(--blue-mute);line-height:1.5;
}
.step__lista li::before{
  content:"";flex:none;width:5px;height:5px;margin-top:8px;
  border-radius:50%;background:var(--yellow);
}

/* --- Franja destacada ------------------------------------------------------ */
.band{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--yellow);color:var(--blue-abyss);
  border-radius:var(--radius-lg);padding:clamp(36px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-6) var(--space-8);align-items:center;
}
.band h2{color:var(--blue-abyss)}
.band p{color:#123163;margin-top:var(--space-4);max-width:48ch;font-weight:500}
.band .btn--primary{background:var(--blue-abyss);color:var(--yellow);border-color:var(--blue-abyss)}
.band .btn--primary:hover{background:var(--blue);border-color:var(--blue)}
.band .btn--outline{color:var(--blue-abyss);border-color:rgba(4,19,47,.4)}
.band .btn--outline:hover{background:rgba(4,19,47,.1);color:var(--blue-abyss);border-color:var(--blue-abyss)}
.band :focus-visible{outline-color:var(--blue-abyss)}
@media (max-width:900px){.band{grid-template-columns:1fr}}

/* --- Tira ------------------------------------------------------------------ */
.ticker{position:relative;overflow:hidden;background:var(--yellow);color:var(--blue-abyss)}
.ticker__track{
  display:flex;width:max-content;animation:ticker-scroll 42s linear infinite;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1;padding-block:14px;
}
.ticker__track>span{display:flex;gap:var(--space-6);padding-right:var(--space-6);white-space:nowrap;align-items:center}
.ticker__track b{font-weight:400;opacity:.42}
.ticker[data-paused="true"] .ticker__track{animation-play-state:paused}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker__pause{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-full);
  background:var(--blue-abyss);color:var(--yellow);
}
.ticker__pause::after{content:"";position:absolute;inset:-7px}
.ticker__pause svg{width:13px;height:13px}
.ticker__pause .icon-play{display:none}
.ticker[data-paused="true"] .ticker__pause .icon-play{display:block}
.ticker[data-paused="true"] .ticker__pause .icon-pause{display:none}
.ticker :focus-visible{outline-color:var(--blue-abyss)}
@keyframes ticker-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* Sin animación el carril seguía midiendo max-content y se recortaba: sólo
     entraban 24 de los 111 caracteres, cortados a media palabra, con el botón
     de pausa oculto y el contenido aria-hidden. Ahora las familias se reparten
     en varias líneas y se leen todas. El segundo <span> es el duplicado que
     sólo servía para cerrar el bucle. */
  .ticker__track{animation:none;width:100%;flex-wrap:wrap;overflow:visible;
    justify-content:center;padding-inline:var(--gutter)}
  .ticker__track>span{white-space:normal;flex-wrap:wrap;justify-content:center;padding-right:0}
  .ticker__track>span:nth-child(2){display:none}
  .ticker__pause{display:none}
}

/* --- Formularios ------------------------------------------------------------ */
.field{display:grid;gap:8px;margin-bottom:var(--space-5)}
.field>label{
  font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-pale);
}
.field .hint{font-size:var(--text-xs);color:var(--blue-mute);line-height:1.5}
.req{color:var(--yellow)}

.input,.select,.textarea{
  width:100%;min-height:50px;padding:14px 16px;
  background:var(--blue-abyss);color:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:var(--text-base);
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.input::placeholder,.textarea::placeholder{color:#7D93C4}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(255,255,255,.3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,212,0,.28);
}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none}
.textarea{min-height:140px;resize:vertical;line-height:1.6}
.select{
  appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFD400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.select option{background:var(--blue-deep);color:var(--white)}
[aria-invalid="true"].input,[aria-invalid="true"].select,[aria-invalid="true"].textarea{border-color:var(--danger)}
[aria-invalid="true"].input:focus,[aria-invalid="true"].textarea:focus,[aria-invalid="true"].select:focus{
  box-shadow:0 0 0 3px rgba(255,138,138,.3);
}
.field-error{display:flex;align-items:flex-start;gap:6px;font-size:var(--text-sm);font-weight:500;color:var(--danger)}
.field-error svg{width:15px;height:15px;margin-top:3px;flex:none}
.field-error:empty{display:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}

.stepper{display:flex;align-items:stretch}
.stepper .input{
  border-radius:0;text-align:center;-moz-appearance:textfield;appearance:textfield;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;
}
.stepper .input::-webkit-outer-spin-button,
.stepper .input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper button{
  width:50px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--white);
  transition:background var(--dur-fast) ease;
}
.stepper button:hover{background:rgba(255,212,0,.16)}
.stepper button:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-right:0}
.stepper button:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:0}
.stepper svg{width:17px;height:17px}

/* --- Filtros y búsqueda ------------------------------------------------------ */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;
  justify-content:space-between;margin-bottom:var(--space-5);
}
.filter-group{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.filter-group button{
  min-height:42px;padding:9px 18px;border-radius:var(--radius-full);
  border:1px solid var(--line);background:transparent;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-pale);
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.filter-group button:hover{border-color:var(--line-yellow);color:var(--yellow)}
.filter-group button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--blue-abyss)}
.search-field{position:relative;flex:1;min-width:230px;max-width:340px}
.search-field>svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);z-index:1;
  width:18px;height:18px;color:var(--blue-mute);pointer-events:none;
}
.search-field .input{padding-left:46px;padding-right:44px}
.search-field .clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:1;
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-full);
  color:var(--blue-mute);
}
.search-field .clear:hover{background:rgba(255,255,255,.1);color:var(--yellow)}
.search-field .clear svg{width:16px;height:16px}
.result-count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--blue-mute)}
/* Los ejemplos de búsqueda viven aquí y no en el placeholder: dentro del campo
   se cortaban a los 247px disponibles en móvil y además desaparecían al escribir. */
.search-hint{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--blue-mute);max-width:60ch}

/* --- Tablas ------------------------------------------------------------------- */
.table-wrap{border:1px solid var(--line-soft);border-radius:var(--radius-md);overflow:hidden;background:var(--blue-deep)}
/* contain:paint es lo que impide que la tabla (min-width:700px) ensanche el
   bloque contenedor inicial: sin él, en móvil innerWidth pasaba de 375 a 780,
   el <html> reportaba 405px de desborde y el panel del menú (position:fixed,
   left:0/right:0) se dibujaba a 781px, con la mitad fuera de la pantalla.
   max-width, width:100% y min-width:0 NO lo corrigen; se comprobó uno a uno. */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;contain:paint;
  /* Sombra de desplazamiento: las dos primeras capas van con el contenido
     (local) y tapan a las dos siguientes cuando la tabla está en un extremo,
     así que la sombra sólo aparece del lado que aún queda por ver. Sin JS y
     sin puntos de corte que adivinar. */
  background:
    linear-gradient(to right,var(--blue-deep) 40%,rgba(6,30,76,0)) left center / 34px 100% no-repeat local,
    linear-gradient(to left, var(--blue-deep) 40%,rgba(6,30,76,0)) right center / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(4,19,47,.55),rgba(4,19,47,0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(4,19,47,.55),rgba(4,19,47,0)) right center / 16px 100% no-repeat scroll;
}
.table-scroll:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.table{width:100%;min-width:700px;font-size:var(--text-sm)}
.table th,.table td{padding:16px 20px;text-align:left;vertical-align:middle}
.table thead th{
  background:var(--blue-abyss);border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--blue-mute);
  white-space:nowrap;
}
.table tbody tr{border-top:1px solid var(--line-soft)}
.table tbody tr:hover{background:rgba(255,255,255,.04)}
.table .name{font-family:var(--font-display);font-size:1.25rem;text-transform:uppercase;color:var(--yellow);letter-spacing:0}
.table td{color:var(--blue-pale)}
.table .right{text-align:right}
/* La tabla mide 736px dentro de una ventana de 337px en móvil: centrado, el
   aviso de «sin resultados» nacía en x=224 y sólo se veía un 20% de la frase.
   Anclado con sticky al borde izquierdo visible, se lee sin arrastrar nada. */
.table td.table__vacio{
  position:sticky;left:0;
  text-align:left;padding:var(--space-8) var(--space-5);
  color:var(--text-muted);
}
/* El espacio duro entre cifra y unidad (build_pages.py) evita que la «L» de
   «200 L» caiga sola al renglón siguiente, sin ensanchar la tabla. */
.table .mono{font-size:var(--text-xs);color:var(--blue-pale)}

/* --- Documentos --------------------------------------------------------------- */
.doc-list{display:grid;gap:var(--space-2)}
.doc-list--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.doc-link{
  display:flex;align-items:center;gap:var(--space-4);
  padding:15px 17px;background:var(--blue-deep);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
.doc-link:hover{border-color:var(--line-yellow);background:#0A2660;transform:translateX(3px)}
.doc-link__icon{
  width:38px;height:38px;flex:none;border-radius:var(--radius-full);
  display:grid;place-items:center;background:var(--yellow);color:var(--blue-abyss);
}
.doc-link__icon svg{width:19px;height:19px}
.doc-link__icon--warn{background:var(--white)}
.doc-link__text{min-width:0;flex:1}
.doc-link__text b{display:block;font-size:var(--text-sm);font-weight:600;line-height:1.35;color:var(--white)}
.doc-link__text small{display:block;font-size:var(--text-xs);color:var(--blue-mute);
  line-height:1.4;margin-top:3px}
.doc-link__out{flex:none;color:var(--blue-mute)}
.doc-link__out svg{width:16px;height:16px}
.doc-link:hover .doc-link__out{color:var(--yellow)}

/* --- Consulta de precio -------------------------------------------------------- */
.calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--blue-deep);
}
.calc__controls{padding:clamp(26px,3.4vw,44px);border-right:1px solid var(--line-soft)}
.calc__result{
  padding:clamp(26px,3.4vw,44px);background:var(--yellow);color:var(--blue-abyss);
  display:flex;flex-direction:column;justify-content:center;
}
.calc__result .k{
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:#123163;
}
.calc__total{
  font-family:var(--font-display);line-height:.9;letter-spacing:-.01em;
  font-size:clamp(3rem,1.8rem + 4.4vw,5rem);color:var(--blue-abyss);
  margin:var(--space-4) 0 var(--space-3);font-variant-numeric:tabular-nums;
}
.calc__note{font-size:var(--text-sm);color:#123163;max-width:38ch;font-weight:500}
.calc__rows{margin-top:var(--space-6)}
.calc__rows>div{
  display:flex;justify-content:space-between;gap:var(--space-4);
  padding:12px 0;border-top:1px solid rgba(4,19,47,.22);font-size:var(--text-sm);
}
.calc__rows dt{color:#123163}
.calc__rows dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin:0;text-align:right;color:var(--blue-abyss);font-weight:500}
.calc__actions{margin-top:var(--space-6);display:flex;gap:var(--space-3);flex-wrap:wrap}
.calc__actions .btn--primary{background:var(--blue-abyss);color:var(--yellow);border-color:var(--blue-abyss)}
.calc__actions .btn--outline{color:var(--blue-abyss);border-color:rgba(4,19,47,.4)}
.calc__actions .btn--outline:hover{background:rgba(4,19,47,.1);color:var(--blue-abyss);border-color:var(--blue-abyss)}
.calc__result :focus-visible{outline-color:var(--blue-abyss)}
@media (max-width:900px){
  .calc{grid-template-columns:1fr}
  .calc__controls{border-right:0;border-bottom:1px solid var(--line-soft)}
}

/* --- Nota ---------------------------------------------------------------------- */
/* Panel de tarjeta. El formulario de contacto la pedía y no existía: conservaba
   el relleno de 24px pero sin fondo ni borde, así que los campos salían
   sangrados sin nada que justificara la sangría. */
.surface{
  background:var(--blue-deep);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
}

.note{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-5);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  font-size:var(--text-sm);color:var(--blue-pale);line-height:1.6;
}
.note svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--yellow)}

/* --- Aviso emergente ------------------------------------------------------------ */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:var(--z-toast);
  transform:translate(-50%,calc(100% + 44px));
  display:flex;align-items:center;gap:var(--space-3);
  max-width:min(92vw,440px);padding:16px 20px;
  background:var(--yellow);color:var(--blue-abyss);
  border-radius:var(--radius-full);box-shadow:var(--shadow-lg);
  font-size:var(--text-sm);font-weight:500;
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) ease;
  opacity:0;
}
.toast[data-show="true"]{transform:translate(-50%,0);opacity:1}
.toast svg{width:19px;height:19px;flex:none}
.toast b{font-weight:700}

/* --- Migas ---------------------------------------------------------------------- */
.breadcrumbs{
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-mute);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.breadcrumbs a{color:var(--blue-mute);padding:10px 0;border-radius:3px}
.breadcrumbs a:hover{color:var(--yellow)}
.breadcrumbs svg{width:12px;height:12px;opacity:.5}
.breadcrumbs [aria-current]{color:var(--blue-pale)}

/* --- Cabecera de página interior -------------------------------------------------- */
.page-head{
  position:relative;overflow:hidden;background:var(--blue-deep);
  padding-top:clamp(32px,4.5vw,56px);padding-bottom:clamp(40px,5.5vw,72px);
  border-bottom:2px dashed var(--line-yellow);
}
.page-head::before{
  content:"";position:absolute;inset:-30% -10% auto 40%;height:460px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(31,111,235,.4),transparent 70%);
}
.page-head>*{position:relative}
.page-head .label{margin:var(--space-5) 0 var(--space-4)}
.page-head h1{max-width:14ch}
.page-head p{margin-top:var(--space-5);max-width:58ch;color:var(--blue-pale);font-size:var(--text-md)}

/* --- Estado vacío ----------------------------------------------------------------- */
.empty-state{
  grid-column:1/-1;text-align:center;padding:var(--space-9) var(--space-5);
  border:2px dashed var(--line-yellow);border-radius:var(--radius-md);
}
.empty-state svg{width:34px;height:34px;color:var(--yellow);margin:0 auto var(--space-5)}
.empty-state h3{margin-bottom:var(--space-3);font-size:2rem}
.empty-state p{color:var(--blue-mute);font-size:var(--text-sm);margin-bottom:var(--space-5)}

/* ==========================================================================
   8 · SECCIONES
   ========================================================================== */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(32px,5vw,72px);align-items:center;
}
.split h2{margin-bottom:var(--space-5)}
.split p{color:var(--blue-pale);margin-bottom:var(--space-4);max-width:52ch}

/* --- Ficha de producto -------------------------------------------------------------- */
.pd{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,4.5vw,72px);align-items:start;
}
.pd__visual{
  position:sticky;top:calc(var(--header-h) + 24px);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  background:radial-gradient(closest-side,rgba(31,111,235,.36),transparent 72%),var(--blue-abyss);
  aspect-ratio:1/1;display:grid;place-items:center;padding:var(--space-7);overflow:hidden;
}
.pd__visual img{
  position:relative;z-index:1;width:auto;height:100%;object-fit:contain;
  filter:drop-shadow(0 34px 50px rgba(2,10,28,.8));
}
.pd h1{margin:var(--space-4) 0;font-size:clamp(2.5rem,1.6rem + 3.4vw,4.25rem)}
.pd__type{font-size:var(--text-md);color:var(--blue-pale);margin-bottom:var(--space-5)}
.pd__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.pd h2{
  font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--blue-pale);
  margin:var(--space-8) 0 var(--space-5);padding-bottom:var(--space-3);
  border-bottom:1px dashed var(--line-yellow);
}
.pd__feats{display:grid;gap:12px}
.pd__feats li{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-md);color:var(--blue-pale)}
.pd__feats svg{width:18px;height:18px;margin-top:4px;flex:none;color:var(--yellow)}
.size-grid{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,146px),1fr))}
.size-card{
  padding:var(--space-5) var(--space-4);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);background:var(--blue-deep);
}
.size-card .s{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-mute);display:block}
.size-card .p{
  font-family:var(--font-display);font-size:1.75rem;color:var(--yellow);
  font-variant-numeric:tabular-nums;display:block;margin-top:8px;line-height:1;
}
.size-card .u{font-size:var(--text-xs);color:var(--blue-mute);display:block;margin-top:6px}
@media (max-width:900px){
  .pd{grid-template-columns:1fr}
  .pd__visual{position:static;aspect-ratio:4/3;max-width:460px;margin-inline:auto}
}

/* --- Contacto ------------------------------------------------------------------------ */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,4.5vw,64px);align-items:start;
}
/* minmax(0,1fr), no 1fr: una pista 1fr tiene mínimo automático de min-content,
   así que a 320px el correo de 218px ensanchaba la columna a 332px y con ella
   el documento entero. Con el 0 la columna puede encoger y el texto ajusta. */
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact-grid>*{min-width:0}
.contact-card{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-5);background:var(--blue-deep);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out),background var(--dur-fast) ease;
}
.contact-card+.contact-card{margin-top:var(--space-3)}
.contact-card:hover{border-color:var(--line-yellow);background:#0A2660;transform:translateX(3px)}
.contact-card__icon{
  width:48px;height:48px;flex:none;border-radius:var(--radius-full);
  display:grid;place-items:center;background:var(--yellow);color:var(--blue-abyss);
}
.contact-card__icon svg{width:21px;height:21px}
.contact-card .k{
  display:block;font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--blue-mute);
}
/* «contacto@pinturasoptimus.com» mide 265px a 17px y sólo hay 237px libres en
   la tarjeta a 375px: se partía a media palabra («…optimus.c / om»). Con el
   clamp cabe entero en una línea desde 375px; el corte queda de último
   recurso para pantallas aún más estrechas. */
/* min-width:0 en el hijo flexible y overflow-wrap:anywhere: break-word no
   reduce el tamaño min-content, así que el correo mantenía la tarjeta en 306px
   dentro de 282px y ensanchaba el documento a 320px de ancho. Con esto sólo
   parte cuando de verdad no cabe (a 375px sigue entrando en una línea). */
.contact-card>span{min-width:0}
.contact-card .v{font-size:clamp(var(--text-sm),3.6vw,var(--text-md));font-weight:600;
  overflow-wrap:anywhere;color:var(--white)}
.hours{
  margin-top:var(--space-3);padding:var(--space-5);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--blue-deep);
}
.hours h3{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--blue-pale);
  margin-bottom:var(--space-4);
}
.hours .row{
  display:flex;justify-content:space-between;gap:var(--space-4);
  padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:var(--text-sm);
}
.hours .row:last-child{border-bottom:0}
.hours .row dt{color:var(--blue-mute)}
.hours .row dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--white)}
.hours .closed{color:var(--blue-mute);font-weight:400}

/* --- Pie -------------------------------------------------------------------------------- */
.site-footer{background:var(--blue-abyss);padding-top:var(--space-9);margin-top:0}
.site-footer a{color:var(--blue-pale)}
.site-footer a:hover{color:var(--yellow)}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:var(--space-7);padding-bottom:var(--space-8);
}
.footer-brand img{height:26px;width:auto;margin-bottom:var(--space-5)}
.footer-brand p{color:var(--blue-mute);font-size:var(--text-sm);max-width:34ch}
.footer-col h2{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--yellow);margin-bottom:var(--space-4);
}
/* Los correos (contacto@pinturasoptimus.com, 211px) no caben en la columna de
   169px entre ~900 y ~1200px de ancho: sin esto se salían y se recortaban. */
.footer-col a{display:block;padding:11px 0;font-size:var(--text-sm);overflow-wrap:anywhere}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-4);
  align-items:center;justify-content:space-between;
  padding-block:var(--space-6);border-top:1px solid var(--line-soft);
}
.footer-bottom p{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--blue-mute)}
.socials{display:flex;gap:var(--space-2)}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;position:relative;
  border:1px solid var(--line);border-radius:var(--radius-full);
  transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
.socials a::after{content:"";position:absolute;inset:-3px}
.socials a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--blue-abyss)}
.socials svg{width:17px;height:17px}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;gap:var(--space-6)}}

/* --- Mantenimiento ------------------------------------------------------------------------ */
.maintenance{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:grid;place-items:center;padding:var(--gutter);
  background:var(--blue);color:var(--blue-pale);text-align:center;
}
.maintenance__card{max-width:520px}
.maintenance img{height:34px;width:auto;margin:0 auto var(--space-7)}
.maintenance h1{font-size:clamp(2.25rem,1.4rem + 3.4vw,4rem);margin-bottom:var(--space-5)}
.maintenance p{color:var(--blue-pale);margin-bottom:var(--space-7)}
.maintenance .dots{display:flex;gap:9px;justify-content:center;margin-bottom:var(--space-6)}
.maintenance .dots span{
  width:10px;height:10px;border-radius:50%;background:var(--yellow);
  animation:pulse-dot 1.3s var(--ease-out) infinite;
}
.maintenance .dots span:nth-child(2){animation-delay:.18s;background:var(--white)}
.maintenance .dots span:nth-child(3){animation-delay:.36s;background:var(--blue-bright)}
@keyframes pulse-dot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-9px);opacity:1}}

/* ==========================================================================
   9 · MOVIMIENTO
   ========================================================================== */
/* El contenido solo se oculta si el JS confirmó que puede revelarlo:
   sin JS, o si algo falla, todo se ve. */
:root.reveal-ready [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
:root.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}
:root.reveal-ready [data-reveal-delay="1"]{transition-delay:70ms}
:root.reveal-ready [data-reveal-delay="2"]{transition-delay:140ms}
:root.reveal-ready [data-reveal-delay="3"]{transition-delay:210ms}
:root.reveal-ready [data-reveal-delay="4"]{transition-delay:280ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  :root.reveal-ready [data-reveal]{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   10 · IMPRESIÓN
   ========================================================================== */
@media print{
  .site-header,.site-footer,.ticker,.skip-link,.toast,.btn,.pour__canvas,.pour__hint{display:none!important}
  html,body{background:#fff;color:#000}
  h1,h2,h3,.product-card__title,.table .name{color:#0B3A8C}
  .pour__stage{position:static;height:auto;margin-bottom:0}
  .pour__beat{min-height:0}
  .product-card,.table-wrap,.calc,.feature{background:#fff;border-color:#999}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}