/* =============================================================================
   NAVEC LABS — GRADE EDITORIAL
   -----------------------------------------------------------------------------
   Vale para artigo, índice do blog, privacidade e qualquer página de texto longo.

   O PROBLEMA QUE ISTO RESOLVE
   Na privacidade.html o texto ficava numa coluna estreita à esquerda e sobrava
   meia tela branca à direita. Não era espaçamento — era falta de grade. Uma
   coluna de leitura só, encostada num canto, lê como erro de layout.

   A SOLUÇÃO
   Duas colunas com função: conteúdo (65–72 caracteres de medida) e uma lateral
   que CARREGA ALGO — o sumário, com a seção ativa destacada. A composição
   inteira é centrada no viewport, não encostada à esquerda.
   ========================================================================== */

/* ==========================================================================
   A GRADE
   ========================================================================== */
.ed {
  --ed-conteudo: 42rem;   /* ~68 caracteres na escala de corpo do site */

  /* O PISO. Nenhuma viewport, nenhum tamanho de fonte do navegador, nenhuma
     mudança futura na lateral pode levar a coluna de texto abaixo disto.
     38ch é o ponto em que a medida ainda é leitura e não é coluna de jornal;
     abaixo, o texto começa a quebrar palavra e o artigo vira escada. */
  --ed-piso: 38ch;
  --ed-lateral: 17rem;
  --ed-vao: var(--space-xl);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  /* centra a composição inteira: conteúdo + lateral */
  width: min(100% - (var(--gutter) * 2), calc(var(--ed-conteudo) + var(--ed-lateral) + var(--ed-vao)));
  margin-inline: auto;
}

/* DUAS COLUNAS E SÓ DUAS: lateral e texto. Se aparecer uma terceira coisa —
   CTA, banner, o que for — ela é bloco dentro da lateral ou dentro do fluxo do
   texto. Uma terceira coluna aqui espreme as outras duas e é assim que se
   chega a texto quebrado letra por letra.

   O LIMIAR, com a conta feita e não estimada. A lateral só entra se couberem,
   juntos: 2 gutters + a lateral + o vão + o piso de 38ch.
     38ch em Montserrat no corpo do artigo  = 28,43rem  (MEDIDO no Chrome,
       ch = 11,97px com --step-0 no teto de 1,13rem)
     lateral 17rem + vão 3,26rem + 2 gutters 4,24rem   =  24,50rem
     soma                                              =  52,93rem
   Ou seja: a partir de ~53rem já caberia. O corte fica em 64rem porque a
   medida confortável vale mais que a mínima possível — e sobram 11rem de
   folga, que é a margem contra mudanças futuras na lateral ou na escala.
   Se alguém encostar nesse orçamento, tools/check-larguras.mjs falha antes
   de o leitor ver. */
@media (min-width: 64rem) {
  .ed {
    /* minmax(piso, conteúdo): o piso é declarado, não torcido. A lateral é
       faixa fixa — ela não "espreme um pouquinho": ou cabe inteira, ou o
       layout já está na coluna única do bloco de cima. */
    grid-template-columns: var(--ed-lateral) minmax(var(--ed-piso), var(--ed-conteudo));
    gap: var(--ed-vao);
    align-items: start;
  }
}

/* A medida de leitura vive aqui, e é o único lugar que a define. */
.ed__texto {
  min-width: 0;
  max-width: var(--ed-conteudo);
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  /* O MÁXIMO que texto corrido pode pedir. break-word só parte a palavra que
     sozinha não caberia na linha; nunca parte palavra que caberia.
     `anywhere` e `word-break: break-all` NÃO entram aqui: eles parecem inofensivos
     enquanto a coluna é larga e, no dia em que a coluna encolhe, é o par deles
     com a coluna estreita que produz "E / s / c / o / l / h / a" — uma letra
     por linha. Quebra agressiva serve a URL e a código, e vive só na regra
     abaixo. */
  overflow-wrap: break-word;
}

/* O único lugar do artigo onde quebrar em qualquer ponto é o comportamento
   certo: string sem espaço que o leitor não lê como palavra. */
.ed__texto :is(code, kbd, samp),
.ed__texto .url {
  overflow-wrap: anywhere;
}

