:root,
[data-theme="tokyo-night"] {
  color-scheme: dark;
  --fundo: #1a1b26;
  --fundo-profundo: #13141c;
  --superficie: #1f2230;
  --superficie-2: #24283b;
  --texto: #c0caf5;
  --secundario: #a9b1d6;
  --discreto: #8b93b8;
  --borda: #414868;
  --marca: #9ece6a;
  --tinta: #0c0e10;
  --perigo: #f7768e;
  --aviso: #e0af68;
  /* Rodapé e aviso de cookies: as mesmas cores Tokyo Night da página. */
  --rodape-fundo: var(--fundo-profundo);
  --rodape-acento: var(--marca);
  --rodape-linha: var(--superficie-2);
  --rodape-texto: var(--texto);
  --rodape-texto-2: var(--discreto);
  --rodape-tinta: var(--tinta);
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2?v=0cbbe6286a00") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2?v=18be452724bf") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic-latin.woff2?v=c3d27bf15d3e") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* Uma margem para tudo. O --recuo alinha as faixas a toda a largura com o
   conteúdo do .miolo; 100cqw é a largura do body, sem a barra de scroll. */
:root {
  --margem: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --largura: 72rem;
  --barra-altura: 56px;
}

@media (min-width: 640px) {
  :root {
    --margem: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (min-width: 1024px) {
  :root {
    --margem: 2rem;
  }
}

html {
  background: var(--fundo-profundo);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  --recuo: max(var(--margem), calc((100cqw - var(--largura)) / 2 + var(--margem)));
  container-type: inline-size;
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.sangra {
  width: 100cqw;
  margin-left: calc(50% - 50cqw);
  padding-inline: var(--recuo);
}

::selection {
  background: color-mix(in oklab, var(--marca) 35%, transparent);
  color: var(--texto);
}

.skip {
  position: absolute;
  left: var(--margem);
  top: -4rem;
  z-index: 20;
  background: var(--marca);
  color: var(--tinta);
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.skip:focus {
  top: 0.5rem;
}

.barra {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  height: var(--barra-altura);
  padding: env(safe-area-inset-top) var(--recuo) 0;
  background: var(--fundo);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.barra--scrolled {
  background: color-mix(in oklab, var(--fundo) 78%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--borda) 45%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.marca {
  color: var(--texto);
  font-weight: 650;
  letter-spacing: -0.03em;
  text-decoration: none;
  border-radius: 0.25rem;
}

/* Logótipo oficial, nunca reescrito noutra fonte (manual de marca, 04).
   24 px é o mínimo em ecrã. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.marca-logo {
  display: block;
  width: auto;
  height: 24px;
}

.marca-produto {
  padding-left: 0.85rem;
  border-left: 1px solid var(--borda);
  color: var(--marca);
  line-height: 1.2;
}

.miolo {
  max-width: var(--largura);
  margin-inline: auto;
  padding: 0 var(--margem) 6rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--barra-altura) - env(safe-area-inset-top));
  padding-top: 0.5rem;
  padding-bottom: clamp(1.25rem, 4svh, 2.5rem);
}

h1 {
  order: 0;
  width: 100cqw;
  margin: 0 0 0 calc(50% - 50cqw);
  padding-left: var(--recuo);
  /* Escala pela largura e pela altura: um telemóvel deitado não fica só título. */
  font-size: clamp(2.9rem, min(14vw, 24svh), 12.5rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.82;
}

.linha-titulo {
  display: block;
  white-space: nowrap;
  padding-bottom: 0.06em;
}

.linha-titulo--sai {
  margin-left: -0.04em;
}

/* O anel ocupa o espaço que sobra entre o título e o campo. Se sobrar
   pouco, encolhe; se não sobrar nada, sai. */
.hero-anel {
  order: 1;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block: clamp(0.5rem, 3svh, 2rem);
  container: hero-anel / size;
}

.hero-anel .anel {
  width: min(100cqw, 100cqh, 22rem);
  margin-right: max(-1rem, calc(var(--margem) * -1));
  opacity: 0.9;
}

@container hero-anel (max-height: 8.5rem) {
  .hero-anel .anel {
    display: none;
  }
}

@container hero-anel (max-height: 13rem) {
  .hero-anel .anel-legenda {
    display: none;
  }
}

.apoio {
  order: 2;
  max-width: 26rem;
  margin: 0 0 1.25rem;
  color: var(--secundario);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  text-wrap: pretty;
}

.formulario {
  order: 3;
  position: relative;
}

/* Campo e botão numa só peça. Abaixo de 640 px empilham. */
.linha {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 46rem;
  padding: 0.4rem;
  border: 1px solid var(--borda);
  border-radius: 0.85rem;
  background: var(--superficie-2);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.linha:hover {
  border-color: color-mix(in oklab, var(--borda) 60%, var(--discreto));
}

.linha:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--marca) 18%, transparent);
}

input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--texto);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
}

input::placeholder {
  color: var(--discreto);
  opacity: 1;
}

input:focus-visible {
  outline: none;
}

button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 48px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 0.55rem;
  background: var(--marca);
  color: var(--tinta);
  font: 600 1rem/1 "Geist", system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, filter 0.2s ease;
}

@media (hover: hover) {
  button:hover:not(:disabled) {
    filter: brightness(1.08);
  }
}

button:active {
  transform: scale(0.97);
}

button:disabled {
  cursor: progress;
  opacity: 0.7;
}

button:focus-visible,
.skip:focus-visible,
.marca:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

.formulario--a-correr button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--tinta);
  opacity: 0.35;
  transform-origin: left;
  animation: carregar 1.6s ease-in-out infinite;
}

