/* GoisTec News · efeitos do Magic UI (magicui.design/docs/components) recriados em CSS puro, sem React/Tailwind.
   Comportamento progressivo: sem JS o conteúdo aparece normal (classe .mjs só existe com JS). */

/* blur-fade: entra de cima com blur (offset 6px, blur 6px, 0.4s, delay 0.04s + escalonamento) */
.mjs .bf{opacity:0;filter:blur(6px);translate:0 -6px;transition:opacity .4s ease-out,filter .4s ease-out,translate .4s ease-out;transition-delay:calc(.04s + var(--bf-d,0s))}
.mjs .bf.in{opacity:1;filter:none;translate:none}

/* marquee: grupos repetidos rolando em loop, pausa no hover, bordas esmaecidas */
.marquee{--gap:2.2rem;--dur:32s;display:flex;flex-wrap:wrap;justify-content:center;gap:10px var(--gap);overflow:hidden;min-width:0}
.mjs .marquee{flex-wrap:nowrap;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-g{display:flex;flex-shrink:0;justify-content:space-around;gap:var(--gap)}
.mjs .mq-g{animation:mq var(--dur) linear infinite}
.marquee:hover .mq-g{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-100% - var(--gap)))}}
.logos .marquee{flex:1 1 320px;max-width:860px}.logos b{white-space:nowrap}

