/* Quiz lojistas — Black Builder. Mesma linguagem dos criativos "garagistas":
   fundo preto #0B0B0B, branco, destaque amarelo #FFD400, Archivo Black + Inter. */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/archivo-black-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format("woff2")}

:root{
  --preto:#0B0B0B;
  --painel:#151515;
  --painel-2:#1d1d1d;
  --linha:rgba(255,255,255,.14);
  --linha-forte:rgba(255,255,255,.28);
  --branco:#fff;
  --suave:#b9b9b9;
  --amarelo:#FFD400;
  --amarelo-hover:#ffe04d;
  --erro:#ff7a6b;
  --verde-wa:#25D366;
  --titulo:"Archivo Black","Arial Black",system-ui,sans-serif;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --raio:14px;
  --max:520px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--preto)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--preto);color:var(--branco);font:400 16px/1.5 var(--corpo);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
[hidden]{display:none!important}

.app{width:100%;max-width:var(--max);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 16px calc(20px + env(safe-area-inset-bottom))}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:5;background:var(--preto);padding:16px 0 8px}
.marca{width:150px;height:auto}
.nav{display:flex;align-items:center;gap:12px;margin-top:10px}
.passo{flex:none;min-width:44px;text-align:right;font-size:13px;font-weight:600;color:var(--suave);white-space:nowrap}
.voltar{flex:none;width:44px;height:44px;margin-left:-10px;border:0;background:none;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--branco)}
.voltar svg{width:24px;height:24px}
@media (hover:hover){.voltar:hover{background:var(--painel)}}
.voltar[disabled]{visibility:hidden}
.barra{flex:1;height:6px;background:var(--painel-2);border-radius:99px;overflow:hidden}
.barra span{display:block;height:100%;width:0;background:var(--amarelo);border-radius:inherit;transition:width .35s cubic-bezier(.2,.7,.2,1)}

/* ---------- telas ---------- */
.palco{flex:1;display:flex;flex-direction:column;position:relative;overflow-x:clip}
.tela{display:none;flex-direction:column;flex:1;padding-top:18px}
.tela.is-ativa{display:flex;animation:entra .32s cubic-bezier(.2,.7,.2,1) both}
.tela.is-voltando{animation-name:entraVolta}
@keyframes entra{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes entraVolta{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

.kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:800 13px/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--amarelo)}
.kicker span{display:block;width:30px;height:4px;background:var(--amarelo)}

