/* ==========================================================================
   PÁGINA: VAGAS (vagas.php)
   ========================================================================== */

.jobs{background:var(--white); padding-top:100px;}
.jobs-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.job-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:30px 32px;
  border-radius:var(--radius);
  background:var(--white);
  border:1px solid var(--line);
  overflow:hidden;
}
.job-card.reveal{
  transition:opacity .7s ease, translate .7s ease, transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.job-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0;
  transition:opacity .35s ease;
}
.job-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -18px rgba(11,27,59,.16);
  border-color:rgba(0,82,255,.2);
}
.job-card:hover::before{opacity:1;}
.job-card-info h3{font-size:18.5px; font-weight:400; margin-bottom:10px;}
.job-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.job-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--blue);
  background:var(--blue-tint-2);
  padding:5px 12px;
  border-radius:100px;
}
.job-card-info p{font-size:14.5px; color:var(--gray); max-width:560px;}
.job-card-action{flex-shrink:0;}
.job-card-action .btn{padding:12px 22px; font-size:14px;}

.talent-bank{
  margin-top:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:36px 36px;
  border-radius:var(--radius);
  background:var(--blue-tint);
  border:1px solid var(--line);
}
.talent-bank h3{font-size:19px; font-weight:400; margin-bottom:8px;}
.talent-bank p{font-size:14.5px; color:var(--ink-soft); max-width:520px;}

/* ---------- Responsivo (vagas) ---------- */
@media (max-width:760px){
  .job-card{flex-direction:column; align-items:flex-start;}
  .job-card-action{width:100%;}
  .job-card-action .btn{width:100%; justify-content:center;}
  .talent-bank{flex-direction:column; align-items:flex-start;}
  .talent-bank .btn{width:100%; justify-content:center;}
}