/* ---- framework/tokens/tokens.css */
/* GERADO por tokens/gerar-tokens.mjs a partir de tokens/tokens.json — ADR-061. */
/* NÃO EDITAR À MÃO. Alterar a Fundação, remedir, e regenerar. */
/* Fundação Fundação (neutra) · modo Base · medido em 2026-10-08 · contrato 0.1.0 */
/* 52 tokens emitidos de 77. 22 omitidos por consumido=false: escala declarada, não token em uso (CONTRATO_HANDOFF §2.1). */

:root {
  --cor-superficie-base: #F7F7F6;
  --cor-superficie-elevada: #FFFFFF;
  --cor-superficie-subtil: #EFEFED;
  --cor-superficie-inversa: #1C1C1A;
  --cor-fronteira-subtil: #E2E2DF;
  --cor-fronteira-media: #949494;
  --cor-fronteira-forte: #8A8A83;
  --cor-texto-principal: #1C1C1A;
  --cor-texto-secundario: #6B6B64;
  --cor-texto-corpo: #4A4A45;
  --cor-texto-tenue: #6C6C6C;
  --cor-texto-inverso: #FFFFFF;
  --cor-acao-base: #2F2F2B;
  --cor-acao-texto: #FFFFFF;
  --cor-acao-desativado: #C9C9C4;
  --cor-estado-hover: #E9E9E6;
  --cor-estado-selecionado-fundo: var(--cor-superficie-subtil);
  --cor-estado-selecionado-marca: var(--cor-acao-base);
  --cor-feedback-info: #31527A;
  --cor-feedback-info-fundo: #EEF3FA;
  --cor-feedback-sucesso: #1F7A4C;
  --cor-feedback-sucesso-fundo: #F0F9F4;
  --cor-feedback-atencao: #A16207;
  --cor-feedback-atencao-fundo: #FDF6E7;
  --cor-feedback-erro: #B42318;
  --cor-feedback-erro-fundo: #FEF3F2;
  --cor-hipotese-marca: #A16207;
  --cor-hipotese-fundo: #FDF6E7;
  --cor-config-marca: #5B4B8A;
  --cor-config-fundo: #F2EFF9;
  --cor-decisao-marca: #3F5A73;
  --cor-decisao-fundo: #EDF1F5;

  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-intra: 6px;

  --margem-pagina-compacta: 40px;
  --margem-pagina-ampla: 80px;
  --margem-pagina-movel-esquerda: 23px;

  --intervalo-navegacao: 20px;

  --raio-s: 4px;
  --raio-m: 8px;
  --raio-l: 12px;

  --altura-controlo-s: 32px;
  --altura-controlo-l: 44px;

  --fronteira-fina: 1px;
  --fronteira-anel: 2px;

  /* Escala declarada da Fundação, adotada pelo código e NÃO consumida no Figma. */
  --icone-tamanho-s: 16px;
  --icone-tamanho-m: 20px;
  --icone-tamanho-l: 24px;

  /* Os 17 estilos de texto publicados. Entrelinha única de 150 %. */
  --tipo-entrelinha: 1.5;
  --papel-titulo-pagina-tamanho: 24px;
  --papel-titulo-pagina-peso: 600;
  --papel-valor-destacado-tamanho: 18px;
  --papel-valor-destacado-peso: 600;
  --papel-titulo-ecra-tamanho: 16px;
  --papel-titulo-ecra-peso: 600;
  --papel-titulo-secao-tamanho: 15px;
  --papel-titulo-secao-peso: 600;
  --papel-acao-tamanho: 14px;
  --papel-acao-peso: 500;
  --papel-valor-tamanho: 14px;
  --papel-valor-peso: 400;
  --papel-valor-enfase-tamanho: 14px;
  --papel-valor-enfase-peso: 600;
  --papel-corpo-tamanho: 13px;
  --papel-corpo-peso: 400;
  --papel-corpo-enfase-tamanho: 13px;
  --papel-corpo-enfase-peso: 500;
  --papel-auxiliar-tamanho: 12px;
  --papel-auxiliar-peso: 400;
  --papel-auxiliar-enfase-tamanho: 12px;
  --papel-auxiliar-enfase-peso: 500;
  --papel-cabecalho-tabela-tamanho: 12px;
  --papel-cabecalho-tabela-peso: 600;
  --papel-mensagem-erro-tamanho: 12px;
  --papel-mensagem-erro-peso: 400;
  --papel-etiqueta-tamanho: 11px;
  --papel-etiqueta-peso: 700;
  --papel-micro-rotulo-tamanho: 11px;
  --papel-micro-rotulo-peso: 400;
  --papel-micro-tamanho: 10px;
  --papel-micro-peso: 400;
  --papel-micro-enfase-tamanho: 10px;
  --papel-micro-enfase-peso: 700;

  --elevacao-popover: 0px 8px 24px -4px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
}

/* ---- framework/css/base.css */
/* Fundação CSS — reset mínimo e base.
   Consome exclusivamente tokens de tokens.css. Nenhum literal aqui é geometria do Figma:
   as coordenadas absolutas do Figma NÃO se transportam (CONTRATO_HANDOFF, regra de handoff). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cor-superficie-base);
  color: var(--cor-texto-principal);
  font-family:
    var(--tipo-familia, Inter),
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  /* A base é `papel/valor`, o papel de leitura corrente. Não é um 14 escolhido aqui. */
  font-size: var(--papel-valor-tamanho);
  line-height: var(--tipo-entrelinha);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Acessibilidade — anel de foco.
   Um só padrão para todo o framework: 2 px (fronteira/anel) em cor/fronteira/forte,
   com deslocamento de 2 px. É o padrão medido na Fundação, 54 variantes em 19 conjuntos. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--fronteira-anel) solid var(--cor-fronteira-forte);
  outline-offset: 2px;
}

/* Nenhum elemento focável perde o foco visível por decisão de estilo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Alvo de toque mínimo. 44 px em desktop por altura/controlo-l.
   D-52 declara o botão de texto a 40 px como ACCESSIBILITY_DEBT; o framework
   nasce já a 44 e não reproduz a dívida. */
.fw-alvo-minimo {
  min-height: var(--altura-controlo-l);
}

/* Conteúdo só para tecnologia de apoio. */
.fw-apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fw-oculto {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- framework/css/tipografia.css */
/* Tipografia — os 17 estilos `papel/*` publicados na Fundação, medidos em 08/10/2026.
   Os estilos são o contrato de composição; a escala `tipo/*` é a escala por baixo deles
   e NÃO é emitida, porque não é consumida no Figma (CONTRATO_HANDOFF §2.1).

   Cada papel consome o seu par `--papel-*-tamanho` / `--papel-*-peso` gerado de
   tokens.json: NENHUM tamanho nem peso é literal neste ficheiro. */

:root {
  --tipo-familia: Inter;
}

[class^='papel-'],
[class*=' papel-'] {
  font-family:
    var(--tipo-familia),
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  line-height: var(--tipo-entrelinha);
  letter-spacing: 0;
  margin: 0;
}

.papel-titulo-pagina {
  font-size: var(--papel-titulo-pagina-tamanho);
  font-weight: var(--papel-titulo-pagina-peso);
}
.papel-valor-destacado {
  font-size: var(--papel-valor-destacado-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
}
.papel-titulo-ecra {
  font-size: var(--papel-titulo-ecra-tamanho);
  font-weight: var(--papel-titulo-ecra-peso);
}
.papel-titulo-secao {
  font-size: var(--papel-titulo-secao-tamanho);
  font-weight: var(--papel-titulo-secao-peso);
}
.papel-acao {
  font-size: var(--papel-acao-tamanho);
  font-weight: var(--papel-acao-peso);
}
.papel-valor {
  font-size: var(--papel-valor-tamanho);
  font-weight: var(--papel-valor-peso);
}
.papel-valor-enfase {
  font-size: var(--papel-valor-enfase-tamanho);
  font-weight: var(--papel-valor-enfase-peso);
}
.papel-corpo {
  font-size: var(--papel-corpo-tamanho);
  font-weight: var(--papel-corpo-peso);
}
.papel-corpo-enfase {
  font-size: var(--papel-corpo-enfase-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
}
.papel-auxiliar {
  font-size: var(--papel-auxiliar-tamanho);
  font-weight: var(--papel-auxiliar-peso);
}
.papel-auxiliar-enfase {
  font-size: var(--papel-auxiliar-enfase-tamanho);
  font-weight: var(--papel-auxiliar-enfase-peso);
}
.papel-cabecalho-tabela {
  font-size: var(--papel-cabecalho-tabela-tamanho);
  font-weight: var(--papel-cabecalho-tabela-peso);
}
.papel-mensagem-erro {
  font-size: var(--papel-mensagem-erro-tamanho);
  font-weight: var(--papel-mensagem-erro-peso);
  color: var(--cor-feedback-erro);
}
.papel-etiqueta {
  font-size: var(--papel-etiqueta-tamanho);
  font-weight: var(--papel-etiqueta-peso);
}
.papel-micro-rotulo {
  font-size: var(--papel-micro-rotulo-tamanho);
  font-weight: var(--papel-micro-rotulo-peso);
}
.papel-micro {
  font-size: var(--papel-micro-tamanho);
  font-weight: var(--papel-micro-peso);
}
.papel-micro-enfase {
  font-size: var(--papel-micro-enfase-tamanho);
  font-weight: var(--papel-micro-enfase-peso);
}

/* Truncagem a uma linha, com fim reticente. É o contrato `ENDING` do desenho
   e é o que impede o wrapping inesperado em títulos longos. */
.fw-uma-linha {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- framework/css/layout.css */
/* Layout — contentor, grelha e tamanho de controlo.
   Implementa `D-E07` (grelha) e `D-E06` (responsivo) por PARAMETRIZAÇÃO.

   `H11` proíbe implementar um dos dois regimes autorizados como se fosse o único.
   Aqui o regime é um conjunto de valores, não código: passar de B para A é mudar
   `--grelha-cartao-min` e `--grelha-goteira`, e nada mais. */

:root {
  /* Contentor. Desktop 1280 · margem 40 (margem/pagina-compacta) · útil 1200. */
  --pagina-util: 1200px;
  --pagina-margem: var(--margem-pagina-compacta);

  /* REGIME B — variante autorizada, e é o que 1.1 mede hoje: 3 × 384 + 2 × 24 = 1200.
     Para o REGIME A (regra): --grelha-cartao-min: 380px e --grelha-goteira: var(--intervalo-navegacao).
     3 × 380 + 2 × 20 = 1200. Ambos resolvem a mesma largura útil. */
  --grelha-cartao-min: 384px;
  --grelha-goteira: var(--espaco-5);

  /* Mobile — REGRA: 375 · margem 16 · útil 343.
     Os 341 px de 1.1 Mobile são anomalia registada (FUNDACAO_ESTRUTURA §6)
     e NÃO se reproduzem. */
  --pagina-margem-movel: var(--espaco-4);

  /* Ponto de rutura, derivado do conteúdo e não escolhido.
     A linha de descoberta de 1.1 Desktop tem 3 selects de 186 px, uma busca em FILL
     e um botão: abaixo de ~704 px a composição declarada deixa de caber e tem de empilhar.
     É o único ponto de rutura do framework, e existe porque a composição muda. */
  --rutura-controlos: 44rem;

  /* Medidas de legibilidade e de miniatura. Sao grandezas de composicao do framework,
     nao tokens da Fundacao: a Fundacao nao as declara, e inventa-las como token seria
     criar autoridade que nao existe. Ficam nomeadas e num so sitio. */
  --fw-medida-texto: 42rem;
  --fw-miniatura: 9rem;
}

/* Contentor fluido que nunca passa da largura útil, e cujas margens são tokens. */
.fw-contentor {
  width: 100%;
  max-width: calc(var(--pagina-util) + 2 * var(--pagina-margem));
  margin-inline: auto;
  padding-inline: var(--pagina-margem);
}

/* Grelha de cartões.
   `auto-fill` + `minmax` dá reflow CONTÍNUO sem nenhum ponto de rutura:
   a 1200 de útil cabem exatamente 3 colunas de 384; a ~800 cabem 2; abaixo de ~400, 1.
   Nenhum número de colunas está escrito no CSS. */
.fw-grelha-cartoes {
  display: grid;
  /* `min()` é indispensável: `minmax(384px, 1fr)` NÃO encolhe abaixo de 384 e produz
     scroll horizontal a 320 px. Foi o teste de browser que o apanhou — em jsdom era
     invisível, porque não há layout. */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grelha-cartao-min), 100%), 1fr));
  gap: var(--grelha-goteira);
}

/* Pilha vertical com espaçamento por token. */
.fw-pilha {
  display: flex;
  flex-direction: column;
  gap: var(--fw-pilha-gap, var(--espaco-4));
}

/* Linha horizontal que envolve quando falta largura, em vez de recortar. */
.fw-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fw-linha-gap, var(--espaco-3));
}

/* Intenção de dimensionamento do Figma, traduzida — nunca coordenadas.
     FILL  -> ocupa o que resta, e pode encolher
     HUG   -> o conteúdo manda
     FIXED -> só quando é semanticamente necessário */
.fw-preenche {
  flex: 1 1 0;
  min-width: 0;
}
.fw-abraca {
  flex: 0 0 auto;
}

/* Controlos — alturas da Fundação. */
.fw-controlo-s {
  min-height: var(--altura-controlo-s);
}
.fw-controlo-l {
  min-height: var(--altura-controlo-l);
}

/* Único ponto de rutura: abaixo dele, as composições declaradas como mobile empilham
   e as margens passam à regra mobile. */
@media (max-width: 44rem) {
  :root {
    --pagina-margem: var(--pagina-margem-movel);
  }

  .fw-linha[data-empilha-movel='sim'] {
    flex-direction: column;
    align-items: stretch;
  }

  .fw-linha[data-empilha-movel='sim'] > * {
    width: 100%;
  }
}

/* ---- framework/css/componentes.css */
/* Componentes — aparência.
   Todo o valor vem de tokens.css. Não há um único literal de cor, espaço, raio
   ou tamanho de tipo neste ficheiro: é a regra que o lint impõe (ADR-061). */

/* ---------- icone ---------- */
.fw-icone {
  flex: 0 0 auto;
  color: inherit;
}
.fw-icone[data-tamanho='s'] {
  width: var(--icone-tamanho-s);
  height: var(--icone-tamanho-s);
}
.fw-icone[data-tamanho='m'] {
  width: var(--icone-tamanho-m);
  height: var(--icone-tamanho-m);
}
.fw-icone[data-tamanho='l'] {
  width: var(--icone-tamanho-l);
  height: var(--icone-tamanho-l);
}

/* ---------- etiqueta ---------- */
.fw-etiqueta {
  display: inline-block;
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-corpo);
}
.fw-etiqueta[data-tom='info'] {
  background: var(--cor-feedback-info-fundo);
  color: var(--cor-feedback-info);
}
.fw-etiqueta[data-tom='sucesso'] {
  background: var(--cor-feedback-sucesso-fundo);
  color: var(--cor-feedback-sucesso);
}
.fw-etiqueta[data-tom='atencao'] {
  background: var(--cor-feedback-atencao-fundo);
  color: var(--cor-feedback-atencao);
}
.fw-etiqueta[data-tom='erro'] {
  background: var(--cor-feedback-erro-fundo);
  color: var(--cor-feedback-erro);
}

/* ---------- botao ---------- */
.fw-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  padding-inline: var(--espaco-4);
  border: var(--fronteira-fina) solid transparent;
  border-radius: var(--raio-m);
  background: var(--cor-acao-base);
  color: var(--cor-acao-texto);
  cursor: pointer;
}
.fw-botao[data-variante='secundario'] {
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto-principal);
  border-color: var(--cor-fronteira-media);
}
.fw-botao[data-variante='texto'] {
  background: transparent;
  color: var(--cor-texto-principal);
  border-color: transparent;
  padding-inline: var(--espaco-2);
}
.fw-botao:hover:not(:disabled)[data-variante='secundario'],
.fw-botao:hover:not(:disabled)[data-variante='texto'] {
  background: var(--cor-estado-hover);
}
.fw-botao:disabled {
  background: var(--cor-acao-desativado);
  border-color: transparent;
  color: var(--cor-texto-inverso);
  cursor: not-allowed;
}
.fw-botao[data-variante='secundario']:disabled,
.fw-botao[data-variante='texto']:disabled {
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-tenue);
}

/* ---------- campo-texto ---------- */
.fw-campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}
.fw-campo-caixa {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-inline: var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto-tenue);
  min-width: 0;
}
.fw-campo-caixa:focus-within {
  border-color: var(--cor-fronteira-forte);
}
.fw-campo-entrada {
  border: 0;
  background: transparent;
  color: var(--cor-texto-principal);
  outline: none;
  min-width: 0;
  width: 100%;
}
.fw-campo-entrada::placeholder {
  color: var(--cor-texto-tenue);
}
.fw-campo[data-erro='sim'] .fw-campo-caixa {
  border-color: var(--cor-feedback-erro);
}
.fw-campo textarea.fw-campo-entrada {
  padding-block: var(--espaco-2);
  resize: vertical;
}

/* ---------- selecao ----------
   UM só slot flexível: o valor. O chevron abraça. É assim que
   SELECT_VALUE_WRAP = FORBIDDEN é cumprido por construção. */
.fw-selecao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}
.fw-selecao-caixa {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-inline: var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto-principal);
  cursor: pointer;
  text-align: start;
  min-width: 0;
}
.fw-selecao-caixa:hover:not(:disabled) {
  background: var(--cor-estado-hover);
}
.fw-selecao-caixa:disabled {
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-tenue);
  cursor: not-allowed;
}
.fw-selecao-lista {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  z-index: 10;
  margin: var(--espaco-1) 0 0;
  padding: var(--espaco-1);
  list-style: none;
  min-width: 100%;
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--elevacao-popover);
}
.fw-opcao {
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-s);
  cursor: pointer;
}
.fw-opcao:hover,
.fw-opcao[data-ativo='sim'] {
  background: var(--cor-estado-hover);
}
.fw-opcao[aria-selected='true'] {
  background: var(--cor-estado-selecionado-fundo);
  color: var(--cor-estado-selecionado-marca);
}

/* ---------- card ---------- */
.fw-card {
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  overflow: hidden;
}
.fw-card:hover {
  background: var(--cor-estado-hover);
  border-color: var(--cor-fronteira-forte);
}
.fw-card-ligacao {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* Média 16:9 exata — D-54. A proporção é contrato; a altura não se escreve. */
.fw-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cor-fronteira-subtil);
}
.fw-card-media > .fw-etiqueta {
  position: absolute;
  inset-block-start: var(--espaco-2);
  inset-inline-start: var(--espaco-2);
}
.fw-card-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
}
.fw-card-valor {
  color: var(--cor-texto-principal);
}
.fw-card-sufixo {
  color: var(--cor-texto-secundario);
}
.fw-card-meta {
  color: var(--cor-texto-secundario);
}
.fw-card[data-indisponivel='sim'] .fw-card-media {
  background: var(--cor-superficie-subtil);
}
.fw-card[data-indisponivel='sim'] .fw-card-valor,
.fw-card[data-indisponivel='sim'] h3 {
  color: var(--cor-texto-tenue);
}

/* ---------- paginacao ---------- */
.fw-paginacao {
  gap: var(--espaco-1);
  justify-content: center;
}
.fw-paginacao-celula {
  min-width: var(--altura-controlo-l);
  padding-inline: var(--espaco-2);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto-principal);
  cursor: pointer;
}
.fw-paginacao-celula:hover:not(:disabled) {
  background: var(--cor-estado-hover);
}
.fw-paginacao-celula[aria-current='page'] {
  background: var(--cor-superficie-inversa);
  border-color: var(--cor-superficie-inversa);
  color: var(--cor-texto-inverso);
  cursor: default;
}
.fw-paginacao-celula:disabled:not([aria-current='page']) {
  color: var(--cor-texto-tenue);
  cursor: not-allowed;
}
.fw-paginacao[data-unica='sim'] {
  display: none;
}

/* ---------- barra-publica ---------- */
.fw-barra {
  border-block-end: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  background: var(--cor-superficie-elevada);
}
.fw-barra-dentro {
  min-height: var(--altura-controlo-l);
  gap: var(--espaco-5);
  padding-block: var(--espaco-2);
}
.fw-barra-marca {
  color: var(--cor-texto-principal);
  text-decoration: none;
  flex: 0 0 auto;
}
.fw-barra-nav {
  gap: var(--intervalo-navegacao);
  flex: 1 1 auto;
  min-width: 0;
}
.fw-item-nav {
  color: var(--cor-texto-secundario);
  text-decoration: none;
}
.fw-item-nav:hover {
  color: var(--cor-texto-principal);
}
.fw-item-nav[aria-current='page'] {
  color: var(--cor-texto-principal);
}

/* ---------- seletor-mercado ---------- */
.fw-mercado {
  position: relative;
}
.fw-mercado-indicador {
  gap: var(--espaco-intra);
  padding-inline: var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto-principal);
  cursor: pointer;
}
.fw-mercado-indicador:hover {
  background: var(--cor-estado-hover);
}
.fw-mercado-ponto {
  width: var(--espaco-2);
  height: var(--espaco-2);
  border-radius: var(--raio-s);
  background: var(--cor-feedback-sucesso);
  flex: 0 0 auto;
}
.fw-mercado[data-determinado='nao'] .fw-mercado-ponto {
  background: var(--cor-fronteira-media);
}
.fw-mercado-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  z-index: 10;
  margin: var(--espaco-1) 0 0;
  padding: var(--espaco-1);
  list-style: none;
  min-width: 100%;
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--elevacao-popover);
}
.fw-mercado-item {
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-s);
  cursor: pointer;
  white-space: nowrap;
}
.fw-mercado-item:hover {
  background: var(--cor-estado-hover);
}
.fw-mercado-item[data-selecionado='sim'] {
  background: var(--cor-estado-selecionado-fundo);
  color: var(--cor-estado-selecionado-marca);
}
.fw-mercado-item[data-disponivel='nao'] {
  color: var(--cor-texto-tenue);
  cursor: not-allowed;
}

/* ---------- estado-vazio ---------- */
.fw-estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-6) var(--espaco-4);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  text-align: center;
}
.fw-estado-vazio-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--espaco-7);
  block-size: var(--espaco-7);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-tenue);
}
.fw-estado-vazio-explicacao {
  color: var(--cor-texto-secundario);
  max-inline-size: var(--fw-medida-texto);
}
.fw-estado-vazio-acoes {
  justify-content: center;
}

/* ---------- estado-carregamento ---------- */
.fw-carregamento-barras {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  inline-size: 100%;
}
.fw-carregamento-barra {
  block-size: var(--espaco-3);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-subtil);
}
.fw-carregamento[data-modo='bloco'] {
  padding: var(--espaco-4);
}
.fw-carregamento[data-modo='cartao'] {
  padding: var(--espaco-4);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
}
.fw-carregamento[data-modo='cartao'] .fw-carregamento-barra:first-child {
  block-size: var(--espaco-8);
}

/* ---------- aviso ---------- */
.fw-aviso {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-3) var(--espaco-4);
  border: var(--fronteira-fina) solid currentcolor;
  border-radius: var(--raio-m);
}
.fw-aviso[data-tom='info'] {
  background: var(--cor-feedback-info-fundo);
  color: var(--cor-feedback-info);
}
.fw-aviso[data-tom='sucesso'] {
  background: var(--cor-feedback-sucesso-fundo);
  color: var(--cor-feedback-sucesso);
}
.fw-aviso[data-tom='atencao'] {
  background: var(--cor-feedback-atencao-fundo);
  color: var(--cor-feedback-atencao);
}
.fw-aviso[data-tom='erro'] {
  background: var(--cor-feedback-erro-fundo);
  color: var(--cor-feedback-erro);
}
.fw-aviso-acao {
  margin-block-start: var(--espaco-2);
}

/* ---------- galeria ---------- */
.fw-galeria {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}
.fw-galeria-principal {
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-m);
  background: var(--cor-superficie-subtil);
  overflow: hidden;
}
.fw-galeria-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.fw-galeria-mensagem {
  padding: var(--espaco-4);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  color: var(--cor-texto-secundario);
  text-align: center;
}
.fw-galeria-miniaturas {
  display: flex;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.fw-galeria-miniatura {
  padding: 0;
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-subtil);
  cursor: pointer;
  inline-size: var(--fw-miniatura);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.fw-galeria-miniatura img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.fw-galeria-miniatura[aria-current='true'] {
  border-color: var(--cor-fronteira-forte);
  border-width: var(--fronteira-anel);
}

/* ---------- grupo-opcoes ---------- */
.fw-grupo {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}
.fw-grupo legend {
  padding: 0;
  color: var(--cor-texto-secundario);
}
.fw-grupo-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}
.fw-grupo-opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-elevada);
  cursor: pointer;
}
.fw-grupo-opcao:has(input:checked) {
  background: var(--cor-estado-selecionado-fundo);
  border-color: var(--cor-fronteira-forte);
}
.fw-grupo-opcao:has(input:disabled) {
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-tenue);
  cursor: not-allowed;
}
.fw-grupo[data-erro='sim'] .fw-grupo-opcao {
  border-color: var(--cor-feedback-erro);
}

/* ---------- tabela-dados ---------- */
.fw-tabela-moldura {
  overflow-x: auto;
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
}
.fw-tabela {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}
.fw-tabela th,
.fw-tabela td {
  padding: var(--espaco-2) var(--espaco-3);
  border-block-end: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  text-align: start;
  vertical-align: middle;
}
.fw-tabela th {
  color: var(--cor-texto-secundario);
  background: var(--cor-superficie-subtil);
}
.fw-tabela tbody tr:hover {
  background: var(--cor-estado-hover);
}
.fw-tabela-ordenar {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: start;
}
.fw-tabela-vazia {
  padding: var(--espaco-4);
  color: var(--cor-texto-secundario);
  text-align: center;
}

