/* ============================================================================
   SilverSeal — bloques.css · componentes bespoke "Precision Studio"
   Header scroll-morph claro · showroom de producto · spec-cards · seal-line
   Todo tokenizado (tokens.css). Sin glassmorphism, sin gradientes genéricos.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--t-1);
  font-family:var(--font); font-weight:400; font-size:var(--t-body);
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--ink); }
p{ margin:0; }
::selection{ background:var(--bright); color:#fff; }
:focus-visible{ outline:2px solid var(--bright); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--r-sm) 0; z-index:200; }
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:var(--wrap-narrow); }
.sec{ padding-block:var(--pad-sec); }
/* Niveles de espaciado (Codex): rompen el ritmo uniforme. Pico editorial / capítulo / utilitario. */
.sec--peak{ padding-block:clamp(4.6rem,9vw,9rem); }
.sec--util{ padding-block:clamp(1.8rem,3.4vw,3.2rem); }
/* Fondos PLANOS: el "bloom" radial queda reservado para hero y flagship (no en cada fondo claro). */
.sec--ice{ background:var(--bg-alt); }
.sec--wash{ background:var(--bg-wash); }
.sec--navy{ background:var(--ink); color:var(--on-ink); }
.sec--flush-top{ padding-top:clamp(1.4rem,3vw,2.4rem); background:var(--bg-alt); }  /* catálogo: fondo ice → los bloques blancos contrastan */
.sec--navy h1,.sec--navy h2,.sec--navy h3,.sec--navy h4{ color:#fff; }
/* dos secciones navy contiguas = un solo continuo (una sola fuente de luz, sin doble bloom) */
.sec--navy + .sec--navy{ background:var(--ink); border-top:1px solid var(--line-navy); }

/* ── Eyebrow + section heads ─────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em; font-size:var(--t-micro);
  font-weight:500; letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--brand);
}
/* Dash del eyebrow en cerulean (NO apricot): el apricot se reserva para gestos raros —
   nav activa, seal-line, la estadística líder y puntos de calibración (Codex: escasez del acento). */
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--teal); border-radius:2px; }
/* variante centrada: dash simétrico a ambos lados (peak de banda centrada) */
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:26px; height:2px; background:var(--teal); border-radius:2px; }
.sec--navy .eyebrow{ color:var(--on-ink-soft); }
.sec--navy .eyebrow::before{ background:var(--accent); }
.shead{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.shead h2{ font-size:var(--t-h2); margin:.7rem 0 .5rem; }
.shead p{ color:var(--t-2); font-size:var(--t-h4); font-weight:300; line-height:1.5; }
.sec--navy .shead p{ color:var(--on-ink-soft); }

/* ── Buttons · pill + Button-in-Button (flecha en círculo anidado) ─────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55em; font-family:inherit;
  font-weight:500; font-size:.96rem; letter-spacing:.01em; padding:.62em .7em .62em 1.35em;
  min-height:44px; box-sizing:border-box;
  border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
/* la flecha vive en su propio círculo, a ras del borde derecho */
.btn svg{ width:15px; height:15px; padding:7px; box-sizing:content-box; border-radius:50%; flex:0 0 auto;
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.btn:hover svg{ transform:translate(2px,-1px) scale(1.04); }
.btn:active{ transform:scale(.98); }
/* si un botón NO trae flecha, recupera el padding simétrico */
.btn:not(:has(svg)){ padding:.7em 1.4em; }
/* CTA primario = acción CORAL (el pop cálido que da vida y rompe el todo-azul). Navy queda de
   ancla en superficies/titulares. TEXTO NAVY sobre el coral: blanco/coral daba 3.46:1 (reposo) y
   2.56:1 (hover) = FALLA AA; navy-900/coral da 4.79:1 y 6.48:1 = PASA AA, sin tocar el hue coral
   (fix contraste, Codex revisor jul-2026). Círculo de flecha claro con flecha navy. */
.btn--primary{ background:var(--accent-deep); color:var(--navy-900); box-shadow:0 6px 18px rgba(217,105,74,.24), inset 0 1px 0 rgba(255,255,255,.28); }
.btn--primary:hover{ background:var(--accent); box-shadow:0 10px 26px rgba(217,105,74,.32), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--primary svg{ background:rgba(255,255,255,.34); }
.btn--primary:hover svg{ background:#fff; color:var(--navy-900); }
.btn--ghost{ background:rgba(255,255,255,.72); color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--brand); background:#fff; box-shadow:var(--sh-sm); }
.btn--ghost svg{ background:var(--tint); }
.btn--ghost:hover svg{ background:var(--bright); color:#fff; }
.btn--light{ background:#fff; color:var(--ink); box-shadow:var(--sh-sm); }
.btn--light:hover{ background:var(--bg-alt); box-shadow:var(--sh-md); }
.btn--light svg{ background:var(--tint); }
.btn--light:hover svg{ background:var(--accent); color:var(--ink); }
.btn--on-navy{ background:rgba(255,255,255,.06); color:#fff; border-color:var(--line-navy); }
.btn--on-navy:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.btn--on-navy svg{ background:rgba(255,255,255,.14); }
.btn--on-navy:hover svg{ background:var(--accent); color:var(--ink); }

/* ── HEADER · ISLA FLOTANTE "2030" (frosted, clara) ──────────────────────────
   Despegada del borde superior, centrada, ancho de contenido. Fluid-island nav
   (skill high-end-visual-design). Sobre el hero claro se lee en tinta navy. */
.hd{
  position:fixed; inset:14px 0 auto 0; z-index:100;
  display:flex; justify-content:center; pointer-events:none;
  transition:transform var(--dur-3) var(--ease-expo);  /* GPU-safe: la isla "sube" con transform, no inset */
}
.hd__in{
  pointer-events:auto; box-sizing:border-box;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:1.1rem;
  /* misma caja que .wrap (max-width + padding-left = --gut) → el LOGO alinea con la
     grilla de contenido en todos los anchos; padding-right chico deja el CTA a la derecha. */
  padding:.55rem .6rem .55rem var(--gut); border-radius:22px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 10px 34px rgba(10,46,82,.10), 0 2px 8px rgba(10,46,82,.05);
  transition:max-width var(--dur-3) var(--ease-expo), background var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.hd__logo{ display:flex; align-items:center; flex:0 0 auto; }
.hd__logo img{ height:32px; width:auto; }
.hd__nav{ display:flex; align-items:center; gap:.25rem; margin-inline:auto; }
.hd__nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.02em; color:var(--t-2); white-space:nowrap;
  position:relative; padding:.5em .85em; border-radius:var(--r-pill);
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hd__nav a::after{ content:""; position:absolute; left:50%; right:50%; bottom:.28em; height:2px;
  background:var(--accent); border-radius:2px; transition:left var(--dur-2) var(--ease), right var(--dur-2) var(--ease); }
.hd__nav a:hover{ color:var(--ink); }
.hd__nav a[aria-current="page"]{ color:var(--ink); }
.hd__nav a[aria-current="page"]::after{ left:calc(50% - 9px); right:calc(50% - 9px); }
.hd__end{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
/* orden visual: idioma · CTA · burger (el burger va primero en el DOM, ver build.py) */
.lang{ order:1; } .hd__end .btn--primary{ order:2; } .hd__burger{ order:3; }
.hd__nav-cta{ display:none; }  /* solo aparece dentro del menú móvil (nav abierto) */

/* Dropdown "Solutions" (disclosure de links; en móvil el CSS lo deja plano) */
.hd__sol{ position:relative; display:inline-flex; align-items:center; }
.hd__sol-trig{ display:inline-flex; align-items:center; gap:.3rem; font-family:inherit; font-size:.82rem;
  font-weight:500; letter-spacing:.02em; color:var(--t-2); background:none; border:0; cursor:pointer;
  padding:.5em .85em; border-radius:var(--r-pill);
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.hd__sol-trig:hover{ color:var(--ink); }
.hd__sol-trig[aria-current="page"]{ color:var(--ink); }
.hd__sol-chev{ width:11px; height:11px; transition:transform var(--dur-2) var(--ease); }
.hd__sol[data-open] .hd__sol-trig{ color:var(--ink); }
.hd__sol[data-open] .hd__sol-chev{ transform:rotate(180deg); }
.hd__sol-menu{ position:absolute; top:calc(100% + 10px); left:0; z-index:120; display:none;
  min-width:210px; padding:.3rem; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-md);
  box-shadow:0 14px 32px rgba(10,46,82,.16), 0 2px 6px rgba(10,46,82,.06); }
.hd__sol[data-open] .hd__sol-menu{ display:block; }
.hd__sol-menu a{ display:block; padding:.55rem .7rem; min-height:40px; border-radius:var(--r-sm);
  font-size:.9rem; color:var(--t-2); transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.hd__sol-menu a:hover{ color:var(--ink); background:var(--tint); }
.hd__sol-menu a[aria-current="page"]{ color:var(--ink); font-weight:500; background:var(--tint); }

/* al scrollear, la isla DOCKea como barra full-width limpia flush arriba (antes flotaba angosta
   y dejaba ver contenido por arriba/los costados — Diego). El look de isla queda para el tope de
   la página. translateY(-14px) la lleva a y=0 de forma GPU-safe y suave. */
.hd--stuck{ transform:translateY(-14px); }
.hd--stuck .hd__in{ max-width:100%; border-radius:0; padding-block:.5rem; padding-inline:var(--gut);
  background:rgba(255,255,255,.93); border:0; border-bottom:1px solid var(--line-2);
  box-shadow:0 8px 24px rgba(10,46,82,.08); }
.hd--stuck .hd__logo img{ height:29px; }

/* Por debajo de --wrap la isla quedaba pegada a los dos bordes (dejaba de flotar: esquinas y
   sombra fuera de pantalla en 960–1240px, anchos de laptop). Se despega 12px por lado y se le
   RESTA lo mismo al padding-left, así el logo sigue alineado con la grilla de contenido (gate ≤8px). */
@media (max-width:1240px){
  .hd__in{ width:calc(100% - 24px); padding-left:calc(var(--gut) - 12px); }
}

/* language switcher — horizontal texto, dentro de la isla */
.lang{ position:relative; display:flex; align-items:center; flex:0 0 auto; }
.lang__trigger{ display:inline-flex; align-items:center; gap:.34rem; min-height:44px; padding:.4em .55em;
  font-family:inherit; font-size:.82rem; font-weight:500; letter-spacing:.02em; color:var(--t-2);
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer;
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.lang__trigger:hover{ color:var(--ink); }
.lang__trigger svg{ width:12px; height:12px; transition:transform var(--dur-2) var(--ease); }
.lang[data-open] .lang__trigger{ color:var(--ink); }
/* separar el idioma de la navegación con una regla fina (utility, no otra píldora) */
.lang::before{ content:""; width:1px; height:16px; background:var(--line-2); margin-right:.35rem; }
.lang[data-open] .lang__trigger svg{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:120; display:none;
  min-width:170px; padding:.3rem; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-md); box-shadow:0 14px 32px rgba(10,46,82,.16), 0 2px 6px rgba(10,46,82,.06); }
.lang[data-open] .lang__menu{ display:block; }
.lang__menu a{ display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.3rem .7rem;
  border-radius:var(--r-sm); color:var(--t-2); font-size:.9rem;
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.lang__menu a:hover{ color:var(--ink); background:var(--tint); }
.lang__menu a[aria-current="true"]{ color:var(--ink); font-weight:500; }
.lang__code{ min-width:2.2ch; font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--brand); }
.lang__menu a[aria-current="true"] .lang__code{ color:var(--teal-ink); }  /* AA: accent-deep daba 3.46:1 (Codex) */

.hd__burger{ display:none; }

/* ── HERO · full-viewport claro con video/imagen ─────────────────────────── */
.hero{ position:relative; min-height:100svh; display:grid; align-content:center;
  padding-top:var(--header-h); overflow:hidden; background:var(--bg-alt); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:radial-gradient(58% 52% at 84% 20%, rgba(42,120,192,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 26%,
    rgba(230,239,248,0) 48%, rgba(255,255,255,.68) 83%, #fff 100%); }
.hero__scrim::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 34%, rgba(255,255,255,0) 70%); }
.hero__c{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gut) clamp(2.6rem,6vh,5rem); }
.hero__inner{ max-width:min(38rem,88vw); }
.hero__tag{ margin-bottom:1rem; }
.hero h1{ font-size:clamp(2.3rem,4.9vw,4.6rem); line-height:1.05; letter-spacing:-.02em; max-width:16ch; }
.hero h1 em{ font-style:normal; color:var(--navy-700); }
.hero__sub{ margin:1.1rem 0 1.7rem; font-size:var(--t-h4); color:var(--t-2); max-width:50ch;
  font-weight:300; line-height:1.55; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__scroll{ position:absolute; z-index:2; left:50%; bottom:1.4rem; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid var(--line-2); border-radius:var(--r-pill); }
.hero__scroll::after{ content:""; position:absolute; left:50%; top:8px; width:3px; height:8px;
  background:var(--brand); border-radius:2px; transform:translateX(-50%);
  animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%,100%{ opacity:0; transform:translate(-50%,0); } 50%{ opacity:1; transform:translate(-50%,7px); } }
@media (prefers-reduced-motion:reduce){ .hero__scroll::after{ animation:none; } }

/* hero rail: métricas honestas bajo el fold */
.hero__rail{ position:relative; z-index:2; background:var(--ink); color:var(--on-ink); }
.hero__rail .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.hrail__i{ padding:1.4rem clamp(1rem,2vw,1.8rem); }
.hrail__i + .hrail__i{ border-left:1px solid var(--line-navy); }
.hrail__i small{ display:block; font-size:var(--t-micro); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--accent); margin-bottom:.35rem; }
.hrail__i b{ font-size:1.02rem; font-weight:500; color:#fff; }

/* ── DOORS · 3 puertas de catálogo (editorial asimétrico) ────────────────── */
.doors{ display:grid; grid-template-columns:1.4fr 1fr; grid-auto-rows:1fr; gap:var(--gap); }
.door{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink);
  min-height:270px; display:flex; align-items:flex-end; box-shadow:var(--sh-md);
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.door:first-child{ grid-row:span 2; }
.door__img{ position:absolute; inset:0; z-index:0; }
.door__img img{ width:100%; height:100%; object-fit:cover; opacity:.82;
  transition:transform var(--dur-3) var(--ease); }
/* scrim reforzado: alcanza alta opacidad MÁS ARRIBA (~.85 al 52%) para que la ETIQUETA de categoría
   —que se sienta a ~55-75% de la card— quede sobre fondo navy suficiente y pase AA real sobre fotos
   claras (labeling/materials). render_check medía 1.97-2.13:1 en ese punto (Codex revisor jul-2026). */
.door::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,31,58,0) 4%, rgba(7,31,58,.42) 34%, rgba(7,31,58,.85) 55%, rgba(7,31,58,.95) 100%); }
.door__c{ position:relative; z-index:2; padding:1.6rem; color:#fff; }
.door__c .n{ display:inline-flex; align-items:baseline; gap:.6rem;
  font-size:var(--t-micro); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:#E4EEF9; font-weight:500; }
.door__ix{ font-style:normal; font-weight:600; font-size:.82rem; letter-spacing:.02em;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.door__c h3{ color:#fff; font-size:var(--t-h3); margin:.3rem 0 .2rem; }
.door__c p{ color:#D6E4F2; font-size:var(--t-small); max-width:34ch; }
.door__c .go{ display:inline-flex; align-items:center; gap:.4em; margin-top:.7rem; color:#fff;
  font-weight:500; font-size:.9rem; }
.door__c .go svg{ width:15px; transition:transform var(--dur-2) var(--ease); }
.door{ box-shadow:0 1px 2px rgba(10,46,82,.04), 0 8px 20px rgba(10,46,82,.06); }
.door:hover{ transform:translateY(-2px); }  /* la foto y la asimetría dan la profundidad, no la sombra */
.door:hover .door__img img{ transform:scale(1.035); }
.door:hover .go svg{ transform:translateX(4px); }

/* ── SPLIT · producto insignia / zigzag ──────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(1.6rem,4vw,4rem); }
.split--rev .split__media{ order:2; }
/* flagship = 2º pico: imagen dominante 58/42 y un pelín más de aire alrededor */
.split--flag{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(2rem,4.5vw,4.6rem); }
.flag-peak .split__media{ box-shadow:0 2px 6px rgba(10,46,82,.06), 0 24px 60px -20px rgba(10,46,82,.28); }
@media (max-width:820px){ .split--flag{ grid-template-columns:1fr; } }
.split__media{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--bg-alt); box-shadow:var(--sh-md); }
.split__media img,.split__media video{ width:100%; height:100%; object-fit:cover; }
/* SELLO DE MARCA animado (logo que se auto-construye) en el About del home. Card cuadrado que
   enmarca el video; el fondo iguala el gris del video (#D7D7D7) para que object-fit:cover no muestre
   corte. Base = póster (logo final estático); la capa fx lo reproduce una vez al entrar en viewport. */
.split__media--seal{ aspect-ratio:auto; background:none; box-shadow:none; overflow:visible;
  display:flex; align-items:center; justify-content:center; }
.logoseal{ position:relative; width:min(380px,86%); aspect-ratio:1/1; border-radius:var(--r-lg);
  overflow:hidden; background:#fff; border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(10,46,82,.08), 0 18px 40px -16px rgba(10,46,82,.22); }
.logoseal video{ width:100%; height:100%; object-fit:cover; display:block; }
/* ESTADO FIJO = el ARCHIVO DE MARCA EXACTO de Diego (favicon.png, RGBA), nunca un frame derivado del
   video. object-fit:contain + padding → se muestra íntegro, sin recorte ni deformación. Sin JS/fx
   (base) queda ÉL visible tapando el video; la capa fx lo desvanece mientras corre la animación. */
.logoseal__mark{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  padding:12%; display:block; background:#fff; }
.split__c .eyebrow{ margin-bottom:.8rem; }
.split__c h2{ font-size:var(--t-h2); margin-bottom:.8rem; }
.split__c > p{ color:var(--t-2); margin-bottom:1.3rem; }
/* Riel de spec separado por reglas (Codex: no cajas): valor grande + label micro, divididos. */
.split__specs{ display:flex; flex-wrap:wrap; margin:1.4rem 0 1.7rem; border-top:1px solid var(--line-2); padding-top:1.1rem; }
.mini{ padding:.1rem clamp(1rem,2.2vw,1.7rem) 0 0; }
.mini + .mini{ border-left:1px solid var(--line-2); padding-left:clamp(1rem,2.2vw,1.7rem); }
.mini b{ display:block; font-size:1.35rem; color:var(--ink); font-weight:600; line-height:1.1; }
.mini span{ font-size:var(--t-micro); color:var(--t-2); letter-spacing:.04em; text-transform:uppercase; }

/* ── PROCESS · seal-line de 4 pasos ──────────────────────────────────────── */
.flow{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.flow::before{ content:""; position:absolute; left:0; right:0; top:26px; height:2px;
  background:var(--line-2); z-index:0; }
.flow::after{ content:""; position:absolute; left:0; right:0; top:26px; height:2px;
  background:var(--accent); z-index:1; transform:scaleX(var(--seal,0)); transform-origin:left center;
  transition:transform 1.1s var(--ease); }
.step{ position:relative; z-index:2; }
/* estación calibrada: círculo más chico, número de 2 dígitos, borde fino (Codex) */
.step__n{ width:52px; height:52px; border-radius:var(--r-pill); background:#fff; border:1.5px solid var(--line-2);
  display:grid; place-items:center; font-size:.95rem; font-weight:600; letter-spacing:.02em; color:var(--brand);
  font-variant-numeric:tabular-nums;
  box-shadow:var(--sh-sm); transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.step.on .step__n{ border-color:var(--accent); color:var(--ink); }
.step h3,.step h4{ margin:1.1rem 0 .4rem; font-size:var(--t-h4); }
.step p{ font-size:var(--t-small); color:var(--t-2); }

/* ── PAGE HERO · páginas internas ─────────────────────────────────────────
   Angosto por defecto (about/productos/materials); split editorial 5/7 cuando se
   pasa un render de máquina (machinery/labeling/coding) — ancla visual, no solo texto. */
.page-hero{ padding-bottom:clamp(1.6rem,3vw,2.6rem); }
.page-hero .wrap.narrow h1{ font-size:var(--t-h1); margin:.6rem 0 .8rem; letter-spacing:-.015em; }
.page-hero .wrap.narrow p{ font-size:var(--t-h4); color:var(--t-2); max-width:60ch; font-weight:300; }
.page-hero--split .phero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.6rem,4vw,3.6rem); align-items:center; }
.phero__c h1{ font-size:var(--t-h1); margin:.6rem 0 .7rem; line-height:1.05; letter-spacing:-.02em; }
.phero__c p{ font-size:var(--t-h4); color:var(--t-2); max-width:44ch; font-weight:300; line-height:1.5; }
.phero__media{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--bg-alt);
  box-shadow:0 2px 6px rgba(10,46,82,.05), 0 20px 50px -22px rgba(10,46,82,.26); }
.phero__media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){
  .page-hero--split .phero{ grid-template-columns:1fr; gap:1.4rem; }
  .phero__media{ order:-1; max-width:560px; }
}

/* ── REACH band (about) · cabecera centrada + franja de EVIDENCIA de ingeniería ──
   Fotos de contexto (línea/QA/export) — distintas de los renders de máquina, rompen
   el "todas las imágenes iguales" (AI tell). */
.reach__head{ max-width:56ch; margin-inline:auto; text-align:center; }
.reach__head p{ color:var(--t-2); }
.reach__strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.6vw,1.1rem);
  margin-top:clamp(1.8rem,3.6vw,3rem); }
.reach__img{ margin:0; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3;
  background:var(--bg-alt); box-shadow:0 1px 2px rgba(10,46,82,.04), 0 10px 26px -12px rgba(10,46,82,.2); }
.reach__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-3) var(--ease); }
.reach__img:hover img{ transform:scale(1.04); }
@media (max-width:640px){ .reach__strip{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* ── CINE-BAND · foto full-bleed que "respira" (Ken Burns sutil) — efecto de fondo ───
   Diego: una foto con mínimo movimiento como fondo. Pico navy a media página; el scrim
   garantiza contraste del texto; reduced-motion la congela. */
.cineband{ position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(380px,54vh,520px); padding-block:clamp(3rem,6vw,5rem);
  margin-block:clamp(2.4rem,5vw,4.4rem); background:var(--ink); }
.cineband__bg{ position:absolute; inset:0; z-index:0; }
.cineband__bg img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); animation:kenburns 26s ease-in-out infinite alternate; will-change:transform; }
.cineband__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(6,26,48,.9) 0%, rgba(6,26,48,.62) 48%, rgba(6,26,48,.32) 100%); }
.cineband > .wrap{ position:relative; z-index:2; width:100%; }
.cineband__c{ max-width:42ch; color:#fff; }
.cineband__c .eyebrow{ color:var(--on-ink-soft); margin-bottom:.7rem; }
.cineband__c .eyebrow::before{ background:var(--accent); }
.cineband__c h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.08; letter-spacing:-.015em; }
.cineband__c p{ color:var(--on-ink-soft); margin-top:.9rem; font-size:var(--t-h4); font-weight:300; line-height:1.5; }
@keyframes kenburns{ from{ transform:scale(1.06) translate(0,0); } to{ transform:scale(1.14) translate(-1.5%,-1.2%); } }
@media (prefers-reduced-motion:reduce){ .cineband__bg img{ animation:none; transform:scale(1.06); } }
/* variante intersticial del catálogo: un poco más baja que el cine del home, integrada entre
   secciones ice (corta el ritmo de cards idénticas — revisor: romper la uniformidad). */
.cat-break{ min-height:clamp(300px,42vh,440px); margin-block:clamp(1.6rem,3.2vw,2.8rem); }

/* ── BLOG · índice (Insights) ─────────────────────────────────────────────── */
.bgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2.6vw,2rem); }
.bcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; color:var(--t-1);
  box-shadow:0 1px 2px rgba(10,46,82,.03), 0 6px 16px rgba(10,46,82,.05);
  transition:transform var(--dur-2) var(--ease-expo), box-shadow var(--dur-2) var(--ease); }
.bcard:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(10,46,82,.05), 0 12px 28px rgba(10,46,82,.09); }
.bcard__img{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.bcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-3) var(--ease); }
.bcard:hover .bcard__img img{ transform:scale(1.04); }
.bcard__c{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.bcard__cat{ font-size:var(--t-micro); letter-spacing:.07em; text-transform:uppercase; color:var(--teal-ink); font-weight:600; }
.bcard__c h3{ margin:.45rem 0 .4rem; font-size:var(--t-h4); color:var(--ink); line-height:1.2; }
.bcard__c p{ font-size:var(--t-small); color:var(--t-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcard__meta{ margin-top:auto; padding-top:.9rem; font-size:var(--t-micro); color:var(--t-3);
  font-variant-numeric:tabular-nums; }
@media (max-width:960px){ .bgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .bgrid{ grid-template-columns:1fr; } }

/* ── BLOG · artículo ──────────────────────────────────────────────────────── */
.article{ padding-top:calc(var(--header-h) + clamp(1.4rem,3vw,2.4rem)); }
.article__back{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--t-small);
  font-weight:500; color:var(--t-2); margin-bottom:1.4rem; }
.article__back svg{ width:15px; transition:transform var(--dur-2) var(--ease); }
.article__back:hover{ color:var(--ink); } .article__back:hover svg{ transform:translateX(-3px); }
.article__cat,.bcard__cat{ display:inline-block; }
.article__head{ max-width:40ch; }
.article__head .article__cat{ font-size:var(--t-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--teal-ink); font-weight:600; }
.article__head h1{ font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.08; letter-spacing:-.02em; margin:.5rem 0 .6rem; }
.article__meta{ color:var(--t-3); font-size:var(--t-small); font-variant-numeric:tabular-nums; }
.article__hero{ margin:clamp(1.6rem,3.6vw,2.8rem) 0; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:16/9; background:var(--bg-alt); box-shadow:0 2px 6px rgba(10,46,82,.05), 0 20px 50px -22px rgba(10,46,82,.26); }
.article__hero img{ width:100%; height:100%; object-fit:cover; }
/* tipografía de lectura larga */
.article__body{ max-width:70ch; font-size:1.06rem; line-height:1.75; color:var(--t-1); }
.article__body > * + *{ margin-top:1.1rem; }
.article__body h2{ font-size:clamp(1.4rem,2.2vw,1.85rem); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink); margin-top:2.4rem; }
.article__body h3{ font-size:clamp(1.15rem,1.7vw,1.35rem); color:var(--ink); margin-top:1.8rem; }
.article__body p{ color:var(--t-1); }
.article__body a{ color:var(--bright); text-decoration:underline; text-underline-offset:2px; }
.article__body ul,.article__body ol{ padding-left:1.3rem; }
.article__body li + li{ margin-top:.4rem; }
.article__body li{ line-height:1.65; }
.article__body strong{ color:var(--ink); font-weight:600; }
.article__body blockquote{ margin:1.6rem 0; padding:.4rem 0 .4rem 1.3rem; border-left:2px solid var(--accent);
  color:var(--t-2); font-size:1.12rem; }
.article__body table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-small);
  margin:1.4rem 0; border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; }
