/* Spondeo — CSS próprio do painel e das páginas públicas (Codex; redesenho da marca: Claude).
   Sem CDN e sem estilo inline (CSP). Cores e tipografia: docs/marca.md.
   Ideia: fundo claro e calmo; superfície branca só onde há dados; uma cor de ação (azul),
   o verde "acordo" só para o que foi confirmado; nada de sombras ou enfeites. */
@font-face{font-family:Figtree;src:url('/assets/figtree.ttf') format('truetype');font-weight:300 900;font-display:swap}
:root{color-scheme:light;
  --fundo:#f4f6f8;--papel:#fff;--tinta:#10283f;--suave:#56687a;--borda:#e1e7ec;--borda-forte:#c3ced8;
  --azul:#1d4a70;--azul-escuro:#153a59;--verde:#0f766e;--verde-texto:#0b5c55;--verde-fundo:#e2f1ee;
  --espera-texto:#7a4f0c;--espera-fundo:#fbf0db;--erro-texto:#9f2f25;--erro-fundo:#fcebe9;
  --neutro-fundo:#edf1f4;--barra:#0e9384;--raio:10px;--raio-bloco:14px}

/* Base */
*{box-sizing:border-box}
html{scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.6 Figtree,'Segoe UI',system-ui,sans-serif}
body.app{background:var(--fundo)}
a{color:var(--azul);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--azul-escuro)}
:focus-visible{outline:3px solid #8fc9c1;outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.6rem,3vw,2rem);font-weight:650}
h2{font-size:1.12rem;font-weight:600}
h3{font-size:1rem;font-weight:600}
p{margin:12px 0;max-width:68ch;overflow-wrap:anywhere}
small{display:block;color:var(--suave);font-size:.86rem;margin-top:6px;max-width:66ch}
ul{padding-left:22px}li{margin:8px 0;overflow-wrap:anywhere}
.suave{color:var(--suave)}
.numero{font-variant-numeric:tabular-nums;white-space:nowrap}
.pular{position:absolute;left:12px;top:-100px;background:var(--papel);padding:12px;z-index:5}
.pular:focus{top:12px}

/* Cabeçalho */
.site-topo{background:var(--papel);border-bottom:1px solid var(--borda)}
.topo-conteudo{max-width:1120px;margin:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;flex:none}
.marca img{display:block;height:28px;width:auto}
.acesso-link{font-weight:600;font-size:.94rem;text-decoration:none;padding:8px 14px;border:1px solid var(--borda-forte);border-radius:var(--raio);color:var(--tinta)}
.acesso-link:hover{border-color:var(--tinta);color:var(--tinta)}
.empresa{display:flex;align-items:center;gap:14px;min-width:0}
.empresa span{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empresa form{margin:0}
.empresa button{margin:0;min-height:38px;padding:6px 14px;font-size:.9rem}

/* Conteúdo */
main{max-width:640px;margin:40px auto 56px;padding:0 24px}
main.painel{max-width:1120px;margin:0 auto 56px}
/* Páginas públicas: uma folha branca sobre o fundo névoa, como os blocos do painel.
   A estreita (login e mensagens de resultado) fica centrada e curta. */
body.publico{background:var(--fundo)}
main.folha{max-width:680px;margin:40px auto 56px;padding:36px 40px 40px;background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio-bloco)}
main.estreita{max-width:440px;margin-top:min(9vh,80px)}
.folha .intro{color:var(--suave);margin:4px 0 0}
.folha>.botao{width:100%;margin-top:20px}
.alternativa{margin-top:28px;padding-top:20px;border-top:1px solid var(--borda);font-size:.92rem;color:var(--suave)}
.alternativa p{margin:0 0 10px}.alternativa p:last-child{margin:0}
.abas{display:flex;gap:28px;border-bottom:1px solid var(--borda);overflow-x:auto;scrollbar-width:none;margin:0 0 4px}
.abas a{padding:14px 0 12px;text-decoration:none;color:var(--suave);font-weight:600;font-size:.94rem;white-space:nowrap;border-bottom:2px solid transparent}
.abas a:hover{color:var(--tinta)}
.abas a[aria-current=page]{color:var(--tinta);border-bottom-color:var(--verde)}
.pagina-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:28px 0 20px}
.pagina-topo p{margin:4px 0 0}
.pagina-topo .botao{margin:0}
.voltar{margin:24px 0 8px;font-size:.92rem}
main:not(.painel) h1{margin-bottom:12px}
h2{margin:32px 0 12px}

