/* Dra. Érica Mota · hematologia
   Identidade em ../../Identidade Visual/IDENTIDADE.md. Tokens só aqui.

   Direção: a página é organizada pelas DÚVIDAS que o paciente digita, e tratada
   como publicação e não como site. A faixa de referência é o sistema gráfico
   recorrente. Nenhuma UI falsa: documento clínico montado com div é o tell que
   derrubou a primeira versão em 21/08/2026. */

@font-face{font-family:"Newsreader";src:url("../fontes/newsreader.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap}
/* o itálico é arquivo separado na Newsreader, e o subset dele tem só os glifos
   da assinatura, por isso 2,7 KB. Sem ele o navegador sintetiza uma inclinação
   falsa, que é o oposto de elegante. */
@font-face{font-family:"Newsreader";src:url("../fontes/newsreader-italico.woff") format("woff");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url("../fontes/plexsans.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fontes/plexsans-500.woff") format("woff");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --tinta:#12161A;
  --apoio:#5A6672;
  /* ⚠ Era verde `#2F6F6B` ate 21/08/2026. Trocado pelo Og: "o verde e muito
     batido para medicos", e ele esta certo, e o cliche numero um da saude.
     Ameixa sobre claro da 9,93:1 contra 5,62:1 do verde. A razao inteira, com
     as tres candidatas medidas, esta no IDENTIDADE.md. */
  --acento:#5A3450;
  --acento-claro:#A97BA0;
  --divisoria:#E8EAE6;
  --fundo:#FBFBF9;
  --superficie:#F4F4F2;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;

  --raio:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --largura:1180px;
  --sangra:var(--s5);   /* = o padding lateral do envelope, ver o veu das duvidas */
  --coluna:64ch;      /* a medida de leitura, e ela manda no layout inteiro */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--tinta);
  font-family:Plex,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  /* Degradê no campo claro. Ele é uma CAMADA ÚNICA por trás da página inteira,
     e não um gradiente por seção: assim não existe emenda visível entre elas.
     ⚠ Ele NÃO mora mais aqui, mora em `body::before`, e o porquê está lá.
     Foram TRÊS versões de cor, e as duas primeiras erraram para o mesmo lado:
       #FFFFFF a #F4F4F1  ·  11 pontos de canal  ·  "esta quase invisivel"
       #FFFFFF a #E9E9E2  ·  22 pontos           ·  ainda pouco no rodape
       #FFFFFF a #E2E2D9  ·  29 pontos           ·  esta valendo
     ⚠ E o degrade NAO resolve o contraste entre uma duvida e outra, que e
     outro pedido do mesmo dia: ele varia ao longo da pagina inteira e nao
     dentro de uma tela. Quem resolve aquilo e o veu de `.duvida`, abaixo.

     ⚠⚠ E ELE NAO MORA MAIS AQUI. Ver `body::before`, logo abaixo. */
}

/* ── o degradê é uma CAMADA e não um `background-attachment:fixed` ─────
   ⚠ ELE ERA `fixed` NO BODY ATÉ 21/08/2026, e o Og gravou o defeito no celular
   às 17:21: rolando, a faixa de baixo da tela virava BRANCO e o gradiente
   voltava quando o dedo parava. Medido nos quadros do vídeo, `(253,253,253)`
   durante a rolagem contra `(210,211,202)` parado.

   A causa não é o gradiente, é o `fixed`: ele é dimensionado contra o viewport
   DAQUELE INSTANTE. No Chrome Android a barra de endereço recolhe durante a
   rolagem e o viewport CRESCE, e a faixa que apareceu fica sem pintura até o
   navegador repintar. O que aparece no buraco é o canvas, e ele era branco
   porque o `html` não tinha background nenhum.

   O conserto tem duas metades e nenhuma sozinha basta:

   1 · o gradiente vira uma CAMADA `position:fixed` de altura `100lvh`, que é a
       altura do viewport COM A BARRA JÁ RECOLHIDA, ou seja a maior das duas.
       Ela nasce cobrindo o pior caso, então não existe instante em que o
       viewport passe dela. `100vh` fica antes como reserva para navegador sem
       as unidades novas.
   2 · o `html` ganha cor sólida, que é o cinto de segurança do overscroll: no
       repique do fim da página quem aparece é o canvas, e ele não pode ser
       branco puro no meio de uma página de campo claro.

   ⚠ `z-index:-1` e NÃO um elemento de verdade: assim ela fica atrás de todo o
   conteúdo sem precisar que ninguém declare `z-index` positivo, e nada no
   documento precisa saber que ela existe. */
html{background:var(--fundo)}
body::before{
  content:"";
  position:fixed;
  left:0;right:0;top:0;
  height:100vh;
  height:100lvh;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(132% 78% at 50% -6%,
      #FFFFFF 0%, #FBFBF9 34%, #EFEFEA 70%, #E2E2D9 100%);
}

/* ⚠ Toda âncora precisa disto. Sem `scroll-margin-top` o navegador leva o alvo
   ao topo absoluto da janela, que está coberto pelo cabeçalho fixo de 72 px, e
   nas dúvidas o efeito é chegar no meio da resposta. Reportado pelo Og em
   21/08/2026. O valor é a altura do cabeçalho mais respiro. */
:target,[id]{scroll-margin-top:104px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.env{max-width:var(--largura);margin:0 auto;padding:0 var(--s5)}
.leitura{max-width:var(--coluna)}

h1,h2,h3{font-family:Newsreader,Georgia,serif;font-weight:400;
  letter-spacing:-.014em;line-height:1.13;margin:0;color:var(--tinta);
  text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.55rem);line-height:1.16}
h3{font-size:1.2rem;line-height:1.32}
p{margin:0 0 var(--s5)}
p:last-child{margin-bottom:0}

.rot{font-family:Plex;font-size:.69rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--apoio);margin:0 0 var(--s5)}
.lead{font-size:1.2rem;color:var(--apoio)}
.mini{font-size:.86rem;color:var(--apoio)}
.nota{font-size:.79rem;color:var(--apoio);line-height:1.55}

/* ── botão ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:15px var(--s6);border-radius:var(--raio);
  background:var(--acento);color:var(--fundo);
  font-family:Plex;font-size:.97rem;font-weight:500;text-decoration:none;
  transition:background .5s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:#265B58;transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}

/* ── cabeçalho ───────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:20;background:rgba(251,251,249,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--divisoria)}
.topo .env{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);min-height:72px}
.topo img{width:220px}
.topo nav{display:flex;align-items:center;gap:var(--s6)}
/* ⚠ `:not(.btn)` obrigatório: `.topo nav a` (0-1-1) vence `.btn` (0-1-0) e o
   botão herdaria o cinza dos links, indo a 1.01:1. Medido em 21/08/2026. */
.topo nav a:not(.btn){font-size:.91rem;color:var(--apoio);text-decoration:none;
  transition:color .25s var(--ease)}
.topo nav a:not(.btn):hover{color:var(--tinta)}
.topo .btn{padding:11px var(--s5);font-size:.9rem}

/* ── herói editorial ─────────────────────────────────────────────── */
/* Topo em s9 e não s10: com s10 sobravam ~250 px de vazio antes do H1 e o
   conteúdo flutuava no meio da tela, que lê como defeito e não como espaço. */
.heroi{padding:var(--s9) 0 var(--s9)}
.heroi__grade{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s9);
  align-items:end}
