/* =============================================================================
   TAKA DESIGN — CTA FINAL / PRÓXIMO PASSO
   -----------------------------------------------------------------------------
   Carregue depois de passage.css (consome .spectrum-rule--v em nenhum lugar
   deste arquivo — ver a nota "SEM COSTURA" abaixo — mas a ordem de carga do
   site sempre respeita a ordem do documento) e depois de portfolio.css, que é
   a dobra anterior no fluxo.

   Tudo aqui vem do Design System PRISMA. Nenhum token novo de cor, tipografia,
   raio, sombra, espaçamento ou motion é criado:
     · .badge badge-pill badge-emerald → cabeçalho numerado ("0X · Nome da
                                         seção"); esmeralda é o próximo da
                                         sequência do --ds-spectrum depois do
                                         âmbar (Portfólio) — o Contato (05)
                                         ainda não existe como dobra própria
                                         (decisão do usuário, ver memória do
                                         projeto), então o próximo eyebrow
                                         construído é "06 · PRÓXIMO PASSO"
     · .btn btn-neon btn-lg            → EXATAMENTE o botão da Hero, sem
                                         variante nova — o mesmo apelo visual
                                         repetido no fechamento, de propósito
     · .aurora aurora-cool             → mesma atmosfera "fria" de Serviços/
                                         Processo
     · .spectrum-rule                  → a régua que abre a dobra, mesmo
                                         gesto de .trust__rule
     · .text-spectrum                  → o mesmo acento de "IA de verdade"
                                         (Sobre)
     · .t-h2 / .t-body-lg / .t-label / .t-caption

   SEM COSTURA COM O PORTFÓLIO, DE PROPÓSITO
   O Portfólio fecha com uma régua horizontal e uma nota de crescimento — um
   ponto final, não um fio solto (ver ".portfolio__foot" em portfolio.css).
   Construir aqui uma linha que "puxa" dali exigiria mexer em portfolio.css/
   portfolio.js — uma dobra já aprovada — só para servir a esta. Em vez disso
   esta dobra abre sozinha, do mesmo jeito que a Barra de Confiança abre com a
   própria .trust__rule: a régua nasce aqui, do centro para as bordas.

   UMA SEÇÃO, UM OBJETIVO
   O pedido era uma dobra "direta e de alta conversão": eyebrow, H2, corpo e
   um único botão. Sem segundo CTA, sem cartões, sem prova social nova.
   ============================================================================= */

.cta-final {
  --cta-lead: clamp(5rem, 12vh, 8rem);
  --cta-tail: clamp(5rem, 12vh, 8rem);
  --cta-gap: clamp(1.125rem, 2.6vh, 1.75rem);

  position: relative;
  isolation: isolate;
  background: var(--ds-void);
  padding-block: var(--cta-lead) var(--cta-tail);
  overflow: clip; /* contém a .aurora — mesma política de services/process */
  scroll-margin-top: var(--header-h);
}

/* --- Atmosfera ---------------------------------------------------------- */
.cta-final__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* BUG MEDIDO — o recorte na fronteira com o Portfólio
   -----------------------------------------------------------------------
   A primeira versão herdava só a posição padrão de .aurora (design-system.css:
   inset -20% -10% auto -10%) e subia a opacidade para .55 "para dar
   presença". Resultado medido: como esta seção precisa de `overflow: clip`
   para conter o sangramento lateral (mesma política de services/process), o
   `filter: blur(90px)` do glow é cortado em linha reta bem na borda superior
   — e a essa opacidade o corte lia como uma emenda, não como atmosfera.
   Nenhuma outra dobra do site sobe a opacidade da própria .aurora acima de
   .34 nem a deixa sem mask-image (about/services/process/portfolio sempre
   afastam o glow da aresta visível ou o mascaram); a mesma receita aqui:
   opacidade baixa + mask-image que zera o alfa MUITO antes do glow alcançar
   a borda cortada pelo clip, então a cor nasce como respiro, não como bloco. */
.cta-final__aurora {
  inset: -18% -10% auto -10%;
  height: 460px;
  opacity: .28;
  -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 78%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 45%, #000 78%, #000 100%);
}

/* --- Composição ----------------------------------------------------------
   Um único bloco centralizado: nenhuma grade de duas colunas, nenhuma
   composição lateral — a atenção não pode se dividir na dobra de fechamento. */
.cta-final__inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap);
  text-align: center;
}

/* A lâmina que abre a dobra — mesmo gesto de .trust__rule (a régua espectral
   nasce do centro), mas mais curta: aqui ela é pontuação, não protagonista. */
.cta-final__rule {
  width: min(8rem, 40%);
  margin: 0 0 clamp(.25rem, 1.4vh, .75rem);
}

.cta-final__eyebrow { margin: 0; }

.cta-final__headline { margin: 0; color: #fff; }

/* Mesma técnica de about__line/services__line/process__line/portfolio__line:
   padding-bottom + margin-bottom negativos evitam cortar descendentes (g, p,
   q) durante o translateY de entrada, sem alterar a métrica visual da linha. */
.cta-final__line {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.cta-final__line > span { display: block; }

.cta-final__accent { font-style: normal; }

.cta-final__body {
  margin: 0;
  color: rgba(255, 255, 255, .64);
  max-width: 38ch;
}

.cta-final__action { margin-top: clamp(.25rem, 1.4vh, .75rem); }

/* Invólucro do "ímã": cta-final.js translada ESTE elemento (nunca o .btn-neon
   diretamente), para não disputar transform com .btn-neon:hover, que já move
   o botão em translateY(-3px) sozinho (design-system.css). Os dois efeitos
   compõem porque vivem em elementos diferentes: o ímã desloca o invólucro, o
   hover levanta o botão dentro dele. */
.cta-final__magnet {
  display: inline-block;
}

@media (max-width: 899px) {
  .cta-final {
    --cta-lead: clamp(3.5rem, 10vh, 5.5rem);
    --cta-tail: clamp(3.5rem, 10vh, 5.5rem);
  }
  .cta-final__inner { max-width: 30rem; }
}

/* Sem prefers-reduced-motion aqui: nenhuma regra acima anima nada por conta
   própria (toda a entrada é escrita por cta-final.js, que já sai sem tocar
   no DOM quando o movimento é reduzido — mesmo princípio de about.js/
   services.js/process.js/portfolio.js). */