/* camaradescartavel.pt — folha única do site público.
   Direcção: película, não SaaS. Papel creme, tinta quente, âmbar de rótulo de rolo,
   vermelho de disparador. Serifa impressa para ler, monospaçada para o que é «máquina»
   (contadores, preços, etiquetas) — é a voz do corpo da câmara.

   🔴 Zero pedidos externos, de propósito: nenhuma fonte de CDN, nenhum script de terceiros.
   Um site que vende conformidade com o RGPD não entrega o IP de quem o visita a ninguém.
   Se um dia houver tipos de letra próprios, entram por @font-face com ficheiros em /site/fonts/. */

:root {
  --tinta: #16100c;
  --tinta-media: #3a2d23;
  --tinta-fraca: #6b5a4a;
  --papel: #f3e9d9;
  --papel-alto: #fbf5ea;
  --papel-sombra: #e6d8c2;
  /* 🔴 DOIS ÂMBARES, E A DIFERENÇA NÃO É DE GOSTO — É DE CONTRASTE MEDIDO.
     DECISÃO 44 `[X, 07/10]` trouxe o amarelo de embalagem. Sobre o preto do
     produto dá 10.62:1 e é luz; sobre este creme dá **1.55:1** e é invisível.
     Logo há dois papéis e dois tokens, e confundi-los é o erro que esta nota
     existe para impedir:

       --ambar        CAMPO. Fundos, sombras duras, blocos. NUNCA uma linha fina
                      nem um glifo sobre o creme.
       --ambar-tinta  TINTA. Glifos, sublinhados, arestas de 3px — tudo o que
                      tem de SE VER sobre papel claro. 5.31:1 sobre o creme.

     🔴 O `--ambar-tinta` é exactamente o `--aviso` que o `painel/painel.css` já
     usava. As duas superfícies claras tinham chegado à mesma cor em separado,
     sem nenhuma saber da outra — é a confirmação mais barata que esta escolha
     podia ter. */
  --ambar: #F9B000;
  --ambar-tinta: #8a5200;

  /* 🔴 OS TONS DE CIMA DO ESCURO. Este site tem DOIS chãos — o creme e o
     `--tinta` das secções `.escuro` — e os tons de cima do escuro estavam em
     três valores soltos (`#c6b6a0`, `#a6917a`, `#8a7560`), sem nome, espalhados
     por regras diferentes. Dois passavam e um chumbava, e não havia maneira de
     saber qual sem medir cada um.
     Medido sobre `--tinta` `[F, 08/10]`: 9.52 · 6.24 · **4.31** ❌. O terceiro
     era o do rodapé, em 126 sítios de 18 páginas. */
  --sobre-escuro: #c6b6a0;        /* corpo sobre o escuro — 9.52:1 */
  --sobre-escuro-fraco: #a6917a;  /* secundário sobre o escuro — 6.24:1 */
  --ambar-claro: #f6c54a;
  --vermelho: #c0392b;
  --verde: #2d6a5e;
  --linha: #cdbca3;

  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
            "Hoefler Text", "Times New Roman", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;

  --max: 70rem;
  --raio: 2px;
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

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

/* 🔴 `scroll-padding-top` NÃO É POLIMENTO — É O QUE FAZ O «SALTAR PARA O
   CONTEÚDO» FUNCIONAR. Medido `[F, 08/10]`: com o `.topo` em `position: sticky`
   e sem isto, saltar para `#conteudo` punha o alvo em `top: 0` e **124 pixéis
   do conteúdo ficavam debaixo do cabeçalho**.

   E o alvo não é uma âncora qualquer: `#conteudo` é o destino do link de saltar
   a navegação, que existe exactamente para quem usa teclado ou leitor de ecrã.
   Sem isto, essa pessoa salta a navegação e **aterra debaixo dela** — a função
   de acessibilidade a produzir o problema que foi feita para resolver.

   🔴 O VALOR MUDA COM A LARGURA porque o cabeçalho quebra de linha. Medido em
   cinco larguras: 375 e 480 → **124px** · 640 → **83px** · 900 e 1200 → **67px**.
   Um valor fixo serviria mal em toda a parte.

   🔴 E escolhe-se SEMPRE pelo lado seguro: sobrar espaço é um vazio cosmético;
   faltar esconde conteúdo. Por isso cada escalão leva o maior valor medido na
   sua faixa, mais 8px de folga, e a base é a mais generosa. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 132px;              /* 124 medidos + 8 */
}
@media (min-width: 38rem) { html { scroll-padding-top: 91px; } }   /* 83 + 8 */
@media (min-width: 54rem) { html { scroll-padding-top: 75px; } }   /* 67 + 8 */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serifa);
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* Grão de película por cima de tudo, muito baixo. Não intercepta cliques. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grao);
  opacity: 0.045;
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: multiply;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--ambar-tinta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--vermelho); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--vermelho); outline-offset: 3px;
}

