:root{
  --verde:#0B3B39; --teal:#0F6B63; --teal-sup:#17877E;
  --cobre:#C2643A; --cobre-claro:#E09A6B; --cobre-escuro:#A34E27;
  --pedra:#CFC7B8; --areia:#EFE9DE; --marfim:#F8F6F1;
  --mute:#46605D; --mute-d:#CBD6D4;
  --ok-bg:#DDEAE7; --ok-fg:#12554F;
  --at-bg:#F2E6CE; --at-fg:#7A4E10;
  --ui:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(24px,5vw,88px);
  --radius:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{
  margin:0;font-family:var(--ui);color:var(--verde);background:var(--marfim);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
.wrap{max-width:1100px;margin:0 auto}
section{padding:clamp(52px,7vw,104px) var(--pad)}
.dark{background:var(--verde);color:var(--marfim)}
.sand{background:var(--areia)}

h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,5.4vw,62px);line-height:1.03}
h2{font-size:clamp(24px,3.2vw,38px);line-height:1.12;margin-bottom:16px}
h3{font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
p{margin:0 0 14px;max-width:62ch}
.lead{font-size:clamp(16px,1.5vw,19px);max-width:54ch}
.muted{color:var(--mute)} .dark .muted{color:var(--mute-d)}
.small{font-size:13.5px;line-height:1.55}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobre-escuro);margin:0 0 18px;
}
.dark .eyebrow{color:var(--cobre-claro)}
a{color:inherit}

/* ---- topo ---- */
header{padding:22px var(--pad);background:var(--verde)}
header .inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px}
header img{height:26px;display:block}
header nav{display:flex;align-items:center;gap:28px}
header nav a.ancora{font-size:14px;color:var(--mute-d);text-decoration:none}
header nav a.ancora:hover{color:var(--marfim)}
header .btn{padding:9px 16px;font-size:13.5px}

/* ---- capa ---- */
.hero{padding-top:clamp(48px,6vw,80px)}
.hero h1{max-width:16ch}
.hero .lead{margin-top:20px}
.hero .cta{margin-top:30px}

/* marca de "incluido", desenhada em CSS para nao depender de glifo da fonte */
.checks{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px}
.checks li{position:relative;padding-left:20px}
.checks li::before{
  content:"";position:absolute;left:2px;top:.32em;width:5px;height:9px;
  border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.dark .checks li{color:var(--mute-d)}
.dark .checks li::before{border-color:var(--cobre-claro)}

/* regua de competencia: o unico grafismo do sistema */
.regua{display:flex;align-items:flex-end;gap:4px;height:92px;margin-top:clamp(40px,6vw,72px)}
.regua i{flex:1;background:currentColor;opacity:.34;border-radius:1px}
.regua i.on{opacity:1;background:var(--cobre)}
.regua i.next{opacity:.14}
.regua-legend{
  display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  margin-top:12px;color:var(--mute-d);
}

/* ---- garantias ---- */
.garantias{padding-top:22px;padding-bottom:22px}
.garantias ul{list-style:none;padding:0;margin:0 auto;max-width:1100px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px;font-size:14.5px;font-weight:500}
.garantias li{display:flex;align-items:center;gap:10px}
.garantias svg{color:var(--teal);flex-shrink:0}

/* ---- icones: SVG inline de traco, na cor do texto ---- */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- para quem e ---- */
.perfis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:36px}
.perfil{border:1px solid var(--pedra);border-top:3px solid var(--teal);border-radius:var(--radius);padding:clamp(20px,2.2vw,26px);background:var(--marfim)}
.perfil .ico{color:var(--teal);width:30px;height:30px;margin-bottom:14px}
.perfil h3{font-size:18px}
.perfil p{margin:0}

/* faixa do profissional PJ: larga, abaixo dos cartoes, para nao virar um quinto cartao espremido */
.pj{display:flex;gap:clamp(16px,2.4vw,28px);align-items:center;margin-top:clamp(16px,2vw,24px);padding:clamp(20px,2.6vw,30px);border-radius:var(--radius);background:var(--verde);color:var(--marfim)}
.pj .ico{width:40px;height:40px;color:var(--cobre-claro);flex-shrink:0}
.pj h3{font-size:20px}
.pj p{margin:0;color:var(--mute-d);max-width:70ch}
.pj .acao{margin-left:auto;flex-shrink:0}
.pj .acao a{color:var(--marfim);font-weight:500;white-space:nowrap}

/* ---- pilares ---- */
.pilar{border-top:2px solid var(--cobre);padding-top:22px}
.pilar .ico{color:var(--cobre-escuro);width:28px;height:28px;margin-bottom:12px}
.pilar h3{font-size:21px}
.pilar ul{list-style:none;padding:0;margin:12px 0 0;font-size:14.5px}
.pilar li{padding:6px 0;border-bottom:1px solid rgba(207,199,184,.6)}