/* ---------- campo-ficheiro ---------- */
.fw-ficheiro {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}
.fw-ficheiro-entrada {
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-m);
  background: var(--cor-superficie-elevada);
  min-height: var(--altura-controlo-l);
}
.fw-ficheiro-limites {
  color: var(--cor-texto-secundario);
}
.fw-ficheiro-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fw-ficheiro-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-s);
}
.fw-ficheiro-remover {
  border: 0;
  background: none;
  padding: 0;
  color: var(--cor-feedback-erro);
  cursor: pointer;
}

/* ---------- lista-ordenavel ---------- */
.fw-ordenavel {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fw-ordenavel-item {
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-elevada);
}
.fw-ordenavel-posicao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--espaco-5);
  block-size: var(--espaco-5);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-secundario);
  flex: 0 0 auto;
}
.fw-ordenavel-detalhe {
  color: var(--cor-texto-secundario);
  flex: 0 0 auto;
}
.fw-ordenavel-mover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--altura-controlo-s);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-s);
  background: var(--cor-superficie-elevada);
  cursor: pointer;
  flex: 0 0 auto;
}
.fw-ordenavel-mover:hover:not(:disabled) {
  background: var(--cor-estado-hover);
}
.fw-ordenavel-mover:disabled {
  background: var(--cor-superficie-subtil);
  color: var(--cor-texto-tenue);
  cursor: not-allowed;
}
/* O glifo do chevron aponta para baixo; para cima roda-se. */
.fw-ordenavel-mover[data-direcao='cima'] .fw-icone {
  transform: rotate(180deg);
}

/* ---- src/css/produto.css */
/* CSS do Site Público de 2.1 — a COMPOSIÇÃO.
 *
 * O que está aqui e o que não está:
 *   · aqui: ritmo de página, a composição `descoberta`, as duas colunas do detalhe,
 *     o rodapé legal e o aviso de privacidade (os dois de `GAP-157`)
 *   · não aqui: nada que o framework já desenhe. Os componentes trazem o seu CSS, e
 *     repintá-los seria a divergência que `H1` declara
 *
 * ZERO LITERAIS DE DESIGN **NAS REGRAS**. Cada cor, espaço, raio e tamanho de tipo que
 * uma regra aplica vem de um token — da Fundação, ou da identidade provisória declarada
 * em `:root`. O `stylelint` recusa um literal nestas propriedades, e é *check*
 * obrigatório — não convenção.
 *
 * A EXCEPÇÃO, DECLARADA EM VOZ ALTA: desde `FORM-01-R2` §1 existe **um** bloco com
 * valores hexadecimais, e é a definição da identidade provisória em `:root`. O mandato
 * pede-a «através de tokens locais e facilmente substituíveis», e um token tem de ser
 * definido algures. **Nenhuma regra abaixo escreve um azul**: todas consomem os seis
 * papéis — `--pr-marca`, `--pr-tinta-marca`, … —, pelo que trocar a identidade é trocar
 * esse bloco e nada mais. `Q-12` continua aberta e isto não a resolve.
 *
 * As grandezas que NÃO são tokens — largura de medida de texto, largura da coluna do
 * painel — ficam nomeadas num só sítio, em `rem`, e declaradas como grandezas de
 * composição do produto. A Fundação não as declara, e inventá-las como token seria criar
 * autoridade que não existe. É a mesma decisão que `layout.css` do framework tomou para
 * `--fw-medida-texto`.
 */

/* ================================================================ FORM-01-R2 §1
 *
 * O TIPO DE LETRA, SERVIDO DA PRÓPRIA ORIGEM.
 *
 * A Fundação **já declara Inter**: `css/base.css` do framework escreve
 * `font-family: var(--tipo-familia, Inter), system-ui, …`. O ficheiro nunca foi
 * fornecido, pelo que todas as páginas caíam silenciosamente para `system-ui` — e
 * renderizavam diferente em cada sistema operativo. Fornecê-lo **cumpre a intenção
 * declarada da Fundação**, e torna a página determinística entre Windows, Linux e a CI.
 *
 * `font-src 'self'` na CSP da publicação: um `@font-face` a apontar para fora seria
 * bloqueado e a queda seria silenciosa. Auto-alojar não exige alteração nenhuma à
 * política nem à infraestrutura, que `FORM-01-R2` §8 proíbe.
 *
 * `unicode-range` separa os dois subconjuntos: o `latin-ext` de 85 kB só é descarregado
 * quando a página mostra um carácter que o exija. Licença e proveniência em
 * `PROVENIENCIA_VISUAL.md`.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/inter-variavel-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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fontes/inter-variavel-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ======================================================== ESCALA ÚNICA — Parte 0.5
   * `ESPEC_HARMONIZACAO_VISUAL.md` §1, ADR-085. Todo o site usa ESTES valores, e
   * `tools/verificar-escala.mjs` recusa um tamanho, raio, sombra ou cinzento que não
   * resolva para um deles.
   *
   *   texto      12 (só rótulos em maiúsculas por CSS) · 14 · 15 · 16 · 18 · 20 · 24 · 34
   *              (o h1 é 28 no telemóvel). Mínimo 14 em texto corrido e ligações.
   *   controlos  44 (cabeçalho, ordenação, secundários) · 48 (pesquisa, acção principal)
   *   raios      10 controlos e botões · 14 cartões · 18 blocos e painéis
   *   neutros    um fundo de página e um cinzento de superfície
   *   sombras    dois níveis: cartão e bloco elevado
   *   ícones     16 · 20 · 24
   *
   * A ESCALA VIVE NO PRODUTO, e não no framework (fixo em v0.2.0): os tokens da Fundação
   * que ela contraria são redefinidos aqui. ADR-085 fixa quando sobe ao framework. */
  --esc-t-12: 0.75rem;
  --esc-t-14: 0.875rem;
  --esc-t-15: 0.9375rem;
  --esc-t-16: 1rem;
  --esc-t-18: 1.125rem;
  --esc-t-20: 1.25rem;
  --esc-t-24: 1.5rem;
  --esc-t-28: 1.75rem;
  --esc-t-34: 2.125rem;
  --esc-controlo: 2.75rem;
  --esc-controlo-principal: 3rem;
  --esc-raio-controlo: 10px;
  --esc-raio-cartao: 14px;
  --esc-raio-bloco: 18px;
  --esc-fundo: #f7f9fc;
  --esc-superficie: #f1f4f8;
  --esc-branco: #fff;
  --esc-sombra-cartao: 0 1px 2px rgb(11 38 72 / 6%), 0 6px 16px -8px rgb(11 38 72 / 14%);
  --esc-sombra-elevada: 0 12px 32px -12px rgb(11 38 72 / 16%), 0 2px 6px -2px rgb(11 38 72 / 10%);
  --esc-icone-16: 1rem;
  --esc-icone-20: 1.25rem;
  --esc-icone-24: 1.5rem;

  /* A Fundação, redefinida pela escala (ADR-085). */
  --cor-superficie-base: var(--esc-fundo);
  --cor-superficie-elevada: var(--esc-branco);
  --cor-superficie-subtil: var(--esc-superficie);
  --cor-estado-hover: var(--esc-superficie);
  /* Usados sem estarem definidos (inventário de 21/10/2026): a superfície afundada dos
   * cartões legais e do `code`, e o título dos cartões «Outras ofertas». */
  --cor-superficie-afundada: var(--esc-superficie);
  --papel-titulo-cartao-tamanho: var(--esc-t-18);
  --papel-titulo-cartao-peso: 600;
  --raio-s: var(--esc-raio-controlo);
  --raio-m: var(--esc-raio-controlo);
  --raio-l: var(--esc-raio-cartao);
  --altura-controlo-s: var(--esc-controlo);
  --altura-controlo-l: var(--esc-controlo);
  --icone-tamanho-s: var(--esc-icone-16);
  --icone-tamanho-m: var(--esc-icone-20);
  --icone-tamanho-l: var(--esc-icone-24);
  --elevacao-popover: var(--esc-sombra-elevada);
  /* Os papéis da Fundação abaixo de 14 px passam a 14: ligações, ajudas, notas, rótulos de
   * campo e mensagens de erro são texto que se lê. Os 12 ficam para o rótulo em maiúsculas. */
  --papel-corpo-tamanho: var(--esc-t-14);
  --papel-corpo-enfase-tamanho: var(--esc-t-14);
  --papel-auxiliar-tamanho: var(--esc-t-14);
  --papel-auxiliar-enfase-tamanho: var(--esc-t-14);
  --papel-cabecalho-tabela-tamanho: var(--esc-t-14);
  --papel-mensagem-erro-tamanho: var(--esc-t-14);
  --papel-micro-rotulo-tamanho: var(--esc-t-14);
  --papel-micro-tamanho: var(--esc-t-14);
  --papel-micro-enfase-tamanho: var(--esc-t-14);
  --papel-etiqueta-tamanho: var(--esc-t-12);
  --papel-titulo-pagina-tamanho: var(--esc-t-24);
  --papel-titulo-secao-tamanho: var(--esc-t-15);

  --pr-medida: 42rem;
  --pr-painel: 22rem;
  --pr-filtro: 11.625rem;

  /* ---------------------------------------------------------------- FORM-01-R2 §1
   *
   * IDENTIDADE PROVISÓRIA. Tokens **locais do produto**, nesta folha e em mais sítio
   * nenhum.
   *
   * O QUE ISTO É E O QUE NÃO É. `Q-12` — titularidade e identidade visual — continua
   * **aberta**, e isto **não a resolve**: é uma direcção provisória, autorizada por
   * `FORM-01-R2` §1, para a página deixar de ser um esboço neutro enquanto a decisão não
   * existe. **Nenhum token da Fundação é alterado**, e nenhuma marca definitiva é
   * introduzida.
   *
   * SUBSTITUIR É MUDAR ESTE BLOCO. Todas as regras abaixo consomem estes nomes; nenhuma
   * escreve um azul. No dia em que houver identidade decidida, troca-se aqui.
   *
   * O azul-marinho é o papel PRINCIPAL — tipo, acções, ícones. As superfícies ficam
   * brancas e cinzentas claras, como §1 pede: um fundo escuro faria o formulário
   * competir com a moldura, e `FORM-01` §1 quer o formulário dominante.
   *
   * O destaque é um latão surdo, e é **discreto por construção**: entra em marcadores de
   * passo e no sublinhado da referência, nunca em superfície grande nem em texto longo. */
  --pr-marinho-900: #0a1b31;
  --pr-marinho-800: #102845;
  --pr-marinho-700: #1b3a63;
  --pr-marinho-600: #27507f;
  --pr-marinho-100: #e7eef7;
  --pr-marinho-050: #f4f7fc;
  /* MEDIDO, e não escolhido a olho: #9a6a28 dava 4,38:1 sobre a superfície tingida dos
   * cartões de apoio e falhava os 4,5 de WCAG 1.4.3 por duas centésimas — o axe apanhou-o
   * no estado de erro. Este dá 5,62 sobre o tingido, 6,03 sobre branco e 5,16 sobre o
   * suave, com margem nos três. */
  --pr-destaque: #855a20;
  --pr-destaque-050: #faf5ec;

  /* Os PAPÉIS, que é o que as regras usam. Trocar a identidade é trocar o que está à
   * direita destes seis nomes. */
  --pr-tinta-marca: var(--pr-marinho-900);
  --pr-marca: var(--pr-marinho-700);
  --pr-marca-forte: var(--pr-marinho-800);
  --pr-marca-suave: var(--pr-marinho-100);
  --pr-marca-tenue: var(--pr-marinho-050);
  --pr-acento: var(--pr-destaque);

  /* AS DUAS TINTAS DO RODAPÉ ESCURO — `DETALHE-02-R1` §2. Derivadas e não escolhidas:
   * são a superfície base da Fundação, inteira e misturada com o próprio fundo. Medidas
   * sobre `--pr-tinta-marca`: 15,1:1 a cheio e 8,5:1 a 72 %, ambas acima dos 4,5 de
   * WCAG 1.4.3 para texto normal — e o caso de contraste do rodapé mede-as no browser. */
  --pr-rodape-tinta: var(--cor-superficie-base);
  --pr-rodape-tinta-suave: color-mix(in srgb, var(--cor-superficie-base) 72%, var(--pr-tinta-marca));

  /* A FAMÍLIA. `base.css` da Fundação lê `var(--tipo-familia, Inter)`, e fixá-la aqui é
   * preencher a variável que ela própria declara — não a redefinir. */
  --tipo-familia: 'Inter';

  /* FORM-01. Grandezas de composição da página de pedido. Como as de cima, NÃO são
   * tokens: a Fundação não as declara, e inventá-las como token seria criar autoridade
   * que não existe. Ficam nomeadas e num só sítio.
   *
   * A proporção 65/35 de FORM-01 §2.1 está em `fr` e não em percentagem: com `gap`, as
   * percentagens somam mais de 100 % e a segunda coluna transbordava. */
  --pr-coluna-formulario: 65fr;
  --pr-coluna-contexto: 35fr;

  /* Faixa de altura moderada — §2.1: «não pode empurrar o formulário excessivamente
   * para baixo nem competir com ele pela atenção». 14rem em 900 de janela são ~16 %. */
  --pr-banner-altura: 14rem;
  --pr-banner-altura-movel: 8.5rem;

  /* O POPUP DO SELETOR NÃO PODE SER MAIS ALTO DO QUE A FOLGA QUE O COMPONENTE GARANTE.
   *
   * `seletor-pesquisavel` abre para baixo enquanto houver 200 px livres abaixo do
   * controlo (`_decidirDirecao`). Um popup de 18 rem mede 288 e, nessa condição, cabia
   * por ACASO — a folga real era quase sempre maior do que 288.
   *
   * O cabeçalho fixo acabou com o acaso. Com `scroll-padding-block-start`, um
   * `scrollIntoView` — o que o browser faz ao mover o foco por Tab para um campo abaixo
   * da dobra — deixa o controlo 72 px mais baixo do que antes. A folga passou a cair
   * dentro de [200, 288), o componente continuou a abrir para baixo, e o popup passou
   * 29 px abaixo do fundo da janela. Medido por `FORM-01` §4 a 320 × 640.
   *
   * 12 rem são 192, e com a goteira de 4 px dão 196 — abaixo dos 200 que o componente
   * exige para abrir para baixo. O limite deixa de depender da altura da janela para
   * ficar certo: passa a sair da mesma regra que decide a direcção. `50dvh` fica como
   * segundo termo, para janelas muito baixas; `dvh` e não `vh`, pela razão de CV-1.
   *
   * O CUSTO É REAL E ESTÁ AQUI: a lista mostra ~5 opções em vez de ~7, em todas as
   * larguras. A alternativa era mexer no limiar do componente de formulário, e o
   * mandato manda não lhe tocar. */
  --pr-popup-altura: min(12rem, 50dvh);

  /* A caixa do indicativo. Cabe `+999` com folga e não rouba largura ao número. */
  --pr-indicativo-largura: 7.5rem;

  /* O POPUP DO INDICATIVO É MAIS LARGO DO QUE A SUA CAIXA, e é por necessidade medida:
   * com `+1` partilhado por 25 territórios, a lista tem de mostrar o nome de cada um, e
   * em 7,5rem «Antígua e Barbuda» quebrava em duas linhas. `vw` no segundo termo é o que
   * impede o popup de passar a janela num ecrã estreito. */
  --pr-popup-indicativo: min(18rem, 72vw);

  /* Alvo de toque da caixa de verificação — WCAG 2.5.8 pede 24 × 24, e uma
   * `input[type=checkbox]` por omissão mede 13. */
  --pr-caixa-alvo: var(--esc-controlo);
  /* A caixa da própria marca de selecção (checkbox): não é alvo, é o desenho. */
  --pr-caixa-marcador: 1.5rem;

  /* ---------------------------------------------------------------- FORM-01-R3 §2 e §3
   *
   * O HERÓI. A faixa tem altura própria, e o cartão do formulário SOBE sobre ela: a
   * sobreposição é a medida que faz o banner e o formulário lerem-se como uma
   * composição, e não como duas secções empilhadas, que é o que §2 proíbe. */
  --pr-heroi-altura: 22rem;
  --pr-heroi-altura-movel: 15rem;

  /* ---------------------------------------------------------------- PRIV-01 §5 e §6
   *
   * A FAIXA DA PÁGINA LEGAL É MAIS BAIXA DO QUE A DO FORMULÁRIO, e o protótipo di-lo:
   * ali a faixa abre uma acção, aqui abre um documento para ler. A sobreposição desce
   * na mesma proporção — é um pousar, não o salto que o cartão do formulário dá. */
  --pr-heroi-altura-legal: 17rem;

  /* ---------------------------------------------------------------- CONS-01 §4
   *
   * A faixa da consultoria leva mais uma linha do que a da Política — a dos três
   * conceitos — e não leva cartão sobreposto. A zona de texto é mais larga porque o
   * título tem seis palavras e os conceitos vivem debaixo dele. */
  --pr-heroi-altura-cons: 21rem;

  /* ---------------------------------------------------------------- HOME-01 §4 e §8
   *
   * A faixa da inicial é a mais alta das quatro: é a primeira coisa que o visitante vê e
   * não leva migalha de pão, pelo que tem mais altura útil para o título. */
  /* A ALTURA DA FAIXA DA INICIAL ACOMPANHA A LARGURA — `HOME-01-RFINAL` §1.
   *
   * O protótipo tem a faixa a 0,318 da largura do conteúdo; a versão anterior,
   * com 20 rem fixos, dava 0,268 a 1280 px e, pior, a MESMA altura a 768 px, onde
   * a proporção do protótipo pediria bem menos. Uma medida relativa resolve as duas
   * pontas: 30vw é 0,32 da largura do conteúdo em qualquer ecrã, e o `min()` põe-lhe
   * um tecto para que um monitor largo não transforme a faixa num cartaz.
   *
   * Continua a ser MÍNIMO e não altura: o texto cresce e a faixa cresce com ele, que
   * é o que impede o corte a 320 px. */
  --pr-heroi-altura-home: min(30vw, 26rem);
  /* E A MEDIDA DO TEXTO PÁRA ANTES DA FOTOGRAFIA. Medido: com 50 rem o texto
   * acabava a 63% da largura da faixa, por cima do assunto da fotografia; o
   * protótipo pára perto dos 46%. Com 40 rem pára nos ~53%, que deixa a fotografia
   * respirar sem espremer o título em quatro linhas. */
  --pr-heroi-medida-home: 40rem;

  --pr-ordenar-largura: 13rem;

  /* ---- LAYOUT-GLOBAL-01 §2: o sistema global de largura.
   *
   * O CONTENTOR CONTINUA A SER O DA FUNDAÇÃO. `.fw-contentor` já existe, já é
   * consumido pelo cabeçalho, pelo rodapé e pelas páginas, e já lê `--pagina-util` e
   * `--pagina-margem`. O que o produto faz aqui é DAR VALORES a esses dois tokens —
   * como já dá a `--tipo-familia` —, não criar um segundo contentor.
   *
   * A ESCALA DE MARGENS É A DO MANDATO, medida e ajustada:
   *
   *   ≥ 80rem (1280)  →  32 px  (`espaco/6`)  · contentor total 1280, conteúdo 1216
   *   ≥ 48rem (768)   →  24 px  (`espaco/5`)
   *   < 48rem         →  16 px  (`espaco/4`)
   *
   * O mandato propõe 24 a 1024 e 20 a 768. 20 NÃO É UM TOKEN da escala de espaço — os
   * valores são 16, 24, 32 —, e inventar um só para esta tabela era abrir uma escala
   * paralela. 24 serve as duas larguras, e a diferença de 4 px a 768 não se vê.
   *
   * O TOTAL DE 1280 MANTÉM-SE porque é o que a composição aprovada usa; o que muda é a
   * repartição: 1216 de conteúdo e 32 de margem, em vez de 1200 e 40.
   */
  --pagina-util: 1216px;
  --pagina-margem: var(--espaco-4);

  /* As três colunas que dão largura total ao fundo e alinhamento ao conteúdo. É uma só
   * definição, lida pela página, pela faixa e por qualquer secção que precise das duas
   * coisas ao mesmo tempo. */
  --pr-colunas-pagina: [full-start] minmax(var(--pagina-margem), 1fr) [conteudo-start] minmax(0, var(--pagina-util))
    [conteudo-end] minmax(var(--pagina-margem), 1fr) [full-end];

  /* ---- O cabeçalho de duas linhas (Parte 0.5): 76 + 60 = 136 px; 64 no telemóvel. */
  --pr-cab-altura: 4.75rem;
  --pr-cab-altura-nav: 3.75rem;
  --pr-cab-altura-movel: 4rem;
  --pr-cab-menu-lado: 14px;
  /* O espaço reservado para Favoritos / Entrar / Criar conta (nada visível). */
  --pr-cab-reservado: 21rem;

  /* O QUE O CABEÇALHO OCUPA QUANDO ESTÁ COLADO AO TOPO — as duas camadas E AS LINHAS
   * QUE AS FECHAM. Somar só as duas alturas dava 124 onde o cabeçalho mede 126: cada
   * camada leva um `border-block-end` de `fronteira/fina`, e dois píxeis a menos na
   * compensação punham o alvo de uma âncora dois píxeis debaixo do cabeçalho. Medido.
   *
   * Em ecrã estreito a segunda camada sai, e o valor passa a ser o da primeira com a
   * linha dela — ver o bloco de `max-width` mais abaixo. */
  --pr-cab-altura-total: calc(var(--pr-cab-altura) + var(--pr-cab-altura-nav));
  --pr-cab-logo-altura: 2.5rem;
  --pr-cab-logo-movel: 1.6rem;
  --pr-cab-botao-altura: var(--esc-controlo);
  --pr-cab-painel-largura: 25rem;
  --pr-cab-miniatura: 3rem;

  /* A largura mínima de um cartão da grelha. É o que decide quantos cabem por linha:
   * 19rem dá três em 1280, dois em tablet e um em móvel, sem um único ponto de rutura
   * declarado para a grelha. */
  --pr-cartao-minimo: 19rem;
  --pr-heroi-medida-cons: 52rem;
  --pr-cons-titulo-tamanho: var(--esc-t-24);
  --pr-chevron: 0.5rem;

  /* A ZONA DE TEXTO É MAIS LARGA DO QUE A DA PÁGINA DO FORMULÁRIO, e é medida e não
   * gosto: «Política de Privacidade» a 40,8 px ocupa cerca de 460 px, e em 30rem menos
   * as goteiras sobravam 384 — o título partia em duas linhas e o subtítulo acabava por
   * baixo dos cartões. O protótipo põe o título numa linha só. */
  --pr-heroi-medida-legal: 38rem;
  --pr-sobreposicao-legal: calc(var(--pr-heroi-altura-legal) * 0.12);
  --pr-coluna-indice: 30fr;
  --pr-coluna-legal: 70fr;

  /* A MEDIDA DO TEXTO JURÍDICO. §5.2: «evitar linhas demasiado compridas». O cartão é
   * largo porque a composição o quer largo; o texto não acompanha, e para a 68 em vez
   * de atravessar os 95 caracteres que a largura do cartão permitiria. */
  --pr-medida-legal: 68ch;

  /* A SOBREPOSIÇÃO É UMA FRACÇÃO DA ALTURA DO HERÓI, e não um valor solto — `FORM-01-R5`
   * §1 proíbe «valores fixos que funcionem apenas a 1280 px». Antes eram 7rem ao lado de
   * 22rem, duas constantes que por acaso combinavam: quem baixasse o herói não via que
   * estava a aproximar o cartão do topo da fotografia, e a 15rem de móvel a mesma
   * sobreposição teria comido metade da faixa. Com a fracção declarada, a composição
   * mantém-se por construção e há uma só medida a afinar.
   *
   * 0,32 é o valor que estava em uso (7,04rem contra 7rem): isto fixa a relação que já
   * se tinha aprovado, não altera a composição. */
  --pr-fraccao-sobreposicao: 0.32;
  --pr-sobreposicao: calc(var(--pr-heroi-altura) * var(--pr-fraccao-sobreposicao));
  --pr-sobreposicao-movel: calc(var(--pr-heroi-altura-movel) * 0.167);

  /* A largura da zona de texto sobre a fotografia. Fica curta de propósito: o título
   * ocupa o terço esquerdo e a zona direita mantém o ambiente visível, como §2 pede. */
  /* A GOTEIRA QUE O TEXTO DA FAIXA DEIXOU DE TER, e que as medidas abaixo continuam a
   * incluir. Antes o texto era uma caixa com `padding: espaco/7` dos dois lados, e as
   * medidas eram da caixa; agora o alinhamento vem da coluna da grelha e a goteira saiu.
   * Sem descontar isto, o texto ficava 96 px mais largo e entrava na zona onde o véu já
   * abriu — medido na página de detalhe: subtítulo de 6,29 para 3,67 a 768 px.
   *
   * As medidas ficam como estavam porque é por elas que os véus contam as suas paragens;
   * o que muda é só a largura do TEXTO, que volta a ser a de antes. */
  --pr-heroi-goteira: var(--espaco-7);

  --pr-heroi-medida: 30rem;
  --pr-heroi-titulo-tamanho: var(--esc-t-34);

  /* ---------------------------------------------------------------- FORM-01-R1 §3
   *
   * A ESCALA TIPOGRÁFICA DA PÁGINA, e cada degrau é um token da Fundação ou um
   * múltiplo declarado de um. **Não há um único tamanho inventado.**
   *
   * Porque é preciso: a Fundação publica 17 papéis, e o maior é `papel/titulo-pagina`
   * a 24 px. Num ecrã de 1280 com faixa, duas colunas e um cartão elevado, 24 px não
   * sustenta a hierarquia — o título da página pesa o mesmo que o título de um cartão
   * de apoio. O múltiplo resolve-o sem criar um papel novo na Fundação, que exigiria
   * mandato próprio e publicação da biblioteca.
   *
   * Os restantes degraus **não multiplicam nada**: escolhem outro papel publicado,
   * que é a correcção certa quando o papel aplicado era simplesmente pequeno demais
   * para o lugar. */
  --pr-titulo-pagina-tamanho: var(--esc-t-34);
  --pr-lead-tamanho: var(--papel-valor-destacado-tamanho);
  --pr-titulo-cartao-tamanho: var(--esc-t-20);
  --pr-titulo-seccao-tamanho: var(--papel-titulo-ecra-tamanho);
  --pr-rotulo-tamanho: var(--papel-valor-tamanho);
  --pr-apoio-tamanho: var(--papel-corpo-tamanho);

  /* A sobrescrita, degrau mais pequeno da escala. `FORM-01-R2` §6 pede que a hierarquia
   * **não dependa só do peso**: este papel distingue-se por CAIXA ALTA e por
   * espacejamento, não por ser mais gordo. */
  --pr-sobrescrita-tamanho: var(--esc-t-12);
  --pr-sobrescrita-espaco: 0.09em;

  /* ---------------------------------------------------------------- FORM-01-R1 §4
   *
   * ELEVAÇÃO. A Fundação publica UMA sombra — `elevacao/popover` —, feita para um
   * painel que paira sobre a página. Aplicá-la a um cartão que assenta nela dá ao
   * cartão o peso de um menu aberto, e foi o que a primeira entrega fez.
   *
   * Estas duas derivam da cor de texto da Fundação por `color-mix`: **não há literal
   * de cor nenhum**, e por isso mudam com o tema sem uma segunda declaração. O
   * `popover` continua a ser o que os painéis dos seletores usam. */
  --pr-elevacao-cartao: var(--esc-sombra-cartao);

  /* A ELEVAÇÃO DO CARTÃO QUE SE SOBREPÕE À FOTOGRAFIA — `FORM-01-R5` §1.
   *
   * `--pr-elevacao-cartao` desce apenas, e é o que um cartão assente numa superfície
   * clara precisa. O cartão do formulário tem três arestas sobre a página e **uma sobre
   * a fotografia**, e nessa a sombra para baixo não chega: o limite superior ficava um
   * corte liso contra a imagem, que é o defeito que §1 manda corrigir em «transição
   * entre banner e cartão».
   *
   * A terceira camada sobe (`0 -3px …`) e é a única diferença. Continua a derivar da
   * cor de texto da Fundação por `color-mix`; não há literal de cor. */
  --pr-elevacao-sobreposta: var(--esc-sombra-elevada);

  /* O anel de foco DENTRO do cartão. O framework muda a cor da fronteira em
   * `:focus-within`, que é correcto e discreto de mais num campo sobre superfície
   * elevada. O anel acrescenta-se à fronteira; não a substitui. */
  --pr-anel-foco: 0 0 0 3px color-mix(in srgb, var(--pr-marca) 24%, transparent);

  /* O botão principal, proporcional ao formulário — `FORM-01-R1` §7. */
  --pr-altura-acao: var(--esc-controlo-principal);

  /* A ALTURA DOS TRÊS FILTROS E DO «LIMPAR» — `HOME-02` §3 pede altura uniforme na
   * segunda linha. É menor do que a da primeira de propósito: o layout aprovado dá
   * peso ao campo de pesquisa e ao botão, e os filtros são a linha de apoio. */
  --pr-altura-filtro: var(--altura-controlo-l);
  --pr-icone-caixa: 1.75rem;
  --pr-icone-caixa-grande: 2.5rem;

  /* Raio «completo» para pílulas. A Fundação publica s/m/l e nenhum é total; fica
   * nomeado aqui como grandeza de composição, não escrito dentro de uma regra. */
  --pr-raio-pilula: 99px;

  /* ---------------------------------------------------------------- DETALHE-01
   *
   * A ZONA DE TEXTO DA FAIXA DO DETALHE É MAIS LARGA DO QUE A DA CONSULTORIA, e é
   * medida. O título da consultoria é escrito no template e tem seis palavras; o
   * título de uma oferta vem da API e não se controla — «Candidatura e Matriculas —
   * Ensino Superior» ocupa cerca de 700 px à escala do `h1` da faixa, e em 52rem menos
   * as goteiras partia em três linhas, empurrando o subtítulo para fora da fotografia.
   *
   * AS VARIÁVEIS VIVEM AQUI E NÃO NUM `:root` PRÓPRIO no fim do ficheiro, e a razão é
   * uma regra de lint e não uma preferência: `no-duplicate-selectors` recusa um segundo
   * `:root`. O resto do bloco de `DETALHE-01` continua contíguo no fim do ficheiro, que
   * é o que mantém pequena a superfície de conflito com `HOME-01`. */
  --pr-heroi-medida-det: 46rem;

  /* A DISTÂNCIA EM QUE O VÉU ABRE DEPOIS DO TEXTO — `DETALHE-01-R4` §1.
   *
   * O véu fica denso até onde a caixa de texto pode chegar e abre a seguir;
   * esta é a rampa. Curta de mais e a transição vê-se como um corte; longa de mais e a
   * fotografia desaparece na janela estreita, onde o `min()` já satura. 12rem é a medida
   * que mantém a zona direita da fotografia visível a 1280 px — o que `CONS-01-R1` §1
   * chama «o que faz dela uma fotografia e não um fundo». */
  --pr-veu-abertura: 12rem;

  /* A MEDIDA DO CARTÃO DO FORMULÁRIO QUANDO ELE FICA SOZINHO NA LINHA — `DETALHE-02`.
   *
   * Sem testemunhos a grelha passa a uma coluna, e um cartão de formulário a atravessar
   * 1200 px põe o rótulo de um campo a um palmo do próprio campo. 42rem é a largura que
   * o cartão já tem na coluna da direita a 1280 px, medida: mantém-se a composição e o
   * cartão deixa de crescer com a janela. */
  --pr-det-formulario-medida: 42rem;

  /* ================================================== FRONT-FIDELIDADE-01
   * Os tokens da maqueta aprovada da página de serviços
   * (`ESPEC_FRONT_FIDELIDADE_MAQUETA.md` §1). Medidos na maqueta a 1024 px; os quatro
   * marcados AJUSTADO cumprem WCAG 2.2 AA (§3, aprovados a 20/10/2026). Aplicam-se no
   * `main` das páginas que usam os componentes `rv-*`: o cabeçalho e o rodapé não
   * mudam nesta fase. */

  /* cor */
  --rv-marinho-950: #04264d;
  --rv-marinho-900: #0b2648;
  --rv-marinho-800: #062f5e;
  --rv-marinho-700: #083c76;
  --rv-azul-100: #d6e8fa;
  --rv-azul-050: #edf5fd;
  --rv-fundo: var(--esc-fundo);
  --rv-superficie: var(--esc-branco);
  --rv-texto: #5d6a7b;
  --rv-texto-auxiliar: #5d6a7b; /* AJUSTADO: contagem #6e7681 → 5,22:1 */
  --rv-texto-controlo: #3c4554;
  --rv-pista: #6b7480; /* AJUSTADO: #787e87 → 4,74:1 */
  --rv-borda-campo: #7e8ca0; /* AJUSTADO: #ccd8e8 → 3,42:1 / 3,10:1 (1.4.11) */
  --rv-borda-cartao: #e3e8ef;
  --rv-desativado-texto: #6b7480;
  /* Filtros desativados (revisão do proprietário, 20/10/2026): texto, ícone e seta a
   * ~3:1 — 3,26:1 sobre branco, 3,02:1 sobre --rv-filtro-desativado-fundo —, legíveis mas
   * claramente desativados: fundo cinzento claro e contorno mais suave que o ativo. */
  --rv-filtro-desativado: #878f9b;
  --rv-filtro-desativado-fundo: var(--esc-superficie);
  --rv-filtro-desativado-borda: #c5cdd8;
  --rv-sombra-cor: rgb(11 38 72 / 6%);
  --rv-sombra-cor-forte: rgb(11 38 72 / 14%);
  --rv-sombra-cor-painel: rgb(11 38 72 / 10%);
  --rv-sombra-cor-bloco: rgb(11 38 72 / 16%);

  /* tipografia (Inter, já alojada) */
  --rv-t-titulo-topo: var(--esc-t-28);
  --rv-t-texto-topo: var(--esc-t-16);
  --rv-t-titulo-seccao: var(--esc-t-24);
  --rv-t-controlo: var(--esc-t-15);
  --rv-t-botao: var(--esc-t-15);
  --rv-t-auxiliar: var(--esc-t-14);
  --rv-t-cartao-titulo: var(--esc-t-18);
  --rv-t-cartao-texto: var(--esc-t-15);
  --rv-t-faixa-titulo: var(--esc-t-20);
  --rv-t-faixa-texto: var(--esc-t-15);

  /* espaço e forma (a 1024 px) */
  --rv-topo-titulo-medida: 50rem;
  --rv-controlo-altura: var(--esc-controlo-principal);
  --rv-filtro-altura: var(--esc-controlo);
  --rv-controlo-raio: var(--esc-raio-controlo);
  --rv-cartao-raio: var(--esc-raio-cartao);
  --rv-faixa-raio: var(--esc-raio-bloco);
  --rv-grelha-intervalo: 1.125rem;
  --rv-cartao-minimo: 17rem;
  --rv-emblema: 3.375rem;
  --rv-emblema-glifo: var(--esc-icone-24);
  --rv-icone-faixa: 4.375rem;
  --rv-icone-faixa-glifo: var(--esc-icone-24);
  --rv-glifo-controlo: var(--esc-icone-20);
  --rv-alvo-movel: 2.75rem;
  --rv-botao-preench: 3rem;
  --rv-botao-faixa-preench: 1.75rem;
  --rv-ordenar-largura: 10rem;
  /* A altura do cabeçalho (Parte 0.5): 64 px < 48rem, 136 px acima. Já não é reserva de um
   * cabeçalho montado por JavaScript: é a altura do HTML gerado, usada na conta da
   * fotografia do topo. */
  --pr-cab-reserva: var(--pr-cab-altura-movel);
  /* Topo v2 (ESPEC §7.1): a fotografia a toda a largura e o bloco branco sobre ela. */
  --rv-foto-min: 420px;
  --rv-foto-max: 620px;
  --rv-foto-enquadramento: 32% 40%;
  /* Metade da altura medida do bloco (292 px a ≥ 64rem), mais folga. A primeira dobra é
   * testada a 1024×768, 1366×768, 1440×900 e 1920×1080. */
  --rv-bloco-meia: 10rem;
  --rv-bloco-raio: var(--esc-raio-bloco);
  --rv-bloco-preench: 2rem;
  --rv-bloco-sobreposicao-movel: 2.5rem;
  --rv-traco: 1px;
  --rv-anel: 2px;
  --rv-movimento: 150ms ease-out;
}