/* ---------- O anel ---------- */

.anel {
  container: anel / inline-size;
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}

.anel-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.anel-marcas line {
  stroke: var(--borda);
  stroke-width: 1;
}

.anel-marcas .marca-longa {
  stroke: var(--discreto);
  stroke-width: 1.4;
}

.anel-trilho {
  fill: none;
  stroke: var(--superficie-2);
  stroke-width: 14;
}

.seg {
  fill: none;
  stroke: var(--borda);
  stroke-width: 14;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 0.9s var(--ease-saida) var(--atraso, 0ms),
    stroke 0.45s ease;
}

.anel--desenhado .seg {
  stroke-dashoffset: 0;
}

.seg--ok {
  stroke: var(--marca);
}

.seg--falta {
  stroke: var(--perigo);
}

/* No resultado, cada segmento responde à linha do header e vice-versa. */
.anel--resultado .seg {
  pointer-events: stroke;
  cursor: default;
  transition:
    stroke-dashoffset 0.9s var(--ease-saida) var(--atraso, 0ms),
    stroke 0.45s ease,
    opacity 0.25s ease,
    stroke-width 0.25s ease;
}

.anel--foco .seg {
  opacity: 0.28;
}

.anel--foco .seg--foco {
  opacity: 1;
  stroke-width: 20;
}

.anel--ocioso .seg {
  stroke: color-mix(in oklab, var(--marca) 30%, var(--superficie-2));
}

.anel-varrimento {
  transform-origin: 120px 120px;
  opacity: 0;
}

/* Em corrida, um radar discreto atrás do anel: uma meia-luz a rodar. */
.anel--a-correr::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in oklab, var(--marca) 22%, transparent) 100%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 72%, transparent 73%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 72%, transparent 73%);
  pointer-events: none;
}

.anel--a-correr .seg {
  stroke: var(--borda);
}

.anel-legenda--serif {
  margin-top: 0.15rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(0.85rem, 5.5cqi, 1.15rem);
  letter-spacing: 0.01em;
  color: var(--discreto);
}

.varrimento-rasto,
.varrimento-ponta {
  fill: none;
  stroke-width: 14;
}

.varrimento-rasto {
  stroke: var(--marca);
  stroke-opacity: 0.18;
}

.varrimento-ponta {
  stroke: var(--marca);
  stroke-linecap: round;
}

.anel--ocioso .anel-varrimento,
.anel--a-correr .anel-varrimento {
  opacity: 1;
}

.anel-centro {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.anel-numero {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  /* Proporcional ao anel: o mesmo componente serve a 88 px e a 380 px. */
  font-size: 19cqi;
  font-weight: 450;
  letter-spacing: -0.06em;
  line-height: 1;
}

.anel-numero--tempo {
  color: var(--marca);
}

.anel-legenda {
  margin-top: 0.35rem;
  color: var(--discreto);
  font-size: clamp(0.72rem, 4.4cqi, 0.95rem);
}

.anel-letra {
  color: var(--marca);
  font-size: 46cqi;
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.8;
}

.anel-pontos {
  margin-top: 0.6rem;
  color: var(--discreto);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(0.8rem, 5cqi, 1rem);
  white-space: nowrap;
}

.anel-pontos .nota-numero {
  color: var(--texto);
}

@container anel (max-width: 9rem) {
  .anel-legenda {
    display: none;
  }

  .anel-numero {
    font-size: 27cqi;
    letter-spacing: -0.08em;
  }
}

.nota--b,
.nota--c {
  color: var(--aviso);
}

.nota--d,
.nota--f {
  color: var(--perigo);
}

/* ---------- Estado: espera, erro, resultado ---------- */

.estado {
  scroll-margin-top: calc(var(--barra-altura) + env(safe-area-inset-top));
  view-transition-name: estado;
}

.estado:not(:empty) {
  width: 100cqw;
  margin-left: calc(50% - 50cqw);
  padding: clamp(2.5rem, 8svh, 6rem) var(--recuo);
  background: var(--fundo-profundo);
  border-top: 1px solid var(--superficie-2);
}

.espera {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.espera .anel {
  width: min(15rem, 42svh, 70vw);
}

.espera-texto {
  min-width: 0;
}

.espera-titulo {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.espera-alvo {
  display: block;
  color: var(--marca);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.5em;
  letter-spacing: -0.03em;
  margin-top: 0.5rem;
}

/* Dois canais: a segurança corre no nosso servidor, o Lighthouse na Google. */
.canais {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.canal {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid var(--superficie-2);
  border-radius: 999px;
  background: color-mix(in oklab, var(--superficie) 70%, transparent);
  font-size: 0.85rem;
  color: var(--secundario);
}

.canal-nome {
  font-weight: 500;
  color: var(--texto);
}

.canal-estado {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--discreto);
}

.canal-ponto {
  position: relative;
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--borda);
}

.canal--a-correr .canal-ponto,
.canal--feito .canal-ponto {
  border-color: var(--marca);
  background: var(--marca);
}

.canal--em-espera .canal-ponto {
  border-color: var(--aviso);
}

.canal--falhou .canal-ponto {
  border-color: var(--perigo);
  background: var(--perigo);
}

.canal--a-correr .canal-ponto::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--marca);
}

