/* ═══════════════════════════════════════════════════════════════════
   SAC Fly · CTA BAND
   Generado al partir components.css — NO editar a mano sin criterio.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   8. CTA BAND
   ═══════════════════════════════════════════════════════════════════ */

.comp-cta-band {
    position: relative;
    padding-block: clamp(48px, 7vw, 88px);
    overflow: hidden;
}

.comp-cta-band--gradient-blue {
    background: var(--comp-gradient-blue);
}

.comp-cta-band--gradient-dark {
    background: var(--comp-gradient-dark);
}

.comp-cta-band--brand-accent {
    background: linear-gradient(135deg, var(--color-brand-accent) 0%, #d94f2b 55%, var(--color-brand-primary) 100%);
}

.comp-cta-band--light {
    background:
        radial-gradient(circle at top left, rgba(64, 84, 129, .08), transparent 34%),
        var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.comp-cta-band--gradient-blue::before,
.comp-cta-band--gradient-dark::before,
.comp-cta-band--brand-accent::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .8;
    mask-image: linear-gradient(to right, rgba(0,0,0,.9), transparent 90%);
    pointer-events: none;
}

.comp-cta-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-7);
}

@media (min-width: 768px) {
    .comp-cta-band__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
    }
}

.comp-cta-band__copy {
    flex: 1;
    max-width: 760px;
}

.comp-cta-band__title {
    margin-bottom: var(--space-3);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.comp-cta-band--gradient-blue .comp-cta-band__title,
.comp-cta-band--gradient-dark .comp-cta-band__title,
.comp-cta-band--brand-accent .comp-cta-band__title {
    color: var(--color-white);
}

.comp-cta-band__subtitle {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.7;
}

.comp-cta-band--gradient-blue .comp-cta-band__subtitle,
.comp-cta-band--gradient-dark .comp-cta-band__subtitle,
.comp-cta-band--brand-accent .comp-cta-band__subtitle {
    color: rgba(255, 255, 255, .78);
}

.comp-cta-band__actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--space-3);
    width: 100%;
}

@media (min-width: 520px) {
    .comp-cta-band__actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
    }
}

.comp-cta-band__actions .btn {
    justify-content: center;
}

.comp-cta-band--gradient-blue .comp-cta-band__btn-ghost,
.comp-cta-band--gradient-dark .comp-cta-band__btn-ghost,
.comp-cta-band--brand-accent .comp-cta-band__btn-ghost {
    border-color: rgba(255, 255, 255, .42);
    color: rgba(255, 255, 255, .92);
}

.comp-cta-band--gradient-blue .comp-cta-band__btn-ghost:hover,
.comp-cta-band--gradient-dark .comp-cta-band__btn-ghost:hover,
.comp-cta-band--brand-accent .comp-cta-band__btn-ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .62);
    color: var(--color-white);
}