/* Folha de estilo da apresentação. Ticket 16.

   Paleta, tipo, espaçamento e rótulo de status vêm inteiros do sistema de
   design do ticket 09, pelo protótipo de arquitetura do ticket 13. Nenhuma cor
   nova nasce aqui. O que o protótipo tinha de andaime, a barra de endereço
   falsa e o painel de estado no pé, ficou de fora: não era parte da peça.

   O movimento é só o do ADR-0002. Mídia fixa com rolagem nativa, card que
   cresce para virar painel, e o slider do MDT. Nada se mexe sozinho enquanto
   se lê. */

:root {
  --pinus: #068f55;
  --petroleo: #27394b;
  --mostarda: #f7a63a;
  --terracota: #f18324;
  /* O verde do botão primário e do filtro escolhido, fixo nos dois temas. O
     `--verde-marca` do escuro com texto branco não passa 4,5 (ticket 07 do mapa
     vida-e-clareza), e a pílula de contato da barra usa este mesmo. */
  --verde-acao: #068650;

  --fonte: "Inter Tight", "Inter Tight reserva Roboto", "Inter Tight reserva Segoe", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --e1: 0.25rem; --e2: 0.5rem;  --e3: 0.75rem; --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;
  --e9: 6rem;

  --r-card: 14px;
  --r-painel: 18px;
  --r-etiqueta: 999px;
  --r-controle: 10px;

  --largura-max: 1240px;
  /* A medida vai em em porque o `ch` é a largura do zero, e o zero da Inter
     Tight mede 0,60 em: 66ch davam 88 letras por linha. Em em a conta vale
     para o corpo, o lead e a legenda, cada um no próprio tamanho. */
  --medida: 30em;
  /* Os três degraus do texto abaixo do corpo, na razão 1,125 a partir dos
     17 px: versal de rótulo, nota e apoio. Tamanho pequeno novo não nasce
     fora deles. A versal abre 0,09 em e a nota 0,01 em, porque a Inter Tight
     é desenhada apertada. */
  --t-versal: 0.75rem; --t-nota: 0.84rem; --t-apoio: 0.9375rem;
  --ls-versal: 0.09em; --ls-nota: 0.01em;
  color-scheme: light dark;
}

:root {
  --fundo: #e9ebed;
  --superficie: #ffffff;
  --elevado: #ffffff;
  --denso: #27394b;
  --tinta: #27394b;
  --tinta-2: #556673;
  --tinta-3: #5c6c7a;
  --tinta-densa: #ffffff;
  --tinta-densa-2: #a9bccb;
  --linha: #d5dadd;
  --linha-forte: #b9c2c7;
  --verde-texto: #068650;
  /* O texto do link no ponteiro e na pressão. O `--verde-texto` mede 3,88 sobre
     o fundo claro, que passa como sublinhado e reprova como texto. */
  --verde-link: #05774a;
  --verde-marca: #068f55;
  --verde-fraco: #e6f4ee;
  --terracota-fraca: #fdeee0;
  --foco: #27394b;
  --scrim: rgba(39, 57, 75, 0.34);
  --sombra-1: 0 1px 2px rgba(21, 33, 45, 0.05);
  --sombra-2: 0 2px 4px rgba(21, 33, 45, 0.06), 0 8px 18px rgba(21, 33, 45, 0.08);
  --sombra-3: 0 4px 8px rgba(21, 33, 45, 0.08), 0 18px 48px rgba(21, 33, 45, 0.16);
  /* O relevo do clicável. De pé ele tem um fio de luz embaixo e uma sombra
     curta; afundado, a sombra vira interna. */
  --sombra-relevo: 0 1px 0 rgba(21, 33, 45, 0.18), 0 2px 6px rgba(21, 33, 45, 0.14);
  --sombra-relevo-alta: 0 1px 0 rgba(21, 33, 45, 0.18), 0 4px 12px rgba(21, 33, 45, 0.18);
  --sombra-funda: inset 0 1px 2px rgba(21, 33, 45, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0f161c;
    --superficie: #17222d;
    --elevado: #202f3e;
    --denso: #060b0f;
    --tinta: #e6ebef;
    --tinta-2: #a6b4c0;
    --tinta-3: #7e8f9d;
    --tinta-densa: #e6ebef;
    --tinta-densa-2: #8fa2b1;
    --linha: #2c3d4e;
    --linha-forte: #3d5266;
    --verde-texto: #3da87a;
    --verde-link: #3da87a;
    --verde-marca: #1a9c63;
    --verde-fraco: #14312a;
    --terracota-fraca: #2e1f13;
    --foco: #f7a63a;
    --scrim: rgba(4, 8, 11, 0.62);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.45);
    --sombra-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.45);
    --sombra-relevo: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.45);
    --sombra-relevo-alta: 0 1px 0 rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5);
    --sombra-funda: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  }
}

/* A mesma lista de novo, para quem escolheu escuro num aparelho que pede claro.
   O CSS não deixa uma regra só atender consulta de mídia e atributo ao mesmo
   tempo, e `light-dark()` resolveria com uma linha por token mas só existe em
   navegador de 2024 para cá, o que aqui é aposta ruim: quem abre esta peça abre
   de celular de órgão público. Mexeu num valor acima, mexe no de baixo. */
:root[data-theme="dark"] {
  --fundo: #0f161c;
  --superficie: #17222d;
  --elevado: #202f3e;
  --denso: #060b0f;
  --tinta: #e6ebef;
  --tinta-2: #a6b4c0;
  --tinta-3: #7e8f9d;
  --tinta-densa: #e6ebef;
  --tinta-densa-2: #8fa2b1;
  --linha: #2c3d4e;
  --linha-forte: #3d5266;
  --verde-texto: #3da87a;
  --verde-link: #3da87a;
  --verde-marca: #1a9c63;
  --verde-fraco: #14312a;
  --terracota-fraca: #2e1f13;
  --foco: #f7a63a;
  --scrim: rgba(4, 8, 11, 0.62);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.45);
  --sombra-relevo: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.45);
  --sombra-relevo-alta: 0 1px 0 rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5);
  --sombra-funda: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 22rem;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ palco */
.palco { max-width: var(--largura-max); margin: 0 auto; padding: var(--e7) var(--e5) var(--e8); }
@media (min-width: 860px) { .palco { padding: var(--e8) var(--e6) var(--e9); } }

.marca { font-weight: 700; letter-spacing: 0.16em; font-size: 1.05rem; }
.migalha { font-size: var(--t-nota); letter-spacing: var(--ls-nota); color: var(--tinta-2); margin: 0 0 var(--e5); }
/* A migalha segue o link dentro de texto, que está na seção da gramática do
   clicável, no fim da folha. */

h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 var(--e4); max-width: 22ch; }
h2 { font-size: 1.15rem; line-height: 1.18; letter-spacing: -0.01em; margin: var(--e7) 0 var(--e4); }
h3 { font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e3); font-weight: 640; }
p { line-height: 1.6; max-width: var(--medida); text-wrap: pretty; }
/* Título de duas linhas reparte as palavras, para a última não sobrar sozinha.
   Navegador que não conhece a propriedade quebra como antes. */
h1, h2, .t2, .nome, .dor b, .opcao b { text-wrap: balance; }
.apoio { color: var(--tinta-2); }

/* ------------------------------------------------------- lista de situações */
.duas-portas { display: grid; gap: var(--e7); }
@media (min-width: 940px) {
  .duas-portas { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--e8); align-items: start; }
  /* A lista de situações é três vezes mais alta que o catálogo por vertical, e
     a direita terminava deixando meia tela vazia. Fixa, ela acompanha a rolagem
     e a segunda porta continua ao alcance em vez de virar rodapé. O `top` é a
     altura da barra mais um respiro. */
  .duas-portas > :last-child { position: sticky; top: 4.5rem; }
}

/* As duas portas no celular, em abas (ticket 17, reação do teste em aparelho).
   Empilhadas, a lista de situações ocupava 43% da página e empurrava o catálogo
   por vertical para três telas abaixo, então a escolha que o desktop oferece
   lado a lado virava fila. O script monta isto; sem script as duas aparecem
   inteiras, como antes. */
/* Sem margem própria: a tira entra como item da grade, e quem separa é o `gap`
   da `.duas-portas`. A margem em cima dele somava 89px de vão morto entre a aba
   e o texto que ela abre. Com aba na tela o vão também encolhe, porque ali ele
   separa controle de conteúdo e não uma porta da outra. */
.portas-abas { display: flex; gap: var(--e2); }
.duas-portas[data-abas] { gap: var(--e4); }
@media (min-width: 940px) { .portas-abas { display: none; } }
.portas-abas button {
  flex: 1; min-height: 2.75rem; padding: var(--e2) var(--e3);
  font: inherit; font-size: var(--t-apoio); font-weight: 560; line-height: 1.25;
  color: var(--tinta-2); background: transparent; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--r-controle);
}
.portas-abas button[aria-selected="true"] {
  color: var(--tinta); background: var(--superficie);
  border-color: var(--linha-forte); box-shadow: var(--sombra-1);
}
/* O rótulo de cada porta já está no h3 dela, que a aba repete. Com aba na tela,
   o h3 sai da vista e fica só para leitor de tela. */
