/* Tema das páginas construídas.
 *
 * IMPORTANTE: o site define a raiz como 13.33vw (o esquema pxtorem), então 1rem
 * vale ~192px a 1440 e ~305px a 2291. Qualquer rem aqui explode — a primeira
 * versão desta folha renderizou um h1 de 610px. Tudo abaixo é px, e o container
 * rebaseia a fonte para o corpo não herdar a raiz gigante.
 */

.oc-main {
  font-size: 16px;
  line-height: 1.65;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px clamp(16px, 4vw, 32px) 112px;
  color: var(--foreground-one, #fff);
}

.oc-main :where(h1, h2, h3, p, li, td, th, div, span, a) { font-size: inherit; }

.oc-lede { max-width: 62ch; }

.oc-eyebrow {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--offcode-brand, #f7931a);
  font-weight: 600;
  margin: 0 0 12px;
}

.oc-title {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.oc-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--foreground-two, rgba(255, 255, 255, .64));
  margin: 0 0 40px;
}

.oc-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 40px 0;
}

.oc-card {
  background: var(--container-two, rgba(255, 255, 255, .04));
  border: 1px solid var(--line-four, rgba(255, 255, 255, .08));
  border-radius: 16px;
  padding: 24px;
}

.oc-card h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
.oc-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--foreground-two, rgba(255, 255, 255, .64));
}

/* Texto longo: as institucionais chegam como HTML pronto do front-go. */
.oc-body {
  /* Respiro no topo. Sem ele o <h1> encosta na barra de navegacao — a pagina
   * abre com o titulo grudado no menu, e as duas coisas competem pela mesma
   * linha de leitura. Vale para todas as institucionais, nao so para as duas
   * paginas escritas hoje. */
  padding-top: 44px;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--foreground-two, rgba(255, 255, 255, .72));
}