/* ---------- A consola ---------- */

.consola {
  position: relative;
  margin-top: 1.25rem;
  min-width: 0;
  max-width: 46rem;
  border: 1px solid var(--superficie-2);
  border-radius: 0.75rem;
  background: var(--tinta);
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}

.consola-cabeca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--superficie-2);
  color: var(--discreto);
  background: color-mix(in oklab, var(--superficie) 55%, var(--tinta));
}

.consola-ponto {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0.6rem color-mix(in oklab, var(--marca) 70%, transparent);
}

.consola--parada .consola-ponto {
  background: var(--borda);
  box-shadow: none;
}

.consola-titulo {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.consola-relogio {
  font-variant-numeric: tabular-nums;
  color: var(--marca);
}

.consola--parada .consola-relogio {
  color: var(--discreto);
}

/* Um feixe a varrer o topo: há algo a correr. Pára quando o registo pára. */
.consola-feixe {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--marca), transparent);
  opacity: 0.9;
}

.consola--parada .consola-feixe {
  display: none;
}

.consola-corpo {
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--borda) transparent;
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 2.5rem), var(--tinta));
}

.consola-linhas {
  margin: 0;
  padding: 0.6rem 0.9rem 0.8rem;
  list-style: none;
}

.consola-linha {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0 0.75rem;
  color: var(--secundario);
}

.consola-tempo {
  color: var(--discreto);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  opacity: 0.8;
}

.consola-texto {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.consola-linha--passo { color: var(--discreto); }
.consola-linha--ok .consola-texto { color: var(--marca); }
.consola-linha--falta .consola-texto { color: var(--perigo); }
.consola-linha--nota .consola-texto {
  color: var(--texto);
  font-weight: 600;
}

.consola-linha--a-escrever .consola-texto::after {
  content: "▍";
  color: var(--marca);
}

/* Depois da espera, o registo fica dobrado junto aos resultados. */
.registo {
  margin-top: 2rem;
}

.registo-resumo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  color: var(--discreto);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.registo-resumo::-webkit-details-marker {
  display: none;
}

.registo-resumo::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
}

.registo[open] .registo-resumo::before {
  transform: rotate(45deg);
}

.registo-resumo:hover,
.registo-resumo:focus-visible {
  color: var(--texto);
}

.registo .consola {
  margin-top: 0.9rem;
}

.espera-apoio,
.aviso-suave {
  max-width: 36rem;
  margin: 1.25rem 0 0;
  color: var(--secundario);
}

.falha {
  max-width: 40rem;
}

.erro,
.ameaca {
  margin: 0 0 1.25rem;
  color: var(--perigo);
  max-width: 18ch;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.ameaca {
  max-width: 40rem;
  margin: 0 0 3rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border-left: 3px solid var(--perigo);
  border-radius: 0 0.75rem 0.75rem 0;
  background: color-mix(in oklab, var(--perigo) 9%, transparent);
  font-size: 1rem;
  letter-spacing: normal;
  line-height: 1.4;
}

.ameaca p {
  margin: 0;
}

.ameaca-titulo {
  color: var(--perigo);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.ameaca .ameaca-apoio {
  margin-top: 0.35rem;
  color: var(--secundario);
}

.ameaca-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.ameaca-tipos li {
  padding: 0.2rem 0.65rem;
  border: 1px solid color-mix(in oklab, var(--perigo) 45%, transparent);
  border-radius: 999px;
  color: var(--perigo);
  font-size: 0.85rem;
}

.resultados {
  display: grid;
  gap: 4rem;
}

/* ---------- Relatório guardado: histórico e link ----------
   Uma faixa fina por cima dos resultados, no vocabulário do resto:
   linhas de 1 px, texto discreto, a mono para o link. */

.relatorio-barra {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 3rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--superficie-2);
}

.relatorio-quando,
.relatorio-historico {
  margin: 0;
  color: var(--secundario);
  font-size: 0.95rem;
}

.relatorio-nova {
  color: var(--marca);
  text-underline-offset: 0.2em;
}

.relatorio-delta {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
}

.relatorio-delta--sobe {
  color: var(--marca);
  background: color-mix(in oklab, var(--marca) 14%, transparent);
}

.relatorio-delta--desce {
  color: var(--perigo);
  background: color-mix(in oklab, var(--perigo) 14%, transparent);
}

.relatorio-partilha {
  display: flex;
  gap: 0.5rem;
  max-width: 40rem;
}

.relatorio-link {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--superficie-2);
  border-radius: 0.6rem;
  background: var(--superficie);
  color: var(--secundario);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  text-overflow: ellipsis;
}