.ed__texto > * + * { margin-block-start: var(--space-s); }

.ed__texto h2 {
  font-size: var(--step-h2);
  line-height: var(--leading-title);
  margin-block-start: var(--space-2xl);
  scroll-margin-block-start: calc(var(--header-h) + var(--space-l));
}

.ed__texto h3 {
  font-size: var(--step-1);
  line-height: var(--leading-title);
  margin-block-start: var(--space-l);
}

.ed__texto ul,
.ed__texto ol { padding-inline-start: var(--space-m); }
.ed__texto ul { list-style: disc; }
.ed__texto ol { list-style: decimal; }
.ed__texto li + li { margin-block-start: var(--space-2xs); }
.ed__texto li::marker { color: var(--accent); }
.ed__texto a { font-weight: 600; }
.ed__texto strong { color: var(--text-strong); }

/* ==========================================================================
   QUEBRAR A MEDIDA DE PROPÓSITO
   Artigo em que tudo tem a mesma largura cansa. Citação, caixa, tabela e
   imagem sangram para fora da coluna de texto.
   ========================================================================== */
.ed__largo {
  width: calc(100% + var(--space-l));
  max-width: none;
  margin-inline-start: calc(var(--space-l) / -2);
}

@media (min-width: 64rem) {
  .ed__largo {
    width: calc(100% + var(--space-2xl));
    margin-inline-start: calc(var(--space-2xl) / -2);
  }
}

/* Citação — sangra e vira peça gráfica, com o vocabulário da marca */
.ed__citacao {
  position: relative;
  margin-block: var(--space-xl);
  padding: var(--space-m) var(--space-m) var(--space-m) var(--space-l);
  border-inline-start: 3px solid transparent;
  border-image: var(--grad-signature) 1;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.ed__citacao cite {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  font-style: normal;
  color: var(--text-muted);
}

/* Caixa de destaque */
.ed__caixa {
  margin-block: var(--space-l);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-raised);
}

.ed__caixa > p { margin-block-start: var(--space-2xs); font-size: var(--step--1); }
.ed__caixa .eyebrow { color: var(--accent); }

/* Cenário ilustrativo — a caixa que ANTES afirmava cliente real.
   O aviso é parte do componente, não do texto: não dá para esquecer. */
.ed__caixa--cenario { border-style: dashed; }

