/* ==========================================================================
   Planetas de Ninguém: o Registro Aberto.

   Site estático, sem dependências e sem etapa de compilação.

   REGRA DE LEITURA
   Cor pertence à mecânica. Forma pertence à identidade.

   Âmbar indica ação e dano cinético. Ciano indica dano de energia. As cinco
   corporações recebem exatamente o mesmo tratamento cromático: nenhuma delas
   tem cor própria, aqui ou no jogo. Elas se distinguem pelo que aparece na
   cena — o ambiente de trabalho de cada uma —, nunca pelo matiz.
   ========================================================================== */

/* ── FONTES, HOSPEDADAS AQUI E NÃO NO GOOGLE ──────────────────────────────
   O nginx serve com Content-Security-Policy: default-src 'self'. Um @import de
   fonts.googleapis.com é BLOQUEADO — e falha do pior jeito possível: em
   desenvolvimento carrega e parece certo, e só em produção a página cai para a
   fonte do sistema. A tipografia, que é metade do desenho, sumiria sem erro.

   `font-display: swap` porque o texto tem de aparecer antes da fonte chegar.
   Numa conexão móvel ruim, bloquear a renderização por causa da letra é trocar
   um site feio por um site em branco.

   Arquivos gerados por tools/preparar_fontes.py — subconjunto latino, e é por
   isso que outro idioma exige refazer o subconjunto, não só traduzir. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-corpo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Estreita";
  src: url("/fonts/archivo-titulo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Share Tech Mono";
  src: url("/fonts/sharetech.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --fundo: #090c10;
  --fundo-profundo: #05070a;
  --painel: #11171d;
  --painel-alto: #182029;
  --painel-claro: #202a34;
  --borda: #303d49;
  --borda-ativa: #607181;
  --texto: #f2f3ef;
  --texto-suave: #b7c0c7;
  --texto-fraco: #84919c;
  --texto-escuro: #171208;

  --cinetico: #e8a33d;
  --cinetico-forte: #f2b650;
  --cinetico-leito: #2b2113;
  --energia: #3dc8e8;
  --verdadeiro: #ffffff;
  --cura: #4fd98a;
  --debuff: #a45bd9;
  --controle: #e05252;

  --fonte-corpo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-display: "Anton", "Archivo Estreita", "Arial Narrow", system-ui, sans-serif;
  --fonte-titulo: "Archivo Estreita", "Arial Narrow", system-ui, sans-serif;
  --fonte-registro: "Share Tech Mono", ui-monospace, "Cascadia Mono", monospace;

  --medida: 70ch;
  --faixa: 1240px;
  --respiro: clamp(1rem, 4vw, 4.5rem);
  --secao: clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --z-topo: 30;
  --z-menu: 40;
  --z-pular: 50;
}

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

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

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background-color: var(--fundo);
  background-image: linear-gradient(rgba(9, 12, 16, .94), rgba(9, 12, 16, .94)), url("/img/grao.png");
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--cinetico);
  color: var(--texto-escuro);
}

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

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

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .22em;
}

a:hover { text-decoration-color: currentColor; }

p { margin: 0 0 1.15rem; }

/* Anton é de peso ÚNICO, e já nasce estreita e pesada.
   Pedir 800 a ela faz o navegador engordar o desenho por conta própria — o
   negrito sintético —, que engrossa a haste sem redesenhar a letra e produz
   exatamente o borrão que estraga uma fonte de display. Por isso 400, e por
   isso `font-stretch` sai: não há eixo de largura para ajustar, e declará-lo
   convidaria a mesma falsificação na largura.
   O espacejamento afrouxa para -.015em: Anton já é apertada de origem, e o
   -.03em que a família anterior pedia colava as letras. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  max-width: 14ch;
  font-size: clamp(3rem, 9vw, 6rem);
}

h2 { font-size: clamp(2.15rem, 5vw, 4.6rem); }

h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

strong { color: var(--texto); }

.faixa {
  width: min(100%, var(--faixa));
  margin-inline: auto;
  padding-inline: var(--respiro);
}

.medida { max-width: var(--medida); }

.medida-centro {
  max-width: var(--medida);
  margin-inline: auto;
}

.texto-grande {
  color: var(--texto-suave);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.etiqueta,
.registro-label {
  margin: 0 0 1rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .73rem;
  font-weight: 400;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.etiqueta-clara { color: var(--texto-suave); }

/* Cabeçalho -------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  min-height: 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--borda) 86%, transparent);
  background: rgba(5, 7, 10, .9);
  backdrop-filter: blur(12px);
}

.topo-linha,
.topo .faixa {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .7rem;
  color: var(--texto);
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: .95rem;
  font-stretch: condensed;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

/* O EMBLEMA DO JOGO, e não um código de planeta.
   Aqui havia "12-B" impresso ao lado do nome, como se o jogo se passasse numa
   concessão só. Ele tem treze, e vai ter mais: pôr o número de um planeta na
   marca contradiz a premissa que o próprio site defende duas telas abaixo.
   O emblema é o mesmo do ícone do aplicativo, para quem vê o site e depois
   instala reconhecer a mesma coisa. */
