/* BodyB — componentes. Design System v1.17 (fundador, 08/11/2026): fiel ao SPEAKERS v29, com escala de 8 degraus
   (12 · 14 · 17 · 19 · 24 · 28 · 36 · 42 px), texto de leitura em grafite e cinza de apoio só no apoio.
   v1.3: bordas de elementos interativos no cinza estrutural; estado selecionado com borda na cor da dobra e check grafite.
   v1.4: em dobra com lista na cor da dobra, o destaque do título usa a cor oposta (regra de uso, ver README).
   v1.5: ícones suaves (círculo no tom claro da dobra, traço grafite); caixa de fechamento e fundo das listas na MESMA cor
   da dobra (a dobra começa e termina na mesma cor); rótulos da calculadora mais leves.
   v1.6: componente SessaoRecolhivel (cartão de sessão que abre e fecha, com tópicos).
   v1.7: avisos de erro no rosa oficial (barra brand-pink, fundo pink-20, texto grafite; campo com anel pink-45).
   v1.8: efeitos de interação padrão (sessão recolhível, cartões e listas de detalhes), só com movimento permitido.
   v1.9: botão decisivo (Comprar, Inscrever...) no azul action-blue, texto branco 19 px 700, pílula; anel pulsante opcional.
   v1.10: moldura na cor da dobra e miolo na cor oposta (regra de uso, ver README).
   v1.11: linhas de estrutura tracejadas; estados em linha contínua.
   v1.12: itens e chips clareiam ao interagir; topo da página sem bolhas (regra de uso).
   v1.13: títulos no desktop em no máximo 2 linhas (regra de uso).
   v1.14: itens e chips no tom forte em repouso e mais claros ao interagir; tracejado só no contorno da sessão.
   v1.15: cores de ícones e da calculadora fiéis ao protótipo (verde e lilás escuros só em traço de ícone e números).
   v1.16: itens e chips com fundo claro e círculo cheio; detalhes e cartões flutuantes com ícone na cor cheia; anel nos pilares;
   resultado principal em grafite.
   v1.17: números da calculadora em grafite; verde e lilás escuros só no traço de ícones. */
.bb-selo, .bb-selo *, .bb-selo::before, .bb-botao, .bb-botao::before, .bb-botao::after { box-sizing: border-box; }

/* Selo (eyebrow) */
.bb-selo {
  --bb-cor-dobra: var(--brand-green);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--brand-gray); border-radius: var(--radius-pill);
  background: var(--brand-offwhite);
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-graphite);
}
.bb-selo::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-cor-dobra); }
.bb-selo--lilas { --bb-cor-dobra: var(--brand-lilac); }
.bb-selo--forte { font-weight: 700; }

/* Botão principal */
.bb-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 32px;
  border: 0; border-radius: var(--radius-10);
  background: var(--brand-green); color: var(--brand-graphite);
  font: 700 17px var(--font-condensed);
  cursor: pointer; text-decoration: none;
}
/* EXCEÇÃO APROVADA (fundador, 07/11/2026): hover escurece o verde em 4%, fiel ao v29. Única exceção à regra "verde nunca mais escuro". */
.bb-botao:not(:disabled):not([aria-disabled="true"]):hover { filter: brightness(0.96); }
.bb-botao:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 3px; }
.bb-botao:disabled, .bb-botao[aria-disabled="true"] { cursor: not-allowed; background: var(--gray-light); color: var(--text-support); }
.bb-botao--largo { width: 100%; }
.bb-botao-status { margin: 10px 0 0; font: 400 14px/1.65 var(--font-condensed); color: var(--text-support); }
/* Botão decisivo (v1.9, fundador, 08/11/2026): a ação que conclui uma decisão (Comprar, Inscrever, Assinar).
   Azul action-blue com texto branco 19 px 700 em caixa alta (texto grande, 3,63:1). O azul nunca escurece: o hover eleva. */
.bb-botao--decisivo {
  min-height: 56px; padding: 14px 32px; border-radius: var(--radius-pill);
  background: var(--action-blue); color: var(--surface-white);
  font: 700 19px/1 var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(50, 53, 55, 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bb-botao--decisivo:not(:disabled):not([aria-disabled="true"]):hover { filter: none; transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--action-blue); }
.bb-botao--decisivo:not(:disabled):not([aria-disabled="true"]):active { transform: scale(0.99); }
.bb-botao--decisivo:disabled, .bb-botao--decisivo[aria-disabled="true"] { background: var(--gray-light); color: var(--text-support); box-shadow: none; }
/* Anel pulsante opcional (pulso: true), no ritmo de 3,6 s com zoom suave do botão, como na Oferta BodyB Splash. */
.bb-botao-grupo--pulso { position: relative; isolation: isolate; display: inline-flex; flex-direction: column; }
.bb-botao-grupo--pulso:has(.bb-botao--largo) { display: flex; }
.bb-botao-grupo--pulso::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: -1; border-radius: var(--radius-pill); background: var(--action-blue-35); pointer-events: none; }
.bb-botao-grupo--pulso:has(:disabled)::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bb-botao-grupo--pulso::before { animation: bb-anel-decisivo 3.6s ease-in-out infinite; }
  .bb-botao-grupo--pulso .bb-botao--decisivo:not(:disabled) { animation: bb-zoom-decisivo 3.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .bb-botao-grupo--pulso::before { display: none; } .bb-botao--decisivo { transition: none; } }
