/* ============================================================
   PROTOCOLO MESHMIXER — brilho nos botões de ação
   Carrega DEPOIS do CSS da página, então vence por ordem.
   Não altera cor, texto, tamanho nem posição: só acrescenta luz.
   ============================================================ */

/* ---------- 1. base comum aos botões com gradiente ---------- */
.btn-primary,
.btn-pricing,
.nav-cta,
.faq-cta-btn,
.cta .btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
/* só força bloco onde não há .btn (a landing nova já usa inline-flex) */
.btn-primary:not(.btn),
.btn-secondary:not(.btn),
.nav-cta:not(.btn){display:inline-block;}

/* o brilho que atravessa o botão */
.btn-primary::after,
.btn-pricing::after,
.nav-cta::after,
.faq-cta-btn::after,
.cta .btn::after{
  content:'';
  position:absolute;
  top:-60%;
  left:-75%;
  width:45%;
  height:220%;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.13) 35%,
    rgba(255,255,255,0.42) 50%,
    rgba(255,255,255,0.13) 65%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-22deg) translateX(0);
  opacity:0;
}

/* o texto do botão fica acima do brilho */
.btn-primary > *,
.btn-pricing > *,
.nav-cta > *,
.faq-cta-btn > *,
.cta .btn > *{position:relative;z-index:2;}

/* ---------- 2. hover: passa a luz + levanta ---------- */
.btn-primary:hover::after,
.nav-cta:hover::after,
.faq-cta-btn:hover::after,
.cta .btn:hover::after{
  animation:pmSweep .72s cubic-bezier(.25,.6,.3,1) forwards;
}
@keyframes pmSweep{
  0%{opacity:0;transform:skewX(-22deg) translateX(0);}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{opacity:0;transform:skewX(-22deg) translateX(420%);}
}

.btn-primary:hover,
.faq-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(230,59,46,0.42),
             0 0 0 1px rgba(232,115,42,0.35);
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(230,59,46,0.40);
}

/* ---------- 3. botão de compra: respira e chama sozinho ---------- */
.btn-pricing{
  animation:pmBreathe 3.4s ease-in-out infinite;
}
/* o card de preço tem overflow:hidden, então o halo usa raio curto
   (cabe no padding do card) somado a um aro interno, que nunca corta */
@keyframes pmBreathe{
  0%,100%{box-shadow:0 4px 14px rgba(22,132,63,0.26),
                     inset 0 0 0 1px rgba(255,255,255,0.10);}
  50%    {box-shadow:0 6px 18px rgba(22,132,63,0.44),
                     0 0 14px 1px rgba(37,180,90,0.30),
                     inset 0 0 0 1px rgba(255,255,255,0.30),
                     inset 0 0 20px rgba(255,255,255,0.10);}
}
/* a luz atravessa a cada ciclo, sem esperar o cursor */
.btn-pricing::after{
  animation:pmSweepLoop 5.2s cubic-bezier(.25,.6,.3,1) infinite;
}
@keyframes pmSweepLoop{
  0%     {opacity:0;transform:skewX(-22deg) translateX(0);}
  4%     {opacity:1;}
  17%    {opacity:1;}
  22%    {opacity:0;transform:skewX(-22deg) translateX(420%);}
  100%   {opacity:0;transform:skewX(-22deg) translateX(420%);}
}
.btn-pricing:hover{
  transform:translateY(-2px) scale(1.012);
  animation-play-state:paused;
  box-shadow:0 8px 22px rgba(22,132,63,0.52),
             0 0 16px 2px rgba(37,180,90,0.36),
             inset 0 0 0 1px rgba(255,255,255,0.38);
}
.btn-pricing:hover::after{
  animation:pmSweep .68s cubic-bezier(.25,.6,.3,1) forwards;
}

/* ---------- 4. botão secundário: borda ciano acende ---------- */
.btn-secondary{
  position:relative;
  transition:all .25s;
}
.btn-secondary:hover{
  border-color:rgba(0,200,212,0.95);
  color:#fff;
  background:rgba(0,200,212,0.09);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,200,212,0.26),
             inset 0 0 18px rgba(0,200,212,0.10);
}

/* ---------- 5. resposta ao clique ---------- */
.btn-primary:active,
.btn-secondary:active,
.nav-cta:active,
.faq-cta-btn:active,
.cta .btn:active{transform:translateY(0) scale(.985);}
.btn-pricing:active{transform:translateY(0) scale(.99);}

/* ---------- 6. foco visível pelo teclado ---------- */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-pricing:focus-visible,
.nav-cta:focus-visible,
.faq-cta-btn:focus-visible,
.cta .btn:focus-visible{
  outline:2px solid var(--cyan,#00C8D4);
  outline-offset:3px;
}

/* ---------- 7. toque: sem hover, mantém a respiração ---------- */
@media (hover:none){
  .btn-primary::after,
  .nav-cta::after,
  .faq-cta-btn::after,
  .cta .btn::after{display:none;}
  .btn-pricing{animation-duration:4.2s;}
}

/* ---------- 8. quem pediu menos movimento, recebe menos ---------- */
@media (prefers-reduced-motion:reduce){
  .btn-pricing,
  .btn-pricing::after,
  .btn-primary::after,
  .nav-cta::after,
  .faq-cta-btn::after,
  .cta .btn::after{animation:none!important;}
  .btn-primary::after,
  .btn-pricing::after,
  .nav-cta::after,
  .faq-cta-btn::after,
  .cta .btn::after{opacity:0;}
  .btn-primary:hover,
  .btn-pricing:hover,
  .btn-secondary:hover,
  .nav-cta:hover,
  .faq-cta-btn:hover,
  .cta .btn:hover{transform:none;}
  /* o realce continua, só não se move */
  .btn-pricing:hover{box-shadow:0 0 16px 2px rgba(37,180,90,0.36),
                                inset 0 0 0 1px rgba(255,255,255,0.34);}
}