.ed__caixa--cenario::after {
  content: 'Exemplo hipotético, para dimensionar a ordem de grandeza. Não descreve cliente da Navec Labs.';
  display: block;
  margin-block-start: var(--space-s);
  padding-block-start: var(--space-2xs);
  border-block-start: var(--dash);
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* Caixa escura — "o custo de não fazer nada" */
.ed__caixa--custo {
  border: 0;
  background-color: var(--navec-void);
  color: var(--dark-100);
}

.ed__caixa--custo .eyebrow,
.ed__caixa--custo h4 { color: var(--navec-pink); }
.ed__caixa--custo strong { color: var(--neutral-0); }

/* Tabela — rola dentro de si, nunca empurra a página.
   MEDIDO em 320-480px: sem o overflow aqui, o min-width de 30rem da tabela
   virava rolagem horizontal da PÁGINA inteira (+195px em 320). O comentário
   dizia que rolava dentro de si; a declaração que fazia isso não existia. */
.ed__tabela {
  margin-block: var(--space-l);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ed__tabela table { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 30rem; }
.ed__tabela th, .ed__tabela td {
  padding: var(--space-2xs) var(--space-xs);
  text-align: start;
  border-block-end: var(--hairline) solid var(--border);
  vertical-align: top;
}
.ed__tabela thead th {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ed__tabela tbody th { font-weight: 700; color: var(--text-strong); }

/* Passo a passo numerado */
.ed__passos { counter-reset: passo; list-style: none !important; padding: 0 !important; margin-block: var(--space-l); }

/* O PASSO NÃO É UMA GRADE. Foi, e era o defeito.
   -----------------------------------------------------------------------------
   Um contêiner de grade transforma CADA elemento filho em item de grade —
   inclusive um <strong> no meio da frase, que é inline no HTML e vira item
   blocado aqui. Com `auto minmax(0, 1fr)` e um passo escrito assim:

       <li><strong>Escolha das ferramentas</strong> — integração de sistemas…</li>

   os itens viram quatro (marcador, trecho de texto, <strong>, trecho de texto),
   a coluna `auto` estica para caber o trecho longo e sobra ZERO para a segunda.
   O <strong> cai na coluna de 0px e, com o overflow-wrap: break-word do corpo,
   sai uma letra por linha.

   MEDIDO em automacao-processos-pme.html, em 1024, 1100, 1200, 1280, 1366,
   1440 e 1920: colunas `590.4px 0px`, com "Escolha das ferramentas" numa caixa
   de 0px de largura por 653px de ALTURA. Vinte e três letras, vinte e três
   linhas. Era exatamente isto que aparecia na tela.

   O marcador sai do fluxo e o texto volta a ser texto: parágrafo com recuo e um
   número posicionado no recuo. Nenhum elemento inline vira item de nada, e
   linha longa dentro do passo quebra como linha longa — que era, aliás, o
   problema de 320px que a grade tinha vindo resolver. */
.ed__passos li {
  counter-increment: passo;
  position: relative;
  min-height: 2rem;
  padding-inline-start: calc(2rem + var(--space-s));
  margin-block-start: var(--space-m);
}

.ed__passos li::before {
  content: counter(passo);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background-image: var(--grad-accent);
  color: var(--neutral-0);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step--1);
}

/* ==========================================================================
   A LATERAL — sumário com função
   ========================================================================== */
.ed__lateral { min-width: 0; }

/* Abaixo de 1024px a lateral deixa de ser coluna. O sumário recolhido tem que
   ficar no topo do texto — ele é o mapa —, mas o bloco de apoio no meio do
   caminho empurra o começo do artigo para baixo da dobra. Com display:contents
   os dois filhos viram itens do próprio .ed e o `order` resolve: sumário,
   texto, apoio. (O <aside> perde a caixa, não o papel semântico.) */
@media (max-width: 63.99rem) {
  .ed__lateral { display: contents; }
  .ed__sumario { order: 1; }
  .ed__texto   { order: 2; }
  .ed__apoio   { order: 3; margin-block-start: var(--space-xl); }
}

@media (min-width: 64rem) {
  .ed__lateral {
    position: sticky;
    /* Mesmo respiro em cima e embaixo. Antes o topo usava --space-m e o cálculo
       da altura descontava --space-xl: sobrava menos embaixo do que em cima, e
       o cartão terminava encostado na borda da tela. */
    inset-block-start: calc(var(--header-h) + var(--space-m));
    max-height: calc(100dvh - var(--header-h) - (var(--space-m) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Quando o sumário não cabe, ele rola — e a barra precisa de uma pista só
       dela. Sem isto ela nasce colada na borda do cartão, por cima do
       tracejado, e o sumário fica com cara de caixa apertada em vez de coluna.
       A pista é reservada sempre (scrollbar-gutter: stable), para o cartão não
       pular de largura quando o texto muda. O padding é devolvido à faixa em
       --ed-lateral, logo abaixo: o cartão mantém os 17rem de sempre. */
    padding-inline-end: var(--ed-pista);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  .ed { --ed-pista: var(--space-2xs); --ed-lateral: calc(17rem + var(--ed-pista)); }
}

.ed__sumario {
  border: var(--dash);
  border-radius: var(--radius-m);
  padding: var(--space-s);
}

.ed__sumario > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  cursor: pointer;
  list-style: none;
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.ed__sumario > summary::-webkit-details-marker { display: none; }

.ed__sumario > summary .icon {
  transition: transform var(--dur) var(--ease);
  flex: none;
}

.ed__sumario[open] > summary .icon { transform: rotate(180deg); }

/* No desktop o sumário está sempre aberto e o disclosure some */
@media (min-width: 64rem) {
  .ed__sumario > summary { cursor: default; }
  .ed__sumario > summary .icon { display: none; }
}

.ed__sumario ol {
  counter-reset: item;
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
}

.ed__sumario li { counter-increment: item; }

.ed__sumario a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: baseline;
  min-height: var(--tap-min);
  padding-block: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--space-2xs);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.ed__sumario a::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  opacity: 0.6;
}

.ed__sumario a:hover { color: var(--text-strong); }

/* A seção ativa. Nunca só por cor: ganha a barra e o peso. */
.ed__sumario a[aria-current='true'] {
  color: var(--text-strong);
  font-weight: 700;
  border-inline-start-color: var(--accent);
}

.ed__sumario a[aria-current='true']::before { opacity: 1; color: var(--accent); }

/* Bloco de apoio embaixo do sumário */
.ed__apoio {
  margin-block-start: var(--space-m);
  padding: var(--space-s);
  border-radius: var(--radius-m);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-raised);
}

.ed__apoio p { font-size: var(--step--2); color: var(--text-muted); margin-block: var(--space-2xs) var(--space-s); }

/* ==========================================================================
   SUPERFÍCIE CLARA COM TEXTURA
   Nenhuma superfície do site é cor sólida pura — nem as escuras, nem as claras.
   ========================================================================== */
.section--papel { position: relative; isolation: isolate; }

.section--papel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  --p: color-mix(in srgb, var(--navec-dark) 55%, transparent);
  background-image:
    linear-gradient(to right,  var(--p) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--p) var(--hairline), transparent var(--hairline));
  background-size: 1.5rem 1.5rem;
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

.section--papel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

.section--papel > * { position: relative; z-index: 1; }

/* ==========================================================================
   CENAS — as ilustrações do artigo
   -----------------------------------------------------------------------------
   Catorze artigos só de texto não seguram ninguém. E foto de banco de imagem
   resolveria isso do jeito errado: o site inteiro foi feito sem depender de
   imagem de terceiro, e recepcionista sorridente faria a Navec parecer as
   outras agências.

   A cena mostra o MECANISMO — a origem do horário duplicado, a porta que
   confere a agenda —, que é justamente o que foto nenhuma mostra. E, sendo
   SVG com os tokens da marca, ela pesa pouco, funciona nas duas superfícies e
   ainda serve de imagem de compartilhamento.

   Duas posições, e só duas:
     .ed__cena--abertura  atravessa as duas colunas, logo abaixo do título,
                          e mostra O PROBLEMA
     .ed__cena            dentro do texto, e pelo menos uma delas por artigo
                          mostra A SOLUÇÃO — dor sem saída não conecta

   O arquivo escolhido é a variante da superfície onde a cena está: as duas
   saem do mesmo tools/cenas_arte.py, então não existe versão clara atrasada
   em relação à escura.
   ========================================================================== */
.ed__cena {
  /* O mínimo automático de um item de grade é o min-content dele — e o
     min-content de uma <img> é a largura intrínseca do arquivo, 1200px. Sem
     este zero, a cena de abertura empurraria a grade inteira para fora em
     qualquer tela menor que isso. */
  min-width: 0;
  margin-block: var(--space-l);
}

.ed__cena img {
  display: block;
  width: 100%;
  height: auto;
  /* a proporção declarada reserva o espaço antes do SVG chegar: sem isto o
     texto pula quando a cena carrega */
  aspect-ratio: 1200 / 630;
  border-radius: var(--radius-m);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-raised);
}

