/* ==========================================================================
   Implus SpA - Landing (tema claro)
   Fondo blanco; textos y elementos en la gama de azules corporativos.
   Tinta #002C5F, acción #0C6AB0, énfasis grande #0078C9, celeste #4AC6F3
   solo en líneas y progreso (nunca como texto).
   Radios: botones y chips pill, media y paneles 16px, campos 12px.

   Retícula: un contenedor de 1280px dividido 5/12 + 7/12 con una canaleta
   --gap-col. Todas las cabeceras de sección (título | entradilla), los
   grids de Nosotros, Importaciones y Contacto, el pie y el marco del hero
   caen sobre esa misma línea de división.
   Ritmo vertical: --space-section entre secciones, --space-head entre
   cabecera y contenido, 2rem entre grupos, 1rem dentro de un grupo.

   Capas (z-index): contenido 1, marco del hero 2, header 50, menú móvil 60,
   skip-link 70.
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); }

:root {
  /* Colores corporativos Implus */
  --azul-oscuro: #002c5f;
  --acento: #0c6ab0;
  --azul-medio: #0078c9;
  --celeste: #4ac6f3;
  --azul-claro: #e3f2fd;
  --gris-claro: #f8f9fa;
  --gris-medio: #6c757d;

  /* Superficies */
  --bg: #ffffff;
  --panel: var(--gris-claro);
  --tint: var(--azul-claro);

  /* Texto (contraste sobre blanco: tinta 13.9:1, texto 8.6:1, secundario 5.1:1) */
  --ink: var(--azul-oscuro);
  --text: #334e6b;
  --muted: #5b7089;
  --on-navy: #ffffff;
  --on-navy-muted: #bcd0e4;

  /* Líneas */
  --line: #dde5ee;
  --line-strong: #c3d1e0;
  --line-navy: rgb(227 242 253 / 0.16);

  /* Acciones y estados */
  --primary: var(--acento);
  --primary-hover: var(--azul-oscuro);
  --error: #b42318;
  --error-bg: #fdeceb;

  /* Elevación (neutra, con desplazamiento y desenfoque) */
  --lift: 0 1px 2px rgb(16 24 40 / 0.06), 0 12px 24px -16px rgb(16 24 40 / 0.2);

  --radius: 16px;
  --radius-field: 12px;
  --header-h: 72px;
  --container: 1280px;
  /* Con notch en horizontal, el margen de ambos lados respeta el área segura. */
  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right));

  /* Retícula y ritmo */
  --gap-col: clamp(2rem, 5.5vw, 5rem);
  --space-section: clamp(4.5rem, 8vw, 7rem);
  --space-head: clamp(2.5rem, 4vw, 3.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
  background: var(--bg);
  scrollbar-color: #a9bccf #f1f4f8;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: #cfe8fb; color: var(--ink); }
input, textarea { caret-color: var(--primary); }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 70;
  padding: 10px 18px; border-radius: 999px;
  background: var(--primary); color: #fff; font-weight: 600;
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--outline { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }
.btn--sm { min-height: 40px; padding: 0 1.1rem; font-size: 0.875rem; }
.btn--lg { min-height: 52px; padding: 0 1.75rem; font-size: 1rem; }


/* --------------------------------------------------------------------------
   Header: logo de 40px, misma altura que el botón, centrado en 72px. El logo
   va casi pegado al borde izquierdo (8-24px, fuera del notch en horizontal);
   la navegación y el botón siguen alineados al borde del contenedor.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 20px -16px rgb(16 24 40 / 0.22); }
.site-header__inner {
  height: 100%;
  padding-left: max(clamp(8px, 1.25vw, 24px), env(safe-area-inset-left));
  padding-right: max(var(--gutter), (100% - var(--container)) / 2, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: block; margin-right: auto; }
.brand img { height: 40px; width: auto; }

.nav { display: flex; gap: 0.25rem; }
.nav a {
  position: relative; padding: 0.5rem 0.75rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink);
  transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px; background: var(--celeste);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
}
.nav a:hover, .nav a.is-active { color: var(--primary); }
.nav a.is-active::after { transform: scaleX(1); }

.menu-toggle {
  display: none; width: 44px; height: 44px; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink);
}
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .icon--close, .menu-open .menu-toggle .icon--open { display: none; }
.menu-open .menu-toggle .icon--close { display: block; }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav a {
  display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
}
.mobile-menu__contact { display: grid; gap: 0.25rem; }
.mobile-menu__contact a { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; font-weight: 500; color: var(--primary); }

/* --------------------------------------------------------------------------
   Hero
   El texto ocupa la columna 5/12 y el marco del vídeo arranca en la columna
   7/12 (misma línea que el resto de la página) y sangra hasta el borde
   derecho. --p (0 → 1) lo lleva a pantalla completa; todo se calcula en CSS.
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--bg); }
.hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.hero__inner { height: 100%; display: flex; align-items: center; padding-top: var(--header-h); }
.hero__copy {
  position: relative; z-index: 1;
  width: calc((100% - var(--gap-col)) * 5 / 12 + var(--gap-col) / 2);
}

.hero__title {
  font-size: clamp(3rem, 6.7vw, 6rem); font-weight: 700;
  line-height: 0.98; letter-spacing: -0.035em; color: var(--ink);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero__title .line > span { display: inline-block; }
.hero__accent { color: var(--azul-medio); }
.hero__lead { margin-top: 1.5rem; max-width: 42ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

.hero__frame {
  --p: 0;
  --cw: min(var(--container), 100% - 2 * var(--gutter));
  --rest-left: calc((100% - var(--cw)) / 2 + (var(--cw) - var(--gap-col)) * 5 / 12 + var(--gap-col));
  --r: calc(var(--radius) * (1 - var(--p)));
  position: absolute; z-index: 2; right: 0;
  top: calc((var(--header-h) + 16px) * (1 - var(--p)));
  bottom: calc(24px * (1 - var(--p)));
  left: calc(var(--rest-left) * (1 - var(--p)));
  border-radius: var(--r) 0 0 var(--r);
  overflow: hidden;
  background: var(--panel);
}
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 0.6s ease; }
.hero__video.is-ready { opacity: 1; }

/* Cableado del hero (≥1024px): mazos de cables de 1px que salen del marco del
   vídeo por encima y por debajo del texto; en cada mazo un cable celeste de
   2px, como los cables azules de la foto. Las rutas las calcula initHeroNet()
   en main.js a partir de la retícula real. Se dibujan una vez al cargar y el
   indicador de scroll recorre su cable una sola vez (termina a los 5 s). */
.net { display: none; }
.net path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.net .is-signal { stroke: var(--celeste); stroke-width: 2; }
.net .net-plug { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; }
.hero__net .net-cue {
  stroke: var(--celeste); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  animation: net-cue 2.8s cubic-bezier(0.65, 0, 0.35, 1) 2.2s 1;
}
.hero__net.is-paused .net-cue { animation-play-state: paused; }
.net.is-drawing .net-cable, .net-stage.is-drawing .net-cable {
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  animation: net-draw 1.6s cubic-bezier(0.33, 1, 0.68, 1) var(--delay, 0s) forwards;
}
.net.is-drawing .net-plug, .net-stage.is-drawing .net-plug { opacity: 0; animation: net-in 0.4s var(--ease-out) var(--delay, 0.2s) forwards; }
/* Importaciones: cada tramo queda armado sin dibujar hasta que entra en pantalla. */
.net-stage.is-waiting .net-cable { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.net-stage.is-waiting .net-plug { opacity: 0; }
@keyframes net-draw { to { stroke-dashoffset: 0; } }
@keyframes net-in { to { opacity: 1; } }
@keyframes net-cue {
  0% { stroke-dashoffset: var(--len); }
  45% { stroke-dashoffset: 0; }
  85%, 100% { stroke-dashoffset: calc(var(--len) * -1); }
}

@media (min-width: 1024px) {
  .hero__net {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; overflow: visible; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--net-fade, 48px));
    mask-image: linear-gradient(90deg, transparent, #000 var(--net-fade, 48px));
  }
}

/* Con reduced motion no hay scrub que los desvanezca: los cables que bajan se
   funden antes del pie del hero en lugar de cortarse en seco. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .hero__net {
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 var(--net-fade, 48px)),
      linear-gradient(180deg, #000 calc(100% - 96px), transparent calc(100% - 24px));
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent, #000 var(--net-fade, 48px)),
      linear-gradient(180deg, #000 calc(100% - 96px), transparent calc(100% - 24px));
    mask-composite: intersect;
  }
}

/* Entrada del titular (escritorio): cada línea sube desde su máscara. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero__title .line > span { animation: hero-rise 0.9s var(--ease-out) backwards; }
  .hero__title .line + .line > span { animation-delay: 0.08s; }
  .hero__title.is-settled .line > span { animation: none; }
}
@keyframes hero-rise { from { transform: translateY(110%); } }

/* --------------------------------------------------------------------------
   Secciones
   Cabecera compartida: título en la columna 5/12, entradilla en la 7/12,
   alineadas por su última línea base.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section-head {
  display: grid; grid-template-columns: 5fr 7fr; gap: 1rem var(--gap-col);
  align-items: end; align-items: last baseline;
  margin-bottom: var(--space-head);
}
.section-title {
  font-size: clamp(2.125rem, 3.5vw, 3rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance;
}
.section-lead { max-width: 60ch; font-size: 1.125rem; text-wrap: pretty; }

/* Nosotros */
.about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-col); align-items: start; }
.about__media {
  position: sticky; top: calc(var(--header-h) + 2rem);
  aspect-ratio: 3 / 4; max-height: calc(100svh - var(--header-h) - 4rem);
  border-radius: var(--radius); overflow: hidden; background: var(--panel);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__body h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.about__intro { padding-bottom: 2rem; }
.about__intro > p:last-child { margin-top: 0.75rem; }
.about__stat { display: flex; align-items: flex-end; gap: 0.9rem; margin-bottom: 1.5rem; }
.about__num {
  font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--azul-medio); font-variant-numeric: tabular-nums;
}
.about__unit { max-width: 9ch; padding-bottom: 0.2rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.about-row {
  position: relative;
  display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: 0.5rem 2rem;
  padding-block: 2rem;
}
/* Hairlines como pseudo-elementos: así pueden trazarse al entrar (Revelados). */
.about-row::before, .about-row:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line); transform-origin: left;
}
.about-row::before { top: 0; }
.about-row:last-child::after { bottom: 0; }

