@font-face{font-family:'Archivo';font-weight:100 900;font-style:normal;font-display:swap;src:url(/assets/e3a28eade21a900c.woff2) format('woff2');}@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/b0a8ad37ac45f5fb.woff2) format('woff2');}@font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/cd759df8ef9efc98.woff2) format('woff2');}@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/4b52ddd4836b592d.woff2) format('woff2');}@font-face{font-family:'Barlow';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/2d797dd8b35dcb34.woff2) format('woff2');}@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-style:normal;font-display:swap;src:url(/assets/83c005d49d8a6a50.woff2) format('woff2');}
/* ============================================================================
   EGOSA — dirección "sala de control"
   ----------------------------------------------------------------------------
   Evolución de "instrumento industrial". La portada con el video era lo único
   que se sentía vivo y todo lo demás era un documento blanco: el sitio cambiaba
   de personalidad a los 700px de scroll. Ahora la base oscura del hero no se
   interrumpe, y el naranja es la única luz encendida en toda la interfaz.

   Locks del sistema (se cumplen en toda la página):
     THEME  oscuro y CONTINUO. Cuatro planos de profundidad (--base, --paper,
            --surface, --paper-2) que son escalones de luz, no colores distintos.
            Nada de una sección clara a media página.
     COLOR  un solo acento: naranja #F79628. El rojo, amarillo y verde del logo
            viven en el logo, no en la interfaz. Verde solo en WhatsApp, que es
            color de plataforma, no de marca.
     SHAPE  radio 2px en todo. Lo redondeado se lee amable; esto se lee preciso.
     MOVE   solo opacity y transform. Nada que provoque reflow, nada que se mueva
            sin señalar jerarquía, estado o progreso.
   Contraste: el naranja sobre esta base da 7.97:1 — sobre blanco daba 2.24:1.
   El acento por fin es legible, no nada más bonito. Pero el naranja RELLENO
   sigue llevando texto navy (6.8:1), nunca blanco: eso no cambió.
   ========================================================================== */

:root{
  /* marca (no se toca) */
  --navy:#0F2252;
  --navy-800:#16306E;
  --navy-900:#081536;
  --orange:#F79628;
  --orange-700:#C97410;

  /* ----------------------------------------------------------------------
     SALA DE CONTROL — los neutros son oscuros.
     La portada con el video era lo único que se sentía vivo; el resto era un
     documento blanco. Ahora la base oscura del hero sigue hasta el pie y el
     naranja queda como la ÚNICA luz de la interfaz.
     Efecto secundario que sí importa: el naranja sobre esta base da 7.97:1
     (sobre blanco daba 2.24:1). El acento por fin es legible, no solo bonito.
     -------------------------------------------------------------------- */
  /* Cuatro planos de profundidad. Cada uno es un escalón de luz, no un color
     distinto: así el ojo lee qué está encima de qué sin necesitar sombras. */
  --base:#070C1A;          /* plano 0 — fondo de página */
  --paper:#0B1226;         /* plano 1 — sección alterna */
  --surface:#111C3A;       /* plano 2 — tarjetas y paneles */
  --paper-2:#18244A;       /* plano 3 — controles dentro de una tarjeta */
  --paper-3:#22315F;       /* plano 3 al pasar el cursor */
  --white:#FFFFFF;         /* blanco de verdad; ya casi no se usa */
  --ink:#EAEEF8;           /* texto principal — 15:1 sobre --paper */
  --muted:#98A5C4;         /* texto secundario — 7.3:1 sobre --paper */
  --hi:#FFFFFF;            /* lo que en el tema claro era navy como TEXTO */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.24);
  --line-dark:rgba(255,255,255,.16);
  --glow:rgba(247,150,40,.55);   /* la luz naranja, para halos y focos */

  /* plataforma */
  --wa:#25D366;

  --r:2px;
  --wrap:1240px;
  --gut:28px;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --t-micro:150ms;
  --t-ui:220ms;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:16.5px;
  color:var(--ink);
  background:var(--base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 118;
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.04;
}
.mono,.num{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
/* el salto de contenido tiene que ser alcanzable con teclado, no invisible siempre */
a.visually-hidden:focus{
  position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:200;
  background:var(--navy);color:#fff;padding:11px 16px;border-radius:var(--r);font-weight:600;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px;border-radius:0;
}
.page[hidden]{display:none;}

/* ============================================================================
   EL CANDADO QUE FALTABA — por esto "no servía ni madres".
   ----------------------------------------------------------------------------
   El atributo hidden trae display:none de fábrica, pero es la regla de menor
   peso que existe: CUALQUIER selector de clase se lo gana. .cat-modal-backdrop
   declaraba display:flex, así que el modal CERRADO seguía pintado: fixed,
   inset:0, opacity:0 y pointer-events:auto. Una lámina de vidrio invisible
   sobre toda la página, comiéndose 37 de 44 clics — el de WhatsApp incluido.
   No se veía porque era transparente, y las pruebas no lo cachaban porque
   llamaban .click() por código, que se salta la prueba de impacto del navegador.
   Esta regla hace que hidden signifique hidden, pase lo que pase.
   ========================================================================== */
[hidden]{display:none!important;}
/* Y la otra mitad: un overlay cerrado JAMÁS intercepta el puntero, ni durante
   el fundido de salida. Se apaga por pointer-events, no solo por opacidad. */
.cat-modal-backdrop:not([data-open]),
.req-backdrop:not([data-open]),
.intro.fuera{pointer-events:none;}
section{position:relative;}
/* al saltar a un ancla, el header pegajoso tapaba el encabezado de la sección.
   Las secciones del catálogo llevan además la barra de herramientas encima. */
section[id]{scroll-margin-top:96px;}
.cat-section[id]{scroll-margin-top:148px;}

/* ============================================================================
   LA RETÍCULA — retirada.
   ----------------------------------------------------------------------------
   Era el gancho original de la dirección: la retícula de 12 columnas sobre la
   que se alinea el contenido, dibujada a 1px. Primero se quitó de las páginas
   interiores por ruido, y ahora también de la portada: esas líneas verticales
   cruzaban el video, que es lo único que ya funcionaba de la página.

   La retícula NO desapareció, solo dejó de dibujarse: el contenido se sigue
   alineando a las mismas 12 columnas. Si algún día se quiere de vuelta, basta
   con revivir estas reglas — el marcado ya no está, hay que reponer el div.
   ========================================================================== */
.rules{display:none;}

/* regla graduada: ticks cortos cada 8px, largos cada 40px */
.ruler{
  height:9px;width:100%;
  background-image:
    repeating-linear-gradient(to right,var(--line-2) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 8px);
  background-size:100% 9px,100% 5px;
  background-position:0 0,0 0;
  background-repeat:no-repeat,no-repeat;
}
.ruler.on-dark{
  background-image:
    repeating-linear-gradient(to right,rgba(247,150,40,.5) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to right,var(--line-dark) 0 1px,transparent 1px 8px);
}

/* ============================================================================
   PIEZAS COMUNES
   ========================================================================== */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);flex:none;}
.eyebrow.on-dark{color:rgba(255,255,255,.72);}

.section-title{font-size:clamp(30px,3.4vw,46px);}
.section-sub{color:var(--muted);font-size:17px;max-width:56ch;margin-top:12px;}
.section-head{margin-bottom:34px;position:relative;z-index:1;}
.section-head .section-title{margin-top:14px;}

/* barra de acento bajo los títulos de sección: la firma de la placa */
.section-title::after{
  content:"";display:block;width:52px;height:3px;background:var(--orange);margin-top:16px;
}
.section-head.no-bar .section-title::after{display:none;}

/* botones: placa de máquina. Naranja con texto navy = 6.8:1 */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--orange);color:var(--navy);
  font-weight:700;font-size:15px;letter-spacing:.005em;
  padding:13px 22px;border-radius:var(--r);border:0;
  min-height:46px;
  transition:transform var(--t-micro) var(--e-out),background var(--t-micro) var(--e-out);
}
.cta-btn:hover{background:#FFA83F;transform:translateY(-1px);}
.cta-btn:active{transform:translateY(0);}
.cta-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--orange);color:var(--hi);background:transparent;
  font-weight:600;font-size:15px;padding:12px 20px;border-radius:var(--r);min-height:46px;
  transition:background var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out);
}
/* Al pasar el cursor el fantasma se enciende: se llena de naranja con texto
   navy (6.8:1). Sobre base oscura, encender es más legible que oscurecer. */
.cta-ghost:hover{background:var(--orange);color:var(--navy);border-color:var(--orange);}
.cta-ghost.on-dark{border-color:rgba(255,255,255,.45);color:#fff;}
.cta-ghost.on-dark:hover{background:var(--orange);color:var(--navy);border-color:var(--orange);}

/* ============================================================================
   HEADER — cromo claro, el logo oscuro vive aquí. Una sola línea, 72px.
   ========================================================================== */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(11,18,38,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:border-color var(--t-ui) var(--e-out);
}
header.scrolled{border-bottom-color:var(--line-2);box-shadow:0 1px 0 rgba(11,18,38,.05);}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:22px;}
.logo-img{height:36px;width:auto;}
a.logo-link{display:flex;align-items:center;flex:none;}
nav.primary{display:flex;align-items:center;gap:2px;margin-left:auto;}
/* "Productos" era un <button> que solo abría el submenú: se podía picar y no
   pasaba nada. Ahora es una liga al catálogo, así que estos estilos tienen que
   alcanzar también al hijo de .has-menu, no solo a los hijos directos de nav. */
nav.primary > a,.has-menu > a{
  display:flex;align-items:center;gap:6px;
  padding:9px 13px;font-size:15px;font-weight:600;color:var(--ink);
  border-radius:var(--r);transition:background var(--t-micro) var(--e-out);
  position:relative;
}
nav.primary > a:hover,.has-menu > a:hover{background:var(--paper-2);}
nav.primary > a[aria-current="page"],.has-menu > a[aria-current="page"]{color:var(--hi);}
nav.primary > a[aria-current="page"]::after,.has-menu > a[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--orange);
}
.has-menu{position:relative;}
.chev{width:15px;height:15px;transition:transform var(--t-micro) var(--e-out);}
/* la flecha gira cuando el submenú está abierto, que es cuando el ratón o el
   teclado están dentro. Antes dependía de un aria-expanded que ya no existe. */
.has-menu:hover > a .chev,.has-menu:focus-within > a .chev{transform:rotate(180deg);}
.mega{
  position:absolute;top:calc(100% + 10px);left:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  min-width:520px;padding:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out),visibility var(--t-ui);
  box-shadow:0 18px 40px -22px rgba(11,18,38,.35);
}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0);}
/* Con tres líneas la tarjeta del menú necesita una columna más y más ancho; el
   min-width de dos columnas dejaba los títulos partidos en tres renglones. */
/* Cinco líneas no caben en un renglón de menú sin dejar los títulos en tres
   pedazos, así que van en dos renglones de tres y dos. El separador vertical
   se apaga en la primera columna de cada renglón, si no queda una línea suelta
   colgando en medio del panel. */
.mega.mega-5{grid-template-columns:repeat(3,1fr);min-width:780px;}
.mega.mega-5 > div{border-left:1px solid var(--line);}
.mega.mega-5 > div:nth-child(3n+1){border-left:0;}
.mega.mega-5 > div:nth-child(n+4){border-top:1px solid var(--line);}
@media (max-width:980px){.mega.mega-5{min-width:0;grid-template-columns:1fr;}
  .mega.mega-5 > div{border-left:0;border-top:1px solid var(--line);}
  .mega.mega-5 > div:first-child{border-top:0;}}
.mega > div{padding:20px 22px;}
.mega > div + div{border-left:1px solid var(--line);}
.mega-col-title{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.mega .item{
  display:block;padding:7px 0;font-size:14.5px;font-weight:500;color:var(--ink);
  border-bottom:1px solid transparent;transition:color var(--t-micro) var(--e-out);
}
.mega .item:hover{color:var(--hi);border-bottom-color:var(--orange);}
.header-ctas{display:flex;align-items:center;gap:10px;flex:none;}
.menu-toggle{display:none;padding:10px;border:1px solid var(--line);border-radius:var(--r);min-width:44px;min-height:44px;}
.menu-toggle svg{width:22px;height:22px;}

@media (max-width:1020px){
  nav.primary{
    position:absolute;top:72px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:10px var(--gut) 18px;display:none;
  }
  nav.primary.mobile-open{display:flex;}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid var(--line);min-width:0;grid-template-columns:1fr;padding-top:4px;}
  .mega > div + div{border-left:0;border-top:1px solid var(--line);}
  .menu-toggle{display:block;}
  .header-ctas .cta-btn{display:none;}
}

/* ============================================================================
   HERO — dirigido por tipografía. La placa de datos sustituye al hueco de foto.
   Densidad de inicio 4-5: aquí se respira, el catálogo es el que aprieta.
   ========================================================================== */
/* El hero es la única superficie oscura del cuerpo: hace de portada y ahí vive
   el video de marca. Todo lo demás sigue claro; ninguna otra sección se invierte. */
.hero{background:var(--navy-900);overflow:hidden;isolation:isolate;}
/* el padding lateral tiene que repetirse: escribir `padding: X 0 Y` aquí
   anularía el de .wrap y el hero quedaría pegado al borde en pantallas chicas */
.hero-inner{padding:96px var(--gut) 84px;position:relative;z-index:3;}

/* ---- SECUENCIA DE PORTADA ----------------------------------------------
   Cinco tomas: cuatro de video y una compuesta con el logo. Se cruzan con
   fundido de opacidad, que es lo único barato de animar sobre video. */
.hero-cine{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-toma{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 900ms cubic-bezier(.4,0,.2,1);
  /* deriva lenta tipo Ken Burns: le da vida a un clip corto en bucle */
  animation:cine-deriva 18s ease-in-out infinite alternate;
}
.hero-toma.visible{opacity:.62;}
@keyframes cine-deriva{
  from{transform:scale(1.06) translate3d(0,0,0);}
  to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0);}
}

/* toma 5: el cierre de marca, dibujado con el DOM y no con video */
.hero-cierre{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 100% at 50% 45%,#12275C 0%,#050D24 70%);
  opacity:0;visibility:hidden;
  transition:opacity 900ms cubic-bezier(.4,0,.2,1),visibility 900ms;
}
.hero-cierre.visible{opacity:1;visibility:visible;}
.cierre-logo{
  position:relative;display:inline-block;
  clip-path:inset(0 100% 0 0);
}
.hero-cierre.visible .cierre-logo{
  animation:cierre-revela 800ms cubic-bezier(.65,0,.35,1) 180ms forwards;
}
.cierre-logo img{height:clamp(38px,5vw,64px);width:auto;}
.cierre-logo::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:2px;
  background:var(--orange);opacity:0;
}
.hero-cierre.visible .cierre-logo::after{
  animation:cierre-trazo 800ms cubic-bezier(.65,0,.35,1) 180ms forwards;
}
@keyframes cierre-revela{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes cierre-trazo{
  0%{transform:translateX(0);opacity:1;}
  90%{opacity:1;}
  100%{transform:translateX(var(--ancho,260px));opacity:0;}
}
.cierre-tag{
  font-family:'JetBrains Mono',monospace;font-size:clamp(9px,1vw,11px);
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);
  opacity:0;
}
.hero-cierre.visible .cierre-tag{animation:intro-tag 600ms var(--e-out) 700ms forwards;}

/* barrido naranja: marca el corte entre tomas */
.hero-scan{
  position:absolute;top:0;bottom:0;left:0;width:36%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(247,150,40,.10) 44%,rgba(247,150,40,.22) 52%,transparent);
  transform:translateX(-130%);opacity:0;
}
.hero-scan.corta{animation:barrido 1100ms cubic-bezier(.4,0,.2,1);}
@keyframes barrido{
  0%{transform:translateX(-130%);opacity:1;}
  100%{transform:translateX(320%);opacity:0;}
}

/* grano fino: quita el aspecto de video comprimido y unifica las cinco tomas */
.hero-grano{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* marcador de tomas */
/* El marcador vivía abajo a la DERECHA y ahí chocaba con el botón flotante de
   WhatsApp (right:20 bottom:20, 56x56): siempre que el hero llegaba al borde
   inferior de la ventana, el flotante se comía los clics de la última toma.
   Se pasa a la izquierda, donde además se lee mejor: el progreso avanza de
   izquierda a derecha, igual que la secuencia. */
.hero-tomas{
  position:absolute;left:var(--gut);bottom:22px;z-index:4;
  display:flex;gap:8px;align-items:center;
}
/* La barra se ve de 3px, pero el área que recibe el dedo mide 24px de alto:
   el relleno es transparente y no la agranda visualmente. WCAG 2.2 pide 24px
   mínimos de blanco de tiro, y 3px no se le atinan ni con ratón. */
.hero-tomas button{
  width:34px;height:3px;background:rgba(255,255,255,.28);border-radius:0;
  padding:11px 0;background-clip:content-box;box-sizing:content-box;
  position:relative;transition:background var(--t-micro) var(--e-out);
}
.hero-tomas button:hover{background:rgba(255,255,255,.5);}
.hero-tomas button[aria-current="true"]{background:rgba(255,255,255,.28);}
/* se acota al alto visible (3px), no al relleno de 24px que solo sirve de blanco
   de tiro: con inset:0 la barra de avance saldría 8 veces más gruesa */
.hero-tomas button[aria-current="true"]::after{
  content:"";position:absolute;top:11px;bottom:11px;left:0;right:0;background:var(--orange);
  transform-origin:0 50%;transform:scaleX(0);
  animation:toma-avanza var(--dur,5s) linear forwards;
}
@keyframes toma-avanza{to{transform:scaleX(1);}}
@media (max-width:700px){.hero-tomas{display:none;}}

/* Rescate cuando el navegador bloquea la reproducción automática. En celular
   pasa casi siempre y las rayitas de tomas ni se muestran, así que este botón
   es la única puerta al video: se queda visible y con área de dedo. */
.hero-play{
  position:absolute;left:var(--gut);bottom:40px;z-index:5;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(10,17,40,.72);color:var(--hi);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;backdrop-filter:blur(6px);
  transition:background var(--t-micro) var(--e-out),border-color var(--t-micro) var(--e-out);
}
.hero-play:hover{background:rgba(24,36,74,.9);border-color:var(--orange);}
.hero-play svg{width:14px;height:14px;color:var(--orange);}
.hero-play[hidden]{display:none;}
@media (max-width:700px){.hero-play{bottom:22px;}}

.hero-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* fuerte donde vive el texto, casi transparente donde queremos ver el metraje */
  background:
    linear-gradient(100deg,rgba(5,13,36,.94) 0%,rgba(5,13,36,.86) 32%,rgba(5,13,36,.44) 64%,rgba(5,13,36,.22) 100%),
    linear-gradient(to bottom,rgba(5,13,36,.5),transparent 34%,rgba(5,13,36,.62));
  z-index:2;
}
/* el titular ocupa el ancho completo para caber en dos líneas; la placa baja a
   la fila de abajo. Composición asimétrica en vez de dos columnas iguales. */