.marca-icone {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.menu {
  position: relative;
  margin-left: auto;
}

.menu-botao {
  display: grid;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  padding: 0 .85rem;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  cursor: pointer;
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .08em;
  list-style: none;
  text-transform: uppercase;
}

.menu-botao::-webkit-details-marker { display: none; }

.menu-botao::before {
  content: "";
  width: 14px;
  height: 10px;
  margin-right: .55rem;
  border-block: 1px solid currentColor;
}

.menu[open] .menu-botao {
  border-color: var(--borda-ativa);
  color: var(--texto);
}

.navegacao-desktop { display: none; }

.navegacao-mobile {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: var(--z-menu);
  display: none;
  width: min(320px, calc(100vw - 2rem));
  padding: .55rem;
  border: 1px solid var(--borda-ativa);
  background: var(--painel);
}

.menu[open] .navegacao-mobile { display: grid; }

.navegacao a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
  color: var(--texto-suave);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.navegacao a::after {
  content: "/";
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
}

.navegacao a:hover,
.navegacao a[aria-current="page"] {
  background: var(--painel-alto);
  color: var(--texto);
}

.navegacao a[aria-current="page"]::after { color: var(--cinetico); }

.topo-cta {
  display: none;
  min-height: 44px;
  align-items: center;
  padding: .55rem .95rem;
  border: 1px solid var(--borda-ativa);
  color: var(--texto);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.topo-cta:hover { border-color: var(--cinetico); color: var(--cinetico); }

/* Botões ----------------------------------------------------------------- */

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.botao {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.3rem;
  border: 0;
  background: var(--cinetico);
  color: var(--texto-escuro);
  cursor: pointer;
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .055em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.botao:hover {
  background: var(--cinetico-forte);
  color: var(--texto-escuro);
  transform: translateY(-2px);
}

.botao-fraco {
  border: 1px solid var(--borda-ativa);
  background: transparent;
  color: var(--texto);
}

.botao-fraco:hover {
  border-color: var(--texto-suave);
  background: var(--painel-alto);
  color: var(--texto);
}

.botao:disabled {
  background: var(--painel-claro);
  color: var(--texto-fraco);
  cursor: wait;
  transform: none;
}

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

.heroi {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9rem);
}

.heroi-interno {
  min-height: min(76vh, 760px);
  display: grid;
  align-items: end;
}

.heroi-interno .hero-imagem,
.hero-home .hero-imagem,
.corp-heroi .hero-imagem,
.heroi-lista .hero-imagem,
.erro-pagina .hero-imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroi-interno::after,
.hero-home::after,
.corp-heroi::after,
.heroi-lista::after,
.erro-pagina::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.heroi-interno::after {
  background: linear-gradient(180deg, rgba(5, 7, 10, .24) 0%, rgba(5, 7, 10, .52) 45%, var(--fundo) 100%);
}

.hero-conteudo {
  position: relative;
  z-index: 1;
}

.chamada {
  max-width: 63ch;
  margin-top: 1.4rem;
  color: var(--texto-suave);
  font-size: clamp(1.08rem, 2.2vw, 1.38rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Entrada ---------------------------------------------------------------- */

.hero-home {
  position: relative;
  min-height: max(640px, calc(100svh - 64px));
  display: grid;
  align-items: end;
  overflow: hidden;
  padding-block: clamp(4.5rem, 12vw, 8rem) 2rem;
}

.hero-home .hero-imagem {
  object-position: 58% center;
  filter: saturate(.78) contrast(1.06);
}

.hero-home::after {
  background:
    linear-gradient(90deg, rgba(5, 7, 10, .94) 0%, rgba(5, 7, 10, .7) 48%, rgba(5, 7, 10, .16) 78%),
    linear-gradient(180deg, rgba(5, 7, 10, .28) 0%, rgba(5, 7, 10, .08) 45%, rgba(5, 7, 10, .95) 100%);
}

.hero-home h1 { max-width: 10ch; }

.hero-home .chamada { max-width: 54ch; color: #d7dde0; }

.hero-registro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: clamp(3.5rem, 11vh, 7rem) 0 0;
  border-block: 1px solid rgba(183, 192, 199, .28);
}

.hero-registro div {
  display: grid;
  grid-template-columns: minmax(7.2rem, .65fr) 1fr;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(183, 192, 199, .18);
}

.hero-registro div:last-child { border-bottom: 0; }

.hero-registro dt,
.hero-registro dd { margin: 0; }

.hero-registro dt {
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .67rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-registro dd {
  color: var(--texto);
  font-size: .84rem;
  font-weight: 650;
}

/* Ritmo de seções -------------------------------------------------------- */

.secao { padding-block: var(--secao); }

.secao-compacta { padding-block: clamp(3.5rem, 7vw, 6rem); }

.secao-metal {
  border-block: 1px solid var(--borda);
  background: var(--painel);
}

.secao-profunda { background: var(--fundo-profundo); }

.secao-cabecalho {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.secao-cabecalho h2 { max-width: 13ch; }

.secao-cabecalho p {
  max-width: 58ch;
  margin: 0;
  align-self: end;
  color: var(--texto-suave);
  font-size: 1.05rem;
}

.regra {
  position: relative;
  max-width: 19ch;
  margin: 0;
  padding-top: 1.5rem;
  color: var(--texto);
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-stretch: condensed;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}

.regra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.75rem;
  height: 5px;
  background: var(--cinetico);
}

.fluxo {
  display: grid;
  margin: clamp(3rem, 8vw, 6rem) 0 0;
  padding: 0;
  border-block: 1px solid var(--borda);
  list-style: none;
}

.fluxo li {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--borda);
}

.fluxo li:last-child { border-bottom: 0; }

.fluxo-numero {
  color: var(--cinetico);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .72rem;
  font-weight: 400;
}

.fluxo h3 { margin-bottom: .45rem; }

.fluxo p {
  max-width: 46ch;
  margin: 0;
  color: var(--texto-suave);
  font-size: .94rem;
}

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

.operacao-imagem {
  position: relative;
  margin: 0;
  min-height: 420px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.operacao-imagem img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.operacao-imagem figcaption,
.placa figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: min(78%, 33rem);
  padding: .65rem .85rem;
  background: rgba(5, 7, 10, .88);
  color: var(--texto-suave);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .67rem;
  line-height: 1.45;
}

.painel-texto {
  position: relative;
  padding-top: 1.4rem;
}

.painel-texto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--cinetico);
}

.painel-texto h2 { max-width: 10ch; margin-bottom: 1.4rem; }

.painel-texto p { color: var(--texto-suave); }

.elenco-chamada {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.parede-retratos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  transform: rotate(-1.2deg);
}

.parede-retratos figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--painel);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.parede-retratos figure:nth-child(2),
.parede-retratos figure:nth-child(4) { transform: translateY(1.75rem); }

.parede-retratos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06);
  transition: filter 300ms var(--ease), transform 700ms var(--ease);
}

