/*
    Tema Cofrinho BB — override do Bootstrap 5, conforme 01-UI-SPEC.md.
    Branding do cliente BB (não da Netpoint). Carregado depois do bootstrap.min.css
    em _Layout.cshtml para vencer a especificidade default do Bootstrap.
*/

:root {
    /* Cores (01-UI-SPEC.md "Color") — $danger do Bootstrap (--bs-danger) é reaproveitado
       para estado destrutivo, sem criar variável nova. */
    --bb-amarelo: #Fcfc30;
    --bb-azul: #465eff;
    --bb-branco: #FFFFFF;
    --bb-texto-input: #1A1A1A;
    --bb-placeholder: #6B7280;
    --background-highlight: #f05b89;

    /* Cor de fallback do hero da Index (quick 260813-lp0) — usada só enquanto
       a foto de fundo carrega ou se falhar (background shorthand aceita cor +
       imagem juntas). Não é cor de marca de uso geral; o azul de marca
       continua sendo --bb-azul. Substituiu o gradiente placeholder (D-03,
       resolvido) quando a foto do cliente chegou. */
    --bb-azul-hero-base: #465eff;

    /* Escala de espaçamento (múltiplos de 4) */
    --bb-space-xs: 4px;
    --bb-space-sm: 8px;
    --bb-space-md: 16px;
    --bb-space-lg: 24px;
    --bb-space-xl: 32px;
    --bb-space-2xl: 48px;
    --bb-space-3xl: 64px;

    /* Escala de tipografia mobile (quick 260817-qvh, ver AUDIT.md da quick)
       — vale só para o que o celular renderiza. Os overrides de breakpoint
       largo (min-width: 768px/992px/1200px/1400px) continuam em px literal
       por decisão de escopo desta task (mexer neles é fora do escopo
       "mobile-only"). Nenhum valor abaixo de 12px. */
    --bb-fs-display: 26px;
    --bb-fs-eyebrow: 24px;
    --bb-fs-heading: 18px;
    --bb-fs-lead: 22px;
    --bb-fs-body: 16px;
    --bb-fs-cta: 20px;
    --bb-fs-sm: 14px;
    --bb-fs-xs: 12px;

    /* Exceção pontual, fora da escala nomeada acima — NÃO renomear para um
       dos 8 tokens de papel semântico. .bb-obrigado-texto tem um span
       interno com white-space: nowrap (C3) e uma barra decorativa com
       height: 21px fixo calibrada para este texto (C4); subir o
       tamanho-base para --bb-fs-lead arrastaria o span e desalinharia a
       barra. Mantém o valor exato já protegido em comentário no próprio
       seletor ("nunca reduzir abaixo de 19px") — mudança aqui é só
       cosmética (literal → var()), zero risco visual (ver AUDIT.md). */
    --bb-fs-lead-obrigado: 19px;

    /* Medidas de componente (fora da escala nomeada acima, ver 01-UI-SPEC.md "Exceptions") */
    --bb-control-height: 56px;
    --bb-radius-pill: 9999px;
    --bb-max-width: 480px;

    /* Altura do header persistente (quick 260812-mw3) — esta variável PRODUZ a
       altura real da barra (.bb-header-inner) e é consumida pelo calc() de
       .bb-screen; não é um palpite sobre a altura, é a fonte dela. */
    --bb-header-height: 44px;

    /* Pilha de fallback tipográfico */
    --bb-font-fallback: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Cor de marca NOVA (quick 260813-s7q), fora da paleta original
       amarelo/azul/branco — usada só como destaque do título da seção
       Premiação. Por não ter papel semântico compartilhado com o resto do
       tema (não é "erro", não é "sucesso", não é uma cor de superfície), o
       token é nomeado pela cor em si, não por função. */
    --bb-coral: #F05B89;
}

/* ===== Base / Tipografia ===== */

body {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-body);
    line-height: 1.5;
}

.bb-heading {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-display);
    line-height: 1.2;
    color: var(--bb-azul);
    text-align: left;
    margin-bottom: var(--bb-space-xl);
}

.bb-body-text {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-body);
    line-height: 1.5;
    color: var(--bb-azul);
}

.bb-label {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-sm);
    line-height: 1.3;
}

body {
    background-color: var(--bb-amarelo);
}

/* ===== Estrutura de tela (fundo amarelo full-bleed + coluna central de 480px) ===== */
main {
background-color: var(--bb-amarelo);
}
/* min-height desconta a altura do header persistente (quick 260812-mw3): a
   barra vive fora de .bb-screen (no layout, via _HeaderTopo), então sem o
   desconto a soma das duas alturas passaria de 100vh e geraria rolagem
   vertical extra só por causa do header. Com o menu mobile aberto, a barra
   fica temporariamente mais alta que --bb-header-height — como aqui é
   min-height (não height fixa), o efeito é só empurrar o conteúdo para
   baixo, nunca cortar nada. */
.bb-screen {
    
    min-height: calc(100vh - var(--bb-header-height));
    display: flex;
    flex-direction: column;
}

.bb-content {
    width: 100%;
    max-width: var(--bb-max-width);
    margin: 0 auto;
    padding: var(--bb-space-lg) var(--bb-space-lg);
    flex: 1 0 auto;
}

/* Modificador de .bb-content pro /Cadastro (feedback de revisão): 680px em
   desktop pras 2 etapas inteiras (campos da etapa 1 e caixa/checkboxes/botão
   da etapa 2) — mesma largura já usada nos modais, em vez de só a caixa de
   regulamento quebrando pra fora de uma coluna mais estreita ao redor dela.
   Mobile (<768px) continua com a coluna de 480px de sempre — só desktop
   muda. Diferente de .bb-content--leitura (640px, sempre ativo, usado só na
   página /Regulamento): aqui o salto de largura é condicionado ao breakpoint,
   porque o form de dados (etapa 1) não deve alargar em telas pequenas/médias
   onde o ganho de espaço não compensa campos pill esticados demais. */
@media (min-width: 768px) {
    .bb-content--680 {
        max-width: 680px;
    }
}

/* Modificador de .bb-content pra tela institucional (/), feedback de revisão:
   680px não bastaria pra caber mascote + texto lado a lado sem espremer — o
   layout de 2 colunas (.bb-index-grid, abaixo) precisa de mais fôlego
   horizontal. Mesmo mecanismo de .bb-content--680: só entra em desktop,
   mobile continua na coluna de 480px de sempre. */
@media (min-width: 768px) {
    .bb-content--900 {
        max-width: 900px;
    }
}

@media (min-width: 576px) {
    .bb-content {
        padding-top: var(--bb-space-2xl);
        padding-bottom: var(--bb-space-3xl);
    }
}

/* ===== Página inicial (tela 1) — medalhão do cofrinho, copy e CTA =====
   A tela institucional é centrada e vertical: ao contrário do formulário, não há
   sequência de campos a alinhar à esquerda, e a referência do cliente traz tudo
   no eixo central. justify-content: center distribui o conteúdo na altura da
   viewport em telas altas sem esticar nada. */

.bb-content-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--bb-space-xl);
}

/* Círculo branco atrás do cofrinho. aspect-ratio (não height fixa) mantém o
   círculo perfeitamente redondo em qualquer largura de tela. */
.bb-hero-medalhao {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--bb-branco);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bb-hero-imagem {
    width: 92%;
    height: auto;
    object-fit: contain;
}

.bb-hero-texto {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-display);
    line-height: 1.25;
    color: var(--bb-azul);
    margin: 0;
}

/* O CTA da home é um <a>, não <button>: reaproveita a pele de .bb-btn-confirmar e
   só corrige o que difere de um botão de formulário — remoção do sublinhado, do
   caixa-alta forçado (o rótulo aprovado é em caixa mista) e da margem superior,
   que aqui já vem do gap do flex container.

   Seletor de tipo + classe (a.bb-btn-hero) de propósito: .bb-btn-confirmar tem a
   mesma especificidade de uma classe isolada e é declarada mais abaixo neste
   arquivo, então venceria no empate por ordem e traria o text-transform:uppercase
   de volta. */
a.bb-btn-hero {
    text-decoration: none;
    text-transform: none;
    margin-top: 0;
    padding: var(--bb-space-md) var(--bb-space-lg);
    height: auto;
    min-height: var(--bb-control-height);
    border-radius: 20px;
    width: 100%;
    max-width: 300px;
    font-size: var(--bb-fs-lead);
}

a.bb-btn-hero:hover,
a.bb-btn-hero:focus,
a.bb-btn-hero:active {
    text-decoration: none;
    color: var(--bb-amarelo);
}

/* ===== Campos de formulário (pill de 56px, sem label visível, placeholder como label) ===== */

.bb-field {
    margin-bottom: var(--bb-space-md);
}

.bb-field .form-control {
    height: var(--bb-control-height);
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-branco);
    color: var(--bb-texto-input);
    border: 2px solid transparent;
    padding: 0 var(--bb-space-lg);
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-body);
    /* Sem maxlength, sem text-overflow: ellipsis — <input type="text"> já rola horizontalmente
       de forma nativa quando o valor excede a largura do pill; limite real de tamanho fica
       na validação de coluna do banco (Application/Domain), não no visual. */
}

.bb-field .form-control::placeholder {
    color: var(--bb-placeholder);
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    opacity: 1;
    /* O campo Estado aplica text-transform: uppercase para normalizar a UF digitada,
       e essa transformação também atinge o placeholder — que apareceria como
       "ESTADO", fora do padrão de caixa mista de todos os outros campos. */
    text-transform: none;
}

.bb-field .form-control:focus,
.bb-field .form-control:focus-visible {
    box-shadow: none;
    border-color: var(--bb-azul);
    outline: 2px solid var(--bb-azul);
    outline-offset: 2px;
}

.bb-field .form-control.is-invalid {
    border-color: var(--bs-danger);
    background-image: none;
    padding-right: var(--bb-space-lg);
}

.bb-field .form-control.is-invalid:focus {
    outline-color: var(--bs-danger);
}

/* display:block só quando precedido por .is-invalid — mantém o default do Bootstrap
   (.invalid-feedback { display:none }), só a tipografia/cor é sobrescrita. */
.bb-field .invalid-feedback {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-danger);
    margin-top: var(--bb-space-xs);
    /* Mesmo deslocamento de 0.5rem do checkbox "Sem número" (feedback de
       revisão) — harmonia visual entre as mensagens de erro e o rótulo do
       checkbox, ambos levemente recuados em relação à borda do campo/pill
       acima. Vale pra toda mensagem de validação do form, não só a do
       campo Número — "campo obrigatório" foi só o exemplo citado. */
    margin-left: var(--bb-space-sm);
}

/* Aviso não-bloqueante do autofill de CEP (CAD-02, 260810-ho2) — mesma
   tipografia do .invalid-feedback acima, mas em azul: é informativo
   ("Buscando endereço...", fallback manual), nunca um erro de validação. */
.bb-field .bb-cep-hint {
    display: block;
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--bb-azul);
    margin-top: var(--bb-space-xs);
}

/* ===== Formulário Fale Conosco (modal, quick 260817-m39) =====
   Input/select de 1 linha (Nome, CPF, Telefone, E-mail, Assunto) reaproveitam .bb-field/
   .form-control/.invalid-feedback JÁ existentes acima — mesmo pill de altura fixa do
   Cadastro, sem nenhuma regra nova para eles. Só o <textarea> da Mensagem precisa de uma
   variante: um pill de 9999px de border-radius (--bb-radius-pill) fica visualmente errado
   num campo multi-linha, por isso a exceção abaixo troca por um border-radius mais
   moderado e uma altura mínima maior. O botão de envio reaproveita .bb-btn-confirmar sem
   classe nova — só o rótulo ("Enviar") muda, via markup, não via CSS. */
