/* ==========================================================================
   Total Documentos — folha única do site
   Escrita do zero no lugar do CSS exportado do Webflow: eram 3 arquivos com
   centenas de classes geradas, das quais a página usava uma fração. Menos
   arquivo é menos requisição, e classe com nome legível é manutenível.
   Paleta e fontes vêm da marca, extraídas do site atual.
   ========================================================================== */

/* Uma família só, Manrope, com o contraste feito por PESO e não por mistura de
   estilos. A serifada de display dava ar editorial, que destoa de serviço
   jurídico. Aqui a personalidade fica por conta da cor e do espaçamento.
   Manrope é variável: um arquivo de 24 KB cobre de 200 a 800. */
@font-face{font-family:Grotesca;src:url('../fonts/manrope.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* Paleta da matriz, com os tons de texto ajustados por medição de contraste.
     O lima #C5F09E é a assinatura do site novo da matriz: lindo sobre teal
     (9,2:1) e ilegível sobre branco (1,3:1). Por isso ele só aparece em fundo
     escuro, nunca como texto em fundo claro. */
  /* --- SISTEMA ESCURO (24/08/2026) ---------------------------------------
     Os NOMES dos tokens foram mantidos de proposito: as 104 classes das 23
     paginas continuam iguais, e o site inteiro troca de pele mudando so este
     bloco. Trocar nome de token obrigaria a reescrever o gerador.
     O papel de cada um mudou:
       --papel      deixa de ser branco e vira o fundo escuro
       --tinta      deixa de ser quase preto e vira o texto claro
       --teal       era a cor de marca em fundo claro; no escuro o acento e o lima
     O lima segue a mesma regra de sempre: so sobre fundo escuro. Aqui todo
     fundo e escuro, entao ele finalmente pode ser o acento do site inteiro. */
  --teal:#C5F09E;
  --teal-fundo:#0C2621;
  --teal-escuro:#061A17;
  --lima:#C5F09E;
  --verde:#66B32F;
  --verde-claro:#7ACB3E;
  --verde-texto:#C5F09E;
  --tinta:#FFFEFA;
  --tinta-2:#A9C6BF;
  --tinta-3:#6E8F87;
  --papel:#061A17;
  --papel-2:#0C2621;
  --linha:#1B3D36;
  --linha-forte:#26534A;
  --risco:#E06D5A;
  --sup-2:#12332C;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fonte:Grotesca,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --largura:72rem;
  --raio:14px;
  --raio-btn:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--fonte);font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2{margin:0;font-family:var(--fonte);font-weight:800;line-height:1.08;
  text-wrap:balance;letter-spacing:-.028em}
h3,h4{margin:0;font-family:var(--fonte);font-weight:700;line-height:1.28;
  text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px}

.env{width:100%;max-width:var(--largura);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.secao{padding:clamp(3rem,7vw,5rem) 0}
.secao--claro{background:var(--papel-2)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--fonte);font-weight:700;font-size:1.02rem;line-height:1.2;
  padding:.95rem 1.5rem;border-radius:var(--raio-btn);border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .12s ease, background-color .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--verde{background:var(--verde);color:var(--tinta)}
.btn--verde:hover{background:var(--verde-claro);color:var(--tinta)}
.btn--linha{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn--linha:hover{background:var(--teal);color:#fff}
.btn--linha-clara{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--linha-clara:hover{background:#fff;color:var(--teal-fundo)}
.btn img{width:20px;height:20px}
.btn-nota{display:block;font-size:.82rem;font-weight:400;color:var(--tinta-3);margin-top:.5rem}
.btn-nota--claro{color:rgba(255,255,255,.88)}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--linha);
}
.topo .env{display:flex;align-items:center;gap:1.2rem;min-height:66px}
.topo .marca{display:flex;align-items:center;color:var(--teal);flex-shrink:0}
.topo .marca svg{width:132px;height:auto;aspect-ratio:500/207;display:block}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.7rem)}
.topo nav a{
  color:var(--tinta);text-decoration:none;font-weight:500;font-size:.97rem;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.topo nav a:hover,.topo nav a[aria-current="page"]{border-bottom-color:var(--verde);color:var(--teal)}
.topo .btn{padding:.62rem 1.05rem;font-size:.93rem}
@media(max-width:60rem){
  .topo nav .só-desktop{display:none}
}

/* Abaixo de 46rem o menu não cabe em uma linha: logo, quatro itens e botão
   somavam mais que a largura da tela e o conteúdo transbordava para fora.
   Vira duas linhas, com o botão de contato ocupando a segunda. */
@media(max-width:46rem){
  .topo .env{flex-wrap:wrap;row-gap:.5rem;padding-top:.6rem;padding-bottom:.6rem;min-height:0}
  .topo .marca{order:1}
  .topo .marca svg{width:104px}
  .topo nav{order:3;width:100%;margin-left:0;justify-content:space-between;
    gap:.6rem;flex-wrap:wrap}
  .topo nav > a,.topo .menu-servicos > summary{font-size:.9rem}
  .topo nav .btn{order:2;margin-left:auto;padding:.5rem .85rem;font-size:.86rem}
}
/* O submenu de serviços aberto no celular empurra o conteúdo em vez de flutuar
   por cima, senão ele sai da tela pela lateral. */
@media(max-width:46rem){
  .menu-servicos{width:100%;order:4}
  .menu-servicos ul{flex-direction:row;flex-wrap:wrap;gap:.2rem 1rem;padding-top:.4rem}
  .menu-servicos ul a{padding:.3rem 0;font-size:.88rem}
}

/* ---------- menu de serviços ---------- */
.menu-servicos{position:relative}
.menu-servicos summary{
  list-style:none;cursor:pointer;color:var(--tinta);font-weight:500;font-size:.97rem;
  display:flex;align-items:center;gap:.35rem;border-bottom:2px solid transparent;padding-bottom:2px;
}
.menu-servicos summary::-webkit-details-marker{display:none}
.menu-servicos summary::after{
  content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
}
.menu-servicos[open] summary,.menu-servicos summary:hover{border-bottom-color:var(--verde);color:var(--teal)}
.menu-servicos[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.menu-servicos ul{
  position:absolute;top:calc(100% + 12px);left:-14px;z-index:60;
  list-style:none;margin:0;padding:.5rem 0;min-width:15rem;
  background:var(--papel);border:1px solid var(--linha-forte);border-radius:var(--raio);
  box-shadow:0 10px 28px rgba(18,33,31,.14);display:flex;flex-direction:column;
}
.menu-servicos ul a{
  display:block;padding:.6rem 1.1rem;color:var(--tinta);text-decoration:none;font-size:.95rem;
}
.menu-servicos ul a:hover{background:var(--papel-2);color:var(--teal)}
@media(max-width:60rem){
  .menu-servicos ul{position:static;box-shadow:none;border:0;padding:0;min-width:0;
    background:transparent}
  .menu-servicos ul a{padding:.4rem 0}
}

/* ---------- primeira dobra ---------- */
/* Padrão da página atual: vídeo do escritório ao fundo, texto centralizado e um
   CTA. Antes eu tinha feito duas colunas com um cartão de números flutuando —
   outra linguagem, e deixava a dobra alta demais. */
.capa{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  padding:clamp(3.4rem,8vw,5.6rem) 0 clamp(3rem,6vw,4.4rem)}
.capa video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Véu escuro: sem ele o texto branco depende do quadro do vídeo, que muda. */
.capa::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,49,45,.86),rgba(0,49,45,.92))}
.capa .env{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.1rem;max-width:60rem}
.capa h1{font-size:clamp(2.4rem,6.1vw,3.25rem);color:#fff;max-width:100%;line-height:1.08}
/* O navegador quebra linha no hifen: "perde-la" partia em "perde-" + "la".
   nowrap segura a palavra inteira sem mexer no texto. */
.nq{white-space:nowrap}
/* Botao de WhatsApp ao pe de cada secao. Centralizado e com respiro em cima
   pra nao colar no conteudo que ele fecha. */
.cta-secao{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cta-secao .btn{min-width:min(320px,100%)}
@media(max-width:640px){.cta-secao{margin-top:26px}.cta-secao .btn{width:100%}}
.capa h1 em{font-style:normal;color:var(--lima)}
.capa .apoio{font-size:clamp(1.02rem,1.9vw,1.14rem);color:rgba(255,255,255,.96);max-width:60ch}
.capa .apoio b{font-weight:700;color:#fff}
.capa .acoes{display:flex;flex-direction:column;align-items:center;margin-top:.4rem}

/* Faixa de números logo abaixo da capa, no lugar do cartão flutuante. */
.numeros{background:var(--teal-fundo);color:#fff;padding:1.6rem 0}
.numeros .env{display:grid;gap:1.2rem;text-align:center}
@media(min-width:44rem){.numeros .env{grid-template-columns:repeat(4,1fr)}}
.numeros div{display:flex;flex-direction:column;gap:.15rem}
.numeros .num{font-size:1.9rem;font-weight:700;color:var(--lima);line-height:1;
  font-variant-numeric:tabular-nums}
.numeros .rot{font-size:.9rem;color:rgba(255,255,255,.9)}

/* ---------- faixa de prova social (esteira infinita) ---------- */
.marcas{border-bottom:1px solid var(--linha);padding:2.6rem 0}
.nota-google{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;color:var(--tinta);margin-bottom:1.4rem;
}
.nota-google .estrelas{color:#F5A623;font-size:1.15rem;letter-spacing:.08em;line-height:1}
.nota-google .valor{font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums}
.nota-google .txt{color:var(--tinta-2);font-size:.97rem}
.nota-google:hover .txt{color:var(--teal);text-decoration:underline}

.marcas .titulo{
  text-align:center;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:1.5rem;font-weight:500;
}
/* Uma linha só, rolando sem fim. O truque: a trilha tem DUAS cópias da lista e
   anda até -50%; quando termina a 1a cópia, a 2a está exatamente no lugar de
   onde a 1a partiu, e o salto de volta não aparece. */
.esteira{overflow:hidden;position:relative}
/* De canto a canto: escapa do .env com a margem negativa de meia tela. */
.marcas .esteira{margin-inline:calc(50% - 50vw);width:100vw}
/* esmaece as pontas pra não parecer que os logos foram cortados na borda */
.esteira{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.trilho{display:flex;align-items:center;gap:clamp(2rem,4vw,3.4rem);width:max-content;
  animation:desliza 46s linear infinite}
.esteira:hover .trilho,.esteira:focus-within .trilho{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trilho img{height:124px;width:auto;flex-shrink:0;object-fit:contain;
  opacity:.92;transition:opacity .15s ease}
.trilho img:hover{opacity:1}
/* Sem animação, a esteira vira uma faixa que o usuário rola com o dedo —
   senão os logos da 2a metade ficariam inalcançáveis. */
@media (prefers-reduced-motion:reduce){
  .esteira{overflow-x:auto}
  .trilho{animation:none}
}

/* ---------- cabeçalho de seção ---------- */
.cabeca{display:flex;flex-direction:column;gap:.75rem;max-width:60ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.cabeca--centro{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.cabeca .rotulo{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-texto);font-weight:700}
.cabeca h1,.cabeca h2{font-size:clamp(1.7rem,4.4vw,2.15rem)}
.cabeca p{color:var(--tinta-2);font-size:1.04rem;font-weight:400}

/* ---------- etapas ---------- */
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:et}
@media(min-width:52rem){.etapas{grid-template-columns:repeat(5,1fr)}}
.etapa{
  background:var(--papel);border:1px solid var(--linha-forte);border-radius:var(--raio);
  padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;
  box-shadow:0 1px 2px rgba(18,33,31,.05);
}
/* topo em teal: dá a leitura de sequência sem depender só do número solto */
.etapa{border-top:3px solid var(--teal)}
.etapa .n{
  counter-increment:et;width:34px;height:34px;border-radius:50%;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
}
.etapa .n::before{content:counter(et)}
.etapa h3{font-size:1.02rem;line-height:1.25}
.etapa p{font-size:.9rem;color:var(--tinta-2);font-weight:400}

/* ---------- listas com ícone circular ---------- */
/* Padrão da página atual: lista em duas colunas, ícone circular vazado em traço
   teal, sem painel colorido. Antes eu tinha posto dois cartões pastel com ✕ e ✓
   — bonito, mas de outra família visual. */
.balanca{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media(min-width:52rem){.balanca{grid-template-columns:1fr 1fr}}
.lista-bloco{display:flex;flex-direction:column;gap:1.1rem}
.lista-bloco h3{font-size:1.18rem;color:var(--teal);padding-bottom:.7rem;border-bottom:1px solid var(--linha)}
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.05rem}
.lista li{display:flex;gap:.85rem;align-items:flex-start}
.lista svg{width:32px;height:32px;flex-shrink:0;margin-top:1px}
.lista span{font-size:1.01rem;line-height:1.5}

/* .painel continua existindo para Sobre e Contato, sem os tons pastel */
.painel{border-radius:var(--raio);padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:1rem}
.painel h3{font-size:1.22rem;color:var(--teal)}
.painel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.painel li{display:flex;gap:.65rem;align-items:flex-start;font-size:.99rem}
.painel li .mk{flex-shrink:0;font-weight:700;line-height:1.5;color:var(--teal)}

/* ---------- o que se perde junto com o nome ---------- */
/* Fundo escuro de propósito: é o único ponto da página que fala do prejuízo
   concreto, e precisa pesar mais que as seções em volta. */
.perda{background:var(--teal-fundo);color:#fff}
.perda .cabeca h2{color:#fff}
.perda .cabeca p{color:rgba(255,255,255,.94)}
.perda .cabeca .rotulo{color:var(--lima)}
.lista--perda{display:grid;gap:.95rem 2rem;max-width:56rem;margin:0 auto}
@media(min-width:46rem){.lista--perda{grid-template-columns:1fr 1fr}}
.lista--perda span{color:rgba(255,255,255,.96)}
.perda .arremate a{color:var(--lima)}
.perda .arremate{
  max-width:52ch;margin:2rem auto 0;text-align:center;font-size:1.08rem;
  color:#fff;border-top:1px solid rgba(255,255,255,.22);padding-top:1.4rem;
}

/* ---------- depoimentos ---------- */
.depo-rotulo{
  text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:700;margin-bottom:1rem;
}
.depo-rotulo + .depoimentos{margin-bottom:2.4rem}
.depo video{width:100%;aspect-ratio:16/9;border-radius:var(--raio);background:#000;display:block}
.depoimentos{display:grid;gap:1.1rem}
@media(min-width:52rem){.depoimentos{grid-template-columns:repeat(2,1fr)}}
.depo{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;
}
.depo blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--tinta-2)}
.depo .estrelas{color:#F5A623;font-size:1.05rem;letter-spacing:.06em;line-height:1}
.depo figcaption{margin:0}
.fonte-avaliacoes{text-align:center;margin-top:1.4rem;font-size:.9rem;color:var(--tinta-3)}
.depo .quem{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--tinta-2)}
.depo .quem img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.depo .quem b{color:var(--tinta);font-weight:700}
.depo .vaga{
  aspect-ratio:16/9;border:2px dashed var(--linha);border-radius:var(--raio);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--tinta-3);font-size:.9rem;padding:1rem;background:var(--papel-2);
}

/* ---------- perguntas ---------- */
.perguntas{display:flex;flex-direction:column;gap:.6rem;max-width:52rem;margin:0 auto}
.pergunta{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:0 1.25rem;
}
.pergunta summary{
  cursor:pointer;list-style:none;padding:1.05rem 0;font-weight:500;font-size:1.05rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{content:"+";color:var(--verde-texto);font-weight:700;font-size:1.5rem;line-height:1;flex-shrink:0}
.pergunta[open] summary::after{content:"–"}
.pergunta .resposta{padding:0 0 1.15rem;color:var(--tinta-2);font-weight:400;max-width:62ch}
.pergunta .resposta a{font-weight:500}

/* ---------- chamada final ---------- */
.final{background:var(--teal-fundo);color:#fff;text-align:center}
.final .env{display:flex;flex-direction:column;align-items:center;gap:1.15rem}
.final h2{font-size:clamp(1.8rem,5vw,2.3rem);color:#fff;max-width:20ch}
.final p{color:rgba(255,255,255,.94);max-width:54ch;font-weight:400}

/* ---------- consultoras ---------- */
.consultoras{display:grid;gap:1.4rem}
@media(min-width:52rem){.consultoras{grid-template-columns:1fr 1fr}}
.consultora{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  display:flex;flex-direction:column;
}
.consultora img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.consultora .txt{padding:1.3rem 1.45rem;display:flex;flex-direction:column;gap:.5rem}
.consultora h3{font-size:1.2rem}
.consultora .cargo{color:var(--verde-texto);font-weight:700;font-size:.87rem;letter-spacing:.06em;text-transform:uppercase}
.consultora p{color:var(--tinta-2);font-size:.97rem;font-weight:400}

/* ---------- blog ---------- */
.artigos{display:grid;gap:1.1rem}
@media(min-width:52rem){.artigos{grid-template-columns:repeat(2,1fr)}}
.artigo-card{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.35rem 1.45rem;display:flex;flex-direction:column;gap:.6rem;
}
.artigo-card h3{font-size:1.13rem;line-height:1.28}
.artigo-card h3 a{color:var(--tinta);text-decoration:none}
.artigo-card h3 a:hover{color:var(--teal);text-decoration:underline}
.artigo-card p{color:var(--tinta-2);font-size:.95rem;font-weight:400}
.assinatura{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--tinta-3);margin-top:auto;padding-top:.3rem}
.assinatura img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 20%}
.assinatura b{color:var(--tinta-2);font-weight:500}

.post{max-width:var(--largura);margin:0 auto;display:flex;flex-direction:column;gap:1.15rem}
.post h1{font-size:clamp(1.9rem,5.2vw,2.45rem)}
.post h2{font-size:clamp(1.3rem,2.8vw,1.6rem);margin-top:1.2rem}
.post p{color:var(--tinta-2);font-weight:400;font-size:1.06rem}
.post p b{color:var(--tinta);font-weight:700}
.post ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem;color:var(--tinta-2);font-weight:400}
.post .chamada{
  background:var(--papel-2);border-left:3px solid var(--verde);border-radius:0 var(--raio) var(--raio) 0;
  padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;margin-top:1rem;
}
.post .chamada p{color:var(--tinta)}
.post .linha-fina{font-size:1.14rem;color:var(--tinta);font-weight:500}
.post ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem;
  color:var(--tinta-2)}
.post ul li b{color:var(--tinta)}

/* Caixa de autoria: liga a pessoa que assina à empresa. É o sinal de E-E-A-T
   que mais falta em conteúdo de nicho jurídico, onde quase tudo é anônimo. */
.autoria{
  display:flex;gap:1.1rem;align-items:flex-start;margin-top:2rem;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.3rem 1.4rem;
}
.autoria img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 20%;flex-shrink:0}
.autoria h2{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:.5rem}
.autoria div{display:flex;flex-direction:column;gap:.5rem}
.autoria p{font-size:.95rem;color:var(--tinta-2)}

.relacionados{margin-top:2rem;border-top:1px solid var(--linha);padding-top:1.4rem}
.relacionados h2{font-size:1.1rem;margin-bottom:.8rem}
.relacionados ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.relacionados a{font-weight:500}

.trilha{font-size:.87rem;color:var(--tinta-3)}
.trilha a{color:var(--tinta-3)}

/* ---------- formulário ---------- */
.formulario{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:1rem;
}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo label{font-weight:500;font-size:.94rem}
.campo input,.campo textarea,.campo select{
  font-family:var(--fonte);font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel);color:var(--tinta);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(0,92,85,.12)}
.campo .obrig{color:var(--risco);font-weight:700}
.campo .opcional,.consentimento .obrig{font-weight:400;color:var(--tinta-3);font-size:.86rem}
.consentimento .obrig{color:var(--risco);font-weight:700;font-size:1rem}
.erro{color:var(--risco);font-size:.86rem;font-weight:500}
.erro[hidden]{display:none}
[aria-invalid="true"]{border-color:var(--risco) !important;box-shadow:0 0 0 3px rgba(166,58,38,.12) !important}
.form-status{font-size:.92rem;min-height:1.2em}
.form-status.ok{color:var(--verde-texto);font-weight:500}
.form-status.err{color:var(--risco);font-weight:500}

.consentimento{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--tinta-2);font-weight:400}
.consentimento input{margin-top:.3rem;flex-shrink:0;width:18px;height:18px}

/* ---------- rodapé ---------- */
.rodape{background:var(--teal-escuro);color:rgba(255,255,255,.88);padding:clamp(2.4rem,5vw,3.4rem) 0 2rem;font-size:.94rem;font-weight:400}
.rodape .env{display:grid;gap:1.8rem 2rem;align-items:start}
@media(min-width:52rem){.rodape .env{grid-template-columns:1.3fr 1fr 1fr}}
.rodape .col{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.rodape .marca{color:#fff;display:block;line-height:0}
.rodape .marca svg{width:150px;height:auto;aspect-ratio:500/207;display:block}
.rodape h3{color:#fff;font-size:.95rem;margin:0 0 .2rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.rodape a{color:rgba(255,255,255,.8);text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape .base{
  grid-column:1 / -1;
  border-top:1px solid rgba(255,255,255,.15);margin-top:.6rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.87rem;
}

/* ---------- aviso de cookies ---------- */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--teal-escuro);color:rgba(255,255,255,.94);
  border-top:2px solid var(--lima);
  padding:1rem clamp(1.1rem,4vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem clamp(1rem,3vw,2rem);
}
.cookies[hidden]{display:none}
.cookies p{font-size:.94rem;max-width:62ch}
.cookies a{color:var(--lima)}
.cookies-acoes{display:flex;gap:.7rem;flex-shrink:0}
.cookies .btn{padding:.6rem 1.15rem;font-size:.92rem}
.cookies .btn--linha{color:#fff;border-color:rgba(255,255,255,.55)}
.cookies .btn--linha:hover{background:#fff;color:var(--teal-escuro)}
/* Sobe o botão do WhatsApp enquanto o aviso está aberto: sem isso um cobre o
   outro, e o cliente perde o canal de contato justamente na primeira visita. */
body.com-cookies .zap{bottom:calc(18px + 5.5rem)}
@media(max-width:52rem){ body.com-cookies .zap{bottom:calc(18px + 9rem)} }

/* botão flutuante de WhatsApp */
.zap{
  position:fixed;right:18px;bottom:18px;z-index:60;transition:bottom .2s ease;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.zap img{width:30px;height:30px}

/* ── Selo do Reclame Aqui, dentro do numero que fala dele ─────────────────── */
.numeros div{justify-content:flex-start}
.selo-ra{height:17px;width:auto;align-self:center;margin-top:.5rem;opacity:.85}

/* ── Assimetria de esforco ────────────────────────────────────────────────
   A ideia e a diferenca de peso entre as duas colunas ser visivel antes de
   qualquer leitura: a nossa e larga e cheia, a sua e estreita e curta. */
.assimetria{background:var(--teal-fundo);color:#fff}
.assimetria .cabeca h2{color:#fff}
.assimetria .cabeca .rotulo{color:var(--lima)}
.balanca-esforco{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:1.5rem;align-items:stretch}
.esforco{border-radius:var(--raio);padding:1.8rem}
.esforco--nosso{background:rgba(255,254,250,.06);border:1px solid rgba(197,240,158,.22)}
.esforco--seu{background:var(--papel);color:var(--tinta);display:flex;flex-direction:column}
.esforco--seu .esforco-nota{margin-top:auto}
.esforco-topo{display:flex;align-items:baseline;gap:.6rem;margin:0 0 1.1rem;padding-bottom:1rem;
  border-bottom:1px solid rgba(255,254,250,.14)}
.esforco--seu .esforco-topo{border-bottom-color:var(--linha)}
.esforco-topo b{font-size:2.6rem;line-height:1;color:var(--lima)}
.esforco--seu .esforco-topo b{color:var(--teal)}
.esforco-topo span{font-size:1.02rem;font-weight:600}
.lista-esforco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.8rem;margin:0;padding:0;list-style:none}
.lista-esforco li:nth-last-child(-n+2){border-bottom:0}
.lista-esforco li{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem 0;
  border-bottom:1px solid rgba(255,254,250,.09);font-size:.95rem;line-height:1.4}
.lista-esforco svg{width:18px;height:18px;flex:none;margin-top:.15rem}
.lista-suas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.lista-suas li{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem 0}
.lista-suas .n{flex:none;width:26px;height:26px;border-radius:999px;background:var(--papel-2);
  color:var(--verde-texto);font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.lista-suas .txt{display:flex;flex-direction:column;gap:.15rem;font-size:.95rem;line-height:1.35;font-weight:600}
.lista-suas .txt em{font-style:normal;font-weight:400;font-size:.84rem;color:var(--tinta-3)}
.esforco-nota{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--linha);
  font-size:.84rem;line-height:1.5;color:var(--tinta-3)}
@media (max-width:900px){
  .balanca-esforco{grid-template-columns:1fr}
  .lista-esforco{grid-template-columns:1fr}
}

/* ── Dobra em duas colunas, como no mockup aprovado ───────────────────────
   Esquerda: aviso de risco, H1, apoio e o cartao de pesquisa. Direita: o
   cartao de resultado de exemplo. O resultado ao lado e o que a concorrencia
   nao tem: mostra a acao antes de pedir qualquer dado. */
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.capa .env.capa-grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:3.2rem;align-items:stretch;text-align:left;max-width:var(--largura)}
.capa-txt{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.capa-grade h1{text-align:left;max-width:100%}
.capa-grade .apoio{text-align:left;max-width:100%}

.aviso-risco{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--risco);
  background:rgba(166,58,38,.22);color:#F3C9BF;border-radius:999px;padding:.5rem 1rem;
  font-size:.82rem;font-weight:600;line-height:1.2}
.aviso-risco svg{flex:none}

.cartao-busca{margin-top:auto;width:100%;background:var(--teal-fundo);border:1px solid #14574E;
  border-radius:var(--raio);padding:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.cb-titulo{margin:0;font-size:1.05rem;font-weight:700;color:#fff;line-height:1.3}
.cb-apoio{margin:0;font-size:.88rem;color:#8FB3AA;line-height:1.45}
.busca{display:flex;gap:10px}
.busca input{flex:1 1 auto;min-width:0;min-height:56px;padding:0 1.1rem;border:0;
  border-radius:var(--raio-btn);background:var(--papel);color:var(--tinta);font:inherit;font-size:1.02rem}
.busca input::placeholder{color:var(--tinta-3)}
.busca input:focus-visible{outline:3px solid var(--lima);outline-offset:2px}
.busca .btn{min-height:56px;white-space:nowrap;flex:0 0 auto}
.btn--lima{background:var(--lima);color:var(--teal-escuro)}
.btn--lima:hover{background:#D6F7B8}
.cb-selos{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:0;padding:0;list-style:none}
.cb-selos li{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:#8FB3AA}
.cb-selos svg{flex:none}

/* cartao de resultado */
.capa-lado{display:flex;flex-direction:column;gap:1rem;justify-content:space-between}
.capa-lado .faixa-inpi{margin-top:auto}
.cartao-res{background:var(--papel);color:var(--tinta);border-radius:18px;padding:1.6rem;
  box-shadow:0 24px 60px rgba(5,45,41,.45)}
.cr-topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--linha)}
.cr-id{display:flex;flex-direction:column;gap:.2rem}
.cr-rotulo{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3)}
.cr-nome{font-size:1.32rem;font-weight:700;line-height:1.15}
.cr-tag{display:inline-flex;align-items:center;gap:.45rem;background:#FBEDE9;color:var(--risco);
  border-radius:999px;padding:.45rem .85rem;font-size:.78rem;font-weight:700;white-space:nowrap}
.cr-tag i{width:7px;height:7px;border-radius:999px;background:currentColor;display:block}
.cr-itens{display:flex;flex-direction:column;gap:.85rem;margin:0;padding:1.15rem 0;list-style:none}
.cr-itens li{display:flex;align-items:flex-start;gap:.75rem}
.cr-sigla{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:700}
.cr-alto .cr-sigla{background:#FBEDE9;color:var(--risco)}
.cr-ok .cr-sigla{background:var(--papel-2);color:var(--verde-texto)}
.cr-txt{display:flex;flex-direction:column;gap:.12rem}
.cr-txt b{font-size:.92rem;font-weight:600;line-height:1.3}
.cr-txt em{font-style:normal;font-size:.8rem;color:var(--tinta-3);line-height:1.4}
.cr-fecho{background:var(--papel-2);border-radius:12px;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;line-height:1.45;color:var(--tinta-2)}
.cr-fecho-t{font-weight:700;color:var(--verde-texto)}

/* Certificado: SVG SEM width/height vira 300x150 e estica a coluna, entao a
   altura vem do aspect-ratio do proprio viewBox. */
.certificado{margin:0;display:flex;flex-direction:column;gap:.9rem;align-items:center}
.certificado svg{display:block;width:100%;max-width:21.5rem;aspect-ratio:560/600;
  filter:drop-shadow(0 24px 48px rgba(5,45,41,.45))}
.certificado figcaption{font-size:.82rem;line-height:1.45;color:#C8DBD5;text-align:center;max-width:32ch}
.faixa-inpi{display:flex;align-items:center;gap:.9rem;background:rgba(255,254,250,.07);
  border:1px solid #14574E;border-radius:var(--raio);padding:.9rem 1.1rem}
.faixa-inpi img{height:30px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.9}
.faixa-inpi span{font-size:.78rem;line-height:1.45;color:#C8DBD5}

@media(max-width:62rem){
  .capa .env.capa-grade{grid-template-columns:1fr;gap:2rem}
  .capa-grade h1{max-width:100%}
}
@media(max-width:40rem){
  .busca{flex-direction:column}
  .busca .btn{width:100%}
}

/* ── Esteira de avaliações ────────────────────────────────────────────────
   Mesmo motor da fila de logos (@keyframes desliza, trilho duplicado, -50%).
   Nao e um segundo carrossel: e a mesma classe .esteira/.trilho com um
   modificador, senao as duas copias da regra divergiriam com o tempo.
   Largura total: o bloco escapa do .env com a margem negativa de meia tela. */
.esteira--depo{margin-inline:calc(50% - 50vw);width:100vw;padding:.5rem 0}
.trilho--depo{gap:1.25rem;align-items:stretch;animation-duration:64s}
.trilho--depo .depo{width:22rem;flex:0 0 22rem;margin:0}
@media (max-width:44rem){
  .trilho--depo .depo{width:17rem;flex:0 0 17rem}
}

/* ── Instagram no rodapé ──────────────────────────────────────────────────
   SVG com width/height explicitos: sem eles o navegador assume 300x150 e o
   rodape estica sem erro nenhum. */
.rodape .social{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;
  font-size:.92rem;font-weight:600}
.rodape .social svg{flex:none;display:block;border-radius:9px}
.rodape .social:hover span{text-decoration:underline}

/* Avaliação real no pé do painel de contato, preenchendo a coluna curta. */
.depo--lado{margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--linha-forte);
  display:flex;flex-direction:column;gap:.7rem}
.depo--lado blockquote{margin:0;font-size:.96rem;line-height:1.55;color:var(--tinta-2)}
.depo--lado .quem{font-size:.86rem;color:var(--tinta-3)}
.depo-link{font-size:.86rem;font-weight:600}


/* ==========================================================================
   Ajustes do sistema escuro
   O que a troca de tokens sozinha NAO resolve: onde a regra antiga assumia
   fundo claro, o texto claro sobre acento claro reprova em contraste.
   Cada bloco abaixo existe por um numero medido, nao por gosto.
   ========================================================================== */

/* Botao verde: rotulo tem que ser ESCURO. Branco sobre #66B32F da 2,6:1 e
   reprova; o escuro da 6,4:1. Era assim no sistema claro e continua sendo. */
.btn--verde,.btn--verde:hover{color:#04140C}
/* Idem para o acento lima preenchido */
.btn--linha:hover{background:var(--lima);color:#04140C;border-color:var(--lima)}
.btn--linha-clara:hover{background:var(--lima);color:#04140C}

/* Superficies: no claro os cartoes eram brancos sobre cinza; no escuro
   precisam ser MAIS CLAROS que o fundo, senao somem. */
body{background:var(--papel)}
.secao--claro{background:var(--papel-2)}
.depo,.artigo-card,.etapa,.lista-bloco,.painel,.esforco,
.pergunta,.trilha,.vaga,.mk{background:var(--papel-2);border-color:var(--linha)}

/* Menu de servicos: o painel flutuante some se ficar da cor do fundo */
.menu-servicos ul{background:var(--sup-2);border-color:var(--linha-forte)}
.menu-servicos ul a:hover{background:rgba(197,240,158,.09);color:var(--lima)}

/* Topo em capsula flutuante, igual ao teste visual */
.topo{position:sticky;top:0;z-index:50;background:rgba(6,26,23,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linha)}
.topo .marca{color:var(--tinta)}

/* Rotulos de secao em monoespacada, que e o que da o ar de painel */
.rotulo{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lima)}

/* Botao flutuante do WhatsApp: no escuro precisa de anel pra descolar do fundo */
.zap{box-shadow:0 10px 30px -12px rgba(0,0,0,.9),0 0 0 1px rgba(197,240,158,.18)}

/* Imagem de conteudo em fundo escuro: sem isto foto clara vira mancha estourada */
.post img,.artigo-card img{border:1px solid var(--linha);border-radius:var(--raio)}

/* Formulario: campo branco em pagina escura e o erro mais comum da inversao */
input,select,textarea{background:var(--sup-2);color:var(--tinta);
  border:1px solid var(--linha-forte)}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lima);outline-offset:2px}

/* Aviso de cookies */
.cookies{background:rgba(12,38,33,.96);border-color:var(--linha-forte);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* O botao verde do TOPO continuava branco porque `.topo nav a` (0,1,1) vence
   `.btn--verde` (0,1,0). Medido: 2,58:1, reprova. Com rotulo escuro da 6,4:1. */
.topo nav a.btn--verde,.topo nav a.btn--verde:hover{color:#04140C}

/* Etiqueta de alerta da capa: 4,28:1 media, abaixo do minimo de 4,5 para texto
   pequeno. Clareia o texto e escurece um pouco a placa. */
.aviso-risco{background:rgba(224,109,90,.14);border-color:rgba(224,109,90,.34)}
.aviso-risco,.aviso-risco *{color:#F7D7D0}


/* ==========================================================================
   SISTEMA APROVADO (teste-visual)
   Componentes novos do padrao aprovado em 24/08. Nomes de classe novos, entao
   nao colidem com as 104 classes que as paginas ja usam: as duas convivem
   enquanto o gerador migra secao por secao.
   ========================================================================== */



*{box-sizing:border-box}


.w{max-width:1140px;margin:0 auto;padding:0 28px}

img,video{max-width:100%}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:6px}

/* nav em cápsula flutuante */
.nav{position:sticky;top:14px;z-index:50;margin:14px auto 0;max-width:1080px;width:calc(100% - 32px);
  background:rgba(12,38,33,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--linha);border-radius:100px;
  display:flex;align-items:center;gap:26px;padding:10px 12px 10px 24px}
.logo{display:flex;align-items:center;flex:none;color:var(--tinta)}
.logo svg{width:132px;height:auto;aspect-ratio:500/207;display:block}
@media(max-width:600px){.logo svg{width:108px}}
.nav-links{margin-left:auto;display:flex;gap:22px;font-size:14.5px;color:var(--tinta-2)}
.nav-links a:hover{color:var(--tinta)}
.pill{background:var(--verde);color:#04140C;border-radius:100px;padding:10px 21px;display:inline-block;
  font-size:14.5px;font-weight:700;white-space:nowrap;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease}
.pill:hover{transform:translateY(-1px);box-shadow:0 8px 26px -10px rgba(102,179,47,.7)}
.ghost{border:1px solid var(--linha-forte);background:transparent;color:var(--tinta);display:inline-block;
  border-radius:100px;padding:10px 21px;font-size:14.5px;font-weight:500;cursor:pointer}
.ghost:hover{border-color:var(--lima);color:var(--lima)}
@media(max-width:900px){.nav-links{display:none}}

/* hero centralizado com halo */
.hero{position:relative;text-align:center;padding:88px 0 0;overflow:hidden}
.halo{position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1100px;max-width:150vw;height:760px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(197,240,158,.20),rgba(102,179,47,.10) 42%,transparent 68%)}
.eyebrow{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 26px}
.hero h1{position:relative;font-size:clamp(34px,5.5vw,60px);line-height:1.04;letter-spacing:-.034em;
  font-weight:700;margin:0 auto 24px;max-width:20ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--lima)}
.nq{white-space:nowrap}
.hero .sub,.nucleo .sub{position:relative;font-size:18.5px;color:var(--tinta-2);max-width:62ch;margin:0 auto 34px}
.ctas{position:relative;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.ganhos{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:1000px;margin:0 auto 26px;text-align:left}
.ganho{background:rgba(12,38,33,.6);border:1px solid var(--linha);border-radius:13px;padding:18px 20px}
.gh{margin:0 0 6px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.ganho p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tinta-3)}
@media(max-width:820px){.ganhos{grid-template-columns:1fr;max-width:460px}}
.selos{position:relative;font-size:13.5px;color:var(--tinta-3);text-align:center;margin:0 auto 52px}
.selos b{color:var(--tinta-2);font-weight:600}
.hero .selos{margin-bottom:0}
.hero{padding-bottom:112px}


/* Selo do INPI no topo: substitui o rótulo de texto por prova de origem.
   A logo do INPI é PNG colorido; sobre fundo escuro entra numa placa clara,
   que é a forma de exibir marca de terceiro sem descaracterizar. */
.selo-inpi{position:relative;display:inline-flex;align-items:center;gap:16px;
  background:rgba(12,38,33,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--linha-forte);border-radius:100px;padding:9px 22px 9px 10px;
  margin:0 auto 30px;max-width:min(560px,100%);text-align:left}
.selo-inpi img{height:34px;width:auto;background:#fff;border-radius:100px;
  padding:6px 12px;flex:none;display:block}
.selo-inpi span{font-size:12.5px;line-height:1.45;color:var(--tinta-2)}
@media(max-width:640px){
  .selo-inpi{flex-direction:column;gap:11px;border-radius:16px;padding:14px 18px;text-align:center}
  .selo-inpi span{font-size:12px}
}

/* moldura da mídia, com sombra profunda */
.moldura{position:relative;border:1px solid var(--linha);border-radius:16px;
  background:var(--papel-2);padding:9px;box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.moldura video{width:100%;display:block;border-radius:9px;background:#04120F;aspect-ratio:16/9;object-fit:cover}
.legenda{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);text-align:center;
  margin-top:13px;letter-spacing:.03em}


.sec-topo{max-width:62ch;margin:0 0 46px}
.sec-topo.meio{margin:0 auto 46px;text-align:center}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lima);margin:0 0 15px}
.hero h2,.sec-topo h2,.nucleo h2,.duas h2,.logos-sec h2{font-size:clamp(28px,4.1vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:700;
  margin:0 0 16px;text-wrap:balance}
.h-final{max-width:18ch;margin-inline:auto}
.hero h3,.card h3,.passo h3,.dep h3,.vdep h3{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}

p:last-child{margin-bottom:0}
.lead{font-size:18.5px}


/* números */
/* Painel de vidro: sobe por cima do halo da capa, e é o halo atrás que dá o que
   desfocar. Vidro sobre fundo chapado não parece vidro, parece cinza. */
.faixa-fora{position:relative;margin-top:-58px;z-index:2}
.faixa.vidro{display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(18,51,44,.55);backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--linha-forte);border-radius:18px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
@media(max-width:820px){.faixa.vidro{grid-template-columns:repeat(2,1fr)}}
/* o rodapé do painel atravessa as 4 colunas */
.faixa-pe{grid-column:1/-1;margin:0;border-top:1px solid var(--linha);
  padding:15px 30px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;color:var(--tinta-2);flex-wrap:wrap;text-align:center}
.faixa-pe b{color:var(--lima);font-weight:700}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 0 0 rgba(102,179,47,.55);animation:pulsa 2.4s ease-out infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 9px rgba(102,179,47,0)}100%{box-shadow:0 0 0 0 rgba(102,179,47,0)}}


















@media(prefers-reduced-motion:reduce){.ponto{animation:none}}
.num{padding:34px 30px;border-right:1px solid var(--linha)}
.num:first-child{padding-left:30px}
.num:last-child{border-right:0}
@media(max-width:820px){.num:nth-child(2n){border-right:0}.num:nth-child(-n+2){border-bottom:1px solid var(--linha)}}
.num b{display:block;font-size:clamp(2rem,3.9vw,2.7rem);font-weight:700;letter-spacing:-.04em;
  color:var(--lima);line-height:1;font-variant-numeric:tabular-nums}
.num span{display:block;font-size:13.5px;color:var(--tinta-3);margin-top:9px;max-width:20ch;line-height:1.45}

/* cartões */
.grade{display:grid;gap:16px}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--papel-2);border:1px solid var(--linha);border-radius:15px;padding:26px 27px}
.card p{font-size:15.5px}
.ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;margin-bottom:16px;
  font-family:var(--mono);font-size:14px;font-weight:500}
.i-r{background:rgba(224,109,90,.14);color:#F0907E}
.i-v{background:rgba(197,240,158,.15);color:var(--lima)}


/* tabela comparativa: rótulo à esquerda, dois estados lado a lado.
   Grid de 3 colunas com filete entre linhas — nada de cartão dentro de cartão. */
.tabela{display:grid;grid-template-columns:1.05fr 1.25fr 1.35fr;
  border:1px solid var(--linha);border-radius:16px;overflow:hidden;background:var(--papel-2)}
.tabela>div{padding:19px 24px;border-top:1px solid var(--linha);font-size:15.5px;
  display:flex;align-items:center;gap:11px}
.tabela>.tcab>div{border-top:0}
.tabela>div:nth-of-type(2),
.tabela>div:nth-of-type(3),
.tabela>div:nth-of-type(4){border-top:0}
.tabela>.tcab{display:contents}
.tabela>.tcab>div{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);padding:16px 24px;
  background:rgba(255,255,255,.02);display:flex;align-items:center}
.tcab-com{color:var(--lima);background:rgba(197,240,158,.06)!important}
.tl{color:var(--tinta);font-weight:700;letter-spacing:-.012em}
.tx{color:var(--tinta-3)}
.tv{color:var(--tinta-2);background:rgba(197,240,158,.045)}
.tabela i{font-style:normal;flex:none;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-family:var(--mono)}
.tx i{background:rgba(224,109,90,.15);color:#F0907E}
.tv i{background:rgba(197,240,158,.16);color:var(--lima)}
@media(max-width:820px){
  /* no celular a tabela vira blocos: rótulo em cima, os dois estados embaixo */
  .tabela{grid-template-columns:1fr;border-radius:14px}
  .tcab{display:none}
  .tabela>div{padding:14px 18px}
  .tl{padding-top:20px!important;border-top:1px solid var(--linha-forte)!important;
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
  .tabela>div:nth-child(2){border-top:0}
  .tx,.tv{border-top:0!important;font-size:15px}
}

/* passos */
/* align-items:center centrava o título contra a coluna alta e abria um vão no
   topo. Alinhado ao topo e preso na rolagem: o título acompanha a leitura. */
.duas{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:start}
.duas>div:first-child{position:sticky;top:104px}
@media(max-width:900px){.duas>div:first-child{position:static}}
@media(max-width:900px){.duas{grid-template-columns:1fr;gap:34px}}
.passos{display:flex;flex-direction:column;gap:11px}
.passo{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start;
  background:var(--papel-2);border:1px solid var(--linha);border-radius:13px;padding:19px 21px}
.passo b{width:27px;height:27px;border-radius:50%;background:var(--sup-2);border:1px solid var(--linha-forte);
  display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;color:var(--lima);font-weight:500}
.passo h3{margin:0 0 4px;font-size:16px}
.passo p{margin:0;font-size:14.5px}

/* citação */
.quote{border-left:2px solid var(--lima);padding:6px 0 6px 24px;margin:0 0 40px;font-size:20px;
  line-height:1.5;color:var(--tinta);max-width:60ch;letter-spacing:-.01em}
.quote span{display:block;font-size:13.5px;color:var(--tinta-3);margin-top:12px;font-family:var(--mono)}

/* perdas */
.perdas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.perda-item{background:var(--papel-2);border:1px solid var(--linha);border-radius:12px;
  padding:15px 17px;font-size:14.5px;color:var(--tinta-2);display:flex;gap:11px;align-items:flex-start}
.perda-item::before{content:"×";color:var(--risco);font-family:var(--mono);font-size:15px;flex:none}

/* depoimentos */
.deps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.dep{background:var(--papel-2);border:1px solid var(--linha);border-radius:15px;padding:24px 26px}
.dep blockquote{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--tinta-2)}
.dep figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-3)}
.dep .estrelas{color:var(--lima);font-size:13px;letter-spacing:.14em;margin-bottom:13px}



/* depoimento em vídeo. Formato retrato 9:16 porque é como o cliente grava, no
   celular. O <video> entra com preload="none" e poster: vídeo pesa, e três
   deles baixando junto derrubariam o carregamento da página. */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:40px}
@media(max-width:820px){.videos{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.vdep{margin:0}
.vdep-tela{position:relative;aspect-ratio:9/16;border-radius:15px;overflow:hidden;
  background:var(--papel-2);border:1px solid var(--linha);display:grid;place-items:center}
.vdep-tela video{width:100%;height:100%;object-fit:cover;display:block}
.vdep-play{position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(197,240,158,.14);border:1px solid var(--linha-forte);
  display:grid;place-items:center;color:var(--lima);font-size:15px;padding-left:3px}
/* estado vazio: só enquanto não há arquivo. Some sozinho quando o <video> entra. */
.vdep[data-vazio] .vdep-tela{border-style:dashed;border-color:var(--linha-forte)}
.vdep-aviso{position:absolute;bottom:22px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);line-height:1.7;margin:0}
.vdep-aviso b{color:var(--tinta-2);font-weight:500}
.vdep figcaption{margin-top:14px;font-size:14.5px;color:var(--tinta)}
.vdep figcaption b{display:block;font-weight:700;letter-spacing:-.01em}
.vdep figcaption span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);margin-top:4px}

/* esteira infinita de depoimentos. Sem JS: a pista tem a lista duplicada e o
   laço volta em -50%, onde o conteúdo é idêntico, então o corte não aparece.
   Pausa no hover e no foco, para quem estiver lendo. */
.esteira{position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.esteira-pista{display:flex;gap:16px;width:max-content;animation:corre 46s linear infinite}
.esteira:hover .esteira-pista,.esteira:focus-within .esteira-pista{animation-play-state:paused}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.esteira .dep{flex:0 0 340px;margin:0}
@media(max-width:600px){.esteira .dep{flex-basis:280px}}
@media(prefers-reduced-motion:reduce){
  .esteira{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .esteira-pista{animation:none}
}
/* FAQ */
.perguntas{border-top:1px solid var(--linha)}
.perguntas details{border-bottom:1px solid var(--linha)}
.perguntas summary{list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
  font-weight:700;font-size:16.5px;letter-spacing:-.014em;color:var(--tinta)}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";position:absolute;right:8px;top:19px;font-family:var(--mono);
  font-size:19px;color:var(--lima);font-weight:400}
.perguntas details[open] summary::after{content:"–"}
.perguntas summary:hover{color:var(--lima)}
.perguntas details>div{padding:0 44px 22px 0;font-size:15.5px;color:var(--tinta-2)}

/* núcleo final */
.final{text-align:center}
.nucleo{position:relative;text-align:center;border:1px solid var(--linha-forte);border-radius:20px;
  padding:64px 32px;background:linear-gradient(160deg,rgba(197,240,158,.13),rgba(102,179,47,.04));
  overflow:hidden}

/* esteira de logos: mesma mecânica da de depoimentos, ritmo mais lento */
.logos-sec{padding:92px 0}
/* classe propria: mexer no .kicker global mudaria o rotulo de todas as secoes */
/* .logos-sec na frente de proposito: o titulo e um <p> e o ultimo filho da
   caixa, entao `p:last-child{margin-bottom:0}` (0,1,1) vencia uma regra de
   classe sozinha (0,1,0) e zerava o respiro. */
.logos-sec .logos-titulo{text-align:center;font-family:var(--mono);font-size:16.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lima);
  margin:0 auto 76px;max-width:34ch}
.esteira--logos{margin-top:0}
.pista-logos{gap:34px;align-items:center;animation-duration:64s}
/* Cada arquivo JA E um circulo branco com a marca colorida dentro, sobre fundo
   transparente. Ou seja: filtro nenhum funciona aqui. Cinza vira mancha e
   invert pinta o circulo inteiro de branco, apagando a marca. Conferi abrindo
   o PNG. Entao vao sem filtro, como moedas sobre o fundo escuro, e a unica
   coisa que muda no hover e uma leve subida. */
.pista-logos img{height:104px;width:104px;flex:none;border-radius:50%;
  transition:transform .22s ease;display:block}
.pista-logos img:hover{transform:translateY(-3px)}
@media(max-width:600px){.pista-logos img{height:74px;width:74px}.pista-logos{gap:22px}
  .logos-sec .logos-titulo{font-size:13.5px;margin-bottom:52px}}


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

/* O nav em capsula das paginas do blog precisa do mesmo caminho de logo e do
   ajuste de submenu que a pagina de teste tem. Aqui num lugar so. */
.nav .logo{display:flex;align-items:center;flex:none;color:var(--tinta)}
.nav .logo svg{width:132px;height:auto;aspect-ratio:500/207;display:block}
@media(max-width:600px){.nav .logo svg{width:108px}}
.nav .nav-links a[aria-current="page"]{color:var(--lima)}
.nav-links{align-items:center}

/* Menu Servicos dentro da capsula */
.nav .menu-servicos summary{list-style:none;cursor:pointer;color:var(--tinta-2);
  display:flex;align-items:center;gap:6px;font-size:14.5px;border:0;padding:0}
.nav .menu-servicos summary::-webkit-details-marker{display:none}
.nav .menu-servicos summary::after{content:"";width:6px;height:6px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.nav .menu-servicos[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.nav .menu-servicos summary:hover,.nav .menu-servicos[open] summary{color:var(--tinta)}
.nav .menu-servicos{position:relative}
.nav .menu-servicos ul{position:absolute;top:calc(100% + 14px);left:-14px;z-index:60;
  min-width:236px;margin:0;padding:7px;list-style:none;
  background:var(--sup-2);border:1px solid var(--linha-forte);border-radius:14px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.95)}
.nav .menu-servicos ul a{display:block;padding:10px 13px;border-radius:9px;
  font-size:14.5px;color:var(--tinta-2)}
.nav .menu-servicos ul a:hover{background:rgba(197,240,158,.09);color:var(--lima)}
@media(max-width:900px){
  .nav{flex-wrap:wrap;row-gap:10px;border-radius:20px;padding:12px 14px}
  .nav-links{display:flex;order:3;width:100%;margin-left:0;justify-content:space-between;gap:12px}
  .nav .menu-servicos ul{position:static;box-shadow:none;margin-top:8px}
}

/* ── Retrato das consultoras (Sobre) ───────────────────────────────────────
   O texto ficava sobre o rosto. A correção não é mover o texto alguns pixels:
   é inverter a lógica do bloco. O quadro ficou MAIS ALTO (760px), tudo desceu
   para a base com justify-content:flex-end, e o gradiente passou a vir DE
   BAIXO. Assim o terço de cima fica limpo, que é exatamente onde o rosto está
   com background-position:center top.                                       */
.retratos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.retratos{grid-template-columns:1fr}}
.retrato{position:relative;border-radius:20px;overflow:hidden;min-height:760px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--papel-2);background-repeat:no-repeat;
  background-size:cover;background-position:center top;margin:0}
@media(max-width:900px){.retrato{min-height:680px}}
@media(max-width:520px){.retrato{min-height:560px}}
/* gradiente de baixo pra cima: opaco onde o texto vive, limpo onde o rosto está */
.retrato::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,
    rgba(6,26,23,.97) 0%, rgba(6,26,23,.93) 30%,
    rgba(6,26,23,.62) 52%, rgba(6,26,23,.12) 74%, transparent 100%)}
.retrato-txt{position:relative;z-index:1;padding:0 30px 18px;max-width:42ch}
.retrato-txt h3{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;margin:0 0 12px;
  font-weight:700;line-height:1.06}
.retrato-txt p{color:#C6DDD6;font-size:15.5px;margin:0}
.retrato-selos{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:12px;padding:0 22px 22px}
@media(max-width:520px){.retrato-selos{grid-template-columns:1fr}}
.rs{background:rgba(12,38,33,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--linha-forte);border-radius:14px;padding:15px 16px}
.rs b{display:flex;gap:8px;align-items:center;font-size:14.5px;font-weight:700;
  letter-spacing:-.012em;margin-bottom:6px;color:var(--tinta)}
.rs b::before{content:"✓";color:var(--lima);font-size:12px}
.rs p{margin:0;font-size:12.8px;line-height:1.5;color:var(--tinta-3)}

/* ── Seção final vira o painel de vidro (mesmo núcleo do padrão aprovado) ──
   Só CSS: o markup do gerador continua igual em todas as páginas, e as três
   landings, a Sobre e a Contato herdam juntas.                              */
.secao.final{padding-block:clamp(56px,7vw,92px)}
.secao.final .env{position:relative;text-align:center;overflow:hidden;
  border:1px solid var(--linha-forte);border-radius:20px;
  padding:clamp(46px,6vw,68px) clamp(22px,4vw,40px);
  background:linear-gradient(160deg,rgba(197,240,158,.13),rgba(102,179,47,.04)),
             rgba(12,38,33,.55);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.secao.final .env h2{max-width:20ch;margin-inline:auto}
.secao.final .env>p{max-width:56ch;margin-inline:auto}
.secao.final .btn-nota{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--tinta-3)}

/* A limpeza da regra global de `a` derrubou o `text-decoration:none` que o topo
   herdava por `.topo nav a`. Como o topo virou `.nav`, os links do menu
   passaram a sair sublinhados. Reposto no escopo certo, sem voltar a regra
   global que centralizava titulos. */
.nav a,.nav .pill,.rodape .marca,.logo{text-decoration:none}
.nav .nav-links a{text-decoration:none;color:var(--tinta-2)}
.nav .nav-links a:hover{color:var(--tinta)}
.nav .nav-links a[aria-current="page"]{color:var(--lima)}

/* A seção final ainda tinha `background:var(--teal-fundo)` do sistema claro,
   criando uma faixa mais clara atrás da caixa de vidro. Com o painel próprio,
   essa faixa vira ruído: o fundo da página fica em cor única e só a caixa se
   destaca. */
.secao.final{background:var(--papel)}

/* Largura do corpo do artigo: MEDIDA, nao estimada.
   Com a fonte real, 44rem dava 79 caracteres por linha e 54rem deu 97. A faixa
   confortavel e 65 a 75: acima disso o olho perde a linha seguinte no retorno,
   e o texto fica mais cansativo, nao mais legivel.
   47rem fica em ~84. Continua acima do ideal, mas e o meio-termo entre a
   leitura e a sensacao de coluna perdida numa tela larga, que foi o incomodo
   relatado. Passar disso troca conforto de leitura por preenchimento visual. */
.post p,.post li{font-size:17.5px;line-height:1.72}
.post h2{margin-top:1.4rem}

/* O avatar da caixa de autoria voltou a ser quadrado porque
   `.post img{border-radius:var(--raio)}`, que eu adicionei no ajuste do modo
   escuro, tem a MESMA especificidade de `.autoria img` e vem depois no arquivo.
   Empate de especificidade quem ganha e o ultimo. Aqui vai o desempate. */
.post .autoria img,.autoria img{width:76px;height:76px;border-radius:50%;
  object-fit:cover;object-position:center 18%;flex-shrink:0;border:1px solid var(--linha-forte)}
.autoria{align-items:center;gap:1.25rem;padding:1.6rem 1.7rem;border-radius:18px}
.autoria h2{margin:0 0 .35rem}

/* Trilha de navegacao: estava quadrada e colada nas bordas. Vira uma capsula
   com respiro, alinhada ao mesmo raio dos outros blocos da pagina. */
.trilha{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  background:var(--papel-2);border:1px solid var(--linha);
  border-radius:100px;padding:.55rem 1.1rem;font-size:.87rem;
  color:var(--tinta-3);margin-bottom:1.2rem;width:auto;max-width:100%}
.trilha a{color:var(--tinta-2);text-decoration:none}
.trilha a:hover{color:var(--lima);text-decoration:underline}
@media(max-width:560px){.trilha{border-radius:14px;padding:.6rem .9rem}}

/* Largura do artigo igualada a caixa do CTA, a pedido: as duas agora tem
   var(--largura). O custo esta medido e e real: a linha passa dos ~84 para bem
   acima da faixa confortavel de 65 a 75 caracteres.
   Para compensar em parte, o corpo sobe para 19px e a entrelinha para 1,78:
   fonte maior reduz a contagem de caracteres na mesma largura e ajuda o olho a
   achar a linha seguinte no retorno. Nao anula o efeito, ameniza. */
.post{max-width:var(--largura)}
.post p,.post li{font-size:19px;line-height:1.78}
.post h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin-top:1.8rem}
.post h3{font-size:1.18rem}

/* Terceira vez que a remocao da regra global de `a` cobra: agora os botoes da
   capa. Em vez de remendar caso a caso, vai a lista completa de tudo que e
   BOTAO ou navegacao e nunca deve sublinhar. Texto corrido continua com
   sublinhado, que e o certo para link dentro de paragrafo. */
.pill,.ghost,.btn,.nav a,.logo,.rodape .marca,.trilha a,
.tab,.perguntas summary,.artigo-card h3 a,.relacionados a,
.cta-secao a,.selo-inpi,.dep a,.esteira a{text-decoration:none}
.pill:hover,.ghost:hover,.btn:hover{text-decoration:none}

/* ── Formulário ───────────────────────────────────────────────────────────
   .campo tinha ganhado fundo de cartao numa regra minha do modo escuro. Como
   ele envolve rotulo + input, virava caixa dentro de caixa: o rotulo aparecia
   sobre uma faixa mais clara e o input parecia uma segunda caixa solta. */
.campo{background:transparent;border:0;padding:0;gap:.5rem}
.campo label{font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--tinta)}
.campo input,.campo textarea,.campo select{
  background:var(--sup-2);border:1px solid var(--linha-forte);border-radius:12px;
  padding:.85rem 1rem;font-size:1rem;font-family:inherit;color:var(--tinta);
  width:100%;transition:border-color .16s,box-shadow .16s}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--tinta-3)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--lima);outline:none;box-shadow:0 0 0 3px rgba(197,240,158,.16)}
