/* ─── Blog — leitura longa ───────────────────────────────────────────────────
   Arquivo próprio, carregado só aqui. A landing (styles.css) é uma peça de
   rolagem com canvas e fundo escuro; artigo é o problema oposto: texto longo,
   lido inteiro, muitas vezes no celular e em rede ruim. Nada de framework,
   nada de fonte além da Archivo que a marca já usa.                           */

:root{
  --ink:#141d29;
  --ink-soft:#4a586b;
  --ink-faint:#7a8798;
  --line:#e3e9f1;
  --line-soft:#eef2f7;
  --bg:#ffffff;
  --bg-soft:#f6f9fc;
  --blue:#1a5fd0;
  --blue-deep:#12324f;
  --blue-soft:#e9f0fd;
  --leitura:70ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
}

/* ── barra de progresso ── */
.progresso{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:var(--blue);transition:width .08s linear;
}
@media (prefers-reduced-motion:reduce){.progresso{transition:none}}

/* ── topo ── */
.topo{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topo-in{
  max-width:1080px;margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.topo-marca{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-size:15px;font-variation-settings:'wdth' 100,'wght' 700;letter-spacing:-.012em;
}
.topo-marca span{color:var(--blue)}
.topo-nav{display:flex;align-items:center;gap:20px;font-size:14px}
.topo-nav a{color:var(--ink-soft);text-decoration:none}
.topo-nav a:hover{color:var(--blue)}
.topo-cta{
  background:var(--blue);color:#fff !important;padding:8px 15px;border-radius:8px;
  font-variation-settings:'wght' 620;font-size:13.5px;white-space:nowrap;
}
.topo-cta:hover{background:#164ea9}
@media (max-width:640px){ .topo-nav .some{display:none} }

/* ── índice do blog ── */
.capa{max-width:1080px;margin:0 auto;padding:56px 22px 14px}
.capa p.sobre{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);font-variation-settings:'wght' 700;margin:0 0 12px;
}
.capa h1{
  font-size:clamp(30px,5.6vw,46px);line-height:1.06;margin:0 0 16px;
  font-variation-settings:'wdth' 106,'wght' 700;letter-spacing:-.032em;
  max-width:20ch;text-wrap:balance;
}
.capa .lead{font-size:18px;color:var(--ink-soft);max-width:58ch;margin:0}

.filtros{
  max-width:1080px;margin:0 auto;padding:26px 22px 0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.filtro{
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
  padding:7px 15px;border-radius:999px;font:inherit;font-size:13.5px;
  cursor:pointer;font-family:inherit;
}
.filtro:hover{border-color:var(--blue);color:var(--blue)}
.filtro[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.filtro:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.lista{
  max-width:1080px;margin:0 auto;padding:26px 22px 90px;
  display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.post{
  display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:13px;padding:22px 24px;background:var(--bg);
}
.post:hover{border-color:var(--blue);background:var(--bg-soft)}
.post .tag{
  align-self:flex-start;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);font-variation-settings:'wght' 700;
  background:var(--blue-soft);padding:4px 9px;border-radius:5px;
}
.post h2{
  font-size:19.5px;line-height:1.26;margin:0;
  font-variation-settings:'wght' 650;letter-spacing:-.017em;text-wrap:balance;
}
.post p{margin:0;font-size:14.6px;color:var(--ink-soft);line-height:1.6}
.post .meta{
  margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--ink-faint);
  display:flex;gap:14px;
}
.vazio{grid-column:1/-1;color:var(--ink-faint);padding:26px 0}

/* ── artigo ── */
.artigo{max-width:var(--leitura);margin:0 auto;padding:0 22px 40px}
.artigo-head{padding:52px 0 30px;border-bottom:1px solid var(--line);margin-bottom:34px}
.migalha{font-size:13px;color:var(--ink-faint);margin:0 0 16px}
.migalha a{color:var(--ink-soft);text-decoration:none}
.migalha a:hover{color:var(--blue)}
.artigo h1{
  font-size:clamp(29px,5.2vw,43px);line-height:1.08;margin:0 0 18px;
  font-variation-settings:'wdth' 104,'wght' 700;letter-spacing:-.032em;text-wrap:balance;
}
.artigo .resumo{font-size:18.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px}
.artigo-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-faint)}
.artigo-meta .tag{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  font-variation-settings:'wght' 700;background:var(--blue-soft);
  padding:3px 9px;border-radius:5px;
}

.artigo h2{
  font-size:clamp(21px,3.6vw,26px);line-height:1.22;margin:44px 0 2px;
  font-variation-settings:'wdth' 103,'wght' 660;letter-spacing:-.024em;text-wrap:balance;
}
.artigo h3{
  font-size:18.5px;margin:30px 0 2px;
  font-variation-settings:'wght' 650;letter-spacing:-.014em;
}
.artigo p{margin:17px 0}
.artigo a{color:var(--blue)}
.artigo strong{font-variation-settings:'wght' 640}
.artigo ul,.artigo ol{margin:17px 0;padding-left:23px}
.artigo li{margin:9px 0}
.artigo li::marker{color:var(--ink-faint)}
.artigo blockquote{
  margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--blue);
  font-size:19px;line-height:1.55;color:var(--blue-deep);
  font-variation-settings:'wght' 550;
}
.artigo blockquote p{margin:0}