/* ---- recursos ---- */
.recursos{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px);margin-top:32px}
.recurso{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--pedra)}
.recurso .ico{color:var(--teal);margin-top:2px;flex-shrink:0}
.recurso h3{margin-bottom:4px}
.recurso p{margin:0}

/* ---- grades ---- */
.grid{display:grid;gap:clamp(22px,3vw,40px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}

/* ---- passos ---- */
.passo{border-top:2px solid var(--cobre);padding-top:20px}
.passo .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--cobre-escuro);display:block;margin-bottom:10px}

/* ---- conversa ilustrativa do chat de IA: HTML parado, sem script ---- */
.conversa{display:flex;flex-direction:column;gap:12px;border:1px solid rgba(248,246,241,.2);border-radius:5px;padding:clamp(16px,2.4vw,24px);background:rgba(248,246,241,.04)}
.balao{max-width:88%;padding:11px 15px;border-radius:12px;font-size:14px;line-height:1.5}
.balao b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;opacity:.75}
.balao.voce{align-self:flex-end;background:var(--cobre-escuro);color:var(--marfim);border-bottom-right-radius:3px}
.balao.ia{align-self:flex-start;background:var(--marfim);color:var(--verde);border-bottom-left-radius:3px}
.balao .linha{display:block;font-family:var(--mono);font-size:12.5px}

/* ---- memoria de calculo ---- */
.memo{border:1px solid var(--pedra);border-radius:5px;overflow:hidden;background:var(--marfim)}
.memo .head{background:var(--areia);padding:14px 18px;border-bottom:1px solid var(--pedra);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:baseline}
.memo .head b{font-size:14px;font-weight:600}
.memo .head span{font-family:var(--mono);font-size:11px;color:var(--mute)}
.memo table{width:100%;border-collapse:collapse}
.memo td{padding:11px 18px;font-size:13.5px;border-bottom:1px solid rgba(207,199,184,.5);vertical-align:top}
.memo tr:last-child td{border-bottom:0}
.memo td.num{font-family:var(--mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.memo td .d{display:block;font-size:11.5px;color:var(--mute);margin-top:3px;font-family:var(--mono)}
.memo .tot td{background:var(--areia);font-weight:600;border-top:1px solid var(--pedra)}
.pill{font-size:11px;padding:3px 9px;border-radius:99px;display:inline-block;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok-fg)}

/* ---- integracoes ---- */
.selos{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.selos li{border:1px solid var(--pedra);background:var(--marfim);border-radius:99px;padding:8px 16px;font-size:14px;font-weight:500}
.selos li small{font-weight:400;color:var(--mute);margin-left:6px}

/* ---- planos ---- */
.planos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:36px}
.plano{display:flex;flex-direction:column;background:var(--marfim);border:1px solid var(--pedra);border-radius:var(--radius);padding:clamp(20px,2.2vw,26px)}
/* destaque so pela borda: sem selo de "mais vendido" */
.plano.destaque{border:2px solid var(--teal)}
.plano h3{font-size:19px;margin-bottom:4px}
.plano .para{font-size:13.5px;color:var(--mute);margin:0 0 18px;min-height:3.1em}
.plano .qtd{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:0}
.plano .qtd small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobre-escuro);font-weight:400;margin-top:4px}
.plano .preco{margin:20px 0 2px;font-size:28px;font-weight:600;letter-spacing:-.02em}
.plano .preco span{font-size:14px;font-weight:400;color:var(--mute)}
.plano .anual{font-size:12.5px;color:var(--mute);margin:0 0 18px}
.plano ul{list-style:none;padding:0;margin:0 0 22px;font-size:13.5px;line-height:1.5}
.plano li{padding:7px 0;border-top:1px solid rgba(207,199,184,.6)}
.plano .btn{margin-top:auto;text-align:center}
.planos-nota{margin-top:28px}
.planos-nota p{font-size:13.5px}

/* ---- duvidas: <details> nativo, porque a CSP nao deixa rodar JavaScript ---- */
.faq{max-width:780px;margin-top:28px;border-top:1px solid var(--pedra)}
.faq details{border-bottom:1px solid var(--pedra)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;font-weight:400;color:var(--cobre-escuro)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--mute);font-size:14.5px;margin:0 0 18px}

/* ---- botoes ---- */
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}
.btn{
  background:var(--teal);color:var(--marfim);border:0;border-radius:var(--radius);
  padding:12px 22px;font-family:var(--ui);font-size:14px;font-weight:500;
  text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--teal-sup)}
