@font-face{font-family:'Manrope';font-style:normal;font-weight:500 700;font-display:swap;src:url('/lp-vide-assets/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 700;font-display:swap;src:url('/lp-vide-assets/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ============================================================
   VIDE PARTNERS · PAGINAS DE CONTEUDO (blog, autor, glossario)
   Assinado pelo WEBCHIEF. Brief: saida/rodadas/design-brief.md

   Tom: editorial/magazine com a paleta luxury/refined da home.
   Tokens, fontes e vocabulario de card sao COPIA do `index.html` da
   home (bloco :root e secoes .head/.case-card/footer). Nenhuma cor
   nova, nenhuma fonte nova.

   O `_headers` marca /lp-vide-assets/* como immutable por 1 ano:
   este arquivo e servido com ?v= (constante VERSAO_ASSETS em
   functions/_lib/conteudo/layout.js). Trocou o CSS, sobe a versao.
   ============================================================ */

/* ---- fontes da marca (brand kit v2, mesmos arquivos da home) ---- */
@font-face{font-family:'PP Neue Montreal';src:url('/lp-vide-assets/fonts/PPNeueMontreal-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('/lp-vide-assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('/lp-vide-assets/fonts/PPNeueMontreal-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/lp-vide-assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/lp-vide-assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#0A0A0A;
  --charcoal:#151515;
  --graphite:#1C1C1E;
  --stone:#5C5C61;
  --mist:#9C9CA2;
  --bone:#F1F1EF;
  --paper-2:#F9F9F8;
  --paper:#FFFFFF;
  --accent:#8F7226;
  --accent-soft:#D4B375;
  --error:#8B1F1F;

  --line:rgba(10,10,10,.10);
  --line-dark:rgba(255,255,255,.13);

  --gutter:1.5rem;
  --page:1120px;
  --content:min(100% - var(--gutter) * 2,var(--page));

  --font-display:'PP Neue Montreal',system-ui,-apple-system,sans-serif;
  --font-body:'PP Neue Montreal',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-numero:'Manrope',system-ui,-apple-system,sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --r1:6px; --r2:12px; --r3:18px; --r4:28px; --r-full:999px;

  --head:64px;
  --prosa:68ch;   /* medida de leitura, unico valor fora da escala base-4 */
}

/* No celular o cabecalho tem duas linhas: a ancora precisa parar mais abaixo,
   senao o H2 clicado no Indice some atras da barra. */
@media(max-width:899px){:root{--head:104px}}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  overflow-x:clip;
  scroll-padding-top:calc(var(--head) + var(--s3));
  color-scheme:light;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);background:var(--paper);color:var(--graphite);
  -webkit-font-smoothing:antialiased;font-weight:400;line-height:1.6;overflow-x:clip;
  text-rendering:optimizeLegibility;
}

.container{width:var(--content);margin-inline:auto}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
a{color:inherit}
img{max-width:100%}

/* pular pro conteudo: primeiro tab da pagina (LIC-009) */
.pula{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--ink);color:var(--paper);padding:.75rem 1.1rem;border-radius:var(--r1);
  font-size:.9rem;text-decoration:none;transition:top .15s;
}
.pula:focus{top:.75rem}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
h1{font-weight:500;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;letter-spacing:-.035em}
h2{font-weight:500;font-size:clamp(1.45rem,2.8vw,1.9rem);line-height:1.14;letter-spacing:-.028em}
h3{font-weight:500;font-size:1.15rem;line-height:1.3;letter-spacing:-.01em}
h4{font-weight:500;font-size:1rem;line-height:1.35;letter-spacing:-.005em}
p{color:var(--stone)}

.rotulo{
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}

/* ---------- botoes (iguais aos da home) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:500;font-size:.95rem;letter-spacing:.01em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--r2);
  padding:.9rem 1.75rem;cursor:pointer;text-decoration:none;min-height:44px;
  transition:background-color .15s,border-color .15s,color .15s;
}
@media(hover:hover){.btn:hover{background:var(--paper);color:var(--ink)}}
.btn-claro{background:var(--paper);border-color:var(--paper);color:var(--ink)}
@media(hover:hover){.btn-claro:hover{background:transparent;color:var(--paper)}}

/* ---------- cabecalho (mesmo da home, com as rotas absolutas) ---------- */
.head{
  position:sticky;top:0;z-index:100;padding:1rem 0;
  background:rgba(250,250,247,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);flex-wrap:wrap}
.head-logo{display:flex;align-items:center;text-decoration:none}
.head-logo img{height:24px;width:auto;display:block}
.head-nav{display:flex;gap:1.5rem;align-items:center}
/* E1: no celular o cabecalho vira duas linhas. Blog e Glossario descem pra
   segunda; as ancoras da home ficam so no desktop. Sem menu sanduiche: com dois
   itens, esconder atras de um botao custa mais do que mostrar. */
@media(max-width:899px){
  .head{padding:.75rem 0}
  .head-nav{order:3;flex-basis:100%;gap:1.25rem;padding-top:.6rem;border-top:1px solid rgba(0,0,0,.06)}
  .head-nav .so-desktop{display:none}
  .head-nav a{
    font-size:.82rem;letter-spacing:.01em;
    display:inline-flex;align-items:center;min-height:32px;
  }
}
.head-nav a{
  font-family:var(--font-body);font-size:.9rem;color:var(--graphite);
  text-decoration:none;transition:color .15s;
}
@media(hover:hover){.head-nav a:hover{color:var(--accent)}}
.head-nav a[aria-current="page"]{color:var(--accent)}
.head-cta{
  display:inline-flex;align-items:center;min-height:38px;
  padding:.55rem 1.1rem;background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--font-body);font-size:.85rem;font-weight:500;
  border-radius:var(--r2);transition:background-color .15s;white-space:nowrap;
}
@media(hover:hover){.head-cta:hover{background:var(--accent)}}

