html {
  height: 100%; /* Aseguramos que el HTML y el BODY ocupen toda la altura */
}

main {
  flex: 1 0 auto; /* Permite que el contenido principal crezca y ocupe el espacio */
}

main p {
  text-align: justify;
}

body {
  min-height: 100%;
  background-color: #f8f9fa;

  /* --- La Magia del CSS Grid --- */
  display: grid;
  /* Define 3 filas:
     1. auto: La cabecera ocupa lo que necesite.
     2. 1fr: El contenido principal ocupa TODO el espacio sobrante.
     3. auto: El pie de página ocupa lo que necesite.
  */
  grid-template-rows: auto 1fr auto;
}

h1 {
  color: #003366;
}

footer {
  background-color: #212529;
  color: white;
  text-align: center;
  padding: 1rem;
}

/* Aplica un color de fondo gris a los botones de acordeón cerrados */
.accordion-button.collapsed {
  background-color: #DDDDDD;
}

/* Opcional: añade una pequeña transición para que el cambio de color sea suave */
.accordion-button {
  transition: background-color 0.3s ease-in-out;
}