/* ══ CTA LANTERNA ═══════════════════════════════════════════
   Sistema único de ação da página. Todo elemento que leva ao
   cadastro usa .cta, e nada além disso usa laranja.

   A assinatura é o halo que respira atrás do botão — uma
   lanterna de papel acesa. Ele mora num ::before com
   transform + opacity (compostos pela GPU), não num
   box-shadow animado, que repintaria a cada quadro.
═════════════════════════════════════════════════════════════ */

.cta {
  /* position sem z-index de propósito: o halo em ::before precisa cair ATRÁS
     do fundo do botão, e um stacking context próprio o traria para a frente */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--lanterna-600);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(10, 31, 27, .8);
  transition: background-color .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease;
  --halo: .34;
}

/* ⚠️ Requisito de container: o halo usa z-index negativo, então ele afunda até
   o stacking context mais próximo. Se o pai opaco não formar um (position +
   z-index, isolation, backdrop-filter...), o brilho some atrás do fundo dele.
   Por isso .form-card e .site-footer levam `isolation: isolate`. */
.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: inherit;
  background: var(--lanterna-500);
  filter: blur(13px);
  animation: cta-lanterna 3.6s ease-in-out infinite;
}

/* A intensidade sai de --halo, não de uma declaração direta de opacity:
   uma animação em curso ganha de qualquer opacity setada no :hover, então
   trocar a variável é a única forma de o hover afetar o brilho. */
@keyframes cta-lanterna {
  0%, 100% { opacity: calc(var(--halo) * .7); transform: scale(.96); }
  50%      { opacity: calc(var(--halo) * 1.5); transform: scale(1.05); }
}

.cta:hover,
.cta:focus-visible { transform: translateY(-2px); --halo: .66; }
.cta:hover::before,
.cta:focus-visible::before { animation-duration: 1.5s; }

.cta:active {
  transform: translateY(1px);
  background: var(--lanterna-700);
  box-shadow: 0 3px 8px -6px rgba(10, 31, 27, .9);
  --halo: .12;
}
.cta:active::before { animation-play-state: paused; }

/* Foco visível sobre fundo claro E escuro: no jade quem aparece é o anel
   branco, no papel é o contorno laranja. Um dos dois sempre tem contraste. */
.cta:focus-visible {
  outline: 3px solid var(--lanterna-600);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), 0 12px 24px -14px rgba(10, 31, 27, .8);
}

/* ── Seta: aponta para onde o clique leva (para baixo, na página) ── */
.cta__orb {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-right: -.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  font-size: .8rem;
  line-height: 1;
  animation: cta-seta 2.6s ease-in-out infinite;
}
.cta:hover .cta__orb,
.cta:focus-visible .cta__orb { animation-duration: 1.1s; background: rgba(255, 255, 255, .34); }

@keyframes cta-seta {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY(2px); }
}

/* ── Tamanhos ── */
.cta--sm { min-height: 2.6rem; padding: .62rem 1.15rem; font-size: .78rem; gap: .4rem; }
.cta--sm .cta__orb { width: 1.2rem; height: 1.2rem; font-size: .7rem; }
.cta--lg { min-height: 3.4rem; padding: 1.1rem 2rem; font-size: 1.02rem; }
.cta--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta::before { animation: none; opacity: .34; transform: none; }
  .cta__orb { animation: none; }
  .cta:hover, .cta:focus-visible, .cta:active { transform: none; }
}