/* ==========================================================================
   BRAZUCA NEWS USA — Design system 2026 (lançamento oficial)

   CSS escrito à mão de propósito. O Tailwind daqui é PRÉ-COMPILADO
   (static/css/tailwind.css, sem package.json no repo), então classe nova exige
   rebuild + bump do ?v=. Escrevendo as ondas, gradientes, cards e o cromo em CSS
   puro, o design de lançamento não fica refém do build — e as classes Tailwind
   que já existem continuam funcionando lado a lado.

   Prefixo `bn-` em tudo para não colidir com o utilitário do Tailwind.
   O cromo (.bn-chrome) é GLOBAL: vale em todas as páginas, navy nos dois temas.
   As seções da home vivem dentro de .bn-home.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Paleta institucional */
    --bn-navy-950: #020d19;
    --bn-navy-900: #03172c;
    --bn-navy-850: #041d36;
    --bn-navy-800: #062e55;

    --bn-blue: #0878d1;
    --bn-cyan: #10bfe9;

    --bn-green: #009b3a;
    --bn-green-dark: #00752a;

    --bn-yellow: #ffcc00;
    --bn-gold: #f3b617;

    --bn-white: #ffffff;
    --bn-silver: #dce5ec;
    --bn-muted: #8fa6ba;

    --bn-border: rgba(36, 128, 196, .35);
    --bn-card: rgba(4, 29, 54, .82);

    /* Raio — contido, de portal editorial; nada de pílula de app SaaS */
    --bn-radius-sm: 6px;
    --bn-radius-md: 10px;
    --bn-radius-lg: 14px;

    /* Espaçamento */
    --bn-space-xs: 4px;
    --bn-space-sm: 8px;
    --bn-space-md: 16px;
    --bn-space-lg: 24px;
    --bn-space-xl: 32px;
    --bn-space-2xl: 48px;
    --bn-space-3xl: 72px;

    /* Sombra */
    --bn-shadow-card: 0 12px 30px rgba(0, 0, 0, .22);
    --bn-shadow-premium: 0 20px 60px rgba(0, 0, 0, .32);

    /* Métrica de layout */
    --bn-max: 1440px;
    --bn-gutter: clamp(20px, 3vw, 48px);

    /* Cromo */
    --bn-utility-h: 34px;
    --bn-brand-h: 132px;
    --bn-nav-h: 54px;

    /* Tipografia */
    --bn-font-display: 'Montserrat', 'Inter', system-ui, -apple-system, Arial, sans-serif;
    --bn-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bn-font-script: 'Caveat', 'Segoe Script', cursive;

    /* Curvas */
    --bn-ease: cubic-bezier(.22, .61, .36, 1);

    /* Onda Brazuca: 160px mantém a inclinação exata da curva do Amigas
       (120px para um box de 120; aqui o box é 160 para caber as 4 faixas). */
    --bn-wave-h: 160px;

    /* Chão da onda e das seções que vêm logo depois dela. Tem que ser a MESMA cor
       nos dois lugares, senão aparece uma faixa na fronteira. */
    --bn-ground: #020d19;
}

/* --------------------------------------------------------------------------
   2. FUNDO GLOBAL E CASCA
   -------------------------------------------------------------------------- */

/* Superfície institucional: navy com um halo azul no topo. Sem preto absoluto. */
.bn-surface {
    background:
        radial-gradient(circle at 50% 0%, rgba(8, 120, 209, .12), transparent 35%),
        linear-gradient(180deg, #020d19 0%, #03172c 45%, #020d19 100%);
    color: var(--bn-silver);
}

/* Casca de conteúdo: 1440px com respiro proporcional à viewport */
.bn-shell {
    max-width: var(--bn-max);
    margin-inline: auto;
    padding-inline: var(--bn-gutter);
    width: 100%;
}

/* Casca larga (faixas full-bleed que só precisam do respiro lateral) */
.bn-shell--wide {
    max-width: none;
}

.bn-home {
    font-family: var(--bn-font-body);
}

.bn-home h1,
.bn-home h2,
.bn-home h3,
.bn-home h4 {
    font-family: var(--bn-font-display);
    letter-spacing: -.01em;
}

/* Texto sobreposto: os títulos da home vivem sobre foto e precisam de peso real */
.bn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bn-silver);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    padding: 7px 14px;
    background: rgba(2, 13, 25, .45);
    backdrop-filter: blur(4px);
}

.bn-script {
    font-family: var(--bn-font-script);
    font-weight: 700;
    line-height: 1.15;
}

/* Barrinha da marca: TRÊS segmentos, as mesmas 3 cores da listra (verde, dourado,
   azul). Aparece no cromo, no hero, nos títulos de seção, na faixa e no rodapé.

   Cada segmento é um gradiente horizontal de duas paradas, igual às ondas: em
   repouso as duas têm a mesma cor; na troca de bandeira o JS desliza `--bn-fp`
   de 0 a 1 e cada barrinha varre da esquerda para a direita junto com a listra.
   As cores vêm de variáveis no <html>, escritas pelo mesmo laço da animação. */
.bn-flagbar {
    display: inline-flex;
    height: 3px;
    border-radius: 2px;
    overflow: hidden;
    width: 76px;
    vertical-align: middle;
}

.bn-flagbar i {
    display: block;
    height: 100%;
    flex: 1;
    background: linear-gradient(90deg,
        var(--bn-fn) calc(var(--bn-fp, 0%) - 8%),
        var(--bn-fo) calc(var(--bn-fp, 0%) + 8%));
}

/* CORES FIXAS do Brasil (12/09/2026, pedido do dono): a listrinha NÃO varre mais
   para vermelho/branco/azul dos EUA. As variáveis `--bn-f*` continuam existindo e
   seguem movendo as ONDAS grandes — só estes traços saíram da animação. */
.bn-flagbar i:nth-child(1) { --bn-fn: #009b3a; --bn-fo: #009b3a; }
.bn-flagbar i:nth-child(2) { --bn-fn: #f3b617; --bn-fo: #f3b617; }
.bn-flagbar i:nth-child(3) { --bn-fn: #0878d1; --bn-fo: #0878d1; }

/* Embaixo de título de seção: MESMA medida da barrinha que fica sob
   "Brazuca News USA" no bloco institucional (120x4), a pedido do dono. */
.bn-flagbar--titulo {
    display: flex;
    width: 120px;
    height: 4px;
    margin: 12px 0 var(--bn-space-lg);
}

/* Faixa institucional */
.bn-flagbar--larga {
    display: flex;
    width: 168px;
    height: 4px;
    margin: var(--bn-space-lg) auto 0;
}

/* Textura de mapa-múndi pontilhado. Máscara + background-color = tinta controlada
   pelo `color` do elemento, e o SVG continua sendo um arquivo cacheado à parte. */
/* Só o cabeçalho usa o pontilhado (decisão do dono, 10/09/2026): no hero e no
   bloco institucional ele competia com a fotografia. */
.bn-worldmap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image: url('/static/img/world-dots.svg');
    mask-image: url('/static/img/world-dots.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* --------------------------------------------------------------------------
   3. BOTÕES
   -------------------------------------------------------------------------- */
.bn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--bn-font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--bn-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .22s var(--bn-ease), box-shadow .22s var(--bn-ease),
                filter .22s var(--bn-ease), background-color .22s var(--bn-ease);
}

.bn-btn--gold {
    height: 56px;
    padding-inline: clamp(24px, 3vw, 32px);
    color: var(--bn-navy-950);
    background: linear-gradient(135deg, var(--bn-yellow) 0%, var(--bn-gold) 100%);
    box-shadow: 0 10px 26px rgba(243, 182, 23, .22);
}

.bn-btn--gold:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 16px 34px rgba(243, 182, 23, .32);
}

.bn-btn--sm {
    height: 40px;
    padding-inline: 18px;
    font-size: 13px;
}

.bn-btn--outline {
    height: 46px;
    padding-inline: 22px;
    color: var(--bn-white);
    border-color: var(--bn-border);
    background: rgba(6, 46, 85, .45);
}

.bn-btn--outline:hover {
    border-color: rgba(255, 204, 0, .6);
    background: rgba(6, 46, 85, .75);
}

.bn-btn svg,
.bn-btn i {
    flex: none;
}

/* Foco visível em todo o cromo e na home (WCAG 2.4.7) */
.bn-home :focus-visible,
.bn-chrome :focus-visible {
    outline: 2px solid var(--bn-yellow);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   4. CARD — família visual única
   -------------------------------------------------------------------------- */
.bn-card {
    position: relative;
    background: linear-gradient(145deg, rgba(6, 46, 85, .90), rgba(3, 23, 44, .96));
    border: 1px solid rgba(8, 120, 209, .28);
    border-radius: var(--bn-radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
    transition: border-color .5s var(--bn-ease), box-shadow .5s var(--bn-ease),
                transform .5s var(--bn-ease);
}

.bn-card:hover {
    border-color: rgba(255, 204, 0, .5);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 26px rgba(16, 191, 233, .28);
}

/* Card COM FOTO também levanta, como o do ecossistema — o dono elogiou o realce
   e pediu o mesmo comportamento em toda a home. */
.bn-story:hover,
.bn-mini:hover {
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   5. CROMO GLOBAL — barra utilitária + brand header + navegação
   Vale em TODAS as páginas do site (decisão do dono, 09/09).
   -------------------------------------------------------------------------- */
.bn-chrome {
    position: relative;
    z-index: 45;
    background: var(--bn-navy-950);
    font-family: var(--bn-font-body);
    color: var(--bn-silver);
}

/* ---- 5.1 Barra utilitária ---- */
.bn-utility {
    background: rgba(2, 9, 18, .96);
    border-bottom: 1px solid rgba(8, 120, 209, .18);
    font-size: 11.5px;
}

.bn-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-md);
    min-height: var(--bn-utility-h);
}

.bn-utility__left {
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bn-muted);
    min-width: 0;
}

.bn-utility__right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bn-utility__sep {
    color: rgba(143, 166, 186, .45);
}

.bn-social {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bn-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    color: var(--bn-muted);
    transition: color .2s var(--bn-ease), background-color .2s var(--bn-ease);
}

.bn-social a:hover {
    color: var(--bn-white);
    background: rgba(8, 120, 209, .22);
}

.bn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding-inline: 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--bn-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s var(--bn-ease), background-color .2s var(--bn-ease);
}

.bn-icon-btn:hover {
    color: var(--bn-white);
    background: rgba(8, 120, 209, .22);
}

.bn-icon-btn,
.bn-utility .bn-btn--anuncie,
.bn-widget__link,
.bn-sec__head { position: relative; }

.bn-icon-btn img {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

.bn-utility .bn-btn--anuncie {
    white-space: nowrap;
    flex: none;
    height: 25px;
    padding-inline: 12px;
    font-size: 10.5px;
    letter-spacing: .07em;
    border-radius: var(--bn-radius-sm);
    color: var(--bn-navy-950);
    background: linear-gradient(135deg, var(--bn-yellow), var(--bn-gold));
    font-weight: 800;
}

.bn-utility .bn-btn--anuncie:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Menu de idiomas (mantém switchLanguage() do base.html) */
.bn-langmenu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 178px;
    max-width: calc(100vw - 24px);
    background: var(--bn-navy-900);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
    box-shadow: var(--bn-shadow-premium);
    padding: 5px;
    z-index: 60;
}

.bn-langmenu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--bn-radius-sm);
    background: transparent;
    color: var(--bn-silver);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.bn-langmenu button:hover {
    background: rgba(8, 120, 209, .22);
    color: var(--bn-white);
}

/* Busca do cromo: expande no clique, some no Esc */
.bn-search {
    position: relative;
    display: flex;
    align-items: center;
}

.bn-search__form {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: width .28s var(--bn-ease), opacity .2s var(--bn-ease);
}

.bn-search.is-open .bn-search__form {
    width: clamp(150px, 22vw, 240px);
    opacity: 1;
}

.bn-search__form input {
    width: 100%;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    background: rgba(6, 46, 85, .55);
    color: var(--bn-white);
    font: inherit;
}

.bn-search__form input::placeholder {
    color: rgba(143, 166, 186, .8);
}

/* ---- 5.2 Brand header ---- */
.bn-brand {
    position: relative;
    overflow: hidden;
    background: var(--bn-navy-900);
    isolation: isolate;
}

/* Foto do skyline: entra pela DIREITA e é engolida por um gradiente forte à
   esquerda, que é o que garante a leitura do logo. Estado INICIAL, retomado a
   pedido do dono em 09/09/2026 — o carrossel de capitais está desligado, não
   removido (ver comentário no _header.html). */
.bn-brand__photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url('/static/heroes/lp2026/brand-skyline.jpg');
    background-size: cover;
    background-position: center 72%;
}

