@charset "UTF-8";
/* ==========================================================================
   PINTURAS OPTIMUS · SISTEMA DE DISEÑO "LABORATORIO DE COLOR" (2026)
   --------------------------------------------------------------------------
   Dirección : fabricante industrial con acabado premium. Fondo claro y limpio,
               bloques en azul noche, el amarillo del disco del logo como
               acento y el color real de cada familia como protagonista.
   Tipografía: Archivo expandida (titulares) · Inter (texto) · JetBrains Mono
               (datos y etiquetas).
   Movimiento: assets/motion.js (GSAP + ScrollTrigger + Lenis). Todo se lee
               completo sin JS y con movimiento reducido.
   --------------------------------------------------------------------------
    1 Tokens        2 Base          3 Tipografía     4 Utilidades
    5 Botones       6 Cabecera      7 Menú móvil     8 Héroe
    9 Marquesina   10 Manifiesto   11 Familias      12 Tarjetas de producto
   13 Proceso      14 ISO          15 Precios       16 FAQ
   17 Llamado      18 Pie          19 Encabezado de página
   20 Catálogo     21 Producto     22 Calculadora y tabla
   23 Formularios  24 Legales      25 Cookies       26 Buscador rápido
   27 Avisos y utilidades flotantes 28 Movimiento   29 Impresión
   ========================================================================== */

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

  /* --- Marca ------------------------------------------------------------- */
  --navy:#061640;          /* azul noche: bloques oscuros */
  --navy-2:#0A2360;        /* superficies sobre azul noche */
  --navy-3:#123080;
  --brand:#0B3A8C;         /* azul del envase */
  --blue:#1450D2;          /* azul de acción (4.5:1 sobre blanco y papel) */
  --blue-bright:#2F6BFF;
  --blue-soft:#E6EDFF;
  --yellow:#FFD400;        /* disco del logo */
  --yellow-2:#FFE45C;
  --magenta:#E4007C;       /* el trazo rosa de la etiqueta VinLac */

  /* --- Neutros ------------------------------------------------------------ */
  --bg:#F4F6FA;
  --paper:#FFFFFF;
  --ink:#0A1330;
  --ink-2:#26304D;
  --muted:#4F5A76;
  --muted-2:#6B7591;
  --line:rgba(10,19,48,.10);
  --line-2:rgba(10,19,48,.16);

  /* --- Sobre azul noche --------------------------------------------------- */
  --on-dark:#FFFFFF;
  --on-dark-2:#C9D4F0;
  --on-dark-3:#94A3CC;
  --line-dark:rgba(255,255,255,.12);
  --line-dark-2:rgba(255,255,255,.2);

  --ok:#11845B;
  --danger:#C62A2A;

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

  --fs-2xs:.75rem;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:clamp(1.125rem,1rem + .5vw,1.375rem);
  --fs-h4:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-h3:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);
  --fs-h2:clamp(2.25rem,1.3rem + 3.6vw,4.5rem);
  --fs-h1:clamp(2.75rem,1.2rem + 6vw,7.25rem);
  --fs-mega:clamp(3.25rem,1rem + 9.5vw,11rem);

  /* --- Espacio y forma ---------------------------------------------------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --sec-y:clamp(80px,10vw,160px);
  --gutter:clamp(16px,4vw,48px);
  --container:1320px;
  --narrow:780px;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:36px;
  --r-full:999px;

  --shadow-1:0 1px 2px rgba(10,19,48,.06),0 2px 8px rgba(10,19,48,.05);
  --shadow-2:0 12px 32px -12px rgba(10,19,48,.22),0 2px 6px rgba(10,19,48,.05);
  --shadow-3:0 40px 80px -30px rgba(6,22,64,.45);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms;
  --t-base:280ms;
  --t-slow:640ms;

  --hdr-h:76px;
  --z-hdr:100;
  --z-menu:120;
  --z-modal:200;
  --z-toast:300;
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
  background:var(--bg);
}
html:not(.lenis){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:not(.lenis){scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1;display:block}
img,svg,video,canvas,picture{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;padding:0}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse}
[hidden]{display:none!important}
::selection{background:var(--yellow);color:var(--navy)}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.is-dark :focus-visible,.sec--dark :focus-visible,.site-footer :focus-visible,
.hero :focus-visible,.phead :focus-visible{outline-color:var(--yellow)}

/* Transición entre páginas del mismo sitio (navegadores que la soportan) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

.skip-link{
  position:fixed;left:var(--s-4);top:-80px;z-index:calc(var(--z-modal) + 10);
  background:var(--yellow);color:var(--navy);padding:12px 20px;border-radius:var(--r-full);
  font-weight:700;font-size:var(--fs-sm);transition:top var(--t-base) var(--ease);
}
.skip-link:focus{top:var(--s-3)}

/* ==========================================================================
   3 · TIPOGRAFÍA
   ========================================================================== */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-stretch:118%;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.02;
  color:var(--ink);
  text-wrap:balance;
}
h1,.display--h1{font-size:var(--fs-h1)}
h2,.display--h2{font-size:var(--fs-h2)}
h3,.display--h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.08}
h4{
  font-family:var(--font-display);font-stretch:108%;font-weight:700;
  font-size:var(--fs-h4);letter-spacing:-.015em;line-height:1.2;color:var(--ink);
}
.display--mega{font-size:var(--fs-mega);line-height:.92;letter-spacing:-.045em}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}
.is-dark strong,.sec--dark strong{color:#fff}

.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--muted);max-width:56ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 3px rgba(255,212,0,.25);flex:none;
}
.eyebrow--plain::before{display:none}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.accent{color:var(--blue)}
.hl{
  background:linear-gradient(transparent 62%,rgba(255,212,0,.55) 62%);
  padding-inline:.06em;
}

/* Titular con una palabra resaltada en amarillo (sobre oscuro) o azul (claro) */
.t-accent{color:var(--blue)}
.is-dark .t-accent,.sec--dark .t-accent,.hero .t-accent,.phead .t-accent{color:var(--yellow)}
.t-outline{
  color:transparent;-webkit-text-stroke:2px currentColor;
}

/* ==========================================================================
   4 · UTILIDADES Y SECCIONES
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(var(--narrow) + var(--gutter) * 2)}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sec{padding-block:var(--sec-y);position:relative}
.sec--tight{padding-block:clamp(56px,6vw,96px)}
.sec--paper{background:var(--paper)}
.sec--dark,.is-dark{background:var(--navy);color:var(--on-dark-2)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4,
.is-dark h1,.is-dark h2,.is-dark h3,.is-dark h4{color:#fff}
.sec--dark .lead,.is-dark .lead{color:var(--on-dark-2)}
.sec--dark .eyebrow,.is-dark .eyebrow{color:var(--yellow)}
.sec--dark .muted,.is-dark .muted{color:var(--on-dark-3)}
.sec--line{border-top:1px solid var(--line)}
.sec--dark.sec--line{border-top-color:var(--line-dark)}

.sec-head{
  display:grid;gap:var(--s-5) var(--s-8);align-items:end;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  margin-bottom:clamp(40px,5vw,72px);
}
.sec-head h2{margin-top:var(--s-4)}
.sec-head > p{color:var(--muted);font-size:var(--fs-md);max-width:48ch;justify-self:end}
.sec--dark .sec-head > p{color:var(--on-dark-2)}
.sec-head--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-head--center > p{justify-self:center}
@media (max-width:860px){
  .sec-head{grid-template-columns:1fr}
  .sec-head > p{justify-self:start}
}

.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.grid-2{display:grid;gap:var(--s-5);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid;gap:var(--s-5);grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{display:grid;gap:var(--s-5);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.icon{width:20px;height:20px;flex:none}
svg.icon-sm{width:16px;height:16px}

.link{
  color:var(--blue);font-weight:600;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  transition:background-size var(--t-base) var(--ease);
}
.link:hover{background-size:100% 1.5px}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--blue);
}
.link-arrow svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.sec--dark .link-arrow,.is-dark .link-arrow{color:var(--yellow)}

/* Grano fino sobre los bloques oscuros: les quita lo digital plano */
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   5 · BOTONES
   ========================================================================== */