/* ---------------------------------------------------------------- CV-1
 * Contrato de viewport, `Q-38 = OPÇÃO 1`: cabeçalho · conteúdo flexível · rodapé no
 * limite inferior, com altura mínima de janela.
 *
 * `CV-4` deixa a técnica a Engineering, e a escolhida é esta. `100dvh` e não `100vh`
 * porque em móvel a barra do navegador muda a altura da janela, e `100vh` produz um
 * salto de layout quando ela aparece ou desaparece. O `main` cresce; o rodapé assenta.
 *
 * `CV-3` tem consequência aqui: a proporção medida em `PC-9` — «o rodapé ocuparia um
 * terço da página» — é artefacto da representação de altura de documento no Figma. Numa
 * página curta, num navegador, a página tem a altura da janela. É esse o comportamento
 * que isto produz, e é por isso que o contrato existe.
 */
/* AS ÂNCORAS PARAM ABAIXO DO CABEÇALHO — §3.
 *
 * Com o cabeçalho colado ao topo, um `#id` levava o alvo para debaixo dele: o salto
 * para o conteúdo, o índice da Política e qualquer título ligado ficavam escondidos.
 * `scroll-padding` no elemento que rola resolve-o para TODAS as âncoras de uma vez,
 * incluindo as que o browser escolhe sozinho ao mover o foco. */
html {
  scroll-padding-block-start: var(--pr-cab-altura-total);
}

.pr-corpo {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.pr-corpo > main {
  flex: 1 0 auto;
}

/* Salto para o conteúdo: invisível até receber foco, e aí visível de verdade. */
.pr-salto:focus-visible {
  position: fixed;
  inset-inline-start: var(--espaco-4);
  inset-block-start: var(--espaco-4);
  z-index: 40;
  /* `clip-path` E NÃO SÓ `clip`: `.fw-apenas-leitor` da Fundação esconde com
   * `clip-path: inset(50%)`, e esta regra reiniciava apenas o `clip` herdado do
   * método antigo. Resultado medido: o salto recebia foco, ganhava caixa de 179 × 41,
   * e continuava INVISÍVEL — `elementFromPoint` no centro dele devolvia o logótipo do
   * cabeçalho. Defeito anterior a `LAYOUT-GLOBAL-01`, encontrado ao verificar §3. */
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  padding: var(--espaco-2) var(--espaco-3);
  background-color: var(--cor-superficie-elevada);
  border: var(--fronteira-anel) solid var(--cor-fronteira-forte);
  border-radius: var(--raio-s);
  color: var(--cor-texto-principal);
}

/* ---------------------------------------------------------------- ritmo de página */

/* A GRELHA DE LARGURA TOTAL — `LAYOUT-GLOBAL-01` §2 e §5.
 *
 * Três colunas: duas margens que encolhem e uma coluna de conteúdo com a largura útil.
 * Por omissão TODO o filho assenta na coluna do meio — é o alinhamento comum que §12
 * exige entre cabeçalho, faixa, corpo e rodapé. Quem quiser o fundo de margem a margem
 * pede `full`, e só isso.
 *
 * É esta a alternativa ao truque de `100vw` com margem negativa: `100vw` inclui a
 * barra de deslocamento e produz transbordo horizontal — que é precisamente o que §8
 * proíbe medir. Aqui não há `vw` nenhum. */
.pr-largura {
  display: grid;
  grid-template-columns: var(--pr-colunas-pagina);
}

.pr-largura > * {
  grid-column: conteudo;
}

.pr-largura > .pr-largura-total {
  grid-column: full;
}

/* SEM ESPAÇO ENTRE O CABEÇALHO E A FAIXA — `LAYOUT-GLOBAL-01` §4. A goteira de topo da
 * página existe para as páginas que começam em texto; numa que começa pela faixa, ela
 * era uma tira branca entre as duas. `:has` deixa a regra viver no sítio certo — a
 * página — em vez de obrigar cada template a declarar uma variante.
 *
 * `CONSULTA-02` §2 ACRESCENTOU `.pr-pagina-pedido` À REGRA, e não uma segunda regra: §2
 * repete a exigência — «sem espaço entre ela e o cabeçalho sticky» — para a página de
 * consulta, que passou a usar a grelha da página de pedido. Medido antes de a
 * acrescentar: 24 px a 1440/1280/1024/768 e 16 px a 375/320.
 *
 * A PÁGINA DE PEDIDO NÃO MUDA, e é o `:first-child` que o garante: lá o primeiro filho
 * são as migalhas, não a faixa, pelo que o selector não a encontra. */
.pr-pagina:has(> .pr-heroi:first-child),
.pr-pagina-pedido:has(> .pr-heroi:first-child) {
  padding-block-start: 0;
}

.pr-pagina {
  padding-block: var(--espaco-6) var(--espaco-8);
  display: grid;
  grid-template-columns: var(--pr-colunas-pagina);
  /* AS LINHAS NÃO ESTICAM (Parte 0.5). O `main` cresce para encher a janela (CV-1), e
   * uma grelha com `align-content: stretch` repartia essa folga pelas linhas — a trilha
   * chegava a 182 px —, e encolhia tudo quando o rodapé aparecia: CLS 0,05, medido. */
  align-content: start;
  row-gap: var(--espaco-6);
}

.pr-pagina > * {
  grid-column: conteudo;
}

.pr-cabecalho-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.pr-secundario {
  color: var(--cor-texto-secundario);
}

/* Medida de leitura: um parágrafo que atravesse 1200 px é ilegível, e limitar a medida
 * é a correcção, não reduzir o tamanho do tipo. */
.pr-medida {
  max-width: var(--pr-medida);
}

.pr-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* AS SAIDAS DAS PAGINAS DE ERRO — `OFERTA-08`.
 *
 * Uma lista sem marcadores, com o espaco dos tokens. Nao e uma lista de navegacao: a
 * navegacao vem da barra do framework, e estas sao as duas saidas que a pagina da **em
 * HTML** para que quem chegue sem JavaScript nao fique num beco.
 *
 * `list-style: none` com `<li>` mantem a semantica de lista para quem usa leitor de ecra
 * — tirar o `<ul>` seria mais simples e perderia a contagem anunciada. */
/* O no do aviso de versao — L4, `OFERTA-10`.
 *
 * Vazio nao ocupa espaco: sem `:empty` o contentor deixava uma goteira vertical em todas
 * as paginas sem versao nova, que sao quase todas. Com conteudo, separa-se do que vem
 * abaixo com o espaco dos tokens. */
.pr-versao:not(:empty) {
  padding-block-start: var(--espaco-4);
}

.pr-saidas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-divisor {
  margin: 0;
  border: 0;
  border-block-start: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
}

.pr-contexto {
  justify-content: space-between;
}

/* ---------------------------------------------------------------- migalhas */

.pr-migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  color: var(--cor-texto-secundario);
}

.pr-migalhas a {
  color: var(--cor-texto-secundario);
}

.pr-migalhas [aria-current='page'] {
  color: var(--pr-tinta-marca);
  font-weight: var(--papel-auxiliar-enfase-peso);
}

/* ---------------------------------------------------------------- descoberta
 * `PATTERN` do produto, por `D-E08`. A linha tem quatro intenções de dimensionamento:
 * a busca em `FILL`, os três filtros em largura própria, e o botão em `HUG`.
 *
 * Os filtros usam `flex-basis` e não largura fixa: `FIXED` onde o contentor é fluido
 * **produz recorte**, e foi a causa de `L-105` e `L-108`. Aqui encolhem antes de
 * transbordar, e o valor dentro de cada um trunca em vez de quebrar — que é o
 * invariante `SELECT_VALUE_WRAP = FORBIDDEN` que o contrato `selecao` cumpre.
 */
.pr-descoberta-linha {
  align-items: flex-end;
  gap: var(--espaco-3);
}

.pr-filtro {
  flex: 0 1 var(--pr-filtro);
  min-width: 0;
}

/* Um filtro sem valores disponíveis não é apresentado — `R-2.1-12`. O JavaScript
 * esconde-o com `hidden`, e `base.css` do framework garante que `hidden` esconde
 * mesmo, inclusive em elementos com `display` explícito. */

/* ---------------------------------------------------------------- detalhe */

.pr-detalhe-colunas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espaco-6);
}

.pr-detalhe-media {
  flex: 1 1 0;
  min-width: 0;
}

.pr-detalhe-painel {
  flex: 0 1 var(--pr-painel);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.pr-detalhe-descricao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

/* Lista de atributos. `R-2.1-08`: um atributo por preencher não gera linha — a
 * condição está no template, e aqui só se desenha o que existir. */
.pr-atributos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0;
}

.pr-atributos dt {
  color: var(--cor-texto-secundario);
}

.pr-atributos dd {
  margin: 0;
  color: var(--cor-texto-principal);
}

/* ---------------------------------------------------------------- formulário */

/* A MEDIDA DEIXOU DE ESTAR AQUI, e a razão é FORM-01 §1: «o formulário deve ser o
 * elemento visual e funcional dominante da página». O formulário vive dentro de
 * `.pr-cartao-formulario`, na coluna de 65 %, e é o CARTÃO que limita a largura. Manter
 * aqui 42rem fazia o formulário ficar mais estreito do que o cartão que o contém, com
 * uma goteira vazia à direita — o oposto de dominante. */
.pr-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
}

/* `display: flex` numa classe GANHA ao `display: none` que o navegador aplica a
 * `[hidden]`, porque a regra de autor vence a de agente de utilizador. Resultado: o
 * `hidden = true` que esconde o formulário depois da confirmação não escondia nada.
 *
 * Foi um teste de browser que o apanhou — em jsdom era invisível, porque não há
 * cascata. A regra tem de existir em todo o elemento a que se dê `display` numa classe
 * e que também se esconda por `hidden`, e é por isso que está escrita aqui e não
 * assumida. */
.pr-formulario[hidden],
.pr-filtro[hidden],
.pr-rodape-grupo[hidden],
.pr-aviso-ligacao[hidden] {
  display: none;
}

.pr-campos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* ================================================================ FORM-01
 *
 * A página «Solicitar mais informações». `ADR-078`.
 *
 * O QUE ESTA SECÇÃO FAZ, E O QUE DELIBERADAMENTE NÃO FAZ.
 *
 * Faz composição: a faixa, as duas colunas, o cartão do formulário, os cartões de
 * contexto, e os três controlos novos do produto — o combobox pesquisável, o grupo de
 * telefone e a caixa de «mesmo número».
 *
 * NÃO FAZ PALETA. Não há uma cor aqui que não venha de `tokens.css`, e isso tem uma
 * consequência que vale ser dita em voz alta: **a direção visual de `FORM-01` §2.4 pede
 * «azul-escuro», e a Fundação não tem azul de marca.** Tem `cor/feedback/info`, que é
 * azul e é SEMÂNTICA — usá-la como cor de marca seria dizer «informação» onde se quer
 * dizer «identidade», e seria introduzir uma segunda linguagem de cor que §2.4 proíbe
 * na mesma frase. A identidade visual está em `Q-12`, que continua aberta, e `ADR-078`
 * §4 registou o ponto. O que esta página faz é o premium que a Fundação permite hoje:
 * superfícies claras, `cor/superficie/inversa` nos acentos escuros, elevação de popover
 * medida, e hierarquia tipográfica dos 17 papéis publicados. Quando houver token de
 * marca, muda-se a variável e não o CSS.
 */

.pr-pagina-pedido {
  padding-block: var(--espaco-5) var(--espaco-8);
  display: grid;
  grid-template-columns: var(--pr-colunas-pagina);
  row-gap: var(--espaco-5);
}

.pr-pagina-pedido > * {
  grid-column: conteudo;
}

/* ---- a escala tipográfica da página — FORM-01-R1 §3
 *
 * Classes do produto, e não papéis novos da Fundação: cada uma toma um tamanho da
 * escala declarada acima e herda o resto — família, entrelinha — do que já estava. */

.pr-titulo-pagina {
  font-size: var(--pr-titulo-pagina-tamanho);
  font-weight: var(--papel-titulo-pagina-peso);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--pr-tinta-marca);
  margin: 0;
}

.pr-lead {
  font-size: var(--pr-lead-tamanho);
  font-weight: var(--papel-valor-peso);
  line-height: 1.55;
  margin: 0;
}

.pr-titulo-cartao {
  font-size: var(--pr-titulo-cartao-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
  letter-spacing: -0.012em;
  color: var(--pr-tinta-marca);
  margin: 0;
}

.pr-titulo-seccao {
  font-size: var(--pr-titulo-seccao-tamanho);
  font-weight: var(--papel-titulo-ecra-peso);
  letter-spacing: -0.005em;
  color: var(--pr-tinta-marca);
  margin: 0;
}

/* A SOBRESCRITA. Hierarquia por CAIXA e por espacejamento, e não por peso — §6 é
 * explícito em não depender só do peso. Serve para nomear a natureza de um bloco acima
 * do seu título, que é informação e não ornamento. */
.pr-sobrescrita {
  font-size: var(--pr-sobrescrita-tamanho);
  font-weight: var(--papel-auxiliar-enfase-peso);
  letter-spacing: var(--pr-sobrescrita-espaco);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
  margin: 0;
}

/* O terceiro nível de tinta. A Fundação publica `principal` e `secundario`; o
 * `tenue` existe para marcador de campo e perde contraste em texto corrido. Para a
 * referência e as notas de rodapé dos cartões usa-se `secundario` com menos peso
 * visual pelo tamanho, e não uma cor mais fraca — contraste não se gasta em hierarquia. */
.pr-terciario {
  color: var(--cor-texto-secundario);
}

/* ---- O HERÓI — `FORM-01-R3` §2
 *
 * Título e subtítulo SOBRE a fotografia, em cima e à esquerda. Sem caixa própria e sem
 * faixa de cor por baixo da imagem: §2 proíbe as duas, e o que garante a leitura é um
 * gradiente na zona esquerda da própria fotografia.
 *
 * `object-fit: cover` com altura fixa: a fotografia tem a proporção que tiver e a faixa
 * tem a altura declarada. `overflow: hidden` recorta a imagem, que é o comportamento
 * pretendido de uma faixa, e o `img` preenche a caixa exactamente — não há conteúdo a
 * transbordar a sua própria caixa. */
/* A FAIXA OCUPA A LARGURA DA JANELA, E O TEXTO DELA ASSENTA NA COLUNA DE CONTEÚDO —
 * `LAYOUT-GLOBAL-01` §4.
 *
 * A faixa é ela própria uma grelha com as MESMAS três colunas da página: a fotografia
 * atravessa de margem a margem, o texto fica na coluna do meio, e é por isso que o
 * título da faixa começa exactamente onde começa o logótipo do cabeçalho e o primeiro
 * cartão do corpo. Sem isto, alinhar seria repetir a margem à mão em cada faixa.
 *
 * SEM ARREDONDAMENTO: §4 é explícito — cantos exteriores rectos quando a faixa ocupa
 * toda a largura. O raio ficava a cortar a fotografia contra o nada. */
.pr-heroi {
  /* A MEDIDA PELA QUAL O VÉU SE MEDE — `LAYOUT-GLOBAL-01-R1` §2.
   *
   * É a medida de leitura da faixa, e não a largura do texto: a caixa de texto é a
   * medida menos a goteira que deixou de existir, pelo que isto dá ~96 px de folga
   * depois do fim do texto antes de o véu começar a abrir. Cada variante redeclara-a. */
  --pr-veu-medida: var(--pr-heroi-medida);

  position: relative;
  display: grid;
  grid-template-columns: var(--pr-colunas-pagina);

  /* A LINHA TEM DE TER ALTURA DEFINIDA para que uma ÁREA da grelha sirva de caixa a
   * quem se posiciona por `absolute` — é assim que o véu abaixo sabe onde acabar. Com a
   * linha implícita `auto`, a área media zero de altura e o véu desaparecia.
   *
   * Nas variantes que crescem com o texto (`-cons`, `-home`) a altura da faixa é
   * indefinida, e aí `100%` comporta-se como `auto` — a linha volta a ser do tamanho do
   * conteúdo, que é o que essas variantes querem. */
  grid-template-rows: 100%;
  height: var(--pr-heroi-altura);
  overflow: hidden;
  background-color: var(--pr-marca-suave);
  isolation: isolate;
}

.pr-pagina > .pr-heroi,
.pr-pagina-pedido > .pr-heroi {
  grid-column: full;
}

/* A fotografia atravessa as três colunas; o texto fica na do meio. Para o texto que é
 * ABSOLUTO — a faixa do pedido e a da Política —, a área da grelha passa a ser o bloco
 * que o contém, e o `inset-inline-start: 0` dele alinha com a coluna de conteúdo.
 *
 * A FOTOGRAFIA É `absolute` SOBRE A SUA ÁREA, e não um item no fluxo da grelha. Como
 * item, o `height: 100%` dela deixava de resolver contra a altura da faixa — a linha
 * implícita é `auto`, e o browser dimensiona a imagem pela proporção intrínseca antes
 * de esticar a linha. Medido a 768 px na página do pedido: 481 px de conteúdo numa caixa
 * de 352 com `overflow: hidden`, ou seja recorte material, apanhado por `FORM-01` §10.
 * Fora do fluxo, a faixa volta a mandar na altura e a imagem cobre o que lhe cabe. */
.pr-heroi > .pr-heroi-imagem {
  grid-area: 1 / full-start / 2 / full-end;
  position: absolute;
  inset: 0;
}

.pr-heroi > .pr-heroi-texto {
  grid-area: 1 / conteudo-start / 2 / conteudo-end;
}

.pr-heroi-imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* O GRADIENTE DE LEITURA. Escuro à esquerda, transparente à direita: é o que põe o
 * texto sobre a fotografia com contraste e **mantém o ambiente visível na zona
 * direita**, que é o que §2 pede expressamente.
 *
 * `color-mix` sobre o token de marca, e não um `rgba` literal: o véu segue a identidade
 * quando ela mudar. Decorativo, logo `pointer-events: none`. */
/* O VÉU É CLARO, E O TEXTO É ESCURO — `FORM-01-R4` §3.
 *
 * A primeira versão tinha um véu azul-escuro com texto branco. **O protótipo faz o
 * contrário**: o terço esquerdo da fotografia é lavado a branco e o título assenta nele
 * em azul-marinho, com o subtítulo em cinzento. A diferença não é de gosto — muda o
 * carácter da página de «fotografia dramática» para «página luminosa», que é o que a
 * referência mostra, e liga a faixa às superfícies claras do resto da composição.
 *
 * A paragem a 68 % é o que mantém o ambiente universitário visível na zona direita, que
 * §3 exige. Decorativo, logo `pointer-events: none`. */
/* A TIRA À ESQUERDA DO CONTEÚDO, LAVADA. O véu começa onde o texto começa; o que fica
 * à esquerda dele é margem, e sem este lavado mostrava a fotografia em cru — a faixa
 * lia-se partida em duas. A cor é a mesma com que o gradiente abre. */
.pr-heroi::before {
  content: '';
  grid-area: 1 / full-start / 2 / conteudo-start;
  position: absolute;
  inset: 0;

  /* ACIMA DA FOTOGRAFIA, E É PRECISO DIZÊ-LO. Um `::before` pinta ANTES dos filhos do
   * elemento, e a fotografia é um filho posicionado: sem esta camada, a tira ficava por
   * baixo dela e mostrava a fotografia em cru — visível a 1440 px, onde a tira tem
   * 112 px. O véu, que é `::after`, pinta depois dos filhos e não precisa disto. */
  z-index: 1;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--cor-superficie-base) 97%, transparent);
}