.article__body th,.article__body td{ text-align:left; padding:.7rem .9rem; border-top:1px solid var(--line); vertical-align:top; }
.article__body thead th{ border-top:0; background:var(--bg-alt); font-size:var(--t-micro);
  letter-spacing:.06em; text-transform:uppercase; color:var(--t-2); font-weight:600; }
.article__body td{ font-variant-numeric:tabular-nums; }
.article__body figure{ margin:1.6rem 0; }
.article__body img{ max-width:100%; height:auto; border-radius:var(--r-md); }

/* ── SPEC-CARDS · catálogo técnico (uniforme, sin foto individual) ───────── */
.family{ margin-top:clamp(2.4rem,5vw,4rem); scroll-margin-top:calc(var(--header-h) + 64px); }
.family:first-of-type{ margin-top:0; }
/* BLOQUE de familia (machinery/labeling/materials): card blanca sobre el fondo ice del catálogo.
   Cada familia queda contenida y separada → jerarquía + contraste (Diego: "usar bloques"). Solo
   las familias con banda (:has(.fam-band)); los grupos de `productos` (con .rgrid de rcards) NO,
   para no anidar cards. scroll-margin extra por el famnav sticky. */
.family:has(.fam-band), .family:has(.prows){ --fam-pad:clamp(1.5rem,3vw,2.6rem);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  padding:var(--fam-pad); box-shadow:0 1px 2px rgba(10,46,82,.04), 0 18px 44px -20px rgba(10,46,82,.22);
  margin-top:clamp(1.5rem,3vw,2.4rem); scroll-margin-top:calc(var(--header-h) + 78px); }
