/* ==========================================================================
   XINGYUN INTERNATIONAL — bloques del sitio (depende de tokens.css)
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* color-scheme:light — el sitio es claro y no tiene tema oscuro. Sin esta linea un
   telefono en modo oscuro pinta los controles NATIVOS (select, casillas, barras de
   scroll, el teclado del buscador) en oscuro sobre fondo blanco. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px;
  color-scheme:light}
body{
  font-family:var(--serif);
  font-size:var(--t-base);line-height:1.72;color:var(--tinta);background:var(--papel);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:where(h1,h2,h3,h4){line-height:1.18;font-weight:700;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:var(--t-2xl);font-weight:900}
h2{font-size:clamp(1.6rem,3.1vw,2.35rem);font-weight:900}
h3{font-size:var(--t-md)}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:var(--radio-xs)}

.contenedor{width:min(var(--ancho),100% - 44px);margin-inline:auto}
.contenedor--angosto{width:min(var(--ancho-angosto),100% - 44px)}
.contenedor--ancho{width:min(var(--ancho-ancho),100% - 44px)}
/* a sangre: la seccion ocupa el ancho de la ventana y solo el texto se centra */
/* a sangre de verdad: el bloque ocupa el ancho de la ventana aunque viva dentro
   de una seccion con contenedor. Sin scroll horizontal (100vw + margen negativo). */
.sangre{width:100vw;margin-left:calc(50% - 50vw);
  margin-block:clamp(14px,1.6vw,20px) clamp(26px,3vw,38px)}
/* =======================================================================
   BANDA DE ESTIBA — layout (el MOVIMIENTO vive en fx/firma-xingyun.css)
   -----------------------------------------------------------------------
   Esto es navegación y dato: los siete tramos con la participación real de
   cada familia. Existe con o sin la capa de efectos, así que su layout vive
   acá; antes estaba en la hoja de la capa y quitar la capa la rompía.
   El filete naranja va en el MISMO bloque que el borde: declarado aparte lo
   pisaba el shorthand `border` de la hoja que se carga después.
   ======================================================================= */
/* Sin `border-radius`: un filete de 3px sobre esquina redondeada se adelgaza en diagonal
   y el naranja se ensucia contra el gris. Y una banda tabular no tiene por qué llevar
   esquinas blandas — el motivo de la casa es el manifiesto de carga, que es un documento
   reglado. Las esquinas rectas son la respuesta correcta a las dos cosas. */
.estiba{margin:0 0 clamp(26px,3vw,38px);padding:0;list-style:none;
  display:flex;width:100%;border:1px solid var(--linea);border-top:3px solid var(--naranja);
  overflow:hidden;background:var(--gris-2)}
.estiba__t{position:relative;display:block;flex:0 1 auto;min-width:30px;padding:12px 8px 11px;
  text-decoration:none;color:var(--tinta);isolation:isolate;
  border-right:1px solid var(--linea)}
