/* ============================================================
   Climetria.Site — páginas de conteúdo (guia, glossário, comparativo)
   e documentos legais (privacidade, termos).

   Autossuficiente de propósito: repete os tokens e os @font-face em vez de
   depender do landing.css. Assim uma página de texto carrega ~6 KB de CSS
   em vez dos 30 KB da home, que são quase todos de componentes do hero.
   Mesma identidade "Instrumento": grafite + verde-limão, IBM Plex, tick-rule.
   ============================================================ */

@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face {
  font-family:'Material Symbols Rounded';
  font-style:normal; font-weight:100 700; font-display:block;
  src:url('/fonts/material-symbols-rounded.woff2') format('woff2');
}

:root {
  --ink:#1F1F1F; --stone:#EDEDEB; --panel:#FFFFFF; --panel-2:#F5F5F3;
  --line:rgba(38,38,38,.11); --line-2:rgba(38,38,38,.18);
  --text:#2A2A2A; --muted:#656565; --faint:#999999;
  --petrol:#303030; --petrol-600:#262626;
  --brass:#9FF000; --brass-600:#5E7E00;
  --on-ink:#D6DED9; --on-ink-mute:#97A39E;
  --r-sm:7px; --r:10px; --r-lg:13px; --r-xl:18px;
  --sh-sm:0 1px 2px rgba(30,30,30,.07);
  --sh:0 6px 18px -10px rgba(30,30,30,.24);
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --tick:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 9px);
  --tick-light:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 11px);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--sans); background:var(--stone); color:var(--text);
  letter-spacing:-0.006em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:var(--petrol-600); text-decoration:none; }
:focus-visible { outline:2px solid var(--petrol); outline-offset:3px; }

.ms {
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap;
  display:inline-block; word-wrap:normal; direction:ltr;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  -webkit-font-smoothing:antialiased; user-select:none;
}

.wrap { max-width:1200px; margin:0 auto; padding-left:28px; padding-right:28px; }

/* ---------- Topo ---------- */

.topo { background:var(--ink); color:var(--on-ink); }
.topo__in {
  max-width:1200px; margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.topo__brand { display:flex; align-items:center; gap:11px; }
.topo__mark {
  width:36px; height:36px; border-radius:10px; background:#303030;
  display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.08);
}
.wordmark { font-size:1.31rem; font-weight:700; letter-spacing:-0.03em; color:#EDEDEB; }
.wordmark .accent { color:var(--brass); }
.topo__spacer { flex:1; }
.topo__links { display:flex; gap:22px; flex-wrap:wrap; }
.topo__links a { color:var(--on-ink-mute); font-size:.92rem; font-weight:500; }
.topo__links a:hover { color:#fff; }
.topo__cta {
  display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:var(--r-sm);
  background:var(--brass); color:#1a1a1a; font-weight:600; font-size:.92rem;
}
.topo__cta:hover { background:#B4F52E; }
.topo__cta .ms { font-size:18px; }

/* ---------- Cabeçalho da página ---------- */

.doc-hero { background:var(--ink); color:var(--on-ink); padding:52px 0 62px; position:relative; }
.doc-hero::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:9px;
  background-image:var(--tick-light); opacity:.55;
}
.doc-hero__in { max-width:820px; }
.trilha { font-family:var(--mono); font-size:.79rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-ink-mute); }
.trilha a { color:var(--on-ink-mute); }
.trilha a:hover { color:var(--brass); }
.doc-hero h1 {
  margin:16px 0 0; font-size:2.7rem; line-height:1.08; letter-spacing:-0.032em;
  font-weight:700; color:#F3F3F1; text-wrap:balance;
}
.doc-hero__lead { margin:19px 0 0; font-size:1.13rem; line-height:1.62; color:var(--on-ink-mute); max-width:660px; }
.doc-hero__meta { margin-top:22px; font-family:var(--mono); font-size:.8rem; color:#6B7A75; display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Corpo ---------- */

.doc-corpo { padding:56px 0 76px; }
.doc-grid { display:grid; grid-template-columns:246px 1fr; gap:52px; align-items:start; }

.toc { position:sticky; top:28px; }
.toc__t {
  font-family:var(--mono); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding-bottom:11px; border-bottom:1px solid var(--line);
}
.toc__links { display:flex; flex-direction:column; gap:2px; margin-top:13px; }
.toc__links a {
  font-size:.9rem; line-height:1.4; color:var(--muted); padding:7px 11px;
  border-left:2px solid transparent; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.toc__links a:hover { color:var(--ink); background:var(--panel); border-left-color:var(--brass); }

.doc { max-width:760px; }
.doc h2 {
  margin:52px 0 0; font-size:1.62rem; line-height:1.22; letter-spacing:-0.024em;
  font-weight:700; color:var(--ink); scroll-margin-top:24px;
}
.doc h2:first-child { margin-top:0; }
.doc h3 {
  margin:34px 0 0; font-size:1.14rem; line-height:1.3; letter-spacing:-0.016em;
  font-weight:600; color:var(--ink); scroll-margin-top:24px;
}
.doc p { margin:15px 0 0; font-size:1.02rem; line-height:1.72; color:var(--text); }
.doc p.destaque {
  margin-top:22px; padding:19px 22px; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--brass); border-radius:0 var(--r) var(--r) 0;
  font-size:1.02rem; color:var(--text); box-shadow:var(--sh-sm);
}
.doc ul, .doc ol { margin:15px 0 0; padding-left:22px; }
.doc li { margin-top:9px; font-size:1.02rem; line-height:1.7; }
.doc li::marker { color:var(--brass-600); }
.doc strong { font-weight:600; color:var(--ink); }
.doc a { color:var(--petrol); font-weight:500; border-bottom:1px solid var(--line-2); }
.doc a:hover { color:var(--brass-600); border-bottom-color:currentColor; }
.doc hr { margin:44px 0 0; border:none; border-top:1px solid var(--line); }

/* Resposta curta e citável no topo de cada bloco — é o trecho que o buscador
   recorta no snippet e que o assistente de IA cita. */
.resposta {
  margin:20px 0 0; padding:20px 23px; background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--sh-sm);
}
.resposta__t {
  font-family:var(--mono); font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass-600); display:flex; align-items:center; gap:7px;
}
.resposta__t .ms { font-size:16px; }
.resposta p { margin-top:9px; font-size:1.02rem; line-height:1.65; }

