/* Esqueleto comum as cinco paginas: cabecalho, rodape, botoes, contentor e tipografia.
 *
 * PORQUE EXISTE. Antes eram duas paginas e o esqueleto vivia duplicado dentro de cada uma.
 * Com cinco, a duplicacao passa a ser cinco copias das mesmas duzentas linhas, e copias
 * divergem em silencio: basta alguem corrigir o rodape numa pagina.
 *
 * ZERO CORES LITERAIS. Tudo sai de `tokens.css`, e o `scripts/verificar_cores.py` varre
 * `public/*.html`. Este ficheiro nao e varrido por ele, logo a disciplina aqui e manual e
 * fica dita: se aparecer um `#` de cor neste ficheiro, o tema escuro deixa de funcionar
 * nesse ponto e nenhum instrumento acusa.
 *
 * MOBILE-FIRST. As regras base servem o ecra estreito e os `@media (min-width: ...)`
 * acrescentam colunas. A escala e a que o site ja usava: 40rem, 48rem, 52rem e 60rem.
 */

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

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

/* GEOMETRIA E MOVIMENTO, tokens proprios. Ficam AQUI e nao no `tokens.css` porque esse
   ficheiro diz de si mesmo que os valores sao verbatim da migracao e nao se alteram sem
   decisao. Nenhum destes e cor, logo a regra da paleta nao e tocada. */
:root {
  --r-sm: 8px;      /* selos, pastilhas pequenas, campos */
  --r-md: 14px;     /* cartoes, botoes, entradas */
  --r-lg: 20px;     /* pecas grandes: miniatura do painel, caixa de contacto */
  --r-full: 999px;  /* capsulas */

  /* DOIS NIVEIS DE SOMBRA, e so servem o tema claro. No escuro uma sombra preta sobre um
     fundo quase preto nao se ve, e a elevacao le-se pelos DOIS TONS DE CARTAO
     (`--card` e `--card-raise`), que e exactamente o que a direccao pede. */
  --sombra-1: 0 1px 2px rgb(var(--shadow) / 0.04), 0 2px 6px -2px rgb(var(--shadow) / 0.06);
  --sombra-2: 0 2px 4px rgb(var(--shadow) / 0.05), 0 12px 24px -8px rgb(var(--shadow) / 0.12);

  /* Uma curva e tres duracoes, dentro dos 150 a 250 ms pedidos. */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --t-rapida: 150ms;
  --t-media: 200ms;
  --t-lenta: 250ms;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* A INVERSAO. O corpo passa a serifa para o texto longo respirar, e os titulos passam a
     sans, que e o contrario do que este site fazia ate hoje. As pilhas ja estavam certas no
     `tokens.css` e nenhuma e externa: `--serif` cai em Charter, Cambria ou Georgia, todas de
     sistema. As ETIQUETAS e a navegacao NAO herdam daqui, e voltam a sans mais abaixo: uma
     barra de navegacao em serifa le-se como um jornal e nao como um produto. */
  font-family: var(--serif);
  font-size: 1.075rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sem isto, uma palavra longa dentro de uma coluna estreita empurra a pagina para o lado
     e o corpo ganha barra horizontal aos 360px. */
  overflow-wrap: break-word;
}

.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
img { max-width: 100%; height: auto }
svg { display: block }

/* TITULOS EM SANS, peso 700, com `letter-spacing` negativo que cresce com o tamanho. Um
   titulo grande em sans precisa de mais aperto do que um pequeno, e um valor unico ou
   afasta as letras no H1 ou esmaga-as no H3. */
h1, h2, h3 {
  font-family: var(--sans); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em;
}
h1 { letter-spacing: -0.032em }
p { margin: 0 }
ul, ol { margin: 0 }

/* ETIQUETAS, NAVEGACAO E CONTROLOS VOLTAM A SANS. Sao interface e nao leitura: herdar a
   serifa do corpo poe uma barra de navegacao com o ar de um jornal. */
.nav-links a, .nav-cta, .btn, .foot-h, .foot-col a, .op-t, .cap-t, .ent-t,
.strip-seals li, .cx-de, .cs-nome, .cs-msg-as, .comp-diz, .flut-p, .card .tag {
  font-family: var(--sans);
}

/* NUMEROS GRANDES EM SANS, com `tabular-nums` para nao dancarem se mudarem. */
.comp-hora, .flut-n {
  font-family: var(--sans); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute; left: -9999px; top: auto;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 6px; z-index: 20;
}
.skip:focus { left: 1rem; top: 1rem }

/* ---------------------------------------------------------------- cabecalho
 * A barra de navegacao esta completa em todas as paginas, e nao so em /gabinetes: e a
 * escolha do prototipo e o CEO quer ve-la como esta. As ligacoes sao `<a href>` a serio,
 * com URL, teclado e indexacao, porque o prototipo usava `<span>` com `onclick` e isso nao
 * e navegacao, e um clique.
 *
 * Ao estreitar, as ligacoes MUDAM DE LINHA em vez de desaparecerem. A versao anterior
 * escondia-as abaixo dos 48rem, o que num site de uma pagina custava pouco. Com cinco
 * paginas, esconder a navegacao no telemovel e nao ter navegacao no telemovel.
 */
.site-header {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 1.25rem; padding-block: .8rem;
}
.wordmark {
  font-family: var(--mono); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); letter-spacing: -0.01em; text-decoration: none;
}
.wordmark:hover { text-decoration: none }
.wordmark .pt { color: var(--accent) }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; flex: 1 1 100% }
.nav-links {
  display: flex; flex-wrap: wrap; gap: .35rem 1.05rem;
  list-style: none; padding: 0; margin: 0;
}
.nav-links a {
  color: var(--ink-soft); font-size: .9rem;
  padding-block: .15rem;
  transition: color 120ms ease;
}
.nav-links a:hover { color: var(--ink); text-decoration: none }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  box-shadow: 0 2px 0 0 var(--accent);
}
/* O caminho, a direita, como no prototipo. Some no estreito porque e ornamento e nao
   navegacao, e no estreito o espaco e todo da navegacao. */
.nav-path { display: none; font-family: var(--mono); font-size: .78rem; color: var(--ink-soft) }

@media (min-width: 52rem) {
  .site-header .wrap { flex-wrap: nowrap; justify-content: space-between; padding-block: 1rem }
  .nav { flex: 0 1 auto; justify-content: flex-end; gap: 1.5rem }
  .nav-links { gap: 1.3rem }
}
@media (min-width: 68rem) {
  .nav-path { display: inline }
}

/* ------------------------------------------------------------------- botoes */
.btn {
  display: inline-block; font-weight: 650; font-size: 1rem;
  padding: .72rem 1.2rem; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer;
  font-family: var(--sans); text-align: left;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* O hover do primario tem valor proprio por tema desde 2026-07-28: em claro escurece, em
   escuro aclara, e nos dois casos afasta-se do fundo da pagina. Medido por
   `scripts/contraste.py`. O texto segue `--accent-ink` e nao um branco fixo. */
.btn-primary { background: var(--accent); color: var(--accent-ink) }
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-ink); text-decoration: none }
/* A FRONTEIRA DO BOTAO FANTASMA E `--ink-soft` E NAO `--rule`, desde a ronda 5.
   O `--rule` esta a 1.28:1 em tema escuro e 1.21:1 em claro, medido por
   `scripts/contraste.py`, e o criterio 1.4.11 da WCAG pede 3:1 para a fronteira
   de um componente. Um botao cuja unica fronteira e um filete que nao se ve nao
   se distingue do fundo. Com `--ink-soft` da 7.01:1 e 5.87:1. */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-soft) }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none }
.btn-sm { padding: .5rem .95rem; font-size: .92rem }

/* -------------------------------------------------------------- tipografia */
.eyebrow {
  font-family: var(--mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent); margin: 0;
}
.divider {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.5rem, 6.5vw, 5.25rem);
  margin-top: clamp(2.5rem, 6.5vw, 5.25rem);
}
section { scroll-margin-top: 5rem }

.page-head { padding-top: clamp(2.25rem, 6vw, 4.5rem) }
.page-head h1 {
  font-size: clamp(2.15rem, 5.4vw, 3.5rem);
  margin: 1rem 0 0; max-width: 24ch;
}
/* O LEAD E SERIFA e a medida encurta para 40rem. Uma linha de serifa longa cansa mais
   depressa do que a mesma linha em sans, e 44rem a este corpo passava dos 90 caracteres. */
.lead {
  color: var(--ink-soft); font-family: var(--serif);
  font-size: clamp(1.14rem, 1.9vw, 1.36rem); line-height: 1.55;
  margin-top: 1.3rem; max-width: 40rem;
}
.section-h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: .8rem 0 0 }
.section-intro { color: var(--ink-soft); margin-top: .9rem; max-width: 40rem; font-size: 1.05rem }
.nota { color: var(--ink-soft); font-size: .94rem }

.prosa { display: grid; gap: 1.15rem; margin-top: 1.6rem; max-width: 40rem }
.prosa p { color: var(--ink) }

/* lista de dores, com o tracinho a accent */
.pain { margin-top: 1.6rem; display: grid; gap: .85rem; max-width: 46rem; padding: 0 }
.pain li { list-style: none; padding-left: 1.6rem; position: relative; color: var(--ink) }
.pain li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .7rem; height: 2px; background: var(--accent);
}