/* border-beam: um brilho percorrendo a borda (offset-path rect) */
.beam{position:absolute;inset:0;overflow:hidden;border-radius:inherit;padding:1.5px;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.beam:after{content:"";position:absolute;width:var(--bs,80px);aspect-ratio:1;background:linear-gradient(to left,var(--ac2),var(--ac),transparent);offset-path:rect(0 auto auto 0 round var(--bs,80px));animation:beam var(--bd,7s) linear infinite}
@keyframes beam{from{offset-distance:0%}to{offset-distance:100%}}
@supports not (offset-path:rect(0 auto auto 0)){.beam{display:none}}
.cta-final{position:relative}.cta-final .beam{--bs:120px;--bd:10s}

/* shimmer-button: faísca girando na borda (camadas injetadas pelo magic.js) */
.btn.shimmer{--spread:90deg;--speed:3s;--cut:.05em;--shc:#fff;position:relative;z-index:0;overflow:hidden;outline-offset:2px}
.sh-spark{position:absolute;inset:0;z-index:-3;overflow:visible;filter:blur(2px);container-type:size;border-radius:inherit}
.sh-slide{position:absolute;top:0;left:0;height:100cqh;aspect-ratio:1;animation:sh-slide var(--speed) ease-in-out infinite alternate}
.sh-spin{position:absolute;inset:-100%;background:conic-gradient(from calc(270deg - var(--spread)*.5),transparent 0,var(--shc) var(--spread),transparent var(--spread));animation:sh-spin calc(var(--speed)*2) infinite linear}
.sh-hl{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 -8px 10px #ffffff1f;transition:box-shadow .3s ease-in-out;pointer-events:none}
.btn.shimmer:hover .sh-hl{box-shadow:inset 0 -6px 10px #ffffff3f}.btn.shimmer:active .sh-hl{box-shadow:inset 0 -10px 10px #ffffff3f}
.sh-bd{position:absolute;inset:var(--cut);z-index:-2;border-radius:inherit;background:inherit;pointer-events:none}
@keyframes sh-slide{to{transform:translate(calc(100cqw - 100%),0)}}
@keyframes sh-spin{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}to{transform:translateZ(0) rotate(360deg)}}

/* magic-card: holofote que segue o mouse + borda iluminada (só em dispositivos com hover) */
.mc{isolation:isolate;--mx:-300px;--my:-300px}
.mc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(220px circle at var(--mx) var(--my),var(--ac),var(--ac2) 45%,transparent 100%),linear-gradient(160deg,#ffffff22,transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mc::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(220px circle at var(--mx) var(--my),#8b5cf624,transparent 100%);opacity:0;transition:opacity .3s}
.mc:hover::after{opacity:1}
.faq details,.list li{position:relative}

/* number-ticker */
.nt{font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stats>div{text-align:center;padding:20px 12px;border-radius:var(--r);border:1px solid var(--line);background:#ffffff05}
.stats b{display:block;font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.15;background:linear-gradient(92deg,#c4b5fd,var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:var(--mut);font-size:14px}

/* animated-beam: fontes -> IA -> sua caixa */
.beam-box{position:relative;display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:0 auto 34px;padding:26px clamp(10px,5vw,56px);border-radius:24px;border:1px solid var(--line);background:#ffffff05}
.bm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.bm-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;align-items:center}
.bm-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;line-height:1.2;color:var(--mut);text-align:center;max-width:84px}
.bm-node{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#0c1028;border:1px solid var(--line2);font-weight:800;font-size:13px;color:#d6dcff;box-shadow:0 0 20px -12px #000}
.bm-node .ic{width:22px;height:22px;color:var(--ac2)}
.bm-node.lg{width:78px;height:78px;border-color:#8b5cf688;box-shadow:0 0 44px -8px #8b5cf6aa}.bm-node.lg .mark{width:38px;height:38px;border-radius:11px}.bm-node.lg .mark:after{inset:10px}

/* bento-grid de recursos */
.bento{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:15rem}.bento .bento-card{min-height:0}.b-mail,.b-alert{grid-column:span 2}.b-wa{grid-row:span 2}}
.bento-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:17rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);color:var(--ink)}
.bento-card:hover{text-decoration:none}
.bc-bg{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:22px;-webkit-mask-image:linear-gradient(to top,transparent 25%,#000 75%);mask-image:linear-gradient(to top,transparent 25%,#000 75%);transition:transform .3s}
.bento-card:hover .bc-bg{transform:scale(1.04)}
.bc-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding:22px;pointer-events:none;transition:transform .3s}
.bc-body .ic{width:42px;height:42px;color:#c4b5fd;transform-origin:left;transition:transform .3s}
.bc-body h3{margin:6px 0 0;font-size:19px}.bc-body p{margin:0;color:var(--mut);font-size:14.5px;max-width:40ch}
.bc-cta{position:relative;z-index:1;padding:0 22px 18px;color:var(--ac2);font-weight:650;font-size:14px}
@media (hover:hover) and (min-width:900px){.bc-cta{position:absolute;bottom:0;left:0;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
 .bento-card:hover .bc-body{transform:translateY(-30px)}.bento-card:hover .bc-body .ic{transform:scale(.75)}.bento-card:hover .bc-cta{opacity:1;transform:none}}
.bc-bg .marquee{--gap:12px;width:100%}.bc-chip{padding:10px 14px;border-radius:12px;background:#ffffff0a;border:1px solid var(--line2);font-size:13.5px;font-weight:600;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.bc-wa{display:flex;flex-direction:column;gap:8px;width:min(86%,300px)}.bc-wa span{align-self:flex-start;background:#202c33;color:#e9edef;padding:8px 12px;border-radius:0 12px 12px 12px;font-size:13px}.bc-wa .me{align-self:flex-end;background:#005c4b;border-radius:12px 0 12px 12px}
@media (max-width:899px){.bc-wa span:nth-child(n+2){display:none}}
.bc-wave{display:flex;align-items:center;gap:4px;height:70px;margin-top:10px}.bc-wave i{width:4px;height:100%;border-radius:4px;background:linear-gradient(var(--ac2),var(--ac));transform:scaleY(.3);animation:wave 1.4s ease-in-out infinite}
.bc-wave i:nth-child(3n){animation-delay:-.4s}.bc-wave i:nth-child(3n+1){animation-delay:-.9s}.bc-wave i:nth-child(4n){animation-delay:-1.2s}.bc-wave i:nth-child(5n){animation-delay:-.2s}
@keyframes wave{50%{transform:scaleY(1)}}
.bc-doc{width:96px;height:124px;border-radius:8px;padding:16px 12px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(160deg,#1b1550,#0f3b4d);border:1px solid var(--line2);transform:rotate(-6deg);box-shadow:0 20px 40px -14px #000}.bc-doc i{height:6px;border-radius:3px;background:#ffffff33}.bc-doc i:first-child{height:10px;width:70%;background:#c4b5fd88}
.bc-alert span{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:99px;border:1px solid #34d39955;background:#34d39914;color:#bbf7d0;font-size:14px;font-weight:650}
.bc-play{width:86px;height:140px;border-radius:18px;border:1px solid var(--line2);background:linear-gradient(160deg,#2a2f55,#0b0e22);position:relative;box-shadow:0 20px 50px -20px #8b5cf6}.bc-play:after{content:"";position:absolute;left:50%;top:50%;translate:-35% -50%;border:14px solid transparent;border-left:22px solid #fff;border-right:0}

@media print{.mjs .bf{opacity:1;filter:none;translate:none}}

/* prefers-reduced-motion: desliga todas as animações/transições do site */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .mjs .bf{opacity:1;filter:none;translate:none}
 .mjs .marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}.mq-g[aria-hidden]{display:none}
 .beam{display:none}
}


/* VPS compatibility: featured plan needs containing block for border-beam */
.plan{position:relative}
.plan.featured,.cta-final{overflow:hidden}
/* Do not force Magic marquee layout on the existing ticker (.track) */
.ticker .marquee{display:block;overflow:hidden;-webkit-mask-image:none;mask-image:none}
.mjs .ticker .marquee{flex-wrap:unset;justify-content:unset}
