/* Garcia Axis, camada de interação. Carrega depois de style.css e das folhas de página.
   Leva botões, pílulas, cards, perguntas, controles da prévia, rodapé, trilho e cursor ao padrão dos cards de canal:
   chip circular de seta, anel de luz girando, brilho ambiente, estados "live" ao entrar na tela, pressão e foco por teclado.
   Só transform, translate, scale, opacity e cores. Nada de filtro animando em área grande. */

@keyframes ui-spin{to{--ang:360deg}}
@keyframes ui-sweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes ui-pip{0%,100%{transform:scale(1);box-shadow:0 0 6px var(--accent)}50%{transform:scale(1.55);box-shadow:0 0 14px var(--accent)}}
@keyframes ui-ping{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(2.4)}}

/* ---------- botões: chip de seta, anel de luz, brilho, pressão, magnético ---------- */
.btn.btn{gap:10px;translate:0px 0px;-webkit-tap-highlight-color:transparent;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease,transform .35s var(--ease-out),translate .55s var(--ease-out),scale .22s var(--ease-out)}
.btn.btn:active{scale:.97}
.btn.btn-solid:focus-visible{outline-color:#fff}
.btn.btn-solid:focus-visible,.btn.btn-ghost:focus-visible{transform:translateY(-1px)}
.btn .btn-t{position:relative;z-index:1;white-space:nowrap}
.btn .btn-go{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,0);transition:background .35s,border-color .35s,color .35s,transform .45s var(--ease-out),box-shadow .35s}
.btn .btn-go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out)}
.btn-ghost .btn-go{border-color:rgba(255,255,255,.32)}
.btn:hover .btn-go,.btn:focus-visible .btn-go,.btn.live .btn-go{transform:scale(1.1)}
.btn:hover .btn-go svg,.btn:focus-visible .btn-go svg,.btn.live .btn-go svg{transform:translateX(2px)}
.btn-solid:hover .btn-go,.btn-solid:focus-visible .btn-go,.btn-solid.live .btn-go,.btn-accent:hover .btn-go,.btn-accent:focus-visible .btn-go{background:#fff;border-color:#fff;color:var(--accent);box-shadow:0 0 14px rgba(255,255,255,.55)}
.btn-ghost:hover .btn-go,.btn-ghost:focus-visible .btn-go,.btn-ghost.live .btn-go{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 14px rgba(49,92,255,.6)}

/* anel de luz: fica na borda interna e gira no hover; um giro só quando o botão acorda ao entrar na tela */
.btn .btn-ring{position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 50%,rgba(255,255,255,.35) 68%,#fff 80%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none}
.btn-ghost .btn-ring{background:conic-gradient(from var(--ang),transparent 0 50%,rgba(49,92,255,.55) 68%,#B9C8FF 80%,transparent 100%)}
.btn:hover .btn-ring,.btn:focus-visible .btn-ring{opacity:1;animation:ui-spin 1.5s linear infinite}
.btn.live .btn-ring{opacity:1;animation:ui-spin 1.3s cubic-bezier(.45,0,.2,1) 1}

/* brilho ambiente por baixo do texto (a varredura de luz do style.css continua no ::after) */
.btn.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(80% 120% at 50% 120%,rgba(255,255,255,.3),transparent 70%);opacity:0;transition:opacity .45s;pointer-events:none;z-index:-1}
.btn.btn-ghost::before{background:radial-gradient(80% 150% at 50% 130%,rgba(49,92,255,.5),transparent 70%)}
.btn:hover::before,.btn:focus-visible::before,.btn.live::before{opacity:1}
.btn.btn-solid:hover,.btn.btn-solid:focus-visible,.btn.btn-solid.live{border-color:rgba(220,230,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(120,150,255,.25),0 0 34px rgba(49,92,255,.55),0 18px 40px -12px rgba(49,92,255,.9)}
.btn.btn-ghost:hover,.btn.btn-ghost:focus-visible,.btn.btn-ghost.live{border-color:rgba(49,92,255,.95);background:rgba(49,92,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(49,92,255,.2),0 0 30px rgba(49,92,255,.42)}
.btn.live::after{animation:ui-sweep .9s ease .15s 1}

/* chamada do cabeçalho: chip menor */
.btn.header-cta{gap:8px}
.header-cta .btn-go{width:19px;height:19px}
.header-cta .btn-go svg{width:10px;height:10px}

/* botões largos (formulário, menu do celular, hero no celular): texto centrado, chip preso à direita */
.btn.btn-wide{padding-left:calc(var(--btn-pad) + 34px);padding-right:calc(var(--btn-pad) + 34px)}
.btn.btn-wide .btn-t{flex:1;text-align:center}
.btn.btn-wide .btn-go{position:absolute;right:10px;top:50%;margin-top:-11px}
@media (max-width:900px){
  .site-nav .btn.btn{padding-left:52px;padding-right:52px}
  .site-nav .btn .btn-t{flex:1;text-align:center}
  .site-nav .btn .btn-go{position:absolute;right:15px;top:50%;width:24px;height:24px;margin-top:-12px}
  .btn.btn-wide .btn-go{width:24px;height:24px;margin-top:-12px}
}
@media (max-width:560px){
  .hero-actions .btn.btn{padding-left:52px;padding-right:52px}
  .hero-actions .btn .btn-t{flex:1;text-align:center}
  .hero-actions .btn .btn-go{position:absolute;right:13px;top:50%;width:24px;height:24px;margin-top:-12px}
}

/* ---------- pílulas do menu: ponto pulsa, anel de luz, página atual brilhando ---------- */
.pill.pill{transition:color .3s,border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease-out),scale .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.pill::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 50%,rgba(49,92,255,.65) 70%,#C5D2FF 82%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.pill:hover::after,.pill:focus-visible::after{opacity:1;animation:ui-spin 1.8s linear infinite}
.pill:hover::before,.pill:focus-visible::before{animation:ui-pip 1.1s ease-in-out infinite}
.pill:focus-visible{color:#fff;border-color:rgba(49,92,255,.75);background:rgba(49,92,255,.14);box-shadow:0 0 20px rgba(49,92,255,.28)}
.pill.is-current::before{background:#DCE4FF;box-shadow:0 0 8px var(--accent),0 0 18px rgba(49,92,255,.85);animation:ui-pip 3s ease-in-out infinite}
.pill.pill:active{scale:.97}

/* ---------- cards: brilho ambiente, borda que acende, inclinação (ui.js), chip de canto ---------- */
.plan.plan,.site-card.site-card,.full.full{isolation:isolate;will-change:transform;transition:opacity 1s var(--ease-out),transform .55s var(--ease-out),border-color .5s,box-shadow .5s;transition-delay:var(--d,0s),var(--d,0s),0s,0s}
.plan.plan::before,.site-card.site-card::before,.full.full::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 60% at var(--gx,50%) var(--gy,0%),rgba(49,92,255,.22),transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none;z-index:-1}
.plan:hover::before,.plan.live::before,.plan:focus-within::before,.site-card:hover::before,.site-card.live::before,.site-card:focus-within::before,.full:hover::before,.full.live::before,.full:focus-within::before{opacity:1}
.plan.plan:hover,.plan.plan.live,.plan.plan:focus-within,.site-card.site-card:hover,.site-card.site-card.live,.site-card.site-card:focus-within,.full.full:hover,.full.full.live,.full.full:focus-within{border-color:rgba(49,92,255,.62);box-shadow:0 0 0 1px rgba(49,92,255,.16),0 0 54px -14px rgba(49,92,255,.5),0 30px 70px -40px rgba(0,0,0,.9)}
.plan.has-go .kicker{padding-right:52px}
.card-go{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent;transition:background .4s,border-color .4s,transform .4s var(--ease-out),box-shadow .4s,scale .2s var(--ease-out)}
.card-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.plan:hover .card-go{border-color:rgba(255,255,255,.42);background:rgba(0,0,0,.4)}
.card-go:hover,.card-go:focus-visible,.plan.live .card-go{background:var(--accent);border-color:var(--accent);box-shadow:0 0 22px rgba(49,92,255,.55);transform:translateX(2px)}
.card-go:hover svg,.card-go:focus-visible svg,.plan.live .card-go svg{transform:translateX(2px)}
.card-go:active{scale:.92}

/* ---------- perguntas: chip circular que enche e vira x; pergunta desliza e a linha acende ---------- */
.faq-q.faq-q{position:relative;-webkit-tap-highlight-color:transparent;transition:color .3s}
.faq-q.faq-q:hover{color:#fff}
.faq-q::before{content:"";position:absolute;left:-16px;top:50%;width:3px;height:1.15em;margin-top:-.575em;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:0;transform:scaleY(.2);transition:opacity .35s,transform .45s var(--ease-out);pointer-events:none}
.faq-q:hover::before,.faq-q:focus-visible::before,.faq-item.open .faq-q::before{opacity:1;transform:none}
.faq-q .faq-t{display:block;transition:transform .45s var(--ease-out)}
.faq-q:hover .faq-t,.faq-q:focus-visible .faq-t{transform:translateX(4px)}
.faq-q.faq-q i{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.03);transition:transform .5s var(--ease-out),background .35s,border-color .35s,box-shadow .35s,scale .2s var(--ease-out)}
.faq-q.faq-q i::before,.faq-q.faq-q i::after{left:7px;top:12px;width:12px;height:2px;border-radius:1px;transition:background .35s,transform .5s var(--ease-out)}
.faq-q.faq-q i::after{transform:rotate(90deg)}
.faq-q:hover i,.faq-q:focus-visible i{border-color:rgba(49,92,255,.8);background:rgba(49,92,255,.18);box-shadow:0 0 16px rgba(49,92,255,.35)}
.faq-item.open .faq-q i{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);box-shadow:0 0 18px rgba(49,92,255,.55)}
.faq-item.open .faq-q i::before,.faq-item.open .faq-q i::after{background:#fff}
.faq-item.open .faq-q i::after{transform:rotate(90deg)}
.faq-q:active i{scale:.9}

/* ---------- controles da prévia: paletas, fontes, tema, apresentar, cores, abas ---------- */
.swatch.swatch{transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s,scale .2s var(--ease-out)}
.swatch:hover,.swatch:focus-visible{transform:scale(1.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.28),0 0 22px var(--sw,rgba(49,92,255,.6))}
.swatch.swatch.on{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 18px var(--sw,rgba(255,255,255,.25))}
.swatch.swatch:active{scale:.9}
.font-b.font-b{transition:border-color .3s,color .3s,background .3s,box-shadow .3s,transform .3s var(--ease-out),scale .2s var(--ease-out)}
.font-b:hover,.font-b:focus-visible{border-color:rgba(49,92,255,.6);color:#fff;box-shadow:0 0 0 1px rgba(49,92,255,.2),0 0 22px rgba(49,92,255,.28);transform:translateY(-1px)}
.font-b.on:hover,.font-b.on:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px rgba(49,92,255,.3),0 0 26px rgba(49,92,255,.4)}
.font-b.font-b:active{scale:.96}
.pv-seg-b.pv-seg-b{transition:background .3s,color .3s,box-shadow .3s,scale .2s var(--ease-out)}
.pv-seg-b:hover,.pv-seg-b:focus-visible{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(49,92,255,.45),0 0 14px rgba(49,92,255,.22)}
.pv-seg-b.on:hover,.pv-seg-b.on:focus-visible{background:rgba(255,255,255,.12)}
.pv-seg-b.pv-seg-b:active{scale:.96}
.pv-present.pv-present{transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease-out),scale .2s var(--ease-out)}
.pv-present:hover,.pv-present:focus-visible{border-color:var(--accent);background:rgba(49,92,255,.14);box-shadow:0 0 0 1px rgba(49,92,255,.25),0 0 24px rgba(49,92,255,.32);transform:translateY(-1px)}
.pv-present[aria-pressed=true]{border-color:var(--accent);background:rgba(49,92,255,.18)}
.pv-present.pv-present:active{scale:.96}
.pal-c.pal-c{transition:background .5s,transform .3s var(--ease-out),box-shadow .3s,scale .2s var(--ease-out)}
.pal-c:hover,.pal-c:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 22px var(--c)}
.pal-c.pal-c:active{scale:.95;transform:translateY(-1px)}
button.tab{position:relative;-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s,box-shadow .3s,scale .2s var(--ease-out)}
button.tab:hover,button.tab:focus-visible{color:#fff;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(49,92,255,.4),inset 0 -2px 0 rgba(49,92,255,.65)}
button.tab.on:hover,button.tab.on:focus-visible{background:#1C1C24}
button.tab:active{scale:.97}

/* ---------- rodapé, trilho, logo, menu ---------- */
.foot-nav a{position:relative;display:inline-block;padding:2px 0;transition:color .3s,transform .35s var(--ease-out)}
.foot-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);box-shadow:0 0 8px rgba(49,92,255,.7);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.foot-nav a:hover,.foot-nav a:focus-visible{color:#fff;transform:translateY(-1px)}
.foot-nav a:hover::after,.foot-nav a:focus-visible::after{transform:scaleX(1)}
.foot-meta a{transition:color .3s,transform .3s var(--ease-out)}
.foot-meta a:hover{transform:translateY(-1px)}
.rail-tick{overflow:visible;transition:background .4s,box-shadow .4s}
.rail-tick::before{content:"";position:absolute;inset:-10px -4px}
.rail-tick::after{content:"";position:absolute;left:8px;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid var(--accent);opacity:0;transform:scale(.35);pointer-events:none}
.rail-tick:hover{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}
.rail-tick:hover::after{animation:ui-ping 1.1s ease-out infinite}
.logo.logo{transition:transform .4s var(--ease-out)}
.logo img{transition:filter .45s}
.logo:hover img,.logo:focus-visible img{filter:drop-shadow(0 0 9px rgba(49,92,255,.65)) drop-shadow(0 0 2px rgba(255,255,255,.35))}
.logo.logo:hover{transform:translateY(-1px)}
.burger.burger{position:relative;isolation:isolate;transition:border-color .3s,background .3s,box-shadow .3s,scale .2s var(--ease-out)}
.burger::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 50%,rgba(49,92,255,.7) 70%,#C5D2FF 82%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.burger:hover::after,.burger:focus-visible::after{opacity:1;animation:ui-spin 1.8s linear infinite}
.burger:hover,.burger:focus-visible{box-shadow:0 0 18px rgba(49,92,255,.3)}
.burger.burger:active{scale:.94}

/* ---------- formulário: rótulo acende com um ponto azul ---------- */
.field>label:first-child,.field>.field-l:first-child{position:relative;transition:color .3s}
.field>label:first-child::before,.field>.field-l:first-child::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.3);transition:opacity .3s,transform .4s var(--ease-out),box-shadow .3s}
.field:focus-within>label:first-child,.field:focus-within>.field-l:first-child{color:#fff}
.field:focus-within>label:first-child::before,.field:focus-within>.field-l:first-child::before{opacity:1;transform:none;box-shadow:0 0 8px var(--accent)}

/* ---------- cursor: vira anel sobre os clicáveis ---------- */
.dot.dot{transition:width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s,border-radius .3s,background-color .3s,border-color .3s,box-shadow .3s}
.dot.go{width:34px;height:34px;border-radius:50%;background:transparent;border:1.5px solid var(--accent);box-shadow:0 0 12px rgba(49,92,255,.45),inset 0 0 8px rgba(49,92,255,.25);opacity:.95}

/* ---------- toque: alvos maiores ---------- */
@media (pointer:coarse){
  .card-go{width:44px;height:44px;top:14px;right:14px}
  .swatch::after{content:"";position:absolute;inset:-6px}
  .rail-tick::before{inset:-14px -6px}
  .faq-q.faq-q i{width:32px;height:32px}
  .faq-q.faq-q i::before,.faq-q.faq-q i::after{left:9px;top:14px}
}

/* ---------- movimento reduzido: sem giro, sem inclinação, sem magnético, sem varredura ---------- */
@media (prefers-reduced-motion: reduce){
  .btn .btn-ring,.btn::after,.pill::after,.burger::after,.rail-tick::after{display:none}
  .btn,.pill,.plan,.site-card,.full,.card-go,.swatch,.font-b,.pv-seg-b,.pv-present,.pal-c,.tab,.logo,.foot-nav a,.foot-meta a{transform:none!important;translate:none!important;scale:none!important}
  .btn .btn-go,.btn .btn-go svg,.card-go svg,.faq-q .faq-t{transform:none!important}
  .pill::before,.pill.is-current::before{animation:none!important}
  .faq-q i{scale:none!important}
  .faq-q::before{transform:none}
}