/* ═════════════════════════════════════════════════════════════════
   RIVIO — Página de artigo

   Esta folha é PEQUENA de propósito, e isso é o ponto dela.

   O artigo não inventa uma camada nova: ele roda inteiro sobre o
   `case.css`. Reusa a grade de 384 + 800, as seções com o rótulo na
   coluna da esquerda, a prosa, as faixas fotográficas de largura total,
   os cartões de número e o CTA. Um texto longo e um estudo de caso têm
   o mesmo problema de leitura — um eixo de assunto à esquerda e um eixo
   de conteúdo à direita —, e resolver o mesmo problema duas vezes é
   como nasce divergência.

   O que sobra são duas coisas que um case não tem:

   · A ASSINATURA. Quem escreveu, quando, e quanto custa ler. Um
     manifesto sem procedência é panfleto, e o tempo de leitura é a
     única promessa que a página faz antes de o leitor se comprometer.

   · A NUMERAÇÃO DOS ITENS. O manifesto tem nove teses em três partes, e
     o número é parte do argumento: ele diz que existe uma ordem, e que
     a tese 9 depende das oito anteriores.

   ── PARA O PRÓXIMO ARTIGO ────────────────────────────────────────
   Nada aqui é do manifesto. `artigo-capa`, `artigo-assinatura`,
   `artigo-item` e `artigo-num` descrevem a forma, não o conteúdo. Um artigo novo é um
   HTML novo com esta mesma folha — e se ele não tiver teses numeradas,
   é só não usar `artigo-num`.
   ═════════════════════════════════════════════════════════════════ */

/* ── A capa ──────────────────────────────────────────────────────
   Ela ocupa o lugar EXATO do vídeo na abertura de um case, e por isso
   copia a geometria dele: os mesmos 48 de respiro que separam os quatro
   blocos da abertura, o mesmo 16:9, o mesmo raio e o mesmo recorte.

   O que ela não tem é o botão de play — um artigo não tem depoimento
   para tocar. Herdar a medida e dispensar o botão é diferente de
   inventar uma capa: a abertura continua sendo a mesma composição. */
.artigo-capa {
  position: relative;
  margin: 48px 0 0;
  aspect-ratio: 1216 / 684;
  border-radius: var(--r-caixa);
  overflow: clip;
  background: #111;
}

/* Absoluta desde 2026-09-18: com a imagem no fluxo, uma capa que não é
   16:9 (as do site antigo têm várias proporções) esticava a caixa. */
.artigo-capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── A assinatura ────────────────────────────────────────────────
   Ela NÃO é um objeto novo: é a `.case-regua` do case, com os mesmos
   ícones de 42, o mesmo par etiqueta/valor e as mesmas quebras. Num case
   a régua recorta período, contas, escopo e oportunidade; num artigo
   recorta quem escreveu, quando e quanto custa ler. É o mesmo objeto
   respondendo à mesma pergunta — o que este documento é, antes de o
   leitor se comprometer com ele —, e por isso herda em vez de imitar.

   Herdar `.case-regua` traz de brinde o `margin-top: 48` do largo e o
   zero do estreito, que é justamente o par que eu tinha errado antes.

   Os três ícones vivem em `assets/artigo/icones/`: Lucide com ponta reta
   e traço 1, mapeados da caixa de 24 para a de 18 que vai de 12 a 30
   (fator 0,75), sobre a moldura de 42 com `rx 6` e fundo #F0F5FF — a
   mesma dos KPIs dos dois cases. */

/* Ela OCUPA os 800 da coluna de conteúdo, que é a mesma medida dos
   parágrafos logo abaixo. Isso é padrão da página e não composição: um
   bloco da coluna de conteúdo começa em 528 e termina em 1328, e um que
   se encolhesse para caber no próprio texto quebraria o prumo com tudo o
   que vem antes e depois dele.

   Quem ocupa os 800 é a LISTA, que cresce para preencher o que sobra
   depois das ações — não os itens, que andam juntos na ponta esquerda
   dela. Com `space-between` os três se espalhavam e o vão ia a 73: três
   informações soltas em vez de um bloco. Agrupadas, o vão é 32, que é a
   densidade da régua do case (31, medido), e as ações continuam rentes
   à direita. */
.artigo-assinatura .case-regua__itens {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 20px 32px;
  min-width: 0;
}

/* Um degrau abaixo do case: 16/11 contra os 18/12 dele. A régua de um
   case abre um documento de 20 mil pixels e carrega o dado principal
   dele; a assinatura de um artigo é procedência, e procedência não
   compete com a manchete que está 200px acima. */
.artigo-assinatura .case-regua__val { font-size: 16px; }
.artigo-assinatura .case-regua__rot { font-size: 12px; }

