/* =======================================================
   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.2s ease-out !important;
    will-change: opacity, transform;
}

/* 2. EFECTOS LENTOS PARA HEADERS Y SLIDER (2.5s) */
.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(100px) !important; }

/* Direcciones estándar para el Scroll */
.anim-arriba { transform: translateY(60px) !important; }
.anim-izquierda { transform: translateX(-60px) !important; }
.anim-derecha { transform: translateX(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;
}

/* =======================================================
   HOVERS PERSONALIZADOS (SIN COLORES ADICIONALES)
   ======================================================= */

/* Transición rápida solo para el hover */
#herox1, #herox2, #herox3, 
#hero1, #hero2, 
#vis1, #vis2, #vis3, #vis4, 
#viz4 img, 
.whatsapp-button img, .messenger-button img {
    transition: transform 0.6s ease, filter 0.3s ease !important;
}

/* Hover sutil (Escala leve y un poco de brillo) para los bloques de noticias y servicios */
#herox1:hover, #herox2:hover, #herox3:hover, 
#hero1:hover, #hero2:hover, 
#vis1:hover, #vis2:hover, #vis3:hover, #vis4:hover {
    transform: scale(1.03) translateY(-5px) !important;
    filter: brightness(1.08);
}

/* Efecto especial para el camión de recolección y los botones flotantes de chat */
#viz4 img:hover, .whatsapp-button img:hover, .messenger-button img:hover {
    transform: scale(1.1) rotate(4deg) !important;
}