/* ============================================================
   Consulta Com a Sensitiva - replica fiel da estrutura original
   Cores extraidas da original: fundo #3008A1 | azul #0082E6
   Fonte Poppins | container max 512px (max-w-lg)
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{background:#3008A1;color:#fff;font-family:Poppins,ui-sans-serif,system-ui,sans-serif;
     display:flex;justify-content:center;align-items:flex-start;min-height:100vh}
#app{width:100%;max-width:512px;padding:26px 20px 60px;display:flex;flex-direction:column;gap:32px}

/* ---------- logo ---------- */
.logo{display:block;width:108px;height:auto;margin:0 auto}

/* ---------- barra de progresso dourada ---------- */
.prog{width:100%;height:22px;background:#161428;border-radius:99px;overflow:hidden}
.prog span{display:block;height:100%;width:0;border-radius:99px;
           background:linear-gradient(180deg,#E9CB6B 0%,#D4AF37 55%,#B9922B 100%);
           transition:width .45s ease}

/* ---------- telas ---------- */
.tela{display:none;flex-direction:column;gap:32px}
.tela.on{display:flex;animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- textos ---------- */
h1{font-size:24px;line-height:1.34;font-weight:700;text-align:center;color:#fff}
h2{font-size:27px;line-height:1.3;font-weight:700;text-align:center;color:#fff}
.apoio{text-align:center;font-size:16px;line-height:1.62;color:#fff}
.apoio b{font-weight:700}
.centrado{text-align:center}

/* ---------- foto da sensitiva ---------- */
.foto{display:block;width:100%;border-radius:6px}

/* ---------- botao azul (CTA) ---------- */
.btn-cta{display:block;width:100%;border:0;cursor:pointer;border-radius:12px;padding:20px 8px;
     background:#0082E6;color:#fff;font-family:inherit;font-size:16px;font-weight:700;
     text-align:center;text-decoration:none;line-height:1.3;animation:pulse 1s infinite;
     box-shadow:0 5px 0 #fff}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.btn-cta:active{transform:scale(.985)}
.btn-cta.oculto{display:none}

/* ---------- opcoes do quiz (caixa azul com sombra dura) ---------- */
.opcoes{display:grid;grid-template-columns:1fr;gap:8px}
.opcao{display:flex;align-items:center;gap:12px;width:100%;padding:16px;cursor:pointer;
       background:#0082E6;border:0;border-radius:12px;color:#fff;font-family:inherit;
       font-size:16px;font-weight:700;line-height:1.35;text-align:left;
       box-shadow:0 6px 0 rgba(10,8,40,.55);transition:transform .12s,box-shadow .12s}
.opcao:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(10,8,40,.55)}
.opcao .emo{font-size:36px;line-height:1;flex:0 0 auto}
.opcao .txt{flex:1 1 auto}

/* ---------- analise ---------- */
.analise{text-align:center;padding:26px 0}
.analise .pc{font-size:44px;font-weight:700;color:#fff;margin-bottom:16px}
.analise .msg{font-size:17px;line-height:1.6;color:#fff;min-height:52px}

/* ---------- preparacao ---------- */
.prep p{font-size:17px;line-height:1.68;text-align:center;color:#fff;margin-bottom:16px}
.prep p b{font-weight:700}
.prep .destaque{font-size:19px;font-weight:700}

/* ---------- cartas ---------- */
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.cs-card{position:relative;aspect-ratio:91/151;cursor:pointer;perspective:700px}
.cs-card-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.cs-card.virada .cs-card-inner{transform:rotateY(180deg)}
.cs-back,.cs-front{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.cs-front{transform:rotateY(180deg)}
.cs-back img,.cs-front img{width:100%;height:100%;object-fit:cover;display:block}
.cs-card:not(.virada):active .cs-card-inner{transform:scale(.96)}
.cs-card.travada{opacity:.45;pointer-events:none}

/* ---------- VSL ---------- */
.vsl-box{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#000;border-radius:10px}
.vsl-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:380px){
  h1{font-size:23px}
  h2{font-size:24px}
  .opcao{font-size:15px;padding:14px}
  .opcao .emo{font-size:32px}
}