:root{
  --papel:#FFFFFF;
  --ground:#F5F6F4;
  --ground-2:#E9EBE6;
  --ink:#13272D;
  --ink-2:#52646A;
  --linha:#DCDED8;
  --linha-forte:#B7BCB3;
  --bronze:#A2621F;
  --bronze-claro:#F3E7D8;
  --petroleo:#0E4A4E;
  --ok:#2A6349;

  /* a tinta que vai SOBRE o bronze — muda com o tema, porque o bronze clareia no escuro.
     O hover é token pela MESMA razão: escurecer o fundo no tema escuro, onde a tinta já é
     escura, derruba o contraste para 3:1 e apaga o rótulo do botão. */
  --botao-tinta:#FFFFFF;
  --bronze-hover:#8C5318;

  /* o texto sobre a faixa escura do fecho — invertido no tema claro, comum no escuro */
  --ink-invertido:#B9C4C5;

  /* a superfície invertida: o ciclo do título e o fecho. No tema escuro ela não pode
     escurecer mais que o papel, senão a página vira um degrau para baixo — vira o cinza
     de cima, que é como as camadas se ordenam nos dois temas. */
  --inverso:#102A2E;
  --inverso-tinta:#EDEAE2;
  --inverso-suave:#9FB3B4;
  --inverso-linha:#24444A;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --corpo:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#131A1C;
    --ground:#0E1416;
    --ground-2:#1B2427;
    --ink:#E9E6DE;
    --ink-2:#9DADB0;
    --linha:#293538;
    --linha-forte:#41545A;
    --bronze:#D79A55;
    --bronze-claro:#30251A;
    --petroleo:#7FC4C0;
    --ok:#7CBE9C;
    --botao-tinta:#17120B;
    --bronze-hover:#E4AC6D;
    --ink-invertido:#9DADB0;
    --inverso:#1B2427;
    --inverso-tinta:#E9E6DE;
    --inverso-suave:#9DADB0;
    --inverso-linha:#2D3A3D;
  }
}