.btn{
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:var(--r-full);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:-.005em;line-height:1.1;
  white-space:nowrap;cursor:pointer;isolation:isolate;overflow:hidden;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
/* barrido de pintura al pasar el puntero */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--btn-sweep,rgba(255,255,255,.14));
  transform:translateX(-101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:none}
.btn svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease)}
.btn:hover svg.arr{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn--primary{--btn-bg:var(--blue);--btn-sweep:var(--brand)}
.btn--primary:hover{box-shadow:0 14px 30px -12px rgba(20,80,210,.7)}
.btn--yellow{--btn-bg:var(--yellow);--btn-fg:var(--navy);--btn-sweep:var(--yellow-2)}
.btn--yellow:hover{box-shadow:0 14px 30px -12px rgba(255,212,0,.7)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-2);--btn-sweep:rgba(10,19,48,.06)}
.btn--ghost:hover{--btn-bd:var(--ink)}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35);--btn-sweep:rgba(255,255,255,.1)}
.btn--ghost-light:hover{--btn-bd:#fff}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-sweep:var(--blue-soft)}
.btn--lg{min-height:60px;padding:18px 32px;font-size:var(--fs-base)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:var(--fs-xs)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

.icon-btn{
  display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--line-2);color:var(--ink);
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base);
}
.icon-btn:hover{background:rgba(10,19,48,.06);border-color:var(--ink)}
.icon-btn svg{width:20px;height:20px}

/* ==========================================================================
   6 · CABECERA
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto;z-index:var(--z-hdr);height:var(--hdr-h);
  color:var(--ink);
  transition:transform .45s var(--ease),background-color .35s var(--ease),
             box-shadow .35s var(--ease),color .35s var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(244,246,250,.78);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line);
  opacity:1;transition:opacity .35s var(--ease);
}
.hdr__in{height:100%;display:flex;align-items:center;gap:var(--s-5)}
.hdr__brand{display:flex;align-items:center;flex:none;margin-right:auto;padding-block:8px}
.hdr__brand img{height:26px;width:auto}
.hdr__brand .logo-light{display:none}
.hdr__nav{display:flex;align-items:center;gap:2px}
.hdr__nav a{
  position:relative;padding:10px 14px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:500;color:inherit;opacity:.82;
  transition:opacity var(--t-fast),background-color var(--t-base) var(--ease);
}
.hdr__nav a:hover{opacity:1;background:rgba(10,19,48,.06)}
.hdr__nav a[aria-current="page"]{opacity:1;font-weight:600}
.hdr__nav a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px rgba(10,19,48,.1);
}
.hdr__actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
.hdr__search{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 14px;
  border-radius:var(--r-full);border:1.5px solid var(--line-2);
  font-size:var(--fs-xs);color:inherit;opacity:.9;
  transition:border-color var(--t-base),background-color var(--t-base);
}
.hdr__search:hover{border-color:currentColor;opacity:1}
.hdr__search svg{width:17px;height:17px}
.hdr__search kbd{
  font-family:var(--font-mono);font-size:11px;padding:2px 7px;border-radius:6px;
  border:1px solid currentColor;opacity:.55;
}
.hdr__cta{min-height:44px;padding:10px 20px}
.hdr__toggle{display:none}

/* Arriba del todo, sobre el bloque oscuro de cada página: transparente y claro */
.hdr[data-top="true"]{color:#fff}
.hdr[data-top="true"]::before{opacity:0}
.hdr[data-top="true"] .logo-dark{display:none}
.hdr[data-top="true"] .logo-light{display:block}
.hdr[data-top="true"] .hdr__nav a:hover{background:rgba(255,255,255,.1)}
.hdr[data-top="true"] .hdr__search{border-color:rgba(255,255,255,.3)}
.hdr[data-top="true"] .hdr__search:hover{border-color:#fff}
.hdr[data-top="true"] .icon-btn{color:#fff;border-color:rgba(255,255,255,.3)}
.hdr[data-top="true"] .hdr__nav a[aria-current="page"]::after{box-shadow:none}
.hdr[data-hidden="true"]{transform:translateY(-100%)}
body[data-menu="open"] .hdr{transform:none}

/* Barra de avance de lectura */
.progress{
  position:fixed;left:0;top:0;z-index:calc(var(--z-hdr) + 1);height:3px;width:100%;
  background:linear-gradient(90deg,var(--yellow),var(--blue-bright));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}

@media (max-width:1180px){
  .hdr__search span,.hdr__search kbd{display:none}
  .hdr__search{width:44px;padding:0;justify-content:center}
}
@media (max-width:1024px){
  .hdr__nav{display:none}
  .hdr__toggle{display:inline-grid}
  .hdr__cta{display:none}
}

/* ==========================================================================
   7 · MENÚ MÓVIL (pantalla completa)
   ========================================================================== */
.mmenu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;
  padding:calc(var(--hdr-h) + 12px) var(--gutter) max(28px,env(safe-area-inset-bottom));
  clip-path:circle(0% at calc(100% - 44px) 38px);
  visibility:hidden;
  transition:clip-path .7s var(--ease-io),visibility 0s linear .7s;
  overflow-y:auto;
}
.mmenu[data-open="true"]{
  clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible;
  transition:clip-path .7s var(--ease-io),visibility 0s;
}
.mmenu__close{position:absolute;top:14px;right:var(--gutter);color:#fff;border-color:rgba(255,255,255,.3)}
.mmenu__close:hover{background:rgba(255,255,255,.1);border-color:#fff}
.mmenu__logo{position:absolute;top:24px;left:var(--gutter);height:26px;width:auto}
.mmenu nav{display:flex;flex-direction:column;margin-top:var(--s-4)}
.mmenu nav a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  font-family:var(--font-display);font-stretch:118%;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2rem,9vw,3.25rem);line-height:1.15;padding-block:6px;color:#fff;
  border-bottom:1px solid var(--line-dark);
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),color var(--t-fast);
}
.mmenu nav a small{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.14em;color:var(--on-dark-3)}
.mmenu nav a[aria-current="page"]{color:var(--yellow)}
.mmenu[data-open="true"] nav a{opacity:1;transform:none}
.mmenu[data-open="true"] nav a:nth-child(1){transition-delay:.18s}
.mmenu[data-open="true"] nav a:nth-child(2){transition-delay:.22s}
.mmenu[data-open="true"] nav a:nth-child(3){transition-delay:.26s}
.mmenu[data-open="true"] nav a:nth-child(4){transition-delay:.30s}
.mmenu[data-open="true"] nav a:nth-child(5){transition-delay:.34s}
.mmenu[data-open="true"] nav a:nth-child(6){transition-delay:.38s}
.mmenu[data-open="true"] nav a:nth-child(7){transition-delay:.42s}
.mmenu[data-open="true"] nav a:nth-child(8){transition-delay:.46s}
.mmenu__foot{margin-top:auto;padding-top:var(--s-6);display:grid;gap:var(--s-3)}
.mmenu__foot a{color:var(--on-dark-2);font-size:var(--fs-sm)}
.mmenu__foot .btn{color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .mmenu,.mmenu[data-open="true"]{transition:none}
  .mmenu nav a{transition:none;opacity:1;transform:none}
}

/* ==========================================================================
   8 · HÉROE (inicio)
   ========================================================================== */
/* Pista alta + escenario anclado: assets/logo-pintura.js escribe --text
   y --outro (0 → 1). Sin JS o con movimiento reducido los valores por
   defecto dejan todo el texto a la vista y el héroe mide una pantalla. */
.hero{
  --text:1;--outro:0;
  --logo-w:min(78vw,980px);
  position:relative;background:var(--navy);color:var(--on-dark-2);overflow:clip;
}
@media (prefers-reduced-motion:no-preference){.hero[data-logo]{height:290svh}}
.hero[data-mode="static"]{height:auto!important}
.hero__stage{
  position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 70% at 78% 40%,rgba(47,107,255,.45),transparent 70%),
    radial-gradient(40% 50% at 12% 90%,rgba(255,212,0,.16),transparent 70%),
    var(--navy);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__canvas.is-on{opacity:1}
.hero__stage::before{ /* velo para que el texto siempre tenga contraste sobre la pintura */
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,22,64,.92) 0%,rgba(6,22,64,.62) 45%,rgba(6,22,64,.15) 100%),
    linear-gradient(0deg,rgba(6,22,64,.85) 0%,transparent 30%);
}
/* conforme se forma el logo, la pintura se oscurece y quedan las estrellas */
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 47%,rgba(20,60,160,.35),transparent 70%),var(--navy);
  opacity:calc((1 - var(--text)) * .92);
}
.hero__paint{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero__fade{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  opacity:var(--text);transform:translate3d(0,calc((1 - var(--text)) * -64px),0);
}
.hero[data-text="off"] .hero__fade{visibility:hidden}
.hero__outro{
  position:absolute;left:0;right:0;z-index:2;
  top:calc(46% + var(--logo-w) * .084 + clamp(24px,4.5vh,52px));
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-inline:var(--gutter);text-align:center;pointer-events:none;
  opacity:var(--outro);transform:translate3d(0,calc((1 - var(--outro)) * 18px),0);
}
.hero__outro .eyebrow{color:var(--yellow);font-size:clamp(.75rem,.6rem + .4vw,.9375rem)}
.hero__outro span{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3)}
.hero__in{
  flex:1;display:grid;align-items:center;gap:var(--s-7);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  padding-top:calc(var(--hdr-h) + clamp(24px,5vw,64px));
  padding-bottom:clamp(24px,4vw,48px);
}
.hero__copy{position:relative;z-index:2}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,3vw,36px)}
.chip{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-dark-2);color:#fff;background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color var(--t-base),border-color var(--t-base);
}
.chip svg{width:15px;height:15px;color:var(--yellow)}
a.chip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.hero h1{color:#fff;font-size:clamp(2.6rem,1rem + 4.6vw,6rem);line-height:.98;letter-spacing:-.045em;font-stretch:112%}
.hero h1 .line{display:block}
.hero__lead{margin-top:clamp(20px,2.6vw,32px);color:var(--on-dark-2);font-size:var(--fs-lg);max-width:44ch}
.hero__ctas{margin-top:clamp(28px,3.4vw,44px)}

/* Las cubetas: composición de tres, flotan y responden al puntero */
.hero__stack{position:relative;aspect-ratio:1/1.08;width:118%;max-width:640px;justify-self:end;margin-right:-4%}
.hero__can{
  position:absolute;will-change:transform;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));
}
.hero__can img{width:100%;height:auto}
.hero__can--a{width:58%;left:21%;top:4%;z-index:3}
.hero__can--b{width:44%;left:-2%;top:26%;z-index:2}
.hero__can--c{width:44%;right:-4%;top:30%;z-index:1}
.hero__halo{
  position:absolute;left:50%;top:52%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,212,0,.35) 0%,rgba(255,212,0,.08) 40%,transparent 68%);
}
.hero__ring{
  position:absolute;left:50%;top:52%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(255,255,255,.18);z-index:0;
}
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hero__can--a{animation:flota 6s ease-in-out infinite}
.hero__can--b{animation:flota 7s ease-in-out -2s infinite}
.hero__can--c{animation:flota 8s ease-in-out -4s infinite}

