body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex; /* Usamos flexbox para centrar todo en la página */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Ocupa el 100% de la altura de la ventana */
}

.logo-and-contact-section {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centra el contenido dentro de esta sección */
    position: relative; /* Muy importante para posicionar el email */
    max-width: 800px; /* Ancho máximo para la sección para que no ocupe todo */
    width: 90%; /* Ancho responsivo */
    min-height: 500px; /* Altura mínima para que haya espacio para el correo */
    display: flex; /* Para centrar el logo-container dentro de esta sección */
    flex-direction: column;
    justify-content: center; /* Centra el logo-container verticalmente */
    align-items: center; /* Centra el logo-container horizontalmente */
}

.logo-container img {
    /* Tamaño por defecto para pantallas pequeñas (mobile first) */
    width: 400px; /* O usa max-width: 100px; height: auto; */
    height: auto;
}

@media (min-width: 768px) { /* Para tablets y pantallas más grandes */
    .logo-container img {
        width: 600px;
    }
}

@media (min-width: 1024px) { /* Para escritorios y pantallas grandes */
    .logo-container img {
        width: 800px;
    }
}

.brand-name {
    font-size: 2.2em; /* Tamaño del texto del nombre */
    font-weight: bold;
    color: #003366; /* Color de texto del nombre */
    margin: 0; /* Elimina márgenes predeterminados */
}

/* Estilos para la dirección de correo */
.contact-email {
    position: absolute; /* Posiciona absolutamente con respecto a .logo-and-contact-section */
    bottom: 25px; /* Distancia desde la parte inferior */
    right: 25px; /* Distancia desde la parte derecha */
    font-size: 0.85em;
    color: #aaa;
}

.contact-email a {
    color: #222; /* Color del enlace */
    text-decoration: none; /* Sin subrayado por defecto */
}

.contact-email a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}