/* ANIMAÇÕES DO SITE (26/10/2026) — vale para todas as páginas. Só visual: não muda texto nem ordem de nada.
   Baseado nos efeitos do React Bits, reescritos em CSS/JS puro (o site não usa React):
   - quadrados: luz que segue o mouse + borda que acende (SpotlightCard / MagicBento) e inclinação 3D leve (TiltedCard)
   - botões: ímã (Magnet), reflexo que passa (GlareHover), luz correndo na borda (StarBorder)
   - títulos: palavras saem do desfoque (BlurText), destaque em degradê que se move (GradientText), brilho nas etiquetas (ShinyText)
   - entrada dos blocos em sequência, saindo do desfoque (AnimatedContent)
   O script animacoes.js liga tudo isso acrescentando as classes fx-*. Sem o script, o site fica como antes. */

/* ---------- quadrados ---------- */
.fx-card{position:relative;isolation:isolate;overflow:hidden;transform-style:flat;
  transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .4s ease,border-color .3s ease}
.fx-card>.fx-luz,.fx-card>.fx-borda{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.fx-card>.fx-luz{z-index:-1;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--fx-x,50%) var(--fx-y,0%),var(--fx-cor-luz,rgba(132,188,37,.16)),transparent 60%)}
.fx-card>.fx-borda{z-index:3;padding:1px;opacity:var(--fx-perto,0);transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--fx-x,50%) var(--fx-y,0%),var(--fx-cor-borda,rgba(155,210,52,.9)),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-card:hover>.fx-luz{opacity:1}
.fx-card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.55),0 0 0 1px rgba(132,188,37,.22)}
.sec-clara .fx-card{--fx-cor-luz:rgba(132,188,37,.14);--fx-cor-borda:rgba(95,140,20,.85)}
.sec-clara .fx-card:hover{box-shadow:0 30px 60px -32px rgba(15,19,37,.35),0 0 0 1px rgba(95,140,20,.25)}
/* número grande dos quadrados ganha um brilho verde quando o mouse passa */
.fx-card .num,.fx-card .n-serif,.fx-card>.n{transition:color .3s ease,text-shadow .3s ease}
.fx-card:hover .num,.fx-card:hover .n-serif,.fx-card:hover>.n{text-shadow:0 0 24px rgba(132,188,37,.55)}
.fx-card .ico{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.fx-card:hover .ico{transform:translateY(-3px) rotate(-6deg) scale(1.08)}

/* ---------- botões ---------- */
.fx-bt{position:relative;isolation:isolate;overflow:hidden;translate:var(--fx-ix,0) var(--fx-iy,0);
  transition:translate .35s cubic-bezier(.2,.8,.3,1),background .25s,box-shadow .25s,border-color .25s,transform .2s}
.fx-bt>.fx-reflexo{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden}
.fx-bt>.fx-reflexo::before{content:"";position:absolute;top:-50%;bottom:-50%;left:-60%;width:45%;transform:skewX(-20deg) translateX(0);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);opacity:0}
.fx-bt:hover>.fx-reflexo::before{animation:fx-reflexo .8s ease forwards}
@keyframes fx-reflexo{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
/* luz que corre na borda dos botões verdes principais */
@property --fx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-estrela>.fx-anel{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--fx-ang),transparent 0 70%,rgba(255,255,255,.95) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:fx-girar-borda 3.2s linear infinite}
@keyframes fx-girar-borda{to{--fx-ang:360deg}}

/* ---------- títulos e textos ---------- */
.fx-palavras .fx-p{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.28em);
  transition:opacity .7s ease,filter .8s ease,transform .8s cubic-bezier(.2,.8,.3,1);transition-delay:calc(var(--i,0) * 55ms)}