/* Tabela */
.tabela-scroll { overflow-x:auto; margin-top:24px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); }
.doc table { width:100%; border-collapse:collapse; min-width:620px; }
.doc thead th {
  text-align:left; padding:14px 17px; font-size:.82rem; font-weight:600;
  font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  background:var(--panel-2); border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.doc tbody td { padding:14px 17px; font-size:.96rem; line-height:1.58; border-bottom:1px solid var(--line); vertical-align:top; }
.doc tbody tr:last-child td { border-bottom:none; }
.doc tbody th {
  text-align:left; padding:14px 17px; font-size:.96rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap;
}
.doc .sim { color:var(--brass-600); font-weight:600; }
.doc .nao { color:var(--muted); }

/* Glossário */
.termo { padding:24px 0; border-bottom:1px solid var(--line); scroll-margin-top:24px; }
.termo:last-child { border-bottom:none; }
.termo h2 { margin:0; font-size:1.31rem; }
.termo__sin { margin-top:6px; font-family:var(--mono); font-size:.82rem; color:var(--faint); }
.termo p { margin-top:11px; }

/* Passos numerados do guia */
.passo { margin-top:38px; padding-left:56px; position:relative; }
.passo__n {
  position:absolute; left:0; top:2px; width:38px; height:38px; border-radius:11px;
  background:var(--ink); color:var(--brass); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.98rem; font-weight:500;
}
.passo h2 { margin-top:0; }

/* CTA de fim de página */
.doc-cta {
  margin-top:56px; padding:38px 34px; border-radius:var(--r-xl); background:var(--ink);
  color:var(--on-ink); position:relative; overflow:hidden; box-shadow:var(--sh);
}
.doc-cta::before {
  content:''; position:absolute; left:34px; right:34px; top:16px; height:7px;
  background-image:var(--tick-light); opacity:.6;
}
.doc-cta h2 { margin:14px 0 0; color:#F3F3F1; font-size:1.5rem; line-height:1.22; letter-spacing:-0.022em; }
.doc-cta p { margin-top:12px; color:var(--on-ink-mute); font-size:1rem; line-height:1.62; }
.doc-cta__acoes { margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--r-sm);
  font-weight:600; font-size:.98rem; border:1px solid transparent; cursor:pointer;
}
.btn .ms { font-size:19px; }
.btn--primary { background:var(--brass); color:#1a1a1a; }
.btn--primary:hover { background:#B4F52E; }
.btn--ghost { border-color:rgba(255,255,255,.22); color:var(--on-ink); }
.btn--ghost:hover { border-color:var(--brass); color:var(--brass); }

/* ---------- Rodapé ---------- */

.doc-foot { border-top:1px solid var(--line); padding:30px 0 42px; }
.doc-foot__in {
  max-width:1200px; margin:0 auto; padding:0 28px; display:flex; gap:18px;
  align-items:center; justify-content:space-between; flex-wrap:wrap;
  font-size:.88rem; color:var(--faint);
}
.doc-foot__links { display:flex; gap:20px; flex-wrap:wrap; }
.doc-foot__links a { color:var(--muted); }
.doc-foot__links a:hover { color:var(--ink); }

/* ---------- WhatsApp flutuante ---------- */

.zap {
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brass); color:#1a1a1a;
  box-shadow:0 10px 26px -8px rgba(94,126,0,.65), 0 2px 6px rgba(30,30,30,.18);
  transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s;
}
.zap:hover { background:#B4F52E; transform:translateY(-3px); }
.zap svg { width:29px; height:29px; display:block; }

@media (max-width:720px) {
  .zap { right:16px; bottom:16px; width:52px; height:52px; }
  .zap svg { width:27px; height:27px; }
}
@media (prefers-reduced-motion:reduce) {
  .zap { transition:none; }
  .zap:hover { transform:none; }
}

/* ---------- 404 ---------- */

.erro { min-height:78vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 28px; }
.erro__cod { font-family:var(--mono); font-size:4.6rem; font-weight:500; color:var(--ink); line-height:1; letter-spacing:-0.04em; }
.erro h1 { margin:18px 0 0; font-size:1.85rem; letter-spacing:-0.028em; color:var(--ink); }
.erro p { margin:14px auto 0; max-width:480px; color:var(--muted); line-height:1.68; }
.erro__acoes { margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.erro .btn--ghost { border-color:var(--line-2); color:var(--petrol); }
.erro .btn--ghost:hover { border-color:var(--petrol); }

/* ---------- Responsivo ---------- */

@media (max-width:980px) {
  .doc-grid { grid-template-columns:1fr; gap:34px; }
  .toc { position:static; }
  .toc__links { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .toc__links a { border-left:none; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); }
}
@media (max-width:720px) {
  .wrap, .topo__in, .doc-foot__in { padding-left:20px; padding-right:20px; }
  .doc-hero { padding:38px 0 46px; }
  .doc-hero h1 { font-size:2rem; }
  .doc-corpo { padding:38px 0 56px; }
  .doc h2 { font-size:1.4rem; }
  .topo__links { display:none; }
  .doc-cta { padding:30px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}