/*
 * Skald — site.
 *
 * Mesma linguagem do app, e isso não é economia de esforço: quem instala o
 * programa depois de ver o site precisa reconhecer o mesmo produto. Os tokens
 * são os mesmos de `src/renderer/styles.css`.
 *
 * A assinatura visual daqui é o ENTALHE: superfície de basalto com um sulco de
 * luz em cima e sombra embaixo, em vez de sombra projetada. Canto reto, sem
 * gradiente de arco-íris, sem cartão flutuante. É o que impede a página de cair
 * na estética de template — e a regra do projeto é explícita: não pode parecer
 * feito por IA.
 */

/*
 * ═══ A FONTE DO NOME ═══
 *
 * Viking-Normal, de Mike Allard / DeNada Industries.
 *
 * **ATENÇÃO À LICENÇA.** Ela é SHAREWARE, não livre. O readme que veio junto
 * (`fontes/LICENCA-viking.txt`, mantido aqui de propósito, porque o autor exige
 * que ele acompanhe o arquivo) pede pagamento por uso e conversa direta para
 * uso comercial ou em mais de cinco máquinas. Publicar num site é distribuir
 * para todo visitante, e o nosso uso é comercial: os dois casos.
 *
 * Está em cartão no quadro, junto de INPI e termos. Não subir para produção
 * antes de resolver — e trocar por outra é editar só este bloco.
 *
 * Usada SÓ no nome da marca. É um display de traço grosso, dos anos 90: em
 * texto corrido seria ilegível, e o corpo continua em IBM Plex.
 */
/*
 * O ARQUIVO ORIGINAL NÃO CARREGAVA. O navegador recusava com
 * `OTS parsing error: overlapping tables` — defeito do próprio arquivo, que
 * nasceu de uma conversão dos anos 90 ("Converted from C:\WINDOWS\VIKINGN.TF1
 * by ALLTYPE") e gravou tabelas sobrepostas. O sanitizador do Chrome recusa, e
 * a fonte caía calada na serifa de reserva.
 *
 * Reconstruída com fonttools: reabrir e regravar refaz o diretório de tabelas
 * do zero. O WOFF2 saiu com 20,7 KB, um quarto do TTF — e o TTF fica como
 * reserva para navegador que não fale WOFF2.
 */
@font-face {
  font-family: 'Viking Skald';
  src: url('fontes/viking-normal.woff2?v=2') format('woff2'),
    url('fontes/viking-limpa.ttf?v=2') format('truetype');
  font-weight: 400;
  font-style: normal;
  /* `swap`: o nome aparece na hora com a serifa de reserva e troca quando a
     fonte chega. Bloquear texto por causa de fonte é atraso que ninguém pediu. */
  font-display: swap;
}

:root {
  --bg: #05070a;
  --bg-1: #090d12;
  --bg-2: #0e141b;
  --bg-elev: #141c25;
  --bg-hover: #1b242f;

  --carve: inset 0 1px 0 rgba(0, 0, 0, 0.62), inset 0 -1px 0 rgba(255, 255, 255, 0.045);
  --carve-up: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -1px 0 rgba(0, 0, 0, 0.55);

  --line: #1e2833;
  --line-2: #2e3b48;

  --ink: #e6edf2;
  --ink-2: #b4c2cd;
  --ink-3: #7c8b98;
  --ink-4: #55636f;
  --ink-5: #3a4650;

  --gelo: #6fc3e0;
  --gelo-dim: #2e7290;
  --gelo-ink: #06171f;
  --sangue: #a83232;
  --aurora: #4fbf95;
  --prata: #c3ccd6;

  --thrall: #6e7c88;
  --huskarl: #6fc3e0;
  --jarl: #a83232;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  --t: 140ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --losango: repeating-linear-gradient(45deg, transparent 0 9px, var(--line) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 9px, var(--line) 9px 10px);

  --largura: 1080px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--gelo-dim);
  color: var(--ink);
}