.hero__bar{
  position:relative;z-index:2;border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.hero__stat{padding:clamp(18px,2.2vw,28px) clamp(12px,2vw,24px) clamp(20px,2.4vw,30px) 0}
.hero__stat + .hero__stat{padding-left:clamp(12px,2vw,24px);border-left:1px solid var(--line-dark)}
.hero__stat b{
  display:block;font-family:var(--font-display);font-stretch:118%;font-weight:800;
  font-size:clamp(1.75rem,1rem + 2vw,2.75rem);letter-spacing:-.04em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.hero__stat span{display:block;margin-top:8px;font-size:var(--fs-xs);color:var(--on-dark-3)}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:clamp(96px,11vw,132px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-3);
  writing-mode:vertical-rl;
}
.hero__scroll i{
  display:block;width:1px;height:56px;background:rgba(255,255,255,.22);position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--yellow);
  animation:baja 2.2s var(--ease-io) infinite;
}
@keyframes baja{to{top:100%}}

@media (max-width:960px){
  .hero[data-mode="live"] .hero__stack{display:none}
  .hero[data-mode="live"] .hero__in{padding-top:calc(var(--hdr-h) + 16px)}
  .hero__in{grid-template-columns:1fr;gap:var(--s-5)}
  .hero__stack{justify-self:center;max-width:420px;aspect-ratio:1.25/1;margin-top:-8px}
  .hero__can--a{width:46%;left:27%;top:0}
  .hero__can--b{width:36%;left:2%;top:18%}
  .hero__can--c{width:36%;right:2%;top:20%}
  .hero__scroll{display:none}
  .hero__stage::before{background:linear-gradient(180deg,rgba(6,22,64,.9) 0%,rgba(6,22,64,.55) 55%,rgba(6,22,64,.92) 100%)}
}
@media (max-width:640px){
  .hero__bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__stat:nth-child(3){padding-left:0;border-left:0}
  .hero__stat:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .hero__ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .hero__can,.hero__scroll i::after{animation:none}
}

/* ==========================================================================
   9 · MARQUESINA
   ========================================================================== */
.marquee{
  position:relative;overflow:hidden;background:var(--yellow);color:var(--navy);
  border-block:1px solid rgba(6,22,64,.12);
}
.marquee--tilt{transform:rotate(-1.6deg) scale(1.03);margin-block:-14px;z-index:3;box-shadow:0 20px 40px -20px rgba(6,22,64,.4)}
.marquee__track{display:flex;width:max-content;animation:desliza 38s linear infinite}
.marquee__track > span{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding:18px clamp(10px,1.5vw,20px);
  font-family:var(--font-display);font-stretch:118%;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.25rem,.9rem + 1.6vw,2.25rem);white-space:nowrap;text-transform:uppercase;
}
.marquee__track i{
  display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--navy);flex:none;
  box-shadow:inset 0 0 0 .14em var(--yellow),0 0 0 .06em var(--navy);
}
.marquee[data-paused="true"] .marquee__track{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}
.marquee__pause{
  position:absolute;right:10px;top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:var(--yellow);z-index:2;
}
.marquee__pause svg{width:16px;height:16px}
.marquee__pause .i-play{display:none}
.marquee[data-paused="true"] .i-play{display:block}
.marquee[data-paused="true"] .i-pause{display:none}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ==========================================================================
   10 · MANIFIESTO (el texto se "pinta" con el scroll)
   ========================================================================== */
.manifesto{text-align:left}
.manifesto__lines{margin-top:var(--s-6)}
.paint-text{
  display:block;font-family:var(--font-display);font-stretch:125%;font-weight:900;
  font-size:var(--fs-mega);line-height:.95;letter-spacing:-.05em;
  color:var(--ink);
}
/* Con JS: arranca como contorno y la "brocha" lo rellena de izquierda a derecha */
.js-motion .paint-text{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(10,19,48,.22);
  background:linear-gradient(90deg,var(--c,var(--ink)) 0 50%,transparent 50% 100%);
  background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
}
.manifesto__note{
  margin-top:clamp(28px,4vw,56px);max-width:46ch;margin-left:auto;
  font-size:var(--fs-lg);color:var(--muted);line-height:1.55;
}
.manifesto__note b{color:var(--ink)}