:root[data-theme="dark"]{
  --papel:#131A1C;
  --ground:#0E1416;
  --ground-2:#1B2427;
  --ink:#E9E6DE;
  --ink-2:#9DADB0;
  --linha:#293538;
  --linha-forte:#41545A;
  --bronze:#D79A55;
  --bronze-claro:#30251A;
  --petroleo:#7FC4C0;
  --ok:#7CBE9C;
  --botao-tinta:#17120B;
  --bronze-hover:#E4AC6D;
  --ink-invertido:#9DADB0;
  --inverso:#1B2427;
  --inverso-tinta:#E9E6DE;
  --inverso-suave:#9DADB0;
  --inverso-linha:#2D3A3D;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/* escala de z-index: 10 conteúdo elevado · 20 cabeçalho · 30 diálogo · 50 alerta */

/* pular para o conteúdo — primeiro tab da página */
.pular{
  position:absolute;
  left:-9999px;
  background:var(--ink);
  color:var(--papel);
  padding:12px 18px;
  z-index:50;
  text-decoration:none;
  font-weight:600;
}

.pular:focus{left:12px;top:12px}

body{
  margin:0;
  background:var(--papel);
  color:var(--ink);
  font-family:var(--corpo);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

a{color:var(--bronze)}

.faixa{padding-inline:20px}

.largura{max-width:68rem;margin:0 auto}

.estreito{max-width:46rem}

h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}

.rotulo{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 12px;
}

/* ---------------- topo ---------------- */

.cabecalho{
  border-bottom:1px solid var(--linha);
  background:var(--papel);
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:20;
}

.cabecalho .largura{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding-block:14px;
}

.marca{
  font-family:var(--display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}

.marca span{color:var(--bronze)}

.menu{
  display:flex;
  gap:4px 18px;
  flex-wrap:wrap;
  margin-left:auto;
  align-items:center;
  font-size:.93rem;
}

/* alvo de toque de 44px mesmo com a linha de texto pequena (regra crítica em telefone).
   `:not(.botao)` é obrigatório: o CTA do topo é um <a class="botao"> DENTRO do menu, e
   `.menu a` (0-1-1) vence `.botao` (0-1-0) na cascata — era por aqui que o rótulo do botão
   saía cinza-ardósia sobre bronze (1,5:1) em vez da tinta do botão. */
.menu a:not(.botao){
  color:var(--ink-2);
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding-inline:2px;
  transition:color 180ms ease;
}

.menu a:not(.botao):hover{color:var(--bronze)}

.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  background:var(--bronze);
  color:var(--botao-tinta);
  padding:11px 22px;
  font-weight:600;
  font-size:.93rem;
  text-decoration:none;
  border:1px solid var(--bronze);
  cursor:pointer;
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease;
}

.botao:hover{background:var(--bronze-hover);border-color:var(--bronze-hover)}

 /* o fantasma NÃO leva a tinta do botão cheio: o fundo dele é o papel da página,
    e foi por aqui que o texto sumiu no tema escuro (tinta escura sobre fundo escuro) */
.botao.fantasma{
  background:transparent;
  color:var(--ink);
  border-color:var(--linha-forte);
}

.botao.fantasma:hover{background:var(--ground);border-color:var(--ink-2)}

/* ---------------- hero ---------------- */

.hero{padding-block:60px 52px;border-bottom:1px solid var(--linha)}

.hero .largura{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}

@media (max-width:900px){
  .hero .largura{grid-template-columns:1fr;gap:36px}
}

.hero h1{
  font-size:clamp(2.1rem,5.4vw,3.4rem);
  line-height:1.1;
  margin-bottom:20px;
}

/* a captura de tela: o espaço é reservado pelo aspect-ratio, então a página não pula
   quando a imagem real entrar no lugar do desenho */
.tela{margin:0}

.tela .moldura{
  border:1px solid var(--linha-forte);
  background:var(--ground);
  aspect-ratio:4/3;
  max-width:100%;
  overflow:hidden;
  display:block;
}

.tela img{display:block;width:100%;height:100%;object-fit:cover}

.tela figcaption{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--ink-2);
  margin-top:10px;
  line-height:1.5;
}

.bluf{
  font-size:1.14rem;
  color:var(--ink-2);
  max-width:40em;
  margin:0 0 28px;
}

.bluf strong{color:var(--ink);font-weight:600}

.acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.acoes .nota{font-size:.85rem;color:var(--ink-2)}

/* ---------------- números ---------------- */

.numeros{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;
  border-block:1px solid var(--linha);
}

.numeros div{background:var(--ground);padding:22px 20px;box-shadow:0 0 0 1px var(--linha)}

