/* ═══════════════════════════════════════════════════════════════
   Diagnóstico RHLIT — sistema visual da versão web

   A referência mudou. O documento antigo era laudo A4: tipografia
   em pontos, tabela de ficha, achados empilhados em caixas iguais.
   Isso resolvia "caber na página" e não resolvia nada de leitura.

   Aqui a régua é a página de portfólio: a superfície alterna entre
   noite e papel para dar ritmo, o número é grande porque o número
   é o argumento, e o vazio é material — se a tela parecer cheia, a
   seção falhou.

   Três decisões que não são estéticas:

   1. A NOTA NÃO ABRE O DOCUMENTO. 92/100 na primeira tela diz
      "está ótimo" e contradiz tudo o que vem depois. A nota entra
      no painel de situação, como contexto, não como manchete.
   2. O ACHADO PRINCIPAL NÃO TEM O MESMO PESO DOS OUTROS. No PDF os
      quatro eram visualmente idênticos — o que mais pesa e a
      etiqueta técnica. Aqui o primeiro toma a tela inteira.
   3. O ANTES/DEPOIS SOBE. É a peça mais persuasiva do documento e
      estava na última seção, depois de quatro páginas de problema.

   Cor: a paleta institucional é sóbria de propósito. As únicas
   cores saturadas do documento são a escala de gravidade e o ciano
   da marca — e o ciano só aparece em estrutura, nunca como enfeite.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* superfícies */
  --noite:    #050B16;   /* theme-color de rhlit.com */
  --noite-2:  #0B1524;   /* elevação sobre noite */
  --noite-3:  #14202F;   /* borda sobre noite */
  --papel:    #FBFAF8;
  --papel-2:  #F3F1EC;

  /* tinta */
  --tinta:    #16202B;
  --grafite:  #5F6B75;
  --linha:    #E4E2DD;
  --claro:    #E9EEF3;   /* texto sobre noite */
  --claro-2:  #93A3B4;   /* secundário sobre noite */

  /* marca */
  --ciano:    #4FD8E8;
  --petroleo: #2A7A87;

  /* gravidade — únicas cores saturadas além do ciano */
  --critico:  #9E1B32;
  --alto:     #B35400;   /* escurecido: em #C25E00 a tag branca dava 4.29 */
  --medio:    #5F6B75;
  --baixo:    #97A1AA;

  --serif: 'Literata', Georgia, serif;
  --sans:  'Archivo', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* escala tipográfica — o contraste entre o menor e o maior é o
     que o documento antigo não tinha */
  --t-display: clamp(2.9rem, 8vw, 6.6rem);
  --t-numeral: clamp(3.6rem, 11vw, 9rem);
  --t-h2:      clamp(1.9rem, 4.2vw, 3.2rem);
  --t-h3:      clamp(1.35rem, 2.4vw, 1.85rem);
  --t-corpo:   clamp(1.02rem, 1.15vw, 1.15rem);
  --t-micro:   0.72rem;

  --envelope: 1180px;
  --medida:   64ch;      /* medida de leitura dos achados */

  --r: 3px;              /* raio único. Nada é arredondado além disto */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-corpo);
  line-height: 1.62;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* As evidências citam URLs inteiras (sites.google.com/view/...) e não
   existe espaço onde quebrar. Sem isto a linha empurra a página e o
   celular ganha rolagem lateral. */
p, li, .evidencia, .meta-auditoria, .cartao a { overflow-wrap: anywhere; }
strong { font-weight: 600; }
img { max-width: 100%; display: block; }
a { color: inherit; }

h2 {
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin: 0;
}

.envelope {
  width: min(100% - 2.4rem, var(--envelope));
  margin-inline: auto;
}

/* Rótulo. Um único tratamento para toda etiqueta do documento:
   chapéu de seção, nome de campo do achado, cabeçalho de coluna.
   Antes existiam quatro variações que ninguém distinguia. */
.rotulo {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
}
.escuro .rotulo { color: var(--claro-2); }

/* ── Revelação por rolagem ───────────────────────────────────── */

.rev {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.rev.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
}

/* ── Superfícies ─────────────────────────────────────────────── */

.escuro {
  background: var(--noite);
  color: var(--claro);
  position: relative;
}

/* Grade de instrumento sobre as superfícies escuras. Duas linhas de
   1px a cada 64px, a 3% de opacidade: não se lê como padrão, se lê
   como precisão. Some nas bordas para não virar papel quadriculado. */
.escuro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(79,216,232,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,216,232,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  z-index: 0;
}
/* Sem isto a grade (::before absoluto) pinta por cima do texto, que
   não está posicionado e portanto fica abaixo dela no empilhamento. */
.escuro > * { position: relative; z-index: 1; }
/* A abertura já tem ::before ocupado pela captura do site. */
.abertura::before { z-index: 0; }
.escuro h1, .escuro h2, .escuro h3, .escuro strong { color: #fff; }

section { padding: clamp(4.5rem, 10vw, 9rem) 0; }

/* ═══ 1. ABERTURA ════════════════════════════════════════════════
   Sem capa e sem nota. O que o dono precisa ver em três segundos:
   de quem é, o que foi olhado, e qual é a tese. */

.abertura {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4vw, 3rem) 0;
  overflow: hidden;
}