/* O VÉU CONTA A PARTIR DA COLUNA DE CONTEÚDO, e não da aresta da janela.
 *
 * O DEFEITO, MEDIDO. As paragens deste gradiente — e as da variante do detalhe, que são
 * comprimentos absolutos — contam-se da aresta esquerda da caixa onde é pintado.
 * Enquanto a faixa ERA a coluna de conteúdo, isso coincidia com o início do texto. Com a
 * faixa a ir de aresta a aresta, a aresta recuou 112 px a 1440, e o texto passou a
 * assentar numa zona onde o véu já tinha aberto. Pior píxel sob o texto da página de
 * detalhe, a 1440: título 12,13 → 3,03; subtítulo 6,29 → 1,39; migalhas 3,79 → 1,25.
 *
 * Pintado sobre a área `conteudo-start` → `full-end`, o véu recupera a relação que
 * tinha com o texto, e NENHUMA paragem dos quatro gradientes muda — o que muda é onde
 * começam a contar. */
.pr-heroi::after {
  content: '';
  grid-area: 1 / conteudo-start / 2 / full-end;
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* AS PARAGENS SÃO COMPRIMENTOS, E NÃO PERCENTAGENS — e é essa a correcção de R1 §2.
   *
   * Em percentagem, o véu abria sempre no mesmo sítio relativo à faixa, e o texto não:
   * a 1440 px a caixa de texto da consultoria ocupa 55 % da faixa e ficava coberta; a
   * 768 px ocupa 97 % e saía inteira da zona densa. Medido sobre os PÍXEIS DAS LETRAS,
   * o pior píxel sob o subtítulo da consultoria dava 1,0:1 a 768, 820 e 767 px.
   *
   * Com comprimentos, o véu está denso exactamente até onde a caixa de texto pode
   * chegar, e abre depois disso. Numa janela estreita a caixa é mais larga do que a
   * faixa, o `min()` satura, e a faixa inteira fica protegida — sem uma única `@media`
   * para isso. */
  background-image: linear-gradient(
    96deg,
    color-mix(in srgb, var(--cor-superficie-base) 97%, transparent) 0%,
    color-mix(in srgb, var(--cor-superficie-base) 93%, transparent) min(40%, calc(var(--pr-veu-medida) * 0.6)),
    color-mix(in srgb, var(--cor-superficie-base) 86%, transparent) min(92%, var(--pr-veu-medida)),
    color-mix(in srgb, var(--cor-superficie-base) 12%, transparent)
      min(100%, calc(var(--pr-veu-medida) + var(--pr-veu-abertura))),
    transparent 100%
  );
}

.pr-heroi-texto {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  max-width: calc(var(--pr-heroi-medida) - 2 * var(--pr-heroi-goteira));
  padding-block: var(--espaco-7);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.pr-heroi-titulo {
  margin: 0;
  font-size: var(--pr-heroi-titulo-tamanho);
  font-weight: var(--papel-titulo-pagina-peso);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--pr-tinta-marca);
}

.pr-heroi-subtitulo {
  margin: 0;
  font-size: var(--pr-lead-tamanho);
  line-height: 1.5;
  color: var(--cor-texto-corpo);
}

/* ---- as duas colunas */

/* A goteira do topo é zero: o cartão principal sobe por margem negativa, e um `gap`
 * aqui empurrava-o de volta para baixo. §3 quer sobreposição, não vizinhança. */
.pr-pedido-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  padding-block-start: 0;
}

/* O CONTEXTO À ESQUERDA E O FORMULÁRIO À DIREITA, COM O FORMULÁRIO PRIMEIRO NO DOM —
 * `FORM-01-R1` §1.
 *
 * `grid-template-areas` e não `order`: as áreas declaram a composição por nome, e o
 * ficheiro diz o que se vê em vez de somar deslocamentos. A ordem do DOM fica livre
 * para ser a ordem de leitura, que é o que interessa à acessibilidade — a razão
 * completa está no comentário de `pedido.njk`, com a alternativa que foi rejeitada.
 *
 * `minmax(0, …)` nas duas colunas impede uma grelha de `fr` de ser empurrada por
 * conteúdo indivisível: sem o mínimo zero, uma palavra longa numa coluna aumenta a sua
 * largura mínima e rebenta a proporção. Foi a causa de `L-105` e `L-108`. */
.pr-pedido-colunas {
  display: grid;
  grid-template-columns: minmax(0, var(--pr-coluna-contexto)) minmax(0, var(--pr-coluna-formulario));
  grid-template-areas: 'contexto principal';
  gap: var(--espaco-6);
  align-items: start;
}

/* A SOBREPOSIÇÃO — `FORM-01-R3` §3. Só o cartão principal sobe sobre a faixa; a coluna
 * editorial começa abaixo dela, como a referência descreve. `z-index` põe-no em primeiro
 * plano, e `isolation` no herói impede que o gradiente da faixa se sobreponha de volta. */
.pr-pedido-principal {
  grid-area: principal;
  min-width: 0;
  position: relative;
  z-index: 2;
  margin-block-start: calc(var(--pr-sobreposicao) * -1);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.pr-pedido-contexto {
  grid-area: contexto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* ---- o cartão do formulário
 *
 * SEM `overflow` NENHUM, e é condição e não omissão: `FORM-01` §4 exige que o popup dos
 * seletores «evite ficar cortado pelo cartão», e um `overflow: hidden` aqui recortava
 * exactamente isso. O cartão tem fronteira e raio; não tem contexto de recorte. */
.pr-cartao-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  padding: var(--espaco-7);
  background-color: var(--cor-superficie-elevada);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);

  /* O FIO DE MARCA É A FRONTEIRA SUPERIOR, E NÃO UM `::before` — `FORM-01-R5` §1.
   *
   * O fio existe desde `FORM-01-R2` §1 e continua: dois pixéis de identidade a dizer
   * qual dos cartões é o principal. **O que muda é o meio.** Era um pseudo-elemento de
   * 2 px de altura com `border-start-*-radius: var(--raio-l)`, e um raio de 12 px não
   * cabe numa caixa de 2 px: o motor reduz-o proporcionalmente e o que ficava pintado
   * era uma barra de cantos rectos a atravessar os cantos arredondados do cartão. Sobre
   * a fotografia lia-se como um corte, que é exactamente o que §1 descreve em «linhas ou
   * bordas que criem uma separação visual estranha» e em «consistência dos cantos
   * superiores».
   *
   * Como fronteira, o fio segue o `border-radius` do cartão por construção: os cantos
   * são arcos de marca que se fundem na fronteira subtil das outras arestas, não há
   * geometria a sair do cartão, e desaparece o acerto de margens que o pseudo-elemento
   * obrigava a repetir em cada largura. */
  border-block-start: var(--fronteira-anel) solid var(--pr-marca);
  border-radius: var(--raio-l);

  /* `elevacao/popover` saiu daqui — `FORM-01-R1` §4. É a sombra de um painel que paira,
   * e dava ao cartão o peso de um menu aberto. Esta assenta — e sobe na aresta que
   * assenta sobre a fotografia, pela razão declarada no token. */
  box-shadow: var(--pr-elevacao-sobreposta);
}

.pr-cartao-cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-block-end: var(--espaco-5);
  border-block-end: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
}

.pr-cartao-cabecalho p {
  margin: 0;
  max-width: var(--pr-medida);
}

/* A NOTA DOS CAMPOS OPCIONAIS — `FORM-01-R5` §2. Um degrau tipográfico abaixo da
 * descrição, para deixar de competir com ela.
 *
 * O tamanho é `--pr-apoio-tamanho` e não `papel/micro`: dentro do cartão, `micro` dá
 * 10 px e §10 não aceita texto de formulário abaixo de 13 — é a mesma regra da pista dos
 * campos e do aviso de privacidade. E a cor é `--cor-texto-secundario` e não uma mais
 * pálida: a informação é real, diz quais os campos que o visitante pode saltar, e tem de
 * cumprir 4,5:1 como qualquer outra. */
.pr-cartao-cabecalho .pr-nota-campos {
  font-size: var(--pr-apoio-tamanho);
  color: var(--cor-texto-secundario);
}

/* O nó do estado da submissão está entre o cabeçalho do cartão e o formulário, e passa a
 * maior parte da vida vazio. Sem isto, contava duas vezes para o `gap` da coluna e abria
 * uma goteira de 48 px entre o traço do cabeçalho e o primeiro campo — espaço que não
 * dizia nada e empurrava o formulário para baixo. É a mesma regra de `.pr-versao` e de
 * `.pr-progresso`, pela mesma razão. */
#pr-pedido-estado:empty {
  display: none;
}

/* ---- os blocos de campo */

.pr-campo-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}

/* ---- FORM-01-R1 §3 e §6: a tipografia e o foco DENTRO do cartão do formulário
 *
 * ESTE BLOCO REPINTA COMPONENTES DO FRAMEWORK, e por isso fica dito em voz alta: é
 * divergência DECLARADA, limitada ao cartão do formulário desta página, e registada
 * como `GAP-169` para subir à Fundação em vez de ficar aqui. `H1` não admite
 * divergência silenciosa; admite divergência declarada.
 *
 * O QUE SE CORRIGE, E PORQUÊ:
 *
 *   · os rótulos dos campos vêm do `campo-texto` em `papel/micro-rotulo`, 11 px. Num
 *     formulário que recolhe dados pessoais, o rótulo é a instrução — e 11 px põe a
 *     instrução abaixo do valor que a segue, a 14. Passam a 14 px com o peso de
 *     `corpo/enfase`: mesma dimensão do valor, hierarquia pelo peso e pela cor;
 *   · as pistas e descrições vinham a 12; passam a 13, o `papel/corpo`;
 *   · as mensagens de erro vinham a 12; passam a 13. Uma mensagem de erro que se lê
 *     com dificuldade é meia mensagem;
 *   · o aviso de privacidade vinha em `papel/micro`, **10 px**. É o texto que informa
 *     sobre tratamento de dados pessoais, e era o mais pequeno da página inteira.
 *
 * NENHUM TAMANHO É INVENTADO: todos saem da escala declarada em `:root`, que por sua
 * vez sai dos papéis publicados da Fundação. */

.pr-cartao-formulario .fw-campo > label,
.pr-cartao-formulario .pr-combo > label,
.pr-cartao-formulario .pr-telefone > .papel-micro-rotulo,
.pr-rotulo-campo {
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

.pr-cartao-formulario .pr-combo-descricao,
.pr-cartao-formulario .pr-telefone-pista,
.pr-cartao-formulario .papel-mensagem-erro {
  font-size: var(--pr-apoio-tamanho);
}

.pr-cartao-formulario .pr-aviso-privacidade .papel-micro {
  font-size: var(--pr-apoio-tamanho);
}

/* O MARCADOR DE OBRIGATÓRIO DO PROTÓTIPO **NÃO** FOI ADOPTADO — `FORM-01-R4` §4.
 *
 * O protótipo marca os campos obrigatórios com asterisco. Foi implementado, medido, e
 * revertido — e a razão é concreta, não preferência.
 *
 * Um `::after` no rótulo **entra no nome acessível** do campo: o Chromium inclui
 * conteúdo gerado no cálculo do *accname*, pelo que «Nome completo» passava a «Nome
 * completo *» e um leitor de ecrã anunciava «asterisco» a seguir ao nome do campo. A
 * explicação do símbolo ficava só no ecrã, sem associação programática — e `campo-texto`
 * do framework não expõe `aria-required`, pelo que não há onde declarar a obrigação a
 * sério.
 *
 * §10 exige «compatibilidade com leitores de ecrã», e a convenção que já existia —
 * «(opcional)» nos facultativos, mais a frase que o explica — comunica o mesmo sem esse
 * custo. `data-obrigatorio` fica no bloco: documenta o contrato no DOM e está lá para o
 * dia em que o framework publicar `aria-required`.
 *
 * É divergência DECLARADA face à referência, e é de um glifo. */

/* O ANEL DE FOCO. A fronteira do framework continua a mudar de cor; o anel junta-se-lhe
 * para que o campo activo se leia de relance numa coluna de seis. Não substitui o
 * `outline` do `base.css` em nenhum elemento — este é `focus-within` na CAIXA, e aquele
 * é `focus-visible` no controlo. */
.pr-cartao-formulario .fw-campo-caixa:focus-within,
.pr-cartao-formulario .pr-combo-caixa:focus-within {
  border-color: var(--pr-marca);
  box-shadow: var(--pr-anel-foco);
}

/* Um campo em erro anuncia-se pela fronteira e pela mensagem — e `WCAG 1.4.1` exige
 * que a cor não seja o único meio, que é o que a mensagem garante. O anel de erro
 * acrescenta-se quando o campo está em erro E com foco, para que a correcção não perca
 * o sinal de que é ali o problema. */
.pr-cartao-formulario .fw-campo[data-erro='sim'] .fw-campo-caixa:focus-within,
.pr-cartao-formulario .pr-combo[data-erro='sim'] .pr-combo-caixa:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-feedback-erro) 22%, transparent);
}

/* O contador da mensagem: alinhado à direita, discreto, e com sinal quando se aproxima
 * do limite real do contrato. Não é um aviso — é informação. */
.pr-contador {
  margin: 0;
  align-self: flex-end;
  /* 13 e não 12: o invariante de `FORM-01-R1` §3 é «nada abaixo de 13 px no cartão», e
   * um contador exceptuado tornava-o uma lista de excepções em vez de um invariante.
   * `font-variant-numeric` fixa a largura dos algarismos, para que o número não dance
   * enquanto se escreve. */
  font-size: var(--pr-apoio-tamanho);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-secundario);
}

.pr-contador[data-perto='sim'] {
  color: var(--cor-feedback-atencao);
}

/* ---- a caixa «Utilizar o mesmo número do telefone» — ADR-078 §3
 *
 * Alvo de 24 px por WCAG 2.5.8, e a linha inteira com a altura de controlo pequeno para
 * que o rótulo também seja área de toque. Visualmente é uma linha de formulário, e não
 * um bloco de aceitação: sem fundo de feedback, sem moldura, sem ênfase — porque
 * `R-2.1-19` proíbe que um controlo PAREÇA representar consentimento. */
.pr-mesmo-numero {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--altura-controlo-s);
}

.pr-mesmo-numero input {
  width: var(--pr-caixa-marcador);
  height: var(--pr-caixa-marcador);
  flex: 0 0 auto;
  accent-color: var(--cor-acao-base);
}

.pr-mesmo-numero label {
  color: var(--cor-texto-corpo);
}

/* ---- a acção e o progresso */

/* O BOTÃO PRINCIPAL, PROPORCIONAL AO FORMULÁRIO — `FORM-01-R1` §7.
 *
 * Largura total e não `HUG`: é a única acção do cartão, e um botão de 140 px ao canto
 * de uma coluna de 700 lê-se como acção secundária. A altura sobe 18 % sobre
 * `altura/controlo-l`, que é o degrau mínimo para o botão deixar de ter a mesma
 * dimensão dos campos que o precedem.
 *
 * `flex-direction: column` na linha das acções: o aviso de progresso fica POR BAIXO do
 * botão, e não ao lado — com o botão a ocupar a largura toda, ao lado não há lado. */
.pr-acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco-3);
}

.pr-acoes .fw-botao {
  width: 100%;
  min-height: var(--pr-altura-acao);
  padding-inline: var(--espaco-6);
  border-radius: var(--raio-m);
  font-size: var(--papel-valor-tamanho);
  font-weight: var(--papel-valor-enfase-peso);
}

.pr-acoes .fw-botao:not(:disabled) {
  background-color: var(--pr-marca);
  border-color: var(--pr-marca);
}

.pr-acoes .fw-botao:hover:not(:disabled) {
  background-color: var(--pr-marca-forte);
  border-color: var(--pr-marca-forte);
}

/* OS ESTADOS DO BOTÃO PRINCIPAL, DECLARADOS E NÃO HERDADOS — `FORM-01-R5` §8.
 *
 * `hover` já estava. Faltavam os dois que importam mais: o de TECLADO, porque sem ele o
 * anel do navegador assenta sobre azul-marinho e perde-se, e o de ENVIO A DECORRER, em
 * que o botão fica desactivado e sem o dizer visualmente — o visitante carrega outra vez
 * sem perceber porque não acontece nada. É o mesmo anel dos campos, pela mesma razão. */
.pr-acoes .fw-botao:focus-visible {
  outline: var(--fronteira-anel) solid var(--pr-marca);
  outline-offset: var(--espaco-1);
  box-shadow: var(--pr-anel-foco);
}

.pr-acoes .fw-botao:disabled {
  background-color: var(--pr-marca-suave);
  border-color: var(--pr-marca-suave);
  color: var(--cor-texto-secundario);
}

/* O cursor diz «a decorrer» e não «indisponível», porque é o que se passa: o contrato de
 * `botao` desactiva o nó quando `ocupado`, e nesta página o único desactivar é o envio
 * em curso. `aria-busy` é a marca que distingue os dois casos; sem ela, não se promete. */
.pr-acoes .fw-botao[aria-busy='true'] {
  cursor: progress;
}

.pr-progresso {
  margin: 0;
  color: var(--cor-texto-secundario);
}

/* Vazio não ocupa espaço: sem isto o `gap` da linha de acção abria uma goteira ao lado
 * do botão em todas as páginas que nunca chegam a enviar. */
.pr-progresso:empty {
  display: none;
}

/* ---- seletor-pesquisavel — GAP-166
 *
 * `position: relative` na raiz é o que ancora o popup absoluto. Sem isto, o popup
 * ancorava no primeiro ancestral posicionado, que seria a página. */
.pr-combo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

.pr-combo[data-largura='conteudo'] {
  flex: 0 0 var(--pr-indicativo-largura);
  width: var(--pr-indicativo-largura);
}

.pr-combo-descricao {
  margin: 0;
  color: var(--cor-texto-secundario);
}

.pr-combo-caixa {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-inline: var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-media);
  border-radius: var(--raio-m);
  background-color: var(--cor-superficie-elevada);
  color: var(--cor-texto-tenue);
  cursor: text;
  min-width: 0;
}

.pr-combo-caixa:focus-within {
  border-color: var(--cor-fronteira-forte);
}

.pr-combo[data-erro='sim'] .pr-combo-caixa {
  border-color: var(--cor-feedback-erro);
}

.pr-combo-entrada {
  border: 0;
  background-color: transparent;
  color: var(--cor-texto-principal);
  outline: none;
  min-width: 0;
  width: 100%;
  /* `text-overflow: ellipsis` num `input` trunca o valor quando ele não cabe. É a
   * truncagem DECLARADA do contrato `ENDING`, e não recorte silencioso. */
  text-overflow: ellipsis;
}

.pr-combo-entrada::placeholder {
  color: var(--cor-texto-tenue);
}

.pr-combo-entrada:read-only {
  background-color: var(--cor-superficie-subtil);
}

/* O POPUP. `position: absolute` é o que cumpre «não aumentar a altura do formulário» de
 * `FORM-01` §4: fora do fluxo, não desloca nada. `overflow-y: auto` dá-lhe rolamento
 * próprio em vez de o deixar crescer para fora da janela. */
.pr-combo-lista {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 20;
  margin: var(--espaco-1) 0 0;
  padding: var(--espaco-1);
  list-style: none;
  max-height: var(--pr-popup-altura);
  overflow-y: auto;
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background-color: var(--cor-superficie-elevada);
  box-shadow: var(--elevacao-popover);
}

/* ABRE PARA CIMA quando o componente mediu que abaixo não cabe. A medição é no
 * JavaScript, no momento da abertura; aqui é só a consequência. */
.pr-combo[data-acima='sim'] .pr-combo-lista,
.pr-combo[data-acima='sim'] .pr-combo-vazio {
  inset-block-start: auto;
  inset-block-end: 100%;
  margin: 0 0 var(--espaco-1);
}

/* O popup do indicativo cresce para a direita a partir da caixa. `inset-inline-end: auto`
 * é indispensável: com os dois lados fixos em 0, o `min-width` não tem por onde crescer e
 * a lista ficava com a largura do controlo. */
.pr-combo[data-largura='conteudo'] .pr-combo-lista,
.pr-combo[data-largura='conteudo'] .pr-combo-vazio {
  inset-inline-end: auto;
  min-width: var(--pr-popup-indicativo);
}

.pr-combo-opcao {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-s);
  cursor: pointer;
  color: var(--cor-texto-principal);
}

.pr-combo-opcao:hover,
.pr-combo-opcao[data-ativo='sim'] {
  background-color: var(--cor-estado-hover);
}

.pr-combo-opcao[aria-selected='true'] {
  background-color: var(--cor-estado-selecionado-fundo);
  color: var(--cor-estado-selecionado-marca);
}

.pr-combo-opcao-secundario {
  color: var(--cor-texto-secundario);
  text-align: end;
}

/* O estado de vazio é um `role="status"` fora da lista — ver o componente. Desenha-se
 * como o popup, porque é onde o olho está à espera de resposta. */
.pr-combo-vazio {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 20;
  margin: var(--espaco-1) 0 0;
  padding: var(--espaco-3);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background-color: var(--cor-superficie-elevada);
  box-shadow: var(--elevacao-popover);
  color: var(--cor-texto-secundario);
}

/* `display: flex` e `display: block` de autor ganham ao `display: none` do agente de
 * utilizador, e por isso `hidden` tem de ser dito aqui também. É a mesma correcção que
 * `.pr-formulario[hidden]` registou, e pela mesma razão. */
.pr-combo-lista[hidden],
.pr-combo-vazio[hidden],
.pr-combo-descricao[hidden],
.pr-telefone-pista[hidden] {
  display: none;
}

/* ---- telefone-internacional — GAP-167 */

