/* ============================================================
   CONFIGURAÇÃO RÁPIDA: está no <script> no fim do arquivo
   (WhatsApp, chave Pix e lista de planilhas à venda)
   ============================================================ */
:root{
  --noite:#0D1B2A; --painel:#14263A; --painel-2:#1A3048; --linha:#233A52;
  --texto:#E8EEF4; --suave:#8DA2B8; --verde:#21A366; --verde-claro:#4CC38A;
  --ambar:#F5B83D; --radius-lg:18px; --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,sans-serif;background:var(--noite);color:var(--texto);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;line-height:1.08;letter-spacing:-.02em;font-weight:700}
a{color:inherit}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- topo ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(13,27,42,.82);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--linha)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{display:flex;align-items:center;gap:11px;font-family:"Bricolage Grotesque";font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:-.02em}
.logo svg{width:34px;height:34px}
.menu{display:flex;gap:30px;font-size:.95rem;font-weight:500}
.menu a{text-decoration:none;color:var(--suave);transition:color .2s}
.menu a:hover{color:var(--texto)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:var(--radius);font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:inherit;transition:transform .15s,background .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:#1B8C57}
.btn-linha{background:transparent;color:var(--texto);border:1.5px solid var(--linha)}
.btn-linha:hover{border-color:var(--suave)}
.nav .btn{padding:10px 18px;font-size:.92rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:84px 0 100px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:96px 32px;opacity:.35;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 20%,transparent 75%)}
.hero-glow{position:absolute;width:640px;height:640px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(33,163,102,.22),transparent 65%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:800;margin-bottom:24px}
.hero p.lead{font-size:1.18rem;color:var(--suave);max-width:30em;margin-bottom:36px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.provas{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 32px;margin-top:44px;color:var(--suave);font-size:.88rem;line-height:1.4}
.provas div{border-left:2px solid var(--verde);padding-left:12px}
.provas b{display:block;color:var(--texto);font-family:"Bricolage Grotesque";font-size:1.25rem;margin-bottom:2px}
@media (max-width:560px){.provas{grid-template-columns:1fr 1fr}}

/* ---------- janela animada ---------- */
.janela{position:relative;background:var(--painel);border:1px solid var(--linha);border-radius:var(--radius-lg);box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.janela-topo{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--linha);background:var(--painel-2)}
.janela-topo i{width:11px;height:11px;border-radius:50%;background:#2F4762}
.janela-titulo{margin-left:10px;font-size:.82rem;color:var(--suave);font-weight:600;transition:opacity .3s}
.palco{position:relative;height:350px}
.fase{position:absolute;inset:0;transition:opacity .6s ease,transform .6s ease}
.fase.escondida{opacity:0;transform:scale(.97);pointer-events:none}

/* planilha */
.fx{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--linha);font-family:"JetBrains Mono",monospace;font-size:.8rem}
.fx span{color:var(--verde-claro);font-style:italic;font-weight:500}
.fx code{color:var(--texto);min-height:1.2em}
.fx code::after{content:"";display:inline-block;width:7px;height:14px;background:var(--ambar);margin-left:2px;vertical-align:-2px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.grade{display:grid;grid-template-columns:36px repeat(4,1fr);font-family:"JetBrains Mono",monospace;font-size:.78rem}
.grade div{height:38px;display:flex;align-items:center;padding:0 10px;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);color:var(--suave);white-space:nowrap;overflow:hidden;position:relative}
.grade .col,.grade .lin{background:var(--painel-2);color:#5E7690;justify-content:center;font-size:.72rem}
.grade .cel{color:var(--texto);transition:background .3s}
.grade .cel.erro{color:#F2766B}
.grade .cel.sel{outline:2px solid var(--ambar);outline-offset:-2px;background:rgba(245,184,61,.08)}

/* sistema */
.sis{display:grid;grid-template-columns:150px 1fr;height:100%}
.sis-lado{border-right:1px solid var(--linha);padding:16px 12px;display:flex;flex-direction:column;gap:6px;font-size:.82rem}
.sis-lado span{padding:8px 10px;border-radius:7px;color:var(--suave)}
.sis-lado span.on{background:rgba(33,163,102,.15);color:var(--verde-claro);font-weight:700}
.sis-main{padding:18px;display:flex;flex-direction:column;gap:14px}
.sis-ola{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--suave)}
.sis-ola b{color:var(--texto);font-size:1rem}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ambar);color:var(--noite);display:grid;place-items:center;font-weight:800;font-size:.8rem}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--painel-2);border:1px solid var(--linha);border-radius:10px;padding:12px}
.kpi small{color:var(--suave);font-size:.72rem;display:block}
.kpi b{font-family:"Bricolage Grotesque";font-size:1.25rem}
.barras{flex:1;display:flex;align-items:flex-end;gap:7px;padding:10px 4px 0;border-bottom:1px solid var(--linha);min-height:90px}
.barras i{flex:1;background:linear-gradient(to top,var(--verde),var(--verde-claro));border-radius:4px 4px 0 0;height:0;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.log{font-size:.75rem;color:var(--suave);display:flex;gap:8px;align-items:center}
.log::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde-claro)}

.legenda{display:flex;justify-content:center;gap:8px;margin-top:16px}
.legenda button{background:none;border:1px solid var(--linha);color:var(--suave);font:600 .8rem Manrope,sans-serif;padding:7px 14px;border-radius:99px;cursor:pointer}
.legenda button.on{border-color:var(--verde);color:var(--texto);background:rgba(33,163,102,.12)}

/* ---------- seções ---------- */
section{padding:110px 0}
.titulo{max-width:36em;margin-bottom:52px}
.titulo h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:14px}
.titulo p{color:var(--suave);font-size:1.08rem}

