/* HERO */
.hero {
    background: linear-gradient(135deg, #0f2027, #203a43, #00c6ff);
    color: white;
    padding: 60px 20px;
    text-align: center;
    background-size: 200% 200%;
    animation: bgAnim 15s ease infinite;
}

/* Logo container */
.logo-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    /*text-align: center;*/
}

/* Imagen del logo */
.logo-hero img {
    width: 100%;
    max-width: 100%; /* Se ve grande en desktop */
    min-width: 250px; /* Se asegura de no achicarse tanto en móvil */
    height: auto;
    display: block;
    margin: 0 100px;
    animation: slideFromTopLeft 1.5s ease-out, glowPulse 2.5s infinite alternate;
    filter: drop-shadow(0 0 8px #00f0ff) drop-shadow(0 0 15px #00f0ff);
}

/* Ajustes responsive para pantallas chicas */
@media (max-width: 576px) {
    .logo-hero img {
        max-width: 85%;
        min-width: 220px;
    }
}

/* Animaciones */
@keyframes bgAnim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
    0% {
        filter: drop-shadow(0 0 5px #00f0ff) drop-shadow(0 0 10px #00f0ff);
    }
    100% {
        filter: drop-shadow(0 0 12px #00f0ff) drop-shadow(0 0 25px #00f0ff);
    }
}

@keyframes slideFromTopLeft {
    0% {
        opacity: 0;
        transform: translate(-80px, -80px) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}