/* --------------------------------------------------------------- cartoes */
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.4rem; position: relative;
}
.card h3 { font-size: 1.12rem; margin: .5rem 0 .4rem }
.card p { color: var(--ink-soft); font-size: .95rem }
.card .tag {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); margin: 0;
}
.grelha { display: grid; gap: 1rem; margin-top: 1.7rem }
@media (min-width: 40rem) { .grelha-2 { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 48rem) { .grelha-3 { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 52rem) { .grelha-4 { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 68rem) { .grelha-4 { grid-template-columns: repeat(4, 1fr) } }

.marcado { border-left: 3px solid var(--accent) }

/* faixa de selos */
.strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(1.75rem, 3.5vw, 2.75rem) }
.strip-seals { list-style: none; margin: 0; padding: 1.05rem 0; display: flex; flex-wrap: wrap; gap: .8rem 2.2rem }
.strip-seals li { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-size: .92rem }
.seal-ico { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto }

/* caixa de contacto */
.contact-box {
  margin-top: 1.6rem; background: var(--card);
  border: 1px solid var(--rule); border-radius: 12px;
  padding: clamp(1.35rem, 4vw, 2.5rem);
}
.contact-box p { color: var(--ink-soft) }
.contact-box .actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.3rem }
.contact-box .email { font-family: var(--mono); font-size: 1rem; color: var(--ink); overflow-wrap: anywhere }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem }

/* ---------------------------------------------------------------- rodape */
.site-footer { margin-top: clamp(3.5rem, 8vw, 6.5rem); border-top: 1px solid var(--rule) }
.site-footer .wrap { padding-block: 2.4rem }
.foot-top { display: flex; flex-wrap: wrap; gap: 1.8rem 3rem; justify-content: space-between }
.foot-brand { max-width: 24rem }
.foot-brand .wordmark { font-size: 1.05rem }
.foot-desc { color: var(--ink-soft); font-size: .9rem; margin-top: .6rem }
.foot-cols { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem }
.foot-h { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); margin: 0 }
.foot-col ul { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem }
.foot-col a { color: var(--ink-soft); font-size: .92rem; transition: color 120ms ease; overflow-wrap: anywhere }
.foot-col a:hover { color: var(--ink) }
.foot-disclaimer { color: var(--ink-soft); font-size: .85rem; max-width: 54rem; border-top: 1px solid var(--rule); padding-top: 1.3rem; margin-top: 1.8rem }
.foot-meta { color: var(--ink-soft); font-size: .82rem; font-family: var(--mono); margin-top: .8rem }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important }
}

/* =====================================================================
 * SISTEMA DE REACCAO. 2026-07-28.
 *
 * A DIRECCAO: o ar moderno vem de TUDO RESPONDER A QUEM VISITA, e nao de
 * coisas a mexer sozinhas. Medido no anthropic.com: uma animacao em ciclo
 * contra mil e duzentos elementos com transicao. Logo o esforco vai todo
 * para os estados, e o movimento continuo encolhe para tres pecas.
 *
 * QUATRO ESTADOS PARA CADA COISA TOCAVEL: repouso, hover, foco e activo.
 * O hover levanta 2px E ganha sombra, porque so mudar cor nao chega para
 * dizer "isto e clicavel", e num tema escuro a mudanca de cor quase nao se
 * ve. No escuro a elevacao le-se pelo tom do cartao e nao pela sombra.
 *
 * O FOCO E DESENHADO E NUNCA O CONTORNO POR DEFEITO. O contorno do sistema
 * muda de cor conforme o navegador e desaparece sobre fundos verdes. Este
 * tem dois aneis, um a accent e outro a cor do papel por baixo, e por isso
 * ve-se sobre QUALQUER fundo do site, incluindo os botoes verdes cheios.
 * ===================================================================== */

/* O anel de foco, um so sitio para todo o site. `:focus-visible` e nao
   `:focus`: um rato a carregar num botao nao deve acender anel nenhum. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* O SEGUNDO ANEL LEVA A ESPECIFICIDADE DOS HOVER, e isto foi medido e nao
   suposto: `.btn:hover` vale 0-2-0 e um `:focus-visible` solto vale 0-1-0, logo
   um botao focado E sob o rato perdia o anel de fora para a sombra do hover.
   Listar os componentes empata a especificidade, e como esta regra vem depois,
   ganha. Um foco que desaparece quando o rato passa por cima e um foco partido. */
.btn:focus-visible, .nav-cta:focus-visible, .ent:focus-visible, .card:focus-visible,
.wordmark:focus-visible, .nav-links a:focus-visible, .foot-col a:focus-visible,
.skip:focus-visible, .cap:focus-visible {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px rgb(var(--shadow) / 0.10);
}
/* Sobre fundo verde cheio o anel a accent desaparece contra o proprio verde,
   logo inverte-se: o anel de dentro passa a ser a cor do texto que assenta no
   verde, e o de fora o proprio verde. */
.btn-primary:focus-visible, .nav-cta:focus-visible, .ent-destaque:focus-visible {
  outline-color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--accent), 0 0 0 6px var(--paper);
}

/* ---------------------------------------------------------------- botoes */
.btn {
  border-radius: var(--r-md);
  transition: background var(--t-media) var(--curva), border-color var(--t-media) var(--curva),
              color var(--t-media) var(--curva), transform var(--t-rapida) var(--curva),
              box-shadow var(--t-media) var(--curva);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-2) }
/* O ACTIVO POUSA. Sem isto o botao fica levantado enquanto se carrega nele, e
   um botao que nao afunda ao ser premido nao parece um botao. */
.btn:active { transform: translateY(0); box-shadow: var(--sombra-1); transition-duration: 60ms }

.nav-cta {
  border-radius: var(--r-md);
  transition: background var(--t-media) var(--curva), transform var(--t-rapida) var(--curva),
              box-shadow var(--t-media) var(--curva);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2) }
.nav-cta:active { transform: translateY(0); box-shadow: none; transition-duration: 60ms }

/* ------------------------------------------------------------ navegacao */
.nav-links a {
  position: relative;
  transition: color var(--t-rapida) var(--curva);
}
/* O sublinhado CRESCE do centro em vez de aparecer de uma vez. Anima
   `transform`, nao `width`, logo nao ha reflow. */
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--t-media) var(--curva);
}
.nav-links a:hover::after { transform: scaleX(1) }
.nav-links a[aria-current="page"]::after { transform: scaleX(1) }
/* O item actual ja tinha o filete por `box-shadow`, que agora seria duplicado. */
.nav-links a[aria-current="page"] { box-shadow: none }

/* `a.wordmark` e nao `.wordmark`: a marca do RODAPE e um `<span>` e nao uma
   ligacao, e reagir ao rato num sitio onde nao ha clique promete o que nao ha. */
a.wordmark { transition: opacity var(--t-rapida) var(--curva) }
a.wordmark:hover { opacity: .72 }

/* -------------------------------------------------------------- cartoes */
.card, .cap, .passos-op li, .comp-col, .flut-c, .contact-box {
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
  transition: transform var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva),
              border-color var(--t-media) var(--curva), background var(--t-media) var(--curva);
}
.card:hover, .cap:hover, .passos-op li:hover, .comp-col:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-color: var(--accent);
  background: var(--card-raise);
}
/* OS CARTOES FLUTUANTES SAO A EXCEPCAO E NAO LEVANTAM, por conflito medido e nao
   por gosto: a `boia` ja anima `transform` neles, e uma animacao a correr ganha a
   uma declaracao de hover na MESMA propriedade. O hover ficaria sem efeito e o
   defeito seria invisivel no codigo. Reagem pela sombra e pela fronteira, que
   nenhuma animacao esta a usar. */
.flut-c:hover { box-shadow: var(--sombra-2); border-color: var(--accent); background: var(--card-raise) }
.contact-box { border-radius: var(--r-lg) }

/* ---------------------------------------------------- linhas e listas */
/* Linhas de tabela e itens de lista destacam ao passar. O fundo entra a
   `--card-raise` no escuro, que e o segundo tom, e a `--diff-green-bg` no
   claro, que e o unico fundo verde da paleta e ja existe. */
.cs-tab tbody tr, .mini-lista li, .cx li, .comp-lista li, .strip-seals li, .foot-col li {
  transition: background var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva);
}
.cs-tab tbody tr:hover, .mini-lista li:hover, .cx li:hover { background: var(--card-raise) }
@media (prefers-color-scheme: light) {
  .cs-tab tbody tr:hover, .mini-lista li:hover, .cx li:hover { background: var(--diff-green-bg) }
}
:root[data-theme="light"] .cs-tab tbody tr:hover,
:root[data-theme="light"] .mini-lista li:hover,
:root[data-theme="light"] .cx li:hover { background: var(--diff-green-bg) }
:root[data-theme="dark"] .cs-tab tbody tr:hover,
:root[data-theme="dark"] .mini-lista li:hover,
:root[data-theme="dark"] .cx li:hover { background: var(--card-raise) }

.foot-col a { transition: color var(--t-rapida) var(--curva) }

/* -------------------------------------------------- entrada por scroll
 * UMA VEZ, deslocamento curto, e so quando a peca chega ao ecra. O
 * `site.js` poe `data-ver` nos alvos e troca para `data-ver="1"` quando o
 * observador os ve. Sem JavaScript nao ha atributo nenhum e tudo fica
 * visivel, que continua a ser o estado seguro.
 */
/* ESCONDE-SE SO COM A CLASSE `mov`, e a classe e posta por um script SINCRONO no
   `<head>`. A ordem importa e ja mordeu: com o `site.js` a correr em `defer`, a
   pagina pintava o conteudo visivel, a classe chegava depois, o conteudo
   desaparecia e so entao reaparecia a esmorecer. Um relampago, em todas as
   visitas. Posta antes da primeira pintura, nao ha lampejo nenhum.
   Sem JavaScript a classe nunca aparece e nada se esconde. */
.mov [data-ver] { opacity: 0; transform: translateY(10px) }
.mov [data-ver="1"] {
  opacity: 1; transform: none;
  transition: opacity var(--t-lenta) var(--curva), transform var(--t-lenta) var(--curva);
}