/* faixa de RASCUNHO: so aparece em preview, e precisa ser impossivel de ignorar */
.faixa-rascunho{
  background:var(--error);color:var(--paper);text-align:center;
  padding:.6rem var(--gutter);
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- trilha (breadcrumb) ---------- */
.trilha{padding-top:var(--s3)}
.trilha ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;list-style:none}
.trilha li{
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stone);
}
.trilha li+li::before{content:'/';color:var(--mist)}
.trilha a{text-decoration:none;transition:color .15s}
@media(hover:hover){.trilha a:hover{color:var(--accent)}}
.trilha [aria-current="page"]{color:var(--graphite);max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- chip de categoria ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
  border:1px solid rgba(143,114,38,.35);border-radius:var(--r-full);
  padding:.32rem .7rem;background:rgba(143,114,38,.05);
  transition:background-color .15s,border-color .15s;
}
@media(hover:hover){.chip:hover{background:rgba(143,114,38,.12);border-color:var(--accent)}}

/* ============================================================
   ARTIGO
   ============================================================ */
.artigo{padding-bottom:var(--s5)}
/* C2: a trilha entra na mesma coluna do titulo. Alinhada a borda da pagina
   enquanto o resto e centralizado, ela lia como erro de alinhamento. */
.artigo>.trilha{max-width:var(--prosa);margin-inline:auto}
.artigo-topo{max-width:var(--prosa);margin-inline:auto;padding-top:var(--s3)}
.artigo-topo .chip{margin-bottom:var(--s3)}
.artigo-topo h1{margin-bottom:var(--s2)}
.artigo-sub{
  font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.45;letter-spacing:-.01em;
  color:var(--stone);text-wrap:pretty;max-width:52ch;
}

/* linha do autor + datas */
.assinatura{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
}
.assinatura-quem{display:flex;align-items:center;gap:.7rem;min-width:0}
.retrato{
  position:relative;flex-shrink:0;border-radius:50%;overflow:hidden;
  background:var(--bone);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:500;color:var(--graphite);
}
.retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.retrato--40{width:40px;height:40px;font-size:.66rem}
.retrato--72{width:72px;height:72px;font-size:.95rem}
.retrato--120{width:120px;height:120px;font-size:1.5rem}
/* A1/B1: o nome precisa de 24px de alvo (WCAG 2.5.8) mesmo sendo texto de 15px */
.assinatura-nome{
  display:inline-block;padding-block:3px;
  font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none;
}
@media(hover:hover){.assinatura-nome:hover{color:var(--accent)}}
/* C3: cargo e nome sao camadas diferentes, em linhas diferentes */
.assinatura-cargo{display:block;font-size:.82rem;color:var(--stone);line-height:1.4}
/* A1: as datas QUEBRAM em varias linhas no 375. O separador vira `gap`, nao
   pseudo-elemento no fluxo: com `::before` + `nowrap` a linha inteira virava um
   bloco indivisivel e saia pela direita da tela. */