.duas-portas[data-abas] > div > h3:first-child {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.grupo-ramo { margin-bottom: var(--e6); }
/* Relevo, faixa verde, chevron e afundar estão na seção da gramática do
   clicável, no fim da folha. Aqui fica só o que é do card de situação. */
.dor {
  display: block; width: 100%; text-align: left; text-decoration: none;
  font: inherit; cursor: pointer; color: var(--tinta);
  border-radius: var(--r-card);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e2);
}
.dor b { font-weight: 560; font-size: 1.02rem; line-height: 1.35; display: block; }
.dor small { display: block; margin-top: var(--e2); color: var(--tinta-3); font-size: var(--t-nota); letter-spacing: var(--ls-nota); }

/* porta de vertical, visível ao lado e nunca dentro de um menu (ticket 05) */
.porta-vertical { align-self: start; position: sticky; top: 5rem; }
.porta-vertical ul { list-style: none; margin: 0; padding: 0; }
.porta-vertical li { margin-bottom: var(--e2); }
/* A linha sem sinal nenhum em repouso era o achado que abriu o mapa
   vida-e-clareza: lia como tabela de números. Agora é card como os outros. */
.porta-vertical a {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r-controle);
  text-decoration: none; color: var(--tinta);
  font-size: var(--t-apoio);
}
.porta-vertical a .nome { flex: 1; font-weight: 560; }
.porta-vertical .conta { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: var(--t-nota); letter-spacing: var(--ls-nota); }

/* ---------------------------------------------------------------- filtro */
.filtro { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
/* Pílula em relevo. A pílula com borda e sem relevo passou a ser só a
   etiqueta de área, que perdeu a borda: as duas eram o mesmo desenho, e quem
   aprendia no catálogo que a pílula filtra clicava na etiqueta do serviço. */
.filtro a {
  display: inline-flex; align-items: center;
  text-decoration: none; font-size: var(--t-nota); letter-spacing: var(--ls-nota); font-weight: 520;
  min-height: 2.75rem;
  padding: var(--e2) var(--e4); border-radius: var(--r-etiqueta);
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha-forte); box-shadow: var(--sombra-1);
}
.filtro a[aria-current] { background: var(--verde-acao); color: #fff; border-color: var(--verde-acao); }

/* ------------------------------------------------------------------ cards */
/* Três colunas a partir de 1.100 px, e é a miniatura da decisão 81 que pede a
   terceira. Em duas colunas o card tem 588 px e a tampa 294 px de altura, que
   não é miniatura nenhuma: é quase a figura da página, e a distinção que a
   decisão 81 traçou entre grade e página se desfaz. Em três, o quadro sai com
   390 px, que é a largura para a qual os tickets 45, 46 e 47 conferiram os
   renders, e a página do catálogo encurta de 19 fileiras para 13. */
.grade { position: relative; }
/* A lista é quem faz a grade (achado 10 da inspeção). A caixa de fora fica só
   como referência de posição do painel, que cresce por cima dos cards. O item
   é flex para o card esticar até a altura da fileira, como esticava quando era
   ele o item da grade. */
.grade > ul { display: grid; gap: var(--e3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 780px) { .grade > ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grade > ul { grid-template-columns: 1fr 1fr 1fr; } }
.grade > ul > li { display: flex; min-width: 0; }
.grade > ul > li > .card { flex: 1; min-width: 0; }

.card {
  display: flex; flex-direction: column;
  text-align: left; font: inherit; cursor: pointer; color: var(--tinta);
  border-radius: var(--r-card);
  overflow: hidden;
}
.card.escondido { visibility: hidden; }

/* O anel de foco global impõe raio de 4px a quem ele pega, o que servia a link
   dentro de texto e passava despercebido no card. Com a tampa recortada pelo
   raio do card, chegar nele pelo teclado esquadrejava os cantos da imagem. */
.card:focus-visible { border-radius: var(--r-card); }

/* A tampa sangra até a borda. Imagem com recuo em volta lê como ornamento
   dentro do card; sangrando, ela é a superfície do card, que é o efeito de
   portfólio que a decisão 81 foi buscar. O fio embaixo segura a borda inferior
   de quadro claro, que sem ele derrete na superfície do card. */
/* A proporção mora no `img` e não no `picture`. No `picture` ela é ignorada em
   silêncio, porque ele é caixa comum e a altura da imagem dentro dele acaba
   mandando; e como 35 das 38 imagens já são 2:1, a grade parecia certa e só o
   quadro quase quadrado do card 28 denunciava. No elemento substituído a
   proporção vale e o `object-fit` recorta. */
.card .miniatura {
  display: block;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
}
.card .miniatura img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; object-fit: cover;
}

.card .corpo {
  display: flex; flex-direction: column; gap: var(--e3);
  flex: 1; padding: var(--e5);
}
.card .nome { font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.card .gatilho { font-size: var(--t-apoio); line-height: 1.5; color: var(--tinta-2); margin: 0; }
.card .pe { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: auto; padding-top: var(--e1); }

/* Texto em caixa alta, como o chapéu, sem borda nem preenchimento: não é
   clicável e não pode ter o desenho do filtro. */
.etiqueta-vertical {
  font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase;
  font-weight: 640; color: var(--tinta-2);
}

/* rótulo de status do ticket 24, mesma tinta nos dois, marca cheia contra
   pontilhada. A tinta carrega importância, a marca carrega categoria. */
.status { display: inline-flex; align-items: center; gap: 9px; }
.status .barra { width: 3px; height: 1.05em; border-radius: 2px; flex: none; }
.status--registrada .barra { background: var(--tinta); }
.status--habilitada .barra { background: repeating-linear-gradient(to bottom, var(--tinta) 0 3px, transparent 3px 6px); }
.status .texto { font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; font-weight: 640; color: var(--tinta); }

/* ------------------------------------------------------------------ painel */
/* Cresce no lugar, ancorado à linha do card, e devolve o card ao mesmo ponto
   quando fecha (ADR-0002, decisão 2). */
.painel {
  position: absolute; z-index: 20;
  background: var(--elevado);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-painel);
  box-shadow: var(--sombra-3);
  padding: var(--e6);
  /* `clip` e não `hidden`: o `hidden` faz do painel a caixa de rolagem do
     "Fechar", e aí o `sticky` dele não gruda em nada. Onde o `clip` não existe
     vale o `hidden`, e o botão fica no topo como antes. */
  overflow: hidden;
  overflow: clip;
}
/* Quem anda é o script, em mola (ticket 08 do mapa vida-e-clareza). */

.painel .corpo > * { opacity: 1; }
.painel h2 { margin-top: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); letter-spacing: -0.02em; }
/* Acompanha a rolagem logo abaixo da barra, porque o painel passa de duas
   telas no celular (achado 33). As margens o devolvem ao canto, dentro do
   recheio do painel, e a de baixo tira a altura dele do fluxo. */
.fechar {
  position: sticky; top: 4.5rem; z-index: 1;
  display: block; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  margin: calc(var(--e4) - var(--e6)) calc(var(--e4) - var(--e6)) calc(var(--e6) - var(--e4) - 2.75rem) auto;
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-1);
  font: inherit; cursor: pointer; line-height: 1;
}

.campo { margin: var(--e5) 0; }
/* Na página de serviço o campo é `h2` e no painel é `h3` (achado 09). O
   desenho é o da etiqueta em versal nos dois. */
.campo h2 { font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e3); font-weight: 640; }
.campo :is(h2, h3) { margin-bottom: var(--e2); }
.campo p { margin: 0; }

/* Texto sob um fio, sem fundo nem faixa. A faixa verde à esquerda quer dizer
   só "clicável" desde o ticket 07 do mapa vida-e-clareza, e a caixa de prova
   era o caso que a fazia dizer duas coisas. O vão de cima é o da situação, onde
   a prova vinha encostada na grade de cards. */
.prova {
  border-top: 1px solid var(--linha-forte);
  padding: var(--e4) 0 0;
}
section.prova:not(.campo) { margin: var(--e6) 0; }
.prova :is(h2, h3) { color: var(--tinta); }
.faltando {
  border-left: 3px solid var(--terracota);
  background: var(--terracota-fraca);
  padding: var(--e4) var(--e5); border-radius: 0 var(--r-controle) var(--r-controle) 0;
  font-size: var(--t-apoio);
}

.saidas { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--linha); }
/* O primário passou de terracota a verde, porque verde é a cor de quem
   responde a toque. O secundário é a mesma peça em relevo sobre a superfície.
   Pressão e ponteiro estão na seção da gramática do clicável. */
.acao {
  display: inline-block; text-decoration: none; font: inherit; font-weight: 560; font-size: var(--t-apoio); cursor: pointer;
  background: var(--verde-acao); color: #fff;
  border: 1px solid transparent; border-radius: var(--r-controle);
  padding: var(--e3) var(--e5);
  box-shadow: var(--sombra-relevo);
}
.acao--calma { background: var(--superficie); color: var(--tinta); border-color: var(--linha-forte); }
/* O catálogo e as áreas terminavam sem saída. A frase de apoio vem antes do
   botão, dentro do mesmo fio, porque é ela que diz para quem é o diagnóstico. */
.saidas--apoio { flex-direction: column; align-items: flex-start; }
.saidas--apoio .apoio { margin: 0; max-width: var(--medida); }