/* ── A régua da primeira seção ───────────────────────────────────
   A convenção dos dois cases é que seção logo depois de um bloco de
   largura total NÃO leva `--regua`: a faixa fotográfica já separou, e o
   filete seria uma segunda separação em cima da primeira.

   A primeira seção do artigo é a exceção, e é o Jefferson quem a nomeia:
   "não tem uma fotografia antes pra servir como separador". O que vem
   antes dela é a assinatura — informação miúda e clara, que termina sem
   fechar nada. Sem o filete, os 96 de respiro liam como esquecimento em
   vez de intervalo. A regra continua valendo; ela só passa a ser sobre a
   FOTO e não sobre a posição.

   O custo é 48 e o filete, que somam 144 entre a assinatura e o rótulo.
   Isso é caro no estreito, e por isso as duas outras causas do vazio de
   lá — o aviso que reservava linha e a gaveta que continuava desenhada —
   tinham mesmo que sair antes. */

/* ── Os assuntos ─────────────────────────────────────────────────
   Ficam DENTRO do bloco de texto da abertura e não como quarto bloco da
   grade: 24 do lede contra os 48 que separam os blocos, porque um
   assunto é sobre o texto que acabou de ser lido, não um capítulo novo.
   A capa continua a 48 do conjunto, e o ritmo da abertura não muda.

   PREENCHIDAS, nunca contornadas — a regra é a mesma que vale para o
   campo, a pílula e a caixa da página de contato: este site separa
   superfície por preenchimento, e um traço de 1px é justamente o que ele
   não faz em lugar nenhum. O fundo é o #F0F5FF das molduras dos ícones,
   e é o que amarra a etiqueta ao resto da fileira. */
.artigo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* O corpo é o das etiquetas de seção (`--tag-corpo`: 12, e 10 abaixo de
   861) desde 2026-09-28 — "a tipografia das tags do cabeçalho tem um
   tamanho muito maior que a da tagzinha 'O cenário'… deixar do mesmo
   tamanho". Era 12 fixo (11 antes da régua de pares). */
.artigo-tags li {
  padding: 8px 14px;
  border-radius: var(--r-redondo);
  background: var(--artigo-superficie);
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-03);
}

/* ── Uma forma só na fileira ─────────────────────────────────────
   A primeira montagem tinha QUATRO formas na mesma linha — círculo
   escuro no avatar, círculo vazado no LinkedIn, quadrado preenchido nos
   ícones de dado, círculo vazado nas ações — em dois tamanhos. Não era
   variedade, era ausência de padrão: cada objeto tinha inventado a
   própria moldura.

   Agora há UMA: 42 × 42 com raio 6, que é a moldura dos ícones de KPI
   dos dois cases, medida nos arquivos deles. O que varia é só o
   PREENCHIMENTO — pálido para o que se lê, escuro para a marca, azul
   para o que está ativo. Que é exatamente como o site separa superfície
   em todo o resto. */
:root {
  /* Estes dois subiram para o `tokens.css` quando a página de produto
     passou a usá-los: um valor de duas páginas não mora na folha de uma.
     Ficam aqui como apelido para não reescrever o resto do arquivo. */
  --artigo-superficie: var(--superficie);
  --artigo-superficie-alta: var(--superficie-alta);
}

.artigo-autor__marca,
.artigo-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
}

/* O AVATAR é a marca, e não um pictograma de pessoa: quem assina é a
   redação da Rivio. Escuro porque é o único objeto da fileira que
   IDENTIFICA em vez de rotular — e o contraste é o que faz o olho começar
   por ele e ler a linha da esquerda para a direita. */
.artigo-autor__marca {
  background: var(--dark-01);
  color: #fff;
}

.artigo-autor__marca svg {
  width: 22px;
  height: auto;
  display: block;
}

/* Os BOTÕES nascem na mesma superfície pálida dos ícones de dado e se
   separam deles pelo que fazem ao mouse: o preenchimento aprofunda. Um
   ícone de dado não reage; um botão reage. É a diferença que o site já
   usa entre campo e pílula na página de contato. */
.artigo-btn {
  background: var(--artigo-superficie);
  /* `--dark-03`, e vale registrar por que: eu tinha escrito `--dark-04`,
     que NÃO EXISTE — a escala vai 01, 02, 03, 05. Um token inexistente
     não erra alto: a declaração é descartada e o elemento herda a cor do
     pai, então o glifo saía escuro por acidente e parecia certo. */
  color: var(--dark-03);
  cursor: pointer;
  transition: background-color .28s var(--ease-out-soft), color .28s var(--ease-out-soft);
}

.artigo-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.4;
}

.artigo-btn:hover {
  background: var(--artigo-superficie-alta);
  color: var(--dark-01);
}

.artigo-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.42);
}

