/* ================= SITE PÚBLICO FRB — estilos compartilhados (landing + ferramentas) =================
   Visual claro e limpo: muito respiro, uma cor de destaque (laranja FRB), azul-marinho no texto e nos blocos escuros. */
:root{
  --ink:#14283F; --ink-2:#2A3F57; --paper:#F6F5F1; --card:#FFFFFF; --line:#E8E5DC; --line-2:#D9D5C8;
  --amber:#F68026; --amber-d:#DF6B12; --amber-bg:#FDEBD9; --green:#1E8A5B; --green-bg:#E3F3EA; --red:#C4372C;
  --muted:#667085; --navy:#0F2034;
  --raio:16px; --sombra:0 1px 2px rgba(20,40,63,.06), 0 12px 32px rgba(20,40,63,.08);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{margin:0; font-family:'IBM Plex Sans',system-ui,sans-serif; background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%;}
a{color:inherit;}
[hidden]{display:none !important;}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif; font-weight:700; margin:0; line-height:1.04; letter-spacing:-.005em; text-wrap:balance;}
p{margin:0;}
:focus-visible{outline:3px solid rgba(246,128,38,.55); outline-offset:2px; border-radius:6px;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-d); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--amber); border-radius:2px;}
.centro{text-align:center;} .centro .eyebrow{justify-content:center;} .centro .eyebrow::before{display:none;}

/* botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:12px; font:600 15px 'IBM Plex Sans',sans-serif; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s;}
.btn:hover{transform:translateY(-1px);}
.btn-amber{background:var(--amber); color:#fff; box-shadow:0 8px 20px rgba(246,128,38,.28);}
.btn-amber:hover{background:var(--amber-d); box-shadow:0 12px 26px rgba(246,128,38,.36);}
.btn-dark{background:var(--ink); color:#fff;} .btn-dark:hover{background:var(--navy);}
.btn-line{background:#fff; color:var(--ink); border-color:var(--line-2);} .btn-line:hover{border-color:var(--ink);}
.btn-wpp{background:#25D366; color:#fff;}
.btn-sm{padding:9px 16px; font-size:14px; border-radius:10px;}

/* navegação */
#nav{position:fixed; inset:0 0 auto 0; z-index:50; background:rgba(246,245,241,.86); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;}
#nav.rolou{border-color:var(--line); box-shadow:0 6px 22px rgba(20,40,63,.06);}
#nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px;}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none;}
.marca img{width:34px; height:34px; border-radius:9px;}
.marca span{font:700 24px 'Barlow Condensed',sans-serif; letter-spacing:.01em;}
.nav-links{display:flex; gap:26px;}
.nav-links a{font-size:14px; font-weight:500; text-decoration:none; color:var(--ink-2);} .nav-links a:hover{color:var(--amber-d);}
.nav-acoes{display:flex; gap:10px; align-items:center;}
@media (max-width:900px){ .nav-links{display:none;} }
@media (max-width:480px){ .nav-acoes .btn-line{display:none;} }

/* seções */
section{padding:104px 0;}
section.compacta{padding:72px 0;}
section.clara{background:var(--card);}
.cabeca{max-width:660px; margin:0 auto 52px;} .cabeca h2{font-size:clamp(32px,4.6vw,46px);} .cabeca p{margin-top:14px; color:var(--muted); font-size:17px;}
.cabeca.esq{margin-left:0;}

