/* =========================================================
   Corpo Vital · Quiz "Diagnóstico de dores e tensões acumuladas"
   Responsivo, celular e computador. Tokens da página de vendas.
   Breakpoints: 600px, 900px
   ========================================================= */

:root {
  /* Paleta da marca (mesma da página de vendas) */
  --ciano: #00A3BF;
  --teal: #1C7B8C;
  --petroleo: #245159;
  --escuro: #1F3033;
  --grafite: #293133;

  --bg: #F8FCFD;
  --tint: #EAF4F6;
  --cinza: #E3E8E9;
  --cinza-texto: #5B6B6E;
  --verde: #0BBF63;
  --verde-hover: #09A654;
  --alerta: #D9653B;
  --ambar: #E3A12F;
  --branco: #FFFFFF;

  --font-title: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-btn: 12px;
  --shadow: 0 10px 30px rgba(31, 48, 51, .08);

  --gutter: 20px;
  --largura-leitura: 640px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--escuro);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: 12px var(--gutter);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.topo__marca img { width: 40px; height: 40px; }
.topo__progresso {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* No computador, o progresso fica alinhado com a coluna da pergunta */
@media (min-width: 900px) {
  .topo { grid-template-columns: minmax(0, 1fr) minmax(0, var(--largura-leitura)) minmax(0, 1fr); }
  .topo__progresso { margin-left: -54px; }
}
.topo__progresso[hidden] { display: none; }
.voltar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--petroleo);
  cursor: pointer;
  transition: background-color .2s ease;
}
.voltar:hover { background: var(--tint); }
.progresso { flex: 1; }
.progresso__texto {
  font-family: var(--font-title);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cinza-texto);
  margin-bottom: 6px;
}
.progresso__trilho {
  height: 6px;
  border-radius: 99px;
  background: var(--cinza);
  overflow: hidden;
}
.progresso__preenchido {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--ciano);
  transition: width .35s ease;
}

/* ---------- Área principal ---------- */
.app {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(12px, 4vw, 48px) var(--gutter) clamp(40px, 6vw, 72px);
  animation: entrar .35s ease both;
}
.app:focus { outline: none; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .app, .progresso__preenchido, .opcao, .btn { animation: none; transition: none; }
}

.rotulo {
  font-family: var(--font-title);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

/* ---------- Botão ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 60px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--verde);
  color: var(--branco);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(31, 48, 51, .16);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { background: var(--verde-hover); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31, 48, 51, .22); }
.btn:focus-visible { outline: 3px solid var(--ciano); outline-offset: 4px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; background: var(--verde); }

/* ---------- Capa ---------- */
.capa {
  display: grid;
  gap: 20px;
  grid-template-areas: "texto" "figura" "corpo";
}
.capa__texto { grid-area: texto; }
.capa__figura { grid-area: figura; justify-self: center; width: min(100%, 240px); }
.capa__figura img { width: 100%; border-radius: var(--radius); mix-blend-mode: multiply; }
.capa__corpo { grid-area: corpo; display: grid; gap: 16px; }
.capa__corpo p { color: var(--grafite); text-wrap: pretty; }
.capa__corpo p:last-of-type { font-weight: 700; color: var(--escuro); }
.capa__corpo .btn { margin-top: 8px; justify-self: center; }
.capa__titulo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: #0D1517;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .capa {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    grid-template-areas: "texto figura" "corpo figura";
    column-gap: clamp(40px, 5vw, 72px);
    row-gap: 24px;
    align-items: center;
    padding-top: clamp(16px, 4vh, 48px);
  }
  .capa__texto { align-self: end; }
  .capa__corpo { align-self: start; }
  .capa__corpo .btn { justify-self: start; }
  .capa__figura { width: min(100%, 440px); }
}

/* ---------- Pergunta ---------- */
.pergunta { max-width: var(--largura-leitura); margin-inline: auto; }
.pergunta__titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.22;
  color: #111B1D;
  text-wrap: balance;
}
.pergunta__ajuda { margin-top: 6px; color: var(--cinza-texto); font-size: .95rem; }

