/* ═══════════════════════════════════════════════════════════════════════
   BILLIONS NETWORKING · CAMADA VISUAL COMPARTILHADA
   Carregada por index, evento-2026, hans-werner e sueli-henriques.

   A ideia: um único vocabulário de luxo editorial para as quatro páginas.
   Grotesca geométrica (Onest) em todo o site. A palavra que importa vai em
   peso leve e vermelho metálico, sem serifa. Fios finos, molduras de canto,
   números que contam, cortina de entrada, cursor e holofote.

   Regras do projeto que esta camada respeita:
   · texto de leitura nunca abaixo de 16px, etiqueta em caixa alta em 13px
   · quem pede menos movimento recebe a página parada, sem perder conteúdo
   · nada aqui depende do Tailwind do CDN (que só gera classe vista no HTML)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --bn-preto: #050505;
    --bn-vermelho: #E50914;
    --bn-vermelho-claro: #FF4B55;
    --bn-vermelho-luz: #FF9AA0;
    --bn-vinho: #7E0810;
    --bn-fio: rgba(255, 255, 255, .08);
    --bn-curva: cubic-bezier(.16, 1, .3, 1);
}

/* Destaque na mesma fonte do site (Onest), sem serifa: o contraste vem do peso
   leve contra o título pesado, e do vermelho metálico. A classe manteve o nome
   .serif para não reescrever as quatro páginas. */
.serif {
    font-family: 'Onest', sans-serif;
    font-style: italic; /* a Onest não tem itálico: o navegador inclina, e na geométrica fica bem */
    font-weight: 300;
    text-transform: none;
    letter-spacing: -.01em;
    font-size: 1em;
    line-height: 1;
    -webkit-text-stroke: 0;
}

/* Vermelho metálico: gradiente que varre devagar, como reflexo em folha. */
.vermelho-metal {
    background: linear-gradient(105deg, var(--bn-vinho) 0%, var(--bn-vermelho-claro) 28%, var(--bn-vermelho-luz) 50%, var(--bn-vermelho-claro) 72%, var(--bn-vinho) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: bn-brilho 7s linear infinite;
}
@keyframes bn-brilho { to { background-position: 220% center; } }

/* ── Título que sobe linha a linha ──
   O JS quebra o título nos <br> e embrulha cada linha numa máscara. A linha
   nasce escondida abaixo e sobe quando o título entra na tela. O respiro de
   baixo existe para o descendente da serifa e o sublinhado não serem
   cortados pela máscara. */
.bn-linha {
    display: block;
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}
.bn-linha > .bn-sobe {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 1.15s var(--bn-curva);
}
.visto .bn-linha > .bn-sobe, .bn-linha.visto > .bn-sobe { transform: translateY(0); }
.bn-linha:nth-child(2) > .bn-sobe { transition-delay: .09s; }
.bn-linha:nth-child(3) > .bn-sobe { transition-delay: .18s; }
.bn-linha:nth-child(4) > .bn-sobe { transition-delay: .27s; }

/* ── Olho de seção: número, rótulo e fio que cresce ── */
.olho {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    font-family: 'Onest', sans-serif;
    font-size: var(--t-rotulo);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bn-vermelho);
    margin-bottom: 1.1rem;
}
.olho.claro { color: var(--bn-vermelho-claro); }
.olho::before {
    content: attr(data-n);
    color: rgba(255, 255, 255, .38);
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}
.olho::after {
    content: '';
    width: 2.6rem;
    height: 1px;
    background: currentColor;
    opacity: .7;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s var(--bn-curva) .15s;
}
.olho.visto::after, .visto .olho::after, .active .olho::after { transform: scaleX(1); }

/* ── Ornamento divisor ── */
.bn-ornamento {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: rgba(255,75,85, .55);
    font-size: var(--t-rotulo);
    line-height: 1;
}
.bn-ornamento::before, .bn-ornamento::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,75,85, .35));
}
.bn-ornamento::after { background: linear-gradient(90deg, rgba(255,75,85, .35), transparent); }

/* ── Moldura de canto ──
   Quatro cantoneiras douradas desenhadas com gradientes, num único
   pseudo-elemento. Entram afastadas e transparentes, assentam quando o
   elemento é visto e fecham para dentro no hover. */
.moldura { position: relative; }
.moldura::after {
    content: '';
    position: absolute;
    inset: 22px;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    --c: var(--bn-vermelho-claro);
    background:
        linear-gradient(var(--c), var(--c)) top left / 20px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 1px 20px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 20px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 1px 20px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 20px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 1px 20px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 20px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 1px 20px no-repeat;
    transition: inset .7s var(--bn-curva), opacity .7s ease;
}
.moldura.visto::after { inset: 14px; opacity: .55; }
.moldura:hover::after, .moldura:active::after { inset: 9px; opacity: 1; }
.moldura.vermelha::after { --c: var(--bn-vermelho); }

/* ── Marca fantasma do rodapé ── */
.bn-fantasma {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: clamp(4.6rem, 19vw, 18rem);
    line-height: .78;
    letter-spacing: -.055em;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, .045);
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    margin: 4rem auto 0;
    transform: translateY(26%);
    mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
    transition: color 1s ease;
}
.bn-fantasma.visto { color: rgba(255, 75, 85, .09); }

/* ── Fundos de hero ──
   Grade de pontos finíssima com máscara radial, e uma aurora cônica que
   gira devagar. Só o transform anima, o blur é rasterizado uma vez. */
.bn-grade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px);
    background-size: 30px 30px;
    opacity: .28;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 10%, transparent 72%);
}
.bn-aurora {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110vmax;
    height: 110vmax;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg,
        transparent 0deg, transparent 200deg,
        rgba(229, 9, 20, .16) 250deg,
        rgba(255,75,85, .10) 290deg,
        transparent 330deg, transparent 360deg);
    filter: blur(70px);
    opacity: .9;
    will-change: transform;
    animation: bn-girar 46s linear infinite;
}
@keyframes bn-girar { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 767px) {
    .bn-aurora { animation: none; width: 160vmax; height: 160vmax; opacity: .7; }
}

/* ── Brilho que varre o botão principal ──
   A luz é um <span> injetado pelo JS, não um pseudo-elemento: os botões
   .magnetic-btn já usam ::before e ::after para o fundo vermelho, e disputar
   o ::after com eles deixava o botão sem fundo. */
.bn-brilho { position: relative; overflow: hidden; }
.bn-brilho > .bn-luz {
    position: absolute; top: -40%; bottom: -40%; left: -30%; width: 30%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg) translateX(-120%);
    transition: transform .9s var(--bn-curva);
    pointer-events: none; z-index: 0;
}
.bn-brilho:hover > .bn-luz, .bn-brilho:active > .bn-luz { transform: skewX(-18deg) translateX(520%); }

/* ── Link do menu com sublinhado que cresce ── */
.bn-link { position: relative; }
.bn-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -.5rem;
    width: 100%;
    height: 1px;
    background: var(--bn-vermelho);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--bn-curva);
}
.bn-link:hover::after, .bn-link:active::after { transform: scaleX(1); }

