:root {
  /* ---------- Conceito A — O Véu (rodada B4) ---------- */
  --breu: #060409;
  --luar: #ece7d5;
  --nevoa: #a7aec4;
  --brasa: #d97b3f;
  --brasa-viva: #f09052;
  --musgo: #8a936c;

  /* ---------- Tokens legados (telas fora do escopo do redesign: ----------
     formulários, confirmação, resultado/carta, VIP — serão migrados na
     próxima rodada visual) */
  --roxo: #6b3ef2;
  --roxo-escuro: #2a1a4d;
  --roxo-noite: #150a26;
  --verde: #3ef21e;
  --laranja: #f26a1e;
  --laranja-escuro: #c14e12;
  --creme: #f2edd9;
  --night: #0a0612;
  --creme-05: rgba(242, 237, 217, 0.05);
  --creme-15: rgba(242, 237, 217, 0.15);
  --creme-18: rgba(242, 237, 217, 0.18);
  --creme-30: rgba(242, 237, 217, 0.3);
  --glow-laranja-50: rgba(242, 106, 30, 0.5);

  /* ---------- Tipografia ---------- */
  --font-display: "Cinzel", serif;
  --font-body: "EB Garamond", serif;
  --font-marca: "Bahiana", "Cinzel", serif; /* SÓ no wordmark ORÁCULO CLUBBER */
  --text-0-85: 0.85rem;
  --text-0-9: 0.9rem;
  --text-0-95: 0.95rem;
  --text-1: 1rem;
  --text-1-08: 1.08rem;

  /* ---------- Escala de espaçamento (legado) ---------- */
  --space-0-35: 0.35rem;
  --space-0-4: 0.4rem;
  --space-0-5: 0.5rem;
  --space-0-6: 0.6rem;
  --space-0-75: 0.75rem;
  --space-0-85: 0.85rem;
  --space-0-95: 0.95rem;
  --space-1: 1rem;
  --space-1-1: 1.1rem;
  --space-1-25: 1.25rem;
  --space-1-5: 1.5rem;
  --space-1-75: 1.75rem;
  --space-2: 2rem;

  /* ---------- Raios de borda (legado) ---------- */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-round: 50%;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--breu);
  color: var(--luar);
  font-family: var(--font-body);
  font-size: 1.05rem;
  overflow-x: hidden;
}

/* ============================================================
   Cenário — loop de vídeo em background
   Substitui o cenário em CSS do Conceito C: vídeo pronto (cabana na
   floresta enevoada, fumaça de chaminé, vaga-lumes), sem áudio, cobrindo
   o viewport inteiro atrás da coluna de leitura.
   ============================================================ */

.bg-video {
  position: fixed;
  /* Ancorado embaixo (não no topo): prende a BASE do vídeo — a base da cabana
     — na base da tela, então ela nunca sai da vista. Com height: 100lvh (maior
     que a área visível quando a barra do iOS está aberta), o que transborda pra
     fora da dobra é o TOPO (céu), não a base. Se fosse top: 0, a base cairia
     abaixo da dobra e sumia — era exatamente o corte que aparecia no iPhone. */
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  /* Altura travada na viewport GRANDE (barra do iOS recolhida). Como não
     depende da barra dinâmica, recolher/mostrar a barra durante o scroll não
     redimensiona o vídeo — elimina o "salto"/zoom abrupto no iOS. O height:100%
     antigo se prendia à viewport dinâmica e causava exatamente esse estalo.
     100vh é o fallback pra navegadores sem unidades de viewport grandes. */
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
  /* em telas mais largas (desktop), onde o corte passa a ser vertical, garante
     que ele aconteça no topo (céu / topo das árvores), preservando a base. */
  object-position: center bottom;
  pointer-events: none;
}

/* ---------- Escuridão local da coluna de leitura ---------- */

.scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* mesma viewport travada do .bg-video — acompanha o vídeo sem saltar */
  height: 100vh;
  height: 100lvh;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 85% at 27% 52%, rgba(13, 8, 24, 0.82) 0%, rgba(13, 8, 24, 0.52) 60%, rgba(13, 8, 24, 0) 100%),
    linear-gradient(180deg, rgba(13, 8, 24, 0.48) 0%, rgba(13, 8, 24, 0) 26%),
    linear-gradient(0deg, rgba(13, 8, 24, 0.36) 0%, rgba(13, 8, 24, 0) 26%);
}

/* Scrim mais forte na tela de resultado: aqui o vídeo é só atmosfera (sem
   texto grande disputando espaço com ele como na capa), então escurece mais
   e sem poupar uma "coluna de leitura" — o card body.tela-resultado é
   ligado em js/app.js só na entrada em renderResult. */
