/* Ajustes locais deste projeto por cima do bb-theme.css (historicamente
   copiado verbatim do projeto-bb). Carrega DEPOIS de bb-theme.css em
   _Layout.cshtml — é essa ordem que permite as regras abaixo vencerem a
   cascata do arquivo bb-theme.css. */

@media (min-width: 768px) {
  /* Hero oficial da campanha (hero-nacao-bb.webp) já tem o título e o botão
     "QUERO PARTICIPAR" pintados nos próprios pixels — bb-theme.css já deixa
     .bb-index-conteudo com opacity:0 e .bb-index-cta com position:absolute
     nativamente em >=768px para sustentar esse hotspot invisível; só a URL
     da imagem precisa mudar (background-color/background-size/background-position
     continuam vindo de bb-theme.css por cascata). */
  .bb-screen--index {
    background-image: url('/images/hero-nacao-bb.webp');
  }
}

/* Estende o mesmo acento de cor já usado nos checkboxes de aceite (Cadastro)
   para os radios do quiz — bb-theme.css só define accent-color para
   input[type="checkbox"], não para input[type="radio"]. */
.bb-checkbox-row input[type="radio"] {
  accent-color: var(--bb-azul);
    top: 6px;
    position: relative;
}

/* O Tag Helper asp-validation-summary sempre renderiza o <div> de resumo de
   validação em _QuizPerguntaForm.cshtml; ele só ganha a classe
   validation-summary-valid (adicionada, nunca substitui alert/alert-danger/
   bb-banner-erro) quando não há erro — por isso é essa classe condicional,
   não as classes estáticas de alerta, que precisa ser escondida. */
.validation-summary-valid {
  display: none;
}

/* ===== Tela /Quiz — fundo azul full-bleed e grid porquinho | pergunta (quick
   260901-n2t) =====
   Substitui o reaproveitamento indevido das classes bb-cadastro (família de
   nome "bb-cadastro" e do modificador "bb-screen cadastro", ambas vendorizadas
   em bb-theme.css) — quick 260901-lpm, causa raiz confirmada do layout
   quebrado: essas classes são específicas do antigo formulário de Cadastro
   complementar (removido no quick 260901-jux) — o modificador "bb-screen
   cadastro" era o único gatilho que destravava .bb-content além de
   --bb-max-width (480px), e o bloco @supports selector(:has(*)) ("3 zonas")
   em que o grid dessa família vive contém uma regra .bb-heading{text-align:
   right} SEM escopo, que vazava para qualquer heading da página. Geometria
   copiada de .bb-screen--numeros/.bb-numeros-grid (já vendorizada,
   auto-contida, testada) — breakpoint único de 992px, sem :has()/3-zonas.

   AVISO pra qualquer edição futura deste bloco: nunca escrever a sequência de
   2 caracteres asterisco+barra dentro do TEXTO de um comentário CSS — ela
   fecha o comentário no meio da frase (foi exatamente isso que quebrou esta
   regra por um tempo: um nome de classe seguido de barra, tipo "bb-cadastro
   asterisco" + barra + "bb-screen", continha esses 2 caracteres colados sem
   querer). Usar "e"/vírgula como separador entre nomes de classe em prosa,
   nunca a barra colada num asterisco. */

/* Mesmo mecanismo de .bb-screen--numeros/.bb-screen--obrigado — precisa vir
   depois da regra base .bb-screen; site.css já carrega depois de
   bb-theme.css em _Layout.cshtml, então a ordem já está correta. */
.bb-screen--quiz {
  background-color: var(--bb-azul);
}

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

.bb-quiz-visual {
  text-align: center;
}

/* Mesmo estilo de .bb-numeros-eyebrow, agora com o mesmo traço decorativo
   (::after) que .bb-numeros-eyebrow/.bb-premiacao-eyebrow já têm em
   bb-theme.css — a omissão do traço aqui era um desvio em relação ao
   mockup de referência do deck, corrigido nesta task. */
.bb-quiz-eyebrow {
  font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
  font-weight: 500;
  font-size: var(--bb-fs-eyebrow);
  color: var(--bb-amarelo);
  margin: 0 0 2rem;
}

.bb-quiz-eyebrow::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--bb-amarelo);
  margin: var(--bb-space-sm) auto 0;
}

