/* ==========================================================================
   Itera Design System v3 — "Marca"
   Fonte única de verdade. Consumido por:
     - public_html/index.html         (site principal)
     - public_html/profit-*-gratis.html (LPs de campanha)
     - public_html/design-system.html (referência viva)
     - painel/lib/ui.js               (painel + LPs de parceiro, inline)

   A v3 não é um redesenho: é a aplicação do manual da marca. Toda decisão de
   cor, tipografia e elemento gráfico abaixo sai de
   "Itera_Brand_Presentation_2026" — cor exata, fonte exata, elemento exato.
   Onde o manual não decide (escala de elevação, foco, estados), a v2 continua
   valendo, ver ../../BENCHMARK-DESIGN.md e ../DESIGN-SYSTEM.md.

   Os nomes de token continuam `--bb-*`. Não é apego ao nome antigo: eles são
   consumidos por quatro páginas e por 3.500 linhas de painel, e renomear tudo
   trocaria um risco de regressão por nada visível. O que mudou foi o valor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — a paleta do manual, sem invenção
   -------------------------------------------------------------------------- */
:root {
  /* --- Cores principais (manual, p. "Nosso sistema de cores") -------------
     Preto Profundo é a base. A v2 usava um preto azulado (#0A0C10) para dar
     escala de elevação; o manual pede preto de verdade, então a escala passou
     a ser construída em cinzas neutros acima dele — o degrau do meio é o
     Grafite nomeado no manual. */
  --itera-preto: #080808;      /* Preto Profundo */
  --itera-grafite: #1A1A1A;    /* Grafite */
  --itera-amarelo: #FFC300;    /* Amarelo Itera */
  --itera-cinza: #8A8A8A;      /* Cinza Neutro */
  --itera-branco: #FFFFFF;     /* Branco Puro */

  /* --- Cores secundárias (apoio, nunca protagonistas) --------------------- */
  --itera-verde-floresta: #215452;
  --itera-verde-claro: #8CC63E;
  --itera-verde-suave: #E0FFB7;
  --itera-amarelo-estrategia: #FFD16B;
  --itera-laranja-impulso: #FF6D47;
  --itera-terra: #6F3432;

  /* --- Superfícies --------------------------------------------------------
     Quatro degraus: o fundo é o Preto Profundo do manual e a superfície 2 é o
     Grafite do manual. Os degraus 1 e 3 existem só para separar cartão de
     fundo e campo de cartão — o olho precisa de três níveis, o manual nomeia
     dois. */
  --bb-base: #080808;
  --bb-surface-1: #101010;
  --bb-surface-2: #1A1A1A;
  --bb-surface-3: #242424;

  /* --- Linhas — o elemento "linhas finas" do manual -----------------------
     No manual elas organizam a página: dividem seção, fecham quadro, montam
     grade. São sempre sutis; linha que se impõe vira moldura, e o manual não
     tem moldura. */
  --bb-line: rgba(255, 255, 255, 0.09);
  --bb-line-strong: rgba(255, 255, 255, 0.18);
  --bb-line-accent: rgba(255, 195, 0, 0.38);

  /* --- Texto --------------------------------------------------------------
     Branco Puro no primeiro nível e Cinza Neutro no terceiro, os dois do
     manual. O segundo nível é o intermediário que o manual usa em parágrafo
     corrido sem nomear. Os três passam 4,5:1 até sobre a superfície 3;
     --bb-text-faint não passa: só rótulo grande, ícone ou desabilitado. */
  --bb-text-1: #FFFFFF;
  --bb-text-2: #C7C7C7;
  --bb-text-3: #8A8A8A;
  --bb-text-faint: #6B6B6B;

  /* --- Marca --------------------------------------------------------------
     O Amarelo Itera é #FFC300 e não se negocia. O hover sobe para o Amarelo
     Estratégia, que é cor de manual e não um clareamento inventado. */
  --bb-accent: #FFC300;
  --bb-accent-hover: #FFD16B;
  --bb-accent-dim: #C99A00;
  --bb-accent-ink: #080808;
  --bb-accent-wash: rgba(255, 195, 0, 0.10);
  --bb-accent-glow: rgba(255, 195, 0, 0.32);

  /* Gradiente Itera — preto que abre em ouro. Movimento, evolução, novas
     perspectivas. Usado em fundo institucional, destaque e transição. */
  --bb-gradiente: linear-gradient(118deg, #080808 6%, #3A2A00 42%, #C98A00 72%, #FFC300 100%);
  --bb-gradiente-sutil: linear-gradient(118deg, #080808 20%, #211800 62%, #6B4A00 100%);

  /* --- Mercado ------------------------------------------------------------
     Alta e baixa saem da paleta secundária do manual (Verde Claro e Laranja
     Impulso), não de um verde/vermelho genérico de terminal. Dado é
     linguagem, e a linguagem aqui é a da marca. */
  --bb-alta: #8CC63E;
  --bb-baixa: #FF6D47;
  --bb-info: #FFD16B;
  --bb-alta-wash: rgba(140, 198, 62, 0.13);
  --bb-baixa-wash: rgba(255, 109, 71, 0.13);

  /* --- Tipografia ---------------------------------------------------------
     Sora é a tipografia principal da Itera, em todos os pontos de contato.
     O manual não tem segunda família e não tem monoespaçada: o que fazia o
     papel de "rótulo técnico" na v2 agora é Sora em caixa alta com entreletra
     aberta, que é exatamente como o manual escreve legenda. Os aliases
     --bb-font-display e --bb-font-mono continuam existindo porque o painel os
     consome; os três apontam para a mesma família, de propósito. */
  --bb-font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bb-font-display: var(--bb-font-sans);
  --bb-font-mono: var(--bb-font-sans);

  --bb-display-1: clamp(2.75rem, 6.4vw, 5rem);
  --bb-display-2: clamp(2rem, 4.2vw, 3.25rem);
  --bb-display-3: clamp(1.375rem, 2.4vw, 1.75rem);
  --bb-subhead: clamp(1.5rem, 3vw, 2.25rem);
  --bb-body-lg: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --bb-body: 1rem;
  --bb-caption: 0.875rem;
  --bb-micro: 0.6875rem;

  /* --- Raios --------------------------------------------------------------
     O manual arredonda pouco e sempre igual: quadro de conteúdo em ~14px,
     painel grande em ~24px, ícone de app em ~28px, botão em pílula. */
  --bb-r-sm: 8px;
  --bb-r-md: 14px;
  --bb-r-lg: 18px;
  --bb-r-xl: 26px;
  --bb-r-pill: 999px;

  /* Ritmo vertical de seção */
  --bb-section: clamp(5rem, 10vw, 8.5rem);

  /* Elevação — sombra longa e quase preta, nunca colorida */
  --bb-e1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --bb-e2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -16px rgba(0, 0, 0, 0.95);
  --bb-e3: 0 2px 4px rgba(0, 0, 0, 0.6), 0 24px 64px -24px rgba(0, 0, 0, 1);

  /* Movimento */
  --bb-fast: 150ms;
  --bb-mid: 260ms;
  --bb-slow: 480ms;
  --bb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  background-color: var(--bb-base);
  color: var(--bb-text-1);
  font-family: var(--bb-font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background-color: var(--bb-accent);
  color: var(--bb-accent-ink);
}

/* Foco visível em tudo que é interativo */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bb-accent);
  outline-offset: 3px;
  border-radius: var(--bb-r-sm);
}

/* Pular para o conteúdo (leitor de tela / teclado) */
.bb-skip {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 100;
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--bb-r-pill);
  font-weight: 700;
}
.bb-skip:focus { left: 1rem; }