.hero-cols{
  display:grid;grid-template-columns:1fr .78fr;gap:52px;align-items:start;margin-top:34px;
}
.hero-title{font-size:clamp(34px,4.5vw,60px);margin:20px 0 0;color:#fff;}
.hero-title .line{display:block;}
.hero-title .accent{display:block;color:#fff;}
/* regla de acento bajo la segunda línea del titular: termina exactamente donde
   termina el texto. El naranja sobre papel no alcanza contraste para llevar
   texto, así que aquí trabaja como barra, no como color de letra. */
.hero-title .accent .mark{
  background-image:linear-gradient(var(--orange),var(--orange));
  background-size:100% 8px;
  background-position:0 92%;
  background-repeat:no-repeat;
}
.hero-sub{color:#C7D1E8;font-size:18.5px;max-width:44ch;}
.hero-ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}

/* placa de datos: cifras reales del catálogo, tratadas como nameplate de máquina */
/* sobre el hero oscuro la placa deja de ser un bloque navy (se perdería contra
   el fondo) y pasa a ser una placa translúcida sujeta con hairlines */
.plate{
  background:rgba(9,23,60,.55);color:#fff;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  position:relative;overflow:hidden;
}
.plate-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line-dark);
}
.plate-head span{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}
.plate-head .bolt{width:8px;height:8px;background:var(--orange);flex:none;}
.plate-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line-dark);
}
.plate-row:last-child{border-bottom:0;}
.plate-row .k{font-size:14.5px;color:rgba(255,255,255,.74);line-height:1.3;}
.plate-row .v{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:30px;
  color:var(--orange);line-height:1;flex:none;
}
.plate-row .v.small{font-size:17px;color:#fff;font-weight:500;}
.plate-foot{padding:12px 20px;background:rgba(3,10,30,.55);}
.plate-foot p{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.68);line-height:1.5;
}

@media (max-width:980px){
  .hero-inner{padding:56px var(--gut) 50px;}
  .hero-cols{grid-template-columns:1fr;gap:34px;align-items:stretch;}
}

/* ============================================================================
   FRANJA DE EVIDENCIA — lo que un comprador necesita saber sin preguntar.
   Sin puntos medios de adorno: cada dato es una celda con su hairline.
   ========================================================================== */
.evidence{border-bottom:1px solid var(--line);background:var(--base);}
.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.ev-cell{padding:22px 24px;border-right:1px solid var(--line);}
.ev-cell:first-child{padding-left:0;}
.ev-cell:last-child{border-right:0;}
.ev-cell .k{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.ev-cell .v{font-size:16px;font-weight:600;margin-top:7px;line-height:1.35;}
@media (max-width:820px){
  .evidence-grid{grid-template-columns:1fr 1fr;}
  .ev-cell{padding:18px;}
  .ev-cell:nth-child(2n){border-right:0;}
  .ev-cell:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .ev-cell:nth-child(3){padding-left:0;}
}

/* ============================================================================
   MARQUEE DE MARCAS — uno solo en toda la página.
   ========================================================================== */
.trust{padding:34px 0 30px;background:var(--base);border-bottom:1px solid var(--line);}
.trust .label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px;
}
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-track{display:flex;gap:0;width:max-content;animation:mq var(--dur,70s) linear infinite;}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.brand-wordmark{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100;
  font-weight:700;font-size:19px;color:#8A93A8;
  padding:0 26px;white-space:nowrap;border-right:1px solid var(--line);
  transition:color var(--t-micro) var(--e-out);
}
.marquee:hover .brand-wordmark{color:var(--hi);}

/* ============================================================================
   DOS LÍNEAS — dos paneles grandes. Se distinguen por etiqueta y marcador,
   no por un segundo color: el acento naranja es único en todo el sitio.
   ========================================================================== */
.lineas{padding:80px 0;background:var(--paper);border-bottom:1px solid var(--line);}
/* Tres líneas de negocio, tres paneles. A partir de 1100px se apilan de dos y
   luego de una: a tres columnas los títulos de dos palabras largas no caben. */
/* Con cinco paneles no se fija el número de columnas: se fija el ANCHO
   mínimo de un panel y que quepan los que quepan. A 1440 entran los cinco,
   a 1100 entran tres y dos, y en teléfono uno. Fijar cinco columnas dejaba
   los títulos de tres palabras partidos en cuatro renglones. */
.lineas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:16px;position:relative;z-index:1;}
@media (max-width:620px){.lineas-grid{grid-template-columns:1fr;gap:20px;}}
.lineas-5 .linea-card{padding:24px 22px 22px;}
.lineas-5 .linea-card h3{font-size:21px;min-height:2.4em;}
.linea-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 30px 26px;position:relative;
  transition:border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.linea-card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-ui) var(--e-out);
}
.linea-card:hover{border-color:var(--line-2);transform:translateY(-2px);}
.linea-card:hover::before{transform:scaleX(1);}
.linea-tag{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px;
}
.linea-tag .sq{width:9px;height:9px;background:var(--orange);flex:none;}
.linea-tag .sq.hollow{background:transparent;border:2px solid var(--orange);}
/* El tercer marcador. Con dos líneas bastaban lleno y hueco; el medio lleno es
   el escalón que faltaba y se sigue leyendo en blanco y negro. */
/* Cinco líneas, cinco marcadores. Van de lleno a hueco en cuatro escalones
   iguales: se distinguen entre sí sin meter un segundo color —el naranja
   sigue siendo el único acento del sitio— y se siguen leyendo impresos en
   blanco y negro, que es donde un marcador por color se cae. */
.linea-tag .sq.n1{background:var(--orange);border:2px solid var(--orange);}
.linea-tag .sq.n2{background:linear-gradient(90deg,var(--orange) 75%,transparent 75%);border:2px solid var(--orange);}
.linea-tag .sq.n3{background:linear-gradient(90deg,var(--orange) 50%,transparent 50%);border:2px solid var(--orange);}
.linea-tag .sq.n4{background:linear-gradient(90deg,var(--orange) 25%,transparent 25%);border:2px solid var(--orange);}
.linea-tag .sq.n5{background:transparent;border:2px solid var(--orange);}
.linea-card h3{font-size:26px;margin:14px 0 0;min-height:2.1em;}
.linea-card .count{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);
  margin-top:8px;display:flex;align-items:baseline;gap:7px;
}
.linea-card .count .n{font-size:22px;font-weight:700;color:var(--hi);}
.linea-card ul{list-style:none;margin:22px 0 0;border-top:1px solid var(--line);}
.linea-card li{
  font-size:15px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:11px;
}
.linea-card li::before{content:"";width:12px;height:1px;background:var(--line-2);flex:none;}
.linea-card .link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-weight:700;font-size:15px;color:var(--hi);
}
.linea-card .link svg{width:17px;height:17px;transition:transform var(--t-micro) var(--e-out);}
.linea-card:hover .link svg{transform:translateX(4px);}
@media (max-width:860px){.lineas-grid{grid-template-columns:1fr;}}

/* ============================================================================
   POR QUÉ — cuatro razones.

   ANTES había demasiada línea: tres divisores verticales entre columnas, la
   retícula de la sección, y encima la retícula del fondo global. Tres tramas de
   hairlines discutiendo en el mismo cuadro. Se lee como ruido, no como orden.

   Ahora hay UNA línea por razón, horizontal, arriba — y esa misma línea es el
   efecto: se dibuja de izquierda a derecha cuando la razón entra en cuadro. El
   número deja de ser una etiqueta chiquita y se vuelve el ancla visual, en
   grande y apagado, detrás del título. Separa el aire, no el trazo.
   ========================================================================== */
.porque{padding:88px 0;background:var(--base);border-bottom:1px solid var(--line);}
/* la retícula de la sección se apaga aquí: es la trama que más ruido sumaba */
.porque .rules{display:none!important;}
.porque-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;
  position:relative;z-index:1;
}
.porque-item{position:relative;padding:26px 0 0;}
/* la línea que se dibuja: es el divisor Y el efecto de entrada */
.porque-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line-2);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 620ms var(--e-out);
}
.porque-item.is-visible::before{transform:scaleX(1);}
.porque-item:nth-child(2)::before{transition-delay:110ms;}
.porque-item:nth-child(3)::before{transition-delay:220ms;}
.porque-item:nth-child(4)::before{transition-delay:330ms;}
/* el tramo naranja que corre por encima de la línea, del ancho del número */
.porque-item::after{
  content:"";position:absolute;top:0;left:0;width:34px;height:1px;
  background:var(--orange);box-shadow:0 0 10px var(--glow);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 520ms var(--e-out) 260ms;
}
.porque-item.is-visible::after{transform:scaleX(1);}

/* Numeral hueco. El relleno transparente SOLO se aplica si el navegador sabe
   dibujar el contorno; sin ese candado, donde no haya text-stroke el número
   queda invisible en vez de hueco. */
/* El numeral es un <p> dentro de .porque-item, así que ".porque-item p" (0,1,1)
   le gana a ".num-big" (0,1,0) y se llevaba el tamaño Y el color del párrafo:
   quedaba de 15px en gris en vez de 44px hueco. Por eso va calificado. */
.porque-item h3{font-size:19.5px;margin:16px 0 9px;transition:color var(--t-ui) var(--e-out);}
.porque-item p{font-size:15px;color:var(--muted);max-width:34ch;}
.porque-item .num-big{
  font-family:'JetBrains Mono',monospace;
  font-size:44px;font-weight:700;line-height:1;max-width:none;
  color:rgba(154,170,210,.62);
  transition:color 420ms var(--e-out),transform 420ms var(--e-out);
}
/* Relleno transparente SOLO si el navegador sabe dibujar el contorno; sin este
   candado, donde no haya text-stroke el número queda invisible en vez de hueco.
   Se pregunta por la longhand: la shorthand no siempre la reconoce @supports. */
@supports (-webkit-text-stroke-width:1px){
  .porque-item .num-big{
    color:transparent;-webkit-text-stroke:1px rgba(154,170,210,.62);
    transition:color 420ms var(--e-out),-webkit-text-stroke-color 420ms var(--e-out),
               transform 420ms var(--e-out);
  }
  .porque-item:hover .num-big{-webkit-text-stroke-color:var(--orange);}
}

/* al pasar el cursor la razón se enciende: el número se rellena de naranja y
   sube un pelo. Es el único movimiento de hover de la sección. */
.porque-item:hover .num-big{color:var(--orange);transform:translateY(-3px);}
.porque-item:hover h3{color:var(--hi);}

@media (max-width:900px){
  .porque-grid{grid-template-columns:1fr 1fr;gap:8px 34px;}
  .porque-item:nth-child(3)::before,.porque-item:nth-child(3)::after{transition-delay:110ms;}
  .porque-item:nth-child(4)::before,.porque-item:nth-child(4)::after{transition-delay:220ms;}
}
@media (max-width:560px){
  .porque-grid{grid-template-columns:1fr;}
  /* calificado igual que la regla base: ".num-big" a secas (0,1,0) no le gana a
     ".porque-item .num-big" (0,2,0) y esta media query no hacía nada */
  .porque-item .num-big{font-size:36px;}
  .porque-item p{max-width:none;}
}
/* ============================================================================
   CLIENTES — el muro de logos al pie de "Por qué EGOSA".
   ----------------------------------------------------------------------------
   Reusa el .marquee de las marcas: mismo mecanismo, misma máscara de bordes.

   Antes los logos entraban en SILUETA BLANCA, para que la fila se leyera pareja
   sobre la base oscura. Se veía ordenado y no servía: Power Street es rojo y
   blanco, Pispo turquesa, Braveus llamas rojas, Providence marino y oro. En
   silueta eran nueve manchas grises iguales y ningún comprador reconocía a
   nadie, que es exactamente para lo que está esa banda.

   Ahora entran A COLOR y lo que empareja la fila es otra cosa: una PLACA del
   mismo tamaño detrás de cada uno, con el logo centrado y con aire. Casi
   cualquier logo está diseñado para fondo claro, así que la placa es clara; la
   de Power Street es oscura porque su arte es blanco sobre negro. Al pasar el
   cursor la placa se levanta, toma el borde naranja del sitio y el track se
   detiene —regla global de .marquee:hover—, que es lo único que un comprador
   quiere de esa banda: poder leer quién le compra a EGOSA.
   ========================================================================== */
.clientes{margin-top:54px;padding-top:30px;border-top:1px solid var(--line);}
.clientes-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px;
}
/* El logo de un cliente es marca ajena. Decirlo en la página no es un trámite:
   es la diferencia entre un muro de clientes y una apropiación. */
.clientes-nota{font-size:12px;color:var(--tenue);margin:0 0 16px;}
.clientes .marquee-track{align-items:center;gap:12px;padding:6px 0 10px;}
.cliente-chip{
  flex:none;display:grid;place-items:center;
  width:196px;height:136px;padding:18px 22px;
  background:#fff;border:1px solid rgba(255,255,255,.08);border-radius:3px;
  transition:transform var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),
             box-shadow var(--t-ui) var(--e-out);
}
/* Power Street es blanco y rojo sobre negro: en placa clara desaparece medio
   logo. Lo marca parts/data_clientes.js y lo pinta js_post.js. */
.cliente-chip.placa-oscura{background:#0B0E15;border-color:rgba(255,255,255,.14);}
.cliente-chip:hover,.cliente-chip:focus-within{
  transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 10px 26px rgba(3,6,14,.5),0 0 0 1px var(--orange);
}
/* Se topa por alto Y por ancho. Solo por alto, un logo de cinco a uno como el
   de Montacargas Store se comería la placa de lado a lado; con los dos topes
   cada marca entra con el mismo aire y pesan parejo, que es lo que hace que una
   fila de logos ajenos se lea como una sola pieza y no como un collage. */
.cliente-chip img{max-height:100px;max-width:100%;width:auto;object-fit:contain;display:block;}
.cliente-chip .wm{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100;
  font-weight:700;font-size:20px;color:#0F1830;white-space:nowrap;
}
.cliente-chip.placa-oscura .wm{color:#EAEEF8;}
@media (max-width:560px){
  .clientes{margin-top:34px;}
  .clientes .marquee-track{gap:9px;}
  .cliente-chip{width:152px;height:106px;padding:13px 15px;}
  .cliente-chip img{max-height:78px;}
  .cliente-chip .wm{font-size:17px;}
}


/* ============================================================================
   LA BODEGA — la prueba física.
   ----------------------------------------------------------------------------
   La foto va A SANGRE, a los dos bordes de la pantalla, y es lo único de todo
   el sitio que se sale de la columna. La primera versión la metía en un marco
   de 700 px al lado de una tarjeta: se leía como "una sección con una foto".
   A sangre y alta se lee como estar parado enfrente, que es la diferencia entre
   ilustrar y probar.

   LA ENTRADA ES UNA SECUENCIA, NO UN LAZO. Cuando la sección entra en pantalla:
   la foto se asienta (escala 1.06 a 1), un barrido la recorre UNA vez, y la
   marca de la camioneta se dibuja sola: aparece el punto, se extiende el hilo y
   entra la etiqueta. Después queda quieta.

   Que TERMINE es la decisión de fondo. Un zoom lento que nunca para —el efecto
   obvio para "inmersivo"— es de lo que delata una plantilla, y además le quita
   nitidez a la única prueba que esta sección tiene. Una foto quieta de un
   edificio real se lee más seria. El movimiento aquí sirve para dirigir la
   mirada a la camioneta, y una vez que la dirigió, sobra.
   ========================================================================== */
.bodega{background:var(--paper);border-bottom:1px solid var(--line);padding:80px 0 0;}
.bodega .section-head{margin-bottom:30px;}

/* ---- la escena ---- */
.bodega-escena{position:relative;overflow:hidden;background:var(--base);
  height:clamp(300px,54vh,640px);border-block:1px solid var(--line-2);}

/* El fondo lleva las fotos, el velo Y la marca: se escala como una sola pieza,
   así la marca nunca se despega de la camioneta durante la entrada. */
.bodega-fondo{position:absolute;inset:0;transform:scale(1.06);transform-origin:50% 62%;
  transition:transform 1500ms var(--e-out);}
.bodega-escena.entro .bodega-fondo{transform:scale(1);}
.bodega-capas{position:absolute;inset:0;}
/* El 64% no es estético: con la foto a 4:3 en una banda a sangre el recorte
   vertical es fuerte, y con el encuadre al centro la CAMIONETA se salía de
   cuadro en pantalla ancha. Se pierde algo de techo y se conserva lo que esta
   sección viene a probar. El JS lee este mismo valor para colocar la marca. */
.bodega-capas img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 64%;
  opacity:0;transition:opacity 620ms var(--e-out);}
.bodega-capas img.viva{opacity:1;}

/* Velo: arriba apenas, para que la banda no compita con la sección de encima;
   abajo firme, porque ahí viven las coordenadas y el selector de toma. */
.bodega-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(7,12,26,.40) 0%, rgba(7,12,26,0) 24%,
    rgba(7,12,26,0) 46%, rgba(7,12,26,.86) 100%);}

