/* ==========================================================================
   FX LAYER v2 — Gabriel Pires · Tráfego Com Pires
   Camada visual compartilhada entre index.html e planos.html.
   Carregada DEPOIS do <style> de cada página: só acrescenta/ajusta.
   Regras de ouro: anima só transform/opacity (ou 1 variável CSS barata),
   nada de blur animado no mobile, tudo desligado em prefers-reduced-motion.
   ========================================================================== */

@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-gold-light:#FFF6D8;
  --fx-sheen:linear-gradient(100deg,var(--gold-solid) 30%,#FFF6D8 50%,var(--gold-solid) 70%);
}

/* --------------------------------------------------------------------------
   1 · ILUMINAÇÃO GLOBAL
   -------------------------------------------------------------------------- */

/* Aurora fixa que "anda" com o scroll (JS move os blobs; só transform) */
.fx-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;will-change:transform}
.fx-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
.fx-aurora .a1{width:90vmax;height:90vmax;left:-35vmax;top:-20vmax;
  background:radial-gradient(closest-side,rgba(2,2,176,.22),rgba(2,2,176,.07) 55%,transparent)}
.fx-aurora .a2{width:70vmax;height:70vmax;right:-30vmax;top:30vh;
  background:radial-gradient(closest-side,rgba(233,197,88,.085),rgba(233,197,88,.03) 55%,transparent)}
.fx-aurora .a3{width:60vmax;height:60vmax;left:10vw;top:70vh;
  background:radial-gradient(closest-side,rgba(10,10,150,.16),transparent)}

/* Luz do cursor (desktop, ponteiro fino). Criada via JS só quando faz sentido. */
.fx-cursor{position:fixed;left:0;top:0;z-index:45;width:620px;height:620px;margin:-310px 0 0 -310px;
  border-radius:50%;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(closest-side,rgba(244,208,63,.075),rgba(2,2,176,.05) 45%,transparent 72%);
  will-change:transform}
.fx-cursor.on{opacity:1}

/* Barra de progresso dourada no header */
.fx-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:var(--gold-grad);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(244,208,63,.55);will-change:transform}

/* Poça de luz no topo de cada seção (JS injeta e acende no scroll) */
.fx-light{position:absolute;z-index:0;left:50%;top:-8%;width:min(1200px,140vw);height:min(760px,90vh);
  transform:translateX(-50%);pointer-events:none;opacity:0;
  background:
    radial-gradient(45% 55% at 50% 30%,rgba(233,197,88,.09),transparent 70%),
    radial-gradient(60% 60% at 50% 20%,rgba(2,2,176,.17),transparent 72%)}
.royal>.fx-light,.final>.fx-light,.clients-stage>.fx-light{position:absolute;z-index:0}
.royal .fx-light{background:radial-gradient(50% 55% at 50% 25%,rgba(233,197,88,.12),transparent 70%)}

/* Raios de luz volumétricos (hero, CTA final, abertura de planos) */
.fx-rays{position:absolute;left:50%;top:50%;width:var(--rays-size,160%);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;opacity:var(--rays-o,.9)}
/* Raios "assados" em textura (sem máscara CSS): girar vira trabalho 100% de GPU */
.fx-rays::before,.fx-rays::after{content:"";position:absolute;inset:0;will-change:transform;
  background:url("./rays-gold.webp") center/100% 100% no-repeat;
  animation:fxRot 110s linear infinite;animation-play-state:paused}
.fx-rays::after{background-image:url("./rays-blue.webp");animation-duration:160s;animation-direction:reverse}
.plans-hero{isolation:isolate}
.fx-rays--hero{width:130%;top:46%}
.fx-rays--final{width:min(880px,150vw);top:58%;--rays-o:.75}
.fx-rays--plans{width:min(940px,170vw);top:34%;--rays-o:.85}
@media(max-width:899px){.fx-rays--hero{width:150%;top:44%}}
.fx-run .fx-rays::before,.fx-run .fx-rays::after,.fx-rays.fx-run::before,.fx-rays.fx-run::after{animation-play-state:running}
@keyframes fxRot{to{rotate:360deg}}

/* --------------------------------------------------------------------------
   2 · CARDS COM LUZ (brilho que segue o mouse/dedo + borda iluminada)
   -------------------------------------------------------------------------- */