.numeros .valor{
  font-family:var(--display);
  font-size:2.1rem;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.numeros .rot{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:10px;
}

/* ---------------- seções ---------------- */

section{padding-block:60px}

section + section{border-top:1px solid var(--linha)}

.tom{background:var(--ground)}

h2{font-size:clamp(1.6rem,3.8vw,2.2rem);line-height:1.15;margin-bottom:12px}

.intro{color:var(--ink-2);max-width:42em;margin:0 0 32px;font-size:1.04rem}

 /* ---------------- o carimbo: a serventia e os sistemas em volta ----------------

   Direção: SELO REGISTRAL. O centro do diagrama é um carimbo de cartório — dois anéis, o
   núcleo escuro e a legenda correndo pela circunferência. A legenda diz o que os sistemas
   DIVIDEM, então o ornamento é a própria informação; sem isso seria desenho bonito e mudo.

   O diagrama ACOMPANHA os cards, nunca os substitui: o texto de cada sistema e o link para
   a página dele são o que a busca lê e o que leva o visitante adiante.                      */

.orbita{
  display:block;
  width:100%;
  max-width:46rem;
  margin:0 auto 44px;
  height:auto;
}

.orbita .fio{stroke:var(--linha-forte);stroke-width:1;fill:none}
.orbita .ponta circle{fill:var(--bronze)}

.orbita .selo-fora{fill:none;stroke:var(--bronze);stroke-width:1;opacity:.45}
.orbita .selo-anel{fill:none;stroke:var(--bronze);stroke-width:1.5}
.orbita .selo-nucleo{fill:var(--inverso)}

/* a legenda do carimbo: caixa alta, espaçada, como a orla de um selo de verdade */
.orbita .legenda{
  font:500 10px var(--mono);
  fill:var(--ink-2);
  letter-spacing:1.6px;
}

.orbita .centro-1{font:600 24px var(--display);fill:var(--inverso-tinta);text-anchor:middle}

.orbita .no{
  fill:var(--papel);
  stroke:var(--linha-forte);
  stroke-width:1;
  transition:stroke 180ms ease,fill 180ms ease;
}

/* a barra vertical é a lombada da ficha — e é ela que acende no hover, em vez de a caixa
   inteira mudar de cor, que faria o diagrama piscar a cada passagem do mouse */
.orbita .no-marca{fill:var(--linha-forte);transition:fill 180ms ease}
.orbita .nome{font:600 15px var(--corpo);fill:var(--ink)}
.orbita .tipo{font:9.5px var(--mono);fill:var(--ink-2)}

.orbita .no-link{cursor:pointer}
.orbita .no-link:hover .no{stroke:var(--bronze);fill:var(--bronze-claro)}
.orbita .no-link:hover .no-marca{fill:var(--bronze)}
.orbita .no-link:hover .nome{fill:var(--bronze)}

/* ---------------- sistemas ---------------- */

.sistemas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:20px;
}

/* o card inteiro é clicável (o link se estica por cima), com retorno de hover
   em cor e sombra — nunca em transform, que empurraria o vizinho */
.sistema{
  position:relative;
  background:var(--papel);
  border:1px solid var(--linha);
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  transition:border-color 180ms ease,box-shadow 180ms ease;
}

.sistema:hover{
  border-color:var(--bronze);
  box-shadow:0 2px 0 var(--bronze);
}

.sistema:focus-within{border-color:var(--bronze)}

.sistema a::after{
  content:"";
  position:absolute;
  inset:0;
}

.sistema h3{font-size:1.16rem}

.sistema .serventia{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bronze);
}

.sistema p{margin:0;font-size:.95rem;color:var(--ink-2)}

.sistema a{
  margin-top:auto;
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  padding-top:10px;
  min-height:44px;
  display:flex;
  align-items:flex-end;
}

.sistema:hover a{text-decoration:underline}

/* ---------------- ciclo do título ---------------- */

 /* o ciclo do título é a única seção invertida da página: é o miolo do argumento,
    e o degrau de cor é o que dá ritmo a uma home que seria branca de cima a baixo */
.inversa{background:var(--inverso);color:var(--inverso-tinta)}
.inversa h2{color:var(--inverso-tinta)}
.inversa .intro{color:var(--inverso-suave)}

.ciclo{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:etapa;
  border-top:1px solid var(--inverso-linha);
}

.ciclo li{
  counter-increment:etapa;
  display:grid;
  grid-template-columns:3rem 12rem 1fr;
  gap:0 20px;
  padding:20px 0;
  border-bottom:1px solid var(--inverso-linha);
  align-items:baseline;
}

.ciclo li::before{
  content:counter(etapa,decimal-leading-zero);
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--bronze);
}

.ciclo h3{font-size:1.02rem;font-family:var(--corpo);font-weight:600}

.ciclo h3{color:var(--inverso-tinta)}
.ciclo p{margin:0;color:var(--inverso-suave);font-size:.95rem}

@media (max-width:760px){
  .ciclo li{grid-template-columns:2.4rem 1fr;gap:4px 14px}
  .ciclo h3{grid-column:2}
  .ciclo p{grid-column:2}
}

/* ---------------- integrações ---------------- */

.integracoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
}

.integracoes div{background:var(--papel);padding:20px;box-shadow:0 0 0 1px var(--linha)}