@keyframes bb-anel-decisivo { 0% { transform: scale(1, 1); opacity: 0.55; } 50%, 100% { transform: scale(1.12, 1.7); opacity: 0; } }
@keyframes bb-zoom-decisivo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Destaque de título: trecho do título sobre a cor da dobra a 45% */
.bb-destaque {
  color: var(--brand-graphite);
  background: var(--green-45);
  border-radius: var(--radius-10);
  /* v1.2: sem respiro vertical (caixas de linhas seguidas só se tocam); a margem negativa, repetida em cada linha pelo clone,
     compensa o respiro lateral e mantém o texto alinhado à borda do título. */
  padding: 0 0.28em; margin-inline: -0.28em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.bb-destaque--lilas { background: var(--lilac-45); }

/* Caixa de fechamento: na MESMA cor da dobra (v1.5, fundador, 08/11/2026): a dobra começa e termina na mesma cor */
.bb-fechamento {
  margin-top: 28px; padding: 16px 20px;
  border-left: 4px solid var(--brand-green);
  background: var(--green-tint-17);
  border-radius: 0 var(--radius-10) var(--radius-10) 0;
  font: 400 19px/1.6 var(--font-condensed); color: var(--brand-graphite);
}
.bb-fechamento p { margin: 0; }
.bb-fechamento p + p { margin-top: 6px; color: var(--text-support); }
.bb-fechamento b, .bb-fechamento strong { font-weight: 500; }
.bb-fechamento--lilas { border-left-color: var(--brand-lilac); background: var(--lilac-tint-17); }
/* Aviso de erro (v1.7, fundador, 08/11/2026): mesma caixa, no rosa oficial; texto sempre grafite. */
.bb-fechamento--alerta { border-left-color: var(--brand-pink); background: var(--pink-20); }
.bb-fechamento--centralizada { max-width: var(--measure-cabecalho); margin-inline: auto; margin-top: var(--space-40); }

/* Cartão: fundo inverso ao da dobra, ícone circular na cor da dobra */
.bb-cartao, .bb-cartao *, .bb-rodape, .bb-rodape * { box-sizing: border-box; }
.bb-cartao {
  --bb-cor-dobra: var(--brand-green);
  position: relative; min-width: 0;
  background: var(--brand-offwhite);
  border: 1px solid var(--gray-light); border-radius: var(--radius-12);
  padding: 24px;
  font: 400 17px/1.65 var(--font-condensed); color: var(--brand-graphite);
}
.bb-cartao--sobre-creme { background: var(--surface-white); }
.bb-cartao--lilas { --bb-cor-dobra: var(--brand-lilac); --bb-cor-clara: var(--lilac-20); }
.bb-cartao b, .bb-cartao strong { font-weight: 500; }
.bb-cartao__cabeca { display: flex; align-items: center; gap: 10px; }
.bb-cartao__icone {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--bb-cor-clara, var(--green-15)); color: var(--brand-graphite);
  display: grid; place-items: center;
}
.bb-cartao__icone svg { width: 16px; height: 16px; }
.bb-cartao > .bb-cartao__icone { margin-bottom: 18px; }
.bb-cartao__titulo { margin: 0; font: 700 19px/1.2 var(--font-condensed); letter-spacing: -0.01em; color: var(--brand-graphite); }
.bb-cartao__kicker { margin: 14px 0 0; font-weight: 700; color: var(--brand-graphite); }
.bb-cartao__texto { margin: 6px 0 0; }
.bb-cartao__num { position: absolute; top: 16px; right: 18px; font: 600 12px var(--font-mono); color: var(--text-support); }

