/* ═══════════════════════════════════════════════════════════════════════
   Skin Black de /plugin-detbox/ (CSS)

   Ligada e desligada por data em functions/_lib/skins.js, que injeta este
   arquivo na própria página (mesma URL) e marca <html data-skin="black">.
   Entra DEPOIS do CSS da LP, então ganha nos empates. Tudo aqui é
   prefixado por "bk-" ou escopado por html[data-skin="black"]: fora do evento,
   nada disto é carregado.

   A campanha veste a página inteira com elementos próprios (abertura,
   letreiro de placas, fitas de isolamento, selos, ingresso, fechamento).
   As cores de marca de cada produto continuam no resto da página; a
   campanha se reconhece pelo preto puro e pelo amarelo de sinalização.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-skin="black"] {
  --bk-black: #000;
  --bk-ink: #f5f5f4;
  --bk-ink-2: rgba(245, 245, 244, 0.66);
  --bk-hot: #ffd23f;
  --bk-hot-2: #ffb800;
  --bk-red: #ff4d3d;
  --bk-line: rgba(255, 210, 63, 0.28);
  --bk-font: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bk-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* Borda "cometa": filete discreto com um ponto de luz que o atravessa.
     Escolhida pelo Renan em 14/10 no lugar da fita zebrada correndo. */
  --bk-cometa: radial-gradient(ellipse 60px 2px at center, #fff 0, var(--bk-hot) 30%, transparent 70%) no-repeat,
    rgba(255, 210, 63, 0.28);
}

/* Página de fundo escuro: o quase-preto da marca vira preto de fato. */
html[data-skin="black"] {
  --bg: #000;
  --surface: #0b0b0d;
  --card: #08080a;
}
html[data-skin="black"] body { background: #000; }

/* As LPs têm contagens próprias de oferta (24h no curso, "até o fim do
   dia" nos preços). Duas contagens com prazos diferentes na mesma tela se
   desmentem: fica só a da campanha, no ingresso que entra no lugar delas.
   No Struct e no DetBox sai só o relógio do topo; o resto da faixa
   (assinantes ativos) continua. */
html[data-skin="black"] .countdown-wrap,
html[data-skin="black"] .topstrip-countdown,
html[data-skin="black"] .topstrip-sep:has(+ .topstrip-countdown) { display: none !important; }

/* ─── Palavra em placas ─────────────────────────────────────────────── */
.bk-fw { display: inline-flex; gap: 0.12em; perspective: 400px; line-height: 1; }
.bk-fw__gap { width: 0.4em; }
.bk-fw__p {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.12em; height: 1.4em;
  border-radius: 0.12em;
  background: linear-gradient(180deg, #202023 0 49%, #141416 51% 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.6);
  font-family: var(--bk-mono); font-weight: 800;
  color: var(--bk-hot);
  transform-origin: 50% 0;
  transform: rotateX(-90deg); opacity: 0;
}
/* Vinco horizontal da placa. */
.bk-fw__p::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0, 0, 0, 0.85);
}
.bk-fw.bk-on .bk-fw__p {
  animation: bk-fall 0.5s calc(var(--i) * 90ms) cubic-bezier(0.3, 1.5, 0.6, 1) forwards;
}
@keyframes bk-fall {
  0%   { transform: rotateX(-90deg); opacity: 1; filter: brightness(2); }
  100% { transform: rotateX(0); opacity: 1; filter: none; }
}
/* No topo e no hero o letreiro se renova de tempos em tempos: as placas
   caem de novo, em onda. É o que mantém a campanha viva sem ocupar mais. */
.bk-fw--bar.bk-on .bk-fw__p,
.bk-fw--hero.bk-on .bk-fw__p {
  animation: bk-cycle 9s calc(var(--i) * 90ms) cubic-bezier(0.3, 1.5, 0.6, 1) infinite;
}
@keyframes bk-cycle {
  0%        { transform: rotateX(-90deg); opacity: 1; filter: brightness(2); }
  5.5%, 100% { transform: rotateX(0); opacity: 1; filter: none; }
}