.bb-field textarea.form-control {
    height: auto;
    min-height: 120px;
    border-radius: var(--bb-space-md);
    padding: var(--bb-space-md) var(--bb-space-lg);
    resize: vertical;
}

/* Contraste dentro do modal branco (acessibilidade, CLAUDE.md "contraste adequado"): o pill
   branco de .bb-field .form-control foi desenhado pra contraste com o fundo amarelo do
   Cadastro — dentro do modal (.modal-content também branco), branco-sobre-branco fica sem
   nenhuma definição visual até o campo receber foco. Regra aditiva, escopada só ao wrapper
   deste formulário — nunca sobrescreve o .form-control genérico usado por Cadastro (que
   continua com border: 2px solid transparent, sem regressão). */
#fale-conosco-form-wrapper .form-control {
    border-color: var(--bb-placeholder);
}

.bb-contador-caracteres {
    display: block;
    text-align: right;
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-xs);
    color: var(--bb-placeholder);
    margin-top: var(--bb-space-xs);
}

/* ===== Linhas de 2 colunas (CEP+Logradouro, Número+Complemento, Cidade+Estado) ===== */

.bb-row {
    display: flex;
    gap: var(--bb-space-md);
    margin-bottom: var(--bb-space-md);
}

.bb-row > .bb-field {
    margin-bottom: 0;
    min-width: 0;
}

/* Linha Número/Complemento (quick 260813-duj): sem margin-bottom própria —
   o checkbox "Sem número" dentro da coluna do Número já dá o respiro (seu
   padding vertical, .bb-checkbox-row) antes da linha Cidade/Estado. Somar o
   --bb-space-md do .bb-row base ao padding do checkbox deixava o espaço ali
   maior que entre as demais linhas do formulário. */
.bb-row.bb-row-numero {
    margin-bottom: 0;
}

/* Indentação de 0.5rem (--bb-space-sm) alinhando visualmente o checkbox com
   o miolo do input Número acima — os pills de 56px têm border-radius grande
   (--bb-radius-pill), então a borda esquerda "sólida" do campo começa
   perceptivelmente mais à direita do que a borda reta de uma div; sem esse
   deslocamento o checkbox parece nascer mais à esquerda do que o campo. */
.bb-checkbox-row-numero {
    margin-left: var(--bb-space-sm);
}

.bb-row > .bb-col-35 {
    flex: 0 0 calc(35% - (var(--bb-space-md) / 2));
    max-width: calc(35% - (var(--bb-space-md) / 2));
}

.bb-row > .bb-col-65 {
    flex: 0 0 calc(65% - (var(--bb-space-md) / 2));
    max-width: calc(65% - (var(--bb-space-md) / 2));
}

/* Fallback de segurança: abaixo de ~360px os pares colapsam para coluna única
   (PDF de referência não cobre esse viewport). */
@media (max-width: 359.98px) {
    .bb-row {
        flex-direction: column;
        gap: 0;
    }

    .bb-row > .bb-col-35,
    .bb-row > .bb-col-65 {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: var(--bb-space-md);
    }

    .bb-row > .bb-field:last-child {
        margin-bottom: 0;
    }
}

/* ===== Caixa de leitura do regulamento (TERM-01, plano 02-02) =====
   overflow-y: auto é o mecanismo que cobre tanto o placeholder curto quanto
   o texto oficial longo do BB (quando chegar) sem nunca transbordar do card
   de 480px — a caixa rola internamente em vez de crescer. border-radius de
   16px é um desvio deliberado do pill (9999px) dos inputs/botão: uma caixa
   alta e retangular com border-radius pill produziria um efeito "cápsula"
   indesejado numa caixa de leitura de texto longo (02-UI-SPEC.md §Spacing
   Scale Exceptions). */
.bb-regulamento-box {
    background-color: var(--bb-branco);
    border: 2px solid var(--bb-azul);
    border-radius: 16px;
    padding: var(--bb-space-md);
    margin-bottom: var(--bb-space-md);
    max-height: 240px;
    overflow-y: auto;
    text-align: left;
}

.bb-regulamento-titulo {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-sm);
    color: var(--bb-texto-input);
    margin-bottom: var(--bb-space-sm);
}

.bb-regulamento-placeholder {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-body);
    line-height: 1.5;
    font-style: italic;
    color: var(--bb-placeholder);
    margin: 0;
}

/* Subtítulos numerados do texto oficial (1 — Empresas Promotoras, 2 —
   Modalidade da Promoção...) — h5 em vez de h3 (feedback de revisão), na
   mesma fonte/cor dos demais títulos do tema. Escopado a .bb-regulamento-texto
   pra não vazar pra nenhum outro h5 da página (ex.: fora deste partial). */
.bb-regulamento-texto h5 {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    color: var(--bb-azul);
}

/* ===== Linhas de checkbox de aceite (TERM-02, plano 02-02) =====
   align-items: flex-start (não center): o label do consentimento LGPD é
   longo e quebra em várias linhas em mobile — flex-start mantém o
   quadradinho alinhado ao topo da primeira linha em vez de centralizar
   verticalmente contra um bloco de texto alto. */
.bb-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--bb-space-sm);
    padding: var(--bb-space-sm) 0;
    text-align: left;
}

.bb-checkbox-row input[type="checkbox"] {
    accent-color: var(--bb-azul);
    flex: 0 0 auto;
    margin-top: 2px;
}

.bb-checkbox-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--bb-azul);
    outline-offset: 2px;
}

.bb-checkbox-row label {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--bb-azul);
    cursor: pointer;
}

/* Gatilho do modal de regulamento embutido no rótulo do checkbox de aceite
   (D-01, quick 260814-pfr — reverte o checkbox único da quick 260813-xbs).
   É um <button> por necessidade de semântica — abre o modal, não navega —
   mas a aparência de link inline é deliberada: zera a pele padrão de botão
   (fundo, borda, padding) e herda a tipografia do próprio rótulo. */
.bb-link-regulamento {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--bb-azul);
    text-decoration: underline;
    vertical-align: baseline;
    cursor: pointer;
}

.bb-link-regulamento:focus-visible {
    outline: 2px solid var(--bb-azul);
    outline-offset: 2px;
}

.bb-checkbox-row + .bb-checkbox-row {
    margin-bottom: var(--bb-space-sm);
}

.bb-checkbox-row:last-of-type {
    margin-bottom: var(--bb-space-md);
}

/* Checkbox de endereço sem número (quick 260813-duj): vive dentro de
   .bb-field.bb-col-35, onde é o único/último .bb-checkbox-row do escopo — a
   regra acima (pensada pro respiro extra do último aceite antes do
   CADASTRAR) casaria aqui também e somaria aos --bb-space-md já dados por
   .bb-field, inflando o espaço antes da linha Cidade/Estado. Seletor mais
   específico vence sem !important. */
.bb-col-35 .bb-checkbox-row:last-of-type {
    margin-bottom: 0;
}

/* Bloqueio visual dos checkboxes durante o envio (cadastro-termos.js aplica
   e remove .bb-form-enviando em #form-cadastro). pointer-events: none no
   wrapper, NUNCA a propriedade readOnly do input: por especificação HTML
   readOnly não afeta <input type="checkbox">, então o controle continuaria
   alternável durante o envio se usássemos o mesmo mecanismo dos campos de
   texto (setLoadingState, cadastro-validacao.js). */
.bb-form-enviando .bb-checkbox-row {
    pointer-events: none;
    opacity: .7;
}

/* ===== Banner de erro/duplicidade (role="alert") =====
   Padrão de alerts do Bootstrap (feedback de revisão) — a marcação leva
   .alert.alert-danger (ver _CadastroForm.cshtml e cadastro-validacao.js),
   que já resolve fundo, borda, border-radius, padding e cor. Esta classe fica
   só com os ajustes de tipografia da marca por cima do alert padrão do
   Bootstrap — nenhuma outra propriedade é redeclarada aqui. Decisão de
   revisão: não usar border-left como recurso de destaque neste projeto
   (ver memória de preferência do usuário); o próprio alert do Bootstrap já
   comunica o estado de erro pela cor de fundo/borda inteira, sem precisar de
   um traço lateral. */
.bb-banner-erro {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    font-weight: 400;
}

/* ===== Botão CONFIRMAR ===== */

.bb-btn-confirmar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-sm);
    width: 100%;
    height: var(--bb-control-height);
    border-radius: var(--bb-radius-pill);
    border: none;
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-cta);
    line-height: 1.2;
    text-transform: uppercase;
    margin-top: var(--bb-space-xl);
}

.bb-btn-confirmar:hover,
.bb-btn-confirmar:focus,
.bb-btn-confirmar:active {
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
}

.bb-btn-confirmar:focus-visible {
    outline: 2px solid var(--bb-texto-input);
    outline-offset: 2px;
}

.bb-btn-confirmar:disabled,
.bb-btn-confirmar[aria-busy="true"] {
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
    opacity: 0.7;
}

/* ===== Tela /Obrigado — fundo azul full-bleed e grid porquinho | texto (quick 260814-29g) =====
   Substitui o bloco antigo de copy centrada sobre fundo amarelo (tela 4 original).
   Segue a mesma convenção de modificador escopado já usada por .bb-screen--index,
   .bb-premiacao-* e .bb-cadastro-*: o layout mobile-first é a ordem do DOM (imagem
   primeiro, texto depois), sem propriedade order em lugar nenhum. */

/* Precisa ficar DEPOIS da regra base de .bb-screen no arquivo — mesma
   especificidade, quem decide o background é a ordem de declaração (mesmo
   mecanismo documentado em .bb-screen--index). Esta regra não "desliga" o
   amarelo pintado por main, acima: ela cobre a área inteira de .bb-screen, que
   já tem min-height de viewport menos header e largura total. */
.bb-screen--obrigado {
    background-color: var(--bb-azul);
}

/* Par obrigatório do bloco legal (ancorado por margin-top: auto) e do
   crescimento vertical do grid abaixo. Fora de media query: vale em qualquer
   largura. */
.bb-screen--obrigado .bb-content {
    display: flex;
    flex-direction: column;
}

/* Empilhado por padrão. flex: 1 0 auto faz a composição ocupar a folga
   vertical do azul em telas altas (o que sobra abaixo fica para o bloco
   legal); justify-content: center centra a pilha nessa folga. */
.bb-obrigado-grid {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-xl);
    flex: 1 0 auto;
}

/* A centralização do lado visual mora aqui enquanto o layout está empilhado,
   não no grid — mesma decisão já documentada em .bb-cadastro-visual. */
.bb-obrigado-visual {
    text-align: center;
}

/* Teto de 480px deliberado: o arquivo tem 675px intrínsecos, então 480
   garante que a imagem nunca é ampliada além do original, e ao mesmo tempo
   emparelha com a medida de 520px da coluna de texto, para nenhum dos dois
   lados dominar a composição. */
.bb-obrigado-imagem {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
}

.bb-obrigado-conteudo {
    text-align: center;
}

.bb-obrigado-titulo {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-display);
    line-height: 1.15;
    color: var(--bb-branco);
    margin: 0 0 var(--bb-space-lg);
}

/* Contraste: amarelo de marca sobre o azul de marca dá ~4.44:1, um pouco
   ABAIXO do mínimo de 4.5:1 exigido para texto normal — os parágrafos só
   ficam conformes por serem texto grande (peso 700 a partir de 18.66px,
   faixa em que o mínimo cai para 3:1). Por isso font-weight: 700 e
   font-size de no mínimo 19px não são escolha estética aqui: são o que
   mantém a tela acessível. Branco sobre o mesmo azul dá ~4.88:1 e passa
   como texto normal — por isso o título é branco.

   Sem text-shadow, diferente do hero da Index: lá a sombra existe porque o
   texto cai sobre foto de contraste variável; aqui o fundo é chapado e a
   sombra seria só ruído — mesmo raciocínio já registrado em
   .bb-premiacao-texto. */
