/* ============================================================
   quiz.css — página /diagnostico
   Carrega DEPOIS de style.css. Só acrescenta; não redefine
   nenhum token nem nenhuma classe da home.
   Paleta e raios vêm das variáveis já declaradas em style.css.
   ============================================================ */

/* ---------- contêiner da página ---------- */
.quiz{
  max-width:720px;
  margin:0 auto;
  padding:clamp(56px,10vw,96px) var(--space-lg) clamp(40px,8vw,72px);
  width:100%;
}

/* style.css dá padding de seção a todo <section>; aqui as telas
   trocam entre si e não podem carregar esse respiro. */
.quiz section{padding:0}

/* ---------- barra de progresso ---------- */
.quiz .barra-progresso{
  position:fixed;
  top:0;left:0;right:0;
  height:4px;
  background:var(--color-border);
  z-index:10;
}
.quiz .barra-progresso #barra-progresso{
  height:100%;
  width:0;
  background:var(--color-primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  transition:width var(--duration-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .quiz .barra-progresso #barra-progresso{transition:none}
}

/* ---------- troca de telas ---------- */
.tela{display:none}
.tela.ativa{display:block}

.quiz .tela h1{
  font-size:var(--text-hero);
  font-weight:900;
  letter-spacing:-0.03em;
  margin-bottom:20px;
}
.quiz .tela h2{
  font-size:var(--text-4xl);
  font-weight:700;
  margin-bottom:12px;
  max-width:20ch;
}
.quiz .tela .lead{
  font-size:var(--text-lg);
  font-weight:500;
  color:var(--color-text-muted);
  margin-bottom:32px;
  max-width:52ch;
}
.quiz .tela .apoio{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  margin-bottom:4px;
  max-width:52ch;
}

/* ---------- opções ---------- */
.quiz .opcoes{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px;
}

.opcao{
  display:flex;
  align-items:center;
  width:100%;
  min-height:56px;              /* alvo de toque bem acima dos 48px */
  padding:14px 20px;
  text-align:left;
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:500;
  color:var(--color-text);
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:border-color var(--duration-base) var(--ease-out),
             color var(--duration-base) var(--ease-out),
             background var(--duration-base) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out);
}
.opcao:hover,
.opcao:focus-visible{
  border-color:var(--color-primary-hover);
  color:var(--color-primary-hover);
  box-shadow:0 1px 3px rgba(36,31,27,0.08);
}
.opcao:active{background:var(--color-bg-alt)}

/* chips da tela 5 — mesma altura de toque, em linha */
.quiz .opcoes-chips{
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px;
}
.quiz .opcoes-chips:empty{margin-top:0}
.opcao-chip{
  width:auto;
  min-height:48px;
  padding:12px 18px;
}
.opcao-chip.escolhido{
  border-color:var(--color-primary-hover);
  background:rgba(184,92,56,0.10);
  color:var(--color-primary-hover);
  font-weight:600;
}

/* ---------- campos de texto ---------- */
.quiz .campo-livre{
  display:block;
  width:100%;
  min-height:56px;
  margin-top:16px;
  padding:14px 18px;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.quiz .campo-livre::placeholder{color:var(--color-text-muted)}
.quiz .campo-livre:focus{
  outline:2px solid var(--color-primary-hover);
  outline-offset:2px;
  border-color:var(--color-primary-hover);
}
.quiz .oculto{display:none}

.quiz .campo-livre + .btn,
.quiz .opcoes + .btn{margin-top:20px}

/* ---------- escala da tela 7 ---------- */
.quiz #escala-fechamento{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:48px;                  /* alvo de toque */
  margin-top:28px;
  background:transparent;
  cursor:pointer;
}
.quiz #escala-fechamento::-webkit-slider-runnable-track{
  height:6px;
  background:var(--color-border);
  border-radius:var(--radius-sm);
}
.quiz #escala-fechamento::-moz-range-track{
  height:6px;
  background:var(--color-border);
  border-radius:var(--radius-sm);
}
.quiz #escala-fechamento::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:28px;height:28px;
  margin-top:-12px;
  border-radius:var(--radius-sm);
  background:var(--color-primary-hover);
  border:3px solid var(--color-card);
  box-shadow:0 1px 3px rgba(36,31,27,0.08);
}
.quiz #escala-fechamento::-moz-range-thumb{
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  background:var(--color-primary-hover);
  border:3px solid var(--color-card);
  box-shadow:0 1px 3px rgba(36,31,27,0.08);
}
.quiz .escala-valor{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:700;
  color:var(--color-text);
  margin:4px 0 28px;
}
.quiz .escala-valor #escala-numero{color:var(--color-primary-hover)}

