/* Frigorent · www.frigorent.cl — «Recorrido por la planta» (versión definitiva, 2026-10-01)
 * Estructura: hero con video · banda fachada → bloque azul con cifras · recorrido de 7 paradas (escenario pegajoso + riel de escala)
 *             · telemetría (lenguaje del portal temp.frigorent.cl) · picking · despacho · certificaciones · clientes · contacto directo
 * Tema: marca #004080 · panel #101b2c · papel #eef2f7 · Sofia Sans Extra Condensed + IBM Plex Sans + IBM Plex Mono
 * Mobile-first; respeta prefers-reduced-motion; todo el contenido es visible sin JS.
 */

/* ---------- Fuentes (alojadas en assets/fonts, subconjunto latino; licencia SIL Open Font License) ---------- */
@font-face {
  font-family: "Sofia Sans Extra Condensed"; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url("assets/fonts/sofia-sans-extra-condensed-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldo mientras llega Sofia: Arial Bold del equipo (Windows, Mac, iPhone) achicada al ancho de Sofia,
 * para que el titular quede con los mismos renglones y no salte cuando carga la fuente */
@font-face {
  font-family: "Sofia respaldo"; font-style: normal; font-weight: 800 900;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 57.5%;
}

/* ---------- Tokens ---------- */
:root {
  /* Color: marca y portal (valores del brief y de portal.css) */
  --c-marca: #004080;
  --c-marca-rgb: 0 64 128;
  --c-marca-hover: #0b4f99;
  --c-marca-linea: #2d6aa8;
  --c-marca-texto-2: #cfe0f5;
  --c-navy: #0d3580;
  --c-panel: #101b2c;
  --c-panel-rgb: 16 27 44;
  --c-panel-2: #1a2942;
  --c-panel-linea: #1e2c40;
  --c-panel-linea-2: #2c4160;
  --c-papel: #eef2f7;
  --c-papel-rgb: 238 242 247;
  --c-blanco: #ffffff;
  --c-linea: #d8e0ea;
  --c-linea-2: #e7edf5;
  --c-tinta: #142a43;
  --c-texto: #1e293b;
  --c-texto-2: #5b6b82;
  --c-texto-3: #8a99ae;
  --c-oscuro-1: #ffffff;
  --c-oscuro-2: #c6d2e4;
  --c-oscuro-3: #93a2b8;
  --c-traza: #3d68b8;
  --c-ok: #1f7a4d;
  --c-ok-claro: #6fcf97;
  --c-ok-fondo: #e6f4ea;
  --c-aviso: #b45309;
  --c-aviso-fondo: #fff3cd;
  --c-aviso-texto: #8a6100;
  --c-critica: #b42318;
  --c-foco: #2f7bf5;
  --c-foco-oscuro: #9cc3ff;
  --c-serie-1: #0d3580;
  --c-serie-2: #1f7a4d;
  --c-serie-3: #a16207;
  --c-serie-4: #0e7490;
  --c-mascara: #000000;

  /* Tipografía */
  --f-display: "Sofia Sans Extra Condensed", "Sofia respaldo", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-hero: clamp(3rem, 1.1rem + 8.2vw, 9rem);
  --t-h2: clamp(2.5rem, 1.35rem + 4.6vw, 5.5rem);
  --t-paso: clamp(3.4rem, 1.6rem + 7.4vw, 7.5rem);
  --t-cifra: clamp(2.9rem, 1.6rem + 5.4vw, 6.75rem);
  --t-cuerpo: 1.0625rem;

  /* Espacio (4 pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 20px;
  --max: 1200px;
  --seccion: clamp(72px, 9vw + 32px, 144px);
  --hdr: 60px;
  --barra: 62px;
  --riel-ancho: 172px;
  --riel-alto: 392px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-micro: 120ms;
  --d-corto: 220ms;
  --d-largo: 420ms;
  --d-lento: 900ms;

  /* Capas */
  --z-riel: 20;
  --z-progreso: 25;
  --z-cab: 50;
  --z-barra: 60;

  --radio: 2px;
  color-scheme: light;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; --hdr: 68px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-papel);
  color: var(--c-texto);
  font-family: var(--f-sans);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
.paso__foto picture, .escenario__foto picture, .respaldo__foto picture, .fachada picture,
.despacho__foto picture, .despacho__pallet picture, .picking__foto picture { height: 100%; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 3px; }
.cabecera :focus-visible, .hero :focus-visible, .planta :focus-visible, .control :focus-visible,
.despacho__bloque :focus-visible, .contacto__cabeza :focus-visible, .contacto__info :focus-visible, .pie :focus-visible, .barra-movil :focus-visible {
  outline-color: var(--c-foco-oscuro);
}
[id] { scroll-margin-top: calc(var(--hdr) + var(--s-4)); }
.recorrido [id] { scroll-margin-top: calc(var(--hdr) + 44px + var(--s-4)); }
@media (min-width: 1100px) { .recorrido [id] { scroll-margin-top: calc(var(--hdr) + var(--s-4)); } }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.saltar {
  position: fixed; left: var(--s-4); top: var(--s-2); z-index: 100;
  background: var(--c-blanco); color: var(--c-marca);
  padding: var(--s-3) var(--s-4); font-weight: 600; border-radius: var(--radio);
  transform: translateY(-160%);
}
.saltar:focus-visible { transform: none; }

/* Tipografía común */
.display {
  font-family: var(--f-display);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.004em;
  /* break-word (no «anywhere»): con text-wrap: balance, «anywhere» llegaba a cortar palabras al medio */
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
.etq {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-texto-2);
}
.meta {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-texto-2);
  letter-spacing: 0.02em;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--s-5);
  font-family: var(--f-sans); font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radio);
  cursor: pointer;
  transition: transform var(--d-micro) var(--ease-out), background-color var(--d-corto) var(--ease-out),
              color var(--d-corto) var(--ease-out), border-color var(--d-corto) var(--ease-out);
}
.boton .i { transition: transform var(--d-corto) var(--ease-out); }
.boton--claro { background: var(--c-blanco); color: var(--c-marca); }
.boton--marca { background: var(--c-marca); color: var(--c-blanco); }
.boton--contorno { background: transparent; color: var(--c-blanco); border-color: rgb(255 255 255 / 0.55); }
.boton--ancho { width: 100%; }
.boton--chico { min-height: 44px; padding: 0 var(--s-4); font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-1px); }
  .boton:hover .i { transform: translate(2px, -2px); }
  .boton--claro:hover { background: var(--c-papel); }
  .boton--marca:hover { background: var(--c-marca-hover); }
  .boton--contorno:hover { border-color: var(--c-blanco); background: rgb(255 255 255 / 0.08); }
}
.boton:active { transform: translateY(0); }

