/* Estilos generales del contenedor flexible */
.flex-container {
    display: flex; /* Establece un contenedor flexbox. Los elementos hijos se comportarán como ítems flex. */
    flex-direction: column; /* Organiza los ítems flex en una columna, de arriba a abajo. */
    gap: 0px; /* Crea un espacio de 2px entre los ítems flex. */
    margin: 0 auto; /* Centra el contenedor horizontalmente en la página. */
    padding: 0px; /* Añade un relleno interno de 0px alrededor del contenido del contenedor. */
}


 /* Variables CSS para una gestión de colores más sencilla */
:root {
  --primary-yellow: #FFD700; /* Un amarillo dorado vibrante */
  --secondary-black: #1A1A1A; /* Un negro profundo para el fondo principal */
  --text-color-light: #FFFFFF; /* Blanco para el texto sobre fondos oscuros */
  --accent-red: #E74C3C;    /* Un rojo vivo para los acentos */
  --darker-black: #0D0D0D;   /* Un negro aún más oscuro para hover/active si se necesita */
  --darker-yellow: #E6C200; /* Un amarillo un poco más oscuro para hover/active */
}

/* Estilos generales para el cuerpo del documento */
body {
  font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif; /* Tipografía de palo seco */
  margin: 0; /* Elimina el margen predeterminado del body */
  padding: 0; /* Elimina el padding predeterminado del body */
  background-color: var(--primary-yellow);/*Define el color general de la pagina*/
}


/* Estilos para las secciones generales (cabecera, pie de página) */
.section {
    background-color: #f0f0f0; /* Define un color de fondo gris claro para las secciones. */
    padding: 20px; /* Añade un relleno interno de 20px. */
    border-radius: 8px; /* Redondea las esquinas de las secciones con un radio de 8px. */
    text-align: center; /* Centra el texto dentro de las secciones. */
}