*{ /* Estilos generales para la página */
    margin: 0; /* Elimina el margen */
    padding: 0; /* Elimina el relleno */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el tamaño total */
    --color1: #005792; /*color azul oscuro*/
    --color2: #FFFFFF; /*color blanco*/
    --color3: #0A0303; /*color negro*/
    --color4: #8b0000; /*color rojo oscuro*/
    --color5: #8b008b; /*color magenta oscuro*/
}

body{ /* Estilos para el cuerpo de la página */
    font-family: 'Roboto', sans-serif; /* Fuente Roboto de Google Fonts */
    background-color: var(--color2); /* Color de fondo número 2: blanco */
    color: var(--color3); /* Color del texto número 3: negro */
    line-height: 1.6; /* Espaciado entre líneas */
    padding: 20px; /* Espaciado interno general */
}

main{ /* Contenido principal de la página */
    width: 800px; /* El ancho del contenido principal será de 800px */
    margin: 20px auto; /* El margen arriba y abajo será de 20px, centrado horizontalmente */
}

#cabecera{ /* Cabecera principal: logo y menú */
    display: flex; /* Activa flexbox para organizar elementos internos */
    flex-direction: row; /* Coloca los elementos en fila horizontal */
    justify-content: space-between; /* Logo a la izquierda, menú a la derecha */
    align-items: center; /* Centra verticalmente los elementos */
    background-color: var(--color1); /* color de fondo número 1: azul oscuro */
    padding: 12px 13px; /* Espacio interno: 12px de arriba/abajo y 13px de izquierda/derecha */
    margin-bottom: 20px; /* Separación de 20px con el siguiente elemento de la página */
    border-radius: 5px; /* Bordes redondeados en la caja de 5px */
}

#menu{ /* Contenedor del menú de navegación */
    display: flex; /* Flexbox para distribuir los botones de menú */
    flex-direction: row; /* Alineadas horizontalmente */
    justify-content: flex-end; /* Alineación hacia la derecha */
    margin: 2px; /* Espacio entre cada opción de 2px */
    background-color:lavenderblush; /* Color de fondo: lavenderblush */ 
}

#menu div{ /* Estilo de cada opción dentro del menú */
    padding: 10px; /* Espacio interno para que se vea como botón */
    cursor: pointer; /* Cursor de mano para indicar clic */
    transition: all 0.3s ease; /* Transición suave de 0.3s en efectos */
}

#menu div:hover { /* Efecto al pasar el mouse por encima del menú */
    text-decoration: underline; /* Subraya el texto */
}

#contenido{ /* Contenedor general del contenido principal */
    display: flex; /* Flexbox para organizar columnas */
    flex-direction: row; /* Las columnas estarán en fila horizontal */
    justify-content: space-between; /* Separación equitativa entre las columnas */
    gap: 10px; /* Espacio de distancia entre columnas */
    margin-bottom: 15px; /* Separación con el pie de página */
    margin-top: 15px; /* Separación con el menú */
}

.contenido{ /* Estilos para cada columna de contenido */
    width: 2px; /* El ancho del contenido será de 2px */
    height: 310px; /* el margen arriba y abajo será de 310px */
    flex: 1; /* Para que todas las columnas ocupen el mismo espacio */
    background-color:antiquewhite; /* Color de fondo: antiquewhite */
    margin: 5px; /* Espacio exterior para separación */
    padding: 12px; /* Espacio interior (relleno) */
    border: 3px solid var(--color5); /* Color del borde número 5: darkmagenta de 3px */
    border-radius: 8px; /* Bordes con las esquinas redondeadas */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* Fuente de letra */
}

h3{ /* Títulos de las cajas */
    text-align: center; /* Centra el texto del título en la caja */
    color: var(--color4); /* Color de texto número 4: darkred */
    background-color:cornsilk; /* Color de fondo: cornsilk */
    padding: 9px; /* Espacio interior del título */
    margin-bottom: 10px; /* Separación con el lorem */
    border-radius: 5px; /* Bordes redondeados del recuadro del título */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Fuente de letra */
}

#pie{ /* Pie de página la cual contiene información adicional */
    display: flex; /* Flexbox para organizar columnas */
    flex-direction: row; /* En fila horizontal */
    justify-content: right; /* Espacio hacia la derecha */
    background-color: var(--color1); /* Color de fondo número 1: azul oscuro */
    padding: 15px 12px; /* Espacio interior */
    border-radius: 12px; /* Bordes redondeados */
}