/* gocai — paleta neutra moderna (grafite + teal) */
:root {
--bg: #fafaf9;
--surface: #ffffff;
--ink: #1c1917;
--ink-soft: #57534e;
--line: #e7e5e4;
--accent: #0f766e;
--accent-strong: #115e59;
--accent-soft: #ccfbf1;
--radius: 14px;
--maxw: 960px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
header.site {
position: sticky; top: 0; z-index: 10;
background: rgba(250, 250, 249, .92); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; padding-bottom: .8rem; }
.logo { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.logo span { color: var(--accent); }
nav.main a { color: var(--ink-soft); text-decoration: none; margin-left: 1.1rem; font-size: .95rem; }
nav.main a:hover { color: var(--accent-strong); }
.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 1rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 40rem; margin: 0 0 1.8rem; }
.btn {
display: inline-block; padding: .75rem 1.5rem; border-radius: 999px;
font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 1rem;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { background: transparent; color: var(--accent-strong); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
section { padding: 3rem 0; }
section h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 .4rem; }
section p.sub { color: var(--ink-soft); margin: 0 0 2rem; max-width: 42rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 1.4rem;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.card .xp { display: block; margin-top: .8rem; font-size: .85rem; color: var(--accent-strong); background: var(--accent-soft); border-radius: 8px; padding: .45rem .7rem; }
.card .price { display: inline-block; margin-top: .9rem; font-weight: 700; color: var(--accent-strong); }
.note {
background: var(--accent-soft); border-radius: var(--radius);
padding: 1.1rem 1.4rem; color: var(--accent-strong); font-size: .95rem;
}
footer.site { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--ink-soft); font-size: .9rem; }
footer.site a { color: var(--accent-strong); }
/* ---------- pré-venda ---------- */
.gate { text-align: center; padding: 5rem 1rem; }
.gate h1 { letter-spacing: -.02em; }
.progress { margin: 1.6rem 0 2rem; }
.progress .bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.progress .label { font-size: .85rem; color: var(--ink-soft); margin-top: .45rem; }
.q { margin-bottom: 1.6rem; }
.q > label.title, .q fieldset legend { font-weight: 600; display: block; margin-bottom: .5rem; }
/* `min-inline-size: 0` desfaz o padrão do próprio HTML: fieldset nasce com
min-inline-size min-content, e um filho que não quebra linha (o do
comando de B3) esticava a PÁGINA INTEIRA para a largura da linha — 6002px
de rolagem horizontal em vez de rolagem dentro da caixa do comando. */
.q fieldset { border: none; margin: 0; padding: 0; min-inline-size: 0; }
.q .opt { display: flex; align-items: flex-start; gap: .55rem; padding: .3rem 0; }
.q .opt input { margin-top: .3rem; accent-color: var(--accent); }
/* Opção recomendada no escolhedor de modo (pré-venda): mesma paleta do selo
.selo-on, só que aplicada à própria caixa da opção para chamar o olho antes
de ler o texto. */
.q .opt-destaque {
border: 1.5px solid var(--accent); border-radius: 10px;
background: var(--accent-soft); padding: .6rem .7rem; margin: 0 0 .3rem;
}
.q input[type="text"], .q input[type="number"], .q textarea {
width: 100%; padding: .65rem .8rem; border: 1.5px solid var(--line);
border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink);
}
.q input:focus, .q textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.q textarea { min-height: 5.5rem; resize: vertical; }
.q .opt input[type="text"] { width: auto; flex: 1; padding: .35rem .6rem; }
.step-nav { display: flex; gap: .8rem; justify-content: space-between; margin-top: 2rem; flex-wrap: wrap; }
/* Índice das seções: a navegação que antes trocava de etapa vira atalho. Fica
grudado logo abaixo do cabeçalho do site (que também é sticky) para continuar
alcançável no meio de uma página longa. */
.form-indice {
position: sticky; top: 3.6rem; z-index: 5;
display: flex; gap: .4rem; overflow-x: auto;
padding: .6rem 0; margin-bottom: .6rem;
background: rgba(250, 250, 249, .94); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.form-indice a {
flex: 0 0 auto; font-size: .82rem; text-decoration: none; white-space: nowrap;
color: var(--ink-soft); background: var(--surface);
border: 1px solid var(--line); border-radius: 999px; padding: .18rem .7rem;
}
.form-indice a:hover { color: var(--accent-strong); border-color: var(--accent); }
/* Seção que já tem alguma resposta — o mesmo sinal que alimenta a barra. */
.form-indice a.ok { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
/* Bloco vira seção da página única. `scroll-margin-top` desconta as duas barras
grudadas, senão o atalho do índice para em cima do próprio título. */
.bloco { padding: 1.6rem 0 .4rem; border-top: 1px solid var(--line); scroll-margin-top: 7.5rem; }
.bloco:first-child { border-top: none; padding-top: .6rem; }
.bloco h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
.payload-panel {
background: var(--surface); border: 1.5px solid var(--accent);
border-radius: var(--radius); padding: 1.4rem; margin-top: 2rem;
}
.payload-panel h3 { margin: 0 0 .5rem; }
.payload-panel .actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.payload-panel textarea {
width: 100%; min-height: 6rem; font-family: ui-monospace, monospace; font-size: .8rem;
border: 1px solid var(--line); border-radius: 10px; padding: .7rem; color: var(--ink-soft);
}
.done-list { list-style: none; padding: 0; }
.done-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.muted { color: var(--ink-soft); font-size: .9rem; }
.hidden { display: none !important; }
/* Serviços agrupados (starter × complementos) e tabela comparativa */
.group-title { font-size: 1.05rem; color: var(--ink-soft); margin: 2rem 0 .9rem; letter-spacing: .01em; text-transform: uppercase; font-weight: 700; }
.group-title:first-of-type { margin-top: .5rem; }
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.compare table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.compare th, .compare td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.compare tr:last-child td { border-bottom: none; }
.compare td:first-child { font-weight: 600; white-space: nowrap; }
/* ---------- formulários: seletores e grupos repetíveis ---------- */
.q select {
width: 100%; padding: .6rem .7rem; border: 1.5px solid var(--line);
border-radius: 10px; font: inherit; background: #fff; color: var(--ink);
}
.q select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.grupo-item {
border: 1.5px solid var(--line); border-radius: 12px;
padding: .9rem 1rem 1rem; margin-bottom: .9rem; background: var(--accent-soft);
}
.grupo-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.grupo-head .btn { padding: .25rem .6rem; font-size: .85rem; }
.grupo-campo { display: block; margin-bottom: .6rem; }
.grupo-campo:last-child { margin-bottom: 0; }
.grupo-label { display: block; font-size: .88rem; color: var(--ink-soft); margin-bottom: .2rem; }
.grupo-campo input, .grupo-campo select, .grupo-campo textarea {
width: 100%; padding: .5rem .65rem; border: 1.5px solid var(--line);
border-radius: 9px; font: inherit; background: #fff; color: var(--ink);
}
.grupo-campo textarea { resize: vertical; min-height: 6.5rem; line-height: 1.45; }
.grupo-campo input:focus, .grupo-campo select:focus, .grupo-campo textarea:focus {
outline: 2px solid var(--accent); border-color: var(--accent);
}
/* Dica e exemplo de um campo de texto livre. O exemplo é : preserva as
* quebras de linha que são o próprio formato sugerido, e fica selecionável
* para quem preferir copiar à mão em vez de usar o botão. */
.grupo-hint { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .4rem; line-height: 1.45; }
.grupo-exemplo-wrap { margin: 0 0 .5rem; }
.grupo-exemplo {
display: block; overflow-x: auto; max-width: 100%;
margin: 0 0 .4rem; padding: .6rem .7rem;
border: 1px dashed var(--line); border-radius: 9px; background: #fff;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .78rem; line-height: 1.5; color: var(--ink-soft);
white-space: pre; user-select: all;
}
.grupo-exemplo-btn { padding: .25rem .6rem; font-size: .85rem; }
@media (min-width: 700px) {
.grupo-item { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.grupo-head { grid-column: 1 / -1; margin-bottom: 0; }
/* Campo de texto longo ocupa a linha inteira da grade. */
.grupo-campo.full { grid-column: 1 / -1; }
}
/* ---------- formulários: selos, opção desabilitada, campo acoplado ---------- */
.selo {
display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px;
background: var(--line); color: var(--ink-soft); vertical-align: middle; margin-left: .35rem;
}
.selo-on { background: var(--accent-soft); color: var(--accent-strong); }
.selo-custo { background: #fef3c7; color: #92400e; }
/* Opção desabilitada continua legível: ela é vitrine de roadmap, não ruído.
Só o suficiente para ninguém tentar clicar duas vezes achando que travou. */
.opt-off { opacity: .62; }
.opt-off span { cursor: not-allowed; }
.opt-campo { margin: -.1rem 0 .5rem 1.6rem; }
.opt-campo input, .opt-campo textarea {
width: 100%; padding: .5rem .65rem; border: 1.5px solid var(--line);
border-radius: 9px; font: inherit; background: #fff; color: var(--ink);
}
.opt-campo textarea { min-height: 6.5rem; resize: vertical; font-size: .92rem; }
.opt-campo input:disabled, .opt-campo textarea:disabled {
background: #f5f5f4; color: var(--ink-soft); cursor: not-allowed;
}
.opt-campo input:focus, .opt-campo textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.ajuda-link { margin: .1rem 0 .6rem; font-size: .9rem; }
.ajuda-link a { color: var(--accent-strong); }
/* Legenda fixa do campo acoplado: o formato esperado, impresso FORA do campo.
Placeholder some no primeiro caractere — some justamente quando a pessoa
está montando a resposta e precisa do formato na frente. */
.opt-campo-legenda {
margin: 0 0 .3rem; font-size: .82rem; line-height: 1.45; color: var(--ink-soft);
}
.opt-campo-legenda strong {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .82rem; color: var(--ink);
}
/* ---------- comando para colar no terminal ---------- */
.comandos { margin: .2rem 0 .8rem; }
.comandos-intro { font-size: .9rem; line-height: 1.5; margin: 0 0 .6rem; }
.comandos-nota { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); margin: .5rem 0 0; }
.comando {
min-width: 0;
border: 1.5px solid var(--line); border-radius: 11px;
padding: .65rem .75rem; margin: 0 0 .6rem; background: #fff;
}
.comando-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.comando-head strong { font-size: .92rem; }
.comando-copiar { padding: .25rem .6rem; font-size: .85rem; white-space: nowrap; }
.comando-passos { font-size: .86rem; line-height: 1.5; margin: .4rem 0 .45rem; }
.comando-nota { font-size: .8rem; line-height: 1.5; color: var(--ink-soft); margin: .4rem 0 0; }
/* O comando é uma linha longa: rola dentro da própria caixa em vez de esticar
a página. `user-select: all` é para quem prefere copiar à mão. */
.comando-codigo {
display: block; overflow-x: auto; max-width: 100%;
margin: 0; padding: .6rem .7rem;
border: 1px dashed var(--line); border-radius: 9px; background: #faf9f7;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .74rem; line-height: 1.55; color: var(--ink);
white-space: pre; user-select: all;
}
/* ---------- páginas de ajuda ---------- */
.doc { max-width: 46rem; padding: 2.5rem 0 3rem; }
.doc h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .6rem; }
.doc h2 { font-size: 1.25rem; letter-spacing: -.01em; margin: 2.2rem 0 .6rem; }
.doc h3 { font-size: 1.02rem; margin: 1.5rem 0 .4rem; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.65; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc strong { color: var(--ink); }
.doc pre {
background: #1c1917; color: #e7e5e4; padding: .9rem 1rem; border-radius: 10px;
overflow-x: auto; font-size: .86rem; line-height: 1.5;
}
.doc code { font-size: .9em; background: var(--accent-soft); color: var(--accent-strong); padding: .1rem .3rem; border-radius: 5px; }
.doc pre code { background: none; color: inherit; padding: 0; }
/* Tabelas dentro de uma página de documentação. Não existiam: a /ajuda/apoio-pre-requisitos
* já usava e caía no padrão do navegador, sem respiro e sem linha. `display: block`
* + overflow-x é o que impede uma tabela larga de empurrar a página inteira no celular. */
.doc table {
display: block; width: 100%; overflow-x: auto;
border-collapse: collapse; font-size: .93rem; margin: .8rem 0 1.2rem;
}
.doc th, .doc td {
text-align: left; padding: .6rem .8rem;
border-bottom: 1px solid var(--line); vertical-align: top;
color: var(--ink-soft); line-height: 1.55;
}
.doc th {
font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-soft); border-bottom-width: 1.5px;
}
.doc td:first-child { color: var(--ink); }
.doc tbody tr:last-child td { border-bottom: none; }
/* O bloco de "faça isto" no alto de uma página de documentação. Existe porque
* quase ninguém lê o documento inteiro antes de agir: quem já sabe o que está
* fazendo resolve aqui em trinta segundos, e quem quer entender o porquê rola
* para baixo. O detalhe continua na página — só deixa de ser pedágio. */
.resumo {
border: 1.5px solid var(--accent); border-radius: 12px;
background: var(--accent-soft); padding: 1rem 1.2rem 1.1rem; margin: 1.4rem 0 1.8rem;
}
.resumo h2 {
margin: 0 0 .2rem; font-size: .78rem; text-transform: uppercase;
letter-spacing: .07em; color: var(--accent-strong);
}
.resumo .tempo { margin: 0 0 .7rem; font-size: .86rem; color: var(--ink-soft); }
.resumo ol, .resumo ul { margin: 0; padding-left: 1.2rem; }
.resumo li { margin-bottom: .45rem; color: var(--ink); line-height: 1.55; }
.resumo li:last-child { margin-bottom: 0; }
.resumo pre { margin: .4rem 0 .2rem; }
.resumo .depois { margin: .9rem 0 0; font-size: .89rem; color: var(--ink-soft); }
/* Aviso curto de consequência. Sóbrio de propósito: se tudo grita, nada grita. */
.aviso {
border-left: 3px solid #b45309; background: #fffbeb;
padding: .7rem .9rem; border-radius: 0 9px 9px 0; margin: 1rem 0;
}
.aviso p { margin: 0; color: #78350f; font-size: .93rem; line-height: 1.55; }
.aviso p + p { margin-top: .5rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1rem 0; }
.doc th, .doc td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); }
.doc td { color: var(--ink-soft); }
.doc .voltar { margin-top: 2.5rem; }
/* ── Tags da central de ajuda ─────────────────────────────────────────────
Três famílias: público (quem deve ler), frequência (quando volta a ler) e
tempo (quanto custa fazer, do começo ao fim, com tudo em mãos).
Usuário/pós-venda usam as duas primeiras para priorizar atenção na curva de
aprendizado — ver a legenda em /ajuda/.
A etiqueta de TEMPO entrou em 25/09/2026 porque "é só seguir o passo a passo"
não diz se a pessoa precisa de cinco minutos ou de uma tarde. Quem abre a
página no meio do expediente decide com ela se começa agora ou agenda. É
estimativa de execução com os pré-requisitos já atendidos — não inclui o
tempo de conseguir chave, token ou autorização. Página sem tempo medido não
recebe a etiqueta: número chutado é pior que número ausente. */
.tags { display: flex; gap: .45rem; flex-wrap: wrap; margin: .35rem 0 1.1rem; }
.card .tags { margin: .6rem 0 0; }
.tag { font-size: .72rem; font-weight: 600; letter-spacing: .04em;
padding: .18rem .6rem; border-radius: 999px; border: 1px solid transparent; }
.tag-usuario { color: #115e59; background: #ccfbf1; border-color: #99f6e4; }
.tag-tecnico { color: #44403c; background: #e7e5e4; border-color: #d6d3d1; }
.tag-inicial { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.tag-diaadia { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.tag-esporadica { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tag-tempo { color: #5b21b6; background: #ede9fe; border-color: #ddd6fe; }
/* Telas ilustradas dos guias.
O padrão é DESENHO, não captura: um print real carrega o e-mail, o nome da
agenda e o projeto de quem tirou — dado de uma pessoa numa página que vai
para todo cliente — e envelhece calado no próximo redesenho do fornecedor. O
desenho diz onde clicar, que é a única coisa que o guia precisa dizer.
Ficam DENTRO do do passo, para que a imagem não se solte do texto que
ela ilustra quando a lista é lida no celular.
EXCEÇÃO (desde 25/09/2026, a pedido do dono): captura real de tela quando o
valor está em provar que a tela existe e é aquela mesma — um erro que não dá
mensagem clara, um botão em estado estranho, um campo que engana. Desenho
desses não convence: o leitor precisa reconhecer a tela dele. Duas condições,
sem exceção: (1) nenhum dado de pessoa na imagem — nome de usuário, e-mail,
título de nota e nome de projeto saem antes, sobrescritos por um valor
genérico; (2) a data da captura vai na legenda, porque o fornecedor redesenha
a tela e o print vence sem avisar. */
figure.tela { margin: .9rem 0 .2rem; }
figure.tela img { width: 100%; max-width: 640px; display: block;
border: 1px solid var(--line); border-radius: 10px; background: #fff; }
figure.tela figcaption { font-size: .82rem; color: var(--ink-soft);
margin-top: .4rem; max-width: 640px; }
/* Captura de celular: mais estreita que a coluna, senão uma tela de 720x1300
empurra o passo seguinte para fora da primeira dobra e o guia fica com cara
de longo. Mas não estreita demais: a 300px o rótulo secundário da tela
(a versão do plugin, a descrição sob o título da seção) fica ilegível, e aí a
captura não prova mais nada. 420px é onde as duas coisas se resolvem — quem
precisa do detalhe miúdo toca e abre em tamanho cheio.
A legenda acompanha a largura da imagem: legenda mais larga que a figura que
ela descreve faz o conjunto parecer desancorado. */
figure.tela.celular img { max-width: 420px; }
figure.tela.celular figcaption { max-width: 420px; }