/* Grades de cartões */
.bb-cartoes { display: grid; gap: 16px; }
@media (min-width: 768px) { .bb-cartoes--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023px) { .bb-cartoes--nove { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bb-cartoes--nove { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Rodapé: fundo branco, logotipo e linha legal */
.bb-rodape { background: var(--surface-white); border-top: 1px solid var(--gray-light); padding-inline: 16px; }
.bb-rodape__conteudo {
  display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between;
  max-width: var(--measure-coluna); margin-inline: auto;
  padding: 32px 0 calc(32px + env(safe-area-inset-bottom, 0px));
  font: 400 14px/1.65 var(--font-condensed); color: var(--text-support);
}
.bb-rodape__logo { width: 120px; height: auto; display: block; }
.bb-rodape__legal { margin: 0; white-space: nowrap; line-height: 1.6; }
.bb-rodape__legal span { white-space: nowrap; }
.bb-rodape__legal b { font-weight: 500; }
/* v1.2: tamanho da escala no lugar do ajuste fino; no celular, as duas partes da linha legal quebram em duas linhas de 12 px. */
@media (max-width: 767px) { .bb-rodape__conteudo { flex-direction: column; text-align: center; } .bb-rodape__legal { white-space: normal; font-size: 12px; } }

/* Controle deslizante (fiel ao v29) */
.bb-campo, .bb-campo *, .bb-marcos, .bb-marcos *, .bb-marcos li::before, .bb-marcos li::after, .bb-faq, .bb-faq * { box-sizing: border-box; }
.bb-campo {
  --bb-cor-dobra: var(--brand-green); --bb-f: 0.5;
  background: var(--surface-white); border: 1px solid var(--gray-light); border-radius: var(--radius-10);
  padding: 12px 16px; font: 400 17px/1.65 var(--font-condensed); color: var(--brand-graphite);
}
.bb-campo--lilas { --bb-cor-dobra: var(--brand-lilac); --bb-cor-clara: var(--lilac-20); }
.bb-campo:focus-within { border-color: var(--bb-cor-dobra); }
.bb-campo--invalido { border-color: var(--brand-graphite); box-shadow: 0 0 0 3px var(--pink-45); }
.bb-campo__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.bb-campo__rotulo { display: flex; align-items: center; gap: 10px; font-weight: 500; line-height: 1.3; }
.bb-campo__icone { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bb-cor-clara, var(--green-15)); color: var(--brand-graphite); display: grid; place-items: center; }
.bb-campo__icone svg { width: 16px; height: 16px; }
.bb-campo__valor {
  min-width: 6.5rem; text-align: center; font: 700 19px var(--font-condensed); font-variant-numeric: tabular-nums;
  color: var(--brand-graphite); background: var(--brand-offwhite); border: 1px solid var(--gray-light); border-radius: 8px; padding: 3px 10px;
}
.bb-campo__valor small { font-size: 12px; color: var(--text-support); margin-right: 4px; }
.bb-campo__range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 8px 0 0; cursor: pointer; }
.bb-campo__range:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 3px; border-radius: 4px; }
.bb-campo__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--bb-cor-dobra) 0 var(--bb-p, 50%), var(--gray-light) var(--bb-p, 50%) 100%); }
.bb-campo__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--gray-light); }
.bb-campo__range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--bb-cor-dobra); }
.bb-campo__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--surface-white); border: 3px solid var(--brand-graphite); }
.bb-campo__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-white); border: 3px solid var(--brand-graphite); }
.bb-campo__dica { position: relative; height: 22px; margin: 2px 0; }
.bb-campo__dica svg { position: absolute; top: 2px; left: calc(11px + (100% - 22px) * var(--bb-f)); width: 18px; height: 18px; color: var(--text-support); transform: translateX(-6px); }
@media (prefers-reduced-motion: no-preference) { .bb-campo__dica svg { animation: bb-empurra 1.4s ease-in-out infinite; } }
/* v1.2: em controles seguidos, a mão aparece só no primeiro. */
.bb-campo ~ .bb-campo .bb-campo__dica svg { display: none; }
@keyframes bb-empurra { 0%, 100% { transform: translate(-6px, 0); } 50% { transform: translate(0, 0); } }
.bb-campo__minmax { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-support); font-variant-numeric: tabular-nums; }
.bb-campo__erro { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--brand-graphite); }
.bb-campo__erro:not(:empty) { padding: 6px 10px; border-left: 4px solid var(--brand-pink); background: var(--pink-20); border-radius: 0 8px 8px 0; }
.bb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Trilha de marcos (fiel ao v29): linha na cor da dobra, bolinhas sempre verdes */
.bb-marcos { --bb-cor-dobra: var(--brand-green); list-style: none; margin: 0 auto; padding: 0 0 0 40px; max-width: 580px; position: relative; font: 400 17px/1.65 var(--font-condensed); }
.bb-marcos--lilas { --bb-cor-dobra: var(--brand-lilac); }
.bb-marcos li {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  min-height: 58px; margin-bottom: -10px; padding: 10px 16px 20px;
  background: var(--brand-offwhite); border: 1px solid var(--gray-light); border-radius: var(--radius-10);
}
.bb-marcos li::before { content: ""; position: absolute; z-index: 2; left: -31px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-green); border: 3px solid var(--surface-white); }
.bb-marcos li::after { content: ""; position: absolute; z-index: 1; left: -24px; top: 0; bottom: -10px; width: 4px; background: var(--bb-cor-dobra); }
.bb-marcos li:first-child::after { top: 31px; }
.bb-marcos li:last-child::after { bottom: auto; height: 31px; }
.bb-marcos li.bb-marcos__destaque:last-child::after { height: 33px; }
.bb-marcos__valor { font: 400 14px/1.4 var(--font-condensed); font-variant-numeric: tabular-nums; color: var(--text-support); text-align: right; margin-left: auto; }
/* v1.2: o prêmio motiva e fica em destaque; o valor da meta é apoio. */
.bb-marcos__premio { font: 700 17px/1.4 var(--font-condensed); color: var(--brand-graphite); text-align: left; min-width: 0; }
.bb-marcos li.bb-marcos__destaque { display: block; margin-bottom: 0; padding: 14px 16px 16px; border-color: var(--bb-cor-dobra); box-shadow: inset 0 0 0 1px var(--bb-cor-dobra); }
.bb-marcos li.bb-marcos__destaque::before { top: 24px; }
.bb-marcos__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.bb-marcos__linha + * { margin-top: 12px; }