.ed__cena figcaption {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--2);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* A cena de abertura é filha do .ed, não do texto: ela atravessa a lateral e
   a coluna de leitura, que é a largura que uma cena de abertura pede. */
.ed__cena--abertura { margin-block: 0 var(--space-l); }

@media (min-width: 64rem) {
  .ed__cena--abertura {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-block-end: var(--space-xl);
  }
}

/* Abaixo de 1024px a lateral vira display:contents e a ordem passa a ser
   explícita (sumário, texto, apoio). A abertura entra antes de tudo. */
@media (max-width: 63.99rem) {
  .ed__cena--abertura { order: 0; }
}

/* ==========================================================================
   TRILHA — a cor da categoria atravessando o artigo
   -----------------------------------------------------------------------------
   Catorze artigos com o mesmo cabeçalho branco no preto leem como catorze
   páginas iguais. Falta a marca aparecer, e falta o leitor saber em que trilha
   está.

   A solução não inventa cor: reaproveita as duas âncoras que o índice do blog
   já usa. "Agenda e atendimento" ancora no rosa; "Operação e sistemas" ancora
   no violeta. Cada trilha redefine --accent nos dois contextos, e com isso o
   micro-rótulo, o fio da trilha de navegação, o gradiente do título, o marcador
   de lista e o realce do sumário passam a seguir a categoria — sem que nenhum
   desses componentes saiba que trilha existe.

   Contraste medido contra o fundo de destino, em WCAG 2.1:
     agenda   claro  --navec-pink-ink   #B84360 sobre #f8f9fa = 4,97:1
     agenda   escuro --navec-pink       #D96680 sobre #06070d = 5,90:1
     operação claro  --navec-nebula     #6f42c1 sobre #f8f9fa = 6,18:1
     operação escuro --navec-violet-lit #9B5CFF sobre #06070d = 5,14:1
   ========================================================================== */