body.tela-resultado .scrim {
  background:
    radial-gradient(ellipse 140% 100% at 50% 38%, rgba(6, 4, 9, 0.62) 0%, rgba(6, 4, 9, 0.86) 70%, rgba(6, 4, 9, 0.94) 100%),
    linear-gradient(180deg, rgba(6, 4, 9, 0.55) 0%, rgba(6, 4, 9, 0.22) 22%, rgba(6, 4, 9, 0.22) 78%, rgba(6, 4, 9, 0.6) 100%);
}

/* alvos inertes pro GSAP de js/app.js (ver comentário no HTML) */
.portal__halo,
.portal__gleam {
  display: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Véu de transição entre telas ---------- */

.veu-transicao {
  position: fixed;
  inset: -8%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 68% 58% at 30% 58%, rgba(179, 160, 216, 0.5) 0%, rgba(179, 160, 216, 0) 70%),
    radial-gradient(ellipse 56% 48% at 72% 38%, rgba(140, 112, 176, 0.34) 0%, rgba(140, 112, 176, 0) 70%);
  filter: blur(28px);
  will-change: opacity;
}

/* ============================================================
   Coluna editorial — sem caixa central
   ============================================================ */

.app {
  position: relative;
  z-index: 5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 7vh 8vw 9vh 9vw;
  max-width: 760px;
}

/* A coluna editorial das outras telas fica encostada à esquerda de
   propósito (ver comentário acima) — mas a carta de resultado deve
   dominar centralizada na tela, não só dentro da coluna. Em vez de só
   centralizar a carta (o que a desalinharia do cabeçalho acima dela),
   centraliza o .app inteiro nesta tela; em viewports mais estreitos que
   760px + padding isso não muda nada visualmente. */
body.tela-resultado .app {
  margin-left: auto;
  margin-right: auto;
}

/* O bloco título encolhe pro tamanho do próprio conteúdo (a linha mais
   larga é "ORÁCULO CLUBBER") e centraliza como unidade — brand e título
   continuam alinhados à esquerda ENTRE si (mesma relação de sempre, "O"
   de Oráculo e o "V" de Veda Nada na mesma coluna), só a dupla inteira
   se desloca pro centro da tela. Nada de text-align:center aqui: isso
   quebraria esse alinhamento comum entre as duas linhas.
   Também aproveita pra reduzir o gap padrão do header (6.5vh) até o
   @usuario/carta pela metade — o valor cheio deixava um buraco grande
   entre o título e a carta. */
body.tela-resultado .app__header {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.25vh;
}

/* centraliza verticalmente quando o conteúdo cabe; quando não cabe
   (resultado/carta), os autos colapsam e a página rola normalmente */
.app__header { margin-top: auto; }
.screen { margin-bottom: auto; }

.app__header {
  margin-bottom: 6.5vh;
}

.app__brand {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin: 0 0 1.15rem;
}

/* Wordmark em Bahiana — exclusiva desta linha; nunca em perguntas,
   respostas, corpo, CTA ou microcopy. */
.app__title {
  font-family: var(--font-marca);
  font-weight: 400;
  font-size: clamp(3rem, 5.6vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--luar);
  margin: 0;
  text-shadow:
    0 0 38px rgba(236, 231, 213, 0.18),
    0 2px 30px rgba(6, 4, 9, 0.95);
}

.screen {
  position: relative;
}

/* ---------- Capa ---------- */

/* Gancho principal da capa: sem itálico, mais pesado e maior que o .apoio
   logo abaixo, pra hierarquia ficar clara à primeira vista. O peso 600 é
   real (carregado no <link> do Google Fonts em index.html), não sintetizado
   pelo browser. */
.subtitulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1.22;
  /* Creme puxado pro quente (o --luar é mais frio) e em opacidade cheia:
     separa o gancho da massa de texto em .apoio/.aviso, que ficam em
     0.74/0.75. Teto de tamanho fica bem abaixo do .app__title (4.6rem no
     desktop, 3rem no mobile), então não disputa com o wordmark. */
  color: #f7ecdb;
  letter-spacing: 0.015em;
  /* Mesma sombra do .apoio/.aviso: o subtítulo fica na faixa onde o
     gradiente ainda é leve, então depende mais dela. */
  text-shadow: 0 1px 18px rgba(6, 4, 9, 0.92), 0 0 5px rgba(6, 4, 9, 0.7);
  margin: 0 0 2.6vh;
}

