/* =============================================================
   Componentes de página — Asfalto Flumat S.R.L.
   ============================================================= */

/* ---------- Marca ---------- */
.logo svg{height:100%;width:auto;fill:currentColor;display:block}
.brandline{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.28em;color:var(--fg-mute);text-transform:uppercase}

/* ---------- Cabecera ----------
   Transparente sobre el hero, sólida y clara al desplazarse, y de nuevo
   clara-sobre-oscuro cuando pasa por una sección oscura. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);
  display:flex;align-items:center;color:#FFFFFF;
  border-bottom:1px solid transparent;
  transition:height .45s var(--ease-out),background .4s var(--ease-out),
             color .4s var(--ease-out),border-color .4s var(--ease-out),
             transform .5s var(--ease-out),backdrop-filter .4s var(--ease-out);
}
.hdr__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.hdr__logo{height:clamp(18px,2vh,25px);flex:none;color:inherit}
.hdr__logo svg{height:100%;width:auto;fill:currentColor;display:block}

.hdr.is-stuck{
  --header-h:clamp(52px,6vh,64px);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
  color:var(--ink-900);
}
.hdr.is-stuck.is-over-dark{
  background:rgba(8,17,31,.86);
  border-bottom-color:rgba(160,190,235,.16);
  color:#FFFFFF;
}
.hdr.is-hidden{transform:translateY(-102%)}
/* Flotando sobre una seccion clara la tinta es el azul del membrete:
   en blanco el logo se perdia contra el fondo. */
.hdr:not(.is-stuck):not(.is-over-dark){color:var(--ink-500)}

.nav{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.75rem);margin-left:auto}
.nav__a{position:relative;font-size:var(--t-sm);font-weight:500;opacity:.78;padding:.55rem .1rem;
  transition:opacity var(--dur-fast) var(--ease-out)}
.nav__a::after{content:"";position:absolute;left:0;right:0;bottom:.18rem;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out)}
.nav__a:hover,.nav__a:focus-visible,.nav__a.is-active{opacity:1}
.nav__a:hover::after,.nav__a:focus-visible::after,.nav__a.is-active::after{transform:none;transform-origin:left}
.hdr__cta{margin-left:clamp(.5rem,1.4vw,1.1rem)}
.hdr .btn--outline{--btn-bg:transparent;--btn-fg:currentColor;border:1px solid currentColor;opacity:.9}
.hdr .btn--outline::before{background:currentColor}
.hdr.is-stuck .btn--outline:hover{color:var(--white)}
.hdr:not(.is-stuck) .btn--outline:hover,.hdr.is-over-dark .btn--outline:hover{color:var(--ink-900)}
.hdr:not(.is-stuck):not(.is-over-dark) .btn--outline:hover{color:var(--white)}

/* Barra de progreso de lectura, sobre el borde inferior de la cabecera */
.hdr__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;background:var(--acc-500);opacity:0;transition:opacity .3s}
.hdr.is-stuck .hdr__progress{opacity:1}

/* Hamburguesa: dos trazos que se cruzan */
.burger{display:none;width:46px;height:46px;margin-left:auto;margin-right:-10px;position:relative;flex:none;color:inherit}
.burger span{position:absolute;left:12px;width:22px;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease-out),opacity .25s}
.burger span:nth-child(1){top:21px}
.burger span:nth-child(2){top:27px}
.is-menu .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.is-menu .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- Menú móvil ---------- */
.menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 2rem) var(--gutter)
          max(2rem,env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--ink-950);color:#fff;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);visibility:hidden}
.is-menu .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__list{display:flex;flex-direction:column;gap:.1rem;margin-block:auto}
.menu__item{overflow:hidden}
.menu__a{display:flex;align-items:baseline;gap:1rem;padding:.36em 0;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.85rem,9vw,3.1rem);line-height:1;letter-spacing:-.035em;color:#fff;
  transform:translateY(110%);transition:transform .7s var(--ease-out),color var(--dur-fast)}
.is-menu .menu__a{transform:none}
.menu__a:hover{color:var(--acc-300)}
.menu__n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--acc-400);font-weight:400}
.menu__foot{display:flex;flex-direction:column;gap:.45rem;padding-top:1.4rem;border-top:1px solid rgba(160,190,235,.18)}
.menu__foot a{font-size:var(--t-sm);color:#C7D3E4}
.menu__foot .mono{color:#75839a}

/* ---------- Hero ----------
   El cliente pidio la primera pantalla en blanco con la marca en azul,
   asi que el hero esta invertido respecto del resto del sitio: fondo
   blanco, tipografia en tinta azul y la calzada dibujada como una
   lamina tecnica, azul sobre claro.
   La fotografia nocturna se retiro. Sobre blanco no habia manera de
   sostenerla sin ensuciar el fondo, que es exactamente lo que se pedia
   evitar; el dibujo de la ruta en canvas ya cuenta lo mismo, pesa cero
   y ademas saca la imagen mas grande del sitio del arranque.
   Quedan cuatro capas: bruma, calzada, aire blanco y contenido. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;overflow:hidden;background:var(--white);color:var(--ink-900);
  padding-block:calc(var(--header-h) + .3rem) 0}
/* Bruma azul: le da profundidad al blanco para que no sea un vacio.
   Se concentra donde esta el punto de fuga de la calzada. */
.hero__veil{position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(ellipse 62% 50% at 68% 44%,rgba(74,136,238,.13),transparent 72%),
    linear-gradient(to bottom,rgba(220,231,247,.6) 0%,rgba(255,255,255,0) 40%)}
.hero__canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
/* Destello que barre una vez al entrar: sobre claro es un blanco que
   pasa, no una luz que enciende. */
.hero__beam{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.45) 46%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.45) 54%,transparent 70%);
  transform:translateX(-30%)}
