/* Black November Touch Store: camada de tema ligada por <html class="bn">.
   Tudo em preto e branco. Sem a classe, nada daqui muda o site (só esconde os blocos .bn-only). */
.bn-only{display:none}
.bn .bn-hide{display:none!important}
.bn span.bn-only,.bn b.bn-only,.bn i.bn-only{display:inline}
.bn div.bn-only,.bn p.bn-only,.bn h2.bn-only{display:block}
.bn .eyebrow.bn-only{display:inline-flex}
.bn .marquee.bn-only{display:block}

.bn{
  --bg:#000;
  --bg-2:#000;
  --card:#0a0a0a;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --text:#fff;
  --muted:#9a9a9a;
}
.bn body{background:#000}

/* fotos em preto e branco */
.bn :where(img:not(.logo img,.hr-g)),.bn :where(.final-card .bg){filter:grayscale(1) contrast(1.12);transition:filter .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
/* passou o mouse no card: a foto ganha cor */
.bn :is(.fila-membro,.prod,.benefit,.decade > *,.rv-card,.loc-info,.map,.final-card):hover :is(img,.bg){filter:none}
/* no celular (sem mouse) a foto ganha cor quando o card está no meio da tela */
.bn .cor img,.bn .cor .bg{filter:none}
.bn .hero-sticky::after{background:radial-gradient(60% 55% at 50% 38%,rgba(0,0,0,.82),rgba(0,0,0,.45) 70%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 34%,rgba(0,0,0,.5) 62%,#000 100%);opacity:calc(1 - var(--hp,0) * .45)}

.bn .nav.scrolled,.bn .nav.on{background:rgba(0,0,0,.85)}

/* topo */
.bn .bn-hero{margin:4px 0 22px}
.bn .bn-titulo{display:flex;flex-direction:column;align-items:center;font:800 clamp(64px,13vw,210px)/.84 Sora;letter-spacing:-.06em;text-transform:uppercase}
/* BLACK branco com um brilho roxo que passa; ao rolar a página ele "voa" para a tela */
.bn .bn-black{color:transparent;background:linear-gradient(100deg,#fff 0 38%,#f0d4ff 44%,#d417ff 50%,#f0d4ff 56%,#fff 62% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;
  animation:bnPan 4.5s ease-in-out infinite;filter:drop-shadow(0 10px 50px rgba(212,23,255,.35));
  transform:scale(calc(1 + var(--hp,0) * 2.4));opacity:calc(1 - var(--hp,0) * 2.6);transform-origin:50% 60%;will-change:transform,opacity}
.bn .bn-november{color:#fff;font-size:.56em;letter-spacing:.08em;margin-top:.12em;text-shadow:0 4px 30px rgba(0,0,0,.7);transform:translateY(calc(var(--hp,0) * -120%));will-change:transform}
@keyframes bnPan{0%{background-position:100% 0}60%,100%{background-position:0 0}}
/* selo girando */
.bn div.bn-selo{position:absolute;z-index:2;right:max(24px,6vw);bottom:clamp(110px,16vh,170px);width:150px;height:150px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--purple) 55%,var(--purple-deep));box-shadow:0 20px 60px -10px rgba(212,23,255,.6);transform:rotate(-12deg)}
.bn .bn-selo svg{position:absolute;inset:0;width:100%;height:100%;animation:bnGira 18s linear infinite}
.bn .bn-selo text{font:800 17px Sora;fill:#fff}
.bn .bn-selo b{font:800 20px/1 Sora;text-align:center;color:#fff;letter-spacing:-.02em}
.bn .bn-selo b small{display:block;font:700 10px/1.4 Manrope;letter-spacing:.2em;opacity:.85}
@keyframes bnGira{to{transform:rotate(360deg)}}
.bn .bn-sub{margin-top:22px;color:#fff;font-weight:600;text-shadow:0 2px 16px rgba(0,0,0,.9);font-size:clamp(16px,1.6vw,20px);max-width:540px;margin-inline:auto}
.bn .hero-kicker,.bn .eyebrow,.bn .ft-item small,.bn .prod .tag{color:#fff}
.bn .grad,.bn .hero .tagline em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.bn .hero-progress i{background:#fff}
.bn .hero-rating{background:rgba(0,0,0,.7)}
.bn .hero-rating i{color:#fff;text-shadow:none}

/* botões: roxos da marca, para dar vida ao preto e branco */
.bn .fab{background:linear-gradient(135deg,var(--violet),var(--purple) 55%,var(--purple-deep));color:#fff;box-shadow:0 14px 34px -8px rgba(212,23,255,.55)}

/* faixa que corre: branca, letras pretas */
.bn .bn-marquee{background:#fff;border:0;padding:18px 0}
.bn .bn-marquee .track span{color:#000;font:800 clamp(20px,2.4vw,30px)/1 Sora;text-transform:uppercase;letter-spacing:-.01em}
.bn .marquee span::after{background:#000;box-shadow:none}

/* cartões e detalhes: contornos brancos no lugar do roxo */
.bn .benefit .ico,.bn .ft-ic{background:#000;border-color:var(--line-2)}
.bn .benefit .ico svg,.bn .ft-ic svg,.bn .loc-row svg{stroke:#fff}
.bn .benefit::after{display:none}
.bn :is(.benefit,.prod,.rv-card,.faq-item[open],.fila-membro):hover,.bn .faq-item[open]{border-color:#fff;box-shadow:none}
.bn .prod:nth-child(1){background:linear-gradient(160deg,#1a1a1a,#000)}
.bn .decade .big{background:#fff;color:#000;border:0}
.bn .decade .big *{color:#000}
.bn .prod .go,.bn .rv-all,.bn .rv-card blockquote b{color:#fff}
.bn .rv-av{background:#fff;color:#000}
.bn .rv-dots i.on{background:#fff}
.bn .faq-ic::before,.bn .faq-ic::after{background:#fff}
.bn .footer{background:#000}

/* chamada final */
.bn .final-card{background:#000;border:1px solid #fff}
.bn .final-card::before{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.92))}
.bn .final-card .bg{opacity:.35;mix-blend-mode:normal}
.bn .final-card p{color:#ddd}
.bn .final-card .btn-primary{background:linear-gradient(135deg,var(--violet),var(--purple) 55%,var(--purple-deep));color:#fff;box-shadow:0 14px 40px -10px rgba(212,23,255,.55)}

/* formulário do vendedor */
.bn .lm-card{background:#0a0a0a;border-color:var(--line-2)}
.bn .lm-head img{border-color:#fff}
.bn .lm-chip input:checked + span{background:#fff;border-color:#fff;color:#000}
.bn .lm-field input:focus{border-color:#fff}

@keyframes arrivePop{0%{opacity:.35;transform:translateY(18px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes arriveGlow{0%,100%{text-shadow:none}}

@media (max-width:680px){
  .bn .bn-titulo{font-size:clamp(52px,17vw,72px)}
  .bn div.bn-selo{width:96px;height:96px;bottom:calc(120px + (100lvh - 100svh));right:14px}
  .bn .bn-selo b{font-size:14px}
  .bn .bn-selo b small{font-size:7px}
}
@media (prefers-reduced-motion:reduce){.bn .bn-black,.bn .bn-selo svg{animation:none}}