/* FAQ (fiel ao v29): acordeão, um item aberto por vez */
.bb-faq { --bb-cor-suave: var(--green-15); list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font: 400 17px/1.65 var(--font-condensed); }
.bb-faq--lilas { --bb-cor-suave: var(--lilac-20); }
/* v1.3: borda no cinza estrutural (1,73 a 1,89:1), mais visível para quem enxerga pouco. */
.bb-faq li { background: var(--surface-white); border: 1px solid var(--brand-gray); border-radius: var(--radius-10); overflow: hidden; }
.bb-faq h3 { margin: 0; font: inherit; letter-spacing: 0; }
.bb-faq button {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; background: transparent; border: 0; text-align: left;
  font: 700 17px/1.65 var(--font-condensed); color: var(--brand-graphite); cursor: pointer;
}
.bb-faq button:hover { background: var(--bb-cor-suave); }
.bb-faq button:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: -3px; border-radius: var(--radius-10); }
.bb-faq button svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-support); transition: transform 200ms ease; }
.bb-faq button[aria-expanded="true"] svg { transform: rotate(180deg); }
.bb-faq__painel { padding: 0 18px 16px; color: var(--brand-graphite); }
.bb-faq__painel p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .bb-faq button svg { transition: none; } }

/* ===== Peças complementares do SPEAKERS v29 ===== */
.bb-cabecalho, .bb-cabecalho *, .bb-divisor, .bb-divisor *, .bb-lista, .bb-lista *, .bb-niveis, .bb-niveis *, .bb-resultados, .bb-resultados *, .bb-pilares, .bb-pilares *, .bb-flutuante, .bb-flutuante *, .bb-texto, .bb-texto * { box-sizing: border-box; }

/* Círculo de ícone (base comum) */
/* v1.5: círculo no tom claro da dobra (verde 15% ou lilás 20%), traço grafite. */
.bb-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bb-cor-clara, var(--green-15)); color: var(--brand-graphite); display: grid; place-items: center; }
.bb-ic svg { width: 16px; height: 16px; }
.bb-ic--lilas { background: var(--lilac-20); }
.bb-ic--verde { background: var(--green-15); }
.bb-ic--quadrado { border-radius: 8px; }

/* Cabeçalho */
.bb-cabecalho { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--brand-offwhite); border-bottom: 1px solid var(--gray-light); padding-inline: 16px; }
.bb-cabecalho__conteudo { max-width: var(--measure-coluna); margin-inline: auto; display: flex; justify-content: center; align-items: center; min-height: 72px; }
.bb-cabecalho__link { display: inline-flex; border-radius: 4px; }
.bb-cabecalho__link:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 3px; }
.bb-cabecalho__logo { height: 56px; width: auto; display: block; }
@media (min-width: 640px) { .bb-cabecalho__conteudo { min-height: 84px; } .bb-cabecalho__logo { height: 64px; } }

/* Símbolo de bolhas (máscara na cor da dobra) */
.bb-simbolo-linha { display: flex; margin-bottom: 18px; }
.bb-simbolo-linha--centro { justify-content: center; }
.bb-simbolo { display: inline-block; width: 30px; aspect-ratio: 90.75 / 164.25; background: var(--brand-green); -webkit-mask: var(--bb-mascara) center / contain no-repeat; mask: var(--bb-mascara) center / contain no-repeat; }
.bb-simbolo--lilas { background: var(--brand-lilac); }
@media (min-width: 640px) { .bb-simbolo { width: 34px; } }

/* Divisor entre dobras */
.bb-divisor { position: relative; height: 0; z-index: 3; }
.bb-divisor::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brand-green); opacity: 0.7; }
.bb-divisor span { position: absolute; left: 50%; top: 0; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--brand-green); border: 4px solid var(--surface-white); display: grid; place-items: center; }
.bb-divisor svg { width: 14px; height: 14px; }

