/* NASH — /cat. Só o que o kit não cobre: a casca dos capítulos, o palco do
   campo, o medidor de carga, a linha do tempo e o fallback estático. Botão,
   aba, cartão, placa, tipo e movimento vêm de nash-vidro.css e
   nash-componentes.css; nenhuma cor literal nasce aqui.

   Os nomes locais não reivindicam o prefixo nash-: nada nesta página é
   componente aprovado, e reivindicar o prefixo é publicar no design system.
   O medidor, a linha do tempo e o palco voltam como lista nomeada para
   decisão de Produto. */

/* ---------- o palco: um contexto WebGL para a página inteira ---------- */
.palco-fixo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.palco-canvas,
.palco-olhos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.palco-olhos {
  overflow: visible;
}

/* O gato sem WebGL: a mesma silhueta, parada, desenhada pelo JS como <path>.
   Não é um fallback pregado depois — é a mesma arquitetura sem a camada de
   cima, porque todo controle da página sempre foi DOM. */
/* 3:1 contra o preto (WCAG 1.4.11). A 12% media 1,27:1 e o bicho sumia. */
.palco-estatico path {
  fill: var(--nash-palette-white-30);
}

main {
  position: relative;
  z-index: 1;
}

/* ---------- véu de legibilidade ----------
   Texto sobre campo vivo precisa disto: as estrelas caem dentro dos contra-
   formas das letras e o pior pixel atrás da linha sobe até estragar a leitura.
   Receita copiada verbatim de site/css/site.css:309-330, medida em 2026-09-08
   (pior pixel de rgb(166) para rgb(31); branco a 55% volta a 6:1). Tem nome de
   kit e não mora no kit — Design já pediu a promoção para nash-vidro.css, e a
   correção se faz lá, não nesta cópia. */
.veu {
  position: relative;
  isolation: isolate;
}

.veu::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--nash-space-4)) calc(-1 * var(--nash-space-6));
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.86) 42%,
    rgba(0, 0, 0, 0.66) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ---------- topo ---------- */
.topo {
  position: fixed;
  top: var(--nash-space-3);
  left: var(--nash-space-3);
  right: var(--nash-space-3);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nash-space-3);
}

.marca-n {
  width: 22px;
  height: auto;
  fill: var(--text-forte);
  stroke: var(--text-forte);
  stroke-width: 4;
  stroke-linejoin: round;
}

.marca-n--pe {
  width: 14px;
  display: inline-block;
  vertical-align: -1px;
  margin-right: var(--nash-space-1);
}

/* ---------- a casca dos capítulos ---------- */
.dobra {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
}

.dobra-miolo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nash-space-4);
  padding-block: var(--nash-space-8);
}

/* O teto vai nos FILHOS, não na faixa: a faixa é centrada por
   margin-inline:auto, então limitá-la joga a coluna inteira para o meio da
   tela — em cima do gato. O que o herói precisava era só parar antes da
   orelha, onde o "e" de "consegue" encostava com 2px de folga. */
.dobra-miolo > * {
  max-width: min(100%, 50ch);
}

.capitulo {
  padding-block: var(--nash-space-9);
}

.capitulo--fecho {
  padding-bottom: var(--nash-space-7);
}

/* A coluna de leitura fica à esquerda, não centrada: o gato mora à direita em
   todo capítulo interno, e centrar o texto o jogaria em cima dele. */
.capitulo-cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
  margin-bottom: var(--nash-space-7);
}

.capitulo-cabeca.nash-measure {
  margin-inline: 0;
}

.capitulo-cabeca .nash-type-body {
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
  color: var(--text-mid);
}

.capitulo-cabeca .nash-type-body b {
  color: var(--text-forte);
  font-weight: 600;
}

.heroi-tese {
  font-size: var(--nash-type-size-9);
  max-width: 18ch;
}

.tese {
  font-size: var(--nash-type-size-7);
  max-width: 26ch;
}