.artigo[data-trilha='agenda'] {
  --trilha-claro:  var(--navec-pink-ink);
  --trilha-escuro: var(--navec-pink);
  /* fatia do gradiente assinatura que começa e permanece no rosa */
  --grad-trilha: linear-gradient(100deg,
    var(--navec-hot)     0%,
    var(--navec-pink)   46%,
    var(--navec-nebula) 100%);
}

.artigo[data-trilha='operacao'] {
  --trilha-claro:  var(--navec-nebula);
  --trilha-escuro: var(--navec-violet-lit);
  /* a mesma assinatura lida do outro lado: entra pelo violeta */
  --grad-trilha: linear-gradient(100deg,
    var(--navec-nebula)  0%,
    var(--navec-violet) 52%,
    var(--navec-pink)  100%);
}

/* Um par de linhas repinta o artigo inteiro. Nenhum componente foi duplicado
   por trilha: todos já liam --accent. */
.artigo[data-trilha] .section--light { --accent: var(--trilha-claro); }
.artigo[data-trilha] .section--dark  { --accent: var(--trilha-escuro); }

/* A palavra-chave do título, no gradiente da trilha.
   UMA palavra — a que carrega o assunto. Duas já viram enfeite, e o título
   deixa de ter um ponto de entrada para ter dois.
   Fallback próprio, e não o de .text-gradient: esta regra vem depois na
   cascata e apagaria o @supports de base.css se dependesse dele. */
/* MEDIDO: sem a especificidade de dois níveis o título quebrava em três
   blocos. institucional.css tem `.pg-hero__titulo span { display: block }` — a
   regra da headline em dois níveis — e ela pega a palavra-chave junto, com
   especificidade (0,1,1) contra os (0,1,0) de uma classe sozinha. O resultado
   era "duplicado" virando linha própria e os dois-pontos seguintes descendo
   sozinhos para a linha de baixo. A palavra-chave é uma palavra DENTRO da
   frase; ela não ganha linha. */
.pg-hero__titulo .titulo-chave { display: inline; }

.titulo-chave {
  background-image: var(--grad-trilha, var(--grad-signature));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .titulo-chave {
    background-image: none;
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
  }
}

/* ==========================================================================
   CABEÇALHO DE ARTIGO
   ========================================================================== */
/* overflow-x: clip, e nao hidden: hidden criaria um contêiner de rolagem e
   quebraria o `position: sticky` de qualquer coisa dentro. MEDIDO: sem esta
   linha o ornamento abaixo sangrava 92px em 1024 e 173px em 1920 ALÉM da
   viewport — o `-9vw` do clamp, medido pelo tools/check-larguras.mjs em cada
   um dos catorze artigos. Sangrar pela borda da seção é o efeito; sangrar
   pela borda do documento é rolagem horizontal. */
.artigo-topo {
  position: relative;
  overflow-x: clip;
}

