/* ==========================================================
   BASE
   Reseteo del navegador + estilos generales (texto, links, contenedor).
   ========================================================== */

/* --- Reseteo: quita márgenes y bordes por defecto del navegador --- */
*, ::before, ::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: var(--font-sans);
}
ol, ul { list-style: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border-radius: 0; }
strong { font-weight: bolder; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
/* Los elementos con el atributo "hidden" desaparecen (lo usa el menú del celular) */
[hidden] { display: none !important; }
body { background-color: var(--background); color: var(--foreground); }

/* --- Estilos generales de la página --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* evita que el header tape los títulos al navegar */
}
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: 0;
}
a {
  color: inherit; /* los links heredan el color del texto en vez del azul del navegador */
  text-decoration: none;
}
.container {
  width: min(1250px, calc(100% - 131px));
  margin-inline: auto;
}