/* Estilo para los iconos de audio */
        .audio-icons {
            color: #FFFFFF; 
            font-size: 18px; 
            cursor: pointer; 
        }
        /* Estilo para el contenedor de los controles de audio */
        .audio-controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 999; 
        }
body {
            margin: 0;
            padding: 0;
            overflow: hidden; 
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black; 
        }

/* Estilos para la disposición de los logotipos */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos pasen a una nueva línea si no caben */
}

.logo {
    width: 320px;
    height: 175px;
    margin: 10px;
    transition: transform 0.3s ease; /* Transición suave para la animación de ampliación */
}
.logo:hover {
    cursor: pointer;
}
/* Media queries para dispositivos móviles */
@media screen and (max-width: 600px) {
    .logo {
        width: 100%; /* Para que los logotipos ocupen todo el ancho en dispositivos móviles */
        height: auto; /* Para mantener la proporción */
    }
}

         .fondo-animado {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('../fondo_taurus.jpg');
            background-size: cover; 
            animation: zoomBackground 10s infinite alternate; 
            z-index: -1; /* Asegura que el fondo esté detrás del contenido */
        }

@keyframes zoomBackground {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05); /* Zoom in del 5% */
            }
        }
@keyframes glowMoveAnimation {
    0% {
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); /* Cambio a negro */
    }
    50% {
        filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 1)); /* Cambio a negro */
    }
    100% {
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); /* Cambio a negro */
    }
}


@keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0);
            }
        }




.logo {

    animation: floatAnimation 3s infinite ease-in-out, glowMoveAnimation 4s infinite linear;
}