/* --------------------------------------------------------------------------
   3. Tipografia — a hierarquia do manual
   --------------------------------------------------------------------------
   H1 headline em Bold e bem fechado; H2 de seção também Bold; H3 em SemiBold;
   corpo em Regular; legenda em caixa alta com entreletra aberta. O manual
   mostra ainda um "subhead" grande em Regular — a frase de respiro que abre um
   bloco sem competir com o H1. É .bb-subhead.
   -------------------------------------------------------------------------- */
.bb-display-1,
.bb-display-2,
.bb-display-3 {
  font-family: var(--bb-font-display);
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
.bb-display-1 { font-size: var(--bb-display-1); font-weight: 700; letter-spacing: -0.035em; }
.bb-display-2 { font-size: var(--bb-display-2); font-weight: 700; letter-spacing: -0.028em; line-height: 1.08; }
.bb-display-3 { font-size: var(--bb-display-3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }

/* Subhead: frase grande em peso Regular. É o contraste de peso que o manual
   usa para diferenciar "manchete" de "afirmação". */
.bb-subhead {
  font-family: var(--bb-font-display);
  font-size: var(--bb-subhead);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* A palavra em amarelo. No manual, toda manchete tem uma — e só uma. */
.bb-em { color: var(--bb-accent); }

.bb-lead {
  font-size: var(--bb-body-lg);
  line-height: 1.65;
  color: var(--bb-text-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.bb-prose { color: var(--bb-text-2); line-height: 1.7; max-width: 68ch; }
.bb-prose p + p { margin-top: 1.1em; }

/* --- Rótulo de seção: "01 // INTRODUÇÃO" -------------------------------
   O elemento que abre toda página do manual. O número e o rótulo são claros;
   só as duas barras são amarelas. */
.bb-eyebrow {
  font-family: var(--bb-font-sans);
  font-size: var(--bb-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-text-1);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.bb-eyebrow__n { color: var(--bb-text-1); font-weight: 600; }
.bb-eyebrow__b {
  color: var(--bb-accent);
  font-weight: 700;
  letter-spacing: 0;
}
.bb-eyebrow--muted { color: var(--bb-text-3); }
.bb-eyebrow--muted .bb-eyebrow__n { color: var(--bb-text-3); }

/* --- Legenda: caixa alta, entreletra bem aberta -------------------------
   "SEMPRE PARA FRENTE", "DISCIPLINA / CONHECIMENTO / ESTRATÉGIA". Empilhada,
   a entrelinha é larga de propósito. */
.bb-legenda {
  font-size: var(--bb-micro);
  font-weight: 400;
  letter-spacing: 0.26em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--bb-text-2);
}
.bb-legenda--fraca { color: var(--bb-text-3); }

/* --- A barra amarela ----------------------------------------------------
   O elemento gráfico mais repetido do manual: um traço curto de Amarelo Itera
   logo abaixo do título ou do rótulo. Não é decoração — é o que diz "aqui
   começa um bloco". */
.bb-barra {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--bb-accent);
  margin-top: 1.5rem;
}
.bb-barra--curta { width: 28px; height: 3px; margin-top: 0.9rem; }
.bb-barra--centro { margin-inline: auto; }

/* Qualquer número: dígitos de largura fixa, senão a coluna dança */
.bb-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.bb-text-alta { color: var(--bb-alta); }
.bb-text-baixa { color: var(--bb-baixa); }
.bb-text-2 { color: var(--bb-text-2); }
.bb-text-3 { color: var(--bb-text-3); }

/* --------------------------------------------------------------------------
   4. A marca — logotipo, símbolo e assinatura
   --------------------------------------------------------------------------
   O logotipo é "ítera" com o símbolo no lugar do pingo do i, um filete
   vertical e o selo "xp". O manual chama esta de VERSÃO PRINCIPAL e é a única
   que o site usa em fundo escuro. O texto é texto de verdade (Sora ExtraBold),
   não imagem: escala, é lido por leitor de tela e não pesa.
   -------------------------------------------------------------------------- */
.bb-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--bb-text-1);
}

/* O logotipo é ARQUIVO, e isso mudou em 07/09/2026.
   Antes ele era montado: "itera" em Sora ExtraBold mais o laço em SVG. Só que
   o logotipo do manual NÃO É SORA — os terminais do "i" e do "t" são cortados
   na diagonal, e a Sora corta reto. De perto a diferença aparecia, e foi a
   reclamação que trouxe o arquivo em alta resolução.
   Agora as letras são contorno traçado do próprio logotipo, o que resolve de
   uma vez a fidelidade e a nitidez em qualquer tamanho. O preço é perder o
   texto selecionável — daí o alt e o aria-label carregarem o nome. */
.bb-marca__logo {
  display: block;
  height: var(--bb-marca-h, 2.16rem);
  width: auto;
  flex: none;
}

/* Rótulo ao lado do logotipo em tela interna do painel ("DS v3", "PAINEL").
   Não é o selo XP: é um qualificador de contexto, e por isso continua sendo
   texto com filete e não caixa branca. */
.bb-logo__xp {
  font-size: var(--bb-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bb-text-3);
  padding-left: 0.6rem;
  border-left: 1px solid var(--bb-line-strong);
}

/* Assinatura da marca — a frase que fecha peça institucional */
.bb-assinatura {
  font-size: var(--bb-micro);
  font-weight: 400;
  letter-spacing: 0.26em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--bb-text-2);
}

/* --------------------------------------------------------------------------
   5. Superfícies
   -------------------------------------------------------------------------- */
.bb-card {
  background: var(--bb-surface-1);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-md);
  box-shadow: var(--bb-e1);
}
.bb-card--raised { background: var(--bb-surface-2); box-shadow: var(--bb-e2); }
.bb-card--flush { background: transparent; box-shadow: none; }

