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

   Implementação 1:1 do Figma
   RIVIO / [DESKTOP] Case Sirio Libanes · node 880:12456 · 1440 × 13611

   Toda medida aqui foi lida do arquivo, não estimada. Onde há desvio
   deliberado ele está comentado no lugar, com o motivo.

   A REGRA DE OURO DESTA PÁGINA é a grade de duas colunas: 384 à
   esquerda para o rótulo, 800 à direita para o conteúdo, 32 de calha,
   1216 no total. O Figma repete essa mesma grade em TODAS as dezenove
   seções, inclusive nas que deixam a coluna da esquerda vazia. Não é
   decoração: é o eixo que dá unidade a um documento longo.
   ═════════════════════════════════════════════════════════════════ */

.case {
  /* Branco puro, não `--light-01`. O Figma pinta `#FFFFFF` em todas as
     seções de conteúdo e reserva o `#F7F9FF` para as CAIXAS que
     assentam sobre ele — perguntas, cards, ciclo. Inverter isso apaga a
     hierarquia inteira, porque as caixas somem no fundo. */
  background: #fff;

  /* O tracking das etiquetas desta página é 0,06em (0,72 em 12), não os
     0,04em do token global. O Figma desenha 0,72 em TODAS as tags deste
     documento; na home o padrão unificado é 0,48. Enquanto o cliente não
     unificar os dois, o desvio fica escopado aqui — mexer no token
     global deslocaria as cinco etiquetas da home. */
  --tag-track: 0.06em;

  --case-larg: 1216px;
  --case-calha: 32px;
}

/* ── A grade ───────────────────────────────────────────────────────
   `384fr 800fr` e não `1fr 800px`: a proporção é o que o Figma desenha,
   e mantê-la em `fr` faz a coluna de conteúdo encolher junto quando a
   janela é menor que 1216 + calhas, em vez de estourar. Somadas com os
   32 de calha, as duas dão exatamente 1216 no desktop. */