.env {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─────────────────────────────────────────────────────────────────────
   ABAS — filtros de lista.

   Existiam no HTML do painel e NÃO existiam aqui: o navegador desenhava
   o botão cru, branco, no meio do basalto. O dono viu em produção.
   ───────────────────────────────────────────────────────────────────── */

.abas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.aba {
  appearance: none;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  background: transparent;
  box-shadow: var(--carve);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

.aba:hover {
  color: var(--ink);
  background: var(--bg-hover);
}

.aba[aria-selected='true'] {
  background: var(--gelo);
  border-color: var(--gelo-dim);
  color: var(--gelo-ink);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   TABELA — a lista que os donos administram.

   Cartão é bonito para três itens e vira rolagem infinita com cem. Quem
   opera precisa varrer a coluna com o olho, comparar e ordenar — e isso
   é tabela, com cabeçalho fixo de significado e número alinhado.
   ───────────────────────────────────────────────────────────────────── */

.tabela-caixa {
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow-x: auto;
}

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela th {
  text-align: left;
  padding: 0;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  background: var(--bg-2);
}

/* O cabeçalho É o controle de ordenação: clicar na coluna ordena por ela. */
.tabela th button {
  appearance: none;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tabela th button:hover {
  color: var(--ink-2);
}

.tabela th[aria-sort] button {
  color: var(--gelo);
}

.tabela td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}

.tabela tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover td {
  background: var(--bg-hover);
}

.tabela .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabela .nome {
  color: var(--ink);
  font-weight: 600;
}

.tabela .email {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* Estado em forma, não só em palavra: dá para varrer a coluna sem ler. */
.selo-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.selo-estado::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ink-4);
}

.selo-estado[data-estado='ativo'] {
  color: var(--aurora);
  border-color: color-mix(in srgb, var(--aurora) 40%, transparent);
}
.selo-estado[data-estado='ativo']::before {
  background: var(--aurora);
}

.selo-estado[data-estado='pendente'] {
  color: var(--gelo);
  border-color: var(--gelo-dim);
}
.selo-estado[data-estado='pendente']::before {
  background: var(--gelo);
}

.selo-estado[data-estado='suspenso'] {
  color: var(--sangue);
  border-color: color-mix(in srgb, var(--sangue) 45%, transparent);
}
.selo-estado[data-estado='suspenso']::before {
  background: var(--sangue);
}

/* Ações da linha: pequenas, na horizontal, sem empurrar a tabela. */
.acoes-linha {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.acoes-linha .botao,
.acoes-linha .botao-fantasma,
.acoes-linha select,
.acoes-linha input {
  height: 30px;
  font-size: 12px;
  padding: 0 10px;
}

.acoes-linha select,
.acoes-linha input {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-2);
  font-family: var(--sans);
}

.acoes-linha input {
  width: 92px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* A busca, acima da tabela. */
.busca {
  height: 34px;
  min-width: 240px;
  flex: 1;
  padding: 0 12px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: var(--carve);
  font-family: var(--sans);
  font-size: 13px;
}

.busca::placeholder {
  color: var(--ink-5);
}

.barra-lista {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ─────────────────────────────────────────────────────────────────────
   PÁGINAS DE FOCO — conta, recuperar, redefinir.

   Aqui a página tem UMA tarefa, e o contêiner largo das páginas de
   conteúdo deixava tudo encostado à esquerda numa tela de 1900px, com
   metade do monitor vazia (o dono viu isso na primeira visita real).
   Coluna estreita, centrada nos dois eixos: o olho cai no formulário
   sem procurar. O texto dos campos segue alinhado à esquerda, que é
   como se lê um formulário.
   ───────────────────────────────────────────────────────────────────── */

.foco {
  min-height: calc(100vh - 58px - 110px); /* coroa + rodapé */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.foco .env {
  max-width: 520px;
}

.foco .hero-texto {
  max-width: none;
  text-align: center;
}

.foco .plano {
  margin-left: auto;
  margin-right: auto;
}

.foco .hero-acoes {
  justify-content: center;
}

.foco .hero-nota {
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
   A PORTA — tela única, sem rolagem

   Tudo aqui existe para não competir com as partículas. Sem barra, sem menu,
   sem seção. O que sobra é a marca se formando, o nome, uma frase e a entrada.

   A tentação seria encher: mais um argumento, mais um número, um depoimento.
   É exatamente essa tentação que produz a tela genérica.
   ───────────────────────────────────────────────────────────────────── */

.porta {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.porta #audiencia {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  /*
   * O ARRASTO É A MECÂNICA, NÃO UMA ROLAGEM.
   *
   * No telefone o dedo que atravessa a tela é o gesto que acende os pontos. Sem
   * esta linha o navegador entende rolagem, engole o gesto e a porta nunca abre
   * — e a página não tem para onde rolar, então nem o consolo de mexer sobra.
   */
  touch-action: none;
}

.porta-conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  /*
   * O conteúdo NÃO intercepta o ponteiro.
   *
   * A pessoa precisa conseguir acender pontos que estão atrás do texto — se o
   * texto bloqueasse, haveria um buraco morto bem no meio da tela e a mecânica
   * pareceria quebrada. Só o que é clicável reativa o ponteiro.
   */
  pointer-events: none;
}

.porta-conteudo a {
  pointer-events: auto;
}

/*
 * OS DOIS ESTADOS.
 *
 * Ocupam a MESMA célula da grade, um por cima do outro. Assim a troca não
 * empurra nada: um esmaece e sobe, o outro aparece no lugar. Layout que salta
 * na transição é o que faz um site parecer montado às pressas.
 */
.porta-antes,
.porta-depois {
  grid-area: 1 / 1;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease),
    filter 620ms var(--ease);
}

/* ── antes: a instrução e a contagem ─────────────────────────────── */

.porta-antes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.porta-instrucao {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  /* Respiração lenta: o convite pulsa de leve para ser notado sem gritar. */
  animation: respira 3.4s ease-in-out infinite;
}

@keyframes respira {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.contagem {
  font-family: var(--mono);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px var(--bg);
  transition: color var(--t) var(--ease);
}

/* ── depois: o nome e a entrada ──────────────────────────────────── */

.porta-depois {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  /* Enquanto fechada, some do fluxo de foco: leitor de tela e Tab não devem
     alcançar um botão que ainda não existe para quem enxerga. */
  visibility: hidden;
}

.porta.cheio .porta-antes {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(3px);
}

.porta.cheio .porta-depois {
  opacity: 1;
  transform: none;
  visibility: visible;
  /* Entra depois de o "antes" ter saído: as duas coisas nunca se sobrepõem
     legíveis ao mesmo tempo. */
  transition-delay: 240ms;
}

.porta-nome {
  margin: 0;
  /*
   * A Viking manda; a Fraunces é a reserva enquanto ela carrega, e o que resta
   * se a fonte for trocada por licença.
   *
   * Ela já é um display de traço largo e desenho fechado: entesourar com
   * `letter-spacing` alto, como a Fraunces pedia, sujaria o desenho. Espaço
   * curto e caixa alta nativa.
   */
  font-family: 'Viking Skald', var(--display);
  font-size: clamp(52px, 10vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  color: var(--ink);
  text-shadow: 0 0 40px var(--bg), 0 0 90px var(--bg);
}

.porta-linha {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  text-shadow: 0 1px 12px var(--bg), 0 0 28px var(--bg);
}

/*
 * ═══ A ENTRADA — CAVADA, NÃO COLADA ═══
 *
 * Aqui havia um botão sólido, ciano, retangular. Ele funcionava e estava
 * errado: a página inteira é entalhe — tudo recuado, fio de um pixel, nada
 * saltando — e um bloco cheio de cor lê como adesivo colado por cima. Era o
 * elemento mais genérico que restava na tela.
 *
 * Agora é uma fenda na pedra: fundo vazado, fio fino, sulco de sombra por
 * dentro. Ao passar o mouse ela não "acende" — ela AFUNDA um pouco mais e o
 * gelo escorre para dentro, que é o gesto do resto do produto.
 *
 * O losango à direita substitui a seta. Seta é o desenho mais repetido da
 * internet; o losango é a nossa marca, e ele desliza no hover para dar a
 * direção sem dizer "clique aqui".
 */
.entrada {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 26px;
  border: 1px solid var(--line-2);
  background: transparent;
  box-shadow: var(--carve);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
    background var(--t) var(--ease);
}

.entrada:hover,
.entrada:focus-visible {
  color: var(--ink);
  border-color: var(--gelo-dim);
  background: color-mix(in srgb, var(--gelo) 7%, transparent);
}

.entrada:focus-visible {
  outline: 1px solid var(--gelo);
  outline-offset: 3px;
}

.entrada:active {
  /* Afunda de verdade: o sulco inverte e o conteúdo desce um pixel. */
  box-shadow: var(--carve-up);
  transform: translateY(1px);
}

/* O losango, no lugar da seta. */
.entrada::after {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.entrada:hover::after,
.entrada:focus-visible::after {
  transform: rotate(45deg) translate(3px, -3px);
  opacity: 1;
}

.porta-rodape {
  position: relative;
  z-index: 2;
  padding: 20px;
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-5);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────
   COROA — a barra de cima, entalhada como no app
   ───────────────────────────────────────────────────────────────────── */

.coroa {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--carve-up);
}

.coroa .env {
  display: flex;
  align-items: center;
  gap: 18px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.marca-simbolo {
  width: 26px;
  height: 26px;
  background: currentColor;
  color: var(--gelo);
  -webkit-mask: url('marca.svg') center / contain no-repeat;
  mask: url('marca.svg') center / contain no-repeat;
  flex: none;
}

.marca-nome {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.coroa-espaco {
  flex: 1;
}

.coroa nav {
  display: flex;
  gap: 22px;
}

.coroa nav a {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--t) var(--ease);
}

.coroa nav a:hover {
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────
   BOTÕES — retos, entalhados, sem raio
   ───────────────────────────────────────────────────────────────────── */

/* O fantasma recebe a MESMA base: sozinho num <button>, ele herdava o
   visual cru do navegador — só as cores mudavam, e o entalhe sumia. */
.botao,
.botao-fantasma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--gelo-dim);
  background: var(--gelo);
  color: var(--gelo-ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--carve-up);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}

.botao:hover {
  background: #86d0e8;
}

.botao:active,
.botao-fantasma:active {
  transform: translateY(1px);
}

.botao-fantasma {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2);
  box-shadow: var(--carve);
}

.botao-fantasma:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────
   HERO — a audiência se juntando

   O canvas fica ATRÁS do texto e não recebe clique fora da própria área de
   interação. Efeito que atrapalha leitura é efeito que não deveria existir.
   ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/*
 * SEM trama de losango aqui, de propósito.
 *
 * Ela é o motivo do app e aparece no resto do site — mas no hero as partículas
 * já formam o mesmo losango entrelaçado. Os dois juntos viram ruído: dois
 * padrões diagonais disputando a mesma área, e a marca deixa de ser legível.
 *
 * No lugar, um clarão frio muito discreto atrás da marca, que dá profundidade
 * sem desenhar nada.
 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 46% 62% at 68% 48%,
    color-mix(in srgb, var(--gelo) 7%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

#audiencia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* O canvas recebe o ponteiro: a dispersão ao passar o mouse é o efeito. */
  cursor: crosshair;
}

.hero .env {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.hero .env a,
.hero .env button {
  pointer-events: auto;
}

.hero-texto {
  max-width: 560px;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--carve);
}

.selo .ponto {
  width: 6px;
  height: 6px;
  background: var(--aurora);
  flex: none;
}

h1 {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h1 em {
  font-style: normal;
  color: var(--gelo);
}

.hero-linha {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
}

.hero-acoes {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-nota {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}

/* ─────────────────────────────────────────────────────────────────────
   SEÇÕES
   ───────────────────────────────────────────────────────────────────── */

section {
  padding: 84px 0;
  border-bottom: 1px solid var(--line);
}

/*
 * A primeira seção de dentro. Carrega a trama de losango — aqui ela pode,
 * porque não há partículas competindo pelo mesmo motivo.
 */
.abertura {
  position: relative;
  padding: 92px 0 78px;
}

.abertura::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--losango);
  opacity: 0.4;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}

.abertura .env {
  position: relative;
}

.abertura h2 {
  font-size: clamp(30px, 4.2vw, 44px);
}

.rotulo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

h2 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

.sub {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--ink-3);
}

/* Números medidos. Mono, porque são dado e não promessa. */
.numeros {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.numero {
  background: var(--bg-1);
  padding: 22px 20px;
  box-shadow: var(--carve);
}

.numero b {
  display: block;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  color: var(--gelo);
  letter-spacing: -0.02em;
}

.numero span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-3);
}

.passos {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.passo {
  padding: 24px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--carve);
}

.passo .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gelo-dim);
  letter-spacing: 0.16em;
}