.pr-telefone {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

.pr-telefone-pista {
  margin: 0;
  color: var(--cor-texto-secundario);
}

/* O indicativo ABRAÇA e o número PREENCHE — as duas intenções de dimensionamento do
 * handoff, traduzidas. `align-items: flex-start` e não `center`: quando o número
 * acusa erro, a sua mensagem cresce para baixo e não deve deslocar o indicativo. */
.pr-telefone-linha {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  min-width: 0;
}

.pr-telefone-linha > .fw-campo {
  flex: 1 1 0;
  min-width: 0;
}

/* O ESTADO SÓ-LEITURA, QUE O FRAMEWORK NÃO PINTA.
 *
 * `campo-texto` do `v0.2.0` declara `soLeitura` nos atributos e põe `readOnly` no
 * `<input>`, e **não tem aparência para esse estado**: a caixa fica igual a uma editável.
 * Com a caixa «mesmo número» marcada, o número do WhatsApp ficava a parecer editável e
 * não aceitava escrita — que é o pior dos dois mundos. O seletor do produto, ao lado,
 * já se pintava, e a linha ficava com dois controlos no mesmo estado e com aspecto
 * diferente. Apanhado nas capturas de evidência.
 *
 * Isto É repintar um componente do framework, e por isso está **estreitamente limitado**
 * a esta linha — nunca a `.fw-campo` em geral — e registado como parte de `GAP-167`,
 * para que a aparência de `soLeitura` suba ao framework em vez de ficar aqui. `H1` não
 * admite divergência silenciosa; admite divergência declarada. */
.pr-telefone-linha .fw-campo-caixa:has(input:read-only) {
  background-color: var(--cor-superficie-subtil);
}

/* ---- os cartões de contexto
 *
 * Discretos por decisão: `FORM-01` §2.2 pede «cartões discretos», e o cartão do
 * formulário é o que tem elevação. Dois cartões com a mesma ênfase competiriam, e §2.1
 * é explícito em que o formulário não deve ter concorrência pela atenção. */
/* SUPERFÍCIE DIFERENCIADA — `FORM-01-R2` §4. Os cartões de apoio assentam numa
 * superfície tingida de marca, e o do formulário fica branco e elevado. A diferença de
 * superfície faz o trabalho que a sombra sozinha não fazia: separa dois papéis em vez
 * de os empilhar, e mantém o formulário como o objecto que se destaca. */
.pr-cartao-contexto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  background-color: var(--pr-marca-tenue);
  border: var(--fronteira-fina) solid var(--pr-marca-suave);
  border-radius: var(--raio-l);
  /* SEM sombra: a superfície já os distingue, e uma sombra aqui punha-os ao nível do
   * formulário. `FORM-01` §2.1 quer os cartões de apoio sem competir pela atenção. */
}

.pr-cartao-contexto h3,
.pr-cartao-contexto p {
  margin: 0;
}

.pr-cartao-contexto h3 {
  color: var(--cor-texto-principal);
}

/* A cabeça do cartão: ícone numa caixa tonal e o título ao lado — `FORM-01-R1` §5.
 * A caixa dá ao glifo de 16 px presença suficiente para ancorar o cartão sem o
 * transformar num botão. */
.pr-cartao-contexto-cabeca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}

.pr-icone-caixa,
.pr-cartao-contexto-cabeca > .pr-icone {
  flex: 0 0 auto;
}

.pr-cartao-contexto-cabeca > .pr-icone {
  box-sizing: content-box;
  width: var(--icone-tamanho-s);
  height: var(--icone-tamanho-s);
  padding: var(--espaco-2);
  border-radius: var(--raio-m);
  background-color: var(--pr-marca-suave);
  color: var(--pr-marca);
}

.pr-destaque-contexto {
  font-size: var(--papel-valor-tamanho);
  font-weight: var(--papel-valor-enfase-peso);
  color: var(--cor-texto-principal);
}

/* A referência segue o título sem goteira própria: são um par, e o `gap` da coluna
 * separava-os como se fossem blocos distintos. */
.pr-destaque-contexto + .papel-auxiliar {
  margin-block-start: calc(var(--espaco-2) * -1);
  font-size: var(--pr-apoio-tamanho);
  font-weight: var(--papel-auxiliar-enfase-peso);
  letter-spacing: 0.01em;
  color: var(--pr-acento);
}

.pr-atributos-contexto {
  padding-block: var(--espaco-3);
  border-block: var(--fronteira-fina) solid var(--pr-marca-suave);
}

/* A DESCRIÇÃO DA OFERTA DESCE UM DEGRAU — `FORM-01-R5` §3 «hierarquia dos títulos».
 *
 * A `papel/valor` ficava maior do que os rótulos dos eixos, e o resultado era uma coluna
 * em que o texto corrido pesava mais do que os dados que o cartão existe para mostrar.
 * Desce para o degrau de apoio; o título da oferta fica a liderar sozinho e os três
 * eixos passam a ser o segundo nível, que é a ordem do protótipo. */
.pr-contexto-descricao {
  max-width: var(--pr-medida);
  font-size: var(--pr-apoio-tamanho);
  line-height: 1.55;
}

/* A lista numerada com os marcadores alinhados ao texto. `padding-inline-start` em
 * `espaco/5` deixa espaço ao número sem o soltar da linha que ele numera. */
.pr-passos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  margin: 0;
  padding-inline-start: var(--espaco-5);
  color: var(--cor-texto-corpo);
}

.pr-passos li::marker {
  color: var(--pr-acento);
  font-weight: var(--papel-valor-enfase-peso);
}

/* A ligação de contexto tem área de toque de 32 px: uma ligação de texto tem a altura
 * da linha e mais nada, e WCAG 2.5.8 pede 24. É a mesma correcção de
 * `.pr-rodape-ligacao`, e pela mesma razão. */
.pr-ligacao-contexto {
  display: inline-flex;
  align-items: center;
  min-height: var(--altura-controlo-s);
  color: var(--pr-marca);
  font-weight: var(--papel-corpo-enfase-peso);
}

/* ---- o cartão principal da coluna editorial — `FORM-01-R4` §5.1 */

/* O CRACHÁ DE CATEGORIA. Pílula de cantos redondos, caixa alta, espacejada — a forma
 * da referência. O tom é o acento, que é onde o latão ganha função: nomear a natureza
 * da oferta sem competir com o título. */
.pr-crachá {
  align-self: flex-start;
  margin: 0;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--pr-raio-pilula);
  background-color: var(--pr-destaque-050);
  color: var(--pr-acento);
  font-size: var(--pr-sobrescrita-tamanho);
  font-weight: var(--papel-auxiliar-enfase-peso);
  letter-spacing: var(--pr-sobrescrita-espaco);
  text-transform: uppercase;
}

.pr-titulo-oferta {
  margin: 0;
  font-size: var(--papel-valor-destacado-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--pr-tinta-marca);
  text-wrap: balance;
}

/* Os TRÊS ELEMENTOS, numerados. É uma `<ol>` e não uma lista solta: a referência
 * numera-os, e a numeração é informação — são três, por esta ordem. O número vem do
 * contador e não do texto, para que um elemento ausente não deixe um buraco na
 * sequência (`R-2.1-08`: um eixo por preencher não gera linha). */
.pr-caracteristicas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: caracteristica;
}

.pr-caracteristicas li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  counter-increment: caracteristica;
}

/* A caixa do ícone: quadrado de cantos redondos, com fronteira e superfície de marca —
 * a forma da referência, que dá ao glifo de 16 px presença suficiente para ancorar a
 * linha sem parecer um botão. */
/* A CAIXA DO ÍCONE É UMA SUPERFÍCIE TÉNUE, E NÃO UMA CÉLULA — `FORM-01-R5` §3.
 *
 * Era um quadrado branco com fronteira sobre o cartão tingido. Três iguais empilhados
 * davam exactamente a leitura que §3 proíbe: **uma tabela administrativa**, com uma
 * coluna de células e uma coluna de texto. Com a mesma superfície do outro ícone da
 * coluna e sem fronteira, lê-se como marca de tipo — que é o que é.
 *
 * E resolve de caminho a «consistência de bordas e raios» que §3 pede: esta caixa e a
 * de `.pr-cartao-contexto-cabeca` passam a ter o mesmo fundo, o mesmo raio e nenhuma
 * fronteira, em vez de duas construções diferentes no mesmo cartão. */
.pr-caracteristica-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pr-icone-caixa-grande);
  height: var(--pr-icone-caixa-grande);
  border-radius: var(--raio-m);
  background-color: var(--pr-marca-suave);
  color: var(--pr-marca);
}

.pr-caracteristicas p {
  margin: 0;
}

.pr-caracteristica-rotulo {
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

/* O NÚMERO É DA COR DO RÓTULO — `FORM-01-R5` §3. A numeração mantém-se: está no
 * protótipo e o `counter` continua a ser a forma certa de a produzir, porque um eixo em
 * falta não deixa buraco na sequência. O que sai é o latão: o número a uma cor e o
 * rótulo a outra partia cada linha em dois, e com três linhas seguidas a coluna ganhava
 * um ziguezague de cor que competia com o crachá — o único acento que a coluna tem. */
.pr-caracteristica-rotulo::before {
  content: counter(caracteristica) '. ';
  color: inherit;
}

/* A referência da oferta fecha o cartão, discreta. */
.pr-referencia {
  margin: 0;
  font-size: var(--pr-apoio-tamanho);
  color: var(--cor-texto-secundario);
}

/* ---- o cartão intermédio — §5.2. Superfície tingida de marca, ícone CIRCULAR, como
 * a referência. Era azul-escuro invertido; o protótipo tem-no claro, e um bloco escuro
 * a meio de uma coluna clara interrompia a composição em vez de a pontuar. */
.pr-cartao-destaque {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-4);
  padding: var(--espaco-5);
  border-radius: var(--raio-l);
  background-color: var(--pr-marca-suave);
  color: var(--cor-texto-corpo);
}

.pr-destaque-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pr-icone-caixa-grande);
  height: var(--pr-icone-caixa-grande);
  border-radius: 50%;
  background-color: var(--cor-superficie-elevada);
  color: var(--pr-marca);
}

.pr-titulo-destaque {
  margin: 0 0 var(--espaco-2);
  font-size: var(--pr-titulo-seccao-tamanho);
  font-weight: var(--papel-titulo-ecra-peso);
  line-height: 1.25;
  color: var(--pr-tinta-marca);
  text-wrap: balance;
}

.pr-cartao-destaque p {
  margin: 0;
}

/* ---- a fotografia da coluna editorial — §5.3 */
.pr-contexto-foto {
  overflow: hidden;
  border-radius: var(--raio-l);
  background-color: var(--pr-marca-suave);
}

.pr-contexto-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- a faixa de apoio abaixo do formulário — §8.
 *
 * Três afirmações verificáveis no próprio sistema. Sem prazos, sem garantias, sem
 * benefícios comerciais — §8 proíbe-os e nenhum existiria para ser citado. */
/* ---- a faixa de apoio — `FORM-01-R4` §9: ícone circular, rótulo e sublinha, como a
 * referência. Sem fundo nem fronteira: no protótipo ela assenta na página, e uma caixa
 * aqui competia com o cartão do formulário que acaba de terminar. */
.pr-apoio-faixa {
  display: grid;

  /* O PISO ERA 13 rem E PASSOU A 11 — `CONSULTA-02-R1` §3 e §6.
   *
   * O DEFEITO, MEDIDO. A 1024 px a coluna do formulário tem 614 px. Com o piso a 13 rem,
   * três colunas precisavam de 3 × 208 + 2 × 24 = 672 px, não cabiam, e `auto-fit` caía
   * a duas: os três apoios liam-se **dois e um órfão numa segunda linha**. A referência
   * aprovada mostra-os numa linha de três, e §6 nomeia 1024 px como «duas colunas, sem
   * compressão».
   *
   * 11 rem É O PISO QUE CABE SEM MUDAR O RESTO: 3 × 176 + 48 = 576 px, que entra nos 614
   * da coluna a 1024 e continua a NÃO entrar nos 447 que a página de pedido tem a 768 —
   * lá os apoios continuam a partir em dois, que é o comportamento aprovado e medido
   * dessa página. Abaixo de 11 rem por item o rótulo começaria a partir no meio da
   * palavra, e aí a linha de três deixava de ser um ganho.
   *
   * Vale para as duas páginas que montam esta faixa, e é de propósito: é a mesma peça do
   * mesmo desenho, e um piso diferente por página era a segunda definição que todo este
   * mandato evita. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--espaco-4);
  margin: 0;
  padding: var(--espaco-4) 0 0;
  list-style: none;
}

.pr-apoio-faixa li {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  color: var(--cor-texto-corpo);
}

.pr-apoio-faixa .pr-apoio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pr-icone-caixa-grande);
  height: var(--pr-icone-caixa-grande);
  border-radius: 50%;
  background-color: var(--pr-marca-suave);
  color: var(--pr-marca);
}

.pr-apoio-faixa p {
  margin: 0;
}

.pr-apoio-rotulo {
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

/* ---------------------------------------------------------------- aviso-privacidade
 * `GAP-157`. Visualmente discreto e estruturalmente separado do botão: `REQ-D-12` quer
 * informação junto ao formulário, e `R-2.1-19` proíbe que pareça um controlo. Sem
 * fundo de feedback, sem ícone de alerta, sem nada que sugira «aceitar».
 */
.pr-aviso-privacidade {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-4);
  background-color: var(--pr-marca-tenue);
  border: var(--fronteira-fina) solid var(--pr-marca-suave);
  border-radius: var(--raio-m);
  color: var(--cor-texto-corpo);
}

/* AS LIGAÇÕES DENTRO DO CARTÃO SÃO DE MARCA — `FORM-01-R5` §8 «coerência entre
 * superfícies claras e azul-marinho».
 *
 * O aviso de privacidade já o fazia; a identificação da oferta, no cabeçalho, ficava com
 * o azul de ligação por omissão do navegador. Numa composição em que tudo o resto é
 * azul-marinho, era o elemento mais saturado da página — e estava a competir com o
 * título do cartão e com o botão, que é o que §8 manda evitar. O sublinhado fica: é o
 * que identifica a ligação sem depender da cor, e §9 exige-o. */
.pr-aviso-privacidade a,
.pr-cartao-cabecalho a {
  color: var(--pr-marca);
  font-weight: var(--papel-corpo-enfase-peso);
}

/* ---------------------------------------------------------------- rodape-legal
 * `GAP-157`. `REQ-D-19`: dá acesso aos documentos legais aplicáveis, apresenta apenas
 * elementos com documento em vigor resolvido, e **não altera a navegação principal do
 * cabeçalho**.
 *
 * «NÃO ALTERAR» NÃO É «NÃO REPETIR», e desde `DETALHE-02-R1` §2 a diferença importa:
 * o rodapé passou a listar as MESMAS páginas que o cabeçalho lista, lidas da MESMA
 * constante `NAVEGACAO`. Não acrescenta entrada nenhuma, não retira nenhuma, e não
 * pode divergir — se `ADR-032` §5 mudar, mudam as duas ao mesmo tempo.
 */
/* O FUNDO ESCURO É O DO PROTÓTIPO, e §2 pede um rodapé «coerente com o protótipo».
 *
 * O protótipo fecha a página num bloco azul-marinho cheio. O que ele põe lá dentro —
 * newsletter, redes sociais, seis colunas de ligações para páginas que não existem —
 * é precisamente o que §2 proíbe implementar, e não está cá. O que se adopta é a
 * SUPERFÍCIE: o fim da página deixa de ser um cinzento quase igual ao corpo e passa a
 * ser um remate.
 *
 * O TOM É O PROVISÓRIO DE `Q-12`, como os restantes: `--pr-tinta-marca` é o mesmo
 * azul-marinho da faixa, do botão primário e dos números das etapas. Se a identidade
 * mudar, muda aqui com tudo o resto — não há um segundo azul escrito neste bloco.
 *
 * A fronteira de cima desapareceu porque deixou de separar seja o que for: entre o
 * corpo claro e este bloco já há o contraste todo que uma fronteira ia dar. */
.pr-rodape {
  margin-block-start: var(--espaco-7);
  padding-block: var(--espaco-6) var(--espaco-5);
  background-color: var(--pr-tinta-marca);
  color: var(--pr-rodape-tinta-suave);
}

/* TRÊS ÁREAS E NÃO DUAS PONTAS. A versão anterior era uma linha com o marcador à
 * esquerda e uma ligação à direita — `justify-content: space-between` e mais nada. Lia-se
 * como uma barra de estado, não como o fim de um sítio comercial.
 *
 * A grelha dá à identidade o dobro da largura das colunas de ligações, que é o que faz
 * o marcador ler-se como marca e não como mais um item. `minmax(0, …)` em todas: sem
 * isso, uma coluna com uma ligação longa recusa-se a encolher e empurra as outras. */
.pr-rodape-dentro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espaco-5) var(--espaco-6);
  align-items: start;
}

.pr-rodape-identidade {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}

/* `Q-12` CONTINUA ABERTA, e por isso o que aqui está é o marcador da configuração —
 * `⟨marca⟩` enquanto a identidade não estiver determinada. O que mudou foi o peso
 * tipográfico: o lugar da marca está preparado, o valor continua a não ser inventado. */
/* `Q-12` CONTINUA ABERTA, e por isso o que aqui está é o marcador da configuração —
 * `⟨marca⟩` enquanto a identidade não estiver determinada. O que mudou foi o peso
 * tipográfico e o contraste: o lugar da marca está preparado, o valor continua a não
 * ser inventado. */
.pr-rodape-marca {
  margin: 0;
  color: var(--pr-rodape-tinta);
}

/* O LOGÓTIPO DO RODAPÉ — `HEADER-01-R1` §5. Mesma altura do cabeçalho, para que a
 * marca tenha o mesmo tamanho nas duas pontas da página. */
/* O mesmo tamanho do logótipo do cabeçalho (40 px), em todas as larguras — revisão de
 * 21/10/2026: a 64 px dominava o rodapé. A linha «Study Travel Work» não precisa de se ler
 * aqui; o `alt` tem o nome completo. */
.pr-rodape-logo {
  display: block;
  height: var(--pr-cab-logo-altura);
  width: auto;
}

.pr-rodape-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}

/* Os títulos a 12 px, em maiúsculas POR CSS: no HTML o texto é normal («Navegação»), e é
 * esse que o leitor de ecrã lê (Parte 0.5 §3). */
.pr-rodape-titulo {
  margin: 0;
  color: var(--pr-rodape-tinta-suave);
  font-size: var(--esc-t-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pr-rodape-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O alvo tem de ter 24 px de altura — WCAG 2.5.8, e foi um teste de browser a 320 px
 * que o apanhou: as ligações mediam 99 × 15, porque uma ligação de texto tem a altura
 * da linha e mais nada. A correcção é dar-lhe área de toque, não aumentar o tipo.
 *
 * `inline-flex` com `min-height` em vez de `padding-block`: o padding resolveria a
 * altura e deixaria o alvo desalinhado da linha de base das restantes ligações.
 *
 * `align-self: start` ENTROU COM A LISTA: dentro de um `<li>` de coluna, um
 * `inline-flex` com `width` automático estica-se à largura da coluna, e o alvo passava
 * a cobrir espaço vazio à direita do texto. */
/* O alvo tem de ter 24 px de altura — WCAG 2.5.8, e foi um teste de browser a 320 px
 * que o apanhou: as ligações mediam 99 × 15, porque uma ligação de texto tem a altura
 * da linha e mais nada. A correcção é dar-lhe área de toque, não aumentar o tipo.
 *
 * `inline-flex` com `min-height` em vez de `padding-block`: o padding resolveria a
 * altura e deixaria o alvo desalinhado da linha de base das restantes ligações.
 *
 * `align-self: start` ENTROU COM A LISTA: dentro de um `<li>` de coluna, um
 * `inline-flex` com largura automática estica-se à largura da coluna, e o alvo passava
 * a cobrir espaço vazio à direita do texto. */
/* Parte 0.5 §3: ligações a 15 px, área de clique de 44, sublinhado só em hover e foco. */
.pr-rodape-ligacao {
  display: inline-flex;
  align-items: center;
  align-self: start;
  min-height: var(--esc-controlo);
  color: var(--pr-rodape-tinta);
  font-size: var(--esc-t-15);
  text-decoration: none;
}

.pr-rodape-ligacao:hover,
.pr-rodape-ligacao:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pr-rodape-ligacao:focus-visible {
  outline: var(--rv-anel) solid var(--pr-rodape-tinta);
  outline-offset: var(--rv-anel);
}

/* ---------------------------------------------------------------- PRIV-01
 *
 * A PÁGINA DA POLÍTICA DE PRIVACIDADE, com a composição do protótipo aprovado.
 *
 * Reaproveita o vocabulário de `FORM-01` em vez de abrir um segundo: a mesma faixa
 * fotográfica com véu claro, o mesmo azul-marinho provisório, os mesmos raios, a mesma
 * elevação para quem se sobrepõe à faixa. §6 pede coerência, e coerência aqui quer
 * dizer **os mesmos tokens**, não tokens parecidos.
 *
 * `Q-12` CONTINUA ABERTA. A identidade é provisória e vive no bloco local declarado no
 * topo deste ficheiro; nada aqui toca num token da Fundação.
 */

.pr-heroi-legal {
  --pr-veu-medida: var(--pr-heroi-medida-legal);

  height: var(--pr-heroi-altura-legal);
}

.pr-heroi-legal .pr-heroi-texto {
  max-width: calc(var(--pr-heroi-medida-legal) - 2 * var(--pr-heroi-goteira));
}

/* As migalhas vivem DENTRO da faixa nesta página — é o que o protótipo mostra, e o que
 * poupa uma linha de altura antes do título. */
.pr-heroi-texto > .pr-migalhas,
.pr-heroi-texto > .pr-migalhas a {
  color: var(--cor-texto-corpo);
}

.pr-heroi-texto > .pr-migalhas {
  margin-block-end: var(--espaco-2);
}

/* ---- as duas colunas
 *
 * AQUI SOBEM AS DUAS, e é a diferença face a `FORM-01`. Ali só o formulário subia,
 * porque a coluna editorial era secundária e começar mais abaixo dizia-o. Num documento
 * legal o índice e o texto são o mesmo assunto: subirem juntos lê-se como uma folha
 * única pousada sobre a fotografia, que é o que o protótipo mostra.
 *
 * A ORDEM DO DOM É A ORDEM VISUAL, e não há aqui nada a negociar: o índice vem primeiro
 * no ficheiro e primeiro no ecrã. Foi preciso argumentar o contrário em `FORM-01`
 * porque lá o elemento dominante estava à direita; aqui um índice antes do texto é a
 * ordem natural de leitura e também a melhor para quem usa leitor de ecrã. */
.pr-legal-colunas {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, var(--pr-coluna-indice)) minmax(0, var(--pr-coluna-legal));
  grid-template-areas:
    'indice documento'
    'apoio  documento';
  grid-template-rows: auto 1fr;
  gap: var(--espaco-5);
  align-items: start;
  /* A GOTEIRA DA PÁGINA TEM DE ENTRAR NA CONTA. `.pr-pagina` é uma coluna flexível com
   * `gap: espaco/6`, e uma margem negativa de 1,8rem contra uma goteira de 2rem punha o
   * cartão 3 px ABAIXO da faixa — vizinhança, não sobreposição. A soma é explícita em
   * vez de um número afinado à mão, para que mexer na goteira da página não parta isto
   * em silêncio. */
  margin-block-start: calc((var(--pr-sobreposicao-legal) + var(--espaco-6)) * -1);
}

.pr-legal-documento {
  grid-area: documento;
  min-width: 0;
}

.pr-legal-apoio {
  grid-area: apoio;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  min-width: 0;
}

/* Sem documento resolvido não há índice nem cartões, e uma grelha de duas colunas
 * deixava metade da largura vazia. */
.pr-legal-colunas-vazio {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'documento';
}

/* ---- o índice */

/* O ÍNDICE ACOMPANHA A LEITURA. Um documento de doze secções tem mais de sete mil
 * píxeis de altura: um índice que fica no topo serve o primeiro parágrafo e deixa de
 * existir para o resto. `sticky` é a forma de o manter ao alcance sem JavaScript
 * nenhum, e `max-height` com `overflow` impede-o de ser mais alto do que a janela — num
 * ecrã baixo, um índice colado maior do que o ecrã esconderia as últimas entradas. */
.pr-cartao-indice {
  position: sticky;
  inset-block-start: var(--espaco-5);
  max-block-size: calc(100dvh - var(--espaco-7));
  overflow-y: auto;
  grid-area: indice;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  background-color: var(--cor-superficie-elevada);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-l);
  box-shadow: var(--pr-elevacao-cartao);
}

.pr-titulo-indice {
  margin: 0;
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
  color: var(--pr-tinta-marca);
}

/* `list-style: none` numa `ol` com entradas que JÁ SÃO uma sequência numerada no
 * documento seria esconder informação; aqui não é o caso — a ordem é a do documento e a
 * `ol` existe por isso, mas o protótipo não numera o índice e numerar duas vezes
 * (índice e secção) confundia. O elemento continua a dizer que há ordem. */
.pr-indice-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-indice-lista a {
  display: block;
  padding: var(--espaco-1) var(--espaco-3);
  border-inline-start: var(--fronteira-anel) solid transparent;
  border-radius: var(--raio-s);
  color: var(--cor-texto-corpo);
  font-size: var(--pr-apoio-tamanho);
  line-height: 1.45;
  text-decoration: none;
}

/* O PROTÓTIPO MARCA UMA ENTRADA COMO ACTIVA, E ISSO AQUI NÃO SE FINGE.
 *
 * Marcar a secção em leitura exige observar o deslocamento da página — um *scrollspy*,
 * que é JavaScript que esta página não precisa de ter. Pintar a primeira entrada como
 * activa seria desenhar um estado que nunca muda, e que mente a quem está a meio do
 * documento. O que fica é o estado real: a entrada acende ao passar o rato e ao receber
 * foco, e o destino acende quando é alcançado — ver `:target`, mais abaixo. */
.pr-indice-lista a:hover,
.pr-indice-lista a:focus-visible {
  background-color: var(--pr-marca-tenue);
  border-inline-start-color: var(--pr-marca);
  color: var(--pr-tinta-marca);
}

/* ---- os cartões de apoio */

.pr-cartao-legal {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border-radius: var(--raio-l);
  background-color: var(--cor-superficie-afundada);
}

.pr-cartao-legal-marca {
  background-color: var(--pr-marca-suave);
}

.pr-cartao-legal > div {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

.pr-cartao-legal p {
  margin: 0;
  color: var(--cor-texto-secundario);
}

/* A mesma caixa redonda dos ícones da faixa de apoio de `FORM-01`, pela mesma razão:
 * é a forma que a identidade já usa para marcar um ícone de apoio. */
.pr-legal-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pr-icone-caixa-grande);
  height: var(--pr-icone-caixa-grande);
  border-radius: var(--pr-raio-pilula);
  background-color: var(--cor-superficie-elevada);
  color: var(--pr-marca);
}