@media (prefers-reduced-motion: reduce) {
  [data-ver], [data-ver="1"] { opacity: 1 !important; transform: none !important }
  .btn:hover, .nav-cta:hover, a.card:hover, .cap:hover,
  .passos-op li:hover, .flut-c:hover { transform: none !important }
}

/* =====================================================================
 * RONDA 5, 2026-07-28. Acrescentado, nada removido.
 * ===================================================================== */

/* --------------------------------------------------- navegacao com botao
 * O ultimo item da barra deixa de ser texto e passa a botao cheio com seta.
 * A sombra do cabecalho so aparece em scroll, posta por JavaScript numa
 * classe: sem JavaScript nao ha sombra e nao falta nada.
 */
.site-header.scrolled { box-shadow: 0 1px 0 0 var(--rule) }
.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: var(--accent-ink);
  font-size: .88rem; font-weight: 650;
  padding: .42rem .8rem; border-radius: 6px;
  border: 1px solid var(--accent);
}
/* A BORDA ACOMPANHA O FUNDO. Ficava a `--accent` enquanto o fundo passava a
   `--accent-deep`, e o botao ganhava um aro mais claro a toda a volta no hover. */
.nav-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); text-decoration: none }
.nav-cta svg { width: 14px; height: 9px }

/* ------------------------------------------------------------ pastilha
 * Capsula em mono com um ponto a accent. Fronteira a --rule de proposito:
 * NAO e clicavel, logo o criterio 1.4.11 nao se lhe aplica.
 */
.pastilha {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .35rem .8rem; margin: 0;
}
.pastilha svg { width: 6px; height: 6px; color: var(--accent); flex: 0 0 auto }

/* ------------------------------------------------- fila de capacidades */
.capacidades { display: grid; gap: .8rem; margin-top: 1.8rem; padding: 0; list-style: none }
@media (min-width: 46rem) { .capacidades { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 64rem) { .capacidades { grid-template-columns: repeat(4, 1fr) } }
.cap {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.cap svg { width: 20px; height: 20px; color: var(--accent); margin-bottom: .6rem }
.cap-t { font-weight: 650; color: var(--ink); font-size: .98rem }
.cap-d { color: var(--ink-soft); font-size: .9rem; margin-top: .25rem }

/* --------------------------------------------------------- seccao da tese
 * A frase em serifa grande, centrada, e tres razoes com filete verde a
 * esquerda. Aos 360px a frase deixa de ser centrada e as razoes empilham,
 * mantendo o filete: e o que a nota do prototipo documenta.
 */
.tese { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(2.5rem, 6vw, 5rem) }
.tese .wrap { padding-block: clamp(2.2rem, 5vw, 3.6rem) }
/* A frase da tese e o TITULO desta seccao, e nao uma citacao: e o alvo do
   `aria-labelledby`. Segue a inversao e passa a sans, com o mesmo aperto dos H2. */
.tese-frase {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.18;
  letter-spacing: -0.028em; color: var(--ink);
  max-width: 26ch; text-align: left;
}
.tese-razoes { display: grid; gap: .9rem; margin-top: 1.6rem }
.tese-razoes p {
  color: var(--ink-soft); font-size: .96rem; line-height: 1.5;
  border-left: 2px solid var(--accent); padding-left: .85rem;
}
@media (min-width: 52rem) {
  .tese-frase { text-align: center; max-width: 30ch; margin-inline: auto }
  .tese-razoes { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2rem }
}

/* ------------------------------------------------------------ movimento
 * UM GESTO POR ELEMENTO E NADA EM CICLO. Entradas a 340ms com translateY de
 * 12px, campos em sequencia de 60ms, sinalizacoes no fim, e um pulso unico
 * de 400ms que existe uma vez no site inteiro.
 *
 * As animacoes so correm com a classe `mov` no <html>, posta por JavaScript.
 * Sem JavaScript nada se mexe e tudo fica visivel, que e o estado seguro:
 * o contrario seria conteudo invisivel a espera de uma animacao que nao vem.
 */
@keyframes ent { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes lin { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
/* O PULSO UNICO ERA `box-shadow` E PASSA A `opacity`, a 2026-07-28. A regra de
   custo proibe animar `box-shadow`, e proibe-a com razao: uma sombra animada
   repinta a caixa inteira a cada quadro. O contorno vive agora num
   pseudo-elemento com borda fixa, e o que pulsa e a opacidade dele. */
@keyframes pul { 0%, 100% { opacity: 0 } 45% { opacity: 1 } }

.mov [data-ent] { animation: ent .34s cubic-bezier(.2,.7,.3,1) both }
.mov [data-ent="2"] { animation-delay: .12s }
.mov [data-lin] { animation: lin .28s ease-out both }
[data-pulso] { position: relative }
[data-pulso]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  border: 2px solid var(--accent); border-radius: inherit;
}
.mov [data-pulso]::after { animation: pul .4s ease-out .55s 1 both }

@media (prefers-reduced-motion: reduce) {
  .mov [data-ent], .mov [data-lin], .mov [data-pulso]::after { animation: none !important }
}

/* =====================================================================
 * MODELO OPERACIONAL, um bloco por pagina. 2026-07-28.
 * Rotulo em mono, titulo curto, e tres ou quatro passos de uma linha. E o
 * fecho do corpo de cada pagina e nao um capitulo novo: quem chega ao fim
 * quer saber como isto funciona na pratica, e nao mais argumentos.
 * ===================================================================== */
.modelo { border-top: 1px solid var(--rule); margin-top: clamp(2.5rem, 6vw, 4.5rem) }
.modelo .wrap { padding-block: clamp(1.8rem, 4vw, 2.8rem) }
.modelo h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: .55rem 0 0 }
.passos-op { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .7rem; counter-reset: op }
@media (min-width: 46rem) { .passos-op { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 64rem) { .passos-op.tres { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 64rem) { .passos-op.quatro { grid-template-columns: repeat(4, 1fr) } }
.passos-op li {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: .85rem 1rem; counter-increment: op;
}
.passos-op li::before {
  content: "0" counter(op);
  display: block; font-family: var(--mono); font-weight: 700; font-size: .8rem;
  color: var(--accent); margin-bottom: .3rem;
}
/* OS DOIS SAO `<span>`, LOGO INLINE, E ISTO ERA UM DEFEITO A SERIO: o `margin-top`
   do `.op-d` NAO FAZIA NADA, porque uma margem vertical nao se aplica a uma caixa
   inline. As duas linhas corriam juntas e o texto secundario aparecia colado ao
   titulo, que e o que o CEO viu nos cartoes 01, 02 e 03. `display: block` poe cada
   um na sua linha e devolve o efeito a margem que ja la estava.
   Corrige as 20 instancias das cinco paginas de uma so vez, por viver aqui. */
.op-t { display: block; font-weight: 650; font-size: .95rem; color: var(--ink) }
.op-d { display: block; color: var(--ink-soft); font-size: .88rem; margin-top: .35rem }

/* =====================================================================
 * MOVIMENTO AMBIENTE E DISPARADO. 2026-07-28.
 *
 * REGRA DE CUSTO: anima-se `transform` e `opacity`, que o compositor resolve
 * sem tocar no layout. Nada de `width`, `height`, `top`, `left`, `box-shadow`
 * nem `filter`. A unica excepcao esta nomeada no resumo e no ponto 5 abaixo.
 *
 * REGRA DE LEITURA: nada se mexe dentro da coluna de leitura. Titulos,
 * paragrafos, tabelas e listas ficam absolutamente quietos. O que se mexe e
 * decoracao ou peca de produto, e nunca texto que alguem esta a ler.
 *
 * REGRA DE CUSTO OPERACIONAL: tudo para quando a peca sai do ecra e quando o
 * separador fica escondido, por `.parado` que o `site.js` poe e tira. Uma
 * pagina aberta em segundo plano nao gasta bateria de ninguem.
 * ===================================================================== */

.parado, .parado * { animation-play-state: paused !important }

/* AS TRES CONTINUAS, e sao tres e nao sete desde 2026-07-28.
   1. a textura do heroi deriva. So translate, e a camada e maior do que o
      contentor para a deriva nunca descobrir uma beira. (no index.html) */
@keyframes deriva { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-22px, -22px, 0) } }
/* 2. os cartoes flutuam 3px, com ciclos diferentes para nunca subirem juntos */
@keyframes boia { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
/* 3. um halo pulsa por tras da janela */
@keyframes halo { 0%, 100% { transform: scale(.94); opacity: .35 } 50% { transform: scale(1.06); opacity: .8 } }

/* AS DUAS QUE DEIXARAM DE SER CONTINUAS e passaram a correr no hover. Os
   fotogramas ficam iguais: o que mudou foi quem as dispara e quantas vezes. */
@keyframes desce { from { transform: translateY(-14px) } to { transform: translateY(40px) } }
@keyframes atravessa { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* `respira` e `pisca` foram REMOVIDAS e nao convertidas: as duas viviam dentro da
   coluna de leitura, e ali a regra nova nao admite ciclo nem reaccao. */

/* AS TRES QUE FICAM SAO ESTAS DUAS E A `deriva` DA TEXTURA, no `index.html`.
   Eram sete. As outras quatro nao foram apagadas por gosto: `respira` e `pisca`
   corriam DENTRO DA COLUNA DE LEITURA, num ponto de estado e num cursor a seguir
   a um paragrafo, e a regra nova nao permite nada em ciclo onde alguem esta a
   ler. `atravessa` e `desce` passam a REACCAO e correm no hover, que e a
   direccao inteira desta ronda: responder a quem visita em vez de mexer sozinho. */
.mov [data-amb="boia"] { animation: boia 8s ease-in-out infinite }
.mov [data-amb="boia"]:nth-child(1) { animation-duration: 7s; animation-delay: -2.4s }
.mov [data-amb="boia"]:nth-child(3) { animation-duration: 9s; animation-delay: -5.1s }

/* O ponto do sinalizado FICA QUIETO e mantem a cor. Continua a dizer o que
   dizia, porque o que o marca como sinalizado e o vermelho e nao o movimento. */

/* A JANELA: brilho na borda de cima e halo por tras. Os dois vivem em
   pseudo-elementos posicionados, logo nao empurram nada e nao ha layout shift.
   `overflow: hidden` na janela e `isolation` para o halo nao subir por cima. */
.janela, .ap-barra, .mini { position: relative }
.janela::before, .mini::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55; pointer-events: none;
}
/* O brilho atravessa UMA VEZ ao passar o rato, e nao em ciclo. */
.mov .janela:hover::before, .mov .mini:hover::before { animation: atravessa 1.4s var(--curva) 1 }
.halo {
  /* Sem folga HORIZONTAL: `-8%` de um contentor de 360px sao 29px para cada
     lado, e a pagina ganhava barra horizontal no telemovel. A folga vertical
     nao transborda porque nao ha rolamento lateral por cima ou por baixo. */
  position: absolute; inset: -14% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, var(--glow), transparent 68%);
  opacity: .5;
}
.mov .halo { animation: halo 12s ease-in-out infinite }

/* A SETA DE FLUXO passa a reaccao: o traco desce uma vez quando se passa o rato
   pelo passo, em vez de descer para sempre. */
.seta-traco { animation: none }
.mov .passo:hover .seta-traco, .mov .seta:hover .seta-traco { animation: desce 1.2s var(--curva) 1 }

/* ------------------------------------------------ o pedido a ser escrito
 * O CURSOR DEIXA DE PISCAR. Ficava a piscar para sempre no fim de um paragrafo,
 * que e o sitio exacto onde a regra nova nao admite ciclo nenhum: o olho volta
 * la sempre e a linha e para ser lida. Fica como um traco quieto, que continua
 * a dizer que a mensagem esta por terminar. */
.cursor {
  display: inline-block; width: .5ch; margin-left: 1px;
  border-bottom: 2px solid var(--accent); vertical-align: baseline;
}

/* ------------------------------------------------- as sinalizacoes a acender */
@keyframes acende { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }
.mov [data-sin] { animation: acende .3s ease-out both }
.mov [data-sin="1"] { animation-delay: .26s }
.mov [data-sin="2"] { animation-delay: .30s }
.mov [data-sin="3"] { animation-delay: .34s }
.mov [data-sin="4"] { animation-delay: .38s }

@media (prefers-reduced-motion: reduce) {
  .mov [data-amb], .mov .halo, .mov [data-sin],
  .mov .janela::before, .mov .mini::before,
  .mov .janela:hover::before, .mov .mini:hover::before,
  .mov .seta-traco, .mov .passo:hover .seta-traco, .mov .seta:hover .seta-traco,
  .mov .hero-fundo::before { animation: none !important }
  .cursor { display: none }
}

/* =====================================================================
 * DENSIDADE E ILUSTRACAO. 2026-07-28.
 *
 * PORQUE EXISTE. O CEO mediu a producao: a `/` tinha 6 seccoes e 3876
 * caracteres, contra as 9 a 12 seccoes de uma pagina de produto a serio.
 * "As paginas parecem vazias porque estao." Estes componentes existem para
 * a densidade subir SEM virar parede de texto: tudo o que pode ser cartao,
 * lista, tabela ou ilustracao nao fica em prosa.
 *
 * AS ILUSTRACOES SAO SVG EM LINHA, E ISSO E OBRIGACAO E NAO ESCOLHA. Um
 * `.svg` servido de `public/site-assets/` por `<img>` vive noutro documento
 * e **nao ve as variaveis CSS desta pagina**, logo nao seguiria o tema claro
 * e escuro, que e requisito. Em linha, cada forma pinta-se com `currentColor`
 * ou com `var(--token)` e muda de tema sozinha. E ha um beneficio de borla:
 * zero pedidos, nem sequer ao proprio dominio.
 * ===================================================================== */

/* ------------------------------------------------------------ ilustracao */
.ilu {
  margin-top: 1.6rem;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); padding: 1.1rem;
  overflow: hidden;
}
/* `width: 100%` e `height: auto` com o `viewBox` a mandar: a ilustracao
   encolhe ate aos 360px sem transbordar e sem px fixos em lado nenhum. */
.ilu svg { width: 100%; height: auto; display: block }
.ilu-nota {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-soft);
  margin-top: .8rem; border-top: 1px solid var(--rule); padding-top: .6rem;
}
/* As pecas da ilustracao, para nao repetir `fill` em cada forma. */
.i-caixa { fill: var(--card-raise); stroke: var(--rule); stroke-width: 1.5 }
.i-linha { stroke: var(--rule); stroke-width: 1.5; fill: none }
.i-texto { fill: var(--ink-soft) }
.i-forte { fill: var(--ink) }
.i-verde { fill: var(--accent) }
.i-verde-l { stroke: var(--accent); stroke-width: 1.5; fill: none }
.i-fundo-v { fill: var(--diff-green-bg) }
.i-vermelho { fill: var(--diff-red) }
.i-fundo-r { fill: var(--diff-red-bg) }
.i-rot { font-family: var(--mono); font-size: 11px; fill: var(--ink-soft) }
.i-rot-f { font-family: var(--mono); font-size: 12px; fill: var(--ink); font-weight: 600 }

