/* =========================================================================
   ofertas-quiz — motor visual compartilhado (quiz gamificado -> VSL)
   Premium, mobile-first, tematizavel via CSS vars (cada oferta define :root).
   Sem emoji. Icones em SVG (Lucide/Tabler). Animacoes em CSS/SVG.
   ========================================================================= */

:root{
  /* defaults; cada oferta sobrescreve no <style> inline */
  --bg:#0F0E13;
  --bg-2:#17161e;
  --surface:#1b1a23;
  --surface-2:#23222d;
  --border:rgba(255,255,255,.10);
  --text:#ECEAF0;
  --muted:#A39FB0;
  --accent:#C9A227;
  --accent-2:#8A1850;
  --accent-soft:rgba(201,162,39,.14);
  --cta:#1FA971;
  --cta-text:#08110c;
  --gold:#C9A84C;
  --radius:20px;
  --radius-sm:13px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.65);
  --shadow-soft:0 10px 30px -16px rgba(0,0,0,.5);
  --font-title:"Playfair Display",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:560px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{display:block}

/* animated ambient background -------------------------------------------- */
.bg-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%, var(--bg-2), var(--bg) 60%)}
.bg-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  animation:float 18s ease-in-out infinite}
.bg-orb.b{background:radial-gradient(circle at 70% 70%, var(--accent-2), transparent 70%);
  animation-duration:24s;animation-direction:reverse;opacity:.4}
.bg-orb.c{background:radial-gradient(circle at 50% 50%, var(--cta), transparent 72%);
  opacity:.18;animation-duration:30s}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6vw,-4vh) scale(1.12)}
  66%{transform:translate(-5vw,5vh) scale(.94)}
}
@media (prefers-reduced-motion:reduce){.bg-orb{animation:none}}

/* app shell -------------------------------------------------------------- */
#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:clamp(18px,5vw,40px) 18px;position:relative}
.stage{width:100%;max-width:var(--maxw);margin:0 auto;min-width:0}
.hidden{display:none !important}

/* fade/slide helpers */
.fade-in{animation:fadeIn .6s cubic-bezier(.22,.61,.36,1) both}
.rise-in{animation:riseIn .6s cubic-bezier(.22,.61,.36,1) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* top bar (sound + progress) -------------------------------------------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  pointer-events:none}
.topbar .spacer{flex:1}
.progress{flex:1;max-width:340px;height:7px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .4s}
.progress.show{opacity:1}
.progress > i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--cta));
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.icon-btn{pointer-events:auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.08);
  border:1px solid var(--border);backdrop-filter:blur(6px);
  transition:transform .2s,background .2s}
.icon-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.16)}
.icon-btn svg{width:20px;height:20px;stroke:var(--text)}

/* badges / chips --------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:8px 15px;border-radius:99px;border:1px solid var(--border)}
.eyebrow svg{width:15px;height:15px;stroke:var(--accent)}

/* INTRO ------------------------------------------------------------------ */
.intro{text-align:center}
.intro .badge-row{display:flex;justify-content:center;margin-bottom:22px}
.intro h1{font-family:var(--font-title);font-weight:800;
  font-size:clamp(25px,7vw,44px);line-height:1.1;letter-spacing:-.01em;
  margin-bottom:16px;overflow-wrap:break-word}
.intro h1 .hl{color:var(--accent);font-style:italic}
.intro p.sub{color:var(--muted);font-size:clamp(15.5px,4.4vw,18px);
  max-width:30ch;margin:0 auto 30px}
.intro .meta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-top:26px;color:var(--muted);font-size:13px}
.intro .meta span{display:inline-flex;align-items:center;gap:7px}
.intro .meta svg{width:16px;height:16px;stroke:var(--accent)}

