/* =========================================================================
   Página inicial — tema Black Friday 2026 (só visual, sem promoção nova).
   Carregado pelo index.php apenas enquanto a campanha está no ar (até 01/12/2026).
   Classes lsx-bf-* e regras sob body.is-bf; o visual normal não muda nada.
   ========================================================================= */
.lsx.is-bf { --bf-black: #0A0A0B; --bf-ink: #141416; --bf-yellow: #FACC15; --bf-orange: #F97316; --bf-grad: linear-gradient(100deg, #FDE047 0%, #FACC15 40%, #F97316 100%); }

/* ---------- faixa do topo ---------- */
.lsx-bf-bar { position: relative; z-index: 3; background: var(--bf-black); color: #F4F4F5; border-bottom: 1px solid rgba(250, 204, 21, .25); }
.lsx-bf-bar-in { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 6px 0; font-size: 13.5px; }
.lsx-bf-tag { flex: none; border-radius: 6px; background: var(--bf-yellow); padding: 3px 9px; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #0A0A0B; }
.lsx-bf-bar p { min-width: 0; color: #D4D4D8; }
.lsx-bf-bar p b { color: #fff; }
.lsx-bf-count { flex: none; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bf-yellow); }
.lsx-bf-count span { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; border-radius: 7px; background: rgba(255, 255, 255, .08); padding: 2px 4px; line-height: 1.1; font-size: 14px; }
.lsx-bf-count span small { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #A1A1AA; }
.lsx-bf-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; background: var(--bf-yellow); padding: 6px 12px; font-size: 13px; font-weight: 700; color: #0A0A0B !important; transition: transform .2s ease, background .2s ease; }
.lsx-bf-cta:hover { transform: translateY(-1px); background: #FDE047; }
.lsx-bf-cta .lsx-i { width: 1em; height: 1em; }

/* ---------- topo (hero) em preto e amarelo ---------- */
.is-bf .lsx-hero { position: relative; background: radial-gradient(900px 420px at 18% 10%, rgba(250, 204, 21, .14), transparent 60%), radial-gradient(800px 420px at 92% 80%, rgba(249, 115, 22, .16), transparent 62%), var(--bf-black); color: #fff; overflow: hidden; }
.is-bf .lsx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 40% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 40% 30%, #000 10%, transparent 70%); }
.is-bf .lsx-hero > .lsx-wrap { position: relative; }
/* A ilustração do painel continua clara: volta a cor do texto escura dentro dela. */
.is-bf .lsx-hero .lsx-stage { color: var(--ink); }
.is-bf .lsx-hero h1 { color: #fff; }
.is-bf .lsx-hero .lsx-grad { background-image: var(--bf-grad); }
.is-bf .lsx-hero .lsx-lead { color: #D4D4D8; }
.is-bf .lsx-hero .lsx-ticks li { color: #E4E4E7; }
.is-bf .lsx-hero .lsx-ticks .lsx-i { color: var(--bf-yellow); }
.is-bf .lsx-hero .lsx-badge { border-color: rgba(250, 204, 21, .45); background: rgba(250, 204, 21, .1); color: var(--bf-yellow); }
.is-bf .lsx-hero .lsx-badge i { background: var(--bf-orange); box-shadow: 0 0 0 0 rgba(249, 115, 22, .7); }
.is-bf .lsx-hero .lsx-btn.is-primary { color: #0A0A0B; background: var(--bf-grad); background-size: 160% 100%; box-shadow: 0 14px 30px -14px rgba(250, 204, 21, .7); }
.is-bf .lsx-hero .lsx-btn.is-primary:hover { box-shadow: 0 0 0 5px rgba(250, 204, 21, .18), 0 20px 40px -14px rgba(249, 115, 22, .8); }
.is-bf .lsx-hero .lsx-btn.is-ghost { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.is-bf .lsx-hero .lsx-btn.is-ghost:hover { color: var(--bf-yellow); border-color: rgba(250, 204, 21, .5); }
.lsx-bf-note { margin-top: 18px; display: inline-block; max-width: 34rem; line-height: 1.5; border-radius: 12px; border: 1px dashed rgba(250, 204, 21, .4); padding: 8px 12px; font-size: 13.5px; color: #E4E4E7; }
.lsx-bf-note b { color: var(--bf-yellow); }

/* ---------- planos ---------- */
.lsx-plan-bf { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; border-radius: 999px; background: var(--bf-black); padding: 4px 10px 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.lsx-plan-bf i { border-radius: 999px; background: var(--bf-yellow); padding: 1px 7px; font-style: normal; font-weight: 800; color: #0A0A0B; }
.is-bf .lsx-plan.is-hot { background: linear-gradient(#fff, #fff) padding-box, var(--bf-grad) border-box; box-shadow: 0 40px 80px -40px rgba(249, 115, 22, .55); }
.is-bf .lsx-plan.is-hot .lsx-plan-flag { background: var(--bf-black); color: var(--bf-yellow); }

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .lsx-bf-bar p { display: none; }
  .lsx-bf-bar-in { justify-content: space-between; gap: 10px; }
}
@media (max-width: 480px) {
  .lsx-bf-count span:last-child, .lsx-bf-count em { display: none; } /* esconde os segundos e o "Termina em" */
  .lsx-bf-tag { font-size: 11px; padding: 3px 7px; }
  .lsx-bf-cta { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .lsx-bf-cta { transition: none; } }
.lsx-bf-count em { margin-right: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: #A1A1AA; }
.lsx-bf-count b { font-weight: 800; }