/* ═══════════════════════════════════════════════════════════════
   MVA · Quiz de entrada (cópia estrutural de elidadias.org)
   Fundo branco e verde como no original. Para usar o laranja da
   MVA em vez do verde, troque só --acento e --acento-escuro.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --acento:        #16a34a;   /* verde do original; laranja da MVA = #ff6b00 */
  --acento-escuro: #15803d;
  --tinta:         #030712;   /* quase preto dos títulos */
  --tinta-suave:   #6b7280;   /* texto de apoio */
  --linha:         #e5e7eb;
  --fundo:         #ffffff;
  --cartao:        #f9fafb;
  --raio:          16px;
  --col:           28rem;     /* largura da coluna, igual à do original */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100svh;
  background:var(--fundo);
  color:var(--tinta);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* height:auto é o que faz o atributo height do HTML virar só reserva de
   espaço, em vez de altura fixa — sem isso as fotos esticam. */
img,svg{ display:block; max-width:100%; height:auto; }

/* ═══════════════════ TOPO ═══════════════════ */

.topo{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px 10px;
  background:var(--fundo);
}

.voltar{
  flex:none;
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:var(--tinta);
  cursor:pointer;
  padding:0;
}
.voltar svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; }

.trilho{
  flex:1;
  height:8px;
  border-radius:999px;
  background:var(--linha);
  overflow:hidden;
}
.trilho span{
  display:block;
  height:100%;
  width:9%;
  border-radius:inherit;
  background:var(--tinta);
  transition:width .35s ease;
}

/* ═══════════════════ ETAPAS ═══════════════════ */

/* Cada etapa ocupa a altura da tela e o conteúdo fica centrado na vertical,
   como na referência: sem isso as telas curtas (edad, género) ficam grudadas
   no topo com um vazio embaixo. O conteúdo maior que a tela simplesmente
   empurra a página e rola normalmente. */
#palco{
  max-width:var(--col);
  margin:0 auto;
  padding:8px 16px 40px;
  min-height:calc(100svh - 52px);
  display:flex;
  flex-direction:column;
}