.relatorio-link:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

.relatorio-copiar {
  flex: none;
  width: auto;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  background: transparent;
  color: var(--texto);
  font-size: 0.92rem;
  font-weight: 550;
}

.relatorio-copiar:hover {
  border-color: var(--marca);
  color: var(--marca);
  filter: none;
}

.painel {
  min-width: 0;
}

.painel h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.painel-cabeca {
  display: flex;
  align-items: baseline;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.painel-cabeca h2 {
  margin: 0;
}

.painel-alvo {
  min-width: 0;
  color: var(--discreto);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.painel-alvo::before {
  content: "/ ";
  color: var(--borda);
}

.seguranca-topo {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.seguranca-topo .anel {
  width: min(17rem, 82vw);
}

.nota-numero,
.header-nome,
.header-estado,
.header-valor,
.lh-valor,
.whois dd,
.vital dd,
.redirects,
.peso,
.dias {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.tls {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--borda);
}

.tls--bom {
  border-color: var(--marca);
}

.tls--mau {
  border-color: var(--perigo);
}

.tls-rotulo {
  font-size: 1.25rem;
  font-weight: 550;
  letter-spacing: -0.02em;
}

.tls--mau .tls-rotulo {
  color: var(--perigo);
}

.tls-dias,
.tls-emissor {
  color: var(--secundario);
}

.tls-dias .dias {
  color: var(--texto);
}

/* Pista de 90 dias até o certificado expirar. */
.tls-pista {
  display: block;
  width: min(100%, 14rem);
  height: 4px;
  margin: 0.35rem 0 0.25rem;
  border-radius: 2px;
  background: var(--superficie-2);
  overflow: hidden;
}

.tls-pista-enche {
  display: block;
  height: 100%;
  width: calc(var(--fracao, 0) * 100%);
  border-radius: inherit;
  background: var(--marca);
}

.tls--atencao {
  border-color: var(--aviso);
}

.tls--atencao .tls-pista-enche {
  background: var(--aviso);
}

.tls--atencao .tls-dias .dias {
  color: var(--aviso);
}

.tls--urgente {
  border-color: var(--perigo);
}

.tls--urgente .tls-pista-enche {
  background: var(--perigo);
}

.tls--urgente .tls-dias .dias {
  color: var(--perigo);
}

.headers {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem 4.75rem;
  align-items: center;
  gap: 0 0.75rem;
  padding: 0.2rem 0;
  border-top: 1px solid var(--superficie-2);
  font-size: 0.92rem;
  transition: background-color 0.2s ease;
}

.header-nome,
.header-valor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O nome é um botão: abre o valor do header ou o que a falta custa. */
button.header-nome {
  justify-self: start;
  max-width: 100%;
  width: auto;
  min-height: 44px;
  margin-left: -0.5rem;
  padding: 0 0.5rem;
  border-radius: 0.4rem;
  background: none;
  color: inherit;
  font: inherit;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-align: left;
  transition: color 0.2s ease;
}

button.header-nome::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  color: var(--discreto);
  transition: transform 0.3s var(--ease-saida);
}

.header--aberto button.header-nome::before {
  transform: rotate(45deg);
}

button.header-nome:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: -2px;
}

.header--foco {
  background: color-mix(in oklab, var(--superficie) 70%, transparent);
  box-shadow: 0 0 0 0.5rem color-mix(in oklab, var(--superficie) 70%, transparent);
  border-radius: 0.2rem;
}

.header--foco button.header-nome {
  color: var(--texto);
}

.header--foco.header--presente button.header-nome::before,
.header--foco.header--falta button.header-nome::before {
  color: currentColor;
}

.header-detalhe {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
  padding: 0 0 0.85rem 1.1rem;
}

.header-detalhe[hidden] {
  display: none;
}

.header-explica {
  margin: 0;
  color: var(--secundario);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.9rem;
  text-wrap: pretty;
}

.header-explica--falta {
  color: var(--perigo);
}

.header-valor {
  color: var(--discreto);
}

code.header-valor {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Header que revela o servidor: o valor vai para a linha de baixo,
   em vez de disputar a coluna da barra. */
.header--divulga {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 0.15rem;
  padding: 0.65rem 0;
}

.header--divulga .header-valor {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 0.85em;
}

.header-peso {
  height: 6px;
  border-radius: 3px;
  background: var(--superficie-2);
  overflow: hidden;
}

.header-peso-enche {
  display: block;
  height: 100%;
  width: calc(var(--peso, 0) * 100%);
  border-radius: inherit;
  background: var(--discreto);
}

.header--presente .header-peso-enche {
  background: var(--marca);
}

.header--falta .header-peso-enche {
  background: var(--perigo);
}

.header-estado {
  text-align: right;
  color: var(--discreto);
}

.header--presente .header-estado {
  color: var(--marca);
}

.header--falta .header-estado,
.header--divulga .header-estado {
  color: var(--perigo);
}

/* Cadeia de redirects desenhada como um caminho: um nó por salto, ligados. */
.redirects-bloco {
  margin: 1.75rem 0 0;
}

.redirects-titulo {
  margin: 0 0 0.6rem;
  color: var(--discreto);
  font-size: 0.85rem;
}

.redirects {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--secundario);
}

.redirect {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.3rem 0 0.3rem 1.4rem;
}

.redirect::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  translate: 0 -50%;
  border-radius: 50%;
  border: 1.5px solid var(--aviso);
  background: var(--fundo-profundo);
}