/* ---------- Cabecera (N10: transparente sobre el video, sólida al avanzar) ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-cab);
  color: var(--c-oscuro-1);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--d-largo) var(--ease-out), border-color var(--d-largo) var(--ease-out);
}
.cabecera.is-solida, .menu-abierto .cabecera, html:not(.js) .cabecera {
  background: var(--c-panel);
  border-bottom-color: var(--c-panel-linea);
}
.cabecera__fila {
  height: var(--hdr);
  display: flex; align-items: center; gap: var(--s-3);
  max-width: calc(1360px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
}
.cabecera__marca { display: block; padding: 8px 0; margin-right: auto; }
.cabecera__marca img { height: 24px; width: auto; }
.cabecera__nav { display: none; }
.cabecera__nav ul { display: flex; gap: 2px; }
.cabecera__nav a {
  position: relative; display: block; padding: 10px 11px;
  color: var(--c-oscuro-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
  transition: color var(--d-corto) var(--ease-out);
}
.cabecera__nav a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-corto) var(--ease-out);
}
.cabecera__nav a:hover, .cabecera__nav a:focus-visible { color: var(--c-oscuro-1); }
.cabecera__nav a:hover::after { transform: scaleX(1); }

.monitoreo {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  background: var(--c-marca); color: var(--c-oscuro-1);
  border: 1px solid var(--c-marca-linea); border-radius: var(--radio);
  font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-corto) var(--ease-out);
}
.monitoreo:hover { background: var(--c-marca-hover); }
.monitoreo__punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok-claro); flex: none;
  animation: latido 2.4s var(--ease-in-out) infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.monitoreo__largo { display: none; }
.monitoreo .i { width: 1em; height: 1em; }

.menu-boton {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid rgb(255 255 255 / 0.35); border-radius: var(--radio);
  cursor: pointer;
}
.menu-boton .i { width: 22px; height: 22px; grid-area: 1 / 1; }
.menu-boton .i--cerrar { display: none; }
.menu-boton[aria-expanded="true"] .i--abrir { display: none; }
.menu-boton[aria-expanded="true"] .i--cerrar { display: block; }
html:not(.js) .menu-boton { display: none; }

@media (min-width: 640px) {
  .monitoreo__largo { display: inline; }
  .monitoreo__corto { display: none; }
  .cabecera__marca img { height: 26px; }
}
@media (min-width: 1180px) {
  .cabecera__nav { display: block; }
  .menu-boton { display: none; }
  .cabecera__marca img { height: 30px; }
  .cabecera__marca { margin-right: var(--s-5); }
  .cabecera__nav { margin-right: auto; }
}

/* Menú móvil (hoja completa) */
.menu-movil {
  position: fixed; inset: var(--hdr) 0 0 0;
  background: var(--c-panel); color: var(--c-oscuro-1);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-4) var(--gutter) calc(var(--barra) + var(--s-6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--s-6);
}
.menu-movil.is-abriendo { animation: hoja var(--d-largo) var(--ease-out); }
@keyframes hoja { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-movil__lista a {
  display: flex; align-items: center; min-height: 60px;
  border-bottom: 1px solid var(--c-panel-linea);
  font-family: var(--f-display); font-weight: 900; font-size: 2.25rem; line-height: 1;
  text-transform: uppercase; text-decoration: none; letter-spacing: 0.01em;
}
.menu-movil__datos { display: grid; gap: var(--s-2); font-family: var(--f-mono); font-size: 0.9375rem; }
.menu-movil__datos a { color: var(--c-oscuro-2); text-decoration: none; min-height: 40px; display: flex; align-items: center; }
html.menu-abierto, html.menu-abierto body { overflow: hidden; }

/* ---------- Barra inferior móvil ---------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--c-panel); border-top: 1px solid var(--c-panel-linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-movil a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--barra);
  color: var(--c-oscuro-2); text-decoration: none; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
}
.barra-movil a + a { border-left: 1px solid var(--c-panel-linea); }
.barra-movil a:last-child { color: var(--c-oscuro-1); background: var(--c-marca); }
.barra-movil .i { width: 22px; height: 22px; }
@media (min-width: 900px) { .barra-movil { display: none; } }
/* Celular apaisado: la barra inferior se retira (el botón Monitoreo sigue en la cabecera) */
@media (max-height: 520px) and (orientation: landscape) {
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--barra) - env(safe-area-inset-bottom));
  display: grid; grid-template-rows: 1fr auto;
  background: var(--c-panel); color: var(--c-oscuro-1);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Sin JS el video no se reproduce y el navegador le agregaría sus controles: se muestra solo el póster */
html:not(.js) .hero__media { background: var(--c-panel) url("assets/video/hero-poster.jpg") 50% 50% / cover no-repeat; }
html:not(.js) .hero__video { display: none; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0, var(--hero-py, 0px), 0) scale(1.06);
}
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgb(var(--c-panel-rgb) / 0.62) 0%, rgb(var(--c-panel-rgb) / 0.4) 32%, rgb(var(--c-panel-rgb) / 0) 46%),
    linear-gradient(to top, rgb(var(--c-panel-rgb) / 0.94) 0%, rgb(var(--c-panel-rgb) / 0.84) 38%, rgb(var(--c-panel-rgb) / 0.2) 72%);
}
.hero__contenido {
  align-self: end;
  padding-top: calc(var(--hdr) + var(--s-6));
  padding-bottom: var(--s-7);
}
/* Texto chico y claro sobre el video: una sombra difusa detrás del rótulo y otra pegada a las letras
 * (contraste AA aunque el video pase por un techo blanco). El padding va compensado con margen negativo:
 * el texto sigue alineado con el titular y a 16 px de él. */
.hero__ante {
  position: relative; z-index: 0;
  width: fit-content;
  padding: var(--s-2) 14px; margin: 0 0 var(--s-2) -14px;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-oscuro-2);
  text-shadow: 0 1px 2px rgb(var(--c-panel-rgb) / 0.9), 0 0 6px rgb(var(--c-panel-rgb) / 0.85), 0 0 14px rgb(var(--c-panel-rgb) / 0.8);
}
.hero__ante::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(var(--c-panel-rgb) / 0.72); filter: blur(10px); border-radius: 12px;
}
.hero__ante span { white-space: nowrap; }
/* Anchos en em (no en ch): «ch» se calcula con la fuente de respaldo mientras carga la web y el titular cambiaba de renglones */
.hero__titulo {
  font-size: min(var(--t-hero), 16svh);
  max-width: 5.7em; /* = 13ch de Sofia Sans Extra Condensed */
  margin-bottom: var(--s-5);
}
.hero__bajada {
  font-size: 1.0625rem; line-height: 1.55; color: var(--c-oscuro-2);
  max-width: 27.6em; /* = 46ch de IBM Plex Sans */ margin-bottom: var(--s-6);
  text-shadow: 0 1px 2px rgb(var(--c-panel-rgb) / 0.75), 0 0 6px rgb(var(--c-panel-rgb) / 0.6), 0 0 20px rgb(var(--c-panel-rgb) / 0.55);
}
.hero__acciones { display: grid; gap: var(--s-3); }
.hero__acciones .boton { width: 100%; }
.hero__ruta { display: none; }
@media (min-width: 900px) { .hero { min-height: 100svh; } }