/* ── A gaveta de compartilhar ────────────────────────────────────
   O botão abre os destinos em vez de disparar a folha nativa do
   sistema. `navigator.share` só existe em aparelho, e o mesmo botão
   precisa fazer a mesma coisa no desktop — que é onde a maior parte de
   um texto deste tamanho vai ser lida.

   Ela é ABSOLUTA e não empurra nada: a assinatura é a última linha da
   abertura, e uma gaveta que crescesse no fluxo empurraria a página
   inteira para baixo a cada clique. */
.artigo-partilha {
  position: relative;
  display: flex;
}

/* `display: none` explícito no `[hidden]`. Sem isto o `display: flex`
   abaixo VENCE a regra `[hidden] { display: none }` do navegador — folha
   de autor ganha da folha do agente —, e a gaveta fechada continuava
   desenhada: caixa de 176px de altura, e os quatro destinos vivos na
   ordem de tabulação, invisíveis a 0 de opacidade. Quatro paradas de
   Tab que não levam a lugar visível nenhum. */
.artigo-partilha__menu[hidden] { display: none; }

.artigo-partilha__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cada destino sobe do lugar do botão, um atrás do outro. O `--i` vem
   da ordem no HTML e não de JS: quatro itens fixos não justificam um
   índice calculado em tempo de execução. */
.artigo-partilha__menu .artigo-btn {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease-out-soft), transform .38s var(--ease-out-expo),
    background-color .28s var(--ease-out-soft), color .28s var(--ease-out-soft);
}

.artigo-partilha__menu .artigo-btn:nth-child(1) { transition-delay: 0ms, 0ms, 0s, 0s; }
.artigo-partilha__menu .artigo-btn:nth-child(2) { transition-delay: 40ms, 40ms, 0s, 0s; }
.artigo-partilha__menu .artigo-btn:nth-child(3) { transition-delay: 80ms, 80ms, 0s, 0s; }
.artigo-partilha__menu .artigo-btn:nth-child(4) { transition-delay: 120ms, 120ms, 0s, 0s; }

.artigo-partilha__menu.is-aberto .artigo-btn {
  opacity: 1;
  transform: none;
}

/* Aberta, a gaveta APROFUNDA o botão que a abriu — ele fica no estado
   de hover enquanto o menu existe, para o olho não perder de onde
   aquilo saiu. */
.artigo-partilha.is-aberta > .artigo-btn {
  background: var(--artigo-superficie-alta);
  color: var(--dark-01);
}

/* A cor da marca só aparece no HOVER. Parada, a gaveta é da página —
   cinco círculos coloridos ao lado de uma manchete seriam o único lugar
   do site com cor de terceiro. No hover ela identifica, que é o momento
   em que identificar importa. */