/* <em> aqui é ênfase semântica, não visual-itálica: o destaque de "perfil"
   é só a cor da brasa. Sem o reset, o padrão do browser devolveria o
   itálico que acabamos de tirar. */
.subtitulo em {
  font-style: normal;
  color: var(--brasa-viva);
}

/* Painel ÚNICO atrás de .apoio + .aviso. Antes cada parágrafo carregava a
   própria elipse: como o max-width era em `ch` e as duas fontes têm corpos
   diferentes, as caixas saíam com larguras diferentes e apareciam um degrau
   na direita e uma emenda horizontal no meio. Com um wrapper só (o
   .capa-nota criado em renderIntro) existe uma borda só, e o max-width vai
   em px justamente pra não voltar a depender do corpo do texto.
   Segue sem background sólido e sem border-radius: o gradiente esmaece nas
   bordas, então continua sem contorno duro de "caixa". */
.capa-nota {
  max-width: 320px;
  margin: 0 0 6vh;
}

/* Vinheta de cartaz: gradiente vertical full-bleed sobre o vídeo, no lugar
   do painel retangular que ficava atrás do texto. Fixed + inset:0 pra
   escapar da coluna editorial e cobrir a viewport inteira — sem largura
   própria, não há borda pra perceber. z-index -1 resolve dentro do contexto
   de empilhamento do .app (que é z-index 5), então fica ACIMA do vídeo e do
   .scrim e ABAIXO de todo o texto da capa.
   Vive dentro de #screen (criado em renderIntro), então some sozinha quando
   a tela é trocada — não vaza pras perguntas nem pro resultado. */
.capa-vinheta {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 4, 9, 0) 0%,
    rgba(6, 4, 9, 0.06) 25%,
    rgba(6, 4, 9, 0.22) 40%,
    rgba(6, 4, 9, 0.46) 52%,
    rgba(6, 4, 9, 0.68) 66%,
    rgba(6, 4, 9, 0.72) 100%);
}

.apoio {
  font-size: 1.12rem;
  line-height: 1.65;
  /* Mesmo creme quente do .subtitulo — o rgba antigo lavava o texto. */
  color: rgba(247, 236, 219, 0.92);
  /* Sombra difusa (sem offset lateral, raio grande): reforça o contraste
     contra o vídeo sem desenhar contorno nem caixa — é o que permite o
     gradiente ser mais leve que o painel antigo. */
  text-shadow: 0 1px 16px rgba(6, 4, 9, 0.9), 0 0 4px rgba(6, 4, 9, 0.65);
  margin: 0 0 0.9rem;
}

/* Nota secundária: separada do .apoio por COR além do tamanho — âmbar
   dessaturado, quente o bastante pra não competir com o laranja de
   "perfil" no .subtitulo, mas distinto do creme do parágrafo acima. */
.aviso {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: rgba(232, 207, 164, 0.95);
  text-shadow: 0 1px 16px rgba(6, 4, 9, 0.9), 0 0 4px rgba(6, 4, 9, 0.65);
  margin: 0;
}

/* ---------- CTA: inscrição que acende ---------- */

.chama {
  display: inline-flex;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.85rem 0.4rem 0.85rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brasa-viva);
  text-shadow: 0 0 24px rgba(240, 144, 82, 0.3);
  position: relative;
  transition: color 0.35s ease, letter-spacing 0.35s cubic-bezier(0.23, 1, 0.32, 1), text-shadow 0.35s ease;
}

.chama__conteudo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.chama__brasa {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd9ae, var(--brasa-viva) 62%);
  box-shadow: 0 0 14px 4px rgba(240, 144, 82, 0.5);
  animation: brasa-pulsa 2.8s ease-in-out infinite;
  transition: box-shadow 0.35s ease;
}

.chama::after {
  content: "";
  position: absolute;
  left: 0;
  right: 12%;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(240, 144, 82, 0.85) 0%,
    rgba(255, 224, 186, 0.95) 22%,
    rgba(240, 144, 82, 0.85) 44%,
    rgba(240, 144, 82, 0.55) 70%,
    rgba(240, 144, 82, 0) 100%);
  background-size: 240% 100%;
  transform: scaleX(0.55);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  animation: linha-brasa 7s ease-in-out infinite alternate;
}

@keyframes linha-brasa {
  from { background-position: 0% 0; }
  to   { background-position: 90% 0; }
}

.chama:focus-visible {
  color: #ffc896;
  letter-spacing: 0.245em;
  text-shadow: 0 0 30px rgba(240, 144, 82, 0.5);
  outline: 1px solid rgba(236, 231, 213, 0.6);
  outline-offset: 8px;
}

.chama:focus-visible .chama__conteudo {
  transform: translateY(-2px);
}

