/* ============================================================================
   BASE › RESET Y ESTILOS GENERALES
   ----------------------------------------------------------------------------
   Empareja el punto de partida entre navegadores y define cómo se ve el
   documento "en crudo" (body, html, imágenes). Va segundo: después de las
   variables (porque las usa) y antes que cualquier componente.
   ============================================================================ */

/* border-box hace que padding y border NO agranden el elemento.
   Es lo que evita el 90% de los desbordes horizontales en mobile. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;                        /* los links internos bajan suave */
  /* Al saltar a una sección deja aire arriba para que el header fijo
     no tape el título de esa sección. */
  scroll-padding-top: var(--alto-header);
}

body {
  background: var(--color-fondo);
  font-family: var(--fuente);
  color: var(--color-texto);
  line-height: 1.6;
  overflow-x: hidden;                             /* seguro anti scroll horizontal */
}

/* Las imágenes nunca desbordan su contenedor.
   display:block les saca el espacio fantasma que dejan debajo por ser inline. */
img {
  max-width: 100%;
  display: block;
}