/* ------------------------------------------------- bloco denso, capacidade */
.denso {
  background: var(--denso); color: var(--tinta-densa);
  border-radius: var(--r-painel); padding: var(--e6);
  margin-bottom: var(--e6);
}
.denso h2 { margin-top: 0; color: var(--tinta-densa); }
.denso .chapeu { color: var(--tinta-densa-2); }
/* O anel de foco do tema claro é azul petróleo, e o bloco denso também. Dentro
   dele o anel troca para mostarda, que mede 5,84 sobre o petróleo. */
.denso :where(a, button, [tabindex]):focus-visible { outline-color: var(--mostarda); }
.denso p, .denso li { color: var(--tinta-densa-2); }
.denso .numeros { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: var(--e5); }
.denso .numeros div strong { display: block; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--tinta-densa); }
.denso .numeros div span { font-size: var(--t-nota); letter-spacing: var(--ls-nota); }

/* ------------------------------------------------------------------ 404 */
.erro { max-width: var(--medida); }

/* ---------------------------------------------------------- privacidade
   Ticket 05 do mapa da telemetria. Texto corrido na medida de leitura; o
   botão de oposição fica num fio próprio, como as saídas, para não se perder
   entre os parágrafos. */
.privacidade, .detalhes { max-width: var(--medida); }
.oposicao { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--linha); }
.oposicao-estado { font-weight: 560; }
/* O h3 da peça é etiqueta em caixa alta, e pergunta em caixa alta se lê aos gritos. */
.detalhes h3 { font-size: 1rem; font-weight: 620; text-transform: none; letter-spacing: normal; color: var(--tinta); margin: var(--e6) 0 var(--e2); }
.detalhes h3 + p { margin-top: 0; }


/* ==========================================================================
   Bloco de capacidade técnica. Sai inteiro de build/dossie.mjs, ticket 28, e
   a marcação vem de build/marcacao.mjs. A nota do ticket 27 manda herdar os
   dois, não reescrevê-los. Os tokens são os mesmos dos dois lados.
   ========================================================================== */

.etiqueta{font-size: var(--t-versal); line-height:1.2; letter-spacing: var(--ls-versal); text-transform:uppercase; font-weight:640}
/* ------------------------------------------------------------------ blocos */
.bloco{position:relative; scroll-margin-top:100px; padding:var(--e7) 0 0}
.bloco + .bloco{border-top:1px solid var(--linha)}
.bloco-cabeca{margin-bottom:var(--e5)}
.ordinal{display:flex; align-items:baseline; gap:var(--e3); margin:0 0 var(--e2); color:var(--tinta-2)}
.ordinal .numero{font-size: var(--t-versal); font-weight:700; letter-spacing:.02em}
.bloco-corpo{max-width:var(--medida)}
.bloco-corpo > :last-child{margin-bottom:0}

.bloco.denso{background:var(--denso); color:var(--tinta-densa); border-radius:var(--r-card);
  padding:var(--e6) var(--e5) var(--e6); margin:var(--e7) 0 0; overflow:hidden; border-top:0}
@media (min-width:760px){.bloco.denso{padding:var(--e7)}}
.bloco.denso + .bloco{border-top:0; padding-top:var(--e8)}
.bloco.denso .ordinal{color:var(--tinta-densa-2)}
.bloco.denso .fonte{color:var(--tinta-densa-2); border-top-color:rgba(169,188,203,.28)}
.bloco.denso .fonte .etiqueta{color:var(--tinta-densa-2)}
.bloco.denso a{color:#fff}
/* O anel de foco do tema claro é azul petróleo, e o bloco denso também. Dentro
   dele o anel troca para mostarda, que mede 5,84 sobre o petróleo. */
.bloco.denso :where(a,button,[tabindex]):focus-visible{outline-color:var(--mostarda)}
.bloco.denso .campo-onda{top:-44%; right:-24%; width:min(420px,64vw); aspect-ratio:1; opacity:.5}
.bloco.denso .bloco-cabeca,.bloco.denso .bloco-corpo{position:relative; z-index:1}

/* ------------------------------------------------------------ ficha, dados */
.ficha{margin:0 0 var(--e5); display:grid; gap:0; border-top:1px solid var(--linha)}
.ficha > div{display:grid; gap:0 var(--e5); padding:var(--e3) 0; border-bottom:1px solid var(--linha)}
@media (min-width:600px){.ficha > div{grid-template-columns:15em minmax(0,1fr)}}
.ficha dt{color:var(--tinta-2); font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height:1.45}
.ficha dd{margin:0; font-size: var(--t-apoio); line-height:1.45}
.bloco.denso .ficha{border-color:rgba(169,188,203,.28)}
.bloco.denso .ficha > div{border-color:rgba(169,188,203,.28)}
.bloco.denso .ficha dt{color:var(--tinta-densa-2)}

/* Números soltos, sem caixa. Em três caixas lado a lado eles liam como três
   cards, e card na peça é clicável. */
.medidas{display:grid; gap:var(--e5); margin:0 0 var(--e5);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.medidas{grid-template-columns:repeat(3,1fr)}}
.medidas > div{padding:0}
.medidas b{display:block; font-size:1.25rem; font-weight:640; letter-spacing:-.02em; line-height:1.15}
.medidas span{display:block; color:var(--tinta-2); font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height:1.35; margin-top:3px}

/* ----------------------------------------------------------------- tabelas */
.rolagem-tabela{margin:0 0 var(--e5); overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size: var(--t-apoio)}
thead th{text-align:left; font-weight: 640; font-size: var(--t-versal); letter-spacing: var(--ls-versal);
  text-transform:uppercase; color:var(--tinta-2); padding:0 var(--e4) var(--e2) 0;
  border-bottom:1px solid var(--linha-forte); white-space:nowrap}
tbody td{padding:var(--e3) var(--e4) var(--e3) 0; border-bottom:1px solid var(--linha);
  vertical-align:top; line-height:1.4}
tbody tr td:first-child{font-weight:560}
@media (max-width:640px){
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  table,tbody,tr,td{display:block; width:100%}
  tbody tr{padding:var(--e4) 0; border-bottom:1px solid var(--linha-forte)}
  tbody tr:first-child{padding-top:0}
  tbody td{border:0; padding:0 0 var(--e2); display:grid; grid-template-columns:9em minmax(0,1fr); gap:var(--e3)}
  tbody td::before{content:attr(data-rotulo); color:var(--tinta-2); font-size: var(--t-versal);
    letter-spacing: var(--ls-versal); text-transform:uppercase; font-weight: 640; padding-top:.25em}
}

/* -------------------------------------------------------------- nota, fonte */
.nota{background:var(--verde-fraco); border-radius:10px; padding:var(--e4) var(--e5);
  font-size: var(--t-apoio); line-height:1.5; margin-bottom:var(--e5)}
.fonte{margin:0; padding-top:var(--e4); border-top:1px solid var(--linha);
  color:var(--tinta-2); font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height:1.6}
.fonte .etiqueta{display:inline-block; min-width:6.5em; color:var(--tinta-2)}
.fonte a{color:var(--verde-texto)}
.url-impressa{display:none}


/* ==========================================================================
   A peça. O que o protótipo do ticket 13 não tinha porque vivia num arquivo
   só: fonte servida do próprio domínio, cabeçalho, rodapé, capa de página e o
   quadro do comparador.
   ========================================================================== */

/* A fonte vem do próprio domínio. O protótipo puxava do Google Fonts, e
   dependência de terceiro na primeira renderização custa duas conexões novas
   antes de a primeira letra aparecer. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonte/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonte/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* A reserva enquanto a Inter Tight não chega. A Roboto do Android e a Segoe UI
   do Windows são mais largas que ela no texto e quase iguais no título, e sem
   ajuste o lead ganhava uma linha e o botão da home descia 27 px. Os números
   saem da largura média do texto da peça em cada fonte. Onde a fonte local
   não existe a face não carrega, e a pilha segue para a próxima. */
@font-face {
  font-family: "Inter Tight reserva Roboto"; font-weight: 400 559;
  src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
  size-adjust: 96.4%; ascent-override: 100.5%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Tight reserva Roboto"; font-weight: 560 700;
  src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 99.9%; ascent-override: 97%; descent-override: 24.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Tight reserva Segoe"; font-weight: 400 559;
  src: local("Segoe UI");
  size-adjust: 96.7%; ascent-override: 100.2%; descent-override: 24.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Tight reserva Segoe"; font-weight: 560 700;
  src: local("Segoe UI Semibold"), local("SegoeUI-Semibold");
  size-adjust: 99.2%; ascent-override: 97.6%; descent-override: 24.3%; line-gap-override: 0%;
}

/* Tokens do logotipo, consumidos pelo SVG que build/marcacao.mjs reconstrói.
   O gradiente tem eixo vertical: na horizontal ele sai quase todo azul e não
   parece o logotipo (ticket 23). */
:root { --logo-verde: #068f55; --logo-onda-de: #27394b; --logo-onda-para: #068f55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-verde: #3da87a; --logo-onda-de: #c3d2dd; --logo-onda-para: #3da87a; }
}
:root[data-theme="dark"] { --logo-verde: #3da87a; --logo-onda-de: #c3d2dd; --logo-onda-para: #3da87a; }

body { font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; padding-bottom: 0; }
@media (min-width: 760px) { body { font-size: 1.125rem; } }
html { -webkit-text-size-adjust: 100%; }
::selection { background: var(--mostarda); color: #27394b; }
/* Algarismo tabular só onde o número fica em coluna ou muda no lugar. Na
   frase ele abre um buraco em volta do 1, e a peça é cheia de data e registro. */
.dado, table, .ficha, .contagem, .conta { font-variant-numeric: tabular-nums; }
.dado { letter-spacing: -0.01em; }
.t2 { font-size: clamp(1.25rem, 1.08rem + .8vw, 1.5rem); line-height: 1.18; letter-spacing: -.018em; font-weight: 620; }
.bloco .t2 { margin: 0; }

.pular { position: absolute; left: -9999px; top: 0; }
.pular:focus {
  left: var(--e5); top: var(--e3); z-index: 60; background: var(--superficie);
  padding: var(--e2) var(--e4); border-radius: 8px; border: 1px solid var(--linha-forte);
}

/* --------------------------------------------------------------- cabeçalho */
/* Ticket 06 do mapa vida-e-clareza. A barra usava a tinta do fundo e se
   separava só por uma linha, e lia como parte do conteúdo. Agora é faixa
   sólida no `--denso`, azul-marinho no claro e quase preta no escuro, sem
   linha. Como a faixa é escura nos dois temas, o logotipo usa as cores do
   tema escuro nos dois, e o verde do item atual é o do pingo do i. */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--denso); color: var(--tinta-densa);
  --logo-verde: #3da87a; --logo-onda-de: #c3d2dd; --logo-onda-para: #3da87a;
  /* A barra é o contêiner das consultas que a apertam. A medida delas vai em
     em, que aqui é a letra da própria barra: quem aumenta a letra recebe a
     barra apertada na mesma largura de tela (achado 04 da inspeção). */
  container: topo / inline-size;
}
/* No escuro a faixa mede 1,08:1 contra o fundo, e o card que rola por baixo
   era cortado sem aviso (achado 42 da inspeção). Um fio de 1 px na linha do
   tema, por dentro para não mexer na altura. O claro segue sem linha. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topo { box-shadow: inset 0 -1px 0 var(--linha); }
}
:root[data-theme="dark"] .topo { box-shadow: inset 0 -1px 0 var(--linha); }
.topo .dentro {
  position: relative;
  max-width: var(--largura-max); margin: 0 auto;
  padding: var(--e2) var(--e5);
  display: flex; align-items: center; gap: var(--e6);
}
@media (min-width: 860px) { .topo .dentro { padding: var(--e2) var(--e6); } }
.topo :focus-visible { outline-color: var(--mostarda); }
.topo .marca { display: flex; align-items: center; text-decoration: none; color: var(--tinta-densa); }
/* 22 px deixavam o "AMBIENTAL" debaixo do nome ilegível e a marca sumia entre
   os três links de navegação, que pesam mais que ela na barra. 32 px devolvem
   a hierarquia sem empurrar o cabeçalho para uma segunda linha. */
.topo .logotipo { height: 2rem; width: auto; display: block; }
/* Logo e menu formam um bloco à esquerda, e por isso o menu não empurra para
   a direita. Cabe um quarto item a partir de 760 px, que é onde o menu vira
   botão. */
.topo nav { display: flex; gap: var(--e1); flex-wrap: wrap; }
.topo nav a {
  text-decoration: none; color: var(--tinta-densa-2); font-size: var(--t-apoio); font-weight: 520;
  padding: var(--e2) var(--e3); border-radius: var(--r-controle);
}
@media (hover: hover) { .topo nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--tinta-densa); } }
.topo nav a[aria-current] {
  color: var(--tinta-densa); font-weight: 600;
  border-radius: 0; box-shadow: inset 0 -2px 0 var(--logo-verde);
}