/* El barrido: una banda de luz que cruza la foto UNA vez, como el paso de un
   escáner. Es primo del barrido del mapa de cobertura, que sale de este mismo
   punto: las dos secciones hablan el mismo idioma. */
.bodega-escaneo{position:absolute;z-index:3;top:-10%;bottom:-10%;width:42%;left:0;
  pointer-events:none;opacity:0;transform:skewX(-12deg) translateX(-140%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 42%,
    rgba(247,150,40,.20) 62%, rgba(255,255,255,.34) 76%,
    rgba(255,255,255,.62) 81%, rgba(255,255,255,0) 84%);}
.bodega-escena.entro .bodega-escaneo{animation:bodegaBarrido 1250ms var(--e-inout) 320ms 1 forwards;}
@keyframes bodegaBarrido{
  0%  {opacity:0;   transform:skewX(-12deg) translateX(-140%);}
  18% {opacity:1;}
  82% {opacity:1;}
  100%{opacity:0;   transform:skewX(-12deg) translateX(330%);}
}

/* Corchete de visor: el mismo lenguaje de instrumento del mapa de cobertura y
   de los numerales huecos. Dice "esto es un registro", no "esto es una postal". */
.bodega-escena::before{content:"";position:absolute;z-index:5;top:18px;left:18px;
  width:24px;height:24px;border:2px solid var(--orange);border-right:0;border-bottom:0;
  pointer-events:none;opacity:0;transform:translate(-6px,-6px);
  transition:opacity 420ms var(--e-out) 820ms,transform 420ms var(--e-out) 820ms;}
.bodega-escena.entro::before{opacity:1;transform:none;}

/* ---- la marca que señala la camioneta ----
   La coloca el JS en PIXELES, no en porcentaje: con object-fit:cover la foto se
   recorta, así que el 51.5% de la imagen no es el 51.5% de la caja. Si el
   recorte se come la camioneta, el JS la esconde en vez de dejarla señalando el
   cielo. Y se dibuja por partes: punto, hilo, etiqueta.
   El retardo lo pone el JS en --retardo: largo la primera vez (para que la
   secuencia se lea) y cero al cambiar de toma, donde estorba. */
.bodega-marca{position:absolute;z-index:4;display:flex;align-items:center;
  transform:translateY(-50%);pointer-events:none;opacity:0;}
.bodega-marca.izq{flex-direction:row-reverse;transform:translate(-100%,-50%);}
.bodega-escena.entro .bodega-marca.viva{opacity:1;
  transition:opacity 260ms var(--e-out) var(--retardo,0ms);}
.bodega-marca .pt{flex:none;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px rgba(247,150,40,.26);
  transform:scale(0);transition:transform 380ms var(--e-out) var(--retardo,0ms);}
.bodega-marca.izq .pt{margin-left:0;margin-right:-5px;}
.bodega-escena.entro .bodega-marca.viva .pt{transform:scale(1);}
.bodega-marca .ln{flex:none;width:0;height:1px;background:var(--orange);opacity:.9;
  transition:width 340ms var(--e-out) calc(var(--retardo,0ms) + 150ms);}
.bodega-escena.entro .bodega-marca.viva .ln{width:clamp(16px,3.2vw,44px);}
.bodega-marca b{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:#0B1226;background:var(--orange);padding:5px 9px;border-radius:var(--r);
  opacity:0;transform:translateX(-8px);
  transition:opacity 300ms var(--e-out) calc(var(--retardo,0ms) + 360ms),
             transform 300ms var(--e-out) calc(var(--retardo,0ms) + 360ms);}
.bodega-marca.izq b{transform:translateX(8px);}
.bodega-escena.entro .bodega-marca.viva b{opacity:1;transform:none;}

/* ---- el HUD: coordenadas a la izquierda, tomas a la derecha ---- */
.bodega-hud{position:absolute;z-index:6;left:0;right:0;bottom:0;
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  opacity:0;transform:translateY(12px);
  transition:opacity 520ms var(--e-out) 900ms,transform 520ms var(--e-out) 900ms;}
.bodega-escena.entro .bodega-hud{opacity:1;transform:none;}
.bodega-coord{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;background:rgba(7,12,26,.7);
  border:1px solid var(--line-2);border-radius:var(--r);backdrop-filter:blur(8px);
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);}
.bodega-coord svg{width:13px;height:13px;color:var(--orange);flex:none;}
.bodega-coord:hover,.bodega-coord:focus-visible{border-color:var(--orange);color:var(--hi);}

/* El selector de toma va numerado, no en miniaturas: en una banda a sangre las
   miniaturas se leen como una galería de fotos y esto no es una galería. */
.bodega-tomas{display:flex;gap:6px;flex:none;}
.bodega-tomas button{cursor:pointer;padding:8px 12px;border-radius:var(--r);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;
  color:var(--muted);background:rgba(7,12,26,.7);border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  transition:color var(--t-ui) var(--e-out),background var(--t-ui) var(--e-out),
             border-color var(--t-ui) var(--e-out);}
.bodega-tomas button:hover{color:var(--ink);}
.bodega-tomas button[aria-current="true"]{color:#0B1226;background:var(--orange);border-color:var(--orange);}

/* ---- la tira de instrumento ---- */
.bodega-tira{background:var(--surface);padding:32px 0 36px;}
.bodega-datos{display:grid;grid-template-columns:1fr;}
.bodega-datos > div{padding:14px 0;border-bottom:1px solid var(--line);}
.bodega-datos > div:first-child{padding-top:0;}
.bodega-datos > div:last-child{border-bottom:0;}
@media (min-width:800px){
  .bodega-datos{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bodega-datos > div{padding:0 22px 0 0;border-bottom:0;}
  .bodega-datos > div + div{border-left:1px solid var(--line);padding-left:22px;}
}
.bodega-datos dt{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.bodega-datos dd{font-size:15px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.bodega-datos dd.mono{font-family:'JetBrains Mono',monospace;font-size:13px;}
.bodega-datos dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);}
.bodega-datos dd a:hover{color:var(--orange);border-bottom-color:var(--orange);}
.bodega-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.bodega-pie{margin-top:20px;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:74ch;}

@media (max-width:640px){
  .bodega{padding-top:56px;}
  .bodega-escena{height:clamp(260px,42vh,400px);}
  .bodega-hud{padding:0 20px 16px;align-items:stretch;flex-direction:column;gap:9px;}
  .bodega-tomas{justify-content:flex-start;}
  .bodega-coord{align-self:flex-start;font-size:10.5px;padding:7px 10px;}
  .bodega-marca b{font-size:9px;padding:4px 7px;letter-spacing:.06em;}
  .bodega-escaneo{width:60%;}
  .bodega-acciones .cta-btn,.bodega-acciones .cta-ghost{flex:1 1 100%;text-align:center;}
}

/* A quien pide menos movimiento se le entrega la escena ARMADA, no a medias:
   la foto en su tamaño, la marca puesta y el HUD visible. Lo que se quita es el
   recorrido, no el contenido. */
@media (prefers-reduced-motion:reduce){
  .bodega-fondo{transform:none;transition:none;}
  .bodega-escaneo{display:none;}
  .bodega-escena::before,.bodega-hud{opacity:1;transform:none;transition:none;}
  .bodega-marca.viva{opacity:1;}
  .bodega-marca .pt{transform:scale(1);}
  .bodega-marca .ln{width:clamp(16px,3.2vw,44px);}
  .bodega-marca b{opacity:1;transform:none;}
  .bodega-marca,.bodega-marca *{transition:none!important;}
}

/* ============================================================================
   COBERTURA — el mapa como pantalla de despacho.

   El trazo es el contorno oficial de México en GeoJSON proyectado en Mercator
   (ver parts/mapa/proyecta.ps1), no un polígono a ojo como el que hubo que
   retirar. Las rutas salen de Querétaro porque ahí está la base, y el barrido
   es un anillo que sale del mismo punto: la lectura es "de aquí sale todo".

   Nada de esto es información nueva — la lista de al lado dice lo mismo y es la
   que leen los lectores de pantalla. El mapa está para que se entienda de un
   vistazo lo que la lista dice en ocho renglones.
   ========================================================================== */
.mx-section{padding:80px 0;background:var(--paper);border-bottom:1px solid var(--line);}

.mapa-caja{position:relative;}
.mapa{width:100%;height:auto;display:block;overflow:visible;}

/* --- contorno: se dibuja solo al entrar en cuadro --------------------------
   El trazo mide ~4600 unidades. Se usa pathLength para no depender de esa
   medida: así el dibujado dura lo mismo aunque el trazo cambie. */
.mx-contorno{
  fill:none;stroke:rgba(200,214,245,.55);stroke-width:1.6;
  stroke-linejoin:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2200ms var(--e-inout);
}
[data-reveal].is-visible .mx-contorno{stroke-dashoffset:0;}

/* --- rutas desde la base -------------------------------------------------- */
.ruta{
  fill:none;stroke:var(--orange);stroke-width:1.6;opacity:.42;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 900ms var(--e-out),opacity var(--t-ui) var(--e-out),
             stroke-width var(--t-ui) var(--e-out);
}
[data-reveal].is-visible .ruta{stroke-dashoffset:0;}
/* escalonadas: salen de la base una tras otra, no todas de golpe */
[data-reveal].is-visible .ruta:nth-child(1){transition-delay:1500ms;}
[data-reveal].is-visible .ruta:nth-child(2){transition-delay:1640ms;}
[data-reveal].is-visible .ruta:nth-child(3){transition-delay:1780ms;}
[data-reveal].is-visible .ruta:nth-child(4){transition-delay:1920ms;}
[data-reveal].is-visible .ruta:nth-child(5){transition-delay:2060ms;}
[data-reveal].is-visible .ruta:nth-child(6){transition-delay:2200ms;}

/* --- plazas --------------------------------------------------------------- */
.nodo .punto{fill:var(--orange);transition:r var(--t-ui) var(--e-out);}
.nodo .halo{fill:rgba(247,150,40,.16);opacity:0;transition:opacity var(--t-ui) var(--e-out);}
.nodo.base .punto{fill:#fff;}
.nodo.base .anillo{
  fill:none;stroke:var(--orange);stroke-width:1.6;
  transform-origin:552.1px 449px;
  animation:base-late 2.8s var(--e-inout) infinite;
}
@keyframes base-late{
  0%,100%{transform:scale(.72);opacity:1;}
  70%,100%{transform:scale(1.5);opacity:0;}
}

/* --- barrido: un anillo que sale de la base cada tanto --------------------- */
.mx-barrido{
  fill:none;stroke:var(--orange);stroke-width:1.4;
  transform-origin:552.1px 449px;opacity:0;
  animation:barrido-mx 6s linear infinite;
}
@keyframes barrido-mx{
  0%{transform:scale(.4);opacity:.55;}
  70%{opacity:0;}
  100%{transform:scale(11);opacity:0;}
}

/* --- el enlace entre la lista y el mapa -----------------------------------
   Señalar una plaza en la lista la enciende en el mapa, y al revés. Es lo único
   que hace el JS de esta sección: poner una clase. */
.plazas li.senalada{background:rgba(247,150,40,.10);}
.nodo.senalado .punto{r:8;}
.nodo.senalado .halo{opacity:1;}
.ruta.senalada{opacity:1;stroke-width:2.6;}

.mapa-pie{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.mapa-pie b{
  margin-left:auto;font-weight:700;color:var(--orange);
  border:1px solid rgba(247,150,40,.42);border-radius:2px;padding:3px 9px;
}
@media (max-width:520px){ .mapa-pie b{margin-left:0;} }
.mapa-pie .sq{width:8px;height:8px;background:var(--orange);flex:none;border-radius:50%;}

/* Dentro del layout de dos columnas la lista va en UNA columna: el grid de dos
   que traía era para cuando ocupaba el ancho completo. */
.mx-layout .plazas{grid-template-columns:1fr;}
.plazas{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;border-top:1px solid var(--line-2);}
.plazas li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.plazas .ciudad{font-size:16.5px;font-weight:600;}
.plazas .rol{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  color:var(--muted);text-align:right;
}
.plazas .base .ciudad{color:var(--hi);}
.plazas .base .rol{color:var(--orange-700);}
.plazas .base{border-bottom-color:var(--hi);}
@media (max-width:760px){.plazas{grid-template-columns:1fr;}}

/* salida de contacto cuando el entorno bloquea abrir WhatsApp */
.wa-salida{
  position:fixed;top:0;left:0;right:0;height:min(100vh,760px);z-index:210;
  background:rgba(8,21,54,.72);display:flex;align-items:center;justify-content:center;padding:20px;
}
.wa-salida[hidden]{display:none;}
.wa-salida-caja{
  background:var(--surface);border-radius:var(--r);max-width:460px;width:100%;padding:28px;position:relative;
  border:1px solid var(--line-2);
}
.wa-salida .wa-x{
  position:absolute;top:10px;right:10px;width:36px;height:36px;font-size:24px;line-height:1;
  border:1px solid var(--line);border-radius:var(--r);
}
.wa-salida .k{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.wa-salida .num{
  display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;
  font-weight:800;font-size:32px;color:var(--hi);margin-top:6px;
}
.wa-salida textarea{
  width:100%;margin-top:8px;border:1px solid var(--line-2);border-radius:var(--r);
  padding:11px 12px;font:14px/1.5 'Barlow',sans-serif;resize:vertical;background:var(--paper);
}
.wa-acciones{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.wa-acciones > *{flex:1;min-width:150px;}
.wa-salida .nota{font-size:13px;color:var(--muted);margin-top:14px;}
.mx-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;position:relative;z-index:1;}
.mx-map-wrap{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 20px;
}
.mx-map-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 44px);
  opacity:.62;
}
.mx-map{width:100%;height:auto;position:relative;}
.mx-shape{fill:rgba(15,34,82,.05);stroke:var(--navy);stroke-width:1.4;stroke-linejoin:round;}
.mx-dot{fill:var(--navy);opacity:.5;}
.mx-pulse{fill:var(--orange);opacity:.3;transform-origin:center;}
.mx-map-label{
  position:relative;margin-top:14px;display:flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.mx-map-label .dot{width:9px;height:9px;background:var(--orange);flex:none;}
.plaza-list{list-style:none;border-top:1px solid var(--line-2);}
.plaza-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.plaza-list .code{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.06em;
}
@media (max-width:900px){.mx-layout{grid-template-columns:1fr;gap:30px;}}

/* ============================================================================
   BANDA DE CIERRE — cromo navy, no un cambio de tema a media página.
   ========================================================================== */
.cta-final{
  background:var(--navy);color:#fff;border-radius:var(--r);
  padding:52px 48px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.cta-final h2{font-size:clamp(24px,2.7vw,34px);max-width:20ch;position:relative;z-index:1;}
.cta-final h2::after{display:none;}
.cta-final-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1;}
.cta-band{padding:70px 0;background:var(--base);}

/* ============================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
.page-hero{background:var(--paper);border-bottom:1px solid var(--line);padding:62px 0 54px;overflow:hidden;}
.page-hero .inner{position:relative;z-index:1;}
.page-title{font-size:clamp(34px,4.4vw,56px);margin:18px 0 0;}
.page-sub{color:var(--muted);font-size:18px;max-width:58ch;margin-top:18px;}

/* ============================================================================
   BUSCADOR DEL CATÁLOGO — en este mercado el buscador ES el producto
   (Grainger, McMaster, Truper). Busca por categoría, producto y marca.
   ========================================================================== */
.search-block{margin-top:30px;max-width:720px;position:relative;z-index:2;}
.search-field{
  display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1.5px solid var(--orange);border-radius:var(--r);padding:0 16px;
  transition:box-shadow var(--t-micro) var(--e-out);
}
.search-field:focus-within{box-shadow:0 0 0 3px rgba(247,150,40,.35);}
.search-field svg{width:20px;height:20px;color:var(--muted);flex:none;}
.search-field input{
  flex:1;border:0;outline:0;background:transparent;padding:15px 0;font-size:16.5px;min-width:0;
}
.search-field input::placeholder{color:#98A1B5;}
.search-clear{
  flex:none;width:30px;height:30px;display:none;align-items:center;justify-content:center;
  color:var(--muted);border-radius:var(--r);
}
.search-clear:hover{background:var(--paper-2);color:var(--ink);}
.search-clear.show{display:flex;}
.search-hint{
  margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  color:var(--muted);letter-spacing:.04em;
}

/* barra de herramientas del catálogo: conteo + cambio de vista */
.cat-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--line-2);margin-bottom:26px;
  position:sticky;top:72px;background:rgba(7,12,26,.92);backdrop-filter:blur(8px);z-index:20;
}
.cat-count{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);letter-spacing:.04em;}
.cat-count b{color:var(--hi);font-weight:700;}
.view-switch{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;}
.view-switch button{
  display:flex;align-items:center;gap:7px;padding:8px 13px;font-size:13px;font-weight:600;
  color:var(--muted);transition:background var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out);
}
.view-switch button + button{border-left:1px solid var(--line-2);}
.view-switch button svg{width:15px;height:15px;}
.view-switch button[aria-pressed="true"]{background:var(--navy);color:#fff;}

.cat-section{padding:54px 0 64px;}
.cat-section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cat-head{display:flex;align-items:center;gap:18px;margin-bottom:26px;}
.cat-head-left{display:flex;align-items:center;gap:16px;}
.cat-head img{width:46px;height:46px;object-fit:contain;}
.cat-head h2{font-size:26px;}
.cat-head h2::after{display:none;}
.cat-head .count{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);margin-top:4px;}

/* ---- vista retícula ---- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;}
.cat-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(10px);
  transition:opacity 380ms var(--e-out),transform 380ms var(--e-out),border-color var(--t-ui) var(--e-out);
}
.cat-card.is-visible{opacity:1;transform:none;}
.cat-card:hover{border-color:var(--hi);}
.cat-card:focus-within{border-color:var(--hi);}

/* la foto: encuadre, fondo y tamaño normalizados. Eso unifica más que el filtro. */
.thumb{
  position:relative;aspect-ratio:5/4;background:var(--navy-900);
  border-bottom:1px solid var(--line);overflow:hidden;flex:none;
  /* la mezcla se queda dentro de la miniatura: sin esto Safari deja que el
     mix-blend-mode se filtre hacia lo que haya detrás de la tarjeta */
  isolation:isolate;
}
/* La foto va a sangre y recortada, no encajonada con aire alrededor: es lo que
   convierte una retícula de fichas en una retícula que se ve.
   El filtro y la mezcla cambian de golpe, sin transición: animarlos sobre 24
   imágenes en la misma retícula obliga al navegador a repintarlas completas. */
.thumb img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);
}
/* las fotos de producto sobre fondo blanco sí necesitan aire: encuadrarlas a
   sangre les cortaría el producto */
