/* ============================================================
 * Academy — base
 * Reset, tipografía y layout. Depende de tokens.css.
 * Vocabulario canónico --yma-*: NO se declaran alias cortos.
 * ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal, 1.6);
  color: var(--text-ink);
  background: var(--bg-paper);
  -webkit-font-smoothing: antialiased;
}

/* OJO: tokens.css trae `:where(h1..h6){ color: var(--text-ink) }`. Aunque `:where()` tiene
   especificidad 0, sigue siendo una declaración DIRECTA sobre el elemento — y eso le gana
   a cualquier color heredado del contenedor. Sin este `color: inherit`, un <h1> dentro del
   hero oscuro sale casi negro sobre foto oscura (pasó, era ilegible). */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight, 1.15);
  color: inherit;
  margin: 0;
  text-wrap: balance;          /* evita la línea huérfana en títulos cortos */
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p  { margin: 0; text-wrap: pretty; }

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

a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  /* El foco vive mayormente sobre fondos claros, donde el lima es invisible: va el
     violeta. Sobre las superficies oscuras (el menú) hay una regla propia con lima. */
  outline: 2px solid var(--yma-violet);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── layout ────────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 1024px) { .contenedor { padding-inline: var(--space-6); } }

.seccion { padding-block: var(--space-7); }
@media (min-width: 1024px) { .seccion { padding-block: var(--space-9, 80px); } }

.seccion--crema { background: var(--bg-cream); }

/* Título de sección: un patrón, usado en todas.
   El antetítulo es un <p>, no un heading: no compite en la jerarquía. */
.seccion__antetitulo {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta-600);
  margin-bottom: var(--space-2);
}
/* 800 y no 700: es el peso de display. A 700, Outfit en 32-38px se lee correcto pero
   blando, y los títulos de sección son las anclas de lectura de la página. */
.seccion__titulo {
  margin-bottom: var(--space-5);
  font-weight: var(--font-extrabold);
  letter-spacing: -.02em;
}

/* accesible pero invisible — para textos que sólo leen los lectores de pantalla */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}