.artigo-btn--zap:hover { color: #25d366; }
.artigo-btn--x:hover { color: #000; }
.artigo-btn--in:hover { color: #0a66c2; }

/* Os glifos das marcas são PREENCHIDOS e os do site são traçados, e
   isso é da natureza deles: uma marca é uma forma fechada e redesenhá-la
   em contorno fino a descaracteriza. Por isso a regra de traço do
   `.artigo-btn svg` não vale aqui. */
.artigo-partilha__menu [data-destino] svg {
  width: 16px;
  height: 16px;
  stroke: none;
}

/* O aviso de "link copiado" mora FORA do fluxo, e essa parte eu tinha
   escrito no comentário sem ter feito: como linha da grade ele reservava
   34px embaixo da assinatura o tempo todo, para uma frase que aparece por
   2,6 segundos. Agora ele pende da borda de baixo, dentro do recuo de 48
   que a abertura já tem, e não empurra nada. */
.artigo-assinatura__aviso {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 10px 0 0;
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  text-align: right;
  color: var(--dark-05);
  opacity: 0;
  transition: opacity .3s var(--ease-out-expo);
}

.artigo-assinatura__aviso.is-vis { opacity: 1; }

/* A régua ganhou um segundo filho — as ações —, então a lista deixa de
   poder esticar sozinha. */
.artigo-assinatura {
  position: relative;
  grid-template-columns: 384fr minmax(0, 800fr);
  align-items: center;
}

/* A LINHA. A régua do case tem dois filhos e o segundo é a lista; aqui
   o segundo é esta linha, que carrega a lista E as ações lado a lado.
   Sem ela as ações caíam numa segunda fileira da grade, embaixo da
   informação, em vez de fechar a mesma linha à direita. */
.artigo-assinatura__linha {
  grid-column: 2;
  display: flex;
  align-items: center;
  /* `nowrap`, e é o que mantém as ações na linha. Com `wrap`, a lista
     — que cresce para preencher os 800 — tomava a fileira inteira e
     empurrava os botões para uma segunda, encostados à esquerda. Apareceu
     a 1100 e não a 1440, que é o tipo de coisa que só a medição pega.
     Sem quebra, quem cede é a lista, e são os itens DELA que quebram. */
  flex-wrap: nowrap;
  gap: 24px 32px;
  min-width: 0;
}

/* Abaixo de 1180 a régua do case vira uma grade de 2 colunas, porque lá
   ela tem QUATRO itens e 2×2 é a divisão limpa. Com três, a mesma grade
   dá 2+1 — que é exatamente o "lê como acidente" que o comentário dela
   descreve. Três cabem numa fileira só até bem abaixo disso, então aqui
   a fileira continua. */
@media (max-width: 1180px) {
  .artigo-assinatura .case-regua__itens {
    display: flex;
    flex-wrap: wrap;
  }

  /* A COMPACTAÇÃO sobe de 900 para cá. É a mesma que o case aplica no
     estreito — ícone de 38, valor de 14, vão de 10 — e ela entra antes
     porque a assinatura tem um passageiro que a régua do case não tem:
     os dois botões, que comem 92 + 32 da fileira. Sem isso, entre 1180 e
     ~1000 a lista quebrava em 2+1, com o item solto embaixo e os botões
     boiando no meio das duas linhas. */
  .artigo-assinatura .case-regua__item { gap: 10px; }
  .artigo-assinatura .case-regua__item img,
  .artigo-assinatura .artigo-autor__marca {
    width: 38px;
    height: 38px;
  }
  .artigo-assinatura .artigo-autor__marca svg { width: 20px; }
  .artigo-assinatura .case-regua__val { font-size: 14px; }
  .artigo-assinatura .artigo-btn { width: 38px; height: 38px; }

  /* Os vãos apertam junto. Eles são MÍNIMOS: com `space-between` a lista
     redistribui a sobra, então em 1170 a fileira continua espaçada e é
     só perto de 905 que os 12 aparecem como 12. Sem isso, a 960 e a 905
     o que não cabia eram os vãos, não os itens — a soma dava 79 e 44 de
     sobra contra os 96 que três vãos de 32 pediam. */
  .artigo-assinatura .case-regua__itens { gap: 20px 24px; }
  .artigo-assinatura__linha { gap: 24px; }
}

/* Um degrau a mais, e ele é medido e não redondo: com vão de 24 a
   fileira ainda cabe em 1024 (sobram 78 até as ações) e quebra em 940.
   Abaixo daqui o vão vai a 12, que é o que segura uma fileira só até os
   905 onde a página troca de layout. */
@media not all and (min-width: 1024px) {
  .artigo-assinatura .case-regua__itens { gap: 20px 12px; }
  .artigo-assinatura__linha { gap: 20px; }
}

/* ── A tese ──────────────────────────────────────────────────────
   Número e título de cada item, e a prosa dele logo abaixo, num bloco
   só. Estarem juntos importa: o `gap` de 48 do `.case-bloco--largo`
   separa TESES, e o de 18 aqui separa o título da sua própria prosa.
   Com tudo solto no bloco, os dois vãos viravam um e as nove teses
   liam como dezoito parágrafos irmãos. */
.artigo-item {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* O número é o contador do argumento, não decoração: o manifesto tem
   uma ordem, e a tese 9 depende das oito anteriores. Fica ACIMA do
   título e não ao lado — ao lado ele comeria a medida da linha de um
   título que já tem duas linhas em telas médias. */
.artigo-num {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  /* Tabular para "01" e "09" ocuparem a mesma largura — a coluna de
     números não estremece de uma tese para a outra. */
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.artigo-item .case-prosa {
  margin-top: 6px;
}

/* ── Estreito ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* ── O agrupamento da abertura ─────────────────────────────────
     No estreito TUDO estava a 24 — a etiqueta do título, o título do
     lede, o lede das tags — e um ritmo único não é ritmo: sem degrau, os
     cinco elementos leem como cinco itens de uma lista, e não como uma
     manchete com seu resumo.

     Passam a ser dois degraus e só dois. DENTRO de um grupo, 12: o
     título e o lede são uma coisa só, manchete e subtítulo. ENTRE
     blocos, 24, que é o `row-gap` da grade e já governava a etiqueta, a
     capa e a assinatura. As tags ficam no meio pelo caminho longo — 12
     do `gap` mais 12 de margem — porque são um objeto novo, mas ainda
     dependente do texto que acabou de ser lido.

     Escopado no `.artigo-abre` porque `.case-abre__texto` é dos cases
     também, e lá não há tags: o 24 uniforme funciona quando o bloco tem
     dois elementos e não quatro.

     2026-09-28: etiqueta→título e título→lede passam a ter o MESMO vão,
     ~20 da linha de base ao topo das maiúsculas, em toda a família
     (ver o `case.css`, no estreito). O `gap` de 12 que ficava aqui saiu —
     vale o 8 do `case.css` — e as tags sobem a margem de 12 para 16,
     para que lede→tags continue nos mesmos 24. */
  .artigo-abre .artigo-tags { margin-top: 16px; }

  /* Zeradas as duas: no estreito a grade da abertura passa a `row-gap:
     24px` e passa a ser ela quem espaça os blocos. Somar a margem em
     cima disso é o que dava 72 entre o lede e a capa contra os 24 do
     case — medido lado a lado nas duas páginas. */
  .artigo-capa { margin-top: 0; }

  /* A assinatura volta a encostar à ESQUERDA. À direita ela só faz
     sentido enquanto existe uma coluna de rótulo vazia à esquerda para
     equilibrá-la; no estreito a grade é de uma coluna só e todo o resto
     da página começa na margem — uma fileira fugindo para a direita
     leria como desalinhamento, não como composição.

     O `margin-top: 0` vem de graça da própria `.case-regua`, que já se
     zera aqui. */
  /* A régua do case vira uma coluna só aqui, mas a minha
     `grid-template-columns` de 384/800 mora FORA de um media query e num
     arquivo carregado depois — mesma especificidade, e ganha por ordem.
     Sem repetir a colapsada aqui, a assinatura ficava presa numa coluna
     de 271 no estreito e as três informações empilhavam com 114px de
     largura. Foi assim que apareceu. */
  .artigo-assinatura { grid-template-columns: minmax(0, 1fr); }

  /* A segunda coluna deixa de existir aqui, e o que estava fixado nela
     precisa se soltar. */
  .artigo-assinatura__linha { grid-column: auto; }

  /* A assinatura volta a encostar à ESQUERDA, e as ações vão para a
     ponta oposta da linha — é o `space-between` da barra publicada, e é
     o que sobra quando não há mais coluna vazia à esquerda para
     equilibrar um bloco encostado à direita. */
  .artigo-assinatura__linha {
    justify-content: space-between;
    gap: 20px 24px;
  }

  /* O case encolhe os ícones da régua para 38 aqui, mas a regra dele é
     `.case-regua__item img` e o avatar é um `span` — ele passou batido e
     ficava 4px maior que os vizinhos na mesma fileira. */
  .artigo-autor__marca {
    width: 38px;
    height: 38px;
  }

  .artigo-autor__marca svg { width: 20px; }

  .artigo-assinatura .case-regua__itens {
    grid-column: auto;
    justify-content: flex-start;
    gap: 20px 24px;
  }

  .artigo-item { gap: 14px; }
  .artigo-item .case-prosa { margin-top: 2px; }

}

/* ── Muito estreito ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Três itens em 335 quebram em 1+2: um sozinho em cima e dois embaixo.
     É a mesma divisão desigual que a régua do case resolve virando 2×2 —
     só que ela tem quatro itens e pode. Com três, a divisão limpa é uma
     coluna: cada linha começa na mesma margem que todo o resto da página
     e nenhuma sobra pendurada. */
  .artigo-assinatura .case-regua__itens {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* A informação vira uma pilha de três e o botão sobe para o CANTO
     superior direito, alinhado com a primeira linha dela — a do autor.
     `flex-start` é o que faz isso: com `center`, herdado do largo, ele
     flutuaria no meio da pilha, ancorado em nada. Encostado no topo, ele
     tem a mesma linha de base de onde o bloco começa a ser lido. */
  .artigo-assinatura__linha {
    align-items: flex-start;
    gap: 20px;
  }
}

/* ── Movimento reduzido ──────────────────────────────────────────
   A gaveta aparece inteira, sem o escalonamento e sem a subida. O que
   ela comunica é ONDE estão os destinos, e isso o `hidden` já resolve —
   a animação era conforto, não informação. */
@media (prefers-reduced-motion: reduce) {
  .artigo-partilha__menu .artigo-btn {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
    transition-duration: 0s;
  }
}

/* ═════════════════════════════════════════════════════════════════
   O BLOG — 2026-09-18

   Até aqui a folha servia UM artigo, feito à mão sobre as seções de
   case. Com a migração dos 290 artigos do site antigo ela passou a
   servir dois modos, na mesma pilha:

   · PROSA CORRIDA (`.artigo-prosa`): o texto inteiro numa coluna, com
     títulos, listas, tabelas, figuras, citações e vídeo — o que um
     editor de texto produz. É o modo de 289 artigos, e é o que
     `node blog.mjs --novo` cria.
   · EDITORIAL: as seções de case — rótulo à esquerda, faixas de foto,
     cartões de número, gráficos. É o modo do manifesto.

   Os dois têm a mesma abertura, a mesma assinatura, o mesmo fecho
   ("Continue lendo" + CTA). O que está abaixo é o que a prosa corrida
   precisou e o case não tinha: um vocabulário de blocos DENTRO da
   coluna de 800, o sumário na coluna da esquerda, a foto do autor, os
   relacionados e o formulário dos e-books.
   ═════════════════════════════════════════════════════════════════ */

/* ── O autor com foto ────────────────────────────────────────────
   A mesma moldura de 42 com raio 6 da fileira; o que muda é o
   preenchimento — a foto no lugar da marca. Uma pessoa assina com a
   cara dela, a redação assina com a marca. */
.artigo-autor__foto {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: var(--artigo-superficie);
}

/* O papel (cargo) vai numa segunda linha miúda, em UMA linha: a
   assinatura é procedência, e a bio inteira mora no LinkedIn. */
.artigo-autor__papel {
  display: block;
  max-width: 220px;
  margin-top: 4px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--dark-05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── A prosa corrida ─────────────────────────────────────────────
   Herda `.case-prosa` (18/1.5 Dark-03, 27 entre parágrafos) e
   acrescenta o que um texto de blog tem. As medidas seguem as do
   case: o h2 é o `.case-h3` (22/1.5 Dark-01), o h3 um degrau abaixo. A
   régua vertical é uma só — 48 antes de um título de seção, 27 entre
   parágrafos, 12 entre um título e o que o segue. */
.artigo-prosa > * + * { margin-top: 28px; }

.artigo-prosa h2 {
  margin-top: 56px;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--dark-01);
  /* a nav flutua por cima: um `#ancora` do sumário para 80 abaixo dela */
  scroll-margin-top: 80px;
}

.artigo-prosa :is(h3, h4) { scroll-margin-top: 80px; }

.artigo-prosa h3 {
  margin-top: 40px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dark-01);
}

.artigo-prosa h4 {
  margin-top: 32px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-01);
}

.artigo-prosa h2 + *,
.artigo-prosa h3 + *,
.artigo-prosa h4 + * { margin-top: 12px; }

.artigo-prosa a {
  color: var(--dark-01);
  text-decoration: underline;
  text-decoration-color: rgba(102, 148, 255, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* link escrito como URL crua (o painel de glosas da ANS, no IDSS) não
     tem onde quebrar e estourava 238px no celular: quebra em qualquer
     ponto, só quando não cabe */
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.28s var(--ease-out-soft);
}

.artigo-prosa a:hover { text-decoration-color: var(--blue); }

.artigo-prosa em { font-style: italic; }

/* Listas: marcador próprio, na cor do corpo, com o recuo que o texto de
   18 pede. O `base.css` zera `list-style`, então é aqui que ele volta. */
.artigo-prosa ul,
.artigo-prosa ol {
  padding-left: 1.4em;
}

.artigo-prosa ul { list-style: disc; }
.artigo-prosa ol { list-style: decimal; }

.artigo-prosa li { padding-left: 0.2em; }
.artigo-prosa li + li { margin-top: 10px; }
.artigo-prosa li::marker { color: var(--dark-05); }

.artigo-prosa li > ul,
.artigo-prosa li > ol { margin-top: 10px; }

/* A citação: sem barra, sem aspas desenhadas. O que a separa é o
   CORPO — um degrau acima, mais escura, com o recuo do texto. Uma
   barra de 1px seria o contorno que este site não desenha. */
.artigo-prosa blockquote {
  padding-left: 32px;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.45;
  color: var(--dark-01);
}

.artigo-prosa blockquote p + p { margin-top: 18px; }

/* ── A tabela ────────────────────────────────────────────────────
   Só fios horizontais — o mesmo filete de 12% que separa itens de lista
   na Imprensa e no rodapé — e o cabeçalho em etiqueta. Nada de grade
   fechada: as colunas se separam por alinhamento e respiro. No estreito
   a tabela ROLA dentro do embrulho, em vez de estourar a página. */
.artigo-tabela {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.artigo-tabela table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.artigo-tabela th,
.artigo-tabela td {
  padding: 12px 20px 12px 0;
  text-align: left;
  vertical-align: top;
  box-shadow: inset 0 -1px 0 rgba(24, 27, 31, 0.12);
}

.artigo-tabela th {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-05);
}

.artigo-tabela td:first-child { color: var(--dark-01); }
.artigo-tabela strong { font-weight: 500; color: var(--dark-01); }
.artigo-tabela a { color: var(--dark-01); text-decoration: underline; text-underline-offset: 4px; }

/* ── Figuras e vídeo ─────────────────────────────────────────────
   O mesmo raio e o mesmo recorte da capa. A imagem ocupa a coluna e
   guarda a proporção que veio no arquivo (`width`/`height` no HTML, que
   é o que impede o salto de layout). */
.artigo-prosa figure {
  margin-top: 40px;
  margin-bottom: 40px;
}

.artigo-prosa figure img,
.artigo-prosa figure video,
.artigo-prosa figure iframe {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-caixa);
  background: var(--artigo-superficie);
}

.artigo-video--embed iframe {
  aspect-ratio: 16 / 9;
  border: 0;
}

.artigo-prosa figcaption {
  margin-top: 12px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dark-05);
}

/* ── O formulário dos e-books ────────────────────────────────────
   Três artigos do site antigo terminavam num formulário do RD Station.
   Ele entra como o Framer entrava: um iframe isolado (`srcdoc`), que o
   `artigo.js` monta quando o bloco chega perto da tela — a página em si
   não carrega script de terceiro. A altura vem do próprio formulário
   por `postMessage`; até lá, a caixa tem o mínimo para não saltar. */
.artigo-form {
  margin-top: 48px;
  min-height: 420px;
  border-radius: var(--r-caixa);
  background: var(--artigo-superficie);
  overflow: clip;
}

.artigo-form iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

/* ── O sumário ───────────────────────────────────────────────────
   Mora na coluna da esquerda — a coluna do rótulo do case —, e é o que
   dá a ela um trabalho num texto que não tem seções rotuladas. Fica
   preso no rolar: enquanto o leitor desce pelos 800 da prosa, o mapa
   dela continua à mão. A entrada aceso é o h2 em vista, que o
   `artigo.js` marca com `aria-current`. */
.artigo-lateral {
  position: sticky;
  top: 88px;
  align-self: start;
}

.artigo-sumario__rotulo {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-05);
}

