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

/* Evita que los contenedores estiren la pantalla */
.interface, #main, main, section, .recycle, footer, #sider, #vixual {
    overflow: hidden !important;
} 
 
 /* =======================================================
   SISTEMA DE ANIMACIONES (ACELERADO POR GPU / TARJETA GRÁFICA)
   ======================================================= */

/* 1. Base para elementos (Se redujo un poco el tiempo para no saturar memoria) */
.anim-elemento {
    opacity: 0 !important;
    transition: opacity 1s ease-out, transform 1.2s ease-out !important;
}

/* 2. EFECTOS 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 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. Direcciones usando Translate3D (OBLIGA EL USO DE GPU PARA ELIMINAR EL LAG) */
.anim-lento-izq { transform: translate3d(-100px, 0, 0) !important; }
.anim-lento-der { transform: translate3d(100px, 0, 0) !important; } 
.anim-lento-fade { transform: translate3d(0, 0, 0) !important; }
/* Distancias de Y reducidas para evitar "repintados" masivos fuera de la pantalla */
.anim-lento-arriba { transform: translate3d(0, 120px, 0) !important; } 
.anim-lento-zoom { transform: scale3d(0.85, 0.85, 1) !important; }
.anim-lento-up { transform: translate3d(0, 100px, 0) scale3d(0.9, 0.9, 1) !important; }

.anim-arriba { transform: translate3d(0, 80px, 0) !important; }
.anim-zoom { transform: scale3d(0.8, 0.8, 1) !important; }
.anim-izquierda { transform: translate3d(-80px, 0, 0) !important; }
.anim-derecha { transform: translate3d(80px, 0, 0) !important; }

/* 4. Clase de Activación Final */
.anim-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
}

/* =======================================================
   HOVERS CORREGIDOS (Prevención de conflictos de Layout)
   ======================================================= */

/* 
   El hover se aplica ahora a las etiquetas internas (figure, a, img) 
   para que no compitan con la animación de los contenedores padre (div).
*/
#vix1 figure, #vix2 figure, #vix3 figure, #vix4 figure, 
#vis1 a, #vis2 a, #vis3 a, #vis4 a,
#side1 img, #side2 figure, article img, aside figure,
#social-media img {
    transition: transform 0.4s ease, filter 0.3s ease !important;
}

/* Hover de Redes Sociales (También usando aceleración GPU) */
#social-media img:hover {
    transform: scale3d(1.2, 1.2, 1) translate3d(0, -10px, 0) !important;
    filter: brightness(1.1);
}

/* Hovers generales para bloques informativos y distritos */
#vix1:hover figure, #vix2:hover figure, #vix3:hover figure, #vix4:hover figure, 
#vis1 a:hover, #vis2 a:hover, #vis3 a:hover, #vis4 a:hover,
#side1:hover img, #side2:hover figure, article:hover img, aside:hover figure {
    transform: scale3d(1.04, 1.04, 1) translate3d(0, -5px, 0) !important;
    filter: brightness(1.08);
}