.bk-fw--bar    { font-size: 0.78rem; }
.bk-fw--tag    { font-size: 0.72rem; }
.bk-fw--hero   { font-size: 2.1rem; }
.bk-fw--ticket { font-size: 1.5rem; }
.bk-fw--capa   { font-size: clamp(2.6rem, 9vw, 5.6rem); }

/* ─── Contagem em placas ────────────────────────────────────────────── */
.bk-cd { display: inline-flex; align-items: center; gap: 0.45rem; }
.bk-cd__b { display: inline-flex; align-items: center; gap: 0.2rem; }
.bk-cd__n { display: inline-flex; gap: 2px; perspective: 200px; }
.bk-flap {
  display: inline-block; min-width: 1.05em; padding: 0.1em 0.12em;
  border-radius: 3px;
  background: linear-gradient(180deg, #1f1f22 0 49%, #121214 51% 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--bk-mono); font-weight: 700; font-size: 0.86rem;
  font-variant-numeric: tabular-nums; text-align: center; line-height: 1.25;
  color: var(--bk-hot);
  transform-origin: 50% 0;
}
/* A placa cai de cima, como no letreiro mecânico. */
.bk-flap--go { animation: bk-flip 0.38s cubic-bezier(0.3, 1.4, 0.6, 1); }
@keyframes bk-flip {
  0%   { transform: rotateX(-88deg); filter: brightness(1.8); }
  100% { transform: rotateX(0); filter: none; }
}
.bk-cd__u { font-size: 0.66rem; font-weight: 600; color: var(--bk-ink-2); }
.bk-cd--lg { gap: 0.7rem; }
.bk-cd--lg .bk-flap { font-size: 1.5rem; border-radius: 5px; }
.bk-cd--lg .bk-cd__u { font-size: 0.72rem; }

/* ─── 1. Abertura ───────────────────────────────────────────────────── */
.bk-capa {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none;
}
.bk-capa__meia {
  position: absolute; left: 0; right: 0; height: 50%;
  background: #000;
  transition: transform 0.75s cubic-bezier(0.7, 0, 0.25, 1);
}
.bk-capa__meia--t { top: 0; }
.bk-capa__meia--b { bottom: 0; }
/* A emenda das duas metades é o filete com o cometa, que se parte ao abrir. */
.bk-capa__meia--t::after,
.bk-capa__meia--b::before {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--bk-cometa); background-size: 120px 100%, 100% 100%;
  animation: bk-cometa 3.2s linear infinite;
}
.bk-capa__meia--t::after { bottom: 0; }
.bk-capa__meia--b::before { top: 0; }
/* A primeira linha da grade tem exatamente meia tela: termina na emenda das
   duas metades. O letreiro senta no fim dela e a legenda começa logo abaixo,
   então o filete passa no vão entre BLACK e "Promoção", nunca por trás das
   placas, qualquer que seja a altura da tela. */
.bk-capa__in {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 50% auto auto 1fr; justify-items: center;
  font-family: var(--bk-font); color: var(--bk-ink);
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.bk-capa__in .bk-fw--capa { align-self: end; margin-bottom: clamp(1rem, 2.4vh, 1.6rem); }
.bk-capa__pm { margin-top: clamp(1rem, 2.4vh, 1.6rem); }
.bk-capa__sub { margin-top: 1.1rem; }
.bk-capa__pm {
  font-weight: 900; font-size: clamp(0.9rem, 2.4vw, 1.25rem);
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--bk-hot);
  opacity: 0; animation: bk-in 0.4s 0.6s ease forwards;
}
.bk-capa__sub {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bk-ink-2);
  opacity: 0; animation: bk-in 0.4s 0.8s ease forwards;
}
.bk-capa--abre .bk-capa__meia--t { transform: translateY(-101%); }
.bk-capa--abre .bk-capa__meia--b { transform: translateY(101%); }
.bk-capa--abre .bk-capa__in { opacity: 0; transform: scale(1.06); }
@keyframes bk-in { to { opacity: 1; } }
@keyframes bk-cometa {
  from { background-position: -120px 0, 0 0; }
  to { background-position: calc(100% + 120px) 0, 0 0; }
}

