/* Estilos compartidos por las plantillas de la propuesta editorial "lodge"
   (header 8, hero 11, card 11, propuesta de valor 7 y 8, about 13 y 14,
   testimonios 3, footer 12).

   Sólo lo que se repite entre secciones: el encabezado centrado y el eyebrow
   manuscrito. Lo propio de cada sección va en su CSS.

   Colores y tipografías salen de los globales de Elementor, con los valores de la
   propuesta como fallback para cuando la agencia no los tenga cargados:
   - color:  accent = dorado #B6905B, text = tinta #2C2A26, primary = verde #2B362A
   - fuente: primary = "Playfair Display" (titulares), text/secondary/accent =
             "Montserrat" (cuerpo, etiquetas y botones)
   El eyebrow manuscrito es la excepción y va fijo en "Parisienne": Elementor sólo
   define cuatro roles tipográficos y ninguno es cursivo/display. */

.gpf-section-head-11 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 56px;
    text-align: center;
}

.gpf-section-head-11 .elementor-heading-title,
.gpf-section-head-11 h2 {
    margin: 0 0 14px;
    color: var(--e-global-color-text, #2C2A26);
    font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), serif;
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1.2;
}

.gpf-section-head-11 p {
    margin: 0;
    color: var(--e-global-color-text, #5C584F);
    font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0.85;
}

.gpf-eyebrow-11 {
    display: block;
    margin-bottom: 6px;
    color: var(--e-global-color-accent, #B6905B);
    font-family: "Parisienne", cursive;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .gpf-section-head-11 {
        margin-bottom: 40px;
    }

    .gpf-section-head-11 .elementor-heading-title,
    .gpf-section-head-11 h2 {
        font-size: 1.8rem;
    }

    .gpf-eyebrow-11 {
        font-size: 1.55rem;
    }
}

/* Encabezado opcional de las grillas de tarjetas ([gpf_section_services_card]):
   la grilla ya trae su propio padding-top, aquí sólo se separa del bloque anterior. */
.gpf-cards-head {
    padding-top: 110px;
}

@media (max-width: 767px) {
    .gpf-cards-head {
        padding-top: 70px;
    }
}