/* ============================================================
   Unidade visual (26/10/2026): o gráfico "Por conta própria" e o
   contador de vagas no clima do linktree (vidro escuro, aqua aceso,
   fundo pontilhado). Um arquivo só pra todas as páginas: entra DEPOIS
   do CSS da página (e do /funil/paginas.css). Só visual: nenhum texto,
   href, data-* ou evento muda.

   Cobre as três montagens do contador que existem no site:
     .vagas-contador  (linktree, no HTML)
     .zr-vagas        (/vagas-contador.js, que injeta o próprio <style>)
     .vagas-caixa--solta (/funil/blocos.js, BLOCOS.vagasGrande)
     .vagas-caixa       (#vagasCaixa, dentro do cartão do plano: só o anel)
     .vaga-regras       (/funil/vaga, no /funil/minima.css)
   "html body" na frente pra ganhar do <style> que o vagas-contador.js
   injeta no fim do <head>.
   ============================================================ */

/* ---------- gráfico "Por conta própria" vira cartão ---------- */
html body .arte-caixa--perdida{
  position:relative;box-sizing:border-box;
  padding:26px 14px 10px;border-radius:20px;
  background:
    radial-gradient(rgba(193,223,224,.07) 1px,transparent 1.2px) 0 0/14px 14px,
    radial-gradient(140% 90% at 15% 0%,rgba(127,240,240,.06) 0%,transparent 60%),
    linear-gradient(165deg,rgba(33,50,59,.62) 0%,rgba(24,29,32,.62) 100%);
  border:1px solid rgba(193,223,224,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -14px rgba(0,0,0,.6);
}
/* os textos tinham contorno da cor do fundo da página; no cartão, contorno da cor do cartão */
html body .arte-caixa--perdida .arte__titulo,
html body .arte-caixa--perdida .arte__pensa,
html body .arte-caixa--perdida .arte__rot--zero{stroke:#1F2A30}
/* 26/10: título como os títulos de cartão da página (Zé achou feio o caixa alta espaçado) */
html body .arte-caixa--perdida .arte__titulo{font-family:'Sora',system-ui,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;text-transform:none;fill:#ECEEE8;opacity:1}
html body .arte-caixa--perdida .arte__zero{stroke:rgba(193,223,224,.2);stroke-dasharray:2 4}
html body .arte-caixa--perdida .arte__seta{stroke:rgba(193,223,224,.3)}
html body .arte-caixa--perdida .arte__fantasma{stroke:rgba(193,223,224,.1)}
html body .arte-caixa--perdida .arte__desenho{stroke:#C1DFE0;stroke-width:2;filter:drop-shadow(0 0 5px rgba(127,240,240,.35))}
/* acima do zero aqua; abaixo, em vez do coral, um cinza frio */
html body .arte-caixa--perdida .arte__area--cima{fill:rgba(127,240,240,.08)}
html body .arte-caixa--perdida .arte__area--baixo{fill:rgba(127,147,148,.12)}
html body .arte-caixa--perdida .arte__marca-ponto{fill:#1F2A30;stroke:rgba(193,223,224,.35)}
html body .arte-caixa--perdida .arte__pensa{fill:rgba(127,147,148,.55)}
html body .arte-caixa--perdida .arte__marca.ativa .arte__pensa--alto{fill:#C1DFE0}
html body .arte-caixa--perdida .arte__marca.ativa .arte__pensa--baixo{fill:rgba(236,238,232,.78)}
html body .arte-caixa--perdida .arte__marca.ativa .arte__marca-ponto{fill:#C1DFE0;stroke:#C1DFE0;filter:drop-shadow(0 0 5px rgba(127,240,240,.6))}
html body .arte-caixa--perdida .arte__bola{fill:#ECEEE8;filter:drop-shadow(0 0 6px rgba(127,240,240,.7))}
html body .arte-caixa--perdida .arte__rot--zero{fill:rgba(236,238,232,.6)}

/* ---------- contador de vagas: vidro escuro com o número num anel aceso ---------- */
html body .vaga-regras{
  background:
    radial-gradient(110px 90px at 56px 54px,rgba(127,240,240,.09) 0%,transparent 70%),
    linear-gradient(165deg,rgba(33,50,59,.62) 0%,rgba(24,29,32,.62) 100%);
  border:1px solid rgba(193,223,224,.12);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -14px rgba(0,0,0,.6);
}
html body .vagas-contador,
html body .zr-vagas,
html body .vagas-caixa--solta{
  display:flex;align-items:center;gap:16px;text-align:left;box-sizing:border-box;
  padding:14px 18px 14px 14px;border-radius:20px;
  background:
    radial-gradient(110px 90px at 50px 50%,rgba(127,240,240,.09) 0%,transparent 70%),
    linear-gradient(165deg,rgba(33,50,59,.62) 0%,rgba(24,29,32,.62) 100%);
  border:1px solid rgba(193,223,224,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -14px rgba(0,0,0,.6);
}
html body .vagas-contador p,
html body .zr-vagas p,
html body .vagas-caixa--solta p{margin:0;font-size:.84rem;line-height:1.55;color:#9BA5A6}
html body .vagas-contador p strong,
html body .zr-vagas p strong,
html body .vagas-caixa--solta p strong{color:#ECEEE8}

html body .vagas-contador__num,
html body .zr-vagas__num,
html body .vagas-caixa .vagas-caixa__num,
html body .vaga-regras__num{
  position:relative;flex-shrink:0;box-sizing:border-box;
  width:74px;height:74px;min-width:0;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:radial-gradient(circle at 50% 35%,rgba(33,50,59,.95) 0%,rgba(24,29,32,.95) 75%);
  box-shadow:inset 0 0 0 1px rgba(193,223,224,.14),0 0 22px rgba(127,240,240,.12);
}
/* o anel que gira devagar em volta do número */
html body .vagas-contador__num::before,
html body .zr-vagas__num::before,
html body .vagas-caixa .vagas-caixa__num::before,
html body .vaga-regras__num::before{
  content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(127,240,240,0) 0deg,rgba(127,240,240,0) 200deg,rgba(127,240,240,.85) 320deg,rgba(127,240,240,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:unidadeGira 5s linear infinite;
}
@keyframes unidadeGira{to{transform:rotate(360deg)}}

html body .vagas-contador__n,
html body .zr-vagas__n,
html body .vagas-caixa .vagas-caixa__n,
html body .vaga-regras__n{font-size:1.85rem;font-weight:800;line-height:1;color:#ECEEE8;text-shadow:0 0 16px rgba(127,240,240,.45)}
html body .vagas-contador__rot,
html body .zr-vagas__rot,
html body .vagas-caixa .vagas-caixa__rot,
html body .vaga-regras__rot{font-size:.46rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;text-align:center;color:#C1DFE0;opacity:.75}

@media (prefers-reduced-motion:reduce){
  html body .vagas-contador__num::before,
  html body .zr-vagas__num::before,
  html body .vagas-caixa .vagas-caixa__num::before,
  html body .vaga-regras__num::before{animation:none}
}

/* ---------- botão novo (26/10): o .cta, o secundário e a barra de baixo do linktree ----------
   Valores copiados do linktree (blocos ".cta{", "Aplicar pro time" e "23/10: botões
   no clima do fundo pontilhado"). Só visual: tamanho, display e as classes que
   escondem a barra (--oculto, --fim, .ligado) continuam com a página. Sem
   min-height aqui pra não mexer no .cta--grande e no .acoes do próprio linktree. */
html body .cta{
  border-radius:999px;
  background:linear-gradient(180deg,#d3eaeb 0%,#C1DFE0 100%);
  box-shadow:0 14px 34px -10px rgba(193,223,224,.45),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(17,24,32,.08);
  transition:transform .15s,box-shadow .2s,background .2s;
}
html body .cta:hover{opacity:1;background:#d2e9ea;box-shadow:0 14px 44px rgba(193,223,224,.32),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-1px)}
/* secundário: .fantasma no linktree, .cta--fantasma no funil (modo bio) */
html body .fantasma,
html body .cta.cta--fantasma{
  border-radius:999px;
  background:linear-gradient(180deg,rgba(193,223,224,.07),rgba(193,223,224,.02));
  border:1px solid rgba(193,223,224,.22);color:#ECEEE8;font-weight:600;
  box-shadow:none;
  transition:background .15s,border-color .15s;
}
html body .fantasma:hover,
html body .cta.cta--fantasma:hover{background:rgba(193,223,224,.08);border-color:rgba(193,223,224,.5);box-shadow:none}
html body .fantasma svg{color:#C1DFE0}

/* barra de baixo: a faixa vira cápsula flutuante de vidro */
html body .cta-fixo{background:linear-gradient(180deg,rgba(24,29,32,0) 0%,rgba(24,29,32,.7) 60%);-webkit-backdrop-filter:none;backdrop-filter:none}
html body .cta-fixo__interno{
  gap:6px;padding:6px;border-radius:999px;box-sizing:border-box;
  background:rgba(24,29,32,.78);border:1px solid rgba(193,223,224,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 0 30px -10px rgba(31,211,214,.25),inset 0 1px 0 rgba(255,255,255,.06);
}
html body .cta-fixo .cta,
html body .cta-fixo .fantasma{min-height:48px;padding:10px 14px;white-space:nowrap;font-size:.88rem}
html body .cta-fixo .fantasma,
html body .cta-fixo .cta.cta--fantasma{background:transparent;border-color:transparent}
html body .cta-fixo .fantasma:hover,
html body .cta-fixo .cta.cta--fantasma:hover{background:rgba(193,223,224,.07)}
@media (prefers-reduced-motion:reduce){
  html body .cta:hover{transform:none}
}

/* ---------- 26/10: "O que acontece quando você toca no botão" no clima do linktree ----------
   Os 3 passos do fechamento (.fechamento__passos, do /funil/paginas.css, e
   .vaga-passos, do /funil/minima.css): número num
   disco escuro com anel aqua aceso (como o contador) e uma trilha
   fina ligando um número ao outro. Só visual: o texto e a ordem não mudam. */
html body .fechamento__titulo,
html body .vaga-passos__titulo{color:#C1DFE0;text-wrap:balance}
html body .fechamento__titulo::before,
html body .vaga-passos__titulo::before{content:'';display:inline-block;vertical-align:middle;margin:-2px 8px 0 0;width:6px;height:6px;border-radius:50%;background:#C1DFE0;box-shadow:0 0 8px rgba(193,223,224,.7)}
html body .fechamento__passos,
html body .vaga-passos ol{gap:0}
/* sem cartão em volta (Zé, 26/10: "não precisa dos blocos"): só a trilha ligando os números */
html body .fechamento__passos li,
html body .vaga-passos li{
  padding:12px 4px 12px 58px;border:0;border-radius:0;box-shadow:none;color:#ECEEE8;
  background:
    linear-gradient(rgba(127,240,240,.35),rgba(127,240,240,.35)) no-repeat 30px 0/1px calc(50% - 15px),
    linear-gradient(rgba(127,240,240,.35),rgba(127,240,240,.35)) no-repeat 30px 100%/1px calc(50% - 15px);
}
/* a trilha não sai do primeiro nem passa do último */
html body .fechamento__passos li:first-child,
html body .vaga-passos li:first-child{background-size:0 0,1px calc(50% - 15px)}
html body .fechamento__passos li:last-child,
html body .vaga-passos li:last-child{background-size:1px calc(50% - 15px),0 0}
html body .fechamento__passos li:only-child,
html body .vaga-passos li:only-child{background-size:0 0,0 0}
html body .fechamento__passos li::before,
html body .vaga-passos li::before{
  left:15px;width:30px;height:30px;box-sizing:border-box;
  font-size:.8rem;font-weight:800;color:#ECEEE8;text-shadow:0 0 10px rgba(127,240,240,.5);
  background:radial-gradient(circle at 50% 35%,rgba(33,50,59,.95) 0%,rgba(24,29,32,.95) 75%);
  box-shadow:inset 0 0 0 1px rgba(127,240,240,.55),0 0 14px rgba(127,240,240,.22);
}

/* ---------- 26/10: Brick by Brick (páginas do Elementor): o botão de entrar vira a pílula do linktree ----------
   O botão lá é .elementor-button.cta-comprar-lp (o .cta-btn cinza do vídeo fica como está).
   Seletor comprido de propósito: o lp-brick.css põe o canto com .elementor-12 .elementor-element... */
html body .elementor-element .elementor-button.elementor-button-link.cta-comprar-lp{
  border-radius:999px;
  background:linear-gradient(180deg,#d3eaeb 0%,#C1DFE0 100%);
  box-shadow:0 14px 34px -10px rgba(193,223,224,.45),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(17,24,32,.08);
}
html body .elementor-element .elementor-button.elementor-button-link.cta-comprar-lp:hover{background:#d2e9ea;box-shadow:0 14px 44px rgba(193,223,224,.32),inset 0 1px 0 rgba(255,255,255,.5)}