.destaque{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:20px 24px;margin:28px 0;
}
.destaque p{margin:0}
.destaque p+p{margin-top:11px}
.destaque .rot{
  display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);font-variation-settings:'wght' 700;margin-bottom:8px;
}

.tw{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:12px}
.artigo table{border-collapse:collapse;width:100%;font-size:15px}
.artigo th,.artigo td{
  text-align:left;padding:12px 17px;border-bottom:1px solid var(--line);vertical-align:top;
}
.artigo thead th{
  background:var(--bg-soft);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-variation-settings:'wght' 700;white-space:nowrap;
}
.artigo tbody tr:last-child td{border-bottom:0}

/* ── chamada para o produto ── */
.cta{
  margin:46px 0 10px;padding:30px 32px;border-radius:16px;
  background:linear-gradient(135deg,#1a5fd0,#12326f);color:#fff;
}
.cta h2{margin:0 0 10px;color:#fff;font-size:23px;line-height:1.2;
  font-variation-settings:'wght' 680;letter-spacing:-.022em}
.cta p{margin:0 0 20px;color:#d5e3fb;font-size:15.5px;line-height:1.6}
.cta a{
  display:inline-block;background:#fff;color:var(--blue) !important;
  padding:12px 22px;border-radius:9px;text-decoration:none;
  font-variation-settings:'wght' 650;font-size:15px;
}
.cta a:hover{background:#eaf1ff}

/* ── compartilhar ── */
.share{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line);
}
.share span{font-size:13.5px;color:var(--ink-faint);margin-right:2px}
.share button,.share a{
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
  padding:7px 14px;border-radius:8px;font:inherit;font-size:13.5px;
  cursor:pointer;text-decoration:none;font-family:inherit;
}
.share button:hover,.share a:hover{border-color:var(--blue);color:var(--blue)}
.share button:focus-visible,.share a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ── leia também ── */
.relacionados{max-width:var(--leitura);margin:0 auto;padding:34px 22px 80px}
.relacionados h2{
  font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  font-variation-settings:'wght' 700;margin:0 0 16px;
}
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.relacionados li{border-bottom:1px solid var(--line-soft)}
.relacionados li:last-child{border-bottom:0}
.relacionados a{
  display:block;padding:15px 0;text-decoration:none;color:var(--ink);
  font-size:16.5px;line-height:1.4;font-variation-settings:'wght' 600;
  letter-spacing:-.012em;
}
.relacionados a:hover{color:var(--blue)}

/* ── rodapé ── */
.rodape{border-top:1px solid var(--line);background:var(--bg-soft)}
.rodape-in{
  max-width:1080px;margin:0 auto;padding:34px 22px;
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font-size:13.5px;color:var(--ink-faint);
}
.rodape-in a{color:var(--ink-soft);text-decoration:none}
.rodape-in a:hover{color:var(--blue)}
.rodape-links{display:flex;flex-wrap:wrap;gap:6px 20px}

@media print{
  .topo,.progresso,.share,.cta,.relacionados,.rodape{display:none}
  body{font-size:11pt}
  .artigo{max-width:none;padding:0}
}