:root{
  --roxo:#8B5CF6; --violeta:#4C1D95; --dourado:#D4A24E;
  --cosmico:#0D0A14; --lunar:#F5F3FF; --lavanda:#C4B5FD;
  --display:'Cormorant Garamond',serif; --corpo:'Sora',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--corpo);background:var(--cosmico);color:var(--lunar);min-height:100dvh;line-height:1.6}
#ceu{position:fixed;inset:0;z-index:0;pointer-events:none}

.topo{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid rgba(139,92,246,.18);
  background:rgba(13,10,20,.6);backdrop-filter:blur(8px);
}
.voltar{color:var(--lavanda);text-decoration:none;font-size:.9rem}
.voltar:hover{color:var(--dourado)}
.marca{font-family:var(--display);font-size:1.2rem}
.marca em{font-style:normal;color:var(--roxo);font-weight:700;text-shadow:0 0 10px rgba(139,92,246,.6)}
.usuario{font-size:.8rem;color:var(--lavanda);text-transform:capitalize;opacity:.8}

.animais{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:2rem 1.4rem 4rem}
.bloco{
  background:rgba(26,21,37,.6);border:1px solid rgba(139,92,246,.2);
  border-radius:18px;padding:2rem;margin-bottom:1.4rem;backdrop-filter:blur(6px);
}
.centro{text-align:center;padding:3rem 1rem;color:var(--lavanda)}
.lua-girando{font-size:2.5rem;display:inline-block;animation:girar 3s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* intro */
.titulo{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.4rem);font-weight:500;margin-bottom:1rem;text-align:center}
.intro-texto{color:var(--lunar);margin-bottom:1.2rem;line-height:1.7}
.intro-aviso{color:var(--dourado);font-size:.9rem;margin-bottom:1.2rem;padding:.8rem;background:rgba(212,162,78,.1);border-radius:10px}

/* botões */
.botao{
  padding:.85rem 1.6rem;border-radius:999px;border:none;cursor:pointer;
  font-family:var(--corpo);font-size:1rem;font-weight:600;text-decoration:none;display:inline-block;text-align:center;
}
.botao-primario{background:linear-gradient(135deg,var(--roxo),var(--violeta));color:var(--lunar);box-shadow:0 4px 20px rgba(139,92,246,.3)}
.botao-primario:hover{transform:translateY(-1px)}
.botao-secundario{background:rgba(139,92,246,.12);color:var(--lavanda);border:1px solid rgba(139,92,246,.3)}
#btn-comecar{display:block;margin:0 auto}

/* questionário */
.progresso{height:6px;background:rgba(139,92,246,.15);border-radius:999px;overflow:hidden;margin-bottom:1.4rem}
.progresso-barra{height:100%;background:linear-gradient(90deg,var(--roxo),var(--dourado));width:0;transition:width .3s}
.pergunta-num{font-size:.8rem;color:var(--dourado);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.pergunta-texto{font-family:var(--display);font-size:1.5rem;font-weight:500;margin-bottom:1.2rem;line-height:1.4}
.resposta{
  width:100%;background:rgba(13,10,20,.5);border:1px solid rgba(139,92,246,.25);border-radius:12px;
  padding:.9rem;color:var(--lunar);font-family:var(--corpo);font-size:1rem;resize:vertical;
}
.resposta:focus{outline:none;border-color:var(--roxo)}
.campo-data{margin-top:1.2rem}
.campo-data label{display:block;font-size:.85rem;color:var(--lavanda);margin-bottom:.4rem}
.campo-data input{
  background:rgba(13,10,20,.5);border:1px solid rgba(139,92,246,.25);border-radius:10px;
  padding:.7rem;color:var(--lunar);font-family:var(--corpo);font-size:1rem;
}
.navegacao{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem}
.navegacao .botao{flex:1}

/* resultado */
.animal-revelado{text-align:center;margin-bottom:1.6rem}
.animal-emoji{font-size:4.5rem;display:block;margin-bottom:.5rem;filter:drop-shadow(0 0 20px rgba(139,92,246,.5))}
.animal-nome{font-family:var(--display);font-size:2.2rem;font-weight:600;color:var(--dourado)}
.numero-vida{color:var(--lavanda);font-size:.9rem;margin-top:.4rem}
.interpretacao{line-height:1.8;color:var(--lunar)}
.interpretacao p{margin-bottom:1rem}
.premium-cta{
  margin-top:1.6rem;padding:1.4rem;background:rgba(212,162,78,.08);border:1px solid rgba(212,162,78,.3);
  border-radius:14px;text-align:center;
}
.premium-cta p{color:var(--lavanda);margin-bottom:1rem;line-height:1.6}
.acoes-resultado{margin-top:1.6rem;text-align:center}

@media (max-width:560px){
  .bloco{padding:1.4rem}
  .navegacao{flex-direction:column-reverse}
}
.animal-img{width:220px;max-width:80%;height:auto;border-radius:14px;box-shadow:0 8px 30px rgba(13,10,20,.55);display:block;margin:0 auto .4rem}