.bb-quiz-imagem {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* O parcial da pergunta já é sempre alinhado à esquerda, sem mudança entre
   breakpoints. */
.bb-quiz-conteudo {
  width: 100%;
  text-align: left;
}

/* Overrides de cor escopados a .bb-screen--quiz (nunca globais, para não
   vazar para nenhuma outra tela do site). .bb-heading/.bb-label/
   .bb-checkbox-row label são azuis por padrão em bb-theme.css (pensadas para
   o fundo amarelo padrão do body) — ficariam azul-sobre-azul (ilegíveis)
   sobre o novo fundo do Quiz sem este override. */
.bb-screen--quiz .bb-heading {
  color: var(--bb-branco);
}

/* .bb-btn-confirmar tem fundo azul por padrão (pensado para o body amarelo);
   sem este override o botão "Próximo"/"Finalizar" ficaria azul-sobre-azul,
   reproduzindo o mesmo defeito de invisibilidade que motiva esta correção
   inteira. Mesma inversão amarelo/azul que .bb-numeros-cta/.bb-obrigado-cta
   já usam para os CTAs de tela de fundo azul. */
.bb-screen--quiz .bb-btn-confirmar,
.bb-screen--quiz .bb-btn-confirmar:hover,
.bb-screen--quiz .bb-btn-confirmar:focus,
.bb-screen--quiz .bb-btn-confirmar:active,
.bb-screen--quiz .bb-btn-confirmar:disabled,
.bb-screen--quiz .bb-btn-confirmar[aria-busy="true"] {
  background-color: var(--bb-amarelo);
  color: var(--bb-azul);
}

/* Voltar + Próximo/Finalizar lado a lado, mesma linha, mesma estilização
   (pedido do usuário) — .bb-quiz-acoes envolve os dois dentro do <form>.
   Voltar usa a mesma classe bb-btn-confirmar do botão de avançar (não mais
   bb-link-secundario) — o override de cor azul-sobre-azul já declarado acima
   pra .bb-btn-confirmar dentro de .bb-screen--quiz vale pros dois. */
.bb-quiz-acoes {
  display: flex;
  align-items: center;
  gap: var(--bb-space-md);
  margin-top: var(--bb-space-xl);
      justify-content: flex-end;
}

#quiz-form-wrapper form {
  padding-left: 3rem;
}

.bb-quiz-acoes .bb-btn-confirmar {
  width: auto;
    padding: .5rem 2rem;
    border-radius: 5px;
    margin-top: 0;
    text-decoration: none;
    cursor: pointer;
}

/* Aritmética idêntica à já documentada para .bb-screen--numeros/
   .bb-screen--obrigado: 480 imagem + 48 respiro (--bb-space-2xl) + 520
   conteúdo + 48 padding horizontal do próprio .bb-content = 1096px. */
@media (min-width: 992px) {
  .bb-screen--quiz .bb-content {
    max-width: 1140px;
  }

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

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

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

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

/* ===== Tela /Depoimento — fundo amarelo full-bleed e grid porquinho e
   formulário (Fase 4, DEPO-01/02) =====
   Geometria copiada de .bb-screen--quiz e .bb-quiz-grid acima (já
   auto-contida, testada) — breakpoint único de 992px. Nunca reaproveitar
   bb-cadastro e bb-screen cadastro (vendorizadas, landmine conhecido de
   acoplamento oculto ao extinto Cadastro complementar). Diferença
   deliberada em relação ao bloco do Quiz: aqui o fundo é AMARELO (deck,
   pág. 19), que já é a cor padrão de body/main em bb-theme.css — bb-heading,
   bb-label e bb-btn-confirmar já nascem corretos (azul sobre amarelo) para
   esse fundo, então NENHUM override de cor de texto ou botão é necessário
   aqui, ao contrário do bloco do Quiz acima.

   AVISO pra qualquer edição futura deste bloco: nunca escrever a sequência
   de 2 caracteres asterisco+barra dentro do TEXTO de um comentário CSS —
   ela fecha o comentário no meio da frase, sem erro visível. Usar "e" ou
   vírgula como separador entre nomes de classe em prosa. */
.bb-screen--depoimento {
  background-color: var(--bb-amarelo);
}

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

.bb-depoimento-visual {
  text-align: center;
}

/* Mesmo estilo simples de .bb-quiz-eyebrow, cor invertida: .bb-screen--depoimento
   tem fundo AMARELO (o inverso do Quiz, que tem fundo azul e por isso usa
   eyebrow amarelo) — aqui o eyebrow usa var(--bb-azul) para ficar legível. */
.bb-depoimento-eyebrow {
  font-family: 'BancoDoBrasilTextos', var(--bb-font-fallback);
  font-weight: 500;
  font-size: var(--bb-fs-eyebrow);
  color: var(--bb-azul);
  margin: 0 0 2rem;
}

.bb-depoimento-eyebrow::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--bb-azul);
  margin: var(--bb-space-sm) auto 0;
}