h1,h2{font-family:var(--titulo);font-weight:400;margin:0;letter-spacing:-.01em;line-height:1.04}
h1{font-size:clamp(34px,10.4vw,46px)}
h1 em,h2 em{font-style:normal;color:var(--amarelo)}
h2{font-size:clamp(26px,7.6vw,34px);line-height:1.1}
.lead{margin:18px 0 0;font-size:18px;line-height:1.45;color:#e9e9e9}
.lead strong{color:var(--branco)}

/* intro */
.tela--intro{padding-top:30px}
.pontos{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.pontos li{position:relative;padding-left:30px;font-size:16px;color:var(--suave)}
.pontos li b{color:var(--branco);font-weight:600}
.pontos li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--amarelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230B0B0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.tela--intro .btn{margin-top:auto}
.tela--intro .pontos{margin-bottom:34px}
.rodape{margin:16px 0 0;text-align:center;font-size:13px;color:#8a8a8a}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:16px 22px;border:0;border-radius:var(--raio);font:700 17px/1.2 var(--corpo);text-decoration:none;cursor:pointer;transition:background .22s,transform .22s,box-shadow .22s,opacity .22s}
.btn svg{width:22px;height:22px;flex:none}
.btn--primario{background:var(--amarelo);color:var(--preto)}
.btn--primario:hover{background:var(--amarelo-hover);transform:translateY(-1px);box-shadow:0 10px 26px -14px rgba(255,212,0,.9)}
.btn--primario:active{transform:translateY(1px);box-shadow:none}
.btn--wa{background:var(--verde-wa);color:#06290f}
.btn--wa:hover{background:#3be07a;transform:translateY(-1px)}
.btn--wa:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* ---------- pergunta ---------- */
.pergunta__num{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo)}
.pergunta__ajuda{margin:10px 0 0;color:var(--suave);font-size:15px}
.opcoes{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.opcao{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:14px 18px;background:var(--painel);border:1.5px solid var(--linha);border-radius:var(--raio);text-align:left;font-size:17px;font-weight:600;line-height:1.3;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.opcao__marca{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--linha-forte);display:grid;place-items:center;transition:background .2s,border-color .2s}
.opcao__marca::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--preto);transform:scale(0);transition:transform .2s}
@media (hover:hover){.opcao:hover{border-color:var(--linha-forte);background:var(--painel-2)}}
.opcao:active{transform:scale(.985)}
.opcao[aria-checked="true"]{border-color:var(--amarelo);background:#1f1b05}
.opcao[aria-checked="true"] .opcao__marca{background:var(--amarelo);border-color:var(--amarelo)}
.opcao[aria-checked="true"] .opcao__marca::after{transform:scale(1)}

/* ---------- formulário ---------- */
.form{display:grid;gap:16px;margin-top:22px}
.campo{display:grid;gap:7px;min-width:0}
.campo label{font-size:15px;font-weight:600}
.campo label small{font-weight:400;color:var(--suave)}
.campo input,.campo select{width:100%;min-height:56px;padding:14px 16px;background:var(--painel);border:1.5px solid var(--linha);border-radius:12px;font-size:17px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.campo select{background:var(--painel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23b9b9b9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/20px no-repeat;padding-right:40px}
.campo select:invalid{color:#8a8a8a}
.campo input::placeholder{color:#6f6f6f}
.campo input:focus,.campo select:focus{border-color:var(--amarelo)}
.campo.tem-erro input,.campo.tem-erro select{border-color:var(--erro)}
.campo__erro{min-height:0;font-size:14px;color:var(--erro)}
.campo__erro:empty{display:none}
.linha2{display:grid;grid-template-columns:1fr 96px;gap:12px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.aviso{margin:4px 0 0;font-size:13px;color:#8a8a8a;text-align:center}
.form .btn{margin-top:6px}

/* ---------- resultado ---------- */
.selo{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:8px 12px;border-radius:99px;background:#1f1b05;border:1px solid rgba(255,212,0,.45);color:var(--amarelo);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.selo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amarelo)}
.achados{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.achados li{padding:14px 16px;background:var(--painel);border-left:4px solid var(--amarelo);border-radius:0 12px 12px 0;font-size:16px;line-height:1.45;color:#e9e9e9}
.achados li b{color:var(--branco)}
.oferta{margin:22px 0 0;padding:16px;border:1px solid var(--linha);border-radius:var(--raio);font-size:15px;color:var(--suave)}
.oferta b{color:var(--branco)}
.resultado__cta{position:sticky;bottom:0;z-index:3;margin:auto -16px 0;padding:22px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(11,11,11,0),var(--preto) 26%)}
.resultado__cta .aviso{margin-top:8px}
.app:has(#resultado.is-ativa){padding-bottom:0}

/* ---------- resultado: vídeo + provas ---------- */
.bloco{margin:34px 0 0;min-width:0}
.bloco__titulo{margin:0 0 14px;font:400 22px/1.1 var(--titulo);letter-spacing:-.01em}
.bloco__titulo::before{content:"";display:inline-block;vertical-align:middle;width:24px;height:4px;margin:-3px 12px 0 0;background:var(--amarelo)}
.bloco__titulo em{font-style:normal;color:var(--amarelo)}
.bloco__dica{margin:10px 0 0;font-size:13px;color:#8a8a8a}

.video16x9{position:relative;aspect-ratio:16/9;border-radius:var(--raio);overflow:hidden;background:var(--painel);border:1px solid var(--linha)}
.video16x9>*{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-breve{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(120% 90% at 50% 0%,#2a2508 0%,var(--painel) 60%);color:var(--suave);font-size:15px}
.video-breve b{font-weight:700;letter-spacing:.04em;color:var(--branco)}
.video-breve .yt__play{position:static;transform:none;opacity:.55}

.yt{display:block;position:relative;width:100%;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .35s,opacity .35s;opacity:.88}
.yt__play{position:absolute;left:50%;top:50%;width:62px;transform:translate(-50%,-50%);line-height:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.yt__play svg{width:100%;height:auto}
@media (hover:hover){.yt:hover img{transform:scale(1.03);opacity:1}}
.yt-frame{display:block;width:100%;border:0;background:#000}

.trilho{display:flex;gap:12px;margin:0 -16px;padding:2px 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.trilho>*{scroll-snap-align:start;flex:none}
.depo{margin:0;width:min(46vw,190px)}
.depo .yt,.depo .yt-frame{aspect-ratio:9/16;height:auto;border-radius:12px}
.depo figcaption{display:grid;gap:2px;margin-top:8px;font-size:14px;line-height:1.3}
.depo figcaption b{font-weight:700}
.depo figcaption span{font-size:12px;color:var(--suave)}

.wa-cheio{margin:22px 0 0;display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:16px;align-items:center;padding:12px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio)}
.wa-cheio video{display:block;width:100%;height:auto;aspect-ratio:304/440;border-radius:10px;background:#111;object-fit:cover}
.wa-cheio figcaption{font:400 18px/1.2 var(--titulo);color:var(--branco)}

.trilho--prints{margin-top:22px}
.print{margin:0;width:210px;max-width:calc(100vw - 48px)}
.print__abrir{display:block;width:100%;height:260px;padding:0;border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#111;cursor:zoom-in}
.print__abrir img{width:100%;height:100%;object-fit:cover;object-position:top}
.print figcaption{margin-top:8px;font-size:14px;line-height:1.35;color:#e9e9e9}

.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 16px 24px;background:rgba(0,0,0,.92)}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px}
.lightbox__fechar{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:var(--painel-2);color:var(--branco);font-size:28px;line-height:1;cursor:pointer}

.noscript{padding:20px;color:#fff;background:#0B0B0B}
.noscript a{color:#FFD400}

@media (min-width:640px){
  .app{padding-top:12px}
  .marca{width:170px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Depoimento em mensagem (Isaías) no trilho de vídeos */
.depo__card{aspect-ratio:9/16;border-radius:12px;background:#1b1b1b;border:1px solid #2a2a2a;padding:16px 14px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.depo__card img{width:64px;height:64px;border-radius:50%;object-fit:contain;padding:6px;background:#0b0b0b;border:1px solid #333}
.depo__card blockquote{margin:0;font-size:16px;line-height:1.4;color:#f5f8fa;font-weight:600}