/* A-Livia-ndo — bordô e dourado; cada área do quiz tem uma cor de campo; a tela muda de cor quando a parte muda,
   e o mapa do resultado usa as mesmas cores. Fora isso, tudo fica quieto. */
:root{
  --bordo:#4A0F1F;
  --bordo-2:#5E1A2C;
  --ouro:#B8915F;
  --ouro-claro:#DCC29A;
  --tinta:#2E0A14;
  --tinta-suave:#6E4A52;
  --papel:#F6F1EC;

  --A:#E6D5BA;  /* escolha consciente — champanhe */
  --B:#EBC4C6;  /* amor-próprio — rosa */
  --C:#DDBDAA;  /* segurança emocional — nude */
  --D:#D7BDCA;  /* limites e comunicação — malva */
  --E:#CBCFC0;  /* qualidade da relação — sálvia */
  --neutro:#EFE6E1;

  --campo:var(--neutro);
  --display:'Gilda Display', Georgia, serif;
  --texto:'Jost', 'Segoe UI', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  min-height:100dvh; background:var(--campo); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .7s ease;
}
body[data-campo="A"]{ --campo:var(--A); }
body[data-campo="B"]{ --campo:var(--B); }
body[data-campo="C"]{ --campo:var(--C); }
body[data-campo="D"]{ --campo:var(--D); }
body[data-campo="E"]{ --campo:var(--E); }
body[data-campo="escuro"]{ --campo:var(--bordo); color:var(--papel); }
body[data-campo="papel"]{ --campo:var(--papel); }

h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; line-height:1.15; text-wrap:balance; letter-spacing:-.01em; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; border-radius:6px; }
body[data-campo="escuro"] :focus-visible{ outline-color:var(--papel); }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- topo: progresso segmentado por parte ---------- */
.topo[hidden]{ display:none; }
.topo{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top));
  background:var(--campo); transition:background-color .7s ease;
}
.voltar{
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(46,10,20,.08); font-size:20px; line-height:1;
}
.voltar:disabled{ opacity:.3; cursor:default; }
.trilha{ display:flex; gap:4px; height:6px; }
.trilha span{ flex:var(--peso,1); border-radius:3px; background:rgba(46,10,20,.12); position:relative; overflow:hidden; }
.trilha span i{ position:absolute; inset:0; width:var(--feito,0%); background:var(--tinta); border-radius:3px; transition:width .35s ease; }
.contador{ font-size:14px; color:var(--tinta-suave); font-variant-numeric:tabular-nums; min-width:52px; text-align:right; }

/* ---------- estrutura ---------- */
.app{ max-width:540px; margin:0 auto; padding:12px 20px 56px; }
.tela{ animation:surgir .3s ease both; }
@keyframes surgir{ from{ opacity:0; } to{ opacity:1; } }

.btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:18px 24px; border-radius:999px; border:0; cursor:pointer; text-decoration:none;
  font-family:var(--texto); font-weight:500; font-size:17px; letter-spacing:.02em;
  background:var(--bordo); color:var(--papel);
}
.btn:active{ transform:scale(.985); }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn-claro{ background:var(--papel); color:var(--bordo); }
.btn-contorno{ background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 2px var(--tinta); }
.acoes{ display:grid; gap:12px; margin-top:32px; }
.miudo{ font-size:14px; line-height:1.5; color:var(--tinta-suave); }

