/* =====================================================================
   LEXIS · Home — estilos de referencia
   Tokens tomados de las variables del Figma "pagina-publica-lexis".
   Nombres en español para que coincidan 1:1 con el archivo de diseño.
   ===================================================================== */

:root {
  /* Color · texto */
  --texto-principal: #153542;
  --texto-secundario: #5c6970;
  --texto-inverso: #ffffff;
  --texto-inverso-secundario: #dde2e5;
  --texto-enlace: #157f8c;          /* turquesa/600 · 4,72:1 (AA) */
  --texto-enlace-hover: #0e4658;
  --texto-enlace-inverso: #dde2e5;
  --texto-sobre-acento: #ffffff;

  /* Color · fondos y bordes */
  --fondo-base: #ffffff;
  --fondo-alterno: #f2f0e9;
  --fondo-sutil: #fafaf7;
  --fondo-inverso: #153542;
  --fondo-acento-suave: #e8f5f7;
  --borde-sutil: #dde2e5;
  --borde-fuerte: #8a939a;
  --borde-inverso: #14607a;
  --acento-primario: #bf5917;
  --acento-primario-hover: #a64c12;
  --petroleo-900: #0a1f27;

  /* Radios */
  --radio-xs: 4px;
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 16px;
  --borde-grueso: 3px;            /* borde-grosor/grueso */
  --radio-xl: 24px;

  /* Elevación/2 */
  --elevacion-2: 0 1px 2px 0 rgba(21, 53, 66, 0.04), 0 4px 12px -2px rgba(21, 53, 66, 0.08);
  /* Elevación/3 */
  --elevacion-3: 0 2px 6px 0 rgba(21, 53, 66, 0.05), 0 12px 32px -4px rgba(21, 53, 66, 0.12);

  /* Tipografía */
  --fuente-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --fuente-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Layout */
  --ancho-max: 1440px;
  --margen: 80px;                  /* padding lateral de escritorio */
  --alto-cabecera: 80px;

  /* Motion (ver README · Motion) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-hover: 200ms;
  --dur-revelar: 700ms;
  --stagger: 70ms;
}

/* Cortes: escritorio > 1100 · intermedio 1025–1100 · tablet ≤ 1024 (Figma 768) · móvil ≤ 640 (Figma 390) */
@media (max-width: 1100px) { :root { --margen: 40px; } }
@media (max-width: 1023px) { :root { --margen: 32px; --alto-cabecera: 72px; } }
@media (max-width: 640px)  { :root { --margen: 16px; --alto-cabecera: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--texto-principal);
  background: var(--fondo-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--texto-enlace); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--fondo-base); color: var(--texto-principal);
  padding: 10px 16px; border-radius: var(--radio-sm);
}
.skip-link:focus { top: 16px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Estilos de texto (nombres = estilos de Figma) ---------- */
.etiqueta {            /* Etiqueta/Seccion */
  font-weight: 500; font-size: 13px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-secundario);
}
.etiqueta-pequena {    /* Etiqueta/Pequena */
  font-weight: 500; font-size: 12px; line-height: 16px;
  color: var(--texto-secundario);
}
.titulo-xl {           /* Titulo/XL */
  font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -0.015em;
}
.titulo-grande {       /* Titulo/Grande */
  font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.01em;
}
.display-pequeno {     /* Display/Pequeno */
  font-family: var(--fuente-serif); font-weight: 400;
  font-size: 36px; line-height: 42px; letter-spacing: -0.01em;
}
.cuerpo-grande  { font-size: 18px; line-height: 29px; }   /* Cuerpo/Grande */
.cuerpo-mediano { font-size: 16px; line-height: 26px; }   /* Cuerpo/Mediano */
.texto-secundario { color: var(--texto-secundario); }
.dato {                /* Dato/Grande */
  font-family: var(--fuente-mono); font-size: 14px; line-height: 22px;
  letter-spacing: 0.01em; color: var(--texto-secundario);
}
.legal { font-size: 12px; line-height: 18px; color: var(--texto-secundario); }  /* Utilidad/Legal */
/* Tablet/… y Movil/… de Figma: mismos estilos, otra escala */
@media (max-width: 1023px) {
  .titulo-xl       { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }  /* Tablet/Titulo/XL */
  .titulo-grande   { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }   /* Tablet/Titulo/Grande */
  .display-pequeno { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }   /* Tablet/Display/Pequeno */
}
@media (max-width: 640px) {
  .titulo-xl       { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }   /* Movil/Titulo/XL */
  .titulo-grande   { font-size: 21px; line-height: 27px; letter-spacing: -0.005em; }  /* Movil/Titulo/Grande */
  .display-pequeno { font-size: 26px; line-height: 32px; letter-spacing: -0.005em; }  /* Movil/Display/Pequeno */
  .cuerpo-grande   { font-size: 17px; line-height: 27px; }                            /* Movil/Cuerpo/Grande */
}