/* ---------- tipografia ---------- */

h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }

p { margin: 0 0 1.1em; max-width: 36em; }
.chapeu {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 1.4em;
}
.chapeu::before { content: "▚ "; color: var(--ambar-tinta); }
.conduz { font-size: 1.3em; line-height: 1.45; color: var(--tinta-media); max-width: 30em; }
.mono { font-family: var(--mono); }
.pequeno { font-size: 0.875rem; line-height: 1.5; color: var(--tinta-fraca); }
strong { font-weight: 700; }

/* Marcador visível para o que ainda não está confirmado.
   Existe para não ir ao ar por distracção: vê-se de longe. */
.a-confirmar {
  font-family: var(--mono);
  font-size: 0.8em;
  background: repeating-linear-gradient(45deg, #ffe9a8, #ffe9a8 6px, #ffd96b 6px, #ffd96b 12px);
  color: #4a3400;
  padding: 0.1em 0.45em;
  border: 1px dashed #a9801a;
}

/* ---------- estrutura ---------- */

.envolve { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.estreito { max-width: 46rem; }
section { padding-block: clamp(3rem, 7vw, 6rem); }

/* Fita de película: a tira de perfurações que separa zonas. */
.fita {
  height: 26px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 10px,
      var(--papel) 10px 22px,
      transparent 22px 32px),
    var(--tinta);
  background-clip: content-box, padding-box;
  padding-block: 7px;
  border-block: 1px solid var(--tinta);
}
.fita--clara {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 10px,
      var(--tinta) 10px 22px,
      transparent 22px 32px),
    var(--papel);
  border-color: var(--linha);
}

.escuro { background: var(--tinta); color: var(--papel-alto); }
.escuro .conduz { color: #d9c9b3; }
.escuro .chapeu { color: var(--sobre-escuro-fraco); }
.escuro .pequeno { color: var(--sobre-escuro-fraco); }
.escuro a { text-decoration-color: var(--ambar-claro); }

/* ---------- cabeçalho ---------- */

.topo {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linha);
}
.topo__linha { display: flex; align-items: center; gap: 1.25rem; min-height: 4.1rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.marca svg { width: 42px; color: var(--tinta); }
.marca__texto { font-family: var(--mono); font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; }
.marca__texto b { display: block; font-weight: 700; letter-spacing: 0.02em; }
.marca__texto span { color: var(--tinta-fraca); font-size: 0.72rem; letter-spacing: 0.14em; }

.nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.4rem); flex-wrap: wrap; }
.nav a {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding-block: 0.3rem; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--ambar-tinta); }
.nav a[aria-current="page"] { border-bottom-color: var(--vermelho); }
.nav__idioma {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  border: 1px solid var(--linha); padding: 0.3rem 0.55rem; text-decoration: none;
}
.nav__idioma:hover { background: var(--papel-alto); border-color: var(--tinta); }

/* ---------- botões ---------- */

.botao {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.95rem 1.5rem; border: 2px solid var(--tinta); background: var(--tinta); color: var(--papel-alto);
  text-decoration: none; cursor: pointer; border-radius: var(--raio);
  box-shadow: 4px 4px 0 var(--ambar);
  transition: transform 0.12s, box-shadow 0.12s;
}
.botao:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ambar); }
.botao:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ambar); }
.botao--vazio { background: transparent; color: var(--tinta); box-shadow: 4px 4px 0 var(--papel-sombra); }
.escuro .botao { background: var(--ambar); border-color: var(--ambar); color: #1a1206; box-shadow: 4px 4px 0 rgba(255,255,255,0.18); }
.escuro .botao--vazio { background: transparent; color: var(--papel-alto); border-color: var(--papel-alto); box-shadow: 4px 4px 0 rgba(255,255,255,0.1); }
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } .botao:hover { transform: none; } }

.botoes { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-block: 1.8rem; }

/* ---------- herói ---------- */

.heroi { position: relative; overflow: hidden; }
.heroi__grelha { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60rem) { .heroi__grelha { grid-template-columns: 1.05fr 0.95fr; } }
.heroi h1 em { font-style: normal; color: var(--ambar-claro); }