.heroi h1{margin-bottom:var(--s6)}
.heroi .lead{margin-bottom:var(--s7);max-width:46ch}
.heroi img{border-radius:14px}

/* a linha do Art. 4º da Resolução CFM 2.336/2023, obrigatória na home */
.registro{font-size:.79rem;color:var(--apoio);line-height:1.6;
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--divisoria)}
.registro strong{color:var(--tinta);font-weight:500}

/* ── a faixa de referência · o sistema gráfico da página ─────────── */
/* ⚠ O DESENHO MUDOU em 21/08/2026, escolhido pelo Og entre cinco tratamentos:
   a variante 5 (duas alturas) combinada com a 3 (o marcador e o simbolo).

   O que havia antes era trilho, preenchimento e punho, ou seja a anatomia
   exata de um CONTROLE DESLIZANTE de aplicativo. Num site de medica aquilo le
   como widget e nao como instrumento de medida.

   O conserto e separar os planos: EMBAIXO a escala, EM CIMA o resultado. Nada
   corre sobre um trilho porque o valor nem toca a escala. E o marcador virou o
   losango do heme, entao o simbolo da marca aparece mais uma vez sem ser
   enfeite.

   ⚠ Os rotulos vao DENTRO do SVG e nao em HTML, porque tem que ficar alinhados
   as pontas da faixa, e a posicao delas so existe no viewBox. O preco e que o
   texto escala junto: por isso a faixa pequena usa viewBox de 460 e nao de 620,
   para o corpo de 11 chegar na tela perto de 11 e nao de 8. */