.assinatura-datas{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .9rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--stone);line-height:1.7;min-width:0;
}
.assinatura-datas span{white-space:nowrap}
/* E3: no celular as datas ocupam 3 linhas. Menor e mais fechado, para nao
   competirem com o nome do autor logo acima. A informacao continua inteira. */
@media(max-width:559px){.assinatura-datas{font-size:.64rem;line-height:1.5;gap:.1rem .7rem}}
@media(min-width:560px){
  .assinatura-datas{gap:.15rem .55rem}
  .assinatura-datas span+span::before{content:'·';margin-right:.5rem;color:var(--mist)}
}

/* capa 16:9. C1: 900px, nao a pagina inteira. Maior que a coluna de leitura
   (continua sendo destaque) sem abrir um segundo layout ao lado do texto. */
.capa{
  margin-top:var(--s4);margin-inline:auto;width:min(100%,900px);
  border-radius:var(--r3);overflow:hidden;background:var(--bone);border:1px solid var(--line);
}
.capa img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.capa figcaption{
  padding:.7rem var(--s2);font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.05em;color:var(--stone);background:var(--paper-2);
}

/* corpo em coluna de leitura */
.artigo-corpo{max-width:var(--prosa);margin-inline:auto;margin-top:var(--s4)}

/* Resposta rapida: o bloco que responde a pergunta do titulo em 2-3 frases */
.resposta-rapida{
  background:var(--bone);border-left:3px solid var(--accent);border-radius:0 var(--r2) var(--r2) 0;
  padding:var(--s3);margin-bottom:var(--s4);
}
.resposta-rapida .rotulo{display:block;margin-bottom:.6rem}
.resposta-rapida p{color:var(--graphite);font-size:1.0625rem;line-height:1.62;text-wrap:pretty}

/* Indice dos H2 */
.indice{
  border:1px solid var(--line);border-radius:var(--r3);padding:var(--s3);
  margin-bottom:var(--s4);background:var(--paper-2);
}
.indice .rotulo{display:block;margin-bottom:.8rem}
.indice ol{list-style:none;counter-reset:idx;display:flex;flex-direction:column;gap:.15rem}
.indice li{counter-increment:idx}
.indice a{
  display:flex;gap:.7rem;align-items:baseline;padding:.45rem 0;min-height:36px;
  font-size:.98rem;line-height:1.45;color:var(--graphite);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .15s;
}
.indice li:not(:last-child) a{border-bottom-color:var(--line)}
.indice a::before{
  content:counter(idx,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.68rem;color:var(--accent);flex-shrink:0;
}
@media(hover:hover){.indice a:hover{color:var(--accent)}}

/* ---------- prosa ---------- */
.prosa{font-size:1.0625rem;line-height:1.75;color:var(--graphite)}
@media(min-width:768px){.prosa{font-size:1.125rem}}
.prosa>*+*{margin-top:var(--s3)}
.prosa p{color:var(--graphite);text-wrap:pretty}
.prosa h2{margin-top:var(--s5);scroll-margin-top:calc(var(--head) + var(--s3))}
.prosa h3{margin-top:var(--s4)}
.prosa h2+*,.prosa h3+*{margin-top:var(--s2)}
.prosa a{color:var(--graphite);text-decoration:underline;text-decoration-color:var(--accent-soft);text-underline-offset:3px;transition:color .15s}
@media(hover:hover){.prosa a:hover{color:var(--accent);text-decoration-color:var(--accent)}}
.prosa strong{font-weight:500;color:var(--ink)}
.prosa ul,.prosa ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.prosa li{padding-left:.2rem}
.prosa li::marker{color:var(--accent)}
.prosa blockquote{
  border-left:3px solid var(--accent-soft);padding:.2rem 0 .2rem var(--s3);
  font-size:1.1em;line-height:1.55;color:var(--ink);
}
.prosa blockquote p{color:inherit}
.prosa img{
  display:block;width:100%;height:auto;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--bone);
}
.prosa figure{margin-block:var(--s4)}
.prosa figcaption{
  margin-top:.6rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;
  line-height:1.6;color:var(--stone);
}
.prosa hr{border:none;border-top:1px solid var(--line);margin-block:var(--s4)}
.prosa code{
  font-family:var(--font-mono);font-size:.86em;background:var(--bone);
  padding:.14em .38em;border-radius:var(--r1);color:var(--ink);
}
.prosa pre{
  background:var(--ink);color:var(--paper);border-radius:var(--r2);
  padding:var(--s3);overflow-x:auto;font-size:.86rem;line-height:1.6;
}
.prosa pre code{background:none;padding:0;color:inherit;font-size:1em}
.prosa table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.prosa th,.prosa td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
.prosa th{background:var(--bone);font-weight:500;color:var(--ink);white-space:nowrap}

