/* ============================================================================
   OREM — criação de conta no site

   Mesma identidade da landing page: mesma fonte, mesmos botões, mesmos ícones,
   e um guia diferente acompanhando cada pergunta. A cor da tela inteira é a do
   personagem daquele passo, então avançar é visível no canto do olho.

   Sobre dado pessoal, e isto é regra e não preferência:
   - nada do que a pessoa responde encosta em localStorage, sessionStorage,
     cookie ou URL. Vive numa variável de memória e morre ao fechar a aba;
   - a sessão do Supabase NÃO é persistida no navegador. Ela existe pelos poucos
     segundos entre criar a conta e gravar as respostas, e some junto com a
     página. Não há token guardado em lugar nenhum;
   - não há script de terceiro nesta página. A conversa com o servidor é feita
     com fetch direto, para nenhuma biblioteca de fora chegar perto do campo de
     senha.
   ============================================================================ */

body.conta{background:var(--c-fraca,#fff8f0);transition:background .5s ease;min-height:100vh}

/* ---------- topo enxuto ---------- */
.conta header{background:transparent;border:none;position:static}
.conta .topo{height:88px}
.conta .volta-site{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--grafite)}
.conta .volta-site:hover{color:var(--laranja)}

/* ---------- barra de progresso ---------- */
.quiz-barra{max-width:var(--largura);margin:0 auto 6px;padding:0 24px}
.quiz-barra div{height:14px;background:#fff;border-radius:100px;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(0,0,0,.05)}
.quiz-barra i{display:block;height:100%;width:var(--p,0%);background:var(--c,var(--laranja));
  border-radius:100px;transition:width .45s cubic-bezier(.2,.7,.3,1),background .5s}

/* ---------- palco ---------- */
.quiz{padding:10px 0 80px}
.passo{display:none}
.passo.on{display:block;animation:entra .45s cubic-bezier(.2,.7,.3,1)}
.passo-grade{display:grid;grid-template-columns:330px 1fr;gap:64px;align-items:center;
  max-width:var(--largura);margin:0 auto;padding:18px 24px 0}
.passo-arte{position:relative}
.passo-arte img{width:100%;max-width:330px;margin:0 auto;
  filter:drop-shadow(0 22px 26px rgba(20,26,28,.16));animation:passeia 6s ease-in-out infinite}
.passo-fala{
  position:relative;margin-top:14px;background:#fff;border:3px solid var(--borda);
  border-radius:20px;padding:13px 18px;text-align:center;font-size:15px;font-weight:800;
  color:var(--carvao);line-height:1.35;box-shadow:0 10px 24px rgba(20,26,28,.07);
}
.passo-fala::after{content:"";position:absolute;left:50%;top:-12px;width:19px;height:19px;margin-left:-9px;
  background:#fff;border-left:3px solid var(--borda);border-top:3px solid var(--borda);
  transform:rotate(45deg);border-radius:5px 0 0 0}
.passo-miolo{max-width:620px}
.passo h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.passo .conta-sub{font-size:17px;margin-bottom:26px}
.passo .olho{background:#fff;color:var(--c);box-shadow:0 0 0 2px var(--c) inset;transition:color .5s,box-shadow .5s}
@media(max-width:940px){
  .passo-grade{grid-template-columns:1fr;gap:20px;padding-top:22px;text-align:center}
  .passo-arte img{max-width:190px}
  .passo-fala{display:none}
  .passo-miolo{max-width:none}
  .passo .conta-sub{margin-left:auto;margin-right:auto}
}

/* ---------- opções ---------- */
.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.opcoes.uma-coluna{grid-template-columns:1fr}
@media(max-width:640px){.opcoes{grid-template-columns:1fr}}
.opcao{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:#fff;border:3px solid var(--borda);border-radius:18px;padding:14px 17px;
  font-family:inherit;font-size:16.5px;font-weight:800;color:var(--carvao);cursor:pointer;
  box-shadow:0 4px 0 var(--borda);transition:border-color .15s,box-shadow .15s,transform .08s,background .15s;
}
.opcao:hover{border-color:var(--c);box-shadow:0 4px 0 var(--c-fraca)}
.opcao:active{transform:translateY(3px);box-shadow:0 1px 0 var(--borda)}
.opcao .marca-op{
  width:26px;height:26px;border-radius:9px;flex:none;border:3px solid var(--borda);
  display:grid;place-items:center;transition:background .15s,border-color .15s;
}
.opcoes[data-modo="uma"] .marca-op{border-radius:50%}
.opcao .marca-op svg{width:16px;height:16px;fill:#fff;opacity:0;transition:opacity .15s}
.opcao.escolhida{border-color:var(--c);background:var(--c-fraca);box-shadow:0 4px 0 var(--c)}
.opcao.escolhida .marca-op{background:var(--c);border-color:var(--c)}
.opcao.escolhida .marca-op svg{opacity:1}

/* ---------- campos ---------- */
.campo{display:block;margin-bottom:18px}
.campo span{display:block;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--grafite);margin-bottom:8px}
.campo input{
  width:100%;font-family:inherit;font-size:17px;font-weight:700;color:var(--carvao);
  background:#fff;border:3px solid var(--borda);border-radius:16px;padding:16px 18px;
  transition:border-color .15s;
}
.campo input:focus{outline:none;border-color:var(--c)}
.campo input::placeholder{color:#c4c4c4;font-weight:600}
.dica{font-size:14px;color:var(--grafite);margin:-8px 0 20px}
.sugestoes{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 26px}
.sugestao{
  background:#fff;border:3px solid var(--borda);border-radius:100px;padding:9px 16px;
  font-family:inherit;font-size:15px;font-weight:800;color:var(--grafite);cursor:pointer;transition:.15s;
}
.sugestao:hover{border-color:var(--c);color:var(--c)}

/* ---------- consentimento ---------- */
.dados-lista{display:grid;gap:12px;margin-bottom:22px}
.dado{background:#fff;border:3px solid var(--borda);border-radius:18px;padding:18px 20px}
.dado h3{font-size:17px;margin-bottom:5px}
.dado p{font-size:15.5px;max-width:none}
.miudo{font-size:13.5px;color:var(--grafite);margin-bottom:22px}

/* ---------- rodapé do passo ---------- */
.passo-fim{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.passo-fim .botao,.passo-fim .botao-2{min-width:210px;justify-content:center}
.voltar-passo{background:none;border:none;font-family:inherit;font-size:15px;font-weight:800;
  color:var(--grafite);cursor:pointer;padding:10px 4px}
.voltar-passo:hover{color:var(--carvao)}
.recado{margin-top:16px;font-size:15.5px;font-weight:800;color:#d33;max-width:52ch}
.recado:empty{display:none}
.botao[disabled],.botao-2[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---------- tela final ---------- */
.pronto-grade{max-width:900px;margin:0 auto;padding:20px 24px 0;text-align:center}
.pronto-grade img.selo{width:190px;margin:0 auto 22px;filter:drop-shadow(0 20px 22px rgba(20,26,28,.14));
  animation:passeia 5.6s ease-in-out infinite}
.pronto-grade h2{margin-bottom:12px}
.pronto-grade > p{margin-left:auto;margin-right:auto}
.degraus{display:grid;gap:14px;margin:34px 0 30px;text-align:left}
.degrau-num{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--laranja);color:#fff;font-weight:900;font-size:17px}
.aviso-conta{background:#fff;border:3px solid var(--creme-forte);border-radius:20px;
  padding:20px 24px;margin-top:8px;font-size:16px;text-align:left}
.aviso-conta strong{display:block;margin-bottom:4px}

/* ---------- entrar ---------- */
.simples{max-width:640px;margin:0 auto;padding:30px 24px 90px}
.simples .caixa{background:#fff;border:3px solid var(--borda);border-radius:28px;padding:38px 34px;margin-top:26px}
.simples h1{font-size:clamp(30px,4vw,42px);margin-bottom:10px}

/* No celular a coluna toda é centralizada, então a linha de "Voltar" + botão
   também precisa ser: encostada à esquerda ela era a única coisa desalinhada
   da tela. */
@media(max-width:940px){
  /* botão principal ocupando a largura toda e "Voltar" embaixo dele, como a
     referência faz: no celular a ação primária não divide linha com nada. */
  .passo-fim{flex-direction:column-reverse;align-items:stretch;gap:4px}
  .passo-fim .botao,.passo-fim .botao-2{min-width:0;width:100%}
  .voltar-passo{align-self:center;padding:14px 4px}
  .dados-lista{text-align:center}
}
@media(max-width:600px){
  .passo h2{font-size:27px;line-height:1.2}
  .passo .conta-sub{font-size:16px}
  .opcao{font-size:15.5px;padding:13px 15px}
  .p-ficha h3{font-size:31px}
  .p-frase{font-size:18px}
  .campo input{font-size:16px;padding:14px 16px}
}