/* ============ EFEITOS ============ */
@keyframes fxUp{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes fxLeft{from{opacity:0;translate:-50px 0}to{opacity:1;translate:0 0}}
@keyframes fxPop{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.05}100%{opacity:1;scale:1}}
@keyframes fxPhoto{from{opacity:0;translate:0 60px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes fxFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes fxBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes fxNeon{0%,100%{opacity:.55}45%{opacity:.75}50%{opacity:.35}55%{opacity:.7}}
@keyframes fxShine{0%{left:-60%}60%,100%{left:130%}}
@keyframes fxGlow{0%,100%{box-shadow:0 30px 80px rgba(2,10,40,.55),0 0 0 1px rgba(255,255,255,.08),0 0 0 0 rgba(120,170,255,0)}50%{box-shadow:0 30px 80px rgba(2,10,40,.55),0 0 0 1px rgba(255,255,255,.12),0 0 60px 6px rgba(120,170,255,.35)}}
@keyframes fxRed{0%{box-shadow:inset 0 1px 0 rgba(255,90,50,.75),0 -6px 24px -12px rgba(255,70,30,.6)}40%{box-shadow:inset 0 1px 0 rgba(255,120,80,1),0 0 40px 2px rgba(255,70,30,.45)}100%{box-shadow:inset 0 1px 0 rgba(255,90,50,.75),0 -6px 24px -12px rgba(255,70,30,.6)}}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(20,102,255,.55)}70%{box-shadow:0 0 0 16px rgba(20,102,255,0)}100%{box-shadow:0 0 0 0 rgba(20,102,255,0)}}
@media (prefers-reduced-motion:no-preference){
  /* topo: entrada ao abrir a página (transições disparadas pelo JS) */
  .js-anim #topo .eyebrow,.js-anim #topo h1,.js-anim #topo>p.abs,.js-anim #topo>.hero-btns,.js-anim .logos>img,.js-anim #topo img.abs,.js-anim #numeros{opacity:0;translate:0 36px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),scale .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .js-anim #topo .eyebrow{translate:-50px 0}
  .js-anim #topo img.abs{translate:0 60px;scale:.96}
  .js-anim #topo .glass{opacity:0;scale:.6;transition:opacity .6s,scale .7s cubic-bezier(.3,1.4,.5,1);transition-delay:var(--d,0s)}
  .hero-in #topo .eyebrow,.hero-in #topo h1,.hero-in #topo>p.abs,.hero-in #topo>.hero-btns,.hero-in .logos>img,.hero-in #topo img.abs,.hero-in #numeros{opacity:1;translate:0 0;scale:1}
  .hero-in #topo .glass{opacity:1;scale:1}
  #topo .glass.floating{animation:fxFloat 6s ease-in-out infinite}
  .logos>img.bob{animation:fxBob 3.2s ease-in-out infinite}
  #topo .deco,#formulario .deco{animation:fxNeon 4.5s ease-in-out infinite}
  .fx-bar{scale:1 0;transform-origin:50% 100%;transition:scale .7s cubic-bezier(.2,.7,.2,1)}
  .fx-bar.on{scale:1 1}
  .fx-line{transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
  .fx-area{opacity:0;transition:opacity 1.2s .9s}
  .fx-area.on{opacity:1}
  /* CTAs chamam atenção */
  .shine{position:relative;overflow:hidden}
  .shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:fxShine 3.6s ease-in-out infinite;pointer-events:none}
  .pulse{animation:fxPulse 2.4s infinite}
  /* rolagem: cada seção com seu efeito */
  .rv{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),scale .8s cubic-bezier(.2,.7,.2,1),rotate .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .rv.up{translate:0 50px}
  .rv.left{translate:-70px 0}
  .rv.right{translate:70px 0}
  .rv.zoom{scale:.88}
  .rv.tilt{translate:0 40px;rotate:-2deg}
  .rv.in{opacity:1;translate:0 0;scale:1;rotate:0deg}
  .rcard.in{animation:fxRed 1.4s var(--d,0s) ease-out}
  #qteaser.in{animation:fxGlow 3.2s ease-in-out infinite}
}
/* ============ EFEITOS 2: CTAs e página viva ============ */
@keyframes fxRing{0%{box-shadow:0 0 0 0 rgba(47,134,255,.7),0 10px 30px rgba(20,102,255,.45)}70%{box-shadow:0 0 0 18px rgba(47,134,255,0),0 10px 30px rgba(20,102,255,.45)}100%{box-shadow:0 0 0 0 rgba(47,134,255,0),0 10px 30px rgba(20,102,255,.45)}}
@keyframes fxBreath{0%,100%{scale:1}50%{scale:1.035}}
@keyframes fxGrad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes fxNudge{0%,100%{translate:0 0}50%{translate:5px 0}}
@keyframes fxBorder{0%,100%{border-color:#2fb6c0;box-shadow:0 0 0 rgba(47,182,192,0)}50%{border-color:#6ff0f5;box-shadow:0 0 22px rgba(47,182,192,.45)}}
@keyframes fxShimmer{0%{background-position:0% 50%}100%{background-position:-200% 50%}}
@keyframes fxOrb{0%,100%{translate:0 0;scale:1}33%{translate:120px -60px;scale:1.15}66%{translate:-100px 40px;scale:.9}}
@keyframes fxWiggle{0%,100%{rotate:0deg}25%{rotate:-10deg}75%{rotate:10deg}}
@keyframes fxGlowNum{0%,100%{text-shadow:0 0 0 rgba(47,134,255,0)}50%{text-shadow:0 0 24px rgba(47,134,255,.8)}}
#progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;scale:0 1;background:linear-gradient(90deg,#1466ff,#6fb0ff,#2fb6c0);z-index:130;box-shadow:0 0 12px rgba(47,134,255,.8);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  /* botões de ação: gradiente em movimento + anel pulsando + respiração + seta empurrando */
  a.btnp,#mcta,.qz-ok:not(:disabled){background-image:linear-gradient(100deg,#1466ff 0%,#2f86ff 25%,#5aa2ff 50%,#2f86ff 75%,#1466ff 100%)!important;background-size:200% 100%!important;animation:fxGrad 3s linear infinite,fxRing 2s ease-out infinite!important}
  a.btnp.pulse{animation:fxGrad 3s linear infinite,fxRing 1.6s ease-out infinite,fxBreath 1.6s ease-in-out infinite!important}
  a.btnp svg,#mcta svg,.qz-ok svg{animation:fxNudge 1.2s ease-in-out infinite}
  a.btnp:hover,#mcta:hover{scale:1.05;filter:brightness(1.12)}
  a.btno{animation:fxBorder 2.4s ease-in-out infinite}
  a.btno:hover{scale:1.04}
  #qteaser .qz-opt{animation:fxBorder 2.8s ease-in-out infinite}
  #qteaser .qz-opt:nth-child(2){animation-delay:1.4s}
  #wafloat{animation:fxRing 2s ease-out infinite}
  /* texto azul dos títulos com brilho correndo */
  .fx-shimmer{background:linear-gradient(90deg,#1f7bff 0%,#1f7bff 35%,#9fd0ff 50%,#1f7bff 65%,#1f7bff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShimmer 3.5s linear infinite}
  .fx-shimmer.light{background-image:linear-gradient(90deg,#9fd0ff 0%,#9fd0ff 35%,#ffffff 50%,#9fd0ff 65%,#9fd0ff 100%)}
  /* números com brilho pulsando */
  .stat .n{animation:fxGlowNum 3s ease-in-out infinite}
  .stat:nth-child(2) .n{animation-delay:1s}.stat:nth-child(3) .n{animation-delay:2s}
  /* luzes flutuando no fundo das seções escuras */
  #video::before,#depoimentos::before,#problemas::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none;animation:fxOrb 18s ease-in-out infinite;z-index:0}
  #video::before{left:8%;top:30%;background:#1a5cff}
  #depoimentos::before{right:6%;top:20%;background:#2f6bff;animation-duration:22s}
  #problemas::before{left:40%;bottom:-10%;background:#ff3a1a;opacity:.18;animation-duration:20s}
  /* ícones dos problemas balançam ao passar o mouse */
  .rcard:hover .ic{animation:fxWiggle .5s ease-in-out}
  .pcard:hover .ic{animation:fxWiggle .5s ease-in-out}
  /* luz que segue o mouse no topo */
  #topo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),rgba(60,130,255,.16),transparent 60%);transition:background .1s}
  .fx-tilt{transition:transform .15s ease-out}
}
#fx-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