.enlace {              /* Enlace: subrayado permanente (no solo en hover) */
  font-weight: 500; font-size: 16px; line-height: 26px;
  color: var(--texto-enlace);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* ---------- Botón (Figma 38:77) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;                       /* Grande: 48px */
  padding: 14px 24px;
  border-radius: var(--radio-sm);
  font-weight: 500; font-size: 16px; line-height: 20px; white-space: nowrap;
  transition:
    background-color var(--dur-hover) ease,
    border-color var(--dur-hover) ease,
    color var(--dur-hover) ease,
    transform var(--dur-press) var(--ease-out);
}
.boton--pequeno { min-height: 44px; padding: 13px 18px; font-size: 14px; line-height: 18px; }  /* Pequeño: 44px */
.boton--primario { background: var(--acento-primario); color: var(--texto-sobre-acento); }
.boton--secundario { background: var(--fondo-base); color: var(--texto-principal); border: 1px solid var(--texto-principal); padding-block: 13px; }
.boton--fantasma { color: var(--texto-inverso); }
.boton:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background: var(--acento-primario-hover); }
  .boton--secundario:hover { background: var(--fondo-alterno); }
  .boton--fantasma:hover { background: rgba(255, 255, 255, 0.1); }
}

/* ---------- Chip · etiqueta (Figma 39:54) ---------- */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: var(--fondo-alterno);
  border-radius: var(--radio-xs);
  font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap;
  color: var(--texto-secundario);
}

/* =====================================================================
   CABECERA
   Escritorio (≥ 1024px): transparente sobre el hero (Figma 540:1267) y blanca (Figma 42:22)
   al hacer scroll o con un panel abierto. Tablet y móvil (< 1024px): siempre blanca.
   ===================================================================== */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--alto-cabecera);
  background: url("../assets/img/cabecera-fondo.png") center / 100% 100% no-repeat;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.cabecera.es-solida,
.cabecera.panel-abierto {
  background: var(--fondo-base);
  box-shadow: inset 0 -1px 0 var(--borde-sutil);
}
.cabecera.panel-abierto { box-shadow: none; }   /* cabecera y panel se leen como una sola superficie */
.cabecera__inner {
  height: 100%;
  max-width: var(--ancho-max); margin-inline: auto;
  padding-inline: var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cabecera__logo img { width: 94.1538px; height: 34px; }
.cabecera__logo-oscuro,
.cabecera.es-solida .cabecera__logo-claro,
.cabecera.panel-abierto .cabecera__logo-claro { display: none; }
.cabecera.es-solida .cabecera__logo-oscuro,
.cabecera.panel-abierto .cabecera__logo-oscuro { display: block; }

/* Navegación de escritorio */
.nav, .nav__lista, .nav__lista > li { height: 100%; }
.nav__lista { display: flex; align-items: stretch; gap: 28px; }
.nav__lista > li { display: flex; align-items: center; }
.nav__item {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 4px;
  font-weight: 500; font-size: 15px; line-height: 20px;   /* Interaccion/Navegacion */
  color: var(--texto-inverso);
  transition: color var(--dur-hover) ease, opacity var(--dur-hover) ease;
}
.cabecera.es-solida .nav__item,
.cabecera.panel-abierto .nav__item { color: var(--texto-principal); }
/* Con un panel abierto, los demás ítems se atenúan y el disparador activo queda al 100% */
.cabecera.panel-abierto .nav__item:not([aria-expanded="true"]) { opacity: 0.6; }
/* Hover y foco en terracota, como el resto de enlaces del sitio (sobre el hero, la cabecera blanca
   y con un panel abierto) */
.nav__item:focus-visible,
.cabecera.es-solida .nav__item:focus-visible,
.cabecera.panel-abierto .nav__item:focus-visible { opacity: 1; color: var(--acento-primario); }
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover,
  .cabecera.es-solida .nav__item:hover,
  .cabecera.panel-abierto .nav__item:hover { opacity: 1; color: var(--acento-primario); }
}
.nav__chevron { width: 8px; height: 4px; transition: transform 150ms var(--ease-out); }
.nav__disparador[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.cabecera__acciones { display: flex; align-items: center; gap: 12px; }
.cabecera.es-solida .boton--fantasma,
.cabecera.panel-abierto .boton--fantasma { color: var(--texto-principal); }
@media (hover: hover) and (pointer: fine) {
  .cabecera.es-solida .boton--fantasma:hover,
  .cabecera.panel-abierto .boton--fantasma:hover { background: var(--fondo-alterno); }
}

/* ---------- Paneles de escritorio (Servicios y Recursos) ----------
   Referencia de diseño: menú de apple.com. Blanco sólido, a todo el ancho, pegado a la cabecera
   (se leen como una sola superficie). El contenido se alinea al contenedor de 1280px.
   Despliegue: el panel se revela de arriba abajo con clip-path (260ms ease-out) y cada pieza
   entra con fundido + 4px, escalonada 25ms. Cierra en 160ms. Al pasar de un panel al otro no
   se vuelve a desplegar: solo cambia el contenido. */
.panel {
  position: absolute; z-index: 2; top: 100%; left: 0; right: 0;   /* contra .cabecera (fixed) */
  background: var(--fondo-base);
  border-bottom: 1px solid var(--borde-sutil);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 160ms ease-out, visibility 0s linear 160ms;
}
.panel.esta-abierto {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 260ms var(--ease-out), visibility 0s;
}
.panel.sin-despliegue { transition: none; }
.panel.sin-transicion, .panel.sin-transicion * { transition: none !important; }

.panel__inner {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: 36px var(--margen) 56px;
  display: flex; gap: 96px; align-items: flex-start;
}
.panel__col { display: flex; flex-direction: column; min-width: 0; }
.panel__col--principal { min-width: 300px; }
.panel__rotulo {                 /* rótulo de columna, pequeño y gris */
  margin-bottom: 14px;
  font-size: 13px; line-height: 16px; color: var(--texto-secundario);
}
.panel__lista-grande { display: flex; flex-direction: column; }
.panel__enlace-grande {          /* nombre de la línea en grande */
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.01em;   /* Titulo/Grande */
  color: var(--texto-principal);
  transition: color var(--dur-hover) ease;
}
.panel__destacado { max-width: 320px; padding-top: 0; }
.panel__destacado-titulo { font-weight: 600; font-size: 17px; line-height: 24px; }   /* Titulo/Pequeno */
.panel__destacado-texto { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--texto-secundario); }
.panel__destacado-enlace {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; align-self: flex-start;
  font-weight: 500; font-size: 14px; line-height: 22px; color: var(--texto-enlace);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--dur-hover) ease;
}
/* Hover y foco en terracota (acento/primario, 4,8:1 sobre blanco): se nota más que el petróleo */
.panel__enlace-grande:focus-visible,
.panel__destacado-enlace:focus-visible { color: var(--acento-primario); }
@media (hover: hover) and (pointer: fine) {
  .panel__enlace-grande:hover,
  .panel__destacado-enlace:hover { color: var(--acento-primario); }
}

