/* =====================================================================
   KLIKA.CO — Sistema visual compartilhado
   Extraído do CSS inline de /diagnostico (v1) e transformado em arquivo
   único, para que home e páginas de entrada usem exatamente o mesmo
   sistema sem duplicar código.

   O QUE MUDOU EM RELAÇÃO AO ORIGINAL:
   1. Os comentários longos de decisão de design foram condensados. O
      arquivo original em /diagnostico segue intacto com a documentação
      completa — este aqui é a versão de produção.
   2. Entrou o bloco "NAVEGAÇÃO" (.topo-nav), que não existia: a landing
      solta não tinha para onde navegar. Agora tem.
   3. Entrou o bloco "RODAPÉ COMPLETO" (.rodape-grade), com colunas de
      links — é ele que alimenta os sitelinks do Google Ads.

   PALETA — 6 cores oficiais, sem tom inventado. Meio-tom só como
   opacidade de uma cor da paleta (rgba), nunca hex novo.
   TIPOGRAFIA — Archivo Black (display, aperto -4,5%) · Instrument Sans
   (corpo) · JetBrains Mono (utilitária, caixa alta).
   Grade base 8 · cantos 2-4px.
   ===================================================================== */

:root{
  --preto:#0A0A0A;
  --grafite:#161616;
  --verde:#00E37A;
  --verde-profundo:#007A42;
  --papel:#FAFAFA;
  --cinza:#8A8A8A;

  --papel-88:rgba(250,250,250,.88);
  --papel-74:rgba(250,250,250,.74);
  --papel-24:rgba(250,250,250,.24);
  --linha:rgba(250,250,250,.10);
  --linha-forte:rgba(250,250,250,.20);
  --preto-72:rgba(10,10,10,.72);
  --preto-60:rgba(10,10,10,.60);
  --preto-42:rgba(10,10,10,.42);
  --preto-34:rgba(10,10,10,.34);
  --preto-16:rgba(10,10,10,.16);
  --preto-10:rgba(10,10,10,.10);
  --preto-04:rgba(10,10,10,.04);

  --display:'Archivo Black',sans-serif;
  --corpo:'Instrument Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --aperto:-.045em;
  --trilha:.18em;

  --r-2:2px; --r-3:3px; --r-4:4px;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --pad-x:24px;
  --secao:clamp(72px,9vw,128px);

  --ease:cubic-bezier(.16,1,.3,1);
  --fast:160ms; --normal:320ms; --slow:640ms;
}

@media (min-width:820px){ :root{ --pad-x:48px; } }

*{margin:0;padding:0;box-sizing:border-box}
fieldset{border:0;min-width:0}
legend{display:block;width:100%}
html{scroll-behavior:smooth}
body{
  background:var(--preto);
  color:var(--papel);
  font-family:var(--corpo);
  font-size:clamp(.95rem,.35vw + .88rem,1.05rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
main,header,footer{position:relative}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--pad-x)}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:var(--aperto);text-wrap:balance}
h1{font-size:clamp(1.6rem,2.75vw,2.7rem);line-height:1.07}
h2{font-size:clamp(1.32rem,3.05vw,2.65rem);line-height:1.08}
h3{font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.18}
p{text-wrap:pretty}

.indice{
  font-family:var(--mono);font-weight:700;letter-spacing:var(--trilha);text-transform:uppercase;
  color:var(--cinza);font-size:clamp(.7rem,.36vw + .61rem,.78rem);
}

.destaque{color:var(--verde);font-weight:600}
.headline .destaque{font-weight:400}

/* ---------- superfície clara ---------- */
.claro{background:var(--papel);color:var(--preto);border-top:0}
.claro h2,.claro h3,.claro b{color:var(--preto)}
.claro p{color:var(--preto-72)}
.claro .indice{color:var(--preto-60)}
.claro .destaque{color:var(--verde-profundo);font-weight:700}
.claro .ico{stroke:var(--preto-72)}
.claro .ico .forte{stroke:var(--preto)}
.claro .ico .ponto-cheio{fill:var(--preto);stroke:none}

