/* mocosense · painel.css — o estilo da aplicação, montado dos quatro grupos
 * de ecrãs. Cada grupo prefixou as suas classes (mold-, ps-, cc-, sf-) para
 * não colidirem entre si nem com a landing. */

/* ═══════════════════════ moldura ═══════════════════════ */
/* mocosense · a moldura da aplicação — painel.css
 * ═══════════════════════════════════════════════════════════════════════════
 * O chrome que envolve todos os ecrãs: cabeçalho, destinos, gaveta do câmbio,
 * separadores do telemóvel, e as peças da própria moldura (espera, avaria,
 * ecrã 12). Prefixo `mold-` em tudo, para não colidir com os grupos dos ecrãs.
 *
 * As medidas são as do desenho aprovado e não se arredondam: cabeçalho 76px
 * (56px no telemóvel), tira da gaveta 64px, gaveta aberta 430px (400px no
 * telemóvel, assente nos 72px dos separadores), pega 46×3, transição 220ms.
 *
 * O PONTO DE VIRAGEM É 1100px, e a fila do cabeçalho é MEDIDA, não estimada.
 * Medição de 12-09-2026, com as OITO pastilhas de hoje (Hoje, Banca, Câmbio,
 * Comércio, Redes sociais, «187 indicadores», Fontes, Os planos), no
 * navegador embutido, a cada largura de janela:
 *   document.querySelector('.mold-topo').scrollWidth
 *   document.getElementById('mold-avatar').getBoundingClientRect().right
 *   [...document.querySelector('.mold-topo').children].map(c => c.getBoundingClientRect().width)
 * A conta de seis destinos que aqui estava («~1240px à folga plena») deixou
 * de valer: com oito, à folga plena (18px por pastilha, 24px entre grupos), a
 * fila pedia 1408px — marca 108 + destinos 772 + procurar 86 + câmbio 120 +
 * identidade 146 + 4×24 + 2×40 — e 1312 com a folga de 12px. A 1100, 1200,
 * 1280 e 1366 transbordava (o avatar acabava a 1368px numa janela de 1280) e
 * a identidade da conta saía do ecrã pela direita, sem rolo e sem aviso.
 *
 * Daí três larguras, cada uma medida depois da correcção, com o câmbio a
 * dizer 912,80 e com o botão da recepção presente:
 *   ≥ 1600px  o desenho à folga plena. Pede 1422 (os destinos levam mais 12
 *             de respiro para o anel de foco); com o «Por onde começar?»
 *             inteiro da recepção, 1569. A 1600 o avatar acaba a 1560.
 *   1280–1599 16px entre grupos, 4px entre pastilhas, 10px de folga em cada
 *             uma. Pede 1248; com o «?» da recepção 1304, com o texto inteiro
 *             1395. A 1280 e a 1366 o avatar acaba a 1240 e a 1326.
 *   1100–1279 12px entre grupos, a marca a 15px, «procurar» e o câmbio com
 *             12px de folga, e o nome da conta recolhe-se como no telemóvel
 *             (fica o avatar, com o nome no aria-label). Pede 1079; a 1100 o
 *             avatar acaba a 1060.
 * Uma pastilha a dizer «1.024 indicadores» custa mais 11px e continua a caber
 * nas três. Se um dia não couber, os destinos rolam (min-inline-size: 0 e
 * overflow-x em .mold-destinos) em vez de empurrarem a conta para fora.
 * Abaixo de 1100px o telemóvel manda: barra de 56px em cima e os oito
 * destinos em separadores de 48px no fundo do ecrã — e recepcao.css,
 * relatorio.css e sector.css contam com este mesmo 1100 para a folha, a barra
 * do total e as colunas; não se sobe sem eles. */

/* ── o cabeçalho ───────────────────────────────────────────────────────── */
.mold-topo {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 30;
  block-size: 76px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 40px;
  background: var(--fundo);
  box-shadow: 0 1px 0 var(--linha);
}
.mold-marca {
  font-family: var(--fonte-display); font-weight: 700; font-size: 20px;
  letter-spacing: -.02em; color: var(--azul-moco); text-decoration: none;
  flex: none;
  /* O alvo é a regra dura dos 44px — o texto tem 23; o resto é área de toque. */
  display: inline-flex; align-items: center; min-block-size: 44px;
}
/* Os destinos são o único grupo que pode encolher: min-inline-size 0 tira-lhes
 * o mínimo automático do flex, e o overflow deixa-os rolar em vez de empurrar
 * a identidade da conta para fora do ecrã — foi o que aconteceu a 12-09-2026
 * com a oitava pastilha (ver a conta no cabeçalho do ficheiro). O respiro de
 * 6px, devolvido no bloco, é para o anel de foco (2px a 3px de distância) não
 * ser cortado pelo overflow. Com as folgas de baixo, a 1100px ou mais nada
 * rola de facto; o rolo é a rede para o dia em que uma pastilha crescer. */
.mold-destinos {
  display: flex; gap: 6px; margin-inline: auto;
  min-inline-size: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 6px; margin-block: -6px;
}
.mold-destinos .mold-pastilha { flex: none; }

.mold-pastilha {
  display: inline-flex; align-items: center;
  min-block-size: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 13px; color: var(--secundario); text-decoration: none;
  white-space: nowrap;
}
.mold-pastilha:hover { color: var(--tinta); }
.mold-pastilha[aria-current="page"] {
  background: var(--escuro); color: var(--escuro-texto); font-weight: 600;
}

/* A PASTILHA DA MONTRA. Não é um destino de dados como os outros seis: leva ao
 * que se vende. Distingue-se por um traço à esquerda e pela tinta da casa —
 * nunca por cor sozinha, e nunca com o peso de um botão, que a poria a
 * competir com «procurar» e com o câmbio do dia. Acesa, comporta-se como
 * qualquer outra: quem está nos planos vê onde está. */
.mold-pastilha--montra {
  color: var(--azul-moco); font-weight: 600;
  border-inline-start: 1px solid var(--linha); border-radius: 0 999px 999px 0;
  margin-inline-start: 6px;
}
.mold-pastilha--montra:hover { color: var(--azul-moco); }
.mold-tabs .mold-pastilha--montra { border-inline-start: none; margin-inline-start: 0; }

.mold-procurar {
  display: inline-flex; align-items: center; flex: none;
  min-block-size: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--fundo); box-shadow: var(--relevo-in);
  color: var(--secundario); font-size: 13px; text-decoration: none;
}

/* A pastilha escura do câmbio. Os dois tons do escuro não têm token na folha
 * da casa; ficam por extenso, como no livre-vs-pago da landing: #93A1B1 mede
 * 7,2:1 sobre #0B1119. */
.mold-taxa {
  display: inline-flex; align-items: baseline; gap: 8px; flex: none;
  min-block-size: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--escuro); border: 0; cursor: pointer; font: inherit;
}
.mold-taxa-moeda {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #93A1B1;
}
.mold-taxa-num {
  font-family: var(--fonte-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.03em; color: var(--escuro-texto);
  font-variant-numeric: tabular-nums;
}
.mold-cauda { font-size: .62em; font-weight: 600; letter-spacing: -.02em; }

.mold-conta { display: flex; align-items: center; gap: 12px; flex: none; }
.mold-conta-texto { display: block; text-align: end; line-height: 1.3; text-decoration: none; cursor: pointer; }
.mold-conta-texto:hover .mold-conta-plano, .mold-conta-texto:focus-visible .mold-conta-plano { text-decoration: underline; color: var(--azul-moco); }
.mold-conta-nome { display: block; font-size: 13px; font-weight: 600; color: var(--azul-moco); white-space: nowrap; }
.mold-conta-plano { display: block; font-size: 11px; color: var(--secundario); white-space: nowrap; }
.mold-avatar {
  inline-size: 44px; block-size: 44px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); font-weight: 600; font-size: 13px;
  text-decoration: none;
  background: var(--creme-moco); color: var(--azul-moco);
}
.mold-avatar[data-sessao="analista"] { background: var(--azul-moco); color: var(--creme-moco); }

/* ── as folgas do cabeçalho, por largura ───────────────────────────────── */
/* As medidas estão na conta do cabeçalho do ficheiro. Acima de 1600px vale o
 * desenho à folga plena (as regras de cima); abaixo, dois degraus, e em
 * nenhum deles se esconde um destino. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .mold-topo { gap: 16px; }
  .mold-destinos { gap: 4px; }
  .mold-destinos .mold-pastilha { padding: 0 10px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .mold-topo { gap: 12px; }
  .mold-marca { font-size: 15px; } /* a medida do telemóvel */
  .mold-destinos { gap: 4px; }
  .mold-destinos .mold-pastilha { padding: 0 10px; }
  .mold-procurar, .mold-taxa { padding: 0 12px; }
  /* Como no telemóvel: fica o avatar, e o nome com o estado da conta vive no
   * aria-label que painel.js lhe põe. */
  .mold-conta-texto { display: none; }
}

/* ── o palco único ─────────────────────────────────────────────────────── */
/* O respiro de baixo conta a tira da gaveta (64px) mais folga; no telemóvel
 * conta também os 72px dos separadores. Os ecrãs NÃO acrescentam moldura
 * exterior própria — este é o único sítio onde ela vive. */
.mold-ecra {
  display: block;
  max-inline-size: 1440px; margin-inline: auto;
  min-block-size: 100vh;
  padding: calc(76px + 40px) 40px calc(64px + 48px);
}
.mold-ecra:focus { outline: none; } /* o foco programático não pinta caixa — os controlos pintam o deles */

/* ── saltar para o conteúdo ────────────────────────────────────────────── */
.mold-saltar {
  position: fixed; inset-block-start: -60px; inset-inline-start: 16px; z-index: 60;
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding: 0 18px; border-radius: 999px;
  background: var(--escuro); color: var(--escuro-texto);
  font-size: 13px; text-decoration: none;
  transition: inset-block-start 150ms ease-out;
}
.mold-saltar:focus { inset-block-start: 16px; }

/* ── a gaveta do câmbio ────────────────────────────────────────────────── */
/* Fechada mostra 64px: 18px de folga + 44px de linha + o raio. A abertura é
 * transform e não height, para a transição de 220ms não reflow-ar a página —
 * e sob prefers-reduced-motion morre sozinha pela regra global da casa. */
.mold-gaveta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  block-size: 430px;
  padding: 18px 20px 0;
  background: rgba(11, 17, 25, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 24px 24px 0 0;
  transform: translateY(366px);
  transition: transform 220ms ease-out;
}
.mold-gaveta[data-aberta="sim"] { transform: translateY(0); }

/* Sem desfoque de fundo — e para quem pediu menos transparência — a gaveta
 * fica opaca e ESCURA: o utilitário .vidro--opaco da casa é claro e aqui
 * mentiria sobre a superfície. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mold-gaveta { background: #0B1119; }
}
@media (prefers-reduced-transparency: reduce) {
  .mold-gaveta { background: #0B1119; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.mold-gaveta-pega {
  position: absolute; inset-inline-start: 50%; inset-block-start: 8px;
  translate: -50% 0;
  inline-size: 46px; block-size: 3px; border-radius: 2px;
  background: rgba(232, 221, 200, .5);
}
.mold-gaveta-topo {
  display: block; inline-size: 100%; min-block-size: 44px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.mold-gaveta-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; block-size: 44px;
}
.mold-gaveta-titulo { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; }
.mold-taxa-num--gaveta { font-size: 22px; }
.mold-gaveta-meta { font-size: 11px; color: #93A1B1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mold-gaveta-accao { font-size: 11px; color: var(--creme-moco); white-space: nowrap; }

.mold-gaveta-corpo {
  border-block-start: 1px solid rgba(232, 221, 200, .16);
  padding-block-start: 12px;
}
.mold-gaveta-rotulo {
  margin: 0 0 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #93A1B1;
}
/* Cabem ~15 linhas nos 430px; com vinte balcões o resto rola aqui dentro —
 * a lista leva tabindex para o teclado rolar como o dedo. */
.mold-gaveta-balcoes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  max-block-size: 236px; overflow-y: auto;
}
.mold-gaveta-balcoes:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.mold-gaveta-balcao { display: flex; align-items: center; gap: 12px; }
.mold-gaveta-nome {
  flex: none; inline-size: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: #93A1B1; font-variant-numeric: tabular-nums;
}
.mold-gaveta-barra { flex: 1; block-size: 6px; display: block; }
.mold-barra-fundo { fill: rgba(232, 221, 200, .14); }
.mold-barra-cheia { fill: var(--creme-moco); }
.mold-barra-cara  { fill: var(--ambar); } /* o mais caro — a única cor de acento da gaveta */
.mold-gaveta-taxa {
  flex: none; inline-size: 68px; text-align: end;
  font-size: 11px; color: var(--escuro-texto); font-variant-numeric: tabular-nums;
}
.mold-gaveta-pe {
  margin: 12px 0 0; padding-block-end: 14px;
  font-size: 11px; color: #93A1B1; font-variant-numeric: tabular-nums;
}
.mold-gaveta-vazio { font-size: 13px; line-height: 1.55; color: var(--escuro-texto); max-inline-size: 520px; }

