* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial;
}

#header {
    background-color: white; /* Color de fondo */
    color: black; /* Color del texto */
    padding: 6px; /* Espaciado interno */
    position: fixed; /* Fija el header en la parte superior */
    top: 0; /* Posición desde el borde superior */
    left: 0; /* Posición desde el borde izquierdo */
    width: 100%; /* Ancho completo */
    z-index: 1000; /* Asegura que esté encima de otros elementos */
    /* PARA EL BOTON iniciar sesión */
    display: flex; /* Utiliza flexbox para alinear elementos */
    justify-content: space-between; /* Espacio entre el título y el botón */
    align-items: center; /* Alinea verticalmente */
    /**/
}

.header-section {
    flex: 1; /* Cada sección ocupará un tercio del header */
    display: flex; /* Habilita flexbox para cada sección */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

.header-section ul li a{
    font-family: Arial;
    font-size: 15px;
}

.logo-container-la img {
    max-width: 100%; /* Ajusta el tamaño de la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    max-height: 60px; /* Altura máxima de la imagen */
}

.logo-container-uv img {
    max-width: 100%; /* Ajusta el tamaño de la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    max-height: 120px; /* Altura máxima de la imagen */
}

#login-button {
    background-color: white; /* Color de fondo del botón */
    color: black; /* Color del texto del botón */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    transition: background-color 1s; /* Transición suave al cambiar el color de fondo */
}

#login-button:hover {
    background-color: #42A8BF; /* Cambia el color de fondo al pasar el ratón */
    color: white; 
    border: 1px solid black; 
}

#main {
    background-color: white; /* Color de fondo */
    padding: 100px 20px 20px; /* Espaciado interno */
    margin-bottom: 20px; /* Espaciado inferior */

}

#footer {
    background-color: white; /* Color de fondo */
    color: black; /* Color del texto */
    padding: 10px; /* Espaciado interno */
}


footer{
    width: 100%;
    padding: 50px 0px;
    font-family: Arial;
    font-size: 15px;
    /* background-color: var(--color-esqueleto); */
    background-image: url("/static/images/background-footer.svg");
    background-size: cover;
}

.img-container {
    text-align: center;
}

.img-container p{
    font-family: Arial;
    font-size: 15px;
}

/*Estas clases son para la pagina inicio.html*/

.img-container2 {
    text-align: center;
}

.img-container2 p{
    font-family: Arial;
    font-size: 19px;
}

/* Media Query para dispositivos más pequeños */
@media (max-width: 768px) {
    #header {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        align-items: flex-start; /* Alinea los elementos al inicio */
    }
    .header-section {
        justify-content: center; /* Centra los contenidos en cada sección */
        margin-bottom: 10px; /* Espacio entre las secciones */
        width: 100%; /* Asegura que cada sección ocupe el ancho completo */
    }
    #main {
        padding: 260px 20px 20px; /* Espaciado interno */
    }

}