.estiba__t:last-child{border-right:0}
/* el relleno del tramo: base = lleno, para que sin la capa se vea igual */
.estiba__t::before{content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb, var(--azul) 9%, #fff);transform-origin:left center}
.estiba__t:nth-child(2n)::before{background:color-mix(in srgb, var(--azul) 14%, #fff)}
.estiba__t b{display:block;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  line-height:1.3;color:var(--azul-900);overflow-wrap:normal;word-break:keep-all}
.estiba__t i{display:block;margin-top:3px;font-family:var(--sans);font-style:normal;
  font-size:var(--t-xs);font-weight:600;color:var(--naranja-osc);font-variant-numeric:tabular-nums}
.estiba__t:hover b{color:var(--azul)}
.estiba__t:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
/* tramo cuyo nombre no entra: queda la cifra, que es el dato; el nombre va en aria-label */
.estiba__t--min,.estiba__t--corto{text-align:center;padding-inline:8px}
.estiba__t--min i,.estiba__t--corto i{margin-top:0}
.estiba__t--corto b{display:none}
/* Con siete tramos por debajo de 900px las etiquetas se parten a la mitad; ahí la banda
   se retira, porque las fichas de familia que siguen ya traen nombre y conteo. */
@media(max-width:900px){.estiba{display:none}}

.estiba__t{padding-block:clamp(22px,3vw,32px);transition:background-color .2s}
/* segundo momento de la misma firma: el eco del riel naranja que cierra el
   plan de carga del hero, para que se lea como el mismo objeto que continúa
   más abajo en la página y no como una franja aparte. */
.estiba__t:hover{background-color:rgba(0,78,152,.06)}
.estiba__t b{font-size:var(--t-sm)}
.estiba__t i{font-size:var(--t-base);margin-top:5px}
/* a sangre, pero el texto del primer y del ultimo tramo se alinean con el
   contenedor: si no, la etiqueta queda pegada al borde de la ventana */
/* La banda a sangre lleva el FONDO de borde a borde, pero sus tramos se alinean a
   la retícula: si el padding de alineación vive en el primer tramo, ese tramo se come
   130px del reparto y la banda MIENTE (4 referencias se veían más anchas que 7). */
@media(max-width:640px){.contenedor{width:min(var(--ancho),100% - 32px)}}

.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radio-s) 0;font-family:var(--sans);font-size:var(--t-sm)}
.saltar:focus{left:0}

.seccion{padding:clamp(56px,7.5vw,104px) 0}
.seccion--gris{background:var(--gris-2);border-block:1px solid var(--linea)}
.seccion--tinta{background:var(--azul-900);color:#fff}

/* etiqueta de manifiesto: la firma tipográfica del sitio */
.antetitulo{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--azul-2);display:flex;align-items:center;gap:10px;
}
.antetitulo::before{content:"";width:26px;height:2px;background:var(--naranja);flex:none}
.seccion--tinta .antetitulo{color:#9dc0e4}

.encabezado{max-width:64ch;margin-bottom:clamp(28px,3.4vw,48px)}
.encabezado h2{margin-top:14px}
.encabezado .plomo{margin-top:16px;color:var(--tinta-2);font-size:var(--t-base)}
.seccion--tinta .encabezado .plomo{color:#c8d9ec}

/* --------------------------------------------------------------- botones */
/* touch-action:manipulation — sin esto el navegador espera ~300ms en cada toque por
   si viene un segundo (doble-tap para hacer zoom). Se notaba en TODOS los CTA
   moviles y en las fotos-enlace del catalogo: el boton respondia tarde. Solo apaga
   el doble-tap y el pinch sobre el propio control; el scroll de la pagina sigue igual. */
a,button,summary,label,.btn,.aQ{touch-action:manipulation}

.btn{
  font-family:var(--sans);font-size:var(--t-base);font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border-radius:var(--radio-s);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn--primario{background:var(--naranja);color:#231000;border-color:var(--naranja)}
.btn--primario:hover{background:#ff7d24;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.aQ:active,.paginador button:active,.filtros__limpiar:active{transform:translateY(1px)}
.btn--azul{background:var(--azul);color:#fff}
.btn--azul:hover{background:var(--azul-900);transform:translateY(-1px)}
.btn--linea{background:transparent;color:var(--azul);border-color:var(--linea-fuerte)}
.btn--linea:hover{border-color:var(--azul);background:#fff}
.seccion--tinta .btn--linea,.seccion--azul .btn--linea,.hero .btn--linea,
.subhero .btn--linea{color:#fff;border-color:rgba(255,255,255,.45)}
.seccion--tinta .btn--linea:hover,.seccion--azul .btn--linea:hover,.hero .btn--linea:hover,
.subhero .btn--linea:hover{background:rgba(255,255,255,.12);border-color:#fff}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* =======================================================================
   HEADER — barra de manifiesto: anclada, sólida y QUIETA
   -----------------------------------------------------------------------
   Lo anterior era una cápsula esmerilada flotando a 14px del borde, con dos
   capas fantasma detrás y un parallax que la movía siguiendo el puntero. El
   cliente lo resumió bien: «se mueve». Además de moverse, dejaba pasar el
   contenido por arriba, por los costados y —translúcida y saturada— por
   detrás, y pagaba TRES backdrop-filter apilados en cada frame de scroll.

   Ahora: pegada al borde, de lado a lado, opaca, sin blur, sin capas y sin
   una sola transformación. La identidad no la pone el vidrio, la pone el
   riel de carga de 3px (los siete tramos del catálogo con su participación
   real) y las versalitas de la navegación: el motivo de la casa es
   «manifiesto de carga», y un manifiesto se lee en filetes y números.
   ======================================================================= */
/* areas seguras: la barra va a sangre y pegada al borde, asi que en un telefono con
   isla dinamica (o en horizontal, con el notch a un costado) el logo y el idioma
   quedaban DEBAJO del sistema. El padding se toma de env(): en pantallas sin notch
   vale 0 y la barra mide exactamente lo mismo que antes. */
.envoltura{position:fixed;top:0;left:0;right:0;z-index:90;
  background:#fff;border-bottom:1px solid var(--linea);
  padding-top:var(--safe-t);
  padding-inline:var(--safe-l) var(--safe-r)}
/* el riel: dato, no adorno. Su reparto lo escribe el build (render._riel). */
.riel{display:block;width:100%;height:3px}
.cabecera{display:flex;align-items:center;gap:14px;
  width:min(var(--ancho),100% - 44px);margin-inline:auto;min-height:70px}

.marca{display:flex;align-items:center;gap:11px;text-decoration:none}
.marca img{height:44px;width:auto;display:block}
.marca__txt{display:flex;flex-direction:column;line-height:1.05}
.marca__n{font-family:var(--sans);font-weight:700;font-size:var(--t-base);letter-spacing:.09em;color:var(--azul-900)}
.marca__s{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#2c5580;margin-top:3px}
@media(max-width:400px){.marca__s{display:none}.marca__n{font-size:var(--t-base)}}

/* Navegación en versalitas: el mismo registro que los antetítulos y las
   etiquetas de las fichas. Antes era texto corriente de 14px, indistinguible
   del de cualquier plantilla. */
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;color:#33445e;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  padding:12px 13px;text-decoration:none;position:relative;
  transition:color .18s ease}
.nav a:hover{color:var(--azul)}
/* el activo se marca con un filete, no con una pastilla de fondo */
.nav a[aria-current]{color:var(--azul-900)}
.nav a[aria-current]::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;
  height:2px;background:var(--naranja)}

.idiomas{position:relative;z-index:2}
.lang__trigger{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:600;color:#33445e;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio-s);padding:10px 12px;cursor:pointer;min-height:44px}
.lang__trigger:hover{border-color:var(--azul);color:var(--azul)}
.lang__trigger svg{width:11px;height:7px}
.lang__lista{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;
  min-width:132px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);
  box-shadow:var(--sombra);display:none}
.lang__lista[data-abierto="true"]{display:block}
.lang__lista a{display:block;padding:9px 11px;border-radius:var(--radio-xs);font-family:var(--sans);
  font-size:var(--t-sm);text-decoration:none;color:#33445e}
.lang__lista a:hover{background:var(--gris-2)}
.lang__lista a[aria-current]{color:var(--azul);font-weight:600}

.cabecera .btn{padding:12px 17px;font-size:var(--t-sm);white-space:nowrap}
/* foco visible propio: el header es lo primero que recorre el teclado */
.cabecera a:focus-visible,.cabecera button:focus-visible{outline:2px solid var(--azul);
  outline-offset:3px;border-radius:var(--radio-xs)}

.hamburguesa{display:none;width:46px;height:46px;min-width:46px;
  border:1px solid var(--linea);background:#fff;border-radius:var(--radio-s);
  flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer}
.hamburguesa span{width:18px;height:2px;background:var(--azul-900);border-radius:var(--radio-xs)}
@media(max-width:1040px){.nav a{padding:12px 9px;letter-spacing:.07em}}
@media(max-width:900px){
  .nav,.cabecera .btn--cta{display:none}
  .hamburguesa{display:flex}
  .cabecera{min-height:64px}
}

/* cajón móvil */
/* El cajon se separa 10px del borde, pero nunca menos que el area segura: con isla
   dinamica el boton de cerrar caia debajo de la barra de estado. `max()` deja los
   10px intactos en toda pantalla sin notch (env() = 0).
   overscroll-behavior:contain — al llegar al final del menu el scroll se encadenaba
   a la pagina de atras y el usuario terminaba desplazando el catalogo por debajo. */
.cajon{position:fixed;height:0;z-index:100;border-radius:var(--radio);
  inset:max(10px,var(--safe-t)) max(10px,var(--safe-r))
        max(10px,var(--safe-b)) max(10px,var(--safe-l));
  background:rgba(255,255,255,.96);backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--sombra);
  padding:0;transform:scale(.96);opacity:0;pointer-events:none;visibility:hidden;
  overscroll-behavior:contain;
  transition:opacity .35s var(--ease),transform .35s var(--ease);overflow:hidden}
.cajon[data-abierto="true"]{height:auto;padding:16px;transform:scale(1);opacity:1;
  pointer-events:auto;visibility:visible;overflow:auto}
.cajon__top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.cerrar{width:46px;height:46px;border:1px solid var(--linea);background:#fff;border-radius:var(--radio-s);
  font-size:var(--t-md);cursor:pointer;color:var(--azul-900)}
.cajon nav{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.cajon nav a{font-family:var(--sans);font-size:var(--t-base);font-weight:600;padding:12px 15px;
  border-radius:var(--radio-s);background:var(--gris-2);text-decoration:none;color:var(--azul-900)}
/* el cajón termina en una barra pegada: la acción y el contacto directo no pueden
   quedar debajo de siete categorías, que es donde estaban */
.cajon__pie{position:sticky;bottom:0;margin-top:14px;padding:14px 0 2px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.97) 22%)}
.cajon__pie .btn{width:100%}
.cajon__directo{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:11px;
  font-family:var(--sans);font-size:var(--t-sm)}
.cajon__directo a{color:var(--azul);text-decoration:none;font-weight:500}
.cajon__directo a:hover{text-decoration:underline}

/* =======================================================================
   HERO
   ======================================================================= */
.hero{position:relative;padding:clamp(112px,15vh,168px) 0 clamp(56px,7vw,86px);
  background:var(--azul-900);color:#fff;overflow:hidden}
/* La foto vuelve al fondo del hero. Habia sido reemplazada por una banda de barras
   que repetia el MISMO dato que la banda de estiba 600px mas abajo: el mismo reparto
   revelado dos veces con dos animaciones. Se queda la banda —que ademas es navegacion
   clickeable— y el hero recupera su fotografia, que es lo que la partitura promete. */
.hero__fondo{position:absolute;inset:0;
  background:var(--azul-900) url(assets/hero-consolidacion.webp) center/cover no-repeat}
/* luz que cae sobre el lado del titular, para que el texto no compita con la
   carga. Antes había una retícula de líneas: es la firma más reconocible de las
   interfaces generadas y no aportaba nada acá; tampoco vuelve ahora. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,rgba(0,32,64,.94) 0%,rgba(0,32,64,.78) 34%,
             rgba(0,32,64,.1) 58%,rgba(0,32,64,0) 100%),
    /* franja inferior: la tira de cifras cae fuera del scrim horizontal y sobre la
       foto quedaba en 1,86:1. El texto no puede depender de que la foto sea oscura. */
    linear-gradient(0deg,rgba(0,32,64,.9) 0%,rgba(0,32,64,.62) 16%,
             rgba(0,32,64,.18) 32%,rgba(0,32,64,0) 46%)}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.18fr .82fr;
  gap:clamp(28px,4vw,60px);align-items:center}

/* -------------------------------------------------- plan de carga del hero */
@media(max-width:900px){
  .hero::after{background:
    linear-gradient(180deg,rgba(0,32,64,.92) 0%,rgba(0,32,64,.62) 46%,rgba(0,32,64,.7) 68%,
                    rgba(0,32,64,.88) 100%)}
}
.hero .antetitulo{color:#8fb8e2}
.hero h1{margin-top:16px;max-width:17ch}
.hero__p{margin-top:20px;max-width:56ch;color:#cfe0f1;font-size:var(--t-base)}
.hero .acciones{margin-top:30px}

.cifras{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px);margin-top:36px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.cifra b{display:block;font-family:var(--sans);font-size:clamp(1.75rem,3.2vw,2.35rem);
  font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:7px;font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:#93b7dc}

/* tarjeta manifiesto: la pieza firma del home */
.manifiesto{background:rgba(255,255,255,.96);color:var(--tinta);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden}
.manifiesto__h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;background:var(--azul);color:#fff}
.manifiesto__h b{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase}
.manifiesto__h span{font-family:var(--sans);font-size:var(--t-xs);color:#bcd7f2;letter-spacing:.06em}
.manifiesto ul{list-style:none;margin:0;padding:6px 20px 10px}
.manifiesto li{display:flex;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px dashed var(--linea);font-family:var(--sans);font-size:var(--t-sm)}
.manifiesto li:last-child{border-bottom:0}
.manifiesto li a{color:var(--tinta);text-decoration:none;flex:1}
.manifiesto li a:hover{color:var(--azul)}
.manifiesto li b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--azul);
  min-width:2.6ch;text-align:right}
.manifiesto__pie{padding:13px 20px;background:var(--gris-2);border-top:1px solid var(--linea);
  font-family:var(--sans);font-size:var(--t-xs);line-height:1.5;color:var(--tinta-2)}
@media(max-width:940px){
  .hero__in{grid-template-columns:1fr}
  .hero h1{max-width:22ch}
  .hero__p{max-width:64ch}
}

/* subhero de páginas internas */
.subhero{position:relative;padding:clamp(106px,13vh,142px) 0 clamp(38px,4.6vw,56px);
  background:var(--azul-900);color:#fff;overflow:hidden}
.subhero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 86% at 86% 0%,rgba(58,110,165,.5) 0%,rgba(0,42,82,0) 62%)}
.subhero--miga{padding:clamp(112px,13vh,140px) 0 clamp(18px,2.2vw,26px)}
/* El subhero LIMITA LA MEDIDA, no se centra.
   El bloque es un `.contenedor` (se centra con margin-inline:auto) y ademas
   recortaba su caja a 70ch: el sobrante se repartia a los dos lados y el H1
   terminaba 228,5px a la derecha del eje del cuerpo a 1440 (128,5 a 1024). El
   titulo de la pagina no compartia eje con su propio contenido en 12 de 14
   paginas. Ahora el margen izquierdo se calcula igual que el del contenedor
   —mismo eje que el cuerpo— y TODO el sobrante queda a la derecha. */
.subhero__in{position:relative;max-width:70ch;
  margin-inline:max(22px,calc(50vw - var(--ancho)/2)) auto}
/* proceso y contacto cierran el hero con un diagrama de ancho completo (el mapa
   de seis etapas, las tres vias de contacto). Ahi el bloque vuelve a ser un
   contenedor normal —que ya arranca en el eje del cuerpo—: es lo que hacian a
   mano los `style="max-width:none"` que se retiraron del build.
   El tope se declara con el token de ancho, no con `none`: `.contenedor` ya se
   queda en min(--ancho, 100% - 44px), asi que 1180px nunca recorta nada y ademas
   la regla dice cual es la medida, en vez de renunciar a tener una. */
.subhero__in:has(.mapa),.subhero__in:has(.vias){max-width:var(--ancho);margin-inline:auto}
/* ...y ahi la medida del copy la lleva el parrafo, no la caja. Misma medida que en
   el resto de los heroes (70ch sobre el cuerpo de 16px = 723px), asi que los
   `style="max-width:70ch"` que quedaron en el build son redundantes. */
.subhero__in > p:not(.miga):not(.antetitulo){max-width:70ch}
/* el contenedor angosta su margen a 16px por lado por debajo de 640 */
@media(max-width:640px){
  .subhero__in{margin-inline:max(16px,calc(50vw - var(--ancho)/2)) auto}
}
.subhero h1{margin-top:14px}
.subhero p{margin-top:16px;color:#cfe0f1}
.miga{font-family:var(--sans);font-size:var(--t-sm);color:#9dc0e4;margin-bottom:2px}
.miga a{color:#cfe0f1;text-decoration:none}
.miga a:hover{color:#fff;text-decoration:underline}

/* =======================================================================
   BLOQUES DE CONTENIDO
   ======================================================================= */
.valores{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.valor{background:#fff;padding:clamp(22px,2.6vw,30px)}
.valor__n{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;
  color:var(--naranja-osc);font-variant-numeric:tabular-nums}
.valor h3{margin-top:12px}
.valor p{margin-top:10px;font-size:var(--t-base);color:var(--tinta-2);line-height:1.65}
@media(max-width:900px){.valores{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.valores{grid-template-columns:1fr}}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.dupla__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);
  box-shadow:var(--sombra-s)}
/* La media de una dupla invertida va PRIMERA en el HTML, asi que ya cae a la izquierda:
   el `order:2` que habia aca la devolvia a la derecha y anulaba la inversion — las dos
   fotos de nosotros y proceso terminaban del mismo lado, que es el patron en chorizo que
   el agente 05 prohibe. El orden lo decide el HTML. */
@media(max-width:860px){.dupla{grid-template-columns:1fr}}

.lista-check{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.lista-check li{display:flex;gap:13px;font-size:var(--t-base);color:var(--tinta-2);line-height:1.62}
.lista-check li::before{content:"";flex:none;width:9px;height:9px;margin-top:9px;
  background:var(--naranja);border-radius:var(--radio-xs);transform:rotate(45deg)}
.seccion--tinta .lista-check li{color:#c8d9ec}

/* familias */
.familias{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.familia{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;text-decoration:none;
  color:inherit;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.familia:hover{border-color:var(--azul-2);transform:translateY(-3px);box-shadow:var(--sombra-s)}
.familia__img{aspect-ratio:16/10;height:auto;object-fit:cover;background:var(--gris);width:100%}
.familia__cuerpo{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.familia__n{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul-2);font-variant-numeric:tabular-nums}
.familia h3{margin-top:9px;font-size:var(--t-base)}
.familia p{margin-top:9px;font-size:var(--t-sm);color:var(--tinta-2);line-height:1.6;flex:1}
.familia__pie{margin-top:16px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--azul)}
.familia__pie i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--tinta-2);
  font-weight:500}
@media(max-width:1000px){.familias{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.familias{grid-template-columns:1fr}}

/* pasos del proceso */
.pasos{counter-reset:paso;display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.paso{counter-increment:paso;background:#fff;display:grid;grid-template-columns:76px 1fr;
  gap:20px;padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,32px)}
.paso::before{content:counter(paso,decimal-leading-zero);font-family:var(--sans);font-size:var(--t-base);
  font-weight:700;color:var(--naranja-osc);letter-spacing:.06em;padding-top:4px;
  border-right:1px solid var(--linea);font-variant-numeric:tabular-nums}
.paso p{margin-top:9px;color:var(--tinta-2);font-size:var(--t-base)}
@media(max-width:620px){.paso{grid-template-columns:1fr;gap:10px}
  .paso::before{border-right:0;padding-top:0}}

/* tabla de datos tipo manifiesto */
.datos{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--t-base)}
.datos th,.datos td{text-align:left;padding:15px 0;border-bottom:1px solid var(--linea);
  vertical-align:top}
.datos th{width:34%;font-weight:600;color:var(--azul-900);padding-right:20px}
/* El email de contacto (30 caracteres sin espacios) no rompia y su min-content
   empujaba la tabla entera: contacto.html desbordaba a 360px. `anywhere` deja que
   una palabra larga se parta SOLO cuando no entra; el texto corto de las fichas no
   cambia. Se declara en la celda, no en la tabla, para no tocar el reparto de
   columnas de las 441 fichas. */
.datos td{color:var(--tinta-2);overflow-wrap:anywhere}
.datos tr:last-child th,.datos tr:last-child td{border-bottom:0}

/* FAQ */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:var(--t-base);color:var(--azul-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;
  border-right:2px solid var(--azul-2);border-bottom:2px solid var(--azul-2);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 22px;color:var(--tinta-2);max-width:80ch}

/* cierre */
.cierre{background:var(--azul);color:#fff;border-radius:var(--radio);
  padding:clamp(34px,5vw,60px);position:relative;overflow:hidden}
.cierre::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  border:44px solid rgba(255,255,255,.07);border-radius:50%}
.cierre h2{max-width:20ch}
.cierre p{margin-top:16px;max-width:62ch;color:#d3e5f7}
.cierre .btn--linea{color:#fff;border-color:rgba(255,255,255,.45)}
.cierre .btn--linea:hover{background:rgba(255,255,255,.12)}

/* =======================================================================
   CATÁLOGO (shop)
   ======================================================================= */
.shop{display:grid;grid-template-columns:262px 1fr;gap:clamp(24px,3vw,42px);align-items:start}
.filtros{position:sticky;top:104px;border:1px solid var(--linea);border-radius:var(--radio);
  background:#fff;padding:20px;font-family:var(--sans)}
.filtros h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-900)}
.filtros fieldset{border:0;padding:0;margin:22px 0 0}
.filtros legend{font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--azul-2);margin-bottom:11px;padding:0}
.faceta{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--t-sm);color:#33445e;
  cursor:pointer}
.faceta input{width:17px;height:17px;accent-color:var(--azul);flex:none;cursor:pointer}
.faceta span{flex:1}
.faceta i{font-style:normal;font-size:var(--t-xs);color:#7a8aa3;font-variant-numeric:tabular-nums}
.filtros__limpiar{margin-top:22px;width:100%;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:600;color:var(--azul);background:none;border:1px solid var(--linea);
  border-radius:var(--radio-s);padding:11px;cursor:pointer;min-height:44px}
.filtros__limpiar:hover{border-color:var(--azul)}

.barra{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.buscador{position:relative;flex:1;min-width:220px}
.buscador input{width:100%;font-family:var(--sans);font-size:var(--t-base);padding:14px 15px 14px 42px;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);background:#fff;color:var(--tinta)}
.buscador svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:#7a8aa3;pointer-events:none}
.barra select{font-family:var(--sans);font-size:var(--t-sm);padding:14px 14px;border-radius:var(--radio-s);
  border:1px solid var(--linea-fuerte);background:#fff;color:var(--tinta);cursor:pointer;min-height:48px}
.conteo{font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta-2);
  font-variant-numeric:tabular-nums;width:100%}
.conteo b{color:var(--azul-900)}
.filtros-movil{display:none}

.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1160px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){
  .shop{grid-template-columns:1fr}
  .filtros{position:static}
  .filtros-movil{display:flex;width:100%;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
    align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;min-height:48px;
    border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);background:#fff;
    color:var(--azul-900);cursor:pointer}
  .filtros[hidden]{display:none}
}
@media(max-width:520px){.rejilla{grid-template-columns:1fr}}

/* [hidden] tiene que ganarle al display del componente: sin esto el paginador
   marcaba 123 tarjetas como ocultas y el navegador las seguía pintando
   (catálogo de 26.777 px con 123 cajas vacías). */
.tarjeta[hidden]{display:none}
/* Chrome de tarjeta propio: antes era el borde-redondeado-y-lift genérico de
   cualquier plantilla (marcado como aviso en la revisión de visión del gate de
   efectos). Ahora carga el mismo motivo que el resto del sitio: un filete
   superior — el mismo lenguaje que el `.riel` de la cabecera y la banda
   `.estiba` — y la etiqueta de familia pasa a leerse como rótulo de embalaje,
   no como caption de producto. El hover deja de ser un lift+sombra: es un
   asiento corto (entra, se apoya, traba), el mismo verbo que `stow`. */
.tarjeta{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea);border-top:0;border-radius:var(--radio);overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .18s var(--fx-ease-out,var(--ease))}
.tarjeta:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra-s);
  transform:translateY(-1px) scale(1.008)}
.tarjeta:hover::before{background:var(--naranja)}
/* la foto es lo que se compra: mas caja y menos marco. Antes la tarjeta era
   alta con la foto chica adentro. */
.tarjeta__foto{position:relative;display:block;background:var(--gris);padding:8px}
.tarjeta__foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.tarjeta__fam{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul-900);background:var(--gris-2);border:1px solid var(--linea);
  border-radius:var(--radio-xs);padding:2px 7px;margin-bottom:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tarjeta__cuerpo{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1;gap:2px}
.tarjeta__cuerpo h3{font-size:var(--t-base);line-height:1.35}
.tarjeta__cuerpo h3 a{text-decoration:none}
.tarjeta__cuerpo h3 a:hover{color:var(--azul)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-family:var(--sans);font-size:var(--t-xs);font-weight:500;color:#33445e;background:var(--gris-2);
  border:1px solid var(--linea);border-radius:var(--radio-pill);padding:4px 10px;font-variant-numeric:tabular-nums}
/* Las dos acciones de la tarjeta no siempre entran en una fila (a 3 y 4 columnas
   "View details" se partia en dos lineas y dejaba las tarjetas de la fila con
   alturas distintas). Se permite que la segunda baje entera en vez de romper la
   etiqueta: una etiqueta nunca se parte, una fila si. */
.tarjeta__acciones{margin-top:auto;padding-top:16px;display:flex;gap:8px;
  align-items:stretch;flex-wrap:wrap}
.tarjeta__acciones .btn{padding:11px 14px;font-size:var(--t-sm);
  flex:1 1 auto;white-space:nowrap;text-align:center;justify-content:center}
.aQ{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--azul);background:#fff;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);padding:11px 13px;cursor:pointer;
  min-height:44px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.aQ:hover{border-color:var(--azul)}
.aQ[data-en="1"]{background:var(--azul);color:#fff;border-color:var(--azul)}

.vacio{padding:60px 20px;text-align:center;color:var(--tinta-2);border:1px dashed var(--linea-fuerte);
  border-radius:var(--radio);font-family:var(--sans)}
.paginador{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin-top:34px;font-family:var(--sans)}
.paginador button{min-width:44px;min-height:44px;padding:0 13px;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:600;color:#33445e;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio-s);cursor:pointer;font-variant-numeric:tabular-nums}
.paginador button[aria-current]{background:var(--azul);color:#fff;border-color:var(--azul)}
.paginador button:disabled{opacity:.4;cursor:default}

/* =======================================================================
   FICHA DE PRODUCTO
   ======================================================================= */
/* la foto MANDA: era una caja de 456px al lado de dos tablas, con media columna
   izquierda vacia. Ahora ocupa mas ancho y las tablas bajan a su propia fila. */
.ficha{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,56px);align-items:start}
.ficha__datos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);
  margin-top:clamp(30px,4vw,52px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--linea)}
@media(max-width:860px){.ficha__datos{grid-template-columns:1fr}}
.ficha__foto{background:var(--gris);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(24px,3.4vw,44px);position:sticky;top:calc(var(--header-h,96px) + 16px)}
@media(max-width:860px){.ficha__foto{position:static}}
.ficha__foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.ficha__nota{margin-top:12px;font-family:var(--sans);font-size:var(--t-xs);color:var(--tinta-2);
  line-height:1.55}
.ficha h1{font-size:clamp(1.6rem,3.1vw,2.35rem)}
.ficha .chips{margin-top:16px}
.ficha__intro{margin-top:18px;color:var(--tinta-2);font-size:var(--t-base);max-width:56ch}
.ficha__carga{margin-top:22px;padding:15px 17px;background:var(--gris-2);
  border:1px solid var(--linea);border-radius:var(--radio-s);
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.6;color:var(--tinta-2)}
.ficha__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.bloque-tabla{margin-top:34px}
.bloque-tabla h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-900);padding-bottom:12px;border-bottom:2px solid var(--azul)}
.bloque-tabla .datos{margin-top:4px}
.bloque-tabla p.nota{margin-top:12px;font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta-2)}
@media(max-width:860px){.ficha{grid-template-columns:1fr}}

/* =======================================================================
   FORMULARIO
   ======================================================================= */
/* minmax(0,...) y no 1fr a secas: el piso implicito de una pista `1fr` es min-content,
   asi que el formulario empujaba su columna y contacto.html desbordaba a 360px en los
   TRES idiomas (+26px EN, +35px ES, +21px ZH; el exceso variaba con el largo de las
   etiquetas, que es la firma de este defecto). Con el piso en 0 la pista puede encoger
   y el contenido se acomoda dentro. */
.form-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,54px);align-items:start}
.form-grid > *{min-width:0}
@media(max-width:900px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.formulario{border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(22px,3vw,32px);
  background:#fff}
.campo{margin-top:18px}
.campo:first-of-type{margin-top:0}
.campo label{display:block;font-family:var(--sans);font-size:var(--t-sm);font-weight:600;
  color:var(--azul-900);margin-bottom:7px}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--sans);font-size:var(--t-base);
  padding:13px 14px;border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);
  background:#fff;color:var(--tinta);min-height:48px}
.campo textarea{min-height:130px;resize:vertical;line-height:1.6}
.campo--miel{position:absolute;left:-9999px}
.form-nota{margin-top:16px;font-family:var(--sans);font-size:var(--t-xs);color:var(--tinta-2)}
.form-msg{margin-top:16px;font-family:var(--sans);font-size:var(--t-sm);padding:13px 15px;
  border-radius:var(--radio-s);display:none}
.form-msg[data-tipo="ok"]{display:block;background:#e8f4ea;color:#1d5b2b;border:1px solid #b9dcc2}
.form-msg[data-tipo="error"]{display:block;background:#fdece5;color:#8a3609;border:1px solid #f6c6ac}
.panel{border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(22px,3vw,30px);
  background:var(--gris-2)}
.panel h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-900)}
.panel + .panel{margin-top:20px}
.panel .datos{margin-top:8px}
.qlista{list-style:none;margin:16px 0 0;padding:0;font-family:var(--sans);font-size:var(--t-sm)}
.qlista li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--linea)}
.qlista li span{flex:1}
.qlista button{background:none;border:0;color:var(--naranja-osc);font-family:var(--sans);
  font-size:var(--t-sm);font-weight:600;cursor:pointer;padding:4px}
.qvacia{margin-top:14px;font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta-2)}

/* legales */
.prosa{max-width:74ch}
.prosa h2{font-size:var(--t-md);margin-top:42px}
.prosa h2:first-child{margin-top:0}
.prosa p{margin-top:14px;color:var(--tinta-2)}

/* =======================================================================
   PIE — banda oscura que CIERRA la página y hace de segundo menú del shop
   -----------------------------------------------------------------------
   Antes: panel blanco sobre gris con 5 de las 7 familias y un ítem «Productos»
   colgando de «Catálogo». En una página corta (404, legales) el sitio terminaba
   en un vivero de enlaces sin peso. Ahora cierra en azul, están las SIETE
   familias con su conteo, el idioma y una acción real.
   ======================================================================= */
.pie{padding:clamp(48px,6vw,76px) 0 22px;background:var(--azul-900);color:#cfe0f1;
  position:relative;overflow:hidden}
.pie::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 88% 0%,rgba(58,110,165,.38) 0%,rgba(0,42,82,0) 62%)}
.pie > *{position:relative}
.pie__grid{display:grid;grid-template-columns:1.5fr 1.15fr .85fr 1.1fr;
  gap:clamp(26px,3.4vw,48px)}