/* no fundo verde o teal some; o cobre escuro mantem o contraste do texto marfim */
.dark .btn,header .btn{background:var(--cobre-escuro)}
.dark .btn:hover,header .btn:hover{background:var(--cobre)}
.btn.sec{background:transparent;color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde)}
.btn.sec:hover{background:var(--areia)}
.dark .btn.sec{color:var(--marfim);box-shadow:inset 0 0 0 1px rgba(248,246,241,.5)}
.dark .btn.sec:hover{background:rgba(248,246,241,.08)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}

footer{padding:30px var(--pad);border-top:1px solid var(--pedra);background:var(--areia)}
footer .inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:820px){
  header nav{gap:18px}
  header nav a.ancora.extra{display:none}
  .planos{grid-template-columns:repeat(2,1fr)}
  .garantias ul{grid-template-columns:repeat(2,1fr)}
  .perfis{grid-template-columns:repeat(2,1fr)}
  .pj{flex-wrap:wrap}
  .pj .acao{margin-left:0}
}
@media (max-width:560px){
  header nav a.ancora{display:none}
  .g3,.planos,.recursos,.garantias ul,.perfis{grid-template-columns:1fr}
  .plano .para{min-height:0}
  .eyebrow{font-size:10px;letter-spacing:.09em}
  .regua{height:60px;gap:3px}
  .regua-legend{font-size:9.5px}
}

/* ---- utilitarios: o HTML nao usa style="" para a CSP poder dispensar 'unsafe-inline' ---- */
.mw18{max-width:18ch} .mw20{max-width:20ch} .mw22{max-width:22ch} .mw24{max-width:24ch}
.mt12{margin-top:12px} .mt14{margin-top:14px} .mt36{margin-top:36px} .mt40{margin-top:40px}
.mb32{margin-bottom:32px}
.coluna{flex-direction:column;font-size:14.5px}
.centro{align-items:center}

/* alturas da regua, que antes iam em style="" em cada barra */
.regua i:nth-child(1){height:41%}
.regua i:nth-child(2){height:46%}
.regua i:nth-child(3){height:44%}
.regua i:nth-child(4){height:50%}
.regua i:nth-child(5){height:48%}
.regua i:nth-child(6){height:53%}
.regua i:nth-child(7){height:51%}
.regua i:nth-child(8){height:49%}
.regua i:nth-child(9){height:56%}
.regua i:nth-child(10){height:54%}
.regua i:nth-child(11){height:60%}
.regua i:nth-child(12){height:58%}
.regua i:nth-child(13){height:57%}
.regua i:nth-child(14){height:63%}
.regua i:nth-child(15){height:61%}
.regua i:nth-child(16){height:66%}
.regua i:nth-child(17){height:64%}
.regua i:nth-child(18){height:70%}
.regua i:nth-child(19){height:68%}
.regua i:nth-child(20){height:67%}
.regua i:nth-child(21){height:73%}
.regua i:nth-child(22){height:71%}
.regua i:nth-child(23){height:77%}
.regua i:nth-child(24){height:75%}
.regua i:nth-child(25){height:80%}
.regua i:nth-child(26){height:84%}