/* Pilha de provas: três «fotos» sobrepostas, como as que saem do envelope do laboratório. */
.pilha { position: relative; padding-block: 1rem; }
.pilha figure { margin: 0; }
.prova {
  background: var(--papel-alto);
  padding: 10px 10px 42px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.12);
}
.prova img { width: 100%; }
.prova figcaption {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-fraca); padding-top: 10px;
}
.pilha .prova:nth-child(1) { transform: rotate(-3.2deg); }
.pilha .prova:nth-child(2) { transform: rotate(2.4deg) translate(8%, -14%); position: relative; z-index: 2; }
.pilha .prova:nth-child(3) { transform: rotate(-1deg) translate(-4%, -22%); position: relative; z-index: 1; }

/* ---------- blocos de conteúdo ---------- */

.cartoes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.6rem;
  box-shadow: 3px 3px 0 var(--papel-sombra);
}
.escuro .cartao { background: #1f1711; border-color: #3a2d23; box-shadow: 3px 3px 0 #0e0a07; }
.cartao h3 { margin-bottom: 0.4rem; }
.cartao p:last-child { margin-bottom: 0; }
/* 🔴 ERA `--vermelho`, E ERA O VERMELHO DO CHÃO ERRADO. O `--vermelho` deste
   ficheiro (`#c0392b`) é a tinta de chão CLARO — dá 4.52:1 sobre o creme e só
   **3.25:1** sobre este cartão escuro. E o vermelho de chão escuro (`#D8402F`)
   também não salva: 3.95:1. A 12px, nenhum vermelho é texto legível aqui.
   Passa a `--ambar` (9.45:1), e isso não é só contraste — é a regra do produto:
   **`--mono` é para quantidades, e a quantidade acesa é âmbar.** É o mesmo
   tratamento que o `.cartao__nr` do cliente leva para o número de fotograma. */
.cartao__numero {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ambar);
  display: block; margin-bottom: 0.7rem;
}

/* Passos numerados, com a tira de perfurações à esquerda. */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.passos li {
  counter-increment: p;
  position: relative;
  padding: 0 0 1.8rem 4.2rem;
  border-left: 2px solid var(--linha);
  margin-left: 1rem;
}
.passos li:last-child { border-left-color: transparent; padding-bottom: 0; }
.passos li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: -1.45rem; top: 0;
  width: 2.7rem; height: 2.7rem; display: grid; place-items: center;
  background: var(--tinta); color: var(--ambar-claro);
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em;
  border-radius: 50%;
}
.passos h3 { margin-bottom: 0.3rem; }
.passos p:last-child { margin-bottom: 0; }

/* Factos: o que se pode afirmar, em caixa de rótulo. */
.factos { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border: 1px solid var(--linha); background: var(--papel-alto); }
.escuro .factos { border-color: #3a2d23; background: #1f1711; }
.facto { padding: 1.4rem; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.escuro .facto { border-color: #3a2d23; }
.facto b { display: block; font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; color: var(--vermelho); line-height: 1; margin-bottom: 0.5rem; }
.escuro .facto b { color: var(--ambar-claro); }
.facto span { font-size: 0.9rem; color: var(--tinta-media); }
.escuro .facto span { color: #c6b6a0; }

/* ---------- preços ---------- */

.escaloes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.escalao {
  background: var(--papel-alto); border: 1px solid var(--tinta); border-radius: var(--raio);
  padding: 1.7rem; display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 4px 4px 0 var(--papel-sombra);
}
.escalao--destaque { border-width: 3px; box-shadow: 6px 6px 0 var(--ambar); position: relative; }
.escalao--destaque::before {
  content: attr(data-selo);
  position: absolute; top: -0.85rem; left: 1.4rem;
  background: var(--vermelho); color: #fff;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}
.escalao__nome { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-fraca); margin: 0; }
.escalao__preco { font-family: var(--mono); font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.escalao__preco small { font-family: var(--serifa); font-size: 0.42em; letter-spacing: 0; color: var(--tinta-fraca); display: block; margin-top: 0.4rem; }
.escalao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.96rem; }
.escalao li { padding-left: 1.5rem; position: relative; }
/* 🔴 OS MARCADORES DOS ESCALÕES, E PORQUE É QUE ISTO NÃO ERA ACESSIBILIDADE.
   Medido `[F, 07/10]`: o «▸» de incluído dava 2.12:1 e o «–» de NÃO incluído
   dava **1.54:1**, ambos abaixo do mínimo de 3:1 para indicadores de estado.
   E o texto do item era o nome da funcionalidade — «Logótipo e tipo de letra
   próprios» — logo, lido em diagonal, um item NÃO incluído parecia incluído.
   Alguém podia comprar à espera de uma coisa que não vinha.

   🔴 A correcção primeira não é cor nenhuma: `site/precos.html` passou a DIZER
   «Não inclui …» por palavras `[X, 07/10]`. Cor que falha deixa de esconder a
   verdade quando a verdade está escrita. A cor abaixo é reforço, não é o canal.

   E a assimetria que decidiu a prioridade: se «incluído» for ilegível alguém
   compra menos do que podia; se «NÃO incluído» for ilegível alguém compra a mais
   e descobre depois de pagar. O pior dos dois estava pior. */
.escalao li::before { content: "▸"; position: absolute; left: 0; color: var(--ambar-tinta); }
.escalao li.nao { color: var(--tinta-fraca); }
/* «×» e não «–»: um traço a seguir a um «▸» distingue-se pela forma e pelo
   tamanho, que são os dois canais mais fracos. Um «×» não se confunde com nada,
   e passa a 5.48:1 em vez dos 1.54:1 do `--linha`. */
.escalao li.nao::before { content: "×"; color: var(--tinta-fraca); font-weight: 700; }
.escalao .botao { margin-top: auto; justify-content: center; }

.tabela-envolve { overflow-x: auto; border: 1px solid var(--linha); background: var(--papel-alto); }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 0.94rem; }
caption { text-align: left; padding: 1rem 1.1rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-fraca); border-bottom: 1px solid var(--linha); }
th, td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--papel-sombra); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-fraca); border-bottom: 2px solid var(--tinta); }
tbody th { font-weight: 600; }
td.si { color: var(--verde); font-weight: 700; }
td.nao { color: var(--tinta-fraca); }