.heroi-apoio {
  max-width: 52ch;
}

/* Marcador de capítulo: o par de olhos no lugar do ponto de aba do kit. É a
   única aparição recorrente do mascote fora do palco. */
.olhos-mini {
  display: inline-flex;
  gap: 3px;
  margin-right: var(--nash-space-1);
  vertical-align: 1px;
}

/* Deitado, na mesma razão do olho do palco (1,73:1). Em pé era a mesma forma
   girada um quarto de volta — e o marcador é justamente onde o leitor aprende
   a reconhecer o olho. */
.olhos-mini::before,
.olhos-mini::after {
  content: '';
  width: 9px;
  height: 5px;
  background: var(--text-forte);
  clip-path: polygon(0 50%, 28% 0, 72% 0, 100% 50%, 72% 100%, 28% 100%);
}

/* A linha de citação não é um rótulo: usa o papel de corpo em degrau menor.
   Antes herdava .nash-type-label e cancelava duas das três propriedades que
   definem aquele papel, e saía em --text-weak — medido em 2,53:1 sobre o
   cartão, reprovando WCAG 1.4.3 justamente na informação que sustenta a
   credibilidade da página. */
.fonte {
  font-size: var(--nash-type-size-2);
  color: var(--text-mid);
  margin-top: var(--nash-space-1);
}

/* ---------- medidor de carga ----------
   Não existe no kit: "Barra de progresso" está na lista de Pendentes do
   /design-system com quatro implementações não compartilhadas. Esta é a
   quinta, e nasce local de propósito. Cor da família de estado
   (--nash-color-signal-*), nunca do accent da marca. */
.medidor-caixa {
  margin: 0;
  width: 100%;
}

/* O trilho precisa ser visível mesmo vazio: ele é a escala, e sem escala o
   valor não significa nada. A 8% media 1,14:1 e lia como linha divisória. */
.medidor {
  position: relative;
  height: 4px;
  background: var(--nash-palette-white-30);
  border-radius: var(--nash-radius-pill);
  overflow: hidden;
}

.medidor-preenche {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--nash-color-signal-1), var(--nash-color-signal-mid) 62%, var(--nash-color-signal-2));
  will-change: transform;
}

.medidor-limiar {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 88%;
  width: 1px;
  background: var(--nash-palette-white-55);
}

.medidor-leitura {
  display: flex;
  justify-content: space-between;
  gap: var(--nash-space-2);
  margin-top: var(--nash-space-1);
}

.medidor-banda {
  color: var(--nash-color-signal-mid);
  text-transform: uppercase;
}

/* A dica ganha linha própria: dividindo a linha com os dois botões, com folgas
   iguais, ela lia como um terceiro botão desativado. */
.mao-controles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nash-space-2);
}

.mao-controles .dica {
  flex-basis: 100%;
  margin-top: var(--nash-space-1);
}

/* Ensina a interação central da página: sai de --text-weak (2,49:1) para o
   mesmo nível do corpo. */
.dica {
  color: var(--text-mid);
}

/* Enquanto a página se recusa a responder, ela diz por quê. */
[data-refratario='true'] .dica {
  color: var(--nash-color-signal-mid);
}

/* ---------- cena 2D da descarga ---------- */
/* O stroke vem da .nash-surface do kit (gradiente branco 15 › 6 › 2 › 0), não de
   uma borda chapada escrita aqui — o nome prometia vidro e entregava borda. */
.cena-vidro {
  position: relative;
  margin-bottom: var(--nash-space-7);
  border-radius: var(--nash-radius-3);
  overflow: hidden;
  aspect-ratio: 16 / 7;
}

.cena-canvas {
  width: 100%;
  height: 100%;
}

.cena-rotulos {
  position: absolute;
  inset: 0;
}

.cena-rot {
  position: absolute;
  color: var(--text-weak);
  white-space: nowrap;
}

