/* Os fluxogramas sao SVG de fundo claro, gerados pelo mermaid. No tema escuro
   eles ficariam como ilhas de luz com contorno duro; a moldura branca com canto
   arredondado os apresenta como figura, e nao como falha de tema. */
body > .container:not(.template-home) main img[src*="figuras/"],
body > .container:not(.template-home) main img[src$=".svg"] {
  background: #ffffff;
  border-radius: 8px;
  padding: 0.75rem;
  max-width: 100%;
  height: auto;
}

/* Tabelas largas de referencia rolam dentro de si, em vez de esticar a pagina. */
body > .container:not(.template-home) main table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* ==========================================================================
   A HOME
   --------------------------------------------------------------------------
   O pkgdown entrega a home dentro de `.container` com `main.col-md-9` e uma
   `aside.col-md-3` vazia (home.sidebar: false). Aqui a home passa a ocupar a
   largura toda, e cada secao pinta o proprio fundo; a largura de leitura volta
   pelo `.ocb-wrap` interno. Os tokens de cor sao os do mockup aprovado.
   ========================================================================== */

:root {
  --ocb-fundo:      #F6FAFB;
  --ocb-card:       #FFFFFF;
  --ocb-faixa:      #FFFFFF;
  --ocb-hero-topo:  #EAF6F8;
  --ocb-sup:        #EAF3F5;
  --ocb-sup2:       #EAF6F8;
  --ocb-borda:      #D9E8EB;
  --ocb-borda2:     #C9DCE0;
  --ocb-tinta:      #1C3540;
  --ocb-texto:      #3B5560;
  --ocb-fraco:      #6B8891;
  --ocb-teal:       #1E8A99;
  --ocb-teal-esc:   #156B78;
  --ocb-laranja:    #F26522;
  --ocb-ciano:      #7FC8D3;
  --ocb-pessego:    #F8B08A;
  --ocb-verde:      #2E9E5B;
  --ocb-escuro:     #1C3540;
}

[data-bs-theme="dark"] {
  --ocb-fundo:      #142731;
  --ocb-card:       #1C3540;
  --ocb-faixa:      #18303A;
  --ocb-hero-topo:  #1A3A45;
  --ocb-sup:        #21404C;
  --ocb-sup2:       #1F3B46;
  --ocb-borda:      #2B4A57;
  --ocb-borda2:     #335866;
  --ocb-tinta:      #EAF5F7;
  --ocb-texto:      #C0D5DC;
  --ocb-fraco:      #8AA6AF;
  --ocb-teal:       #4FB3C1;
  --ocb-teal-esc:   #7FC8D3;
  --ocb-laranja:    #FF8149;
  --ocb-escuro:     #10222B;
}

.template-home {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  background: var(--ocb-fundo);
  color: var(--ocb-texto);
}

.template-home > .row { margin-left: 0; margin-right: 0; }
.template-home main.col-md-9 { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0; }
.template-home aside.col-md-3 { display: none; }
.template-home > footer {
  padding: 18px clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--ocb-borda);
  font-size: 13px;
  color: var(--ocb-fraco);
}
.template-home > footer p { color: var(--ocb-fraco); margin: 0; }

/* O pkgdown insere <img class="logo"> e envolve o primeiro h1 em .page-header.
   No hero o logo ja esta no banner e na navbar; o h1 fica, o resto some. */
.template-home .ocb-hero-text img.logo { display: none; }
.template-home .ocb-hero-text .page-header {
  margin: 0; padding: 0; border: 0;
}

/* --- estrutura ----------------------------------------------------------- */

.ocb-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}
.ocb-secao { padding-top: 64px; padding-bottom: 64px; }

.template-home h1, .template-home h2, .template-home h3 {
  color: var(--ocb-tinta);
  font-weight: 700;
  margin: 0;
  border: 0;
}
.template-home h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; }
.template-home h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; max-width: 22em; }
.template-home h3 { font-size: 20px; }
.template-home p { color: var(--ocb-texto); }
.template-home a { color: var(--ocb-teal-esc); text-decoration: none; }
.template-home a:hover { color: var(--ocb-laranja); }

