/* Estilos compartidos por las plantillas "bbcasita" (réplica de bbcasita.cl):
   header 9, footer 13, hero 12, card 13, propuesta de valor 9, about 15-17 y
   testimonios 4. Lo propio de cada sección va en su CSS.

   Colores y tipografías salen de los globales de Elementor con los valores de
   bbcasita como fallback:
   - color:  primary = azul #00A3D7 (titulares y botones), secondary = verde #669C35
             (hover e iconos), text = #3F3F3F, accent = gris #777777 (footer y precios)
   - fuente: primary = "Poppins" 600 (titulares y menú), accent = "Poppins" 500
             (botones), text = "Raleway" (bajadas cortas de las tarjetas)
   El cuerpo de texto no fija familia: en bbcasita hereda la del tema (hello-elementor).

   Los tokens van en .gpf-bbc y no en :root: Elementor declara sus variables en el
   body (.elementor-kit-N) y en :root todavía no existen. */

.gpf-bbc {
    --gpf-bbc-primary: var(--e-global-color-primary, #00A3D7);
    --gpf-bbc-secondary: var(--e-global-color-secondary, #669C35);
    --gpf-bbc-text: var(--e-global-color-text, #3F3F3F);
    --gpf-bbc-accent: var(--e-global-color-accent, #777777);
    --gpf-bbc-white: #FFFFFF;
    --gpf-bbc-font-title: var(--e-global-typography-primary-font-family, "Poppins");
    --gpf-bbc-font-button: var(--e-global-typography-accent-font-family, "Poppins");
    --gpf-bbc-font-text: var(--e-global-typography-text-font-family, "Raleway");
    --gpf-bbc-container: 1140px;
    /* Radio único para todos los botones de las plantillas bbcasita (también el de
       reservas del header 9): en bbcasita.cl variaba entre 3, 4, 5 y 10px. */
    --gpf-bbc-btn-radius: 5px;
    color: var(--gpf-bbc-body-color, var(--gpf-bbc-text));
}

.gpf-bbc *,
.gpf-bbc *::before,
.gpf-bbc *::after {
    box-sizing: border-box;
}

.gpf-bbc-container {
    position: relative;
    width: 100%;
    max-width: var(--gpf-bbc-container);
    margin: 0 auto;
}

/* ---------- Encabezados ----------
   Tamaño, familia y color vienen del kit (gpf_bbcasita_style_attr) con el diseño de
   bbcasita como respaldo. Las secciones que pintan el titular en blanco sólo pisan el color. */

.gpf-bbc .gpf-bbc-h {
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: 1;
}

.gpf-bbc h1.gpf-bbc-h {
    color: var(--gpf-bbc-h1-color, var(--gpf-bbc-primary));
    font-family: var(--gpf-bbc-h1-family, var(--gpf-bbc-font-title)), sans-serif;
    font-size: var(--gpf-bbc-h1-size, 5vw);
}

.gpf-bbc h2.gpf-bbc-h {
    color: var(--gpf-bbc-h2-color, var(--gpf-bbc-primary));
    font-family: var(--gpf-bbc-h2-family, var(--gpf-bbc-font-title)), sans-serif;
    font-size: var(--gpf-bbc-h2-size, 3.1em);
}

.gpf-bbc h3.gpf-bbc-h {
    color: var(--gpf-bbc-h3-color, var(--gpf-bbc-primary));
    font-family: var(--gpf-bbc-h3-family, var(--gpf-bbc-font-title)), sans-serif;
    font-size: var(--gpf-bbc-h3-size, 2.3em);
}

.gpf-bbc h4.gpf-bbc-h {
    color: var(--gpf-bbc-h4-color, var(--gpf-bbc-primary));
    font-family: var(--gpf-bbc-h4-family, var(--gpf-bbc-font-title)), sans-serif;
    font-size: var(--gpf-bbc-h4-size, 1.7em);
}

.gpf-bbc h5.gpf-bbc-h {
    color: var(--gpf-bbc-h5-color, var(--gpf-bbc-primary));
    font-family: var(--gpf-bbc-h5-family, var(--gpf-bbc-font-title)), sans-serif;
    font-size: var(--gpf-bbc-h5-size, 1.3em);
}

.gpf-bbc h6.gpf-bbc-h {
    color: var(--gpf-bbc-h6-color, var(--gpf-bbc-primary));
    font-family: var(--gpf-bbc-h6-family, var(--gpf-bbc-font-title)), sans-serif;
    font-size: var(--gpf-bbc-h6-size, 1em);
}

.gpf-bbc p {
    margin: 0 0 20px;
}

.gpf-bbc p:last-child {
    margin-bottom: 0;
}

/* ---------- Botones ---------- */

.gpf-bbc .gpf-bbc-btn {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--gpf-bbc-primary);
    border-radius: var(--gpf-bbc-btn-radius);
    background-color: var(--gpf-bbc-primary);
    color: var(--gpf-bbc-white);
    font-family: var(--gpf-bbc-font-button), sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}

.gpf-bbc .gpf-bbc-btn:hover,
.gpf-bbc .gpf-bbc-btn:focus {
    border-color: var(--gpf-bbc-secondary);
    background-color: var(--gpf-bbc-secondary);
    color: var(--gpf-bbc-white);
}

/* Blanco con borde: "Conoce más" de las tarjetas */
.gpf-bbc .gpf-bbc-btn--outline {
    background-color: var(--gpf-bbc-white);
    color: var(--gpf-bbc-primary);
}

/* Transparente con borde blanco sobre foto: "VER MÁS" de los destinos */
.gpf-bbc .gpf-bbc-btn--ghost {
    border: 2px solid var(--gpf-bbc-white);
    background-color: transparent;
    color: var(--gpf-bbc-white);
}

.gpf-bbc .gpf-bbc-btn--ghost:hover,
.gpf-bbc .gpf-bbc-btn--ghost:focus {
    border-color: var(--gpf-bbc-white);
    background-color: var(--gpf-bbc-white);
    color: var(--gpf-bbc-text);
}

/* ---------- Olas (mismo trazado que el separador "waves" de Elementor) ---------- */

.gpf-bbc-wave {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    direction: ltr;
    pointer-events: none;
}

.gpf-bbc-wave--top {
    top: -1px;
}

.gpf-bbc-wave--bottom {
    bottom: -1px;
    transform: rotate(180deg);
}

.gpf-bbc-wave svg {
    position: relative;
    left: 50%;
    display: block;
    height: 50px;
    transform: translateX(-50%);
}

.gpf-bbc-wave path {
    fill: #FFFFFF;
}

/* Fondo fijo de las bandas con foto (background-attachment: fixed en bbcasita).
   Los móviles no lo soportan bien, ahí queda como fondo normal. */
.gpf-bbc-fixed-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media (max-width: 1024px) {
    .gpf-bbc-fixed-bg {
        background-attachment: scroll;
    }
}

@media (max-width: 767px) {
    .gpf-bbc h1.gpf-bbc-h {
        font-size: 4em;
        line-height: 1.2em;
    }

    .gpf-bbc h2.gpf-bbc-h {
        font-size: 2.5em;
        line-height: 1.2em;
    }

    .gpf-bbc h3.gpf-bbc-h {
        font-size: 2em;
        line-height: 1.2em;
    }

    .gpf-bbc h4.gpf-bbc-h {
        font-size: 1.6em;
        line-height: 1.2em;
    }

    .gpf-bbc h5.gpf-bbc-h {
        font-size: 1.25em;
        line-height: 1.2em;
    }

    .gpf-bbc h6.gpf-bbc-h {
        line-height: 1.2em;
    }
}