/* ─── 2. Faixa do topo ──────────────────────────────────────────────
   Faixa de anúncio, sem botão: "Super promoção", estrelas piscando e a
   contagem. Fica no topo da página e rola com
   ela: não acompanha o menu fixo. */
.bk-bar {
  position: relative; z-index: 2; overflow: hidden;
  background:
    radial-gradient(55% 160% at 50% 0%, rgba(255, 210, 63, 0.16), transparent 70%),
    var(--bk-black);
  color: var(--bk-ink);
  font-family: var(--bk-font);
}
/* Borda de baixo: filete com o cometa. */
.bk-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--bk-cometa); background-size: 120px 100%, 100% 100%;
  animation: bk-cometa 3.2s linear infinite;
}
.bk-bar__in {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0.6rem 1rem 0.7rem;
}
.bk-bar__pm {
  font-size: 0.76rem; font-weight: 900; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bk-hot); white-space: nowrap;
}
.bk-bar__st {
  color: var(--bk-hot); font-size: 0.75rem; line-height: 1;
  animation: bk-pisca 1.8s ease-in-out infinite;
}
.bk-bar__st + .bk-bar__pm ~ .bk-bar__st { animation-delay: 0.9s; }
@keyframes bk-pisca {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.bk-bar__cd { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.74rem; color: var(--bk-ink-2); }
.bk-bar__lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

/* Celular: anúncio na primeira linha, contagem na segunda. */
@media (max-width: 620px) {
  .bk-bar__in { gap: 0.35rem 0.55rem; padding: 0.55rem 0.75rem 0.65rem; }
  .bk-bar__pm { font-size: 0.64rem; letter-spacing: 0.22em; }
}
@media (max-width: 400px) {
  .bk-bar__st { display: none; }
  .bk-bar .bk-cd__u { display: none; }
  .bk-bar .bk-cd__b + .bk-cd__b::before { content: ":"; color: var(--bk-ink-2); margin-right: 0.12rem; }
}

/* ─── Faixa de desconto da LP (vermelha, logo abaixo do menu) ──────────
   Vestida de Black: fundo preto, destaque amarelo, o letreiro BLACK no lugar
   da pílula com o ícone de alerta e o filete com o cometa na base. O texto
   do desconto e o link continuam os da LP. */
html[data-skin="black"] .promo-banner--top {
  --promo-grad: linear-gradient(100deg, #000 0%, #0b0b0d 50%, #000 100%);
  --promo-fg: rgba(245, 245, 244, 0.82);
  --promo-fg-strong: var(--bk-hot);
  --promo-shine: rgba(255, 210, 63, 0.14);
  --promo-pill-bg: transparent;
  --promo-pill-bd: transparent;
  --promo-pill-fg: var(--bk-hot);
  --promo-rule: rgba(255, 210, 63, 0.55);
  --promo-rule-hover: var(--bk-hot);
  box-shadow: 0 14px 34px -20px rgba(255, 210, 63, 0.35);
  font-family: var(--bk-font);
}
html[data-skin="black"] .promo-banner--top::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: var(--bk-cometa); background-size: 120px 100%, 100% 100%;
  animation: bk-cometa 3.2s linear infinite;
}
html[data-skin="black"] .promo-banner--top .promo-banner__tag { padding: 0; gap: 0.55rem; letter-spacing: 0.22em; }
html[data-skin="black"] .promo-banner--top .promo-banner__alert { display: none; }
.bk-fw--promo { font-size: 0.86rem; }

/* ─── 3. Letreiro do hero ───────────────────────────────────────────── */
.bk-sign {
  position: relative; z-index: 2; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  width: fit-content;
  margin: 0 0 1.4rem;
  padding: 0.75rem 1rem 1.05rem;
  border-radius: 12px;
  background: var(--bk-black);
  box-shadow: 0 0 0 1px var(--bk-line), 0 18px 44px -20px rgba(255, 210, 63, 0.5);
}
/* Hero com texto centralizado: o letreiro acompanha. */
.bk-sign--c { margin-inline: auto; }
.bk-sign::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--bk-cometa); background-size: 120px 100%, 100% 100%;
  animation: bk-cometa 3.2s linear infinite;
}
.bk-sign__pm {
  font-family: var(--bk-font); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--bk-hot);
}
/* Hero centralizado nesta página: o letreiro acompanha. */
html[data-skin="black"] .hero .bk-sign { margin-inline: auto; align-items: center; }