.fx-spot{position:relative;isolation:isolate}
.fx-glare{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),
    rgba(233,197,88,.11),rgba(2,2,176,.10) 38%,transparent 68%)}
.fx-glare::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(244,208,63,.85),rgba(244,208,63,.18) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-hot>.fx-glare{opacity:1}

/* Borda com luz girando (cards de destaque) */
.fx-ring{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:conic-gradient(from var(--fx-a),transparent 0 58%,rgba(244,208,63,.0) 60%,
    #B8860B 70%,#F4D03F 78%,#FFF6D8 81%,#E9C558 85%,transparent 93% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:fxSpin 7s linear infinite;animation-play-state:paused;opacity:.95}
.fx-ring.fx-run{animation-play-state:running}
@keyframes fxSpin{to{--fx-a:360deg}}

/* --------------------------------------------------------------------------
   3 · TIPOGRAFIA ANIMADA (SplitText)
   -------------------------------------------------------------------------- */
.fx-line-mask{padding-bottom:.16em;margin-bottom:-.16em;padding-right:.08em;margin-right:-.08em}
.fx-word,.fx-line{will-change:transform}
/* Palavras dentro de trechos dourados carregam o próprio gradiente
   (o background-clip do pai não atravessa filhos animados) */
/* Enquanto o título está dividido, o trecho dourado "pai" não pinta nada
   (senão o navegador desenha um fantasma parado atrás das palavras que sobem) */
.fx-splitting .gold-text{background:none!important;-webkit-text-fill-color:transparent;filter:none!important}
.fx-splitting .em{filter:none!important}
.gold-text .fx-word,.gold-text .fx-line{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-solid)}
.gold-text.fx-shine .fx-word,.gold-text.fx-shine{
  background:var(--fx-sheen);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fxSheen 1.25s ease-out 1}
@keyframes fxSheen{from{background-position:120% 0}to{background-position:-40% 0}}

/* Brilho suave no "Sistema enche." */
.hero h1 .em{filter:drop-shadow(0 0 22px rgba(244,208,63,.28));white-space:nowrap}

/* --------------------------------------------------------------------------
   4 · BOTÕES
   -------------------------------------------------------------------------- */
.btn-gold::after{content:"";position:absolute;top:0;left:0;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-160%) skewX(-18deg);opacity:0}
.btn-gold.fx-shine::after{animation:fxBtnSheen 1.1s cubic-bezier(.4,0,.2,1) 1}
@media(hover:hover){.btn-gold:hover::after{animation:fxBtnSheen .9s ease-out 1}}
@keyframes fxBtnSheen{0%{transform:translateX(-160%) skewX(-18deg);opacity:.95}100%{transform:translateX(360%) skewX(-18deg);opacity:0}}
/* Halo dourado que respira nos CTAs principais (só enquanto visíveis) */
.btn-gold.fx-pulse.fx-run{animation:fxPulse 3.4s ease-in-out infinite}
@keyframes fxPulse{
  0%,100%{box-shadow:0 10px 30px -12px rgba(244,208,63,.55),0 0 0 0 rgba(244,208,63,0),inset 0 1px 0 rgba(255,255,255,.35)}
  50%{box-shadow:0 14px 42px -10px rgba(244,208,63,.8),0 0 34px 2px rgba(244,208,63,.22),inset 0 1px 0 rgba(255,255,255,.4)}}

/* Transição CSS desligada enquanto o GSAP anima (evita "tranco") */
.fx-anim{transition:none!important}

/* --------------------------------------------------------------------------
   5 · DETALHES GRÁFICOS
   -------------------------------------------------------------------------- */
/* Costuras douradas desenham-se ao entrar na tela */
.seam::before{transform:translateX(-50%) scaleX(var(--fx-s,1))}
.seam::after{transform:translateX(-50%) rotate(45deg) scale(var(--fx-d,1))}
/* Espinha do C.A.R.E. (desktop) desenhada pelo scroll */
@media(min-width:760px){
  .care-journey::before{transform:translateX(-50%) scaleY(var(--fx-spine,1));transform-origin:top center}
  .fx-spark{position:absolute;left:50%;top:1.5rem;z-index:1;width:9px;height:9px;margin-left:-4.5px;
    border-radius:50%;pointer-events:none;background:#FFF6D8;
    box-shadow:0 0 10px 2px rgba(244,208,63,.9),0 0 34px 8px rgba(244,208,63,.35)}
}
.fx-spark{display:none}
@media(min-width:760px){.fx-spark{display:block}}

