/**
 * Servicios — estilos compartidos para las páginas de servicio
 * Programa Go!, Programas a Medida, Coaching Ejecutivo, Formación
 */

/* ===== IMAGE + TEXT SPLIT SECTION ===== */
.armonia-srv-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}
.armonia-srv-split *, .armonia-srv-split *::before, .armonia-srv-split *::after { box-sizing: border-box; }

.armonia-srv-split__img {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(26, 58, 74, 0.12);
}
.armonia-srv-split__img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(42, 175, 199, 0.15);
    pointer-events: none;
}
.armonia-srv-split__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.armonia-srv-split__img:hover img {
    transform: scale(1.03);
}
.armonia-srv-split__img .armonia-srv-split__accent {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(42, 175, 199, 0.2), rgba(33, 120, 179, 0.15));
    border-radius: 0 0 16px 0;
    z-index: -1;
}

.armonia-srv-split__text .armonia-srv-split__kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--armonia-secondary, #2178B3);
    margin: 0 0 12px;
    padding: 4px 14px;
    background: rgba(33, 120, 179, 0.08);
    border-radius: 20px;
}
.armonia-srv-split__text h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 600;
    color: #1A3A4A;
    margin: 0 0 20px;
    line-height: 1.2;
}
.armonia-srv-split__text p {
    font-size: clamp(15px, 1.3vw, 16px);
    line-height: 1.85;
    color: #555;
    margin: 0 0 16px;
}
.armonia-srv-split__text p:last-child { margin-bottom: 0; }
.armonia-srv-split__text p strong { color: #2AAFC7; }

.armonia-srv-split__highlight {
    margin-top: 20px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(42, 175, 199, 0.08), rgba(42, 175, 199, 0.02));
    border-left: 3px solid #2AAFC7;
    border-radius: 0 10px 10px 0;
    font-size: clamp(14px, 1.2vw, 15px);
    font-weight: 600;
    color: #1A3A4A;
    line-height: 1.7;
}