.redirect::after {
  content: "";
  position: absolute;
  left: calc(0.3rem + 0.275rem - 0.5px);
  top: calc(50% + 0.4rem);
  bottom: calc(-50% + 0.4rem);
  width: 1px;
  background: var(--borda);
}

.redirect:last-child::after {
  display: none;
}

.redirect--fim::before {
  border-color: var(--marca);
  background: var(--marca);
}

.redirect--erro::before {
  border-color: var(--perigo);
  background: var(--perigo);
}

.redirect-estado {
  color: var(--aviso);
}

.redirect--erro .redirect-estado {
  color: var(--perigo);
}

.redirect-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redirect--fim .redirect-url {
  color: var(--texto);
}

.whois {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--superficie-2);
  font-size: 0.92rem;
}

.whois dt {
  color: var(--discreto);
}

.whois dd {
  margin: 0;
  color: var(--secundario);
  overflow-wrap: anywhere;
}

.whois-linha {
  display: block;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  color: var(--marca);
  font-size: 0.92rem;
}

.selo::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--marca);
}

/* ---------- Lighthouse ---------- */

.lh-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.lh-estrategia {
  color: var(--discreto);
  font-size: 0.9rem;
}

.painel--a-correr .lh-estrategia {
  color: var(--marca);
}

.lh-grelha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.25rem;
}

.lh-celula {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.lh-svg {
  width: 100%;
  max-width: 9rem;
  overflow: visible;
}

.lh-trilho,
.lh-enche,
.lh-girar {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}

.lh-trilho {
  stroke: var(--superficie-2);
}

.lh-enche {
  stroke-dasharray: var(--valor, 0) 100;
  transition: stroke-dasharray 1.2s var(--ease-saida) var(--atraso, 0ms);
}

.lh-enche--bom { stroke: var(--marca); }
.lh-enche--medio { stroke: var(--aviso); }
.lh-enche--mau { stroke: var(--perigo); }

.lh-girar {
  stroke: var(--marca);
  stroke-opacity: 0.6;
  transform-origin: 60px 60px;
}

.lh-valor {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 9rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  letter-spacing: -0.06em;
}

.lh-nome {
  margin-top: -0.75rem;
  color: var(--secundario);
  font-size: 0.92rem;
}

.lh-indisponivel {
  max-width: 28ch;
  margin: 0 0 2rem;
  color: var(--secundario);
  font-size: 1.15rem;
}

.vitais {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2.25rem 0 0;
  background: var(--superficie-2);
  border: 1px solid var(--superficie-2);
  border-radius: 0.75rem;
  overflow: hidden;
}

.vital {
  min-width: 0;
  padding: 0.85rem clamp(0.6rem, 2.5vw, 1rem);
  background: var(--fundo-profundo);
}

.vital dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--discreto);
  font-size: 0.85rem;
}

.vital dt::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--borda);
}

.vital--bom dt::before { background: var(--marca); }
.vital--medio dt::before { background: var(--aviso); }
.vital--mau dt::before { background: var(--perigo); }

.vital dd {
  margin: 0.2rem 0 0;
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.15rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.painel--indisponivel .lh-grelha {
  opacity: 0.4;
}

/* ---------- O que a nota desconta ---------- */

.passarela {
  padding-top: 18vh;
}

.passarela h2,
.perguntas-titulo,
.pergunta h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.92;
}

.passarela h2 {
  max-width: 10ch;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
}

.passarela-apoio {
  max-width: 30rem;
  margin: 1.25rem 0 4vh;
  color: var(--secundario);
}

.passarela-corpo {
  position: relative;
}

