/* Blog ViaSign: complementa css/site.css do site (tokens, cabeçalho, rodapé e botões vêm de lá). */
/* Tema claro: o blog é a única seção clara do site (decisão do Cláudio); redefine os tokens do site.css. */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef1f5;
  --surface-hover: #eef4fd;
  --accent: #0764df;
  --text: #0d1117;
  --text-2: #2c3644;
  --text-3: #4b5767;
  --muted: #6b7684;
  --muted-2: #5f6b7a;
  --line-08: rgba(13, 17, 23, .08);
  --line-10: rgba(13, 17, 23, .1);
  --line-12: rgba(13, 17, 23, .12);
  --line-14: rgba(13, 17, 23, .14);
  --line-20: rgba(13, 17, 23, .2);
  --line-25: rgba(13, 17, 23, .25);
  --line-35: rgba(13, 17, 23, .35);
  --line-40: rgba(13, 17, 23, .4);
  --focus: #0764df;
  --blue: #0551b6;
}
.btn-primary { color: #fff; }
.site-header { mix-blend-mode: normal; background: rgba(246, 247, 249, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-08); }
.site-header .logo img { filter: brightness(0); }
.site-nav a { color: var(--text-2); }
.site-nav a:hover { color: var(--accent); background: rgba(13, 17, 23, .05); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--accent); }
.site-nav .nav-cta { border-color: var(--line-35); color: var(--text); }
.site-footer .logo img { filter: brightness(0); opacity: .75; }
.site-footer .link-white { color: var(--text); text-decoration-color: var(--line-40); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }
main.wrap { padding-top: 120px; }
.eyebrow { display: block; margin: 0 0 12px; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* índice */
.blog-hero { padding: 40px 0 48px; max-width: 820px; }
.blog-hero h1 { font: 600 clamp(44px, 6vw, 88px)/.95 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.lede { margin-top: 24px; max-width: 56ch; font: 400 clamp(17px, 1.4vw, 20px)/1.6 var(--sans); color: var(--text-2); }
.sec { margin: 72px 0 24px; font: 700 clamp(28px, 3vw, 40px)/1 var(--sans); letter-spacing: -.03em; }
.feature { display: block; padding: 36px; background: var(--surface-2); border: 1px solid var(--line-10); color: var(--text); transition: border-color .2s; }
.feature > span { display: block; }
.feature .card-t { font: 700 clamp(26px, 2.6vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; max-width: 26ch; }
.feature .card-d { margin-top: 14px; max-width: 70ch; }
.feature .more { margin-top: 24px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--surface-1); border: 1px solid var(--line-10); color: var(--text); transition: background-color .2s; }
.card:hover { background: var(--surface-hover); border-color: rgba(7, 100, 223, .45); color: var(--text); }
.feature:hover { border-color: rgba(7, 100, 223, .45); color: var(--text); }
.card-t { font: 700 21px/1.25 var(--sans); letter-spacing: -.01em; }
.card-d { font: 400 15px/1.6 var(--sans); color: var(--text-3); }

/* artigo */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.crumbs a { color: var(--text-3); }
.post { max-width: 760px; }
.post-h { padding: 32px 0 8px; }
.post-h h1 { font: 600 clamp(34px, 4.2vw, 56px)/1.06 var(--sans); letter-spacing: -.028em; text-wrap: balance; }
.meta { margin-top: 20px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.toc { margin: 36px 0 8px; padding: 22px 26px; border: 1px solid var(--line-10); background: var(--surface-1); }
.toc ol { margin: 0; padding-left: 20px; font: 400 15px/1.5 var(--sans); }
.toc li { margin: 6px 0; color: var(--muted-2); }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--accent); }
.body { font: 400 18px/1.75 var(--sans); color: var(--text-2); }
.body p { margin: 18px 0; }
.body h2 { margin: 56px 0 8px; font: 700 clamp(26px, 2.6vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--text); scroll-margin-top: 96px; }
.body h3 { margin: 32px 0 4px; font: 700 21px/1.3 var(--sans); color: var(--text); scroll-margin-top: 96px; }
.body strong { font-weight: 500; color: var(--text); }
.body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.body a:hover { color: var(--blue-hover); }
.body ul, .body ol { margin: 18px 0; padding-left: 22px; }
.body li { margin: 8px 0; }
.tbl { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line-10); }
table { border-collapse: collapse; width: 100%; font: 400 15px/1.45 var(--sans); }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-08); vertical-align: top; }
thead th { background: var(--surface-2); color: var(--text-3); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-weight: 500; color: var(--text); }
td { color: var(--text-2); font-variant-numeric: tabular-nums; }
tbody tr:last-child > * { border-bottom: 0; }

.cta { margin: 64px 0; padding: 40px; border: 1px solid rgba(7, 100, 223, .3); background: radial-gradient(120% 140% at 0% 0%, rgba(7, 100, 223, .08), transparent 60%), var(--surface-2); }
.cta-t { font: 700 clamp(24px, 2.4vw, 32px)/1.15 var(--sans); letter-spacing: -.03em; max-width: 24ch; }
.cta p:not(.eyebrow):not(.cta-t) { margin: 14px 0 28px; max-width: 56ch; font: 400 17px/1.6 var(--sans); color: var(--text-2); }
.faq h2 { margin-bottom: 8px; font: 700 28px/1.1 var(--sans); letter-spacing: -.03em; }
.faq details { border-bottom: 1px solid var(--line-10); padding: 18px 0; }
.faq summary { cursor: pointer; font: 500 17px/1.4 var(--sans); }
.faq details p { margin-top: 10px; font: 400 16px/1.65 var(--sans); color: var(--text-3); }
.rel h2 { margin: 80px 0 24px; font: 700 28px/1.1 var(--sans); letter-spacing: -.03em; }
main.wrap { padding-bottom: 96px; }

@media (max-width: 860px) {
  main.wrap { padding-top: 96px; }
  .feature, .cta { padding: 24px; }
  .card { padding: 22px; }
  .body { font-size: 17px; }
}

/* v3: cantos e foco iguais aos do site */
.feature, .card, .cta, .toc, .tbl { border-radius: 16px; }
.feature, .card, .cta { overflow: hidden; }
.nav-cta .cta-short { display: none; }
@media (max-width: 480px) {
  .nav-cta .cta-full { display: none; }
  .nav-cta .cta-short { display: inline; }
}