.bb-depoimento-imagem {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* Fiel ao deck (pág. 18): heading/parágrafo/textarea/ações alinhados à
   direita, em todos os breakpoints — diferente do Quiz (.bb-quiz-conteudo é
   text-align:left), aqui o desenho de referência é right-aligned. */
.bb-depoimento-conteudo {
  width: 100%;
  text-align: right;
}

/* .bb-heading vem com text-align:left direto na própria regra (bb-theme.css)
   — uma propriedade own-rule sempre vence o text-align herdado do
   .bb-depoimento-conteudo acima, então precisa deste override explícito
   (não basta a herança). Escopado a .bb-depoimento-conteudo para não
   vazar pra nenhuma outra tela (Quiz/Cadastro continuam com o heading
   padrão à esquerda). */
.bb-depoimento-conteudo .bb-heading {
  text-align: right;
}

/* .bb-heading/.bb-label já nascem azuis (bb-theme.css); o parágrafo de apoio
   é texto solto (herdaria a cor padrão do body) — o deck mostra ele na mesma
   família de azul do título, por isso este override pontual. */
.bb-depoimento-conteudo p {
  color: var(--bb-azul);
  font-size: 20px;
}

/* Diferencia o parágrafo de apoio de /DepoimentoConcluido (estado terminal)
   em relação a /Depoimento (formulário) — ambos compartilham a regra acima
   em 18px; aqui só a tela de conclusão ganha um font-size maior. */
.bb-screen--depoimento-concluido .bb-depoimento-conteudo p {
  font-size: 20px;
}

.bb-label {
  color: var(--bb-amarelo);
  font-size: 20px;}

.bb-screen--quiz .bb-checkbox-row label {
  font-size: 18px;
  color: var(--bb-amarelo);
}

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

/* Pular sai da mesma linha do Enviar (deck pág. 18: link pequeno e sublinhado
   ABAIXO do botão, nunca ao lado) — sem display:flex aqui, Enviar
   (.bb-btn-confirmar, width:100% por padrão) ocupa a própria linha e empurra
   o link para a linha seguinte naturalmente; .bb-link-secundario já vem com
   margin-top do bb-theme.css. */
.bb-depoimento-acoes {
  margin-top: var(--bb-space-xl);
  display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.bb-depoimento-acoes .bb-btn-confirmar {
  margin-top: 0;
  display: flex;
    align-items: center;
    /* justify-content: flex-end; */
    gap: var(--bb-space-sm);
    width: fit-content;
    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;
    padding: 1rem 2rem;
    border-radius: 5px;
    flex-direction: row;
}

/* WR-01 (04-REVIEW.md): Pular reaproveita .bb-link-secundario, mas é um
   <button type="submit"> (form Razor Pages com asp-page-handler, sem href
   real) — sem este reset ele mantém o chrome nativo do navegador (borda,
   fundo, padding) por cima dos estilos de link já corretos de
   .bb-link-secundario, ficando visualmente destoante do desenho de link do
   deck. Mesmo raciocínio de .bb-quiz-acoes .bb-btn-confirmar/
   .bb-quizresultado-cta acima, na direção oposta: ali é <a> querendo parecer
   <button>; aqui é <button> querendo parecer <a>. */
.bb-depoimento-acoes .bb-link-secundario {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

/* Mesmo raciocínio de .bb-quiz-acoes .bb-btn-confirmar acima: um <a>
   reaproveitando a pele de .bb-btn-confirmar não ganha text-decoration:none
   nem cursor:pointer de graça do navegador quando não tem href real. */
.bb-quizresultado-cta {
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 992px) {
  .bb-screen--depoimento .bb-content {
    max-width: 1140px;
  }

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

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

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

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

/* Redesenho de /QuizResultado (quick 260903-fhf, reestruturado na quick
   260903-gs3): backdrop escurecido semi-transparente + cartão amarelo
   flutuante que nasce visível no primeiro paint (CSS puro, sem
   bootstrap.Modal ou data-bs-toggle), fechado por quiz-resultado-modal.js,
   revelando a mesma página com o grid dos 4 perfis de investidor e o
   perfil do proprio funcionário destacado. Nada disto toca bb-theme.css
   (vendorizado). */
.bb-quizresultado-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background-color: rgba(15, 23, 42, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bb-space-xl);
}

.bb-quizresultado-overlay-caixa {
  position: relative;
  background-color: var(--bb-amarelo);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  max-width: 480px;
  width: 100%;
  padding: var(--bb-space-2xl) var(--bb-space-xl);
  text-align: center;
}

.bb-quizresultado-overlay-conteudo {
  color: var(--bb-azul);
  font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
  font-weight: 700;
  font-size: var(--bb-fs-lead);
}

.bb-quizresultado-overlay-conteudo strong {
  font-size: var(--bb-fs-display);
}

.bb-quizresultado-overlay-fechar {
  position: absolute;
  top: var(--bb-space-sm);
  right: var(--bb-space-sm);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bb-azul);
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--bb-azul);
  font-size: var(--bb-fs-lead);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

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

.bb-quizresultado-perfis {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-lg);
  margin-top: var(--bb-space-xl);
  text-align: left;
}

.bb-perfil-texto {
  color: var(--bb-amarelo);
}

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

.bb-perfil-texto--proprio h2 {
  font-weight: 800;
  font-size: 1.25em;
}

.bb-perfil-texto--proprio {
  background-color: #fff;
    padding: 2rem;
    border-radius: 1rem;
    color: var(--bb-azul);

}

.bb-perfil-badge {
  display: inline-block;
  background-color: var(--bb-azul);
  color: var(--bb-amarelo);
  font-size: var(--bb-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px var(--bb-space-sm);
  border-radius: 999px;
  margin-bottom: var(--bb-space-sm);
}

.bb-perfil-dica {
  font-style: italic;
}

@media (min-width: 768px) {
  .bb-screen--quizresultado .bb-content {
    max-width: 680px;
  }
}

/* Conteúdo de /QuizResultado (por baixo do modal) reaproveita o mesmo
   "sistema de grid porquinho" do /Quiz (.bb-quiz-grid/.bb-quiz-visual/
   .bb-quiz-eyebrow/.bb-quiz-imagem/.bb-quiz-conteudo, já definidos acima) —
   mas com cor de texto DIFERENTE (heading amarelo, não branco) e escopo
   SEPARADO: nunca combinar o seletor .bb-screen--quizresultado com
   .bb-screen--quiz num mesmo bloco, para as 2 telas não ficarem acopladas. */
.bb-screen--quizresultado {
  background-color: var(--bb-azul);
}

.bb-screen--quizresultado .bb-heading {
  color: var(--bb-amarelo);
}

.bb-screen--quizresultado .bb-btn-confirmar,
.bb-screen--quizresultado .bb-btn-confirmar:hover,
.bb-screen--quizresultado .bb-btn-confirmar:focus,
.bb-screen--quizresultado .bb-btn-confirmar:active,
.bb-screen--quizresultado .bb-btn-confirmar:disabled,
.bb-screen--quizresultado .bb-btn-confirmar[aria-busy="true"] {
  background-color: var(--bb-amarelo);
  color: var(--bb-azul);
}

/* Bloco próprio de 992px (não reaproveita o bloco do Quiz, escopado a
   .bb-screen--quiz) — a coluna direita do grid fica em 680px (não 520px
   como no Quiz) para caber o grid 2x2 de cards de perfil, que já usa
   max-width:680px no breakpoint de 768px acima; por vir depois no arquivo
   com a mesma especificidade, este bloco só sobrescreve o max-width do
   .bb-content a partir de 992px, sem tocar a regra de 768px já existente. */
@media (min-width: 992px) {
  .bb-screen--quizresultado .bb-content {
    max-width: 1140px;
  }

  .bb-screen--quizresultado .bb-quiz-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
  }
}

/* ===== Tela /Mural ===== */

/* DOIS arranjos de círculos, decididos pela existência da imagem publicada do
   participante logado (quick 260918-irn).

   COM imagem publicada vale a composição de 9 círculos da referência do
   cliente (quick 260917-mzt): 1 central grande com o sonho do próprio
   participante e 8 satélites sorteados, em alturas desencontradas, 4 de cada
   lado. Essas 9 coordenadas são intocáveis.

   SEM imagem publicada o miolo não recebe elemento nenhum, e os MESMOS 8
   satélites usam um segundo conjunto de coordenadas que ocupa o espaço que o
   círculo central deixou livre. A troca é a classe modificadora do wrapper dos
   satélites, aditiva sobre a classe base.

   SISTEMA DE COORDENADAS: todos os 9 círculos são posicionados dentro de
   .bb-mural-palco, que tem proporção fixa 16/9 — a mesma da arte de
   referência. Por isso "left" e "width" (diâmetro) são percentuais da LARGURA
   do palco e "top" é percentual da ALTURA dele, e cada círculo é ancorado
   pelo próprio centro (translate de -50% nos dois eixos), não pelo canto.
   Com o palco como referência, as 9 coordenadas são constantes em qualquer
   viewport.

   TRADE-OFF DO PALCO: o fundo é aplicado em .bb-screen--mural com
   background-size cover, então a arte renderizada tem a geometria do cover, e
   não a do palco. Palco e arte só coincidem exatamente em viewports 16/9; nos
   demais o palco fica sempre MENOR e centralizado em relação à caixa
   renderizada da arte — direção segura do erro, porque os círculos ficam mais
   para dentro do que na referência e nunca encostam nos porquinhos dos
   cantos. Mover o fundo para o palco mudaria o enquadramento da arte já
   aprovado, por isso foi rejeitado.

   ALTURA: 100vh dimensiona SOMENTE esta área azul — header e footer ficam
   fora da conta e a página rola para revelar o rodapé (o rodapé voltou nesta
   tela pela REMOÇÃO da regra que o escondia). A unidade é vh e não dvh de
   propósito: numa página que agora rola, dvh muda de valor conforme a barra
   de endereço do celular aparece e some durante a rolagem, e a composição
   inteira saltaria de tamanho no meio do gesto. Abaixo de 768px o arranjo
   nem trava altura (conteúdo em fluxo), então o custo clássico de vh no
   celular não se aplica aqui.

   Fundo oficial da campanha (quick 260917-lno, inalterado). background-color
   azul permanece como fallback — a cor casa com o degradê do arquivo, então
   uma falha de download do webp degrada para azul chapado, nunca branco. */
.bb-screen--mural {
  background-color: var(--bb-azul);
  background-image: url('/images/bg-muraldossonhos.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;

  /* Altura da arte do título. A imagem tem proporção 513x160 (cerca de
     3,2:1): fixando a ALTURA e deixando a largura automática, uma única
     expressão resolve os três limites de uma vez — nunca maior que o tamanho
     nativo (160px), nunca mais que 13% da altura da tela e nunca mais que
     cerca de 83% da largura no celular (26vw multiplicado por 3,2). */
  --bb-mural-titulo-h: min(160px, 13vh, 26vw);

  /* Respiro vertical: paddings do conteúdo, espaço entre título e palco e uma
     folga para o botão de recarregar não encostar na dobra da área azul.
     É o parafuso de calibração vertical desta tela. */
  --bb-mural-respiro: 64px;

  /* Altura disponível para o palco abaixo do título. A largura do palco é
     derivada dela (veja .bb-mural-palco no breakpoint largo): com a largura
     declarada e a altura vinda da proporção, o palco nunca ultrapassa o
     espaço vertical disponível, sem depender de resolução de aspect-ratio
     sob clamp — justamente onde os navegadores divergem. */
  --bb-mural-palco-h: calc(100vh - var(--bb-mural-titulo-h) - var(--bb-mural-respiro));

  /* Moldura amarela (D-05): mais grossa no círculo central, que é o sonho do
     próprio participante e precisa se destacar dos satélites. */
  --bb-mural-moldura-satelite: clamp(4px, 0.45vw, 9px);
  --bb-mural-moldura-central: clamp(5px, 0.8vw, 16px);
}

.bb-screen--mural .bb-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--bb-space-md);
  max-width: 100%;
  padding-top: var(--bb-space-md);
  padding-bottom: var(--bb-space-md);
}