@media (min-width: 640px) {
  .hero__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .hero__acciones .boton { width: auto; }
  .hero__bajada { font-size: 1.1875rem; }
}
@media (min-width: 960px) {
  .hero__contenido { padding-bottom: var(--s-8); }
  .hero__ruta {
    display: block;
    border-top: 1px solid rgb(255 255 255 / 0.18);
    background: rgb(var(--c-panel-rgb) / 0.55);
    backdrop-filter: blur(6px);
  }
  /* 7 paradas en una fila: cada celda crece según su rótulo y nunca se trunca */
  .hero__ruta ol { display: flex; }
  .hero__ruta li { flex: 1 1 auto; }
  .hero__ruta li + li { border-left: 1px solid rgb(255 255 255 / 0.14); }
  .hero__ruta a {
    position: relative; display: flex; align-items: baseline; gap: 8px;
    padding: 18px 10px; min-height: 60px;
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-oscuro-2); text-decoration: none; white-space: nowrap;
    transition: color var(--d-corto) var(--ease-out);
  }
  .hero__ruta li:first-child a { padding-left: 0; }
  .hero__ruta a::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--c-oscuro-1); transform: scaleX(0); transform-origin: left;
    transition: transform var(--d-largo) var(--ease-out);
  }
  .hero__ruta a:hover { color: var(--c-oscuro-1); }
  .hero__ruta a:hover::before { transform: scaleX(1); }
  .hero__ruta .num { color: var(--c-oscuro-1); font-weight: 600; }
}
@media (min-width: 1240px) {
  .hero__ruta a { gap: 10px; padding-inline: 14px; font-size: 12.5px; letter-spacing: 0.1em; }
}
/* Escritorio: titular en 3 renglones y todo el inicio (con la franja de las 7 paradas) dentro de la primera pantalla.
 * En pantallas bajas (notebooks de 657–900 px útiles) el titular se ajusta al alto disponible. */
@media (min-width: 960px) {
  .hero__titulo { max-width: 7.25em; }
}
@media (min-width: 960px) and (max-height: 940px) {
  .hero__contenido { padding-top: calc(var(--hdr) + var(--s-4)); padding-bottom: var(--s-6); }
  .hero__titulo { font-size: max(3.5rem, min(var(--t-hero), calc((100svh - 420px) / 3))); }
}
/* Celular apaisado: el titular manda, el resto se compacta */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 100svh; }
  .hero__contenido { padding-top: calc(var(--hdr) + var(--s-4)); padding-bottom: var(--s-5); }
  .hero__titulo { font-size: 17svh; max-width: 9.65em; margin-bottom: var(--s-3); }
  .hero__ante { margin-bottom: 0; } /* + su padding de 8 px = 8 px al titular */
  .hero__bajada { margin-bottom: var(--s-4); font-size: 0.9375rem; max-width: 60ch; }
  .hero__acciones { display: flex; }
  .hero__acciones .boton { width: auto; min-height: 44px; }
  .hero__ruta { display: none; }
}
/* Celulares apaisados (360–430 px de alto): sin la bajada para que los dos botones entren completos en la primera pantalla
 * (los «37 años» se repiten en la planta, más abajo) */
@media (max-height: 480px) and (orientation: landscape) {
  .hero__bajada { display: none; }
}

/* Entrada del hero (solo con JS; sin JS todo está visible) */
.js .hero__contenido > * { animation: subir var(--d-lento) var(--ease-out) both; }
.js .hero__contenido > :nth-child(2) { animation-delay: 90ms; }
.js .hero__contenido > :nth-child(3) { animation-delay: 200ms; }
.js .hero__contenido > :nth-child(4) { animation-delay: 300ms; }
.js .hero__ruta { animation: aparecer var(--d-lento) var(--ease-out) 420ms both; }
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Revelado al hacer scroll (una sola familia) ---------- */
[data-revelar] {
  transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-revelar]:not(.is-visible) { opacity: 0; transform: translateY(20px); }

/* ---------- Banda fachada → azul de la planta ----------
 * Encuadre alto (letrero «FRIGORIFICO FRIGORENT» + andenes). El bloque azul de .planta se monta sobre el último
 * tramo de la banda: el titular parte encima del difuminado, con el azul ya denso (contraste ≥ 4,5:1 con blanco). */
:root { --banda-h: clamp(300px, 50svh, 520px); --banda-solape: 0.26; }
@media (min-width: 960px) { :root { --banda-h: clamp(420px, 60vh, 700px); } }
.fachada {
  position: relative; overflow: hidden;
  height: var(--banda-h);
  background: var(--c-marca);
}
.fachada img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 20% 45%; /* celular: letrero completo y andenes 1 y 2 */
  transform-origin: 50% 35%;
}
.fachada::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--c-marca-rgb) / 0) 0%,
    rgb(var(--c-marca-rgb) / 0.18) 25%,
    rgb(var(--c-marca-rgb) / 0.46) 44%,
    rgb(var(--c-marca-rgb) / 0.72) 56%,
    rgb(var(--c-marca-rgb) / 0.86) 70%,
    rgb(var(--c-marca-rgb) / 0.96) 86%,
    var(--c-marca) 100%);
}
.js .fachada img { transform: scale(1.06); transition: transform 2400ms var(--ease-out); }
.js .fachada.is-visible img { transform: scale(1); }
@media (min-width: 960px) {
  .fachada img { object-position: 50% 42%; }
}
/* Pantallas muy anchas (21:9, 32:9) o de más de ~2600 px: la foto se escala por el ancho y con 42 % la parte alta
 * de las letras «FRIGORIFICO» quedaba fuera de la banda → encuadre más alto */
@media (min-width: 960px) and (min-aspect-ratio: 11/5), (min-width: 2600px) {
  .fachada img { object-position: 50% 30%; }
}
/* Celular apaisado: la banda es más ancha que alta → encuadre más arriba para que el letrero no quede bajo la cabecera */
@media (max-height: 520px) and (orientation: landscape) {
  .fachada img { object-position: 50% 30%; }
}

