:root{
  --bg:#0a0714; --surface:#151028; --line:#2b2450;
  --text:#efeaff; --muted:#a99fce; --gold:#e8c37a; --gold2:#f6e2b3;
  --violet:#8b5cf6;
  --font-display:'Cinzel', 'Times New Roman', serif;
  --font-body:'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-read:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box}
body{margin:0;background:
   radial-gradient(1000px 600px at 50% -12%, rgba(139,92,246,.18), transparent 60%),
   var(--bg);
   color:var(--text);
   font:16px/1.65 var(--font-body);
   overflow-x:hidden}
/* granulação sutil de filme */
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--gold)}
.wrap{max-width:720px;margin:0 auto;padding:28px 18px 90px;position:relative;z-index:1}

header{text-align:center;margin:14px 0 28px}
.moon{width:52px;height:52px;margin:0 auto;display:grid;place-items:center;
   border:1px solid rgba(232,195,122,.4);border-radius:50%;
   color:var(--gold);font-size:22px;font-family:var(--font-display);
   box-shadow:0 0 26px rgba(232,195,122,.22), inset 0 0 14px rgba(232,195,122,.12)}
h1{font-family:var(--font-display);font-weight:900;font-size:27px;margin:14px 0 4px;
   letter-spacing:.04em;
   background:linear-gradient(160deg,var(--gold2),var(--gold) 55%,#b98f45);
   -webkit-background-clip:text;background-clip:text;color:transparent}
h1 small{display:block;font-family:var(--font-body);font-size:10.5px;
   letter-spacing:.34em;color:var(--muted);text-transform:uppercase;margin-top:8px;
   font-weight:500;-webkit-text-fill-color:var(--muted)}
.lead{color:var(--muted);text-align:center;max-width:520px;margin:0 auto 26px}

.card{background:linear-gradient(var(--surface),var(--surface)) padding-box,
   linear-gradient(150deg, rgba(232,195,122,.32), rgba(139,92,246,.22) 55%, rgba(232,195,122,.1)) border-box;
   border:1px solid transparent;border-radius:20px;padding:22px;margin-bottom:16px}
label{display:block;font-weight:700;margin:16px 0 7px;font-size:13.5px;
   letter-spacing:.02em}
label .req{color:var(--violet)}
.hint{font-weight:400;color:var(--muted);font-size:12.5px;margin-top:3px}
input,select,textarea{width:100%;background:#0d0920;border:1px solid var(--line);
   color:var(--text);border-radius:12px;padding:13px 14px;font:inherit;outline:none;
   transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--violet)}
textarea{min-height:120px;resize:vertical}
.count{font-size:12px;color:var(--muted);text-align:right;margin-top:4px}

