/* Quiz de vendas do Projeto Produtivo. Mesmo esqueleto do quiz do Guia Muscular, no tema "Noite azul" do app
   (fundo quase preto com brilho azul no topo, vidro, azul royal, Montserrat, âmbar só para sequência e bônus). */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/montserrat-latin-800-normal.woff2) format('woff2')}

:root{
  --ink:#05070f;
  --panel:rgba(120,150,255,.085);--panel-2:rgba(255,255,255,.025);--line:rgba(255,255,255,.09);
  --text:#fafafa;--muted:#9aa3b8;
  --brand:#2563eb;--brand-2:#3b74f5;--hl:#7aa2ff;
  --ok:#22c55e;--ok-deep:#15803d;--bad:#f2557a;--fire:#f59e0b;
  --font:"Montserrat","Segoe UI",system-ui,sans-serif;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;font-family:var(--font);color:var(--text);background:var(--ink);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
/* fundo parado numa camada própria (background-attachment:fixed repinta a página inteira a cada quadro) */
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 45% at 50% -8%,rgba(45,105,255,.75) 0%,rgba(30,64,175,.28) 45%,transparent 75%),
    radial-gradient(60% 40% at 100% 0%,rgba(59,130,246,.25),transparent 70%)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
strong{font-weight:700}
.hl{color:var(--hl)}

#app{max-width:480px;margin:0 auto;padding:18px 20px 40px;min-height:100dvh;display:flex;flex-direction:column}