.cena-rot--alvo { left: 6%; top: 50%; }
.cena-rot--vidro { left: 50%; top: 8%; transform: translateX(-50%); }
.cena-rot--voce { right: 6%; top: 50%; }

/* ---------- grades de fatos e sinais ---------- */
.fatos,
.sinais {
  margin-top: var(--nash-space-5);
}

.fatos .nash-card,
.sinais .nash-card {
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-1);
}

/* A citação assenta no pé do cartão: em cartões gêmeos lado a lado, linhas de
   base a 41px de diferença leem como descuido, não como ritmo. */
.fatos .fonte,
.sinais .fonte {
  margin-top: auto;
  padding-top: var(--nash-space-2);
}

.sinais .nash-type-body,
.fatos .nash-type-body {
  color: var(--text-mid);
  font-size: var(--nash-type-size-3);
}

.sinal-num {
  color: var(--text-weak);
  margin-right: var(--nash-space-1);
}

/* O sinal acende no DOM no mesmo instante em que acende no shader: quem usa
   leitor de tela recebe a lição inteira, não um resumo dela. */
.sinais [data-sinal][data-aceso='true'] .nash-type-label {
  color: var(--nash-color-signal-mid);
}

/* ---------- o número âncora ---------- */
.numerao {
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
  max-width: var(--nash-measure-width);
  padding-block: var(--nash-space-6);
  border-top: 1px solid var(--border-weak);
  border-bottom: 1px solid var(--border-weak);
}

.numerao-valor {
  display: flex;
  align-items: baseline;
  gap: var(--nash-space-2);
}

.numerao-valor .nash-fx-count-up,
#conta-acertos {
  font-size: var(--nash-type-size-9);
}

.numerao-de {
  font-size: var(--nash-type-size-5);
  color: var(--text-weak);
}

.numerao-texto {
  color: var(--text-mid);
}

.numerao-texto b {
  color: var(--text-forte);
  font-weight: 600;
}

/* ---------- linha do tempo ----------
   O controle é a peça Slider (css/nash-slider.css e js/nash-slider.js)
   desde 2026-09-29; a receita nativa que morava aqui (.linha-range) saiu
   inteira. Sobram a coluna e o trilho de marcas. */
.linha-tempo {
  max-width: var(--nash-measure-width);
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
  margin-bottom: var(--nash-space-7);
}

.linha-tempo .nash-slider {
  cursor: ew-resize;
}

/* Os rótulos ficam colados no trilho: a 78px de distância o eixo deixava de
   ler como um grupo, e o vão era onde a barra solta aparecia. */
.linha-trilho {
  position: relative;
  height: var(--nash-space-3);
  margin-top: calc(var(--nash-space-1) * -1);
}

/* A faixa viva mora DENTRO do trilho do slider, não flutuando abaixo dele —
   solta, lia como um retângulo branco sem função. */
.linha-viva {
  position: absolute;
  top: calc(var(--nash-space-3) * -1);
  left: 0;
  height: 4px;
  width: 8%;
  background: var(--text-forte);
  border-radius: var(--nash-radius-pill);
  pointer-events: none;
}

.linha-marca {
  position: absolute;
  top: 0;
  color: var(--text-mid);
}

.linha-marca--fim {
  transform: translateX(-100%);
}

.linha-leitura {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--nash-space-2);
}

.linha-leitura .nash-type-title {
  font-size: var(--nash-type-size-5);
}

/* ---------- reação calmo x bravo ---------- */
.reacao {
  margin-top: var(--nash-space-7);
  padding-top: var(--nash-space-5);
  border-top: 1px solid var(--border-weak);
  max-width: var(--nash-measure-width);
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
}

.reacao-botoes {
  display: flex;
  gap: var(--nash-space-2);
  flex-wrap: wrap;
}

.reacao-leitura:empty {
  display: none;
}

.reacao-leitura {
  color: var(--text-mid);
}