/* Só onde o hover leva a algum lugar. Card decorativo não levanta. */
.bb-card--interactive {
  transition: transform var(--bb-mid) var(--bb-ease),
              border-color var(--bb-mid) var(--bb-ease),
              box-shadow var(--bb-mid) var(--bb-ease),
              background-color var(--bb-mid) var(--bb-ease);
}
.bb-card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--bb-line-strong);
  background: var(--bb-surface-2);
  box-shadow: var(--bb-e2);
}
.bb-card--interactive:hover .bb-card__seta { transform: translateX(4px); opacity: 1; }
.bb-card__seta {
  transition: transform var(--bb-mid) var(--bb-ease), opacity var(--bb-mid) var(--bb-ease);
  opacity: 0.55;
}

/* Card em destaque — o único que ganha o amarelo */
.bb-card--destaque {
  border-color: var(--bb-line-accent);
  background:
    linear-gradient(180deg, var(--bb-accent-wash), transparent 42%),
    var(--bb-surface-1);
}

/* Quadro com o gradiente da marca ao fundo — o "fundo institucional" */
.bb-card--gradiente {
  border-color: rgba(255, 195, 0, 0.22);
  background: var(--bb-gradiente-sutil);
}

/* Vidro: reservado para sobreposição real (header fixo, overlay). Não é card. */
.bb-glass {
  background: color-mix(in srgb, var(--bb-base) 76%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid var(--bb-line);
}
@supports not (backdrop-filter: blur(1px)) {
  .bb-glass { background: var(--bb-base); }
}

.bb-divider { height: 1px; background: var(--bb-line); border: 0; }

/* --------------------------------------------------------------------------
   6. Botões — pílula, como no manual
   -------------------------------------------------------------------------- */
.bb-btn {
  --_pad-y: 0.9rem;
  --_pad-x: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--bb-r-pill);
  border: 1px solid transparent;
  font-family: var(--bb-font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--bb-fast) var(--bb-ease),
              border-color var(--bb-fast) var(--bb-ease),
              color var(--bb-fast) var(--bb-ease),
              transform var(--bb-fast) var(--bb-ease),
              box-shadow var(--bb-mid) var(--bb-ease);
}
.bb-btn:active { transform: translateY(1px); }
.bb-btn:disabled, .bb-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Primário — um por tela. Se tem dois, nenhum é primário. */
.bb-btn--primary {
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  font-weight: 700;
}
.bb-btn--primary:hover {
  background: var(--bb-accent-hover);
  box-shadow: 0 8px 32px -8px var(--bb-accent-glow);
}

