/* ==========================================================================
   Galindo Gutiérrez · «La carga en movimiento» · tokens-base.css
   Tokens, base y piezas compartidas por todos los actos. Va siempre primero.

   Orden de carga (lo fija index.html; no se usa @import para no encadenar descargas):
     1. tokens-base.css   2. cabecera-hero.css   3. empaque.css   4. viaje.css
     5. comercial.css     6. cotizacion.css      7. preguntas-pie.css

   Dos modos de composición en todos los módulos:
     · Por defecto → relato estático en bloques consecutivos (sin JS o con movimiento reducido).
     · html.motion → escenas fijadas y estados animables. La clase solo la pone JavaScript.
   ========================================================================== */

/* 1. Tokens ----------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fuentes/Archivo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo SemiCondensed";
  src: url("../assets/fuentes/ArchivoSemiCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Respaldos con métrica ajustada: el cambio de fuente no mueve el layout. */
@font-face {
  font-family: "Archivo Respaldo";
  src: local("Arial");
  size-adjust: 99%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo SemiCondensed Respaldo";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700;
  size-adjust: 90%;
  ascent-override: 97%;
  descent-override: 23%;
  line-gap-override: 0%;
}

:root {
  /* Paleta exacta del encargo */
  --marino: #0B2D52;
  --profundo: #071E37;
  --acero: #3B6B8E;
  --naranja: #F36F21;
  --hielo: #EFF6FB;
  --blanco: #FFFFFF;

  /* Tintes derivados de la paleta (acero sobre blanco/hielo); no son colores nuevos de marca */
  --acero-claro: #B9CFDF;
  --carton-tapa: #FFFFFF;
  --carton-izq: #F6FAFD;
  --carton-der: #D6E3EC;
  --carton-dentro: #C2D3E0;
  --carton-fondo: #ABC1D2;

  /* Retícula: un riel a la izquierda (por donde corre el hilo) y el texto un paso adentro */
  --margen: clamp(1.25rem, 5vw, 4.5rem);
  --sangria: clamp(1rem, 2.2vw, 2rem);
  --riel-x: var(--margen);
  --texto-x: calc(var(--margen) + var(--sangria));
  --cabecera-h: 3.75rem;
  --hilo: 2px;

  --titular: "Archivo SemiCondensed", "Archivo SemiCondensed Respaldo", "Arial Narrow", Arial, sans-serif;
  --texto: "Archivo", "Archivo Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Curvas: salida ≈ power3.out · estado ≈ power2.inOut */
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
  --estado: cubic-bezier(0.45, 0, 0.55, 1);
  --micro: 200ms;

  /* Recorridos de las escenas fijadas */
  --empaque-recorrido: max(1150px, 130vh);
  --viaje-recorrido: 190vh;
  --barra-h: 31vh;
  --parada-0: 2.1rem;
  --parada-paso: 2.1rem;
  --frase-x: 5.75rem;
  --frase-y: 1.3rem;

  --foco: var(--blanco);
}

@supports (height: 1lvh) {
  :root {
    --barra-h: 31lvh;
  }
}

@media (min-width: 48em) {
  :root {
    --cabecera-h: 4.5rem;
  }
}

@media (min-width: 60em) {
  :root {
    --empaque-recorrido: clamp(1300px, 190vh, 1800px);
    --viaje-recorrido: 260vh;
    --barra-h: clamp(8.75rem, 21vh, 12rem);
    --parada-0: 2.25rem;
    --parada-paso: 2rem;
    --frase-x: 9.5rem;
    --frase-y: 1.5rem;
  }
}

/* 2. Base ------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--profundo);
  color: var(--blanco);
  font: 400 1.0625rem/1.5 var(--texto);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 4px;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite {
  position: absolute;
}

.salto {
  position: absolute;
  z-index: 60;
  left: var(--margen);
  top: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--blanco);
  color: var(--profundo);
  font: 700 1rem var(--titular);
  transform: translateY(-200%);
}
.salto:focus {
  transform: none;
}

.centinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 3rem;
  pointer-events: none;
}

/* Revelado por línea: la máscara es el bloque; lo que se mueve es el interior. */
.linea,
.hero__linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.linea > span,
.hero__linea > span {
  display: block;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0 1.5rem 0 1.25rem;
  border-radius: 2px;
  background: var(--naranja);
  color: var(--profundo);
  font: 700 1.1875rem/1 var(--titular);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--micro) var(--estado), transform 160ms var(--salida);
}
.boton svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}
.boton:hover {
  background: var(--blanco);
}
.boton:active {
  transform: translateY(1px);
}
.boton--grande {
  min-height: 4rem;
}
@media (min-width: 24em) {
  .boton--grande {
    padding: 0 1.9rem 0 1.5rem;
    font-size: 1.375rem;
  }
}

.telefono {
  color: inherit;
  font: 700 1.1875rem/1.2 var(--titular);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--naranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--micro) var(--estado);
}
.telefono:hover {
  text-decoration-color: currentColor;
}

/* 3. Hilo naranja (base) ---------------------------------------------------
   Cada tramo es un <span> (se recoge desde su final) con un <i> dentro (se dibuja desde su inicio).
   Así dibujar y recoger usan transformaciones independientes y nunca compiten.
   La geometría de cada tramo vive en el módulo de su acto. */

.hilo {
  display: none;
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.motion .hilo {
  display: block;
}
.hilo > span {
  position: absolute;
  display: block;
}
.hilo > span > i {
  position: absolute;
  inset: 0;
  background: var(--naranja);
}