/* ---------- Planta (bloque azul con cifras) ---------- */
.planta {
  --solape: calc(var(--banda-h) * var(--banda-solape));
  position: relative; z-index: 1;
  margin-top: calc(var(--solape) * -1);           /* se monta sobre el difuminado de la banda */
  /* el azul parte 2 px antes del borde de la banda (ahí ya es ≥ 99 % azul): sin línea clara en pantallas HiDPI o con zoom */
  background: linear-gradient(to bottom, transparent 0, transparent calc(var(--solape) - 2px), var(--c-marca) calc(var(--solape) - 2px));
  color: var(--c-oscuro-1);
  padding-block: var(--s-4) var(--seccion);
}
.planta__titulo { text-shadow: 0 2px 22px rgb(0 28 64 / 0.45); }
.planta__cabeza { display: grid; gap: var(--s-5); }
.planta__titulo { font-size: var(--t-h2); max-width: 8em; }
.planta__texto { color: var(--c-marca-texto-2); max-width: 46ch; font-size: 1.0625rem; }
.planta__etq { color: var(--c-marca-texto-2); margin: var(--s-8) 0 var(--s-4); }
.cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* filas parejas aunque un detalle tenga un renglón más */
  gap: 1px; background: var(--c-marca-linea);
  border: 1px solid var(--c-marca-linea);
}
.cifra { background: var(--c-marca); padding: var(--s-5) var(--s-4) var(--s-5); min-width: 0; }
.cifra__num {
  font-family: var(--f-display); font-weight: 900; font-size: var(--t-cifra);
  line-height: 0.82; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.cifra__unidad {
  font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em; margin-top: var(--s-2);
}
.cifra__det {
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.45; color: var(--c-marca-texto-2);
  margin-top: var(--s-3);
}
/* Recuadro sin número: la palabra ocupa el lugar de la cifra y se ajusta al ancho de la celda */
.cifra--texto { container-type: inline-size; }
.cifra__num--texto {
  display: flex; align-items: flex-end;
  min-height: calc(var(--t-cifra) * 0.82); /* misma altura de renglón que las cifras: las filas quedan alineadas */
  font-size: min(var(--t-cifra), 23cqi);
  text-transform: uppercase; letter-spacing: 0.005em;
  white-space: nowrap;
}
.cifra--texto .cifra__det { text-wrap: balance; } /* sin «verdes» suelto en el segundo renglón */
@media (min-width: 960px) {
  .planta__cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s-8); }
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifra { padding: var(--s-6) var(--s-6) var(--s-6); }
  .cifra__unidad { font-size: 2rem; }
  .cifra__det { font-size: 13px; }
}

/* ---------- Recorrido ---------- */
.recorrido { position: relative; background: var(--c-papel); }
.recorrido__intro { padding-top: var(--seccion); padding-bottom: var(--s-6); }
.recorrido__titulo { font-size: var(--t-h2); color: var(--c-marca); max-width: 7em; }
.recorrido__lead { margin-top: var(--s-4); font-size: 1.125rem; color: var(--c-texto); max-width: 40ch; }

/* Paso */
.paso { padding-block: var(--s-7); }
.paso:first-child { padding-top: var(--s-4); }
.paso__foto { margin-bottom: var(--s-5); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--c-linea); }
.paso__foto img { width: 100%; height: 100%; object-fit: cover; }
#paso-congelacion .paso__foto img { object-position: 28% 50%; }

/* Panorámica 180° de Recepción: marco 16:9 y paneo horizontal lento mientras la parada está activa */
.paso__foto--pano { aspect-ratio: 16 / 9; }
.paso__foto--pano img, .escenario__foto--pano img {
  object-position: 0% 50%;
  animation: paneo 28s ease-in-out -8s infinite alternate both;
  animation-play-state: paused;
}
.paso--pano.is-activo .paso__foto--pano.is-en-vista img,
.escenario.is-en-vista .escenario__foto--pano.is-activa img { animation-play-state: running; }
@keyframes paneo { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
.paso__etq {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-texto-2);
}
.paso__marca {
  width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; flex: none;
  transition: background-color var(--d-largo) var(--ease-out), border-color var(--d-largo) var(--ease-out);
}
.paso.is-activo .paso__marca, .control.is-activo .paso__marca, .picking.is-activo .paso__marca,
.despacho.is-activo .paso__marca, html:not(.js) .paso__marca { background: currentColor; }
@media (max-width: 400px) { .paso__etq { letter-spacing: 0.1em; } }
.paso__etq--oscuro { color: var(--c-oscuro-3); }
.paso__etq--azul { color: var(--c-marca-texto-2); }
.paso__titulo {
  font-family: var(--f-display); font-weight: 900; font-size: var(--t-paso); line-height: 1;
  text-transform: uppercase; color: var(--c-marca); letter-spacing: 0.004em;
  margin: var(--s-3) 0 var(--s-5); overflow-wrap: break-word; min-width: 0;
}
.paso__titulo--blanco { color: var(--c-oscuro-1); }
.paso__titulo--largo { font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem); }
.paso__placa {
  font-family: var(--f-mono); font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: 0.02em;
  color: var(--c-tinta); padding: 10px 0; border-block: 1px solid var(--c-linea);
}
.paso__placa--azul { color: var(--c-oscuro-1); border-color: var(--c-marca-linea); }

.servicios { margin-top: var(--s-2); }
.paso__titulo + .servicios { margin-top: 0; border-top: 1px solid var(--c-linea); } /* parada sin placa: mismo filete */
.servicios li { position: relative; padding: var(--s-4) 0 var(--s-4) 28px; border-bottom: 1px solid var(--c-linea); }
.servicios li::before {
  content: ""; position: absolute; left: 0; top: 28px; width: 14px; height: 2px; background: var(--c-marca);
}
.servicios h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--c-tinta); margin-bottom: 4px; }
.servicios p { color: var(--c-texto-2); }
.servicios p.servicios__frase { font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--c-tinta); max-width: 30ch; }
.servicios--azul li { border-color: var(--c-marca-linea); }
.servicios--azul li::before { background: var(--c-oscuro-1); }
.servicios--azul h4 { color: var(--c-oscuro-1); }
.servicios--azul p { color: var(--c-marca-texto-2); }

.etapa__escenario { display: none; }