.bb-btn--secondary {
  background: var(--bb-surface-2);
  border-color: var(--bb-line-strong);
  color: var(--bb-text-1);
}
.bb-btn--secondary:hover {
  background: var(--bb-surface-3);
  border-color: var(--bb-line-accent);
}

.bb-btn--ghost {
  background: transparent;
  border-color: var(--bb-line);
  color: var(--bb-text-2);
}
.bb-btn--ghost:hover { color: var(--bb-text-1); border-color: var(--bb-line-strong); }

.bb-btn--sm { --_pad-y: 0.625rem; --_pad-x: 1.2rem; font-size: 0.8125rem; }
.bb-btn--lg { --_pad-y: 1.15rem; --_pad-x: 2.5rem; font-size: 1.0625rem; }
.bb-btn--block { display: flex; width: 100%; }

/* Seta no botão — no manual ela vem num disco. Só no primário. */
.bb-btn__seta {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  margin-right: -0.75em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.bb-btn__seta svg { width: 0.8em; height: 0.8em; }
.bb-btn--primary .bb-btn__seta svg { color: var(--bb-accent); }
.bb-btn--secondary .bb-btn__seta svg,
.bb-btn--ghost .bb-btn__seta svg { color: var(--bb-base); }

/* --------------------------------------------------------------------------
   7. Chips e selos
   -------------------------------------------------------------------------- */
.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--bb-r-pill);
  border: 1px solid var(--bb-line);
  background: var(--bb-surface-2);
  color: var(--bb-text-2);
  font-size: var(--bb-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bb-chip--accent {
  border-color: var(--bb-line-accent);
  background: var(--bb-accent-wash);
  color: var(--bb-accent);
}
.bb-chip--alta { border-color: transparent; background: var(--bb-alta-wash); color: var(--bb-alta); }
.bb-chip--baixa { border-color: transparent; background: var(--bb-baixa-wash); color: var(--bb-baixa); }
.bb-chip--fantasma { background: transparent; color: var(--bb-text-faint); }

/* --------------------------------------------------------------------------
   8. Pilares — ícone, rótulo, apoio, separados por filete
   --------------------------------------------------------------------------
   O bloco que aparece em quase toda página institucional do manual:
   DISCIPLINA / CONHECIMENTO / ESTRATÉGIA / EVOLUÇÃO / LIBERDADE.
   -------------------------------------------------------------------------- */
.bb-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--bb-line);
}
.bb-pilar {
  padding: 1.5rem 1.35rem 0.25rem;
  border-left: 1px solid var(--bb-line);
}
.bb-pilar:first-child { border-left: 0; padding-left: 0; }
.bb-pilar__icone { color: var(--bb-accent); display: block; }
.bb-pilar__icone svg { width: 1.55rem; height: 1.55rem; display: block; }
.bb-pilar__nome {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-text-1);
}
.bb-pilar__apoio {
  margin-top: 0.4rem;
  font-size: var(--bb-micro);
  font-weight: 400;
  letter-spacing: 0.13em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--bb-text-3);
}
/* Frase de apoio em caixa normal. O manual só usa o par rótulo/apoio em caixa
   alta, mas ali o pilar é institucional; aqui ele também precisa vender, e
   frase de venda em caixa alta com entreletra aberta não se lê. */