.ocb-kicker {
  display: block;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ocb-teal);
  margin-bottom: 10px;
}
.ocb-kicker-laranja { color: var(--ocb-laranja); }
.ocb-kicker-ciano   { color: #7FC8D3; }

.ocb-link-forte { font-weight: 600; white-space: nowrap; }
.ocb-link-pessego { color: #F8B08A !important; font-weight: 600; }
.ocb-link-pessego:hover { color: #FFFFFF !important; }

/* --- hero ---------------------------------------------------------------- */

.ocb-hero {
  background: linear-gradient(180deg, var(--ocb-hero-topo) 0%, var(--ocb-fundo) 100%);
  border-bottom: 1px solid var(--ocb-borda);
}
.ocb-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 64px;
}
.ocb-hero-text > * + * { margin-top: 22px; }
.ocb-hero-text .ocb-kicker { margin-bottom: 0; }
.ocb-lead { font-size: 20px; line-height: 1.5; }

.ocb-install {
  background: #1C3540;
  color: #E6F1F3;
  border-radius: 8px;
  padding: 14px 18px;
  overflow-x: auto;
}
/* O bloco e um fence ```r, nao <code> com <span>: o pandoc realca sozinho e o
   espelho .md sai como codigo copiavel. As cores vem das classes do highlight. */
.ocb-install div.sourceCode,
.ocb-install pre {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
/* Sem `white-space` aqui: a regra `main pre.downlit code` mais abaixo neste
   arquivo e mais especifica e ja da pre-wrap, que e o comportamento certo — a
   linha cabe inteira no desktop e quebra no celular em vez de rolar. */
.ocb-install pre code {
  background: none; padding: 0;
  font-size: 15px;
}
.ocb-install pre, .ocb-install pre code, .ocb-install pre code span {
  color: #E6F1F3;
}
.ocb-install .fu, .ocb-install .sc, .ocb-install .kw,
[data-bs-theme="dark"] .ocb-install .fu,
[data-bs-theme="dark"] .ocb-install .sc,
[data-bs-theme="dark"] .ocb-install .kw { color: #7FC8D3 !important; }
.ocb-install .st,
[data-bs-theme="dark"] .ocb-install .st { color: #F8B08A !important; }
.ocb-install .op,
[data-bs-theme="dark"] .ocb-install .op { color: #E6F1F3 !important; }
.ocb-install a, .ocb-install a code { color: inherit !important; text-decoration: none; }

.ocb-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ocb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px;
  padding: 12px 22px; border-radius: 8px;
}
.ocb-btn-laranja { background: #F26522; color: #FFFFFF !important; }
.ocb-btn-laranja:hover { background: #D8551A; color: #FFFFFF !important; }
.ocb-btn-claro {
  background: var(--ocb-card); color: var(--ocb-teal-esc) !important;
  border: 1.5px solid var(--ocb-borda2);
}
.ocb-btn-claro:hover { border-color: var(--ocb-teal); }
.ocb-btn-nu { padding: 12px 6px; }

.ocb-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* O markdown embrulha o conteudo do bloco num <p>, de modo que os badges nao
   sao filhos diretos de .ocb-badges: o align-items acima nao os alcancava, e
   cada um se alinhava pela linha de base do texto. Como o badge do Actions e
   uma imagem e os outros sao spans, a imagem ficava fora de eixo. A correcao e
   fazer do proprio <p> o flex container. */
.ocb-badges p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.ocb-badge {
  display: inline-flex; font-size: 12px; font-weight: 600;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--ocb-borda2);
}
.ocb-badge-k { background: var(--ocb-sup); color: var(--ocb-texto); padding: 3px 8px; }
.ocb-badge-v { background: #1E8A99; color: #FFFFFF; padding: 3px 8px; }
.ocb-badge-v.ocb-verde { background: #2E9E5B; }
/* O mapa e denso e o site o exibe com cerca de 620px. Quem quiser conferir uma
   seta abre o arquivo em tamanho cheio; a lupa no cursor e o unico aviso de que
   da para fazer isso. */
.ocb-moldura a { display: block; cursor: zoom-in; }

.ocb-badge-img { display: inline-flex; }
/* 25px e a altura que os badges proprios tomam do seu proprio texto. */
.ocb-badge-img img { height: 25px; display: block; }

.ocb-hero-arte { display: flex; justify-content: center; align-items: center; }
.ocb-hero-arte img {
  width: 100%; max-width: 420px; height: auto;
  /* A arte do hero e o proprio logo do pacote (man/figures/logo.png): um
     hexagono regular de 600x600 com fundo TRANSPARENTE. Por isso aqui nao ha
     cartao -- nem cor de fundo, nem border-radius, nem sombra retangular, que
     desenhariam um quadrado em volta e anulariam o recorte da forma. A sombra
     e um drop-shadow, que segue o contorno do hexagono em vez da caixa. O
     aspect-ratio 1/1 apenas declara o que a imagem ja e, e reserva o espaco
     antes de ela carregar. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.38));
}
/* No tema escuro a imagem antiga ganhava borda e sombra de caixa, que davam
   contorno a um retangulo. O logo hexagonal e transparente: uma borda de caixa
   desenharia um retangulo fantasma em volta dele. Fica so a sombra, e como
   drop-shadow, que segue a forma. */
[data-bs-theme="dark"] .ocb-hero-arte img {
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.55));
}

/* --- duas colunas com o terminal ----------------------------------------- */

.ocb-duas-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
  padding-bottom: 24px;
}
.ocb-duas-colunas > div > * + * { margin-top: 14px; }

.ocb-terminal {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ocb-borda2);
  box-shadow: 0 8px 28px rgba(28, 53, 64, 0.08);
}
.ocb-terminal-barra {
  display: flex; align-items: center; gap: 8px;
  background: var(--ocb-sup);
  padding: 8px 14px;
  border-bottom: 1px solid var(--ocb-borda2);
  font-size: 13px; color: var(--ocb-texto);
}
.ocb-ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ocb-ponto-l { background: #F26522; }
.ocb-ponto-a { background: #F2B822; }
.ocb-ponto-v { background: #2E9E5B; }
.ocb-terminal-nome { margin-left: 8px; font-family: var(--bs-font-monospace); }

/* o bloco de codigo escuro, dentro da moldura */
.ocb-terminal div.sourceCode,
.ocb-terminal pre {
  background: #1C3540 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.ocb-terminal pre { padding: 18px 20px; }
.ocb-terminal pre, .ocb-terminal pre code, .ocb-terminal pre code span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ocb-terminal pre, .ocb-terminal pre code, .ocb-terminal pre code span { color: #E6F1F3; }
.ocb-terminal pre code { font-size: 13.5px; line-height: 1.6; }
.ocb-terminal .fu, .ocb-terminal .kw, .ocb-terminal .cf { color: #7FC8D3; }
.ocb-terminal .st, .ocb-terminal .dv, .ocb-terminal .fl { color: #F8B08A; }
.ocb-terminal .co { color: #93AEB7; }
.ocb-terminal .wa, .ocb-terminal .er { color: #F2B822; }
.ocb-terminal a, .ocb-terminal a code { color: inherit !important; text-decoration: none; }
.ocb-terminal .sourceCode a:hover { text-decoration: underline; }

/* --- cartoes ------------------------------------------------------------- */

.ocb-grid-4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin-top: 24px;
}
.ocb-grid-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: 24px;
}

.ocb-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--ocb-card);
  border: 1px solid var(--ocb-borda);
  border-radius: 12px;
  padding: 24px;
}
.ocb-card p { font-size: 15px; margin: 0; flex: 1 1 auto; }
/* Os icones sao mascaras em CSS, nao <svg> no markup: svg inline vira URI
   base64 gigante no espelho .md e no llms.txt que os modelos leem. */
.ocb-card::before {
  content: "";
  width: 28px; height: 28px;
  flex: 0 0 auto;
  background-color: var(--ocb-teal);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ocb-card-tse::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M8 9h8M8 13h5'/><path d='M16 15l1.5 1.5L20 14'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M8 9h8M8 13h5'/><path d='M16 15l1.5 1.5L20 14'/></svg>");
}
.ocb-card-cbo::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V9l8-5 8 5v11'/><path d='M9 20v-6h6v6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V9l8-5 8 5v11'/><path d='M9 20v-6h6v6'/></svg>");
}
.ocb-card-cod::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V8l7-4 7 4v13'/><path d='M9 21v-4h6v4M9 12h2M13 12h2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V8l7-4 7 4v13'/><path d='M9 21v-4h6v4M9 12h2M13 12h2'/></svg>");
}
.ocb-card-isco::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/></svg>");
}
.ocb-btn-laranja::after {
  content: "";
  width: 16px; height: 16px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
}
.ocb-assinatura {
  align-self: flex-start;
  font-size: 13px; color: var(--ocb-teal-esc);
  background: var(--ocb-sup);
  padding: 6px 10px; border-radius: 6px;
}

.ocb-card-escuro {
  display: flex; flex-direction: column; gap: 10px;
  background: #1C3540; border-radius: 12px; padding: 24px;
}
.ocb-card-escuro h3 { color: #FFFFFF !important; }
.ocb-card-escuro p { color: #C7DCE1; font-size: 15px; margin: 0; }
.ocb-card-escuro .ocb-tag {
  font-family: var(--bs-font-monospace); font-size: 13px; color: #7FC8D3;
}
.ocb-card-teal { background: #1E8A99; }
.ocb-card-teal p { color: #E6F5F7; }
.ocb-card-teal .ocb-tag { color: #D6F0F4; }

/* --- por onde comecar ---------------------------------------------------- */

.ocb-faixa-clara {
  background: var(--ocb-faixa);
  border-top: 1px solid var(--ocb-borda);
  border-bottom: 1px solid var(--ocb-borda);
}
.ocb-titulo-linha {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}

.ocb-card-artigo {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--ocb-borda);
  border-radius: 12px;
  padding: 24px;
  background: var(--ocb-fundo);
  transition: border-color .15s ease, transform .15s ease;
}
.ocb-card-artigo:hover { border-color: var(--ocb-teal); transform: translateY(-2px); }
.ocb-card-artigo h3 { font-size: 19px; }
.ocb-card-artigo p { font-size: 15px; margin: 0; }
.ocb-card-artigo:hover h3 { color: var(--ocb-teal-esc); }

.ocb-etiqueta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ocb-teal);
}
.ocb-etiqueta-laranja { color: var(--ocb-laranja); }
.ocb-etiqueta-pessego { color: #F8B08A; }
.ocb-etiqueta-ciano   { color: #7FC8D3; }

.ocb-card-checa {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  border: 1px dashed var(--ocb-borda2);
  border-radius: 12px; padding: 24px;
  background: var(--ocb-sup2);
}
.ocb-card-checa h3 { font-size: 19px; color: var(--ocb-teal-esc) !important; }
.ocb-card-checa p { font-size: 14px; margin: 0; }
.ocb-card-checa div.sourceCode, .ocb-card-checa pre {
  background: transparent !important; border: 0 !important; margin: 0 !important;
  padding: 0 !important;
}
.ocb-card-checa pre, .ocb-card-checa pre code { white-space: pre-wrap; word-break: break-word; }
.ocb-card-checa pre code { font-size: 13px; color: var(--ocb-tinta); }
.ocb-card-checa .co { color: #1F7A46; }
[data-bs-theme="dark"] .ocb-card-checa .co { color: #6ED49B; }
.ocb-card-checa a, .ocb-card-checa a code { color: inherit !important; }

/* --- mapa das traducoes --------------------------------------------------- */

.ocb-mapa {
  display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center;
}
.ocb-mapa > div > * + * { margin-top: 14px; }
.ocb-moldura {
  background: #FFFFFF;
  border: 1px solid var(--ocb-borda);
  border-radius: 12px;
  padding: 16px;
}
.ocb-moldura img { width: 100%; height: auto; display: block; }

/* --- publicacoes ---------------------------------------------------------- */

.ocb-faixa-escura { background: #1C3540; color: #E6F1F3; }
.ocb-publicacoes {
  display: grid; grid-template-columns: 4fr 8fr; gap: 56px;
  padding-top: 72px; padding-bottom: 72px;
}
.ocb-publicacoes h2 { color: #FFFFFF !important; }
.ocb-publicacoes > div > * + * { margin-top: 14px; }
.ocb-publicacoes p { color: #C7DCE1; }
.ocb-lista-pub { display: flex; flex-direction: column; gap: 14px; }
.ocb-pub {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 22px 24px;
}
.ocb-pub p { margin: 0; font-size: 17px; color: #FFFFFF !important; }
.ocb-pub-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #8AA0A7;
}
.ocb-pub-meta a { color: #7FC8D3 !important; font-family: var(--bs-font-monospace); }
.ocb-doi-vazio {
  font-family: var(--bs-font-monospace);
  border: 1px dashed #5E7C86; border-radius: 4px; padding: 2px 8px;
}

/* --- rodape da home ------------------------------------------------------- */

.ocb-rodape {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px; align-items: start;
}
.ocb-rodape > div > * + * { margin-top: 12px; }
.ocb-rodape p { font-size: 15px; }
.ocb-rodape pre {
  background: var(--ocb-sup) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  font-size: 13px; line-height: 1.6;
  color: var(--ocb-tinta);
  white-space: pre-wrap;
}
.ocb-rodape-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; font-size: 15px;
}
.ocb-rodape-links > div > p,
.ocb-rodape-links > div { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ocb-rodape-titulo { font-weight: 700; color: var(--ocb-tinta); }

/* --- telas estreitas ------------------------------------------------------ */

@media (max-width: 991px) {
  .ocb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocb-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocb-rodape-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ocb-hero-grid,
  .ocb-duas-colunas,
  .ocb-mapa,
  .ocb-publicacoes,
  .ocb-rodape { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ocb-hero-grid { padding-top: 40px; padding-bottom: 40px; }
  .ocb-secao { padding-top: 44px; padding-bottom: 44px; }
  .ocb-grid-4, .ocb-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ocb-titulo-linha { flex-direction: column; align-items: flex-start; }
  .ocb-rodape-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocb-install pre code { word-break: break-word; }
  .ocb-hero-arte { order: -1; }
}

/* No tema escuro o bslib repinta os tokens de codigo com seletor mais
   especifico; dentro da moldura do terminal a paleta e a mesma nos dois temas. */
.ocb-terminal pre code span,
[data-bs-theme="dark"] .ocb-terminal pre code span {
  font-style: normal !important;
}
.ocb-terminal .fu, .ocb-terminal .kw, .ocb-terminal .cf,
[data-bs-theme="dark"] .ocb-terminal .fu,
[data-bs-theme="dark"] .ocb-terminal .kw,
[data-bs-theme="dark"] .ocb-terminal .cf { color: #7FC8D3 !important; }
.ocb-terminal .st, .ocb-terminal .dv, .ocb-terminal .fl,
[data-bs-theme="dark"] .ocb-terminal .st,
[data-bs-theme="dark"] .ocb-terminal .dv,
[data-bs-theme="dark"] .ocb-terminal .fl { color: #F8B08A !important; }
.ocb-terminal .co,
[data-bs-theme="dark"] .ocb-terminal .co { color: #93AEB7 !important; }
.ocb-terminal .va, .ocb-terminal .op, .ocb-terminal .sc,
[data-bs-theme="dark"] .ocb-terminal .va,
[data-bs-theme="dark"] .ocb-terminal .op,
[data-bs-theme="dark"] .ocb-terminal .sc { color: #E6F1F3 !important; }

[data-bs-theme="dark"] .ocb-install { border: 1px solid var(--ocb-borda2); }
[data-bs-theme="dark"] .ocb-card-escuro { border: 1px solid var(--ocb-borda); }
[data-bs-theme="dark"] .ocb-card-checa .fu,
[data-bs-theme="dark"] .ocb-card-checa .va { color: var(--ocb-teal-esc) !important; }

/* ==========================================================================
   OS BLOCOS DE CODIGO DOS ARTIGOS
   --------------------------------------------------------------------------
   As mensagens de aviso do pacote sao frases inteiras, e passam de 120
   caracteres. Sem quebra, elas saem para fora do bloco e ficam ilegiveis na
   pagina — justamente as mensagens que os artigos existem para mostrar. A
   quebra e a mesma que o terminal da home ja usa.
   ========================================================================== */
main pre.downlit,
main pre.downlit code,
main div.sourceCode pre,
main div.sourceCode pre code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ==========================================================================
   AS PAGINAS INTERNAS
   --------------------------------------------------------------------------
   Vinhetas, referencia, novidades e autores saiam com o Bootstrap cru: fundo
   branco, texto cinza, bloco de codigo cinza-claro e indice com realce cinza.
   Ao lado da home, que tem paleta propria, pareciam outro site. Aqui elas
   herdam os mesmos tokens: tinta teal nos titulos, laranja no realce, o mesmo
   bloco de codigo escuro que a home usa no terminal, e o conteudo dentro de um
   cartao sobre o fundo azulado.

   O seletor e sempre `body > .container:not(.template-home)`, que e a unica classe
   que o pkgdown poe na div de topo de cada pagina: pega vinheta, referencia,
   novidades, autores e qualquer template futuro, e nunca a home.
   ========================================================================== */

body { background: var(--ocb-fundo); }

/* --- a barra de navegacao, em todas as paginas ---------------------------- */

.navbar {
  background-color: var(--ocb-hero-topo) !important;
  border-bottom: 1px solid var(--ocb-borda);
}
.navbar .navbar-brand { color: var(--ocb-tinta); font-weight: 700; }
/* Sem isto "Comece aqui" quebra em duas linhas, a barra fica com o dobro da
   altura e cobre o h1 da pagina — que e fixed-top e nao reserva espaco. */
.navbar .navbar-nav .nav-link { white-space: nowrap; }
.navbar .nav-link, .navbar .nav-text, .navbar .pkg-version {
  color: var(--ocb-texto) !important;
}
.navbar .nav-link:hover { color: var(--ocb-laranja) !important; }
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  color: var(--ocb-teal-esc) !important;
  font-weight: 600;
  background: var(--ocb-sup);
  border-radius: 6px;
}
.navbar .form-control {
  background: var(--ocb-card);
  border-color: var(--ocb-borda2);
  color: var(--ocb-tinta);
}
.navbar .dropdown-menu {
  background: var(--ocb-card);
  border: 1px solid var(--ocb-borda);
}
.navbar .dropdown-item { color: var(--ocb-texto); }
.navbar .dropdown-item:hover { background: var(--ocb-sup); color: var(--ocb-teal-esc); }

/* --- o cartao de conteudo ------------------------------------------------- */

/* A barra e fixed-top e nao empurra o conteudo; a home resolve isso com o
   respiro do hero, as demais paginas precisam reservar a altura aqui. */
html { scroll-padding-top: 84px; }
body > .container:not(.template-home) { padding-top: 84px; padding-bottom: 48px; }
@media (max-width: 991px) {
  html { scroll-padding-top: 66px; }
  body > .container:not(.template-home) { padding-top: 66px; }
}

body > .container:not(.template-home) main {
  background: var(--ocb-card);
  border: 1px solid var(--ocb-borda);
  border-radius: 14px;
  padding: 36px 40px 44px;
  color: var(--ocb-texto);
}

/* A calha do Bootstrap e padding nas colunas; como o cartao pinta ate a borda
   dela, a folga entre cartao e indice tem de virar margem. */
@media (min-width: 768px) {
  body > .container:not(.template-home) > .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
  body > .container:not(.template-home) main.col-md-9 { flex: 0 0 74%; max-width: 74%; }
  body > .container:not(.template-home) aside.col-md-3 {
    flex: 0 0 24%; max-width: 24%; margin-left: 2%; padding: 0;
  }
}
@media (max-width: 767px) {
  body > .container:not(.template-home) main { padding: 24px 22px 32px; }
}

/* --- tipografia ----------------------------------------------------------- */

body > .container:not(.template-home) main h1,
body > .container:not(.template-home) main h2,
body > .container:not(.template-home) main h3,
body > .container:not(.template-home) main h4 {
  color: var(--ocb-tinta);
  font-weight: 700;
  border: 0;
}
body > .container:not(.template-home) .page-header {
  border-bottom: 1px solid var(--ocb-borda);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
body > .container:not(.template-home) .page-header h1 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  margin: 0 0 10px;
}
body > .container:not(.template-home) .page-header img.logo {
  width: 88px; height: auto; margin-left: 20px;
}
body > .container:not(.template-home) .page-header small.dont-index {
  color: var(--ocb-fraco); font-size: 13px;
}

/* O h2 ganha um tracinho teal em cima: e o mesmo gesto do kicker da home, e da
   ritmo de secao a um texto longo sem precisar de faixa colorida. */
body > .container:not(.template-home) main h2 {
  font-size: 27px;
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  padding-top: 18px;
  position: relative;
}
body > .container:not(.template-home) main h2::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--ocb-teal);
}
body > .container:not(.template-home) main .page-header + .section > h2:first-child,
body > .container:not(.template-home) main .ref-description + .section > h2:first-child {
  margin-top: 1.5rem;
}
body > .container:not(.template-home) main h3 {
  font-size: 20px; margin-top: 2rem; margin-bottom: 0.6rem;
}
body > .container:not(.template-home) main h4 {
  font-size: 17px; margin-top: 1.6rem; color: var(--ocb-teal-esc);
}
body > .container:not(.template-home) main p,
body > .container:not(.template-home) main li {
  color: var(--ocb-texto);
  line-height: 1.68;
}
body > .container:not(.template-home) main .ref-description p {
  font-size: 18px; line-height: 1.55; color: var(--ocb-tinta);
}
body > .container:not(.template-home) main strong { color: var(--ocb-tinta); }
body > .container:not(.template-home) main a { color: var(--ocb-teal-esc); text-decoration: none; }
body > .container:not(.template-home) main a:hover { color: var(--ocb-laranja); text-decoration: underline; }
body > .container:not(.template-home) main .anchor { opacity: .45; }

/* --- codigo --------------------------------------------------------------- */

/* Inline: uma etiqueta teal, no lugar do vermelho do Bootstrap. */
body > .container:not(.template-home) main code {
  background: var(--ocb-sup);
  color: var(--ocb-teal-esc);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.88em;
}
/* Bloco: a mesma moldura escura do terminal da home, nos dois temas. */
body > .container:not(.template-home) main div.sourceCode,
body > .container:not(.template-home) main pre {
  background: var(--ocb-escuro) !important;
  border: 0 !important;
  border-radius: 10px;
  margin: 1.2rem 0;
}
[data-bs-theme="dark"] body > .container:not(.template-home) main div.sourceCode,
[data-bs-theme="dark"] body > .container:not(.template-home) main pre {
  border: 1px solid var(--ocb-borda2) !important;
}
body > .container:not(.template-home) main div.sourceCode pre {
  margin: 0; border: 0 !important;
}
body > .container:not(.template-home) main pre { padding: 18px 20px; }
body > .container:not(.template-home) main pre code {
  background: none; padding: 0;
  font-size: 13.5px; line-height: 1.6;
}
body > .container:not(.template-home) main pre,
body > .container:not(.template-home) main pre code,
body > .container:not(.template-home) main pre code span { color: #E6F1F3; }

body > .container:not(.template-home) main pre .fu,
body > .container:not(.template-home) main pre .kw,
body > .container:not(.template-home) main pre .cf,
body > .container:not(.template-home) main pre .cn { color: #7FC8D3 !important; }
body > .container:not(.template-home) main pre .st,
body > .container:not(.template-home) main pre .dv,
body > .container:not(.template-home) main pre .fl { color: #F8B08A !important; }
body > .container:not(.template-home) main pre .co { color: #A5C0C9 !important; }
body > .container:not(.template-home) main pre .wa,
body > .container:not(.template-home) main pre .er { color: #F2B822 !important; }
body > .container:not(.template-home) main pre .va,
body > .container:not(.template-home) main pre .op,
body > .container:not(.template-home) main pre .sc { color: #E6F1F3 !important; }
body > .container:not(.template-home) main pre code span { font-style: normal !important; }
body > .container:not(.template-home) main pre a,
body > .container:not(.template-home) main pre a code { color: inherit !important; text-decoration: none; }
body > .container:not(.template-home) main pre a:hover { text-decoration: underline; }

/* --- tabelas -------------------------------------------------------------- */

body > .container:not(.template-home) main table {
  border: 1px solid var(--ocb-borda);
  border-radius: 12px;
  background: var(--ocb-card);
  margin: 1.4rem 0;
  font-size: 15px;
}
body > .container:not(.template-home) main table > thead th {
  background: var(--ocb-sup);
  color: var(--ocb-tinta);
  font-weight: 700;
  border-bottom: 2px solid var(--ocb-borda2) !important;
  border-top: 0 !important;
}
body > .container:not(.template-home) main table td,
body > .container:not(.template-home) main table th {
  border-color: var(--ocb-borda) !important;
  padding: 9px 14px;
  color: var(--ocb-texto);
}
body > .container:not(.template-home) main table tr.even > td { background: var(--ocb-sup2); }
body > .container:not(.template-home) main table code { background: transparent; padding: 0; }

/* --- as listas de definicao (indice da referencia e argumentos) ------------ */

body > .container:not(.template-home) main dl {
  display: grid;
  grid-template-columns: minmax(180px, 30%) 1fr;
  column-gap: 24px;
  margin: 0.8rem 0 0;
}
body > .container:not(.template-home) main dl > dt {
  font-weight: 600;
  color: var(--ocb-teal-esc);
  padding: 10px 0;
  border-top: 1px solid var(--ocb-borda);
}
/* Nome de funcao e nome de argumento sao codigo e vao em monoespacada; titulo
   de vinheta, no indice dos artigos, e prosa e nao vai. */
body > .container.template-reference-topic main dl > dt {
  font-family: var(--bs-font-monospace);
  font-size: 14px;
}
body > .container:not(.template-home) main dl > dd {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--ocb-borda);
  color: var(--ocb-texto);
}
body > .container:not(.template-home) main dl > dt:first-child,
body > .container:not(.template-home) main dl > dt:first-child + dd {
  border-top: 0;
}
body > .container:not(.template-home) main dl > dd > p:last-child { margin-bottom: 0; }
body > .container:not(.template-home) main dl > dt code {
  background: transparent; padding: 0; font-size: 14px;
}
@media (max-width: 767px) {
  body > .container:not(.template-home) main dl { grid-template-columns: minmax(0, 1fr); }
  body > .container:not(.template-home) main dl > dd { border-top: 0; padding-top: 0; }
}

body > .container:not(.template-home) .section-desc p {
  color: var(--ocb-fraco);
  font-size: 15.5px;
  max-width: 46em;
}

/* --- citacao em bloco ------------------------------------------------------ */

body > .container:not(.template-home) main blockquote {
  border-left: 3px solid var(--ocb-teal);
  background: var(--ocb-sup2);
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  margin: 1.4rem 0;
  font-size: 15.5px;
}
body > .container:not(.template-home) main blockquote p:last-child { margin-bottom: 0; }

/* --- o indice lateral ------------------------------------------------------ */

body > .container:not(.template-home) aside nav#toc {
  position: sticky;
  top: 84px;
  background: var(--ocb-card);
  border: 1px solid var(--ocb-borda);
  border-radius: 12px;
  padding: 18px 14px;
}
body > .container:not(.template-home) aside nav#toc h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ocb-teal);
  margin: 0 0 12px 10px;
  border: 0;
}
body > .container:not(.template-home) aside nav#toc .nav-link {
  color: var(--ocb-texto);
  font-size: 14px;
  line-height: 1.35;
  padding: 7px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
}
body > .container:not(.template-home) aside nav#toc .nav-link:hover {
  color: var(--ocb-teal-esc);
  background: var(--ocb-sup2);
}
body > .container:not(.template-home) aside nav#toc .nav-link.active {
  color: var(--ocb-teal-esc);
  font-weight: 600;
  background: var(--ocb-sup);
  border-left-color: var(--ocb-laranja);
}
body > .container:not(.template-home) aside nav#toc ul ul .nav-link {
  font-size: 13px;
  padding-left: 22px;
  color: var(--ocb-fraco);
}

/* --- rodape ---------------------------------------------------------------- */

body > .container:not(.template-home) > footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--ocb-borda);
  font-size: 13px;
}
body > .container:not(.template-home) > footer p { color: var(--ocb-fraco); margin: 0; }
body > .container:not(.template-home) > footer a { color: var(--ocb-teal-esc); }

/* O indice dos artigos agrupa as vinhetas em h3, nao em h2. Como ali ele e o
   titulo de secao, ganha o mesmo tratamento — inclusive o tracinho teal. */
body > .container.template-article-index main .section > h3 {
  font-size: 27px;
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  padding-top: 18px;
  position: relative;
}
body > .container.template-article-index main .section > h3::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--ocb-teal);
}
body > .container.template-article-index main .section:first-of-type > h3 { margin-top: 1.5rem; }
body > .container.template-article-index main dl > dt { font-size: 16px; }

/* No celular o indice vem depois do texto: grudar no topo nao ajuda. */
@media (max-width: 767px) {
  body > .container:not(.template-home) aside nav#toc { position: static; margin-top: 24px; }
}