.parede-retratos figure:hover img {
  filter: saturate(1) contrast(1.02);
  transform: scale(1.025);
}

.parede-retratos figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.8rem .75rem .55rem;
  background: linear-gradient(transparent, rgba(5, 7, 10, .88));
  color: var(--texto);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .67rem;
  text-transform: uppercase;
}

.corps-previa {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-block: 2rem;
  border-block: 1px solid var(--borda);
}

.corp-previa {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 112px;
  padding: .5rem 0;
  overflow: hidden;
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.corp-previa:hover strong { color: var(--cinetico); }

.corp-previa img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: brightness(1.08) contrast(1.08);
  transition: transform 450ms var(--ease);
}

.corp-previa:hover img { transform: translateY(-.35rem); }

.corp-previa strong {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: 1.25rem;
  font-stretch: condensed;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
}

.corp-previa span {
  color: var(--texto-fraco);
  font-size: .8rem;
  line-height: 1.35;
}

.cta-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 13vw, 10rem);
  background: var(--cinetico);
  color: var(--texto-escuro);
}

/* A marca de água era "12-B" pelo mesmo engano. Agora é o nome do registro,
   que vale para todas as concessões. */
.cta-final::after {
  content: "REGISTRO";
  position: absolute;
  right: -.04em;
  bottom: -.24em;
  color: rgba(23, 18, 8, .08);
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: clamp(8rem, 30vw, 27rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .8;
  pointer-events: none;
}

.cta-final .faixa { position: relative; z-index: 1; }

.cta-final h2 { max-width: 12ch; }

.cta-final p {
  max-width: 48ch;
  margin: 1.5rem 0 0;
  font-weight: 560;
}

.cta-final .etiqueta {
  margin: 0 0 1rem;
  color: currentColor;
}

.cta-final .botao {
  border: 1px solid var(--texto-escuro);
  background: var(--texto-escuro);
  color: var(--texto);
}

.cta-final .botao:hover { background: var(--fundo); }

/* Imagens e textos internos --------------------------------------------- */

.placa {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--painel);
}

.placa img {
  width: 100%;
  height: clamp(300px, 56vw, 720px);
  object-fit: cover;
}

.placa-quadrada img { aspect-ratio: 1; height: auto; }

.placa-corte {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.dupla {
  display: grid;
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
}

.dupla-inversa .placa { order: 0; }

.texto-bloco h2 { margin-bottom: 1.5rem; }

.texto-bloco p { color: var(--texto-suave); text-wrap: pretty; }

.registro-operacao {
  margin: 2rem 0 0;
  padding: 0;
  border-block: 1px solid var(--borda);
}

.registro-operacao div {
  display: grid;
  grid-template-columns: minmax(7rem, .65fr) 1fr;
  gap: 1rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--borda);
}

.registro-operacao div:last-child { border-bottom: 0; }

.registro-operacao dt {
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.registro-operacao dd { margin: 0; color: var(--texto-suave); }

.fala {
  position: relative;
  margin: 2.75rem 0;
  padding: 1.5rem;
  border: 1px solid var(--borda-ativa);
  background: var(--painel);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.fala::before {
  content: "REGISTRO";
  display: block;
  margin-bottom: .75rem;
  color: var(--cinetico);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .1em;
}

.fala p {
  margin-bottom: .8rem;
  color: var(--texto);
  font-size: 1.02rem;
}

.fala footer {
  color: var(--texto-fraco);
  font-size: .78rem;
}

/* Mundo ------------------------------------------------------------------ */

.heroi-mundo .hero-imagem { object-position: 55% center; }

.heroi-mundo .hero-conteudo { padding-bottom: clamp(1rem, 4vw, 3rem); }

.numero-planeta {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--cinetico);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
}

.turno {
  display: grid;
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--borda);
  background: var(--borda);
}

.turno-item {
  padding: 1.35rem;
  background: var(--fundo);
}

.turno-item time {
  display: block;
  margin-bottom: .75rem;
  color: var(--cinetico);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .72rem;
}

.turno-item h3 { margin-bottom: .55rem; }

.turno-item p { margin: 0; color: var(--texto-suave); font-size: .9rem; }

/* Corporações ------------------------------------------------------------ */

.mecanica-nota {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.25rem;
  border: 1px solid var(--borda);
  background: var(--fundo-profundo);
}

.mecanica-nota > p {
  margin: 0;
  color: var(--texto-suave);
  font-size: .92rem;
}