/* Lista em destaque: itens (bullets), chips e detalhes */
.bb-lista { --bb-cor-dobra: var(--brand-green); list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; font: 400 17px/1.65 var(--font-condensed); color: var(--brand-graphite); }
.bb-lista--lilas { --bb-cor-dobra: var(--brand-lilac); --bb-cor-clara: var(--lilac-20); --bb-cor-media: var(--lilac-45); }
.bb-lista--itens .bb-ic, .bb-lista--chips .bb-ic { background: var(--surface-white); }
.bb-lista--itens li { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border-radius: var(--radius-10); background: var(--bb-cor-clara, var(--green-15)); font-weight: 700; }
.bb-lista--chips li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: var(--radius-10); background: var(--bb-cor-clara, var(--green-15)); font-weight: 700; }
@media (min-width: 640px) { .bb-lista--chips { grid-template-columns: 1fr 1fr; } }
/* Interação aprovada (fundador, 07/11/2026): o mesmo princípio do FAQ, tom reforçado ao passar o mouse. */
/* v1.16 (fundador, 08/11/2026, fiel ao protótipo): itens e chips com fundo claro (verde 15% ou lilás 20%) em repouso
   e círculo do ícone na cor cheia; ao interagir, ficam ainda mais claros (tom sobre branco). */
.bb-lista--itens li, .bb-lista--chips li { background: var(--bb-cor-clara, var(--green-15)); transition: background-color 200ms ease; }
.bb-lista--itens li:hover, .bb-lista--chips li:hover { background: var(--bb-cor-hover, var(--green-tint-17)); }
.bb-lista--lilas { --bb-cor-hover: var(--lilac-tint-17); }
.bb-lista--detalhes { gap: 10px; }
.bb-lista--detalhes li { display: flex; gap: 14px; align-items: flex-start; background: var(--brand-offwhite); border-radius: var(--radius-10); padding: 16px; color: var(--brand-graphite); }
.bb-lista--detalhes p { margin: 0; }
.bb-lista b, .bb-lista strong { font-weight: 500; }
.bb-lista--itens b, .bb-lista--chips b { font-weight: 700; }

/* Níveis */
.bb-niveis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--gray-light); max-width: 900px; margin-inline: auto; font-family: var(--font-condensed); color: var(--brand-graphite); }
.bb-niveis > div { text-align: center; padding: 18px 4px; }
.bb-niveis > div + div { border-left: 1px solid var(--gray-light); }
.bb-niveis .bb-niveis__topo { background: var(--brand-green); }
.bb-niveis small { display: block; font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-support); }
.bb-niveis .bb-niveis__topo small { color: var(--brand-graphite); }
.bb-niveis strong { display: block; margin-top: 8px; font: 700 24px/1 var(--font-condensed); font-variant-numeric: tabular-nums; }
.bb-niveis-nota { text-align: center; margin: 14px auto 0; max-width: 700px; color: var(--text-support); font: 400 17px/1.65 var(--font-condensed); }
.bb-niveis-nota b { font-weight: 500; }

/* Resultados do simulador */
.bb-resultados { display: grid; gap: 12px; font-family: var(--font-condensed); }
@media (min-width: 640px) and (max-width: 1023px) { .bb-resultados { grid-template-columns: 1fr 1fr; } }
.bb-resultado { background: var(--surface-white); border: 2px solid var(--gray-light); border-radius: var(--radius-10); padding: 22px 16px; text-align: center; display: grid; justify-items: center; align-content: center; gap: 4px; }
.bb-resultado--principal { border-color: var(--brand-green); }
.bb-resultado--secundario { border-color: var(--brand-lilac); }
.bb-resultado .bb-ic { width: 30px; height: 30px; margin-bottom: 4px; }
.bb-resultado small { font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-support); }
.bb-resultado strong { font: 700 28px/1.1 var(--font-condensed); font-variant-numeric: tabular-nums; color: var(--brand-graphite); overflow-wrap: anywhere; }
.bb-resultado > span:last-child { font-size: 14px; color: var(--text-support); }

/* Pilares */
.bb-pilares { --bb-cor-dobra: var(--brand-green); display: grid; gap: 16px; }
.bb-pilares--lilas { --bb-cor-dobra: var(--brand-lilac); --bb-cor-clara: var(--lilac-20); }
@media (min-width: 768px) { .bb-pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bb-pilares .bb-cartao { --bb-cor-dobra: inherit; --bb-cor-clara: inherit; }
.bb-pilares .bb-cartao > .bb-ic { width: 42px; height: 42px; margin-bottom: 18px; }
.bb-pilares h3 { margin: 0; font: 700 14px/1.65 var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-graphite); }
.bb-pilares p { margin: 6px 0 0; }
.bb-pilares ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.bb-pilares li { display: flex; gap: 10px; align-items: baseline; color: var(--brand-graphite); }
.bb-pilares li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-cor-dobra); transform: translateY(-2px); }

