/* Animación de gradiente */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Estilo para el header */
header {
    background: linear-gradient(-45deg, #2EA29B, #008E37, #7F5699, #006568, #0098DC, #C8006B, #DE3910);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    color: white;
    padding: 0.5vw 2.0vw;
    font-size: 2rem;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Modificado para separar los logos */
    flex-wrap: wrap;
    text-align: center;
    width: 100%;

}

/* Estilos generales para los logos */
.logo {
    height: 135px;
    width: auto;
}

/* Logo izquierdo */
.logo-izquierda {
    margin-left: 20px;
}

/* Logo derecho */
.logo-derecha {
    margin-right: 20px;
}

/* Texto centrado en el header */
header span {
    font-size: 24px;
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
    font-family: 'Baloo 2', sans-serif;
    margin: 0 10px; /* Añadido margen para separar el texto de los logos en desktop */
}

/* 📌 MEDIA QUERIES PARA RESPONSIVE */

/* Para pantallas menores a 768px (tablets y móviles) */
@media (max-width: 768px) {
    header {
        font-size: 1.5rem;
        padding: 1.5vw 3vw;
        flex-direction: column; /* Mantiene la dirección de columna */
        text-align: center;
        justify-content: center;
    }

    .logo {
        height: 80px;
        margin-bottom: 5px;
    }

    .logo-izquierda {
        margin-left: 0; /* Elimina el margen izquierdo en móviles */
    }

    .logo-derecha {
        margin-right: 0; /* Elimina el margen derecho en móviles */
    }

    header span {
        font-size: 20px;
        margin-top: 5px;
        margin-bottom: 5px; /* Añadido margen inferior para separar del siguiente logo */
    }

    /* Alineación de logos en móviles */
    header {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los elementos horizontalmente */
        justify-content: center;
    }

    .logo-izquierda, .logo-derecha {
        margin: 5px 0; /* Añade un poco de margen arriba y abajo de los logos */
    }
}

/* Para pantallas menores a 480px (celulares pequeños) */
@media (max-width: 480px) {
    header {
        font-size: 1.0rem;
        padding: 1vw 2vw;
    }

    .logo {
        height: 50px;
    }

    header span {
        font-size: 18px;
    }
}