/* ── Cursor e holofote (desktop, ponteiro fino) ── */
.bn-cursor, .bn-anel, .bn-holofote { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    body.bn-cursor-on, body.bn-cursor-on a, body.bn-cursor-on button, body.bn-cursor-on summary, body.bn-cursor-on label { cursor: none; }
    .bn-cursor {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #fff;
        pointer-events: none;
        z-index: 10000;
        transform: translate(-50%, -50%);
        mix-blend-mode: difference;
        transition: width .25s ease, height .25s ease, opacity .3s ease;
    }
    .bn-anel {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 38px; height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .32);
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width .35s var(--bn-curva), height .35s var(--bn-curva), border-color .35s ease, background-color .35s ease, opacity .3s ease;
    }
    body.bn-sobre-link .bn-cursor { width: 0; height: 0; }
    body.bn-sobre-link .bn-anel {
        width: 64px; height: 64px;
        border-color: rgba(229, 9, 20, .85);
        background-color: rgba(229, 9, 20, .10);
    }
    body.bn-sobre-claro .bn-anel {
        border-color: rgba(255,75,85, .9);
        background-color: rgba(255,75,85, .10);
    }
    body.bn-cursor-fora .bn-cursor, body.bn-cursor-fora .bn-anel { opacity: 0; }

    /* Um disco de 1280px com o degradê no centro, que DESLIZA atrás do mouse.
       Antes era a tela inteira repintando o degradê a cada movimento, o que
       roubava quadros do próprio cursor. Mesmo desenho, custo quase zero. */
    .bn-holofote {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 1280px; height: 1280px;
        margin: -640px 0 0 -640px;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(640px circle at 50% 50%, rgba(229, 9, 20, .075), transparent 62%);
        will-change: transform;
        opacity: 0;
        transition: opacity 1.2s ease;
    }
    .bn-holofote.ligado { opacity: 1; }
}

/* ── Linha de progresso da rolagem ── */
.bn-progresso {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    z-index: 70;
    pointer-events: none;
    background: linear-gradient(90deg, var(--bn-vermelho), var(--bn-vermelho-claro));
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
}

/* ── Cortina de entrada ──
   Criada pelo JS, nunca está no HTML: sem JS não existe cortina e a página
   abre normal. Aparece uma vez por sessão. */
.bn-cortina {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: var(--bn-preto);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .85s var(--bn-curva), visibility 0s linear .85s;
}
.bn-cortina::before {
    content: '';
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bn-vermelho-claro), transparent);
    animation: bn-fio-cresce .7s var(--bn-curva) .05s forwards;
}
@keyframes bn-fio-cresce { to { width: min(260px, 60vw); } }
.bn-cortina.sobe { transform: translateY(-101%); visibility: hidden; }

/* ── Números que contam ── */
[data-contar] { font-variant-numeric: tabular-nums; }

/* ── Retratos: grão sutil que some no hover ── */
.bn-retrato-veu { position: relative; }
.bn-retrato-veu::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(229, 9, 20, .18), transparent 45%, rgba(255,75,85, .10));
    mix-blend-mode: overlay;
    transition: opacity .8s ease;
}
.bn-retrato-veu:hover::before { opacity: 0; }

/* ── Quem pede menos movimento ── */
@media (prefers-reduced-motion: reduce) {
    .vermelho-metal { animation: none; }
    .bn-linha > .bn-sobe { transform: none; transition: none; }
    .olho::after { transform: scaleX(1); transition: none; }
    .moldura::after { transition: none; inset: 14px; opacity: .55; }
    .bn-aurora { animation: none; }
    .bn-brilho > .bn-luz { display: none; }
    .bn-cortina { display: none; }
    .bn-holofote { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA ÚNICA
   Antes cada página escolhia tamanho no braço (h1 de 84 a 104px, h2 de 30
   a 72px). Aqui existe uma escala só, fluida entre celular e desktop, e ela
   se impõe sobre as classes soltas do Tailwind. O seletor com [class] tem
   especificidade (0,1,1) e ganha das utilidades text-* sem !important.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --t-h1:     clamp(2.5rem, 1.3rem + 4.4vw, 5rem);      /* 40 → 80 */
    --t-h2:     clamp(1.9rem, 1.15rem + 2.9vw, 3.5rem);   /* 30 → 56 */
    --t-h3:     clamp(1.3rem, 1.12rem + .7vw, 1.65rem);   /* 21 → 26 */
    --t-h4:     1.2rem;                                    /* 19 */
    --t-numero: clamp(2.6rem, 1.9rem + 2.6vw, 4.25rem);   /* 42 → 68 */
    --t-lead:   clamp(1.0625rem, 1rem + .3vw, 1.2rem);    /* 17 → 19 */
    --t-corpo:  1.0625rem;                                 /* 17 */
    --t-botao:  .9375rem;                                  /* 15 */
    --t-rotulo: .9375rem;                                  /* 15, piso do site */
}

h1[class] { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.03em; }
h2[class] { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.025em; }
h3[class] { font-size: var(--t-h3); line-height: 1.2;  letter-spacing: -.015em; }
h4[class] { font-size: var(--t-h4); line-height: 1.3;  letter-spacing: -.01em; }
.cta-hans-titulo, .na-sala-pessoa b { font-size: var(--t-h4); }
.rol .rol-nome { font-size: var(--t-h3); }

/* Parágrafos: corpo por padrão, abertura de seção um degrau acima. */
p[class] { font-size: var(--t-corpo); line-height: 1.65; }
p[class*="text-xl"], p[class*="text-lg"] { font-size: var(--t-lead); line-height: 1.6; }

/* Números grandes (estatísticas, contadores, preço). */
p[class*="text-5xl"], p[class*="text-[5"], p[class*="text-[7"], .acesso-preco,
p[data-contar] { font-size: var(--t-numero); line-height: 1; letter-spacing: -.03em; }

/* Etiquetas em caixa alta: 13px, sempre. Botões em 14px. */
p[class*="uppercase"], span[class*="uppercase"], div[class*="uppercase"], label[class*="uppercase"] { font-size: var(--t-rotulo); }
a[class*="uppercase"], button[class*="uppercase"] { font-size: var(--t-botao); }
a.bn-link, #navbarInner a[class*="text-[13px]"], #navInner a[class*="text-[13px]"] { font-size: var(--t-rotulo); }
.olho { font-size: var(--t-rotulo); }

/* Letreiros de fundo (GUEST SPEAKERS, THE STAGE, BUILT): decorativos, mas
   com teto. Marquee anda no corpo de h2. */
div[class*="text-[6rem]"] { font-size: clamp(4.5rem, 13vw, 11rem); }
.marquee span[class], .marquee-content span[class] { font-size: var(--t-h2); }

/* Números que valem como número dentro de círculo (o "25" da home) ficam no h3. */
span[class*="text-4xl"], span[class*="text-5xl"] { font-size: var(--t-numero); }
.marquee span[class*="text-4xl"] { font-size: var(--t-h2); }

/* Pequenos que ficaram grandes demais com o piso de 16px em caixa alta */
.rol .rol-selo, .rol-selo { font-size: var(--t-rotulo); letter-spacing: .06em; }

/* ═══════════════════════════════════════════════════════════════════════
   MICRO-INTERAÇÕES E MOVIMENTO (rodada 2026)
   Tudo progressivo: navegador que não suporta algo simplesmente não anima.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Transição entre as páginas ──
   Navegar entre home, evento, Hans e Sueli vira um fundido em vez de piscar
   branco. O logo do menu persiste de uma página para a outra. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
nav img { view-transition-name: bn-logo; }

/* ── Ícones que se desenham ──
   O JS normaliza o comprimento de cada traço (pathLength=1), então a mesma
   regra serve para qualquer ícone. Desenha ao ser visto e redesenha quando
   o cursor entra no cartão. */
.bn-icone * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--bn-curva) .15s; }
.bn-icone.visto * { stroke-dashoffset: 0; }
.bento-card:hover .bn-icone.visto *, .spotlight-card:hover .bn-icone.visto *,
.fatos > div:hover .bn-icone.visto *, .bn-icone-alvo:hover .bn-icone.visto * { animation: bn-redesenha .9s var(--bn-curva); }
@keyframes bn-redesenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ── Anel dos 60 lugares ──
   Sessenta pontos num círculo, acendendo um depois do outro. O JS monta o
   SVG dentro de qualquer [data-sessenta]. */