.bb-obrigado-texto {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-lead-obrigado);
    line-height: 1.35;
    color: var(--bb-amarelo);
    margin: 0 0 var(--bb-space-md);
    position: relative;
    z-index: 0;
}

/* Sem esta regra o destaque desapareceria: o texto base já é 700 e a tag
   renderizaria no mesmo peso — mesma correção já documentada em
   .bb-index-heading b, e há arquivo real de peso 800 na família. */
.bb-obrigado-texto b {
    font-weight: 800;
}

.bb-obrigado-texto span {
    position: relative;
    white-space: nowrap;
}

.bb-obrigado-texto span:before {
    content: "";
    width: 100%;
    height: 21px;
    background-color: var(--background-highlight);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}



/* Media query de 2 colunas — a aritmética do breakpoint, escrita por
   inteiro porque D-06 proíbe copiar o valor de outra tela: 480px de
   imagem + 48px de respiro entre colunas (--bb-space-2xl) + 520px de
   coluna de texto + 48px do padding horizontal que o próprio .bb-content
   aplica dos dois lados = 1096px, largura em que as duas colunas atingem
   o tamanho natural ao mesmo tempo. O par de colunas é ligado antes disso,
   em 992px, com o mesmo critério já usado no /Cadastro: entre 992 e
   1096px é a coluna da IMAGEM que absorve a diferença (encolhe de 480
   para ~376px na borda inferior do intervalo), nunca a coluna de texto,
   que tem medida de leitura a preservar. Abaixo de 992px o empilhado se
   mantém — inclusive em 768px, onde o container ainda vale os 480px
   padrão e não há espaço honesto para duas colunas. */
@media (min-width: 992px) {
    .bb-screen--obrigado .bb-content {
        max-width: 1096px;
    }

    /* minmax(0, ...) em cada trilha evita o estouro clássico causado pelo
       tamanho mínimo automático do conteúdo (a imagem); a trilha de texto
       tem teto fixo e a da imagem absorve a sobra, coerente com a
       aritmética acima. align-content existe porque o grid cresceu por
       flex: 1 0 auto e precisa centrar as trilhas dentro da altura
       ganha. */
    .bb-obrigado-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
        align-items: center;
        align-content: center;
        gap: var(--bb-space-2xl);
    }

    .bb-obrigado-visual {
        text-align: left;
    }

    /* Some a centralização automática do empilhado; na trilha do grid a
       imagem encosta na esquerda. */
    .bb-obrigado-imagem {
        margin: 0;
    }

    .bb-obrigado-conteudo {
        text-align: right;
    }

    .bb-obrigado-titulo {
        font-size: 36px;
        
    }

    .bb-obrigado-texto {
        font-size: 22px;
    }
}

/* ===== Tela /Obrigado — aviso legal de FGC + selo ANBIMA (quick 260814-29g, Task 2) =====
   Substitui o antigo rodapé em faixa (.bb-footer/.bb-footer-selo-img, removidas —
   busca em todo src/Web confirmou que a única consumidora dessas duas classes era
   esta tela). margin-top: auto é o que ancora o bloco na base do azul — numa
   coluna flex a margem automática absorve a folga vertical restante depois que o
   grid cresceu. padding-top existe para o caso oposto: quando o conteúdo já é mais
   alto que a viewport não há folga para a margem automática absorver e ela vira
   zero — sem o padding o aviso encostaria no último parágrafo. */
.bb-obrigado-legal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--bb-space-md);
    margin-top: auto;
    padding-top: var(--bb-space-2xl);
    text-align: center;
}

/* A cor BRANCA aqui não é estética — é o único dos dois pares de cor da tela
   que passa em contraste nesse tamanho (branco sobre o azul de marca dá
   ~4.88:1, acima do mínimo de 4.5:1 para texto normal, enquanto o amarelo dá
   ~4.44:1 e só se salva nos parágrafos grandes por causa da regra de texto
   grande). Trocar esta cor para o amarelo quebra a acessibilidade da tela.
   Cor chapada, nunca opacity nem rgba — reduzir a opacidade derruba a razão
   de contraste efetiva pelo mesmo mecanismo. */
.bb-obrigado-legal-texto {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-xs);
    line-height: 1.4;
    color: var(--bb-branco);
    max-width: 200px;
    margin: 0;
}

/* O arquivo tem 396px intrínsecos, então o selo nunca é ampliado; 132px é um
   terço do original, tamanho de assinatura de canto, deliberadamente menor
   que os 198px do rodapé em faixa antigo — ali o selo era o único conteúdo
   da faixa, aqui ele acompanha um texto subordinado.

   Legibilidade avaliada no render (RISCO documentado no plano desta quick):
   o arquivo tem canal alfa (fundo transparente), mas a arte do selo é escura
   sobre o próprio fundo branco do cartão do arquivo — sobre o azul de marca
   o selo permaneceu nitidamente legível no screenshot 29g-02, então a placa
   branca adicional foi avaliada e DISPENSADA. Se o arquivo do selo mudar no
   futuro, reavaliar antes de assumir que continua legível. */
.bb-obrigado-selo {
    display: block;
    width: 132px;
    height: auto;
}

@media (min-width: 992px) {
    /* margin-top: auto (base) + margin-left: auto (direita) é o que produz o
       canto inferior direito pedido em D-04, sem position: absolute —
       posicionamento absoluto sairia do fluxo e poderia sobrepor a
       composição em telas baixas. */
    .bb-obrigado-legal {
        align-items: flex-end;
        text-align: right;
        margin-left: auto;
        max-width: 520px;
    }
}

/* ===== CTA "Bora investir no app" + QR code (quick 260816-vye) =====
   Classes compartilhadas pela partial _CtaInvestirComQrCode.cshtml, incluída
   tanto em /Obrigado quanto em /NumerosDaSorte — uma única fonte de markup
   pras duas telas, sem duplicação.

   .bb-cta-qrcode usa inline-flex (não a utility .d-flex do Bootstrap, que é
   display: flex de nível de BLOCO) deliberadamente: mantém o wrapper como
   caixa de nível INLINE pra herdar o text-align do container pai (center no
   mobile empilhado; right em .bb-obrigado-conteudo e left em
   .bb-numeros-conteudo no desktop, cada um já definido nas respectivas
   regras de 992px) — o mesmo mecanismo que já posiciona .bb-numeros-cta
   sozinho hoje (a margin: ... auto ...; já declarada nele resolve para 0
   numa caixa inline-level; quem centraliza/alinha de fato é o text-align
   herdado do pai). Um wrapper display: flex de bloco quebraria esse
   alinhamento automático nas duas páginas.

   margin-top aqui (não mais em .bb-numeros-cta, ver correção abaixo): achado
   real da prova Playwright desta quick — o botão tinha margin-top próprio
   (herdado de quando era o único filho, sozinho abaixo do parágrafo). Dentro
   de um flex ROW, uma margem vertical assimétrica num item desalinha esse
   item do outro quando align-items: center centra a CAIXA COM MARGEM, não só
   o conteúdo — o botão ficava ~40px mais baixo que o QR. Mover o espaçamento
   pro wrapper preserva a distância visual do parágrafo acima igualmente para
   as duas telas, sem quebrar o alinhamento entre botão e QR. */
.bb-cta-qrcode {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-md);
    margin-top: var(--bb-space-lg);
    flex-direction: column;
}

/* Oculto por padrão (mobile) — o QR só faz sentido lado a lado com o botão
   quando há espaço horizontal de sobra, a partir do MESMO breakpoint de
   992px que .bb-obrigado-grid e .bb-numeros-grid já usam pra virar 2
   colunas. */
.qrcode-bb {
    display: none;
}

.botaoapp-bb img {
    width: 100%;
    height: auto;
    max-width: 180px;
}

/* Mesmo tratamento responsivo de .botaoapp-bb img, agora pro SVG novo
   (borainvestir.svg, substitui borainvestirnoapp.webp em /Premiacao e
   /NumerosDaSorte) — sem essa regra, a tag <img> renderiza no tamanho cru
   dos atributos width/height HTML (o SVG tem proporção diferente do WebP
   antigo, 496.7:272.06 ≈ 1.83:1) e estoura a largura da tela no mobile. */
.botaoinvestir-bb img {
    width: 100%;
    height: auto;
    max-width: 180px;
}

@media (min-width: 992px) {
    .qrcode-bb {
        display: block;
        height: 98px;
    }

    .botaoapp-bb {
        pointer-events: none;
    }

    .botaoinvestir-bb {
        display: none;
    }

    .bb-cta-qrcode {
        flex-direction: row;
    }
}

/* ===== Tela /NumerosDaSorte — grid rótulo+mascote | título+texto+CTA (quick 260814-39g) =====
   Página informativa e estática (D-01): não é a consulta real por CPF, só explica
   o que acontece depois do cadastro. Composição de 2 colunas sobre fundo azul
   chapado, mesma convenção já usada por .bb-screen--obrigado/.bb-screen--premiacao —
   layout mobile-first é a ordem do DOM (visual, depois conteúdo), sem nenhuma
   propriedade order em lugar nenhum. */

/* Centraliza a composição na altura disponível, mesmo padrão de
   .bb-screen--premiacao — aqui não há bloco irmão ancorado no rodapé (como o
   legal de /Obrigado), então nada compete pelo espaço vertical restante. */
.bb-screen--numeros .bb-content {
    display: flex;
    flex-direction: column;
}

.bb-numeros-grid {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--bb-space-xl);
}

/* Rótulo amarelo do mesmo padrão visual do rótulo de premiação — reaproveita
   BancoDoBrasilTextos, nenhuma fonte nova. */
.bb-numeros-eyebrow {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 500;
    font-size: var(--bb-fs-eyebrow);
    line-height: 1.2;
    color: var(--bb-azul);
    margin: 0 0 var(--bb-space-sm);
    margin-bottom: 2rem;
}

/* Traço decorativo curto — pseudo-elemento (não markup), puramente decorativo,
   não deve ser lido por leitor de tela. Centralizado no empilhado (margem
   horizontal auto); a regra de 992px abaixo zera a margem esquerda para
   encostar na borda da coluna quando as colunas ligam. */
.bb-numeros-eyebrow::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--bb-azul);
    margin: var(--bb-space-sm) auto 0;
}

/* Teto de 480px deliberado: o arquivo tem 735px intrínsecos, então 480 garante
   que a imagem nunca é ampliada além do original, e ao mesmo tempo emparelha
   com a medida de 520px da coluna de texto, para nenhum dos dois lados
   dominar a composição — mesmo raciocínio já documentado em
   .bb-obrigado-imagem. */
.bb-numeros-imagem {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
}

.bb-numeros-conteudo {
    text-align: center;
}

/* Branco: par branco/azul de marca dá ~4.88:1 e passa como texto normal —
   mesmo raciocínio de .bb-obrigado-titulo. */
.bb-numeros-titulo {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-display);
    line-height: 1.15;
    color: var(--bb-azul);
    margin: 0 0 var(--bb-space-lg);
}

/* Contraste: amarelo de marca sobre o azul de marca dá ~4.44:1, um pouco
   ABAIXO do mínimo de 4.5:1 exigido para texto normal — este parágrafo só
   fica conforme por ser texto grande (peso 700 a partir de 18.66px, faixa em
   que o mínimo cai para 3:1). Por isso font-weight: 700 e font-size de no
   mínimo 19px não são escolha estética: são o que mantém a tela acessível —
   mesma armadilha já registrada em .bb-obrigado-texto. Sem text-shadow: o
   fundo é chapado, a sombra seria só ruído. */