.fx-palavras.fx-on .fx-p{opacity:1;filter:none;transform:none}
.t-hero em:not(.fx-em),.t-secao em:not(.fx-em),.t-sub em:not(.fx-em),.fx-em .fx-p{background:linear-gradient(100deg,var(--verde,#84bc25) 0%,var(--verde-claro,#9bd234) 30%,#d8f59a 50%,var(--verde-claro,#9bd234) 70%,var(--verde,#84bc25) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fx-degrade 6s ease-in-out infinite}
.sec-clara .t-hero em:not(.fx-em),.sec-clara .t-secao em:not(.fx-em),.sec-clara .t-sub em:not(.fx-em),.painel-verde .t-secao em:not(.fx-em),.sec-clara .fx-em .fx-p,.painel-verde .fx-em .fx-p{background-image:linear-gradient(100deg,#4f7a12 0%,#6fa31c 30%,#8fc23a 50%,#6fa31c 70%,#4f7a12 100%)}
@keyframes fx-degrade{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.fx-brilha{background:linear-gradient(110deg,var(--fx-cor) 40%,var(--fx-cor-clara) 50%,var(--fx-cor) 60%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fx-brilho-texto 4.5s linear infinite}
@keyframes fx-brilho-texto{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ---------- entrada dos blocos ---------- */
.js .surge{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1),filter .8s ease;transition-delay:var(--fx-atraso,0s)}
.js .surge:not(.visivel){filter:blur(8px)}
.js .surge.fx-card{transition:opacity .8s ease,transform .5s cubic-bezier(.2,.8,.3,1),filter .8s ease,box-shadow .4s ease,border-color .3s ease;transition-delay:var(--fx-atraso,0s)}

/* ---------- etiquetas (olho): a bolinha fica sempre ao lado do texto, mesmo quando ele quebra linha ---------- */
.olho{flex-wrap:nowrap;align-items:flex-start;line-height:1.45}
.olho::before{flex:none;align-self:flex-start;margin-top:calc(.725em - 4px)}
@media (max-width:560px){.olho::before{margin-top:calc(.725em - 3px)}}

/* ---------- letra cursiva com degradê: folga para as pontas do itálico não serem cortadas ---------- */
.t-hero em:not(.fx-em),.t-secao em:not(.fx-em),.t-sub em:not(.fx-em),.fx-em .fx-p{padding:.04em .16em .14em .06em;margin:-.04em -.16em -.14em -.06em}

/* ---------- quadrados: barrinha verde no topo e brilho no ícone ---------- */
.fx-card>.fx-acento{position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:2px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,var(--verde,#84bc25),transparent);transform:scaleX(.3);opacity:.55;transition:transform .7s cubic-bezier(.2,.8,.3,1),opacity .5s ease}
.fx-card:hover>.fx-acento{transform:scaleX(1);opacity:1}
.fx-card .ico{box-shadow:0 0 0 6px rgba(132,188,37,.06),0 0 26px rgba(132,188,37,.18)}

/* ---------- painel verde: destaque em itálico em azul-marinho sólido (o degradê verde sumia no fundo verde) ---------- */
.painel-verde .t-hero em,.painel-verde .t-secao em,.painel-verde .t-sub em,.painel-verde .fx-em .fx-p{background:none!important;-webkit-text-fill-color:var(--navy,#0f1325)!important;color:var(--navy,#0f1325);animation:none}
.painel-verde .texto-g,.painel-verde .texto,.painel-verde>p{color:rgba(15,19,37,.8)}

/* ---------- quadrados em seção escura: versão escura, para o texto claro não sumir em cima do branco ---------- */
section:not(.sec-clara):not(.hero) .tile:not(.tile-cheio):not(.tile-verde){background:radial-gradient(420px 240px at 0% 0%,rgba(132,188,37,.08),transparent 70%),linear-gradient(160deg,#0d2145,#061430 75%);border:1px solid rgba(237,243,255,.10)}
section:not(.sec-clara):not(.hero) .tile:not(.tile-cheio):not(.tile-verde) h3{color:#fff}
section:not(.sec-clara):not(.hero) .tile:not(.tile-cheio):not(.tile-verde) p{color:rgba(237,243,255,.78)}
section:not(.sec-clara):not(.hero) .tile:not(.tile-cheio):not(.tile-verde) .frase{color:#fff}
section:not(.sec-clara):not(.hero) .tile:not(.tile-cheio):not(.tile-verde) .ico{background:rgba(132,188,37,.14);color:#9bd234}

/* ---------- depoimentos em fileira com setas ---------- */
.fx-fileira-trilho{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scroll-behavior:smooth;scrollbar-width:none;padding:8px 4px 30px;margin:0 -4px}
.fx-fileira-trilho::-webkit-scrollbar{display:none}
.fx-fileira-trilho>.fx-fileira-grade{display:flex!important;gap:22px;grid-template-columns:none!important;width:max-content}
.fx-fileira-grade>.depo{flex:0 0 min(380px,84vw);scroll-snap-align:start}
.fx-fileira-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.fx-fileira-seta{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--linha-forte,rgba(237,243,255,.2));background:rgba(237,243,255,.05);color:var(--texto,#edf3ff);transition:transform .25s,background .25s,opacity .25s}
.fx-fileira-seta:hover:not(:disabled){background:var(--verde,#84bc25);color:var(--navy,#0f1325);transform:translateY(-2px)}
.fx-fileira-seta:disabled{opacity:.35;cursor:default}
.fx-fileira-seta svg{width:20px;height:20px}
.sec-clara .fx-fileira-seta{border-color:rgba(15,19,37,.14);background:#fff;color:var(--navy,#0f1325);box-shadow:0 10px 24px -14px rgba(15,19,37,.45)}
.sec-clara .fx-fileira-seta:hover:not(:disabled){background:var(--navy,#0f1325);color:#fff}
.fx-fileira-pontos{display:flex;gap:8px}
.fx-fileira-pontos span{width:8px;height:8px;border-radius:99px;background:rgba(127,140,160,.35);transition:width .3s,background .3s}
.fx-fileira-pontos span.ativo{width:26px;background:var(--verde,#84bc25)}

/* ---------- "ler mais": botão + que abre a versão completa do quadrado numa janela no meio da tela ---------- */
.fx-mais-oculto{display:none!important}
.fx-mais{position:absolute;right:16px;bottom:16px;z-index:4;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(132,188,37,.55);background:rgba(132,188,37,.12);color:var(--verde,#84bc25);font:400 24px/1 var(--sans);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s}
.fx-mais:hover,.fx-mais:focus-visible{transform:rotate(90deg) scale(1.08);background:var(--verde,#84bc25);color:var(--navy,#0f1325);box-shadow:0 0 0 6px rgba(132,188,37,.15)}
.fx-mais:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fx-tem-mais{padding-bottom:70px!important}
.fx-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px}
.fx-modal-fundo{position:absolute;inset:0;background:rgba(3,10,26,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fx-modal-caixa{position:relative;width:min(640px,100%);max-height:calc(100svh - 40px);overflow:auto;border-radius:26px;padding:42px 40px 38px;
  background:radial-gradient(520px 260px at 100% 0%,rgba(132,188,37,.16),transparent 70%),linear-gradient(160deg,#0d2145,#061430);
  border:1px solid rgba(132,188,37,.35);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 1px 1px 1px rgba(255,255,255,.12);color:var(--texto,#edf3ff);transform-origin:center}
.fx-modal-caixa h3{font-size:24px;line-height:1.2;color:#fff;margin:6px 0 0}
.fx-modal-caixa p{margin-top:14px;font-size:16px;line-height:1.7;color:rgba(237,243,255,.82)}
.fx-modal-caixa .n,.fx-modal-caixa .num{position:static;display:block;font-size:44px;font-weight:800;line-height:1;color:var(--verde-claro,#9bd234);-webkit-text-stroke:0;background:none;margin:0 0 8px}
.fx-modal-fechar{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(237,243,255,.2);background:rgba(237,243,255,.06);color:#fff;font:300 26px/1 var(--sans);cursor:pointer;transition:transform .3s,background .25s}
.fx-modal-fechar:hover{transform:rotate(90deg);background:rgba(237,243,255,.14)}
.fx-modal-caixa .fx-mais-extra{margin-top:18px;padding-top:18px;border-top:1px solid rgba(237,243,255,.12)}
html.fx-sem-rolagem{overflow:hidden}

/* ---------- texto embaixo dos títulos das seções: um pouco menor ---------- */
.cabeca-c .texto-g,.cabeca .texto-g{font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.6}

/* ---------- perguntas frequentes: seta verde dentro de um círculo ---------- */
.faq summary::before{content:"";position:absolute;right:-7px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:rgba(132,188,37,.12);border:1px solid rgba(132,188,37,.45);transition:background .25s,border-color .25s}
.faq summary::after{border-color:var(--verde,#84bc25)!important}
.faq summary:hover::before{background:rgba(132,188,37,.22)}
.faq[open] summary::before{background:var(--verde,#84bc25);border-color:var(--verde,#84bc25)}
.faq[open] summary::after{border-color:var(--navy,#0f1325)!important}

/* ---------- Fred: foto em moldura arredondada com anéis e selos de vidro que flutuam, texto ao lado
   (usado na página inicial e na página Sobre) ---------- */
.fred-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center}
.fred-moldura{position:relative;width:min(400px,80vw);aspect-ratio:400/560;margin:0 auto}
.fred-anel{position:absolute;border-radius:999px;pointer-events:none}
.fred-anel-1{inset:-18px;border:1px solid rgba(237,243,255,.10);background:radial-gradient(closest-side,rgba(120,150,210,.06),transparent)}
.fred-anel-2{inset:-40px;border:1px solid rgba(237,243,255,.05)}
.fred-pilula{position:absolute;inset:0;border-radius:999px;overflow:hidden;border:6px solid rgba(9,24,54,.9);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(132,188,37,.18);background:#05070d}
.fred-pilula img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.fred-pilula-corpo img{object-position:50% 8%;transform:scale(1.35);transform-origin:50% 0}
.fred-selo{position:absolute;z-index:2;padding:14px 18px;border-radius:18px;min-width:150px;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.3),0 18px 40px rgba(0,0,0,.35);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  animation:fred-flutuar 7s ease-in-out infinite}
.fred-selo b{display:block;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.fred-selo span{display:block;margin-top:2px;font-size:13px;color:rgba(237,243,255,.8)}
.fred-selo-1{left:-18%;bottom:16%;--giro:7deg}
.fred-selo-2{right:-14%;bottom:30%;--giro:-7deg;animation-duration:8.5s;animation-delay:-3s;background:linear-gradient(150deg,rgba(132,188,37,.28),rgba(132,188,37,.08));border-color:rgba(132,188,37,.35)}
@keyframes fred-flutuar{0%,100%{transform:perspective(700px) rotateY(var(--giro,0deg)) translateY(0)}50%{transform:perspective(700px) rotateY(calc(var(--giro,0deg) * -.4)) translateY(-10px) rotate(-1deg)}}
.fred-texto .cabeca-c,.fred-texto .lideranca-topo{text-align:left;margin:0 0 26px}
.fred-texto .cabeca-c .olho{justify-content:flex-start}
.fred-texto .tile,.fred-texto .fred-cartao{padding:34px;max-width:none;margin:0;border-radius:var(--raio,22px);background:linear-gradient(160deg,rgba(237,243,255,.06),rgba(237,243,255,.02))!important;border:1px solid rgba(237,243,255,.10)!important}
.fred-texto .tile p,.fred-texto .fred-cartao p{color:rgba(237,243,255,.78);line-height:1.75}
.fred-texto .tile p:first-child,.fred-texto .fred-cartao p:first-of-type{font-size:18px;color:#fff;line-height:1.6}
.fred-texto .tile em,.fred-texto .fred-cartao strong{color:#9bd234}
.fred-texto .fred-cartao .texto-g{max-width:none;font-size:16px;margin-top:14px}
.fred-texto .fred-cartao .texto-g:first-of-type{margin-top:10px}
.fred-texto .lideranca-nome{font-size:24px;color:#fff}
@media (max-width:900px){.fred-grade{grid-template-columns:1fr}.fred-moldura{width:min(320px,70vw)}.fred-texto .cabeca-c,.fred-texto .lideranca-topo{text-align:center}.fred-texto .cabeca-c .olho{justify-content:center}
  .fred-selo{min-width:0;padding:10px 13px;border-radius:14px}.fred-selo b{font-size:18px}.fred-selo span{font-size:11.5px}.fred-selo-1{left:-12%;bottom:6%}.fred-selo-2{right:-12%;bottom:18%}}
@media (prefers-reduced-motion:reduce){.fred-selo{animation:none}}

/* ---------- celular e quem prefere menos movimento ---------- */
@media (hover:none){.fx-card>.fx-borda{display:none}}
@media (prefers-reduced-motion:reduce){
  .fx-palavras .fx-p{opacity:1;filter:none;transform:none;transition:none}
  .fx-estrela>.fx-anel,.t-hero em,.t-secao em,.t-sub em,.fx-em .fx-p,.fx-brilha{animation:none}
  .js .surge:not(.visivel){filter:none}
  .fx-card,.fx-bt{transition:none;translate:none}
}