/* Cartão flutuante (sobre imagem) */
.bb-flutuante { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; background: var(--brand-offwhite); border-radius: var(--radius-10); padding: 9px 12px; border: 1px solid var(--brand-lilac); font: 400 14px/1.25 var(--font-condensed); color: var(--brand-graphite); text-align: left; max-width: 75%; }
.bb-flutuante b { display: block; font-weight: 700; }
.bb-flutuante small { color: var(--text-support); font-size: 12px; }
.bb-flutuante--topo { top: 12%; left: 0; }
.bb-flutuante--base { bottom: 10%; right: 0; border-color: var(--brand-green); }
.bb-midia-heroi { position: relative; max-width: 520px; width: 100%; margin: 0 auto; padding-inline: 10px; }

/* Campo de texto (fiel ao formulário de acesso do v29) */
.bb-texto { font: 400 17px/1.65 var(--font-condensed); color: var(--brand-graphite); }
.bb-texto__rotulo { display: block; margin-bottom: 6px; font-weight: 700; line-height: 1.3; }
.bb-texto__caixa { position: relative; }
.bb-texto__prefixo { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--text-support); pointer-events: none; }
.bb-texto__campo { width: 100%; min-height: 54px; padding: 12px 14px; font: 500 17px var(--font-condensed); color: var(--brand-graphite); background: var(--surface-white); border: 1.5px solid var(--text-support); border-radius: var(--radius-10); }
.bb-texto__campo--prefixo { padding-left: 36px; }
.bb-texto__campo::placeholder { color: var(--text-support); }
.bb-texto__campo:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 3px; }
.bb-texto__campo[aria-invalid="true"] { border-color: var(--brand-graphite); box-shadow: 0 0 0 3px var(--pink-45); }
.bb-texto__erro { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--brand-graphite); min-height: 1.3em; }
/* v1.7: o aviso do campo tem o mesmo formato da caixa de aviso (bb-fechamento--alerta) e folga de 20 px do campo, que tem o anel rosa. */
.bb-texto__erro:not(:empty) { margin-top: 20px; padding: 16px 20px; border-left: 4px solid var(--brand-pink); background: var(--pink-20); border-radius: 0 var(--radius-10) var(--radius-10) 0; font: 400 19px/1.6 var(--font-condensed); }

/* Tela de acesso (fiel ao v29) */
.bb-acesso, .bb-acesso * { box-sizing: border-box; }
.bb-acesso { display: grid; place-items: center; background: var(--brand-offwhite); padding: 16px; font: 400 17px/1.65 var(--font-condensed); color: var(--brand-graphite); }
.bb-acesso[hidden] { display: none; }
.bb-acesso--sobreposta { position: fixed; inset: 0; z-index: 100; overflow-y: auto; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.bb-acesso__caixa { width: 100%; max-width: 400px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.bb-acesso__logo { width: 132px; height: auto; margin-bottom: 4px; display: block; }
.bb-acesso__titulo { margin: 0; font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-graphite); }
.bb-acesso__intro { margin: 0; color: var(--text-support); }
.bb-acesso__intro b, .bb-acesso__nota b { color: var(--brand-graphite); font-weight: 500; }
.bb-acesso__form { width: 100%; max-width: 320px; display: grid; gap: 10px; text-align: left; }
.bb-acesso__form .bb-texto__erro { margin: 0; }
.bb-acesso__form .bb-texto__erro:not(:empty) { margin: 20px 0 10px; }
.bb-acesso__form .bb-botao svg { width: 18px; height: 18px; }
.bb-acesso__nota { margin: 0; font-size: 14px; color: var(--text-support); }
.bb-acesso__privacidade { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-support); max-width: 34ch; }
.bb-acesso__privacidade a { color: var(--brand-graphite); }

/* v1.2: só o resultado principal em destaque; o secundário é apoio. */
.bb-resultado--secundario strong { font-size: 19px; line-height: 1.4; }
/* v1.2: números grandes por degraus da escala, sem tamanhos intermediários. */
@media (min-width: 768px) { .bb-niveis strong { font-size: 36px; } }
@media (min-width: 1024px) { .bb-niveis strong { font-size: 42px; } .bb-resultado strong { font-size: 36px; } .bb-resultado--secundario strong { font-size: 19px; line-height: 1.4; } }