/* O SÍMBOLO DA MARCA COMO ORNAMENTO
   -----------------------------------------------------------------------------
   O logotipo dentro de cada artigo vira carimbo: repetido catorze vezes, ele
   perde força e passa a ler como marca d'água de documento. O que dá presença
   sem competir com a leitura é o SÍMBOLO — a órbita do logotipo — grande,
   sangrando pela borda direita e em opacidade baixíssima. É o mesmo papel que
   os anéis orbitais já fazem na home: estrutura de fundo, não figura.

   3,5% é o teto: acima disso o traço começa a disputar com a headline; abaixo
   de 2% ele some no ruído da superfície e não paga o próprio custo.
   Fica no CSS, e não no HTML, de propósito: assim os catorze artigos ganham o
   ornamento sem catorze blocos de marcação para manter em sincronia. */
.artigo-topo::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset-block: -8%;
  /* sangra: o símbolo é presença de marca, não ilustração centrada */
  inset-inline-end: clamp(-16rem, -9vw, -5rem);
  aspect-ratio: 1;
  opacity: 0.035;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%23ffffff'%3E%3Cg transform='rotate(-14 320 320)'%3E%3Cellipse cx='320' cy='320' rx='300' ry='149' stroke-width='9'/%3E%3Cellipse cx='320' cy='320' rx='213' ry='106' stroke-width='6' stroke-dasharray='26 22'/%3E%3Cellipse cx='320' cy='320' rx='126' ry='63' stroke-width='4' stroke-opacity='0.7'/%3E%3C/g%3E%3Ccircle cx='497' cy='197' r='29' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
}

/* O conteúdo do cabeçalho passa por cima do ornamento. Sem isto o .container
   fica em fluxo normal e o pseudo-elemento posicionado pinta em cima dele. */
.artigo-topo > .container { position: relative; z-index: 1; }

/* O fio da trilha de navegação deixa de ser cinza e passa a ser a categoria.
   Ele é o micro-rótulo do artigo: junto com a última migalha, diz de que
   assunto é a página antes do título dizer. */
.artigo-topo .migalhas--regua::after {
  background-image: var(--grad-trilha, var(--grad-signature));
  opacity: 0.55;
}

.artigo-topo .migalhas [aria-current] { color: var(--accent); }

.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  margin-block-start: var(--space-m);
  font-size: var(--step--2);
  color: var(--text-muted);
}

.artigo-meta > span { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.artigo-meta .icon { width: 1em; height: 1em; }

.artigo-lead {
  max-width: 46ch;
  margin-block-start: var(--space-s);
  font-size: var(--step-1);
  color: var(--text-muted);
}

/* ==========================================================================
   A CAPA DO ARTIGO
   -----------------------------------------------------------------------------
   Uma arte por artigo, gerada por tools/build-capas.py. Aparece em três
   lugares, sempre o MESMO arquivo: aqui no alto do artigo, no cartão do índice
   e — em PNG, porque SVG não renderiza em cartão de link — no
   compartilhamento.

   Fica no hero escuro, abaixo do título, e não na coluna de texto: a capa é
   fundo --navec-void e casa com a seção escura. Descendo para o branco ela
   viraria um retângulo preto no meio do papel.
   ========================================================================== */
.artigo-capa {
  margin: var(--space-l) 0 0;
}

.artigo-capa img {
  display: block;
  width: 100%;
  height: auto;
  /* a proporção declarada reserva o espaço antes do SVG chegar: sem isto o
     hero pula de altura quando a capa carrega */
  aspect-ratio: 1200 / 630;
  border-radius: var(--radius-l);
  border: var(--hairline) solid var(--dark-700);
}

/* Compartilhar */
.ed__compartilhar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tap-gap);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-s);
  border-block-start: var(--hairline) solid var(--border);
}

/* Aviso legal do artigo — quando o assunto pede */
.ed__aviso {
  margin-block: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  border-inline-start: 3px solid var(--accent);
  background-color: var(--surface-sunken);
  font-size: var(--step--1);
  color: var(--text);
}

/* ==========================================================================
   ÍNDICE DO BLOG
   ========================================================================== */
.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tap-gap);
  margin-block: var(--space-m) var(--space-xl);
}

.blog-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-m);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  cursor: pointer;
}

.blog-filtro:hover { border-color: var(--accent); color: var(--text-strong); }

.blog-filtro[aria-current='true'],
.blog-filtro[aria-pressed='true'] {
  border-color: transparent;
  background-image: var(--grad-accent);
  color: var(--neutral-0);
}

.blog-grupo + .blog-grupo { margin-block-start: var(--space-2xl); }

.blog-lista {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin-block-start: var(--space-l);
  padding: 0;
  list-style: none;
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  /* a capa sangra até a borda do cartão: o respiro passou do cartão para os
     elementos de texto, senão a imagem ficaria emoldurada por uma faixa branca
     que a faz parecer um anexo, e não a abertura do cartão */
  padding: 0 var(--space-m) var(--space-m);
  overflow: hidden;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-l);
  background-color: var(--surface-raised);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* --- A capa no cartão -----------------------------------------------------
   O arquivo é 1200x630 (1,905:1) e o cartão pede 16:9 (1,778:1). A diferença
   é pequena de propósito: com `cover` o recorte tira 6% da largura, metade de
   cada lado, e nenhuma composição perde a palavra-chave — as três variantes
   mantêm a palavra dentro dos 64px de margem, bem longe do corte.
   -------------------------------------------------------------------------- */
.post__capa {
  display: block;
  width: calc(100% + var(--space-m) * 2);
  /* MEDIDO: sem isto a capa parava a --space-m da borda direita do cartão e
     sobrava uma faixa vazia ali. O `max-width: 100%` do reset de base.css se
     aplica a toda <img> e trunca a largura calculada acima de volta ao 100%
     da caixa de conteúdo — a margem negativa então só desloca a imagem para a
     esquerda, em vez de sangrar dos dois lados. */
  max-width: none;
  margin-inline: calc(var(--space-m) * -1);
  margin-block-end: var(--space-s);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--navec-void);
}

.post:hover,
.post:focus-within {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-m);
}

.post__titulo { font-size: var(--step-1); line-height: var(--leading-title); }

.post__titulo a {
  color: var(--text-strong);
  text-decoration: none;
}

/* o cartão inteiro é clicável, sem perder o alvo real do link */
.post__titulo a::after { content: ''; position: absolute; inset: 0; }

.post__resumo { font-size: var(--step--1); color: var(--text-muted); margin: 0; }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* MEDIDO: sem isto, "6 min" quebrava para baixo do relógio numa coluna
   estreita. O item de metadado é indivisível — ou cabe inteiro, ou desce
   inteiro para a linha seguinte. */
.post__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  white-space: nowrap;
}

.post__meta .icon { width: 1em; height: 1em; }

/* O primeiro cartão de cada grupo ocupa a linha inteira. Em tela larga ele
   vira duas colunas — e as áreas são NOMEADAS de propósito: com fluxo
   automático o título caía na coluna da direita e a chamada na esquerda, que
   é a ordem de leitura errada. */
.post--destaque { grid-column: 1 / -1; }

@media (min-width: 60rem) {
  /* Em tela larga o destaque vira capa à esquerda e texto à direita — o mesmo
     par que o site já usava. A capa é a primeira coluna e ocupa as três
     linhas; por isso a grade nomeia as áreas em vez de deixar o fluxo
     automático decidir, que jogava o título para a coluna errada. */
  .post--destaque {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      'capa olho'
      'capa titulo'
      'capa resumo'
      'capa meta';
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-2xs) var(--space-xl);
    align-content: start;
    padding: var(--space-l);
  }
  .post--destaque .post__capa {
    grid-area: capa;
    align-self: center;
    width: 100%;
    margin: 0;
    /* aqui a capa não sangra: ela é uma coluna da grade, com o texto ao lado.
       E ganha a proporção nativa, sem recorte — em tamanho grande o corte de
       16:9 apertaria a composição sem necessidade. */
    aspect-ratio: 1200 / 630;
    border-radius: var(--radius-m);
  }
  .post--destaque .eyebrow      { grid-area: olho; }
  .post--destaque .post__titulo { grid-area: titulo; font-size: var(--step-2); }
  .post--destaque .post__resumo { grid-area: resumo; font-size: var(--step-0); }
  .post--destaque .post__meta   { grid-area: meta; margin-block-start: var(--space-s); }
}