/* ------------------------------------------------------------------- FAQ
 * `<details>` a serio e nao JavaScript: abre sem script, funciona com
 * teclado de borla, e o conteudo esta no HTML para quem procura na pagina.
 */
.faq { display: grid; gap: .6rem; margin-top: 1.5rem; max-width: 46rem }
.faq details {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva);
}
.faq details:hover { border-color: var(--accent); box-shadow: var(--sombra-1) }
.faq summary {
  cursor: pointer; list-style: none; padding: .85rem 1rem;
  font-family: var(--sans); font-weight: 650; font-size: .97rem; color: var(--ink);
  display: flex; align-items: flex-start; gap: .7rem;
}
.faq summary::-webkit-details-marker { display: none }
/* O sinal roda 45 graus e vira cruz. Anima `transform`, como manda a regra. */
.faq summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; margin-top: .3em;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/1.5px 100% no-repeat;
  transition: transform var(--t-media) var(--curva);
}
.faq details[open] summary::after { transform: rotate(45deg) }
.faq .resposta { padding: 0 1rem 1rem; color: var(--ink-soft); font-size: .95rem }
.faq .resposta p + p { margin-top: .6rem }

/* --------------------------------------------------- tabela de referencia
 * Para "o que fica registado, campo a campo" e para os subprocessadores.
 * Ao estreitar NAO vira scroll horizontal: o `.tab-rolo` e que rola, e so
 * ele, para a pagina nunca ganhar barra lateral aos 360px.
 */
.tab-rolo { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--rule); border-radius: var(--r-md) }
.tab-ref { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 30rem }
.tab-ref th, .tab-ref td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top }
.tab-ref thead th {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); font-weight: 400;
  background: var(--card-raise);
}
.tab-ref tbody tr:last-child th, .tab-ref tbody tr:last-child td { border-bottom: 0 }
.tab-ref tbody tr { transition: background var(--t-rapida) var(--curva) }
.tab-ref tbody tr:hover { background: var(--card-raise) }
.tab-ref code, .tab-ref .cod { font-family: var(--mono); font-size: .82rem; color: var(--ink) }
.tab-ref .desc { color: var(--ink-soft) }

/* ------------------------------------------------------- fila de fichas
 * Cartoes com rotulo em mono por cima, para listas de factos curtos.
 */
.fichas { display: grid; gap: .8rem; margin-top: 1.5rem; padding: 0; list-style: none }
@media (min-width: 46rem) { .fichas.duas, .fichas.quatro { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 64rem) { .fichas.tres { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 64rem) { .fichas.quatro { grid-template-columns: repeat(4, 1fr) } }
.ficha {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: .95rem 1.05rem; box-shadow: var(--sombra-1);
  transition: transform var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva),
              border-color var(--t-media) var(--curva), background var(--t-media) var(--curva);
}
.ficha:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-2);
  border-color: var(--accent); background: var(--card-raise);
}
.ficha-et {
  font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent); margin: 0;
}
.ficha-t { font-family: var(--sans); font-weight: 650; font-size: .97rem; color: var(--ink); margin-top: .35rem }
.ficha-d { color: var(--ink-soft); font-size: .89rem; margin-top: .3rem }
.ficha.alerta { border-left: 3px solid var(--diff-red) }
.ficha.ok { border-left: 3px solid var(--accent) }

/* =====================================================================
 * ESCOLHA DE TEMA. 2026-07-28.
 *
 * TRES ESTADOS E NAO DOIS. `automatico` e o defeito e **nao guarda nada**:
 * segue o `prefers-color-scheme` do sistema, que e o comportamento que o site
 * sempre teve. `claro` e `escuro` guardam UMA entrada em `localStorage`, e
 * voltar a `automatico` APAGA-A. E por isso que a pagina de cookies pode
 * continuar a dizer a verdade com uma frase so.
 *
 * O GRUPO NASCE `hidden` E E O JAVASCRIPT QUE O MOSTRA. Sem JavaScript nao
 * aparecem botoes nenhuns, e o site comporta-se exactamente como hoje. Botoes
 * a mostra que nao fazem nada seriam pior do que botao nenhum.
 * ===================================================================== */
