/* ============================================================================
   MAPTAINER — Base: reinicio, tipografía y utilidades
   ============================================================================ */

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

/* color-scheme le dice al navegador que los controles NATIVOS —casillas,
   selectores, barras de desplazamiento, el desplegable de un <select>, el
   calendario de un <input type=date>— se pinten en oscuro. Sin esto salen
   claros sobre la pagina oscura y delatan el tema a medias. accent-color les
   da el cian de la marca en vez del azul del sistema. */
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  accent-color: var(--accent-hi);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  /* No es un plano liso: dos halos muy tenues sobre el navy, como en la web
     viva. Van en el fondo del body y no en una capa fija, para que no compitan
     con el desplazamiento ni cuesten una capa de composicion. */
  background:
    radial-gradient(ellipse 90% 60% at 15% -5%,  rgba(45,165,224,.16), transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 12%,  rgba(26,127,184,.10), transparent 62%),
    var(--paper);
  background-attachment: fixed, fixed, scroll;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-deep); }   /* --accent-deep aclara, no oscurece */
::selection { background: var(--accent); color: var(--on-accent); }

/* Un solo peso para todos los titulares: 500. Es el rasgo mas reconocible
   de la tipografia de maptainer.com — Space Grotesk nunca se pone en negrita,
   el enfasis lo da el tamano y el interletraje cerrado, no el grosor. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h3);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -.008em; }
h5 { font-size: var(--fs-cap); letter-spacing: 0; }
p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ---- Foco de teclado: siempre visible ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Antetítulo: la etiqueta cartográfica ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
/* El filete corto que precede al antetitulo: la marca de escala del plano. */
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent-hi);
  flex-shrink: 0;
}
.eyebrow--plain { color: var(--ink-2); }
.eyebrow--plain::before { background: var(--rule-2); }
.eyebrow--accent { color: var(--accent); }

/* ---- Cota: dato técnico, unidad, formato ---- */
.cota {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-2);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* Cifra grande en degradado cian: el recurso que la web viva reserva para el
   titular del hero y los datos de impacto. Se pinta con -webkit-background-clip
   y por eso lleva un color de reserva: si el recorte no esta soportado, el
   texto sigue siendo legible en cian claro. */
.glow-num {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .glow-num {
    background: linear-gradient(135deg, var(--accent), var(--accent-mid));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---- Medida de lectura ---- */
.measure { max-width: var(--measure); }
/* La entradilla pasa a la voz de lectura: es el unico texto largo del hero. */
.lead {
  font-family: var(--font-read);
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--ink-2); max-width: 60ch;
}

/* ---- Utilidades ---- */
.is-hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: var(--z-modal);
  background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2); font-size: var(--fs-cap); text-decoration: none;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--paper); }

/* ============================================================================
   Aparición al desplazar.
   Estructura a prueba de fallos: sin JS, con JS roto o con movimiento
   reducido, el contenido SIEMPRE es visible. Solo se anima si .js está
   presente, que lo pone un script en línea al principio del <head>.
   ============================================================================ */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}