/* ============================================================
   MÓDULO: STICKY PARALLAX CON CAMBIO DE COLOR DINÁMICO
============================================================ */

.dlo-sticky-wrapper {
    margin: 0;
    font-family: "Schibsted Grotesk", sans-serif;
    width: 100%;
}

/* WRAPPER GLOBAL QUE CAMBIA COLOR */
.dlo-sticky-wrapper .color-wrapper {
    min-height: 100vh;
    transition: background 1.4s ease, color 1.4s ease, filter 1.2s ease;
    background: linear-gradient(135deg, #ffffff, #f5f5f5);
    color: #111;
}

/* Fade-out final cinematográfico */
.dlo-sticky-wrapper .color-wrapper.fade-end {
    filter: brightness(0.85) saturate(80%);
}

.dlo-sticky-wrapper .parallax.fade-end {
    opacity: 0.35;
    transition: opacity 1.2s ease;
}

/* SECCIÓN STICKY */
.dlo-sticky-wrapper .sticky-section {
    position: relative;
    height: 500vh;
}

.dlo-sticky-wrapper .sticky-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PARALLAX */
.dlo-sticky-wrapper .parallax {
    position: absolute;
    top: 2vh;
    left: 0;
    width: 100%;
    height: 120vh;
    object-fit: cover;
    z-index: -2;
    transition: filter 1.2s ease, opacity 1.2s ease;
    transform: translateY(0) scale(1.1);
}

/* STEP CONTENEDOR */
.dlo-sticky-wrapper .step {
    position: absolute;
    opacity: 0;
    transform: translateY(40px);
    filter: blur(12px);
    transition: 
        opacity 0.9s cubic-bezier(.25,.46,.1,.99), 
        transform 0.9s cubic-bezier(.25,.46,.1,.99), 
        filter 0.9s cubic-bezier(.25,.46,.1,.99);
    max-width: 720px;
    text-align: left;
    z-index: 2;
}

.dlo-sticky-wrapper .step.active {
    opacity: 1;
    transform: translateY(0px);
    filter: blur(0px);
}

/* REVEAL ESCALONADO INTERNO */
.dlo-sticky-wrapper .step-line {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(10px);
    transition: 
        opacity 0.8s cubic-bezier(.25,.46,.1,.99), 
        transform 0.8s cubic-bezier(.25,.46,.1,.99), 
        filter 0.8s cubic-bezier(.25,.46,.1,.99);
}

.dlo-sticky-wrapper .step.active .step-line {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.dlo-sticky-wrapper .step-line:nth-child(1) { transition-delay: 0.00s; }
.dlo-sticky-wrapper .step-line:nth-child(2) { transition-delay: 0.12s; }
.dlo-sticky-wrapper .step-line:nth-child(3) { transition-delay: 0.24s; }
.dlo-sticky-wrapper .step-line:nth-child(4) { transition-delay: 0.36s; }

/* GRADIENTES + TINTE POR STEP (Añadimos variables separadas) */
.dlo-sticky-wrapper .step[data-step="1"] {
    --bg: linear-gradient(135deg, #ffffff, #f5f5f5);
    --title-color: #ffffff;
    --text-color: #d0d8ff;
    --tint: grayscale(0%) brightness(1);
}

.dlo-sticky-wrapper .step[data-step="2"] {
    --bg: linear-gradient(135deg, #F1C40F33, #F1C40F);
    --title-color: #ffffff;
    --text-color: #d0d8ff;
    --tint: sepia(60%) hue-rotate(10deg) saturate(200%);
}

.dlo-sticky-wrapper .step[data-step="3"] {
    --bg: linear-gradient(135deg, #D5583A33, #D5583A);
    --title-color: #ffffff;
    --text-color: #d0d8ff;
    --tint: sepia(80%) hue-rotate(-20deg) saturate(250%);
}

.dlo-sticky-wrapper .step[data-step="4"] {
    --bg: linear-gradient(135deg, #4477E733, #4477E7);
    --title-color: #ffffff;
    --text-color: #d0d8ff;
    --tint: hue-rotate(180deg) saturate(200%);
}

/* ESTILO EDITORIAL */
.dlo-sticky-wrapper h1 {
    font-size: 5.6rem;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.1;
    color: var(--current-title, #111);
    transition: color 1.4s ease;
    /* Sombra sutil para destacar sobre cualquier fondo o imagen */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dlo-sticky-wrapper p {
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 640px;
    color: var(--current-text, #333);
    transition: color 1.4s ease;
    /* Sombra sutil para el párrafo */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* ESTILO EDITORIAL */
.dlo-sticky-wrapper h1 {
    font-size: 5.6rem;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.1;
}

.dlo-sticky-wrapper p {
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 640px;
}