/* ==================== */
/* SCROLLING PARALLAX GALLERY */
/* Efecto inspirado en susodigital.com */
/* ==================== */

.scrolling-imgs {
    min-height: 100vh;
    position: relative;
    padding: 100vh 0; /* Desktop/Tablet mantienen el original */
    background-color: var(--color-scheme-1--dark, #1a1a1a);
}

/* Sticky text container */
.scrolling-imgs__sticky {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5; /* Nivel intermedio para efecto 3D */
}

.scrolling-imgs__sticky-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
}

.scrolling-imgs__sticky-inner-txt {
    font-family: var(--_typography---font-styles--heading);
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-scheme-1--clear, #fffaf4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0 20px;
}

/* Images container */
.scrolling-imgs__content {
    display: flex;
    flex-wrap: wrap;
    gap: 50vh 1.5%;
    padding: 0 5%;
    position: relative;
}

/* Individual image wrapper */
.scrolling-imgs__content-img {
    pointer-events: none;
    position: relative;
}

.scrolling-imgs__content-img img {
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Parallax opacity effect */
@media screen and (prefers-reduced-motion: no-preference) {
    .scrolling-imgs__content-img img {
        transition: opacity ease 0.45s;
    }

    .scrolling-imgs__content-img:not([style*="--parallax"]) img {
        opacity: 0;
    }

    .scrolling-imgs__content-img[style*="--parallax"] img {
        opacity: calc(var(--parallax) * 5);
    }
}

/* ==================== */
/* DESKTOP - Scattered layout (4 images) */
/* min-width: 1025px */
/* ==================== */
@media (min-width: 1025px) {
    .scrolling-imgs__content {
        gap: 45vh 0;
        padding: 0;
    }

    /* Ocultar imagen 5 en desktop */
    .scrolling-imgs__content-img:nth-child(5) {
        display: none;
    }

    /* Imagen 1: horizontal grande, derecha */
    .scrolling-imgs__content-img:nth-child(1) {
        width: 55%;
        margin-left: 42%;
        z-index: 2; /* DETRÁS del texto */
    }
    .scrolling-imgs__content-img:nth-child(1) img {
        aspect-ratio: 16/10;
    }

    /* Imagen 2: cuadrada, izquierda */
    .scrolling-imgs__content-img:nth-child(2) {
        width: 32%;
        margin-left: 8%;
        z-index: 10; /* DELANTE del texto */
    }
    .scrolling-imgs__content-img:nth-child(2) img {
        aspect-ratio: 1;
    }

    /* Imagen 3: horizontal, centro-derecha */
    .scrolling-imgs__content-img:nth-child(3) {
        width: 48%;
        margin-left: 48%;
        z-index: 2; /* DETRÁS del texto */
    }
    .scrolling-imgs__content-img:nth-child(3) img {
        aspect-ratio: 16/9;
    }

    /* Imagen 4: vertical, izquierda-centro */
    .scrolling-imgs__content-img:nth-child(4) {
        width: 35%;
        margin-left: 15%;
        z-index: 10; /* DELANTE del texto */
    }
    .scrolling-imgs__content-img:nth-child(4) img {
        aspect-ratio: 3/4;
    }
}

/* ==================== */
/* TABLET - Scattered layout (4 images) */
/* 768px to 1024px */
/* ==================== */
@media (max-width: 1024px) and (min-width: 768px) {
    .scrolling-imgs__content {
        gap: 35vh 0;
        padding: 0;
    }

    /* Ocultar imagen 5 en tablet */
    .scrolling-imgs__content-img:nth-child(5) {
        display: none;
    }

    /* Imagen 1: horizontal, derecha */
    .scrolling-imgs__content-img:nth-child(1) {
        width: 60%;
        margin-left: 38%;
        z-index: 2;
    }
    .scrolling-imgs__content-img:nth-child(1) img {
        aspect-ratio: 16/10;
    }

    /* Imagen 2: cuadrada, izquierda */
    .scrolling-imgs__content-img:nth-child(2) {
        width: 45%;
        margin-left: 5%;
        z-index: 10;
    }
    .scrolling-imgs__content-img:nth-child(2) img {
        aspect-ratio: 1;
    }

    /* Imagen 3: horizontal, derecha */
    .scrolling-imgs__content-img:nth-child(3) {
        width: 55%;
        margin-left: 42%;
        z-index: 2;
    }
    .scrolling-imgs__content-img:nth-child(3) img {
        aspect-ratio: 16/9;
    }

    /* Imagen 4: vertical, izquierda */
    .scrolling-imgs__content-img:nth-child(4) {
        width: 45%;
        margin-left: 10%;
        z-index: 10;
    }
    .scrolling-imgs__content-img:nth-child(4) img {
        aspect-ratio: 3/4;
    }
}

/* ==================== */
/* MOBILE - Alternating left/right (5 images) */
/* below 768px */
/* ==================== */
@media (max-width: 767px) {
    .scrolling-imgs {
        padding: 40vh 0 30vh; /* Reducido significativamente */
    }

    .scrolling-imgs__sticky {
        z-index: 5;
    }

    .scrolling-imgs__sticky-inner-txt {
        font-size: 1.5rem;
        white-space: normal;
        max-width: 85%;
        line-height: 1.4;
        letter-spacing: 0.15em;
        transition: transform 0.1s ease-out;
        will-change: transform;
    }

    .scrolling-imgs__content {
        gap: 18vh 3%; /* Reducido */
        padding: 0 5%;
    }

    .scrolling-imgs__content-img {
        width: 70%;
    }

    /* Imagen 1: izquierda, EMPIEZA ARRIBA del texto */
    .scrolling-imgs__content-img:nth-child(1) {
        margin-left: 0;
        margin-top: -32vh;
        z-index: 2; /* DETRÁS del texto para que se vea */
    }

    /* Primera y última imagen SIN fade-in */
    .scrolling-imgs__content-img:nth-child(1) img,
    .scrolling-imgs__content-img:nth-child(5) img {
        opacity: 1 !important;
    }

    /* Imagen 2: derecha */
    .scrolling-imgs__content-img:nth-child(2) {
        margin-left: auto;
        z-index: 2; /* DETRÁS del texto */
    }

    /* Imagen 3: izquierda */
    .scrolling-imgs__content-img:nth-child(3) {
        margin-left: 0;
        z-index: 2; /* DETRÁS del texto */
    }

    /* Imagen 4: derecha */
    .scrolling-imgs__content-img:nth-child(4) {
        margin-left: auto;
        z-index: 10; /* DELANTE del texto */
    }

    /* Imagen 5: izquierda, TERMINA DEBAJO del texto */
    .scrolling-imgs__content-img:nth-child(5) {
        display: block; /* Mostrar en mobile (oculta en desktop/tablet) */
        margin-left: 0;
        margin-bottom: -10vh;
        z-index: 2; /* DETRÁS del texto */
    }

    .scrolling-imgs__content-img img {
        aspect-ratio: 4/5;
    }
}

/* ==================== */
/* SMALL MOBILE - below 450px */
/* ==================== */
@media (max-width: 450px) {
    .scrolling-imgs {
        padding: 35vh 0 25vh; /* Reducido */
    }

    .scrolling-imgs__content {
        gap: 15vh 0; /* Reducido */
        padding: 0 4%;
    }

    .scrolling-imgs__content-img {
        width: 80%;
    }

    /* Ajustes específicos para small mobile */
    .scrolling-imgs__content-img:nth-child(1) {
        margin-top: -32vh;
    }

    .scrolling-imgs__content-img:nth-child(5) {
        display: block;
        margin-bottom: -8vh;
    }
}

/* ==================== */
/* ESTILOS PARA IMÁGENES 6-9 (COMENTADOS) */
/* Descomentar si se necesitan más imágenes */
/* ==================== */

/*
@media (min-width: 1025px) {
    .scrolling-imgs__content-img:nth-child(6) {
        width: 40%;
        margin-left: 5%;
        z-index: 10;
    }
    .scrolling-imgs__content-img:nth-child(6) img {
        aspect-ratio: 16/10;
    }

    .scrolling-imgs__content-img:nth-child(7) {
        width: 35%;
        margin-left: 58%;
        z-index: 2;
    }
    .scrolling-imgs__content-img:nth-child(7) img {
        aspect-ratio: 2/3;
    }

    .scrolling-imgs__content-img:nth-child(8) {
        width: 42%;
        margin-left: 10%;
        z-index: 10;
    }
    .scrolling-imgs__content-img:nth-child(8) img {
        aspect-ratio: 16/9;
    }

    .scrolling-imgs__content-img:nth-child(9) {
        width: 38%;
        margin-left: 55%;
        margin-bottom: -20vh;
        z-index: 2;
    }
    .scrolling-imgs__content-img:nth-child(9) img {
        aspect-ratio: 3/4;
    }
}
*/