/* ═══════════════════════════════════════════════════════════
   cta_primary.css — Componente "CTA Final", reutilizável em
   qualquer página (pages.md prevê repetir até 3x por página).
   Reaproveita a classe .btn (definida em hero.css) — por isso,
   se o hero for removido de alguma página futura, .btn precisa
   continuar disponível globalmente (mover para global.css nesse
   caso).
   Bloco a 90% da largura, centralizado, cantos arredondados, fundo
   em gradiente verde (escuro → verde da marca) com textura granulada
   (ruído SVG estático, sem imagem externa nem animação).
═══════════════════════════════════════════════════════════ */

.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 90%;
  max-width: 1260px;
  margin: 0 auto 64px;
  padding: 88px var(--pad) 96px;
  border-radius: 28px;
  text-align: center;
  background-color: #04201e;
  background-image: linear-gradient(135deg, #04201e 0%, #0a4a46 55%, #0e817b 100%);
}

/* Granulado: ruído fractal em overlay, por cima do gradiente e atrás do texto */
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.cta-final-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

/* Pill do Google acima do título */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.cta-pill svg { flex-shrink: 0; display: block; }

.cta-final-wrap h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 14px;
  text-wrap: balance;
}

.cta-final-wrap p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin-bottom: 32px;
}

/* Botão verde sumiria no fundo verde: aqui ele é branco com texto escuro */
.cta-final-wrap .btn {
  display: inline-flex;
  background: #fff;
  color: #04201e;
  box-shadow: none;
}
.cta-final-wrap .btn:hover {
  background: #E6F4F2;
  box-shadow: none;
}
.cta-final-wrap .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/* ───────────────────────────────────────────────────────────
   RESPONSIVO — CTA FINAL
─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cta-final {
    padding: 56px 20px 64px;
    border-radius: 22px;
    margin-bottom: 48px;
  }
  .cta-final-wrap p { margin-bottom: 24px; }
}

/* Mobile: hero.css limita .btn a 200px; o CTA final precisa de um pouco mais */
@media (max-width: 860px) {
  .cta-final-wrap .btn { max-width: 224px; }
}