/* ---- paginas ---- */
header nav a.ancora[aria-current="page"]{color:var(--marfim);text-decoration:underline;text-underline-offset:6px}
header a.marca{display:block}
/* H1 de pagina interna: o titulo e frase longa, o tamanho da capa nao cabe */
.h1-pagina{font-size:clamp(30px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.plano.compacto .preco{margin-top:16px}
.plano.compacto .anual{margin-bottom:0}

/* ---- WhatsApp: botao fixo so com CSS, porque a CSP nao deixa script de terceiros ---- */
.whats{position:fixed;right:20px;bottom:20px;z-index:10;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.whats:hover{background:#1EBE5A}
.whats svg{width:30px;height:30px}
.whats .balao-wa{fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.whats .fone{fill:#fff}
@media (max-width:560px){
  .whats{right:12px;bottom:12px;width:48px;height:48px}
  .whats svg{width:26px;height:26px}
  /* o rodape ganha folga para o botao fixo nao cobrir os links */
  footer{padding-bottom:80px}
}

/* ---- comparacao dos planos ---- */
/* a tabela rola dentro da propria caixa no celular; a pagina nao ganha rolagem lateral */
.tabela-rolavel{overflow-x:auto;border:1px solid var(--pedra);border-radius:var(--radius);background:var(--marfim)}
.tabela-planos{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
.tabela-planos th,.tabela-planos td{padding:10px 12px;border-top:1px solid rgba(207,199,184,.6);text-align:left;vertical-align:top}
.tabela-planos thead th{font-size:15px;font-weight:600;border-top:0;padding-top:16px}
.tabela-planos thead th.destaque{color:var(--teal)}
.tabela-planos tbody th[scope="row"]{font-weight:400;color:var(--mute);width:34%}
.tabela-planos tr.grupo th{background:var(--areia);font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--cobre-escuro);padding-top:14px}
/* a coluna dos nomes fica parada enquanto a tabela rola para o lado; o z-index a poe acima do
   check, que tem transform e por isso pintaria por cima dela */
.tabela-planos tbody th[scope="row"],.tabela-planos thead td{position:sticky;left:0;z-index:1;background:var(--marfim)}
.tabela-planos .sim{display:inline-block;width:6px;height:11px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg);margin-left:4px}
.tabela-planos .nao{color:var(--pedra)}
/* no celular nao cabem cinco colunas: o nome do recurso ocupa a linha inteira e os quatro planos
   vem embaixo dele, lado a lado, sem rolagem lateral. Os nomes dos planos ficam presos no topo */
@media (max-width:720px){
  .tabela-rolavel{overflow:visible}
  .tabela-planos{min-width:0;font-size:13px}
  .tabela-planos thead,.tabela-planos tbody{display:block}
  .tabela-planos tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .tabela-planos thead{position:sticky;top:0;z-index:2;background:var(--marfim);border-bottom:1px solid var(--pedra);border-radius:var(--radius) var(--radius) 0 0}
  .tabela-planos thead td{display:none}
  .tabela-planos thead th{font-size:13px;padding:12px 6px 10px;text-align:center}
  .tabela-planos tr.grupo th{grid-column:1/-1}
  .tabela-planos tbody th[scope="row"]{grid-column:1/-1;position:static;width:auto;min-width:0;padding:12px 12px 2px;color:var(--verde)}
  .tabela-planos tbody td{border-top:0;padding:4px 6px 12px;text-align:center;overflow-wrap:anywhere}
  .tabela-planos .sim{margin-left:0}
}

/* ---- documentos (termos e privacidade): texto longo, largura de leitura ---- */
.documento .wrap{max-width:760px}
.documento .versao{margin-bottom:32px}
.documento h2{font-size:clamp(19px,2.2vw,23px);margin:36px 0 12px}
.documento p,.documento li{font-size:15px;line-height:1.65;max-width:none}
.documento ul,.documento ol{margin:0 0 14px;padding-left:22px}
.documento li{margin-bottom:6px}
.documento li ul,.documento li ol{margin:6px 0 0}
.documento blockquote{margin:16px 0;padding:14px 18px;border-left:3px solid var(--cobre);background:var(--areia);border-radius:var(--radius)}
.documento blockquote p{margin:0}
.documento a{overflow-wrap:anywhere}

/* ---- links das paginas por tema: rodape e "veja tambem" ---- */
footer .temas{max-width:1100px;margin:0 auto 18px;padding-bottom:18px;border-bottom:1px solid var(--pedra);display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:var(--mute)}
footer .temas b{font-weight:600;color:var(--verde)}
.links-temas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px;font-size:15px}
.links-temas a{color:var(--teal);text-underline-offset:3px}
.recurso h3 a{color:inherit;text-decoration-color:var(--pedra);text-underline-offset:4px}
.recurso h3 a:hover{text-decoration-color:var(--cobre)}
@media (max-width:820px){.links-temas{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.links-temas{grid-template-columns:1fr}}

/* ---- blog ---- */
.artigos{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px);margin-top:28px}
.artigo-item{padding:20px 0;border-top:1px solid var(--pedra)}
.artigo-item h3{font-size:17px;line-height:1.3;margin-bottom:6px}
.artigo-item h3 a{text-decoration:none}
.artigo-item h3 a:hover{text-decoration:underline;text-decoration-color:var(--cobre);text-underline-offset:4px}
.artigo-item p{margin:0}
.artigo-item .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobre-escuro);margin:0 0 6px}
.categorias{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:14px}
.categorias a{color:var(--teal);text-underline-offset:3px}
.documento h3{margin:26px 0 8px}
.documento .rolavel{overflow-x:auto;margin:16px 0 18px}
.documento table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.documento th,.documento td{padding:9px 10px;border-top:1px solid var(--pedra);text-align:left;vertical-align:top}
.documento thead th{border-top:0;font-weight:600}
.documento.artigo .versao{margin-bottom:28px}
.caixa-vallira{margin:44px 0 8px;padding:24px clamp(18px,3vw,28px);background:var(--areia);border-left:3px solid var(--cobre);border-radius:var(--radius)}
.documento .caixa-vallira h2{margin-top:0}
.caixa-vallira .cta{margin-top:18px}
.fontes li{font-size:13.5px}
@media (max-width:560px){.artigos{grid-template-columns:1fr}}
.perfil h3 a{color:inherit;text-decoration-color:var(--pedra);text-underline-offset:4px}
.perfil h3 a:hover{text-decoration-color:var(--cobre)}