/* ícones de traço, 24×24, herdando a cor do texto — nunca emoji */
.icone{
  width:24px;
  height:24px;
  stroke:var(--bronze);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:12px;
  display:block;
}

.integracoes h3{font-size:1rem;font-family:var(--corpo);font-weight:600;margin-bottom:6px}

.integracoes p{margin:0;font-size:.9rem;color:var(--ink-2)}

.integracoes .sigla{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--bronze);
  display:block;
  margin-bottom:8px;
}

 /* ---------------- conformidade ---------------- */

.conformidade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:40px;
  align-items:start;
}

@media (max-width:860px){ .conformidade{grid-template-columns:1fr;gap:28px} }

/* o painel: itens com estado, que é o que o cliente vê no dagai-admin */
.painel{
  border:1px solid var(--linha);
  background:var(--papel);
}

.painel-topo{
  background:var(--inverso);
  color:var(--inverso-tinta);
  padding:12px 16px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.painel ul{list-style:none;margin:0;padding:0}

.painel li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--linha);
  font-size:.92rem;
}

.painel li:last-child{border-bottom:none}

.painel .selo{
  width:18px;
  height:18px;
  stroke:var(--ok);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.painel .etapa{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:10px 16px;
  background:var(--ground);
  border-bottom:1px solid var(--linha);
}

/* ---------------- diferenciais ---------------- */

.razoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:28px 32px;
}

.razoes h3{
  font-family:var(--corpo);
  font-weight:600;
  font-size:1.04rem;
  margin-bottom:8px;
  padding-left:14px;
  border-left:3px solid var(--bronze);
}

.razoes p{margin:0;color:var(--ink-2);font-size:.95rem;padding-left:17px}

/* ---------------- ferramenta ---------------- */

.ferramenta{
  border:1px solid var(--linha-forte);
  background:var(--bronze-claro);
  padding:30px 28px;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.ferramenta div{max-width:40em}

.ferramenta h2{margin-bottom:8px;font-size:1.5rem}

.ferramenta p{margin:0;color:var(--ink-2)}

/* ---------------- depoimento ---------------- */

blockquote{
  margin:0;
  font-family:var(--display);
  font-size:1.3rem;
  line-height:1.45;
  max-width:34em;
}

.assina{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--ink-2);
  margin-top:18px;
  letter-spacing:.04em;
}

/* ---------------- FAQ ---------------- */

.faq{border-top:1px solid var(--linha);max-width:50rem}

details{border-bottom:1px solid var(--linha)}

summary{
  cursor:pointer;
  padding:16px 0;
  min-height:56px;
  font-weight:600;
  font-size:1.02rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  transition:color 180ms ease;
}

summary:hover{color:var(--bronze)}

summary::-webkit-details-marker{display:none}

summary::after{
  content:"+";
  font-family:var(--mono);
  color:var(--bronze);
  font-size:1.1rem;
}

details[open] summary::after{content:"–"}

details p{margin:0 0 18px;color:var(--ink-2);max-width:46em;font-size:.97rem}

/* ---------------- conteúdo ---------------- */

.artigos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}

.artigos article a{
  font-family:var(--display);
  font-size:1.12rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  display:block;
  margin-bottom:8px;
}

.artigos article a:hover{color:var(--bronze)}

.artigos p{margin:0;font-size:.93rem;color:var(--ink-2)}

.artigos .tema{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bronze);
  display:block;
  margin-bottom:8px;
}

/* ---------------- CTA final ---------------- */

.fechamento{background:var(--inverso);color:var(--inverso-tinta);padding-block:64px}

.fechamento h2{color:var(--inverso-tinta);margin-bottom:14px}


.fechamento p{color:var(--inverso-suave);max-width:40em;margin:0 0 26px}



/* ---------------- rodapé ---------------- */

footer{border-top:1px solid var(--linha);padding-block:40px;font-size:.92rem}

.rodape{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:28px;
}

footer h3{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:500;
  margin-bottom:10px;
}

footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}

footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--bronze)}

.legal{
  margin-top:32px;
  padding-top:18px;
  border-top:1px solid var(--linha);
  color:var(--ink-2);
  font-size:.85rem;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:space-between;
}