/* big CTA buttons -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:17px;letter-spacing:.01em;
  padding:17px 30px;border-radius:99px;width:100%;max-width:380px;
  color:var(--cta-text);background-color:var(--accent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 58%);
  box-shadow:0 14px 32px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s,box-shadow .25s,filter .2s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px) scale(1.01);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.99)}
.btn svg{width:20px;height:20px;stroke:currentColor}
.btn .shine{position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}80%,100%{left:130%}}
.btn.pulse{animation:ctaPulse 2.2s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 14px 32px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4)}
  50%{box-shadow:0 18px 48px -10px rgba(0,0,0,.6),0 0 0 4px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.45)}}

/* QUIZ ------------------------------------------------------------------- */
.q-card{text-align:center}
.q-count{font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.q-card h2{font-family:var(--font-title);font-weight:700;
  font-size:clamp(21px,5.6vw,31px);line-height:1.18;margin-bottom:10px;overflow-wrap:break-word}
.q-card .q-sub{color:var(--muted);font-size:15px;margin-bottom:26px}
.options{display:flex;flex-direction:column;gap:13px;text-align:left}
.opt{display:flex;align-items:center;gap:15px;width:100%;
  padding:17px 18px;border-radius:var(--radius-sm);
  background:var(--surface);border:1.5px solid var(--border);
  transition:transform .16s,border-color .2s,background .2s,box-shadow .2s;
  animation:riseIn .5s both}
.opt:hover{transform:translateY(-2px);border-color:var(--accent);
  background:var(--surface-2);box-shadow:var(--shadow-soft)}
.opt .opt-ico{flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;background:var(--accent-soft);
  border:1px solid var(--border);transition:background .2s}
.opt .opt-ico svg{width:22px;height:22px;stroke:var(--accent)}
.opt .opt-label{flex:1;min-width:0;font-weight:600;font-size:15.5px;line-height:1.35;overflow-wrap:break-word}
.opt .opt-check{flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border);display:grid;place-items:center;transition:.2s}
.opt .opt-check svg{width:14px;height:14px;stroke:#fff;opacity:0;transform:scale(.5);transition:.2s}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .opt-check{background:var(--accent);border-color:var(--accent)}
.opt.sel .opt-check svg{opacity:1;transform:scale(1)}
.opt.sel .opt-ico{background:var(--accent);}
.opt.sel .opt-ico svg{stroke:var(--cta-text)}

/* ANALYZING -------------------------------------------------------------- */
.analyze{text-align:center}
.analyze .ring{width:104px;height:104px;margin:0 auto 28px;position:relative}
.analyze .ring svg{width:100%;height:100%;animation:spin 1.5s linear infinite}
.analyze .ring .pct{position:absolute;inset:0;display:grid;place-items:center;
  font-weight:800;font-size:23px;color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}
.analyze h2{font-family:var(--font-title);font-size:clamp(22px,6vw,28px);margin-bottom:10px}
.analyze .line{color:var(--muted);font-size:15.5px;min-height:24px;
  transition:opacity .4s}
.analyze .steps{margin:24px auto 0;max-width:330px;text-align:left;
  display:flex;flex-direction:column;gap:11px}
.analyze .step{display:flex;align-items:center;gap:11px;color:var(--muted);
  font-size:14.5px;opacity:.35;transition:opacity .4s,color .4s}
.analyze .step.on{opacity:1;color:var(--text)}
.analyze .step .dot{width:22px;height:22px;border-radius:50%;flex:0 0 22px;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--border)}
.analyze .step.on .dot{background:var(--cta);border-color:var(--cta)}
.analyze .step .dot svg{width:13px;height:13px;stroke:var(--cta-text);opacity:0;transition:.3s}
.analyze .step.on .dot svg{opacity:1}

/* DIAGNOSIS -------------------------------------------------------------- */
.diag{text-align:center}
.diag .seal{width:74px;height:74px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-soft);
  border:1px solid var(--border);animation:popIn .6s both}
