/* About 13 — storytelling: imagen + pestañas Historia / Misión / Visión.

   Lo que la agencia configura en el dashboard (/site/style) llega como variables
   `--gpf-story13-*` que la plantilla escribe en el contenedor a partir del kit de
   Elementor: eyebrow (Encabezados → H5), titular (Encabezados → H2), texto (Body) y
   botón (Botones). El fallback de cada var() es el diseño lodge, así que la sección
   se ve igual que la propuesta original mientras la agencia no toque esos campos.

   Sin esto los cambios del dashboard no se veían: Elementor los emite como
   `.elementor-kit-21 h2` o `.elementor-kit-21 .elementor-button` y los selectores
   de esta hoja tienen más especificidad, así que siempre ganaban. */

.elementor-802 .elementor-element.elementor-element-story13 {
    padding: 130px 0 110px;
}

.elementor-802 .elementor-element.elementor-element-story13>.elementor-container {
    max-width: 1240px;
}

.elementor-802 .gpf-story-13__inner {
    display: flex;
    align-items: center;
    gap: 70px;
    width: 100%;
    font-family: var(--gpf-story13-text-font, var(--e-global-typography-text-font-family, "Montserrat")), sans-serif;
}

.elementor-802 .gpf-story-13__media {
    flex: 1 1 45%;
    height: 480px;
    overflow: hidden;
    background-color: #E4E0D8;
}

.elementor-802 .gpf-story-13__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.elementor-802 .gpf-story-13__copy {
    flex: 1 1 55%;
}

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

.elementor-802 .gpf-story-13__copy h2 {
    margin: 0 0 22px;
    color: var(--gpf-story13-title-color, var(--e-global-color-text, #2C2A26));
    font-family: var(--gpf-story13-title-font, var(--e-global-typography-primary-font-family, "Playfair Display")), serif;
    font-size: var(--gpf-story13-title-size, 2.1rem);
    font-weight: 500;
    line-height: 1.2;
}

/* ---------- Pestañas ---------- */

.elementor-802 .gpf-story-13__tabs {
    display: flex;
    gap: 26px;
    margin-bottom: 22px;
    border-bottom: 1px solid #E4E0D8;
}

/* Las pestañas son <button>, así que el estilo global de botones del dashboard
   (`.elementor-kit-N button`) también las alcanza: aquí se redeclara todo lo que
   ese estilo pinta —incluido el radio— para que sigan siendo pestañas y no cajas. */
.elementor-802 .gpf-story-13__tab {
    padding: 0 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    cursor: pointer;
    color: var(--e-global-color-text, #5C584F);
    font-family: var(--e-global-typography-accent-font-family, "Montserrat"), sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.75;
    transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.elementor-802 .gpf-story-13__tab:hover {
    opacity: 1;
}

.elementor-802 .gpf-story-13__tab.is-active {
    border-bottom-color: var(--e-global-color-accent, #B6905B);
    color: var(--e-global-color-text, #2C2A26);
    opacity: 1;
}

.elementor-802 .gpf-story-13__panel {
    display: none;
}

.elementor-802 .gpf-story-13__panel.is-active {
    display: block;
}

.elementor-802 .gpf-story-13__panel,
.elementor-802 .gpf-story-13__panel p {
    margin: 0 0 16px;
    color: var(--gpf-story13-text-color, var(--e-global-color-text, #5C584F));
    font-size: 0.94rem;
    font-weight: 300;
    line-height: 1.8;
    opacity: 0.9;
}

/* ---------- CTA ---------- */

.elementor-802 .gpf-story-13__btn.elementor-button {
    margin-top: 10px;
    padding: var(--gpf-story13-btn-padding, 15px 34px);
    border-style: var(--gpf-story13-btn-border-style, solid);
    border-width: var(--gpf-story13-btn-border-width, 1px);
    border-color: var(--gpf-story13-btn-border-color, var(--e-global-color-text, #2C2A26));
    border-radius: var(--gpf-story13-btn-radius, 0);
    background-color: var(--gpf-story13-btn-background, transparent);
    color: var(--gpf-story13-btn-color, var(--e-global-color-text, #2C2A26));
    fill: var(--gpf-story13-btn-color, var(--e-global-color-text, #2C2A26));
    font-family: var(--gpf-story13-btn-font, var(--e-global-typography-accent-font-family, "Montserrat")), sans-serif;
    font-size: var(--gpf-story13-btn-size, 0.78rem);
    font-weight: var(--gpf-story13-btn-weight, 500);
    letter-spacing: 1.5px;
    text-transform: var(--gpf-story13-btn-transform, uppercase);
    transition: all 0.25s ease;
}

.elementor-802 .gpf-story-13__btn.elementor-button:hover {
    border-color: var(--gpf-story13-btn-hover-border-color, var(--gpf-story13-btn-border-color, var(--e-global-color-text, #2C2A26)));
    background-color: var(--gpf-story13-btn-hover-background, var(--e-global-color-text, #2C2A26));
    color: var(--gpf-story13-btn-hover-color, #FFFFFF);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .elementor-802 .gpf-story-13__inner {
        gap: 40px;
    }

    .elementor-802 .gpf-story-13__media {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .elementor-802 .elementor-element.elementor-element-story13 {
        padding: 80px 0 60px;
    }

    .elementor-802 .gpf-story-13__inner {
        flex-direction: column;
        gap: 32px;
    }

    .elementor-802 .gpf-story-13__media {
        width: 100%;
        height: 320px;
    }

    .elementor-802 .gpf-story-13__eyebrow {
        font-size: var(--gpf-story13-eyebrow-size, 1.55rem);
    }

    .elementor-802 .gpf-story-13__copy h2 {
        font-size: var(--gpf-story13-title-size, 1.7rem);
    }

    .elementor-802 .gpf-story-13__tabs {
        gap: 18px;
    }

    .elementor-802 .gpf-story-13__tab {
        font-size: 0.68rem;
        letter-spacing: 1px;
    }
}