/* Paleta ancorada na página da Raquel (raquelrache.com.br/piramide-vs2):
   ameixa profundo com brilho magenta no alto, creme e dourado como acento.
   Trocado em 05/09 — antes era um quase-preto azulado, que lia como "app",
   não como a marca dela. */
:root{
  --bg:#1d0817; --bg2:#2a0c20; --card:#33102880; --ink:#faf5f2; --mut:#c6a8bb;
  --gold:#d8a657; --gold2:#f0c987; --line:#4a1d3a; --ok:#7ee0b8;
  --plum:#4a1436; --creme:#f7f2ea;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 18px 60px}
/* o brilho de cima, como no hero da página da Raquel */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 18% -10%, #6b1d4d 0%, #3a0f2b 42%, transparent 72%)}
.wrap{position:relative;z-index:1}
.wrap{width:100%;max-width:620px}
header{padding:22px 0 14px;text-align:center}
.brand{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.bar{height:3px;background:var(--line);border-radius:99px;margin-top:14px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .45s cubic-bezier(.4,0,.2,1)}
.step{font-size:12px;color:var(--mut);margin-top:8px;letter-spacing:.04em}

.card{background:var(--card);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:18px;padding:26px 22px;margin-top:20px}
h1{font-size:22px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--gold2)}
.lead{color:var(--mut);font-size:15px;margin-bottom:18px}
.hint{font-size:13px;color:var(--mut);margin-top:6px}

.opts{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  background:#3a1329;border:1px solid var(--line);color:var(--ink);
  border-radius:13px;padding:15px 16px;font:inherit;cursor:pointer;transition:.18s}
.opt:hover{border-color:#6b2b52;background:#45183180}
.opt.on{border-color:var(--gold);background:#4a1a36;box-shadow:0 0 0 1px var(--gold) inset}
.box{flex:0 0 20px;height:20px;margin-top:2px;border:1.5px solid #7d4a68;border-radius:6px;position:relative;transition:.18s}
.opt[data-single] .box{border-radius:50%}
.opt.on .box{border-color:var(--gold);background:var(--gold)}
.opt.on .box:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #17111f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt[data-single].on .box:after{left:5px;top:5px;width:8px;height:8px;border:0;border-radius:50%;background:#2a0c20;transform:none}

.scale{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:22px}
.sc{background:#3a1329;border:1px solid var(--line);color:var(--ink);border-radius:12px;
  padding:16px 0;font:600 18px/1 inherit;cursor:pointer;transition:.18s}
.sc:hover{border-color:#6b2b52}
.sc.on{background:linear-gradient(160deg,var(--gold),#b9873f);border-color:var(--gold);color:#2a0c20}
.scl{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);margin-top:10px}

.nav{display:flex;gap:12px;margin-top:24px;align-items:center}
.btn{flex:1;background:linear-gradient(160deg,var(--gold2),var(--gold));color:#2a0c20;border:0;
  border-radius:13px;padding:16px;font:600 16px/1 inherit;cursor:pointer;transition:.18s}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn:not(:disabled):hover{filter:brightness(1.08)}
.back{background:none;border:0;color:var(--mut);font:inherit;font-size:14px;cursor:pointer;padding:10px 4px}
.back:hover{color:var(--ink)}

/* processamento */
#proc{display:none;padding:40px 22px}
.pl{display:flex;gap:12px;align-items:center;opacity:.22;transition:.5s;margin:14px 0;font-size:15px}
.pl.on{opacity:1}
.pl .dot{flex:0 0 18px;height:18px;border-radius:50%;border:2px solid var(--line);position:relative}
.pl.on .dot{border-color:var(--gold)}
.pl.done .dot{background:var(--ok);border-color:var(--ok)}
.pl.done .dot:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #1d0817;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pbar{height:4px;background:var(--line);border-radius:99px;margin-top:28px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .4s linear}

/* diagnóstico */
#out{display:none}
.tag{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:6px 14px;margin-bottom:16px}
#out h2{font-size:26px;line-height:1.3;font-weight:600;margin-bottom:20px;letter-spacing:-.02em}
#out p{margin-bottom:16px;font-size:16.5px;line-height:1.72}
#out p strong{color:var(--gold2);font-weight:600}
.rule{height:1px;background:var(--line);margin:26px 0}
.cta{display:block;text-align:center;background:linear-gradient(160deg,var(--gold2),var(--gold));
  color:#17111f;border:0;border-radius:14px;padding:19px;font:700 17px/1.35 inherit;
  text-decoration:none;margin-top:8px;cursor:pointer}
.meta{margin-top:26px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;
  font-size:12.5px;color:var(--mut);line-height:1.6}
.meta b{color:var(--gold)}
.restart{display:block;margin:22px auto 0;background:none;border:0;color:var(--mut);
  font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}

/* ---- etapa 2: player / slot de vídeo ---- */
.vsl{width:100%;border-radius:14px;border:1px solid var(--line);background:#000;display:block;margin:6px 0 22px}
.slot{width:100%;aspect-ratio:9/16;max-height:62vh;border-radius:14px;border:1px dashed #5b4d75;
  background:linear-gradient(160deg,#1b1428,#120e1c);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px;margin:6px 0 22px;cursor:pointer}
.slot:hover{border-color:var(--gold)}
.slot-play{width:62px;height:62px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px}
.slot-t{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.slot-s{font-size:12.5px;color:var(--mut);line-height:1.6;max-width:340px}
.slot-s code{color:var(--gold2);font-size:12px}

/* ---- captura de e-mail (desligada por padrão, CFG.EMAIL) ---- */
.mail{margin:22px 0 6px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#1a1427}
.mail label{display:block;font-size:13.5px;color:var(--mut);margin-bottom:10px}
.mail-row{display:flex;gap:8px}
.mail input{flex:1;background:#2b0d21;border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:14px;font:inherit}
.mail input:focus{outline:0;border-color:var(--gold)}
.mail button{background:linear-gradient(160deg,var(--gold2),var(--gold));color:#17111f;border:0;
  border-radius:11px;padding:14px 18px;font:600 15px/1 inherit;cursor:pointer}
.mail.ok label:after{content:" · recebido ✓";color:var(--ok)}

/* ---- etapa 0: abertura (vídeo + nome/e-mail) ---- */
#lead{margin-top:8px}
#lead label{display:block;font-size:13.5px;color:var(--mut);margin:16px 0 8px}
#lead input{width:100%;background:#2b0d21;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:15px 16px;font:inherit}
#lead input:focus{outline:0;border-color:var(--gold)}
#lead input::placeholder{color:#8f6b81}
#lead .btn{width:100%;margin-top:22px}
.erro{color:#ff9c8a;font-size:13.5px;min-height:18px;margin-top:10px}

/* ---- trava do botão até o fim do vídeo ---- */
.aviso{text-align:center;font-size:13px;color:var(--mut);margin-top:10px;min-height:18px}
.aviso.ok:before{content:"✓ liberado";color:var(--ok)}
.atalho{display:block;margin:10px auto 0;background:none;border:1px dashed var(--line);
  color:var(--mut);font:inherit;font-size:12px;border-radius:9px;padding:7px 12px;cursor:pointer}
.atalho:hover{border-color:var(--gold);color:var(--gold)}
.slot .pbar{margin-top:18px}


/* ---------- HERO DA ABERTURA ----------
   Estrutura copiada da página da Raquel: selo do produto → título grande →
   subtítulo curto. Lá é "Desafio · Pirâmide da Expansão e Consistência". */
.selo{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold2);border:1px solid #6b3a58;border-radius:99px;padding:5px 12px;margin-bottom:14px}
.produto{font-size:13px;color:var(--mut);letter-spacing:.06em;margin:-8px 0 16px}
h1.hero{font-size:30px;line-height:1.22;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
h1.hero em{font-style:normal;background:linear-gradient(100deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:#e4cfdd;font-size:15.5px;line-height:1.55;margin-bottom:22px;
  padding-left:16px;border-left:2px solid #6b3a58}
@media (max-width:420px){ h1.hero{font-size:25px} }

/* Abertura não tem header (o João tirou "Raquel Rache" e "Antes de começar" em 05/09):
   o card precisa do respiro que o header dava. */
.wrap > .card:first-child{margin-top:56px}
@media (max-width:420px){ .wrap > .card:first-child{margin-top:32px} }

/* `.cta{display:block}` venceria o `hidden` do navegador por especificidade — sem esta linha
   a trava do botão seria decorativa e a oferta apareceria desde o primeiro segundo. */
[hidden]{display:none !important;}