/* Estilos base. Las animaciones por sección viven en su propio archivo. */

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  margin: 0;
}

/* Escala tipográfica: los ocho tokens de tokens.css, nada más
   (CLAUDE.md · skill escala-tipografica). */
h1 {
  font: 700 var(--fs-h1) / var(--lh-h1) var(--fd);
  letter-spacing: -0.02em;
}

h2 {
  font: 700 var(--fs-h2) / var(--lh-h2) var(--fd);
  letter-spacing: -0.02em;
}

h3 {
  font: 700 var(--fs-h3) / var(--lh-h3) var(--fd);
}

h4 {
  font: 600 var(--fs-h4) / var(--lh-h4) var(--fd);
}

p {
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-h);
}

button {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Al compilar envolvemos cada imagen en un <picture> para servir AVIF y
   WebP. Eso no debe cambiar ninguna maquetación: con display:contents el
   <picture> desaparece de la caja y la imagen se comporta como si fuera
   hija directa de su contenedor, que es lo que el CSS da por hecho. */
picture {
  display: contents;
}

/* Con el <picture> disuelto, sus <source> pasan a ser hijos del contenedor
   y en una caja flexible cuentan como elementos: dos fuentes por imagen,
   invisibles pero sumando sus huecos, que es lo que metía 40 px de aire
   delante de los sellos del pie. */
source {
  display: none;
}