.faixa{display:block;width:100%;height:auto;margin:var(--s6) 0 var(--s4)}
.faixa text,.faixa-grande text{font-family:Plex,system-ui,sans-serif;
  fill:var(--apoio);letter-spacing:.04em}

/* ⚠ A cor das quatro partes mora AQUI e nunca no atributo do SVG. Antes ela
   estava escrita `#2F6F6B` dentro de cada `<line>`, em tres lugares, e a troca
   do acento em 21/08/2026 teria deixado a pagina em ameixa com as faixas em
   verde, sem nada acusando: SVG com cor literal renderiza perfeito.
   ⚠ E `stroke` tem padrao `none`, entao linha sem regra aqui some por completo,
   que e o modo de falha mais barulhento e por isso o menos perigoso. */
.faixa .esc,.faixa-grande .esc{stroke:#DCDCD5}
.faixa .ref,.faixa-grande .ref{stroke:var(--acento)}
.faixa .haste,.faixa-grande .haste{stroke:var(--tinta);opacity:.4}
/* ⚠ O marcador e o SIMBOLO VAZADO e nao um losango cheio. Cheio ele lia como
   tachinha de mapa, e contrariava a regra dos 24 px do IDENTIDADE.md: a figura
   solida e a de MENOS de 24 px, e este mede 30. A geometria (canto .34, traco
   .148, ferro .385) sai do montar_marca.py e nao foi inventada aqui. */
.faixa .anel,.faixa-grande .anel{stroke:var(--tinta)}
.faixa .ferro,.faixa-grande .ferro{fill:var(--acento)}
.faixa__leg{display:flex;justify-content:space-between;gap:var(--s5);
  margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--divisoria);
  font-size:.72rem;color:var(--apoio);letter-spacing:.03em}
.faixa__leg b{font-weight:500;color:var(--tinta)}

/* o mesmo desenho, sem números, separando as dúvidas */
.regua{margin:var(--s9) 0;height:3px;background:var(--divisoria);
  position:relative;border-radius:2px}
.regua::after{content:"";position:absolute;left:14%;width:23%;top:0;bottom:0;
  background:var(--acento);border-radius:2px}

/* ── o índice ────────────────────────────────────────────────────── */
.indice{border-top:1px solid var(--divisoria);padding-top:var(--s6);
  margin-bottom:var(--s8)}
.indice ol{list-style:none;margin:0;padding:0;
  columns:2;column-gap:var(--s9)}
.indice li{break-inside:avoid;margin-bottom:var(--s3)}
.indice a{font-family:Newsreader,Georgia,serif;font-size:1.14rem;line-height:1.4;
  color:var(--tinta);text-decoration:none;
  background-image:linear-gradient(var(--acento),var(--acento));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease),color .3s var(--ease)}
.indice a:hover{color:var(--acento);background-size:100% 1px}

/* ── a faixa de referência em escala grande ──────────────────────── */
.faixa-grande{margin:0 0 var(--s9);padding:var(--s7) 0;
  border-top:1px solid var(--divisoria);border-bottom:1px solid var(--divisoria)}
.faixa-grande svg{display:block;width:100%;height:auto}
.faixa-grande figcaption{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);
  margin-top:var(--s5);font-size:.9rem;color:var(--apoio);line-height:1.6}
.faixa-grande b{font-weight:400;color:var(--tinta)}

/* ── as dúvidas ──────────────────────────────────────────────────── */
.duvidas{padding:var(--s9) 0}
/* ⚠ Cada dúvida é uma UNIDADE fechada, com divisória própria e folga generosa.
   Antes elas eram separadas só por padding, e com a pergunta presa no scroll
   a leitura embaralhava: a pergunta de cima ficava parada ao lado da resposta
   de baixo, e as duas pareciam um bloco só. Reportado pelo Og em 21/08/2026. */