/* campo com erro precisa se distinguir SEM depender so da cor */
.campo input[aria-invalid="true"]{border-color:var(--risco);box-shadow:0 0 0 3px rgba(224,109,90,.14)}
.campo .obrig{color:var(--lima);font-weight:700}
.campo .opcional{color:var(--tinta-3);font-weight:400;font-size:.85rem}

/* consentimento: caixa de marcar de verdade, com alvo de toque decente */
.consentimento{display:flex;gap:.8rem;align-items:flex-start;
  background:var(--sup-2);border:1px solid var(--linha);border-radius:12px;padding:.9rem 1rem}
.consentimento input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex:none;margin:1px 0 0;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--linha-forte);background:var(--papel);
  display:grid;place-items:center;transition:background .14s,border-color .14s}
.consentimento input[type=checkbox]:checked{background:var(--verde);border-color:var(--verde)}
.consentimento input[type=checkbox]:checked::after{content:"";width:6px;height:11px;
  border:solid #04140C;border-width:0 2.5px 2.5px 0;transform:rotate(42deg) translateY(-1px)}
.consentimento input[type=checkbox]:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.consentimento label{font-size:.9rem;line-height:1.5;color:var(--tinta-2);cursor:pointer}
.consentimento a{color:var(--lima)}

/* o formulario inteiro respira igual */
form .campo + .campo{margin-top:1.1rem}
form .consentimento{margin-top:1.2rem}
form .btn{margin-top:1.2rem;width:100%;justify-content:center;padding:1rem}

/* Credito do desenvolvedor na barra de base. Fica discreto, alinhado a direita
   no desktop e embaixo no celular, sem competir com o texto institucional. */
.rodape .base{flex-wrap:wrap;gap:.5rem 1.4rem}
.rodape .credito{color:var(--tinta-3);width:100%;padding-top:.7rem;
  border-top:1px solid var(--linha);margin-top:.3rem}
.rodape .credito a{color:var(--tinta-2);text-decoration:none;font-weight:600}
.rodape .credito a:hover{color:var(--lima);text-decoration:underline}
@media(min-width:52rem){
  .rodape .credito{width:auto;border-top:0;padding-top:0;margin-top:0;margin-left:auto}
}

/* ── Dois defeitos de celular, ambos classicos ────────────────────────────

   1. `.menu-servicos ul{display:flex}` VENCE a regra do navegador que esconde
      o conteudo de um <details> fechado (a do UA tem especificidade menor).
      Resultado: o submenu esta SEMPRE no layout. No desktop ele e absoluto e
      ninguem nota; no celular virou estatico e passou a empurrar a largura.
      Esconder explicitamente quando fechado resolve nos dois. */
.menu-servicos:not([open]) > ul{display:none}

/* 2. min-width:auto do flexbox: item de flex nao encolhe abaixo da largura
      natural do conteudo, e <input> tem largura intrinseca de ~20 caracteres.
      Por isso o formulario ficava 424px dentro de uma tela de 390 e a pagina
      inteira ganhava rolagem lateral. */
.formulario,.formulario .campo,.formulario .consentimento{min-width:0}
.formulario input,.formulario textarea,.formulario select{min-width:0;max-width:100%}
@media(max-width:640px){
  .formulario{padding:1.2rem 1.1rem}
  .consentimento{padding:.8rem .9rem}
}

/* ── Capa no celular ──────────────────────────────────────────────────────
   Tres ajustes pedidos, com o porque de cada numero:

   1. O respiro do topo era 88px, herdado do desktop. Numa tela de 390px isso
      empurra o H1 para fora da primeira dobra. Cai para 34px.

   2. O H1 usa clamp(34px, 5.5vw, 60px). A 390px, 5.5vw da 21px, entao ele
      travava no PISO de 34px, o menor tamanho possivel. Subindo o piso para
      40px ele cresce sem afetar o desktop, que continua no teto de 60px.

   3. A logo do INPI estava com 34px de altura e mais peso visual que o H1.
      Cai para 22px e o texto ao lado encolhe junto: o selo e prova, nao
      manchete. */
@media(max-width:640px){
  .hero{padding-top:34px}
  .hero h1{font-size:clamp(40px,9vw,46px);line-height:1.06}
  .selo-inpi{gap:10px;padding:11px 14px;margin-bottom:22px;flex-direction:column;text-align:center}
  .selo-inpi img{height:22px;padding:5px 9px}
  .selo-inpi span{font-size:11.5px;line-height:1.4}
  .hero .sub{font-size:16.5px;margin-bottom:26px}
  .ctas{gap:10px}
  .ganhos{gap:10px}
}

/* ── Menu do celular, tratamento final ────────────────────────────────────
   O "Serviços" aparecia por ULTIMO por causa de `order:4`, herdado do topo
   antigo, quando o menu era uma barra e nao uma capsula. Aqui ele volta para
   a primeira posicao, que e onde faz sentido: e o menu do produto.

   A linha deixa de usar space-between, que espalhava os itens de forma
   desigual (4 itens de larguras diferentes viram 4 vaos diferentes), e passa
   a ser uma fila com espacamento constante, separada da linha da logo por um
   filete. */
@media(max-width:900px){
  .nav .menu-servicos{order:0;width:auto}
  .nav-links{justify-content:flex-start;gap:0 18px;row-gap:6px;
    padding-top:11px;border-top:1px solid var(--linha);font-size:14px}
  .nav .nav-links a,.nav .menu-servicos summary{padding:5px 0}
  .nav{padding:11px 16px 12px}
  /* o botao fica com a logo na primeira linha, sem apertar */
  .nav .pill{padding:9px 16px;font-size:13.5px}
  .nav .logo svg{width:98px}
  /* submenu aberto: empurra em vez de flutuar, e ocupa a linha inteira */
  .nav .menu-servicos[open]{width:100%}
  .nav .menu-servicos[open] ul{display:flex;flex-direction:row;flex-wrap:wrap;
    gap:4px 16px;padding:8px 0 0;background:transparent;border:0;box-shadow:none}
  .nav .menu-servicos[open] ul a{padding:3px 0;font-size:13.5px;background:transparent}
}

/* ── Grid que nao encolhe: a causa real do formulario estourando ──────────
   `grid-template-columns:1fr` e, na pratica, `minmax(auto, 1fr)`. Esse `auto`
   usa o MIN-CONTENT do item, e o min-content de um <input> e a largura natural
   dele, ~20 caracteres. Medido a 390px: a coluna calculava 425px dentro de um
   container de 355px, e a pagina inteira ganhava rolagem lateral.
   min-width:0 no formulario NAO resolve, porque a trava esta na coluna.
   minmax(0,1fr) e o unico jeito de deixar a coluna encolher. */
.balanca{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.balanca{grid-template-columns:minmax(0,1fr)}}
.duas{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
@media(max-width:900px){.duas{grid-template-columns:minmax(0,1fr)}}
.grade{min-width:0}
.grade>*{min-width:0}

/* E-mail e URL longos sao UMA palavra so e nao quebram sozinhos: o
   comercial.guarulhos@totaldocumentos.com.br tem 42 caracteres e estourava
   24px da tela no celular. overflow-wrap:anywhere so quebra quando precisa,
   entao no desktop nada muda. */
a[href^="mailto:"],a[href^="http"],.canais a,.rodape a,.trilha,.post a{
  overflow-wrap:anywhere;word-break:normal}

/* ── Topo do celular: so logo e botao ─────────────────────────────────────
   Decisao do Elcio (24/08): o menu sai no celular, ficam a marca e a acao.
   A navegacao nao se perde: o rodape tem a coluna Paginas com todos os links.
   Isto REVERTE o menu em duas linhas que eu tinha feito antes. */
@media(max-width:900px){
  .nav-links{display:none}
  .nav{flex-wrap:nowrap;padding:10px 12px 10px 16px;border-radius:100px}
  .nav .pill{margin-left:auto}
  .nav .logo svg{width:104px}
}
@media(max-width:380px){
  .nav .logo svg{width:92px}
  .nav .pill{padding:9px 14px;font-size:13px}
}

/* ── Trilha de navegação, versão enxuta no celular ────────────────────────
   O titulo do artigo dentro da trilha estourava a linha. No celular ele sai:
   a trilha vira so "Início › Blog", que e o que serve para voltar. O caminho
   completo continua no BreadcrumbList do schema, que e o que o Google le. */
.trilha{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.trilha-atual{color:var(--tinta-3)}
@media(max-width:640px){
  .trilha{border-radius:12px;padding:.45rem .8rem;font-size:.82rem;gap:.3rem}
  /* estrutura: a, span(›), a, span(›), span.trilha-atual
     escondo o SEGUNDO separador e o item atual; o primeiro fica */
  .trilha>span:nth-of-type(2),.trilha .trilha-atual{display:none}
}

/* ── Caixa "Sobre quem escreveu" no celular ───────────────────────────────
   Lado a lado com foto de 76px sobra pouco para o texto numa tela de 390.
   Empilha, com a foto e o rotulo na mesma linha, e o texto embaixo. */
@media(max-width:640px){
  .autoria{flex-direction:column;gap:.9rem;padding:1.2rem 1.1rem;border-radius:14px}
  .autoria img{width:54px;height:54px}
  .autoria>div{gap:.6rem}
  .autoria h2{font-size:.72rem;letter-spacing:.14em}
  .autoria p{font-size:.92rem;line-height:1.6}
}

/* ── CTA final: margem lateral no celular ─────────────────────────────────
   O painel de vidro E o proprio .env, e o .env e quem normalmente da a
   margem lateral da pagina. Ao virar painel, ele passou a ocupar essa margem
   e encostou nas bordas da tela. A folga volta na SECAO, por fora do painel. */
.secao.final{padding-inline:clamp(1.1rem,4vw,2rem)}
@media(max-width:640px){
  .secao.final{padding-block:clamp(40px,8vw,56px)}
  .secao.final .env{padding:clamp(32px,7vw,44px) clamp(18px,5vw,26px);border-radius:16px}
  .secao.final .env h2{font-size:clamp(1.55rem,6.4vw,1.95rem)}
  .secao.final .btn{width:100%;justify-content:center}
}
/* o CTA de secao tambem nao pode colar */
@media(max-width:640px){.cta-secao .btn{width:100%;justify-content:center}}

/* ── Retratos da Sobre no celular ─────────────────────────────────────────
   Medido a 390px: texto + selos ocupavam 79% do quadro de 560px, deixando so
   118px de foto limpa. O rosto ficava soterrado.

   Duas mudancas, com o numero de cada uma:
   1. O quadro sobe de 560 para 700px.
   2. Os selos viram uma linha compacta cada, so com o titulo; a descricao sai
      no celular porque ela e o que consumia 234px dos 560.
   Resultado: ~360px de foto limpa no topo, contra 118px antes. */
@media(max-width:640px){
  .retrato{min-height:700px}
  .retrato::after{background:linear-gradient(0deg,
    rgba(6,26,23,.97) 0%, rgba(6,26,23,.92) 26%,
    rgba(6,26,23,.55) 44%, rgba(6,26,23,.10) 64%, transparent 100%)}
  .retrato-txt{padding:0 20px 14px}
  .retrato-txt h3{font-size:1.6rem;margin-bottom:8px}
  .retrato-txt p{font-size:14.5px;line-height:1.5}
  .retrato-selos{grid-template-columns:1fr;gap:8px;padding:0 16px 16px}
  .rs{padding:10px 13px}
  .rs b{margin-bottom:0;font-size:13.5px}
  .rs p{display:none}
}
/* telas bem estreitas: o quadro nao pode virar uma torre */
@media(max-width:380px){.retrato{min-height:620px}}

/* Botao principal da capa com o icone do WhatsApp. O icone e decorativo
   (alt vazio + aria-hidden): o texto ja diz tudo, e um leitor de tela
   anunciando "imagem WhatsApp" antes da frase so atrapalha. */
.pill--zap{display:inline-flex;align-items:center;gap:9px}
.pill--zap img{width:20px;height:20px;display:block;flex:none}
@media(max-width:640px){
  .pill--zap{width:100%;justify-content:center}
  .pill--zap img{width:18px;height:18px}
}

/* O botao do topo carrega a mesma promessa da capa. Em tela estreita a frase
   inteira nao cabe ao lado da logo, entao existe uma versao curta: uma OU
   outra aparece, nunca as duas. */
.pill-curto{display:none}
@media(max-width:560px){
  .pill-longo{display:none}
  .pill-curto{display:inline}
  .nav .pill{padding:9px 13px;font-size:12.5px}
  .nav .pill--zap img{width:16px;height:16px}
  .nav .logo svg{width:88px}
}

/* Página 404. Grade que cai para 1 coluna sozinha, sem media query: o
   minmax(0,...) e nao 1fr porque 1fr vale minmax(auto,1fr) e o texto do card
   define uma largura minima que estoura a tela estreita. */
.cards-404{display:grid;gap:14px;margin-top:8px;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.cards-404 .card{display:flex;flex-direction:column;gap:6px;
  text-decoration:none;transition:border-color .18s,transform .18s}
.cards-404 .card strong{color:var(--tinta);font-size:1.02rem;font-weight:700}
.cards-404 .card span{color:var(--tinta-3);font-size:.92rem;line-height:1.5}
.cards-404 .card:hover{border-color:var(--teal);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.cards-404 .card{transition:none}
  .cards-404 .card:hover{transform:none}}

/* Pop-up de saida. Fica FORA do fluxo e so aparece com o [hidden] removido. */
.saida[hidden]{display:none}
.saida{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
  justify-content:center;padding:20px}
.saida-fundo{position:absolute;inset:0;background:rgba(3,12,10,.72)}
.saida-caixa{position:relative;width:100%;max-width:392px;background:var(--papel-2);
  border:1px solid var(--linha);border-radius:16px;padding:26px 26px 22px;
  max-height:92vh;overflow-y:auto;text-align:center;
  box-shadow:0 18px 48px rgba(0,0,0,.4);animation:saida-entra .24s ease-out}
@keyframes saida-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.saida-caixa{animation:none}}
.saida-x{position:absolute;top:8px;right:10px;width:32px;height:32px;padding:0;
  background:none;border:0;color:var(--tinta-3);font-size:22px;line-height:1;
  cursor:pointer;border-radius:8px}
.saida-x:hover{color:var(--tinta)}
.saida-marca{color:var(--teal);line-height:0;margin-bottom:20px}
.saida-marca svg{width:96px;height:auto;aspect-ratio:500/207;display:inline-block}

/* Quem vai retornar. Rosto identificavel converte melhor que promessa
   generica, e as duas ja aparecem na pagina Sobre. */
.saida-quem{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}
.saida-fotos{display:flex}
.saida-fotos img{width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:2px solid var(--papel-2);display:block}
.saida-fotos img+img{margin-left:-12px}
.saida-quem-txt{text-align:left;font-size:.82rem;font-weight:600;color:var(--tinta);line-height:1.25}
.saida-quem-txt em{display:block;font-style:normal;font-weight:400;color:var(--tinta-3);font-size:.78rem}

.saida-caixa h2{font-size:1.38rem;line-height:1.2;margin:0 0 8px}
.saida-caixa p{color:var(--tinta-3);font-size:.94rem;line-height:1.5;margin:0}
/* minmax(0,1fr) e nao 1fr: 1fr vale minmax(auto,1fr) e o <input> impoe uma
   largura minima propria que estoura a caixa na tela estreita. */
.saida-form{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:18px}
.saida-form input{width:100%;padding:12px 14px;border-radius:10px;font:inherit;
  font-size:.95rem;color:var(--tinta);background:rgba(255,255,255,.04);
  border:1px solid var(--linha)}
.saida-form input::placeholder{color:var(--tinta-3)}
.saida-form input:focus{outline:none;border-color:var(--teal)}
.saida-form .btn{width:100%;justify-content:center;margin-top:3px}
.saida-erro{color:#FF9E9E;font-size:.86rem;margin:0;text-align:left}
.saida-erro[hidden]{display:none}
.saida-pe{margin-top:12px !important;font-size:.8rem;color:var(--tinta-3)}
#saida-obrigado[hidden],#saida-forma[hidden]{display:none}
#saida-obrigado .btn{margin-top:18px;width:100%;justify-content:center}