/* Folha só da página /vagas/ (21/09/2026). Fica fora do style.css pelo mesmo
   motivo das outras páginas de material: são classes que nenhuma outra página
   usa. As variáveis (--bg, --ink, --accent, --line…) vêm do style.css,
   carregado antes; aqui não se redefine paleta nem tipografia.
   A grade de cards da lista é a `.ferr` do style.css, compartilhada com a
   /ferramentas/ e com a home: não repetir aqui. */

/* ---------- fundo da página ---------- */
/* Mesmas regras da .pg-ferramenta da /whatsapp/ e da .pg-ferramentas do
   style.css: o degradê liso no lugar do preto chapado. Repetição consciente,
   ver o comentário na folha da /whatsapp/. Os valores são os reforçados a
   pedido do Iuri em 25/08/2026: não devolver aos fracos. */
.pg-vagas{
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(75,157,214,.26), transparent 70%),
    linear-gradient(180deg, #12161f 0%, #0b0d14 42%, #050505 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.pg-vagas .proj-hero,
.pg-vagas .section,
.pg-vagas .footer{background:transparent}
.pg-vagas .noise{opacity:.045}
.pg-vagas .footer{border-top:1px solid var(--line)}
/* hero centralizado, como nas cinco páginas de material */
.pg-vagas .proj-hero h1,
.pg-vagas .proj-hero .proj-lead{max-width:none;text-align:center;margin-inline:auto}

/* ---------- lista ---------- */
.vagas-vazio{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:40px 28px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;
}
.vagas-vazio h2{font-size:1.25rem}
.vagas-vazio p{color:var(--muted);line-height:1.6;max-width:520px}

/* etiquetas no hero da vaga: as mesmas .ferr__tags dos cards, centralizadas */
.vaga__chips{justify-content:center}

/* ---------- detalhe ---------- */
/* Duas colunas: à esquerda o que a pessoa vai fazer, à direita a ficha com os
   números e o botão. Lado a lado porque quem chega de um link de Instagram
   quer os quatro dados (modelo, horário, carga, bolsa) antes de ler a lista. */
.vaga{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.vaga__corpo{background:var(--surface);padding:30px 28px;display:flex;flex-direction:column;gap:28px;min-width:0}
.vaga__ficha{background:var(--surface-2);padding:30px 28px;display:flex;flex-direction:column;gap:22px}
.vaga__ficha dl{display:flex;flex-direction:column;gap:16px;margin:0}
.vaga__ficha dt{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;
}
.vaga__ficha dd{margin:0;font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.4}
.vaga__ficha dd small{display:block;font-weight:400;color:var(--muted);font-size:.8125rem;margin-top:2px}
.vaga__ficha .btn{justify-content:center;width:100%}
.vaga__ficha-nota{color:var(--muted);font-size:.8125rem;line-height:1.55;border-top:1px solid var(--line);padding-top:14px}

.vaga__bloco{display:flex;flex-direction:column;gap:12px}
.vaga__bloco h2{font-size:1.25rem;letter-spacing:-.01em}
.vaga__bloco > p{color:var(--muted);line-height:1.65}
.vaga__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vaga__lista li{position:relative;padding-left:18px;color:var(--muted);line-height:1.6;font-size:.9375rem}
.vaga__lista li::before{
  content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);
}
.vaga__lista li strong{color:var(--ink);font-weight:600}
.vaga__passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:passo}
.vaga__passos li{
  position:relative;padding-left:36px;color:var(--muted);line-height:1.6;font-size:.9375rem;
  counter-increment:passo;
}
.vaga__passos li::before{
  content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--accent);
}
.vaga__passos li strong{color:var(--ink);font-weight:600}

/* vaga encerrada: aviso no lugar do formulário */
.vaga__encerrada{
  background:rgba(232,180,74,.10);border:1px solid rgba(232,180,74,.35);
  border-radius:12px;padding:14px 16px;color:#e8b44a;font-size:.9375rem;line-height:1.55;
}