.opcoes { display: grid; gap: 12px; margin-top: clamp(20px, 3vw, 32px); }
.opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  border: 1.5px solid var(--cinza);
  border-radius: var(--radius);
  background: var(--branco);
  text-align: left;
  font-size: 1.02rem;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(31, 48, 51, .04);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.opcao__letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--teal);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .85rem;
  transition: background-color .15s ease, color .15s ease;
}
.opcao__texto { flex: 1; }
.opcao__check {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--cinza);
  border-radius: 6px;
  background: var(--branco) center / 14px no-repeat;
}
@media (hover: hover) {
  .opcao:hover { border-color: var(--ciano); transform: translateY(-1px); }
}
.opcao:active { transform: scale(.99); }
.opcao[aria-pressed="true"] { border-color: var(--ciano); background: var(--tint); }
.opcao[aria-pressed="true"] .opcao__letra { background: var(--ciano); color: var(--branco); }
.opcao[aria-pressed="true"] .opcao__check {
  border-color: var(--ciano);
  background-color: var(--ciano);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn--continuar { display: flex; margin: 24px auto 0; }

/* ---------- Pausa educativa ---------- */
.educativa {
  max-width: var(--largura-leitura);
  margin-inline: auto;
  padding-top: clamp(0px, 3vh, 32px);
  text-align: center;
}
.educativa__figura { width: min(100%, 180px); margin: 0 auto clamp(16px, 3vw, 24px); }
.educativa__figura img { width: 100%; mix-blend-mode: multiply; }
/* No computador, imagem ao lado do texto: tudo cabe na primeira tela */
@media (min-width: 900px) {
  .educativa {
    max-width: 880px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 48px;
    align-items: center;
    text-align: left;
    padding-top: clamp(16px, 5vh, 56px);
  }
  .educativa__figura { grid-row: 1 / span 3; width: 100%; margin: 0; }
  .educativa__destaque { margin: 24px 0 28px; }
  .educativa .btn { justify-self: start; }
}
.educativa__texto {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  color: var(--grafite);
  text-wrap: pretty;
}
.educativa__destaque {
  margin: clamp(28px, 5vw, 40px) auto clamp(32px, 5vw, 48px);
  padding: clamp(22px, 4vw, 32px) clamp(18px, 4vw, 36px);
  border-left: 4px solid var(--ciano);
  border-radius: var(--radius);
  background: var(--tint);
  text-align: left;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.25;
  color: #111B1D;
  text-wrap: balance;
}
.educativa__destaque span { display: block; font-weight: 500; color: var(--petroleo); }
.educativa__destaque em { display: block; font-style: italic; color: var(--teal); }

/* ---------- Análise ---------- */
.analise {
  max-width: 480px;
  margin-inline: auto;
  padding-top: clamp(24px, 10vh, 120px);
}
.analise__titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.25;
  color: #111B1D;
  text-align: center;
  text-wrap: balance;
}
.analise__etapas {
  margin: clamp(28px, 5vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.analise__etapa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--branco);
  box-shadow: 0 2px 6px rgba(31, 48, 51, .05);
  color: var(--cinza-texto);
  transition: color .3s ease;
}
.analise__marca {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border: 3px solid var(--cinza);
  border-radius: 50%;
}
/* Só a etapa da vez gira; as seguintes ficam esperando */
.analise__etapa:first-child:not(.feito) .analise__marca,
.analise__etapa.feito + .analise__etapa:not(.feito) .analise__marca {
  border-top-color: var(--ciano);
  animation: girar .9s linear infinite;
}
.analise__etapa.feito { color: var(--escuro); font-weight: 700; }
.analise__etapa.feito .analise__marca {
  border-color: var(--ciano);
  background: var(--ciano) center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: none;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .analise__marca { animation: none; }
}

/* ---------- Resultado ---------- */
.resultado { max-width: 720px; margin-inline: auto; }
.resultado__topo { text-align: center; }
.resultado__nivel {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1.08;
  color: var(--cor-nivel);
}
.resultado {
  /* Cor de cada nível: no medidor e no título (o título usa um tom mais escuro, para contraste) */
  --cor-latente: var(--ciano);
  --cor-instalada: var(--ambar);
  --cor-cronica: var(--alerta);
}
.resultado--latente { --cor-nivel: var(--teal); }
.resultado--instalada { --cor-nivel: #B97A12; }
.resultado--cronica { --cor-nivel: var(--alerta); }

.medidor { max-width: 480px; margin: clamp(24px, 4vw, 36px) auto 0; }
.medidor__trilho {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: var(--cinza);
}
.medidor__marcador {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  border: 4px solid var(--branco);
  border-radius: 50%;
  background: var(--cor-nivel);
  box-shadow: 0 2px 8px rgba(31, 48, 51, .3);
  transform: translate(-50%, -50%);
}
.medidor__escala {
  display: grid;
  margin-top: 12px;
  font-family: var(--font-title);
  font-size: .8rem;
  color: var(--cinza-texto);
}
.medidor__escala .ativo { color: var(--cor-nivel); font-weight: 700; }
.resultado__pontos { margin-top: 10px; font-size: .95rem; color: var(--cinza-texto); }

.resultado__titulo {
  margin-top: clamp(32px, 5vw, 48px);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.22;
  color: #111B1D;
  text-wrap: balance;
}
.resultado__explicacao {
  max-width: 600px;
  margin: 14px auto 0;
  color: var(--grafite);
  text-wrap: pretty;
}

.resultado__bloco { margin-top: clamp(28px, 5vw, 44px); }
.resultado__bloco p + p { margin-top: 12px; }
.resultado__subtitulo {
  font-family: var(--font-title);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

/* 3. O que seu corpo está mostrando */
.sinais {
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--radius);
  background: var(--branco);
  box-shadow: var(--shadow);
}
.sinais__dela {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cinza);
}
.sinais__marcados {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.4;
  color: #111B1D;
}
.sinais__momento { margin-top: 8px; color: var(--grafite); line-height: 1.5; }
.sinais__marcados + .sinais__momento { margin-top: 10px; }
.sinais__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sinais__lista li {
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
}
.sinais__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cor-nivel);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-nivel) 18%, transparent);
}