/* ---------------- o que falta preencher ---------------- */

.preencher{
  background:#FFE9A8;
  color:#4A3B00;
  font-family:var(--mono);
  font-size:.82em;
  padding:1px 6px;
  border-radius:2px;
  white-space:nowrap;
}

/* a faixa de confiança: cidades atendidas, logo abaixo do hero */
.confianca{
  border-bottom:1px solid var(--linha);
  padding-block:22px;
  display:flex;
  gap:14px 28px;
  flex-wrap:wrap;
  align-items:center;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-2);
}

.confianca strong{
  color:var(--ink);
  font-weight:500;
  text-transform:uppercase;
}

:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:1px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ======================================================================
   PÁGINAS INTERNAS — o que a home não usa
   ====================================================================== */

/* trilha: onde estou no site. Vira BreadcrumbList no JSON-LD de cada página. */
.trilha{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--ink-2);
  padding-block:16px 0;
}

.trilha a{text-decoration:none}
.trilha a:hover{text-decoration:underline}
.trilha span{margin-inline:6px;opacity:.6}

/* o alto de uma página interna: rótulo, título e a resposta direta (BLUF) */
.capa{padding-block:36px 44px;border-bottom:1px solid var(--linha)}
.capa h1{font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.12;margin-bottom:18px;max-width:20em}
.capa .bluf{font-size:1.1rem}

/* corpo de texto longo — artigo e página de recurso */
.prosa{max-width:42em}
.prosa h2{font-size:clamp(1.3rem,3vw,1.7rem);margin:40px 0 12px}
.prosa h3{font-family:var(--corpo);font-weight:600;font-size:1.05rem;margin:28px 0 8px}
.prosa p{margin:0 0 16px}
.prosa ul,.prosa ol{margin:0 0 18px;padding-left:22px}
.prosa li{margin-bottom:8px}
.prosa li::marker{color:var(--bronze)}
.prosa blockquote{
  margin:24px 0;
  padding:14px 18px;
  border-left:3px solid var(--bronze);
  background:var(--ground);
  font-family:var(--corpo);
  font-size:1rem;
}
.prosa blockquote p:last-child{margin:0}

/* lista de recursos/módulos dentro de uma página de sistema.

   A borda é SOMBRA de 1px em cada célula, e não o fundo do contêiner aparecendo pelo gap:
   com dez módulos numa grade de quatro colunas, as duas células que faltam para fechar a
   última linha apareciam como um bloco cinza no meio da página. */
.modulos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;
  margin-bottom:28px;
}
.modulos div{
  background:var(--papel);
  padding:18px 20px;
  box-shadow:0 0 0 1px var(--linha);
}
.modulos h3{font-family:var(--corpo);font-weight:600;font-size:1rem;margin:0 0 6px}
.modulos p{margin:0;font-size:.92rem;color:var(--ink-2)}

/* tabela de fatos: o formato que a extração por IA lê melhor */
.fatos{width:100%;border-collapse:collapse;margin-bottom:28px;font-size:.95rem}
.fatos th{
  text-align:left;
  font-family:var(--mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:10px 14px 10px 0;
  border-bottom:1px solid var(--linha);
  white-space:nowrap;
  vertical-align:top;
  width:30%;
}
.fatos td{padding:10px 0;border-bottom:1px solid var(--linha)}
.fatos tr:last-child th,.fatos tr:last-child td{border-bottom:none}

/* índice de páginas (sistemas/, recursos/, conteudo/) */
.indice{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}

/* a calculadora */
.ferramenta-caixa{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
}
@media (max-width:820px){ .ferramenta-caixa{grid-template-columns:1fr} }

.campo{display:block;margin-bottom:18px}
.campo span{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:6px;
}
.campo input,.campo select{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--papel);
  border:1px solid var(--linha-forte);
}
.campo input:focus,.campo select:focus{outline:2px solid var(--bronze);outline-offset:1px}

