/* ==========================================================
   ROTA DO CORAÇÃO — LEITURA DE PADRÃO EMOCIONAL
   Estilo: Dark Obsidian Glassmorphism (Vite/Tailwind Port 3001 Style)
   Paleta: Dark (#070709) / Crimson Red (#dc2626) / Gold (#fbbf24) / Emerald (#10b981)
   Layout: Tela ajustada para preenchimento direto sem rolagem desnecessária
   ========================================================== */

:root{
  --base:#070709;
  --base-card:#0f0f13;

  --vermelho:#dc2626;
  --vermelho-brilho:#ef4444;
  --dourado:#fbbf24;
  --dourado-claro:#f59e0b;
  --esmeralda:#10b981;

  --texto:#ffffff;
  --texto-suave:#9ca3af;
  --texto-mutado:#6b7280;

  --vidro:rgba(15,15,19,0.95);
  --borda:rgba(255,255,255,0.12);
  --borda-viva:rgba(220,38,38,0.55);
  --brilho-topo:inset 0 1px 0 rgba(255,255,255,.15);
  --profundidade:0 20px 50px rgba(0,0,0,0.8);
  --desfoque:blur(20px) saturate(160%);

  --radius:24px;
  --ff:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

html{height:100%;overflow:hidden}
body{
  position:fixed;
  inset:0;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:pan-y;
  font-family:var(--ff);
  color:var(--texto);
  background:var(--base);
  display:flex;
  flex-direction:column;
  line-height:1.45;
}

#scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
}
#scroll::-webkit-scrollbar{width:0;height:0}

/* Ambient Background Glows */
body::before,body::after{
  content:'';position:fixed;z-index:0;pointer-events:none;
  border-radius:50%;filter:blur(130px);
}
body::before{
  width:90vw;height:90vw;max-width:700px;max-height:700px;
  top:-20vh;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(220,38,38,.20), rgba(220,38,38,0) 70%);
}
body::after{
  width:90vw;height:90vw;max-width:650px;max-height:650px;
  bottom:-20vh;right:-20vw;
  background:radial-gradient(circle, rgba(251,191,36,.15), rgba(251,191,36,0) 70%);
}

#particulas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:1; pointer-events:none;
}

/* ---------- TARJA DE URGÊNCIA FIXA NO TOPO ---------- */
.tarja-urgencia{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg, #b91c1c, #f59e0b 50%, #b91c1c);
  color:#000000;
  padding:5px 12px;
  text-align:center;
  font-size:10.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
.relogio-badge{
  background:#000000; color:var(--dourado);
  padding:2px 7px; border-radius:6px;
  font-family:monospace; font-weight:700; font-size:11px;
}

/* ---------- TOP HEADER BRAND ---------- */
.topo-marca{
  position:relative; z-index:9;
  background:rgba(7,7,9,0.95);
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding:8px 14px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.marca-wrap{
  max-width:540px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ponto-ao-vivo-container{
  position:relative; display:inline-flex; width:9px; height:9px;
}
.ponto-ping{
  position:absolute; inset:0; border-radius:50%;
  background:var(--vermelho); opacity:.75;
  animation:ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
.ponto-solido{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:var(--vermelho);
}
@keyframes ping{ 75%,100%{transform:scale(2.2);opacity:0} }
.titulo-marca{
  font-size:15px; font-weight:900; letter-spacing:-.02em; color:#ffffff;
}
.dourado{color:var(--dourado)}

/* ---------- PROGRESS HEADER (#topo) ---------- */
#topo{
  position:sticky; top:28px; z-index:8;
  padding:8px 14px 6px;
  background:rgba(7,7,9,0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--borda);
  max-width:540px; margin:0 auto; width:100%;
}
.topo-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px; font-size:10.5px; font-weight:800;
}
.topo-tag{
  color:var(--dourado); letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:4px;
}
.contador-badge{
  background:rgba(255,255,255,0.1); color:#ffffff;
  padding:2px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.1);
  font-family:monospace; font-size:10.5px;
}
.barra-wrap{
  height:7px; border-radius:99px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid var(--borda);
}
.barra{height:100%;width:100%}
#barra-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, #dc2626, #fbbf24 60%, #10b981);
  box-shadow:0 0 16px rgba(220,38,38,.8);
  transition:width .35s ease-out;
}

