/* Uploop - pecas do site publico que o site.css (herdado do motor) nao tem.
   Tudo por token: --painel, --linha, --tinta, --texto, --fraca, --marca-texto. */

.topo .env{gap:18px}
/* O site.css herdado so mostra `.topo nav` acima de 1120px (la e um mega-menu);
   aqui sao tres links e cabem em qualquer largura. */
.topo nav.pub-nav{display:flex; gap:20px; margin-left:auto; margin-right:8px}
.pub-nav a{font-size:14.5px; font-weight:600; color:var(--fraca); text-decoration:none; white-space:nowrap}
.pub-nav a:hover,.pub-nav a[aria-current="page"]{color:var(--tinta)}
@media (max-width:860px){
  .topo .env{flex-wrap:wrap}
  .topo nav.pub-nav{order:3; width:100%; margin:0; overflow-x:auto; gap:16px; padding:2px 0 10px}
}
/* Entrar e Criar conta visiveis no celular (22/10/2026): antes o link de
   entrar sumia abaixo de 420px. Vira um botao compacto com contorno, e o
   botao de tema sai do cabecalho para caber. */
@media (max-width:420px){
  .usuario > a:not(.btn){display:inline-flex; align-items:center; padding:6px 10px; font-size:12.5px;
    border:1px solid currentColor; border-radius:10px; opacity:.9; white-space:nowrap}
  .usuario .tema{display:none}
}

.passos-up{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); counter-reset:p}
.passos-up li{counter-increment:p; background:var(--painel); border:1px solid var(--linha);
  border-radius:var(--raio,14px); padding:18px 18px 18px 58px; position:relative; min-width:0}
.passos-up li::before{content:counter(p); position:absolute; left:18px; top:16px; width:28px; height:28px;
  border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px;
  background:var(--grad); color:#0B0913}
.passos-up b{display:block; color:var(--tinta); margin-bottom:4px}
.passos-up span{color:var(--texto); font-size:15px}

.final{background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio,14px);
  padding:28px; text-align:center}
.final p{max-width:40rem; margin:8px auto 18px; color:var(--texto)}
.final .botoes{justify-content:center}

.prosa{max-width:var(--prosa,43rem)}
.prosa h2{margin-top:30px}
.prosa p,.prosa li{color:var(--texto)}
.prosa ul{padding-left:20px}
.prosa li{margin:6px 0}

.bloco pre{background:var(--painel); border:1px solid var(--linha); border-radius:10px;
  padding:14px 16px; overflow-x:auto; font-size:13.5px; line-height:1.5; max-width:100%}
.bloco code,.chamada code,.corpo code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em}
:not(pre) > code{background:var(--painel2); border-radius:5px; padding:1px 5px; word-break:break-word}

.bloco .tabela table{width:100%; border-collapse:collapse; font-size:14.5px}
.bloco .tabela th,.bloco .tabela td{padding:10px 12px; border-bottom:1px solid var(--linha);
  text-align:left; vertical-align:top}
.bloco .tabela th{color:var(--fraca); font-weight:600; white-space:nowrap}
.bloco .tabela td{color:var(--texto)}

/* /pricing */
.preco-rede{margin:14px 0; border:1px solid var(--linha); border-radius:var(--raio,14px); background:var(--painel)}
.preco-rede > summary{padding:14px 18px; cursor:pointer; display:flex; justify-content:space-between;
  gap:12px; align-items:center; border-bottom:0}
.preco-rede > summary h2{margin:0; font-size:20px}
.preco-rede[open] > summary{border-bottom:1px solid var(--linha)}
.preco-rede .tabela{border-top:0}
.preco-rede td.preco{font-weight:700; color:var(--marca-texto); white-space:nowrap; font-variant-numeric:tabular-nums}
.sem-refil{color:var(--fraca)}
.busca-preco{width:100%; max-width:30rem; padding:12px 14px; border-radius:10px; border:1px solid var(--linha);
  background:var(--painel); color:var(--tinta); font:inherit; margin:6px 0 4px}

/* A coluna de prosa centralizada do site.css vale para secao so de texto; a de
   passos e grade, entao o titulo fica alinhado a esquerda como nas outras. */
section.bloco:has(.passos-up) > .env > h2{margin-left:0; margin-right:0; max-width:none}