/* serviços como linhas de planilha */
.tabela{border:1px solid var(--linha);border-radius:var(--radius-lg);overflow:hidden;background:var(--painel)}
.linha-serv{display:grid;grid-template-columns:56px 1.1fr 1.6fr 1.3fr;border-top:1px solid var(--linha);transition:background .25s}
.linha-serv:first-child{border-top:0}
.linha-serv:hover{background:var(--painel-2)}
.linha-serv > *{padding:28px 24px}
.linha-serv .n{border-right:1px solid var(--linha);font-family:"JetBrains Mono";color:#5E7690;font-size:.85rem;padding:30px 0;text-align:center}
.linha-serv h3{font-size:1.4rem}
.linha-serv .tag{display:inline-block;margin-top:10px;font-size:.78rem;font-weight:700;color:var(--noite);background:var(--ambar);padding:3px 10px;border-radius:99px}
.linha-serv p{color:var(--suave)}
.linha-serv ul{list-style:none;font-size:.95rem;display:flex;flex-direction:column;gap:7px}
.linha-serv li{padding-left:24px;position:relative}
.linha-serv li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:2px solid var(--verde-claro);border-bottom:2px solid var(--verde-claro);transform:rotate(-45deg)}
.linha-serv.destaque{background:linear-gradient(90deg,rgba(33,163,102,.12),transparent 70%)}

/* processo */