.diag .seal svg{width:36px;height:36px;stroke:var(--accent)}
.diag .tag{display:inline-block;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.diag h2{font-family:var(--font-title);font-weight:800;
  font-size:clamp(25px,6.8vw,34px);line-height:1.16;margin-bottom:18px}
.diag .card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px 22px;text-align:left;
  box-shadow:var(--shadow);margin-bottom:18px}
.diag .card p{color:var(--text);font-size:15.5px;margin-bottom:13px}
.diag .card p:last-child{margin-bottom:0}
.diag .card .lead{color:var(--muted)}
.diag .card strong{color:var(--accent);font-weight:700}
.diag .meter{margin:4px 0 18px}
.diag .meter .row{display:flex;justify-content:space-between;font-size:13px;
  color:var(--muted);margin-bottom:7px}
.diag .meter .bar{height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.diag .meter .bar > i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width 1.1s cubic-bezier(.22,.61,.36,1)}
.diag .next-note{color:var(--muted);font-size:13.5px;margin-top:14px;
  display:flex;align-items:center;gap:8px;justify-content:center}
.diag .next-note svg{width:16px;height:16px;stroke:var(--accent)}

/* VSL -------------------------------------------------------------------- */
.vsl{width:100%;max-width:480px}
.vsl .v-head{text-align:center;margin-bottom:16px}
.vsl .v-head .tag{font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.vsl .v-head h2{font-family:var(--font-title);font-size:clamp(19px,5vw,26px);
  line-height:1.2;margin-top:8px;overflow-wrap:break-word}
.vslwrap{position:relative;width:100%;border-radius:var(--radius);
  overflow:hidden;background:#000;box-shadow:var(--shadow);
  border:1px solid var(--border)}
.vslwrap::before{content:"";display:block;padding-bottom:177.78%}
.vslwrap video{position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:contain;background:#000}
.vslwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vslwrap .v-tap{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.32);transition:opacity .4s;z-index:3}
.vslwrap .v-tap.gone{opacity:0;pointer-events:none}
.vslwrap .v-tap .play{width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);
  animation:ctaPulse 2s infinite}