/* elemento largo numa coluna estreita (LIC-021) */
@media(min-width:900px){
  .prosa figure.larga,.prosa img.larga{width:min(900px,92vw);margin-left:50%;transform:translateX(-50%)}
}

/* ---------- perguntas frequentes do artigo ---------- */
.faq{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s4)}
.faq h2{margin-bottom:var(--s3)}
.faq-item{border-bottom:1px solid var(--line);padding-block:var(--s3)}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-item h3{margin-bottom:.5rem}
.faq-item p{color:var(--graphite);line-height:1.7}

/* ---------- CTA fixo ---------- */
.cta{
  margin-top:var(--s5);background:var(--ink);color:var(--paper);
  border-radius:var(--r4);padding:var(--s4) var(--s3);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
}
@media(min-width:768px){.cta{padding:var(--s5) var(--s4)}}
.cta h2{color:var(--paper);max-width:22ch}
.cta p{color:var(--mist);max-width:50ch;text-wrap:pretty}
.cta .btn-claro{margin-top:var(--s1)}

/* ---------- caixa do autor ---------- */
.caixa-autor{
  margin-top:var(--s5);background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
}
@media(min-width:640px){.caixa-autor{flex-direction:row;gap:var(--s3);padding:var(--s4) var(--s3)}}
.caixa-autor .retrato{flex-shrink:0}
.caixa-autor-corpo{min-width:0}
.caixa-autor h2{font-size:1.15rem;letter-spacing:-.01em}
.caixa-autor .cargo{
  margin-top:2px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);
}
.caixa-autor .bio{margin-top:.8rem;font-size:.95rem;line-height:1.7}
.caixa-autor .bio p+p{margin-top:.6rem}
.redes{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:.5rem var(--s2);align-items:center}
.redes a{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--stone);text-decoration:none;border-bottom:1px solid var(--line);
  padding-block:.3rem;transition:color .15s,border-color .15s;
}
@media(hover:hover){.redes a:hover{color:var(--accent);border-color:var(--accent)}}
.redes a.destaque{color:var(--accent);border-color:var(--accent-soft)}

/* ============================================================
   GRADE DE CARTOES (lista, categoria, autor, veja tambem)
   ============================================================ */
.veja-tambem{margin-top:var(--s5)}
.veja-tambem h2{margin-bottom:var(--s3)}