/* ---------- CTA ----------
   Um desenho só de botão na página inteira: Verde Sinal preenchido,
   assinatura e seta em Preto Klika, sem inversão por superfície. */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  background:var(--verde);color:var(--preto);
  font-family:var(--display);font-weight:400;letter-spacing:var(--aperto);text-transform:uppercase;
  font-size:clamp(.82rem,.38vw + .72rem,1rem);line-height:1;
  padding:20px 30px;border:0;border-radius:var(--r-3);text-decoration:none;cursor:pointer;
  transition:transform var(--fast) var(--ease),box-shadow var(--normal) var(--ease);
}
.cta:hover,.cta:focus-visible{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,227,122,.30)}
.cta .seta{width:18px;height:8px;flex:none}
.cta .seta path{stroke:var(--preto);stroke-width:1.6;fill:none}
.claro :where(a.cta,button.cta):focus-visible{outline-color:var(--preto)}

.acao-secao{display:flex;justify-content:center;margin-top:var(--s6)}
.grade > .acao-secao{grid-column:1 / -1}
.recebe .acao-secao{margin-top:var(--s6)}
@media (min-width:900px){ .recebe .acao-secao{margin-top:calc(var(--s7) + 64px)} }
.solucao .acao-secao{margin-top:var(--s5)}
.qualificacao .acao-secao,.etica .acao-secao,.quem .acao-secao{margin-top:var(--s1)}

.cta-fantasma{
  display:inline-flex;align-items:center;gap:10px;padding:13px 18px;
  border:1px solid var(--linha-forte);border-radius:var(--r-2);
  font-family:var(--display);font-size:.7rem;letter-spacing:var(--aperto);text-transform:uppercase;line-height:1;
  color:var(--papel);text-decoration:none;transition:border-color var(--fast) linear,background var(--fast) linear;
}
.cta-fantasma:hover{border-color:var(--papel);background:rgba(250,250,250,.06)}

:where(a,button,input,select):focus-visible{outline:2px solid var(--papel);outline-offset:3px}

/* =====================================================================
   CABEÇALHO E NAVEGAÇÃO  — bloco novo
   A landing original não tinha navegação: era uma peça solta. O menu
   entra por três motivos, nesta ordem de importância:
   1. o Google avalia navegabilidade e transparência na nota da página
      de destino, e uma página sem rota para o resto do site pontua mal;
   2. sem páginas reais não há sitelink, e sitelink entra direto na
      fórmula do Ad Rank;
   3. o visitante que quer conferir quem é a empresa antes de entregar
      o WhatsApp hoje não tem para onde ir.
   ===================================================================== */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad-x);
  background:var(--preto);
  border-bottom:1px solid transparent;
  transition:border-color var(--normal) linear;
}
.topo.fixado{border-bottom-color:var(--linha)}
.topo img{width:188px;height:44px;object-fit:cover}
.rodape img{width:188px;height:52px;object-fit:cover}
.topo .cta-fantasma{padding:11px 16px}

.topo-nav{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:8px}
.topo-nav a{
  color:var(--papel-74);text-decoration:none;font-size:.87rem;line-height:1;
  transition:color var(--fast) linear;white-space:nowrap;
}
.topo-nav a:hover,.topo-nav a[aria-current="page"]{color:var(--papel)}
.topo-nav a[aria-current="page"]{font-weight:600}
@media (max-width:1023px){ .topo-nav{display:none} }
@media (max-width:560px){ .topo .cta-fantasma{display:none} }

/* =====================  ABERTURA  ===================== */
.abertura{
  position:relative;overflow:hidden;
  padding:96px 0 64px;
  background-color:var(--preto);
  background-image:
    linear-gradient(180deg,
      rgba(10,10,10,.94) 0%,
      rgba(10,10,10,.80) 12%,
      rgba(10,10,10,.72) 26%,
      rgba(10,10,10,.80) 38%,
      rgba(10,10,10,.96) 50%,
      var(--preto) 62%),
    url("/diagnostico/hero-handshake-v1.jpg");
  background-repeat:no-repeat;
  background-size:auto,auto clamp(400px,108vw,720px);
  background-position:center,50% max(0px,calc(140px - 14vw));
}
@media (min-width:1000px){
  .abertura{
    min-height:min(100svh,820px);display:flex;align-items:center;padding:104px 0 72px;
    background-image:
      linear-gradient(90deg,
        rgba(10,10,10,.94) 0%,
        rgba(10,10,10,.88) 44%,
        rgba(10,10,10,.74) 56%,
        rgba(10,10,10,.48) 72%,
        rgba(10,10,10,.44) 86%,
        rgba(10,10,10,.62) 100%),
      linear-gradient(180deg,
        rgba(10,10,10,.86) 0%,
        rgba(10,10,10,0) 20%,
        rgba(10,10,10,0) 70%,
        rgba(10,10,10,.94) 100%),
      url("/diagnostico/hero-handshake-v1.jpg");
    background-size:auto,auto,cover;
    background-position:center,center,50% 34%;
  }
}

