/* ==========================================================================
   Black Wissence — tema de campanha para o site inteiro
   Repinta o site (preto + ouro, títulos em Anton) por cima de base.css e
   site.css, sem tocar neles. A landing black-wissence.html tem estilo
   próprio e fica de fora (body.page-bw).

   PARA DESLIGAR quando a campanha acabar, em _src/partials/head.html:
     1. apagar o <link> deste arquivo e o das fontes Anton/Space Grotesk;
     2. apagar o bloco <a class="bf-ribbon">;
     3. rodar python3 build.py.
   ========================================================================== */

body:not(.page-bw) {
  /* --- Paleta da campanha (mesma da landing) --- */
  --bf-gold:   #F2BE45;
  --bf-gold-2: #FFE08A;
  --bf-gold-d: #B8862A;
  --bf-text:   #F4EFE6;
  --bf-soft:   #A39E96;

  /* --- Tokens do site, reapontados --- */
  --cream:        var(--bf-text);
  --cream-deep:   #111111;
  --sand:         var(--bf-gold-2);
  --brown:        #000000;
  --brown-char:   #0A0A0A;
  --brown-mid:    var(--bf-gold);
  --brown-deep:   #0A0A0A;
  --brown-soft:   var(--bf-soft);
  --olive:        var(--bf-gold);

  --bg:           #000000;
  --bg-alt:       #080808;
  --surface:      #111111;
  --ink:          var(--bf-text);
  --ink-soft:     var(--bf-soft);
  --accent:       var(--bf-gold);
  --accent-hover: var(--bf-gold-2);
  --line:         rgba(244, 239, 230, .12);
  --line-soft:    rgba(244, 239, 230, .08);
  --shadow-sm:    0 4px 16px rgba(0, 0, 0, .5);
  --shadow-md:    0 18px 46px rgba(0, 0, 0, .65), 0 0 24px rgba(242, 190, 69, .08);

  --font-display: "Anton", "Impact", sans-serif;
  --font-body:    "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius:       20px;

  background: #000;
  color: var(--ink);
  font-family: var(--font-body);
  color-scheme: dark;
}
body:not(.page-bw) ::selection { background: var(--bf-gold); color: #000; }

/* --- Títulos: impacto de Black Friday --- */
body:not(.page-bw) :is(h1, h2) {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .98;
}
body:not(.page-bw) h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }

/* Anton não tem itálico: o destaque vira ouro com brilho correndo. */
body:not(.page-bw) em,
body:not(.page-bw) .accent-italic { font-style: normal; }
body:not(.page-bw) :is(h1, h2) em {
  font-family: var(--font-display);
  color: transparent !important;
  background: linear-gradient(100deg, var(--bf-gold-d), var(--bf-gold) 30%, var(--bf-gold-2) 50%, var(--bf-gold) 70%, var(--bf-gold-d));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: bf-sheen 5s linear infinite;
}
@keyframes bf-sheen { to { background-position: -200% 0; } }
/* No texto corrido o destaque fica na fonte do texto, em ouro. */
body:not(.page-bw) :is(p, li, span, a) em { font-family: var(--font-body); font-weight: 600; color: var(--bf-gold); }
body:not(.page-bw) .step::before { color: rgba(242,190,69,.55); font-size: 2rem; }
body:not(.page-bw) .step h3 { padding-right: 3.2rem; overflow-wrap: anywhere; }
body:not(.page-bw) .hero__note { font-family: var(--font-body); font-style: normal; color: var(--bf-gold-2); }

/* --- Rótulos em pílula, como na landing --- */
body:not(.page-bw) .eyebrow {
  display: inline-flex; align-items: center;
  padding: .4rem .95rem;
  border: 1px solid rgba(242,190,69,.35); border-radius: 999px;
  background: rgba(242,190,69,.07);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  color: var(--bf-gold) !important;
}