.chama:focus-visible .chama__brasa {
  box-shadow: 0 0 20px 7px rgba(240, 144, 82, 0.55);
}

.chama:focus-visible::after { transform: scaleX(1); }
.chama:active .chama__conteudo { transform: translateY(-1px) scale(0.97); }

/* :hover só em dispositivo com ponteiro de precisão — mesmo motivo do guard
   em .caminho: em touch, :hover não se desfaz ao soltar o dedo. */
@media (hover: hover) and (pointer: fine) {
  .chama:hover {
    color: #ffc896;
    letter-spacing: 0.245em;
    text-shadow: 0 0 30px rgba(240, 144, 82, 0.5);
    outline: none;
  }

  .chama:hover .chama__conteudo {
    transform: translateY(-2px);
  }

  .chama:hover .chama__brasa {
    box-shadow: 0 0 20px 7px rgba(240, 144, 82, 0.55);
  }

  .chama:hover::after { transform: scaleX(1); }
}

@keyframes brasa-pulsa {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.22); }
}

/* ---------- Pergunta ---------- */

.rito {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--musgo);
  margin: 0 0 2.6vh;
}

.rito::after {
  content: "";
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, rgba(138, 147, 108, 0.55), rgba(138, 147, 108, 0));
}

.pergunta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.5vw, 2.05rem);
  line-height: 1.38;
  color: var(--luar);
  text-shadow: 0 2px 26px rgba(6, 4, 9, 0.95);
  max-width: 30ch;
  margin: 0 0 4.6vh;
}

.caminhos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.caminho {
  display: flex;
  align-items: baseline;
  gap: 1.15rem;
  background: none;
  border: none;
  padding: 0.82rem 0.5rem 0.82rem 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.45;
  color: rgba(236, 231, 213, 0.8);
  position: relative;
  width: 100%;
  transition:
    color 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}

.caminho__glifo {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--musgo);
  flex: none;
  width: 1.7rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.caminho::before {
  content: "";
  position: absolute;
  left: -1.7rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--brasa-viva);
  box-shadow: 0 0 12px 3px rgba(240, 144, 82, 0.55);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.caminho::after {
  content: "";
  position: absolute;
  left: 2.85rem;
  bottom: 4px;
  width: min(300px, 60%);
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 144, 82, 0.7), rgba(240, 144, 82, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.caminhos li + li .caminho {
  border-top: 1px solid transparent;
  background-image: linear-gradient(90deg, rgba(167, 174, 196, 0.14), rgba(167, 174, 196, 0) 42%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 2.85rem 0;
}

.caminho:focus-visible {
  color: var(--luar);
  transform: translateX(7px) translateY(-1px);
  outline: 1px solid rgba(236, 231, 213, 0.55);
  outline-offset: 4px;
}

/* :hover só entra em dispositivo com ponteiro de precisão (mouse). Em touch,
   :hover não se desfaz ao soltar o dedo — sem este guard, o destaque ficava
   preso na mesma posição da tela ao trocar de pergunta, mesmo sem seleção
   real (o elemento novo que nasce naquele ponto herda o :hover pendente). */
@media (hover: hover) and (pointer: fine) {
  .caminho:hover {
    color: var(--luar);
    transform: translateX(7px) translateY(-1px);
    outline: none;
  }

  .caminhos:hover .caminho:not(:hover):not(.escolhida) {
    opacity: 0.55;
  }

  .caminho:hover .caminho__glifo {
    color: var(--brasa-viva);
    text-shadow: 0 0 12px rgba(240, 144, 82, 0.45);
  }

  .caminho:hover::before { opacity: 1; transform: scale(1); }
  .caminho:hover::after { transform: scaleX(1); }
}

.caminho:focus-visible .caminho__glifo {
  color: var(--brasa-viva);
  text-shadow: 0 0 12px rgba(240, 144, 82, 0.45);
}

.caminho:focus-visible::before { opacity: 1; transform: scale(1); }
.caminho:focus-visible::after { transform: scaleX(1); }
.caminho:active { transform: translateX(7px) scale(0.99); }

.caminho.escolhida {
  color: var(--luar);
  transform: translateX(7px);
}
.caminho.escolhida .caminho__glifo { color: var(--brasa-viva); }
.caminho.escolhida::before { opacity: 1; transform: scale(1); }
.caminho.escolhida::after { transform: scaleX(1); }
.caminhos.tem-escolha .caminho:not(.escolhida) { opacity: 0.42; }

/* ---------- Dica de scroll (perguntas do quiz) ---------- */

.scroll-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  background: linear-gradient(180deg, rgba(6, 4, 9, 0) 0%, rgba(6, 4, 9, 0.85) 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 7;
}

.scroll-hint--visivel {
  opacity: 1;
}

.scroll-hint__seta {
  width: 22px;
  height: 22px;
  color: var(--brasa-viva);
  filter: drop-shadow(0 0 6px rgba(240, 144, 82, 0.55));
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   Telas fora do escopo do redesign (formulários, confirmação,
   resultado/carta, VIP) — estilos legados mantidos funcionais.
   Serão migrados pro sistema do Conceito A na próxima rodada.
   ============================================================ */

.progress {
  display: flex;
  gap: var(--space-0-6);
  margin-bottom: var(--space-1-75);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--creme-18);
  transition: background 0.3s;
}

.dot--active {
  background: var(--brasa-viva);
  box-shadow: 0 0 10px 2px rgba(240, 144, 82, 0.7);
}

.dot--done {
  background: var(--musgo);
}

.question__text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 0 0 var(--space-1-75);
  color: var(--luar);
  text-shadow: 0 2px 26px rgba(6, 4, 9, 0.95);
}

.options {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-75);
}

