/* Os mesmos tokens da landing page. Copiados e não importados de lá: o quiz roda
   noutro host, e depender do sideai.tech estar no ar para o texto ter cor é
   acoplamento que só aparece no dia em que atrapalha. */
:root {
  --bg-top: #1c2230;
  --bg-base: #031330;
  --accent: #aefc4e;
  --accent-ink: #14200a;
  --text: #e8ecf3;
  --text-soft: #9aa6bc;
  --border: rgba(255, 255, 255, 0.10);
  --surface: rgba(255, 255, 255, 0.045);
  --radius-card: 18px;
  --radius-pill: 999px;
  --largura: 640px;
  --gutter: 20px;
  color-scheme: dark;
}

@font-face {
  font-family: "Inter";
  src: url("../fontes/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap; /* texto legível na fonte do sistema enquanto a Inter carrega */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Inter";
  src: url("../fontes/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

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

/* O atributo `hidden` é só `display: none` na folha do navegador, e qualquer
   regra de display do autor ganha dele — `.botao { display: inline-flex }` fazia
   um botão escondido continuar na tela. Vale para todo elemento da página. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh; /* dvh e não vh: no celular a barra do navegador some e volta */
  display: flex;
  flex-direction: column;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-base) 60%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Some da tela sem sair da ordem de foco: quem chega nele pelo Tab o vê voltar. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  border-radius: 0 0 10px 0;
  z-index: 10;
}
.pular:focus { left: 0; }

.topo { padding: 20px var(--gutter); }
/* Só a imagem: as regras de texto que havia aqui não tinham mais o que estilizar. */
.marca { display: inline-flex; }
.marca img { height: 30px; width: auto; }

main {
  flex: 1;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 8px var(--gutter) 48px;
}

/* ------------------------------------------------------------- abertura */

.selo {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 13px;
  font-size: 0.8125rem;
  color: var(--accent);
  background: rgba(174, 252, 78, 0.09);
  border: 1px solid rgba(174, 252, 78, 0.22);
  border-radius: var(--radius-pill);
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.linha-fina {
  margin: 0 0 30px;
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  color: var(--text-soft);
}

.beneficios {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.beneficios li {
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.beneficios strong { display: block; color: var(--text); margin-bottom: 3px; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px é o alvo de toque confortável no celular; abaixo disso o dedo erra. */
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}
.botao-primario { background: var(--accent); color: var(--accent-ink); }
.botao-primario:hover { filter: brightness(1.07); }
.botao-texto {
  background: transparent;
  color: var(--text-soft);
  padding: 0 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.botao-texto:hover { color: var(--text); }

/* Anel de foco visível em tudo que recebe foco. O padrão do navegador some
   contra fundo escuro, e removê-lo sem repor é como se quebra navegação por
   teclado sem perceber — quem usa mouse nunca vê a diferença. */
:is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

.custo { margin: 0; font-size: 0.8125rem; color: var(--text-soft); }

/* ---------------------------------------------------------------- modal */

dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 26px;
  color: var(--text);
  background: #101a2e;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
/* Fundo firme: a 0.72 dava para ler a página atrás, e modal que não separa do
   que está embaixo faz a pessoa não saber onde clicar. */
dialog::backdrop { background: rgba(2, 10, 26, 0.86); }
dialog h2 { margin: 0 0 20px; font-size: 1.25rem; letter-spacing: -0.02em; }

.passos { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 18px; }
.passos li { display: flex; gap: 14px; }
.passos .numero {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(174, 252, 78, 0.12);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}
.passos strong { display: block; font-size: 0.9375rem; }
.passos p { margin: 3px 0 0; font-size: 0.875rem; color: var(--text-soft); }

/* --------------------------------------------------------------- rodapé */

.rodape { padding: 22px var(--gutter); font-size: 0.8125rem; color: var(--text-soft); }
.rodape p { max-width: var(--largura); margin: 0 auto; }
.rodape a { color: var(--text-soft); }

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

/* ----------------------------------------------------------------- quiz */

.progresso { margin: 4px 0 30px; }
.progresso-texto {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: 9px;
}
.barra {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.barra-cheia {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 0.28s ease;
}

.pergunta {
  margin: 0 0 8px;
  font-size: clamp(1.375rem, 4.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* O foco pousa no título a cada pergunta para o leitor de tela anunciá-la. Quem
   enxerga não precisa ver um anel em volta de um texto que ninguém clicou. */
.pergunta:focus { outline: none; }

.ajuda { margin: 0 0 22px; font-size: 0.9375rem; color: var(--text-soft); }
.pergunta + .opcoes, .pergunta + .escala { margin-top: 22px; }

.opcoes { display: grid; gap: 10px; }
.opcao {
  min-height: 56px;
  padding: 14px 18px;
  text-align: left;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opcao:hover { border-color: rgba(174, 252, 78, 0.45); }
/* aria-pressed é a fonte da verdade, e o CSS lê o mesmo atributo. Uma classe
   separada seria um segundo estado para manter em sincronia — e o dia em que os
   dois divergirem, a tela mostra uma coisa e o leitor de tela anuncia outra. */
.opcao[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(174, 252, 78, 0.10);
}

.escala-numeros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.nota {
  min-height: 60px;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
}
.nota:hover { border-color: rgba(174, 252, 78, 0.45); }
.nota[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(174, 252, 78, 0.10);
  color: var(--accent);
}
.escala-pontas {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}

.texto-livre { display: grid; gap: 9px; margin-top: 14px; }
.texto-livre label { font-size: 0.875rem; color: var(--text-soft); }
.texto-livre input {
  min-height: 50px;
  padding: 0 15px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--radius-field, 12px);
}
.texto-livre input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.texto-livre .botao { justify-self: start; }

.rodape-quiz { margin-top: 26px; }

.respostas-cruas { margin: 18px 0; font-size: 0.875rem; color: var(--text-soft); }
.respostas-cruas summary { cursor: pointer; }
.respostas-cruas pre {
  margin-top: 10px;
  padding: 14px;
  overflow-x: auto;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ----------------------------------------------------------- formulário */

.formulario { display: grid; gap: 16px; margin-top: 22px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 0.875rem; color: var(--text-soft); }
.campo input {
  min-height: 52px;
  padding: 0 15px;
  font: inherit;
  font-size: 1rem; /* 16px: abaixo disso o Safari do iPhone dá zoom ao focar */
  color: var(--text);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.campo input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.erro {
  margin: 0;
  font-size: 0.8125rem;
  color: #ff9d9d; /* vermelho claro: o escuro padrão some sobre fundo escuro */
  min-height: 0;
}
.erro:empty { display: none; }
/* O aviso de e-mail pessoal não é erro — não pode vestir a roupa de erro. */
.erro.aviso { color: var(--text-soft); }
.erro-geral { margin-top: 4px; }
.erro-geral a { color: var(--accent); }

/* Escondido de gente e, pelo aria-hidden no HTML, de leitor de tela. Sem
   display:none de propósito: parte dos robôs ignora campo com display none, e
   aí a armadilha não pegaria ninguém. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aceite { display: flex; gap: 11px; align-items: flex-start; margin-top: 4px; }
.aceite input {
  /* 20px é pequeno para o dedo, mas o alvo real é o label inteiro, que o `for`
     torna clicável — é por isso que rótulo ligado ao campo não é formalidade. */
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: none;
}
.aceite label { font-size: 0.875rem; color: var(--text-soft); line-height: 1.5; }
.aceite a { color: var(--accent); }

.formulario .botao { justify-self: start; margin-top: 6px; }
.formulario .botao[disabled] { opacity: 0.6; cursor: progress; }

.fila {
  margin: 4px 0 10px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------------------------------------------------------- tela final */

.resumo {
  margin: 20px 0 24px;
  padding: 18px 19px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
}
.resumo p { margin: 0 0 12px; font-size: 0.9375rem; color: var(--text); }
.resumo p:last-child { margin-bottom: 0; }

.resumo-rotulo {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft) !important;
  margin-bottom: 12px !important;
}

.compartilhar { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); }
.compartilhar .acoes { margin-bottom: 0; }

/* Contorno em vez de preenchido: dois botões verdes lado a lado competiriam, e
   o WhatsApp é o caminho que a gente prefere. */
.botao-contorno {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.botao-contorno:hover { border-color: rgba(174, 252, 78, 0.45); }

/* --------------------------------------------------------------- painel */

/* A /admin respira mais que o quiz: aqui se lê tabela, não se responde pergunta. */
.painel { max-width: none; }
main:has(.painel) { max-width: 1100px; }

.painel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
}
.painel-topo h1 { margin: 0; font-size: 1.5rem; }
.painel-topo form { margin: 0; }
.painel-topo .resumo-rotulo { margin: 0 !important; }

.botao-pequeno { min-height: 38px; padding: 0 16px; font-size: 0.8125rem; }

.entrada { max-width: 380px; margin: 40px auto 0; }

/* ------------------------------------------------------------- pesquisa */

.pesquisa {
  display: grid;
  /* auto-fit + minmax: uma coluna no celular, quantas couberem no monitor, sem
     media query. O grid decide pela largura que sobrou, não por um número. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.pesquisa-bloco {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pesquisa-bloco h2 {
  margin: 0 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.barra-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 26px;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 0.8125rem;
  color: var(--text-soft);
}
/* Quebra em vez de truncar. Reticências economizam espaço numa lista de
   navegação; aqui o rótulo É o dado que se veio ler, e "O vendedor não soube
   re..." não responde pergunta nenhuma. */
.barra-rotulo { line-height: 1.35; }
.barra-trilho {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.barra-valor { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.barra-numero { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- filtros */

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pilula {
  padding: 7px 14px;
  font-size: 0.8125rem;
  color: var(--text-soft);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.pilula:hover { color: var(--text); }
.pilula.ativa { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* -------------------------------------------------------------- tabela */

/* A rolagem fica no contêiner, não na página: sem isto, uma coluna larga no
   celular empurra o site inteiro para o lado e tudo desalinha. */
.tabela-rolante { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabela th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabela td {
  padding: 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}
.tabela a { color: var(--text-soft); }
.tabela a:hover { color: var(--accent); }
.tabela tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* O link do Instagram no rodapé: ícone e palavra na mesma linha. O tamanho do
   ícone é em em, não em px — se a fonte do rodapé mudar, ele acompanha. */
.rodape-social { display: inline-flex; align-items: center; gap: 6px; }
.rodape-social svg { width: 1.1em; height: 1.1em; flex: none; }

.seguir { margin: 18px 0 0; font-size: 0.875rem; color: var(--text-soft); }
.seguir a { color: var(--accent); }