.bb-mural-titulo {
  margin: 0;
  line-height: 0;
  text-align: center;
}

.bb-mural-titulo-imagem {
  display: block;
  width: auto;
  height: var(--bb-mural-titulo-h);
}

/* --- Base (celular, abaixo de 768px): arranjo empilhado legível. ---
   Sem palco 16/9, sem posicionamento absoluto e sem fidelidade à referência
   (D-H): central grande no topo, botão logo abaixo e satélites em wrap. */
.bb-mural-palco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-md);
  width: 100%;
}

.bb-mural-satelites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--bb-space-md);
  width: 100%;
}

/* A moldura circular amarela sobre fundo azul (deck pág. 22, D-05) é do
   CÍRCULO e não da imagem: ela é a mesma nos satélites e no círculo central, e
   fica no elemento que carrega a coordenada, não no conteúdo dele.
   box-sizing explícito, sem confiar só no reset do Bootstrap, porque a borda
   entra no diâmetro declarado em percentual. */
/* A altura NÃO sai de aspect-ratio aqui, e isso é deliberado: combinar
   aspect-ratio com border e box-sizing: border-box no MESMO elemento faz o
   WebKit aplicar a proporção à caixa de CONTEÚDO em vez da caixa de borda, de
   modo que a altura ganha a espessura do anel (até 9px por lado nos satélites,
   mais no centro) e o círculo vira um ovo — reportado no Safari, invisível no
   Chromium. A altura passa a vir do conteúdo, que já é quadrado: a imagem do
   pipeline é 1:1 e carrega o aspect-ratio no próprio img, onde não há borda nem
   box-sizing para atrapalhar. Se alguém devolver aspect-ratio para cá, o ovo
   volta no Safari. */
