/* Hero 12 — portada de bbcasita.cl: 90vh, velo primary al 30% en modo luminosity sobre
   el slideshow y ola blanca inferior (300% de ancho, 50px de alto). */

.gpf-hero-12 .elementor-element.elementor-element-hero12 {
    position: relative;
    overflow: hidden;
    background-color: var(--gpf-bbc-primary);
}

.gpf-hero-12 .elementor-element.elementor-element-hero12 > .elementor-container {
    min-height: 90vh;
    align-items: center;
}

.gpf-hero-12 .elementor-element.elementor-element-hero12 > .elementor-background-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--gpf-bbc-primary);
    opacity: 0.3;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.gpf-hero-12 .gpf-hero-12__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.gpf-hero-12 .gpf-hero-12__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gpf-hero-12 .elementor-element-hero12col > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
}

.gpf-hero-12 .gpf-bbc-h.gpf-hero-12__pre,
.gpf-hero-12 .gpf-bbc-h.gpf-hero-12__title,
.gpf-hero-12 .gpf-bbc-h.gpf-hero-12__subtitle {
    width: 100%;
    color: #FFFFFF;
    text-align: center;
}

.gpf-hero-12 .gpf-hero-12__pre,
.gpf-hero-12 .gpf-hero-12__title {
    margin-bottom: 20px;
}

.gpf-hero-12 .gpf-bbc-h.gpf-hero-12__subtitle {
    text-transform: none;
}

@media (max-width: 1024px) {
    .gpf-hero-12 .elementor-element-hero12col > .elementor-widget-wrap {
        padding: 100px 10px 50px;
    }
}

@media (max-width: 767px) {
    /* En bbcasita el h1 móvil mide 4em (64px) y no cabe: el navegador ensancha la página a
       ~427px y la muestra reducida. Con el tope en 15vw se ve del mismo tamaño en un teléfono
       de 375px (~56px) sin desbordar ni cortar la palabra más larga */
    .gpf-hero-12 .gpf-bbc-h.gpf-hero-12__title {
        font-size: min(4em, 15vw);
    }

    .gpf-hero-12 .gpf-bbc-h.gpf-hero-12__subtitle {
        font-size: 12px;
    }
}