/* ===============================
   BASE Y RESET DE ESTILOS
   =============================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-secundaria);
  color: var(--color-texto);
  background-color: var(--color-blanco);
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .8; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--space);
}

/* Elementos de texto */
h1, h2, h3, nav a, footer .claim {
  font-family: var(--font-principal);
}

/* Texto oculto accesible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}