/* ---------- formulário de candidatura ---------- */
.cand{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.cand__grupo{
  background:var(--surface);padding:30px 28px;display:flex;flex-direction:column;gap:20px;
  border:0;margin:0;min-width:0;
}
.cand__grupo--pe{background:var(--surface-2);gap:16px}
.cand__cab{display:flex;flex-direction:column;gap:6px}
.cand__cab h2{font-size:1.25rem;letter-spacing:-.01em}
.cand__cab p{color:var(--muted);font-size:.9375rem;line-height:1.55}
.cand__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cand__campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.cand__campo--largo{grid-column:1/-1}
.cand__campo label{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
/* o asterisco do obrigatório é azul, e não vermelho: vermelho antes de a
   pessoa errar é alarme sem motivo */
.cand__campo label em,
.quiz__texto em{font-style:normal;color:var(--accent)}
.cand__campo input,
.cand__campo select,
.cand__campo textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:1rem;
  transition:border-color .3s var(--ease);
}
.cand__campo textarea{resize:vertical;min-height:96px;line-height:1.55}
.cand__campo input::placeholder,
.cand__campo textarea::placeholder{color:rgba(255,255,255,.28)}
.cand__campo input:focus,
.cand__campo select:focus,
.cand__campo textarea:focus{outline:none;border-color:var(--accent)}
.cand__campo select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a8a8a8' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.cand__campo select option{background:var(--bg);color:var(--ink)}
/* campo de arquivo: o botão nativo vira a pílula das outras ações do site */
.cand__campo input[type="file"]{padding:9px 14px;cursor:pointer;font-size:.9375rem;color:var(--muted)}
.cand__campo input[type="file"]::file-selector-button{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;margin-right:12px;color:var(--ink);font-family:var(--sans);
  font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.cand__campo input[type="file"]::file-selector-button:hover{color:var(--accent);border-color:var(--accent)}
.cand__ajuda{color:var(--muted);font-size:.8125rem;line-height:1.5}
.cand__ajuda.is-longo{color:#e8b44a}
/* campo com erro: a borda muda e a mensagem aparece embaixo */
.cand__campo.is-erro input,
.cand__campo.is-erro select,
.cand__campo.is-erro textarea{border-color:var(--erro)}
.cand__erro{display:none;color:var(--erro);font-size:.8125rem;line-height:1.4}
.cand__campo.is-erro .cand__erro,
.quiz__q.is-erro .cand__erro{display:block}

/* ---------- o teste ---------- */
.quiz{display:flex;flex-direction:column;gap:16px}
.quiz__q{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .3s var(--ease);
}
.quiz__q.is-erro{border-color:var(--erro)}
.quiz__n{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.10em;color:var(--muted)}
.quiz__texto{font-weight:600;color:var(--ink);line-height:1.5;font-size:1rem}
.quiz__ops{display:flex;flex-direction:column;gap:8px}
.quiz__op{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;
  color:var(--muted);font-size:.9375rem;line-height:1.5;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.quiz__op:hover{border-color:var(--line-2);color:var(--ink)}
.quiz__op input{margin:4px 0 0;accent-color:var(--accent);flex:none;width:16px;height:16px}
/* a classe vem do JS; o :has() é para quem chega sem JS em navegador novo */
.quiz__op.is-on,
.quiz__op:has(input:checked){border-color:var(--accent);color:var(--ink);background:rgba(75,157,214,.08)}
.quiz__q .cand__campo{gap:6px}
.quiz__q .cand__campo textarea{background:var(--surface)}

/* ---------- pé do formulário ---------- */
.cand__aceite{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.875rem;line-height:1.5;cursor:pointer}
.cand__aceite input{margin:3px 0 0;accent-color:var(--accent);flex:none;width:16px;height:16px}
.cand__aceite a{text-decoration:underline;text-underline-offset:3px}
.cand__aceite a:hover{color:var(--accent)}
.cand__aceite.is-erro{color:var(--erro)}
.cand__pe{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.cand__msg{font-size:.9375rem;color:var(--muted);line-height:1.5;flex:1;min-width:200px}
.cand__msg--erro{color:var(--erro)}
.cand__msg--ok{color:var(--ink)}
.cand .btn[disabled]{opacity:.4;pointer-events:none}
.cand__nota{color:var(--muted);font-size:.75rem;line-height:1.55;border-top:1px solid var(--line);padding-top:12px}

/* depois de enviar, o formulário some e este bloco entra no lugar */
.cand__sucesso{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:48px 28px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;
}
.cand__sucesso h2{font-size:1.5rem;letter-spacing:-.02em}
.cand__sucesso p{color:var(--muted);line-height:1.6;max-width:560px}
.cand__sucesso .btn{margin-top:8px}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .vaga{grid-template-columns:1fr}
}
@media (max-width:600px){
  .vaga__corpo,.vaga__ficha,.cand__grupo{padding:22px 18px}
  .cand__grid{grid-template-columns:1fr}
  .cand__pe .btn{width:100%;justify-content:center}
}