/* Productos */
.products { background: var(--panel); border-block: 1px solid var(--line); }
.products__viewport {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + 2rem) 2.5rem;
  overflow: hidden;
}
.products__head { margin-bottom: 2.5rem; }
.products__track {
  display: flex; align-items: flex-start; gap: 1.5rem; width: max-content;
  /* Misma sangría que .container (100% = ancho del viewport sin scrollbar). */
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
}
.product {
  flex: none; width: clamp(260px, min(28vw, (100svh - 500px) * 1.33), 420px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--lift);
  overflow: hidden;
}
.product__media { aspect-ratio: 4 / 3; background: #e8eaee; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__body { padding: 1.25rem 1.5rem 1.5rem; }
.product h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.product p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; }
.products__progress { height: 2px; margin-top: 2rem; border-radius: 2px; background: var(--line); overflow: hidden; }
.products__progress span { display: block; height: 100%; background: var(--celeste); transform: scaleX(0); transform-origin: left; }

/* Importaciones. En escritorio un mazo de cables entra por el borde izquierdo,
   pasa sobre el título, baja por la canaleta 5/12 | 7/12 y entra por arriba
   al vídeo marítimo; pasa por detrás, sale por abajo, cruza bajo la rejilla y
   entra por abajo al aéreo, del que sale otro hacia la derecha. Termina antes
   del fin de la sección y nunca se ve sobre los vídeos (initImportNet en
   main.js). El contenido va sobre el cableado. */