.care-letter{will-change:transform,opacity}
.metric b{font-variant-numeric:tabular-nums}

/* Tabela comparativa: 1ª coluna fixa ao arrastar + coluna Growth iluminada */
.compare tbody th,.compare thead th.feat-col{position:sticky;left:0;z-index:2;background:#12122a}
.compare thead th.feat-col{z-index:3;background:#16162f}
.compare td.col-star{box-shadow:inset 1px 0 0 rgba(233,197,88,.28),inset -1px 0 0 rgba(233,197,88,.28)}
.compare tbody tr{transition:background .25s ease}
.compare tbody tr:hover{background:rgba(233,197,88,.035)}
.compare__scroll{position:relative}

/* Selo "Mais escolhido" com brilho */
.plan__badge{overflow:hidden;z-index:4}
.plan__badge::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-140%) skewX(-18deg);
  animation:fxBadge 4.5s ease-in-out infinite}
@keyframes fxBadge{0%,70%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(480%) skewX(-18deg)}}

/* FAQ: resposta entra suave */
.faq details>p{transform-origin:top}

/* Tamanho confortável dos ícones desenhados */
.fx-draw{overflow:visible}

/* --------------------------------------------------------------------------
   6 · MOBILE CENTRALIZADO (≤ 759px) — hero centralizado até 899px
   -------------------------------------------------------------------------- */
@media(max-width:899px){
  .hero__inner{align-items:center;text-align:center}
  .hero .eyebrow{justify-content:center}
  .hero h1{max-width:18ch;margin-inline:auto}
  .hero__sub,.hero__reinforce{margin-inline:auto}
  .hero__actions{justify-content:center}
  .proof-strip{align-self:center;justify-content:center;text-align:center;flex-direction:column;gap:.35rem;
    border-radius:20px;padding:.95rem 1.2rem;max-width:30rem}
  .proof-strip p{margin-inline:auto}
}

