/* El movimiento solo se activa al hacer HOVER */
.logo-girar:hover {
    animation: giroContinuo 3s linear infinite;
    transform-origin: center; /* Asegura que gire perfectamente sobre su centro */
    cursor: pointer;
}

/* Definición del movimiento de rotación */
@keyframes giroContinuo {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Añade esta clase a la imagen del logo en tu HTML */
.logo-galaxia-pulso {
    animation: resplandorCosmico 4s ease-in-out infinite;
}

@keyframes resplandorCosmico {
    0%, 100% {
        /* Brillo base sutil */
        filter: drop-shadow(0 0 5px rgba(0, 255, 128, 0.4)) drop-shadow(0 0 10px rgba(128, 0, 255, 0.2));
        transform: scale(1);
    }

    50% {
        /* Máximo resplandor: combina el verde del logo con un toque morado de tu galaxia */
        filter: drop-shadow(0 0 15px rgba(0, 255, 128, 0.9)) drop-shadow(0 0 25px rgba(168, 85, 247, 0.6));
        transform: scale(1.03); /* Un sutil aumento de tamaño para dar sensación de vida */
    }
}