.abertura .grade{display:grid;gap:var(--s5);width:100%}
@media (min-width:1000px){
  .abertura .grade{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--s6);align-items:center}
}

.discurso{max-width:none;container-type:inline-size}
.headline{
  margin-bottom:20px;
  font-family:var(--display);font-weight:400;letter-spacing:var(--aperto);
  font-size:clamp(1.62rem,5cqw,2.25rem);line-height:1.1;color:var(--papel);
  text-wrap:balance;
}
@media (min-width:1000px){ .headline{font-size:clamp(1.45rem,6.1cqw,2.25rem)} }
.headline h1{font:inherit;letter-spacing:inherit;color:inherit;text-wrap:inherit}
.discurso .sub{
  margin-top:18px;color:var(--papel-74);
  font-size:clamp(.9rem,.3vw + .84rem,.99rem);line-height:1.58;max-width:44ch;
}
.assinatura-discurso{display:flex;align-items:center;gap:14px;margin-top:26px}
.assinatura-discurso .filete{
  width:96px;height:1px;flex:none;
  background:linear-gradient(to right,var(--papel),rgba(250,250,250,.06));
  transform:skewY(-6deg);
}
.assinatura-discurso .ponto{width:9px;height:9px;border-radius:50%;background:var(--verde);flex:none}

@media (max-width:999px){
  .discurso{text-align:center}
  .discurso .sub{margin-inline:auto}
  .assinatura-discurso{justify-content:center}
}

/* ---------- painel do formulário ---------- */
.painel-form{
  background:rgba(22,22,22,.93);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--linha-forte);border-radius:var(--r-4);
  box-shadow:0 30px 80px rgba(10,10,10,.72);
  padding:clamp(22px,2.2vw,32px);position:relative;overflow:hidden;
}
.painel-form::before{
  content:"";position:absolute;top:-40%;right:-18%;width:70%;height:180%;
  background:linear-gradient(135deg,transparent 48%,rgba(250,250,250,.045) 49.4%,transparent 51%);
  pointer-events:none;
}
.grupo{position:relative}
.grupo + .grupo{margin-top:24px;padding-top:24px;border-top:1px solid var(--linha)}
.grupo .titulo-grupo{
  font-family:var(--mono);font-size:.66rem;letter-spacing:var(--trilha);text-transform:uppercase;
  color:var(--cinza);margin-bottom:14px;display:block;
}
.campos{display:grid;gap:10px}
.campos input,.campo-select{
  width:100%;background:var(--preto);border:1px solid var(--linha);border-radius:var(--r-2);
  padding:14px 14px;color:var(--papel);
  transition:border-color var(--fast) linear,background var(--fast) linear;
}
.campos input::placeholder{color:var(--cinza);opacity:1}
.campos input:focus,.campo-select:focus{border-color:var(--papel);background:rgba(250,250,250,.03);outline:none}

.telefone{display:grid;grid-template-columns:104px 74px 1fr;gap:8px}
@media (max-width:430px){ .telefone{grid-template-columns:94px 64px 1fr} }
.telefone .pais{padding-inline:12px 30px;font-size:.9rem}
.telefone .ddd{text-align:center}

.campo-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--cinza) 50%),
    linear-gradient(-45deg,transparent 50%,var(--cinza) 50%);
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:40px;
}
.campo-select option{background:var(--preto);color:var(--papel)}
.pergunta{margin-top:18px}
.pergunta:first-of-type{margin-top:0}
.pergunta > p{font-size:.92rem;font-weight:600;margin-bottom:9px;line-height:1.35}
.pergunta > p .num{font-family:var(--mono);color:var(--cinza);margin-right:8px;font-size:.82rem}
.painel-form .cta{width:100%;margin-top:24px}