/* ─── 4. Fitas entre as seções ──────────────────────────────────────── */
.bk-tape {
  position: relative; z-index: 2; overflow: hidden;
  padding: 7px 0;
  background: #000;
  font-family: var(--bk-font);
}
.bk-tape::before,
.bk-tape::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--bk-cometa); background-size: 120px 100%, 100% 100%;
  animation: bk-cometa 3.2s linear infinite;
}
.bk-tape::before { top: 0; }
.bk-tape::after { bottom: 0; animation-direction: reverse; }
.bk-tape__lane { white-space: nowrap; padding: 0.5rem 0; }
.bk-tape__lane span {
  display: inline-block;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3em;
  color: var(--bk-hot);
  animation: bk-marquee 60s linear infinite;
}
@keyframes bk-marquee { to { transform: translateX(-50%); } }

/* ─── 5. Selo acima do título das seções ────────────────────────────── */
.bk-tag {
  display: flex; align-items: center; gap: 0.55rem;
  width: fit-content;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  border-radius: 7px;
  background: var(--bk-black);
  box-shadow: 0 0 0 1px var(--bk-line);
}
.bk-tag--c { margin-inline: auto; }
.bk-tag__pm {
  font-family: var(--bk-font); font-weight: 800; font-size: 0.6rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--bk-hot);
}

/* ─── 6. Preços ─────────────────────────────────────────────────────── */
/* Ingresso: canhoto amarelo com o letreiro, corpo preto com a contagem,
   picote entre os dois e os recortes redondos nas bordas. */