/* ---------- PALCO & CARDS FIT SCREEN ---------- */
#palco{
  position:relative; z-index:2;
  flex:1 0 auto;
  width:100%; max-width:540px;
  margin:0 auto;
  padding:10px 14px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tela{
  animation:entra .35s cubic-bezier(.22,1,.36,1) both;
  background:var(--vidro);
  border:1px solid var(--borda);
  border-radius:var(--radius);
  padding:16px 14px;
  box-shadow:var(--profundidade), var(--brilho-topo);
  backdrop-filter:var(--desfoque);
  -webkit-backdrop-filter:var(--desfoque);
  width:100%;
}
@keyframes entra{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}

/* Tipografia */
h1,h2,h3,.eyebrow,.sub,.selo,.preco-selo,.cta,.op span,.depoimento,.legenda{
  text-wrap:balance;
}

.eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado);margin:0 0 6px;font-weight:800;text-align:center;
}
h1{
  font-size:22px;line-height:1.25;margin:0 0 8px;
  font-weight:900;letter-spacing:-.02em;text-align:center;color:#ffffff;
  text-shadow:0 2px 24px rgba(220,38,38,.35);
}
h2{font-size:17px;line-height:1.3;margin:0 0 6px;font-weight:900;text-align:center;color:#ffffff}
h3{font-size:14px;margin:0 0 4px;color:var(--dourado);font-weight:800}
.sub{color:var(--texto-suave);font-size:12.5px;margin:0 0 10px;text-align:center;line-height:1.4}

/* Meta Card Badges */
.card-meta-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; font-size:10px;
}
.tag-pergunta{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:99px;
  background:rgba(220,38,38,0.18); border:1px solid rgba(220,38,38,0.4);
  color:var(--vermelho-brilho); font-weight:800; text-transform:uppercase;
}
.tag-social{
  color:var(--texto-suave); font-weight:600;
}