/* O vidro sobre um NOME, nunca sobre um número: desfoca-se a estrutura com o
 * nome codificado, e um véu tira a tentação de ler por baixo. */
.mold-veu { position: relative; display: inline-block; border-radius: 4px; overflow: hidden; }
.mold-veu-texto { filter: blur(4px); }
.mold-veu::after { content: ''; position: absolute; inset: 0; background: rgba(232, 221, 200, .1); }

/* ── os separadores do telemóvel ───────────────────────────────────────── */
.mold-tabs { display: none; }

@media (max-width: 1099px) {
  .mold-topo { block-size: 56px; padding: 0 20px; gap: 8px; }
  .mold-marca { font-size: 15px; }
  .mold-destinos, .mold-conta-texto { display: none; }
  /* 44px é a regra dura da casa — 40 era estética a custo de dedo. */
  .mold-procurar { min-block-size: 44px; padding: 0 14px; font-size: 12px; margin-inline-start: auto; }
  .mold-taxa { min-block-size: 44px; padding: 0 14px; }
  .mold-taxa-num { font-size: 13px; }
  .mold-avatar { inline-size: 44px; block-size: 44px; font-size: 12px; }

  .mold-tabs {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
    block-size: 72px;
    display: flex; align-items: center; justify-content: space-around;
    padding: 0 6px;
    background: var(--fundo);
    box-shadow: 0 -1px 0 var(--linha);
  }
  .mold-tabs .mold-pastilha { min-block-size: 48px; padding: 0 10px; font-size: 11px; }

  .mold-ecra { padding: calc(56px + 20px) 20px calc(72px + 64px + 24px); }

  .mold-gaveta { inset-block-end: 72px; block-size: 400px; transform: translateY(336px); }
  .mold-gaveta[data-aberta="sim"] { transform: translateY(0); }
  .mold-gaveta-balcoes { max-block-size: 210px; }
  .mold-taxa-num--gaveta { font-size: 18px; }
}

/* ── sem JavaScript ────────────────────────────────────────────────────── */
.mold-semjs {
  margin: calc(76px + 40px) auto 40px; max-inline-size: 640px;
  background: var(--superficie); border-radius: 6px; padding: 20px;
  font-size: 15px; line-height: 1.55; color: var(--tinta);
}

/* ── a espera e a avaria ───────────────────────────────────────────────── */
.mold-espera { display: grid; gap: 12px; max-inline-size: 720px; }
.mold-espera-bloco { display: block; block-size: 48px; }
.mold-espera--a { inline-size: 100%; block-size: 56px; }
.mold-espera--b { inline-size: 62%; }
.mold-espera--c { inline-size: 84%; }
.mold-espera--d { inline-size: 45%; }

.mold-avaria {
  background: var(--superficie); border-radius: 6px; padding: 20px;
  max-inline-size: 640px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.mold-avaria-titulo { margin: 0; font-family: var(--fonte-display); font-weight: 700; font-size: 20px; color: var(--azul-moco); }
.mold-avaria-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta); }
.mold-avaria-tenta {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--azul-moco); color: var(--creme-moco);
  font: inherit; font-size: 13px; font-weight: 600;
  margin-block-start: 6px;
}