/* 4. Não é culpa sua */
.culpa {
  padding: clamp(20px, 4vw, 30px) clamp(18px, 4vw, 32px);
  border-left: 4px solid var(--ciano);
  border-radius: var(--radius);
  background: var(--tint);
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  line-height: 1.45;
  color: var(--petroleo);
}
.culpa p:last-child { font-weight: 700; color: #111B1D; }

/* 5. Plano de 7 dias: só a frase, num cartão */
.plano {
  padding: clamp(20px, 4vw, 32px);
  border-radius: var(--radius);
  background: var(--branco);
  box-shadow: var(--shadow);
}
.plano__frase {
  font-family: var(--font-title);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
  line-height: 1.55;
  color: #111B1D;
  text-wrap: pretty;
}

/* 6. Ponte para o produto */
.ponte { color: var(--grafite); text-wrap: pretty; }
.ponte > p:last-of-type { font-family: var(--font-title); font-weight: 600; font-size: 1.08em; color: #111B1D; }
.ponte strong { color: var(--teal); }

.objecao {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--cinza);
}
.objecao p + p { margin-top: 12px; }
.objecao__impede { font-weight: 700; color: var(--escuro); }

/* 7. Bio da Ana */
.bio {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas: "foto cabecalho" "texto texto";
  column-gap: 16px;
  row-gap: 14px;
  align-items: center;
  padding: clamp(18px, 4vw, 28px);
  border-radius: var(--radius);
  background: var(--branco);
  box-shadow: var(--shadow);
}
.bio__foto { grid-area: foto; }
.bio__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.bio__cabecalho { grid-area: cabecalho; }
.bio__cabecalho .resultado__subtitulo { margin-bottom: 4px; }
.bio__nome {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.2rem;
  color: #111B1D;
}
.bio__texto { grid-area: texto; color: var(--grafite); font-size: .98rem; line-height: 1.55; }
/* No computador, a foto fica ao lado do nome e do texto */
@media (min-width: 900px) {
  .bio {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "foto cabecalho" "foto texto";
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    row-gap: 10px;
    align-items: start;
  }
  .bio__cabecalho { align-self: end; }
}

/* 8 e 9. Oferta e botão */
.oferta {
  padding: clamp(24px, 5vw, 40px) clamp(18px, 4vw, 40px);
  border: 2px solid var(--ciano);
  border-radius: calc(var(--radius) + 4px);
  background: var(--branco);
  box-shadow: 0 16px 40px rgba(0, 163, 191, .16);
  text-align: center;
}
.oferta__titulo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.18;
  color: #111B1D;
  text-wrap: balance;
}
.oferta__subtitulo { margin-top: 10px; color: var(--grafite); text-wrap: pretty; }
.oferta__recebe {
  max-width: 460px;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  text-align: left;
}
.oferta__recebe li { position: relative; padding-left: 32px; line-height: 1.4; }
.oferta__recebe li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ciano) center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.oferta__preco { margin-top: 24px; color: var(--cinza-texto); font-size: 1.05rem; }
.oferta__preco strong {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.2rem);
  color: var(--teal);
  letter-spacing: -.02em;
}
.oferta .cta { margin-top: 18px; }
.btn--oferta { max-width: 480px; }

.cta {
  margin-top: clamp(32px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cta__selo { font-size: .8rem; letter-spacing: .08em; color: var(--cinza-texto); }

/* ---------- Rodapé ---------- */
.rodape {
  padding: 20px var(--gutter) 28px;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--cinza-texto);
}
.rodape p { max-width: 560px; margin-inline: auto; }

.sem-js { text-align: center; padding: 40px 0; }