/* Contato e tema num segundo bloco, à direita. */
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }

/* A pílula do contato. Preenchimento verde porque responde a toque, no mesmo
   `--verde-acao` do primário: com o `--verde-marca` do ticket 06 o texto
   branco mediria 4,14 no claro e reprovaria. O balão é da família de ícones,
   branco sobre o verde. Os controles da barra medem 44 px, em px para o alvo
   não crescer com a letra e tirar o lugar do "Diagnóstico" (achado 05 da
   inspeção). O recheio da faixa desceu de 0,75 para 0,5rem, e ela continua
   com 60 px. */
.topo .contato {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.4rem 1rem;
  background: var(--verde-acao); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-size: var(--t-apoio); font-weight: 620; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.08s ease-out;
}
.topo .contato .icone { width: 1.15rem; height: 1.15rem; }
@media (hover: hover) { .topo .contato:hover { filter: brightness(1.1); } }
.topo .contato:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }

/* Interruptor de tema. O script o insere; sem script ele não existe, porque
   botão que não faz nada é pior que botão nenhum. Nasceu da reação ao teste em
   celular: quem usa app de forçar escuro reclamou do botão saindo vermelho, e o
   app existe justamente porque os sites não oferecem a troca. */
.topo .tema, .topo .menu {
  display: grid; place-items: center;
  min-height: 44px; padding: 0;
  background: transparent; color: var(--tinta-densa-2);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-controle);
  cursor: pointer;
  transition: transform 0.08s ease-out;
}
.topo .tema { width: 44px; flex: none; }
@media (hover: hover) {
  .topo .tema:hover, .topo .menu:hover { background: rgba(255, 255, 255, 0.08); color: var(--tinta-densa); border-color: rgba(255, 255, 255, 0.36); }
}
.topo .tema:active, .topo .menu:active { transform: translateY(1px); }
.topo .tema .icone { width: 1.125rem; height: 1.125rem; }
/* Só um dos dois aparece, e é o do tema para onde o botão leva: lua no claro,
   sol no escuro. Uma regra por ícone e por estado, sem agrupar seletores de
   intenções diferentes. A primeira versão agrupava, e a regra de baixo apagava
   a lua da de cima por ter a mesma especificidade e vir depois: no tema claro
   os dois ícones sumiam e o botão saía vazio. */
.topo .tema .lua { display: block; }
.topo .tema .sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topo .tema .lua { display: none; }
  :root:not([data-theme="light"]) .topo .tema .sol { display: block; }
}
:root[data-theme="dark"] .topo .tema .lua { display: none; }
:root[data-theme="dark"] .topo .tema .sol { display: block; }
:root[data-theme="light"] .topo .tema .lua { display: block; }
:root[data-theme="light"] .topo .tema .sol { display: none; }

/* O "Menu" da tela estreita é o `<summary>` de um `<details>` que já vem no
   HTML, e abre sem script. De 760 px para cima ele não existe. */
.topo .folha { display: none; }
.topo .menu { list-style: none; font-size: var(--t-apoio); font-weight: 600; padding: 0 0.75rem; user-select: none; }
.topo .menu::-webkit-details-marker { display: none; }
.topo .menu .icone { display: none; width: 1.25rem; height: 1.25rem; }

/* Tela estreita (ticket 12 do mapa da inspeção). Logo, "Menu", "Diagnóstico"
   e o WhatsApp numa linha, com e sem script, na mesma altura. O "Diagnóstico"
   é o item do menu que fica na barra, a um toque, e os outros dois descem para
   a folha do "Menu", na mesma tinta, logo abaixo da faixa. A pílula fica só
   com o balão, e o tema é o último item da folha, com o rótulo escrito. O
   logotipo vai em px: é imagem, e travá-lo não tira leitura de ninguém. A
   quebra de linha só acontece quando nem o "Menu" em ícone abre lugar. */
@media (max-width: 759px) {
  .topo .dentro { flex-wrap: wrap; gap: var(--e2) var(--e3); padding-left: var(--e4); padding-right: var(--e4); }
  .topo .logotipo { height: 32px; }
  .topo .folha { display: block; margin-left: auto; }
  .topo .folha[open] > .menu { background: rgba(255, 255, 255, 0.1); color: var(--tinta-densa); }
  .topo .folha > nav {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--denso); border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--sombra-3);
    padding: var(--e2) var(--e3) var(--e4);
  }
  .topo .folha > nav a, .topo .tema--folha { padding: var(--e4); font-size: 1rem; border-radius: var(--r-controle); }
  .topo .folha > nav a[aria-current] { box-shadow: inset 3px 0 0 var(--logo-verde); border-radius: 0; }
  .topo .tema--folha {
    display: flex; align-items: center; justify-content: flex-start; gap: var(--e3);
    width: 100%; border: 0; font: inherit; font-size: 1rem; font-weight: 520; text-align: left;
  }
  .topo #navegacao a:not(.fica) { display: none; }
  .topo #navegacao a.fica {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e2);
    color: var(--tinta-densa); font-weight: 600; white-space: nowrap;
  }
  .topo-acoes { margin-left: 0; }
  .topo-acoes > .tema { display: none; }
  .topo .contato { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; }
  .topo .contato span { display: none; }
  .topo .contato .icone { width: 1.375rem; height: 1.375rem; }
}
/* A barra apertada. Era uma regra por largura de tela, até 374 px, e agora é
   pela largura da barra medida na letra dela: 22em são os mesmos 374 px com a
   letra de fábrica, e quem aumenta a letra chega ali numa tela mais larga. O
   limite já foi 359 px, e em 360, a largura do Android mais comum, a barra
   passava 4 px da tela (achado 03 da inspeção). */
@container topo (max-width: 22em) {
  .topo .dentro { padding-left: var(--e3); padding-right: var(--e3); gap: var(--e2); }
  .topo .logotipo { height: 26px; }
  .topo #navegacao a.fica { padding: 0 var(--e1); }
}
/* Com a letra aumentada o "Menu" perde o rótulo e vira os três traços, e o
   nome dele fica no `aria-label`. "Diagnóstico" e o WhatsApp não cedem. */