/* =====================  ESCADA (o que você recebe)  ===================== */
.recebe{padding:var(--secao) 0}
.recebe .cabeca{max-width:820px}
.recebe h2{margin-bottom:var(--s2)}
.recebe .cabeca p{color:var(--cinza);max-width:640px}
.escada{position:relative;margin-top:var(--s7);display:grid;gap:var(--s4)}
@media (min-width:900px){
  .escada{grid-template-columns:repeat(3,1fr);column-gap:var(--s4);align-items:start;padding-top:64px}
  .escada .passo:nth-child(1){transform:translateY(64px)}
  .escada .passo:nth-child(2){transform:translateY(32px)}
  .escada .passo:nth-child(1)::after,
  .escada .passo:nth-child(2)::after{
    content:"";position:absolute;top:-1px;right:calc(-1 * var(--s4));
    width:45px;height:1px;transform-origin:left center;transform:rotate(-45deg);
    background:repeating-linear-gradient(to right,rgba(250,250,250,.34) 0 5px,transparent 5px 11px);
  }
}
.passo{position:relative;padding-top:var(--s3);border-top:2px solid var(--linha-forte)}
.passo:first-child{border-top-color:var(--papel)}
.passo .icone{width:46px;height:46px;margin-bottom:var(--s3);display:block}
.passo .indice{display:block;margin-bottom:12px}
.passo h3{margin-bottom:14px;font-size:clamp(.95rem,1vw + .6rem,1.15rem);text-transform:uppercase}
.passo p{color:var(--cinza);font-size:.95rem}
.passo::before{
  content:"";position:absolute;top:-6px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--grafite);border:1px solid var(--linha-forte);
}
.passo:first-child::before{background:var(--papel);border-color:var(--papel)}

.ico{fill:none;stroke:var(--papel-74);stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.ico .forte{stroke:var(--papel)}
.ico .ponto-cheio{fill:var(--papel);stroke:none}

/* =====================  PROBLEMA  ===================== */
.problema{padding:var(--secao) 0;background:linear-gradient(180deg,var(--preto),rgba(22,22,22,.55) 42%,var(--preto))}
.problema .cabeca{display:grid;gap:var(--s3);max-width:940px}
.problema h2 .ponto-marca{
  display:inline-block;width:.36em;height:.36em;border-radius:50%;background:var(--papel);
  margin-left:.12em;vertical-align:baseline;
}
.problema .cabeca p{color:var(--cinza);max-width:760px}
.cartoes-problema{display:grid;gap:var(--s2);margin-top:var(--s6)}
@media (min-width:860px){ .cartoes-problema{grid-template-columns:repeat(3,1fr);gap:var(--s3)} }
.cartao-problema{
  display:grid;align-content:start;gap:16px;
  border:1px solid var(--linha);border-radius:var(--r-3);background:var(--grafite);
  padding:clamp(24px,2.6vw,34px);
  transition:border-color var(--normal) var(--ease),transform var(--normal) var(--ease);
}
.cartao-problema:hover{border-color:rgba(250,250,250,.42);transform:translateY(-3px)}
.cartao-problema .icone{width:44px;height:44px;display:block}
.cartao-problema h3{max-width:24ch}
.cartao-problema p{color:var(--cinza);font-size:.95rem}

/* =====================  SOLUÇÃO  ===================== */
.solucao{padding:var(--secao) 0}
.intro-solucao{display:grid;gap:var(--s2)}
.intro-solucao h2{max-width:16ch}
.intro-solucao p{max-width:70ch;color:var(--cinza)}

.painel-produto{
  position:relative;
  margin-top:var(--s2);border:1px solid var(--linha);border-radius:var(--r-4);
  background:linear-gradient(160deg,rgba(10,10,10,.97),rgba(10,10,10,.82));
  padding:clamp(18px,2.2vw,30px);
}
.painel-cabeca{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:clamp(14px,1.6vw,20px);border-bottom:1px solid var(--linha);
}
.painel-rotulo{
  display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:var(--trilha);text-transform:uppercase;color:var(--cinza);
}
.painel-titulo{
  display:block;margin-top:9px;font-family:var(--display);letter-spacing:var(--aperto);
  font-size:clamp(.95rem,1.25vw,1.2rem);line-height:1.1;color:var(--papel);
}
.painel-titulo .divisor{color:var(--papel-24);margin-inline:.3em}
.painel-status{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border:1px solid var(--linha-forte);border-radius:100px;
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--papel-74);white-space:nowrap;
}
.painel-status .ponto-vivo{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none}