.option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(236, 231, 213, 0.04);
  border: 1px solid var(--creme-18);
  border-radius: var(--radius-10);
  padding: var(--space-0-95) var(--space-1-1);
  color: var(--luar);
  font-family: var(--font-body);
  font-size: var(--text-1-08);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

/* :hover só em dispositivo com ponteiro de precisão — mesmo motivo do guard
   em .caminho: em touch, :hover não se desfaz ao soltar o dedo. */
@media (hover: hover) and (pointer: fine) {
  .option:hover {
    border-color: var(--brasa-viva);
    background: rgba(240, 144, 82, 0.07);
    transform: translateX(2px);
    box-shadow: 0 0 16px rgba(240, 144, 82, 0.15);
  }
}

.option:active {
  transform: translateX(2px) scale(0.98);
}

.option:focus-visible {
  outline: 1px solid rgba(236, 231, 213, 0.55);
  outline-offset: 3px;
}

.option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.option--submit {
  justify-content: center;
  background: linear-gradient(135deg, var(--brasa-viva), var(--brasa));
  border-color: var(--brasa-viva);
  color: var(--breu);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
}

@media (hover: hover) and (pointer: fine) {
  .option--submit:hover {
    background: var(--luar);
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 144, 82, 0.35);
  }
}

.confirm-status {
  opacity: 0.85;
  margin-top: var(--space-1-25);
  font-size: var(--text-0-95);
  min-height: 1.2em;
}

.hint {
  opacity: 0.75;
  margin-top: -1.1rem;
  margin-bottom: var(--space-1-5);
  font-size: var(--text-0-95);
  font-style: italic;
}

/* Hints das telas do @ e da confirmação: frases que a pessoa precisa mesmo
   ler antes de agir, então pedem mais corpo e menos transparência que o
   .hint base. Modificadores em vez de mexer no .hint base porque a classe é
   compartilhada com o form do VIP e o painel admin (admin.html também
   carrega este arquivo), que seguem no tratamento discreto. */
.hint--instagram,
.hint--confirmacao {
  opacity: 0.88;
  font-size: 1.05rem;
}

.instagram-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 440px;
}

.instagram-form input {
  padding: var(--space-0-95) var(--space-1-1);
  border-radius: var(--radius-10);
  border: 1px solid var(--creme-30);
  background: var(--creme-05);
  color: var(--luar);
  font-family: var(--font-body);
  font-size: var(--text-1-08);
}

/* Arroba fixa do campo de Instagram: pseudo-elemento no wrapper, nunca no
   value do input — não é selecionável, não dá pra apagar e não entra no que
   é enviado. O input segue aceitando "@" colado; normalizeHandle limpa. */
.input-arroba {
  position: relative;
  display: flex;
  flex-direction: column;
}

.input-arroba::before {
  content: "@";
  position: absolute;
  left: var(--space-1-1);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: var(--text-1-08);
  color: var(--luar);
  opacity: 0.55;
  pointer-events: none;
}

/* Abre espaço pra arroba desenhada acima. O glifo "@" da EB Garamond é bem
   mais largo que 1ch — em 1.25ch a cauda dele encostava na primeira letra. */
.input-arroba input {
  padding-left: calc(var(--space-1-1) + 1.7ch);
}

.instagram-form input:focus {
  outline: none;
  border-color: var(--brasa-viva);
  box-shadow: 0 0 12px rgba(240, 144, 82, 0.25);
}