.anel-fixo {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.anel-fixo-alvo {
  position: sticky;
  top: calc(var(--barra-altura) + env(safe-area-inset-top) + 0.75rem);
  width: clamp(5.5rem, 22vw, 7.5rem);
  margin-left: auto;
  padding: 0.3rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--fundo-profundo) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.anel-fixo-alvo .anel-marcas {
  display: none;
}

.faixas {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada faixa: índice em cima, nome e razão em baixo à esquerda, peso à direita.
   Alta o suficiente para o anel perder um segmento de cada vez, não mais. */
.faixa {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  width: 100cqw;
  min-height: clamp(11rem, 34svh, 22rem);
  margin-left: calc(50% - 50cqw);
  padding: clamp(2.75rem, 6svh, 4rem) var(--recuo) clamp(1.25rem, 3svh, 2rem);
}

.faixa:nth-child(even) {
  background: var(--fundo-profundo);
}

.faixa-indice {
  position: absolute;
  left: var(--recuo);
  top: clamp(0.9rem, 2.5svh, 1.5rem);
  color: var(--discreto);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.faixa-texto {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  max-width: min(26rem, 62%);
}

.faixa-porque {
  color: var(--secundario);
  font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
  line-height: 1.4;
  text-wrap: pretty;
  transition: color 0.45s ease;
}

.faixa--vista .faixa-porque {
  color: var(--texto);
}

.faixa::after {
  content: "";
  position: absolute;
  left: var(--recuo);
  bottom: 0;
  width: min(28rem, 62%);
  height: 1px;
  background: var(--borda);
  transform-origin: left;
}

.faixa-nome {
  max-width: 12ch;
  font-size: clamp(2.1rem, 6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
  overflow-wrap: anywhere;
}

.peso {
  flex: none;
  color: var(--marca);
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-weight: 450;
  letter-spacing: -0.08em;
  line-height: 0.78;
  margin-right: -1vw;
  transition: color 0.45s ease;
}

.faixa--vista .peso {
  color: var(--perigo);
}

/* ---------- Perguntas: lista numerada, com réguas ---------- */

.perguntas {
  padding-top: clamp(4rem, 12vh, 8rem);
}

.perguntas-titulo {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
}

.perguntas-lista {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.pergunta {
  position: relative;
  display: grid;
  gap: 0.5rem 1.5rem;
  padding: 1.6rem 0 1.9rem;
  border-top: 1px solid var(--superficie-2);
}

.pergunta:last-child {
  border-bottom: 1px solid var(--superficie-2);
}

.pergunta-indice {
  color: var(--discreto);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}

.pergunta h3 {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.pergunta p {
  max-width: 36rem;
  margin: 0;
  color: var(--secundario);
  text-wrap: pretty;
}

/* A mesma peça na espera e no resultado: o anel desliza em vez de piscar. */
.espera .anel,
.seguranca-topo .anel {
  view-transition-name: anel-principal;
}

.so-leitores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Larguras ---------- */

@media (min-width: 640px) {
  .linha {
    flex-direction: row;
    align-items: stretch;
  }

  .linha input {
    flex: 1;
  }

  .linha button {
    width: auto;
    flex: none;
    padding-inline: 1.75rem;
  }

  .espera {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3rem;
  }

  .seguranca-topo {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2rem;
  }

  .seguranca-topo .anel {
    width: 16rem;
  }

  .header {
    grid-template-columns: minmax(0, 1fr) 4.5rem 5.5rem;
    gap: 0 1rem;
  }

  .pergunta {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .pergunta-indice {
    grid-row: 1 / span 2;
    padding-top: 0.35rem;
  }

  .pergunta h3,
  .pergunta p {
    grid-column: 2;
  }

  .lh-grelha {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .painel--seguranca .lh-grelha {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  /* Em desktop o campo e o anel partilham a faixa de baixo. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    column-gap: 2rem;
  }

  .hero > h1 {
    grid-column: 1 / -1;
  }

  .hero-anel {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-items: center;
    padding-block: 2rem 0;
  }

  .hero-anel .anel {
    width: min(100cqw, 100cqh, 24rem);
  }

  .apoio {
    grid-column: 1;
    grid-row: 3;
  }

  .formulario {
    grid-column: 1;
    grid-row: 4;
  }

  .painel--lighthouse {
    position: sticky;
    top: calc(var(--barra-altura) + env(safe-area-inset-top) + 1.5rem);
  }

  .resultados {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
    gap: 4rem;
  }

  .painel--lighthouse .lh-grelha {
    grid-template-columns: 1fr 1fr;
  }

  .anel-fixo {
    z-index: 1;
    inset: 0 0 0 calc(50% - 8rem);
    width: 16rem;
    pointer-events: none;
  }

  .anel-fixo-alvo {
    top: calc(50svh - 8rem);
    width: 16rem;
    margin-left: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .anel-fixo-alvo .anel-marcas {
    display: inline;
  }

  .faixa-texto {
    max-width: min(24rem, calc(50% - 10rem));
  }

  .faixa-nome {
    max-width: 10ch;
    font-size: clamp(2.4rem, 4.2vw, 4.25rem);
  }
}

/* Ecrãs baixos (telemóvel deitado): menos ar, tudo à vista. */
@media (max-height: 520px) and (orientation: landscape) {
  .estado:not(:empty) {
    padding-block: 1.5rem 2rem;
  }

  .espera {
    align-items: start;
  }

  .espera-titulo {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
  }

  .canais {
    margin-top: 0.9rem;
  }

  .consola {
    margin-top: 0.9rem;
  }

  .consola-corpo {
    max-height: 9rem;
  }

  .espera-apoio {
    margin-top: 0.75rem;
  }

  .faixa {
    min-height: 60svh;
  }
}


/* ---------- Rodapé ----------
   Nas cores da página (Tokyo Night). Da MarcaWeb ficam o logótipo branco
   oficial, o acento em Instrument Serif itálico, as linhas de 1 px e a seta. */

.rodape {
  color: var(--rodape-texto);
  background: var(--rodape-fundo);
  border-top: 1px solid var(--rodape-linha);
}

.rodape-miolo {
  max-width: var(--largura);
  margin-inline: auto;
  padding: clamp(3.5rem, 9svh, 6.5rem) var(--margem) calc(2rem + env(safe-area-inset-bottom));
}

.rodape a {
  color: var(--rodape-texto);
  text-decoration: none;
  border-radius: 0.2rem;
  transition: color 0.2s ease;
}

.rodape a:hover {
  color: var(--rodape-acento);
}

.rodape a:focus-visible,
.aviso-cookies a:focus-visible,
.aviso-cookies button:focus-visible {
  outline: 2px solid var(--rodape-acento);
  outline-offset: 3px;
}

.rodape-topo {
  display: grid;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 6svh, 4rem);
  border-bottom: 1px solid var(--rodape-linha);
}

.rodape-logo {
  display: inline-block;
  justify-self: start;
  /* Área de protecção do manual: a largura de uma perna do símbolo. */
  padding: 0.45rem 0;
}

.rodape-logo img {
  display: block;
  width: auto;
  height: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.rodape-titulo {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

.rodape-titulo em {
  display: inline-block;
  color: var(--rodape-acento);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.rodape-accoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.rodape .rodape-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 550;
}

.rodape .rodape-cta::after {
  content: "→";
  transition: transform 0.25s var(--ease-saida);
}

.rodape .rodape-cta:hover::after {
  transform: translateX(0.3rem);
}

.rodape .rodape-cta--principal {
  padding: 0 1.4rem;
  border-radius: 999px;
  background: var(--rodape-acento);
  color: var(--rodape-tinta);
}

.rodape .rodape-cta--principal:hover {
  color: var(--rodape-tinta);
  filter: brightness(1.08);
}

.rodape-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
  padding-block: clamp(2.5rem, 6svh, 3.5rem);
  border-bottom: 1px solid var(--rodape-linha);
}

.rodape-coluna h3,
.rodape-privacidade h3 {
  margin: 0 0 0.9rem;
  color: var(--rodape-texto-2);
  font-size: 0.85rem;
  font-weight: 500;
}

.rodape-coluna ul {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape-coluna a {
  display: inline-block;
  padding-block: 0.4rem;
  font-size: 0.97rem;
  overflow-wrap: anywhere;
}

.rodape-privacidade {
  padding-block: clamp(2rem, 5svh, 3rem);
  border-bottom: 1px solid var(--rodape-linha);
  scroll-margin-top: calc(var(--barra-altura) + env(safe-area-inset-top) + 1rem);
}

.rodape-privacidade:focus {
  outline: none;
}

.rodape-privacidade:target h3 {
  color: var(--rodape-acento);
}

.rodape-privacidade p {
  max-width: 46rem;
  margin: 0;
  color: var(--rodape-texto-2);
  font-size: 0.95rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.75rem;
  color: var(--rodape-texto-2);
  font-size: 0.85rem;
}

.rodape-base p {
  margin: 0;
}

/* ---------- Aviso de cookies ----------
   Informativo, não pede consentimento: a ferramenta não usa cookies nem
   rastreio, por isso a directiva ePrivacy não o exige. Não bloqueia nada. */

.aviso-cookies {
  position: fixed;
  z-index: 30;
  left: var(--margem);
  right: var(--margem);
  bottom: calc(var(--margem) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: 34rem;
  padding: 0.85rem 0.85rem 0.85rem 1.15rem;
  color: var(--rodape-texto);
  background: color-mix(in oklab, var(--rodape-fundo) 94%, transparent);
  border: 1px solid var(--rodape-linha);
  border-radius: 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.aviso-cookies[hidden] {
  display: none;
}

.aviso-cookies p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.aviso-cookies a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--rodape-acento);
  text-underline-offset: 0.2em;
}

/* Enquanto o aviso está à vista, o fundo da página afasta-se dele. */
.com-aviso-cookies .hero {
  padding-bottom: calc(var(--aviso-altura, 0px) + var(--margem) * 2);
}

.com-aviso-cookies .rodape-miolo {
  padding-bottom: calc(var(--aviso-altura, 0px) + var(--margem) * 3);
}

.aviso-cookies-ok {
  flex: none;
  width: auto;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  background: var(--rodape-acento);
  color: var(--rodape-tinta);
  font-size: 0.92rem;
}

@media (min-width: 640px) {
  .rodape-colunas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .aviso-cookies {
    right: auto;
  }
}

@media (min-width: 1024px) {
  .rodape-topo {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo logo"
      "titulo accoes";
    align-items: end;
    column-gap: 3rem;
  }

  .rodape-logo { grid-area: logo; }
  .rodape-titulo { grid-area: titulo; }
  .rodape-accoes { grid-area: accoes; justify-content: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  .aviso-cookies:not([hidden]) {
    animation: entrar 0.6s var(--ease-saida) 1.2s both;
  }
}

/* ---------- Movimento ---------- */

@media (prefers-reduced-motion: no-preference) {
  .linha-titulo {
    animation: revelar 1.05s var(--ease-saida) both;
  }

  .linha-titulo--sai {
    animation-delay: 0.16s;
  }

  .hero-anel .anel {
    animation: surgir 1.4s var(--ease-saida) 0.35s both;
  }

  .anel--ocioso .anel-varrimento {
    animation: rodar 9s linear infinite;
  }

  .anel--a-correr .anel-varrimento {
    animation: rodar 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  .anel--ocioso .anel-marcas {
    transform-origin: 120px 120px;
    animation: rodar 120s linear infinite reverse;
  }

  .anel--resultado .anel-letra {
    animation: assentar 0.9s var(--ease-saida) 0.5s both;
  }

  .canal,
  .consola,
  .header,
  .lh-celula {
    animation: entrar 0.6s var(--ease-saida) var(--atraso, 0ms) both;
  }

  .consola {
    animation-delay: 160ms;
  }

  .canal:nth-child(2) {
    animation-delay: 80ms;
  }

  /* O anel a sondar: cada segmento acende por sua vez, sem nunca se dar
     por feito; só a resposta pinta o verde ou o vermelho. */
  .anel--a-correr .seg {
    animation: sondar 2.4s ease-in-out calc(var(--atraso, 0ms) * 3) infinite;
  }

  .anel--a-correr::before {
    animation: rodar 6s linear infinite;
  }

  .consola-feixe {
    animation: carregar 2.2s ease-in-out infinite;
  }

  .consola-ponto {
    animation: respirar 1.6s ease-in-out infinite;
  }

  .consola-linha {
    animation: entrar 0.3s ease both;
  }

  .consola-linha--a-escrever .consola-texto::after {
    animation: piscar 0.9s steps(1) infinite;
  }

  .header-peso-enche {
    animation: encher 0.9s var(--ease-saida) calc(var(--atraso, 0ms) + 200ms) both;
  }

  .canal--a-correr .canal-ponto::after {
    animation: pulso 1.4s ease-out infinite;
  }

  .lh-girar {
    animation: rodar 1.2s linear infinite;
  }

  .lh-enche {
    animation: arco 1.3s var(--ease-saida) calc(var(--atraso, 0ms) + 150ms) both;
  }

  .faixa::after {
    transition: transform 0.9s var(--ease-saida);
    transform: scaleX(0.2);
  }

  .faixa--vista::after {
    transform: scaleX(1);
  }

  ::view-transition-old(estado) {
    animation: 0.25s ease both sair;
  }

  ::view-transition-new(estado) {
    animation: 0.5s var(--ease-saida) both entrar;
  }

  ::view-transition-group(anel-principal) {
    animation-duration: 0.7s;
    animation-timing-function: var(--ease-saida);
  }

  .redirect {
    animation: entrar 0.5s var(--ease-saida) var(--atraso, 0ms) both;
  }

  .tls-pista-enche {
    animation: encher 1s var(--ease-saida) 0.3s both;
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .linha-titulo--sai {
      animation-name: revelar, deriva;
      animation-duration: 1.05s, 1s;
      animation-timing-function: var(--ease-saida), linear;
      animation-delay: 0.16s, 0s;
      animation-fill-mode: both, both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0vh 70vh;
    }

    .hero-anel .anel {
      animation-name: surgir, afastar;
      animation-duration: 1.4s, 1s;
      animation-timing-function: var(--ease-saida), linear;
      animation-delay: 0.35s, 0s;
      animation-fill-mode: both, both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0vh 80vh;
    }
  }
}

@keyframes revelar {
  from { clip-path: inset(100% 0 -30% 0); }
  to { clip-path: inset(0 0 -30% 0); }
}

@keyframes deriva {
  from { transform: translateX(0); }
  to { transform: translateX(16vw); }
}

@keyframes surgir {
  from { opacity: 0; scale: 0.82; }
  to { opacity: 0.9; scale: 1; }
}

@keyframes afastar {
  from { translate: 0 0; }
  to { translate: 0 -18vh; opacity: 0; }
}

@keyframes rodar {
  to { rotate: 360deg; }
}

@keyframes assentar {
  from { opacity: 0; transform: translateY(18%) scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

@keyframes sair {
  to { opacity: 0; }
}

@keyframes encher {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

@keyframes arco {
  from { stroke-dasharray: 0 100; }
}

@keyframes pulso {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}

@keyframes sondar {
  0%, 55%, 100% { stroke: var(--borda); }
  22% { stroke: color-mix(in oklab, var(--marca) 85%, var(--borda)); }
}

@keyframes respirar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes piscar {
  50% { opacity: 0; }
}

@keyframes carregar {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  button:active {
    transform: none;
  }
}