/* TURBINA V3 — skin Black Friday 2026
   Carregado depois de sections.css, só na página /black-friday.
   Segue a linguagem do bloco escuro que o próprio sistema já tem (seção
   "método"): título branco, destaque ciano, texto creme a ~80%. Os blocos
   alternam dois pretos quentes no lugar de ciano/laranja/marrom, e as faixas
   de mandala trocam pelo desenho com "BLACK FRIDAY 2026" no mesmo traço. */

html.bf {
  --bf-black: #0E0B08;            /* preto profundo, puxado pro marrom da marca */
  --bf-card: #241D16;
  --bf-card-2: #2E251C;
  --bf-cream: #FFF8F0;

  --bg: var(--bf-black);
  --bg-1: var(--bf-card);
  --bg-2: var(--bf-card-2);
  --text: var(--bf-cream);
  --muted: #CDBFB1;
  --faint: #9A8B7D;

  --glass-bg: var(--bf-card);
  --glass-bg-2: var(--bf-card-2);
  --glass-brd: rgba(255, 248, 240, 0.10);
  --glass-brd-2: rgba(128, 236, 255, 0.35);
  --hairline: rgba(255, 248, 240, 0.09);
  --shadow-card: 0 18px 40px -22px rgba(0, 0, 0, 0.85);
  --shadow-deep: 0 34px 80px -30px rgba(0, 0, 0, 0.9);
  --strike: #FF8A70;

  color-scheme: dark;
  scrollbar-color: var(--bf-card-2) var(--bf-black);
}
html.bf ::selection { background: var(--cyan); color: var(--ink); }

/* Mandalas Black Friday (mesmo encaixe/repetição das originais) */
html.bf .band--branca { background-image: url(../assets/bf/mandala-bf-branca.png); }
html.bf .band--ciana { background-image: url(../assets/bf/mandala-bf-ciana.png); }

/* Destaques: vermelho some no preto (contraste < 3:1), ciano assume */
html.bf .hl,
html.bf .hl-strong { color: var(--cyan); }
html.bf .hero__copy h1 .hl-strong { color: #fff; }

/* Títulos de seção: marrom/ink viram branco, como na seção "método" */
html.bf .story .section-head h2,
html.bf .inside .section-head h2,
html.bf .chat-sec .section-head h2,
html.bf .offer .section-head h2,
html.bf .faq-sec .section-head h2 { color: #fff; }

/* Ritmo de blocos: dois pretos alternando */
html.bf .story,
html.bf .chat-sec,
html.bf .faq-sec { background: var(--bf-black); }
html.bf .inside,
html.bf .offer { background: var(--ink); }
html.bf .offer {
  background:
    radial-gradient(60rem 30rem at 50% 0%, rgba(128, 236, 255, 0.12), transparent 70%),
    var(--ink);
}

/* Detalhes que estavam em marrom sobre claro */
html.bf .level__icon { color: var(--cyan); border-color: rgba(128, 236, 255, 0.25); }
html.bf .level__bar { background: rgba(255, 248, 240, 0.10); }
html.bf .offer__deliver h3 { color: var(--cyan); }
html.bf .deliver__sub { border-top-color: rgba(128, 236, 255, 0.45) !important; }
html.bf .deliver__price { text-decoration-color: var(--strike); }
html.bf .faq__chev { color: var(--cyan); }
html.bf .chat__day { background: rgba(30, 25, 19, 0.12); }

/* Hero: arte da Black Friday (Gaby de preto, mesmo enquadramento) */
html.bf .hero__overlay {
  background:
    linear-gradient(90deg, rgba(14, 11, 8, 0.8) 6%, rgba(14, 11, 8, 0.5) 30%, rgba(14, 11, 8, 0.08) 52%, transparent 72%),
    linear-gradient(180deg, rgba(14, 11, 8, 0.3) 0%, transparent 24%, transparent 60%, var(--bf-black) 96%);
}

/* Etiqueta "Black Friday" — o .chip do sistema, em vermelho */
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem 0.45rem 0.55rem;
  border-radius: 13px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.bf-chip img { width: 22px; height: auto; }

/* Bloco de preço do hero: 50% grande, parcela ao lado */
.bf-deal {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin: 1.4rem 0 1.6rem;
  flex-wrap: wrap;
}
.bf-deal__off {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 4vw, 4.8rem);
  line-height: 0.9;
  color: var(--cyan);
  letter-spacing: -0.01em;
}
.bf-deal__off small { font-size: 0.42em; letter-spacing: 0.04em; margin-left: 0.08em; }
.bf-deal__price {
  border-left: 1px solid rgba(255, 248, 240, 0.25);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  line-height: 1.25;
  color: rgba(255, 248, 240, 0.85);
  font-size: var(--text-sm);
}
.bf-deal__price s { color: var(--strike); }
.bf-deal__price strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Cartão de preço: selo 50% espelhando o selo TB do outro canto */
html.bf .offer__price {
  background: var(--bf-black);
  border: 1px solid rgba(128, 236, 255, 0.35);
  box-shadow: 0 0 0 6px rgba(128, 236, 255, 0.06), var(--shadow-deep);
}
.bf-seal {
  position: absolute;
  top: -22px;
  left: -14px;
  width: clamp(86px, 9.5vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.85;
  transform: rotate(-10deg);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.7);
}
.bf-seal b { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; }
.bf-seal span { font-size: 0.8rem; letter-spacing: 0.12em; margin-top: 0.2rem; }
html.bf .offer__plan s { color: var(--strike); margin-left: 0.3rem; }

@media (max-width: 860px) {
  .bf-deal { justify-content: center; }
  .bf-chip { margin-inline: auto; }
}
.final__bf { margin-top: 1rem; color: rgba(255, 248, 240, 0.8); font-size: var(--text-lead); }

/* Rótulo de seção: marrom some no preto; laranja da marca mantém contraste */
html.bf .eyebrow { color: var(--orange); }

/* O bloco de preço deixa a coluna mais alta: o hero cresce e reserva a faixa */
html.bf .hero__inner { padding-bottom: calc(clamp(1.6rem, 3vh, 2.6rem) + clamp(40px, 5.5vw, 68px)); }
html.bf .hero__cta-row { margin-top: 0; }

@media (max-width: 860px) {
  .bf-seal { left: 8px; top: -30px; width: 76px; }
  html.bf .offer__price { padding-top: calc(var(--card-pad) + 1.4rem); }
}