/* Capas del fondo (parallax) */
.fondo-scroll {
    position: absolute;
    inset: 0;
    height: 630px !important;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image: url(../img/hero-bg-1.svg);
    background-repeat: repeat-x;
    background-position: 0 -12px !important;
    background-size: 1819px 100%;
    animation: mpHeroParallaxScroll1 440s linear infinite; /* capa más lenta */
    will-change: background-position;
}

.fondo-scroll::before,
.fondo-scroll::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat-x;
    background-position: 0 0;
    pointer-events: none;
    background-size: 1910px 100%;
    will-change: background-position;
}

.fondo-scroll::before {
    z-index: 2;
    background-size: 1819px 100%;
    background-image: url(../img/hero-bg-2.svg);
    animation: mpHeroParallaxScroll2 170s linear infinite;
}

.fondo-scroll::after {
    z-index: 3;
    background-size: 1822px 100%;
    background-image: url(../img/hero-bg-3.svg);
    animation: mpHeroParallaxScroll3 55s linear infinite; /* capa más rápida */
}

/* Keyframes específicos para cada capa - valores coinciden con background-size para evitar saltos */
@keyframes mpHeroParallaxScroll1 {
    from { background-position: 0 0; }
    to { background-position: -1819px 0; }
}

@keyframes mpHeroParallaxScroll2 {
    from { background-position: 0 0; }
    to { background-position: 1819px 0; }
}

@keyframes mpHeroParallaxScroll3 {
    from { background-position: 0 10px; }
    to { background-position: -1822px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .fondo-scroll,
    .fondo-scroll::before,
    .fondo-scroll::after {
        animation: none;
    }
}

.fondo-mascara {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 146px;
    z-index: 4;
    background-image: url(../img/mascara_inferior_hero.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    pointer-events: none;
    background-size: 100%;
    margin-bottom: -3px;
}