.vslwrap .v-tap .play svg{width:34px;height:34px;stroke:#fff;margin-left:4px}
.vslwrap .v-tap .lbl{position:absolute;bottom:26px;color:#fff;font-weight:600;
  font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vsl .v-soundnote{text-align:center;color:var(--muted);font-size:12.5px;margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:7px}
.vsl .v-soundnote svg{width:15px;height:15px;stroke:var(--muted)}

/* CTA reveal (hidden until pitch) */
.cta-zone{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:10px}
.cta-zone.reveal{animation:ctaReveal .7s cubic-bezier(.22,1.2,.36,1) both}
@keyframes ctaReveal{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.cta-zone .price{display:flex;align-items:baseline;gap:10px;justify-content:center;margin-bottom:4px}
.cta-zone .price .now{font-family:var(--font-title);font-weight:800;font-size:34px;color:var(--text)}
.cta-zone .price .was{color:var(--muted);text-decoration:line-through;font-size:17px}
.cta-zone .price .off{font-size:12px;font-weight:800;color:var(--cta-text);
  background:var(--cta);padding:3px 9px;border-radius:99px}
.cta-zone .urgency{display:inline-flex;align-items:center;gap:8px;color:var(--accent);
  font-size:13.5px;font-weight:600}
.cta-zone .urgency svg{width:16px;height:16px;stroke:var(--accent)}
.cta-zone .guarantee{color:var(--muted);font-size:12.5px;display:flex;
  align-items:center;gap:7px;margin-top:2px}
.cta-zone .guarantee svg{width:15px;height:15px;stroke:var(--cta)}

/* dev preview helper (discreto, removivel) */
.devpreview{position:fixed;bottom:12px;right:12px;z-index:40;
  font-size:11px;color:var(--muted);opacity:.45;
  background:rgba(0,0,0,.4);border:1px solid var(--border);
  padding:6px 11px;border-radius:99px;transition:opacity .2s;pointer-events:auto}
.devpreview:hover{opacity:1}

/* ====================  JORNADA: cards com imagem  ====================== */
@keyframes leaveOut{to{opacity:0;transform:translateX(-26px)}}
.stage.leaving{animation:leaveOut .2s cubic-bezier(.4,0,1,1) both}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.slide-in{animation:slideIn .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes kenburns{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* reacao condicional (a interface responde a resposta) */
.reaction{text-align:center;max-width:460px}
.reaction-stage{cursor:pointer}
.react-ico{width:88px;height:88px;margin:0 auto 26px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-soft);
  border:1px solid var(--border);animation:popIn .5s both;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.react-ico svg{width:42px;height:42px;stroke:var(--accent)}
.react-line{font-family:var(--font-title);font-weight:700;
  font-size:clamp(23px,6.2vw,32px);line-height:1.26;color:var(--text);
  margin:0 auto 24px;max-width:18ch}
.react-hint{display:inline-flex;align-items:center;gap:8px;color:var(--muted);
  font-size:13.5px;animation:hintPulse 1.7s ease-in-out infinite}
.react-hint svg{width:16px;height:16px;stroke:var(--muted)}

/* opcoes maiores, sensacao de app */
.opt{padding:18px 19px}
.opt .opt-label{font-size:16px}
.opt:active{transform:scale(.986)}

.step-card{text-align:center}
.cardimg{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;margin-bottom:20px;box-shadow:var(--shadow);
  border:1px solid var(--border);background:var(--surface)}
.cardimg img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
  display:block;animation:kenburns 16s ease-out both}
.cardimg .ovl{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,.62) 100%)}
.q-chip{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;
  align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
  padding:7px 13px;border-radius:99px}
.q-chip svg{width:14px;height:14px;stroke:var(--accent)}
.step-card h2{font-family:var(--font-title);font-weight:700;
  font-size:clamp(21px,5.6vw,30px);line-height:1.18;margin-bottom:10px;
  overflow-wrap:break-word}
.step-card .step-sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.step-card .options{margin-top:22px}

/* tela de insight */
.ins-chip{top:auto;bottom:12px;left:12px;background:rgba(0,0,0,.52);
  border-color:rgba(255,255,255,.22);letter-spacing:.08em}
.insight-card .cardimg{margin-bottom:22px}
.insight-card h2{font-family:var(--font-title);font-weight:800;
  font-size:clamp(22px,6vw,31px);line-height:1.16;margin-bottom:14px;overflow-wrap:break-word}
.ins-body{color:var(--text);font-size:16px;line-height:1.62;max-width:40ch;
  margin:0 auto 26px}
.ins-body strong{color:var(--accent);font-weight:700}
.btn.ghost{color:var(--text);background-color:var(--surface-2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.btn.ghost svg{stroke:var(--accent)}

/* analyze steps (classe .astep) */
.analyze .astep{display:flex;align-items:center;gap:11px;color:var(--muted);
  font-size:14.5px;opacity:.35;transition:opacity .4s,color .4s}
.analyze .astep.on{opacity:1;color:var(--text)}
.analyze .astep .dot{width:22px;height:22px;border-radius:50%;flex:0 0 22px;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--border)}
.analyze .astep.on .dot{background:var(--cta);border-color:var(--cta)}
.analyze .astep .dot svg{width:13px;height:13px;stroke:var(--cta-text);opacity:0;transition:.3s}
.analyze .astep.on .dot svg{opacity:1}

/* =======================  SKIN inLead (override)  ====================== */
/* opcoes = cards elegantes na PALETA DA OFERTA (accent), nao verde chapado */
.opt{background:var(--surface);background-image:none;border:1.5px solid var(--border);
  color:var(--text);border-radius:var(--radius-sm);padding:17px 18px;
  box-shadow:var(--shadow-soft);transition:transform .15s,border-color .2s,background .2s,box-shadow .2s}
.opt:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--surface-2)}
.opt:active{transform:scale(.985)}
.opt .opt-ico{flex:0 0 44px;width:44px;height:44px;background:var(--accent-soft);border:1px solid var(--border)}
.opt .opt-ico svg{stroke:var(--accent)}
.opt .opt-label{color:var(--text);font-weight:600;font-size:16px}
.opt .opt-check{border-color:var(--border)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .opt-ico{background:var(--accent)}
.opt.sel .opt-ico svg{stroke:var(--cta-text)}
.opt.sel .opt-check{background:var(--accent);border-color:var(--accent)}
.opt.sel .opt-check svg{stroke:#fff}
.step-card h2{font-size:clamp(23px,6.2vw,31px);font-weight:800;color:var(--text)}

/* DESKTOP: moldura tipo app (mobile-first, largura contida, sem esticar/vazio) */
@media (min-width:820px){
  body{background:#0a0a0c}
  #app{max-width:480px;margin:22px auto;min-height:calc(100dvh - 44px);
    border-radius:38px;border:1px solid var(--border);background:var(--bg);
    box-shadow:0 50px 120px -40px rgba(0,0,0,.92),0 0 0 9px rgba(255,255,255,.02);
    overflow:hidden;position:relative}
}

/* hero: imagem bem enquadrada, NUNCA corta rosto (foco no topo, respiro) */
.hero{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  width:100%;max-width:440px;margin:0 auto 22px;box-shadow:var(--shadow);
  border:1px solid var(--border);background:var(--surface)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;animation:kenburns 16s ease-out both}
.hero.result{aspect-ratio:5/4}
.hero .ovl{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,0) 45%,rgba(0,0,0,.35))}

.intro .trust{margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13px}
.intro .trust svg{width:15px;height:15px;stroke:var(--cta)}
.ins-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 auto 10px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ins-eyebrow svg{width:15px;height:15px;stroke:var(--accent);flex:0 0 15px}

/* tela de validacao = texto (sem imagem, padrao inLead) */
.fb{text-align:center;max-width:480px}
.fb-ico{width:70px;height:70px;margin:0 auto 18px;border-radius:50%;display:grid;
  place-items:center;background:var(--accent-soft);border:1px solid var(--border);
  animation:popIn .5s both}
.fb-ico svg{width:34px;height:34px;stroke:var(--accent)}
.fb h2{font-family:var(--font-title);font-weight:800;font-size:clamp(24px,6.6vw,33px);
  line-height:1.16;margin-bottom:16px;overflow-wrap:break-word}
.fb-body{color:var(--text);font-size:16.5px;line-height:1.62;max-width:40ch;margin:0 auto 16px}
.fb-body strong{color:var(--accent);font-weight:700}
.fb-hot{color:#e8584f;font-weight:700;font-size:15.5px;max-width:38ch;margin:0 auto 22px;line-height:1.5}

/* resultado inLead: headline + imagem + solucao + caixa de reforco + CTA */
.diag{text-align:center;max-width:500px}
.diag .tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.diag h2{font-family:var(--font-title);font-weight:800;font-size:clamp(25px,7vw,36px);
  line-height:1.14;margin-bottom:18px;overflow-wrap:break-word;color:var(--text)}
.diag h2 .hl{color:var(--cta);font-style:normal}
.diag-body{text-align:left;margin:18px auto 0;max-width:460px}
.diag-body p{color:var(--text);font-size:15.5px;line-height:1.6;margin-bottom:12px}
.diag-body p.lead{color:var(--muted)}
.diag-body strong{color:var(--accent);font-weight:700}
.diag .callout{display:flex;gap:10px;align-items:flex-start;text-align:left;
  margin:16px auto 6px;max-width:460px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:15px 17px;
  color:var(--muted);font-size:14.5px;line-height:1.5}
.diag .callout svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--cta);margin-top:1px}
.diag .btn{margin-top:20px}