.painel-corpo{display:grid;gap:14px;margin-top:clamp(16px,1.8vw,22px)}
@media (min-width:940px){ .painel-corpo{grid-template-columns:1.02fr .98fr;gap:18px} }

.painel-metricas{display:grid;gap:12px;align-content:start}
@media (min-width:640px){ .painel-metricas{grid-template-columns:1fr 1fr} }
.metrica{
  background:var(--grafite);border:1px solid var(--linha);border-radius:var(--r-3);
  padding:clamp(15px,1.5vw,19px);display:grid;align-content:start;gap:12px;
}
@media (min-width:940px){
  .painel-metricas{grid-template-rows:1fr 1fr;align-content:stretch}
  .metrica{align-content:space-between}
}
.metrica-rotulo{
  font-family:var(--mono);font-size:.575rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--cinza);line-height:1.5;
}
.metrica-linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.metrica-valor{
  font-family:var(--display);letter-spacing:var(--aperto);color:var(--papel);
  font-size:clamp(1.34rem,2.1vw,1.72rem);line-height:1;
}
.metrica-var{
  font-family:var(--mono);font-weight:700;font-size:.72rem;
  color:var(--verde);white-space:nowrap;
}

.painel-origem{
  background:var(--grafite);border:1px solid var(--linha);border-radius:var(--r-3);
  padding:clamp(16px,1.7vw,22px);display:grid;align-content:start;gap:17px;
}
.origem-cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.origem-titulo{
  font-family:var(--display);letter-spacing:var(--aperto);color:var(--papel);
  font-size:clamp(.86rem,1vw,.98rem);line-height:1.1;
}
.origem-periodo{
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--cinza);white-space:nowrap;
}
@media (max-width:559px){
  .origem-cabeca{display:grid;justify-items:start;gap:8px}
  .origem-cabeca .origem-periodo{order:-1}
}
.origem-lista{list-style:none;display:grid;gap:15px}
.origem-linha{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:baseline}
.origem-canal{font-size:.85rem;color:var(--papel-74);line-height:1.2}
.origem-valor{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--papel)}
.origem-trilho{
  grid-column:1 / -1;height:5px;border-radius:100px;
  background:rgba(250,250,250,.07);overflow:hidden;
}
.origem-preenche{display:block;height:100%;border-radius:100px;background:var(--verde)}
.origem-linha:nth-child(2) .origem-preenche{background:rgba(250,250,250,.52)}
.origem-linha:nth-child(3) .origem-preenche{background:rgba(250,250,250,.32)}
.origem-linha:nth-child(4) .origem-preenche{background:rgba(250,250,250,.20)}

.painel-selo{
  margin-top:14px;display:grid;gap:11px;
  background:var(--grafite);border:1px solid rgba(250,250,250,.18);border-radius:var(--r-3);
  padding:14px 18px;box-shadow:0 18px 44px rgba(10,10,10,.6);
}
@media (min-width:940px){
  .painel-selo{
    position:absolute;margin-top:0;min-width:250px;
    right:clamp(22px,2.6vw,36px);bottom:0;transform:translateY(44%);
    box-shadow:0 20px 44px rgba(10,10,10,.28);
  }
  .painel-origem{padding-bottom:34px}
  .painel-produto{margin-bottom:80px}
}
.selo-rotulo{
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--cinza);
}
.selo-dado{display:flex;align-items:center;gap:11px}
.selo-seta{
  width:14px;height:14px;flex:none;fill:none;stroke:var(--verde);
  stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;
}
.selo-nome{
  font-family:var(--display);letter-spacing:var(--aperto);color:var(--papel);
  font-size:clamp(.82rem,.95vw,.95rem);line-height:1;
}
.selo-multi{
  margin-left:auto;font-family:var(--display);letter-spacing:var(--aperto);
  color:var(--verde);font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1;
}
.bento{display:grid;gap:var(--s2);margin-top:var(--s6)}
@media (min-width:940px){
  .bento{grid-template-columns:1.12fr 1fr}
  .bento .bloco:nth-child(3){
    grid-column:1 / -1;grid-template-columns:minmax(0,1fr) minmax(0,1.34fr);
    column-gap:var(--s6);row-gap:10px;align-items:start;
  }
  .bento .bloco:nth-child(3) .num{grid-column:1;grid-row:1}
  .bento .bloco:nth-child(3) h3{grid-column:1;grid-row:2;max-width:26ch}
  .bento .bloco:nth-child(3) p{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:1rem}
}
.bloco{
  border:1px solid var(--linha);border-radius:var(--r-3);padding:clamp(22px,2.4vw,34px);
  background:var(--grafite);display:grid;align-content:start;gap:14px;
  transition:border-color var(--normal) var(--ease),transform var(--normal) var(--ease);
}
.bloco:hover{border-color:rgba(250,250,250,.42);transform:translateY(-3px)}
.bloco .num{
  font-family:var(--mono);font-weight:700;font-size:clamp(1.6rem,3vw,2.6rem);color:transparent;
  -webkit-text-stroke:1px rgba(250,250,250,.34);letter-spacing:0;line-height:1;
}
.bloco:first-child .num{-webkit-text-stroke-color:var(--papel)}
.bloco h3{max-width:24ch}
.bloco p{color:var(--cinza);font-size:.95rem}

