/* ==========================================================================
   OITAVA SEÇÃO — "CTA final"
   Consome exclusivamente tokens de css/design-system.css.

   Decisão estrutural: esta seção ecoa o Hero (hero.css) — coluna única,
   eyebrow + H2 + texto + ações, alinhado à esquerda — em vez do grid
   1fr/1.5fr usado por how-it-works.css/about.css/practical-info.css/
   faq.css. Faz sentido editorialmente (é o fechamento da jornada que o
   Hero abre) e também estruturalmente: não há um "corpo" de conteúdo
   longo o bastante para justificar uma segunda coluna, só um parágrafo
   curto — o mesmo formato do Hero, não o das seções de conteúdo.

   .btn, .btn-primary e .btn-secondary já existem prontos; nenhum estilo
   de botão novo foi criado aqui. O bloco de ações reaproveita, regra
   por regra, .hero__actions (ver hero.css) — mesmo comportamento
   empilhado no mobile / lado a lado a partir de 768px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TRANSIÇÃO — volta para --color-bg (off-white), fechando o ritmo
   off-white / branco que se repete desde o Hero (Hero, Como funciona,
   Informações práticas = off-white; Quando procurar, Sobre, Dúvidas =
   branco). Mesma linha fina superior em --color-border já usada em
   todas as transições anteriores.
   -------------------------------------------------------------------------- */
.final-cta {
  background-color: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-section);
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   EYEBROW + H2 — mesmas regras de .hero__eyebrow e do H1 (herdado da
   regra global "h1, h2, h3"); só a margem inferior do heading muda
   porque aqui, ao contrário de about/practical-info/faq, o texto que
   segue está na mesma coluna (não numa segunda coluna do grid), então
   precisa do mesmo respiro que o Hero já usa entre H1 e o texto de
   apoio.
   -------------------------------------------------------------------------- */
.final-cta__eyebrow {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-secundario);
  font-weight: var(--weight-body-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-secondary);
}

.final-cta__heading {
  margin: 0 0 var(--space-lg);
}

/* --------------------------------------------------------------------------
   TEXTO — mesma escala/cor de .hero__lead (--text-body sobre
   --color-text-secundario). max-width em `ch`, mesma técnica do Hero,
   para não deixar duas frases curtas esticadas pela largura toda do
   container.
   -------------------------------------------------------------------------- */
.final-cta__lead {
  max-width: 50ch;
  margin: 0 0 var(--space-xl);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secundario);
}

/* --------------------------------------------------------------------------
   AÇÕES — cópia estrutural de .hero__actions (hero.css): empilhados por
   padrão (mobile-first), lado a lado a partir de 768px (mesmo
   breakpoint já usado em toda a Home), botão a 100% no mobile e largura
   automática a partir do breakpoint.
   -------------------------------------------------------------------------- */
.final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.final-cta__actions .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .final-cta__actions {
    flex-direction: row;
    gap: var(--space-md);
  }

  .final-cta__actions .btn {
    width: auto;
  }
}