.pr-cartao-legal-marca .pr-legal-icone {
  background-color: var(--cor-superficie-elevada);
}

.pr-titulo-cartao-legal {
  margin: 0;
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

.pr-ligacao-legal {
  margin-block-start: var(--espaco-1);
  color: var(--pr-marca);
  font-size: var(--pr-apoio-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
}

/* ---- o cartão do documento */

.pr-cartao-documento {
  padding: var(--espaco-7);
  background-color: var(--cor-superficie-elevada);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-l);
  box-shadow: var(--pr-elevacao-sobreposta);
}

/* O traço fecha os metadados e abre o documento: acima é informação SOBRE o documento
 * — versão e data —, abaixo é o documento. É o mesmo traço que o protótipo põe antes da
 * primeira secção. */
.pr-legal-meta {
  margin: 0 0 var(--espaco-6);
  padding-block-end: var(--espaco-4);
  border-block-end: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  color: var(--cor-texto-secundario);
}

/* ---- o documento renderizado
 *
 * A HIERARQUIA É DESENHADA AQUI E NÃO NO DOCUMENTO: o Markdown aprovado diz o que é
 * título e o que é parágrafo; o peso visual de cada um é decisão de apresentação, que é
 * exactamente o que `PRIV-01` autoriza mudar.
 *
 * Os seletores descem a partir de `.pr-legal-corpo` porque o HTML vem do conversor e
 * não tem classes. É o único sítio do ficheiro onde isso acontece, e é deliberado: pôr
 * classes no conversor seria pedir ao documento que conhecesse a folha de estilos. */
.pr-legal-corpo {
  color: var(--cor-texto-corpo);
}

.pr-legal-corpo > :first-child {
  margin-block-start: 0;
}

.pr-legal-corpo > :last-child {
  margin-block-end: 0;
}

.pr-legal-corpo h2,
.pr-legal-corpo h3,
.pr-legal-corpo h4 {
  color: var(--pr-tinta-marca);
  line-height: 1.25;
  text-wrap: balance;
  scroll-margin-block-start: var(--espaco-6);
}

/* O TRAÇO ACIMA DE CADA SECÇÃO é o separador do protótipo, e resolve de caminho o
 * «espaçamento insuficiente entre secções» de §4. Não é um `<hr>` no documento: um
 * separador desenhado não é conteúdo, e o documento não tem nenhum. */
.pr-legal-corpo h2 {
  margin-block: var(--espaco-7) var(--espaco-4);
  padding-block-start: var(--espaco-6);
  border-block-start: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  font-size: var(--pr-titulo-cartao-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
  letter-spacing: -0.012em;
}

.pr-legal-corpo > h2:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.pr-legal-corpo h3 {
  margin-block: var(--espaco-6) var(--espaco-3);
  font-size: var(--pr-lead-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
}

.pr-legal-corpo h4 {
  margin-block: var(--espaco-5) var(--espaco-2);
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
}

/* O DESTINO ACENDE QUANDO É ALCANÇADO. É o estado real que substitui a entrada «activa»
 * do protótipo: quem clica no índice vê onde chegou, e quem chega por uma ligação
 * partilhada vê o mesmo. Pura CSS, sem observar coisa nenhuma. */
.pr-legal-corpo :target {
  background-color: var(--pr-marca-tenue);
  box-shadow: calc(var(--espaco-3) * -1) 0 0 var(--pr-marca-tenue);
}

.pr-legal-corpo p,
.pr-legal-corpo ul,
.pr-legal-corpo ol {
  max-width: var(--pr-medida-legal);
  margin-block: 0 var(--espaco-4);
  line-height: 1.7;
}

.pr-legal-corpo ul,
.pr-legal-corpo ol {
  padding-inline-start: var(--espaco-6);
}

.pr-legal-corpo li {
  margin-block-end: var(--espaco-2);
}

.pr-legal-corpo li::marker {
  color: var(--pr-marca);
}

.pr-legal-corpo strong {
  color: var(--pr-tinta-marca);
  font-weight: var(--papel-corpo-enfase-peso);
}

.pr-legal-corpo a {
  color: var(--pr-marca);
  font-weight: var(--papel-corpo-enfase-peso);
}

.pr-legal-corpo hr {
  max-width: var(--pr-medida-legal);
  margin-block: var(--espaco-6);
  border: 0;
  border-block-start: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
}

.pr-legal-corpo code {
  padding: 0 var(--espaco-1);
  border-radius: var(--raio-s);
  background-color: var(--cor-superficie-afundada);
}

/* ---------------------------------------------------------------- PRIV-01 §8
 *
 * O SEGUNDO PONTO DE RUTURA, E PORQUE É LEGÍTIMO TER UM.
 *
 * O comentário do ponto de rutura de 44rem diz que ele existe **onde a composição
 * muda**, e não onde apetecer. É a mesma regra que obriga a este: a composição desta
 * página muda noutro sítio. Uma grelha de 30/70 com um índice de doze títulos deixa de
 * funcionar muito antes dos 44rem — a 768px o índice fica com 174px úteis e cada título
 * quebra em três linhas. O ponto está onde isso acontece, não onde outra página precisa.
 */
@media (max-width: 60rem) {
  .pr-legal-colunas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'indice'
      'documento'
      'apoio';
    grid-template-rows: auto;
    gap: var(--espaco-4);
  }

  /* O ÍNDICE PASSA A FICHAS, E NÃO A UM ACORDEÃO. §8 pede «uma navegação compacta ou
   * outra apresentação acessível»; §8 também proíbe esconder conteúdo. Um `details`
   * fechado por omissão escondia a navegação, e abri-lo só em desktop exigia
   * JavaScript para mexer no atributo — que esta página não tem e não precisa de ter.
   *
   * Em fichas que quebram de linha, os doze títulos ocupam cerca de um terço da altura
   * que ocupavam em lista, continuam todos visíveis, continuam na mesma ordem do DOM e
   * continuam a ser doze ligações que o teclado percorre pela ordem do documento. */
  /* Empilhado, colar o índice ao topo tapava o documento que ele serve. */
  .pr-cartao-indice {
    position: static;
    max-block-size: none;
    overflow-y: visible;
  }

  .pr-indice-lista {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--espaco-2);
  }

  .pr-indice-lista a {
    border-inline-start: 0;
    border-radius: var(--pr-raio-pilula);
    background-color: var(--pr-marca-tenue);
    color: var(--pr-tinta-marca);
  }

  .pr-indice-lista a:hover,
  .pr-indice-lista a:focus-visible {
    background-color: var(--pr-marca-suave);
  }
}

/* A 375 px um `espaco/7` de cada lado come 96 dos 375, e o texto jurídico ficava com
 * 247 px úteis — cada título a partir em duas linhas. É o mesmo acerto que o cartão do
 * formulário já faz, pela mesma razão. */
@media (max-width: 30rem) {
  .pr-cartao-documento {
    padding: var(--espaco-4);
  }

  .pr-cartao-legal {
    padding: var(--espaco-4);
  }

  .pr-legal-corpo h2 {
    margin-block: var(--espaco-6) var(--espaco-3);
    padding-block-start: var(--espaco-5);
  }
}

/* ---------------------------------------------------------------- CONS-01
 *
 * A PÁGINA DE CONSULTORIA, com a composição do protótipo aprovado.
 *
 * Reaproveita o vocabulário de `FORM-01` e de `PRIV-01` — a mesma faixa fotográfica com
 * véu claro, o mesmo azul-marinho provisório, os mesmos raios, as mesmas elevações, os
 * mesmos ícones em caixa redonda. §13 pede coerência, e coerência aqui quer dizer **os
 * mesmos tokens**, não tokens parecidos. `Q-12` continua aberta e nada aqui toca num
 * token da Fundação.
 */

/* A FAIXA DA CONSULTORIA CRESCE COM O TEXTO, e as outras não.
 *
 * Em `FORM-01` e em `PRIV-01` a zona de texto é absoluta e a faixa tem altura fixa: o
 * texto é curto e cabe sempre. Aqui leva mais uma linha — os três conceitos de §4 — e a
 * altura fixa deixou de chegar. Medido: a 768 px o texto passava 33 px além da faixa e a
 * 320 px passava 115, e como a faixa tem `overflow: hidden` o terceiro conceito era
 * simplesmente **cortado**.
 *
 * A correcção é estrutural e não um número maior: o texto passa a fluir — é ele que dá a
 * altura — e a fotografia passa a absoluta por trás dele. `min-height` garante a
 * presença da faixa quando o texto é curto. Fica contido em `.pr-heroi-cons`; as outras
 * duas páginas não mudam. */
/* A LIGAÇÃO DA PÁGINA INICIAL PARA A CONSULTORIA — `CONS-01-R1` §6.
 *
 * Discreta de propósito: a página inicial é a listagem, e esta é uma porta para o lado,
 * não um segundo título.
 *
 * `min-height` por `WCAG 2.5.8`, que pede 24 × 24 de alvo: a 13 px a linha media 20 de
 * altura, e o caso dos alvos pequenos apanhou-o. A goteira leva-a aos 24 sem mexer no
 * tamanho do texto nem na posição aparente. */
.pr-ligacao-consultoria {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--pr-caixa-alvo);
  color: var(--pr-marca);
  font-size: var(--pr-apoio-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
}

.pr-heroi-cons {
  --pr-veu-medida: var(--pr-heroi-medida-cons);

  height: auto;
  min-height: var(--pr-heroi-altura-cons);
}

.pr-heroi-cons .pr-heroi-texto {
  position: relative;
  max-width: calc(var(--pr-heroi-medida-cons) - 2 * var(--pr-heroi-goteira));
}

/* O VÉU DESTA FAIXA ERA PARTICULAR, E DEIXOU DE PRECISAR DE SER — `CONS-01-R1` §1
 * resolvido por `LAYOUT-GLOBAL-01-R1` §2.
 *
 * Existia aqui um gradiente mais denso e mais longo, porque o assunto da fotografia são
 * os estudantes e eles atravessam a largura toda: com o véu genérico — que abria a 52 %
 * da FAIXA — o subtítulo passava por cima de um casaco escuro. A paragem densa estava
 * em 58 %, afinada à mão para a largura em que foi medida.
 *
 * O véu genérico passou a medir-se pelo COMPRIMENTO da caixa de texto, e isso cobre
 * este caso por construção, em todas as larguras e não só na que foi afinada: medido a
 * 768 px, onde a percentagem falhava com 1,0:1. O particular era agora uma repetição
 * pior do genérico. */

/* Os três conceitos, na base da zona de texto. Ícone em caixa redonda e rótulo curto —
 * a mesma forma da faixa de apoio de `FORM-01`, pela mesma razão: é a marca que a
 * identidade já usa para um apoio de leitura.
 *
 * TRÊS COLUNAS E NÃO `flex-wrap`: com `wrap`, os três partiam em duas linhas e a
 * segunda caía fora da faixa — o terceiro conceito ficava cortado a meio. Numa grelha
 * de três, cada um tem a mesma largura e a altura da linha é a do mais alto. */
.pr-cons-apoio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-3) var(--espaco-4);
  margin: var(--espaco-5) 0 0;
  padding: 0;
  list-style: none;
}

.pr-cons-apoio li {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-width: 0;
  font-size: var(--pr-apoio-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
  line-height: 1.35;
}

.pr-cons-apoio-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pr-icone-caixa);
  height: var(--pr-icone-caixa);
  border-radius: var(--pr-raio-pilula);
  background-color: var(--cor-superficie-elevada);
  color: var(--pr-marca);
}

/* ---- títulos de secção
 *
 * Um só degrau para todas as secções da página: a hierarquia é `h1` na faixa, `h2` em
 * cada secção, `h3` dentro dela. Um tamanho por secção seria hierarquia inventada. */
.pr-cons-titulo {
  margin: 0;
  font-size: var(--pr-cons-titulo-tamanho);
  font-weight: var(--papel-valor-destacado-peso);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--pr-tinta-marca);
  text-wrap: balance;
}

.pr-cons-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-3);
}

.pr-cons-ligacao {
  color: var(--pr-marca);
  font-size: var(--pr-apoio-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
}

/* O botão de acção desta página é o mesmo botão primário do formulário, e por isso só
 * declara o que é próprio de uma âncora: um `<a>` não herda o alinhamento do conteúdo
 * nem a altura mínima que o componente dá a um `<button>`. */
.pr-cons-accao {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pr-altura-acao);
  padding-inline: var(--espaco-6);
  border-radius: var(--raio-m);
  font-size: var(--papel-valor-tamanho);
  font-weight: var(--papel-valor-enfase-peso);
  text-decoration: none;
}

.pr-cons-accao:not(:disabled) {
  background-color: var(--pr-marca);
  border-color: var(--pr-marca);
}

.pr-cons-accao:hover {
  background-color: var(--pr-marca-forte);
  border-color: var(--pr-marca-forte);
}

.pr-cons-accao:focus-visible {
  outline: var(--fronteira-anel) solid var(--pr-marca);
  outline-offset: var(--espaco-1);
  box-shadow: var(--pr-anel-foco);
}

/* ---- apresentação e serviços */

.pr-cons-apresentacao {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: var(--espaco-6);
  align-items: start;
}

.pr-cons-editorial {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.pr-cons-lead {
  margin: 0;
  max-width: var(--pr-medida);
  font-size: var(--pr-apoio-tamanho);
  line-height: 1.7;
  color: var(--cor-texto-corpo);
}

/* O painel tingido do protótipo, com os serviços em duas colunas. */
.pr-cons-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espaco-5);
  margin: 0;
  padding: var(--espaco-6);
  list-style: none;
  border-radius: var(--raio-l);
  background-color: var(--pr-marca-tenue);
}

/* CADA SERVIÇO É UM CARTÃO — `CONS-01-R1` §2 «reforçar a separação visual».
 *
 * Flutuavam no painel tingido separados só pela goteira, e com quatro descrições de
 * comprimentos diferentes lia-se como um bloco de texto em duas colunas. Em cartão
 * branco sobre o painel, cada um tem fronteira própria — é o mesmo recurso que o índice
 * da Política usa sobre a mesma superfície. */
.pr-cons-servico {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  min-width: 0;
  padding: var(--espaco-4);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background-color: var(--cor-superficie-elevada);
}

/* Sobre o cartão branco, a caixa do ícone passa a tingida — ao contrário da faixa e da
 * chamada final, onde o cartão é que é tingido e a caixa é que é branca. É sempre o
 * mesmo par de superfícies, trocado conforme o fundo. */
.pr-cons-servico-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pr-icone-caixa-grande);
  height: var(--pr-icone-caixa-grande);
  border-radius: var(--pr-raio-pilula);
  background-color: var(--pr-marca-tenue);
  color: var(--pr-marca);
}

.pr-cons-servico > div {
  min-width: 0;
}

/* Um degrau acima do rótulo: a 14 px o título do serviço pesava o mesmo que a sua
 * descrição, e os dois liam-se como um parágrafo só — `CONS-01-R1` §2. */
.pr-cons-servico-titulo {
  margin: 0 0 var(--espaco-2);
  font-size: var(--pr-lead-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  line-height: 1.3;
}

.pr-cons-servico-titulo a {
  color: var(--pr-tinta-marca);
  text-decoration: none;
}

.pr-cons-servico-titulo a:hover,
.pr-cons-servico-titulo a:focus-visible {
  text-decoration: underline;
}

.pr-cons-servico-texto {
  margin: 0;
  color: var(--cor-texto-secundario);
  line-height: 1.55;
}

/* ---- as quatro etapas */

.pr-cons-etapas {
  padding: var(--espaco-7);
  border-radius: var(--raio-l);
  background-color: var(--pr-marca-tenue);
}

.pr-cons-passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espaco-5);
  margin: var(--espaco-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}

/* A SEQUÊNCIA ENTRE OS PASSOS — `CONS-01-R1` §3. O protótipo liga-os com uma seta;
 * aqui é um traço com ponta, desenhado no espaço entre o número de um passo e o
 * seguinte. Decorativo e invisível a leitores de ecrã — a ordem já é dada pela `ol`,
 * que o NVDA anuncia como «item 2 de 4». O último não leva, e por isso `:not(:last-child)`. */
.pr-cons-passos li {
  position: relative;
  min-width: 0;
}

.pr-cons-passos li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--pr-icone-caixa-grande) / 2);
  inset-inline-start: calc(var(--pr-icone-caixa-grande) + var(--espaco-3));
  inline-size: calc(100% - var(--pr-icone-caixa-grande) - var(--espaco-3));
  block-size: var(--fronteira-fina);
  background-color: var(--pr-marca-suave);
}

/* O NÚMERO É TEXTO E NÃO UM `counter`, e é a diferença face à lista de características
 * de `FORM-01`. Ali os eixos podem faltar e a numeração tem de se recompor sozinha;
 * aqui as quatro etapas são fixas e escritas no ficheiro, pelo que o número é conteúdo
 * — e fica `aria-hidden`, porque o leitor de ecrã já anuncia «item 1 de 4». */
.pr-cons-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pr-icone-caixa-grande);
  height: var(--pr-icone-caixa-grande);
  margin-block-end: var(--espaco-3);
  border-radius: var(--pr-raio-pilula);
  background-color: var(--pr-marca);
  color: var(--cor-superficie-elevada);
  font-size: var(--papel-valor-tamanho);
  font-weight: var(--papel-valor-enfase-peso);
  font-variant-numeric: tabular-nums;
}

.pr-cons-passo-titulo {
  margin: 0 0 var(--espaco-2);
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
  line-height: 1.3;
}

.pr-cons-passos p {
  margin: 0;
  color: var(--cor-texto-secundario);
  line-height: 1.55;
}

/* ---- destinos
 *
 * SEM FOTOGRAFIA E SEM DESCRIÇÃO, porque não existem. `dominios.destino` é uma lista de
 * NOMES — o que alimenta o filtro da listagem. O protótipo mostra cartões com
 * fotografia e texto por destino; inventá-los era inventar conteúdo. Ficam fichas com o
 * nome, que é o que há. */
.pr-cons-destinos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin: var(--espaco-5) 0 var(--espaco-3);
  padding: 0;
  list-style: none;
}

.pr-cons-destino {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-4);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--pr-raio-pilula);
  background-color: var(--cor-superficie-elevada);
}

.pr-cons-destino-icone {
  display: inline-flex;
  color: var(--pr-marca);
}

.pr-cons-destino-nome {
  font-size: var(--pr-apoio-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

/* ---- testemunhos */

.pr-cons-testemunhos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--espaco-4);
  margin: var(--espaco-5) 0 0;
  padding: 0;
  list-style: none;
}

.pr-cons-testemunho {
  padding: var(--espaco-5);
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-l);
  background-color: var(--cor-superficie-elevada);
}

.pr-cons-testemunho blockquote {
  margin: 0 0 var(--espaco-3);
}

.pr-cons-testemunho blockquote p {
  margin: 0;
  line-height: 1.6;
  color: var(--cor-texto-corpo);
}

.pr-cons-testemunho-autor {
  margin: 0;
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

/* ---- o pedido */

.pr-cons-pedido {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: var(--espaco-6);
  align-items: start;
  scroll-margin-block-start: var(--espaco-6);
}

/* O TEXTO ACOMPANHA O FORMULÁRIO — `CONS-01-R1` §4 «reduzir o espaço vazio».
 *
 * O formulário tem mais de 700 px de altura e a introdução tem três linhas: a coluna da
 * esquerda ficava com meio ecrã de branco por baixo. Colada, o espaço deixa de ser
 * vazio — acompanha quem desce pelos campos. É o mesmo recurso do índice da Política,
 * pela mesma razão. */
.pr-cons-pedido-texto {
  position: sticky;
  inset-block-start: var(--espaco-5);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.pr-cons-pedido-texto p {
  margin: 0;
  max-width: var(--pr-medida);
}

/* ---- perguntas frequentes
 *
 * `<details>` nativo: navegável por teclado, anunciado pelos leitores de ecrã, e sem um
 * byte de script. O marcador por omissão é substituído por um chevron desenhado em CSS,
 * que roda ao abrir — `list-style: none` no `summary` é o que esconde o triângulo em
 * Firefox e `::-webkit-details-marker` o que o esconde nos motores WebKit. */
.pr-cons-faq-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-block-start: var(--espaco-5);
}

.pr-cons-faq-item {
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-m);
  background-color: var(--cor-superficie-elevada);
}

.pr-cons-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-4) var(--espaco-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--pr-rotulo-tamanho);
  font-weight: var(--papel-corpo-enfase-peso);
  color: var(--pr-tinta-marca);
}

.pr-cons-faq-item summary::-webkit-details-marker {
  display: none;
}

.pr-cons-faq-item:hover {
  border-color: var(--pr-marca-suave);
}

.pr-cons-faq-item[open] {
  border-color: var(--pr-marca-suave);
  background-color: var(--pr-marca-tenue);
}

/* O corpo volta ao branco: o tingido marca a pergunta aberta, e o texto da resposta
 * lê-se melhor sobre a superfície elevada. */
.pr-cons-faq-item[open] .pr-cons-faq-corpo {
  margin: 0 var(--fronteira-fina) var(--fronteira-fina);
  padding-block-start: var(--espaco-4);
  border-radius: 0 0 var(--raio-m) var(--raio-m);
  background-color: var(--cor-superficie-elevada);
}

.pr-cons-faq-item summary:focus-visible {
  outline: var(--fronteira-anel) solid var(--pr-marca);
  outline-offset: calc(var(--fronteira-anel) * -1);
  border-radius: var(--raio-m);
}

.pr-cons-faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: var(--pr-chevron);
  height: var(--pr-chevron);
  border-inline-end: var(--fronteira-anel) solid var(--pr-marca);
  border-block-end: var(--fronteira-anel) solid var(--pr-marca);
  transform: rotate(45deg) translate(-25%, -25%);
  transition: transform 120ms ease-out;
}

.pr-cons-faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-25%, -25%);
}

@media (prefers-reduced-motion: reduce) {
  .pr-cons-faq-item summary::after {
    transition: none;
  }
}

.pr-cons-faq-corpo {
  padding: 0 var(--espaco-5) var(--espaco-5);
}

.pr-cons-faq-corpo p {
  margin: 0 0 var(--espaco-3);
  max-width: var(--pr-medida-legal);
  line-height: 1.7;
  color: var(--cor-texto-corpo);
}

/* ---------------------------------------------------------------- CONS-01 §15
 *
 * O MESMO PONTO DE RUTURA DA PÁGINA LEGAL, e pela mesma razão: as duas colunas desta
 * página — editorial e serviços, texto e formulário — deixam de funcionar muito antes
 * dos 44rem da linha de controlos. A 768 px o painel dos serviços fica com duas colunas
 * de 10rem e cada descrição parte em cinco linhas.
 *
 * A ORDEM DO DOM É A ORDEM VISUAL EM TODAS AS LARGURAS. Não há `order` nenhum nesta
 * página: o que empilha, empilha pela ordem do ficheiro, que é a ordem que §15 enumera
 * — faixa, apresentação, serviços, etapas, destinos, pedido, perguntas, chamada final.
 */
@media (max-width: 60rem) {
  .pr-cons-apresentacao,
  .pr-cons-pedido {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-5);
  }

  .pr-cons-etapas {
    padding: var(--espaco-5);
  }

  .pr-cons-servicos {
    padding: var(--espaco-5);
  }
}

/* A 375 px a faixa tem de caber a legenda dos três conceitos sem empurrar o título para
 * fora, e os cartões não podem gastar 96 px dos 375 em goteira interna. */
@media (max-width: 30rem) {
  /* A 375 px três colunas dariam 90 px cada. Empilham. */
  .pr-cons-apoio {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-2);
  }

  .pr-cons-apoio li {
    font-size: var(--papel-auxiliar-tamanho);
  }

  .pr-cons-servicos,
  .pr-cons-etapas {
    padding: var(--espaco-4);
  }

  .pr-cons-faq-item summary {
    padding: var(--espaco-3) var(--espaco-4);
  }

  .pr-cons-faq-corpo {
    padding: 0 var(--espaco-4) var(--espaco-4);
  }

  /* O botão ocupa a largura: a 320 px um botão encostado à esquerda ao lado de espaço
   * vazio lê-se como um elemento perdido, e o alvo de toque fica menor do que podia. */
  .pr-cons-accao {
    align-self: stretch;
    width: 100%;
    padding-inline: var(--espaco-4);
  }
}

/* ---------------------------------------------------------------- HOME-01 §12 */
/* A ESCALA DE MARGENS DE `LAYOUT-GLOBAL-01` §2. Escrita do maior para o menor, com
 * `min-width`, para que cada uma se leia pelo ecrã a que pertence. */
@media (min-width: 48rem) {
  :root {
    --rv-t-titulo-topo: var(--esc-t-34);
    --pagina-margem: var(--espaco-5);
    --pr-cab-reserva: var(--pr-cab-altura-total);
  }
}

@media (min-width: 80rem) {
  :root {
    --pagina-margem: var(--espaco-6);
  }
}

/* ================================================================ FRONT-FIDELIDADE-01
 *
 * A PÁGINA DE SERVIÇOS NA MAQUETA APROVADA, e os componentes que ela partilha.
 * Especificação: `ESPEC_FRONT_FIDELIDADE_MAQUETA.md`. Tokens: `--rv-*` no `:root`.
 * Componentes Nunjucks: `src/_includes/componentes/servicos.njk`.
 *
 * Substitui os blocos de `HOME-01`/`HOME-02` (`.pr-home-*`, `.pr-cartao-oferta-*`) e a
 * chamada final (`.pr-cons-final-*`), que passa a ser `.rv-faixa` nas três páginas que a
 * usam. O cabeçalho e o rodapé não mudam.
 */

.pr-pagina:has(> .rv-topo:first-child) {
  padding-block-start: 0;
}

.rv-servicos {
  background-color: var(--rv-fundo);
}

/* ---- foco: um anel só, em todos os elementos focáveis (10,95:1 sobre branco) */
.rv-servicos :is(a, button, input, select):focus-visible,
.rv-faixa a:focus-visible {
  outline: var(--rv-anel) solid var(--rv-marinho-700);
  outline-offset: var(--rv-anel);
}