/* ===========================  GALERIA  ================================== */
.gal{--bg:#0c0b10;--text:#f3f1f7;--muted:#a39fb0;--accent:#d4af37;--cta:#1FA971}
body.gal{background:
  radial-gradient(130% 80% at 20% -10%, #1a1726, #0c0b10 55%),
  radial-gradient(120% 90% at 90% 0%, #161021, #0c0b10 60%)}
.gal-wrap{max-width:1180px;margin:0 auto;padding:clamp(26px,5vw,56px) 20px 80px}
.gal-head{text-align:center;margin-bottom:clamp(30px,5vw,52px)}
.gal-head .eyebrow{margin-bottom:18px}
.gal-head h1{font-family:var(--font-title);font-weight:800;
  font-size:clamp(32px,6vw,54px);line-height:1.05;letter-spacing:-.01em;color:#fff}
.gal-head h1 .hl{color:var(--accent);font-style:italic}
.gal-head p{color:var(--muted);max-width:60ch;margin:16px auto 0;font-size:clamp(15px,2.2vw,17.5px)}
.gal-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.gal-stat{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:99px;padding:9px 17px;
  font-size:13.5px;color:var(--muted)}
.gal-stat b{color:#fff;font-weight:800}
.gal-stat svg{width:17px;height:17px;stroke:var(--accent)}
.gal-filters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:30px 0 6px}
.gal-filter{font-size:13px;font-weight:600;color:var(--muted);
  padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);transition:.2s}
.gal-filter:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.gal-filter.active{color:#0c0b10;background:var(--accent);border-color:var(--accent)}

.gal-grid{display:grid;gap:22px;margin-top:34px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{position:relative;border-radius:22px;overflow:hidden;
  background:#161420;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -38px rgba(0,0,0,.9);
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;
  animation:riseIn .6s both}
.card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.2);
  box-shadow:0 44px 80px -40px rgba(0,0,0,1)}
.card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0b10}
.card .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.card:hover .thumb img{transform:scale(1.07)}
.card .thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(12,11,16,.92))}
.card .thumb .niche{position:absolute;top:13px;left:13px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);padding:6px 11px;border-radius:99px}
.card .thumb .ready{position:absolute;top:13px;right:13px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:#08110c;background:var(--cta);
  padding:6px 11px;border-radius:99px}
