/* =========================================================
   CAPA 2 · BASE
   Estilos de etiquetas HTML sin clases: reset, tipografía
   general, foco del teclado y accesibilidad.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Franja bajo la barra de estado del celular (iPhone con notch) */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 10;
  height: env(safe-area-inset-top, 0px); background: var(--night);
}

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.02; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}