.duvida{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:var(--s9);align-items:start;
  padding:var(--s9) 0;border-top:1px solid var(--divisoria)}
.duvida:first-of-type{border-top:0;padding-top:0}

/* ⚠ O VEU ALTERNADO. A divisoria de 1 px some no campo claro, e o Og descreveu
   o efeito como "texto atras de texto": com a pergunta presa no scroll, duas
   respostas seguidas leem como um bloco so. Uma LINHA nao separa BLOCO, area
   separa, e por isso o degrade maior tambem nao resolvia isto.
   `.022` de tinta e ~2 pontos de canal, abaixo do limiar em que a mancha vira
   caixa desenhada, e o bastante para o olho achar a borda.
   Sangra `--sangra` de cada lado, que e o padding do envelope: em tela larga
   sobra respiro, em tela estreita encosta na borda e vira faixa de largura
   total, que e o comportamento certo ali. */
.duvida{position:relative}
.duvida::before{content:"";position:absolute;
  inset:0 calc(-1 * var(--sangra));border-radius:var(--raio);
  pointer-events:none}
.duvida:nth-of-type(even)::before{background:rgba(18,22,26,.022)}
/* o `top` casa com o `scroll-margin-top` das âncoras, senão a pergunta pula
   de posição quando alguém chega nela pelo índice */
.duvida h2{position:sticky;top:104px;font-size:clamp(1.8rem,3.6vw,2.7rem)}
.duvida__corpo{max-width:54ch}
.duvida__corpo p{font-size:1.05rem}
.duvida--larga{grid-template-columns:1fr}
.duvida--larga h2{position:static;max-width:24ch;margin-bottom:var(--s6)}
.duvida--larga .duvida__corpo{max-width:var(--coluna)}

/* ⚠ Era fundo translucido de acento atras da palavra, e com o verde passava.
   Em ameixa ele le como GRIFO DE MARCA-TEXTO ESCOLAR, medido na comparacao das
   tres cores em 21/08/2026. Sublinhado grosso diz a mesma coisa e continua
   adulto. Ancorado em 100% para nao atravessar descendente (g, p, q, y). */
.marcado{background-image:linear-gradient(var(--acento),var(--acento));
  background-size:100% 2.5px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px}

/* ── faixa de conteúdo em superfície ─────────────────────────────── */
.faixa-sec{background:var(--superficie);color:var(--tinta);
  border-top:1px solid var(--divisoria);border-bottom:1px solid var(--divisoria);
  padding:var(--s9) 0}

/* ── a consulta ──────────────────────────────────────────────────── */
.consulta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
.locais{margin-top:var(--s7);border-top:1px solid var(--divisoria)}
.local{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--divisoria)}
.local dt{font-family:Newsreader,Georgia,serif;font-size:1.12rem;min-width:9.5ch}
.local dd{margin:0;font-size:.88rem;color:var(--apoio);line-height:1.55}
.local--online dt{color:var(--acento)}

/* ── quem ela é ──────────────────────────────────────────────────── */
/* Foto à ESQUERDA e texto à direita, espelhando o herói, que tem o texto à
   esquerda e a foto à direita. É esse espelho que dá o contraste entre as
   duas seções, pedido pelo Og em 21/08/2026. A faixa de largura total foi
   descartada por ele no mesmo dia. */
.quem{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--s9);
  align-items:center}
/* a foto aqui é a VERTICAL original. Forçar 4/5 no recorte 16:9 era cortar um
   corte, e o rosto vinha fechado demais. */
.quem img{border-radius:14px}
/* ⚠ A coluna da instituicao desalinhava porque cada `li` era um GRID PROPRIO:
   `auto` mede o conteudo daquele li e de mais nenhum, entao as tres formacoes
   comecavam em x diferentes. O Og apontou a linha do INCA em 21/08/2026, e a
   correcao daquele dia resolveu so o caso dele.
   `subgrid` faz os tres lis herdarem a MESMA coluna do pai. Com o @supports,
   navegador sem subgrid cai no comportamento antigo em vez de empilhar. */