@container topo (max-width: 20em) {
  .topo .menu { width: 44px; padding: 0; }
  .topo .menu span { display: none; }
  .topo .menu .icone { display: block; }
}

/* -------------------------------------------------------------------- capa */
.capa { margin-bottom: var(--e7); }
.chapeu {
  font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: var(--tinta-2); font-weight: 640; margin: 0 0 var(--e3);
}
.lead { font-size: 1.12rem; line-height: 1.55; color: var(--tinta-2); }
.capa h1 + .lead { margin-top: var(--e4); }

/* A capa da home, tickets 05 e 10 do mapa vida-e-clareza. A chamada do
   diagnóstico entra entre o título e o lead no celular e vai para o lado do
   título na tela larga, no tom do bloco denso. A faixa do voo fecha a capa nas
   duas larguras. */
.capa-diagnostico {
  background: var(--denso); color: var(--tinta-densa);
  border-radius: var(--r-painel); padding: var(--e5);
  margin: var(--e5) 0;
}
.capa-diagnostico h2 { margin: 0 0 var(--e3); font-size: 1.25rem; line-height: 1.25; color: var(--tinta-densa); max-width: 24ch; }
.capa-diagnostico p { color: var(--tinta-densa-2); margin: 0 0 var(--e4); }
.capa-diagnostico p:last-child { margin: 0; }
.capa-diagnostico :where(a, button):focus-visible { outline-color: var(--mostarda); }
@media (min-width: 940px) {
  .capa--home {
    display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--e8);
    grid-template-areas: "chapeu chamada" "titulo chamada" "lead chamada" "faixa faixa";
    grid-template-rows: auto auto 1fr auto;
  }
  .capa--home > .chapeu { grid-area: chapeu; }
  .capa--home > h1 { grid-area: titulo; }
  .capa--home > .lead { grid-area: lead; margin-bottom: 0; }
  .capa--home > .capa-diagnostico { grid-area: chamada; align-self: center; margin: 0; padding: var(--e6); }
  .capa--home > .faixa { grid-area: faixa; }
}

.faixa { margin: var(--e6) 0 0; }
.faixa picture { display: block; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--linha); }
/* A proporção mora aqui e não só no arquivo, senão o celular reserva a caixa
   de 6:1 e a página pula quando chega o corte de 3:1. A consulta é a mesma
   `CELULAR` do build. */
.faixa img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 1; object-fit: cover; }
@media (max-width: 640px) { .faixa img { aspect-ratio: 3 / 1; } }
.faixa figcaption { font-size: var(--t-nota); letter-spacing: var(--ls-nota); color: var(--tinta-2); margin-top: var(--e3); max-width: var(--medida); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: 0 0 var(--e4); }
.chamada { font-size: var(--t-nota); letter-spacing: var(--ls-nota); margin-top: calc(var(--e2) * -1); }
.contagem { font-size: var(--t-nota); letter-spacing: var(--ls-nota); margin: 0 0 var(--e2); }
/* A legenda dos dois rótulos de status, no catálogo e no fim da rota
   (achado 26). */
.legenda-status { font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height: 1.5; margin: 0 0 var(--e4); max-width: var(--medida); }
.resultado .legenda-status, .grade + .legenda-status { margin: var(--e5) 0 0; }
/* A frase do diagnóstico junto dos filtros do catálogo (achado 28). */
.antes-da-grade { font-size: var(--t-apoio); margin: 0 0 var(--e5); max-width: var(--medida); }
/* Na área os filtros vêm antes do lead (achado 23). */
.capa--area { margin-bottom: var(--e5); }
.capa--area .filtro { margin-top: var(--e4); }
.capa--area .lead { margin-bottom: 0; }
/* Tinta com par na guarda, e não opacidade: o `contraste.mjs` mede token contra
   token e não enxerga `opacity` (achado 02). No filtro escolhido o número sai
   no branco do rótulo. */
.filtro .conta { font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.filtro a[aria-current] .conta { color: inherit; }

/* O card virou link, porque a página inteira do serviço é o que o rastreador
   vê e o que o link encaminhado abre (ADR-0003). O painel que cresce no lugar
   é melhoria do script, e não requisito para o card funcionar. */
.card { text-decoration: none; }
/* O pé fica de fora: é flex, senão o chevron não vai para a ponta. */
/* A frase do card sai inteira. O corte em quatro linhas escondia a condição
   que decide entre um serviço e outro em 14 dos 38 cards (achado 13). */
.card .nome, .card .gatilho { display: block; }

/* ------------------------------------------ seção do comparador, ADR-0002 */
/* Uma coluna só, em qualquer largura. O comparador dividia a grade com o texto
   e saía com 477 px numa janela de 1.080, 44% da largura, pequeno demais para o
   que ele é: a única prova visual que a home tem. Agora atravessa o palco
   inteiro e o texto desce para baixo dele, preso à medida de leitura, que de
   toda forma não enche 1.176 px de linha. A coluna grudada sai junto, porque
   não sobrou nada ao lado para ela acompanhar. */
.fixa { display: grid; gap: var(--e6); margin: var(--e8) 0; }
@media (min-width: 940px) {
  .fixa { gap: var(--e7); }
  .fixa .texto { max-width: var(--medida); }
}
.fixa .texto > :last-child { margin-bottom: 0; }

/* ------------------------------------------------ comparador, ADR-0002 (3) */
/* A revelação sai de duas transformações, uma na janela e a contrária na
   camada de dentro, as duas de compositor. `clip-path` e `width` animados
   custam layout ou raster por quadro (ticket 11, 0,10 ms de p95 medido). */
.comparador {
  --corte: 50%;
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card); border: 1px solid var(--linha);
  background: var(--denso); box-shadow: var(--sombra-2);
  touch-action: pan-y;
}
/* O par retrato do ticket 11, para a tela vertical. A proporção está aqui e o
   arquivo é escolhido pela mesma consulta de mídia no `<source>` que o
   `build.mjs` escreve, com a largura declarada antes de a imagem chegar: assim
   a caixa nasce do tamanho certo e nada salta quando o par carrega.

   A divisória continua vertical, e isso corrige o que a decisão 61 dizia de
   passagem. Divisória horizontal no celular exigiria `touch-action` comendo o
   gesto vertical, e um quadro de 428 px de altura onde a página para de rolar é
   armadilha de rolagem. Vertical, o dedo que arrasta e o dedo que rola não
   disputam eixo, e a decisão 57, arrastar em qualquer ponto, fica inteira. */
@media (max-width: 640px) { .comparador { aspect-ratio: 4 / 5; } }
/* Celular deitado: a proporção 16:9 dava o dobro da altura que sobra abaixo da
   barra (achado 49). A altura para em 70% da tela, e a proporção leva a largura
   junto: o quadro encolhe inteiro, sem recorte, e fica no meio da linha. */
@media (orientation: landscape) and (max-height: 540px) {
  .comparador { max-height: 70vh; max-height: 70svh; margin-inline: auto; }
}
.comparador .depois, .comparador .janela, .comparador .dentro, .comparador picture {
  position: absolute; inset: 0; display: block;
}
.comparador img { display: block; width: 100%; height: 100%; object-fit: cover; }
.comparador .janela {
  overflow: hidden;
  transform: translateX(calc(var(--corte) - 100%));
}
.comparador .janela .dentro { transform: translateX(calc(100% - var(--corte))); }
/* O rótulo do lado "antes" mora dentro da janela recortada. Solto por cima ele
   continua visível depois que a divisória passa, e nomeia a imagem errada. */