/* Números do mês */
.indicadores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.indicador{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio-bloco);padding:18px 20px;display:grid;gap:2px;min-width:0}
.indicador .rotulo{font-size:.9rem;color:var(--suave);font-weight:500}
.indicador strong{font-size:1.55rem;font-weight:650;letter-spacing:-.01em}
.indicador .detalhe{font-size:.84rem;color:var(--suave)}
.indicador.atencao strong{color:var(--erro-texto)}

/* Blocos de dados */
.bloco{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio-bloco);padding:20px 24px;margin-top:20px;min-width:0}
.bloco-topo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bloco-topo h2{margin:0}
.bloco-topo span{font-size:.88rem}

/* Gráfico (SVG do servidor; cores pela folha de estilo, não por atributo inline) */
.grafico{display:block;width:100%;height:auto;max-height:260px}
.grafico .grade{stroke:#e9eef2;stroke-width:1}
.grafico .base{stroke:var(--borda-forte);stroke-width:1}
.grafico .eixo{fill:var(--suave);font-size:12px;font-family:inherit}
.grafico .valor{fill:var(--tinta);font-size:12px;font-weight:600;font-family:inherit}
.grafico .barra{fill:var(--barra)}
.grafico g:hover .barra{fill:var(--verde-texto)}
.grafico .alvo{fill:transparent}

/* Tabelas */
.tabela{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
th{text-align:left;color:var(--suave);font-weight:600;font-size:.82rem;padding:10px 12px;border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:13px 12px;border-bottom:1px solid var(--borda);vertical-align:middle;overflow-wrap:anywhere}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f8fafb}
th.numero,td.numero{text-align:right}
td a{font-weight:600}
.estado-nota{display:grid;justify-items:start;gap:8px;min-width:0}
.estado-nota .selo{align-self:start}
.arquivos a{margin-right:14px;text-decoration:none}
.arquivos a:hover{text-decoration:underline}

/* Selos de status: ponto + texto (a cor nunca vem sozinha) */
.selo{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;line-height:1.6}
.selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.selo.tom-ok{color:var(--verde-texto);background:var(--verde-fundo)}
.selo.tom-espera{color:var(--espera-texto);background:var(--espera-fundo)}
.selo.tom-erro{color:var(--erro-texto);background:var(--erro-fundo)}
.selo.tom-neutro{color:var(--suave);background:var(--neutro-fundo)}

/* Lista de cobranças */
.lista{list-style:none;margin:0;padding:0}
.lista li{margin:0;padding:14px 0;border-bottom:1px solid var(--borda)}
.lista li:first-child{padding-top:4px}
.lista li:last-child{border-bottom:0;padding-bottom:0}
.linha{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.linha strong{display:block;font-weight:600}
.linha .suave{display:block;font-size:.86rem}
.lado{display:flex;align-items:center;gap:14px;font-weight:600}
details{margin-top:10px}
summary{cursor:pointer;color:var(--azul);font-weight:600;font-size:.9rem;width:fit-content}
details textarea{font:13px/1.5 ui-monospace,Consolas,monospace}
.qr{display:block;width:200px;height:200px;max-width:100%;object-fit:contain;margin:12px 0}
.paginacao{display:flex;gap:20px}

/* Avisos */
.aviso,.erro,.sucesso,.vazio{padding:14px 16px;border-radius:var(--raio);line-height:1.55}
.aviso{background:#eef3f7;color:var(--tinta)}
.erro{background:var(--erro-fundo);color:var(--erro-texto)}
.sucesso{background:var(--verde-fundo);color:var(--verde-texto)}
.vazio{background:transparent;color:var(--suave);padding:8px 0;max-width:62ch}

/* Formulários */
form{margin:20px 0 0}
.bloco.formulario{margin-top:20px;padding:20px 24px 24px;max-width:720px}
.bloco.formulario h2{margin:0 0 4px}
.bloco>p:last-child{margin-bottom:0}
label{display:block;margin:18px 0 0;font-weight:600;font-size:.94rem}
input,select,textarea,button{font:inherit;max-width:100%}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;min-height:44px;border:1px solid var(--borda-forte);border-radius:var(--raio);background:var(--papel);color:var(--tinta);font-weight:400}
textarea{resize:vertical;min-height:96px;overflow-wrap:anywhere}
input:hover,select:hover,textarea:hover{border-color:#8fa2b3}
input:focus,select:focus,textarea:focus{border-color:var(--verde);outline:3px solid #cbe7e2;outline-offset:0}
input[type=file]{padding:8px;font-size:.9rem}
input::file-selector-button{border:0;background:var(--neutro-fundo);color:var(--tinta);border-radius:6px;padding:8px 12px;margin-right:12px;font-weight:600;cursor:pointer}
input[type=checkbox]{display:inline-block;width:20px;min-height:20px;height:20px;margin:0 10px 0 0;vertical-align:-4px;accent-color:var(--verde)}
label:has(input[type=checkbox]),.check{font-weight:500;cursor:pointer}
fieldset{margin:28px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--borda);min-width:0}
legend{font-size:1.08rem;font-weight:650;letter-spacing:-.01em;padding:0 10px 0 0;color:var(--tinta)}
.folha fieldset{margin-top:36px;padding-top:24px}
.folha legend{float:left;width:100%;margin-bottom:10px}
.folha legend+*{clear:both}
fieldset label:first-of-type{margin-top:4px}

/* Botões */
button,.botao{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 20px;border:1px solid var(--azul);background:var(--azul);color:#fff;font-weight:600;border-radius:var(--raio);cursor:pointer;text-decoration:none;margin-top:24px;transition:background-color .15s}
button:hover,.botao:hover{background:var(--azul-escuro);color:#fff}
.secundario{background:var(--papel);color:var(--tinta);border-color:var(--borda-forte)}
.secundario:hover{background:var(--fundo);color:var(--tinta)}
main:not(.painel) form>button{width:100%}
/* Cadastro: busca pelo CNPJ antes do formulário (Claude) */
.consulta-cnpj{margin:24px 0 8px;padding:20px;background:var(--fundo);border-radius:var(--raio)}
.consulta-cnpj label{margin-top:0}
.linha-consulta{display:flex;gap:10px;align-items:flex-start}
.botoes{display:flex;flex-wrap:wrap;gap:10px}
.linha-consulta input{flex:1;min-width:0}
.linha-consulta button{margin-top:6px;white-space:nowrap}
@media(max-width:480px){.linha-consulta{flex-direction:column;align-items:stretch}.linha-consulta button{margin-top:0}}

/* Antigos, ainda usados em outras telas */
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cartao{border:1px solid var(--borda);border-radius:var(--raio-bloco);padding:20px;min-width:0;background:var(--papel)}
.status{display:inline-block;background:var(--neutro-fundo);padding:2px 8px;border-radius:999px;font-size:.82rem}

/* Rodapé */
.rodape{max-width:1120px;margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--suave);font-size:.84rem;border-top:1px solid var(--borda)}
.rodape a{color:inherit}

/* Celular */
@media(max-width:860px){.indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .topo-conteudo{padding:12px 16px}
  main{margin:28px auto 40px;padding:0 16px}
  main.painel{padding:0 16px}
  .empresa span{max-width:42vw}
  .bloco{padding:16px}
  .grade{grid-template-columns:1fr}
  .indicador strong{font-size:1.3rem}
  /* tabela vira ficha: cada linha um bloco, rótulo à esquerda e valor à direita */
  .tabela table,.tabela tbody,.tabela tr,.tabela td{display:block;width:100%}
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabela tr{padding:10px 0;border-bottom:1px solid var(--borda)}
  .tabela tr:last-child{border-bottom:0}
  .tabela td{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border:0;text-align:right}
  .tabela td::before{content:attr(data-rotulo);color:var(--suave);font-size:.85rem;text-align:left;font-weight:500}
  .tabela td[data-rotulo="Status"]::before{flex-shrink:0}
  .estado-nota{flex:1;justify-items:end}
  tbody tr:hover td{background:transparent}
}
@media(max-width:420px){.indicadores{grid-template-columns:1fr}.abas{gap:16px}.abas a{font-size:.88rem}}
@media(max-width:600px){main.folha{margin:16px 16px 40px;padding:24px 20px 28px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* Movimento (só CSS: a CSP não permite JavaScript nestas páginas).
   Uma sequência ao abrir a página: barra fina de carregamento no topo, conteúdo entrando
   em ordem, barras do gráfico crescendo da base. Depois, só transições que respondem ao uso.
   Tudo desliga com "reduzir movimento" no sistema. */
:root{--suave-saida:cubic-bezier(.22,.61,.36,1)}
@keyframes carregar{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes surgir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes crescer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes brilho{from{background-position:100% 0}to{background-position:0 0}}
body::before{content:"";position:fixed;inset:0 0 auto;height:3px;z-index:10;transform-origin:left;
  background:linear-gradient(90deg,var(--verde),var(--barra));animation:carregar .9s var(--suave-saida) forwards;pointer-events:none}
main>*{animation:surgir .55s var(--suave-saida) both}
main>:nth-child(2){animation-delay:.04s}main>:nth-child(3){animation-delay:.1s}
main>:nth-child(4){animation-delay:.16s}main>:nth-child(5){animation-delay:.22s}
main>:nth-child(6){animation-delay:.28s}main>:nth-child(n+7){animation-delay:.34s}
.indicador{animation:surgir .5s var(--suave-saida) both}
.indicador:nth-child(1){animation-delay:.12s}.indicador:nth-child(2){animation-delay:.18s}
.indicador:nth-child(3){animation-delay:.24s}.indicador:nth-child(4){animation-delay:.3s}
.grafico .barra{transform-box:fill-box;transform-origin:50% 100%;animation:crescer .8s var(--suave-saida) both}
.grafico g:nth-of-type(1) .barra{animation-delay:.3s}.grafico g:nth-of-type(2) .barra{animation-delay:.36s}
.grafico g:nth-of-type(3) .barra{animation-delay:.42s}.grafico g:nth-of-type(4) .barra{animation-delay:.48s}
.grafico g:nth-of-type(5) .barra{animation-delay:.54s}.grafico g:nth-of-type(6) .barra{animation-delay:.6s}
.grafico .valor{animation:aparecer .4s 1.2s both}
.grafico .barra{transition:fill .2s}
/* Respostas ao uso */
.abas a{transition:color .2s,border-color .25s}
tbody tr td{transition:background-color .15s}
.lista li{transition:background-color .15s}
.indicador,.bloco{transition:border-color .2s}
.indicador:hover{border-color:var(--borda-forte)}
button,.botao,.acesso-link,.secundario{transition:background-color .15s,border-color .15s,transform .1s}
button:active,.botao:active{transform:scale(.98)}
input,select,textarea{transition:border-color .15s,outline-color .15s}
summary{transition:color .15s}
details[open]>:not(summary){animation:surgir .3s var(--suave-saida) both}
/* Esqueleto enquanto o QR Code carrega */
.qr{border-radius:var(--raio);background:linear-gradient(90deg,#eef2f5 25%,#f7f9fa 50%,#eef2f5 75%) 0 0/300% 100%;animation:brilho 1.4s linear infinite}
@media(prefers-reduced-motion:reduce){
  body::before{display:none}
  main>*,.indicador,.grafico .barra,.grafico .valor,details[open]>:not(summary),.qr{animation:none!important}
  *{transition:none!important}
}

/* Revisão de design 19/10/2026 (Claude, a pedido do Rafael; skills impeccable, taste-skill
   app-screens, mobile-native e emil-design-eng). Fica no fim para sobrepor sem mexer no resto.
   1) Topo marinho, igual à landing. */
html{-webkit-tap-highlight-color:transparent}
a,button,summary{touch-action:manipulation}
.site-topo{background:var(--tinta);border-bottom:0}
.empresa span{color:#e6edf3}
.site-topo .secundario,.site-topo .acesso-link{background:#1f3a55;border-color:#1f3a55;color:#fff}
.abas a[aria-current=page]{border-bottom-width:3px}
/* 2) Números do mês num bloco só, divididos por linhas finas; 2 colunas no celular. */
.indicadores{gap:1px;background:var(--borda);border:1px solid var(--borda);border-radius:var(--raio-bloco);overflow:hidden}
.indicador{border:0;border-radius:0;align-content:start;padding:20px 22px}
.indicador strong{font-size:1.7rem}
.indicador.atencao{box-shadow:inset 0 3px 0 var(--erro-texto)}
@media(max-width:420px){.indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}.indicador{padding:14px}.indicador strong{font-size:1.15rem}}
/* 3) Hover só com mouse (no toque ele fica preso); toque responde na hora. */
@media (hover:none){
  tbody tr:hover td{background:transparent}
  button:hover,.botao:hover{background:var(--azul)}
  .secundario:hover{background:var(--papel);color:var(--tinta)}
  .site-topo .secundario:hover{background:#1f3a55;color:#fff}
  .indicador:hover{border-color:transparent}
}
button:active,.botao:active{transform:scale(.97)}
/* 4) Notas no celular em duas linhas: nota e valor em cima; cliente e data embaixo, em cinza;
   status e arquivos na terceira. Nada de fichas com rótulo em cada campo. */
@media(max-width:700px){
  .notas tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:14px 0}
  .notas td{display:block;padding:0;text-align:left}
  .notas td::before{content:none}
  .notas td[data-rotulo="Nota"]{grid-area:1/1;font-size:1rem}
  .notas td[data-rotulo="Valor"]{grid-area:1/2;text-align:right;font-weight:650}
  .notas td[data-rotulo="Cliente"]{grid-area:2/1;color:var(--suave);font-size:.88rem}
  .notas td[data-rotulo="Data"]{grid-area:2/2;text-align:right;color:var(--suave);font-size:.88rem}
  .notas td[data-rotulo="Status"]{grid-area:3/1;margin-top:8px}
  .notas td[data-rotulo="Arquivos"]{grid-area:3/2;margin-top:8px;align-self:start;text-align:right}
  .notas td[data-rotulo="Arquivos"] .suave{display:none}
  .notas .estado-nota{justify-items:start;gap:4px}
}
/* 5) Relatórios: datas lado a lado com o botão; downloads com uma ação principal só. */
.relatorio{margin-top:20px;max-width:none}
.periodo{display:grid;grid-template-columns:repeat(2,minmax(0,220px)) auto;gap:16px;align-items:end}
.periodo label{margin:0}
.periodo button{margin:0}
@media(max-width:700px){.periodo{grid-template-columns:repeat(2,minmax(0,1fr))}.periodo button{grid-column:1/-1}}
.periodo input{width:100%;min-width:0}
.relatorio .botoes button{margin:0}
@media(max-width:700px){.relatorio .botoes button{flex:1 1 100%}}
/* 6) Gráfico: a cor fica no mês atual; meses anteriores num tom claro da mesma cor. */
.grafico .barra{fill:#a8dcd3}
.grafico .barra.atual{fill:var(--verde)}
@media (hover:hover) and (pointer:fine){.grafico g:hover .barra{fill:var(--verde-texto)}}
/* 7) Visão geral: faturamento (2/3) e "onde está o dinheiro" (1/3) na mesma linha, mesma base. */
.graficos{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:stretch}
.graficos .bloco{margin-top:0}
.dinheiro{display:grid;gap:22px;margin-top:8px}
.barra-dinheiro{display:block;width:100%;height:14px;border-radius:7px;overflow:hidden}
.parte.recebido,.ponto.recebido{fill:var(--verde);background:var(--verde)}
.parte.em-dia,.ponto.em-dia{fill:#a8dcd3;background:#a8dcd3}
.parte.vencido,.ponto.vencido{fill:var(--erro-texto);background:var(--erro-texto)}
.legenda-dinheiro{margin:0;display:grid}
.legenda-dinheiro>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--borda)}
.legenda-dinheiro>div:last-child{border-bottom:0}
.legenda-dinheiro dt{display:flex;align-items:center;gap:10px;color:var(--suave);font-size:.92rem}
.legenda-dinheiro dd{margin:0;display:flex;gap:12px;align-items:baseline}
.legenda-dinheiro .numero{font-weight:650;color:var(--tinta)}
.legenda-dinheiro .suave{font-size:.85rem;min-width:3ch;text-align:right}
.ponto{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
@media(max-width:860px){.graficos{grid-template-columns:1fr}}

/* Claude, 19/10/2026: valor de cada mês no toque, no Tab e no mouse; sem interação, só o atual.
   visibility (e não opacity), porque a animação de entrada fixa a opacidade. */
.grafico g:focus:not(:focus-visible){outline:none}
.grafico g:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.grafico g:not(.atual) .valor,
.grafico:hover g.atual:not(:hover) .valor,
.grafico:focus-within g.atual:not(:focus) .valor{visibility:hidden}
.grafico g:hover .valor,.grafico g:focus .valor{visibility:visible}
.grafico g:focus .barra{fill:var(--verde-texto)}
.copiar{margin-top:8px}
.copiar-aviso{display:block;min-height:1.4em;margin-top:4px}

/* Checkout da assinatura (Claude, 23/10/2026). Celular primeiro: o público chega pelo
   WhatsApp. Só componentes do app: folha, borda/raio dos blocos, .selo e .botao. */
main.folha:has(.lista-planos){max-width:600px}
.lista-planos{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.plano-opcao{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:16px;
  border:1px solid var(--borda-forte);border-radius:var(--raio-bloco);color:var(--tinta);text-decoration:none;
  transition:border-color .15s,background-color .15s}
.plano-opcao:hover{border-color:var(--verde)}
.plano-opcao:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.plano-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:650;font-size:1.05rem}
.plano-preco{font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.plano-preco small{display:inline;margin:0;font-size:.82rem;font-weight:500;color:var(--suave)}
.plano-clientes{grid-column:1/-1;color:var(--suave);font-size:.92rem}
.escolhido .plano-opcao{border:2px solid var(--verde);background:var(--verde-fundo);padding:15px}
.plano-inclui{list-style:none;margin:0;padding:14px 16px 4px;display:grid;gap:10px}
.plano-inclui li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.45}
.plano-inclui svg{width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--verde);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nao-inclui{padding:0 16px 4px;color:var(--suave)}
.nao-inclui summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--azul)}
.nao-inclui ul{margin:0 0 8px;padding-left:20px;display:grid;gap:6px}
.pagar{margin:20px 0 0}
.pagar .botao{width:100%;margin:0;min-height:52px;font-size:1.02rem}
.pagar p{margin:8px 0 0;text-align:center;font-size:.86rem;color:var(--suave)}
.checkout-teste{margin:20px 0 0;text-align:center}
.passos-checkout{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;line-height:1.5}
.folha h2.depois{margin-top:32px;font-size:1.1rem}
@media(max-width:600px){
  main.folha:has(.lista-planos){margin:0;border:0;border-radius:0;padding:20px 16px 28px}
  /* Celular: o botão de assinar fica no rodapé, ao alcance do polegar. */
  .pagar{position:sticky;bottom:0;z-index:5;margin:20px -16px 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--borda)}
}

/* Cadastro da empresa (Claude, 23/10/2026): celular primeiro, etapas numeradas, só tokens. */
.cadastro{margin-top:8px}
.etapa{display:flex;align-items:center;gap:10px;margin:32px 0 4px;padding-top:24px;border-top:1px solid var(--borda);font-size:1.12rem}
.cadastro>.etapa:first-of-type{margin-top:20px;padding-top:0;border-top:0}
.etapa span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--verde-fundo);color:var(--verde-texto);font-size:.9rem;font-weight:700;flex:none}
.cadastro label{margin-top:16px}
.cadastro small{margin-top:4px}
.campos-dois{display:grid;gap:0 12px}
@media(min-width:520px){.campos-dois{grid-template-columns:1fr 1fr}}
.alternativa-xml{margin-top:16px;padding:12px 16px;border:1px solid var(--borda);border-radius:var(--raio)}
.alternativa-xml summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--azul)}
.alternativa-xml form{padding-bottom:4px}
.cadastro .convite{margin-top:28px}
.cadastro .convite summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--azul)}
.alternativa-xml label{margin-top:8px}
.alternativa-xml button{margin-top:12px}
.aceites{display:grid;gap:4px;margin-top:28px;padding-top:20px;border-top:1px solid var(--borda)}
.aceite{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin:0;padding:8px 0;font-weight:500;line-height:1.45;cursor:pointer}
.aceite input[type=checkbox]{width:22px;height:22px;min-height:22px;margin:1px 0 0}
.concluir{width:100%;min-height:52px;font-size:1.02rem}
.codigo-vinculo{margin:8px 0 20px;font-size:2rem;font-weight:700;letter-spacing:.2em;font-variant-numeric:tabular-nums;color:var(--tinta)}
/* Celular: o SVG do gráfico encolhe pela metade; o texto dele volta a ~11 px (Claude, 24/10) */
@media (max-width:600px){.grafico .eixo,.grafico .valor{font-size:22px}}