/* ==========================================================================
   11 · FAMILIAS (galería horizontal anclada en escritorio)
   ========================================================================== */
.fam{overflow:hidden}
.fam__pin{position:relative}
.fam__track{
  display:flex;gap:clamp(16px,2vw,28px);
  padding-inline:var(--gutter);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:var(--gutter);
  padding-bottom:8px;
}
.fam__track::-webkit-scrollbar{display:none}
.js-pin .fam__track{overflow:visible;scroll-snap-type:none;width:max-content}
.fam-card{
  --c:var(--blue);
  position:relative;flex:none;scroll-snap-align:start;
  width:min(84vw,460px);min-height:clamp(440px,62vh,600px);
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;padding:clamp(24px,2.6vw,36px);
  background:var(--navy-2);color:#fff;
  transition:transform .6s var(--ease);
}
.fam-card::before{ /* charco de color de la familia */
  content:"";position:absolute;z-index:-1;width:140%;aspect-ratio:1;left:-20%;top:42%;
  border-radius:50%;background:radial-gradient(circle,var(--c) 0%,color-mix(in srgb,var(--c) 40%,transparent) 42%,transparent 70%);
  opacity:.9;transition:transform .9s var(--ease),opacity .6s;
}
.fam-card:hover::before{transform:scale(1.15) translateY(-6%)}
.fam-card__num{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.16em;color:var(--on-dark-3)}
.fam-card h3{
  color:#fff;margin-top:var(--s-3);font-size:clamp(2rem,1.2rem + 2.2vw,3.25rem);letter-spacing:-.04em;
  overflow-wrap:anywhere;
}
.fam-card p{margin-top:var(--s-3);color:var(--on-dark-2);max-width:30ch}
.fam-card__img{
  position:absolute;right:-6%;bottom:-4%;width:58%;z-index:-1;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
  transition:transform .8s var(--ease);
}
.fam-card:hover .fam-card__img{transform:translateY(-10px) rotate(-3deg)}
.fam-card__foot{margin-top:auto;display:flex;align-items:center;gap:var(--s-3)}
.fam-card__count{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  padding:8px 12px;border-radius:var(--r-full);background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.fam-card__go{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--navy);transition:transform var(--t-base) var(--ease),background-color var(--t-base);
}
.fam-card__go svg{width:20px;height:20px}
.fam-card:hover .fam-card__go{transform:rotate(-45deg);background:var(--yellow)}
.fam-card--intro{
  background:transparent;color:var(--ink);padding-left:0;width:min(84vw,420px);justify-content:flex-end;
}
.fam-card--intro::before{display:none}
.fam-card--intro h2{color:var(--ink);font-size:var(--fs-h2)}
.fam-card--intro p{color:var(--muted);max-width:34ch}
.fam__hint{
  display:flex;align-items:center;gap:10px;margin-top:var(--s-5);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.fam__hint svg{width:18px;height:18px}
.fam__bar{height:2px;background:var(--line);margin:var(--s-6) var(--gutter) 0;border-radius:2px;overflow:hidden}
.fam__bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:860px){.fam-card--intro{width:84vw}}

/* ==========================================================================
   12 · TARJETAS DE PRODUCTO
   ========================================================================== */
.pgrid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
.pcard{
  --c:var(--blue);
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.pcard__media{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--c) 34%,#fff) 0%,color-mix(in srgb,var(--c) 10%,#fff) 46%,#F6F8FC 72%);
}
.pcard__media::after{ /* línea de piso */
  content:"";position:absolute;left:18%;right:18%;bottom:12%;height:14px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(10,19,48,.28),transparent 70%);
  transition:transform .6s var(--ease),opacity .6s;
}
.pcard__media img{
  position:relative;z-index:1;width:62%;height:auto;margin-top:-6%;
  transition:transform .7s var(--ease);
}
.pcard:hover .pcard__media img{transform:translateY(-12px) scale(1.04) rotate(-2deg)}
.pcard:hover .pcard__media::after{transform:scale(.8);opacity:.6}
.pcard__tags{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;justify-content:space-between;gap:8px}
.tag{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.85);color:var(--ink);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.tag--doc{background:var(--navy);color:#fff;border-color:transparent}
.tag--doc svg{width:13px;height:13px;color:var(--yellow)}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.8vw,24px)}
.pcard__title{font-size:1.375rem;letter-spacing:-.03em;line-height:1.1}
.pcard__title a::after{content:"";position:absolute;inset:0;z-index:3}
.pcard__type{margin-top:6px;font-size:var(--fs-xs);color:var(--muted)}
.pcard__sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-4)}
.pcard__sizes span{
  font-family:var(--font-mono);font-size:11px;padding:4px 9px;border-radius:6px;
  background:var(--bg);color:var(--ink-2);border:1px solid var(--line);
}
.pcard__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);
  margin-top:auto;padding-top:var(--s-5);
}
.pcard__price small{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.pcard__price b{
  display:block;margin-top:2px;font-family:var(--font-display);font-stretch:112%;font-weight:800;
  font-size:1.375rem;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.pcard__go{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  transition:background-color var(--t-base),color var(--t-base),transform var(--t-base) var(--ease);
}
.pcard__go svg{width:18px;height:18px}
.pcard:hover .pcard__go{background:var(--ink);color:#fff;transform:rotate(-45deg)}
.sec--dark .pcard{border-color:transparent}

/* ==========================================================================
   13 · PROCESO (título anclado + pasos)
   ========================================================================== */
.process{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px)}
.process__aside{position:sticky;top:calc(var(--hdr-h) + 32px);align-self:start}
.process__aside h2{margin-top:var(--s-4)}
.process__aside p{margin-top:var(--s-5);color:var(--muted);max-width:40ch;font-size:var(--fs-md)}
.steps{position:relative;display:grid;gap:var(--s-5);counter-reset:paso}
.step{
  position:relative;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  counter-increment:paso;
}
.step::before{
  content:"0" counter(paso);display:block;margin-bottom:var(--s-4);
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--blue);
}
.step h3{font-size:var(--fs-h3)}
.step > p{margin-top:var(--s-3);color:var(--muted)}
.checklist{display:grid;gap:10px;margin-top:var(--s-5)}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2)}
.checklist li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231450D2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.sec--dark .checklist li,.is-dark .checklist li{color:var(--on-dark-2)}
.sec--dark .checklist li::before,.is-dark .checklist li::before{
  background-color:rgba(255,212,0,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD400' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width:900px){
  .process{grid-template-columns:1fr}
  .process__aside{position:static}
}

/* Tarjetas de característica (servicios, empresa) */
.feature{
  position:relative;padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.feature__icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);margin-bottom:var(--s-5);
  transition:transform .5s var(--ease),background-color .3s,color .3s;
}
.feature:hover .feature__icon{transform:rotate(-8deg) scale(1.06);background:var(--yellow);color:var(--navy)}
.feature__icon svg{width:24px;height:24px}
.feature h3{font-size:var(--fs-h4);font-stretch:112%}
.feature p{margin-top:var(--s-3);color:var(--muted);font-size:var(--fs-sm)}
.sec--dark .feature{background:var(--navy-2);border-color:var(--line-dark)}
.sec--dark .feature p{color:var(--on-dark-2)}
.sec--dark .feature__icon{background:rgba(255,255,255,.08);color:var(--yellow)}

/* ==========================================================================
   14 · ISO (sellos que giran)
   ========================================================================== */