/* ---------- tela de resultado ---------- */
.quiz #tela-resultado .rotulo{
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-primary-hover);
  margin-bottom:12px;
}
#faixa-valor{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2rem,6vw,3.5rem);
  letter-spacing:-0.03em;
  line-height:1.08;
  margin-bottom:32px;
  max-width:none;
}

/* Bloco assimétrico: é o que quebra o grid centralizado da página,
   conforme a regra de assimetria pontual do guia de marca. */
#conta-aberta.conta{
  text-align:left;
  margin-left:calc(-1 * clamp(0px,4vw,56px));
  margin-right:clamp(0px,6vw,72px);
  margin-bottom:32px;
  padding:26px 28px;
  background:var(--color-bg-alt);
  border-left:3px solid var(--color-primary);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow:0 1px 3px rgba(36,31,27,0.08);
}
#conta-aberta.conta h3{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  margin-bottom:14px;
}
#conta-aberta.conta p{
  font-size:var(--text-base);
  color:var(--color-text-muted);
  margin-bottom:10px;
  max-width:56ch;
}
#conta-aberta.conta p:last-child{margin-bottom:0}

/* Desceu pra baixo do botão em 05/set. A CTA é a última coisa antes do clique;
   texto legal falando de conversa gravada no instante da decisão planta dúvida
   de vigilância bem onde a pessoa deveria estar tocando. */
.quiz .aviso-lgpd{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  margin-top:32px;
  margin-bottom:24px;
  max-width:56ch;
}

/* A mecânica embaixo do botão, em três fragmentos. Não é parágrafo de
   instrução: é o gesto ficando óbvio antes do toque. O terceiro carrega o peso
   porque é o único que a pessoa precisa fazer. */
.quiz .btn-mecanica{
  margin-top:12px;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  letter-spacing:0.01em;
}
.quiz .btn-mecanica strong{
  color:var(--color-primary-hover);
  font-weight:600;
}

.quiz .pos-clique{
  margin-top:24px;
  padding:20px 22px;
  background:#FFFFFF;
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(36,31,27,.08);
}
.quiz .pos-clique p{margin:0 0 12px}
.quiz .pos-clique p:last-child{margin-bottom:0}
.quiz .pos-clique-destaque{
  font-family:var(--font-title, inherit);
  font-size:1.25rem;
  line-height:1.3;
  font-weight:700;
  color:var(--color-primary-hover);
}
/* O parágrafo que resolve a tela inteira: entrega ao que já enviou a confirmação
   e ao que não enviou o que acontece se enviar, sem perguntar qual dos dois é. */
.quiz .pos-clique-chave{
  font-weight:600;
  color:var(--color-text);
}
.quiz .pos-clique-acao{
  color:var(--color-primary-hover);
  font-weight:600;
}
.quiz .pos-clique-nota{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
}

/* O degrau entre o bloco do teste e a mecânica do WhatsApp. Texto cheio: em
   cinza ele viraria letra miúda, que foi exatamente o defeito do fecho. */
.pitch .pitch-chamada{
  color:var(--color-text);
  font-size:1.0625rem;
  font-weight:600;
}
.quiz .aviso-lgpd a{
  color:var(--color-primary-hover);
  font-weight:600;
}

.quiz .btn-grande{
  padding:18px 32px;
  font-size:var(--text-lg);
}
.quiz .codigo{
  margin-top:16px;
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--color-text-muted);
}