/* CAPÍTULO: la banda sangra a los bordes del card como un plano wash (Codex C1) → header
   inconfundible sobre las filas, con índice 01/02 grande y sobrio. */
.family:has(.fam-band) .fam-band{ background:var(--bg-wash);
  margin:calc(-1*var(--fam-pad)) calc(-1*var(--fam-pad)) clamp(1.2rem,2.4vw,1.8rem);
  padding:clamp(1.3rem,2.6vw,2rem) var(--fam-pad);
  border-bottom:1px solid var(--line); margin-bottom:clamp(1.2rem,2.4vw,1.8rem); }
.family:has(.fam-band) .fam-band__media{ border-radius:var(--r-md); }
.fam-ix{ display:block; font-size:clamp(1.35rem,2.3vw,1.95rem); font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--t-3); font-variant-numeric:tabular-nums; margin-bottom:.15rem; }
.fam-count{ display:inline-block; margin-top:.9rem; padding:.28em .8em; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line-2); color:var(--brand); font-size:var(--t-small); font-weight:600; }
/* Banda de familia FIJA (ya no alterna lados: la alternancia rompía la proximidad entre el
   encabezado y sus modelos). Media más chica: lo importante son los productos, no la foto. */
.fam-band{ display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,330px); align-items:center;
  gap:clamp(1.4rem,3.5vw,3rem); margin-bottom:.7rem; }
.fam-band__media{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; background:var(--bg-alt);
  box-shadow:var(--sh-md); align-self:center; }
.fam-band__media img{ width:100%; height:100%; object-fit:cover; }
.fam-band__c h2,.fam-band__c h3{ font-size:clamp(1.7rem,2.6vw,2.15rem); line-height:1.08;
  letter-spacing:-.012em; margin:.35rem 0 .5rem; }
.fam-band__c p{ color:var(--t-2); font-size:var(--t-small); max-width:58ch; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gap); }
/* ── FILA de producto ────────────────────────────────────────────────────────
   Reemplaza la grilla de tarjetas. Sin caja y sin panel anidado: las specs van en una
   grilla FIJA de 4 columnas, así quedan al mismo offset vertical en todos los modelos y se
   comparan leyendo hacia abajo (antes se corrían hasta 43px según cuántas líneas ocupaba el
   tagline). Cada fila tiene por fin su propio CTA y muestra la descripción larga. */
.prows{ margin-top:.4rem; }
/* Riel de encabezado de columnas (patrón tabla) — rótulos de spec UNA vez, alineados a .prow.
   Solo aparece en cohortes uniformes (build.fam_cols); en las filas ocultamos los dt con :has(). */
.fam-cols{ display:grid; grid-template-columns:144px minmax(160px,1fr) minmax(0,2.1fr);
  gap:.85rem 1.4rem; align-items:end; padding:.2rem 0 .55rem; border-bottom:1.5px solid var(--line-2); }
.fam-cols__id{ grid-column:2; font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-3); font-weight:600; align-self:end; }
.fam-cols__s{ grid-column:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem 1.1rem; }
.fam-cols__s span{ font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-3); font-weight:600; line-height:1.3; }
.prows:has(.fam-cols) .prow > .prow__specs dt{ position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.prow{ display:grid; grid-template-columns:144px minmax(160px,1fr) minmax(0,2.1fr);
  gap:.85rem 1.4rem; align-items:center; padding:1rem 0; border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 76px); }
.prows:has(.fam-cols) .prow:first-of-type{ border-top:0; }
.prows > .prow:first-child{ border-top:0; }
.prow > *{ min-width:0; }
.prow__media{ align-self:center; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden;
  background:var(--bg-wash); border:1px solid var(--line); }
.prow__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* nombre = ancla dominante (Codex/revisor: el modelo debe pesar más que specs/descripción) */
.prow h3{ font-size:clamp(1.1rem,1.35vw,1.26rem); color:var(--ink); font-weight:600; letter-spacing:-.01em; }
.prow__tag{ margin-top:.3rem; font-size:var(--t-small); color:var(--t-2); line-height:1.45; }
.prow__specs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem 1.2rem; margin:0; }
/* stat-tile: CIFRA-PRIMERO (premium) en vez de spec-sheet — el VALOR protagonista arriba, la etiqueta
   como caption quieto debajo. Eco del patrón .mini del flagship del home. (tirano Lente 2: "lee a spec-sheet") */
.prow__specs > div{ display:flex; flex-direction:column-reverse; }
.prow__specs dt{ font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--t-3); font-weight:500; margin-top:.28rem; }
.prow__specs dd{ margin:0; font-size:.98rem; font-weight:600; color:var(--ink); line-height:1.15; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.prow__act{ align-self:center; }
.prow__more{ grid-column:1 / -1; }
.prow__more summary{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; list-style:none;
  font-size:var(--t-small); font-weight:500; color:var(--brand); padding:.35rem 0; min-height:32px; }
.prow__more summary::-webkit-details-marker{ display:none; }
.prow__more summary::before{ content:"+"; display:grid; place-items:center; width:18px; height:18px;
  border:1px solid var(--line-2); border-radius:50%; font-size:.78rem; line-height:1; color:var(--t-3); }
.prow__more[open] summary::before{ content:"–"; border-color:var(--bright); color:var(--bright); }
.prow__moreb{ padding:.15rem 0 .5rem; max-width:78ch; }
.prow__desc{ margin-top:.3rem; font-size:var(--t-small); color:var(--t-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prow__moreb .chips{ margin-top:.75rem; }
/* Fila-HERO (featured): el 1er modelo de cada familia se abre image-forward (imagen grande a la
   izquierda, identidad + specs a la derecha) → rompe la homogeneidad de renders (revisor). */
.prow--feat{ grid-template-columns:clamp(240px,32%,340px) minmax(0,1fr); gap:clamp(1.3rem,2.8vw,2.2rem);
  align-items:stretch; padding:clamp(1.4rem,2.6vw,2rem) 0; }
.prow--feat .prow__media{ grid-row:1 / -1; aspect-ratio:auto; align-self:stretch; min-height:210px; }
.prow--feat .prow__media img{ height:100%; }
.prow--feat .prow__id{ grid-column:2; }
.prow--feat h3{ font-size:clamp(1.3rem,1.85vw,1.6rem); }
.prow--feat .prow__desc{ -webkit-line-clamp:3; max-width:62ch; }
.prow--feat .prow__specs{ grid-column:2; margin-top:1.05rem;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.4rem; }
.prow--feat .prow__more{ grid-column:2; }
@media (max-width:820px){
  .prow--feat{ grid-template-columns:1fr; gap:1rem; }
  .prow--feat .prow__media{ grid-row:auto; aspect-ratio:16/9; min-height:0; max-height:260px; }
  .prow--feat .prow__id,.prow--feat .prow__specs,.prow--feat .prow__more{ grid-column:1; }
}
/* CTA de familia DEMOTADA a acción ghost (Codex C4: 7 pills navy = 7 conclusiones que compiten;
   el navy primario se reserva para el cierre de página). */
.fam-cta{ margin-top:1.5rem; background:transparent; color:var(--brand);
  border:1px solid var(--line-2); box-shadow:none; font-weight:500; }
.fam-cta:hover{ background:var(--tint); border-color:var(--bright); color:var(--ink); }

/* Coding & marking · tarjetas de tecnología HORIZONTALES image-first 40/60 (coding.html).
   Columna única, tipo billboard: render ancho a la izquierda, identidad + specs a la derecha. */
.tgrid{ display:grid; grid-template-columns:1fr; gap:clamp(1rem,2.4vw,1.6rem); }
.tcard{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:clamp(1.3rem,3.2vw,2.4rem);
  align-items:center; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(1.1rem,2.4vw,1.6rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(10,46,82,.04), 0 10px 24px rgba(10,46,82,.06); }
.tcard__media{ aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; background:var(--bg-wash); border:1px solid var(--line); }
.tcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tcard__c h3{ font-size:clamp(1.25rem,1.8vw,1.6rem); color:var(--ink); letter-spacing:-.01em; }
.tcard__tag{ margin:.35rem 0 1rem; font-size:var(--t-small); color:var(--t-2); line-height:1.5; max-width:52ch; }
.tcard__specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1rem; margin:0; }
.tcard__specs > div{ display:flex; flex-direction:column-reverse; }  /* stat-tile cifra-primero (tirano Lente 2) */
.tcard__specs dt{ font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--t-3); font-weight:500; margin-top:.26rem; }
.tcard__specs dd{ margin:0; font-size:.98rem; font-weight:600; color:var(--ink); line-height:1.15; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.coding-cta{ margin-top:2rem; }
.coding-bridge{ margin-top:clamp(2.4rem,5vw,4rem); scroll-margin-top:calc(var(--header-h) + 76px);
  padding:clamp(1.4rem,3vw,2rem); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-wash); }
.coding-bridge h2{ margin-bottom:.4rem; }
.coding-bridge p{ color:var(--t-2); font-size:var(--t-small); max-width:64ch; margin-bottom:1rem; }

/* Tabla comparativa (arms · WO-09). Col-1 sticky; el body de la página nunca scrollea. */
.ctable-wrap{ position:relative; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain; margin-top:.4rem; }
.ctable{ border-collapse:separate; border-spacing:0; min-width:720px; width:100%; font-size:var(--t-small); }
.ctable th,.ctable td{ text-align:left; padding:.85rem 1.1rem; border-top:1px solid var(--line); vertical-align:middle; }
.ctable thead th{ border-top:0; font-size:var(--t-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--t-2); font-weight:600; background:var(--bg-alt); }
.ctable tbody th{ font-weight:600; color:var(--ink); }
.ctable td{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.ctable tr>:first-child{ min-width:248px; }
.ctable tr:not(.ctable__detail)>:first-child{ position:sticky; left:0; z-index:2; background:#fff;
  box-shadow:8px 0 12px -8px rgba(10,46,82,.12); }
/* zebra visible para seguir un valor a lo largo de 6 columnas (R7: el tinte era casi invisible).
   Filas-modelo = hijos impares (main+detalle alternan); tinto los modelos 1,3,5,7 = 4n+3. Va DESPUÉS
   del sticky para que el primer cell (sticky) también tome el tinte; hover al final gana sobre ambos. */
.ctable tbody tr:nth-child(4n+3),
.ctable tbody tr:nth-child(4n+3)>:first-child{ background:#EAF1F9; }
.ctable tr:not(.ctable__detail):hover,
.ctable tr:not(.ctable__detail):hover>:first-child{ background:var(--tint); }
.ctable thead tr>:first-child{ z-index:3; }
.ctable__m{ display:flex; align-items:center; gap:.8rem; }
.ctable__th{ width:80px; height:60px; flex:0 0 auto; border-radius:7px; object-fit:cover;
  background:var(--bg-wash); border:1px solid var(--line); display:block; }
.ctable__act{ text-align:right; }
/* toggle: sin píldora rellena; chevron a la derecha que rota al abrir */
.ctable__btn{ display:inline-flex; align-items:center; gap:.5rem; min-height:40px; padding:.3rem .3rem .3rem .7rem;
  font-family:inherit; font-size:var(--t-small); font-weight:500; color:var(--brand); background:none;
  border:0; cursor:pointer; white-space:nowrap; }
.ctable__btn::after{ content:""; width:15px; height:15px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--dur-2) var(--ease); }
.ctable__btn:hover{ color:var(--ink); }
.ctable__btn[aria-expanded="true"]{ color:var(--bright); }
.ctable__btn[aria-expanded="true"]::after{ transform:rotate(180deg); }
.ctable__detail td{ background:var(--bg-wash); box-shadow:inset 3px 0 0 var(--bright); }
.ctable__db{ padding:.4rem 0; max-width:80ch; }
.ctable__db .prow__desc{ display:block; -webkit-line-clamp:unset; }
.ctable__db .prow__specs--more{ margin-top:.7rem; }
.ctable__db .chips{ margin-top:.7rem; }
.ctable-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:26px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,247,252,.9)); }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.4rem; }
.chip{ font-size:var(--t-micro); color:var(--teal-ink); background:var(--tint-teal); border-radius:var(--r-pill);
  padding:.28em .7em; font-weight:500; }

/* ── Sub-nav de familias · RIEL DE TABS PLANO con indicador activo (scroll-spy) ─
   Sin píldoras/bordes (eran "pill-soup"): tabs de texto separadas por aire, subrayado
   que se llena en la familia visible. El activo usa apricot = misma semántica de
   "ubicación actual" que el tick del header. */
.famnav{ position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid var(--line); }
.famnav .wrap{ display:flex; gap:clamp(.4rem,1.8vw,1.8rem); overflow-x:auto; scrollbar-width:none; }
.famnav .wrap::-webkit-scrollbar{ display:none; }
.famnav a{ flex:0 0 auto; position:relative; font-size:var(--t-small); font-weight:500; color:var(--t-2);
  padding:.85rem .2rem; white-space:nowrap; transition:color var(--dur-2) var(--ease); }