.thumb.color-critico img,.thumb.mini img{object-fit:contain;padding:10px;background:var(--paper-2);}
/* El duotono se retiró: teñir 24 fotos de azul y ámbar metía ruido y peleaba
   con el producto. Ahora la foto se ve como es. Lo que unifica la retícula es el
   encuadre y el tamaño, que era lo que de verdad hacía el trabajo. */
.thumb::after{content:none;}
/* el color vuelve al pasar el cursor, al enfocar y al abrir la ficha */
.cat-card:hover .thumb img,.cat-card:focus-within .thumb img{filter:none;}
.cat-card:hover .thumb::after,.cat-card:focus-within .thumb::after{opacity:0;}
/* categorías donde el color codifica función o seguridad: nunca se filtran */
.thumb.color-critico img{filter:none;}
.thumb.color-critico::after{opacity:0;}
/* en táctil no hay hover: el color se muestra siempre */
@media (hover:none){
  .thumb img{filter:none;}
  .thumb::after{opacity:0;}
}
.thumb .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;color:var(--hi);background:var(--paper-2);
  background-image:
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 22px);
}
.thumb .ph svg{width:36px;height:36px;opacity:.55;}
.thumb .ph span{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:center;padding:0 12px;
}
.cat-body{padding:15px 16px 0;flex:1;display:flex;flex-direction:column;}
.cat-card h3{font-size:16.5px;line-height:1.2;}
.cat-brands{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  margin-top:8px;line-height:1.55;letter-spacing:0;
}
.cat-brands .mas{color:var(--hi);font-weight:700;}
.cat-brands.pend{color:#8A93A8;font-style:normal;}
.cat-actions{
  display:flex;gap:0;margin-top:14px;border-top:1px solid var(--line);
  position:relative;z-index:2;   /* por encima del botón que cubre la tarjeta */
}
.cat-actions button,.cat-actions a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;font-size:13px;font-weight:700;color:var(--hi);
  transition:background var(--t-micro) var(--e-out);position:relative;z-index:2;
  min-height:44px;
}
.cat-actions > * + *{border-left:1px solid var(--line);}
.cat-actions button:hover,.cat-actions a:hover{background:var(--paper-2);}
.cat-actions svg{width:15px;height:15px;flex:none;}
.cat-actions .added{color:var(--orange-700);}

/* el botón que abre la ficha cubre la tarjeta, sin anidar controles */
.cat-open{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  font-size:0;color:transparent;
}

/* ---- vista lista compacta: para comparar rápido, densidad 8 ---- */
.cat-grid.as-list{display:block;border-top:1px solid var(--line-2);}
.cat-grid.as-list .cat-card{
  flex-direction:row;align-items:center;gap:16px;border:0;
  border-bottom:1px solid var(--line);border-radius:0;padding:0;
}
.cat-grid.as-list .cat-card:hover{background:var(--paper);border-color:var(--line);}
.cat-grid.as-list .thumb{width:64px;height:64px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line);}
.cat-grid.as-list .thumb img{padding:7px;}
.cat-grid.as-list .thumb .ph svg{width:20px;height:20px;}
.cat-grid.as-list .thumb .ph span{display:none;}
.cat-grid.as-list .cat-body{
  flex-direction:row;align-items:center;gap:18px;padding:10px 0;flex:1;min-width:0;
}
.cat-grid.as-list .cat-card h3{flex:0 0 32%;font-size:15.5px;}
.cat-grid.as-list .cat-brands{margin-top:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-grid.as-list .cat-actions{margin-top:0;border-top:0;flex:none;}
.cat-grid.as-list .cat-actions > * + *{border-left:1px solid var(--line);}
.cat-grid.as-list .cat-actions button,.cat-grid.as-list .cat-actions a{padding:11px 16px;}
@media (max-width:760px){
  .cat-grid.as-list .cat-body{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0;}
  .cat-grid.as-list .cat-card h3{flex:none;}
}

/* estado vacío del buscador */
.empty-state{
  border:1px dashed var(--line-2);border-radius:var(--r);padding:44px 28px;text-align:center;
  background:var(--paper);
}
.empty-state h3{font-size:20px;}
.empty-state p{color:var(--muted);margin-top:10px;font-size:15.5px;}
.empty-state .cta-btn{margin-top:20px;}

/* selector de línea en el hero del catálogo */
.line-switch{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;position:relative;z-index:1;}
.line-switch a{
  display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 16px;font-size:14.5px;font-weight:600;
  transition:border-color var(--t-micro) var(--e-out);
}
.line-switch a:hover{border-color:var(--hi);}
.line-switch .sq{width:10px;height:10px;background:var(--orange);flex:none;}
/* Los mismos cinco escalones del marcador, también en el conmutador: si aquí
 quedaran los cinco iguales, el conmutador dejaría de decir a qué línea
 corresponde cada botón. */
.line-switch .sq.n1{background:var(--orange);border:2px solid var(--orange);}
.line-switch .sq.n2{background:linear-gradient(90deg,var(--orange) 75%,transparent 75%);border:2px solid var(--orange);}
.line-switch .sq.n3{background:linear-gradient(90deg,var(--orange) 50%,transparent 50%);border:2px solid var(--orange);}
.line-switch .sq.n4{background:linear-gradient(90deg,var(--orange) 25%,transparent 25%);border:2px solid var(--orange);}
.line-switch .sq.n5{background:transparent;border:2px solid var(--orange);}
.cat-head .linea-tag{flex:none;}
.cat-head-left{flex-wrap:wrap;}

/* descarga del catálogo */
.download-block{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:var(--r);padding:26px 28px;background:var(--surface);
}
.download-left{display:flex;align-items:center;gap:20px;}
.file-icon{
  width:46px;height:46px;border:1px solid var(--line-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--hi);flex:none;
}
.file-icon svg{width:23px;height:23px;}
.download-block h2{font-size:21px;}
.download-block h2::after{display:none;}
.download-block p{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:6px;
}

/* ============================================================================
   NOSOTROS
   ========================================================================== */
.diff-block{
  background:var(--navy);color:#fff;border-radius:var(--r);padding:44px 44px;
  border-left:3px solid var(--orange);
}
.diff-block h2{font-size:clamp(23px,2.6vw,32px);}
.diff-block h2::after{display:none;}
.diff-block p{color:rgba(255,255,255,.78);margin-top:16px;max-width:66ch;font-size:16.5px;}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);}
.step-card{padding:24px 24px 24px 0;border-right:1px solid var(--line);position:relative;}
.step-card:first-child{padding-left:0;}
.step-card + .step-card{padding-left:24px;}
.step-card:last-child{border-right:0;padding-right:0;}
.step-n{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--orange);
}
.step-card h3{font-size:18px;margin:12px 0 8px;}
.step-card p{font-size:15px;color:var(--muted);}
.step-arrow{display:none;}
@media (max-width:900px){
  .steps-grid{grid-template-columns:1fr 1fr;}
  .step-card:nth-child(2n){border-right:0;}
  .step-card:nth-child(3){padding-left:0;}
}
@media (max-width:560px){
  .steps-grid{grid-template-columns:1fr;}
  .step-card{border-right:0;border-bottom:1px solid var(--line);padding:20px 0!important;}
  .step-card:last-child{border-bottom:0;}
}
.lineas-mini{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
/* La variante de tres. Se apila antes que la de dos porque cada panel lleva un
   título de tres o cuatro palabras y una línea de cifras debajo. */
/* Cinco mini-paneles: mismo criterio que la retícula de líneas, ancho mínimo
   en vez de número fijo de columnas. */
.lineas-mini.lineas-mini-5{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;}
@media (max-width:620px){.lineas-mini.lineas-mini-5{grid-template-columns:1fr;}}
.linea-mini{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;background:var(--surface);
  transition:border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.linea-mini:hover{border-color:var(--hi);transform:translateY(-2px);}
.linea-mini h3{font-size:19px;}
.linea-mini p{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:7px;}
.link-arrow svg{width:20px;height:20px;color:var(--hi);}
@media (max-width:760px){.lineas-mini{grid-template-columns:1fr;}}

/* ============================================================================
   CONTACTO
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start;}
.info-card{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--surface);}
.info-row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);}
.info-row:first-child{padding-top:0;}
.info-icon{
  width:38px;height:38px;border:1px solid var(--line-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--hi);flex:none;
}
.info-icon svg{width:19px;height:19px;}
.info-row h4{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}
.info-row a,.info-row p{font-size:16px;margin-top:5px;display:block;}
.info-row a{font-weight:600;color:var(--hi);}
.info-row a:hover{text-decoration:underline;}
.info-card .cta-btn{width:100%;margin:20px 0 4px;}
.info-note{font-size:14px;color:var(--muted);margin-top:16px;}
.contact-form{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--surface);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{margin-bottom:16px;display:flex;flex-direction:column;}
.form-field label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 13px;
  font-size:16px;background:var(--surface);transition:border-color var(--t-micro) var(--e-out);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--hi);outline:none;box-shadow:0 0 0 3px rgba(247,150,40,.3);
}
.form-field textarea{min-height:120px;resize:vertical;font-family:inherit;}
.form-submit{width:100%;margin-top:6px;}
.form-note{font-size:13.5px;color:var(--muted);margin-top:12px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}

/* ============================================================================
   MODAL categoría → ficha
   ========================================================================== */
/* ============================================================================
   FICHA EN LÍNEA
   ----------------------------------------------------------------------------
   La ficha se abre dentro de la retícula, ocupando la fila completa debajo de
   la tarjeta que se picó. No es capricho de diseño: cuando la página va
   embebida, el contenedor estira el marco a la altura de todo el documento, y
   ahí position:fixed deja de significar "centrado en pantalla" — la ficha se
   abriría a miles de píxeles de donde el usuario está viendo.
   ========================================================================== */
/* Se revela con opacidad y desplazamiento, NO animando la altura. Animar
   max-height desde 0 deja el elemento sin caja durante ese primer instante, y
   un navegador no le da el foco a algo que todavía no se dibuja: el teclado
   quedaba fuera de la ficha justo al abrirla. */
.cat-detalle{
  grid-column:1 / -1;margin:6px 0 14px;
  opacity:0;transform:translateY(-6px);
  transition:opacity 260ms var(--e-out),transform 320ms var(--e-out);
}
.cat-detalle[data-open]{opacity:1;transform:none;}
.cat-grid.as-list .cat-detalle{display:block;}
.cat-modal.inline{
  max-width:none;width:100%;max-height:none;overflow:visible;
  transform:none;opacity:1;border:1px solid var(--navy);
  display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);
  align-items:start;background:var(--surface);
}
.cat-modal.inline .modal-view{display:contents;}
.cat-modal.inline .prod-photo{aspect-ratio:4/3;border-right:1px solid var(--line);border-bottom:0;}
.cat-modal.inline .modal-pad{padding:26px 28px 28px;}
.cat-modal.inline .cat-modal-line{margin-top:0;}
.cat-modal.inline #view-prod .modal-pad:first-child{grid-column:1 / -1;padding-bottom:0;}
.cat-card[data-abierta]{border-color:var(--hi);box-shadow:0 0 0 1px var(--navy);}
@media (max-width:820px){
  .cat-modal.inline{grid-template-columns:1fr;}
  .cat-modal.inline .prod-photo{border-right:0;border-bottom:1px solid var(--line);}
}

.cat-modal-backdrop{
  position:fixed;inset:0;z-index:90;background:rgba(8,21,54,.62);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;pointer-events:none;transition:opacity var(--t-ui) var(--e-out);
  backdrop-filter:blur(3px);
}
.cat-modal-backdrop[data-open]{opacity:1;pointer-events:auto;}
.cat-modal{
  background:var(--surface);border-radius:var(--r);max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;position:relative;padding:0 0 26px;
  transform:scale(.96);opacity:0;
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) var(--e-out);
}
.cat-modal-backdrop[data-open] .cat-modal{transform:scale(1);opacity:1;}
.cat-modal-close{
  position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;
  background:rgba(17,28,58,.92);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
}
.cat-modal-close:hover{background:var(--paper-2);}
.modal-pad{padding:0 30px;}
.prod-photo{
  position:relative;aspect-ratio:16/10;background:var(--paper-2);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.prod-photo img{width:100%;height:100%;object-fit:contain;padding:26px;}
.prod-photo .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:var(--hi);
  background-image:
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 26px);
}
.prod-photo .ph svg{width:48px;height:48px;opacity:.5;}
.prod-photo .ph span{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.cat-modal-line{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:24px;
}
.cat-modal h3{font-size:25px;margin-top:10px;}
.cat-modal h3::after{display:none;}
.cat-modal-desc{color:var(--muted);margin-top:12px;font-size:15.5px;}
.cat-modal-brands{
  font-size:14.5px;color:var(--ink);margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line);line-height:1.6;
}
.cat-modal-brands strong{font-weight:600;color:var(--hi);}
.prod-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:24px;padding-bottom:9px;border-bottom:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
/* la lista de productos deja de ser texto plano: cada renglón lleva su imagen,
   sea foto real del catálogo o la placa técnica generada */
.prod-list{display:flex;flex-direction:column;}
.prod-row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:13px;width:100%;
  padding:10px 0;border-bottom:1px solid var(--line);text-align:left;font-size:15px;
  transition:background var(--t-micro) var(--e-out);
}
.prod-row:hover{background:var(--paper);}
.thumb.mini{
  width:56px;height:42px;aspect-ratio:auto;border-bottom:0;border:1px solid var(--line);
  display:block;flex:none;
}
.thumb.mini img{padding:4px;}
.thumb.placa-wrap{background:transparent;border-color:var(--line);}
.thumb .placa{width:100%;height:100%;display:block;}

/* ---- imágenes que rellenan el hueco de las fotos que no existen -----------
   La ilustración YA trae su propio plato dibujado (fondo, trama y marca de
   esquina) en la proporción 5:4 de la tarjeta: encaja exacta, así que va a
   cover, sin relleno y sin filtro. Ponerle el padding de las miniaturas
   dejaría un marco doble. */
.thumb.ilustrada{background:var(--surface);}
.thumb.ilustrada img{object-fit:cover;padding:0;background:none;filter:none;}

/* La genérica es la imagen de la categoría reusada en un producto. Va un punto
   más apagada que una foto propia: la diferencia se nota al comparar dos
   renglones y evita que se lea como "esta es la foto de ESTE producto".
   Al pasar el cursor se aviva, para que se pueda ver bien si el usuario quiere. */
.thumb.mini.generica img{padding:0;object-fit:cover;opacity:.72;
  transition:opacity var(--t-micro) var(--e-out);}
.prod-row:hover .thumb.mini.generica img{opacity:1;}

/* La de referencia SÍ es del producto que dice el renglón —una distinta por
   cada uno—, solo que no es el artículo exacto que surte EGOSA. Por eso va casi
   a plena luz: apagarla como la de categoría sería castigar la imagen correcta.
   El renglón se lee de un vistazo y el rótulo de la derecha dice qué es. */
.thumb.mini.referencia img{padding:0;object-fit:cover;opacity:.92;
  transition:opacity var(--t-micro) var(--e-out);}
.prod-row:hover .thumb.mini.referencia img{opacity:1;}
.thumb.referencia.grande img{object-fit:cover;padding:0;}
.prod-photo .thumb{position:absolute;inset:0;border-bottom:0;}
.prod-photo .thumb.grande .placa{width:100%;height:100%;}

/* Pie de la foto: de dónde salió. Va arriba del nombre en la ficha y debajo de
   la lista en la categoría; es la línea que evita que una foto de banco bien
   elegida se lea como inventario de EGOSA. */