.bn-brand__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, var(--bn-navy-900) 0%, rgba(3, 23, 44, .93) 26%,
                        rgba(3, 23, 44, .42) 48%, rgba(2, 13, 25, .30) 72%,
                        rgba(2, 13, 25, .52) 100%),
        linear-gradient(180deg, rgba(2, 13, 25, .18), rgba(2, 13, 25, .48));
}

/* ---- Mapa-múndi pontilhado + estrelas ----
   O mapa COMPLETO vem do SVG cacheado, como máscara. As estrelas são um SVG
   inline no MESMO viewBox: `contain` na máscara e `xMidYMid meet` no SVG dão o
   mesmo ajuste, então cada estrela cai sobre um ponto real do mapa. */
.bn-map {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image: url('/static/img/world-dots.svg');
    mask-image: url('/static/img/world-dots.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Pontilhado do cabeçalho: enquadramento do estado INICIAL (discreto, atrás do
   logo). O desenho em si é o mapa novo, de geografia real — o dono aprovou esse
   arquivo à parte, então ele não voltou junto. */
/* O mapa (1100x410, ~2,7:1) cabe INTEIRO na faixa: ajustado pela ALTURA, não pela
   largura. Com `62% auto` num cabeçalho largo e baixo ele era cortado na vertical
   e virava textura; no celular, que é estreito, aparecia inteiro — foi essa
   diferença que o dono notou. Fica logo depois do logo, antes da assinatura. */
.bn-brand__map {
    /* Branco, e não o ciano da marca (pedido do dono, 11/09/2026): sobre o
       skyline o azul competia com o céu e puxava o cabeçalho para o azulado. */
    color: rgba(255, 255, 255, .3);
    z-index: -1;
    -webkit-mask-size: auto 92%;
    mask-size: auto 92%;
    -webkit-mask-position: 40% center;
    mask-position: 40% center;
    /* Um véu navy só atrás do mapa: sobre a parte clara do skyline os pontos
       sumiam. Recorta a mesma máscara, então escurece exatamente o desenho. */
    filter: drop-shadow(0 0 1px rgba(2, 13, 25, .9));
}

@media (max-width: 900px) {
    .bn-brand__map {
        -webkit-mask-size: auto 74%;
        mask-size: auto 74%;
        -webkit-mask-position: 62% center;
        mask-position: 62% center;
    }
}

.bn-brand__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-lg);
    min-height: var(--bn-brand-h);
    padding-block: var(--bn-space-md);
}

.bn-brand__id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-decoration: none;
    min-width: 0;
}

.bn-brand__lockup {
    display: block;
    height: clamp(54px, 8vw, 118px);
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .55));
}

.bn-brand__tagline {
    display: block;
    margin: 9px 0 0 4px;
    font-size: clamp(9px, .85vw, 11.5px);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .82);
    font-weight: 600;
}

.bn-brand__signature {
    flex: none;
    text-align: center;
    color: var(--bn-white);
    text-shadow: 0 3px 16px rgba(0, 0, 0, .6);
}

.bn-brand__signature p {
    font-family: var(--bn-font-script);
    font-weight: 700;
    font-size: clamp(19px, 2.1vw, 29px);
    line-height: 1.06;
    margin: 0;
    transform: rotate(-4deg);
}

.bn-brand__signature span {
    display: block;
    width: 68%;
    height: 3px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--bn-yellow), transparent);
}

/* ---- 5.3 Navegação principal ---- */
.bn-nav {
    position: sticky;
    top: 0;
    z-index: 46;
    /* `clip` (e não `hidden`): corta o excesso horizontal da fita — 100vw conta a
       barra de rolagem e sobraria uns 15px — sem virar contêiner de rolagem, o
       que esconderia os menus suspensos que caem para fora da barra. */
    overflow-x: clip;
    background: rgba(2, 13, 25, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(8, 120, 209, .30);
    border-bottom: 1px solid rgba(8, 120, 209, .30);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}

.bn-nav__inner {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-height: var(--bn-nav-h);
}

/* Só a fileira de seções rola. O "Mais" fica FORA dela, encostado à direita —
   dentro do container que rolava, o menu completo era o item mais escondido da
   tela no celular. */
.bn-nav__scroll {
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 1 1 auto;          /* sem a fita, a fileira ocupa a barra inteira */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.bn-nav__scroll::-webkit-scrollbar { display: none; }

/* ⚠️ `overflow-x: auto` CORTA na vertical também (o navegador promove o eixo Y
   para `auto`), e os menus suspensos, que são filhos absolutos daqui, sumiam
   atrás do hero. A fileira só precisa rolar em tela estreita — e ali o menu é a
   gaveta lateral, não o suspenso. Acima de 1150px a rolagem sai e o menu aparece. */
@media (min-width: 1150px) {
    .bn-nav__scroll { overflow: visible; }
}

.bn-nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    border: 0;
    background: transparent;
    color: var(--bn-silver);
    font-family: var(--bn-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s var(--bn-ease), border-color .2s var(--bn-ease),
                background-color .2s var(--bn-ease);
}

.bn-nav__item:hover {
    color: var(--bn-white);
    background: rgba(8, 120, 209, .14);
    border-bottom-color: rgba(16, 191, 233, .55);
}

.bn-nav__item.is-active {
    color: var(--bn-white);
    border-bottom-color: var(--bn-yellow);
    text-shadow: 0 0 18px rgba(16, 191, 233, .55);
}

/* "Em breve": item que não leva a lugar nenhum, e diz isso */
.bn-nav__item--soon {
    color: rgba(143, 166, 186, .65);
    cursor: default;
}

.bn-nav__item--soon:hover {
    background: transparent;
    border-bottom-color: transparent;
    color: rgba(143, 166, 186, .65);
}

.bn-soon {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--bn-navy-950);
    background: rgba(220, 229, 236, .72);
}

.bn-nav__group {
    position: relative;
    display: inline-flex;
}

.bn-nav__drop {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 218px;
    padding: 6px;
    background: var(--bn-navy-900);
    border: 1px solid var(--bn-border);
    border-radius: 0 0 var(--bn-radius-md) var(--bn-radius-md);
    box-shadow: var(--bn-shadow-premium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--bn-ease), transform .2s var(--bn-ease), visibility .2s;
    z-index: 60;
}

.bn-nav__group:hover .bn-nav__drop,
.bn-nav__group:focus-within .bn-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bn-nav__drop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--bn-radius-sm);
    color: var(--bn-silver);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .18s var(--bn-ease), color .18s var(--bn-ease);
}

.bn-nav__drop a:hover {
    background: rgba(8, 120, 209, .22);
    color: var(--bn-white);
}

/* Botão do menu completo: dourado, à ESQUERDA do Home. Ele não é uma seção,
   é o acesso a tudo — por isso destoa de propósito dos itens da fileira. */
.bn-nav__menu {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 10px;
    padding: 8px 15px;
    border: 0;
    border-radius: var(--bn-radius-sm);
    background: var(--bn-yellow);
    color: var(--bn-navy-950);
    font-family: var(--bn-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 204, 0, .28);
    transition: background-color .2s var(--bn-ease), transform .2s var(--bn-ease),
                box-shadow .2s var(--bn-ease);
}

.bn-nav__menu:hover {
    background: #ffd633;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 204, 0, .42);
}

.bn-nav__menu:focus-visible { outline: 2px solid var(--bn-white); outline-offset: 2px; }

/* --- Cotações à direita da fileira ---
   O traço que existia antes do "Mais" virou a borda ESQUERDA desta caixa, então
   ele encosta no "Rádio / Em breve" em vez de ficar lá na ponta. */
/* Medido no browser: a fileira de seções pede 1038px e o botão Menu, 97px. A
   fita só entra quando SOBRA espaço de verdade — abaixo de 1330px de tela ela
   comeria as seções, que sumiriam para dentro do scroll horizontal. */
.bn-mkt { display: none; }

@media (min-width: 1330px) {
    .bn-mkt {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        overflow: hidden;
        margin-left: 10px;
        padding-left: 14px;
        border-left: 1px solid rgba(8, 120, 209, .25);
        /* Vai até a BORDA DA TELA, não até o fim da casca. A casca tem no máximo
           1440px e é centralizada, então sobrava uma faixa morta à direita em
           telas largas. `50% - 50vw` mede exatamente essa sobra: metade da casca
           menos metade da janela. O `padding-right` devolve o respiro. */
        margin-right: calc(50% - 50vw);
        padding-right: var(--bn-gutter);
    }
    /* com a fita presente, as seções ficam no tamanho natural: quem cede é a fita */
    .bn-nav__scroll { flex: 0 0 auto; }
}

.bn-mkt__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

/* Só rola quando a fita não cabe (o JS decide, medindo) */
.bn-mkt__track.is-rolando { animation: bn-mkt-anda 42s linear infinite; }
.bn-mkt:hover .bn-mkt__track.is-rolando { animation-play-state: paused; }

@keyframes bn-mkt-anda {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.bn-mkt__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--bn-silver);
}

.bn-mkt__item b {
    font-family: var(--bn-font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bn-white);
}

.bn-mkt__item i { font-style: normal; font-size: 11px; font-weight: 700; }
.bn-mkt__item i.is-up   { color: #34d399; }
.bn-mkt__item i.is-down { color: #f87171; }

.bn-mkt__sep { font-style: normal; padding: 0 14px; color: rgba(8, 120, 209, .55); }
.bn-mkt__load { font-size: 11.5px; color: rgba(143, 166, 186, .7); }

@media (prefers-reduced-motion: reduce) {
    .bn-mkt__track.is-rolando { animation: none; }
}

/* Forma curta da barra utilitária: aparece só em tela pequena */
.bn-utility__only-sm { display: none; }

/* --------------------------------------------------------------------------
   6. ONDAS BRAZUCA
   Camadas curvas verde → dourado → azul → navy, atravessando a página.
   Elemento obrigatório da identidade: fecha o hero e a faixa institucional.
   -------------------------------------------------------------------------- */
.bn-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    height: var(--bn-wave-h);
    pointer-events: none;
}

.bn-waves__ground { fill: var(--bn-ground); }

.bn-waves svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Posição e espelhamento são coisas SEPARADAS: `--topo` ancora a faixa no alto do
   bloco, `--flip` espelha o desenho. Juntar os dois numa classe só foi o que
   quebrou a faixa institucional quando o dono pediu para trocar os desenhos. */
.bn-waves--topo {
    bottom: auto;
    top: -1px;
}

/* `--flip` não existe mais como transform: espelhar o elemento invertia o lado do
   chão navy e a foto do hero vazava por baixo da listra. O espelho agora é feito
   no traçado, dentro do próprio parcial _waves.html. */

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.bn-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--bn-navy-950);
}

.bn-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 58% 42%;
}

/* Leitura da manchete: navy sólido à esquerda que abre para a fotografia */
.bn-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, var(--bn-navy-950) 0%, rgba(2, 13, 25, .92) 26%,
                        rgba(3, 23, 44, .48) 44%, rgba(3, 23, 44, .06) 62%,
                        transparent 82%),
        linear-gradient(180deg, rgba(2, 13, 25, .30) 0%, transparent 30%,
                        transparent 68%, rgba(2, 13, 25, .45) 100%),
        radial-gradient(circle at 12% 22%, rgba(8, 120, 209, .20), transparent 45%);
}


.bn-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--bn-space-xl);
    align-items: center;
    min-height: 590px;
    padding-block: clamp(36px, 5vw, 64px) calc(var(--bn-wave-h) + 8px);
}

.bn-hero__headline {
    margin: 18px 0 0;
    font-family: var(--bn-font-display);
    font-weight: 900;
    /* -25% a pedido do dono (11/09/2026): era clamp(46px, 5vw, 72px) */
    font-size: clamp(34.5px, 3.75vw, 54px);
    line-height: .98;
    letter-spacing: -.025em;
    color: var(--bn-white);
    text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
    text-wrap: balance;
}

.bn-hero__headline em {
    font-style: normal;
    color: var(--bn-yellow);
}

