/* --- CONTENEDOR PRINCIPAL DEL EFECTO --- */
        .scroll-section {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .animation-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* --- ESTRUCTURA DE LAS CAPAS --- */
        .layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        /* --- PANELES DIVIDIDOS 50% / 50% --- */
        .panel-left, .panel-right {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            will-change: transform;
        }

        .panel-left img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .panel-right .content {
            padding: 60px;
            max-width: 500px;
        }