/* =====================================================================
   HUB DE SERVIÇOS  — bloco novo, exclusivo da home
   É o coração da home institucional: a grade que distribui o visitante
   para as páginas de entrada. Cada item é um <a> inteiro clicável, não
   um cartão com link dentro — área de toque grande no celular e um
   destino só por item, que é como o Google prefere ler hierarquia de
   site.
   ===================================================================== */
.hub{padding:var(--secao) 0}
.hub .cabeca{max-width:820px;margin-bottom:var(--s6)}
.hub h2{margin-bottom:var(--s2)}
.hub .cabeca p{max-width:660px}
.hub-grade{display:grid;gap:var(--s2)}
@media (min-width:700px){ .hub-grade{grid-template-columns:1fr 1fr} }
@media (min-width:1060px){ .hub-grade{grid-template-columns:repeat(3,1fr)} }
.hub-item{
  display:grid;align-content:start;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--preto-16);border-radius:var(--r-3);background:var(--preto-04);
  padding:clamp(22px,2.2vw,30px);position:relative;
  transition:border-color var(--normal) var(--ease),transform var(--normal) var(--ease),background var(--normal) var(--ease);
}
.hub-item:hover{border-color:var(--preto-42);transform:translateY(-3px);background:transparent}
.hub-item .indice{color:var(--preto-60)}
.hub-item h3{color:var(--preto);max-width:22ch}
.hub-item p{color:var(--preto-72);font-size:.93rem}
/* a seta a 45 graus é o elemento da marca fazendo o papel de affordance */
.hub-item .ir{
  margin-top:4px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--verde-profundo);
}
.hub-item .ir svg{width:12px;height:12px;fill:none;stroke:var(--verde-profundo);stroke-width:1.9;stroke-linecap:square}
.hub-secao{
  grid-column:1 / -1;margin-top:var(--s4);
  font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--preto-60);
  padding-bottom:12px;border-bottom:1px solid var(--preto-16);
}
.hub-grade > .hub-secao:first-child{margin-top:0}

/* =====================================================================
   MÉTODO  — bloco novo, exclusivo da home
   Três etapas numeradas em coluna, com o filete diagonal ligando uma na
   outra. Mesmo gesto da escada de «.recebe», em orientação vertical.
   ===================================================================== */
.metodo{padding:var(--secao) 0;position:relative;overflow:hidden}
.metodo::before{
  content:"";position:absolute;left:5%;bottom:0;width:1px;height:200%;
  background:var(--linha-forte);transform:rotate(45deg);transform-origin:bottom center;pointer-events:none;
}
.metodo .cabeca{max-width:760px;margin-bottom:var(--s6);position:relative}
.metodo h2{margin-bottom:var(--s2)}
.metodo .cabeca p{color:var(--cinza)}
.etapas{display:grid;gap:var(--s2);position:relative}
.etapa{
  display:grid;gap:14px;align-content:start;
  grid-template-columns:auto 1fr;column-gap:clamp(18px,2.4vw,32px);
  border:1px solid var(--linha);border-radius:var(--r-3);background:var(--grafite);
  padding:clamp(22px,2.4vw,32px);
}
.etapa .num-etapa{
  font-family:var(--mono);font-weight:700;font-size:clamp(1.4rem,2.4vw,2.1rem);
  color:transparent;-webkit-text-stroke:1px var(--linha-forte);line-height:1;grid-row:1 / span 2;
}
.etapa:first-child .num-etapa{-webkit-text-stroke-color:var(--papel)}
.etapa h3{grid-column:2;align-self:center}
.etapa p{grid-column:2;color:var(--cinza);font-size:.95rem}
@media (min-width:900px){
  .etapas{grid-template-columns:repeat(3,1fr)}
  .etapa{grid-template-columns:1fr}
  .etapa .num-etapa{grid-row:auto;margin-bottom:4px}
  .etapa h3,.etapa p{grid-column:1}
}

