/* ============================================================
   base.css — reset y capa base
   F1.6 de PLAN.md
   ============================================================ */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* Desplazamiento suave en los saltos de ancla (los CTA apuntan a
     #lista). El paralaje del fondo lleva su propio amortiguado en JS,
     así que ambos movimientos quedan acompasados. En reduced-motion la
     regla de abajo lo devuelve a `auto`: un salto instantáneo. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Suelo de color: si el fondo no carga, la pagina sigue siendo negra. */
  background-color: var(--ink);
}

body {
  /* El color de respaldo lo pinta `html`, no `body`: el fondo de pagina
     (.hero__bg) va en z-index -2, es decir DETRAS del body, asi que un
     background opaco aqui lo tapaba por completo. */
  background-color: transparent;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Sin scroll horizontal en ninguna sección, a 360px (F9.1). */
  overflow-x: hidden;
  min-height: var(--vh-full);
}

/* Imágenes y media: nunca desbordan su contenedor. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Los controles no heredan la tipografía por defecto. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Evita que un titular en display parta la maqueta a 360px. */
h1, h2, h3, p, li {
  overflow-wrap: break-word;
}

/* ---------- Foco (F1.6) ----------
   Ámbar, siempre visible, en todo lo interactivo.
   NUNCA outline: none en ningún sitio del proyecto (CLAUDE.md §9).
   Criterio de aceptación: tabulando por la página se ve el foco
   en todos los elementos interactivos. */

:focus-visible {
  outline: var(--focus-w) solid var(--amber);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* Quitamos el anillo por defecto SOLO cuando el navegador ya ha
   decidido que no toca mostrarlo (click de ratón), nunca en teclado. */
:focus:not(:focus-visible) {
  outline: none;
}

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

.display {
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-transform: none;
  /* Alineado a la izquierda siempre. CLAUDE.md §5.3. */
  text-align: left;
  text-wrap: balance;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--step-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.body {
  font-size: var(--step-body);
  max-width: var(--measure);
}

.caption {
  font-size: var(--step-caption);
  line-height: 1.5;
  color: var(--smoke);
}

/* ---------- Utilidades ---------- */

/* Etiqueta accesible oculta visualmente. F3.1 exige <label> real:
   nunca solo placeholder. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.section {
  padding-block: var(--space-3xl);
}

/* ---------- prefers-reduced-motion ----------
   Respetado en todo, no solo en el fondo (CLAUDE.md §9).
   El motor del fondo lo comprueba además en JS para dibujar
   el primer frame y parar, en vez de animar despacio (F5.7). */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}