/**
 * COMPONENTS / SECTION HEADING
 * -----------------------------------------------------------------------------
 * Encabezado estándar de sección: kicker + título + bajada opcional.
 *
 *   <header class="section-heading">
 *       <span class="kicker">NUESTROS SERVICIOS</span>
 *       <h2>Soluciones eléctricas de <em>alto rendimiento</em></h2>
 *       <p class="section-heading__text">Bajada opcional</p>
 *   </header>
 *
 * Con acción a la derecha (ej. "Ver toda la tienda"):
 *
 *   <div class="section-bar">
 *       <header class="section-heading"> ... </header>
 *       <a class="btn btn-navy"> ... </a>
 *   </div>
 */

.section-heading {
    max-width: 640px;
    margin-bottom: 44px;
}

.section-heading h2 {
    font-size: var(--fs-h2);
}

.section-heading__text {
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    margin-top: var(--space-sm);
}

/* Variante centrada */
.section-heading--center {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

/* --- Kicker ------------------------------------------------------------ */

.kicker {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: var(--space-sm);
}

.is-dark .kicker {
    color: var(--blue-light);
}

/* --- Barra: encabezado + acción ---------------------------------------- */

.section-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.section-bar .section-heading {
    margin-bottom: 0;
}

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

@media (max-width: 700px) {

    .section-heading {
        margin-bottom: var(--space-lg);
    }

    .section-bar {
        margin-bottom: var(--space-lg);
    }
}