/* base.css — reset, tipografía y accesibilidad. Sin colores propios: solo tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: max(16px, var(--t-base));
  line-height: var(--t-lh);
  color: var(--c-texto);
  background: var(--c-fondo);
}
h1, h2, h3 { font-family: var(--f-titulos); line-height: 1.15; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 3px; }

/* Enlace para saltar al contenido */
.saltar { position: absolute; left: var(--e-4); top: -100px; padding: var(--e-3) var(--e-4);
  background: var(--c-superficie); color: var(--c-texto); z-index: 100; }
.saltar:focus { top: var(--e-4); }

/* Oculto accesible (visible para lectores de pantalla) */
[hidden] { display: none !important; }

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

/* Objetivos táctiles */
.boton, .menu__nav a, .pie a { min-height: 44px; display: inline-flex; align-items: center; }

/* Revelado: el estado oculto SOLO existe si main.js ha puesto la clase .js */
.js [data-revelar]:not(.visible) { opacity: 0; transform: translateY(12px); }
[data-revelar] { transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-revelar]:not(.visible) { opacity: 1; transform: none; }
}

/* ===== Ajustes tipográficos del proyecto ===== */
h1, h2 { text-wrap: balance; letter-spacing: -0.02em; }
p { text-wrap: pretty; max-width: 65ch; }
.cifra { font-variant-numeric: tabular-nums; }
::selection { background: var(--c-laton-claro); color: var(--c-noche); }
html { scroll-padding-top: var(--e-4); accent-color: var(--c-primario); }