.bn-hero__sub {
    max-width: 620px;
    margin: var(--bn-space-lg) 0 0;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.bn-hero__cta {
    margin-top: var(--bn-space-xl);
}

/* Rota luminosa Brasil → EUA, sobre o mapa pontilhado */
.bn-hero__route {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .85;
}

.bn-route__path {
    fill: none;
    stroke: url(#bnRouteGrad);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Neon: a MESMA linha, mais grossa e desfocada, por baixo. Sai do degradê que
   corre, então o brilho muda de cor junto — um drop-shadow de cor fixa deixaria
   o halo ciano sob o trecho verde. Discreto de propósito. */
.bn-route__halo {
    fill: none;
    stroke: url(#bnRouteGrad);
    stroke-width: 7;
    stroke-linecap: round;
    opacity: .3;
    filter: blur(5px);
}

/* ---- 7.1 Coluna direita do hero: manifesto + bandeiras ---- */
.bn-hero__aside {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    padding-block: var(--bn-space-md);
    gap: var(--bn-space-xl);
}

.bn-manifesto {
    margin: 0;
    font-family: var(--bn-font-display);
    font-weight: 800;
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.24;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--bn-white);
    text-shadow: 0 2px 18px rgba(2, 13, 25, .85), 0 1px 4px rgba(2, 13, 25, .7);
}

/* Sem caixa: sobre a fotografia o manifesto vive de peso tipográfico e sombra.
   A versão com respaldo claro lia como cartão colado em cima do hero. */
.bn-manifesto-wrap {
    padding: 0;
}

.bn-manifesto-wrap .bn-flagbar {
    margin-top: 12px;
    width: 100px;
}

.bn-hero__flags {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bn-hero__flags img {
    width: 46px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .25);
}

.bn-hero__flags p {
    margin: 0;
    font-family: var(--bn-font-display);
    font-weight: 800;
    font-size: clamp(12px, 1.05vw, 15px);
    line-height: 1.25;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bn-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}

/* ---- 7.2 Atalhos de serviço ---- */
.bn-quick {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--bn-space-md);
    margin-top: var(--bn-space-xl);
    max-width: 720px;
}

.bn-quick__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    text-decoration: none;
    color: var(--bn-white);
    transition: transform .22s var(--bn-ease);
}

.bn-quick__item:hover {
    transform: translateY(-3px);
}

.bn-quick__ring {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1.5px solid rgba(243, 182, 23, .75);
    background: rgba(2, 13, 25, .5);
    color: var(--bn-yellow);
    transition: border-color .22s var(--bn-ease), box-shadow .22s var(--bn-ease),
                background-color .22s var(--bn-ease);
}

.bn-quick__item:hover .bn-quick__ring {
    border-color: var(--bn-yellow);
    background: rgba(6, 46, 85, .7);
    box-shadow: 0 0 22px rgba(255, 204, 0, .28);
}

.bn-quick__ring svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

.bn-quick__label {
    font-family: var(--bn-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.bn-quick__sub {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .78);
    line-height: 1.2;
}

.bn-quick__item--soon .bn-quick__ring {
    border-color: rgba(143, 166, 186, .5);
    color: rgba(220, 229, 236, .7);
}

.bn-quick__item--soon {
    cursor: default;
}

.bn-quick__item--soon:hover {
    transform: none;
}

/* --------------------------------------------------------------------------
   8. FAIXA DO ECOSSISTEMA
   -------------------------------------------------------------------------- */
.bn-eco {
    position: relative;
    padding-block: var(--bn-space-xl);
    /* Chapado, na cor do chão da onda: o fundo global tem um brilho azul radial
       no topo que ficava visível entre a listra do hero e os cards. */
    background: var(--bn-ground);
}

.bn-eco__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--bn-space-md);
}

.bn-eco__card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bn-radius-md);
    border: 1px solid rgba(8, 120, 209, .28);
    box-shadow: var(--bn-shadow-card);
    text-decoration: none;
    transition: transform .5s var(--bn-ease), border-color .5s var(--bn-ease),
                box-shadow .5s var(--bn-ease);
}

.bn-eco__card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 204, 0, .65);
    box-shadow: var(--bn-shadow-premium), 0 0 26px rgba(16, 191, 233, .28);
}

.bn-eco__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Curva IGUAL à da página de categoria — `cubic-bezier(.4,0,.2,1)`, ease-in-out
       — mas 5x mais LENTA (3,5s contra 0,7s), a pedido do dono, e só na home.
       A curva importa mais que a duração: a 1ª versão usava ease-OUT e entregava
       tudo no primeiro terço ("bruto"). O véu e o brilho do card continuam
       rápidos (0,5-0,7s): dão a resposta imediata ao mouse, e a foto deriva
       devagar por baixo.

       A ESCALA, porém, é por card, e não fixa em 1,1: o que o olho percebe é o
       deslocamento em PIXELS, e ele depende do tamanho da foto. Na categoria a
       foto tem 387px e scale(1.1) move 19px; na miniatura de 116px da home o
       mesmo 1,1 move só 6px — daí a sensação de "não acontece". As escalas abaixo
       foram calculadas para render ~19px em todo card. Ao mudar o tamanho de um
       card, RECALCULAR: escala = 1 + 38 / largura_da_foto. */
    transition: transform 3.5s cubic-bezier(.4, 0, .2, 1),
                filter 3.5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.bn-eco__card:hover img {
    transform: scale(1.18);
    filter: brightness(1.12) saturate(1.08);
}

.bn-eco__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(2, 13, 25, .95) 100%);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}

.bn-eco__card:hover::after { opacity: .8; }

.bn-eco__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px;
}

.bn-eco__title {
    display: block;
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--bn-white);
}

.bn-eco__sub {
    display: block;
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.3;
    color: rgba(220, 229, 236, .85);
}

/* Cartão sem destino (produto ainda não existe): visual contido e rótulo honesto */
.bn-eco__card--soon {
    cursor: default;
}

.bn-eco__card--soon img {
    filter: grayscale(.45) brightness(.72);
}

.bn-eco__card--soon:hover {
    transform: none;
    border-color: rgba(8, 120, 209, .28);
    box-shadow: var(--bn-shadow-card);
}

.bn-eco__card--soon:hover img {
    transform: none;
}

.bn-eco__flag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

/* ---- 8.1 Painel do ecossistema — abre para baixo ao clicar num card ----
   A altura anima com grid-template-rows 0fr → 1fr: não precisa medir conteúdo
   nem chutar max-height, e fecha do mesmo jeito. O conteúdo entra com fade-up
   um instante depois, para não aparecer cortado no meio da abertura. */
.bn-eco__card { cursor: pointer; font: inherit; text-align: left; padding: 0; background: none; }

.bn-eco__card.is-active {
    border-color: rgba(255, 204, 0, .9);
    box-shadow: 0 0 0 2px rgba(255, 204, 0, .35), var(--bn-shadow-premium);
    transform: translateY(-4px);
}

.bn-eco__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--bn-ease);
}

.bn-eco__panel.is-open {
    grid-template-rows: 1fr;
}

.bn-eco__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.bn-ecop {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0;
    margin-top: var(--bn-space-lg);
    overflow: hidden;
    border-radius: var(--bn-radius-lg);
    border: 1px solid rgba(255, 204, 0, .45);
    background: linear-gradient(145deg, rgba(6, 46, 85, .92), rgba(3, 23, 44, .98));
    box-shadow: var(--bn-shadow-premium);
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .4s var(--bn-ease) .12s, transform .45s var(--bn-ease) .12s;
}

/* `display:grid` acima venceria o `hidden` do navegador e os seis painéis
   apareceriam empilhados (mediu 2601px) — o atributo tem que mandar. */
.bn-ecop[hidden] { display: none; }

.bn-eco__panel.is-open .bn-ecop.is-on {
    opacity: 1;
    transform: none;
}

.bn-ecop__media {
    position: relative;
    min-height: 320px;
}

.bn-ecop__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-ecop__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(3, 23, 44, .95) 100%),
                linear-gradient(180deg, rgba(2, 13, 25, .15), rgba(2, 13, 25, .35));
}

.bn-ecop__body {
    padding: clamp(24px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bn-ecop__kicker {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bn-gold);
}

.bn-ecop__title {
    margin: 8px 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--bn-white);
}

.bn-ecop__text {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(220, 229, 236, .92);
    max-width: 58ch;
}

.bn-ecop__list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.bn-ecop__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(220, 229, 236, .9);
}

.bn-ecop__list svg { color: var(--bn-cyan); flex: none; margin-top: 2px; }

.bn-ecop__cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: var(--bn-space-lg) 0 0;
}

.bn-ecop__close {
    border: 0;
    background: none;
    color: var(--bn-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bn-ecop__close:hover { color: var(--bn-white); }

@media (max-width: 900px) {
    .bn-ecop { grid-template-columns: minmax(0, 1fr); }
    .bn-ecop__media { min-height: 200px; }
    .bn-ecop__media::after { background: linear-gradient(180deg, transparent 50%, rgba(3, 23, 44, .95) 100%); }
}

@media (prefers-reduced-motion: reduce) {
    .bn-eco__panel, .bn-ecop { transition: none; }
}

/* Modo claro do painel */
html:not(.dark) .bn-home .bn-ecop {
    background: #ffffff;
    border-color: rgba(243, 182, 23, .7);
}
html:not(.dark) .bn-home .bn-ecop__title { color: var(--bn-navy-950); }
html:not(.dark) .bn-home .bn-ecop__text,
html:not(.dark) .bn-home .bn-ecop__list li { color: #33465a; }
html:not(.dark) .bn-home .bn-ecop__close { color: #6b7d8f; }
html:not(.dark) .bn-home .bn-ecop__close:hover { color: var(--bn-navy-950); }
html:not(.dark) .bn-home .bn-ecop__media::after {
    background: linear-gradient(90deg, transparent 60%, #ffffff 100%);
}

/* --------------------------------------------------------------------------
   9. GRADE EDITORIAL
   -------------------------------------------------------------------------- */
.bn-editorial {
    position: relative;
    padding-block: var(--bn-space-xl) var(--bn-space-2xl);
}

.bn-editorial__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 3.6fr) minmax(0, 2.6fr);
    gap: var(--bn-space-lg);
    align-items: stretch;
}

/* ---- 9.1 Manchete ---- */
.bn-featured {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--bn-radius-md);
    border: 1px solid rgba(8, 120, 209, .28);
    box-shadow: var(--bn-shadow-card);
    text-decoration: none;
    min-height: 430px;
    height: 100%;
    transition: border-color .5s var(--bn-ease), box-shadow .5s var(--bn-ease),
                transform .5s var(--bn-ease);
}

.bn-featured:hover {
    border-color: rgba(255, 204, 0, .5);
    box-shadow: var(--bn-shadow-premium), 0 0 30px rgba(16, 191, 233, .26);
    transform: translateY(-4px);
}

.bn-featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 3.5s cubic-bezier(.4, 0, .2, 1),
                filter 3.5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.bn-featured:hover img {
    transform: scale(1.06);
    filter: brightness(1.12) saturate(1.08);
}

.bn-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 13, 25, .18) 0%, rgba(2, 13, 25, .55) 45%,
                                rgba(2, 13, 25, .96) 100%);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}

/* O véu alivia no hover: sem isso o zoom acontece embaixo de 96% de navy e o
   olho não percebe. Medido: a intensidade da mudança era 29,7 contra 50,9 da
   página de categoria, que não tem véu nenhum sobre a foto. */
.bn-featured:hover::after { opacity: .78; }

.bn-featured__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: clamp(18px, 2.2vw, 30px);
}

.bn-featured__title {
    display: block;
    margin: 12px 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(22px, 2.3vw, 32px);
    font-weight: 800;
    line-height: 1.14;
    color: var(--bn-white);
    text-wrap: balance;
}

.bn-featured__sub {
    display: block;
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(220, 229, 236, .88);
    max-width: 62ch;
}

.bn-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 11.5px;
    color: rgba(220, 229, 236, .72);
}

.bn-meta span::after {
    content: '•';
    margin-left: 8px;
    color: rgba(243, 182, 23, .7);
}

.bn-meta span:last-child::after {
    content: '';
    margin: 0;
}

/* ---- 9.2 Tag de editoria ---- */
/* Sem background aqui de propósito: a cor vem da classe bg-* da editoria
   (Tailwind compilado, carregado ANTES desta folha — se .bn-tag definisse
   background, venceria a da editoria por vir depois). */
.bn-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--bn-radius-sm);
    font-family: var(--bn-font-display);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bn-white);
}

/* Editorias de fundo amarelo: branco não lê, vai em navy */
.bn-tag--escuro { color: var(--bn-navy-950); }

/* ---- 9.3 Notícias secundárias ---- */
.bn-stories {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-md);
}

.bn-story {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    align-items: center;
    text-decoration: none;
    border-radius: var(--bn-radius-md);
}

.bn-story__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bn-radius-sm);
    background: var(--bn-navy-800);
}

.bn-story__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 3.5s cubic-bezier(.4, 0, .2, 1),
                filter 3.5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.bn-story:hover .bn-story__thumb img {
    transform: scale(1.3);
    filter: brightness(1.12) saturate(1.08);
}

.bn-story__title {
    display: block;
    margin: 8px 0 0;
    font-family: var(--bn-font-display);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--bn-white);
}

.bn-story__date {
    display: block;
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--bn-muted);
}

/* --------------------------------------------------------------------------
   10. SIDEBAR DE UTILIDADES
   -------------------------------------------------------------------------- */
.bn-side {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-md);
}

.bn-widget {
    padding: 16px;
}

.bn-widget__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bn-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bn-silver);
}

.bn-widget__head svg {
    width: 15px;
    height: 15px;
    color: var(--bn-cyan);
    flex: none;
}