/* ---------- antispam ---------- */
/* Invisível pra pessoa, preenchível por robô. Nada de display:none —
   robô que lê o DOM ignora campo escondido desse jeito. */
#campo-isca{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  opacity:0;
}

/* ---------- rodapé legal ---------- */
.rodape-legal{
  max-width:720px;
  margin:0 auto;
  padding:24px var(--space-lg) 40px;
  border-top:1px solid var(--color-border);
  font-size:0.8rem;
  color:var(--color-text-muted);
}
.rodape-legal p{margin-bottom:6px;max-width:none}
.rodape-legal p:last-child{margin-bottom:0}
.rodape-legal a{
  color:var(--color-text-muted);
  text-decoration:underline;
  text-decoration-color:var(--color-border);
}
.rodape-legal a:hover{color:var(--color-primary-hover)}

/* ---------- responsivo ---------- */
@media (max-width:480px){
  .quiz .tela h2{max-width:none}
  .quiz .opcoes-chips{flex-direction:column}
  .opcao-chip{width:100%}
  #conta-aberta.conta{
    margin-left:0;
    margin-right:0;
    padding:22px 20px;
    border-radius:0 var(--radius-md) var(--radius-md) 0;
  }
  .quiz .btn-grande{width:100%;justify-content:center}
}


/* ============================================================
   Acrescentado na revisão de 23/ago: voltar, pitch e conversa
   ============================================================ */

/* ---------- voltar ---------- */
/* Ação secundária: tem que existir sem competir com as opções da pergunta.
   Nasceu sem estilo porque foi criado em JavaScript depois do CSS pronto. */
.quiz-voltar{
  display:block;
  margin:var(--space-lg) auto 0;
  padding:8px 4px;
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  color:var(--color-text-muted);
  font-family:var(--font-body);
  font-size:.9375rem;
  cursor:pointer;
  transition:color var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out);
}
.quiz-voltar:hover,
.quiz-voltar:focus-visible{
  color:var(--color-primary-hover);
  border-bottom-color:var(--color-primary-hover);
}

/* ---------- a ponte pro WhatsApp ---------- */
.pitch{
  margin:var(--space-xl) 0 var(--space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
}
.pitch p{
  margin:0;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--color-text);
}
/* A frase que tira a culpa dela. É a virada do texto, então carrega peso. */
.pitch .pitch-virada{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.4;
  text-wrap:balance;
}

/* ---------- conversa acontecendo ---------- */
/* O chat-mock e os balões já existem no style.css. Aqui entra só o que a
   animação precisa: estado inicial escondido e o indicador de digitando. */
.pitch .chat-mock{margin:var(--space-lg) 0}

.chat-mock.animando .fala{
  opacity:0;
  transform:translateY(6px);
}
.chat-mock .fala{
  opacity:1;
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.chat-mock.animando .fala.visivel{
  opacity:1;
  transform:none;
}

.chat-digitando{
  display:inline-flex;
  gap:4px;
  align-items:center;
  align-self:flex-start;
  padding:12px 14px;
  margin:0;
  width:fit-content;
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  border-bottom-left-radius:2px;
}
.chat-digitando span{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-text-muted);
  animation:pontinho 1.2s infinite ease-in-out;
}
.chat-digitando span:nth-child(2){animation-delay:.15s}
.chat-digitando span:nth-child(3){animation-delay:.3s}

@keyframes pontinho{
  0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}
}

/* Sem movimento: tudo visível de uma vez, nada piscando. */
@media (prefers-reduced-motion:reduce){
  .chat-mock.animando .fala,
  .chat-mock .fala{opacity:1;transform:none;transition:none}
  .chat-digitando span{animation:none}
}


/* ---------- quem fala, e o que é sistema ---------- */
/* As linhas de sistema estavam lidas como parte da conversa. Viram divisor
   centralizado com fio dos dois lados, que é como todo mundo já reconhece
   "isto não é fala de ninguém". */
.pitch .chat-meta{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:center;
  font-style:italic;
  color:var(--color-text-muted);
  margin:2px 0 14px;
}
.pitch .chat-meta::before,
.pitch .chat-meta::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--color-border);
}

