/* ── home-secoes.css ── */
/* A gramática dos CAPÍTULOS da home.
 *
 * Quatro seções passaram a compartilhar um molde só (25/08/2026):
 *
 *     REDE        `THE NETWORK CREATES THE VOLUME…`   painel: 3 pontos
 *     POPULARES   `Break Boundaries. Trade the World` painel: 6 ativos ao vivo
 *     MERCADOS    `OWN THE ASSET. TRADE THE MOVE.`    painel: spot × perpétuo
 *     PRIVACIDADE `WHAT OFFCODE NEVER COLLECTS…`      painel: 2 pontos
 *
 * O molde é: coluna de texto à esquerda, painel à direita, os dois numa grade
 * de 1180px — a mesma largura de conteúdo que a folha da origem usa no
 * `.product-explore .item-inner`, para as seções empilhadas nascerem alinhadas.
 *
 * ## Por que um molde, e não quatro seções desenhadas à parte
 *
 * As quatro dizem a mesma classe de coisa: uma tese à esquerda, a prova à
 * direita. Desenhar cada uma por conta produziria quatro alinhamentos, quatro
 * escalas de tipo e quatro ritmos verticais na mesma página — que é
 * exatamente o que estas quatro tinham antes, herdado de quatro componentes
 * diferentes da captura.
 *
 * 🔑 O que varia é o PAINEL, não o molde. Seis linhas de preço ao vivo, duas
 * colunas de mercado, três pontos de texto e dois pontos de texto são quatro
 * conteúdos diferentes na mesma moldura — é isso que impede a página de virar
 * quatro repetições do mesmo cartão.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A folha da ORIGEM reseta as direcionais num bloco à parte:
 *
 *     [dir] div, [dir] p, [dir] h2 … { border: 0; margin: 0; padding: 0 }
 *
 * Isso é (0,1,1) e vence classe sozinha (0,1,0): a regra chega ao navegador
 * com METADE das declarações aplicadas — fundo e raio entram, padding e borda
 * somem. `[dir] .oc-cap` é (0,2,0) e ganha.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800). Todo `rem`
 * escrito à mão explode o layout sem erro nenhum — `_tools/checa_css.py`
 * reprova o build por isso. Tudo aqui é px.
 */

.oc-cap {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 🔑 O respiro é do CAPÍTULO, e capítulos vizinhos SOMAM os dois: com 81px de
 * cada lado (o que `9vh` dava numa janela de 900) a distância entre duas
 * seções virava 162px de preto. Medido na página inteira em 25/08/2026, esse
 * era só um dos vãos — os outros 1.100px vinham de `<div>` vazio com
 * `min-height` inline, sobra do mecanismo de rolagem da origem
 * (`_tools/poe_home_secoes.py` os remove).
 *
 * 54px de cada lado põem a distância entre seções em ~108px, que é o passo
 * que a `.product-explore` da origem já usa (56px em cima, 44px embaixo). */
[dir] .oc-cap { padding: clamp(40px, 6vh, 72px) 20px; }

/* `start`, não `center`.
 *
 * 🔴 Com as colunas centradas, a mais CURTA ganhava metade da diferença de
 * altura em cima e metade embaixo — e as duas colunas destas seções têm
 * alturas bem diferentes (o painel de POPULARES tem seis linhas; o texto ao
 * lado, três). O resultado era um buraco de ~125px acima do título, que lia
 * como espaço entre seções e não como alinhamento.
 *
 * 🔑 Centrar duas colunas de alturas próximas compõe; de alturas distantes,
 * abre furo. Alinhadas pelo topo, as quatro seções passam a ter a mesma
 * linha de partida. */
.oc-cap-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1180px;
  box-sizing: border-box;
}

[dir] .oc-cap-inner { margin: 0 auto; }

@media (max-width: 1023px) {
  .oc-cap-inner { grid-template-columns: 1fr; }
}

/* ── a coluna de texto ──────────────────────────────────────────────────── */