/* O tranco de um quadro na própria tipografia quando o leitor escolhe bravo:
   a página leva o susto junto com o gato. */
@keyframes tranco {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-3px); }
}

[data-reacao='bravo'] .capitulo-cabeca {
  animation: tranco var(--nash-motion-duration-micro) var(--nash-motion-ease-out);
}

.aviso,
.regra {
  max-width: var(--nash-measure-width);
  margin-top: var(--nash-space-5);
  color: var(--text-mid);
}

.aviso b,
.regra b {
  color: var(--text-forte);
  font-weight: 600;
}

/* ---------- teste de consentimento ---------- */
.teste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nash-space-4);
  padding: var(--nash-space-5) 0;
  border-top: 1px solid var(--border-weak);
  border-bottom: 1px solid var(--border-weak);
}

.teste-controles {
  display: flex;
  gap: var(--nash-space-2);
  flex-wrap: wrap;
}

.teste-estado {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.teste-leitura {
  font-size: var(--nash-type-size-5);
}

/* ---------- fecho ---------- */
.porta {
  max-width: var(--nash-measure-width);
  margin-bottom: var(--nash-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-1);
}

.porta .nash-type-body {
  color: var(--text-mid);
  font-size: var(--nash-type-size-3);
}

.piscada {
  max-width: var(--nash-measure-width);
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
  align-items: flex-start;
  margin-bottom: var(--nash-space-7);
}

.piscada .nash-type-body {
  color: var(--text-mid);
}

.piscada-leitura:empty {
  display: none;
}

.bolso {
  max-width: var(--nash-measure-width);
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
}

.bolso-lista {
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
}

.bolso-lista li {
  padding-left: var(--nash-space-3);
  position: relative;
  color: var(--text);
}

/* Marcador reto, na gramática de corte da marca — nunca bolinha. */
.bolso-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--text-weak);
}

.rodape {
  margin-top: var(--nash-space-9);
  padding-top: var(--nash-space-5);
  border-top: 1px solid var(--border-weak);
  display: flex;
  flex-direction: column;
  gap: var(--nash-space-2);
}

.fontes-lista {
  font-size: var(--nash-type-size-2);
  max-width: 80ch;
}

.rodape-marca {
  color: var(--text-weak);
  margin-top: var(--nash-space-2);
}

/* ---------- cortes ---------- */
@media (max-width: 900px) {
  .heroi-tese { font-size: var(--nash-type-size-7); }
  .tese { font-size: var(--nash-type-size-6); }
  .numerao-valor .nash-fx-count-up,
  #conta-acertos { font-size: var(--nash-type-size-7); }
  .fatos > *, .sinais > * { --nash-runtime-column-span: 6; }
  .capitulo { padding-block: var(--nash-space-8); }
}

@media (max-width: 720px) {
  .fatos > *, .sinais > * { --nash-runtime-column-span: 12; }
  .topo { top: var(--nash-space-2); left: var(--nash-space-2); right: var(--nash-space-2); }
  .cena-vidro { aspect-ratio: 4 / 3; }
  .heroi-tese { max-width: none; }
  /* O gato ocupa o alto da dobra; o texto ancora embaixo, por baixo dele. */
  .dobra { align-items: flex-end; }
  .dobra-miolo { padding-bottom: var(--nash-space-6); }
  .mao-controles { flex-direction: column; align-items: stretch; }
  .mao-controles .dica { text-align: center; }
}

/* Com movimento reduzido o campo é desenhado uma vez e fica parado; a máquina
   de carga continua funcionando e a saída vira discreta. O medidor ainda anda,
   porque valor que muda sem transição é valor que não se lê. */
@media (prefers-reduced-motion: reduce) {
  .medidor-preenche { transition: transform var(--nash-motion-duration-state) linear; }
  [data-reacao='bravo'] .capitulo-cabeca { animation: none; }
}