.tema { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.4rem }
.tema[hidden] { display: none }
.tema-et {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-soft); margin-right: .2rem;
}
.tema-btn {
  font-family: var(--sans); font-size: .84rem; color: var(--ink-soft);
  background: var(--card); cursor: pointer;
  /* A fronteira e `--ink-soft` e nao `--rule`: e um controlo CLICAVEL e o
     criterio 1.4.11 da WCAG pede 3:1 para a fronteira de um componente. O
     `--rule` esta a 1.28:1 em escuro e 1.21:1 em claro. */
  border: 1px solid var(--ink-soft); border-radius: var(--r-md);
  padding: .35rem .8rem;
  transition: background var(--t-media) var(--curva), color var(--t-media) var(--curva),
              border-color var(--t-media) var(--curva), transform var(--t-rapida) var(--curva);
}
.tema-btn:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px) }
.tema-btn:active { transform: translateY(0); transition-duration: 60ms }
/* O ESTADO ACTIVO E `aria-pressed` E NAO UMA CLASSE, de proposito: assim a
   escolha e anunciada por um leitor de ecra e nao so pintada. */
.tema-btn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.tema-btn[aria-pressed="true"]:hover { background: var(--accent-deep); border-color: var(--accent-deep) }
@media (prefers-reduced-motion: reduce) {
  .tema-btn:hover, .tema-btn:active { transform: none !important }
}

/* ---------------------------------------------------- paginas legais */
.legal main { padding-block: clamp(2.5rem, 6vw, 4rem) }
.legal .wrap { max-width: 46rem }
.legal h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin: .8rem 0 1rem }
.legal h2 { font-size: 1.3rem; margin: 2.4rem 0 .7rem }
.legal h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem }
.legal p { margin: 0 0 1rem }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem }
.legal li { margin-bottom: .5rem }
.legal .dl-campos { display: grid; gap: .1rem; margin: 0 0 1.4rem }
.legal .dl-campos > div {
  display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) { .legal .dl-campos > div { grid-template-columns: 12rem 1fr; gap: 1rem } }
.legal .dl-campos dt { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft) }
.legal .dl-campos dd { margin: 0; color: var(--ink) }
.legal .aviso {
  border: 1px solid var(--accent); background: var(--diff-green-bg);
  border-radius: var(--r-md); padding: 1rem 1.1rem; margin: 1.4rem 0;
}
.legal .aviso p:last-child { margin-bottom: 0 }

/* =====================================================================
 * LINGUAGEM DOS GRAFICOS. 2026-07-28.
 *
 * A peca "casos por tipo de documento" da /agente foi aprovada como
 * referencia: barra horizontal proporcional, rotulo em mono, numero
 * alinhado a direita, eixo em baixo e legenda por baixo dele. Estas
 * classes existem para as outras pecas falarem a MESMA lingua em vez de
 * cada uma inventar a sua.
 *
 * UMA CORRECCAO A REFERENCIA, e e medida e nao gosto: o rotulo dentro da
 * barra estava em `--ink` sobre `--accent` a 85% de opacidade, o que da
 * **3.52:1 no claro e 2.88:1 no escuro**, abaixo dos 4.5:1 que texto
 * pequeno exige. A barra cheia passa a opaca e o rotulo de dentro passa a
 * `--accent-ink`, que e o token feito para assentar em verde: **6.50:1 e
 * 6.40:1**. A linguagem nao muda, so o par de cores do rotulo.
 * ===================================================================== */
.i-barra { fill: var(--accent) }                 /* caminho principal, cheio */
.i-barra-f { fill: var(--accent); opacity: .3 }  /* secundario, a esbater */
.i-barra-r { fill: var(--diff-red); opacity: .55 }
.i-rot-b { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--accent-ink) }
.i-eixo { stroke: var(--rule); stroke-width: 1.5; fill: none }

/* DOIS PESOS DE TRACO E MAIS NENHUM. Fino para estrutura, grosso para o
   caminho principal. Era isto que faltava aos diagramas: tinham tres e
   quatro espessuras e nenhuma queria dizer nada. */
.i-fino { stroke: var(--rule); stroke-width: 1.5; fill: none }
.i-grosso { stroke: var(--accent); stroke-width: 2.5; fill: none }
/* A CAIXA QUE NEGA. Contorno vermelho e rotulo do que NAO acontece, em vez
   de uma cruz desenhada por cima: uma cruz tapa a caixa e obriga a ler por
   baixo dela. */
.i-nega { fill: var(--diff-red-bg); stroke: var(--diff-red); stroke-width: 1.5 }
.i-rot-n { font-family: var(--mono); font-size: 11px; fill: var(--diff-red) }

/* ---------------------------------------------- rotulos dos diagramas
 * MAIORES DO QUE OS DOS GRAFICOS, e por conta: um `viewBox` de 640 dentro de
 * uma coluna de 360px escala a 0,56, e um rotulo de 11px chega ao ecra com
 * 6px. Os diagramas passam a `viewBox` de 480 com rotulo de 14px, o que da
 * cerca de 10px reais aos 360px. E a razao de os rotulos serem CURTOS: duas
 * ou tres palavras, e o resto do texto vive no HTML por baixo, onde reflui.
 */
.i-rot-d { font-family: var(--mono); font-size: 14px; fill: var(--ink-soft) }
.i-rot-dp { font-family: var(--mono); font-size: 14px; font-weight: 600; fill: var(--ink) }
.i-rot-db { font-family: var(--mono); font-size: 14px; font-weight: 600; fill: var(--accent-ink) }
.i-legenda { font-family: var(--mono); font-size: 12px; fill: var(--ink-soft) }

/* =====================================================================
 * LARGURAS PROPRIAS. 2026-07-29.
 *
 * MEDIDO NA PRODUCAO: o rodape vivia no mesmo `.wrap` de 68rem do texto, e
 * num ecra de 1920 as quatro colunas de ligacoes ficavam espremidas numa
 * coluna de leitura, com 400px de vazio de cada lado.
 *
 * A RAZAO DE SEREM DUAS MEDIDAS E NAO UMA: 68rem existe porque **uma linha
 * de texto longa cansa**, e essa razao aplica-se a prosa. O rodape nao e
 * prosa, e NAVEGACAO: uma grelha de ligacoes curtas nao tem linha nenhuma
 * para cansar, e apertar-lha so junta o que devia estar distribuido.
 * ===================================================================== */
.site-footer .wrap { max-width: 85rem }
/* `space-between` em vez de encostadas: as colunas distribuem-se pela
   largura em vez de se amontoarem a esquerda com um vazio a direita. */
@media (min-width: 64rem) {
  .site-footer .foot-top { flex-wrap: nowrap; gap: 3rem 4rem }
  .site-footer .foot-brand { flex: 0 1 26rem }
  .site-footer .foot-cols { flex: 1 1 auto; justify-content: space-between; gap: 2rem 3rem }
}
/* Abaixo disso empilham como sempre empilharam: o `flex-wrap` da base trata
   disso e aqui nao se lhe toca. */

/* ------------------------------------------------- paginas de consulta
 * As legais passam da coluna estreita de 46rem para a MESMA medida das
 * paginas de produto. A prosa ganha um limite proprio para as linhas nao
 * ficarem longas de mais, e o indice, as tabelas e os blocos largos usam a
 * largura toda.
 */
.legal .wrap { max-width: 68rem }
.legal main > .wrap > p,
.legal main > .wrap > ul,
.legal main > .wrap > ol { max-width: 54rem }
.legal .lead { max-width: 54rem }

/* O indice: e um documento de consulta e ninguem o le do principio ao fim. */
.indice {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--card); padding: 1.1rem 1.3rem; margin: 1.6rem 0 2.4rem;
  max-width: none;
}
.indice-h {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-soft); margin: 0 0 .8rem;
}
.indice ol {
  list-style: none; padding: 0; margin: 0; max-width: none;
  display: grid; gap: .5rem .5rem; counter-reset: ind;
}
@media (min-width: 46rem) { .indice ol { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 68rem) { .indice ol { grid-template-columns: repeat(3, 1fr) } }
.indice li { counter-increment: ind; margin: 0 }
.indice a {
  display: block; color: var(--ink); font-size: .93rem;
  padding: .3rem 0; border-bottom: 1px solid transparent;
  transition: color var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva);
}
.indice a::before {
  content: counter(ind) ". "; font-family: var(--mono); font-size: .8rem; color: var(--accent);
}
.indice a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none }

.legal .actualizado {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft); margin: 0;
}
/* As seccoes numeradas, para se poder citar "seccao 4" num email. */
.legal main > .wrap > h2 { counter-increment: sec; scroll-margin-top: 5rem }
.legal main > .wrap { counter-reset: sec }
.legal main > .wrap > h2::before {
  content: counter(sec) ". "; color: var(--accent); font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * BOTAO DE TEMA NO CABECALHO. 2026-07-29.
 *
 * UM BOTAO E DOIS ESTADOS VISIVEIS. O icone mostra PARA ONDE SE VAI e nao
 * onde se esta: sol quando o tema activo e escuro, meia lua quando e claro.
 *
 * O TERCEIRO ESTADO NAO DESAPARECEU, MUDOU DE SITIO. Sem preferencia
 * guardada o site segue o sistema e **nao escreve nada**, e so o clique e
 * que passa a guardar. Voltar ao automatico, que apaga a entrada, vive na
 * `legal-cookies.html`, que e a pagina que tem de dizer a verdade sobre o
 * que fica guardado.
 * ===================================================================== */
.tema-toggle {
  /* 40px de alvo tactil com um icone de 18px: o `padding` e que faz o alvo,
     e nao o desenho. Um icone pequeno com area pequena falha no telemovel. */
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-soft); border-radius: var(--r-md);
  transition: color var(--t-rapida) var(--curva), background var(--t-rapida) var(--curva);
}
.tema-toggle[hidden] { display: none }
/* So aparece com JavaScript: e o script que tira o `hidden` e poe esta classe. */
.mostra-tema .tema-toggle { display: inline-flex }
.tema-toggle:hover { color: var(--ink); background: var(--card-raise) }
/* O TAMANHO AQUI, A VISIBILIDADE MAIS ABAIXO. Esta regra NAO pode declarar
   `display`, e foi ai que esteve o defeito: `.tema-toggle svg` vale 0-1-1 e a
   regra do navegador para `[hidden]` vale 0-1-0, logo o `display: block` que
   aqui estava GANHAVA ao atributo `hidden` e os dois icones apareciam lado a
   lado. O atributo estava certo e nunca chegou a valer. */
