/* ══════════════════════════════════════════════════════════════
   EXPEDICIÓN VERNE — cimientos compartidos
   ──────────────────────────────────────────────────────────────
   Este fichero es la FUENTE ÚNICA DE VERDAD de la identidad: la
   fuente, los design tokens y el reset. Lo cargan las dos páginas
   del sitio —`index.html` (bitácora) y `formulario.html` (la
   primera anotación)— y siempre ANTES de su hoja propia.

   Vivía dentro de `styles.css`, que es la hoja del scroll-telling
   y pesa 6.000 líneas. Al nacer el formulario había dos salidas
   malas: cargarle esas 6.000 líneas enteras para aprovechar cuatro
   variables, o copiarle los tokens y tener la identidad escrita
   dos veces. Se extrajo el bloque en vez de elegir entre las dos.

   ⚠️ Al tocar este fichero hay que subir el cache-buster en LAS DOS
   páginas (`css/base.css?v=…`), no solo en la que se esté mirando.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ── Design tokens · fuente única de verdad ─────────────────────
   Antes había dos :root en conflicto (base + capa "premium");
   este bloque consolida los valores que realmente ganaban en
   cascada y añade las escalas de espaciado, tipo, sombra y motion
   que consume todo el sistema. Cero valores mágicos aguas abajo. */
:root {
  /* ── Identidad Aludium (definitiva) ── */
  --marino: #0F2340;        /* principal: fondos, titulares, textos */
  --marino-claro: #16304f;  /* centro de los radiales nocturnos */
  --marino-hondo: #060f1f;  /* borde del viñeteado */
  --ambar: #E8A020;         /* acento: agujas, trayectorias, dirección */
  --blanco: #F5F4EF;        /* contraste y versiones negativas */

  /* ── Superficie clara (secciones de día): limpia, sin marfil ── */
  --papel: #faf9f4;
  --papel-2: #f0eee6;
  --papel-3: #e3e0d4;
  --tinta: #0f2340;         /* la tinta ES el marino: una sola verdad */
  --tinta-suave: #46566c;
  --azul: #245e8a;
  --azul-claro: #7fb2d9;
  --oro: #c68b27;
  --oro-tinta: #8a5f13;     /* oro legible como texto pequeño sobre papel (4.8:1) */
  /* Oro SOLO para texto grande (≥24px bold): 3.7:1 sobre papel, que es
     lo que exige WCAG a ese tamaño. El --oro-tinta, calculado para
     cuerpo pequeño, a escala de titular no lee dorado sino marrón. */
  --oro-grande: #b8791a;
  --sepia: #6f6049;        /* oscurecido para AA 4.5:1 sobre papel */
  --noche: #071428;
  --luz: #f5f4ef;

  /* ── Rampa de texto sobre marino (jerarquía por opacidad) ── */
  --texto-noche-1: var(--blanco);
  --texto-noche-2: rgba(245, 244, 239, 0.78);
  --texto-noche-3: rgba(245, 244, 239, 0.62);

  /* ── Bordes hairline ── */
  --fino: 1px solid rgba(15, 35, 64, 0.16);
  --borde-noche: 1px solid rgba(245, 244, 239, 0.16);
  --borde-noche-sutil: 1px solid rgba(245, 244, 239, 0.1);

  /* ── Espaciado · base 4px ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --seccion-y: clamp(6rem, 12vh, 9rem);   /* respiración vertical de sección */
  --seccion-x: clamp(1.4rem, 6vw, 6rem);  /* margen lateral de sección */
  --seccion-y-amplia: clamp(7rem, 15vh, 12rem);  /* la isla de luz respira más */
  --bloque-y: clamp(3rem, 8vh, 6rem);     /* cabecera → contenido de sección */

  /* ── Tipografía · escala de titulares ──────────────────────────
     Antes cada sección inventaba su tamaño (La Ruta 40.8px, El Kit
     36.3px, El Descubrimiento 54.4px a 1512): tres pesos distintos
     para el mismo nivel jerárquico, que es exactamente lo que hace
     que una web «no parezca profesional». Un solo escalón por nivel. */
  --fs-h2: clamp(1.8rem, 3vw, 2.8rem);        /* titular de sección */
  --fs-sub: clamp(0.95rem, 1.15vw, 1.1rem);   /* subtítulo de sección */
  --fs-display: clamp(2.6rem, 5.6vw, 5.4rem); /* claim de cierre, único */

  /* ── Tipografía · etiquetas y tracking ── */
  --fs-micro: 0.6rem;   /* suelo absoluto de legibilidad (~10px) */
  --fs-label: 0.68rem;  /* etiquetas de navegación y kickers */
  --track-1: 0.08em;    /* datos y cifras */
  --track-2: 0.2em;     /* etiquetas uppercase */
  --track-3: 0.3em;     /* señalética expandida */

  /* ── Radius · dos posturas, ninguna intermedia ── */
  --radio-vivo: 0;      /* cartografía: esquina viva */
  --radio-pill: 999px;  /* señalética: cápsula completa */
  --radio-card: 1rem;   /* superficies de producto (tarjetas) */

  /* ── Sombras · contacto + ambiente (multicapa) ── */
  --sombra-1: 0 1px 2px rgba(6, 15, 31, 0.1), 0 4px 12px -4px rgba(6, 15, 31, 0.12);
  --sombra-2: 0 2px 4px rgba(6, 15, 31, 0.12), 0 12px 32px -12px rgba(6, 15, 31, 0.28);
  --sombra-3: 0 4px 8px rgba(6, 15, 31, 0.14), 0 24px 64px -16px rgba(6, 15, 31, 0.42);

  /* ── Motion · 3 duraciones, 3 easings con intención ── */
  --dur-1: 0.15s;  /* respuesta táctil */
  --dur-2: 0.3s;   /* hover, foco */
  --dur-3: 0.5s;   /* revelados, fills */
  --dur-4: 0.8s;   /* mutaciones de superficie */
  --ease-estandar: cubic-bezier(0.4, 0, 0.2, 1);   /* fades y color */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);  /* salidas expresivas */
  --ease-cine: cubic-bezier(0.65, 0, 0.35, 1);     /* entra-sale simétrico */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--marino); color: var(--blanco); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