.oc-body h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em;
              color: var(--foreground-one, #fff); margin: 0 0 20px; text-wrap: balance; }
.oc-body h2 { font-size: 24px; color: var(--foreground-one, #fff); margin: 44px 0 12px;
              letter-spacing: -.01em; }
.oc-body h3 { font-size: 18px; color: var(--foreground-one, #fff); margin: 32px 0 8px; }
.oc-body p { margin: 0 0 16px; }
.oc-body ul, .oc-body ol { margin: 0 0 20px; padding-left: 20px; }
.oc-body li { margin-bottom: 7px; }
.oc-body a { color: var(--offcode-brand, #f7931a); }
.oc-body strong { color: var(--foreground-one, #fff); }
.oc-body small { font-size: 13px; }

.oc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.oc-body th, .oc-body td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-four, rgba(255, 255, 255, .08));
}
.oc-body th { color: var(--foreground-one, #fff); font-weight: 600; }

/* Tabela larga rola dentro do próprio bloco; a página nunca rola de lado. */
.oc-body > table { display: block; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; }

.oc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--offcode-brand, #f7931a);
  color: #0a0a0a;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 16px;
}
.oc-cta:hover { filter: brightness(1.08); }

.oc-note {
  border-left: 2px solid var(--offcode-brand, #f7931a);
  background: rgba(247, 147, 26, .07);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 28px 0;
  font-size: 15px;
}

/* Bloco de ESTADO da pré-venda.
 *
 * Não é aviso decorativo: é o campo que responde "há oferta aberta?". Enquanto
 * a resposta for não, é a informação mais importante da página — e a que
 * protege quem chega procurando uma pré-venda que alguém prometeu por fora.
 *
 * Por isso ele não usa o laranja da marca, que aqui significa "clique". Usa a
 * cor neutra de superfície com borda visível: é um estado, não uma ação. */
/* 🔑 Seletor com DUAS classes de proposito. A origem traz um reset
 * `[dir] *` — especificidade (0,1,0), a mesma de `.oc-estado` — e ele vem
 * depois na cascata, entao vence o empate e zera a borda. O sintoma e cruel:
 * a regra aplica METADE (fundo e padding passam, borda nao) e o navegador nao
 * reporta erro nenhum. Ja aconteceu antes neste projeto. */
.oc-body .oc-estado {
  border: 1px solid var(--line-three, rgba(255, 255, 255, .14));
  background: var(--background-two, rgba(255, 255, 255, .03));
  border-radius: 12px;
  padding: 20px 22px;
  margin: 28px 0 40px;
}
.oc-body .oc-estado p { margin: 0 0 10px; font-size: 15px; }
.oc-body .oc-estado p:last-child { margin-bottom: 0; }
.oc-body .oc-estado-titulo {
  color: var(--foreground-one, #fff);
  font-weight: 600;
  font-size: 17px !important;
}

/* Lista vazia do Launchpad.
 *
 * A aba responde "o que tem em pré-venda?". Enquanto a resposta for "nada", o
 * bloco vazio é o conteúdo — e tem de PARECER uma lista sem itens, não um
 * parágrafo. Por isso a borda tracejada: é a forma que um leitor reconhece
 * como "aqui caberiam linhas".
 *
 * Duas classes no seletor pelo mesmo motivo do `.oc-estado`: o reset `[dir] *`
 * da origem tem especificidade (0,1,0) e vem depois na cascata — num empate
 * ele vence e zera a borda, aplicando metade da regra sem erro nenhum. */
.oc-body .oc-vazio {
  border: 1px dashed var(--line-three, rgba(255, 255, 255, .16));
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 32px;
  text-align: center;
}
.oc-body .oc-vazio p { margin: 0 0 8px; font-size: 14px; }
.oc-body .oc-vazio p:last-child { margin-bottom: 0; }
.oc-body .oc-vazio-titulo {
  color: var(--foreground-one, #fff);
  font-weight: 600;
  font-size: 16px !important;
}
/* Numa aba de listagem os títulos separam LISTAS, não capítulos de texto:
   menos respiro acima do que no corpo corrido das institucionais. */
.oc-body.oc-lista h2 { margin: 36px 0 14px; font-size: 20px; }

/* ── Launchpad: cartões de oferta e o diálogo de compra ──────────────────
 *
 * Duas classes em cada seletor, como o `.oc-estado`: o reset `[dir] *` da
 * origem empata em especificidade com uma classe só e vence por vir depois. */
.oc-body .oc-lp-lista { display: grid; gap: 14px; margin: 0 0 32px; }
.oc-body .oc-lp-lista:empty { display: none; }

.oc-body .oc-lp-oferta {
  border: 1px solid var(--line-three, rgba(255, 255, 255, .14));
  background: var(--background-two, rgba(255, 255, 255, .03));
  border-radius: 12px;
  padding: 20px 22px;
}
.oc-body .oc-lp-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.oc-body .oc-lp-topo h3 { margin: 0; font-size: 18px; color: var(--foreground-one, #fff); }
.oc-body .oc-lp-sym {
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--foreground-two, rgba(255, 255, 255, .6));
}
.oc-body .oc-lp-selo {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line-three, rgba(255, 255, 255, .16));
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.oc-body .oc-lp-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 20px; margin: 18px 0 0;
}
.oc-body .oc-lp-dados dt {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--foreground-two, rgba(255, 255, 255, .55)); margin: 0 0 3px;
}
.oc-body .oc-lp-dados dd { margin: 0; font-size: 15px; color: var(--foreground-one, #fff); }
.oc-body .oc-lp-acao { margin: 20px 0 0; }
.oc-body .oc-lp-fechada { margin: 0; font-size: 14px; }

.oc-body .oc-lp-comprar, .oc-lp-modal .oc-lp-confirmar {
  background: var(--offcode-brand, #f7931a); color: #0b0b0c;
  border: 0; border-radius: 999px; padding: 11px 24px;
  font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.oc-body .oc-lp-comprar:hover, .oc-lp-modal .oc-lp-confirmar:hover { filter: brightness(1.08); }
.oc-lp-modal .oc-lp-confirmar:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* O diálogo mora no <body>, fora do `.oc-body` — por isso os seletores abaixo
 * não levam o prefixo. */
.oc-lp-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .66);
  display: grid; place-items: center; padding: 20px;
}
.oc-lp-modal .oc-lp-caixa {
  /* 🔴 Isto era `min(28rem, 100%)` e o diálogo abriu com 1800px de largura,
   * ocupando a tela inteira. O aviso está na LINHA 3 desta folha: a raiz do
   * site é `13.33vw` (esquema pxtorem), e aqui ela mede 240px — então
   * `28rem` são 6.720px e o `min()` cai no 100%.
   *
   * 🔑 `rem` não é unidade absoluta: ela é o que a RAIZ disser. Num site
   * que escala por pxtorem, todo `rem` escrito à mão explode — e o
   * resultado ainda é CSS válido, sem erro em lugar nenhum.
   *
   * Escrevi isto no fim de um arquivo cujo topo avisa exatamente contra
   * isso. Ler o cabeçalho antes de escrever no rodapé. */
  width: min(450px, 100%);
  background: var(--background-one, #111214);
  border: 1px solid var(--line-three, rgba(255, 255, 255, .14));
  border-radius: 14px; padding: 24px;
  color: var(--foreground-one, #fff);
  font: 15px/1.6 Inter, system-ui, sans-serif;
}
.oc-lp-modal h3 { margin: 0 0 18px; font-size: 18px; }
.oc-lp-modal .oc-lp-campo { display: block; font-size: 13px; margin: 0 0 14px; }
.oc-lp-modal .oc-lp-campo input {
  display: block; width: 100%; margin-top: 6px;
  background: var(--background-two, rgba(255, 255, 255, .05));
  border: 1px solid var(--line-three, rgba(255, 255, 255, .16));
  border-radius: 8px; padding: 11px 12px;
  color: inherit; font: 16px/1.2 Inter, system-ui, sans-serif;
}
.oc-lp-modal .oc-lp-custo { margin: 0 0 14px; font-size: 14px; }
/* O aviso de que o token não existe. Não é nota de rodapé: é a informação que
 * separa esta compra de qualquer outra da plataforma. */
.oc-lp-modal .oc-lp-aviso {
  margin: 0 0 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55;
  border-left: 3px solid var(--offcode-brand, #f7931a);
  background: rgba(247, 147, 26, .08); border-radius: 0 8px 8px 0;
}
.oc-lp-modal .oc-lp-aceite {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; margin: 0 0 16px; cursor: pointer;
}
.oc-lp-modal .oc-lp-aceite input { margin-top: 3px; flex: 0 0 auto; }
.oc-lp-modal .oc-lp-erro { margin: 0 0 12px; font-size: 13px; color: #ff6b6b; }
.oc-lp-modal .oc-lp-pago { margin: 0 0 16px; font-size: 14px; }
.oc-lp-modal .oc-lp-botoes { display: flex; gap: 10px; justify-content: flex-end; }
.oc-lp-modal .oc-lp-cancelar {
  background: transparent; color: inherit;
  border: 1px solid var(--line-three, rgba(255, 255, 255, .18));
  border-radius: 999px; padding: 11px 20px;
  font: 500 15px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .oc-lp-modal .oc-lp-caixa { background: #fff; color: #101114; }
}

/* Versão e data de vigência dos documentos legais: dois <span> irmãos e
 * nenhum separador — a tela lia «Versão 1.0Data de vigência 13 de agosto».
 * O flex com gap separa em todos os idiomas de uma vez (auditoria 31/08). */
[dir] .legal-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
[dir] .legal-meta > span + span::before { content: '· '; color: currentColor; opacity: .45; }

/* ── bloco de código não empurra a página ────────────────────────────────
 * 🔴 Medido em 09/09/2026 pela `prova_sem_rolagem.py`: `/m/pt-br/api-docs/`
 * fazia o `#__nuxt` rolar 136 px a 360 px de tela, 106 px a 390 e 67 px a 430.
 * A causa era um `<code>` dentro de `<pre>`, 480 px de largura com o
 * `white-space: pre` que vem do navegador, sem ancestral nenhum recortando —
 * as 60 páginas com exemplo de código tinham o mesmo defeito.
 *
 * 🔑 O conserto certo não é cortar o código nem quebrá-lo em qualquer lugar
 * (JSON quebrado no meio da chave fica ilegível): é o BLOCO virar um trilho
 * horizontal próprio. Trilho interno pode rolar; a página, não — que é
 * exatamente o contrato que a prova cobra. */
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}