/* Tema Black November 2026 no pnl.com.br: só faixa laranja do topo, cabeçalho e hero da home
   (decisão do Kauê em 26/10; o resto do site fica como está).
   Tudo escopado em body.bn-tema. A classe, este CSS, o tema.js e os parciais topo.php/hero-home.php
   só entram quando sbpnl_black_ativa() (functions.php): 01/11 00h00 a 13/11 23h59, horário de Brasília.
   Linguagem das landings da Black: navy granulado + rede laranja, preto, laranja #ff591f, creme,
   Besley nos títulos grandes, Figtree no resto (já é a fonte do site), botões em "folha". */

body.bn-tema {
    --bn-laranja: #ff591f;
    --bn-laranja-2: #ff6a33;
    --bn-navy: #0a1327;
    --bn-creme: #f2f2ee;
    --bn-tinta: #121212;
    --bn-serif: 'Besley', Georgia, serif;
    --bn-folha: 0 22px 0 22px;
    --bn-barra-h: 46px;
}

/* ── Faixa do topo com contagem ───────────────────────────── */
.bn-tema .bn-barra {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    height: var(--bn-barra-h); padding: 0 16px;
    background: var(--bn-laranja); color: #fff; text-decoration: none;
    font: 400 17px/1 'Figtree', sans-serif; white-space: nowrap; overflow: hidden;
}
.bn-tema .bn-barra b { font-weight: 900; }
.bn-tema .bn-ponto { display: inline-block; width: 6px; height: 6px; margin: 0 12px; border-radius: 50%; background: #fff; vertical-align: middle; }
.bn-tema .bn-contagem { font-variant-numeric: tabular-nums; }
.bn-tema .bn-barra-cta { padding: 7px 14px; border-radius: 0 14px 0 14px; background: #fff; color: #000; font-weight: 900; font-size: 14px; transition: background-color .2s, color .2s; }
.bn-tema .bn-barra:hover .bn-barra-cta { background: #000; color: #fff; }
/* o header do site é absoluto no topo da página: desce para não ficar embaixo da faixa */
body.bn-tema header { top: var(--bn-barra-h); }
body.bn-tema main { border-top-color: #000; }

/* fases (classe no <html>, posta pelo tema.js) */
.bn-tema [data-fase="2"] { display: none; }
.fase-2 .bn-tema [data-fase="1"] { display: none; }
.fase-2 .bn-tema [data-fase="2"] { display: inline; }
.fase-2 .bn-tema p[data-fase="2"] { display: block; }

/* ── Cabeçalho ─────────────────────────────────────────────── */
body.bn-tema header .contact-bar { background: #000; }
body.bn-tema header .contact-bar .phone span { color: #fff; }
body.bn-tema header .contact-bar .phone i { background: var(--bn-laranja); }
body.bn-tema header .contact-bar .phone:hover { background: var(--bn-laranja); }
body.bn-tema header nav .desktop-menu li a:hover { color: var(--bn-laranja); }
body.bn-tema header nav #mobile-menu-elastic #mobile-menu-list { background: var(--bn-navy); }

/* ── Hero da home ─────────────────────────────────────────── */
body.bn-tema #main-slider { display: none; }
.bn-tema .bn-hero { position: relative; min-height: 900px; overflow: hidden; color: #fff; background: #101c33; }
.bn-tema .bn-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; max-width: none; }
.bn-tema .bn-wrap { position: relative; max-width: 1248px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.bn-tema .bn-hero .bn-wrap { min-height: 900px; padding-top: 168px; padding-bottom: calc(70px + 6vw); }
.bn-tema .bn-hero-col { position: relative; z-index: 2; width: min(592px, 100%); }
.bn-tema .bn-marca { width: 196px; color: var(--bn-laranja); --tag-bg: #101c33; }
.bn-tema .bn-marca .tag-word, .bn-tema .bn-faixa-marca .tag-word { display: block; width: 100%; height: auto; overflow: visible; }
.bn-tema .tag-pct { fill: var(--tag-bg, #000); }
.bn-tema .bn-h1 { margin: 26px 0 0; font: 400 77px/.98 var(--bn-serif); letter-spacing: -.04em; color: #fff; }
.bn-tema .bn-h1 em { font-style: italic; font-weight: 900; color: var(--bn-laranja); letter-spacing: -.045em; }
.bn-tema .bn-kicker { margin: 24px 0 0; font: 400 14.6px/1.3 'Figtree', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.bn-tema .bn-caixa { margin-top: 28px; padding: 24px 26px 20px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 16px; background: rgba(8, 15, 32, .3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font: 500 14px/1.6 'Figtree', sans-serif; color: #fff; }
.bn-tema .bn-caixa p { margin: 0; color: #fff; }
.bn-tema .bn-rotulo { font-weight: 400; font-size: 14.2px; }
.bn-tema .bn-trava { display: inline-flex !important; align-items: center; gap: 10px; margin: 12px 0 14px !important; padding: 10px 18px 10px 14px; border: 1px solid var(--bn-laranja); border-radius: 22px; background: rgba(0, 0, 0, .78); font-size: 15.8px; line-height: 1.25; }
.bn-tema .bn-trava svg { width: 23px; height: 24px; flex: none; }
.bn-tema .bn-btn {
    background: var(--bn-laranja); border: 0; border-radius: var(--bn-folha); color: #fff; font-family: 'Figtree', sans-serif; font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.bn-tema .bn-btn:hover { background: var(--bn-laranja-2); box-shadow: 0 10px 26px rgba(255, 89, 31, .35); transform: translateY(-1px); color: #fff; }
.bn-tema .bn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 10px 28px; text-decoration: none; font-size: 21px; line-height: 1.1; cursor: pointer; box-sizing: border-box; }
.bn-tema .bn-btn-largo { width: 100%; margin-top: 13px; }
.bn-tema .bn-micro { margin: 16px 0 0; font: 500 13.9px/1.4 'Figtree', sans-serif; color: #fff; }
.bn-tema .bn-selos { position: absolute; top: 236px; right: 50px; z-index: 1; display: grid; gap: 40px; }
.bn-tema .selo { width: 104px; height: 104px; }
.bn-tema .selo text { font: 700 13px 'Figtree', sans-serif; letter-spacing: .1em; fill: #fff; text-transform: uppercase; }
.bn-tema .selo .anel { fill: none; stroke: var(--bn-laranja); stroke-width: 1.6; stroke-linecap: round; }
.bn-tema .selo .icone { color: var(--bn-laranja); }
.bn-tema .selo-giro { animation: bn-flutua 6s ease-in-out infinite; }
.bn-tema .selo-giro:nth-child(2) { animation-delay: -3s; }
@keyframes bn-flutua { 50% { transform: translateY(-6px) rotate(-4deg); } }

/* ── Celular ──────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.bn-tema { --bn-barra-h: 38px; }
    .bn-tema .bn-barra { gap: 10px; font-size: 13px; }
    .bn-tema .bn-barra-marca, .bn-tema .bn-ponto-1 { display: none; }
    .bn-tema .bn-ponto { width: 5px; height: 5px; margin: 0 7px; }
    .bn-tema .bn-barra-cta { display: none; }

    .bn-tema .bn-hero { min-height: 0; background: var(--bn-navy); }
    /* a foto começa abaixo do cabeçalho do site (absoluto, ~150px), senão o logo cobre o rosto */
    .bn-tema .bn-hero-foto { position: relative; height: 430px; margin-top: 128px; object-position: 66% 0; }
    .bn-tema .bn-hero::after { content: ''; position: absolute; left: 0; right: 0; top: 400px; height: 160px; background: linear-gradient(to bottom, rgba(10, 19, 39, 0), var(--bn-navy) 90%); pointer-events: none; z-index: 1; }
    /* foto em cima (470px), texto entra por cima do degradê e segue no navy */
    .bn-tema .bn-hero { display: grid; grid-template-columns: minmax(0, 1fr); } /* sem isso a coluna fica com os 1920px da foto */
    .bn-tema .bn-hero > * { grid-area: 1 / 1; min-width: 0; }
    .bn-tema .bn-hero .bn-wrap { min-height: 0; padding: 420px 16px calc(40px + 6vw); z-index: 2; }
    .bn-tema .bn-marca { width: 132px; }
    .bn-tema .bn-h1 { margin-top: 14px; font-size: clamp(44px, 12.6vw, 54px); }
    .bn-tema .bn-kicker { margin-top: 14px; font-size: 11.5px; letter-spacing: .24em; }
    .bn-tema .bn-caixa { margin-top: 20px; padding: 18px 16px 16px; background: rgba(0, 0, 0, .35); }
    .bn-tema .bn-trava { font-size: 14.5px; padding: 9px 14px 9px 11px; }
    .bn-tema .bn-btn { font-size: 19px; min-height: 54px; }
    .bn-tema .bn-micro { text-align: center; }
    .bn-tema .bn-selos { top: 150px; right: 8px; gap: 10px; }
    .bn-tema .selo { width: 70px; height: 70px; }


}