.bb-mural-circulo {
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  border: var(--bb-mural-moldura-satelite) solid var(--bb-amarelo);

  /* Calibrado por screenshot em 390x844: com 28vw (o ponto de partida) cabiam
     só 2 satélites por linha e os 8 ocupavam 4 linhas de rolagem. Em 25vw
     entram 3 por linha na largura útil de 342px (3 x 97,5 + 2 x 16 = 324,5),
     e os 8 fecham em 3 linhas. */
  width: min(25vw, 110px);
}

.bb-mural-circulo--central {
  border-width: var(--bb-mural-moldura-central);
  width: min(62vw, 300px);
}

/* A imagem entregue pela Fase 5 é sempre um quadrado limpo, sem nenhuma borda
   gravada nos próprios pixels (D-05, 05-CONTEXT.md) — o recorte circular e a
   borda continuam sendo só CSS, agora aplicados um nível acima. */
.bb-mural-imagem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Wrapper do slot do sonho do participante. Ele só existe no markup quando há
   imagem publicada (quick 260918-irn): sem imagem o partial do centro não
   emite elemento nenhum e esta regra simplesmente não encontra alvo. No
   celular ele empilha o círculo e a legenda; no palco ele colapsa (veja o
   breakpoint largo). */
.bb-mural-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-space-md);
}