/* ---------- ARTE / MIDIA (COMPACTA PARA ENCAIXAR NA TELA) ---------- */
.arte{
  width:100%; aspect-ratio:21/9; max-height:115px;
  border-radius:14px;
  overflow:hidden; margin:0 0 10px;
  border:1px solid var(--borda);
  background:rgba(255,255,255,0.03);
  position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
}
.arte img,.arte svg{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- OPÇÕES COMPACTAS COM CLIQUE INTUITIVO ---------- */
.opcoes{display:flex;flex-direction:column;gap:8px;margin-top:2px}

.op{
  position:relative; width:100%;
  display:flex; align-items:center; gap:10px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:var(--texto);
  font-family:var(--ff);
  font-size:14px; line-height:1.3; font-weight:700; text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  will-change:transform;
  transition:all .18s cubic-bezier(.22,1,.36,1);
  -webkit-appearance:none; appearance:none;
}
.op .op-icone{
  font-size:18px; width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  display:grid; place-items:center; shrink:0;
  transition:transform .18s;
}
.op .op-texto{
  flex:1; min-width:0;
}
.op .op-titulo{
  font-weight:800; font-size:14px; color:#ffffff; display:block;
}
.op .op-desc{
  font-size:11.5px; font-weight:400; color:var(--texto-suave); display:block; margin-top:1px;
}
.op .op-seta{
  color:var(--texto-mutado); font-size:16px; transition:all .18s;
}

.op:active{transform:scale(.98)}
@media (hover:hover){
  .op:hover{
    border-color:rgba(220,38,38,0.60);
    background:rgba(220,38,38,0.12);
    box-shadow:0 0 18px rgba(220,38,38,0.25);
  }
  .op:hover .op-titulo{color:var(--dourado)}
  .op:hover .op-seta{color:var(--vermelho-brilho); transform:translateX(3px)}
  .op:hover .op-icone{transform:scale(1.1)}
}

.op.escolhida{
  transform:scale(1.015);
  border-color:rgba(220,38,38,0.85);
  background:rgba(220,38,38,0.22);
  box-shadow:0 0 25px rgba(220,38,38,0.40);
}
.op.escolhida .op-titulo{color:var(--dourado)}
.op.apagada{opacity:.3;transform:scale(.985)}

/* ---------- BOTÃO CTA ---------- */
.cta{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 20px; margin:16px 0 8px;
  border:none; border-radius:16px;
  background:linear-gradient(90deg, #fbbf24, #f59e0b 50%, #eab308);
  color:#000000; font-family:var(--ff);
  font-size:15px; font-weight:900; letter-spacing:.02em; text-align:center;
  text-decoration:none; cursor:pointer;
  box-shadow:0 0 28px rgba(251,191,36,0.40);
  transition:transform .18s, box-shadow .18s;
}
.cta.grande{font-size:15px; padding:16px 18px; text-transform:uppercase}
.cta:hover{transform:scale(1.015); box-shadow:0 0 36px rgba(251,191,36,0.60)}
.cta:active{transform:scale(.98)}

.secundario{
  display:block;margin:4px 0;padding:6px;
  text-align:center;font-size:12.5px;
  color:rgba(255,255,255,.7);text-decoration:underline;
}

.campo{
  width:100%;padding:14px 16px;margin-bottom:10px;
  border-radius:14px;border:1px solid var(--borda);
  background:rgba(255,255,255,0.04);
  color:var(--texto);
  font-family:var(--ff);font-size:14.5px;text-align:center;
}
.campo::placeholder{color:rgba(255,255,255,.4)}
.campo:focus{
  outline:none;border-color:var(--borda-viva);
  box-shadow:0 0 18px rgba(220,38,38,.4);
}
.erro{margin:-4px 0 10px;font-size:12px;color:#ef4444;text-align:center}

/* ---------- PREÇO ---------- */
.preco{
  position:relative;
  margin:22px 0 4px;padding:22px 18px 18px;
  border-radius:20px;text-align:center;
  border:1px solid rgba(220,38,38,0.5);
  background:rgba(220,38,38,0.08);
  box-shadow:0 0 30px rgba(220,38,38,0.2);
}
.preco-selo{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  padding:4px 12px;border-radius:99px;
  background:linear-gradient(90deg, #dc2626, #fbbf24);
  color:#000000;font-size:9.5px;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;
}
.preco-de{margin:2px 0 1px;font-size:12.5px;color:var(--texto-suave)}
.preco-por{
  margin:0;font-size:44px;line-height:1.05;font-weight:900;
  color:var(--dourado);
  text-shadow:0 0 22px rgba(251,191,36,.5);
}
.preco-por .cifra{font-size:20px;vertical-align:super;margin-right:2px}
.preco-parcela{margin:3px 0 0;font-size:13.5px;color:var(--texto);font-weight:700}
.preco-nota{margin:6px 0 0;font-size:11px;color:var(--texto-suave)}

/* ---------- SIMULAÇÃO WHATSAPP EM RESULTADO ---------- */
.card-whats-preview{
  background:#0b141a; border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,0.1); margin:14px 0; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}
.whats-topo{
  display:flex; align-items:center; gap:8px;
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:8px;
}
.whats-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--vermelho);
  display:grid; place-items:center; font-weight:800; font-size:12px; color:#fff;
}
.whats-nome{font-size:12.5px; font-weight:800; color:#fff}
.whats-online{font-size:9.5px; color:var(--esmeralda); display:flex; align-items:center; gap:3px}
.whats-balao{
  background:#202c33; padding:10px; border-radius:10px;
  font-size:12.5px; color:#e9edef; border-left:3px solid var(--dourado);
}

/* ---------- SPINNER / CARREGANDO ---------- */
.spinner-container{
  position:relative; width:70px; height:70px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.spinner-anel{
  position:absolute; inset:0; border-radius:50%;
  border:3px solid rgba(220,38,38,0.2);
  border-top-color:var(--vermelho); border-right-color:var(--dourado);
  animation:girar .9s linear infinite;
}
.spinner-icone{font-size:24px; animation:bounce 1.2s infinite ease-in-out}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- DEPOIMENTOS CARROSSEL ---------- */
.dep-wrap{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); overflow:hidden; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.dep-trilho{
  display:flex; gap:12px; width:max-content;
  animation:desliza var(--giro,24s) linear infinite;
}
.dep-wrap:active .dep-trilho{animation-play-state:paused}
@keyframes desliza{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.dep-card{
  flex:0 0 auto; border-radius:14px;
  border:1px solid var(--borda); background:rgba(15,15,19,.9);
  padding:5px; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.dep-card img{
  display:block; height:240px; width:auto; border-radius:8px; cursor:zoom-in;
}

/* ---------- PROVA SOCIAL MINIATURA COMPACTA ---------- */
.print-container{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 0 8px;
}
.print{
  display:block;
  width:auto;
  max-width:120px;
  max-height:140px;
  object-fit:cover;
  margin:0 auto 4px;
  border-radius:12px;
  border:1px solid var(--borda-viva);
  box-shadow:0 6px 18px rgba(0,0,0,.6), 0 0 15px rgba(220,38,38,.2);
  cursor:zoom-in;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  touch-action:manipulation;
}
.print:active{transform:scale(0.95)}
@media (hover:hover){
  .print:hover{
    transform:scale(1.05);
    box-shadow:0 8px 24px rgba(0,0,0,.7), 0 0 22px rgba(220,38,38,.4);
  }
}
.print-dica{
  margin:0 0 8px;text-align:center;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dourado); font-weight:700;
}
.depoimento{
  font-style:italic;font-size:13.5px;line-height:1.45;
  color:var(--texto);
  border-left:3px solid var(--vermelho);
  padding:2px 0 2px 10px;margin:0 0 10px;
}
.legenda{font-size:10.5px;color:var(--texto-suave);text-align:center;margin:0 0 12px}

/* ---------- FLOATING SOCIAL TOAST ---------- */
.toast-social{
  position:fixed; bottom:14px; left:14px; z-index:40;
  background:rgba(15,15,19,0.95);
  border:1px solid rgba(251,191,36,0.40);
  padding:8px 12px; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.7);
  backdrop-filter:blur(14px);
  display:flex; align-items:center; gap:8px;
  max-width:270px; opacity:0; transform:translateY(16px);
  transition:all .35s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.toast-social.ativo{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.toast-icone{
  width:26px; height:26px; border-radius:50%;
  background:rgba(16,185,129,0.2); border:1px solid rgba(16,185,129,0.4);
  color:var(--esmeralda); font-weight:900; font-size:13px;
  display:grid; place-items:center; shrink:0;
}
.toast-info{font-size:11px; overflow:hidden}
.toast-nome{font-weight:800; color:#ffffff; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.toast-acao{color:var(--dourado); font-weight:600; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- CRISTAIS ---------- */
.cristais{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.cristal{
  position:relative;
  border:1px solid var(--borda);border-radius:16px;
  background:rgba(255,255,255,0.04);
  padding:12px 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:all .18s ease-out;
}
.cristal img,.cristal svg{width:100%;max-width:68px;height:68px;object-fit:contain}
.cristal span{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--texto)}
.cristal.escolhida{
  border-color:rgba(220,38,38,.8);
  background:rgba(220,38,38,.2);
  box-shadow:0 0 20px rgba(220,38,38,.4);
}

/* ---------- LUPA ---------- */
.lupa{
  position:fixed;inset:0;z-index:50;
  background:rgba(7,7,9,.92); backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;cursor:zoom-out;
}
.lupa img{max-width:100%;max-height:88vh;border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.9)}
.lupa .fechar{
  position:fixed;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--borda);background:rgba(15,15,19,.8);
  color:var(--dourado);font-size:20px;display:grid;place-items:center;cursor:pointer;
}

/* A abertura precisa ser imediata em celular: blur e canvas forçam a GPU a
   repintar a tela inteira em aparelhos de entrada. O layout visual continua,
   sem esses efeitos caros. */
@media (max-width:700px), (prefers-reduced-motion:reduce){
  body::before,body::after{filter:none;opacity:.32}
  #particulas{display:none}
  .topo-marca,#topo,.tela,.toast-social,.lupa{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .tela{box-shadow:0 12px 28px rgba(0,0,0,.42)}
  .ponto-ping{animation:none}
}

/* ---------- RODAPE ---------- */
#rodape{
  position:relative;z-index:2; margin-top:auto;
  padding:12px 14px; border-top:1px solid var(--borda);
  text-align:center;
}
#rodape p{margin:0;font-size:10.5px;color:rgba(255,255,255,.4);max-width:440px;margin:0 auto}

@media (min-width:520px){
  h1{font-size:26px}
  h2{font-size:20px}
  #palco{padding:16px 18px 36px}
}