/* --- EFECTO: HARD SCROLL LOCK (FULL SCREEN DIVI BREAKOUT) --- */

/* 1. Forzamos a la secci¨®n a salirse de los l¨ªmites de Divi y ser 100% del monitor */
.nsc-scroll-video-section {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important; /* El truco m¨¢gico de breakout */
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #000 !important;
    border: none !important;
}

/* 2. Aniquilamos las restricciones internas de la Fila y Columna de Divi */
.nsc-scroll-video-section .et_pb_row,
.nsc-scroll-video-section .et_pb_column,
.nsc-scroll-video-section .et_pb_module,
.nsc-scroll-video-section .et_pb_code_inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 3. Contenedor del video */
.nsc-sticky-container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

/* 4. Comportamiento del video */
.nsc-sticky-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    /* OJO: 'cover' llena la pantalla pero recorta los bordes laterales. 
       Si el video tiene elementos que NO deben cortarse, c¨¢mbialo a 'contain' */
    object-fit: cover; 
    z-index: 1;
    pointer-events: none;
}

.nsc-video-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* 5. CLASE MAESTRA DE BLOQUEO (SIN ROMPER EL LAYOUT) */
.nsc-noscroll {
    overflow: hidden !important;
}

/* ==========================================================================
   MÓDULO 2: EFECTO CASCADA TETRIS DIRECCIONAL
   ========================================================================== */

/* 1. ESTADO INICIAL (Ocultos hacia abajo) */
.nsc-tetris-section .nsc-tetris-block {
    opacity: 0 !important;
    transform: translateY(80px) !important;
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    will-change: opacity, transform;
}

/* 2. ESTADO VISIBLE (Encajados en su lugar) */
.nsc-tetris-section.nsc-active .nsc-tetris-block {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 3. ESTADO PASADO (Si el usuario sigue bajando y la sección queda arriba) */
.nsc-tetris-section.nsc-passed-top .nsc-tetris-block {
    opacity: 0 !important;
    transform: translateY(-80px) !important;
}