.tema-toggle svg { width: 18px; height: 18px }

/* A VISIBILIDADE SAI DO ESTADO E NAO DO JAVASCRIPT, para nao haver piscar: o
   `data-theme` e posto por um script sincrono no `<head>`, antes da primeira
   pintura, e estas regras resolvem-se com ele. Sem preferencia guardada nao ha
   `data-theme` nenhum, e entao quem decide e o `prefers-color-scheme`.
   O icone mostra PARA ONDE SE VAI: escuro activo mostra sol, claro mostra lua. */
/* OS QUATRO ESTADOS ESTAO TODOS ESCRITOS, e nenhum depende de um defeito solto.
   Havia aqui um `[data-icone="lua"] { display: block }` sem prefixo a servir de
   caso por omissao, e o caso "sem preferencia num sistema claro" ficava a
   depender de ordem de origem entre selectores da mesma especificidade. Escrito
   assim, cada estado diz o que mostra e nao ha nada a resolver por desempate. */
.tema-toggle [data-icone] { display: none }
:root:not([data-theme]) .tema-toggle [data-icone="lua"] { display: block }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tema-toggle [data-icone="lua"] { display: none }
  :root:not([data-theme]) .tema-toggle [data-icone="sol"] { display: block }
}
:root[data-theme="dark"] .tema-toggle [data-icone="lua"] { display: none }
:root[data-theme="dark"] .tema-toggle [data-icone="sol"] { display: block }
:root[data-theme="light"] .tema-toggle [data-icone="sol"] { display: none }
:root[data-theme="light"] .tema-toggle [data-icone="lua"] { display: block }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* =====================================================================
 * COMPACTO. 2026-07-30. Amostra em controlo.html, por decisao do CEO.
 *
 * A DIRECCAO: o site estava sobredimensionado. Mais compacto, mais
 * sofisticado, mais tech. A referencia e a DISCIPLINA DE ESCALA da
 * documentacao tecnica moderna: caixas pequenas, muito espaco, hierarquia
 * fina. Nenhuma cor, ilustracao ou texto veio de lado nenhum: so a escala.
 *
 * PORQUE VIVE ATRAS DE UMA CLASSE NO <body> E NAO SOLTO NA FOLHA: o metodo
 * e pagina a pagina, com amostra aprovada antes de replicar. Uma alteracao
 * solta neste ficheiro mudava as cinco paginas de uma vez, e a replicacao
 * passa a ser por a classe `compacto` em cada <body> aprovado, sem copiar
 * regra nenhuma.
 *
 * TRES DECISOES DE ESCALA, e a razao de cada uma:
 * 1. TIPOGRAFIA UM DEGRAU ABAIXO. O corpo desce de 1.075rem para 1rem e os
 *    titulos perdem cerca de 20 por cento no tecto do clamp. A hierarquia
 *    mantem-se inteira, so a amplitude encolhe.
 * 2. MONO A 12 OU 13 PIXEIS, NUNCA MENOS. As etiquetas em mono andavam
 *    entre 9.9 e 11.5 pixeis, o que no ecra e ruido e nao etiqueta. Sobem
 *    para .75rem e ficam TODAS do mesmo tamanho: hierarquia fina e isto,
 *    um nivel de etiqueta e nao cinco.
 * 3. RAIOS E MOLDURA PARA BAIXO. Os cantos descem pelos tokens de
 *    geometria, os diagramas ganham largura maxima propria, e o traco
 *    grosso dos diagramas desce de 2.5 para 2.
 * ===================================================================== */

body.compacto {
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  font-size: 1rem;
  line-height: 1.6;
}

/* tipografia, um degrau em cada nivel */
.compacto .page-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem) }
.compacto .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem) }
.compacto .section-h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem) }
.compacto .section-intro { font-size: .98rem }
.compacto .modelo h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem) }
.compacto h3 { font-size: 1.02rem }

/* as etiquetas em mono sobem para os 12 pixeis e ficam num nivel so */
.compacto .etq, .compacto .ficha-et, .compacto .card .tag,
.compacto .tab-ref thead th, .compacto .ilu-nota, .compacto .fluxo span,
.compacto .divider, .compacto .eyebrow, .compacto .pastilha { font-size: .75rem }

/* mais respiro entre seccoes, menos moldura dentro delas */
.compacto .divider {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.compacto .card, .compacto .ficha { padding: .85rem .95rem }
.compacto .passos-op li { padding: .75rem .9rem }

/* diagramas: bloco estreito, caixas pequenas, setas finas */
.compacto .ilu { max-width: 45rem; padding: .9rem }
.compacto .i-grosso { stroke-width: 2 }

/* =====================================================================
 * BLOCO DE CODIGO. 2026-07-30. Gerado por site-assets/gerar_bloco_codigo.py
 * e nunca escrito a mao: os marcadores no HTML delimitam o que e dele.
 *
 * E um editor compacto e nao um ecra: barra fina com tres pontos NEUTROS
 * (a cor vem dos tokens e nao ha vermelho-amarelo-verde de semaforo,
 * porque isso eram tres cores novas), corpo em mono pequeno, realce
 * discreto com as cores que o site ja tem. Texto de codigo e a UNICA
 * frase inteira que o site poe em mono, e e por isso que o componente
 * existe: mono a serio, para codigo a serio.
 * ===================================================================== */
.cod-bloco {
  margin: 1.5rem 0 0;
  max-width: 45rem;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--card); overflow: hidden;
}
.cod-cab {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .9rem; border-bottom: 1px solid var(--rule);
  background: var(--card-raise);
}
.cod-pontos { display: inline-flex; gap: .3rem }
.cod-pontos i {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--rule); display: inline-block;
}
.cod-titulo {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .08em; color: var(--ink-soft);
}
.cod-pre {
  margin: 0; padding: .9rem 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .78rem; line-height: 1.55;
  color: var(--ink-soft);
}
.cod-pre code { font-family: inherit }
.cj-k { color: var(--accent) }
.cj-s { color: var(--ink) }
.cj-n { color: var(--accent-deep) }
.cj-b { color: var(--accent-deep); font-weight: 600 }
.cod-nota {
  font-family: var(--mono); font-size: .75rem; color: var(--ink-soft);
  padding: .55rem .9rem .7rem; border-top: 1px solid var(--rule); margin: 0;
}

/* =====================================================================
 * DIAGRAMAS MAIS FINOS. 2026-07-30, ajuste do CEO sobre a amostra.
 *
 * SO OS DIAGRAMAS, e por isso e que ha `.ilu-diag`. Os graficos de barras
 * vivem no mesmo `.ilu` e a linguagem deles foi aprovada a 2026-07-28,
 * com o rotulo dentro da barra e o eixo em baixo. Nao e disso que se
 * falava, e uma regra que apanhasse `.ilu` inteiro mudava-os por engano.
 *
 * O TAMANHO DO TEXTO DEPENDE DA ESCALA, e isto ja mordeu uma vez. Um
 * `viewBox` de 480 numa coluna de 691px escala a 1.44, logo 14 unidades
 * chegavam ao ecra com 20px, o dobro das etiquetas da pagina. Mas o mesmo
 * `viewBox` numa coluna de 330px escala a 0.69, e 8.5 unidades chegariam
 * com 6px, ilegiveis. **Por isso sao dois valores e nao um**: 8.5 no largo
 * e 14 no estreito, medidos no browser e nao calculados de cabeca.
 * ===================================================================== */
.compacto .ilu-diag .i-caixa, .compacto .ilu-diag .i-nega { stroke-width: 1 }
.compacto .ilu-diag .i-fino, .compacto .ilu-diag .i-linha { stroke-width: 1 }
.compacto .ilu-diag .i-grosso { stroke-width: 1.5 }
.compacto .ilu-diag .i-verde-l { stroke-width: 1 }
/* Cantos pequenos. `rx` e propriedade de geometria e nao so atributo, logo
   sai daqui e nao de dezenas de `rx=` espalhados pelo HTML. */
.compacto .ilu-diag rect { rx: 5px; ry: 5px }

/* O texto dos nos ao tamanho das etiquetas da pagina. */
.compacto .ilu-diag .i-rot-d, .compacto .ilu-diag .i-rot-dp,
.compacto .ilu-diag .i-rot-db, .compacto .ilu-diag .i-rot-n,
.compacto .ilu-diag .i-rot, .compacto .ilu-diag .i-rot-f { font-size: 8.5px }

/* OS ROTULOS SOLTOS VIRAM ETIQUETAS, no estilo das etiquetas de seccao:
   maiusculas, pequenas e espacadas. Deixam de competir com o texto dos nos. */
.compacto .ilu-diag .i-legenda {
  font-size: 7.5px; text-transform: uppercase; letter-spacing: .12em;
}

@media (max-width: 46rem) {
  .compacto .ilu-diag .i-rot-d, .compacto .ilu-diag .i-rot-dp,
  .compacto .ilu-diag .i-rot-db, .compacto .ilu-diag .i-rot-n,
  .compacto .ilu-diag .i-rot, .compacto .ilu-diag .i-rot-f { font-size: 14px }
  .compacto .ilu-diag .i-legenda { font-size: 12px }
}