.famnav a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--line-2); transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.famnav a:hover{ color:var(--ink); }
.famnav a:hover::after{ transform:scaleX(1); }
.famnav a[aria-current="true"]{ color:var(--ink); font-weight:600; }
.famnav a[aria-current="true"]::after{ background:var(--accent); transform:scaleX(1); }

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.sec--trust{ padding-block:clamp(1.6rem,3vw,2.4rem); background:var(--bg-alt);
  border-block:1px solid var(--line); }
/* Riel de prueba HORIZONTAL: iconos inline sin caja, separados por reglas finas
   (Codex: nada de cajas-icono tipo SaaS; el apricot no va acá). */
.trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.tr{ display:flex; align-items:center; gap:.6rem; color:var(--t-1); font-weight:500; font-size:var(--t-small);
  padding:.2rem clamp(1.1rem,2.8vw,2.6rem); }
.tr + .tr{ border-left:1px solid var(--line-2); }
.tr svg{ width:20px; height:20px; flex:0 0 auto; color:var(--bright); }
/* móvil: apilado vertical, la regla pasa a horizontal (sin border-left huérfano al envolver) */
@media (max-width:640px){
  .trust{ flex-direction:column; align-items:stretch; }
  .tr{ justify-content:center; padding:.7rem 0; }
  .tr + .tr{ border-left:0; border-top:1px solid var(--line-2); }
}

/* ── Values grid (about) — 4 en fila ─────────────────────────────────────── */
.vgrid{ grid-template-columns:repeat(4,1fr); }
/* Los valores NO son tarjetas (no tienen specs): regla superior + texto, sin caja. */
.value{ padding-top:1rem; border-top:2px solid var(--line-2); }
.value:first-child{ border-top-color:var(--accent); }
.value h3{ font-size:var(--t-h4); color:var(--ink); margin-bottom:.5rem; }
.value p{ font-size:var(--t-small); color:var(--t-2); line-height:1.55; }

/* ── RANGE cards (productos overview) ────────────────────────────────────── */
/* header de grupo en productos (no cardificado): regla superior + count → separación clara */
.prodgroup{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-top:2px solid var(--line-2); padding-top:1.05rem; }
.prodgroup__n{ flex:0 0 auto; align-self:center; padding:.28em .8em; border-radius:var(--r-pill);
  background:var(--tint-teal); color:var(--teal-ink); font-size:var(--t-small); font-weight:700;
  font-variant-numeric:tabular-nums; }
.rgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.rgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.rgrid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.rcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; color:var(--t-1);
  box-shadow:0 1px 2px rgba(10,46,82,.03), 0 6px 16px rgba(10,46,82,.05);
  transition:transform var(--dur-2) var(--ease-expo), box-shadow var(--dur-2) var(--ease); }