.amostras {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.25rem;
}

.amostra {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: .55rem;
  color: var(--texto-suave);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .72rem;
  text-transform: uppercase;
}

.amostra::before {
  content: "";
  width: .78rem;
  height: .78rem;
  flex: none;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 12%, transparent);
}

.cor-cinetico { --cor: var(--cinetico); }
.cor-energia { --cor: var(--energia); }
.cor-verdadeiro { --cor: var(--verdadeiro); }
.cor-cura { --cor: var(--cura); }
.cor-debuff { --cor: var(--debuff); }
.cor-controle { --cor: var(--controle); }

.corp-lista {
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--borda);
  list-style: none;
}

.corp-lista li + li { border-top: 1px solid var(--borda); }

.corp-item {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(5.7rem, 25vw) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  min-height: 148px;
  padding-block: 1.15rem;
  color: var(--texto);
  text-decoration: none;
}

.corp-item::after {
  content: "ABRIR DOSSIÊ";
  position: absolute;
  right: 0;
  bottom: 1rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .62rem;
  letter-spacing: .06em;
}



.corp-texto { min-width: 0; padding-bottom: 1.25rem; }

.corp-indice {
  display: block;
  margin-bottom: .35rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .65rem;
}

.corp-nome {
  margin: 0 0 .45rem;
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: clamp(1.6rem, 5vw, 3.8rem);
  font-stretch: condensed;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .95;
  text-transform: uppercase;
}

.corp-forma {
  max-width: 42ch;
  margin: 0;
  color: var(--texto-suave);
  font-size: .86rem;
  line-height: 1.45;
}

/* Página individual de corporação --------------------------------------- */

.corp-heroi {
  position: relative;
  min-height: max(610px, calc(100svh - 64px));
  display: grid;
  align-items: end;
  overflow: hidden;
  padding-block: 5rem 2.5rem;
}

.corp-heroi .hero-imagem {
  filter: saturate(.7) contrast(1.08);
}

.corp-heroi::after {
  background:
    linear-gradient(90deg, rgba(5, 7, 10, .92) 0%, rgba(5, 7, 10, .54) 50%, rgba(5, 7, 10, .12) 83%),
    linear-gradient(180deg, rgba(5, 7, 10, .2), rgba(5, 7, 10, .08) 45%, rgba(5, 7, 10, .95));
}

.corp-heroi-grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: end;
}

.corp-heroi h1 {
  max-width: none;
  text-transform: uppercase;
}


.corp-prosa {
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.corp-intro {
  position: static;
}

.corp-intro .chamada { margin: 0; color: var(--texto); }

.corp-corpo h2 {
  margin: 3.25rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.05;
}

.corp-corpo h2:first-child { margin-top: 0; }

.corp-corpo p { color: var(--texto-suave); }

.operador-destaque {
  display: grid;
  gap: 0;
  margin: 3rem 0;
  border: 1px solid var(--borda-ativa);
  background: var(--painel);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.operador-destaque img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.72) contrast(1.05);
}

.operador-destaque blockquote {
  margin: 0;
  padding: 1.35rem;
}

.operador-destaque blockquote p { color: var(--texto); }

.operador-destaque footer { color: var(--texto-fraco); font-size: .78rem; }

/* Operadores ------------------------------------------------------------- */

.heroi-operadores {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background: var(--fundo-profundo);
}

.heroi-operadores-grade {
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
}

.heroi-operadores h1 { max-width: 11ch; }

.roster-grupo {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.roster-grupo:nth-of-type(even) { background: var(--painel); }

.grupo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borda-ativa);
}

.grupo-cabecalho h2 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  text-transform: uppercase;
}

.grupo-cabecalho a { text-decoration: none; }

.grupo-cabecalho span {
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.grade-operadores {
  display: grid;
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.operador {
  display: grid;
  min-width: 0;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--borda);
}

.operador img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(.75) contrast(1.04);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: filter 250ms var(--ease);
}

.operador:hover img { filter: saturate(1) contrast(1.02); }

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

.operador-nome {
  margin: .05rem 0 .2rem;
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: 1.35rem;
  font-stretch: condensed;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1;
  text-transform: uppercase;
}

.operador-funcao {
  margin: 0 0 .55rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .66rem;
  letter-spacing: .025em;
  line-height: 1.45;
  text-transform: uppercase;
}

.operador-funcao a { color: var(--texto-suave); }