/* Entrada escalonada de las piezas (--i lo asigna js/main.js) */
.panel__pieza {
  opacity: 0; transform: translateY(-4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.panel.esta-abierto .panel__pieza {
  opacity: 1; transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  transition-delay: calc(60ms + var(--i, 0) * 25ms);
}

/* Velo bajo el panel: atenúa la página para que el menú no compita con el video */
.velo {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(21, 53, 66, 0.24);
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease-out, visibility 0s linear 160ms;
}
.velo.esta-visible { opacity: 1; visibility: visible; transition: opacity 260ms var(--ease-out), visibility 0s; }

/* Ítem del menú móvil: un solo enlace con nombre y descripción, ≥ 44px */
.item-menu {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 44px; padding: 6px 0;
}
.item-menu__nombre {         /* Cuerpo/Mediano */
  font-weight: 500; font-size: 16px; line-height: 26px; color: var(--texto-principal);
  transition: color var(--dur-hover) ease;
}
.item-menu__desc { font-size: 14px; line-height: 22px; color: var(--texto-secundario); }   /* Cuerpo/Pequeno */
.item-menu:hover .item-menu__nombre,
.item-menu:focus-visible .item-menu__nombre { color: var(--texto-enlace-hover); }

/* ---------- Hamburguesa (Figma: 3 líneas de 24×2, separadas 5px; área táctil de 44px) ---------- */
.cabecera__menu {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.cabecera__menu span { width: 24px; height: 2px; background: var(--texto-principal); border-radius: 1px; }

/* ---------- Menú móvil y tablet (Figma 47:76): diálogo a pantalla completa ----------
   Abre con fundido + 12px, 200ms. Las acciones quedan fijas abajo; el contenido tiene scroll propio. */
.menu-movil {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--fondo-base);
  opacity: 0; transform: translateY(12px); visibility: hidden;
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s linear 160ms;
}
.menu-movil.esta-abierto {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}
.menu-movil__barra {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--alto-cabecera);
  padding: 10px 10px 10px var(--margen);
  border-bottom: 1px solid var(--borde-sutil);
}
.menu-movil__logo img { width: 77.5385px; height: 28px; }
.menu-movil__cerrar {
  min-height: 44px; padding: 12px 14px;
  font-weight: 500; font-size: 14px; line-height: 18px;   /* Interaccion/Boton-Pequeno */
  border-radius: var(--radio-sm);
}
.menu-movil__contenido {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.menu-movil__titulo {           /* Titulo/Pequeno */
  display: flex; align-items: center;
  min-height: 56px; padding: 16px var(--margen);
  font-weight: 600; font-size: 17px; line-height: 24px;
  border-bottom: 1px solid var(--borde-sutil);
}
.menu-movil__contenido .item-menu {
  min-height: 56px; padding: 16px var(--margen) 16px calc(var(--margen) + 16px);   /* sangría de 16px */
  gap: 2px;
  border-bottom: 1px solid var(--borde-sutil);
}
.menu-movil__contenido .item-menu__nombre { font-weight: 400; }   /* Cuerpo/Mediano en Figma */
.menu-movil__acciones {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px var(--margen) calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde-sutil);
  background: var(--fondo-base);
}
.menu-movil__acciones .boton { width: 100%; }
html.menu-movil-abierto, html.menu-movil-abierto body { overflow: hidden; }

/* Tablet y móvil (< 1024px · Figma 666:528 · 671:385): cabecera blanca y fija, el hero empieza
   debajo. El CTA se acorta a "Comprar"; la navegación pasa al menú de pantalla completa. */
@media (max-width: 1023px) {
  .cabecera, .cabecera.es-solida {
    background: var(--fondo-base);
    box-shadow: inset 0 -1px 0 var(--borde-sutil);
  }
  .cabecera__logo-claro { display: none; }
  .cabecera__logo-oscuro { display: block; }
  main { padding-top: var(--alto-cabecera); }
  .cabecera__logo img { width: 77.5385px; height: 28px; }
  .cabecera__acciones { gap: 6px; }
  .cabecera__cta-extra { display: none; }
  .cabecera__menu { display: inline-flex; }
  .cabecera__acciones .boton--fantasma,
  .nav, .velo { display: none; }
}
@media (min-width: 1024px) {
  .menu-movil { display: none; }
}

/* ---------- Aviso de la demo ---------- */
.aviso-demo {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  max-width: min(420px, calc(100vw - 2 * 80px));
  padding: 12px 18px;
  background: var(--fondo-inverso); color: var(--texto-inverso);
  border-radius: var(--radio-sm);
  font-size: 14px; line-height: 22px; text-align: center;
  box-shadow: var(--elevacion-3);
  opacity: 0; transform: translate(-50%, 8px); visibility: hidden; pointer-events: none;
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
}
.aviso-demo.esta-visible {
  opacity: 1; transform: translate(-50%, 0); visibility: visible;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}

/* =====================================================================
   HERO · video de fondo
   ===================================================================== */
.hero {
  position: relative;
  height: clamp(600px, 100svh, 840px);       /* Figma: 840px a 1440 */
  display: flex; flex-direction: column;
  color: var(--texto-inverso);
  overflow: hidden;
  background: var(--petroleo-900);
}
.hero__media { position: absolute; inset: 0; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 40%;
}
.hero__degradado {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14, 70, 88, 0) 51.19%, var(--petroleo-900) 100%);
}
.hero__contenido {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  width: 100%; max-width: var(--ancho-max); margin-inline: auto;
  padding: calc(var(--alto-cabecera) + 40px) var(--margen) 40px;
}
.hero__titular { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.hero__titulo {
  width: min(880px, 100%);
  font-family: var(--fuente-serif); font-weight: 400;
  font-size: 60px; line-height: 84px; letter-spacing: -0.025em;
}
.hero__titulo .linea { display: block; }
.hero__fila { display: flex; align-items: flex-start; gap: 16px; max-width: 100%; }
.hero__bajada {
  width: min(512px, 100%);
  font-size: 18px; line-height: 29px; text-align: center;
  color: var(--texto-inverso-secundario);
}

/* Entrada del titular: CSS animation (corre fuera del hilo principal mientras carga el video) */
@keyframes hero-entrada {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .linea {
  animation: hero-entrada 900ms var(--ease-out) both;
  animation-delay: calc(250ms + var(--i, 0) * 90ms);
}

/* Tablet (Figma 666:219): 720px bajo la cabecera, todo alineado a la izquierda.
   El titular entra como un solo bloque para que el texto corte de forma natural. */
@media (max-width: 1023px) {
  .hero { height: clamp(560px, calc(100svh - var(--alto-cabecera)), 720px); }
  .hero__contenido { padding: 40px var(--margen) 56px; align-items: stretch; }
  .hero__titular { align-items: stretch; gap: 24px; }
  .hero__titulo { width: 100%; font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }  /* Tablet/Display/Grande */
  .hero__titulo .linea { display: inline; animation: none; }
  .hero__titulo { animation: hero-entrada 900ms var(--ease-out) 250ms both; }
  .hero__fila { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__bajada { width: 100%; text-align: left; }
  .hero__degradado {
    background:
      linear-gradient(180deg, rgba(10, 31, 39, 0) 38%, rgba(10, 31, 39, 0.5) 68%, rgba(10, 31, 39, 0.88) 100%),
      linear-gradient(180deg, rgba(14, 70, 88, 0) 51.19%, var(--petroleo-900) 100%);
  }
}
/* Móvil (Figma 671:386): 640px, botón a todo el ancho */
@media (max-width: 640px) {
  .hero { height: clamp(520px, calc(100svh - var(--alto-cabecera)), 640px); }
  .hero__contenido { padding-block: 40px; }
  .hero__titulo { font-size: 36px; line-height: 40px; letter-spacing: -0.015em; }  /* Movil/Display/Grande */
  .hero__fila { gap: 20px; }
  .hero__bajada { font-size: 17px; line-height: 27px; }
  .hero__fila .boton { width: 100%; }
}

/* =====================================================================
   ALIADOS · marquesina de logos
   ===================================================================== */
.aliados { padding-block: 32px; background: var(--fondo-base); }
.aliados__texto { display: flex; flex-direction: column; gap: 8px; max-width: 859px; }
.marquesina {
  margin-top: 16px;
  overflow: hidden;
  max-width: var(--ancho-max); margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--margen), #000 calc(100% - var(--margen)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--margen), #000 calc(100% - var(--margen)), transparent);
}
.marquesina__pistas { display: flex; width: max-content; animation: marquesina 60s linear infinite; }
.marquesina__pista {
  display: flex; align-items: center; gap: 80px;
  padding-inline: 40px;                    /* mitad del gap: el bucle no salta */
  height: 98px; flex-shrink: 0;
}
.marquesina__pista img { object-fit: contain; max-width: none; }
@keyframes marquesina {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (hover: hover) and (pointer: fine) {
  .marquesina:hover .marquesina__pistas { animation-play-state: paused; }
}
/* Separación entre logos: 80 escritorio · 64 tablet · 40 móvil (Figma) */
@media (max-width: 1023px) { .marquesina__pista { gap: 64px; padding-inline: 32px; } }
@media (max-width: 640px)  { .marquesina__pista { gap: 40px; padding-inline: 20px; } }

/* =====================================================================
   SECCIONES GENÉRICAS
   ===================================================================== */
.seccion { padding-block: 128px; }
.seccion--alterno { background: var(--fondo-alterno); }
.seccion--sutil { background: var(--fondo-sutil); }
.enunciado { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.enunciado--700 { max-width: 700px; }
.enunciado--854 { max-width: 854px; gap: 18px; }
@media (max-width: 1023px) { .seccion { padding-block: 96px; } }
@media (max-width: 640px)  { .seccion { padding-block: 56px; } }

/* ---------- Trazabilidad ---------- */
.trazabilidad__fila { display: flex; gap: 60px; margin-top: 72px; align-items: stretch; }
.anotaciones {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 40px;
}
.anotacion {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 20px; border-top: 1px solid var(--borde-fuerte);
}
.anotacion p { font-size: 16px; line-height: 26px; }
.artefacto {
  flex: 1; min-width: 0;
  /* Figma: marco de 920×574. El video de demo es 1280×798: la misma proporción */
  aspect-ratio: 1280 / 798;
  align-self: center;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-lg);
  box-shadow: var(--elevacion-2);
  overflow: hidden;
  background: #fafafa;
}
.artefacto__video { display: block; width: 100%; height: 100%; object-fit: cover; }

.capacidades { margin-top: 72px; padding-top: 16px; display: flex; flex-direction: column; gap: 20px; }
.capacidades__fila { display: grid; grid-template-columns: repeat(5, minmax(0, 236px)); gap: 24px; }
.capacidades__fila li {
  padding-top: 16px; border-top: 1px solid var(--texto-principal);
  font-weight: 500; font-size: 16px; line-height: 26px;
}

/* Tablet (Figma 666:244): anotaciones en fila ENCIMA del video, línea continua; capacidades en 3 columnas */
@media (max-width: 1100px) {
  .trazabilidad__fila { flex-direction: column; gap: 40px; }
  .anotaciones { width: 100%; flex-direction: row; gap: 0; padding: 0 0 40px; }
  .anotacion { flex: 1; min-width: 0; padding-right: 16px; }
  .capacidades__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
}
/* Móvil (Figma 671:410): anotaciones apiladas; el video se recorta en vertical (358×481) centrado en el chat y los archivos */
@media (max-width: 640px) {
  .anotaciones { flex-direction: column; }
  .anotacion { padding-right: 0; }
  .artefacto { aspect-ratio: 358 / 481; }
  .capacidades__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

/* ---------- Métricas ---------- */
.seccion-metricas { padding-block: 80px; background: var(--fondo-base); }
.metricas {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 360px) minmax(0, 320px);
  gap: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--texto-principal);
}
.metrica { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; text-align: center; padding-top: 40px; }
.metrica__cifra {          /* Display/XL */
  font-family: var(--fuente-serif); font-weight: 400;
  font-size: 80px; line-height: 84px; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.metrica__rotulo { font-size: 16px; line-height: 26px; color: var(--texto-secundario); }
/* Tablet (Figma 666:274): 3 columnas iguales, cifras a 48px */
@media (max-width: 1023px) {
  .seccion-metricas { padding-block: 64px; }
  .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .metrica { padding-top: 0; }
  .metrica__cifra { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }  /* Tablet/Display/Grande */
}
/* Móvil (Figma 671:440): apiladas y alineadas a la izquierda, sin separadores entre cifras */
@media (max-width: 640px) {
  .seccion-metricas { padding-block: 40px; }
  .metricas { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .metrica { align-items: flex-start; text-align: left; gap: 8px; }
  .metrica__cifra { font-size: 36px; line-height: 40px; letter-spacing: -0.015em; }  /* Movil/Display/Grande */
}

/* ---------- Cinco líneas de negocio ---------- */
.lineas__lista { margin-top: 40px; padding-top: 24px; }
.lineas__lista li + li .linea-negocio { border-top: 1px solid var(--borde-sutil); }
.lineas__lista li:last-child .linea-negocio { border-bottom: 1px solid var(--borde-sutil); }
.linea-negocio { display: flex; align-items: center; gap: 32px; padding-block: 28px; }
.linea-negocio .dato { width: 40px; flex-shrink: 0; }
.linea-negocio__nombre {
  width: 300px; flex-shrink: 0;
  font-weight: 600; font-size: 26px; line-height: 32px; letter-spacing: -0.01em;
  transition: color var(--dur-hover) ease;
}
.linea-negocio__desc { flex: 1; min-width: 0; color: var(--texto-secundario); transition: color var(--dur-hover) ease; }
.linea-negocio__flecha {
  font-size: 18px; line-height: 29px;
  transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) ease;
}
/* Hover y foco: nombre y flecha en terracota (mismo tratamiento que el menú desplegado) */
.linea-negocio:focus-visible .linea-negocio__nombre,
.linea-negocio:focus-visible .linea-negocio__flecha { color: var(--acento-primario); }
@media (hover: hover) and (pointer: fine) {
  .linea-negocio:hover .linea-negocio__nombre,
  .linea-negocio:hover .linea-negocio__flecha { color: var(--acento-primario); }
  .linea-negocio:hover .linea-negocio__desc { color: var(--texto-principal); }
  .linea-negocio:hover .linea-negocio__flecha { transform: translateX(4px); }
}
/* Tablet (Figma 666:290): misma fila, nombre de 230px a 24px */
@media (max-width: 1023px) {
  .linea-negocio { gap: 20px; }
  .linea-negocio__nombre { width: 230px; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }  /* Tablet/Titulo/Grande */
}
/* Móvil (Figma 671:456): número | nombre + descripción apilados | flecha arriba a la derecha */
@media (max-width: 640px) {
  .linea-negocio {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 16px; row-gap: 4px; align-items: start;
  }
  .linea-negocio .dato { width: auto; grid-row: 1 / span 2; }
  .linea-negocio__nombre { width: auto; grid-column: 2; font-size: 21px; line-height: 27px; letter-spacing: -0.005em; }  /* Movil/Titulo/Grande */
  .linea-negocio__desc { grid-column: 2; grid-row: 2; }
  .linea-negocio__flecha { grid-column: 3; grid-row: 1; font-size: 17px; line-height: 27px; }
}

/* ---------- Garantías ---------- */
.seccion.garantias { padding-block: 112px; }
.garantias__grid { display: flex; gap: 80px; align-items: flex-start; }
.garantias__encabezado { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }
.garantias__lista { flex: 1; min-width: 0; }
.garantia {
  display: flex; align-items: center; gap: 32px;
  padding-block: 24px;
  border-top: 1px solid var(--borde-fuerte);
}
.garantia:last-child { border-bottom: 1px solid var(--borde-fuerte); }
.garantia dt {             /* Cifra/Mediana */
  width: 170px; flex-shrink: 0;
  font-weight: 600; font-size: 36px; line-height: 38px; letter-spacing: -0.015em;
}
.garantia dd { flex: 1; color: var(--texto-secundario); }
@media (max-width: 1100px) {
  .garantias__grid { flex-direction: column; gap: 40px; }
  .garantias__encabezado { width: auto; max-width: none; }
}
/* Tablet (Figma 666:315): encabezado arriba, filas valor | descripción */
@media (max-width: 1023px) {
  .seccion.garantias { padding-block: 96px; }
  .garantia dt { font-size: 32px; line-height: 34px; }  /* Tablet/Cifra/Mediana */
}
/* Móvil (Figma 671:486): valor encima de la descripción */
@media (max-width: 640px) {
  .seccion.garantias { padding-block: 56px; }
  .garantia { flex-direction: column; align-items: flex-start; gap: 6px; }
  .garantia dt { width: auto; font-size: 28px; line-height: 30px; letter-spacing: -0.01em; }  /* Movil/Cifra/Mediana */
}

/* ---------- Testimonios ---------- */
.testimonios { background: var(--fondo-base); }
.testimonios__grid {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: 40px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.testimonios__portada {
  grid-column: span 2;
  align-self: stretch;
  display: flex; flex-direction: column; gap: 40px;
  padding: 80px;
  background: var(--fondo-alterno);
}
.testimonios__portada-img { flex: 1; min-height: 290px; position: relative; overflow: hidden; }
.testimonios__portada-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.testimonio { display: flex; flex-direction: column; gap: 43px; }
/* El carrusel solo existe como caja en móvil */
.testimonios__carrusel { display: contents; }
/* Todas las tarjetas se alinean arriba (la grilla usa align-items: start), así las fotos de
   la fila 1 empiezan a la altura de la portada aunque las citas tengan distinto largo */
.testimonio__media {
  position: relative; height: 267px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px;
}
.testimonio__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.testimonio__media .chip { position: relative; }
.cita {                    /* Cita/Mediana */
  font-family: var(--fuente-serif); font-weight: 400;
  font-size: 20px; line-height: 30px; letter-spacing: -0.005em;
}
.testimonio figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: -23px; /* gap interno de 20px del bloque de cita */ }
.testimonio__nombre { font-weight: 500; font-size: 16px; line-height: 26px; }
.testimonio__cargo { font-size: 14px; line-height: 22px; color: var(--texto-secundario); }
@media (hover: hover) and (pointer: fine) {
  .testimonio:hover .testimonio__media img { transform: scale(1.03); }
}
/* Tablet (Figma 666:329): portada a todo el ancho y testimonios en 2 columnas */
@media (max-width: 1100px) {
  .testimonios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px var(--margen); gap: 40px 24px; }
  .testimonios__portada { padding: 48px 40px; gap: 28px; }
  .testimonios__portada-img { flex: none; height: 300px; min-height: 0; }
}
/* Móvil (Figma 671:495): portada arriba y carrusel horizontal de tarjetas de 280px */
@media (max-width: 640px) {
  .testimonios__grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .testimonios__portada { padding: 32px 24px; gap: 20px; }
  .testimonios__portada-img { height: 190px; }
  .testimonios__carrusel { display: flex; }
}

/* Carrusel horizontal (testimonios y noticias en móvil): scroll nativo con snap,
   sangra hasta el borde de la pantalla para insinuar que hay más tarjetas */
@media (max-width: 640px) {
  .carrusel {
    display: flex; gap: 16px; align-items: flex-start; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
    margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen);
    scrollbar-width: none;
  }
  .carrusel::-webkit-scrollbar { display: none; }
  .carrusel > * { flex: 0 0 280px; scroll-snap-align: start; }
  .carrusel:focus-visible { outline-offset: -2px; }
}

/* ---------- Noticias ---------- */
.noticias__encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.noticias__todas { min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0; }
.noticias__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.noticia { display: flex; flex-direction: column; gap: 18px; }
.noticia__media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: flex; justify-content: flex-end; align-items: flex-start; padding: 10px;
}
.noticia__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.noticia__media .chip { position: relative; }
.noticia__titulo {         /* Titulo/Pequeno */
  font-weight: 600; font-size: 17px; line-height: 24px; color: var(--texto-secundario);
}
.noticia__titulo a { transition: color var(--dur-hover) ease; }
.noticia__resumen {
  color: var(--texto-secundario);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0;
}
.noticia__seguir {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -10px;
  font-size: 14px; line-height: 22px; color: var(--texto-enlace);
  transition: color var(--dur-hover) ease;
}
.noticia__seguir span { transition: transform var(--dur-hover) var(--ease-out); }
/* Hover y foco en terracota, como el menú y las líneas de negocio */
.noticia__seguir:focus-visible { color: var(--acento-primario); }
@media (hover: hover) and (pointer: fine) {
  .noticia:hover .noticia__media img { transform: scale(1.03); }
  .noticia__titulo a:hover { color: var(--texto-principal); }
  .noticia__seguir:hover { color: var(--acento-primario); }
  .noticia__seguir:hover span { transform: translateX(3px); }
}
/* Tablet (Figma 666:342): enlace debajo del título; las 3 noticias siguen en fila */
@media (max-width: 1023px) {
  .noticias__encabezado { flex-direction: column; align-items: flex-start; gap: 0; }
  .noticias__grid { gap: 16px; }
}
/* Móvil (Figma 671:506): carrusel (ver .carrusel); aquí solo se anula el grid */
@media (max-width: 640px) { .noticias__grid { display: flex; } }