/* ---- topo v2 (alteração de desenho aprovada a 20/10/2026, ESPEC §7.1).
 *
 * Fotografia a toda a largura do ecrã, sem texto por cima; por baixo, dentro do
 * contentor, o bloco branco com o título e o texto, a pesquisa e os filtros, metade
 * sobre a fotografia (`margin-block-start` negativo de `--rv-bloco-meia`).
 *
 * PRIMEIRA DOBRA (≥ 64rem): a altura da fotografia vem da altura do ecrã — o que sobra
 * depois do cabeçalho e de metade do bloco —, entre 420 e 620 px. Assim cabeçalho +
 * fotografia + bloco cabem inteiros a partir de 768 px de altura, e num ecrã muito alto a
 * fotografia não cresce sem fim. `--rv-bloco-meia` é a metade da altura medida do bloco
 * (mais uma folga): o CSS não pode ler a altura do próprio bloco, e um teste mede a dobra.
 *
 * CLS = 0: a altura da fotografia é dada pelo CSS (ou pela proporção, abaixo de 64rem)
 * antes de a imagem chegar, e o bloco está em fluxo normal. */
.rv-topo {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--pr-colunas-pagina);
}

.rv-topo-imagem {
  grid-column: full;
  display: block;
  block-size: clamp(var(--rv-foto-min), 100vh - var(--pr-cab-reserva) - var(--rv-bloco-meia), var(--rv-foto-max));
  block-size: clamp(var(--rv-foto-min), 100svh - var(--pr-cab-reserva) - var(--rv-bloco-meia), var(--rv-foto-max));
  overflow: hidden;
  background-color: var(--rv-azul-100);
}

.rv-topo-imagem img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--rv-foto-enquadramento);
}

.rv-bloco {
  grid-column: conteudo;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  margin-block-start: calc(var(--rv-bloco-meia) * -1);
  padding: var(--rv-bloco-preench);
  border-radius: var(--rv-bloco-raio);
  background-color: var(--rv-superficie);
  box-shadow: var(--esc-sombra-elevada);
}

.rv-topo-texto {
  min-inline-size: 0;
}

.rv-topo-titulo {
  margin: 0;
  font-size: var(--rv-t-titulo-topo);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--rv-marinho-900);
}

.rv-topo-subtitulo {
  max-inline-size: var(--rv-topo-titulo-medida);
  margin: var(--espaco-3) 0 0;
  font-size: var(--rv-t-texto-topo);
  line-height: 1.5;
  color: var(--rv-texto);
}

/* ---- pesquisa e filtros: dentro do bloco, sem fundo nem sombra próprios */
.rv-painel {
  margin: 0;
}

.rv-painel-forma {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.rv-painel-linha {
  display: flex;
  gap: var(--espaco-3);
}

.rv-pesquisa-campo {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.rv-pesquisa-lupa,
.rv-filtro-icone,
.rv-seletor-divisa {
  position: absolute;
  /* Por cima do campo: um `<select>` com opacidade < 1 ganha camada própria e o fundo
   * dele cobria o ícone (medido: 1,47:1). */
  z-index: 1;
  inset-block-start: 50%;
  display: inline-flex;
  transform: translateY(-50%);
  pointer-events: none;
}

.rv-pesquisa-lupa,
.rv-filtro-icone {
  inset-inline-start: var(--espaco-4);
}

.rv-seletor-divisa {
  inset-inline-end: var(--espaco-3);
  color: var(--rv-texto-controlo);
}

.rv-pesquisa-lupa {
  color: var(--rv-texto-controlo);
}

.rv-filtro-icone {
  color: var(--rv-marinho-700);
}

/* No estado desativado o ícone e a seta acompanham a cor do texto desativado. */
.rv-filtro:has(.rv-seletor:disabled) :is(.rv-filtro-icone, .rv-seletor-divisa) {
  color: var(--rv-filtro-desativado);
}

.rv-pesquisa-lupa .fw-icone,
.rv-filtro-icone .fw-icone {
  inline-size: var(--rv-glifo-controlo);
  block-size: var(--rv-glifo-controlo);
}

.rv-campo,
.rv-seletor {
  inline-size: 100%;
  border: var(--rv-traco) solid var(--rv-borda-campo);
  border-radius: var(--rv-controlo-raio);
  background-color: var(--rv-superficie);
  font: inherit;
  font-size: var(--rv-t-controlo);
}

.rv-campo {
  min-block-size: var(--rv-controlo-altura);
  padding-inline: calc(var(--espaco-4) * 2 + var(--rv-glifo-controlo)) var(--espaco-4);
  color: var(--rv-marinho-900);
}

.rv-campo::placeholder {
  color: var(--rv-pista);
  opacity: 1;
}

.rv-campo:focus-visible {
  border-color: var(--rv-marinho-700);
}

.rv-seletor {
  -webkit-appearance: none;
  appearance: none;
  min-block-size: var(--rv-filtro-altura);
  padding-inline: calc(var(--espaco-4) + var(--rv-glifo-controlo) + var(--espaco-3))
    calc(var(--espaco-3) + var(--rv-glifo-controlo) + var(--espaco-2));
  font-size: var(--rv-t-auxiliar);
  text-overflow: ellipsis;
  color: var(--rv-texto-controlo);
  box-shadow: none;
  cursor: pointer;
}

.rv-seletor:hover:not(:disabled) {
  border-color: var(--rv-marinho-700);
}

/* DESATIVADO E VISÍVEL — `NAV-02` §4. O estado lê-se pelo fundo cinzento claro, pelo
 * contorno suave, pelo texto a ~3:1, pelo cursor e por estar fora da ordem de tabulação
 * (`<select disabled>`). `opacity: 1` anula o 0,7 que o Chrome aplica: a cor é a do
 * token, e não uma mistura que dependia do browser. */
.rv-seletor:disabled {
  border-color: var(--rv-filtro-desativado-borda);
  background-color: var(--rv-filtro-desativado-fundo);
  box-shadow: none;
  color: var(--rv-filtro-desativado);
  opacity: 1;
  cursor: not-allowed;
}

.rv-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-4);
}

.rv-filtro {
  position: relative;
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.rv-limpar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-block-size: var(--rv-filtro-altura);
  margin-inline-start: auto;
  padding-inline: var(--espaco-2);
  color: var(--rv-marinho-700);
  font-size: var(--rv-t-controlo);
  font-weight: 600;
  text-decoration: none;
}

.rv-limpar:hover {
  text-decoration: underline;
}

.rv-limpar[aria-disabled='true'] {
  color: var(--rv-desativado-texto);
  text-decoration: none;
  cursor: default;
}

.rv-sem-js {
  margin: 0;
  font-size: var(--rv-t-auxiliar);
  color: var(--rv-texto);
}

/* ---- botões (pesquisa, faixa, estados) */
.rv-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-block-size: var(--rv-controlo-altura);
  padding-inline: var(--rv-botao-preench);
  border: var(--rv-traco) solid transparent;
  border-radius: var(--rv-controlo-raio);
  font: inherit;
  font-size: var(--rv-t-botao);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rv-movimento);
}

.rv-botao-primario {
  background-color: var(--rv-marinho-700);
  color: var(--rv-superficie);
}

.rv-botao-primario:hover {
  background-color: var(--rv-marinho-800);
}

.rv-botao-primario:active {
  background-color: var(--rv-marinho-950);
}

.rv-botao-secundario {
  border-color: var(--rv-borda-campo);
  background-color: var(--rv-superficie);
  color: var(--rv-marinho-700);
}

.rv-botao-secundario:hover {
  background-color: var(--rv-azul-050);
}

/* ---- cabeçalho da lista */
.rv-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
}

.rv-lista-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-5);
}

.rv-contagem {
  margin: 0 0 var(--espaco-1);
  font-size: var(--rv-t-auxiliar);
  color: var(--rv-texto-auxiliar);
}

.rv-lista-titulo {
  margin: 0;
  font-size: var(--rv-t-titulo-seccao);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--rv-marinho-900);
}

/* O título recebe foco por programa (paginação) e não por teclado: sem anel. */
.rv-lista-titulo:focus:not(:focus-visible) {
  outline: none;
}

.rv-ordenar {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}

.rv-ordenar-rotulo {
  font-size: var(--rv-t-auxiliar);
  color: var(--rv-texto-auxiliar);
  white-space: nowrap;
}

.rv-ordenar-caixa {
  position: relative;
}

.rv-ordenar .rv-seletor {
  min-block-size: var(--rv-filtro-altura);
  min-inline-size: var(--rv-ordenar-largura);
  padding-inline: var(--espaco-4) calc(var(--espaco-4) * 2 + var(--rv-glifo-controlo));
}

/* ---- grelha de cartões: no máximo TRÊS colunas, como a maqueta, e uma em telemóvel.
 * O `max()` impede a quarta coluna a 1440 px; o `min()` impede deslocamento a 320 px. */
.rv-grelha {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(min(var(--rv-cartao-minimo), 100%), calc((100% - 2 * var(--rv-grelha-intervalo)) / 3)), 1fr)
  );
  gap: var(--rv-grelha-intervalo);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- cartão de serviço: UMA ligação (no título), o cartão inteiro clicável. */
.rv-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: var(--rv-traco) solid var(--rv-borda-cartao);
  border-radius: var(--rv-cartao-raio);
  background-color: var(--rv-superficie);
  box-shadow: var(--esc-sombra-cartao);
  transition: box-shadow var(--rv-movimento);
}

.rv-cartao[hidden],
.rv-estado[hidden],
.rv-paginacao[hidden] {
  display: none;
}

.rv-cartao:hover {
  box-shadow: var(--esc-sombra-elevada);
}

.rv-cartao:hover .rv-cartao-ligacao {
  text-decoration: underline;
}

/* O ANEL VAI PARA O CARTÃO, e não para o texto do título: é o cartão inteiro que é o
 * alvo. */
.rv-cartao:has(.rv-cartao-ligacao:focus-visible) {
  outline: var(--rv-anel) solid var(--rv-marinho-700);
  outline-offset: var(--rv-anel);
}

.rv-servicos .rv-cartao-ligacao:focus-visible {
  outline: none;
}

.rv-cartao-ligacao {
  color: inherit;
  text-decoration: none;
}

.rv-cartao-ligacao::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rv-cartao-raio);
}

.rv-cartao-media {
  position: relative;
  aspect-ratio: 20 / 9;
  border-start-start-radius: var(--rv-cartao-raio);
  border-start-end-radius: var(--rv-cartao-raio);
  background-color: var(--rv-azul-050);
}

.rv-cartao-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-start-start-radius: var(--rv-cartao-raio);
  border-start-end-radius: var(--rv-cartao-raio);
}

/* Sem fotografia, uma superfície neutra — nunca uma fotografia de banco. */
.rv-cartao-media[data-sem-imagem='sim'] {
  background-image: linear-gradient(135deg, var(--rv-azul-100) 0%, var(--rv-azul-050) 60%, var(--rv-superficie) 100%);
}

.rv-cartao-emblema {
  position: absolute;
  inset-block-end: calc(var(--rv-emblema) / -2);
  inset-inline-start: var(--espaco-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--rv-emblema);
  block-size: var(--rv-emblema);
  border: calc(var(--rv-anel) + var(--rv-traco)) solid var(--rv-superficie);
  border-radius: 50%;
  background-color: var(--rv-azul-100);
  color: var(--rv-marinho-700);
}

.rv-cartao-emblema .fw-icone {
  inline-size: var(--rv-emblema-glifo);
  block-size: var(--rv-emblema-glifo);
}

.rv-cartao-corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: calc(var(--rv-emblema) / 2 + var(--espaco-2)) var(--espaco-4) var(--espaco-4);
}

.rv-cartao-titulo {
  margin: 0;
  font-size: var(--rv-t-cartao-titulo);
  font-weight: 550;
  line-height: 1.3;
  color: var(--rv-marinho-900);
  overflow-wrap: anywhere;
}

/* Descrições longas: quatro linhas no cartão, o resto na página de detalhe. O texto
 * inteiro continua no documento — o recorte é só visual. */
.rv-cartao-texto {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--rv-t-cartao-texto);
  line-height: 1.45;
  color: var(--rv-texto);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.rv-cartao-accao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-block-start: auto;
  padding-block-start: var(--espaco-2);
  color: var(--rv-marinho-700);
  font-size: var(--rv-t-cartao-texto);
  font-weight: 600;
}

/* ---- estados: sem resultados, catálogo vazio, erro */
.rv-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-6);
  border: var(--rv-traco) solid var(--rv-borda-cartao);
  border-radius: var(--rv-cartao-raio);
  background-color: var(--rv-superficie);
  color: var(--rv-texto);
}

.rv-estado p {
  margin: 0;
}

.rv-estado .rv-botao {
  margin-block-start: var(--espaco-2);
}

.rv-estado-titulo {
  font-size: var(--rv-t-cartao-titulo);
  font-weight: 600;
  color: var(--rv-marinho-900);
}

/* ---- paginação (só com JavaScript; sem ele a lista mostra tudo) */
.rv-paginacao-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-paginacao-botao {
  min-inline-size: var(--rv-alvo-movel);
  min-block-size: var(--rv-alvo-movel);
  padding-inline: var(--espaco-3);
  border: var(--rv-traco) solid var(--rv-borda-cartao);
  border-radius: var(--rv-controlo-raio);
  background-color: var(--rv-superficie);
  color: var(--rv-marinho-700);
  font: inherit;
  font-size: var(--rv-t-controlo);
  cursor: pointer;
}

.rv-paginacao-botao[aria-current='page'] {
  border-color: var(--rv-marinho-700);
  background-color: var(--rv-marinho-700);
  color: var(--rv-superficie);
}

.rv-paginacao-botao:disabled {
  color: var(--rv-desativado-texto);
  cursor: default;
}

/* ---- faixa de chamada à ação (inicial, consultoria, detalhe de oferta) */
.rv-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-5);
  padding: var(--espaco-6);
  border-radius: var(--rv-faixa-raio);
  background-color: var(--rv-azul-050);
}

.rv-faixa-icone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: var(--rv-icone-faixa);
  block-size: var(--rv-icone-faixa);
  border-radius: 50%;
  background-color: var(--rv-azul-100);
  color: var(--rv-marinho-700);
}

.rv-faixa-icone .fw-icone {
  inline-size: var(--rv-icone-faixa-glifo);
  block-size: var(--rv-icone-faixa-glifo);
}

.rv-faixa-texto {
  flex: 1 1 18rem;
  min-inline-size: 0;
}

.rv-faixa-titulo {
  margin: 0;
  font-size: var(--rv-t-faixa-titulo);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rv-marinho-900);
}

.rv-faixa-texto p {
  margin: var(--espaco-2) 0 0;
  font-size: var(--rv-t-faixa-texto);
  line-height: 1.5;
  color: var(--rv-texto);
}

.rv-faixa-accao {
  padding-inline: var(--rv-botao-faixa-preench);
}

@media (prefers-reduced-motion: reduce) {
  .rv-cartao,
  .rv-botao {
    transition: none;
  }
}

/* ---- topo abaixo de 64rem (tablet e telemóvel): a fotografia é uma faixa de altura
 * proporcional, e o bloco sobrepõe-se-lhe só ~40 px e segue em fluxo normal — sem alturas
 * fixas que cortem conteúdo. */
@media (max-width: 63.99rem) {
  .rv-topo-imagem {
    block-size: auto;
    aspect-ratio: 16 / 7;
  }

  .rv-bloco {
    margin-block-start: calc(var(--rv-bloco-sobreposicao-movel) * -1);
  }
}

/* ---- tablet (< 60rem): os filtros passam a duas colunas. */
@media (max-width: 59.99rem) {
  .rv-filtro {
    flex-basis: calc(50% - var(--espaco-4));
  }
}

/* ---- telemóvel (< 48rem): tudo empilhado, alvos de 44 px. */
@media (max-width: 47.99rem) {
  .rv-topo-imagem {
    aspect-ratio: 4 / 3;
  }

  .rv-bloco {
    padding: var(--espaco-4);
  }

  .rv-painel-linha {
    flex-direction: column;
  }

  .rv-filtro {
    flex-basis: 100%;
  }

  .rv-limpar {
    margin-inline: auto;
  }

  .rv-lista-cabeca {
    flex-direction: column;
    align-items: stretch;
  }

  .rv-ordenar-caixa {
    flex: 1 1 auto;
  }

  .rv-faixa {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--espaco-5);
  }

  /* Em coluna, a base de 18rem do texto passava a ser ALTURA: um vazio de ~200 px entre o
   * texto e o botão (visto na captura a 375 px). Em coluna o texto mede o que tem. */
  .rv-faixa-texto {
    flex: 0 0 auto;
  }

  .rv-faixa-accao {
    inline-size: 100%;
  }
}

/* ---- ecrãs muito estreitos (< 22.5rem, 360 px): menos espaço interior no bloco e no
 * campo, para a pista curta caber inteira a 320 px (decisão do proprietário, opção A,
 * 20/10/2026). O texto não muda. O campo `type=search` do Chrome reserva à direita o
 * lugar do botão de limpar mesmo vazio: a margem direita fica em 4 px e o texto encosta
 * mais à lupa. Medido com o texto como valor: 0 px de excesso a 320 px. */
@media (max-width: 22.49rem) {
  .rv-bloco {
    padding: var(--espaco-3);
  }

  .rv-pesquisa-lupa {
    inset-inline-start: var(--espaco-3);
  }

  /* Parte 0.5: com o texto dos controlos a 15 e o ícone a 20, a pista curta excedia 17 px
   * a 320. Abaixo de 360 px o campo desce aos degraus de baixo da escala (texto 14, ícone 16). */
  .rv-painel {
    --rv-glifo-controlo: var(--esc-icone-16);
  }

  .rv-campo {
    padding-inline: calc(var(--espaco-3) + var(--rv-glifo-controlo) + var(--espaco-2)) var(--espaco-1);
    font-size: var(--esc-t-14);
  }
}

/* ---------------------------------------------------------------- mobile
 * O ponto de rutura é o do framework — `--rutura-controlos`, 44rem — e não um segundo
 * inventado aqui. `D-E06`: o ponto de rutura existe **onde a composição muda**, e a
 * composição que muda é a mesma: a linha de controlos e as duas colunas do detalhe.
 */
@media (max-width: 44rem) {
  .pr-filtro {
    flex-basis: auto;
  }

  .pr-detalhe-painel {
    flex-basis: auto;
    width: 100%;
  }

  /* DUAS COLUNAS ABAIXO DE 44 rem, E NÃO UMA. Três colunas a 704 px deixavam cada uma
   * com menos de 14 rem, e uma coluna mais estreita do que a ligação mais longa quebra
   * a meio da palavra. Uma coluna só resolvia isso e custava 130 px de altura — o
   * suficiente para `CV-1` deixar de valer a 320 px, porque uma página curta com um
   * rodapé de meio ecrã deixa de caber na janela. Duas colunas resolvem as duas.
   *
   * A identidade atravessa as duas, porque é o título do bloco e não uma coluna. */
  .pr-rodape-dentro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espaco-4) var(--espaco-5);
  }

  .pr-rodape-identidade {
    grid-column: 1 / -1;
  }

  /* ---- FORM-01 §10 e FORM-01-R1 §8: a versão móvel NÃO é uma redução do desktop.
   *
   * UMA COLUNA, COM O FORMULÁRIO PRIMEIRO — e aqui está a propriedade que a composição
   * de desktop comprou: a ordem das áreas em móvel é a ordem do DOM, pelo que a ordem
   * visual, a ordem de leitura e a ordem de foco são a MESMA. Não há desencontro
   * nenhum na largura em que ele mais custaria.
   *
   * Faixa mais baixa; cartão com menos goteira, porque a 320 px um `espaco/7` de cada
   * lado come 96 dos 320; e a linha do telefone a empilhar, porque a 320 px um
   * indicativo de 7,5rem ao lado do número deixa o número sem largura útil. */
  .pr-pedido-colunas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'principal'
      'contexto';
    gap: var(--espaco-5);
  }

  /* ---- FORM-01-R3 §9: o herói encolhe e a sobreposição quase desaparece.
   *
   * A 320 px uma fotografia de 22rem come metade da primeira dobra, e o que tem de estar
   * lá é o formulário. A sobreposição desce a 2,5rem: §9 autoriza reduzi-la ou
   * eliminá-la «quando necessário para preservar a usabilidade», e com o cartão a
   * ocupar a largura toda uma sobreposição grande esconderia o título do herói. */
  .pr-heroi {
    height: var(--pr-heroi-altura-movel);
  }

  /* A FAIXA DA CONSULTORIA CONTINUA A CRESCER COM O TEXTO, e a regra tem de viver AQUI.
   * Esteve no bloco de 30rem e não produzia efeito nenhum: a regra acima tem a mesma
   * especificidade e vem depois no ficheiro, pelo que ganhava e voltava a cortar o
   * terceiro conceito. Medido: 64 px cortados a 375 e 115 a 320. */
  .pr-heroi-cons {
    height: auto;
    min-height: var(--pr-heroi-altura-movel);
  }

  .pr-heroi-texto {
    padding-block: var(--espaco-4);
    max-width: none;
  }

  .pr-heroi-titulo {
    font-size: var(--esc-t-28);
  }

  .pr-heroi-subtitulo {
    font-size: var(--papel-valor-tamanho);
  }

  /* O gradiente passa a vertical: numa coluna estreita, escurecer só a esquerda deixava
   * o subtítulo sobre a zona clara da fotografia. */
  /* O véu volta a cobrir a faixa toda: o gradiente passa a vertical, e uma tira lavada
   * à esquerda ficaria visível ao fundo, onde o gradiente já é transparente. A coluna
   * de conteúdo aqui é quase a faixa inteira, pelo que não há o que recuar. */
  .pr-heroi::before {
    display: none;
  }

  .pr-heroi::after {
    grid-column: full;

    /* DENSO MAIS ABAIXO — `LAYOUT-GLOBAL-01-R1` §2. A zona de texto chega mais abaixo
     * do que as paragens previam: o subtítulo da Política a 320 px assenta a ~62 % da
     * altura e dava 4,11:1, medido sobre os píxeis das letras.
     *
     * E MAIS ABAIXO AINDA com a escala da Parte 0.5: o subtítulo a 14 px chega a ~80 % da
     * altura a 320 px e dava 3,33:1. A zona densa vai até 85 %. */
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--cor-superficie-base) 96%, transparent) 0%,
      color-mix(in srgb, var(--cor-superficie-base) 90%, transparent) 85%,
      color-mix(in srgb, var(--cor-superficie-base) 60%, transparent) 100%
    );
  }

  .pr-pedido-principal {
    margin-block-start: calc(var(--pr-sobreposicao-movel) * -1);
  }

  .pr-cartao-formulario {
    padding: var(--espaco-4);
    gap: var(--espaco-4);
  }

  /* O BOTÃO NÃO PARTE O RÓTULO EM DUAS LINHAS — `FORM-01-R5` §5.
   *
   * A goteira interna de `espaco/6` existe para um botão que se mede pelo conteúdo. Com
   * `width: 100%` o botão já ocupa a coluna toda e a goteira só serve para estreitar o
   * sítio onde o rótulo cabe: a 320 px sobravam 190 px para «Enviar pedido de
   * informação», que precisa de cerca de 200 e partia em duas linhas. Com `espaco/4` o
   * rótulo fica numa linha e o botão mantém a altura e o alvo de toque. */
  .pr-acoes .fw-botao {
    padding-inline: var(--espaco-4);
  }

  .pr-cartao-contexto {
    padding: var(--espaco-4);
  }

  /* O título da página encolhe um degrau: 33,6 px numa linha de 288 úteis quebrava em
   * três linhas e empurrava o formulário para baixo da dobra. */
  .pr-titulo-pagina {
    font-size: var(--esc-t-28);
  }

  .pr-lead {
    font-size: var(--papel-valor-tamanho);
  }

  /* `row-gap` E NÃO `gap`: as colunas desta grelha são as duas margens e o conteúdo, e
   * uma goteira entre elas roubava 16 px a cada margem — as migalhas começavam a 32
   * enquanto o cabeçalho começava a 16. Medido a 500, 375 e 320 px. */
  .pr-pagina-pedido {
    padding-block: var(--espaco-4) var(--espaco-7);
    row-gap: var(--espaco-4);
  }

  .pr-telefone-linha {
    flex-direction: column;
    align-items: stretch;
  }

  /* O indicativo deixa de abraçar: empilhado, a largura própria deixava um controlo
   * estreito e desalinhado do número que vem abaixo. */
  .pr-telefone-linha > .pr-combo[data-largura='conteudo'] {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ================================================================ DETALHE-02
 *
 * A PÁGINA DE DETALHE DE UMA OFERTA, com a composição do protótipo aprovado.
 *
 * ESTE BLOCO AJUSTA, E QUASE NÃO INVENTA. A maior parte da composição do protótipo já
 * existe neste ficheiro desde `CONS-01` — a faixa com véu, a escala tipográfica, o
 * painel tingido com cartões, as etapas com círculos e conectores, o acordeão, o cartão
 * do formulário e a faixa final. O protótipo de `DETALHE-02` é o MESMO protótipo, e por
 * isso o que `pr-det-*` faz é reaproveitá-lo com o conteúdo de uma oferta e acrescentar
 * as três secções que `CONS-01` não desenhou: destinos em cartão, testemunhos e a grelha
 * que põe o formulário ao lado deles.
 *
 * E ESTÁ NO FIM DO FICHEIRO, NUM BLOCO CONTÍGUO, DE PROPÓSITO. `HOME-01` está a ser
 * desenvolvido em paralelo e também escreve em `produto.css`; §13 manda isolar. Um bloco
 * no fim, sem editar regras existentes, é a menor superfície de conflito que este
 * ficheiro admite. */

/* ---- a faixa */

.pr-heroi-det .pr-heroi-texto {
  max-width: calc(var(--pr-heroi-medida-det) - 2 * var(--pr-heroi-goteira));
}

/* O VÉU DESTA FAIXA ACOMPANHA O TEXTO, E NÃO UMA PERCENTAGEM — `DETALHE-01-R4` §1.
 *
 * O DEFEITO, MEDIDO E NÃO SUPOSTO. O véu herdado de `.pr-heroi-cons` é um gradiente a
 * 96deg que se mantém denso até ~58 % da faixa e abre a seguir — afinado para um texto
 * que ocupa a metade esquerda. O subtítulo do detalhe não ocupa: o título vem da API e o
 * subtítulo é o primeiro parágrafo da descrição, e ambos crescem até ao limite da caixa.
 *
 * Amostrei o fundo por trás do subtítulo, sem o texto por cima, e calculei o rácio de
 * WCAG 2.1 contra a cor do glifo. O percentil 5 dos pixels, por largura:
 *
 *     1280 px  texto até 57 %   6,23:1   passa
 *     1100 px  texto até 67 %   4,01:1   FALHA
 *      768 px  texto até 93 %   1,22:1   FALHA
 *      375 px  texto até 95 %   4,46:1   FALHA
 *      320 px  texto até 94 %   1,70:1   FALHA
 *
 * A CORRECÇÃO É UMA SÓ, E NÃO UM PONTO DE CORTE POR BANDA. A paragem densa deixa de ser
 * uma percentagem e passa a ser o COMPRIMENTO da caixa de texto: o véu está denso
 * exactamente onde o texto pode chegar, e abre a seguir. Numa janela estreita a caixa é
 * mais larga do que a faixa, o `min()` satura, e a faixa inteira fica protegida — sem
 * uma única `@media` nova.
 *
 * JÁ NÃO É SÓ ESTA FAIXA. O que aqui estava escrito acabava em «`CONS-01`, `FORM-01`
 * e `PRIV-01` continuam com o véu que têm» — e tinham o mesmo defeito, medido em
 * `LAYOUT-GLOBAL-01-R1` §2. O gradiente subiu para `.pr-heroi::after`, parametrizado
 * por `--pr-veu-medida`; esta faixa só declara a sua medida. */
.pr-heroi-det {
  --pr-veu-medida: var(--pr-heroi-medida-det);
}

/* ---- apresentação, eixos e benefícios — §2 e §4 */

/* OS EIXOS DO CATÁLOGO, QUANDO EXISTIREM — e fora do fluxo quando não.
 *
 * `R-2.1-08` manda que um atributo por preencher não gere linha, e `detalhe.test.mjs`
 * guarda essa regra lendo a `<dl>`: a lista tem de existir para o teste a poder medir.
 * Em produção nenhuma das quatro ofertas tem eixos, pelo que a lista está lá e está
 * vazia — e uma grelha vazia dentro de uma coluna flexível continua a consumir a goteira
 * do pai, deixando um degrau de espaço sem conteúdo nenhum.
 *
 * `:empty` não serve: a `<dl>` tem nós de texto em branco do template. `:not(:has(dt))`
 * pergunta o que interessa — «esta lista tem linhas?». */
.pr-det-eixos {
  margin-block: var(--espaco-2);
}

.pr-det-eixos:not(:has(dt)) {
  display: none;
}

/* Dois a dois, como o protótipo, e não `auto-fit`: o painel é largo e `auto-fit` punha
 * os quatro numa linha a 1280 px, com cada benefício em 14rem — o título partia em três
 * linhas. Numa grelha de duas colunas, cada cartão tem metade do painel. */
.pr-det-beneficios {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- outros serviços — `DETALHE-03` §4
 *
 * AQUI VIVIAM OS DESTINOS ILUSTRATIVOS, OS TESTEMUNHOS E O FORMULÁRIO. Saíram os três,
 * e com eles saíram as regras e os comentários que os explicavam: a grelha de duas
 * colunas que punha o formulário ao lado das perguntas, o `:has()` que a desfazia
 * quando não havia testemunhos, o cartão de destino com fotografia e a linha de
 * créditos de licença. O histórico guarda-os.
 *
 * O QUE ENTRA NO LUGAR é uma lista de cartões das outras ofertas publicadas. A forma é
 * a do cartão da página inicial — mesma proporção de média, mesmo raio, mesma elevação —
 * e NÃO é o mesmo código: aquele é construído em JavaScript a partir do catálogo, este é
 * escrito no build. Partilhar a classe obrigaria um dos dois a ceder na estrutura. */
.pr-det-outros {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* A MESMA GRELHA FLUIDA DA LISTAGEM, e pela mesma razão: nenhum número de colunas está
 * escrito aqui. A `min()` é indispensável — `minmax(19rem, 1fr)` não encolhe abaixo de
 * 19rem e produz deslocamento horizontal a 320 px, que foi medido em `LAYOUT-GLOBAL-01`
 * na grelha vizinha. */
.pr-det-outros-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--pr-cartao-minimo), 100%), 1fr));
  gap: var(--espaco-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-det-outro {
  min-width: 0;
}

/* O CARTÃO INTEIRO É A LIGAÇÃO. Uma só paragem de tabulação por cartão, e o nome
 * acessível é o conteúdo dele — título, resumo e referência — que é o que um leitor de
 * ecrã precisa de ouvir para decidir se segue. */
.pr-det-outro-ligacao {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--fronteira-fina) solid var(--cor-fronteira-subtil);
  border-radius: var(--raio-l);
  background-color: var(--cor-superficie-elevada);
  box-shadow: var(--pr-elevacao-cartao);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease-out;
}

