:root{
    --preto:#0a0a0a;
    --preto-2:#141414;
    --card:#1b1b1d;
    --card-2:#222224;
    --branco:#ffffff;
    --vermelho:#e50914;
    --vermelho-2:#ff2b36;
    --vermelho-escuro:#b20710;
    --cinza:#8a8a8f;
    --cinza-borda:#36363a;
    --ok:#27c46b;
    --radius:16px;
    --sombra-v:0 8px 30px rgba(229,9,20,.35);
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',-apple-system,'Segoe UI',sans-serif;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
body{
    background:
        radial-gradient(1100px 600px at 50% -10%, rgba(229,9,20,.16), transparent 60%),
        radial-gradient(800px 500px at 100% 110%, rgba(229,9,20,.08), transparent 55%),
        var(--preto);
    color:var(--branco);
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ---------- TOPO / LOGO ---------- */
.topbar{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    background:linear-gradient(180deg, rgba(10,10,10,.92) 60%, rgba(10,10,10,0));
    backdrop-filter:blur(8px);
}
.topbar img{height:46px;width:auto;display:block;}

/* ---------- BARRA DE PROGRESSO ---------- */
.progress-wrap{
    width:100%;max-width:560px;margin:0 auto;
    padding:0 22px;
    height:0;opacity:0;overflow:hidden;
    transition:height .45s ease, opacity .45s ease, margin .45s ease;
}
.progress-wrap.show{height:auto;opacity:1;margin:6px auto 0;}
.progress-track{
    height:10px;border-radius:20px;background:#242427;overflow:hidden;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.progress-bar{
    height:100%;width:8%;border-radius:20px;
    background:linear-gradient(90deg,var(--vermelho-escuro),var(--vermelho),var(--vermelho-2));
    box-shadow:0 0 14px rgba(229,9,20,.65);
    transition:width .6s cubic-bezier(.22,1,.36,1);
    position:relative;
}
.progress-bar::after{
    content:'';position:absolute;top:0;right:0;width:18px;height:100%;
    background:rgba(255,255,255,.35);filter:blur(4px);
}

/* ---------- ÁREA CENTRAL ---------- */
.stage{
    flex:1;
    width:100%;max-width:560px;
    margin:0 auto;
    padding:0px 22px calc(28px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;justify-content:center;
}

/* animação de troca de tela */
.screen{animation:cardIn .42s cubic-bezier(.22,1,.36,1) both;}
@keyframes cardIn{
    from{opacity:0;transform:translateY(16px) scale(.99);}
    to{opacity:1;transform:none;}
}
.screen.out{animation:cardOut .22s ease forwards;}
@keyframes cardOut{to{opacity:0;transform:translateY(-12px) scale(.99);}}

/* ---------- INTRO ---------- */
.intro{text-align:center;}
.intro-photo{
    width:100%;max-width:340px;margin:0 auto 18px;
    height:clamp(220px, 40vh, 300px);
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
.intro-photo img{
    width:100%;height:auto;display:block;
    object-fit:cover;object-position:top center;
}
.intro p{
    font-size:.92rem;line-height:1.65;color:#d6d6d8;margin-bottom:13px;
}
.intro p b{color:var(--vermelho-2);font-weight:800;}
.intro .mini{
    font-size:.8rem;color:var(--cinza);margin:16px 0 0;
    display:inline-flex;align-items:center;gap:8px;
}
.intro .mini::before{content:'⏱';}

/* ---------- PERGUNTA ---------- */
.q-kicker{
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--vermelho-2);font-weight:700;margin-bottom:10px;
}
.q-title{
    font-size:1.45rem;font-weight:800;line-height:1.25;margin-bottom:6px;
    letter-spacing:-.3px;
}
.q-sub{font-size:.85rem;color:var(--cinza);margin-bottom:20px;line-height:1.5;}
.q-title + .options{margin-top:20px;}

.options{display:flex;flex-direction:column;gap:12px;}
.opt{
    display:flex;align-items:center;gap:14px;
    width:100%;text-align:left;
    background:var(--card);
    border:1.5px solid var(--cinza-borda);
    border-radius:14px;
    padding:15px 16px;
    color:var(--branco);
    font-size:.98rem;font-weight:500;line-height:1.4;
    cursor:pointer;
    transition:transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.opt:hover{border-color:#5a5a5f;background:var(--card-2);}
.opt:active{transform:scale(.985);}
.opt .badge{
    flex:0 0 30px;height:30px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    background:#2c2c2f;color:var(--cinza);
    font-weight:700;font-size:.85rem;
    transition:all .18s ease;
}
.opt .txt{flex:1;}
.opt .check{
    flex:0 0 22px;height:22px;border-radius:50%;
    border:2px solid var(--cinza-borda);
    display:flex;align-items:center;justify-content:center;
    transition:all .18s ease;opacity:.7;
}
.opt.multi .check{border-radius:7px;}
.opt .check svg{width:13px;height:13px;opacity:0;transform:scale(.4);transition:all .18s ease;}

.opt.selected{
    border-color:var(--vermelho);
    background:linear-gradient(180deg, rgba(229,9,20,.16), rgba(229,9,20,.06));
    box-shadow:var(--sombra-v);
}
.opt.selected .badge{background:var(--vermelho);color:#fff;}
.opt.selected .check{border-color:var(--vermelho);background:var(--vermelho);opacity:1;}
.opt.selected .check svg{opacity:1;transform:scale(1);}

/* ---------- FORM DE CONTATO ---------- */
.field{margin-bottom:16px;}
.field label{
    display:block;font-size:.82rem;font-weight:600;color:#cfcfd2;margin-bottom:7px;
}
.field label .opcional{color:var(--cinza);font-weight:500;}
.field input{
    width:100%;
    background:var(--card);
    border:1.5px solid var(--cinza-borda);
    border-radius:12px;
    padding:14px 15px;
    color:var(--branco);
    font-size:1rem;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder{color:#6a6a6f;}
.field input:focus{outline:none;border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(229,9,20,.18);}
.field input.erro{border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(229,9,20,.22);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ---- Campo de celular: caixa do país (DDI editável, padrão Brasil 55)
       ao lado da caixa do número. Seletores com .field na frente para
       vencer a regra genérica ".field input" (width/padding/borda). ---- */
.phone-row{display:flex;gap:10px;align-items:stretch;}
.phone-ddi{
    flex:0 0 auto;
    display:flex;align-items:center;
    background:var(--card);
    border:1.5px solid var(--cinza-borda);
    border-radius:12px;
    padding:0 12px;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.phone-ddi:focus-within{border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(229,9,20,.18);}
.phone-ddi.erro{border-color:var(--vermelho);box-shadow:0 0 0 3px rgba(229,9,20,.22);}
.phone-ddi .phone-flag{font-size:1.05rem;line-height:1;margin-right:7px;}
.phone-ddi .phone-plus{
    font-size:1rem;font-weight:700;color:#cfcfd2;line-height:1;
}
.field .phone-ddi input{
    width:2.4em;flex:0 0 auto;
    background:transparent;
    border:none;border-radius:0;
    padding:14px 0 14px 2px;
    color:var(--branco);
    font-size:1rem;font-weight:700;
}
.field .phone-ddi input:focus{outline:none;border:none;box-shadow:none;}
.field .phone-row .phone-num{flex:1;min-width:0;width:auto;}
.field-hint{font-size:.76rem;color:var(--cinza);margin-top:6px;line-height:1.4;}

/* ---------- NAVEGAÇÃO ---------- */
.nav{display:flex;gap:12px;align-items:center;margin-top:26px;}
.btn{
    border:none;cursor:pointer;font-family:inherit;font-weight:700;
    border-radius:13px;font-size:1rem;letter-spacing:.02em;
    transition:transform .14s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
.btn-primary{
    flex:1;
    background:linear-gradient(135deg,var(--vermelho),var(--vermelho-escuro));
    color:#fff;padding:16px 22px;text-transform:uppercase;
    box-shadow:var(--sombra-v);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(229,9,20,.5);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{
    background:#2a2a2d;color:#6a6a6f;box-shadow:none;cursor:not-allowed;transform:none;
}
.btn-primary.loading{color:transparent;position:relative;pointer-events:none;}
.btn-primary.loading::after{
    content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;
    margin:-10px 0 0 -10px;border-radius:50%;
    border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
    animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* botão "latejando" — efeito de batida (querendo ser clicado) */
.btn-primary.pulse{
    animation:pulseBtn 1.5s infinite;
}

@keyframes pulseBtn{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}

.btn-back{
    flex:0 0 auto;
    background:transparent;color:var(--cinza);
    border:1.5px solid var(--cinza-borda);
    padding:16px 18px;
}
.btn-back:hover{color:#fff;border-color:#5a5a5f;}

.form-erro{
    color:var(--vermelho-2);font-size:.85rem;font-weight:600;
    margin-top:14px;min-height:1em;text-align:center;
}

/* ---------- AGRADECIMENTO ---------- */
.thanks{text-align:center;padding:10px 0;}
.thanks .mark{
    width:92px;height:92px;border-radius:50%;margin:0 auto 24px;
    background:linear-gradient(135deg, rgba(39,196,107,.2), rgba(39,196,107,.05));
    border:2px solid var(--ok);
    display:flex;align-items:center;justify-content:center;
    animation:pop .5s cubic-bezier(.18,1.4,.4,1) both;
}
.thanks .mark svg{width:46px;height:46px;stroke:var(--ok);}
@keyframes pop{0%{transform:scale(.3);opacity:0;}100%{transform:scale(1);opacity:1;}}
.thanks h2{font-size:1.7rem;font-weight:800;text-transform:uppercase;margin-bottom:14px;}
.thanks p{color:#d6d6d8;line-height:1.7;margin-bottom:10px;}
.thanks .cta{display:flex;flex-direction:column;gap:12px;margin-top:28px;}
.thanks a.btn{display:block;text-decoration:none;text-align:center;padding:16px;}
.btn-wpp{background:#25d366;color:#0a0a0a;}
.btn-wpp:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.4);}
.btn-ghost{background:transparent;border:1.5px solid var(--cinza-borda);color:#fff;}
.btn-ghost:hover{border-color:var(--vermelho);}

/* ---------- DESKTOP ---------- */
@media (min-width:640px){
    .topbar img{height:54px;}
    .q-title{font-size:1.7rem;}
    .stage{padding-top:26px;}
    .intro p{font-size:.98rem;}
}
@media (max-width:360px){
    .opt{padding:13px 13px;font-size:.92rem;gap:11px;}
    .q-title{font-size:1.3rem;}
}

/* =====================================================================
   CARROSSEL DE RESULTADOS (Antes e Depois)
   - aparece SOMENTE na primeira tela do quiz (a intro);
   - o card central fica em destaque, os vizinhos "espiam" apagados;
   - fotos/velocidade: bloco CONFIG no topo do quiz-resultados.js.
   ===================================================================== */
.quiz-shell{
    display:flex;
    flex-direction:column;
    min-height:100dvh;
}

.rz{
    width:100%;
    padding:36px 0 calc(46px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(229,9,20,.28);
    background:
        radial-gradient(720px 380px at 50% 0%, rgba(229,9,20,.14), transparent 62%),
        var(--preto-2);
}
.rz.rz-hidden{display:none;}

.rz-head{max-width:560px;margin:0 auto;padding:0 22px;text-align:center;}
.rz-kicker{
    display:inline-flex;align-items:center;gap:9px;
    font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--vermelho-2);font-weight:800;margin-bottom:10px;
}
.rz-kicker::before,
.rz-kicker::after{
    content:'';width:26px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--vermelho-2));
}
.rz-kicker::after{transform:scaleX(-1);}
.rz-title{
    font-size:1.65rem;font-weight:800;line-height:1.15;
    letter-spacing:-.3px;text-transform:uppercase;margin-bottom:10px;
}
.rz-title em{font-style:normal;color:var(--vermelho-2);}
.rz-sub{font-size:.88rem;color:var(--cinza);line-height:1.55;margin:0 auto;max-width:420px;}

/* ---- Palco / esteira ---- */
.rz-stage{position:relative;margin-top:18px;}
.rz-viewport{
    overflow:hidden;
    padding:10px 0 24px;
    touch-action:pan-y;         /* horizontal é nosso, vertical continua rolando a página */
    cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.rz-viewport.dragging{cursor:grabbing;}
.rz-belt{
    display:flex;align-items:center;gap:16px;
    will-change:transform;
}
.rz-belt.anim{transition:transform .45s cubic-bezier(.22,1,.36,1);}

.rz-slide{
    flex:0 0 auto;
    width:min(76vw, 400px);
    padding:0;border:1.5px solid var(--cinza-borda);
    border-radius:18px;overflow:hidden;
    background:var(--card);cursor:pointer;
    box-shadow:0 12px 30px rgba(0,0,0,.5);
    transform:scale(.9);opacity:.45;
    transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease,
               border-color .3s ease, box-shadow .45s ease;
    -webkit-user-select:none;user-select:none;
}
.rz-slide img{
    display:block;width:100%;height:auto;
    aspect-ratio:1/1;object-fit:cover;
    pointer-events:none;
    -webkit-user-drag:none;
}
.rz-slide.is-active{
    transform:scale(1);opacity:1;
    border-color:rgba(229,9,20,.7);
    box-shadow:0 14px 40px rgba(229,9,20,.3), 0 12px 30px rgba(0,0,0,.5);
}

/* ---- Setas ---- */
.rz-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    width:38px;height:38px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.16);
    background:rgba(10,10,10,.7);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.rz-arrow svg{width:17px;height:17px;display:block;}
.rz-arrow:hover{background:var(--vermelho);border-color:var(--vermelho);}
.rz-arrow:active{transform:translateY(-50%) scale(.88);}
.rz-prev{left:10px;}
.rz-next{right:10px;}

/* ---- Dica de arraste (some após a 1ª interação) ---- */
.rz-hint{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:.76rem;color:var(--cinza);padding:0 22px;
}
.rz-hint .rz-hand{display:inline-block;animation:rzSway 1.5s ease-in-out infinite;}
@keyframes rzSway{0%,100%{transform:translateX(-6px);}50%{transform:translateX(6px);}}
.rz-hint.done{display:none;}

/* ---- Bolinhas + contador ---- */
.rz-footer{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin-top:16px;padding:0 22px;
}
.rz-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;}
.rz-dot{
    width:7px;height:7px;border-radius:50%;padding:0;border:none;cursor:pointer;
    background:var(--cinza-borda);
    transition:width .25s ease, background .25s ease, border-radius .25s ease;
}
.rz-dot.active{background:var(--vermelho);width:20px;border-radius:6px;}
.rz-count{font-size:.78rem;font-weight:600;color:var(--cinza);letter-spacing:.06em;}
.rz-count b{color:var(--branco);font-weight:800;}

/* ---- Chamada final ---- */
.rz-cta{max-width:560px;margin:26px auto 0;padding:0 22px;text-align:center;}
.rz-cta-btn{display:inline-block;text-decoration:none;padding:15px 36px;}

/* ---- Lightbox ---- */
.rz-lb{
    position:fixed;inset:0;z-index:200;
    display:none;align-items:center;justify-content:center;
    background:rgba(0,0,0,.93);padding:16px;
}
.rz-lb.open{display:flex;animation:rzFade .2s ease;}
@keyframes rzFade{from{opacity:0;}to{opacity:1;}}
.rz-lb-img{max-width:100%;max-height:88vh;border-radius:12px;object-fit:contain;}
.rz-lb-close{
    position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;
    width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(0,0,0,.55);color:#fff;font-size:30px;line-height:1;
    display:flex;align-items:center;justify-content:center;
}

@media (min-width:640px){
    .rz-title{font-size:2rem;}
    .rz-slide{width:min(48vw, 430px);}
    .rz-arrow{width:46px;height:46px;}
    .rz-prev{left:22px;}
    .rz-next{right:22px;}
    .rz-hint{display:none;}
}