/* A captura do site atual é o fundo, escurecida quase até sumir.
   Não é enfeite: o assunto do documento é aquela página, e ela
   está fisicamente atrás do título. */
.abertura::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imagens/tempercril-desktop.jpg") center top / cover no-repeat;
  opacity: 0.16;
  filter: grayscale(1) contrast(1.1);
}
.abertura::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 34%, transparent, var(--noite) 72%),
    linear-gradient(to bottom, rgba(5,11,22,.55), var(--noite));
}
.abertura > * { position: relative; z-index: 1; }

.abertura-topo .envelope,
.abertura-pe .envelope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.selo-marca { display: flex; align-items: center; gap: .8rem; }
.selo-marca img { height: 32px; width: auto; }
.selo-marca span {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--claro-2);
}

.abertura-meio { padding: clamp(2rem, 6vw, 4rem) 0; }

.abertura h1 {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 1.6rem;
  max-width: min(15ch, 100%);
  color: #fff;
}
.abertura h1 em {
  font-style: normal;
  display: block;
  color: var(--ciano);
}

.abertura .tese-curta {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--claro);
  max-width: min(46ch, 100%);
  margin: 0 0 2.4rem;
}

/* Metadados da auditoria em mono: é dado de máquina, e o mono
   sinaliza isso sem precisar de rótulo explicando. */
.meta-auditoria {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--claro-2);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  border-top: 1px solid var(--noite-3);
  padding-top: 1.1rem;
  max-width: min(64ch, 100%);
}
.meta-auditoria b { color: var(--claro); font-weight: 500; }

.abertura-pe .assina {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--claro-2);
}

.desca {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--claro-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.desca::after {
  content: "";
  width: 1px; height: 26px;
  background: linear-gradient(var(--ciano), transparent);
}

/* ═══ 2. TESE — os três números ══════════════════════════════════
   O achado que mais pesa vira aritmética visível. Três números e
   uma frase. É a única seção do documento sem parágrafo longo. */

.tese { border-top: 1px solid var(--noite-3); }

.tese h2 {
  margin: 1.2rem 0 3.5rem;
  max-width: min(22ch, 100%);
}

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--noite-3);
  border-block: 1px solid var(--noite-3);
}
.numero {
  background: var(--noite);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 2.5vw, 2rem);
}
.numero .valor {
  font-family: var(--serif);
  font-size: var(--t-numeral);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -0.045em;
  color: #fff;
  display: block;
}
.numero.zerado .valor { color: var(--ciano); }
.numero .legenda {
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.45;
  color: var(--claro-2);
  margin-top: 1.1rem;
  display: block;
  max-width: min(26ch, 100%);
}

.tese-remate {
  margin-top: 2.6rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--claro);
  max-width: min(64ch, 100%);
}

/* ═══ 3. CONFRONTO — antes e depois arrastável ═══════════════════
   O comparativo lado a lado do PDF virou um só quadro com uma
   alça. O gesto de arrastar é o argumento: a mesma tela, o mesmo
   enquadramento, e a diferença aparece pela mão do próprio dono.
   Só a web permite isso, e é a razão principal de o diagnóstico
   ter deixado de ser papel. */

.confronto { background: var(--papel-2); }
.confronto .cabeca { max-width: min(58ch, 100%); margin-bottom: 2.8rem; }
.confronto h2 { margin: 1rem 0 .9rem; }
.confronto .cabeca p { color: var(--grafite); }

/* ═══ A dissolução ══════════════════════════════════════════════
   A antiga se desfaz, a nova se resolve. Ver o comentário no HTML
   para o porquê de não ser uma régua de arrastar nem um crossfade.
   ═══════════════════════════════════════════════════════════════ */

.transmutar {
  position: relative;
  aspect-ratio: 1000 / 600;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--tinta);
  box-shadow: 0 30px 70px -30px rgba(22,32,43,.55);
  isolation: isolate;
}
.transmutar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* A antiga: recua, perde cor e foco. É ela que "se desfaz" — sem
   isso a transição seria dois textos legíveis sobrepostos. */
.transmutar .antes {
  transform: scale(1);
  filter: none;
  transition: transform 2.4s cubic-bezier(.4,0,.2,1),
              filter    1.8s ease .3s;
}
.transmutar.virou .antes {
  transform: scale(1.04);
  filter: saturate(.2) blur(4px) brightness(.85);
}

/* A nova entra por uma máscara diagonal com borda longa e suave.
   A máscara é 260% do quadro e desliza de canto a canto: é isso
   que produz a dissolução, não opacidade. */