.vip-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-0-75);
  text-align: left;
  font-size: var(--text-0-9);
  line-height: 1.45;
  opacity: 0.85;
  cursor: pointer;
}

.vip-consent input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--brasa-viva);
  cursor: pointer;
}

/* ---------- Resultado / carta ---------- */

.resultado {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.resultado__eyebrow {
  color: var(--musgo);
  font-size: var(--text-0-9);
  letter-spacing: 0.1em;
  /* Espaço até a carta reduzido (~40% de var(--space-1-25)) — o valor
     cheio deixava @usuario e carta lendo como dois blocos separados. */
  margin: 0 0 var(--space-0-75);
}

/* Carta grande e centralizada, dominando a tela ao carregar — a entrada
   (fade + leve scale-up) é feita via GSAP em js/app.js; aqui só o tamanho
   final e o pouso (sombra + friso) que a fazem "flutuar" sobre o vídeo. */
.resultado__carta {
  width: 100%;
  max-width: min(360px, 82vw);
  margin: 0 auto var(--space-1-75);
}

.resultado__carta-img,
.resultado__carta-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 1875;
  border-radius: var(--radius-16);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(240, 144, 82, 0.22);
}

.resultado__carta-img {
  object-fit: contain;
}

.resultado__carta-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-1-5);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-1-08);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brasa-viva);
  background: linear-gradient(155deg, #131020, var(--breu));
}

.resultado--bug .resultado__carta-img {
  animation: bug-flicker 5s steps(1) infinite;
}

.resultado__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-85);
  width: 100%;
  max-width: 380px;
  margin: var(--space-1-75) auto 0;
}

.resultado__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: var(--space-0-95) var(--space-1-25);
  border-radius: var(--radius-10);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: var(--text-1);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.resultado__btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.resultado__btn--principal {
  background: linear-gradient(135deg, var(--brasa-viva), var(--brasa));
  border: 1px solid var(--brasa-viva);
  color: var(--breu);
}

/* Neutro em vez de laranja: o "Compartilhar" abre um menu, ele não é a ação
   em si. O laranja fica reservado pro CTA de ingresso (preenchido, logo
   acima) e pros itens do menu, que são os cliques que de fato compartilham.
   Borda em --creme-30 e não --creme-18 porque o botão ocupa a largura toda —
   no 18% o contorno praticamente sumia. */
.resultado__btn--secundario {
  background: rgba(236, 231, 213, 0.04);
  border: 1px solid var(--creme-30);
  color: var(--luar);
}

/* :hover só em dispositivo com ponteiro de precisão — mesmo motivo do guard
   em .caminho: em touch, :hover não se desfaz ao soltar o dedo. */
@media (hover: hover) and (pointer: fine) {
  .resultado__btn--principal:hover {
    background: var(--luar);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 144, 82, 0.35);
  }

  /* Acompanha o repouso neutro: um realce em creme, não em laranja. */
  .resultado__btn--secundario:hover {
    background: rgba(236, 231, 213, 0.1);
    border-color: var(--creme-30);
    transform: translateY(-2px);
  }
}

.resultado__btn:active {
  transform: translateY(0) scale(0.98);
}

.resultado__btn:focus-visible {
  outline: 1px solid rgba(236, 231, 213, 0.55);
  outline-offset: 3px;
}

.resultado__btn:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

/* Menu do "Compartilhar" (WhatsApp / Stories) — painel ancorado abaixo do
   botão, reaproveitando o mesmo estilo de cartão de .archetype-description
   / .ticket-discount e o mesmo estilo de linha clicável de .option. */
.share-menu-anchor {
  position: relative;
}

/* Em fluxo, não absoluto: fora do fluxo o menu não somava altura, então a
   página não crescia ao abrir — o padding inferior do .app não valia pra ele
   e o painel encostava na borda da tela, além de cobrir o .social-link. */
.share-menu {
  margin-top: var(--space-0-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-0-6);
  border-radius: var(--radius-14);
  background: rgba(6, 4, 9, 0.55);
  border: 1px solid var(--creme-15);
  backdrop-filter: blur(6px);
}

/* Laranja de ação: estes são os cliques que compartilham de fato, então
   sobrepõem o tratamento neutro herdado de .option. Tint + contorno em vez
   de preenchido — preenchidos ficariam com o mesmo peso do CTA de compra de
   ingresso, e são dois botões empilhados num painel flutuante. */
.share-menu__item {
  justify-content: space-between;
  background: rgba(240, 144, 82, 0.12);
  border-color: var(--brasa-viva);
  color: var(--brasa-viva);
}