.iso-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(3,minmax(0,1fr))}
.iso-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,36px);border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--navy-2),var(--navy) 70%);
  border:1px solid var(--line-dark);color:var(--on-dark-2);overflow:hidden;
}
.iso-card::after{
  content:"";position:absolute;inset:auto -30% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.35),transparent 65%);pointer-events:none;
}
.seal{position:relative;width:132px;height:132px;margin-bottom:var(--s-6);color:var(--yellow)}
.seal svg.seal__ring{position:absolute;inset:0;width:100%;height:100%;animation:gira 24s linear infinite}
.seal svg.seal__ring text{font-family:var(--font-mono);font-size:8.6px;letter-spacing:2.6px;fill:currentColor;text-transform:uppercase}
.seal__core{
  position:absolute;inset:22px;border-radius:50%;display:grid;place-items:center;align-content:center;
  background:var(--yellow);color:var(--navy);text-align:center;
  box-shadow:0 0 0 6px rgba(255,212,0,.14);
}
.seal__core small{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.2em}
.seal__core b{font-family:var(--font-display);font-stretch:112%;font-weight:900;font-size:1.5rem;letter-spacing:-.04em;line-height:1}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.seal svg.seal__ring{animation:none}}
.iso-card__tema{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.iso-card__tema svg{width:16px;height:16px}
.iso-card h3{color:#fff;margin-top:var(--s-3);font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem)}
.iso-card p{margin-top:var(--s-3);font-size:var(--fs-sm)}
.iso-card .checklist{margin-top:var(--s-5)}
.iso-card .checklist li{color:var(--on-dark-2)}
.iso-card .checklist li::before{
  background-color:rgba(255,212,0,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD400' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width:900px){.iso-grid{grid-template-columns:1fr}}

/* Tira ISO del pie */
.iso-strip{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:var(--s-5);
  padding:10px 16px;border-radius:var(--r-full);border:1px solid var(--line-dark-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  transition:background-color var(--t-base),border-color var(--t-base);
}
.iso-strip:hover{background:rgba(255,255,255,.08);border-color:#fff}
.iso-strip svg{width:16px;height:16px;color:var(--yellow)}
.iso-strip span + span::before{content:"·";margin-right:14px;color:var(--on-dark-3)}

/* ==========================================================================
   15 · PRECIOS A LA VISTA
   ========================================================================== */
.price-tiles{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(4,minmax(0,1fr))}
.price-tile{
  --c:var(--blue);
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:clamp(20px,2vw,28px);border-radius:var(--r-lg);background:var(--paper);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.price-tile::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--c)}
.price-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.price-tile small{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.price-tile b{
  font-family:var(--font-display);font-stretch:112%;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.75rem,1.1rem + 1.5vw,2.5rem);color:var(--ink);line-height:1.1;margin-top:var(--s-3);
  font-variant-numeric:tabular-nums;
}
.price-tile span{font-weight:600;color:var(--ink-2)}
.price-tile em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--muted)}
@media (max-width:1024px){.price-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.price-tiles{grid-template-columns:1fr}}

/* ==========================================================================
   16 · PREGUNTAS FRECUENTES
   ========================================================================== */
.faq{display:grid;gap:12px}
.faq details{
  border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,28px);min-height:64px;
  font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:var(--fs-md);
  letter-spacing:-.015em;color:var(--ink);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{
  position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--bg);
  transition:background-color var(--t-base),transform var(--t-base) var(--ease);
}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;
  background:var(--ink);border-radius:2px;transition:transform var(--t-base) var(--ease),background-color var(--t-base);
}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm{background:var(--ink);transform:rotate(180deg)}
.faq details[open] summary .pm::before,.faq details[open] summary .pm::after{background:#fff}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq summary:hover .pm{background:var(--blue-soft)}
.faq__a{padding:0 clamp(18px,2.2vw,28px) clamp(20px,2.2vw,26px);color:var(--muted);max-width:72ch}
.faq__a p + p{margin-top:var(--s-3)}
.faq__a a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-layout > div:first-child{position:sticky;top:calc(var(--hdr-h) + 32px)}
@media (max-width:900px){.faq-layout{grid-template-columns:1fr}.faq-layout > div:first-child{position:static}}

/* ==========================================================================
   17 · LLAMADO FINAL (panel amarillo con goteo)
   ========================================================================== */
.cta-paint{
  position:relative;border-radius:var(--r-xl);background:var(--yellow);color:var(--navy);
  padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:var(--s-6);align-items:end;
}
.cta-paint h2{color:var(--navy);font-size:clamp(2.5rem,1.2rem + 4.6vw,5.5rem);line-height:.95;letter-spacing:-.045em}
.cta-paint p{margin-top:var(--s-4);max-width:44ch;font-size:var(--fs-md);color:rgba(6,22,64,.8)}
.cta-paint .row{justify-content:flex-end}
.cta-paint__drips{position:absolute;left:0;right:0;top:-1px;height:clamp(60px,9vw,120px);z-index:-1;color:var(--bg)}
.cta-paint__drips svg{width:100%;height:100%}
.cta-paint__disc{
  position:absolute;right:-8%;top:-30%;width:clamp(240px,34vw,520px);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 65%);
}
@media (max-width:860px){
  .cta-paint{grid-template-columns:1fr}
  .cta-paint .row{justify-content:flex-start}
}

/* ==========================================================================
   18 · PIE
   ========================================================================== */
.site-footer{
  position:relative;background:var(--navy);color:var(--on-dark-2);
  padding-top:clamp(64px,8vw,120px);overflow:hidden;isolation:isolate;
}
.site-footer::before{
  content:"";position:absolute;z-index:-1;width:60vw;aspect-ratio:1;right:-20vw;top:-30vw;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.28),transparent 65%);
}
.foot-top{display:grid;gap:clamp(32px,4vw,64px);grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.7fr))}
.foot-brand img{height:34px;width:auto}
.foot-brand p{margin-top:var(--s-5);max-width:40ch;font-size:var(--fs-sm)}
.foot-col h2{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:var(--s-4);font-stretch:100%;
}
.foot-col a,.foot-col button{
  display:block;width:fit-content;padding:7px 0;font-size:var(--fs-sm);color:var(--on-dark-2);text-align:left;
  transition:color var(--t-fast),transform var(--t-base) var(--ease);
}
.foot-col a:hover,.foot-col button:hover{color:#fff;transform:translateX(3px)}
.foot-col p{font-size:var(--fs-sm);padding:7px 0}
.foot-word{
  margin-top:clamp(56px,7vw,110px);
  font-family:var(--font-display);font-stretch:125%;font-weight:900;letter-spacing:-.06em;line-height:.8;
  font-size:min(15vw,16rem);font-stretch:112%;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16);
  white-space:nowrap;user-select:none;text-align:center;overflow:hidden;
}
.foot-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);
  padding-block:var(--s-6) max(var(--s-6),env(safe-area-inset-bottom));
  border-top:1px solid var(--line-dark);font-size:var(--fs-xs);color:var(--on-dark-3);
}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.foot-legal a,.foot-legal button{color:var(--on-dark-3);font-size:var(--fs-xs);transition:color var(--t-fast)}
.foot-legal a:hover,.foot-legal button:hover{color:#fff}
.socials{display:flex;gap:8px}
.socials a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-dark-2);color:#fff;transition:background-color var(--t-base),color var(--t-base),transform var(--t-base) var(--ease);
}
.socials a:hover{background:var(--yellow);color:var(--navy);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}