.grade{display:grid;gap:var(--s2);align-items:stretch}
@media(min-width:640px){.grade{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grade{grid-template-columns:repeat(3,1fr)}}

.cartao{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r3);
  overflow:hidden;transition:background-color .2s,border-color .2s,transform .2s;
}
@media(hover:hover){.cartao:hover{background:#FFFDF8;border-color:rgba(10,10,10,.18)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cartao:hover{transform:translateY(-2px)}}
.cartao-capa{display:block;aspect-ratio:16/9;background:var(--bone);position:relative;overflow:hidden}
.cartao-capa img{width:100%;height:100%;object-fit:cover;display:block}
.cartao-capa--vazia{
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:2.6rem;font-weight:500;
  color:var(--accent);letter-spacing:-.04em;
  background:linear-gradient(160deg,var(--bone),var(--paper-2));
}
.cartao-corpo{padding:var(--s3);display:flex;flex-direction:column;gap:.7rem;flex:1;min-width:0}
.cartao h3{font-size:1.0625rem;line-height:1.32}
.cartao h3 a{text-decoration:none}
.cartao h3 a::after{content:'';position:absolute;inset:0}
@media(hover:hover){.cartao h3 a:hover{color:var(--accent)}}
.cartao .resumo{
  font-size:.92rem;line-height:1.62;color:var(--stone);
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cartao .pe{
  margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stone);
}
.cartao .pe .quem{color:var(--graphite)}
.cartao .chip{position:relative;z-index:1;align-self:flex-start}

/* ============================================================
   LISTA (/blog/, /blog/{categoria}/, autor)
   ============================================================ */
.lista{background:var(--paper-2);padding-bottom:var(--s5)}
.lista-topo{padding-top:var(--s4);padding-bottom:var(--s3);max-width:640px}
.lista-topo h1{margin-bottom:var(--s2)}
.lista-topo p{font-size:1.08rem;line-height:1.6;text-wrap:pretty}

/* D2: o esmaecimento na direita e a unica pista de que a faixa rola. Sem ele, no
   375 o terceiro chip e cortado na borda e parece bug, nao carrossel. */
.faixa-categorias{
  display:flex;gap:.5rem;overflow-x:auto;padding-block:var(--s2) var(--s4);
  scrollbar-width:thin;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
}
@media(min-width:900px){.faixa-categorias{-webkit-mask-image:none;mask-image:none}}
.faixa-categorias::-webkit-scrollbar{height:4px}
.faixa-categorias::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full)}
.faixa-categorias a{
  flex-shrink:0;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-full);
  padding:.5rem .95rem;min-height:36px;display:inline-flex;align-items:center;
  background:var(--paper);transition:color .15s,border-color .15s,background-color .15s;
}
@media(hover:hover){.faixa-categorias a:hover{color:var(--accent);border-color:var(--accent-soft)}}
.faixa-categorias a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.aviso-vazio{
  border:1px dashed var(--line);border-radius:var(--r3);background:var(--paper);
  padding:var(--s5) var(--s3);text-align:center;
}
.aviso-vazio p{font-size:1.05rem;color:var(--stone)}

.paginacao{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;
}
.paginacao a,.paginacao span{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .8rem;border-radius:var(--r2);border:1px solid var(--line);background:var(--paper);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--graphite);
  text-decoration:none;transition:border-color .15s,color .15s;
}
@media(hover:hover){.paginacao a:hover{border-color:var(--accent-soft);color:var(--accent)}}
.paginacao [aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.paginacao .fim{opacity:.4}

/* ---------- autor ---------- */
/* C4: `flex-start`, nao `center`. Com bio de dois paragrafos, o `center` jogava a
   foto pro meio vertical e o nome ficava flutuando acima dela. */
.autor-topo{
  padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;
}
@media(min-width:768px){.autor-topo{flex-direction:row;gap:var(--s4);align-items:flex-start}}
.autor-topo .retrato{flex-shrink:0}
.autor-topo .dados{min-width:0}
.autor-topo h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.autor-topo .cargo{
  margin-top:.5rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.autor-topo .bio{margin-top:var(--s2);font-size:1rem;line-height:1.7;max-width:60ch}
.autor-topo .bio p+p{margin-top:.6rem}
/* E4: as redes eram um link solto com muito respiro acima. Encostadas na bio e
   com um filete, elas leem como rodape do bloco. */
.autor-topo .redes{
  margin-top:var(--s2);padding-top:var(--s2);
  border-top:1px solid var(--line);max-width:60ch;
}

/* ============================================================
   GLOSSARIO
   ============================================================ */
.glossario{background:var(--paper-2);padding-bottom:var(--s5)}
/* Sem `border-bottom`: o filete do `h2::after` da primeira letra vem logo abaixo,
   e as duas linhas juntas viravam ruido. */
.az{display:flex;flex-wrap:wrap;gap:.35rem;margin-block:var(--s3) var(--s5)}
.az a{
  min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r1);background:var(--paper);
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--graphite);
  text-decoration:none;transition:border-color .15s,color .15s;
}
@media(hover:hover){.az a:hover{border-color:var(--accent);color:var(--accent)}}