button, a { -webkit-tap-highlight-color: transparent; }

/* El anillo de foco por defecto es ámbar, que es lo que marca sobre
   marino. Sobre papel el ámbar no llega (1.9:1) y cada superficie
   clara lo devuelve a tinta en su propia hoja. */
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: var(--ambar);
  color: var(--marino);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-premium);
}
.skip-link:focus { transform: translateY(0); }

/* ── Grano de papel ─────────────────────────────────────────── */
/* Trama estática de gradientes: evita recalcular un filtro SVG de ruido
   sobre el viewport completo mientras el resto de capas se transforma. */
.grain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 200;
  opacity: 0.09;
  background-image:
    radial-gradient(circle, rgba(15,35,64,0.34) 0 0.45px, transparent 0.65px),
    radial-gradient(circle, rgba(255,255,255,0.3) 0 0.4px, transparent 0.62px);
  background-position: 0 0, 3px 2px;
  background-size: 5px 5px, 7px 7px;
  contain: strict;
}

/* ── Modal de vídeo ──────────────────────────────────────────
   Compartido por todas las páginas (ver js/video-modal.js): un
   único componente para que «Ver vídeo expedición» abra el vídeo
   sin sacar al explorador del sitio, se pida desde donde se pida. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 3.5rem 1.25rem 1.25rem;
}
.video-modal[hidden] { display: none; }
.video-modal-velo {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 24, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.video-modal-caja {
  position: relative;
  width: min(100%, 64rem);
}
.video-modal-marco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.65);
}
.video-modal-marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal-cerrar {
  position: absolute;
  top: -3.2rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(245, 244, 239, 0.1);
  border: 1px solid rgba(245, 244, 239, 0.3);
  color: var(--blanco);
}
.video-modal-cerrar svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
body.video-modal-abierto { overflow: hidden; }