.bk-ticket {
  display: flex; width: fit-content; max-width: 100%;
  margin: 0 auto 2.2rem;
  font-family: var(--bk-font);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.bk-ticket__a,
.bk-ticket__b {
  display: flex; flex-direction: column; justify-content: center; gap: 0.45rem;
  padding: 1rem 1.3rem;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.bk-ticket__a {
  align-items: center;
  border-radius: 14px 0 0 14px;
  background: var(--bk-hot);
  -webkit-mask: radial-gradient(circle 10px at 100% 0, #0000 98%, #000), radial-gradient(circle 10px at 100% 100%, #0000 98%, #000);
          mask: radial-gradient(circle 10px at 100% 0, #0000 98%, #000), radial-gradient(circle 10px at 100% 100%, #0000 98%, #000);
}
.bk-ticket__b {
  align-items: flex-start;
  border-radius: 0 14px 14px 0;
  border-left: 2px dashed rgba(255, 210, 63, 0.55);
  background: #000;
  -webkit-mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000), radial-gradient(circle 10px at 0 100%, #0000 98%, #000);
          mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000), radial-gradient(circle 10px at 0 100%, #0000 98%, #000);
}
.bk-ticket__pm {
  font-weight: 900; font-size: 0.72rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: #111;
}
.bk-ticket__lbl {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bk-ink-2);
}

/* Plano de preço com elemento da skin (ingresso, selo). min-width: 0
   impede que eles alarguem o plano dentro do grid. */
.bk-card { position: relative; overflow: visible !important; min-width: 0; }

/* Dentro de um plano o ingresso fica em pé, para caber na largura dele. */
.bk-card .bk-ticket { flex-direction: column; width: 100%; margin: 1rem 0 1.4rem; }
.bk-card .bk-ticket__a {
  border-radius: 14px 14px 0 0;
  -webkit-mask: radial-gradient(circle 10px at 0 100%, #0000 98%, #000), radial-gradient(circle 10px at 100% 100%, #0000 98%, #000);
          mask: radial-gradient(circle 10px at 0 100%, #0000 98%, #000), radial-gradient(circle 10px at 100% 100%, #0000 98%, #000);
}
.bk-card .bk-ticket__b {
  align-items: center;
  border-radius: 0 0 14px 14px;
  border-left: 0; border-top: 2px dashed rgba(255, 210, 63, 0.55);
  -webkit-mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000), radial-gradient(circle 10px at 100% 0, #0000 98%, #000);
          mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000), radial-gradient(circle 10px at 100% 0, #0000 98%, #000);
}
.bk-card .bk-cd--lg .bk-flap { font-size: 1.25rem; }

/* Selo giratório no plano em destaque. */
.bk-seal {
  position: absolute; top: -34px; right: -26px; z-index: 4;
  width: 96px; height: 96px;
  pointer-events: none;
}
.bk-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: bk-spin 14s linear infinite; }
.bk-seal text { font: 800 10.5px var(--bk-font); letter-spacing: 1.5px; fill: var(--bk-hot); }
/* Disco preto atrás do texto, para ele ler sobre qualquer fundo. */
.bk-seal::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #000; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}
.bk-seal__c {
  position: absolute; inset: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bk-hot); color: #111;
  font: 900 0.72rem var(--bk-font); letter-spacing: 0.08em;
  animation: bk-pulse 2.4s ease-in-out infinite;
}
/* Plano que já tem selo próprio no topo: o da Black desce para o canto
   de baixo, onde não disputa com ele nem com a etiqueta do plano. */
.bk-seal--b { top: auto; bottom: -30px; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-pulse { 50% { transform: scale(1.07); } }

/* Preço antigo: o risco vermelho é desenhado ao entrar na tela. */
/* O risco fica num span interno, para medir só o texto e não a largura
   inteira do bloco em que o preço antigo está. */
.bk-strike-host, .bk-strike-host s { text-decoration: none !important; }
.bk-strike { position: relative; }
.bk-strike::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 52%;
  height: 2px; border-radius: 2px; background: var(--bk-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s 0.2s cubic-bezier(0.6, 0, 0.3, 1);
}
.bk-strike.bk-on::after { transform: scaleX(1); }

/* ─── Celular ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bk-fw--hero { font-size: 1.6rem; }
  .bk-fw--ticket { font-size: 1.25rem; }
  .bk-cd--lg { gap: 0.45rem; }
  .bk-cd--lg .bk-flap { font-size: 1.2rem; }
  .bk-tape__lane span { font-size: 0.68rem; }

  /* Ingresso em pé: os recortes passam para a emenda horizontal. */
  .bk-ticket { flex-direction: column; width: 100%; }
  .bk-ticket__a {
    border-radius: 14px 14px 0 0;
    -webkit-mask: radial-gradient(circle 10px at 0 100%, #0000 98%, #000), radial-gradient(circle 10px at 100% 100%, #0000 98%, #000);
            mask: radial-gradient(circle 10px at 0 100%, #0000 98%, #000), radial-gradient(circle 10px at 100% 100%, #0000 98%, #000);
  }
  .bk-ticket__b {
    align-items: center;
    border-radius: 0 0 14px 14px;
    border-left: 0; border-top: 2px dashed rgba(255, 210, 63, 0.55);
    -webkit-mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000), radial-gradient(circle 10px at 100% 0, #0000 98%, #000);
            mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000), radial-gradient(circle 10px at 100% 0, #0000 98%, #000);
  }

  /* O selo não pode passar da borda da tela (rolagem lateral). */
  .bk-seal { width: 78px; height: 78px; top: -30px; right: -4px; }
  .bk-seal--b { top: auto; bottom: -26px; }
  .bk-seal__c { inset: 18px; font-size: 0.6rem; }
  .bk-seal text { font-size: 9px; }
}

/* ─── Celular: ajuste fino (até 480 px) ──────────────────────────────
   Medido a 320, 360 e 390 px: nada da skin pode passar da largura da tela
   nem ficar com alvo de toque pequeno. */
@media (max-width: 480px) {
  /* Ingresso: a contagem grande não quebra linha. */
  .bk-ticket .bk-cd--lg { gap: 0.35rem; }
}
@media (max-width: 360px) {
  .bk-ticket__lbl { font-size: 0.6rem; letter-spacing: 0.1em; white-space: nowrap; }
  .bk-promo__link, html[data-skin="black"] .promo-banner--top .promo-banner__link { font-size: 0.82rem; }
  .bk-cd--lg .bk-flap,
  .bk-card .bk-cd--lg .bk-flap { font-size: 1.02rem; }
  .bk-cd--lg .bk-cd__u { font-size: 0.6rem; }
}

/* ─── Celular: primeira tela mais enxuta (até 620 px) ────────────────
   No celular a faixa do topo, a faixa de desconto e o letreiro do hero
   repetiam BLACK e a data, empurrando o título da LP para baixo. A faixa
   de cima segue completa; a de desconto fica só com o desconto e o botão,
   e o letreiro do hero vira uma linha. */
@media (max-width: 620px) {
  .bk-promo__tag,
  html[data-skin="black"] .promo-banner--top .promo-banner__tag { display: none; }
  .bk-promo__link { padding: 0.6rem 1rem; font-size: 0.9rem; gap: 0.2rem 0.7rem; }
  html[data-skin="black"] .promo-banner--top { --promo-pad: 0.6rem; --promo-size: 0.9rem; }

  .bk-sign {
    flex-direction: row; align-items: center; gap: 0.7rem;
    padding: 0.5rem 0.75rem 0.65rem; margin-bottom: 1rem; border-radius: 10px;
  }
  .bk-sign .bk-fw--hero { font-size: 1.15rem; }
  .bk-sign__pm { font-size: 0.6rem; letter-spacing: 0.2em; }
}

/* Faixa de desconto no celular: o texto quebra em linhas equilibradas à
   esquerda e o "Aproveitar" vira um botão ao lado, em vez de cair sozinho
   numa linha de baixo. */
@media (max-width: 620px) {
  .bk-promo__link,
  html[data-skin="black"] .promo-banner--top .promo-banner__link {
    flex-wrap: nowrap; justify-content: space-between; gap: 0.8rem; text-align: left;
  }
  .bk-promo__text,
  html[data-skin="black"] .promo-banner--top .promo-banner__text {
    min-width: 0; line-height: 1.3; text-wrap: balance;
  }
  .bk-promo__cta,
  html[data-skin="black"] .promo-banner--top .promo-banner__cta {
    flex: none; gap: 0.3rem;
    padding: 0.45rem 0.8rem; border: 0; border-radius: 999px;
    background: var(--bk-hot); color: #111; font-size: 0.78rem;
  }
}

/* Faixa de desconto no celular, versão final: o letreiro BLACK volta, pequeno,
   acima do desconto, e o botão ocupa a coluna da direita nas duas linhas. A
   data fica só na faixa de cima, para não repetir. */
@media (max-width: 620px) {
  .bk-promo__link,
  html[data-skin="black"] .promo-banner--top .promo-banner__link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 0.8rem; row-gap: 0.3rem;
  }
  .bk-promo__tag,
  html[data-skin="black"] .promo-banner--top .promo-banner__tag {
    display: inline-flex; grid-column: 1; justify-self: start;
  }
  .bk-promo__tag > span:not(.bk-fw),
  html[data-skin="black"] .promo-banner--top .bk-promo__pm { display: none; }
  .bk-fw--promo { font-size: 0.84rem; }
  .bk-promo__text,
  html[data-skin="black"] .promo-banner--top .promo-banner__text { grid-column: 1; }
  .bk-promo__cta,
  html[data-skin="black"] .promo-banner--top .promo-banner__cta { grid-column: 2; grid-row: 1 / span 2; }
}

/* Letreiro do hero em telas de até 360 px: uma linha que cabe. Vem depois
   do bloco de 620 px para ganhar dele. */
@media (max-width: 360px) {
  .bk-sign { gap: 0.5rem; padding: 0.45rem 0.6rem 0.6rem; max-width: 100%; }
  .bk-sign .bk-fw--hero { font-size: 0.98rem; }
  .bk-sign__pm { font-size: 0.55rem; letter-spacing: 0.14em; white-space: nowrap; }
}

/* ─── Fases do prazo ───────────────────────────────────────────────────
   Longe do fim o ingresso fica só com o letreiro (sem a parte da
   contagem). Nas últimas 48 h a contagem esquenta: placas vermelhas e
   "Últimas horas" no lugar de "Termina em". */
.bk-ticket.bk-ticket--so .bk-ticket__a,
.bk-card .bk-ticket.bk-ticket--so .bk-ticket__a {
  border-radius: 14px; -webkit-mask: none; mask: none;
}
html[data-skin-fase="final"] .bk-bar {
  background:
    radial-gradient(55% 160% at 50% 0%, rgba(255, 77, 61, 0.3), transparent 70%),
    var(--bk-black);
}
html[data-skin-fase="final"] .bk-bar__lbl,
html[data-skin-fase="final"] .bk-ticket__lbl { color: var(--bk-red); }
html[data-skin-fase="final"] .bk-flap {
  color: #fff;
  background: linear-gradient(180deg, #b3160c 0 49%, #8c0f07 51% 100%);
}
html[data-skin-fase="final"] .bk-bar .bk-flap { font-size: 0.95rem; }

/* ─── Cards de valor ────────────────────────────────────────────────────
   Plano em destaque: borda neon girando (anel com máscara, que funciona
   sobre qualquer fundo de card), brilho em volta, holofote por cima e a
   faixa amarela de economia. Planos secundários: contorno parado e a
   economia em pílula. */
@property --bk-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes bk-gira { to { --bk-ang: 360deg; } }
.bk-neon {
  /* z-index 1: acima do fundo do card, abaixo de qualquer selo ou etiqueta
     posicionada que a LP pendure na borda. */
  position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--bk-ang), var(--bk-hot), var(--bk-red), transparent 30%,
    transparent 50%, var(--bk-hot) 65%, var(--bk-red) 80%, var(--bk-hot));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bk-gira 3.5s linear infinite;
}
.bk-card--top {
  box-shadow: 0 0 46px -8px rgba(255, 210, 63, 0.5), 0 30px 60px -28px rgba(255, 210, 63, 0.45) !important;
}
/* O que a LP pendura na borda do card (selo "Melhor custo-benefício", etiqueta
   de desconto) fica por cima do anel neon. z-index só vale para elemento
   posicionado: o resto do conteúdo não muda. */
.bk-card > :not(.bk-neon):not(.bk-luz):not(.bk-seal) { z-index: 4; }
.bk-card--sec .bk-neon {
  inset: -1px; padding: 1px; animation: none;
  background: linear-gradient(rgba(255, 210, 63, 0.4), rgba(255, 210, 63, 0.12));
}
/* Holofote: cone de luz amarela logo acima do plano, pulsando devagar. */
.bk-luz {
  position: absolute; left: 50%; bottom: 100%; z-index: 2; pointer-events: none;
  width: 100%; height: 160px; transform: translateX(-50%);
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 210, 63, 0.4), transparent 72%);
  animation: bk-luz 3s ease-in-out infinite;
}
@keyframes bk-luz { 50% { opacity: 0.5; } }
.bk-eco {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: baseline; gap: 0.7rem;
  margin: 0.9rem 0; padding: 0.7rem 1.2rem;
  background: var(--bk-hot); color: #111;
  font-family: var(--bk-font); text-align: left;
}
.bk-eco small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.bk-eco b { font-size: 1.02rem; font-weight: 900; white-space: nowrap; }
.bk-eco--sec {
  display: inline-flex; margin: 0.6rem 0; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: #000; color: var(--bk-hot); box-shadow: 0 0 0 1px rgba(255, 210, 63, 0.4);
}
.bk-eco--sec small { font-size: 0.56rem; white-space: nowrap; }
.bk-eco--sec b { font-size: 0.84rem; }

/* Sem animação: tudo montado e parado, sem abertura nem fitas correndo. */
@media (prefers-reduced-motion: reduce) {
  .bk-fw__p { transform: none; opacity: 1; }
  .bk-bar__st,
  .bk-neon, .bk-luz,
  .bk-fw.bk-on .bk-fw__p, .bk-flap--go, .bk-tape__lane span, .bk-seal svg, .bk-seal__c,
  .bk-bar::after, .bk-sign::after, .bk-tape::before, .bk-tape::after,
  html[data-skin="black"] .promo-banner--top::before { animation: none !important; }
  .bk-strike::after { transform: scaleX(1); transition: none; }
}