.letra{margin-bottom:var(--s5);scroll-margin-top:calc(var(--head) + var(--s3))}
/* B2: a letra precisa marcar SECAO, nao parecer caractere perdido. Ela sai do
   filete e ganha corpo; o filete continua, agora atravessando ao lado dela. */
.letra>h2{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1);
  padding-left:var(--s2);
  font-family:var(--font-mono);font-size:1.7rem;font-weight:500;letter-spacing:.1em;
  line-height:1;color:var(--accent);
}
.letra>h2::after{content:'';flex:1;height:1px;background:var(--line)}

/* A2: linhas de dicionario, nao grade de cards. Grade de 2 colunas com um termo
   so na letra deixava metade da linha vazia (A, L, P e R do exemplo). */
.termos{display:grid;gap:0}
.termo{
  position:relative;display:grid;gap:.2rem var(--s3);
  padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);
  transition:background-color .15s;
}
/* E2: sem `border-top` no primeiro termo. O filete do `h2::after` ja marca o
   comeco da seção; os dois juntos viravam duas linhas quase coladas. */
@media(min-width:720px){
  .termo{grid-template-columns:minmax(150px,220px) 1fr;align-items:baseline}
}
@media(hover:hover){.termo:hover{background:var(--paper)}}
.termo h3{font-size:1.05rem}
.termo h3 a{text-decoration:none}
.termo h3 a::after{content:'';position:absolute;inset:0}
@media(hover:hover){.termo h3 a:hover{color:var(--accent)}}
.termo p{font-size:.95rem;line-height:1.65;max-width:62ch}

.definicao{
  margin-top:var(--s3);background:var(--bone);border-left:3px solid var(--accent);
  border-radius:0 var(--r2) var(--r2) 0;padding:var(--s3);
  font-size:1.08rem;line-height:1.6;color:var(--ink);
}

.relacionados{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s4)}
.relacionados h2{font-size:1.15rem;margin-bottom:var(--s2)}
.relacionados ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.relacionados a{
  display:inline-flex;align-items:center;min-height:38px;padding:.45rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--paper);
  font-size:.88rem;color:var(--graphite);text-decoration:none;transition:border-color .15s,color .15s;
}
@media(hover:hover){.relacionados a:hover{border-color:var(--accent-soft);color:var(--accent)}}

/* ---------- lista de categorias no pe do artigo ---------- */
.categorias-pe{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.categorias-pe .rotulo{display:block;margin-bottom:var(--s2)}
.categorias-pe ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}

/* ============================================================
   RODAPE (mesmo da home)
   ============================================================ */
footer{background:var(--ink);color:var(--mist);padding:var(--s5) 0 var(--s4);position:relative;z-index:10}
footer .fgrid{display:grid;gap:var(--s4)}
@media(min-width:768px){footer .fgrid{grid-template-columns:1.5fr 1fr 1fr}}
footer .logo img{height:28px;width:auto;display:block;margin-bottom:var(--s3)}
footer .fcol h4{
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s2);
}
footer .fcol div{font-size:.9rem;line-height:1.85}
footer a{color:var(--mist);text-decoration:none;transition:color .15s}
@media(hover:hover){footer a:hover{color:var(--paper)}}
footer .aviso{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-dark);
  font-size:.76rem;line-height:1.75;color:rgba(255,255,255,.38);max-width:80ch;
}
footer .fbottom{
  margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
}
footer .fbottom p:first-child{color:var(--accent-soft)}

/* ============================================================
   ESTADO DE ERRO (503 sem banco)
   ============================================================ */
.recado{
  min-height:50vh;min-height:50svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:var(--s2);
  padding-block:var(--s5);
}
.recado p{max-width:44ch;text-wrap:pretty}

/* Regra do número (17/09/2026): data, tempo de leitura, numeração do índice, paginação e pé do card saem na Manrope com tabular-nums; mono só em rótulo caixa alta, código e identificador. */
.assinatura-datas,.indice a::before,.paginacao a,.paginacao span,.cartao .pe{font-family:var(--font-numero);font-variant-numeric:tabular-nums}