/* =========================================
   1. FIX DE VISUALIZACIÓN (CRÍTICO)
   ========================================= */
/* Obligamos a los contenedores de Elementor a no ocultar el contenido
   para que el efecto Sticky pueda "bajar" con el scroll. */
.elementor-section,
.elementor-column,
.elementor-container,
.elementor-widget-wrap,
.e-con, 
.e-con-inner {
    overflow: visible !important; 
}

/* Evitamos scroll horizontal en el cuerpo de la página */
body {
    overflow-x: hidden; 
}

/* =========================================
   2. ESTRUCTURA DEL WIDGET
   ========================================= */

/* El Track define la altura total del recorrido (la duración) */
.misato-scroll-track {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* La altura se define en el panel de Elementor */
}

/* El Wrapper es el elemento que se queda "pegado" a la pantalla */
.misato-sticky-wrapper {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    overflow: hidden;
    display: flex;
    z-index: 10;
    /* La alineación (centro, arriba, abajo) la controla Elementor vía Flexbox */
}

/* Contenedor individual del video/animación */
.misato-lottie-container {
    position: relative;
    z-index: 2; /* Por encima del fondo */
    line-height: 0;
    pointer-events: none; /* Permite hacer scroll tocando el video */
}

/* Aseguramos que el SVG o Canvas ocupe todo su contenedor */
.misato-lottie-container svg,
.misato-lottie-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    transform: translate3d(0,0,0); /* Aceleración por hardware */
}

/* Capa de fondo (Overlay) para colores o degradados detrás del video */
.misato-scroll-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del video */
    transition: background 0.3s ease, opacity 0.3s ease;
}

/* =========================================
   3. RESPONSIVIDAD (ESCRITORIO VS MÓVIL)
   ========================================= */

/* ESTADO POR DEFECTO (Escritorio / Tablet Horizontal) (> 767px) */
.misato-desktop-view {
    display: block !important;
}

.misato-mobile-view {
    display: none !important;
}

/* ESTADO MÓVIL (Celulares) (< 768px) */
@media screen and (max-width: 767px) {
    
    /* Ocultamos forzosamente la versión de escritorio */
    .misato-desktop-view {
        display: none !important;
    }

    /* Mostramos forzosamente la versión móvil */
    .misato-mobile-view {
        display: block !important;
    }
}