.rcard:hover{ transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(10,46,82,.05), 0 12px 28px rgba(10,46,82,.09); }
.rcard__img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt); }
.rcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-3) var(--ease); }
.rcard:hover .rcard__img img{ transform:scale(1.03); }
/* índice de rango tipo plancha de catálogo (no eyebrow-scaffold: numera un lineup real) */
.rcard__ix{ position:absolute; top:.65rem; left:.75rem; z-index:2; font-size:.7rem; font-weight:600;
  letter-spacing:.05em; color:#fff; background:rgba(10,46,82,.5); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); padding:.16rem .48rem; border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums; }
.rcard__c{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.rcard__c h3{ font-size:var(--t-h4); color:var(--ink); }
.rcard__c p{ margin:.4rem 0 .9rem; font-size:var(--t-small); color:var(--t-2); line-height:1.45; }
/* specs = línea fina (antes badge tipo pill): rótulo técnico bajo una regla superior */
.rcard__s{ font-size:var(--t-micro); font-weight:500; letter-spacing:.03em; color:var(--t-2);
  border-top:1px solid var(--line-2); padding:.6rem 0 0; margin-bottom:1rem;
  font-variant-numeric:tabular-nums; }
.rcard .go{ display:inline-flex; align-items:center; gap:.4em; margin-top:auto; color:var(--ink);
  font-weight:500; font-size:.88rem; }
.rcard .go svg{ width:15px; transition:transform var(--dur-2) var(--ease); }
.rcard:hover .go svg{ transform:translateX(4px); }
/* colapso responsive de las grillas de rango (antes auto-fill) */
@media (max-width:960px){ .rgrid,.rgrid--3,.rgrid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .rgrid,.rgrid--3,.rgrid--4{ grid-template-columns:1fr; } }

/* ── INDUSTRIES · mosaico ────────────────────────────────────────────────── */
/* Mosaico real (Codex): 2 anclas anchas landscape arriba + 3 verticales abajo — no 5 cards iguales. */
.ind{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap); }
.ind .icard:nth-child(1),.ind .icard:nth-child(2){ grid-column:span 3; aspect-ratio:16/10; }
.ind .icard:nth-child(3),.ind .icard:nth-child(4),.ind .icard:nth-child(5){ grid-column:span 2; }
.icard{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:3/4; min-height:220px;
  display:flex; align-items:flex-end;
  /* sombra suave navy-tinted: despega la tarjeta del wash celeste sin ser ghost-card (Diego) */
  box-shadow:0 2px 6px rgba(10,46,82,.08), 0 16px 34px -14px rgba(10,46,82,.22);
  transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.icard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform var(--dur-3) var(--ease); }
.icard::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,31,58,0) 40%, rgba(7,31,58,.8) 100%); }
.icard span{ position:relative; z-index:2; padding:1rem 1.1rem; color:#fff; font-weight:500; font-size:.98rem; }
.icard:hover{ transform:translateY(-3px); box-shadow:0 6px 16px rgba(10,46,82,.12), 0 28px 50px -16px rgba(10,46,82,.30); }
.icard:hover img{ transform:scale(1.06); }

/* ── STATS · estáticos con seal-line ─────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
/* regla apricot SOLO en la estadística líder; las demás en línea neutra (Codex: escasez del acento) */
.stat{ padding:1.4rem 0; border-top:1px solid var(--line-2); }
.stat:first-child{ border-top:2px solid var(--accent); }
.stat b{ display:block; font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:600; color:var(--ink); line-height:1; }
.stat:first-child b{ font-size:clamp(2.7rem,5.2vw,4.2rem); }  /* ancla visual sobredimensionada */
.sec--navy .stat b{ color:#fff; }
.stat span{ display:block; margin-top:.5rem; font-size:var(--t-small); color:var(--t-2); }
.sec--navy .stat span{ color:var(--on-ink-soft); }

/* ── CTA band + form ─────────────────────────────────────────────────────── */
.ctaband{ position:relative; overflow:hidden; padding-block:clamp(2.6rem,5vw,4.2rem); }
.ctaband .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.ctaband h2{ font-size:var(--t-h2); }
.ctaband p{ color:var(--on-ink-soft); margin-top:.7rem; max-width:44ch; }
/* Banda de cierre DELGADA: el formulario vive solo en contacto.html. Antes eran 596px de navy
   repetidos en 6 páginas, que ahogaban al footer. Ahora ~120px, titular + una acción. */
.ctastrip{ padding-block:clamp(1.5rem,2.8vw,2.1rem); }
.ctastrip .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; }
.ctastrip__c{ max-width:56ch; }
.ctastrip h2{ font-size:var(--t-h3); color:#fff; }
.ctastrip p{ color:var(--on-ink-soft); margin-top:.35rem; font-size:var(--t-small); }
.form{ display:grid; gap:.9rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:var(--t-micro); letter-spacing:.04em; text-transform:uppercase; color:var(--on-ink-soft); }
.field input,.field textarea,.field select{
  font-family:inherit; font-size:.98rem; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid var(--line-navy); border-radius:var(--r-md); padding:.8em .9em;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.field input::placeholder,.field textarea::placeholder{ color:#7f9bbd; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none;
  border-color:var(--accent); background:rgba(255,255,255,.1); }
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.field textarea{ min-height:104px; resize:vertical; }
.form .note{ font-size:var(--t-micro); color:#7f9bbd; }
.contact-form-panel{ background:radial-gradient(120% 90% at 50% 0%, rgba(42,120,192,.20), transparent 60%), var(--ink);
  color:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem); }
.formmsg{ min-height:1.4em; margin-top:.1rem; font-size:var(--t-small); color:var(--on-ink-soft); }
.formmsg.ok{ color:#BFE7D7; } .formmsg.err{ color:#FFD2CC; }

/* contact info card */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); }
.info{ display:grid; gap:1.2rem; align-content:start; }
.info__row{ display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:start; padding-bottom:1.2rem;
  border-bottom:1px solid var(--line); }
.info__row .ic{ width:42px; height:42px; border-radius:var(--r-md); background:var(--bg-alt);
  display:grid; place-items:center; color:var(--brand); }
.info__row .ic svg{ width:20px; height:20px; }
.info__row small{ display:block; font-size:var(--t-micro); letter-spacing:.04em; text-transform:uppercase; color:var(--t-3); }
.info__row b{ font-size:1.05rem; color:var(--ink); font-weight:500; }
.info__row a{ color:var(--brand); }
.info__row > div:nth-child(2){ min-width:0; }
.info__row b,.info__row a{ overflow-wrap:anywhere; }
/* copy-to-clipboard · micro-interacción con feedback "copiado" (tendencia 2026) */
.copybtn{ position:relative; flex:0 0 auto; align-self:center; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-md); background:#fff; color:var(--t-3); cursor:pointer;
  transition:transform var(--dur-1) var(--ease), color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.copybtn:hover{ color:var(--brand); border-color:var(--bright); background:var(--tint); }
.copybtn:active{ transform:scale(.93); }
.copybtn svg{ width:16px; height:16px; }
.copybtn .ic-check{ display:none; }
.copybtn.copied{ color:var(--accent-deep); border-color:var(--accent); background:rgba(244,165,92,.12); }
.copybtn.copied .ic-copy{ display:none; }
.copybtn.copied .ic-check{ display:block; }
.copybtn::after{ content:attr(data-copy-t); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(4px); background:var(--ink); color:#fff; font-size:var(--t-micro);
  font-weight:500; padding:.32em .6em; border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none;
  box-shadow:var(--sh-sm); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.copybtn:hover::after,.copybtn:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.copybtn.copied::after{ content:attr(data-copied-t); opacity:1; transform:translateX(-50%) translateY(0);
  background:var(--accent-deep); }

/* ── FOOTER · colofón de precisión sobre navy ────────────────────────────── */
.ft{ position:relative; background:var(--ink); color:var(--on-ink-soft); overflow:hidden; }
/* hairline superior recoloreada al sistema de 2 acentos (teal frío + pop coral) */
.ft::before{ content:""; position:absolute; z-index:2; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--teal) 0 14%, var(--accent) 14% calc(14% + 26px), rgba(255,255,255,.10) calc(14% + 26px) 100%); }
/* glow teal sutil: da color y profundidad al navy plano (dinámica sin movimiento) */
.ft::after{ content:""; position:absolute; z-index:0; right:-8%; top:-42%; width:56%; height:150%;
  background:radial-gradient(closest-side, rgba(63,179,163,.16), transparent 72%); pointer-events:none; }
.ft > .wrap{ position:relative; z-index:1; }
.ft__top{ display:grid; grid-template-columns:1.9fr 1fr 1fr; gap:clamp(1.1rem,2.6vw,2.2rem);
  padding-block:clamp(1.6rem,2.6vw,2.4rem) clamp(1rem,1.8vw,1.5rem); align-items:start; }
.ft__brand img{ height:26px; width:auto; margin-bottom:.6rem; }  /* width:auto evita la deformación (el height fijo + width del atributo estiraba) */
.ft__brand p{ font-size:var(--t-small); max-width:34ch; color:var(--on-ink-soft); line-height:1.55; }
/* CTA de cierre — pastilla ghost coral con ícono anidado (button-in-button); un pop cálido */
.ft__cta{ display:inline-flex; align-items:center; gap:.6em; margin-top:1rem;
  padding:.4em .45em .4em 1em; border:1px solid rgba(233,136,107,.45); border-radius:var(--r-pill);
  color:#fff; font-size:var(--t-small); font-weight:500;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.ft__cta .ic{ display:grid; place-items:center; width:27px; height:27px; border-radius:50%;
  background:var(--accent-deep); color:#fff;
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.ft__cta .ic svg{ width:14px; height:14px; }
.ft__cta:hover{ border-color:var(--accent); background:rgba(233,136,107,.08); }
.ft__cta:hover .ic{ background:var(--accent); transform:translateX(2px); }
.ft__mail{ display:block; width:max-content; max-width:100%; margin-top:.9rem; color:#fff; font-size:var(--t-small);
  border-bottom:1px solid rgba(255,255,255,.32); transition:border-color var(--dur-2) var(--ease); }
.ft__mail:hover{ border-bottom-color:var(--accent); }
.ft__col{ display:flex; flex-direction:column; align-items:flex-start; }
.ft__col .ft__h{ font-size:var(--t-micro); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:#fff; margin:0 0 .7rem; font-weight:500; }
.ft__col a{ position:relative; display:inline-flex; color:var(--on-ink-soft); font-size:var(--t-small);
  padding:.28em 0; transition:color var(--dur-2) var(--ease); }
/* underline-wipe coral en links (gesto de "barrido" coherente con el negocio de etiquetado) */
.ft__col a::after{ content:""; position:absolute; left:0; right:0; bottom:.16em; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease-expo); }
.ft__col a:hover{ color:#fff; }
.ft__col a:hover::after{ transform:scaleX(1); }
/* Colofón: wordmark de cierre + seal-line coral→teal que se DIBUJA (eco firma seal-morph) */
.ft__wm{ position:relative; margin-top:clamp(.8rem,2vw,1.8rem); }
.ft__wm-txt{ display:block; font-weight:600; font-size:clamp(3rem,14vw,9.5rem); line-height:.86;
  letter-spacing:-.04em; color:rgba(183,206,230,.10); white-space:nowrap; user-select:none; }
.ft__seal{ display:block; height:2px; margin-top:.12em; border-radius:2px; transform-origin:left; transform:scaleX(1);
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 24%, var(--teal) 100%); }
.rv-on .ft__wm .ft__seal{ transform:scaleX(0); transition:transform .95s var(--ease-expo) .12s; }
.rv-on .ft__wm.in .ft__seal{ transform:scaleX(1); }
.ft__bar{ position:relative; z-index:1; border-top:1px solid var(--line-navy); padding-block:1.05rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center; font-size:var(--t-micro); color:#7f9bbd; }
.ft__bar a{ color:#7f9bbd; } .ft__bar a:hover{ color:#fff; }
/* back-to-top pill (a #hd, sin JS): teal en hover + nudge del arrow */
.ft__uptop{ margin-left:auto; display:inline-flex; align-items:center; gap:.5em; padding:.45em .95em;
  border:1px solid var(--line-navy); border-radius:var(--r-pill); color:var(--on-ink-soft);
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.ft__uptop svg{ width:13px; height:13px; transition:transform var(--dur-2) var(--ease); }
.ft__uptop:hover{ color:#fff; border-color:var(--teal); background:rgba(63,179,163,.10); transform:translateY(-1px); }
.ft__uptop:hover svg{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  .rv-on .ft__wm .ft__seal{ transform:scaleX(1); transition:none; }
  .ft__cta:hover .ic,.ft__uptop:hover,.ft__uptop:hover svg{ transform:none; }
}

/* ── Reveal base (micro-motion; reduced-motion safe) ─────────────────────── */
/* LEY: el contenido se ve SIEMPRE por defecto. El pre-estado (opacity:0) se activa sólo cuando
   el JS confirma que va a poder revelarlo (html.rv-on). Antes `.js [data-rv]{opacity:0}` ataba la
   VISIBILIDAD al observer: si no disparaba (pestaña oculta, render headless, scroll saltado) la
   sección quedaba en blanco — pasó dos veces al capturar el sitio.
   Y el gesto ya no es uno solo para todo: cambia según QUÉ revela. */
.rv-on [data-rv]{ opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.rv-on [data-rv].in{ opacity:1; transform:none; }
.rv-on [data-rv="band"]{ transform:none; }                              /* bandas: sólo fade   */
.rv-on [data-rv="media"]{ transform:scale(1.03); }                      /* media: se asienta   */
.rv-on [data-rv="media"].in{ transform:none; }
.rv-on [data-rv="row"]{ transform:translateY(8px); transition-duration:var(--dur-2); }
.rv-on [data-rv][data-rv-d="1"]{ transition-delay:.06s; }
.rv-on [data-rv][data-rv-d="2"]{ transition-delay:.12s; }
.rv-on [data-rv][data-rv-d="3"]{ transition-delay:.18s; }
@media (prefers-reduced-motion:reduce){ .rv-on [data-rv]{ opacity:1; transform:none; transition:none; } }

/* ── Cookie / misc ───────────────────────────────────────────────────────── */
.cookie{ position:fixed; right:1rem; bottom:1rem; left:auto; z-index:150; max-width:340px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-lg);
  padding:1rem 1.1rem; display:flex; gap:.9rem; align-items:center; font-size:var(--t-small); color:var(--t-2); }
.cookie.hide{ display:none; }
.cookie .btn{ padding:.5em 1em; font-size:.85rem; flex:0 0 auto; }
@media (max-width:520px){ .cookie{ left:1rem; right:1rem; max-width:none; } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .hd__nav{ display:none; }
  .hd__end .btn--primary{ display:none; }  /* el CTA "Request specs" se mueve al menú móvil */
  .hd__burger{ display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid var(--line-2);
    background:#fff; border-radius:var(--r-md); cursor:pointer; }
  .hd__burger span,.hd__burger span::before,.hd__burger span::after{ content:""; display:block; width:18px;
    height:2px; background:var(--ink); border-radius:2px; transition:transform var(--dur-2) var(--ease); }
  .hd__burger span::before{ transform:translateY(-6px); } .hd__burger span::after{ transform:translateY(4px); }
  .hd__nav.open{ display:flex; position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column;
    background:#fff; padding:1.4rem var(--gut); gap:.4rem; box-shadow:var(--sh-lg); align-items:flex-start; }
  .hd__nav.open a{ font-size:1rem; padding:.6em 0; }
  .hd__nav.open .hd__nav-cta{ display:block; margin-top:.6rem; padding:.7em 1.2em; background:var(--ink);
    color:#fff; border-radius:var(--r-md); align-self:stretch; text-align:center; }
  .hd__nav.open .hd__nav-cta::after{ display:none; }
  /* Solutions: en móvil se aplana (label no-clickeable + 5 links con sangría). */
  .hd__sol{ flex-direction:column; align-items:stretch; width:100%; }
  .hd__sol-trig{ pointer-events:none; padding:.6em 0; font-size:.72rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--t-3); }
  .hd__sol-chev{ display:none; }
  .hd__sol-menu{ position:static; display:block; min-width:0; padding:0; border:0; box-shadow:none; background:none; }
  .hd__sol-menu a{ padding:.5em 0 .5em .9rem; font-size:1rem; min-height:0; }
  /* Hero: en tablet/móvil el contenido se ancla ARRIBA (texto alto en el fold, CTAs
     lejos del banner de cookies del fondo). */
  .hero{ min-height:82svh; align-content:start; }
  .hero__c{ padding-block:calc(var(--header-h) + 2.4rem) 2rem; }
  .doors{ grid-template-columns:1fr; } .door:first-child{ grid-row:auto; }
  .split,.split--rev .split__media,.fam-band,.ctaband .wrap,.contact-split{
    grid-template-columns:1fr; order:0; }
  .split__media,.fam-band__media{ order:-1; }
  /* Fila de producto: thumb 96px arriba-izq, identidad a la derecha, specs 2×2 a ancho completo. */
  .prow{ grid-template-columns:96px minmax(0,1fr); gap:.5rem .9rem; padding:1rem 0; }
  .prow__id{ grid-column:2; }
  .prow__specs{ grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* sin riel en móvil: el dt vuelve como rótulo de cada spec */
  .fam-cols{ display:none; }
  .prows:has(.fam-cols) .prow > .prow__specs dt{ position:static; width:auto; height:auto;
    clip:auto; white-space:normal; }
  .prow__more{ grid-column:1 / -1; }
  .fam-band__media{ max-width:360px; }
  .tgrid{ grid-template-columns:1fr; }
  .tcard{ grid-template-columns:1fr; gap:1rem; }
  .tcard__media{ aspect-ratio:16/9; max-height:220px; }
  .flow{ grid-template-columns:1fr 1fr; } .flow::before,.flow::after{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .hero__rail .wrap{ grid-template-columns:1fr 1fr; }
  .ft__top{ grid-template-columns:1fr 1fr; padding-block:1.1rem; gap:.9rem 1rem; }
  .ft__brand{ grid-column:1 / -1; }
  .ft__brand p{ max-width:40ch; }
  .ft__col a{ padding:.18em 0; }
  .ft__bar{ padding-block:.8rem; }
  .trust{ grid-template-columns:1fr 1fr; }
  .vgrid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .trust{ grid-template-columns:1fr; }
  .vgrid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .split__specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.3rem; }  /* activa el grid: antes inerte por display:flex (Codex) */
  .form .row{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .hero__rail .wrap{ grid-template-columns:1fr; }
  .hrail__i{ padding:1rem var(--gut); border-top:1px solid var(--line-navy); }
}
/* mosaico industrias — colapso responsive (misma especificidad que las nth-child de arriba) */
@media (max-width:820px){
  .ind{ grid-template-columns:1fr 1fr; }
  .ind .icard:nth-child(1),.ind .icard:nth-child(2){ grid-column:1 / -1; aspect-ratio:16/9; }
  .ind .icard:nth-child(3),.ind .icard:nth-child(4){ grid-column:span 1; aspect-ratio:3/4; }
  .ind .icard:nth-child(5){ grid-column:1 / -1; aspect-ratio:16/9; }
}
@media (max-width:560px){
  .ind{ grid-template-columns:1fr; }
  .ind .icard:nth-child(1),.ind .icard:nth-child(2),.ind .icard:nth-child(3),.ind .icard:nth-child(4),.ind .icard:nth-child(5){ grid-column:1 / -1; aspect-ratio:16/10; min-height:170px; }
}

/* ═══ CATÁLOGO v2 — 325 máquinas, marca y código propios ══════════════════════ */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:var(--t-micro);
  color:var(--t-3); margin-bottom:1.6rem; }
.crumbs a{ color:var(--t-2); text-decoration:none; }
.crumbs a:hover{ color:var(--teal-ink); text-decoration:underline; }
.crumbs i{ font-style:normal; color:var(--line-2); }

/* hub de familias */
.famgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem; }
.famcard{ display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 2px 6px rgba(10,46,82,.08), 0 16px 34px -14px rgba(10,46,82,.22);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.famcard:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(10,46,82,.10), 0 22px 44px -16px rgba(10,46,82,.28); }
.famcard__m{ aspect-ratio:4/3; background:var(--bg-alt); overflow:hidden; }
.famcard__m img{ width:100%; height:100%; object-fit:contain; padding:8%; display:block; }
.famcard__c{ padding:1.1rem 1.2rem 1.3rem; }
.famcard__code{ display:inline-block; font-size:var(--t-micro); font-weight:600; letter-spacing:.08em;
  color:var(--accent-deep); background:var(--accent-soft,rgba(232,110,74,.10)); padding:.2rem .5rem;
  border-radius:4px; margin-bottom:.5rem; }
.famcard__c h2{ font-size:1.12rem; margin:0 0 .3rem; color:var(--ink); }
.famcard__n{ font-size:var(--t-small); color:var(--teal-ink); font-weight:600; margin:0 0 .35rem; }
.famcard__s{ font-size:var(--t-micro); color:var(--t-3); margin:0; line-height:1.5; }

/* grilla de productos */
.subhead{ font-size:1.05rem; margin:2.4rem 0 1rem; color:var(--ink);
  display:flex; align-items:center; gap:.6rem; }
.subhead span{ font-size:var(--t-micro); font-weight:600; color:var(--t-3);
  background:var(--bg-alt); border:1px solid var(--line); padding:.1rem .45rem; border-radius:999px; }
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.1rem; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 1px 4px rgba(10,46,82,.06), 0 12px 26px -14px rgba(10,46,82,.18);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.pcard:hover{ transform:translateY(-2px); box-shadow:0 3px 8px rgba(10,46,82,.09), 0 18px 36px -16px rgba(10,46,82,.26); }
.pcard a{ text-decoration:none; display:block; color:inherit; }
.pcard__m{ aspect-ratio:1/1; background:var(--bg-alt); }
.pcard__m img{ width:100%; height:100%; object-fit:contain; padding:7%; display:block; }
.pcard__noimg{ width:100%; height:100%; background:var(--bg-alt); }
.pcard__c{ padding:.85rem .95rem 1rem; }
.pcard__sku{ font-size:var(--t-micro); font-weight:600; color:var(--accent-deep);
  letter-spacing:.05em; font-variant-numeric:tabular-nums; }
.pcard__c h3{ font-size:.98rem; margin:.2rem 0 .55rem; color:var(--ink); line-height:1.35; }
.pcard__specs{ display:grid; gap:.3rem; margin:0; }
.pcard__specs > div{ display:flex; flex-direction:column-reverse; }
.pcard__specs dt{ font-size:var(--t-micro); color:var(--t-3); font-weight:500; margin:0; }
.pcard__specs dd{ font-size:.9rem; font-weight:600; color:var(--ink); margin:0;
  font-variant-numeric:tabular-nums; }

/* ficha de producto */
.pdetail{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2.6rem;
  align-items:start; }
.gal__m{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-lg);
  aspect-ratio:1/1; overflow:hidden; }
.gal__m img{ width:100%; height:100%; object-fit:contain; padding:5%; display:block; }
.gal__t{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.6rem; margin-top:.7rem; }
.gal__t img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:6%; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--r-sm,8px); display:block; }
.pdetail__c h1{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin:.4rem 0 .5rem; }
.pdetail__sku{ font-size:var(--t-small); color:var(--t-2); margin:0 0 1.4rem; }
.pdetail__sku strong{ color:var(--accent-deep); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.pdesc{ margin:2.8rem 0 0; max-width:70ch; }
.pdesc h2{ font-size:1.15rem; margin:0 0 .6rem; }
.pdesc p{ color:var(--t-1); line-height:1.7; }
.ptable{ margin:2.8rem 0 0; }
.ptable h2{ font-size:1.15rem; margin:0 0 .9rem; }
.ptable table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-small);
  border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; }
.ptable th,.ptable td{ text-align:left; padding:.7rem .9rem; border-top:1px solid var(--line);
  vertical-align:top; }
.ptable tr:first-child th,.ptable tr:first-child td{ border-top:0; }
.ptable th{ background:var(--bg-alt); font-weight:600; color:var(--t-2); width:42%; }
.ptable td{ color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:860px){
  .pdetail{ grid-template-columns:1fr; gap:1.6rem; }
  .ptable th{ width:52%; }
}

/* ── barra de filtros del catálogo ─────────────────────────────────────────── */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fbar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.9rem 1.1rem; margin:0 0 1.8rem;
  padding:1.05rem 1.15rem; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--r-md); }
.fbar__q{ flex:1 1 260px; display:flex; }
.fbar__q input{ width:100%; padding:.62rem .85rem; font:inherit; font-size:var(--t-small);
  color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm,8px); }
.fbar__q input:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:1px; }
.fbar__f{ display:flex; flex-direction:column; gap:.28rem; }
.fbar__f > span{ font-size:var(--t-micro); font-weight:600; color:var(--t-3); letter-spacing:.03em; }
.fbar__f select{ padding:.55rem .7rem; font:inherit; font-size:var(--t-small); color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm,8px); min-width:112px; }
.fbar__f select:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:1px; }
.fbar__n{ margin:0 0 .1rem auto; font-size:var(--t-small); color:var(--t-2); display:flex;
  align-items:center; gap:.7rem; }
