/* ================================================================
   TELAS.CSS
   Estilos que só existem dentro de UMA tela específica da jornada —
   diferente dos outros arquivos CSS (que são componentes reutilizáveis
   em várias telas), o que está aqui não faria sentido fora do
   contexto onde foi criado. Se um dia esses elementos passarem a se
   repetir em mais de uma tela, é sinal de que vale a pena "promovê-los"
   para um arquivo de componente próprio.
   ================================================================ */

/* ---- TELA DE INTRODUÇÃO ---- */
.intro-photo{
  /* moldura onde entra a foto do Donni (hoje só um placeholder) */
  margin-top:26px;width:100%;aspect-ratio:4/5;
  /* aspect-ratio garante que a caixa mantenha essa proporção MESMO
     antes da foto real carregar — evita que o layout "pule" quando a
     imagem termina de carregar */
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#0c0c0c;
}
.intro-photo img{width:100%;height:100%;object-fit:contain;display:block;}
/* object-fit:cover faz a foto preencher a caixa toda, cortando o
   excesso, em vez de distorcer a imagem pra caber */
.ph{font-size:10px;letter-spacing:0.2em;color:rgba(222, 255, 145, 0.521);text-align:center;line-height:1.8;}
/* estilo do texto placeholder ("VÍDEO TATUANDO AQUI" etc.) */

.marquee{
  /* a faixa com o texto passando: "ARTE EXCLUSIVA · NÃO FAÇO CÓPIAS..." */
  margin-top:22px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  overflow:hidden;white-space:nowrap;padding:9px 0;
  /* overflow:hidden esconde a parte do texto que ultrapassa a largura
     da tela; white-space:nowrap impede que ele quebre linha */
}
.marquee span{
  display:inline-block;font-size:9.5px;letter-spacing:0.22em;color:rgba(222, 255, 145, 0.500);
  animation:slide 34s linear infinite;
  /* pra deixar o texto mais rápido/lento, mexa no "34s" — quanto menor
     o número, mais rápido ele desliza */
}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* anda só METADE da largura do elemento (translateX(-50%)) porque, no
   HTML, o texto está escrito duas vezes seguidas dentro do mesmo
   <span> — isso cria um loop perfeito sem "salto" visível quando a
   animação reinicia. Se você mudar o texto, lembre de manter as duas
   cópias iguais dentro do span, senão o loop quebra visualmente. */

/* ---- MENSAGEM DE ERRO / VALIDAÇÃO ---- */
.error{
  display:none;margin-top:9px;font-size:11px;color:var(--blood);letter-spacing:0.02em;
}
.error.active{display:block;animation:enter .25s ease both;}
/* só aparece quando js/jornada.js adiciona a classe .active — acontece
   quando a pessoa tenta avançar sem preencher um campo obrigatório */

/* ---- TELA 06 · O INVESTIMENTO (regras de sinal/pagamento) ---- */
.info{
  margin-top:22px;background:rgb(9, 9, 9);border:1px solid var(--line);border-left:2px solid var(--acid);
  /* a borda esquerda mais grossa e verde cria um efeito de "citação em
     destaque", chamando atenção pra caixa inteira sem precisar de fundo
     colorido chamativo */
  border-radius:3px;padding:16px;font-size:12.5px;line-height:1.75;color:var(--muted);
}
.info b{color: rgb(222, 255, 145);font-weight:700;letter-spacing:0.04em;}
/* palavras-chave em negrito dentro do texto (SINAL, NO DIA, REMARCAÇÃO) */
.info .row + .row{margin-top:13px;padding-top:13px;border-top:1px solid var(--line-soft);}
/* cada bloco de regra (sinal / pagamento / remarcação) fica separado
   por uma linha fina — mas só a partir do SEGUNDO bloco em diante
   (por isso o seletor é ".row + .row", "row logo depois de outro row",
   e não ".row" sozinho: o primeiro bloco não precisa de linha acima) */
.info .flag{color:var(--blood);font-weight:600;}
/* classe pronta pra destacar em vermelho alguma palavra de alerta
   dentro do texto (ex: "REMARCOU?"), caso você queira usar no futuro */

/* ---- TELA DE VÍDEO ---- */
.video-wrap{
  margin-top:22px;width:100%;aspect-ratio:9/13;max-height:56vh;
  /* aspect-ratio 9/13 é formato vertical, tipo "stories" de rede
     social; max-height:56vh trava a altura em 56% da tela pra o vídeo
     não dominar toda a área visível */
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#0b0b0b;
}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- TELA FINAL (resumo das respostas antes de enviar) ---- */
.summary{
  margin-top:22px;background:rgb(9, 9, 9);border:1px solid var(--line);border-radius:3px;
  font-size:12px;line-height:1.6;
  overflow:hidden;
}
.summary .item{
  display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-soft);
  /* cada linha do resumo (NOME, CIDADE, LOCAL...) é montada
     dinamicamente pelo JS em js/jornada.js, função buildSummary() */
}
.summary .item:last-child{border-bottom:none;}
/* a última linha não tem separador embaixo, pra não sobrar uma borda "solta" no fim da caixa */
.summary .k{color: rgb(222, 255, 145);letter-spacing:0.08em;font-size:10px;min-width:98px;padding-top:2px;}
/* "k" de "key" = o rótulo em maiúsculas (ex: "NOME") */
.summary .v{flex:1;color:var(--bone);word-break:break-word;}
.review-prompt{display:flex;align-items:center;gap:8px;}
.review-prompt svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--acid);stroke-width:2;}
.sub.review-detail{margin-top:8px;}
/* "v" de "value" = a resposta digitada pela pessoa; word-break evita
   que um texto muito longo (ex: uma cidade com nome grande) estoure
   a largura da caixa */

.lgpd{margin-top:18px;font-size:10px;line-height:1.7;color:rgba(238,233,220,0.3);}
/* aviso pequeno sobre uso dos dados, no rodapé da tela final */