@media (max-width: 860px) {
    .armonia-srv-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .armonia-srv-split__img {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* ===== FEATURE CARDS WITH ICONS ===== */
.armonia-srv-features {
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}
.armonia-srv-features *, .armonia-srv-features *::before, .armonia-srv-features *::after { box-sizing: border-box; }

.armonia-srv-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(20px, 3vw, 28px);
}

.armonia-srv-features__card {
    background: #fff;
    border-radius: 14px;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid rgba(26, 58, 74, 0.07);
    box-shadow: 0 8px 32px rgba(26, 58, 74, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
}
.armonia-srv-features__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(42, 175, 199, 0.12);
}

.armonia-srv-features__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2AAFC7, #1A8FA8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 6px 20px rgba(42, 175, 199, 0.3);
}
.armonia-srv-features__icon svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.armonia-srv-features__card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 700;
    color: #1A3A4A;
    margin: 0 0 12px;
    line-height: 1.3;
}
.armonia-srv-features__card p {
    font-size: clamp(13px, 1.1vw, 14.5px);
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Variante acento azul (clase legacy --green) */
.armonia-srv-features__card--green .armonia-srv-features__icon {
    background: linear-gradient(145deg, var(--armonia-secondary, #2178B3), var(--armonia-secondary-dark, #185E94));
    box-shadow: 0 6px 20px rgba(33, 120, 179, 0.28);
}

/* ===== NUMBERED FEATURE LIST (vertical) ===== */
.armonia-srv-numlist {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
    counter-reset: srv-num;
}
.armonia-srv-numlist__item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid rgba(42, 175, 199, 0.1);
}
.armonia-srv-numlist__item:last-child { border-bottom: none; }

.armonia-srv-numlist__num {
    counter-increment: srv-num;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #2AAFC7, #1A8FA8);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(42, 175, 199, 0.3);
}
.armonia-srv-numlist__num::after { content: counter(srv-num); }

.armonia-srv-numlist__body h4 {
    font-family: 'Josefin Sans', sans-serif;
    color: #2AAFC7;
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 600;
    margin: 2px 0 8px;
}
.armonia-srv-numlist__body p {
    color: #666;
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.75;
    margin: 0;
}

/* ===== CALLOUT / HIGHLIGHT BOX ===== */
.armonia-srv-callout {
    max-width: 800px;
    margin: 30px auto 0;
    padding: clamp(24px, 3vw, 36px);
    background: linear-gradient(135deg, #F5F9FA, #EDF6F8);
    border-radius: 16px;
    border: 1px solid rgba(42, 175, 199, 0.15);
    display: flex;
    gap: 20px;
    align-items: flex-start;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}
.armonia-srv-callout__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(145deg, #2AAFC7, #1A8FA8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(42, 175, 199, 0.3);
}
.armonia-srv-callout__icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.armonia-srv-callout p {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    color: #444;
    margin: 0;
}
.armonia-srv-callout p strong { color: #1A3A4A; }

@media (max-width: 600px) {
    .armonia-srv-callout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===== STAT / BENEFIT BADGES ===== */
.armonia-srv-badges {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
}
.armonia-srv-badges__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(42, 175, 199, 0.06);
    border: 1px solid rgba(42, 175, 199, 0.15);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #1A3A4A;
}
.armonia-srv-badges__item svg {
    width: 16px;
    height: 16px;
    stroke: #2AAFC7;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== ICF QUOTE (for Coaching Ejecutivo) ===== */
.armonia-srv-quote-block {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}
.armonia-srv-quote-block__inner {
    position: relative;
    padding: clamp(32px, 4vw, 48px);
    background: #fff;
    border-radius: 16px;
    border-left: 5px solid var(--armonia-secondary, #2178B3);
    box-shadow: 0 12px 48px rgba(26, 58, 74, 0.08);
    overflow: hidden;
}
.armonia-srv-quote-block__inner::before {
    content: '\201C';
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(80px, 12vw, 120px);
    line-height: 0.5;
    color: rgba(33, 120, 179, 0.08);
    position: absolute;
    top: 16px;
    left: 20px;
    pointer-events: none;
}
.armonia-srv-quote-block__source {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.armonia-srv-quote-block__badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(33, 120, 179, 0.1);
    color: var(--armonia-secondary, #2178B3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 20px;
}
.armonia-srv-quote-block__inner p {
    font-size: clamp(14px, 1.2vw, 15.5px);
    line-height: 1.85;
    color: #555;
    font-style: italic;
    margin: 0 0 16px;
}
.armonia-srv-quote-block__inner p:last-child { margin-bottom: 0; }

/* ===== TWO-COLUMN TEXT + FEATURES MIX ===== */
.armonia-srv-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 48px);
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}
.armonia-srv-duo__col p {
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.85;
    color: #555;
    margin: 0 0 16px;
}
.armonia-srv-duo__col p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .armonia-srv-duo { grid-template-columns: 1fr; }
}

/* ===== BANNER STRIP (highlight mid-page) ===== */
.armonia-srv-banner {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px);
    background: linear-gradient(135deg, #1A3A4A 0%, #0D2A36 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}
.armonia-srv-banner__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2AAFC7, #7EDCE8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.armonia-srv-banner__icon svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.armonia-srv-banner p {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
}
.armonia-srv-banner p strong { color: #7EDCE8; }

@media (max-width: 600px) {
    .armonia-srv-banner {
        flex-direction: column;
        text-align: center;
        padding: clamp(20px, 4vw, 28px) clamp(18px, 4vw, 24px);
    }
}

@media (max-width: 480px) {
    .armonia-srv-quote-block__inner {
        padding: clamp(22px, 4vw, 32px) clamp(18px, 4vw, 28px);
    }
}

/**
 * Formación — «Áreas de Formación»: el apilado en móvil/tablet va en wp_footer (functions.php)
 * para ganar a estilos en línea de Elementor. Aquí solo refuerzo escritorio / caja ancha.
 */
body.armonia-page-formacion .elementor-widget-text-editor .elementor-text-editor div.armonia-formacion-areas-grid,
body.armonia-page-formacion .elementor-widget-text-editor .elementor-text-editor div[style*='max-width:1000px'][style*='grid-template-columns'],
body.armonia-page-formacion .elementor-widget-text-editor .elementor-text-editor div[style*='max-width: 1000px'][style*='grid-template-columns'] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* ===== CTA final (*-cta): compacto (padding sección, título, spacer, botones) =====
 * Servicios: pgo-cta, pam-cta, ce-cta, form-cta — AYL: ayl-cta — Metodología: metod-cta.
 * También .armonia-srv-cta-compact (PHP) en otras páginas. */

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact.elementor-section,
        section.elementor-section.armonia-srv-cta-compact
    ) {
    padding-top: clamp(26px, 4.5vw, 44px) !important;
    padding-bottom: clamp(26px, 4.5vw, 44px) !important;
    padding-left: clamp(18px, 3.5vw, 36px) !important;
    padding-right: clamp(18px, 3.5vw, 36px) !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-container
    .elementor-column
    > .elementor-widget-wrap,
:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .e-con-inner
    > .e-child
    > .elementor-widget-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-container
    .elementor-column
    > .elementor-widget-wrap
    > .elementor-widget,
:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .e-con-inner
    > .e-child
    > .elementor-widget-wrap
    > .elementor-widget {
    margin-block: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-heading {
    margin-bottom: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-heading
    .elementor-widget-container {
    margin-bottom: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-heading-title {
    margin-bottom: 0 !important;
}

/* Texto intermedio (p. ej. ayl-cta-desc) sin márgenes Elementor extra */
:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-text-editor {
    margin-block: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-text-editor
    .elementor-widget-container {
    margin-bottom: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-text-editor
    .elementor-text-editor
    p:last-child {
    margin-bottom: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-button
    .elementor-button {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: clamp(14px, 3.2vw, 26px) !important;
    padding-right: clamp(14px, 3.2vw, 26px) !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-spacer {
    margin-block: 0 !important;
}

:is(
        .elementor-element-pgo-cta,
        .elementor-element-pam-cta,
        .elementor-element-ce-cta,
        .elementor-element-form-cta,
        .elementor-element-ayl-cta,
        .elementor-element-metod-cta,
        .armonia-srv-cta-compact
    )
    .elementor-widget-spacer
    .elementor-spacer-inner {
    height: 6px !important;
    max-height: 6px !important;
    min-height: 0 !important;
}

@media (max-width: 600px) {
    :is(
            .elementor-element-pgo-cta,
            .elementor-element-pam-cta,
            .elementor-element-ce-cta,
            .elementor-element-form-cta,
            .elementor-element-ayl-cta,
            .elementor-element-metod-cta,
            .armonia-srv-cta-compact
        )
        .elementor-container
        .elementor-column
        > .elementor-widget-wrap,
    :is(
            .elementor-element-pgo-cta,
            .elementor-element-pam-cta,
            .elementor-element-ce-cta,
            .elementor-element-form-cta,
            .elementor-element-ayl-cta,
            .elementor-element-metod-cta,
            .armonia-srv-cta-compact
        )
        .e-con-inner
        > .e-child
        > .elementor-widget-wrap {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    :is(
            .elementor-element-pgo-cta,
            .elementor-element-pam-cta,
            .elementor-element-ce-cta,
            .elementor-element-form-cta,
            .elementor-element-ayl-cta,
            .elementor-element-metod-cta,
            .armonia-srv-cta-compact
        )
        .elementor-widget-button
        .elementor-button {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* m-cta-desc / ayl-cta-desc: fila completa en el flex del CTA (no compartir línea con el botón).
 * Si el editor comparte fila con «CONTACTAR», el ancho útil es ~mitad del bloque y el párrafo salta a 2 líneas. */
@media (min-width: 601px) {
    .elementor-element-metod-cta .elementor-container .elementor-column > .elementor-widget-wrap > .elementor-element-m-cta-desc,
    .elementor-element-metod-cta .e-con-inner > .e-child > .elementor-widget-wrap > .elementor-element-m-cta-desc,
    .elementor-element-ayl-cta .elementor-container .elementor-column > .elementor-widget-wrap > .elementor-element-ayl-cta-desc,
    .elementor-element-ayl-cta .e-con-inner > .e-child > .elementor-widget-wrap > .elementor-element-ayl-cta-desc {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Metodología (m-cta-desc) / Armonía y Liderazgo (ayl-cta-desc): una sola línea donde quepa el viewport */
@media (min-width: 768px) {
    .elementor-element-m-cta-desc .elementor-widget-container,
    .elementor-element-ayl-cta-desc .elementor-widget-container {
        max-width: min(1120px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .elementor-element-m-cta-desc .elementor-text-editor,
    .elementor-element-m-cta-desc .elementor-text-editor p,
    .elementor-element-ayl-cta-desc .elementor-text-editor,
    .elementor-element-ayl-cta-desc .elementor-text-editor p {
        white-space: nowrap !important;
        text-align: center;
        margin-bottom: 0;
        font-size: clamp(14px, 1.15vw, 18px);
        line-height: 1.45;
    }
}