/* SOLUCIÓN PARA EL ESPACIO EN BLANCO EN MÓVILES */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* Asegura que los contenedores de las animaciones no estiren la pantalla */
.interface, #main, section, .recycle, footer, #slider {
    overflow: hidden !important;
} 
 
 /* =======================================================
   SISTEMA DE ANIMACIONES REFINADO (DURACIONES LENTAS)
   ======================================================= */

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

/* 2. EFECTOS MUY LENTOS (2.5s) PARA ELEMENTOS DE IMPACTO */
.anim-lento-izq, .anim-lento-der, .anim-lento-fade, 
.anim-lento-arriba, .anim-lento-zoom, .anim-lento-up {
    opacity: 0 !important;
    transition: opacity 2.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 2.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: opacity, transform;
}

/* Direcciones iniciales específicas */
.anim-lento-izq { transform: translateX(-120px) !important; }
.anim-lento-der { transform: translateX(120px) !important; } 
.anim-lento-fade { transform: none !important; }
.anim-lento-arriba { transform: translateY(460px) !important; }
.anim-lento-zoom { transform: scale(0.85) !important; } /* Para #interface */
.anim-lento-up { transform: translateY(150px) scale(0.9) !important; } /* Para #recyclex */

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

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

/* =======================================================
   HOVERS Y BOTONES (SOCIAL MEDIA)
   ======================================================= */

/* Transiciones de Hover (Mantienen la suavidad) */
#vix1, #vix2, #vix3, #vix4, #star-1, #star-2, #herox1, #herox2, #sider, #xider,
.visual, .vixual, #vizual, .contador, .social-media img {
    transition: transform 0.8s ease, filter 0.3s ease !important;
}

/* Hover de Social Media solicitado */
.social-media img:hover {
    transform: scale(1.2) translateY(-10px) !important;
    filter: brightness(1.1);
}

/* Hovers generales */
#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);
}