.bb-pilar__texto {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bb-text-2);
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   9. Métricas e dado de mercado
   -------------------------------------------------------------------------- */
.bb-stat__rotulo {
  font-size: var(--bb-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-text-3);
}
.bb-stat__valor {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bb-text-1);
}
.bb-stat__apoio { font-size: var(--bb-caption); color: var(--bb-text-3); }

/* Linha de cotação */
.bb-ticker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--bb-r-sm);
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-line);
}
.bb-ticker__papel {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--bb-text-1);
}
.bb-ticker__desc {
  font-size: var(--bb-micro);
  letter-spacing: 0.08em;
  color: var(--bb-text-3);
}
.bb-ticker__var {
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10. Formulário
   -------------------------------------------------------------------------- */
.bb-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--bb-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bb-text-3);
}

.bb-field {
  width: 100%;
  padding: 0.9rem 1.05rem;
  background: var(--bb-surface-3);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-sm);
  color: var(--bb-text-1);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: border-color var(--bb-fast) var(--bb-ease),
              box-shadow var(--bb-fast) var(--bb-ease),
              background-color var(--bb-fast) var(--bb-ease);
}
.bb-field::placeholder { color: var(--bb-text-faint); }
.bb-field:hover { border-color: var(--bb-line-strong); }
.bb-field:focus {
  outline: none;
  border-color: var(--bb-accent);
  box-shadow: 0 0 0 3px var(--bb-accent-wash);
}
.bb-field:disabled { opacity: 0.5; cursor: not-allowed; }
.bb-field[aria-invalid="true"] { border-color: var(--bb-baixa); }
textarea.bb-field { min-height: 9rem; resize: vertical; }
select.bb-field option { background: var(--bb-surface-2); color: var(--bb-text-1); }

.bb-ajuda { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--bb-text-3); }
.bb-erro { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--bb-baixa); }

