/* Estilo dos quizzes da Michele (Desafio e Pilates). Identidade do Desafio 7 em 7. */
/* Identidade do Desafio 7 em 7: Sora + Raleway, roxo→violeta, amarelo nos botões, fundo rosado. */
:root{--roxo:#9E047C;--violeta:#8D29F2;--grad:linear-gradient(170deg,#9E047C 0%,#8D29F2 100%);--rosa:#FFF3FD;--rosa-2:#F7E4F3;--amarelo:#FFFC00;
  --preto:#231A27;--texto:#4A3F52;--linha:#EAD6E6;--branco:#FFFFFF;--verde:#1C873C}
*{box-sizing:border-box}
html,body{margin:0;background:var(--rosa);color:var(--preto);font:400 16px/1.5 Raleway,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Sora,system-ui,sans-serif;margin:0;line-height:1.18;text-wrap:balance}
p{margin:0}
.app{max-width:440px;margin:0 auto;min-height:100dvh;padding:14px 18px 32px;display:flex;flex-direction:column;gap:16px}
.topo{display:flex;align-items:center;gap:10px;min-height:28px}
.voltar{border:0;background:none;font:700 22px/1 Sora,sans-serif;color:var(--roxo);cursor:pointer;padding:4px 6px}
.barra{flex:1;height:8px;border-radius:99px;background:var(--rosa-2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .3s}
.logo{width:120px;margin:0 auto}
.etiqueta{align-self:center;background:var(--grad);color:#fff;font:700 12px/1 Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:99px}
.capa h1{font-size:29px;font-weight:800;text-align:center}
.capa h1 mark,.oferta h2 mark{background:none;color:var(--roxo)}
.capa .sub{text-align:center;color:var(--texto);font-size:17px}
.foto-capa{max-width:360px;margin:0 auto}
.pede-idade{text-align:center;font:800 18px/1.25 Sora,sans-serif;color:var(--preto);margin-top:2px}
.idades{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.idade{display:flex;flex-direction:column;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--grad);box-shadow:0 8px 20px rgba(158,4,124,.16)}
.idade img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 55%;pointer-events:none} /* o toque conta no botão (rastreio da resposta) */
/* Capa com a idade: topo mais baixo para os 4 cartões caberem na primeira tela do celular. */
.capa.com-idade{gap:12px!important}
.capa.com-idade .logo{width:96px!important}
.capa.com-idade .etiqueta{justify-self:center;font-size:11px;padding:7px 12px}
.capa.com-idade h1{font-size:24px}
.idade span{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;color:#fff;font:800 16px/1 Sora,sans-serif}
.idade b{color:var(--amarelo);font-size:22px;line-height:.8}
.idade:focus-visible,.idade-outra:focus-visible{outline:3px solid var(--violeta);outline-offset:2px}
.idade-outra{align-self:center;border:0;background:none;color:var(--roxo);font:600 14px/1.3 Raleway,sans-serif;text-decoration:underline;cursor:pointer;padding:6px}
.pend{background:#FFF7B8;border:1.5px dashed #B59B00;border-radius:6px;padding:0 4px;color:#6B5A00;font-weight:700}
.botao{display:block;width:100%;border:0;cursor:pointer;background:var(--amarelo);color:#111;font:800 17px/1.25 Sora,sans-serif;padding:17px 18px;border-radius:99px;text-align:center;text-decoration:none;box-shadow:0 10px 24px rgba(158,4,124,.18)}
.botao:focus-visible,.op:focus-visible{outline:3px solid var(--violeta);outline-offset:2px}
.miudo{text-align:center;font-size:13px;color:var(--texto)}
.pergunta h2{font-size:23px;font-weight:800}
.pergunta .sub{color:var(--texto);margin-top:6px}
.ops{display:grid;gap:10px}
.ops.c2{grid-template-columns:1fr 1fr}
.op{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--branco);border:2px solid var(--linha);border-radius:16px;padding:14px 16px;cursor:pointer;font:600 16px/1.3 Raleway,sans-serif;color:var(--preto)}
.op small{font-weight:500;color:var(--texto);font-size:14px}
.op.on{border-color:var(--roxo);background:#FBEAF6}
.ops.c2 .op{align-items:center;text-align:center;justify-content:center;min-height:62px}
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:20px;padding:18px;display:grid;gap:10px}
.michele img{border-radius:20px;background:var(--grad);height:300px;width:auto;object-fit:contain;margin:0 auto}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grade img{border-radius:12px;aspect-ratio:1/1;object-fit:cover}
.aviso{font-size:12px;color:var(--texto);text-align:center}
.ciclo{display:grid;gap:8px}
.ciclo p{background:var(--branco);border-left:4px solid var(--roxo);border-radius:10px;padding:10px 12px;font-weight:600}
.carregando{text-align:center;align-items:center;justify-content:center;padding-top:6vh}
.roda{width:72px;height:72px;border-radius:50%;border:7px solid var(--rosa-2);border-top-color:var(--roxo);margin:24px auto;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.linhas{display:grid;gap:8px;text-align:left}
.linhas p{background:var(--branco);border-radius:10px;padding:10px 12px;animation:aparece .4s ease both}
.linhas p:nth-child(2){animation-delay:.7s}.linhas p:nth-child(3){animation-delay:1.4s}
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.linhas p::before{content:"✓ ";color:var(--verde);font-weight:800}
.perfil{background:var(--grad);color:#fff;border-radius:22px;padding:22px 18px;display:grid;gap:10px}
.perfil .rot{font:700 12px/1 Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo)}
.perfil h2{font-size:27px;color:#fff}
.bloco{display:grid;gap:6px}
.bloco h3{font-size:17px;color:var(--roxo)}
.oferta h2{font-size:25px;font-weight:800}
.modulos{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.modulos li{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:12px 14px}
.modulos b{display:block;font-family:Sora,sans-serif;font-size:15px}
.modulos span{font-size:14px;color:var(--texto)}
.preco{background:var(--grad);color:#fff;border-radius:24px;padding:22px;text-align:center;display:grid;gap:8px}
.preco .v{font:800 56px/1 Sora,sans-serif;color:var(--amarelo)}
.preco .v small{font-size:.42em;vertical-align:.9em;margin-right:3px}
.medo{background:#FBEAF6;border-radius:16px;padding:14px 16px;font-size:15px}
.selos{display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px}
.selos img{width:58px}
/* Página final no modelo do quiz da Laura (QUIZ.oferta.v2) */
.of2{display:grid;gap:16px}
.of2 .logo{margin:0 auto}
.of2-titulo{font-size:25px;font-weight:800;text-align:center}
.of2-titulo mark{display:block;background:none;color:var(--roxo);margin-top:4px}
.of2-sub{text-align:center;color:var(--texto)}
.of2-h{font-size:20px;text-align:center;margin-top:10px}
.of2 .botao{background:var(--grad);color:#fff;box-shadow:0 12px 26px rgba(141,41,242,.30)}
.check{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.check li{position:relative;padding-left:26px;font-size:15px;line-height:1.4}
.check li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--verde);font-weight:800}
.resumo{border:1.5px solid #E9C7E1}
.resumo h3{font-size:14px;color:var(--roxo)}
.trilha{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.trilha span{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:9px 4px;text-align:center;font-size:12px;line-height:1.25;color:var(--texto)}
.trilha b{display:block;color:var(--roxo);font:700 12px/1.2 Sora,sans-serif;margin-bottom:2px}
.ad{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ad p{border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.35}
.ad span{display:block;font:700 11px/1 Sora,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.ad .a{background:#FBEDEF;color:#5A4048}.ad .a span{color:#C0392B}
.ad .d{background:#EAF6EE;color:#2F4A38}.ad .d span{color:var(--verde)}
.card-preco{background:var(--branco);border:2px solid var(--violeta);border-radius:22px;padding:20px 18px;display:grid;gap:12px;box-shadow:0 14px 34px rgba(141,41,242,.14)}
.selo-topo{justify-self:start;background:var(--amarelo);color:#111;font:700 11px/1 Sora,sans-serif;padding:7px 12px;border-radius:99px}
.card-preco h3{font-size:24px}
.card-preco .sub2{color:var(--texto);font-size:15px}
.valor{font:800 46px/1 Sora,sans-serif;color:var(--roxo);margin:4px 0 0}
.valor small{font-size:.5em;vertical-align:.55em}
.valor span{font:600 15px/1 Raleway,sans-serif;color:var(--texto)}
.ancora{font-size:14px;color:var(--texto)}
.risco{display:flex;gap:10px;align-items:flex-start;background:#EAF6EE;border:1px solid #CDE8D6;border-radius:14px;padding:12px;font-size:14px}
.passos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:8px}
.passos li{counter-increment:p;position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:12px 14px 12px 54px;display:grid;gap:2px}
.passos li::before{content:counter(p);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font:700 14px/28px Sora,sans-serif;text-align:center}
.passos b{font-family:Sora,sans-serif;font-size:15px;color:var(--roxo)}
.passos span{font-size:14px;color:var(--texto)}
.quem{grid-template-columns:96px 1fr;align-items:center}
.quem img{width:96px;height:120px;object-fit:cover;object-position:top;border-radius:14px;background:var(--grad)}
.quem h3{font-size:17px}.quem p{font-size:14px;color:var(--texto)}
.garantia{background:#EAF6EE;border-radius:20px;padding:20px;text-align:center;display:grid;gap:8px;justify-items:center}
.garantia span{font-size:34px}
.garantia h3{font-size:20px}.garantia p{color:#2F4A38;font-size:15px}
.faq h4{font:700 15px/1.3 Sora,sans-serif;margin:0}.faq p{font-size:14px;color:var(--texto)}
@media (prefers-reduced-motion: reduce){.roda{animation:none}.barra i{transition:none}.linhas p{animation:none}}