/* O :hover herdado de .option é mais fraco (0.07) que o repouso daqui
   (0.12), o que faria o hover parecer um recuo — daí o override. */
@media (hover: hover) and (pointer: fine) {
  .share-menu__item:hover {
    background: rgba(240, 144, 82, 0.24);
  }
}

.share-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(380px, calc(100vw - 32px));
  margin: 0;
  padding: var(--space-0-85) var(--space-1-25);
  border-radius: var(--radius-10);
  background: rgba(240, 144, 82, 0.16);
  border: 1px solid rgba(240, 144, 82, 0.5);
  color: var(--creme);
  font-size: var(--text-0-9);
  text-align: center;
  backdrop-filter: blur(6px);
}

.archetype-description {
  max-width: 480px;
  margin: var(--space-1-75) auto 0;
  padding: var(--space-1-5) var(--space-1-75);
  border-radius: var(--radius-14);
  background: rgba(6, 4, 9, 0.55);
  border: 1px solid var(--creme-15);
  text-align: left;
}

.archetype-description__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-0-95);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brasa-viva);
  margin: 0 0 var(--space-0-6);
}

.archetype-description__text {
  font-size: var(--text-0-95);
  line-height: 1.65;
  opacity: 0.88;
  margin: 0;
  white-space: pre-line;
}

/* ---------- Contexto do evento + cupom de desconto ---------- */

.event-context {
  max-width: 420px;
  margin: var(--space-1-25) auto 0;
  /* Mesmo corpo e opacidade do .archetype-description__text logo acima: a
     linha lê como parte do mesmo bloco, e o itálico + centralização é que
     a marcam como nota de contexto. */
  font-size: var(--text-0-95);
  font-style: italic;
  line-height: 1.5;
  opacity: 0.88;
  text-align: center;
  /* A quebra vem do \n em TICKET.contextText — ver js/data.js. */
  white-space: pre-line;
}

.ticket-discount {
  max-width: 480px;
  margin: var(--space-1) auto 0;
  padding: var(--space-1-5) var(--space-1-75);
  border-radius: var(--radius-14);
  background: rgba(6, 4, 9, 0.55);
  border: 1px solid var(--creme-15);
  text-align: center;
}

.ticket-discount__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-0-95);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brasa-viva);
  margin: 0 0 var(--space-0-6);
}

.ticket-discount__text {
  font-size: var(--text-0-95);
  line-height: 1.55;
  opacity: 0.88;
  margin: 0 0 var(--space-1-1);
}

/* Âncora do botão de copiar; a margem inferior mora aqui, não no código. */
.ticket-discount__codigo-wrap {
  position: relative;
  margin: 0 0 var(--space-1-1);
}

/* Código destacado e selecionável — é o que a pessoa precisa copiar.
   Padding horizontal simétrico e largo o bastante pra abrir espaço pro botão
   sem tirar o código do centro. */
.ticket-discount__codigo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--luar);
  user-select: all;
  margin: 0;
  padding: var(--space-0-75) 2.75rem;
  border-radius: var(--radius-10);
  border: 1px dashed var(--brasa-viva);
  background: rgba(240, 144, 82, 0.1);
  word-break: break-all;
}

.ticket-discount__copiar {
  position: absolute;
  top: 50%;
  right: var(--space-0-5);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 1px solid var(--creme-30);
  border-radius: var(--radius-8);
  color: var(--brasa-viva);
  cursor: pointer;
}

.ticket-discount__copiar svg {
  width: 15px;
  height: 15px;
}

.ticket-discount__copiar:hover {
  background: rgba(240, 144, 82, 0.14);
  border-color: var(--brasa-viva);
}

/* Confirmação de cópia: mesmo verde do restante da tela. */
.ticket-discount__copiar--ok {
  color: var(--musgo);
  border-color: var(--musgo);
  background: none;
}

/* Só pra leitor de tela — o ícone virando check não é anunciado sozinho. */
.ticket-discount__copia-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Herda .resultado__btn--principal; aqui só o que muda por ser link dentro
   da caixa e o estado sem venda aberta. */
.ticket-discount__cta {
  text-decoration: none;
}

.ticket-discount__cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ticket-discount__aviso {
  font-size: var(--text-0-85);
  line-height: 1.45;
  font-style: italic;
  opacity: 0.65;
  margin: var(--space-0-75) 0 0;
}

/* Fecha a tela: texto pequeno, sem cara de botão, pra não disputar com o CTA. */
.social-link {
  display: block;
  margin: var(--space-1-5) auto 0;
  font-size: var(--text-0-85);
  letter-spacing: 0.04em;
  color: var(--luar);
  opacity: 0.55;
  text-align: center;
  text-decoration: none;
}