/* Escenario pegajoso (solo escritorio con JS) */
@media (min-width: 960px) {
  .js .etapa {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8);
  }
  .js .etapa .paso {
    min-height: 64svh; padding-block: 8svh; border-top: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* Parada 01: su título llega al centro de la pantalla justo cuando el escenario ya está fijo (rótulo «01» entero a la vista).
   * 50svh − media cabecera − tope del escenario − (rótulo + margen ≈ 32 px) − medio título */
  .js .etapa .paso:first-child {
    justify-content: flex-start;
    padding-top: max(8svh, calc(50svh - var(--hdr) / 2 - var(--s-5) - 32px - clamp(1.75rem, 3vw, 3rem)));
  }
  .js .etapa .paso__foto { display: none; }
  .js .etapa .paso__titulo { font-size: clamp(3.5rem, 6vw, 6rem); }
  .js .etapa .paso__titulo--largo { font-size: clamp(3.1rem, 4.9vw, 4.8rem); } /* «DE TEMPERATURA» cabe en la columna también desde 1600 px */
  .js .etapa__escenario { display: block; }
  .escenario {
    position: sticky; top: calc(var(--hdr) + var(--s-5));
    height: calc(100svh - var(--hdr) - var(--s-5) * 2);
    max-height: 860px;
    overflow: hidden; border-radius: var(--radio); background: var(--c-panel);
  }
  .escenario__foto {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity var(--d-lento) var(--ease-in-out);
  }
  .escenario__foto img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.1);
    transition: transform 2200ms var(--ease-out);
  }
  .escenario__foto[data-paso="1"] img { object-position: 28% 50%; } /* Túnel 07: pallets y neblina */
  .escenario__foto.is-activa { opacity: 1; }
  .escenario__foto.is-activa img { transform: scale(1); }
  .escenario__rotulo {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; gap: var(--s-5);
    padding: var(--s-9) var(--s-6) var(--s-6);
    background: linear-gradient(to top, rgb(var(--c-panel-rgb) / 0.85), rgb(var(--c-panel-rgb) / 0));
    color: var(--c-oscuro-1);
  }
  .escenario__num {
    font-family: var(--f-display); font-weight: 900; font-size: clamp(6rem, 9vw, 10rem); line-height: 0.74;
    transform: translateY(18px); opacity: 0;
    transition: transform var(--d-lento) var(--ease-out) 150ms, opacity var(--d-lento) var(--ease-out) 150ms;
  }
  .escenario__txt {
    font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6;
    color: var(--c-oscuro-2); padding-bottom: 4px;
  }
  .escenario__foto.is-activa .escenario__num { transform: none; opacity: 1; }
}
/* 960–1099 px: la barra de progreso (44 px, pegada bajo la cabecera) convive con el escenario → el escenario parte bajo ella */
@media (min-width: 960px) and (max-width: 1099px) {
  .escenario {
    top: calc(var(--hdr) + 44px + var(--s-4));
    height: calc(100svh - var(--hdr) - 44px - var(--s-4) * 2);
  }
}

/* Riel de escala (termómetro) — escritorio */
.riel-ancla { display: none; }
@media (min-width: 1100px) {
  .js .riel-ancla {
    display: block; position: sticky; top: calc(50svh - var(--riel-alto) / 2 + var(--hdr) / 2);
    height: var(--riel-alto); margin-bottom: calc(-1 * var(--riel-alto)); z-index: var(--z-riel); pointer-events: none;
  }
  .js .recorrido .contenedor {
    padding-left: max(var(--gutter), calc(var(--riel-ancho) + 44px - max(0px, (100vw - var(--max) - 2 * var(--gutter)) / 2)));
  }
}
.riel {
  position: absolute; left: 16px; top: 0; width: var(--riel-ancho); height: var(--riel-alto);
  pointer-events: auto;
  background: var(--c-papel); border: 1px solid var(--c-linea); border-radius: var(--radio);
  box-shadow: 0 1px 0 rgb(var(--c-panel-rgb) / 0.06);
  transition: opacity var(--d-largo) var(--ease-out), visibility 0s linear 0s;
}
.riel.is-fuera {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-largo) var(--ease-out), visibility 0s linear var(--d-largo);
}
.riel__escala {
  position: absolute; left: 18px; top: 26px; bottom: 44px; width: 4px;
  background: var(--c-linea); border-radius: 2px;
}
.riel__escala::after {
  content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 5px;
  background: repeating-linear-gradient(to bottom, var(--c-texto-3) 0 1px, transparent 1px 8.3333%);
  opacity: 0.7;
}
.riel__relleno {
  position: absolute; inset: 0; border-radius: 2px; background: var(--c-marca);
  transform-origin: top; transform: scaleY(var(--p, 0));
}
.riel__bulbo {
  position: absolute; left: 50%; bottom: -16px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-linea); transform: translateX(-50%);
  transition: background-color var(--d-largo) var(--ease-out);
}
.riel.is-completo .riel__bulbo { background: var(--c-marca); }
.riel__lista { position: absolute; left: 0; right: 0; top: 26px; bottom: 44px; }
.riel__lista li { position: absolute; left: 0; right: 0; top: calc(var(--k) * 100% / 6); transform: translateY(-50%); }
.riel__lista a {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 36px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-texto-2); text-decoration: none; white-space: nowrap;
  transition: color var(--d-corto) var(--ease-out);
}
.riel__num { font-weight: 600; }
.riel__lista li.is-pasado a { color: var(--c-tinta); }
.riel__lista li.is-activo a { color: var(--c-marca); font-weight: 600; }
.riel__lista li.is-activo a::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: var(--c-papel); border: 3px solid var(--c-marca);
}
.riel__lista a:hover { color: var(--c-marca); }

/* Progreso compacto (celular y tableta) */
.progreso { display: none; }
.js .progreso {
  display: flex; align-items: center; gap: var(--s-3);
  position: sticky; top: var(--hdr); z-index: var(--z-progreso);
  height: 44px; padding-inline: var(--gutter);
  background: var(--c-papel);
  border-bottom: 1px solid var(--c-linea);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-texto-2);
}
.progreso__texto { white-space: nowrap; }
.progreso__num { color: var(--c-marca); font-weight: 600; }
.progreso__nombre { color: var(--c-tinta); }
.progreso__barra { position: relative; flex: 1; height: 3px; background: var(--c-linea); border-radius: 2px; overflow: hidden; }
.progreso__relleno { position: absolute; inset: 0; background: var(--c-marca); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (min-width: 1100px) { .js .progreso { display: none; } }

/* ---------- 04 · Control (lenguaje del portal) ---------- */
.control {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-panel); color: var(--c-oscuro-1);
  padding-block: var(--seccion);
  margin-top: var(--s-8);
}
.control__trazas {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 220px; z-index: -1;
  fill: none; stroke: var(--c-traza); stroke-width: 1.4; opacity: 0.3;
}
.control__trazas path { vector-effect: non-scaling-stroke; }
.control__grilla { display: grid; gap: var(--s-7); }
.control__titulo { font-size: clamp(2.5rem, 1.2rem + 3.1vw, 4.25rem); margin: var(--s-4) 0 var(--s-5); max-width: 9.5em; }
.control__parrafo { color: var(--c-oscuro-2); max-width: 46ch; }
.puntos { margin: var(--s-5) 0 var(--s-6); display: grid; gap: var(--s-2); }
.puntos li { display: flex; gap: 12px; align-items: flex-start; color: var(--c-oscuro-1); font-weight: 500; }
.puntos .i { color: var(--c-ok-claro); margin-top: 4px; }
@media (min-width: 1000px) {
  .control__grilla { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: var(--s-8); align-items: start; }
  .control__texto { position: sticky; top: calc(var(--hdr) + var(--s-6)); }
}