.bb-numeros-texto {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 500;
    font-size: var(--bb-fs-lead);
    line-height: 1.35;
    color: var(--bb-azul);
    margin: 0 0 var(--bb-space-md);
    text-align: right;
    padding-left: 0;
    }

    .bb-numeros-texto li {
        list-style: none;
    }

/* Classe própria em vez de reusar .bb-index-cta: aquela classe tem uma media
   query de 768px NÃO escopada à tela do hero (o seletor é o nome da classe
   puro), que empurraria este botão pra direita da coluna (margin-left: auto)
   — reusar arrastaria esse posicionamento junto, incompatível com a coluna
   centralizada/à esquerda desta tela. */
.bb-numeros-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    /* margin-top removido (quick 260816-vye): a classe agora só é usada
       dentro do wrapper .bb-cta-qrcode, que já aplica o espaçamento vertical
       de forma uniforme aos dois filhos (botão + QR) — um margin-top só
       neste elemento desalinharia os dois num flex row (ver comentário em
       .bb-cta-qrcode). margin: 0 auto preserva a centralização horizontal
       herdada quando o wrapper está em contexto inline-level. */
    margin: 0 auto;
    padding: var(--bb-space-md) var(--bb-space-xl);
    border-radius: 8px;
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-heading);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bb-numeros-cta:hover,
.bb-numeros-cta:focus,
.bb-numeros-cta:active {
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
    text-decoration: none;
}

.bb-numeros-cta:focus-visible {
    outline: 3px solid var(--bb-branco);
    outline-offset: 3px;
}

.bb-mural-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: var(--bb-space-md) var(--bb-space-xl);
    border-radius: 8px;
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-heading);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    width: 100%;
    margin-top: 2rem;
}

.bb-mural-cta:hover,
.bb-mural-cta:focus,
.bb-mural-cta:active {
    background-color: var(--bb-azul);
    color: var(--bb-amarelo);
    text-decoration: none;
}
/* Media query de 2 colunas — aritmética escrita por inteiro (D-06 do padrão
   já usado em /Obrigado proíbe copiar o valor de outra tela): 480px de
   imagem + 48px de respiro entre colunas (--bb-space-2xl) + 520px de coluna
   de texto + 48px do padding horizontal que o próprio .bb-content aplica dos
   dois lados = 1096px, largura em que as duas colunas atingem o tamanho
   natural ao mesmo tempo. O par de colunas é ligado antes disso, em 992px,
   mesmo critério já usado em /Obrigado: entre 992px e 1096px é a coluna da
   IMAGEM que absorve a diferença (a trilha é minmax(0, 1fr), não um valor
   fixo), nunca a coluna de texto, que tem medida de leitura a preservar.
   minmax(0, ...) nas duas trilhas evita o estouro clássico de grid causado
   pelo tamanho mínimo automático da imagem. */
@media (min-width: 992px) {
    .bb-screen--numeros .bb-content {
        max-width: 1096px;
    }

    .bb-numeros-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
        gap: var(--bb-space-2xl);
    }

    .bb-numeros-visual {
        text-align: left;
    }

    .bb-numeros-eyebrow::after {
        margin-left: 0;
    }

    .bb-numeros-imagem {
        margin: 0;
    }

    .bb-numeros-conteudo {
        text-align: right;
        margin-top: 80px;
    }

    .bb-quiz-conteudo, .bb-depoimento-conteudo {
        margin-top: 80px;
    }

    .bb-numeros-titulo {
        font-size: 28px;
    }

    .bb-numeros-texto {
        font-size: 20px;
    }

    /* margin-top removido aqui pelo mesmo motivo do override base acima
       (quick 260816-vye) — o espaçamento vertical agora vive em
       .bb-cta-qrcode. */
    .bb-numeros-cta {
        margin: 0;
    }
}

/* ===== Tela institucional em / — hero, título e CTA (PDF de referência pág. 1, D-01) ===== */

/* Modificador de .bb-screen (a regra base não é tocada — ela segue pintando o
   amarelo de /Cadastro, /Obrigado e /Regulamento). Precisa ficar DEPOIS da
   regra base no arquivo: mesma especificidade, quem decide o background é a
   ordem de declaração. Foto do hero entregue pelo cliente BB (quick 260813,
   resolve o stub id 3 de WINDOWS.md) — cruzeiro + mascote + praia, a mesma
   cena da pág. 1 do PDF de referência; o mascote já vem dentro da foto, então
   não há mais um <img> de mascote solto no markup (ver Index.cshtml).

   Camada extra de escurecimento (linear-gradient sólido, opacidade .5) por
   CIMA da foto, por baixo do texto: cover é responsivo e a mesma foto é
   recortada de formas diferentes por breakpoint (às vezes o texto cai sobre
   o casco do navio, às vezes sobre o mascote), então não há uma única
   posição que garanta contraste do texto branco/amarelo em toda largura de
   tela — o escurecimento uniforme resolve isso sem depender de onde o corte
   cai. --bb-azul-hero-base fica só como cor de fallback caso a foto falhe. */
.bb-screen--index {
    background-color: var(--bb-azul-hero-base);
    background-image: url('../images/bg-hero-cruzeiro.webp');
    background-size: cover, cover;
    background-position: right, center;
    background-repeat: no-repeat, no-repeat;
    position: relative;
    overflow: hidden;
    /* Tamanho do selo decorativo do BB (ajustado por breakpoint abaixo) —
       variável local escopada a este modificador. */
    --bb-index-selo-size: 96px;
}

/* Imagem real do hero SÓ no mobile (pedido do usuário) — troca o esquema de
   foto de fundo cortada (cover) + texto sobreposto por um bloco de <img> de
   verdade no topo (ordem de DOM, mesmo padrão já usado em /Obrigado:
   "mobile-first é a ordem do DOM"), seguido do texto em fluxo normal embaixo,
   sobre fundo azul chapado — sem foto atrás do texto, então sem precisar de
   gradiente de contraste. Escondida no desktop (ver @media abaixo): lá o
   hero continua sendo a foto de fundo cortada com texto/CTA pintados nos
   pixels (D-01/quick 260817-m39, hotspot via JS em index-hero-cta.js) —
   nada disso muda. */
.bb-index-foto-mobile {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .bb-index-foto-mobile {
        display: none;
    }
}

/* Centra o grid na altura do hero — .bb-content já é o flex item coluna de
   .bb-screen; aqui só ganha justify-content. Escopado ao modificador, então
   .bb-content das outras telas não muda. */
.bb-screen--index .bb-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Mascote agora vive dentro da foto de fundo (bg-hero-cruzeiro.webp) — não há
   mais uma segunda coluna de imagem aqui, só o bloco de texto por cima da
   foto. Mobile (padrão): centralizado. Desktop (ver @media abaixo): empurrado
   pra direita, mesma área da foto onde a água fica mais "limpa" atrás do
   texto. position/z-index mantém o conteúdo acima do overlay escuro do hero. */
.bb-index-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* H1 branco (peça nova, D-01) — separado de .bb-index-texto porque agora têm
   cores diferentes (antes compartilhavam um seletor agrupado). text-shadow
   reforça o contraste por cima da foto além do escurecimento uniforme de
   .bb-screen--index — sem ele, o branco ainda perde legibilidade sobre
   trechos claros da foto (casco do navio, céu). Peso base 500 (Medium,
   quick 260813-roa) — o destaque da hierarquia de três níveis do h1 vem das
   regras de .bb-index-heading strong/b logo abaixo, não deste bloco. */
.bb-index-heading {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 500;
    font-size: var(--bb-fs-display);
    line-height: 1.15;
    color: var(--bb-branco);
    text-align: center;
    margin: 0 0 var(--bb-space-lg);
}

/* Destaque intermediário do h1 ("render uma cabine no cruzeiro", quick
   260813-roa) — peso declarado a mão porque o bold default de user-agent da
   tag strong é genérico; desde a quick 260813-raa existe arquivo real de peso
   700 da BancoDoBrasilTitulos, e é esse arquivo que se quer aqui, não um bold
   sintético que o browser acerta por coincidência. */
.bb-index-heading strong {
    font-weight: 700;
}

/* Destaque máximo do h1 ("Dominguinho em Alto-Mar!", quick 260813-roa) — este
   é o caso em que o default de user-agent estaria ERRADO: sem esta regra a
   tag b renderizaria no mesmo bold genérico da tag strong acima e o nível
   mais forte da hierarquia desapareceria. Escala pretendida: Medium (500) na
   base, Bold (700) no trecho intermediário, XBold (800) aqui, no nome do
   produto. */
.bb-index-heading b {
    font-weight: 800;
}

.bb-index-heading span {
    color: var(--bb-amarelo)
}
/*
.bb-index-heading span:before {
    content: "";
    width: 100%;
    height: 21px;
    background-color: var(--background-highlight);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}*/

/* Parágrafos amarelos (peça nova, D-01). Mesmo raciocínio de text-shadow do
   H1 acima — o amarelo é o par mais arriscado de contraste porque a foto tem
   trechos amarelos (o próprio mascote); a sombra escura separa a letra do
   fundo mesmo quando as duas cores quase coincidem. */
.bb-index-texto {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 500;
    font-size: var(--bb-fs-lead);
    line-height: 1.3;
    color: #fff;
    text-align: center;
    margin: 0 0 var(--bb-space-sm);
}

/* Respiro maior antes da linha de fechamento ("Bons investimentos e boa
   sorte!") — na peça esse parágrafo tem mais distância do parágrafo 1. */
.bb-index-texto--fecho {
    margin-top: var(--bb-space-lg);
}

.bb-index-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 320px;
    margin: var(--bb-space-2xl) auto 0;
    padding: var(--bb-space-md) var(--bb-space-xl);
    /* 8px (não mais 24px/cápsula): a peça nova mostra um botão retangular de
       canto suave, não a pílula da referência anterior — CTA agora é
       amarelo/texto azul em caixa alta (D-01, D-07). */
    border-radius: 8px;
    background-color: var(--bb-amarelo);
    color: var(--bb-azul);
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-cta);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Desktop: bloco à direita da foto, texto maior e alinhado à direita (feedback
   de revisão) — só a partir daqui, mobile fica exatamente como sempre foi. */
