/* =========================================================================
   Página de vendas Black Friday 2026 (/indexback.php) — página inteira escura, preto + amarelo.
   Usa o style.css da página inicial e o blackfriday.css; aqui ficam só as cores escuras
   (aplicadas no cabeçalho, no conteúdo e no rodapé; as janelas de login/cadastro não mudam)
   e as seções novas bfx-*.
   ========================================================================= */
.lsx.is-bf-full { background: #0A0A0B; color: #F4F4F5; }
.is-bf-full main, .is-bf-full .lsx-header, .is-bf-full .lsx-footer {
  --bg: #0A0A0B; --ink: #FFFFFF; --muted: #A1A1AA; --line: rgba(255, 255, 255, .1); --blue: #FACC15; --sky: #F97316; --cyan: #FDE047;
  --grad: linear-gradient(100deg, #FDE047 0%, #FACC15 40%, #F97316 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -26px rgba(0, 0, 0, .8);
  color: #F4F4F5;
}
.is-bf-full .lsx-bf-bar { display: none; }
.is-bf-full .lsx-halo.is-a { background: radial-gradient(circle, rgba(250, 204, 21, .16), transparent 65%); }
.is-bf-full .lsx-halo.is-b { background: radial-gradient(circle, rgba(249, 115, 22, .16), transparent 65%); }
.is-bf-full .lsx-halo.is-c { background: radial-gradient(circle, rgba(250, 204, 21, .08), transparent 65%); }
.is-bf-full .lsx-gridlines { background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); }
.is-bf-full .lsx-canvas { opacity: .35; }
.is-bf-full .lsx-cursor { background: radial-gradient(circle, rgba(250, 204, 21, .08), transparent 62%); }

/* cabeçalho escuro */
.is-bf-full .lsx-header { background: rgba(10, 10, 11, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(255, 255, 255, .06); }
.is-bf-full .lsx-header.is-stuck { background: rgba(10, 10, 11, .9); border-bottom-color: rgba(250, 204, 21, .2); }
.is-bf-full .lsx-brand { color: #fff; }
.is-bf-full .lsx-nav > a { color: #D4D4D8; }
.is-bf-full .lsx-nav > a:hover, .is-bf-full .lsx-nav > a.is-current { color: #fff; }
.is-bf-full .lsx-btn.is-primary { color: #0A0A0B; background: var(--grad); background-size: 160% 100%; box-shadow: 0 14px 30px -14px rgba(250, 204, 21, .6); }
.is-bf-full .lsx-btn.is-primary:hover { box-shadow: 0 0 0 5px rgba(250, 204, 21, .16), 0 20px 40px -14px rgba(249, 115, 22, .8); }
.is-bf-full .lsx-btn.is-ghost { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.is-bf-full .lsx-btn.is-ghost:hover { color: #FACC15; border-color: rgba(250, 204, 21, .5); box-shadow: none; }
.is-bf-full .lsx-burger { border-color: rgba(255, 255, 255, .16) !important; background: rgba(255, 255, 255, .06) !important; color: #fff; }
@media (max-width: 1080px) { .is-bf-full .lsx-nav { background: #111113 !important; border-color: rgba(255, 255, 255, .1) !important; } }

/* seções reaproveitadas (integrações, planos, dúvidas) no escuro */
.is-bf-full .lsx-eyebrow { background: rgba(250, 204, 21, .12); color: #FACC15; }
.is-bf-full .lsx-head h2 { color: #fff; }
.is-bf-full .lsx-int { color: #0F172A; }
.is-bf-full .lsx-plan { background: #141416; border-color: rgba(255, 255, 255, .1); color: #E4E4E7; }
.is-bf-full .lsx-plan:hover { border-color: rgba(250, 204, 21, .45); box-shadow: 0 40px 70px -40px rgba(250, 204, 21, .35); }
.is-bf-full .lsx-plan.is-hot { background: linear-gradient(#141416, #141416) padding-box, var(--grad) border-box; }
.is-bf-full .lsx-plan h3, .is-bf-full .lsx-plan-price b { color: #fff; }
.is-bf-full .lsx-plan small { color: #FACC15; }
.is-bf-full .lsx-plan li { color: #D4D4D8; }
.is-bf-full .lsx-plan li .lsx-i { color: #FACC15; }
.is-bf-full .lsx-plan-bf { background: #FACC15; color: #0A0A0B; }
.is-bf-full .lsx-plan-bf i { background: #0A0A0B; color: #FACC15; }
.is-bf-full .lsx-faq-item { background: #141416; border-color: rgba(255, 255, 255, .1); }
.is-bf-full .lsx-faq-item:hover, .is-bf-full .lsx-faq-item[open] { border-color: rgba(250, 204, 21, .4); box-shadow: none; }
.is-bf-full .lsx-faq-item summary { color: #fff; }
.is-bf-full .lsx-faq-item summary i { background: rgba(250, 204, 21, .14); }
.is-bf-full .lsx-faq-item summary i::before, .is-bf-full .lsx-faq-item summary i::after { background: #FACC15; }
.is-bf-full .lsx-faq-item[open] summary i::before, .is-bf-full .lsx-faq-item[open] summary i::after { background: #0A0A0B; }
.is-bf-full .lsx-faq-more a { color: #FACC15; }
.is-bf-full .lsx-footer { background: #070708; border-top-color: rgba(255, 255, 255, .08); }
.is-bf-full .lsx-footer nav a { color: #A1A1AA; }
.is-bf-full .lsx-footer nav a:hover { color: #FACC15; }

/* ---------- topo de vendas ---------- */
.bfx-hero { position: relative; padding: 64px 0 72px; overflow: hidden; }
.bfx-hero::after { content: ""; position: absolute; right: -10%; top: -30%; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(250, 204, 21, .18), transparent 60%); pointer-events: none; }
.bfx-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: center; gap: 48px; }
.bfx-kicker { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; border: 1px solid rgba(250, 204, 21, .45); background: rgba(250, 204, 21, .1); padding: 7px 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FACC15; }
.bfx-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #F97316; animation: lsxLive 2s ease-out infinite; }
.bfx-hero h1 { margin-top: 18px; color: #fff; font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; line-height: 1.05; }
.bfx-big { display: block; margin-bottom: 6px; font-size: clamp(54px, 8.4vw, 118px); line-height: .9; letter-spacing: -.04em; background: linear-gradient(100deg, #FDE047 0%, #FACC15 45%, #F97316 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bfx-lead { margin-top: 20px; max-width: 620px; font-size: 18px; line-height: 1.6; color: #D4D4D8; }
.bfx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bfx-ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.bfx-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #E4E4E7; }
.bfx-ticks .lsx-i { color: #FACC15; }

.bfx-card { position: relative; border-radius: 26px; border: 1px solid rgba(250, 204, 21, .3); background: linear-gradient(160deg, #18181B, #0E0E10); padding: 26px; box-shadow: 0 40px 90px -40px rgba(250, 204, 21, .35); }
.bfx-card small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A1A1AA; }
.bfx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.bfx-count span { display: flex; flex-direction: column; align-items: center; border-radius: 16px; background: #FACC15; padding: 12px 4px 10px; color: #0A0A0B; }
.bfx-count b { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bfx-count em { margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.bfx-dates { display: flex; gap: 10px; margin-top: 16px; }
.bfx-dates div { flex: 1; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); padding: 10px 12px; }
.bfx-dates b { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.bfx-dates span { font-size: 12.5px; color: #A1A1AA; }
.bfx-card .lsx-btn { width: 100%; margin-top: 18px; }
.bfx-card-list { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.bfx-card-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #D4D4D8; }
.bfx-card-list .lsx-i { color: #FACC15; }

/* faixa que corre */
.bfx-ticker { position: relative; z-index: 2; overflow: hidden; background: #FACC15; color: #0A0A0B; transform: rotate(-1.2deg); margin: 8px -20px 0; box-shadow: 0 20px 40px -20px rgba(250, 204, 21, .5); }
.bfx-ticker-track { display: flex; width: max-content; gap: 34px; padding: 14px 0; animation: bfxRun 32s linear infinite; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; }
.bfx-ticker-track span::after { content: "✦"; margin-left: 34px; }
@keyframes bfxRun { to { transform: translateX(-50%); } }

/* problemas x soluções */
.bfx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bfx-item { display: flex; flex-direction: column; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); background: #121214; padding: 22px; transition: border-color .3s ease, transform .3s ease; }
.bfx-item:hover { border-color: rgba(250, 204, 21, .45); transform: translateY(-4px); }
.bfx-item-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(250, 204, 21, .12); color: #FACC15; }
.bfx-item-ico .lsx-i { width: 22px; height: 22px; }
.bfx-pain { margin-top: 16px; font-size: 13px; font-weight: 700; color: #FB7185; text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, .6); }
.bfx-item h3 { margin-top: 6px; color: #fff; font-size: 19px; font-weight: 800; }
.bfx-item p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: #A1A1AA; }

/* plano de ação */
.bfx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: bfx; }
.bfx-step { position: relative; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); background: #121214; padding: 26px 22px 22px; }
.bfx-step::before { counter-increment: bfx; content: counter(bfx); position: absolute; right: 18px; top: 10px; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 64px; font-weight: 800; line-height: 1; color: rgba(250, 204, 21, .14); }
.bfx-step em { display: inline-block; border-radius: 999px; background: #FACC15; padding: 3px 10px; font-style: normal; font-size: 12px; font-weight: 800; color: #0A0A0B; }
.bfx-step h3 { margin-top: 14px; color: #fff; font-size: 20px; font-weight: 800; }
.bfx-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: #A1A1AA; }
.bfx-center { display: flex; justify-content: center; margin-top: 34px; }

/* chamada final */
.bfx-final { position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(120deg, #FDE047, #FACC15 45%, #F97316); padding: 56px 40px; text-align: center; color: #0A0A0B; }
.bfx-final h2 { color: #0A0A0B; font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.05; }
.bfx-final p { margin: 14px auto 0; max-width: 620px; font-size: 17px; color: #27272A; }
.bfx-final .lsx-btn { margin-top: 26px; color: #FACC15; background: #0A0A0B; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
.bfx-final .lsx-btn:hover { transform: translateY(-2px); background: #18181B; }
.bfx-final small { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: #3F3F46; }

@media (max-width: 1080px) {
  .bfx-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bfx-grid, .bfx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bfx-hero { padding: 36px 0 48px; }
  .bfx-lead { font-size: 16px; }
  .bfx-actions .lsx-btn { flex: 1 1 100%; }
  .bfx-grid, .bfx-steps { grid-template-columns: minmax(0, 1fr); }
  .bfx-final { padding: 40px 22px; border-radius: 24px; }
  .bfx-ticker-track { font-size: 15px; padding: 11px 0; }
}
@media (prefers-reduced-motion: reduce) { .bfx-ticker-track { animation: none; } .bfx-item, .bfx-item:hover { transform: none; } }