[data-sessenta] { display: block; }
[data-sessenta] svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bn-assento { fill: rgba(255, 255, 255, .16); transform-box: fill-box; transform-origin: center; animation: bn-assento 6s linear infinite; }
@keyframes bn-assento {
    0%   { fill: rgba(255, 255, 255, .16); transform: scale(1); }
    2%   { fill: #FF9AA0; transform: scale(2.1); }
    9%   { fill: #E50914; transform: scale(1.25); }
    45%  { fill: rgba(229, 9, 20, .55); transform: scale(1); }
    100% { fill: rgba(255, 255, 255, .16); transform: scale(1); }
}
.bn-anel-trilho { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: .4; }

/* ── Texto que acende com a rolagem ── */
.bn-palavra { opacity: .22; transition: opacity .35s ease; }
.bn-palavra.acesa { opacity: 1; }

/* ── Borda de luz que segue o cursor ──
   Só onde o ::after está livre (cartão com moldura já usa). */
.bento-card:not(.moldura)::after, .spotlight-card:not(.moldura)::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    pointer-events: none; z-index: 3; opacity: 0; transition: opacity .45s ease;
    background: radial-gradient(260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 75, 85, .95), transparent 62%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.bento-card:not(.moldura):hover::after, .spotlight-card:not(.moldura):hover::after { opacity: 1; }

/* ── Foto que assenta ao aparecer ── */
.moldura:not(.visto) > img { transform: scale(1.14); }
.moldura > img { transition: transform 1.6s var(--bn-curva), filter .8s ease; }

/* ── Botões: afundam no toque, seta sai e volta ── */
a[class*="rounded-full"], a[class*="rounded-2xl"], button[class*="rounded"], .cta-hans-card { -webkit-tap-highlight-color: transparent; }
a[class*="rounded-full"]:active, a[class*="rounded-2xl"]:active, button[class*="rounded"]:active { scale: .97; }
a:hover .lucide-arrow-right, button:hover .lucide-arrow-right,
a:hover .lucide-arrow-up-right, .cta-hans-card:hover .cta-hans-botao svg { animation: bn-seta .6s var(--bn-curva); }
@keyframes bn-seta {
    0%   { transform: translateX(0); opacity: 1; }
    45%  { transform: translateX(12px); opacity: 0; }
    46%  { transform: translateX(-12px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ── FAQ que abre deslizando (recurso novo, quem não tem abre seco) ── */
:root { interpolate-size: allow-keywords; }
.faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .5s var(--bn-curva), opacity .4s ease, content-visibility .5s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.faq-item { transition: border-color .4s ease, background-color .4s ease; }
.faq-item[open] { border-color: rgba(229, 9, 20, .3); }

/* ── Indicador de rolagem do hero ── */
.bn-rolar { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 12; width: 1px; height: 54px; background: rgba(255, 255, 255, .12); overflow: hidden; pointer-events: none; }
.bn-rolar::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, #FF4B55); animation: bn-rolar 2.2s var(--bn-curva) infinite; }
@keyframes bn-rolar { from { transform: translateY(-110%); } to { transform: translateY(280%); } }
@media (max-height: 700px) { .bn-rolar { display: none; } }

/* ── Retratos com profundidade ── */
.bn-tilt { transform-style: preserve-3d; will-change: transform; }

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR E TABLET CENTRALIZADOS
   Em coluna única, cabeçalho de seção encostado à esquerda lê como falta de
   conteúdo à direita. Lista e texto longo continuam à esquerda de propósito.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    div:has(> h2[class]), div:has(> .olho) { text-align: center; }
    div:has(> h2[class]) > p { margin-left: auto; margin-right: auto; }
    .flex:has(> div > h2[class]) { align-items: center; text-align: center; }
    .flex:has(> div > h2[class]) > p { text-align: center; margin-left: auto; margin-right: auto; }
    div:has(> h2[class]) ul, div:has(> h2[class]) li, div:has(> h2[class]) form { text-align: left; }
}
@media (max-width: 767px) {
    .bento-card, .spotlight-card:not(.fatos) { text-align: center; }
    .bento-card p, .spotlight-card p { margin-left: auto; margin-right: auto; }
    .bento-card .w-11, .bento-card .w-12, .bento-card .w-14,
    .spotlight-card .w-12, .spotlight-card .w-14 { margin-left: auto; margin-right: auto; }
    .bento-card .flex.justify-between, .spotlight-card .flex.justify-between { flex-direction: column-reverse; align-items: center; gap: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .bn-icone * { stroke-dashoffset: 0; transition: none; animation: none !important; }
    .bn-assento { animation: none; fill: rgba(229, 9, 20, .55); }
    .bn-palavra { opacity: 1; transition: none; }
    .moldura:not(.visto) > img { transform: none; }
    .bn-rolar { display: none; }
    a:hover .lucide-arrow-right, .cta-hans-card:hover .cta-hans-botao svg { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VOCABULÁRIO 2026 (feixe na borda, rostos empilhados, reflexo, foco, doca)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Feixe de luz orbitando a borda ──
   <span class="bn-feixe"> injetado pelo JS em todo [data-feixe]. O ângulo é
   uma propriedade registrada, por isso dá para animar o conic-gradient. */
@property --bn-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bn-feixe {
    position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    pointer-events: none; z-index: 4;
    background: conic-gradient(from var(--bn-ang), transparent 0 76%, #E50914 86%, #FF9AA0 95%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: bn-feixe 7s linear infinite;
}
@keyframes bn-feixe { to { --bn-ang: 360deg; } }

/* ── Rostos empilhados: quem já confirmou ── */
.bn-confirmados {
    display: inline-flex; align-items: center; gap: .9rem; margin-top: 2.25rem;
    padding: .45rem 1.2rem .45rem .5rem; border-radius: 999px; text-align: left;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bn-rostos { display: flex; flex-shrink: 0; }
.bn-rostos img {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 18%;
    border: 2px solid #0a0a0a; margin-left: -12px; filter: grayscale(100%) contrast(1.05);
    transition: margin-left .5s var(--bn-curva), filter .5s ease;
}
.bn-rostos img:first-child { margin-left: 0; }
.bn-confirmados:hover .bn-rostos img, .bn-confirmados:active .bn-rostos img { margin-left: -5px; filter: grayscale(0%); }
.bn-confirmados:hover .bn-rostos img:first-child { margin-left: 0; }
.bn-confirmados p { margin: 0; font-size: 1rem; line-height: 1.35; color: #adadad; }
.bn-confirmados b { color: #fff; font-weight: 600; }
@media (max-width: 640px) {
    .bn-confirmados { flex-direction: column; gap: .7rem; border-radius: 1.5rem; padding: 1rem 1.25rem; text-align: center; }
}

/* ── Reflexo varrendo o texto dos selos ── */
.bn-reluz {
    --c: #cfcfcf;
    background: linear-gradient(110deg, var(--c) 38%, #fff 50%, var(--c) 62%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: bn-reluz 4.5s ease-in-out infinite;
}
.bn-reluz.claro { --c: #FF4B55; }
@keyframes bn-reluz { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }

/* ── Título entra desfocado e ganha foco (soma com a subida por linha) ── */
.bn-linha > .bn-sobe { filter: blur(14px); opacity: 0; transition: transform 1.15s var(--bn-curva), filter 1.1s ease, opacity .9s ease; }
.visto .bn-linha > .bn-sobe, .bn-linha.visto > .bn-sobe { filter: blur(0); opacity: 1; }

/* ── Doca flutuante do celular ── */
.bn-doca {
    position: fixed; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); z-index: 45;
    transform: translate(-50%, 160%);
    display: flex; align-items: center; gap: .8rem; white-space: nowrap;
    padding: .4rem .4rem .4rem 1.1rem; border-radius: 999px; max-width: calc(100vw - 1.25rem);
    background: rgba(10, 10, 10, .74); border: 1px solid rgba(255, 255, 255, .13);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .95), 0 0 0 1px rgba(229, 9, 20, .08);
    transition: transform .65s var(--bn-curva);
}
.bn-doca.visivel { transform: translate(-50%, 0); }
.bn-doca-texto { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #cfcfcf; }
.bn-doca-texto::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E50914; box-shadow: 0 0 0 0 rgba(229, 9, 20, .6); animation: bn-pulso 2s ease-out infinite; }
@keyframes bn-pulso { to { box-shadow: 0 0 0 9px rgba(229, 9, 20, 0); } }
.bn-doca a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; background: #E50914; color: #fff; font-size: var(--t-botao); font-weight: 700; text-decoration: none; }
.bn-doca a:active { scale: .96; }
@media (min-width: 1024px) { .bn-doca { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .bn-feixe { animation: none; opacity: .5; }
    .bn-reluz { animation: none; }
    .bn-linha > .bn-sobe { filter: none; opacity: 1; }
    .bn-doca { transition: none; }
    .bn-doca-texto::before { animation: none; }
}

/* Ícone solto dentro de cartão centralizado: o svg é bloco, então sem margem
   automática ele fica à esquerda enquanto o texto vai para o centro. */
@media (max-width: 767px) {
    .bento-card svg.lucide, .spotlight-card:not(.fatos) svg.lucide { margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RITMO VERTICAL ÚNICO
   Antes: seções com 56, 96, 112, 128 e 144px no desktop, e o evento com
   128px no celular onde a home usava 80. Agora são três medidas, fluidas
   entre celular e desktop, valendo para as quatro páginas:
     --s-secao   respiro de seção principal            72 → 128
     --s-faixa   respiro de faixa secundária           56 → 96
     --s-cabeca  do cabeçalho da seção ao conteúdo     40 → 72
   Seletor com [class*=...] tem especificidade (0,1,1) e vence as utilidades
   py-* e mb-* do Tailwind sem !important.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --s-secao:  clamp(4.5rem, 2.9rem + 6.8vw, 8rem);
    --s-faixa:  clamp(3.5rem, 2.6rem + 3.9vw, 6rem);
    --s-cabeca: clamp(2.5rem, 1.9rem + 2.7vw, 4.5rem);
    --s-titulo: 1.35rem;   /* do título ao texto de abertura */
    --s-grade:  1.5rem;    /* entre cartões */
}

section[class*="py-"], footer[class*="py-"] { padding-top: var(--s-secao); padding-bottom: var(--s-secao); }
#patrocinio > div[class*="pt-20"] { padding-top: var(--s-secao); }
#patrocinio > div[class*="py-20"] { padding-top: var(--s-secao); padding-bottom: var(--s-secao); }

/* Faixas secundárias: FAQ, imprensa, lista de projetos, bloco "Por trás do Billions". */
section.py-24:not([class*="md:py-32"]), section[class*="md:py-24"], section.cta-hans { padding-top: var(--s-faixa); padding-bottom: var(--s-faixa); }

/* O manifesto tinha 144px + 80 de margem. A margem só existe para a faixa de
   fatos, que avança por cima do fim do hero, ter onde pousar. */
#manifesto { margin-top: 3.5rem; }

/* Cabeçalho da seção → conteúdo */
div:has(> h2[class])[class*="mb-"], .flex:has(> div > h2[class])[class*="mb-"] { margin-bottom: var(--s-cabeca); }
div.grid[class*="mt-16"] { margin-top: var(--s-cabeca); }

/* Título → texto de abertura */
h2[class] { margin-top: 0; margin-bottom: var(--s-titulo); }
h2[class]:last-child { margin-bottom: 0; }
h2[class] + p[class] { margin-top: 0; }

/* Entre cartões das grades principais */
div.grid[class*="md:grid-cols-3"], div.grid[class*="lg:grid-cols-3"],
div.grid[class*="lg:grid-cols-4"], div.grid[class*="md:grid-cols-6"] { gap: var(--s-grade); }

/* ── Lista editorial em linhas (substitui trio de cartões com ícone) ── */
.bn-lista { list-style: none; margin: 0 0 var(--s-cabeca); padding: 0; counter-reset: bnl; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bn-lista > li {
    counter-increment: bnl;
    display: grid; grid-template-columns: 3rem minmax(0, .9fr) minmax(0, 1.4fr); gap: .5rem 2rem; align-items: baseline;
    padding: 1.75rem 0; border-top: 1px solid rgba(255, 255, 255, .09);
    transition: padding-left .4s var(--bn-curva), background-color .4s ease;
}
.bn-lista > li::before { content: counter(bnl, decimal-leading-zero); font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .12em; color: #5e5e5e; transition: color .3s ease; }
.bn-lista > li:hover { padding-left: .75rem; background-color: rgba(255, 255, 255, .02); }
.bn-lista > li:hover::before { color: var(--bn-vermelho); }
.bn-lista h3 { margin: 0; font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.bn-lista h3 small { display: block; margin-top: .45rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bn-vermelho); }
.bn-lista p { margin: 0; color: #adadad; font-size: var(--t-corpo); line-height: 1.65; }
@media (max-width: 1023px) {
    .bn-lista > li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .6rem; padding: 1.6rem 0; }
    .bn-lista > li:hover { padding-left: 0; }
}

/* ── Fatos em linha (o que o patrocinador leva), no lugar de depoimento anônimo ── */
.bn-fatos-linha { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.bn-fatos-linha > div { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bn-fatos-linha b { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.02em; color: #fff; min-width: 4.5rem; }
.bn-fatos-linha span { color: #adadad; font-size: var(--t-corpo); line-height: 1.5; }
@media (max-width: 1023px) { .bn-fatos-linha > div { flex-direction: column; align-items: center; text-align: center; gap: .2rem; } .bn-fatos-linha b { min-width: 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   TABLET TAMBÉM CENTRALIZADO
   A centralização dos cartões valia só até 767px. Entre 768 e 1023 os
   cartões ficam largos e o conteúdo encostado à esquerda sobrava vazio à
   direita. Agora o tablet segue o celular.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .bento-card, .spotlight-card:not(.fatos), .acesso, .bn-centro-tablet { text-align: center; }
    .bento-card p, .spotlight-card p, .acesso p, .bn-centro-tablet p { margin-left: auto; margin-right: auto; }
    .bento-card .w-11, .bento-card .w-12, .bento-card .w-14, .bento-card .inicial,
    .spotlight-card .w-12, .spotlight-card .w-14, .bn-centro-tablet .w-11 { margin-left: auto; margin-right: auto; }
    .bento-card svg.lucide, .spotlight-card:not(.fatos) svg.lucide { margin-left: auto; margin-right: auto; }
    .bento-card .flex.justify-between, .spotlight-card .flex.justify-between { flex-direction: column-reverse; align-items: center; gap: .9rem; }

    /* Listas dentro de cartão centralizado: o marcador lateral perde o sentido,
       cada item vira uma linha centrada. */
    .bn-centro-tablet li { display: block; text-align: center; }
    .bn-centro-tablet li > span:first-child { display: none; }
    .bn-centro-tablet ul { max-width: 30rem; margin-left: auto; margin-right: auto; }

    /* Acessos do evento: régua e itens no eixo */
    .acesso .acesso-regua { margin-left: auto; margin-right: auto; }
    .acesso .acesso-item { justify-content: center; text-align: left; }
    .acesso .flex.items-center.gap-2 { justify-content: center; }
}

/* ── Faixa vermelha de chamada (Hans e Sueli) ── */
.bn-faixa-vermelha { position: relative; overflow: hidden; background: #E50914; color: #fff; }
.bn-faixa-vermelha > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .32; filter: grayscale(100%); }
.bn-faixa-vermelha::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #E50914 0%, rgba(229, 9, 20, .94) 45%, rgba(229, 9, 20, .55) 100%); }
.bn-faixa-vermelha > div { position: relative; z-index: 2; }
.bn-faixa-vermelha .serif { color: #050505; }
.bn-botao-preto {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem; white-space: nowrap;
    min-height: 58px; padding: 0 2.1rem; border-radius: 999px; background: #050505; color: #fff;
    font-size: var(--t-botao); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); transition: background-color .35s ease, color .35s ease, transform .35s var(--bn-curva);
}
.bn-botao-preto:hover { background: #fff; color: #050505; transform: translateY(-2px); }
@media (max-width: 767px) { .bn-botao-preto { width: 100%; white-space: normal; text-align: center; padding: .9rem 1.5rem; } }

/* ── Área de toque ──
   Auditoria no celular: o botão do menu tinha 33px de altura e dois links de
   texto tinham 20 e 23px. Dedo precisa de 44. */
@media (max-width: 1023px) {
    #navbarInner a[class*="rounded-full"], #navInner a[class*="rounded-full"] { min-height: 44px; display: inline-flex; align-items: center; }
}
a.inline-flex:not([class*="rounded"]):not([class*="px-"]) { min-height: 44px; }

/* Mancha decorativa de 600px vazava da seção no celular (o body escondia, mas
   a seção não deve depender disso). */
#experiencia { overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME DIRIGIDA: ritmo compacto → GIGANTE → foto cheia → grade
   O problema não era falta de efeito, era ritmo: container, card, container,
   card, do começo ao fim. Estes blocos alternam escala.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rótulo técnico: legenda de revista, números alinhados ── */
.bn-regua, .bn-foto-legenda, .bn-cena-meta {
    font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55);
}
.bn-regua {
    position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 12;
    display: flex; align-items: center; gap: 1.25rem;
    max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; white-space: nowrap;
}
.bn-regua i, .bn-foto-legenda i { flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
section:has(> .bn-regua) > .bn-rolar { display: none; }
@media (max-width: 767px) {
    .bn-regua { position: static; flex-wrap: wrap; justify-content: center; gap: .4rem 1.1rem; margin-top: 2.5rem; padding-bottom: 1.75rem; letter-spacing: .16em; }
    .bn-regua i { display: none; }
    section:has(> .bn-regua) { flex-direction: column; }
}

/* ── Entrada cinética de uma palavra do título ── */
.bn-cinetico { animation: bn-brilho 7s linear infinite, bn-expande 1.5s var(--bn-curva) .5s both; }
@keyframes bn-expande { from { letter-spacing: .2em; } to { letter-spacing: -.01em; } }

/* ── Cena de scroll ──
   Parada e empilhada por padrão. O JS liga o modo .ativa (palco fixo, quadros
   sobrepostos dirigidos pela rolagem) só quando dá para animar. */
.bn-cena { position: relative; background: #050505; border-top: 1px solid rgba(255, 255, 255, .05); }
.bn-cena-palco { display: grid; gap: 3rem; justify-items: center; padding: var(--s-secao) 1.25rem; text-align: center; overflow: hidden; }
.bn-cena-quadro { display: flex; flex-direction: column; align-items: center; line-height: .86; }
.bn-cena-quadro b { font-size: clamp(6.5rem, 30vw, 24rem); font-weight: 800; letter-spacing: -.06em; color: #fff; font-variant-numeric: tabular-nums; }
.bn-cena-quadro i { margin-top: .12em; font-size: clamp(1.9rem, 6vw, 5rem); font-style: italic; font-weight: 300; letter-spacing: -.02em; color: var(--bn-vermelho-claro); }
.bn-cena-meta { display: none; }
.bn-cena-barra { display: none; }

.bn-cena.ativa { height: 270vh; }
.bn-cena.ativa .bn-cena-palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: block; padding: 0; }
.bn-cena.ativa .bn-cena-quadro {
    position: absolute; inset: 0; justify-content: center;
    opacity: var(--o, 0); transform: scale(var(--e, .9)); filter: blur(var(--b, 0px));
    will-change: opacity, transform;
}
.bn-cena.ativa .bn-cena-meta { display: flex; justify-content: space-between; position: absolute; top: 7.5rem; left: 1.5rem; right: 1.5rem; max-width: 77rem; margin: 0 auto; z-index: 2; }
.bn-cena.ativa .bn-cena-barra { display: block; position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); width: min(220px, 50vw); height: 1px; background: rgba(255, 255, 255, .14); }
.bn-cena.ativa .bn-cena-barra span { display: block; height: 100%; background: var(--bn-vermelho); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.bn-cena.ativa .bn-cena-palco::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(229, 9, 20, calc(.05 + var(--p, 0) * .13)), transparent 60%); pointer-events: none;
}

/* ── Tipografia gigante ── */
.bn-gigante { padding: var(--s-secao) 1.25rem; background: #050505; text-align: center; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .05); }
.bn-gigante h2 { margin: 0; font-size: clamp(3.2rem, 13.5vw, 12.5rem); font-weight: 800; line-height: .9; letter-spacing: -.055em; color: #fff; }
.bn-gigante h2 em { font-weight: 300; font-style: italic; letter-spacing: -.03em; color: var(--bn-vermelho-claro); }
.bn-gigante .bn-palavra { opacity: .12; }
.bn-gigante .bn-palavra.acesa { opacity: 1; }

/* ── Foto de ponta a ponta, sem texto por cima ── */
.bn-foto-cheia { position: relative; height: clamp(320px, 62vh, 760px); overflow: hidden; background: #050505; }
.bn-foto-cheia img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.bn-foto-cheia::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, transparent 22%, transparent 62%, rgba(5, 5, 5, .9) 100%); }
.bn-foto-legenda { position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 2; display: flex; align-items: center; gap: 1.25rem; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; white-space: nowrap; color: rgba(255, 255, 255, .7); }
@media (max-width: 767px) {
    .bn-foto-cheia img { object-position: 18% center; }
    .bn-foto-legenda { flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; letter-spacing: .14em; }
    .bn-foto-legenda i { display: none; }
}

/* ── Numeração editorial: PLAYER / 01 e REGISTRO / 01 ── */
#speakers .grid { counter-reset: bn-player; }
#speakers .moldura::before {
    counter-increment: bn-player; content: 'Player / ' counter(bn-player, decimal-leading-zero);
    position: absolute; top: 1.9rem; left: 2rem; z-index: 25; pointer-events: none;
    font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .62); transition: color .4s ease;
}
#speakers .moldura:hover::before { color: var(--bn-vermelho-claro); }
#atmosfera .grid { counter-reset: bn-reg; }
#atmosfera .grid > div { counter-increment: bn-reg; }
#atmosfera .grid > div::after {
    content: 'Registro / ' counter(bn-reg, decimal-leading-zero);
    position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 5; pointer-events: none;
    font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

@media (prefers-reduced-motion: reduce) {
    .bn-cinetico { animation: none; }
    .bn-gigante .bn-palavra { opacity: 1; }
}

@media (min-width: 768px) { section:has(> .bn-regua) { padding-bottom: 4.5rem; } }

/* No celular a doca flutuante ocupa o pé da tela: a barra de progresso da cena sobe. */
@media (max-width: 1023px) { .bn-cena.ativa .bn-cena-barra { bottom: 6.5rem; } .bn-cena.ativa .bn-cena-meta { top: 6.5rem; letter-spacing: .14em; } }

/* ═══════════════════════════════════════════════════════════════════════
   EVENTO 2026: movimento e comportamento por cima do desenho que já existe.
   Regra da casa: nada disso toca nos três acessos nem no formulário além de
   foco e hover discretos. Ali é conversão.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero: abertura de filme ── */
.bn-zoom-lento { animation: bn-zoom 20s ease-out both; }
@keyframes bn-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.bn-traco { display: inline-block; padding-right: .08em; clip-path: inset(-10% 100% -10% 0); animation: bn-brilho 7s linear infinite, bn-traco 1.35s var(--bn-curva) .8s forwards; }
@keyframes bn-traco { to { clip-path: inset(-10% -6% -10% 0); } }

/* ── "É o filtro.": enche de vermelho conforme a rolagem ──
   Parte de um cinza apagado (letra só de contorno foi vetada no projeto). */
.bn-preenche {
    display: inline-block; font-size: clamp(3rem, 11vw, 8.5rem); line-height: 1; padding: .06em .08em .14em 0;
    background: linear-gradient(90deg, #E50914 0, #FF4B55 calc(var(--f, 0) * 100%), rgba(255, 255, 255, .15) calc(var(--f, 0) * 100%));
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* ── Elenco: quem está sob o cursor fica, os outros recuam ── */
@media (hover: hover) and (min-width: 1024px) {
    #palcoGrid > div { transition: opacity .55s ease, transform .3s cubic-bezier(.175, .885, .32, 1.275); }
    #palcoGrid:hover > div:not(:hover) { opacity: .4; }
}

/* ── Travessia da noite (desktop): cabeçalho fixo, quadros passando ── */
.bn-passos { display: none; }
@media (min-width: 1024px) {
    .bn-travessia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; align-items: start; }
    .bn-travessia > div:first-child { position: sticky; top: 9.5rem; margin-bottom: 0; }
    .bn-travessia .exp-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(330px, 50vh); gap: 2rem; }
    .bn-travessia .exp-grid > div { grid-column: auto; grid-row: auto; opacity: .32; transition: opacity .65s ease, transform .3s cubic-bezier(.175, .885, .32, 1.275), border-color .6s ease; }
    .bn-travessia .exp-grid > div.atual { opacity: 1; border-color: rgba(229, 9, 20, .35); }

    .bn-passos { display: block; list-style: none; margin: 2.75rem 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
    .bn-passos li { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09); color: #5e5e5e; font-size: var(--t-h4); font-weight: 600; letter-spacing: -.01em; transition: color .45s ease, padding-left .45s var(--bn-curva); }
    .bn-passos li span { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; transition: color .45s ease; }
    .bn-passos li.atual { color: #fff; padding-left: .8rem; }
    .bn-passos li.atual span { color: var(--bn-vermelho); }
}

/* ── Foto que acompanha o cursor na lista de quem já subiu ── */
.bn-espia {
    position: fixed; top: 0; left: 0; z-index: 60; width: 220px; aspect-ratio: 3 / 4; border-radius: 1.1rem; overflow: hidden;
    pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform, opacity;
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .95); background: #0a0a0a;
}
.bn-espia.visivel { opacity: 1; }
.bn-espia img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(100%) contrast(1.08); }
.bn-espia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(229, 9, 20, .22), transparent 55%); mix-blend-mode: overlay; }
@media (hover: hover) and (min-width: 1024px) { .rol-item[data-foto] { cursor: none; } }

/* ── Deriva: a foto anda um pouco mais devagar que a página ── */
[data-deriva] { will-change: transform; transform: scale(1.14); }

/* ── Capítulos na lateral (só em tela bem larga, onde sobra margem) ── */
.bn-capitulos { display: none; }
@media (min-width: 1440px) {
    .bn-capitulos { display: flex; flex-direction: column; gap: .85rem; position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
    .bn-capitulos.visivel { opacity: 1; pointer-events: auto; }
    .bn-capitulos a { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-height: 0; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .32); text-decoration: none; transition: color .4s ease; }
    .bn-capitulos a span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--bn-curva); }
    .bn-capitulos a::after { content: ''; width: 16px; height: 1px; background: currentColor; transition: width .45s var(--bn-curva), background-color .4s ease; }
    .bn-capitulos a:hover span, .bn-capitulos a.atual span { max-width: 9rem; }
    .bn-capitulos a:hover, .bn-capitulos a.atual { color: #fff; }
    .bn-capitulos a.atual::after { width: 34px; background: var(--bn-vermelho); }
}

/* ── Campo do formulário responde ao foco, sem espetáculo ── */
input[class*="rounded-xl"] { transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease; }
input[class*="rounded-xl"]:focus { box-shadow: 0 0 0 4px rgba(229, 9, 20, .13); background-color: rgba(0, 0, 0, .7); }

@media (prefers-reduced-motion: reduce) {
    .bn-zoom-lento { animation: none; }
    .bn-traco { animation: none; clip-path: none; }
    .bn-preenche { --f: 1; }
    [data-deriva] { transform: scale(1.04); }
    .bn-travessia .exp-grid > div { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS DE PESSOA (Hans e Sueli): microinteração e construção de autoria
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Nome do autor no menu ── */
.bn-nav-autor { display: none; }
@media (min-width: 640px) {
    .bn-nav-autor { display: inline-flex; align-items: center; gap: .75rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; }
    .bn-nav-autor::before { content: ''; width: 1px; height: 1.1rem; background: rgba(255, 255, 255, .22); transform: rotate(18deg); }
}

/* ── Retrato entra por máscara vertical ── */
.retrato.moldura { clip-path: inset(0 0 0 0 round 2rem); transition: clip-path 1.5s var(--bn-curva); }
/* O gatilho é o bloco pai (.reveal), não o próprio retrato: um elemento recortado em
   100% não conta como visível para o IntersectionObserver, então ele nunca seria
   marcado como visto e a foto ficava invisível para sempre. */
.reveal:not(.active) > .retrato.moldura { clip-path: inset(100% 0 0 0 round 2rem); }

/* ── Esteira editorial: a palavra sob o cursor fica, as outras recuam ── */
@media (hover: hover) {
    .marquee-trilho > span[class*="text-4xl"] { transition: opacity .4s ease, color .4s ease; }
    .marquee:hover .marquee-trilho > span[class*="text-4xl"] { opacity: .28; }
    .marquee:hover .marquee-trilho > span[class*="text-4xl"]:hover { opacity: 1; color: #fff; }
    .marquee:hover .marquee-trilho { animation-play-state: paused; }
    .marquee-trilho > span.rounded-full { transition: opacity .4s ease, border-color .4s ease, color .4s ease; }
    .marquee:hover .marquee-trilho > span.rounded-full { opacity: .35; }
    .marquee:hover .marquee-trilho > span.rounded-full:hover { opacity: 1; color: #fff; border-color: rgba(229, 9, 20, .6); }
}

/* ── Cartões: número com profundidade, ícone que anda, fio vermelho no pé ── */
.bento-card .bento-num { transition: color .5s ease, transform .6s var(--bn-curva); }
.bento-card:hover .bento-num { transform: translate(-6px, 4px) scale(1.06); }
.bento-card .w-14, .bento-card .inicial { transition: transform .5s var(--bn-curva), border-color .5s ease; }
.bento-card:hover .w-14, .bento-card:hover .inicial { transform: translate(3px, -3px); border-color: rgba(229, 9, 20, .55); }
.bento-card.glass { background-image: linear-gradient(#E50914, #E50914); background-repeat: no-repeat; background-position: left bottom; background-size: 0 2px; transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease, border-color .4s ease, background-size .7s var(--bn-curva); }
.bento-card.glass:hover { background-size: 100% 2px; }

/* ── Prova em número: o número manda, a legenda vem depois ── */
.bn-provas > div { background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 2rem 0 0; }
.bn-provas p[class*="text-5xl"] { font-size: clamp(4.5rem, 3rem + 6.5vw, 8.5rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin-bottom: 1rem; }
p.bn-provas-apoio { margin: -.35rem 0 .9rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8f8f8f; }
.bn-provas > div > p:not([class*="text-5xl"]) { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .55s, transform .9s var(--bn-curva) .55s; }
.bn-provas > div.active > p:not([class*="text-5xl"]) { opacity: 1; transform: none; }

/* ── Faixa vermelha como troca de cena: nasce recolhida e abre até as bordas ── */
.bn-faixa-vermelha { clip-path: inset(0 calc((1 - var(--ab, 1)) * 7vw) round calc((1 - var(--ab, 1)) * 2.75rem)); will-change: clip-path; }

/* ── Assinatura de fechamento ── */
.bn-assinatura { position: relative; z-index: 10; margin-top: var(--s-faixa); padding: 0 1.25rem; text-align: center; }
p.bn-assinatura-nome { margin: 0; font-size: clamp(3rem, 13.2vw, 13rem); font-weight: 800; line-height: .88; letter-spacing: -.055em; color: #fff; white-space: nowrap; }
.bn-assinatura-nome .bn-palavra { opacity: .1; }
.bn-assinatura-nome .bn-palavra.acesa { opacity: 1; }
p.bn-assinatura-linha { display: flex; align-items: center; gap: 1.25rem; max-width: 62rem; margin: 2rem auto 0; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.bn-assinatura-linha i { flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
p.bn-assinatura-origem { margin: 1.5rem 0 0; font-size: 1rem; color: #7d7d7d; }
.bn-assinatura-origem a { color: #cfcfcf; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(229, 9, 20, .6); }
.bn-assinatura-origem a:hover { color: #fff; }
@media (max-width: 767px) {
    .bn-assinatura-linha { flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; letter-spacing: .16em; }
    .bn-assinatura-linha i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal:not(.active) > .retrato.moldura { clip-path: none; }
    .bn-provas > div > p:not([class*="text-5xl"]) { opacity: 1; transform: none; }
    .bn-faixa-vermelha { clip-path: none; }
    .bn-assinatura-nome .bn-palavra { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SUELI: o repertório de movimento é o da curadoria. Selecionar, filtrar,
   dar acesso. O luxo aqui vem da precisão, não do espetáculo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Retrato "selecionado": o selo entra por último, depois da máscara ── */
.retrato.moldura > div[class*="top-5"] { opacity: 0; transform: translateY(-8px); transition: opacity .8s ease 1.25s, transform .9s var(--bn-curva) 1.25s; }
.retrato.moldura.visto > div[class*="top-5"] { opacity: 1; transform: none; }

/* ── Esteira: uma palavra por vez acende, conforme a rolagem ── */
.bn-esteira .marquee-trilho > span { color: #4f4f4f; transition: color .6s ease; }
.bn-esteira .marquee-trilho > span.foco { color: #fff; }
.bn-esteira .marquee-trilho > span > span { opacity: .55; transition: opacity .6s ease; }
.bn-esteira .marquee-trilho > span.foco > span { opacity: 1; }

/* ── Linha do tempo viva: fio vermelho avança, marcos acendem ao passar ── */
.bn-trilha-viva::after { content: ''; position: absolute; left: 1.15rem; top: .6rem; bottom: .6rem; width: 1px; background: linear-gradient(180deg, #E50914, #FF4B55); transform: scaleY(var(--t, 0)); transform-origin: top center; }
.bn-trilha-viva li { opacity: .38; transition: opacity .7s ease; }
.bn-trilha-viva li.passou { opacity: 1; }
.bn-trilha-viva li.passou .marco { background: #E50914; color: #fff; border-color: #E50914; }
.bn-trilha-viva li.agora.passou .marco { background: #FF4B55; border-color: #FF4B55; color: #050505; }
.trilha .marco { z-index: 1; }

/* ── Curadoria: o cartão escolhido ganha nitidez, os outros recuam ── */
@media (hover: hover) and (min-width: 768px) {
    .bn-curadoria > * { transition: opacity .5s ease, filter .5s ease, transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease, border-color .4s ease, background-size .7s var(--bn-curva); }
    .bn-curadoria:hover > *:not(:hover) { opacity: .42; filter: blur(1.5px) saturate(.6); }
}
/* Retículo: dentro da área de curadoria o anel do cursor vira mira */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .bn-anel::before, .bn-anel::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255, 75, 85, .9); opacity: 0; transition: opacity .3s ease; }
    .bn-anel::before { width: 1px; height: 140%; transform: translate(-50%, -50%); }
    .bn-anel::after { height: 1px; width: 140%; transform: translate(-50%, -50%); }
    body.bn-mira .bn-anel { width: 46px; height: 46px; border-color: rgba(255, 75, 85, .9); background-color: transparent; }
    body.bn-mira .bn-anel::before, body.bn-mira .bn-anel::after { opacity: .55; }
}

/* ── Recorte de revista ── */
a.bn-recorte {
    display: block; position: relative; max-width: 46rem; margin: 0 auto; padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
    background: #EDE7DB; color: #0b0b0b; text-decoration: none; border-radius: 3px;
    transform: rotate(-1.4deg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .06);
    background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 100% 2.1rem;
}
a.bn-recorte.reveal { transition: opacity 1s var(--bn-curva), transform 1s var(--bn-curva), box-shadow .6s ease; }
a.bn-recorte.reveal:not(.active) { transform: rotate(-4deg) translateY(50px); }
a.bn-recorte:hover, a.bn-recorte:active { transform: rotate(0deg) scale(1.015); box-shadow: 0 50px 100px -30px rgba(229, 9, 20, .35), 0 0 0 1px rgba(0, 0, 0, .06); }
.bn-recorte-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 2px solid #0b0b0b; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bn-recorte-topo span:first-child { color: #C10812; }
a.bn-recorte h3 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: #0b0b0b; }
a.bn-recorte p { margin: 0; padding-left: 1.1rem; border-left: 3px solid #E50914; font-size: var(--t-lead); line-height: 1.6; color: #3a3a3a; }
.bn-recorte-ler { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; min-height: 44px; font-size: var(--t-rotulo); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #0b0b0b; }
.bn-recorte-ler svg { transition: transform .35s var(--bn-curva); }
a.bn-recorte:hover .bn-recorte-ler svg { transform: translate(3px, -3px); }
@media (max-width: 1023px) { .bn-recorte-topo { justify-content: center; text-align: center; } a.bn-recorte h3 { text-align: center; } a.bn-recorte { text-align: center; } a.bn-recorte p { text-align: left; } }

/* ── 60 enorme e apagado atrás do fechamento (preenchido: contorno é vetado) ── */
.bn-numero-fundo { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; user-select: none; font-size: clamp(16rem, 52vw, 46rem); font-weight: 800; line-height: .8; letter-spacing: -.07em; color: rgba(255, 255, 255, .028); }

@media (prefers-reduced-motion: reduce) {
    .retrato.moldura > div[class*="top-5"] { opacity: 1; transform: none; transition: none; }
    .bn-trilha-viva::after { transform: none; }
    .bn-trilha-viva li { opacity: 1; }
    a.bn-recorte, a.bn-recorte.reveal:not(.active) { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GAVETAS E FORMULÁRIO DE CAPTAÇÃO
   Formulário secundário mora fechado numa gaveta e abre com um toque. Os
   dois principais (interesse da home e convite do evento) continuam
   abertos: são o motivo de a página existir.
   ═══════════════════════════════════════════════════════════════════════ */
.bn-gaveta-corpo { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .65s var(--bn-curva), opacity .45s ease, visibility 0s linear .65s; }
.bn-gaveta-corpo > div { overflow: hidden; min-height: 0; }
.bn-gaveta-corpo.aberta { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .65s var(--bn-curva), opacity .5s ease .1s, visibility 0s; }
.bn-gaveta-corpo.aberta > div { padding-top: 1.5rem; }

.bn-gaveta-cartao { padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); border-radius: 1.75rem; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(160deg, rgba(229, 9, 20, .09), rgba(255, 255, 255, .02) 55%, transparent); }
p.bn-gaveta-rotulo { margin: 0 0 .9rem; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bn-vermelho); }
h3.bn-gaveta-titulo { margin: 0 0 .75rem; font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
p.bn-gaveta-texto { margin: 0 0 1.75rem; color: #adadad; font-size: var(--t-corpo); line-height: 1.65; }
.bn-gaveta-botao { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 56px; padding: 0 1.9rem; border-radius: 999px; border: 1px solid #E50914; color: #fff; font-size: var(--t-botao); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.bn-gaveta-mais { transition: transform .5s var(--bn-curva); flex-shrink: 0; }
[aria-expanded="true"] .bn-gaveta-mais { transform: rotate(45deg); }

/* Formulário de captação genérico (data-form-lead) */
.bn-form-lead { position: relative; max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); text-align: left; border-radius: 1.75rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 10, .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
p.bn-form-titulo { margin: 0 0 1.5rem; font-size: var(--t-h4); font-weight: 700; color: #fff; text-align: center; letter-spacing: -.01em; }
.bn-form-grade { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .bn-form-grade { grid-template-columns: 1fr 1fr; } }
.bn-form-lead label { display: block; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8f8f8f; }
.bn-form-lead input[type="text"], .bn-form-lead input[type="email"], .bn-form-lead input[type="tel"] {
    display: block; width: 100%; margin-top: .55rem; padding: .9rem 1rem; min-height: 52px; border-radius: .85rem;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .5); color: #fff;
    font: 400 1.0625rem/1.4 'Onest', sans-serif; letter-spacing: 0; text-transform: none;
    transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease;
}
.bn-form-lead input::placeholder { color: #5e5e5e; }
.bn-form-lead input:focus { outline: none; border-color: #E50914; box-shadow: 0 0 0 4px rgba(229, 9, 20, .13); background: rgba(0, 0, 0, .7); }
.bn-form-enviar { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 56px; margin-top: 1.5rem; border-radius: 999px; border: 0; color: #fff; font-size: var(--t-botao); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.bn-form-enviar[disabled] { opacity: .6; cursor: progress; }
p.bn-form-erro { margin: 1.1rem 0 0; padding: .85rem 1rem; border-radius: .85rem; border: 1px solid rgba(229, 9, 20, .35); background: rgba(229, 9, 20, .1); color: #FF4B55; font-size: 1rem; font-weight: 600; text-align: center; }
p.bn-form-nota { margin: 1rem 0 0; text-align: center; font-size: 1rem; color: #7d7d7d; }
.bn-form-ok { max-width: 40rem; margin: 0 auto; padding: 2.25rem 1.5rem; text-align: center; border-radius: 1.75rem; border: 1px solid rgba(229, 9, 20, .3); background: rgba(229, 9, 20, .07); }
.bn-form-ok p { margin: 0; color: #cfcfcf; font-size: var(--t-corpo); }
p.bn-form-ok-titulo { margin: 0 0 .5rem; font-size: var(--t-h3); font-weight: 700; color: #fff; }
[hidden] { display: none !important; }

/* ── Tablet e celular: formulário largo demais e encostado à esquerda lia como torto ── */
@media (max-width: 1023px) {
    .bn-gaveta-cartao { max-width: 40rem; margin-left: auto; margin-right: auto; text-align: center; }
    #sponsorForm, #leadForm, #interesseForm { max-width: 40rem; margin-left: auto; margin-right: auto; }
    #sponsorForm .flex.items-center.gap-3.mb-6 { flex-direction: column; text-align: center; gap: .75rem; }
    /* A lista "quem senta à mesa" fica numa caixa centrada, com os itens à esquerda dentro dela */
    #patrocinio .lg\:w-1\/2 > div[class*="rounded-2xl"] { max-width: 34rem; margin-left: auto; margin-right: auto; }
    #patrocinio .lg\:w-1\/2 > div[class*="rounded-2xl"] > p { text-align: center; }
    .bn-fatos-linha { max-width: 34rem; margin-left: auto; margin-right: auto; }
    #patrocinio .lg\:w-1\/2 > .flex.items-center.gap-3 { justify-content: center; text-align: left; }
}
@media (max-width: 767px) { .bn-gaveta-botao { width: 100%; padding: .9rem 1.25rem; white-space: normal; } }

@media (prefers-reduced-motion: reduce) { .bn-gaveta-corpo, .bn-gaveta-corpo.aberta { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   PISO DE 15PX
   Nenhum texto do site abaixo de 15px, nem etiqueta em caixa alta. Pega as
   classes de tamanho escritas à mão que escaparem das regras de cada página.
   ═══════════════════════════════════════════════════════════════════════ */
[class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"],
[class*="text-[12px]"], [class*="text-[13px]"], [class*="text-[14px]"] { font-size: var(--t-rotulo); }


/* ═══════════════════════════════════════════════════════════════════════
   ANIMACAO SO NA TELA
   Feixe na borda, anel dos 60, brilho do texto vermelho, botão pulsando e
   marquee são laços infinitos, e vários deles redesenham a cada quadro.
   Seção fora da tela fica com eles pausados (o JS marca .bn-fora). Ninguém
   vê a diferença, porque só pausa o que não está à vista.
   ═══════════════════════════════════════════════════════════════════════ */
.bn-fora, .bn-fora * { animation-play-state: paused !important; }

/* Desfoque de fundo nos cartões, só no celular: ali eles ficam sobre fundo
   preto liso e o desfoque não aparece, mas custa caro ao rolar. Menu, doca e
   pílulas sobre foto continuam com o efeito. */
@media (max-width: 767px) {
    .glass, .bento-card.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LANÇAMENTO BYD ATTO 8 (evento-2026)
   Foto clara de estúdio sobre o preto do site: fica numa moldura grande, com
   luz vermelha por trás, como carro em palco. Legenda técnica por cima.
   ═══════════════════════════════════════════════════════════════════════ */
.bn-lanc { position: relative; overflow: hidden; padding: var(--s-secao) 0; background: #050505; border-top: 1px solid rgba(255, 255, 255, .05); }
.bn-lanc-luz { position: absolute; left: 50%; top: 58%; width: 90vmax; height: 60vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(229, 9, 20, .20), rgba(229, 9, 20, .05) 55%, transparent 75%); pointer-events: none; }
.bn-lanc-caixa { position: relative; z-index: 1; max-width: 78rem; margin: 0 auto; padding: 0 1.5rem; }
.bn-lanc-topo { max-width: 48rem; margin: 0 auto var(--s-cabeca); text-align: center; }
h2.bn-lanc-titulo { font-weight: 700; color: #fff; }
p.bn-lanc-texto { max-width: 38rem; margin: 0 auto; color: #adadad; font-size: var(--t-lead); line-height: 1.6; }

.bn-lanc-foto { position: relative; margin: 0; border-radius: 2rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #0a0a0a; box-shadow: 0 70px 140px -50px rgba(229, 9, 20, .45), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.bn-lanc-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 42% 55%; transition: transform 1.6s var(--bn-curva); }
.bn-lanc-foto:hover img { transform: scale(1.035); }
.bn-lanc-foto figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; gap: 1.25rem; padding: 3.5rem 2rem 1.5rem;
    background: linear-gradient(0deg, rgba(5, 5, 5, .88), transparent);
    font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.bn-lanc-foto figcaption i { flex: 1; height: 1px; background: rgba(255, 255, 255, .3); }

ul.bn-lanc-fatos { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bn-lanc-fatos li { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.6rem 1rem; text-align: center; }
.bn-lanc-fatos li + li { border-left: 1px solid rgba(255, 255, 255, .09); }
.bn-lanc-fatos b { font-size: var(--t-h3); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.bn-lanc-fatos span { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8f8f8f; }

.bn-lanc-cta { margin-top: 2.5rem; text-align: center; }
a.bn-lanc-botao { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 58px; padding: 0 2.2rem; border-radius: 999px; background: #E50914; color: #fff; font-size: var(--t-botao); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 40px rgba(229, 9, 20, .3); transition: background-color .3s ease, transform .35s var(--bn-curva); }
a.bn-lanc-botao:hover { background: #c20710; transform: translateY(-2px); }

@media (max-width: 767px) {
    .bn-lanc-foto { border-radius: 1.4rem; }
    .bn-lanc-foto img { aspect-ratio: 4 / 3; object-position: 40% 60%; }
    .bn-lanc-foto figcaption { flex-direction: column; gap: .25rem; padding: 2.5rem 1rem 1rem; letter-spacing: .14em; }
    .bn-lanc-foto figcaption i { display: none; }
    ul.bn-lanc-fatos { grid-template-columns: 1fr 1fr; }
    .bn-lanc-fatos li:nth-child(3) { border-left: 0; }
    .bn-lanc-fatos li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); }
    a.bn-lanc-botao { width: 100%; padding: 0 1.1rem; letter-spacing: .05em; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .bn-lanc-foto img { transition: none; } }