.rotulo-comparador {
  position: absolute; max-width: calc(100% - var(--e5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: var(--e3); left: var(--e3);
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6);
  font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; font-weight: 640;
}
/* O rótulo do "antes" mora dentro da camada contra-transformada, que é o que o
   devolve à ponta esquerda do quadro enquanto a janela recortada o corta. Solto
   por cima ele continuaria visível depois que a divisória passasse, nomeando a
   imagem errada (ticket 11). Preso à janela sem a contra-transformação, ele sai
   da tela pela esquerda. O "depois" fica na ponta direita, e os dois nunca
   disputam o mesmo canto. */
.comparador .depois .rotulo-comparador { left: auto; right: var(--e3); }
.instrucao { font-size: var(--t-nota); letter-spacing: var(--ls-nota); margin-top: var(--e3); }

/* ----------------------------------------------------------------- figuras */
/* `--util` é a `largura_util` da mídia, escrita pelo build. A figura nunca
   passa dela: uma imagem de 800 px de origem esticada para os 1.176 px do palco
   sai borrada, e borrar a prova numa peça cujo argumento é precisão de medida
   contradiz o próprio argumento. O `sizes` que o build escreve descreve esta
   mesma caixa. */
.figura { margin: var(--e6) 0; }
/* A borda e o raio moram na `picture`, que é quem tem a largura. Estavam nas
   duas, uma dentro da outra, e duas bordas de 1 px encostadas desenham um fio
   de 2 px que ninguém pediu. */
.figura picture {
  display: block; width: min(100%, var(--util, 100%)); overflow: hidden;
  border-radius: var(--r-card); border: 1px solid var(--linha);
}
.figura img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- portfólio
   Ticket 43. Ficha de campos fixos, uma por trabalho, com a mesma `.ficha` do
   dossiê para que o avaliador leia os dois documentos do mesmo jeito. */
.trabalho { padding: var(--e7) 0 0; }
.trabalho + .trabalho { border-top: 1px solid var(--linha); margin-top: var(--e7); }
.trabalho .t2 { margin: 0 0 var(--e5); max-width: 32ch; }
.trabalho .figura { margin: 0 0 var(--e5); }
.trabalho-resolveu { max-width: var(--medida); margin: 0 0 var(--e5); }
.trabalho .ficha { max-width: 52rem; }
/* Lado a lado a partir de 900 px. Com a imagem na largura do palco, cinco
   trabalhos viravam galeria e a ficha, que é o que se confere, ia para baixo
   de uma foto de 660 px. A coluna da imagem é a que o `sizes` da ficha declara
   em build/build.mjs; mexeu aqui, mexe lá. */
@media (min-width: 900px) {
  .trabalho { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 var(--e6); align-items: start; }
  .trabalho .t2 { grid-column: 1 / -1; }
  .trabalho .figura { grid-row: 2 / span 2; margin: 0; }
  .trabalho-resolveu { grid-column: 2; }
  .trabalho .ficha { grid-column: 2; }
  .trabalho .ficha > div { grid-template-columns: 8.5em minmax(0, 1fr); }
}
.trabalho .ficha a, .linha-portfolio a, .pe-portfolio a, .rodape-portfolio a { color: var(--verde-texto); }
.pe-portfolio { max-width: var(--medida); margin: var(--e7) 0 0; }
.linha-portfolio { margin: var(--e4) 0; }
.figura figcaption { font-size: var(--t-nota); letter-spacing: var(--ls-nota); color: var(--tinta-2); margin-top: var(--e3); max-width: var(--medida); }

/* ------------------------------------------------------- figura que gira */
/* Ticket 35. A caixa tem a largura da figura, e o botão mora no canto dela.
   Abrir e voltar ficam no mesmo canto, porque é o mesmo lugar que se toca
   para ir e para voltar. O quadro vivo cresce de 2:1 para 3:2 pelo script, que
   anima a altura junto com a câmera; parado, ele é só a proporção. */
.cena { position: relative; width: min(100%, var(--util, 100%)); }
.cena picture { width: 100%; }
.cena[data-viva] picture { display: none; }
.cena-quadro {
  position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--r-card); border: 1px solid var(--linha);
  touch-action: pan-y;
}
.cena-quadro canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.cena-quadro[data-agarrado] canvas { cursor: grabbing; }
.cena-quadro canvas:focus-visible { outline: 2px solid var(--foco); outline-offset: -4px; }
/* Pílula clara em relevo. A pílula escura translúcida ficou para a legenda,
   que deixou de ter fundo, e as duas pararam de ter o mesmo desenho. */
.cena-botao {
  position: absolute; bottom: var(--e3); inset-inline-end: var(--e3); z-index: 1;
  font: inherit; font-size: var(--t-nota); font-weight: 620; letter-spacing: 0.01em;
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: 999px; padding: var(--e2) var(--e4);
  min-height: 44px; cursor: pointer;
  box-shadow: var(--sombra-2);
}
.cena-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cena-botao[aria-busy] { cursor: progress; }

/* ------------------------------------------------------------- diagnóstico */
.diagnostico { margin: var(--e7) 0; }
.pergunta h2 { margin-top: var(--e4); }
.opcoes { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e2); }
@media (min-width: 780px) { .opcoes { grid-template-columns: 1fr 1fr; } }
/* A opção com caixa de marcar, da pergunta 3, fica como estava: a gramática
   do clicável vale para a opção que leva adiante, que é botão. */
.opcao {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--superficie); color: var(--tinta);
  border-radius: var(--r-card); padding: var(--e4) var(--e5);
}
.opcao--marca { border: 1px solid var(--linha); border-left: 3px solid var(--verde-marca); }
.opcao b { display: block; font-weight: 560; font-size: 1.02rem; line-height: 1.35; }
.opcao small { display: block; margin-top: var(--e2); color: var(--tinta-3); font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height: 1.45; }

/* ---------------------------------------------------------------- destaques */
.destaques { margin-bottom: var(--e7); }
/* O índice da habilitação (achado 27). Dez linhas com o número do bloco, cada
   uma com 44 px de altura para o dedo, e o sublinhado do link dentro de texto,
   porque aqui não há card nem chevron que diga que a linha leva a algum lugar. */