.foto-nota{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.5;
  letter-spacing:.03em;color:var(--muted);margin:14px 0 0;max-width:60ch;
}
.foto-nota a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.foto-nota a:hover{color:var(--hi);}
#prod-foto-nota{margin:16px 0 4px;}
.pr-nom{font-weight:600;line-height:1.25;}
/* Antes aquí iba el ORIGEN DE LA IMAGEN, un rótulo. Ahora va la CLAVE DEL
   FABRICANTE, que es un dato que el comprador copia a su requisición: sube
   de tamaño, deja de ir en gris apagado y se puede seleccionar con el
   cursor. La presentación la acompaña, más discreta. */
.pr-clave{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--muted);white-space:nowrap;user-select:text;
}
.pr-clave.real{color:var(--ink);}
.prod-row:hover .pr-clave.real{color:var(--orange);}
.prod-row .chev{width:16px;height:16px;color:var(--muted);flex:none;}
.cat-modal-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;}
.cat-modal-actions .cta-btn,.cat-modal-actions .cta-ghost{flex:1 1 46%;min-width:150px;}
.cat-modal-actions #cat-modal-close2{flex:1 1 100%;}
.prod-list-head .n{color:var(--hi);font-weight:700;}
.modal-back{
  display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.modal-back:hover{color:var(--hi);}
.modal-back svg{width:15px;height:15px;}
.demo-flag{
  display:inline-block;margin-top:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-700);
  border:1px solid rgba(201,116,16,.4);border-radius:var(--r);padding:4px 8px;
}

/* ============================================================================
   REQUISICIÓN — el cotizador. Se comporta como una requisición de compras
   (partidas con cantidad), no como un carrito de tienda.
   ========================================================================== */
.req-fab{
  position:fixed;right:20px;bottom:92px;z-index:70;
  display:flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;border-radius:var(--r);
  padding:13px 18px;font-weight:700;font-size:14.5px;
  box-shadow:0 12px 30px -12px rgba(8,21,54,.6);
  transform:translateY(14px);opacity:0;pointer-events:none;
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) var(--e-out);
}
.req-fab.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.req-fab:hover{background:var(--navy-800);}
.req-fab svg{width:18px;height:18px;}
.req-fab .n{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12.5px;
  background:var(--orange);color:var(--navy);border-radius:var(--r);
  min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.req-backdrop{
  position:fixed;inset:0;z-index:95;background:rgba(8,21,54,.55);
  opacity:0;transition:opacity var(--t-ui) var(--e-out);backdrop-filter:blur(3px);
}
.req-backdrop[data-open]{opacity:1;}
/* mismo motivo que la entrada: alto acotado en píxeles para que el cajón no se
   estire a la altura del documento cuando la página va embebida */
.req-panel{
  position:fixed;top:0;right:0;bottom:auto;height:min(100vh,760px);
  width:min(460px,100%);z-index:96;
  background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 260ms var(--e-out);
}
.req-backdrop{height:min(100vh,760px);bottom:auto;}
/* los flotantes se anclan al alto acotado, no al fondo del documento */
.wa-float,.req-fab{position:fixed;}
.req-panel[data-open]{transform:translateX(0);}
.req-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 24px;border-bottom:1px solid var(--line-2);flex:none;
}
.req-head h2{font-size:20px;}
.req-head h2::after{display:none;}
.req-head .sub{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;
}
.req-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);font-size:23px;line-height:1;flex:none;}
.req-close:hover{background:var(--paper-2);}
.req-body{flex:1;overflow-y:auto;padding:0 24px;}
.req-item{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.req-item .t{min-width:0;}
.req-item .cat{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);
}
.req-item .nm{font-size:15px;font-weight:600;margin-top:3px;line-height:1.3;}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);flex:none;}
.qty button{
  width:32px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--hi);
}
.qty button:hover{background:var(--paper-2);}
/* La cantidad se veía casi invisible: este input nunca declaró fondo, así que
   el navegador le ponía el suyo —blanco— y encima heredaba el color de texto
   claro del tema oscuro. Blanco sobre blanco. Los demás campos del sitio sí lo
   declaran (.search-field va transparente, .form-field va a --surface); a este
   se le había olvidado. Va transparente sobre el plano del panel, y el color
   explícito para que no dependa de lo que herede. */
.qty input{
  width:46px;height:38px;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;
  -moz-appearance:textfield;background:transparent;color:var(--ink);
}
/* al escribir, el fondo del panel sigue siendo el de atrás: sin esto Chrome
   vuelve a pintar blanco en algunos estados de autocompletado */
.qty input:focus{background:var(--paper-2);color:var(--hi);outline:none;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.req-del{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid transparent;border-radius:var(--r);flex:none;
}
.req-del:hover{color:var(--orange-700);border-color:var(--line);}
.req-del svg{width:16px;height:16px;}
.req-empty{padding:52px 0;text-align:center;}
.req-empty svg{width:40px;height:40px;color:var(--line-2);margin:0 auto 16px;}
.req-empty h3{font-size:18px;}
.req-empty p{color:var(--muted);font-size:15px;margin-top:9px;}
.req-foot{padding:20px 24px;border-top:1px solid var(--line-2);flex:none;background:var(--paper);}
.req-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.req-total b{font-size:20px;color:var(--hi);}
.req-foot .cta-btn{width:100%;}
.req-foot .note{font-size:12.5px;color:var(--muted);margin-top:11px;line-height:1.5;}
.req-clear{
  display:block;margin:12px auto 0;font-size:13px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.req-clear:hover{color:var(--orange-700);}

/* ============================================================================
   FOOTER — cromo navy, con la variante clara del logo.
   ========================================================================== */
footer{background:var(--navy);color:#fff;padding:60px 0 0;}
.footer-grid{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;
  padding-bottom:44px;
}
footer .logo-img{height:34px;}
footer .tag{color:rgba(255,255,255,.6);font-size:14.5px;margin-top:18px;max-width:40ch;}
.foot-col h4{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);font-weight:500;margin-bottom:14px;
}
.foot-col a{
  display:block;color:rgba(255,255,255,.74);font-size:14.5px;padding:6px 0;
  transition:color var(--t-micro) var(--e-out);
}
.foot-col a:hover{color:#fff;}
.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-dark);padding:20px 0 26px;
}
/* .45 daba 4.16:1 sobre el navy del pie y reprobaba AA a 11px. Con .55 da
   5.56:1. Lo cachó el arnés recién cuando aprendió a componer el alfa con el
   fondo: antes medía el blanco puro y aprobaba de más. */
.foot-bottom span{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.55);
  letter-spacing:.05em;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* WhatsApp flotante: verde de plataforma, no de marca */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  transition:transform var(--t-micro) var(--e-out);
}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:28px;height:28px;}

/* ============================================================================
   REVEALS — dial MOTION 5. Entrada de 380ms, escalonada en grupos cortos.
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--e-out),transform 420ms var(--e-out);}
[data-reveal].is-visible{opacity:1;transform:none;}
.reveal{opacity:0;transform:translateY(12px);animation:rise 560ms var(--e-out) forwards;}
.r1{animation-delay:60ms;}.r2{animation-delay:120ms;}.r3{animation-delay:190ms;}.r4{animation-delay:260ms;}
.r5{animation-delay:330ms;}
@keyframes rise{to{opacity:1;transform:none;}}

/* ============================================================================
   ENTRADA DE MARCA
   Es el único momento del sitio donde se gasta tiempo en movimiento (motion.md
   permite 400-800 ms para un momento de marca, una vez por sesión). Se va sola
   a los ~950 ms, no bloquea nada y el contenido siempre estuvo debajo.
   ========================================================================== */
/* Alto acotado a propósito, no `inset:0`. Embebida, la página vive en un marco
   tan alto como todo el documento, así que un overlay a pantalla completa
   centraría el logo a miles de píxeles hacia abajo. Con un tope en píxeles, la
   entrada siempre cae donde el usuario está mirando. */
.intro{
  position:fixed;top:0;left:0;right:0;bottom:auto;height:min(100vh,760px);
  z-index:200;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:opacity 420ms var(--e-out),visibility 420ms;
}
.intro.fuera{opacity:0;visibility:hidden;}
.intro-grid{
  position:absolute;inset:-10%;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 64px);
  animation:intro-grid 1400ms var(--e-out) forwards;
}
@keyframes intro-grid{
  from{transform:scale(1.12);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.intro-core{position:relative;text-align:center;padding:0 24px;}
.intro-logo{
  position:relative;display:inline-block;
  clip-path:inset(0 100% 0 0);
  animation:intro-revela 620ms cubic-bezier(.65,0,.35,1) 90ms forwards;
}
.intro-logo img{height:52px;width:auto;}
/* la línea naranja que descubre el logo: se mueve con el mismo tiempo que el
   clip, así que parece que el trazo va revelando la marca */
.intro-logo::after{
  content:"";position:absolute;top:-8%;bottom:-8%;width:2px;background:var(--orange);
  left:0;transform:translateX(0);opacity:0;
  animation:intro-trazo 620ms cubic-bezier(.65,0,.35,1) 90ms forwards;
}
@keyframes intro-revela{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes intro-trazo{
  0%{transform:translateX(0);opacity:1;}
  92%{opacity:1;}
  100%{transform:translateX(var(--ancho,220px));opacity:0;}
}
.intro-bar{
  width:170px;height:2px;margin:26px auto 0;background:rgba(255,255,255,.16);overflow:hidden;
}
.intro-bar span{
  display:block;height:100%;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;
  animation:intro-carga 720ms cubic-bezier(.4,0,.2,1) 180ms forwards;
}
@keyframes intro-carga{to{transform:scaleX(1);}}
.intro-tag{
  margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);
  opacity:0;animation:intro-tag 500ms var(--e-out) 340ms forwards;
}
@keyframes intro-tag{to{opacity:1;}}
/* si el JS no corre, la entrada no puede quedarse tapando el sitio */
.intro{animation:intro-rescate 1ms linear 4s forwards;}
@keyframes intro-rescate{to{opacity:0;visibility:hidden;}}

/* ############################################################################
   SALA DE CONTROL — la capa que hace que la página respire.
   ----------------------------------------------------------------------------
   Todo lo de aquí abajo es movimiento. Tres reglas que me impuse:
   1. Nada se mueve porque sí: cada efecto señala jerarquía, estado o progreso.
   2. Nada empuja el layout. Solo opacity, transform y filter — propiedades que
      el navegador compone en la GPU y no disparan reflow.
   3. Todo muere con prefers-reduced-motion, y la página sigue completa sin ello.
   ########################################################################## */

/* --- 1. ATMÓSFERA -----------------------------------------------------------
   Una sola capa fija detrás de todo el documento: el halo naranja, que es "la
   única luz" de la dirección. Va en position:fixed con pointer-events:none, así
   que no cuesta reflow ni intercepta clics.

   AQUÍ HABÍA UNA SEGUNDA CAPA con la retícula de 12 columnas a 1px, y se quitó
   a pedido: esas líneas verticales cruzaban la portada por encima del video y
   ensuciaban lo único que ya funcionaba. La retícula sigue existiendo como
   estructura —el contenido se alinea a ella— nada más que ya no se dibuja. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(247,150,40,.16) 0%, transparent 60%),
    radial-gradient(80% 50% at 85% 8%, rgba(22,48,110,.5) 0%, transparent 65%);
}
main,header,footer{position:relative;z-index:1;}

/* --- 2. BARRA DE PROGRESO DE LECTURA ---------------------------------------
   Un filamento naranja bajo el header. El JS solo escribe --p (0 a 1); el
   ancho lo resuelve el compositor con scaleX. */
.progreso{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--orange);transform:scaleX(var(--p,0));transform-origin:0 50%;
  box-shadow:0 0 12px var(--glow);
  transition:transform 90ms linear;pointer-events:none;
}

/* --- 2b. CUANDO EL MARCO VIENE ESTIRADO ------------------------------------
   Publicada, la página vive dentro de un marco al que le estiran la altura
   hasta la del documento completo: el marco no tiene scroll propio, lo hace la
   página de arriba. Ahí position:fixed deja de querer decir "pegado a lo que
   se ve" y pasa a querer decir "pegado al fondo del documento" — y los dos
   botones flotantes aterrizan encima del contenido del final. Así fue como el
   flotante de requisición se sentaba sobre "Descargar catálogo".

   No hay forma de arreglar fixed desde adentro sin cooperación del padre. Lo
   que sí se puede es reconocer la situación y dejar de fingir que flotan: se
   anclan al pie del documento y se les abre un carril propio para que nunca
   pisen un control. El JS pone la clase cuando el documento no rebasa a la
   ventana, que es la firma exacta de ese montaje. */
body.marco-estirado{position:relative;padding-bottom:132px;}
body.marco-estirado .wa-float{position:absolute;bottom:24px;}
body.marco-estirado .req-fab{position:absolute;bottom:96px;}

/* --- 3. HEADER QUE SE CONTRAE ----------------------------------------------
   Al bajar, la barra se compacta y se opaca: menos peso visual cuando ya no
   estás en la portada. */
header{transition:background var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out);}
header .nav-row{transition:height var(--t-ui) var(--e-out);}
body.desplazada header{background:rgba(6,10,22,.97);border-bottom-color:var(--line-2);}
body.desplazada header .nav-row{height:60px;}
body.desplazada .logo-img{height:30px;}
.logo-img{transition:height var(--t-ui) var(--e-out);}

/* --- 4. EL LOGO SOBRE OSCURO -----------------------------------------------
   La tipografía del logo es navy: sobre esta base desaparecía. No lo filtro ni
   lo recoloreo (sería alterar la marca): lo monto en una placa clara, como la
   placa de datos atornillada al chasis de una máquina. El logo va intacto. */
a.logo-link{
  background:#fff;padding:7px 11px;border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 6px 20px -10px rgba(0,0,0,.8);
  transition:box-shadow var(--t-ui) var(--e-out);
}
a.logo-link:hover{box-shadow:0 0 0 1px var(--orange), 0 6px 24px -8px var(--glow);}
footer .logo-link{display:inline-flex;background:#fff;padding:7px 11px;border-radius:var(--r);}

/* --- 5. REVELADO AL ENTRAR EN CUADRO ---------------------------------------
   El JS marca los elementos con data-reveal; aquí solo vive el estado. Sube
   12px y aparece. Nunca al revés: nada baja, nada rebota. */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--e-out),transform 620ms var(--e-out);}
[data-reveal].is-visible{opacity:1;transform:none;}

/* --- 6. FOCO QUE SIGUE AL CURSOR -------------------------------------------
   Las tarjetas se iluminan por donde pasa el puntero. El JS solo escribe dos
   variables (--mx/--my) y el degradado lo pinta la GPU.

   Va en background-image de la tarjeta, NO en un ::after superpuesto, y esa
   decisión importa: un pseudo-elemento posicionado obliga a subir el contenido
   con z-index, y ese "> *" me pisó el position:absolute del botón invisible que
   cubre la tarjeta (.cat-open), dejándolo de 0px de alto — o sea, rompí el clic
   para abrir la ficha. El background-image pinta encima del color de fondo y
   debajo de TODO el contenido, por definición. Sin capas, sin z-index, sin
   forma de tapar un control.

   Fuera de la tarjeta las variables valen -999px: el resplandor no existe hasta
   que entra el cursor. En pantalla táctil nunca se activa, y no hace falta. */
.linea-card,.cat-card,.info-card,.contact-form,.linea-mini{
  background-image:radial-gradient(340px circle at var(--mx,-999px) var(--my,-999px),
    rgba(247,150,40,.14), transparent 62%);
}

/* --- 7. TARJETAS: EL BORDE SE ENCIENDE -------------------------------------- */
.linea-card,.cat-card,.info-card,.contact-form{
  transition:border-color var(--t-ui) var(--e-out),
             transform var(--t-ui) var(--e-out),
             box-shadow var(--t-ui) var(--e-out);
}
.linea-card:hover,.cat-card:hover{
  border-color:var(--orange);
  box-shadow:0 18px 40px -26px #000, 0 0 0 1px rgba(247,150,40,.28);
}

/* --- 8. CIFRAS QUE CUENTAN --------------------------------------------------
   Las cifras arrancan en 0 y suben al entrar en cuadro. Reservan su ancho con
   tabular-nums desde el HTML, así que el layout no salta mientras cuentan. */
.conteo{font-variant-numeric:tabular-nums;}
.conteo.contando{color:var(--orange);text-shadow:0 0 18px var(--glow);}
.plate-row .v,.linea-card .count .n,.num-big{transition:color 500ms var(--e-out),text-shadow 500ms var(--e-out);}

/* --- 9. LA PLACA DE DATOS RESPIRA ------------------------------------------
   El cuadrito naranja del encabezado late como un piloto de tablero. Es el
   único elemento con animación infinita de toda la página. */
.plate-head .bolt{
  animation:piloto 2.6s var(--e-inout) infinite;
  box-shadow:0 0 0 0 var(--glow);
}
@keyframes piloto{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(247,150,40,.5);}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(247,150,40,0);}
}

/* --- 10. FRANJA DE EVIDENCIA: BARRIDO DE ENTRADA ---------------------------- */
.ev-cell{position:relative;overflow:hidden;}
.ev-cell::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--orange);
  transform:scaleY(0);transform-origin:50% 0;transition:transform 460ms var(--e-out);
}
.ev-cell.is-visible::before{transform:scaleY(1);}
.ev-cell:nth-child(2)::before{transition-delay:80ms;}
.ev-cell:nth-child(3)::before{transition-delay:160ms;}
.ev-cell:nth-child(4)::before{transition-delay:240ms;}