.case-grade {
  width: min(var(--case-larg), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 384fr 800fr;
  column-gap: var(--case-calha);
  align-items: start;
}

/* O padrão é a coluna da direita. Quem quiser as duas pede `--largo`.
   Escrito como padrão, e não como classe por bloco, para que um bloco
   novo caia no eixo certo sem que quem o escreveu saiba desta regra. */
.case-grade > * { grid-column: 2; }
.case-grade > .case-largo { grid-column: 1 / -1; }
.case-grade > .case-rotulo { grid-column: 1; }

/* Rótulo que só o leitor de tela ouve. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═════════════════════════════════════════════════════════════════
   1 · ABERTURA
   ═════════════════════════════════════════════════════════════════ */

/* O topo tem 180 do Figma até o começo do conteúdo. A nav mede 56 e
   flutua por cima, então o respiro real abaixo dela é 124. */
.case-abre {
  padding-top: 180px;
  padding-bottom: 60px;

  /* O lavado do topo. Medido no render do Figma: o branco puro só se
     quebra no quadrante superior direito, e por muito pouco — o desvio
     máximo é de 11 em 255. Duas manchas moles, roxa na borda e azul
     antes dela, apagando por volta de y≈1050.

     Vale a pena por ser exatamente o que impede a abertura de ler como
     página em branco; e é fraco o bastante para nunca disputar com o
     texto.

     ── O RAIO VERTICAL É ABSOLUTO, e o horizontal não ──────────────
     Em percentagem, o raio vertical se mede contra a ALTURA da caixa —
     e a abertura muda de altura conforme o que ela carrega. Numa
     página de case ela tem 1243px e a mancha ganha 572 de raio; numa
     página de documento, sem vídeo nem régua, ela tem 394, e os mesmos
     46% viravam 181. A mesma luz saía ACHATADA num terço da altura, e
     lia como uma faixa e não como luz. Medido nas duas.

     Os 572 e os 622 abaixo são exatamente o que a página de case já
     calculava: fixá-los deixa os cases idênticos ao que eram e dá à
     abertura curta a mesma mancha. O raio horizontal segue em
     percentagem de propósito — ele se mede contra a LARGURA, que é a
     da janela, e ali crescer junto é o comportamento certo.

     A opacidade não muda. O pedido era espalhar, não acender. */
  background:
    radial-gradient(52% 572px at 100% 0%, rgba(233, 146, 255, 0.135), rgba(233, 146, 255, 0) 70%),
    radial-gradient(44% 622px at 68% 2%, rgba(102, 148, 255, 0.085), rgba(102, 148, 255, 0) 72%),
    #fff;
}

/* NA PÁGINA `.case` O LAVADO É DA PÁGINA, NÃO DA ABERTURA (2026-09-29,
   "não é para aplicar o degradê só na primeira seção e colocar uma cor
   na seção de baixo, porque ele fatia o fundo"). Pintado no `header`, ele
   acaba na borda de baixo dele — e a mancha mede 572 e 622 de raio. Nos
   cases e nos artigos a abertura é alta (vídeo, capa) e a luz apaga lá
   dentro; nas páginas legais ela tem ~394 e a luz era CORTADA numa linha
   reta, com o branco da seção seguinte embaixo. No `main` o mesmo
   desenho (as mesmas medidas, o mesmo canto de cima à direita) continua
   por trás da seção seguinte, que é transparente, e apaga sem emenda.
   Nas páginas de mosaico (Cases, Imprensa) o `main` não é `.case`, a
   abertura é alta e o lavado segue nela. */
.case {
  background:
    radial-gradient(52% 572px at 100% 0%, rgba(233, 146, 255, 0.135), rgba(233, 146, 255, 0) 70%) no-repeat,
    radial-gradient(44% 622px at 68% 2%, rgba(102, 148, 255, 0.085), rgba(102, 148, 255, 0) 72%) no-repeat,
    #fff;
}

.case > .case-abre { background: none; }

/* A primeira fileira: rótulo à esquerda, manchete à direita. A coluna
   da esquerda é `space-between` porque o galhinho (o chevron) mora no
   pé dela, alinhado com a base do lede. */
.case-abre__topo {
  display: contents;
}

/* A coluna do rótulo estica com a fileira, e a fileira é definida pelo
   TEXTO ao lado — não por um número fixo.

   Ela tinha `min-height: 182px`, que é a altura da fileira do Sírio, onde
   a manchete ocupa três linhas. Na página de diagnóstico a manchete tem
   duas, a fileira mede 142, e os 182 empurravam o galho 40px para baixo.
   Como no Sírio o texto já mede 181, tirar o mínimo não muda nada lá —
   conferido. */
.case-grade > .case-abre__marca {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.case-abre__seta {
  width: 12px;
  height: 6px;
  flex: none;
}

.case-grade > .case-abre__texto {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 32px no Figma, contra os 36 do `--h2`. É deliberado e é o que faz a
   página: uma manchete de case não compete com a manchete da home. O
   `clamp` chega nos 32 exatos a 1440. */
.case-abre__titulo {
  font-weight: 400;
  font-size: clamp(24px, 2.222vw, 32px);
  line-height: 1.24;
  /* O Figma pinta a manchete com um `bg-clip-text`: um degradê sólido
     Dark-02 mais um brilho radial em #DDE7FF cujo centro cai FORA da
     caixa do texto (x 939 numa caixa de 800). O resultado renderizado é
     Dark-02 chapado — então é Dark-02 que se escreve aqui. */
  color: var(--dark-02);
}

.case-abre__lede {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* ── A etiqueta ────────────────────────────────────────────────────
   Quadrado 8 em Dark-04, o prefixo na mesma cor, o nome em azul. O gap
   de 2 entre prefixo e nome (contra os 8 do quadrado) é o que faz
   "01/ o desafio" ler como uma coisa só e não como duas. */
.case-tag {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-block: 12px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 0.7;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-04, #626a7a);
}

.case-tag__pre {
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
}

.case-tag__pre::before {
  content: '';
  width: var(--tag-quad);
  height: var(--tag-quad);
  background: currentColor;
  flex: none;
}

.case-tag__nome { color: var(--blue); }

/* A nota de rodapé da abertura. A página de diagnóstico precisa dizer,
   antes de qualquer número, que os valores são oportunidade identificada
   e não caixa recuperado — e isso não é rodapé de página, é ressalva de
   leitura, então mora junto da régua. */
.case-abre__nota {
  /* O mesmo respiro que separa manchete, vídeo e régua. O Figma monta a
     abertura como uma pilha de quatro blocos com 48 entre eles; sem este
     a nota encosta na régua. Medido no arquivo: régua acaba em 964, nota
     começa em 1012. */
  margin-top: 48px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* ── O vídeo ───────────────────────────────────────────────────────
   1216 × 684 — 16:9 exato na largura cheia da grade. O Figma o desenha
   rompendo as duas colunas, e é o único bloco de mídia da abertura. */
.case-video {
  position: relative;
  margin-top: 48px;
  aspect-ratio: 1216 / 684;
  border-radius: var(--r-caixa);
  overflow: clip;
  background: #111;
}

.case-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

.case-video__play span {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: var(--r-redondo);
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s var(--ease-out-soft), scale 0.4s var(--ease-out-soft);
}

.case-video__play:hover span {
  background: rgba(255, 255, 255, 0.42);
  scale: 1.06;
}

.case-video__play img {
  width: 28px;
  height: 28px;
}

/* ── A régua de apuração ───────────────────────────────────────────
   As quatro medidas que definem o recorte: período, contas, apontamentos
   e resultado. Ela ocupa a largura cheia mas o CONTEÚDO fica na coluna
   da direita — a coluna esquerda leva só o pontilhado de rolagem. É o
   mesmo eixo do resto, e é o que a mantém colada ao vídeo sem parecer
   um rodapé solto. */
.case-regua {
  margin-top: 48px;
  display: grid;
  /* `minmax(0, …)` na coluna do conteúdo, e não `800fr` puro: `fr`
     respeita o mínimo automático do item, então quatro KPIs que pedem
     818px ROUBAVAM da coluna do rótulo — a régua saía em 366/818 e os
     ícones começavam 18px à esquerda da nota logo abaixo, que fica em
     416. Medido na página de diagnóstico. */
  grid-template-columns: 384fr minmax(0, 800fr);
  column-gap: var(--case-calha);
  align-items: center;
}

.case-regua__scroll {
  width: 12px;
  height: 36px;
}

.case-regua__itens {
  display: flex;
  justify-content: space-between;
  /* O Figma distribui os quatro em 800 com `space-between` e sem folga
     mínima — as folgas que ele desenha (17,7) são só o que sobra. 12 é
     um piso que cabe nos dois casos e não empurra a coluna.

     `wrap` é o que impede o VAZAMENTO entre 900 e ~1180: o item é
     indivisível (o texto dele é `nowrap`), a coluna encolhe junto com a
     janela, e sem quebra os dois últimos KPIs saíam pela borda direita
     da página. Medido a 1024 e a 901. Com quebra eles descem para uma
     segunda fileira, que é o mesmo que a página já faz no estreito. */
  flex-wrap: wrap;
  row-gap: 24px;
  gap: 12px;
  min-width: 0;
}

.case-regua__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-regua__item img {
  width: 42px;
  height: 42px;
  flex: none;
}

.case-regua__txt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--dark-05);
  white-space: nowrap;
}

.case-regua__rot {
  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;
  opacity: 0.6;
}

/* 18 e não os 20 do Figma. Pedido do Jefferson depois de ver a régua
   montada: com quatro valores dividindo 800px, 20 contra a etiqueta de
   10 deixa o par apertado e cada bloco encosta no ícone do vizinho. Em
   18 o degrau para a etiqueta continua forte e a fileira respira.
   Vale nas DUAS páginas de case — a régua é o mesmo objeto. */
.case-regua__val {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

/* ═════════════════════════════════════════════════════════════════
   2 · RITMO DAS SEÇÕES
   ═════════════════════════════════════════════════════════════════ */

.case-sec {
  padding-top: 60px;
}

/* A seção de perguntas cola na anterior: ela é a continuação de uma
   frase que termina em dois-pontos. */
.case-sec--curta { padding-top: 48px; }

/* Fecha o respiro embaixo quando o que vem a seguir é foto sangrando ou
   o CTA — sem isto o texto encosta na faixa. */
.case-sec--fim { padding-bottom: 60px; }

/* A régua que abre um bloco novo. Ela mora no filho, não na seção, para
   ficar dentro da largura de 1216 e não sangrar até a borda da janela. */
.case-sec--regua > .case-grade {
  border-top: 1px solid rgba(24, 27, 31, 0.12);
  padding-top: 60px;
}

/* ── Tipografia de conteúdo ────────────────────────────────────── */

/* O corpo de texto das páginas de case é Dark-03, e não o Dark-05 que o
   Figma desenhou. Pedido do Jefferson depois de ver as duas páginas
   montadas: em blocos longos o cinza claro cansa. De quebra o contraste
   sobre o branco sobe de 4,0:1 para 8,6:1.

   O que NÃO mudou, e é de propósito: a régua de KPIs, o número do selo
   das perguntas e o sufixo "de 5" do score continuam em Dark-05 — são
   etiqueta e dado, não parágrafo. */
.case-prosa {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* O Figma separa parágrafos com uma linha VAZIA de 18/1.5 — 27px. É o
   valor, não um múltiplo escolhido a olho. */
.case-prosa p + p { margin-top: 28px; }

.case-prosa strong,
.case-prosa b {
  font-weight: 500;
}

/* O realce de uma frase dentro do corpo. Vale na prosa e no cabeçalho
   de bloco — o Figma usa os dois; em `.case-cab` ele precisa vencer o
   `font-weight: 300` do parágrafo, e (0,2,0) contra (0,1,1) vence. */
.case-prosa .em-azul,
.case-cab .em-azul { color: var(--blue); font-weight: 500; }
.case-prosa .em-ambar,
.case-cab .em-ambar { color: var(--yellow); font-weight: 500; }

/* Título de bloco — o degrau abaixo da etiqueta de seção. */
.case-h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--dark-01);
}

.case-bloco {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Quando o bloco empilha BLOCOS DE ASSUNTO — três títulos com prosa,
   um atrás do outro — 24 não separa: os três leem como um só. O Figma
   da página de diagnóstico usa 48 ali. */
.case-bloco--largo { gap: 48px; }

/* Cabeçalho de gráfico: título e uma linha de leitura, com 8 entre eles
   — mais apertado que os 24 do bloco, porque a linha explica o título. */
.case-cab {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-cab p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

.case-nota {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* ═════════════════════════════════════════════════════════════════
   3 · AS PERGUNTAS
   ═════════════════════════════════════════════════════════════════ */

.case-perguntas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-perguntas li {
  display: flex;
  align-items: center;
  gap: 16px;
  /* 6 de padding e raio 10 num bloco de 52 de altura: a caixa é quase
     só o ícone mais o texto, e é isso que a faz ler como linha de lista
     e não como card. */
  padding: 6px;
  border-radius: 10px;
  background: var(--light-01);
  list-style: none;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* A numeração das perguntas. Ela substituiu o ícone de interrogação, e
   ocupa a MESMA caixa de 40 que ele ocupava — branco, raio 6, número em
   Dark-05 —, para a linha continuar do mesmo tamanho. O algarismo é
   Bai Jamjuree SemiBold, a fonte das etiquetas (2026-09-28: a Plus
   Jakarta Sans que estava aqui "era para ser a Bai Jamjuree"; a marca
   usa só ela e a Funnel Display). */
.case-perguntas__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.012em;
  color: var(--dark-05);
}

/* Só o ícone SOLTO tem 40. Quando a linha carrega um selo, quem manda
   nas medidas é o selo, e o ícone dentro dele tem 26 — sem o filho
   direto aqui, a regra de 40 vazava para dentro do selo. */
.case-perguntas > li > img {
  width: 40px;
  height: 40px;
  flex: none;
}

/* A célula de texto do selo — "FRENTE 1" no lugar de um número de duas
   casas. Ela cresce com a palavra, então não é quadrada como a do
   ciclo. */
.case-selo__rot {
  display: grid;
  place-items: center;
  height: 26px;
  padding-inline: 8px;
  border-radius: var(--r-chip);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--tag-corpo);
  line-height: 1.5;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--dark-04, #626a7a);
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════
   4 · O CICLO — as oito etapas
   ═════════════════════════════════════════════════════════════════ */

.case-ciclo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.case-ciclo li {
  display: flex;
  flex-direction: column;
  /* `flex-start` e não o `stretch` padrão: sem ele o selo do número, que
     tem fundo branco, esticava até a largura do card. O Figma desenha
     `items-start` nos dois. */
  align-items: flex-start;
  justify-content: space-between;
  min-height: 120px;
  padding: 12px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
  list-style: none;
}

/* O selo — caixa branca com duas células de 26. Nasceu no ciclo da
   página do Sírio e a de diagnóstico usa o mesmo objeto em outro lugar
   (a lista "como o diagnóstico é feito"), então ele ganhou um nome
   próprio. A classe antiga continua valendo: unificar os dois nomes
   pediria editar oito itens do markup do Sírio, e o ganho não paga o
   risco enquanto as duas páginas estão em revisão. */
.case-selo,
.case-ciclo__selo {
  display: flex;
  align-items: flex-start;
  padding: 2px;
  border-radius: 6px;
  background: #fff;
}

/* Numa fileira, o selo NÃO encolhe. Ele é etiqueta de largura própria;
   em `0 1 auto` a caixa espremia enquanto o texto de dentro ("FRENTE 2")
   continuava do mesmo tamanho e vazava por cima da frase ao lado.
   Medido a 390. No ciclo ele é filho de coluna e isto não se aplica —
   daí a regra ser escopada à lista. */
.case-perguntas .case-selo { flex: none; }

.case-selo img,
.case-selo__num,
.case-ciclo__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-chip);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--tag-corpo);
  line-height: 1.5;
  letter-spacing: var(--tag-track);
  color: var(--dark-04, #626a7a);
}

.case-ciclo__selo img {
  width: 26px;
  height: 26px;
  flex: none;
}

.case-ciclo li p {
  max-width: 152px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* A etapa onde a Rivio opera. É o único ponto de cor cheia da seção, e
   é o que responde "onde exatamente" sem uma linha de legenda.

   NÃO é o `--grad-brand`, e a diferença é grande. O token da home é
   `-5.978deg` e OPACO — quase vertical, com o âmbar formando uma faixa
   no pé do card. Aqui a diagonal leva o azul ao canto superior esquerdo,
   e os 10% de branco por baixo levantam tudo.

   AS PARADAS NÃO SÃO AS QUE O MCP DEVOLVEU, e isto foi medido.

   Ele reporta o âmbar em `28.68%`. Com esse valor o canto inferior
   direito fica LARANJA; no Figma ele é rosa-salmão. Ajustei os quatro
   parâmetros contra o render do próprio Figma — 1.071 amostras, mínimos
   quadrados sobre a polilinha âmbar → roxo → azul — e o que sai é:

     ângulo  -37,23°  (o MCP dizia -37,185°, praticamente igual)
     âmbar   -26,66%  (o MCP dizia 28,68% — ESTE era o erro)
     roxo     33,38%  (o MCP dizia 33,453%)
     azul     88,50%  (o MCP dizia 88,683%)

   Ou seja: só a primeira parada vinha errada, e com o sinal trocado. Com
   o âmbar FORA da caixa, a extremidade quente mostra a mistura
   âmbar/roxo — o salmão — em vez do âmbar puro.

   Erro do modelo contra o render depois do ajuste: 0,84 por canal (RMS).
   Conferência nos cantos, Figma contra modelo:
     (3,3)     (117,158,255) · (117,159,255)
     (187,3)   (210,157,255) · (210,157,255)
     (3,116)   (188,157,255) · (188,158,255)
     (187,116) (244,175,193) · (245,177,193)

   Vale desconfiar da MESMA parada em qualquer outro degradê que tenha
   vindo do MCP — e valeu: a pílula de fecho do funil (`954:25597`) veio
   com as MESMAS três paradas erradas, e a correção daqui serviu nela sem
   ajuste (RMS 6,50 por canal contra 31,69 das paradas do MCP).

   Daí as paradas virarem UM token. O ângulo não: ele muda com a caixa,
   e muda de um jeito previsível. O Figma guarda a direção do degradê em
   espaço NORMALIZADO, e o ângulo CSS de uma caixa L × A é

     atan2(dx / L, -dy / A),  com (dx, dy) = (-0,7702, -0,6378)

   o que devolve -37,23° no card de 191 × 120, -50,37° no selo de 26 e
   -12,90° na pílula de 390 × 74 — os três valores que o arquivo usa. */
:root {
  --grad-marca:
    rgba(255, 190, 120, 0.9) -26.66%,
    rgba(233, 146, 255, 0.9) 33.38%,
    rgba(102, 148, 255, 0.9) 88.5%;
}

.case-ciclo li.is-ativa {
  background: linear-gradient(-37.23deg, var(--grad-marca));
}

.case-ciclo li.is-ativa p {
  font-weight: 400;
  color: #fff;
}

/* O selo do número tem o SEU ângulo, `-50,37deg`, e não o do card: ele é
   um quadrado de 26 e a mesma diagonal do card de 191 × 120 sairia quase
   reta dentro dele. As paradas são as mesmas do card — é o mesmo estilo
   de degradê do arquivo —, com a mesma correção do âmbar. */
.case-ciclo li.is-ativa .case-selo__num,
.case-ciclo li.is-ativa .case-ciclo__num {
  background: linear-gradient(-50.37deg, var(--grad-marca));
  color: var(--light-01);
}

/* ═════════════════════════════════════════════════════════════════
   5 · CARDS DE NÚMERO
   ═════════════════════════════════════════════════════════════════ */

.case-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-cards--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-cards--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.case-cards li {
  display: flex;
  flex-direction: column;
  /* `flex-start` e não o `stretch` padrão: sem ele o selo do número, que
     tem fundo branco, esticava até a largura do card. O Figma desenha
     `items-start` nos dois. */
  align-items: flex-start;
  justify-content: space-between;
  min-height: 160px;
  padding: 12px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
  list-style: none;
}

.case-cards--alto li { min-height: 190px; }
.case-cards--medio li { min-height: 180px; }

/* O número que NÃO apaga: o valor de abertura da § 04 é o mesmo R$ 55,6
   milhões do título da página, e o Figma o pinta em azul chapado para
   amarrar os dois. O degradê que apaga vale para os números de apoio. */
.case-num--azul {
  background: none;
  -webkit-text-fill-color: var(--blue);
  color: var(--blue);
}

.case-num--ambar {
  background: none;
  -webkit-text-fill-color: var(--yellow);
  color: var(--yellow);
}

.case-cards li > img {
  width: 32px;
  height: 32px;
  flex: none;
}

/* O bloco de texto volta à largura cheia do card. Ele precisa disso
   porque o `align-items: flex-start` do pai — que existe para o selo e o
   ícone não esticarem — encolheria a mancha de texto até a palavra mais
   longa. O Figma marca `w-full` nos dois. */
.case-cards__val,
.case-cards--def li > div {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* O número grande. O Figma o pinta com um degrau vertical que sai de
   Dark-05 e apaga para 14% de si mesmo — o mesmo tratamento do
   `--tell-apagado` da home. Não é decoração: é o que impede um número
   de 32px de pesar mais que o título da seção. */
.case-num {
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  background: linear-gradient(
    180deg,
    var(--dark-05) 28.947%,
    rgba(122, 133, 153, 0.14) 285.37%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* O consolidado usa o degradê da marca, e é o único dos três. */
.case-num--marca {
  background: linear-gradient(
    -16.467deg,
    var(--yellow) 21.166%,
    var(--purple) 37.503%,
    var(--blue) 89.652%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* O texto miúdo do card é MIRADO, não pego por `li p`.

   Um `.case-cards li p` genérico tem especificidade (0,1,2) e vence
   `.case-num` (0,1,0) e `.case-tag--peq` — o número de 32px renderizava
   a 12 e a etiqueta a 12 em vez de 10. Medido. Mirar a última linha do
   bloco resolve sem precisar de `!important` nem de classe nova no
   markup. */
.case-cards__val p:last-child,
.case-cards--def li > div p {
  font-weight: 300;
  font-size: var(--card-legenda, 12px);
  line-height: 1.5;
  color: var(--dark-03);
}

/* A legenda do card em 14 em vez de 12. O Figma da página de
   diagnóstico usa o corpo maior nos quatro cards da § 02, onde a
   legenda é uma linha curta e não um parágrafo. */
.case-cards--legenda-md { --card-legenda: 14px; }

/* Card de score: etiqueta miúda no alto, número e o sufixo "de 5"
   assentados na mesma linha de base. Ele é baixo de propósito — são seis
   numa grade de três, e o que importa é comparar as notas de relance. */
.case-cards--score li { min-height: 90px; }

.case-cards__nota {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.case-cards__nota .case-num { line-height: 1; }

.case-nota-de {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark-05);
}

/* Etiqueta miúda de card — 10px, quadrado 7. É um degrau abaixo da
   etiqueta de seção, e o degrau é intencional: ela nomeia uma coluna
   dentro de um bloco, não abre um capítulo. */
.case-tag--peq {
  padding-block: 0;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.case-tag--peq .case-tag__pre::before {
  width: 8px;
  height: 8px;
}

.case-tag--peq.case-tag--marca .case-tag__pre::before {
  background: var(--grad-brand);
}

/* Os cards de definição têm título grande e texto miúdo, e o par anda
   junto — 6 entre eles, contra os 12 do card de número. */
.case-cards--def li > div { gap: 6px; }

.case-cards--def h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--dark-01);
}

/* ═════════════════════════════════════════════════════════════════
   6 · A ASPA ESCURA
   ═════════════════════════════════════════════════════════════════ */

.case-aspa {
  padding-block: 160px;
  background: var(--dark-01);
}

/* A aspa tipográfica em 150px, apagando de cima para baixo. Ela vive na
   coluna vazia da esquerda: é o que dá função àquela metade e impede a
   página de parecer desequilibrada. */
.case-grade > .case-aspa__marca {
  grid-column: 1;
  font-weight: 300;
  font-size: 150px;
  line-height: 1;
  background: linear-gradient(
    180deg,
    var(--dark-05) 12.376%,
    rgba(122, 133, 153, 0.14) 50.495%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-aspa__corpo {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.case-aspa__texto {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  background: linear-gradient(235.903deg, #dde7ff 23.677%, var(--dark-05) 146.99%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.case-aspa__quem {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* O retrato do depoente.

   O arquivo é a FOTO, não um render do nó — então o véu azul de 8% que o
   Figma põe por cima volta a ser desenhado aqui, como uma camada.

   Vale registrar o caminho, porque ele não é óbvio: o MCP **remoto** não
   exporta preenchimento de imagem (devolve PNG de dimensão certa e alfa
   zero em toda a área — conferido canal a canal). O MCP **local**, o do
   app do Figma, serve o mesmo asset por `localhost:3845/assets/…` e ali
   a imagem vem inteira, 768 × 1024. Quando um export vier vazio, tente o
   outro servidor antes de desistir. */
.case-aspa__retrato {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-chip);
  background: rgba(102, 148, 255, 0.08);
  overflow: clip;
}

.case-aspa__retrato::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(102, 148, 255, 0.08);
}

.case-aspa__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.case-aspa__nome {
  display: block;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--light-01);
}

.case-aspa__papel {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--light-01);
  opacity: 0.6;
}

/* ═════════════════════════════════════════════════════════════════
   7 · AS FAIXAS DE FOTO
   ═════════════════════════════════════════════════════════════════ */

.case-faixa {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 720px;
  padding-block: 60px;
  overflow: clip;
  isolation: isolate;
}

.case-faixa--meio { align-items: center; }

.case-faixa__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.case-faixa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O véu. Na primeira faixa ele é um degradê que só existe na metade de
   baixo, porque o texto assenta lá; na segunda, o texto está no meio da
   foto e o véu é uma chapa curta. Dois problemas diferentes, duas
   soluções — e é o Figma que faz essa distinção, não eu. */
.case-faixa__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45.694%, rgba(0, 0, 0, 0.8) 100%);
}

.case-faixa--meio .case-faixa__foto::after {
  background: rgba(0, 0, 0, 0.16);
}

.case-faixa .case-grade { width: min(var(--case-larg), 100% - var(--gutter) * 2); }

.case-faixa__texto {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  color: var(--light-01);
}

/* Os destaques dentro da faixa. O âmbar é o padrão; o roxo aparece na
   página de diagnóstico, onde o número em evidência é uma quantidade
   apurada e não um valor em dinheiro. */
.case-faixa__texto em {
  font-style: normal;
  color: var(--yellow);
}

.case-faixa__texto em.em-roxo { color: var(--purple); }

/* ── O QUADRO da faixa de competência · Figma 1111:6096 ────────────
   Três linhas na coluna de 800 à direita, cada uma aberta por um filete
   de 1px a 24% de branco: o rótulo à esquerda é ETIQUETA (Bai Jamjuree
   SemiBold 16, caixa alta, 0,32 de track, a 80%), o valor à direita tem
   48 Light, e a nota ocupa a linha inteira em Funnel 18. O 65% é âmbar
   — é o número do hospital, o que está fora do padrão; o 90% e a nota
   são Light-01 CHEIO. (O arquivo tem uma lavada nesses dois, mas por
   BAIXO de uma camada sólida de Light-01 que cobre a caixa inteira —
   em `background-image` a primeira camada é a de cima, então o que se
   vê é o branco. Implementar só a lavada deixou o texto azulado.)

   Antes disto houve duas tentativas recusadas: os dois números no corpo
   grande lado a lado ("vc apenas deixou o texto grande") e uma régua
   com preenchimento, vão tracejado e marcador, que sobre a fotografia
   virou um emaranhado ("isso ta todo quebrado"). O quadro do Figma
   resolve com filete e alinhamento, sem widget. */
.case-faixa__quadro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 800px;
  max-width: 100%;
  margin-left: auto;
  color: var(--light-01);
}

/* `flex-start`, não `baseline`: no arquivo as duas colunas da linha
   começam no TOPO, logo abaixo do filete — o rótulo pequeno fica na
   altura da primeira linha do número, não na base dele. Gap 10 e
   padding-top 12, como no frame. */
.case-faixa__linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.case-faixa__linha span {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--light-01);
  opacity: 0.8;
}

.case-faixa__num {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 300;
  font-size: clamp(34px, 3.333vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--light-01);
}

/* O número que está FORA do padrão. */
.case-faixa__num--fora { color: var(--yellow); }

.case-faixa__linha--nota span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--light-01);
}

@media (max-width: 900px) {
  .case-faixa__quadro { gap: 16px; }
  .case-faixa__linha { gap: 10px; }
  .case-faixa__linha span { font-size: 12px; }
  .case-faixa__linha--nota span { font-size: 16px; }
}

/* A faixa de fecho carrega UMA frase e ela é a conclusão do documento —
   daí os 42 contra os 28 da primeira. */
.case-faixa--meio .case-faixa__texto { font-size: clamp(28px, 2.917vw, 42px); }

/* ═════════════════════════════════════════════════════════════════
   8 · OS GRÁFICOS

   A moldura é uma fotografia desfocada com um painel de vidro por
   cima. O vidro não é enfeite: ele é o que permite ler números claros
   sobre uma foto sem escurecê-la a ponto de matá-la, e é o mesmo
   tratamento do card "controle de ciclo" da home.
   ═════════════════════════════════════════════════════════════════ */

.case-graf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* 48 em cima e nas laterais, 18 embaixo: a nota de rodapé fica mais
     perto da borda do que o gráfico, e é isso que a mantém subordinada. */
  padding: 48px 48px 18px;
  border-radius: var(--r-caixa);
  overflow: clip;
  isolation: isolate;
}

/* Sem nota de rodapé o padding volta a ser simétrico. */
.case-graf--limpo { padding-bottom: 48px; }

.case-graf__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.case-graf__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Onde a foto é recortada. O Figma escreve isso como uma imagem maior
   que o quadro, deslocada — "117,65% de altura, topo em -17,62%" é um
   recorte de baixo, e nada mais. Traduzido para uma variável: os dois
   modificadores cobrem os extremos, e quem precisa de um meio-termo
   escreve o valor no `style` da figura. */
.case-graf__foto img { object-position: 50% var(--graf-foto-y, 50%); }
.case-graf__foto--topo { --graf-foto-y: 0%; }
.case-graf__foto--base { --graf-foto-y: 100%; }

/* O véu sobre a foto e a opacidade do vidro mudam de gráfico para
   gráfico — quanto mais clara a foto, mais véu ela pede para o número
   continuar legível. São dois parâmetros da INSTÂNCIA, escritos no
   `style` da figura, e não dois modificadores por combinação. */
.case-graf__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--graf-veu, 0.16));
}

/* O modificador do case do Sírio, agora escrito nas mesmas variáveis. */
.case-graf--fundo-forte { --graf-veu: 0.2; --graf-vidro: 0.24; }


.case-graf__vidro {
  position: relative;
  width: 100%;
  /* 396 é o painel do Figma dos gráficos em pé. Os deitados têm outras
     alturas (405, 452, 359) porque o que manda ali é o NÚMERO DE LINHAS,
     não uma proporção — daí a altura ser um parâmetro da instância e não
     uma constante do componente. No estreito ela some: lá vale o 4:3. */
  height: var(--graf-altura, 396px);
  border-radius: var(--r-caixa);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, var(--graf-vidro, 0.48));
  backdrop-filter: blur(70px);
  -webkit-backdrop-filter: blur(70px);
  overflow: clip;
}

/* Painel cujo conteúdo é HTML, e não desenho: a altura do Figma é o
   PISO dele, não o teto. Um painel de altura travada corta o que cresce,
   e o que cresce é texto — abaixo de 1216 a coluna encolhe, as frases
   dos esquemas ganham linha e o painel de 540 precisava de 619. Medido
   a 1216, 1024 e 901.

   Os painéis de GRÁFICO continuam travados: quem mede o palco é o
   `case.js`, e um palco que cresce com o desenho seria um laço. */
.case-graf__vidro--piso {
  height: auto;
  min-height: var(--graf-altura, 396px);
}

.case-graf__vidro svg {
  display: block;
  width: 100%;
  height: 100%;
}

.case-graf__pe {
  width: 100%;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--light-01);
  opacity: 0.8;
}

/* ── O desenho ─────────────────────────────────────────────────────
   O JS escreve geometria e classes; a cor e o corpo moram aqui. É o que
   impede um quarto lugar onde a paleta da marca vive. */

.g-linha {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1;
  opacity: 0.4;
}

.g-eixo {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: #fff;
  text-transform: uppercase;
  opacity: 0.4;
}

/* O eixo dos gráficos deitados: seta de duas pontas, e não um filete.
   Ver `barrasH` no `case.js`. */
.g-eixo-seta {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g-eixo-nome {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  fill: #fff;
  /* O Figma escreve o nome do eixo em caixa alta nos dois cases. */
  text-transform: uppercase;
}

.g-rotulo {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: #fff;
}

.g-sub {
  font-weight: 300;
  font-size: 14px;
  fill: #fff;
}

.g-valor {
  font-weight: 500;
  font-size: 14px;
  fill: var(--light-01);
}

.g-legenda {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  fill: var(--light-01);
}

.g-delta {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  fill: #fff;
}

/* ── O desenho deitado ─────────────────────────────────────────────
   O rótulo da linha fica na calha da esquerda, alinhado à direita, e é
   uma FRASE — não uma etiqueta em caixa alta como no gráfico em pé.
   Por isso ele usa a fonte de texto, e não a de rótulo. */
.g-rot-h {
  font-weight: 400;
  font-size: 12px;
  fill: var(--light-01);
}

/* O valor escrito DENTRO do segmento da barra empilhada. Claro sobre
   a cor cheia da marca — é o único texto do desenho que não vive sobre
   o vidro. */
.g-dentro {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  fill: var(--light-01);
  text-transform: uppercase;
}

/* A régua do padrão: uma linha da grade que deixou de ser grade. Ela
   nomeia a meta, então tem cor de marca e não a cinza translúcida das
   outras — e o número dela também. */
.g-linha--marca {
  stroke: var(--purple);
  opacity: 0.9;
}

.g-eixo--marca {
  fill: var(--purple);
  opacity: 1;
}

.g-marca-nome {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  fill: var(--purple);
  text-transform: uppercase;
}

/* Cores por NOME, não por papel. Os gráficos em pé nomeiam as séries
   pelo que elas significam (`inclusoes`, `bsb`), o que só funciona
   enquanto o significado é único na página. Os deitados desta página
   pintam quatro coisas diferentes de azul, então aqui a chave é a cor. */
/* ── Sankey ────────────────────────────────────────────────────────
   As fitas são a mesma cor dos nós, rebaixadas: cheias, elas competiam
   com os blocos e o cruzamento virava mancha. O rótulo do destino é
   corpo de texto, o valor é o rótulo pequeno do site. */
.g-sank__fita { opacity: 0.34; }

/* Texto CLARO, como em todo gráfico da página — eles moram sobre o
   vidro escuro, não sobre a foto. */
.g-sank__rot {
  font-weight: 400;
  font-size: 14px;
  fill: var(--light-01);
}

.g-sank__val,
.g-sank__origem {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: #fff;
  /* 0,72 e não os 0,56 dos outros valores: sobre o painel escuro do
     Sankey, 0,56 media 2,9:1 (branco a 56% sobre L 0,19); a 0,72 passa
     de 3,9 — medido em captura, 2026-09-18 */
  opacity: 0.72;
}

/* Rótulo dos meses: a fonte das tags, e por isso em CAIXA ALTA — é a
   regra da `--font-label` no site inteiro (§ 4 das diretrizes), e o
   Jefferson cobrou aqui ("todas as letras maiúsculas sempre que usamos
   essa fonte"). Tokens da `.eyebrow`: 12 / 600 / 0,48. */
.g-sank__mes {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  fill: var(--light-01);
}

/* As seis cores dos meses da referência do cliente. */
.g-barra--m1 { fill: var(--blue); }
.g-barra--m2 { fill: #35b39a; }
.g-barra--m3 { fill: var(--purple); }
.g-barra--m4 { fill: var(--yellow); }
.g-barra--m5 { fill: #e0697a; }
.g-barra--m6 { fill: #c9b45a; }

@media (max-width: 560px) {
  .g-sank__rot { font-size: 12px; }
  .g-sank__val,
  .g-sank__origem { font-size: 10px; }
  .g-sank__mes { font-size: 10px; letter-spacing: 0.03em; }
}

.g-barra--azul { fill: var(--blue); }
.g-barra--azul-claro { fill: #c5d7ff; }
.g-barra--roxo { fill: var(--purple); }
.g-barra--ambar { fill: var(--yellow); }

.g-barra--inclusoes { fill: var(--blue); }
.g-barra--exclusoes { fill: var(--yellow); }
/* Estimado: Light-01 rebaixado por uma chapa preta de 12%, que é como o
   Figma o pinta. Escrito como uma cor só para não depender de camada. */
.g-barra--estimado { fill: #d9dbe0; }

.g-serie--sp { stroke: var(--blue); }
.g-serie--bsb { stroke: var(--purple); }
/* A chapa da legenda das séries de linha. Existe porque o quadradinho é
   um `rect` (não herda `stroke`) e a série é uma `polyline` (não herda
   `fill`) — a mesma cor precisa dos dois lados. */
.g-barra--sp { fill: var(--blue); }
.g-barra--bsb { fill: var(--purple); }

/* O trecho estimado não é só tracejado: ele é a versão CLARA da cor da
   série. Tracejado sozinho some contra a grade; claro sozinho lê como
   erro de contraste. Os dois juntos dizem "isto vale menos" sem
   precisar de legenda — e a legenda ainda assim existe. */
.g-serie--sp.g-traco { stroke: #c5d7ff; }
.g-serie--bsb.g-traco { stroke: #f6d3ff; }

/* O símbolo da legenda do trecho estimado é neutro, não da cor de uma
   das séries: ele nomeia o ESTILO, que vale para as duas. */
.g-legenda-traco { stroke: rgba(247, 249, 255, 0.9); }
.g-ponto--sp { fill: var(--blue); stroke: #c5d7ff; }
.g-ponto--bsb { fill: var(--purple); stroke: #f6d3ff; }
.g-fim--sp { fill: #c5d7ff; }
.g-fim--bsb { fill: #f6d3ff; }

/* ── O crescimento ────────────────────────────────────────────────
   Uma variável, `--k`, de 0 a 1, escrita uma vez quando o gráfico entra
   em cena. Quem anima é a `transition` do CSS — não há loop por quadro
   neste arquivo nem no JS. */
.case-graf__vidro [data-surge] {
  --k: 0;
  transform: scaleY(var(--k));
  /* `fill-box` é obrigatório em SVG: sem ele a origem percentual é
     medida na viewport do SVG inteiro, e a barra cresce a partir do
     meio do painel em vez de a partir do próprio pé. */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1.1s var(--ease-out-soft) var(--d, 0ms);
}

/* Deitado, o crescimento é no eixo X e a âncora é a BORDA ESQUERDA da
   barra, que é onde fica a linha do zero. */
.case-graf__vidro [data-surge-x] {
  --k: 0;
  transform: scaleX(var(--k));
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transition: transform 1.1s var(--ease-out-soft) var(--d, 0ms);
}

.case-graf__vidro [data-tracado] {
  stroke-dasharray: var(--comp);
  stroke-dashoffset: calc(var(--comp) * (1 - var(--k, 0)));
  transition: stroke-dashoffset 1.4s var(--ease-out-soft) var(--d, 0ms);
}

.case-graf__vidro [data-aparece] {
  opacity: var(--k, 0);
  transition: opacity 0.6s var(--ease-out-soft) var(--d, 0ms);
}

.case-graf.is-desenhado .case-graf__vidro [data-surge],
.case-graf.is-desenhado .case-graf__vidro [data-surge-x],
.case-graf.is-desenhado .case-graf__vidro [data-tracado],
.case-graf.is-desenhado .case-graf__vidro [data-aparece] { --k: 1; }

@media (prefers-reduced-motion: reduce) {
  .case-graf__vidro [data-surge],
  .case-graf__vidro [data-surge-x],
  .case-graf__vidro [data-tracado],
  .case-graf__vidro [data-aparece] { --k: 1; transition: none; }
}

/* ═════════════════════════════════════════════════════════════════
   9 · A TABELA — o quarto gráfico é uma tabela, e é de propósito

   Quatro meses por quatro colunas não vira gráfico legível: vira uma
   barra por célula. A base de cálculo de Brasília é uma tabela porque
   o que ela responde é "qual é o número", não "qual é a forma".
   ═════════════════════════════════════════════════════════════════ */

.case-tabela {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #fff;
}

.case-tabela th,
.case-tabela td {
  padding: 12px 48px;
  text-align: right;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.case-tabela th:first-child,
.case-tabela td:first-child { text-align: left; }

.case-tabela thead th {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.case-tabela thead tr { background: rgba(255, 255, 255, 0.12); }

.case-tabela tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* As cinco fileiras dividem os 396 do painel em partes iguais. */
.case-tabela tr { height: 20%; }

/* ── A tabela de TEXTO ─────────────────────────────────────────────
   A dos cinco motivos de glosa é outro bicho: a segunda coluna é uma
   frase, não um número. Ela alinha à esquerda, quebra linha e reparte a
   largura pelo conteúdo — 12/58/15/15, que é a proporção do Figma
   (60/320/60/60 mais as folgas do `justify-between`).

   A fileira aqui tem altura FIXA de 48, e não 20% do painel: são cinco
   motivos mais o cabeçalho, e o vidro cresce com eles em vez de esticar
   seis fileiras dentro de uma caixa de 396. */
.case-tabela--texto tr { height: 48px; }

.case-tabela--texto th,
.case-tabela--texto td { padding: 12px 28px; }

/* O cabeçalho QUEBRA. "CÓD. ANS" em 12% de uma tabela de 600 precisa de
   118px com o recuo e tem 72 — com `nowrap` ele escrevia por cima de
   "MOTIVO" em toda largura entre 900 e 1216. Duas linhas de 10px cabem
   folgadas na fileira de 48. Medido. */
.case-tabela--texto thead th { white-space: normal; }

/* A repartição das colunas mora AQUI e não no `colgroup`: assim ela pode
   mudar no estreito, coisa que um `width` inline no `<col>` não deixa —
   inline vence qualquer folha de estilo. As proporções são as do Figma:
   60/320/60/60 nos motivos e 400/120 nas regras, mais as folgas do
   `justify-between`. */
.case-tabela--motivos th:nth-child(1) { width: 12%; }
.case-tabela--motivos th:nth-child(2) { width: 58%; }
.case-tabela--motivos th:nth-child(3) { width: 15%; }
.case-tabela--motivos th:nth-child(4) { width: 15%; }

.case-tabela--regras th:nth-child(1) { width: 68%; }
.case-tabela--regras th:nth-child(2) { width: 32%; }

/* A célula que carrega uma FRASE, e não um número: alinha à esquerda e
   pode quebrar linha. É marcada no markup e não por posição — a tabela
   dos motivos de glosa tem a frase na segunda coluna, a das regras tem
   na primeira, e uma regra por `nth-child` erraria uma das duas. */
.case-tabela th.case-tabela__frase,
.case-tabela td.case-tabela__frase {
  text-align: left;
  white-space: normal;
}

.case-tabela__var {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.case-tabela__var img { width: 16px; height: 8px; }

.case-tabela__var--sobe { color: #c5d7ff; }

/* A seta é UM desenho só, espelhado. O arquivo exportado desce; o Figma
   o vira no eixo Y para a variação positiva, e é o mesmo caminho nos
   dois — o que muda é a cor. Espelhar aqui evita um segundo SVG que
   sairia de sincronia no primeiro ajuste. */
.case-tabela__var--sobe img { transform: scaleY(-1); }
.case-tabela__var--desce { color: var(--yellow); }

/* ═════════════════════════════════════════════════════════════════
   9b · O FUNIL — quatro degraus, cada um o que sobrou do anterior

   O Figma desenha quatro pílulas centradas de 570, 510, 450 e 390 num
   painel de 704: 81%, 72,4%, 63,9% e 55,4%, degrau de 8,5 pontos. A
   largura mora no markup (`--larg`) porque é DADO — é o afunilamento
   que a seção existe para mostrar —, e não estilo.
   ═════════════════════════════════════════════════════════════════ */

.case-funil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  /* 53 em cima e embaixo: é o que sobra dos 476 do painel depois das
     quatro pílulas de 74 e das três folgas de 24. */
  padding-block: 52px;
  list-style: none;
}

.case-funil li {
  display: flex;
  align-items: center;
  gap: 16px;
  width: var(--larg, 100%);
  min-height: 74px;
  padding: 6px 24px 6px 6px;
  border-radius: 68px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--light-01);
}

/* O último degrau é o RESULTADO, e é o único ponto de cor cheia do
   painel — mesma decisão do card ativo do ciclo. -12,90° é o ângulo da
   caixa de 390 × 74; ver o bloco do `--grad-marca`. */
.case-funil li:last-child {
  background: linear-gradient(-12.9deg, var(--grad-marca));
}

.case-funil__num {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 18px;
  border-radius: 64px;
  background: rgba(255, 255, 255, 0.24);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}

.case-funil li:last-child .case-funil__num { padding-inline: 14px; }

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

.case-funil__txt strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
}

.case-funil__txt em {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

/* No degrau de fecho a segunda linha não é apoio: ela carrega o recorte
   de R$ 680 mil. Sem apagar. */
.case-funil li:last-child .case-funil__txt em { opacity: 1; }

/* ═════════════════════════════════════════════════════════════════
   9c · OS ESQUEMAS — dois desenhos que não são gráficos

   "O que o plug-in mede na base" (`940:24100`) traz duas medições, uma
   por painel de vidro dentro do MESMO card. A primeira é uma cadeia de
   quatro estados com o intervalo medido marcado entre eles; a segunda é
   uma convergência de três fontes num cruzamento.

   Nenhuma das duas é dado quantitativo, então nenhuma vira SVG gerado:
   são caixas de texto com ligações. As ligações da cadeia são bordas de
   CSS — exatas, e acompanham a coluna. As da convergência são um SVG
   inline esticado, porque três linhas que se encontram num ponto não
   saem de retângulos.
   ═════════════════════════════════════════════════════════════════ */

/* ── O vocabulário das ligações ───────────────────────────────────
   Toda ligação desta página tem as mesmas duas pontas, e elas dizem a
   DIREÇÃO: um ponto cheio na origem e um CHEVRON na chegada.

   Chevron, e não triângulo cheio — é o que o Figma desenha, e a
   diferença se vê. Ele é um quadrado de 6 girado 45° com duas bordas: o
   vértice é o canto que sobra, e posicioná-lo é pôr o CENTRO do quadrado
   meia diagonal (4,25) atrás do ponto onde a ponta deve encostar.

   A cor mora em `--lig`, e não em `color`, porque metade dessas ligações
   carrega texto dentro (o "MEDIDO" do colchete) e o texto tem a cor
   dele. Nas trilhas e no par de perfis `--lig` é a cor da trilha. */

.case-esq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esq-folga, 48px);
  width: 100%;
  height: 100%;
  padding: 32px 20px 32px;
  color: var(--light-01);
}

.case-esq__tit {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

.case-esq__pe {
  max-width: 464px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.8;
}

/* ── A cadeia ─────────────────────────────────────────────────────
   Quatro caixas em quatro colunas, e as ligações ocupam DUAS colunas
   mais a calha entre elas. Recuar `(100% - calha) / 4` de cada lado põe
   a ponta da ligação exatamente no centro das duas caixas vizinhas —
   não é aproximação, é a conta: numa área de 2c + g, meia caixa é
   c / 2 = (2c + g - g) / 4. */
.case-fluxo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  width: 100%;
}

.case-fluxo > :nth-child(1) { grid-column: 1; grid-row: 2; }
.case-fluxo > :nth-child(2) { grid-column: 1 / span 2; grid-row: 3; }
.case-fluxo > :nth-child(3) { grid-column: 2; grid-row: 2; }
.case-fluxo > :nth-child(4) { grid-column: 2 / span 2; grid-row: 1; }
.case-fluxo > :nth-child(5) { grid-column: 3; grid-row: 2; }
.case-fluxo > :nth-child(6) { grid-column: 3 / span 2; grid-row: 3; }
.case-fluxo > :nth-child(7) { grid-column: 4; grid-row: 2; }

.case-fluxo__cx {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 8px;
  border-radius: var(--r-caixa);
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
}

.case-fluxo__cx strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-fluxo__cx span {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

/* O estado de fecho é o único de cor cheia — é onde a conta sai do
   hospital, que é o que a medição existe para cronometrar. */
.case-fluxo__cx--fim { background: var(--blue); }
.case-fluxo__cx--fim span { opacity: 1; }

.case-fluxo__lig {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: calc((100% - 16px) / 4);
  /* `--lig` é a cor da LIGAÇÃO, e existe separada de `color` porque o
     rótulo escrito dentro do colchete tem a cor do texto, não a da
     linha. Usar `currentColor` aqui obrigaria a desfazer a herança em
     todo filho que carrega texto. */
  --lig: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--lig);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.case-fluxo__lig::before,
.case-fluxo__lig::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Origem à esquerda, chegada à direita — nos três colchetes. */
.case-fluxo__lig::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  left: 0;
  transform: translate(-50%, -50%);
}

.case-fluxo__lig::after {
  width: 6px;
  height: 6px;
  border: 0 solid var(--lig);
  left: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.case-fluxo__lig--baixo {
  height: 32px;
  border-top: 0;
  border-radius: 0 0 var(--r-caixa) var(--r-caixa);
}

.case-fluxo__lig--baixo::before { top: 0; }
.case-fluxo__lig--baixo::after {
  top: 4px;
  border-left-width: 1px;
  border-top-width: 1px;
}

.case-fluxo__lig--cima {
  height: 30px;
  border-bottom: 0;
  border-radius: var(--r-caixa) var(--r-caixa) 0 0;
}

.case-fluxo__lig--cima::before { top: 100%; }
.case-fluxo__lig--cima::after {
  top: calc(100% - 4px);
  border-right-width: 1px;
  border-bottom-width: 1px;
}

/* ── A convergência ───────────────────────────────────────────────
   As cinco faixas são as do Figma — 258, 89, 140, 45 e 132 num painel
   de 664 —, escritas em `fr` para que a proporção sobreviva a qualquer
   largura. */
.case-cruza {
  display: grid;
  grid-template-columns: 258fr 89fr 140fr 45fr 132fr;
  align-items: center;
  width: 100%;
}

.case-cruza__fontes {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}

.case-cruza__fontes li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-caixa);
  background: rgba(255, 255, 255, 0.2);
}

.case-cruza__fontes img {
  width: 28px;
  height: 28px;
  flex: none;
}

.case-cruza__fontes strong {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-cruza__fontes span {
  display: block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;
  opacity: 0.8;
}

/* O SVG das três linhas é esticado (`preserveAspectRatio="none"`) porque
   a coluna dele muda de largura; o traço não estica junto, e é o que o
   `non-scaling-stroke` garante. */
.case-cruza__lig {
  position: relative;
  grid-column: 2;
  align-self: stretch;
  --lig: rgba(255, 255, 255, 0.4);
}

/* A ponta que entra no círculo. Ela mora no WRAPPER e não no SVG: o SVG
   é esticado (`preserveAspectRatio="none"`) e deformaria o chevron. */
.case-cruza__lig::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 0 solid var(--lig);
  border-top-width: 1px;
  border-right-width: 1px;
  left: calc(100% - 4px);
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.case-cruza__nucleo {
  grid-column: 3;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

/* A seta é borda, não desenho: um filete de 1px com um triângulo de
   borda na ponta. Um SVG aqui distorceria a ponta junto com a coluna. */
.case-cruza__seta {
  grid-column: 4;
  position: relative;
  height: 1px;
  margin-inline: 6px;
  --lig: rgba(255, 255, 255, 0.4);
  background: var(--lig);
}

.case-cruza__seta::before,
.case-cruza__seta::after {
  content: '';
  position: absolute;
  top: 50%;
}

.case-cruza__seta::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lig);
  left: 0;
  transform: translate(-50%, -50%);
}

.case-cruza__seta::after {
  width: 6px;
  height: 6px;
  border: 0 solid var(--lig);
  border-top-width: 1px;
  border-right-width: 1px;
  left: calc(100% - 4px);
  transform: translate(-50%, -50%) rotate(45deg);
}

.case-cruza__fim {
  grid-column: 5;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: var(--r-caixa);
  background: var(--purple);
  text-align: center;
}

.case-cruza__fim strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-cruza__fim span {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}

/* ── O par de perfis ──────────────────────────────────────────────
   "Quem faz o trabalho" (`908:22380`): dois selos que descem para um
   núcleo comum, e uma tira de rodapé com as três competências.

   As sete faixas são as do Figma num painel de 704 com 26 de recuo:
   212 (rótulo) · 15 · 80 (selo) · 49 · 80 (selo) · 18 · 198 (rótulo).
   Escritas em `fr` para sobreviver a qualquer largura — e é o que faz o
   núcleo, colocado nas colunas do meio, cair exatamente no ponto médio
   entre os dois selos sem nenhuma conta escrita à mão. */
.case-duo-painel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 48px 26px 0;
  color: var(--light-01);
}

.case-duo {
  flex: 1;
  display: grid;
  grid-template-columns: 212fr 15fr 80fr 49fr 80fr 18fr 198fr;
  align-items: start;
  width: 100%;
}

.case-duo > :nth-child(1) { grid-column: 1; grid-row: 1; }
.case-duo > :nth-child(2) { grid-column: 3; grid-row: 1; }
.case-duo > :nth-child(3) { grid-column: 5; grid-row: 1; }
.case-duo > :nth-child(4) { grid-column: 7; grid-row: 1; }
.case-duo > :nth-child(5) { grid-column: 3 / span 3; grid-row: 2; }
.case-duo > :nth-child(6) { grid-column: 3 / span 3; grid-row: 3; }
.case-duo > :nth-child(7) { grid-column: 2 / span 5; grid-row: 4; }

.case-duo__rot {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-duo__rot--esq { text-align: right; }

.case-duo__rot strong,
.case-duo__pe strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-duo__rot span,
.case-duo__pe span {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

/* O selo é uma pastilha com DUAS pontas arredondadas de um lado só —
   12 do lado de dentro, meia-cana do lado de fora. O da direita é o
   espelho do da esquerda. */
.case-duo__selo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 80px;
  padding: 10px 16px 10px 12px;
  border-radius: 12px 222px 222px 12px;
  background: rgba(255, 255, 255, 0.24);
}

.case-duo__selo--dir {
  justify-content: flex-start;
  padding: 10px 12px 10px 16px;
  border-radius: 222px 12px 12px 222px;
}

/* Os dois desenhos de cabeça saem do Figma virados; o arquivo os aplica
   espelhados, e é assim que um olha para o outro. */
.case-duo__selo img {
  height: 60px;
  width: auto;
  transform: scaleX(-1);
}

/* Os trilhos do estreito não existem no largo — lá a descida é o SVG. */
.case-duo__desce { display: none; }

.case-duo__lig {
  display: block;
  height: 56px;
}

.case-duo__lig svg,
.case-cruza__lig svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* As duas descidas são COLORIDAS, uma por perfil — azul-claro no
   engenheiro, roxo-claro no enfermeiro —, e cada uma começa com um
   ponto no selo e termina no ponto comum sobre o núcleo.

   O ponto é uma subdemão de comprimento ZERO com ponta redonda: com
   `non-scaling-stroke` ele sai círculo mesmo num SVG esticado, coisa
   que um `<circle>` não faz. */
.case-lig-svg path {
  fill: none;
  stroke: var(--lig, rgba(255, 255, 255, 0.4));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.case-lig-svg .case-lig--a { stroke: #c5d7ff; }
.case-lig-svg .case-lig--b { stroke: #f6d3ff; }

.case-lig-svg .case-lig--pt {
  stroke-width: 5;
  stroke-linecap: round;
}

.case-duo__nucleo {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.case-duo__nucleo img { width: 72px; height: 52px; }

.case-duo__pe {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 260 é maior que a faixa de colunas em que ele mora, e de propósito:
     ele TRANSBORDA os dois lados por igual, o que o mantém centrado no
     ponto médio dos dois selos e dá à manchete a linha única do Figma.
     Preso à faixa, "Agentes de auditoria em produção" quebrava em duas
     abaixo de 1400. */
  justify-self: center;
  width: 260px;
  max-width: 100%;
  text-align: center;
}

/* A tira de rodapé sangra: ela ocupa a largura cheia do vidro, e o
   recuo de 26 do painel é desfeito com margem negativa. */
.case-duo__rodape {
  margin-inline: -26px;
  padding: 20px;
}

.case-duo__rodape > p {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.case-duo__comp {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.case-duo__comp li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.24);
}

.case-duo__comp b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.case-duo__comp strong {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-duo__comp span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

/* ── As duas trilhas ──────────────────────────────────────────────
   "Tecnologia e conversa" (`908:22435`): duas colunas de três degraus
   que descem em paralelo e se encontram num card de fecho.

   O painel do Figma tem 704 com 48 de recuo, então o conteúdo mede 608:
   280 · 48 · 280. Vertical: cabeçalho 31, seta 32, card 68, e assim até
   379; a união ocupa os 58 seguintes e o fecho, 76 — o que fecha os 561
   do vidro com 48 embaixo.

   As setas NÃO vieram no código do MCP, mas estão no render: um ponto no
   alto, um filete e uma ponta embaixo. São de borda, como as outras. */
.case-trilhas {
  display: grid;
  grid-template-columns: 280fr 48fr 280fr;
  width: 100%;
  height: 100%;
  padding: 48px;
  color: var(--light-01);
}

.case-trilhas > :nth-child(1) { grid-column: 1; }
.case-trilhas > :nth-child(2) { grid-column: 3; }
.case-trilhas > :nth-child(3) { grid-column: 1 / -1; }
.case-trilhas > :nth-child(4) { grid-column: 1 / -1; }

.case-trilha {
  display: flex;
  flex-direction: column;
}



.case-trilha__cab {
  padding: 12px;
  border-radius: 74px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* Os cabeçalhos são as versões CLARAS da cor de cada trilha, com o texto
   na versão escura. É o único par do arquivo que usa as duas pontas da
   mesma família. */
.case-trilha--a .case-trilha__cab { background: #c5d7ff; color: #132d6b; }
.case-trilha--b .case-trilha__cab { background: #f6d3ff; color: #4b1f4b; }

.case-trilha__cx {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 8px;
  border-radius: var(--r-caixa);
  background: rgba(255, 255, 255, 0.2);
}

/* A trilha da esquerda encosta o texto na calha central, e a barra fica
   do lado de fora — as duas apontam para o meio, que é onde elas se
   encontram. */
.case-trilha--a .case-trilha__cx { text-align: right; }

/* A mancha de texto é MIRADA por classe, e não por `> span`: a barra
   de cor também é um `span`, e `.case-trilha__cx > span` (0,1,1) vencia
   `.case-trilha__barra` (0,1,0) — a barra de 6px recebia `flex: 1` e
   comia metade do card. Medido. */
.case-trilha__txt {
  flex: 1;
  min-width: 0;
}

.case-trilha__txt strong {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-trilha__txt em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

.case-trilha__barra {
  flex: none;
  align-self: stretch;
  width: 6px;
  border-radius: 16px;
}

.case-trilha--a .case-trilha__barra { background: var(--blue); }
.case-trilha--b .case-trilha__barra { background: var(--purple); }

/* A seta de descida: ponto em cima, filete, ponta embaixo. */
/* A seta de descida herda a cor da trilha: ponto em cima, filete e
   chevron embaixo. */
.case-seta-baixo {
  position: relative;
  align-self: center;
  width: 1px;
  height: 32px;
  background: var(--lig);
}

.case-trilha--a { --lig: #c5d7ff; }
.case-trilha--b { --lig: #f6d3ff; }

.case-seta-baixo::before,
.case-seta-baixo::after {
  content: '';
  position: absolute;
  left: 50%;
}

.case-seta-baixo::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lig);
  top: 0;
  transform: translate(-50%, -50%);
}

.case-seta-baixo::after {
  width: 6px;
  height: 6px;
  border: 0 solid var(--lig);
  border-right-width: 1px;
  border-bottom-width: 1px;
  top: calc(100% - 4px);
  transform: translate(-50%, -50%) rotate(45deg);
}

.case-trilhas__uniao {
  position: relative;
  display: block;
  height: 58px;
  --lig: #f6d3ff;
}

.case-trilhas__uniao svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A ponta que entra no card de fecho fica no wrapper, pelo mesmo motivo
   da convergência do plug-in: o SVG é esticado. */
.case-trilhas__uniao::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 0 solid var(--lig);
  border-right-width: 1px;
  border-bottom-width: 1px;
  left: 50%;
  top: calc(100% - 4px);
  transform: translate(-50%, -50%) rotate(45deg);
}

.case-trilhas__fim {
  justify-self: center;
  /* 280 de 608 — a mesma largura de uma trilha, centrada nas duas. */
  width: 46.05%;
  padding: 12px;
  border-radius: var(--r-caixa);
  background: linear-gradient(-18.15deg, var(--grad-marca));
  text-align: center;
}

.case-trilhas__fim strong {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.case-trilhas__fim span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}

/* ── A tabela na faixa intermediária ──────────────────────────────
   Entre 900 e 1180 o painel encolhe mas o CSS ainda é o do largo: a
   coluna de 25% vale 135px e "R$ 15.875,02" com 48 de recuo de cada
   lado pede 191. O painel transbordava 29px, e o cabeçalho — em
   `nowrap` — escrevia "finalizadas" por cima de "Ticket médio".
   Medido a 1024 no case do Sírio.

   O recuo cede primeiro, e o cabeçalho passa a poder quebrar. As
   larguras por conteúdo são as mesmas que o estreito já usava. */
@media (max-width: 1180px) {
  /* A régua vira 2×2 antes do estreito. Os quatro KPIs só cabem numa
     fileira a partir de ~1216 de janela: abaixo disso a quebra em flex
     deixava três em cima e um sozinho embaixo, com 97px de folga entre
     os de cima. Duas colunas iguais leem como decisão; 3+1 lê como
     acidente. */
  .case-regua__itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 24px;
  }

  .case-tabela th,
  .case-tabela td { padding-inline: 20px; }

  .case-tabela thead th { white-space: normal; }

  .case-tabela:not(.case-tabela--texto) th:nth-child(1) { width: 18%; }
  .case-tabela:not(.case-tabela--texto) th:nth-child(2) { width: 20%; }
  .case-tabela:not(.case-tabela--texto) th:nth-child(3) { width: 36%; }
  .case-tabela:not(.case-tabela--texto) th:nth-child(4) { width: 26%; }
}

/* ═════════════════════════════════════════════════════════════════
   9d · O MOTION DOS ESQUEMAS

   Os gráficos crescem, as linhas se traçam — e os esquemas estavam
   parados. Aqui eles passam a se MONTAR na ordem em que se leem: a
   caixa aparece, a ligação sai dela, a caixa seguinte aparece.

   Duas regras do § 5 das diretrizes mandam no que está abaixo. Motion de
   ENTRADA é temporizado, não scrubbed — quem dispara é o `is-seen` que o
   `rail.js` já põe em cada `[data-rise]`, e o resto é `transition` com
   `--d`. E `prefers-reduced-motion` tem caminho próprio, no fim.

   As ligações de SVG são DESENHADAS de verdade: `stroke-dasharray` com o
   comprimento medido em `getTotalLength()` — o mesmo recurso do gráfico
   de linhas. As de borda (o colchete da cadeia, a seta do cruzamento)
   não podem ser desenhadas assim, então entram deslizando no sentido do
   fluxo. Tentar `clip-path` nelas cortava o ponto e o chevron, que ficam
   FORA da caixa do elemento.
   ═════════════════════════════════════════════════════════════════ */

/* ── As peças ─────────────────────────────────────────────────────── */
.js .case-graf .case-fluxo > *,
.js .case-graf .case-cruza__fontes li,
.js .case-graf .case-cruza__nucleo,
.js .case-graf .case-cruza__fim,
.js .case-graf .case-duo__rot,
.js .case-graf .case-duo__selo,
.js .case-graf .case-duo__nucleo,
.js .case-graf .case-duo__desce,
.js .case-graf .case-duo__pe,
.js .case-graf .case-duo__rodape > p,
.js .case-graf .case-duo__comp li,
.js .case-graf .case-trilha > *,
.js .case-graf .case-trilhas__fim,
.js .case-graf .case-funil li,
.js .case-graf .case-esq__tit,
.js .case-graf .case-esq__pe {
  opacity: 0;
  transform: translateY(10px);
}

.js .case-graf.is-seen .case-fluxo > *,
.js .case-graf.is-seen .case-cruza__fontes li,
.js .case-graf.is-seen .case-cruza__nucleo,
.js .case-graf.is-seen .case-cruza__fim,
.js .case-graf.is-seen .case-duo__rot,
.js .case-graf.is-seen .case-duo__selo,
.js .case-graf.is-seen .case-duo__nucleo,
.js .case-graf.is-seen .case-duo__desce,
.js .case-graf.is-seen .case-duo__pe,
.js .case-graf.is-seen .case-duo__rodape > p,
.js .case-graf.is-seen .case-duo__comp li,
.js .case-graf.is-seen .case-trilha > *,
.js .case-graf.is-seen .case-trilhas__fim,
.js .case-graf.is-seen .case-funil li,
.js .case-graf.is-seen .case-esq__tit,
.js .case-graf.is-seen .case-esq__pe {
  opacity: 1;
  transform: none;
  transition: opacity 0.62s var(--ease-out-expo) var(--d, 0ms),
    transform 0.7s var(--ease-out-expo) var(--d, 0ms);
}

/* ── As ligações de borda: deslizam no sentido do fluxo ───────────── */
.js .case-graf .case-cruza__seta {
  opacity: 0;
  transform: translateX(-10px);
}

.js .case-graf.is-seen .case-cruza__seta {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease-out-soft) var(--d, 0ms),
    transform 0.6s var(--ease-out-soft) var(--d, 0ms);
}

/* ── As ligações de SVG: traçadas ─────────────────────────────────── */
.js .case-graf .case-lig-svg path:not(.case-lig--pt) {
  stroke-dasharray: var(--comp, 0);
  stroke-dashoffset: var(--comp, 0);
}

.js .case-graf.is-seen .case-lig-svg path:not(.case-lig--pt) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.85s var(--ease-out-soft) var(--d, 0ms);
}

/* Os pontos das pontas aparecem depois do traço chegar. */
.js .case-graf .case-lig-svg .case-lig--pt { opacity: 0; }

.js .case-graf.is-seen .case-lig-svg .case-lig--pt {
  opacity: 1;
  transition: opacity 0.4s linear var(--d, 0ms);
}

/* A ponta de chegada do cruzamento e da união é `::after` do invólucro,
   e acompanha o traço que a antecede. */
.js .case-graf .case-cruza__lig::after,
.js .case-graf .case-trilhas__uniao::after { opacity: 0; }

.js .case-graf.is-seen .case-cruza__lig::after,
.js .case-graf.is-seen .case-trilhas__uniao::after {
  opacity: 1;
  transition: opacity 0.4s linear var(--d, 0ms);
}

/* ── A pauta: quem entra quando ────────────────────────────────────
   Os atrasos moram no CSS e não no markup porque a ordem de leitura de
   cada esquema É a ordem do DOM — não há o que um atributo diria que o
   `:nth-child` já não diga. */

/* A cadeia: caixa, ligação, caixa… na ordem do fluxo. */
.case-fluxo > :nth-child(1) { --d: 140ms; }
.case-fluxo > :nth-child(2) { --d: 250ms; }
.case-fluxo > :nth-child(3) { --d: 360ms; }
.case-fluxo > :nth-child(4) { --d: 470ms; }
.case-fluxo > :nth-child(5) { --d: 580ms; }
.case-fluxo > :nth-child(6) { --d: 690ms; }
.case-fluxo > :nth-child(7) { --d: 800ms; }

/* O cruzamento: as três fontes, o traço que converge, o núcleo, a seta,
   o resultado. */
.case-cruza__fontes li:nth-child(1) { --d: 140ms; }
.case-cruza__fontes li:nth-child(2) { --d: 230ms; }
.case-cruza__fontes li:nth-child(3) { --d: 320ms; }
.case-cruza__lig { --d: 420ms; }
.case-cruza__lig::after { --d: 1.05s; }
.case-cruza__nucleo { --d: 560ms; }
.case-cruza__seta { --d: 1.1s; }
.case-cruza__fim { --d: 1.2s; }

/* O par de perfis: um selo com o seu rótulo, o outro, as duas descidas,
   o núcleo, o fecho — e só então a tira do rodapé. */
.case-duo > :nth-child(1),
.case-duo > :nth-child(2) { --d: 140ms; }
.case-duo > :nth-child(3),
.case-duo > :nth-child(4) { --d: 250ms; }
.case-duo__lig { --d: 400ms; }
.case-duo__desce--a { --d: 400ms; }
.case-duo__desce--b { --d: 520ms; }
.case-duo__lig .case-lig--pt { --d: 1.15s; }
.case-duo__nucleo { --d: 1.2s; }
.case-duo__pe { --d: 1.3s; }
.case-duo__rodape > p { --d: 1.4s; }
.case-duo__comp li:nth-child(1) { --d: 1.48s; }
.case-duo__comp li:nth-child(2) { --d: 1.56s; }
.case-duo__comp li:nth-child(3) { --d: 1.64s; }

/* As duas trilhas descem EM PARALELO, que é o que a seção afirma. */
.case-trilha > :nth-child(1) { --d: 140ms; }
.case-trilha > :nth-child(2) { --d: 250ms; }
.case-trilha > :nth-child(3) { --d: 330ms; }
.case-trilha > :nth-child(4) { --d: 440ms; }
.case-trilha > :nth-child(5) { --d: 520ms; }
.case-trilha > :nth-child(6) { --d: 630ms; }
.case-trilha > :nth-child(7) { --d: 710ms; }
.case-trilhas__uniao { --d: 830ms; }
.case-trilhas__uniao .case-lig--pt { --d: 860ms; }
.case-trilhas__uniao::after { --d: 1.6s; }
.case-trilhas__fim { --d: 1.7s; }

/* O funil, degrau a degrau. */
.case-funil li:nth-child(1) { --d: 140ms; }
.case-funil li:nth-child(2) { --d: 260ms; }
.case-funil li:nth-child(3) { --d: 380ms; }
.case-funil li:nth-child(4) { --d: 500ms; }

/* Título e nota do painel emolduram a sequência. */
.case-esq__tit { --d: 80ms; }
.case-esq__pe { --d: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .js .case-graf .case-fluxo > *,
  .js .case-graf .case-cruza__fontes li,
  .js .case-graf .case-cruza__nucleo,
  .js .case-graf .case-cruza__fim,
  .js .case-graf .case-cruza__seta,
  .js .case-graf .case-duo__rot,
  .js .case-graf .case-duo__selo,
  .js .case-graf .case-duo__nucleo,
  .js .case-graf .case-duo__desce,
  .js .case-graf .case-duo__pe,
  .js .case-graf .case-duo__rodape > p,
  .js .case-graf .case-duo__comp li,
  .js .case-graf .case-trilha > *,
  .js .case-graf .case-trilhas__fim,
  .js .case-graf .case-funil li,
  .js .case-graf .case-esq__tit,
  .js .case-graf .case-esq__pe,
  .js .case-graf .case-lig-svg .case-lig--pt,
  .js .case-graf .case-cruza__lig::after,
  .js .case-graf .case-trilhas__uniao::after {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .case-graf .case-lig-svg path:not(.case-lig--pt) {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ═════════════════════════════════════════════════════════════════
   10 · A NOTA METODOLÓGICA
   ═════════════════════════════════════════════════════════════════ */

.case-defs {
  display: flex;
  flex-direction: column;
}

.case-defs > div {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding-block: 24px;
  border-top: 1px solid rgba(24, 27, 31, 0.12);
}

.case-defs dt {
  width: 200px;
  flex: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-01);
}

.case-defs dd {
  flex: 1;
  min-width: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
}

/* ═════════════════════════════════════════════════════════════════
   11 · O CTA

   Mesmo componente da home — foto sangrando, selo, manchete e a seta —
   mas ESTÁTICO. Na home ele é um palco `fixed` que cresce com o scroll
   (`grow.js`); aqui o Figma desenha uma faixa de 740 já aberta, e
   reproduzir a mecânica de crescimento seria inventar movimento que o
   arquivo não pede.
   ═════════════════════════════════════════════════════════════════ */

/* O CTA PRENDE e o rodapé sobe por cima dele — o mesmo reveal da home,
   e sem JS: é o `sticky` fazendo o trabalho.

   A home consegue isso com o palco em `position: fixed`, porque lá o CTA
   É a viewport (o `grow.js` abre a moldura até ela). Aqui ele tem altura
   própria, 740 do Figma, então quem prende é `sticky`.

   O `min()` é a guarda: numa janela mais baixa que 740 o pé do CTA
   nunca chegaria a ser visto, porque ele fica preso no topo e o rodapé
   entra por baixo. Limitado à altura da janela, ele cabe sempre. */
.case-cta {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  /* 740 do Figma, e NUNCA mais que isso — pedido do cliente.

     O preço está registrado: a faixa não enche uma janela mais alta que
     740, então, no instante em que ela prende no topo, o que ocupa o
     resto da tela é o rodapé subindo. Não há como ter as duas coisas ao
     mesmo tempo com uma faixa de altura fixa; na home o mesmo efeito
     funciona porque lá o palco é `fixed; inset: 0` e É a janela. */
  /* 2026-09-27: a altura do CONTEÚDO com o respiro padrão das CTAs fora
     da home (`--cta-foto-pad`, 192 em cima e embaixo). O teto de 740 caiu
     com ele: o cliente pediu o dobro do respiro. */
  padding-block: var(--cta-foto-pad);
  overflow: clip;
  isolation: isolate;
}

/* O preto fica na CAMADA DA FOTO, não no CTA.

   Com `isolation: isolate` no pai, um filho em `z-index: -1` pinta atrás
   do FUNDO DO PRÓPRIO PAI — então a foto do lobby existia, carregava, e
   era coberta pelo `background: var(--dark-01)` que estava no CTA.
   Medido: a seção aparecia preta com a imagem em cache e sem erro de
   rede. O Figma também põe o `#181B1F` embaixo das imagens. */
.case-cta__foto {
  background: var(--dark-01);
}


/* O rodapé é quem passa por cima. O `z-index: 1` e o `position` dele já
   vêm do `site.css` — o que falta aqui é só garantir que ele tenha um
   fundo opaco em toda a área, o que ele tem. */

.case-cta__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.case-cta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.case-cta__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
}

.case-cta__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--cta-foto-gap);
  /* o recuo da `.foto-cta`: 112 a 1440 e, mais largo, a borda da coluna
     de 1216 — a da `.case-grade`. Eram 112 fixos, e a 1796 o bloco ficava
     a 112 da borda com a página a 290 (2026-09-27). */
  padding-left: max(clamp(20px, 7.778vw, 112px), (100% - 1216px) / 2);
  padding-right: var(--gutter);
}

/* ═════════════════════════════════════════════════════════════════
   12 · CELULAR

   A grade de duas colunas some abaixo de 900. Não é preguiça: a coluna
   de conteúdo teria 160px a 375, e nenhuma das medidas desta página
   sobrevive a isso. O rótulo volta a ficar em cima do que ele nomeia,
   que é o arranjo natural de uma coluna só.
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Todos com o mesmo prefixo `.case-grade >`, e isso IMPORTA: as
     regras de coluna do desktop são `.case-grade > .classe` (0,2,0).
     Escritas aqui como `.classe` (0,1,0) elas perdiam, o conteúdo
     continuava na coluna 2 — que vira IMPLÍCITA quando a explícita é
     uma só — e a coluna 1 colapsava para zero com o texto pendurado
     fora da tela. Medido: `grid-template-columns: 0px 303px` a 375.

     A lição geral: dentro de um `@media` a especificidade continua
     valendo. Um seletor mais curto lá dentro não ganha por vir depois. */
  .case-grade > *,
  .case-grade > .case-rotulo,
  .case-grade > .case-largo,
  .case-grade > .case-abre__marca,
  .case-grade > .case-abre__texto,
  .case-grade > .case-aspa__marca { grid-column: 1; }

  /* ── UM respiro para a página inteira ──────────────────────────
     A abertura tinha quatro valores diferentes entre os blocos: 24 da
     grade, 14 entre título e lede, e 72 duas vezes (os 48 de margem do
     vídeo somados aos 24 da grade). Aqui é 24 em tudo — a coluna é uma
     só e o que separa dois blocos é sempre a mesma distância. */
  .case-grade,
  .case-regua {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--respiro);
  }

  .case { --respiro: 24px; }

  .case-abre {
    padding-top: 128px;
    padding-bottom: 48px;
  }

  /* As margens somavam com o `row-gap` da grade e dobravam a distância. */
  .case-video,
  .case-regua { margin-top: 0; }

  .case-grade > .case-abre__marca {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* ── Etiqueta → título → lede: o MESMO vão óptico ──────────────
     2026-09-28, pedido do cliente: "o gap entre título e texto de
     descrição está muito curto… diferente do gap entre tag e título. A
     gente tem que manter isso uniforme."

     Medido antes, a 390, da linha de base de cima ao topo das
     maiúsculas de baixo: etiqueta→título 19,7 e título→lede 11,9 em
     Cases e Imprensa; 43,7 e 23,9 no blog; 43,7 e 35,9 no case e na
     Política. Os 19,7 são os do site: nos cabeçalhos da home e do Quem
     somos o mesmo vão mede 18,8. Os 43,7 vinham do `row-gap` de 24
     somado aos 12 de `padding` da etiqueta.

     Agora os dois vãos medem ~19,8 em toda página desta abertura:
     - título→lede: `gap` de 8. A entrelinha do título deixa 5,9 abaixo
       da linha de base, e a do lede 6,1 acima das maiúsculas: 5,9 + 8 +
       6,1 = 20.
     - etiqueta→título: a etiqueta já traz 12 de `padding` embaixo, e o
       título 7,7 de entrelinha acima das maiúsculas. O `row-gap` da
       grade entre os dois sai (margem negativa do mesmo tamanho). Em
       Cases e Imprensa o `<main>` não é `.case`, o `--respiro` não
       existe, o `row-gap` já é zero e o fallback 0 deixa tudo como
       está.

     `.case-grade >` outra vez: sem o prefixo a regra perde para a do
     desktop (0,2,0) e o par título/lede fica com os 14 do Figma.
     O artigo e a Política têm mais itens neste bloco (as tags, as
     datas) e compensam o `gap` menor na margem deles. */
  .case-grade > .case-abre__texto { gap: 8px; }
  .case-grade > :is(.case-abre__marca, .case-rotulo) + .case-abre__texto {
    margin-top: calc(-1 * var(--respiro, 0px));
  }

  /* O galhinho não tem função no celular: ele aponta para o vídeo, que
     no desktop está a 182px dali e aqui está logo abaixo do lede. */
  .case-abre__seta { display: none; }

  .case-abre__lede,
  .case-cab p,
  .case-perguntas li,
  .case-defs dt,
  .case-defs dd { font-size: var(--p-mobile); }

  .case-prosa { font-size: var(--p-mobile); }
  .case-prosa p + p { margin-top: 20px; }

  .case-h3,
  .case-cards--def h3 { font-size: 18px; }

  /* ── Viúvas ────────────────────────────────────────────────────
     Numa coluna de 300px quase todo parágrafo termina com uma palavra
     sozinha na última linha. `pretty` puxa uma palavra da penúltima
     linha para evitar isso; `balance` reparte um título curto em linhas
     de peso parecido. As duas são progressivas — quem não suporta
     quebra como antes, e nenhuma medida do layout muda. */
  .case-h3,
  .case-cards--def h3,
  .case-faixa__texto,
  .case-esq__tit,
  .case-trilha__cab { text-wrap: balance; }

  .case-cab p,
  .case-prosa,
  .case-abre__sub,
  .case-abre__nota,
  .case-graf__pe,
  .case-esq__pe,
  .case-defs dd,
  .case-perguntas li,
  .case-cards__val p:last-child,
  .case-funil__txt em,
  .case-cruza__fontes span,
  .case-trilha__txt em { text-wrap: pretty; }

  .case-sec { padding-top: 48px; }
  .case-sec--regua > .case-grade { padding-top: 48px; }
  .case-sec--fim { padding-bottom: 48px; }

  /* O play encolhe junto com o vídeo: 81 num quadro de 188 de altura é
     quase metade da imagem. */
  .case-video__play span { width: 48px; height: 48px; }
  .case-video__play img { width: 16px; height: 16px; }

  /* A régua de apuração vira 2×2. Quatro colunas a 375 deixariam
     "R$7,70 milhões" em três linhas. */
  .case-regua__scroll { display: none; }

  .case-regua__itens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  /* A ressalva encosta na régua, e é de propósito: as duas falam da mesma
     coisa — o que foi apurado e sob que ressalva. Os 48 do Figma separam
     BLOCOS de assunto numa coluna de 800; numa de 300 eles leem como
     duas seções diferentes. */
  .case-abre__nota { margin-top: 20px; }

  /* ── A régua de apuração ───────────────────────────────────────
     "R$ 7,70 milhões" e "Julho de 2026" quebravam em duas linhas. A
     célula tem 160 e o texto ficava com 106 depois do ícone de 42 mais
     os 12 de gap; medido com `measureText`, o valor mais longo pede
     **125,7 a 17px** e só cabe a partir de 14.

     A folga vem dos dois lados: o ícone desce para 38 e o gap para 10,
     o que devolve 6px ao texto, e o corpo cai para 14. Sobram 8,5 de
     margem — suficiente para a variação de renderização entre
     aparelhos, que 14px num espaço de 106 (2,5 de folga) não teria.

     Voltar a caber numa linha é o que importa aqui: o valor é o dado, e
     um dado partido no meio deixa de ser lido de relance. */
  .case-regua__txt { white-space: normal; }
  .case-regua__item { gap: 10px; }
  .case-regua__item img { width: 38px; height: 38px; }
  .case-regua__val { font-size: 14px; }

  .case-ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-cards,
  .case-cards--tres,
  .case-cards--quatro { grid-template-columns: minmax(0, 1fr); }

  /* O card de SCORE é a exceção: ele carrega uma etiqueta curta e uma
     nota de dois dígitos, e nada mais. Empilhado um por linha, os seis
     ocupavam uma tela inteira de rolagem para dizer seis números. Em
     duas colunas eles voltam a ser comparáveis de relance, que é o que
     o card existe para fazer. */
  .case-cards--score { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* O vazio dentro do card de IMPACTO cai pela metade — e só o dele.

     Ele nasce do `justify-content: space-between` contra uma altura
     mínima pensada para o desktop, onde o texto ocupa três linhas de
     12px numa caixa de 394; no celular a caixa é 335 e sobra buraco.
     Medido: 79px entre a etiqueta e o número, contra 39 agora.

     Os cards de RESULTADO e de DEFINIÇÃO ficam como estavam (mínima de
     160, vazio de 22 a 42). Eu tinha baixado a mínima deles junto e o
     vazio foi a ZERO — o ícone encostava no número. Reduzir pela metade
     e zerar não são a mesma coisa, e o pedido era o primeiro. */
  .case-cards--alto li { min-height: 150px; }

  /* ── A aspa ────────────────────────────────────────────────────
     Um respiro só em cima e embaixo, e a MESMA distância entre os três
     blocos — marca, texto e assinatura. Antes eram 88 no topo, 42 até o
     texto, 40 até a assinatura e 70 até o fim. */
  .case-aspa { padding-block: 64px; }

  .case-aspa .case-grade { row-gap: 32px; }
  .case-aspa__corpo { gap: 32px; }

  /* `.case-grade >` de novo: sem o prefixo esta regra perdia para a do
     desktop e a aspa continuava desenhando em 150px. Medido.

     O CORTE ÓPTICO é o que faz os três respiros lerem iguais. Medida a
     tinta do glifo com `TextMetrics` a 88px: ela ocupa **20,4px**, com
     **17,6 de vazio acima** e **50 abaixo**. Sem cortar essas sobras, o
     gap de 32 vira 82 embaixo e a composição fica torta mesmo com as
     caixas certas.

     Em `em` de propósito: são proporções da FONTE, não do corpo, então
     continuam valendo se o tamanho mudar. Só no celular — no desktop a
     caixa de 150 é o que o Figma desenha. */
  .case-grade > .case-aspa__marca {
    font-size: 88px;
    margin-top: -0.2em;
    margin-bottom: -0.568em;
  }

  .case-aspa__texto { font-size: 20px; }

  /* ── As perguntas ──────────────────────────────────────────────
     Ícone menor e no ALTO, não centralizado: com três linhas de texto
     um ícone centralizado flutua no meio do bloco e desalinha a lista
     inteira. O respiro da direita é o triplo do da esquerda, para o
     texto não encostar na borda da caixa. */
  /* Centrado, e não `flex-start`. Quando a frase quebra em duas ou três
     linhas — que no estreito é o caso da maioria — o selo ficava colado
     no topo e a fileira lia torta. O vão ENTRE as fileiras continua nos
     12 do `gap` da lista. */
  .case-perguntas li {
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 6px;
  }

  .case-perguntas img { width: 28px; height: 28px; }

  /* O selo do número encolhe junto. 40 num card de 375 pesa demais ao
     lado de uma frase de três linhas. */
  .case-perguntas__num {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .case-faixa { min-height: 520px; }
  .case-faixa__texto { font-size: 20px; }
  .case-faixa--meio .case-faixa__texto { font-size: 24px; }

  /* ── Os gráficos ───────────────────────────────────────────────
     O painel é 4:3, não uma altura fixa. Com `height: 320px` numa caixa
     de 303 ele ficava mais alto que largo (0,95:1) — o gráfico virava
     um poço, os elementos perdiam respiro e o rótulo do último ponto
     encavalava na curva. Gráfico de barras e de linha é horizontal por
     natureza; o desktop é 16:9 e aqui 4:3 é o mais alto que se sustenta. */
  .case-graf { padding: 14px 12px 12px; }

  .case-graf__vidro {
    height: auto;
    /* 4:3 é o padrão; um gráfico que precisa de mais altura no estreito
       (o Sankey, que empilha seis meses) declara a própria razão na
       instância — `--graf-razao-estreita: 1 / 1`. */
    aspect-ratio: var(--graf-razao-estreita, 4 / 3);
  }

  /* O 4:3 é do PALCO de desenho. Um painel de esquema empilha texto e
     não tem proporção nenhuma: aqui ele cresce com o conteúdo, e nem a
     proporção nem o piso do Figma valem — os dois cortavam. Medido a
     899, 820, 768 e 600. */
  .case-graf__vidro--piso {
    aspect-ratio: auto;
    min-height: 0;
  }

  /* Piso de 260 no palco de desenho. O 4:3 sozinho dá 192px de altura
     numa janela de 320, e o gráfico de etapas — quatro faixas com duas
     séries cada — ficava com 14px por faixa: os valores de uma fileira
     escreviam sobre os da seguinte. A 375 o palco já tem 232 e o piso
     não muda nada. Medido. */
  .case-graf__vidro[data-graf-palco] { min-height: 260px; }

  .case-graf__pe { font-size: 12px; }

  /* Os corpos do desenho descem um degrau. O painel encolheu; manter o
     corpo do desktop é o que faz um gráfico pequeno parecer entupido. */
  .g-eixo { font-size: 10px; letter-spacing: 0.04em; }
  .g-rotulo { font-size: 10px; letter-spacing: 0.06em; }
  .g-sub { font-size: 10px; }
  .g-valor { font-size: 12px; }
  .g-legenda { font-size: 10px; letter-spacing: 0.015em; }
  .g-delta { font-size: 10px; letter-spacing: 0.07em; }
  .g-eixo-nome { font-size: 10px; }
  .g-rot-h { font-size: 10px; }
  /* 10 e não 12 (era 11; § 3.13, número par): o valor dentro do segmento
     só é desenhado se couber (`case.js`), e a 12 o terceiro valor do
     gráfico do Diagnóstico deixava de caber a 375. A 10 aparecem os
     mesmos valores de antes em todas as larguras, medido de 360 a 900. */
  .g-dentro { font-size: 10px; letter-spacing: 0.02em; }
  .g-marca-nome { font-size: 10px; letter-spacing: 0.015em; }

  /* ── A tabela ──────────────────────────────────────────────────
     `table-layout: fixed` reparte as quatro colunas em 25% cada — 75px
     numa caixa de 301. Com `nowrap`, "CONTAS FINALIZADAS" precisa de
     ~95 e invadia a coluna vizinha; foi a sobreposição do cabeçalho.

     A repartição passa a seguir o CONTEÚDO: o valor mais largo é
     "R$ 15.875,02", e é ele quem dita os 36%. */
  .case-tabela th,
  .case-tabela td { padding: 8px; font-size: 12px; }
  .case-tabela thead th { font-size: 10px; letter-spacing: 0.04em; }

  /* O afunilamento CEDE no estreito. Os 55,4% do último degrau valem
     154px numa caixa de 279 — a pílula deixaria de caber o número e a
     frase lado a lado. A faixa vira 94%..87%: o degrau continua legível
     como degrau, e o conteúdo continua cabendo. */
  /* O vão entre os degraus abre para 26 no estreito, e não é decoração:
     é onde mora a LIGAÇÃO. Empilhado sem ela, o funil deixava de dizer
     que um degrau sai do anterior — virava uma lista de quatro cards. */
  .case-funil {
    --lig: rgba(255, 255, 255, 0.56);
    gap: 26px;
    padding-block: 24px;
  }

  .case-funil li {
    position: relative;
    width: calc(70% + var(--larg, 100%) * 0.3);
    gap: 12px;
    padding: 6px 16px 6px 6px;
  }

  /* Ponto de origem, filete e chevron — o mesmo vocabulário do resto da
     página, desenhado no vão acima de cada degrau que tem antecessor. */
  .case-funil li + li::before,
  .case-funil li + li::after {
    content: '';
    position: absolute;
    left: 50%;
  }

  .case-funil li + li::before {
    top: -24px;
    width: 4px;
    height: 16px;
    transform: translateX(-50%);
    background:
      radial-gradient(circle closest-side at 50% 2px, var(--lig) 90%, transparent) no-repeat,
      linear-gradient(var(--lig), var(--lig)) no-repeat 50% 0 / 1px 100%;
  }

  .case-funil li + li::after {
    top: -8px;
    width: 6px;
    height: 6px;
    border: 0 solid var(--lig);
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .case-funil__num { padding-inline: 12px; font-size: 16px; }
  .case-funil li:last-child .case-funil__num { padding-inline: 10px; }
  /* 14 e 12 desde 2026-09-28 (eram 13 e 11): na régua de pares (§ 3.13)
     os dois caíam em 12 e o degrau perdia a hierarquia entre o que ele
     é e o que ele diz. A descrição não desce a 10: é texto corrido, e o
     piso do celular é 12. */
  .case-funil__txt strong { font-size: 14px; }
  .case-funil__txt em { font-size: 12px; }

  /* ── Os esquemas no estreito ─────────────────────────────────
     Os dois viram PILHA. A cadeia de quatro estados a 279px daria 60px
     por caixa, menos que a palavra "Conferência"; e três linhas que
     convergem num ponto não sobrevivem a uma coluna só.

     O que NÃO se perde é a ligação: ela deixa de ser um colchete e vira
     uma seta para baixo, com o mesmo rótulo. É a mesma informação — o
     que foi medido entre um estado e o outro — em outra direção. */
  .case-esq { gap: 20px; padding: 20px 12px; }

  .case-fluxo { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }

  /* `:nth-child(n)` e não `*`: as sete posições da cadeia são escritas
     com `:nth-child(i)`, que vale (0,2,1). Um `> *` vale (0,1,0) e PERDE
     dentro da própria media query — a coluna virava uma só, mas as
     caixas continuavam presas às linhas explícitas e escreviam umas por
     cima das outras. Foi medido, e é a mesma armadilha da § 6. */
  .case-fluxo > :nth-child(n) { grid-column: 1; grid-row: auto; }

  /* Empilhada, a cadeia perde o COLCHETE — que só existe para ligar duas
     caixas lado a lado — mas não pode perder a LIGAÇÃO. Sem ela sobrava
     "MEDIDO" solto entre dois cards, sem dizer que um leva ao outro.

     Aqui ela vira a mesma seta de descida do resto da página: ponto de
     origem, filete, rótulo, chevron de chegada. As duas pontas são
     `::before` e `::after`, que num container de coluna são o PRIMEIRO e
     o ÚLTIMO item do flex — o rótulo fica no meio sem markup nenhum. */
  .case-fluxo__lig {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-inline: 0;
    height: auto;
    padding-block: 0;
    border: 0;
    border-radius: 0;
  }

  .case-fluxo__lig::before {
    position: static;
    width: 4px;
    height: 20px;
    border-radius: 0;
    transform: none;
    background:
      radial-gradient(circle closest-side at 50% 2px, var(--lig) 90%, transparent) no-repeat,
      linear-gradient(var(--lig), var(--lig)) no-repeat 50% 0 / 1px 100%;
  }

  .case-fluxo__lig--cima::before,
  .case-fluxo__lig--baixo::before { top: auto; }

  .case-fluxo__lig::after {
    position: static;
    left: auto;
    top: auto;
    margin-top: -2px;
    border-width: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    transform: rotate(45deg);
  }

  .case-fluxo__lig--cima::after,
  .case-fluxo__lig--baixo::after {
    top: auto;
    border-width: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }

  .case-cruza { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .case-cruza > :nth-child(n) { grid-column: 1; }

  .case-cruza__fontes { gap: 8px; }

  .case-cruza__nucleo {
    aspect-ratio: auto;
    padding: 14px;
    border-radius: var(--r-caixa);
  }

  .case-cruza__lig svg { display: none; }

  /* A ligação e a seta viram o MESMO filete vertical com a mesma ponta
     de sempre — ponto em cima, chevron embaixo. A da convergência perde
     o SVG; a outra só gira. */
  .case-cruza__lig,
  .case-cruza__seta {
    position: relative;
    justify-self: center;
    align-self: center;
    width: 1px;
    height: 18px;
    margin-inline: 0;
    background: var(--lig);
  }

  .case-cruza__lig::before,
  .case-cruza__seta::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lig);
    transform: translate(-50%, -50%);
  }

  .case-cruza__lig::after,
  .case-cruza__seta::after {
    left: 50%;
    top: calc(100% - 4px);
    border-width: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }

  /* ── O par de perfis no estreito ─────────────────────────────
     Vira pilha: rótulo, selo, rótulo, selo, e a ligação some — duas
     linhas que descem para um ponto comum precisam dos dois selos lado
     a lado para dizer o que dizem. O núcleo continua, porque ele é o
     resultado, e a tira de rodapé empilha as três competências. */
  .case-duo-painel { padding: 20px 12px 0; }

  /* No estreito o esquema vira TRÊS PARES — selo à esquerda, texto à
     direita —, e não uma pilha solta. Empilhado em ordem de DOM saía
     rótulo, selo, selo, rótulo: o leitor via dois desenhos de cabeça
     seguidos e não sabia qual pertencia a qual perfil. O `grid-row`
     explícito reata cada selo ao texto dele.

     A primeira coluna é o TRILHO: 40px à esquerda dos selos, por onde as
     duas descidas passam. Sem ela não há por onde a linha sair pela
     lateral do ícone, que é como o Figma desenha. A calha entre selo e
     texto é `padding` do texto, e não `column-gap`, porque o trilho
     precisa ENCOSTAR no selo.

     A largura saiu da referência do Jefferson, medida na proporção com o
     ícone, e depois APERTOU: o trecho horizontal é agora de 14, e a
     pista encosta na borda de conteúdo do painel (12 da lateral) em vez
     de recuar mais 10. Os 26px que isso devolve são do texto, e é por
     isso que existem — "Agentes de auditoria em produção" mede 182,5 em
     11px e a coluna dava 169, então o título quebrava em duas linhas.
     Com 195 ele cabe em uma, com 12 de sobra. Medido, não estimado. */
  .case-duo {
    grid-template-columns: 14px 64px minmax(0, 1fr);
    grid-template-rows: repeat(3, 64px);
    column-gap: 0;
    row-gap: 24px;
    align-items: start;
  }

  .case-duo > :nth-child(1) { grid-column: 3; grid-row: 1; }
  .case-duo > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .case-duo > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .case-duo > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .case-duo > :nth-child(5) { display: none; }
  .case-duo > :nth-child(6) { grid-column: 2; grid-row: 3; }
  .case-duo > :nth-child(7) { grid-column: 3; grid-row: 3; }

  /* O texto centra na altura do ícone, que é como o par foi desenhado.
     Vale `align-self` no texto e não `align-items` na grade porque o
     TRILHO depende do selo continuar no topo da fileira: a descida mede
     32px do topo até o centro do ícone, e centrar a grade inteira
     jogaria essa conta fora.

     É também por isso que a fileira é FIXA em 64 acima. Deixada em auto
     ela mede pelo item mais alto, e em 320 o texto passa dos 64 — a
     fileira cresce, o selo fica no topo dela e o par sai do centro por
     3px, além de a conta do trilho deixar de valer. Fixa em 64, o texto
     que sobra transborda igual para os dois lados, dentro da calha de
     24 que existe entre as fileiras. O centro é o centro em qualquer
     largura. */
  .case-duo__rot,
  .case-duo__pe {
    margin-top: 0;
    padding-left: 12px;
    align-self: center;
  }
  .case-duo__rot--esq { text-align: left; }
  /* Dois pontos abaixo do que o esquema usava, a pedido: com o trilho
     de 40 e o selo de 64, a coluna de texto fica em ~160px, e 13/11,5
     deixava a frase em cinco linhas por perfil. */
  /* De 375 para cima os três títulos cabem em uma linha — era o que a
     coluna mais larga foi buscar. Abaixo disso o mais longo não cabe por
     2,5px, e brigar por esses 2,5 apertando calha e trilho deixaria a
     margem menor que a variação de métrica entre navegadores. Então em
     320/360 ele quebra, e `balance` faz a quebra ser em duas linhas
     parelhas em vez de deixar "produção" sozinha embaixo. */
  .case-duo__rot strong,
  .case-duo__pe strong { font-size: 12px; text-wrap: balance; }
  /* A coluna mudou de largura, e com ela os pontos de quebra: `pretty`
     evita que a frase termine numa palavra sozinha. */
  .case-duo__rot span,
  .case-duo__pe span { font-size: 10px; text-wrap: pretty; }
  .case-duo__pe { width: auto; text-align: left; }

  .case-duo__selo {
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 8px;
    border-radius: 222px;
  }

  .case-duo__selo img { height: 44px; }

  .case-duo__nucleo { width: 64px; height: 64px; }
  .case-duo__nucleo img { width: 46px; height: 32px; }

  /* ── A descida ───────────────────────────────────────────────
     Cada perfil sai pela LATERAL ESQUERDA do seu ícone e desce pelo
     trilho até encaixar na lateral do terceiro — a mesma leitura do
     largo, virada 90°.

     UMA PISTA SÓ, e é o ponto inteiro. Quando a rosa encontra a azul as
     duas viram uma linha, não duas correndo lado a lado: a azul desce do
     primeiro ícone até a altura do segundo e ACABA ali; a rosa entra
     nesse mesmo x e leva o traço o resto do caminho. Duas pistas
     paralelas era o que estava errado — desenhava dois caminhos onde a
     seção afirma um encontro.

     Daí as bordas serem diferentes. A azul é um "⌐" invertido: topo e
     esquerda, sem pé, porque ela termina no encontro. A rosa é um "[":
     topo, esquerda e pé, que é o trecho que entra no ícone.

     A altura é conta fechada, e é o que dispensa JS. O selo fica no TOPO
     da fileira, então: desce 32 até o centro dele (`margin-top`), a área
     da grade dá o caminho até o pé da fileira de baixo, e sobra somar a
     calha (24) mais meio selo (32). A azul mede a fileira dela; a rosa,
     a dela — e as duas caem no mesmo x porque partilham a pista.

     A rosa chega na altura do CENTRO do terceiro ícone, e isso é
     geometria: na lateral de um círculo, o único ponto que encosta na
     borda da caixa é o do centro. */
  .case-duo__desce {
    display: block;
    position: relative;
    grid-column: 1;
    margin-top: 32px;
    border: 1px solid var(--lig);
    border-right: 0;
    pointer-events: none;
  }

  /* Os 8 a mais não são folga: são o RAIO do cotovelo da rosa. O arco
     dela sai do eixo nos 8px de cima, e a azul terminando no encontro
     deixava justo esse pedaço da vertical sem traço — a linha aparecia
     interrompida. Descendo 8 a mais, a azul cobre o trecho e o arco da
     rosa chega tangente nela: a vertical fica inteira e o cotovelo
     continua redondo. */
  .case-duo__desce--a {
    --lig: #c5d7ff;
    grid-row: 1;
    height: calc(100% + 32px);
    border-bottom: 0;
    border-radius: 8px 0 0 0;
  }

  .case-duo__desce--b {
    --lig: #f6d3ff;
    grid-row: 2 / 3;
    height: calc(100% + 24px);
    border-radius: 8px 0 0 8px;
  }

  /* Ponto na saída, encostando no ícone de cima. */
  .case-duo__desce::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lig);
    transform: translate(-50%, -50%);
  }

  /* Chevron na chegada, encostando no ícone de baixo. */
  .case-duo__desce::after {
    content: '';
    position: absolute;
    left: calc(100% - 4px);
    top: 100%;
    width: 6px;
    height: 6px;
    border: 0 solid var(--lig);
    border-top-width: 1px;
    border-right-width: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* A ponta é UMA SÓ. As duas descidas terminam no mesmo ponto, e quem
     entra no ícone é a de DENTRO — a de fora se funde nela no último
     trecho, que é o que o desenho do largo faz na convergência. Duas
     pontas empilhadas no mesmo lugar não somam nada e franjam a borda.
     A regra vem DEPOIS da genérica de propósito: as duas têm a mesma
     força, e aqui quem decide é a ordem. */
  .case-duo__desce--a::after { display: none; }

  /* A tira das competências é OUTRO assunto: ela lista o que a leitura
     exige, não quem faz a leitura. No largo a régua já separa as duas;
     no estreito ela precisa de ar também.

     A margem negativa acompanha o recuo do painel — 12 aqui, 26 no
     largo. Sem refazê-la a tira sangrava 26 de cada lado num painel que
     só tem 12, e o vidro passava a rolar na horizontal. Medido. */
  .case-duo__rodape {
    margin-top: 28px;
    margin-inline: -12px;
    padding: 12px;
  }

  .case-duo__comp { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  /* ── As duas trilhas no estreito ─────────────────────────────
     Uma coluna: a trilha 1 inteira, depois a trilha 2, depois o fecho.
     Duas trilhas de 280 lado a lado a 279px de painel não existem, e
     empilhá-las mantém a leitura — o que se perde é o "em paralelo",
     que o texto da seção já diz. A barra de cor passa para a esquerda
     nas duas, porque não há mais um meio para apontar. */
  .case-trilhas { grid-template-columns: minmax(0, 1fr); padding: 20px 12px; row-gap: 20px; }
  .case-trilhas > :nth-child(n) { grid-column: 1; }

  .case-trilha--a .case-trilha__cx { flex-direction: row-reverse; text-align: left; }

  .case-trilhas__uniao { display: none; }
  .case-trilhas__fim { width: 100%; }
  .case-tabela__var { gap: 6px; }

  /* Estas quatro medidas são da tabela do case do Sírio — mês, contas,
     ticket, variação — e só dela. As tabelas de TEXTO trazem a própria
     repartição no `colgroup`, que é o lugar certo quando a coluna larga
     é uma frase: deixar as duas regras se cruzarem dava uma terceira
     largura, que não era nenhuma das duas. */
  .case-tabela:not(.case-tabela--texto) th:nth-child(1) { width: 18%; }
  .case-tabela:not(.case-tabela--texto) th:nth-child(2) { width: 20%; }
  .case-tabela:not(.case-tabela--texto) th:nth-child(3) { width: 36%; }
  .case-tabela:not(.case-tabela--texto) th:nth-child(4) { width: 26%; }

  /* No estreito a coluna da frase devolve largura para os números: com
     15% de 309 sobravam 22px úteis para "% VALOR" depois do recuo, e os
     dois cabeçalhos encostavam um no outro. O recuo também encolhe —
     28px de cada lado numa caixa de 309 é um décimo da tabela em
     margem. */
  .case-tabela--texto th,
  .case-tabela--texto td { padding: 10px 12px; }

  .case-tabela--motivos th:nth-child(1) { width: 14%; }
  .case-tabela--motivos th:nth-child(2) { width: 42%; }
  .case-tabela--motivos th:nth-child(3) { width: 22%; }
  .case-tabela--motivos th:nth-child(4) { width: 22%; }

  .case-tabela--regras th:nth-child(1) { width: 60%; }
  .case-tabela--regras th:nth-child(2) { width: 40%; }

  /* O complemento do rótulo sai da COMPOSIÇÃO, não do documento: quem
     lê pela tela continua ouvindo "contas finalizadas". Esconder com
     `display: none` tiraria a palavra também da árvore de
     acessibilidade, e aí a coluna passaria a se chamar só "contas". */
  .case-tabela__extra {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .case-defs > div {
    flex-direction: column;
    gap: 6px;
    padding-block: 18px;
  }

  .case-defs dt { width: auto; }

  .case-cta__inner {
    padding-inline: var(--gutter);
    gap: var(--cta-foto-gap-m);
  }
}

/* A tabela é o único bloco que não sobrevive a 375 sem perder uma
   coluna. "Contas finalizadas" vira "Contas": o cabeçalho completo fica
   no `title`, e a coluna some antes de o número quebrar. */
@media (max-width: 560px) {
  /* 8 dos lados, e não 10, desde 2026-09-28: o cabeçalho foi de 9 para
     10 de corpo (§ 3.13, número par) e a 360 "CONTAS" (41,4) e "CÓD."
     (24,6) passavam das células de 38,8 e 21,2. Com 8 elas medem 42,8 e
     25,2. */
  .case-tabela th,
  .case-tabela td { padding: 8px; }
  .case-tabela__var img { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
   13 · MOTION DE ENTRADA
   ═════════════════════════════════════════════════════════════════ */

/* A liberação da máscara de linha no `componentes.css` mira `.hero__headline`
   — é específica da home. Esta página tem o próprio título de entrada e
   precisa da regra equivalente, senão as linhas ficam paradas atrás da
   máscara e o título não aparece.

   É TEMPORIZADA, não disparada por scroll: o título está na primeira
   tela quando a página abre, e § 5 das diretrizes diz que o que já está
   visível anima no próprio relógio. */
.js.is-ready .case-abre__titulo .line__i {
  transform: none;
  transition: transform 1.05s var(--ease-out-expo) var(--d, 0ms);
}

.js.is-instant .case-abre__titulo .line__i { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .case-abre__titulo .line__i { transform: none; transition: none; }
}

/* ═════════════════════════════════════════════════════════════════
   A ABERTURA COM MOSAICO — `.abre-mosaico` + `.mosaico` (2026-09-27)

   O `.case-abre` com uma grade de cards fotográficos no lugar do vídeo.
   Nasceu na Imprensa (as matérias, `im-notas`) e subiu para cá quando a
   página de Cases passou a abrir igual ("a primeira sessão igual à página
   de imprensa… para o case aparecer primeiro"). Mora no FIM do
   `case.css` para vencer o `.case-abre` e o `.case-card` sem mudar a
   ordem em que a Imprensa já as lia (vinham do `imprensa.css`, depois
   deste arquivo). Cada item é um `case-card--artigo` com a foto de
   fundo, `mosaico__topo` (logo + seta) e `mosaico__pe` (a linha de
   etiqueta e o título). Um item sem destino é `<article>`, sem seta.
   ═════════════════════════════════════════════════════════════════ */

/* ── § 1 · A abertura: a do case, com a grade de matérias ─────────
   O topo é o `.case-abre` (180 de cima, o lavado, a etiqueta de caminho,
   manchete e lede). A grade entra no lugar do VÍDEO do case: é
   `.case-largo` (as duas colunas) e tem a mesma distância de 48 dele. */
/* A grade: quatro colunas, em ordem de data; a mais recente ocupa 2 × 2,
   as outras são quadrados ou faixas de duas colunas. O vão de 16 é o do
   par de cases do blog.

   A ALTURA da linha é a largura da coluna, escrita em unidade de
   contêiner (a seção é o contêiner): assim quadrado e faixa da mesma
   linha terminam no mesmo pixel. Com `aspect-ratio` em cada card a faixa
   saía 1px mais alta que o quadrado ao lado. */
/* A grade do case mede 1216 com calha de 32 — valores que o `case.css`
   declara no `.case` (o <main> das páginas de case), junto com o fundo
   branco e o tracking de 0,72 das etiquetas de lá. A Imprensa é família
   HOME: traz só as duas medidas, na própria abertura. */
.abre-mosaico {
  --case-larg: 1216px;
  --case-calha: 32px;
  container-type: inline-size;
  /* O respiro embaixo da grade é o mesmo de CIMA da seção seguinte (os
     números: 120, e 80 abaixo de 861) — 2026-09-27, "manter isso
     uniforme". O `.case-abre` traz 60 (48 no celular), a medida do case,
     onde a régua vem logo depois. */
  padding-bottom: 120px;
}

.mosaico {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: calc((min(1216px, 100cqw - 2 * var(--gutter)) - 3 * 16px) / 4);
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.mosaico__item { min-width: 0; }

.mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
.mosaico__item--larga { grid-column: span 2; }

/* O `.case-card` tem largura e proporção de trilho (720 · 16:9); na
   grade quem manda é a célula. */
.mosaico__link {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  isolation: isolate;
}

/* O véu: escuro em cima para a etiqueta, limpo no meio, denso embaixo
   para data e título. Partiu do véu do `.bl-case` (0,3 · 0,66) e foi
   REFORÇADO por medida: as fotos do banco são claras (céu, vidro, luz de
   corredor) e com aquele véu o texto branco ficava em 1,6–1,7:1 no pior
   pixel (p95) da etiqueta e da data. A etiqueta fica nos primeiros ~11%
   (0,72 → 0,4 até 14%); o título começa a ~55% da altura num quadrado
   de três linhas, por isso o escuro já vale 0,45 ali. */
.mosaico__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.4) 14%,
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
}

.mosaico__topo,
.mosaico__pe {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
}

.mosaico__topo {
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mosaico__pe {
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* O LOGO do veículo no lugar da etiqueta (2026-09-27, "as pessoas não
   têm interesse em ler, elas querem identificar a imagem… coloca o logo
   monocromático"). Os arquivos são os dos sites dos próprios veículos,
   em branco (ver `docs/ASSETS.md`). O `--w` é a largura a 1440, escolhida
   para os sete terem o mesmo peso — como os logos dos investidores:
   wordmark largo ~128, o "exame." e o "O GLOBO" ~100, o Saúde Digital
   News (símbolo em cima) 112, o Valor 68. No card grande, 1,4×. */
/* O `.case-card img` (foto de fundo: absoluta, 100% × 100%, `cover`) e o
   avanço da foto no hover pegam TODA imagem do card — a especificidade
   aqui é para o logo escapar dos dois. */
.mosaico__link .mosaico__logo {
  position: static;
  display: block;
  width: calc(var(--w) * 1px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: none;
}

a.case-card--artigo.mosaico__link:is(:hover, :focus-visible) .mosaico__logo { transform: none; }

.mosaico__item--grande .mosaico__link .mosaico__logo { width: calc(var(--w) * 1.4px); }

/* A seta 40% menor que a do `case-card` (2026-09-27, "as setinhas
   estão muito grandes… cerca de 40% menor"): 48 → 28 de elipse, 18 → 11
   de glifo. */
.mosaico__link .case-card__ir { width: 28px; height: 28px; }
.mosaico__link .case-card__ir svg { width: 12px; height: 12px; }

/* A data na voz das etiquetas, sem o quadradinho. O RÓTULO é a mesma voz
   no lugar do logo, quando o card não tem um (o case anônimo). O corpo é
   o das etiquetas, `--tag-corpo` — 12, e 10 abaixo de 861 — desde
   2026-09-28: era 11 (o da data das listas do blog), e a 12 no celular
   "HOSPITAL PRIVADO DE ALTA COMPLEXIDADE" quebrava em duas linhas. */
.mosaico__data,
.mosaico__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: rgba(255, 255, 255, 0.8);
}

/* Nos quadrados o título vai no piso do `case-card__titulo` (17): é a
   célula mais estreita e o título do O Globo tem 118 caracteres. */
.mosaico__titulo {
  max-width: none;
  font-size: 16px;
}

.mosaico__item--grande .mosaico__titulo { font-size: clamp(22px, 1.944vw, 28px); line-height: 1.24; }
.mosaico__item--larga .mosaico__titulo { font-size: clamp(16px, 1.53vw, 22px); }

/* Sobre fundo claro o anel branco do `case-card` não aparece: o foco
   usa o anel azul do `.bl-case`. */
.mosaico__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.6);
}

@media (max-width: 1160px) {
  /* A grade em duas colunas: o card grande vira faixa inteira em 16:9,
     os quadrados seguem em pares e as faixas ocupam a linha. Em 1160 e
     não em 1100: abaixo disso o quadrado tem 251 e o título do Saúde
     Digital e da Bloomberg (Imprensa) vai a quatro linhas, com 30 de
     folga até o logo. */
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .mosaico__item--grande { grid-row: auto; }
  .mosaico__link { height: auto; aspect-ratio: 1; }
  .mosaico__item--grande .mosaico__link { aspect-ratio: 16 / 9; }
  .mosaico__item--larga .mosaico__link { aspect-ratio: 2 / 1; }
}

@media (max-width: 860px) {
  .abre-mosaico { padding-bottom: 80px; }
}

/* Uma coluna: todas as matérias na proporção da foto (4:3), com o
   respiro de 20 dos cards do blog no celular. */
@media (max-width: 560px) {
  .mosaico { grid-template-columns: minmax(0, 1fr); }
  .mosaico__item--grande,
  .mosaico__item--larga { grid-column: auto; }
  .mosaico__link,
  .mosaico__item--grande .mosaico__link,
  .mosaico__item--larga .mosaico__link { aspect-ratio: 4 / 3; }
  .mosaico__topo,
  .mosaico__pe { left: 20px; right: 20px; }
  .mosaico__topo { top: 20px; }
  .mosaico__pe { bottom: 20px; }
}