.transmutar .depois {
  -webkit-mask-image: linear-gradient(118deg,
    #000 0 26%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.18) 50%, transparent 62%);
          mask-image: linear-gradient(118deg,
    #000 0 26%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.18) 50%, transparent 62%);
  -webkit-mask-size: 260% 260%;
          mask-size: 260% 260%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
  transition: -webkit-mask-position 2.4s cubic-bezier(.45,0,.25,1),
                      mask-position 2.4s cubic-bezier(.45,0,.25,1);
}
.transmutar.virou .depois {
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
}

/* A linha que corre na frente da dissolução. É a mesma varredura da
   abertura: o documento fala uma língua só. */
.transmutar .risco {
  position: absolute;
  top: -60%;
  left: -30%;
  width: 160%;
  height: 220%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(118deg,
    transparent 46%,
    rgba(79,216,232,.75) 49.4%,
    rgba(255,255,255,.9) 50%,
    rgba(79,216,232,.75) 50.6%,
    transparent 54%);
  transform: translate3d(38%, 38%, 0);
  transition: transform 2.4s cubic-bezier(.45,0,.25,1), opacity .5s ease;
}
.transmutar.virou .risco {
  opacity: 1;
  transform: translate3d(-38%, -38%, 0);
}
/* some quando a corrida termina, senão fica um risco parado na tela */
.transmutar.virou .risco { animation: apagar-risco .5s ease 2.1s both; }
@keyframes apagar-risco { to { opacity: 0; } }

/* usado ao alternar pelos botões: troca sem reanimar */
.transmutar.sem-transicao .antes,
.transmutar.sem-transicao .depois,
.transmutar.sem-transicao .risco { transition: none !important; }
.transmutar.sem-transicao .risco { opacity: 0; animation: none; }

/* ── Os botões ───────────────────────────────────────────────────
   A comparação não se perde: dá para voltar quantas vezes quiser. */
.virada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.virada .botoes {
  display: inline-flex;
  border: 1px solid var(--linha);
  border-radius: 99px;
  padding: 3px;
  background: var(--papel);
  flex: none;
}
.virada button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grafite);
  padding: .5rem 1.1rem;
  border-radius: 99px;
  transition: background .3s ease, color .3s ease;
}
.virada button:hover { color: var(--tinta); }
.virada button[aria-pressed="true"] {
  background: var(--tinta);
  color: #fff;
}
.virada button:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.virada-legenda {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--grafite);
  margin: 0;
  text-align: right;
}
/* Abaixo de 400px a etiqueta e o número não cabem lado a lado sem
   espremer um dos dois. Empilhados, os dois ficam inteiros. */
@media (max-width: 400px) {
  .cartao-linhas a { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .cartao-linhas b { font-size: .92rem; }
}

@media (max-width: 620px) {
  .virada { flex-direction: column; align-items: stretch; }
  .virada .botoes { align-self: start; }
  .virada-legenda { text-align: left; }
}

/* Página inteira, lado a lado. Fica depois da dissolução porque é
   consulta, não impacto — e as alturas são diferentes de
   propósito: a proposta é mais longa, e ver isso é informação. */
.paginas-inteiras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.pagina-inteira .moldura {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pagina-inteira .rotulo { display: block; margin-bottom: .8rem; }
.pagina-inteira .nota-rolagem {
  font-family: var(--sans);
  font-size: .76rem;
  color: var(--grafite);
  margin-top: .7rem;
}

/* ═══ 4. PAINEL DE SITUAÇÃO ══════════════════════════════════════
   O que substituiu a tabela de tally. Os blocos coloridos
   contavam ocorrências e não comunicavam nada ao dono: quatro
   quadradinhos cinza não dizem se o site está bem ou mal. Aqui
   cada área é uma linha com a contagem e a pior gravidade
   encontrada — que é a informação que faz alguém agir. */

.painel .cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: 3.2rem;
}
.painel h2 { margin: 1rem 0 .9rem; }
.painel .cabeca p { color: var(--grafite); }

/* A nota entra aqui, e pequena. No PDF ela abria o documento com
   92/100 em corpo gigante — o que diz "está ótimo" antes de o
   leitor saber o que está errado. */
.placar-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
}
.anel { width: 118px; flex: none; }
.anel-quadro { position: relative; }
.anel svg { width: 100%; height: auto; transform: rotate(-90deg); display: block; }
.anel circle {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.anel .trilho { stroke: var(--linha); }
.anel .arco {
  stroke: var(--petroleo);
  /* r=52 -> circunferencia 326.7. Começa vazio e é preenchido pelo JS. */
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);
}
/* align-items: baseline num flex de inset:0 alinha pela linha de base do
   PRIMEIRO item e encosta tudo no topo — era isso que jogava o 92 para
   fora do centro do anel. Empilhado e centrado nos dois eixos resolve. */
/* O "/100" saiu de dentro do anel. Empilhado com o número ele
   empurrava o 92 para cima do centro — e é redundante: a volta
   completa do anel já é o 100. Virou legenda embaixo. */
.anel-centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.anel-base {
  display: block;
  text-align: center;
  margin-top: .55rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grafite);
}
.anel-centro .valor {
  font-family: var(--serif);
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.placar-nota p {
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--grafite);
  margin: 0;
}
.placar-nota p strong { color: var(--tinta); }