.operador-historia {
  margin: 0;
  color: var(--texto-suave);
  font-size: .85rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Lista de espera -------------------------------------------------------- */

.heroi-lista {
  position: relative;
  min-height: max(650px, calc(100svh - 64px));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.heroi-lista .hero-imagem { object-position: 62% center; }

.heroi-lista::after {
  background:
    linear-gradient(90deg, rgba(5, 7, 10, .96) 0%, rgba(5, 7, 10, .75) 56%, rgba(5, 7, 10, .24) 100%),
    linear-gradient(180deg, rgba(5, 7, 10, .24), rgba(5, 7, 10, .8));
}

.lista-grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: end;
}

.lista-grade h1 { max-width: 11ch; }

.lista-quadro {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2.2rem);
  border: 1px solid var(--borda-ativa);
  background: rgba(17, 23, 29, .94);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.lista-quadro h2 {
  margin-bottom: .85rem;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.lista-quadro > p { color: var(--texto-suave); font-size: .92rem; }

.formulario {
  display: grid;
  gap: .65rem;
  margin-top: 1.35rem;
}

.campo-label {
  color: var(--texto-suave);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.formulario input[type="email"] {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: .78rem .9rem;
  border: 1px solid var(--borda-ativa);
  border-radius: 0;
  background: var(--fundo-profundo);
  color: var(--texto);
  font-size: 1rem;
}

.formulario input::placeholder { color: #8f9ba5; opacity: 1; }

.formulario .botao { width: 100%; }

.aviso {
  min-height: 1.5em;
  margin: .85rem 0 0;
  font-size: .86rem;
}

.aviso-ok { color: var(--cura); }
.aviso-ruim { color: #ef7474; }

.lista-notas {
  display: grid;
  gap: 1px;
  border: 1px solid var(--borda);
  background: var(--borda);
}

.lista-nota {
  padding: 1.4rem;
  background: var(--fundo);
}

.lista-nota h2 {
  margin-bottom: .75rem;
  font-size: 1.5rem;
}

.lista-nota p { margin: 0; color: var(--texto-suave); font-size: .92rem; }

/* Página 404 ------------------------------------------------------------- */

.erro-pagina {
  position: relative;
  min-height: calc(100svh - 64px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: 5rem;
}

.erro-pagina .hero-imagem { object-position: 58% center; opacity: .55; }

.erro-pagina::after {
  background: linear-gradient(90deg, rgba(5, 7, 10, .96), rgba(5, 7, 10, .5)), linear-gradient(180deg, transparent, var(--fundo));
}

.erro-codigo {
  margin: 0 0 .5rem;
  color: var(--cinetico);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: clamp(3.2rem, 12vw, 8rem);
  font-weight: 400;
  line-height: .85;
}

/* Rodapé ----------------------------------------------------------------- */

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

.rodape-grade {
  display: grid;
  gap: 2rem;
  padding-block: 3rem;
}

.rodape-marca {
  margin: 0;
  color: var(--texto);
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
}

.rodape-nota {
  max-width: 40ch;
  margin: .65rem 0 0;
  font-size: .82rem;
}

.rodape-nav {
  display: grid;
  gap: .2rem;
}

.rodape-nav a {
  display: flex;
  min-height: 42px;
  align-items: center;
  color: var(--texto-suave);
  font-size: .86rem;
  text-decoration: none;
}

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

.rodape-registro {
  padding-block: 1rem 1.5rem;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .65rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Acessibilidade --------------------------------------------------------- */

.pular {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: var(--z-pular);
  padding: .7rem 1rem;
  background: var(--cinetico);
  color: var(--texto-escuro);
  transform: translateY(-160%);
  transition: transform 180ms var(--ease);
}

.pular:focus { transform: translateY(0); }

.formulario input:focus-visible,
.menu-botao:focus-visible,
.botao:focus-visible,
a:focus-visible {
  outline: 2px solid var(--energia);
  outline-offset: 3px;
}

/* Responsivo ------------------------------------------------------------- */

@media (min-width: 620px) {
  .hero-registro { grid-template-columns: repeat(3, 1fr); }

  .hero-registro div {
    display: block;
    padding: .8rem 1rem;
    border-right: 1px solid rgba(183, 192, 199, .18);
    border-bottom: 0;
  }

  .hero-registro div:first-child { padding-left: 0; }
  .hero-registro div:last-child { border-right: 0; }
  .hero-registro dd { margin-top: .25rem; }

  .fluxo { grid-template-columns: repeat(3, 1fr); }

  .fluxo li {
    display: block;
    padding: 1.5rem;
    border-right: 1px solid var(--borda);
    border-bottom: 0;
  }

  .fluxo li:first-child { padding-left: 0; }
  .fluxo li:last-child { border-right: 0; }
  .fluxo-numero { display: block; margin-bottom: 2.6rem; }

  .corps-previa { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .turno { grid-template-columns: repeat(3, 1fr); }
  .turno-item { min-height: 210px; }

  .mecanica-nota { grid-template-columns: 1fr auto; align-items: center; }

  .corp-item {
    grid-template-columns: minmax(7rem, 16vw) minmax(0, 1fr);
    min-height: 185px;
  }

  .corp-item::after { bottom: 50%; transform: translateY(50%); }
  .corp-texto { padding: 0 8.5rem 0 0; }

  .operador-destaque { grid-template-columns: minmax(180px, .75fr) 1.25fr; }
  .operador-destaque img { height: 100%; aspect-ratio: auto; }
  .operador-destaque blockquote { padding: 1.6rem; align-self: center; }

  .formulario {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .campo-label { grid-column: 1 / -1; }
  .formulario .botao { width: auto; }

  .lista-notas { grid-template-columns: repeat(2, 1fr); }

  .rodape-grade { grid-template-columns: 1fr auto; align-items: start; }
  .rodape-nav { grid-template-columns: repeat(2, minmax(8rem, 1fr)); }
}

@media (min-width: 960px) {
  .topo { min-height: 72px; }
  .topo-linha, .topo .faixa { min-height: 72px; }

  .menu { display: none; }

  .navegacao-desktop {
    position: static;
    display: flex;
    width: auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .navegacao a {
    min-height: 44px;
    padding: .6rem .75rem;
    font-size: .78rem;
  }

  .navegacao a::after { display: none; }
  .navegacao a:hover,
  .navegacao a[aria-current="page"] { background: transparent; }
  .navegacao a[aria-current="page"] { color: var(--cinetico); }

  .topo-cta { display: inline-flex; }

  .hero-home,
  .corp-heroi,
  .heroi-lista { min-height: max(660px, calc(100svh - 72px)); }

  .secao-cabecalho { grid-template-columns: 1.15fr .85fr; }

  .operacao-grade { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); }
  .operacao-imagem { min-height: 620px; }
  .operacao-imagem img { min-height: 620px; }

  .elenco-chamada { grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); }

  .corps-previa { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .corp-previa { grid-template-columns: 1fr; align-content: center; min-height: 230px; }
  .corp-previa img { max-height: 150px; }

  .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dupla-inversa .placa { order: 2; }

  .corp-heroi-grade { grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr); }

  .corp-prosa { grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); }
  .corp-intro { position: sticky; top: 104px; }

  .heroi-operadores-grade { grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); }
  .parede-retratos { grid-template-columns: repeat(3, 1fr); }
  .parede-retratos figure:nth-child(2),
  .parede-retratos figure:nth-child(4) { transform: translateY(2.2rem); }
  .parede-retratos figure:nth-child(5) { transform: translateY(-1rem); }

  .operador { grid-template-columns: 7.7rem minmax(0, 1fr); min-height: 178px; }

  .lista-grade { grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); }

  .rodape-nav { grid-template-columns: repeat(4, auto); gap: 1.5rem; }
}

@media (min-width: 1080px) {
  .marca { font-size: 1.02rem; }
  .navegacao a { padding-inline: .95rem; }

  .corp-item { grid-template-columns: 14rem minmax(0, 1fr); min-height: 220px; }

  .grade-operadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operador { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(2.75rem, 14vw, 4.3rem); overflow-wrap: anywhere; }
  h2 { overflow-wrap: anywhere; }

  .marca { max-width: 12rem; font-size: .82rem; }
  .marca::before { width: 34px; height: 34px; }
  .menu-botao { padding-inline: .7rem; font-size: .66rem; }

  .hero-home { min-height: 690px; }
  .hero-home::after {
    background: linear-gradient(90deg, rgba(5, 7, 10, .94), rgba(5, 7, 10, .45)), linear-gradient(180deg, rgba(5, 7, 10, .2), rgba(5, 7, 10, .96));
  }

  .acoes { display: grid; }
  .acoes .botao { width: 100%; }

  .operacao-imagem,
  .operacao-imagem img { min-height: 360px; }

  .corp-item::after { content: "ABRIR"; }

  .operador { grid-template-columns: 5.75rem minmax(0, 1fr); }
  .operador-historia { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ── PLACA DE AMBIENTE NO CARTÃO DE CORPORAÇÃO ────────────────────────────
   Substituiu o render de silhueta do projétil. A silhueta é uma regra de
   leitura de COMBATE — serve para reconhecer o fabricante no meio da briga —
   e fora dali era um objeto cinza sem textura ocupando o lugar nobre do
   cartão. O ambiente de trabalho diz quem é a empresa em um olhar, e é imagem
   de verdade.

   O corte 3:2 é fixo para as cinco: lado a lado, altura desigual leria como
   hierarquia entre elas, e não há hierarquia. */
.corp-placa {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
  transition: filter .5s var(--ease), transform .5s var(--ease);
}

.corp-item:hover .corp-placa {
  filter: saturate(1) contrast(1.1);
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .corp-placa, .corp-item:hover .corp-placa { transition: none; transform: none; }
}

/* ── O REGISTRO: os mundos catalogados ────────────────────────────────────
   Lista, não grade de cartões. São doze e vão virar mais: cartão obrigaria a
   uma imagem por mundo que ainda não existe, e doze retângulos vazios seriam
   pior que texto honesto. A tabela também é o formato certo para a ficção —
   isto é um catálogo, e o Registro numera antes de nomear. */
.registro-mundos {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--borda);
}

.mundo {
  display: grid;
  gap: .35rem 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--borda);
}

@media (min-width: 760px) {
  .mundo { grid-template-columns: 12rem 1fr; }
}

.mundo-codigo {
  margin: 0;
  color: var(--cinetico);
  font-family: var(--fonte-registro);
  font-size: .82rem;
  letter-spacing: .08em;
}

.mundo-apelido {
  display: block;
  margin-top: .15rem;
  color: var(--texto);
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.mundo-corpo p { margin: 0 0 .5rem; color: var(--texto-suave); font-size: .95rem; }
.mundo-corpo p:last-child { margin-bottom: 0; }

.mundo-ficha {
  margin: .6rem 0 0;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mundo-vago { opacity: .62; }

/* ── O ROSTO DA CORPORAÇÃO ────────────────────────────────────────────────
   Substituiu, aqui e na entrada, o render de silhueta do projétil.

   A silhueta é uma regra de leitura de COMBATE — existe para reconhecer o
   fabricante no meio da briga. Fora dali era um objeto cinza sem textura
   ocupando o lugar mais nobre da página, e não dizia nada sobre quem a
   empresa é.

   O rosto diz. E o rosto é de alguém do elenco jogável, não um mascote: é
   gente que o jogador pode contratar, mandar descer e perder. */
.corp-rosto {
  margin: 0 0 2.5rem;
  padding: 1.4rem;
  display: grid;
  gap: 1.2rem;
  align-items: start;
  border: 1px solid var(--borda);
  background: var(--painel);
}

@media (min-width: 620px) {
  .corp-rosto { grid-template-columns: 132px 1fr; }
}

.corp-rosto img {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--borda-ativa);
}

.corp-rosto figcaption { min-width: 0; }

/* A fala é o que gruda, então recebe o tamanho de citação e não de legenda. */
.corp-rosto blockquote {
  margin: 0 0 .9rem;
  color: var(--texto);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.corp-rosto blockquote::before { content: "“"; }
.corp-rosto blockquote::after  { content: "”"; }

.corp-rosto-nome {
  margin: 0 0 .35rem;
  color: var(--texto);
  font-family: var(--fonte-display);
  font-synthesis-weight: none;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.corp-rosto-nome span {
  display: block;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-size: .72rem;
  letter-spacing: .07em;
}

.corp-rosto-nota {
  margin: 0;
  color: var(--texto-fraco);
  font-size: .82rem;
}

/* Na entrada, a prévia das cinco passa a mostrar rosto. Recorte quadrado e
   igual para as cinco: altura desigual leria como hierarquia, e não há. */
.corp-previa img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* ── SELETOR DE IDIOMA ────────────────────────────────────────────────────
   Fica no cabeçalho, ao lado da navegação. Discreto de propósito: quem já
   está no idioma certo não precisa dele, e ele não pode competir com o
   caminho principal.

   O rótulo é escrito NO idioma de destino — "English", nunca "Inglês". Quem
   procura a versão inglesa está lendo em inglês; um seletor que dissesse
   "Inglês" exigiria entender português para escapar do português. */
.idiomas {
  display: flex;
  gap: .4rem;
  align-items: center;
}

.idioma {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: .4rem .7rem;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .7rem;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.idioma:hover {
  border-color: var(--borda-ativa);
  color: var(--texto);
}

/* No celular o cabeçalho já está apertado entre marca, menu e chamada.
   O idioma some do topo e reaparece no rodapé, que é onde se procura. */
@media (max-width: 720px) {
  .topo .idiomas { display: none; }
}

/* ── ARQUIVO CONFIDENCIAL ─────────────────────────────────────────────────
   Fichas vazadas. O visual é de documento fotocopiado: monoespaçado no
   cabeçalho, medida estreita no corpo, e nada da tipografia de display que o
   resto do site usa — cartaz e papel não podem parecer a mesma coisa. */

.aviso-tarja {
  max-width: var(--medida);
  margin: 1.5rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--borda-ativa);
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .8rem;
  line-height: 1.6;
}

.acervo {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.ficha {
  max-width: 78ch;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--borda);
  background: var(--painel);
}

.ficha-topo {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ficha-codigo { color: var(--cinetico); }

/* O título da ficha NÃO usa a fonte de display. Documento interno não tem
   direção de arte; foi datilografado por alguém que não estava pensando em
   quem ia ler. */
.ficha h2 {
  margin: 0 0 .4rem;
  font-family: var(--fonte-corpo);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-transform: none;
}

.ficha-origem {
  margin: 0 0 1.4rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .74rem;
}

.ficha-figura { margin: 0 0 1.4rem; }

.ficha-figura img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Dessaturado: é anexo de relatório, não peça de divulgação. */
  filter: saturate(.55) contrast(1.06);
}

.ficha-figura figcaption {
  margin-top: .5rem;
  color: var(--texto-fraco);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .72rem;
}

.ficha-corpo p { color: var(--texto-suave); font-size: .97rem; }
.ficha-corpo p:last-child { margin-bottom: 0; }
.ficha-corpo .fala { margin: 1.6rem 0; }

/* A TARJA.
   Barras de larguras irregulares, no tom do papel. Irregular de propósito:
   largura uniforme lê como componente de interface, e não como coisa que foi
   apagada de um documento.

   Não há texto por baixo. Ver a nota em gerador_site/confidencial.py — o que
   falta, falta, inclusive no código-fonte. */
.tarja {
  display: flex;
  flex-direction: column;
  gap: .38rem;
  margin: 1.2rem 0;
}

.tarja-linha {
  height: .95rem;
  background: var(--painel-claro);
  border-left: 2px solid var(--borda-ativa);
}

@media (min-width: 720px) {
  .ficha-topo { font-size: .74rem; }
}


/* ── A MÃO NO DOCUMENTO ────────────────────────────────────────────────────
   O que separava esta seção de um painel de administração era não haver
   ninguém nela. Tarja é a instituição escondendo; RISCO é uma pessoa
   discordando por cima do que a instituição escreveu — e é o risco que traz
   drama, porque deixa ler as duas versões.

   O traço é geometria declarada, não imitação de rabisco: uma curva com dois
   pontos de controle, repetida em duas passadas ligeiramente fora de registro,
   como lápis que voltou por cima. Fica em ::after para nunca virar conteúdo. */

:root {
  --oxido: #e2705a;        /* claro o bastante para 4.5:1 sobre o painel */
  --oxido-fraco: #a84a33;
}

.riscado {
  position: relative;
  max-width: 62ch;
  margin: 1.1rem 0;
  padding-left: 1.1rem;
  color: var(--texto-fraco);
}

.riscado s { text-decoration: none; }

.riscado::before {
  content: "";
  position: absolute;
  top: .35em;
  bottom: .35em;
  left: 0;
  width: 2px;
  background: var(--oxido-fraco);
}

.riscado::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 1.1rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 90 7, 150 17, 220 10 S 340 15, 397 9' fill='none' stroke='%23e2705a' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 11 C 100 16, 170 8, 240 14 S 350 9, 394 13' fill='none' stroke='%23e2705a' stroke-width='1.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E")
    no-repeat left center / 100% 100%;
  pointer-events: none;
}

/* O CARIMBO.
   Girado porque carimbo à mão nunca sai reto, e o desalinho é justamente o que
   diz que houve mão. Fica atrás do texto em opacidade, como tinta que secou
   sobre o papel em vez de etiqueta colada em cima. */
.carimbo {
  margin: 1.4rem 0;
}

.carimbo span {
  display: inline-block;
  padding: .3rem .9rem;
  transform: rotate(-3.5deg);
  border: 2px solid var(--oxido);
  color: var(--oxido);
  font-family: var(--fonte-registro);
  font-synthesis-weight: none;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ── O MENU VIRA CHAPA ─────────────────────────────────────────────────────
   Eram links de texto com uma "/" depois: nada dizia que aquilo se clica. Cada
   item passa a ser uma placa com o mesmo canto chanfrado do botão da lista de
   espera, que já era o motivo industrial do site — o menu deixa de destoar da
   única peça que tinha caráter. */
@media (min-width: 1024px) {
  .navegacao-desktop a {
    min-height: 40px;
    padding: .45rem .85rem;
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    font-family: var(--fonte-registro);
    font-synthesis-weight: none;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .07em;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
  }

  /* A "/" era o único sinal de que ali havia navegação. Com a chapa, ela vira
     ruído dentro da placa. */
  .navegacao-desktop a::after { content: none; }

  .navegacao-desktop a:hover {
    border-color: var(--borda-ativa);
    background: var(--painel-alto);
    color: var(--texto);
  }

  .navegacao-desktop a[aria-current="page"] {
    border-color: var(--cinetico);
    background: var(--cinetico-leito);
    color: var(--cinetico-forte);
  }
}


/* ── MOVIMENTO ─────────────────────────────────────────────────────────────
   A tese está em js/movimento.js. Aqui só o material.

   O estado escondido depende de `.js-movimento`, que o script põe no <html>
   depois de confirmar que há observador e que ninguém pediu movimento
   reduzido. Script quebrado, navegador antigo ou preferência de calma: nada
   disso esconde nada, porque a regra nunca chega a valer. */

:root {
  --ease-saida: cubic-bezier(.22, 1, .36, 1);
}

.js-movimento [data-revelar] {
  opacity: 0;
  transform: translate3d(var(--rev-x, 0), var(--rev-y, 1rem), 0) scale(var(--rev-escala, 1));
  filter: blur(var(--rev-desfoque, 0px));
}

.js-movimento [data-revelar].revelado {
  transition:
    opacity 560ms cubic-bezier(.16, 1, .3, 1),
    filter 640ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.22, 1, .36, 1);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* O TRAÇO SE DESENHA.
   `clip-path` corta o desenho pela direita e abre para a esquerda: é lápis
   sendo arrastado, e não uma linha aparecendo por opacidade. Duração alta de
   propósito — riscar um documento é um gesto lento, e a pressa aqui leria
   como animação de interface. */
/* `background-size` e não `clip-path`: o inset inicial tem quatro componentes
   e o final serializa para um só, e o navegador não interpola entre contagens
   diferentes — a transição simplesmente não saía do lugar. A largura do fundo
   interpola sem ambiguidade e é o material mais direto para traço puxado. */
.js-movimento .riscado::after {
  background-size: 0% 100%;
}

.js-movimento .riscado.marcado::after {
  background-size: 100% 100%;
  transition: background-size 620ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--atraso, 0ms);
}

/* O CARIMBO DESCE.
   Chega grande e desfocado, como coisa que vem de cima em direção ao papel, e
   assenta. A escala inicial acima de 1 é o que faz parecer distância, e não
   um elemento crescendo. */
.js-movimento .carimbo span {
  opacity: 0;
  transform: rotate(-3.5deg) scale(1.5);
  filter: blur(3px);
}

.js-movimento .carimbo span.marcado {
  transition:
    opacity 220ms cubic-bezier(.16, 1, .3, 1),
    transform 380ms cubic-bezier(.2, .9, .3, 1.08),
    filter 300ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--atraso, 0ms);
  opacity: 1;
  transform: rotate(-3.5deg) scale(1);
  filter: blur(0);
}

/* A TARJA VARRE.
   Rápida e reta, sem curva de chegada suave: a barra não "assenta", ela é
   passada por cima. É a instituição, e por isso é o único gesto da página
   sem nenhuma delicadeza. */
.js-movimento .tarja-linha {
  transform: scaleX(0);
  transform-origin: left center;
}

.js-movimento .tarja-linha.marcado {
  transform: scaleX(1);
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
  transition-delay: var(--atraso, 0ms);
}

/* ── ESTADOS DE PONTEIRO ───────────────────────────────────────────────────
   Só onde há ação. Imagem que reage ao ponteiro sem ser clicável é promessa
   falsa, então as figuras das fichas ficam de fora. */

.ficha-figura img {
  transition: filter 520ms cubic-bezier(.16, 1, .3, 1);
}

.ficha:hover .ficha-figura img,
.ficha:focus-within .ficha-figura img {
  filter: saturate(.78) contrast(1.06);
}

.placa,
.corp-rosto img,
.elenco-foto img {
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1), filter 420ms cubic-bezier(.16, 1, .3, 1);
}

a:hover .placa,
a:hover .corp-rosto img,
a:hover .elenco-foto img,
a:focus-visible .placa,
a:focus-visible .elenco-foto img {
  transform: scale(1.03);
  filter: saturate(1.08);
}

.botao {
  transition: background-color 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1),
              color 180ms cubic-bezier(.16, 1, .3, 1), transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

/* Quem pediu calma recebe o documento já censurado, sem a encenação. O script
   nem chega a rodar, mas a regra fica como contrato explícito. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}