.fbar__n strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
.fbar__reset{ font:inherit; font-size:var(--t-micro); color:var(--teal-ink); background:none;
  border:0; border-bottom:1px solid currentColor; padding:0; cursor:pointer; }
.cat-empty{ padding:2.4rem 0; text-align:center; color:var(--t-2); }

/* checkbox de comparar en la tarjeta */
.pcard{ position:relative; }
.pcard__cmpw{ position:absolute; z-index:2; top:.55rem; right:.55rem; display:inline-flex;
  align-items:center; gap:.32rem; padding:.24rem .5rem; background:rgba(255,255,255,.94);
  border:1px solid var(--line-2); border-radius:999px; font-size:10px; font-weight:600;
  color:var(--t-2); cursor:pointer; opacity:0; transition:opacity .15s var(--ease); }
.pcard:hover .pcard__cmpw,.pcard:focus-within .pcard__cmpw,
.pcard__cmp:checked ~ span{ opacity:1; }
.pcard:has(.pcard__cmp:checked) .pcard__cmpw{ opacity:1; border-color:var(--accent-deep);
  color:var(--accent-deep); }
.pcard:has(.pcard__cmp:checked){ outline:2px solid var(--accent-deep); outline-offset:-1px; }
.pcard__cmp{ width:13px; height:13px; accent-color:var(--accent-deep); margin:0; }
@media (hover:none){ .pcard__cmpw{ opacity:1; } }

/* barra flotante del comparador */
.cmpbar{ position:sticky; bottom:1rem; z-index:20; display:flex; flex-wrap:wrap; align-items:center;
  gap:.8rem; margin:1.6rem 0 0; padding:.7rem .95rem; background:var(--navy-900,#0A2E52);
  color:#fff; border-radius:999px; box-shadow:0 12px 30px -10px rgba(10,46,82,.5); }
.cmpbar__l{ font-size:var(--t-micro); font-weight:600; letter-spacing:.05em; opacity:.75; }
#cmp-list{ font-size:var(--t-small); font-weight:600; font-variant-numeric:tabular-nums;
  flex:1 1 auto; min-width:0; }
.btn--sm{ padding:.45rem .95rem; font-size:var(--t-micro); }
.cmpbar__x{ font:inherit; font-size:var(--t-micro); color:#fff; opacity:.8; background:none;
  border:0; cursor:pointer; text-decoration:underline; }

/* modal de comparación */
.cmp__d{ width:min(1100px,94vw); max-height:88vh; padding:0; border:0; border-radius:var(--r-lg);
  box-shadow:0 30px 80px -20px rgba(10,46,82,.55); }
.cmp__d::backdrop{ background:rgba(7,31,58,.55); }
.cmp__h{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.cmp__h h2{ font-size:1.1rem; margin:0; }
.cmp__x{ font-size:1.6rem; line-height:1; color:var(--t-2); background:none; border:0; cursor:pointer; }
.cmp__body{ padding:0 1.4rem 1.4rem; overflow:auto; }
table.cmp{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-small); }
table.cmp th,table.cmp td{ text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--line);
  vertical-align:top; }
table.cmp thead th{ position:sticky; top:0; background:var(--bg-alt); font-weight:600;
  color:var(--ink); border-bottom:2px solid var(--line-2); }
table.cmp thead th span{ display:block; font-size:var(--t-micro); font-weight:400; color:var(--t-3); }
table.cmp tbody th{ color:var(--t-2); font-weight:500; width:26%; }
table.cmp td{ color:var(--ink); font-variant-numeric:tabular-nums; }
table.cmp .cmp--same td,table.cmp .cmp--same th{ color:var(--t-3); }
@media (max-width:760px){
  .fbar{ gap:.7rem .8rem; }
  .fbar__n{ margin-left:0; width:100%; }
  .cmpbar{ border-radius:var(--r-md); }
}

/* fix: los selects de la barra de filtros desbordaban a 360px (min-width + flex sin shrink) */
.fbar__f{ min-width:0; flex:1 1 132px; max-width:100%; }
.fbar__f select{ width:100%; max-width:100%; min-width:0; }
.fbar__q input{ min-width:0; }
@media (max-width:520px){
  .fbar{ padding:.9rem; }
  .fbar__q{ flex:1 1 100%; }
  .fbar__f{ flex:1 1 calc(50% - .55rem); }
  .fbar__n{ justify-content:space-between; }
  .pgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
  .famgrid{ grid-template-columns:1fr; }
  .cmpbar{ position:fixed; left:.7rem; right:.7rem; bottom:.7rem; margin:0; }
  .cmp__d{ width:100vw; max-width:100vw; max-height:92vh; border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .cmp__body{ padding:0 .8rem 1rem; }
  table.cmp th,table.cmp td{ padding:.5rem .45rem; font-size:.82rem; }
}

/* fix: `display:flex/grid` gana al atributo [hidden] (que sólo aplica display:none de UA).
   Sin esto la barra del comparador se muestra vacía al cargar y los grupos filtrados no ocultan. */
.cmpbar[hidden],.pcard[hidden],.pgrid[hidden],.subhead[hidden],.cat-empty[hidden]{ display:none !important; }

/* fix: en un grid, `align-items:stretch` (default) estira la <img> e ignora su aspect-ratio
   -> las miniaturas salían de 90x600. align-items:start deja mandar al aspect-ratio. */
.gal__t{ align-items:start; }
.gal__t img{ height:auto; }
.pfeat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.45rem 1.6rem;
  margin:1rem 0 0; padding:0; list-style:none; max-width:none; }
.pfeat li{ position:relative; padding-left:1.3rem; font-size:var(--t-small); color:var(--t-1);
  line-height:1.55; }
.pfeat li::before{ content:""; position:absolute; left:0; top:.52em; width:7px; height:7px;
  border-radius:2px; background:var(--accent); }
.psumm{ font-size:1.02rem; line-height:1.65; color:var(--t-1); margin:0 0 1.5rem; max-width:56ch; }
.fbar__f[for]{ display:flex; flex-direction:column; gap:.28rem; }
/* el input de búsqueda ya no está envuelto por su label (a11y: label for=) */
.fbar__q{ flex:0 0 auto; }
.fbar__qi{ flex:1 1 260px; min-width:0; padding:.62rem .85rem; font:inherit; font-size:var(--t-small);
  color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm,8px); }
.fbar__qi:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:1px; }

/* prosa del TIPO (vive en la subfamilia, no repetida en cada ficha) */
.subintro{ max-width:72ch; margin:0 0 1.3rem; }
.subintro p{ font-size:var(--t-small); line-height:1.7; color:var(--t-2); margin:0 0 .5rem; }
/* tabla de variantes de una serie */
.pvar{ margin:2.8rem 0 0; }
.pvar h2{ font-size:1.15rem; margin:0 0 .35rem; }
.pvar__n{ font-size:var(--t-small); color:var(--t-2); margin:0 0 .9rem; max-width:62ch; }
.pvar__s{ overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r-md); }
.pvar table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-small);
  min-width:520px; }
.pvar th,.pvar td{ text-align:left; padding:.65rem .85rem; border-top:1px solid var(--line);
  white-space:nowrap; }
.pvar thead th{ border-top:0; background:var(--bg-alt); font-weight:600; color:var(--t-2);
  font-size:var(--t-micro); letter-spacing:.03em; }
.pvar tbody th{ color:var(--accent-deep); font-weight:600; font-variant-numeric:tabular-nums; }
.pvar tbody td{ color:var(--ink); font-variant-numeric:tabular-nums; }
.hubshop{ margin:2rem 0 0; text-align:center; }
/* la barra de filtros usa cajas label+select (el for= las había dejado sueltas y se desarmaba) */
.fbar__f > label{ font-size:var(--t-micro); font-weight:600; color:var(--t-3); letter-spacing:.03em; }

/* ── paginación ───────────────────────────────────────────────────────────────
   129 modelos en una tirada daban 24 pantallas de scroll. Ahora se pagina el conjunto
   filtrado; sin JS el paginador queda oculto y se ve todo (degradación sin pérdida). */
.pg{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem;
  margin:2.4rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line); }
.pg[hidden]{ display:none !important; }
.pg__b{ min-width:40px; min-height:40px; padding:.45rem .7rem; font:inherit; font-size:var(--t-small);
  font-weight:600; font-variant-numeric:tabular-nums; color:var(--t-1); background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-sm,8px); cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease); }
.pg__b:hover:not(:disabled){ background:var(--bg-alt); border-color:var(--teal-ink); }
.pg__b:disabled{ opacity:.4; cursor:default; }
.pg__b.is-on{ background:var(--navy-900,#0A2E52); border-color:var(--navy-900,#0A2E52); color:#fff; }
.pg__b:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:2px; }
.pg__e{ padding:0 .2rem; color:var(--t-3); }
.pg__n{ margin-left:.7rem; font-size:var(--t-micro); color:var(--t-3);
  font-variant-numeric:tabular-nums; }
@media (max-width:520px){
  .pg{ gap:.3rem; }
  .pg__n{ width:100%; text-align:center; margin:.5rem 0 0; }
}
/* altura uniforme de tarjeta: el contenido variable rompía el ritmo de la grilla */
.pcard{ display:flex; flex-direction:column; }
.pcard > a{ display:flex; flex-direction:column; height:100%; }
.pcard__c{ display:flex; flex-direction:column; flex:1 1 auto; }
.pcard__c h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em; }
.pcard__specs{ margin-top:auto; }
.pcard__specs dd{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══ LISTADO v2: sidebar de facetas + grilla 4×3 ════════════════════════════
   Rehecho según la investigación de listados: sidebar persistente en desktop,
   checkboxes multi-selección con recuento por opción, chips de lo aplicado,
   y máximo 3 filas por página (12 modelos) para que la vista se abarque de un golpe. */
.shopx{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:2.2rem; align-items:start; }
.shopx__main{ min-width:0; }

/* sidebar */
.fside{ position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px);
  overflow-y:auto; padding:1.1rem 1.15rem 1.3rem; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--r-md); }
.fside__h{ display:flex; align-items:center; justify-content:space-between; margin:0 0 .9rem; }
.fside__h h2{ font-size:.95rem; margin:0; color:var(--ink); }
.fside__x{ display:none; font-size:1.6rem; line-height:1; background:none; border:0;
  color:var(--t-2); cursor:pointer; }
.fgrp{ border-top:1px solid var(--line); padding:.75rem 0 .2rem; }
.fgrp:first-of-type{ border-top:0; padding-top:0; }
.fgrp > summary{ list-style:none; cursor:pointer; font-size:var(--t-small); font-weight:600;
  color:var(--ink); padding:.2rem 0; display:flex; align-items:center; justify-content:space-between; }
.fgrp > summary::-webkit-details-marker{ display:none; }
.fgrp > summary::after{ content:"+"; color:var(--t-3); font-weight:400; font-size:1.05rem; }
.fgrp[open] > summary::after{ content:"–"; }
.fgrp ul{ list-style:none; margin:.5rem 0 .3rem; padding:0; display:grid; gap:.1rem; }
.fgrp label{ display:flex; align-items:center; gap:.5rem; padding:.34rem .3rem; border-radius:6px;
  font-size:var(--t-micro); color:var(--t-1); cursor:pointer; min-height:32px; }
.fgrp label:hover{ background:#fff; }
.fgrp input{ width:15px; height:15px; margin:0; accent-color:var(--accent-deep); flex:0 0 auto; }
.fgrp label > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.fgrp label > b{ font-weight:600; color:var(--t-3); font-variant-numeric:tabular-nums;
  font-size:10px; }
.fside__clear{ width:100%; margin-top:1rem; padding:.5rem; font:inherit; font-size:var(--t-micro);
  font-weight:600; color:var(--teal-ink); background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm,8px); cursor:pointer; }
.fside__clear:hover{ border-color:var(--teal-ink); }
.fside__apply{ display:none; }

/* barra superior del listado */
.ftop{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:0 0 1.4rem; }
.ftop__open{ display:none; align-items:center; gap:.45rem; padding:.6rem .9rem; font:inherit;
  font-size:var(--t-small); font-weight:600; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-sm,8px); cursor:pointer; }
.ftop__badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px;
  height:18px; padding:0 5px; background:var(--accent-deep); color:#fff; border-radius:999px;
  font-size:10px; font-weight:700; }
.ftop__q{ flex:1 1 240px; min-width:0; padding:.62rem .85rem; font:inherit; font-size:var(--t-small);
  color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm,8px); }
.ftop__q:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:1px; }
.ftop__r{ display:flex; align-items:center; gap:.8rem; margin-left:auto; }
.ftop__n{ font-size:var(--t-small); color:var(--t-2); white-space:nowrap; }
.ftop__n strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
.ftop__sort{ padding:.55rem .7rem; font:inherit; font-size:var(--t-small); color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm,8px); }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; width:100%; }
.chips[hidden]{ display:none !important; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; font:inherit;
  font-size:var(--t-micro); font-weight:600; color:var(--navy-900,#0A2E52); background:#fff;
  border:1px solid var(--line-2); border-radius:999px; cursor:pointer; }
.chip:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }
.chip span[aria-hidden]{ font-size:1rem; line-height:1; color:var(--t-3); }

/* grilla: 4 columnas fijas en desktop -> 3 filas = 12 por página */
.shopx .pgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grp[hidden]{ display:none !important; }