.card .thumb .ready svg{width:13px;height:13px;stroke:#08110c}
.card .body{padding:18px 19px 20px;display:flex;flex-direction:column;flex:1;
  margin-top:-46px;position:relative;z-index:2}
.card .body h3{font-family:var(--font-title);font-weight:700;font-size:20px;
  line-height:1.18;color:#fff;margin-bottom:8px}
.card .body .pain{color:var(--muted);font-size:13.5px;line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .body .row{display:flex;align-items:center;gap:10px;margin-top:16px}
.card .body .open{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:14.5px;color:#0c0b10;
  background:linear-gradient(180deg,#ecc94b,var(--accent));
  padding:13px 16px;border-radius:13px;transition:filter .2s,transform .2s}
.card .body .open:hover{filter:brightness(1.07);transform:translateY(-1px)}
.card .body .open svg{width:17px;height:17px;stroke:#0c0b10}
.card .body .meta-pill{display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.1);
  padding:0 12px;height:42px;border-radius:13px}
.card .body .meta-pill svg{width:15px;height:15px;stroke:var(--accent)}
.gal-foot{text-align:center;color:var(--muted);font-size:13px;margin-top:54px;
  border-top:1px solid rgba(255,255,255,.07);padding-top:26px}

@media (max-width:560px){
  .gal-grid{grid-template-columns:1fr;gap:16px}
  .topbar{padding:10px 12px}
}