/* ── ecrã 12 · os três estados ─────────────────────────────────────────── */
.mold-est-rotulo {
  margin: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
.mold-est-titulo {
  margin: 8px 0 0;
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.03em;
  color: var(--azul-moco);
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.1;
  text-wrap: pretty;
}
.mold-est-grelha { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block-start: 18px; }
@media (min-width: 1100px) { .mold-est-grelha { grid-template-columns: repeat(2, 1fr); } }

.mold-est-carta {
  background: var(--cartao); border-radius: 32px;
  box-shadow: var(--cartao-sombra);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Sem sombra, de propósito: um vazio não se toca, lê-se. */
.mold-est-carta--vazia { background: var(--superficie); box-shadow: none; }
.mold-est-carta--escura { background: var(--escuro); box-shadow: none; }

/* Os rótulos de estado usam o trio da confiança — é o desenho aprovado, e é
 * o selo a falar: a palavra diz o estado, a cor apenas concorda. */
.mold-est-estado {
  margin: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.mold-est-estado--recolhido { color: var(--forte); }
.mold-est-estado--media { color: var(--media); }
.mold-est-estado--escuro { color: #93A1B1; }

.mold-est-apoio { margin: 0; font-size: 11px; color: var(--secundario); text-transform: uppercase; letter-spacing: .08em; }
.mold-est-valor { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.mold-est-corpo {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--azul-moco);
  font-size: 52px; line-height: .9;
}
.mold-est-cauda { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.mold-est-unidade { font-size: 13px; color: var(--secundario); }
.mold-est-traco {
  margin: 0;
  font-family: var(--fonte-display); font-weight: 700;
  font-size: 52px; line-height: .9; color: var(--secundario);
}
.mold-est-texto { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tinta); }
.mold-est-carta--escura .mold-est-texto { color: var(--escuro-texto); }
.mold-est-pe {
  margin: 0; margin-block-start: auto;
  font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums;
}
.mold-est-porque {
  background: none; border: 0; padding: 0; align-self: flex-start;
  display: inline-flex; align-items: center; min-block-size: 44px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--azul-moco);
  cursor: pointer;
}

.mold-est-grafico { inline-size: 100%; block-size: 90px; display: block; }
.mold-est-fio { stroke: var(--linha); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mold-est-corte { stroke: var(--media); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

/* A trama lenta. Cada osso guarda a opacidade base numa variável para a
 * respiração a poder multiplicar sem tabela de keyframes por osso; a classe
 * viva só entra quando o JavaScript confirma que o movimento é bem-vindo. */
.mold-est-ossos { display: flex; flex-direction: column; gap: 9px; margin-block-start: 4px; }
.mold-est-osso { display: block; block-size: 9px; border-radius: 2px; background: var(--creme-moco); opacity: var(--op, .2); }
.mold-est-osso:nth-child(1) { inline-size: 82%; --op: .30; }
.mold-est-osso:nth-child(2) { inline-size: 64%; --op: .22; }
.mold-est-osso:nth-child(3) { inline-size: 92%; --op: .16; }
.mold-est-osso:nth-child(4) { inline-size: 48%; --op: .12; }
.mold-est-osso:nth-child(5) { inline-size: 74%; --op: .09; }
.mold-est-osso:nth-child(6) { inline-size: 38%; --op: .07; }
.mold-est-ossos[data-viva="sim"] .mold-est-osso { animation: mold-est-respira 3.6s ease-in-out infinite; }
.mold-est-ossos[data-viva="sim"] .mold-est-osso:nth-child(2) { animation-delay: .3s; }
.mold-est-ossos[data-viva="sim"] .mold-est-osso:nth-child(3) { animation-delay: .6s; }
.mold-est-ossos[data-viva="sim"] .mold-est-osso:nth-child(4) { animation-delay: .9s; }
.mold-est-ossos[data-viva="sim"] .mold-est-osso:nth-child(5) { animation-delay: 1.2s; }
.mold-est-ossos[data-viva="sim"] .mold-est-osso:nth-child(6) { animation-delay: 1.5s; }
@keyframes mold-est-respira {
  0%, 100% { opacity: var(--op, .2); }
  50% { opacity: calc(var(--op, .2) * .45); }
}
@media (prefers-reduced-motion: reduce) {
  .mold-est-ossos .mold-est-osso { animation: none; }
}

.mold-est-correccao { background: var(--creme-moco); border-radius: 32px; padding: 22px; margin-block-start: 16px; }
.mold-est-correccao-rotulo {
  margin: 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); /* o token medido da casa: 5,6:1 sobre creme */
}
.mold-est-correccao-texto { margin: 8px 0 0; font-size: 20px; line-height: 1.45; color: var(--azul-moco); }
/* ═══════════════════════ painel-series ═══════════════════════ */
/* mocosense · grupo painel-series (prefixo .ps-) — ecrãs 2 a 5.
 * Tokens: só os de landing.css. Os relevos citam /ds/relevo.css com o valor
 * medido em recuo — se a página não ligar o ds, o relevo não desaparece.
 * Nenhum juízo por cor: as três cores de confiança vivem no selo e no estado. */

.ps-pagina { padding: 40px; max-width: 1180px; margin-inline: auto; }

.ps-rot {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
.ps-rot--escuro { color: #93A1B1; }
.ps-titulo {
  margin: 8px 0 0; font-family: var(--fonte-display); font-weight: 700;
  letter-spacing: -.03em; color: var(--azul-moco); font-size: 40px; text-wrap: pretty;
}
.ps-sub { font-size: 13px; color: var(--secundario); margin-top: 6px; }
/* A linha que conta a cauda fora da janela do degrau. Leva o fio de âmbar à
 * esquerda — o mesmo dos avisos da casa — porque não é uma nota de rodapé: é a
 * diferença entre «a base não tem mais» e «isto abre no degrau de cima», e é a
 * frase que faz o desejo. Não é caixa vermelha nem tarja: um limite de conta é
 * um facto sobre nós, não um alarme sobre quem lê. */
.ps-sub--cauda {
  border-inline-start: 3px solid var(--ambar);
  padding-inline-start: 10px;
  margin-top: 10px;
  max-inline-size: 62ch;
  text-wrap: pretty;
}
.ps-tab { font-variant-numeric: tabular-nums; }

.ps-cabeca { display: flex; align-items: center; gap: 12px; }
.ps-volta {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  background: var(--fundo); color: var(--azul-moco); font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: var(--relevo-1, 3px 3px 6px #D1D9E6, -3px -3px 6px #FAFCFE);
}

/* o que se toca e o que contém leva relevo; o que se lê fica plano */
.ps-cartao {
  background: var(--cartao); border-radius: 32px; padding: 22px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
}

/* ── ecrã 2 · a montra ─────────────────────────────────────────────────── */
.ps-montra { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ps-carta {
  width: calc(33.333% - 8px); box-sizing: border-box; cursor: pointer;
  background: var(--cartao); border-radius: 32px; padding: 22px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  display: flex; flex-direction: column; gap: 12px;
  color: inherit; text-decoration: none;
  transition: transform 150ms ease-out;
}
.ps-carta:hover { transform: translateY(-1px); }
.ps-carta-rot {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); min-height: 28px;
}
.ps-carta-linha { display: flex; align-items: baseline; gap: 8px; }
.ps-carta-num {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--azul-moco);
  font-size: 52px; line-height: .9;
}
.ps-cauda { font-size: .42em; font-weight: 600; letter-spacing: -.02em; }
.ps-carta-un { font-size: 13px; color: var(--secundario); }
.ps-carta-graf { display: block; width: 100%; height: 34px; }
.ps-carta-pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--secundario); margin-top: auto;
}

/* o selo: a palavra diz, a cor concorda — nunca a cor sozinha */
.ps-selo { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.ps-selo i {
  width: 7px; height: 7px; border-radius: 2px; display: block;
  background: currentColor; font-style: normal;
}
.ps-selo--forte { color: var(--forte); }
.ps-selo--media { color: var(--media); }
.ps-selo--fraca { color: var(--fraca); }
.ps-selo--nossa { color: var(--ambar); }

/* os traços dos gráficos: azul para o bruto, âmbar para a conta nossa —
 * identidade da série, não juízo sobre ela */
.ps-traco-bruto, .ps-traco-nossa, .ps-traco-serie { fill: none; stroke-width: 1.5; }
.ps-traco-bruto, .ps-traco-serie { stroke: var(--azul-moco); }
.ps-traco-nossa { stroke: var(--ambar); }

.ps-dois { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ps-livre {
  flex: 1; min-width: 280px; background: var(--creme-moco);
  border-radius: 32px; padding: 22px;
}
.ps-livre-txt { font-size: 20px; line-height: 1.4; color: var(--azul-moco); margin-top: 10px; }
.ps-escuro {
  flex: 1; min-width: 280px; background: var(--escuro);
  border-radius: 32px; padding: 22px; cursor: pointer;
  color: inherit; text-decoration: none;
  transition: transform 150ms ease-out;
}
.ps-escuro:hover { transform: translateY(-1px); }
.ps-escuro-txt { font-size: 15px; line-height: 1.55; color: #F2F5F8; margin-top: 10px; }

/* ── ecrã 3 · as séries ────────────────────────────────────────────────── */
.ps-procura {
  width: 100%; box-sizing: border-box; min-height: 56px; margin-top: 18px;
  padding: 0 20px; border: none; border-radius: 6px;
  background: var(--fundo);
  box-shadow: var(--relevo-in, inset 4px 4px 8px #D1D9E6, inset -4px -4px 8px #FAFCFE);
  font-family: var(--fonte-texto); font-size: 15px; color: var(--tinta);
}
.ps-procura:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.ps-pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ps-pil {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: 13px; cursor: pointer; white-space: nowrap;
  font-family: var(--fonte-texto); font-variant-numeric: tabular-nums;
  background: transparent; color: var(--secundario);
  border: 1px solid rgba(11, 17, 25, .16);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.ps-pil[aria-pressed="true"] { background: var(--escuro); color: #F2F5F8; border-color: var(--escuro); }
.ps-conta { font-size: 13px; color: var(--secundario); margin-top: 14px; font-variant-numeric: tabular-nums; }
.ps-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ps-linha {
  background: var(--cartao); border-radius: 20px; padding: 16px 18px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  color: inherit; text-decoration: none; min-height: 44px;
}
.ps-linha-corpo { flex: 1; min-width: 0; }
.ps-linha-nome { font-size: 15px; line-height: 1.35; color: var(--tinta); }
.ps-hit { background: var(--creme-moco); color: var(--azul-moco); font-weight: 600; }
.ps-linha-meta {
  font-size: 11px; color: var(--secundario); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ps-linha-graf { flex: none; display: block; }
.ps-linha-valor {
  font-family: var(--fonte-display); font-weight: 700; color: var(--azul-moco);
  font-variant-numeric: tabular-nums; font-size: 20px; flex: none;
}
.ps-linha-data {
  flex: none; text-align: right; font-size: 13px; color: var(--secundario);
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.3;
}
.ps-linha-data i {
  font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.ps-vazio, .ps-placa {
  background: var(--superficie); border-radius: 6px; padding: 20px;
  font-size: 15px; line-height: 1.55; color: var(--tinta); margin-top: 12px;
}
.ps-mais {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 999px; align-self: center;
  border: 1px solid rgba(11, 17, 25, .16); background: transparent;
  color: var(--secundario); font-size: 13px; cursor: pointer;
  font-family: var(--fonte-texto); font-variant-numeric: tabular-nums; margin-top: 8px;
}

/* ── ecrã 4 · a série ──────────────────────────────────────────────────── */
.ps-serie { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; align-items: flex-start; }
.ps-coluna { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.ps-valorcarta { cursor: ew-resize; touch-action: none; display: flex; flex-direction: column; gap: 12px; }
.ps-valor-linha { display: flex; align-items: baseline; gap: 12px; }
.ps-valor {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--azul-moco);
  font-size: 104px; line-height: .88;
}
.ps-valor-un { font-family: var(--fonte-display); font-weight: 500; color: var(--secundario); font-size: 20px; }
.ps-valor-mes { font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ps-grafico { display: block; width: 100%; height: 300px; }
.ps-eixo-base { stroke: var(--linha); }
.ps-cursor { stroke: var(--ambar); stroke-width: 1; }
.ps-cursor-ponto { fill: var(--ambar); }
.ps-eixo { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--secundario); }
.ps-eixo-dica { color: var(--ambar); }

.ps-cita { display: flex; flex-direction: column; gap: 12px; }
.ps-cita-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-cita-comutas { display: flex; gap: 8px; }
.ps-comuta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 11px; cursor: pointer;
  font-family: var(--fonte-texto);
  background: transparent; color: var(--secundario);
  border: 1px solid rgba(11, 17, 25, .16);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.ps-comuta[aria-pressed="true"] { background: var(--escuro); color: #F2F5F8; border-color: var(--escuro); }
.ps-cita-texto {
  font-family: var(--fonte-mono); font-size: 12px; line-height: 1.7;
  color: var(--tinta); background: var(--superficie); border-radius: 6px;
  padding: 14px; word-break: break-word; user-select: all;
}
.ps-accoes { display: flex; gap: 10px; flex-wrap: wrap; }
.ps-copiar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  border-radius: 999px; background: var(--azul-moco); color: var(--creme-moco);
  font-size: 13px; font-weight: 500; cursor: pointer; border: none;
  font-family: var(--fonte-texto);
}
.ps-ligacao {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  border-radius: 999px; border: 1px solid rgba(11, 17, 25, .16);
  color: var(--secundario); font-size: 13px; cursor: pointer;
  text-decoration: none; font-variant-numeric: tabular-nums;
}

.ps-prova { flex: none; width: 392px; display: flex; flex-direction: column; gap: 10px; }
.ps-prova-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  font-family: var(--fonte-texto); padding: 0; min-height: 44px;
}
.ps-prova-rot { font-size: 13px; color: var(--secundario); }
.ps-prova-btn {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  background: var(--escuro);
  color: #F2F5F8; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ps-camadas { display: flex; flex-direction: column; gap: 10px; }
.ps-camada {
  background: var(--superficie); border-radius: 6px; padding: 14px;
  font-size: 15px; line-height: 1.45; color: var(--tinta);
}
.ps-camada-et {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); margin-bottom: 5px;
}
.ps-camada--forte { color: var(--forte); }
.ps-camada--media { color: var(--media); }
.ps-camada--fraca { color: var(--fraca); }
.ps-camada--formula {
  background: var(--creme-moco); color: var(--azul-moco);
  font-family: var(--fonte-mono); font-size: 13px;
}
.ps-camada--documento {
  background: var(--escuro); color: #F2F5F8;
  font-family: var(--fonte-mono); font-size: 12px; word-break: break-word;
}
.ps-camada--documento .ps-camada-et { color: #93A1B1; }
.ps-doc-abre { color: var(--creme-moco); }
.ps-trilho { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.ps-trilho i { flex: 1; height: 4px; border-radius: 2px; background: var(--linha); }
.ps-trilho i.feito { background: var(--azul-moco); }

/* ── ecrã 5 · as leituras ──────────────────────────────────────────────────
 * Desde 26-08-2026 a grelha é uma <table> a sério (achado A3 da auditoria de
 * 24-08). O DESENHO não mexeu um pixel — mudou o sítio onde as medidas se
 * escrevem. O que era `gap: 14px` entre colunas e `padding: 12px 16px` na
 * linha passou a padding de célula: 16px nos dois bordos de fora, 7px+7px
 * entre colunas (7+7 = os mesmos 14). E como a folha da casa põe
 * box-sizing: border-box em tudo, a largura da coluna já leva esse padding
 * lá dentro: 16+78+7 = 101, 7+110+7 = 124, 7+220+16 = 243. */
.ps-tabela { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
/* Duas coisas de uma vez, nesta regra:
 *
 * · o border-spacing dá os mesmos 6px que o gap dava entre linhas — mas
 *   põe-nos também no bordo de cima e no de baixo, e aí a tabela descia 6px e
 *   o botão das anteriores descia 12. A margem negativa devolve os dois.
 *
 * · o min-width devolve o comportamento do flex no telemóvel: ali a linha
 *   NUNCA se comprimia — o valor ficava com a largura do número (medido:
 *   128,7px em «13.079.894,984», a 17px) e as colunas da direita saíam do
 *   ecrã. Uma tabela, sozinha, esmagava a coluna do valor a zero e escrevia o
 *   número por cima da confiança. Com o chão de 130px para o valor,
 *   transborda como transbordava, com cada coluna na largura desenhada. */
.ps-grelha {
  --ps-col-data: 101px; --ps-col-conf: 124px; --ps-col-doc: 243px;
  width: 100%; table-layout: fixed;
  min-width: calc(var(--ps-col-data) + 130px + var(--ps-col-conf) + var(--ps-col-doc));
  border-collapse: separate; border-spacing: 0 6px; margin-block: -6px;
}
/* A legenda leva a classe da casa (.so-leitor), mas NÃO sai do fluxo: medido
 * no Chrome, um <caption> em position:absolute faz a tabela somar mais um
 * border-spacing e as linhas todas descem 6px. Em fluxo, com altura zero e o
 * texto cortado, custa exactamente 0 — e continua inteira para quem ouve
 * (clip-path e overflow não tiram nada da árvore de acessibilidade;
 * display:none tirava). Serve as duas grelhas da plataforma. */
.ps-grelha caption, .cc-fechada-grelha caption { position: static; block-size: 0; margin: 0; }
/* O <th> nasce a negrito e ao centro; aqui herda da linha, como o <span>
 * herdava. O :where() não pesa na especificidade, para as classes .ps-l-*
 * continuarem a mandar na coluna — é delas o «valor» grande e azul. */
.ps-grelha :where(th) { font-weight: inherit; text-align: inherit; }
.ps-grelha :where(th, td) { padding-inline: 7px; vertical-align: middle; }
.ps-grelha :where(th, td):first-child { padding-inline-start: 16px; }
.ps-grelha :where(th, td):last-child { padding-inline-end: 16px; }
.ps-tab-cab {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
/* No flex, os rótulos esticavam e a linha de texto ficava no topo da caixa de
 * 26px que o «valor» abre. `top` é o que devolve isso mesmo. */
.ps-tab-cab th { padding-block: 0 4px; vertical-align: top; }
/* Numa linha de tabela a altura é sempre mínima — é o min-height de antes. */
.ps-leitura { height: 44px; }
.ps-leitura td { padding-block: 12px; background: var(--superficie); }
.ps-leitura td:first-child { border-radius: 6px 0 0 6px; }
.ps-leitura td:last-child { border-radius: 0 6px 6px 0; }
.ps-leitura.escolhida td { background: var(--creme-moco); }
.ps-l-data { width: var(--ps-col-data); font-size: 13px; }
/* O botão que destaca a linha. Come para trás as margens da célula e volta a
 * pô-las como padding: fica com a célula inteira e o desenho não dá por ele.
 * A largura escreve-se porque um <button> encolhe-se ao texto mesmo em
 * display:block — a célula inteira são os 100% mais os 23px que as margens
 * negativas comem (16 do bordo + 7 do intervalo). A cor da data vem da escada
 * tonal, escrita por propriedade no JavaScript. */
.ps-l-marca {
  display: block; width: calc(100% + 23px); text-align: start;
  margin: -12px -7px -12px -16px; padding: 12px 7px 12px 16px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit;
  font-variant-numeric: tabular-nums;
}
.ps-l-valor {
  width: auto; text-align: right; font-family: var(--fonte-display); font-weight: 700;
  color: var(--azul-moco); font-variant-numeric: tabular-nums; font-size: 17px;
}
.ps-l-conf { width: var(--ps-col-conf); text-align: right; font-size: 11px; font-weight: 600; }
.ps-conf--forte { color: var(--forte); }
.ps-conf--media { color: var(--media); }
.ps-conf--fraca { color: var(--fraca); }
.ps-l-doc {
  width: var(--ps-col-doc); text-align: right; font-family: var(--fonte-mono); font-size: 11px;
  color: var(--secundario);
}
/* O corte com reticências mora no filho, não na célula: `overflow: hidden`
 * na célula cortava o anel de foco da ligação que está lá dentro. O filho
 * come as margens como o botão da data, e a ligação do documento passa a
 * valer a célula inteira — 44px, sem envolver nada. */
.ps-l-doc > * {
  display: block; margin: -12px -16px -12px -7px; padding: 12px 16px 12px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-l-doc a { color: var(--azul-moco); }
/* Quem manda na altura da linha é a caixa de linha do «valor» — 17px × 1,5 =
 * 25,5px. O punho da data e a ligação do documento tomam a MESMA caixa: assim
 * enchem a célula inteira (12 + 25,5 + 12 = 49,5px de alvo, os 44 prometidos
 * com folga) sem fazer a linha crescer meio pixel, e o texto continua a cair
 * ao centro, onde o `align-items: center` do flex o punha. */
.ps-l-marca, .ps-l-doc > * { line-height: calc(17px * 1.5); }
.ps-nota { font-size: 13px; line-height: 1.55; color: var(--tinta); margin: 16px 0 0; max-width: 700px; }

/* ── o vidro sobre nomes de instituição ────────────────────────────────── */
.ps-vidro {
  filter: blur(5px); background: rgba(232, 221, 200, .55);
  border-radius: 4px; padding: 0 8px; user-select: none;
}

/* foco: âmbar, sempre visível, sempre contorno cheio */
.ps-carta:focus-visible, .ps-linha:focus-visible, .ps-escuro:focus-visible,
.ps-pil:focus-visible, .ps-comuta:focus-visible, .ps-copiar:focus-visible,
.ps-ligacao:focus-visible, .ps-volta:focus-visible, .ps-mais:focus-visible,
.ps-prova-topo:focus-visible, .ps-valorcarta:focus-visible, .ps-l-marca:focus-visible,
.ps-doc-abre:focus-visible {
  outline: 2px solid var(--ambar); outline-offset: 3px;
}

/* movimento: o CSS deste grupo só transita 150ms; quem prefere quietude
 * fica quieto (o /ds/relevo.css já o impõe globalmente, repete-se por dever) */
@media (prefers-reduced-motion: reduce) {
  .ps-carta, .ps-escuro, .ps-pil, .ps-comuta { transition: none; }
  .ps-carta:hover, .ps-escuro:hover { transform: none; }
}

/* ── telemóvel (medidas do protótipo: 390×844, pad 20) ─────────────────── */
@media (max-width: 720px) {
  .ps-pagina { padding: 20px; }
  .ps-titulo { font-size: 24px; }
  .ps-carta { width: 100%; }
  .ps-carta-num { font-size: 40px; }
  .ps-valor { font-size: 64px; }
  .ps-grafico { height: 190px; }
  .ps-prova { width: 100%; }
  /* as mesmas 96 e 84 do protótipo, mais o padding da célula (7+16 e 7+7) */
  .ps-grelha { --ps-col-conf: 98px; --ps-col-doc: 119px; }
}
/* ═══════════════════════ cambio-comercio ═══════════════════════ */
/* ── câmbio + comércio (prefixo cc-) ─────────────────────────────────────────
 * As medidas vêm do protótipo v2: gráfico 320×210 com alvos de toque de 12px,
 * curva activa a 2,4px, as outras a .22; vidro do fechado a blur(7px); lente
 * com pontos de 9 a 26px. Os tokens de sombra e vidro do sistema de desenho
 * ainda não desceram ao :root da casa — vão com recurso escrito, e no dia em
 * que descerem são eles que ganham sem se tocar aqui. */

.cc-ecra { padding: clamp(20px, 3vw, 40px); max-inline-size: 1180px; margin-inline: auto; }
.cc-rot {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
.cc-titulo {
  margin: 8px 0 0; font-family: var(--fonte-display); font-weight: 700;
  letter-spacing: -.03em; color: var(--azul-moco);
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.05;
}
.cc-texto { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinta); max-inline-size: 62ch; }
.cc-mini { font-size: 11px; color: var(--secundario); line-height: 1.6; font-variant-numeric: tabular-nums; }

/* O cartão da casa: face #FCFDFE, raio 32, a sombra do sistema. Nas placas de
 * dados o raio cai para 6px — relevo é para o que se toca, nunca para o que
 * se lê. */
.cc-cartao, .cc-cartao-balcao {
  background: var(--cartao); border-radius: 32px; padding: 22px;
  box-shadow: var(--cartao-sombra,
    0 1px 2px rgba(11, 17, 25, .04),
    0 16px 32px rgba(11, 17, 25, .09),
    inset 1px 1px 0 rgba(255, 255, 255, .9));
}
.cc-cartao-creme { background: var(--creme-moco); border-radius: 32px; padding: 22px; }
.cc-cartao-escuro { background: var(--escuro); border-radius: 32px; padding: 22px; }
.cc-frase-azul { margin: 8px 0 0; font-size: 20px; line-height: 1.45; color: var(--azul-moco); }
.cc-frase-clara { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--escuro-texto); }
.cc-rot-escuro { color: var(--escuro-secundario); }
.cc-vazio { margin-block-start: 18px; }

.cc-fila { display: flex; flex-wrap: wrap; gap: 18px; margin-block-start: 18px; align-items: flex-start; }
.cc-fila > * { flex: 1 1 300px; }
.cc-coluna { display: flex; flex-direction: column; gap: 12px; flex: 0 1 392px; }
.cc-caixa-curvas { flex: 2 1 320px; }
.cc-cartao-balcao { flex: 1 1 300px; max-inline-size: 460px; display: flex; flex-direction: column; gap: 14px; }

/* os números em corpo e cauda — cauda a ~45% do corpo, peso 600 */
.cc-num-fila { display: flex; align-items: baseline; gap: 8px; }
.cc-num-g {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--azul-moco);
  font-size: clamp(40px, 4.4vw, 52px); line-height: .9;
}
.cc-num-g .cc-cauda { font-size: .42em; font-weight: 600; letter-spacing: -.02em; }
.cc-num-topo { margin-block-start: 14px; }
.cc-num-gg {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--azul-moco);
  font-size: clamp(64px, 8vw, 104px); line-height: .88;
}
.cc-num-gg .cc-cauda-gg { font-size: .42em; font-weight: 600; letter-spacing: -.02em; }
.cc-unidade { font-family: var(--fonte-display); font-weight: 500; font-size: 20px; color: var(--secundario); }

/* a placa de dados: quase-fundo, sem sombra, sem contorno, raio 6 */
.cc-placa {
  background: var(--superficie); border-radius: 6px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-placa-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--secundario); }
.cc-placa-linha b {
  font-family: var(--fonte-display); font-weight: 700; font-size: 17px;
  color: var(--azul-moco); font-variant-numeric: tabular-nums;
}
.cc-placa-hash { font-family: var(--fonte-mono); font-size: 11px; color: var(--secundario); margin-block-start: -6px; }
.cc-proveniencia { font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.cc-proveniencia b { font-weight: 600; }

.cc-topo-cartao { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 24px; color: var(--azul-moco); margin-block-start: 4px; }
.cc-pilula-creme {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: var(--creme-moco); color: var(--azul-moco); font-size: 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* O NOME atrás de vidro: desfoca-se a estrutura com o nome, nunca um número.
 * O texto por baixo é o código de posição («Balcão 07»), não o nome real —
 * o vidro guarda o LUGAR do nome enquanto a decisão de os publicar não fecha. */
.cc-nome-velado { filter: blur(6px); user-select: none; }

/* botões e pílulas — alvo mínimo de 44px, foco âmbar sólido */
.cc-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--azul-moco); color: var(--creme-moco);
  font-family: var(--fonte-texto); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; align-self: flex-start;
}
.cc-pilula {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--linha); background: transparent;
  color: var(--secundario); font-family: var(--fonte-texto); font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
.cc-pilula-activa { background: var(--escuro); color: var(--escuro-texto); border-color: var(--escuro); }
.cc-ecra :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.cc-ecra button, .cc-ecra a { transition: opacity 150ms ease-out; }

.cc-volta {
  inline-size: 44px; block-size: 44px; border-radius: 999px; border: 0;
  background: var(--fundo); color: var(--azul-moco); font-size: 17px; cursor: pointer;
  box-shadow: var(--relevo-1, 3px 3px 6px #D1D9E6, -3px -3px 6px #FAFCFE);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.cc-fila-volta { display: flex; align-items: center; gap: 12px; }

/* ── o gráfico das curvas ── */
.cc-caixa-grafico { border-radius: 6px; }
.cc-grafico { display: block; inline-size: 100%; block-size: clamp(190px, 32vh, 300px); }
.cc-ligacao { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
.cc-grafico .cc-eixo { stroke: var(--linha); }
.cc-grafico .cc-ref { stroke: var(--secundario); stroke-width: 1; }
.cc-curva { cursor: pointer; }
/* A elevação a âmbar anda a 150ms; quem pediu menos movimento recebe o corte
 * seco — a informação é a mesma. */
.cc-curva path { transition: opacity 150ms ease-out; }
.cc-eixo-rotulos {
  display: flex; justify-content: space-between; gap: 10px; margin-block-start: 8px;
  font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums;
}
.cc-eixo-rotulos span:nth-child(2) { text-align: center; }

/* ── a régua das margens ── */
.cc-caixa-regua { margin-block-start: 18px; }
.cc-regua-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cc-regua-titulo { font-size: 20px; color: var(--tinta); font-weight: 500; }
.cc-regua { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 2px 32px; margin-block-start: 14px; }
.cc-regua-linha {
  display: flex; align-items: center; gap: 12px; min-block-size: 44px;
  padding: 2px 8px; border: 0; border-radius: 4px; background: transparent;
  cursor: pointer; font-family: var(--fonte-texto); text-align: start;
}
.cc-regua-eu { background: var(--creme-moco); }
.cc-regua-eu .cc-regua-nome, .cc-regua-eu .cc-regua-valor { color: var(--azul-moco); }
.cc-regua-nome {
  flex: none; inline-size: 7.5em; font-size: 13px; color: var(--secundario);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-regua-carril { position: relative; flex: 1; block-size: 13px; }
.cc-regua-barra { position: absolute; top: 3px; block-size: 7px; border-radius: 3px; min-inline-size: 3px; }
.cc-regua-zero { position: absolute; top: 0; bottom: 0; inline-size: 1px; background: var(--linha); }
.cc-regua-valor {
  flex: none; inline-size: 5.4em; text-align: end; font-size: 13px;
  color: var(--secundario); font-variant-numeric: tabular-nums;
}

/* ── ecrã 7 · a tabela atrás do vidro ── */
.cc-fechada-caixa { position: relative; border-radius: 32px; overflow: hidden; margin-block-start: 18px;
  box-shadow: var(--cartao-sombra, 0 1px 2px rgba(11,17,25,.04), 0 16px 32px rgba(11,17,25,.09)); }
.cc-fechada-tabela { background: var(--cartao); padding: 24px; }
/* O border-spacing dá os mesmos 7px de intervalo que o gap dava. Também os
 * põe nos bordos: 7 em cima + a linha do cabeçalho (que mede zero) + 7 até à
 * primeira linha = 14 a mais em cima, e 7 a mais em baixo. A margem negativa
 * devolve-os, e a primeira linha volta a nascer nos 24px do cartão. */
.cc-fechada-grelha {
  inline-size: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0 7px; margin-block: -14px -7px;
}
/* O cabeçalho mede zero e não se vê — só manda nas larguras das colunas e
 * fala para quem ouve. Ganha às classes .cc-regua-* por especificidade. */
.cc-fechada-cab th { padding: 0; block-size: 0; }
/* A largura da coluna leva o intervalo dentro (box-sizing: border-box): as
 * 7,5em do nome e as 5,4em do valor mais os 7px de metade do intervalo de
 * 14px — é assim que o carril volta a começar e a acabar onde começava. */
.cc-fechada-cab .cc-regua-nome { inline-size: calc(7.5em + 7px); }
.cc-fechada-cab .cc-regua-valor { inline-size: calc(5.4em + 7px); }
.cc-fechada-grelha :where(th, td) { padding-inline: 7px; vertical-align: middle; }
.cc-fechada-grelha :where(th, td):first-child { padding-inline-start: 0; }
.cc-fechada-grelha :where(th, td):last-child { padding-inline-end: 0; }
.cc-fechada-linha { block-size: 24px; }
.cc-fechada-linha td { padding-block: 0; }
/* Dentro da célula, o que era item de flex volta a ser bloco — é o que dá
 * largura ao nome, altura ao carril e o canto de encosto ao valor. */
.cc-fechada-linha :where(.cc-regua-nome, .cc-regua-carril, .cc-regua-valor) { display: block; }
/* blur(7px) sobre a ESTRUTURA — as linhas, as barras, os nomes. O número
 * grande que se dá a ver fica FORA desta caixa, nítido. */
.cc-desfocada { filter: blur(7px); user-select: none; }
.cc-desfocada-5 { filter: blur(5px); user-select: none; }

/* o véu de vidro — camada temporária, forte porque leva texto pequeno */
.cc-vidro {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: var(--vidro-2, rgba(245, 247, 250, .78));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; font-family: var(--fonte-texto);
}
.cc-vidro .cc-botao { align-self: center; }
.cc-vidro-botao { inline-size: 100%; }
.cc-vidro-miolo { display: flex; flex-direction: column; gap: 10px; max-inline-size: 520px; }
.cc-vidro-frase { font-size: clamp(17px, 2vw, 24px); line-height: 1.35; color: var(--tinta); max-inline-size: 520px; }

/* ── comércio ── */
.cc-cabeca-comercio { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-block-start: 8px; }
.cc-alternador { display: flex; gap: 8px; }
.cc-familias { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }

/* a lente: o cartão inteiro é a superfície de leitura do dedo */
.cc-lente {
  position: relative; margin-block-start: 18px; block-size: clamp(260px, 38vh, 320px);
  background: var(--cartao); border-radius: 32px; overflow: hidden;
  touch-action: none; cursor: crosshair;
  box-shadow: var(--cartao-sombra, 0 1px 2px rgba(11,17,25,.04), 0 16px 32px rgba(11,17,25,.09));
}
.cc-lente-eixo { position: absolute; left: 24px; right: 24px; top: 50%; block-size: 1px; background: var(--linha); }
.cc-ponto { position: absolute; border-radius: 50%; transition: all 90ms linear; }
.cc-etiqueta {
  position: absolute; transform: translateX(-50%);
  background: var(--escuro); color: var(--escuro-texto); border-radius: 8px;
  padding: 8px 12px; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cc-lente-min, .cc-lente-max { position: absolute; bottom: 16px; font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.cc-lente-min { left: 24px; }
.cc-lente-max { right: 24px; }

/* o comparador */
.cc-caixa-comparador { flex: 2 1 320px; }
.cc-caixa-ofertas { position: relative; margin-block-start: 14px; border-radius: 6px; overflow: hidden; }
.cc-lista-ofertas { display: flex; flex-direction: column; gap: 8px; }
.cc-oferta {
  display: flex; align-items: center; gap: 14px; min-block-size: 56px;
  background: var(--superficie); border: 0; border-radius: 6px; padding: 14px 16px;
  cursor: pointer; font-family: var(--fonte-texto); text-align: start;
}
.cc-oferta-viva { background: var(--creme-moco); }
.cc-oferta-loja { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-oferta-nome { font-size: 15px; color: var(--tinta); line-height: 1.3; }
.cc-oferta-carril { flex: none; inline-size: clamp(80px, 18vw, 200px); block-size: 8px; border-radius: 3px; background: var(--linha); position: relative; overflow: hidden; }
.cc-oferta-barra { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; }
.cc-oferta-preco {
  flex: none; inline-size: 6.2em; text-align: end;
  font-family: var(--fonte-display); font-weight: 700; font-size: 17px;
  color: var(--azul-moco); font-variant-numeric: tabular-nums;
}
.cc-oferta-delta { flex: none; inline-size: 6em; text-align: end; font-size: 13px; color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-pe-lista {
  display: flex; justify-content: space-between; gap: 12px; margin-block-start: 14px;
  padding-block-start: 12px; border-block-start: 1px solid var(--linha);
  font-size: 11px; color: var(--secundario);
}

/* o esqueleto: a trama gravada, a andar devagar enquanto a casa responde */
.cc-esqueleto {
  border-radius: 6px; background: var(--fundo);
  box-shadow: var(--relevo-in, inset 4px 4px 8px #D1D9E6, inset -4px -4px 8px #FAFCFE);
  background-image: repeating-linear-gradient(to bottom,
    #D1D9E6 0, #D1D9E6 1px, #FAFCFE 1px, #FAFCFE 2px, transparent 2px, transparent 10px);
  animation: cc-trama 2.8s linear infinite;
}
@keyframes cc-trama { from { background-position: 0 0; } to { background-position: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  .cc-esqueleto { animation: none; }
  .cc-ponto, .cc-curva path, .cc-ecra button, .cc-ecra a { transition: none; }
}
/* sem transparências: o vidro fica opaco, a mensagem fica igual */
@media (prefers-reduced-transparency: reduce) {
  .cc-vidro { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .cc-regua-eu, .cc-oferta-viva, .cc-pilula-activa { outline: 3px solid Highlight; outline-offset: -3px; }
}

/* telemóvel: coluna única, alvos por inteiro */
@media (max-width: 760px) {
  .cc-coluna, .cc-cartao-balcao { flex: 1 1 100%; max-inline-size: none; }
  .cc-oferta-carril { display: none; }  /* a barra cede o lugar ao preço e ao delta — nunca se encolhe um número */
  .cc-regua { grid-template-columns: 1fr; }
}

/* ── o comparador por tipo (29-09-2026): procura, separadores, lista e ficha ── */
.cp-cobertura { margin-block-start: 6px; max-inline-size: 90ch; }
.cp-destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-block-start: 18px; }
.cp-destaque { border: 0; text-align: start; cursor: pointer; font-family: var(--fonte-texto); border-radius: 24px; }
.cp-destaque-texto { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--azul-moco); }
.cp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-block-start: 22px; }
.cp-procura {
  flex: 1 1 420px; min-inline-size: 0; block-size: 52px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta);
  font: 500 16px/1 var(--fonte-texto);
}
.cp-procura::placeholder { color: var(--secundario); }
.cp-procura:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.cp-so { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--secundario); cursor: pointer; }
.cp-so input { inline-size: 18px; block-size: 18px; accent-color: var(--azul-moco); }
.cp-separadores { margin-block-start: 14px; }
.cp-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-block-start: 18px; align-items: start; }
@media (min-width: 1000px) {
  .cp-corpo:has(.cp-ficha-viva) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .cp-ficha-caixa { position: sticky; inset-block-start: 16px; }
}
@media (max-width: 999px) {
  .cp-corpo:has(.cp-ficha-viva) .cp-coluna-lista { display: none; }
}
.cp-contagem { margin-block-end: 8px; }
.cp-lista { display: flex; flex-direction: column; gap: 14px; }
.cp-familia { display: flex; flex-direction: column; gap: 6px; }
.cp-familia-rot { margin-block: 6px 2px; }
.cp-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(60px, 14vw, 140px) auto; align-items: center; gap: 14px;
  min-block-size: 56px; padding: 12px 16px; border: 0; border-radius: 6px; background: var(--superficie, var(--cartao));
  cursor: pointer; text-align: start; font-family: var(--fonte-texto); color: var(--tinta);
}
.cp-linha:hover { background: var(--creme-moco); }
.cp-linha-aberta { background: var(--creme-moco); outline: 2px solid var(--azul-moco); outline-offset: -2px; }
.cp-linha-texto { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.cp-linha-nome { font-size: 15px; line-height: 1.3; }
.cp-linha-comparavel .cp-linha-nome { font-weight: 600; }
.cp-linha-valor { font-family: var(--fonte-display); font-weight: 700; font-size: 16px; color: var(--azul-moco); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.cp-linha-pre { font-family: var(--fonte-texto); font-weight: 500; font-size: 12px; color: var(--secundario); }
.cp-regua { position: relative; block-size: 12px; }
.cp-regua-traco { position: absolute; inset-inline: 0; inset-block-start: 5px; block-size: 3px; border-radius: 2px; background: var(--dados-3); }
.cp-regua-meio { position: absolute; inset-block: 0; inline-size: 3px; margin-inline-start: -1px; border-radius: 2px; background: var(--ambar); }
.cp-sem { margin-block-start: 4px; }
.cp-ficha { display: flex; flex-direction: column; gap: 4px; }
.cp-ficha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cp-fechar { border: 0; background: none; color: var(--azul-moco); font: 600 13px/1.2 var(--fonte-texto); cursor: pointer; padding: 4px 0; white-space: nowrap; }
.cp-ficha-titulo { margin: 6px 0 0; font-family: var(--fonte-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); color: var(--tinta); line-height: 1.15; }
.cp-ficha-frase { font-size: 17px; }
.cp-ofertas { display: flex; flex-direction: column; gap: 8px; margin-block-start: 16px; }
.cp-oferta {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(60px, 12vw, 160px) auto; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 6px; background: var(--superficie, var(--fundo));
}
.cp-oferta-primeira { background: var(--creme-moco); }
.cp-oferta .cc-oferta-carril { inline-size: auto; }
/* com a ficha aberta ao lado, a lista cede a régua e fica com o nome e o preço */
.cp-corpo:has(.cp-ficha-viva) .cp-linha { grid-template-columns: minmax(0, 1fr) auto; }
.cp-corpo:has(.cp-ficha-viva) .cp-linha .cp-regua { display: none; }
.cp-oferta-quem { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.cp-oferta-nome { font-size: 15px; color: var(--tinta); font-weight: 600; }
.cp-oferta-titulo { font-size: 12px; color: var(--secundario); line-height: 1.35; overflow-wrap: anywhere; }
.cp-oferta-precos { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cp-oferta-precos .cc-oferta-preco { inline-size: auto; white-space: nowrap; }
.cp-oferta-delta { font-weight: 600; color: var(--tinta); }
.cp-oferta-ir { grid-column: 1 / -1; justify-self: start; font-size: 12px; }
.cp-fora { margin-block-start: 12px; font-size: 13px; color: var(--secundario); }
.cp-fora summary { cursor: pointer; }
.cp-conta { margin-block-start: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cp-prova { margin-block-start: 12px; }
.cp-regras { margin-block-start: 28px; font-size: 13px; color: var(--secundario); max-inline-size: 90ch; }
.cp-regras summary { cursor: pointer; font-weight: 600; color: var(--tinta); }
.cp-regras li { margin-block: 6px; line-height: 1.5; }
@media (max-width: 760px) {
  .cp-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .cp-linha .cp-regua { display: none; }
  .cp-oferta { grid-template-columns: minmax(0, 1fr) auto; }
  .cp-oferta .cc-oferta-carril { display: none; }
}
@media (forced-colors: active) {
  .cp-linha-aberta { outline: 3px solid Highlight; }
}

/* o vidro erguido: fica só a pega para voltar a pousar, sem véu por cima */
.cc-vidro-erguido {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  justify-content: flex-start; padding-block-start: 10px;
}
/* ═══════════════════════ social-fontes ═══════════════════════ */
/* mocosense · painel — grupo social-fontes: capa, social & mobile, fontes,
 * ficha de fonte. Tudo com prefixo sf- para não colidir com os outros grupos.
 *
 * Regras da casa que esta folha cumpre e não discute: relevo para o que se
 * toca e contém, nunca para o que se lê; nenhuma cor com juízo — as três
 * cores de confiança só no selo; raio ≤6px em superfície de dado; alvos de
 * 44px; foco âmbar sólido; nenhum cinzento de borda. */

.sf {
  --sf-pad: 40px;
  --sf-titulo: 40px;
  --sf-num: 104px;
  --sf-cauda: 44px;
  --sf-num-max: 200px;
  --sf-frase: 24px;
  --sf-mote: 17px;
  --sf-pessoa-l: 18px;
  --sf-pessoa-a: 40px;
  --sf-bloco-pessoa-l: 14px;
  --sf-bloco-pessoa-a: 30px;
  /* `--cartao-sombra` é token do desenho; se o shell o declarar, é ele que
   * ganha. O valor à mão é o mesmo da landing. */
  --sf-sombra: var(--cartao-sombra,
    0 1px 2px rgba(11, 17, 25, .04),
    0 16px 32px rgba(11, 17, 25, .09),
    inset 1px 1px 0 rgba(255, 255, 255, .9));
  font-family: var(--fonte-texto);
  color: var(--tinta);
}
@media (max-width: 719px) {
  .sf {
    --sf-pad: 20px; --sf-titulo: 24px; --sf-num: 64px; --sf-cauda: 27px;
    --sf-num-max: 120px; --sf-frase: 17px; --sf-mote: 13px;
    --sf-pessoa-l: 11px; --sf-pessoa-a: 24px;
    --sf-bloco-pessoa-l: 10px; --sf-bloco-pessoa-a: 22px;
  }
}

/* ── peças partilhadas do grupo ─────────────────────────────────────────── */

.sf .sf-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500; margin: 0;
}
.sf .sf-rotulo-creme { color: rgba(232, 221, 200, .82); }
.sf .sf-rotulo-escuro { color: var(--escuro-secundario, #93A1B1); }

.sf .sf-titulo {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.03em;
  color: var(--azul-moco); font-size: var(--sf-titulo); line-height: 1.05;
  margin: 8px 0 0; text-wrap: pretty;
}
.sf .sf-sub { font-size: 13px; color: var(--secundario); margin: 6px 0 0; }

/* O número grande: corpo cheio, cauda a ~42%, sempre tabular. */
.sf .sf-grande {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; font-size: var(--sf-num); line-height: .86;
}
.sf .sf-grande [data-parte="cauda"] {
  font-size: var(--sf-cauda); font-weight: 600; letter-spacing: -.02em;
}
.sf .sf-capa-num-max { font-size: var(--sf-num-max); line-height: .84; }
.sf .sf-realce { font-variant-numeric: tabular-nums; color: var(--creme-moco); }

.sf .sf-capa-valor { display: flex; align-items: baseline; gap: 12px; }
.sf .sf-unidade {
  font-family: var(--fonte-display); font-weight: 500; font-size: 20px;
  color: rgba(232, 221, 200, .9);
}
.sf .sf-unidade-escura { color: var(--escuro-secundario, #93A1B1); }
.sf-capa-claro .sf-unidade { color: var(--secundario); }

/* Botões-pílula: 48px na capa, âmbar sólido no foco, sem atraso de toque. */
.sf .sf-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  font-family: var(--fonte-texto); font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease-out;
}
.sf .sf-cta:hover { transform: translateY(-1px); }
.sf .sf-cta-creme { background: var(--creme-moco); color: var(--azul-moco); }
.sf .sf-cta-linha {
  background: transparent; border: 1px solid rgba(232, 221, 200, .5);
  color: var(--creme-moco); font-weight: 400;
}
.sf .sf-cta-azul { background: var(--azul-moco); color: var(--creme-moco); }
.sf .sf-cta-borda {
  background: transparent; border: 1px solid rgba(11, 17, 25, .16);
  color: var(--secundario); font-weight: 400;
}
.sf :where(button):focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* O boneco de casa de banho. A cor entra por currentColor, nunca do guião. */
.sf .sf-pessoa { display: block; width: var(--sf-pessoa-l); height: var(--sf-pessoa-a); }
.sf .sf-gente { display: flex; flex-wrap: wrap; gap: 6px; max-width: 640px; }
.sf-capa-claro .sf-pessoa { color: var(--azul-moco); }
.sf .sf-pessoa-vaga { display: block; opacity: .14; transition: opacity 150ms ease-out; }
.sf .sf-pessoa-vaga.sf-pessoa-cheia { opacity: 1; }

/* A trama a carregar: fios engrenados num pulso lento. Sem números a piscar. */
.sf .sf-esqueleto { display: flex; flex-direction: column; gap: 9px; max-width: 420px; padding: 24px 0; }
.sf .sf-fio {
  display: block; height: 9px; border-radius: 2px;
  background: var(--azul-moco); opacity: .16;
  animation: sf-tecer 2.6s ease-in-out infinite;
}
.sf .sf-fio:nth-child(1) { width: 82%; }
.sf .sf-fio:nth-child(2) { width: 64%; animation-delay: .2s; }
.sf .sf-fio:nth-child(3) { width: 92%; animation-delay: .4s; }
.sf .sf-fio:nth-child(4) { width: 48%; animation-delay: .6s; }
.sf .sf-fio:nth-child(5) { width: 74%; animation-delay: .8s; }
.sf .sf-fio:nth-child(6) { width: 38%; animation-delay: 1s; }
.sf-capa-aurora .sf-fio, .sf-capa-escuro .sf-fio { background: var(--creme-moco); }
@keyframes sf-tecer { 0%, 100% { opacity: .08; } 50% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) {
  .sf .sf-fio { animation: none; }
  .sf .sf-cta:hover { transform: none; }
}

/* Avaria de leitura e regra do vazio — placa lisa, frase em português. */
.sf .sf-aviso {
  background: var(--superficie); border-radius: 6px; padding: 20px;
  font-size: 15px; line-height: 1.55; color: var(--tinta); max-width: 560px; margin: 0;
}
.sf-capa-aurora .sf-aviso, .sf-capa-escuro .sf-aviso {
  background: rgba(232, 221, 200, .08); color: var(--escuro-texto, #F2F5F8);
}
.sf .sf-vazio { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.sf .sf-vazio-estado {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--media); margin: 0;
}
.sf .sf-vazio-motivo { font-size: 15px; line-height: 1.55; margin: 0; }
.sf-capa-aurora .sf-vazio-motivo, .sf-capa-escuro .sf-vazio-motivo { color: var(--escuro-texto, #F2F5F8); }

/* O selo de confiança — o único sítio das três cores, sempre com a palavra. */
.sf .sf-selo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.sf .sf-selo::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.sf .sf-selo-forte { color: var(--forte); }
.sf .sf-selo-media { color: var(--media); }
.sf .sf-selo-fraca { color: var(--fraca); }

/* O nome atrás de vidro: desfoca-se o NOME, nunca um número, e a nota ao
 * lado fica nítida a dizer como se abre. Sem filtros, esconde-se na mesma. */
.sf .sf-nome-vidro {
  filter: blur(5px);
  user-select: none; -webkit-user-select: none;
}
@supports not (filter: blur(5px)) {
  .sf .sf-nome-vidro { color: transparent; text-shadow: 0 0 14px rgba(20, 20, 15, .55); }
}
.sf .sf-nota-vidro { font-size: 11px; color: var(--secundario); }

.sf .sf-motivo { font-size: 13px; line-height: 1.55; color: var(--tinta); margin: 16px 0 0; max-width: 700px; }

/* ── a capa: três painéis de altura inteira, scroll-snap ────────────────── */

.sf-capa {
  position: relative; /* o offsetTop dos painéis mede-se contra o rolo */
  height: calc(100dvh - var(--sf-topo, 76px));
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.sf-capa::-webkit-scrollbar { width: 0; height: 0; }
@media (max-width: 719px) {
  .sf-capa { height: calc(100dvh - var(--sf-topo-movel, 56px) - var(--sf-tabs, 72px)); }
}

.sf-capa-painel {
  min-height: 100%; scroll-snap-align: start; box-sizing: border-box;
  padding: var(--sf-pad);
  display: flex; flex-direction: column; gap: 16px;
}
.sf-capa-aurora {
  justify-content: space-between; color: #F2F5F8;
  /* A aurora fria com grão, auto-suficiente: se o shell trouxer os tokens
   * da landing, são eles que mandam; senão, fica o valor por extenso. */
  background-image: var(--aurora-fria,
    radial-gradient(60% 80% at 22% 24%, rgba(62, 107, 150, .42), transparent 64%),
    radial-gradient(52% 64% at 74% 68%, rgba(23, 61, 100, .52), transparent 66%),
    radial-gradient(50% 60% at 60% 20%, rgba(232, 221, 200, .42), transparent 62%),
    linear-gradient(150deg, #4A749C, #173D64));
  background-size: cover;
  position: relative; isolation: isolate;
}
.sf-capa-aurora::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grao, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='0.5'/></svg>"));
  background-size: 160px 160px; mix-blend-mode: soft-light; opacity: .85;
}
.sf-capa-escuro { background: var(--escuro); justify-content: center; color: var(--escuro-texto, #F2F5F8); }
.sf-capa-claro { justify-content: center; color: var(--tinta); }
.sf-capa-aurora .sf-grande, .sf-capa-escuro .sf-grande { color: #F2F5F8; }
.sf-capa-claro .sf-grande { color: var(--azul-moco); }

.sf-capa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sf-capa-mote {
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.02em;
  color: var(--creme-moco); font-size: var(--sf-mote);
}
.sf-capa-data { font-size: 11px; color: rgba(232, 221, 200, .72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-capa-meio { display: flex; flex-direction: column; gap: 14px; }
.sf-capa-frase {
  font-size: var(--sf-frase); line-height: 1.35; max-width: 620px;
  text-wrap: pretty; margin: 0;
}
.sf-capa-aurora .sf-capa-frase, .sf-capa-escuro .sf-capa-frase { color: #F2F5F8; }
.sf .sf-frase-tinta { font-size: 15px; line-height: 1.55; max-width: 460px; color: var(--tinta); }
.sf .sf-insumos {
  font-size: 13px; line-height: 1.6; color: var(--escuro-secundario, #93A1B1);
  font-variant-numeric: tabular-nums; max-width: 560px; margin: 0;
}
.sf .sf-prova { font-size: 11px; color: rgba(242, 245, 248, .7); font-variant-numeric: tabular-nums; margin: 0; }
.sf .sf-prova-tinta { color: var(--secundario); }
.sf .sf-capa-accoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── social & mobile ────────────────────────────────────────────────────── */

.sf-social, .sf-fontes, .sf-ficha {
  box-sizing: border-box; padding: var(--sf-pad);
  max-width: 1180px; margin: 0 auto;
}

.sf-social .sf-blocos { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.sf-social .sf-bloco {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--superficie); border-radius: 32px; padding: 22px;
  font-family: var(--fonte-texto);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
/* A escolha tem três sinais: a superfície sobe, o relevo entra, e o
 * aria-pressed di-lo a quem ouve. Nunca a cor sozinha. */
.sf-social .sf-bloco[aria-pressed="true"] { background: var(--cartao); box-shadow: var(--sf-sombra); }
@media (forced-colors: active) {
  .sf-social .sf-bloco[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
}
.sf-social .sf-bloco-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sf-social .sf-bloco-nome { font-size: 15px; color: var(--secundario); }
.sf-social .sf-bloco-valor {
  font-family: var(--fonte-display); font-weight: 700; font-size: 28px;
  color: var(--azul-moco); font-variant-numeric: tabular-nums;
}
.sf-social .sf-bloco-vazio { font-size: 13px; color: var(--media); font-weight: 600; }
.sf-social .sf-bloco .sf-gente { margin-top: 14px; max-width: none; }
.sf-social .sf-bloco .sf-pessoa {
  width: var(--sf-bloco-pessoa-l); height: var(--sf-bloco-pessoa-a);
  color: var(--dados-3, #4A749C); opacity: .4; transition: opacity 150ms ease-out;
}
.sf-social .sf-bloco[aria-pressed="true"] .sf-pessoa { color: var(--azul-moco); opacity: 1; }

.sf-social .sf-social-cartao {
  background: var(--cartao); border-radius: 32px; box-shadow: var(--sf-sombra);
  padding: 22px; margin-top: 16px;
}
.sf-social .sf-cartao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sf-social .sf-cartao-meta { font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.sf-social .sf-cartao-nome {
  font-family: var(--fonte-display); font-weight: 700; font-size: 24px;
  color: var(--azul-moco); margin-top: 6px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.sf-social .sf-celulas {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.sf-social .sf-celula { min-width: 150px; }
.sf-social .sf-celula-rot { font-size: 11px; color: var(--secundario); }
.sf-social .sf-celula-num {
  font-family: var(--fonte-display); font-weight: 700; font-size: 24px;
  color: var(--azul-moco); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.sf-social .sf-celula-unidade { font-size: 13px; font-weight: 500; color: var(--secundario); }
.sf-social .sf-celula-nota { font-size: 11px; color: var(--secundario); margin-top: 3px; }

/* ── fontes: o mosaico ──────────────────────────────────────────────────── */

.sf-fontes .sf-mosaico { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sf-fontes .sf-azulejo {
  width: calc(25% - 8px); box-sizing: border-box; text-align: left; border: 0;
  background: var(--superficie); border-radius: 20px; padding: 16px;
  cursor: pointer; font-family: var(--fonte-texto);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
@media (max-width: 719px) { .sf-fontes .sf-azulejo { width: calc(50% - 5px); } }
.sf-fontes .sf-azulejo:hover { background: var(--cartao); box-shadow: var(--sf-sombra); }
.sf-fontes .sf-azulejo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sf-fontes .sf-azulejo-nome { font-size: 15px; color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.sf-fontes .sf-azulejo-conta {
  font-family: var(--fonte-display); font-weight: 700; font-size: 24px;
  color: var(--azul-moco); font-variant-numeric: tabular-nums;
}
.sf-fontes .sf-azulejo-barra {
  display: block; height: 5px; border-radius: 2px; background: var(--azul-moco);
  margin-top: 10px;
}
.sf-fontes .sf-azulejo-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.sf .sf-lic { font-weight: 600; }
.sf .sf-lic-forte { color: var(--forte); }
.sf .sf-lic-media { color: var(--media); }
/* Sem relevo sobre escuro — a luz do relevo é quase branca e sobre #0B1119
 * dá halo, não profundidade. O azulejo escuro fica liso. */
.sf-fontes .sf-azulejo-escuro { background: var(--escuro); }
.sf-fontes .sf-azulejo-escuro:hover { background: var(--escuro); box-shadow: none; }
.sf-fontes .sf-azulejo-escuro .sf-azulejo-nome { color: var(--escuro-secundario, #93A1B1); }
.sf-fontes .sf-azulejo-escuro .sf-azulejo-conta { color: var(--creme-moco); }
.sf-fontes .sf-azulejo-texto { font-size: 11px; line-height: 1.6; color: var(--escuro-texto, #F2F5F8); margin-top: 8px; }

/* ── ficha de fonte ─────────────────────────────────────────────────────── */

.sf-ficha .sf-ficha-topo { display: flex; align-items: center; gap: 12px; }
.sf .sf-volta {
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--fundo); color: var(--azul-moco); font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  /* relevo-1: é um comando, toca-se */
  box-shadow: 3px 3px 6px #D1D9E6, -3px -3px 6px #FAFCFE;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sf-ficha .sf-ficha-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: 12px;
}
.sf-ficha .sf-ficha-cab .sf-lic { font-size: 15px; }
.sf-ficha .sf-ficha-cartoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sf-ficha .sf-ficha-cartao {
  flex: 1; min-width: 180px; background: var(--cartao); border-radius: 32px;
  box-shadow: var(--sf-sombra); padding: 22px;
}
.sf-ficha .sf-ficha-num {
  font-family: var(--fonte-display); font-weight: 700; color: var(--azul-moco);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.sf-ficha .sf-ficha-52 { font-size: 52px; margin-top: 6px; }
.sf-ficha .sf-ficha-28 { font-size: 28px; margin-top: 14px; }
.sf-ficha .sf-ficha-cauda { font-size: 22px; font-weight: 600; }
.sf-ficha .sf-ficha-sub { margin-top: 20px; }
.sf-ficha .sf-ficha-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* Linha de série: superfície de dado — raio 6, plana, sem sombra. */
.sf-ficha .sf-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--superficie); border-radius: 6px; padding: 16px;
  font-family: var(--fonte-texto); min-height: 44px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sf-ficha .sf-linha-esq { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-ficha .sf-linha-nome { font-size: 15px; line-height: 1.35; color: var(--tinta); }
.sf-ficha .sf-linha-dim { color: var(--secundario); }
.sf-ficha .sf-linha-meta { font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.sf-ficha .sf-linha-dir {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none;
}
.sf-ficha .sf-linha-data { font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; }

/* Leitor de ecrã: presente, invisível. */
.sf .sf-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── o neutro do que ainda não foi julgado ─────────────────────────────────
 * «por selar» não veste a cor de nenhum juízo: fica em --secundario, com a
 * palavra a dizer o estado — a cor nunca fala sozinha nesta casa. */
.ps-selo--neutro { color: var(--secundario); }
.ps-selo--neutro i { background: var(--secundario); }
.ps-camada--neutra { border-inline-start: 3px solid var(--linha); }
.ps-linha-graf--vazia { display: inline-block; width: 60px; height: 26px; flex: none; }

/* ═══════════════════════ o ecrã de entrada ═══════════════════════
 * Três caminhos lado a lado em desktop, empilhados no telemóvel. Os campos
 * têm 48px porque recebem um segredo colado — um alvo generoso importa mais
 * aqui do que em qualquer botão. A credencial recém-nascida compõe-se em
 * mono sobre creme: é a única vez que ela se vê, e vê-se BEM. */
.en-pagina { max-width: 1060px; }
.en-caminhos { display: flex; gap: 14px; margin-top: 22px; align-items: stretch; }
.en-caminho {
  flex: 1; min-width: 0; background: var(--cartao); border-radius: 32px;
  box-shadow: var(--relevo-2); padding: 26px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.en-caminho-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 21px; color: var(--tinta); }
.en-texto { font-size: 13.5px; line-height: 1.6; color: var(--secundario); }
.en-campo {
  width: 100%; min-height: 48px; border: 1px solid var(--linha); border-radius: 14px;
  background: var(--superficie); color: var(--tinta); padding: 0 16px;
  font-family: var(--fonte-mono); font-size: 13px;
}
.en-campo:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.en-botao {
  min-height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--azul-moco); color: var(--creme-moco);
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600;
  padding: 0 22px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; margin-top: auto;
}
.en-botao[disabled] { opacity: .55; cursor: wait; }
.en-botao--linha { background: none; color: var(--azul-moco); border: 1.5px solid var(--azul-moco); }
.en-botao:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.en-aviso {
  margin-top: 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--superficie); border-inline-start: 3px solid var(--ambar);
  font-size: 13.5px; color: var(--tinta); max-width: 640px;
}
.en-nascimento { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.en-nasceu-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 17px; color: var(--tinta); }
.en-credencial {
  display: block; width: 100%; box-sizing: border-box; padding: 14px 16px;
  background: var(--creme-moco); color: #1E2833; border-radius: 14px;
  font-family: var(--fonte-mono); font-size: 13px;
  overflow-wrap: anywhere; user-select: all;
}
.en-rodape { margin-top: 20px; font-size: 12.5px; color: var(--secundario); }
@media (max-width: 900px) { .en-caminhos { flex-direction: column; } }

/* ── o pedido de conta (12-09-2026): o canal, com a promessa escrita ──────── */
.en-caminho--pedido { border-color: var(--tinta); }
.en-caminho--foco { margin-bottom: 18px; }
.en-rotulo { margin: 14px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--secundario); }
.en-campo--escolha { margin-bottom: 8px; }
.en-promessa { margin: 10px 0 12px; font-size: 14px; font-weight: 600; color: var(--tinta); }

/* ── a gaveta ao dia: o nome em cima, a(s) fonte(s) ao lado ──────────────── */
.mold-gaveta-cabeca {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1;
}
.mold-gaveta-fonte {
  font-size: 10px; letter-spacing: 0.05em; color: rgba(242, 245, 248, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════ o documento guardado ═══════════════════════
 * O selo era um link que descarregava um .txt e deixava o visitante numa aba
 * órfã. Agora a prova mostra-se: o hash inteiro para conferir, a ficha da
 * captura, e o conteúdo tal e qual foi lido. */
.doc-pagina { max-width: 900px; }
.doc-selo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-block-start: 22px; padding: 14px 18px;
  background: var(--superficie); border-radius: 14px;
  border-inline-start: 3px solid var(--ambar);
}
.doc-selo-rot {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--secundario); flex: none;
}
.doc-selo-hash {
  font-family: var(--fonte-mono, monospace); font-size: 12.5px;
  color: var(--tinta); overflow-wrap: anywhere; user-select: all;
}
.doc-ficha {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0;
}
.doc-ficha dt {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--secundario); margin: 0;
}
.doc-ficha dd {
  margin: 2px 0 0; font-size: 13.5px; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.doc-accoes { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 20px; }
.doc-corpo {
  margin-block-start: 22px; padding: 20px; border-radius: 16px;
  background: var(--escuro); color: var(--escuro-texto, #F2F5F8);
  font-family: var(--fonte-mono, monospace); font-size: 12.5px; line-height: 1.6;
  max-block-size: 60vh; overflow: auto; white-space: pre; tab-size: 2;
}
.doc-corpo:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* ═══════════════════════ a página de planos (prefixo pl-) ═══════════════════
 * A montra de venda. As regras da casa que esta folha cumpre e não discute:
 * relevo só para o que se toca e o que contém, nunca para o que se lê; alvos
 * de 44px; foco âmbar sólido; nenhuma cor com juízo — o degrau em destaque
 * distingue-se pela FITA e pela borda, nunca por um verde ou um vermelho.
 *
 * Nada aqui declara tokens novos: tudo sai do :root de landing.css. As duas
 * medidas próprias — a largura mínima de um degrau e o tamanho do número do
 * passo — vivem em .pl-pagina, para se mudarem num sítio só.
 *
 * A 375px (o telemóvel mais estreito que a casa serve) os três degraus
 * empilham-se, a barra da cauda fica com 100% da largura e nenhuma linha
 * transborda: os textos longos quebram por palavra e o selo do documento é o
 * único que quebra por carácter. Verificado contra .ps-pagina, que aos 720px
 * já baixa o padding para 20px. */

.pl-pagina { --pl-degrau-min: 280px; max-width: 1180px; }
.pl-abertura {
  margin: 14px 0 0; font-size: 15px; line-height: 1.6;
  color: var(--tinta); max-inline-size: 68ch;
}

/* ── 1 · os três degraus, lado a lado ─────────────────────────────────────── */
.pl-degraus {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 39px; /* 26 + os 13 da fita */
  align-items: stretch;
}
.pl-degrau {
  position: relative;
  flex: 1 1 var(--pl-degrau-min); min-inline-size: 0;
  background: var(--cartao); border-radius: 32px; padding: 26px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  display: flex; flex-direction: column; gap: 12px;
}
/* O degrau que a casa recomenda distingue-se por uma FITA que o diz por
 * palavras e por uma borda de duas linhas — nunca por cor sozinha, que não
 * chega a quem não a vê.
 *
 * A fita monta-se SOBRE a borda, fora do fluxo. Em fluxo normal empurrava o
 * título do degrau do meio 34px para baixo e os três nomes — Aberto,
 * Analista, Business — deixavam de assentar na mesma linha, que é a
 * primeira coisa que se lê numa montra de três colunas. */
.pl-degrau--destaque { border: 2px solid var(--azul-moco); }
.pl-fita {
  position: absolute; inset-block-start: -13px; inset-inline-start: 26px;
  max-inline-size: calc(100% - 52px); box-sizing: border-box;
  margin: 0; background: var(--creme-moco); color: #1E2833;
  border-radius: 999px; padding: 5px 12px;
  font-size: 11px; letter-spacing: .04em; font-weight: 600;
}
.pl-nome {
  margin: 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 26px; letter-spacing: -.02em; color: var(--azul-moco);
}
.pl-preco {
  margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--secundario); font-weight: 600;
}
/* Os lugares. A partir de 09-09-2026 a escada tem quatro degraus e dois
 * eixos — o que se vê e QUANTAS PESSOAS o vêem — e o segundo eixo não cabia
 * na linha do preço sem a encher. Fica em linha própria, meia-nota, colada
 * ao preço porque é parte da mesma frase: «tanto por ano, para tantos». */
.pl-lugares {
  margin: -6px 0 0; font-size: 12.5px; line-height: 1.4;
  color: var(--secundario);
}
.pl-quem { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--secundario); }

/* A medida ao vivo: o número que a página leu nesta abertura. Fica em caixa
 * de leitura (raio 6px, sem relevo) porque é dado, e dado não se toca. */
.pl-medida {
  margin: 0; padding: 12px 14px; border-radius: 6px;
  background: var(--superficie); border-inline-start: 3px solid var(--azul-moco);
  font-size: 13.5px; line-height: 1.55; color: var(--tinta);
}
.pl-medida--muda { border-inline-start-color: var(--linha); color: var(--secundario); }

.pl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pl-item {
  position: relative; padding-inline-start: 18px;
  font-size: 13.5px; line-height: 1.55; color: var(--tinta);
}
.pl-item::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em;
  inline-size: 7px; block-size: 7px; border-radius: 2px; background: var(--azul-moco);
}
/* O que ainda não corre não se lista como se corresse. A tarja diz-o por
 * palavras; o item fica em --secundario e o quadrado passa a vazado, para a
 * diferença se ver também sem cor. */
.pl-item--caminho { color: var(--secundario); }
.pl-item--caminho::before { background: none; box-shadow: inset 0 0 0 1.5px var(--secundario); }
/* O que o degrau NÃO abre. É a linha mais honesta da montra e a que fecha a
 * escada: o Painel de sector diz em voz alta que os outros sectores ficam
 * de fora, e é por essa linha que quem precisa de dois se convence de que o
 * degrau de cima lhe sai mais barato. Marca-se com um TRAÇO em vez do
 * quadrado — a diferença tem de ver-se com a cor desligada. */
.pl-item--nao { color: var(--secundario); }
.pl-item--nao::before {
  content: ""; inset-block-start: .78em;
  inline-size: 9px; block-size: 2px; border-radius: 1px;
  background: var(--linha); box-shadow: none;
}
.pl-tarja {
  display: inline-block; margin-inline-end: 6px;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--ambar);
}
/* A tarja do «a caminho» é âmbar porque é uma promessa datada. A do «não dá»
 * não é promessa nenhuma: é um limite, e um limite não pisca. Fica na tinta
 * secundária, que a distingue sem lhe dar o peso de um aviso. */
.pl-tarja--nao { color: var(--secundario); }
.pl-nota {
  margin: 0; padding: 12px 14px; border-radius: 6px;
  background: var(--superficie); border-inline-start: 3px solid var(--ambar);
  font-size: 12.5px; line-height: 1.55; color: var(--tinta);
}

.pl-cta {
  margin-block-start: auto; align-self: flex-start;
  min-height: 44px; box-sizing: border-box; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none;
  background: none; color: var(--azul-moco); border: 1.5px solid var(--azul-moco);
  font-family: var(--fonte-texto); font-size: 14px; font-weight: 600;
}
.pl-cta--cheia { background: var(--azul-moco); color: var(--creme-moco); border-color: var(--azul-moco); }
.pl-cta--clara { background: var(--creme-moco); color: #1E2833; border-color: var(--creme-moco); }
.pl-cta--linha { margin-block-start: 4px; }
.pl-cta:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* ── 2 · a cauda, contada em voz alta ─────────────────────────────────────── */
.pl-cauda, .pl-jornada {
  margin-block-start: 26px; padding: 26px;
  background: var(--cartao); border-radius: 32px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
}
.pl-faixa-titulo {
  margin: 8px 0 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 28px; letter-spacing: -.02em; color: var(--azul-moco); text-wrap: pretty;
}
.pl-barra-caixa { margin-block-start: 18px; }
.pl-barra { display: block; inline-size: 100%; block-size: 12px; }
.pl-barra-fundo { fill: var(--linha); }
/* A parte que abre leva a tinta da casa; o resto fica no cinzento da linha.
 * A cor não diz sozinha o que é cada lado — as duas etiquetas por baixo
 * escrevem o número e a palavra. */
.pl-barra-aberto { fill: var(--azul-moco); }
.pl-barra-pe {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 0;
  font-size: 12.5px; color: var(--secundario);
}
.pl-barra-et { display: inline-flex; align-items: center; gap: 6px; }
.pl-barra-et::before {
  content: ""; inline-size: 9px; block-size: 9px; border-radius: 2px;
  background: var(--linha); flex: none;
}
.pl-barra-et--aberto { color: var(--azul-moco); font-weight: 600; }
.pl-barra-et--aberto::before { background: var(--azul-moco); }

.pl-cauda-frases {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px; line-height: 1.55; color: var(--tinta);
  font-variant-numeric: tabular-nums; max-inline-size: 70ch;
}
.pl-cauda-pe { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--secundario); max-inline-size: 70ch; }

/* ── 3 · a jornada, em três passos ────────────────────────────────────────── */
.pl-passos {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.pl-passo {
  flex: 1 1 var(--pl-degrau-min); min-inline-size: 0;
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--superficie); border-radius: 16px; padding: 18px;
}
.pl-passo-n {
  flex: none; inline-size: 34px; block-size: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul-moco); color: var(--creme-moco);
  font-family: var(--fonte-display); font-weight: 700; font-size: 17px;
}
.pl-passo-corpo { min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-passo-titulo { margin: 0; font-family: var(--fonte-display); font-weight: 700; font-size: 17px; color: var(--tinta); }
.pl-passo-texto { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--secundario); }

/* ── 4 · o diferencial ────────────────────────────────────────────────────── */
.pl-prova {
  margin-block-start: 26px; padding: 30px;
  background: var(--escuro); border-radius: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.pl-prova-titulo {
  margin: 6px 0 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 32px; letter-spacing: -.02em; color: var(--escuro-texto, #F2F5F8);
}
.pl-prova-texto {
  margin: 0; font-size: 15px; line-height: 1.6;
  color: var(--escuro-texto, #F2F5F8); max-inline-size: 68ch;
}
.pl-prova-texto strong { color: var(--creme-moco); font-weight: 700; }
/* #93A1B1 sobre #0B1119 — o mesmo par medido que o resto dos escuros da casa. */
.pl-prova-pe { margin: 0; font-size: 12px; color: #93A1B1; }

/* DOIS E DOIS, SEMPRE, a partir do tablet. MEDIDO a 09-09-2026, quando o
 * quarto degrau entrou: a página de leitura da casa pára nos 1180px e dá 1100
 * de conteúdo; quatro cartões ao mínimo declarado precisam de 4 × 280 + 3 × 14
 * = 1162. Não cabem. O que a fila fazia sozinha era 3+1, com o Business
 * esticado a toda a largura por baixo — e um degrau sozinho lê-se como o
 * degrau que sobrou, que é o contrário do que uma escada de preços quer dizer.
 *
 * Alargar a página só para esta era mexer na régua de leitura da casa inteira
 * por causa de um ecrã. Duas colunas resolvem-no sem lhe tocar, e resolvem-no
 * MELHOR: em 2×2 o Painel de sector e o Business ficam lado a lado, que é
 * exactamente onde a comparação que fecha a escada tem de acontecer — três
 * painéis custam o Business. */
@media (min-width: 901px) {
  .pl-degraus > .pl-degrau { flex: 1 1 calc(50% - 7px); }
}

/* ── telemóvel ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pl-degraus, .pl-passos { flex-direction: column; }
  .pl-degrau, .pl-passo { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .pl-degrau, .pl-cauda, .pl-jornada, .pl-prova { padding: 20px; border-radius: 24px; }
  .pl-faixa-titulo { font-size: 22px; }
  .pl-prova-titulo { font-size: 24px; }
  .pl-nome { font-size: 22px; }
  .pl-cta { inline-size: 100%; }
}

@media (forced-colors: active) {
  .pl-degrau--destaque { border-color: Highlight; }
  .pl-barra-aberto { fill: Highlight; }
  .pl-cta { border: 1.5px solid ButtonText; }
}

/* A porta de entrada ganhou um caminho para a montra dos degraus. O .en-botao
 * traz `margin-top: auto` para se colar ao fundo do cartão do caminho; solto
 * na página isso resolve-se a zero e o botão encostava ao rodapé. */
.en-pagina > .en-botao { margin-block-start: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * O ARQUIVO, POR ASSUNTO — o bloco `ax-`, 31-08-2026
 *
 * O ecrã das séries deixou de ser uma lista plana de 942 linhas e passou a ser
 * um mapa de assuntos com uma prateleira de destaques. Estas regras servem só
 * esse ecrã; o `ps-` de que ele ainda usa a procura, o realce e as placas fica
 * exactamente como estava, porque é partilhado com a série e as leituras.
 *
 * TRÊS COISAS QUE MANDAM AQUI:
 *   · toque de 44px em tudo o que se toca, e a linha QUEBRA em vez de encolher
 *     quando o ecrã aperta — encolher levava as pílulas abaixo dos 44;
 *   · zero media queries no mapa: `auto-fill` com `minmax` faz o mesmo
 *     trabalho e não tem um ponto de rotura para alguém descobrir num
 *     telemóvel que ninguém testou;
 *   · nenhuma medida dinâmica em atributo `style` — a política do domínio é
 *     style-src 'self' e o atributo morre em silêncio. Tudo o que é dinâmico
 *     aqui é atributo de SVG.
 * ═════════════════════════════════════════════════════════════════════════ */

.ax-pagina { padding-bottom: 64px; }

/* ── a entrada ─────────────────────────────────────────────────────────── */

.ax-cabeca { margin-bottom: 4px; }
.ax-titulo {
  margin: 8px 0 0; font-family: var(--fonte-display); font-weight: 700;
  letter-spacing: -.03em; color: var(--azul-moco); font-size: 40px;
  line-height: 1.05; text-wrap: balance; font-variant-numeric: tabular-nums;
}
/* «49 medidas, 416 séries»: as duas contagens no mesmo título, porque são duas
 * coisas diferentes e o leitor tem de as ler em vez de as somar. A segunda
 * fica em tom secundário — é a mesma verdade, contada mais fina. */
.ax-titulo-sep { color: var(--secundario); font-weight: 400; }
.ax-titulo-fraco { color: var(--secundario); }
.ax-titulo-assunto {
  margin: 10px 0 0; font-family: var(--fonte-display); font-weight: 700;
  letter-spacing: -.03em; color: var(--azul-moco); font-size: 28px; line-height: 1.05;
}
.ax-sub {
  font-size: 13px; line-height: 1.55; color: var(--secundario);
  margin-top: 8px; max-width: 62ch; text-wrap: pretty;
}
.ax-conta-topo {
  font-size: 13px; color: var(--secundario); margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.ax-procura { margin-top: 16px; }

.ax-acima {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500; margin: 32px 0 12px;
}

/* ── a prateleira dos destaques ────────────────────────────────────────── */

.ax-prateleira {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ax-destaque {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--cartao); border-radius: 24px; padding: 20px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  color: inherit; text-decoration: none; min-height: 44px;
  transition: box-shadow 150ms ease-out;
}
.ax-destaque:hover { box-shadow: var(--relevo-1, 3px 3px 6px #D1D9E6, -3px -3px 6px #FAFCFE); }
.ax-destaque:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.ax-destaque-rot {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); font-weight: 500;
}
.ax-destaque-nome {
  margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--tinta);
}
.ax-destaque-num {
  font-family: var(--fonte-display); font-weight: 700; color: var(--azul-moco);
  font-size: 40px; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px;
}
.ax-destaque-un {
  font-style: normal; font-size: 13px; font-weight: 500; color: var(--secundario);
  font-family: var(--fonte-texto); letter-spacing: 0;
}
/* A tira do leque: um traço por balcão, colocado pela posição do seu valor
 * entre o mais barato e o mais caro DO DIA. Não é uma linha no tempo, e a
 * legenda por baixo diz isso por extenso — desenhar uma série a quem recebeu
 * um ponto seria a casa a desenhar o que não leu. */
.ax-tira { display: block; width: 100%; height: 20px; }
.ax-tira-traco { fill: var(--dados-3, #4A749C); }
.ax-destaque-meta, .ax-destaque-fundo {
  font-size: 13px; line-height: 1.5; color: var(--secundario);
  font-variant-numeric: tabular-nums;
}
.ax-destaque-fundo { text-wrap: pretty; }
.ax-destaque-pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.ax-selo { font-size: 11px; font-weight: 500; }
.ax-selo--forte { color: var(--forte); }
.ax-selo--media { color: var(--media); }
.ax-selo--fraca { color: var(--fraca); }
.ax-selo--nossa { color: var(--azul-moco); }
.ax-destaque-data {
  font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums;
}
.ax-nota { font-size: 13px; color: var(--secundario); margin-top: 12px; }

/* ── o mapa dos assuntos ───────────────────────────────────────────────── */

.ax-mapa {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ax-assunto {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--cartao); border-radius: 24px; padding: 20px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  color: inherit; text-decoration: none; min-height: 146px;
  transition: box-shadow 150ms ease-out;
}
.ax-assunto:hover { box-shadow: var(--relevo-1, 3px 3px 6px #D1D9E6, -3px -3px 6px #FAFCFE); }
.ax-assunto:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.ax-assunto-nome {
  margin: 0; font-family: var(--fonte-display); font-weight: 700; font-size: 20px;
  letter-spacing: -.02em; color: var(--azul-moco);
}
.ax-assunto-frase {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--secundario);
  text-wrap: pretty; flex: 1;
}
.ax-assunto-meta {
  font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums;
  margin-top: auto;
}

/* ── o degrau e a saída ────────────────────────────────────────────────── */

/* Um degrau com nome, nunca uma parede. O fio de âmbar é o mesmo dos avisos
 * da casa: um limite de conta é um facto sobre nós, não um alarme sobre quem
 * lê. E é o ÚNICO apelo deste ecrã — três apelos numa página lêem-se como
 * insistência, e a casa não insiste. */
.ax-degrau {
  margin-top: 32px; border-inline-start: 3px solid var(--ambar);
  padding: 4px 0 4px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.ax-degrau-txt {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--secundario);
  flex: 1 1 320px; text-wrap: pretty;
}
.ax-degrau-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--azul-moco); color: #F2F5F8;
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ax-degrau-btn:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.ax-saida {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px;
  font-size: 13px; color: var(--azul-moco); text-decoration: none;
  border-bottom: 1px solid rgba(23, 61, 100, .3);
}
.ax-saida:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* ── a página de um assunto ────────────────────────────────────────────── */

.ax-cabeca-fina { display: flex; align-items: center; gap: 12px; }
.ax-volta {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fundo); color: var(--azul-moco); text-decoration: none;
  font-size: 18px; line-height: 1;
  box-shadow: var(--relevo-1, 3px 3px 6px #D1D9E6, -3px -3px 6px #FAFCFE);
}
.ax-volta:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.ax-migalha {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secundario); display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ax-migalha-l { color: var(--secundario); text-decoration: none; border-bottom: 1px solid transparent; }
.ax-migalha-l:hover { border-bottom-color: var(--secundario); }
.ax-migalha-sep { opacity: .6; }

/* As pílulas dos temas são LIGAÇÕES, não botões: ganham voltar, avançar e
 * endereço copiável de graça. `flex-wrap` e não `overflow-x` — uma tira que
 * desliza esconde metade dos temas a quem não sabe que ela desliza. */
.ax-pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ax-pil {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: 13px; white-space: nowrap; text-decoration: none;
  font-variant-numeric: tabular-nums;
  background: transparent; color: var(--secundario);
  border: 1px solid rgba(11, 17, 25, .16);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.ax-pil:hover { background: rgba(23, 61, 100, .06); }
.ax-pil--on { background: var(--azul-moco); color: #F2F5F8; border-color: var(--azul-moco); }
.ax-pil:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* ── a barra de contagem e ordenação ───────────────────────────────────── */

/* QUEBRA, não encolhe. Num ecrã de 350px as pílulas de ordenação numa só
 * linha desciam abaixo dos 44px de toque; a linha parte-se e cada uma fica
 * inteira. */
.ax-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin-top: 20px;
}
.ax-conta { font-size: 13px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.ax-ordens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ax-ordens-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--secundario); }
.ax-ord {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 13px; cursor: pointer; white-space: nowrap;
  font-family: var(--fonte-texto);
  background: transparent; color: var(--secundario);
  border: 1px solid rgba(11, 17, 25, .16);
}
.ax-ord[aria-pressed="true"] { background: var(--azul-moco); color: #F2F5F8; border-color: var(--azul-moco); }
.ax-ord:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* ── a lista e a linha da medida ───────────────────────────────────────── */

.ax-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ax-linha {
  background: var(--cartao); border-radius: 20px; padding: 16px 18px;
  box-shadow: var(--relevo-2, 6px 6px 12px #D1D9E6, -6px -6px 12px #FAFCFE);
  display: flex; align-items: center; gap: 16px;
  color: inherit; text-decoration: none; min-height: 76px; box-sizing: border-box;
}
.ax-linha:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.ax-linha--dobra { display: block; padding-bottom: 8px; }
.ax-linha-topo {
  display: flex; align-items: center; gap: 16px;
  color: inherit; text-decoration: none; min-height: 44px;
}
.ax-linha-topo:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.ax-linha-corpo { flex: 1; min-width: 0; }
.ax-linha-nome { font-size: 15px; line-height: 1.35; color: var(--tinta); }
.ax-linha-meta {
  font-size: 11px; color: var(--secundario); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ax-linha-valor {
  font-family: var(--fonte-display); font-weight: 700; color: var(--azul-moco);
  font-variant-numeric: tabular-nums; font-size: 20px; flex: none;
}
/* Sem valor servido, mostra-se a data da última leitura. NUNCA uma célula
 * muda, e nunca um cadeado: o cadeado diz «não podes» onde a data diz «é isto
 * o que há», e só a segunda é verdade. */
.ax-linha-data {
  flex: none; text-align: right; font-size: 13px; color: var(--secundario);
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.3;
}
.ax-linha-data i {
  font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}

/* O expansor abre as séries-filhas NO SÍTIO. Sem isto, ver um balcão de uma
 * medida de vinte custava duas viagens. */
.ax-expandir {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  margin-top: 4px; border: none; background: transparent; cursor: pointer;
  font-family: var(--fonte-texto); font-size: 13px; color: var(--azul-moco);
}
.ax-expandir::after { content: ' ▾'; }
.ax-expandir[aria-expanded="true"]::after { content: ' ▴'; }
.ax-expandir:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.ax-filhas {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 6px;
}
.ax-filhas[hidden] { display: none; }
.ax-filha {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 0 4px; color: inherit; text-decoration: none; border-radius: 6px;
}
.ax-filha:hover { background: var(--superficie); }
.ax-filha:focus-visible { outline: 2px solid var(--ambar); outline-offset: -2px; }
.ax-filha-nome { flex: 1; min-width: 0; font-size: 13px; color: var(--tinta); }
.ax-filha-meta { font-size: 11px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.ax-filha-valor {
  font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600;
  color: var(--azul-moco); min-width: 84px; text-align: right;
}
.ax-filha-valor--vazia { font-weight: 400; font-size: 13px; color: var(--secundario); }

.ax-mais { margin-top: 8px; }
.ax-fim { font-size: 13px; color: var(--secundario); margin-top: 12px; text-align: center; }
.ax-alarga {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  margin-top: 12px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--azul-moco);
  border: 1px solid rgba(23, 61, 100, .3); font-family: var(--fonte-texto); font-size: 13px;
}
.ax-alarga:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

@media (max-width: 640px) {
  .ax-pagina { padding: 20px 16px 48px; }
  .ax-titulo { font-size: 24px; }
  .ax-titulo-assunto { font-size: 22px; }
  .ax-destaque-num { font-size: 32px; }
  .ax-prateleira, .ax-mapa { grid-template-columns: 1fr; }
}

/* A mediana na linha da lista: o número por cima do rótulo que diz o que ele
 * é. Um resumo por dizer o nome deixa de ser um número que apareceu sozinho. */
.ax-linha-med { align-items: flex-end; }
.ax-linha-med-num {
  font-family: var(--fonte-display); font-weight: 700; color: var(--azul-moco);
  font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.15;
}

/* O formulário da credencial de sempre (16-09-2026): o correio e a credencial num
 * <form> de verdade, para o gestor de palavras-passe do navegador os reconhecer.
 * Por dentro, a mesma coluna do caminho. */
.en-forma { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; inline-size: 100%; margin-top: auto; }