@media (max-width:1080px){ .shopx .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){
  .shopx{ grid-template-columns:1fr; gap:0; }
  .ftop__open{ display:inline-flex; }
  .fside{ position:fixed; z-index:60; inset:0 auto 0 0; width:min(320px,88vw); max-height:none;
    border-radius:0; border:0; border-right:1px solid var(--line); overflow-y:auto;
    transform:translateX(-101%); transition:transform .22s var(--ease); }
  body.f-open .fside{ transform:none; }
  .fside__x{ display:block; }
  .fside__apply{ display:block; position:sticky; bottom:0; margin:1rem -1.15rem -1.3rem;
    padding:.9rem 1.15rem; background:var(--bg-alt); border-top:1px solid var(--line); }
  .fside__apply .btn{ width:100%; justify-content:center; }
  .fside__bg{ position:fixed; inset:0; z-index:55; background:rgba(7,31,58,.45); }
  .fside__bg[hidden]{ display:none !important; }
  .shopx .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .ftop__r{ margin-left:0; width:100%; justify-content:space-between; }
  .shopx .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
}

/* ═══ MEGA-MENÚ del catálogo ═════════════════════════════════════════════════
   Con 12 familias un link plano escondía el catálogo entero. La práctica para catálogos
   de 10+ categorías es exponer la estructura completa de un vistazo (≤2 clics a cualquier
   máquina). Abre por hover Y por foco de teclado; en móvil se apila dentro del burger. */