/* Topo: logo + barra de progresso */
.top{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:26px}
.logo{width:132px;height:auto}
.progress{width:100%;height:8px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.progress i{
  display:block;height:100%;border-radius:inherit;width:var(--from,0%);
  background:linear-gradient(90deg,#1d4ed8,#5b8cff);box-shadow:0 0 18px rgba(91,140,255,.6);position:relative;overflow:hidden;
  animation:grow .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.progress i:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);transform:translateX(-100%);animation:shine 2.4s 1s infinite}
@keyframes grow{to{width:var(--to)}}
@keyframes shine{to{transform:translateX(100%)}}

/* começa em .01 e não em 0: com 0 o Chrome nunca marca a primeira pintura (PageSpeed sem nota) */
.in{opacity:.01;transform:translateY(14px);animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}

.kicker{
  align-self:center;display:inline-flex;align-items:center;gap:8px;
  font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#c7d6ff;
  padding:8px 13px;border-radius:99px;background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.3)
}
.kicker i{width:7px;height:7px;border-radius:50%;background:#5b8cff;box-shadow:0 0 0 4px rgba(91,140,255,.25);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.35}}

h1,h2{font-family:var(--font);letter-spacing:-.02em;text-align:center}
h1{font-size:clamp(30px,8.4vw,38px);font-weight:800;line-height:1.08}
h2{font-size:clamp(23px,6.4vw,28px);font-weight:700;line-height:1.18}
.lead{font-size:16px;line-height:1.55;color:var(--muted);text-align:center}
.lead strong{color:var(--text)}
.stack{display:flex;flex-direction:column;gap:18px}
.small{font-size:13px;color:var(--muted);text-align:center}

/* Botões: pílula azul do app; o de comprar é verde */
.btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:60px;padding:16px 22px;border-radius:999px;
  font:700 18px/1.1 var(--font);color:#fff;
  background:linear-gradient(180deg,var(--brand-2),#2157e0);
  box-shadow:0 14px 34px -12px rgba(37,99,235,.95),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden;
  transition:transform .12s;
}
.btn:active{transform:scale(.98)}
.btn:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-150%) skewX(-18deg);animation:sweep 3s 1.2s infinite}
/* brilho anda por transform (sem refazer o layout a cada quadro) */
@keyframes sweep{0%{transform:translateX(-150%) skewX(-18deg)}35%,100%{transform:translateX(325%) skewX(-18deg)}}
.btn svg{width:20px;height:20px;flex:none}
.btn.buy{
  font-size:19px;min-height:66px;text-transform:uppercase;letter-spacing:.02em;font-weight:800;
  background:linear-gradient(180deg,#4ade80 0%,var(--ok) 50%,#16a34a 100%);color:#04210f;
  box-shadow:0 16px 40px -12px rgba(34,197,94,.9),inset 0 1px 0 rgba(255,255,255,.35);
  animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards,pulse 1.8s 1.6s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* Vidro do app */
.glass{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 40px -24px rgba(0,0,0,.9);backdrop-filter:blur(14px)}

/* Respostas */
.options{display:grid;gap:12px}
.opt{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:16px 18px;
  text-align:left;font:600 16px/1.35 var(--font);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1.5px solid rgba(255,255,255,.1);
  transition:transform .12s,border-color .2s,background .2s;
}
.opt:active{transform:scale(.985)}
.opt .emo{font-size:24px;line-height:1;flex:none}
.opt .tx{flex:1}
.opt .ck{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:.2s}
.opt .ck svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:.2s;color:#fff}
.opt.sel{border-color:#5b8cff;background:linear-gradient(180deg,rgba(59,116,245,.28),rgba(37,99,235,.12));box-shadow:0 0 0 4px rgba(91,140,255,.15)}
.opt.sel .ck{background:var(--brand);border-color:var(--brand)}
.opt.sel .ck svg{opacity:1;transform:none}

/* Diagnóstico: 4 pilares */
.chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px 4px 18px;border-radius:24px}
.col{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 2px;min-width:0}
.col+.col{border-left:1px solid rgba(255,255,255,.06)}
.col b{font:300 27px/1 var(--font);letter-spacing:-.03em}
.col b small{font-size:15px}
.bar{position:relative;width:36px;height:160px;border-radius:12px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:inherit;background:linear-gradient(0deg,#1d4ed8,#5b8cff);animation:fill 1.3s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,.3s)}
.col.weak .bar i{background:linear-gradient(0deg,#b91c3c,var(--bad))}
.col.weak b{color:var(--bad)}
@keyframes fill{to{height:var(--h)}}
.col span{font:700 11px/1.2 var(--font);letter-spacing:-.01em;text-align:center}
.tag{font-style:normal;white-space:nowrap;display:inline-block;font:700 9px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:5px 7px;border-radius:99px;background:rgba(242,85,122,.16);color:#ff9db4;border:1px solid rgba(242,85,122,.4)}
.col .tag{visibility:hidden}
.col.weak .tag{visibility:visible}
.punch{font:700 22px/1.3 var(--font);letter-spacing:-.01em;text-align:center}

/* Celulares com as telas do app */
.hero-phone{position:relative;margin:2px auto 0;width:min(66%,240px)}
.phone{position:relative;width:100%;border-radius:30px;border:5px solid #1b2236;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;background:#000;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);max-height:420px}
.phone img{width:100%;height:auto}
.hero-phone .phone{transform:rotate(-3deg)}
.glow{position:absolute;inset:15% 5%;background:radial-gradient(circle,rgba(59,116,245,.5),transparent 65%)}
.hero-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(13,18,34,.92);border:1px solid rgba(255,255,255,.1);font:600 12.5px/1.2 var(--font);box-shadow:0 12px 30px rgba(0,0,0,.5);white-space:nowrap}
.hero-chip.c1{left:-26%;top:40%;animation:float 4s ease-in-out infinite}
.hero-chip.c2{right:-24%;top:68%;animation:float 4s 1.2s ease-in-out infinite}
.hero-chip b{color:var(--ok)}
.hero-chip .fogo{color:var(--fire)}
@keyframes float{50%{transform:translateY(-8px)}}

/* Oferta */
.timerbar{
  position:sticky;top:0;z-index:20;margin:-18px -20px 18px;padding:10px 16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,#b91c3c,#e11d48);color:#fff;font:600 13.5px/1.2 var(--font);box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.timerbar svg{width:20px;height:20px;flex:none}
.timerbar b{font:700 18px/1 var(--font);font-variant-numeric:tabular-nums;background:rgba(0,0,0,.22);padding:5px 8px;border-radius:8px}
.ready{font:800 clamp(28px,8vw,34px)/1.1 var(--font);letter-spacing:-.02em;text-align:center}
.ready span{color:var(--hl)}
.profile{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.profile span{font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.profile span.weak{border-color:rgba(242,85,122,.5);color:#ff9db4}
.items{display:flex;flex-direction:column;gap:14px}
.item{position:relative;display:flex;gap:14px;align-items:center;padding:14px;border-radius:22px}
.item .pic{width:92px;height:110px;flex:none;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.08)}
.item .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.item small{display:block;font:700 10.5px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--hl);margin-bottom:5px}
.item strong{display:block;font:700 16.5px/1.2 var(--font)}
.item p{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.item .badge{position:absolute;top:-9px;right:14px;font:700 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:var(--brand);color:#fff}
.bonus-box{padding:20px 16px;border-radius:24px;border:2px dashed rgba(245,158,11,.55);background:rgba(245,158,11,.06)}
.bonus-box h3{font:800 19px/1.2 var(--font);text-transform:uppercase;letter-spacing:.01em;text-align:center;color:var(--fire)}
.bonus-box .lead{margin-top:6px;font-size:14.5px}
.clock{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 16px;padding:10px 18px;width:max-content;border-radius:14px;background:#1c0b12;border:1px solid rgba(242,85,122,.5);font:700 26px/1 var(--font);font-variant-numeric:tabular-nums;color:#ff8fa9}
.clock svg{width:24px;height:24px}
.bonus-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px}
.bonus-grid figure{position:relative;text-align:center;width:calc((100% - 20px)/3)}
.bonus-grid img,.bonus-grid .capa{width:100%;height:auto;aspect-ratio:3/4.2;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 10px 22px rgba(0,0,0,.5)}
.bonus-grid .capa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;background:linear-gradient(160deg,#1d3fa8,#0b1530);font:800 11px/1.2 var(--font);text-transform:uppercase}
.bonus-grid .capa img{width:62%;aspect-ratio:auto;box-shadow:none;border-radius:0}
.bonus-grid figcaption{margin-top:8px;font:700 11.5px/1.25 var(--font)}
.bonus-grid .free{position:absolute;top:6px;left:6px;z-index:1;font:800 9.5px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:6px;background:var(--fire);color:#2a1a00}
.bonus-grid figcaption small{display:block;margin-top:4px;font:600 10.5px/1.2 var(--font);color:var(--muted)}
.bonus-grid figcaption small s{color:#ff8fa9}
.bonus-grid figcaption small b{color:#86efac;text-transform:uppercase}
.price{padding:24px 18px;border-radius:26px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,rgba(59,116,245,.32),rgba(255,255,255,.03));border:1.5px solid rgba(91,140,255,.45);box-shadow:0 0 50px rgba(37,99,235,.18)}
.price .anc{font-size:15.5px;line-height:1.5;font-weight:500}
.price .anc+.anc{margin-top:12px}
.price .anc s{color:#ff5a6e;font-weight:800;text-decoration-thickness:2px;white-space:nowrap}
.price .anc u{font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
.price .anc-hoje{margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.price .anc-hoje strong{color:var(--text);text-transform:uppercase}
.deal{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px auto 0;padding:14px 20px;width:max-content;max-width:100%;border-radius:18px;background:rgba(34,197,94,.14);border:1.5px solid rgba(74,222,128,.55)}
.deal b{font:800 clamp(30px,10vw,40px)/1 var(--font);letter-spacing:-.02em;white-space:nowrap}
.deal span{font-size:15px;font-weight:600;color:#86efac}
.price .plan{margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.guarantee{display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.4)}
.guarantee svg{width:44px;height:44px;flex:none;color:var(--ok)}
.guarantee strong{display:block;font:800 16px/1.2 var(--font);text-transform:uppercase}
.guarantee p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.safe{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted)}
.safe svg{width:16px;height:16px}
.foot{margin-top:28px;font-size:11px;line-height:1.5;color:#7b84a0;text-align:center}

/* Respostas "sim" em verde */
.opt.yes{border-color:rgba(34,197,94,.55);background:linear-gradient(180deg,rgba(34,197,94,.16),rgba(34,197,94,.05))}

/* Autoridade */
.proof-head{display:flex;align-items:center;gap:12px;padding:14px;border-radius:22px}
.proof-head img{width:56px;height:56px;border-radius:16px}
.proof-head strong{display:block;font-size:16px}
.proof-head small{color:var(--muted);font-size:12.5px}
.verified{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-left:4px;color:#5b8cff}
.phones{position:relative;height:400px;margin:4px 0;overflow:hidden}
.phones .phone{position:absolute;top:0;width:50%;max-height:390px}
.phones .phone.a{left:2%;transform:rotate(-6deg);z-index:1}
.phones .phone.b{right:2%;top:24px;transform:rotate(5deg);z-index:2}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:14px 8px;border-radius:18px;text-align:center}
.stat b{display:block;font:300 28px/1 var(--font);letter-spacing:-.03em;color:var(--hl)}
.stat small{display:block;margin-top:6px;font-size:11.5px;line-height:1.3;color:var(--muted)}

/* Como funciona */
.fases{list-style:none;display:flex;flex-direction:column;gap:10px}
.fases li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px}
.fases li>b{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--brand);font:700 15px/1 var(--font)}
.fases strong{display:block;font-size:15.5px}
.fases small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}

/* Carregando */
.loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center}
.ring{position:relative;width:150px;height:150px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .bg{stroke:rgba(255,255,255,.08)}
.ring .fg{stroke:url(#gr);stroke-linecap:round;stroke-dasharray:408;stroke-dashoffset:408;transition:stroke-dashoffset .1s linear}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:300 34px/1 var(--font);letter-spacing:-.03em}
.checks{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.checks li{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;font-weight:600;font-size:14.5px;opacity:.35;transition:opacity .3s}
.checks li.on{opacity:1}
.checks li i{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.22);display:grid;place-items:center}
.checks li.on i{background:var(--brand);border-color:var(--brand)}
.checks li i svg{width:14px;height:14px;color:#fff;opacity:0}
.checks li.on i svg{opacity:1}
.checks li em{font-style:normal;color:var(--hl)}

/* Perguntas frequentes */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{padding:14px 16px;border-radius:16px}
.faq summary{font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--hl);font-weight:800}
.faq details[open] summary:after{content:"–"}
.faq p{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.timerbar.end{background:#3a1626}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}