body {
    background-color: #E9EEF6; /* Fondo claro azul grisáceo para toda la página */
    color: #2C2C2C; /* Color oscuro para el texto */
    font-family: 'Segoe UI', sans-serif; /* Fuente moderna y legible */
    margin: 0; /* Quita margen por defecto del navegador */
    padding: 0; /* Quita relleno por defecto */
}

header {
    background-color: #3A5BA0; /* Fondo azul intenso para el encabezado */
    color: white; /* Texto blanco en el encabezado */
    padding: 1rem; /* Espacio interno alrededor del contenido */
    text-align: center; /* Centrar el contenido dentro del header */
}

header nav a {
    text-decoration: none; /* Quita el subrayado de los enlaces */
    color: #F5F7FA; /* Color claro para los enlaces del menú */
    font-weight: bold; /* Texto en negrita para destacar enlaces */
    padding: 8px 12px; /* Espaciado interno de los enlaces para hacer clic cómodamente */
    margin: 0 10px; /* Margen horizontal para separar los enlaces */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el fondo al pasar el mouse */
}

header nav a:hover {
    background-color: #4B7BEC; /* Cambia el color de fondo al pasar el mouse */
    border-radius: 5px; /* Bordes redondeados cuando está activo el hover */
}

main {
    padding: 2rem; /* Espacio interno en todo el contenido principal */
    text-align: center; /* Centra el texto dentro del main */
}

h1 {
    margin-bottom: 1.5rem; /* Margen inferior para separar el título del siguiente contenido */
    text-align: center; /* Centra el título principal */
}

h2 {
    margin-bottom: 1.5rem; /* Margen inferior para separar subtítulos del contenido siguiente */
    text-align: center; /* Centra los subtítulos */
}

form {
    display: inline-block; /* Hace que el formulario se comporte como un bloque en línea */
    background-color: #F5F7FA; /* Fondo claro para el formulario */
    padding: 2rem; /* Espacio interno amplio para que el formulario no se vea apretado */
    border-radius: 10px; /* Bordes redondeados para un estilo más suave */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra ligera para dar profundidad */
    text-align: left; /* Texto alineado a la izquierda dentro del formulario */
    max-width: 400px; /* Ancho máximo para evitar que sea muy ancho en pantallas grandes */
    width: 100%; /* El formulario ocupará el 100% del contenedor padre (pero no más de 400px) */
}

label {
    display: block; /* Hace que cada etiqueta ocupe toda la línea */
    margin-top: 1rem; /* Espacio superior para separar etiquetas */
    font-weight: bold; /* Texto en negrita para destacar las etiquetas */
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Los campos ocupan todo el ancho del formulario */
    padding: 0.6rem; /* Espacio interno para que el texto no toque los bordes */
    margin-top: 0.3rem; /* Margen pequeño arriba para separar de la etiqueta */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados en los campos */
    font-size: 1rem; /* Tamaño de fuente legible */
}

input[type="submit"] {
    margin-top: 1.5rem; /* Margen superior para separar el botón de los campos */
    background-color: #3A5BA0; /* Fondo azul para el botón */
    color: white; /* Texto blanco en el botón */
    border: none; /* Sin borde */
    padding: 0.7rem 1.5rem; /* Relleno vertical y horizontal para que el botón sea cómodo de usar */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a puntero para indicar que es clickeable */
    font-size: 1rem; /* Tamaño de texto cómodo para lectura */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color al pasar el mouse */
}

input[type="submit"]:hover {
    background-color: #4B7BEC; /* Color azul más claro al pasar el mouse sobre el botón */
}

footer {
    background-color: #B0C4DE; /* Fondo azul claro para el pie de página */
    color: #2C2C2C; /* Texto oscuro */
    padding: 2rem; /* Espacio interno amplio */
    text-align: center; /* Centra el contenido */
    margin-top: 2rem; /* Margen superior para separar del contenido anterior */
    font-size: 1rem; /* Tamaño de texto legible */
}

footer section {
    margin: 1rem 0; /* Margen vertical para separar secciones internas del pie */
}

footer a {
    color: #4B7BEC; /* Color azul para los enlaces del pie de página */
    text-decoration: none; /* Sin subrayado */
    margin: 0 1rem; /* Espacio horizontal entre enlaces */
    font-weight: bold; /* Negrita para destacar enlaces */
}

footer a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
}

a {
    color: #4B7BEC; /* Color azul para todos los enlaces */
    text-decoration: none; /* Sin subrayado por defecto */
}

a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
}