.indice { margin: 0 0 var(--e7); padding-top: var(--e5); border-top: 1px solid var(--linha); }
.indice h2 { font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e2); font-weight: 640; }
.indice ol { margin: 0; padding: 0; list-style: none; counter-reset: indice; }
@media (min-width: 760px) { .indice ol { columns: 2; column-gap: var(--e7); } }
.indice li { counter-increment: indice; break-inside: avoid; }
.indice a {
  display: flex; align-items: center; gap: var(--e3); min-height: 2.75rem; padding-block: 0.4rem;
  color: inherit; font-size: var(--t-apoio); line-height: 1.35;
  text-decoration-line: underline; text-decoration-color: var(--verde-texto);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.indice a::before {
  content: counter(indice, decimal-leading-zero);
  font-variant-numeric: tabular-nums; color: var(--tinta-2); font-size: var(--t-nota); letter-spacing: var(--ls-nota);
}
@media (hover: hover) { .indice a:hover { color: var(--verde-link); } }
.indice a:active { color: var(--verde-link); background: var(--verde-fraco); }

/* ------------------------------------------------------------------ rodapé */
.rodape { border-top: 1px solid var(--linha); background: var(--superficie); margin-top: var(--e9); }
.rodape .dentro {
  max-width: var(--largura-max); margin: 0 auto;
  padding: var(--e7) var(--e5) var(--e8);
  display: grid; gap: var(--e6);
}
@media (min-width: 860px) {
  .rodape .dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); padding: var(--e7) var(--e6) var(--e8); gap: var(--e8); }
}
.rodape p { margin: 0 0 var(--e3); max-width: var(--medida); }
.rodape .razao { font-weight: 620; }
.rodape .cadastral, .rodape .endereco, .rodape .atendimento { font-size: var(--t-nota); letter-spacing: var(--ls-nota); color: var(--tinta-2); }
.rodape .fala { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; margin: var(--e5) 0; font-size: var(--t-apoio); }
.rodape-notas p { font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height: 1.55; color: var(--tinta-3); }
.rodape-fomento a { display: block; width: max-content; max-width: 100%; margin-bottom: var(--e3); }
.rodape-fomento img { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   Impressão. Sai inteira de build/dossie.mjs, ticket 28. Quem imprime a
   página de habilitação está montando processo de licitação.
   ========================================================================== */

@page { size: A4; margin: 16mm 15mm 18mm; }

@media print{
  :root{--medida:66ch; --ls-nota:normal}
  body{font-variant-numeric:tabular-nums}
  p,h1,h2,.t2,.nome{text-wrap:wrap}
  /* O que é da peça e não do dossiê: a barra fixa, a navegação e as saídas de
     tela não vão para o papel. Quem imprime /capacidade-tecnica está montando
     processo de licitação, e ali o cabeçalho grudento só ocupa margem. */
  /* A faixa densa não vai ao papel, e o logotipo volta às cores do claro. */
  .topo{position:static; border:0; background:none; padding:0; color:var(--tinta);
    --logo-verde:#068f55; --logo-onda-de:#27394b; --logo-onda-para:#068f55}
  .topo .marca{color:var(--tinta)}
  .topo nav,.topo .folha,.pular,.filtro,.saidas,.instrucao,.migalha,.cena-botao,.indice{display:none}
  /* Achados do PDF do portfólio, ticket 43, e valem para toda página impressa:
     o botão de tema saía no papel, e o rodapé de tela ocupava uma folha
     sozinho, com botão de WhatsApp e o link do portfólio apontando para ele
     mesmo. No papel o rodapé é só a identificação. */
  .topo-acoes,.rodape-portfolio,.rodape-privacidade,.oposicao{display:none}
  .rodape .dentro{padding:5mm 0 0; gap:3mm; grid-template-columns:1fr 1fr}
  .rodape .fala{margin:2mm 0}
  .rodape p,.rodape .cadastral,.rodape .endereco,.rodape .atendimento,.rodape .fala,.rodape-notas p{margin:0 0 1.5mm; font-size:7.5pt; line-height:1.45}
  .topo .logotipo{height:9mm}
  .palco{max-width:none; padding:0}
  .rodape{background:none}
  /* No papel o catálogo é lista de referência, e 38 tampas seriam 38 chapadas
     de tinta e o dobro de folhas. A imagem continua na página do serviço. */
  .card{break-inside:avoid}
  .card .miniatura{display:none}
  .card .corpo{padding:var(--e4)}

  :root{
    --fundo:#fff; --superficie:#fff; --denso:#27394b;
    --tinta:#27394b; --tinta-2:#4a5b6b; --tinta-3:#5e6e7c;
    --tinta-densa:#fff; --tinta-densa-2:#c3d2dd;
    --linha:#c8cfd4; --linha-forte:#a8b3ba;
    --verde-texto:#046a40; --verde-fraco:#eef6f2;
    --onda-opacidade:.12;
  }
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body{background:#fff; font-size:9.6pt; line-height:1.48}
  .pele{max-width:none; padding:0}
  .folha{max-width:none; margin:0; padding:0; border:0; border-radius:0;
    box-shadow:none; background:#fff}
  .chrome,.sumario,.pular{display:none !important}
  .so-impressao{display:block}

  .cabecalho-impresso{display:flex; align-items:flex-start; justify-content:space-between;
    gap:12mm; padding-bottom:4mm; border-bottom:.4pt solid var(--linha-forte); margin-bottom:8mm}
  .cabecalho-impresso .logotipo{height:9mm}
  .cabecalho-impresso .identidade{text-align:right; font-size:8pt; line-height:1.45; color:var(--tinta-2)}

  .abertura{padding:0 0 6mm; break-after:avoid}
  .abertura h1{font-size:22pt; max-width:none}
  .abertura .lead{font-size:10.5pt; max-width:none}
  .abertura .campo-onda{display:none}
  .destaques{margin-top:6mm; grid-template-columns:repeat(3,1fr); break-inside:avoid}
  .destaques b{font-size:13pt}
  .destaques .rotulo{font-size:8.5pt}
  .destaques .nota-destaque{font-size:7.5pt}

  .bloco{padding:6mm 0 0; break-inside:avoid; page-break-inside:avoid}
  .bloco-corpo{max-width:none}
  .bloco-cabeca{margin-bottom:3mm}
  h2{break-after:avoid; font-size:12.5pt}
  .bloco.denso{margin:6mm 0 0; padding:7mm; border-radius:3mm}
  .bloco.denso .campo-onda{display:none}
  .bloco.denso + .bloco{padding-top:7mm}

  .medidas,.rolagem-tabela,.ficha,.nota{break-inside:avoid}
  /* Portfólio, ticket 43. Uma ficha nunca parte ao meio, e a imagem tem teto de
     altura para caberem duas por folha. */
  .trabalho{break-inside:avoid; padding-top:6mm}
  .trabalho + .trabalho{margin-top:6mm}
  .trabalho .t2{margin-bottom:3mm; max-width:none}
  .trabalho .figura{margin:0 0 3mm}
  .trabalho .figura img{max-height:88mm; object-fit:cover}
  .trabalho-resolveu{margin:0 0 3mm; max-width:none}
  .trabalho .ficha{max-width:none}
  .ficha > div{padding:1.5mm 0; grid-template-columns:52mm minmax(0,1fr)}
  .ficha dt,.ficha dd{font-size:8.5pt; line-height:1.4}
  .destaques div{padding:3.5mm 4mm}
  .medidas{grid-template-columns:repeat(3,1fr)}
  .medidas b{font-size:11pt}
  table{font-size:8.5pt}
  thead th{font-size:7pt}
  .fonte{font-size:7.5pt}
  .nota{font-size:8.5pt}

  .rodape{margin-top:8mm; padding:6mm 0 0; break-inside:avoid}
  .rodape .campo-onda{display:none}
  .rodape-grade{grid-template-columns:minmax(0,1fr) 62mm}
  .url-impressa{display:block; padding-left:6.5em; font-size:7pt; word-break:break-all;
    color:var(--tinta-2); text-decoration:none}
  .bloco.denso .url-impressa{color:var(--tinta-densa-2)}
}

/* ------------------------------------------------------ ajustes da leitura
   Os seis achados da primeira captura da peça montada, ticket 16. */

/* O cabeçalho é grudento, então âncora e alvo de `#id` precisam de folga em
   cima, senão a barra cobre o título para onde o link levou. */
:target { scroll-margin-top: 5.5rem; }
h1, h2, h3, .bloco, .card, .capa { scroll-margin-top: 5.5rem; }

/* A terceira linha do destaque é a que carrega o argumento, e é ela que o
   dossiê mostra. */
.nota-destaque { display: block; font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height: 1.35; color: var(--tinta-3); margin-top: 2px; }
.denso .nota-destaque { color: var(--tinta-densa-2); }
.medidas .rotulo { display: block; color: var(--tinta-2); font-size: var(--t-nota); letter-spacing: var(--ls-nota); line-height: 1.35; margin-top: 3px; }

/* ==========================================================================
   Comportamento. O que só existe depois que build/peca.mjs roda.
   ========================================================================== */

/* ------------------------------------------------- entrada de blocos */
/* ADR-0002: "fora disso, entrada suave de blocos ao aparecerem. Nada que se
   mexa sozinho enquanto se lê." Três travas cumprem a segunda frase.

   Só existe com script vivo, porque bloco escondido por CSS que espera um
   observador é bloco que some quando o script não carrega. Só pega o que nasce
   abaixo da primeira tela, senão a primeira renderização começaria em branco,
   que é o contrário do orçamento da decisão 17. E acontece uma vez por bloco:
   rolar para cima não rearma nada, porque reentrada é o movimento que incomoda
   quem está lendo. */
[data-entrada] .entra { opacity: 0; transform: translateY(14px); }
[data-entrada] .entra.dentro {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
/* O papel não tem primeira tela, e a folha de impressão vira PDF do dossiê. */
/* Os cards abaixo da dobra entram um a um (ticket 08 do mapa vida-e-clareza),
   com as mesmas três travas. O script dá o atraso de cada um. */
.cai { opacity: 0; transform: translateY(10px); }
:root .cai.caiu {
  opacity: 1; transform: none;
  transition: opacity .32s ease-out, transform .32s cubic-bezier(.2, .8, .2, 1);
}
@media print { [data-entrada] .entra, .cai { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { [data-entrada] .entra, .cai { opacity: 1; transform: none; } }

/* --------------------------------------------------- divisória e alça */
/* Sem script não há o que arrastar, e uma alça que não pega é pior que alça
   nenhuma. As duas só aparecem quando o script se declara vivo. */
.comparador:not([data-vivo]) .haste,
.comparador:not([data-vivo]) .pega { display: none; }
.comparador[data-vivo] { cursor: ew-resize; }
.comparador[data-agarrado] { cursor: grabbing; }

.haste {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  margin-left: -1px; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(6, 11, 15, 0.35);
}
.pega {
  position: absolute; top: 50%; left: 0;
  width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%; border: 2px solid #fff; padding: 0;
  background: rgba(6, 11, 15, 0.38); backdrop-filter: blur(6px);
  cursor: ew-resize; touch-action: none;
}
/* As duas setas da alça, desenhadas em CSS para não pedir arquivo nem fonte. */
.pega::before, .pega::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border: 6px solid transparent; margin-top: -6px;
}
.pega::before { left: 7px; border-right-color: #fff; }
.pega::after { right: 7px; border-left-color: #fff; }
.pega:focus-visible { outline: 3px solid var(--mostarda); outline-offset: 3px; }
/* A haste segue a divisória por transformação do compositor, então ela não
   pode herdar transição nenhuma: cada quadro já vem do laço da mola. */
.haste, .pega { transition: none; }
.pega { transform: translateX(0); }

/* ------------------------------------------------------------------ painel */
.painel .corpo > :last-child { margin-bottom: 0; }
.painel-cabeca { margin-bottom: var(--e5); padding-right: 2.5rem; }
.painel-cabeca .lead { margin: var(--e3) 0 0; font-size: 1rem; }
.painel-corpo > :first-child { margin-top: 0; }
.painel-corpo .figura:first-child { margin-top: 0; }
.painel .fechar:hover { background: var(--fundo); }

/* -------------------------------------------------------------- diagnóstico */
/* Script que não carregou dá o mesmo resultado de script desligado, e o bloco
   de reserva cobre os dois. `noscript` só cobria um deles. */
.diagnostico:not([data-vivo]) .pergunta,
.diagnostico:not([data-vivo]) .resultado { display: none; }
.diagnostico[data-vivo] .sem-script { display: none; }
.sem-script { max-width: var(--medida); }

.opcao--marca { display: flex; align-items: baseline; gap: var(--e3); cursor: pointer; }
.opcao--marca input { width: 1.05rem; height: 1.05rem; accent-color: var(--verde-marca); flex: none; }
.opcao--marca b { font-weight: 520; font-size: 0.98rem; }
.opcoes .segue { grid-column: 1 / -1; margin-top: var(--e3); }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo legend { padding: 0; }
.pergunta { scroll-margin-top: 5.5rem; }
/* O resultado traz o próprio h1 e a capa sai de cena, então a margem que
   separava os dois sobra. */
.capa[hidden] + .diagnostico { margin-top: 0; }
.aviso { margin: 0 0 var(--e5); padding: var(--e4) var(--e5); background: var(--elevado); border: 1px solid var(--linha); border-radius: var(--r-card); font-size: var(--t-apoio); }
.volta { margin: var(--e4) 0 0; }
.voltar {
  font: inherit; font-size: var(--t-apoio); color: var(--tinta-2); background: none; border: 0; padding: 0;
  min-height: 44px; cursor: pointer;
  text-decoration-line: underline; text-decoration-color: var(--verde-texto);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
@media (hover: hover) { .voltar:hover { color: var(--verde-link); } }

.rota-resumo { font-size: 1.05rem; margin-bottom: var(--e6); }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passo { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--e4); padding: var(--e4) 0; border-top: 1px solid var(--linha); }
.passo .n {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--denso); color: var(--tinta-densa); font-size: var(--t-nota); letter-spacing: var(--ls-nota); font-weight: 640;
}
/* O nome do serviço é o caminho do resultado para o detalhe, e leva o
   sublinhado do link dentro de texto. O `padding` com margem negativa dá a
   área de toque sem mexer no desenho. */
.passo .nome, .dobra li a {
  display: inline-block; padding: 0.25rem 0; margin: -0.25rem 0; color: inherit;
  text-decoration-line: underline; text-decoration-color: var(--verde-texto);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 3px;
}
@media (hover: hover) { :is(.passo .nome, .dobra li a):hover { color: var(--verde-link); } }
.passo .nome { font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.linha-status { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e2); }
.linha-status .vert { font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; font-weight: 640; color: var(--tinta-2); }
.conector { margin: var(--e3) 0 0; font-size: var(--t-apoio); color: var(--tinta-2); }
.conector b { color: var(--tinta); font-weight: 600; }
.precisa { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linha); font-size: var(--t-apoio); color: var(--tinta-2); }
.precisa .cabeca { display: block; color: var(--tinta-3); font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; font-weight: 640; margin-bottom: var(--e2); }

.dobra { margin-top: var(--e5); }
.dobra summary { cursor: pointer; color: var(--tinta-2); font-size: var(--t-apoio); padding: var(--e3) 0; }
.dobra summary:hover { color: var(--tinta); }
.dobra ul { list-style: none; margin: 0; padding: 0; }
.dobra li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--linha); }
.dobra li a { font-weight: 520; }

.condicional { margin-top: var(--e6); padding: var(--e5); background: var(--elevado); border: 1px solid var(--linha); border-radius: var(--r-card); font-size: var(--t-apoio); }
.fecho-rota { margin-top: var(--e6); }
.previa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-controle); padding: var(--e4) var(--e5); }
.previa .cabeca { display: block; color: var(--tinta-3); font-size: var(--t-versal); letter-spacing: var(--ls-versal); text-transform: uppercase; font-weight: 640; margin-bottom: var(--e2); }
.previa p { margin: 0; font-size: var(--t-apoio); color: var(--tinta-2); overflow-wrap: anywhere; }

/* O painel ocupa a largura da grade, e uma coluna de 66 ch dentro de 1160 px
   deixa metade da caixa vazia. Duas colunas usam o espaço sem esticar a linha
   além da medida de leitura. */
@media (min-width: 940px) {
  .painel-corpo { columns: 2; column-gap: var(--e7); }
  .painel-corpo > * { break-inside: avoid; margin-top: 0; }
  .painel-corpo .campo { margin-bottom: var(--e5); }
}

/* O resultado da rota vive de réguas horizontais, e uma régua de 1240 px sob
   uma linha de 66 ch lê como tabela vazia. */
.resultado { max-width: 52rem; }
.previa, .condicional { max-width: var(--medida); }


/* ==========================================================================
   Gramática do clicável e família de ícones. Tickets 07 e 09 do mapa
   vida-e-clareza, variante D.

   Clicável fica de pé, com borda, sombra e chevron verde, e afunda quando é
   pressionado. Não clicável é chapado. O verde marca superfície que responde a
   toque e nunca pinta texto, exceto o sublinhado do link dentro de parágrafo.

   O movimento é o do ticket 08. Com script, o card anda em mola pelo
   `peca.mjs`, que liga `.com-mola` na raiz e `.premido` no `pointerdown`, e as
   regras de `:hover` e `:active` abaixo se calam. Sem script, ficam elas, em
   80 ms com `ease-out`. O ponteiro só vale em `(hover: hover)`, senão o card
   fica aceso no celular depois do toque.
   ========================================================================== */

/* ------------------------------------------------------- card e linha */
.dor, .opcao:not(.opcao--marca), .card, .porta-vertical a {
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-2);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background-color 0.08s ease-out;
}
/* Faixa verde à esquerda, ou em cima no card de serviço, que tem imagem. */
.dor, .opcao:not(.opcao--marca), .porta-vertical a { border-left: 3px solid var(--verde-marca); }
.card { border-top: 3px solid var(--verde-marca); }
.card .miniatura { border-bottom-color: var(--linha-forte); }

@media (hover: hover) {
  :root:not(.com-mola) :is(.dor, .opcao:not(.opcao--marca), .card, .porta-vertical a):hover {
    transform: translateY(-1px); box-shadow: var(--sombra-3);
  }
}
:root:not(.com-mola) :is(.dor, .opcao:not(.opcao--marca), .card, .porta-vertical a):is(:active, .premido) {
  transform: translateY(1px); box-shadow: var(--sombra-1); background: var(--verde-fraco);
}
/* Com mola, deslocamento e sombra vêm do script quadro a quadro, e a folha só
   cuida do fundo. Ele acende sem rampa, porque cor não é movimento, e apaga em
   180 ms. */
.com-mola :is(.dor, .opcao:not(.opcao--marca), .card, .porta-vertical a) { transition: background-color 180ms ease-out; }
.com-mola :is(.dor, .opcao:not(.opcao--marca), .card, .porta-vertical a).premido { background: var(--verde-fraco); transition-duration: 0s; }

/* O chevron. Na situação e na opção ele fica na ponta direita, a meia altura;
   no card de serviço, no pé; na porta por área, no fim da linha. */
.chevron { display: block; flex: none; width: 1.1rem; height: 1.1rem; color: var(--verde-texto); }
.dor, .opcao:not(.opcao--marca) { position: relative; padding-right: 3rem; }
.dor .chevron, .opcao .chevron { position: absolute; right: var(--e4); top: 50%; margin-top: -0.55rem; }
.card .pe .chevron { margin-left: auto; }

/* --------------------------------------------------------------- botões */
/* Botão não ganha mola (ticket 08): transição de 180 ms na curva de saída. A
   pressão entra sem rampa, pela classe que o script põe no `pointerdown`. */
.acao, .filtro a, .cena-botao {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease-out;
}
:is(.acao, .filtro a, .cena-botao):is(:active, .premido) { transition-duration: 0s; }
@media (hover: hover) { .acao:hover { box-shadow: var(--sombra-relevo-alta); } }
.acao:is(:active, .premido) { transform: translateY(1px); box-shadow: var(--sombra-funda); }

@media (hover: hover) { .filtro a:not([aria-current]):hover { box-shadow: var(--sombra-2); } }
.filtro a:is(:active, .premido) { transform: translateY(1px); box-shadow: none; }

@media (hover: hover) { .cena-botao:hover { background: var(--elevado); box-shadow: var(--sombra-3); } }
.cena-botao:is(:active, .premido) { transform: translateY(1px); box-shadow: var(--sombra-1); }

/* ------------------------------------------------------ link dentro de texto
   Cor do texto e sublinhado verde de 1,5 px. O escopo é o link cujo pai é um
   bloco de texto, mais a migalha e o telefone do rodapé: a regra do protótipo
   pegava todo `a` sem classe de `main`, e com isso alcançava listas de links
   que têm desenho próprio. O `li` fica fora pelo mesmo motivo: a porta por área
   e a lista dobrável do diagnóstico são `li > a`, e ganhavam sublinhado. */
:where(main, .rodape) :where(p, dd, figcaption) > a:not([class]),
.migalha a, .rodape .telefone {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--verde-texto);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-radius: 3px;
}
@media (hover: hover) {
  :where(main, .rodape) :where(p, dd, figcaption) > a:not([class]):hover,
  .migalha a:hover, .rodape .telefone:hover { color: var(--verde-link); }
}
:where(main, .rodape) :where(p, dd, figcaption) > a:not([class]):active,
.migalha a:active, .rodape .telefone:active { color: var(--verde-link); background: var(--verde-fraco); }
/* Área de toque sem mudar o desenho (achado 06). O "Início" da trilha media
   15 px de altura, o telefone e o e-mail do rodapé 23. Na trilha o recheio
   vertical de um elemento em linha não empurra a linha. No rodapé os dois são
   itens de flex, e a margem negativa devolve o que o recheio tomou. */