/* Etiqueta de quem falou. Sem isso, agente e humano viram a mesma voz. */
.pitch .chat-quem{
  display:block;
  font-size:.6875rem;
  color:var(--color-text-muted);
  text-align:right;
  margin:0 2px 3px 0;
}

/* A pessoa da clínica: musgo sobre papel, contra o terracota do agente.
   Duas vozes diferentes, sem precisar de foto nem de nome inventado. */
.pitch .chat-bubble.humano{
  background:var(--color-bg);
  border:1px solid var(--color-secondary);
  margin-left:auto;
  border-bottom-right-radius:2px;
}

/* O indicador de digitando agora é a própria .fala, então precisa alinhar. */
.pitch .fala{margin:0}
.pitch .fala.chat-digitando{margin-bottom:10px}


/* O argumento mais forte da oferta não pode passar batido na leitura. */
.pitch .pitch-teste{
  background:var(--color-bg-alt);
  border-left:3px solid var(--color-secondary);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:14px 18px;
  font-size:1.125rem;
}
.pitch .pitch-teste strong{font-weight:600}

/* Última linha antes do botão: empurra sem gritar. */
/* Cor cheia desde 05/set. O fecho nasceu como uma linha descartável e por isso
   era cinza; hoje ele carrega o argumento que leva ao botão. Em cinza claro, num
   bloco logo acima de um aviso legal também cinza, o lead lê como letra miúda e
   pula. Foi exatamente o que aconteceu no teste no Android. */
.pitch .pitch-fecho{
  color:var(--color-text);
  font-size:1.0625rem;
}

/* ---------- barra de consentimento ---------- */
/* Barra, e nao modal: ela nao bloqueia o quiz. Quem quiser responder antes de
   decidir, responde — e o consentimento.js guarda os eventos pra disparar se o
   aceite vier depois. Modal aumentaria a taxa de aceite e derrubaria a de
   quiz iniciado, que e a metrica que importa mais aqui. */
.barra-consentimento{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding:16px var(--space-lg);
  background:var(--color-bg);
  border-top:1px solid var(--color-border);
  box-shadow:0 -8px 28px rgba(0,0,0,0.10);
}
.barra-consentimento .consentimento-texto{flex:1 1 380px;min-width:0}
.barra-consentimento p{
  margin:0;
  font-size:var(--text-sm);
  line-height:1.5;
  color:var(--color-text-muted);
  max-width:74ch;
}
.barra-consentimento a{color:var(--color-primary-hover);font-weight:600}
.barra-consentimento .consentimento-botoes{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}
/* Os dois botoes tem o mesmo tamanho e a mesma area de clique. O primario
   pesa mais na cor, o que e aceito; esconder ou encolher o "Recusar" e o que
   nao pode. */
.barra-consentimento .btn{white-space:nowrap}

/* Aceitar e Recusar com o MESMO peso, desde 05/set. Antes o aceitar era
   btn-primary (terracota cheio) e o recusar btn-ghost (contorno apagado):
   destaque diferente para escolhas que a lei trata como equivalentes, e o
   primeiro item da lista de "o que evitar" do guia orientativo da ANPD.

   Contorno terracota nos dois, e não preenchimento nos dois: dois botões cheios
   numa barra fixa gritam e roubam a atenção do quiz, que é o que a pessoa veio
   fazer. Igual não precisa ser alto, precisa ser igual. */
.barra-consentimento .btn-consent{
  background:transparent;
  color:var(--color-primary-hover);
  border:1.5px solid var(--color-primary-hover);
  font-weight:600;
}
.barra-consentimento .btn-consent:hover{
  background:var(--color-primary-hover);
  color:#FBF7F2;
  transform:translateY(-2px);
}

@media (max-width:640px){
  .barra-consentimento{padding:14px 20px}
  .barra-consentimento .consentimento-botoes{width:100%}
  .barra-consentimento .consentimento-botoes .btn{flex:1 1 0}
}