/* Panel del portal */
.portal {
  background: var(--c-papel); color: var(--c-texto);
  border: 1px solid var(--c-panel-linea-2); border-radius: 3px; overflow: hidden;
  font-size: 14px; line-height: 1.5;
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.6);
}
.portal__cab {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: 10px 14px; background: var(--c-navy); color: var(--c-oscuro-1);
}
.portal__cab img { height: 16px; width: auto; }
.portal__dominio { font-family: var(--f-mono); font-size: 12px; color: var(--c-oscuro-2); }
.portal__pildora {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 12px; background: var(--c-aviso-fondo); color: var(--c-aviso-texto);
}
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.punto--aviso { background: var(--c-aviso); }
.punto--ok { background: var(--c-ok); }
.portal__pildora--ok { background: var(--c-ok-fondo); color: var(--c-ok); }
.portal__rango {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 14px; background: var(--c-blanco); border-bottom: 1px solid var(--c-linea);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 34px; min-width: 44px; padding: 0 10px;
  font-family: var(--f-mono); font-size: 12.5px;
  background: var(--c-blanco); color: var(--c-tinta);
  border: 1px solid var(--c-linea); border-radius: var(--radio); cursor: pointer;
  transition: border-color var(--d-micro) var(--ease-out), background-color var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
.chip:hover { border-color: var(--c-texto-2); }
.chip[aria-pressed="true"] { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-blanco); }
.chip:active { transform: translateY(1px); }
.portal__ultimo { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--c-texto-2); white-space: nowrap; }
.portal__cuerpo { padding: 14px; }
.portal__grupo { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 8px; }
.portal__grupo .etq { font-weight: 600; font-size: 11.5px; }
.portal__grupo + .lecturas { margin-top: 0; }
.grafico { background: var(--c-blanco); border: 1px solid var(--c-linea); border-radius: 3px; padding: 12px 10px 8px; margin-bottom: 18px; }
.grafico__area { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
.grafico__y { position: relative; font-family: var(--f-mono); font-size: 12px; color: var(--c-texto-2); height: 220px; }
.grafico__y li { position: absolute; right: 2px; top: var(--y); transform: translateY(-50%); }
.grafico__lienzo { min-width: 0; }
.grafico__svg { width: 100%; height: 220px; overflow: visible; }
.grafico__grilla { stroke: var(--c-linea-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico__umbral { stroke: var(--c-critica); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.serie--1 { stroke: var(--c-serie-1); }
.serie--2 { stroke: var(--c-serie-2); }
.serie--3 { stroke: var(--c-serie-3); }
.serie--4 { stroke: var(--c-serie-4); }
.grafico__x {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--c-texto-2);
}
.leyenda {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; padding: 0 2px;
  font-family: var(--f-mono); font-size: 12.5px; color: var(--c-tinta);
}
.leyenda__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.leyenda__item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.leyenda__guion { width: 14px; height: 2px; background: currentColor; }
.leyenda__item--1 .leyenda__guion { background: var(--c-serie-1); }
.leyenda__item--2 .leyenda__guion { background: var(--c-serie-2); }
.leyenda__item--3 .leyenda__guion { background: var(--c-serie-3); }
.leyenda__item--4 .leyenda__guion { background: var(--c-serie-4); }

.lecturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .lecturas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lectura {
  position: relative; background: var(--c-blanco);
  border: 1px solid var(--c-linea); border-left: 3px solid var(--c-ok); border-radius: var(--radio);
  padding: 10px 12px 8px; min-width: 0;
  box-shadow: 0 1px 0 rgb(var(--c-panel-rgb) / 0.06);
}
.lectura--fuera { border-left-color: var(--c-aviso); }
.lectura__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.lectura__nombre { font-weight: 600; font-size: 14px; color: var(--c-tinta); white-space: nowrap; }
.lectura__estado {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radio); background: var(--c-ok-fondo); color: var(--c-ok); white-space: nowrap;
}
.lectura--fuera .lectura__estado { background: var(--c-aviso-fondo); color: var(--c-aviso-texto); }
.lectura__sub { font-size: 12px; color: var(--c-texto-2); margin-top: 2px; }
.nw { white-space: nowrap; }
.lectura__valor {
  font-family: var(--f-mono); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem); font-weight: 600;
  color: var(--c-tinta); letter-spacing: -0.01em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lectura__valor small { font-size: 12px; font-weight: 400; color: var(--c-texto-2); margin-left: 4px; }
.lectura__meta {
  font-family: var(--f-mono); font-size: 11px; color: var(--c-texto-2);
  border-top: 1px dashed var(--c-linea-2); padding-top: 5px; margin-top: 4px;
}
.portal__nota {
  padding: 10px 14px; border-top: 1px solid var(--c-linea); background: var(--c-blanco);
  font-family: var(--f-mono); font-size: 12px; color: var(--c-texto-2);
}

/* Respaldo técnico */
.respaldo { display: grid; gap: var(--s-6); margin-top: var(--s-9); }
.respaldo__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); }
.respaldo__foto img { width: 100%; height: 100%; object-fit: cover; }
.respaldo__foto figcaption {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgb(var(--c-panel-rgb) / 0.8); color: var(--c-oscuro-2); padding: 4px 8px; border-radius: var(--radio);
}
.respaldo__titulo {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1;
  text-transform: uppercase; margin-bottom: var(--s-5);
}
.ficha { border-top: 1px solid var(--c-panel-linea-2); margin-bottom: var(--s-5); }
.ficha div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 12px 0; border-bottom: 1px solid var(--c-panel-linea-2);
}
.ficha dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-oscuro-3); }
.ficha dd { font-family: var(--f-mono); font-size: 15px; font-weight: 500; color: var(--c-oscuro-1); }
.respaldo__texto p { color: var(--c-oscuro-2); max-width: 52ch; }
@media (min-width: 640px) {
  .ficha div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; gap: var(--s-4); }
}
@media (min-width: 1000px) {
  .respaldo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
}

