body {
    margin: 0;
}

.parallax-container {
    height: 800px; /* Ajusta la altura deseada */
    overflow-x: hidden; /* Oculta desbordamiento horizontal (si es necesario) */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.parallax-content {
    position: relative;
    width: 80%; /* Ancho del stack de imágenes */
    max-width: 800px; /*Ancho maximo para el stack de imágenes*/
}

.parallax-image {
    position: absolute;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-out; /*Animacion al hacer scroll*/
    object-fit: cover; /*Asegura que la imagen no se estire o aplaste*/
    object-position: center; /*Asegura que la imagen se centre*/
}
/*ajuste responsivo para las imágenes*/
@media (min-width: 768px){
    .parallax-image{
        width: 75%;
    }
}

.parallax-image:nth-child(1) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    z-index: 3;
}

.parallax-image:nth-child(2) {
    top: 30px;
    left: 15px;
    transform: translate(10px, 10px);
    z-index: 2;
}

.parallax-image:nth-child(3) {
    top: 60px;
    left: 30px;
    transform: translate(20px, 20px);
    z-index: 1;
}