/**
 * COMPONENTS / CTA
 * -----------------------------------------------------------------------------
 * Banda de cierre oscura con título, bajada, botón y teléfono/WhatsApp.
 * Se repite al final de todas las páginas del sitio.
 *
 *   <section class="cta-band section--glow is-dark">
 *       <div class="container section__inner cta-band__grid"> … </div>
 *   </section>
 */

.cta-band {
    position: relative;
    background: var(--gradient-cta);
    color: var(--white);
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--glow-cta);
    pointer-events: none;
}

.cta-band__grid {
    position: relative;
    z-index: var(--z-content);
    padding-block: 60px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
}

.cta-band h2 {
    font-size: clamp(28px, 3.6vw, 38px);
    line-height: 1.12;
    margin-bottom: var(--space-sm);
}

.cta-band p {
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--on-dark-muted);
    max-width: 440px;
}

.cta-band__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

/* --- Teléfono destacado ------------------------------------------------ */

.cta-phone {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--on-dark);
    transition: var(--transition);
}

.cta-phone:hover {
    color: var(--white);
}

.cta-phone__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    background: var(--whatsapp);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta-phone__icon svg {
    width: 20px;
    height: 20px;
}

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

@media (max-width: 1000px) {

    .cta-band__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 700px) {

    .cta-band__grid {
        padding-block: var(--section-padding-md);
    }

    .cta-band__actions .btn {
        width: 100%;
    }
}