/* hero */
#hero{padding:150px 0 96px; position:relative; overflow:hidden;}
#hero::before{content:""; position:absolute; top:-180px; right:-160px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(246,128,38,.14), rgba(246,128,38,0) 68%); pointer-events:none;}
.hero-grade{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative;}
@media (max-width:960px){ .hero-grade{grid-template-columns:1fr; gap:48px;} #hero{padding-top:124px;} }
#hero h1{font-size:clamp(42px,6.2vw,68px); margin-bottom:20px;}
#hero h1 em{font-style:normal; color:var(--amber-d);}
.hero-texto{font-size:18px; color:var(--ink-2); max-width:540px; margin-bottom:30px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px;}
.hero-prova{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13.5px; color:var(--muted);}
.hero-prova span{display:flex; align-items:center; gap:7px;} .hero-prova i{color:var(--green); font-style:normal; font-weight:800;}

/* maquete do produto (CSS puro) */
.maquete{position:relative; padding:0 0 28px 20px;}
.janela{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--sombra); overflow:hidden;}
.janela-topo{display:flex; align-items:center; gap:7px; padding:12px 14px; background:#FAF9F5; border-bottom:1px solid var(--line);}
.janela-topo i{width:10px; height:10px; border-radius:50%; background:#E3DFD2;} .janela-topo span{margin-left:10px; font:500 11.5px 'IBM Plex Mono',monospace; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:7px; padding:3px 10px;}
.janela-corpo{display:grid; grid-template-columns:46px 1fr; min-height:300px;}
.janela-lateral{background:var(--navy); display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0;}
.janela-lateral b{width:24px; height:24px; border-radius:7px; background:rgba(255,255,255,.12);} .janela-lateral b:first-child{background:var(--amber);}
.janela-conteudo{padding:18px;}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
.kpi{border:1px solid var(--line); border-radius:12px; padding:10px 12px;} .kpi small{display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;} .kpi b{font:700 19px 'Barlow Condensed',sans-serif; white-space:nowrap;}
.barras{display:flex; align-items:flex-end; gap:7px; height:92px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin-bottom:12px;}
.barras span{flex:1; background:var(--amber-bg); border-radius:5px 5px 0 0;} .barras span.on{background:var(--amber);}
.linhas div{display:flex; justify-content:space-between; gap:10px; padding:8px 2px; border-bottom:1px dashed var(--line); font-size:12px; color:var(--ink-2);} .linhas div:last-child{border:0;}
.pilula{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--green-bg); color:var(--green);} .pilula.laranja{background:var(--amber-bg); color:var(--amber-d);}
.flutua{position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sombra); padding:12px 14px; font-size:12.5px; max-width:240px;}
.flutua b{display:block; font-size:12px; margin-bottom:3px;} .flutua small{color:var(--muted); font-size:11.5px; display:block;}
.flutua.a{left:-6px; bottom:6px;} .flutua.b{right:-10px; top:-18px;}
@media (max-width:1100px){ .flutua.b{display:none;} }
@media (max-width:560px){ .flutua.a{left:0;} .maquete{padding-left:0;} }

/* faixa de módulos */
.faixa{padding:26px 0; border-block:1px solid var(--line); background:var(--card);}
.faixa .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; font-size:14px; font-weight:500; color:var(--ink-2);}
.faixa span{display:flex; align-items:center; gap:8px;} .faixa span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber);}