.areas { border-top: 1px solid var(--tinta); }
.area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 3.5rem;
  gap: 1.5rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linha);
}
.area .nome { font-size: 1.05rem; }
.area .barra {
  height: 6px;
  background: var(--linha);
  border-radius: 99px;
  overflow: hidden;
}
.area .barra i {
  display: block;
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width .9s cubic-bezier(.16,1,.3,1);
}
.area.vis .barra i { width: var(--w, 0%); }
.area.g-critico .barra i { background: var(--critico); }
.area.g-alto    .barra i { background: var(--alto); }
.area.g-medio   .barra i { background: var(--medio); }
.area.g-baixo   .barra i { background: var(--baixo); }
.area .conta {
  font-family: var(--mono);
  font-size: 1.05rem;
  text-align: right;
  color: var(--grafite);
}
.area .grav {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .35rem;
  display: block;
}
.area.g-critico .grav { color: var(--critico); }
.area.g-alto    .grav { color: var(--alto); }
.area.g-medio   .grav { color: var(--medio); }
.area.g-baixo   .grav { color: var(--baixo); }

/* Os pontos menores: no PDF isto era "+4 — é só pedir", que pede
   esforço ao leitor no meio do documento. Agora é uma afirmação
   fechada, sem pedido. */
.restante {
  margin-top: 2.4rem;
  padding: 1.5rem 1.7rem;
  background: var(--papel-2);
  border-radius: var(--r);
  display: flex;
  gap: 1.4rem;
  align-items: baseline;
}
.restante .n {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--petroleo);
}
.restante p { font-size: .98rem; color: var(--grafite); }
.restante strong { color: var(--tinta); }

/* ═══ 5. ACHADOS ═════════════════════════════════════════════════
   A mudança de hierarquia que o documento antigo não tinha. */

.achados { background: var(--papel); padding-top: 0; }

.achados-cabeca {
  border-top: 1px solid var(--tinta);
  padding-top: 2.2rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.achados-cabeca h2 { margin: .9rem 0 0; }
.achados-cabeca p { color: var(--grafite); max-width: min(52ch, 100%); }

.achado {
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  border-top: 1px solid var(--linha);
}

.achado-topo {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: start;
  margin-bottom: 2rem;
}
.achado-ordem {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--grafite);
  padding-top: .4rem;
}
.achado-titulo {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0;
  max-width: min(36ch, 100%);
}

.tag {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  border-radius: var(--r);
  color: #fff;
  white-space: nowrap;
}
.tag.critico { background: var(--critico); }
.tag.alto    { background: var(--alto); }
.tag.medio   { background: var(--medio); }
.tag.baixo   { background: var(--baixo); color: var(--tinta); }

/* Os quatro campos do achado em grade recuada, não empilhados. No
   PDF "o que encontramos", "o que fazer", evidência e ganho vinham
   em quatro blocos iguais um abaixo do outro, e o leitor perdia
   qual era qual na terceira ocorrência. */
.achado-corpo {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1.4rem;
}
.achado-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; max-width: min(var(--medida), 100%); }
.campo .rotulo { display: block; margin-bottom: .5rem; }

.evidencia {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--grafite);
  background: var(--papel-2);
  border-left: 2px solid var(--baixo);
  padding: 1rem 1.2rem;
  border-radius: 0 var(--r) var(--r) 0;
}
.evidencia .rotulo { display: block; margin-bottom: .45rem; }

/* O ganho é o único campo com fundo próprio: é a resposta à
   pergunta que o dono realmente faz, e precisa ser achável ao
   folhear sem ler. */
.ganho {
  background: var(--noite);
  color: var(--claro);
  padding: 1.4rem 1.6rem;
  border-radius: var(--r);
}
.ganho .rotulo { color: var(--ciano); display: block; margin-bottom: .5rem; }

/* ── O achado principal ──────────────────────────────────────── */

.achado--principal {
  background: var(--noite);
  color: var(--claro);
  border-radius: var(--r);
  padding: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-top: 0;
}
.achado--principal .achado-titulo {
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  max-width: min(24ch, 100%);
}
.achado--principal .achado-ordem { color: var(--ciano); }
.achado--principal .rotulo { color: var(--claro-2); }
.achado--principal .evidencia {
  background: var(--noite-2);
  border-left-color: var(--petroleo);
  color: var(--claro-2);
}
.achado--principal .ganho {
  background: var(--noite-2);
  border: 1px solid var(--noite-3);
}
.achado--principal .achado-campos { max-width: min(68ch, 100%); }

/* Explicador: o bloco de "em português claro". Recuado e em sans,
   porque é aparte — quem já entende pode pular sem perder o fio. */
.explicador {
  margin-top: 1.8rem;
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: 1.5rem 1.7rem;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.62;
  color: var(--grafite);
  max-width: min(var(--medida), 100%);
}
.explicador > strong {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  display: block;
  margin-bottom: .9rem;
}
.achado--principal .explicador,
.escuro .explicador { border-color: var(--noite-3); color: var(--claro-2); }
.achado--principal .explicador > strong,
.escuro .explicador > strong { color: #fff; }

/* ═══ 6. PROJETO — o que a Home nova traz ════════════════════════ */

.projeto { background: var(--papel-2); }
.projeto .cabeca { max-width: min(56ch, 100%); margin-bottom: 3rem; }
.projeto h2 { margin: 1rem 0 .9rem; }
.projeto .cabeca p { color: var(--grafite); }

.itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
.itens li {
  background: var(--papel-2);
  padding: 1.6rem 1.7rem;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1rem;
  align-items: start;
}
.itens .n {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--petroleo);
  padding-top: .3rem;
}
.itens p { font-size: .98rem; line-height: 1.55; }