.artigo-sumario__lista {
  margin-top: 20px;
  max-width: 300px;
  /* TODOS os títulos da prosa entram (até 39 num artigo): a lista tem
     no máximo a altura da tela abaixo do rótulo e rola por dentro. O `artigo.js` mantém o item aceso à
     vista. (O rolador suave do site respeita caixa que rola sozinha.) */
  max-height: calc(100svh - 88px - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 24px;
}

/* A borda de baixo apaga SÓ quando ainda há o que rolar (`is-corta`, do
   `artigo.js`): numa lista curta, o último item ficava esmaecido. */
.artigo-sumario__lista.is-corta {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
}

.artigo-sumario__lista::-webkit-scrollbar { display: none; }

.artigo-sumario__lista li + li { margin-top: 12px; }


.artigo-sumario__lista a {
  display: block;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dark-03);
  transition: color 0.28s var(--ease-out-soft);
}

/* O hover dos temas do blog: só a cor, para o azul da marca. */
.artigo-sumario__lista a:hover,
.artigo-sumario__lista a:focus-visible { outline: none; color: var(--blue); }

.artigo-sumario__lista a[aria-current='true'] {
  font-weight: 500;
  color: var(--dark-01);
}

/* O botão que abre o sumário só existe no celular (ver o `@media` do
   estreito). */