/* --- 11. PLAZAS: LA SEÑAL RECORRE LA LISTA ---------------------------------- */
.plazas li{position:relative;transition:background var(--t-micro) var(--e-out);}
.plazas li:hover{background:rgba(247,150,40,.06);}
.plazas .base .ciudad::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:9px;
  border-radius:50%;background:var(--orange);vertical-align:middle;
  animation:piloto 2.6s var(--e-inout) infinite;
}

/* --- 12. MARQUEE DE MARCAS SOBRE OSCURO ------------------------------------
   Se difumina en los extremos para que las marcas no aparezcan cortadas. */
.marquee{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.brand-wordmark{transition:color var(--t-micro) var(--e-out),text-shadow var(--t-micro) var(--e-out);}
.marquee .brand-wordmark:hover{color:var(--orange);text-shadow:0 0 16px var(--glow);}

/* --- 13. TÍTULOS: LA BARRA SE DIBUJA --------------------------------------- */
.section-title::after{transform:scaleX(0);transform-origin:0 50%;
  transition:transform 560ms var(--e-out) 120ms;}
.is-visible .section-title::after,.section-head.is-visible .section-title::after{transform:scaleX(1);}

/* --- 14. BANDA DE CIERRE: LUZ DETRÁS -------------------------------------- */
.cta-final{position:relative;overflow:hidden;}
.cta-final::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 100% 0%, rgba(247,150,40,.22), transparent 60%);
}

@media (prefers-reduced-motion:reduce){
  .intro{display:none;}
  html{scroll-behavior:auto;}
  /* La página completa, quieta. Nada de lo de arriba queda a medio camino. */
  [data-reveal]{opacity:1!important;transform:none!important;}
  .ev-cell::before{transform:scaleY(1)!important;}
  .section-title::after{transform:scaleX(1)!important;}
  .plate-head .bolt,.plazas .base .ciudad::after{animation:none!important;}
  .progreso{display:none;}
  .linea-card,.cat-card,.info-card,.contact-form,.linea-mini{background-image:none;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],.reveal,.cat-card{opacity:1!important;transform:none!important;}
  .marquee-track{animation:none;}
  /* Sin movimiento, el track quieto solo dejaría ver los primeros logos. Aquí
     se deja envolver y se esconde la copia: se ven todos, en dos o tres filas. */
  .clientes .marquee{-webkit-mask-image:none;mask-image:none;}
  .clientes .marquee-track{flex-wrap:wrap;width:auto;}
  .clientes .cliente-chip.is-dupe{display:none;}
  .cat-modal{transform:none;}
  .req-panel{transition:none;}
}
/* Industrial premium: Archivo + Barlow, navy/orange. V6 / M7 / D4. */
#view-prod{grid-column:1/-1;min-width:0}#view-prod>.modal-pad{min-width:0}.cat-modal.inline #view-prod .prod-photo{aspect-ratio:auto;width:auto;min-width:0}
.premium-zoom{margin:auto;border:1px solid #526881;border-radius:8px;padding:36px;background:#142237;color:#f0f3f7;max-width:min(900px,94vw);max-height:90dvh}.premium-zoom::backdrop{background:rgba(5,12,22,.85);backdrop-filter:blur(8px)}.premium-zoom img{max-width:100%;max-height:66dvh;object-fit:contain;margin:auto;background:#eef0f2}.premium-zoom p{font:14px/1.5 'Barlow',sans-serif;margin-top:18px}.zoom-close{position:absolute;right:5px;top:5px;width:44px;height:44px;background:#091321;color:white;border-radius:6px;font-size:28px}#prod-photo[role=button]{cursor:zoom-in}.premium-image-error{display:grid;place-items:center;height:100%;color:#142237;font-size:15px}#premium-browser,#premium-results-title{scroll-margin-top:105px}
:root{--base:#091321;--paper:#0d1929;--surface:#142237;--paper-2:#1a2b43;--paper-3:#22344d;--muted:#acb9ca;--ink:#f0f3f7;--orange:#F79628;--orange-700:#F79628;--r:8px;--wrap:1320px;--gut:40px;--line:rgba(195,211,231,.14);--line-2:rgba(195,211,231,.3)}
body{font-size:17px}h1,h2,h3,h4{font-variation-settings:'wdth' 100;letter-spacing:-.035em}button,a,input,select,textarea{touch-action:manipulation}
:is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #ffb55e;outline-offset:4px}.intro{display:none!important}
#site-header{background:rgba(9,19,33,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.nav-row{height:80px;gap:26px}.logo-link{margin-right:28px}#site-header nav{margin-right:auto}#site-header .logo-img{height:48px;width:auto}
.cta-btn{border-radius:6px;min-height:48px;gap:12px;color:#102036;font-weight:700;box-shadow:none;transition:transform .18s var(--e-out)}.cta-ghost{border-radius:6px;min-height:48px;transition:transform .18s var(--e-out)}.cta-btn>span[aria-hidden]{font-size:23px;line-height:1}.cta-btn:hover{transform:translateY(-2px)}
.section-title{font-size:clamp(30px,3.4vw,48px);line-height:1.1;max-width:24ch;font-weight:650}.section-title::after{display:none}.section-head{margin-bottom:38px}.section-sub{font-size:18px;line-height:1.65;max-width:61ch}.eyebrow{font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;letter-spacing:.15em;color:var(--muted)}
.premium-hero{overflow:hidden;background:radial-gradient(ellipse at 84% 46%,#1b3149 0,transparent 54%),var(--base)}.premium-hero-layout{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:30px;min-height:620px;padding-top:62px;padding-bottom:68px}.premium-hero-copy{position:relative;z-index:2}.premium-hero h1{font-size:clamp(36px,4.55vw,65px);font-weight:650;line-height:1.12;margin:25px 0;letter-spacing:-.045em}.premium-hero h1 span{color:var(--orange)}.premium-lead{font-size:19px;color:#bfc9d7;line-height:1.65;max-width:44ch}.premium-hero-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:33px}.premium-text-link{display:inline-flex;align-items:center;gap:18px;min-height:48px;font-size:15px;font-weight:600}.premium-text-link:hover{color:var(--orange)}
.premium-scene{position:relative;height:466px;perspective:1200px;isolation:isolate}.premium-scene figure{margin:0;position:absolute;border-radius:8px;overflow:hidden;box-shadow:0 22px 70px rgba(2,8,19,.28);background:#d8dfdf;border:1px solid rgba(255,255,255,.18);transition:transform .25s var(--e-out)}.premium-scene-main{width:76%;right:0;top:0;height:424px;transform:rotate(3deg)}.premium-scene-paper{width:47%;left:0;bottom:0;height:224px;transform:rotate(-5deg)}.premium-scene img{width:100%;height:calc(100% - 48px);object-fit:cover;display:block;transition:transform .25s var(--e-out)}.premium-scene figure>a{display:contents}.premium-scene figcaption{display:flex;align-items:center;justify-content:space-between;height:48px;padding-left:17px;background:#112236;color:#f1f5f8;font-size:14px;font-weight:500}.premium-scene figcaption a{width:48px;min-height:48px;display:grid;place-items:center;font-size:22px;border-left:1px solid var(--line)}.premium-scene-outline{position:absolute;inset:48px 28px 15px 60px;border:1px solid rgba(247,150,40,.35);border-radius:8px;transform:rotate(-7deg);z-index:-1}.premium-scene-main:hover,.premium-scene-main:focus-within{transform:rotate(1deg) translateY(-5px)}.premium-scene-paper:hover,.premium-scene-paper:focus-within{transform:rotate(-2deg) translateY(-5px)}
.premium-facts{border-block:1px solid var(--line);background:var(--paper)}.premium-facts-inner{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;padding-block:26px;gap:34px}.premium-facts-inner>div,.premium-facts-inner>a{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}.premium-facts-inner>:last-child{border:0}.premium-facts strong{font-family:'Archivo',sans-serif;font-weight:550;font-size:32px;letter-spacing:-.04em}.premium-facts span{font-size:14px;color:var(--muted)}.premium-facts a strong{font-size:23px;line-height:1.9}.premium-facts a strong span{font-size:23px;color:var(--orange);padding-left:20px}
.meta-strip{display:none}.trust{padding:28px 0;background:var(--base)}.trust .label{font-size:12px;letter-spacing:.06em}.marquee-track{animation:none!important;flex-wrap:wrap;justify-content:center;gap:25px;transform:none!important}.marquee{mask-image:none!important}
.lineas{padding:88px 0;background:var(--base)}.lineas .section-head{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:60px}.lineas .section-sub{margin:0}.lineas-grid.lineas-5{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}.lineas-5 .linea-card{grid-column:span 2;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;box-shadow:none}.lineas-5 .linea-card:nth-child(-n+2){grid-column:span 3}.linea-card::before{display:none}.linea-image{display:block;height:190px;overflow:hidden}.linea-card:nth-child(-n+2) .linea-image{height:248px}.linea-image img{width:100%;height:100%;object-fit:cover;transition:transform .25s var(--e-out)}.linea-card:hover .linea-image img{transform:scale(1.025)}.linea-card .linea-tag{display:none}.lineas-5 .linea-card h3{margin:24px 25px 8px;font-size:24px;font-weight:600;min-height:0;line-height:1.18}.linea-card .count{margin:0 25px 17px;color:var(--muted);font-family:'Barlow',sans-serif;font-size:15px}.linea-card .count .n{font:inherit;color:inherit}.linea-card ul{margin:0 25px 20px;border:0;display:block;font-size:15px;color:var(--muted)}.linea-card li{border:0;padding:2px 0}.linea-card .link{margin:auto 25px 0;padding:16px 0 22px;min-height:48px;border-top:1px solid var(--line);font:600 15px 'Barlow',sans-serif;text-transform:none;letter-spacing:0}
.porque{background:var(--paper);padding:80px 0}.porque .num-big{display:none}.porque-grid{gap:30px}.porque-item{padding-top:25px;border-top:1px solid var(--line-2)}.porque-item h3{font-weight:600;font-size:22px}.porque-item p{color:var(--muted)}.bodega .bodega-marca,.bodega-escaneo{display:none!important}.bodega{padding-top:80px}.bodega-escena{margin-inline:auto;width:calc(100% - 80px);max-width:1240px;border-radius:8px;height:480px}.bodega-fondo{transition-duration:.7s}.bodega-capas img{transition-duration:.25s}.cta-final{border:1px solid var(--line);border-radius:8px;background:linear-gradient(120deg,#132a43,#101e30);padding:44px}.cta-final h2{font-weight:600}
.page-hero{background:radial-gradient(ellipse at 100% 0,rgba(40,66,98,.45),transparent 60%),var(--paper);padding:58px 0 44px}.page-title{font-weight:650;letter-spacing:-.04em}.page-sub{max-width:65ch}.search-block{max-width:900px}.search-field{background:var(--base);border:1px solid #526881;border-radius:8px;box-shadow:none}.search-field:focus-within{border-color:var(--orange);box-shadow:none}.search-field input{padding-block:19px}.search-hint{color:var(--muted)}.line-switch{gap:8px;margin-top:28px}.line-switch a{border-radius:6px;font-family:'Barlow',sans-serif;font-size:14px;letter-spacing:0;text-transform:none;min-height:44px;display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--line)}.line-switch .sq{display:none}
.cat-toolbar{margin-block:26px;gap:15px}.cat-grid{gap:22px;grid-template-columns:repeat(4,minmax(0,1fr))}.cat-card{border-radius:8px;overflow:hidden;background:var(--paper);transition:transform .18s var(--e-out);border:1px solid var(--line)}.cat-card:hover{transform:translateY(-3px);border-color:var(--line-2)}.cat-card .thumb{aspect-ratio:1.3;overflow:hidden;background:#dde2e6}.cat-card .thumb img{object-fit:cover;padding:0;filter:none;opacity:1}.cat-body{padding:20px 20px 4px}.cat-card h3{font-size:19px;font-weight:600;line-height:1.22}.cat-brands{font-family:'Barlow',sans-serif;letter-spacing:0;font-size:14px;text-transform:none;line-height:1.4}.cat-actions{margin-top:18px;min-height:46px}.cat-head-left>.linea-tag{display:none}.cat-head h2{font-weight:600;font-size:32px}.cat-head .count{font-family:'Barlow',sans-serif;font-size:15px}.cat-open{text-align:left}.premium-category-desc{font-size:14px;color:var(--muted);line-height:1.55;margin-top:9px}.premium-category-count{font-size:13px;color:var(--orange);margin-top:12px}
.premium-browser{padding-bottom:64px}.premium-browser-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:30px 0 24px}.premium-browser-head h2{font-size:25px;font-weight:600}.premium-browser-head p{color:var(--muted);font-size:15px;margin-top:7px}.premium-mode{display:flex;gap:6px}.premium-mode button{padding:10px 18px;min-height:44px;border:1px solid var(--line);border-radius:6px;font-size:14px}.premium-mode button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--base);font-weight:600}.premium-filters{display:flex;align-items:end;gap:16px;margin-bottom:25px}.premium-filter{display:flex;flex-direction:column;gap:7px;max-width:340px;flex:1;font-size:13px;color:var(--muted)}.premium-filter select{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:6px;padding:11px 12px;width:100%;min-height:46px;font-size:15px}.premium-reset{font-size:14px;min-height:46px;padding:8px 16px;border:1px solid var(--line);border-radius:6px}
.premium-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}.product-tile{display:flex;flex-direction:column;min-width:0;align-self:stretch;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .18s var(--e-out)}.product-tile:hover{transform:translateY(-3px);border-color:var(--line-2)}.product-tile button.premium-product-open{display:block;width:100%;text-align:left;flex:1}.product-tile .thumb{aspect-ratio:1.3;width:100%;height:auto;background:#e9ecef;border:0}.product-tile .thumb img{filter:none;padding:14px;background:#e9ecef;object-fit:contain;width:100%;height:100%}.product-tile .thumb.referencia img{padding:0;object-fit:cover}.product-tile-copy{padding:17px 18px 18px}.product-tile .image-origin{font:12px 'Barlow',sans-serif;color:var(--muted);margin-bottom:10px;display:block}.product-tile .product-family{color:var(--orange);font-size:12px;margin-bottom:7px}.product-tile h3{font-size:18px;font-weight:600;line-height:1.32;letter-spacing:-.02em;overflow-wrap:anywhere}.product-tile .product-meta{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.5}.product-tile .product-code{font-family:'JetBrains Mono',monospace;font-size:11px;margin-top:9px;color:#d0d9e6}.product-tile-footer{display:flex;border-top:1px solid var(--line);align-items:center;justify-content:space-between;padding-left:18px;font-size:13px;color:var(--muted)}.product-tile-footer button{min-width:48px;min-height:46px;border-left:1px solid var(--line);color:var(--orange);font-size:25px}.product-tile-footer button.added{font-size:16px}
.premium-pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px}.premium-pagination button{min-height:44px;min-width:110px;border:1px solid var(--line-2);border-radius:6px;padding:8px 16px;font-size:14px}.premium-pagination button:disabled{opacity:.35;cursor:default}.premium-pagination span{font-size:14px;color:var(--muted)}.premium-empty{padding:50px 25px;border:1px solid var(--line);border-radius:8px;text-align:center}.premium-empty p{color:var(--muted);margin:12px 0 20px}
#page-productos.premium-product-mode>.cat-section,#page-productos.premium-product-mode>.wrap:has(.cat-toolbar),#page-productos.premium-product-mode>#no-results-wrap{display:none!important}
.cat-detalle{grid-column:1/-1;min-width:0}.cat-modal.inline{max-width:none;width:100%;border-radius:8px;border:1px solid var(--line-2);background:var(--surface)}.cat-modal-close{width:44px;height:44px;background:var(--base);border-radius:6px;z-index:5}.modal-pad{padding:30px}.cat-modal h3{font-size:28px;line-height:1.15;font-weight:650}.cat-modal-line{font-family:'Barlow',sans-serif;font-size:13px;letter-spacing:.04em}.cat-modal-desc{font-size:17px;line-height:1.65;color:#c0ccda}.cat-modal .prod-photo{height:300px;background:#e9ecef}.cat-modal .prod-photo .thumb{width:100%;height:100%}.cat-modal .prod-photo img{filter:none;object-fit:contain;background:#e9ecef;padding:22px}.cat-modal .prod-photo .referencia img{padding:0;object-fit:contain}.prod-row{padding:12px 8px;min-height:80px;gap:16px}.prod-row .thumb{width:72px;height:65px;min-width:72px;background:#e9ecef}.prod-row .thumb img{background:#e9ecef;filter:none;padding:5px;object-fit:contain}.pr-nom{font-size:15px;line-height:1.4}.pr-clave{font-size:12px}.prod-list{max-height:480px;overflow-y:auto}.foto-nota{color:var(--muted);font-size:12px;line-height:1.5}.cat-modal-actions{gap:12px;flex-wrap:wrap}.prod-specs{display:grid;grid-template-columns:1fr 1fr;margin:23px 0;gap:0 26px}.prod-specs>div{border-top:1px solid var(--line);padding:13px 0}.prod-specs dt{font-size:12px;color:var(--muted);margin-bottom:5px}.prod-specs dd{font-size:15px;font-weight:500;overflow-wrap:anywhere}.prod-availability{font-size:13px;color:var(--muted);padding-top:18px;border-top:1px solid var(--line)}
#view-prod{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}#view-prod>.modal-pad:first-child{grid-column:1/-1;padding-bottom:10px}#view-prod>.prod-photo{height:420px;margin:20px 0 30px 30px;border-radius:6px}#view-prod>.modal-pad:last-child{padding-top:20px}.cat-modal .modal-back{min-height:44px;color:var(--muted)}.req-fab,.wa-float{box-shadow:0 6px 25px rgba(0,5,15,.24)}.wa-float{background:var(--orange);color:#142237}.req-panel{border-radius:8px}.view-switch button{min-height:44px}.contact-card,.form-card{border-radius:8px}.footer-desc{color:var(--muted)}.premium-featured{padding:72px 0;background:var(--base)}.premium-featured .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px}.premium-featured .section-title{font-size:34px}
@media(prefers-reduced-motion:no-preference){.premium-hero-copy>*{animation:premium-in .65s var(--e-out) both}.premium-hero-copy>:nth-child(2){animation-delay:60ms}.premium-hero-copy>:nth-child(3){animation-delay:120ms}.premium-hero-copy>:nth-child(4){animation-delay:180ms}.premium-scene{animation:premium-in .8s var(--e-out) 100ms both}@keyframes premium-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@supports(animation-timeline:view()){.premium-scene-main img{animation:premium-parallax linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes premium-parallax{from{transform:scale(1.07) translateY(-2%)}to{transform:scale(1.07) translateY(2%)}}}}
@media(min-width:1400px){.premium-hero-layout{min-height:670px;gap:55px}.premium-scene{height:490px}.premium-scene-main{height:455px}}
@media(max-width:1100px){:root{--gut:28px}.premium-hero-layout{gap:20px;min-height:570px}.premium-scene{height:410px}.premium-scene-main{height:370px}.premium-scene-paper{height:190px}.premium-lead{font-size:18px}.premium-hero-actions{gap:12px}.premium-hero h1{font-size:4.5vw}.premium-products-grid,.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.premium-featured .premium-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-link{margin-right:0}}
@media(max-width:767px){:root{--gut:22px}.nav-row{height:72px}.header-ctas>.cta-btn{display:none}#site-header nav{margin:0}.premium-hero-layout{grid-template-columns:1fr;padding-top:44px;padding-bottom:40px;gap:36px}.premium-hero h1{font-size:clamp(31px,7vw,49px);line-height:1.15;margin:19px 0}.premium-lead{font-size:17px;max-width:42ch}.premium-hero-actions{margin-top:23px;gap:12px 20px}.premium-text-link{font-size:14px}.premium-scene{height:340px;max-width:490px;width:100%;margin:auto}.premium-scene-main{height:310px;width:73%;right:6px}.premium-scene-paper{height:185px;width:43%}.premium-scene figcaption{font-size:12px;padding-left:10px}.premium-facts-inner{grid-template-columns:1fr;gap:0;padding-block:12px}.premium-facts-inner>div,.premium-facts-inner>a{border-right:0;border-bottom:1px solid var(--line);padding:12px 0;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}.premium-facts strong{font-size:26px}.premium-facts a strong{font-size:18px;white-space:nowrap}.premium-facts span{font-size:13px;text-align:right}.premium-facts a strong span{padding:0;font-size:17px}.lineas{padding:55px 0}.lineas .section-head{grid-template-columns:1fr;gap:16px}.lineas-grid.lineas-5{grid-template-columns:1fr;gap:22px}.lineas-5 .linea-card,.lineas-5 .linea-card:nth-child(-n+2){grid-column:auto}.linea-image,.linea-card:nth-child(-n+2) .linea-image{height:220px}.lineas-5 .linea-card h3{font-size:25px}.porque-grid,.plazas,.premium-products-grid,.cat-grid,.premium-featured .premium-products-grid{grid-template-columns:1fr}.porque,.bodega{padding-top:55px}.bodega-escena{width:calc(100% - 44px);height:320px}.bodega-hud{padding:12px}.bodega-coord{font-size:10px}.premium-browser-head{align-items:start;flex-direction:column;gap:18px}.premium-mode{width:100%}.premium-mode button{flex:1}.premium-filters{flex-direction:column;align-items:stretch;gap:12px}.premium-filter{max-width:none;flex:auto}.premium-filter select{font-size:16px}.premium-reset{align-self:flex-start}.product-tile .thumb{aspect-ratio:1.6}.product-tile h3{font-size:20px}.premium-pagination{gap:10px}.premium-pagination button{min-width:80px;padding-inline:10px}.premium-pagination span{font-size:12px}.page-hero{padding:38px 0 28px}.page-title{font-size:36px}.page-sub{font-size:17px}.search-field{padding-inline:12px}.search-field input{font-size:15px}.search-hint{font-size:12px}.line-switch{display:flex;flex-wrap:wrap}.line-switch a{font-size:13px}.cat-head-left{min-width:0}.cat-head h2{font-size:27px}.cat-grid.as-list .cat-card h3{flex:1}.cat-grid.as-list .cat-brands{display:none}.cat-grid.as-list .premium-category-desc,.cat-grid.as-list .premium-category-count{display:none}.cat-grid.as-list .cat-actions{min-width:0}.cat-modal.inline{min-width:0}.modal-pad{padding:23px 18px}.cat-modal h3{font-size:26px}#view-prod{grid-template-columns:1fr}#view-prod>.prod-photo{height:280px;margin:10px 18px 0}#view-prod>.modal-pad:last-child{padding-top:23px}.prod-specs{grid-template-columns:1fr}.prod-row{display:grid;grid-template-columns:56px minmax(0,1fr) 15px;gap:9px}.prod-row .thumb{width:56px;height:56px;min-width:56px;grid-row:span 2}.prod-row .pr-clave{grid-column:2;font-size:11px}.prod-row .chev{grid-column:3;grid-row:1/span 2}.pr-nom{font-size:14px}.cat-modal-actions{flex-direction:column;align-items:stretch}.cat-modal-actions>*{justify-content:center;min-width:0;font-size:14px}.cat-modal .prod-photo{height:220px}.premium-featured .section-head{display:block}.premium-featured .premium-text-link{margin-top:12px}.cta-final{padding:27px}.cta-final-actions{width:100%}.cta-final-actions>*{flex:1;justify-content:center}.wa-float{width:48px;height:48px;right:16px;bottom:18px}.req-fab{bottom:18px;left:16px;font-size:13px}.trust .label{font-size:11px}.marquee-track{justify-content:flex-start;gap:16px}.section-sub{font-size:17px}.cat-section{padding-block:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.premium-scene-main{transform:rotate(3deg)}.premium-scene-paper{transform:rotate(-5deg)}[data-reveal],.reveal,.cat-card{opacity:1!important;transform:none!important}}

#site-header nav{margin-left:0;margin-right:auto}.premium-scene-main figcaption{justify-content:flex-end;gap:12px}
/* Corporate depth and supplied client identities */
#clientes-band{display:none!important}.partners-section{padding:96px 0 74px;background:linear-gradient(135deg,#102238,#091321 65%);position:relative;isolation:isolate;border-block:1px solid #ffffff12}.partners-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:40px}.partners-heading h2{font:600 clamp(32px,3.8vw,54px)/1.13 'Archivo',sans-serif;letter-spacing:-.045em;margin-top:20px}.partners-heading h2 span{color:#adbed2}.partners-heading>p{max-width:34ch;color:#b8c5d6;font-size:18px;line-height:1.65}.partner-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#d8dfe5;border:1px solid #d8dfe5;border-radius:12px;overflow:hidden;box-shadow:0 30px 65px #02071244}.partner-card{margin:0;padding:22px 22px 16px;background:#fff;min-width:0;position:relative}.partner-image{position:relative;aspect-ratio:1.55;overflow:hidden;background:#fff;border-radius:3px}.partner-image img{position:absolute;max-width:none;width:100%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}.partner-card figcaption{color:#33485d;font:500 12px/1.4 'Barlow',sans-serif;letter-spacing:.035em;margin-top:17px;text-align:center}.partner-power-street .partner-image{background:#060708}.partner-power-street img{width:132%}.partner-pispo img{width:88%}.partner-providence img{width:57%}.partner-aleia .partner-image{background:#c5d2e1}.partner-aleia img{width:115%}.partner-montacargas img{width:110%}.partner-gid img{width:205%;transform:translate(-50%,-45%)}.partner-finasolu img{width:100%}.partner-braveus img{width:90%}.partners-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-top:28px;color:#aebfd2;font-size:15px}.premium-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 46%,#254c6b55,transparent 60%),#091321}.premium-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 47%,#b5c7db0b 47.1%,transparent 47.2%),linear-gradient(110deg,transparent 68%,#b5c7db0a 68.1%,transparent 68.2%);pointer-events:none}.premium-scene{perspective:1100px}.premium-scene-main,.premium-scene-paper{box-shadow:0 25px 65px #02081170}.premium-depth{height:100%;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform 220ms cubic-bezier(.22,1,.36,1)}.premium-facts{background:linear-gradient(100deg,#122438,#101b2b);position:relative}.premium-facts:before{content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:linear-gradient(90deg,#f79628,transparent 85%)}.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:10000;background:#f79628;transform:scaleX(0);transform-origin:left;pointer-events:none}.linea-image{overflow:hidden}.linea-image img{transition:transform 280ms cubic-bezier(.22,1,.36,1)}.linea-card:hover .linea-image img{transform:scale(1.045)}.premium-product-open .thumb img{transition:transform 250ms cubic-bezier(.22,1,.36,1)}.premium-product-open:hover .thumb img{transform:scale(1.035)}
@media(prefers-reduced-motion:no-preference){.partner-card{transition:transform 240ms cubic-bezier(.22,1,.36,1)}.partner-card:hover{transform:translateY(-4px);z-index:1}.partners-section.motion-ready .partner-card{opacity:0;transform:translateY(20px)}.partners-section.motion-ready.in-view .partner-card{opacity:1;transform:none;transition:opacity 500ms cubic-bezier(.22,1,.36,1),transform 500ms cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--order)*60ms)}.partners-section.in-view .partner-card:hover{transform:translateY(-4px);transition-delay:0ms;transition-duration:240ms}@supports(animation-timeline:view()){.bodega-escena{animation:warehouse-depth both cubic-bezier(.22,1,.36,1);animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes warehouse-depth{from{transform:scale(.94);opacity:.55}to{transform:scale(1);opacity:1}}}}
@media(max-width:767px){.partners-section{padding:55px 0 44px}.partners-heading{display:block;margin-bottom:28px}.partners-heading>p{margin-top:22px;font-size:17px}.partner-grid{grid-template-columns:1fr}.partner-card{padding:22px 40px 16px}.partner-image{aspect-ratio:1.8}.partner-pispo img{width:70%}.partner-providence img{width:44%}.partner-braveus img{width:75%}.partners-bottom{flex-direction:column;align-items:start;font-size:14px}.premium-depth{transform:none!important}}
@media(prefers-reduced-motion:reduce){.premium-depth,.partner-card,.linea-card:hover .linea-image img,.premium-product-open:hover .thumb img{transform:none!important}.partners-section .partner-card{opacity:1!important}}
.partner-pispo img{width:75%}.partner-aleia img{width:125%}
@media(max-width:767px){.partner-pispo img{width:65%}.partner-aleia img{width:110%}}
.partner-gid img{transform:translate(-50%,-44%)}
.hero-brand-watermark{position:absolute!important;width:min(88vw,1150px)!important;height:auto!important;max-width:none!important;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);opacity:.095;filter:grayscale(1) invert(1);mix-blend-mode:screen;pointer-events:none;z-index:-1}.brand-motion-control{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;min-height:44px;background:transparent;border:1px solid #73879c;color:#d8e3ef;border-radius:5px;font:500 14px 'Barlow',sans-serif;cursor:pointer;margin-top:20px}.partner-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffffb3 48%,transparent 71%);transform:translateX(-130%);opacity:0}.partners-section.in-view .partner-card{transition:transform 250ms cubic-bezier(.22,1,.36,1),opacity 250ms cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:no-preference){.partners-section.in-view:not(.motion-paused) .partner-card:after{animation:brand-sheen 7s cubic-bezier(.25,.1,.25,1) infinite;animation-delay:calc(var(--order)*.45s)}@keyframes brand-sheen{0%,50%{transform:translateX(-130%);opacity:0}53%{opacity:.65}78%{transform:translateX(130%);opacity:0}100%{transform:translateX(130%);opacity:0}}.partner-image{transition:transform 240ms cubic-bezier(.22,1,.36,1)}.partner-card:hover .partner-image{transform:scale(1.045)}.partners-section.motion-paused .partner-card:after{animation-play-state:paused;opacity:0}.partners-section.motion-paused .partner-image{transform:none}}
@media(max-width:767px){.hero-brand-watermark{width:160vw!important;top:34%;opacity:.085}}
@media(prefers-reduced-motion:reduce){.brand-motion-control{display:none}.partner-image{transform:none!important}.partner-card:after{display:none}}

.site-credit{font-size:12px;line-height:1.6;color:#acb9ca}.site-credit strong{font-weight:600;color:#d9e3ef}
/* Refined watermark: keep the reading area clear. */
.hero-brand-watermark{width:330px!important;left:28%;top:auto;bottom:18px;transform:translateX(-50%);opacity:.105;filter:grayscale(1) invert(1)}
.premium-hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 83% 18%,#9eb8cf16,transparent 52%);opacity:.8}
.cta-btn{position:relative;overflow:hidden}.cta-btn:after{content:'';position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 35%,#ffffff60 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}.product-tile{position:relative}.product-tile:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#f79628;transform:scaleX(0);transform-origin:left;pointer-events:none;transition:transform 240ms cubic-bezier(.22,1,.36,1)}.product-tile:focus-within:after,.product-tile:hover:after{transform:scaleX(1)}
@media(prefers-reduced-motion:no-preference){.cta-btn:hover:after{transform:translateX(120%);transition:transform 280ms cubic-bezier(.22,1,.36,1)}.premium-products-grid .product-tile{animation:catalog-enter 280ms cubic-bezier(.22,1,.36,1) both}.premium-products-grid .product-tile:nth-child(2){animation-delay:35ms}.premium-products-grid .product-tile:nth-child(3){animation-delay:70ms}.premium-products-grid .product-tile:nth-child(4){animation-delay:105ms}@keyframes catalog-enter{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}.premium-hero:after{animation:hero-light 1.2s cubic-bezier(.22,1,.36,1) both}@keyframes hero-light{from{opacity:0;transform:translateX(4%)}to{opacity:.8;transform:none}}}
@media(max-width:1100px) and (min-width:768px){.hero-brand-watermark{width:250px!important;left:25%;bottom:5px}}
@media(max-width:767px){.hero-brand-watermark{width:88vw!important;left:50%;top:60%;bottom:auto;opacity:.075;transform:translate(-50%,-50%)}.premium-filters{padding:18px;background:#111f31;border:1px solid #ffffff14;border-radius:8px}}
@media(prefers-reduced-motion:reduce){.cta-btn:after{display:none}.product-tile:after{transition:none}.premium-products-grid .product-tile{animation:none}}
/* Mobile browsing: compact overview and touch-friendly horizontal brand gallery. */
.mobile-brand-tools,.mobile-brand-hint{display:none}.catalog-filter-toggle>summary{display:none}.catalog-filter-toggle{margin-bottom:22px}.catalog-filter-toggle .premium-filters{margin-bottom:0}
@media(max-width:767px){
 :root{--gut:18px}.nav-row{height:66px}.logo-img{max-width:138px}.premium-hero-layout{padding-top:30px;padding-bottom:28px;gap:24px}.premium-hero h1{font-size:34px}.premium-lead{font-size:16px;line-height:1.65}.premium-scene{height:255px;max-width:350px}.premium-scene-main{height:238px;width:70%}.premium-scene-paper{height:145px;width:42%}.premium-facts-inner{grid-template-columns:1fr 1fr;gap:0;padding:6px 0}.premium-facts-inner>div,.premium-facts-inner>a{padding:14px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;justify-content:flex-start}.premium-facts span{text-align:left}.premium-facts strong{font-size:25px}.premium-facts a strong{font-size:18px}.premium-facts-inner>:nth-child(odd){border-right:1px solid var(--line)}
 .partners-section{padding:36px 0}.partners-heading{margin-bottom:20px}.partners-heading h2{font-size:30px;margin-top:12px}.partners-heading>p{font-size:15px;line-height:1.55;margin-top:14px;max-width:none}.partners-heading .eyebrow{font-size:10px;letter-spacing:.1em}.brand-motion-control{margin-top:12px;min-height:44px;padding:8px 12px;font-size:12px}.partner-grid{display:grid;grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 1px)/2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#f79628 #d8dfe5;overscroll-behavior-x:contain}.partner-card{padding:13px 12px 10px;scroll-snap-align:start}.partner-image{aspect-ratio:1.7}.partner-card figcaption{font-size:11px;line-height:1.3;margin-top:8px;min-height:28px}.partner-pispo img{width:66%}.partner-providence img{width:46%}.partner-braveus img{width:77%}.partner-aleia img{width:114%}.partners-bottom{padding-top:18px;gap:10px;font-size:13px}.mobile-brand-tools{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}.mobile-brand-tools button{width:44px;height:44px;border:1px solid #52657b;border-radius:6px;background:#142237;color:#fff;font-size:20px}.mobile-brand-tools button:disabled{opacity:.35}.mobile-brand-hint{display:block;color:#b4c3d4;font-size:12px}.mobile-brand-tools .brand-arrows{display:flex;gap:8px}
 .lineas,.premium-featured{padding:38px 0}.lineas .section-title,.premium-featured .section-title{font-size:28px}.lineas .section-sub{font-size:15px;line-height:1.55}.lineas-grid.lineas-5{gap:12px}.lineas-5 .linea-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 14px;padding:14px}.lineas-5 .linea-image,.lineas-5 .linea-card:nth-child(-n+2) .linea-image{grid-column:1;grid-row:1/span 5;width:96px;height:112px;margin:0;border-radius:5px}.lineas-5 .linea-card h3{font-size:19px;margin:0 0 6px;grid-column:2}.lineas-5 .linea-card ul{display:none}.lineas-5 .linea-card>a:not(.linea-image),.lineas-5 .linea-card>p{grid-column:2;margin-top:4px;font-size:13px}.lineas-5 .linea-card .linea-icon{display:none}
 .premium-products-grid,.premium-featured .premium-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-tile .thumb{aspect-ratio:1.12}.product-tile-copy{padding:12px}.product-tile h3{font-size:16px;line-height:1.3;overflow-wrap:anywhere}.product-family{font-size:10px}.product-meta,.product-code{font-size:12px}.image-origin{font-size:9px}.product-tile-footer{padding:8px 10px;gap:5px}.product-tile-footer>span{font-size:10px}.premium-add{min-width:44px;min-height:44px}.premium-featured .section-head{margin-bottom:20px}.cat-detalle{grid-column:1/-1}
 .line-switch{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;gap:8px;scrollbar-width:thin}.line-switch a{flex:0 0 auto;white-space:nowrap;min-height:44px;font-size:12px}.page-title{font-size:30px}.page-sub{font-size:16px}.page-hero{padding-bottom:20px}.premium-browser-head{gap:12px;margin-bottom:14px}.premium-browser-head h2{font-size:24px}.premium-filters{padding:14px}.catalog-filter-toggle{border:1px solid #ffffff20;border-radius:7px;background:#111f31;margin-bottom:20px}.catalog-filter-toggle>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 14px;font-weight:600;font-size:14px;cursor:pointer;list-style:none}.catalog-filter-toggle>summary:after{content:'+';font-size:22px;color:#f79628}.catalog-filter-toggle[open]>summary:after{content:'−'}.catalog-filter-toggle>summary::-webkit-details-marker{display:none}.catalog-filter-toggle .premium-filters{border:0;border-radius:0;padding-top:0}.bodega-escena{height:240px;width:calc(100% - 36px)}.porque,.bodega{padding-top:38px}.porque-grid{gap:14px}.section-sub{font-size:16px}
}
@media(max-width:350px){.premium-hero h1{font-size:30px}.product-tile-copy{padding:9px}.product-tile h3{font-size:14px}.product-tile-footer>span{display:none}.product-tile-footer{justify-content:flex-end}}
@media(max-width:767px){.partner-grid,.line-switch{scrollbar-width:none}.partner-grid::-webkit-scrollbar,.line-switch::-webkit-scrollbar{display:none}body:has(#page-productos:not([hidden])) .wa-float{display:none}.premium-facts-inner>a strong{white-space:normal}.partners-section.in-view .partner-card:hover{transform:none}}

/* EGOSA: the colours of the identity, used to organise the supply lines. */
:root{--egosa-red:#d94b40;--egosa-amber:#e9ac20;--egosa-green:#83a83f;--egosa-blue:#2367a5;--brand-ink:#112b44;--brand-cream:#f4f2eb}
.premium-hero{background:radial-gradient(ellipse at 100% 2%,#2259848c,transparent 55%),radial-gradient(ellipse at 100% 100%,#718b3538,transparent 46%),linear-gradient(120deg,#0b1726,#112b44)}
.premium-hero:before{background:linear-gradient(118deg,transparent 57%,#f2b62918 57.05%,#f2b62918 57.35%,transparent 57.4%),linear-gradient(118deg,transparent 68%,#83a83f23 68.05%,#83a83f23 68.35%,transparent 68.4%)}
.premium-hero:after{background:radial-gradient(ellipse at 75% 30%,#528eb02b,transparent 55%)}
.premium-hero h1 span{color:#ffb547}.premium-hero .eyebrow{color:#f0c97e}.premium-scene-outline{border-color:#e9ac2070;box-shadow:16px 16px 0 -15px #83a83f,-16px -16px 0 -15px #d94b40}
.premium-scene-main{border-color:#e9ac2070!important}.premium-scene-main figcaption{background:#1d4666}.premium-scene-paper figcaption{background:#556a2b}.premium-scene figcaption a{color:#fff}
.premium-facts{background:#163651;border:0}.premium-facts:before{left:0;right:0;height:4px;background:linear-gradient(90deg,var(--egosa-red) 0 25%,var(--orange) 25% 50%,var(--egosa-amber) 50% 75%,var(--egosa-green) 75%)}
.premium-facts-inner>div:nth-child(1) strong{color:#f79b84}.premium-facts-inner>div:nth-child(2) strong{color:#ffcf65}.premium-facts-inner>div:nth-child(3) strong{color:#c0d77d}.premium-facts span{color:#cad9e5}
.partners-section{background:var(--brand-cream);color:var(--brand-ink);padding:74px 0 54px;border:0}.partners-heading{gap:50px;margin-bottom:32px}.partners-heading h2{font-weight:650;font-size:clamp(32px,3.5vw,49px)}.partners-heading h2 span{color:#3b7387}.partners-heading>p{color:#516373}.partners-heading .eyebrow{color:#7b531c}.partners-heading .eyebrow:before{background:var(--egosa-red)}
.partner-grid{display:flex;gap:16px;overflow-x:auto;background:transparent;border:0;border-radius:0;box-shadow:none;padding:8px 0 16px;scroll-snap-type:none;scrollbar-width:none}.partner-grid.carousel-ready{display:block;overflow:hidden;touch-action:pan-y;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}.partner-grid.carousel-ready:active{cursor:grabbing}.brand-loop-track,.brand-loop-group{display:flex;width:max-content}.brand-loop-group{gap:16px;padding-right:16px}.partner-grid .partner-card{flex:0 0 224px;width:224px;padding:20px 18px 15px;border:1px solid #dfdfd6;border-radius:9px;background:#fff;opacity:1!important;transform:none!important;scroll-snap-align:none;box-shadow:0 8px 22px #19395308}.partner-grid .partner-card:after{display:none}.partner-grid .partner-image{aspect-ratio:1.65}.partner-grid .partner-card figcaption{font-size:12px;color:#425869;margin-top:14px;min-height:32px;display:flex;align-items:center;justify-content:center}.partner-grid .partner-pispo img{width:72%}.partner-grid .partner-providence img{width:48%}.partner-grid .partner-aleia img{width:117%}.partner-grid .partner-braveus img{width:81%}
.brand-loop-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}.brand-loop-caption{font-size:13px;color:#526575}.brand-loop-actions{display:flex;align-items:center;gap:8px}.brand-loop-actions>button{min-width:44px;min-height:44px;border:1px solid #b4c0c6;background:transparent;color:#173f5c;border-radius:5px;font-size:20px;cursor:pointer}.brand-loop-actions .brand-motion-control{display:inline-flex;margin:0;min-width:130px;font:600 13px 'Barlow',sans-serif;padding:8px 14px}.brand-loop-actions>button:hover{background:#e6e9df}.partners-bottom{border-top:1px solid #d3d9d4;margin-top:24px;padding-top:20px;color:#5b6b75}.partners-bottom .premium-text-link{color:#1c577a}.partners-bottom .premium-text-link:hover{color:#925612}
.trust{background:#e8ece5;border-block:1px solid #d7dfd2;color:#253f51}.trust .label{color:#5a6c68}.trust .marquee{color:#345866}.trust .marquee *{border-color:#c4cfc7}.trust .marquee-track{color:#345866}
.lineas{background:linear-gradient(180deg,#10273c,#0b1726);padding-block:78px}.lineas-5 .linea-card{--line-colour:var(--egosa-red);border:1px solid #ffffff17;border-top:4px solid var(--line-colour);background:linear-gradient(155deg,#1b3044,#102035);box-shadow:0 16px 30px #030e1720}.lineas-5 .linea-card:nth-child(2){--line-colour:var(--orange)}.lineas-5 .linea-card:nth-child(3){--line-colour:var(--egosa-blue)}.lineas-5 .linea-card:nth-child(4){--line-colour:var(--egosa-green)}.lineas-5 .linea-card:nth-child(5){--line-colour:var(--egosa-amber)}.lineas-5 .linea-card .count .n{color:#dce9ec}.lineas-5 .linea-card .link{border-top-color:#ffffff20}.lineas-5 .linea-card .link svg{color:var(--line-colour)}.lineas-5 .linea-card:hover{border-color:var(--line-colour)}
.premium-featured{background:#eaf0f1;color:#14354f}.premium-featured .section-title{color:#14354f}.premium-featured .section-sub{color:#526774}.premium-featured .premium-text-link{color:#22618c}.premium-featured .product-tile{background:#fff;border-color:#d5dfe3;box-shadow:0 12px 28px #16384a0a}.premium-featured .product-tile h3{color:#16384a}.premium-featured .product-family{color:#905117}.premium-featured .product-meta,.premium-featured .product-code,.premium-featured .image-origin{color:#5c6b76}.premium-featured .product-tile-footer{color:#4d6271;border-color:#dbe3e7}.premium-featured .premium-add{background:#e6eef0;color:#184a69}
.premium-featured .cat-modal{color:#eaf0f5}
.product-tile[data-linea="papel"]{border-top:3px solid var(--egosa-red)}.product-tile[data-linea="limpieza"]{border-top:3px solid var(--orange)}.product-tile[data-linea="clinico"]{border-top:3px solid var(--egosa-blue)}.product-tile[data-linea="alimentos"]{border-top:3px solid var(--egosa-green)}.product-tile[data-linea="franela"]{border-top:3px solid var(--egosa-amber)}
.line-switch a{border-bottom:2px solid #df645a}.line-switch a:nth-child(2){border-bottom-color:var(--orange)}.line-switch a:nth-child(3){border-bottom-color:#61a4d3}.line-switch a:nth-child(4){border-bottom-color:var(--egosa-green)}.line-switch a:nth-child(5){border-bottom-color:var(--egosa-amber)}
.page-hero{background:radial-gradient(ellipse at 100% 0,#27658955,transparent 65%),#112337}.cta-band{background:linear-gradient(120deg,#183953,#234e62)}footer{border-top:3px solid #799846}
@media(max-width:767px){.premium-hero-layout{padding-top:32px}.premium-hero{background:radial-gradient(ellipse at 100% 55%,#28587588,transparent 65%),#0c1d30}.partners-section{padding:36px 0 28px}.partners-heading{margin-bottom:16px}.partners-heading h2{font-size:30px}.partners-heading>p{font-size:15px}.partner-grid .partner-card{width:158px;flex-basis:158px;padding:13px 12px 10px}.partner-grid .partner-card figcaption{font-size:11px;min-height:29px;margin-top:9px}.brand-loop-controls{align-items:start;flex-direction:column;gap:8px;margin-top:3px}.brand-loop-actions{width:100%}.brand-loop-actions .brand-motion-control{margin-right:auto}.brand-loop-caption{font-size:12px}.partners-bottom{margin-top:18px;padding-top:14px;gap:6px}.lineas{padding-block:40px}.lineas-5 .linea-card{border-top-width:1px;border-left:4px solid var(--line-colour);padding:12px}.premium-featured{padding-block:38px}.partner-grid.carousel-ready{mask-image:none}.hero-brand-watermark{opacity:.08}}
@media(prefers-reduced-motion:reduce){.brand-loop-track{transition:none!important}.brand-loop-actions .brand-motion-control{display:none}}
.partners-section{padding:46px 0 32px}.partners-heading{margin-bottom:20px}.partners-heading h2{font-size:36px;margin-top:12px}.partners-heading h2 br{display:none}.partners-heading h2 span:before{content:' '}.partners-heading>p{display:none}.partner-grid .partner-card{width:200px;flex-basis:200px;padding:12px 14px 8px}.partner-grid .partner-image{aspect-ratio:1.9}.partner-grid .partner-card figcaption{margin-top:7px;min-height:28px}.partner-grid .partner-pispo img{width:60%}.partner-grid .partner-providence img{width:41%}.partner-grid .partner-braveus img{width:70%}
.catalog-brand-strip{background:transparent!important;border:0;border-top:1px solid #d3d9d4!important;padding:20px 0 0!important;margin-top:20px}.catalog-brand-strip>.wrap{width:100%;max-width:none;padding:0;margin:0}.catalog-brand-strip .label{font-size:10px;letter-spacing:.09em;margin:0 0 12px;color:#5b6b75}.catalog-brand-strip .marquee{background:transparent;border:0;padding:0;overflow:hidden}.catalog-brand-strip .catalog-brand-track{display:flex;width:max-content;gap:0;animation:catalog-brand-flow 34s linear infinite}.catalog-brand-group{display:flex;flex:0 0 auto;align-items:center}.catalog-brand-strip .brand-wordmark{font-size:18px;padding:8px 25px;color:#365369;white-space:nowrap}.partners-section.motion-paused .catalog-brand-track,.catalog-brand-strip:hover .catalog-brand-track{animation-play-state:paused}.partners-bottom{margin-top:14px;padding-top:10px;border:0}.partners-bottom>span{display:none}.partners-bottom .premium-text-link{font-size:14px;min-height:44px}
@keyframes catalog-brand-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:767px){.partners-section{padding:28px 0 20px}.partners-heading h2{font-size:27px;line-height:1.18}.partner-grid .partner-card{width:148px;flex-basis:148px;padding:10px 10px 6px}.partner-grid .partner-card figcaption{font-size:10px}.brand-loop-controls{gap:6px}.catalog-brand-strip{margin-top:14px;padding-top:15px!important}.catalog-brand-strip .brand-wordmark{font-size:16px;padding:8px 19px}.brand-loop-caption{font-size:12px}.partners-bottom{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.catalog-brand-strip .catalog-brand-track{animation:none}.catalog-brand-strip .marquee{overflow-x:auto}.catalog-brand-group[aria-hidden="true"]{display:none}}
.photo-pending{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo-pending>svg{opacity:.42}
.photo-pending-label{position:absolute;left:8px;right:8px;bottom:12px;text-align:center;color:#eaf0f5;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.04em;padding:7px 5px;background:#111c3ae6;border:1px solid #ffffff24;border-radius:6px}
.prod-row .photo-pending-label{display:none}
.photo-pending.grande .photo-pending-label{left:16px;right:16px;bottom:20px;font-size:13px}
.product-tile .thumb.product-art{background:#e5edf0}
.product-tile .thumb.product-art img,.prod-foto .thumb.product-art img{object-fit:contain;filter:none;opacity:1;width:100%;height:100%;padding:0}
.product-tile .thumb.product-art::after{display:none}

/* Aviso de privacidad y consentimiento informado */
.privacy-page{background:#f6f7f9;color:#172033;min-height:70vh}
.privacy-hero{padding:clamp(90px,12vw,150px) 0 55px;background:#0f2252;color:#fff}
.privacy-narrow{max-width:850px}
.privacy-hero h1{font-size:clamp(2.35rem,6vw,4.8rem);line-height:.98;letter-spacing:-.045em;margin:12px 0 22px}
.privacy-lead{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.65;max-width:760px;color:#dce4f5}
.privacy-meta{margin-top:25px;color:#b9c5df;font-size:.92rem}
.privacy-layout{display:grid;grid-template-columns:230px minmax(0,800px);gap:clamp(35px,7vw,90px);align-items:start;padding-top:60px;padding-bottom:100px}
.privacy-index{position:sticky;top:110px;border-left:3px solid #f79628;padding:8px 0 8px 20px;display:flex;flex-direction:column;gap:10px}
.privacy-index p{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:800;margin:0 0 5px;color:#0f2252}
.privacy-index a{color:#536078;font-size:.9rem;text-decoration:none}
.privacy-index a:hover,.privacy-index a:focus{color:#cf6300;text-decoration:underline}
.privacy-content{background:#fff;border:1px solid #e1e5ec;box-shadow:0 18px 50px rgba(15,34,82,.08);padding:clamp(28px,6vw,68px)}
.privacy-content section{scroll-margin-top:120px;padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid #e6e9ef}
.privacy-content section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.privacy-content h2{font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.2;color:#0f2252;margin:0 0 20px}
.privacy-content h3{font-size:1.05rem;color:#0f2252;margin:25px 0 10px}
.privacy-content p,.privacy-content li,.privacy-content dd{line-height:1.75;color:#3d485d}
.privacy-content ul,.privacy-content ol{padding-left:1.35rem}
.privacy-content li+li{margin-top:8px}
.privacy-content a{color:#a64d00;text-decoration:underline;text-underline-offset:3px}
.privacy-content code{background:#eef1f6;color:#0f2252;padding:2px 6px;border-radius:4px}
.privacy-details{display:grid;gap:0;border:1px solid #e1e5ec;margin:24px 0}
.privacy-details div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:16px 18px;border-bottom:1px solid #e1e5ec}
.privacy-details div:last-child{border-bottom:0}
.privacy-details dt{font-weight:800;color:#0f2252}
.privacy-details dd{margin:0}
.privacy-ack{margin:18px 0 8px;padding:14px 16px;border:1px solid #d8dde7;background:#f7f8fa;border-radius:8px}
.privacy-ack label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;cursor:pointer;line-height:1.45;color:#29354b;font-size:.91rem}
.privacy-ack input{width:18px;height:18px;margin-top:2px;accent-color:#0f2252}
.privacy-ack a{color:#8b4100;text-decoration:underline;text-underline-offset:2px}
.privacy-summary{font-size:.84rem;line-height:1.5;color:#566177;margin:14px 0}
.privacy-summary a{color:#8b4100;text-decoration:underline}
@media(max-width:800px){.privacy-layout{grid-template-columns:1fr;padding-top:30px}.privacy-index{position:static}.privacy-content{padding:26px 20px}.privacy-details div{grid-template-columns:1fr;gap:4px}}