:root{
  /* Paleta del look & feel Sept 2022 — sampleada del isologo y el PDF */
  --navy:#092347;
  --navy-90:#0d3459;
  --navy-80:#12507a;
  --azul:#0f5a83;
  --celeste:#25bbee;
  --celeste-dark:#0e9bd3;
  --celeste-txt:#0a6d94;   /* texto sobre fondo ya teñido: contraste ≥4.5 */
  --celeste-pale:#e3f6fd;
  --dorado:#e8b121;
  --rojo-ambro:#a01920;   /* sampleado del logo Ambro del manual */
  --bone:#eef0f1;
  --line:#e0e4e6;
  --white:#fff;
  --fondo:#f5f5f7;   /* gris de página (Apple) */
  --gray:#4d5a63;
  /* Sistema tipográfico: Helvetica Neue (nativa en Apple; Inter como fallback web) */
  --disp:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --mono:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
  --wordmark:'Archivo Black','Inter',sans-serif;
  /* Lenguaje redondeado + degradado profundo de campaña: tinta → celeste luminoso */
  --r:16px;
  --r-sm:10px;
  /* Escala de espacio en múltiplos de 4. Todo el aire del sitio sale de acá:
     si un número no está en esta lista, está mal puesto. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* Curvas: entrada que desacelera (Apple), y la del look & feel para texto */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-brand:cubic-bezier(.625,.05,0,1);
  --grad-dark:linear-gradient(128deg,#0b1233 0%,#0c2c55 36%,#0f6296 70%,#2eb0e6 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--navy);background:var(--fondo);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}


/* ══ PLACEHOLDERS ══ */
.ph{position:relative;background:#e8edf1;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
/* Sin tramas diagonales: el placeholder es un plano liso y nada más. */
/* Sin triángulo de marca de agua: el placeholder no decora, solo reserva. */
.ph>span{position:relative;z-index:5;font-family:var(--body);font-size:9.5px;color:#5b7183;background:rgba(255,255,255,.82);padding:4px 8px;margin:8px;border-radius:2px;line-height:1.35;max-width:calc(100% - 16px)}
.ph.dark{background:var(--navy-90)}
.ph.dark>span{background:rgba(4,26,45,.75);color:#8fb2c8}
.ph.round{border-radius:50%}
.ph.round>span{margin:0 auto 10px}

/* ══ UTILIDADES ══ */
/* Los fondos van de borde a borde; el CONTENIDO respira dentro de un ancho
   cómodo y centrado. Sin caja el ojo pierde el renglón y los filtros se
   pegaban al vidrio. */
.wrap{max-width:1760px;width:100%;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
/* Distancia REAL del borde de la pantalla al texto del .wrap, en unidades de
   viewport. No sirve calc(50vw - 50%) para scroll-padding: ahi el % se resuelve
   contra el scrollport (pantalla completa), no contra el contenedor, y da 0. */
:root{--inset:calc(max(0px, (100vw - 1760px) / 2) + clamp(20px,5vw,80px))}
.wrap-tx{max-width:1180px;margin-left:auto;margin-right:auto}
/* .notch queda como alias legado: el lenguaje de marca es redondeado, no facetado */
.notch{border-radius:var(--r);overflow:hidden}
/* Antetítulo: texto y nada más. Sin marcadores, sin caja alta, sin espaciado.
   Va SOLO donde aporta contexto, no arriba de cada título. */
.kicker{font-size:16.5px;font-weight:500;color:var(--celeste);margin-bottom:var(--s3)}
.kicker.on-dark{color:#7fd4f5}
/* h3.sec también: es el sub-encabezado de sección ("Cuatro marcas…") y sin
   esta regla salía con el interletrado por defecto, más abierto que el resto. */
h1.sec,h2.sec,h3.sec{font-family:var(--disp);font-size:clamp(28px,3vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.035em;max-width:24ch}
.sec-sub{font-size:16px;color:var(--gray);max-width:58ch;margin-top:var(--s4);line-height:1.62}
.on-dark .sec-sub,.dark-card .sec-sub,.hero .sec-sub{color:#b6cfe0}
section{padding:clamp(72px,8vw,128px) 0}

/* Botón: altura fija, texto ópticamente centrado, y una respuesta física —
   se levanta y crece apenas al pasar, y se hunde al apretar. */
/* ══ BOTÓN "FLOW" ══
   Del componente pedido por el dueño: pastilla que al pasar se vuelve
   rectángulo redondeado mientras un círculo crece desde el centro y lo llena;
   la flecha de la derecha se va y otra entra por la izquierda, y el texto se
   corre acompañando. Al apretar, baja a 0.95.
   Cada variante define con qué color se llena (--fill) y de qué color queda
   el texto encima (--fill-txt). */
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1;letter-spacing:-.01em;
  height:48px;padding:0 var(--s6);border-radius:100px;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  --fill:var(--navy); --fill-txt:#fff;
  transition:border-radius .6s cubic-bezier(.23,1,.32,1),
             border-color .6s cubic-bezier(.23,1,.32,1),
             color .6s cubic-bezier(.23,1,.32,1),
             background-color .6s cubic-bezier(.23,1,.32,1),
             transform .6s cubic-bezier(.23,1,.32,1)}
.btn:hover{border-radius:12px;border-color:transparent;color:var(--fill-txt)}
.btn:active{transform:scale(.95);transition-duration:.18s}

/* el círculo que lo llena */
.btn::before{content:"";position:absolute;top:50%;left:50%;z-index:-1;
  width:16px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--fill);opacity:0;
  transition:width .8s cubic-bezier(.19,1,.22,1),opacity .8s cubic-bezier(.19,1,.22,1)}
/* en % para que SIEMPRE cubra, mida lo que mida el botón */
.btn:hover::before{width:max(340px,260%);opacity:1}

/* las dos flechas: la de la derecha sale, la de la izquierda entra */
.btn .fb-ar{position:absolute;top:50%;margin-top:-8px;width:16px;height:16px;
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:left .8s cubic-bezier(.34,1.56,.64,1),right .8s cubic-bezier(.34,1.56,.64,1),
             color .6s var(--ease-out)}
.btn .fb-ar.izq{left:-25%}
.btn .fb-ar.der{right:16px}
.btn:hover .fb-ar{color:var(--fill-txt)}
.btn:hover .fb-ar.izq{left:16px}
.btn:hover .fb-ar.der{right:-25%}

/* el texto acompaña el gesto */
.btn .fb-t{position:relative;transform:translateX(-12px);
  transition:transform .8s var(--ease-out)}
.btn:hover .fb-t{transform:translateX(12px)}
/* sin flechas (JS no corrió), el texto queda centrado y el botón igual funciona */
.btn:not(:has(.fb-ar)) .fb-t{transform:none}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn .fb-ar,.btn .fb-t{transition:none}
  .btn .fb-t{transform:none}
}

/* Colores: con qué se llena cada variante y cómo queda el texto encima */
.btn-pri{background:var(--celeste);color:#fff;--fill:var(--navy)}
.btn-gold{background:#fff;color:var(--navy);--fill:var(--navy)}
.btn-out{border-color:rgba(255,255,255,.45);color:#fff;--fill:#fff;--fill-txt:var(--navy)}
/* Sobre claro hay que darlo vuelta o no se ve */
.busq .btn-out{border-color:#c8d2da;color:var(--navy);--fill:var(--navy);--fill-txt:#fff}
.btn-dark{border-color:var(--navy);color:var(--navy);--fill:var(--navy)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy);--fill:var(--celeste)}
.btn-wa{background:var(--celeste);color:#fff;--fill:var(--navy)}
.btn-sm{height:44px;padding:0 var(--s5);font-size:14px}
/* Grupo de botones: siempre el mismo aire */
.acts,.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* ══ HEADER — claro, liviano, sin peso visual ══ */
.util{background:#f3f5f6;color:var(--gray);font-size:13px;border-bottom:1px solid var(--line)}
.util .wrap{display:flex;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.util b{color:var(--navy);font-weight:600}
header.site{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:var(--s6);padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo .iso{display:block;height:42px;width:auto}
.logo .iso-dark{display:none}
/* Menú liviano: sin subrayados ni bordes. Texto chico, jerarquía por opacidad,
   y una pastilla suave que aparece al pasar. */
nav.main{display:flex;gap:var(--s2);margin-left:auto}
nav.main a{font-family:var(--disp);font-size:14px;font-weight:400;letter-spacing:-.005em;
  color:var(--navy);opacity:.68;padding:10px 16px;border-radius:50px;white-space:nowrap;
  transition:opacity .45s var(--ease-out),background-color .45s var(--ease-out)}
nav.main a:hover{opacity:1;background:rgba(9,35,71,.06)}
nav.main a.act{opacity:1;font-weight:600}
/* Entre ~1080 y 1500 los siete ítems NO entran a tamaño natural y el header
   empujaba la página entera de costado (122 px de barra horizontal en un
   portátil de 1280). Se aprieta el padding de cada ítem y el aire entre los
   bloques del header; el cuerpo de letra NO se toca: 14 px es el piso del
   sitio y el público tiene 40-65 años. */
@media (max-width:1520px){
  header.site .wrap{gap:var(--s5)}
  nav.main a{padding:10px 11px}
}
@media (max-width:1300px){
  header.site .wrap{gap:var(--s4);padding-left:24px;padding-right:24px}
  nav.main{gap:0}
  nav.main a{padding:10px 8px}
}
.hd-cta{display:flex;gap:var(--s2);align-items:center}
.icon-btn{width:46px;height:46px;border:none;border-radius:50%;display:grid;place-items:center;
  color:var(--navy);opacity:.78;background:transparent;cursor:pointer;
  transition:opacity .45s var(--ease-out),background-color .45s var(--ease-out)}
.icon-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.icon-btn:hover{opacity:1;background:rgba(9,35,71,.055)}
/* En footer (fondo oscuro) el lockup va con el wordmark en blanco */
footer .logo .iso{display:none}
footer .logo .iso-dark{display:block;height:40px;width:auto}

/* ── Header sobre el hero (páginas con foto arriba) ──
   La foto ocupa también la franja del menú. El header queda fijo y
   transparente encima, y recién al bajar se vuelve la barra blanca. */
body.hero-top .util{position:absolute;top:0;left:0;right:0;z-index:81;
  background:transparent;border-bottom-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}
body.hero-top .util b{color:var(--dorado)}
body.hero-top header.site{position:fixed;top:0;left:0;right:0;
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;margin-top:0;
  transition:background-color .6s var(--ease-out),margin-top .6s var(--ease-out),
             border-color .6s var(--ease-out),backdrop-filter .6s var(--ease-out)}
body.hero-top header.site nav.main a,
body.hero-top header.site .icon-btn{color:#fff}
body.hero-top header.site nav.main a:hover,
body.hero-top header.site .icon-btn:hover{background:rgba(255,255,255,.14)}
body.hero-top header.site .logo .iso{display:none}
body.hero-top header.site .logo .iso-dark{display:block;height:42px;width:auto}
/* Al bajar: vuelve la barra blanca de siempre */
body.hero-top header.site.solid{background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line)}
body.hero-top header.site.solid nav.main a,
body.hero-top header.site.solid .icon-btn{color:var(--navy)}
body.hero-top header.site.solid nav.main a:hover,
body.hero-top header.site.solid .icon-btn:hover{background:rgba(9,35,71,.055)}
body.hero-top header.site.solid .logo .iso{display:block}
body.hero-top header.site.solid .logo .iso-dark{display:none}
/* el hero arranca en el borde superior de la pantalla */
body.hero-top .hero .wrap{padding-top:clamp(160px,17vw,240px)}

/* ══ MENÚ DE MANO (≤900px) ══
   En el teléfono la navegación NO puede desaparecer. Antes los siete links se
   ocultaban y no se ponía nada en su lugar: desde el celular sólo se llegaba a
   lo que estuviera enlazado en el cuerpo de la página. Además el bloque de la
   derecha (buscador + Contacto) no entraba y empujaba 16 px de scroll lateral
   en todas las páginas.
   El botón mide 44×44 —el mínimo real de un dedo— y los links del panel 52 de
   alto: el público tiene 40-65 años y muchos lo van a usar parados en el
   obrador. */
.menu-btn{display:none;width:44px;height:44px;flex-shrink:0;margin-left:auto;
  align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;border-radius:50%;
  transition:background-color .4s var(--ease-out)}
.menu-btn:hover{background:rgba(9,35,71,.055)}
.mb-barras{display:block;width:22px;height:14px;position:relative}
.mb-barras i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--navy);
  transition:transform .45s var(--ease-brand),opacity .3s var(--ease-out)}
.mb-barras i:first-child{top:0}
.mb-barras i:last-child{bottom:0}
.menu-btn[aria-expanded="true"] .mb-barras i:first-child{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb-barras i:last-child{transform:translateY(-6px) rotate(-45deg)}
body.hero-top header.site:not(.solid) .mb-barras i{background:#fff}

.menu-movil{position:fixed;left:0;right:0;top:0;bottom:0;z-index:95;
  display:flex;flex-direction:column;gap:var(--s5);
  padding:calc(var(--alto-header,68px) + var(--s5)) 20px calc(var(--s6) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.menu-movil.abierto{opacity:1;transform:none;pointer-events:auto}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu-movil{background:#fff}
}
.mm-links{display:flex;flex-direction:column}
.mm-links a{display:flex;align-items:center;min-height:52px;
  font-family:var(--disp);font-size:19px;font-weight:500;letter-spacing:-.022em;
  color:var(--navy);border-bottom:1px solid var(--line);
  transition:color .35s var(--ease-out)}
.mm-links a:active{color:var(--celeste-dark)}
.mm-links a.act{color:var(--celeste-dark)}
.mm-buscar{display:flex;align-items:center;gap:var(--s3);
  background:rgba(9,35,71,.055);border-radius:50px;padding:0 18px;height:50px}
.mm-buscar svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--gray);
  stroke-width:1.9;stroke-linecap:round}
.mm-buscar input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-family:var(--body);font-size:16px;color:var(--navy)}
.mm-pie{display:flex;flex-direction:column;gap:var(--s4);margin-top:auto}
.mm-pie .btn{width:100%}
.mm-tel{text-align:center;font-size:16px;color:var(--gray)}
body.menu-abierto{overflow:hidden}
/* Con el menú abierto, los flotantes de Busquetti y WhatsApp se van: quedaban
   encima del panel tapando los últimos links. */
body.menu-abierto .floats{opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-out)}

/* MISMO punto de corte que el que oculta nav.main (1180): si la nav se va a
   los 1180 y la hamburguesa aparece a los 900, entre medio —tablet apaisada,
   laptop chica— no hay ninguna navegación. Pasó. */
@media (max-width:1180px){
  .menu-btn{display:flex}
  header.site nav.main,header.site .hd-cta{display:none}
  header.site .wrap{gap:var(--s4)}
}
@media (min-width:1181px){
  .menu-movil{display:none}
}

/* El título de la historia va adentro de lo que se clava: compacto, así el
   riel y él entran juntos en la pantalla. */
/* Mismo tamaño que todos los títulos (.grande) y AIRE hasta el riel: el
   bloque va centrado en la pantalla, así que un título más alto y un margen
   más generoso lo suben solos. */
/* .sec-head.tiempo-cab y no .tiempo-cab a secas: con la misma especificidad
   que .sec-head, el margin-bottom genérico (definido más abajo) lo pisaba y el
   título quedaba pegado al riel. */
.sec-head.tiempo-cab{margin:0 auto clamp(56px,9vh,104px);padding:0 20px}
.sec-head.tiempo-cab .kicker{margin-bottom:var(--s3)}
@media (max-width:900px){.tiempo-cab{margin-top:var(--s5)}}

/* ══ HERO ══ */
/* El hero llega hasta el pie de la pantalla */
.hero{position:relative;background:var(--grad-dark);overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
/* Marca de agua: acompaña, no compite con la foto */
.hero .a-mark{position:absolute;right:5%;bottom:-8%;width:min(30vw,400px);height:auto;z-index:2;opacity:.45;pointer-events:none}
/* Parallax: la foto se extiende por debajo para poder moverse más lento que
   la página sin dejar borde a la vista. Lo mueve main.js. */
.hero .media{position:absolute;top:-12%;left:0;right:0;height:124%;will-change:transform}
.hero .media .ph{width:100%;height:100%}
/* el contenido se aleja y se desvanece al bajar */
.hero .wrap{will-change:transform,opacity}
/* Velo NEUTRO, no azul: oscurece para que se lea el texto pero deja los
   colores reales de la foto. Un tinte de color sobre una foto la ensucia. */
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(6,10,16,.86) 0%,rgba(6,10,16,.62) 38%,rgba(6,10,16,.18) 66%,rgba(6,10,16,.05) 100%),
  linear-gradient(180deg,rgba(6,10,16,.55) 0%,transparent 26%)}
.hero .wrap{position:relative;z-index:3;padding-top:clamp(110px,13vw,180px);padding-bottom:clamp(90px,11vw,150px)}
/* El titular del banner mide LO MISMO sea h1 o h2. El primer banner lleva h1
   y el resto h2 por el SEO, no porque tengan que verse distintos: si cada uno
   trae su tamaño, el carrusel salta de banner a banner. */
.hero h1,.hero .hero-t{font-family:var(--disp);font-weight:600;
  font-size:clamp(40px,5.4vw,76px);line-height:1.02;letter-spacing:-.042em;
  color:#fff;max-width:15ch}
.hero h1 span:not(.su-w):not(.su-i),
.hero .hero-t span:not(.su-w):not(.su-i){color:var(--dorado)}
.hero p{color:#c3d9e8;font-size:18px;line-height:1.6;max-width:46ch;margin-top:var(--s5)}
.hero .acts{margin-top:var(--s7)}
/* ══ HERO — CARRUSEL DE BANNERS ══
   El hero pasó a ser un carrusel: el cliente carga los banners que quiera y
   se turnan solos. Con UNO solo tiene que verse exactamente igual que antes
   —el JS esconde los controles— porque va a haber épocas de un banner y
   épocas de tres.
   La transición es un fundido con un zoom lentísimo, no un empujón lateral:
   el sitio no tiene un solo movimiento brusco y este no va a ser el primero.
   Los controles son grandes y visibles SIEMPRE, no aparecen al pasar el
   mouse: el público tiene 40-65 años y muchos entran desde el celular. */
.hero-slides{position:relative;flex:1 1 auto;display:grid}
/* todos los banners ocupan la misma celda de la grilla: se pisan y se funden */
/* CRUCE SIN BAJÓN. El banner que entra se funde POR ARRIBA y el que sale se
   queda opaco abajo hasta que el nuevo lo tapó del todo. Si los dos se
   fundieran a la vez, a mitad de camino los dos estarían al 50% y se vería el
   fondo negro por atrás: ese pestañeo era lo que se sentía como un corte.
   La curva es simétrica (entra y sale igual de suave), no la del sitio: la
   del sitio arranca de golpe y frena, que para una opacidad se lee como que
   el banner aparece de un saque. */
.hero-slide{grid-area:1 / 1;position:relative;display:flex;flex-direction:column;
  justify-content:center;z-index:1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.8s cubic-bezier(.37,0,.63,1),visibility 0s linear 1.8s}
.hero-slide.on{opacity:1;visibility:visible;pointer-events:auto;z-index:3;
  transition:opacity 1.8s cubic-bezier(.37,0,.63,1),visibility 0s}
/* el que se va: quieto y entero, abajo del que entra */
.hero-slide.saliendo{opacity:1;visibility:visible;z-index:2;transition:none}
/* El zoom lento va sobre la FOTO, no sobre .media: main.js le pone a .media
   un transform inline para el parallax y le pisaría el zoom. Cada uno con su
   capa y los dos se componen. */
.hero-slide .media .ph-img{transform:scale(1.07);transition:transform 9s linear}
.hero-slide.on .media .ph-img{transform:scale(1)}

/* Controles: flechas a los costados y una fila de barritas abajo. La barrita
   activa se llena con el tiempo que falta para el próximo banner, así se
   entiende que rota solo sin tener que esperar a ver si se mueve. */
.hero-ctrl{position:absolute;z-index:6;left:0;right:0;bottom:clamp(20px,3.5vh,40px);
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  padding-inline:clamp(20px,5vw,80px)}
.hero-flecha{width:52px;height:52px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  transition:background .4s var(--ease-out),transform .4s var(--ease-out)}
.hero-flecha:hover{background:rgba(255,255,255,.26)}
.hero-flecha:active{transform:scale(.94)}
.hero-flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-pips{display:flex;align-items:center;gap:var(--s3)}
/* el botón es grande (44px de alto) aunque la barrita se vea finita: el dedo
   necesita blanco donde tocar, no una línea de 3 px */
.hero-pip{width:52px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;align-items:center}
.hero-pip i{display:block;height:3px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.32)}
.hero-pip i::after{content:"";display:block;height:100%;width:0;border-radius:3px;
  background:#fff}
.hero-pip.on i::after{width:100%;transition:width var(--paso,7s) linear}
.hero-pip.on.quieto i::after{width:100%;transition:none}
@media (max-width:640px){
  .hero-flecha{display:none}      /* en el celular se pasa tocando las barritas */
  /* pegadas a la izquierda: centradas, la última barrita queda debajo del
     botón flotante de WhatsApp y no se puede tocar */
  .hero-ctrl{gap:var(--s2);justify-content:flex-start}
  .hero-pip{width:44px}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
  .hero-slide .media{transform:none;transition:none}
  .hero-pip.on i::after{width:100%;transition:none}
}

/* Los números salieron del hero: van sobre blanco, debajo de la foto. */
.hero-stats{background:var(--fondo)}
.hero-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);
  padding-top:var(--s8);padding-bottom:var(--s8);gap:0}
.hero-stats .st{padding:0 var(--s5);text-align:center}
.hero-stats .st + .st{border-left:1px solid #d3d9dd}
.hero-stats .st b{font-family:var(--disp);font-weight:300;font-size:clamp(40px,4.6vw,68px);
  color:var(--navy);display:block;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.hero-stats .st span{font-size:14.5px;color:var(--gray);margin-top:var(--s3);display:block}
@media (max-width:640px){.hero-stats .st{padding:0 var(--s3)}
  .hero-stats .st:nth-child(3){border-left:none}}

/* ══ CATEGORIAS ══ */
.cats{background:var(--fondo)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s7)}
/* Card oscura: la foto se funde en el cuerpo navy con un degradado.
   Patrón base de todas las tarjetas con foto de ambiente. */
.cat{position:relative;background:var(--navy);color:#fff;border-radius:var(--r);overflow:hidden;transition:all 0.45s var(--ease-out);display:block}
.cat:hover{transform:translateY(-4px)}
.cat .ph{height:230px;border-radius:var(--r) var(--r) 0 0;transition:transform 0.45s var(--ease-out)}
.cat:hover .ph{transform:scale(1.05)}
.cat .ph::after{display:none}
.cat .media{position:relative;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.cat .media::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:62%;z-index:3;pointer-events:none;background:linear-gradient(to top,var(--navy) 12%,rgba(9,35,71,.72) 46%,transparent 100%)}
.cat .bd{padding:0 var(--s5) var(--s5);margin-top:-42px;position:relative;z-index:4}
.cat h3{font-family:var(--disp);font-weight:600;font-size:17.5px;letter-spacing:-.015em;color:#fff}
.cat .n{font-size:13px;color:#9fc3da;margin-top:6px;display:block}
.cat .go{position:absolute;right:20px;bottom:22px;color:var(--dorado);font-size:19px;opacity:.9;transition:all 0.45s var(--ease-out)}
.cat:hover .go{opacity:1;transform:translateX(3px)}

/* ══ BANDA OSCURA ══ */
/* Bloque oscuro = TARJETA, nunca banda a sangre. Ver "Nada de banners de
   punta a punta" en CLAUDE.md. */
.dark-card{background:var(--grad-dark);color:#fff;position:relative;overflow:hidden;
  border-radius:clamp(22px,2.2vw,38px);padding:clamp(48px,5vw,80px) clamp(var(--s6),4vw,64px)}
.dark-card h2.sec{color:#fff}

/* ══ MÓDULO ÉPICO ══
   El equipo insignia no va dentro de una cajita blanca: va grande, recortado
   sobre el fondo oscuro, con una luz detrás que lo despega. La foto ocupa la
   mitad de la pantalla y se sale por abajo. */
/* ══ EL HORNO MÁS VENDIDO ══
   TARJETA, no banda a sangre: el sitio no usa banners de punta a punta.
   Composicion centrada de arriba hacia abajo — claim, nombre, maquina — y
   recien despues la info. Se lee como una ficha de producto de Apple: primero
   te enamoras del fierro, despues leas los numeros. */
.epic-sec{background:var(--fondo);padding-bottom:0}
.epic{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  border-radius:clamp(22px,2.2vw,38px);background:var(--grad-dark);color:#fff;
  padding:clamp(var(--s7),5vw,80px) clamp(var(--s5),4vw,72px) clamp(var(--s7),5vw,76px)}


.epic-head{position:relative;z-index:3}
.epic-claim{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(16px,1.7vw,23px);color:rgba(219,233,243,.86);margin:0}
.epic-claim em{font-style:normal;font-weight:600;color:var(--dorado)}
.epic-nombre .nb{white-space:nowrap}
.epic-nombre{font-family:var(--disp);font-weight:600;letter-spacing:-.042em;text-wrap:balance;
  line-height:1.02;font-size:clamp(34px,5vw,76px);color:#fff;
  margin:clamp(var(--s3),1vw,var(--s4)) auto 0;max-width:24ch}

/* La maquina va POR DELANTE del pico y pisa la mitad de abajo de la tarjeta. */
.epic-foto{position:relative;z-index:2;margin-top:clamp(var(--s6),3vw,var(--s7))}
/* El pico es la A del isotipo Argental, en grande y casi negro. Va DENTRO del
   bloque de la foto para escalar con la maquina: colgado de la tarjeta, la
   base le tapaba la info de abajo. La punta asoma arriba del horno. */
.epic-pico{position:absolute;z-index:0;left:50%;bottom:-5%;transform:translateX(-50%);
  height:114%;width:auto;pointer-events:none}
/* Capa intermedia: el halo de luz. Va entre el pico y la máquina y viaja a
   media velocidad — es la que hace que se lean como planos separados. */
.epic-luz{position:absolute;z-index:1;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(78%,760px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(140,214,248,.30) 0%,rgba(46,176,230,.13) 44%,transparent 70%)}
.epic-foto img{position:relative;z-index:2;display:block;margin:0 auto;width:auto;max-width:100%;
  height:clamp(280px,40vh,480px);object-fit:contain;will-change:transform;
  filter:drop-shadow(0 46px 80px rgba(0,0,0,.55))}

/* La info: recien aca, despues de bajar. */
.epic-info{position:relative;z-index:2;margin-top:clamp(var(--s7),4vw,64px)}
.epic-lead{font-family:var(--disp);font-size:clamp(17px,1.5vw,21px);line-height:1.5;
  color:rgba(219,233,243,.82);max-width:46ch;margin:0 auto}

/* Tres datos, no ocho renglones: en un modulo que tiene que impactar, una
   lista larga reparte el peso y no queda nada grande. El numero manda. */
.epic-datos{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--s5),3vw,var(--s7));max-width:960px;
  margin:clamp(var(--s6),3vw,var(--s7)) auto 0}
.epic-datos b{display:block;font-weight:200;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(30px,3.5vw,54px);color:#fff;font-variant-numeric:tabular-nums}
.epic-datos span{display:block;margin-top:var(--s3);font-size:14px;line-height:1.45;
  color:rgba(219,233,243,.72);max-width:22ch;margin-left:auto;margin-right:auto}
.epic .btn-row{justify-content:center;margin-top:clamp(var(--s6),3vw,var(--s7))}

@media (max-width:1080px){
  .epic{padding:clamp(var(--s7),8vw,80px) var(--s5) clamp(var(--s7),8vw,80px)}
  .epic-foto img{height:clamp(260px,40vh,420px)}
}
@media (max-width:640px){
  .epic-datos{grid-template-columns:1fr;gap:var(--s6)}
  .epic-datos span{max-width:26ch}
  .epic .btn-row{flex-direction:column;align-items:stretch}
}

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(var(--s7),5vw,80px);align-items:center}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;margin-top:26px}
.reasons li{list-style:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;color:#dbe9f3}
/* sin viñetas decorativas: la regla inferior ya separa los ítems */

/* ══ BUSQUETTI ══
   Es un PRODUCTO aparte, no una franja del sitio: vive como módulo propio,
   con aire alrededor, sin tocar los bordes de la pantalla. */
/* ══ BUSQUETTI — vidrio esmerilado ══
   Jerarquía de tres capas, que es lo que hace que el vidrio se lea como
   vidrio: FONDO con forma y color → PANEL translúcido y borroso → CONTENIDO
   sólido encima. Si el contenido también es translúcido, todo se empasta. */
.busq-sec{position:relative;overflow:hidden;background:var(--fondo);isolation:isolate}
.busq-bg{position:absolute;top:clamp(72px,8vw,128px);bottom:clamp(72px,8vw,128px);
  left:var(--inset);right:var(--inset);z-index:0;pointer-events:none;
  overflow:hidden;border-radius:28px}
/* Lavados suaves de marca. Nada de manchas violetas al azar: celeste arriba a
   la izquierda, azul profundo abajo a la derecha. */
.busq-bg::before,.busq-bg::after{content:"";position:absolute;border-radius:50%}
.busq-bg::before{left:-14%;top:-34%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(37,187,238,.30),transparent 68%);
  animation:derivaA 26s ease-in-out infinite alternate}
.busq-bg::after{right:-16%;bottom:-40%;width:66%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(15,98,150,.22),transparent 70%);
  animation:derivaB 34s ease-in-out infinite alternate}
/* Tiempos distintos y primos entre sí: si coinciden se nota el bucle. */
@keyframes derivaA{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(26%,18%,0) scale(1.18)}}
@keyframes derivaB{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  100%{transform:translate3d(-22%,-14%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .busq-bg::before,.busq-bg::after{animation:none}
}
/* La A del isotipo, grande, atravesando el bloque */
.busq-a{position:absolute;right:0;bottom:2%;width:min(62%,900px);height:auto;
  will-change:transform}
.busq{--mx:76%; --my:14%;
  position:relative;z-index:1;overflow:hidden;color:var(--navy);border-radius:28px;
  padding:clamp(var(--s7),5vw,72px);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 20px 56px rgba(9,35,71,.11)}
/* Sin backdrop-filter (Firefox viejo, ahorro de datos) el panel quedaría
   transparente y el texto ilegible sobre los lavados: se cae a blanco casi
   sólido. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .busq{background:rgba(255,255,255,.94)}
}
/* Fondo tecnológico: trama de puntos que se desvanece + luz difusa.
   Textura, no adorno: sostiene sin pedir atención. */
.busq::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(9,35,71,.13) 1px,transparent 1px);
  background-size:22px 22px;
  transition:opacity .5s var(--ease-out)}
.busq-puntos{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(9,35,71,.20) 1.7px,transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(230px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 34%,transparent 70%);
  mask-image:radial-gradient(230px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 34%,transparent 70%)}
.busq::after{content:"";position:absolute;right:-6%;top:-28%;width:56%;aspect-ratio:1;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(46,176,230,.16),transparent 66%)}
/* Busquetti asomando por el borde: la figura entra desde abajo a la izquierda
   y el overflow del módulo la recorta. Va DETRÁS del contenido (z-index 1) y
   con pointer-events:none para no comerse los clicks del texto. */
.busq-figura{position:absolute;z-index:1;left:30%;bottom:0;
  height:min(97%,720px);width:auto;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
/* el texto vuelve a arrancar en el margen; se le pone tope para que no llegue
   nunca hasta la figura */
.busq-conFigura .busq-grid{grid-template-columns:.92fr 1.2fr;
  gap:clamp(var(--s6),13vw,210px)}
.busq-conFigura .busq-grid>div:first-child{padding-right:0}
.busq-conFigura .busq-grid>div:first-child .sec-sub{max-width:38ch}
@media (max-width:1080px){
  .busq-figura{display:none}
  .busq-conFigura .busq-grid{grid-template-columns:1fr}
  .busq-conFigura .busq-grid>div:first-child{padding-right:0}
}
.busq-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--s7),5vw,80px);align-items:center}
@media (max-width:1080px){
  .busq-grid{grid-template-columns:1fr;gap:var(--s7)}
  .busq{padding:clamp(var(--s6),6vw,var(--s7))}
}
.busq h2.sec{color:var(--navy);max-width:20ch;font-size:clamp(28px,2.9vw,42px);letter-spacing:-.038em;text-wrap:balance}
.busq .badge{display:inline-block;background:rgba(37,187,238,.10);
  border:1px solid rgba(37,187,238,.28);color:var(--celeste-txt);
  font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:50px;margin-bottom:var(--s4)}

/* ── La ventana de chat: que se lea como un chat de verdad ── */
.chat{background:#fff;border:1px solid rgba(255,255,255,.9);
  border-radius:20px;box-shadow:0 22px 50px rgba(9,35,71,.14);overflow:hidden}
.chat-hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  background:#fafbfc;border-bottom:1px solid var(--line)}
.chat-hd .av{position:relative;width:46px;height:46px;flex-shrink:0;border-radius:50%;
  overflow:hidden;background:#0f6296}
.chat-hd .av img{width:100%;height:100%;object-fit:cover}
.chat-hd .who{position:relative}
.chat-hd b{font-family:var(--disp);font-size:15.5px;font-weight:600;display:block;line-height:1.2}
.chat-hd small{font-size:13px;color:var(--gray);display:flex;align-items:center;gap:7px}
/* Señal de "en línea": pulso suave, no un puntito duro */
.chat-hd small i{font-style:normal;position:relative;width:8px;height:8px;border-radius:50%;
  background:#3ddc84;flex-shrink:0}
.chat-hd small i::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(61,220,132,.5);animation:pulso 3.2s var(--ease-out) infinite}
@keyframes pulso{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.chat-hd small i::after{animation:none;opacity:.5}}
/* Alto fijo: la ventana no crece mientras escribe, se va llenando de abajo
   hacia arriba como un chat de verdad. */
.chat-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  min-height:360px;justify-content:flex-end;overflow:hidden}
.msg{font-size:14.5px;line-height:1.5;padding:var(--s3) var(--s4);max-width:82%;position:relative}
.msg.u{background:var(--celeste);color:#fff;align-self:flex-end;
  border-radius:18px 18px 4px 18px}
.msg.b{background:#eef1f5;color:var(--navy);align-self:flex-start;
  border-radius:18px 18px 18px 4px}
.msg.b b{color:var(--celeste-txt);font-weight:600}
.msg time{display:block;font-size:11.5px;opacity:.55;margin-top:6px}
/* La conversación se escribe sola al entrar en pantalla: cada burbuja aparece
   en su turno. main.js le pone .on a cada [data-step]. */
.chat [data-step]{opacity:0;transform:translateY(6px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.chat [data-step].on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .chat [data-step]{opacity:1;transform:none;transition:none}
}
/* Escribiendo… */
.typing{align-self:flex-start;display:flex;gap:5px;background:#eef1f5;
  padding:14px var(--s4);border-radius:18px 18px 18px 4px}
.typing span{width:7px;height:7px;border-radius:50%;background:#8fa0ae;
  animation:typing 1.8s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.typing span{animation:none;opacity:.6}}
/* Barra de escritura: cierra la ilusión de app */
.chat-input{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  margin:0 var(--s5) var(--s5);border-radius:50px;
  background:#fff;border:1px solid var(--line)}
.chat-input span{flex:1;font-size:14px;color:var(--gray)}
.chat-input i{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--celeste);
  color:#fff;font-style:normal;font-size:15px;display:grid;place-items:center}

/* ══ BUSQUETTI INCRUSTADO (ficha de producto) ══
   El agente real de busquetti.argental.com.ar dentro de nuestro marco. */
.busq-vivo{align-items:center}
/* En la ficha va en UNA columna centrada: el chat es el protagonista, no un
   acompañante del texto. */
/* OJO: conserva .busq-grid, que es quien pone position:relative + z-index:2.
   Sin eso la trama de puntos del módulo queda POR ENCIMA del contenido. */
.busq-centrado{display:block;text-align:center}
.bc-head h2.sec{margin:var(--s3) auto 0;max-width:20ch}
/* El chat es el protagonista: va lo más ancho que permita el módulo */
.busq-centrado .busq-marco{max-width:1000px;margin:clamp(var(--s6),3.5vw,var(--s7)) auto 0;
  text-align:left}
.bc-pie{max-width:64ch;margin:clamp(var(--s6),3.5vw,var(--s7)) auto 0}
.bc-pie .sec-sub{margin-left:auto;margin-right:auto}
.busq-centrado .busq-tips{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s3) var(--s6);margin-top:var(--s5)}
.busq-legal{text-align:center}
.busq-tips{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.busq-tips li{position:relative;padding-left:30px;font-size:14.5px;color:var(--gray);line-height:1.45}
.busq-tips li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;
  border-radius:50%;background:rgba(37,187,238,.14)}
.busq-tips li::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:4.5px;
  border-left:1.8px solid var(--celeste-txt);border-bottom:1.8px solid var(--celeste-txt);
  transform:rotate(-45deg)}

/* El marco es NUESTRO: le pone identidad y contexto a un iframe que por dentro
   es de otro sitio. */
.busq-marco{background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:20px;
  box-shadow:0 22px 50px rgba(9,35,71,.14);overflow:hidden}
.busq-marco-hd{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);background:#fafbfc;border-bottom:1px solid var(--line)}
.bm-av{position:relative;width:40px;height:40px;flex-shrink:0}
.bm-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.bm-av i{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;
  background:#3ddc84;border:2px solid #fafbfc}
.bm-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.bm-tx b{font-family:var(--disp);font-size:15px;font-weight:600}
.bm-tx small{font-size:12.5px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-abrir{margin-left:auto;flex-shrink:0;font-size:13px;color:var(--celeste-txt);
  padding:6px 10px;border-radius:8px;transition:background-color .4s var(--ease-out)}
.bm-abrir:hover{background:rgba(37,187,238,.10)}
.busq-frame{display:block;width:100%;height:clamp(600px,70vh,780px);border:0;background:#fff}

.busq-legal{position:relative;z-index:2;margin:var(--s6) 0 0;font-size:12.5px;
  color:var(--gray);line-height:1.5}
.busq-legal a{color:var(--celeste-txt);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1080px){.busq-frame{height:clamp(580px,80vh,720px)}}

/* ══ BARRA DE COMPRA FIJA ══
   Aparece cuando el CTA original se fue de pantalla. En una ficha que scrollea
   1.500px, si no, hay que volver arriba para comprar. */
.cta-fija{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .55s var(--ease-brand)}
.cta-fija.ver{transform:none}
.cta-fija .wrap{display:flex;align-items:center;gap:var(--s4);
  padding-top:var(--s3);padding-bottom:var(--s3)}
/* La foto del producto en la barra: al llegar acá el usuario ya scrolleó
   lejos de la galería y la miniatura le confirma de qué equipo está hablando
   antes de apretar. */
.cf-foto{width:46px;height:46px;flex-shrink:0;border-radius:10px;
  object-fit:contain;background:#fff;padding:3px;border:1px solid var(--line)}
.cf-nom{font-family:var(--disp);font-size:15.5px;font-weight:600;color:var(--navy);
  line-height:1.2;min-width:0}
.cf-nom small{display:block;font-weight:400;font-size:13px;color:var(--gray);margin-top:2px}
.cta-fija .btn{margin-left:auto;flex-shrink:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta-fija{background:#fff}
}
/* los flotantes suben para no chocar con la barra */
body.con-barra .floats{bottom:88px}
.floats{transition:bottom .55s var(--ease-brand)}
@media (max-width:640px){
  .cf-nom small{display:none}
  .cta-fija .wrap{gap:var(--s3)}
}

/* ══ ¿QUÉ DESEA PRODUCIR? (página) ══
   Las mismas piezas que la home —foto a sangre, nombre encima— pero MÁS
   VERTICALES y con la bajada: acá el mosaico es el contenido, no un adelanto. */
.producir{background:var(--bone);padding:clamp(var(--s8),7vw,104px) 0}
.pr-mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.pr-alta{aspect-ratio:3/4.4}
.pr-txt{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:5}
.pr-alta .pr-txt span.nm{position:static;left:auto;right:auto;bottom:auto;display:block}
.pr-baj{display:block;margin-top:var(--s2);font-size:13.5px;line-height:1.45;
  color:rgba(255,255,255,.86)}
.pr-n{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
  font-family:var(--disp);font-size:13.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.26);
  border-radius:50px;padding:7px 14px;
  transition:background-color .45s var(--ease-out)}
.pr-alta:hover .pr-n{background:rgba(255,255,255,.30)}
.pr-alta::after{height:74%}
@media (max-width:1080px){.pr-mosaico{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pr-mosaico{grid-template-columns:1fr}.pr-alta{aspect-ratio:4/3.4}}

/* ══ QUIÉNES SOMOS ══ */

/* De dónde venimos: el texto en una columna de 66ch pegada a la izquierda
   dejaba media pantalla vacía. Dos columnas con la foto al lado. */
/* ── De dónde venimos ──
   Texto en DOS columnas y foto a lo ancho, no lado a lado: el texto es mucho
   más corto que la foto y al costado dejaba media sección vacía. */
.origen-txt{columns:2;column-gap:clamp(var(--s6),4vw,72px);margin-top:var(--s2)}
.origen-txt p{font-size:16.5px;line-height:1.75;color:#3d4f5c;margin:0 0 var(--s5);
  break-inside:avoid}
.origen-txt p:last-child{margin-bottom:0}
/* La foto de 1949, dentro del .split de "Desde Verona". */
.origen-foto{margin:0}
.origen-foto img{width:100%;border-radius:20px;display:block}
.origen-foto figcaption{margin-top:var(--s3);font-size:13.5px;color:var(--gray)}

/* Clase PROPIA y no .origen-foto: esa ya la usa la foto de 1949 más arriba,
   y el posicionado absoluto que necesita el parallax la rompía. */
.planta-foto{margin:clamp(var(--s7),5vw,var(--s8)) 0 0}
/* la foto se desliza dentro del marco: lo mueve el parallax de main.js */
.planta-foto .pf-par{display:block;position:relative;overflow:hidden;
  border-radius:22px;aspect-ratio:21/9}
.planta-foto img{position:absolute;left:0;right:0;top:-9%;height:118%;
  width:100%;object-fit:cover;display:block;will-change:transform}
.planta-foto figcaption{margin-top:var(--s3);font-size:13.5px;color:var(--gray)}
@media (max-width:760px){.origen-txt{columns:1}.planta-foto .pf-par{aspect-ratio:4/3}}
/* Sub-encabezado dentro de una sección que ya tiene el suyo. */
.marcas-head,.sec-head.chica{margin-top:clamp(var(--s8),6vw,96px)}
/* sin tope de ancho: son sub-encabezados cortos y con el 24ch heredado
   "Cuatro marcas, un mismo estándar" se partía en dos renglones */
.marcas-head h3.sec,.sec-head.chica h3.sec{font-size:clamp(24px,2.2vw,32px);max-width:none}

/* ── Línea de tiempo HORIZONTAL ──
   Se recorre CON EL SCROLL DE LA PÁGINA: al llegar, la sección se clava y lo
   que se mueve es el riel, hacia la izquierda. La altura del contenedor la
   calcula main.js —es lo que hay que scrollear para recorrer todo el riel— y
   el desplazamiento se suaviza con una interpolación, así no va pegado al
   dedo y la transición se siente amortiguada.
   Sin JS (o con "menos movimiento") vuelve a ser un riel que se arrastra de
   costado con el dedo: nunca se queda trabado. */
/* A sangre: clavada, la línea de tiempo tiene que usar el ancho entero de la
   pantalla, no el del .wrap. */
.tiempo{position:relative;margin-inline:calc(-1 * (50vw - 50%))}
.tiempo-fijo{position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* El relleno lateral es MEDIA PANTALLA MENOS MEDIO HITO: así el primer hito
   arranca centrado y el último termina centrado. Con un relleno cualquiera,
   1949 nunca llega a ser el hito en foco y la línea arranca en el segundo. */
/* width:max-content — si no, la CAJA del riel mide lo que el contenedor
   (el contenido desborda pero la caja no crece) y el eje, que es un ::before
   con left:0/right:0, se corta justo donde termina la pantalla: la línea
   moría en 1968. align-self:flex-start para que el padre en columna no lo
   vuelva a estirar al ancho de la pantalla. */
.tiempo-riel{--hito-w:clamp(300px,25vw,380px);--aire-eje:26px;
  width:max-content;align-self:flex-start;
  position:relative;display:flex;align-items:stretch;
  gap:clamp(var(--s6),5vw,88px);          /* aire de verdad entre hito e hito */
  padding-inline:calc(50vw - var(--hito-w) / 2);
  will-change:transform}

/* El eje: una línea continua que cruza TODOS los hitos por detrás, con un
   punto en cada uno. Es lo que hace que se lea como una línea de tiempo y no
   como una fila de tarjetas. */
.tiempo-riel::before{content:"";position:absolute;z-index:0;
  left:0;right:0;top:calc(var(--anio-alto,52px) + var(--aire-eje));
  height:2px;background:#ccd6dc}
.hito{position:relative;z-index:1;flex:0 0 var(--hito-w,340px);
  display:flex;flex-direction:column;
  transition:opacity .6s var(--ease-out),filter .6s var(--ease-out),
             transform .6s var(--ease-out)}
/* los que no están en el centro se apagan */
.hito{opacity:.3;filter:blur(2px);transform:scale(.95)}
.hito.eje{opacity:1;filter:none;transform:none}
.hi-anio{display:block;font-family:var(--disp);font-weight:200;
  font-size:clamp(40px,3.8vw,54px);letter-spacing:-.045em;line-height:1;
  color:var(--celeste-dark);font-variant-numeric:tabular-nums}
/* el punto se apoya justo sobre el eje */
.hito::after{content:"";position:absolute;z-index:2;left:0;
  top:calc(var(--anio-alto,52px) + var(--aire-eje));
  width:13px;height:13px;border-radius:50%;
  transform:translate(-1px,calc(-50% + 1px));
  background:#ccd6dc;border:3px solid var(--fondo);
  transition:background .6s var(--ease-out),transform .6s var(--ease-out)}
.hito.eje::after{background:var(--celeste);
  transform:translate(-1px,calc(-50% + 1px)) scale(1.25)}
/* la tarjeta arranca el doble de aire abajo del año: la línea queda justo en
   el medio, entre el año y la tarjeta */
.hi-cuerpo{margin-top:calc(var(--aire-eje) * 2);
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:var(--s5);flex:1 1 auto;
  transition:box-shadow .6s var(--ease-out),border-color .6s var(--ease-out)}
.hito.eje .hi-cuerpo{border-color:transparent;box-shadow:0 18px 46px rgba(9,35,71,.12)}
.hi-foto{margin-bottom:var(--s5);border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;background:#eef1f4}
.hi-foto img{width:100%;height:100%;object-fit:cover;display:block}
.hi-sinfoto{display:grid;place-items:center;padding:var(--s4);text-align:center}
.hi-sinfoto span{font-size:11px;color:#7d8f9c;line-height:1.4}
.hito h3{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.025em}
.hito p{font-size:14.5px;color:var(--gray);line-height:1.55;margin-top:var(--s2)}
/* Pegado al riel, no al pie de la pantalla: clavado abajo quedaba a media
   pantalla de las tarjetas y parecía de otra cosa. */
.tiempo-ayuda{margin:var(--s5) 0 0;font-size:14px;color:var(--gray);text-align:center}

/* Repliegue: sin JS, sin sticky o con "menos movimiento", vuelve a ser un
   riel que se arrastra. Todos los hitos encendidos: nada puede quedar
   borroso para siempre porque un efecto no arrancó. */
.tiempo.sin-fijado .tiempo-fijo{position:static;height:auto;overflow:visible}
.tiempo.sin-fijado .tiempo-riel{width:auto;align-self:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;transform:none!important;
  padding-block:var(--s4) var(--s6);padding-inline:calc(50% - var(--hito-w) / 2)}
.tiempo.sin-fijado .tiempo-riel::-webkit-scrollbar{display:none}
.tiempo.sin-fijado .hito{scroll-snap-align:center;opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .tiempo-fijo{position:static;height:auto;overflow:visible}
  .tiempo-riel{width:auto;align-self:stretch;overflow-x:auto;transform:none!important}
  .hito{opacity:1;filter:none;transform:none}
}
@media (max-width:900px){
  .tiempo-fijo{position:static;height:auto;overflow:visible}
  .tiempo-riel{width:auto;align-self:stretch;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    transform:none!important;padding-block:var(--s4) var(--s6);
    padding-inline:11vw;gap:var(--s5)}
  .tiempo-riel::-webkit-scrollbar{display:none}
  .hito{flex-basis:78vw;scroll-snap-align:center;opacity:1;filter:none;transform:none}
}

/* ── Propósito y valores ──
   Todo en una sección y SIN CAJAS. Antes eran dos bloques de tarjetas seguidos
   —dos grandes y después nueve chicas— que competían entre sí sin decir cuál
   importaba más. La jerarquía ahora la hacen tres cosas: el aire, una línea
   fina y el PESO de la letra. Nada de bordes ni fondos.

   El propósito se lee como declaración: cuerpo grande, peso normal y color
   navy, no gris de párrafo. Cada bloque cuelga de una línea celeste corta que
   lo ancla sin encerrarlo. */
.proposito{display:grid;grid-template-columns:1.04fr 1fr;
  gap:clamp(var(--s6),5vw,88px);margin-top:var(--s7)}
.pr-bloque{padding-top:var(--s5);border-top:2px solid var(--celeste)}
.pb-k{display:block;font-size:14px;font-weight:500;color:var(--celeste-txt)}
.pr-bloque p{margin:var(--s4) 0 0;font-size:clamp(17.5px,1.35vw,20px);
  line-height:1.62;font-weight:400;color:var(--navy);letter-spacing:-.008em}

/* Los nueve valores: grilla de líneas, no de cajas. El número va en peso 200
   y grande —ordena y marca el ritmo sin competir—, el título en 600 y el
   texto en 400. Tres pesos, tres niveles de lectura. */
.valores{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(var(--s5),3.5vw,var(--s7));row-gap:0;margin-top:var(--s6)}
.valor{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(var(--s4),1.8vw,var(--s5));align-items:start;
  padding:var(--s5) 0;border-top:1px solid var(--line)}
.va-n{font-family:var(--disp);font-weight:200;font-size:clamp(30px,2.6vw,38px);
  line-height:.9;letter-spacing:-.05em;color:#c8d2da;
  font-variant-numeric:tabular-nums;transition:color .5s var(--ease-out)}
.valor:hover .va-n{color:var(--celeste)}
.valor h3{font-family:var(--disp);font-size:17.5px;font-weight:600;
  letter-spacing:-.024em;color:var(--navy);line-height:1.25}
.valor p{font-size:15px;color:var(--gray);line-height:1.6;margin-top:6px}
@media (max-width:1080px){
  .proposito{grid-template-columns:1fr;gap:var(--s6)}
  .valores{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){.valores{grid-template-columns:1fr}}

/* ══ REPRESENTANTES ══
   Tarjeta por zona con los dos caminos de contacto siempre visibles: este
   público no descubre nada por hover. */
.rc-lin{display:flex;align-items:center;gap:var(--s3);font-size:13.5px;color:var(--gray)}
.rc-lin svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rc-lin:hover{color:var(--navy)}
.rc-wa{margin-top:auto;display:block;text-align:center;font-family:var(--disp);
  font-size:14px;font-weight:600;color:var(--navy);
  border:1.5px solid var(--line);border-radius:100px;padding:11px;
  transition:border-color .4s var(--ease-out),background-color .4s var(--ease-out)}
.rc-wa:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.r-nota{margin-top:var(--s6);font-size:14px;color:var(--gray);
  background:rgba(232,177,33,.10);border-radius:12px;padding:var(--s4) var(--s5)}
.r-nota b{color:var(--navy)}
@media (max-width:1080px){.r-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.r-grid{grid-template-columns:1fr}}

/* ══ NOVEDADES (página) ══
   Mosaico, no fila que se arrastra: acá el listado ES el contenido. */
.news-pag{background:var(--fondo);padding:0 0 clamp(var(--s8),7vw,104px)}
.seg-news{margin-bottom:var(--s7)}
.n-mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.n-mosaico .ncard{aspect-ratio:4/5}
@media (max-width:1080px){.n-mosaico{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.n-mosaico{grid-template-columns:1fr}}

/* ══ PRODUCTOS ══ */
.prods{background:var(--fondo)}
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s7)}
/* Producto: la máquina manda. Sin bordes ni marcos: el objeto reposa sobre
   un plano claro y el texto abajo, con aire. */
/* Card blanca sobre fondo gris: la foto va DENTRO de la caja y el texto
   alineado a la izquierda. El hover se marca con borde, no con sombra. */
.pcard{background:#fff;border-radius:20px;position:relative;display:flex;flex-direction:column;
  padding:var(--s5);border:1px solid transparent;overflow:hidden;
  transition:transform .55s var(--ease-out),border-color .55s var(--ease-out)}
.pcard:hover{transform:translateY(-6px);border-color:#d6dade}
.pcard .media{position:relative;overflow:hidden;background:none;border-radius:14px}
.pcard .media .ph{height:330px;background:none;transition:transform .7s var(--ease-out)}
/* Sin foto real el área de imagen tiene que verse igual, o la tarjeta aparece
   vacía y parece rota (le pasó a la de Ambro Línea Pizza). */
.pcard .media .ph:not(:has(img.ph-img)){background:var(--fondo)}
.pcard:hover .media .ph{transform:scale(1.04)}
/* Jerarquía: el nombre manda, el rubro lo ubica, la descripción explica y la
   spec cierra. Cada nivel con su propio aire, no todos pegados. */
.pcard .bd{padding:var(--s5) var(--s1) var(--s1);display:flex;flex-direction:column;flex:1}
/* Cabecera de la tarjeta: el logo de la marca a la izquierda y el rubro en
   una pastilla al otro extremo, a la misma altura. */
.pcard .bd-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s5)}
.pcard .brand-mark{height:19px;width:auto;flex-shrink:0;object-fit:contain;opacity:.95}
.pcard .brand-mark.ambro{height:16px}
.pcard .cat-pill{background:#fbfbfb;border:1px solid #eceef0;border-radius:50px;
  padding:6px 12px;font-size:12.5px;color:var(--gray);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pcard.is-ambro h3{color:var(--rojo-ambro)}
.pcard h3{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.22;letter-spacing:-.03em}
.pcard .hook{font-size:14px;color:var(--gray);line-height:1.55;margin-top:var(--s3);flex:1}
/* Specs como dato, no como cajita con línea de color al frente: renglón
   sobrio separado por una regla fina. */
/* Cada característica es un dato aparte: se leen de un vistazo. */
/* Cada característica es un dato aparte: se leen de un vistazo. */
.pcard /* La info destacada del catálogo, entera y sin trocear. Antes eran tres
   pastillas ("1 carro", "15-16 bandejas", "9,60 m²") armadas a mano: el
   catálogo trae UNA celda de texto y no se parte si el cliente no la separó. */
.spec{font-size:13.5px;line-height:1.45;color:var(--gray);margin:var(--s3) 0 0;flex:1}
.pcard .lnk{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--celeste-dark);
  margin-top:var(--s4);display:flex;align-items:center;gap:7px;transition:gap .45s var(--ease-out)}
.pcard:hover .lnk{gap:12px}
/* Variante oscura de .pcard: para fotos de producto TERMINADO (pan, pizza),
   no de máquina recortada. Misma card oscura con foto fundida. */
.pcard.dark{background:var(--navy);border-color:transparent;color:#fff}
.pcard.dark:hover{border-color:transparent}
.pcard.dark .media{background:var(--navy);border-bottom:none}
.pcard.dark .media .ph{height:240px;background:var(--navy-90)}
.pcard.dark .media::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:62%;z-index:3;pointer-events:none;background:linear-gradient(to top,var(--navy) 12%,rgba(9,35,71,.72) 46%,transparent 100%)}
.pcard.dark .bd{margin-top:-48px;position:relative;z-index:4;padding:0 var(--s5) var(--s5)}
.pcard.dark h3{color:#fff;font-size:19px}
.pcard.dark .hook{color:#a9c7db;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);margin-top:12px}
.pcard.dark .lnk{color:var(--dorado)}
/* Cucardas: TODAS del mismo alto y la misma forma, sin sombra. Una a cada
   lado; el ancho lo pide el texto, pero el alto y el radio son iguales.
   Dos colores y nada más: CELESTE = descuento, NAVY = todo lo demás
   (plan de pago, promo). Sin blanco ni amarillo. */

/* ══ QUE DESEA PRODUCIR ══ */
.produce{background:var(--fondo);position:relative;overflow:hidden}
/* Mosaicos: la foto del pan es la protagonista y ocupa toda la pieza; el
   nombre va encima, sobre una sombra suave. Nada de círculos recortados. */
/* Una sola fila que se arrastra de costado, como el estante de productos */
.pr-grid{display:flex;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s3);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:var(--s3);scrollbar-width:none;
  margin-right:calc(-1 * (50vw - 50%));padding-right:calc(50vw - 50%);
  margin-left:calc(-1 * (50vw - 50%));padding-left:calc(50vw - 50%);
  scroll-padding-inline:var(--inset);overflow-anchor:none}
.pr-grid::-webkit-scrollbar{display:none}
.pr-grid>*{flex:0 0 clamp(280px,24vw,400px);scroll-snap-align:start}
.pr{position:relative;display:block;border-radius:20px;overflow:hidden;
  aspect-ratio:4/5;background:var(--navy);
  transition:transform .6s var(--ease-out),box-shadow .45s var(--ease-out)}
.pr:hover{transform:translateY(-4px)}
.pr .ph{position:absolute;inset:0;height:100%;width:100%;border-radius:0;
  transition:transform 0.60s var(--ease-out)}
.pr:hover .ph{transform:scale(1.06)}
.pr .ph.round{border-radius:0}
/* sombra al pie para que el nombre se lea siempre */
.pr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:4;
  pointer-events:none;background:linear-gradient(to top,rgba(6,12,22,.86) 6%,rgba(6,12,22,.35) 46%,transparent 100%)}
.pr span.nm{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:5;
  font-family:var(--disp);font-size:clamp(20px,1.6vw,26px);font-weight:600;
  letter-spacing:-.028em;color:#fff;line-height:1.18;margin:0;display:block;text-align:left}
@media (max-width:640px){.pr-grid>*{flex-basis:240px}
  .pr span.nm{font-size:19px;left:var(--s4);right:var(--s4);bottom:var(--s4)}}
/* buscador del header */
.search-box{display:flex;align-items:center;gap:var(--s2);background:rgba(9,35,71,.06);
  border-radius:50px;height:44px;padding:0 var(--s4);width:0;opacity:0;overflow:hidden;
  transition:width .55s var(--ease-out),opacity .45s var(--ease-out)}
.search-box.open{width:min(320px,32vw);opacity:1}
.search-box input{border:none;background:none;outline:none;font-family:var(--body);
  font-size:14.5px;color:var(--navy);width:100%}
body.hero-top header.site:not(.solid) .search-box{background:rgba(255,255,255,.16)}
body.hero-top header.site:not(.solid) .search-box input{color:#fff}
body.hero-top header.site:not(.solid) .search-box input::placeholder{color:rgba(255,255,255,.7)}

/* ══ TECNOLOGIA ══ */
/* Grilla numerada 01-0N. La home ya no la usa (ahí va el bento), pero
   servicio-tecnico.html y quienes-somos.html sí: no borrarla. */
.t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:var(--s7);background:var(--line);border-radius:var(--r);overflow:hidden}
.t-cell{background:#fff;padding:var(--s6) var(--s5)}
.t-cell .num{font-size:12px;color:var(--celeste)}
.t-cell h3{font-family:var(--disp);font-weight:600;font-size:17px;margin:14px 0 10px;letter-spacing:-.02em}
.t-cell p{font-size:15px;color:var(--gray);line-height:1.6}

/* ══ BENTO: "Lo que viene con la máquina" ══
   Piezas de distinto tamaño donde se mezclan texto y foto. Reemplazó a la
   grilla 01-04 de "Tecnología": cuatro celdas de texto iguales, sin una sola
   imagen. La gracia del bento es la DESIGUALDAD — si todas las piezas pesan
   lo mismo vuelve a ser una grilla y no sirve de nada. */
.bento-sec{background:var(--fondo)}
/* Encabezado centrado: es el bloque institucional, no una sección más de
   catálogo, y la simetría le da el peso que pide. */
/* 28ch + text-wrap:balance = se parte en DOS renglones de largo parejo. Con
   20ch quedaban cuatro renglones de dos palabras. */
h1.sec.grande,h2.sec.grande{font-size:clamp(34px,4.2vw,62px);line-height:1.04;letter-spacing:-.042em;
  max-width:28ch;text-wrap:balance}
/* Alineado a la izquierda es el estándar: lo usan los bloques cuyo contenido
   arranca pegado al margen (los estantes de tarjetas). Centrado queda solo
   para el bloque institucional, que es simétrico. */
.sec-head{margin-bottom:var(--s7)}
.sec-head .kicker{margin-bottom:var(--s3)}
.sec-head .sec-sub{margin-top:var(--s4);font-size:17px;max-width:56ch}
.sec-head.centrado{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.sec-head.centrado .sec-sub{margin-left:auto;margin-right:auto}
.sec-head.centrado .sec-sub{margin-left:auto;margin-right:auto}
.sec-head.centrado :is(h1,h2).sec{margin-left:auto;margin-right:auto}

/* 4 columnas: la central pesa doble y es la que manda. */
.bento{display:grid;grid-template-columns:1fr 1.55fr 1fr;
  grid-template-rows:auto minmax(0,1fr) auto;gap:var(--s4);margin-top:var(--s7)}
.bt{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
a.bt:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(9,35,71,.10)}

.bt-a{grid-column:1;grid-row:1}
.bt-c{grid-column:1;grid-row:2}
.bt-b{grid-column:1;grid-row:3}
.bt-d{grid-column:2;grid-row:1 / span 3}
.bt-e{grid-column:3;grid-row:1 / span 2}
.bt-f{grid-column:3;grid-row:3}

/* Piezas de texto */
.bt-txt{padding:var(--s5);justify-content:flex-start}
.bt-txt h3{font-family:var(--disp);font-weight:600;font-size:17px;
  letter-spacing:-.022em;margin:0 0 var(--s2)}
.bt-txt p{font-size:14.5px;color:var(--gray);line-height:1.55;margin:0}
.bt-ico{display:flex;gap:var(--s2);margin-top:auto;padding-top:var(--s6)}
.bt-ico span{width:38px;height:38px;border-radius:11px;background:#f3f5f7;
  display:grid;place-items:center;color:var(--celeste-dark)}
.bt-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bt-ico.solo{padding-top:0;margin-top:0}

/* Etiquetas: el mismo recurso de pastillas de la referencia, en celeste */
.bt-lista{list-style:none;margin:var(--s4) 0 0;padding:0}
.bt-lista li{padding:var(--s3) 0;border-top:1px solid var(--line)}
.bt-lista li:first-child{border-top:none;padding-top:0}
.bt-lista b{font-family:var(--disp);font-weight:600;font-size:14.5px;
  letter-spacing:-.015em;color:var(--navy);display:block}
.bt-lista span{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--gray)}

/* Piezas con foto: la imagen va a sangre de la pieza y el texto encima */
.bt-foto,.bt-hero{border:none}
.bt-foto{min-height:190px}
.bt-par{position:absolute;left:0;right:0;top:-8%;bottom:-8%;display:block;
  will-change:transform;overflow:hidden}
.bt-par img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out)}
a.bt:hover .bt-par img{transform:scale(1.04)}
.bt-foto::after,.bt-hero::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background:linear-gradient(to top,rgba(6,10,18,.78) 0%,rgba(6,10,18,.28) 42%,transparent 72%)}
.bt-cap{position:relative;z-index:2;margin-top:auto;padding:var(--s5);
  font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.28;
  letter-spacing:-.02em;color:#fff;max-width:26ch}
/* La pieza grande: chip arriba a la izquierda, como una etiqueta de foto */
.bt-hero{min-height:min(72vh,620px)}
.bt-chip{position:absolute;z-index:2;top:var(--s5);left:var(--s5);
  background:#fff;color:var(--navy);font-family:var(--disp);font-weight:600;
  font-size:14px;letter-spacing:-.015em;padding:8px 14px;border-radius:50px}
.bt-hero::after{background:linear-gradient(to bottom,rgba(6,10,18,.38) 0%,transparent 30%),
  linear-gradient(to top,rgba(6,10,18,.80) 0%,rgba(6,10,18,.30) 38%,transparent 66%)}

/* La pieza del dato: el único fondo teñido del bloque, para que corte */
.bt-dato{background:#eaf7fd;border-color:rgba(37,187,238,.22);
  padding:var(--s5);justify-content:flex-start}
.bt-dato .bt-ico span{background:#fff}
.bt-dato b{display:block;margin-top:var(--s5);font-family:var(--disp);font-weight:200;
  font-size:clamp(44px,5.2vw,76px);line-height:.95;letter-spacing:-.045em;
  color:var(--navy);font-variant-numeric:tabular-nums}
.bt-dato p{margin:var(--s3) 0 0;font-size:14px;line-height:1.5;color:var(--gray);max-width:26ch}

@media (max-width:1080px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto}
  .bt-a{grid-column:1;grid-row:1}
  .bt-c{grid-column:2;grid-row:1}
  .bt-d{grid-column:1 / -1;grid-row:2}   /* la foto, al medio y a todo el ancho */
  .bt-b{grid-column:1;grid-row:3}
  .bt-e{grid-column:2;grid-row:3}
  .bt-f{grid-column:1 / -1;grid-row:4}
  .bt-hero{min-height:min(58vh,480px)}
  .bt-dato b{margin-top:var(--s5)}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bt-a,.bt-b,.bt-c,.bt-d,.bt-e,.bt-f{grid-column:1;grid-row:auto}
  .bt-hero{min-height:400px}
  .bt-foto{min-height:220px}
}

/* ══ LOGOS ══ */
.trust{background:var(--fondo);padding:72px 0;border-top:1px solid var(--line)}
.trust .wrap{text-align:center}
.trust .lbl{font-size:14px;color:var(--gray);margin-bottom:var(--s7)}
/* Muro de logos de clientes: TODOS en el mismo gris y SIN contenedor. Los
   archivos ya vienen pintados de ese gris (no se recolorea por CSS: siete de
   los doce son mapas de bits y un filter los dejaría lavados o sucios).

   CARRUSEL INFINITO. La tira va duplicada en el HTML y la animación la corre
   -50% (el largo exacto de una copia): al volver a 0 la segunda copia está
   donde arrancó la primera y el corte no se ve. Se mueve por TRANSFORM, que
   la compone la GPU; animar `left` o `margin` haría tironear el scroll.
   El marco recorta con una máscara que difumina los dos bordes, para que los
   logos no aparezcan y desaparezcan de golpe contra el borde de la pantalla. */
.lg-marco{position:relative;overflow:hidden;
  margin-right:calc(-1 * (50vw - 50%));margin-left:calc(-1 * (50vw - 50%));
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
/* La separación va como MARGEN DE CADA LOGO, no como `gap` de flex. Con gap,
   media tira mide (12 logos + 11,5 separaciones) y el período real es
   (12 logos + 12 separaciones): sobra media separación y el bucle pega un
   saltito de 36 px en cada vuelta. Con margen, media tira es exactamente el
   período y el -50% cierra clavado. */
.lg-tira{display:flex;align-items:center;width:max-content;
  animation:desfile 46s linear infinite;will-change:transform}
/* Al pasar el mouse se frena: si a alguien le interesa una marca, tiene que
   poder mirarla. */
.lg-marco:hover .lg-tira{animation-play-state:paused}
@keyframes desfile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Balance óptico: un tope de ANCHO y otro de ALTO al mismo tiempo. Con alto
   fijo, un wordmark largo tipo PROINTEC aplasta a un lockup apilado tipo
   Hildebrand; con ancho fijo pasa al revés. */
.lg-tira img{flex:0 0 auto;width:auto;height:auto;max-width:132px;max-height:46px;
  display:block;margin-right:clamp(var(--s6),5vw,72px)}
/* Sin movimiento: la tira se queda quieta y se ve la primera copia. */
@media (prefers-reduced-motion:reduce){
  .lg-tira{animation:none;flex-wrap:wrap;justify-content:center;width:auto;
    gap:var(--s6)}
  .lg-tira img{margin-right:0}
  .lg-marco{mask-image:none;-webkit-mask-image:none;margin-inline:0}
}

/* ══ LAS DEMOS ══
   Cinta horizontal en orden cronológico: lo viejo a la izquierda, lo que viene
   a la derecha, la próxima centrada al cargar (lo hace main.js).
   La versión vertical decía lo mismo y medía tres pantallas.
   "Apagada" NO se hace con opacity: bajar la tarjeta al 45 % tira el texto por
   debajo del contraste mínimo y el público tiene 40-65 años. Se apaga
   sacándole el acento —el celeste y el fondo blanco—, no legibilidad. */
.gira-sec{background:var(--fondo)}
/* El riel recorta en vertical (es el precio de scrollear en horizontal: con
   overflow-x:auto, el eje y no puede quedar visible). Así que la sombra de la
   tarjeta destacada tiene que ENTRAR en el padding, o se corta al ras.
   La sombra es 0 16px 40px: baja 56 px y sube 24. De ahí los números. */
.gira{list-style:none;margin:var(--s7) 0 0;padding:26px 0 58px;
  display:flex;gap:var(--s4);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overflow-anchor:none;
  margin-right:calc(-1 * (50vw - 50%));padding-right:calc(50vw - 50%);
  margin-left:calc(-1 * (50vw - 50%));padding-left:calc(50vw - 50%);
  scroll-padding-inline:var(--inset)}
.gira::-webkit-scrollbar{display:none}
.gf{flex:0 0 clamp(230px,18vw,270px);scroll-snap-align:center;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:var(--s5);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),
             border-color .5s var(--ease-out)}
/* JERARQUÍA. Arriba manda la FECHA, que es el dato por el que se mira este
   módulo, con el estado al costado en vez de robarle un renglón entero.
   Abajo, separado por una línea, el qué y el dónde. Sin esa división las seis
   líneas pesaban lo mismo y la tarjeta se leía como una lista de datos
   sueltos, no como una fecha con su información. */
.gf-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3)}
.gf-d{display:block;font-family:var(--disp);font-weight:600;
  font-size:30px;line-height:.95;letter-spacing:-.038em;
  color:var(--celeste-dark);font-variant-numeric:tabular-nums}
.gf-d small{display:block;margin-top:6px;font-family:var(--body);font-weight:400;
  font-size:13.5px;letter-spacing:0;color:var(--gray)}
.gf-est{flex-shrink:0;font-size:12.5px;font-weight:500;line-height:1;
  color:var(--gray);background:#eceff1;border-radius:50px;padding:6px 11px}
.gf-cuerpo{margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--line)}
.gf-n{display:block;font-family:var(--disp);font-weight:600;
  font-size:17px;letter-spacing:-.022em;color:var(--navy)}
.gf-t{display:block;margin-top:3px;font-size:13.5px;color:var(--gray)}
.gf-l{display:flex;align-items:flex-start;gap:7px;margin-top:var(--s4);
  font-size:13.5px;line-height:1.4;color:var(--gray)}
.gf-l svg{flex-shrink:0;width:15px;height:15px;margin-top:1px;
  fill:none;stroke:#9aa6ae;stroke-width:1.7;stroke-linejoin:round}

/* la que viene: es la única con acento */
.gf.proxima{border-color:transparent;box-shadow:0 16px 40px rgba(9,35,71,.12)}
.gf.proxima .gf-est{color:var(--celeste-txt);background:rgba(37,187,238,.12)}

/* ya pasó: sin fondo ni acento, pero legible */
.gf.pasada{background:transparent;border-color:#e6eaec}
.gf.pasada .gf-d{color:#64727d;font-weight:500}
.gf.pasada .gf-n{color:#5c6b76}
.gf.pasada .gf-cuerpo{border-top-color:#e6eaec}

/* de ejemplo: se ve distinta A PROPÓSITO, es relleno para revisar el módulo */
.gf.ejemplo{background:transparent;border-style:dashed}

/* sube para compensar el padding extra que le hace lugar a la sombra */
.gira-ayuda{margin-top:-18px;font-size:14px;color:var(--gray);text-align:center}
@media (max-width:640px){.gf{flex-basis:76vw}}

/* ══ NOVEDADES ══ */
.news{background:var(--fondo)}
.n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)}
/* ══ NOVEDADES ══
   Card alta de foto a sangre con el texto ARRIBA sobre la imagen y un "+" al
   pie. La foto es el fondo completo, no un recuadro dentro de una caja. */
.n-grid{display:flex;gap:var(--s5);margin-top:var(--s7);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding-top:var(--s3);padding-bottom:var(--s5);
  margin-right:calc(-1 * (50vw - 50%));padding-right:calc(50vw - 50%);
  margin-left:calc(-1 * (50vw - 50%));padding-left:calc(50vw - 50%);
  scroll-padding-inline:var(--inset);overflow-anchor:none}
.n-grid::-webkit-scrollbar{display:none}
.n-grid>*{flex:0 0 clamp(280px,26vw,400px);scroll-snap-align:start}

.ncard{position:relative;display:block;aspect-ratio:3/4;border-radius:24px;
  overflow:hidden;background:var(--navy);
  transition:transform .55s var(--ease-out)}
.ncard:hover{transform:translateY(-6px)}
.nc-par{position:absolute;left:0;right:0;top:-9%;bottom:-9%;display:block;
  will-change:transform;overflow:hidden}
.ncard .nc-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out)}
.ncard:hover .nc-foto{transform:scale(1.05)}
/* sombra arriba para que el texto se lea siempre sobre cualquier foto */
.ncard::before{content:"";position:absolute;left:0;right:0;top:0;z-index:2;
  height:78%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,10,18,.92) 0%,rgba(6,10,18,.66) 42%,rgba(6,10,18,.24) 74%,transparent 100%)}
.ncard .nc-txt{position:absolute;left:var(--s5);right:var(--s5);top:var(--s5);z-index:3}
.ncard .nc-tag{display:inline-block;font-size:12.5px;font-weight:500;
  color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);
  padding:5px 11px;border-radius:50px;margin-bottom:var(--s3)}
.ncard h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.55vw,23px);
  line-height:1.18;letter-spacing:-.028em;color:#fff}
.ncard .nc-txt p{margin:var(--s2) 0 0;font-size:14px;line-height:1.45;color:#fff}
.ncard .nc-fecha{display:block;margin-top:var(--s3);font-size:12.5px;
  color:#fff;opacity:.88}
.ncard .nc-txt{text-shadow:0 1px 12px rgba(6,10,18,.55)}
/* el "+" invita a abrir la nota */
.ncard .nc-plus{position:absolute;right:var(--s5);bottom:var(--s5);z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.24);backdrop-filter:blur(8px);
  color:#fff;font-size:22px;font-weight:300;line-height:1;padding-bottom:3px;
  transition:background-color .45s var(--ease-out),transform .45s var(--ease-out)}
.ncard:hover .nc-plus{background:rgba(255,255,255,.42);transform:rotate(90deg)}
@media (max-width:640px){.n-grid>*{flex-basis:76%}}

/* ══ CTA FINAL ══ */
.cta-band{padding:0 0 clamp(64px,7vw,96px)}
.cta-card{position:relative;isolation:isolate;overflow:hidden;
  background:var(--grad-dark);color:#fff;border-radius:clamp(22px,2.2vw,38px);
  padding:clamp(44px,4.6vw,68px) clamp(var(--s6),4vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  opacity:.55;filter:saturate(.9)}
.cta-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,18,45,.93) 0%,rgba(10,32,64,.86) 34%,rgba(12,62,105,.62) 68%,rgba(14,92,142,.42) 100%)}
.cta-card h2{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.15;max-width:20ch}
.cta-card .btn-navy{background:#fff;color:var(--navy);border-color:#fff}
.cta-card .btn-navy:hover{background:#eaf0f5}
.cta-card .btn-dark{border-color:rgba(255,255,255,.5);color:#fff}
.cta-card .btn-dark:hover{background:rgba(255,255,255,.12);color:#fff}

/* ══ FOOTER ══ */
footer.site{background:#071c39;color:#9fbfd4;padding:72px 0 0}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-top h4{font-size:11.5px;color:var(--dorado);margin-bottom:16px}
.f-top a{display:block;font-size:14.5px;padding:6px 0;transition:all 0.45s var(--ease-out)}
.f-top a:hover{color:#fff}
/* Las cuatro marcas del grupo, en blanco sobre el pie oscuro. Sin recuadro:
   un logo dentro de una cajita se lee como un placeholder. La altura la fija
   el ALTO, no el ancho, así los cuatro pesan visualmente parecido aunque cada
   uno tenga su proporción. */
/* Dos y dos: la columna del pie no da para las cuatro en fila y en una sola
   línea quedaban tres arriba y una huérfana abajo. */
.f-brands{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;
  align-items:center;gap:var(--s4) var(--s5);margin-top:20px}
.f-brands img{height:19px;width:auto;display:block;opacity:.78;
  transition:opacity .4s var(--ease-out)}
.f-brands img:first-child{height:23px}   /* el isologo Argental pesa menos */
.f-brands img:hover{opacity:1}
.f-bot{display:flex;justify-content:space-between;padding:24px 0;font-size:13px;color:#7699b0;flex-wrap:wrap;gap:12px}

/* ══ FLOTANTES ══ */
.floats{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.float-b{display:flex;align-items:center;gap:9px;padding:14px 20px;border-radius:50px;font-family:var(--disp);font-size:15px;font-weight:500;box-shadow:0 6px 22px rgba(3,28,49,.28);cursor:pointer}
.float-busq{background:var(--navy);color:#fff;border:1.5px solid var(--celeste)}
.float-busq{padding:9px 20px 9px 10px}
.fb-av{position:relative;width:36px;height:36px;flex-shrink:0;border-radius:50%;overflow:visible}
.fb-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* punto de "en línea" con el mismo pulso que el del chat */
.fb-av i{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;
  background:#3ddc84;border:2px solid var(--navy)}
.fb-av i::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(61,220,132,.55);animation:pulso 3.2s var(--ease-out) infinite}
.fb-tx{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.fb-tx b{font-weight:600;font-size:14.5px}
.fb-tx small{font-size:12px;color:#9fd7ef;font-weight:400}
.float-wa{background:var(--celeste);color:#fff}

/* ══ PAGINAS INTERNAS ══ */
/* ══ ENCABEZADO DE PÁGINA ══
   CLARO y sin banda. Era un bloque azul de punta a punta con la miga de pan
   en su propia barra, cada una con su línea: tres reglas horizontales
   apiladas antes de que empezara el contenido. Acá no va NINGUNA: el aire
   separa, no las líneas. */
/* Titular y bajada EN DOS COLUMNAS, apoyados en la misma línea de base. Uno
   debajo del otro dejaba media pantalla vacía a la derecha y empujaba la
   lista para abajo. */
/* Las dos columnas tienen que MEDIR PARECIDO o no se lee como una fila: con
   el titular en 58px a un renglón y la bajada en tres, arriba del título
   quedaba un hueco del alto de dos líneas. Titular más chico + columna de
   texto más ancha = bajada de dos renglones y bloque compacto. */
@media (max-width:900px){
}

/* Miga de pan: adentro del encabezado, arriba del título. Sin barra propia,
   sin borde y SIN interletrado — a Helvetica no le sienta. */
/* Legado: quedó en la ficha de producto y en Quiénes somos */
.crumbs{position:sticky;top:var(--miga-top,67px);z-index:70;
  background:rgba(245,245,247,.84);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  font-size:14px;color:var(--gray)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crumbs{background:var(--fondo)}
}
.crumbs .wrap{padding-top:var(--s4);padding-bottom:var(--s3)}
.crumbs b{color:var(--navy);font-weight:500}

/* catálogo */
/* OJO: padding en longhand. El shorthand pisa el aire lateral de .wrap
   y la columna de filtros queda pegada al borde de la pantalla. */
/* OJO: overflow:hidden acá rompería el sticky del panel. El recorte se lo
   pone la propia capa decorativa. */
.cat-envoltorio{position:relative;isolation:isolate}
/* Solo degradados radiales, que se disuelven solos: no hay borde que se corte
   cuando el panel se despega al scrollear. */
.cat-fondo{position:absolute;z-index:0;left:0;top:0;bottom:0;width:min(52%,860px);
  pointer-events:none}
.cat-fondo::before{content:"";position:absolute;left:-6%;top:0;width:64%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(37,187,238,.30),transparent 70%)}
.cat-fondo::after{content:"";position:absolute;left:2%;top:34%;width:56%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(15,98,150,.20),transparent 72%)}
.cat-layout{position:relative;z-index:1;
  display:grid;grid-template-columns:310px 1fr;gap:48px;padding-top:48px;padding-bottom:112px}
/* ══ FILTROS DEL CATÁLOGO ══
   Panel tipo ajustes de Apple: la fila entera es el control, la casilla es
   redondeada y el tilde se DIBUJA. Nada de cuadrito de 2px con un ✓ de texto. */
.filters{align-self:start;position:sticky;top:100px;
  border-radius:20px;padding:var(--s5) var(--s4) var(--s4);
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 44px rgba(9,35,71,.09)}
/* Sin backdrop-filter el panel quedaría transparente sobre el lavado y el
   texto ilegible: cae a blanco casi sólido. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .filters{background:rgba(255,255,255,.95)}
}
.f-head{display:flex;align-items:baseline;justify-content:space-between;
  padding:0 var(--s3) var(--s5)}
.f-head h3{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.02em}
.f-reset{border:none;background:none;cursor:pointer;font-family:var(--body);
  font-size:13px;color:var(--celeste-dark);padding:4px 6px;border-radius:8px;
  transition:background-color .45s var(--ease-out)}
.f-reset:hover{background:rgba(37,187,238,.10)}

/* Sin reglas entre grupos: separa el aire. Seis hairlines apiladas en una
   columna angosta la vuelven una planilla. */
.fgroup{padding:0 0 var(--s5)}
.fgroup:last-of-type{padding-bottom:var(--s2)}

/* Encabezado: botón de verdad (foco de teclado, aria-expanded) con chevrón
   que gira. El "+/−" de texto era lo más viejo del panel. */
.fg-head{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);border:none;background:none;cursor:pointer;text-align:left;
  font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  color:var(--navy);padding:var(--s3);border-radius:10px;
  transition:background-color .45s var(--ease-out)}
.fg-head:hover{background:rgba(9,35,71,.05)}
.fg-chev{width:15px;height:15px;flex-shrink:0;fill:none;stroke:#8496a3;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .55s var(--ease-brand)}
.fgroup.cerrado .fg-chev{transform:rotate(-90deg)}

/* Plegado suave con grid: 1fr → 0fr se puede animar, height:auto no. Sin esto
   el grupo desaparecía de golpe con display:none. */
.fg-body{display:grid;grid-template-rows:1fr;overflow:hidden;
  transition:grid-template-rows .55s var(--ease-brand),opacity .4s var(--ease-out)}
.fg-inner{min-height:0}
.filtros-btn,.f-cerrar{display:none}
/* La subcategoría del cliente tiene 52 valores: es el dato real, no se poda.
   Se le pone tope de alto y scroll propio para que no empuje al resto del
   panel treinta pantallas para abajo. */
.fg-largo .fg-inner{max-height:290px;overflow-y:auto;scrollbar-width:thin}
.fg-largo[data-abierto="0"] .fg-inner{overflow-y:hidden}
.fgroup:not(.cerrado) .fg-inner{padding-bottom:var(--s2)}
.fgroup.cerrado .fg-body{grid-template-rows:0fr;opacity:0}

/* La fila ENTERA es el control: área de toque generosa, que es lo que pide
   este público, y fondo al pasar como en una lista de ajustes. */
.fopt{position:relative;display:flex;align-items:center;gap:var(--s3);
  padding:10px 10px;border-radius:10px;cursor:pointer;
  font-size:14.5px;color:var(--gray);
  transition:background-color .4s var(--ease-out),color .4s var(--ease-out)}
.fopt:hover{background:rgba(9,35,71,.05);color:var(--navy)}
.fopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

.fbox{position:relative;width:21px;height:21px;flex-shrink:0;border-radius:7px;
  background:#fff;border:1.5px solid #c8d2da;display:grid;place-items:center;
  transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),
             transform .4s var(--ease-brand)}
.fopt:hover .fbox{border-color:#9fb0bd}
.fbox svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  /* el tilde se dibuja: 22 es el largo del trazo */
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .5s var(--ease-brand)}
.fopt input:checked ~ .fbox{background:var(--navy);border-color:var(--navy)}
.fopt input:checked ~ .fbox svg{stroke-dashoffset:0}
.fopt input:checked ~ .ftx{color:var(--navy);font-weight:500}
.fopt:active .fbox{transform:scale(.90)}
/* foco de teclado visible: el control real es el input, escondido */
.fopt input:focus-visible ~ .fbox{outline:2px solid var(--celeste);outline-offset:2px}

.ftx{transition:color .4s var(--ease-out)}
.fnum{margin-left:auto;font-size:12px;color:#566a78;
  background:rgba(9,35,71,.06);border-radius:20px;padding:2px 8px;min-width:26px;text-align:center}
.fopt:hover .fnum,.fopt input:checked ~ .fnum{background:rgba(9,35,71,.10);color:#5d7280}

.f-more{display:inline-block;margin:var(--s2) 0 0 var(--s3);border:none;background:none;
  cursor:pointer;font-family:var(--body);font-size:13px;color:var(--celeste-dark);
  padding:5px 8px;border-radius:8px;letter-spacing:0;
  transition:background-color .45s var(--ease-out)}
.f-more:hover{background:rgba(37,187,238,.10)}
/* Una sola fila y SIN regla al pie: la grilla de productos ya separa sola. */
.res-bar{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s5) var(--s4);flex-wrap:wrap}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
/* Pastilla clara con filo, de la misma familia que el panel de vidrio. La
   versión anterior era un óvalo navy macizo: pesaba más que los productos. */
.chip{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--navy);
  font-family:var(--disp);font-size:13.5px;font-weight:500;
  padding:7px 7px 7px 14px;border-radius:50px;
  box-shadow:0 1px 2px rgba(9,35,71,.04);
  animation:chipEntra .45s var(--ease-out) both;
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.chip:hover{border-color:#c8d2da;box-shadow:0 4px 14px rgba(9,35,71,.07)}
/* la ✕ vive en su propio círculo: es lo que se aprieta, tiene que verse */
.chip svg{width:22px;height:22px;padding:5px;border-radius:50%;flex-shrink:0;
  background:rgba(9,35,71,.05);fill:none;stroke:#5d7280;stroke-width:1.8;
  stroke-linecap:round;transition:background-color .35s var(--ease-out),stroke .35s var(--ease-out)}
.chip:hover svg{background:var(--navy);stroke:#fff}
@keyframes chipEntra{from{opacity:0;transform:translateY(-4px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chip{animation:none}}
.chip.clear{background:none;border-color:transparent;box-shadow:none;
  color:var(--gray);padding:8px 14px;font-weight:400}
.chip.clear:hover{background:rgba(9,35,71,.06);color:var(--navy);box-shadow:none}

.res-der{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.count{font-size:14px;color:var(--gray)}
.count b{color:var(--navy);font-weight:600}

/* Select nativo con la flecha propia oculta: se ve como control del sitio y
   sigue siendo un <select> de verdad (teclado, mobile, y directo a Shopify). */
.sortbox{position:relative;display:inline-flex;align-items:center;gap:var(--s2);
  background:#fff;border:1px solid var(--line);border-radius:50px;
  padding:9px 40px 9px 16px;font-size:14px;color:var(--gray);cursor:pointer;
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.sortbox:hover{border-color:#c8d2da;box-shadow:0 4px 14px rgba(9,35,71,.06)}
.sortbox select{appearance:none;-webkit-appearance:none;border:none;background:none;
  font-family:var(--disp);font-size:14px;font-weight:600;color:var(--navy);
  cursor:pointer;outline:none;padding:0}
.sort-chev{position:absolute;right:15px;width:15px;height:15px;pointer-events:none;
  fill:none;stroke:#8496a3;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sortbox:focus-within{border-color:var(--celeste);box-shadow:0 0 0 3px rgba(37,187,238,.18)}
.cat-layout .p-grid{grid-template-columns:repeat(3,1fr);margin-top:28px}

/* ficha */
/* ══ FICHA DE PRODUCTO ══
   La columna de compra queda PEGAJOSA mientras la galería scrollea: es lo que
   hace que un catálogo largo no obligue a volver arriba para el CTA. */
.pdp-hero{background:var(--fondo);padding:var(--s5) 0 clamp(var(--s8),7vw,104px)}
.pdp-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(var(--s7),4vw,72px);
  align-items:start}
/* Se invierte quién queda quieto: la GALERÍA se clava a pantalla completa y la
   columna de la derecha scrollea contra ella con todo el contenido del
   producto. Cuando ese contenido se agota, la sección termina y la página
   sigue normal. OJO: para que el sticky funcione, ningún ancestro puede tener
   overflow distinto de visible. */
.gal{position:sticky;top:var(--gal-top,96px);height:var(--gal-alto,calc(100svh - 190px));
  display:flex;flex-direction:column;gap:var(--s3)}

/* Galería: la máquina reposa sobre un plano claro, sin marco. El recuadro con
   borde de 1px hacía que el recorte pareciera un parche pegado. */
.gal-vista{position:relative;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 12%,#fff 0%,#eef1f4 100%);
  flex:1;min-height:0}
.gal-img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  padding:clamp(var(--s5),3vw,var(--s7));object-fit:contain;object-position:center;
  filter:drop-shadow(0 26px 40px rgba(9,35,71,.14));
  transition:opacity .45s var(--ease-out)}
.gal-vista.cambiando .gal-img{opacity:0}

.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
  flex-shrink:0;height:clamp(88px,11vh,116px)}
.thumb{position:relative;height:100%;border-radius:14px;cursor:pointer;padding:0;
  background:#fff;border:1.5px solid var(--line);overflow:hidden;
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out),transform .4s var(--ease-out)}
.thumb:hover{border-color:#c8d2da;transform:translateY(-2px)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  padding:11%;object-fit:contain}
.thumb.act{border-color:var(--navy);box-shadow:0 0 0 3px rgba(9,35,71,.10)}
.thumb-video{display:flex;flex-direction:column;gap:6px;color:var(--gray);font-size:12px;
  align-items:center;justify-content:center}
.thumb-video svg{width:26px;height:26px;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.6;stroke-linejoin:round}

/* ══ Columna de compra ══
   Jerarquía: una línea de ubicación, el NOMBRE grande, un claim de un
   renglón, y la descripción corrida.
   NO hay cifras sueltas (superficie, bandejas, etapas, medidas): en el
   catálogo del cliente todo eso viene junto en UNA celda y sin separar por
   comas, así que no se puede partir en items sin cargarlo a mano producto por
   producto. Va como texto, que es como llega. La MODALIDAD sí es campo
   propio —es con lo que filtra el catálogo— y por eso queda en pastillas. */
/* RAMIFICACIÓN: modalidad › categoría › subcategoría. Las tres salen de
   columnas del Excel. La modalidad admite varias y va agrupada al principio
   (separadas por un punto medio), y después baja la jerarquía con chevrones.
   Cada eslabón lleva al catálogo filtrado, así que son enlaces de verdad y no
   una miga decorativa. */
.pdp-ram{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:14px;color:var(--gray);margin:0 0 var(--s4)}
.pdp-ram a{color:var(--gray);text-decoration:none;
  transition:color .4s var(--ease-out)}
.pdp-ram a:hover{color:var(--celeste-dark)}
.pdp-ram .ram-mod{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pdp-ram .ram-mod a{color:var(--celeste-txt);font-weight:500}
.pdp-ram .ram-mod a + a::before{content:"·";margin-right:var(--s2);color:#b3c0c9}
.pdp-ram .ram-sep{color:#b3c0c9}
/* el último eslabón es dónde estás parado */
.pdp-ram > a:last-child{color:var(--navy);font-weight:500}

/* INFO DESTACADA: la columna "Medidas/Info destacada" del Excel, partida por
   comas. Sin título —son datos del equipo, no una sección— y sin cifras
   gigantes: los ítems llegan como frases de largo impredecible ("1 carro",
   "Gas, envasado, eléctrico, gasoil o biomasa") y una grilla de números se
   rompe con el primero que se pase de largo. La pastilla se adapta sola. */
.pdp-dest{display:flex;flex-wrap:wrap;gap:var(--s2);
  list-style:none;margin:var(--s5) 0 0;padding:0}
.pdp-dest li{font-size:14px;line-height:1.35;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:50px;
  padding:8px 15px}
.pdp h1{font-family:var(--disp);font-weight:600;font-size:clamp(32px,3.4vw,48px);
  letter-spacing:-.042em;line-height:1.02;margin:0}
.pdp-claim{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.7vw,23px);
  letter-spacing:-.028em;color:var(--celeste-dark);margin:var(--s4) 0 0}
/* Primer párrafo de la descripción larga, subido al lugar donde iría una
   descripción corta (que el catálogo no tiene). */
/* DESCRIPCIÓN CORTA — columna propia del catálogo.
   Al ancho completo de la columna: la de compra ya es angosta y ponerle
   encima un tope de medida dejaba el texto cortado a media caja, con un vacío
   a la derecha que se leía como un error de maqueta. */
.pdp-corta{font-size:16.5px;color:var(--gray);line-height:1.62;
  margin-top:var(--s4)}

/* Enumeraciones como pastillas: cada valor es una opción, y como pastilla se
   lee que son opciones. En fila de tabla parecía un valor único larguísimo. */
.pdp-pills{margin-top:clamp(var(--s6),3vw,var(--s7));display:grid;gap:var(--s5)}
.pp-k{display:block;font-size:13px;color:var(--gray);margin-bottom:var(--s3)}
.pp-v{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pp-v b{font-family:var(--disp);font-size:13.5px;font-weight:500;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:50px;padding:7px 14px}

/* UN solo botón lleno. Dos rellenos de colores distintos compiten y ninguno
   gana; el segundo camino va como enlace tranquilo. */
.pdp-acts{margin-top:clamp(var(--s6),3vw,var(--s7))}
.pdp-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pdp-acts .btn{width:100%;height:54px;font-size:15.5px;padding:0 var(--s5)}
.pdp-acts .btn .fb-ar.izq{display:none}
.pdp-acts .btn .fb-ar.der{right:20px}
.pdp-acts .btn:hover .fb-ar.der{right:14px}
.pdp-acts .btn .fb-t,.pdp-acts .btn:hover .fb-t{transform:none}
.pdp-busq{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  height:54px;border:1.5px solid var(--line);border-radius:100px;
  background:#fff;font-family:var(--disp);font-size:15.5px;font-weight:600;color:var(--navy);
  text-align:center;line-height:1.2;padding:0 var(--s4);
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.pdp-busq:hover{border-color:#c8d2da;box-shadow:0 6px 20px rgba(9,35,71,.08)}
.pdp-busq svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pdp-alt{display:flex;align-items:center;justify-content:center;
  margin-top:var(--s3);font-family:var(--body);font-size:14.5px;
  color:var(--gray);padding:10px;border-radius:12px;
  transition:color .4s var(--ease-out)}
.pdp-alt:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}


.pdp-garantias{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s3)}
.pdp-garantias li{display:flex;align-items:center;gap:var(--s3);
  font-size:14.5px;color:var(--gray);line-height:1.4}
.pdp-garantias svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* La ficha técnica es una descarga, no un botón más: se muestra como archivo */
.pdp-pdf{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:var(--s4) var(--s5);
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.pdp-pdf:hover{border-color:#c8d2da;box-shadow:0 6px 20px rgba(9,35,71,.07)}
.pdp-pdf svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pdp-pdf b{font-family:var(--disp);font-size:15px;font-weight:600;display:block;color:var(--navy)}
.pdp-pdf small{font-size:13px;color:var(--gray);display:block;margin-top:2px}

/* ── Descripción, ahora dentro de la columna que scrollea ── */
.pdp-largo{margin-top:clamp(var(--s8),6vw,96px)}
/* VARIANTES DEL PRODUCTO. No son productos con ficha propia: son cómo se
   configura ESTE equipo, así que van pegadas a la descripción y no en el
   estante de relacionados. Cada fila es una línea de la celda del catálogo:
   una etiqueta y sus opciones. Las opciones van en pastilla porque llegan
   separadas de verdad (por barra) y son cortas. */
.pdp-var{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.pdp-var h3{font-family:var(--disp);font-size:19px;font-weight:600;
  letter-spacing:-.025em;color:var(--navy);margin-bottom:var(--s5)}
.var-fila{display:grid;grid-template-columns:132px 1fr;gap:var(--s4);
  align-items:baseline;padding:var(--s4) 0;border-top:1px solid var(--line)}
.var-fila:first-of-type{border-top:0;padding-top:0}
.var-k{font-size:14px;color:var(--gray)}
.var-v{display:flex;flex-wrap:wrap;gap:var(--s2)}
.var-v b{font-size:14px;font-weight:500;line-height:1.35;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:50px;padding:7px 14px}
@media (max-width:640px){.var-fila{grid-template-columns:1fr;gap:var(--s3)}}
.var-ayuda{display:inline-block;margin-top:var(--s5);font-size:14px;
  color:var(--celeste-txt);font-weight:500;
  transition:color .4s var(--ease-out)}
.var-ayuda:hover{color:var(--celeste-dark)}
.pdp-largo .body-copy h2.sec{margin-top:var(--s3);font-size:clamp(24px,2.2vw,32px);max-width:20ch}
.pdp-largo .body-copy p{font-size:16px;line-height:1.7;color:#3d4f5c;margin-top:var(--s4)}

/* ── Respaldo ── */
.diffs{background:var(--fondo);padding:clamp(var(--s8),7vw,104px) 0}
.d-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7)}
.d-cell{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:var(--s6) var(--s5);text-align:left}
.d-cell .ico{width:44px;height:44px;margin-bottom:var(--s5);border-radius:13px;
  background:rgba(37,187,238,.10);display:grid;place-items:center}
.d-cell .ico svg{width:22px;height:22px;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d-cell b{display:block;font-family:var(--disp);font-weight:200;
  font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums}
.d-cell b.texto{font-size:clamp(20px,1.9vw,27px);font-weight:600;letter-spacing:-.028em;line-height:1.1}
.d-cell span{font-size:14px;color:var(--gray);display:block;margin-top:var(--s3);line-height:1.5}

/* ── Variantes ── */

@media (max-width:640px){.pdp-par{grid-template-columns:1fr}}
@media (max-width:1080px){
  .pdp-grid{grid-template-columns:1fr;gap:var(--s7)}
  .pdp{position:static}
  .gal{position:static;height:auto}
  .gal-vista{aspect-ratio:4/3;flex:none}
  .thumbs{height:auto}
  .thumb{aspect-ratio:1;height:auto}
  .desc-grid{grid-template-columns:1fr}
  .d-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.d-grid{grid-template-columns:1fr}}

/* Full bleed: en pantallas anchas la grilla suma columnas en vez de estirar */
@media (min-width:1800px){
  .cat-grid,.p-grid{grid-template-columns:repeat(5,1fr)}
  .pr-grid{grid-template-columns:repeat(10,1fr)}
  .cat-layout{grid-template-columns:300px 1fr}
  .cat-layout .p-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1080px){
  .cat-grid,.p-grid,.cat-layout .p-grid{grid-template-columns:repeat(2,1fr)}
  .pr-grid{grid-template-columns:repeat(4,1fr)}
  .split,.pdp-grid,.desc-grid{grid-template-columns:1fr;gap:36px}
  .t-grid,.d-grid{grid-template-columns:repeat(2,1fr)}
  .cat-layout{grid-template-columns:1fr}
  .filters{position:static}
  .f-top{grid-template-columns:1fr 1fr}
}
/* El menú entero deja de entrar por debajo de ~1180: hasta acá se apretó todo
   lo apretable sin bajar de 14px. OJO: abajo de este ancho el sitio se queda
   SIN navegación —todavía no hay menú hamburguesa—; el único camino es el pie. */
@media (max-width:1180px){ nav.main{display:none} }
@media (max-width:640px){
  .wrap{padding:0 20px}
  :root{--inset:20px}
  section{padding:64px 0}
  .cat-grid,.p-grid,.n-grid,.cat-layout .p-grid{grid-template-columns:1fr}
  .pr-grid{grid-template-columns:repeat(3,1fr)}
  .hero-stats .wrap{grid-template-columns:1fr 1fr;row-gap:var(--s7)}
  .specs{grid-template-columns:1fr}
}

/* ══ IMÁGENES REALES ══ */
/* .ph es el placeholder. Cuando haya foto, se usa <img class="ph-img"> dentro
   del mismo contenedor y el placeholder queda como fallback debajo. */
.ph>img.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.ph.contain>img.ph-img{object-fit:contain;padding:8%}
/* Máquina recortada dentro de una tarjeta oscura: necesita piso claro para
   leerse; el degradado de la card la funde igual por abajo. */
.ph.sobre-claro{background:linear-gradient(180deg,#fff 0%,#eef1f3 100%)}
/* ── Foto de producto QUE TRAE SU PROPIO FONDO ──
   Si el render no vino recortado, `contain` la deja como un rectángulo con
   bordes duros flotando dentro de la tarjeta (parece un parche pegado).
   Con `.ph.con-fondo` la foto pasa a llenar el tile de punta a punta: se lee
   como una foto y no como un recorte fallido. */
.ph.con-fondo>img.ph-img{object-fit:cover;padding:0}
.pcard .media:has(.ph.con-fondo){background:none}
.pcard .ph.con-fondo{height:330px}

/* En tarjeta el aire interno es menor: la máquina tiene que dominar el cuadro */
.cat .ph.contain>img.ph-img{padding:5% 8% 12%}
.pcard .ph.contain>img.ph-img{padding:9%}
.gal .thumbs .ph.contain>img.ph-img{padding:8%}
.ph:has(img.ph-img)>span{display:none}
.ph:has(img.ph-img)::before,.ph:has(img.ph-img)::after{display:none}

/* ══ QUIÉNES SOMOS + SERVICIO TÉCNICO ══ */
/* banner interno con foto: reusa .hero con padding reducido */
.hero.compact .wrap{padding-top:96px;padding-bottom:84px}

/* cuerpo editorial genérico */
.sec-white{background:var(--fondo)}
.sec-bone{background:var(--fondo)}
.split .ph{border-radius:var(--r)}
.prose p{font-size:16px;line-height:1.8;color:#3d4f5c;margin-bottom:18px;max-width:66ch}
.prose p:last-child{margin-bottom:0}

/* banda de números institucionales */
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px;text-align:center}
.num-grid b{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3vw,42px);letter-spacing:-.038em;color:#fff;display:block}
/* 15 px y no 11,5: la etiqueta del número también se lee. */
.num-grid span{font-size:15px;color:#a9c9df;margin-top:10px;display:block}

/* El pico de la home, del lado derecho de la tarjeta oscura. Va abajo de todo
   (z 0) y el contenido por encima; la tarjeta ya recorta por overflow. */
/* La punta llega hasta la altura del título, no al borde de arriba: la
   figura sale por abajo y por la derecha, nunca por el techo de la tarjeta.
   El vértice del path está al 4,4 % del alto del SVG, de ahí los números. */
.dc-pico{position:absolute;z-index:0;right:-11%;bottom:-14%;height:96%;width:auto;
  opacity:.72;pointer-events:none;will-change:transform}
.dark-card > :not(.dc-pico){position:relative;z-index:1}
@media (max-width:900px){.dc-pico{right:-30%;height:100%}}

/* tarjetas de sub-marcas del grupo */
/* Cuatro marcas. El logo YA dice el nombre, así que no se repite debajo: la
   tarjeta es logo → a quién le habla → qué hace. El logo vive en una franja
   de alto fijo para que las cuatro pesen igual aunque cada uno tenga su
   proporción (el isologo de Argental es cuadrado, AMBRO es una tira). */
.brands-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s7)}
.brand{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(var(--s5),2vw,var(--s6));
  transition:border-color .45s var(--ease-out),transform .5s var(--ease-out),
             box-shadow .45s var(--ease-out)}
.brand:hover{border-color:transparent;transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(9,35,71,.10)}
.brand-logo{width:auto;height:auto;max-height:30px;max-width:132px;display:block}
.brand-marco{height:44px;display:flex;align-items:center;margin-bottom:var(--s5)}
.brand-seg{align-self:flex-start;font-size:13.5px;line-height:1.3;
  color:var(--celeste-txt);background:rgba(37,187,238,.10);
  border-radius:50px;padding:6px 13px}
.brand p{font-size:15px;color:var(--gray);line-height:1.6;margin-top:var(--s4)}
@media (max-width:1080px){.brands-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.brands-grid{grid-template-columns:1fr}}


/* variantes de grillas existentes */
.t-grid.c3{grid-template-columns:repeat(3,1fr)}
.d-grid.c4{grid-template-columns:repeat(4,1fr)}
a.t-cell{display:block;transition:all 0.45s var(--ease-out)}
a.t-cell:hover h3{color:var(--celeste)}

/* timeline de historia */
.tl{margin-top:56px;position:relative}
.tl::before{content:"";position:absolute;left:150px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-item{position:relative;display:grid;grid-template-columns:110px 1fr;gap:80px;padding:26px 0}
.tl-item::before{content:"";position:absolute;left:144px;top:34px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--dorado)}
.tl-item .yr{font-size:13px;color:var(--celeste);text-align:right;padding-top:4px}
.tl-item h3{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.02em}
.tl-item p{font-size:15px;color:var(--gray);line-height:1.65;margin-top:8px;max-width:56ch}
.tl-item .ph{height:170px;max-width:440px;margin-top:16px;border-radius:var(--r)}
.tl-quote{padding:34px 0 10px;display:grid;grid-template-columns:110px 1fr;gap:80px}
.tl-quote p{font-family:var(--disp);font-weight:300;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.025em;line-height:1.25;max-width:22ch}
.tl-quote p b{font-weight:600;color:var(--celeste)}

@media (max-width:1080px){
  .brands-grid,.d-grid.c4{grid-template-columns:repeat(2,1fr)}
  .t-grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .num-grid{grid-template-columns:1fr 1fr;gap:22px}
  .brands-grid,.t-grid.c3,.d-grid.c4{grid-template-columns:1fr}
  .tl::before{left:6px}
  .tl-item,.tl-quote{grid-template-columns:1fr;gap:10px;padding-left:28px}
  .tl-item::before{left:0;top:30px}
  .tl-item .yr{text-align:left}
}

/* En las cards oscuras el cuerpo monta sobre la foto: la etiqueta del
   placeholder va arriba para que siga legible mientras no haya fotos. */
.cat .ph,.ncard .ph,.pcard.dark .ph{align-items:flex-start}

/* Iconos sociales del footer */
.soc-row{display:flex;gap:var(--s2);margin-top:var(--s4)}

/* ══ ESTANTE HORIZONTAL ══ */
/* Una sola fila de tarjetas verticales que se arrastra de costado, con los
   filtros arriba. El estante sangra hasta el borde derecho de la pantalla
   para que se lea "hay más", pero arranca alineado con el texto. */

/* ══ CONTROL SEGMENTADO ══
   Una sola pieza: riel gris con la opción activa como pastilla oscura adentro.
   Reemplaza a los chips sueltos — se lee como UN control, no como seis botones. */
.seg{display:inline-flex;align-items:center;gap:var(--s1);
  background:#e8e8ed;border-radius:50px;padding:5px;max-width:100%;
  overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-b{font-family:var(--disp);font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--navy);background:none;border:none;cursor:pointer;white-space:nowrap;
  height:40px;padding:0 var(--s5);border-radius:50px;
  transition:background-color .45s var(--ease-out),color .45s var(--ease-out)}
.seg-b:hover{background:rgba(255,255,255,.55)}
.seg-b.on{background:var(--navy);color:#fff}
.seg-b.on:hover{background:var(--navy)}
@media (max-width:640px){.seg{width:100%}.seg-b{font-size:14px;padding:0 var(--s4)}}
.cats .sec-head.centrado{margin-bottom:var(--s6)}
.shelf-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-top:var(--s7)}
.shelf-tools{display:flex;align-items:center;gap:var(--s5)}
.shelf-link{font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--celeste-dark);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:gap 0.45s var(--ease-out)}
.shelf-link:hover{gap:12px}
.shelf-nav{display:flex;gap:var(--s2)}
.shelf-nav button{width:46px;height:46px;border-radius:50%;border:none;
  background:#fff;color:var(--navy);font-size:17px;cursor:pointer;display:grid;place-items:center;
  transition:all .45s var(--ease-out)}
.shelf-nav button:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.shelf-nav button:disabled{opacity:.3;cursor:default}

/* flex, no grid: con grid, al filtrar y quedar una sola tarjeta el 1fr la
   estiraba a todo el ancho. Acá el ancho de la tarjeta es fijo siempre. */
/* Sangrado a AMBOS lados: el contenedor llega a los dos bordes de la pantalla
   y el padding lateral (misma medida) deja la primera tarjeta alineada con el
   título. Si se sangra solo a la derecha, al scrollear las tarjetas se cortan
   contra un borde invisible a la izquierda.
   padding vertical: sin esto el estante recorta la tarjeta al levantarse. */
.shelf{display:flex;
  gap:var(--s5);margin-top:var(--s6);padding-top:var(--s3);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:var(--s5);scrollbar-width:none;
  margin-right:calc(-1 * (50vw - 50%));padding-right:calc(50vw - 50%);
  margin-left:calc(-1 * (50vw - 50%));padding-left:calc(50vw - 50%);
  scroll-padding-inline:var(--inset);overflow-anchor:none}
.shelf::-webkit-scrollbar{display:none}
.shelf>*{scroll-snap-align:start;flex:0 0 320px}
@media (min-width:1500px){.shelf>*{flex-basis:340px}}
@media (max-width:640px){
  .shelf>*{flex-basis:78%}
  .shelf-nav{display:none}
}

/* ══ ESTANTE ANCHO (equipos en uso) ══
   Piezas grandes en las que manda la FOTO: el equipo trabajando en un obrador
   real, no el render sobre blanco. El texto va al pie, sobre la imagen. */
.wide-shelf{display:flex;gap:var(--s5);margin-top:var(--s7);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding-top:var(--s3);padding-bottom:var(--s5);
  margin-right:calc(-1 * (50vw - 50%));padding-right:calc(50vw - 50%);
  margin-left:calc(-1 * (50vw - 50%));padding-left:calc(50vw - 50%);
  scroll-padding-inline:var(--inset);overflow-anchor:none}
.wide-shelf::-webkit-scrollbar{display:none}
.wide-shelf>*{flex:0 0 clamp(300px,58vw,880px);scroll-snap-align:center}

.wcard{position:relative;display:block;aspect-ratio:16/10;border-radius:22px;
  overflow:hidden;background:var(--navy);
  transition:transform .55s var(--ease-out)}
.wcard:hover{transform:translateY(-4px)}
.w-par{position:absolute;left:0;right:0;top:-9%;bottom:-9%;display:block;
  will-change:transform;overflow:hidden}
.wcard .w-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out)}
.wcard:hover .w-foto{transform:scale(1.04)}
/* sombras arriba y abajo: el logo y el texto se leen sobre cualquier foto */
.wcard::before{content:"";position:absolute;left:0;right:0;top:0;height:32%;z-index:2;
  pointer-events:none;background:linear-gradient(to bottom,rgba(6,10,18,.62) 0%,transparent 100%)}
.wcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:2;
  pointer-events:none;background:linear-gradient(to top,rgba(6,10,18,.9) 0%,rgba(6,10,18,.45) 45%,transparent 100%)}
/* Logo de la marca arriba, en blanco */
.w-logo{position:absolute;top:var(--s5);left:var(--s5);z-index:3;
  height:26px;width:auto;object-fit:contain}
.w-logo.es-ambro{height:20px}
/* Pie: el NOMBRE manda a la izquierda, el CTA va a la derecha */
.w-bar{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.w-txt b{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(22px,2.1vw,30px);line-height:1.12;letter-spacing:-.03em;color:#fff}
.w-txt span{display:block;margin-top:var(--s2);font-size:15px;
  color:rgba(255,255,255,.82);line-height:1.35}
.w-pill{flex-shrink:0;height:42px;padding:0 var(--s5);border-radius:50px;
  display:inline-flex;align-items:center;background:rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--disp);font-size:14.5px;font-weight:600;color:#fff;
  transition:background-color .45s var(--ease-out)}
.wcard:hover .w-pill{background:rgba(255,255,255,.4)}
@media (max-width:640px){
  .wide-shelf>*{flex-basis:84%}
  .wcard{aspect-ratio:4/3}
  .w-logo{top:var(--s4);left:var(--s4);height:22px}
  .w-bar{left:var(--s4);right:var(--s4);bottom:var(--s4);gap:var(--s3);
    flex-direction:column;align-items:flex-start}
  .w-txt span{font-size:14px}
}

/* ══ TITULAR CON DEGRADADO EN MOVIMIENTO ══ */
/* Solo para titulares que van SOLOS en su sección (el claim). Si se usa en
   una sección con más elementos, ensucia. */
/* OJO: sin dorado. El amarillo no va en ningún degradado del sitio. */
.grad-move{background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 20%,
    var(--celeste-dark) 38%,#7fd8f7 50%,var(--celeste-dark) 62%,var(--navy) 80%,var(--navy) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:grad 9s linear infinite;
  /* background-clip:text pinta el fondo SOLO dentro de la caja del elemento.
     Con line-height 1.04 la panza de la "p", la "g" y la "j" queda por debajo
     de esa caja: no recibe fondo y se ve CORTADA de un tajo recto. Se agranda
     la caja de pintura y se descuenta con el margen, así el texto se dibuja
     entero y el layout no se mueve ni un pixel. */
  padding-bottom:.2em;margin-bottom:-.2em;
  padding-top:.06em;margin-top:-.06em}
@keyframes grad{0%{background-position:180% 50%}100%{background-position:-80% 50%}}
@media (prefers-reduced-motion:reduce){.grad-move{animation:none;background-position:0 50%}}

/* ══ DEMOS ══
   REALIDAD QUE MANDA EN ESTE DISEÑO: las demos se planifican con quince días
   de anticipación como mucho. Casi nunca hay más de UNA fecha publicada, y a
   veces no hay ninguna. Por eso la página NO es un calendario —un calendario
   vacío la mitad del año da lástima— sino tres cosas en este orden:
     1. la próxima, entera y con su cronograma;
     2. el aviso por zona, que es lo único útil cuando no hay fecha;
     3. dónde estuvimos, que prueba que esto pasa todo el tiempo.
   Si no hay ninguna cargada, el bloque 1 se reemplaza por .prox-vacia y la
   página sigue teniendo sentido. */

/* ── 1. La próxima ─────────────────────────────────────────── */
.prox{display:grid;grid-template-columns:1.05fr .95fr;
  background:#fff;border-radius:30px;overflow:hidden;
  box-shadow:0 26px 70px rgba(9,35,71,.12);margin-top:var(--s7)}
.prox-foto{position:relative;min-height:340px;background:var(--navy)}
.prox-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prox-tipo{position:absolute;z-index:2;left:var(--s5);top:var(--s5);
  font-family:var(--disp);font-size:13.5px;font-weight:500;color:#fff;
  background:rgba(9,35,71,.55);backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);padding:6px 14px;border-radius:50px}
.prox-cuerpo{padding:clamp(var(--s6),3.5vw,var(--s8))}
.prox-cuerpo h3{font-family:var(--disp);font-weight:600;
  font-size:clamp(26px,2.6vw,36px);letter-spacing:-.032em;line-height:1.12;
  color:var(--navy);text-wrap:balance}
.prox-meta{display:grid;gap:var(--s5);margin-top:var(--s6)}
/* > div a propósito: sin el hijo directo, la regla también le pegaba al div
   de adentro y el título se metía en la columna de 22 px del icono. */
.prox-meta > div{display:grid;grid-template-columns:22px 1fr;gap:var(--s4);align-items:start}
.prox-meta svg{width:20px;height:20px;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.prox-meta b{display:block;font-family:var(--disp);font-size:17px;font-weight:600;
  letter-spacing:-.02em;color:var(--navy)}
.prox-meta span{display:block;margin-top:3px;font-size:15px;line-height:1.5;color:var(--gray)}
.prox-cuerpo .btn-row{margin-top:var(--s7)}
@media (max-width:900px){
  .prox{grid-template-columns:1fr}
  .prox-foto{min-height:240px;aspect-ratio:16/9}
}

/* Sin fecha publicada: el mismo lugar, otro mensaje. Nunca una caja vacía. */
.prox-vacia{margin-top:var(--s7);background:#fff;border-radius:30px;
  padding:clamp(var(--s7),5vw,var(--s8));text-align:center;
  box-shadow:0 20px 56px rgba(9,35,71,.09)}
.prox-vacia h3{font-family:var(--disp);font-weight:600;
  font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;color:var(--navy);
  max-width:26ch;margin-inline:auto;text-wrap:balance}
.prox-vacia p{margin-top:var(--s4);font-size:16.5px;line-height:1.6;color:var(--gray);
  max-width:52ch;margin-inline:auto}

/* ── "Junto a": los aliados de cada fecha ──────────────────── */
.aliados{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.aliados .lbl{font-size:14px;color:var(--gray)}
.aliados-fila{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s5) clamp(var(--s5),3vw,var(--s6));margin-top:var(--s4)}
.aliados-fila img{width:auto;height:auto;max-width:104px;max-height:34px;display:block}

/* ── 2. Cronograma ─────────────────────────────────────────── */
/* Cada bloque es una elaboración: hora, qué se hace y CON QUÉ. Los equipos
   son links a la ficha: el cronograma es la mejor puerta al catálogo que
   tiene el sitio —el panadero ya vio la máquina trabajando—. */
.crono{display:grid;gap:var(--s3);margin-top:var(--s7)}
.bloque{display:grid;grid-template-columns:104px 1fr;gap:clamp(var(--s5),3vw,var(--s6));
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:var(--s5) clamp(var(--s5),3vw,var(--s6))}
.bl-hora{font-family:var(--disp);font-weight:300;font-size:clamp(22px,2vw,28px);
  letter-spacing:-.04em;color:var(--navy);line-height:1.1}
.bl-tx h3{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.025em;
  color:var(--navy);line-height:1.25}
.bl-invitado{margin-top:4px;font-size:15px;color:var(--celeste-txt)}
.bl-eq{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px}
.bl-eq a,.bl-eq span{font-size:14.5px;border-radius:50px;padding:6px 13px;
  background:var(--fondo);color:var(--gray);
  transition:background .4s var(--ease-out),color .4s var(--ease-out)}
.bl-eq a:hover{background:var(--navy);color:#fff}
/* el equipo protagonista de la elaboración pesa más que los de apoyo */
.bl-eq .ppal{background:rgba(37,187,238,.12);color:var(--celeste-txt);font-weight:500}
.bl-eq a.ppal:hover{background:var(--celeste-dark);color:#fff}
.crono-pie{margin-top:var(--s5);font-size:14px;color:var(--gray)}
@media (max-width:640px){
  .bloque{grid-template-columns:1fr;gap:var(--s3)}
}

/* ── 3. Avisame cuando vengan a mi zona ────────────────────── */
/* Con quince días de aviso, un calendario no le sirve a nadie: lo que sirve
   es estar en la lista. Este bloque es la conversión real de la página. */
.aviso{background:var(--navy);color:#fff;border-radius:30px;
  padding:clamp(var(--s7),5vw,var(--s8)) clamp(var(--s6),5vw,var(--s8));
  position:relative;isolation:isolate;overflow:hidden}
.aviso::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 8%,rgba(37,187,238,.32),transparent 62%)}
.aviso h2{font-family:var(--disp);font-weight:600;letter-spacing:-.032em;
  font-size:clamp(24px,2.6vw,36px);line-height:1.14;max-width:20ch;text-wrap:balance}
.aviso p{margin-top:var(--s4);font-size:16.5px;line-height:1.6;
  color:rgba(255,255,255,.8);max-width:52ch}
.aviso-form{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7);align-items:center}
.aviso-form select{font-family:var(--body);font-size:16px;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  border-radius:50px;padding:14px 22px;min-width:260px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:17px;
  padding-right:48px}
.aviso-form select option{color:var(--navy);background:#fff}

/* ── 4. Dónde estuvimos ────────────────────────────────────── */
.pasadas{display:flex;gap:var(--s5);margin-top:var(--s7);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding-top:var(--s2);padding-bottom:var(--s5);
  margin-right:calc(-1 * (50vw - 50%));padding-right:calc(50vw - 50%);
  margin-left:calc(-1 * (50vw - 50%));padding-left:calc(50vw - 50%);
  scroll-padding-inline:var(--inset);overflow-anchor:none}
.pasadas::-webkit-scrollbar{display:none}
.pasadas>*{flex:0 0 clamp(270px,26vw,380px);scroll-snap-align:start}
.pasada-foto{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  background:var(--navy)}
.pasada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pasada h3{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.025em;
  color:var(--navy);margin-top:var(--s4)}
.pasada p{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--gray)}
@media (max-width:640px){.pasadas>*{flex-basis:240px}}

/* ══ PORTADA DE PÁGINA ══
   Foto grande de apertura como TARJETA redondeada dentro del .wrap. Un banner
   a sangre pega la foto contra el borde de la pantalla y el sitio deja de
   respirar; acá el aire del .wrap sigue existiendo arriba de la foto. */
.portada-sec{background:var(--fondo);padding-bottom:clamp(var(--s7),5vw,var(--s8))}
.portada{position:relative;margin:0;border-radius:30px;overflow:hidden;background:var(--navy)}
.portada img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
.portada figcaption{position:absolute;left:clamp(var(--s5),3vw,var(--s7));
  right:clamp(var(--s5),3vw,var(--s7));bottom:clamp(var(--s5),3vw,var(--s6));
  z-index:2;color:#fff;font-size:15px}
.portada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,12,22,.72),transparent)}
@media (max-width:640px){.portada img{aspect-ratio:4/3}}

/* ══ SERVICIO TÉCNICO — ¿QUÉ LE PASA A TU EQUIPO? ══
   Un panadero con el horno parado no viene a leer: viene a resolver. El
   módulo pregunta qué está pasando, muestra las dos o tres cosas que puede
   mirar él mismo en un minuto y, si no se arregla, abre el WhatsApp con el
   mensaje ya escrito. Botones grandes: se toca con la mano llena de harina. */
.diag-sec{background:#fff}
/* Tarjetas de diagnóstico: blancas con borde fino, SIN fondo gris. Lo que
   ordena es la jerarquía, no la caja: el ícono arriba a la izquierda, el
   síntoma en 22 px, un adelanto de
   la respuesta en gris y, abajo, "Ver qué hacer" con el chevrón. La pista
   está SIEMPRE visible: en touch no existe el hover. */
.diag{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
.sint{position:relative;display:flex;flex-direction:column;align-items:stretch;
  gap:var(--s4);width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:var(--s5) var(--s5) var(--s4);min-height:220px;
  transition:border-color .45s var(--ease-out),transform .5s var(--ease-out),
             box-shadow .45s var(--ease-out)}
.sint:hover{border-color:var(--celeste);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(9,35,71,.08)}
.sint.on{border-color:transparent;transform:none;box-shadow:0 18px 46px rgba(9,35,71,.13)}
/* sin número: el ícono solo, arriba a la izquierda, un poco más presente */
.si-top{display:flex;align-items:flex-start}
.si-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(37,187,238,.10);transition:background .45s var(--ease-out)}
.si-ico svg{width:20px;height:20px;fill:none;stroke:var(--celeste-dark);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s var(--ease-out)}
.sint.on .si-ico{background:var(--celeste)}
.sint.on .si-ico svg{stroke:#fff}
.si-tx{margin-top:var(--s2)}
.si-tx b{display:block;font-family:var(--disp);font-size:clamp(19px,1.6vw,22px);
  font-weight:600;letter-spacing:-.026em;line-height:1.18;color:var(--navy);
  text-wrap:balance;transition:color .4s var(--ease-out)}
.sint.on .si-tx b{color:var(--celeste-dark)}
.si-tx small{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--gray)}
.si-mas{display:flex;align-items:center;gap:var(--s2);margin-top:auto;padding-top:var(--s3);
  font-size:14px;font-weight:500;color:var(--celeste-txt)}
.si-mas .cerrar{display:none}
.sint.on .si-mas .ver{display:none}
.sint.on .si-mas .cerrar{display:inline}
.si-mas i{width:26px;height:26px;border-radius:50%;flex-shrink:0;position:relative;
  background:rgba(37,187,238,.14);
  transition:transform .5s var(--ease-out),background .45s var(--ease-out)}
.si-mas i::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:1.8px solid var(--celeste-dark);border-bottom:1.8px solid var(--celeste-dark);
  transform:translate(-50%,-65%) rotate(45deg)}
.sint.on .si-mas i{transform:rotate(180deg);background:var(--celeste)}
.sint.on .si-mas i::before{border-color:#fff}
@media (max-width:1080px){.diag{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.diag{grid-template-columns:1fr}.sint{min-height:0}}

/* La respuesta abre a lo ancho, debajo de la fila de la tarjeta tocada. */
.diag-resp{grid-column:1 / -1;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease-brand)}
.diag-resp.abierta{grid-template-rows:1fr}
.diag-resp > div{overflow:hidden}
.dr-in{background:var(--navy);color:#fff;border-radius:24px;
  padding:clamp(var(--s6),3.5vw,var(--s7));margin:var(--s2) 0 var(--s3);
  display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(var(--s5),4vw,var(--s7));
  align-items:start}
.dr-in h3{font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.9vw,26px);
  letter-spacing:-.028em;line-height:1.16;text-wrap:balance}
.dr-pasos{margin-top:var(--s5);display:grid;gap:var(--s4)}
.dr-pasos li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);
  font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.84);list-style:none}
.dr-pasos li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:600}
.dr-cta{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:var(--s5)}
.dr-cta p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.84)}
.dr-cta .btn{margin-top:var(--s5);width:100%;justify-content:center}
.dr-cta .fino{margin-top:var(--s4);font-size:14px;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .diag{grid-template-columns:1fr 1fr}
  .dr-in{grid-template-columns:1fr}
}
@media (max-width:560px){ .diag{grid-template-columns:1fr} }

/* ══ REPRESENTANTES — MAPA POR ZONA ══
   El mapa de Argentina es SVG dibujado con los polígonos reales de Natural
   Earth (dominio público), proyectados en cónica conforme de Lambert con
   paralelos −25/−50: es la proyección con la que se dibuja el país en los
   atlas. Mercator estira la Patagonia y Argentina deja de reconocerse.
   Cada zona comercial es UN path: se pinta y se clickea entera.
   El control real es la lista de la derecha —el mapa acompaña—: nada depende
   de pasar el mouse, y en el celular el mapa queda arriba y se usa la lista. */
.mapa-sec{background:#fff}
.mapa-grid{display:grid;grid-template-columns:minmax(230px,.55fr) 1fr;
  gap:clamp(var(--s6),5vw,var(--s8));align-items:start;
  margin-top:clamp(var(--s7),6vw,88px)}   /* aire entre el título y el mapa */
/* Se frena CENTRADO en la pantalla, no pegado arriba: el tope es lo que sobra
   de alto de pantalla por encima del mapa, partido en dos. */
.mapa-ar{position:sticky;top:calc((100vh - min(70vh,720px)) / 2 - 20px)}
.mapa-svg{display:block;margin-inline:auto;height:min(70vh,720px);width:auto;max-width:100%}
.zn{fill:#dbe3e9;stroke:#fff;stroke-width:1.3;cursor:pointer;
  transition:fill .5s var(--ease-out)}
.zn:hover{fill:#c3d0d9}
.zn.on{fill:var(--celeste)}
.mapa-planta{fill:var(--navy);stroke:#fff;stroke-width:2.5}
.mapa-halo{fill:none;stroke:var(--navy);stroke-width:2;opacity:.5;
  transform-origin:301px 369px;animation:latir 2.8s var(--ease-out) infinite}
@keyframes latir{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3.4);opacity:0}}
.mapa-pie{margin-top:var(--s5);display:flex;align-items:center;justify-content:center;
  gap:var(--s3);font-size:14px;color:var(--gray)}
.mapa-pie i{width:9px;height:9px;border-radius:50%;background:var(--navy);flex:0 0 auto}

.zonas{display:grid;gap:var(--s3)}
.zona{background:#fff;border:1px solid var(--line);border-radius:20px;
  transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.zona.on{border-color:transparent;box-shadow:0 16px 42px rgba(9,35,71,.10)}
.zo-cab{width:100%;display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5);background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;border-radius:20px}
.zo-cab i{width:11px;height:11px;border-radius:50%;background:#c3d0d9;flex:0 0 auto;
  transition:background .45s var(--ease-out)}
.zona.on .zo-cab i{background:var(--celeste)}
.zo-tx{flex:1 1 auto;min-width:0}
.zo-tx b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;
  letter-spacing:-.025em;color:var(--navy)}
.zo-tx span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--gray)}
.zo-mas{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--fondo);
  display:grid;place-items:center;position:relative;
  transition:background .45s var(--ease-out),transform .5s var(--ease-brand)}
.zo-mas::before,.zo-mas::after{content:"";position:absolute;background:var(--navy);
  border-radius:2px;transition:opacity .4s var(--ease-out)}
.zo-mas::before{width:12px;height:1.6px}
.zo-mas::after{width:1.6px;height:12px}
.zona.on .zo-mas{transform:rotate(135deg);background:var(--celeste)}
.zona.on .zo-mas::before,.zona.on .zo-mas::after{background:#fff}
/* apertura suave sin alto fijo: 0fr → 1fr */
.zo-cuerpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-brand)}
.zona.on .zo-cuerpo{grid-template-rows:1fr}
.zo-cuerpo>div{overflow:hidden}
.zo-in{padding:0 var(--s5) var(--s5);display:flex;flex-wrap:wrap;
  gap:var(--s4) clamp(var(--s5),3vw,var(--s7));align-items:center}
.zo-in .rc-lin{font-size:15px}
.zo-in .rc-wa{margin:0;flex:0 0 auto;padding:12px 22px}
@media (max-width:900px){
  .mapa-grid{grid-template-columns:1fr}
  .mapa-ar{position:relative;top:auto}
  .mapa-svg{height:min(56vh,520px)}
}

/* ══ TECNOLOGÍA — ADENTRO DE LA MÁQUINA ══
   Columna izquierda pegada con la foto de la capa activa; la derecha scrollea y
   cada paso que pasa por el medio de la pantalla enciende su foto. Es el mismo
   principio que la galería de la ficha: lo que se mueve es UNA sola columna. */
.capas-sec{background:#fff}
.capas{display:grid;grid-template-columns:1.02fr .9fr;
  gap:clamp(var(--s6),5vw,var(--s8));align-items:start;margin-top:var(--s6)}
.capas-vis{position:sticky;top:var(--capa-top,104px);
  aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:var(--navy);
  box-shadow:0 26px 70px rgba(9,35,71,.16)}
.capas-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity 1s var(--ease-out),transform 1.6s var(--ease-out)}
.capas-vis img.on{opacity:1;transform:none}
/* velo abajo para que se lean los pips sobre cualquier foto */
.capas-vis::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(6,12,22,.62),transparent)}
.capas-pips{position:absolute;z-index:3;left:0;right:0;bottom:var(--s5);
  display:flex;justify-content:center;gap:9px}
.capas-pips i{display:block;width:26px;height:3px;border-radius:3px;
  background:rgba(255,255,255,.34);transition:background .55s var(--ease-out)}
.capas-pips i.on{background:#fff}

.capa{min-height:56vh;padding:var(--s6) 0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:.3;transition:opacity .8s var(--ease-out)}
.capa.on{opacity:1}
.capa .cp-n{font-family:var(--disp);font-size:13px;font-weight:500;color:var(--celeste-txt)}
.capa h3{font-family:var(--disp);font-weight:600;font-size:clamp(25px,2.5vw,36px);
  letter-spacing:-.032em;line-height:1.12;margin-top:var(--s3);text-wrap:balance}
.capa p{margin-top:var(--s4);font-size:16.5px;line-height:1.6;color:var(--gray);max-width:44ch}
.capa .cp-dato{margin-top:var(--s5);display:flex;gap:clamp(var(--s5),3vw,var(--s7))}
.capa .cp-dato div{flex:1 1 0;max-width:22ch}
.capa .cp-dato b{display:block;font-family:var(--disp);font-weight:300;
  font-size:clamp(21px,1.9vw,28px);letter-spacing:-.038em;line-height:1.06;color:var(--navy);
  text-wrap:balance}
.capa .cp-dato span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--gray)}
@media (max-width:900px){
  .capas{grid-template-columns:1fr;gap:var(--s5)}
  .capas-vis{position:relative;top:auto;aspect-ratio:16/10}
  .capa{min-height:0;padding:var(--s5) 0;opacity:1}
}

/* ══ TECNOLOGÍA — ASÍ SE FABRICA ══
   Grilla de cuatro, centrada. Son cuatro estaciones y entran las cuatro en la
   pantalla: un estante que se arrastra no tenía nada que mostrar al arrastrar.
   En tablet pasan a dos por fila y en el teléfono a una. */
.linea{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s7)}
.linea.tres{grid-template-columns:repeat(3,1fr)}   /* demos: son tres estaciones */
@media (max-width:1080px){.linea,.linea.tres{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}}
@media (max-width:560px){.linea,.linea.tres{grid-template-columns:1fr}}
.paso{display:block}
.paso-foto{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;
  background:var(--navy)}
.paso-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out)}
.paso:hover .paso-foto img{transform:scale(1.045)}
.paso-n{position:absolute;z-index:2;left:var(--s4);top:var(--s4);
  font-family:var(--disp);font-weight:500;font-size:14px;color:#fff;
  background:rgba(9,35,71,.5);backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.2);padding:5px 12px;border-radius:50px}
.paso h3{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.028em;
  margin-top:var(--s4)}
.paso p{margin-top:var(--s2);font-size:14.5px;line-height:1.55;color:var(--gray)}
@media (max-width:640px){.linea>*{flex-basis:250px}}

/* ══ APARICIÓN SUAVE ══ */
/* Todo entra igual: sube 20px y aparece, con una curva que desacelera.
   El escalonado lo pone main.js según el orden dentro del grupo. */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
  will-change:opacity,transform}
.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ══ SLIDE-UP DE TITULARES ══ */
/* Palabras enmascaradas que suben al entrar en viewport. Lo arma main.js
   (wrap de palabras + IntersectionObserver). Curva y timing del look & feel. */
.su .su-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.su .su-i{display:inline-block;transform:translateY(115%);transition:transform 0.60s var(--ease-out)}
.su.su-in .su-i{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.su .su-i{transform:none;transition:none}}

/* ══ ACCESIBILIDAD ══ */
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:999;font-family:var(--disp);font-weight:600}
.skip:focus{left:0}

/* ══ AJUSTES DE TELÉFONO ══
   Dos cosas que en el escritorio no se notan y en el teléfono rompen:

   1. EL PISO DE 14 px NO SE NEGOCIA. Varias etiquetas venían en 12-13,5: en
      una pantalla chica y con lectores de 40-65 años eso no se lee. Suben a
      14 sólo en el teléfono, donde el ancho ya no permite compensar con aire.
   2. La ruta de migas se envolvía en dos líneas y se encimaba con el título.
      Pasa a una sola línea que se arrastra de costado. */
@media (max-width:640px){
  /* Los flotantes se comen media pantalla y tapan el texto. En el teléfono el
     de Busquetti se reduce al avatar —el nombre lo dice el chat al abrirlo— y
     los dos se pegan al borde. */
  .floats{right:14px;bottom:14px;gap:8px}
  .float-b{font-size:14px;padding:11px 16px}
  .float-busq{padding:7px 14px 7px 7px}
  .float-busq .fb-tx small{display:none}
  .crumbs .wrap{display:flex;align-items:center;gap:6px;white-space:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .crumbs .wrap::-webkit-scrollbar{display:none}
  .f-bot,.f-bot span,
  .pcard .cat-pill,.busq .badge,.busq-legal,.bm-abrir,
  .ncard .nc-tag,.ncard .nc-fecha,.n-lista time,.novedad time,
  .fopt .fnum,.f-head .f-reset,.filters .fnum,
  .paso-n,.cp-n,.f-more,.num,.n-fecha,.dm-fecha,
  .prox-meta div span,.rc-lin span,.hi-sinfoto span,
  .nc-tag,.nc-fecha,.cat-pill,.gf-est,.badge,.brand-seg,
  .gf-d small,.gf-t,.gf-l,.hi-anio + *,.valor p,
  .spec,.pdp-dest li,.var-k,.var-v b,.pdp-ram,
  .lbl,.tiempo-ayuda,.gira-ayuda,.origen-foto figcaption,
  .planta-foto figcaption,.hito p,.pasada p,time,
  .prox-meta span,.dm-eq,.bl-eq{font-size:14px}
  /* el pie es la única zona donde 14 apretaba de más: 13,5 y punto */
  .f-bot{font-size:13.5px;line-height:1.6}

  /* ── El catálogo en el teléfono ──
     El panel de filtros pasa a abrirse con un botón. Desplegado medía más de
     dos pantallas: había que pasar cinco grupos y 52 subcategorías antes de
     ver un solo producto. */
  .filtros-btn{display:inline-flex;align-items:center;gap:9px;
    min-height:46px;padding:0 20px;margin-bottom:var(--s5);
    font-family:var(--body);font-size:15px;font-weight:500;color:var(--navy);
    background:#fff;border:1px solid var(--line);border-radius:50px;cursor:pointer}
  .filtros-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round}
  .filters{position:fixed;inset:0;z-index:96;margin:0;border-radius:0;
    max-width:none;width:auto;overflow-y:auto;overscroll-behavior:contain;
    padding:var(--s5) 20px calc(var(--s7) + env(safe-area-inset-bottom));
    background:#fff;
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
  .filters.abierto{opacity:1;transform:none;pointer-events:auto}
  .f-head{position:sticky;top:0;z-index:2;background:#fff;
    padding-top:var(--s2);padding-bottom:var(--s4)}
  .f-cerrar{display:grid;place-items:center;width:44px;height:44px;margin-left:var(--s3);
    background:rgba(9,35,71,.055);border:none;border-radius:50%;cursor:pointer}
  .f-cerrar svg{width:19px;height:19px;fill:none;stroke:var(--navy);
    stroke-width:1.9;stroke-linecap:round}
  .fg-largo .fg-inner{max-height:none}
  body.filtros-abiertos{overflow:hidden}
  body.filtros-abiertos .floats{opacity:0;pointer-events:none}
}