/* Acionador do sonho ampliado, valendo para OS DOIS: o do círculo central e o
   de cada satélite (D-UTT-07). Reset de botão para ocupar o círculo inteiro
   sem alterar um pixel do que já se vê — a moldura amarela e o recorte
   circular continuam sendo do círculo, não dele. */
.bb-mural-centro-abrir,
.bb-mural-satelite-abrir {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Mesmo tratamento de foco que o estado vazio já usa nesta tela, nos dois
   acionadores. */
.bb-mural-centro-abrir:focus-visible,
.bb-mural-satelite-abrir:focus-visible {
  outline: 2px solid var(--bb-amarelo);
  outline-offset: 2px;
}

/* Dentro do diálogo a imagem aparece inteira e quadrada. A largura do diálogo
   vem do tema e não é sobrescrita aqui. */
.bb-mural-sonho-ampliado {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Legenda do slot central. Ela nasce junto com o círculo central e não tem
   condição própria: onde há círculo central há legenda. */
.bb-mural-centro-legenda {
  margin: 0;
  font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
  color: var(--bb-amarelo);
  font-size: var(--bb-fs-body);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Legenda curvada do slot central (D-UTT-01). Escondida na base de propósito:
   abaixo de 768px quem legenda o centro é o parágrafo reto acima, que é o
   estado móvel decidido e preservado (D-UTT-04). */
.bb-mural-legenda-arco {
  display: none;
}

/* --- A partir de 768px: a composição da referência do cliente. --- */
@media (min-width: 768px) {
  /* Largura calculada e altura derivada da proporção: assim a proporção é
     sempre exata e a altura nunca ultrapassa o espaço disponível. */
  .bb-mural-palco {
    display: block;
    width: min(100%, calc(var(--bb-mural-palco-h) * 16 / 9));
    aspect-ratio: 16 / 9;
    margin: 0 auto;
  }

  /* Sobreposição transparente que compartilha o sistema de coordenadas do
     palco. pointer-events desligado para que a camada dos satélites não
     intercepte o clique do que está por baixo dela (o link do círculo central
     e o botão de recarregar). */
  .bb-mural-satelites {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* A regra acima NÃO muda (D-UTT-09): a área vazia da camada continua
     transparente ao ponteiro, e é isso que preserva o clique do acionador do
     centro e do botão de recarregar, que ficam por baixo dela. O ponteiro é
     religado em exatamente dois lugares.

     O segundo não é opcional: o diálogo é descendente da camada e herdaria o
     ponteiro desligado, deixando o X de fechar inerte. */
  .bb-mural-satelites .bb-mural-circulo {
    pointer-events: auto;
  }

  .bb-mural-satelites .modal {
    pointer-events: auto;
  }

  .bb-mural-circulo {
    position: absolute;
    transform: translate(-50%, -50%);
  }

  /* No palco os filhos do slot central são todos absolutos, então o wrapper
     colapsa para altura zero e não entra em nenhuma conta de coordenada. */
  .bb-mural-centro {
    display: block;
  }

  /* A partir daqui a legenda deixa de flutuar entre o círculo e o botão: ela
     vira o texto curvado montado no anel. O parágrafo continua existindo no
     markup porque ele É o estado móvel (D-UTT-04), só não aparece no palco.
     As coordenadas que ele tinha aqui saíram junto: não há mais nada para
     posicionar entre o círculo e o botão, e esse buraco vertical era
     justamente o que a mudança fecha (D-UTT-05). */
  .bb-mural-centro-legenda {
    display: none;
  }

  /* ACOPLAMENTO DELIBERADO, leia antes de mexer: os quatro literais abaixo são
     os MESMOS declarados adiante para o círculo do centro. Os dois elementos
     são absolutos no mesmo bloco de contenção (o palco não tem position, por
     decisão do usuário), então só com coordenadas e largura idênticas a caixa
     deste SVG coincide pixel a pixel com a caixa do círculo — que é a condição
     para o arco de raio 48,4 do viewBox cair exatamente sobre a linha do meio
     do anel amarelo. Mudou lá, muda aqui.

     overflow visível porque a fita e o texto ultrapassam o viewBox de
     propósito: sem isso a metade externa da fita seria cortada em linha reta.
     pointer-events desligado (D-UTT-03) porque o SVG cobre a caixa inteira do
     círculo — sem isso o acionador do sonho ampliado morreria. */
  .bb-mural-legenda-arco {
    display: block;
    position: absolute;
    left: 50.6%;
    top: 51%;
    width: 25.0%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
  }

  /* Dupla azul sobre amarelo, a mesma que o botão desta tela já usa (D-UTT-02).
     Dentro de um SVG com viewBox, um "px" de CSS É uma unidade de usuário:
     estes valores escalam junto com o diâmetro do círculo. */
  .bb-mural-legenda-fita {
    fill: none;
    stroke: var(--bb-amarelo);
    stroke-linecap: round;
    stroke-width: 7.8px;
  }

  .bb-mural-legenda-texto {
    font-family: 'BancoDoBrasilTitulos', var(--bb-font-fallback);
    text-transform: uppercase;
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: 0.4px;
    font-size: 6.4px;
    fill: var(--bb-azul);
  }

  /* As 9 coordenadas da arte de referência (canvas 1920x1080). left e width
     são percentuais da largura do palco, top é percentual da altura. */
  .bb-mural-circulo--central { left: 50.6%; top: 51%;   width: 25.0%; }
  .bb-mural-circulo--s1      { left: 16.0%; top: 21.8%; width: 11.7%; }
  .bb-mural-circulo--s2      { left: 14.8%; top: 45.6%; width: 11.5%; }
  .bb-mural-circulo--s3      { left: 30.1%; top: 43.2%; width: 11.2%; }
  .bb-mural-circulo--s4      { left: 29.7%; top: 66.2%; width: 12.2%; }
  .bb-mural-circulo--s5      { left: 70.3%; top: 41.9%; width: 11.2%; }
  .bb-mural-circulo--s6      { left: 70.3%; top: 66.2%; width: 11.2%; }
  .bb-mural-circulo--s7      { left: 84.2%; top: 20.1%; width: 12.0%; }
  .bb-mural-circulo--s8      { left: 89.2%; top: 45.6%; width: 12.0%; }

  /* SEGUNDO ARRANJO, sem centro (quick 260918-irn). Os mesmos 8 satélites
     redistribuídos para ocupar também o miolo que o círculo central deixou
     livre. Vence o primeiro conjunto por especificidade (classe modificadora
     do wrapper somada à classe do slot) e por ordem, sem nenhuma declaração
     de prioridade forçada.

     Calibrado por medida real de caixa no navegador, e não no papel: a caixa
     de contenção destes percentuais NÃO é o palco. O palco não tem position
     (removido de propósito pelo usuário), então o wrapper dos satélites, que
     é absoluto com inset zerado, se resolve contra o bloco de contenção
     inicial — do tamanho da janela. Por isso as coordenadas foram validadas
     em cinco proporções de janela, e não só numa.

     Seis círculos formam o anel externo e DOIS ocupam o miolo, na diagonal,
     em alturas desencontradas: alinhá-los no eixo vertical do palco recriaria
     uma coluna central logo acima do botão, que é justamente a leitura de
     "slot do meio" que esta quick removeu.

     A faixa do título (topo, centro) e a caixa do botão de recarregar
     continuam desocupadas, e nenhum círculo entra nos cantos inferiores, onde
     a arte de fundo desenha os porquinhos. */
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s1 { left: 27.5%; top: 22.0%; width: 13.4%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s2 { left: 13.5%; top: 43.0%; width: 13.4%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s3 { left: 43.3%; top: 47.0%; width: 13.8%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s4 { left: 27.5%; top: 70.5%; width: 13.4%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s5 { left: 57.9%; top: 47.5%; width: 13.8%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s6 { left: 73.0%; top: 69.0%; width: 13.4%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s7 { left: 73.0%; top: 22.5%; width: 13.4%; }
  .bb-mural-satelites--sem-centro .bb-mural-circulo--s8 { left: 87.1%; top: 50.5%; width: 13.4%; }
}

/* Segundo degrau da legenda curvada. Existe porque o círculo encolhe
   bruscamente ao cruzar 768px (de até 300px de diâmetro para 25% da largura da
   janela): um valor único deixaria o texto miúdo demais em 768px ou grande
   demais em 1920px. Daqui para cima o círculo já é largo o bastante para o
   texto encolher em proporção e sobrar folga de amarelo dos dois lados. */
@media (min-width: 1200px) {
  .bb-mural-legenda-fita {
    stroke-width: 6.1px;
  }

  .bb-mural-legenda-texto {
    font-size: 5.0px;
  }
}

/* Botão de recarregar os satélites. Reaproveita a pele de .bb-btn-confirmar
   com os mesmos overrides que .bb-quiz-acoes já usa (largura automática,
   padding horizontal, margem superior zerada, cursor de ponteiro). A inversão
   amarelo sobre azul é obrigatória: .bb-btn-confirmar nasce com fundo azul
   (pensado para o body amarelo) e aqui ficaria azul sobre azul, o mesmo
   defeito de invisibilidade já catalogado na tela do Quiz. */
.bb-mural-recarregar,
.bb-mural-recarregar:hover,
.bb-mural-recarregar:focus,
.bb-mural-recarregar:active,
.bb-mural-recarregar:disabled,
.bb-mural-recarregar[aria-busy="true"] {
  background-color: var(--bb-amarelo);
  color: var(--bb-azul);
}

.bb-mural-recarregar {
  width: auto;
  padding: .5rem 2rem;
  margin-top: 0;
  margin-bottom: var(--bb-space-md);
  cursor: pointer;
  text-decoration: none;
}

/* No breakpoint largo o botão entra no sistema de coordenadas do palco, logo
   abaixo do círculo central e acima da faixa inferior onde ficam os porquinhos
   do fundo. O z-index explícito evita depender só do pointer-events desligado
   da camada dos satélites.

   A coordenada vertical desceu de 79% para 76,2% (D-UTT-05): com a legenda
   agora montada NO anel, a faixa que o texto reto ocupava virou um buraco, e o
   botão sobe para fechá-lo. O valor foi calibrado pelo viewport mais apertado
   dos três verificados — em 1920x1080 o círculo é proporcionalmente mais alto
   e a fita desce até cerca de 73,9% da altura, então qualquer valor abaixo
   deste começa a encostar nela. */
@media (min-width: 768px) {
  .bb-mural-recarregar {
    position: absolute;
    left: 50.6%;
    top: 76.2%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    z-index: 2;
  }
}

/* Hover dos círculos do Mural — o sonho cresce um pouco sob o ponteiro,
   sinalizando que ele é clicável (todos abrem ampliados em diálogo).

   Escopado por (hover: hover) and (pointer: fine): em tela de toque o
   navegador emula :hover no primeiro toque e o círculo ficaria "grudado"
   ampliado até o toque seguinte em outro lugar.

   O cursor de ponteiro NÃO é redeclarado aqui: já mora em
   .bb-mural-centro-abrir/.bb-mural-satelite-abrir, que são os acionadores
   reais dentro de cada círculo. */
@media (hover: hover) and (pointer: fine) {
  .bb-mural-circulo,
  .bb-mural-legenda-arco {
    transition: transform 180ms ease-out;
  }

  .bb-mural-circulo:hover {
    transform: scale(1.06);
  }
}

/* A partir de 768px os círculos e o arco da legenda são absolutos e JÁ
   carregam translate(-50%, -50%) como parte do posicionamento no palco. O
   scale precisa ser reescrito junto com esse translate na mesma declaração:
   transform não acumula entre regras, então um `transform: scale(1.06)`
   sozinho apagaria o reposicionamento e jogaria o círculo para fora do lugar.

   A legenda curvada é um SVG IRMÃO do círculo central (não filho — ela
   sobrepõe a caixa dele), então precisa do mesmo scale pelo seletor de irmão
   subsequente, senão o texto descola do anel durante o hover.

   z-index: 3 fica acima do 2 do botão "Ver outros sonhos", para o círculo
   ampliado nunca aparecer cortado por um vizinho. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .bb-mural-circulo:hover,
  .bb-mural-circulo--central:hover ~ .bb-mural-legenda-arco {
    transform: translate(-50%, -50%) scale(1.06);
    z-index: 3;
  }
}

/* Quem pediu menos movimento no sistema operacional continua com o aumento
   (que é a informação: "isto é clicável"), mas sem a animação. */
@media (prefers-reduced-motion: reduce) {
  .bb-mural-circulo,
  .bb-mural-legenda-arco {
    transition: none;
  }
}