/* Crédito de diseño */
.credit{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:var(--r-full);
  border:1px solid var(--line-dark-2);color:var(--on-dark-2);font-size:var(--fs-xs);
  transition:background-color var(--t-base),border-color var(--t-base),color var(--t-base);
}
.credit__dot{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#fff,#C9D4F0);color:var(--navy);
  font-family:var(--font-display);font-stretch:112%;font-weight:900;font-size:13px;letter-spacing:-.04em;
}
.credit b{color:#fff;font-weight:600}
.credit svg{width:14px;height:14px;transition:transform var(--t-base) var(--ease)}
.credit:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.credit:hover svg{transform:translate(2px,-2px)}

@media (max-width:1024px){.foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:640px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   19 · ENCABEZADO DE PÁGINA INTERIOR
   ========================================================================== */
.phead{
  position:relative;background:var(--navy);color:var(--on-dark-2);overflow:hidden;isolation:isolate;
  padding:calc(var(--hdr-h) + clamp(48px,7vw,104px)) 0 clamp(56px,7vw,104px);
}
.phead__blobs{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:blur(40px) saturate(1.2);opacity:.9}
.phead__blobs i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:deriva 18s ease-in-out infinite alternate}
.phead__blobs i:nth-child(1){width:46vw;aspect-ratio:1;right:-10vw;top:-20vw;background:radial-gradient(circle,rgba(47,107,255,.65),transparent 65%)}
.phead__blobs i:nth-child(2){width:30vw;aspect-ratio:1;right:22vw;bottom:-18vw;background:radial-gradient(circle,rgba(255,212,0,.32),transparent 65%);animation-duration:22s;animation-delay:-6s}
.phead__blobs i:nth-child(3){width:24vw;aspect-ratio:1;left:-6vw;bottom:-14vw;background:radial-gradient(circle,rgba(228,0,124,.22),transparent 65%);animation-duration:26s;animation-delay:-12s}
@keyframes deriva{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-4vw,3vw) scale(1.12)}
  100%{transform:translate(3vw,-2vw) scale(.94)}
}
@media (prefers-reduced-motion:reduce){.phead__blobs i{animation:none}}
.phead h1{color:#fff;margin-top:var(--s-4);max-width:18ch}
.phead .lead{margin-top:var(--s-5);color:var(--on-dark-2)}
.phead .eyebrow{color:var(--yellow)}
.phead__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-6)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:var(--s-6);font-size:var(--fs-xs);color:var(--on-dark-3)}
.crumbs a{color:var(--on-dark-2);transition:color var(--t-fast)}
.crumbs a:hover{color:#fff}
.crumbs svg{width:14px;height:14px;opacity:.6}
.crumbs [aria-current]{color:#fff}

/* ==========================================================================
   20 · CATÁLOGO
   ========================================================================== */
.toolbar{
  position:sticky;top:calc(var(--hdr-h) + 10px);z-index:20;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);
  padding:10px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:var(--shadow-1);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  transition:top .45s var(--ease);
}
body[data-hdr-hidden="true"] .toolbar{top:10px}
.search{position:relative}
.search > svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:19px;height:19px;color:var(--muted);pointer-events:none}
.search input{padding-left:46px!important;padding-right:44px!important}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{
  position:absolute;right:6px;top:50%;translate:0 -50%;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
}
.search .clear:hover{background:var(--bg);color:var(--ink)}
.search .clear svg{width:16px;height:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s-5)}
.chips button{
  --c:var(--ink);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-full);
  border:1.5px solid var(--line-2);background:var(--paper);font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  transition:background-color var(--t-base),border-color var(--t-base),color var(--t-base),transform var(--t-fast);
}
.chips button i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.chips button:hover{border-color:var(--ink)}
.chips button:active{transform:scale(.97)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips button small{font-family:var(--font-mono);font-size:11px;opacity:.6}
.search-hint{margin-top:var(--s-4);font-size:var(--fs-xs);color:var(--muted)}
.result-count{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--muted)}
.empty{
  grid-column:1/-1;text-align:center;padding:var(--s-9) var(--s-5);border-radius:var(--r-lg);
  border:1.5px dashed var(--line-2);
}
.empty svg{width:40px;height:40px;margin:0 auto var(--s-4);color:var(--muted)}
.empty h3{font-size:var(--fs-h4)}
.empty p{margin:var(--s-3) auto var(--s-5);color:var(--muted);max-width:40ch}
@media (max-width:640px){.toolbar{grid-template-columns:1fr}}

.ind-grid{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.ind-card{
  display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,26px);border-radius:var(--r-lg);
  background:var(--navy-2);border:1px solid var(--line-dark);min-height:200px;
  transition:transform .5s var(--ease),border-color .3s;
}
.ind-card:hover{transform:translateY(-4px);border-color:var(--line-dark-2)}
.ind-card small{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.ind-card h3{color:#fff;font-size:1.25rem;letter-spacing:-.02em;font-stretch:110%}
.ind-card p{font-size:var(--fs-sm);color:var(--on-dark-2)}
.ind-card span{margin-top:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3)}

/* ==========================================================================
   21 · FICHA DE PRODUCTO
   ========================================================================== */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.pd__visual{
  --c:var(--blue);
  position:sticky;top:calc(var(--hdr-h) + 24px);
  aspect-ratio:1/1.05;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 40%,#fff) 0%,color-mix(in srgb,var(--c) 12%,#fff) 45%,#F7F9FD 75%);
  border:1px solid var(--line);
}
.pd__visual img{width:64%;height:auto;margin-top:-4%;filter:drop-shadow(0 40px 40px rgba(10,19,48,.28))}
.pd__visual::after{
  content:"";position:absolute;left:22%;right:22%;bottom:9%;height:18px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(10,19,48,.25),transparent 70%);
}
.pd__swatch{
  position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 8px;border-radius:var(--r-full);background:rgba(255,255,255,.86);
  border:1px solid var(--line);font-size:var(--fs-xs);font-weight:600;color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pd__swatch i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.pd__info h1{font-size:clamp(2.5rem,1.2rem + 3.6vw,4.75rem);margin-top:var(--s-4)}
.pd__type{margin-top:var(--s-3);font-size:var(--fs-lg);color:var(--muted)}
.pd__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.pd__badges .tag{height:32px;font-size:11px}
.pd__info h2{
  font-family:var(--font-mono);font-stretch:100%;font-size:var(--fs-2xs);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin:clamp(32px,4vw,48px) 0 var(--s-4);
}
.sizes{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.size{
  position:relative;text-align:left;padding:16px;border-radius:var(--r-md);background:var(--paper);
  border:1.5px solid var(--line-2);transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-fast);
  min-height:44px;
}
.size:hover{border-color:var(--ink)}
.size:active{transform:scale(.98)}
.size[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,80,210,.15)}
.size small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.size b{display:block;margin-top:6px;font-family:var(--font-display);font-stretch:112%;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.size em{display:block;margin-top:2px;font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
.size .best{
  position:absolute;top:-9px;right:10px;padding:2px 8px;border-radius:var(--r-full);
  background:var(--yellow);color:var(--navy);font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.specs{border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-4);padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.specs dt{color:var(--muted)}
.specs dd{color:var(--ink);font-weight:500}
.spec-src{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--muted-2)}
.docs{display:grid;gap:10px}
.doc{
  display:flex;align-items:center;gap:var(--s-4);padding:14px 16px;border-radius:var(--r-md);
  background:var(--paper);border:1px solid var(--line);
  transition:border-color var(--t-base),transform var(--t-base) var(--ease),box-shadow var(--t-base);
}
.doc:hover{border-color:var(--ink);transform:translateX(4px);box-shadow:var(--shadow-1)}
.doc__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--blue-soft);color:var(--blue)}
.doc__icon--warn{background:#FFF4CC;color:#8A6200}
.doc__icon svg{width:21px;height:21px}
.doc__text{flex:1;min-width:0}
.doc__text b{display:block;color:var(--ink);font-weight:600}
.doc__text small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.doc > svg{width:18px;height:18px;color:var(--muted)}
.docs--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.note{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);
  background:var(--blue-soft);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.55;
}
.note svg{width:18px;height:18px;flex:none;color:var(--blue);margin-top:1px}
.pd__actions{margin-top:clamp(32px,4vw,44px)}
@media (max-width:900px){
  .pd{grid-template-columns:1fr}
  .pd__visual{position:relative;top:auto;aspect-ratio:1/0.9}
  .pd__visual img{width:46%}
}

/* ==========================================================================
   22 · CALCULADORA Y TABLA DE PRECIOS
   ========================================================================== */
.calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-2);
}
.calc__controls{padding:clamp(24px,3.4vw,48px);display:grid;gap:var(--s-5);align-content:start}
.calc__result{
  position:relative;padding:clamp(24px,3.4vw,48px);background:var(--navy);color:var(--on-dark-2);
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
}
.calc__result::before{
  content:"";position:absolute;z-index:-1;width:80%;aspect-ratio:1;right:-30%;top:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,107,255,.45),transparent 65%);
}
.calc__line{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--yellow)}
.calc__total{
  font-family:var(--font-display);font-stretch:118%;font-weight:900;letter-spacing:-.05em;color:#fff;
  font-size:clamp(2.5rem,1.4rem + 3.6vw,4.5rem);line-height:1;margin-top:var(--s-4);font-variant-numeric:tabular-nums;
}
.calc__note{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--on-dark-3)}
.calc__rows{margin-top:var(--s-6);border-top:1px solid var(--line-dark)}
.calc__rows div{display:flex;justify-content:space-between;gap:var(--s-4);padding:12px 0;border-bottom:1px solid var(--line-dark);font-size:var(--fs-sm)}
.calc__rows dd{color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.calc__actions{margin-top:auto;padding-top:var(--s-6)}
.stepper{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px}
.stepper button{
  height:52px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);display:grid;place-items:center;
  transition:border-color var(--t-base),background-color var(--t-base);
}
.stepper button:hover{border-color:var(--ink);background:var(--bg)}
.stepper button svg{width:18px;height:18px}
.stepper input{text-align:center;font-family:var(--font-mono)}
@media (max-width:900px){.calc{grid-template-columns:1fr}}

.table-wrap{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);overflow:hidden}
.table-scroll{overflow-x:auto}
.table{width:100%;min-width:760px;font-size:var(--fs-sm)}
.table th,.table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.table thead th{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);background:var(--bg);white-space:nowrap;
}
.table tbody tr{transition:background-color var(--t-fast)}
.table tbody tr:hover{background:#F8FAFF}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}
.table th[scope="row"]{font-weight:600;color:var(--ink)}
.table .r{text-align:right;white-space:nowrap}
.table .mono{font-size:13px}
.table .fam-dot{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.table .fam-dot i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.table__vacio{text-align:center!important;color:var(--muted);padding:40px!important}

/* ==========================================================================
   23 · FORMULARIOS
   ========================================================================== */
.field{display:grid;gap:8px}
.field label,.field .lbl{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.field .req{color:var(--danger)}
.input,.select,.textarea{
  width:100%;min-height:52px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--paper);border:1.5px solid var(--line-2);color:var(--ink);font-size:var(--fs-base);
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(10,19,48,.32)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(20,80,210,.14)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(198,42,42,.1)}
.select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1330' 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 14px center;background-size:18px;
}
.textarea{min-height:150px;resize:vertical;line-height:1.55}
.hint{font-size:var(--fs-xs);color:var(--muted)}
.field-error{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--danger);min-height:0}
.field-error:empty{display:none}
.field-error svg{width:15px;height:15px}
.field-row{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;
  border:1.5px solid var(--line-2);background:var(--paper);display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast);
}
.check input::after{
  content:"";width:12px;height:12px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.check input:checked{background:var(--blue);border-color:var(--blue)}
.check input:checked::after{opacity:1}
.check input[aria-invalid="true"]{border-color:var(--danger)}
.check a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-card{
  padding:clamp(24px,3.4vw,44px);border-radius:var(--r-xl);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-2);display:grid;gap:var(--s-5);
}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}}
.ccard{
  display:flex;align-items:center;gap:var(--s-4);padding:18px 20px;border-radius:var(--r-md);
  background:var(--paper);border:1px solid var(--line);margin-bottom:10px;
  transition:border-color var(--t-base),transform var(--t-base) var(--ease),box-shadow var(--t-base);
}
.ccard:hover{border-color:var(--ink);transform:translateX(4px);box-shadow:var(--shadow-1)}
.ccard__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--navy);color:var(--yellow)}
.ccard__icon svg{width:21px;height:21px}
.ccard small{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.ccard b{display:block;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.info-box{margin-top:var(--s-5);padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line)}
.info-box h3{font-size:var(--fs-h4);font-stretch:108%}
.info-box dl{margin-top:var(--s-4)}
.info-box dl div{display:flex;justify-content:space-between;gap:var(--s-4);padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.info-box dl div:last-child{border-bottom:0}
.info-box dd{font-weight:600;color:var(--ink);font-family:var(--font-mono)}
.info-box .checklist{margin-top:var(--s-4)}
.form-ok{text-align:center;padding:var(--s-8) var(--s-5)}
.form-ok__icon{width:72px;height:72px;margin:0 auto var(--s-5);border-radius:50%;display:grid;place-items:center;background:#DDF5EA;color:var(--ok)}
.form-ok__icon svg{width:34px;height:34px}

/* ==========================================================================
   24 · LEGALES Y TEXTO LARGO
   ========================================================================== */
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.legal__toc{position:sticky;top:calc(var(--hdr-h) + 32px)}
.legal__toc b{display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:var(--s-3)}
.legal__toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);font-size:var(--fs-sm);color:var(--muted);transition:color var(--t-fast),border-color var(--t-fast)}
.legal__toc a:hover,.legal__toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--blue)}
.prose{max-width:72ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.72}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.03em;margin:clamp(40px,5vw,64px) 0 var(--s-4);scroll-margin-top:calc(var(--hdr-h) + 24px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-h4);margin:var(--s-6) 0 var(--s-3)}
.prose p + p{margin-top:var(--s-4)}
.prose ul{margin:var(--s-4) 0;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose .updated{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--s-6)}
.prose table{width:100%;margin:var(--s-5) 0;font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose thead th{background:var(--bg);font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.prose .callout{margin:var(--s-5) 0;padding:18px 20px;border-radius:var(--r-md);background:var(--blue-soft);font-size:var(--fs-sm)}
@media (max-width:960px){.legal{grid-template-columns:1fr}.legal__toc{position:static;display:none}}

/* Política Integral: hoja de documento */
.policy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.policy-sheet{
  position:relative;background:var(--paper);color:var(--ink-2);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,56px);box-shadow:var(--shadow-3);font-size:1.0625rem;line-height:1.75;
}
.policy-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:var(--r-lg) 0 0 var(--r-lg);background:linear-gradient(var(--yellow),var(--blue))}
.policy-sheet__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-bottom:var(--s-4);margin-bottom:var(--s-5);
  border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.policy-sheet p + p{margin-top:var(--s-4)}
@media (max-width:900px){.policy{grid-template-columns:1fr}}

