/* Quiz da Clarissa: mobile primeiro, sem fonte externa (carregamento < 1,5 s em 4G).
   29/10 (Rodolpho): visual noturno — os roxos da Clarissa sobre fundo escuro, títulos em Outfit fina e texto em
   Inter, as duas servidas daqui (assets/fontes, subconjunto latino, font-display: swap). Vale para todos os funis.
   29/10 (Rodolpho, depois do primeiro teste): "muito dark" — o fundo vira um roxo profundo com luzes violeta nos
   cantos, as opções ganham superfície e borda visíveis e o destaque passa ao lilás violeta (#CE94FF). */
@font-face { font-family: "Outfit"; src: url("fontes/outfit.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontes/inter.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
:root {
  --fundo: #1C1128;
  --cartao: #2A1A3B;
  --tinta: #FAF7FF;
  --nevoa: #C6B7D6;
  --suave: #A493B8;
  --linha: rgba(218, 190, 245, .25);
  --marca: #7B3DB8;
  --marca-clara: #8C4CCB;
  --brilho: #B36EF0;
  --lilas: #CE94FF;
  --selecionado: linear-gradient(110deg, rgba(128, 62, 182, .62), rgba(91, 44, 136, .43));
  --superficie: linear-gradient(110deg, rgba(211, 177, 241, .055), rgba(189, 144, 224, .075));
  --whatsapp: #1F8A4C;
  --erro: #F4A3AB;
  --raio: 16px;
  --titulo: "Outfit", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; color: var(--tinta); background: var(--fundo);
  font: 17px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; isolation: isolate;
}
/* as luzes violeta nos cantos (fixas: não rolam com a tela) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 96% 2%, rgba(143, 80, 209, .47), transparent 40%),
    radial-gradient(ellipse at -8% 87%, rgba(128, 62, 194, .48), transparent 43%),
    radial-gradient(ellipse at 51% 43%, rgba(92, 46, 128, .12), transparent 65%),
    linear-gradient(125deg, #1D1129, #22132F 55%, #1B1025);
}
.topo {
  position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: 12px 16px 10px; background: rgba(31, 17, 44, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(213, 175, 250, .22);
}
.marca { grid-column: 2; text-align: center; font-family: var(--titulo); font-weight: 500; font-size: 1.05rem; letter-spacing: .01em; color: var(--tinta); }
.voltar {
  grid-column: 1; grid-row: 1; width: 40px; height: 40px; border: 1px solid var(--linha); border-radius: 50%;
  background: transparent; color: var(--tinta); font-size: 26px; line-height: 1; cursor: pointer;
}
.barra { grid-column: 1 / -1; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--linha); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--marca), var(--lilas)); transition: width .25s ease; }
.tela { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
h1 {
  font-family: var(--titulo); font-weight: 400; font-size: 1.85rem; line-height: 1.18; letter-spacing: -.03em;
  margin: 10px 0 8px; text-wrap: balance;
}
h1:focus { outline: none; }
.texto { margin: 0; color: var(--nevoa); font-weight: 300; line-height: 1.6; }
.opcoes { display: flex; flex-direction: column; gap: 12px; }
.opcoes.chips { flex-direction: row; flex-wrap: wrap; }
.opcao {
  position: relative; display: block; width: 100%; min-height: 64px; padding: 18px 20px; text-align: left; text-decoration: none;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  font: inherit; font-size: 1.05rem; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.chips .opcao { width: auto; min-height: 44px; padding: 10px 16px; border-radius: 999px; }
@media (hover: hover) { .opcao:hover { border-color: rgba(219, 182, 252, .6); background-color: rgba(165, 105, 208, .10); } }
.opcao[aria-pressed="true"] {
  border-color: var(--lilas); background: var(--selecionado);
  box-shadow: inset 0 0 0 1px rgba(206, 148, 255, .3), 0 0 32px rgba(131, 64, 181, .11);
}
/* a lista de respostas leva o círculo à direita, que vira o "check" na escolhida (como no protótipo de 29/10) */
.opcoes:not(.chips) > .opcao:not(.ligar) { padding-right: 60px; }
.opcoes:not(.chips) > .opcao:not(.ligar)::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border: 1.5px solid #A58ABA; border-radius: 50%;
}
.opcoes:not(.chips) > .opcao:not(.ligar)[aria-pressed="true"]::after {
  border-color: transparent; background: linear-gradient(135deg, #D29FFF, #AC61ED); box-shadow: 0 0 20px rgba(187, 109, 248, .22);
}
.opcoes:not(.chips) > .opcao:not(.ligar)[aria-pressed="true"]::before {
  content: ""; position: absolute; z-index: 1; right: 27px; top: 50%; width: 7px; height: 12px; margin-top: -8px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.opcao.ligar { text-align: center; font-weight: 600; }
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.escala .opcao { text-align: center; font-family: var(--titulo); font-weight: 400; font-size: 1.3rem; padding: 14px 0; }
.extremos { display: flex; justify-content: space-between; color: var(--suave); font-size: .9rem; }
.grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.grupo legend { font-weight: 500; color: var(--nevoa); margin-bottom: 8px; padding: 0; }
.rotulo { font-weight: 400; color: var(--nevoa); margin-top: 6px; line-height: 1.45; }
input[type="text"], input[type="tel"], textarea {
  width: 100%; padding: 14px 16px; font: inherit; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao);
}
/* exemplo da pergunta aberta (11/10): cor suave legível (~5,7:1 sobre o cartão), sem a opacidade do navegador */
textarea::placeholder, input::placeholder { color: var(--suave); opacity: 1; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--lilas); outline-offset: 2px;
}
.form { display: flex; flex-direction: column; gap: 12px; }
.primario {
  min-height: 56px; padding: 14px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--marca-clara) 0%, var(--marca) 100%); color: #fff;
  font-family: var(--titulo); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em;
  box-shadow: 0 16px 36px -12px rgba(155, 88, 214, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.primario:hover { filter: brightness(1.08); }
.primario:disabled { opacity: .45; cursor: default; box-shadow: none; filter: none; }
/* 29/10 (Rodolpho): o "Conversar com a Clarissa" chama o clique — um anel que respira em volta da pílula */
.primario.chamar { animation: chamar 2.4s ease-in-out infinite; }
@keyframes chamar {
  0%, 100% { transform: scale(1); box-shadow: 0 16px 36px -12px rgba(155, 88, 214, .6), 0 0 0 0 rgba(206, 148, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .22); }
  50% { transform: scale(1.025); box-shadow: 0 18px 40px -10px rgba(155, 88, 214, .75), 0 0 0 10px rgba(206, 148, 255, 0), inset 0 1px 0 rgba(255, 255, 255, .22); }
}
.primario.chamar:disabled { animation: none; }
.primario.whatsapp { background: var(--whatsapp); margin-top: 6px; box-shadow: 0 14px 30px -14px rgba(31, 138, 76, .7); }
.link { border: 0; background: none; color: var(--lilas); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--nevoa); }
.aceite input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--brilho); }
.aceite a, .rodape a { color: var(--lilas); }
.aviso, .erro { color: var(--erro); font-size: .95rem; margin: 0; }
.erro { max-width: 520px; margin: 0 auto; padding: 0 16px 16px; }
.rodape {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  padding: 16px; font-size: .8rem; color: var(--suave); border-top: 1px solid rgba(218, 190, 245, .12);
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .primario.chamar { animation: none; } }
@media (forced-colors: active) {
  .opcao { border: 1px solid ButtonText; }
  .opcao[aria-pressed="true"] { outline: 2px solid Highlight; }
}