/* ============================================================
   Capa 2: Base — reset, tipografía y accesibilidad
   Depende de tokens.css. No declara ningún valor literal.
   ============================================================ */

/* ---------- Fuentes autoalojadas ----------
   Autoalojar en vez de usar Google Fonts CDN: elimina dos
   conexiones a un tercer dominio del critical path. En un cPanel
   compartido eso son 200-400ms de LCP.
   Figtree es variable: un archivo cubre 400-800. */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}


/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* compensa el header sticky al usar anclas */
}

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

/* Evita CLS: toda imagen debe traer width/height en el HTML.
   Esto es la red de contención por si alguna se escapa. */
img:not([width]):not([height]) { aspect-ratio: 4 / 3; object-fit: cover; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; margin: 0; }
ul, ol { margin: 0; padding: 0; }


/* ---------- Tipografía ---------- */

h1, .t-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h2, .t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h3, .t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

h4, .t-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.t-small   { font-size: var(--fs-small); }
.t-caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.t-muted   { color: var(--fg-secondary); }

/* Eyebrow: la etiqueta de sección. Estructural, no decorativa —
   dice de qué trata la sección antes de que se lea el titular. */
.t-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-brand);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.t-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
}

/* Dato: códigos IATA, fechas, pesos, números de guía.
   El monoespaciado es el vocabulario de la pantalla de vuelos. */
.t-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  font-size: 0.9em;
}

/* .t-prose envuelve the_content() en las páginas que sí tienen texto
   largo (por ahora, single-ruta.php). El reset de arriba (ul, ol
   { margin: 0; padding: 0 }) es correcto para menús y grillas, pero
   deja listas de Gutenberg sin viñetas ni sangría — por eso se
   reponen acá, con alcance, en vez de tocar el reset global. */
.t-prose { max-width: var(--measure); }
.t-prose > * + * { margin-top: var(--sp-4); }
.t-prose p + p { margin-top: var(--sp-4); }
.t-prose h2, .t-prose h3 { margin-top: var(--sp-7); }
.t-prose ul, .t-prose ol { padding-inline-start: 1.25em; }
.t-prose ul { list-style: disc; }
.t-prose ol { list-style: decimal; }
.t-prose li + li { margin-top: var(--sp-2); }

a { color: var(--fg-brand); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }


/* ---------- Accesibilidad ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Sin outline en click de mouse, sí en teclado. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface);
  color: var(--fg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

/* Área táctil mínima de 44px en todo control interactivo. */
@media (pointer: coarse) {
  :where(a, button, input, select, [role="button"]) { min-height: 44px; }
}


/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--text { max-width: var(--container-text); }

.section {
  padding-block: var(--sp-section);
  background: var(--bg-page);
  color: var(--fg-primary);
}

.section--surface { background: var(--bg-surface); }

/* Bloque oscuro. El data-theme reasigna los roles en tokens.css,
   así que los componentes internos se adaptan sin una sola
   regla extra. Es la razón por la que se usan roles y no hexes. */
.section--dark {
  background: var(--bg-page);
  color: var(--fg-primary);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  max-width: var(--container-text);
}

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

/* Mobile-first: una columna por defecto, se abre al haber espacio.
   auto-fit + minmax evita media queries para las grillas de tarjetas. */
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-5);
}

.grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-5);
}

/* Carrusel sin JavaScript. scroll-snap nativo = 0 KB de librería,
   gesto nativo en móvil y navegable con teclado de fábrica. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: var(--sp-2) var(--sp-5);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
}

.rail > * { scroll-snap-align: start; }

/* Divisor: la estela de vuelo del logo, convertida en elemento
   estructural. Marca el paso de una sección a la siguiente. */
.flightline {
  height: 2px;
  border: 0;
  margin: 0;
  background-image: linear-gradient(
    to right,
    var(--border) 0 10px,
    transparent 10px 20px
  );
  background-size: 20px 2px;
  background-repeat: repeat-x;
}