.bb-check { accent-color: var(--bb-accent); width: 1.05rem; height: 1.05rem; }

/* Aviso em bloco */
.bb-alerta {
  padding: 0.9rem 1.15rem;
  border-radius: var(--bb-r-sm);
  border: 1px solid var(--bb-line);
  background: var(--bb-surface-2);
  font-size: 0.9rem;
  color: var(--bb-text-2);
}
.bb-alerta--erro { border-color: rgba(255, 109, 71, 0.38); background: var(--bb-baixa-wash); color: #FFD9CE; }
.bb-alerta--ok { border-color: rgba(140, 198, 62, 0.38); background: var(--bb-alta-wash); color: var(--itera-verde-suave); }
.bb-alerta--accent { border-color: var(--bb-line-accent); background: var(--bb-accent-wash); color: var(--bb-accent); }

/* --------------------------------------------------------------------------
   11. Acordeão (FAQ)
   -------------------------------------------------------------------------- */
.bb-acc {
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-md);
  background: var(--bb-surface-1);
  overflow: hidden;
  transition: border-color var(--bb-mid) var(--bb-ease);
}
.bb-acc[open] { border-color: var(--bb-line-accent); background: var(--bb-surface-2); }
.bb-acc__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--bb-text-1);
  list-style: none;
}
.bb-acc__cabeca::-webkit-details-marker { display: none; }
.bb-acc__sinal {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
  color: var(--bb-accent);
}
.bb-acc__sinal::before,
.bb-acc__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--bb-mid) var(--bb-ease);
}
.bb-acc__sinal::after { transform: rotate(90deg); }
.bb-acc[open] .bb-acc__sinal::after { transform: rotate(0deg); }
.bb-acc__corpo { padding: 0 1.5rem 1.5rem; color: var(--bb-text-2); line-height: 1.7; }

/* --------------------------------------------------------------------------
   12. Fundo e ambiente — o gradiente e as linhas finas
   -------------------------------------------------------------------------- */

/* Grade de linhas finas. No manual ela estrutura a composição sem aparecer;
   aqui vale o mesmo: se der para "ver a grade", está forte demais. */
.bb-grid-bg {
  background-size: 64px 64px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
}

.bb-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.bb-halo--accent { background: rgba(255, 195, 0, 0.10); }
/* O segundo halo não é uma segunda cor: é o mesmo ouro mais fundo, porque a
   paleta principal do manual não tem uma terceira cor de luz. */
.bb-halo--info { background: rgba(201, 138, 0, 0.09); }

/* A onda Itera — o elemento modular do manual, em feixe de linhas finas.
   Decorativa: sempre aria-hidden, nunca carrega informação.

   NÃO USE NO PAINEL. O caminho abaixo é relativo a ESTE arquivo, e o painel não
   linka o CSS: ele lê o arquivo do disco e injeta inline numa <style>, onde
   `./itera-onda.svg` passa a valer a partir da URL da página. Lá a onda tem que
   entrar como <img> com caminho servido pelo painel. */
.bb-onda {
  position: absolute;
  pointer-events: none;
  background-image: url("./itera-onda.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.85;
}
.bb-onda--espelhada { transform: scaleX(-1); }
.bb-onda--suave { opacity: 0.45; }

/* Faixa com o gradiente da marca */
.bb-gradiente { background: var(--bb-gradiente); }
.bb-gradiente-sutil { background: var(--bb-gradiente-sutil); }

/* --------------------------------------------------------------------------
   13. Elementos de mesa
   -------------------------------------------------------------------------- */

/* Fita de cotação — rola sem parar sob o header. Puramente decorativa:
   marque com aria-hidden e nunca ponha informação só aqui. */
.bb-tape {
  overflow: hidden;
  border-block: 1px solid var(--bb-line);
  background: var(--bb-surface-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bb-tape__trilho {
  display: flex;
  width: max-content;
  animation: bb-desliza 46s linear infinite;
}
.bb-tape:hover .bb-tape__trilho { animation-play-state: paused; }
.bb-tape__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--bb-text-3);
  border-right: 1px solid var(--bb-line);
}
.bb-tape__papel { color: var(--bb-text-1); font-weight: 700; }
.bb-tape__var { font-variant-numeric: tabular-nums; font-weight: 700; }

@keyframes bb-desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Retrato do parceiro — a foto inteira, sem recorte redondo.
   Presença vem do tamanho e da dissolução no fundo, não de moldura. */
.bb-retrato {
  position: relative;
  overflow: hidden;
  border-radius: var(--bb-r-xl);
  background: var(--bb-surface-2);
  isolation: isolate;
}
.bb-retrato > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  /* O manual pede foto real, luz natural e composição limpa. O tratamento
     abaixo é o mínimo para a foto conviver com o preto profundo. */
  filter: contrast(1.08) saturate(0.72) brightness(0.92);
}
.bb-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bb-base) 2%, rgba(8, 8, 8, 0.78) 20%, transparent 50%),
    radial-gradient(88% 62% at 50% 32%, transparent 30%, rgba(8, 8, 8, 0.78) 100%);
}
.bb-retrato::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 62% at 50% -8%, rgba(255, 195, 0, 0.16), transparent 62%);
  mix-blend-mode: soft-light;
}