/* ---- Tempo ---- */
.bn-wx__now {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.bn-wx__icon {
    flex: none;
    width: 62px;
    height: 62px;
    color: var(--bn-yellow);
}

.bn-wx__temp {
    font-family: var(--bn-font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--bn-white);
}

.bn-wx__desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--bn-silver);
}

.bn-wx__minmax {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--bn-muted);
}

.bn-wx__minmax b { color: var(--bn-white); font-weight: 700; }

.bn-widget__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    margin-top: 14px;
    border-radius: var(--bn-radius-sm);
    background: var(--bn-blue);
    color: var(--bn-white);
    font-family: var(--bn-font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .22s var(--bn-ease), transform .22s var(--bn-ease);
}

.bn-widget__cta:hover {
    background: #0a8ae8;
    transform: translateY(-1px);
}

/* ---- Câmbio ---- */
.bn-fx {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.bn-fx img {
    width: 34px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
    flex: none;
}

.bn-fx__pair {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bn-muted);
}

.bn-fx__pair b { color: var(--bn-cyan); font-weight: 700; }

.bn-fx__value {
    font-family: var(--bn-font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--bn-white);
}

.bn-fx__delta {
    font-size: 12.5px;
    font-weight: 700;
}

.bn-fx__delta.is-up   { color: #35d07f; }
.bn-fx__delta.is-down { color: #ff6b6b; }
.bn-fx__delta.is-flat { color: var(--bn-muted); }

.bn-fx__stamp {
    margin: 8px 0 0;
    font-size: 10.5px;
    color: var(--bn-muted);
}

/* ---- Eventos ---- */
.bn-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.bn-event {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: var(--bn-radius-sm);
    text-decoration: none;
    background: rgba(2, 13, 25, .45);
    border: 1px solid rgba(8, 120, 209, .18);
    transition: border-color .22s var(--bn-ease), background-color .22s var(--bn-ease);
}

.bn-event:hover {
    border-color: rgba(255, 204, 0, .45);
    background: rgba(6, 46, 85, .55);
}

.bn-event__date {
    display: grid;
    place-items: center;
    padding: 5px 0;
    border-radius: var(--bn-radius-sm);
    background: linear-gradient(160deg, var(--bn-blue), var(--bn-navy-800));
    line-height: 1;
}

.bn-event__day {
    font-family: var(--bn-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--bn-white);
}

.bn-event__mon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin-top: 2px;
}

.bn-event__title {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.28;
    color: var(--bn-white);
}

.bn-event__place {
    display: block;
    font-size: 11px;
    color: var(--bn-muted);
    margin-top: 2px;
}

.bn-widget__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bn-cyan);
    text-decoration: none;
}

.bn-widget__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bn-empty {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--bn-muted);
}

/* --------------------------------------------------------------------------
   11. SEÇÃO "BEM-VINDO AO BRAZUCA NEWS"
   -------------------------------------------------------------------------- */
.bn-about {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Embaixo: respiro + a altura da onda que fecha o bloco */
    padding-block: clamp(48px, 6vw, 84px) calc(clamp(40px, 5vw, 64px) + var(--bn-wave-h));
}

.bn-about__photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-about__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(2, 13, 25, .88) 0%, rgba(3, 23, 44, .80) 55%,
                        rgba(2, 13, 25, .90) 100%),
        radial-gradient(circle at 20% 30%, rgba(8, 120, 209, .20), transparent 50%);
}


.bn-about__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}

.bn-about__lockup {
    display: block;
    height: clamp(56px, 6vw, 88px);
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5));
}

.bn-about__eyebrow {
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: clamp(13px, 1.2vw, 16px);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .8);
}

.bn-about__title {
    margin: 10px 0 0;
    line-height: 0;
    font-family: var(--bn-font-display);
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--bn-white);
}

.bn-about__title em {
    font-style: normal;
    color: var(--bn-cyan);
}

.bn-about__text {
    margin: var(--bn-space-lg) 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(220, 229, 236, .9);
    max-width: 56ch;
}

.bn-about__text strong {
    color: var(--bn-white);
    font-weight: 700;
}

/* ---- Indicadores ---- */
.bn-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bn-stats li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(8, 120, 209, .22);
}

.bn-stats li:last-child { border-bottom: 0; }

.bn-stats__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--bn-radius-sm);
    border: 1px solid rgba(243, 182, 23, .5);
    color: var(--bn-gold);
}

.bn-stats__icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.5;
}

.bn-stats__label {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(220, 229, 236, .92);
}

.bn-stats__label b {
    display: block;
    font-family: var(--bn-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--bn-white);
    margin-bottom: 2px;
}

/* ---- Citação manuscrita ---- */
.bn-quote {
    text-align: center;
    padding-top: var(--bn-space-sm);
}

.bn-quote p {
    margin: 0;
    font-family: var(--bn-font-script);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.22;
    color: var(--bn-white);
}

.bn-quote cite {
    display: block;
    margin-top: var(--bn-space-lg);
    font-family: var(--bn-font-display);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .85);
}

.bn-quote .bn-flagbar {
    margin-top: 12px;
    width: 120px;
    height: 4px;
}

/* --------------------------------------------------------------------------
   12. FAIXA INSTITUCIONAL
   -------------------------------------------------------------------------- */
.bn-strip {
    position: relative;
    overflow: hidden;
    padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 44px);
    /* Chapado, igual ao chão da onda do bloco anterior: qualquer degradê aqui
       vira uma faixa visível logo abaixo da listra. */
    background: var(--bn-ground);
}

.bn-strip > .bn-shell {
    position: relative;
    z-index: 4;
}

.bn-strip__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(12px, 2.2vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--bn-font-display);
    font-size: clamp(11px, 1.05vw, 14px);
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .88);
    text-align: center;
}

.bn-strip__list li::after {
    content: '•';
    margin-left: clamp(12px, 2.2vw, 30px);
    color: var(--bn-gold);
    letter-spacing: 0;
}

.bn-strip__list li:last-child::after { content: ''; margin: 0; }


/* --------------------------------------------------------------------------
   13. NEWSLETTER
   -------------------------------------------------------------------------- */
.bn-news {
    position: relative;
    overflow: hidden;
    padding-block: clamp(36px, 4.5vw, 60px);
    background:
        radial-gradient(circle at 85% 30%, rgba(16, 191, 233, .18), transparent 55%),
        linear-gradient(120deg, var(--bn-navy-900) 0%, var(--bn-navy-800) 100%);
    border-top: 1px solid rgba(8, 120, 209, .3);
}

.bn-news__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bn-space-xl);
    align-items: center;
}

.bn-news__intro {
    display: flex;
    align-items: center;
    gap: var(--bn-space-lg);
}

.bn-news__icon {
    flex: none;
    width: 66px;
    height: 66px;
    color: var(--bn-white);
    opacity: .9;
}

.bn-news__title {
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--bn-white);
}

.bn-news__sub {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(220, 229, 236, .85);
}

.bn-news__form {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.bn-news__form input[type=email] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border-radius: var(--bn-radius-md);
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .96);
    color: var(--bn-navy-950);
    font: inherit;
    font-size: 15px;
}

.bn-news__form input[type=email]::placeholder {
    color: #6d7d8c;
}

.bn-news__form .bn-btn--gold {
    height: 52px;
    flex: none;
}

.bn-news__status {
    margin: 10px 0 0;
    font-size: 13px;
    min-height: 18px;
}

.bn-news__status.is-ok  { color: #7fe3ab; }
.bn-news__status.is-err { color: #ffb4a8; }

/* --------------------------------------------------------------------------
   14. RODAPÉ
   -------------------------------------------------------------------------- */
.bn-foot {
    position: relative;
    padding-block: clamp(40px, 5vw, 64px) var(--bn-space-lg);
    background: var(--bn-navy-950);
    border-top: 1px solid rgba(8, 120, 209, .25);
    color: var(--bn-silver);
}

.bn-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
}

.bn-foot__id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bn-foot__lockup { display: block; height: 62px; width: auto; max-width: 100%; }

.bn-foot__name {
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--bn-white);
    line-height: 1.1;
}

.bn-foot__name em { font-style: normal; color: var(--bn-cyan); }

.bn-foot__tag {
    margin: 0 0 0 3px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bn-muted);
}

.bn-foot__about {
    margin: var(--bn-space-md) 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(220, 229, 236, .82);
    max-width: 46ch;
}

.bn-foot h3 {
    margin: 0 0 14px;
    font-family: var(--bn-font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bn-gold);
}

.bn-foot ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bn-foot ul a {
    font-size: 13.5px;
    color: rgba(220, 229, 236, .82);
    text-decoration: none;
    transition: color .18s var(--bn-ease);
}

.bn-foot ul a:hover {
    color: var(--bn-cyan);
}

.bn-foot__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bn-space-md);
    margin-top: var(--bn-space-2xl);
    padding-top: var(--bn-space-lg);
    border-top: 1px solid rgba(8, 120, 209, .22);
    font-size: 12.5px;
    color: var(--bn-muted);
}

/* --------------------------------------------------------------------------
   15. PUBLICIDADE — contêiner que não deixa o criativo quebrar o layout
   -------------------------------------------------------------------------- */
.bn-ad {
    margin-block: var(--bn-space-lg);
}

.bn-ad__label {
    margin: 0 0 6px;
    text-align: center;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(143, 166, 186, .8);
}

.bn-ad__frame {
    overflow: hidden;
    border-radius: var(--bn-radius-md);
    border: 1px solid rgba(8, 120, 209, .2);
    max-width: 100%;
}

.bn-ad__frame img,
.bn-ad__frame iframe {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /* SEM teto de altura. Um teto arbitrário abre tarja lateral assim que a peça
       não bate com ele — foi o que aconteceu com o cartaz do Utah (2,65:1). O
       espaço respeita a proporção do criativo; quem garante o formato é a
       VALIDAÇÃO NO CADASTRO, não um `max-height` no CSS. */
}

/* --------------------------------------------------------------------------
   15b. DIVISOR ENTRE SEÇÕES — listra fina com brilho dourado
   Da referência do dono: a passagem entre blocos que NÃO têm onda ganha uma
   linha de 1px, mais forte no centro e sumindo nas pontas, com um halo dourado
   suave por cima. É discreto de propósito — marca a fronteira sem virar régua.
   -------------------------------------------------------------------------- */
.bn-divider {
    position: relative;
    height: 1px;
    max-width: var(--bn-max);
    margin: 0 auto;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%, rgba(16, 191, 233, .22) 18%,
        rgba(255, 204, 0, .85) 50%,
        rgba(16, 191, 233, .22) 82%, transparent 100%);
}

.bn-divider::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: -7px;
    height: 15px;
    background: radial-gradient(ellipse at center, rgba(255, 204, 0, .30), transparent 68%);
    filter: blur(5px);
}

/* Abaixo de 420px a barra utilitária inteira não cabe (154px do bloco da
   esquerda + 215px dos botões, que agora têm 40px para o dedo). Mantendo tudo, o
   navegador alarga a viewport para 407px e encolhe a PÁGINA TODA. Some com o
   texto institucional, que é decorativo e se repete no rodapé; os botões, que são
   função, ficam. Medido em 320/390/430. */
@media (max-width: 419px) {
    .bn-utility__left { display: none; }
}

/* --------------------------------------------------------------------------
   16. MICROINTERAÇÕES
   -------------------------------------------------------------------------- */
.bn-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s var(--bn-ease), transform .5s var(--bn-ease);
}

.bn-fade.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bn-fade { opacity: 1; transform: none; transition: none; }
    .bn-route__halo { display: none; }   /* neon só no desktop: no celular pesa */
    .bn-home *,
    .bn-chrome * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVO
   Ajustado onde o layout realmente quebra, não em breakpoint decorado.
   -------------------------------------------------------------------------- */

/* --- ≤1280px: a grade editorial de 3 colunas aperta a coluna do meio --- */
@media (max-width: 1280px) {
    .bn-editorial__grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        grid-template-areas: 'featured stories' 'side side';
    }

    .bn-editorial__featured { grid-area: featured; }
    .bn-editorial__stories  { grid-area: stories; }
    .bn-editorial__side     { grid-area: side; }

    .bn-side {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bn-side > * {
        flex: 1 1 260px;
    }
}

/* --- Tablet (≤1100px) --- */
@media (max-width: 1100px) {
    :root {
        --bn-brand-h: 112px;
    }

    .bn-hero__inner {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
        min-height: 520px;
    }

    .bn-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--bn-space-lg);
        max-width: 460px;
    }

    .bn-eco__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bn-about__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bn-quote {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(8, 120, 209, .22);
        padding-top: var(--bn-space-lg);
    }

    .bn-foot__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* --- ≤900px: o hero perde a coluna direita e vira composição fotográfica --- */