/* =====================  QUALIFICAÇÃO  ===================== */
.qualificacao{
  position:relative;padding:var(--secao) 0;overflow:hidden;
  background:var(--grafite);
}
.qualificacao::before{
  content:"";position:absolute;left:6%;bottom:0;width:1px;height:200%;
  background:var(--linha-forte);transform:rotate(45deg);transform-origin:bottom center;pointer-events:none;
}
.qualificacao .grade{display:grid;gap:var(--s5);position:relative}
@media (min-width:900px){ .qualificacao .grade{grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:center} }
.criterios{display:grid;gap:2px}
@media (min-width:620px){ .criterios{grid-template-columns:1fr 1fr;gap:var(--s2)} }
.criterio{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:20px;background:rgba(10,10,10,.55);border:1px solid var(--linha);border-radius:var(--r-2);
}
.criterio .icone{width:38px;height:38px;flex:none;margin-top:1px}
.criterio .ico{stroke-width:1.75}
.criterio p{font-size:.95rem;color:var(--papel-74)}

/* =====================  ÉTICA  ===================== */
.etica{padding:var(--secao) 0;position:relative;overflow:hidden}
.etica::before{
  content:"";position:absolute;left:4%;bottom:0;width:1px;height:200%;
  background:var(--preto-16);transform:rotate(45deg);transform-origin:bottom center;pointer-events:none;
}
.etica .grade{display:grid;gap:var(--s5);position:relative}
@media (min-width:900px){ .etica .grade{grid-template-columns:1fr 1.15fr;gap:var(--s7)} }
.etica h2{margin-bottom:var(--s3)}
.etica .intro{max-width:46ch}
.etica .assinatura-doc{margin-top:var(--s5);width:188px;height:52px;object-fit:cover}
.documento{border:1px solid rgba(10,10,10,.14);border-radius:var(--r-3);background:var(--papel)}
.documento .linha-doc{padding:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--preto-10);display:grid;gap:8px}
.documento .linha-doc:last-child{border-bottom:0}
.documento .linha-doc b{font-family:var(--display);font-weight:400;letter-spacing:var(--aperto);font-size:1.02rem}
.documento .linha-doc p{color:var(--preto-72);font-size:.94rem}

/* =====================  QUEM SOMOS  ===================== */
.quem{padding:var(--secao) 0;overflow:hidden}
.quem .grade{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){ .quem .grade{grid-template-columns:.82fr 1.18fr;gap:var(--s7)} }
.marca-quem{position:relative;background:var(--preto)}
.marca-quem img{width:82%;margin:0 auto}
.quem h2{margin-bottom:var(--s3);max-width:20ch}
.quem .corpo{display:grid;gap:var(--s3);color:var(--papel-74);max-width:62ch}

/* =====================================================================
   PÁGINAS LEGAIS  — termos de uso e política de privacidade
   Coluna única, medida de leitura curta. Superfície clara porque são
   documentos: fundo escuro em texto longo cansa, e o manual reserva o
   Preto Klika para as dobras de discurso.
   ===================================================================== */
.legal{padding:calc(var(--secao) + 40px) 0 var(--secao)}
.legal .wrap{max-width:820px}
.legal h1{margin-bottom:var(--s2);font-size:clamp(1.5rem,2.4vw,2.2rem)}
.legal .atualizado{
  font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--preto-60);display:block;margin-bottom:var(--s5);
}
.legal h2{font-size:clamp(1.05rem,1.5vw,1.32rem);margin:var(--s5) 0 var(--s2)}
.legal p{margin-bottom:var(--s2)}
.legal ul{margin:0 0 var(--s2) 20px}
.legal li{margin-bottom:8px;color:var(--preto-72)}
.legal a{color:var(--verde-profundo)}
/* Marcador do que precisa ser preenchido. Fica visualmente impossível de
   ignorar de propósito: página legal com lacuna é pior que página legal
   inexistente. */