/* ═══ 7. ASSINATURA ══════════════════════════════════════════════ */

.assinatura { border-top: 1px solid var(--noite-3); }
.assinatura .grade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.assinatura h2 { margin-bottom: 1.4rem; max-width: min(18ch, 100%); }
.assinatura p { color: var(--claro-2); max-width: min(46ch, 100%); }
.assinatura .citacao {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: #fff;
  border-left: 2px solid var(--ciano);
  padding-left: 1.4rem;
  margin: 2rem 0 0;
  max-width: min(30ch, 100%);
}

.cartao {
  background: var(--noite-2);
  border: 1px solid var(--noite-3);
  border-radius: var(--r);
  padding: 1.8rem;
}
.cartao-marca {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--noite-3);
  margin-bottom: .4rem;
}
/* A marca precisa de tamanho para ler: é um escudo com duas linhas de
   texto embaixo, e a 46px virava borrão. */
.cartao-marca img { height: 76px; width: auto; }
.cartao .nome {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .12em;
  color: #fff;
  display: block;
}

.cartao-linhas a {
  display: grid;
  /* 4,6rem cortava "WHATSAPP" no meio e jogava o "P" para a linha de
     baixo. A coluna passa a caber a maior etiqueta, e nenhuma quebra. */
  grid-template-columns: 5.9rem minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--noite-3);
  text-decoration: none;
  transition: padding-left .25s ease;
}
.cartao-linhas a:last-child { border-bottom: 0; }
.cartao-linhas span {
  font-family: var(--sans);
  white-space: nowrap;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--claro-2);
}
.cartao-linhas b {
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 400;
  color: var(--claro);
  transition: color .25s ease;
}
.cartao-linhas a:hover { padding-left: .4rem; }
.cartao-linhas a:hover b { color: var(--ciano); }

/* ═══ 8. MÉTODO ══════════════════════════════════════════════════
   Limitações declaradas. Fica pequeno e por último porque é rodapé
   de honestidade, não argumento — mas não sai do documento: achado
   sem limite declarado é achado inflado. */

.metodo {
  background: var(--noite);
  color: var(--claro-2);
  border-top: 1px solid var(--noite-3);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.65;
}
.metodo .envelope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.metodo ul { margin: .7rem 0 0; padding-left: 1.1rem; }
.metodo li { margin-bottom: .4rem; }

/* ═══ Trilha de navegação ════════════════════════════════════════
   Barra fina no topo com o progresso e as âncoras. O documento
   ficou longo ao virar rolagem, e sem isso o leitor perde onde
   está — problema que o PDF resolvia com número de página. */