.etapa{ display:none; }
.etapa.is-ativa{
  display:grid;
  gap:16px;
  align-content:center;
  flex:1;
  animation:entra .25s ease both;
}
@keyframes entra{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.etapa--centro{ justify-items:center; text-align:center; }

/* Tamanhos medidos na referência (viewport 430): título e pergunta 25,6px,
   "PARABÉNS" 32px, todos com peso 900 e entrelinha 1,1. O clamp só protege
   telas estreitas — a partir de ~410px de largura bate o valor da referência. */
.titulo{
  font-size:clamp(22px, 6vw, 25.6px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  text-align:center;
}

/* marca-texto do original: retângulo cheio, colado no texto, sem cantos */
.titulo mark{
  background:var(--acento);
  color:#fff;
  padding:0;
  border-radius:0;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.pergunta{
  font-size:clamp(21px, 6vw, 25.6px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.01em;
  text-align:center;
}

.apoio{
  color:var(--tinta-suave);
  font-size:16px;
  text-align:center;
}
.apoio b{ color:var(--tinta); font-weight:700; }
/* na tela do "regalo", a referência deixa o negrito no mesmo cinza do texto */
.apoio--cinza b{ color:inherit; }
.apoio--forte{ color:var(--tinta); font-size:15px; margin-top:6px; }

.premio{
  font-size:clamp(25px, 7.5vw, 32px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  text-align:center;
}

.foto-hero{
  width:100%;
  height:auto;
  border-radius:var(--raio);
  background:var(--cartao);
  aspect-ratio:800 / 846;   /* reserva o espaço: sem pulo de layout */
  object-fit:cover;
}

/* ═══════════════════ BOTÕES ═══════════════════ */

.botao{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:18px 20px;
  border:0;
  border-radius:var(--raio);
  background:var(--acento);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.botao:hover{ background:var(--acento-escuro); }
.botao:active{ transform:scale(.99); }
.botao svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; }

.opcoes{ display:grid; gap:10px; }
.opcoes--duas{ grid-template-columns:1fr 1fr; }

.opcao{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:16px 18px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--cartao);
  color:var(--tinta);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.opcao:hover{ border-color:var(--acento); background:#fff; }
.opcao:active{ transform:scale(.99); }
.opcao i{ font-style:normal; font-size:20px; flex:none; }

/* a letra A/B/C/D em quadradinho, como no original */
.opcao--letra i{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--linha);
  font-size:14px;
  font-weight:800;
}

.cartao{
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--cartao);
  color:var(--tinta);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s ease, transform .12s ease;
}
.cartao:hover{ border-color:var(--acento); }
.cartao:active{ transform:scale(.99); }
.cartao img{
  width:100%;
  border-radius:10px;
  aspect-ratio:1;
  object-fit:cover;
  background:var(--linha);
}

/* ═══════════════════ ANÁLISE ═══════════════════ */

.anel{ position:relative; width:150px; height:150px; margin:8px 0 4px; }
.anel svg{ width:100%; height:100%; transform:rotate(-90deg); }
.anel__fundo, .anel__frente{ fill:none; stroke-width:9; }
.anel__fundo{ stroke:var(--linha); }
.anel__frente{
  stroke:var(--acento);
  stroke-linecap:round;
  stroke-dasharray:327;     /* 2·π·52 */
  stroke-dashoffset:327;
  transition:stroke-dashoffset .3s linear;
}
.anel__num{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:800;
}

.passos{ list-style:none; display:grid; gap:12px; width:100%; margin-top:8px; }
.passos li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  color:var(--tinta-suave);
  font-size:15px;
  font-weight:600;
  text-align:left;
  transition:color .2s ease, border-color .2s ease;
}
.passos li::before{
  content:"";
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--linha);
  transition:background .2s ease, border-color .2s ease;
}
.passos li.is-feito{ color:var(--tinta); border-color:var(--acento); }
.passos li.is-feito::before{
  background:var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--acento);
}

/* ═══════════════════ RESULTADO ═══════════════════ */

.relogio{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:26px;
}
.relogio i{ font-style:normal; font-size:12px; font-weight:600; color:var(--tinta-suave); margin-right:6px; }
.relogio b{ margin:0 2px; }

.grafico{ display:grid; gap:8px; }
.grafico__area{
  position:relative;
  height:130px;
  border-left:2px solid var(--linha);
  border-bottom:2px solid var(--linha);
  background:linear-gradient(to top, rgba(23,163,74,.08), transparent);
}
.grafico__linha{
  position:absolute;
  left:0; right:0; bottom:0;
  height:100%;
  /* a faixa de cor sai perpendicular ao eixo do gradiente: para a linha SUBIR
     da esquerda-baixo à direita-cima, o eixo tem de ser "to bottom right". */
  background:linear-gradient(to bottom right, transparent 49.4%, var(--acento) 49.4%, var(--acento) 50.6%, transparent 50.6%);
}
.grafico__ponto{
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--acento);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--acento);
}
.grafico__ponto--hoy{ left:-7px; bottom:-7px; }
.grafico__ponto--meta{ right:-7px; top:-7px; }
.grafico__eixo{
  display:flex;
  justify-content:space-between;
  color:var(--tinta-suave);
  font-size:12px;
  font-weight:700;
}

.marcos{ display:grid; gap:10px; }
.marco{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  font-size:14px;
  color:var(--tinta-suave);
}
.marco b{ font-size:18px; color:var(--tinta-suave); flex:none; }
.marco strong{ color:var(--tinta); }
.marco--meta{ border-color:var(--acento); background:rgba(23,163,74,.06); }
.marco--meta b{ color:var(--acento); }

/* ═══════════════════ VSL ═══════════════════ */

.etapa--escura{ justify-items:center; }
.video-frame{ width:100%; max-width:400px; margin:0 auto; }
.vturb-placeholder{
  position:relative;
  width:100%;
  padding:177.7778% 0 0;    /* 9:16, reserva o espaço antes do player */
  background:#000;
  border-radius:12px;
}
.botao--compra{ margin-top:4px; }
.selo{ color:var(--tinta-suave); font-size:13px; text-align:center; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}