.social-link:hover {
  opacity: 0.85;
}

@keyframes bug-flicker {
  0%, 91%, 100% { filter: none; opacity: 1; }
  92% { filter: hue-rotate(30deg); opacity: 0.85; transform: translateX(1px); }
  93% { filter: none; opacity: 1; transform: translateX(-1px); }
  94% { filter: hue-rotate(-20deg); opacity: 0.9; }
  95% { filter: none; opacity: 1; transform: translateX(0); }
}

.bug-vip-cta,
.bug-vip-missed,
.bug-vip-confirmed {
  margin-top: var(--space-1-75);
  text-align: center;
}

.bug-vip-badge {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-1);
  letter-spacing: 0.04em;
  color: var(--brasa-viva);
  text-shadow: 0 0 14px rgba(240, 144, 82, 0.5);
  margin: 0 0 var(--space-0-75);
  text-transform: uppercase;
}

.bug-vip-desc {
  opacity: 0.88;
  font-size: var(--text-1);
  line-height: 1.55;
  margin: 0 0 var(--space-1-25);
}

.bug-vip-btn {
  width: 100%;
  margin-top: 0.25rem;
}

.bug-vip-ineligible {
  opacity: 0.72;
  font-style: italic;
  font-size: var(--text-0-95);
  line-height: 1.55;
  margin: 0;
  color: var(--luar);
}

.bug-vip-confirmed .bug-vip-badge {
  color: var(--musgo);
  text-shadow: 0 0 12px rgba(138, 147, 108, 0.45);
}

.bug-vip-confirmed .bug-vip-desc {
  margin: 0;
}

/* ============================================================
   Mobile — 390x844 é a referência principal.
   Bloco 2+ é desktop-only: nenhuma camada extra no mobile
   (nem parallax, nem lanterna — o JS também não inicializa).
   ============================================================ */

@media (max-width: 480px) {
  .app {
    /* 10vh embaixo (e não 8vh) pra sobrar respiro quando o menu de
       compartilhar está aberto no fim da tela de resultado. */
    padding: 6vh 7vw 10vh;
    padding-top: 19vh;
  }
  .app__header { margin-bottom: 4.5vh; }
  body.tela-resultado .app__header { margin-bottom: 2.25vh; }
  .app__brand { font-size: 0.58rem; letter-spacing: 0.42em; margin-bottom: 0.85rem; }
  .scrim {
    background:
      radial-gradient(ellipse 110% 55% at 38% 50%, rgba(13, 8, 24, 0.78) 0%, rgba(13, 8, 24, 0.42) 60%, rgba(13, 8, 24, 0) 100%),
      linear-gradient(180deg, rgba(13, 8, 24, 0.48) 0%, rgba(13, 8, 24, 0) 30%),
      linear-gradient(0deg, rgba(13, 8, 24, 0.36) 0%, rgba(13, 8, 24, 0) 16%);
  }

  body.tela-resultado .scrim {
    background:
      radial-gradient(ellipse 130% 70% at 50% 40%, rgba(6, 4, 9, 0.68) 0%, rgba(6, 4, 9, 0.88) 65%, rgba(6, 4, 9, 0.95) 100%),
      linear-gradient(180deg, rgba(6, 4, 9, 0.58) 0%, rgba(6, 4, 9, 0.25) 20%, rgba(6, 4, 9, 0.25) 80%, rgba(6, 4, 9, 0.62) 100%);
  }

  .chama::after { animation: none; }
  .veu-transicao { filter: blur(16px); }

  .subtitulo { font-size: 2.1rem; }
  /* padding lateral menor que o desktop: no viewport estreito, o padding
     de 28px sobrava largura suficiente pra "ressoa em você" cair sozinho
     numa 3ª linha — com 14px o parágrafo volta a fechar em 2 linhas. */
  .capa-nota { max-width: 100%; }
  .apoio { font-size: 1.04rem; }
  .caminho { font-size: 1.08rem; padding: 0.92rem 0.4rem 0.92rem 0; }
  .pergunta { max-width: 100%; }

  .archetype-description,
  .event-context,
  .ticket-discount,
  .resultado__acoes {
    max-width: 100%;
  }

  .resultado__carta {
    max-width: min(320px, 86vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chama__brasa, .chama::after { animation: none !important; }
  .veu-transicao { display: none; }
  .chama, .chama__conteudo, .caminho, .chama::after, .caminho::before, .caminho::after { transition: none !important; }
  .resultado--bug .resultado__carta-img { animation: none !important; }
  .scroll-hint__seta { animation: none !important; }
}