/* ---------- 06 · Picking (bloque dividido: texto / foto a sangre por la derecha) ---------- */
.picking { position: relative; background: var(--c-papel); padding-block: var(--s-8) var(--s-9); }
.picking__grilla { display: grid; }
.picking__foto {
  position: relative; margin-bottom: var(--s-5);
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--c-linea);
}
.picking__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.picking__foto figcaption, .despacho__pallet figcaption {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgb(var(--c-panel-rgb) / 0.8); color: var(--c-oscuro-2); padding: 4px 8px; border-radius: var(--radio);
}
/* Celular y tableta: el recorte 4:3 deja la tablet abajo → el rótulo va arriba, sobre las cajas, sin tapar la pantalla */
.picking__foto figcaption { top: 10px; bottom: auto; }
.picking__lead { font-size: 1.1875rem; line-height: 1.5; color: var(--c-tinta); max-width: 34ch; margin-bottom: var(--s-4); }
@media (min-width: 960px) {
  .picking { padding-block: var(--s-9); }
  .picking__grilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; }
  .picking__texto { grid-column: 1 / span 5; grid-row: 1; }
  .picking__foto {
    grid-column: 7 / span 6; grid-row: 1; margin-bottom: 0;
    aspect-ratio: auto; height: clamp(520px, 80svh, 780px);
    /* a sangre hasta el borde derecho de la ventana */
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2));
    border-radius: 0;
  }
  .picking__foto img { object-position: 50% 66%; }
  .picking__foto figcaption { left: 14px; top: auto; bottom: 14px; }
}

/* ---------- 07 · Despacho ---------- */
.despacho { position: relative; background: var(--c-papel); padding-bottom: var(--s-9); }
.despacho__foto { position: relative; height: clamp(280px, 62vw, 460px); overflow: hidden; background: var(--c-panel); }
.despacho__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
}
.despacho__grilla { position: relative; display: grid; }
/* Pallets listos para despacho (foto del slider del sitio anterior), marco 4:3 */
.despacho__pallet {
  position: relative; z-index: 1;
  width: min(78%, 360px); aspect-ratio: 4 / 3;
  margin-top: -104px; overflow: hidden;
  border: 5px solid var(--c-papel); border-radius: var(--radio); background: var(--c-linea);
}
.despacho__pallet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.despacho__pallet figcaption { left: 8px; bottom: 8px; }
.despacho__bloque {
  background: var(--c-marca); color: var(--c-oscuro-1);
  padding: var(--s-6) var(--s-5) var(--s-6);
  margin-top: var(--s-4);
}
.despacho__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
.despacho__acciones .boton { width: 100%; }
.enlace-mono {
  font-family: var(--f-mono); font-size: 14px; color: var(--c-oscuro-1);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / 0.45);
  min-height: 44px; display: inline-flex; align-items: center;
}
.enlace-mono:hover { text-decoration-color: currentColor; }
@media (min-width: 640px) {
  .despacho__acciones .boton { width: auto; }
  .despacho__bloque { padding: var(--s-7) var(--s-7) var(--s-7); }
}
@media (min-width: 960px) {
  .despacho__foto { height: clamp(420px, 70svh, 720px); }
  /* Margen para el parallax (±35 px) con la imagen 80 px más alta que el marco en vez de scale(1.12): en pantallas
   * anchas manda el ancho, así la foto (1280 px de origen) no se agranda un 12 % extra (1,68× → 1,5× a 1920 px) */
  .despacho__foto img {
    position: absolute; left: 0; top: -40px;
    height: calc(100% + 80px); max-width: none;
    transform: translate3d(0, var(--py, 0px), 0);
  }
  .despacho__grilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
  .despacho__pallet {
    grid-column: 1 / span 5; width: auto; margin-top: -180px;
    border-width: 6px;
  }
  .despacho__pallet figcaption { left: 10px; bottom: 10px; }
  .despacho__bloque { grid-column: 6 / span 7; margin-top: -240px; position: relative; }
}

/* ---------- Certificaciones ---------- */
.certificaciones { padding-block: var(--seccion); background: var(--c-papel); border-top: 1px solid var(--c-linea); }
.seccion__titulo { font-size: var(--t-h2); color: var(--c-marca); max-width: 9em; margin-bottom: var(--s-7); }
.cert__grilla { display: grid; gap: var(--s-4); }
.cert {
  display: grid; gap: var(--s-5); align-content: start;
  background: var(--c-blanco); border: 1px solid var(--c-linea); border-radius: var(--radio);
  padding: var(--s-5);
}
.cert__logo { width: 132px; height: auto; }
.cert--seremi .cert__logo { width: 116px; }
.cert__texto .etq { margin-bottom: var(--s-3); }
.cert__titulo {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem); line-height: 1;
  text-transform: uppercase; color: var(--c-marca); text-wrap: balance;
}
.cert__titulo--menor { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); color: var(--c-tinta); }
@media (min-width: 640px) {
  .cert { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--s-6); gap: var(--s-6); }
  .cert__logo { width: 150px; }
  .cert--seremi .cert__logo { width: 124px; }
}
@media (min-width: 1000px) {
  .cert__grilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cert { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cert--sag { padding: var(--s-7); }
}
/* SAG con el logo al lado solo cuando a la bajada le queda ancho (entre 1000 y 1199 px va con el logo arriba) */
@media (min-width: 1200px) {
  .cert--sag { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .cert--sag .cert__logo { width: 180px; }
  .cert--sag .cert__titulo { font-size: clamp(2.4rem, 1rem + 2.2vw, 3.25rem); }
}

/* ---------- Clientes (carrusel continuo, deslizable) ---------- */
.clientes { padding-block: var(--seccion) var(--s-8); background: var(--c-blanco); border-top: 1px solid var(--c-linea); }
.clientes .seccion__titulo { margin-bottom: var(--s-6); }
.carrusel {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--c-mascara) 5%, var(--c-mascara) 95%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--c-mascara) 5%, var(--c-mascara) 95%, transparent);
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline-offset: -3px; }
.carrusel__pista {
  display: flex; gap: 12px; width: max-content;
  padding: var(--s-2) 0 var(--s-4);
  animation: desfile 64s linear infinite;
}
.carrusel:hover .carrusel__pista, .carrusel:focus-within .carrusel__pista,
.carrusel.is-pausado .carrusel__pista, .carrusel.is-fuera .carrusel__pista { animation-play-state: paused; }
@keyframes desfile { to { transform: translateX(calc(-50% - 6px)); } }
html:not(.js) .carrusel__pista { animation: none; }
.logo-cliente {
  position: relative; flex: none; width: 164px; height: 104px; overflow: hidden;
  background: var(--c-blanco); border: 1px solid var(--c-linea); border-radius: var(--radio);
}
.logo-cliente img {
  position: absolute; inset: 10px 14px; width: calc(100% - 28px); height: calc(100% - 20px);
  object-fit: contain;
}
.logo-cliente--zoom img { transform: scale(var(--zoom, 1)); }
@media (min-width: 960px) { .logo-cliente { width: 196px; height: 120px; } }