/* cartões genéricos */
.grade{display:grid; gap:20px;} .g3{grid-template-columns:repeat(3,1fr);} .g2{grid-template-columns:repeat(2,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){ .g3,.g4{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .g3,.g2,.g4{grid-template-columns:1fr;} }
.cartao{background:var(--card); border:1px solid var(--line); border-radius:var(--raio); padding:26px;}
.cartao h3{font-size:25px; margin-bottom:8px;} .cartao p{color:var(--muted); font-size:15px;}
.icone{width:44px; height:44px; border-radius:12px; background:var(--amber-bg); color:var(--amber-d); display:grid; place-items:center; font:700 18px 'Barlow Condensed',sans-serif; margin-bottom:16px;}

/* ferramentas gratuitas */
#ferramentas{background:linear-gradient(180deg,var(--paper),#EFEDE5);}
.ferramentas-grade{display:grid; grid-template-columns:1.25fr .75fr; gap:24px; align-items:start;}
@media (max-width:980px){ .ferramentas-grade{grid-template-columns:1fr;} }
.ferramenta{background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sombra); padding:30px;}
.ferramenta h3{font-size:30px; margin-bottom:6px;} .ferramenta .sub{color:var(--muted); font-size:14.5px; margin-bottom:22px;}
.selo-gratis{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--green-bg); color:var(--green); border-radius:99px; padding:4px 10px; margin-bottom:12px;}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .campos .cheio{grid-column:1/-1;}
@media (max-width:560px){ .campos{grid-template-columns:1fr;} }
.campo label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px;}
.campo input,.campo select{width:100%; padding:12px 13px; border:1.5px solid var(--line-2); border-radius:11px; font:inherit; font-size:15.5px; background:#fff; color:var(--ink);}
.campo input:focus,.campo select:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 4px rgba(246,128,38,.14);}
.contador{display:flex; align-items:center;} .contador button{width:42px; height:46px; border:1.5px solid var(--line-2); background:#fff; font-size:20px; cursor:pointer; color:var(--ink);} .contador button:first-child{border-radius:11px 0 0 11px;} .contador button:last-child{border-radius:0 11px 11px 0;}
.contador input{border-radius:0; text-align:center; border-left:0; border-right:0; width:70px;}
.opcoes{display:flex; flex-wrap:wrap; gap:8px 22px; margin:6px 0 4px;} .opcoes label{display:flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer;} .opcoes input{width:18px; height:18px; accent-color:var(--amber);}
.resultado{margin-top:22px; border-radius:16px; background:var(--navy); color:#fff; padding:24px;}
.resultado small{color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.resultado .valor{font:700 50px 'Barlow Condensed',sans-serif; line-height:1.05; margin:4px 0 12px; color:#fff;} .resultado .valor span{font-size:20px; color:var(--amber);}
.resultado dl{display:grid; grid-template-columns:1fr auto; gap:6px 18px; margin:0 0 14px; font-size:13.5px; color:rgba(255,255,255,.78);} .resultado dd{margin:0; text-align:right; font-family:'IBM Plex Mono',monospace; color:#fff;}
.resultado .nota{font-size:12px; color:rgba(255,255,255,.55); margin-top:10px;}
.resultado-acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.erro-linha{color:var(--red); font-size:13.5px; margin-top:12px; min-height:20px;}
.passos-pergunta{margin-bottom:18px;} .passos-pergunta p{font-weight:600; font-size:14.5px; margin-bottom:10px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;} .chip{border:1.5px solid var(--line-2); background:#fff; border-radius:99px; padding:9px 15px; font:500 13.5px 'IBM Plex Sans',sans-serif; cursor:pointer; color:var(--ink);} .chip:hover{border-color:var(--ink);} .chip.on{background:var(--ink); color:#fff; border-color:var(--ink);}
.resposta{margin-top:18px; border-radius:14px; padding:18px; background:var(--amber-bg); font-size:14.5px;} .resposta b{display:block; margin-bottom:6px; font-size:16px;} .resposta small{display:block; margin-top:10px; color:var(--muted); font-size:12px;}
.resposta.verde{background:var(--green-bg);}

/* linhas de recurso */
.recurso{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:96px;} .recurso:last-child{margin-bottom:0;}
.recurso.inverso .recurso-visual{order:-1;}
@media (max-width:900px){ .recurso{grid-template-columns:1fr; gap:34px; margin-bottom:72px;} .recurso.inverso .recurso-visual{order:0;} }
.recurso h3{font-size:clamp(30px,4vw,40px); margin-bottom:14px;} .recurso > div > p{color:var(--muted); font-size:16.5px; margin-bottom:20px;}
.lista-check{list-style:none; margin:0; padding:0; display:grid; gap:10px;} .lista-check li{display:flex; gap:11px; font-size:15px;} .lista-check li::before{content:"✓"; color:var(--green); font-weight:800;}
.recurso-visual{background:linear-gradient(145deg,#FFF6EC,#F1EEE4); border:1px solid var(--line); border-radius:22px; padding:30px; min-height:280px; display:grid; align-content:center; gap:12px;}
.bolha{max-width:88%; padding:12px 15px; border-radius:16px; font-size:14px; box-shadow:0 1px 2px rgba(20,40,63,.07);} .bolha.eu{background:#DFF5E4; margin-left:auto; border-bottom-right-radius:4px;} .bolha.ia{background:#fff; border-bottom-left-radius:4px;} .bolha small{display:block; color:var(--muted); font-size:11px; margin-top:3px;}
.doc-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13.5px;} .doc-card b{font-size:14px; display:block;} .doc-card small{color:var(--muted);}
.rota-mock{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; font-size:13px;} .rota-mock svg{width:100%; height:120px; display:block; margin-bottom:10px;}
.rota-mock .linha{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--line);} .rota-mock .linha:last-child{border:0;}

/* como funciona */
.passos{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:p;}
@media (max-width:900px){ .passos{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .passos{grid-template-columns:1fr;} }
.passo{background:var(--card); border:1px solid var(--line); border-radius:var(--raio); padding:26px 22px; position:relative;} .passo::before{counter-increment:p; content:counter(p); font:700 44px 'Barlow Condensed',sans-serif; color:var(--amber-bg); display:block; line-height:1; margin-bottom:10px;}
.passo h3{font-size:23px; margin-bottom:8px;} .passo p{font-size:14.5px; color:var(--muted);}

/* planos */
#planos{background:var(--card);}
.periodo-toggle{display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:99px; padding:4px; margin:22px auto 0;}
.periodo-toggle button{border:0; background:transparent; padding:9px 20px; border-radius:99px; font:600 14px 'IBM Plex Sans',sans-serif; color:var(--muted); cursor:pointer;} .periodo-toggle button.ativo{background:var(--ink); color:#fff;}
.periodo-toggle .economia{color:var(--green); font-weight:700; font-size:11.5px; margin-left:6px;} .periodo-toggle button.ativo .economia{color:#8CE3B5;}
.planos-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; align-items:stretch; margin-top:46px;}
.plano-card{position:relative; background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:14px;}
.plano-card.destaque{border-color:var(--amber); box-shadow:0 22px 50px rgba(246,128,38,.16);}
.plano-card .selo{position:absolute; top:-13px; left:28px; background:var(--amber); color:#fff; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:5px 13px; border-radius:99px;}
.plano-card h3{font-size:32px;} .plano-desc{font-size:14.5px; color:var(--muted); min-height:66px;}
.plano-preco{font:700 52px 'Barlow Condensed',sans-serif; line-height:1;} .plano-preco small{font:500 14px 'IBM Plex Sans',sans-serif; color:var(--muted); margin-left:4px;}
.plano-equiv{font-size:13px; color:var(--green); font-weight:600; min-height:20px;}
.plano-limites{display:flex; gap:8px; flex-wrap:wrap;} .plano-limites span{background:var(--paper); font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:99px;}
.plano-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; flex:1;} .plano-card li{font-size:14.5px; display:flex; gap:10px;} .plano-card li::before{content:"✓"; color:var(--green); font-weight:800;}
.plano-card .btn{width:100%; margin-top:6px;}
.plano-mods{border-top:1px solid var(--line); padding-top:12px; font-size:13px;} .plano-mods summary{cursor:pointer; font-weight:600;}
.plano-mods .mod-grupo{margin-top:10px;} .plano-mods .mod-grupo b{display:block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.plano-mods .mod-grupo span{display:inline-block; background:var(--paper); border-radius:6px; padding:2px 8px; margin:2px 4px 2px 0; font-size:12px;}
.planos-rodape{text-align:center; color:var(--muted); font-size:14px; margin-top:28px;}

/* comparativo */
.tabela-comp{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--raio); overflow:hidden; font-size:15px;}
.tabela-comp th,.tabela-comp td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;} .tabela-comp tr:last-child td{border-bottom:0;}
.tabela-comp thead th{background:#FAF9F5; font:700 22px 'Barlow Condensed',sans-serif;} .tabela-comp th.nos{color:var(--amber-d);}
.tabela-comp td:first-child{font-weight:600; width:26%;} .tabela-comp td.nos{background:#FFFAF4;} .tabela-comp td.eles{color:var(--muted);}
.tabela-comp .ok{color:var(--green); font-weight:700;}
@media (max-width:700px){ .tabela-comp th,.tabela-comp td{padding:12px 12px; font-size:13.5px;} }

/* FAQ */
.faq{max-width:780px; margin:0 auto; display:grid; gap:10px;}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 22px;} .faq-item[open]{border-color:var(--line-2); box-shadow:var(--sombra);}
.faq-item summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; gap:16px; align-items:center;} .faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:24px; color:var(--amber-d); line-height:1;} .faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 0 20px; color:var(--ink-2); font-size:15.5px;}

/* chamada final e rodapé */
#cta-final{background:var(--navy); color:#fff; text-align:center; position:relative; overflow:hidden;}
#cta-final::before{content:""; position:absolute; left:50%; top:-260px; width:760px; height:760px; margin-left:-380px; border-radius:50%; background:radial-gradient(circle, rgba(246,128,38,.20), rgba(246,128,38,0) 65%);}
#cta-final .wrap{position:relative;} #cta-final h2{font-size:clamp(34px,5vw,52px); max-width:680px; margin:0 auto 16px;} #cta-final p{color:rgba(255,255,255,.72); font-size:17px; margin-bottom:30px;}
#cta-final .hero-cta{justify-content:center; margin:0;}
footer.rodape{background:#0B1826; color:rgba(255,255,255,.62); padding:54px 0 34px; font-size:14px;}
.rodape-grade{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; margin-bottom:34px;} @media (max-width:800px){ .rodape-grade{grid-template-columns:1fr 1fr;} }
.rodape .marca span{color:#fff;} .rodape h4{color:#fff; font:600 13px 'IBM Plex Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px;}
.rodape a{display:block; text-decoration:none; padding:4px 0; color:rgba(255,255,255,.62);} .rodape a:hover{color:#fff;}
.rodape small{display:block; border-top:1px solid rgba(255,255,255,.1); padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.45);}
#wpp-flutuante{position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgba(37,211,102,.4); text-decoration:none;}
#wpp-flutuante svg{width:28px; height:28px; fill:#fff;}

/* modal de contratação */
.ct-overlay{position:fixed; inset:0; z-index:200; background:rgba(11,24,38,.66); display:none; align-items:center; justify-content:center; padding:16px; overflow:auto; backdrop-filter:blur(3px);} .ct-overlay.aberto{display:flex;}
.ct-box{background:#fff; width:100%; max-width:480px; border-radius:22px; padding:32px 30px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.35); max-height:calc(100vh - 32px); overflow:auto;}
.ct-fechar{position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; color:var(--muted);}
.ct-box h3{font-size:32px; margin-bottom:4px;}
.ct-resumo{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--amber-bg); border-radius:12px; padding:13px 15px; margin:14px 0 18px; font-size:14.5px;}
.ct-campo{margin-bottom:13px;} .ct-campo label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px;}
.ct-campo input{width:100%; padding:12px 13px; border:1.5px solid var(--line-2); border-radius:11px; font:inherit; font-size:15.5px;} .ct-campo input:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 4px rgba(246,128,38,.14);}
.ct-erro{color:var(--red); font-size:13.5px; min-height:20px; margin-bottom:8px;} .ct-aviso{font-size:13px; color:var(--muted); margin:2px 0 16px;}
.ct-box .btn{width:100%;}

/* leve entrada ao rolar (nunca esconde o conteúdo: sem JS tudo aparece) */
.js .rev{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;} .js .rev.vis{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .js .rev{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} .btn:hover{transform:none;} }

/* páginas das ferramentas */
.pagina-ferramenta{padding:132px 0 80px;} .pagina-ferramenta h1{font-size:clamp(38px,5.4vw,58px); margin-bottom:14px;} .pagina-ferramenta .lead{font-size:18px; color:var(--ink-2); max-width:680px; margin-bottom:34px;}
.artigo{max-width:780px; margin:70px auto 0;} .artigo h2{font-size:34px; margin:46px 0 12px;} .artigo p,.artigo li{font-size:16.5px; color:var(--ink-2); margin-bottom:14px;} .artigo ul{padding-left:22px;}
.artigo table{width:100%; border-collapse:collapse; font-size:14.5px; margin:14px 0 22px;} .artigo th,.artigo td{border:1px solid var(--line); padding:10px 12px; text-align:left;} .artigo th{background:#FAF9F5;}
.cta-faixa{margin-top:54px; background:var(--navy); color:#fff; border-radius:22px; padding:36px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;} .cta-faixa h3{font-size:30px; margin-bottom:4px;} .cta-faixa p{color:rgba(255,255,255,.72); font-size:15px;}

/* nenhum bloco de grade pode alargar a página no celular (conteúdo largo encolhe/rola dentro do próprio bloco) */
.hero-grade > *, .ferramentas-grade > *, .recurso > *, .grade > *, .passos > *, .rodape-grade > *, .campos > *{min-width:0;}
@media (max-width:960px){ .hero-grade{grid-template-columns:minmax(0,1fr);} }
@media (max-width:980px){ .ferramentas-grade{grid-template-columns:minmax(0,1fr);} }
@media (max-width:900px){ .recurso{grid-template-columns:minmax(0,1fr);} }
.kpi{min-width:0; overflow:hidden;} .kpi small,.kpi b{overflow:hidden; text-overflow:ellipsis;}
@media (max-width:420px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr));} .kpis .kpi:last-child{display:none;} }

/* ================= ANIMAÇÕES (só para quem não pediu menos movimento) ================= */
#progresso{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--amber),#FFB36B); z-index:70; pointer-events:none;}

/* conversa simulada do Copiloto (janela de chat) */
.chat-janela{background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--sombra); overflow:hidden; max-width:420px; margin:0 auto; width:100%;}
.chat-topo{display:flex; align-items:center; gap:11px; padding:13px 16px; background:var(--navy); color:#fff;}
.chat-avatar{width:36px; height:36px; border-radius:50%; background:var(--amber); display:grid; place-items:center; font:700 15px 'Barlow Condensed',sans-serif; color:#fff; position:relative;}
.chat-avatar::after{content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:#3DDC84; border:2px solid var(--navy);}
.chat-topo b{display:block; font-size:14px; line-height:1.2;} .chat-status{font-size:11.5px; color:rgba(255,255,255,.65);}
.chat-corpo{height:330px; overflow:hidden; padding:16px 14px; display:flex; flex-direction:column; gap:9px; background:#EFEAE0; background-image:radial-gradient(rgba(20,40,63,.05) 1px, transparent 1px); background-size:14px 14px;}
.cb{max-width:84%; padding:9px 12px 6px; border-radius:14px; font-size:13.5px; line-height:1.45; box-shadow:0 1px 1px rgba(20,40,63,.1); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.2);}
.cb.show{opacity:1; transform:none;}
.cb.eu{align-self:flex-end; background:#DCF8C6; border-bottom-right-radius:4px;} .cb.ia{align-self:flex-start; background:#fff; border-bottom-left-radius:4px;}
.cb.ok{background:#E3F3EA;}
.cb-h{display:block; text-align:right; font-size:10.5px; color:var(--muted); margin-top:3px;} .tique{color:#34B7F1; font-weight:700;}
.cb-t small{color:var(--muted); font-size:11px;}
.cb-botoes{display:flex; gap:7px; margin-top:9px;} .cb-btn{flex:1; text-align:center; border:1.5px solid var(--line-2); border-radius:9px; padding:6px 8px; font-size:12.5px; font-weight:600; color:var(--ink-2); transition:transform .2s, background .2s, color .2s;} .cb-btn.primario{border-color:var(--amber); color:var(--amber-d);} .cb-btn.apertado{transform:scale(.93); background:var(--amber); color:#fff;}
.cb.digitando{display:flex; gap:5px; padding:13px 15px; width:62px;} .cb.digitando span{width:7px; height:7px; border-radius:50%; background:#9AA3AF; animation:ponto 1.1s infinite ease-in-out;} .cb.digitando span:nth-child(2){animation-delay:.18s;} .cb.digitando span:nth-child(3){animation-delay:.36s;}
@keyframes ponto{0%,60%,100%{transform:translateY(0); opacity:.45;} 30%{transform:translateY(-5px); opacity:1;}}
.cb-audio{display:flex; align-items:center; gap:9px; margin-bottom:6px;} .cb-audio .play{width:24px; height:24px; border-radius:50%; background:var(--amber); position:relative; flex:none;} .cb-audio .play::after{content:""; position:absolute; left:9px; top:6px; border-left:8px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;}
.cb-audio .onda{display:flex; align-items:center; gap:2px; height:22px; flex:1;} .cb-audio .onda i{width:3px; border-radius:2px; background:#9AB59F; height:30%;} .cb-audio .onda i:nth-child(3n){height:70%;} .cb-audio .onda i:nth-child(4n+1){height:100%;} .cb-audio .onda i:nth-child(5n+2){height:48%;}
.cb-audio em{font-size:11px; color:var(--muted); font-style:normal;}
.cb.tocando .onda i{animation:onda .55s ease-in-out infinite alternate; background:var(--green);} .cb.tocando .onda i:nth-child(odd){animation-delay:-.25s;}
@keyframes onda{from{transform:scaleY(.35);} to{transform:scaleY(1.15);}}
.cb-foto{position:relative; width:150px; height:96px; background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:9px 10px; margin-bottom:6px; overflow:hidden;} .cb-foto b{display:block; font-size:11px; color:var(--ink); margin-bottom:6px;} .cb-foto i{display:block; height:6px; border-radius:3px; background:#E6E2D6; margin-bottom:5px;} .cb-foto i:nth-child(odd){width:80%;}
.cb-foto .linha-scan{position:absolute; left:0; right:0; height:2px; background:var(--amber); box-shadow:0 0 12px var(--amber); animation:scan 1.5s ease-in-out infinite;}
@keyframes scan{0%{top:0;} 100%{top:100%;}}

/* documentos fiscais: "processando" vira "autorizado" em ciclo */
.doc-card .est{position:relative; display:inline-grid; min-width:96px; justify-items:end;}
.doc-card .est > span{grid-area:1/1; white-space:nowrap;}
.doc-card .est .proc{font-size:10.5px; font-weight:700; color:var(--amber-d); display:none; align-items:center; gap:6px;}
.doc-card .est .proc::before{content:""; width:11px; height:11px; border-radius:50%; border:2px solid var(--amber-bg); border-top-color:var(--amber); animation:gira .8s linear infinite;}
@keyframes gira{to{transform:rotate(360deg);}}

/* rota */
.rota-mock .marcador{filter:drop-shadow(0 2px 4px rgba(20,40,63,.35));}

@media (prefers-reduced-motion:no-preference){
  /* início */
  #hero::before{animation:deriva 16s ease-in-out infinite alternate;}
  @keyframes deriva{to{transform:translate(-50px,34px) scale(1.1);}}
  #hero .eyebrow,#hero h1,#hero .hero-texto,#hero .hero-cta,#hero .hero-prova{animation:subir .8s cubic-bezier(.2,.8,.2,1) both;}
  #hero h1{animation-delay:.08s;} #hero .hero-texto{animation-delay:.18s;} #hero .hero-cta{animation-delay:.28s;} #hero .hero-prova{animation-delay:.38s;}
  @keyframes subir{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
  .maquete .janela{animation:subir .9s .15s cubic-bezier(.2,.8,.2,1) both;}
  .flutua{opacity:0; animation:entrarCard .7s ease forwards, flutuar 5.5s ease-in-out infinite;}
  .flutua.a{animation-delay:1.2s, 1.9s;} .flutua.b{animation-delay:1.7s, 2.4s;}
  @keyframes entrarCard{from{opacity:0; transform:translateY(14px) scale(.96);} to{opacity:1; transform:none;}}
  @keyframes flutuar{0%,100%{translate:0 0;} 50%{translate:0 -7px;}}
  .js .maquete .barras span{transform-origin:bottom; transform:scaleY(0);}
  .maquete.anim .barras span{animation:cresce .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--k,0)*90ms + 450ms);}
  .js .maquete .linhas .pilula{opacity:0; transform:scale(.5);}
  .maquete.anim .linhas div:nth-child(1) .pilula{animation:pop .5s 1.1s cubic-bezier(.3,1.6,.5,1) forwards;}
  .maquete.anim .linhas div:nth-child(2) .pilula{animation:pop .5s 1.5s cubic-bezier(.3,1.6,.5,1) forwards;}
  .maquete.anim .linhas div:nth-child(3) .pilula{animation:pop .5s 1.9s cubic-bezier(.3,1.6,.5,1) forwards;}
  @keyframes cresce{to{transform:scaleY(1);}} @keyframes pop{to{opacity:1; transform:none;}}
  .janela-lateral b:first-child{animation:pulso 2.4s ease-in-out infinite;} @keyframes pulso{50%{box-shadow:0 0 0 6px rgba(246,128,38,.25);}}

  /* entrada escalonada dos cartões ao rolar e microinterações */
  .js .rev{transition-delay:calc(var(--i,0)*90ms);}
  .cartao,.passo,.plano-card,.faq-item{transition:transform .25s ease, box-shadow .25s ease, border-color .25s;}
  .cartao:hover,.passo:hover{transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--line-2);}
  .plano-card:hover{transform:translateY(-5px); box-shadow:0 24px 54px rgba(20,40,63,.12);}
  .passo::before{transition:transform .4s cubic-bezier(.3,1.6,.5,1), color .3s;} .passo:hover::before{transform:scale(1.15) rotate(-4deg); color:var(--amber);}
  .icone{transition:transform .3s cubic-bezier(.3,1.6,.5,1);} .cartao:hover .icone{transform:rotate(-8deg) scale(1.1);}
  .btn-amber{position:relative; overflow:hidden;} .btn-amber::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-20deg); transition:left .6s;} .btn-amber:hover::after{left:130%;}
  .faq-item[open] p{animation:subir .35s ease both;}
  .resultado{animation:subir .5s cubic-bezier(.2,.8,.2,1) both;} .resposta{animation:subir .4s ease both;}
  .planos-grid.troca .plano-preco{animation:piscar .5s ease;} @keyframes piscar{0%{opacity:.2; transform:translateY(8px);} 100%{opacity:1; transform:none;}}
  .ct-overlay.aberto{animation:fundo .25s ease;} .ct-overlay.aberto .ct-box{animation:modalEntra .35s cubic-bezier(.2,.9,.3,1.1);}
  @keyframes fundo{from{opacity:0;}} @keyframes modalEntra{from{opacity:0; transform:translateY(24px) scale(.96);}}
  #wpp-flutuante{animation:pulsarWpp 2.8s ease-in-out infinite;} @keyframes pulsarWpp{0%,100%{box-shadow:0 10px 26px rgba(37,211,102,.4);} 50%{box-shadow:0 10px 26px rgba(37,211,102,.4), 0 0 0 11px rgba(37,211,102,.12);}}
  .faixa span{animation:subir .6s both;} .faixa span:nth-child(2){animation-delay:.08s;} .faixa span:nth-child(3){animation-delay:.16s;} .faixa span:nth-child(4){animation-delay:.24s;} .faixa span:nth-child(5){animation-delay:.32s;} .faixa span:nth-child(6){animation-delay:.4s;} .faixa span:nth-child(7){animation-delay:.48s;}

  /* documentos: ciclo processando → autorizado (começa quando a seção aparece) */
  .js .recurso-visual .doc-card{opacity:0; transform:translateX(26px);}
  .recurso-visual.rodando .doc-card{animation:deslizar .6s cubic-bezier(.2,.8,.2,1) forwards;}
  .recurso-visual.rodando .doc-card:nth-child(1){animation-delay:.05s;} .recurso-visual.rodando .doc-card:nth-child(2){animation-delay:.4s;} .recurso-visual.rodando .doc-card:nth-child(3){animation-delay:.75s;} .recurso-visual.rodando .doc-card:nth-child(4){animation-delay:1.1s;}
  @keyframes deslizar{to{opacity:1; transform:none;}}
  .doc-card .est .proc{display:flex; animation:some 7s infinite;} .doc-card .est .final{animation:aparece 7s infinite;}
  .doc-card:nth-child(2) .est > span{animation-delay:.6s;} .doc-card:nth-child(3) .est > span{animation-delay:1.2s;} .doc-card:nth-child(4) .est > span{animation-delay:1.8s;}
  @keyframes some{0%,35%{opacity:1;} 42%,92%{opacity:0;} 100%{opacity:1;}}
  @keyframes aparece{0%,35%{opacity:0; transform:scale(.6);} 45%,92%{opacity:1; transform:scale(1);} 100%{opacity:0;}}
  /* rota: o traço se desenha e os números sobem */
  .js .recurso-visual .rota-mock .trilho{stroke-dasharray:1; stroke-dashoffset:1;}
  .recurso-visual.rodando .rota-mock .trilho{animation:desenha 2.6s .2s cubic-bezier(.4,0,.2,1) forwards;}
  @keyframes desenha{to{stroke-dashoffset:0;}}
  .js .recurso-visual .rota-mock .marcador{opacity:0;} .recurso-visual.rodando .rota-mock .marcador{opacity:1; transition:opacity .4s .2s;}
  .js .recurso-visual .rota-mock .linha{opacity:0; transform:translateY(8px);} .recurso-visual.rodando .rota-mock .linha{animation:subir .5s forwards;}
  .recurso-visual.rodando .rota-mock .linha:nth-of-type(1){animation-delay:.8s;} .recurso-visual.rodando .rota-mock .linha:nth-of-type(2){animation-delay:1.1s;} .recurso-visual.rodando .rota-mock .linha:nth-of-type(3){animation-delay:1.4s;}
}
@media (prefers-reduced-motion:reduce){
  .cb{opacity:1; transform:none;}
}