.js .hero__beam{animation:beam 3.4s 1.1s var(--ease-in-out) both}
/* Aire blanco sobre la izquierda y la base: la calzada se desvanece
   antes de llegar al texto, que asi apoya sobre blanco limpio. Es el
   mismo velo direccional de antes, invertido. */
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(128% 82% at 2% 102%,rgba(255,255,255,.99) 0%,rgba(255,255,255,.84) 36%,rgba(255,255,255,0) 68%),
    linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,0) 34%),
    linear-gradient(to right,rgba(255,255,255,.86) 0%,rgba(255,255,255,.36) 40%,rgba(255,255,255,0) 74%)}
@keyframes beam{0%{opacity:0;transform:translateX(-40%)}18%{opacity:.9}100%{opacity:0;transform:translateX(42%)}}

/* Barra superior: llena el aire que dejaba el hero anclado abajo y da
   la ficha de identidad de un vistazo. */
.hero__top{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-top:clamp(.9rem,3vh,2.6rem);
  border-bottom:1px solid var(--line);padding-bottom:clamp(.7rem,1.8vh,1.2rem)}
.hero__coord{color:var(--grey-500);letter-spacing:.2em;display:flex;gap:.8rem;align-items:center}
.hero__coord span{color:var(--grey-600);padding-left:.8rem;border-left:1px solid var(--line-strong)}
@media (max-width:720px){.hero__coord{display:none}}
.hero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  position:relative;margin-block:auto;padding-bottom:clamp(1.6rem,4vh,2.8rem)}
.hero__kicker{display:flex;align-items:center;gap:.75rem;color:var(--ink-400);letter-spacing:.2em}
.hero__kicker .dot{width:6px;height:6px;background:var(--acc-400);flex:none;border-radius:50%;
  box-shadow:0 0 0 0 rgba(74,136,238,.6);animation:pulse 2.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(74,136,238,0)}100%{box-shadow:0 0 0 0 rgba(74,136,238,0)}}

.hero__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:min(var(--t-hero),11vw,15vh);line-height:.86;letter-spacing:-.048em;
  margin-bottom:clamp(1.1rem,3.2vh,2.8rem);text-wrap:nowrap}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .ln>span{display:block;
  background:linear-gradient(178deg,var(--ink-400) 12%,var(--ink-600) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__title em{font-style:normal;
  background:linear-gradient(174deg,var(--acc-500) 8%,var(--acc-600) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero__under{display:grid;gap:clamp(1.1rem,2.6vw,2.4rem);align-items:end;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.hero__lede{font-size:var(--t-lg);color:var(--fg-soft);max-width:44ch;line-height:1.5;
  padding-left:clamp(.9rem,1.4vw,1.3rem);border-left:2px solid var(--acc-500)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-start}
.hero .btn--ghost{--btn-bg:rgba(255,255,255,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Filete vertical con la bajada de marca del membrete */
.hero__rail{position:absolute;right:calc(var(--gutter) * .34);top:50%;z-index:2;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  letter-spacing:.34em;color:var(--grey-500)}
.hero__rail span{display:block;padding-block:1.4rem;position:relative}
.hero__rail span::before,.hero__rail span::after{content:"";position:absolute;left:50%;width:1px;height:clamp(24px,5vh,54px);
  background:linear-gradient(var(--line-strong),transparent)}
.hero__rail span::before{top:calc(-1 * clamp(24px,5vh,54px))}
.hero__rail span::after{bottom:calc(-1 * clamp(24px,5vh,54px));background:linear-gradient(transparent,var(--line-strong))}

/* Barra de datos al pie: ancla el hero y le da peso de empresa grande */
.hero__foot{position:relative;z-index:2;border-top:1px solid var(--line);
  background:linear-gradient(to top,rgba(255,255,255,.97),rgba(255,255,255,.76));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero__foot-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:stretch;gap:clamp(1rem,3vw,2.5rem)}
.hero__data{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;
  gap:clamp(1rem,2.6vw,2.4rem)}
.hero__data>div{padding-block:clamp(.9rem,2.4vh,1.9rem);position:relative}
.hero__data>div+div::before{content:"";position:absolute;left:calc(-1 * clamp(.5rem,1.3vw,1.2rem));
  top:22%;bottom:22%;width:1px;background:var(--line)}
.hero__data dt{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.18em;
  color:var(--grey-500);text-transform:uppercase}
.hero__data dd{font-family:var(--font-display);font-weight:600;font-size:var(--t-sm);
  margin-top:.3rem;letter-spacing:-.012em;color:var(--ink-700);line-height:1.25}
.hero__data dd b{color:var(--acc-600);font-weight:600}
.hero__data .tick{color:var(--ink-500);font-size:1.5em;letter-spacing:-.04em;margin-right:.12em;font-variant-numeric:tabular-nums}

.hero__scroll{display:flex;align-items:center;gap:.7rem;color:var(--grey-500);flex:none;
  padding-block:clamp(.9rem,2.4vh,1.9rem);align-self:center}
.hero__scroll .rail{position:relative;width:52px;height:1px;background:var(--line-strong);overflow:hidden}
.hero__scroll .rail::after{content:"";position:absolute;inset:0;background:var(--acc-500);
  transform:translateX(-100%);animation:rail 2.6s var(--ease-in-out) infinite}
@keyframes rail{50%{transform:none}100%{transform:translateX(100%)}}

/* ---------- Costura entre secciones ---------- */
.seam{position:relative;background:var(--ink-950);overflow:clip;isolation:isolate}
.seam__ph{position:relative;margin:0;height:clamp(200px,32vh,420px)}
.seam__ph img{transform:scale(1.2);will-change:transform}
.seam::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0%,rgba(255,255,255,0) 32%,rgba(4,9,18,0) 44%,rgba(4,9,18,.5) 76%,rgba(4,9,18,.97) 100%)}
.seam__cap{position:absolute;left:0;right:0;bottom:clamp(.9rem,2.6vh,1.6rem);z-index:2;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap;
  font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:#7F92AE}
.seam__cap span:first-child{color:#E7EEF9}

/* ---------- Tira de respaldo bajo el hero ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--bg)}
.trust__in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,4vw,3.5rem);
  padding-block:clamp(1.1rem,2.4vw,1.6rem)}
.trust__label{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-mute);flex:none}
.trust__items{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3vw,2.5rem);margin-left:auto}
.trust__item{display:flex;align-items:baseline;gap:.5rem}
.trust__item b{font-family:var(--font-display);font-weight:600;font-size:var(--t-base);
  letter-spacing:-.01em;color:var(--fg)}
.trust__item span{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-600)}

/* ---------- Bloque editorial de dos columnas ---------- */
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--narrow{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
.split--head{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:end;
  gap:clamp(1.5rem,3.5vw,3.5rem)}
.split--head .lede{padding-bottom:.35rem}
.split__sticky{position:sticky;top:calc(var(--header-h) + clamp(1.5rem,5vh,4rem))}

.figure{position:relative;overflow:hidden;background:var(--paper-2)}
.figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
/* Las imágenes con parallax necesitan más sobreescaneo del que da el 1.06
   por defecto: si no, el recorrido descubre el fondo de la caja. */
.figure img[data-par]{transform:scale(1.18)}
.figure__cap{position:absolute;left:0;bottom:0;right:0;padding:.9rem 1.1rem;
  background:linear-gradient(to top,rgba(5,10,20,.82),rgba(5,10,20,0));
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:#D6E0EE}

/* Empresa: titular + retrato a la derecha, sin columna hueca */
.about{display:grid;gap:clamp(1.2rem,2.6vw,2rem);align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
.about__ph{margin:0;min-height:clamp(340px,40vw,600px)}
.about .lede{margin-top:clamp(1.2rem,2.4vw,1.8rem);max-width:52ch}
.about .pillars{margin-top:clamp(1.8rem,3.4vw,2.8rem)}
@media (max-width:900px){.about{grid-template-columns:1fr}
  .about__ph{min-height:clamp(230px,52vw,340px)}}

/* Las dos decisiones estructurales, como piezas y no como párrafos */
.pillars{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.pillar{background:var(--bg);padding:clamp(1.4rem,2.8vw,2.2rem);position:relative;overflow:hidden}
.pillar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acc-500);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out)}
.pillar:hover::after{transform:none}
.pillar__n{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.24em;
  color:var(--acc-600);display:block;margin-bottom:.9rem}
.pillar__h{font-family:var(--font-display);font-weight:600;font-size:var(--t-xl);
  letter-spacing:-.025em;margin-bottom:.6rem}
.pillar__p{font-size:var(--t-sm);color:var(--fg-soft);line-height:1.6;max-width:44ch}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}

/* Banda de dos fotografías con la misma altura */
.band2{display:grid;gap:clamp(.6rem,1.4vw,1.1rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.band2 .figure{height:clamp(260px,32vw,460px);margin:0}
@media (max-width:760px){.band2{grid-template-columns:1fr}.band2 .figure{height:clamp(220px,58vw,340px)}}

/* Mosaico de la sección Empresa (heredado) */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
.mosaic__a{grid-column:span 4;aspect-ratio:4/5}
.mosaic__b{grid-column:span 2;aspect-ratio:3/4;align-self:end}
.mosaic__c{grid-column:span 6;aspect-ratio:16/9}

/* Listado de datos duros */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(2rem,4vw,3.2rem)}
.facts__row{background:var(--bg);padding:1.05rem 1.2rem}
.facts__row:nth-child(3){grid-row:span 2}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts__row:nth-child(3){grid-row:auto;grid-column:1 / -1}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.facts__k{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.facts__v{color:var(--fg);font-size:var(--t-sm);margin-top:.35rem;line-height:1.45}

/* ---------- Relato térmico: sección apilada ---------- */
/* overflow:clip y NO hidden: hidden convierte a .heat en contenedor de scroll
   y eso anula el position:sticky de .heat__stage */
.heat{position:relative;overflow:clip}
.heat__track{position:relative}
.heat__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.heat__canvas{position:absolute;inset:0;width:100%;height:100%}
.heat__readout{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  text-align:right;pointer-events:none}
.heat__deg{font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(3.5rem,13vw,11rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px rgba(174,201,238,.5)}
.heat__deg b{-webkit-text-stroke:0;color:#EDF2F9;font-weight:700}
.heat__unit{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.24em;
  color:var(--acc-300);text-transform:uppercase;margin-top:.4rem}
.heat__steps{position:relative;z-index:2;margin-top:-100svh}
.heat__step{min-height:76svh;display:flex;align-items:center;padding-block:9vh}
.heat__card{max-width:34rem}
.heat__n{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.22em;
  color:var(--acc-400);text-transform:uppercase;margin-bottom:.9rem;display:block}
.heat__h{font-family:var(--font-display);font-weight:600;font-size:var(--t-2xl);
  line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:.9rem}
.heat__p{color:var(--fg-soft);font-size:var(--t-lg);line-height:1.5}
.heat__meta{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;
  border:1px solid var(--line-strong);border-radius:100px;
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-soft)}
.chip b{color:var(--accent);font-weight:500}
/* Los rotulos caen sobre la superficie del ligante, que a 155 grados
   se dibuja clara: sin respaldo propio el texto se perdia contra el azul. */
.heat__meta .chip{background:rgba(4,9,18,.66);backdrop-filter:blur(4px);
  border-color:rgba(160,190,235,.30);color:var(--ink-050)}

/* ---------- Productos ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.filter{min-height:44px;padding:.55rem 1.15rem;border:1px solid var(--line-strong);border-radius:100px;
  display:inline-flex;align-items:center;
  font-size:var(--t-xs);font-weight:500;color:var(--fg-mute);
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.filter:hover{color:var(--fg);border-color:var(--fg-mute)}
.filter[aria-pressed="true"]{background:var(--ink-500);border-color:var(--ink-500);color:var(--white)}

.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.4rem)}
.prod{position:relative;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--line);text-align:left;
  overflow:hidden;transition:border-color .4s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.prod:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow)}
.prod.is-hidden{display:none}
.prod__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),filter .6s}
.prod:hover .prod__media img{transform:scale(1.055)}
/* Velo azul de marca: unifica fotografías de orígenes distintos */
.prod__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(27,58,107,.10),rgba(5,10,20,.42));
  mix-blend-mode:multiply;transition:opacity .5s}
.prod:hover .prod__media::after{opacity:.7}
.prod__code{position:absolute;left:0;top:0;z-index:2;padding:.42rem .7rem;
  background:rgba(5,10,20,.62);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;color:#fff}
.prod__body{padding:clamp(1rem,1.8vw,1.5rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.prod__name{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);
  line-height:1.1;letter-spacing:-.02em;color:var(--fg)}
.prod__sub{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-mute)}
.prod__txt{font-size:var(--t-sm);color:var(--fg-soft);line-height:1.55}
.prod__more{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-xs);font-weight:600;color:var(--accent)}
.prod__more svg{width:14px;height:14px;transition:transform .4s var(--ease-out)}
.prod:hover .prod__more svg{transform:translateX(4px)}

/* Ficha técnica en panel lateral */
.sheet{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.sheet.is-open{visibility:visible;pointer-events:auto}
.sheet__scrim{position:absolute;inset:0;background:rgba(5,10,20,.6);opacity:0;
  transition:opacity .5s var(--ease-out);backdrop-filter:blur(3px)}
.sheet.is-open .sheet__scrim{opacity:1}
.sheet__panel{position:absolute;top:0;right:0;height:100%;width:min(38rem,100%);
  background:var(--white);color:var(--ink-900);display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform .62s var(--ease-out);box-shadow:-20px 0 60px rgba(5,10,20,.28)}
.sheet.is-open .sheet__panel{transform:none}
.sheet__head{position:relative;flex:none}
.sheet__head img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;max-height:min(30svh,320px)}
.sheet__close{position:absolute;top:.9rem;right:.9rem;width:44px;height:44px;
  display:grid;place-items:center;background:rgba(5,10,20,.55);color:#fff;border-radius:50%;
  backdrop-filter:blur(6px);transition:background .3s}
.sheet__close:hover{background:var(--ink-500)}
.sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.25rem,3vw,2.25rem);-webkit-overflow-scrolling:touch}
.sheet__code{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;color:var(--acc-600)}
.sheet__name{font-family:var(--font-display);font-weight:600;font-size:var(--t-xl);
  letter-spacing:-.025em;line-height:1.06;margin:.4rem 0 .3rem}
.sheet__sub{font-size:var(--t-sm);color:var(--grey-600);margin-bottom:1.3rem}
.sheet h4{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-600);margin:1.8rem 0 .7rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.sheet__tbl{display:grid;gap:0}
.sheet__tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1rem;
  padding-block:.6rem;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.sheet__tr dt{color:var(--grey-600)}
.sheet__tr dd{color:var(--ink-900);font-weight:500}
.sheet__ul{display:grid;gap:.6rem}
.sheet__ul li{position:relative;padding-left:1.4rem;font-size:var(--t-sm);color:var(--grey-700);line-height:1.55}
.sheet__ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1.5px;background:var(--acc-500)}
.sheet__temp{margin-top:1.4rem;padding:1rem 1.15rem;background:var(--paper);border-left:2px solid var(--acc-500);
  font-size:var(--t-sm);color:var(--grey-700);line-height:1.55}
.sheet__foot{flex:none;padding:1rem clamp(1.25rem,3vw,2.25rem);border-top:1px solid var(--line);
  display:flex;gap:.6rem;flex-wrap:wrap;background:var(--white)}

/* ---------- Logística ---------- */
.logi{display:grid;gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.logi__txt{min-width:0}

/* Ficha de cobertura: el mapa vive dentro de un instrumento, no suelto
   sobre el fondo. Cabecera, escenario y pie de leyenda. */
.mapcard{position:relative;border:1px solid var(--line);background:
  linear-gradient(160deg,rgba(24,52,96,.5),rgba(8,17,31,.72));
  border-radius:var(--radius);overflow:hidden;isolation:isolate;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.mapcard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 62% 34%,rgba(46,111,223,.18),transparent 70%)}
.mapcard__hd,.mapcard__ft{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem clamp(.9rem,2vw,1.4rem);
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.mapcard__hd{justify-content:space-between;border-bottom:1px solid var(--line)}
.mapcard__ft{justify-content:flex-start;gap:1.3rem;flex-wrap:nowrap;border-top:1px solid var(--line)}
.mapcard__live{display:flex;align-items:center;gap:.55rem;color:var(--acc-300)}
.mapcard__live i{width:6px;height:6px;border-radius:50%;background:var(--acc-400);
  box-shadow:0 0 0 0 rgba(74,136,238,.6);animation:pulse 2.8s infinite}
.mapcard__key{display:flex;align-items:center;gap:.5rem}
.mapcard__key i{width:7px;height:7px;border-radius:50%;flex:none}
.mapcard__key i.is-hub{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.mapcard__key i.is-node{background:var(--acc-300)}
.mapcard__note{margin-left:auto;color:#8DA0BC}
/* Escenario: mapa a la izquierda, panel de destinos a la derecha. Así la
   ficha ocupa el ancho disponible en vez de dejar aire a los lados del país. */
.mapcard__stage{position:relative;padding:clamp(.8rem,1.8vw,1.4rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1rem,2.4vw,2rem);align-items:center}
.mapcard__map{position:relative;min-width:0}
.mapcard svg{display:block;width:100%;height:auto}
.mapcard__side{min-width:0;align-self:center}
.maplist__hd{color:#8DA0BC;letter-spacing:.18em;text-transform:uppercase;
  font-size:var(--t-mono);padding-bottom:.6rem;margin-bottom:.5rem;
  border-bottom:1px solid var(--line)}
.maplist{list-style:none;margin:0;padding:0}
.maplist__i{display:flex;align-items:center;gap:.6rem;cursor:default;
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:#8DA0BC;padding:.3rem 0;
  transition:color .28s var(--ease-out),transform .28s var(--ease-out)}
.maplist__i i{width:5px;height:5px;border-radius:50%;flex:none;
  background:rgba(143,186,255,.55);transition:background .28s,box-shadow .28s,transform .28s}
.maplist__i b{margin-left:auto;font-weight:400;color:#8DA0BC;font-size:inherit}
.maplist__i.is-base{color:#E7EEF9}
.maplist__i.is-base i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.maplist__i:hover,.maplist__i.is-on{color:#fff;transform:translateX(4px)}
.maplist__i:hover i,.maplist__i.is-on i{background:#fff;transform:scale(1.5);
  box-shadow:0 0 10px rgba(160,200,255,.9)}
@media (max-width:1080px){
  .mapcard__stage{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
@media (max-width:760px){
  .mapcard__stage{grid-template-columns:1fr}
  .mapcard__map{max-width:300px;margin-inline:auto}
  .maplist{columns:2;column-gap:1.2rem}
  .maplist__i{break-inside:avoid}
}

.map__ring circle{fill:none;stroke:rgba(160,190,235,.14);stroke-width:.8;stroke-dasharray:3 7}
.map__fill{fill:url(#mapFillG)}
.map__path{fill:none;stroke:rgba(212,230,255,.9);stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(74,136,238,.5))}
.map__path--isl{stroke-width:1.1}
.map__route{fill:none;stroke:rgba(143,186,255,.72);stroke-width:1.3;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(74,136,238,.6));transition:stroke .3s,stroke-width .3s}
.map__route.is-on{stroke:#fff;stroke-width:2.2}
.map__halo{fill:rgba(143,186,255,.14);opacity:0;transition:opacity .3s}
.map__nodeg.is-on .map__halo{opacity:1}
.map__node{fill:#DCE9FF;transition:fill .3s,r .3s;filter:drop-shadow(0 0 5px rgba(127,173,245,.9))}
.map__nodeg:hover .map__node,.map__nodeg.is-on .map__node{fill:#fff;r:4.4px}
.map__hub{fill:#fff;filter:drop-shadow(0 0 11px rgba(170,205,255,.95))}
.map__pulse{fill:none;stroke:var(--acc-400);stroke-width:1.2}
/* Cometa que recorre cada ruta en bucle: el despacho no se detiene. */
.map__flow{fill:none;stroke:#EAF2FF;stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(143,186,255,.95))}

.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(1.6rem,3vw,2.4rem)}
.specs>div{background:var(--bg);padding:1.05rem 1.15rem}
.specs dt{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.specs dd{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);
  letter-spacing:-.02em;margin-top:.25rem;color:var(--fg)}

/* ---------- Diferenciales ---------- */
.diffs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:1000px){.diffs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.diffs{grid-template-columns:1fr}}
.diff{background:var(--bg);padding:clamp(1.4rem,2.6vw,2.1rem);position:relative;overflow:hidden}
.diff::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc-500);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.diff:hover::after{transform:none}
.diff__ico{width:44px;height:44px;margin-bottom:1.1rem;color:var(--accent)}
.diff__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round}
.diff__h{font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);
  letter-spacing:-.02em;margin-bottom:.5rem}
.diff__p{font-size:var(--t-sm);color:var(--fg-soft);line-height:1.55}

/* ---------- Proceso: el riel del pedido ---------- */
/* Cuatro nodos colgados de una linea que se recorre sola. El destello del
   riel es la unica animacion en bucle de la seccion: sugiere transito sin
   competir con los reveals del scroll. */
.flow{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.4vw,2.6rem)}
.flow__rail{position:absolute;left:0;right:0;top:6px;height:2px;overflow:hidden;
  background:var(--line);pointer-events:none}
.flow__rail::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;
  background:linear-gradient(90deg,rgba(74,136,238,0),var(--acc-400) 50%,rgba(74,136,238,0));
  transform:translateX(-100%);animation:railrun 6.4s cubic-bezier(.55,0,.45,1) infinite}
@keyframes railrun{to{transform:translateX(333%)}}

.flow__s{position:relative;padding-top:clamp(1.8rem,3.4vw,2.6rem);min-width:0}
.flow__dot{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--acc-400);
  box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--line);
  transition:transform .5s var(--ease-out),background .35s}
.flow__s:hover .flow__dot{transform:scale(1.25);background:var(--acc-400)}
.flow__n{display:block;font-size:var(--t-mono);letter-spacing:.22em;color:var(--accent)}
.flow__h{font-family:var(--font-display);font-weight:600;font-size:var(--t-xl);
  letter-spacing:-.03em;margin:.55rem 0 .5rem;color:var(--fg)}
.flow__p{font-size:var(--t-sm);line-height:1.55;color:var(--fg-soft);max-width:30ch}
.flow__tag{display:inline-block;margin-top:1rem;padding:.32rem .6rem;
  font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);border:1px solid var(--line)}
.flow__foot{margin-top:clamp(2.4rem,5vw,3.6rem)}
@media (prefers-reduced-motion:reduce){.flow__rail::after{animation:none;opacity:.5;transform:none;width:100%}}

/* ---------- Preguntas frecuentes ---------- */
/* Sin JS los paneles quedan abiertos (el contenido siempre es legible);
   el script los cierra al arrancar y los anima con grid-template-rows. */
.faq{display:grid;gap:clamp(1.8rem,4vw,4.5rem);
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}
.faq__side{position:sticky;top:calc(var(--header-h) + clamp(1.5rem,4vw,3rem))}
.faq__note{margin-top:clamp(1.2rem,2.4vw,1.8rem);font-size:var(--t-sm);color:var(--fg-soft);max-width:32ch}
.faq__list{border-top:1px solid var(--line-strong)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__hd{margin:0}
.faq__q{display:flex;width:100%;align-items:baseline;gap:clamp(.8rem,1.8vw,1.4rem);
  padding:clamp(1rem,2vw,1.45rem) 0;background:none;border:0;cursor:pointer;text-align:left;
  color:var(--fg);transition:color var(--dur-fast) var(--ease-out)}
.faq__q:hover,.faq__q:focus-visible{color:var(--accent)}
.faq__qn{flex:none;font-size:var(--t-mono);letter-spacing:.2em;color:var(--fg-mute);
  transition:color var(--dur-fast)}
.faq__q[aria-expanded="true"]{color:var(--accent)}
.faq__q[aria-expanded="true"] .faq__qn{color:var(--accent)}
.faq__qt{flex:1;font-family:var(--font-display);font-weight:600;font-size:var(--t-lg);
  line-height:1.25;letter-spacing:-.022em}
.faq__ico{position:relative;flex:none;align-self:center;width:16px;height:16px;
  transition:transform .5s var(--ease-out)}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:currentColor;
  transition:transform .5s var(--ease-out),opacity .35s}
.faq__ico::before{left:0;right:0;top:7.5px;height:1.5px}
.faq__ico::after{top:0;bottom:0;left:7.5px;width:1.5px}
.faq__q[aria-expanded="true"] .faq__ico{transform:rotate(180deg)}
.faq__q[aria-expanded="true"] .faq__ico::after{transform:scaleY(0)}
.faq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--ease-out)}
.js .faq__i:not(.is-open)>.faq__a{grid-template-rows:0fr}
.faq__a>div{overflow:hidden;min-height:0}
.faq__a p{padding:0 clamp(1.4rem,3vw,2.6rem) clamp(1.15rem,2.2vw,1.7rem) clamp(2.4rem,4.4vw,3.7rem);
  font-size:var(--t-base);line-height:1.62;color:var(--fg-soft);max-width:62ch;
  opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease-out) .06s,transform .5s var(--ease-out) .06s}
.faq__i.is-open .faq__a p{opacity:1;transform:none}
.js .faq__i:not(.is-open) .faq__a p{transition-delay:0s}
.faq__a strong{color:var(--fg);font-weight:600}

@media (max-width:1000px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(1.8rem,4vw,2.6rem)}
  .flow__rail{display:none}
  .flow__s{border-top:1px solid var(--line);padding-top:clamp(1.1rem,2.4vw,1.6rem)}
  .flow__dot{top:-7px}
  .flow__p{max-width:none}
}
@media (max-width:900px){
  .faq{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.4rem)}
  .faq__side{position:static}
  .faq__note{max-width:46ch}
}
@media (max-width:560px){
  .flow{grid-template-columns:1fr;row-gap:0}
  .flow__s{padding-block:1.15rem 1.35rem}
  .flow__p{font-size:var(--t-sm)}
  .flow__tag{margin-top:.8rem}
  .faq__qt{font-size:var(--t-base)}
  .faq__a p{padding-left:2.3rem;padding-right:0;font-size:var(--t-sm)}
}

/* ---------- Proveedores ---------- */
.supp{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(2,1fr)}
.supp__card{position:relative;padding:clamp(1.5rem,3vw,2.4rem);background:var(--bg-card);
  border:1px solid var(--line);overflow:hidden;transition:border-color .4s,transform .5s var(--ease-out)}
.supp__card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.supp__brand{font-family:var(--font-display);font-weight:700;font-size:var(--t-xl);
  letter-spacing:-.03em;text-transform:uppercase;color:var(--fg)}
.supp__mark{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.22em;
  color:var(--acc-600);text-transform:uppercase;margin-top:.3rem}
.supp__p{margin-top:1.1rem;font-size:var(--t-sm);color:var(--fg-soft);line-height:1.6;max-width:38ch}

/* ---------- Contacto ---------- */
.contact{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cta-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cta-item{background:var(--bg);display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.3rem;
  transition:background .35s var(--ease-out)}
.cta-item:hover{background:var(--bg-raise)}
.cta-item__ico{width:36px;height:36px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--accent)}
.cta-item__ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.cta-item__k{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.cta-item__k,.cta-item__v{display:block}
.cta-item__v{font-size:var(--t-base);font-weight:500;color:var(--fg);margin-top:.15rem}
.mapbox{position:relative;min-height:22rem;height:100%;overflow:hidden;border:1px solid var(--line);background:var(--ink-900)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.92)}

/* ---------- Pie ---------- */
.foot{background:var(--ink-950);color:#8FA0B8;padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__top{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid rgba(160,190,235,.14)}
.foot__logo{height:clamp(22px,2.6vw,30px);color:#fff;margin-bottom:1.1rem}
.foot__logo svg{height:100%;width:auto;fill:currentColor}
.foot__h{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.2em;
  text-transform:uppercase;color:#8FA0B8;margin-bottom:1rem}
.foot ul{display:grid;gap:.55rem;list-style:none;padding:0;margin:0}
.foot__lbl{display:block;font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:#7C8DA6;line-height:1.7}
.foot .foot__sell a{color:var(--acc-300);font-weight:600}
.foot .foot__sell a:hover{color:var(--white)}
.foot .foot__sell .foot__lbl{color:var(--acc-400);font-weight:400}
.foot a{display:inline-block;padding-block:.4rem;
  font-size:var(--t-sm);color:#B7C4D6;transition:color var(--dur-fast)}
.foot a:hover{color:#fff}
.foot__bottom{display:flex;flex-wrap:wrap;gap:.6rem 2rem;padding-top:1.6rem;
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:#8FA0B8}

/* =============================================================
   Adaptación móvil — diseñada, no reajustada
   ============================================================= */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
}
@media (max-width:1080px){
  .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hdr__cta{display:none}
  .hero__grid{grid-template-columns:1fr}
  /* El filete vertical de marca se cruzaba con el texto: en móvil sobra. */
  .hero__rail{display:none}
  /* Bajada y botones dejan de competir por el ancho: uno debajo del otro. */
  .hero__under{grid-template-columns:1fr;gap:clamp(1.3rem,4vw,1.8rem)}
  .hero__lede{max-width:38ch}
  .split,.split--narrow,.logi,.contact,.supp{grid-template-columns:1fr}
  .split__sticky{position:static}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__top>:first-child{grid-column:1/-1}
  .heat__readout{top:auto;bottom:14vh;right:var(--gutter);transform:none}
  .heat__step{padding-block:14vh}
}
@media (max-width:640px){
  .prods{grid-template-columns:1fr}
  .prod__media{aspect-ratio:16/9}
  .hero__scrim{background:linear-gradient(to bottom,
      rgba(255,255,255,.42) 0%,rgba(255,255,255,.93) 20%,
      rgba(255,255,255,.93) 64%,rgba(255,255,255,0) 88%)}
  .hero__lede{font-size:var(--t-base);max-width:none}
  .hero__actions{display:grid;grid-template-columns:1fr;gap:.55rem}
  .hero__actions .btn{width:100%;justify-content:space-between}
  /* Pie del hero a sangre: cuatro celdas con filete, sin la barra de scroll. */
  .hero__scroll{display:none}
  .hero__foot-in{padding-inline:0}
  .hero__data{grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
  .hero__data>div{background:rgba(255,255,255,.92);padding:.7rem var(--gutter)}
  .hero__data>div:nth-child(2n){padding-inline:calc(var(--gutter) * .8)}
  .hero__data>div+div::before{display:none}
  .mosaic__a,.mosaic__b,.mosaic__c{grid-column:span 6}
  .mosaic__b{aspect-ratio:16/10}
  .facts__row{grid-template-columns:1fr;gap:.2rem}
  .sheet__panel{width:100%;top:auto;bottom:0;height:92svh;transform:translateY(100%)}
  .sheet.is-open .sheet__panel{transform:none}
  .sheet__tr{grid-template-columns:1fr;gap:.15rem}
  /* Respaldo: ficha apilada con filete, en vez de tres pares que se parten. */
  .trust__in{padding-block:1.1rem;gap:.8rem}
  .trust__label{width:100%}
  .trust__items{margin-left:0;width:100%;display:grid;grid-template-columns:1fr;gap:0}
  .trust__item{flex-direction:column;align-items:flex-start;gap:.1rem;
    padding-block:.65rem;border-top:1px solid var(--line)}
  .about .lede{margin-top:1.6rem}
  .seam__ph{height:clamp(170px,26vh,240px)}
  /* La cifra vuelve arriba y achica: abajo chocaba con las fichas. */
  .heat__readout{top:calc(var(--header-h) + .6rem);bottom:auto;transform:none}
  .heat__deg{font-size:clamp(2.4rem,10vw,4.5rem)}
  /* Sobre el asfalto en movimiento el texto necesita respaldo propio. */
  .heat__card{background:rgba(4,9,18,.74);backdrop-filter:blur(5px);
    padding:1.1rem var(--gutter);margin-inline:calc(var(--gutter) * -1);
    max-width:none;border-block:1px solid rgba(160,190,235,.14)}
  .intro__cap{font-size:.6875rem;letter-spacing:.18em}
  .foot__bottom{font-size:var(--t-xs)}
}

/* Pantallas bajas: el hero completo no entra en 640 px de alto y la
   primera pantalla quedaba cortada al medio de la bajada. */
@media (max-width:640px) and (max-height:700px){
  .hero__lede{font-size:.95rem}
  .hero__actions{margin-top:.8rem}
  .hero__data>div{padding:.5rem var(--gutter)}
  .hero__data dd{font-size:.8rem}
}
@media (max-width:420px){
  .hero__title{letter-spacing:-.035em}
}

/* ================================================================
   Intro de marca — velo azul noche sobre el que se arma el logo.
   Vive entre la cabecera (z 50) y el grano (z 60) para que la
   textura de película también cubra el intro. main.js lo retira
   del DOM al terminar; sin JS directamente no existe.
   ================================================================ */
/* La presentacion abre en blanco con la marca en azul: es la primera
   impresion y el cliente la queria clara. El velo se retira hacia arriba
   y descubre el hero, que ahora tambien es blanco: la presentacion no
   corta, se disuelve en la primera pantalla. */
.intro{position:fixed;inset:0;z-index:55;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 12%,#FFFFFF 0%,#EDF3FC 100%);
  color:var(--ink-500)}
html:not(.js) .intro{display:none}
html.has-intro,html.has-intro body{overflow:hidden}
.intro__in{display:grid;justify-items:center;gap:clamp(1.5rem,3.4vh,2.5rem);
  width:min(34rem,76vw)}
.intro__logo{width:100%;height:auto;display:block;overflow:visible}
.intro__rule{width:100%;height:2px;border-radius:1px;overflow:hidden;
  background:rgba(20,44,85,.13)}
.intro__rule i{display:block;height:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#1B3A6B,#2E6FDF 55%,#7FA8EE)}
.intro__cap{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:#54677F;text-align:center;line-height:1.9;margin:0}
@media (min-width:760px){.intro__cap{white-space:nowrap}}

/* ---------- Reel de flota ----------------------------------------
   Una fotografía por vez, a sangre. El escenario apila las diez
   diapositivas y sólo una es visible: el pase lo hace un clip-path
   direccional que corre de lado a lado dejando un filo luminoso, con
   la imagen entrante entrando en escala. Encima, una capa de
   instrumento (esquinas, coordenada, índice) que sostiene el tono
   técnico del resto del sitio sin tapar el camión.
   ----------------------------------------------------------------- */
.reel__hd{margin-top:clamp(3.5rem,7vw,6rem);max-width:52rem}
.reel{position:relative;margin-top:clamp(1.5rem,3vw,2.4rem);
  --reel-in:clamp(1rem,2.6vw,2.2rem);--reel-brk:clamp(16px,2.2vw,28px)}

.reel__stage{position:relative;overflow:hidden;isolation:isolate;
  /* width explicito: con aspect-ratio y width:auto el navegador achica el
     ancho para respetar la proporcion cuando max-height recorta. Aca el
     recorte lo hace object-fit, no la caja. */
  width:100%;aspect-ratio:16/9;max-height:min(78svh,760px);background:var(--ink-950);
  border-block:1px solid rgba(150,185,235,.16);cursor:grab;
  touch-action:pan-y}
.reel__stage:active{cursor:grabbing}
.reel__track{list-style:none;margin:0;padding:0;position:absolute;inset:0}

.reel__slide{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden}
.reel__slide.is-active{opacity:1;visibility:visible;z-index:2}
.reel__ph{position:absolute;inset:0;
  --ph-filter:saturate(.44) contrast(1.14) brightness(1.03);
  --ph-tint:linear-gradient(158deg,#2B5590 0%,#122748 62%,#050C18 100%);
  --ph-tint-o:.6;
  --ph-shade:linear-gradient(to top,rgba(4,9,18,.78),rgba(4,9,18,.06) 46%,rgba(4,9,18,.34))}
.reel__img{will-change:transform;transform:scale(1.03)}

/* Filo del barrido: viaja con el borde del clip y es lo que hace que
   el pase se lea como un corte de luz y no como un fundido. */
.reel__edge{position:absolute;top:0;bottom:0;left:100%;width:2px;z-index:6;
  opacity:0;pointer-events:none;transform:translateX(-1px);
  background:linear-gradient(to bottom,transparent,var(--acc-300) 16%,#fff 50%,var(--acc-300) 84%,transparent);
  box-shadow:0 0 26px 4px rgba(120,170,245,.7),0 0 90px 12px rgba(46,111,223,.34)}

/* Trama fina de instrumento. Muy tenue: se percibe, no se mira. */
.reel__scan{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(to bottom,rgba(170,205,255,.05) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(3,8,17,.5) 100%)}

.reel__brk{position:absolute;z-index:7;pointer-events:none;
  width:var(--reel-brk);height:var(--reel-brk);border:1px solid rgba(190,216,255,.5)}
.reel__brk--tl{top:var(--reel-in);left:var(--reel-in);border-right:0;border-bottom:0}
.reel__brk--tr{top:var(--reel-in);right:var(--reel-in);border-left:0;border-bottom:0}
.reel__brk--bl{bottom:var(--reel-in);left:var(--reel-in);border-right:0;border-top:0}
.reel__brk--br{bottom:var(--reel-in);right:var(--reel-in);border-left:0;border-top:0}

.reel__coord{position:absolute;z-index:7;margin:0;
  top:calc(var(--reel-in) - .25em);left:calc(var(--reel-in) + var(--reel-brk) + .8rem);
  color:#9DB1CD;letter-spacing:.2em;
  text-shadow:0 1px 3px rgba(3,8,16,.9)}
.reel__coord i{font-style:normal;opacity:.45;padding:0 .15em}

.reel__meta{position:absolute;z-index:8;display:flex;gap:1.4rem;
  align-items:flex-end;justify-content:space-between;
  left:calc(var(--reel-in) + var(--reel-brk) + .8rem);
  right:calc(var(--reel-in) + var(--reel-brk) + .8rem);
  bottom:calc(var(--reel-in) - .1rem);pointer-events:none}
.reel__caps{position:relative;flex:1 1 auto;min-width:0;height:1.7em}
.reel__cap{position:absolute;left:0;right:0;bottom:0;margin:0;overflow:hidden;
  opacity:0;visibility:hidden;
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  line-height:1.7;text-transform:uppercase;color:#E6EEFA;
  text-shadow:0 1px 3px rgba(3,8,16,.94),0 2px 18px rgba(3,8,16,.8)}
.reel__cap.is-active{opacity:1;visibility:visible}
.reel__cap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__idx{margin:0;flex:0 0 auto;color:#9DB1CD;letter-spacing:.2em;
  display:flex;align-items:baseline;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(3,8,16,.9)}
.reel__idx b{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:.9;color:#fff}
.reel__idx i{font-style:normal;opacity:.45;padding:0 .3em}

/* Mando: la barra de marcas es a la vez índice y reloj del pase. */
.reel__ctrl{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.1rem);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(.9rem,2vw,1.4rem) var(--gutter) 0}
.reel__nav,.reel__play{flex:0 0 auto;width:44px;height:44px;display:grid;
  place-items:center;border:1px solid rgba(160,195,240,.28);border-radius:50%;
  background:transparent;color:#DCE7F7;cursor:pointer;
  transition:background .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out)}
.reel__nav svg,.reel__play svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.reel__play svg{fill:currentColor;stroke:none}
.reel__nav:hover,.reel__play:hover{background:var(--acc-500);border-color:var(--acc-500);color:#fff}
.reel__play .i-play{display:none}
.reel__play[aria-pressed="false"] .i-pause{display:none}
.reel__play[aria-pressed="false"] .i-play{display:block}

.reel__ticks{flex:1 1 auto;display:flex;gap:.35rem;min-width:0;
  list-style:none;margin:0;padding:0}
.reel__tick{flex:1 1 0;min-width:0}
.reel__tick button{display:block;width:100%;padding:0;border:0;background:transparent;
  padding-block:calc(22px - 1px);cursor:pointer}
.reel__tick i{display:block;height:2px;position:relative;overflow:hidden;
  background:rgba(160,195,240,.2);
  transition:background .35s var(--ease-out)}
.reel__tick button:hover i{background:rgba(160,195,240,.42)}
.reel__tick.is-active i{background:rgba(160,195,240,.3)}
.reel__fill{display:block;position:absolute;inset:0;background:var(--acc-400);
  transform:scaleX(0);transform-origin:left center}
.reel__tick.is-seen .reel__fill{transform:scaleX(1);background:rgba(160,195,240,.5)}

@media (max-width:900px){
  .reel__stage{aspect-ratio:3/2;max-height:none}
  /* Sin esquinas: en 390 px el corchete cae justo debajo del texto y se
     lee como un error de render. El plano corto ya es su propio marco. */
  .reel__brk{display:none}
  .reel__meta{left:var(--reel-in);right:var(--reel-in);gap:.9rem}
  .reel__coord{left:var(--reel-in);font-size:.625rem;letter-spacing:.14em}
  .reel__cap span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .reel__caps{height:3.4em}
}
@media (max-width:560px){
  .reel__ticks{gap:.25rem}
  .reel__idx b{font-size:1.5rem}
}

/* Sin motor de animación la lista sigue siendo un carrusel usable:
   la diapositiva activa se ve, las otras no. */
@media (prefers-reduced-motion:reduce){
  .reel__edge{display:none}
  .reel__img{transform:none}
}