/* ---------- Cierre ---------- */
.cierre__bloque {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 80px;
  background: var(--fondo-alterno);
  border-radius: var(--radio-xl);
  text-align: center;
}
.cierre__bajada { max-width: 620px; }
.cierre__bajada strong { font-weight: 500; }
.cierre__acciones { display: flex; gap: 12px; padding-top: 8px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 1023px) { .cierre__bloque { padding: 64px 48px; } }   /* Figma 666:355 */
/* Móvil (Figma 673:632): botones apilados a todo el ancho; la bajada se mantiene en 18px */
@media (max-width: 640px) {
  .cierre__bloque { padding: 48px 24px; gap: 16px; }
  .cierre__bajada { font-size: 18px; line-height: 29px; }
  .cierre__acciones { flex-direction: column; align-self: stretch; }
}

/* ---------- Pie ---------- */
.pie { background: var(--fondo-inverso); color: var(--texto-inverso-secundario); padding: 80px 0 32px; }
.pie__superior { display: flex; gap: 64px; }
.pie__marca { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.pie__marca img { width: 110.769px; height: 40px; }
.pie__texto { font-size: 14px; line-height: 22px; }
.pie__whatsapp { font-weight: 500; font-size: 16px; line-height: 26px; color: var(--texto-inverso); }
.pie__ciudades { font-family: var(--fuente-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.01em; }
.pie__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pie__titulo { font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.pie__col ul { display: flex; flex-direction: column; gap: 14px; }
.pie__col a, .pie__redes a { color: var(--texto-enlace-inverso); font-size: 14px; line-height: 22px; transition: color var(--dur-hover) ease; }
@media (min-width: 1101px) { .pie__col a { white-space: nowrap; } }
.pie__separador { height: 1px; background: var(--borde-inverso); margin-block: 48px; }
.pie__inferior { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 18px; }
.pie__redes { display: flex; gap: 20px; }
.pie__redes a { font-size: 12px; line-height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .pie__col a:hover, .pie__redes a:hover, .pie__whatsapp:hover { color: var(--texto-inverso); text-decoration: underline; text-underline-offset: 3px; }
}
.pie__acordeon, .pie__solo-movil { display: none; }

/* Tablet (Figma 670:561): marca arriba y las cuatro columnas juntas en una fila */
@media (max-width: 1100px) {
  .pie__superior { flex-wrap: wrap; gap: 40px 24px; }
  .pie__marca { width: 100%; }
  .pie__col { flex: 1 1 0; }
  .pie__inferior { flex-wrap: wrap; row-gap: 12px; }
}

/* Móvil (Figma 49:174): acordeones cerrados por defecto. Lo que NO se pliega: WhatsApp,
   ciudades, redes y copyright quedan siempre visibles debajo. */
@media (max-width: 640px) {
  .pie { padding: 40px 0 28px; }
  .pie__superior { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .pie__marca { display: contents; }
  .pie__marca img { width: 88.615px; height: 32px; }
  .pie__texto { margin: 12px 0 28px; }
  .pie__no-movil { display: none; }
  .pie__solo-movil { display: inline; }

  .pie__col { order: 1; flex: none; gap: 0; border-top: 1px solid var(--borde-inverso); }
  .pie__col .pie__titulo { display: none; }
  .pie__acordeon {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 58px; padding-block: 17px;     /* cabecera de 58px (Figma) */
    font-weight: 600; font-size: 17px; line-height: 24px; color: var(--texto-inverso); text-align: left;
  }
  .pie__acordeon img { width: 12.5px; height: 7.86px; transition: transform 200ms var(--ease-out); }
  .pie__acordeon[aria-expanded="true"] img { transform: rotate(180deg); }
  .pie__col ul { padding-bottom: 20px; }
  .js .pie__col:not(.esta-abierto) ul { display: none; }

  .pie__whatsapp { order: 2; padding-top: 28px; border-top: 1px solid var(--borde-inverso); }
  .pie__ciudades { order: 3; margin-top: 16px; }
  .pie__separador { display: none; }
  .pie__inferior { flex-direction: column-reverse; align-items: flex-start; gap: 16px; margin-top: 16px; }
  .pie__redes { flex-wrap: wrap; gap: 10px 20px; }
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed; right: 23px; bottom: 24px; z-index: 40;
  width: 48px; height: 48px; display: grid; place-items: center;   /* objetivo táctil ≥ 44px */
  border-radius: 10px;
  filter: drop-shadow(0 4px 10px rgba(10, 31, 39, 0.25));
  transition: transform var(--dur-hover) var(--ease-out);
}
.whatsapp-flotante img { width: 40px; height: 40px; }
.whatsapp-flotante:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .whatsapp-flotante:hover { transform: translateY(-2px); }
}

/* =====================================================================
   MOTION · revelado al hacer scroll
   Solo se oculta si hay JS (clase .js en <html>), así nunca queda contenido invisible.
   ===================================================================== */
.js .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease-out),
    transform var(--dur-revelar) var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.js .revelar.es-visible { opacity: 1; transform: none; }
.js .artefacto.revelar { transform: translateY(24px) scale(0.985); }
.js .artefacto.revelar.es-visible { transform: none; }

/* =====================================================================
   REDUCED MOTION · menos y más suave, no cero
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .linea { animation: hero-fade 300ms ease both; animation-delay: 0ms; }
  .hero__titulo { animation-name: hero-fade; }   /* tablet/móvil: el titular entra como bloque */
  .carrusel { scroll-behavior: auto; }
  /* Menús: sin animación (menu-navegacion.md · 2.2 y 3.3) */
  .panel, .panel.esta-abierto, .panel__pieza, .panel.esta-abierto .panel__pieza,
  .velo, .velo.esta-visible, .menu-movil, .menu-movil.esta-abierto,
  .nav__chevron, .item-menu__nombre { transition: none; }
  .menu-movil { transform: none; }
  .panel__pieza { transform: none; }
  .aviso-demo, .aviso-demo.esta-visible { transition: opacity 150ms ease, visibility 0s; transform: translate(-50%, 0); }
  .js .revelar, .js .artefacto.revelar { transform: none; transition: opacity 250ms ease; transition-delay: 0ms; }
  .marquesina__pistas { animation: none; }
  .marquesina { overflow-x: auto; }
  .testimonio__media img, .noticia__media img { transition: none; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }