/* ==========================================================================
   BUILDING FOUNDER VAULT — styles.css
   Design system copiado de foundervault.com.br (styles.css, secao 37).
   Tinta #0C0A08 (uma so: texto, botao, rodape) | branco | cartao #F4F2F0 |
   faixa #ECE9E3. Geist 400/500 e Geist Mono 400, locais. Zero requisicao
   externa. Zero JS obrigatorio.
   Escala: 12 · 14 · 16 · 18 · 24 · 32 · 48 · 64 (40 so no h1 mobile).
   Tracking preso ao tamanho. Raio 12 (cartao) e 6 (controle).
   Superficie off-white so onde separa (faixas de topo, assinatura); o resto
   e branco com divisorias de 1px. Diferenciacao por categoria = glifo, nao cor.
   Ordem: 1) fontes 2) reset 3) tokens 4) base 5) a11y 6) movimento
          7) botoes 8) header 9) glifos 10) capas 11) home 12) grades
          13) artigo 14) secoes (calculadoras, glossario, marcas)
          15) formularios 16) faixas 17) rodape
   ========================================================================== */

/* 1. FONTES ------------------------------------------------------------- */
@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/geist-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/geist-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/geist-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. RESET -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

svg {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* 3. TOKENS ------------------------------------------------------------- */
/* Contraste (WCAG 2.x, luminancia relativa, conferido em tools/verify.mjs):
     #0C0A08 sobre #FFFFFF ........................ 19.6:1
     #0C0A08 sobre #F4F2F0 ........................ 17.6:1
     #0C0A08 sobre #ECE9E3 ........................ 16.4:1
     rgba(12,10,8,.6) sobre #FFFFFF = #6D6C6B ....  5.2:1
     rgba(12,10,8,.6) sobre #F4F2F0 = #696766 ....  4.9:1
     rgba(12,10,8,.6) sobre #ECE9E3 = #666360 ....  4.7:1
     #FFFFFF sobre #0C0A08 ........................ 19.6:1
     rgba(255,255,255,.62) sobre #0C0A08 = #A2A1A1  7.6:1
   Bordas rgba(33,33,33,.1) sao decorativas. */
:root {
  --white: #ffffff;
  --ink: #0c0a08;
  --ink-60: rgba(12, 10, 8, 0.6);
  --black: #0c0a08;
  --on-black-60: rgba(255, 255, 255, 0.62);
  --card: #f4f2f0;
  --sand: #ece9e3;
  --line: rgba(33, 33, 33, 0.1);
  --line-2: rgba(33, 33, 33, 0.2);
  --tint-2: rgba(33, 33, 33, 0.05);
  --tint-3: rgba(33, 33, 33, 0.08);

  /* Acento de marca (decisao do Ezequiel): dourado, usado com moderacao —
     gradiente do hero, icones proprios, detalhe de destaque. O preto
     continua a base; isto NAO vira paleta colorida na pagina inteira. */
  --accent: #caa24a;
  --accent-2: #8a6a1f;
  --on-accent: #0c0a08;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;

  --container: 1312px;
  --measure: 720px;                 /* largura de leitura: entre 656 e 755 */
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));

  --radius: 12px;
  --radius-sm: 6px;

  --space-section: 64px;

  --ls-64: -0.02em;
  --ls-48: -0.02em;
  --ls-32: -0.015em;
  --ls-24: -0.01em;
  --ls-body: 0;
  --ls-mono: 0.02em;
  --ls-caps: 0.04em;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 150ms;
  --transition: var(--duration) var(--ease);

  --tap: 44px;
  --header-h: 62px;
}

@media (min-width: 768px) {
  :root {
    --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (max-width: 767px) {
  :root {
    --space-section: 48px;
  }
}

/* 4. BASE --------------------------------------------------------------- */
html {
  color-scheme: light;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  min-height: 100vh;
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  font-size: 40px;
  line-height: 42px;
  letter-spacing: var(--ls-48);
}

@media (min-width: 768px) {
  h1 {
    font-size: 64px;
    line-height: 66px;
    letter-spacing: var(--ls-64);
  }
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), opacity var(--transition);
}

::selection {
  background: var(--ink);
  color: var(--white);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
}

.muted {
  color: var(--ink-60);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-60);
}

.link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}

.link:hover {
  color: var(--ink);
}

.link:hover svg {
  transform: translateX(2px);
}

/* 5. ACESSIBILIDADE ----------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--transition);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.site-footer :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--white);
}

/* 6. MOVIMENTO ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* 7. BOTOES — 16px, padding 16px, raio 6, altura 44 ---------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink);
}

.btn-dark {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.btn-dark:hover {
  opacity: 0.86;
}

.btn-white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-white:hover {
  opacity: 0.9;
}

.btn-ghost {
  background-color: var(--tint-2);
}

.btn-ghost:hover {
  background-color: var(--tint-3);
}

.btn-sm {
  font-size: 14px;
  line-height: 20px;
}

.btn-mark {
  width: 14px;
  height: 14px;
  flex: none;
}

.btn:focus-visible,
.link:focus-visible,
.nav-links a:focus-visible {
  box-shadow: 0 0 0 6px rgba(12, 10, 8, 0.12);
}

/* 8. HEADER — barra branca fixa (62px), igual ao site -------------------- */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: var(--tap);
  white-space: nowrap;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
}

.nav-links {
  display: none;
  align-items: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  background-color: var(--tint-2);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-actions .btn-ghost,
.header-actions .btn-dark {
  display: none;
}

/* Menu mobile: <details>, funciona sem JS */
.menu {
  position: relative;
}

.menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu summary:hover {
  background-color: var(--tint-2);
}

.menu summary svg {
  width: 20px;
  height: 20px;
}

.menu .icon-close {
  display: none;
}

.menu[open] .icon-open {
  display: none;
}

.menu[open] .icon-close {
  display: block;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -16px rgba(12, 10, 8, 0.25);
}

.menu-panel a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 24px;
}

.menu-panel a:hover {
  background-color: var(--tint-2);
}

.menu-panel li + li {
  margin-top: 2px;
}

.menu-panel .menu-sep {
  height: 1px;
  margin: 8px 4px;
  background-color: var(--line);
}

/* Menu "Mais" (secoes fora das categorias): <details>, funciona sem JS */
.nav-more .more {
  position: relative;
}

.nav-more summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: 0 8px 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.nav-more summary svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.nav-more summary:hover,
.nav-more .more[open] summary {
  background-color: var(--tint-2);
}

.nav-more .more[open] summary svg {
  transform: rotate(180deg);
}

.more-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 220px;
  padding: 8px;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -16px rgba(12, 10, 8, 0.25);
}

.more-panel a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
}

.more-panel a:hover {
  background-color: var(--tint-2);
}

.more-panel li + li {
  margin-top: 2px;
}

@media (min-width: 640px) {
  .header-actions .btn-dark {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .menu {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-links a {
    padding: 0 9px;
  }

  .nav-more summary {
    padding: 0 6px 0 9px;
  }
}

@media (min-width: 1200px) {
  .header-actions .btn-ghost {
    display: inline-flex;
  }
}

/* 9. GLIFOS - um desenho por categoria e secao, no lugar de cor ----------- */
/* Glifos por categoria e secao (mesmos desenhos de static/assets/glyphs/*.svg).
   Tres tracos para tres tamanhos: --glyph (1.5, capas >= 96px), --glyph-m (3, 32-64px),
   --glyph-s (6, chips de 14-24px). --glyph-ink so existe onde ha glifo: sem ele, o
   pseudo-elemento fica transparente e nada aparece. */

[href="/lucro"],
[href^="/lucro/"],
[data-cat="/lucro"],
html:has(link[rel="canonical"][href$="/lucro"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 20H74'/%3E%3Cpath d='M22 31H64'/%3E%3Cpath d='M22 42H54'/%3E%3Cpath d='M22 53H44'/%3E%3Cpath d='M22 64H74'/%3E%3Ccircle cx='26' cy='75' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 20H74'/%3E%3Cpath d='M22 31H64'/%3E%3Cpath d='M22 42H54'/%3E%3Cpath d='M22 53H44'/%3E%3Cpath d='M22 64H74'/%3E%3Ccircle cx='26' cy='75' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 20H74'/%3E%3Cpath d='M22 31H64'/%3E%3Cpath d='M22 42H54'/%3E%3Cpath d='M22 53H44'/%3E%3Cpath d='M22 64H74'/%3E%3Ccircle cx='26' cy='75' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/midia"],
[href^="/midia/"],
[data-cat="/midia"],
html:has(link[rel="canonical"][href$="/midia"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 52a16 16 0 0 1 16 16'/%3E%3Cpath d='M28 38a30 30 0 0 1 30 30'/%3E%3Cpath d='M28 24a44 44 0 0 1 44 44' stroke-dasharray='3 4'/%3E%3Ccircle cx='28' cy='68' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 52a16 16 0 0 1 16 16'/%3E%3Cpath d='M28 38a30 30 0 0 1 30 30'/%3E%3Cpath d='M28 24a44 44 0 0 1 44 44' stroke-dasharray='3 4'/%3E%3Ccircle cx='28' cy='68' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 52a16 16 0 0 1 16 16'/%3E%3Cpath d='M28 38a30 30 0 0 1 30 30'/%3E%3Cpath d='M28 24a44 44 0 0 1 44 44' stroke-dasharray='3 4'/%3E%3Ccircle cx='28' cy='68' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/caixa"],
[href^="/caixa/"],
[data-cat="/caixa"],
html:has(link[rel="canonical"][href$="/caixa"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 66H84'/%3E%3Cpath d='M30 26v26'/%3E%3Cpath d='M24 46l6 6 6-6'/%3E%3Cpath d='M66 52V26'/%3E%3Cpath d='M60 32l6-6 6 6'/%3E%3Ccircle cx='48' cy='66' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 66H84'/%3E%3Cpath d='M30 26v26'/%3E%3Cpath d='M24 46l6 6 6-6'/%3E%3Cpath d='M66 52V26'/%3E%3Cpath d='M60 32l6-6 6 6'/%3E%3Ccircle cx='48' cy='66' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 66H84'/%3E%3Cpath d='M30 26v26'/%3E%3Cpath d='M24 46l6 6 6-6'/%3E%3Cpath d='M66 52V26'/%3E%3Cpath d='M60 32l6-6 6 6'/%3E%3Ccircle cx='48' cy='66' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/operacao"],
[href^="/operacao/"],
[data-cat="/operacao"],
html:has(link[rel="canonical"][href$="/operacao"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='4'/%3E%3Ccircle cx='24' cy='48' r='4'/%3E%3Ccircle cx='24' cy='72' r='4.5' fill='currentColor' stroke='none'/%3E%3Cpath d='M24 28v16'/%3E%3Cpath d='M24 52v16'/%3E%3Cpath d='M38 24h36'/%3E%3Cpath d='M38 48h28'/%3E%3Cpath d='M38 72h20'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='4'/%3E%3Ccircle cx='24' cy='48' r='4'/%3E%3Ccircle cx='24' cy='72' r='4.5' fill='currentColor' stroke='none'/%3E%3Cpath d='M24 28v16'/%3E%3Cpath d='M24 52v16'/%3E%3Cpath d='M38 24h36'/%3E%3Cpath d='M38 48h28'/%3E%3Cpath d='M38 72h20'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='4'/%3E%3Ccircle cx='24' cy='48' r='4'/%3E%3Ccircle cx='24' cy='72' r='4.5' fill='currentColor' stroke='none'/%3E%3Cpath d='M24 28v16'/%3E%3Cpath d='M24 52v16'/%3E%3Cpath d='M38 24h36'/%3E%3Cpath d='M38 48h28'/%3E%3Cpath d='M38 72h20'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/bastidores"],
[href^="/bastidores/"],
[data-cat="/bastidores"],
html:has(link[rel="canonical"][href$="/bastidores"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 22H86' stroke-dasharray='3 4'/%3E%3Cpath d='M22 10V86' stroke-dasharray='3 4'/%3E%3Crect x='30' y='30' width='44' height='44' rx='6'/%3E%3Ccircle cx='52' cy='52' r='10'/%3E%3Cpath d='M52 42v5'/%3E%3Cpath d='M62 52h-5'/%3E%3Ccircle cx='52' cy='52' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='22' cy='22' r='3' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 22H86' stroke-dasharray='3 4'/%3E%3Cpath d='M22 10V86' stroke-dasharray='3 4'/%3E%3Crect x='30' y='30' width='44' height='44' rx='6'/%3E%3Ccircle cx='52' cy='52' r='10'/%3E%3Cpath d='M52 42v5'/%3E%3Cpath d='M62 52h-5'/%3E%3Ccircle cx='52' cy='52' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='22' cy='22' r='3' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 22H86' stroke-dasharray='3 4'/%3E%3Cpath d='M22 10V86' stroke-dasharray='3 4'/%3E%3Crect x='30' y='30' width='44' height='44' rx='6'/%3E%3Ccircle cx='52' cy='52' r='10'/%3E%3Cpath d='M52 42v5'/%3E%3Cpath d='M62 52h-5'/%3E%3Ccircle cx='52' cy='52' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='22' cy='22' r='3' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/historias"],
[href^="/historias/"],
[data-cat="/historias"],
html:has(link[rel="canonical"][href$="/historias"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 76H82'/%3E%3Cpath d='M14 62l18-24 16 12 18-26 16 10'/%3E%3Cpath d='M66 30v46' stroke-dasharray='2 4'/%3E%3Ccircle cx='66' cy='24' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 76H82'/%3E%3Cpath d='M14 62l18-24 16 12 18-26 16 10'/%3E%3Cpath d='M66 30v46' stroke-dasharray='2 4'/%3E%3Ccircle cx='66' cy='24' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 76H82'/%3E%3Cpath d='M14 62l18-24 16 12 18-26 16 10'/%3E%3Cpath d='M66 30v46' stroke-dasharray='2 4'/%3E%3Ccircle cx='66' cy='24' r='3.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/calculadoras"],
[href^="/calculadoras/"],
[data-cat="/calculadoras"],
html:has(link[rel="canonical"][href$="/calculadoras"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='28' y='14' width='40' height='68' rx='6'/%3E%3Cpath d='M36 26h24'/%3E%3Ccircle cx='38' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='48' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='58' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='38' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='48' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='58' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Cpath d='M38 68h20'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='28' y='14' width='40' height='68' rx='6'/%3E%3Cpath d='M36 26h24'/%3E%3Ccircle cx='38' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='48' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='58' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='38' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='48' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='58' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Cpath d='M38 68h20'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='28' y='14' width='40' height='68' rx='6'/%3E%3Cpath d='M36 26h24'/%3E%3Ccircle cx='38' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='48' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='58' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='38' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='48' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Ccircle cx='58' cy='56' r='2.5' fill='currentColor' stroke='none'/%3E%3Cpath d='M38 68h20'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/glossario"],
[href^="/glossario/"],
[data-cat="/glossario"],
html:has(link[rel="canonical"][href$="/glossario"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 30C40 24 28 22 16 26v44c12-4 24-2 32 4'/%3E%3Cpath d='M48 30c8-6 20-8 32-4v44c-12-4-24-2-32 4'/%3E%3Cpath d='M48 30v44'/%3E%3Cpath d='M26 40h12'/%3E%3Cpath d='M26 48h10'/%3E%3Ccircle cx='64' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 30C40 24 28 22 16 26v44c12-4 24-2 32 4'/%3E%3Cpath d='M48 30c8-6 20-8 32-4v44c-12-4-24-2-32 4'/%3E%3Cpath d='M48 30v44'/%3E%3Cpath d='M26 40h12'/%3E%3Cpath d='M26 48h10'/%3E%3Ccircle cx='64' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 30C40 24 28 22 16 26v44c12-4 24-2 32 4'/%3E%3Cpath d='M48 30c8-6 20-8 32-4v44c-12-4-24-2-32 4'/%3E%3Cpath d='M48 30v44'/%3E%3Cpath d='M26 40h12'/%3E%3Cpath d='M26 48h10'/%3E%3Ccircle cx='64' cy='44' r='2.5' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

[href="/marcas"],
[href^="/marcas/"],
[data-cat="/marcas"],
html:has(link[rel="canonical"][href$="/marcas"]) .band {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18h28l32 32-28 28-32-32z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M42 58l16-16'/%3E%3C/svg%3E");
  --glyph-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18h28l32 32-28 28-32-32z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M42 58l16-16'/%3E%3C/svg%3E");
  --glyph-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18h28l32 32-28 28-32-32z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M42 58l16-16'/%3E%3C/svg%3E");
  --glyph-ink: currentColor;
  --glyph-display: inline-block;
}

/* Onde o glifo aparece: chip da categoria (linha de meta e crumbs), cartao de
   categoria, capa e faixa de pilar. Sempre mascara sobre currentColor; sem
   --glyph-display (categoria sem glifo) o pseudo-elemento nao existe. */
.glyph-mark,
.meta a[href^="/"]::before,
.crumbs a[href^="/"]:not([href="/"])::before,
.cat-card::before,
.cover::after {
  display: var(--glyph-display, none);
  background-color: var(--glyph-ink, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.glyph-mark {
  width: 20px;
  height: 20px;
  flex: none;
  -webkit-mask-image: var(--glyph-s);
  mask-image: var(--glyph-s);
}

/* Chip: glifo pequeno antes do nome da categoria */
.meta a[href^="/"]::before,
.crumbs a[href^="/"]:not([href="/"])::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 6px;
  -webkit-mask-image: var(--glyph-s);
  mask-image: var(--glyph-s);
}

/* Glifo grande na faixa de topo (pilar, secao): so com espaco sobrando */
.glyph-hero,
.head-phrase {
  display: none;
}

/* Topo do artigo: a frase-numero (cover_text) a direita do titulo, em 48px,
   com o glifo da categoria pequeno acima. Vazia, nao aparece. */
@media (min-width: 1376px) {
  .head-phrase {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    width: 360px;
    transform: translateY(-50%);
    font-weight: 500;
    font-size: 48px;
    line-height: 50px;
    letter-spacing: var(--ls-48);
    text-wrap: balance;
  }

  .head-phrase:empty {
    display: none;
  }

  .head-phrase::before {
    content: "";
    display: var(--glyph-display, none);
    width: 32px;
    height: 32px;
    background-color: var(--glyph-ink, transparent);
    -webkit-mask: var(--glyph-m) center / contain no-repeat;
    mask: var(--glyph-m) center / contain no-repeat;
  }
}

@media (min-width: 1200px) {
  .glyph-hero {
    display: var(--glyph-display, none);
    position: absolute;
    right: var(--gutter);
    top: 50%;
    width: 168px;
    height: 168px;
    transform: translateY(-50%);
    -webkit-mask-image: var(--glyph);
    mask-image: var(--glyph);
  }
}

/* 10. CAPAS - SVG inline vindo do build, 16:9, contido. O conteudo e a
   frase-numero do artigo (cover_text, tipografia grande) ou, sem ela, o
   titulo; o simbolo da marca so entra pequeno no canto, como assinatura, e o
   glifo da categoria no canto oposto. O fundo (off-white ou preto, alternado
   por posicao) e a malha vem do CSS, nao do SVG, para preencher o 16:9.
   Slot para foto real: <img> dentro de .cover substitui o SVG. ------------ */
.cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--card);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  color: var(--ink);
}

.cover svg {
  width: 100%;
  height: 100%;
}

.cover svg > rect {
  display: none;
}

.cover svg > text {
  fill: currentColor;
}

/* Linha de meta dentro do SVG (categoria · leitura · dominio): redundante
   nos cartoes, que ja tem a linha de meta embaixo. */
.post-card .cover .cv-meta,
.featured .cover .cv-meta,
.article-cover .cover .cv-meta {
  display: none;
}

/* Simbolo da marca: assinatura pequena no canto superior esquerdo */
.cover svg > g {
  fill: currentColor;
  opacity: 0.7;
}

/* Glifo da categoria: canto superior direito */
.cover::after {
  content: "";
  position: absolute;
  right: 5.5%;
  top: 10%;
  width: 9%;
  height: 16%;
  -webkit-mask-image: var(--glyph-m);
  mask-image: var(--glyph-m);
}

/* Foto real (campo image no front matter): quando existir, substitui a capa
   tipografica; o build coloca <img class="cover-photo"> dentro de .cover. */
.cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover:has(> img) svg,
.cover:has(> img)::after {
  display: none;
}

.featured .cover,
.grid > li:nth-child(even) .cover {
  background-color: var(--black);
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.2px);
  color: var(--white);
}

/* 11. HOME -------------------------------------------------------------- */
/* Hero sem foto (ref. Linear/Ramp/Vercel): eyebrow + h1 + paragrafo + linha
   de atalhos (chips), sozinho, largura de leitura. O bloco bento com a
   frase-numero (cover_text) dos artigos em destaque desce para uma faixa
   propria logo abaixo, em largura total — nunca colado no header, nunca
   dividindo coluna com o texto. Nunca foto de banco de imagem nem
   ilustracao generica; so tipografia, malha pontilhada e as capas SVG que ja
   existem no resto do site. */
.hero {
  padding-top: calc(var(--space-section) * 2);
  padding-bottom: calc(var(--space-section) * 1.5);
}

@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--space-section) + 16px);
  }
}

/* Hero com foto de fundo (ref. Nubank): foto em preto e branco, veu escuro
   em degrade da esquerda para a direita para o texto branco ficar legivel
   e manter o sistema monocromatico. Foto CC0, trocavel por foto real de
   founder com autorizacao (ver content/founders). */
.hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
}

.hero-photo-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) contrast(1.05);
}

.hero-photo-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 8% 105%, rgba(202, 162, 74, 0.35), transparent 62%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.35) 0%, rgba(12, 10, 8, 0.78) 62%, rgba(12, 10, 8, 0.9) 100%),
    linear-gradient(100deg, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.85) 42%, rgba(12, 10, 8, 0.55) 72%, rgba(12, 10, 8, 0.3) 100%);
}

.hero-photo .subscribe-fields .input {
  background-color: rgba(244, 242, 240, 0.08);
  border: 1px solid rgba(244, 242, 240, 0.28);
}

.hero-photo .subscribe-fields input {
  color: var(--white);
}

.hero-photo .subscribe-fields input::placeholder {
  color: rgba(244, 242, 240, 0.5);
}

.hero-photo .subscribe-fields .btn-dark {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}

.hero-photo .subscribe-fields .btn-dark:hover {
  background-color: var(--accent-2);
  border-color: var(--accent-2);
}

.hero-copy-solo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 720px;
}

.hero-copy-solo .btn {
  padding: 0 24px;
  min-height: 48px;
  font-weight: 500;
}

.hero-cta-note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.hero-copy-solo .subscribe-form {
  width: 100%;
  max-width: 460px;
}

.hero-bento-section {
  padding-top: calc(var(--space-section) * 1.5);
  padding-bottom: calc(var(--space-section) * 1.5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.hero h1 {
  margin-top: 8px;
  max-width: 14ch;
}

.hero .sub {
  max-width: 520px;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-60);
}

.hero-photo .eyebrow {
  color: var(--accent);
}

.hero-photo .sub,
.hero-photo .hero-cta-note {
  color: rgba(244, 242, 240, 0.75);
}

/* Linha de atalhos: pill com borda, icone 16px, label, contagem em mono */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  transition: border-color var(--transition), background-color var(--transition);
}

.chip:hover {
  border-color: var(--ink);
  background-color: var(--tint-2);
}

.chip svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-60);
}

.chip .mono {
  color: var(--ink-60);
}

/* Bloco de destaque, faixa propria abaixo do hero: 3 celulas do MESMO
   tamanho, no padrao compacto dos atalhos (min-height 220px, sem bloco
   "grande" esticado). So a frase-numero do artigo, sem simbolo/foto. */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 767px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bento-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 260px;
  padding: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  background-color: var(--black);
  transition: opacity var(--transition);
}

.bento-cell:hover {
  opacity: 0.92;
}

.bento-cell.bento-light {
  color: var(--ink);
  background-color: var(--card);
}

/* O SVG do numero ocupa o espaco restante da celula em fluxo normal (sem
   forcar a altura do bloco): flex:1, com min-height:0 para poder encolher.
   A proporcao do viewBox (definida no Python, uma por celula) e o que
   determina como a frase-numero aparece; o CSS so contem. */
.bento-num {
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bento-num svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bento-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  /* Altura fixa (2 linhas de descricao), para o numero acima ter sempre o
     mesmo espaco nas 3 celulas — descricao mais longa nao pode encolher
     o bento-num das outras. */
  flex: 0 0 76px;
}

.bento-text > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-text .kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.6;
}

.bento-text span:last-child {
  font-size: 16px;
  line-height: 22px;
}

@media (max-width: 639px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento-big {
    flex-direction: column;
  }

  .bento-big .bento-num {
    width: 100%;
  }
}

/* Faixas de secao alternadas (branco / off-white), sem cor: separam por
   fundo, nao por selo colorido (ref. DTC Newsletter, paleta propria). */
.home-band {
  border-top: 1px solid var(--line);
}

.home-band.band-alt {
  background-color: var(--card);
}

/* Cartao pequeno e denso: selo 64px (cover_text) + data em mono + titulo e
   resumo cortados em 2 linhas. Grade de 3 colunas, gap pequeno, so borda. */
.dense-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .dense-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .dense-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dense-card a {
  display: flex;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.dense-card a:hover {
  border-color: var(--line-2);
}

.dense-badge {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.dense-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Selo com o logo real da marca (uso editorial, so identificacao do case;
   nunca implica parceria). Fundo do sistema, logo em preto/cinza com cor
   no hover, igual ao tratamento do diretorio de marcas. */
.dense-badge-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card);
}

.dense-badge-logo.is-dark {
  background-color: var(--black);
}

.dense-badge-logo img {
  max-width: 40px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.85;
}

.dense-badge-logo.is-dark img {
  filter: grayscale(1) contrast(1.1) invert(1);
}

.dense-card:hover .dense-badge-logo img {
  filter: none;
  opacity: 1;
}

.dense-card:hover .dense-badge-logo.is-dark img {
  filter: invert(1);
}

.dense-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dense-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

.dense-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: var(--ls-body);
}

.dense-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

/* Atalhos: grade bento com marcas, founders, calculadora, profissionais,
   indice e assinatura. Alturas ~220px, so um bloco cresce (marcas). */
.atalhos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.atalho {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--transition);
}

a.atalho:hover {
  border-color: var(--line-2);
}

.atalho-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.atalho-head h3 {
  font-size: 16px;
  line-height: 22px;
}

.atalho-brands {
  grid-column: span 2;
}

.atalho-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.atalho-logos img {
  height: 22px;
  width: auto;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.85;
}

.atalho-founders,
.atalho-calc,
.atalho-pros,
.atalho-indice,
.atalho-subscribe {
  background-color: var(--white);
}

.atalho-founders {
  color: var(--white);
  background-color: var(--black);
  border-color: var(--black);
}

.founders-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.founder-avatar a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.16);
  filter: grayscale(1);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
}

.avatar-name {
  font-size: 13px;
}

.avatar-brand {
  display: none;
}

.founder-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  width: 100%;
}

.founder-cta span {
  font-size: 12px;
  line-height: 16px;
  color: var(--on-black-60);
}

.calc-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
}

.calc-preview-row,
.calc-preview-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--card);
}

.calc-preview-out {
  background-color: var(--tint-3);
  font-weight: 500;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.pill {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
}

.indice-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  list-style: none;
  padding: 0;
}

.indice-preview li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.indice-preview li:first-child {
  border-top: 0;
  padding-top: 0;
}

.atalho-subscribe p {
  color: var(--ink-60);
  font-size: 14px;
}

.atalho-subscribe .link {
  margin-top: auto;
  min-height: 0;
}

@media (max-width: 959px) {
  .atalhos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atalho-brands {
    grid-column: span 2;
  }
}

@media (max-width: 639px) {
  .atalhos-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .atalho-brands {
    grid-column: span 1;
  }
}

/* Cabecalho de secao: eyebrow + titulo + acao a direita */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 40px;
}

.section-head h2 {
  margin-top: 8px;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: var(--ls-32);
}

/* Ultimos artigos na home: linhas com miniatura a esquerda e texto a direita */
[aria-labelledby="latest-title"] .grid {
  display: block;
  border-top: 1px solid var(--line);
}

[aria-labelledby="latest-title"] .post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}

[aria-labelledby="latest-title"] .post-card .cover {
  margin-bottom: 8px;
}

[aria-labelledby="latest-title"] .post-card h3 {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: var(--ls-body);
}

[aria-labelledby="latest-title"] .post-card p {
  display: none;
}

[aria-labelledby="latest-title"] .post-card h3 a {
  padding-block: 9px;
  margin-block: -9px;
}

@media (min-width: 640px) {
  [aria-labelledby="latest-title"] .post-card {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 32px;
    row-gap: 8px;
    padding-block: 28px;
  }

  [aria-labelledby="latest-title"] .post-card .cover {
    grid-row: 1 / -1;
    align-self: start;
    margin-bottom: 0;
  }

  [aria-labelledby="latest-title"] .post-card .cover::after {
    -webkit-mask-image: var(--glyph-s);
    mask-image: var(--glyph-s);
  }

  [aria-labelledby="latest-title"] .post-card h3 {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: var(--ls-24);
  }

  [aria-labelledby="latest-title"] .post-card p {
    display: block;
    max-width: 656px;
  }
}

@media (min-width: 1024px) {
  [aria-labelledby="latest-title"] .post-card {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 40px;
  }
}

/* Faixa das categorias e das ferramentas: celulas brancas com divisorias e glifo */
.cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
  .cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  [aria-labelledby="cats-title"] .cats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--transition);
}

a.cat-card:hover {
  border-bottom-color: var(--ink);
}

.cat-card::before {
  content: "";
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  -webkit-mask-image: var(--glyph-m);
  mask-image: var(--glyph-m);
}

.cat-card h3 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: var(--ls-body);
}

.cat-card p {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.cat-card .mono {
  margin-top: auto;
  padding-top: 12px;
  color: var(--ink-60);
}

/* Receba o proximo texto: bloco com peso. No artigo, quadro com malha; na home,
   faixa inteira off-white com titulo grande. */
.subscribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

.subscribe h2 {
  margin-top: 8px;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
}

.subscribe-copy p:last-child {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.subscribe-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subscribe-fields[hidden] {
  display: none;
}

.subscribe-fields .input {
  flex: 1 1 220px;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
}

.subscribe-fields .btn {
  flex: none;
  min-height: 52px;
  padding: 0 24px;
}

.subscribe-msg {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

.subscribe-msg:empty {
  display: none;
}

@media (min-width: 768px) {
  .subscribe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding: 32px;
  }

  .subscribe h2 {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: var(--ls-32);
  }
}

.subscribe-section {
  background-color: var(--card);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

.subscribe-section .subscribe {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.subscribe-section .subscribe-copy p:last-child {
  font-size: 16px;
  line-height: 24px;
}

@media (min-width: 768px) {
  .subscribe-section .subscribe {
    gap: 48px;
  }

  .subscribe-section .subscribe h2 {
    font-size: 48px;
    line-height: 50px;
    letter-spacing: var(--ls-48);
  }
}

/* 12. GRADES E CARTOES - categoria, autor, leia tambem ------------------- */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 24px;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.post-card .cover {
  transition: opacity var(--transition);
}

.post-card:hover .cover {
  opacity: 0.92;
}

.post-card h3 {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
}

/* Titulo do cartao: link em bloco com alvo de 44px sem mexer no layout */
.post-card h3 a {
  display: block;
  padding-block: 8px;
  margin-block: -8px;
}

.post-card h3 a:hover {
  color: var(--ink-60);
}

.post-card p {
  color: var(--ink-60);
}

/* Linha de meta: categoria · data · leitura */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

/* Links em linha de meta: ocupam 24px no layout, mas o alvo de toque
   e 44px (padding compensado por margem negativa). */
.meta a,
.crumbs a,
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 6px;
  margin: -10px -6px;
}

.meta a {
  color: var(--ink);
}

.meta a:hover {
  color: var(--ink-60);
}

.meta .dot::before {
  content: "·";
}

/* 13. ARTIGO ------------------------------------------------------------ */
/* Cabecalho sobre a faixa off-white com malha (a capa tipografica da pagina):
   crumbs com o glifo da categoria, titulo, lede, meta em mono, compartilhar.
   O glifo grande entra a direita quando sobra espaco (>= 1200px). */
.post-head-inner {
  position: relative;
}

.article-head {
  max-width: 880px;
  padding-block: 40px var(--space-section);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

.crumbs a {
  color: var(--ink-60);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
}

.article-head .eyebrow {
  margin-top: 24px;
}

.article-head h1 {
  margin-top: 20px;
}

.article-head .lede {
  max-width: var(--measure);
  margin-top: 20px;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-60);
}

.article-head .meta {
  margin-top: 28px;
}

.head-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
}

.head-foot .meta {
  margin-top: 0;
}

/* Copiar link e compartilhar nativo: os botoes so aparecem quando o JS
   confirma que o navegador tem clipboard / navigator.share. */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share[hidden],
.share [hidden] {
  display: none;
}

.share .btn {
  background-color: var(--white);
  border-color: var(--line-2);
}

.share .btn:hover {
  border-color: var(--ink);
  background-color: var(--white);
}

.share .btn svg {
  width: 16px;
  height: 16px;
}

/* Diagrama proprio do artigo: quadro branco com malha e borda, com respiro.
   Duas variantes do mesmo desenho (720 e 360 de largura); o CSS mostra uma. */
.article-diagram,
.article-cover {
  max-width: 880px;
  margin-inline: auto;
  padding-top: 48px;
}

.diagram-frame {
  padding: 16px;
  background-color: var(--white);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.diagram-frame svg {
  display: block;
  width: 100%;
  height: auto;
}

.diagram-frame .dg-narrow {
  display: none;
}

@media (max-width: 639px) {
  .diagram-frame .dg-wide {
    display: none;
  }

  .diagram-frame .dg-narrow {
    display: block;
  }
}

@media (min-width: 640px) {
  .diagram-frame {
    padding: 40px;
  }
}

.article-diagram figcaption {
  max-width: var(--measure);
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

.article-body {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: 48px var(--space-section);
}

/* Em 30 segundos: tres frases com a resposta direta, com peso de abertura */
.in30 {
  padding-left: 24px;
  border-left: 2px solid var(--ink);
}

.in30 p + p {
  margin-top: 10px;
  font-size: 20px;
  line-height: 30px;
}

@media (min-width: 768px) {
  .in30 p + p {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: var(--ls-24);
  }
}

.in30 + .toc,
.in30 + .prose {
  margin-top: 40px;
}

/* Sumario automatico (h2): lista com divisorias, sem caixa */
.toc {
  padding-block: 20px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.toc-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.toc ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  min-height: var(--tap);
  padding-block: 10px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 24px;
}

.toc li:first-child a {
  border-top: 0;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

.toc a:hover {
  color: var(--ink-60);
}

.toc + .prose {
  margin-top: 40px;
}

/* Corpo: 18/28, h2 32, h3 24 */
.prose {
  font-size: 18px;
  line-height: 28px;
}

.prose > * + * {
  margin-top: 20px;
}

.prose h2 {
  margin-top: 48px;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: var(--ls-32);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.prose h3 {
  margin-top: 36px;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 16px;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}

.prose a:hover {
  text-decoration-color: var(--ink);
}

.prose strong {
  font-weight: 500;
}

.prose ul,
.prose ol {
  padding-left: 24px;
}

.prose li + li {
  margin-top: 8px;
}

.prose blockquote {
  padding-left: 20px;
  border-left: 2px solid var(--ink);
  color: var(--ink-60);
}

.prose hr {
  height: 1px;
  margin-block: 40px;
  border: 0;
  background-color: var(--line);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: var(--ls-mono);
  background-color: var(--tint-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.prose pre {
  overflow-x: auto;
  padding: 16px 20px;
  background-color: var(--card);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 20px;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.prose figure {
  margin-block: 32px;
}

.prose figure svg,
.prose figure img {
  width: 100%;
  border-radius: var(--radius);
}

.prose figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

/* Tabela: rola na horizontal dentro do proprio quadro; a pagina nao rola. */
.prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.prose table {
  width: 100%;
  min-width: 640px;
  font-size: 14px;
  line-height: 20px;
}

.prose th {
  background-color: var(--card);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.prose tr:last-child td {
  border-bottom: 0;
}

.prose th,
.prose td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  font-weight: 400;
}

/* Diagrama simples em SVG inline dentro do artigo */
.prose .diagram {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

/* Termo do glossario: a definicao (primeiro paragrafo) em destaque */
.prose-term > p:first-child {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: var(--ls-24);
}

@media (max-width: 767px) {
  .prose-term > p:first-child {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: var(--ls-body);
  }
}

.article-body .subscribe {
  margin-top: 48px;
}

/* Autor, ao fim do artigo */
.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.author-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  background-color: var(--black);
  color: var(--white);
  border-radius: var(--radius);
}

.author-mark svg {
  width: 20px;
  height: 20px;
}

.author-box .name {
  font-weight: 500;
}

.author-box p + p {
  color: var(--ink-60);
}

.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 4px;
}

/* Leia tambem: miniaturas (capa + meta + titulo), sem o resumo */
.related {
  padding-block: var(--space-section);
  border-top: 1px solid var(--line);
}

.related .post-card p {
  display: none;
}

/* Texto de pilar da categoria: coluna de leitura alinhada a esquerda */
.pillar-section {
  padding-bottom: 0;
}

.pillar {
  max-width: var(--measure);
}

.pillar > :first-child {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: var(--ls-24);
}

@media (max-width: 767px) {
  .pillar > :first-child {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: var(--ls-body);
  }
}

/* Pagina de autor */
.author-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--measure);
}

.author-page .author-mark {
  width: 64px;
  height: 64px;
}

.author-page .author-mark svg {
  width: 26px;
  height: 26px;
}

.author-page .bio {
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-60);
}

/* Pagina 404 e paginas simples */
.page {
  max-width: 60ch;
  padding-block: var(--space-section) 96px;
}

.page h1 {
  margin-top: 12px;
}

.page p {
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-60);
}

.page .link {
  margin-top: 24px;
}

/* 14. SECOES - calculadoras, glossario, marcas --------------------------- */
/* Calculadoras: dois cartoes brancos com borda e o glifo */
.cats:has(> li > a[href^="/calculadoras/"]) {
  gap: 16px;
  border-top: 0;
}

@media (min-width: 640px) {
  .cats:has(> li > a[href^="/calculadoras/"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cat-card[href^="/calculadoras/"] {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

a.cat-card[href^="/calculadoras/"]:hover {
  border-color: var(--ink);
}

/* Glossario como dicionario: lista com divisorias, termo em 24px, definicao
   legivel, letra-indice na primeira entrada de cada letra e regua A-Z. */
html:has(link[rel="canonical"][href$="/glossario"]) .cats {
  display: block;
}

html:has(link[rel="canonical"][href$="/glossario"]) .cats > li {
  border-bottom: 1px solid var(--line);
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px 16px;
  padding: 20px 0;
  border-bottom: 0;
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card::before {
  content: none;
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card::after {
  grid-area: 1 / 1 / span 2 / 2;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
  color: var(--ink-60);
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card h3 {
  grid-column: 2;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
  transition: color var(--transition);
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card:hover h3 {
  color: var(--ink-60);
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card p {
  grid-column: 2;
  max-width: var(--measure);
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}

html:has(link[rel="canonical"][href$="/glossario"]) .cat-card .mono {
  display: none;
}

@media (min-width: 640px) {
  html:has(link[rel="canonical"][href$="/glossario"]) .cat-card {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 24px 0;
  }

  html:has(link[rel="canonical"][href$="/glossario"]) .cat-card::after {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: var(--ls-32);
  }
}

/* Regua A-Z (montada pelo JS de section.html so quando ha termos do glossario) */
.az {
  margin: -8px 0 24px;
}

.az ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.az a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
}

.az a:hover {
  border-color: var(--ink);
}

/* Biblioteca de marcas: busca em destaque, filtros com contagem e fichas com
   area de logo. O nome em Geist Mono e o fallback; quando o build colocar
   <img> em static/assets/logos/<slug>.svg|png, o logo entra em cinza e ganha
   cor no hover. */
.brand-tools {
  display: grid;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.brand-search {
  max-width: 720px;
}

.brand-search label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.brand-search .input {
  height: 52px;
  padding: 0 16px;
}

.brand-search .input svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-60);
}

.brand-search input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.brand-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.brand-count {
  color: var(--ink-60);
}

.brand-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.brand-filters[hidden] {
  display: none;
}

.fgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.flabel {
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.fchip .mono {
  color: var(--ink-60);
}

.fchip:hover {
  border-color: var(--ink);
}

.fchip[aria-pressed="true"] {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.fchip[aria-pressed="true"] .mono {
  color: var(--on-black-60);
}

.brands {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.brand-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 120px auto auto 1fr auto;
  min-width: 0;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}

.brand-card:has(> .brand-logo) {
  grid-template-rows: 120px auto auto auto 1fr auto;
}

.brand-card:hover {
  border-color: var(--line-2);
}

.brand-card[hidden] {
  display: none;
}

/* Area de logo: malha pontilhada na primeira linha da grade */
.brand-card::before {
  content: "";
  grid-area: 1 / 1;
  border-bottom: 1px solid var(--line);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

/* Logo (static/assets/logos/<slug>.svg|png, emitido pelo build): em cinza, cor no hover */
.brand-card > .brand-logo {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  height: 28px;
  width: auto;
  max-width: calc(100% - 48px);
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.85;
  transition: filter var(--transition), opacity var(--transition);
}

.brand-card:hover > .brand-logo {
  filter: none;
  opacity: 1;
}

.brand-head {
  display: contents;
}

/* Sem logo: o nome em Geist Mono ocupa a area */
.brand-card:not(:has(> .brand-logo)) .brand-head h3 {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* Com logo: o nome vira a primeira linha de meta, em mono */
.brand-card:has(> .brand-logo) .brand-head h3 {
  padding: 14px 20px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.brand-head h3 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  margin-block: -10px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
}

.brand-head h3 a:hover {
  text-decoration-color: var(--ink);
}

.brand-head .mono {
  padding: 4px 20px 0;
  color: var(--ink-60);
}

.brand-card:not(:has(> .brand-logo)) .brand-head .mono {
  padding-top: 14px;
}

.brand-line {
  padding: 8px 20px 0;
  font-size: 16px;
  line-height: 24px;
}

.brand-facts {
  display: block;
  margin: 16px 20px 0;
  border-top: 1px solid var(--line);
}

.brand-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
}

.brand-facts dt {
  flex: none;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.brand-facts dd {
  min-width: 0;
  text-align: right;
}

.brand-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: auto;
  padding: 12px 20px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

.brand-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 10px 6px;
  margin: -10px -6px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}

.brand-links a:hover {
  text-decoration-color: var(--ink);
}

.brand-links .dot::before {
  content: "·";
}

.brand-empty {
  margin-top: 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-60);
}

.brand-empty[hidden] {
  display: none;
}

/* Ficha da marca (pagina propria): o mesmo cabecalho da area de logo */
html:has(link[rel="canonical"][href*="/marcas/"]) .article-head h1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-top: 20px;
  padding: 24px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-sheet {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
}

.brand-sheet > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.brand-sheet > div:first-child {
  border-top: 0;
}

@media (min-width: 640px) {
  .brand-sheet > div {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
  }
}

.brand-sheet dt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.brand-sheet dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.brand-sheet a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}

.brand-sheet a:hover {
  text-decoration-color: var(--ink);
}

/* 15. FORMULARIOS - campo, calculadora ------------------------------------ */
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
}

.field .hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-60);
}

.input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--tap);
  padding: 0 12px;
  background-color: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(12, 10, 8, 0.12);
}

.input .unit {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
  color: var(--ink-60);
}

.input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: var(--ls-mono);
}

/* Calculadora: quadro branco com malha, JS puro, resultado em dl */
.calc {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

@media (min-width: 640px) {
  .calc {
    padding: 28px;
  }
}

.calc-title {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
}

.calc-note {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.calc-form {
  margin-top: 20px;
}

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
}

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.calc-actions .btn-ghost {
  background-color: var(--white);
  border-color: var(--line-2);
}

.calc-nojs {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-60);
}

.calc-out {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.calc-out dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .calc-out dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
  }
}

.calc-out dt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-60);
}

.calc-out dd {
  margin-top: 6px;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--ls-24);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.calc-out dd small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  font-weight: 400;
  color: var(--ink-60);
}

.calc-read {
  margin-top: 20px;
  font-size: 16px;
  line-height: 24px;
}

.calc-read:empty {
  display: none;
}

.calc + .toc,
.calc + .prose {
  margin-top: 40px;
}

/* 16. FAIXAS ------------------------------------------------------------ */
/* Faixa off-white com malha pontilhada: topo de categoria, secao e artigo */
.band {
  background-color: var(--card);
  background-image: radial-gradient(rgba(12, 10, 8, 0.14) 1px, transparent 1.2px);
  background-size: 16px 16px;
}

.band-inner {
  position: relative;
  padding-block: var(--space-section);
}

.band-copy {
  max-width: 880px;
}

.band nav + .eyebrow {
  margin-top: 24px;
}

.band h1 {
  margin-top: 12px;
}

.band .sub {
  max-width: 656px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-60);
}

/* CTA unico: pedir acesso antecipado. Preto, texto branco, botao branco. */
.cta-band {
  background-color: var(--black);
  color: var(--white);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding-block: var(--space-section);
}

.cta-copy {
  max-width: 656px;
}

.cta-copy .eyebrow {
  color: var(--on-black-60);
}

.cta-copy h2 {
  margin-top: 12px;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: var(--ls-32);
}

.cta-copy p {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  color: var(--on-black-60);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.cta-actions .link {
  color: var(--on-black-60);
}

.cta-actions .link:hover {
  color: var(--white);
}

@media (min-width: 768px) {
  .cta-copy h2 {
    font-size: 48px;
    line-height: 50px;
    letter-spacing: var(--ls-48);
  }
}

/* 17. RODAPE - preto, links 14px a 62% ----------------------------------- */
.site-footer {
  background-color: var(--black);
  color: var(--white);
  padding-block: 64px 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.footer-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-brand {
    grid-column: span 2;
  }
}

.footer-brand p {
  max-width: 300px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-black-60);
}

.footer-head {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 6px;
}

.site-footer nav ul {
  display: flex;
  flex-direction: column;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  font-size: 14px;
  line-height: 20px;
  color: var(--on-black-60);
}

.site-footer nav a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-mono);
  color: var(--on-black-60);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* Glossario, gerado: letra-indice na primeira entrada de cada letra (a lista
   vem em ordem alfabetica). */

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/a"]):not(li:has(> a[href^="/glossario/a"]) ~ li) .cat-card::after {
  content: "A";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/b"]):not(li:has(> a[href^="/glossario/b"]) ~ li) .cat-card::after {
  content: "B";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/c"]):not(li:has(> a[href^="/glossario/c"]) ~ li) .cat-card::after {
  content: "C";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/d"]):not(li:has(> a[href^="/glossario/d"]) ~ li) .cat-card::after {
  content: "D";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/e"]):not(li:has(> a[href^="/glossario/e"]) ~ li) .cat-card::after {
  content: "E";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/f"]):not(li:has(> a[href^="/glossario/f"]) ~ li) .cat-card::after {
  content: "F";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/g"]):not(li:has(> a[href^="/glossario/g"]) ~ li) .cat-card::after {
  content: "G";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/h"]):not(li:has(> a[href^="/glossario/h"]) ~ li) .cat-card::after {
  content: "H";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/i"]):not(li:has(> a[href^="/glossario/i"]) ~ li) .cat-card::after {
  content: "I";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/j"]):not(li:has(> a[href^="/glossario/j"]) ~ li) .cat-card::after {
  content: "J";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/k"]):not(li:has(> a[href^="/glossario/k"]) ~ li) .cat-card::after {
  content: "K";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/l"]):not(li:has(> a[href^="/glossario/l"]) ~ li) .cat-card::after {
  content: "L";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/m"]):not(li:has(> a[href^="/glossario/m"]) ~ li) .cat-card::after {
  content: "M";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/n"]):not(li:has(> a[href^="/glossario/n"]) ~ li) .cat-card::after {
  content: "N";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/o"]):not(li:has(> a[href^="/glossario/o"]) ~ li) .cat-card::after {
  content: "O";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/p"]):not(li:has(> a[href^="/glossario/p"]) ~ li) .cat-card::after {
  content: "P";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/q"]):not(li:has(> a[href^="/glossario/q"]) ~ li) .cat-card::after {
  content: "Q";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/r"]):not(li:has(> a[href^="/glossario/r"]) ~ li) .cat-card::after {
  content: "R";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/s"]):not(li:has(> a[href^="/glossario/s"]) ~ li) .cat-card::after {
  content: "S";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/t"]):not(li:has(> a[href^="/glossario/t"]) ~ li) .cat-card::after {
  content: "T";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/u"]):not(li:has(> a[href^="/glossario/u"]) ~ li) .cat-card::after {
  content: "U";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/v"]):not(li:has(> a[href^="/glossario/v"]) ~ li) .cat-card::after {
  content: "V";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/w"]):not(li:has(> a[href^="/glossario/w"]) ~ li) .cat-card::after {
  content: "W";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/x"]):not(li:has(> a[href^="/glossario/x"]) ~ li) .cat-card::after {
  content: "X";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/y"]):not(li:has(> a[href^="/glossario/y"]) ~ li) .cat-card::after {
  content: "Y";
}

html:has(link[rel="canonical"][href$="/glossario"]) li:has(> a[href^="/glossario/z"]):not(li:has(> a[href^="/glossario/z"]) ~ li) .cat-card::after {
  content: "Z";
}