.trilha {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(5, 11, 22, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--noite-3);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.trilha.on { transform: none; }
.trilha .envelope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 54px;
}
.trilha .quem {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--claro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trilha nav { display: flex; gap: 1.6rem; }
.trilha nav a {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--claro-2);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.trilha nav a:hover { color: #fff; }
.trilha nav a.ativo { color: var(--ciano); border-bottom-color: var(--ciano); }

.progresso {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  background: var(--ciano);
  width: var(--p, 0%);
}

@media (max-width: 860px) { .trilha nav { display: none; } }

/* ═══ Responsivo ═════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .numeros { grid-template-columns: 1fr; }
  .painel .cabeca,
  .achados-cabeca,
  .assinatura .grade,
  .metodo .envelope { grid-template-columns: minmax(0, 1fr); }
  .paginas-inteiras { grid-template-columns: minmax(0, 1fr); }
  .area { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .area .barra-cel { grid-column: 1 / -1; }
  .achado-topo { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .achado-topo .tag { grid-column: 2; justify-self: start; }
  .achado-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .abertura h1 { max-width: none; }
  /* No celular o anel e o texto lado a lado espremem o parágrafo
     numa coluna de cinco palavras. Empilhados, leem como um bloco só. */
  .placar-nota { grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: start; }
  .anel { width: 96px; }
}

/* ═══ Impressão ══════════════════════════════════════════════════
   O PDF anexo continua saindo daqui: Ctrl+P no navegador. O que é
   gesto ou movimento (dissolução, trilha) vira estático. */

@media print {
  :root {
    --t-display: 34pt; --t-h2: 19pt; --t-h3: 13pt;
    --t-corpo: 10pt; --t-numeral: 40pt;
  }
  @page { size: A4; margin: 15mm; }
  body { background: #fff; font-size: 10pt; }
  .trilha, .desca { display: none; }
  /* A captura de página inteira é rolável na tela e tem 3.800px de
     altura: no papel ela sozinha vira dez folhas. O antes/depois do
     PDF é a dissolução achatada em duas imagens, logo acima. */
  .paginas-inteiras { display: none; }
  .rev { opacity: 1 !important; transform: none !important; }
  .area .barra i { width: var(--w, 0%) !important; }
  section { padding: 0 0 10mm; }
  .abertura { min-height: auto; break-after: page; }
  .escuro, .achado--principal, .ganho, .cartao, .metodo, .numero {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .achado, .numero, .restante, .itens li { break-inside: avoid; }
  /* No papel não há dissolução: as duas viram duas imagens
     inteiras, lado a lado, que é o que o comparativo sempre foi
     na versão impressa. */
  .transmutar {
    aspect-ratio: auto; height: auto; box-shadow: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4mm;
  }
  .transmutar img {
    position: static; height: auto;
    transform: none !important; filter: none !important;
  }
  .transmutar .depois {
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .transmutar .risco { display: none; }
  .virada .botoes { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   CAMADA DE MOVIMENTO

   Regra que separa isto de enfeite: nada aqui se repete em laço.
   Cada animação acontece UMA vez, quando o bloco entra na tela, e
   para. Documento é para reler procurando um achado — movimento
   recorrente vira ruído na segunda leitura.

   Tudo aqui é desligado inteiro em prefers-reduced-motion, no fim
   do arquivo, e nada disto existe na impressão.
   ═══════════════════════════════════════════════════════════════ */

/* ── Números que contam ──────────────────────────────────────────
   tabular-nums é obrigatório: sem ele cada dígito tem largura
   própria e o número tremeluz enquanto sobe. */
[data-conta] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Varredura da abertura ───────────────────────────────────────
   Uma faixa de luz atravessa a captura do site uma vez, no
   carregamento. É a leitura do documento acontecendo: o site foi
   escaneado, e é isso que o leitor está prestes a ver. */
.abertura .varredura {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.abertura .varredura::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 42%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(79,216,232,.05) 42%,
    rgba(79,216,232,.16) 50%,
    rgba(79,216,232,.05) 58%,
    transparent);
  transform: translateY(-140%);
}
body.pronto .abertura .varredura::after {
  animation: varrer 2.4s cubic-bezier(.4,0,.2,1) .35s 1 both;
}
@keyframes varrer {
  from { transform: translateY(-140%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateY(340%); opacity: 0; }
}

/* ── Título por linha ────────────────────────────────────────────
   Cada linha sobe atrás da própria máscara, em cascata. O <em> é a
   segunda linha e entra por último, que é onde está a virada da
   frase ("...que o site não mostra"). */
.abertura h1 .linha {
  display: block;
  overflow: hidden;
}
.abertura h1 .linha > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
body.pronto .abertura h1 .linha > span { transform: none; }
body.pronto .abertura h1 .linha:nth-child(2) > span { transition-delay: .12s; }

/* O resto da abertura entra depois do título, em bloco. */
.abertura .tese-curta,
.abertura .meta-auditoria,
.abertura-pe,
.abertura-topo {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
body.pronto .abertura-topo    { opacity: 1; transform: none; transition-delay: .05s; }
body.pronto .abertura .tese-curta   { opacity: 1; transform: none; transition-delay: .38s; }
body.pronto .abertura .meta-auditoria { opacity: 1; transform: none; transition-delay: .5s; }
body.pronto .abertura-pe      { opacity: 1; transform: none; transition-delay: .62s; }

/* ── Números da tese ─────────────────────────────────────────────
   O zero é o único em ciano, e ganha um halo quando termina de
   contar. É o número que carrega a tese do documento. */
.numero .valor { transition: text-shadow .8s ease; }
.numero.zerado.contou .valor {
  text-shadow: 0 0 42px rgba(79,216,232,.45);
}
/* fio que se desenha sob a coluna do zero quando ela termina */
.numero.zerado { position: relative; }
.numero.zerado::after {
  content: "";
  position: absolute;
  left: clamp(1.2rem, 2.5vw, 2rem);
  right: clamp(1.2rem, 2.5vw, 2rem);
  bottom: 0;
  height: 2px;
  background: var(--ciano);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.16,1,.3,1) .1s;
}
.numero.zerado.contou::after { transform: scaleX(1); }

/* ── Achados: o bloco responde ao cursor ─────────────────────────
   Fio à esquerda que cresce. Não é decoração: marca qual achado
   está sob o olho numa página com quatro deles. */
.achado:not(.achado--principal) {
  position: relative;
  transition: background .3s ease;
}
.achado:not(.achado--principal)::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: clamp(2.2rem, 4vw, 3.4rem);
  width: 2px;
  height: 0;
  background: var(--petroleo);
  transition: height .45s cubic-bezier(.16,1,.3,1);
}
.achado:not(.achado--principal):hover::before { height: 3.2rem; }

/* ── Cabeçalho do achado principal ───────────────────────────────
   Fio ciano que se desenha sob o título quando o bloco entra. */
.achado--principal .achado-titulo { position: relative; }

/* ── Itens do projeto ────────────────────────────────────────────*/
.itens li { transition: background .3s ease; }
.itens li:hover { background: var(--papel); }
.itens li:hover .n { color: var(--tinta); }
.itens .n { transition: color .3s ease; }

/* ── Linhas do painel ────────────────────────────────────────────*/
.area { transition: background .3s ease; }
.area:hover { background: var(--papel-2); }

/* ── Reduced motion: desliga a camada inteira ────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .abertura .varredura { display: none; }
  .abertura h1 .linha > span,
  .abertura .tese-curta,
  .abertura .meta-auditoria,
  .abertura-pe,
  .abertura-topo { opacity: 1 !important; transform: none !important; transition: none; }
  .anel .arco { transition: none; }
  .numero.zerado::after { transition: none; }
}

/* ── Impressão: nada de movimento, nada de grade ─────────────────*/
@media print {
  .escuro::before, .abertura .varredura { display: none !important; }
  .abertura h1 .linha > span,
  .abertura .tese-curta,
  .abertura .meta-auditoria,
  .abertura-pe,
  .abertura-topo { opacity: 1 !important; transform: none !important; }
  .anel .arco { transition: none; }
  .numero.zerado::after { transform: scaleX(1); }
}


/* ═══════════════════════════════════════════════════════════════
   BLOCOS SOB DEMANDA

   O documento aberto de ponta a ponta tinha rolagem demais: quatro
   achados despejando quatro campos cada, mais duas capturas de
   página inteira. O leitor perdia o fio de o que já tinha lido e
   do que ainda interessava.

   O corte não é esconder informação, é ordenar: fica visível o que
   muda para o dono — o porquê — e a prova (o que encontramos, o
   que fazer, a evidência) abre no clique de quem quiser conferir.

   Usa <details> nativo: funciona sem JavaScript, é indexável,
   imprime aberto e o leitor de tela anuncia o estado sozinho.
   ═══════════════════════════════════════════════════════════════ */

.prova {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--papel);
}
.prova > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.2rem;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--petroleo);
  transition: background .25s ease, color .25s ease;
}
.prova > summary::-webkit-details-marker { display: none; }
.prova > summary:hover { background: var(--papel-2); }
.prova > summary:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }

/* Sinal de abrir: uma cruz que gira para virar um "menos". Forma
   geométrica desenhada em CSS puro, sem fonte de ícone. */
.prova > summary i {
  position: relative;
  width: 13px;
  height: 13px;
  flex: none;
}
.prova > summary i::before,
.prova > summary i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.prova > summary i::after { transform: translateY(-50%) rotate(90deg); }
.prova[open] > summary i::after { transform: translateY(-50%) rotate(0deg); }
.prova[open] > summary { border-bottom: 1px solid var(--linha); }

.prova-corpo { padding: 1.5rem 1.2rem 1.6rem; }
.prova-corpo .achado-campos,
.prova-corpo > .campo,
.prova-corpo > .evidencia,
.prova-corpo > .explicador { max-width: min(var(--medida), 100%); }
.prova-corpo > * + * { margin-top: 1.6rem; }

/* dentro do achado principal a prova segue a superfície escura */
.achado--principal .prova {
  background: var(--noite-2);
  border-color: var(--noite-3);
}
.achado--principal .prova > summary { color: var(--ciano); }
.achado--principal .prova > summary:hover { background: var(--noite-3); }
.achado--principal .prova[open] > summary { border-bottom-color: var(--noite-3); }

/* a lista do projeto continua colada na de cima quando abre */
.prova--itens { border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.prova--itens .itens { border-top: 0; }
.prova--itens .prova-corpo { padding: 0; }

/* a versão larga (capturas lado a lado) não tem medida de leitura */
.prova--larga { margin-top: clamp(2rem, 4vw, 3rem); }
.prova--larga .paginas-inteiras { margin-top: 0; padding: 1.4rem 1.2rem 1.6rem; }

/* O ganho deixa de ser um bloco no meio da pilha e passa a ser a
   primeira coisa do achado: é o que responde "e daí?". */
.achado-campos > .ganho { margin-bottom: 0; }

/* ═══ Onde eu estou ══════════════════════════════════════════════
   No celular a lista de âncoras não cabe na barra. O contador de
   seção cabe, e é o que devolve a noção de fundo que a rolagem
   tirou — o mesmo papel do número de página no PDF. */

.trilha .onde {
  display: none;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--claro-2);
  white-space: nowrap;
  text-decoration: none;
  min-width: 0;
}
.trilha .onde b  { color: var(--ciano); font-weight: 500; }
.trilha .onde em { font-style: normal; opacity: .6; }
.trilha .onde span {
  font-family: var(--sans);
  color: var(--claro);
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: .35rem;
}
/* seta de "volta ao sumário": diz que o contador é tocável */
.trilha .onde::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--claro-2);
  border-bottom: 1.5px solid var(--claro-2);
  transform: rotate(45deg);
  flex: none;
  margin-left: .2rem;
}