/* mini animações do catálogo */
.prev{position:relative;height:132px;border-radius:12px;background:var(--noite);border:1px solid var(--linha);overflow:hidden;margin-bottom:6px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--suave)}
.prev *{animation-play-state:paused}
.prev.vivo *{animation-play-state:running}
.prev .row{position:absolute;left:14px;right:14px;height:24px;border-radius:6px;background:var(--painel-2);display:flex;align-items:center;gap:8px;padding:0 8px}
.prev .dot{width:12px;height:12px;border-radius:50%;flex:none}
.prev .bar{height:6px;border-radius:3px;background:var(--linha)}
.prev .pts{margin-left:auto;color:var(--texto)}
/* bolão: ranking que troca de posição */
.a-bolao .r1{top:14px;animation:bol1 6s infinite}
.a-bolao .r2{top:46px;animation:bol2 6s infinite}
.a-bolao .r3{top:78px}
.a-bolao .gol{position:absolute;right:16px;bottom:6px;font:700 11px Manrope,sans-serif;color:var(--ambar);opacity:0;animation:gol 6s infinite}
@keyframes bol1{0%,40%{top:14px}50%,90%{top:46px}100%{top:14px}}
@keyframes bol2{0%,40%{top:46px;box-shadow:none}50%,90%{top:14px;box-shadow:0 0 0 1.5px var(--verde-claro)}100%{top:46px}}
@keyframes gol{0%,38%{opacity:0;transform:translateY(6px)}45%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
/* caixa: barras e total */
.a-caixa .cols{position:absolute;left:14px;right:14px;bottom:14px;top:40px;display:flex;align-items:flex-end;gap:6px}
.a-caixa .cols i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--verde),var(--verde-claro));transform-origin:bottom;animation:sobe 4s infinite}
.a-caixa .tot{position:absolute;left:14px;top:12px;font:800 16px "Bricolage Grotesque",sans-serif;color:var(--verde-claro)}
@keyframes sobe{0%{transform:scaleY(.15)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
/* estoque: caixas entrando e nível */
.a-estoque .box{position:absolute;bottom:22px;width:26px;height:26px;border-radius:5px;background:#B7791F;border:2px solid var(--ambar);animation:esteira 4s linear infinite}
.a-estoque .esteira{position:absolute;left:0;right:0;bottom:16px;height:4px;background:var(--linha)}
.a-estoque .nivel{position:absolute;right:14px;top:14px;width:70px}
.a-estoque .nivel .bar{width:100%}
.a-estoque .nivel .bar b{display:block;height:100%;border-radius:3px;background:var(--verde-claro);animation:nivel 4s infinite}
@keyframes esteira{from{left:-30px}to{left:105%}}
@keyframes nivel{0%{width:20%;background:#F2766B}50%,100%{width:90%;background:var(--verde-claro)}}
/* agenda: horários sendo marcados */
.a-agenda .grade{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.a-agenda .grade i{border-radius:4px;background:var(--painel-2)}
/* crm: funil */
.a-crm .f{position:absolute;left:50%;height:20px;border-radius:5px;transform:translateX(-50%);background:var(--painel-2);overflow:hidden}
.a-crm .f b{display:block;height:100%;background:linear-gradient(90deg,var(--verde),var(--verde-claro));animation:enche 4.5s infinite}
@keyframes enche{0%{width:0}40%,85%{width:100%}100%{width:0}}
/* site: página sendo montada */
.a-site .nav{position:absolute;left:14px;right:14px;top:12px;height:10px;border-radius:3px;background:var(--painel-2)}
.a-site .blk{position:absolute;border-radius:5px;background:var(--painel-2);opacity:0;animation:monta 5s infinite}
@keyframes monta{0%{opacity:0;transform:translateY(8px)}15%,85%{opacity:1;transform:none}100%{opacity:0}}
/* landing: botão pulsando + carrinho */
.a-landing .cta{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);background:var(--verde);color:#fff;font:700 12px Manrope,sans-serif;padding:8px 18px;border-radius:8px;animation:pulsa 1.8s infinite}
.a-landing .h{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:60%;height:10px;border-radius:3px;background:var(--painel-2)}
.a-landing .h2{top:38px;width:40%}
.a-landing .venda{position:absolute;right:12px;top:12px;font:700 11px Manrope,sans-serif;color:var(--verde-claro);animation:venda 3.6s infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(33,163,102,.55)}60%{box-shadow:0 0 0 14px rgba(33,163,102,0)}}
@keyframes venda{0%,50%{opacity:0;transform:translateY(6px)}60%,90%{opacity:1;transform:none}100%{opacity:0}}
/* cardápio: QR com linha de leitura */
.a-cardapio .qr{position:absolute;left:24px;top:50%;width:76px;height:76px;transform:translateY(-50%);background:#fff;border-radius:6px;padding:6px;display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.a-cardapio .qr i{background:#0D1B2A}
.a-cardapio .qr i.v{background:#fff}
.a-cardapio .scan{position:absolute;left:20px;width:84px;height:2px;background:#F2766B;box-shadow:0 0 8px #F2766B;animation:scan 2.2s ease-in-out infinite alternate}
.a-cardapio .pedido{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:44%;display:flex;flex-direction:column;gap:6px}
.a-cardapio .pedido span{height:18px;border-radius:9px 9px 9px 2px;background:#1F5132;opacity:0}
@keyframes scan{from{top:30px}to{top:100px}}
/* automação: linhas recebendo check */
.a-auto .ln{position:absolute;left:14px;right:14px;height:20px;display:flex;align-items:center;gap:8px}
.a-auto .ln .bar{flex:1}
.a-auto .ok{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--linha);position:relative;flex:none}
.a-auto .ok::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--verde-claro);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0)}
.a-auto .raio{position:absolute;right:14px;top:10px;color:var(--ambar);font:700 11px Manrope,sans-serif}
/* bot: conversa */
.a-bot .msg{position:absolute;max-width:62%;padding:6px 10px;border-radius:10px;font:600 11px Manrope,sans-serif;opacity:0}
.a-bot .cli{left:12px;background:var(--painel-2);color:var(--texto);border-bottom-left-radius:2px}
.a-bot .bt{right:12px;background:#1F5132;color:#DFF5E7;border-bottom-right-radius:2px}
.a-bot .dig{display:inline-flex;gap:3px}
.a-bot .dig i{width:5px;height:5px;border-radius:50%;background:#DFF5E7;animation:dig 1s infinite}
.a-bot .dig i:nth-child(2){animation-delay:.15s}.a-bot .dig i:nth-child(3){animation-delay:.3s}
@keyframes dig{0%,100%{opacity:.3}50%{opacity:1}}
/* painel: linha desenhando */
.a-painel svg{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.a-painel .linha{fill:none;stroke:var(--verde-claro);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:desenha 4.5s infinite}
.a-painel .area{fill:url(#gp);opacity:0;animation:area 4.5s infinite}
@keyframes desenha{0%{stroke-dashoffset:400}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:400}}
@keyframes area{0%,35%{opacity:0}55%,88%{opacity:1}100%{opacity:0}}
/* vps: servidor com luzes */
.a-vps .srv{position:absolute;left:24px;width:110px;height:24px;border-radius:5px;background:var(--painel-2);border:1px solid var(--linha);display:flex;align-items:center;gap:5px;padding:0 8px}
.a-vps .srv i{width:6px;height:6px;border-radius:50%;background:var(--verde-claro);animation:led 1.2s steps(2) infinite}
.a-vps .srv i:nth-child(2){animation-duration:.8s;background:var(--ambar)}
.a-vps .srv b{margin-left:auto;width:36px;height:4px;border-radius:2px;background:var(--linha)}
.a-vps .cad{position:absolute;right:18px;top:50%;transform:translateY(-50%);text-align:center;font:700 11px Manrope,sans-serif;color:var(--verde-claro)}
.a-vps .cad span{display:block;font-size:26px;animation:respira 3s ease-in-out infinite}
@keyframes led{50%{opacity:.2}}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.prev *{animation:none!important}.a-site .blk,.a-bot .msg,.a-cardapio .pedido span{opacity:1}}



/* planos */
.planos{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:stretch}
.plano{position:relative;background:var(--painel);border:1px solid var(--linha);border-radius:22px;padding:36px;display:flex;flex-direction:column}
.plano h3{font-size:1.6rem;margin-bottom:6px}
.plano .sub{color:var(--suave);margin-bottom:22px}
.plano .valor{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:4px}
.plano .valor small{display:block;font:500 .9rem Manrope,sans-serif;color:var(--suave);margin-top:2px}
.plano ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:24px 0 30px;flex:1}
.plano li{padding-left:30px;position:relative}
.plano li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:6px;background:rgba(76,195,138,.15)}
.plano li::after{content:"";position:absolute;left:7px;top:.42em;width:5px;height:10px;border:solid var(--verde-claro);border-width:0 2px 2px 0;transform:rotate(45deg)}
.plano li.nao{color:var(--suave)}
.plano li.nao::before{background:rgba(141,162,184,.12)}
.plano li.nao::after{border:0;left:5px;top:.75em;width:10px;height:2px;background:var(--suave);transform:none}
.plano .btn{align-self:flex-start}
.plano.top{background:linear-gradient(160deg,rgba(33,163,102,.16),var(--painel) 55%);border:2px solid var(--verde)}
.plano.top .fita{position:absolute;top:-14px;left:36px;font:800 .8rem Manrope,sans-serif;color:var(--noite);background:var(--ambar);padding:4px 14px;border-radius:99px}
.calma{display:flex;gap:14px;align-items:center;background:var(--noite);border:1px solid var(--linha);border-radius:14px;padding:14px 16px;margin-top:4px;font-size:.95rem;color:var(--suave)}
.calma b{color:var(--texto)}
.calma .pulso{width:12px;height:12px;border-radius:50%;background:var(--verde-claro);flex:none;box-shadow:0 0 0 0 rgba(76,195,138,.6);animation:pulsoP 2s infinite}
@keyframes pulsoP{70%{box-shadow:0 0 0 10px rgba(76,195,138,0)}100%{box-shadow:0 0 0 0 rgba(76,195,138,0)}}
@media (max-width:960px){.planos{grid-template-columns:1fr;gap:34px}.plano.top{order:-1}}
@media (prefers-reduced-motion:reduce){.calma .pulso{animation:none}}

/* app de compras */
#app{position:relative;overflow:hidden}
#app::before{content:"";position:absolute;width:700px;height:700px;left:-260px;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(245,184,61,.10),transparent 65%);pointer-events:none}
.app-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.app-grid .tag{display:inline-block;font-size:.8rem;font-weight:800;color:var(--noite);background:var(--ambar);padding:3px 12px;border-radius:99px;margin-bottom:16px}
.app-grid h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:16px}
.app-grid .lead{color:var(--suave);font-size:1.08rem;margin-bottom:28px;max-width:32em}
.recursos{list-style:none;display:flex;flex-direction:column;gap:18px;margin-bottom:30px}
.recursos li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.recursos .ri{width:40px;height:40px;border-radius:10px;background:var(--painel-2);border:1px solid var(--linha);display:grid;place-items:center;font-size:1.1rem}
.recursos b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.08rem;margin-bottom:2px}
.recursos span{color:var(--suave);font-size:.95rem}
.nota-app{font-size:.85rem;color:var(--suave);border-left:2px solid var(--linha);padding-left:12px;margin-bottom:26px;max-width:36em}
/* celular */
.fone{position:relative;width:310px;height:620px;margin:0 auto;border-radius:44px;background:#05101C;border:10px solid #1C2E44;box-shadow:0 50px 90px -30px rgba(0,0,0,.75),0 0 0 1px #2A4058;overflow:hidden}
.fone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:12px;background:#1C2E44;z-index:5}
.tela{position:absolute;inset:0;padding:44px 16px 16px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.tela-top{display:flex;justify-content:space-between;align-items:center}
.tela-top b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px}
.regiao{font-size:11px;color:var(--verde-claro);background:rgba(33,163,102,.14);padding:3px 9px;border-radius:99px}
.busca{display:flex;align-items:center;gap:8px;background:var(--painel-2);border:1.5px solid var(--linha);border-radius:12px;padding:9px 12px;color:var(--texto);font-family:"JetBrains Mono",monospace;font-size:12px;min-height:38px}
.busca.on{border-color:var(--verde-claro)}
.busca i{font-style:normal;opacity:.6}
.busca .cur{display:inline-block;width:6px;height:13px;background:var(--ambar);margin-left:1px;animation:pisca 1s steps(1) infinite}
.resultados{display:flex;flex-direction:column;gap:7px}
.res{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:8px 10px;transition:opacity .35s,transform .35s,border-color .3s}
.res.esc{opacity:0;transform:translateY(10px)}
.res .img{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-size:18px;background:#0D1B2A}
.res small{display:block;color:var(--suave);font-size:10.5px}
.res .pr{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:14px}
.res.melhor{border-color:var(--verde-claro)}
.res.melhor .pr{color:var(--verde-claro)}
.selo-b{font-size:9.5px;font-weight:800;color:var(--noite);background:var(--verde-claro);padding:1px 6px;border-radius:99px;margin-left:4px}
.lista-tit{display:flex;justify-content:space-between;align-items:center;margin-top:4px;color:var(--suave);font-size:11px;font-weight:700}
.itens{display:flex;flex-direction:column;gap:6px}
.it{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:var(--painel-2);transition:opacity .35s,transform .35s}
.it.esc{opacity:0;transform:translateX(-14px)}
.ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--suave);flex:none;display:grid;place-items:center;font-size:11px;color:var(--noite)}
.it.feito .ck{background:var(--verde-claro);border-color:var(--verde-claro)}
.it.feito .nm{text-decoration:line-through;color:var(--suave)}
.it .q{margin-left:auto;color:var(--suave);font-size:11px}
.it .who{width:20px;height:20px;border-radius:50%;font-size:9px;font-weight:800;display:grid;place-items:center;color:var(--noite);flex:none}
.total-app{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:rgba(33,163,102,.12);border:1px solid rgba(76,195,138,.4);border-radius:12px;padding:10px 12px}
.total-app b{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;color:var(--verde-claro)}
.toque{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(245,184,61,.35);border:2px solid var(--ambar);pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;z-index:6}
.toque.on{opacity:1;transform:scale(1)}
@media (max-width:960px){.app-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:380px){.fone{width:280px;height:580px}}

/* catálogo de serviços */
#catalogo{padding-top:0}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:-24px 0 28px}
.filtros button{background:none;border:1px solid var(--linha);color:var(--suave);font:600 .92rem Manrope,sans-serif;padding:9px 18px;border-radius:99px;cursor:pointer;transition:all .2s}
.filtros button:hover{color:var(--texto)}
.filtros button.on{background:var(--texto);border-color:var(--texto);color:var(--noite)}
.catalogo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.serv{background:var(--painel);border:1px solid var(--linha);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s}
.serv:hover{border-color:#36506B}
.serv[hidden]{display:none}
.serv .cat{font-size:.8rem;font-weight:700;color:var(--verde-claro)}
.serv h3{font-size:1.25rem}
.serv p{color:var(--suave);font-size:.95rem;flex:1}
.serv .inc{list-style:none;font-size:.88rem;color:var(--suave);display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.serv .inc li{background:var(--noite);border:1px solid var(--linha);border-radius:6px;padding:3px 9px}
.serv .btn{align-self:flex-start;padding:10px 18px;font-size:.92rem}
.serv.novo{border-color:rgba(245,184,61,.45)}
.serv{position:relative}
.serv .selo-novo{position:absolute;top:-11px;right:20px;z-index:2;font-size:.75rem;font-weight:800;color:var(--noite);background:var(--ambar);padding:2px 10px;border-radius:99px}
@media (max-width:960px){.catalogo{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.catalogo{grid-template-columns:1fr}}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linha)}
.passo{padding:32px 28px 0 0;position:relative}
.passo::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--verde)}
.passo .num{font-family:"JetBrains Mono";color:var(--ambar);font-size:.85rem;margin-bottom:12px;display:block}
.passo h3{font-size:1.3rem;margin-bottom:8px}
.passo p{color:var(--suave);font-size:.98rem}

/* casos */
.casos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.caso{background:var(--painel);border:1px solid var(--linha);border-radius:var(--radius-lg);padding:34px}
.caso small{color:var(--verde-claro);font-weight:700;font-size:.85rem}
.caso h3{font-size:1.6rem;margin:8px 0 22px}
.ad{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.ad div{border-radius:12px;padding:18px;font-size:.95rem}
.ad .antes{background:rgba(242,118,107,.07);border:1px dashed rgba(242,118,107,.35);color:#C9B3B0}
.ad .depois{background:rgba(33,163,102,.1);border:1px solid rgba(76,195,138,.35)}
.ad strong{display:block;font-size:.85rem;margin-bottom:6px;color:var(--texto)}
.ad .seta{align-self:center;color:var(--ambar);font-size:1.4rem;padding:0}

/* loja */
.loja-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.produto{background:var(--painel);border:1px solid var(--linha);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:12px}
.produto h3{font-size:1.3rem}
.produto p{color:var(--suave);font-size:.95rem;flex:1}
.produto .preco{font-family:"Bricolage Grotesque";font-size:1.8rem;font-weight:800}
.vazio{grid-column:1/-1;border:1px dashed var(--linha);border-radius:var(--radius-lg);padding:48px 28px;text-align:center;color:var(--suave)}
.vazio h3{color:var(--texto);font-size:1.4rem;margin-bottom:8px}
.vazio .btn{margin-top:20px}
.pix-selo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;color:var(--suave);font-size:.9rem;margin-top:22px}
.pix-selo b{color:#32BCAD}

/* canal */
.canal{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;background:var(--painel);border:1px solid var(--linha);border-radius:24px;padding:48px;position:relative;overflow:hidden}
.canal::after{content:"";position:absolute;right:-80px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(245,184,61,.15),transparent 70%)}
.canal h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px}
.canal p{color:var(--suave);margin-bottom:28px}
.tela-yt{position:relative;z-index:1;aspect-ratio:16/9;border-radius:14px;background:var(--noite);border:1px solid var(--linha);display:grid;place-items:center;text-decoration:none;overflow:hidden}
.tela-yt{width:100%;padding:0;cursor:pointer}
.tela-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tela-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mais-videos{display:inline-block;margin-top:14px;color:var(--suave);font-size:.92rem;position:relative;z-index:1}
.mais-videos:hover{color:var(--texto)}
.play{position:relative;width:72px;height:72px;border-radius:50%;background:#E5322D;display:grid;place-items:center;transition:transform .2s}
.play svg{width:26px;fill:#fff;margin-left:4px}
.tela-yt:hover .play{transform:scale(1.07)}

/* contato */
.contato{text-align:center;max-width:40em;margin:0 auto}
.contato h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:16px}
.contato p{color:var(--suave);margin-bottom:32px;font-size:1.1rem}
.contato .cta{justify-content:center}
footer{border-top:1px solid var(--linha);padding:30px 0;color:var(--suave);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{text-decoration:none}
footer a:hover{color:var(--texto)}

/* whatsapp */
.zap{position:fixed;right:22px;bottom:22px;z-index:40;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.zap:hover{transform:scale(1.06)}
.zap svg{width:30px;height:30px;fill:#fff}
.zap::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:onda 2.4s ease-out infinite}
@keyframes onda{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:0}}

/* modal pix */
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,12,20,.75);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.modal.aberto{display:flex;animation:surge .25s ease}
@keyframes surge{from{opacity:0}}
.modal-caixa{background:var(--painel);border:1px solid var(--linha);border-radius:var(--radius-lg);max-width:420px;width:100%;padding:30px;text-align:center;position:relative}
.modal-caixa h3{font-size:1.4rem;margin-bottom:4px}
.modal-caixa .valor{font-family:"Bricolage Grotesque";font-size:2rem;font-weight:800;color:var(--verde-claro)}
#qr{background:#fff;padding:14px;border-radius:12px;width:max-content;margin:18px auto}
.copia{display:flex;gap:8px;margin-bottom:14px}
.copia input{flex:1;min-width:0;background:var(--noite);border:1px solid var(--linha);color:var(--suave);border-radius:8px;padding:10px;font:500 .75rem "JetBrains Mono"}
.copia button{padding:10px 14px;font-size:.85rem}
.modal-caixa .nota{font-size:.88rem;color:var(--suave)}
.modal-caixa #mpErro{color:var(--ambar);margin-bottom:10px}
.metodos{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--noite);padding:5px;border-radius:12px;margin:16px 0 14px}
.metodos button{background:none;border:0;color:var(--suave);font:700 .95rem Manrope,sans-serif;padding:10px;border-radius:8px;cursor:pointer}
.metodos button small{display:block;font-weight:500;font-size:.72rem;opacity:.8}
.metodos button.on{background:var(--painel-2);color:var(--texto);box-shadow:0 0 0 1px var(--linha)}
.mb-passos{text-align:left;margin:16px 0;padding-left:22px;color:var(--suave);font-size:.92rem;display:flex;flex-direction:column;gap:6px}
.mb-passos b{color:var(--texto)}
.produto .preco small{display:block;font:500 .9rem Manrope,sans-serif;color:var(--suave)}
.fechar{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--suave);font-size:1.6rem;cursor:pointer;line-height:1}

@media (max-width:960px){
  .hero .wrap,.casos,.canal{grid-template-columns:1fr}
  .loja-grid{grid-template-columns:1fr 1fr}
  .passos{grid-template-columns:1fr 1fr;row-gap:40px}
  .linha-serv{grid-template-columns:44px 1fr}
  .linha-serv > *:not(.n){grid-column:2}
  .linha-serv > *{padding:18px 20px}
  .linha-serv .n{grid-row:span 3}
  .menu{display:none}
  section{padding:76px 0}
  .hero{padding:52px 0 70px}
  .canal{padding:30px}
}
@media (max-width:560px){
  .loja-grid,.passos{grid-template-columns:1fr}
  .ad{grid-template-columns:1fr}
  .ad .seta{transform:rotate(90deg);justify-self:center}
  .sis{grid-template-columns:1fr}
  .sis-lado{display:none}
  .grade{grid-template-columns:28px repeat(3,1fr)}
  .grade .x4{display:none}
  .nav .btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =========================================================
   MULTIPÁGINA: cor de destaque por página, menu, FAQ, visuais
   ========================================================= */
:root{--acc:#4CC38A;--acc-2:#21A366;--acc-soft:rgba(76,195,138,.14)}
.pg-sistemas{--acc:#4CC38A;--acc-2:#21A366;--acc-soft:rgba(76,195,138,.14)}
.pg-bolao{--acc:#A3E635;--acc-2:#65A30D;--acc-soft:rgba(163,230,53,.13)}
.pg-app{--acc:#F5B83D;--acc-2:#D9971A;--acc-soft:rgba(245,184,61,.14)}
.pg-sites{--acc:#38BDF8;--acc-2:#0284C7;--acc-soft:rgba(56,189,248,.13)}
.pg-planos{--acc:#C4B5FD;--acc-2:#8B5CF6;--acc-soft:rgba(196,181,253,.13)}
.pg-loja{--acc:#32BCAD;--acc-2:#0F8F82;--acc-soft:rgba(50,188,173,.14)}

/* menu */
.menu a{position:relative}
.menu a[aria-current="page"]{color:var(--texto)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--acc)}
.menu-btn{display:none;background:none;border:1px solid var(--linha);color:var(--texto);width:44px;height:44px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
@media (max-width:960px){
  .menu-btn{display:inline-flex}
  .menu.aberto{display:flex;position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--noite);border-bottom:1px solid var(--linha);padding:8px 20px 20px;z-index:29}
  .menu.aberto a{padding:14px 0;border-bottom:1px solid var(--linha);font-size:1.05rem;color:var(--texto)}
  .menu.aberto a[aria-current="page"]{color:var(--acc)}
  .menu.aberto a[aria-current="page"]::after{display:none}
  .nav .btn{display:none}
}

/* cabeçalho das páginas internas */
.ph{position:relative;padding:72px 0 90px;overflow:hidden;border-bottom:1px solid var(--linha)}
.ph::before{content:"";position:absolute;width:760px;height:760px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(circle,var(--acc-soft),transparent 66%);pointer-events:none}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);background-size:96px 32px;opacity:.22;mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 10%,transparent 70%)}
.ph .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ph.so-texto .wrap{grid-template-columns:1fr;max-width:860px;text-align:center}
.ph.so-texto .lead{margin-left:auto;margin-right:auto}
.ph.so-texto .cta,.ph.so-texto .trilha{justify-content:center}
.trilha{display:flex;gap:8px;font-size:.85rem;color:var(--suave);margin-bottom:22px;flex-wrap:wrap}
.trilha a{text-decoration:none}.trilha a:hover{color:var(--texto)}
.ph .selo{display:inline-block;font-size:.82rem;font-weight:800;color:var(--noite);background:var(--acc);padding:4px 14px;border-radius:99px;margin-bottom:18px}
.ph h1{font-size:clamp(2.3rem,5vw,3.9rem);font-weight:800;margin-bottom:22px}
.ph .lead{font-size:1.15rem;color:var(--suave);max-width:32em;margin-bottom:34px}
.ph .btn-verde{background:var(--acc-2)}
.ph .btn-verde:hover{filter:brightness(1.1)}
.pg-bolao .ph .btn-verde,.pg-app .ph .btn-verde,.pg-planos .ph .btn-verde{color:#0D1B2A;background:var(--acc)}

/* blocos de benefícios */
.beneficios{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.benef{display:grid;grid-template-columns:48px 1fr;gap:16px;background:var(--painel);border:1px solid var(--linha);border-radius:18px;padding:24px}
.benef .ri{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;background:var(--acc-soft);border:1px solid var(--linha)}
.benef h3{font-size:1.18rem;margin-bottom:4px}
.benef p{color:var(--suave);font-size:.96rem}
@media (max-width:760px){.beneficios{grid-template-columns:1fr}}

/* perguntas frequentes */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--linha);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.6rem Manrope,sans-serif;color:var(--acc);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--suave);padding:0 0 22px;max-width:44em}

/* outros serviços (links entre páginas) */
.outros{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.outro{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--painel);border:1px solid var(--linha);border-radius:18px;padding:22px 24px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.outro::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.outro:hover{border-color:var(--c);transform:translateY(-2px)}
.outro b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem}
.outro span{color:var(--suave);font-size:.92rem}
.outro i{font-style:normal;color:var(--c);font-weight:700;font-size:.9rem;margin-top:6px}
@media (max-width:860px){.outros{grid-template-columns:1fr}}

/* cartões da página inicial */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.area{--c:#4CC38A;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--painel);border:1px solid var(--linha);border-radius:20px;padding:24px;transition:border-color .2s,transform .2s}
.area:hover{border-color:var(--c);transform:translateY(-3px)}
.area .prev{margin-bottom:8px}
.area .cat{font-size:.8rem;font-weight:800;color:var(--c)}
.area h3{font-size:1.3rem}
.area p{color:var(--suave);font-size:.95rem;flex:1}
.area .ir{color:var(--c);font-weight:700;font-size:.95rem}
@media (max-width:960px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.areas{grid-template-columns:1fr}}

/* visual: janela genérica */
.mock{background:var(--painel);border:1px solid var(--linha);border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden}
.mock-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--linha);background:var(--painel-2);font-size:.82rem;color:var(--suave);font-weight:600}
.mock-top i{width:11px;height:11px;border-radius:50%;background:#2F4762}
.mock-top span{margin-left:10px}
.mock-body{padding:22px}

/* visual: auditoria (sistemas) */
.audit{display:flex;flex-direction:column;gap:10px}
.audit .ev{display:flex;gap:12px;align-items:center;background:var(--painel-2);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;font-size:.92rem;opacity:0;animation:evIn 9s infinite}
.audit .ev small{display:block;color:var(--suave);font-size:.78rem}
.audit .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.78rem;color:var(--noite);flex:none}
.audit .ev:nth-child(2){animation-delay:.7s}.audit .ev:nth-child(3){animation-delay:1.4s}.audit .ev:nth-child(4){animation-delay:2.1s}
@keyframes evIn{0%{opacity:0;transform:translateX(-16px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.kp3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kp3 div{background:var(--painel-2);border:1px solid var(--linha);border-radius:12px;padding:12px}
.kp3 small{display:block;color:var(--suave);font-size:.75rem}
.kp3 b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.2rem}

/* visual: ranking do bolão */
.rank{position:relative;height:300px}
.rank .lin{position:absolute;left:40px;right:0;height:52px;display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;background:var(--painel-2);border:1px solid var(--linha);border-radius:12px;padding:0 14px;font-weight:700;transition:none}
.rank .pos{position:absolute;left:0;width:32px;height:52px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;color:var(--suave);font-size:.9rem}
.rank .pos.p1{top:0;color:var(--acc)}.rank .pos.p2{top:62px}.rank .pos.p3{top:124px}.rank .pos.p4{top:186px}.rank .pos.p5{top:248px}
@media (max-width:560px){.mock-body{padding:14px}.rank .lin{gap:8px;padding:0 10px}}
.rank .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;color:var(--noite)}
.rank .pt{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem}
.rank .l1{top:0;animation:rk1 8s infinite}
.rank .l2{top:62px;animation:rk2 8s infinite}
.rank .l3{top:124px}.rank .l4{top:186px}.rank .l5{top:248px}
.rank .l2 .pt{position:relative}
.rank .l2 .pt b{display:inline-block}
.rank .l2 .va{animation:vA 8s infinite}
.rank .l2 .vb{position:absolute;left:0;top:0;opacity:0;animation:vB 8s infinite}
@keyframes vA{0%,40%{opacity:1}44%,94%{opacity:0}100%{opacity:1}}
@keyframes vB{0%,40%{opacity:0}44%,94%{opacity:1}100%{opacity:0}}
@keyframes rk1{0%,42%{top:0}52%,92%{top:62px}100%{top:0}}
@keyframes rk2{0%,42%{top:62px;border-color:var(--linha)}52%,92%{top:0;border-color:var(--acc)}100%{top:62px}}
.gol-tag{position:absolute;right:-6px;top:-18px;font:800 .85rem Manrope,sans-serif;color:var(--noite);background:var(--acc);padding:4px 12px;border-radius:99px;opacity:0;animation:golT 8s infinite}
@keyframes golT{0%,36%{opacity:0;transform:translateY(8px)}42%,80%{opacity:1;transform:none}88%,100%{opacity:0}}
.jogo{display:flex;justify-content:space-between;align-items:center;background:var(--noite);border:1px solid var(--linha);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:700}
.jogo .placar{font-family:"JetBrains Mono",monospace;font-size:1.1rem;color:var(--acc)}

/* visual: site sendo montado (sites e automações) */
.obra{position:relative;height:300px}
.obra .b{position:absolute;border-radius:10px;background:var(--painel-2);border:1px solid var(--linha);opacity:0;animation:obra 7s infinite}
.obra .b.cor{background:var(--acc-soft);border-color:var(--acc)}
@keyframes obra{0%{opacity:0;transform:translateY(12px)}10%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.obra .chat{position:absolute;right:0;bottom:0;width:58%;display:flex;flex-direction:column;gap:8px}
.obra .chat span{align-self:flex-start;max-width:90%;font-size:.82rem;font-weight:600;padding:8px 12px;border-radius:12px 12px 12px 3px;background:var(--painel-2);opacity:0;animation:obra 7s infinite}
.obra .chat span.bt{align-self:flex-end;background:#1F5132;color:#DFF5E7;border-radius:12px 12px 3px 12px}

@media (max-width:960px){.ph .wrap{grid-template-columns:1fr;gap:44px}.ph{padding:48px 0 70px}}
@media (prefers-reduced-motion:reduce){.audit .ev,.obra .b,.obra .chat span{opacity:1}.gol-tag{opacity:1}}
.tel-contato{margin:22px 0 0;color:var(--suave);font-size:1rem}
.tel-contato a{color:#25D366;font-weight:700;text-decoration:none}
.tel-contato a:hover{text-decoration:underline}
.pg-chatbot{--acc:#7C8CFF;--acc-2:#4F5FD6;--acc-soft:rgba(124,140,255,.15)}
.video-box{border-radius:20px;overflow:hidden;border:1px solid var(--linha);box-shadow:0 40px 80px -30px rgba(0,0,0,.65);background:#000;aspect-ratio:16/9}
.video-box video{width:100%;height:100%;display:block;object-fit:cover}
.demos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.demo{position:relative;background:var(--painel);border:1px solid var(--linha);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.demo.top{border:2px solid var(--acc)}
.demo .fita{position:absolute;top:14px;left:14px;z-index:2;font:800 .8rem Manrope,sans-serif;color:var(--noite);background:var(--acc);padding:4px 12px;border-radius:99px}
.demo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid var(--linha)}
.demo-txt{padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.demo-txt h3{font-size:1.45rem}
.demo-txt p{color:var(--suave)}
.demo-txt ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:4px 0 10px;flex:1}
.demo-txt li{padding-left:26px;position:relative;font-size:.95rem}
.demo-txt li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:800}
.demo-txt .btn{align-self:flex-start}
.demos.um{grid-template-columns:1fr}
.demos.um .demo{display:grid;grid-template-columns:1.15fr 1fr}
.demos.um .demo img{height:100%;aspect-ratio:auto;min-height:300px;object-position:left top;border-bottom:0;border-right:1px solid var(--linha)}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.galeria figure{background:var(--painel);border:1px solid var(--linha);border-radius:18px;overflow:hidden}
.galeria img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.galeria figcaption{padding:16px 18px;color:var(--suave);font-size:.93rem}
.galeria figcaption b{display:block;color:var(--texto);font-family:"Bricolage Grotesque",sans-serif;font-size:1.1rem;margin-bottom:2px}
@media (max-width:960px){.demos,.galeria{grid-template-columns:1fr}.demos.um .demo{grid-template-columns:1fr}.demos.um .demo img{aspect-ratio:16/9;min-height:0;height:auto;border-right:0;border-bottom:1px solid var(--linha)}}
/* redes sociais */
.redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.contato .redes{justify-content:center}
.rede{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:var(--painel);border:1px solid var(--linha);color:var(--texto);font-weight:700;font-size:.92rem;text-decoration:none;transition:border-color .2s,transform .2s}
.rede svg{width:20px;height:20px;flex:none}
.rede:hover{transform:translateY(-2px)}
.r-yt svg{color:#FF4E45}.r-yt:hover{border-color:#FF4E45}
.r-ig svg{color:#E1306C}.r-ig:hover{border-color:#E1306C}
.r-tt svg{color:#25F4EE}.r-tt:hover{border-color:#25F4EE}
.siga{margin-top:22px;color:var(--suave);font-size:.9rem;font-weight:700}
.redes.mini{margin-top:0;gap:8px}
.redes.mini .rede{padding:7px;border-radius:50%}
.redes.mini .rede span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.redes.mini .rede svg{width:18px;height:18px}
.pg-frota{--acc:#56B6C8;--acc-2:#2B8FA3;--acc-soft:rgba(86,182,200,.14)}
.pg-frota .ph .btn-verde{color:#0D1B2A;background:var(--acc)}
.pg-ordem{--acc:#FB923C;--acc-2:#EA580C;--acc-soft:rgba(251,146,60,.14)}
.pg-ordem .ph .btn-verde{color:#1A0E05;background:var(--acc)}
@media (min-width:1100px){.areas{grid-template-columns:repeat(4,1fr)}}
.menu{gap:22px}.menu a{white-space:nowrap}
@media (max-width:1180px) and (min-width:961px){
  .menu-btn{display:inline-flex}
  .menu{display:none}
  .menu.aberto{display:flex;position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--noite);border-bottom:1px solid var(--linha);padding:8px 20px 20px;z-index:29}
  .menu.aberto a{padding:14px 0;border-bottom:1px solid var(--linha);font-size:1.05rem;color:var(--texto)}
  .menu.aberto a[aria-current="page"]{color:var(--acc)}
  .menu.aberto a[aria-current="page"]::after{display:none}
  .topo-dir{margin-left:auto;margin-right:12px}
}

/* bandeiras no topo */
.topo-dir{display:flex;align-items:center;gap:16px}
.bandeiras{display:inline-flex;gap:8px;align-items:center}
.bandeiras img{width:28px;height:21px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.35);display:block}
@media (max-width:960px){.topo-dir{margin-left:auto;margin-right:12px}.bandeiras img{width:26px;height:19px}}

/* Halloween (só aparece de 24/10 a 1/11, ou com ?halloween=1) */
.hw{position:absolute;pointer-events:none;z-index:4}
.hw-teia{left:0;top:70px;width:170px;opacity:.32}
.hw-teia2{right:0;top:70px;width:120px;opacity:.22;transform:scaleX(-1)}
.hw-aranha{right:9%;top:70px;width:2px;background:rgba(232,238,244,.35);animation:hwFio 7s ease-in-out infinite}
.hw-aranha svg{position:absolute;left:-13px;bottom:-22px;width:28px}
@keyframes hwFio{0%,100%{height:60px}50%{height:150px}}
.hw-morcego{position:fixed;top:0;left:0;width:48px;z-index:6;opacity:.85;animation:hwVoo linear infinite}
.hw-morcego svg{width:100%;display:block;filter:drop-shadow(0 0 6px rgba(251,146,60,.55));animation:hwAsa .35s ease-in-out infinite alternate;transform-origin:center}
@keyframes hwAsa{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes hwVoo{0%{transform:translate(-80px,var(--y1))}25%{transform:translate(25vw,calc(var(--y1) - 40px))}50%{transform:translate(50vw,var(--y2))}75%{transform:translate(75vw,calc(var(--y2) - 50px))}100%{transform:translate(110vw,var(--y1))}}
.hw-abobora{position:absolute;left:-10px;top:-9px;width:18px;transform:rotate(-14deg);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.logo{position:relative}
.hw-faixa{display:flex;justify-content:center;align-items:center;gap:10px;background:linear-gradient(90deg,#2A1406,#4A2208,#2A1406);color:#FFD7A8;font:700 .85rem Manrope,sans-serif;padding:7px 12px;text-align:center}
.hw-faixa b{color:#FB923C}
@media (max-width:620px){.hw-faixa .longo{display:none}}
@media (max-width:620px){.hw-teia{width:110px}.hw-teia2{display:none}.hw-morcego{width:28px}.hw-faixa{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.hw-morcego{display:none}.hw-aranha{animation:none;height:90px}}