@media (max-width: 900px) {
    .bn-brand__signature { display: none; }

    .bn-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-block: clamp(28px, 6vw, 44px) calc(var(--bn-wave-h) + 8px);
    }

    .bn-hero__photo { object-position: 62% 40%; }

    .bn-hero__scrim {
        background:
            linear-gradient(180deg, rgba(2, 13, 25, .82) 0%, rgba(2, 13, 25, .72) 45%,
                            rgba(2, 13, 25, .94) 100%),
            radial-gradient(circle at 20% 15%, rgba(8, 120, 209, .25), transparent 55%);
    }

    .bn-hero__aside {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--bn-space-md);
        margin-top: var(--bn-space-xl);
    }

    .bn-manifesto-wrap { flex: 1 1 250px; }

    .bn-hero__headline { font-size: clamp(28.5px, 8.25vw, 40.5px); line-height: 1; }

    .bn-editorial__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'featured' 'stories' 'side';
    }

    .bn-featured { min-height: 340px; }

    .bn-news__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Celular (≤640px) --- */
@media (max-width: 640px) {
    :root {
        --bn-brand-h: 84px;
        --bn-nav-h: 48px;
    }

    /* Em coluna, o `flex: 1 1 260px` herdado do breakpoint de cima vira ALTURA:
       os cards de tempo/câmbio/eventos ficavam com um vão morto embaixo. Mesma
       armadilha que já apareceu no Amigas Brazuca. */
    .bn-side > * { flex: 0 0 auto; }

    /* Alvo de toque no celular: a barra utilitária cresce e os botões vão a 40px.
       Medidos antes com 26px de altura — a versão com pseudo-elemento invisível
       funcionava, mas não dava para conferir por medição, então é tamanho real. */
    .bn-utility__inner { min-height: 48px; }

    /* O eyebrow do hero não quebrava e pedia 370px: num aparelho de 320px o
       navegador aumenta a viewport para caber e ENCOLHE a página inteira. */
    .bn-eyebrow { flex-wrap: wrap; padding: 6px 11px; letter-spacing: .08em; }
    .bn-icon-btn { height: 40px; min-width: 40px; }
    .bn-utility .bn-btn--anuncie { height: 38px; padding-inline: 14px; font-size: 11.5px; }
    .bn-widget__link { padding: 11px 0; }
    .bn-widget__cta { height: 44px; }
    .bn-sec__head { padding: 8px 0; }

    .bn-utility .bn-utility__hide-sm { display: none; }
    .bn-utility__only-sm { display: inline; }
    /* Medido no browser a 390px: esquerda 154px + direita 241px = 395px numa caixa
       de 350px, e o botão Anuncie saía da tela. Libera espaço tirando o que tem
       outro caminho: a busca já existe dentro do menu lateral, e o código do
       idioma é redundante com a bandeira. */
    .bn-utility__left { gap: 8px; letter-spacing: .1em; flex: none; }
    .bn-utility__right { gap: 2px; }
    .bn-utility__inner { padding-inline: 14px; }
    .bn-utility .bn-search { display: none; }
    .bn-utility #langTriggerCode { display: none; }
    .bn-utility__left .bn-flagbar { width: 48px; }
    /* Tela estreita: o botão fica só com o ícone e a fita de cotações sai —
       não há espaço para ela sem espremer a fileira de seções. */
    .bn-nav__menu span { display: none; }
    .bn-nav__menu { margin-right: 6px; padding-inline: 11px; }

    .bn-brand__lockup { height: 44px; }
    .bn-brand__tagline { font-size: 7.5px; letter-spacing: .06em; margin: 6px 0 0 2px; }

    .bn-hero__cta { margin-top: var(--bn-space-lg); }
    :root { --bn-wave-h: 91px; }
    .bn-btn--gold { width: 100%; height: 52px; }
    .bn-hero__cta .bn-btn--gold { width: 100%; }

    .bn-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--bn-space-md);
        max-width: none;
    }

    .bn-quick__ring { width: 46px; height: 46px; }
    .bn-quick__ring svg { width: 20px; height: 20px; }
    .bn-quick__sub { display: none; font-size: 11px; }
    .bn-quick__item--soon .bn-quick__sub { display: block; }

    /* Rótulos que ficavam abaixo de 11px na tela pequena */
    .bn-eco__flag { font-size: 10px; }
    .bn-tag { font-size: 11px; padding: 4px 9px; }
    .bn-meta { font-size: 12px; }
    .bn-eco__sub { font-size: 12px; }

    .bn-eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bn-eco__card { aspect-ratio: 1 / 1; }
    .bn-eco__title { font-size: 13px; }
    .bn-eco__body { padding: 11px; }

    .bn-story { grid-template-columns: 92px minmax(0, 1fr); }

    .bn-side { flex-direction: column; }

    .bn-about__grid { grid-template-columns: minmax(0, 1fr); }

    .bn-news__intro { flex-direction: column; align-items: flex-start; gap: var(--bn-space-md); }
    .bn-news__icon { width: 48px; height: 48px; }
    .bn-news__form { flex-direction: column; }
    .bn-news__form .bn-btn--gold { width: 100%; }

    .bn-foot__grid { grid-template-columns: minmax(0, 1fr); }
    .bn-foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   18. DENSIDADE EDITORIAL — editorias, Você Sabia, Artigos
   Seções que já existiam na home e continuam existindo, agora na família navy.
   -------------------------------------------------------------------------- */
.bn-secs {
    padding-block: var(--bn-space-xl);
}

.bn-h2 {
    margin: 0 0 var(--bn-space-lg);
    font-family: var(--bn-font-display);
    font-size: clamp(19px, 1.9vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bn-white);
}

.bn-secs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bn-space-lg);
}

/* Cabeçalho da editoria: a cor vem da classe text-* da seção (no h3 e no
   chevron), a listra embaixo vem da bg-*. Nada de cor fixa aqui. */
.bn-sec__head {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    text-decoration: none;
}

.bn-sec__bar {
    display: block;
    flex-basis: 100%;
    width: 40px;
    height: 4px;
    margin-top: 4px;
    border-radius: 2px;
}

.bn-sec__head h3,
.bn-sec__head h2 {
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: inherit;
}

.bn-sec__head:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

.bn-sec__lead {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--bn-radius-md);
    border: 1px solid rgba(8, 120, 209, .28);
    text-decoration: none;
    transition: border-color .5s var(--bn-ease), box-shadow .5s var(--bn-ease),
                transform .5s var(--bn-ease);
}

.bn-sec__lead:hover {
    border-color: rgba(255, 204, 0, .5);
    box-shadow: var(--bn-shadow-premium), 0 0 26px rgba(16, 191, 233, .26);
    transform: translateY(-4px);
}

.bn-sec__lead img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 3.5s cubic-bezier(.4, 0, .2, 1),
                filter 3.5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.bn-sec__lead:hover img { transform: scale(1.09); filter: brightness(1.12) saturate(1.08); }

.bn-sec__leadtitle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 11px 14px 12px;
    font-family: var(--bn-font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--bn-white);
    /* Faixa sólida na cor da editoria (classe bg-*), como na home anterior */
}

.bn-sec__list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.bn-sec__list li {
    border-bottom: 1px solid rgba(8, 120, 209, .18);
}

.bn-sec__list li:last-child { border-bottom: 0; }

.bn-sec__list a {
    display: block;
    padding: 9px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(220, 229, 236, .88);
    text-decoration: none;
    transition: color .18s var(--bn-ease);
}

.bn-sec__list a:hover { color: var(--bn-cyan); }

/* ---- Cartões de 4 (Você Sabia / Artigos) ---- */
.bn-cards4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bn-space-md);
}

.bn-mini {
    display: block;
    overflow: hidden;
    text-decoration: none;
    padding-bottom: 14px;
}

.bn-mini__thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bn-navy-800);
}

.bn-mini__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 3.5s cubic-bezier(.4, 0, .2, 1),
                filter 3.5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.bn-mini:hover .bn-mini__thumb img { transform: scale(1.12); filter: brightness(1.12) saturate(1.08); }

.bn-mini__title {
    display: block;
    padding: 12px 14px 0;
    font-family: var(--bn-font-display);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bn-white);
}

.bn-mini .bn-story__date { padding: 0 14px; }

/* Ícone grande do tempo (sprite broadcast reaproveitado do painel de clima) */
.bn-wx__svg {
    width: 62px;
    height: 62px;
    display: block;
}

@media (max-width: 1100px) {
    .bn-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .bn-secs__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .bn-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bn-mini__title { font-size: 12.5px; padding: 10px 10px 0; }
}


/* ==========================================================================
   19. MODO CLARO DA HOME
   O site tem o botão claro/escuro (html.dark, localStorage bnTema). A home
   nasceu navy fixo e ignorava o botão — o dono pediu o modo claro de volta.
   O que continua escuro de propósito, nos dois temas: o cromo (identidade), o
   hero e o bloco institucional (são fotografia com scrim), a newsletter (faixa
   de chamada) e o rodapé. O resto vira superfície clara com os cards em branco.
   As cores das editorias (classes bg e text da coleção) valem nos dois temas.
   (Cuidado com "asterisco-barra" dentro de comentário: fecha o comentário no
   meio e a regra seguinte some — foi o que apagou o fundo claro na 1ª versão.)
   ========================================================================== */