/* ==========================================================================
   O FILTRO SEM JAVASCRIPT
   Um site estático não lê query string: `?tema=agenda` sozinho não filtra
   nada, porque não existe servidor para interpretá-lo. Quem filtra sem JS é
   o fragmento — `:target` sobre três âncoras vazias declaradas ANTES da barra
   e das listas, para que o combinador de irmãos alcance as duas coisas.

   Com JS, artigo.js entende as duas formas (`?tema=` e `#tema-`), esconde os
   grupos com [hidden] e reescreve a URL para `?tema=agenda`, que é o endereço
   que se compartilha. Sem JS, `?tema=agenda#tema-agenda` continua filtrando
   pelo fragmento. Um único link serve aos dois mundos.
   ========================================================================== */
.blog-alvo { display: block; height: 0; scroll-margin-block-start: calc(var(--header-h) + var(--space-m)); }

#tema-agenda:target   ~ .blog-grupo[data-grupo='operacao'] { display: none; }
#tema-operacao:target ~ .blog-grupo[data-grupo='agenda']   { display: none; }

/* O botão ativo, também sem JS */
#tema-agenda:target   ~ .blog-filtros .blog-filtro[data-tema='agenda'],
#tema-operacao:target ~ .blog-filtros .blog-filtro[data-tema='operacao'] {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

/* Com JS no ar, quem manda é o [hidden] — e ele precisa vencer qualquer
   display de componente. */
.blog-grupo[hidden] { display: none !important; }

/* ==========================================================================
   MIGALHAS — onde eu estou
   ========================================================================== */
.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* A trilha é navegação, não frase — não vale a isenção de alvo em linha da
   WCAG 2.5.8. MEDIDO: os links tinham 19px de altura. */
.migalhas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: inherit;
  text-decoration: none;
  border-block-end: var(--hairline) solid transparent;
}

.migalhas a:hover { color: var(--text-strong); border-block-end-color: currentColor; }
.migalhas [aria-current] { color: var(--text-strong); font-weight: 600; }
.migalhas__sep { opacity: 0.45; }

/* MEDIDO: a trilha terminava em 119px e o olho de categoria começava em 119px
   — encostados, dizendo a mesma coisa duas vezes. A trilha absorveu a régua da
   marca e o olho saiu do cabeçalho de artigo. */
.migalhas { margin-block-end: var(--space-m); }

.migalhas--regua::after {
  content: '';
  flex: 1 1 0;
  min-width: 0;
  height: var(--hairline);
  background: currentColor;
  opacity: 0.35;
}

/* A costura já é o respiro entre as duas superfícies. Somar a ela o recuo
   cheio da seção criava 117px de faixa sem nada logo antes do texto — e a
   regra da casa é que nenhum quadro de tela seja só fundo.
   O :has() é progressivo: onde não houver suporte, volta ao recuo padrão,
   que é folgado demais mas não quebra nada. */
.section--papel:has(> .ed) { padding-block-start: var(--space-xl); }

/* ==========================================================================
   LEIA TAMBÉM — os três links internos de cada artigo
   Não é enfeite de fim de página: é o mapa. Cada item diz para onde vai e
   por que vale ir.
   ========================================================================== */
.ed__relacionados {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--dash);
}

.ed__relacionados > p { margin: 0 0 var(--space-s); }

.ed__relacionados ul {
  list-style: none !important;
  margin: 0;
  padding: 0 !important;
  display: grid;
  gap: var(--space-xs);
}

.ed__relacionados li { margin: 0 !important; }

.ed__relacionados a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-s);
  align-items: start;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  border: var(--hairline) solid var(--border);
  background-color: var(--surface-raised);
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.ed__relacionados a:hover { border-color: var(--accent); transform: translateY(-2px); }
.ed__relacionados .icon { color: var(--accent); margin-block-start: 0.15em; }
.ed__relacionados small {
  grid-column: 2;
  display: block;
  font-size: var(--step--2);
  font-weight: 400;
  color: var(--text-muted);
}

/* ==========================================================================
   ÍNDICE DO BLOG — a chamada de topo e a contagem
   ========================================================================== */
.blog-contagem {
  font-size: var(--step--2);
  color: var(--text-muted);
  margin-block-end: var(--space-s);
}

.blog-grupo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-block-end: var(--space-xs);
}

.blog-grupo__nota {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 52ch;
  margin-block-end: var(--space-m);
}