@media (min-width: 768px) {
    /* Empurra o bloco de texto pra direita da foto (mesma composição da peça:
       cruzeiro/mascote ocupam a esquerda da imagem, texto fica sobre a água à
       direita). Como .bb-index-grid é flex-direction:column, quem alinha na
       HORIZONTAL é align-items (o cross-axis) — não justify-content, que aqui
       agiria no eixo vertical. max-width em .bb-index-conteudo evita que o
       parágrafo estique numa faixa larga demais nessa metade da tela. */
    .bb-index-grid {
        align-items: flex-end;
    }

    /* Coluna à direita, mas o texto dentro dela alinhado à esquerda (leitura
       natural) — o conjunto todo é que fica encostado na borda direita.

       opacity:0 (SEM pointer-events:none — ver nota abaixo) porque o texto
       desse bloco (H1/parágrafo/CTA "Participe") já está pintado direto nos
       pixels de bg-hero-cruzeiro.webp nesse breakpoint (o layout original do
       PDF do cliente não reproduzia bem em HTML responsivo). O bloco continua
       no DOM só pra virar uma área clicável invisível ("hotspot") sobre o
       botão "PARTICIPE" pintado na imagem — é ISSO que .bb-index-cta
       (dentro deste container) precisa continuar recebendo clique/toque.
       opacity:0 sozinho NÃO desliga pointer-events (só visibility/display
       fariam isso) — por isso NUNCA adicionar pointer-events:none aqui de
       novo: isso já quebrou o único link de /Index pra /Cadastro do site
       inteiro uma vez (nenhum clique chegava no <a>, confirmado via
       Playwright). Mobile (abaixo deste breakpoint) nunca teve esse
       problema — a imagem mobile não tem texto pintado, então o bloco
       segue 100% visível e clicável do jeito de sempre. */
    .bb-index-conteudo {
        max-width: 510px;
        text-align: left;
        opacity: 0;
    }

    .bb-index-heading {
        font-size: 34px;
        text-align: left;
    }

    .bb-index-texto {
        font-size: 20px;
        text-align: left;
    }

    /* CTA alinhado à esquerda da coluna, junto ao texto — valor de fallback
       caso o JS não rode (ver index-hero-cta.js). Com JS habilitado,
       position:absolute + left/top/width/height/margin:0 inline substituem
       completamente este posicionamento estático: o hotspot precisa seguir
       o botão "PARTICIPE" pintado na imagem, que se move por causa do
       background-size:cover — nenhum valor fixo de CSS acompanha isso. */
    .bb-index-cta {
        position: absolute;
        margin: var(--bb-space-2xl) 0 0 auto;
    }

    /* Em desktop o logo ganha um pouco mais de presença acompanhando o texto
       maior. */
    .bb-screen--index {
        --bb-index-selo-size: 132px;
    }

    /* Corrige o corte do botão "PARTICIPE" pintado na imagem em telas curtas
       (ex.: notebook 1366x768 com pouca altura de viewport disponível) —
       achado do usuário. Causa raiz: min-height:100vh (herdado da regra base
       .bb-screen) força o container a uma altura que pode ficar BEM menor
       que a proporção nativa da imagem (1920x1080); como background-size:
       cover centraliza o corte verticalmente, um container mais baixo/largo
       que 16:9 corta a MESMA fatia de cima e de baixo — e o botão fica perto
       da borda inferior da peça, então é ele que desaparece primeiro. Nenhum
       ajuste de index-hero-cta.js resolve isso: se o pixel do botão está
       fora da janela recortada visível, não existe posição de hotspot que o
       traga de volta à tela.
       aspect-ratio trava a altura do container na MESMA proporção da
       imagem (1920/1080) — com container e imagem na mesma razão,
       background-size:cover não precisa cortar verticalmente NUNCA, em
       nenhuma largura/altura de viewport. min-height:auto cancela o piso de
       100vh da regra base (que é exatamente o que forçava o corte); sem
       esse piso, a altura do hero passa a acompanhar só a largura da tela,
       podendo ficar menor que a viewport inteira em telas baixas — troca
       aceitável: prefere expor o rodapé mais cedo a cortar o CTA. */
    .bb-screen--index {
        aspect-ratio: 1920 / 1080;
        min-height: auto;
    }
}

/* Composição larga (a peça é mais larga que o corte de 900px) — escopado ao
   modificador, .bb-content--900 não muda de significado para ninguém. */
@media (min-width: 1200px) {
    .bb-screen--index .bb-content {
        max-width: 1140px;
    }

    .bb-index-heading {
        font-size: 36px;
    }

    .bb-index-texto {
        font-size: 22px;
    }

    .bb-screen--index {
        --bb-index-selo-size: 148px;
    }
}

.bb-index-cta:hover,
.bb-index-cta:focus,
.bb-index-cta:active {
    background-color: var(--bb-amarelo);
    color: var(--bb-azul);
    text-decoration: none;
}

/* Outline branco (não mais o escuro da peça anterior): o outline escuro some
   sobre o fundo azul do hero. Branco tem contraste tanto contra o botão
   amarelo quanto contra o fundo azul. */
.bb-index-cta:focus-visible {
    outline: 3px solid var(--bb-branco);
    outline-offset: 3px;
}

/* Logo do BB (D-05) — agora acompanha o bloco de texto (é o primeiro filho de
   .bb-index-conteudo), em opacidade cheia, não mais como marca-d'água absoluta
   no fundo. Bloco de display pra respeitar o text-align do container: fica
   centralizado com o texto no mobile e encostado à direita no desktop, sempre
   pela mesma borda dos parágrafos. */
.bb-index-selo {
    display: block;
    width: var(--bb-index-selo-size);
    height: auto;
    margin: 0 auto var(--bb-space-md);
}

/* Desktop: alinhado à esquerda da coluna, mesma borda do texto — fica agrupado
   com o bloco (topo da coluna), não solto no canto da tela. */
@media (min-width: 768px) {
    .bb-index-selo {
        margin: 0 auto var(--bb-space-md) 0;
    }
}

/* ===== Página pública /Regulamento — leitura prolongada (EMAIL-02, D-02, plano 03-02) =====
   Três regras aditivas, nenhuma regra existente acima foi tocada. */

/* Modificador de .bb-content: 640px é um desvio deliberado do token --bb-max-width
   (480px), documentado como exceção em 03-UI-SPEC.md §Spacing Scale Exceptions — a
   página existe só para leitura prolongada de texto legal, sem campo de entrada nem
   card compacto, e uma coluna mais larga mantém a linha entre ~65 e 75 caracteres a
   16px. É modificador, não substituição: a página aplica as duas classes juntas
   (class="bb-content bb-content--leitura"), então margin:0 auto, padding e flex —
   inclusive o @media de padding vertical de .bb-content acima — continuam herdados. */
.bb-content--leitura {
    max-width: 640px;
}

/* Feedback de revisão: diferente do form/hero (que não fazem sentido esticados
   em desktop), a leitura do regulamento deve aproveitar mais a tela em telas
   largas — mais conteúdo visível por rolagem, sem virar uma coluna estreita
   perdida no meio de uma tela grande. Continua centralizado (margin:0 auto
   herdado de .bb-content) em todos os breakpoints, só a largura cresce. */
@media (min-width: 992px) {
    .bb-content--leitura {
        max-width: 900px;
    }
}

@media (min-width: 1400px) {
    .bb-content--leitura {
        max-width: 1100px;
    }
}

/* Seletor descendente (não modificador BEM na própria caixa): .bb-regulamento-box
   pertence à partial _RegulamentoTexto.cshtml, cujo comentário de produção proíbe
   editá-la — o wrapper .bb-regulamento-pagina, presente só nesta página, é o único
   ponto de aplicação disponível (03-UI-SPEC.md autoriza explicitamente esse mecanismo).

   Neutraliza apenas as duas propriedades de restrição de altura da regra original
   (.bb-regulamento-box, acima): max-height volta a não ter limite e overflow-y volta
   ao fluxo normal — a rolagem passa a ser da página, não da caixa. Fundo branco,
   borda azul de 2px e raio de 16px NÃO são redeclarados aqui: continuam vindo só da
   regra original, o que garante que o componente permanece visualmente o mesmo nas
   duas superfícies.

   A divergência entre esta página e a caixa embutida em /Cadastro é deliberada: dentro
   do formulário a caixa precisa de altura limitada para não empurrar os dois aceites e
   o botão CONFIRMAR fora da viewport inicial; numa página dedicada não há nada abaixo
   competindo por espaço, e o padrão natural de uma página de leitura é rolagem de
   página, não rolagem dentro de rolagem (T-03-18). */
.bb-regulamento-pagina .bb-regulamento-box {
    max-height: none;
    overflow-y: visible;
}

/* Link de navegação em texto — não reusa .bb-btn-confirmar porque é navegação
   opcional ("Ir para o cadastro"), não ação de formulário. A centralização é
   responsabilidade do elemento que envolve o link na página, não desta regra. */
.bb-link-secundario {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    font-weight: 400;
    color: var(--bb-azul);
    text-decoration: underline;
    display: inline-block;
    margin-top: var(--bb-space-lg);
}

/* ===== Header superior persistente (quick 260812-mw3) =====
   Bootstrap vendorizado é 5.1.0 — não existem custom properties --bs-* por
   componente (chegaram só no 5.3). O chevron do accordion e o ícone do
   navbar-toggler nativos do Bootstrap 5.1 são data-URI de cor fixa fora da
   paleta BB e não são recoloríveis sem hex cru embutido; por isso ambos são
   desligados abaixo e substituídos por SVG inline com stroke="currentColor". */

@media (min-width: 768px) {
    :root {
        --bb-header-height: 52px;
    }
}

.bb-header {
    background-color: var(--bb-amarelo);
    border-bottom: 5px solid var(--bb-azul);
    /* Ancora o painel mobile abaixo (position: absolute, ver .bb-header-menu)
       — sem isto ele se posicionaria contra o <body>, não contra a barra. */
    position: relative;
}

.bb-header-nav {
    padding: 0;
}

.bb-header-inner {
    min-height: var(--bb-header-height);
    padding-left: var(--bb-space-md);
    padding-right: var(--bb-space-md);
}

.bb-header-marca {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

/* Logo do header quadrado (24x24), batendo com os atributos width/height
   já presentes na tag <img> — o ícone atual é praticamente 1:1, não a
   marca horizontal larga que motivou o dimensionamento elástico antigo. */
.bb-header-logo {
    display: block;
    width: 24px;
    height: 24px;
}

@media (min-width: 768px) {
    .bb-header-marca {
        border-right: 2px solid var(--bb-azul);
        padding-right: var(--bb-space-md);
        margin-right: var(--bb-space-md);
    }


}

.bb-header-toggler {
    border: none;
    padding: 0;
    color: var(--bb-azul);
}

/* SVG sem width/height intrínsecos assume o tamanho padrão do elemento
   substituído (300x150 CSS px) — sem esta regra os 2 ícones do toggler
   estouram o botão e quebram o layout do header. */
.bb-icone-abrir,
.bb-icone-fechar {
    display: block;
    width: 24px;
    height: 24px;
}

.bb-header-toggler:focus {
    box-shadow: none;
}

.bb-header-toggler:focus-visible {
    outline: 2px solid var(--bb-azul);
    outline-offset: 2px;
}

/* Alternância de ícone é puramente CSS via aria-expanded — o plugin collapse
   do Bootstrap já mantém esse atributo sincronizado, nenhum JS próprio. */
.bb-icone-fechar {
    display: none;
}

.bb-header-toggler[aria-expanded="true"] .bb-icone-abrir {
    display: none;
}

.bb-header-toggler[aria-expanded="true"] .bb-icone-fechar {
    display: block;
}

.bb-header-link {
    background: none;
    border: none;
    padding: var(--bb-space-sm) 0;
    /* Um peso a menos que o padrão de heading do tema: os únicos 2 pesos
       self-hosted são Titulos-700 (usado em heading/CTA) e Textos-400 — não
       há Titulos-400 nem Textos-700 carregados nesta fase (bb-fonts.css), então
       "afinar" o menu significa trocar de família, não só de peso numérico. */
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-body);
    color: var(--bb-azul);
    text-decoration: none;
    text-align: left;
}

.bb-header-link:focus-visible {
    outline: 2px solid var(--bb-azul);
    outline-offset: 2px;
}

/* .bb-header-link foi escrita pensando em button — este é o primeiro uso
   dela numa tag a (item "Premiação", quick 260813-s7q). Duas consequências
   reais de aplicar a mesma classe num elemento diferente: (i) o reboot do
   Bootstrap 5.1 declara a:hover com cor própria, e essa regra tem
   especificidade MAIOR que .bb-header-link sozinha — sem este bloco o link
   novo mudaria de cor no hover enquanto os vizinhos (button) não mudam;
   (ii) o padding vertical de .bb-header-link não afeta o layout de um
   elemento inline, então o inline-block abaixo é o que faz a área clicável
   do link ficar do mesmo tamanho da dos botões vizinhos no painel mobile.
   Aditivo e escopado a a — o bloco .bb-header-link original não é tocado,
   então os dois button existentes continuam renderizando exatamente como
   hoje. */