/* ---------- capa ---------- */
.capa{ padding-top:max(36px, 6vh); color:var(--papel); }
.capa .borboleta{ width:132px; height:auto; display:block; margin-left:-6px; }
.capa .nome-marca{ font-family:var(--display); font-size:19px; letter-spacing:.06em; margin-top:22px; color:var(--ouro-claro); }
.capa h1{ font-size:clamp(34px, 9.4vw, 46px); margin-top:14px; color:var(--papel); }
.capa .sub{ margin-top:18px; font-size:18px; color:#E9D6D0; max-width:32ch; }
.capa .como{ margin:30px 0 0; padding:0; list-style:none; display:grid; gap:8px; font-size:16px; color:#F4E8E3; }
.capa .como li{ display:grid; grid-template-columns:22px 1fr; }
.capa .como li::before{ content:''; width:10px; height:10px; border-radius:50%; margin-top:7px; background:var(--cor); }
.capa .miudo{ color:#C9A3A3; margin-top:26px; }
.capa .assina{ margin-top:30px; display:flex; align-items:center; gap:12px; font-size:15px; color:#E9D6D0; }
.capa .assina strong{ display:block; color:var(--papel); font-weight:500; }
.capa .foto{ width:44px; height:44px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1px var(--ouro); display:grid; place-items:center; font-family:var(--display); color:var(--ouro-claro); font-size:20px; }

/* ---------- pergunta ---------- */
.pergunta{ padding-top:20px; }
.pergunta .area{ font-size:15px; color:var(--tinta-suave); }
.pergunta h2{ font-size:clamp(25px, 7vw, 31px); margin-top:10px; }
.pergunta .dica{ margin-top:12px; font-size:15.5px; color:var(--tinta-suave); }
.opcoes{ display:grid; gap:8px; margin-top:28px; }
.opcao{
  width:100%; text-align:left; cursor:pointer; border:0; border-radius:16px;
  padding:16px 18px; font-size:17px; line-height:1.35;
  background:rgba(255,255,255,.55); display:flex; align-items:center; gap:14px;
  transition:background-color .15s ease;
}
.opcao:hover{ background:rgba(255,255,255,.8); }
.opcao[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); }
/* escala de frequência: os pontinhos mostram o quanto */
.freq{ display:flex; gap:4px; flex:none; width:64px; }
.freq b{ width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; opacity:.55; }
.freq b.on{ background:currentColor; opacity:1; }


/* ---------- pergunta aberta ---------- */
.campo-aberto{
  display:block; width:100%; margin-top:22px; padding:16px; border-radius:16px; border:2px solid transparent;
  background:rgba(255,255,255,.7); color:var(--tinta); font:inherit; font-size:17px; line-height:1.5; resize:vertical;
}
.campo-aberto:focus{ outline:none; border-color:var(--tinta); background:#fff; }

/* ---------- formulário ---------- */
.campo-form{ display:block; margin-top:18px; }
.campo-form span{ display:block; font-size:15px; margin-bottom:6px; color:var(--tinta-suave); }
.campo-form input{
  width:100%; padding:15px 16px; border-radius:14px; border:2px solid transparent;
  background:rgba(255,255,255,.75); color:var(--tinta); font:inherit; font-size:17px;
}
.campo-form input:focus{ outline:none; border-color:var(--tinta); background:#fff; }
.check{ display:grid; grid-template-columns:22px 1fr; gap:10px; margin-top:20px; font-size:15px; color:var(--tinta-suave); }
.check input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--bordo); }

/* ---------- carregando ---------- */
.carregando{ padding-top:22vh; color:var(--papel); }
.carregando .borboleta{ width:96px; animation:respirar 2.4s ease-in-out infinite; transform-origin:center; }
@keyframes respirar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.carregando h2{ font-size:28px; margin-top:24px; }
.carregando p{ margin-top:12px; color:#E9D6D0; min-height:3em; }

/* ---------- resultado ---------- */
.resultado-topo{
  background:var(--bordo); color:var(--papel);
  margin:-12px -20px 0; padding:36px 20px 40px; padding-top:max(36px, env(safe-area-inset-top));
}
.resultado-topo .saudacao{ font-size:17px; color:#E9D6D0; }
.resultado-topo h1{ font-size:clamp(33px, 9.2vw, 45px); margin-top:14px; }
.resultado-topo .frase{ margin-top:16px; font-family:var(--display); font-size:20px; color:var(--ouro-claro); max-width:32ch; }
.resultado-topo .comp{ margin-top:18px; font-size:15px; color:#C9A3A3; }

.bloco{ margin-top:40px; }
.bloco h3{ font-size:24px; margin-bottom:12px; }
.bloco p + p{ margin-top:12px; }
.acolhe{ margin-top:32px; font-family:var(--display); font-size:21px; line-height:1.4; }

.mapa{ display:grid; gap:14px; margin-top:6px; }
.mapa .linha{ display:grid; gap:6px; }
.mapa .rot{ display:flex; justify-content:space-between; gap:12px; font-size:15.5px; }
.mapa .rot em{ font-style:normal; color:var(--tinta-suave); font-variant-numeric:tabular-nums; }
.mapa .linha.foco .rot span{ font-weight:500; }
.mapa .barra{ height:14px; border-radius:7px; background:rgba(46,10,20,.07); overflow:hidden; }
.mapa .barra i{ display:block; height:100%; border-radius:7px; background:var(--cor); }
.mapa .linha.foco .barra i{ box-shadow:inset 0 0 0 2px var(--tinta); }

.forcas{ margin:0; padding-left:20px; display:grid; gap:6px; }
/* cada item já começa com "Dia N:", então sem marcador */
.passos-semana{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.passos-semana li{ padding-left:14px; border-left:2px solid var(--ouro); }
.exercicio{ background:var(--cor-perfil, var(--neutro)); border-radius:24px; padding:26px 22px; margin-top:40px; }
.exercicio .tempo{ font-size:15px; color:var(--tinta-suave); }
.exercicio h3{ font-size:24px; margin:6px 0 14px; }
.exercicio ol{ margin:0; padding-left:22px; display:grid; gap:10px; }

.convite{ background:var(--bordo); color:var(--papel); border-radius:28px; padding:30px 22px; margin-top:44px; }
.convite h3{ font-size:28px; }
.convite p{ margin-top:14px; color:#E9D6D0; }
.convite .btn{ margin-top:24px; }

.cuidado{ margin-top:28px; border-radius:24px; padding:24px 22px; background:#fff; box-shadow:inset 0 0 0 2px var(--bordo); }
.cuidado h3{ font-size:23px; margin-bottom:10px; }
.cuidado p + p{ margin-top:10px; }
.cuidado .btn{ margin-top:18px; }

.fecho{ margin-top:44px; font-family:var(--display); font-size:22px; line-height:1.35; }
.resultado .miudo{ margin-top:22px; }

/* ---------- glider da seleção (adaptado do Animated Radio, 21st.dev) ---------- */
.opcoes{ position:relative; }
.opcoes .opcao{ position:relative; z-index:1; }
.opcoes .opcao[aria-pressed="true"]{ background:transparent; color:var(--papel); }
.glider{
  position:absolute; left:0; right:0; top:0; height:var(--h, 0); z-index:0;
  border-radius:16px; background:var(--tinta); opacity:0;
  transform:translateY(var(--y, 0));
  transition:transform .5s cubic-bezier(.37,1.95,.66,.56), height .3s ease, opacity .15s ease;
}
.glider.on{ opacity:1; }
.glider.sem-animacao{ transition:opacity .15s ease; }

/* ---------- revelação do mapa (adaptado do Animated Chart, 21st.dev) ---------- */
.mapa .barra i{ width:0; transition:width 1s cubic-bezier(.34,1.45,.64,1) var(--atraso, 0s); }
.mapa.visivel .barra i{ width:var(--alvo); }
.mapa .rot em{ opacity:0; transition:opacity .3s ease calc(var(--atraso, 0s) + .5s); }
.mapa.visivel .rot em{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .mapa .barra i{ width:var(--alvo); }
  .mapa .rot em{ opacity:1; }
}

/* ---------- faixa: indo para a comunidade ---------- */
.faixa-comunidade{
  position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:20;
  max-width:520px; margin:0 auto; padding:18px 18px 14px; border-radius:22px;
  background:var(--bordo); color:var(--papel); box-shadow:0 18px 40px -12px rgba(46,10,20,.55);
  animation:surgir .3s ease both;
}
.faixa-comunidade p{ font-size:16px; line-height:1.45; }
.faixa-acoes{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.faixa-acoes .btn{ width:auto; flex:1; padding:14px 18px; }
.link-claro{ background:none; border:0; color:#E9D6D0; text-decoration:underline; font-size:15px; cursor:pointer; padding:8px 4px; }