/* Números de la empresa */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stats div{padding:var(--s-6) var(--s-4) var(--s-6) 0}
.stats div + div{padding-left:var(--s-5);border-left:1px solid var(--line)}
.stats dt{font-size:var(--fs-sm);color:var(--muted);margin-top:8px}
.stats dd{order:-1;font-family:var(--font-display);font-stretch:118%;font-weight:900;font-size:clamp(2.5rem,1.4rem + 3vw,4.5rem);letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stats div{display:flex;flex-direction:column}
@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(3){padding-left:0;border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.split p + p{margin-top:var(--s-4)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ==========================================================================
   25 · COOKIES (aviso y panel de preferencias)
   ========================================================================== */
.ck{
  position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:var(--z-modal);
  width:min(440px,calc(100vw - 32px));padding:22px;border-radius:var(--r-lg);
  background:var(--navy);color:var(--on-dark-2);box-shadow:0 30px 70px -20px rgba(6,22,64,.6);
  border:1px solid var(--line-dark);
  transform:translateY(calc(100% + 40px));opacity:0;
  transition:transform .6s var(--ease),opacity .4s var(--ease);
}
.ck[data-show="true"]{transform:none;opacity:1}
.ck__head{display:flex;align-items:center;gap:12px}
.ck__icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--yellow);color:var(--navy);flex:none}
.ck__icon svg{width:21px;height:21px}
.ck h2{font-size:1.125rem;color:#fff;letter-spacing:-.02em;font-stretch:108%}
.ck p{margin-top:12px;font-size:var(--fs-xs);line-height:1.55}
.ck p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ck__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ck__btns .btn{min-height:46px;padding:10px 14px;font-size:var(--fs-xs)}
.ck__btns .btn--wide{grid-column:1/-1}
@media (prefers-reduced-motion:reduce){.ck{transition:opacity .2s}}

.modal{
  position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:16px;
  background:rgba(6,22,64,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.modal[data-open="true"]{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.modal__card{
  width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:var(--r-xl);
  background:var(--paper);box-shadow:var(--shadow-3);padding:clamp(22px,3vw,32px);
  transform:translateY(16px) scale(.98);transition:transform .4s var(--ease);
}
.modal[data-open="true"] .modal__card{transform:none}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.modal__head h2{font-size:1.5rem;letter-spacing:-.03em}
.modal__head .icon-btn{width:44px;height:44px}
.modal p.intro{margin-top:var(--s-3);color:var(--muted);font-size:var(--fs-sm)}
.ck-opt{display:flex;gap:var(--s-4);align-items:flex-start;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
.ck-opt:last-of-type{border-bottom:0}
.ck-opt b{display:block;color:var(--ink)}
.ck-opt p{margin-top:4px;font-size:var(--fs-xs);color:var(--muted)}
.switch{position:relative;flex:none;width:52px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:var(--r-full);background:#CBD2E1;transition:background-color var(--t-base)}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--t-base) var(--ease)}
.switch input:checked + span{background:var(--blue)}
.switch input:checked + span::after{transform:translateX(22px)}
.switch input:disabled + span{background:#8FA6DC;cursor:not-allowed}
.switch input:focus-visible + span{outline:3px solid var(--blue);outline-offset:3px}
.modal__foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:var(--s-5)}

/* ==========================================================================
   26 · BUSCADOR RÁPIDO (Ctrl/⌘ + K)
   ========================================================================== */
.cmdk{place-items:start center;padding-top:min(14vh,120px)}
.cmdk .modal__card{padding:0;width:min(640px,100%);overflow:hidden;display:flex;flex-direction:column;max-height:min(620px,calc(100dvh - 32px))}
.cmdk__in{position:relative;border-bottom:1px solid var(--line)}
.cmdk__in svg{position:absolute;left:20px;top:50%;translate:0 -50%;width:20px;height:20px;color:var(--muted)}
.cmdk__in input{width:100%;height:64px;padding:0 64px 0 54px;border:0;background:transparent;font-size:1.0625rem;color:var(--ink)}
.cmdk__in input:focus{outline:none}
.cmdk__in kbd{position:absolute;right:16px;top:50%;translate:0 -50%;font-family:var(--font-mono);font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--muted)}
.cmdk__list{overflow:auto;padding:8px}
.cmdk__group{padding:10px 12px 6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.cmdk__item{
  --c:var(--blue);
  display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;color:var(--ink);cursor:pointer;
}
.cmdk__item[aria-selected="true"]{background:var(--bg)}
.cmdk__item img{width:36px;height:auto;flex:none}
.cmdk__item .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg);flex:none;color:var(--ink)}
.cmdk__item[aria-selected="true"] .ic{background:var(--paper)}
.cmdk__item .ic svg{width:18px;height:18px}
.cmdk__item b{display:block;font-weight:600;font-size:var(--fs-sm)}
.cmdk__item small{display:block;font-size:var(--fs-xs);color:var(--muted)}
.cmdk__item > svg{width:16px;height:16px;margin-left:auto;color:var(--muted);opacity:0}
.cmdk__item[aria-selected="true"] > svg{opacity:1}
.cmdk__empty{padding:32px;text-align:center;color:var(--muted);font-size:var(--fs-sm)}
.cmdk__foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2);font-family:var(--font-mono)}

/* ==========================================================================
   27 · AVISOS Y FLOTANTES
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:var(--z-toast);
  display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--r-full);
  background:var(--ink);color:#fff;font-size:var(--fs-sm);box-shadow:var(--shadow-3);
  transform:translate(-50%,calc(100% + 40px));opacity:0;pointer-events:none;
  transition:transform .5s var(--ease),opacity .3s;max-width:calc(100vw - 32px);
}
.toast[data-show="true"]{transform:translate(-50%,0);opacity:1}
.toast svg{width:19px;height:19px;color:#7BE8A8;flex:none}
.toast--error svg{color:#FF9B9B}

.totop{
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-2);border:1px solid var(--line);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),background-color var(--t-base),color var(--t-base);
}
.totop[data-show="true"]{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--ink);color:#fff}
.totop > svg{width:20px;height:20px;position:relative;z-index:1}
.totop .ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round}

.maintenance{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;background:var(--navy);text-align:center;color:var(--on-dark-2)}
.maintenance img{height:34px;width:auto;margin:0 auto var(--s-6)}
.maintenance h1{color:#fff;font-size:var(--fs-h2)}
.maintenance p{margin:var(--s-4) auto var(--s-6);max-width:44ch}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--hdr-h) + 40px) var(--gutter) 64px}
.nf__num{
  font-family:var(--font-display);font-stretch:125%;font-weight:900;letter-spacing:-.07em;line-height:.85;
  font-size:clamp(7rem,3rem + 22vw,20rem);
  background:linear-gradient(100deg,var(--yellow) 0 30%,#fff 30% 62%,var(--blue-bright) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf h1{color:#fff;font-size:var(--fs-h2);margin-top:var(--s-4)}
.nf p{margin:var(--s-4) auto 0;max-width:46ch}
.nf .row{justify-content:center;margin-top:var(--s-7)}

/* Compartir */
.share{display:inline-flex;align-items:center;gap:8px}

/* ==========================================================================
   28 · MOVIMIENTO
   --------------------------------------------------------------------------
   Regla: el contenido NUNCA depende de la animación. La clase js-motion solo
   la pone motion.js cuando GSAP cargó y el usuario no pidió movimiento
   reducido; si algo falla, todo se ve completo.
   ========================================================================== */
.js-motion [data-anim]{opacity:0}
.js-motion [data-anim].is-in{opacity:1}
.js-motion .split-line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   29 · IMPRESIÓN (ficha de producto y lista de precios)
   ========================================================================== */
@media print{
  .hdr,.progress,.site-footer,.totop,.ck,.modal,.marquee,.toolbar,.chips,.pd__actions,.calc__actions,.phead__blobs,.hero__canvas{display:none!important}
  body{background:#fff;color:#000}
  .phead{background:#fff;color:#000;padding:0 0 24px}
  .phead h1,.phead .lead,.crumbs,.crumbs a{color:#000}
  .sec{padding-block:24px}
  .pd__visual{position:static;border:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
}

/* Migas sobre fondo claro (ficha de producto) */
.crumbs--light{color:var(--muted-2)}
.crumbs--light a{color:var(--muted)}
.crumbs--light a:hover,.crumbs--light [aria-current]{color:var(--ink)}

/* Familias ancladas: el carrusel queda centrado en la pantalla */
.js-pin .fam__pin > div{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--hdr-h) + 12px) 32px!important}
.pgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.pgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid--3{grid-template-columns:1fr}}

/* Héroe del logo en celular: el escenario debe caber en una pantalla */
.hero__outro .eyebrow::before{display:none}
@media (max-width:640px){
  .hero[data-mode="live"] .hero__stat:nth-child(n+3){display:none}
  .hero__outro span{letter-spacing:.12em}
}

/* Descripción de la ficha técnica en la página de producto */
.pd__desc{margin-top:var(--s-4);color:var(--ink-2);font-size:var(--fs-md);line-height:1.65;max-width:62ch}
/* Enlaces a otras familias sobre fondo claro */
.chip--light{color:var(--ink);background:var(--paper);border-color:var(--line-2);font-size:11px}
.chip--light:hover{border-color:var(--ink)}