.resultado{
  border:1px solid var(--linha-forte);
  background:var(--ground);
  padding:24px;
}
.resultado .rot{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.resultado .data{
  font-family:var(--display);
  font-size:2.2rem;
  line-height:1.1;
  margin:8px 0 4px;
  font-variant-numeric:tabular-nums;
}
.resultado .detalhe{font-size:.92rem;color:var(--ink-2);margin:0}
.resultado ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--linha);font-size:.9rem}
.resultado li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linha)}
.resultado li:last-child{border-bottom:none}
.resultado li span:last-child{font-family:var(--mono);color:var(--ink-2)}

/* artigos: lista e assinatura */
.meta-artigo{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--ink-2);
  margin-bottom:24px;
}

.relacionadas{
  border-top:1px solid var(--linha);
  margin-top:48px;
  padding-top:28px;
}

.cta-fim{
  border:1px solid var(--linha-forte);
  background:var(--bronze-claro);
  padding:26px 24px;
  margin-top:40px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.cta-fim h2{margin:0 0 6px;font-size:1.3rem}
.cta-fim p{margin:0;color:var(--ink-2);max-width:34em}

/* a lista de serventias: cidades em colunas, sem dizer quem usa o quê */
.cidades{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;
}
.cidades li{
  background:var(--papel);
  box-shadow:0 0 0 1px var(--linha);
  padding:14px 16px;
  font-weight:600;
}

/* a captura de tela dentro da página do sistema */
.tela-produto{margin:0 0 40px}
.tela-produto + .tela-produto{margin-top:8px}
.tela-produto img{
  display:block;
  width:100%;
  height:auto;

  border:1px solid var(--linha-forte);
  background:var(--ground);
}
.tela-produto figcaption{
  font-size:.9rem;
  color:var(--ink-2);
  margin-top:10px;
  max-width:44em;
}

/* ─── O Consultor ───────────────────────────────────────────────────────────
   A conversa é a ferramenta: caixa única, papel dentro do papel, e o balão de
   quem pergunta marcado pela borda de bronze — não por cor de fundo forte, que
   brigaria com as duas luzes do site. */

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.consultor{
  border:1px solid var(--linha-forte);
  background:var(--papel);
  padding:20px;
  max-width:60em;
}

/* Vazia a caixa não reserva altura: o vão em branco entre o convite e os exemplos se lê como
   página quebrada. Ela vira painel de rolagem na primeira fala, pela classe `ativa`. */
.conversa{padding:4px 4px 0}
.conversa.ativa{
  min-height:220px;
  max-height:60vh;
  overflow-y:auto;
}
.conversa-vazia{
  color:var(--ink-2);
  padding:6px 8px 14px;
}
.conversa-vazia p{margin:0 0 6px}
.conversa-vazia p:last-child{margin-bottom:0}

/* o nome da ferramenta, na mesma voz dos rótulos do site */
.consultor-marca{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--linha);
}
.consultor-rotulo{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:18px 0 0;
}

.fala{margin-bottom:22px}
.fala-rotulo{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:6px;
}
.fala-corpo{
  border-left:3px solid var(--linha);
  padding-left:14px;
}
.fala-corpo p{margin:0 0 10px}
.fala-corpo p:last-child{margin-bottom:0}
.fala-corpo ul{margin:0 0 10px;padding-left:20px}
.fala-corpo h4{margin:14px 0 6px;font-family:var(--display);font-size:1.05rem}
.fala-corpo code{font-family:var(--mono);font-size:.9em;background:var(--ground-2);padding:1px 4px}
.fala-visitante .fala-corpo{border-left-color:var(--bronze)}