html:not(.dark) .bn-home {
    --bn-ground: #f3f6fa;
    background:
        radial-gradient(circle at 50% 0%, rgba(8, 120, 209, .08), transparent 35%),
        linear-gradient(180deg, #f3f6fa 0%, #eaf0f6 45%, #f3f6fa 100%);
    color: #2b3a4a;
}

html:not(.dark) .bn-home .bn-card {
    background: #ffffff;
    border-color: rgba(8, 120, 209, .16);
    box-shadow: 0 8px 24px rgba(3, 23, 44, .08);
}

html:not(.dark) .bn-home .bn-card:hover {
    border-color: rgba(243, 182, 23, .7);
    box-shadow: 0 12px 30px rgba(3, 23, 44, .12), 0 0 18px rgba(8, 120, 209, .08);
}

html:not(.dark) .bn-home .bn-h2,
html:not(.dark) .bn-home .bn-story__title,
html:not(.dark) .bn-home .bn-mini__title,
html:not(.dark) .bn-home .bn-wx__temp,
html:not(.dark) .bn-home .bn-fx__value,
html:not(.dark) .bn-home .bn-event__title,
html:not(.dark) .bn-home .bn-widget__head,
html:not(.dark) .bn-home .bn-wx__minmax b {
    color: var(--bn-navy-950);
}

html:not(.dark) .bn-home .bn-sec__list a,
html:not(.dark) .bn-home .bn-wx__desc {
    color: #33465a;
}

html:not(.dark) .bn-home .bn-sec__list a:hover { color: var(--bn-blue); }

html:not(.dark) .bn-home .bn-story__date,
html:not(.dark) .bn-home .bn-wx__minmax,
html:not(.dark) .bn-home .bn-fx__pair,
html:not(.dark) .bn-home .bn-fx__stamp,
html:not(.dark) .bn-home .bn-event__place,
html:not(.dark) .bn-home .bn-empty {
    color: #6b7d8f;
}

html:not(.dark) .bn-home .bn-sec__list li { border-bottom-color: rgba(8, 120, 209, .14); }
html:not(.dark) .bn-home .bn-sec__lead { border-color: rgba(8, 120, 209, .16); }
html:not(.dark) .bn-home .bn-widget__link { color: var(--bn-blue); }
html:not(.dark) .bn-home .bn-fx__pair b { color: var(--bn-blue); }

html:not(.dark) .bn-home .bn-event {
    background: #f3f6fa;
    border-color: rgba(8, 120, 209, .14);
}

html:not(.dark) .bn-home .bn-strip__list { color: var(--bn-navy-900); }

/* Divisor no claro: linha dourada mais firme, halo mais discreto */
html:not(.dark) .bn-home .bn-divider {
    background: linear-gradient(90deg,
        transparent 0%, rgba(8, 120, 209, .25) 18%,
        rgba(243, 182, 23, .95) 50%,
        rgba(8, 120, 209, .25) 82%, transparent 100%);
}
html:not(.dark) .bn-home .bn-divider::after {
    background: radial-gradient(ellipse at center, rgba(243, 182, 23, .22), transparent 68%);
}

/* Miniatura sem foto: no claro, o retângulo navy virava um buraco preto no card */
html:not(.dark) .bn-home .bn-mini__thumb,
html:not(.dark) .bn-home .bn-story__thumb { background: #dfe7ef; }

/* Cards-foto (ecossistema, manchete, destaque de editoria) já têm overlay escuro
   próprio e ficam iguais nos dois temas: só a moldura clareia. */
html:not(.dark) .bn-home .bn-eco__card,
html:not(.dark) .bn-home .bn-featured {
    border-color: rgba(8, 120, 209, .16);
    box-shadow: 0 8px 24px rgba(3, 23, 44, .10);
}


/* ==========================================================================
   20. HERO DE PÁGINA — listra Brazuca fechando o hero
   Vale nas 18 páginas que usam a macro `page_hero` e nas categorias, que têm
   hero próprio. A listra é a MESMA da home (com a animação da bandeira, que
   vive no base.html desde 10/09) e o chão dela é o que faz a foto terminar
   exatamente na listra, sem vão navy antes.
   ========================================================================== */
.bn-pagehero {
    position: relative;
    /* Espaço embaixo para a onda não passar por cima do título. */
    padding-bottom: var(--bn-wave-h);
}

/* O chão da onda tem que ser EXATAMENTE a cor da página abaixo, senão aparece
   uma emenda. Medido no browser: gray-50 no claro, #0d1117 no escuro (o
   dark:bg-slate-950 perde para o override !important do base.html). */
.bn-pagehero .bn-waves,
.lg-hero .bn-waves { --bn-ground: #f9fafb; }
html.dark .bn-pagehero .bn-waves,
html.dark .lg-hero .bn-waves { --bn-ground: #0d1117; }

/* Botão Voltar dourado, igual ao CTA da home */
.bn-voltar {
    margin-bottom: var(--bn-space-lg);
    text-transform: none;
    letter-spacing: .02em;
}

@media (max-width: 640px) {
    .bn-pagehero { padding-bottom: calc(var(--bn-wave-h) - 12px); }
}

/* ==========================================================================
   21. PÔSTER DE PRODUTO (.bn-poster) — painel rico do ecossistema
   Componente COMPARTILHADO: hoje serve o Brazuca Journey e o Brazilian
   Essentials, e nasceu para receber os demais. A ARTE oficial entra como fundo;
   logo, manchete, pilares, CTA e assinaturas são TEXTO de verdade — pôster
   achatado em JPEG tiraria tudo do buscador, do tradutor e do leitor de tela.
   ========================================================================== */
.bn-ecop--poster {
    display: block;
    padding: 0;
    background: linear-gradient(135deg, #06254a 0%, #031a33 45%, #020d19 100%);
    border-color: rgba(255, 204, 0, .5);
}

.bn-poster {
    position: relative;
    display: block;
    min-height: 560px;
    overflow: hidden;
}

/* ---- Coluna de texto ---- */
.bn-poster__texto {
    position: relative;
    z-index: 3;
    max-width: 54%;
    padding: clamp(24px, 2.6vw, 40px) clamp(20px, 2.2vw, 34px) clamp(118px, 11vw, 150px);
    display: flex;
    flex-direction: column;
}

.bn-poster__marca {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bn-poster__globo {
    height: clamp(58px, 5.4vw, 84px);
    width: auto;
    flex: none;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}

.bn-poster__wordmark {
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: clamp(24px, 2.5vw, 38px);
    font-weight: 800;
    line-height: .94;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--bn-white);
    text-shadow: 0 3px 14px rgba(0, 0, 0, .55);
}

.bn-poster__wordmark2 {
    margin: 2px 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(15px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--bn-white);
}

.bn-flagbar--jny {
    display: flex;
    width: 100%;
    max-width: 250px;
    height: 4px;
    margin: 9px 0 7px;
}

.bn-poster__verbos {
    margin: 0;
    font-size: clamp(8.5px, .78vw, 10.5px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .9);
}

.bn-poster__titulo {
    margin: clamp(18px, 2vw, 28px) 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(26px, 2.9vw, 44px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--bn-white);
    text-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}

.bn-poster__titulo em { font-style: normal; color: var(--bn-yellow); }

.bn-poster__sub {
    margin: 14px 0 0;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.55;
    color: rgba(220, 229, 236, .92);
    max-width: 44ch;
}

/* ---- Os 4 Pathways ---- */
.bn-poster__pilares {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: clamp(18px, 2vw, 28px) 0 0;
    padding: 0;
    list-style: none;
}

.bn-poster__pilares li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
}

/* Divisórias finas entre os pilares, como na arte */
.bn-poster__pilares li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(16, 191, 233, .5), transparent);
}

.bn-poster__anel {
    display: grid;
    place-items: center;
    width: clamp(40px, 3.6vw, 54px);
    height: clamp(40px, 3.6vw, 54px);
    border-radius: 50%;
    border: 1.5px solid rgba(243, 182, 23, .85);
    color: var(--bn-yellow);
    margin-bottom: 8px;
}

.bn-poster__anel svg { width: 45%; height: 45%; stroke-width: 1.6; }

.bn-poster__pnome {
    font-family: var(--bn-font-display);
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bn-white);
}

.bn-poster__pdesc {
    margin-top: 3px;
    font-size: clamp(8.5px, .75vw, 10.5px);
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .78);
}

/* ---- CTA + lema ---- */
.bn-poster__acao {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: clamp(18px, 2vw, 28px);
}

.bn-poster__lema {
    margin: 0;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 600;
    line-height: 1.45;
    color: rgba(220, 229, 236, .92);
}

.bn-poster__lema em { font-style: normal; color: var(--bn-yellow); font-weight: 700; }

.bn-poster__url {
    margin: 14px 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 700;
    color: rgba(220, 229, 236, .88);
}

/* ---- Arte oficial como fundo do painel inteiro ---- */
.bn-poster__arte {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bn-poster__arte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 42%;
}

/* Véu só do lado do texto: a arte já é escura à esquerda (o mapa), então o
   degradê fecha cedo e a família/skyline ficam limpos. */
.bn-poster__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(3, 20, 42, .94) 0%, rgba(3, 20, 42, .88) 26%,
                                rgba(3, 20, 42, .55) 44%, rgba(3, 20, 42, .12) 60%,
                                transparent 74%),
                linear-gradient(180deg, rgba(2, 13, 25, .22), rgba(2, 13, 25, .40));
}

.bn-poster__juntos {
    position: absolute;
    z-index: 3;
    top: clamp(14px, 1.6vw, 24px);
    right: clamp(16px, 1.8vw, 28px);
    margin: 0;
    text-align: right;
    font-size: clamp(8.5px, .78vw, 10.5px);
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.7;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.bn-poster__juntos span { color: var(--bn-gold); }

.bn-poster__assinatura {
    position: absolute;
    z-index: 3;
    right: clamp(16px, 1.8vw, 28px);
    bottom: clamp(118px, 11vw, 150px);
    margin: 0;
    text-align: center;
    font-family: var(--bn-font-script);
    font-weight: 700;
    font-size: clamp(17px, 1.7vw, 25px);
    line-height: 1.12;
    color: var(--bn-white);
    text-shadow: 0 3px 14px rgba(0, 0, 0, .75);
    transform: rotate(-5deg);
}

/* ---- Rodapé do painel ---- */
.bn-poster__rodape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--bn-space-lg);
    /* A onda ocupa o TOPO desta faixa e o texto fica EMBAIXO dela, sobre navy
       chapado — como na arte. Com os dois no mesmo espaço, a lista de temas
       aparecia por cima das listras. */
    padding: calc(clamp(54px, 5vw, 78px) + 10px) clamp(16px, 2vw, 28px) 14px;
    background: linear-gradient(180deg, transparent 0 clamp(54px, 5vw, 78px), #020d19 clamp(54px, 5vw, 78px));
}

.bn-poster__rodape .bn-waves {
    --bn-ground: #020d19;
    height: clamp(54px, 5vw, 78px);
    z-index: -1;
}

.bn-poster__temas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .8vw, 11px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .9);
}

.bn-poster__temas li + li::before {
    content: '•';
    margin-right: clamp(10px, 1.6vw, 26px);
    color: var(--bn-gold);
}

.bn-poster__rodape .bn-ecop__close { color: rgba(220, 229, 236, .7); }
.bn-poster__rodape .bn-ecop__close:hover { color: var(--bn-white); }

/* ---- Tablet e celular ---- */
@media (max-width: 900px) {
    .bn-poster { min-height: 0; padding-top: 46vw; }

    /* A arte ocupa uma faixa no topo e o texto desce para o navy: espremida atrás
       do texto inteiro, a família ficava irreconhecível. */
    .bn-poster__arte { bottom: auto; height: 52vw; }
    .bn-poster__arte img { object-position: 60% 36%; }

    .bn-poster__scrim {
        background: linear-gradient(180deg, rgba(2, 13, 25, .18) 0%,
                    rgba(3, 20, 42, .35) 32%, rgba(3, 20, 42, .92) 46%, #03142a 54%);
    }

    .bn-poster__texto { max-width: none; padding-bottom: clamp(130px, 24vw, 165px); }

    .bn-poster__juntos { top: 10px; }
    .bn-poster__assinatura { top: 34vw; bottom: auto; right: 14px; font-size: 16px; }

    .bn-poster__acao { margin-top: var(--bn-space-lg); }
}

@media (max-width: 640px) {
    .bn-poster__pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .bn-poster__pilares li:nth-child(3)::before { display: none; }
    .bn-poster__titulo { font-size: 25px; }
    .bn-poster__acao .bn-btn--gold { width: 100%; }
}

/* Modo claro: o pôster é peça de marca e continua navy nos dois temas. */
html:not(.dark) .bn-home .bn-ecop--poster { background: linear-gradient(135deg, #06254a 0%, #031a33 45%, #020d19 100%); }


/* ---- Brazilian Essentials: o que difere do pôster do Journey ---- */
.bn-ess__usa {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 5px 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(12px, 1.15vw, 17px);
    font-weight: 700;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--bn-white);
}

/* As linhas finas dos dois lados de "USA", como na arte */
.bn-ess__usa span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 229, 236, .75), transparent);
}

.bn-ess__titulo {
    text-transform: uppercase;
    font-size: clamp(19px, 2.1vw, 31px);
    letter-spacing: .04em;
    line-height: 1.24;
}

.bn-ess__titulo em { font-style: normal; color: #3ddc84; }
.bn-ess__titulo b { font-weight: 900; color: var(--bn-yellow); }

/* A assinatura manuscrita fica ao lado do botão, não solta no canto */
.bn-ess__assinatura {
    position: static;
    transform: rotate(-6deg);
    text-align: left;
    font-size: clamp(15px, 1.5vw, 22px);
}

/* Faixa de categorias da loja */
.bn-ess__cats {
    position: absolute;
    right: clamp(14px, 1.8vw, 30px);
    bottom: calc(clamp(54px, 5vw, 78px) + 26px);
    z-index: 3;
    display: flex;
    gap: clamp(10px, 1.4vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bn-ess__cats li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 clamp(6px, .9vw, 14px);
    text-align: center;
    font-family: var(--bn-font-display);
    font-size: clamp(8px, .72vw, 10px);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}

.bn-ess__cats li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .35), transparent);
}

.bn-ess__cats svg { width: clamp(17px, 1.5vw, 22px); height: auto; stroke-width: 1.6; }

/* O pôster da loja tem a faixa de categorias embaixo: precisa de mais respiro. */
.bn-poster--ess .bn-poster__texto { padding-bottom: clamp(150px, 14vw, 188px); }

@media (max-width: 900px) {
    .bn-ess__cats {
        /* `relative`, não `static`: sem posição o `z-index: 3` é ignorado e o
           véu do pôster passa a pintar POR CIMA das categorias.
           `inset: auto` é obrigatório junto: em `relative`, o `bottom: 80px`
           herdado da versão absoluta DESLOCA o bloco 80px para cima e ele
           atropela o endereço e a assinatura. */
        position: relative;
        inset: auto;
        flex-wrap: wrap;
        justify-content: center;
        margin: var(--bn-space-lg) auto 0;
        padding: 0 clamp(16px, 4vw, 28px);
        row-gap: 14px;
    }

    .bn-ess__cats li + li::before { display: none; }

    .bn-poster--ess .bn-poster__texto { padding-bottom: clamp(130px, 24vw, 165px); }

    .bn-ess__assinatura { font-size: 16px; }
}


/* Enquadramento e véu do pôster da loja: na arte o mapa escuro ocupa o terço
   ESQUERDO, que é onde o texto vive. Com o corte do Journey (62%) os produtos
   subiam para debaixo das letras. */
.bn-poster--ess .bn-poster__arte img { object-position: 38% 46%; }

@media (min-width: 901px) {
    .bn-poster--ess .bn-poster__scrim {
        background: linear-gradient(90deg, rgba(3, 20, 42, .96) 0%, rgba(3, 20, 42, .93) 30%,
                                    rgba(3, 20, 42, .62) 44%, rgba(3, 20, 42, .18) 58%,
                                    transparent 72%),
                    linear-gradient(180deg, rgba(2, 13, 25, .24), rgba(2, 13, 25, .46));
    }
}

/* Pilares: os rótulos têm 1 ou 2 linhas e a fileira ficava desalinhada. Alinha
   pelo topo e reserva a altura do maior. */
.bn-poster__pilares li { justify-content: flex-start; }
.bn-poster__pnome { min-height: 2.4em; display: flex; align-items: center; text-align: center; }
.bn-poster--ess .bn-poster__pnome { font-size: clamp(10px, .88vw, 12.5px); }
.bn-poster--ess .bn-poster__pdesc { font-size: clamp(8px, .7vw, 9.5px); }

/* A faixa de categorias saía pela borda direita e encostava no rodapé.
   ⚠️ Dentro de `min-width`: escrita solta no fim do arquivo, esta regra vencia a
   do celular (que a torna estática) e a faixa voltava a flutuar por cima da foto. */
@media (min-width: 901px) {
    .bn-ess__cats {
        right: auto;
        left: 50%;
        bottom: calc(clamp(54px, 5vw, 78px) + 40px);
        justify-content: flex-end;
        width: calc(50% - clamp(14px, 1.8vw, 30px));
        padding: 10px clamp(6px, 1vw, 16px) 10px 14px;
        /* Respaldo escuro: sobre as embalagens claras os rótulos sumiam. */
        background: linear-gradient(90deg, transparent, rgba(2, 13, 25, .62) 14%, rgba(2, 13, 25, .72));
        border-radius: var(--bn-radius-md);
        backdrop-filter: blur(2px);
    }
}


@media (max-width: 900px) {
    /* A faixa de categorias é estática aqui, e o respiro do rodapé passa a ser
       DELA, não do bloco de texto — senão sobra um vão antes das categorias.
       Medido: o rodapé (onda + temas) ocupa ~104px e vinha pintando por cima
       delas, porque é absoluto e tem z-index maior. */
    .bn-poster--ess .bn-poster__texto { padding-bottom: var(--bn-space-lg); }
    .bn-ess__cats { gap: 8px 4px; }
    /* O respiro vai no PAINEL, não como margem do último filho: a margem já
       estava sendo anulada por um `margin` abreviado declarado antes.
       Tem que ser MAIOR que a altura do rodapé (medida: 137px), porque ele é
       absoluto em bottom:0 — com 124px as categorias ainda ficavam 13px atrás
       da onda. */
    .bn-poster--ess { padding-bottom: 156px; }
    .bn-ess__cats li { flex: 0 0 30%; padding: 0 2px; }
}


/* ==========================================================================
   22. AMIGAS BRAZUCA — variante do pôster
   MESMA disposição e MESMO véu navy dos outros dois (texto à esquerda, foto à
   direita): a estrutura do componente não muda por produto. O rosa entra só nos
   detalhes da marca — botão, ícones, destaque do título, onda e assinaturas.
   Uma primeira versão pintou o fundo e o véu de rosa e o dono recusou.
   A novidade deste produto é o SELO redondo, que ganha o espaço livre da direita.
   ========================================================================== */
.bn-poster--amigas {
    --bn-rosa: #ff2e93;
}

.bn-poster--amigas .bn-poster__arte img { object-position: 52% 32%; }

/* Selo redondo centralizado na metade direita, onde os outros pôsteres deixam
   a fotografia respirar. */
.bn-amg__selo {
    position: absolute;
    top: 50%;
    left: 74%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: clamp(150px, 19vw, 280px);
    filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .6));
}

.bn-amg__selo img {
    display: block;
    width: 100%;
    height: auto;
    /* O arquivo veio com fundo PRETO, não transparente. Como a arte é redonda,
       o recorte resolve sem reeditar a imagem. */
    border-radius: 50%;
    clip-path: circle(49.5% at 50% 50%);
}

/* ---- Texto: mesma coluna da esquerda dos outros pôsteres ---- */
.bn-amg__titulo {
    text-transform: uppercase;
    font-size: clamp(21px, 2.4vw, 35px);
    line-height: 1.12;
}

.bn-amg__titulo em { font-style: normal; color: var(--bn-rosa); }

.bn-btn--rosa {
    height: 52px;
    padding-inline: clamp(20px, 2.4vw, 34px);
    color: #fff;
    background: linear-gradient(135deg, var(--bn-rosa) 0%, #e01a7d 100%);
    box-shadow: 0 10px 26px rgba(255, 46, 147, .3);
}

.bn-btn--rosa:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 16px 34px rgba(255, 46, 147, .42);
}

.bn-amg__acao { margin-top: var(--bn-space-lg); padding-top: 0; }

.bn-amg__pilares { margin-top: clamp(16px, 1.8vw, 26px); }
.bn-amg__pilares li { flex-direction: column; gap: 7px; }

.bn-amg__pilares li + li::before {
    background: linear-gradient(180deg, transparent, rgba(255, 46, 147, .6), transparent);
}

.bn-amg__pilares svg { width: clamp(20px, 1.8vw, 26px); height: auto; color: var(--bn-rosa); stroke-width: 1.7; }

.bn-poster--amigas .bn-poster__pnome {
    min-height: 0;
    display: block;
    font-size: clamp(9px, .82vw, 11.5px);
    letter-spacing: .07em;
    line-height: 1.3;
}

.bn-amg__lema {
    margin: clamp(16px, 2vw, 26px) 0 0;
    font-family: var(--bn-font-display);
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--bn-white);
}

.bn-amg__lema em { font-style: normal; color: var(--bn-rosa); }

/* ---- Coluna de valores: no alto do bloco de texto, não solta no canto ---- */
.bn-amg__valores {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(10px, 1.4vw, 20px);
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    padding: 0 0 10px;
    list-style: none;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .78vw, 11px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 214, 236, .9);
    border-bottom: 2px solid var(--bn-rosa);
    max-width: max-content;
}

/* ---- Assinaturas ---- */
.bn-amg__juntas {
    position: absolute;
    top: clamp(16px, 1.9vw, 30px);
    right: clamp(16px, 2vw, 34px);
    z-index: 3;
    margin: 0;
    text-align: right;
    font-family: var(--bn-font-display);
    font-size: clamp(9px, .84vw, 12px);
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.9;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.bn-amg__juntas .bn-flagbar { display: flex; width: 100%; height: 4px; margin-top: 8px; }

/* Cores FIXAS: `.bn-flagbar` lê as variáveis globais e virava vermelho, branco e
   azul junto com o site, quebrando a identidade do grupo. */
.bn-poster--amigas .bn-flagbar i { background: none; }
.bn-poster--amigas .bn-flagbar i:nth-child(1) { background: var(--bn-green); }
.bn-poster--amigas .bn-flagbar i:nth-child(2) { background: var(--bn-yellow); }
.bn-poster--amigas .bn-flagbar i:nth-child(3) { background: var(--bn-blue); }

.bn-amg__manuscrita {
    position: absolute;
    top: clamp(72px, 7.6vw, 116px);
    right: clamp(18px, 2.4vw, 40px);
    z-index: 3;
    margin: 0;
    text-align: right;
    font-family: var(--bn-font-script);
    font-weight: 700;
    font-size: clamp(18px, 1.9vw, 28px);
    line-height: 1.1;
    color: var(--bn-rosa);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
    transform: rotate(-6deg);
}

.bn-amg__cidade {
    position: absolute;
    right: clamp(18px, 2.4vw, 40px);
    bottom: clamp(96px, 9vw, 128px);
    z-index: 3;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--bn-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.bn-amg__cursiva {
    font-family: var(--bn-font-script);
    font-weight: 700;
    font-size: clamp(19px, 2vw, 30px);
    transform: rotate(-6deg);
}

.bn-amg__cidade svg { color: var(--bn-rosa); }

/* Onda rosa e temas da marca; o CHÃO segue o navy do painel, como nos outros. */
.bn-poster--amigas .bn-poster__temas li + li::before { color: var(--bn-rosa); }

/* ---- Tablet e celular: mesma regra dos outros pôsteres ---- */
@media (max-width: 900px) {
    .bn-amg__selo {
        position: relative;
        top: auto;
        left: auto;
        inset: auto;
        transform: none;
        width: 140px;
        margin: -70px auto var(--bn-space-md);
        display: block;
    }

    /* As duas assinaturas do topo se atropelavam na largura do celular: a
       manuscrita desce para o fluxo, junto do "Colorado Springs". */
    .bn-amg__manuscrita {
        position: relative;
        inset: auto;
        transform: rotate(-4deg);
        text-align: center;
        margin: var(--bn-space-lg) auto 0;
        font-size: 19px;
    }

    .bn-amg__cidade { position: relative; inset: auto; margin: var(--bn-space-md) auto 0; }
    .bn-amg__juntas { font-size: 8.5px; letter-spacing: .14em; }

    /* O respiro do rodapé passa a ser do PAINEL: no bloco de texto ele abria um
       vão antes das assinaturas, que agora vêm depois dele. */
    .bn-poster--amigas .bn-poster__texto { padding-bottom: var(--bn-space-lg); }
    .bn-poster--amigas { padding-bottom: 156px; }
}

@media (max-width: 640px) {
    .bn-amg__pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .bn-amg__pilares li:nth-child(3)::before { display: none; }
    .bn-amg__titulo { font-size: 20px; }
    .bn-btn--rosa { width: 100%; }
}


/* As assinaturas ficam sobre o céu claro do pôr do sol: rosa sobre laranja tem
   pouco contraste. Sombra dupla e um leve realce escuro por trás. */
.bn-amg__manuscrita {
    text-shadow: 0 2px 3px rgba(26, 6, 25, .95), 0 4px 18px rgba(26, 6, 25, .85);
}

.bn-amg__cidade {
    text-shadow: 0 2px 3px rgba(26, 6, 25, .95), 0 4px 18px rgba(26, 6, 25, .85);
}

.bn-amg__juntas {
    text-shadow: 0 2px 3px rgba(26, 6, 25, .9), 0 4px 16px rgba(26, 6, 25, .8);
}


/* ---- Logo oficial do produto nos pôsteres ----
   Os seis logos têm o MESMO globo, e nos seis ele ocupa a altura inteira da
   arte — medido: 99% a 100%. Já a largura varia (razão de 2,98 no Food Map a
   3,38 na FM), porque cada wordmark tem um comprimento. Por isso o tamanho é
   travado pela ALTURA: assim os globos saem idênticos e cada wordmark fica na
   proporção certa. Travar pela largura, como estava, deixava um globo maior que
   o outro. Não voltar a usar `width` aqui. */
.bn-poster__lockup {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-bottom: clamp(14px, 1.6vw, 22px);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .55));
}

.bn-poster__lockup img {
    display: block;
    height: clamp(74px, 8.9vw, 132px);
    width: auto;
    max-width: 100%;
}

@media (max-width: 900px) {
    .bn-poster__lockup { margin-inline: auto; }
    .bn-poster__lockup img { height: min(84px, 23vw); margin-inline: auto; }
}

/* ==========================================================================
   23. BRAZUCA FM — variante do pôster de produto
   Mesma estrutura navy dos outros três. O acento da marca é o CIANO do logo
   ("FM" + as ondas), e não o dourado. A rádio ainda NÃO existe: o selo
   "Em breve" e o CTA de aviso fazem parte do desenho, não são enfeite.
   ========================================================================== */
.bn-poster--fm .bn-poster__arte img { object-position: 58% 40%; }

/* Recorte da foto: o rosto fica à direita, o texto respira à esquerda */

.bn-fm__selo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: clamp(12px, 1.4vw, 18px) 0 0;
    font-size: clamp(10px, .82vw, 12px);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(220, 229, 236, .8);
}

/* Palavras da arte, em fileira sob o logo */
.bn-fm__verbos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(10px, 1.4vw, 20px);
    margin: clamp(12px, 1.4vw, 18px) 0 clamp(14px, 1.6vw, 22px);
    padding: 0 0 10px;
    list-style: none;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .78vw, 11px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(206, 234, 248, .92);
    border-bottom: 2px solid var(--bn-cyan, #10bfe9);
    max-width: max-content;
}

