:root{
  --navy:#0F2742; --navy-d:#0a1c30; --navy-2:#16324f;
  --amber:#FFC846; --orange:#FF6A2A; --ember:#e8551a;
  --white:#fff; --muted:#aebccd; --line:rgba(255,255,255,.14);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--navy); color:var(--white);
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden; position:fixed; inset:0;
}
.screen{position:absolute; inset:0; display:none; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch}
.screen.active{display:flex}
.inner{width:100%; max-width:440px; margin:auto; display:flex; flex-direction:column; align-items:center;
  gap:16px; text-align:center; padding:calc(40px + var(--safe-t)) 26px calc(108px + var(--safe-b))}

/* fundo institucional */
#welcome,#error,#processing{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,106,42,.16), transparent 58%),
    radial-gradient(100% 60% at 50% 100%, rgba(255,200,70,.10), transparent 60%),
    var(--navy);
}
#form,#booth,#result{background:radial-gradient(130% 70% at 50% -10%, rgba(255,106,42,.12), transparent 60%), var(--navy)}

.kicker{font-weight:700; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange)}
.title{font-weight:900; font-size:60px; line-height:.92; margin:0; letter-spacing:-.02em; text-transform:uppercase}
.title span{color:var(--amber)}
.lead{font-size:16px; line-height:1.55; color:#e7edf4; margin:0; max-width:380px}

/* ---------- cards de experiência (welcome) ---------- */
.exp-cards{display:flex; flex-direction:column; gap:14px; width:100%; margin-top:4px}
.exp-card{display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:18px; padding:18px 18px;
  color:#fff; cursor:pointer; transition:transform .08s ease, border-color .2s, background .2s}
.exp-card:active{transform:scale(.985)}
.exp-card[data-exp="futuro"]{border-color:rgba(255,106,42,.55); background:rgba(255,106,42,.08)}
.exp-tag{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.tag-ia{background:var(--orange); color:#fff}
.tag-real{background:rgba(255,200,70,.18); color:var(--amber); border:1px solid rgba(255,200,70,.4)}
.exp-name{font-size:20px; font-weight:800; line-height:1.1}
.exp-desc{font-size:13px; line-height:1.45; color:var(--muted)}

/* ---------- botões ---------- */
.btn{appearance:none; border:0; border-radius:999px; padding:16px 30px; font-family:Inter; font-weight:700;
  font-size:17px; cursor:pointer; transition:transform .08s ease, opacity .2s; width:100%; max-width:340px}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6}
.btn-primary{background:linear-gradient(180deg,var(--orange),var(--ember)); color:#fff; box-shadow:0 10px 28px rgba(255,106,42,.36)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid var(--line)}
.btn-back{position:absolute; top:calc(var(--safe-t) + 12px); left:12px; width:auto; padding:9px 15px; font-size:15px; z-index:5}
.btn-cta{display:block; text-align:center; text-decoration:none; background:linear-gradient(180deg,var(--orange),var(--ember));
  color:#fff; box-shadow:0 10px 28px rgba(255,106,42,.36)}

/* ---------- formulário ---------- */
.form-inner{gap:13px; text-align:left; align-items:stretch}
.form-head{font-size:24px; font-weight:800; margin:0; text-align:center}
.form-sub{font-size:13.5px; line-height:1.5; color:var(--muted); margin:-4px 0 6px; text-align:center}
.form-sub b{color:#e7edf4}
.fld{display:flex; flex-direction:column; gap:5px}
.fld-row{display:flex; gap:10px}
.fld-row .fld{flex:1}
.fld-l{font-size:12px; font-weight:600; color:var(--muted)}
.fld-l i{color:var(--orange); font-style:normal}
.fld input{width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; color:#fff; font-size:16px; font-family:Inter; outline:none}
.fld input:focus{border-color:var(--amber); background:rgba(255,255,255,.09)}
.fld input::placeholder{color:#6f8197}
.chk{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:#dbe4ee;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:12px 13px}
.chk input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--orange); flex:0 0 auto}
.chk b{color:#fff} .chk i{color:var(--muted); font-style:normal}
.chk[hidden]{display:none}
.consent-clic{font-size:11.5px; line-height:1.5; color:var(--muted); margin:2px 0 0; text-align:left}
.consent-clic b{color:#dbe4ee; font-weight:600}
.form-err{color:#ffd2c2; background:rgba(255,106,42,.14); border:1px solid rgba(255,106,42,.4);
  border-radius:10px; padding:9px 13px; font-size:13px; margin:0}
.form-err[hidden]{display:none}
#btn-continuar{align-self:center; margin-top:4px}

/* ---------- cabine ---------- */
.booth-badge{font-size:12px; font-weight:700; color:var(--amber); background:rgba(255,200,70,.12);
  border:1px solid rgba(255,200,70,.32); border-radius:999px; padding:6px 16px}
.booth-head{font-size:30px; font-weight:800; margin:6px 0 0; text-transform:none}
.booth-sub{font-size:14px; line-height:1.5; color:var(--muted); margin:0; max-width:330px}
.quota-mini{font-size:12.5px; color:var(--muted); margin:0}
.quota-mini b{color:var(--amber); font-weight:700}
.quota-mini[hidden]{display:none}
.shutter-btn{margin-top:6px}
.booth-tip{font-size:12px; color:var(--muted); margin:0}

/* ---------- processando ---------- */
#processing{align-items:center; justify-content:center; gap:22px}
.spinner{width:56px; height:56px; border-radius:50%; border:5px solid rgba(255,200,70,.22);
  border-top-color:var(--amber); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-msg{font-size:16px; color:#e7edf4; text-align:center; padding:0 24px}

/* ---------- resultado + CTA ---------- */
#result{padding:calc(16px + var(--safe-t)) 16px calc(104px + var(--safe-b)); justify-content:flex-start}
.result-stage{flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:100%; padding:8px 0 14px}
#result-img{max-width:100%; max-height:58vh; border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.5)}
.result-ui{width:100%; max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:11px}
.result-ui .btn{width:100%}
.cta-funnel{margin-top:8px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:16px; padding:16px}
.cta-h{font-size:17px; font-weight:800; margin:0 0 4px} .cta-h b{color:var(--amber)}
.cta-sub{font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 12px}
.cta-link{display:block; text-align:center; margin-top:10px; font-size:13px; color:var(--amber); text-decoration:underline}

/* ---------- disclaimer fixo ---------- */
.legal{position:fixed; left:0; right:0; bottom:0; z-index:40; pointer-events:none;
  font-size:9px; line-height:1.3; color:rgba(255,255,255,.6); text-align:center;
  padding:6px 16px calc(6px + var(--safe-b)); background:linear-gradient(0deg, rgba(10,28,48,.96) 70%, rgba(10,28,48,0))}