.pr-det-outro-ligacao:hover {
  border-color: var(--cor-fronteira-media);
}

/* O FOCO É O ANEL DO PRODUTO, e não o contorno do navegador: o cartão tem cantos
 * redondos, e um contorno rectangular num cartão redondo lê-se como defeito. */
.pr-det-outro-ligacao:focus-visible {
  outline: var(--fronteira-anel) solid var(--cor-fronteira-forte);
  outline-offset: var(--espaco-1);
}

/* 13/6, A PROPORÇÃO DO CARTÃO DA LISTAGEM. Com 16/9 a fotografia pesa mais do que o
 * texto que ilustra — está medido no comentário de `.pr-cartao-oferta-media`. */
.pr-det-outro-foto {
  display: block;
  width: 100%;

  /* `height: auto` NAO E REDUNDANTE, e custou uma medicao. Os atributos `width` e
   * `height` do HTML entram como DICA DE APRESENTACAO — uma declaracao de CSS de
   * especificidade zero — e, com os dois lados definidos, o `aspect-ratio` e ignorado:
   * medido, 393 x 450 num cartao que devia ter 393 x 181. Os atributos ficam, porque sao
   * eles que evitam o salto de disposicao antes de o byte da imagem chegar; o que muda e
   * a altura passar a sair da proporcao. */
  height: auto;
  aspect-ratio: 13 / 6;
  object-fit: cover;
  border-start-start-radius: var(--raio-l);
  border-start-end-radius: var(--raio-l);
  background-color: var(--pr-marca-tenue);
}

/* SEM FOTOGRAFIA, A CAIXA MANTÉM-SE. Um cartão sem média ao lado de outro com média dá
 * duas alturas diferentes na mesma linha; o lugar fica, com o selo do produto ao centro.
 * É o mesmo tratamento que a listagem dá — `HOME-01` §8, medido. */
.pr-det-outro-foto[data-sem-imagem='sim'] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pr-tinta-marca);
}

.pr-det-outro-corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
}

.pr-det-outro-titulo {
  font-size: var(--papel-titulo-cartao-tamanho);
  font-weight: var(--papel-titulo-cartao-peso);
  line-height: 1.25;
  color: var(--pr-tinta-marca);
}

/* O resumo não pode empurrar a referência para fora do cartão: duas linhas, e o resto
 * fica na página da oferta, que é para onde o cartão leva. */
.pr-det-outro-resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--cor-texto-corpo);
}

/* A REFERÊNCIA ENCOSTA À BASE. Sem isto, num cartão mais alto do que o vizinho ela fica
 * a meio e a linha de baixo dos cartões deixa de se ler como uma linha. */
.pr-det-outro-corpo > :last-child {
  margin-block-start: auto;
}

.pr-det-outros-vazio {
  margin: 0;
}

.pr-det-faq {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* ---- responsivo
 *
 * A ORDEM DO DOM É A ORDEM VISUAL EM TODAS AS LARGURAS, como em `CONS-01`: não há
 * `order` nenhum nesta página, e o que empilha empilha pela ordem do ficheiro — faixa,
 * apresentação, etapas, perguntas, outros serviços, chamada final.
 *
 * A REGRA DE 60rem EXISTIA PARA `pr-det-dialogo`, a grelha de duas colunas que punha o
 * formulário ao lado das perguntas. `DETALHE-03` §4 tirou-a, e aqui ficou só o que já
 * valia por si: os benefícios passam a uma coluna. A grelha dos outros serviços não
 * precisa de ponto de rutura — é `auto-fill`, e reflui sozinha. */
@media (max-width: 60rem) {
  .pr-det-beneficios {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 30rem) {
  /* O ORÇAMENTO DE ALTURA DE `CV-1`, A 320 px. A página curta mede 419 px sem rodapé
   * numa janela de 640: o rodapé tem 221 px antes de a página deixar de caber e o
   * critério deixar de valer. Daqui saem 204. A goteira vertical das listas vai a zero
   * porque o alvo de toque de 32 px já separa as ligações — e separá-las duas vezes
   * custava 36 px que não há. */
  .pr-rodape {
    margin-block-start: var(--espaco-5);
    padding-block: var(--espaco-5) var(--espaco-4);
  }

  /* Parte 0.5: com as ligações a 44 px e o logótipo maior, três ligações em coluna já
   * não cabiam no orçamento (657 px numa janela de 640). Em linha, cada grupo ocupa uma
   * linha de 44 px, e as colunas passam a uma só. */
  .pr-rodape-dentro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-3);
  }

  .pr-rodape-grupo {
    gap: 0;
  }

  .pr-rodape-lista {
    flex-flow: row wrap;
    gap: 0 var(--espaco-5);
  }
}

/* ---------------------------------------------------------------- CABEÇALHO (Parte 0.5)
 *
 * GERADO NO BUILD (`src/_includes/cabecalho.njk`), em duas linhas brancas — 76 px de
 * identidade e utilidades, 60 px de navegação, separadas por uma linha fina —, 136 px no
 * total. No telemóvel (< 48rem), uma linha de 64 px: logótipo | menu.
 * `ESPEC_HARMONIZACAO_VISUAL.md` §2. Só tokens da escala (ADR-085).
 */

/* O CABEÇALHO FICA NO TOPO DURANTE O SCROLL. O `sticky` vive na âncora, filha do corpo:
 * posto no `.pr-cab`, não colava (o pai teria a altura exacta do cabeçalho). Como o HTML
 * já vem do build, a altura está lá desde o primeiro pixel: CLS = 0 sem reserva. */
.pr-cab-ancora {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

.pr-cab {
  position: relative;
  background-color: var(--esc-branco);
  border-block-end: var(--fronteira-fina) solid var(--rv-borda-cartao);
}

.pr-cab-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
}

/* A LINHA FINA ENTRE AS DUAS LINHAS ocupa a largura toda (é da camada, e não do
 * contentor), e a última fecha o cabeçalho. As duas fronteiras contam dentro dos 136. */
.pr-cab-utilidades {
  border-block-end: var(--fronteira-fina) solid var(--rv-borda-cartao);
}

.pr-cab-utilidades .pr-cab-linha {
  block-size: calc(var(--pr-cab-altura) - var(--fronteira-fina));
  justify-content: space-between;
}

.pr-cab-navegacao .pr-cab-linha {
  block-size: calc(var(--pr-cab-altura-nav) - var(--fronteira-fina));
}

/* ---- identidade */
.pr-cab-marca {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: var(--esc-raio-controlo);
}

.pr-cab-logo {
  display: block;
  block-size: var(--pr-cab-logo-altura);
  inline-size: auto;
}

.pr-cab-utils {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espaco-4);
  min-inline-size: 0;
}

/* ---- Mercado / Moeda / Idioma: UM grupo segmentado, informativo. Não encolhe: entre 48 e
 * 64rem, o flexbox espremia a bandeira até 0 px (revisão de 21/10/2026). Quem cede é o
 * espaço reservado, que não mostra nada. */
.pr-cab-regiao {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  margin: 0;
  block-size: var(--esc-controlo);
  border: var(--fronteira-fina) solid var(--rv-borda-cartao);
  border-radius: var(--esc-raio-controlo);
  background-color: var(--esc-branco);
  font-size: var(--esc-t-14);
  font-weight: 500;
  color: var(--rv-marinho-900);
}

.pr-cab-regiao-item {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-inline: var(--espaco-4);
}

.pr-cab-regiao-item + .pr-cab-regiao-item {
  border-inline-start: var(--fronteira-fina) solid var(--rv-borda-cartao);
}

.pr-cab-bandeira {
  flex: none;
  inline-size: var(--esc-icone-20);
  block-size: var(--esc-icone-20);
  border-radius: 50%;
}

/* ESPAÇO RESERVADO para funcionalidades futuras: ocupa, e NADA se vê — nem a linha
 * vertical da proposta (decisão do proprietário, 21/10/2026). */
.pr-cab-reservado {
  flex: 0 1 var(--pr-cab-reservado);
  align-self: stretch;
}

/* ---- «Consulta gratuita»: a acção principal, a 44 px. */
.pr-cab-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--espaco-2);
  min-block-size: var(--esc-controlo);
  padding-inline: var(--espaco-5);
  border-radius: var(--esc-raio-controlo);
  background-color: var(--rv-marinho-700);
  color: var(--esc-branco);
  font-size: var(--esc-t-15);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pr-cab-cta:hover {
  background-color: var(--rv-marinho-800);
}

/* ---- navegação */
.pr-cab-nav-lista {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-cab-nav-lista > li {
  position: relative;
}

/* «Início»: 44 × 44, raio 10, ícone de 20. Na página inicial, fundo da acção e ícone
 * branco; nas outras, azul-claro e ícone azul. */
.pr-cab-inicio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--esc-controlo);
  block-size: var(--esc-controlo);
  border-radius: var(--esc-raio-controlo);
  background-color: var(--rv-azul-050);
  color: var(--rv-marinho-700);
}

.pr-cab-inicio[aria-current='page'] {
  background-color: var(--rv-marinho-700);
  color: var(--esc-branco);
}

/* Os menus: 15 px / 500, 44 px, raio 10, 14 px de lado. Hover, aberto e secção actual
 * com fundo azul-claro e texto azul; a actual a 600 e com `aria-current`. */
.pr-cab-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-block-size: var(--esc-controlo);
  padding-inline: var(--pr-cab-menu-lado);
  border-radius: var(--esc-raio-controlo);
  color: var(--rv-marinho-900);
  font-size: var(--esc-t-15);
  font-weight: 500;
  text-decoration: none;
}

.pr-cab-nav-item:hover,
.pr-cab-nav-item[aria-expanded='true'],
.pr-cab-nav-item[aria-current='page'] {
  background-color: var(--rv-azul-050);
  color: var(--rv-marinho-700);
}

.pr-cab-nav-item[aria-current='page'] {
  font-weight: 600;
}

.pr-cab-nav-item[aria-expanded='true'] .fw-icone {
  transform: rotate(180deg);
}

/* ---- o painel de «Serviços» */
.pr-cab-painel {
  position: absolute;
  inset-block-start: calc(100% + var(--espaco-2));
  inset-inline-start: 0;
  z-index: 1;
  inline-size: var(--pr-cab-painel-largura);
  padding: var(--espaco-3);
  border: var(--fronteira-fina) solid var(--rv-borda-cartao);
  border-radius: var(--esc-raio-cartao);
  background-color: var(--esc-branco);
  box-shadow: var(--esc-sombra-elevada);
}

.pr-cab-servicos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-cab-servico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-3);
  border-radius: var(--esc-raio-controlo);
  color: var(--rv-marinho-900);
  text-decoration: none;
}

.pr-cab-servico:hover {
  background-color: var(--rv-azul-050);
}

.pr-cab-servico-titulo {
  font-size: var(--esc-t-15);
  font-weight: 600;
}

.pr-cab-servico-resumo {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--esc-t-14);
  color: var(--rv-texto);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pr-cab-painel-rodape {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-block-size: var(--esc-controlo);
  margin-block-start: var(--espaco-2);
  padding-inline: var(--espaco-3);
  border-block-start: var(--fronteira-fina) solid var(--rv-borda-cartao);
  color: var(--rv-marinho-700);
  font-size: var(--esc-t-15);
  font-weight: 600;
  text-decoration: none;
}

/* ---- foco visível em tudo o que se alcança */
.pr-cab :is(a, button):focus-visible {
  outline: var(--rv-anel) solid var(--rv-marinho-700);
  outline-offset: var(--rv-anel);
}

/* ---- telemóvel: o botão e o painel (o botão só aparece com JavaScript: `hidden` no HTML) */
.pr-cab-hamburguer {
  display: none;
}

.pr-cab-hamburguer,
.pr-cab-movel-fechar {
  align-items: center;
  justify-content: center;
  inline-size: var(--esc-controlo);
  block-size: var(--esc-controlo);
  border: var(--fronteira-fina) solid var(--rv-borda-cartao);
  border-radius: var(--esc-raio-controlo);
  background-color: var(--esc-branco);
  color: var(--rv-marinho-900);
  cursor: pointer;
}

.pr-cab-painel-movel {
  display: none;
}

@media (max-width: 47.99rem) {
  :root {
    --pr-cab-altura-total: var(--pr-cab-altura-movel);
  }

  .pr-cab-utilidades {
    border-block-end: 0;
  }

  .pr-cab-utilidades .pr-cab-linha {
    block-size: calc(var(--pr-cab-altura-movel) - var(--fronteira-fina));
  }

  .pr-cab-navegacao,
  .pr-cab-regiao-larga,
  .pr-cab-reservado,
  .pr-cab-utilidades .pr-cab-cta {
    display: none;
  }

  .pr-cab-logo {
    block-size: var(--pr-cab-logo-movel);
  }

  .pr-cab-hamburguer:not([hidden]) {
    display: inline-flex;
  }

  .pr-cab-painel-movel:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
    padding: var(--espaco-4);
    overflow-y: auto;
    background-color: var(--esc-branco);
  }

  .pr-cab-movel-fechar {
    display: inline-flex;
  }

  .pr-cab-movel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: var(--esc-controlo);
  }

  .pr-cab-movel-lista {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pr-cab-movel-item {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    min-block-size: var(--esc-controlo-principal);
    padding-inline: var(--pr-cab-menu-lado);
    border-radius: var(--esc-raio-controlo);
    color: var(--rv-marinho-900);
    font-size: var(--esc-t-16);
    font-weight: 500;
    text-decoration: none;
  }

  .pr-cab-movel-item[aria-current='page'] {
    background-color: var(--rv-azul-050);
    color: var(--rv-marinho-700);
    font-weight: 600;
  }

  .pr-cab-regiao-movel {
    align-self: flex-start;
  }

  .pr-cab-cta-movel {
    justify-content: center;
    min-block-size: var(--esc-controlo-principal);
  }
}

/* ---------------------------------------------------------------- CONSULTA-02
 *
 * A PÁGINA ÚNICA DE CONSULTA GRATUITA, NA COMPOSIÇÃO APROVADA.
 *
 * # O QUE ESTA SECÇÃO TEM, E O QUE DELIBERADAMENTE NÃO TEM
 *
 * `CONSULTA-01` tinha aqui uma composição própria — `.pr-consulta-dialogo`, com colunas,
 * linhas, goteiras e pontos de rutura só seus. `CONSULTA-02` §1 manda recuperar a
 * composição aprovada da página «Solicitar mais informações», e essa composição JÁ ESTÁ
 * NESTA FOLHA: é a secção `FORM-01`, acima.
 *
 * Por isso o que ficou aqui é o MÍNIMO que a diferença exige, e nada mais:
 *
 *   · uma terceira área na grelha das duas colunas, para as perguntas frequentes, que a
 *     página de pedido não tem;
 *   · a ordem de colapso em móvel, que é a inversa da da página de pedido;
 *   · as peças das perguntas frequentes, que são desta página.
 *
 * NÃO HÁ AQUI UMA SEGUNDA DEFINIÇÃO DE COLUNA, DE CARTÃO, DE FAIXA OU DE SOBREPOSIÇÃO.
 * As proporções (35/65), a goteira, a elevação, o fio de marca, o recuo do cartão sobre
 * a faixa e as reduções de goteira a 320 px vêm todas de `.pr-pedido-colunas`,
 * `.pr-pedido-contexto`, `.pr-pedido-principal`, `.pr-cartao-formulario`,
 * `.pr-cartao-contexto`, `.pr-cartao-destaque`, `.pr-contexto-foto` e `.pr-apoio-faixa`.
 * §7 pede «proporções semelhantes às da referência»: são as MESMAS, porque são as
 * mesmas regras.
 *
 * Saiu daqui `.pr-consulta-dialogo` com as suas três regras de posição, e saíram
 * `.pr-consulta-passos`/`.pr-consulta-passo-icone` — os três passos passaram a usar
 * `.pr-caracteristicas`, que é a lista numerada com ícone do layout aprovado. Eram CSS
 * que mais nada lia.
 *
 * # A TERCEIRA ÁREA, E PORQUE A GRELHA É `auto 1fr`
 *
 * `auto 1fr` E NÃO AS DUAS A `auto`, e a diferença vê-se logo. O formulário atravessa as
 * duas linhas e é mais alto do que o contexto. Com as duas linhas automáticas, o
 * excedente dele distribui-se pelas duas e as perguntas eram empurradas centenas de
 * píxeis para baixo — ficava um vazio entre o contexto e elas, do lado esquerdo, com o
 * formulário ao lado a preenchê-lo. Medido em `CONSULTA-01`, e continua a valer.
 *
 * Com `auto 1fr`, a primeira linha mede o que o contexto precisa e a segunda absorve o
 * resto: as perguntas encostam ao contexto, e a coluna lê-se como uma coluna. */

.pr-consulta-colunas {
  grid-template-areas:
    'contexto principal'
    'perguntas principal';
  grid-template-rows: auto 1fr;
  row-gap: var(--espaco-7);
}

.pr-consulta-colunas > .pr-consulta-faq {
  grid-area: perguntas;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

/* O ESTADO EDITORIAL É TEXTO, E NÃO UM TOM MAIS CLARO — `CONSULTA-01` §8.
 *
 * §8 mandava entregar a estrutura «com estado editorial explícito» quando não há
 * conteúdo aprovado. Um estado que dependa de reparar numa cor não declara nada; este é
 * uma frase, lida por quem lê e anunciada por quem ouve. */
.pr-consulta-editorial {
  margin: 0;
  color: var(--cor-texto-secundario);
}

.pr-consulta-faq-servicos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: var(--espaco-2) 0 var(--espaco-3);
  padding-inline-start: var(--espaco-5);
}

/* A LIGAÇÃO PARA A OFERTA, que só aparece quando há oferta escolhida. O parágrafo não
 * tem margem porque a goteira é a do cartão; o `hidden` é tratado pelo browser. */
.pr-contexto-ligacao {
  margin: 0;
}

/* ---- UMA COLUNA ABAIXO DE 60 rem, E A ORDEM É A INVERSA DA DA PÁGINA DE PEDIDO.
 *
 * O PONTO DE RUTURA É 60 rem E NÃO O DE `FORM-01` (44 rem), e é medida e não gosto. Nas
 * duas colunas de 35/65 a coluna do contexto leva três cartões empilhados; a 768 px
 * ficaria com 240 px úteis, onde o título de um serviço quebra a meio da palavra e a
 * fotografia inferior fica com 135 px de altura. 60 rem é o ponto onde a composição
 * muda de facto — `D-E06` —, e é o mesmo que `CONSULTA-01` mediu e que a produção já
 * validou nesta página.
 *
 * A ORDEM É `contexto` → `principal` → `perguntas`, que é a ordem do DOM e a que §7
 * pede para móvel: «contexto editorial antes do formulário». A página de pedido faz o
 * contrário — `principal` → `contexto` — porque `FORM-01-R1` §1 queria o formulário
 * primeiro em móvel. São dois mandatos diferentes para duas páginas diferentes, e é por
 * isso que as áreas se redeclaram aqui em vez de se partilhar uma só ordem.
 *
 * E AS ÁREAS REDECLARAM-SE EM VEZ DE SE ANULAREM: numa grelha de uma coluna, deixar
 * activas as áreas de duas colunas punha o formulário a atravessar duas linhas que já
 * não existem. */
@media (max-width: 60rem) {
  .pr-pedido-colunas.pr-consulta-colunas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'contexto'
      'principal'
      'perguntas';
    grid-template-rows: auto;
    gap: var(--espaco-6);
  }

  /* A SOBREPOSIÇÃO DESAPARECE, E TEM DE DESAPARECER. O recuo negativo existe para o
   * cartão subir sobre a FAIXA; com o contexto primeiro na coluna única, o que ele
   * passaria a cobrir era a fotografia do contexto. `FORM-01-R3` §9 autoriza reduzir ou
   * eliminar a sobreposição «quando necessário para preservar a usabilidade», e numa
   * coluna única sobre a coluna anterior não há usabilidade nenhuma a preservar. */
  .pr-consulta-colunas > .pr-pedido-principal {
    margin-block-start: 0;
  }

  /* E A COLUNA GANHA MEDIDA DE LEITURA, em vez de atravessar a página. É a mesma
   * decisão de `DETALHE-02-R1` §3: sozinho na linha, um cartão a 1000 px põe o rótulo
   * de um campo a um palmo do próprio campo. Centrada, porque a folga dividida pelos
   * dois lados lê-se como destaque e encostada lê-se como coluna órfã.
   *
   * É A COLUNA E NÃO SÓ O CARTÃO: os três apoios vivem debaixo dele e têm de ficar
   * alinhados com ele, e não com a largura da página. */
  .pr-consulta-colunas > .pr-pedido-principal,
  .pr-consulta-colunas > .pr-pedido-contexto,
  .pr-consulta-colunas > .pr-consulta-faq {
    max-width: var(--pr-det-formulario-medida);
    margin-inline: auto;
    width: 100%;
  }
}