.bn-fm__titulo em { font-style: normal; color: var(--bn-cyan, #10bfe9); }

/* Cinco pilares (os outros pôsteres têm quatro) */
.bn-poster__pilares--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bn-poster--fm .bn-poster__anel {
    border-color: rgba(16, 191, 233, .85);
    color: var(--bn-cyan, #10bfe9);
}
.bn-poster--fm .bn-poster__pnome { font-size: clamp(10px, .88vw, 13px); }
.bn-poster--fm .bn-poster__pdesc { font-size: clamp(8px, .72vw, 10px); }

.bn-poster--fm .bn-poster__lema em { color: var(--bn-cyan, #10bfe9); }

/* Assinatura manuscrita da arte, no alto à direita */
.bn-fm__manuscrita {
    position: absolute;
    top: clamp(74px, 8vw, 118px);
    right: clamp(18px, 2.4vw, 42px);
    z-index: 3;
    margin: 0;
    max-width: 40%;
    text-align: center;
    font-family: var(--bn-font-script);
    font-size: clamp(19px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bn-white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
    transform: rotate(-6deg);
}

@media (max-width: 900px) {
    .bn-poster--fm .bn-poster__texto { padding-bottom: var(--bn-space-lg); }
    .bn-poster--fm { padding-bottom: 156px; }
    .bn-fm__selo,
    .bn-fm__verbos { justify-content: center; margin-inline: auto; }
    .bn-poster__pilares--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .bn-poster__pilares--5 li:nth-child(3)::before,
    .bn-poster__pilares--5 li:nth-child(5)::before { display: none; }
    /* O quinto pilar não fica sozinho num canto: ocupa a linha inteira */
    .bn-poster__pilares--5 li:nth-child(5) { grid-column: 1 / -1; }
    .bn-fm__titulo { font-size: 22px; }
    .bn-fm__manuscrita {
        position: relative;
        inset: auto;
        max-width: none;
        margin: var(--bn-space-md) auto 0;
        transform: none;
        font-size: 20px;
    }
}

/* ==========================================================================
   24. BRAZUCA FOOD MAP — variante do pôster de produto
   Acento VERDE: a identidade do Food Map é navy + verde (ver a folha
   `foodmap.css` do produto), e não o dourado dos outros pôsteres. O botão
   principal segue dourado porque é o botão da arte.
   ========================================================================== */
.bn-poster--fmap { --bn-fmap: #2fd463; }
.bn-poster--fmap .bn-poster__arte img { object-position: 62% 46%; }

/* Palavras da arte, em fileira sob o logo */
.bn-fmap__verbos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(10px, 1.4vw, 20px);
    margin: clamp(12px, 1.4vw, 18px) 0 clamp(14px, 1.6vw, 22px);
    padding: 0 0 10px;
    list-style: none;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .78vw, 11px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(214, 245, 225, .92);
    border-bottom: 2px solid var(--bn-fmap);
    max-width: max-content;
}

.bn-fmap__titulo em { font-style: normal; color: var(--bn-fmap); }

/* ---- Busca de verdade (vai para /foodmap/map) ---- */
.bn-fmap__busca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(16px, 1.8vw, 24px);
    padding: 6px 6px 6px 16px;
    max-width: 520px;
    background: var(--bn-white);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.bn-fmap__busca svg { width: 18px; height: 18px; color: #5b6b7a; flex: none; }

.bn-fmap__busca input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: clamp(12px, 1vw, 14.5px);
    color: #0d1b2a;
}

.bn-fmap__busca input::placeholder { color: #7a8794; }

.bn-fmap__btn {
    flex: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 10px clamp(16px, 1.6vw, 26px);
    background: #0f8a3c;
    color: var(--bn-white);
    font-family: var(--bn-font-display);
    font-size: clamp(11px, .95vw, 13.5px);
    font-weight: 800;
    letter-spacing: .04em;
    transition: background .2s ease;
}

.bn-fmap__btn:hover { background: #0b6f30; }
.bn-fmap__btn:focus-visible { outline: 2px solid var(--bn-yellow); outline-offset: 2px; }

/* ---- Pilares ---- */
.bn-poster--fmap .bn-poster__anel {
    border-color: rgba(47, 212, 99, .8);
    color: var(--bn-fmap);
}
.bn-poster--fmap .bn-poster__pnome {
    font-size: clamp(9.5px, .8vw, 12px);
    line-height: 1.2;
    letter-spacing: .04em;
    min-height: 0;
}
.bn-poster--fmap .bn-poster__pilares li + li::before {
    background: linear-gradient(180deg, transparent, rgba(47, 212, 99, .45), transparent);
}
.bn-poster--fmap .bn-poster__lema em { color: var(--bn-fmap); }
.bn-poster--fmap .bn-poster__temas li + li::before { color: var(--bn-fmap); }

/* ---- Assinaturas sobre a arte ---- */
.bn-fmap__manuscrita {
    position: absolute;
    /* Abaixo do "Brasil • Estados Unidos", senão os dois se atropelam */
    top: clamp(70px, 7.4vw, 112px);
    right: clamp(30px, 3.4vw, 58px);
    z-index: 3;
    margin: 0;
    text-align: center;
    font-family: var(--bn-font-script);
    font-size: clamp(18px, 1.9vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bn-white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
    transform: rotate(-8deg);
}

.bn-fmap__regiao {
    position: absolute;
    right: clamp(18px, 2.4vw, 42px);
    bottom: clamp(96px, 9vw, 130px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    text-align: left;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .78vw, 11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    /* Cai em cima da lousa do food truck: sem a pílula escura some no fundo */
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(2, 13, 25, .72);
    backdrop-filter: blur(3px);
}

.bn-fmap__regiao svg { color: var(--bn-yellow); flex: none; }
.bn-fmap__regiao b { display: block; font-size: 1.18em; letter-spacing: .08em; }

@media (max-width: 900px) {
    .bn-poster--fmap .bn-poster__texto { padding-bottom: var(--bn-space-lg); }
    .bn-poster--fmap { padding-bottom: 156px; }
    .bn-fmap__verbos { justify-content: center; margin-inline: auto; }
    .bn-fmap__titulo { font-size: 21px; }
    .bn-fmap__busca { max-width: none; padding-left: 12px; }
    .bn-fmap__btn { padding-inline: 14px; }
    .bn-fmap__manuscrita,
    .bn-fmap__regiao {
        width: max-content;
        position: relative;
        inset: auto;
        transform: none;
        margin: var(--bn-space-md) auto 0;
        justify-content: center;
        text-align: center;
    }
    .bn-fmap__manuscrita { font-size: 20px; }
}

/* ==========================================================================
   25. AMERICAN LIFE GUIDE — variante do pôster de produto
   Acento dourado, como o Journey: são os dois produtos da mesma família de
   arte. O azul do logo aparece só na fileira de palavras.
   ========================================================================== */
.bn-poster--lg .bn-poster__arte img { object-position: 60% 42%; }

.bn-lg__verbos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(10px, 1.4vw, 20px);
    margin: clamp(12px, 1.4vw, 18px) 0 clamp(14px, 1.6vw, 22px);
    padding: 0 0 10px;
    list-style: none;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .78vw, 11px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(214, 232, 248, .92);
    border-bottom: 2px solid var(--bn-blue);
    max-width: max-content;
}

.bn-poster--lg .bn-poster__pnome { font-size: clamp(10px, .85vw, 12.5px); }
.bn-poster--lg .bn-poster__pdesc { font-size: clamp(8px, .7vw, 9.5px); }

.bn-lg__manuscrita {
    position: absolute;
    top: clamp(70px, 7.4vw, 112px);
    right: clamp(30px, 3.4vw, 58px);
    z-index: 3;
    margin: 0;
    text-align: center;
    font-family: var(--bn-font-script);
    font-size: clamp(18px, 1.9vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bn-white);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
    transform: rotate(-6deg);
}

.bn-lg__regiao {
    position: absolute;
    right: clamp(18px, 2.4vw, 42px);
    bottom: clamp(96px, 9vw, 130px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--bn-font-display);
    font-size: clamp(8.5px, .78vw, 11px);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(2, 13, 25, .72);
    backdrop-filter: blur(3px);
}

.bn-lg__regiao svg { color: var(--bn-yellow); flex: none; }
.bn-lg__regiao b { display: block; font-size: 1.18em; letter-spacing: .08em; }

@media (max-width: 900px) {
    .bn-poster--lg .bn-poster__texto { padding-bottom: var(--bn-space-lg); }
    .bn-poster--lg { padding-bottom: 156px; }
    .bn-lg__verbos { justify-content: center; margin-inline: auto; }
    .bn-lg__manuscrita,
    .bn-lg__regiao {
        position: relative;
        inset: auto;
        width: max-content;
        transform: none;
        margin: var(--bn-space-md) auto 0;
        justify-content: center;
        text-align: center;
    }
    .bn-lg__manuscrita { font-size: 20px; }
}

/* O tradutor do Google embrulha o texto em <font> com cor própria: sem isto o
   código do idioma ("PT") sai preto sobre o navy da barra utilitária.
   ⚠️ A cor é FIXA, não `inherit`: com `inherit` a regra (que tem id e ganha de
   qualquer classe) fazia o "PT" herdar o texto escuro do modo claro e sumir no
   cabeçalho navy do Amigas e das landings de produto — contraste medido 1,01. */
.bn-utility #langTrigger,
.bn-utility #langTrigger * { color: var(--bn-silver) !important; }

/* ==========================================================================
   26. CINTILAÇÃO DO MAPA-MÚNDI
   A máscara do mapa é um <path> único: lá os pontos não existem como elementos.
   Este SVG irmão recebe só os pontos que estão acendendo agora, nas MESMAS
   coordenadas do desenho. O enquadramento tem de espelhar `mask-size`/
   `mask-position` do `.bn-brand__map` — mudou um, muda o outro.
   ========================================================================== */
.bn-cintila {
    position: absolute;
    height: 92%;
    width: auto;
    left: 40%;
    top: 50%;
    transform: translate(-40%, -50%);
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

/* Medido no browser: o mapa desenha a 0,389 da escala do SVG, então o raio de
   3,1 do desenho vira uma bolinha de 2,4px na tela. Acender essa bolinha de 30%
   para 100% de branco mudava 0,37% da faixa — invisível. Quem faz o brilho ser
   percebido é o HALO, não o ponto: por isso o raio cresce e o drop-shadow é
   generoso (medidas em unidades do SVG, que a tela reduz a 0,389). */
.bn-cintila__ponto {
    fill: #fff;
    opacity: 0;
    /* 12s por ponto. Se mudar aqui, mudar o CICLO no _worldmap.html junto: é ele
       que sorteia o atraso inicial e troca o ponto de lugar a cada volta. */
    animation: bn-cintila 12s ease-in-out infinite;
}

/* Acende até o branco puro e some. O NÚCLEO é pequeno — pouco maior que a
   bolinha do mapa (raio 3,1); quem carrega a visibilidade é o halo. */
@keyframes bn-cintila {
    0%   { opacity: 0;   r: 3.1; filter: drop-shadow(0 0 0    rgba(255, 255, 255, 0)); }
    30%  { opacity: 1;   r: 4.2; filter: drop-shadow(0 0 22px rgba(255, 255, 255, .95)); }
    55%  { opacity: .95; r: 3.8; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .85)); }
    100% { opacity: 0;   r: 3.1; filter: drop-shadow(0 0 0    rgba(255, 255, 255, 0)); }
}

@media (max-width: 900px) {
    .bn-cintila { height: 74%; left: 62%; transform: translate(-62%, -50%); }
}

/* Quem pediu menos animação não vê nada piscando (o JS também já sai fora) */
@media (prefers-reduced-motion: reduce) {
    .bn-cintila { display: none; }
}

/* ==========================================================================
   27. ÂNCORA DE ANÚNCIO DO RODAPÉ ("efeito Guaraná")
   Barra fixa que sobe depois de 600px de rolagem, com botão de fechar. A peça
   TRAVA em 80px de altura — é a medida que a ficha técnica promete ao
   anunciante (ver AD_SLOT_META no app.py).
   ========================================================================== */
.bn-anchor {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px clamp(12px, 3vw, 24px);
    pointer-events: none;
}

.bn-anchor[hidden] { display: none; }

.bn-anchor__caixa {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 960px;
    margin-inline: auto;
    padding: 8px 10px;
    border-radius: var(--bn-radius-md);
    border: 1px solid var(--bn-border);
    background: rgba(2, 13, 25, .95);
    backdrop-filter: blur(8px);
    box-shadow: var(--bn-shadow-premium);
    pointer-events: auto;
}

.bn-anchor__peca { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.bn-anchor__peca img { max-height: 80px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.bn-anchor__x {
    flex: none; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .10); color: var(--bn-silver);
    transition: background-color .2s var(--bn-ease), color .2s var(--bn-ease);
}
.bn-anchor__x:hover { background: rgba(255, 255, 255, .2); color: var(--bn-white); }

@media (max-width: 640px) { .bn-anchor__peca img { max-height: 56px; } }

/* Peça larga no computador, peça vertical no celular. Classes próprias porque
   `.bn-ad__frame img` vence o `.hidden` do Tailwind por especificidade. */
.bn-ad__cel  { display: none !important; }
.bn-ad__desk { display: block !important; }
@media (max-width: 640px) {
    .bn-ad__cel  { display: block !important; }
    .bn-ad__desk { display: none !important; }
}

/* Billboard do topo: mora DENTRO do cromo, entre o menu e o hero. Sem este
   fundo navy ele abria uma faixa branca no meio da barra de navegação no tema
   claro. A faixa de respiro fica por conta do padding, não da margem. */
header .bn-ad {
    margin-block: 0;
    padding-block: 14px 16px;
}
header .bn-shell:has(.bn-ad) { background: var(--bn-navy-950); }