/* ---------- avisos ---------- */

.aviso {
  border-left: 5px solid var(--vermelho);
  background: var(--papel-alto);
  padding: 1.2rem 1.4rem;
  margin-block: 1.8rem;
}
.aviso--calmo { border-left-color: var(--verde); }
.aviso--nota { border-left-color: var(--ambar-tinta); }
.aviso p:last-child { margin-bottom: 0; }
.aviso h3 { font-size: 1.1rem; }
.escuro .aviso { background: #1f1711; }

/* ---------- FAQ ---------- */

.perguntas { border-top: 1px solid var(--linha); max-width: 52rem; }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; position: relative;
  font-size: 1.08rem; font-weight: 600; list-style: none;
}
.perguntas summary::-webkit-details-marker { display: none; }
/* 🔴 ESTE É O ÚNICO INDICADOR DE ABERTO/FECHADO: a linha 314 esconde o marcador
   nativo do `<details>`. Estava a 2.12:1 em 18 perguntas do `faq.html`.
   Resolvido pela REGRA DO AMARELO em vez de contra ela: o âmbar deixa de ser o
   glifo e passa a ser o CAMPO atrás dele, com a tinta do site por cima — que é
   o que a Kodak faz na caixa, e dá 10.09:1 em vez de 2.12:1. */
.perguntas summary::after {
  content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem;
  background: var(--ambar); color: var(--tinta);
  font-family: var(--mono); font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.perguntas details[open] summary::after { content: "–"; }
.perguntas .resposta { padding: 0 0 1.3rem; }
.perguntas .resposta p:last-child { margin-bottom: 0; }

/* ---------- estado ---------- */

.estado-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); background: var(--papel-alto); }
.estado-lista li { display: flex; gap: 1rem; align-items: baseline; padding: 1rem 1.2rem; border-bottom: 1px solid var(--papel-sombra); flex-wrap: wrap; }
.estado-lista li:last-child { border-bottom: none; }
.estado-lista b { flex: 1 1 14rem; }
.sinal { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.6rem; border: 1px solid currentColor; }
.sinal--ok { color: var(--verde); }
.sinal--desconhecido { color: var(--tinta-fraca); }

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

.rodape { background: var(--tinta); color: var(--sobre-escuro); padding-block: clamp(2.5rem, 5vw, 4rem); font-size: 0.94rem; }
.rodape a { color: var(--papel-alto); text-decoration-color: #6b5a4a; }
.rodape a:hover { text-decoration-color: var(--ambar-tinta); }
.rodape__grelha { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
/* 🔴 Era `#8a7560` — 4.31:1 sobre o `--tinta`, abaixo de AA, em 126 sítios de 18
   páginas. Passa ao tom que o `.escuro` já usava e que mede 6.24:1. */
.rodape h2 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sobre-escuro-fraco); margin-bottom: 0.9rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rodape__fim { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #3a2d23; font-size: 0.84rem; color: var(--sobre-escuro-fraco); }
.rodape__fim p { max-width: none; }

.salta {
  position: absolute; left: -9999px;
}
.salta:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--tinta); color: var(--papel-alto); padding: 0.7rem 1rem; }