.trilha{margin:var(--s7) 0 0;padding:0;list-style:none}
@supports (grid-template-columns:subgrid){
  .trilha{display:grid;grid-template-columns:max-content 1fr}
  .trilha li{grid-template-columns:subgrid!important;grid-column:1/-1}
}
.trilha li{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:1px solid var(--divisoria)}
.trilha li:last-child{border-bottom:0}
.trilha b{font-weight:400;font-family:Newsreader,Georgia,serif;font-size:1.06rem}
.trilha span{font-size:.85rem;color:var(--apoio)}
/* ⚠ O bloco do INCA mantém as MESMAS duas colunas das outras linhas. A versão
   anterior virava coluna única com filete à esquerda e margem negativa, o que
   desalinhava a trilha inteira e colava o texto no filete. Aqui a única
   diferença é o conteúdo da segunda coluna ser uma lista. */
.trilha--inca ul{margin:0;padding:0;list-style:none}
.trilha--inca ul li{display:block;padding:0 0 var(--s1);border:0;
  font-size:.85rem;color:var(--apoio);line-height:1.5}
.trilha--inca ul li:last-child{padding-bottom:0}

/* ── o que os pacientes dizem ────────────────────────────────────
   O bloco escuro é deliberado e único no meio da página: ele quebra o campo
   claro exatamente onde a prova social precisa de peso. Não é inversão de tema
   por seção, é UM momento, e ele rima com o rodapé. */
.vozes{background:var(--tinta);color:#C6CDD4;padding:var(--s10) 0}

.destaque{margin:0 0 var(--s9);text-align:center}
.destaque p{font-family:Newsreader,Georgia,serif;color:var(--fundo);
  font-size:clamp(1.75rem,3.9vw,2.9rem);line-height:1.28;letter-spacing:-.012em;
  margin:0 0 var(--s5);text-wrap:balance}
.destaque cite{font-style:normal;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7C8894}

.vozes__placar{display:flex;align-items:center;justify-content:center;gap:var(--s6);
  flex-wrap:wrap;text-align:left;padding:var(--s6) 0;margin-bottom:var(--s8);
  border-top:1px solid #232A31;border-bottom:1px solid #232A31}
.placar__nota{font-family:Newsreader,Georgia,serif;font-size:3.5rem;line-height:1;
  color:var(--acento-claro)}
.placar__nota span{font-size:.95rem;color:#7C8894;margin-left:var(--s2)}
.placar__txt{margin:0;font-size:.95rem;color:#C6CDD4}
.placar__txt strong{color:var(--fundo);font-weight:500}
.placar__txt .mini{color:#8A94A0}
.vozes a{color:var(--acento-claro);text-decoration:underline;text-underline-offset:3px}

.vozes__grade{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6)}
.voz{margin:0;padding:var(--s6);border:1px solid #232A31;border-radius:12px;
  background:#171C22;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--s5);min-width:0}
.voz blockquote{margin:0}
.voz p{font-size:1rem;line-height:1.62;color:#C6CDD4;margin:0}
/* aspas tipográficas de verdade, e como ornamento fora do fluxo do texto */
.voz blockquote::before{content:"\201C";display:block;font-family:Newsreader,Georgia,serif;
  font-size:2.6rem;line-height:.6;color:var(--acento-claro);margin-bottom:var(--s3)}
.voz figcaption{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:#7C8894}
/* ⚠ 4 itens em 2 colunas são 2x2. A versão anterior dava `grid-column:1/-1` na
   quarta, o que deixava a TERCEIRA sozinha com um buraco ao lado. Grade com
   célula vazia no meio é erro de planejamento, não composição. */

/* #6E7A86 dá 4.15:1 sobre a tinta. É o mesmo valor que já falhou no rodapé
   hoje, e voltou porque eu reusei o tom sem remedir. */
.vozes__fonte{margin:var(--s8) 0 0;font-size:.78rem;line-height:1.6;color:#8A94A0;
  max-width:76ch}

/* ── chamada final ───────────────────────────────────────────────── */
.fim{background:var(--tinta);color:var(--fundo);padding:var(--s10) 0}
.fim h2{color:var(--fundo);max-width:18ch}
.fim p{color:#9AA4AE;max-width:48ch;margin-top:var(--s5)}
.fim .btn{background:var(--acento-claro);color:var(--tinta);margin-top:var(--s7)}
.fim .btn:hover{background:#63B0AA}

/* ── rodapé ──────────────────────────────────────────────────────── */
.pe{background:var(--tinta);color:#9AA4AE;padding:var(--s8) 0 var(--s6);
  border-top:1px solid #232A31}
.pe img{width:230px;margin-bottom:var(--s6)}
.pe__grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s7)}
/* #6E7A86 dava 4.15:1 sobre a tinta, abaixo do 4.5 do WCAG. Medido em 21/08. */
.pe h3{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8A94A0;font-family:Plex;font-weight:500;margin-bottom:var(--s3)}
.pe p,.pe li{font-size:.85rem;line-height:1.68;color:#9AA4AE}
.pe ul{margin:0;padding:0;list-style:none}
.pe a{color:#C6CDD4;text-decoration:none}
.pe a:hover{color:var(--fundo);text-decoration:underline}
.pe__reg{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid #232A31;
/* ⚠ Este `color` NUNCA valeu: `.pe p` (0-1-1) vence `.pe__reg` (0-1-0), então o
   que renderiza é o #9AA4AE de lá. O valor morto aqui era #6E7A86, que dá
   4.15:1 e falharia o WCAG no dia em que alguém mexesse na regra vizinha.
   Medido em 21/08/2026, e é a mesma armadilha de especificidade do botão do
   topo, só que do lado que não dói. */
  font-size:.78rem;color:#9AA4AE;max-width:78ch}
.pe__reg strong{color:#C6CDD4;font-weight:500}

/* ── revelação editorial ─────────────────────────────────────────── */
.sobe{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.sobe.vivo{opacity:1;transform:none}

/* ── responsivo ──────────────────────────────────────────────────── */
/* ── mobile ──────────────────────────────────────────────────────
   ⚠ O índice em duas colunas e a trilha em duas colunas quebram cedo, bem
   antes de 560 px: com ~40 ch por coluna, cada pergunta vira quatro linhas de
   três palavras. Reportado pelo Og em 21/08/2026 com a página no celular.
   Por isso o corte é 860 e não 560. */
@media (max-width:860px){
  .indice ol{columns:1}
  .indice li{margin-bottom:var(--s4)}
  .indice a{font-size:1.06rem}
  .faixa-grande figcaption{grid-template-columns:1fr;gap:var(--s3)}
  /* a trilha empilha: instituição em cima, formações embaixo e recuadas */
  .trilha{display:block}
  .trilha li{grid-template-columns:1fr!important;gap:var(--s1);padding:var(--s5) 0}
  .trilha span{padding-left:var(--s4)}
  .trilha--inca ul{padding-left:var(--s4)}
}

@media (max-width:960px){
  .heroi__grade,.consulta,.quem{grid-template-columns:1fr;gap:var(--s7)}
  .duvida{grid-template-columns:1fr;gap:var(--s5);padding:var(--s7) 0}
  .duvida h2{position:static;margin-bottom:var(--s2)}
  .duvida{padding:var(--s8) 0}
  .pe__grade{grid-template-columns:1fr;gap:var(--s6)}
  .topo nav a:not(.btn){display:none}
  .heroi{padding:var(--s8) 0 var(--s7)}
  .vozes{padding:var(--s8) 0}
  .vozes__grade{grid-template-columns:1fr;gap:var(--s5)}
  .destaque{margin-bottom:var(--s7)}
  .vozes__placar{justify-content:flex-start;margin-bottom:var(--s7)}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .env{padding:0 var(--s4)}
  :root{--sangra:var(--s4)}   /* o veu das duvidas nao pode passar da borda */
  /* a legenda da faixa empilha: em duas colunas cada metade vira duas linhas
     de duas palavras, e o par le como tabela em vez de legenda */
  .faixa__leg{flex-direction:column;gap:var(--s1)}
  .local{grid-template-columns:1fr;gap:var(--s1)}
  .local dt{min-width:0}
  .topo img{width:190px}
  .heroi img,.quem img{aspect-ratio:4/3;object-fit:cover;object-position:50% 20%}
  .regua{margin:var(--s7) 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .sobe{opacity:1;transform:none}
}