/* ---------- Contacto ---------- */
.contacto { background: var(--c-marca); color: var(--c-oscuro-1); padding-block: var(--seccion); }
.contacto__grilla { display: grid; gap: var(--s-7); }
.contacto__titulo { font-size: var(--t-h2); max-width: 7.5em; margin-bottom: var(--s-5); }
.contacto__texto { color: var(--c-marca-texto-2); font-size: 1.125rem; line-height: 1.55; max-width: 38ch; margin-bottom: var(--s-6); }
.datos { display: grid; gap: var(--s-5); }
.datos > div { border-top: 1px solid var(--c-marca-linea); padding-top: var(--s-4); }
.datos .etq { color: var(--c-marca-texto-2); margin-bottom: var(--s-2); }
.datos dd { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); align-items: center; }
.datos address { color: var(--c-oscuro-1); font-size: 1.0625rem; width: 100%; margin-bottom: var(--s-3); }
.dato-enlace {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 1.25rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: var(--c-oscuro-1);
}
.dato-enlace .i { color: var(--c-marca-texto-2); }
.dato-enlace:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Contacto directo: botones grandes para el pulgar (correo, dos teléfonos, mapa) */
.directo {
  background: var(--c-papel); color: var(--c-texto);
  border-radius: var(--radio); padding: var(--s-5) var(--s-4) var(--s-4);
  display: grid; gap: var(--s-4); align-content: start;
}
.directo__titulo {
  font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--c-marca);
  padding-inline: var(--s-1);
}
.directo__lista { display: grid; gap: 10px; }
.acceso {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; padding: 12px 16px;
  background: var(--c-blanco); color: var(--c-tinta);
  border: 1px solid var(--c-linea); border-radius: var(--radio);
  text-decoration: none;
  transition: border-color var(--d-corto) var(--ease-out), background-color var(--d-corto) var(--ease-out), transform var(--d-micro) var(--ease-out);
}
.acceso__icono { width: 26px; height: 26px; color: var(--c-marca); }
.acceso__txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.acceso__etq {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-texto-2);
}
.acceso__valor { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.acceso__flecha { width: 18px; height: 18px; color: var(--c-texto-3); transition: transform var(--d-corto) var(--ease-out), color var(--d-corto) var(--ease-out); }
.acceso--principal { background: var(--c-marca); border-color: var(--c-marca); color: var(--c-oscuro-1); }
.acceso--principal .acceso__icono, .acceso--principal .acceso__flecha { color: var(--c-oscuro-1); }
.acceso--principal .acceso__etq { color: var(--c-marca-texto-2); }
.acceso:active { transform: translateY(1px); }
.acceso:focus-visible { outline-color: var(--c-foco); }
@media (hover: hover) and (pointer: fine) {
  .acceso:hover { border-color: var(--c-marca-linea); }
  .acceso:hover .acceso__flecha { transform: translate(2px, -2px); color: var(--c-marca); }
  .acceso--principal:hover { background: var(--c-marca-hover); border-color: var(--c-marca-hover); }
  .acceso--principal:hover .acceso__flecha { color: var(--c-oscuro-1); }
}
@media (min-width: 640px) {
  .directo { padding: var(--s-6); gap: var(--s-5); }
  .acceso { min-height: 84px; padding: 14px 20px; gap: 18px; }
  .acceso__valor { font-size: 1.3125rem; }
}
/* Celular: título → botones (pulgar primero) → dirección. Escritorio: texto a la izquierda, botones a la derecha */
.contacto__grilla { grid-template-areas: "cabeza" "directo" "info"; }
.contacto__cabeza { grid-area: cabeza; }
.contacto__info { grid-area: info; }
.directo { grid-area: directo; }
.contacto__cabeza .contacto__texto { margin-bottom: 0; }
@media (min-width: 960px) {
  .contacto__grilla {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-9); row-gap: var(--s-6);
    grid-template-areas: "cabeza directo" "info directo"; align-items: start;
  }
  .directo { align-self: center; }
}

/* ---------- Pie (Ft1, con logotipo completo) ---------- */
.pie {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-panel); color: var(--c-oscuro-2);
  padding-top: var(--s-9);
}
.pie__trazas {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 160px; z-index: -1;
  fill: none; stroke: var(--c-traza); stroke-width: 1.4; opacity: 0.28;
}
.pie__trazas path { vector-effect: non-scaling-stroke; }
.pie__grilla { display: grid; gap: var(--s-7); }
.pie__marca img { width: 220px; height: auto; }
.pie__col { display: grid; gap: var(--s-2); font-size: 0.9375rem; align-content: start; }
.pie__col .etq { color: var(--c-oscuro-3); margin-bottom: var(--s-1); }
.pie__col a { color: var(--c-oscuro-1); text-decoration: none; }
.pie__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__monitoreo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.pie__dominio { font-family: var(--f-mono); font-size: 12px; color: var(--c-oscuro-3); }
.pie__base {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  margin-top: var(--s-8); padding-top: var(--s-5); padding-bottom: var(--s-8);
  border-top: 1px solid var(--c-panel-linea);
  font-family: var(--f-mono); font-size: 12px; color: var(--c-oscuro-3);
}
@media (min-width: 900px) {
  .pie__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: start; }
  .pie__marca img { width: 280px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-revelar]:not(.is-visible) { opacity: 1; transform: none; }
  .js .hero__contenido > *, .js .hero__ruta { animation: none; }
  .hero__video { transform: none; }
  .monitoreo__punto { animation: none; }
  .carrusel__pista { animation: none; }
  .carrusel__pista .logo-cliente[aria-hidden="true"] { display: none; }
  .escenario__foto img, .escenario__foto.is-activa img { transform: none; }
  .escenario__num { transform: none; opacity: 1; }
  .despacho__foto img { transform: none; }
  .js .fachada img, .js .fachada.is-visible img { transform: none; }
  /* Panorámica fija en ~20 %: se ven los camiones frente a los andenes */
  .paso__foto--pano img, .escenario__foto--pano img { animation: none; object-position: 20% 50%; }
}