.pie__marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;
  min-height:44px}
.pie__marca img{height:40px;width:auto;display:block}
.pie__marca .marca__n{color:#fff}
.pie__marca .marca__s{color:#8fb8e2}
.pie__tag{margin-top:15px;font-size:var(--t-sm);line-height:1.62;color:#a9c6e4;max-width:34ch}
.pie h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#8fb8e2}
/* Minimo tactil en el pie. Los 20 enlaces median entre 15 y 38px de alto (los de
   familia, 24px con 10px de separacion) y el CTA 36: el pie entero quedaba por
   debajo del piso de 44px que el resto del sitio ya respeta (.aQ, .paginador,
   .lang__trigger). Se agranda el AREA DE TOQUE, no la tipografia: la caja del
   enlace pasa a 44px y la separacion de la lista se absorbe dentro de esa caja
   (gap:0), asi el ritmo del pie sigue siendo el mismo y solo crece lo indispensable. */
.pie ul{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.pie ul a{font-family:var(--sans);font-size:var(--t-sm);color:#dbe9f7;text-decoration:none;
  transition:color .18s;display:flex;align-items:center;min-height:44px}
.pie ul a:hover{color:#fff}
/* las familias llevan su conteo, como en el menú y en la banda de estiba */
.pie__fams a{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pie__fams i{font-style:normal;font-size:var(--t-xs);font-weight:600;color:var(--naranja);
  font-variant-numeric:tabular-nums}
.pie__idiomas{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
/* las pastillas de idioma median 35px: se llevan al piso tactil sin tocar la
   tipografia ni el radio, solo la caja */
.pie__idiomas a{font-family:var(--sans);font-size:var(--t-xs);font-weight:500;color:#bcd6ef;
  text-decoration:none;padding:6px 14px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radio-pill);transition:background .18s,color .18s,border-color .18s;
  display:inline-flex;align-items:center;min-height:44px}
.pie__idiomas a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.pie__idiomas a[aria-current]{background:rgba(255,255,255,.12);color:#fff;
  border-color:rgba(255,255,255,.42)}
.pie address{font-style:normal;margin-top:15px;font-family:var(--sans);font-size:var(--t-sm);
  display:flex;flex-direction:column;gap:0}
/* el correo y el telefono son los dos enlaces mas usados del pie en un telefono:
   median 21px de alto. La separacion de 9px pasa adentro de la caja de 44. */
.pie__dato{color:#fff;text-decoration:none;line-height:1.5;
  display:flex;align-items:center;min-height:44px}
.pie__dato:hover{text-decoration:underline}
.pie__dato--quieto{color:#a9c6e4}
.pie__contacto .btn{margin-top:20px;min-height:44px}
.pie__legal{margin-top:clamp(32px,4vw,48px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--sans);font-size:var(--t-xs);line-height:1.6;color:#8fb8e2}
.pie__base{padding:14px 0 6px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;font-family:var(--sans);font-size:var(--t-sm);color:#8fb8e2}
.pie__base nav{display:flex;gap:18px}
.pie__base a{color:#bcd6ef;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.pie__base a:hover{color:#fff}
@media(max-width:960px){.pie__grid{grid-template-columns:1fr 1fr;row-gap:34px}}
@media(max-width:560px){.pie__grid{grid-template-columns:1fr}}

.arriba{position:fixed;right:18px;bottom:18px;z-index:80;width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;background:var(--azul);color:#fff;
  border:0;cursor:pointer;box-shadow:var(--sombra-s);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease)}
.arriba[data-ver="1"]{opacity:1;pointer-events:auto}
.arriba:hover{transform:translateY(-2px)}
.arriba svg{width:17px;height:17px}

/* --------------------------------------------------------------- motion
   El presupuesto de movimiento se concentra en UNA pieza (la tarjeta de
   manifiesto del hero). Nada de fade-rise uniforme en cada bloque: se lee
   como plantilla y deja la página en blanco si el JS no llega a tiempo. */
.js .reveal{opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal[data-visible="1"]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
}
@media print{.envoltura,.arriba,.filtros{display:none}}

/* ==========================================================================
   SEGUNDA VUELTA — plan de mejora
   Cuatro registros de fondo, mega-menú, un hero propio por página y los
   bloques de venta que faltaban (confianza, mercados, mix de contenedor).
   ========================================================================== */

/* ------------------------------------------------- registros de fondo (A1) */
/* superficie plana: la trama rayada de acá era decoración sin significado y, de
   paso, competía con la retícula del registro azul (que sí es el motivo de marca) */
.seccion--tecnica{background:var(--gris-2);border-block:1px solid var(--linea)}
.seccion--azul{background:var(--azul-900);color:#fff;position:relative;overflow:hidden}
.seccion--azul::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 100% 50%,rgba(58,110,165,.42) 0%,rgba(0,42,82,0) 66%)}
.seccion--azul > *{position:relative}
.seccion--azul .antetitulo{color:#9dc0e4}
.seccion--azul .encabezado .plomo{color:#c8d9ec}
.seccion--azul h2,.seccion--azul h3{color:#fff}

/* ritmo: la primera sección de una interna entra más arriba (A2) */
.seccion--pegada{padding-top:clamp(26px,3vw,42px)}

/* ------------------------------------------------------- mega-menú (B1) */
.nav__item{position:relative;display:flex}
.nav__trigger{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
  font-size:var(--t-sm);font-weight:500;color:#33445e;background:none;border:0;cursor:pointer;
  padding:10px 14px;border-radius:var(--radio-s);transition:background .2s,color .2s}
.nav__trigger:hover,.nav__item[data-abierto="true"] .nav__trigger{background:rgba(255,255,255,.85);color:var(--azul)}
.nav__trigger svg{width:10px;height:7px;transition:transform .25s var(--ease)}
.nav__item[data-abierto="true"] .nav__trigger svg{transform:rotate(180deg)}
.mega{position:absolute;left:50%;top:calc(100% + 16px);transform:translateX(-50%) translateY(-6px);
  width:min(1180px,94vw);background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra-alta);padding:22px;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:5}
.nav__item[data-abierto="true"] .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.mega__enc{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:14px}
.mega h3{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--azul-2)}
.mega__ver{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--azul);
  text-decoration:none}
.mega__ver:hover{text-decoration:underline}
/* cuatro columnas: 7 familias con foto + la ficha del catálogo completo llenan la
   grilla exacta; la lista de dos columnas dejaba un hueco en la última fila */
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mega__f{display:block;padding:0 0 11px;border-radius:var(--radio-s);overflow:hidden;
  text-decoration:none;color:var(--tinta);font-family:var(--sans);
  border:1px solid var(--linea);background:#fff;transition:border-color .18s,box-shadow .18s}
.mega__f:hover{border-color:#c3d5e8;box-shadow:var(--sombra-s)}
/* miniatura de menú, no ficha de catálogo: apaisada y baja para que el panel
   entero entre en pantalla sin tapar el hero */
.mega__f img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:var(--gris-2)}
.mega__f b{display:block;margin:10px 12px 0;font-size:var(--t-sm);font-weight:600;line-height:1.3}
.mega__f i{display:block;margin:3px 12px 0;font-style:normal;font-size:var(--t-xs);color:#7a8aa3;
  font-variant-numeric:tabular-nums}
.mega__f--todo{display:flex;flex-direction:column;justify-content:center;padding:14px 4px 16px;
  background:var(--azul-900);border-color:var(--azul-900)}
.mega__f--todo b{color:#fff;font-size:var(--t-sm);margin-top:0}
.mega__f--todo i{color:var(--naranja)}
.mega__f--todo span{display:block;margin:8px 12px 0;font-size:var(--t-xs);line-height:1.5;color:#bcd6ef}
.mega__f--todo:hover{border-color:var(--azul);box-shadow:var(--sombra-s)}
.mega__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--linea)}
.mega__pie span{font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta-2)}
.btn--chico{padding:10px 16px;font-size:var(--t-sm)}
@media(max-width:900px){.nav__item{display:none}}

/* contador de cotización en el header (B3) */
.qhdr{position:relative;display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:var(--t-sm);font-weight:600;color:#33445e;background:rgba(255,255,255,.7);
  border:1px solid var(--linea);border-radius:var(--radio-s);padding:9px 12px;min-height:40px;
  text-decoration:none;transition:border-color .2s,color .2s}
.qhdr:hover{border-color:var(--azul);color:var(--azul)}
.qhdr svg{width:15px;height:15px}
.qhdr b{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--radio-pill);background:var(--naranja);color:#231000;font-size:var(--t-xs);
  font-variant-numeric:tabular-nums}
.qhdr[hidden]{display:none}
@media(max-width:1120px){.qhdr span{display:none}}

/* ------------------------------------------------------- heroes (C) */
/* catálogo: el buscador vive DENTRO del hero */
.hcat__buscador{margin-top:26px;max-width:560px;position:relative}
.hcat__buscador input{width:100%;font-family:var(--sans);font-size:var(--t-base);padding:17px 17px 17px 48px;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radio-s);background:rgba(255,255,255,.1);
  color:#fff;backdrop-filter:blur(6px)}
.hcat__buscador input::placeholder{color:#a9c6e4}
/* el anillo de foco NO se apaga. Este campo y el del hero eran los dos unicos
   controles del sitio con `outline:none`: justo los dos mas importantes, y sin
   indicador visible el teclado se queda sin saber donde esta (1.4.11 / 2.4.11).
   Mismo anillo que el resto del sitio (`:focus-visible`, arriba): naranja de marca,
   3px, offset 3px. Sobre el azul del subhero rinde 4,5:1, muy por encima de 3:1. */
.hcat__buscador input:focus{outline:3px solid var(--naranja);outline-offset:3px;
  border-color:var(--naranja);background:rgba(255,255,255,.16)}
.hcat__buscador svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#a9c6e4;pointer-events:none}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:500;color:#dceafa;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radio-pill);padding:9px 15px;text-decoration:none;transition:background .2s,border-color .2s}
.pill:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:#fff}
.pill i{font-style:normal;font-variant-numeric:tabular-nums;color:#8fb8e2;font-size:var(--t-xs)}

/* categoría: hero con foto de la familia */
.subhero--foto{position:relative}
.subhero--foto .subhero__bg{position:absolute;inset:0;z-index:0}
.subhero--foto .subhero__bg img{width:100%;height:100%;object-fit:cover;opacity:.62}
/* el velo llega hasta el borde derecho: con .62 el texto chico caía por debajo de
   AA (4.5:1) sobre las fotos claras de estudio — lo midió el render check. */
.subhero--foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,38,74,.96) 0%,rgba(0,38,74,.93) 48%,
             rgba(0,38,74,.62) 80%,rgba(0,38,74,.4) 100%)}
.subhero--foto .subhero__in{z-index:2}
.subhero--foto .subhero__in p{color:#e6f0fb}
.subhero--foto .antetitulo{color:#c4dcf5}
.subhero--foto .subhero__dato div span{color:#eaf3fc}
@media(max-width:900px){.subhero--foto::after{
  background:linear-gradient(180deg,rgba(0,38,74,.93) 0%,rgba(0,38,74,.95) 100%)}}
.subhero__dato{display:flex;flex-wrap:wrap;gap:26px;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.22)}
.subhero__dato div b{display:block;font-family:var(--sans);font-size:var(--t-lg);font-weight:700;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.subhero__dato div span{display:block;margin-top:6px;font-family:var(--sans);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#dbe9f7}

/* sub-navegación de subfamilias, pegajosa (F1) */
.subnav{position:sticky;top:var(--header-h,73px);z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);padding:12px 0}
.subnav__in{display:flex;flex-wrap:wrap;gap:8px}
.subnav a{font-family:var(--sans);font-size:var(--t-sm);font-weight:500;color:#33445e;
  border:1px solid var(--linea);border-radius:var(--radio-pill);padding:8px 14px;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s}
.subnav a:hover{border-color:var(--azul);color:var(--azul);background:#fff}
.subnav a i{font-style:normal;color:#7a8aa3;font-variant-numeric:tabular-nums;margin-left:5px}

/* proceso: mapa de etapas dentro del hero */
.mapa{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:28px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.22)}
.mapa div{position:relative;padding-top:16px}
.mapa div::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:rgba(255,255,255,.22)}
.mapa div:first-child::before{background:var(--naranja)}
.mapa b{display:block;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  color:#8fb8e2;font-variant-numeric:tabular-nums}
.mapa span{display:block;margin-top:5px;font-family:var(--sans);font-size:var(--t-xs);line-height:1.35;
  color:#dceafa}
@media(max-width:820px){.mapa{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:480px){.mapa{grid-template-columns:repeat(2,1fr)}}

/* contacto: tres vías */
.vias{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.22)}
.via b{display:block;font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:#fff}
.via span{display:block;margin-top:5px;font-family:var(--sans);font-size:var(--t-xs);line-height:1.45;
  color:#bad3ec}
.via a{color:#fff}
@media(max-width:720px){.vias{grid-template-columns:1fr;gap:12px}}

/* ------------------------------------------------- bloques de venta (D) */
/* respaldo de la compra: título a la izquierda y lista a la derecha. Es lista y no
   grilla a propósito — la única grilla de tarjetas del home es «por qué elegirnos». */
.respaldo{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(28px,4vw,64px);
  align-items:start}
.respaldo__enc{position:sticky;top:104px}
.respaldo__enc .encabezado{margin-bottom:0;text-align:left;max-width:38ch}
.respaldo__lista{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden}
.respaldo__f{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,30px)}
.respaldo__f + .respaldo__f{border-top:1px solid var(--linea)}
.respaldo__ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radio-s);
  background:var(--azul);color:#fff;flex:none}
.respaldo__ic svg{width:17px;height:17px}
.respaldo__f h3{font-size:var(--t-base);line-height:1.3}
.respaldo__f p{margin-top:7px;font-size:var(--t-base);line-height:1.62;color:var(--tinta-2)}
@media(max-width:900px){.respaldo{grid-template-columns:1fr;gap:26px}
  .respaldo__enc{position:static}}

.mercados{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mercado{border:1px solid var(--linea);border-radius:var(--radio);background:#fff;padding:24px 26px;
  position:relative;overflow:hidden}
.mercado::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;
  border:18px solid var(--gris-2);border-radius:50%}
.mercado h3{font-size:var(--t-md);position:relative}
.mercado__puerto{margin-top:12px;font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta-2);
  position:relative}
.mercado__t{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);font-family:var(--sans);
  font-size:var(--t-sm);font-weight:600;color:var(--azul);font-variant-numeric:tabular-nums;position:relative}
@media(max-width:820px){.mercados{grid-template-columns:1fr}}

.mix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
/* el mix es un diagrama, no una tercera grilla de tarjetas (R1 del layout) */
/* filete SUPERIOR: el borde lateral de color es el tell mas reconocible
   de UI generada (lo marco el detector de impeccable). */
.mix__c{display:flex;flex-direction:column;gap:12px;padding:14px 22px 0 0;
  border-top:2px solid var(--linea)}
.mix__barra{height:10px;border-radius:var(--radio-xs);background:var(--gris);overflow:hidden;display:flex}
.mix__barra i{display:block;height:100%}
.mix__c h3{font-size:var(--t-base)}
.mix__c p{font-size:var(--t-base);color:var(--tinta-2);line-height:1.62}
@media(max-width:820px){.mix{grid-template-columns:1fr}}

/* ------------------------------------------------- catálogo (E) */
.activos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.activos[hidden]{display:none}
.activos__t{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#7a8aa3}
.activo{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:500;color:var(--azul);background:#eaf1f9;border:1px solid #cfe0f1;border-radius:var(--radio-pill);
  padding:6px 8px 6px 13px}
.activo button{width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(0,78,152,.12);color:var(--azul);cursor:pointer;font-size:var(--t-xs);line-height:1}
.activo button:hover{background:var(--azul);color:#fff}
.rejilla[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
@media(max-width:1160px){.rejilla[data-cols="4"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rejilla[data-cols="4"]{grid-template-columns:1fr}}
.mas{display:block;width:100%;margin-top:24px;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:600;color:var(--azul);background:#fff;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-s);padding:15px;cursor:pointer;min-height:48px}
.mas:hover{border-color:var(--azul)}
.mas[hidden]{display:none}
.grupo{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin:14px 0 2px;
  padding-bottom:10px;border-bottom:2px solid var(--azul)}
.grupo h3{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul-900)}
.grupo span{font-family:var(--sans);font-size:var(--t-xs);color:#7a8aa3;font-variant-numeric:tabular-nums}
.grupo[hidden]{display:none}
.vacio b{display:block;font-size:var(--t-base);color:var(--tinta);margin-bottom:8px}

/* ------------------------------------------------- ficha (G) */
.importar{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:20px 22px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--gris-2)}
.importar__ico{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radio-s);
  background:#fff;border:1px solid var(--linea);color:var(--azul)}
.importar__ico svg{width:19px;height:19px}
.importar h2{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul-900);border:0;padding:0}
.importar p{margin-top:8px;font-size:var(--t-base);line-height:1.65;color:var(--tinta-2)}

/* tabla de muestra del home: el catálogo dicho como manifiesto, no como cards */
.tabla-muestra td:first-child{width:52%;font-family:var(--serif)}
.tabla-muestra td:first-child a{color:var(--tinta);text-decoration:none}
.tabla-muestra td:first-child a:hover{color:var(--azul);text-decoration:underline}
.tabla-muestra td:nth-child(2){width:22%;font-size:var(--t-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul-2)}
.tabla-muestra td:last-child{font-variant-numeric:tabular-nums;color:var(--tinta-2)}
@media(max-width:640px){.tabla-muestra td:nth-child(2){display:none}
  .tabla-muestra td:first-child{width:60%}}

/* tarjeta de familia tipográfica: la foto de la familia trabaja en su categoría,
   no en el home (y así los sets de fotos quedan disjuntos, IMG-NO-REPEAT) */
.familia--txt .familia__cuerpo{padding:24px 24px 26px}
.familia--txt .familia__n span{color:var(--linea-fuerte);font-weight:500}
.familia--txt::before{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;
  border:22px solid var(--gris-2);border-radius:50%;transition:border-color .25s}
.familia--txt:hover::before{border-color:#e6edf6}
.familia--txt > *{position:relative}
.familia__subs{margin-top:12px;font-family:var(--sans);font-size:var(--t-xs);line-height:1.5;
  color:#7a8aa3}

/* miga clara de la ficha: la banda azul vacía sobre el producto no aportaba nada */
.miga-clara{border-bottom:1px solid var(--linea);background:var(--gris-2);
  padding:calc(clamp(96px,11vh,120px)) 0 14px;font-family:var(--sans);font-size:var(--t-sm);
  color:var(--tinta-2)}
.miga-clara a{color:var(--azul);text-decoration:none}
.miga-clara a:hover{text-decoration:underline}
.miga-clara span{color:var(--linea-fuerte);margin:0 4px}

.panel--foto{padding:0;overflow:hidden;background:var(--gris)}
.panel--foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* ==========================================================================
   TERCERA VUELTA — el sitio se ordena como TRADING COMPANY DE PRODUCTOS
   Referencia del rubro: el producto va primero (categorías con foto y
   destacados), la empresa y el servicio van después.
   ========================================================================== */

/* ---------------------------------------------- hero de producto */
.hero--prod{padding:clamp(126px,15vh,176px) 0 clamp(44px,5vw,68px)}
.hero--prod .hero__in{grid-template-columns:1fr;gap:0}
.hero--prod h1{max-width:22ch}
.hero--prod .hero__p{max-width:62ch}
.hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__buscar{margin-top:26px;max-width:620px;position:relative}
.hero__buscar input{width:100%;font-family:var(--sans);font-size:var(--t-base);padding:18px 18px 18px 50px;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--radio-s);background:rgba(255,255,255,.12);
  color:#fff;backdrop-filter:blur(6px)}
.hero__buscar input::placeholder{color:#a9c6e4}
/* idem el buscador del catalogo: anillo propio, no `outline:none`. Es el primer
   campo del sitio y el que abre el flujo de cotizacion. */
.hero__buscar input:focus{outline:3px solid var(--naranja);outline-offset:3px;
  border-color:var(--naranja);background:rgba(255,255,255,.18)}
.hero__buscar svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:19px;
  height:19px;color:#a9c6e4;pointer-events:none}
.hero__tira{display:flex;flex-wrap:wrap;gap:22px 38px;margin-top:34px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22)}
.hero__tira div{display:flex;align-items:baseline;gap:9px;font-family:var(--sans)}
.hero__tira b{font-size:var(--t-lg);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.hero__tira span{font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#93b7dc}

/* ---------------------------------------------- categorías con foto */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;display:block;border-radius:var(--radio);overflow:hidden;
  text-decoration:none;color:#fff;background:var(--azul-900);aspect-ratio:4/3;
  transition:transform .28s var(--ease),box-shadow .28s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
/* la foto es de estudio y limpia: el velo solo se necesita abajo, donde va el
   texto. Apagar la imagen entera dejaba los productos en un azul plano. */
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
  transition:transform .5s var(--ease)}
.cat:hover img{transform:scale(1.04)}
.cat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,22,45,.97) 0%,rgba(0,22,45,.88) 26%,
             rgba(0,26,52,.3) 54%,rgba(0,26,52,0) 76%)}
.cat__txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 20px}
.cat__txt h3{font-size:var(--t-base);line-height:1.25;color:#fff}
.cat__txt p{margin-top:6px;font-family:var(--sans);font-size:var(--t-xs);color:#c5dcf3;
  display:flex;align-items:center;gap:8px}
.cat__txt b{font-variant-numeric:tabular-nums;color:var(--naranja)}
.cat--ancha{grid-column:span 2;aspect-ratio:8/3}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}
  .cat--ancha{grid-column:span 2;aspect-ratio:16/7}}
@media(max-width:560px){.cats{grid-template-columns:1fr}
  .cat,.cat--ancha{aspect-ratio:16/9;grid-column:auto}}

/* ---------------------------------------------- por qué elegirnos */
/* La numeración tabular ya es la firma tipográfica declarada en tokens.css
   («filetes finos, numeración tabular, etiquetas en versalitas»); acá se lleva
   al tamaño real en vez de vivir como una etiqueta de 12px que nadie mira. La
   cifra queda de fondo, fuera del flujo de lectura (h3/p pasan por encima),
   así que sigue siendo un «01» de manifiesto y no un elemento decorativo nuevo. */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.why__c{position:relative;background:#fff;padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;gap:11px;overflow:hidden}
.why__c b{position:absolute;top:2px;right:14px;z-index:0;
  font-family:var(--sans);font-size:clamp(3.4rem,6.5vw,4.6rem);font-weight:700;line-height:1;
  color:var(--gris-2);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  -webkit-text-stroke:1px var(--linea)}
.why__c h3{position:relative;z-index:1;font-size:var(--t-base);max-width:20ch}
.why__c p{position:relative;z-index:1;font-size:var(--t-base);line-height:1.62;color:var(--tinta-2)}
@media(max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.why{grid-template-columns:1fr}.why__c b{font-size:2.8rem}}

/* ---------------------------------------------- perfil de empresa con cifras */
.perfil{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.perfil__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radio);box-shadow:var(--sombra-s)}
.perfil__cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:26px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.perfil__cifras div{background:#fff;padding:18px 20px}
.perfil__cifras b{display:block;font-family:var(--sans);font-size:var(--t-lg);font-weight:700;
  line-height:1;color:var(--azul);font-variant-numeric:tabular-nums}
.perfil__cifras span{display:block;margin-top:6px;font-family:var(--sans);font-size:var(--t-xs);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
@media(max-width:860px){.perfil{grid-template-columns:1fr}}

/* ---------------------------------------------- banda OEM */
.oem{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.oem__marcas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.oem__marcas div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radio-s);padding:17px 13px;text-align:center;font-family:var(--sans);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#dce9f7}
@media(max-width:860px){.oem{grid-template-columns:1fr}}

/* categorías dentro del cajón móvil: el mega-menú no existe en pantalla chica,
   así que las 7 familias entran acá, indentadas bajo Productos */
/* las categorías son SUB-items: filas livianas con hairline, no tarjetas. Antes
   pesaban más que «Empresa» o «Contacto», que son la navegación principal. */
.cajon nav a.cajon__sub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:var(--t-sm);font-weight:500;padding:8px 14px 8px 24px;background:transparent;
  border:0;border-bottom:1px solid var(--linea);border-radius:0;color:#33445e}
.cajon nav a.cajon__sub:hover{background:var(--gris-2)}
.cajon nav a.cajon__sub i{font-style:normal;font-size:var(--t-xs);color:#7a8aa3;
  font-variant-numeric:tabular-nums}
.cajon nav a.cajon__sub:first-of-type{margin-top:2px;border-top:1px solid var(--linea)}

/* novedades: fila compacta. Dos grillas de tarjetas seguidas se leían como la
   misma sección repetida; el rubro presenta las novedades como lista. */
.nuevos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nuevo{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);text-decoration:none;color:inherit;
  transition:border-color .2s,box-shadow .25s,transform .25s var(--ease)}
.nuevo:hover{border-color:var(--azul-2);box-shadow:var(--sombra-s);transform:translateY(-2px)}
.nuevo img{width:64px;height:64px;flex:none;object-fit:contain;background:var(--gris);
  border-radius:var(--radio-s);padding:5px;mix-blend-mode:multiply}
.nuevo__txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.nuevo__txt b{font-family:var(--serif);font-size:var(--t-base);font-weight:700;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nuevo__txt i{font-style:normal;font-family:var(--sans);font-size:var(--t-xs);color:var(--tinta-2);
  font-variant-numeric:tabular-nums}
@media(max-width:1000px){.nuevos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nuevos{grid-template-columns:1fr}}

/* fichas operativas del pie: puertos e incoterms. La columna «Empresa» tenía tres
   enlaces y mucho aire; esto es lo que un importador escanea antes de escribir. */
.pie__ficha{margin-top:20px;font-family:var(--sans)}
.pie__ficha span{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#7fa8d6}
.pie__ficha b{display:block;margin-top:5px;font-size:var(--t-sm);font-weight:500;color:#dbe9f7}
.pie__fams-todo{margin-top:4px;padding-top:11px;border-top:1px solid rgba(255,255,255,.16)}
.pie__fams-todo a{font-weight:600;color:#fff}

/* fecha de vigencia de los textos legales */
.prosa__fecha{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;
  color:var(--tinta-2);margin-bottom:26px;padding-bottom:14px;
  border-bottom:1px solid var(--linea)}

/* --- segundo momento a sangre: el perfil parte el marco por la izquierda -------
   El bosque marcó que TODO el home vivía en un único ancho de 1180px. La banda de
   estiba rompe ese ancho con dato; acá lo rompe la fotografía: la imagen de la
   operación se sale de la retícula y llega al borde de la pantalla, mientras el
   texto se queda en su columna. Dos gestos distintos, no el mismo repetido. */
@media(min-width:1000px){
  .seccion--tecnica .perfil__media{
    width:calc(100% + max(22px, calc(50vw - var(--ancho)/2)));
    margin-left:calc(-1 * max(22px, calc(50vw - var(--ancho)/2)));
    border-radius:0 var(--radio) var(--radio) 0;overflow:hidden}
  .seccion--tecnica .perfil__media img{border-radius:0;aspect-ratio:4/3.2}
}

/* --- telefonos angostos: el header tiene que entrar con la lista de cotizacion ------
   Con marca + idioma + lista + hamburguesa, a 320px el contenido pedia 388px y la
   hamburguesa se salia 68px fuera de la barra. En pantallas angostas el selector de
   idioma se reduce a su codigo (EN / ES / 中): sigue siendo visible y accesible —el
   aria-label completo no cambia— y devuelve los 40px que faltaban. */
@media(max-width:440px){
  .cabecera{gap:10px}
  .lang__trigger{padding:10px 9px}
  .lang__trigger span{display:none}
  .lang__trigger::before{content:attr(data-corto);font-weight:700;letter-spacing:.04em}
}
/* A 320px (el telefono mas angosto que todavia se usa) los cuatro elementos siguen sin
   entrar con el margen de 22px por lado. Se recorta el margen del HEADER —solo el del
   header, el cuerpo conserva el suyo— en vez de sacar contenido de la barra.
   (El rotulo de la lista ya se oculta por la regla de 1120px de mas arriba.) */
@media(max-width:365px){
  .cabecera{gap:8px;width:min(var(--ancho),100% - 24px)}
}

/* Hallmark · component: nav · genre: modern-minimal · archetype: N13 inline search pill
 * states: default · hover · focus · active · disabled · loading · error · vacio
 * knobs: placement=right-of-brand · groups=grouped · hints=shown · trigger=pill+Ctrl/Cmd-K
 * previous nav: N1b (SaaS three-section) — rota, no repite
 * contrast: pass · gate 49 (dos lineas): pass en 3 idiomas x 6 anchos
 */
/* =======================================================================
   BUSCADOR DEL HEADER — N13 · pill inline + panel
   -----------------------------------------------------------------------
   Hallmark · component: nav · genre: modern-minimal · archetype: N13
   states: default · hover · focus · active · disabled · loading · error · vacío
   -----------------------------------------------------------------------
   Por qué existe: el shop tiene 147 referencias en 486 páginas y el buscador
   vivía solo en el home y en el catálogo. Desde una ficha de producto no se
   podía buscar sin volver atrás. El pill lo pone en las 486.
   El pill NO se mueve con el puntero (regla dura de la casa): reacciona con
   borde y fondo, nunca con transform.
   ======================================================================= */
.buscapill{display:flex;align-items:center;gap:9px;min-height:40px;
  margin-left:18px;padding:0 10px 0 12px;
  font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta-2);
  background:var(--gris-2);border:1px solid var(--linea);border-radius:var(--radio-pill);
  cursor:pointer;transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.buscapill svg{width:15px;height:15px;flex:none;color:var(--azul-2)}
.buscapill__txt{white-space:nowrap}
.buscapill__kbd{display:flex;gap:3px;margin-left:4px}
.buscapill kbd{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;
  color:var(--tinta-2);background:#fff;border:1px solid var(--linea);
  border-bottom-width:2px;border-radius:4px;padding:3px 5px}
/* 1 default · 2 hover · 3 focus · 4 active */
.buscapill:hover,.buscapill.is-hover{background:#fff;border-color:var(--linea-fuerte)}
.buscapill:focus-visible,.buscapill.is-focus{outline:2px solid var(--azul);outline-offset:3px}
.buscapill:active,.buscapill.is-active{background:var(--gris)}
/* 5 disabled · 6 loading · 7 error · 8 vacío (los tres últimos viven en el panel) */
.buscapill[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:1360px){.buscapill__kbd{display:none}}
@media(max-width:1240px){.buscapill__txt{display:none}
  .buscapill{padding:0;width:40px;justify-content:center;margin-left:12px}}
@media(max-width:900px){.buscapill{display:none}}   /* en móvil vive dentro del cajón */
/* ...y ahí se muestra a ancho completo, arriba de la navegación: es lo primero que
   alcanza el pulgar cuando se abre el menú. */
.buscapill--cajon{display:flex;width:100%;margin:0 0 14px;padding:0 14px;min-height:46px}
@media(max-width:900px){.buscapill--cajon{display:flex}}
@media(min-width:901px){.buscapill--cajon{display:none}}

/* ------------------------------------------------------------- el panel */
.busca{position:fixed;inset:0;z-index:700;display:grid;place-items:start center;
  padding-top:12vh;opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease),visibility .2s var(--ease)}
.busca[data-abierto="true"]{opacity:1;visibility:visible}
.busca__fondo{position:absolute;inset:0;background:rgba(0,32,64,.42)}
.busca__panel{position:relative;width:min(620px,calc(100vw - 32px));max-height:74vh;
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);
  border-top:3px solid var(--naranja);box-shadow:var(--sombra-alta);
  transform:translateY(-8px);transition:transform .22s var(--ease)}
.busca[data-abierto="true"] .busca__panel{transform:translateY(0)}
.busca__campo{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;
  border-bottom:1px solid var(--linea)}
.busca__campo svg{width:18px;height:18px;flex:none;color:var(--azul-2)}
.busca__campo input{flex:1;min-width:0;font-family:var(--sans);font-size:var(--t-md);
  color:var(--tinta);border:0;background:none;padding:0}
.busca__campo input:focus{outline:none}   /* el foco lo lleva el panel entero */
.busca__campo input::-webkit-search-cancel-button,
.busca__campo input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.busca__campo kbd{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--tinta-2);
  background:var(--gris-2);border:1px solid var(--linea);border-radius:4px;padding:3px 6px}
.busca__lista{overflow-y:auto;overscroll-behavior:contain;padding:6px}
.busca__grupo{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul-2);
  padding:12px 10px 6px;font-variant-numeric:tabular-nums}
.busca__item{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  padding:10px;border:0;background:none;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:var(--t-sm);color:var(--tinta)}
.busca__item b{font-weight:600}
.busca__item i{font-style:normal;margin-left:auto;padding-left:12px;color:var(--tinta-2);
  font-size:var(--t-xs);white-space:nowrap;font-variant-numeric:tabular-nums}
.busca__item:hover,.busca__item[aria-selected="true"]{background:var(--gris-2)}
.busca__item[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--naranja)}
/* estados 6-8 del componente */
.busca__estado{padding:26px 16px;font-family:var(--sans);font-size:var(--t-sm);
  color:var(--tinta-2);text-align:center}
.busca__estado b{display:block;color:var(--tinta);font-size:var(--t-base);margin-bottom:4px}
.busca__pie{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--linea);
  font-family:var(--sans);font-size:var(--t-xs);color:var(--tinta-2);background:var(--gris-2)}
.busca__pie kbd{font-family:var(--sans);font-weight:600;background:#fff;
  border:1px solid var(--linea);border-radius:4px;padding:2px 5px;margin-right:3px}
@media(max-width:640px){
  .busca{padding-top:0}
  .busca__panel{width:100vw;max-height:100vh;height:100%;border:0;border-top:3px solid var(--naranja)}
  .busca__pie{display:none}            /* no hay teclado físico que anunciar */
}
@media (prefers-reduced-motion: reduce){
  .busca,.busca__panel{transition-duration:.001ms}
  .busca__panel{transform:none}
}