/* ==========================================================================
   CTA Associe-se
   Componente A: .cta-sidebar   — card da sidebar
   Componente B: .cta-footer    — seção pré-rodapé full-width
   ========================================================================== */

/* ── Componente A: Sidebar ─────────────────────────────────────────────── */

.cta-sidebar {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-l);
}

.cta-sidebar__link {
    display: block;
    line-height: 0; /* remove espaço inline abaixo da imagem */
}

.cta-sidebar__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--corner-s);
}

.cta-sidebar__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--corner-s);
}


/* ── Componente B: Pré-rodapé ──────────────────────────────────────────── */

/* Container full-width com degradê do hero como fundo */


.cta-footer {
    background: linear-gradient(
        270deg,
        #0d3d35 0%,
        #1a9bbf 60%,
        #2ecfda 100%
    );
    padding-block: var(--space-10, 2.5rem);
}

/* Card interno com degradê próprio do CTA */
.cta-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8, 2rem);
    background: linear-gradient(
        90deg,
        #0d3d35 0%,
        #1a9bbf 60%,
        #2ecfda 100%
    );
    border-radius: var(--corner-md);
    padding: 2.5rem 10rem;
}

.cta-footer__texto {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.cta-footer__numero {
    display: block;
    width: auto;
    max-width: 320px;
    height: auto;
}

.cta-footer__legenda {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-white, #fff);
}

.cta-footer__botoes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    flex-shrink: 0;
}

.cta-footer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    min-width: 280px;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    border-radius: var(--corner-md);
    background-color: #f5e630;
    color: #0d1f2d;
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-semibold, 600);
    text-decoration: none;
    transition: filter 0.2s ease;
}

.cta-footer__btn:hover {
    filter: brightness(0.92);
}

.cta-footer__btn:focus-visible {
    outline: 2px solid var(--color-white, #fff);
    outline-offset: 2px;
    border-radius: var(--corner-md);
}

/* Mobile */
@media (max-width: 767px) {