.passo h3 {
  margin: 10px 0 8px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

.passo p {
  font-size: 14px;
  color: var(--ink-3);
}

/* Planos: filete colorido à esquerda, como o selo de plano do app. */
.planos {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.plano {
  position: relative;
  padding: 26px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  box-shadow: var(--carve);
}

.plano::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cor, var(--thrall));
}

.plano[data-plano='huskarl'] {
  --cor: var(--huskarl);
}

.plano[data-plano='jarl'] {
  --cor: var(--jarl);
}

.plano h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.plano .preco {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-4);
}

.plano ul {
  margin-top: 16px;
  list-style: none;
  display: grid;
  gap: 8px;
}

.plano li {
  font-size: 14px;
  color: var(--ink-3);
  padding-left: 16px;
  position: relative;
}

.plano li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--cor, var(--thrall));
  transform: rotate(45deg);
}

/* ─────────────────────────────────────────────────────────────────────
   QUILHA
   ───────────────────────────────────────────────────────────────────── */

footer {
  padding: 30px 0 40px;
  color: var(--ink-5);
  font-family: var(--mono);
  font-size: 11px;
}

footer .env {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

footer a {
  color: var(--ink-4);
  text-decoration: none;
}

footer a:hover {
  color: var(--ink-2);
}

/* ─────────────────────────────────────────────────────────────────────
   MOVIMENTO — quem pediu menos, recebe menos
   ───────────────────────────────────────────────────────────────────── */

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

  /*
   * A TROCA DA PORTA CONTINUA SENDO UMA TROCA.
   *
   * A regra acima corta toda transição, o que é certo para o que se desloca e
   * errado para o que só apaga e acende. Sem esta exceção o instante em que o
   * Salão enche vira corte seco: o convite some e a entrada aparece no mesmo
   * quadro, e a pessoa não vê que algo aconteceu — vê a tela piscar.
   *
   * Aqui só a opacidade transita, e o `!important` é obrigatório porque é
   * `!important` que precisa ser vencido. Nada se move: deslocamento e desfoque
   * continuam instantâneos, e a essa altura já estão invisíveis.
   */
  .porta-antes,
  .porta-depois {
    transition-property: opacity !important;
    transition-duration: 420ms !important;
  }
}

@media (max-width: 720px) {
  .coroa nav {
    display: none;
  }
  section {
    padding: 60px 0;
  }
  .hero {
    min-height: 640px;
  }
}