.legal .preencher{
  background:rgba(0,227,122,.16);border-bottom:2px solid var(--verde-profundo);
  padding:1px 5px;font-weight:600;color:var(--preto);
}

/* =====================  FECHAMENTO  ===================== */
.fechamento{
  position:relative;text-align:center;padding:clamp(72px,8vw,120px) 0;
  background:var(--papel) radial-gradient(70% 120% at 50% 110%,rgba(10,10,10,.08),transparent 62%);
}
.fechamento h2{width:min(88vw,760px);margin:0 auto var(--s5)}
.fechamento .sub-fechamento{
  width:min(88vw,620px);margin:calc(-1 * var(--s4)) auto var(--s5);
  color:var(--preto-72);font-size:clamp(.92rem,.3vw + .86rem,1rem);
}

/* =====================================================================
   RODAPÉ COMPLETO  — bloco novo
   O rodapé antigo tinha logo + duas linhas de texto. Este tem colunas de
   links reais, que é o que dá ao Google um mapa do site e ao visitante
   uma rota para conferir a empresa antes de entregar o WhatsApp.
   ===================================================================== */
.rodape{background:var(--preto);padding:var(--s6) 0 var(--s5);border-top:1px solid var(--linha)}
.rodape-grade{display:grid;gap:var(--s5)}
@media (min-width:820px){ .rodape-grade{grid-template-columns:1.3fr 1fr 1fr;gap:var(--s6)} }
.rodape-marca{display:grid;gap:var(--s3);align-content:start}
.rodape-marca p{color:var(--papel-74);font-size:.88rem;max-width:38ch}
.rodape-coluna{display:grid;gap:14px;align-content:start}
.rodape-coluna .titulo-coluna{
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:var(--trilha);
  text-transform:uppercase;color:var(--cinza);
}
.rodape-coluna a{
  color:var(--papel-74);text-decoration:none;font-size:.9rem;line-height:1.35;
  transition:color var(--fast) linear;
}
.rodape-coluna a:hover{color:var(--papel)}
.rodape-base{
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:baseline;
}
.rodape-base p{font-size:.8rem;line-height:1.6;color:var(--papel-74);margin:0}
.rodape-base a{color:inherit}

/* =====================  AJUSTES DAS DOBRAS CLARAS  ===================== */
.claro .passo p,.claro .bloco p,.claro .intro-solucao p{color:var(--preto-72)}
.recebe.claro .cabeca p{color:var(--preto-72)}
.recebe.claro .passo{border-top-color:var(--preto-16)}
.recebe.claro .passo:first-child{border-top-color:var(--preto)}
.recebe.claro .passo::before{background:var(--papel);border-color:var(--preto-16)}
.recebe.claro .passo:first-child::before{background:var(--preto);border-color:var(--preto)}
@media (min-width:900px){
  .recebe.claro .escada .passo:nth-child(1)::after,
  .recebe.claro .escada .passo:nth-child(2)::after{
    background:repeating-linear-gradient(to right,var(--preto-34) 0 5px,transparent 5px 11px);
  }
}
.solucao.claro .painel-produto{border-color:rgba(10,10,10,.22)}
.solucao.claro .bloco{background:var(--preto-04);border-color:var(--preto-16)}
.solucao.claro .bloco:hover{border-color:var(--preto-42)}
.solucao.claro .bloco .num{-webkit-text-stroke-color:var(--preto-34)}
.solucao.claro .bloco:first-child .num{-webkit-text-stroke-color:var(--preto)}

/* =====================  EMPILHADO (abaixo de 1000px)  ===================== */
@media (max-width:999px){
  h1,h2,.headline{-webkit-text-stroke:.6px currentColor}
  .recebe h2,
  .problema h2,
  .intro-solucao h2,
  .qualificacao h2,
  .etica h2,
  .fechamento h2{font-size:clamp(1.75rem,3.05vw,2.65rem)}
  .intro-solucao h2{max-width:none}
  .quem h2{max-width:none}
  .qualificacao h2{text-align:center}
  .etica .assinatura-doc{display:none}
}

/* ---------- entrada em cena ---------- */
.revela{transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.js-pronto .revela{opacity:0;transform:translateY(22px)}
.js-pronto .revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-pronto .revela{opacity:1;transform:none;transition:none}
  .cta{transition:none}
}