.scroll-cards-container {
    display: flex;
    min-height: 100vh;
    position: relative;
    width: 100%;
}

.fixed-content {
    width: 50%;
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding: clamp(2.5rem, 2.5vw, 2.5vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cards-stack {
    width: 50%;
    padding: clamp(2.5rem, 2.5vw, 2.5vw);
}

.scroll-card {
    margin-bottom:clamp(2rem,2vw,2vw);
    background: #fff;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    border-radius: clamp(1rem,1vw,1vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:clamp(3rem,3vw,3vw);
    aspect-ratio: 3 / 1;
    max-width:100%;


}

.scroll-card h3 {
    font-size: clamp(1.5rem, 1.5vw, 1.5vw);
    margin-bottom: clamp(1rem, 1vw, 1vw);
}

.scroll-card .scroll-card-content p {
    font-size: clamp(1.25rem,1.25vw,1.25vw);
    line-height:1.25;
    font-weight:300;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scroll-card {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.6s ease-out;
    will-change: transform, opacity;
}
.fixed-content.scrolling-with-last-card {
    position: relative;
    top: auto !important;
}
.scroll-card.visible {
    opacity: 1;
    transform: translateX(0);
    /*animation: slideInFromRight 0.6s ease-out forwards;*/
}

* Retrasos escalonados para cada card */
.scroll-card.visible:nth-child(1) { animation-delay: 0.1s; }
.scroll-card.visible:nth-child(2) { animation-delay: 0.2s; }
.scroll-card.visible:nth-child(3) { animation-delay: 0.3s; }
.scroll-card.visible:nth-child(4) { animation-delay: 0.4s; }
.scroll-card.visible:nth-child(5) { animation-delay: 0.5s; }
.scroll-card.visible:nth-child(6) { animation-delay: 0.6s; }
.scroll-card.visible:nth-child(7) { animation-delay: 0.7s; }
.scroll-card.visible:nth-child(8) { animation-delay: 0.8s; }
.scroll-card.visible:nth-child(9) { animation-delay: 0.9s; }
.scroll-card.visible:nth-child(10) { animation-delay: 1s; }



@media (max-width: 768px) {
    .scroll-cards-container {
        flex-direction: column;
        overflow:hidden;
    }
    .fixed-content, .cards-stack {
        width: 100%;
    }
    .fixed-content {
        position: relative;
        height: auto;
        padding:clamp(1.25rem, 1.25vw, 1.25vw);
    }
    .cards-stack {
        padding:clamp(1.25rem, 1.25vw, 1.25vw);
    }
    .scroll-card {
        padding:clamp(2rem,2vw,2vw)
    }
    
}