/* HubClub: o painel de vagas (hubclubgo.com.br/vagas; pedido do Lucca, 09/10/2026).
   As cores, as letras e as peças comuns (topo, botões, vidro, títulos, rodapé) vêm do pagina.css; aqui fica só o que é
   do painel. Todas as classes daqui começam com "vg-". Só os azuis da marca (o destaque de uma vaga, que na plataforma
   é amarelo, aqui é um cartão azul mais aceso). */

/* A página travada enquanto uma vaga ou a folha dos filtros está aberta (a largura da barra de rolagem é devolvida,
   para nada pular de lugar). */
html.vg-travado { overflow: hidden; }
/* O body deixa de recortar enquanto isso: senão ele viraria a caixa de rolagem, e o que acompanha a rolagem (os filtros,
   a barra da lista) sairia do lugar por trás da vaga aberta. */
html.vg-travado body { overflow: visible; padding-right: var(--vg-barra, 0px); }
html.vg-travado .topo { padding-right: var(--vg-barra, 0px); }
/* No iPhone e no iPad, o toque num fundo que não é botão só vira clique se o fundo "parecer clicável". */
@media (hover: none) { .vg-g-fundo, .vg-f-fundo { cursor: pointer; } }
/* E campo com letra menor que 16 px faz o iPhone ampliar a página ao tocar nele. */
html.ios .vg-ordem select { font-size: 16px; }

/* No menu do topo, "Vagas" é a página em que a pessoa está. */
.pg-vagas .menu a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .07); }

/* O painel acompanha a largura da linha do topo (1280 px). */
.vg-modulos > .cx, .vg-painel > .cx { width: min(1280px, 100% - 40px); }

.vg-ic-bt { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--linha);
  color: var(--texto-2); background: rgba(255, 255, 255, .04); transition: color .15s, border-color .15s, background-color .15s; }
.vg-ic-bt:hover { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(118, 183, 213, .12); }
.vg-ic-bt:disabled { opacity: .32; cursor: default; pointer-events: none; }
.vg-ic-bt .ic { width: 19px; height: 19px; }
.vg-elo { font: 600 .82rem var(--tit); color: var(--azul-claro); padding: 6px 0; text-align: left; }
.vg-elo:hover { color: #fff; }

/* ───────────── abertura: a busca ───────────── */
.heroi.vg-heroi { padding: calc(var(--topo) + 46px) 0 24px; overflow: visible; }
.vg-heroi .heroi-fundo { overflow: hidden; }
.vg-heroi .luz-1 { right: 50%; margin-right: -380px; }
.vg-heroi-cx { position: relative; display: grid; justify-items: center; text-align: center; }
.vg-heroi h1 { margin: 16px 0 16px; font-size: clamp(2rem, 3.2vw + .9rem, 3.4rem); }
.vg-heroi .sub { max-width: 66ch; font-size: clamp(1rem, .3vw + .95rem, 1.12rem); text-wrap: balance; }

.vg-busca { position: relative; z-index: 6; width: min(920px, 100%); margin-top: 30px; padding: 8px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  text-align: left; border-radius: 22px; border: 1px solid var(--linha-azul); background: linear-gradient(160deg, rgba(20, 48, 66, .86), rgba(5, 14, 21, .92));
  box-shadow: 0 40px 100px -50px rgba(58, 160, 216, .7), 0 28px 60px -34px #000, inset 0 1px 0 rgba(255, 255, 255, .12); }
.vg-b-campo { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 0 16px; border-radius: 14px; transition: background-color .15s; }
.vg-b-campo + .vg-b-campo::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--linha); }
.vg-b-campo:focus-within { background: rgba(255, 255, 255, .06); }
.vg-b-campo > .ic { width: 20px; height: 20px; color: var(--azul-claro); }
.vg-b-campo input { flex: 1; min-width: 0; height: 54px; padding: 0; border: 0; outline: 0; background: none; color: var(--texto); font: 500 1rem var(--txt); }
.vg-b-campo input::placeholder, .vg-entrada input::placeholder { color: var(--texto-3); opacity: 1; }
.vg-b-botao { min-height: 54px; margin-left: 8px; border-radius: 16px; }
.vg-b-botao:hover .ic { transform: none; }

/* as sugestões de um campo (lugares e empresas com vaga aberta) */
.vg-lugar, .vg-empresa { position: relative; }
.vg-sug { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: 322px; overflow-y: auto; padding: 6px; border-radius: 14px;
  background: #071824; border: 1px solid var(--linha-azul); box-shadow: 0 30px 60px -20px #000; overscroll-behavior: contain; }
.vg-sug li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: .92rem; color: var(--texto); }
.vg-sug li span { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-sug li small { grid-column: 1; font-size: .74rem; color: var(--texto-3); }
.vg-sug li b { grid-column: 2; grid-row: 1 / span 2; font: 600 .8rem var(--tit); color: var(--azul-claro); font-variant-numeric: tabular-nums; }
.vg-sug li[aria-selected="true"], .vg-sug li:hover { background: rgba(118, 183, 213, .15); }

.vg-numeros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.vg-numeros button, .vg-numeros span { display: inline-flex; align-items: baseline; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: .88rem; line-height: 36px;
  color: var(--texto-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--linha); transition: color .15s, border-color .15s, background-color .15s; }
.vg-numeros b { font: 700 1rem var(--tit); color: #fff; font-variant-numeric: tabular-nums; }
.vg-numeros button:hover { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(118, 183, 213, .1); }

/* ───────────── os módulos SAP ───────────── */
.vg-modulos { position: relative; padding: 22px 0 6px; }
.vg-linha-t { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; min-height: 40px; }
.vg-linha-t h2 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.vg-setas { display: flex; gap: 8px; }
.vg-trilho { display: flex; gap: 12px; margin: 0 -4px; padding: 4px 4px 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vg-trilho::-webkit-scrollbar { display: none; }
.vg-trilho > li { flex: none; scroll-snap-align: start; }
.vg-mod-espera { width: 204px; height: 198px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha); }
.vg-mod { width: 212px; height: 100%; min-height: 118px; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px 12px; padding: 14px 14px 12px;
  text-align: left; border-radius: 18px; border: 1px solid var(--linha); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016));
  transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s, opacity .15s; }
.vg-mod:hover { border-color: rgba(118, 183, 213, .5); transform: translateY(-2px); }
.vg-mod-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #e3f4ff; background: linear-gradient(135deg, #2e7697, #0b3f5a);
  box-shadow: 0 12px 26px -14px rgba(58, 160, 216, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
.vg-mod-ic .ic { width: 21px; height: 21px; }
.vg-mod-txt { display: grid; align-content: center; min-width: 0; }
.vg-mod-txt b { font: 600 .97rem/1.22 var(--tit); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vg-mod-txt small { font-size: .74rem; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-mod-n { grid-column: 1 / -1; align-self: end; font-size: .8rem; color: var(--texto-2); }
.vg-mod-n b { font: 700 1.06rem var(--tit); color: #fff; font-variant-numeric: tabular-nums; }
.vg-mod[aria-pressed="true"] { border-color: rgba(58, 160, 216, .85); background: linear-gradient(160deg, rgba(46, 118, 151, .4), rgba(255, 255, 255, .03) 72%);
  box-shadow: 0 18px 40px -22px rgba(58, 160, 216, .95), inset 0 1px 0 rgba(255, 255, 255, .14); }
.vg-mod.zerado { opacity: .42; }
/* O cartão com a imagem da categoria (a da plataforma, com o logo da SAP; 200 x 113). Se a imagem não vier (.sem-foto),
   vale o cartão de cima, com o ícone. */
.vg-mod:not(.sem-foto) { width: 204px; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0; padding: 0; overflow: hidden; }
.vg-mod-foto { display: block; background: #000; border-bottom: 1px solid var(--linha); }
.vg-mod-foto img { display: block; width: 100%; height: auto; aspect-ratio: 200 / 113; object-fit: cover; }
.vg-mod:not(.sem-foto) .vg-mod-txt { align-content: start; padding: 11px 14px 0; }
.vg-mod:not(.sem-foto) .vg-mod-n { padding: 6px 14px 12px; }
.vg-mod[aria-pressed="true"] .vg-mod-foto { border-bottom-color: rgba(58, 160, 216, .6); }

/* ───────────── o acesso: o aviso de cima da lista (visitante, cadastro grátis, assinante) ───────────── */
.vg-acesso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--linha-azul);
  background: linear-gradient(120deg, rgba(46, 118, 151, .3), rgba(255, 255, 255, .03) 72%); }
.vg-acesso > .vg-a-ic { width: 38px; height: 38px; flex: none; padding: 9px; border-radius: 12px; color: #e3f4ff; background: linear-gradient(135deg, #2e7697, #0b3f5a); }
.vg-acesso p { flex: 1 1 320px; min-width: 0; font-size: .95rem; line-height: 1.5; color: var(--texto-2); }
.vg-acesso p b { font-weight: 600; color: #fff; }
.vg-a-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-a-acoes .bt:hover .ic { transform: none; }
.vg-acesso.pago { padding: 9px 16px; border-color: var(--linha); background: rgba(255, 255, 255, .03); }
.vg-acesso.pago > .vg-a-ic { width: 28px; height: 28px; padding: 6px; border-radius: 9px; stroke-width: 2.6; }
.vg-acesso.pago p { font-size: .9rem; }
/* o quadro escondido que pergunta à plataforma se a pessoa já está logada lá */
.vg-quadro { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }

/* ───────────── o painel: a lista e os filtros ─────────────
   O desenho desta parte (o painel de vidro, os cartões das vagas e a barra de filtros à direita) é o do Painel de Vagas
   SAP da HubClub IA. Pedido do Lucca, 10/10/2026: "Traga o design apenas da lista de vagas e do filtro à direita [...]
   mantendo o resto igual". As medidas e as cores vêm de hubclub-painel-vagas\tela\painel-vagas.css. O que cada peça FAZ
   não mudou: os filtros com a contagem, as vagas salvas, a folha dos filtros no celular, o cartão inteiro clicável. */
.vg-painel { padding: 14px 0 84px; }

/* O painel de vidro: a lista à esquerda e os filtros à direita; a linha da contagem e a dos filtros em uso vão de lado a
   lado, como lá (.vg-resultados deixa de ser caixa: os filhos dele entram direto na grade). A última linha, vazia, fica
   com a sobra de altura quando os filtros são mais altos que a lista. O fundo fechado daqui só vale enquanto o vagas.js
   não põe as camadas do vidro. */
.vg-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 288px; column-gap: 18px; align-items: start;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  grid-template-areas: "barra barra" "ativos ativos" "novas filtros" "lista filtros" "paginas filtros" "alerta filtros" ". filtros";
  padding: 20px 22px 24px; border-radius: 18px; background: #080c10; box-shadow: inset 0 0 0 1px rgba(118, 183, 213, .14); }
.vg-resultados { display: contents; }
/* Tudo o que é do painel fica por cima das camadas do vidro (a 1ª filha da grade). Sem "isolation" de propósito: no
   celular a folha dos filtros mora dentro da grade e tem de passar por cima do topo da página. */
.vg-barra, .vg-ativos, .vg-novas, .vg-lista, .vg-paginas, .vg-alerta { position: relative; min-width: 0; }

/* As camadas do vidro (postas pelo vagas.js, montarVidroDoPainel, que marca a grade com "com-vidro"): na borda de 1px, a
   luz azul que dá a volta em 12 s; no miolo, uma bruma azul no alto, a mesma luz, difusa, e a tinta escura. As luzes
   ficam presas no meio da tela enquanto o painel rola (position: sticky dentro de um recorte que não vira caixa de
   rolagem: overflow: clip), para a volta da luz ser vista em qualquer altura da lista. Nenhum desfoque do navegador
   aqui: o backdrop-filter some ao rolar em alguns navegadores, e a luz difusa é uma imagem pequena, já desfocada, que
   o vagas.js desenha e o navegador só estica e gira. */
.vg-grade.com-vidro { background: none; box-shadow: none; }
.vg-vidro { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; overflow: clip; pointer-events: none; background: rgba(118, 183, 213, .12); }
.vg-vd-presa { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; }
.vg-vd-luz { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.vg-vd-gira { position: absolute; left: -1100px; top: -1100px; width: 2200px; height: 2200px; max-width: none; animation: vg-m-gira 12s linear infinite; will-change: transform; }
.vg-vd-conica { background: conic-gradient(from 225deg, transparent 0, rgba(118, 183, 213, .95) 90deg, transparent 90deg); }
.vg-vd-miolo { position: absolute; inset: 1px; border-radius: 17px; overflow: hidden; overflow: clip; background: #080c10; }
.vg-vd-bruma { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 400px at 50% 150px, rgba(58, 140, 180, .5), rgba(46, 118, 151, .2) 52%, rgba(46, 118, 151, 0) 100%); }
.vg-vd-difusa { display: block; }
.vg-vd-tinta { position: absolute; inset: 0; background: rgba(13, 13, 13, .45); }
@media (prefers-reduced-motion: reduce) { .vg-vd-gira { animation: none; } }

/* a linha de cima: quantas vagas e a hora da leitura; à direita, as salvas, o alerta e a ordem */
.vg-barra { grid-area: barra; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 32px; margin-bottom: 14px; }
.vg-barra-esq { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.vg-conta { font: 400 14px/1.45 var(--txt); letter-spacing: 0; text-wrap: wrap; color: rgba(255, 255, 255, .62); }
.vg-conta b { margin-right: 2px; font-size: 18px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.vg-conta span { color: rgba(255, 255, 255, .42); }
.vg-lido { font-size: 12px; color: rgba(255, 255, 255, .45); }
.vg-lido.atrasado { color: var(--azul-claro); }
.vg-barra-dir { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vg-pilula { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .78); font: 400 12.5px var(--txt); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s; }
.vg-pilula:hover { color: #fff; border-color: rgba(118, 183, 213, .45); }
.vg-pilula .ic { width: 14px; height: 14px; }
.vg-pilula b { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; font: 600 11px var(--txt); color: #fff; background: var(--azul); }
.vg-pilula[aria-pressed="true"] { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(46, 118, 151, .4); }
.vg-pilula[aria-pressed="true"] .ic { fill: currentColor; }
.vg-ordem { padding: 0; }
.vg-ordem select { -webkit-appearance: none; appearance: none; height: 30px; padding: 0 30px 0 11px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.vg-ordem select:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.vg-ordem select option { background: #14181b; color: #fff; }
.vg-ordem .ic { position: absolute; right: 10px; pointer-events: none; }
.vg-bt-filtros { display: none; }

/* os filtros em uso */
.vg-ativos { grid-area: ativos; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.vg-ativo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 8px 0 10px; border-radius: 8px; font: 400 12.5px var(--txt); color: #fff;
  background: rgba(46, 118, 151, .22); border: 1px solid rgba(118, 183, 213, .42); transition: background-color .15s, border-color .15s; }
.vg-ativo span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-ativo:hover { background: rgba(46, 118, 151, .4); border-color: rgba(118, 183, 213, .6); }
.vg-ativo .ic { width: 13px; height: 13px; }
.vg-ativos .vg-elo { padding: 4px; font: 400 12.5px var(--txt); color: rgba(255, 255, 255, .55); }
.vg-ativos .vg-elo:hover { color: #fff; }

.vg-aviso { margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; font-size: .9rem; color: var(--texto-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--linha); }
.vg-aviso a { color: var(--azul-claro); }
.vg-novas { grid-area: novas; width: 100%; min-height: 40px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font: 500 13.5px var(--txt); color: #fff;
  background: linear-gradient(135deg, rgba(46, 118, 151, .55), rgba(2, 47, 70, .6)); border: 1px solid rgba(118, 183, 213, .42); }
.vg-novas:hover { border-color: var(--azul-claro); }
.vg-novas .ic { width: 15px; height: 15px; }

/* a lista */
.vg-lista { grid-area: lista; display: flex; flex-direction: column; gap: 10px; }
.vg-vaga-espera { height: 118px; border-radius: 14px; background: rgba(14, 16, 18, .68); border: 1px solid rgba(255, 255, 255, .07); }
/* o cartão de uma vaga: um pouco mais fechado que o vidro (o texto fica legível quando a luz passa por baixo); o da
   vaga em destaque é um vidro azul mais aceso */
.vg-vaga { position: relative; display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(14, 16, 18, .68); transition: border-color .18s, background-color .18s; }
.vg-vaga:hover { border-color: rgba(118, 183, 213, .38); background: rgba(18, 24, 28, .74); }
.vg-vaga.destaque { border-color: rgba(118, 183, 213, .34); background: linear-gradient(135deg, rgba(46, 118, 151, .3), rgba(2, 47, 70, .34)); }
.vg-vaga.destaque:hover { border-color: rgba(118, 183, 213, .56); background: linear-gradient(135deg, rgba(46, 118, 151, .38), rgba(2, 47, 70, .42)); }
.vg-vaga.aberta { border-color: var(--azul-claro); box-shadow: 0 0 0 1px var(--azul-claro); }
.vg-logo { width: 54px; height: 54px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #fff; font: 700 1.2rem var(--tit); font-style: normal; color: #0c4a69; }
.vg-logo img { display: block; width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.vg-logo.sem { background: linear-gradient(135deg, rgba(118, 183, 213, .3), rgba(46, 118, 151, .25)); color: #d9efff; }
/* (o logo do cartão: o ladrilho branco de lá; sem logo, a inicial da empresa) */
.vg-vaga > .vg-logo { width: 56px; height: 56px; border-radius: 10px; font: 600 22px var(--txt); }
.vg-vaga > .vg-logo img { padding: 0; }
.vg-vaga > .vg-logo.sem { color: #fff; background: linear-gradient(135deg, #2e7697, #022f46); }
.vg-v-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vg-vaga h3 { font: 600 16.5px/1.3 var(--txt); letter-spacing: 0; text-wrap: wrap; overflow-wrap: anywhere; }
.vg-v-elo { color: #fff; text-decoration: none; transition: color .15s; }
.vg-v-elo::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.vg-v-elo:visited { color: #9db1bf; }
.vg-v-elo:hover { color: var(--azul-claro); }
.vg-v-elo:focus-visible { outline: none; }
.vg-v-elo:focus-visible::after { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
/* embaixo do título: empresa • contratação • lugar */
.vg-v-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .62); }
.vg-v-sub > span + span::before { content: "•"; margin-right: 8px; color: rgba(255, 255, 255, .35); }
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.vg-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 500 .74rem/1.2 var(--tit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--texto-2); background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); }
.vg-chip.mod { color: #cfeaff; background: rgba(58, 160, 216, .15); border-color: rgba(58, 160, 216, .38); }
.vg-chip.meta { background: none; border-color: rgba(255, 255, 255, .17); }
.vg-chip.nova { color: #062538; background: #e9f6ff; border-color: transparent; font-weight: 600; }
.vg-chip.sal { color: #fff; border-color: rgba(118, 183, 213, .55); }
.vg-chip .ic { width: 12px; height: 12px; }
/* (no cartão, as etiquetas são as de lá: retângulos de contorno fino) */
.vg-vaga .vg-chips { margin-top: 2px; max-width: 100%; }
.vg-vaga .vg-chip { display: inline-block; height: 26px; min-height: 0; padding: 0 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .03);
  font: 400 12.5px/24px var(--txt); color: rgba(255, 255, 255, .8); }
.vg-vaga .vg-chip.meta { color: rgba(255, 255, 255, .62); }
.vg-vaga .vg-chip.nova { border-color: transparent; background: #e9f6ff; font-weight: 600; color: #062538; }
.vg-vaga .vg-chip.sal { border-color: rgba(118, 183, 213, .55); color: #fff; }
.vg-vaga .vg-chip .ic { margin-right: 5px; vertical-align: -2px; }
/* à direita do cartão: há quanto tempo a vaga foi postada e o marcador de salvar; no canto, o alfinete da vaga fixada */
.vg-v-lado { flex: none; align-self: center; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 104px; }
.vg-v-tempo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.vg-v-tempo .ic { width: 14px; height: 14px; }
.vg-v-alfinete { position: absolute; top: 12px; right: 14px; display: inline-flex; color: var(--azul-claro); pointer-events: none; }
.vg-v-alfinete .ic { width: 14px; height: 14px; }
.vg-salvar { z-index: 2; }
.vg-salvar[aria-pressed="true"] { color: #fff; border-color: rgba(58, 160, 216, .85); background: rgba(58, 160, 216, .28); }
.vg-salvar[aria-pressed="true"] .ic { fill: currentColor; }
.vg-vaga .vg-salvar { width: 34px; height: 34px; border-radius: 9px; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .7); }
.vg-vaga .vg-salvar:hover { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(255, 255, 255, .03); }
.vg-vaga .vg-salvar .ic { width: 16px; height: 16px; }
.vg-vaga .vg-salvar[aria-pressed="true"] { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(46, 118, 151, .4); }

.vg-vazio { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(14, 16, 18, .68);
  font-size: 14px; color: rgba(255, 255, 255, .5); }
.vg-vazio h3 { font: 600 16.5px/1.3 var(--txt); letter-spacing: 0; color: #fff; }
.vg-vazio a { color: var(--azul-claro); }
.vg-vazio .acoes { justify-content: center; margin-top: 10px; }
.vg-vazio .bt, .vg-alerta .bt { min-height: 38px; padding: 0 16px; border-radius: 9px; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font: 500 14px var(--txt); color: rgba(255, 255, 255, .88); }
.vg-vazio .bt:hover, .vg-alerta .bt:hover { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(255, 255, 255, .04); transform: none; }

.vg-paginas { grid-area: paginas; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.vg-pg { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .75); font: 400 13px var(--txt); font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s, background-color .15s; }
.vg-pg:hover { color: #fff; border-color: rgba(118, 183, 213, .42); }
.vg-pg[aria-current="page"] { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(46, 118, 151, .4); }
.vg-pg:disabled { opacity: .3; cursor: default; pointer-events: none; }
.vg-pg .ic { width: 14px; height: 14px; }
.vg-pg-pontos { padding: 0 2px; color: rgba(255, 255, 255, .4); }

/* o convite do alerta por e-mail, no pé da lista: um bloco como os cartões */
.vg-alerta { grid-area: alerta; margin-top: 18px; padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: center;
  border-radius: 14px; border-color: rgba(255, 255, 255, .07); background: rgba(14, 16, 18, .68); box-shadow: none; }
.vg-alerta-ic { width: 42px; height: 42px; padding: 11px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #2e7697, #022f46); }
.vg-alerta h3 { font: 600 15px/1.3 var(--txt); letter-spacing: 0; }
.vg-alerta p { margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.vg-alerta .bt:hover .ic { transform: none; }

/* a barra de filtros, à direita: um bloco como os cartões; os rótulos, os campos e as caixinhas são os de lá */
.vg-filtros { grid-area: filtros; position: sticky; top: calc(var(--topo) + 14px); display: flex; flex-direction: column; min-width: 0;
  max-height: calc(100vh - var(--topo) - 28px); max-height: calc(100dvh - var(--topo) - 28px);
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(14, 16, 18, .68); font-family: var(--txt); }
/* (no computador o bloco não tem título à vista, como lá; "Limpar tudo" aparece no alto dele quando há filtro em uso) */
.vg-f-topo { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 20px; }
.vg-f-topo h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg-f-topo .vg-elo { margin: 12px 0 -10px; padding: 2px 0; font: 400 12.5px var(--txt); color: rgba(255, 255, 255, .55); }
.vg-f-topo .vg-elo:hover { color: #fff; }
.vg-f-fechar, .vg-f-pe, .vg-f-fundo { display: none; }
.vg-f-corpo { min-height: 0; overflow-y: auto; padding: 20px 20px 22px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

.vg-f-campo { display: grid; gap: 8px; min-width: 0; }
.vg-f-rotulo { font: 500 12.5px/1.45 var(--txt); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .6); }
.vg-entrada { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color .15s, box-shadow .15s; }
.vg-entrada:hover { border-color: rgba(255, 255, 255, .2); }
.vg-entrada:focus-within { border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(118, 183, 213, .18); }
.vg-entrada > .ic { display: none; }
.vg-entrada input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 400 14px var(--txt); }
.vg-entrada input::placeholder { color: rgba(255, 255, 255, .36); }
.vg-f-campo select { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; padding: 0 34px 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .12); color: #fff; font: 400 14px var(--txt); cursor: pointer;
  background: rgba(255, 255, 255, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px 14px;
  transition: border-color .15s, box-shadow .15s; }
.vg-f-campo select:hover { border-color: rgba(255, 255, 255, .2); }
.vg-f-campo select:focus-visible { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(118, 183, 213, .18); }
.vg-f-campo select option { background: #14181b; color: #fff; }
.vg-f-nota { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .45); }
.vg-f-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.vg-filtros .vg-sug { top: calc(100% + 4px); padding: 6px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .12); background: #14181b; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.vg-filtros .vg-sug li { padding: 8px 10px; border-radius: 7px; font-size: 14px; color: rgba(255, 255, 255, .9); }
.vg-filtros .vg-sug li small { font-size: 12px; color: rgba(255, 255, 255, .45); }
.vg-filtros .vg-sug li b { font: 400 12px var(--txt); color: rgba(255, 255, 255, .45); }
.vg-filtros .vg-sug li[aria-selected="true"], .vg-filtros .vg-sug li:hover { background: rgba(46, 118, 151, .3); }

.vg-grupo { margin-top: 18px; }
.vg-grupo > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0 0 8px; cursor: pointer; font: 500 12.5px/1.45 var(--txt); color: rgba(255, 255, 255, .6); transition: color .12s; }
.vg-grupo:not([open]) > summary { padding-bottom: 0; }
.vg-grupo > summary::-webkit-details-marker { display: none; }
.vg-grupo > summary > span { flex: 1; }
.vg-grupo > summary .ic { width: 14px; height: 14px; color: rgba(255, 255, 255, .4); transition: transform .2s; }
.vg-grupo[open] > summary .ic { transform: rotate(180deg); }
.vg-grupo > summary:hover { color: rgba(255, 255, 255, .88); }
.vg-grupo > summary:hover .ic { color: rgba(255, 255, 255, .8); }
.vg-grupo-n { min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; font: 600 11px var(--txt); color: #fff; background: var(--azul); }
.vg-grupo-corpo { display: grid; gap: 10px; }
.vg-ops { display: flex; flex-direction: column; gap: 9px; }
.vg-op { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 9px; align-items: start; cursor: pointer; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .88);
  transition: color .12s, opacity .12s; }
.vg-op:hover { color: #fff; }
.vg-op input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 1px 0 0; display: grid; place-items: center; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .13); transition: background-color .12s, border-color .12s; }
.vg-op:hover input { border-color: rgba(255, 255, 255, .62); }
.vg-op input[type="radio"] { border-radius: 50%; }
.vg-op input::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .12s; }
.vg-op input[type="radio"]::after { width: 6px; height: 6px; margin: 0; border: 0; border-radius: 50%; background: #fff; transform: scale(0); }
.vg-op input:checked, .vg-op:hover input:checked { border-color: var(--azul); background: var(--azul); }
.vg-op input:checked::after { transform: rotate(-45deg) scale(1); }
.vg-op input[type="radio"]:checked::after { transform: scale(1); }
.vg-op input:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.vg-op input:checked + .vg-op-nome { color: #fff; }
.vg-op-nome { min-width: 0; overflow-wrap: anywhere; }
.vg-op-nome b { font-weight: 600; color: #fff; }
.vg-op-n { padding-top: 1px; font-size: 12px; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.vg-op.zerado { opacity: .45; }
.vg-ops:not(.tudo) .vg-op-extra:not(.marcada) { display: none; }
.vg-mais { align-self: flex-end; padding: 2px 0; font: 400 12.5px var(--txt); color: rgba(255, 255, 255, .55); }
.vg-mais:hover { color: #fff; }

/* ───────────── atalhos: tags, lugares e empresas ───────────── */
.secao.vg-explore { padding: 30px 0 84px; }
.vg-ex-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vg-ex { padding: 24px; }
.vg-ex-largo { grid-column: 1 / -1; }
.vg-ex h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 1rem; }
.vg-ex h3 .ic { color: var(--azul-claro); }
.vg-nuvem { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-nuvem + .vg-nuvem { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.vg-nuvem button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; font: 500 .84rem var(--tit); color: var(--texto-2);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: color .15s, border-color .15s, background-color .15s; }
.vg-nuvem button:hover { color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(118, 183, 213, .12); }
.vg-nuvem button b { font: 600 .74rem var(--tit); color: var(--azul-claro); font-variant-numeric: tabular-nums; }
.vg-nuvem-paises button { color: var(--texto); background: rgba(58, 160, 216, .14); border-color: rgba(58, 160, 216, .36); }
.vg-empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 10px; }
.vg-empresas button { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 14px 9px 9px; border-radius: 14px; text-align: left;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .15s, background-color .15s; }
.vg-empresas button:hover { border-color: rgba(118, 183, 213, .5); background: rgba(118, 183, 213, .09); }
.vg-empresas .vg-logo { width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; }
.vg-empresas .vg-logo img { padding: 4px; }
.vg-empresas span { font: 600 .9rem var(--tit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-empresas b { font: 600 .78rem var(--tit); color: var(--azul-claro); font-variant-numeric: tabular-nums; }

.final .vg-final-rec { margin-top: 26px; font-size: .95rem; color: var(--texto-3); }
.vg-final-rec a { color: var(--azul-claro); text-underline-offset: 3px; }
.vg-final-rec a:hover { color: #fff; }

/* ───────────── a vaga aberta ───────────── */
.vg-gaveta { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; }
.vg-g-fundo { position: absolute; inset: 0; background: rgba(1, 4, 7, .74); opacity: 0; transition: opacity .25s ease; }
.vg-g-painel { position: relative; width: min(840px, 100%); height: 100%; display: flex; flex-direction: column; outline: none; background: #040c13; border-left: 1px solid var(--linha-azul);
  box-shadow: -40px 0 90px -30px #000; opacity: 0; transform: translateX(44px); transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.vg-gaveta.aberta .vg-g-fundo { opacity: 1; }
.vg-gaveta.aberta .vg-g-painel { opacity: 1; transform: none; }
.vg-g-topo { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--linha); }
.vg-g-nav { display: flex; align-items: center; gap: 8px; margin-left: 6px; font-size: .82rem; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-g-acoes { position: relative; margin-left: auto; display: flex; gap: 8px; }
.vg-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 214px; padding: 6px; display: grid; border-radius: 14px; background: #071824;
  border: 1px solid var(--linha-azul); box-shadow: 0 30px 60px -20px #000; }
.vg-menu > * { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; font: 500 .9rem var(--tit); color: var(--texto-2); text-decoration: none; text-align: left; }
.vg-menu > *:hover { color: #fff; background: rgba(118, 183, 213, .15); }
.vg-menu .ic { width: 17px; height: 17px; color: var(--azul-claro); }
.vg-g-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 30px 44px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(118, 183, 213, .3) transparent; }
.vg-g-pe { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: #050f17; }
.vg-g-pe p { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.4; color: var(--texto-3); }
.vg-g-pe .bt { flex: none; }
.vg-g-pe .bt:hover .ic { transform: none; }

.vg-d-cabeca { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: center; }
.vg-logo.grande { width: 68px; height: 68px; border-radius: 18px; font-size: 1.5rem; }
.vg-d-cabeca h2 { font-size: clamp(1.3rem, 1vw + 1.05rem, 1.75rem); line-height: 1.22; overflow-wrap: anywhere; }
.vg-d-emp { margin-top: 6px; font-size: .98rem; color: var(--texto-2); }
.vg-d-elo { font-weight: 600; color: var(--azul-claro); text-decoration: underline; text-decoration-color: rgba(118, 183, 213, .35); text-underline-offset: 3px; }
.vg-d-elo:hover { color: #fff; }
.vg-d-fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px; margin-top: 22px; }
.vg-d-fatos li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.35;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.vg-d-fatos .ic { width: 36px; height: 36px; padding: 9px; border-radius: 11px; color: #dff3ff; background: rgba(118, 183, 213, .14); border: 1px solid var(--linha-azul); }
.vg-d-fatos small { display: block; margin-bottom: 1px; font: 600 .66rem var(--tit); letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3); }
.vg-d-chips { margin-top: 16px; }
.vg-d-chips button.vg-chip { min-height: 30px; cursor: pointer; transition: color .15s, border-color .15s; }
.vg-d-chips button.vg-chip:hover { color: #fff; border-color: rgba(118, 183, 213, .65); }
.vg-d-secao { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linha); }
.vg-d-secao > h3 { margin-bottom: 14px; font-size: 1.08rem; }
.vg-desc { color: #d6e2ea; font-size: 1rem; line-height: 1.72; overflow-wrap: anywhere; }
.vg-desc > * + * { margin-top: .85em; }
.vg-desc h3, .vg-desc h4 { margin-top: 1.5em; font: 600 1.02rem/1.35 var(--tit); letter-spacing: -.01em; color: var(--texto); }
.vg-desc h4 { font-size: .96rem; }
.vg-desc > :first-child { margin-top: 0; }
.vg-desc ul, .vg-desc ol { display: grid; gap: .35em; padding-left: 1.3em; }
.vg-desc ul { list-style: disc; }
.vg-desc ol { list-style: decimal; }
.vg-desc li::marker { color: var(--azul-claro); }
.vg-desc li > ul, .vg-desc li > ol { margin-top: .35em; }
.vg-desc li > p + p { margin-top: .5em; }
.vg-desc a { color: var(--azul-claro); text-underline-offset: 3px; }
.vg-desc a:hover { color: #fff; }
.vg-desc strong { font-weight: 600; color: var(--texto); }
.vg-desc hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--linha); }
.vg-desc blockquote { padding: 4px 0 4px 16px; border-left: 3px solid var(--azul); color: var(--texto-2); }
.vg-desc pre { white-space: pre-wrap; font: inherit; }
.vg-desc table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .92rem; }
.vg-desc td, .vg-desc th { padding: 8px 10px; border: 1px solid var(--linha); text-align: left; vertical-align: top; }
.vg-d-anunciante { margin-top: 22px; font-size: .88rem; color: var(--texto-3); }
.vg-d-anunciante b { font-weight: 600; color: var(--texto-2); }
.vg-parecidas { display: grid; gap: 8px; }
.vg-parecidas a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .15s, background-color .15s; }
.vg-parecidas a:hover { border-color: rgba(118, 183, 213, .5); background: rgba(118, 183, 213, .09); }
.vg-parecidas .vg-logo { width: 42px; height: 42px; border-radius: 11px; font-size: 1rem; }
.vg-parecidas .vg-logo img { padding: 4px; }
.vg-parecidas span { min-width: 0; display: grid; gap: 1px; }
.vg-parecidas b { font: 600 .93rem/1.3 var(--tit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-parecidas em { font-style: normal; font-size: .8rem; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-parecidas time { font-size: .76rem; color: var(--texto-3); white-space: nowrap; }
.vg-d-espera { display: grid; gap: 12px; }
.vg-d-espera i { display: block; height: 13px; border-radius: 7px; background: rgba(255, 255, 255, .07); }
.vg-d-espera i:nth-child(3n + 1) { width: 92%; }
.vg-d-espera i:nth-child(3n + 2) { width: 78%; }
.vg-d-espera i:nth-child(3n) { width: 55%; margin-bottom: 10px; }
.vg-d-estado { display: grid; justify-items: center; gap: 14px; padding: 64px 10px 30px; text-align: center; }
.vg-d-estado > .ic { width: 58px; height: 58px; padding: 15px; border-radius: 18px; color: #dff3ff; background: rgba(118, 183, 213, .14); border: 1px solid var(--linha-azul); }
.vg-d-estado h2 { font-size: 1.45rem; }
.vg-d-estado p { max-width: 48ch; color: var(--texto-2); }
.vg-d-estado .acoes { justify-content: center; margin-top: 10px; }

/* o pé da vaga para quem tem o cadastro grátis: a candidatura é dos planos pagos */
.vg-g-pe.so-assinante { flex-wrap: wrap; }
.vg-g-pe.so-assinante p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; flex: 1 1 280px; font-size: .88rem; line-height: 1.45; color: var(--texto-2); }
.vg-g-pe.so-assinante p b { font-weight: 600; color: #fff; }
.vg-g-pe.so-assinante p .ic { width: 16px; height: 16px; color: var(--azul-claro); }
.vg-pe-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* ───────────── a janela "Cadastre-se" (o visitante quis abrir uma vaga) ───────────── */
.vg-muro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.vg-m-fundo { position: fixed; inset: 0; background: rgba(1, 4, 7, .82); opacity: 0; transition: opacity .2s ease; }
.vg-m-caixa { position: relative; width: min(560px, 100%); padding: 34px 30px 26px; border-radius: 24px; outline: none; text-align: center;
  background: linear-gradient(170deg, #0c2334, #040c13 68%); border: 1px solid var(--linha-azul); box-shadow: 0 50px 120px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(14px) scale(.98); transition: transform .24s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.vg-muro.aberta .vg-m-fundo { opacity: 1; }
.vg-muro.aberta .vg-m-caixa { opacity: 1; transform: none; }
.vg-m-fechar { position: absolute; top: 14px; right: 14px; }
.vg-m-ic { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 18px; color: #e3f4ff; background: linear-gradient(135deg, #3f97bd, #0c4a69);
  box-shadow: 0 18px 40px -16px rgba(58, 160, 216, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.vg-m-ic .ic { width: 26px; height: 26px; }
.vg-m-caixa h2 { padding: 0 20px; font-size: clamp(1.2rem, 1.1vw + 1rem, 1.55rem); line-height: 1.26; text-wrap: balance; }
.vg-m-vaga { margin-top: 12px; font-size: .95rem; line-height: 1.5; color: var(--texto-2); overflow-wrap: anywhere; }
.vg-m-vaga b { font-weight: 600; color: #fff; }
.vg-m-lista { display: grid; gap: 9px; width: fit-content; max-width: 100%; margin: 20px auto 0; text-align: left; }
.vg-m-lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; line-height: 1.45; color: var(--texto-2); }
.vg-m-lista .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--azul-claro); stroke-width: 2.6; }
.vg-m-acoes { display: grid; gap: 10px; margin-top: 24px; }
.vg-m-acoes .bt { width: 100%; justify-content: center; }
.vg-m-espera { margin-top: 14px; font-size: .82rem; color: var(--azul-claro); }
.vg-m-nota { margin-top: 16px; font-size: .8rem; line-height: 1.5; color: var(--texto-3); }
.vg-m-nota a { color: var(--azul-claro); text-underline-offset: 3px; }
.vg-m-nota a:hover { color: #fff; }
@media (hover: none) { .vg-m-fundo { cursor: pointer; } }

/* A janela em vidro, como o painel do Início da HubClub IA (pedido do Lucca, 10/10/2026): a página de trás fica fosca,
   uma luz azul gira por dentro do vidro e, na borda de 1px, a mesma luz dá a volta nítida (12 s por volta, como lá).
   As camadas são postas pelo vagas.js, que marca a caixa com "vidro" e a janela com "com-vidro": sem elas (página
   antiga guardada com esta folha nova) a janela fica com o fundo fechado de antes.
   O desfoque de verdade fica só no fundo, que é preso na tela: na caixa, que pode rolar em tela baixa, ele some ao
   rolar em alguns navegadores (o defeito que o Lucca viu no Início). */
.vg-m-caixa.vidro { --vg-m-raio: 24px; isolation: isolate; border-color: transparent; background: none;
  box-shadow: 0 50px 120px -30px #000, 0 0 90px -30px rgba(58, 160, 216, .5); }
.vg-m-vidro { position: absolute; inset: -1px; z-index: -1; border-radius: var(--vg-m-raio); overflow: hidden; overflow: clip; pointer-events: none; }
.vg-m-luz { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.vg-m-gira { position: absolute; left: -600px; top: -600px; width: 1200px; height: 1200px; animation: vg-m-gira 12s linear infinite; will-change: transform; }
/* a borda: um anel de 1px (o miolo é recortado pela máscara) com um fio de luz parado e a luz que gira por cima */
.vg-m-anel { position: absolute; inset: 0; padding: 1px; border-radius: var(--vg-m-raio); overflow: hidden; overflow: clip; background: rgba(118, 183, 213, .2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.vg-m-conica { background: conic-gradient(from 225deg, transparent 0, rgba(140, 205, 238, .98) 90deg, transparent 90deg); }
/* o miolo: o vidro escuro (deixa passar um pouco da página fosca), a luz difusa e, por cima, a tinta */
.vg-m-miolo { position: absolute; inset: 1px; border-radius: calc(var(--vg-m-raio) - 1px); overflow: hidden; overflow: clip; background: rgba(5, 14, 22, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.vg-m-difusa { background: conic-gradient(from 225deg, transparent 0, rgba(58, 160, 216, .7) 90deg, transparent 90deg); filter: blur(46px); }
.vg-m-tinta { position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 32%), linear-gradient(170deg, rgba(12, 35, 52, .34), rgba(4, 12, 19, .5) 68%); }
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .vg-muro.com-vidro .vg-m-fundo { background: rgba(1, 5, 9, .58); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); }
  .vg-m-caixa.vidro .vg-m-miolo { background: rgba(5, 14, 22, .5); }
}
@keyframes vg-m-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vg-m-gira { animation: none; } }

.vg-recado { position: fixed; left: 50%; bottom: 26px; z-index: 90; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; transform: translateX(-50%);
  background: #e9f6ff; color: #062538; font: 600 .9rem var(--tit); text-align: center; box-shadow: 0 20px 50px -14px #000; }

/* ───────────── telas menores ───────────── */
@media (max-width: 1100px) {
  .vg-grade { grid-template-columns: minmax(0, 1fr) 272px; column-gap: 16px; padding-inline: 18px; }
}
@media (max-width: 900px) {
  /* Uma coluna só: a lista. O painel perde a folga de cima (a barra da lista é a faixa de cima dele) e fica com 1px
     livre em volta dela, para a luz da borda continuar aparecendo. */
  .vg-grade { display: block; padding: 1px 12px 16px; }
  /* Os filtros viram uma folha por cima da página, aberta pelo botão "Filtros" da barra (ela vem da direita, o lado em
     que os filtros ficam no computador). */
  .vg-filtros { position: fixed; inset: 0 0 0 auto; z-index: 66; width: min(430px, 100%); height: 100%; max-height: none; border: 0; border-left: 1px solid rgba(118, 183, 213, .22); border-radius: 0;
    background: #101417; visibility: hidden; transform: translateX(102%); transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; }
  /* ao abrir, a folha fica visível na hora (o foco já pode ir para dentro dela); ao fechar, só some depois de deslizar */
  html.vg-filtros-abertos .vg-filtros { visibility: visible; transform: none; transition-delay: 0s; }
  .vg-f-topo { justify-content: flex-start; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .vg-f-topo h2 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    flex: 1; display: flex; align-items: center; gap: 9px; font: 600 16px/1.3 var(--txt); letter-spacing: 0; }
  .vg-f-topo h2 .ic { color: var(--azul-claro); }
  .vg-f-topo .vg-elo { margin: 0; padding: 6px 0; font-size: 13px; }
  .vg-f-fechar { display: grid; }
  .vg-f-corpo { flex: 1; padding: 18px 18px 22px; }
  .vg-f-pe { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .07); background: #101417; }
  .vg-f-pe .bt { flex: 1; }
  .vg-f-pe .bt-s { flex: 0 0 auto; }
  .vg-f-fundo { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(4, 8, 10, .68); }
  .vg-entrada { min-height: 44px; }
  .vg-entrada input { height: 42px; }
  .vg-f-campo select { height: 44px; }
  .vg-entrada input, .vg-f-campo select { font-size: 16px; }
  /* (no dedo: as opções com mais respiro) */
  .vg-ops { gap: 14px; }
  .vg-op { grid-template-columns: 18px minmax(0, 1fr) auto; font-size: 15px; }
  .vg-op input { width: 18px; height: 18px; margin-top: 0; }
  .vg-bt-filtros { display: inline-flex; }
  /* A barra acompanha a rolagem: os filtros e a ordem ficam sempre à mão. Ela é a faixa de cima do painel (sem o
     desfoque do navegador: fundo fechado). */
  .vg-barra { position: sticky; top: var(--topo); z-index: 8; margin: 0 -11px 12px; padding: 12px 12px 10px; border-radius: 16px 16px 0 0; background: #0b1014; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .vg-barra-esq { flex: 1 1 100%; justify-content: space-between; gap: 0 10px; }
  .vg-lido { text-align: right; }
  .vg-barra-dir { flex: 1 1 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vg-barra-dir::-webkit-scrollbar { display: none; }
  .vg-pilula { min-height: 38px; padding: 0 11px; font-size: 13px; }
  .vg-ordem { padding: 0; }
  .vg-ordem select { height: 36px; padding: 0 28px 0 11px; }
  .vg-bt-filtros { order: -1; color: #fff; border-color: rgba(118, 183, 213, .5); background: rgba(46, 118, 151, .4); }
  .vg-pg { min-width: 40px; height: 40px; }
  /* (a luz do vidro numa tela pequena não precisa de um quadrado tão grande) */
  .vg-vd-gira { left: -700px; top: -700px; width: 1400px; height: 1400px; }
  .vg-vd-bruma { background: radial-gradient(ellipse 90% 340px at 50% 130px, rgba(58, 140, 180, .5), rgba(46, 118, 151, .2) 52%, rgba(46, 118, 151, 0) 100%); }
}
@media (max-width: 760px) {
  .heroi.vg-heroi { padding: calc(var(--topo) + 26px) 0 14px; }
  .vg-heroi .luz-1 { margin-right: -260px; }
  .vg-busca { grid-template-columns: minmax(0, 1fr); margin-top: 24px; border-radius: 20px; }
  .vg-b-campo + .vg-b-campo::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 1px; }
  .vg-b-botao { margin: 8px 0 0; }
  .vg-numeros { gap: 6px; margin-top: 18px; }
  .vg-numeros button, .vg-numeros span { min-height: 34px; padding: 0 12px; font-size: .82rem; line-height: 34px; }
  .vg-setas { display: none; }
  .vg-mod, .vg-mod-espera { width: 178px; min-height: 110px; }
  .vg-mod:not(.sem-foto) { width: 178px; min-height: 0; }
  .vg-mod-espera { height: 184px; }
  .vg-painel { padding-bottom: 60px; }
  /* O cartão da vaga: o logo com o título e a empresa ao lado; as etiquetas na largura inteira; embaixo, há quanto
     tempo e o marcador de salvar. */
  .vg-vaga { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "logo titulo" "logo sub" "chips chips" "lado lado"; gap: 4px 12px; padding: 14px; }
  .vg-v-meio { display: contents; }
  .vg-vaga > .vg-logo { grid-area: logo; align-self: start; width: 44px; height: 44px; font-size: 18px; }
  .vg-vaga h3 { grid-area: titulo; align-self: end; font-size: 15.5px; }
  .vg-vaga.fixada h3 { padding-right: 22px; }
  .vg-v-sub { grid-area: sub; align-self: start; }
  .vg-vaga .vg-chips { grid-area: chips; margin-top: 8px; }
  .vg-v-lado { grid-area: lado; align-self: auto; justify-content: space-between; min-width: 0; margin-top: 6px; }
  .vg-vaga .vg-salvar { width: 40px; height: 40px; }
  .vg-alerta { grid-template-columns: auto minmax(0, 1fr); }
  .vg-alerta .bt { grid-column: 1 / -1; }
  .secao.vg-explore { padding: 16px 0 60px; }
  .vg-ex-grade { grid-template-columns: minmax(0, 1fr); }
  .vg-ex { padding: 20px 18px; }
  .vg-g-painel { width: 100%; border-left: 0; }
  .vg-g-topo { padding: 10px 12px; }
  .vg-g-corpo { padding: 20px 18px 34px; }
  .vg-d-cabeca { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .vg-logo.grande { width: 56px; height: 56px; border-radius: 15px; }
  .vg-d-fatos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .vg-d-fatos li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; }
  .vg-d-fatos .ic { display: none; }
  .vg-g-pe p { display: none; }
  .vg-g-pe .bt-p { flex: 1; }
  .vg-g-pe.so-assinante p { display: flex; flex-basis: 100%; }
  .vg-g-pe.so-assinante .vg-pe-acoes { flex: 1 1 100%; }
  .vg-acesso { padding: 14px; }
  .vg-a-acoes { flex: 1 1 100%; }
  .vg-a-acoes .bt { flex: 1; justify-content: center; }
  .vg-m-caixa { padding: 30px 20px 22px; border-radius: 22px; }
  .vg-m-caixa.vidro { --vg-m-raio: 22px; }
  .vg-m-caixa h2 { padding: 0 26px; }
  .vg-recado { bottom: 84px; }
}
@media (max-width: 560px) {
  .vg-modulos > .cx, .vg-painel > .cx { width: min(1280px, 100% - 32px); }
  /* (no celular o painel de vidro chega mais perto das bordas da tela, como lá) */
  .vg-painel > .cx.vg-grade { width: calc(100% - 20px); }
  .vg-barra-dir { gap: 6px; }
  .vg-pilula { padding: 0 10px; }
  .vg-ordem { padding: 0; }
  .vg-ordem select { padding: 0 26px 0 10px; }
  .vg-ordem .ic { right: 8px; }
  .vg-pg { min-width: 38px; height: 40px; padding: 0 10px; }
}