/* O rodapé único do site (01/09/2026): fio laranja + listras dos popups, marca,
 * aviso de KYC, pílula de status, quatro colunas, aviso de risco recolhido e a
 * barra final. Gerado por `_tools/poe_rodape.py` a partir de
 * `_tools/rodape_textos.json`; só entra nas páginas que tinham rodapé — spot,
 * futuros/perpétuo/tradfi/grade/1001x e carteira ficam sem (decisão do dono).
 *
 * As duas regras da casa: caixa (margin/padding/border/background) em regra
 * `[dir] .classe` — o reset `[dir] *` da origem é (0,1,1); e nada de `rem`. */

.oc-rod { position: relative; overflow: hidden; color: #fff; font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif; }
[dir] .oc-rod { background: #030303; border-top: 1px solid #141414; margin: 0; padding: 0; }
.oc-rod-fio { position: absolute; left: 0; top: 0; height: 2px; width: 100%; }
[dir] .oc-rod-fio { background: linear-gradient(90deg, #f7931a 0, #f7931a 26%, rgba(247, 147, 26, .25) 52%, transparent 78%); }
.oc-rod-listras { position: absolute; right: -110px; top: -40px; width: 320px; height: 200px; pointer-events: none; opacity: .5; }
[dir] .oc-rod-listras { background: repeating-linear-gradient(-63.4deg, transparent 0 22px, rgba(247, 147, 26, .16) 22px 30px, transparent 30px 52px, rgba(247, 147, 26, .07) 52px 56px, transparent 56px 78px); }
.oc-rod-in { position: relative; max-width: 1240px; box-sizing: border-box; }
[dir] .oc-rod-in { margin: 0 auto; padding: 46px 28px 26px; }
.oc-rod-topo { display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); gap: 36px 28px; }

/* marca, aviso de KYC, status */
.oc-rod-marca { display: block; width: 112px; text-decoration: none; }
.oc-rod-marca svg { display: block; width: 112px; height: auto; }
.oc-rod-tag { color: #8a8a8a; font-size: 11.5px; line-height: 1.6; max-width: 300px; }
[dir] .oc-rod-tag { margin: 18px 0 0; padding: 0; }
.oc-rod-tag a { color: #f7931a; text-decoration: none; }
.oc-rod-tag a:hover { text-decoration: underline; }
.oc-rod-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; color: #cfcfcf; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: border-color .15s ease; }
[dir] .oc-rod-status { margin: 18px 0 0; padding: 6px 12px 6px 10px; border: 1px solid #1e1e1e; background: #0a0a0a; }
[dir] .oc-rod-status:hover { border-color: #f7931a; }
.oc-rod-status i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
[dir] .oc-rod-status i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* colunas */
.oc-rod-col-t { display: flex; align-items: center; gap: 8px; color: #f7931a; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
[dir] .oc-rod-col-t { margin: 4px 0 14px; padding: 0; }
.oc-rod-col-t b { width: 8px; height: 8px; flex: 0 0 auto; transform: skewX(-26.6deg); border-radius: 1px; }
[dir] .oc-rod-col-t b { background: #f7931a; }
.oc-rod-col a { display: block; width: fit-content; color: #9a9a9a; font-size: 13px; line-height: 1.55; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
[dir] .oc-rod-col a { padding: 4px 0; margin: 0; border-bottom: 1px solid transparent; }
[dir] .oc-rod-col a:hover { color: #fff; border-bottom-color: #f7931a; }

/* aviso de risco, recolhido */
.oc-rod-sep { height: 1px; }
[dir] .oc-rod-sep { background: #141414; margin: 34px 0 0; }
[dir] .oc-rod-risco { margin: 0; padding: 14px 0 0; }
.oc-rod-risco summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; color: #8a8a8a; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; }
[dir] .oc-rod-risco summary { padding: 6px 0; margin: 0; }
.oc-rod-risco summary::-webkit-details-marker { display: none; }
[dir] .oc-rod-risco summary::before { content: ''; width: 0; height: 0; border-left: 6px solid #f7931a; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; }
[dir] .oc-rod-risco[open] summary::before { transform: rotate(90deg); }
.oc-rod-risco summary:hover { color: #fff; }
.oc-rod-risco p { color: #6a6a6a; font-size: 11px; line-height: 1.65; max-width: 920px; }
[dir] .oc-rod-risco p { margin: 8px 0 0; padding: 0; }

/* barra final */
.oc-rod-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #6a6a6a; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; }
[dir] .oc-rod-base { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid #141414; }
.oc-rod-base-l { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.oc-rod-base-l a { color: #6a6a6a; text-decoration: none; white-space: nowrap; }
.oc-rod-base-l a:hover { color: #fff; }

@media (max-width: 640px) {
  [dir] .oc-rod-in { padding: 36px 18px 22px; }
  .oc-rod-topo { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .oc-rod-brand { grid-column: 1 / -1; }
  .oc-rod-tag { max-width: none; }
  .oc-rod-listras { width: 220px; height: 140px; right: -80px; }
  .oc-rod-base { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-rod-col a, .oc-rod-status, .oc-rod-risco summary::before { transition: none; }
}