a.bb-header-link,
a.bb-header-link:hover,
a.bb-header-link:focus {
    display: inline-block;
    color: var(--bb-azul);
    text-decoration: none;
}

.bb-header-lista {
    padding-bottom: var(--bb-space-sm);
}

/* Painel do menu mobile: sobreposto (position: absolute), nunca em fluxo.
   Motivo duplo — (1) empurrar o conteúdo da página pra baixo ao abrir o
   menu é a experiência errada aqui (feedback de revisão); (2) em fluxo
   normal, o wrap do Bootstrap pra 2ª linha muda a altura total de
   .bb-header-inner, e como .bb-header-marca/.bb-header-toggler são
   centralizados por align-items nessa mesma caixa, a barra "pula" pra
   cima quando o painel aparece. Tirar o painel do fluxo (absolute) resolve
   os dois de uma vez: a barra nunca redimensiona e a página abaixo nunca
   se move. Escopado a <768px — no desktop o menu já é inline, nunca colapsa. */
@media (max-width: 767.98px) {
    .bb-header-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        margin: 0;
        /* Só padding horizontal aqui — o vertical já vem de .bb-header-lista
           (padding-bottom) e do próprio espaçamento entre os <li>; dobrar
           padding-bottom nos dois níveis só infla o painel sem necessidade. */
        padding: 0 var(--bb-space-md);
        background-color: var(--bb-amarelo);
        border-bottom: 2px solid var(--bb-azul);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }



    /* justify-content:flex-start (sobrescreve o flex-end da regra base,
       que é pro desktop) — imagem e texto agora são blocos separados em
       fluxo normal, não tem mais texto sobreposto a uma foto cortada pra
       alinhar contra a borda de baixo. */
    .bb-screen--index .bb-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* background-image:none — a foto deixou de ser fundo cortado (cover) e
       virou um <img> de verdade (.bb-index-foto-mobile) no topo do markup,
       fora de .bb-content. Só sobra o azul chapado atrás do bloco de texto
       (--bb-azul, não --bb-azul-hero-base — esse é só fallback de "foto não
       carregou" do desktop; --bb-azul é o mesmo azul da própria foto/CTA,
       fica mais coerente agora que essa cor aparece como fundo real, visível
       por baixo do texto, não mais como fallback raro). */
    .bb-screen--index {
        background-image: none;
        background-color: var(--bb-azul);
    }
}

@media (min-width: 768px) {
    .bb-header-lista {
        flex-direction: row;
        gap: var(--bb-space-lg);
        padding-bottom: 0;
    }
}

/* Shell de modal compartilhado pelos 2 modais do header (Regulamento e FAQ).
   border-radius de 16px repete o mesmo desvio deliberado do pill já
   registrado em .bb-regulamento-box, acima. */
.bb-modal .modal-content {
    border: none;
    border-radius: 16px;
    background-color: var(--bb-branco);
}

/* Bootstrap 5.1 define max-width: 500px (modal-md) pro .modal-dialog a
   partir do breakpoint sm — os 2 modais do header (Regulamento e FAQ) usam
   um dialog mais largo pra caber melhor o texto corrido/accordion. */
.bb-modal .modal-dialog {
    max-width: 680px;
}

.bb-modal-titulo {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    color: var(--bb-azul);
}

/* Não há token de cinza claro na paleta BB — rgba neutro em vez de inventar
   um hex de marca só para o fundo do botão de fechar. */
.bb-modal-fechar {
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
}

.bb-modal-fechar:focus-visible {
    outline: 2px solid var(--bb-azul);
}

/* Neutraliza a moldura do regulamento dentro do modal: .bb-regulamento-box
   foi desenhada como caixa de leitura de 240px embutida na etapa 2 do
   formulário; dentro de um modal-dialog-scrollable isso viraria um segundo
   scroll aninhado. O partial _RegulamentoTexto em si não é alterado. */
.bb-modal .bb-regulamento-box {
    max-height: none;
    overflow-y: visible;
    border: none;
    padding: 0;
}

/* Afordância do texto clicável (D-01, quick 260814-pfr: só a palavra
   "Regulamento" é o gatilho, não a frase inteira). .bb-link-regulamento já
   tem sublinhado, cor de marca e cursor: pointer — só acrescenta um :hover
   discreto, engrossando o sublinhado sem mudar cor nem fundo. Nada de caixa,
   seta ou ícone: o sublinhado já é a afordância. */
.bb-link-regulamento:hover {
    text-decoration-thickness: 2px;
}

/* ===== Modal FAQ — accordion (quick 260812-mw3, ajuste de cores/cards 260814-sxj) =====
   Desliga o chevron nativo do Bootstrap 5.1 (.accordion-button::after é um
   data-URI de cor fixa azul-Bootstrap, fora da paleta BB e não recolorível
   sem hex cru). Quem indica o estado é o SVG inline .bb-faq-chevron, que
   gira via aria-expanded — mantido pelo próprio plugin collapse, nenhum JS
   próprio. A partir do ajuste 260814-sxj o azul do chevron é fixado na
   própria regra .bb-faq-chevron (color: var(--bb-azul)), não mais herdado
   via currentColor do texto do botão — .bb-faq-botao virou cinza neutro
   (rgba(0, 0, 0, 0.75)) pra bater com a referência visual do cliente, que
   reserva o azul só para o título "FAQ" e o rótulo de categoria. */
.bb-faq-botao::after {
    display: none;
}

/* Bootstrap conecta os itens do accordion por padrão (borda superior
   suprimida nos itens seguintes, só as pontas da pilha arredondadas — ver
   .accordion-item[:first|:last]-of-type/:not(:first-of-type) em
   lib/bootstrap/dist/css/bootstrap.css ~linha 4660). Aqui cada pergunta
   vira um cartão independente, com espaço visível entre um e outro. A
   especificidade empata com as regras do Bootstrap citadas acima (2
   classes vs. 1 classe + 1 pseudo-classe); quem decide é a ordem de carga
   — bb-theme.css é carregado depois de bootstrap.min.css em
   _Layout.cshtml, então esta regra vence sem precisar de !important. */
.bb-faq-accordion .accordion-item {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--bb-space-md);
    overflow: hidden;
}

.bb-faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

/* Destaque sutil do item aberto (D-04): borda um pouco mais evidente, na
   mesma cor lavanda do fundo do cabeçalho/resposta abaixo, só em opacidade
   maior. :has() é suportado pelos browsers-alvo deste projeto; sem
   suporte, o item aberto simplesmente mantém a borda neutra padrão, sem
   quebrar o accordion. */
.bb-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(70, 94, 255, 0.25);
}

.bb-faq-botao {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-body);
    color: rgba(0, 0, 0, 0.75);
    background-color: var(--bb-branco);
    box-shadow: none;
    gap: var(--bb-space-sm);
}

/* Bootstrap 5.1 aplica azul-Bootstrap + fundo #e7f1ff próprios ao item
   aberto (:not(.collapsed)) — aqui o texto continua no mesmo cinza neutro
   do botão fechado, e o fundo vira lavanda sutil (--bb-azul em baixa
   opacidade) como destaque do item expandido (D-04). */
.bb-faq-botao:not(.collapsed) {
    color: rgba(0, 0, 0, 0.75);
    background-color: rgba(70, 94, 255, 0.06);
}

.bb-faq-botao:focus {
    box-shadow: none;
}

.bb-faq-botao:focus-visible {
    outline: 2px solid var(--bb-azul);
    outline-offset: -2px;
}

.bb-faq-numero {
    flex: 0 0 auto;
}

.bb-faq-pergunta {
    text-align: left;
}

.bb-faq-chevron {
    /* Fixa o azul do chevron nesta própria regra (currentColor do SVG) —
       .bb-faq-botao deixou de ser azul (260814-sxj), então o chevron
       precisa da cor própria em vez de herdar do texto do botão pai. */
    color: var(--bb-azul);
    /* SVG sem width/height intrínsecos assume o tamanho padrão do elemento
       substituído (300x150 CSS px) — sem largura/altura explícitas o chevron
       estoura o botão do accordion e empurra a pergunta pra uma coluna estreita. */
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.bb-faq-botao[aria-expanded="true"] .bb-faq-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .bb-faq-chevron {
        transition: none;
    }
}

.bb-faq-resposta {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-size: var(--bb-fs-sm);
    color: rgba(0, 0, 0, 0.75);
    /* Mesma cor lavanda sutil do cabeçalho aberto (--bb-azul em baixa
       opacidade) — a resposta só é visível quando o item está expandido,
       então compartilha o destaque do card aberto (D-04). */
    background-color: rgba(70, 94, 255, 0.06);
}

.bb-faq-categoria {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-heading);
    color: var(--bb-azul);
    margin-bottom: var(--bb-space-md);
}

/* Parágrafo de introdução do modal FAQ (D-02, 260814-sxj): classe própria
   em vez de sobrescrever ou escopar .bb-body-text. .bb-body-text é
   reaproveitada em wwwroot/429.html (página estática, fora do Razor
   Pages) e é citada como "propositalmente evitada" em Obrigado.cshtml /
   NumerosDaSorte.cshtml — uma sobrescrita escopada (ex.: "#bb-modal-faq
   .bb-body-text") colidiria se .bb-body-text for reaproveitada numa nova
   tela amarela no futuro. Repete as mesmas 4 propriedades tipográficas de
   .bb-body-text, só trocando a cor para o cinza neutro do restante do
   modal FAQ. */
.bb-faq-intro {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-body);
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
}

/* ===== Página /Premiacao (quick 260814-39g) =====
   Até a quick 260813-s7q esta composição era uma faixa dentro da Index,
   navegada por âncora. Virou página própria nesta task — a Index acumulava
   duas telas num scroll só (hero fotográfico + esta faixa) e o item de menu
   "Prêmio" era o único da barra que não navegava por página inteira. O
   pôster do prêmio e a descrição do cruzeiro continuam os mesmos; só a
   casca (wrapper de tela + rota) mudou. */

/* Fundo azul de marca CHAPADO — sem background-image, ao contrário do hero
   da Index, que é fotográfico. É a mesma escolha de contraste de antes:
   depois de uma tela com foto pesada, uma tela de cor sólida "descansa" a
   leitura antes do pôster do prêmio.

   Precisa ficar DEPOIS da regra base de .bb-screen no arquivo — mesma
   especificidade, quem decide o background é a ordem de declaração (mesmo
   mecanismo já documentado em .bb-screen--obrigado/.bb-screen--index). Sem
   scroll-margin-top: não há mais âncora, a navegação agora é troca de
   página inteira. */
.bb-screen--premiacao {
    background-color: var(--bb-azul);
}

/* Tela cheia (não mais faixa no meio do scroll): a composição se centra na
   altura disponível, mesmo padrão já usado por .bb-screen--obrigado. Regra
   escopada — a .bb-content compartilhada não se toca. */
.bb-screen--premiacao .bb-content {
    display: flex;
    flex-direction: column;
}

/* Layout mobile-first (D-08): a ordem visual do mobile é EXATAMENTE a ordem
   do DOM (eyebrow + imagem, depois título + parágrafo) — por isso nenhuma
   propriedade order é usada aqui. Se um dia a ordem precisar mudar em algum
   breakpoint, é neste bloco/no @media abaixo que se mexe, nunca no markup. */
