/*
  Folha de estilo principal do teste do arquétipo.

  Direção: tipografia editorial serifada (Fraunces) sobre fundo
  cinematográfico quase preto, com luz avermelhada subindo do rodapé
  e grão de película. Fios finos no lugar de cartões — o refinamento
  vem da tipografia, o clima vem do fundo.

  Fonte da direção visual: mockup aprovado em
  .superpowers/brainstorm/99520-1787771720/content/hibrido-bc.html
  (intensidade de brilho, opacidade do grão, escala tipográfica e
  espaçamento entre blocos foram extraídos de lá; a estrutura de
  classes segue o brief da Task 9).

  Sem build, sem pré-processador — CSS puro servido estaticamente.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,900;1,9..144,300&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --fundo: #060607;
  --texto: #f5f1ea;
  --acento: #d62828;
  --fio: rgba(245, 241, 234, .13);
  --suave: rgba(245, 241, 234, .55);
}

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

/* Reset mínimo de botão — os componentes (.botao, .opcao) definem
   sua própria aparência; isto só remove o estilo nativo do navegador
   (relevante principalmente no Safari). */
button {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

html,
body {
  /* guarda contra rolagem horizontal — critério de verificação da Task 9 */
  overflow-x: hidden;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
}

/* Luz vermelha subindo do rodapé — intensidade extraída do mockup
   aprovado (mais forte que o rascunho do brief: .46/.12/.20 em vez
   de .30/.08/.12). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 80% at 50% 116%, rgba(214, 40, 40, .46) 0%, rgba(214, 40, 40, .12) 40%, transparent 66%),
    radial-gradient(70% 50% at 84% -6%, rgba(214, 40, 40, .20) 0%, transparent 60%);
}

/* Grão de película — opacidade extraída do mockup (.55, não .5) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 2px);
}

.container {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px;
}

/* ---------- Tipografia editorial ---------- */

.nome-arquetipo {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 900;
  font-size: 60px;
  letter-spacing: -.028em;
  line-height: .88;
  margin-bottom: 14px;
}

.citacao {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14.5px;
  /* cor um pouco mais clara que --suave: o mockup usa .62 para a
     citação em itálico, que lê mais escura que texto reto no mesmo
     tom por causa do peso fino — compensação de legibilidade */
  color: rgba(245, 241, 234, .62);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* coluna mais estreita para a citação, como no mockup (74% do
   contêiner) — só acima do breakpoint móvel, para não forçar
   quebras de linha demais em telas pequenas */
@media (min-width: 481px) {
  .citacao {
    max-width: 74%;
  }
}

.fio {
  height: 1px;
  background: var(--fio);
  margin-bottom: 14px;
}

.rotulo {
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--acento);
  margin-bottom: 14px;
}

/* ---------- Cartão (contêiner de conteúdo) ----------
   Não é o "cartão de vidro" com gradiente grande da v1: é uma
   borda fina (mesmo fio de 1px usado como divisor) com cantos
   arredondados, extraída do raio de 14px do mockup. O clima
   continua vindo do fundo global (glow + grão do body); o cartão
   só delimita o bloco de conteúdo. */
.cartao {
  position: relative;
  border: 1px solid var(--fio);
  border-radius: 14px;
  padding: 28px 24px;
}

/* ---------- Medidor de intensidade ----------
   Substitui o emoji removido: mostra o quanto o arquétipo
   dominou a pontuação. */
.medidor {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.medidor i {
  height: 2px;
  flex: 1;
  background: rgba(245, 241, 234, .14);
  border-radius: 2px;
  font-style: normal;
}

.medidor i.on {
  background: var(--texto);
  box-shadow: 0 0 8px rgba(245, 241, 234, .45);
}

/* ---------- Telas ---------- */

.tela {
  display: none;
}

.tela.ativa {
  display: block;
  animation: tela-entra .4s ease;
}

@keyframes tela-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Campos do formulário ---------- */

.campo {
  margin-bottom: 18px;
}

.campo label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: 7px;
  font-weight: 500;
}

.campo input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(245, 241, 234, .04);
  border: 1px solid var(--fio);
  border-radius: 10px;
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
  transition: border-color .2s;
}