/* Retrato em sangria — a pessoa emerge do fundo, sem moldura nenhuma. */
.bb-retrato-sangria {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
.bb-retrato-sangria > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: contrast(1.12) saturate(0.58) brightness(0.84);
}
.bb-retrato-sangria::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bb-base) 0%, rgba(8, 8, 8, 0.94) 12%, rgba(8, 8, 8, 0.42) 40%, transparent 66%),
    linear-gradient(0deg, var(--bb-base) 0%, rgba(8, 8, 8, 0.6) 14%, transparent 42%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.28) 20%, transparent 38%),
    linear-gradient(270deg, var(--bb-base) 0%, rgba(8, 8, 8, 0.35) 10%, transparent 26%);
}
.bb-retrato-sangria::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(62% 46% at 58% 6%, rgba(255, 195, 0, 0.22), transparent 62%);
  mix-blend-mode: soft-light;
}

/* Leitura de terminal — rótulo minúsculo sobre valor grande */
.bb-leitura__rotulo {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-text-3);
  display: block;
}
.bb-leitura__valor {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: 0.3rem;
  display: block;
}

/* Rótulo vertical na borda — detalhe editorial */
.bb-vertical {
  writing-mode: vertical-rl;
  font-size: 0.625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bb-text-faint);
  user-select: none;
}

/* Cartão que encosta na foto — dá escala e contexto de mesa */
.bb-flutuante {
  position: absolute;
  z-index: 2;
  background: color-mix(in srgb, var(--bb-surface-2) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--bb-line-strong);
  border-radius: var(--bb-r-md);
  box-shadow: var(--bb-e3);
  padding: 0.85rem 1.1rem;
}

/* Fundo de candles — decorativo, atrás do conteúdo */
.bb-candles { display: block; width: 100%; height: 100%; }
.bb-candles rect, .bb-candles line { transform-box: fill-box; transform-origin: center; }
.bb-candles .bb-candle { animation: bb-candle-entra 900ms var(--bb-ease) both; }
@keyframes bb-candle-entra {
  from { transform: scaleY(0.05); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* Ponto de "ao vivo" */
.bb-pulso {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.bb-pulso::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: bb-ping 2.4s var(--bb-ease) infinite;
}
@keyframes bb-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   14. Movimento
   -------------------------------------------------------------------------- */
.bb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--bb-slow) var(--bb-ease), transform var(--bb-slow) var(--bb-ease);
}
.bb-reveal.is-visivel { opacity: 1; transform: none; }

@keyframes bb-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes bb-pulsa {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}
.bb-anim-flutua { animation: bb-flutua 7s ease-in-out infinite; }
.bb-anim-pulsa { animation: bb-pulsa 5s ease-in-out infinite; }

/* Escape obrigatório: nada se mexe pra quem pediu pra nada se mexer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bb-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15. Utilitários de layout
   -------------------------------------------------------------------------- */
.bb-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
.bb-wrap--estreito { max-width: 820px; }
.bb-secao { padding-block: var(--bb-section); position: relative; }

/* Cabeçalho de seção do manual: rótulo à esquerda, contexto à direita,
   filete embaixo. */
.bb-secao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--bb-line);
}

/* Conteúdo largo (tabela, código) rola dentro de si, nunca o body */
.bb-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }