/* Os sites abertos da Freelances SAP da HubClub (tela/site.html): a página em volta da vitrine. O desenho da vitrine é o
   do vitrine.css, igual ao da aba do painel; aqui ficam o fundo azul-marinho da página de vendas da HubClub (no painel
   vale o fundo do painel), a letra do painel (Inter) e as barras de rolagem escuras, que no painel vêm do próprio painel. */
html, body { margin: 0; height: 100%; background: #02070b; color: #fff; -webkit-font-smoothing: antialiased;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#vitrine { height: 100%; }
.site-sem-script { margin: 0; padding: 60px 20px; text-align: center; color: rgba(255, 255, 255, .7); font-size: 14px; }

/* O texto parado (o serviço escreve dentro do #vitrine; config.mjs, "parado"): o começo da página para quem a lê sem rodar
   o JavaScript (um buscador, a prévia de um link) e o que aparece enquanto a vitrine abre. Mesma letra e mesmo lugar do
   começo da página desenhada, para a troca não dar salto. O #vitrine na frente faz valer também depois que ele ganha a
   classe .fv, que fixa o tamanho dos títulos. */
#vitrine .site-parado { box-sizing: border-box; flex: none; display: block; width: 100%; max-width: 1240px; margin: 0 auto; padding: 204px 22px 56px;
  color: rgba(255, 255, 255, .68); font-size: 16px; line-height: 1.62; }
#vitrine .site-parado > * { max-width: 62ch; }
#vitrine .site-parado-olho { margin: 0 0 18px; font: 600 11.5px/1.2 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; letter-spacing: .15em;
  text-transform: uppercase; color: #76B7D5; }
#vitrine .site-parado h1 { margin: 0 0 18px; max-width: 20ch; color: rgba(255, 255, 255, .93); letter-spacing: -.03em; text-wrap: balance;
  font: 800 clamp(30px, 3.4vw + 8px, 54px)/1.08 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif !important; }
#vitrine .site-parado h2 { margin: 34px 0 10px; color: rgba(255, 255, 255, .93); letter-spacing: -.02em;
  font: 700 22px/1.25 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif !important; }
#vitrine .site-parado p { margin: 0 0 14px; }
#vitrine .site-parado ol, #vitrine .site-parado ul { margin: 0 0 16px; padding-left: 22px; }
#vitrine .site-parado li { margin: 0 0 8px; }
#vitrine .site-parado a { color: #76B7D5; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#vitrine .site-parado a:hover { color: #8ACFF2; }
@media not all and (min-width: 760px) { #vitrine .site-parado { padding: 168px 14px 40px; font-size: 15px; } }
/* O texto parado da página de um perfil (/p/<id>, quando os buscadores podem mostrar os perfis): o perfil em texto
   corrido, no lugar onde a página dele desenha o cartão; e, já dentro do cartão, enquanto o perfil de verdade não chega. */
#vitrine .site-parado-perfil { padding-top: 132px; font-size: 13.5px; }
#vitrine .site-parado-perfil h1 { max-width: none; font-size: 26px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.02em; }
#vitrine .site-parado-perfil h1 span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .68); letter-spacing: 0;
  font: 400 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#vitrine .site-parado-perfil h2 { margin: 22px 0 8px; font-size: 15px !important; }
#vitrine .site-parado-perfil p { margin-bottom: 8px; }
@media not all and (min-width: 760px) { #vitrine .site-parado-perfil { padding-top: 120px; font-size: 13.5px; } }
#vitrine .fv-pagina-perfil .site-parado { padding: 20px 22px 30px; }
@media not all and (min-width: 760px) { #vitrine .fv-pagina-perfil .site-parado { padding: 16px 14px 24px; } }

.fv { --fv-fundo: #02070b; --fv-fundo2: #040c13; --fv-cartao: #09131b; --fv-cartao2: #0d1a24; }
.fv-topo { background: rgba(2, 7, 11, .88); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.fv.no-site .fv-barra-fixa { background: rgba(2, 7, 11, .96); }
.fv option { background: #09131b; }

/* Barras de rolagem finas e azuis, como as do painel (a mesma dos filtros da lista). */
.fv-corpo, .fv-caixa, .fv-camada { scrollbar-width: thin; scrollbar-color: rgba(118, 183, 213, .35) transparent; }
.fv-corpo::-webkit-scrollbar, .fv-caixa::-webkit-scrollbar, .fv-camada::-webkit-scrollbar { width: 8px; }
.fv-corpo::-webkit-scrollbar-track, .fv-caixa::-webkit-scrollbar-track, .fv-camada::-webkit-scrollbar-track { background: transparent; }
.fv-corpo::-webkit-scrollbar-thumb, .fv-caixa::-webkit-scrollbar-thumb, .fv-camada::-webkit-scrollbar-thumb { background: rgba(118, 183, 213, .3); border-radius: 999px; }