.migalha a { padding: 0.5rem 0.25rem; margin: 0 -0.25rem; }
.rodape .fala a { padding-block: 0.3rem; margin-block: -0.3rem; }
/* No bloco denso o fundo é o petróleo, e o verde do sublinhado some nele. */
.bloco.denso a, .denso a:not([class]) { text-decoration-color: currentColor; }
/* A fonte da habilitação e o portfólio pintavam o link inteiro de verde. */
.fonte a, .trabalho .ficha a, .linha-portfolio a, .pe-portfolio a, .rodape-portfolio a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .dor, .opcao, .card, .porta-vertical a, .acao, .filtro a, .cena-botao, .chevron { transform: none !important; }
}

/* ---------------------------------------------------------------- ícones
   Um tamanho por contexto. Cor do texto na porta, no filtro e no ramo; um tom
   abaixo na opção e no título de campo, para o ícone ficar sob a palavra. */
.icone { flex: none; }
.porta-vertical a .icone:not(.chevron) { width: 1.2em; height: 1.2em; }
.filtro a .icone { width: 1.1em; height: 1.1em; margin-right: 0.35em; }
/* Em `inline-flex` o espaço entre o nome e a contagem some. */
.filtro a .conta { margin-left: 0.35em; }
.grupo-ramo h3 .icone { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; }
.opcao b .icone { width: 1.2em; height: 1.2em; vertical-align: -0.25em; margin-right: 0.5em; color: var(--tinta-2); }
.campo :is(h2, h3) .icone { width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: 0.45em; color: var(--tinta-2); }
@media print { .chevron { display: none; } }