/* ===== Sessão recolhível (v1.6, fundador, 08/11/2026) ===== */
.bb-sessao, .bb-sessao * { box-sizing: border-box; }
.bb-sessao { --bb-cor-dobra: var(--brand-green); --bb-cor-clara: var(--green-15); --bb-cor-media: var(--green-45); background: var(--brand-offwhite); border: 1px solid var(--brand-gray); border-radius: var(--radius-12); overflow: hidden; font: 400 17px/1.65 var(--font-condensed); color: var(--brand-graphite); }
.bb-sessao--lilas { --bb-cor-dobra: var(--brand-lilac); --bb-cor-clara: var(--lilac-20); --bb-cor-media: var(--lilac-45); }
.bb-sessao--aberta { border-color: var(--bb-cor-dobra); box-shadow: inset 0 0 0 1px var(--bb-cor-dobra); }
.bb-sessao__titulo { margin: 0; font: inherit; }
.bb-sessao__botao { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; border: 0; background: transparent; color: var(--brand-graphite); font: inherit; text-align: left; cursor: pointer; }
.bb-sessao__botao:hover, .bb-sessao--aberta .bb-sessao__botao { background: var(--bb-cor-clara); }
.bb-sessao__botao:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: -4px; border-radius: var(--radius-12); }
.bb-sessao__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bb-cor-media); font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.06em; }
.bb-sessao__texto { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.bb-sessao__nome { font: 700 24px/1.16 var(--font-condensed); letter-spacing: -0.01em; }
.bb-sessao__resumo { font-size: 14px; line-height: 1.45; color: var(--text-support); }
.bb-sessao__acao { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--font-condensed); }
.bb-sessao__acao svg { width: 20px; height: 20px; transition: transform 200ms ease; }
.bb-sessao--aberta .bb-sessao__acao svg { transform: rotate(180deg); }
.bb-sessao__painel { padding: 8px 20px 24px; }
.bb-sessao__indice { margin: 16px 0 8px; padding: 16px 18px; background: var(--surface-white); border-radius: var(--radius-10); }
.bb-sessao__indice-titulo, .bb-sessao__topico-num { margin: 0; font: 600 12px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-support); }
.bb-sessao__indice-titulo { margin-bottom: 8px; }
.bb-sessao__indice ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.bb-sessao__indice a { color: var(--brand-graphite); text-decoration-color: var(--bb-cor-dobra); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bb-sessao__indice a:hover { text-decoration-color: var(--brand-graphite); }
.bb-sessao__indice a:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 2px; border-radius: 2px; }
.bb-sessao__topico { padding: 32px 0; border-top: 1px solid var(--gray-light); scroll-margin-top: 16px; }
.bb-sessao__indice + .bb-sessao__topico, .bb-sessao__painel > .bb-sessao__topico:first-child { border-top: 0; }
.bb-sessao__grade { display: grid; gap: 28px; align-items: center; }
.bb-sessao__grade > * { min-width: 0; }
.bb-sessao__corpo { display: grid; gap: 20px; align-content: start; }
.bb-sessao__corpo > * { margin: 0; min-width: 0; }
.bb-sessao__corpo > h3 { font: 700 24px/1.16 var(--font-condensed); letter-spacing: -0.01em; max-width: 32ch; text-wrap: balance; }
.bb-sessao__midia { display: grid; gap: 16px; justify-items: center; }
.bb-sessao__fim { display: flex; justify-content: center; padding-top: 24px; border-top: 1px solid var(--gray-light); }
.bb-sessao__fechar { padding: 10px 18px; border: 1px solid var(--brand-gray); border-radius: var(--radius-pill); background: var(--surface-white); color: var(--brand-graphite); font: 700 14px/1.4 var(--font-condensed); cursor: pointer; }
.bb-sessao__fechar:hover { background: var(--bb-cor-clara); }
.bb-sessao__fechar:focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 2px; }
.bb-sessoes { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .bb-sessao__botao { padding: 24px 28px; gap: 20px; }
  .bb-sessao__num { width: 56px; height: 56px; }
  .bb-sessao__nome { font-size: 28px; }
  .bb-sessao__painel { padding: 8px 28px 28px; }
  .bb-sessao__topico { padding: 40px 0; }
  .bb-sessao__corpo > h3 { font-size: 28px; }
}
@media (min-width: 1024px) { .bb-sessao__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
@media (max-width: 479px) {
  .bb-sessao__botao { grid-template-columns: minmax(0, 1fr) auto; }
  .bb-sessao__num, .bb-sessao__rotulo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bb-sessao__acao svg { transition: none; } }

/* ===== Interação (v1.8, fundador, 08/11/2026): efeitos padrão, nascidos na Central SPEAKERS (/info).
   Só com movimento permitido (prefers-reduced-motion); sem eles, tudo funciona igual, sem animação. ===== */
@media (prefers-reduced-motion: no-preference) {
  html:has(.bb-sessao__indice) { scroll-behavior: smooth; }
  /* Transições curtas, só em transform, cor de fundo e borda (sem custo de layout). */
  .bb-sessao { transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
  .bb-sessao__botao { transition: background-color 200ms ease; }
  .bb-sessao__num { transition: transform 250ms ease; }
  .bb-cartao, .bb-lista--detalhes li { transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease; }
  /* Toque responde em qualquer aparelho. */
  .bb-sessao__botao:active, .bb-sessao__fechar:active, .bb-botao:not(:disabled):active { transform: scale(0.99); }
  /* Painel abre com leve entrada de cima para baixo; tópico escolhido no índice brilha na cor da sessão. */
  .bb-sessao--aberta .bb-sessao__painel { animation: bb-painel 320ms ease both; }
  .bb-sessao__topico:target { animation: bb-alvo 1400ms ease both; border-radius: var(--radius-10); }
}
/* Efeitos de passar o cursor só em aparelhos com mouse (v1.10): no toque, o hover ficava preso depois do toque. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .bb-sessao:not(.bb-sessao--aberta):hover { transform: translateY(-2px); }
  .bb-sessao__botao:hover .bb-sessao__num { transform: scale(1.06); }
  .bb-sessao:not(.bb-sessao--aberta) .bb-sessao__botao:hover .bb-sessao__acao svg { transform: translateY(2px); }
  .bb-cartao:hover { transform: translateY(-3px); border-color: var(--bb-cor-dobra); }
  .bb-lista--detalhes li:hover { transform: translateY(-2px); }
}
/* Teclado: a sessão com foco no cabeçalho ganha o mesmo realce do hover, sem movimento. */
.bb-sessao:has(.bb-sessao__botao:focus-visible) { border-color: var(--bb-cor-dobra); }
@keyframes bb-painel { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes bb-alvo { from { background-color: var(--bb-cor-clara); } to { background-color: transparent; } }

/* ===== Linha tracejada com moderação (v1.11, revista na v1.14, fundador, 08/11/2026): só no contorno do cartão de
   sessão (e nas fotos pendentes da página). As demais linhas seguem contínuas e finas, como antes. ===== */
.bb-sessao { border: 1.5px dashed var(--brand-gray); }
.bb-sessao--aberta { border-color: var(--bb-cor-dobra); box-shadow: none; }

/* ===== Cores de ícones e da calculadora (v1.15, fundador, 08/11/2026): fiel aos prints do protótipo.
   Exceção aprovada à regra "verde e lilás nunca escurecem": verde e lilás escuros só no traço dos ícones sobre
   círculo claro e nos números da calculadora. ===== */
.bb-cartao, .bb-pilares, .bb-lista, .bb-campo, .bb-resultados { --bb-ic-traco: var(--green-escuro); }
.bb-cartao--lilas, .bb-pilares--lilas, .bb-lista--lilas, .bb-campo--lilas { --bb-ic-traco: var(--lilac-escuro); }
.bb-pilares .bb-cartao { --bb-ic-traco: inherit; }
/* Cartões e pilares: círculo no tom claro, traço escuro da mesma cor. */
.bb-cartao__icone, .bb-pilares .bb-ic { color: var(--bb-ic-traco); }
/* Pilares (A Marca): círculo claro com anel fino na cor e traço escuro (v1.16, fiel ao protótipo). */
.bb-pilares .bb-ic { box-shadow: inset 0 0 0 1.5px var(--bb-cor-dobra); }
/* Lista de detalhes: círculo na cor cheia e traço grafite, como itens e chips (v1.16). */
.bb-lista--detalhes .bb-ic { background: var(--bb-cor-dobra); color: var(--brand-graphite); }
/* Cartão flutuante: ícone em quadrado na cor cheia, traço grafite (v1.16). */
.bb-flutuante .bb-ic--lilas { background: var(--brand-lilac); color: var(--brand-graphite); }
.bb-flutuante .bb-ic--verde { background: var(--brand-green); color: var(--brand-graphite); }
.bb-cartao__icone svg, .bb-pilares .bb-cartao > .bb-ic svg { width: 20px; height: 20px; }
/* Itens e chips: círculo na cor cheia, traço grafite. */
.bb-lista--itens .bb-ic, .bb-lista--chips .bb-ic { background: var(--bb-cor-dobra); color: var(--brand-graphite); }
/* Calculadora: círculo e trilha vazia no tom mais claro; trilha cheia e bolinha na cor da dobra; números em grafite (v1.17). */
.bb-campo { --bb-trilha-vazia: var(--green-tint-17); }
.bb-campo--lilas { --bb-trilha-vazia: var(--lilac-tint-17); }
.bb-campo__icone { background: var(--bb-trilha-vazia); color: var(--bb-ic-traco); }
.bb-campo__range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--bb-cor-dobra) 0 var(--bb-p, 50%), var(--bb-trilha-vazia) var(--bb-p, 50%) 100%); }
.bb-campo__range::-moz-range-track { background: var(--bb-trilha-vazia); }
.bb-campo__range::-webkit-slider-thumb { background: var(--bb-cor-dobra); border: 0; }
.bb-campo__range::-moz-range-thumb { width: 22px; height: 22px; background: var(--bb-cor-dobra); border: 0; }
/* Resultados: principal com borda verde, círculo verde cheio e valor em grafite (v1.16); secundário com borda clara,
   círculo lilás claro e valor em grafite. */
.bb-resultado--principal .bb-ic { background: var(--brand-green); color: var(--brand-graphite); }
.bb-resultado--secundario { border-color: var(--gray-light); }
.bb-resultado--secundario .bb-ic { background: var(--lilac-tint-17); color: var(--lilac-escuro); }