.bb-premiacao-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--bb-space-xl);
}

/* Rótulo amarelo acima do pôster — reaproveita BancoDoBrasilTextos, nenhuma
   fonte nova (D-09). */
.bb-premiacao-eyebrow {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 500;
    font-size: var(--bb-fs-eyebrow);
    line-height: 1.2;
    color: var(--bb-amarelo);
    margin-bottom: 2rem;
}

/* Traço decorativo curto abaixo do eyebrow — primeiro uso desse padrão no
   arquivo. Pseudo-elemento (não markup) porque é puramente decorativo e não
   deve ser lido por leitor de tela. Centralizado no mobile (margem
   horizontal auto); o @media de 768px abaixo zera a margem esquerda para
   encostar na borda do texto. */
.bb-premiacao-eyebrow::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--bb-amarelo);
    margin: var(--bb-space-sm) auto 0;
}

/* Pôster do prêmio — a arte já traz moldura decorativa própria, por isso não
   há border nem box-shadow aqui, só um raio suave (mesmo raio do CTA do
   hero). Sem max-width em pixel: quem governa a largura é a coluna do grid,
   e o arquivo tem 710px intrínsecos — maior que qualquer coluna produzida
   pelos breakpoints abaixo, então a imagem nunca é ampliada além do
   original. */
.bb-premiacao-imagem {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 420px;
}

/* Heading da seção — sem background aqui de propósito: o fundo coral é do
   span interno (.bb-premiacao-titulo-destaque), e é isso que faz a barra
   acompanhar a largura do TEXTO, não a largura inteira da coluna (D-07). */
.bb-premiacao-titulo {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-size: var(--bb-fs-display);
    line-height: 1.15;
    margin: 0 0 var(--bb-space-md);
    position: relative;
    display: inline-block;
    color: var(--bb-branco);
    font-weight: 500;
    border-radius: 2px;
    z-index: 2;
    white-space: nowrap;
}

.bb-premiacao-titulo:before {
    content: "";
    width: 100%;
    height: 18px;
    background-color: var(--background-highlight);
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: -1;
}

/* Barra coral por trás do texto do título (D-02, D-07). inline-block é um
   trade-off deliberado: quando o título quebra em duas linhas (mobile), a
   barra vira UM retângulo cobrindo as duas linhas, não duas barras coladas
   em cada linha de texto — é o comportamento desejado aqui. A alternativa
   (display: inline com box-decoration-break: clone) produziria uma barra
   por linha e foi descartada. */

.bb-premiacao-titulo-destaque {
    background-color: var(--bb-coral);
    padding: 0 var(--bb-space-sm);
    width: 100%;
    height: 15px;
    width: 100%;
    display: block;
    position: absolute;
    bottom: -2px;
    z-index: -1;
}

/* Parágrafo descritivo do cruzeiro. Sem text-shadow, diferente do hero: ali
   a sombra existe porque o texto fica sobre uma foto (contraste variável);
   aqui o fundo é azul chapado e o contraste amarelo/azul é constante em
   toda a largura da seção, então a sombra seria só ruído visual. */
.bb-premiacao-texto {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-lead);
    line-height: 1.5;
    color: var(--bb-amarelo);
    margin: 0;
    text-align: center;
    margin-bottom: 1rem;
}

/* Desktop: grid de 2 colunas (não flex) porque as duas colunas precisam de
   alturas iguais e alinhamento vertical central independente do tamanho do
   texto — é o grid que dá isso sem propriedade extra em nenhum filho.
   minmax(0, 1fr) em cada trilha evita o estouro clássico de grid causado
   pelo tamanho mínimo automático do conteúdo (a imagem, no caso). */
@media (min-width: 768px) {
    .bb-premiacao-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--bb-space-2xl);
        text-align: left;
    }

    .bb-premiacao-eyebrow::after {
        margin-left: 0;
    }

    .bb-premiacao-titulo {
        font-size: 25px;
    }

    .bb-premiacao-texto {
        font-size: 18px;
    }
}

/* Composição larga — mesmo max-width (1140px) que o hero da Index já usa
   neste breakpoint (regra escopada a .bb-screen--index .bb-content), copiado
   deliberadamente para as duas telas terminarem na mesma linha vertical.
   Escopar por .bb-screen--premiacao mantém .bb-content--900 significando a
   mesma coisa para todo o resto do projeto. */
@media (min-width: 1200px) {
    .bb-screen--premiacao .bb-content {
        max-width: 1140px;
    }

    .bb-premiacao-texto {
        font-size: 22px;
        text-align: right;
    }
}

.bb-premiacao-conteudo {
    text-align: right;
}

/* ===== Layout de /Cadastro — coluna visual + formulário (quick 260813-tyy) =====
   Faixa amarela do cadastro ganha uma coluna estática (rótulo + mascote) ao
   lado do formulário existente, mesmo padrão visual da seção acima, mas em
   classes próprias: aqui o fundo é amarelo, não azul, então as cores do
   rótulo/traço se invertem — reusar as classes existentes produziria texto
   amarelo sobre fundo amarelo. */

/* Layout mobile-first: empilhado, na ordem do DOM (rótulo + imagem, depois o
   formulário) — nenhuma propriedade order é usada, a ordem visual do mobile
   é a ordem do markup.

   Duas armadilhas deliberadas, registradas aqui porque alguém copiando o
   bloco equivalente da seção acima esperaria encontrá-las:
   - Não há align-items: center — em container flex de coluna isso encolheria
     a coluna do formulário para a largura do próprio conteúdo, em vez de
     ocupar a linha inteira; a centralização do lado visual é resolvida
     dentro da própria coluna visual (ver bb-cadastro-visual, abaixo).
   - Não há text-align — a propriedade é herdada e chegaria dentro do
     formulário, centralizando avisos, rótulos de checkbox e mensagens de
     validação que hoje são alinhados à esquerda. */
.bb-cadastro-grid {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-xl);
}

/* A coluna da esquerda — é aqui, escopado, que mora a centralização do lado
   visual enquanto o layout está empilhado. */
.bb-cadastro-visual {
    text-align: center;
}

/* Rótulo azul (fundo da tela é amarelo, por isso a cor se inverte em relação
   ao equivalente da seção acima). Tipografia reaproveitada, nenhuma fonte
   nova. */
.bb-cadastro-eyebrow {
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 500;
    font-size: var(--bb-fs-eyebrow);
    line-height: 1.2;
    color: var(--bb-azul);
    margin: 0 0 2rem;
}

/* Traço decorativo curto abaixo do rótulo — pseudo-elemento, não markup,
   porque é puramente decorativo e não deve ser lido por leitor de tela.
   Centralizado no empilhado (margem horizontal auto); o breakpoint largo
   abaixo zera a margem esquerda para encostar na borda do texto. */
.bb-cadastro-eyebrow::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--bb-azul);
    margin: var(--bb-space-sm) auto 0;
}

/* O porquinho. max-width em pixel (520px, dimensão intrínseca real do
   arquivo) é deliberado e diferente do pôster da seção acima: ali o arquivo
   é maior que qualquer coluna produzida pelos breakpoints, então nunca é
   ampliado; aqui o arquivo é menor que a coluna disponível em tela grande, e
   sem esse teto a imagem seria ampliada além do original e perderia
   nitidez. Sem border, sem box-shadow, sem border-radius — sem moldura
   adicional. */
.bb-cadastro-imagem {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
}

/* A coluna da direita (o formulário). width: 100% é o par obrigatório da
   ausência de align-items no grid acima — garante que a coluna ocupe a
   linha inteira no empilhado. max-width preserva a largura de hoje mesmo se
   o container um dia crescer; margin centraliza enquanto o layout está
   empilhado (o breakpoint largo abaixo zera essa margem, porque dentro da
   trilha do grid a centralização automática deixa de fazer sentido). */
.bb-cadastro-form {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

/* Neste breakpoint o container já vale 680px (ver .bb-content--680 acima) e
   o rótulo em 24px fica subdimensionado ao lado de uma coluna dessa largura
   — só a escala tipográfica muda aqui, o layout AINDA NÃO vira 2 colunas. */
@media (min-width: 768px) {
    .bb-cadastro-eyebrow {
        font-size: 28px;
    }
}

/* As 2 colunas. Decisão contra-intuitiva deste breakpoint, que precisa estar
   escrita: a composição pede 520px de imagem + 48px de respiro entre
   colunas + 680px de formulário, ou seja 1248px de conteúdo — e não existe
   tela entre o breakpoint anterior e este onde isso caiba sem estreitar a
   coluna do formulário abaixo dos 680px que ela já tem hoje. Estreitar
   seria regressão, então o par de colunas espera até aqui. */
@media (min-width: 1200px) {
    /* O número não é arbitrário: 520 (imagem) + 48 (respiro entre colunas) +
       680 (formulário) + 48 (o padding horizontal que .bb-content já aplica
       dos dois lados) = 1296 — a largura exata em que as duas colunas
       atingem seu tamanho natural ao mesmo tempo, sem sobra. O seletor é
       escopado assim porque tem especificidade maior que o modificador de
       680px, então vence independentemente da ordem no arquivo, e o
       modificador continua significando 680px para todo o resto do
       projeto — mesma técnica já usada pela seção da Index logo acima para
       alargar o próprio container. */
    .bb-screen--cadastro .bb-content {
        max-width: 1296px;
    }

    /* Trilhas assimétricas de propósito: a coluna do formulário é a que tem
       tamanho fixo a respeitar (680px), e é a coluna da imagem que absorve
       a sobra e encolhe em telas entre este breakpoint e 1296px, nunca o
       contrário. align-items: start (não center) porque a coluna do
       formulário é muito mais alta que a imagem, e centralizar
       verticalmente descolaria o rótulo do topo da coluna, onde ele precisa
       ficar emparelhado com o heading do formulário. */
    .bb-cadastro-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 780px);
        align-items: start;
        gap: var(--bb-space-2xl);
    }

    /* Some a centralização do empilhado — o conteúdo passa a acompanhar a
       borda esquerda da própria coluna. */
    .bb-cadastro-visual {
        text-align: left;
    }

    .bb-cadastro-eyebrow::after {
        margin-left: 0;
    }

    /* No empilhado a margem automática centraliza; dentro da trilha do
       grid a imagem deve encostar na esquerda, alinhada com o rótulo
       acima. */
    .bb-cadastro-imagem {
        margin: 0;
    }

    /* Mesmo motivo: a centralização automática só faz sentido enquanto o
       layout está empilhado. */
    .bb-cadastro-form {
        margin: 0;
    }
}

