/* Orys · web v3 · base: reset, tipografía, utilidades, foco. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* Escala */
.hero { font-size: var(--fs-hero); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.02; text-wrap: balance; }
.display { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.08; text-wrap: balance; }
.title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.45; color: var(--tinta-suave); max-width: 34ch; }
.secundario { color: var(--tinta-suave); }

/* Rotulación de instrumento: etiqueta mono. No es un eyebrow de marketing (spec §3). */
.etiqueta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}
.tab-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Superficies invertidas (tokens en tokens.css) */
[data-fondo] { background: var(--fondo); color: var(--texto); }
[data-fondo] .lead, [data-fondo] .secundario { color: var(--texto-secundario); }
[data-fondo] .etiqueta { color: var(--texto-secundario); }

/* Contenedores */
.container { width: min(100% - 2 * var(--gutter), var(--contenedor)); margin-inline: auto; }
.container--portada { width: min(100% - 2 * var(--gutter), var(--contenedor-portada)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }

/* Reglas de 1 px */
.hairline { border: 0; border-top: 1px solid var(--hairline); }
[data-fondo] .hairline { border-color: var(--regla); }

/* A11y */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: var(--gutter); top: -100%;
  padding: .6rem 1rem; background: var(--tinta); color: var(--hueso-sobre-tinta);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  z-index: 100;
}
.skip-link:focus { top: var(--gutter); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
[data-fondo] :focus-visible { outline-color: var(--texto); }
::selection { background: var(--tinta); color: var(--hueso-sobre-tinta); }