/* outline NÃO é removido aqui — critério de aceite 13 exige foco
   visível em todo elemento interativo. O contorno vem da regra
   :focus-visible global mais abaixo; este seletor só ajusta a cor
   da borda. */
.campo input:focus {
  border-color: var(--acento);
}

.campo input[aria-invalid="true"] {
  border-color: #e05b5b;
}

.campo .erro {
  display: none;
  font-size: 12px;
  color: #e05b5b;
  margin-top: 6px;
}

.campo .erro.visivel {
  display: block;
}

.campo .sugestao {
  font-size: 12px;
  color: var(--suave);
  margin-top: 6px;
}

.campo .sugestao button {
  background: none;
  border: none;
  color: var(--acento);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Aviso de dados reais na tela inicial. Fica acima dos campos de proposito:
   depois de digitar, a pessoa nao volta para ler. */
.aviso-dados {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 2px solid var(--acento);
  background: rgba(214, 40, 40, .07);
  border-radius: 0 8px 8px 0;
  color: var(--texto);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Opções do quiz ---------- */

.opcao {
  /* flex + min-height garantem alvo de toque confortavel no celular com o
     texto centrado verticalmente; a caixa inteira e o botao, nao so o texto. */
  display: flex;
  align-items: center;
  min-height: 56px;
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  margin-bottom: 10px;
  background: rgba(245, 241, 234, .04);
  border: 1px solid var(--fio);
  border-radius: 12px;
  color: var(--texto);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s, opacity .2s;
}

/* :not(.mais):not(.menos) evita que o hover, de maior especificidade
   ((0,0,3,0) contra (0,0,2,0) de .opcao.mais/.opcao.menos), sobrescreva
   a cor de borda que sinaliza qual opção já foi marcada — do contrário
   o indicador some justamente ao passar o mouse sobre ele. */
.opcao:hover:not(:disabled):not(.mais):not(.menos) {
  border-color: rgba(245, 241, 234, .28);
}

/* .mais se distingue de .menos e do estado neutro não só por cor:
   o box-shadow interno engrossa a borda (lê como ~2px) sem causar
   reflow, e .menos usa borda tracejada. Critério: os três estados
   continuam distinguíveis em escala de cinza (verificado — ver
   relatório da Task 9). */
.opcao.mais {
  border-color: var(--acento);
  background: rgba(214, 40, 40, .12);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.opcao.menos {
  opacity: .4;
  border-style: dashed;
}

.opcao:disabled {
  cursor: default;
}

/* ---------- Foco visível — critério de aceite 13 ----------
   A v1 usava outline:none e isso foi listado como defeito. Todo
   elemento interativo (input, botão, opção do quiz, link) recebe
   este contorno ao navegar por teclado. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* ---------- Botão principal ---------- */

.botao {
  padding: 14px 32px;
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .2s ease, transform .1s ease;
}

.botao:hover:not(:disabled) {
  background: #c11f1f;
}

.botao:active:not(:disabled) {
  transform: translateY(1px);
}

.botao:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ---------- Barra de progresso do quiz ---------- */

.progresso {
  height: 2px;
  background: rgba(245, 241, 234, .12);
  border-radius: 2px;
  overflow: hidden;
}

.progresso-preenchimento {
  height: 100%;
  background: var(--acento);
  transition: width .35s ease;
}

/* Entrada da pergunta seguinte. Curta de proposito: o avanco e
   automatico, entao qualquer animacao mais longa atrasa o teste. */
@keyframes entraPergunta {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.entrando {
  animation: entraPergunta .18s ease-out;
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

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

@media (max-width: 480px) {
  .nome-arquetipo {
    font-size: 42px;
  }
}