/* =======================================================
   SISTEMA DE ANIMACIONES REFINADO (DURACIONES LENTAS)
   ADAPTADO PARA TRAPEROS DE EMAÚS
   ======================================================= */

/* 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 (EFECTOS CREATIVOS)
   ======================================================= */

/* Transición rápida para bloques visuales y contenedores de imágenes */
#vis1, #vis2, #vis3, #vis4, 
aside img, #side2 img, #slider2 img, #recycle img, #recoleccion img {
    transition: transform 0.6s ease, filter 0.3s ease !important;
}

/* Hover sutil (Escala leve y brillo) para bloques visuales */
#vis1:hover, #vis2:hover, #vis3:hover, #vis4:hover,
aside img:hover, #side2 img:hover, #slider2 img:hover, #recycle img:hover, #recoleccion img:hover {
    transform: scale(1.03) translateY(-5px) !important;
    filter: brightness(1.08);
}

/* Efecto especial rotativo y de zoom para íconos sociales y cabecera */
#social-media a img, #head2 img, #head3 img {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#social-media a img:hover, #head2 img:hover, #head3 img:hover {
    transform: scale(1.15) rotate(8deg) !important;
}

/* Efecto de elevación para el botón de donación */
input.contenido {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

input.contenido:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0px 8px 15px rgba(0,0,0,0.15) !important;
}