.fala-fontes{
  margin-top:12px;
  border-top:1px solid var(--linha);
  padding-top:10px;
  font-size:.9rem;
}
.fala-fontes summary{
  cursor:pointer;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.fala-fontes ul{margin:10px 0 0;padding-left:20px;color:var(--ink-2)}

/* os três pontos da espera, e a frase que diz quanto ela costuma durar */
.pensando{display:inline-flex;gap:5px;padding:6px 0}
.pensando span{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--linha-forte);
  animation:pensando 1.2s infinite ease-in-out;
}
.pensando span:nth-child(2){animation-delay:.15s}
.pensando span:nth-child(3){animation-delay:.3s}
@keyframes pensando{0%,60%,100%{opacity:.3}30%{opacity:1}}
.pensando-nota{font-size:.88rem;color:var(--ink-2);margin:4px 0 0}
@media (prefers-reduced-motion:reduce){ .pensando span{animation:none} }

.consultor-exemplos{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}
.exemplo{
  font:inherit;
  font-size:.85rem;
  color:var(--ink-2);
  background:var(--ground);
  border:1px solid var(--linha);
  padding:7px 12px;
  cursor:pointer;
  text-align:left;
}
.exemplo:hover{border-color:var(--bronze);color:var(--ink)}

.consultor-entrada{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.consultor-entrada textarea{
  flex:1;
  min-height:46px;
  max-height:180px;
  padding:11px 12px;
  font:inherit;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--papel);
  border:1px solid var(--linha-forte);
  resize:none;
  overflow-y:auto;
}
.consultor-entrada textarea:focus{outline:2px solid var(--bronze);outline-offset:1px}
.consultor-entrada .botao{cursor:pointer;white-space:nowrap}
.consultor-entrada .botao[disabled]{opacity:.6;cursor:progress}

.consultor-aviso{
  font-size:.85rem;
  color:var(--ink-2);
  margin:12px 0 0;
}

@media (max-width:600px){
  .consultor{padding:14px}
  .consultor-entrada{flex-direction:column}
  .consultor-entrada .botao{width:100%}
}

/* ---------------- home v2: problema, gestão e prova ---------------- */

/* o problema: linhas numeradas, o título à esquerda e a explicação à direita */
.dores{list-style:none;margin:34px 0 0;padding:0;counter-reset:dor;border-top:1px solid var(--linha)}
.dores li{
  counter-increment:dor;
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) minmax(0,1.3fr);
  gap:8px 28px;
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--linha);
}
.dores li::before{
  content:counter(dor,decimal-leading-zero);
  font-family:var(--mono);font-size:.78rem;color:var(--bronze);letter-spacing:.06em;
}
.dores h3{font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.25;margin:0}
.dores p{margin:0;color:var(--ink-2);font-size:.95rem}
@media (max-width:820px){
  .dores li{grid-template-columns:2.2rem minmax(0,1fr)}
  .dores p{grid-column:2}
}

/* a gestão: a promessa à esquerda, fixa na tela, e os itens empilhados à direita */
.gestao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:48px;align-items:start}
.gestao-intro{position:sticky;top:96px}
.gestao-itens{display:grid;gap:14px}
.gestao-itens div{background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--bronze);padding:18px 22px}
.gestao-itens h3{font-family:var(--corpo);font-weight:600;font-size:1.02rem;margin:0 0 6px}
.gestao-itens p{margin:0;color:var(--ink-2);font-size:.94rem}
@media (max-width:860px){
  .gestao{grid-template-columns:1fr;gap:26px}
  .gestao-intro{position:static}
}

/* a prova: o depoimento e os números lado a lado, na mesma seção */
.prova{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.prova-numeros{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.prova-numeros div{background:var(--papel);padding:22px 20px}
.prova-numeros .valor{font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.prova-numeros .rot{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:10px}
@media (max-width:860px){ .prova{grid-template-columns:1fr;gap:28px} }

/* o CTA final da v2: uma só ação, com o que se vê na demonstração em lista */
.fechamento .ve{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:8px;max-width:40em}
.fechamento .ve li{color:var(--inverso-tinta);padding-left:22px;position:relative}
.fechamento .ve li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--bronze)}
.fechamento .nota{display:block;margin-top:14px;font-size:.85rem;color:var(--inverso-suave)}

/* avisos longos de "preencher" (home v2) quebram linha em vez de invadir a coluna ao lado */
.gestao .preencher,.prova .preencher,#problema .preencher,#historia .preencher{white-space:normal}