/* ============================================================
   HEADER CON MÁSCARA DE BUS
   Large (≥1200px): 180px · Desktop: 200px · Mobile (≤768px): 150px
   ============================================================ */

.header-bus-mask {
    position: relative;
    overflow: hidden;
    background-color: #111;
    height: 200px;
}

/* Foto de fondo — animada con transform (GPU-accelerated) */
.header-bus-mask::before {
    content: "";
    position: absolute;
    top: -45%;
    left: -20%;
    right: -20%;
    bottom: -25%;
    background-image: url(../img/clubp3.jpg);
    background-image: image-set(
        url(../img/clubp3.webp) type("image/webp"),
        url(../img/clubp3_opt.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    animation: bus-bg-pan 22s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

@keyframes bus-bg-pan {
    from { transform: scale(0.85) translateX(-6%); }
    to   { transform: scale(0.85) translateX(6%); }
}

/* Gradiente inferior */
.header-bus-mask::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.70));
    z-index: 4;
    pointer-events: none;
}

/* Bus overlay */
.header-bus-ventanas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 80%;
    z-index: 3;
    pointer-events: none;
    display: block;
}

/* Título */
.header-bus-mask .header-title {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%;
    z-index: 5;
    margin: 0;
    text-shadow: 2px 3px 16px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 0.8);
}

/* ── Large screens ─────────────────────────────────────────── */
@media (min-width: 1200px) {
    .header-bus-mask {
        height: 180px;
    }
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-bus-mask {
        height: 150px;
    }
    .header-bus-mask .header-title {
        bottom: 10%;
    }
    /* Versiones mobile para el fondo (default clubp3) */
    .header-bus-mask::before {
        background-image: url(../img/clubp3_xs.jpg);
        background-image: image-set(
            url(../img/clubp3_xs.webp) type("image/webp"),
            url(../img/clubp3_xs.jpg) type("image/jpeg")
        );
    }
}

/* ── Variantes de fondo por página ─────────────────────────── */
.header-bus-mask.header-bus-enterprise::before {
    background-image: url(../img/caminito1.jpg);
    background-image: image-set(
        url(../img/caminito1.webp) type("image/webp"),
        url(../img/caminito1_opt.jpg) type("image/jpeg")
    );
    background-position: center 40%;
}

.header-bus-mask.header-bus-congreso::before {
    background-image: url(../img/floralis2.jpg);
    background-image: image-set(
        url(../img/floralis2.webp) type("image/webp"),
        url(../img/floralis2_opt.jpg) type("image/jpeg")
    );
    background-position: center 50%;
}

.header-bus-mask.header-bus-faq::before {
    background-image: url(../img/planetario1.jpg);
    background-image: image-set(
        url(../img/planetario1.webp) type("image/webp"),
        url(../img/planetario1_opt.jpg) type("image/jpeg")
    );
    background-position: center 50%;
}

.header-bus-mask.header-bus-stores::before {
    background-image: url(../img/pmadero5.png);
    background-image: image-set(
        url(../img/pmadero5.webp) type("image/webp"),
        url(../img/pmadero5_opt.jpg) type("image/jpeg")
    );
    background-position: center 50%;
}

.header-bus-mask.header-bus-contact::before {
    background-image: url(../img/crosada3.jpg);
    background-image: image-set(
        url(../img/crosada3.webp) type("image/webp"),
        url(../img/crosada3_opt.jpg) type("image/jpeg")
    );
    background-position: center 50%;
}

.header-bus-mask.header-bus-excursions::before {
    background-image: url(../img/congreso_opt.jpg);
    background-image: image-set(
        url(../img/congreso.webp) type("image/webp"),
        url(../img/congreso_opt.jpg) type("image/jpeg")
    );
    background-position: center 50%;
}

/* Animación panorámica para excursiones: más zoom-out que el default (0.85) */
@keyframes bus-bg-pan-wide {
    from { transform: scale(0.72) translateX(-4%); }
    to   { transform: scale(0.72) translateX(4%); }
}

/* ── Excursions: zoom-out sobre la foto — sin tocar altura del contenedor ── */
@media (min-width: 992px) {
    .header-bus-mask.header-bus-excursions::before {
        /* Overflow extra para que scale(0.72) cubra el 100% del ancho */
        left: -40%;
        right: -40%;
        animation-name: bus-bg-pan-wide;
        background-position: center 18%;
    }
}

/* ── Mobile variantes ──────────────────────────────────────── */
@media (max-width: 768px) {
    .header-bus-mask.header-bus-enterprise::before {
        background-image: url(../img/caminito1_xs.jpg);
        background-image: image-set(
            url(../img/caminito1_xs.webp) type("image/webp"),
            url(../img/caminito1_xs.jpg) type("image/jpeg")
        );
    }
    .header-bus-mask.header-bus-congreso::before {
        background-image: url(../img/floralis2_xs.jpg);
        background-image: image-set(
            url(../img/floralis2_xs.webp) type("image/webp"),
            url(../img/floralis2_xs.jpg) type("image/jpeg")
        );
    }
    .header-bus-mask.header-bus-faq::before {
        background-image: url(../img/planetario1_xs.jpg);
        background-image: image-set(
            url(../img/planetario1_xs.webp) type("image/webp"),
            url(../img/planetario1_xs.jpg) type("image/jpeg")
        );
    }
    .header-bus-mask.header-bus-stores::before {
        background-image: url(../img/pmadero5_xs.jpg);
        background-image: image-set(
            url(../img/pmadero5_xs.webp) type("image/webp"),
            url(../img/pmadero5_xs.jpg) type("image/jpeg")
        );
    }
    .header-bus-mask.header-bus-contact::before {
        background-image: url(../img/crosada3_xs.jpg);
        background-image: image-set(
            url(../img/crosada3_xs.webp) type("image/webp"),
            url(../img/crosada3_xs.jpg) type("image/jpeg")
        );
    }
    .header-bus-mask.header-bus-excursions::before {
        background-image: url(../img/congreso_xs.jpg);
        background-image: image-set(
            url(../img/congreso_xs.webp) type("image/webp"),
            url(../img/congreso_xs.jpg) type("image/jpeg")
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-bus-mask::before { animation: none; }
}