/* =====================================================================
 * SISTEMA DE JANELAS. 2026-07-30, aprovado pelo CEO com mockups vistos.
 *
 * UMA SO LINGUAGEM PARA O QUE E TECNICO. Antes cada diagrama era uma
 * ilustracao solta numa moldura, e o bloco JSON era outra coisa. Passam
 * a ser a mesma coisa: uma JANELA com barra de titulo, e dentro dela um
 * dos quatro tratamentos (painel lateral, rodape de meta, terminal,
 * linha editorial).
 *
 * A MOLDURA E PARTILHADA COM O `.cod-bloco` E NAO COPIADA. Os
 * selectores estao juntos de proposito: duas molduras com os mesmos
 * valores divergiam na primeira vez que alguem afinasse uma delas, e o
 * bloco JSON e a referencia de que o resto saiu.
 *
 * OS NUMEROS DENTRO DESTAS PECAS SAIEM DO `gerar_janelas.py`, do corpus,
 * com `--verificar`. Nao ha um numero escrito a mao em janela nenhuma.
 * ===================================================================== */
.jan, .cod-bloco {
  margin: 1.5rem 0 0; max-width: 45rem;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--card); overflow: hidden;
}
.jan-cab, .cod-cab {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .9rem; border-bottom: 1px solid var(--rule);
  background: var(--card-raise);
}
.jan-pontos, .cod-pontos { display: inline-flex; gap: .3rem; flex: 0 0 auto }
.jan-pontos i, .cod-pontos i {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--rule); display: inline-block;
}
.jan-titulo, .cod-titulo {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .08em; color: var(--ink-soft);
}
/* O contador vai ao fundo da barra, e e sempre gerado do corpus. */
.jan-cont {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
  color: var(--accent); margin-left: auto; flex: 0 0 auto;
}
.jan-corpo { padding: 1rem }
/* Dentro de uma janela o diagrama nao leva moldura propria: seria caixa
   dentro de caixa, que e o que esta ronda existe para tirar. */
.jan .ilu, .jan .ilu-diag { border: 0; background: none; padding: 0; margin: 0; max-width: none }
/* E O BLOCO DE CODIGO TAMBEM PERDE A MOLDURA E A BARRA quando vive dentro de uma
   janela. Ficavam DUAS barras de titulo encaixadas, uma a dizer o que a peca e e
   outra a dizer a mesma coisa por outras palavras: caixa dentro de caixa, que e
   exactamente o que este redesign existe para tirar. O titulo de fora passa a
   dizer as duas coisas. */
.jan .cod-bloco { border: 0; border-radius: 0; background: none; margin: 0; max-width: none }
.jan .cod-cab { display: none }
.jan .cod-pre { padding-inline: 0 }
.jan .cod-nota { padding-inline: 0 }

/* A etiqueta comum a todos os tratamentos. */
.jan-et {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft); margin: 0;
}

/* ---------------------------------------- A) janela mais painel lateral
 * Grelha de duas colunas no largo, empilhada no estreito. O painel leva
 * cartoes com linhas chave-valor: e a ficha tecnica do diagrama, e tira
 * de cima dele o texto que antes flutuava dentro do SVG.
 */
.jan-a { max-width: 62rem }
.jan-a .jan-corpo { display: grid; gap: 1rem; align-items: start }
@media (min-width: 56rem) {
  .jan-a .jan-corpo { grid-template-columns: 1.6fr 1fr; gap: 1.4rem }
}
.jan-painel { display: grid; gap: .7rem; align-content: start }
.jan-cartao {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--card-raise); padding: .7rem .8rem;
}
.jan-kv { margin: .55rem 0 0; display: grid; gap: 0 }
.jan-kv > div {
  display: grid; gap: .1rem; padding: .4rem 0;
  border-top: 1px solid var(--rule);
}
.jan-kv > div:first-child { border-top: 0; padding-top: 0 }
.jan-kv dt {
  font-family: var(--mono); font-size: .7rem; color: var(--ink-soft);
  letter-spacing: .04em;
}
.jan-kv dd { margin: 0; color: var(--ink); font-size: .88rem; line-height: 1.45 }

/* -------------------------------------- B) janela larga mais rodape de meta
 * Tres celulas separadas por filetes. Substitui as legendas que flutuavam
 * dentro do SVG, que competiam com os rotulos dos nos e escalavam com eles.
 */
.jan-b { max-width: 62rem }
.jan-meta { display: grid; border-top: 1px solid var(--rule) }
@media (min-width: 46rem) { .jan-meta { grid-template-columns: repeat(3, 1fr) } }
.jan-meta-c { padding: .7rem .9rem; border-top: 1px solid var(--rule) }
.jan-meta-c:first-child { border-top: 0 }
@media (min-width: 46rem) {
  .jan-meta-c { border-top: 0; border-left: 1px solid var(--rule) }
  .jan-meta-c:first-child { border-left: 0 }
}
.jan-meta-t { color: var(--ink); font-size: .86rem; margin-top: .25rem; line-height: 1.45 }

/* ------------------------------------------------------- D) terminal
 * SO NAS SECCOES DE SEGURANCA. Conta a EXECUCAO de um caso e nao a
 * estrutura de um objecto: linha de comando, arvore, e o veredicto no fim.
 * As cores dizem o que ja diziam no resto do site, coral para o que foi
 * sinalizado e verde para o que espera decisao.
 */
.jan-term {
  padding: .9rem 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .78rem; line-height: 1.7;
  color: var(--ink-soft);
}
.jan-l { margin: 0; white-space: pre }
.jan-p { color: var(--accent) }
.jan-cmd { color: var(--ink) }
.jan-dim { color: var(--ink-soft); opacity: .8 }
.jan-cita { color: var(--ink-soft); font-style: italic }
.jan-mau { color: var(--diff-red) }
.jan-bom { color: var(--accent-deep) }
.jan-rodape {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft);
  padding: .55rem .9rem .65rem; border-top: 1px solid var(--rule); margin: 0;
}

/* --------------------------------------------- E) linha editorial
 * ZERO CAIXAS, e e a condicao de existir: so para percursos de tres ou
 * quatro passos SEM RAMIFICACAO. Um fluxo que se divide nao cabe numa
 * linha, e forcar aqui um que se divida seria mentir sobre o fluxo.
 */
/* Quatro colunas precisam de largura: a 45rem o titulo de cada estacao parte em
   duas linhas e o subtitulo em quatro, e a linha editorial existe para se ler de
   um relance. */
.jan-e { max-width: 62rem }
.jan-linha { padding: 0 }
.jan-est {
  list-style: none; margin: 0; padding: 1.3rem 1rem .2rem;
  display: grid; gap: 1.4rem;
}
@media (min-width: 46rem) {
  /* O NUMERO DE COLUNAS VEM DO HTML, por `--jan-cols`, porque o gerador e que sabe
     quantas estacoes ha. Quatro ficou como defeito por ser o primeiro caso. */
  .jan-est {
    grid-template-columns: repeat(var(--jan-cols, 4), minmax(0, 1fr));
    gap: 0; padding: 1.5rem 1rem 1.1rem;
  }
}
.jan-est li { position: relative; padding-top: 1.6rem }
/* A LINHA E UM FILETE ATRAS DAS ESTACOES e nao uma borda de cada caixa.
   Corre so no largo: empilhado, uma linha horizontal nao liga nada. */
@media (min-width: 46rem) {
  .jan-est li::before {
    content: ""; position: absolute; top: calc(1.6rem + 5px); left: 0; right: 0;
    height: 1px; background: var(--rule);
  }
  .jan-est li:first-child::before { left: 50% }
  .jan-est li:last-child::before { right: 50% }
}
.jan-ponto {
  position: absolute; top: 1.6rem; left: 0; width: 11px; height: 11px;
  border-radius: 999px; border: 1px solid var(--ink-soft); background: var(--paper);
}
@media (min-width: 46rem) { .jan-ponto { left: 50%; transform: translateX(-50%) } }
/* O passo humano e o unico cheio, e o verde diz o que sempre disse. */
.jan-humano .jan-ponto { background: var(--accent); border-color: var(--accent) }
/* A ESTACAO DE ALERTA leva a marca tracejada coral NO PONTO e nao numa caixa: a
   caixa grande de contorno era o vocabulario antigo, e uma caixa que so existe para
   ser marcada e uma caixa a mais. O tracejado diz o que dizia. */
.jan-alerta .jan-ponto { border-color: var(--diff-red); border-style: dashed; background: none }
.jan-alerta .jan-et { color: var(--diff-red) }
/* O PORTAO NAO E UMA ESTACAO: e o que esta entre duas. Sem numero, sem ponto, e com
   o traco duplo que ja existia no site a marcar a barreira. */
.jan-portao { }
.jan-portao .jan-ponto { display: none }
.jan-portao .jan-est-t { font-family: var(--mono); font-size: .72rem; color: var(--accent) }
.jan-portao::after {
  content: "‖"; position: absolute; top: 1.35rem; left: 50%; transform: translateX(-50%);
  color: var(--accent); font-size: 1rem; line-height: 1;
}
/* As estacoes DEPOIS do portao leem-se como estando do outro lado. */
.jan-alem { opacity: .62 }
.jan-est li > .jan-et { position: absolute; top: 0; left: 0 }
@media (min-width: 46rem) {
  .jan-est li > .jan-et { left: 50%; transform: translateX(-50%); white-space: nowrap }
  .jan-est li { text-align: center; padding-inline: .4rem }
}
.jan-est-t {
  font-family: var(--sans); font-weight: 650; font-size: .95rem;
  color: var(--ink); margin: 1.1rem 0 0;
}
.jan-humano .jan-est-t { color: var(--accent) }
.jan-est-d { color: var(--ink-soft); font-size: .85rem; margin-top: .2rem; line-height: 1.45 }
.jan-linha .jan-meta { margin-top: 1rem }

/* ---------------------------------------- transversal: o que NAO acontece
 * TRACEJADO EM VEZ DE CONTORNO CHEIO. O coral continua a dizer o que dizia,
 * e o tracejado acrescenta o que a cor sozinha nao dizia: que aquele caminho
 * nao se percorre. Uma caixa de contorno cheio parece um passo do fluxo.
 */