/* ===== 3 zonas em tela larga: porquinho | título do formulário | campos do
   formulário (quick 260813-ve2, atualizado em 260813-xbs) =====

   /Cadastro é hoje uma tela única (o antigo fluxo em 2 telas foi fundido),
   com um grid interno que carrega um wrapper só com o heading e outro com
   todo o resto (campos, checkbox de aceite, botão). Os dois continuam
   dentro do mesmo bloco que vive dentro do alvo do swap HTMX — nada nesta
   seção move o heading pra fora desse escopo, só empilha uma coluna a mais
   por dentro dele.

   Fora deste breakpoint largo, de propósito, NADA é declarado sobre os
   wrappers novos: no empilhado a ordem do próprio DOM já reproduz o layout
   de hoje (título acima, campos abaixo) e a margem inferior do heading já
   dá o respiro vertical entre os dois — qualquer regra aqui seria código
   morto com risco de regressão no comportamento mobile-first que já existe.

   A cadeia de larguras, de dentro pra fora, com a coluna de campos voltando
   a 680px (reversão da task):
   - o grid interno de cada etapa soma a largura do wrapper de título, o
     respiro entre colunas (o mesmo token de espaçamento grande já usado no
     grid externo) e a largura da coluna de campos — 360 mais 48 mais 680,
     ou seja 1088px ao todo;
   - esse mesmo valor de 1088px passa a ser o teto do wrapper do formulário
     inteiro, porque ele é quem vira a segunda trilha do grid externo (a
     trilha que hoje vale 680px);
   - o container de conteúdo da tela de Cadastro precisa então caber o
     porquinho, o respiro externo entre as 2 colunas do grid de fora, o
     formulário de 1088px e o padding horizontal que o próprio container já
     aplica dos 2 lados — 520 mais 48 mais 1088 mais 48, ou seja 1704px;
   - e o container do Bootstrap que envolve a tela precisa caber esse
     container de conteúdo mais o próprio padding horizontal do Bootstrap
     (12px de cada lado, porque esta página não define a variável de gutter
     do Bootstrap, então vale o valor padrão) — 1704 mais 24, ou seja 1728px.

   O breakpoint escolhido pra ligar tudo isto é 1600px, não os 1728px onde a
   cadeia atinge o tamanho natural — decisão consciente, registrada no
   SUMMARY, porque entre 1600 e 1728px é a coluna do porquinho que absorve a
   diferença (encolhe temporariamente), nunca a coluna de campos.

   O elo que faltava no plano anterior: a página envolve a tela de Cadastro
   num container do Bootstrap que tem teto próprio de largura a partir de
   1200px de viewport, bem abaixo do que esta cadeia precisa — sem destravar
   esse teto o porquinho encolheria a quase nada. Como o arquivo que carrega
   esse container está fora do escopo desta task, o destravamento é feito
   por um seletor que verifica, a partir do próprio container, se ele tem a
   tela de Cadastro como filho direto. Esse seletor moderno não existe em
   navegadores mais antigos — por isso o bloco inteiro só existe dentro de
   uma verificação de suporte a ele, e a ausência de suporte faz o navegador
   simplesmente ignorar o bloco inteiro, voltando pro layout de hoje (título
   empilhado, campos em 680px, porquinho em 520px) em vez de produzir um
   porquinho miniatura. */
@supports selector(:has(*)) {
    @media (min-width: 1200px) {

        /* Teto do wrapper do formulário inteiro, igual à segunda trilha
           acima. */
        .bb-cadastro-form {
            max-width: 1088px;
        }

        /* Grid interno do formulário: wrapper de título à esquerda, wrapper
           de campos à direita. align-items: start porque o wrapper de
           campos é bem mais alto que o de título — centralizar
           verticalmente descolaria o heading do topo da coluna vizinha.
           display: flex + gap: 1rem (não grid-template-columns): consolidado
           de 2 declarações que existiam para o mesmo seletor — a segunda
           sobrescrevia display/gap da primeira, tornando as colunas de grid
           código morto. Nenhuma mudança visual resulta disso. */
        .bb-form-grid {
            display: flex;
            gap: 1rem;
            align-items: start;
        }

        /* O respiro vertical abaixo do heading só faz sentido enquanto ele
           está empilhado acima dos campos; ao lado, esse respiro sobraria
           como espaço vazio entre o heading e o topo da coluna. */
        .bb-form-titulo .bb-heading {
            margin-bottom: 0;
        }

        .bb-form-titulo {
            max-width: 300px;
        }

        .bb-heading {
            text-align: right;
        }
    }
}

/* ===== Footer persistente (quick 260814-u56) ===== */

/* Full-bleed azul, mesmo padrão de .bb-header (background full-width,
   container interno controlando a largura útil do conteúdo). */
.bb-footer {
    background-color: var(--bb-azul);
    width: 100%;
    padding: 1rem;
}

/* Traço amarelo só no footer de /Obrigado, /Premiacao, /NumerosDaSorte e
   /Index (pedido do usuário) — separa visualmente o footer do fundo azul
   chapado dessas telas, que não têm um divisor natural ali (ao contrário
   de /Cadastro, que tem fundo amarelo antes do footer).
   .bb-footer é a mesma partial global (_FooterRodape, incluída 1x em
   _Layout.cshtml) em toda página — sem uma classe no <body> por página,
   :has() no ancestral comum (<body>) é o jeito de escopar isso sem
   duplicar a partial nem introduzir ViewData por página. Mesmo padrão de
   :has() já usado no accordion do FAQ (ver acima): sem suporte, o footer
   simplesmente fica sem o traço, sem quebrar nada. */
body:has(.bb-screen--obrigado) .bb-footer,
body:has(.bb-screen--premiacao) .bb-footer,
body:has(.bb-screen--numeros) .bb-footer,
body:has(.bb-screen--index) .bb-footer {
    border-top: 2px solid var(--bb-amarelo);
}

/* Proporção compacta (quick 260814-uyj, Correção 4): padding-top reduzido de
   48px (--bb-space-2xl) para 32px (--bb-space-xl) e o gap entre as 3 colunas
   reduzido de 32px para 24px (--bb-space-lg), logo abaixo. O gap entre o
   bloco de colunas e a linha inferior de links (24px, --bb-space-lg em
   .bb-footer-rodape-links) não mudou de valor — só deixou de ser reserva
   dupla (colunas padding-bottom + divisor + rodape-links padding-top) desde
   que o divisor foi realocado para dentro do lockup do logo (Correção 3). */
.bb-footer-inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* Empilhado e centralizado por padrão (mobile-first); vira 3 colunas lado a
   lado a partir de 768px — mesmo breakpoint do menu do header (D-09). */
.bb-footer-colunas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bb-space-lg);
}

/* text-align: left fixo aqui (mesmo com .bb-footer-colunas centralizando o
   GRUPO no mobile via align-items: center) garante que ícone + wordmark +
   divisor fiquem sempre alinhados à esquerda ENTRE SI, em qualquer largura
   de tela — não herdam o text-align: center do pai. */
.bb-footer-col-logo {
    flex: 0 0 auto;
    text-align: left;
    margin-bottom: var(--bb-space-md);
}

.bb-footer-logo {
    display: block;
    width: 40px;
    height: 40px;
}

.bb-footer-wordmark {
    margin: var(--bb-space-xs) 0 0;
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bb-amarelo);
}

/* Título muted ("Navegue" — a coluna "Atendimento" foi removida no quick
   260817-m39, D-05) em rgba() sobre o mesmo canal RGB de --bb-amarelo
   (#Fcfc30 = rgb(252, 252, 48)) com opacidade reduzida a 60% — mesma técnica
   já usada em .bb-modal-fechar/.bb-faq-botao, em vez de inventar um token
   novo só para o estado muted (D-10). */
.bb-footer-titulo {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 100;
    font-size: var(--bb-fs-body);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bb-amarelo);
    margin: 0 0 var(--bb-space-sm);
}

.bb-footer-col-navegue {
    display: flex;
    gap: 48px;
}

.bb-footer-colunas {
    gap: 2.5rem;
}

.bb-footer-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--bb-space-xl);
}

.bb-footer-link {
    background: none;
    border: none;
    padding: 0;
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    font-weight: 400;
    font-size: var(--bb-fs-sm);
    color: var(--bb-branco);
    text-decoration: none;
    cursor: pointer;
}

.bb-footer-link:hover,
.bb-footer-link:focus {
    text-decoration: underline;
}

.bb-footer-link:focus-visible {
    outline: 2px solid var(--bb-branco);
    outline-offset: 2px;
}

/* Mesma opacidade sutil já usada no projeto para elementos translúcidos
   sobre fundo colorido (box-shadow do menu mobile do header, D-11).
   Deixou de separar .bb-footer-colunas de .bb-footer-rodape-links (linha
   full-width) e passou a ser parte do lockup do logo — largura curta fixa,
   fiel ao print de referência, que não tem nenhuma linha entre o bloco de
   3 colunas e a linha inferior de links (quick 260814-uyj, Correção 3). */
.bb-footer-divisor {
    border: none;
    width: 130px;
    margin: 2rem 0 0 0;
    border-top: 2px solid var(--bb-amarelo);
}

.bb-footer-rodape-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bb-space-sm);
}

.bb-footer-rodape-info {
    gap: 2rem;
    display: flex;
    flex-direction: column;
    padding-top: var(--bb-space-lg);
}

@media (min-width: 768px) {
    .bb-footer-colunas {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .bb-footer-rodape-links {
        flex-direction: row;
        justify-content: flex-end;
        gap: var(--bb-space-lg);
    }

    .bb-footer-rodape-info {
        display: flex;
        justify-content: space-between;
    }
}

@media(max-width: 768px) {
    .bb-footer-colunas {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .bb-footer-col-navegue {
        display: flex;
        gap: 24px;
        flex-direction: column;
    }

    .bb-footer-rodape-links {
        align-items: flex-start;
    }
}

/* Subtítulos dos modais legais novos (Política de Privacidade, LGPD) — mesmo
   tratamento visual já usado em .bb-regulamento-texto h5, generalizado para
   os 2 modais legais desta quick (quick 260814-u56, Task 3). A Task 4 (LGPD)
   reaproveita esta mesma regra sem precisar adicionar CSS de novo. */
.bb-politica-texto h5,
.bb-lgpd-texto h5 {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    color: var(--bb-azul);
}


/* Banner de consentimento de cookies (D-HKU-04, D-HKU-06), quick 260825-hku.
   Paleta pública da campanha (--bb-azul/--bb-amarelo) — nunca a paleta
   administrativa de bb-admin-theme.css. */
.bb-banner-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-md);
    width: 100%;
    background-color: var(--bb-azul);
    color: var(--bb-branco);
    padding: var(--bb-space-md) var(--bb-space-lg);
    font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
    /* Faixa de elemento fixo do Bootstrap (mesma categoria de fixed-top/
       fixed-bottom, z-index 1030) — abaixo do backdrop de modal (1050) e do
       próprio modal de Política de Privacidade que o link deste banner abre;
       sem isso, o banner flutuaria por cima deles em vez de ficar atrás
       (load-bearing, quick 260825-hku). */
    z-index: 1030;
}

/* Estado oculto: [hidden] nativo do navegador e a classe base acima têm a
   mesma especificidade (uma classe cada); sem esta regra combinada, a ordem
   de carregamento do stylesheet faria display:flex da classe base vencer o
   [hidden] do navegador, e o banner nunca sumiria. Este seletor
   classe+[hidden] tem especificidade maior que a classe sozinha e zera o
   display explicitamente (load-bearing, quick 260825-hku). */
.bb-banner-cookies[hidden] {
    display: none;
}

.bb-banner-cookies-texto {
    margin: 0;
    font-size: var(--bb-fs-sm);
    text-align: center;
}

.bb-banner-cookies-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--bb-branco);
    text-decoration: underline;
    cursor: pointer;
}

.bb-banner-cookies-link:focus-visible {
    outline: 2px solid var(--bb-branco);
    outline-offset: 2px;
}

.bb-banner-cookies-botao {
    flex-shrink: 0;
    border: none;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-amarelo);
    color: var(--bb-azul);
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    font-weight: 700;
    font-size: var(--bb-fs-sm);
    padding: var(--bb-space-sm) var(--bb-space-lg);
    cursor: pointer;
}

.bb-banner-cookies-botao:hover,
.bb-banner-cookies-botao:focus {
    opacity: 0.9;
}

.bb-banner-cookies-botao:focus-visible {
    outline: 2px solid var(--bb-branco);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .bb-banner-cookies {
        flex-direction: row;
        text-align: left;
    }

    .bb-banner-cookies-texto {
        text-align: left;
    }
}

.autorizacaonumero {
    font-size: var(--bb-fs-xs);
    display: block;
    color: #fff;
}