.artigo-sumario__abre { display: none; }

/* ── Continue lendo ──────────────────────────────────────────────
   Três artigos da mesma categoria, nos 1216 inteiros: a régua que fecha
   o texto antes do CTA. Cards sem contorno, capa em 16:9, o par
   etiqueta/data e o título. */
.artigo-rel {
  padding: 60px 0 96px;
}

.artigo-rel .case-grade {
  border-top: 1px solid rgba(24, 27, 31, 0.12);
  padding-top: 60px;
  row-gap: 40px;
}

.artigo-rel__cab {
  /* Título à esquerda, "Ver todas" no canto de cima à direita — sem a
     etiqueta da categoria ("não há necessidade de ter uma tag aqui").
     O "Ver todas" é o "Ver todos os cases" do índice do blog
     (`.bl-cases__todos`): rótulo e elipse-seta. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.artigo-rel__titulo {
  font-weight: 400;
  font-size: clamp(24px, 2.222vw, 32px);
  line-height: 1.24;
  color: var(--dark-02);
}

.artigo-rel__todos {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-01);
}

.artigo-rel__todos-ir {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(24, 27, 31, 0.06);
  transition: background-color 0.3s var(--ease-out-soft);
}

.artigo-rel__todos:hover .artigo-rel__todos-ir { background: rgba(24, 27, 31, 0.12); }
.artigo-rel__todos-ir svg { width: 32px; height: 32px; transform: rotate(-90deg); }

.artigo-rel__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.artigo-rel__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A capa é uma caixa de 16:9 e a imagem PREENCHE a caixa, absoluta: com
   a imagem no fluxo, uma capa de outra proporção (o cliente sobe o que
   tiver) esticava a caixa — `aspect-ratio` é preferência, e `min-height:
   auto` deixa o conteúdo vencer. Visto nos relacionados com uma capa 3:2. */
.artigo-rel__capa {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-caixa);
  overflow: clip;
  background: var(--artigo-superficie);
}