.compacto .ilu-diag .i-nega { stroke-dasharray: 4 3 }

/* =====================================================================
 * A TABELA DE ESCALAS DOS DIAGRAMAS. 2026-07-30.
 *
 * UM `viewBox` DE 480 NAO TEM TAMANHO DE TEXTO: tem unidades, que chegam ao
 * ecra multiplicadas pela largura da coluna onde o SVG assenta. Logo o mesmo
 * `font-size` da tamanhos diferentes em sitios diferentes, e isto mordeu tres
 * vezes na mesma tarde, sempre da mesma maneira e sempre por surpresa. Fica a
 * tabela, medida no browser e nao calculada de cabeca:
 *
 *   onde                     largura   escala   unidades   ecra
 *   solto, fora de janela      691px     1.44      8.5      12.2px
 *   janela A, coluna 1.6fr     576px     1.20     10        12.0px
 *   janela B, largura toda     958px     2.00      6        12.0px
 *   estreito, telemovel        330px     0.69     14         9.7px
 *
 * O ALVO SAO OS 12px DAS ETIQUETAS DA PAGINA, em todos os sitios. E a razao de
 * haver quatro valores e nao um: um valor unico ou grita no largo ou desaparece
 * no estreito, e nenhum dos dois e decisao. Sao o mesmo descuido visto de dois
 * lados.
 * ===================================================================== */
@media (min-width: 56rem) {
  .compacto .jan-a .ilu-diag .i-rot-d, .compacto .jan-a .ilu-diag .i-rot-dp,
  .compacto .jan-a .ilu-diag .i-rot-db, .compacto .jan-a .ilu-diag .i-rot-n,
  .compacto .jan-a .ilu-diag .i-rot, .compacto .jan-a .ilu-diag .i-rot-f { font-size: 10px }
  .compacto .jan-a .ilu-diag .i-legenda { font-size: 9px }
}
@media (min-width: 46rem) {
  .compacto .jan-b .ilu-diag .i-rot-d, .compacto .jan-b .ilu-diag .i-rot-dp,
  .compacto .jan-b .ilu-diag .i-rot-db, .compacto .jan-b .ilu-diag .i-rot-n,
  .compacto .jan-b .ilu-diag .i-rot, .compacto .jan-b .ilu-diag .i-rot-f { font-size: 6px }
  .compacto .jan-b .ilu-diag .i-legenda { font-size: 5.5px }
  /* Tracos e cantos tambem escalam, logo tambem afinam por tratamento. */
  .compacto .jan-b .ilu-diag .i-fino, .compacto .jan-b .ilu-diag .i-linha { stroke-width: .7 }
  .compacto .jan-b .ilu-diag .i-grosso { stroke-width: 1.1 }
  .compacto .jan-b .ilu-diag rect { rx: 3.5px; ry: 3.5px }
  .compacto .jan-b .ilu-diag .i-nega { stroke-dasharray: 2.5 2 }
}

/* =====================================================================
 * SEPARADORES DOS CASOS DE SEGURANCA. 2026-07-30.
 *
 * SEM JAVASCRIPT MOSTRA UM CASO COMPLETO, e nao seis empilhados: os cinco
 * seguintes nascem com `hidden` no HTML gerado. O JavaScript so troca qual
 * esta escondido. As abas nascem escondidas pela mesma razao dos botoes de
 * tema: abas que nao trocam nada seriam pior do que aba nenhuma.
 * ===================================================================== */
.jan-abas { display: none; gap: .3rem; padding: .55rem .9rem; border-bottom: 1px solid var(--rule) }
.mostra-abas .jan-abas { display: flex; flex-wrap: wrap }
.jan-aba {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-soft); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: .18rem .5rem;
  transition: color var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva),
              background var(--t-rapida) var(--curva);
}
.jan-aba:hover { color: var(--ink); border-color: var(--accent) }
.jan-aba[aria-selected="true"] {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.jan-caso[hidden] { display: none }

/* =====================================================================
 * O TERMINAL A CORRER, EM CSS E SEM UM BYTE DE JAVASCRIPT. 2026-07-30.
 *
 * PORQUE AQUI E NAO NO `site.js`: o orcamento de JavaScript sao 12 KB sem
 * minificar e o site ja tinha 11.2. As linhas em sequencia custavam 750
 * bytes em JavaScript e custam ZERO aqui, porque uma animacao com atraso
 * por posicao e exactamente o que o `nth-child` faz.
 *
 * E CORRE OUTRA VEZ AO TROCAR DE SEPARADOR de borla: um elemento que sai
 * de `display: none` recomeca as animacoes, e o `hidden` faz isso. O
 * JavaScript das abas nao sabe que isto existe, e nao precisa.
 *
 * `prefers-reduced-motion` desliga-a, como todas as outras.
 * ===================================================================== */
.mov .jan-caso .jan-l { animation: lin .16s ease-out both }
.mov .jan-caso .jan-l:nth-child(1) { animation-delay: 0s }
.mov .jan-caso .jan-l:nth-child(2) { animation-delay: .09s }
.mov .jan-caso .jan-l:nth-child(3) { animation-delay: .18s }
.mov .jan-caso .jan-l:nth-child(4) { animation-delay: .27s }
.mov .jan-caso .jan-l:nth-child(5) { animation-delay: .36s }
.mov .jan-caso .jan-l:nth-child(6) { animation-delay: .45s }
.mov .jan-caso .jan-l:nth-child(7) { animation-delay: .54s }
.mov .jan-caso .jan-l:nth-child(8) { animation-delay: .63s }
.mov .jan-caso .jan-l:nth-child(n+9) { animation-delay: .72s }

@media (prefers-reduced-motion: reduce) {
  .mov .jan-caso .jan-l { animation: none !important }
}

/* O DIAGRAMA REACTIVO FOI CORTADO, e fica dito aqui em vez de ficar por
   dizer: era o terceiro efeito pedido a 2026-07-30, custava cerca de 500
   bytes de JavaScript, e o orcamento nao os tinha. A regra do CEO no
   proprio pedido manda cortar o efeito e nao o orcamento. Volta no dia em
   que houver espaco, e o espaco aparece minificando ou dividindo o
   `site.js` por pagina, que sao as duas decisoes que ninguem tomou ainda. */

/* =====================================================================
 * O ACORDEAO DENTRO DE UMA JANELA. 2026-07-30.
 *
 * A janela das perguntas mostrava um acordeao DESENHADO em SVG, com
 * pilulas e tracinhos cinzentos a imitar texto, e as perguntas a serio
 * viviam logo por baixo, em `<details>`. Duas pecas a dizer a mesma
 * coisa, e a de cima era um wireframe. **A janela passa a SER o
 * acordeao**: o mesmo HTML, dentro da moldura, com o rodape de meta.
 *
 * Dentro da janela cada pergunta perde a caixa e fica um filete: caixas
 * dentro de caixa era o que esta ronda existe para tirar.
 * ===================================================================== */
.jan .faq { display: block; margin: 0; max-width: none }
.jan .faq details {
  background: none; border: 0; border-top: 1px solid var(--rule);
  border-radius: 0; box-shadow: none;
}
.jan .faq details:first-child { border-top: 0 }
.jan .faq details:hover { border-color: var(--rule); box-shadow: none }
.jan .faq summary { padding: .75rem .2rem }
.jan .faq .resposta { padding: 0 .2rem .9rem }

/* A VARIANTE SEM SEQUENCIA. As seis tentativas de injeccao sao variantes do mesmo
   momento e nao um percurso: sem fio, sem pontos, e com um filete a separar. */
.jan-lista .jan-ponto { display: none }
.jan-lista .jan-est li { padding-top: 0; padding-block: .9rem; border-top: 1px solid var(--rule) }
.jan-lista .jan-est li > .jan-et { position: static; transform: none }
@media (min-width: 46rem) {
  .jan-lista .jan-est { gap: 0 1.6rem; padding-block: .4rem 1rem }
  .jan-lista .jan-est li::before { display: none }
  .jan-lista .jan-est li { text-align: left }
  .jan-lista .jan-est li > .jan-et { left: auto; transform: none; white-space: normal }
}
.jan-lista .jan-est-t { font-size: .92rem; margin-top: .3rem }

/* =====================================================================
 * A ESCALA DE ESPACO ENTRE SECCOES. 2026-07-30.
 *
 * O CEO mediu a olho o que os numeros confirmam: entre seccoes havia 88px
 * em cima e 88px em baixo, ou seja **176px de vazio** entre o fim de uma
 * e o inicio da outra, num ecra de 1080. Uma seccao inteira cabia la.
 *
 * UMA VARIAVEL E NAO CEM VALORES AVULSOS. Todos os intervalos entre
 * seccoes passam a sair de `--seccao`, e quem quiser afinar o site
 * inteiro afina aqui. Os valores de dentro das janelas NAO entram nisto,
 * de proposito: o respiro por dentro estava bem e o vazio era por fora.
 *
 * A REDUCAO E DE UM TERCO, medida e nao estimada: 88px passam a 59px, e
 * o intervalo entre seccoes de 176 para 118.
 * ===================================================================== */
.compacto {
  --seccao: clamp(1.7rem, 4.4vw, 3.5rem);
}
.compacto .divider {
  padding-top: var(--seccao);
  margin-top: var(--seccao);
}
.compacto .page-head { padding-top: calc(var(--seccao) * .9) }
.compacto .tese { margin-top: var(--seccao) }
.compacto .modelo { margin-top: var(--seccao) }
.compacto .strip { margin-top: calc(var(--seccao) * .55) }
.compacto .site-footer { margin-top: calc(var(--seccao) * 1.2) }
.compacto section { scroll-margin-top: 4rem }