@media(max-width:759px){
  /* Header: marca no centro (o CTA do topo já some no mobile) */
  .site-header{justify-content:center}
  .site-header .header-cta{display:none}

  /* Base: todo conteúdo de seção centralizado */
  .section .container,.plans-hero .container{text-align:center}
  .section p,.section h2,.section h3,.measure{margin-inline:auto}
  .method-head,.compare__head{margin-inline:auto}

  /* Eyebrow com fio dos dois lados */
  .eyebrow{justify-content:center}
  .section .eyebrow,.plans-hero .eyebrow,.hero .eyebrow{display:flex}
  .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold-grad);flex:none}

  /* Número da seção: numeral serifado pequeno, acima do eyebrow */
  .section-num{display:flex;justify-content:center;margin:0 auto .55rem;
    font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.05rem;letter-spacing:.06em}
  .section-num::before{display:none}

  /* 02 · DOR — lista vira sequência centralizada */
  #dor .pain-list{border-left:0;padding-left:0;margin-inline:auto;max-width:34rem}
  #dor .pain-list li{text-align:center;border-bottom:0;padding:1.15rem .25rem}
  #dor .pain-list li::before{position:static;display:block;width:fit-content;margin:0 auto .55rem;
    transform:none;background:none;font-size:1rem;padding:0}
  #dor .pain-list li::after{content:"";display:block;width:56px;height:1px;margin:1.15rem auto 0;
    background:linear-gradient(90deg,transparent,var(--hairline),transparent)}
  #dor .pain-list li:last-child::after{display:none}
  #dor .closer,#virada .thesis-kicker,.proof-note,.plan__goal{
    border-left:0;padding-left:0;margin-inline:auto;text-align:center;
    padding-top:1.4rem;background:linear-gradient(90deg,#B8860B,#F4D03F) top center/52px 2px no-repeat}
  .proof-note{border-radius:12px;padding:1.6rem 1.3rem 1.3rem;
    background:linear-gradient(90deg,#B8860B,#F4D03F) top center/52px 2px no-repeat,var(--ink-2)}
  .plan__goal{padding-top:1rem}
  .thesis-moment::before{left:50%;transform:translateX(-50%)}

  /* 04 · C.A.R.E. — letras gigantes empilhadas, ligadas por fios dourados */
  .care-journey{padding-left:0;gap:0}
  .care-spine{display:none!important}
  .care-step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.15rem;
    padding-bottom:4.4rem}
  .care-step:last-child{padding-bottom:0}
  .care-letter{font-size:clamp(4.6rem,3rem + 12vw,6.2rem);text-align:center;line-height:.95}
  .care-body{max-width:32rem}
  .care-step p{margin-inline:auto}
  .care-step::before{left:50%;top:auto;bottom:3.25rem;transform:translate(-50%,0) rotate(45deg)}
  .care-step::after{content:"";position:absolute;left:50%;bottom:.55rem;width:1px;height:2.35rem;
    transform:translateX(-50%) scaleY(var(--fx-c,1));transform-origin:top center;
    background:linear-gradient(var(--gold-solid),rgba(233,197,88,0))}
  .care-step:last-child::before,.care-step:last-child::after{display:none}

  /* 05 · SOBRE */
  .about__creds,.deliverables{justify-content:center}

  /* 06 · PROVA */
  .case-study__top,.case{text-align:center}
  .case-study .person,.case .person{flex-direction:column;justify-content:center;gap:.55rem}
  .case-study .person>span:last-child{align-items:center}
  .case .badge,.case-study .badge{justify-content:center}
  .audio-block .label{justify-content:center}
  .transcript>summary{justify-content:center;position:relative;padding-inline:2.4rem}
  .transcript>summary::after{position:absolute;right:1rem;margin:0}
  .proof-shots__title{justify-content:center}

  /* 07 · COMO FUNCIONA */
  .phase{text-align:center}

  /* 08 · CFM */
  #cfm .shield-frame{margin-inline:auto}

  /* 09 · PRA QUEM É */
  .fit-col h3{justify-content:center}
  .fit-col li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem}
  .fit-col li svg{margin-top:0}

  /* 10 · FAQ */
  .faq summary{justify-content:center;text-align:center;position:relative;padding-inline:2.8rem}
  .faq summary::after{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);margin:0}
  .faq details p{text-align:center}

  /* PLANOS — cabeçalho de cada card centralizado; lista com ✓ inline */
  .plan{text-align:center}
  .plan__tier{justify-content:center}
  .plan__features li{display:block;text-align:center}
  .plan__features li svg{display:inline-block;vertical-align:-2px;margin:0 .35rem 0 0}
  .info-card{text-align:center}
  .info-card .icon{margin-inline:auto}
  .info-card .note{border-left:0;border-radius:10px;
    background:linear-gradient(90deg,#B8860B,#F4D03F) top center/44px 2px no-repeat,rgba(0,0,0,.3);padding-top:1.2rem}
  .compare__hint{margin-inline:auto}
}

/* Máquinas modestas (≤4 núcleos ou ≤4 GB): loops contínuos desligados */
.fx-lite .fx-rays::before,.fx-lite .fx-rays::after,.fx-lite .fx-ring,.fx-lite .btn-gold.fx-pulse.fx-run{animation:none}

/* Celular / toque: loops que repintam a cada frame ficam estáticos (bateria + fluidez) */
@media(max-width:759px),(pointer:coarse){
  .fx-ring{animation:none;--fx-a:210deg}
  .fx-aurora i{will-change:auto}
  .btn-gold.fx-pulse.fx-run{animation:none}
  .fx-rays::before,.fx-rays::after{animation:none;will-change:auto}
}

/* --------------------------------------------------------------------------
   7 · MOVIMENTO REDUZIDO — tudo estático e visível
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fx-rays::before,.fx-rays::after,.fx-ring,.btn-gold.fx-pulse,.plan__badge::after{animation:none!important}
  .btn-gold.fx-shine::after,.gold-text.fx-shine,.gold-text.fx-shine .fx-word{animation:none!important}
  .fx-cursor{display:none}
}