.oc-cap-kicker {
  color: var(--offcode-brand, #f7931a);
  font-size: 12px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* `pre-line` porque a quebra faz parte da FRASE, não da formatação: o
 * `home_narrativa` escreve `\n` no meio do título e cada idioma quebra onde a
 * frase dele pede. Título de quatro linhas em russo não quebra onde o inglês
 * quebrava. */
.oc-cap-titulo {
  font-family: 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 108%;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: pre-line;
  color: var(--foreground-one, #fff);
}

/* O título de MERCADOS vem em duas metades porque a segunda é laranja. Os
 * outros três vêm num nó só, com `\n`. */
.oc-cap-titulo--duplo {
  display: flex;
  flex-direction: column;
  white-space: normal;
}

[dir] .oc-cap-titulo { margin: 0; }
[dir] .oc-cap-kicker + .oc-cap-titulo { margin-top: 18px; }

.oc-cap-titulo-a { color: var(--foreground-one, #fff); }
.oc-cap-titulo-b { color: var(--offcode-brand, #f7931a); }

/* Título em caixa mista (o de POPULARES é uma frase, não uma declaração em
 * versal): sem `text-transform`, com entrelinha um pouco mais folgada. */
.oc-cap-titulo--frase {
  text-transform: none;
  letter-spacing: -.02em;
  line-height: 112%;
}

.oc-cap-sub {
  max-width: 46ch;
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 16px;
  line-height: 155%;
}

[dir] .oc-cap-sub { margin: 22px 0 0; }

.oc-cap-ficha {
  color: var(--foreground-three, rgba(255, 255, 255, .48));
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: .08em;
  text-transform: uppercase;
  max-width: 340px;
}

[dir] .oc-cap-ficha {
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(247, 147, 26, .35);
}

/* ── o botão do capítulo ─────────────────────────────────────────────────
 *
 * Um por seção, no máximo. O `Deposit now` da REDE é o único CTA sólido da
 * página fora da dobra; os outros dois são links de texto com sublinhado, que
 * é o peso certo para "veja mais" ao lado de uma ação de dinheiro.
 */
.oc-cap-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground-one, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

[dir] .oc-cap-cta {
  margin: 30px 0 0;
  padding: 13px 26px;
  background: var(--offcode-brand, #f7931a);
  border: 1px solid var(--offcode-brand, #f7931a);
}

.oc-cap-cta { color: #0d0d0f; }
[dir] .oc-cap-cta:hover { background: var(--offcode-brand-hover, #ffb255); border-color: var(--offcode-brand-hover, #ffb255); }

.oc-cap-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--foreground-one, #fff);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}

[dir] .oc-cap-link {
  margin: 28px 0 0;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--foreground-three, rgba(255, 255, 255, .48));
}

[dir] .oc-cap-link:hover { border-bottom-color: var(--offcode-brand, #f7931a); }
.oc-cap-link:hover { color: var(--offcode-brand, #f7931a); }

.oc-cap-cta:focus-visible,
.oc-cap-link:focus-visible {
  outline: 2px solid var(--offcode-brand, #f7931a);
  outline-offset: 3px;
}

/* A seta do link é desenhada, não é um glifo: `↗` muda de desenho e de
 * largura em cada sistema, e num link de 14px isso aparece. */
.oc-cap-seta {
  display: block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ── o painel ───────────────────────────────────────────────────────────── */

.oc-cap-painel {
  position: relative;
  box-sizing: border-box;
  border-radius: 16px;
}

[dir] .oc-cap-painel {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--line-mango, #2a2a2a);
  background: var(--container-four, rgba(255, 255, 255, .04));
}

/* ── painel de PONTOS (REDE e PRIVACIDADE) ───────────────────────────────
 *
 * Três ou dois pontos, um por linha. Não são cards: são linhas de uma ficha,
 * e a régua entre elas é o que as separa.
 *
 * 🔴 Antes eram cards de tamanho fixo herdados da captura, e a copy nova não
 * cabia: `REAL VOLUME` quebrava em `REAL VOLUM` + `E` numa caixa de 440px com
 * corpo de 64px. Card com altura fixa e texto variável é uma promessa que a
 * tradução quebra — em russo e híndi essa mesma caixa recebe o dobro de
 * caracteres.
 */
.oc-pontos {
  display: flex;
  flex-direction: column;
}

.oc-ponto {
  display: block;
}

[dir] .oc-ponto { padding: 18px 0; }
[dir] .oc-ponto + .oc-ponto { border-top: 1px solid var(--line-mango, #2a2a2a); }
[dir] .oc-ponto:first-child { padding-top: 4px; }
[dir] .oc-ponto:last-child { padding-bottom: 4px; }

.oc-ponto-titulo {
  color: var(--foreground-one, #fff);
  font-size: 15px;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.oc-ponto-desc {
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 14px;
  line-height: 150%;
}

[dir] .oc-ponto-desc { margin-top: 7px; }

/* ── painel POPULARES: seis ativos ao vivo ───────────────────────────────── */

.oc-pop-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

[dir] .oc-pop-cabeca { padding: 0 0 14px; }

.oc-pop-nome {
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.oc-pop-nota {
  color: var(--foreground-three, rgba(255, 255, 255, .48));
  font-size: 11px;
  line-height: 120%;
}

.oc-pop-linhas {
  display: flex;
  flex-direction: column;
}

.oc-pop-linha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, auto) 74px;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border-radius: 8px;
  transition: background .25s ease;
}

[dir] .oc-pop-linha { padding: 12px 10px; }
[dir] .oc-pop-linha + .oc-pop-linha { border-top: 1px solid var(--line-mango, #2a2a2a); }
[dir] .oc-pop-linha:hover { background: rgba(255, 255, 255, .04); }

/* O maior movimento de 24h ganha um trilho da marca na borda — o dado
 * escolhe onde o acento vai, não o desenho. */
.oc-pop-linha--topo::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--offcode-brand, #f7931a);
}

.oc-pop-moeda {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.oc-pop-icone {
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
}

.oc-pop-ticker {
  color: var(--foreground-one, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  white-space: nowrap;
}

.oc-pop-graf {
  display: block;
  width: 64px;
  height: 22px;
  overflow: visible;
}

.oc-pop-graf[hidden] { display: none; }

.oc-pop-graf-linha {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.oc-pop-preco {
  color: var(--foreground-one, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* 🔴 A lista da captura pintava TODA variação com a classe `coin-change down`,
 * fixa no HTML: seis altas em vermelho, com o número certo do lado. O sinal
 * vai junto da cor — cor sozinha não diz nada para quem não distingue as
 * duas, e aqui ela estava dizendo o CONTRÁRIO do número. */
.oc-pop-var {
  font-size: 13px;
  line-height: 120%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.oc-pop-var--sobe { color: var(--rise-color, #2ebd85); }
.oc-pop-var--cai { color: var(--fall-color, #f6465d); }

@media (max-width: 520px) {
  .oc-pop-linha { grid-template-columns: minmax(0, 1fr) minmax(0, auto) 68px; }
  .oc-pop-graf { display: none; }
}

/* ── entrada ─────────────────────────────────────────────────────────────
 *
 * 🔑 O estado escondido depende de `.oc-cap-anima`, que é o PRÓPRIO JS quem
 * põe. Escrito direto na folha, a seção sumiria para quem bloqueia script — e
 * seção invisível não avisa ninguém, nem no console.
 */
.oc-cap-anima .oc-ponto,
.oc-cap-anima .oc-mkt-linha,
.oc-cap-anima .oc-pop-linha {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
              transform .55s cubic-bezier(.16, 1, .3, 1);
}

.oc-cap-anima.oc-cap-visivel .oc-ponto,
.oc-cap-anima.oc-cap-visivel .oc-mkt-linha,
.oc-cap-anima.oc-cap-visivel .oc-pop-linha {
  opacity: 1;
  transform: none;
}

.oc-cap-anima .oc-ponto:nth-child(2),
.oc-cap-anima .oc-mkt-linha:nth-child(2),
.oc-cap-anima .oc-pop-linha:nth-child(2) { transition-delay: .06s; }
.oc-cap-anima .oc-ponto:nth-child(3),
.oc-cap-anima .oc-mkt-linha:nth-child(3),
.oc-cap-anima .oc-pop-linha:nth-child(3) { transition-delay: .12s; }
.oc-cap-anima .oc-pop-linha:nth-child(4) { transition-delay: .18s; }
.oc-cap-anima .oc-pop-linha:nth-child(5) { transition-delay: .24s; }
.oc-cap-anima .oc-pop-linha:nth-child(6) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .oc-cap-anima .oc-ponto,
  .oc-cap-anima .oc-mkt-linha,
  .oc-cap-anima .oc-pop-linha {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.oc-cap ::selection {
  background: rgba(247, 147, 26, .28);
  color: var(--foreground-one, #fff);
}

/* FAQ da captura (P2 da auditoria 30/08): os spans .number/.question são
   inline colados ("01¿Qué…") em todos os idiomas — o gap não existe na
   origem. Escopo restrito ao componente capturado. */
[data-v-004044d8] .number { margin-right: .45em; }

/* ── "Explore Our Products": a laje do hover era BRANCA ──────────────────
 * Testador (30/08 23:33): "esse branco eu botaria cinza escuro". A origem
 * pinta o `::before` do item com `--foreground-one` (branco no tema escuro)
 * e inverte os textos no hover; aqui a laje vira cinza escuro e os textos
 * ficam claros — nos dois temas, o mesmo desenho. */
[dir] .product-explore .item::before { background: #1c1d21 !important; }
.product-explore .item:hover .item-name,
.product-explore .item:hover .item-desc strong,
.product-explore .item:hover .item-arrow { color: #f4f4f5 !important; }
.product-explore .item:hover .item-desc { color: #a1a1aa !important; }

/* ── mercados-home.css ── */
/* O PAINEL do capítulo de mercados: spot × perpétuo.
 *
 * A moldura do capítulo (coluna de texto, título, grade de 1180px, entrada em
 * vista) mora em `_local/home-secoes.css`, no molde `.oc-cap`, compartilhado
 * com REDE, POPULARES e PRIVACIDADE. Aqui fica só o que é DESTE painel.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum. Tudo aqui é px.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A origem reseta margin/padding/border num bloco `[dir] div…` de
 * especificidade (0,1,1), que vence classe sozinha (0,1,0).
 */

/* ── o painel ───────────────────────────────────────────────────────────── */

.oc-mkt-painel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  box-sizing: border-box;
  border-radius: 16px;
}

[dir] .oc-mkt-painel {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--line-mango, #2a2a2a);
  background: var(--container-four, rgba(255, 255, 255, .04));
}

@media (max-width: 560px) {
  .oc-mkt-painel { grid-template-columns: 1fr; gap: 22px; }
}

.oc-mkt-col { min-width: 0; }

/* 🔴 As duas colunas nasciam DESALINHADAS: só a da direita tem o selo
 * `Up to 40×`, o selo é mais alto que o texto do rótulo, e o cabeçalho dela
 * empurrava as três linhas ~20px para baixo. O sintoma não foi o cabeçalho —
 * foram as SETAS entre as colunas saindo tortas, ligando a linha do BTC à
 * altura errada.
 *
 * 🔑 Altura mínima igual nos dois, medida pelo mais alto (o selo). */
.oc-mkt-cabeca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 22px;
}

[dir] .oc-mkt-cabeca {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-mango, #2a2a2a);
}

.oc-mkt-nome {
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.oc-mkt-teto {
  color: var(--offcode-brand, #f7931a);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
}

[dir] .oc-mkt-teto {
  padding: 4px 7px;
  border: 1px solid var(--offcode-brand, #f7931a);
}

.oc-mkt-linhas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[dir] .oc-mkt-linhas { margin-top: 14px; }

.oc-mkt-linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border-radius: 10px;
  box-sizing: border-box;
}

[dir] .oc-mkt-linha {
  padding: 11px 12px;
  border: 1px solid var(--line-mango, #2a2a2a);
  background: rgba(255, 255, 255, .03);
}

.oc-mkt-moeda {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.oc-mkt-icone {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
}

.oc-mkt-ticker {
  color: var(--foreground-one, #fff);
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
}

.oc-mkt-fim {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* `tabular-nums` porque três preços empilhados precisam alinhar coluna com
 * coluna: sem isso o `1` estreito desalinha a vírgula de uma linha para a
 * outra e a pilha perde o prumo. */
.oc-mkt-preco {
  color: var(--foreground-one, #fff);
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oc-mkt-extra {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 120%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variação 24h: verde e vermelho da própria origem. O SINAL vai junto — cor
 * sozinha não diz nada para quem não distingue as duas. */
.oc-mkt-var--sobe { color: var(--rise-color, #2ebd85); }
.oc-mkt-var--cai { color: var(--fall-color, #f6465d); }

/* Selo de alavancagem, só na coluna do perpétuo. */
.oc-mkt-lev {
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
}

[dir] .oc-mkt-lev {
  padding: 4px 6px;
  background: var(--container-two, rgba(255, 255, 255, .08));
}

/* ── o gráfico de 24h ────────────────────────────────────────────────────
 *
 * SVG desenhado a partir das velas de 1h que a rota devolve — 24 pontos, a
 * forma real do dia. Nasce com `hidden`: linha sem dado é enfeite com cara de
 * informação, e este painel inteiro existe para não fazer isso.
 */
.oc-mkt-graf {
  display: block;
  width: 56px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
}

.oc-mkt-graf[hidden] { display: none; }

.oc-mkt-graf-linha {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ── a seta entre as colunas ─────────────────────────────────────────────
 *
 * O mesmo ativo, do outro lado. Some quando as colunas empilham: seta apontando
 * para a coluna de cima não liga nada.
 */
@media (min-width: 561px) {
  .oc-mkt-col--perp .oc-mkt-linha::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: calc(-1 * clamp(28px, 4vw, 56px));
    width: clamp(28px, 4vw, 56px);
    height: 1px;
    background: linear-gradient(to right,
                                rgba(247, 147, 26, 0),
                                rgba(247, 147, 26, .55));
    pointer-events: none;
  }

  .oc-mkt-col--perp .oc-mkt-linha::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: -7px;
    width: 5px;
    height: 5px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid rgba(247, 147, 26, .75);
    border-right: 1px solid rgba(247, 147, 26, .75);
    pointer-events: none;
  }
}

.oc-mkt ::selection {
  background: rgba(247, 147, 26, .28);
  color: var(--foreground-one, #fff);
}

/* ── OC-12 · o travessão não pode parecer resposta final ──────────────────
 *
 * Auditoria de 04/09/2026: "cotações da home permanecem vazias". Medido: o
 * feed funciona; o PEDIDO é que esperava a rolagem. Corrigido no JS — aqui
 * ficam os dois estados que faltavam à tela.
 *
 * Enquanto o dado não chega, o travessão pulsa de leve: diz "vem vindo" em
 * vez de "é isto". */
.oc-mkt-preco.oc-preco-esperando,
.oc-pop-preco.oc-preco-esperando {
  opacity: 0.45;
  animation: oc-preco-pulso 1.1s ease-in-out infinite;
}
@keyframes oc-preco-pulso {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-mkt-preco.oc-preco-esperando,
  .oc-pop-preco.oc-preco-esperando { animation: none; }
}

/* Falhou as três tentativas: a seção diz, em TEXTO. O `title` de antes só
 * existia para quem tem mouse — no telefone e no leitor de tela a falha era um
 * travessão mudo. */
[dir] .oc-mkt-sem-cotacao {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid rgba(247, 147, 26, 0.35);
  border-radius: 8px;
  background: rgba(247, 147, 26, 0.08);
  color: #d8b98a;
  font-size: 12.5px;
  line-height: 1.4;
}

/* ── gridbot-home.css ── */
/* O capítulo GRID BOT AI da home: desde 05/09/2026, UMA ARTE com link.
 *
 * A moldura do capítulo (respiro, largura de 1180px, entrada em vista) mora
 * em `_local/home-secoes.css`, no molde `.oc-cap`, o mesmo de REDE,
 * POPULARES, MERCADOS e PRIVACIDADE. Aqui fica só o que é DESTA arte. O que
 * havia antes (o card com o esquema de grade, 25/08) está no git.
 *
 * ## Por que a arte é `<img>` e não `background-image`
 *
 * `<img>` com `width`/`height` reserva a caixa antes do download (a página
 * não salta), tem `alt` que o i18n traduz, e entra no artefato porque o
 * `build_deploy.py` lê `src=`. Um `url()` no CSS também entraria — mas sem
 * `alt`, e a caixa precisaria de `aspect-ratio` escrito à mão.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum — `_tools/checa_css.py` reprova o
 * build por isso. Tudo aqui é px.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A origem reseta margin/padding/border num bloco `[dir] a…` de
 * especificidade (0,1,1), que vence classe sozinha (0,1,0). Regra de espaço
 * escrita só na classe é aplicada pela METADE, sem erro em lugar nenhum — foi
 * assim que o `.oc-como-link` ficou sem fundo por dias.
 */

/* ── a moldura ───────────────────────────────────────────────────────────
 *
 * A mesma do card que a arte substituiu: contorno laranja fraco (o desenho
 * inteiro da borda) e um halo difuso no preto do fundo. Sem ela a arte — que
 * também é preta — se dissolveria na página e o brilho do logo ficaria solto
 * no meio do nada. `overflow: hidden` é o que arredonda o JPG.
 */
.oc-gb-banner {
  position: relative;
  display: block;
  max-width: 1180px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

[dir] .oc-gb-banner {
  margin: 0 auto;
  border: 1px solid rgba(247, 147, 26, .38);
  background: #0a0708;
  box-shadow: 0 0 60px -12px rgba(247, 147, 26, .30);
}

[dir] .oc-gb-banner:hover {
  border-color: rgba(247, 147, 26, .70);
  box-shadow: 0 0 70px -10px rgba(247, 147, 26, .45);
}

.oc-gb-banner:focus-visible {
  outline: 2px solid var(--offcode-brand, #f7931a);
  outline-offset: 3px;
}

/* ── a arte ──────────────────────────────────────────────────────────────
 *
 * 16:9 do arquivo (1536×864), a largura toda da moldura, altura pela
 * proporção. `display: block` tira a linha de base do <img> inline — os ~4px
 * de vão que apareceriam embaixo, DENTRO da borda. Inteira, sem corte, em
 * qualquer largura: o texto está no pixel, e cortar a arte para caber num
 * celular cortaria ou o logo ou a frase.
 */
.oc-gb-banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

[dir] .oc-gb-banner-img { margin: 0; padding: 0; border: 0; }

/* ── entrada em vista ────────────────────────────────────────────────────
 *
 * O `home-secoes.js` põe `.oc-cap-anima` e depois `.oc-cap-visivel` na seção
 * quando ela entra na tela: a arte sobe 8px e aparece, o mesmo passo das
 * linhas dos outros capítulos.
 *
 * 🔑 O estado escondido depende de `.oc-cap-anima`, que é o PRÓPRIO JS quem
 * põe. Escrito direto na folha, a seção sumiria para quem bloqueia script — e
 * seção invisível não avisa ninguém, nem no console.
 */
.oc-cap-anima .oc-gb-banner {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
              transform .55s cubic-bezier(.16, 1, .3, 1),
              box-shadow .3s ease,
              border-color .3s ease;
}

.oc-cap-anima.oc-cap-visivel .oc-gb-banner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .oc-cap-anima .oc-gb-banner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── no /m/: corte à esquerda ────────────────────────────────────────────
 *
 * Dono, 05/09/2026: "corta à esquerda no /m/". Num celular a arte inteira em
 * 16:9 tem 344px de largura e o `BUILT FOR VOLATILITY.` vira 5px de altura.
 * Aqui a caixa é 1:1 e a arte, em `cover` ancorada à esquerda, mostra 56% da
 * largura original: o texto fica ~1,8× maior e o anel laranja do logo sangra
 * pela direita. A classe vem do passe, só na árvore `/m/` — o desktop segue
 * com a arte inteira.
 *
 * 🔑 `aspect-ratio` do autor vence a proporção que o `width`/`height` do
 * `<img>` declara; `height: auto` continua sendo o que faz a altura seguir a
 * largura. Só para caber num tablet a caixa volta a 16:9 acima de 640px.
 */
@media (max-width: 640px) {
  .oc-gb-banner--corte .oc-gb-banner-img {
    aspect-ratio: 1 / 1;
    object-position: left center;
  }
}

/* ── barra.css ── */
/* A barra de navegação do espelho — UMA, em todas as páginas.
 *
 * Antes deste arquivo havia NOVE cabeçalhos diferentes no site, um por
 * família de captura, cada um com o seu próprio hash de escopo do Vue
 * (`data-v-105bb0ce`, `4194e554`, `7ce6e420`, `8fe1a67c`, …). Como o estilo
 * da origem é escopado por esse hash, "o mesmo botão" tinha altura, sombra e
 * hover diferentes de página para página — foi isso que o dono viu como
 * "tem abas que o navbar muda".
 *
 * 🔑 Enquanto o estilo vier do escopo da captura, cada página tem o cabeçalho
 * da página de onde ela foi capturada. Unificar não é ajustar as nove: é
 * deixar de depender delas.
 *
 * Por isso aqui não há UMA regra que dependa de classe da origem. Tudo o que
 * a barra desenha nasce neste arquivo, e o único elo com o resto da página é
 * a altura: `--navigation-height` continua sendo respeitada, porque o corpo
 * de várias telas reserva espaço por ela.
 *
 * ⚠️ Nenhum `rem` aqui. A raiz do site é `13.33vw` (~240px numa janela de
 * 1800), então `1rem` escrito à mão vale ~240px e o layout explode sem erro
 * nenhum. A guarda `_tools/checa_css.py` reprova o build se voltar.
 */

/* ── tokens ────────────────────────────────────────────────────────────────
 *
 * Próprios, com prefixo. Derivam dos tokens do site (`--bg-1`, `--text-1`,
 * `--color-blue` = #f7931a) mas não os LEEM: uma tela que redefina `--bg-2`
 * para o painel dela não pode mudar o cabeçalho junto.
 *
 * Moram em `.oc-b`, que é a classe das DUAS raízes — a barra e a gaveta. A
 * gaveta é filha do `<body>`, não da barra, e propriedade custom desce pela
 * árvore: declarada só na barra, a gaveta nasceria sem cor nenhuma.
 */
.oc-b {
  --ocb-h: var(--navigation-height, 65px);
  --ocb-tinta: #FFFFFF;
  --ocb-tinta-2: rgba(255, 255, 255, .74);
  --ocb-tinta-3: rgba(255, 255, 255, .54);
  --ocb-fundo: #020202;
  --ocb-superficie: #141519;
  --ocb-superficie-2: #202127;
  /* 🔴 Os menus caíam em `--ocb-superficie` — um cinza médio e AZULADO, e o
   * mesmo tom da barra atrás deles. Dois blocos de tom parecido empilhados,
   * sem hierarquia entre eles, é o que dá cara de gerado (dono, 28/08/2026).
   * E o azul era forasteiro: o site é preto #020202 com superfícies #0b0b0b.
   *
   * 🔑 O menu tem de parecer que está SOBRE a barra, não recortado dela.
   * Escurecer o painel faz isso sem precisar clarear coisa nenhuma.
   *
   * `--ocb-superficie` FICA como está: ela também pinta a pastilha de saldo,
   * que vive DENTRO da barra e some se ficar preta. Superfície de menu e
   * superfície de barra deixaram de ser a mesma coisa porque nunca foram. */
  --ocb-menu: #0A0A0A;
  --ocb-menu-realce: rgba(255, 255, 255, .055);
  /* A curva do `blur-out-up` (21st.dev): sai rápido e assenta devagar. */
  --ocb-mola: cubic-bezier(.22, 1, .36, 1);
  --ocb-fio: rgba(255, 255, 255, .10);
  --ocb-fio-forte: rgba(255, 255, 255, .20);
  --ocb-marca: #f7931a;
  --ocb-marca-hover: #ffa63d;
  --ocb-marca-tinta: #120800;
  --ocb-sombra: 0 20px 44px -14px rgba(0, 0, 0, .78), 0 3px 10px -3px rgba(0, 0, 0, .55);
  /* Véu sobre mídia: 0,66 de preto por cima do vídeo. Medido contra o quadro
   * mais claro possível (branco puro): o fundo efetivo fica em #575757, e
   * texto branco em cima dá 6,0:1 — acima do piso de 4,5:1. Com 0,55 daria
   * 4,0:1 e o rótulo sumiria na arquibancada, que é o defeito relatado. */
  --ocb-veu: rgba(2, 2, 2, .66);
}

/* ── cortina de carregamento (30/08/2026) ──────────────────────────────
 * A captura da origem pinta ANTES de o nosso JS montar cabeçalho, abas e
 * terminal: o `DOMContentLoaded` só chega depois de 580 KB de HTML e 29
 * scripts, e nesse intervalo (≈1 s no telefone; 1,9 s medido a 4G/CPU 4×)
 * o olho via o site antigo, depois um pulo de 60 px quando o cabeçalho
 * entrava, e peças sobrepostas por um quadro. Dono, 30/08: "todas as páginas
 * carregam algo antigo por 1 segundo depois entra no front atual".
 *
 * 🔑 O que o JS faz no fim, o CSS faz no começo: o `body` nasce invisível e
 * o `barra.js` marca `html.oc-pronto` no início de `inicia()`, na MESMA
 * tarefa do `DOMContentLoaded` em que abas e terminal montam ⇒ uma pintura
 * só, já com tudo. `opacity`, não `visibility`: filho com `visibility:
 * visible` explícito atravessaria a cortina; opacidade ninguém atravessa. O
 * fundo escuro continua (o canvas herda o fundo do body mesmo transparente).
 *
 * 🔑 Se o JS falhar, a animação revela em 4 s: página lenta é melhor que
 * página cega. `barra.css` e `barra.js` entram sempre juntos (861/861). */
/* 🔑 A cortina vale para o CONTEÚDO, não para o `body` inteiro: a tela de
 * carregamento é filha direta do body e precisa ficar VISÍVEL enquanto tudo o
 * mais está escondido. `opacity` num pai cria contexto de empilhamento — filho
 * nenhum escapa —, então exemtar o loader só é possível trocando o alvo.
 * Continua sendo `opacity` e não `visibility` pelo motivo de 30/08: filho com
 * `visibility: visible` atravessaria a cortina; opacidade ninguém atravessa.
 * Entre os filhos diretos do body só o `#__nuxt` desenha; o resto são
 * `<script>`, que não pintam. */
html:not(.oc-pronto) body > *:not(#oc-loader) { opacity: 0; animation: oc-revela 0s linear 4s forwards; }

/* ══ tela de carregamento (09/09/2026) ═══════════════════════════════════
 * Ela NÃO é uma espera nova: ocupa exatamente a janela em que a cortina já
 * deixava a tela preta — do primeiro pixel até o `barra.js` marcar
 * `html.oc-pronto`. Medido depois do `poe_shell_primeiro`, isso são 600 a
 * 1.000 ms, e some com 350 ms de fade.
 *
 * 🔑 Zero JavaScript para o loader do primeiro carregamento: quem mostra é o
 * HTML estático, quem esconde é a classe que o shell já marcava. Sob a CSP
 * `script-src 'self'` isso também evita mais um arquivo no caminho da pintura.
 *
 * 🔴 A saída de emergência é obrigatória: sem ela, uma falha do `barra.js`
 * deixaria o site TRANCADO atrás do loader — pior que a tela preta de antes,
 * que ao menos revelava em 4 s. */
:root {
  --oc-loader-fundo: #0A0A0A;
  --oc-enter: 500ms;   /* entrada da logo */
  --oc-fade: 350ms;    /* saída do loader e transição de página */
  --oc-cycle: 2380ms;  /* ciclo do respiro = --oc-enter / 0.21 */
}

#oc-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--oc-loader-fundo);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--oc-fade) cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear var(--oc-fade);
  animation: oc-loader-sai 0s linear 4s forwards;
}
#oc-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 70%);
}
html.oc-pronto #oc-loader,
#oc-loader[data-oc-fora] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes oc-loader-sai { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* 🔴 Medido no artefato: com o shell rápido, o `oc-pronto` chega aos ~1.000 ms
 * e o `#oc-loader` só existe no DOM aos ~900 ms — a tela aparecia e sumia no
 * mesmo quadro. Otimizar demais matou a animação.
 *
 * 🔑 A trava garante os 350 ms pedidos, contados da PRIMEIRA PINTURA (é quando
 * a pessoa vê a tela), não do início da navegação. Quem põe e tira a classe é
 * o `loader.js`, primeiro da cadeia do shell. Vem DEPOIS da regra do
 * `oc-pronto` de propósito: mesma especificidade, ganha quem vem por último. */
html.oc-loader-trava #oc-loader {
  opacity: 1;
  visibility: visible;
  /* 🔴 Sem esta linha a tela ficava OPACA e ao mesmo tempo atravessável: a
   * regra do `oc-pronto` já tinha posto `pointer-events: none`, e a trava
   * devolvia só `opacity` e `visibility`. Durante os 350 ms o toque passava
   * pela tela e acertava um botão que a pessoa não estava vendo. */
  pointer-events: auto;
}

/* Medidas em % dentro de uma caixa `584 / 286`: é o alinhamento exato da logo
 * original, e é por isso que os três pedaços não podem ser redesenhados.
 *
 * 🔴 09/09/2026, EM PRODUÇÃO: a primeira versão usava as classes `.oc-a`,
 * `.oc-b` e `.oc-c` do desenho que veio pronto. `.oc-b` JÁ EXISTIA no site —
 * é a classe do cabeçalho (`header.oc-b.oc-barra`) e tem 266 referências no
 * CSS. O `width: 21.5753%` da barra `/` caiu no cabeçalho: 21,5753% de 384 px
 * = 82,85 px, e a barra inteira encolheu para 84 px, cortando Depositar,
 * saldo e conta. O `animation: ocS` levou junto a opacidade, que ficou
 * oscilando entre 0,6 e 1.
 *
 * 🔑 Nome curto de classe vindo de fora é colisão esperando acontecer. Aqui
 * eles são `oc-carga-*` (nenhum uso anterior) E escopados em `#oc-loader`, e a
 * `checa_loader.py` reprova o build se alguma classe da tela aparecer fora
 * dela. */
#oc-loader .oc-carga {
  position: relative;
  width: min(56vw, 232px);
  aspect-ratio: 584 / 286;
  animation: ocGrp var(--oc-cycle) linear infinite both;
}
#oc-loader .oc-carga span {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#oc-loader .oc-carga-a { left: 0;        width: 27.7397%; background-image: url("/_local/img/loader-a.png"); animation: ocL var(--oc-cycle) linear infinite both; }
#oc-loader .oc-carga-b { left: 39.2123%; width: 21.5753%; background-image: url("/_local/img/loader-b.png"); animation: ocS var(--oc-cycle) linear infinite both; }
#oc-loader .oc-carga-c { left: 72.4315%; width: 27.5685%; background-image: url("/_local/img/loader-c.png"); animation: ocR var(--oc-cycle) linear infinite both; }

@keyframes ocGrp { 0%, 66% { opacity: 1 } 79% { opacity: 0 } 100% { opacity: 0 } }
@keyframes ocL {
  0%       { opacity: 0; transform: translate3d(-46px, 0, 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  4%       { opacity: 0; transform: translate3d(-46px, 0, 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  21%      { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in-out }
  44%      { transform: translate3d(-3px, 0, 0); animation-timing-function: ease-in-out }
  66%, 100% { opacity: 1; transform: translate3d(0, 0, 0) }
}
@keyframes ocR {
  0%       { opacity: 0; transform: translate3d(46px, 0, 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  4%       { opacity: 0; transform: translate3d(46px, 0, 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  21%      { opacity: 1; transform: translate3d(0, 0, 0); animation-timing-function: ease-in-out }
  44%      { transform: translate3d(3px, 0, 0); animation-timing-function: ease-in-out }
  66%, 100% { opacity: 1; transform: translate3d(0, 0, 0) }
}
@keyframes ocS {
  0%   { opacity: 1; clip-path: inset(0 0 100% 0); transform: translate3d(0, -5px, 0); animation-timing-function: cubic-bezier(.2, .85, .25, 1) }
  15%  { clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); animation-timing-function: ease-in-out }
  44%  { opacity: .55 }
  66%  { opacity: 1 }
  100% { opacity: 1; clip-path: inset(0 0 0 0) }
}

/* ══ transição entre páginas (350 ms) ════════════════════════════════════
 * 🔑 O `loader.js` marca `html.oc-saindo` no clique e NÃO segura a navegação.
 * O navegador mantém a página velha na tela até a nova pintar, então o fade
 * roda DURANTE o carregamento — mesmo desenho, zero milissegundo somado. Com
 * a navegação atrasada em 350 ms (como a referência fazia), cada clique ficaria
 * 350 ms mais lento do que é. */
/* 🔴 A primeira versão usava `body > *:not(#oc-loader)`. Dois problemas:
 *
 *  1. `:not(#oc-loader)` conta o ID na especificidade — a regra ficava em
 *     (1,1,2) e VENCIA as transições dos próprios componentes. A gaveta do
 *     menu tem `transition: opacity 190ms, visibility 190ms` em (0,2,0);
 *     perdia as duas, e o `visibility: hidden` do fechamento passava a valer
 *     na hora, cortando o fade dela.
 *  2. Pegava tudo o que o JS anexa ao body depois — gaveta e barra de abas,
 *     que são camadas fixas e não fazem parte da saída da página. As abas
 *     ainda levavam `translateY(6px)` de brinde.
 *
 * 🔑 Quem sai é o CONTEÚDO da página, e ele tem nome: `#__nuxt`, a raiz da
 * captura, presente em todas as 889 páginas. Uma regra com alvo é mais barata
 * de entender que um seletor universal com exceções. */
html.oc-pronto #__nuxt {
  transition: opacity var(--oc-fade) cubic-bezier(.4, 0, .2, 1),
              transform var(--oc-fade) cubic-bezier(.4, 0, .2, 1);
}
html.oc-saindo #__nuxt {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  #oc-loader .oc-carga, #oc-loader .oc-carga span {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  #oc-loader, html.oc-pronto #__nuxt { transition-duration: 1ms !important; }
  html.oc-saindo #__nuxt { transform: none; }
}

/* ── a caixa da barra nasce com a altura final ──────────────────────────
 * 🔴 Medido em 09/09/2026: o marcador `<div data-oc-barra data-oc-altura="65px">`
 * SEMPRE soube a altura, e nenhum CSS a usava. A caixa nascia com 0, todo o
 * conteúdo abaixo dela ficava 65 px acima do lugar, e descia quando o
 * `barra.js` montava o cabeçalho. Com a cortina isso não aparecia — aparecia
 * como 1,8 s de tela preta, que é o mesmo defeito cobrado noutra moeda.
 *
 * 🔑 Reservar a caixa é o que torna a cortina dispensável: sem o pulo, a
 * primeira pintura já é a geometria final. Medido na home móvel: 26,2% da
 * dobra mudava entre 900 ms e o fim; com a caixa reservada, CLS 0,000. */
[data-oc-barra][data-oc-altura="65px"] { height: 65px; }
[data-oc-barra][data-oc-altura="64px"] { height: 64px; }
@keyframes oc-revela { to { opacity: 1; } }

:root[theme="light"] .oc-b {
  --ocb-tinta: #0B0B0C;
  --ocb-tinta-2: rgba(11, 11, 12, .74);
  --ocb-tinta-3: rgba(11, 11, 12, .56);
  --ocb-fundo: #FFFFFF;
  --ocb-superficie: #FFFFFF;
  --ocb-superficie-2: #F2F3F5;
  /* No claro o painel já é o ponto mais claro da tela: quem o separa do fundo
   * é a borda e a sombra, não o tom. Escurecer aqui seria a inversão do que
   * o escuro faz. */
  --ocb-menu: #FFFFFF;
  --ocb-menu-realce: rgba(11, 11, 12, .055);
  --ocb-fio: rgba(11, 11, 12, .12);
  --ocb-fio-forte: rgba(11, 11, 12, .24);
  --ocb-sombra: 0 20px 44px -16px rgba(11, 11, 12, .18), 0 2px 8px -3px rgba(11, 11, 12, .12);
  /* No claro o véu é branco: o vídeo da home é escuro na base e texto preto
   * precisa de fundo claro por baixo, não de mais preto. E quase opaco (0,92,
   * contra 0,66 do escuro): sobre um herói escuro, 0,72 de branco dava uma
   * faixa cinza-lama — legível, mas parecendo defeito. */
  --ocb-veu: rgba(255, 255, 255, .92);
}

/* ── piso próprio ─────────────────────────────────────────────────────────
 *
 * A barra é a MESMA em 861 páginas, e cada família de página traz a folha de
 * estilo de onde foi capturada — mais as nossas, mais a página de índice, que
 * tem regras próprias para `ul` e `li`. Sem um piso, a mesma barra sai
 * diferente conforme a vizinhança.
 *
 * 🔴 Medido em 24/08/2026: na página de índice das cópias, a lista do menu
 * herdou borda e raio das regras de `ul`/`li` daquela página — a barra apareceu
 * com uma caixa arredondada em volta dos itens, só ali.
 *
 * 🔑 Componente que roda em todo lugar precisa declarar o piso dele. Herdar
 * decoração da página é herdar decisões que ninguém tomou para esta barra.
 *
 * Tudo aqui é (0,1,1) de propósito: perde de qualquer regra própria da barra
 * (duas classes) e ganha do reset `[dir] div` da origem, que é a mesma coisa
 * pelo outro lado.
 */
.oc-b, .oc-b *, .oc-b *::before, .oc-b *::after { box-sizing: border-box; }

.oc-b div, .oc-b span, .oc-b ul, .oc-b li, .oc-b nav, .oc-b h3, .oc-b p,
.oc-b b, .oc-b i, .oc-b small, .oc-b kbd, .oc-b a, .oc-b button, .oc-b input {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  min-width: 0;
}

.oc-b svg { display: block; flex-shrink: 0; }

/* ── a barra ─────────────────────────────────────────────────────────────── */


/* 🔴 A faixa da barra de STATUS ficava descoberta. Vídeo do dono em
 * 30/08/2026: o relógio do sistema por cima do wordmark, a hora e o ícone de
 * bateria misturados ao `Deposit`, e a lista de mercados passando por trás da
 * hora enquanto rola. A página declara `viewport-fit=cover` (a barra de abas
 * precisa disso para alcançar o pé da tela), então o documento começa em y=0,
 * ATRÁS da status bar — e a barra, presa em `top: 0` com altura fixa, ficava
 * logo ABAIXO dela, deixando à mostra a faixa por onde o conteúdo passa.
 *
 * 🔑 Quem declara `cover` assume as quatro bordas. A barra cresce o tanto do
 * `inset` e se pinta até em cima: a faixa deixa de ser um vão e passa a ser
 * parte da barra. Fora do modo tela cheia o `inset` vale 0 e nada muda — é a
 * mesma conta que o `.oc-abas` já faz embaixo com `safe-area-inset-bottom`. */
.oc-b.oc-barra {
  position: sticky;
  top: 0;
  z-index: 999;
  height: calc(var(--ocb-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  color: var(--ocb-tinta);
  background: var(--ocb-fundo);
  border-bottom: 1px solid var(--ocb-fio);
  font-family: inherit;
  /* `contain: none` de propósito: os painéis saem da caixa. */
}

/* 🔴 O inset de cima tem UM dono, e é a barra acima. A origem também o
 * cobrava — `#__nuxt { padding-top: env(safe-area-inset-top) !important }`,
 * dentro de `@supports (-webkit-touch-callout: none)`, ou seja: só no iOS, e
 * só nos pacotes que trazem o `bxfe-component` do `base_nuxt` (home, mercados,
 * carteira, copy…; os terminais de spot e futuros não o têm). Vídeo do dono
 * em 30/08/2026 e reproduzido no WebKit com esse padding injetado: o `#__nuxt`
 * é o container que rola, e com padding em cima o cabeçalho sticky gruda na
 * borda de DENTRO do padding — a 62px, não a 0. A faixa da barra de status
 * ficava livre, o conteúdo rolava por ela (linhas da tabela por cima do
 * relógio), e com o padding da barra somado ao do container a linha do
 * logo descia para 124px. E era diferente de página para página: no
 * terminal, sem esse padding, tudo em 0 — ao trocar de tela o cabeçalho
 * pulava de lugar.
 *
 * 🔑 Padding no CONTAINER que rola não protege a faixa de cima: ele rola
 * junto com o conteúdo, e ainda empurra o ponto onde o sticky gruda. Quem
 * cobre a faixa é o elemento que fica parado — a barra, com padding próprio.
 * O do container sai; o de baixo fica, porque em página sem a barra de abas
 * (a árvore de desktop num telefone) é ele que mantém o fim do conteúdo
 * acima do indicador de home. `!important` porque o da origem é, e é a mesma
 * especificidade — o que decide é a ordem, e esta folha vem depois. */
[dir] #__nuxt { padding-top: 0 !important; }

/* Sobre mídia (a home põe o herói por baixo do cabeçalho): véu + desfoque em
 * vez de cor sólida. O desfoque não é enfeite — é o que transforma um quadro
 * de vídeo em campo uniforme, e sem ele nenhum valor de opacidade serve para
 * todos os quadros. */
.oc-b.oc-barra[data-oc-sobre]:not(.oc-rolou) {
  background: var(--ocb-veu);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border-bottom-color: transparent;
}

/* Rolou: sólida, com o fio de baixo. Vale nos dois modos. */
.oc-b.oc-barra.oc-rolou {
  background: var(--ocb-fundo);
  border-bottom-color: var(--ocb-fio);
}

.oc-b .oc-barra-linha {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ── marca ───────────────────────────────────────────────────────────────── */

.oc-b .oc-barra-marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  padding: 0 12px 0 0;
  color: var(--ocb-tinta);
  text-decoration: none;
}

.oc-b .oc-barra-marca svg {
  display: block;
  width: 112px;
  height: auto;
  fill: currentColor;
}

/* ── menu ────────────────────────────────────────────────────────────────── */

.oc-b .oc-barra-nav {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.oc-b .oc-barra-nav > ul {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oc-b .oc-barra-nav > ul > li {
  display: flex;
  align-items: stretch;
  position: relative;
}

.oc-b .oc-barra-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ocb-tinta-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 140ms ease-out;
}

.oc-b .oc-barra-item:hover,
.oc-b .oc-barra-item[aria-expanded="true"] { color: var(--ocb-tinta); }

/* Sobre mídia todo rótulo vai em tinta cheia: a secundária a 74% sobre o véu
 * cai para 3,4:1 no quadro mais claro. */
.oc-b.oc-barra[data-oc-sobre]:not(.oc-rolou) .oc-barra-item { color: var(--ocb-tinta); }

/* Página atual: fio da marca embaixo. É a única marcação de estado do menu —
 * o cabeçalho da origem não tinha nenhuma, e sem ela a barra não diz onde a
 * pessoa está. */
.oc-b .oc-barra-item[aria-current="page"] { color: var(--ocb-tinta); }
.oc-b .oc-barra-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--ocb-marca);
  border-radius: 2px 2px 0 0;
}

.oc-b .oc-barra-seta {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 160ms ease-out;
}

.oc-b .oc-barra-item[aria-expanded="true"] .oc-barra-seta { transform: rotate(180deg); }

/* A chama ao lado de Bots. Vale no topo e na célula da gaveta.
 *
 * `line-height: 0` porque um `<span>` em torno de um `<svg>` herda a entrelinha
 * de 1 do item e cresce 3px além do desenho — o suficiente para empurrar o
 * rótulo e desalinhar a linha inteira do menu.
 *
 * `margin-left: 1px` e não o `gap: 5px` do item: 5px afastam a chama tanto do
 * nome quanto do vizinho seguinte, e ela passa a parecer um item solto entre
 * Bots e Copy trading em vez de um selo DE Bots. */
.oc-b .oc-barra-fogo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 1px;
  line-height: 0;
  transform: translateY(-.5px);
}

/* Na célula a chama mora DENTRO de `.oc-barra-nome` (inline-flex, `gap: 6px`)
 * — o `celula()` a pendura no nome, não no bloco, para ela não descer ao meio
 * das duas linhas quando há descrição. O gap do nome já é o respiro que o
 * topo tem (5px do item + 1px); o `1px` da regra geral em cima dele daria 7px.
 *
 * 🔴 Isto era `margin-left: -5px`, de quando a chama entrava como terceiro
 * item de flex da célula e herdava o `gap: 10px` que separa o ÍCONE do NOME.
 * Com a chama dentro do nome, -5px sobre um gap de 6px deixava 1px: medido em
 * 14/09/2026 na célula `Trading bots`, a chama encostava no último "o". */
.oc-b .oc-barra-cel .oc-barra-fogo { margin-left: 0; }

/* Respiro lento, e só ele: chama que pisca rápido no cabeçalho compete com o
 * conteúdo da página o tempo todo. Escala e opacidade, nunca posição — mexer
 * no `top` reflui a barra a cada quadro. */
@keyframes oc-barra-fogo-respira {
  0%, 100% { transform: translateY(-.5px) scale(1); opacity: 1; }
  50%      { transform: translateY(-.5px) scale(1.09); opacity: .88; }
}

@media (prefers-reduced-motion: no-preference) {
  .oc-b .oc-barra-fogo { animation: oc-barra-fogo-respira 2.6s ease-in-out infinite; }
}

/* ── painéis ─────────────────────────────────────────────────────────────── */

.oc-b .oc-barra-painel {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  /* 232px cabia só o nome. Com a descrição embaixo, uma frase de seis palavras
     quebraria em três linhas e a lista viraria um parágrafo — o painel cresce
     junto com o que passou a caber nele (dono, 29/08/2026). */
  min-width: 232px;
  padding: 8px;
  box-sizing: border-box;
  background: var(--ocb-menu);
  border: 1px solid var(--ocb-fio);
  border-radius: 14px;
  box-shadow: var(--ocb-sombra);
  opacity: 0;
  visibility: hidden;
  /* Desce a partir do TOPO, que é onde o botão está: um painel que cresce do
     meio não sai de lugar nenhum. */
  transform-origin: top center;
  transform: translateY(-8px) scale(.985);
  transition: opacity 160ms ease-out,
              transform 220ms var(--ocb-mola),
              visibility 160ms;
}

.oc-barra-painel.oc-aberto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ── a entrada das linhas ────────────────────────────────────────────────
 *
 * Cada linha sobe de um borrão leve, uma depois da outra. Os números são do
 * `blur-out-up` e do `animated-staggered-dropdown` (21st.dev): borrão de 6px,
 * deslocamento de 10px, `cubic-bezier(.22, 1, .36, 1)` e 28 ms entre uma e
 * outra.
 *
 * 🔑 O painel abre em 220 ms e as linhas em 380 ms: a moldura chega primeiro
 * e o conteúdo assenta dentro dela. Se as duas durassem o mesmo, o efeito
 * viraria um bloco só deslizando — que é o que já havia.
 *
 * A duração da fonte (0,56 s) é de TEXTO grande, parado numa página. Num
 * menu que abre ao passar o mouse, meio segundo é atraso: 380 ms mantém a
 * textura e não faz esperar.
 *
 * `nth-child` e não uma variável no JS: no cartão de três colunas as células
 * são filhas de cada GRUPO, então cada coluna começa do zero e as três
 * cascatam juntas. Um índice global faria a terceira coluna chegar quando a
 * pessoa já leu a primeira. */
@keyframes oc-cel-entra {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

.oc-b .oc-barra-painel.oc-aberto .oc-barra-cel,
.oc-b .oc-barra-painel.oc-aberto .oc-barra-grupo > h3 {
  animation: oc-cel-entra 380ms var(--ocb-mola) both;
}

.oc-b .oc-barra-painel.oc-aberto :nth-child(1 of .oc-barra-cel) { animation-delay: 0ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(2 of .oc-barra-cel) { animation-delay: 28ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(3 of .oc-barra-cel) { animation-delay: 56ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(4 of .oc-barra-cel) { animation-delay: 84ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(5 of .oc-barra-cel) { animation-delay: 112ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(6 of .oc-barra-cel) { animation-delay: 140ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(7 of .oc-barra-cel) { animation-delay: 168ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(8 of .oc-barra-cel) { animation-delay: 196ms; }
.oc-b .oc-barra-painel.oc-aberto :nth-child(n+9 of .oc-barra-cel) { animation-delay: 224ms; }

/* 🔑 Movimento é decoração aqui: sem ele o menu continua abrindo, aparecendo
 * e fechando igual. A fonte respeita `prefers-reduced-motion` e esta também. */
@media (prefers-reduced-motion: reduce) {
  .oc-b .oc-barra-painel { transition: opacity 100ms linear, visibility 100ms; transform: none; }
  .oc-b .oc-barra-painel.oc-aberto { transform: none; }
  .oc-b .oc-barra-painel.oc-aberto .oc-barra-cel,
  .oc-b .oc-barra-painel.oc-aberto .oc-barra-grupo > h3 { animation: none; }
}

.oc-b .oc-barra-painel.oc-a-direita { left: auto; right: 0; }

/* Cartão do "Mais": três colunas com título de grupo. */
.oc-b .oc-barra-painel.oc-cartao {
  display: grid;
  /* 176px: ícone + "Previsão" + selo "EM BREVE" cabem numa linha só
     (medido: 150 deixava o selo sem lugar). O painel é max-content e
     cresce junto com as colunas. */
  grid-template-columns: repeat(3, minmax(176px, 1fr));
  gap: 4px 10px;
  min-width: 600px;
  padding: 12px;
}

.oc-b .oc-barra-grupo { min-width: 0; }

.oc-b .oc-barra-grupo > h3 {
  margin: 6px 10px 6px;
  color: var(--ocb-tinta-3);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.oc-b .oc-barra-cel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ocb-tinta-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease-out, color 130ms ease-out;
}

/* O realce sobe a partir do painel escuro. `--ocb-superficie-2` era mais claro
 * que o painel INTEIRO e a linha sob o mouse saltava como um botão — num menu
 * o realce serve para localizar o dedo, não para chamar. */
.oc-b .oc-barra-cel:hover {
  background: var(--ocb-menu-realce);
  color: var(--ocb-tinta);
}

.oc-b .oc-barra-cel > i {
  display: flex;
  flex-shrink: 0;
  color: var(--ocb-tinta-3);
}

.oc-b .oc-barra-cel:hover > i { color: var(--ocb-marca); }
.oc-b .oc-barra-cel[aria-current="page"] { color: var(--ocb-tinta); }
.oc-b .oc-barra-cel[aria-current="page"] > i { color: var(--ocb-marca); }

/* Item de roteiro: rótulo, selo, e nenhum destino. Não é `<a>`, então não
 * recebe o cursor de link — quem lê "em breve" não é convidado a clicar. */
.oc-b .oc-barra-cel.oc-em-breve { cursor: default; color: var(--ocb-tinta-3); }
.oc-b .oc-barra-cel.oc-em-breve:hover { background: none; color: var(--ocb-tinta-3); }
.oc-b .oc-barra-cel.oc-em-breve:hover > i { color: var(--ocb-tinta-3); }

.oc-b .oc-barra-selo {
  margin-left: auto;
  /* 🔴 13/09/2026: era `flex: 0 1 auto` (o padrão), e numa célula de 148px o
   * flex encolhia o selo para 28px de caixa com 58px de texto — "EM BREV",
   * medido no painel Mais ao vivo. Quem encolhe é o bloco de texto
   * (`.oc-barra-txt`, `min-width: 0`); o selo é uma palavra e não cede. */
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid var(--ocb-marca);
  border-radius: 4px;
  color: var(--ocb-marca);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.oc-b .oc-barra-fio {
  height: 1px;
  margin: 6px 8px;
  background: var(--ocb-fio);
}

/* ── lado direito ────────────────────────────────────────────────────────── */

.oc-b .oc-barra-dir {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.oc-b .oc-barra-sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--ocb-fio-forte);
  flex-shrink: 0;
}

/* Botão de ícone: alvo de 36px, ícone de 18px. */
.oc-b .oc-barra-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ocb-tinta-2);
  cursor: pointer;
  transition: background-color 130ms ease-out, color 130ms ease-out;
}

.oc-b .oc-barra-icone:hover,
.oc-b .oc-barra-icone[aria-expanded="true"] {
  background: var(--ocb-superficie-2);
  color: var(--ocb-tinta);
}

.oc-b.oc-barra[data-oc-sobre]:not(.oc-rolou) .oc-barra-icone { color: var(--ocb-tinta); }
.oc-b.oc-barra[data-oc-sobre]:not(.oc-rolou) .oc-barra-icone:hover {
  background: rgba(255, 255, 255, .14);
}
:root[theme="light"] .oc-b.oc-barra[data-oc-sobre]:not(.oc-rolou) .oc-barra-icone:hover {
  background: rgba(11, 11, 12, .08);
}

.oc-b .oc-barra-icone svg { display: block; }

/* O tema troca o ícone; as duas peças ocupam o mesmo lugar e uma delas está
 * sempre fora, para a troca não empurrar a barra. */
.oc-b .oc-barra-tema > span {
  position: absolute;
  display: flex;
  transition: opacity 240ms ease-out, transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.oc-b .oc-barra-tema > .oc-fora {
  opacity: 0;
  transform: scale(.55) rotate(28deg);
  pointer-events: none;
}

/* ── botões de ação ──────────────────────────────────────────────────────── */

/* 30/08/2026: Depositar, Entrar, Criar conta e a pastilha do saldo são o
 * botão padrão do site (`botao.css`, corte diagonal). Forma e estado vêm de
 * lá; aqui a letra e as CORES DO TEMA — a barra tem tema claro, e o preto
 * fixo do `botao.css` seria um botão preto sobre fundo branco. A classe
 * dupla (`.oc-bt.oc-bt-escuro`) é para vencer a folha do botão, que carrega
 * DEPOIS desta. */
.oc-b .oc-barra-btn { font-size: 13.5px; }
.oc-b .oc-barra-btn .oc-bt-rot { gap: 6px; }
.oc-b .oc-bt.oc-bt-escuro { --bt-fundo: var(--ocb-superficie); --bt-tinta: var(--ocb-tinta); }
.oc-b .oc-bt.oc-bt-escuro:hover { --bt-tinta: var(--ocb-marca); }
.oc-b .oc-bt.oc-bt-marca { --bt-fundo: var(--ocb-marca); --bt-tinta: var(--ocb-marca-tinta); }

/* ── a cadeia do topo (30/08/2026) ──────────────────────────────────────
 * Desenho do dono: Depositar, saldo e conta numa faixa só — a `.oc-bt-cadeia`
 * do `botao.css`. Aqui só a letra, os ícones e as folgas medidas no desenho
 * (tela de 440px: faixa 38px, cartão 21px, pessoa 24px; no telefone tudo a
 * 80%, no bloco de ≤1023px abaixo). A letra: o
 * desenho mede 12,5px da OFFCODE Sans — a 13px "US$ 180.85" saía 5% mais
 * largo e a faixa não cabia na tela ao lado do logo. */
.oc-b .oc-barra-cadeia .oc-bt { font-size: 12.5px; }

/* ── saldo ───────────────────────────────────────────────────────────────── */

/* Vive numa pastilha com fundo PRÓPRIO.
 *
 * 🔴 O defeito relatado: sobre o vídeo da home, "~US$ 323,18" a 62% de
 * opacidade era ilegível — e este é o número que a pessoa usa para decidir um
 * saque. 🔑 Número que decide dinheiro não pode depender do quadro do vídeo
 * que está passando atrás. A pastilha traz o fundo consigo.
 */
.oc-b .oc-barra-saldo {
  --cadeia-pad-esq: 15px;
  --cadeia-pad-dir: 14px;
  font-size: 13px;
  /* Algarismo de largura fixa: numa coluna de valores, a vírgula fora de
   * lugar é o que faz alguém ler 7,203 como 72,03. */
  font-variant-numeric: tabular-nums;
}
.oc-b .oc-barra-saldo .oc-bt-rot { gap: 8px; }

.oc-b .oc-barra-saldo i {
  display: flex;
  color: var(--ocb-tinta-3);
  flex-shrink: 0;
}
.oc-b .oc-barra-saldo i svg { width: 21px; height: 21px; }
/* Tema claro: a superfície é branca como o fundo, e o segmento do meio da
 * cadeia sumiria entre dois laranjas. O mesmo cinza do Sacar da cabeça. */
:root[theme="light"] .oc-b .oc-barra-saldo { --bt-fundo: var(--ocb-superficie-2); }

/* Enquanto a leitura não voltou: barra de carregamento, não número.
 * 🔑 Zero é um valor; "ainda não sei" não é zero. */
.oc-b .oc-barra-saldo[data-oc-carregando] b {
  display: block;
  width: 68px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ocb-fio) 0%,
                              var(--ocb-fio-forte) 50%, var(--ocb-fio) 100%);
  background-size: 200% 100%;
  animation: oc-barra-brilho 1.4s linear infinite;
}

@keyframes oc-barra-brilho {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* Falhou: o número não aparece, e a pastilha diz que não sabe. */
.oc-b .oc-barra-saldo[data-oc-falhou] { color: var(--ocb-tinta-3); }

/* ── conta ───────────────────────────────────────────────────────────────── */

.oc-b .oc-barra-conta { position: relative; display: flex; align-items: center; }

/* 30/08/2026: a conta é o ÚLTIMO segmento da cadeia (`botao.css`) — laranja,
 * emenda diagonal à esquerda, ponta direita reta. A pessoa vai desenhada
 * direto sobre o laranja, sem o disco de antes: é assim no desenho do dono.
 * Forma, fundo e tinta vêm do `.oc-bt.oc-bt-marca`; aqui só as medidas.
 *
 * 🔴 O chevron é um span também, e a primeira versão deste botão pintava
 * TODO `<span>` filho — saiu com um disco laranja em volta da seta, como se
 * fossem dois avatares. `:first-child` é o que separa a inicial do resto. */
.oc-b .oc-barra-avatar {
  --cadeia-pad-esq: 10.5px;
  --cadeia-pad-dir: 10.5px;
}
.oc-b .oc-barra-avatar .oc-bt-rot { gap: 2.5px; }
.oc-b .oc-barra-avatar .oc-bt-rot > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.oc-b .oc-barra-avatar .oc-bt-rot > span:first-child svg { width: 24px; height: 24px; }
/* Só traço: o ícone traz a cabeça preenchida (era para o disco laranja de
 * antes); sobre o laranja da cadeia o desenho do dono é contorno. */
.oc-b .oc-barra-avatar .oc-bt-rot > span:first-child svg * { fill: none; }
.oc-b .oc-barra-avatar[aria-expanded="true"] { filter: brightness(.9); }
.oc-b .oc-barra-avatar[aria-expanded="true"] .oc-barra-seta { transform: rotate(180deg); }

.oc-b .oc-barra-conta .oc-barra-painel { min-width: 224px; top: calc(100% + 2px); }

.oc-b .oc-barra-sair { color: #FF5B67; }
.oc-b .oc-barra-sair:hover { background: rgba(255, 91, 103, .12); color: #FF5B67; }
.oc-b .oc-barra-sair:hover > i { color: #FF5B67; }
.oc-b .oc-barra-sair > i { color: #FF5B67; }

/* ── a cabeça do menu de conta ───────────────────────────────────────────
 *
 * O menu deixou de ser uma lista de destinos: em cima o número, as duas
 * ações e a onda; embaixo as contas, cada uma com o próprio valor. É a
 * carteira resumida (dono, 28/08/2026).
 *
 * 🔑 Duas camadas que precisam PARECER duas: a cabeça é imagem, a lista é
 * fundo. Por isso a lista é `--ocb-menu` (quase preto) e a cabeça carrega a
 * onda — escurecer a de baixo faz a de cima subir sem clarear nada. */
.oc-b .oc-barra-conta .oc-barra-painel.oc-conta-larga {
  min-width: 320px;
  padding: 0;
  overflow: hidden;
}

.oc-b .oc-cabeca {
  position: relative;
  padding: 18px 16px 16px;
  isolation: isolate;
}

/* 🔴 Com `background-size` acima de 100% o recorte cai num canto escuro e o
 * arco fica de fora — a onda virava um risco no alto à direita. `cover`
 * mostra a LARGURA inteira, e é atravessando a largura que o arco existe.
 *
 * Intensidade C, escolhida pelo dono entre três: a imagem manda e o véu só
 * protege o texto. Ele escurece de cima para baixo porque o texto está em
 * cima e a malha de pontos, embaixo, não disputa com nada. */
.oc-b .oc-cabeca::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 2, 2, .30) 0%, rgba(2, 2, 2, .06) 42%,
                    rgba(2, 2, 2, .48) 100%),
    url('/_local/img/menu-conta-fundo.webp') center 64% / cover no-repeat;
}

/* No claro a onda escura viraria um bloco preto no meio de um painel branco.
   Ela é do tema escuro; no claro fica a superfície lisa. */
:root[theme="light"] .oc-b .oc-cabeca::before { display: none; }
:root[theme="light"] .oc-b .oc-cabeca { border-bottom: 1px solid var(--ocb-fio); }

.oc-b .oc-cabeca-rot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ocb-tinta-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.oc-b .oc-cabeca-olho {
  display: inline-flex;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}

[dir] .oc-b .oc-cabeca-olho { background: none; border: 0; padding: 0; }
.oc-b .oc-cabeca-olho:hover { color: var(--ocb-tinta-2); }
.oc-b .oc-cabeca-olho:focus-visible { outline: 2px solid var(--ocb-marca); outline-offset: 3px; }

/* O número, na mesma família monoespaçada do saldo da carteira: os dois
   dizem a mesma coisa e não podem parecer duas medidas diferentes. */
.oc-b .oc-cabeca-num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -1.2px;
}

[dir] .oc-b .oc-cabeca-num { margin-top: 6px; }

.oc-b .oc-cabeca-cifrao { color: var(--ocb-tinta-3); font-size: 17px; }
.oc-b .oc-cabeca-int { color: var(--ocb-tinta); font-size: 27px; font-weight: 500; }
.oc-b .oc-cabeca-cent { color: var(--ocb-tinta-3); font-size: 17px; }

.oc-b .oc-cabeca-var {
  display: inline-block;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[dir] .oc-b .oc-cabeca-var { padding: 4px 8px; margin-top: 9px; }
.oc-b .oc-cabeca-var.oc-sobe { background: rgba(63, 166, 106, .16); color: #4cb37b; }
.oc-b .oc-cabeca-var.oc-cai { background: rgba(229, 83, 75, .16); color: #e5675f; }

.oc-b .oc-cabeca-acoes { display: flex; gap: 8px; }
[dir] .oc-b .oc-cabeca-acoes { margin-top: 14px; }

.oc-b .oc-cabeca-acao {
  flex: 1 1 0;
  border-radius: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

[dir] .oc-b .oc-cabeca-acao { padding: 9px 10px; border: 1px solid transparent; }

/* 🔑 Uma ação primária por superfície: com as duas laranja, a escolha some e
   o menu vira dois botões iguais. */
.oc-b .oc-cabeca-acao.oc-cheia { background: var(--ocb-marca); color: var(--ocb-marca-tinta); }
.oc-b .oc-cabeca-acao.oc-cheia:hover { background: var(--ocb-marca-hover); }

[dir] .oc-b .oc-cabeca-acao.oc-fio {
  background: rgba(255, 255, 255, .08);
  border-color: var(--ocb-fio-forte);
}
.oc-b .oc-cabeca-acao.oc-fio { color: var(--ocb-tinta); }
[dir] .oc-b .oc-cabeca-acao.oc-fio:hover { background: rgba(255, 255, 255, .14); }
:root[theme="light"] .oc-b .oc-cabeca-acao.oc-fio { background: var(--ocb-superficie-2); }

.oc-b .oc-cabeca-acao:focus-visible { outline: 2px solid var(--ocb-marca); outline-offset: 2px; }

/* A cabeça entra com a mesma curva das linhas. */
.oc-b .oc-barra-painel.oc-aberto .oc-cabeca {
  animation: oc-cel-entra 380ms var(--ocb-mola) both;
}

/* ── o corpo: as contas ─────────────────────────────────────────────────── */

.oc-b .oc-conta-corpo { padding: 6px; background: var(--ocb-menu); }
[dir] .oc-b .oc-conta-corpo { border-top: 1px solid var(--ocb-fio); }

/* Cada conta traz o próprio número à direita: o menu deixa de ser lista de
   destinos e passa a ser a carteira resumida. */
.oc-b .oc-barra-cel .oc-cel-val {
  margin-left: auto;
  color: var(--ocb-tinta-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oc-b .oc-barra-cel:hover .oc-cel-val { color: var(--ocb-tinta); }

/* ── idioma ──────────────────────────────────────────────────────────────── */

.oc-b .oc-barra-idioma { position: relative; display: flex; align-items: center; }
.oc-b .oc-barra-idioma .oc-barra-painel { min-width: 188px; top: calc(100% + 2px); }
.oc-b .oc-barra-idioma .oc-barra-cel[aria-current="true"] { color: var(--ocb-tinta); }
.oc-b .oc-barra-idioma .oc-barra-cel[aria-current="true"] > i { color: var(--ocb-marca); }

/* ── gaveta (telefone) ───────────────────────────────────────────────────── */

.oc-b .oc-barra-gaveta-abre { display: none; }

/* 🔴 Fechada, a gaveta é uma camada FIXA de tela inteira, com z-index acima
 * da barra de abas (1000 × 900), `visibility: hidden` — e `pointer-events`
 * no padrão, `auto`. Nos motores de mesa `visibility: hidden` basta: o
 * hit-test pula o que não se vê. No iOS a rolagem por toque é decidida fora
 * do motor, na árvore de camadas do processo de UI, e a caixa da gaveta é um
 * scroller de 2.268px (`overflow-y: auto`) vivo o tempo todo. O dono
 * descreveu exatamente isso em 30/08/2026: "travada a tela como se tivesse
 * sobrepondo algo", só no aparelho.
 *
 * 🔑 Fechada, a gaveta não pode ser alvo de NADA: `pointer-events: none` na
 * camada e `overflow: hidden` na caixa. Aberta, os dois voltam. Não há
 * transição a perder — as duas propriedades trocam no mesmo instante em que
 * a classe entra. */
.oc-b.oc-barra-gaveta {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease-out, visibility 190ms;
}

.oc-b.oc-barra-gaveta.oc-aberto { visibility: visible; opacity: 1; pointer-events: auto; }

.oc-b .oc-barra-gaveta-veu {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .62);
}

.oc-b .oc-barra-gaveta-caixa {
  position: relative;
  width: min(320px, 86vw);
  height: 100%;
  padding: 12px;
  /* No app da tela inicial do iPhone a gaveta (fixed, inset 0) começa DEBAIXO
   * do relógio: o wordmark e o X nasciam atrás da barra de status (foto do
   * dono, 06/09/2026). O cabeçalho fixo já faz esta conta; a gaveta não fazia. */
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  /* Fechada não é scroller — ver o comentário da gaveta acima. */
  overflow: hidden;
  background: var(--ocb-fundo);
  border-right: 1px solid var(--ocb-fio);
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
}

.oc-b.oc-barra-gaveta.oc-aberto .oc-barra-gaveta-caixa { transform: translateX(0); overflow-y: auto; }

.oc-b .oc-barra-gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: 8px;
}

.oc-b.oc-barra-gaveta h3 {
  margin: 14px 10px 4px;
  color: var(--ocb-tinta-3);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.oc-b .oc-barra-gaveta-pe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ocb-fio);
}

.oc-b .oc-barra-gaveta-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 6px;
}

/* Na gaveta o botão ocupa metade da largura: alvo de toque grande, e os dois
 * do mesmo tamanho não sugerem que um vale mais que o outro — a cor já diz. */
.oc-b .oc-barra-gaveta-acoes .oc-barra-btn {
  flex: 1;
  --h: 36px;
  --r: 10px;
  --raio: 10px;
}

/* ── gaveta COMPACTA (30/08/2026) ─────────────────────────────────────────
 * Linhas de 40px, grupos em sanfona fechada, células internas de 36px sem
 * descrição, seções pequenas. Cabe numa tela sem rolar. */
.oc-b.oc-barra-gaveta .oc-barra-cel {
  min-height: 40px;
  padding: 0 10px;
  font-size: 14px;
  border-radius: 8px;
}
.oc-b.oc-barra-gaveta .oc-barra-desc { display: none; }
.oc-b .oc-barra-sanf { display: flex; flex-direction: column; }
.oc-b .oc-barra-sanf-bt { width: 100%; }
.oc-b .oc-barra-sanf-bt .oc-barra-txt { flex: 1 1 auto; min-width: 0; }
.oc-b .oc-barra-sanf-bt .oc-barra-seta {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ocb-tinta-3);
  /* O glifo aponta para a direita; fechado aponta para BAIXO, aberto para cima. */
  transform: rotate(90deg);
  transition: transform 180ms ease;
}
.oc-b .oc-barra-sanf-bt[aria-expanded="true"] .oc-barra-seta { transform: rotate(-90deg); }
.oc-b .oc-barra-sanf-bt[aria-expanded="true"],
.oc-b .oc-barra-sanf-bt.oc-atual { color: var(--ocb-tinta); }
.oc-b .oc-barra-sanf-corpo { padding: 0 0 4px; }
.oc-b .oc-barra-sanf-corpo[hidden] { display: none; }
.oc-b.oc-barra-gaveta .oc-barra-sanf-corpo .oc-barra-cel {
  min-height: 36px;
  padding-left: 38px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ocb-tinta-2);
}
.oc-b.oc-barra-gaveta .oc-barra-sanf-corpo .oc-barra-cel > i svg { width: 16px; height: 16px; }
.oc-b.oc-barra-gaveta .oc-barra-sanf-corpo .oc-barra-secao {
  margin: 0;
  padding: 6px 10px 2px 38px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.oc-b.oc-barra-gaveta .oc-barra-gaveta-pe { margin-top: 10px; padding-top: 8px; gap: 2px; }
.oc-b.oc-barra-gaveta .oc-barra-gaveta-topo { margin-bottom: 4px; }

/* ── busca ───────────────────────────────────────────────────────────────── */

.oc-b .oc-barra-busca { position: relative; display: flex; align-items: center; }

.oc-b .oc-barra-busca-painel {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  padding: 10px;
  box-sizing: border-box;
  background: var(--ocb-menu);
  border: 1px solid var(--ocb-fio);
  border-radius: 14px;
  box-shadow: var(--ocb-sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 150ms ease-out,
              transform 190ms cubic-bezier(.16, 1, .3, 1),
              visibility 150ms;
}

.oc-barra-busca-painel.oc-aberto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.oc-b .oc-barra-busca-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--ocb-fio-forte);
  border-radius: 10px;
  background: var(--ocb-fundo);
}

.oc-b .oc-barra-busca-campo > i { display: flex; color: var(--ocb-tinta-3); }

.oc-b .oc-barra-busca-campo > input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  color: var(--ocb-tinta);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.oc-b .oc-barra-busca-campo > input::placeholder { color: var(--ocb-tinta-3); }

.oc-b .oc-barra-busca-campo > kbd {
  padding: 2px 6px;
  border: 1px solid var(--ocb-fio);
  border-radius: 5px;
  color: var(--ocb-tinta-3);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
}

.oc-b .oc-barra-busca-lista {
  max-height: 320px;
  margin: 8px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: var(--ocb-fio-forte) transparent;
  scrollbar-width: thin;
}

.oc-b .oc-barra-busca-lista::-webkit-scrollbar { width: 8px; }
.oc-b .oc-barra-busca-lista::-webkit-scrollbar-thumb {
  background: var(--ocb-fio-forte);
  border-radius: 4px;
}
.oc-b .oc-barra-busca-lista::-webkit-scrollbar-track { background: none; }

.oc-b .oc-barra-busca-lista .oc-barra-cel[data-oc-alvo] {
  background: var(--ocb-superficie-2);
  color: var(--ocb-tinta);
}

.oc-b .oc-barra-busca-par {
  margin-left: auto;
  color: var(--ocb-tinta-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.oc-b .oc-barra-busca-nada {
  padding: 16px 10px;
  color: var(--ocb-tinta-3);
  font-size: 13px;
  line-height: 1.5;
}

/* ── troca de tema ────────────────────────────────────────────────────────
 *
 * A máscara circular só aparece se o cruzamento padrão sair do caminho: com o
 * `mix-blend-mode: plus-lighter` que o navegador aplica, os dois quadros se
 * somam e o recorte fica invisível. O quadro novo entra por cima, inteiro, e
 * é o `clipPath` do `barra-tema.js` que o revela.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 999; }

/* ── superfícies do navegador ────────────────────────────────────────────── */

.oc-b ::selection {
  background: rgba(247, 147, 26, .3);
  color: var(--ocb-tinta);
}

.oc-b :focus-visible {
  outline: 2px solid var(--ocb-marca);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── telefone e tablet ───────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .oc-b .oc-barra-nav { display: none; }
  .oc-b .oc-barra-busca { display: none; }
  .oc-b .oc-barra-idioma { display: none; }
  .oc-b .oc-barra-tema { display: none; }
  .oc-b .oc-barra-sep { display: none; }
  .oc-b .oc-barra-gaveta-abre { display: inline-flex; }
  /* Sem o padding direito de 12px: ele separava o logo do menu, que aqui
   * não existe. Cada px conta — o ≡ é o item que o flex esmaga quando a
   * linha não cabe (medido: ele ficava com 0px de largura no telefone). */
  .oc-b .oc-barra-marca { padding: 0 0 0 4px; }
  /* 8px à direita: a faixa termina onde o desenho do dono termina. */
  .oc-b .oc-barra-linha { padding: 0 8px 0 12px; gap: 6px; }
  /* A cadeia 20% menor no telefone (dono, 30/08/2026, depois de ver a 1:1
   * no aparelho): TUDO em escala — altura, letra, ícones, folgas, respiro e
   * cantos — para a proporção do desenho ficar. O desktop fica no desenho.
   * A 80% ela cabe em 393 e 375 ao lado do logo cheio; em 360 (Android) só
   * o ícone do cartão sai, abaixo. */
  /* Classe dupla: `[dir] .oc-bt-cadeia` do botao.css (0,2,0) carrega DEPOIS
   * e ganharia o empate — medido: a altura ficava em 38. */
  .oc-b .oc-bt-cadeia.oc-barra-cadeia { --cadeia-h: 30px; --cadeia-raio: 3px; --cadeia-emenda: 2.5px; }
  .oc-b .oc-barra-cadeia .oc-bt { font-size: 10px; }
  .oc-b .oc-barra-cadeia .oc-bt-cadeia-ini { --cadeia-pad-esq: 13px; --cadeia-pad-dir: 19px; }
  .oc-b .oc-barra-saldo { --cadeia-pad-esq: 12px; --cadeia-pad-dir: 11px; }
  .oc-b .oc-barra-saldo .oc-bt-rot { gap: 6px; }
  .oc-b .oc-barra-saldo i svg { width: 17px; height: 17px; }
  .oc-b .oc-barra-saldo[data-oc-carregando] b { width: 54px; height: 8px; }
  .oc-b .oc-barra-avatar { --cadeia-pad-esq: 8.5px; --cadeia-pad-dir: 8.5px; }
  .oc-b .oc-barra-avatar .oc-bt-rot { gap: 2px; }
  .oc-b .oc-barra-avatar .oc-bt-rot > span:first-child,
  .oc-b .oc-barra-avatar .oc-bt-rot > span:first-child svg { width: 19px; height: 19px; }
  .oc-b .oc-barra-avatar .oc-barra-seta,
  .oc-b .oc-barra-avatar .oc-barra-seta svg { width: 8px; height: 8px; }
  /* O saldo FICA na barra (desenho do dono, 30/08/2026): é o segmento do
   * meio da cadeia. A regra que o escondia aqui já não valia — o `botao.css`
   * carrega depois e o `display` dele ganhava o empate —, e o que o dono viu
   * no telefone foi o saldo visível. Em 393px a cadeia encolhe (abaixo).
   *
   * 🔴 Aqui havia `.oc-barra-conta-topo { display: block }`, que ligava um
   * topo que só existia no telefone. Ele não existe mais: a cabeça nova
   * mostra o número em toda largura, e uma regra que liga elemento morto é
   * uma regra que ninguém vai apagar depois. */
  /* 320px cabe em 375, mas não em 320. `min()` é o que impede o painel de
   * sair pela borda no aparelho mais estreito que ainda existe. */
  .oc-b .oc-barra-conta .oc-barra-painel.oc-conta-larga {
    min-width: 0;
    width: min(320px, calc(100vw - 24px));
  }
}

@media (max-width: 420px) {
  .oc-b .oc-barra-marca svg { width: 92px; }
  /* Entrar e Criar conta. O Depositar da cadeia tem a altura DA cadeia. */
  .oc-b .oc-bt.oc-barra-btn:not(.oc-bt-cadeia-ini) { --h: 32px; --r: 9px; --raio: 8px; font-size: 13px; }
  .oc-b .oc-barra-dir { gap: 4px; }
}

/* Android de 360px: a 80% a faixa mede ~221px e o espaço ao lado do logo é
 * 220. Sai o ícone do cartão; o NÚMERO fica inteiro — é ele que decide
 * dinheiro. */
@media (max-width: 380px) {
  .oc-b .oc-barra-marca svg { width: 80px; }
}
@media (max-width: 365px) {
  .oc-b .oc-barra-saldo i { display: none; }
}

@media (min-width: 1024px) {
  .oc-b.oc-barra-gaveta { display: none; }
}

/* Quem pediu menos movimento recebe o estado final, não a animação. */
@media (prefers-reduced-motion: reduce) {
  .oc-b * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ── item com descrição ───────────────────────────────────────────────────
 *
 * Molde do menu da BingX: ícone à esquerda, nome em branco e uma linha de
 * descrição em cinza embaixo. O item fica MAIOR, não menor — é o que o dono
 * pediu — e o painel se alarga para a frase caber numa linha só.
 *
 * 🔑 `align-items: flex-start` só quando há descrição: com duas linhas de
 * texto, centralizar joga o ícone para o meio do bloco, longe do nome que ele
 * nomeia. */
.oc-b .oc-barra-painel:has(.oc-com-desc) { min-width: 328px; }

.oc-b .oc-barra-cel.oc-com-desc {
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
}

.oc-b .oc-barra-cel.oc-com-desc > i { margin-top: 1px; }

.oc-b .oc-barra-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.oc-b .oc-barra-nome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.oc-b .oc-barra-desc {
  color: var(--ocb-tinta-3, #8b8f9a);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

/* No item aceso a descrição acompanha o nome, senão ela some contra o realce. */
.oc-b .oc-barra-cel:hover .oc-barra-desc,
.oc-b .oc-barra-cel[aria-current="page"] .oc-barra-desc { color: var(--ocb-tinta-2); }

/* O selo `Soon` volta para a linha do NOME: pendurado no fim da célula ele
   ficava alinhado com a descrição e parecia legenda dela. */
.oc-b .oc-barra-cel.oc-com-desc .oc-barra-selo { align-self: flex-start; margin-top: 1px; }

/* ── a seta do item com painel lateral ──────────────────────────────────── */
.oc-b .oc-barra-cel.oc-tem-sub { position: relative; padding-right: 26px; }

.oc-b .oc-barra-seta-sub {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--ocb-tinta-3, #8b8f9a);
  transition: transform .16s var(--ocb-mola, ease), color .16s;
}
.oc-b .oc-barra-cel.oc-tem-sub:hover .oc-barra-seta-sub {
  color: var(--ocb-tinta-1, #fff);
  transform: translateY(-50%) translateX(2px);
}

/* ── as duas colunas do cartão ─────────────────────────────────────────
 *
 * Medidas tiradas da captura da própria BingX (`pacote-04c28bc3ae25.css`,
 * escopo `data-v-49768441`), não inventadas: célula de 50px com `padding
 * 12px 24px` e `gap 15px`, nome em 14px/500, descrição em 13px com
 * `line-height 14px`, título de seção em 13px com `padding 8px 16px`, e o
 * cartão com `padding: 16px 8px`.
 *
 * 🔴 A versão anterior era um painel FLUTUANTE preso ao body, posicionado à
 * mão ao lado do cartão — tinha de acertar posição, borda e sombra para
 * FINGIR que era o mesmo objeto. Sendo a coluna, ele é. */
.oc-b .oc-barra-painel.oc-duas {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 16px 8px;
  min-width: 620px;
}
.oc-b .oc-barra-col { display: flex; flex-direction: column; width: 300px; flex: none; }

.oc-b .oc-barra-lado {
  display: flex;
  flex-direction: column;
  width: 296px;
  flex: none;
  max-height: 384px;
  padding-left: 8px;
  box-sizing: border-box;
  /* A divisória entre as duas colunas — é ela que diz que são duas coisas, e
     não uma lista que continua. */
  border-left: 1px solid var(--ocb-fio, #23262e);
}

/* Título de seção (`Trade`, `Explore`). */
.oc-b .oc-barra-secao {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  margin-bottom: 4px;
  color: var(--ocb-tinta-3, #8b8f9a);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}
.oc-b .oc-barra-secao:first-child { padding-top: 0; }

/* O item ATIVO fica aceso: é ele que decide o que a coluna da direita mostra,
   e sem o realce a relação entre os dois lados não se enxerga. */
.oc-b .oc-barra-cel.oc-ativo { background: var(--ocb-realce, rgba(255, 255, 255, .06)); }

/* ── a busca ─────────────────────────────────────────────────────────────── */
.oc-b .oc-lado-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0 8px 8px;
  padding: 0 10px;
  height: 34px;
  border-radius: 8px;
  background: var(--ocb-fundo-2, rgba(255, 255, 255, .04));
}
.oc-b .oc-lado-lupa { display: inline-flex; color: var(--ocb-tinta-3, #8b8f9a); }
.oc-b .oc-lado-campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ocb-tinta-1, #fff);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.oc-b .oc-lado-campo::placeholder { color: var(--ocb-tinta-3, #8b8f9a); }
/* O X nativo da busca some: ele vem com a cor do sistema e destoa no escuro. */
.oc-b .oc-lado-campo::-webkit-search-cancel-button { display: none; }

/* A lista rola dentro da coluna — o cartão tem altura fixa, e uma lista que
   cresce empurraria o rodapé da página. */
.oc-b .oc-lado-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.oc-b .oc-lado-lista::-webkit-scrollbar { width: 4px; }
.oc-b .oc-lado-lista::-webkit-scrollbar-thumb {
  background: var(--ocb-fio, #23262e); border-radius: 4px;
}

.oc-b .oc-sub-cel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--ocb-tinta-2, #c9ced9);
  font-size: 13.5px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.oc-b .oc-sub-cel:hover { background: var(--ocb-realce, rgba(255, 255, 255, .06)); }

.oc-b .oc-sub-moeda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ocb-fio, #23262e);
  font-size: 9px;
  font-weight: 600;
  color: var(--ocb-tinta-3, #8b8f9a);
}
.oc-b .oc-sub-moeda img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Base em branco, cotação apagada: o que se escolhe é a MOEDA; o `/USDT` é a
   mesma palavra em quase toda a lista e competir com ela cansa o olho. */
.oc-b .oc-sub-par strong { color: var(--ocb-tinta-1, #fff); font-weight: 600; }
.oc-b .oc-sub-par span { color: var(--ocb-tinta-3, #8b8f9a); font-weight: 400; }

/* ── a linha com mini gráfico ─────────────────────────────────────────────
 *
 * Quatro colunas: ícone · par · faísca · preço e variação. O par empurra o
 * resto para a direita (`flex: 1`) para que preço e variação fiquem alinhados
 * entre si em todas as linhas — uma coluna de números que não alinha obriga a
 * ler cada linha de novo. */
.oc-b .oc-sub-par { flex: 1 1 auto; min-width: 0; }

/* Vão RESERVADO: a faísca chega da rede depois do painel, e sem a caixa já
   dimensionada cada resposta empurraria as linhas de baixo — o menu tremeria
   oito vezes debaixo do mouse. */
.oc-b .oc-sub-graf {
  flex: none;
  display: block;
  width: 52px;
  height: 18px;
}
.oc-b .oc-sub-faisca { display: block; width: 100%; height: 100%; overflow: visible; }

.oc-b .oc-sub-num {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 78px;
  font-variant-numeric: tabular-nums;
}
.oc-b .oc-sub-num > strong {
  color: var(--ocb-tinta-1, #fff);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}
.oc-b .oc-sub-var {
  font-size: 11px;
  line-height: 1.2;
  color: var(--ocb-tinta-3, #8b8f9a);
}
.oc-b .oc-sub-var.oc-alta  { color: var(--oc-sub-alta, #16c784); }
.oc-b .oc-sub-var.oc-baixa { color: var(--oc-sub-baixa, #ea3943); }


/* ── Tema CLARO × superfícies nossas de fundo preto fixo ─────────────────
 *
 * 🔴 06/09/2026 (vídeo do dono, Brave com `theme=light`): na página de
 * afiliados o título "ATÉ 50% DAS TAXAS" e o parágrafo sumiam; só o kicker
 * laranja ficava. O tema claro (botão do sol, `barra-tema.js`) troca as
 * variáveis da captura — `--foreground-one` vira `#000` — e as nossas folhas
 * usam essas variáveis para o TEXTO, mas pintam o FUNDO com preto fixo
 * (`.oc-af { background: #020202 }` e mais ~60 superfícies). Texto preto em
 * fundo preto: invisível, e sem erro em lugar nenhum.
 *
 * 🔑 Superfície que não muda de cor com o tema não pode ler cor de texto do
 * tema. Dentro destas raízes as variáveis voltam aos valores do ESCURO
 * (medidos no navegador em 06/09: `--foreground-one #FFF`, `-two .64`,
 * `-three .48`, `-four .24`; `--text-1/2/3` #FFF/.7/.5; `--background-*`
 * #020202). Custom property herda, então basta a raiz. A captura (terminal,
 * cabeçalho) continua trocando de tema normalmente — só as nossas ilhas
 * escuras ficam escuras por inteiro. */
:root[theme="light"] :is(
  .oc-af, .oc-af-rodape, [data-oc-banner].oc-faixa, .hero-banner,
  body.oc-pag-airdrop, .oc-ad-card,
  .oc-bots-aviso, .oc-bots-prod, .oc-plano, .oc-bots-item, .oc-gb-banner,
  [data-oc-carteira] .oc-ativos, [data-oc-carteira] .oc-vazio,
  [data-oc-carteira] .oc-saldo-cartao, [data-oc-carteira] .oc-aloc-cartao,
  .oc-cbp-card, .oc-cbp-modal, .oc-cp-painel,
  .oc-copy-pnl, .oc-ct-meu, .oc-ct-hifi-card, body.oc-pag-copyhome,
  .oc-ch-card, .oc-ch-novo, .oc-ch-saida,
  .oc-dep-painel, .oc-dp-inline, .oc-dp-mini, .oc-modal-painel, .oc-tr-painel,
  .oc-hi-cartao, .oc-ss-cartao,
  body.oc-pag-launchpad, .oc-lp-card, .oc-lp-lista-card, .oc-lp-caixa,
  .oc-rod, .oc-spot-lista, .oc-fut-cab, .oc-ord-cab, body.oc-mv
) {
  --foreground-one: #FFF;
  --foreground-two: rgba(255, 255, 255, 0.64);
  --foreground-three: rgba(255, 255, 255, 0.48);
  --foreground-four: rgba(255, 255, 255, 0.24);
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.7);
  --text-3: rgba(255, 255, 255, 0.5);
  --background-one: #020202;
  --background-two: #020202;
}

/* ── deposito.css ── */
/* Os diálogos de dinheiro no desenho novo (handoff do dono, 01/09/2026):
 * depósito e saque compartilham este molde — véu, cartão de 470px, header
 * com ‹ título ✕, stepper de três peças diagonais, lista com busca, chips
 * "trocar", notas e erros. O `poe_barra.py` injeta esta folha em TODA página,
 * então tudo o que os dois fluxos têm em comum mora aqui; o `saque.css` só
 * acrescenta o que é do saque.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A folha da ORIGEM reseta as direcionais num bloco à parte:
 *
 *     [dir] div, [dir] p, [dir] button … { border: 0; margin: 0; padding: 0 }
 *
 * Isso é (0,1,1) e vence classe sozinha (0,1,0) — a regra chega ao navegador
 * com METADE das declarações aplicadas. `[dir] .oc-dp-item` é (0,2,0) e ganha.
 * Toda `margin`, `padding`, `border` e `background` daqui vive em `[dir]`.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum. Tudo aqui é px (`_tools/checa_css.py`).
 *
 * ## Fontes
 *
 * Space Grotesk na UI, JetBrains Mono em número, endereço, ticker e contador.
 * Os dois arquivos em `_local/fonts/` são VARIÁVEIS (tabela `fvar`): o "400"
 * do nome é só o nome. A CSP do espelho é `font-src 'self'` — Google Fonts
 * não carrega, e é por isso que as fontes moram aqui.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/_local/fonts/space-grotesk-400.cbee7234.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/_local/fonts/JetBrainsMono.340e696a.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

/* ── o véu ──────────────────────────────────────────────────────────────
 *
 * `overflow-y: auto` no VÉU, nunca no cartão: num laptop de 768px o cartão
 * do endereço passa da altura da janela, e `align-items: center` com
 * `overflow: hidden` cortaria cabeçalho e rodapé sem barra de rolagem —
 * lição do `saque-status.css`. */
.oc-dep-veu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
}
[dir] .oc-dep-veu { padding: 40px 16px; }

/* ── o cartão ─────────────────────────────────────────────────────────── */
.oc-dep-painel {
  position: relative;
  width: 100%;
  max-width: 470px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .02);
  box-sizing: border-box;
  color: #fff;
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
[dir] .oc-dep-painel { margin: auto; border: 1px solid #232323; background: #0f0f0f; }
.oc-dep-painel:focus { outline: none; }

/* Dentro da carteira (`monta`) o MESMO cartão, sem véu, na largura do painel. */
.oc-dp-inline {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
[dir] .oc-dp-inline { border: 1px solid #232323; background: #0f0f0f; }

/* Fio-gradiente no topo e as três listras diagonais do canto. */
.oc-dp-fio { height: 2px; background: linear-gradient(90deg, transparent 0%, #f7931a 50%, transparent 100%); }
.oc-dp-listras { position: absolute; top: -30px; right: 40px; height: 130px; width: 60px; pointer-events: none; }
.oc-dp-listras span { position: absolute; top: 0; bottom: 0; transform: skewX(-26.6deg); }
.oc-dp-listras span:nth-child(1) { right: 0; width: 20px; background: rgba(247, 147, 26, .05); }
.oc-dp-listras span:nth-child(2) { right: 32px; width: 9px; background: rgba(247, 147, 26, .035); }
.oc-dp-listras span:nth-child(3) { right: 52px; width: 4px; background: rgba(247, 147, 26, .025); }

/* ── header: ‹ título ✕ ───────────────────────────────────────────────── */
.oc-dp-topo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[dir] .oc-dp-topo { padding: 18px 26px; border-bottom: 1px solid #1c1c1c; }
.oc-dp-topo-esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oc-dp-titulo { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.2px; white-space: nowrap; }

/* 🔑 40px de alvo (44 no ✕): numa tela onde o toque errado escolhe a rede
 * errada, o alvo é parte do anteparo (medido no telefone em 25/08). */
.oc-dp-voltar, .oc-dp-x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #8a8a8a;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
[dir] .oc-dp-voltar, [dir] .oc-dp-x { border: 1px solid #262626; padding: 0; margin: 0; }
.oc-dp-voltar { font-size: 20px; }
.oc-dp-x { width: 44px; height: 44px; font-size: 14px; color: #7a7a7a; }
[dir] .oc-dp-x { margin: -4px -8px -4px 0; }
[dir] .oc-dp-voltar:hover, [dir] .oc-dp-x:hover { border-color: #f7931a; color: #f7931a; }
.oc-dp-voltar:focus-visible, .oc-dp-x:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
.oc-dp-voltar[hidden] { display: none; }

/* ── abas Cripto / PIX (só o depósito tem) ────────────────────────────── */
.oc-dep-painel .oc-abas, .oc-dp-inline .oc-abas { display: flex; gap: 6px; }
[dir] .oc-dep-painel .oc-abas, [dir] .oc-dp-inline .oc-abas { padding: 16px 26px 0; }
.oc-dep-painel .oc-aba, .oc-dp-inline .oc-aba {
  background: transparent;
  color: #6a6a6a;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 9px;
  min-height: 34px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
[dir] .oc-dep-painel .oc-aba, [dir] .oc-dp-inline .oc-aba { border: 1px solid #232323; padding: 0 14px; }
.oc-dep-painel .oc-aba.is-active, .oc-dp-inline .oc-aba.is-active { color: #f7931a; }
[dir] .oc-dep-painel .oc-aba.is-active, [dir] .oc-dp-inline .oc-aba.is-active { border-color: rgba(247, 147, 26, .5); background: rgba(247, 147, 26, .08); }
.oc-dep-painel .oc-aba-corpo[hidden], .oc-dp-inline .oc-aba-corpo[hidden] { display: none !important; }
/* 🔴 No telefone o `barra.js` carrega o `abas-movel.css` da barra de abas, que
 * usa os MESMOS nomes (`.oc-abas` em grade de 5, `.oc-aba` de 62px em coluna,
 * com a pastilha `::before`). Dentro do cartão essas regras faziam CRIPTO e
 * PIX virarem dois quadrados de 62px com uma pastilha fantasma. Aqui elas são
 * devolvidas ao desenho do cartão, com especificidade maior. */
.oc-dep-painel .oc-aba, .oc-dp-inline .oc-aba { height: 34px; flex-direction: row; flex: 0 0 auto; }
.oc-dep-painel .oc-aba::before, .oc-dp-inline .oc-aba::before { content: none; }
[dir] .oc-dep-painel .oc-abas, [dir] .oc-dp-inline .oc-abas { border-top: 0; }

/* ── o stepper: três peças diagonais, vão de 3px ──────────────────────
 *
 * Cada peça é um <button> com spans absolutos por baixo do rótulo:
 *   ini  = corpo com canto esquerdo redondo + paralelogramo à direita
 *   meio = um paralelogramo só
 *   fim  = paralelogramo à esquerda + corpo com canto direito redondo
 * `skewX(-26.6deg)` porque tan(26,6°) = 0,5 — a diagonal anda meia altura,
 * o mesmo ângulo do `botao.css`. A cor das peças vem de `data-estado`. */
.oc-dp-passos { display: flex; align-items: stretch; gap: 3px; position: relative; }
[dir] .oc-dp-passos { padding: 18px 26px 0; }
.oc-dp-passo {
  position: relative;
  flex: 1;
  height: 34px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  --peca: #141414;
  --tinta: #4a4a4a;
}
[dir] .oc-dp-passo { padding: 0; border: 0; margin: 0; }
.oc-dp-passo[data-estado="atual"] { --peca: #f7931a; --tinta: #0a0a0a; }
.oc-dp-passo[data-estado="feito"] { --peca: #1c1c1c; --tinta: #f7931a; }
.oc-dp-passo[data-livre="0"] { cursor: default; }
.oc-dp-passo:not([data-livre="0"]):hover { filter: brightness(1.12); }
.oc-dp-passo:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
.oc-dp-passo-a, .oc-dp-passo-b { position: absolute; top: 0; bottom: 0; background: var(--peca); }
.oc-dp-passo[data-pos="ini"] .oc-dp-passo-a { left: 0; right: 9px; border-radius: 10px 0 0 10px; }
.oc-dp-passo[data-pos="ini"] .oc-dp-passo-b { right: 2px; width: 15px; transform: skewX(-26.6deg); }
.oc-dp-passo[data-pos="meio"] .oc-dp-passo-a { display: none; }
.oc-dp-passo[data-pos="meio"] .oc-dp-passo-b { left: 8px; right: 8px; transform: skewX(-26.6deg); }
.oc-dp-passo[data-pos="fim"] .oc-dp-passo-a { left: 9px; right: 0; border-radius: 0 10px 10px 0; }
.oc-dp-passo[data-pos="fim"] .oc-dp-passo-b { left: 2px; width: 15px; transform: skewX(-26.6deg); }
.oc-dp-passo-rot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}
.oc-dp-passo-n { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; }

/* ── o corpo do passo ─────────────────────────────────────────────────── */
@keyframes ocDpStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.oc-dp-corpo { position: relative; display: flex; flex-direction: column; gap: 12px; animation: ocDpStepIn .25s ease; }
[dir] .oc-dp-corpo { padding: 18px 26px 26px; }
@media (prefers-reduced-motion: reduce) { .oc-dp-corpo { animation: none; } }

/* Rótulo em caixa alta com contador à direita ("12 de 34"). */
.oc-dp-rot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.oc-dp-rot-txt { color: #8a8a8a; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-dp-rot-esq { display: flex; align-items: center; gap: 9px; min-width: 0; }
.oc-dp-cont { color: #545454; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }

/* A busca. */
.oc-dp-busca { display: flex; align-items: center; gap: 10px; height: 40px; border-radius: 11px; }
[dir] .oc-dp-busca { padding: 0 14px; border: 1px solid #232323; background: #141414; }
[dir] .oc-dp-busca:focus-within { border-color: #f7931a; }
.oc-dp-busca-lupa { color: #565656; font-size: 13px; }
.oc-dp-busca-in { flex: 1; min-width: 0; background: transparent; color: #fff; font: inherit; font-size: 12.5px; }
[dir] .oc-dp-busca-in { border: 0; padding: 0; margin: 0; }
.oc-dp-busca-in:focus { outline: none; }
.oc-dp-busca-in::placeholder { color: #565656; }

/* A lista: caixa rolável com sombra interna no rodapé e scroll fino. */
.oc-dp-lista {
  max-height: 346px;
  overflow-y: auto;
  border-radius: 14px;
  box-shadow: inset 0 -16px 16px -16px rgba(0, 0, 0, .9);
  scrollbar-width: thin;
  scrollbar-color: #262626 transparent;
}
[dir] .oc-dp-lista { border: 1px solid #1e1e1e; background: #111111; }
.oc-dp-lista::-webkit-scrollbar { width: 8px; }
.oc-dp-lista::-webkit-scrollbar-thumb { background: #262626; border-radius: 99px; border: 2px solid #111111; }
.oc-dp-vazio { color: #4a4a4a; font-size: 12.5px; text-align: center; }
[dir] .oc-dp-vazio { padding: 26px; }

/* A linha: ícone · ticker/nome · coluna da direita · seta. */
.oc-dp-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: background .12s ease;
}
[dir] .oc-dp-item { padding: 11px 16px; border: 0; border-top: 1px solid #191919; margin: 0; }
[dir] .oc-dp-item:first-child { border-top: 0; }
[dir] .oc-dp-item:hover { background: #181818; }
.oc-dp-item:focus-visible { outline: 2px solid #f7931a; outline-offset: -2px; }
.oc-dp-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.oc-dp-item-t1 { color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dp-item-t2 { color: #5c5c5c; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dp-item-dir { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex: 0 0 auto; }
.oc-dp-item-d1 { color: #e8e8e8; font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }
.oc-dp-item-d2 { color: #545454; font-size: 10.5px; white-space: nowrap; }
.oc-dp-item-seta { color: #3d3d3d; font-size: 15px; flex: 0 0 auto; }
/* Selo "menor taxa" na linha da rede sugerida. */
.oc-dp-selo { color: #f7931a; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
[dir] .oc-dp-selo { padding: 3px 8px; border: 1px solid rgba(247, 147, 26, .35); background: rgba(247, 147, 26, .08); }

/* O ícone da moeda (34px na lista, 26 no chip). Mesma cascata do carteira.js:
 * CDN → local → iniciais. Sem tamanho fixo a imagem do CDN entra com a
 * largura natural dela e empurra o nome para fora da linha. */
.oc-dep-moeda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: #0a0a0a;
}
[dir] .oc-dep-moeda { background: #f7931a; }
.oc-dep-moeda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-dp-chip .oc-dep-moeda { width: 26px; height: 26px; font-size: 8px; }
.oc-dp-rot .oc-dep-moeda { width: 22px; height: 22px; font-size: 8px; }

/* A sigla da rede numa caixa. */
.oc-dp-rede-sigla {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #f7931a;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
}
[dir] .oc-dp-rede-sigla { background: #1a1a1a; border: 1px solid #262626; }
/* A logo da rede dentro da caixinha; a sigla só quando não há logo. */
.oc-dp-rede-sigla img { display: block; width: 22px; height: 22px; border-radius: 50%; }
.oc-dp-chip .oc-dp-rede-sigla { width: 26px; height: 26px; border-radius: 8px; font-size: 7.5px; }
.oc-dp-chip .oc-dp-rede-sigla img { width: 16px; height: 16px; }

/* Chips Moeda / Rede com "trocar". */
.oc-dp-chips { display: flex; gap: 10px; }
.oc-dp-chip { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; border-radius: 12px; }
[dir] .oc-dp-chip { padding: 11px 14px; border: 1px solid #202020; background: #141414; }
.oc-dp-chip-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oc-dp-chip-k { color: #5f5f5f; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.oc-dp-chip-v { color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dp-chip-trocar { margin-left: auto; background: transparent; color: #f7931a; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; }
[dir] .oc-dp-chip-trocar { border: 0; padding: 6px 0 6px 6px; margin: -6px 0 -6px auto; }
.oc-dp-chip-trocar:hover { color: #ffb04d; }

/* Notas, erros e o aviso laranja. */
.oc-dp-nota { color: #4a4a4a; font-size: 11px; line-height: 1.5; }
.oc-dp-erro { display: flex; align-items: center; gap: 9px; border-radius: 10px; color: #ef8b8b; font-size: 11.5px; line-height: 1.45; }
[dir] .oc-dp-erro { padding: 10px 13px; border: 1px solid rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .06); margin: 0; }
.oc-dp-erro::before { content: '!'; color: #ef4444; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.oc-dp-erro[hidden] { display: none; }
.oc-dp-aviso { display: flex; align-items: flex-start; gap: 11px; border-radius: 12px; color: #9a9a9a; font-size: 11.5px; line-height: 1.55; }
[dir] .oc-dp-aviso { padding: 12px 14px; border: 1px solid rgba(247, 147, 26, .25); background: rgba(247, 147, 26, .06); margin: 0; }
.oc-dp-aviso-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; color: #f7931a; font-size: 12px; font-weight: 700; }
[dir] .oc-dp-aviso-ic { background: rgba(247, 147, 26, .12); border: 1px solid rgba(247, 147, 26, .5); }
.oc-dp-aviso b { color: #f7931a; font-weight: 700; }
.oc-dp-espera { color: #8a8a8a; font-size: 12.5px; }

/* ── o card do endereço (passo 3 do depósito) ─────────────────────────── */
.oc-dp-end-card { position: relative; overflow: hidden; border-radius: 16px; }
[dir] .oc-dp-end-card { border: 1px solid #232323; background: #141414; }
.oc-dp-end-card .oc-dp-fio { background: linear-gradient(90deg, transparent 0%, rgba(247, 147, 26, .7) 50%, transparent 100%); }
.oc-dp-end-card .oc-dp-listras { top: -20px; bottom: -20px; height: auto; right: 24px; width: 40px; }
.oc-dp-end-card .oc-dp-listras span:nth-child(1) { right: 0; width: 16px; }
.oc-dp-end-card .oc-dp-listras span:nth-child(2) { right: 26px; width: 7px; }
.oc-dp-end-card .oc-dp-listras span:nth-child(3) { display: none; }
.oc-dp-end-linha { display: flex; align-items: center; gap: 18px; }
[dir] .oc-dp-end-linha { padding: 16px 18px 18px; }

/* A caixa clara do QR com o selo OFF no centro. O svg do `qr.js` já traz
 * fundo branco; a caixa por baixo é o creme do desenho. A correção do QR é M
 * (15%): o selo de 26px num QR de 116px come ~5% dos módulos, com folga. */
.oc-dp-qr { position: relative; flex: 0 0 auto; width: 138px; height: 138px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
[dir] .oc-dp-qr { background: #f4f0e8; padding: 0; margin: 0; }
.oc-dp-qr svg { display: block; width: 116px; height: 116px; border-radius: 6px; }
/* O selo é a MARCA (decisão do dono, 01/09/2026): pílula laranja com o
 * wordmark branco. 50×20 num QR de 116px come ~7,5% dos módulos — abaixo
 * dos 15% que o nível M corrige; o wordmark é largo (8,9:1) e um quadrado
 * o deixaria ilegível. */
.oc-dp-qr-selo { position: absolute; width: 50px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
[dir] .oc-dp-qr-selo { background: #f7931a; border: 2px solid #f4f0e8; padding: 0 4px; }
.oc-dp-qr-selo img { display: block; width: 100%; height: auto; }
.oc-dp-end-col { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.oc-dp-marca { width: 8px; height: 8px; flex: 0 0 auto; transform: skewX(-26.6deg); border-radius: 1px; }
[dir] .oc-dp-marca { background: #f7931a; }
.oc-dp-end-txt { display: block; color: #e8e8e8; font-size: 11.5px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; line-height: 1.6; word-break: break-all; user-select: all; border-radius: 10px; }
[dir] .oc-dp-end-txt { padding: 10px 12px; border: 1px solid #232323; background: #0f0f0f; margin: 0; }

/* A grade Mínimo / Crédito em / Tempo estimado. Duas ou três células —
 * `grid-auto-flow`, não `grid-template-columns: 1fr 1fr 1fr`: o Mínimo só
 * entra quando o servidor manda `minDeposit`. */
.oc-dp-grade { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.oc-dp-cel { display: flex; flex-direction: column; gap: 3px; min-width: 0; border-radius: 11px; }
[dir] .oc-dp-cel { padding: 11px 13px; border: 1px solid #1d1d1d; background: #141414; }
.oc-dp-cel-k { color: #5f5f5f; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.oc-dp-cel-v { color: #fff; font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── o histórico de depósitos (fica, abaixo dos passos) ──────────────── */

/* ── a aba PIX dentro do cartão ─────────────────────────────────────────
 *
 * O `pix.js` monta `.oc-campo`, `.oc-input`, `.oc-botao`, `.oc-endereco` e
 * `.oc-qr`, que só o `carteira.css` estiliza — e ele prefixa tudo com
 * `[data-oc-carteira]`, ancestral que o diálogo não tem. Fora da carteira a
 * aba nascia crua. O mínimo para ela caber no desenho novo: */
.oc-dep-painel .oc-aba-corpo, .oc-dp-inline .oc-aba-corpo { display: flex; flex-direction: column; gap: 12px; }
[dir] .oc-dep-painel .oc-aba-corpo:not([data-oc-dep-cripto]), [dir] .oc-dp-inline .oc-aba-corpo:not([data-oc-dep-cripto]) { padding: 18px 26px 26px; }
.oc-dep-painel .oc-campo-rot, .oc-dp-inline .oc-campo-rot { color: #8a8a8a; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; }
.oc-dep-painel .oc-input, .oc-dp-inline .oc-input { width: 100%; height: 46px; border-radius: 12px; color: #fff; font: inherit; font-size: 14px; box-sizing: border-box; }
[dir] .oc-dep-painel .oc-input, [dir] .oc-dp-inline .oc-input { padding: 0 14px; border: 1px solid #232323; background: #141414; }
[dir] .oc-dep-painel .oc-input:focus, [dir] .oc-dp-inline .oc-input:focus { border-color: #f7931a; outline: none; }
.oc-dep-painel .oc-botao, .oc-dp-inline .oc-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: #f7931a; color: #0a0a0a; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
[dir] .oc-dep-painel .oc-botao, [dir] .oc-dp-inline .oc-botao { border: 0; padding: 0 20px; }
.oc-dep-painel .oc-botao:hover, .oc-dp-inline .oc-botao:hover { filter: brightness(1.08); }
.oc-dep-painel .oc-endereco, .oc-dp-inline .oc-endereco { display: flex; align-items: center; gap: 10px; border-radius: 10px; }
[dir] .oc-dep-painel .oc-endereco, [dir] .oc-dp-inline .oc-endereco { padding: 10px 12px; border: 1px solid #232323; background: #0f0f0f; }
.oc-dep-painel .oc-endereco-txt, .oc-dp-inline .oc-endereco-txt { flex: 1; min-width: 0; font: 11.5px/1.6 'JetBrains Mono', ui-monospace, Menlo, monospace; overflow-wrap: anywhere; user-select: all; color: #e8e8e8; }
.oc-dep-painel .oc-copiar, .oc-dp-inline .oc-copiar { flex: 0 0 auto; background: #f7931a; color: #0a0a0a; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-radius: 9px; min-height: 40px; }
[dir] .oc-dep-painel .oc-copiar, [dir] .oc-dp-inline .oc-copiar { border: 0; padding: 0 14px; }
.oc-dep-painel .oc-qr, .oc-dp-inline .oc-qr { width: 148px; border-radius: 12px; }
[dir] .oc-dep-painel .oc-qr, [dir] .oc-dp-inline .oc-qr { margin: 0 auto; padding: 8px; background: #f4f0e8; }
.oc-dep-painel .oc-qr svg, .oc-dp-inline .oc-qr svg { display: block; width: 100%; height: auto; }
.oc-dep-painel .oc-aviso, .oc-dp-inline .oc-aviso { font-size: 12.5px; line-height: 1.5; color: #9a9a9a; }
[dir] .oc-dep-painel .oc-aviso, [dir] .oc-dp-inline .oc-aviso { margin: 0; }
.oc-dep-painel .oc-aviso.oc-erro, .oc-dp-inline .oc-aviso.oc-erro { color: #ef8b8b; }
.oc-dep-painel .oc-aviso.oc-alerta, .oc-dp-inline .oc-aviso.oc-alerta { color: #9a9a9a; border-radius: 12px; }
[dir] .oc-dep-painel .oc-aviso.oc-alerta, [dir] .oc-dp-inline .oc-aviso.oc-alerta { padding: 12px 14px; border: 1px solid rgba(247, 147, 26, .25); background: rgba(247, 147, 26, .06); }
.oc-dep-painel .oc-sucesso, .oc-dp-inline .oc-sucesso { color: #2ebd85; }

/* ── telefone ─────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  [dir] .oc-dep-veu { padding: 12px 8px; }
  [dir] .oc-dp-topo { padding: 14px 16px; }
  [dir] .oc-dp-passos { padding: 14px 16px 0; }
  [dir] .oc-dp-corpo { padding: 14px 16px 20px; }
  [dir] .oc-dep-painel .oc-abas, [dir] .oc-dp-inline .oc-abas { padding: 14px 16px 0; }
  .oc-dp-lista { max-height: 300px; }
  .oc-dp-end-linha { flex-direction: column; align-items: stretch; }
  .oc-dp-qr { align-self: center; }
  .oc-dp-grade { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .oc-dp-passo-rot { font-size: 10px; gap: 5px; }
}

/* Nota de reservas no popup (auditoria 05/09/2026): a ressalva do PoR onde o
 * dinheiro entra, em vez de só na docs. Link, discreto, para a página Segurança. */
.oc-dp-nota-reservas { display: block; color: #6a6a6a; font-size: 11px; line-height: 1.5; text-decoration: none; }
[dir] .oc-dp-nota-reservas { margin: 8px 0 0; }
.oc-dp-nota-reservas:hover { color: #f7931a; }

/* ── botao.css ── */
/* botao.css — o botão padronizado da OFFCODE: corte diagonal, pontas retas.
 *
 * Desenho do dono (30/08/2026, `botao-offcode.html`): uma barra com o canto
 * esquerdo arredondado e a ponta direita cortada na diagonal, mais um bloco
 * escuro com a seta ↗ que fecha o conjunto. Nasceu no popup de transferir e
 * virou o botão de TODA ação de dinheiro e de negociação: Long/Short, Depositar,
 * Sacar, Converter, Add margin, Copiar, os chips de alavancagem e margem.
 *
 * ## Como o corte é feito
 *
 * Dois pseudo-elementos: `::before` é o corpo (canto esquerdo redondo) e
 * `::after` é um paralelogramo — `skewX(-26.6deg)`, porque tan(26,6°) = 0,5:
 * a diagonal anda meia altura na horizontal, o MESMO ângulo em todo tamanho.
 *
 * Geometria em função da altura H e do recuo R (a variável `--r`):
 *   · o corpo termina em `right: R + H/2` — sempre DENTRO do paralelogramo,
 *     nos dois cantos, por isso a emenda nunca abre;
 *   · o paralelogramo tem largura H e `right: R`; a diagonal vai de
 *     (W − R + H/4) no topo a (W − R − H/4) na base;
 *   · R ≥ H/4 para a ponta de cima não vazar da caixa do botão.
 *
 * 🔴 O rótulo vai num `<span class="oc-bt-rot">` COM `z-index: 1`. Sem isso
 * ele some: `::after` é o último filho, e entre filhos posicionados sem
 * z-index quem vem depois pinta por cima — `MÁX` virou `M`, `25%` virou `25`
 * e a seta desapareceu inteira na primeira captura do popup.
 *
 * ## Uso
 *
 *   <button class="oc-bt oc-bt-m oc-bt-marca"><span class="oc-bt-rot">Depositar</span></button>
 *
 *   tamanhos  oc-bt-g (56px, CTA) · oc-bt-m (44px) · oc-bt-p (34px) · oc-bt-pp (28px)
 *   tons      oc-bt-marca (laranja) · oc-bt-escuro · oc-bt-longo (verde) ·
 *             oc-bt-curto (vermelho) · oc-bt-bom (verde de "feito") ·
 *             oc-bt-quente (laranja escuro de "enviando")
 *   estados   :disabled · .oc-on (segmento escolhido = laranja)
 *   CTA       <div class="oc-bt-linha"><button class="oc-bt oc-bt-g oc-bt-marca">…</button>
 *               <button class="oc-bt-seta" tabindex="-1" aria-hidden="true">
 *                 <span class="oc-bt-seta-rot">↗</span></button></div>
 *
 * Funciona em `<a>` e em `<button>`: o `<a>` do herói da home é o mesmo botão.
 *
 * ⚠️ Nada de `rem`: a raiz do espelho é 13.33vw e 1rem vale ~240px.
 * ⚠️ O reset da captura é `[dir] *` (0,1,0). Toda regra daqui nasce com
 *    `[dir]` (0,2,0), e a base repõe borda/fundo/padding em zero de propósito:
 *    a forma é dos pseudo-elementos, e qualquer fundo herdado apareceria
 *    ATRÁS do corte como um retângulo.
 */

/* ── base ─────────────────────────────────────────────────────────────── */

[dir] .oc-bt {
  --h: 44px;
  --r: 12px;
  --raio: 12px;
  --bt-fundo: #161616;
  --bt-tinta: #9a9a9a;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  height: var(--h);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bt-tinta);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter .15s ease, color .15s ease;
}
[dir] .oc-bt::before,
[dir] .oc-bt::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--bt-fundo);
  transition: background .18s ease;
}
[dir] .oc-bt::before {
  left: 0;
  right: calc(var(--r) + var(--h) / 2);
  border-radius: var(--raio) 0 0 var(--raio);
}
[dir] .oc-bt::after {
  right: var(--r);
  width: var(--h);
  transform: skewX(-26.6deg);
}
[dir] .oc-bt-rot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  /* A ponta direita é diagonal: o texto tem de parar antes de onde ela
   * entra na metade da altura, mais uma folga. */
  padding: 0 calc(var(--r) + var(--h) / 4 + 4px) 0 calc(var(--raio) + 2px);
  color: inherit;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir] .oc-bt:hover { filter: brightness(1.1); }
[dir] .oc-bt:active { filter: brightness(.94); }
[dir] .oc-bt:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
/* Desligado tem de PARECER desligado: um botão vivo que não faz nada é pior
 * que um apagado que diz por quê. */
[dir] .oc-bt:disabled,
[dir] .oc-bt[aria-disabled="true"] {
  --bt-fundo: #181818;
  --bt-tinta: #4f4f4f;
  cursor: not-allowed;
  filter: none;
}

/* ── tamanhos ─────────────────────────────────────────────────────────── */

[dir] .oc-bt-g { --h: 56px; --r: 16px; --raio: 16px; font-size: 19px; letter-spacing: -.2px; }
[dir] .oc-bt-m { --h: 44px; --r: 12px; --raio: 12px; font-size: 14px; }
[dir] .oc-bt-p { --h: 34px; --r: 10px; --raio: 9px; font-size: 12.5px; }
[dir] .oc-bt-pp { --h: 28px; --r: 8px; --raio: 7px; font-size: 11.5px; }
/* O CTA alinha o rótulo à esquerda, como no desenho. */
[dir] .oc-bt-g .oc-bt-rot { justify-content: flex-start; padding-left: 22px; }
/* Botão que ocupa a linha inteira. */
[dir] .oc-bt-cheio { display: flex; width: 100%; }

/* ── tons ─────────────────────────────────────────────────────────────── */

[dir] .oc-bt-marca { --bt-fundo: #f7931a; --bt-tinta: #0a0a0a; }
[dir] .oc-bt-escuro { --bt-fundo: #161616; --bt-tinta: #9a9a9a; }
[dir] .oc-bt-escuro:hover { --bt-tinta: #f7931a; filter: brightness(1.25); }
/* ── par Long/Short no formato da referência (dono, 30/08/2026): dois
 * paralelogramos espelhados, rótulo em cima e PREÇO embaixo. `oc-bt-esq`
 * espelha o corte para a ESQUERDA (o padrão corta à direita) — mesma
 * inclinação de 26,6° do sistema, que é a da foto. ── */
[dir] .oc-bt-esq::before {
  left: calc(var(--r) + var(--h) / 2);
  right: 0;
  border-radius: 0 var(--raio) var(--raio) 0;
}
[dir] .oc-bt-esq::after {
  left: var(--r);
  right: auto;
  width: var(--h);
  transform: skewX(-26.6deg);
}
[dir] .oc-bt-esq .oc-bt-rot {
  padding: 0 calc(var(--raio) + 2px) 0 calc(var(--r) + var(--h) / 4 + 4px);
}
[dir] .oc-bt-2l { --h: 48px; }
[dir] .oc-bt-2l .oc-bt-rot { flex-direction: column; gap: 1px; line-height: 1.15; }
[dir] .oc-bt-2l .oc-bt-l1 { font-size: 12.5px; font-weight: 700; opacity: .82; }
[dir] .oc-bt-2l .oc-bt-l2 {
  font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

[dir] .oc-bt-longo { --bt-fundo: #00e08f; --bt-tinta: #06130d; }
[dir] .oc-bt-curto { --bt-fundo: #ff4d4f; --bt-tinta: #1b0b0c; }
[dir] .oc-bt-bom { --bt-fundo: #4cb37b; --bt-tinta: #0a0a0a; }
[dir] .oc-bt-quente { --bt-fundo: #b86c0c; --bt-tinta: #0a0a0a; }
/* Segmento escolhido: laranja. Os outros ficam escuros. */
[dir] .oc-bt.oc-on { --bt-fundo: #f7931a; --bt-tinta: #0a0a0a; }
[dir] .oc-bt.oc-on:hover { filter: brightness(1.06); }
/* "Enviando" e "feito" ficam travados de propósito — e têm de manter a cor
 * enquanto travados: cinza ali diria "não dá", quando o que está acontecendo
 * é "está indo" / "foi". Estas duas vencem o `:disabled` da base. */
[dir] .oc-bt-quente:disabled { --bt-fundo: #b86c0c; --bt-tinta: #0a0a0a; cursor: wait; }
[dir] .oc-bt-bom:disabled { --bt-fundo: #4cb37b; --bt-tinta: #0a0a0a; cursor: default; }

/* ── variante SEM `.oc-bt-rot` ────────────────────────────────────────────
 *
 * Para botão cujo texto alguém escreve por `textContent` (o `.oc-ord-enviar`
 * do spot troca o rótulo a cada lado e a cada cotação). O corte vai ATRÁS do
 * texto: `z-index: -1` nos pseudo-elementos, dentro de um contexto próprio
 * (`isolation: isolate`) — sem o contexto, iriam parar atrás do painel. */
[dir] .oc-bt.oc-bt-solo {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--r) + var(--h) / 4 + 4px) 0 calc(var(--raio) + 2px);
  font-weight: 600;
}
[dir] .oc-bt.oc-bt-solo::before,
[dir] .oc-bt.oc-bt-solo::after { z-index: -1; }

/* ── grupo de segmentos ───────────────────────────────────────────────── */

[dir] .oc-bt-segs { display: flex; gap: 8px; }
[dir] .oc-bt-segs > .oc-bt { flex: 1; }
[dir] .oc-bt-segs > .oc-bt > .oc-bt-rot { width: 100%; }

/* ── o CTA com o bloco de seta ────────────────────────────────────────── */

[dir] .oc-bt-linha { display: flex; align-items: stretch; width: 100%; }
[dir] .oc-bt-linha > .oc-bt { flex: 1; min-width: 0; }
[dir] .oc-bt-linha > .oc-bt > .oc-bt-rot { width: 100%; }
/* A seta é a METADE direita do mesmo botão, cortada na mesma diagonal — não
 * é um segundo controle. Quem a monta a tira do foco (`tabindex=-1`,
 * `aria-hidden`) para o teclado achar UM botão, não dois. */
[dir] .oc-bt-seta {
  --h: 56px;
  --raio: 16px;
  --seta-cor: #3d3d3d;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--h) + 20px);
  height: var(--h);
  margin: 0 0 0 calc(-1 * (var(--h) / 4 + 4px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--seta-cor);
  font: inherit;
  cursor: pointer;
  transition: color .18s ease;
}
[dir] .oc-bt-seta::before,
[dir] .oc-bt-seta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: #171717;
}
[dir] .oc-bt-seta::before {
  left: calc(var(--h) / 4);
  width: calc(var(--h) - 16px);
  transform: skewX(-26.6deg);
}
[dir] .oc-bt-seta::after {
  left: calc(var(--h) / 4 + 16px);
  right: 0;
  border-radius: 0 var(--raio) var(--raio) 0;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06);
}
[dir] .oc-bt-seta-rot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: calc(var(--h) / 4 + 6px);
  font-size: 21px;
  line-height: 1;
}
[dir] .oc-bt-seta:disabled { cursor: not-allowed; }
/* A cor da seta segue o botão ao lado: laranja quando dá para clicar, verde
 * quando terminou, apagada quando não dá. */
[dir] .oc-bt-marca + .oc-bt-seta { --seta-cor: #f7931a; }
[dir] .oc-bt-quente + .oc-bt-seta { --seta-cor: #b86c0c; }
[dir] .oc-bt-bom + .oc-bt-seta { --seta-cor: #4cb37b; }
[dir] .oc-bt:disabled + .oc-bt-seta { --seta-cor: #3d3d3d; }
/* "Indo" e "foi" travam o botão de propósito e a seta acompanha a cor — a
 * regra de cima (0,4,0) venceria o tom (0,3,0) e a apagaria. */
[dir] .oc-bt-quente:disabled + .oc-bt-seta { --seta-cor: #b86c0c; }
[dir] .oc-bt-bom:disabled + .oc-bt-seta { --seta-cor: #4cb37b; }
[dir] .oc-bt-linha:hover .oc-bt-seta:not(:disabled) { --seta-cor: #ffb04d; }
/* Seta em tamanho médio (44px). */
[dir] .oc-bt-m + .oc-bt-seta { --h: 44px; --raio: 12px; }
[dir] .oc-bt-m + .oc-bt-seta .oc-bt-seta-rot { font-size: 17px; }

/* ── cadeia: segmentos colados numa faixa só ──────────────────────────
 *
 * Desenho do dono (30/08/2026, cabeçalho no iPhone): Depositar, saldo e conta
 * viram UMA faixa — laranja, escuro, laranja — com as emendas na diagonal e
 * um respiro de 3px entre elas. Medido no desenho (tela de 440pt): faixa de
 * 38px, emendas a 32° (tan = 0,625: a diagonal anda 5/8 da altura), ponta
 * esquerda inclinada a 14° com cantos de 4px, ponta direita reta com os
 * mesmos cantos.
 *
 *   <div class="oc-bt-cadeia">
 *     <a class="oc-bt oc-bt-marca oc-bt-cadeia-ini"><span class="oc-bt-rot">…</span></a>
 *     <a class="oc-bt oc-bt-escuro oc-bt-cadeia-meio"><span class="oc-bt-rot">…</span></a>
 *     <button class="oc-bt oc-bt-marca oc-bt-cadeia-fim"><span class="oc-bt-rot">…</span></button>
 *   </div>
 *
 * A posição é uma classe explícita, não `:first-child`: o último segmento
 * pode viver dentro de um invólucro (o menu de conta precisa de um pai
 * `position: relative` para o painel), e o clone do botão que vai para a
 * gaveta NÃO está numa cadeia — por isso toda regra daqui exige
 * `.oc-bt-cadeia` acima: fora dela o mesmo elemento é o botão comum.
 *
 * Geometria (altura H; toda inclinação gira em torno do próprio centro, de
 * modo que na METADE da altura a borda visual coincide com a caixa do
 * elemento — é o que faz as caixas do flex valerem as medidas do desenho):
 *   · ini: corpo `::before` inclinado a 14° (a ponta de cima anda
 *     H/2·tan14° ≈ 4,7px para a direita) terminando em `right: H/2`, sempre
 *     por baixo do paralelogramo `::after` de largura H que faz a emenda;
 *   · meio: um paralelogramo só, `left: 0; right: 0`;
 *   · fim: paralelogramo de largura H à esquerda e retângulo `::after` a
 *     partir de H/2 com os cantos direitos arredondados.
 *   Duas bordas com a MESMA inclinação são paralelas: o respiro entre
 *   segmentos é a margem horizontal entre as caixas, e vale igual do topo à
 *   base.
 *   Rótulo: a diagonal entra na caixa até H/2·tan32° ≈ 0,31H nas pontas de
 *   cima e de baixo; o texto fica no meio da altura, e as folgas (medidas no
 *   desenho) são variáveis para quem monta a cadeia ajustar por segmento.
 * ⚠️ Os paralelogramos SAEM da caixa (≈ 0,31H nas pontas): quem embrulha a
 *    cadeia não pode ter `overflow: hidden`.
 */
[dir] .oc-bt-cadeia {
  --cadeia-h: 38px;
  --cadeia-raio: 4px;
  --cadeia-emenda: 3px;
  --cadeia-inc: -32deg;
  --cadeia-ini: -14deg;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini,
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio,
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim {
  --h: var(--cadeia-h);
  --raio: var(--cadeia-raio);
  flex: 0 0 auto;
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio,
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim { margin-left: var(--cadeia-emenda); }

/* ini: ponta esquerda inclinada, emenda diagonal à direita. */
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini::before {
  left: 0;
  right: calc(var(--h) / 2);
  border-radius: var(--raio);
  transform: skewX(var(--cadeia-ini));
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini::after {
  right: 0;
  width: var(--h);
  transform: skewX(var(--cadeia-inc));
}
/* meio: paralelogramo inteiro. */
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio::before {
  left: 0;
  right: 0;
  border-radius: 0;
  transform: skewX(var(--cadeia-inc));
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio::after { display: none; }
/* fim: emenda diagonal à esquerda, ponta direita reta. */
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim::before {
  left: 0;
  right: auto;
  width: var(--h);
  border-radius: 0;
  transform: skewX(var(--cadeia-inc));
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim::after {
  left: calc(var(--h) / 2);
  right: 0;
  width: auto;
  border-radius: 0 var(--raio) var(--raio) 0;
  transform: none;
}
/* Cadeia que ocupa a linha inteira (trio da carteira, barra do futuros no
 * celular): os segmentos dividem a largura; quem precisa de largura fixa
 * (a Quantidade) põe o próprio `flex` com especificidade maior. */
[dir] .oc-bt-cadeia.oc-bt-cadeia-cheia { display: flex; width: 100%; }
[dir] .oc-bt-cadeia.oc-bt-cadeia-cheia > .oc-bt { flex: 1 1 0; min-width: 0; }
[dir] .oc-bt-cadeia.oc-bt-cadeia-cheia > .oc-bt > .oc-bt-rot { width: 100%; }
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini > .oc-bt-rot {
  padding: 0 var(--cadeia-pad-dir, calc(var(--h) / 2 + 5px)) 0 var(--cadeia-pad-esq, 16px);
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio > .oc-bt-rot {
  padding: 0 var(--cadeia-pad-dir, 14px) 0 var(--cadeia-pad-esq, 15px);
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim > .oc-bt-rot {
  padding: 0 var(--cadeia-pad-dir, 10px) 0 var(--cadeia-pad-esq, 10px);
}

/* ── roda de "enviando" dentro do rótulo ──────────────────────────────── */

[dir] .oc-bt-roda {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: ocBtGira .7s linear infinite;
}
[dir] .oc-bt-roda.oc-oculta { display: none; }
@keyframes ocBtGira { to { transform: rotate(360deg); } }

/* ── tela estreita ────────────────────────────────────────────────────── */

@media (max-width: 400px) {
  [dir] .oc-bt-g { font-size: 17px; }
  [dir] .oc-bt-g .oc-bt-rot { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  [dir] .oc-bt, [dir] .oc-bt::before, [dir] .oc-bt::after, [dir] .oc-bt-seta { transition: none; }
}

/* ── par colado (Log In | Sign Up) ────────────────────────────────────
 *
 * Duas peças do MESMO botão, com o vão diagonal fino da casa: a peça A
 * corta na direita SEM raio (a diagonal encosta na borda do elemento) e a
 * peça B nasce ESPELHADA — corte à esquerda, raio só à direita. O vão é o
 * `gap` do wrapper; as duas diagonais usam o mesmo skew e ficam paralelas. */
[dir] .oc-bt-par { display: inline-flex; gap: 3px; align-items: stretch; }
[dir] .oc-bt-par > .oc-bt { flex: 1; }
[dir] .oc-bt-par-a { --r: 0px; }
[dir] .oc-bt-par-a::before { right: calc(var(--h) / 2); border-radius: var(--raio) 0 0 var(--raio); }
[dir] .oc-bt-par-a::after { right: 0; }
[dir] .oc-bt-par-a .oc-bt-rot { padding: 0 calc(var(--h) / 4 + 6px) 0 calc(var(--raio) + 6px); }
[dir] .oc-bt-par-b::before { left: calc(var(--h) / 2); right: 0; border-radius: 0 var(--raio) var(--raio) 0; }
[dir] .oc-bt-par-b::after { left: 0; right: auto; width: var(--h); transform: skewX(-26.6deg); }
[dir] .oc-bt-par-b .oc-bt-rot { padding: 0 calc(var(--raio) + 6px) 0 calc(var(--h) / 4 + 6px); }
/* Reforço contra a regra móvel da barra (`.oc-b .oc-bt.oc-barra-btn:not(…)`,
 * 0-4-0), que devolvia --r e afastava a diagonal da borda no par. */
[dir] .oc-b .oc-bt.oc-bt-par-a { --r: 0px; }
[dir] .oc-b .oc-barra-gaveta-acoes .oc-bt-par { flex: 1; width: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
 * MODELO 2 — `.ocb`, o botão de ação (handoff `design_handoff_botao`, 09/09/2026)
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Sucede o `.oc-bt` acima nos CTAs de dinheiro e de negociação. Os dois
 * convivem: o `.oc-bt` continua na BARRA (Depositar do topo, saldo, avatar,
 * Log In/Sign Up) e nos secundários, e a barra não é tocada.
 *
 * ## A regra geométrica
 *
 * Paralelogramo horizontal de ângulo FIXO 23.5°. Todas as diagonais derivam
 * da ALTURA, nunca da largura:
 *
 *   slant          = 0.436 × h   →  atan(0.436) = 23.55°
 *   célula da seta = 0.846 × h
 *   rótulo         = 0.325 × h
 *   padding lateral= 0.30  × h   (+ slant à esquerda, + célula à direita)
 *   gap entre pares= 0.23  × h
 *
 * 🔑 Por que da altura: um botão cuja largura é definida pelo rótulo, com
 * slant em % da LARGURA, muda de ângulo a cada rótulo — `Confirmar` e `Ok`
 * sairiam com cortes diferentes. Derivando da altura o ângulo é invariante.
 * Uma variável só, `--ocb-h`, governa o componente inteiro.
 *
 * ## Tamanhos — mapeamento pelo PIXEL, não pela letra
 *
 * As duas escalas têm nomes iguais e alturas diferentes. Converter `oc-bt-g`
 * em `ocb--g` engordaria o botão de 56 para 78px:
 *
 *   oc-bt-g  56px → ocb--m  56px
 *   oc-bt-m  44px → ocb--p  44px
 *   oc-bt-p  34px → ocb--xp 34px
 *   oc-bt-pp 28px → sem par (o piso do modelo é 34) — segue no `.oc-bt`
 *
 * `ocb--p` (44px) é o piso em mobile: é o alvo mínimo de toque. `ocb--xp`
 * (34px) só em barra densa de desktop.
 *
 * ## Uso
 *
 *   <button type="button" class="ocb ocb--m ocb--block ocb--positive">
 *     <span class="ocb__label">Long</span>
 *     <span class="ocb__arrow" aria-hidden="true"><svg …></svg></span>
 *   </button>
 *
 * A célula da seta é PARTE do botão — não existe mais o `<button class=
 * "oc-bt-seta">` colado ao lado, que o modelo 1 precisava.
 *
 * ⚠️ O reset da captura é `[dir] div,[dir] span,…{border:0;margin:0;padding:0}`
 *    (0,1,1). Toda regra daqui nasce com `[dir]` (0,2,0) — sem isso o padding
 *    do corpo e a caixa do rótulo voltam a zero e o botão desenha colado.
 * ⚠️ Nada de `rem`: a raiz do espelho é 13.33vw e 1rem vale ~240px.
 * 🔑 `--ocb-h` também é o nome da altura da BARRA (`barra.css`, em `.oc-b`).
 *    Não colidem porque aqui ele é declarado no PRÓPRIO elemento `.ocb`, e o
 *    valor do elemento vence o herdado. Não mova estes tokens para `:root`.
 */

[dir] .ocb,
[dir] .ocb-pair {
  --ocb-slant-ratio: .436;
  --ocb-arrow-ratio: .846;
  --ocb-label-ratio: .325;
  --ocb-pad-ratio: .30;

  /* Corpo em COR SÓLIDA desde 10/09/2026 (dono, três pedidos seguidos: o
   * `Entrar para operar`, o `Negociar` da tabela e o par Long/Short).
   *
   * 🔴 O laranja era `#F7931A` em duas SOBRESCRITAS locais — uma no
   * `futuros.css`, outra no `mercados.css` — enquanto o token seguia em
   * degradê. Uma cor definida em três lugares diverge na primeira correção, e
   * todo `.ocb` laranja fora daquelas duas telas continuava com o degradê
   * antigo: a mesma ação com duas aparências. A cor mora no token, e só nele.
   *
   * 🔑 `#F7931A` é o laranja do BITCOIN, não o `#FFA51F` do handoff — decisão
   * do dono, e é o mesmo tom que a marca usa no resto do site. */
  --ocb-fill-primary:  #F7931A;
  /* 🔑 Verde e vermelho SÓLIDOS desde 10/09/2026 (dono, com foto do par
   * Long/Short: "deixe cor solida verde e vermelho"). São os tokens do SITE —
   * `--kline-up` e `--kline-down` —, não um verde próprio do botão: o mesmo
   * verde que diz "subiu" na tabela é o que diz "compra" no botão, e duas
   * telas com dois verdes é como se descobre que uma delas está errada.
   *
   * Os fios de luz do topo e a sombra da base FICAM: eles são a borda que
   * define a forma, não degradê de corpo. Sem eles o botão vira um retângulo
   * chapado. */
  --ocb-fill-positive: #009457;
  --ocb-fill-negative: #DF2B33;
  /* 🔑 Os dois SÓLIDOS também (dono, 10/09/2026). A cor é a parada de 58% do
   * degradê que havia aqui — o ponto onde o corpo assenta, e o mesmo 58% onde
   * os fios de luz do modelo desvanecem. Escolher o tom de ENTRADA (15%)
   * clarearia o botão inteiro; escolher o de saída (100%) o apagaria. O que
   * some é o degradê, não a cor que a pessoa via. */
  --ocb-fill-neutral:  #454A52;
  --ocb-fill-disabled: #26272A;

  /* Célula da seta: o MESMO tom escurecido e 1.5px de luz SOBRE a própria
   * diagonal. Não é outro botão — sem borda, sem raio, sem preto absoluto. */
  --ocb-cell-primary:  linear-gradient(90deg, rgba(255,228,178,.17) 0 1.5px, #C2740F 1.5px);
  /* Com o corpo sólido, a célula é o MESMO tom escurecido — não um bloco quase
   * preto grudado numa cor lisa. O fio de 1,5px sobre a diagonal continua
   * sendo o que separa as duas. */
  --ocb-cell-positive: linear-gradient(90deg, rgba(198,255,228,.17) 0 1.5px, #006B3F 1.5px);
  --ocb-cell-negative: linear-gradient(90deg, rgba(255,206,210,.17) 0 1.5px, #A11F26 1.5px);

  --ocb-arrow-primary:  #FFE0B0;
  --ocb-arrow-positive: #C9FFE7;
  --ocb-arrow-negative: #FFD9DA;

  --ocb-accent: #FFA51F;
  --ocb-surface: #0C0D10;   /* fundo atrás do botão — usado pelo outline */
}

/* ── modelo ───────────────────────────────────────────────────────────── */

[dir] .ocb {
  --ocb-h: 56px;
  --ocb-slant: calc(var(--ocb-h) * var(--ocb-slant-ratio));
  --ocb-arrow: calc(var(--ocb-h) * var(--ocb-arrow-ratio));
  --ocb-pad: calc(var(--ocb-h) * var(--ocb-pad-ratio));
  --ocb-fill: var(--ocb-fill-primary);
  --ocb-cell: var(--ocb-cell-primary);
  --ocb-arrow-color: var(--ocb-arrow-primary);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--ocb-h);
  margin: 0;
  padding: 0 calc(var(--ocb-arrow) + var(--ocb-pad)) 0 calc(var(--ocb-slant) + var(--ocb-pad));
  border: 0;
  border-radius: 0;
  font: inherit;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;

  /* Hairline de topo e sombra de base como CAMADAS DE FUNDO: desvanecem aos
   * 58% da largura, acompanhando o escurecimento do corpo.
   * 🔑 Não trocar por `border` nem por `box-shadow: inset 0 1px 0`: opacidade
   * constante continuaria brilhando na ponta escura e achataria o botão. */
  background:
    linear-gradient(90deg, rgba(255,255,255,.44), rgba(255,255,255,0) 58%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 58%) bottom / 100% 1px no-repeat,
    var(--ocb-fill);

  box-shadow: inset 0 calc(var(--ocb-h) * -.28) calc(var(--ocb-h) * .36) calc(var(--ocb-h) * -.28) rgba(0,0,0,.30);
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
  transition: filter .15s ease, transform .1s ease;
}

/* Entrada esquerda: wash largo + fio de luz correndo sobre a diagonal.
 * 🔴 Nenhum corte, fenda, notch ou segundo paralelogramo. O destaque é só
 * luz e saturação — e o branco do fio é BAIXO (.34→.14): um véu forte
 * dessatura a entrada e transforma verde vivo em menta pastel. */
[dir] .ocb::before,
[dir] .ocb::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  pointer-events: none;
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb::before {
  width: calc(var(--ocb-slant) + var(--ocb-h) * .58);
  /* .08 e não .19: com o corpo em cor SÓLIDA o véu não tem degradê por baixo
   * para se misturar — ele só clareia, e clarear o corpo é o que fazia o
   * rótulo branco sumir. */
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
[dir] .ocb::after {
  width: calc(var(--ocb-slant) + var(--ocb-h) * .045);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
}

[dir] .ocb:hover { filter: brightness(1.04); }
[dir] .ocb:active { filter: brightness(.96); transform: scale(.994); }
[dir] .ocb:focus-visible { outline: 2px solid #FFC24A; outline-offset: 3px; }

/* 🔴 O rótulo precisa de `z-index: 1`. Sem ele some: `::after` é pintado
 * depois, e entre irmãos posicionados sem z-index quem vem depois vence. */
[dir] .ocb__label {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: calc(var(--ocb-h) * var(--ocb-label-ratio));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .004em;
  white-space: nowrap;
}

[dir] .ocb__arrow {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  width: calc(var(--ocb-arrow) + var(--ocb-slant));
  display: grid;
  place-items: center;
  color: var(--ocb-arrow-color);
  background: var(--ocb-cell);
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb__arrow svg {
  display: block;
  width: calc(var(--ocb-h) * .28);
  height: calc(var(--ocb-h) * .28);
}

/* ── tamanhos ─────────────────────────────────────────────────────────── */

[dir] .ocb--g  { --ocb-h: 78px; }
[dir] .ocb--m  { --ocb-h: 56px; }
[dir] .ocb--p  { --ocb-h: 44px; }   /* piso mobile: alvo de toque */
[dir] .ocb--xp { --ocb-h: 34px; --ocb-label-ratio: .353; }   /* só desktop denso */

/* Largura total da coluna: mantém o ângulo, só estica o corpo. */
[dir] .ocb--block { display: flex; width: 100%; }

/* ── botão SEM a célula de seta ───────────────────────────────────────────
 *
 * 🔴 O padding do `.ocb` reserva `célula + respiro` à direita, e a célula vale
 * 0,846 × h. Um botão sem o `<span class="ocb__arrow">` dentro fica com esse
 * espaço VAZIO: num botão de 44px são 37px de nada colados ao rótulo, e ele
 * parece desalinhado sem que nada esteja errado no desenho.
 *
 * 🔑 A seta é para a ação PRINCIPAL. Num par de CTAs, num MÁX de campo, num
 * atalho de 25%, ela não diz nada que o rótulo já não diga. Quem não leva seta
 * leva esta classe, e o respiro volta a ser simétrico. */
[dir] .ocb--sem-seta {
  padding-right: calc(var(--ocb-h) * var(--ocb-pad-ratio));
}
[dir] .ocb--sem-seta > .ocb__arrow { display: none; }

/* ── paletas ──────────────────────────────────────────────────────────── */

[dir] .ocb--positive {
  --ocb-fill: var(--ocb-fill-positive);
  --ocb-cell: var(--ocb-cell-positive);
  --ocb-arrow-color: var(--ocb-arrow-positive);
}
[dir] .ocb--negative {
  --ocb-fill: var(--ocb-fill-negative);
  --ocb-cell: var(--ocb-cell-negative);
  --ocb-arrow-color: var(--ocb-arrow-negative);
}
[dir] .ocb--neutral {
  --ocb-fill: var(--ocb-fill-neutral);
  /* A célula acompanha: o mesmo cinza escurecido, com o fio de 1,5px sobre a
   * diagonal — não um véu preto por cima de uma cor lisa. */
  --ocb-cell: linear-gradient(90deg, rgba(220,226,236,.14) 0 1.5px, #2B2F35 1.5px);
  --ocb-arrow-color: #C3CAD4;
}

/* ── outline ──────────────────────────────────────────────────────────────
 * 🔑 O rim é GEOMETRIA, não `box-shadow`: um inset box-shadow é recortado
 * pelo `clip-path` e desaparece justamente nas DUAS DIAGONAIS — o contorno
 * ficaria só no topo e na base e a forma se dissolveria. O accent preenche o
 * elemento e o `::before`, com `inset: 1px` e o mesmo clip, carrega o
 * preenchimento: o accent sobra como faixa de 1px nas quatro arestas. */

[dir] .ocb--outline {
  background: color-mix(in oklab, var(--ocb-accent) 44%, transparent);
  box-shadow: none;
}
[dir] .ocb--outline::before {
  inset: 1px;
  width: auto;
  background:
    linear-gradient(90deg, rgba(255,165,31,.22), rgba(255,165,31,.06) 46%, rgba(255,165,31,.02) 100%),
    var(--ocb-surface);
}
[dir] .ocb--outline::after { display: none; }
[dir] .ocb--outline .ocb__label { color: #FFC24A; }
[dir] .ocb--outline .ocb__arrow {
  background: linear-gradient(90deg, rgba(255,165,31,.10), rgba(255,165,31,.04));
  color: #C4841F;
}

/* ── só seta (paginação, avançar/voltar) ──────────────────────────────── */

[dir] .ocb--icon {
  padding: 0;
  width: calc(var(--ocb-h) * 1.64);
}
[dir] .ocb--icon .ocb__arrow { display: none; }
[dir] .ocb--icon svg {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--ocb-h) * .34);
  height: calc(var(--ocb-h) * .34);
  color: #3A2000;
}
[dir] .ocb--icon.ocb--outline svg { color: #C4841F; }

/* ── desativado ───────────────────────────────────────────────────────── */

[dir] .ocb:disabled,
[dir] .ocb[aria-disabled="true"] {
  --ocb-fill: var(--ocb-fill-disabled);
  --ocb-cell: linear-gradient(90deg, rgba(160,166,176,.10) 0 1.5px, #1A1B1E 1.5px);
  --ocb-arrow-color: #4C5158;
  cursor: not-allowed;
  box-shadow: none;
}
[dir] .ocb:disabled .ocb__label,
[dir] .ocb[aria-disabled="true"] .ocb__label { color: #878D97; }
[dir] .ocb:disabled::after,
[dir] .ocb[aria-disabled="true"]::after { display: none; }
[dir] .ocb:disabled:hover,
[dir] .ocb[aria-disabled="true"]:hover { filter: none; }

/* ── feito ────────────────────────────────────────────────────────────────
 * O verde de "deu certo", e ele SOBREVIVE ao `:disabled`. O cinza do
 * desativado é certo para um botão que ainda não dá para clicar e errado para
 * um que já foi: aqui o verde é o recibo. Mesma exceção que o modelo 1 abre
 * em `.oc-bt-bom:disabled`.
 *
 * 🔑 É modificador PRÓPRIO, não o `.ocb--positive`: um Long desativado tem de
 * parecer desativado, e sobrecarregar a paleta apagaria essa distinção. */

[dir] .ocb--feito,
[dir] .ocb--feito:disabled,
[dir] .ocb--feito[aria-disabled="true"] {
  --ocb-fill: var(--ocb-fill-positive);
  --ocb-cell: var(--ocb-cell-positive);
  --ocb-arrow-color: var(--ocb-arrow-positive);
  cursor: default;
}
[dir] .ocb--feito:disabled .ocb__label,
[dir] .ocb--feito[aria-disabled="true"] .ocb__label { color: #FFFFFF; }

/* ── carregando ───────────────────────────────────────────────────────── */

[dir] .ocb--loading { pointer-events: none; overflow: hidden; }
[dir] .ocb--loading .ocb__label { color: rgba(255,255,255,.86); }
[dir] .ocb--loading::after {
  width: 26%;
  clip-path: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  animation: ocbSweep 1.5s linear infinite;
}
@keyframes ocbSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(220%); }
}
@media (prefers-reduced-motion: reduce) {
  [dir] .ocb--loading::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Par dividido — duas ações opostas num bloco só
 * Três diagonais no MESMO ângulo: os dois cortes externos e o divisor, com
 * 3px de folga preta no divisor. Raio zero.
 * ══════════════════════════════════════════════════════════════════════════ */

[dir] .ocb-pair {
  --ocb-h: 66px;
  --ocb-slant: calc(var(--ocb-h) * var(--ocb-slant-ratio));
  --ocb-gap: 3px;

  position: relative;
  height: var(--ocb-h);
  background: #000000;
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb-pair--m { --ocb-h: 56px; }
[dir] .ocb-pair--s { --ocb-h: 48px; }

[dir] .ocb-pair__side {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: calc(50% + var(--ocb-slant) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ocb-h) * .045);
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: filter .15s ease;
}
[dir] .ocb-pair__side:hover { filter: brightness(1.05); }
[dir] .ocb-pair__side:active { filter: brightness(.95); }
[dir] .ocb-pair__side:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -3px; }
/* Desativado (a ordem está indo): o handoff não desenha estado para o par, e
 * trocar as duas metades pelo cinza do `.ocb:disabled` apagaria a única cor
 * que diz de que LADO a ordem foi. Dessaturar e escurecer diz "trabalhando"
 * sem tirar a leitura de verde/vermelho. */
[dir] .ocb-pair__side:disabled,
[dir] .ocb-pair__side[aria-disabled="true"] {
  filter: saturate(.55) brightness(.78);
  cursor: not-allowed;
}
[dir] .ocb-pair__side:disabled:hover,
[dir] .ocb-pair__side[aria-disabled="true"]:hover { filter: saturate(.55) brightness(.78); }

[dir] .ocb-pair__side::before,
[dir] .ocb-pair__side::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  pointer-events: none;
}

/* Metade A — a borda de entrada é o corte externo esquerdo. */
[dir] .ocb-pair__side--a {
  left: 0;
  padding: 0 calc(var(--ocb-slant) / 2) 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.40), rgba(255,255,255,0) 62%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 62%) bottom / 100% 1px no-repeat,
    var(--ocb-fill-positive);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb-pair__side--a::before,
[dir] .ocb-pair__side--a::after {
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
/* 🔴 Este véu cobria 40% da largura com branco a .15 e LAVAVA a cor: medido no
 * verde, ele clareava #009457 para perto de um pastel, e era metade da razão
 * pela qual o rótulo branco sumia. O wash existe para dar a entrada viva da
 * esquerda, e a .06 ele ainda dá — sem apagar a cor que o botão precisa
 * afirmar. */
[dir] .ocb-pair__side--a::before {
  width: calc(var(--ocb-slant) + 40%);
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
[dir] .ocb-pair__side--a::after {
  width: calc(var(--ocb-slant) + 3px);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
}

/* Metade B — a borda de entrada é o divisor central. */
[dir] .ocb-pair__side--b {
  right: 0;
  padding: 0 0 0 calc(var(--ocb-slant) / 2);
  background:
    linear-gradient(90deg, rgba(255,255,255,.40), rgba(255,255,255,0) 62%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 62%) bottom / 100% 1px no-repeat,
    var(--ocb-fill-negative);
  clip-path: polygon(calc(var(--ocb-slant) + var(--ocb-gap)) 0, 100% 0, 100% 100%, var(--ocb-gap) 100%);
}
[dir] .ocb-pair__side--b::before,
[dir] .ocb-pair__side--b::after {
  clip-path: polygon(calc(var(--ocb-slant) + var(--ocb-gap)) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, var(--ocb-gap) 100%);
}
[dir] .ocb-pair__side--b::before {
  width: calc(var(--ocb-slant) + var(--ocb-gap) + 40%);
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
[dir] .ocb-pair__side--b::after {
  width: calc(var(--ocb-slant) + var(--ocb-gap) + 3px);
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
}

[dir] .ocb-pair__label {
  position: relative;
  z-index: 1;
  font-size: calc(var(--ocb-h) * .19);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(255,255,255,.76);
}
[dir] .ocb-pair__value {
  position: relative;
  z-index: 1;
  font-size: calc(var(--ocb-h) * .333);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

/* Variante sem preço — o par do terminal e do mobile.
 *
 * 🔑 `.39 × h` (dono, 10/09/2026: "quero a escrita maior tbm"). Num par de
 * 48px são 18,7px em peso 700 — e o número não é de gosto: 18,66px em negrito
 * é o PISO de "texto grande", onde a régua de contraste cai de 4,5:1 para
 * 3:1. O verde renderizado dá 3,6:1; a 17px ele ficaria abaixo da régua que
 * lhe cabe, a 18,7 fica acima com folga. Tamanho e cor se resolvem juntos. */
[dir] .ocb-pair--label-only .ocb-pair__label {
  font-size: calc(var(--ocb-h) * .39);
  font-weight: 700;
  letter-spacing: .01em;
  color: #FFFFFF;
}

/* Par EMPILHADO (Long em cima, Short embaixo): o gap é 0.23 × h. */
[dir] .ocb-coluna {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ocb-col-h, 56px) * .23);
}
[dir] .ocb-coluna--p { --ocb-col-h: 44px; }
[dir] .ocb-coluna--xp { --ocb-col-h: 34px; }