/* ================================================================== Compasso — folha de estilo única. A cor do fundo é escrita pelo app.js a cada quadro. Por isso NÃO existe `transition` de background, de color, nem de nenhuma variável de cor aqui dentro. Se alguém acrescentar, a cor pintada passa a arrastar uns 300ms atrás da calculada e a conta de contraste vira ficção. As cores de texto vêm em dois conjuntos: `papel` (letra escura sobre fundo claro) e `noite` (letra clara sobre fundo escuro). O app troca o atributo data-polo no quando o fundo cruza a luminância de virada. É um pulo, e é de propósito. ================================================================== */ :root { --claro: #FBFAF7; --noite: #0E1A2B; --tinta: #14202E; --tinta2: #47566A; --tinta3: #5A6A7E; /* #5F6E82 da paleta reprovava em 4,5:1 no fundo mais escuro do trecho claro (4,42:1). Escurecido o mínimo necessário: agora dá 4,63:1. */ --traco: #C8443C; --calmo: #17706B; --linha: #E2DFD6; /* conjunto papel — a base segura */ --ink: var(--tinta); --ink-forte: var(--noite); --ink2: var(--tinta2); --ink3: var(--tinta3); --accent: var(--calmo); --rule: #CFCABB; --superficie: rgba(20, 32, 46, 0.045); --vermelho: var(--traco); /* Realce de quem está debaixo do ponteiro. É mais fraco que --superficie de propósito: --tinta3 sobre o fundo mais escuro do trecho claro já está em 4,64:1, e um véu de 4,5 % o levaria a 4,50:1. Com 3 % o pior caso medido é 4,62:1 (o rótulo de exame, com o fundo em #F3F1EA). Ver "Realce de hover" no README. */ --realce: rgba(20, 32, 46, 0.03); /* Curvas e durações medidas, não estimadas. --curva é o padrão de interface; --curva-dica é a da ficha que entra, com o único overshoot aceito na peça; --curva-sai é ease-in, para quem está saindo; --curva-assenta é a de mudança de fundo, usada no realce de :target. */ --curva: cubic-bezier(0.4, 0, 0.2, 1); --curva-dica: cubic-bezier(0.175, 0.885, 0.32, 1.1); --curva-sai: cubic-bezier(0.4, 0, 1, 1); --curva-assenta: cubic-bezier(0.25, 1, 0.5, 1); /* As durações são variáveis, e não número escrito na regra, por um motivo só: com movimento reduzido elas precisam cair para 0,01ms sem que a especificidade decida quem ganha. O estado de hover zera a duração dele mesmo (entrar é instantâneo), e uma regra de reduce com seletor mais fraco nunca alcançaria esses `:hover`. Variável herda e não disputa. */ --t-ui: 150ms; /* realce e retorno simples */ --t-cresce: 180ms; /* sublinhado crescendo por scaleX */ --t-dica: 200ms; /* a ficha da nota entrando */ --t-alvo: 300ms; /* a fonte de destino assentando */ --t-aperto: 90ms; /* o botão afundando */ --faixa: 40px; --sangria: 20px; --rampa: 300px; /* rolagem gasta na travessia de cor; ver .passagem */ --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --sans: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } :root[data-polo='noite'] { --ink: #FBFAF7; --ink-forte: #FBFAF7; --ink2: #A7B6C6; --ink3: #8FA0B4; --accent: #5FBDB4; --rule: #2A3B52; --superficie: rgba(251, 250, 247, 0.065); --vermelho: #E8756B; --realce: rgba(251, 250, 247, 0.05); } @media (min-width: 760px) { :root { --faixa: 88px; --sangria: 40px; --rampa: 460px; } } @media (min-width: 1180px) { :root { --faixa: 128px; --sangria: 56px; } } *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--claro); -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; /* nunca hidden: hidden mata position:sticky */ background: transparent; /* quem pinta é o */ color: var(--ink); font-family: var(--sans); font-size: clamp(1rem, 0.94rem + 0.22vw, 1.125rem); line-height: 1.62; font-weight: 400; text-rendering: optimizeLegibility; } /* ---------- a faixa do eletrocardiograma ---------- */ .faixa-traco { position: fixed; inset-block: 0; left: 0; width: var(--faixa); z-index: 2; pointer-events: none; /* no contêiner, não só no canvas */ } .faixa-traco canvas { display: block; pointer-events: none; } /* ---------- esqueleto ---------- */ .tira { position: relative; z-index: 1; padding-left: calc(var(--faixa) + var(--sangria)); padding-right: var(--sangria); } .secao { max-width: 1640px; margin-inline: auto; padding-block: clamp(3.5rem, 9svh, 7.5rem); } .medida { max-width: 62ch; } /* ---------- tipografia ---------- */ h1, h2, h3, .frase, .dado-numero, .exame-nome { font-family: var(--serif); font-weight: 400; color: var(--ink-forte); letter-spacing: -0.012em; } h1 { font-size: clamp(2.5rem, 1.4rem + 5.4vw, 5.5rem); line-height: 1.02; margin: 0 0 1.4rem; max-width: 22ch; } h1 em { font-style: italic; } h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; max-width: 26ch; } h3 { font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem); line-height: 1.25; margin: 0 0 0.4rem; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } .lide { font-family: var(--serif); font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem); line-height: 1.42; color: var(--ink); max-width: 40ch; } /* ---------- a chamada de nota ---------- Era um ^{inerte. Virou link para a fonte no rodapé, e é ele que abre a
ficha com o resumo da fonte — a leitura ganha mais com isso do que com
qualquer outro movimento da página: dá para conferir de onde veio o número
sem sair da linha em que se estava.

Sem ^{: o alvo de toque precisa ter 24px de lado, e a bateria só isenta
dos 44px quem é link dentro de texto corrido — filho de ^{não é. A
elevação vem de `vertical-align`, que é o que o ^{fazia de visível.

O par padding/margem é o alvo de toque: o padding infla a caixa até 26×26
e a margem negativa devolve o espaço, então o texto ao redor não anda um
pixel. Padding vertical em caixa inline não mexe na altura da linha. */
.ref {
position: relative;
font-family: var(--sans);
font-size: 0.66em;
font-weight: 600;
color: var(--accent);
font-variant-numeric: tabular-nums;
vertical-align: super;
text-decoration: none;
padding: 7px 10px;
margin: 0 -9px;
}

/* “4, 5” são duas notas, e cada uma é um link. A vírgula é do desenho, não do
texto: não pode ficar solta entre os dois, em corpo inteiro e na linha de
base. Não serve `.ref + .ref`, que casaria com duas chamadas separadas por
um parágrafo inteiro de texto — nó de texto não interrompe adjacência. */
.ref-mais::before { content: ','; padding-right: 0.18em; }

.ref::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 7px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-ui) var(--curva-sai);
}

@media (hover: hover) {
.ref:hover::after { transform: scaleX(1); transition: transform var(--t-cresce) var(--curva); }
}

.ref:focus-visible { outline-offset: 0; }
.ref:focus-visible::after { transform: scaleX(1); transition-duration: 0s; }

.afasta { margin-top: clamp(2.4rem, 6svh, 4rem); }

.miudo {
font-size: 0.9rem;
line-height: 1.55;
color: var(--ink2);
}

.miudo b { color: var(--ink-forte); font-weight: 600; }

.nota-topo {
max-width: 48ch;
padding-top: 1.1rem;
border-top: 1px solid var(--rule);
}

/* ---------- topo ---------- */

.topo {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1.6rem;
max-width: 1640px;
margin-inline: auto;
padding-block: 1.4rem 0;
}

.marca {
font-family: var(--serif);
font-size: 1.32rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ink-forte);
margin: 0;
}

.marca span {
display: block;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink3);
}

.menu {
display: flex;
flex-wrap: wrap;
gap: 0 1.2rem;
margin-left: auto;
list-style: none;
padding: 0;
}

.menu a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 2px;
font-size: 0.9rem;
color: var(--ink2);
text-decoration: none;
}

.menu a:hover, .menu a:focus-visible { color: var(--ink); }

/* O sublinhado cresce por scaleX a partir da esquerda, em vez de acender uma
borda inteira de uma vez. Ele NÃO pode ser `border-bottom`: a borda mora no
fim de uma caixa de 44px de toque e flutuava 12px abaixo da palavra — o
mesmo defeito que o telefone já tinha. Fica num pseudo, colado no texto.

A duração vive no estado normal e o :hover a zera: entrar instantâneo,
sair em 180ms. Hover que demora a aparecer lê como página lenta.
O telefone é o único item que já tem sublinhado de texto, e fica fora. */
.menu a:not(.ligar)::after {
content: '';
position: absolute;
left: 2px;
right: 2px;
bottom: 11px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-ui) var(--curva-sai);
}

@media (hover: hover) {
.menu a:not(.ligar):hover::after { transform: scaleX(1); transition: transform var(--t-cresce) var(--curva); }
}

/* Foco de teclado não se anima: é repetido centenas de vezes por dia. */
.menu a:not(.ligar):focus-visible::after { transform: scaleX(1); transition-duration: 0s; }

/* O telefone é o único link do menu que resolve algo sem sair da página.
O sublinhado é do texto, não da borda de baixo: a borda mora no fim de uma
caixa de 44px e ficava flutuando 12px abaixo da palavra. */
.menu .ligar {
color: var(--ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-decoration: underline var(--vermelho) 2px;
text-underline-offset: 5px;
}

/* ---------- abertura ---------- */

.abertura { padding-top: clamp(2.5rem, 6svh, 5rem); }

.promessa {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: 1.6rem 2.4rem;
margin-top: clamp(2.5rem, 6svh, 4.5rem);
padding-top: 1.8rem;
border-top: 1px solid var(--rule);
}

.dado { min-width: 0; }

.dado-numero {
display: block;
font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.1rem);
line-height: 1;
color: var(--ink-forte);
margin-bottom: 0.35rem;
}

.dado-numero small {
font-size: 0.42em;
font-family: var(--sans);
letter-spacing: 0;
}

/* ---------- blocos e grades ---------- */

.par {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
gap: clamp(1.6rem, 4vw, 3.5rem);
align-items: start;
}

/* ---------- tabelas de referência ---------- */

/* A largura que importa aqui é a da moldura, não a da janela: a 1024px a
tabela cai numa coluna de 408px, mais estreita que num celular de 430.
Por isso a regra estreita é consulta de contêiner. */
.moldura {
container-type: inline-size;
overflow-x: auto;
margin-top: 1.8rem;
}

.tabela {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}

.tabela caption {
text-align: left;
font-size: 0.9rem;
color: var(--ink2);
padding-bottom: 0.7rem;
}

.tabela th, .tabela td {
text-align: left;
padding: 0.62rem 0.9rem 0.62rem 0;
border-bottom: 1px solid var(--rule);
vertical-align: baseline;
}

.tabela thead th {
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--ink3);
}

.tabela tbody th {
font-weight: 500;
color: var(--ink);
white-space: nowrap;
}

.tabela td { color: var(--ink2); }
.tabela .num { color: var(--ink); white-space: nowrap; }
.tabela tr:last-child th, .tabela tr:last-child td { border-bottom: 0; }

/* A linha debaixo do ponteiro acende. Ler “estágio 2 · 160 a 179 · 100 a 109”
é atravessar três colunas com o olho, e é onde se troca de linha sem
perceber. O realce é a opacidade de um pseudo com cor já pintada — nunca
`background-color` em transição, que nesta página é proibido.

Acende no quadro seguinte (duração 0s no :hover) e apaga em 150ms. Não há
deslocamento: mover a linha desalinharia as colunas com as vizinhas. */
.tabela tbody tr { position: relative; }

.tabela tbody tr::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--realce);
opacity: 0;
transition: opacity var(--t-ui) var(--curva-sai);
}

@media (hover: hover) {
.tabela tbody tr:hover::after { opacity: 1; transition-duration: 0s; }
}

/* Contêiner estreito. Era o `nowrap` das duas primeiras colunas, somado a um
`min-width: 380px`, que empurrava a coluna da direita para fora da moldura:
num celular de 390 a diastólica virava “e abaix”, e a coluna de preço da
agenda desaparecia inteira, sem nenhum sinal de que a tabela rolava. */
@container (max-width: 470px) {
.tabela { font-size: 0.9rem; }
.tabela th, .tabela td { padding-right: 0.55rem; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabela .num { white-space: normal; }

/* “Eletrocardiograma” e “Pré-hipertensão” são palavras únicas: sem quebra
elas sozinhas definem a largura mínima da tabela. A quebra é último
recurso — a 390px nenhuma palavra chega a ser partida. */
.tabela tbody th { white-space: normal; hyphens: auto; overflow-wrap: break-word; }

/* Cabeçalho em caixa alta com entreletra é o que mais custa largura aqui. */
.tabela thead th { font-size: 0.68rem; letter-spacing: 0.03em; }
}

/* ---------- exames ---------- */

.exames { display: grid; gap: 0; margin-top: 2.6rem; }

.exame {
position: relative;
min-width: 0;
padding-block: clamp(1.6rem, 3.4vw, 2.4rem);
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem 2.6rem;
}

/* Na tela larga o exame é uma linha de três colunas: nome, o que é, quando não
fazer. Saber qual aviso pertence a qual exame é o problema de leitura desta
seção, e o realce responde isso — o bloco inteiro acende junto.

O preço anda 3px depois de 40ms. É o segundo movimento que dá vida ao
primeiro; e é o preço que anda porque é o que a pessoa está procurando.
`inset: 0` cobre a caixa de padding, então a régua de cima não é tapada. */
.exame::after {
content: '';
position: absolute;
inset: 0 -0.7rem;
z-index: -1;
background: var(--realce);
opacity: 0;
transition: opacity var(--t-ui) var(--curva-sai);
}

.exame-nome span { transition: transform var(--t-ui) var(--curva-sai); }

@media (hover: hover) {
.exame:hover::after { opacity: 1; transition-duration: 0s; }
.exame:hover .exame-nome span {
transform: translate3d(3px, 0, 0);
transition-duration: 0s;
transition-delay: 40ms;
}
}

@media (min-width: 940px) {
.exame { grid-template-columns: minmax(0, 19ch) minmax(0, 1fr); }
.exame-corpo, .exame-nao { grid-column: 2; }
}

/* Na tela larga o aviso vai para a terceira coluna: mede a linha em vez de
deixá-la com 100 caracteres, e o vão da direita deixa de existir. */
@media (min-width: 1240px) {
.exame { grid-template-columns: minmax(0, 17ch) minmax(0, 1.15fr) minmax(0, 1fr); }
.exame-corpo { grid-column: 2; }
.exame-nao { grid-column: 3; margin-top: 0; }
}

.exame-nome {
font-size: clamp(1.25rem, 1.06rem + 0.8vw, 1.7rem);
line-height: 1.14;
margin: 0;
}

.exame-nome span {
display: block;
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-top: 0.45rem;
}

.exame-corpo { min-width: 0; }

.exame-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.6rem;
margin: 1rem 0 0;
padding: 0;
list-style: none;
font-size: 0.88rem;
color: var(--ink2);
}

.exame-meta b {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--ink3);
}

.exame-nao {
margin-top: 1.1rem;
padding: 0.85rem 1rem;
background: var(--superficie);
border-left: 2px solid var(--vermelho);
font-size: 0.92rem;
color: var(--ink);
}

.exame-nao b {
font-weight: 600;
color: var(--ink-forte);
}

/* Barra verde: o que está ali é regra da casa, sem diretriz para citar. A cor
diferente existe para você poder separar as duas coisas de longe. */
.exame-nao.casa { border-left-color: var(--accent); }

/* ---------- listas ---------- */

.lista {
list-style: none;
padding: 0;
margin: 1.8rem 0 0;
max-width: 66ch;
}

.lista li {
min-width: 0;
padding: 0.95rem 0 0.95rem 2.4rem;
border-top: 1px solid var(--rule);
position: relative;
}

.lista li::before {
content: '';
position: absolute;
left: 0;
top: 1.55rem;
width: 16px;
height: 2px;
background: var(--vermelho);
transform-origin: left center;
transition: transform var(--t-ui) var(--curva-sai);
}

/* Oito itens de três linhas cada, e o de cima parece com o de baixo. O realce
diz em qual deles você está — vale mais aqui do que em qualquer lista curta.
O traço vermelho cresce 40ms depois, por scaleX: é o segundo movimento, e
não pode ser `width`, que reflui a linha inteira. */
.lista li::after {
content: '';
position: absolute;
inset: 0 -0.7rem;
z-index: -1;
background: var(--realce);
opacity: 0;
transition: opacity var(--t-ui) var(--curva-sai);
}

@media (hover: hover) {
.lista li:hover::after { opacity: 1; transition-duration: 0s; }
.lista li:hover::before {
transform: scaleX(1.55);
transition-duration: 0s;
transition-delay: 40ms;
}
}

.lista b { font-weight: 600; color: var(--ink-forte); }

/* Oito itens numa coluna de 66 caracteres deixavam meia tela vazia à direita
na largura cheia. Em grade os itens continuam independentes e as réguas
continuam batendo. */
@media (min-width: 1240px) {
.lista-dupla {
max-width: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(2rem, 4vw, 4.5rem);
}
}

/* ---------- passagem: onde o fundo atravessa o meio-tom ----------
A altura é geométrica, não estética: a janela precisa caber INTEIRA dentro
do bloco durante toda a rampa de cor, ou texto de corpo aparece na tela no
meio-tom, onde nenhuma cor de letra chega a 4,5:1. Aqui só existe
tipografia grande, que a norma cobra em 3:1. Ver README.

Altura = uma janela + o comprimento da rampa. Era 190svh, o que dá 0,9
janela só de rampa: no celular, uma tela inteira de rolagem por passagem,
duas passagens, quatro linhas de texto. A garantia não depende do
comprimento da rampa, só de ela caber dentro do bloco — então a rampa
encurtou e a garantia continua igual. */

.passagem {
min-height: calc(100svh + var(--rampa));
position: relative;
}

.passagem-fixa {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1640px;
margin-inline: auto;
}

.frase {
font-size: clamp(1.75rem, 1rem + 4.4vw, 4.4rem);
line-height: 1.1;
font-weight: 500;
margin: 0;
max-width: 26ch;
color: var(--ink-forte);
}

.frase em {
font-style: italic;
font-weight: 400;
}

.frase + .frase {
margin-top: 0.8em;
font-weight: 400;
color: var(--ink-forte);
}

/* No celular a mesma frase ocupava 280px de um painel de 844: dois terços de
ar. A passagem é uma parada, e alguma folga é o ponto dela, mas não essa.
Corpo maior enche o painel sem tirar a garantia — quanto maior a letra,
mais folgado o 3:1. */
@media (max-width: 759px) {
.frase { font-size: clamp(2.1rem, 1rem + 6.4vw, 3rem); }
}

/* ---------- plantão ---------- */

.plantao-grade {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 1.4rem;
margin-top: 2.4rem;
}

.plantao-grade > div {
min-width: 0;
padding-top: 1.1rem;
border-top: 1px solid var(--rule);
}

.socorro {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.4rem 2.2rem;
align-items: center;
margin-top: clamp(2.4rem, 6svh, 4rem);
padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem);
border: 1px solid var(--vermelho);
max-width: 90ch;
}

@media (min-width: 620px) {
.socorro { grid-template-columns: auto minmax(0, 1fr); }
}

.socorro-num {
font-family: var(--serif);
font-size: clamp(3.6rem, 2rem + 6vw, 7.5rem);
line-height: 0.86;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--vermelho);
margin: 0;
font-variant-numeric: tabular-nums;
}

.socorro-txt { min-width: 0; font-size: 1.02rem; }
.socorro-txt b { color: var(--ink-forte); font-weight: 600; }

/* ---------- equipe ---------- */

.pessoas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
gap: 2rem 2.4rem;
margin-top: 2.6rem;
}

.pessoa {
position: relative;
min-width: 0;
padding-top: 1.2rem;
border-top: 1px solid var(--rule);
}

/* Três cartões lado a lado, cada um com nome, registro e um parágrafo. O
realce junta os três pedaços num só, e o registro — que é o que prova a
pessoa — anda 3px depois de 40ms. Sem levantar o cartão: ele está pendurado
numa régua de cima, e subir 3px descolaria dela. */
.pessoa::after {
content: '';
position: absolute;
inset: 0 -0.7rem -0.4rem;
z-index: -1;
background: var(--realce);
opacity: 0;
transition: opacity var(--t-ui) var(--curva-sai);
}

.pessoa .registro { transition: transform var(--t-ui) var(--curva-sai); }

@media (hover: hover) {
.pessoa:hover::after { opacity: 1; transition-duration: 0s; }
.pessoa:hover .registro {
transform: translate3d(3px, 0, 0);
transition-duration: 0s;
transition-delay: 40ms;
}
}

.pessoa h3 { margin-bottom: 0.15rem; }

.pessoa .registro {
display: block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink3);
margin-bottom: 0.7rem;
font-variant-numeric: tabular-nums;
}

/* ---------- agenda ---------- */

.agenda {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: 1.4rem 2.4rem;
margin-top: 2.4rem;
}

.agenda > div { min-width: 0; }

.botao {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
min-width: 44px;
padding: 0.55rem 1.5rem;
margin-top: 1.6rem;
background: var(--traco);
color: #FFFFFF;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
border: 0;
transition: transform var(--t-ui) var(--curva-sai);
}

/* O escurecimento do hover é um véu já pintado, e só a opacidade dele se move.
Trocar `background` em transição está proibido nesta folha, e mesmo sem a
proibição o véu é o que a GPU faz de graça. Nada de sombra: a peça inteira
não tem uma, e uma sombra só no botão leria como enxerto. */
.botao::before {
content: '';
position: absolute;
inset: 0;
background: #A9332C;
opacity: 0;
transition: opacity var(--t-ui) var(--curva-sai);
}

/* O rótulo precisa de caixa própria para pintar em cima do véu. */
.botao-txt { position: relative; }

@media (hover: hover) {
.botao:hover { transform: translate3d(0, -1px, 0); transition-duration: 0s; }
.botao:hover::before { opacity: 1; transition-duration: 0s; }
}

.botao:focus-visible::before { opacity: 1; transition-duration: 0s; }

/* Apertar afunda: o -1px do hover sai junto, de propósito. */
.botao:active { transform: scale(0.985); transition-duration: var(--t-aperto); }

/* ---------- rodapé ---------- */

.rodape {
padding-bottom: clamp(3rem, 8svh, 6rem);
}

.rodape-grade {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2.4rem clamp(2rem, 4vw, 4.5rem);
align-items: start;
margin-top: 1.6rem;
}

@media (min-width: 1100px) {
.rodape-grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.fontes {
list-style: none;
padding: 0;
margin: 0;
min-width: 0;
font-size: 0.9rem;
}

.fontes li {
position: relative;
min-width: 0;
padding-block: 0.55rem;
border-top: 1px solid var(--rule);
color: var(--ink2);
scroll-margin-block-start: 2rem;
}

/* Quem chega aqui vindo de uma chamada de nota precisa saber em qual das sete
caiu. A fonte de destino acende e fica acesa enquanto o endereço apontar
para ela — não é piscada, é estado. Assenta em 300ms com a curva de fundo,
porque o salto até aqui é instantâneo e a marca chegando junto lê como
susto. A barra à esquerda repete o vocabulário dos avisos de exame. */
.fontes li::after {
content: '';
position: absolute;
inset: 0 -0.7rem 0 -0.7rem;
z-index: -1;
background: var(--superficie);
border-left: 2px solid var(--accent);
opacity: 0;
transition: opacity var(--t-alvo) var(--curva-assenta);
}

.fontes li:target::after { opacity: 1; }

.fontes a {
display: inline-block;
min-height: 24px;
padding-block: 0.3rem;
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
word-break: break-word;
}

.fontes a:hover, .fontes a:focus-visible { color: var(--accent); }

.encerra {
min-width: 0;
padding-top: 0.55rem;
border-top: 1px solid var(--rule);
max-width: 62ch;
font-size: 0.86rem;
color: var(--ink2);
}

.encerra strong { color: var(--ink-forte); font-weight: 600; }

/* ---------- a ficha da nota ----------

A melhor oportunidade da peça: ler a fonte de um número sem perder o lugar
na linha. Abre no `popover`, que sobe para a camada de topo — e ela precisa
dessa camada: metade das chamadas mora dentro de `.moldura`, que tem
`overflow-x: auto`, e ali uma caixa posicionada seria recortada ou criaria
rolagem dentro da tabela.

A ficha NÃO tem cor de página. Ela é escura sempre, dos dois lados da
travessia de polaridade, e por isso o contraste dela não depende do fundo
que a rolagem estiver pintando naquele quadro — é o único jeito de a conta
valer sem remedir cada posição de rolagem com a ficha aberta.
Fio de 2px em verde-mar: no trecho de plantão o preenchimento fica a 1,30:1
do fundo da página, e é o fio que separa uma coisa da outra (7,85:1). */

.dica {
position: fixed;
inset: auto;
left: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
overflow: visible;
max-width: min(320px, calc(100vw - 24px));
/* nunca recebe ponteiro: passar o mouse por cima dela não a segura, e no
toque ela não vira armadilha. */
pointer-events: none;
}

/* A posição é escrita por script a cada quadro enquanto a ficha está aberta,
para ela acompanhar a rolagem. Justamente por isso o `transform` DELA não
tem transição nenhuma: transição em propriedade reescrita por quadro não
suaviza, atrasa. Quem anima é a caixa de dentro. */
.dica-caixa {
background: #20303F;
border: 1px solid #4E6178;
border-left: 2px solid #5FBDB4;
padding: 0.68rem 0.85rem 0.72rem;
font-family: var(--sans);
font-size: 0.86rem;
line-height: 1.5;
color: #FBFAF7;
opacity: 0;
transform: scale(0.96);
transform-origin: top left;
transition: opacity var(--t-ui) var(--curva-sai), transform var(--t-ui) var(--curva-sai);
}

.dica[data-lado='cima'] .dica-caixa { transform-origin: bottom left; }

.dica[data-aberta] .dica-caixa {
opacity: 1;
transform: none;
transition: opacity var(--t-dica) var(--curva-dica), transform var(--t-dica) var(--curva-dica);
}

.dica-num {
display: block;
font-size: 0.74rem;
font-weight: 600;
font-variant: all-small-caps;
letter-spacing: 0.09em;
color: #5FBDB4;
}

.dica-txt { margin: 0.15rem 0 0; }

.dica-ir {
display: block;
margin-top: 0.45rem;
font-size: 0.78rem;
color: #A7B6C6;
}

/* ---------- entrada: só transform, nunca opacidade ---------- */

[data-entra] {
transform: translate3d(0, 16px, 0);
transition: transform 620ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

[data-entra='pronto'] { transform: none; }

/* ---------- foco visível ---------- */

a:focus-visible, summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}

/* ==================================================================
Movimento reduzido — MESMA árvore de DOM, desarmada por CSS.
O fundo fica numa cor só; o app.js para de escrever cor e desenha o
traço inteiro de uma vez. A seção de plantão, que no modo normal era
escura por causa do fundo da página, passa a carregar o próprio
escuro e o próprio conjunto de tintas.
================================================================== */

@media (prefers-reduced-motion: reduce) {
html { background-color: var(--claro); }

/* Duração de 0,01ms, nunca `transition: none`: script que espera
`transitionend` — e o da ficha espera — trava para sempre com `none`.
A árvore é a mesma, as interações continuam todas funcionando, a ficha da
nota inclusive; o que muda é que chegam prontas, sem trajeto. Uma linha
em `:root` desarma as onze, hover e foco incluídos. */
:root {
--t-ui: 0.01ms;
--t-cresce: 0.01ms;
--t-dica: 0.01ms;
--t-alvo: 0.01ms;
--t-aperto: 0.01ms;
}

[data-entra] { transform: none; transition-duration: 0.01ms; }

.passagem { min-height: 0; }

.passagem-fixa {
position: static;
height: auto;
padding-block: clamp(3.5rem, 9svh, 7rem);
}

/* O escuro tem de sangrar até as bordas da janela. `.secao` mora dentro da
`.tira`, que reserva 168px à esquerda para a faixa do traço e a sangria:
um `background` na seção começava ali e terminava antes da borda direita,
e a seção lia como um cartão escuro solto numa página creme, com a faixa
do eletrocardiograma de fora. No modo normal isso não aparece, porque
quem fica escuro é o fundo da página inteira.

Centrar um sangramento de 100vw na seção não serve: a `.tira` tem sangria
desigual (168px à esquerda, 56px à direita), então a seção não está no
meio da janela — o retângulo saía 56px pela direita e deixava 56px de
creme por baixo da faixa. Ele passa dos dois lados e é recortado aqui, na
`.tira`. Não no `body`: overflow no body propaga para a janela, e ali o
que era recorte vira rolagem lateral. */
.tira { overflow-x: clip; }

/* O escuro fica NAS DUAS: na seção e no `::before` que a estende. Não só no
`::before` — quem lê estilo computado (o instrumento de contraste, um leitor
de tela, a próxima pessoa) não vê fundo de pseudoelemento, e a seção
apareceria como texto claro sobre o creme da raiz. Foi o que aconteceu: dez
reprovas de contraste com movimento reduzido, numa página que na tela estava
certa. */
.plantao { position: relative; background: var(--noite); }

.plantao::before {
content: '';
position: absolute;
inset: 0 -100vw;
background: var(--noite);
z-index: -1;
}

.plantao {
/* `color` PRECISA estar aqui. Redefinir --ink no escopo da seção não muda
a cor que os parágrafos herdaram do : quem leu a variável foi a
declaração `color` do body, e ela não é recalculada por um escopo mais
interno. Sem esta linha, o texto do plantão fica tinta escura sobre
fundo escuro com movimento reduzido — e passa por todos os testes que
olham opacidade em vez de contraste. */
color: var(--ink);
--ink: #FBFAF7;
--ink-forte: #FBFAF7;
--ink2: #A7B6C6;
--ink3: #8FA0B4;
--accent: #5FBDB4;
--rule: #2A3B52;
--superficie: rgba(251, 250, 247, 0.065);
}

.plantao { --vermelho: #E8756B; }
}}}}}