/* =======================================================
   SISTEMA DE ANIMACIONES REFINADO (DURACIONES LENTAS)
   ======================================================= */

/* 1. Base para elementos con scroll (1.2s) */
.anim-elemento {
    opacity: 0 !important;
    transition: opacity 1.2s ease-out, transform 1.9s ease-out !important;
    will-change: opacity, transform;
}

/* 2. EFECTOS LENTOS PARA HEADERS Y SLIDER (2.5s) */
/* CORRECCIÓN: transform ahora dura 2.5s para evitar el efecto tosco */
.anim-lento-izq, .anim-lento-der, .anim-lento-fade, .anim-lento-arriba {
    opacity: 0 !important;
    transition: opacity 2.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: opacity, transform;
}

/* Direcciones iniciales específicas */
.anim-lento-izq { transform: translateX(-80px) !important; }
.anim-lento-der { transform: translateX(80px) !important; }
.anim-lento-fade { transform: none !important; }
.anim-lento-arriba { transform: translateY(260px) !important; } /* Clase nueva para el Slider */

/* Direcciones estándar */
.anim-arriba { transform: translateY(60px) !important; }
.anim-zoom { transform: scale(0.8) !important; }

/* 3. Clase de Activación */
.anim-visible {
    opacity: 1 !important;
    transform: translate(0) scale(1) !important;
}

/* El resto de tus HOVERS se mantienen intactos... */
/* =======================================================
   HOVERS RESTAURADOS (LOS QUE TE GUSTARON)
   ======================================================= */

/* Transición rápida solo para el hover */
#vix1, #vix2, #vix3, #vix4, #star-1, #star-2, #herox1, #herox2, #redes-sociales img {
    transition: transform 0.8s ease, filter 0.3s ease !important;
}

/* Hover sutil (Escala leve y un poco de brillo) */
#vix1:hover, #vix2:hover, #vix3:hover, #vix4:hover, 
#star-1:hover, #star-2:hover, #herox1:hover, #herox2:hover {
    transform: scale(1.03) translateY(-5px) !important;
    filter: brightness(1.08);
}

/* Redes sociales (Giro leve) */
#redes-sociales img:hover {
    transform: scale(1.15) rotate(8deg) !important;
}

/* Botón de formulario */
.botom-formulario {
    transition: background-color 0.6s ease, transform 0.6s ease !important;
}
.botom-formulario:hover {
    transform: scale(1.02) !important;
    background-color: #55a62e !important;
}