.btn{width:100%;background:linear-gradient(135deg,var(--violet),#6d3fd4);color:#fff;
   border:none;border-radius:14px;padding:16px;font-weight:700;font-size:14.5px;
   font-family:var(--font-body);letter-spacing:.1em;text-transform:uppercase;
   cursor:pointer;margin-top:20px;transition:filter .15s, box-shadow .3s;
   box-shadow:0 8px 30px rgba(139,92,246,.3)}
.btn:hover{filter:brightness(1.1);box-shadow:0 8px 40px rgba(139,92,246,.5)}
.btn.skip{background:transparent;border:1px solid var(--line);color:var(--muted);
   font-weight:500;font-size:13px;box-shadow:none}
.btn.skip:hover{border-color:var(--violet);color:var(--text);filter:none}
code{background:#0d0920;border:1px solid var(--line);border-radius:6px;padding:1px 5px;font-size:12px}
.erro{background:rgba(232,120,120,.14);border:1px solid rgba(232,120,120,.4);
   color:#ffb9b9;border-radius:12px;padding:12px 14px;margin-bottom:8px;font-size:14px}
.aviso{background:rgba(232,195,122,.1);border:1px solid rgba(232,195,122,.35);
   border-radius:14px;padding:16px;color:#f3e2bf;margin-bottom:16px}
.small{color:var(--muted);font-size:12.5px;text-align:center;margin-top:18px}

/* ================= EXPERIÊNCIA CINEMATOGRÁFICA ================= */

/* céu 3D (Three.js) */
#stars3d{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}

/* céu estrelado — só opacidade (GPU leve) */
.cosmos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cosmos span{position:absolute;border-radius:50%;background:#fff;opacity:.1;
   animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.07}50%{opacity:.65}}

/* nebulosas — gradiente já suave, SEM filter (era o que pesava) */
.neb{position:fixed;width:70vw;height:70vw;border-radius:50%;
   opacity:.5;pointer-events:none;z-index:0;will-change:transform}
.neb.a{background:radial-gradient(circle, rgba(139,92,246,.16), rgba(139,92,246,.05) 40%, transparent 68%);
   top:-24vw;left:-18vw;animation:drift 38s ease-in-out infinite alternate}
.neb.b{background:radial-gradient(circle, rgba(232,195,122,.12), rgba(232,195,122,.04) 40%, transparent 68%);
   bottom:-28vw;right:-20vw;animation:drift 46s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}
   to{transform:translate3d(9vw,7vh,0) scale(1.18)}}

/* estrela cadente */
.shoot{position:fixed;width:120px;height:2px;z-index:0;pointer-events:none;
   background:linear-gradient(270deg,#fff,transparent);border-radius:2px;
   transform:rotate(-33deg);opacity:0;will-change:transform,opacity;
   animation:shootanim 1.2s ease-out forwards}
@keyframes shootanim{0%{opacity:0;transform:rotate(-33deg) translateX(0)}
   12%{opacity:.9}100%{opacity:0;transform:rotate(-33deg) translateX(-52vw)}}

/* letterbox */
.bar-top,.bar-bot{position:fixed;left:0;right:0;height:7.5vh;background:#040210;
   z-index:40;transition:transform 1s cubic-bezier(.7,0,.3,1);pointer-events:none;
   will-change:transform}
.bar-top{top:0;transform:translateY(-101%)}
.bar-bot{bottom:0;transform:translateY(101%)}
body.cine .bar-top{transform:translateY(0)}
body.cine .bar-bot{transform:translateY(0)}

/* texto do ritual */
.ritual{text-align:center;color:var(--gold);margin:6px 0 20px;min-height:1.6em;
   font-family:var(--font-display);font-weight:500;font-size:15px;
   letter-spacing:.22em;text-transform:uppercase;
   text-shadow:0 0 18px rgba(232,195,122,.35);transition:opacity .3s}
.ritual.fade{opacity:0}

/* baralho */
.deckzone{display:flex;justify-content:center;margin:10px 0 26px;min-height:150px;
   transition:opacity .8s, transform .8s}
.deckzone.gone{opacity:0;transform:scale(.7);min-height:0;height:0;margin:0;overflow:hidden}
.deck{position:relative;width:96px;height:164px}
/* glow do "pensando" numa camada única, só opacidade */
.deck::after{content:'';position:absolute;inset:-26px;border-radius:50%;
   background:radial-gradient(circle, rgba(139,92,246,.4), transparent 70%);
   opacity:0}
.deck.pulse::after{animation:pulseg 1.6s ease-in-out infinite}
@keyframes pulseg{0%,100%{opacity:0}50%{opacity:1}}
.dback{position:absolute;inset:0;border-radius:12px;will-change:transform;
   background:url('/static/card-back.svg') center/cover no-repeat, #1c1440;
   border:1px solid rgba(232,195,122,.3);
   box-shadow:0 10px 26px rgba(0,0,0,.5)}
.dback:nth-child(1){transform:rotate(-6deg) translateX(-6px)}
.dback:nth-child(2){transform:rotate(-2deg)}
.dback:nth-child(3){transform:rotate(3deg) translateX(5px)}
.dback:nth-child(4){transform:rotate(0)}
.deck.shuffling .dback{animation:shuf .38s ease-in-out infinite alternate}
.deck.shuffling .dback:nth-child(2){animation-delay:.09s;animation-direction:alternate-reverse}
.deck.shuffling .dback:nth-child(3){animation-delay:.18s}
.deck.shuffling .dback:nth-child(4){animation-delay:.27s;animation-direction:alternate-reverse}
@keyframes shuf{from{transform:translate(-24px,-12px) rotate(-15deg)}
   to{transform:translate(24px,7px) rotate(13deg)}}

/* mesa / slots */
.mesa{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:6px 0 14px}
.slot{display:flex;flex-direction:column;align-items:center;gap:9px}
.slot-card{position:relative;width:132px;aspect-ratio:7/12;border-radius:12px;
   display:grid;place-items:center;overflow:hidden;
   background:linear-gradient(rgba(10,7,20,.68),rgba(10,7,20,.68)),
     url('/static/card-back.svg') center/cover no-repeat;
   border:1px solid rgba(169,159,206,.25);
   transition:border-color .5s, box-shadow .5s}
.slot-q{display:none}
.slot-card.filled{border:1px solid rgba(232,195,122,.5);
   box-shadow:0 10px 30px rgba(139,92,246,.28), 0 0 0 4px rgba(232,195,122,.07);
   animation:landed .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes landed{0%{transform:scale(1.14);opacity:.4}100%{transform:scale(1);opacity:1}}
.slot-card img{width:100%;height:100%;object-fit:cover;display:block}
.slot-card img.inv{transform:rotate(180deg)}
.slot-card .cname{position:absolute;left:0;right:0;bottom:0;padding:30px 6px 8px;
   font-size:11px;font-weight:700;text-align:center;color:var(--gold2);
   font-family:var(--font-display);letter-spacing:.04em;
   text-shadow:0 1px 3px #000;
   background:linear-gradient(transparent,rgba(6,4,16,.85) 45%,rgba(6,4,16,.98))}
.slot-card .invtag{position:absolute;top:6px;right:6px;font-size:8.5px;
   letter-spacing:.12em;text-transform:uppercase;color:#0a0714;font-weight:700;
   background:var(--gold);border-radius:999px;padding:2px 7px}
.slot-glyph{font-size:40px;color:var(--gold)}
.slot-glyph.big{font-size:90px}
.slot .pos{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
   color:var(--muted);font-family:var(--font-display);font-weight:700}

/* ---- palco da revelação ---- */
.spot{position:fixed;inset:0;z-index:50;cursor:pointer}
.spot[hidden]{display:none!important}
/* SEM backdrop-filter (jank) — escurecimento por gradiente denso */
.spot-bg{position:absolute;inset:0;
   background:radial-gradient(760px 540px at 50% 45%, rgba(80,52,150,.36), rgba(5,3,13,.97) 72%);
   opacity:0;transition:opacity .55s;will-change:opacity}
.spot.on .spot-bg{opacity:1}
.spot-stage{position:absolute;inset:0;display:flex;flex-direction:column;
   align-items:center;justify-content:center;gap:20px}

/* raios de luz */
.rays{position:absolute;width:min(160vw,940px);aspect-ratio:1;border-radius:50%;
   background:repeating-conic-gradient(from 0deg,
     rgba(232,195,122,.10) 0deg 5deg, transparent 5deg 16deg);
   -webkit-mask:radial-gradient(circle,#000 0%,transparent 62%);
   mask:radial-gradient(circle,#000 0%,transparent 62%);
   animation:spinrays 22s linear infinite;opacity:0;transition:opacity .9s;
   pointer-events:none;will-change:transform,opacity}
.spot.revealed .rays{opacity:1}
@keyframes spinrays{to{transform:rotate(360deg)}}

/* cartela do título — letras entram uma a uma (GSAP stagger) */
.spot-pos{font-family:var(--font-display);font-weight:900;
   font-size:clamp(22px,5vw,34px);letter-spacing:.3em;text-transform:uppercase;
   opacity:0;text-indent:.3em;text-align:center;
   background:linear-gradient(160deg,var(--gold2),var(--gold) 55%,#b98f45);
   -webkit-background-clip:text;background-clip:text;color:transparent;
   filter:drop-shadow(0 0 26px rgba(232,195,122,.5))}
.spot.title .spot-pos{opacity:1}
.spot-pos .ch{display:inline-block;will-change:transform,opacity,filter}
.spot-hint{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
   color:var(--muted);opacity:0;transition:opacity .6s 1s}
.spot.revealed .spot-hint{opacity:.75}

/* a carta — TODO movimento via GSAP (sem transitions de transform aqui) */
.flip3d{position:relative;width:min(66vw,310px);aspect-ratio:7/12;
   transform-style:preserve-3d;perspective:1400px;will-change:transform,opacity;
   opacity:0}
.f-back,.f-face{position:absolute;inset:0;border-radius:16px;
   backface-visibility:hidden;-webkit-backface-visibility:hidden;
   will-change:transform;
   transition:transform .8s cubic-bezier(.35,.1,.25,1)}
.f-back{background:url('/static/card-back.svg') center/cover no-repeat, #1c1440;
   border:1px solid rgba(232,195,122,.4);
   box-shadow:0 18px 60px rgba(0,0,0,.6)}
.f-back span{display:none}
.f-face{transform:rotateY(180deg);overflow:hidden;background:#100b26;
   border:1px solid rgba(232,195,122,.55);
   box-shadow:0 18px 70px rgba(139,92,246,.5), inset 0 0 0 1px rgba(232,195,122,.3)}
.flip3d.flipped .f-back{transform:rotateY(-180deg)}
.flip3d.flipped .f-face{transform:rotateY(0)}
.f-face img{width:100%;height:100%;object-fit:cover;display:block;
   transition:transform 1.15s cubic-bezier(.65,.05,.25,1)}
.f-face img.inv{transform:rotate(180deg) scale(1.001)}
.f-label .invword{opacity:0;color:#c4b5fd;transition:opacity .6s .4s}
.f-label .invword.show{opacity:1}
.f-label{position:absolute;left:0;right:0;bottom:0;padding:40px 10px 14px;
   text-align:center;font-family:var(--font-display);font-weight:700;font-size:17px;
   color:var(--gold2);letter-spacing:.05em;text-shadow:0 1px 4px #000;
   background:linear-gradient(transparent,rgba(6,4,16,.88) 45%,rgba(6,4,16,.98))}
.flip3d.flipped .f-face::after{content:'';position:absolute;inset:0;
   background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 62%);
   transform:translateX(-120%);animation:shine 1.1s .4s ease forwards}
@keyframes shine{to{transform:translateX(120%)}}

/* explosão de luz colada na carta */
.f-burst{position:absolute;inset:-40%;border-radius:50%;pointer-events:none;
   background:radial-gradient(circle, rgba(232,195,122,.6), rgba(139,92,246,.28) 40%, transparent 70%);
   opacity:0;transform:scale(.3);will-change:transform,opacity}
.f-burst.go{animation:burst 1.1s .5s ease-out forwards}
@keyframes burst{0%{opacity:0;transform:scale(.3)}
   25%{opacity:1}100%{opacity:0;transform:scale(1.7)}}

/* efeitos de tela */
.flash{position:fixed;inset:0;z-index:54;pointer-events:none;
   background:radial-gradient(circle at 50% 45%, rgba(255,240,200,.5), transparent 62%);
   animation:flashk .55s ease-out forwards;will-change:opacity}
@keyframes flashk{from{opacity:1}to{opacity:0}}
.wave{position:fixed;z-index:55;width:40px;height:40px;margin:-20px 0 0 -20px;
   border:2px solid rgba(232,195,122,.7);border-radius:50%;pointer-events:none;
   animation:wavek .95s ease-out forwards;will-change:transform,opacity}
@keyframes wavek{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(14)}}
.pt{position:fixed;z-index:55;width:5px;height:5px;border-radius:50%;
   pointer-events:none;box-shadow:0 0 8px currentColor;
   will-change:transform,opacity}   /* movimento via GSAP */

.btn.skipanim{width:auto;display:inline-block;background:transparent;
   border:1px solid var(--line);color:var(--muted);font-weight:500;font-size:12px;
   padding:9px 16px;margin-top:2px;box-shadow:none}
.btn.skipanim:hover{border-color:var(--violet);color:var(--text);filter:none}

/* ---- o selo (o segredo só se abre com um gesto) ---- */
.selo{text-align:center;padding:46px 20px;margin-top:8px}
.selo-anel{width:92px;height:92px;margin:0 auto;display:grid;place-items:center;
   border:1.5px solid rgba(232,195,122,.65);border-radius:50%;
   background:radial-gradient(circle at 50% 38%, rgba(232,195,122,.14), transparent 65%);
   box-shadow:0 0 44px rgba(232,195,122,.3), inset 0 0 22px rgba(232,195,122,.14);
   animation:selopulso 2.6s ease-in-out infinite}
@keyframes selopulso{0%,100%{box-shadow:0 0 30px rgba(232,195,122,.22), inset 0 0 22px rgba(232,195,122,.12)}
   50%{box-shadow:0 0 60px rgba(232,195,122,.45), inset 0 0 26px rgba(232,195,122,.2)}}
.selo-anel span{font-family:var(--font-display);font-size:36px;color:var(--gold);
   text-shadow:0 0 24px rgba(232,195,122,.8)}
.selo-txt{font-family:var(--font-read);font-size:20px;font-style:italic;
   color:var(--gold2);line-height:1.6;margin:22px auto 6px;max-width:400px}
.selo-btn{max-width:320px}

/* ---- o rito da invocação (selo quebrado → cartas orbitam → luz → mensagem) ---- */
.rito{position:fixed;inset:0;z-index:70;cursor:pointer;
   background:radial-gradient(820px 620px at 50% 46%, rgba(80,52,150,.34), rgba(4,2,10,.97) 72%)}
.rito-rays{position:fixed;left:50%;top:50%;width:min(170vw,980px);aspect-ratio:1;
   border-radius:50%;
   background:repeating-conic-gradient(from 0deg,
     rgba(232,195,122,.12) 0deg 5deg, transparent 5deg 15deg);
   -webkit-mask:radial-gradient(circle,#000 0%,transparent 60%);
   mask:radial-gradient(circle,#000 0%,transparent 60%);
   animation:spinraysC 26s linear infinite;opacity:0;transition:opacity 1s;
   pointer-events:none;will-change:transform,opacity}
@keyframes spinraysC{from{transform:translate(-50%,-50%) rotate(0)}
   to{transform:translate(-50%,-50%) rotate(360deg)}}
.rito.lit .rito-rays{opacity:1}
.gcard{position:fixed;border-radius:10px;background-size:cover;background-position:center;
   border:1px solid rgba(232,195,122,.55);pointer-events:none;
   box-shadow:0 0 34px rgba(232,195,122,.4), 0 0 90px rgba(139,92,246,.35);
   will-change:transform,left,top,opacity}
.rito-lines{position:fixed;inset:0;display:flex;flex-direction:column;
   align-items:center;justify-content:center;gap:30px;pointer-events:none;
   padding:0 20px}
/* cor sólida de propósito: background-clip:text some quando os spans
   das letras viram camadas compostas (filter/will-change) */
.rito-line{font-family:var(--font-display);font-weight:700;
   font-size:clamp(17px,3.4vw,25px);letter-spacing:.16em;text-align:center;
   text-transform:uppercase;text-indent:.16em;color:var(--gold2);
   text-shadow:0 0 26px rgba(232,195,122,.55), 0 0 60px rgba(232,195,122,.25)}
.rito-line.big{font-size:clamp(30px,7vw,52px);font-weight:900;letter-spacing:.1em;
   text-indent:.1em;color:#fbf0d8;
   text-shadow:0 0 30px rgba(232,195,122,.7), 0 0 80px rgba(232,195,122,.35)}
.rito-line .ch{display:inline-block;will-change:transform,opacity,filter}

/* leitura aparece só depois do selo */
.leitura-wrap{display:none;margin-top:8px}
.leitura-wrap.show{display:block;animation:fadeup .8s ease}
@keyframes fadeup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* seções: escondidas até o lead chegar nelas (o segredo se descobre no scroll) */
.leitura .sec > *{opacity:0;will-change:opacity,transform,filter}
.leitura .sec.vis > *{will-change:auto}

/* leitura (tipografia de filme: serifa literária) */
.leitura{background:linear-gradient(var(--surface),var(--surface)) padding-box,
   linear-gradient(150deg, rgba(232,195,122,.4), rgba(139,92,246,.25) 50%, rgba(232,195,122,.12)) border-box;
   border:1px solid transparent;border-radius:22px;padding:38px 34px;
   font-family:var(--font-read);font-size:19.5px;line-height:1.8;
   letter-spacing:.005em}
/* cor sólida: background-clip:text some com as letras animadas (compositing) */
.leitura h3{font-family:var(--font-display);font-weight:700;font-size:19px;
   letter-spacing:.08em;margin:34px 0 14px;text-transform:uppercase;
   color:var(--gold2);text-shadow:0 0 18px rgba(232,195,122,.4)}
.leitura h3 .ch{display:inline-block;will-change:transform,opacity,filter}
.leitura h3::after{content:'';display:block;width:0;height:1px;margin-top:10px;
   background:linear-gradient(90deg,var(--gold),transparent);opacity:0;
   transition:width 1s .45s ease, opacity .6s .45s ease}
.leitura .sec.vis h3::after{width:72px;opacity:1}
.leitura .sec:first-child h3{margin-top:0}
/* capitular dourada — cara de manuscrito */
.leitura .sec p:first-of-type::first-letter{font-family:var(--font-display);
   float:left;font-size:3em;line-height:.82;padding:6px 10px 0 0;
   color:var(--gold);text-shadow:0 0 18px rgba(232,195,122,.35)}
.leitura strong{color:#fff;font-weight:700}
.leitura blockquote{border-left:2px solid var(--gold);margin:18px 0;padding:4px 18px;
   color:var(--muted);background:rgba(232,195,122,.05);border-radius:0 12px 12px 0}
.leitura hr{border:none;text-align:center;margin:30px 0;height:auto}
.leitura hr::after{content:'✦  ✦  ✦';color:rgba(232,195,122,.5);font-size:11px;
   letter-spacing:1em;text-indent:1em}
.leitura ul{padding-left:20px}.leitura li{margin:8px 0}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--violet);
   border-radius:50%;animation:s 1s linear infinite;margin:30px auto}
@keyframes s{to{transform:rotate(360deg)}}
.status{text-align:center;color:var(--muted);padding:40px 0}

/* ================= WIZARD (uma pergunta por vez) ================= */
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(43,36,80,.6);
   z-index:60}
.prog i{display:block;height:100%;width:4%;
   background:linear-gradient(90deg,var(--violet),var(--gold));
   transition:width .6s cubic-bezier(.4,0,.2,1)}
.wizard{min-height:88vh;display:flex;flex-direction:column;justify-content:center;
   max-width:560px}
.wizard .step{display:none}
.wizard .step.on{display:block;animation:stepin .55s cubic-bezier(.2,.8,.3,1)}
@keyframes stepin{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.stepnum{font-family:var(--font-display);color:var(--gold);font-size:12px;
   letter-spacing:.4em;margin:0 0 14px;opacity:.8}
.qtitle{font-family:var(--font-display);font-weight:700;font-size:24px;
   letter-spacing:.02em;margin:0 0 10px;color:#fff;line-height:1.35}
.qhint{color:var(--muted);font-size:14px;margin:0 0 22px}
.wizard input,.wizard textarea{font-size:17px}
.wizard textarea{min-height:150px}
.opt{display:block;width:100%;text-align:left;padding:16px 18px;margin:10px 0;
   background:#0d0920;border:1px solid var(--line);border-radius:14px;
   cursor:pointer;font:500 15.5px/1.4 var(--font-body);color:var(--text);
   transition:border-color .2s, background .2s, transform .15s}
.opt:hover{border-color:rgba(232,195,122,.5)}
.opt.sel{border-color:var(--gold);background:rgba(232,195,122,.09);
   transform:scale(1.015)}
.btnrow{display:flex;gap:10px}
.btnrow .btn{flex:1}
.btnrow .btn.skip{flex:0 0 32%}
.voltar{text-align:center;margin-top:26px;min-height:1.2em}
.voltar a{color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.06em}
.voltar a:hover{color:var(--text)}
.count.ok{color:var(--gold)}

/* tela de acolhimento */
.ackstep{cursor:pointer}
.ack{text-align:center;padding:30px 0}
.ack-star{font-family:var(--font-display);font-size:34px;color:var(--gold);
   text-shadow:0 0 30px rgba(232,195,122,.7);animation:ackstar 2.4s ease-in-out infinite}
@keyframes ackstar{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.ack-msg{font-family:var(--font-display);font-weight:500;font-size:21px;
   line-height:1.6;color:var(--gold2);max-width:460px;margin:22px auto 0;
   letter-spacing:.01em}
.ack-tap{color:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
   margin-top:34px;opacity:.6}

@media (max-width:520px){
  .slot-card{width:96px}
  .mesa{gap:10px}
  .bar-top,.bar-bot{height:5.5vh}
  .leitura{padding:26px 20px;font-size:15.5px}
  .qtitle{font-size:21px}
  .ack-msg{font-size:18.5px}
}
@media (prefers-reduced-motion: reduce){
  .cosmos span,.neb,.rays{animation:none!important}
}

/* ================= MODO FILME ================= */

/* névoa em movimento */
.fog{position:fixed;width:130vw;height:60vh;pointer-events:none;z-index:1;
   will-change:transform;opacity:.07}
.fog.f1{top:8vh;left:-40vw;
   background:radial-gradient(ellipse at center, #b9a4ff 0%, transparent 60%);
   animation:fogmove 70s ease-in-out infinite alternate}
.fog.f2{bottom:4vh;right:-45vw;opacity:.055;
   background:radial-gradient(ellipse at center, #e8c37a 0%, transparent 60%);
   animation:fogmove 95s ease-in-out infinite alternate-reverse}
@keyframes fogmove{from{transform:translateX(0)}to{transform:translateX(22vw)}}

/* vinheta de cinema */
.vinheta{position:fixed;inset:0;pointer-events:none;z-index:45;
   box-shadow:inset 0 0 220px 60px rgba(2,1,8,.62)}

/* brasas subindo */
.ember{position:fixed;bottom:-12px;width:3px;height:3px;border-radius:50%;
   background:#e8c37a;box-shadow:0 0 8px rgba(232,195,122,.9);
   z-index:1;pointer-events:none;opacity:0;will-change:transform,opacity}

/* botão de som */
.btn-som{position:fixed;top:14px;right:14px;z-index:90;width:42px;height:42px;
   border-radius:50%;background:rgba(21,16,40,.8);border:1px solid var(--line);
   color:var(--text);font-size:17px;cursor:pointer;transition:border-color .2s}
.btn-som:hover{border-color:var(--gold)}

/* ---- cold open ---- */
.abertura{position:fixed;inset:0;z-index:95;cursor:pointer;background:#050310;
   display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:16px;text-align:center;padding:0 22px}
.ab-star{font-family:var(--font-display);font-size:44px;color:var(--gold);
   text-shadow:0 0 40px rgba(232,195,122,.8);opacity:0}
.ab-eyebrow{font-family:var(--font-body);font-size:11px;letter-spacing:.42em;
   text-transform:uppercase;color:var(--muted);opacity:0}
.ab-title{font-family:var(--font-display);font-weight:900;
   font-size:clamp(28px,6.4vw,50px);letter-spacing:.06em;color:#fbf0d8;
   text-shadow:0 0 34px rgba(232,195,122,.5);margin:0;opacity:0}
.ab-sub{font-family:var(--font-read);font-style:italic;font-size:19px;
   color:var(--gold);margin:0;opacity:0}
.ab-tap{font-family:var(--font-body);font-size:11px;letter-spacing:.3em;
   text-transform:uppercase;color:var(--muted);margin-top:34px;opacity:0;
   animation:tappulse 2.2s ease-in-out 2.4s infinite}
@keyframes tappulse{0%,100%{opacity:.45}50%{opacity:.95}}

/* ---- cartela de ato ---- */
.ato{position:fixed;inset:0;z-index:85;cursor:pointer;background:rgba(4,2,12,.94);
   display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:18px;text-align:center;padding:0 20px}
.ato-eyebrow{font-family:var(--font-body);font-size:12px;letter-spacing:.5em;
   text-transform:uppercase;color:var(--gold);opacity:.9;text-indent:.5em}
.ato-title{font-family:var(--font-display);font-weight:900;
   font-size:clamp(30px,7vw,54px);letter-spacing:.14em;text-transform:uppercase;
   text-indent:.14em;color:#fbf0d8;
   text-shadow:0 0 34px rgba(232,195,122,.6), 0 0 90px rgba(232,195,122,.25)}
.ato-title .ch{display:inline-block;will-change:transform,opacity,filter}
.ato-orn{font-family:var(--font-display);color:var(--gold);font-size:14px;
   letter-spacing:.3em;opacity:0}

/* ---- o entregável como artefato ---- */
/* cantos ornamentais na leitura */
.leitura{position:relative}
.leitura::before,.leitura::after{content:'';position:absolute;width:26px;height:26px;
   border-color:rgba(232,195,122,.55);border-style:solid;pointer-events:none}
.leitura::before{top:12px;left:12px;border-width:1.5px 0 0 1.5px;border-radius:6px 0 0 0}
.leitura::after{bottom:12px;right:12px;border-width:0 1.5px 1.5px 0;border-radius:0 0 6px 0}

/* prólogo (folha de rosto) */
.prologo{text-align:center;padding:8px 0 26px}
.pro-orn{font-family:var(--font-display);color:var(--gold);font-size:20px;
   text-shadow:0 0 20px rgba(232,195,122,.6)}
.pro-eyebrow{font-family:var(--font-body);font-size:10.5px;letter-spacing:.38em;
   text-transform:uppercase;color:var(--muted);margin-top:14px}
.pro-nome{font-family:var(--font-display);font-weight:900;
   font-size:clamp(30px,6.4vw,46px);letter-spacing:.05em;color:#fbf0d8;
   text-shadow:0 0 30px rgba(232,195,122,.5);margin:8px 0 6px}
.pro-meta{font-family:var(--font-read);font-style:italic;font-size:16.5px;
   color:var(--muted)}
.pro-linha{width:120px;height:1px;margin:20px auto 0;
   background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* capítulos */
.cap-eyebrow{font-family:var(--font-body);font-size:10.5px;letter-spacing:.4em;
   text-transform:uppercase;color:rgba(232,195,122,.65);margin:34px 0 4px}
.cap-eyebrow + h3{margin-top:0!important}

/* leque das cartas no capítulo */
.fan{display:flex;justify-content:center;padding:16px 0 10px}
.fan img{width:88px;aspect-ratio:7/12;object-fit:cover;border-radius:8px;
   border:1px solid rgba(232,195,122,.55);margin:0 -12px;
   box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 22px rgba(139,92,246,.25);
   transform:rotate(calc((var(--i) - (var(--n) - 1)/2)*9deg))
     translateY(calc((var(--i) - (var(--n) - 1)/2)*(var(--i) - (var(--n) - 1)/2)*6px));
   transition:transform .3s}
.fan img.inv{transform:rotate(calc((var(--i) - (var(--n) - 1)/2)*9deg + 180deg))
     translateY(calc((var(--i) - (var(--n) - 1)/2)*(var(--i) - (var(--n) - 1)/2)*-6px))}
.fan img:hover{transform:rotate(0) translateY(-8px) scale(1.6);z-index:5;position:relative}

/* selo de encerramento */
.fim{text-align:center;padding:30px 0 6px}
.fim-star{font-family:var(--font-display);font-size:26px;color:var(--gold);
   text-shadow:0 0 24px rgba(232,195,122,.7);animation:ackstar 2.6s ease-in-out infinite}
.fim-txt{font-family:var(--font-read);font-style:italic;font-size:19px;
   color:var(--gold2);margin-top:10px}
.fim-data{font-family:var(--font-body);font-size:11px;letter-spacing:.3em;
   text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ================= WARP / NARRAÇÃO / TIMELINE ================= */
.speedlines{position:fixed;inset:-22%;z-index:88;pointer-events:none;border-radius:50%;
   background:repeating-conic-gradient(from 0deg,
     rgba(246,226,179,.55) 0deg .6deg, transparent .6deg 5.4deg);
   -webkit-mask:radial-gradient(circle, transparent 20%, #000 64%);
   mask:radial-gradient(circle, transparent 20%, #000 64%);
   filter:blur(1.5px);opacity:0;will-change:transform,opacity}

.narra{position:fixed;inset:0;z-index:92;display:grid;place-items:center;
   background:rgba(3,2,10,.92);cursor:pointer;padding:0 26px}
.narra-line{font-family:var(--font-read);font-style:italic;font-weight:500;
   font-size:clamp(22px,4.4vw,34px);color:#efe6cf;text-align:center;max-width:660px;
   line-height:1.65;text-shadow:0 0 32px rgba(232,195,122,.35);
   will-change:transform,opacity,filter}
.narra-line .ch{display:inline-block;will-change:transform,opacity,filter}

.lerbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
   background:linear-gradient(90deg,var(--violet),var(--gold));
   box-shadow:0 0 14px rgba(232,195,122,.65)}

/* portal de decolagem (landing → checkout) */
.portal{position:fixed;inset:0;z-index:95;background:#050310;
   display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:22px;text-align:center}
.portal-star{font-family:var(--font-display);font-size:52px;color:var(--gold);
   text-shadow:0 0 44px rgba(232,195,122,.85);
   animation:portalspin 2.4s cubic-bezier(.5,.1,.4,.9) infinite}
@keyframes portalspin{0%{transform:rotate(0) scale(1)}
   50%{transform:rotate(180deg) scale(1.35)}100%{transform:rotate(360deg) scale(1)}}
.portal-txt{font-family:var(--font-display);font-size:15px;letter-spacing:.3em;
   text-transform:uppercase;color:var(--gold2);text-indent:.3em}

/* ================= HERO DA LANDING (converte só de olhar) ================= */
.hero-fan{display:flex;justify-content:center;margin:6px 0 30px;
   filter:drop-shadow(0 18px 40px rgba(139,92,246,.35))}
.hf-card{width:104px;aspect-ratio:7/12;border-radius:10px;margin:0 -16px;
   background:url('/static/card-back.svg') center/cover no-repeat, #1c1440;
   border:1px solid rgba(232,195,122,.5);
   box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(232,195,122,.18);
   transform:rotate(var(--r)) translateY(var(--y));
   animation:heroflote 5.2s ease-in-out infinite}
.hf-card:nth-child(1){animation-delay:.4s}
.hf-card:nth-child(3){animation-delay:.9s}
@keyframes heroflote{0%,100%{transform:rotate(var(--r)) translateY(var(--y))}
   50%{transform:rotate(var(--r)) translateY(calc(var(--y) - 9px))}}
.hero-title{font-family:var(--font-display);font-weight:900;text-align:center;
   font-size:clamp(27px,6vw,40px);line-height:1.28;letter-spacing:.02em;
   color:#fbf0d8;margin:0 0 14px;
   text-shadow:0 0 34px rgba(232,195,122,.45), 0 0 90px rgba(232,195,122,.18)}
.hero-sub{font-family:var(--font-read);font-style:italic;font-size:19.5px;
   line-height:1.65;color:var(--muted);text-align:center;max-width:470px;
   margin:0 auto 22px}
.hero-sub em{color:var(--gold);font-style:italic}
.hero-list{list-style:none;padding:0;max-width:400px;margin:0 auto 6px}
.hero-list li{position:relative;padding:7px 0 7px 26px;
   font-size:15px;color:var(--text)}
.hero-list li span{position:absolute;left:0;top:7px;color:var(--gold);
   font-family:var(--font-display);text-shadow:0 0 12px rgba(232,195,122,.6)}
.hero-cta{max-width:400px;display:block;margin:18px auto 0;padding:18px;
   font-size:15.5px;animation:ctapulse 2.8s ease-in-out infinite}
@keyframes ctapulse{0%,100%{box-shadow:0 8px 30px rgba(139,92,246,.35)}
   50%{box-shadow:0 8px 46px rgba(139,92,246,.65), 0 0 30px rgba(232,195,122,.25)}}
.hero-fine{color:rgba(169,159,206,.55);font-size:10.5px;text-align:center;
   max-width:420px;margin:30px auto 0;line-height:1.6}

/* espaço do anel 3D no hero */
.hero-space{height:36vh;max-height:330px;min-height:210px}

/* hero — eyebrow e nudge */
.hero-eyebrow{font-family:var(--font-body);font-size:11px;letter-spacing:.42em;
   text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:14px;
   opacity:.85}
.hero-nudge{font-family:var(--font-read);font-style:italic;font-size:15px;
   color:var(--muted);text-align:center;margin:16px auto 0;max-width:380px}

/* ---- tela de pagamento ---- */
.pg-lead{font-family:var(--font-read);font-size:19px;line-height:1.6;
   color:var(--muted);margin:0 0 22px}
.planolink{display:block;margin-top:14px;color:var(--muted);font-size:13.5px;
   text-decoration:none;border-bottom:1px dotted rgba(169,159,206,.4);
   padding-bottom:2px;width:fit-content;margin-left:auto;margin-right:auto}
.planolink:hover{color:var(--gold);border-color:var(--gold)}
.pg-status{margin-top:22px;font-family:var(--font-body);font-size:13px;
   letter-spacing:.08em;color:var(--muted);opacity:.6;transition:opacity .4s}
.pg-status.on{opacity:1;color:var(--gold)}
.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
   background:var(--gold);margin-right:7px;vertical-align:middle;
   animation:selopulso 1.6s ease-in-out infinite}

/* ---- seleção de planos ---- */
.planos{display:flex;gap:12px;margin:8px 0 4px}
.plano{flex:1;position:relative;display:flex;flex-direction:column;gap:6px;
   text-align:center;text-decoration:none;color:var(--text);
   background:#0d0920;border:1px solid var(--line);border-radius:16px;
   padding:20px 14px 16px;transition:border-color .2s, transform .15s, box-shadow .3s}
.plano:hover{border-color:rgba(232,195,122,.6);transform:translateY(-3px)}
.plano.destaque{border-color:rgba(232,195,122,.55);
   background:linear-gradient(#140f2c,#0d0920);
   box-shadow:0 10px 34px rgba(139,92,246,.25)}
.plano-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
   background:linear-gradient(135deg,var(--gold2),var(--gold));color:#0a0714;
   font-family:var(--font-body);font-size:9.5px;font-weight:800;letter-spacing:.14em;
   text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap}
.plano-nome{font-family:var(--font-display);font-weight:700;font-size:15px;
   color:var(--gold2);letter-spacing:.04em}
.plano-preco{font-family:var(--font-display);font-weight:900;font-size:26px;color:#fff}
.plano-preco span{font-family:var(--font-body);font-size:12px;font-weight:500;
   color:var(--muted);letter-spacing:.02em}
.plano-desc{font-size:12.5px;color:var(--muted);line-height:1.5;min-height:3.6em}
.plano-cta{margin-top:6px;font-family:var(--font-body);font-size:12px;font-weight:800;
   letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.plano.destaque .plano-cta{color:var(--gold)}
@media (max-width:480px){ .planos{flex-direction:column} .plano-desc{min-height:0} }

/* cota esgotada */
.cota-reset{font-family:var(--font-read);font-size:18px;color:var(--gold2);
   line-height:1.6;margin:0 0 20px}