.imports { position: relative; }
.imports > .container { position: relative; z-index: 1; }
.imports__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.import-tile__media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.import-tile__media img, .import-tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.import-tile video { opacity: 0; transition: opacity 0.5s ease; }
.import-tile video.is-ready { opacity: 1; }

@media (min-width: 1024px) {
  .imports__net {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; overflow: visible; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 48px), #000 calc(100% - var(--fade-r, 48px)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 48px), #000 calc(100% - var(--fade-r, 48px)), transparent);
  }
}

/* Clientes: banda gris como Productos; los logos son fichas blancas elevadas. */
.clients { background: var(--panel); border-block: 1px solid var(--line); }
/* El carrusel ocupa el contenedor y muestra --mq-n fichas a la vez (4 en
   escritorio, 3 en tablet, 2,2 en celular); el ancho de ficha sale del ancho
   del carrusel (cqw), así una ficha más solo alarga el recorrido. El relleno
   vertical deja ver la sombra entera; el margen negativo lo compensa. */
.marquee {
  --mq-n: 4; --mq-gap: 1.5rem;
  container-type: inline-size;
  width: min(var(--container), 100% - 2 * var(--gutter)); margin: -8px auto -20px;
  padding-block: 8px 20px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  --chip-w: clamp(140px, 40vw, 220px); /* respaldo sin unidades de contenedor */
  display: flex; gap: var(--mq-gap); width: max-content;
}
@supports (width: 1cqw) {
  .marquee__track { --chip-w: calc((100cqw - (var(--mq-n) - 1) * var(--mq-gap)) / var(--mq-n)); }
}
.marquee:not(.is-running) { -webkit-mask-image: none; mask-image: none; }
.marquee:not(.is-running) .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; }
.logo-chip {
  flex: none; width: var(--chip-w); height: calc(var(--chip-w) * 0.44);
  display: flex; align-items: center; justify-content: center; padding: 20px 28px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--lift);
}
/* Misma área óptica para todos los logos: ancho = L·√(ancho/alto), con
   --ar tomado de los atributos width/height del <img> (main.js). Sin sqrt()
   o sin JS, el logo se contiene en la ficha. */