.mega{ position:static; display:inline-flex; }
.mega__p{ position:absolute; left:50%; transform:translateX(-50%) translateY(6px);
  top:calc(100% + 10px); width:min(940px,94vw); padding:1.15rem 1.25rem 1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 24px 60px -18px rgba(10,46,82,.34); opacity:0; visibility:hidden;
  pointer-events:none; z-index:70;
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
.mega:hover .mega__p,.mega:focus-within .mega__p{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.2rem .6rem; }
.mega__i{ display:grid; grid-template-columns:auto 1fr auto; gap:.1rem .55rem; align-items:baseline;
  padding:.5rem .6rem; border-radius:var(--r-sm,8px); text-decoration:none;
  transition:background .14s var(--ease); }
.mega__i:hover{ background:var(--bg-alt); }
.mega__c{ grid-row:1; font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--accent-deep); }
.mega__n{ grid-row:1; font-size:.9rem; font-weight:600; color:var(--ink); }
.mega__k{ grid-row:1; font-size:10px; font-weight:600; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
.mega__s{ grid-column:2/4; grid-row:2; font-size:10px; color:var(--t-3); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mega__f{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:.9rem; padding-top:.85rem;
  border-top:1px solid var(--line); }
.mega__f a{ font-size:var(--t-micro); font-weight:600; color:var(--teal-ink);
  text-decoration:none; }
.mega__f a:hover{ text-decoration:underline; }
@media (max-width:900px){
  /* en móvil el panel se apila dentro del menú hamburguesa (no hay hover) */
  .mega{ display:block; width:100%; }
  .mega__p{ position:static; transform:none; width:auto; opacity:1; visibility:visible;
    pointer-events:auto; box-shadow:none; border:0; border-top:1px solid var(--line);
    border-radius:0; padding:.5rem 0 .2rem; margin-top:.4rem; }
  .mega__grid{ grid-template-columns:1fr; }
  .mega__s{ display:none; }
}

/* ── correcciones de la auditoría visual ─────────────────────────────────── */
/* el sidebar tenía scroll interno propio: cortaba las facetas y se veía un scrollbar feo.
   Sticky sin altura máxima: acompaña el scroll de la página, que es lo esperable. */
.fside{ max-height:none; overflow:visible; }
@media (min-height:760px){ .fside{ max-height:calc(100vh - 130px); overflow-y:auto; } }
/* etiquetas largas de faceta: dos líneas legibles en vez de cortar a mitad de palabra */
.fgrp label > span{ white-space:normal; line-height:1.3; }
.fgrp label{ align-items:flex-start; }
.fgrp input{ margin-top:.15rem; }
.fgrp__more{ margin:.15rem 0 .4rem .3rem; padding:0; font:inherit; font-size:10px; font-weight:600;
  color:var(--teal-ink); background:none; border:0; border-bottom:1px solid currentColor;
  cursor:pointer; }
.fgrp li[hidden]{ display:none !important; }
/* La referencia es la identidad del producto (y lo que el cliente debe memorizar): va de título.
   Antes 12 tarjetas seguidas decían "Band Sealer" y no se distinguían entre sí. */
.pcard__c h3.pcard__sku{ font-size:1rem; font-weight:700; color:var(--ink); margin:0 0 .12rem;
  letter-spacing:.02em; font-variant-numeric:tabular-nums; min-height:0; display:block; }
.pcard__t{ font-size:var(--t-micro); color:var(--t-2); margin:0 0 .6rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.4em; }

/* ── árbol de categorías del sidebar (familia → tipo) ────────────────────────
   Con 129 modelos, una lista plana de checkboxes no organiza: el tipo tiene que colgar de
   su familia. Familia = desplegable con su propio checkbox; tipos anidados dentro. */
.ftree{ margin:0 0 .3rem; }
.ftree__f{ border-top:1px solid var(--line); }
.ftree__f:first-child{ border-top:0; }
.ftree__f > summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:.4rem; padding:.5rem .3rem; font-size:var(--t-small); }
.ftree__f > summary::-webkit-details-marker{ display:none; }
.ftree__f > summary::before{ content:""; flex:0 0 auto; width:0; height:0; margin-right:.1rem;
  border-left:5px solid var(--t-3); border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .15s var(--ease); }
.ftree__f[open] > summary::before{ transform:rotate(90deg); }
.ftree__fl{ display:flex; align-items:center; gap:.45rem; flex:1 1 auto; min-width:0;
  font-weight:600; color:var(--ink); cursor:pointer; }
.ftree__fl span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ftree__f > summary > b{ font-size:10px; font-weight:600; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
.ftree__f ul{ list-style:none; margin:0 0 .45rem; padding:0 0 0 1.05rem; display:grid; gap:.05rem;
  border-left:1px solid var(--line); margin-left:.55rem; }
.ftree__f ul label{ display:flex; align-items:flex-start; gap:.45rem; padding:.3rem .25rem;
  border-radius:6px; font-size:10.5px; color:var(--t-1); cursor:pointer; min-height:28px; }
.ftree__f ul label:hover{ background:#fff; }
.ftree__f ul input{ width:14px; height:14px; margin:.1rem 0 0; accent-color:var(--accent-deep);
  flex:0 0 auto; }
.ftree__f ul label > span{ flex:1 1 auto; min-width:0; line-height:1.3; }
.ftree__f ul label > b{ font-size:9.5px; font-weight:600; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
/* el sidebar NO debe tener scroll propio (un scroll dentro de otro es desorientador):
   fluye con la página y queda pegado arriba mientras haya recorrido. */
.fside{ max-height:none !important; overflow:visible !important; }
/* nombres de familia completos en dos líneas, no cortados con puntos suspensivos */
.ftree__fl span{ white-space:normal; overflow:visible; line-height:1.25; }
.ftree__f > summary{ align-items:flex-start; }
.ftree__f > summary::before{ margin-top:.42em; }
.ftree__fl{ align-items:flex-start; }
.ftree__fl input{ margin-top:.15rem; flex:0 0 auto; }
.ftree__f > summary > b{ margin-top:.15rem; }

/* ── menú de catálogo: 3 organizaciones paralelas, abre por CLIC ────────────── */
.mega__t{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  margin-left:.1rem; padding:0; color:var(--t-2); background:none; border:0; cursor:pointer;
  border-radius:4px; }
.mega__t:hover{ color:var(--accent-deep); }
.mega__t[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mega__t svg{ transition:transform .16s var(--ease); }
.mega__t:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:2px; }
/* el panel ya NO abre por hover: sólo por el botón (hidden lo controla el JS) */
.mega:hover .mega__p,.mega:focus-within .mega__p{ opacity:1; visibility:visible;
  pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega__p[hidden]{ display:none !important; }
.mega__p{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%);
  width:min(1080px,96vw); }
.mega__cols{ display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:0 1.6rem; }
.mega__col + .mega__col{ border-left:1px solid var(--line); padding-left:1.6rem; }
.mega__col h3{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-3); margin:0 0 .5rem; }
.mega__2{ display:grid; grid-template-columns:1fr 1fr; gap:0 .5rem; }
.mega__i{ display:flex; align-items:baseline; gap:.5rem; padding:.4rem .5rem; border-radius:6px;
  text-decoration:none; transition:background .14s var(--ease); }
.mega__i:hover{ background:var(--bg-alt); }
.mega__i .mega__n{ flex:1 1 auto; font-size:.86rem; font-weight:600; color:var(--ink);
  line-height:1.3; }
.mega__i .mega__k{ font-size:10px; font-weight:600; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
.mega__i .mega__c{ font-size:9.5px; font-weight:700; letter-spacing:.05em; color:var(--accent-deep); }
@media (max-width:900px){
  .mega__p{ position:static; transform:none; width:auto; box-shadow:none; border:0;
    border-top:1px solid var(--line); border-radius:0; padding:.5rem 0 .2rem; }
  .mega__cols{ grid-template-columns:1fr; gap:.6rem; }
  .mega__col + .mega__col{ border-left:0; padding-left:0; border-top:1px solid var(--line);
    padding-top:.6rem; }
  .mega__2{ grid-template-columns:1fr; }
}

/* ═══ BARRA PRINCIPAL REHECHA (auditoría de IA) ══════════════════════════════
   4 items + buscador global + CTA. Antes eran 7 items con dos familias del catálogo
   (Coding, Materials) puestas como hermanas de Machinery, y sin buscador en el header. */
.hd__search{ display:flex; align-items:center; gap:.45rem; flex:0 1 260px; min-width:0;
  margin-left:auto; padding:.42rem .7rem; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:999px; transition:border-color .15s var(--ease), background .15s var(--ease); }
.hd__search:focus-within{ border-color:var(--teal-ink); background:#fff; }
.hd__search svg{ width:15px; height:15px; flex:0 0 auto; color:var(--t-3); }
.hd__search input{ flex:1 1 auto; min-width:0; border:0; background:none; font:inherit;
  font-size:var(--t-micro); color:var(--ink); }
.hd__search input:focus{ outline:none; }
.hd__search input::placeholder{ color:var(--t-3); }
.mega--sol .mega__p{ width:min(760px,94vw); }
.mega__cols--prod{ grid-template-columns:2fr 1fr; }
.mega__col--wide .mega__2{ grid-template-columns:1fr 1fr; }
.mega__hint{ font-size:10px; color:var(--t-3); line-height:1.5; margin:.6rem 0 0; }
@media (max-width:1180px){ .hd__search{ flex-basis:190px; } }
@media (max-width:900px){
  .hd__search{ order:5; flex:1 1 100%; margin:.6rem 0 0; }
  .mega__cols--prod{ grid-template-columns:1fr; }
  .mega--sol .mega__p{ width:auto; }
}
/* "72 models · 28 series": el recuento de series necesita separarse del de modelos */
.famcard__ser{ position:relative; margin-left:.55rem; padding-left:.6rem; color:var(--t-3);
  font-weight:500; }
.famcard__ser::before{ content:"·"; position:absolute; left:0; color:var(--line-2); }
/* TIPOS de la familia como acceso navegable (no sólo checkbox de filtro) */
.subnav{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0 0 1.8rem; }
.subnav__l{ font-size:var(--t-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t-3); margin-right:.35rem; }
.subchip{ display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; font-size:var(--t-small);
  font-weight:600; color:var(--navy-900,#0A2E52); background:#fff; border:1px solid var(--line-2);
  border-radius:999px; text-decoration:none; transition:border-color .15s var(--ease), color .15s var(--ease); }
.subchip:hover,.subchip:focus-visible{ border-color:var(--accent-deep); color:var(--accent-deep); }
.subchip b{ font-size:var(--t-micro); font-weight:700; color:var(--t-3); }
.subchip:hover b{ color:var(--accent-deep); }
.grp{ scroll-margin-top:96px; }
.ptype{ font-size:var(--t-small); line-height:1.65; color:var(--t-2); margin:0 0 1.4rem; max-width:56ch; }

/* ═══ LAS TRES SOLUCIONES (primer nivel del negocio) ═════════════════════════ */
.solgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.6rem; }
.solcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 2px 6px rgba(10,46,82,.08), 0 18px 40px -16px rgba(10,46,82,.22); }
.solcard__m{ display:block; aspect-ratio:16/10; background:var(--bg-alt); }
.solcard__m img{ width:100%; height:100%; object-fit:contain; padding:7%; display:block; }
.solcard__c{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1 1 auto; }
.solcard__c h2{ font-size:1.24rem; margin:0 0 .2rem; }
.solcard__c h2 a{ color:var(--ink); text-decoration:none; }
.solcard__c h2 a:hover{ color:var(--teal-ink); }
.solcard__n{ font-size:var(--t-small); font-weight:600; color:var(--teal-ink); margin:0 0 .6rem;
  font-variant-numeric:tabular-nums; }
.solcard__b{ font-size:var(--t-small); line-height:1.65; color:var(--t-2); margin:0 0 1rem; }
.solcard__l{ list-style:none; margin:auto 0 0; padding:.9rem 0 0; display:grid; gap:.12rem;
  border-top:1px solid var(--line); }
.solcard__l a{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.4rem .1rem; font-size:var(--t-small); color:var(--t-1); text-decoration:none;
  border-radius:6px; }
.solcard__l a:hover{ color:var(--accent-deep); }
.solcard__l b{ font-size:var(--t-micro); font-weight:700; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
.solcard__more a{ font-weight:600; color:var(--teal-ink); }
/* columnas del mega: cada solución con su bajada */
.mega__h{ color:inherit; text-decoration:none; }
.mega__h:hover{ color:var(--teal-ink); }
.mega__ct{ margin-left:.4rem; font-size:var(--t-micro); font-weight:700; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
.mega__b{ font-size:var(--t-micro); line-height:1.55; color:var(--t-3); margin:.35rem 0 .7rem;
  max-width:34ch; }
/* F5 · datos clave en la columna derecha de la ficha (la mitad derecha quedaba vacía) */
.pkey{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1.4rem;
  margin:0 0 1.6rem; padding:1rem 0 0; border-top:1px solid var(--line); }
.pkey > div{ display:flex; flex-direction:column-reverse; min-width:0; }
.pkey dt{ font-size:var(--t-micro); color:var(--t-3); font-weight:500; margin:0; }
.pkey dd{ font-size:1rem; font-weight:600; color:var(--ink); margin:0;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
/* F6 · señal de que la tabla de variantes sigue a la derecha */
.pvar__s{ position:relative; background:
  linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat,
  linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat,
  radial-gradient(farthest-side at 0 50%,rgba(10,46,82,.16),transparent) left/14px 100% no-repeat,
  radial-gradient(farthest-side at 100% 50%,rgba(10,46,82,.16),transparent) right/14px 100% no-repeat;
  background-attachment:local,local,scroll,scroll; }
/* mega de Machinery: una sola columna ancha con las familias a 3 col */
.mega__col--full{ grid-column:1 / -1; }
.mega__3col{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.15rem 1.6rem; }
@media (max-width:900px){ .mega__3col{ grid-template-columns:1fr; } }

/* ═══ LA LÍNEA EN MARCHA — 3 videos de planta (about) ════════════════════════
   Autoplay muted en loop, decorativos (aria-hidden). Sin sonido y sin controles: acompañan,
   no piden atención. reduced-motion → queda el póster (primer frame), sin animación. */
.teamvid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.teamvid__i{ margin:0; }
.teamvid__i video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
  filter:blur(.35px) contrast(1.02);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 2px 6px rgba(10,46,82,.08), 0 16px 34px -14px rgba(10,46,82,.22); }
.teamvid__i figcaption{ margin:.7rem 0 0; font-size:var(--t-small); font-weight:600;
  color:var(--t-2); }
@media (max-width:860px){
  .teamvid{ grid-template-columns:1fr; gap:1.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .teamvid__i video{ animation:none !important; }
}

/* ═══ SOLUCIONES EN FILAS ALTERNADAS (patrón oginca, con rango distinto) ═════ */
.solrows{ display:grid; gap:2.4rem; }
.solrow{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2.4rem;
  align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; padding:1.6rem;
  box-shadow:0 2px 6px rgba(10,46,82,.08), 0 18px 40px -16px rgba(10,46,82,.22); }
.solrow--rev{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.solrow--rev .solrow__m{ order:2; }
.solrow--rev .solrow__c{ order:1; }
/* la fila LEAD (maquinaria) es más alta y respira más: es la línea dominante */
.solrow--lead{ padding:2.2rem; gap:3rem; }
.solrow__m{ display:block; aspect-ratio:4/3; background:var(--bg-alt); border-radius:var(--r-md);
  overflow:hidden; }
.solrow--lead .solrow__m{ aspect-ratio:1/1; }
.solrow__m img{ width:100%; height:100%; object-fit:contain; padding:7%; display:block; }
.solrow__c h2{ font-size:clamp(1.35rem,2.4vw,1.8rem); margin:0 0 .25rem; }
.solrow--lead .solrow__c h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.solrow__c h2 a{ color:var(--ink); text-decoration:none; }
.solrow__c h2 a:hover{ color:var(--teal-ink); }
.solrow__n{ font-size:var(--t-small); font-weight:600; color:var(--teal-ink); margin:0 0 .7rem;
  font-variant-numeric:tabular-nums; }
.solrow__b{ font-size:var(--t-small); line-height:1.7; color:var(--t-2); margin:0 0 1.2rem;
  max-width:56ch; }
.solrow__l{ list-style:none; margin:0 0 1.4rem; padding:1rem 0 0; border-top:1px solid var(--line);
  display:grid; gap:.1rem; }
.solrow__l--2col{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.1rem 2rem; }
.solrow__l a{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.38rem .1rem; font-size:var(--t-small); color:var(--t-1); text-decoration:none; }
.solrow__l a:hover{ color:var(--accent-deep); }
.solrow__l b{ font-size:var(--t-micro); font-weight:700; color:var(--t-3);
  font-variant-numeric:tabular-nums; }
@media (max-width:860px){
  .solrow,.solrow--rev{ grid-template-columns:1fr; gap:1.3rem; padding:1.1rem; }
  .solrow--rev .solrow__m{ order:0; }
  .solrow--rev .solrow__c{ order:1; }
  .solrow__l--2col{ grid-template-columns:1fr; }
}

/* ═══ BANDA CINEMATOGRÁFICA "One team" (about) ═══════════════════════════════
   El fondo es la planta EN MARCHA: seis clips encadenados, DESENFOCADOS bajo un velo navy.
   El blur no es decoración: da legibilidad AA al texto encima y disuelve los micro-artefactos
   del material generado (que es donde se delata). scale(1.08) evita el borde translúcido que
   deja el blur en los límites del contenedor. */
.vband{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(4rem,9vw,7.5rem) 0;
  background:var(--navy-900,#0A2E52); }
.vband__bg{ position:absolute; inset:0; z-index:0; }
.vband__bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Diego (ago-2026): el fondo se veía "una mancha" — blur 9px era demasiado. 2px apenas
     asienta el detalle para que el texto mande, pero la línea de producción SE VE. */
  transform:scale(1.04); filter:blur(2px) saturate(.9) brightness(.9);
  opacity:0; transition:opacity 1.2s cubic-bezier(.4,0,.2,1); }
.vband__bg video.is-on{ opacity:1; }
.vband__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  /* contenido CENTRADO -> scrim simétrico (el gradiente lateral era para texto a la izquierda);
     denso al centro para AA del blanco, más liviano en los bordes para que el video respire */
  background:radial-gradient(ellipse 90% 130% at 50% 50%, rgba(7,31,58,.86) 38%,
             rgba(7,31,58,.66) 100%); }
.vband__c{ position:relative; z-index:2; max-width:none; text-align:center; }
.vband__c h2{ color:#fff; font-size:clamp(1.9rem,4.2vw,3rem); max-width:18ch; margin:.5rem auto 1rem; }
.vband__c p{ color:rgba(255,255,255,.9); font-size:1.03rem; line-height:1.72; max-width:58ch;
  margin:0 auto .9rem; }
.vband__p2{ color:rgba(255,255,255,.72) !important; font-size:.97rem !important; }
.eyebrow--on{ color:var(--teal); }
.eyebrow--on::before{ background:var(--teal); }
@media (prefers-reduced-motion: reduce){
  .vband__bg video{ display:none; }
  .vband{ background:var(--navy-900,#0A2E52) url("assets/team-band-poster.webp") center/cover; }
  .vband__scrim{ background:rgba(7,31,58,.9); }
}
@media (max-width:760px){
  .vband__scrim{ background:linear-gradient(180deg, rgba(7,31,58,.90) 0%, rgba(7,31,58,.86) 100%); }
}
/* la tira nítida de abajo pasa a 6 clips */
@media (min-width:861px){ .teamvid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* sello animado que abre la banda del About: placa blanca chica, el logo se construye una vez */
.vband__logo{ width:96px; aspect-ratio:1/1; margin:0 auto 1.3rem; border-radius:var(--r-md);
  overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45); }
.vband__logo video,.vband__logo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* sello del About: la marca EXACTA se desvanece mientras corre el video de armado y vuelve al final */
.logoseal__mark{ transition:opacity .3s cubic-bezier(.16,1,.3,1); }
.logoseal.is-playing .logoseal__mark{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .logoseal__mark{ opacity:1 !important; transition:none !important; }
}

/* blog: grilla 3×3 (9 notas por página) + paginación real, no scroll infinito */
.bgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .bgrid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .bgrid--3{ grid-template-columns:1fr; } }
.bgrid--3 + .pg{ margin-top:2.6rem; }
.pg a.pg__b{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.pg span.pg__b.is-on{ background:var(--navy-900,#0A2E52); border-color:var(--navy-900,#0A2E52);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; }

/* ── FIX responsive del buscador del header ──────────────────────────────────
   A 360-900px el buscador quedaba aplastado a 24px en el borde derecho (sólo se veía la
   lupa, imposible de usar): la regla `flex:1 1 100%` no creaba una fila nueva porque
   .hd__in no envolvía. Ahora el header envuelve y el buscador toma una fila propia
   debajo del logo, a ancho completo, que es donde un comprador lo espera en móvil. */
@media (max-width:900px){
  .hd__in{ flex-wrap:wrap; row-gap:.55rem; }
  .hd__logo{ order:1; }
  .hd__end{ order:2; margin-left:auto; }
  .hd__search{ order:3; flex:1 0 100%; width:100%; margin:0; }
  .hd__search input{ font-size:16px; }   /* 16px evita el zoom automático de iOS al enfocar */
  .hd__nav{ order:4; }
}

/* ── Targets táctiles en móvil ───────────────────────────────────────────────
   Enlaces de footer, "volver" del artículo y el subir-arriba medían 23-33 px de alto.
   La referencia táctil es 44 px: por debajo de eso el dedo falla, sobre todo con enlaces
   apilados. Se agranda el ÁREA de toque con padding, sin cambiar tamaño de letra ni el
   aspecto de la lista. */
@media (max-width:900px){
  .ft__col a,
  .ft__legal a,
  .article__back,
  .ft__mail,
  .ft__uptop{ display:inline-flex; align-items:center; min-height:44px; }
  .ft__col a{ padding:.25rem 0; }
  .crumbs a{ min-height:38px; display:inline-flex; align-items:center; }
  /* separación entre enlaces apilados: sin esto el área ampliada se solapa */
  .ft__col{ row-gap:.15rem; }
}

/* ── Tablas anchas: señal de que se puede desplazar ──────────────────────────
   La tabla de variantes mide hasta 2500 px dentro de un contenedor de 309 px en móvil.
   Scrollea, pero sin pista visual el usuario no lo descubre: se le agrega un degradado en
   el borde derecho que desaparece al llegar al final (scroll-driven, sin JS). */
.pvar__s{ position:relative; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.pvar__s::after{
  content:""; position:sticky; top:0; right:0; float:right; width:34px; height:100%;
  margin-left:-34px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
}
@supports (animation-timeline: scroll(self inline)){
  @media (prefers-reduced-motion: no-preference){
    .pvar__s::after{ animation: pvar-fade linear both; animation-timeline: scroll(self inline); }
    @keyframes pvar-fade{ from{ opacity:1 } to{ opacity:0 } }
  }
}
/* la tabla de specs de la ficha también puede crecer con valores largos */
.ptable{ overflow-x:auto; }
.ptable table{ min-width:0; }

/* ── Un solo buscador por página ─────────────────────────────────────────────
   Las páginas de listado ya traen su propio buscador, que además filtra en vivo. Tener
   también el del header duplicaba el control (dos cajas que hacen lo mismo, una encima de
   la otra en móvil). En esas páginas se oculta el del header y manda el del listado. */
body:has(#cat-q) .hd__search{ display:none; }

/* ── Tablas de artículo: scroll propio en pantallas angostas ─────────────────
   Una comparativa de 3 columnas no comprime por debajo de ~300 px y desbordaba la página
   a 320 px. Ahora scrollea dentro de su caja, con la misma pista visual que las fichas. */
.tscroll{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:1.4rem 0; border:1px solid var(--line-2); border-radius:var(--r-md); }
.tscroll table{ margin:0; border:0; border-radius:0; min-width:420px; }
/* red de seguridad para tablas de artículos antiguos que no pasan por el generador */
@media (max-width:640px){
  .article__body > table{ display:block; overflow-x:auto; max-width:100%; }
}

/* ── galería de la ficha ─────────────────────────────────────────────────────
   Antes las miniaturas eran <img> sin interacción: se veían las tomas extra pero no
   se podían abrir. Ahora la principal cambia por miniatura, flecha, teclado o swipe. */
.gal{ position:relative; }
.gal:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:4px; border-radius:var(--r-lg); }
.gal__m{ position:relative; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--r-lg); aspect-ratio:1/1; overflow:hidden; }
.gal__i{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5%;
  display:block; opacity:0; visibility:hidden; transition:opacity .18s var(--ease); }
.gal__i.is-on{ opacity:1; visibility:visible; }
/* sin JS: la primera se ve igual (no depende de la clase que agrega el script) */
html:not(.js) .gal__i{ opacity:1; visibility:visible; position:relative; }
html:not(.js) .gal__i + .gal__i{ display:none; }

.gal__a{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--navy-900,#0A2E52); background:rgba(255,255,255,.92); border:1px solid var(--line-2);
  border-radius:999px; cursor:pointer; opacity:0; transition:opacity .16s var(--ease); }
.gal:hover .gal__a,.gal:focus-within .gal__a{ opacity:1; }
.gal__a:hover{ background:#fff; border-color:var(--teal-ink); }
.gal__a:focus-visible{ opacity:1; outline:2px solid var(--teal-ink); outline-offset:2px; }
.gal__a--p{ left:.7rem; } .gal__a--n{ right:.7rem; }
@media (hover:none){ .gal__a{ opacity:1; } }
html:not(.js) .gal__a,html:not(.js) .gal__c{ display:none; }

.gal__c{ position:absolute; right:.7rem; bottom:.7rem; z-index:2; margin:0;
  padding:.2rem .55rem; font-size:var(--t-micro); font-weight:600; color:#fff;
  background:rgba(10,46,82,.72); border-radius:999px; font-variant-numeric:tabular-nums; }

.gal__t{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:.5rem;
  margin-top:.7rem; align-items:start; }
.gal__tb{ display:block; border:1px solid var(--line); border-radius:var(--r-sm,8px);
  overflow:hidden; background:var(--bg-alt); cursor:pointer; transition:border-color .15s var(--ease); }
.gal__tb img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; padding:6%; display:block; }
.gal__tb:hover{ border-color:var(--teal-ink); }
.gal__tb.is-on{ border-color:var(--accent-deep); border-width:2px; }
.gal__tb:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:2px; }
@media (max-width:520px){
  .gal__t{ grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:.4rem; }
}