/* ==========================================================================
   base.css — Reset, elementos HTML, tipografía y utilidades globales
   ========================================================================== */

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  background-color: var(--fondo-documento);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-top));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-bottom: var(--safe-bottom);
  font-family: var(--f-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--c-texto);
  overflow-wrap: break-word;    /* ninguna palabra larga (correos, URL) desborda */
  -webkit-font-smoothing: antialiased;
}

/* El blanco de la página lo pone <main>: al desvanecerse entre páginas se ve
   --fondo-documento (abismo, igual que la cabecera de todas las páginas), no un
   fogonazo claro. */
main { display: block; background: var(--c-blanco); }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

/* Tipografía */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: var(--leading-ajustado);
  letter-spacing: var(--tracking-ajustado);
  color: var(--c-abismo);
  margin: 0 0 var(--espacio-titulo);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); font-weight: 800; max-width: var(--medida-titulo); }
h3 { font-size: var(--text-2xl); font-weight: 700; }
h4 { font-size: var(--text-lg); font-weight: 700; }
p  { margin: 0 0 var(--espacio-parrafo); max-width: var(--medida-texto); text-wrap: pretty; }

/* Foco accesible: indicador de dos tonos que contrasta sobre cualquier fondo.
   Halo claro pegado al elemento (box-shadow, rellena el outline-offset)
   + contorno --c-foco por fuera. Nunca se quita sin reemplazo. */
:focus-visible {
  outline: var(--foco-grosor) solid var(--c-foco);
  outline-offset: var(--foco-separacion);
  box-shadow: 0 0 0 var(--foco-separacion) var(--c-foco-halo);
}

/* Bloquea el scroll del documento (menú móvil abierto) */
.sin-scroll { overflow: hidden; }

/* Centinelas de IntersectionObserver (los crea header.js / volver-arriba.js):
   invisibles y anclados al inicio del documento. Su altura es el umbral. */
.centinela {
  position: absolute;
  top: 0; left: 0;
  width: var(--hairline);
  height: var(--space-6);
  pointer-events: none;
  visibility: hidden;
}
.centinela--pantalla { height: var(--alto-viewport); }

/* Utilidades */
.contenedor {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.visualmente-oculto {
  position: absolute !important;
  width: var(--hairline); height: var(--hairline);
  padding: 0; margin: calc(var(--hairline) * -1);
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Enlace "saltar al contenido": fuera de pantalla hasta recibir foco */
.saltar-contenido {
  position: absolute;
  left: var(--space-4); top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--c-abismo);
  color: var(--c-blanco);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--dur-rapida) var(--ease-entrada);
}
.saltar-contenido:focus { transform: none; }

/* Movimiento reducido: todas las transiciones y animaciones a casi cero.
   La aparición al hacer scroll y los contadores se desactivan además en
   motion.css y en su JS. La pantalla de carga se retira al instante (su
   salvaguarda CSS queda sin retraso) y el anillo no gira. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: var(--dur-casi-cero) !important;
    animation-delay: var(--dur-casi-cero) !important;
    transition-duration: var(--dur-casi-cero) !important;
    transition-delay: var(--dur-casi-cero) !important;
  }
}