.logo-chip img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  width: calc(var(--chip-w) * 0.255 * sqrt(var(--ar, 3)));
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
/* Abajo 4rem: la costura con el pie (hairline + 4rem) queda simétrica. */
.contact { background: var(--ink); color: var(--on-navy); padding-block: var(--space-section) 4rem; }
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-col); align-items: start; }
.contact__info { position: sticky; top: calc(var(--header-h) + 2rem); }
.contact__title {
  font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.03em; color: var(--on-navy); text-wrap: balance;
}
.contact__lead { margin-top: 1.25rem; max-width: 40ch; font-size: 1.125rem; color: var(--on-navy-muted); }
.contact__list { position: relative; margin-top: 2.5rem; }
.contact__list li { position: relative; padding-block: 1rem; }
.contact__list::before, .contact__list li::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line-navy); transform-origin: left;
}
.contact__list::before { top: 0; }
.contact__list li::after { bottom: 0; }
.contact__list li:nth-child(2) { --k: 1; }
.contact__list li:nth-child(3) { --k: 2; }
.contact__item { display: flex; align-items: center; gap: 1rem; color: var(--on-navy); }
.contact__item .icon { width: 22px; height: 22px; color: var(--azul-claro); }
.contact__item small { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--on-navy-muted); }
.contact__value { font-size: 1.0625rem; font-weight: 600; }
a.contact__item:hover .contact__value { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact__item:focus-visible { outline-color: #fff; }

.contact__card {
  background: #fff; color: var(--text);
  border-radius: var(--radius); padding: clamp(1.5rem, 3.2vw, 3rem);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 28px 48px -24px rgb(0 0 0 / 0.4);
}

/* Formulario */
.form { position: relative; }
.form__head h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.form__head p { margin-top: 0.35rem; font-size: 0.875rem; color: var(--muted); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; margin-top: 2rem; }
.field { min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .chips legend { display: block; margin-bottom: 0.45rem; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }

.input {
  width: 100%; min-height: 48px; padding: 0.7rem 1rem;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  font-size: 1rem; line-height: 1.45; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: #9fb3c8; }
.input:focus { outline: none; border-color: var(--azul-medio); box-shadow: 0 0 0 3px rgb(0 120 201 / 0.18); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(180 35 24 / 0.15); }
textarea.input { min-height: 140px; resize: vertical; }
.field__error { margin-top: 0.4rem; font-size: 0.8125rem; line-height: 1.45; color: var(--error); }
.field__error[hidden] { display: none; }

.chips { border: 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; }
.chips__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 40px; padding: 0.45rem 0.95rem;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s;
  pointer-events: none;
}
.chip .icon { display: none; width: 14px; height: 14px; color: var(--primary); }
.chip input:hover + span { border-color: var(--primary); }
.chip input:checked + span { background: var(--tint); border-color: var(--primary); }
.chip input:checked + span .icon { display: block; }
.chip input:focus-visible + span { outline: 2px solid var(--azul-medio); outline-offset: 2px; }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 2rem; }
.form__privacy { max-width: 30ch; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.form__status { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--error); }
.form__status:empty { display: none; }
.btn[aria-busy="true"] { background: var(--primary-hover); cursor: progress; }
.btn[aria-busy="true"] .icon { animation: send 0.9s ease-in-out infinite; }
@keyframes send { 50% { transform: translate(3px, -3px); opacity: 0.55; } }

.form__panel { padding-block: 0.5rem; }
.form__panel[hidden] { display: none; }
.form__panel-icon {
  width: 52px; height: 52px; margin-bottom: 1.25rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tint); color: var(--primary);
}
.form__panel-icon .icon { width: 26px; height: 26px; }
.form__panel--fail .form__panel-icon { background: var(--error-bg); color: var(--error); }
.form__panel h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.form__panel p { margin-top: 0.6rem; max-width: 46ch; }
.form__panel-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Footer: marca en la columna 5/12; navegación y contacto reparten la 7/12.
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-navy); padding-block: 4rem 2rem; border-top: 1px solid var(--line-navy); }
.site-footer__grid {
  display: grid; gap: 2.5rem var(--gap-col);
  /* Primera columna = 5/12 exactos; navegación y contacto reparten la 7/12. */
  grid-template-columns: calc((100% - var(--gap-col)) * 5 / 12) 1fr 1fr;
}
.site-footer__brand img { height: 40px; width: auto; margin-bottom: 1rem; }
.site-footer p { font-size: 0.9375rem; color: var(--on-navy-muted); }
.site-footer__place { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-content: start; }
.site-footer__nav a, .site-footer__contact a { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; font-size: 0.9375rem; color: var(--on-navy); }
.site-footer__nav a:hover, .site-footer__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__contact { display: grid; align-content: start; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-navy); }
.site-footer__legal p { font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   Revelados: eco de la entrada del hero en el resto de la página, una sola
   vez al entrar en pantalla. Los títulos suben desde su máscara como el
   titular (0.9s, curva de firma); los medios se abren desde un recorte
   redondeado como el marco del hero; las hairlines se trazan desde la
   izquierda; entradillas, tarjetas y filas suben 16–40px con fundido.
   html.reveal lo pone el script del <head> (solo con IntersectionObserver y
   sin reduced motion) e initReveal() marca .is-in, con 80ms entre elementos
   que entran juntos. Sin esa clase todo está visible y quieto.
   -------------------------------------------------------------------------- */
.rise { display: block; overflow: hidden; padding-block: 0.14em 0.22em; margin-block: -0.14em -0.22em; }
@supports (overflow: clip) { .rise { overflow: visible; overflow-y: clip; } }
.rise > span { display: block; }
/* main.js parte cada título en palabras con su propia máscara: las de una
   misma línea suben juntas y cada línea 80ms después de la anterior (--ln). */
.rise--w { display: inline-block; vertical-align: top; }
.rise--w > span { display: inline-block; }

@media screen and (prefers-reduced-motion: no-preference) {
  .reveal [data-reveal="rise"] .rise > span { transition: transform 0.9s var(--ease-out) calc(var(--d, 0s) + var(--ln, 0) * 0.08s); }
  .reveal [data-reveal="rise"]:not(.is-in) .rise > span { transform: translateY(calc(100% + 0.4em)); }

  .reveal [data-reveal="fade"],
  .reveal [data-reveal="card"] {
    transition: opacity 0.9s var(--ease-out) var(--d, 0s), transform 0.9s var(--ease-out) var(--d, 0s);
  }
  .reveal [data-reveal="fade"]:not(.is-in) { opacity: 0; transform: translateY(16px); }
  .reveal [data-reveal="card"]:not(.is-in) { opacity: 0; transform: translateY(40px); }

  .reveal [data-reveal="media"] { clip-path: inset(0 round var(--radius)); transition: clip-path 1.2s var(--ease-out) var(--d, 0s); }
  .reveal [data-reveal="media"]:not(.is-in) { clip-path: inset(6% 6% 6% 6% round var(--radius)); }
  .reveal .about__media[data-reveal] img { transition: transform 1.4s var(--ease-out) var(--d, 0s); }
  .reveal .about__media[data-reveal]:not(.is-in) img { transform: scale(1.08); }

  .reveal [data-reveal="row"]::before,
  .reveal [data-reveal="row"]::after { transition: transform 1.2s var(--ease-out) var(--d, 0s); }
  .reveal [data-reveal="row"]:not(.is-in)::before,
  .reveal [data-reveal="row"]:not(.is-in)::after { transform: scaleX(0); }
  .reveal [data-reveal="row"] > * {
    transition: opacity 0.9s var(--ease-out) calc(var(--d, 0s) + 0.12s), transform 0.9s var(--ease-out) calc(var(--d, 0s) + 0.12s);
  }
  .reveal [data-reveal="row"]:not(.is-in) > * { opacity: 0; transform: translateY(16px); }

  .reveal [data-reveal="list"]::before,
  .reveal [data-reveal="list"] li::after { transition: transform 1.2s var(--ease-out) calc(var(--d, 0s) + var(--k, 0) * 0.08s); }
  .reveal [data-reveal="list"]:not(.is-in)::before,
  .reveal [data-reveal="list"]:not(.is-in) li::after { transform: scaleX(0); }
  .reveal [data-reveal="list"] .contact__item {
    transition: opacity 0.9s var(--ease-out) calc(var(--d, 0s) + 0.12s + var(--k, 0) * 0.08s), transform 0.9s var(--ease-out) calc(var(--d, 0s) + 0.12s + var(--k, 0) * 0.08s);
  }
  .reveal [data-reveal="list"]:not(.is-in) .contact__item { opacity: 0; transform: translateY(12px); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav a { padding-inline: 0.55rem; font-size: 0.875rem; }
  .nav a::after { left: 0.55rem; right: 0.55rem; }
}

@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: grid; }

  .hero__stage { height: auto; min-height: 0; overflow: visible; padding-top: calc(var(--header-h) + 2.5rem); }
  .hero__inner { height: auto; display: block; padding-top: 0; }
  .hero__copy { width: auto; max-width: 38rem; }
  .hero__frame {
    position: relative; inset: auto;
    margin: 2.5rem var(--gutter) 0; aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }

  .section-head { grid-template-columns: 1fr; }
  .section-lead { max-width: 52ch; }

  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__media { position: relative; top: 0; aspect-ratio: 4 / 3; max-height: none; }
  .about__media img { object-position: 50% 35%; }
  .contact__info { position: static; }

  .products__viewport { min-height: 0; padding-block: var(--space-section); }
  .products__head { margin-bottom: var(--space-head); }
  .products__track { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-inline: var(--gutter); }
  .product { width: auto; }
  .products__progress { display: none; }

  .marquee { --mq-n: 3; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .brand img { height: 32px; }
  .hero__stage { padding-top: calc(var(--header-h) + 2rem); }
  .hero__frame { aspect-ratio: 4 / 5; margin-top: 2rem; }
  .hero__actions .btn { flex: 1 1 auto; }

  .about-row { grid-template-columns: 1fr; padding-block: 1.5rem; }
  .products__track { grid-template-columns: 1fr; gap: 0.75rem; }
  .product { flex-direction: row; }
  .product__media { flex: none; align-self: stretch; width: 36%; aspect-ratio: auto; }
  .product__media img { object-fit: contain; }
  .product__body { padding: 1rem 1rem 1.1rem; }
  .product h3 { font-size: 1rem; }
  .product p { font-size: 0.875rem; line-height: 1.55; }
  .imports__grid { grid-template-columns: 1fr; gap: 2rem; }
  .import-tile__media { aspect-ratio: 1; }
  .marquee { --mq-n: 2.2; --mq-gap: 1rem; }
  .logo-chip { height: calc(var(--chip-w) * 0.5); padding: 14px 18px; }
  .logo-chip img { width: calc(var(--chip-w) * 0.31 * sqrt(var(--ar, 3))); }

  .form__grid { grid-template-columns: 1fr; }
  .form__footer { flex-direction: column; align-items: stretch; }
  .form__footer .btn { width: 100%; }
  .form__privacy { max-width: none; }
  .form__panel-actions .btn { flex: 1 1 100%; }

  .site-footer__brand img { height: 32px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .hero__video, .import-tile video { display: none; }
  .hero__net .net-cue { display: none; }
}

/* --------------------------------------------------------------------------
   404: página de dirección inexistente (404.html)
   -------------------------------------------------------------------------- */
.notfound {
  min-height: 100svh;
  display: grid; align-content: center; justify-items: start; gap: 1.25rem;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
}