/* --- Fundo com grade fina nas seções alternadas --- */
body:not(.page-bw) .section--alt {
  background:
    linear-gradient(rgba(244,239,230,.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(244,239,230,.035) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--bg-alt);
  border-block: 1px solid var(--line-soft);
}
body:not(.page-bw) .section--dark { background: #050505; border-block: 1px solid rgba(242,190,69,.14); }

/* --- Botões --- */
body:not(.page-bw) .btn { font-weight: 700; letter-spacing: .04em; }
body:not(.page-bw) .btn--primary,
body:not(.page-bw) .btn--dark { background: var(--bf-gold); color: #000; box-shadow: 0 0 0 0 rgba(242,190,69,0); }
body:not(.page-bw) .btn--primary:hover,
body:not(.page-bw) .btn--dark:hover { background: var(--bf-gold-2); color: #000; box-shadow: 0 0 24px rgba(242,190,69,.45); }
body:not(.page-bw) .btn--light { background: var(--bf-text); color: #000; }
body:not(.page-bw) .btn--light:hover { background: #fff; }
body:not(.page-bw) .btn--ghost { border-color: rgba(242,190,69,.45); color: var(--bf-text); }
body:not(.page-bw) .btn--ghost:hover { border-color: var(--bf-gold); color: var(--bf-gold); }
body:not(.page-bw) .pills a:hover { color: #000; }

/* --- Cabeçalho --- */
body:not(.page-bw) .header::before { background: linear-gradient(to bottom, rgba(0,0,0,.8), transparent); }
body:not(.page-bw) .header.is-stuck { background: rgba(0,0,0,.82); border-bottom-color: rgba(242,190,69,.2); }
body:not(.page-bw) .header.is-stuck .brand__light { display: block; }
body:not(.page-bw) .header.is-stuck .brand__dark  { display: none; }
@media (max-width: 1024px) {
  body:not(.page-bw) .nav { background: #070707; border-bottom-color: rgba(242,190,69,.2); }
}

/* --- Hero: foto mais escura, base preta --- */
body:not(.page-bw) .hero__media::after {
  background: linear-gradient(to top, #000 6%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.7) 100%);
}
body:not(.page-bw) .hero .lead { color: rgba(244,239,230,.82); }

/* --- Cartões: borda que acende no hover --- */
body:not(.page-bw) :is(.card, .step, .review, .unit, .doctor) { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
body:not(.page-bw) :is(.card, .step, .review):hover { border-color: rgba(242,190,69,.5); }
body:not(.page-bw) .card__icon { background: rgba(242,190,69,.12); color: var(--bf-gold); }
body:not(.page-bw) .stat__num { color: var(--bf-gold); text-shadow: 0 0 24px rgba(242,190,69,.3); }

/* --- Tabela e faixa de CTA --- */
body:not(.page-bw) .table thead th { background: #000; color: var(--bf-gold); }
body:not(.page-bw) .table tbody tr:last-child { background: rgba(242,190,69,.14); color: var(--bf-text); }
body:not(.page-bw) .cta-band {
  background: radial-gradient(120% 140% at 50% 0%, rgba(242,190,69,.16), transparent 60%), #0A0A0A;
  border: 1px solid rgba(242,190,69,.3);
}

/* --- Newsletter e rodapé --- */
body:not(.page-bw) .newsletter { border-top: 1px solid var(--line-soft); }
body:not(.page-bw) .newsletter__form input::placeholder { color: rgba(244,239,230,.5); }
body:not(.page-bw) .footer { background: #000; border-top: 1px solid var(--line-soft); }
body:not(.page-bw) .socials a:hover { color: #000; }

/* --- Faixa da campanha no topo (link para a landing) --- */
.bf-ribbon {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  height: 36px; padding-inline: 1rem;
  background: var(--bf-gold, #F2BE45); color: #000 !important;
  font-family: "Anton", "Impact", sans-serif; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.bf-ribbon b { font-weight: 400; }
.bf-ribbon i {
  font-style: normal; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .12em;
  padding: .2rem .7rem; border-radius: 999px; background: #000; color: var(--bf-gold, #F2BE45);
  transition: background .3s, color .3s;
}
.bf-ribbon:hover i { background: #fff; color: #000; }
.page-bw .bf-ribbon { display: none; }
@media (max-width: 1024px) {
  body:not(.page-bw) .nav { inset: 118px 0 auto 0; }
}
@media (max-width: 560px) {
  .bf-ribbon { font-size: .82rem; gap: .6rem; }
  .bf-ribbon .bf-ribbon__extra { display: none; }
}

/* --- Item "Black Wissence" no menu, antes da Home --- */
.nav__link--black {
  font-family: "Anton", "Impact", sans-serif; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  color: #F2BE45 !important;
}
.nav__link--black::before { content: "✦ "; }
.nav__link--black[aria-current="page"] { color: #FFE08A !important; }

/* --- Balão do chat igual ao da landing --- */
body:not(.page-bw) .wcw-bubble { --wcw-ring: 244, 239, 230; background: var(--bf-text); color: #000; box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 2px var(--bf-gold); }

@media (prefers-reduced-motion: reduce) {
  body:not(.page-bw) :is(h1, h2) em { animation: none; }
}

/* Com o item da campanha o menu ganha um link: sem quebra de linha e com
   espaço menor entre 1025 e 1240px, onde ele mais aperta. */
body .nav__link, body .header .btn { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1240px) {
  body .nav { gap: 1.1rem; }
  body .nav__list { gap: .95rem; }
  body .nav__link { font-size: .86rem; }
  body .header .btn--primary { padding: .65rem 1.05rem; }
}