@media (max-width: 860px) {
  .trilha .onde { display: flex; }
  /* o nome do documento sai: quem está lendo já sabe de quem é */
  .trilha .quem { display: none; }
  .trilha .envelope { height: 48px; }
}

/* ═══ Sumário ════════════════════════════════════════════════════
   Cinco linhas logo depois da abertura. Não é enfeite de navegação:
   é o que diz ao dono, antes de rolar, quanta coisa tem e o que
   cada parte responde. A sensação de "não sei mais o que tem aqui"
   começa por não se saber o tamanho do que se abriu. */

.sumario { border-top: 1px solid var(--noite-3); }
.sumario .rotulo { display: block; margin-bottom: 2rem; }
.sumario ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--noite-3);
}
.sumario li { border-bottom: 1px solid var(--noite-3); }
.sumario a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.15rem 0;
  text-decoration: none;
  transition: padding-left .3s cubic-bezier(.16,1,.3,1);
}
.sumario a:hover { padding-left: .6rem; }
.sumario .n {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--claro-2);
  transition: color .3s ease;
}
.sumario a:hover .n { color: var(--ciano); }
.sumario .titulo {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: #fff;
}
.sumario .diz {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--claro-2);
  text-align: right;
}
@media (max-width: 720px) {
  .sumario a { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; }
  .sumario .diz { grid-column: 2; text-align: left; margin-top: .25rem; }
}

/* ═══ Impressão ══════════════════════════════════════════════════*/
@media print {
  /* No papel não existe clique: tudo abre. */
  .prova { border: 0; background: none; }
  .prova > summary { display: none; }
  /* O navegador esconde o conteúdo de um <details> fechado por regra
     própria. Esconder o summary não abre nada — isto abre.

     Tem de valer para QUALQUER filho, não só para .prova-corpo: a
     lista do projeto pendura um <ol> direto no <details>, e mirar
     só na classe deixava os itens 05 a 08 fora do papel. */
  .prova > *:not(summary) { display: block !important; padding: 0; }
  .prova > .itens { display: grid !important; }
  .prova--larga { display: none; }
  .sumario { display: none; }
  .trilha .onde { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   DENSIDADE NO CELULAR

   Medido antes de mexer: 11.900px, ou 14 telas de rolagem. O peso
   estava em três lugares — achados (31%), painel por área (15%) e
   a lista do projeto (14%) — mais cerca de 1.300px só de respiro
   entre seções, que na tela grande é ritmo e no celular é distância.

   O que NÃO foi cortado: nenhum texto, nenhum achado, nenhuma
   evidência. Só o espaço em volta deles, e só abaixo de 720px.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  section { padding: 3.4rem 0; }

  /* Abertura continua ocupando a tela: é a única seção onde o vazio
     é o argumento. */
  .abertura { padding: 1.4rem 0; }

  /* Os três números perdem o respiro interno, não o tamanho: são o
     momento do documento. */
  .numero { padding: 1.3rem 1.1rem; }
  .numero .legenda { margin-top: .7rem; max-width: none; }
  .tese h2 { margin: .9rem 0 2rem; }
  .tese-remate { margin-top: 1.8rem; }

  /* Painel: o nome, a gravidade e a contagem numa linha só, com a
     barra fina embaixo. Eram 170px por área; passam a caber em ~95. */
  .area {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem .8rem;
    padding: .85rem 0;
  }
  .area .nome { font-size: .98rem; line-height: 1.3; }
  .area .grav { margin-top: .2rem; font-size: .66rem; }
  .area .conta { font-size: .95rem; align-self: start; }
  .area .barra-cel { grid-column: 1 / -1; margin-top: .45rem; }
  .area .barra { height: 4px; }

  /* Lista do projeto: número na mesma linha do texto. */
  .itens li { padding: 1rem 1.1rem; grid-template-columns: 1.9rem 1fr; gap: .8rem; }
  .itens p { font-size: .94rem; line-height: 1.45; }

  /* Achados: o principal tinha 1.415px sozinho. O título desce de
     escala e o bloco perde moldura — no celular a caixa escura já
     separa o suficiente sem 4rem de padding. */
  .achado { padding: 1.8rem 0; }
  .achado--principal { padding: 1.8rem 1.2rem; margin-bottom: 2rem; }
  .achado--principal .achado-titulo { font-size: 1.42rem; }
  .achado-topo { margin-bottom: 1.2rem; gap: .4rem .9rem; }
  .achado-campos { gap: 1.2rem; }
  .ganho { padding: 1.1rem 1.2rem; }
  .prova > summary { padding: .8rem 1rem; font-size: .8rem; }
  .prova-corpo { padding: 1.2rem 1rem 1.3rem; }
  .prova-corpo > * + * { margin-top: 1.2rem; }
  .explicador { padding: 1.2rem 1.2rem; }

  .achados-cabeca { margin-bottom: 2rem; padding-top: 1.6rem; }
  .confronto .cabeca, .projeto .cabeca { margin-bottom: 1.8rem; }
  .painel .cabeca { margin-bottom: 2rem; }

  .assinatura .citacao { margin-top: 1.4rem; }
  .cartao { padding: 1.3rem; }
  .cartao-marca img { height: 62px; }

  .sumario ol { margin-top: -.5rem; }
  .sumario .rotulo { margin-bottom: 1.2rem; }
  .sumario a { padding: .9rem 0; }
}