/* =====================================================================
   SEU MAPA DE PROPÓSITO™ — QUIZ E RESULTADO
   ===================================================================== */

.quiz { padding-inline: var(--gutter); }
.quiz__tela { max-width: 36rem; margin-inline: auto; padding-block: var(--e-5) var(--e-8); }
.quiz__tela:focus { outline: none; }

/* ---------- Intro ---------- */
.intro { display: grid; gap: var(--e-6); align-items: center; }
.intro__texto { display: grid; gap: var(--e-4); }
.intro__lead { font-size: var(--t-lg); line-height: 1.55; }
.intro__acoes { display: grid; gap: var(--e-3); margin-top: var(--e-2); }
.intro .aviso { margin-top: var(--e-2); }

.mapinha {
  position: relative; border-radius: var(--raio-lg); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha);
  aspect-ratio: 4 / 3; max-width: 100%;
}
.mapinha::before {
  content: ""; position: absolute; inset: -10%;
  background: url("../brand/padrao-curvas.svg") center / cover no-repeat; opacity: 0.13;
}
.mapinha svg { position: relative; width: 100%; height: 100%; display: block; }
.mapinha__rota { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.mapinha__marco { fill: var(--superficie); stroke: var(--tinta); stroke-width: 2.5; }
.mapinha__marco--fim { fill: var(--marca-texto); }
.mapinha__num { font-family: var(--fonte-rotulo); font-size: 15px; fill: var(--tinta); text-anchor: middle; dominant-baseline: central; }
.mapinha__txt { font-family: var(--fonte-rotulo); font-size: 13px; letter-spacing: 0.12em; fill: var(--tinta); }
.mapinha__pin { fill: var(--tinta); }
.mapinha__aqui { font-family: var(--fonte-rotulo); font-size: 11px; letter-spacing: 0.12em; fill: var(--sobre-tinta); }

/* ---------- Pergunta ---------- */
.pergunta__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 48px; }
.pergunta__voltar {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 8px 12px 8px 6px;
  background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--tinta-2); font-weight: 700; font-size: var(--t-sm);
}
.pergunta__voltar:hover { background: var(--nevoa); color: var(--tinta); }
.pergunta__voltar .ico { width: 20px; height: 20px; }
.pergunta__contador { font-family: var(--fonte-rotulo); font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* progresso em forma de trilha: 7 marcos */
.progresso { display: flex; align-items: center; margin: var(--e-3) 0 var(--e-6); }
.progresso__marco {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--linha-forte); background: var(--papel); transition: all 0.3s ease;
}
.progresso__trecho { flex: 1; height: 0; border-top: 2px dashed var(--linha-forte); margin: 0 3px; transition: border-color 0.3s ease; }
.progresso__marco.is-feito { background: var(--tinta); border-color: var(--tinta); }
.progresso__trecho.is-feito { border-top-style: solid; border-color: var(--tinta); }
.progresso__marco.is-atual { width: 20px; height: 20px; background: var(--marca-texto); border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(255, 225, 90, 0.35); }

.pergunta__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-2xl); line-height: 1.16; color: var(--tinta); letter-spacing: -0.012em; }
.pergunta__frase {
  margin-top: var(--e-4); font-family: var(--fonte-titulo); font-size: var(--t-xl); line-height: 1.3; color: var(--tinta);
}
.opcoes { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.opcao {
  width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--e-4); align-items: center;
  min-height: 66px; padding: 12px 18px 12px 14px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1.5px solid var(--linha); border-radius: var(--raio);
  font-size: var(--t-base); line-height: 1.4; color: var(--tinta); font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.opcao:hover { border-color: var(--tinta); }
.opcao:active { transform: scale(0.992); }
.opcao__letra {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--tinta); font-family: var(--fonte-rotulo); font-size: 0.95rem; color: var(--tinta);
  background: var(--superficie); transition: all 0.2s ease;
}
.opcao__texto { min-width: 0; }
.opcao.is-escolhida { border-color: var(--tinta); box-shadow: 0 0 0 1.5px var(--tinta); background: linear-gradient(176deg, var(--superficie) 0%, var(--superficie) 100%); }
.opcao.is-escolhida .opcao__letra { background: var(--tinta); color: var(--marca-texto); }
.opcao.is-escolhida .opcao__texto { background: linear-gradient(176deg, transparent 52%, var(--marca-texto) 52%, var(--marca-texto) 90%, transparent 90%) no-repeat; background-size: 100% 100%; animation: grifar 0.35s ease-out both; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.p7 { margin-top: var(--e-6); display: grid; gap: var(--e-3); }
.p7__contador { justify-self: end; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.p7__acoes { display: grid; gap: var(--e-2); justify-items: center; margin-top: var(--e-3); }
.p7__privacidade { display: flex; gap: 0.5em; align-items: flex-start; font-size: var(--t-xs); color: var(--tinta-3); }
.p7__privacidade .ico { width: 16px; height: 16px; margin-top: 1px; }

/* ---------- Processamento ---------- */
.processo { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.processo__cartao { width: 100%; display: grid; gap: var(--e-6); justify-items: center; }
.processo__rota { width: 220px; height: 70px; }
.processo__rota path { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: rota 4.2s ease-in-out forwards; }
.processo__rota circle { fill: var(--marca-texto); stroke: var(--tinta); stroke-width: 2.5; }
@keyframes rota { to { stroke-dashoffset: 0; } }
.processo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); text-align: left; width: 100%; max-width: 24rem; }
.processo__lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--e-3); align-items: center; color: var(--tinta-3); transition: color 0.3s ease; }
.processo__estado { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; }
.processo__estado .ico { width: 14px; height: 14px; opacity: 0; }
.processo__lista li.is-ativo { color: var(--tinta); font-weight: 700; }
.processo__lista li.is-ativo .processo__estado { border-color: var(--tinta); border-top-color: transparent; animation: girar 0.8s linear infinite; }
.processo__lista li.is-feito { color: var(--tinta); }
.processo__lista li.is-feito .processo__estado { background: var(--tinta); border-color: var(--tinta); color: var(--marca-texto); animation: none; }
.processo__lista li.is-feito .ico { opacity: 1; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Resultado ---------- */
.resultado { padding-block: 0 var(--e-6); max-width: none; }
.res-topo {
  margin-inline: calc(var(--gutter) * -1); padding: var(--e-6) var(--gutter) var(--e-7);
  background: var(--perfil-suave);
  border-bottom: 1px solid color-mix(in srgb, var(--perfil) 25%, transparent);
}
.res-topo::before { opacity: 0.12; }
.res-topo__in { max-width: 36rem; margin-inline: auto; display: grid; gap: var(--e-3); }
.res-topo__chamada { color: var(--tinta-2); font-size: var(--t-lg); }
.res-perfil { display: flex; align-items: center; gap: var(--e-4); }
.res-perfil__marco {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--perfil); color: #FFFFFF;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--perfil) 22%, transparent);
}
.res-perfil__marco .ico { width: 32px; height: 32px; }
.res-perfil__nome { min-width: 0; }
.res-perfil__nome { font-family: var(--fonte-titulo); font-size: min(var(--t-4xl), 8.4vw); line-height: 1; color: var(--perfil-tinta); letter-spacing: -0.02em; text-transform: uppercase; }
.res-topo__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-xl); line-height: 1.25; color: var(--tinta); margin-top: var(--e-2); }

.res-corpo { max-width: 36rem; margin-inline: auto; display: grid; gap: var(--e-7); padding-top: var(--e-7); }
.res-bloco { display: grid; gap: var(--e-4); }
.res-bloco h2 { font-size: var(--t-xl); }
.res-bloco > .selo { justify-self: start; }
body.em-quiz .rodape { display: none; }
.res-frase { font-family: var(--fonte-titulo); font-size: var(--t-xl); line-height: 1.3; color: var(--perfil-tinta); }
.res-desafio { border: 1.5px solid var(--perfil); border-radius: var(--raio); padding: var(--e-5); background: var(--superficie); display: grid; gap: var(--e-2); }
.res-desafio p { color: var(--tinta); font-size: var(--t-lg); font-weight: 700; line-height: 1.45; }

.res-acao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--e-5); display: grid; gap: var(--e-3); box-shadow: var(--sombra-1); }
.res-acao__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.res-acao h3 { font-family: var(--fonte-titulo); font-size: var(--t-xl); font-weight: 600; }
.res-segundo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e-3); align-items: start; padding: var(--e-4); border-radius: var(--raio); background: var(--nevoa); }
.res-segundo__marco { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--perfil); color: #FFFFFF; }

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.barras li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2rem; gap: var(--e-3); align-items: center; font-variant-numeric: tabular-nums; }
.barras__trilho { height: 10px; border-radius: 6px; background: var(--nevoa); overflow: hidden; }
.barras__valor { height: 100%; border-radius: 6px; background: var(--linha-forte); }
.barras li.is-vencedor .barras__valor { background: var(--perfil); }
.barras li.is-vencedor { font-weight: 700; color: var(--tinta); }

.apoio { border: 2px solid var(--tinta); border-radius: var(--raio); padding: var(--e-5); background: var(--superficie); display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.apoio h2 { font-size: var(--t-xl); }

.lead { border-radius: var(--raio-lg); background: var(--superficie); border: 1px solid var(--linha); padding: var(--e-5); display: grid; gap: var(--e-3); }
.lead form { display: grid; gap: var(--e-3); }
.lead__ok { color: var(--sucesso); font-weight: 700; }

.res-transicao {
  margin-inline: calc(var(--gutter) * -1); padding: var(--e-8) var(--gutter);
  background: var(--tinta); color: var(--sobre-tinta-2);
}
.res-transicao__in { max-width: 36rem; margin-inline: auto; display: grid; gap: var(--e-4); }
.res-transicao h2 { color: var(--sobre-tinta); font-size: var(--t-3xl); }
.res-transicao p { font-size: var(--t-lg); }
.res-transicao__pergunta { font-family: var(--fonte-titulo); font-size: var(--t-2xl); line-height: 1.2; color: var(--sobre-tinta); }
.res-transicao .btn { margin-top: var(--e-3); }
.res-rodape { max-width: 36rem; margin-inline: auto; display: grid; gap: var(--e-4); padding-top: var(--e-6); justify-items: center; text-align: center; }

/* ---------- Telas maiores ---------- */
@media (min-width: 900px) {
  .quiz__tela--intro { max-width: var(--largura-pagina); }
  .intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--e-8); padding-block: var(--e-6); }
  .intro__acoes { max-width: 26rem; }
}