/* ==========================================================
   Banner parallax — ver js/banner-parallax.js
   La imagen se desplaza más lento que el scroll, lo que da
   sensación de profundidad (con velocidad 1 queda fija en pantalla).

   Funciona igual en PC, Android y iPhone/iPad (no usa
   position: fixed ni background-attachment: fixed, que
   fallan en iOS).

   Sin JavaScript o con las animaciones desactivadas en el
   sistema, la imagen queda quieta y cubre el bloque.
   ========================================================== */

.banner-parallax {
    /* Velocidad del efecto:
       0   = la imagen se mueve con la página (sin efecto)
       0.5 = parallax suave
       1   = la imagen queda fija en la pantalla */
    --banner-parallax-speed: 0.7;

    position: relative;
    height: clamp(280px, 45vw, 640px);
    overflow: hidden;
    background-color: var(--color-dark-text);
}

.banner-parallax__img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;

    /* --banner-parallax-height y --banner-parallax-offset los calcula el JS */
    height: var(--banner-parallax-height, 100%);
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate3d(0, var(--banner-parallax-offset, 0px), 0);
    will-change: transform;
    pointer-events: none;
}

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 575.98px) {

    .banner-parallax {
        height: 280px;
    }

    /* En vertical se prioriza la zona de los hornos */
    .banner-parallax__img {
        object-position: 62% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .banner-parallax__img {
        height: 100%;
        transform: none;
        will-change: auto;
    }
}