/* ===== Variables CSS: define colores/medidas una vez, úsalas en todo
   el archivo. Cambiar el tema completo = cambiar estas líneas. ===== */
:root {
  --color-fondo: #fdfdfd;
  --color-texto: #1a1a1a;
  --color-acento: #0b6e4f;
  --ancho-maximo: 42rem;
}

/* Reset mínimo: los navegadores traen márgenes por defecto distintos;
   esto parte de cero para que el resultado sea predecible */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif; /* usa la fuente del sistema: rápida y legible */
  line-height: 1.6;                   /* interlineado cómodo para leer */
  color: var(--color-texto);
  background: var(--color-fondo);
  /* Centrar la columna de contenido: ancho máximo + márgenes automáticos */
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 2rem 1rem; /* rem = relativo al tamaño de fuente base; escala bien */
}

header {
  margin-bottom: 2rem;
}

h1 {
  color: var(--color-acento);
}

.subtitulo {
  color: #555;
}

section {
  margin-bottom: 2rem;
}

h2 {
  border-bottom: 2px solid var(--color-acento);
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
  font-size: 0.875rem;
  color: #777;
}