.artigo-rel__capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-soft);
}

.artigo-rel__card:hover .artigo-rel__capa img { transform: scale(1.03); }

.artigo-rel__nome {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  color: var(--dark-01);
}

/* O par etiqueta/data que o índice também usa (é o `.bl-item__meta` da
   `blog.css`, repetido aqui porque o artigo não carrega aquela folha). */
.artigo-rel .bl-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
}

.artigo-rel .bl-item__meta b { font-weight: var(--tag-peso); color: var(--blue); }
.artigo-rel .bl-item__meta i { font-style: normal; color: var(--dark-05); }

/* ── Médio ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .artigo-rel__lista { gap: 24px; }
}

/* ── Estreito ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* A coluna da esquerda deixa de existir: o sumário vai para cima da
     prosa, solto do rolar. */
  .artigo-lateral { position: static; }

  /* ── O SUMÁRIO NO CELULAR (2026-09-28) ───────────────────────────
     Era a lista do desktop com altura de meia tela e rolagem PRÓPRIA —
     o dedo rolava a lista e não a página — e com os h2, os h3 e cada
     pergunta do FAQ no mesmo plano: "não tem cara de lista, tem cara de
     texto mal diagramado". Agora:
     · FECHADO por padrão — uma linha, "Neste artigo · N seções" e o
       chevron (o botão que o `blog.mjs` gera);
     · aberto, uma LISTA: só as seções (os `__sub` saem), numeradas na
       voz das etiquetas, uma por linha com o fio de 12% entre elas e a
       quebra alinhada depois do número;
     · sem altura máxima nem rolagem por dentro: a página rola;
     · tocar num item leva à seção e fecha a lista (`artigo.js`).
     A caixa é SUPERFÍCIE, o preenchimento das pílulas de tema, sem
     contorno. Sem JS a lista fica aberta, com o rótulo em cima. */
  .artigo-sumario {
    margin-bottom: 8px;
    padding: 0 16px;
    border-radius: var(--r-caixa);
    background: var(--artigo-superficie);
  }
  .artigo-sumario__rotulo { padding-block: 16px 12px; }
  .artigo-sumario__lista {
    max-width: none;
    max-height: none;
    margin-top: 0;
    overflow: visible;
    padding-bottom: 4px;
    counter-reset: sumario;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* `.artigo-sumario__lista` na frente: sem ela a regra perde para a do
     `li` logo abaixo (0,1,1) e as subseções continuavam na lista. */
  .artigo-sumario__lista .artigo-sumario__sub { display: none; }
  .artigo-sumario__lista li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    /* o número na linha de base da primeira linha do título */
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid rgba(24, 27, 31, 0.12);
    counter-increment: sumario;
  }
  .artigo-sumario__lista li + li { margin-top: 0; }
  .artigo-sumario__lista li::before {
    content: counter(sumario, decimal-leading-zero);
    font-family: var(--font-label);
    font-weight: var(--tag-peso);
    font-size: var(--tag-corpo);
    line-height: 20px;
    letter-spacing: var(--tag-track);
    color: var(--dark-05);
  }
  .artigo-sumario__lista a {
    line-height: 20px;
    text-wrap: pretty;
  }

  .js .artigo-sumario__rotulo { display: none; }
  .js .artigo-sumario:not(.is-aberto) .artigo-sumario__lista { display: none; }
  .js .artigo-sumario__abre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-label);
    font-weight: var(--tag-peso);
    font-size: var(--tag-corpo);
    line-height: 1;
    letter-spacing: var(--tag-track);
    text-transform: uppercase;
    color: var(--dark-03);
  }
  .artigo-sumario__abre svg {
    flex: none;
    color: var(--dark-05);
    transition: transform 0.4s var(--ease-out-soft);
  }
  .artigo-sumario.is-aberto .artigo-sumario__abre svg { transform: rotate(180deg); }
  .artigo-sumario__abre:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .artigo-prosa > * + * { margin-top: 20px; }
  .artigo-prosa h2 { margin-top: 44px; font-size: 20px; }
  .artigo-prosa h3 { margin-top: 32px; font-size: 16px; }
  .artigo-prosa h4 { font-size: var(--p-mobile); }
  .artigo-prosa blockquote { padding-left: 20px; font-size: 18px; }
  .artigo-prosa figure { margin-top: 28px; margin-bottom: 28px; }
  .artigo-tabela table { font-size: var(--p-mobile); }
  .artigo-tabela th,
  .artigo-tabela td { padding: 10px 16px 10px 0; }

  .artigo-autor__papel { max-width: 200px; }

  .artigo-rel { padding: 48px 0 72px; }
  .artigo-rel .case-grade { padding-top: 48px; row-gap: 32px; }
  .artigo-rel__lista { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* As tags viraram links (existe índice desde 2026-09-18). O `a` ocupa o
   `li` inteiro e a pílula é quem reage. */
.artigo-tags a { display: block; margin: -8px -14px; padding: 8px 14px; border-radius: inherit; color: inherit; transition: background-color 0.28s var(--ease-out-soft), color 0.28s var(--ease-out-soft); }
.artigo-tags a:hover { background: var(--artigo-superficie-alta); color: var(--dark-01); }

/* Sem formulário (fora do domínio cadastrado no RD Station), a caixa some. */
.artigo-form[hidden] { display: none; }