/* === Careers enhancements =================================== */

/* Hero especial carreiras */
.hero--careers {
  padding: clamp(2.5rem, 6vw, 6rem) 0 clamp(1.5rem, 4vw, 3rem);
}
.hero--careers::before {
  content:"";
  position:absolute; inset:-15vh 0 auto;
  height:55vh; z-index:-1;
  background:
    radial-gradient(60% 50% at 10% 10%, color-mix(in lab, var(--brand) 20%, transparent) 0, transparent 60%),
    radial-gradient(60% 50% at 90% 15%, color-mix(in lab, var(--brand-2) 22%, transparent) 0, transparent 60%),
    linear-gradient(to bottom, color-mix(in lab, var(--brand) 6%, transparent), transparent 40%);
}

/* Pills */
.pills{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.9rem 0 0; }
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  border:1px solid color-mix(in lab, var(--brand) 30%, var(--border));
  background: color-mix(in lab, var(--brand) 14%, var(--card));
  font-size:.85rem; color:var(--text); white-space:nowrap;
}

/* Porquê a Confere */
.highlights{ display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .highlights{ grid-template-columns:1fr; } }
.highlight{
  border-radius:16px; padding:1rem; background:var(--card);
  border:1px solid color-mix(in lab, var(--brand) 16%, var(--border));
}
.highlight .h-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background: color-mix(in lab, var(--brand) 18%, transparent); margin-bottom:.5rem;
}

/* Benefícios */
.benefits{ display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .benefits{ grid-template-columns:1fr; } }
.benefit{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem;
  display:flex; gap:.8rem; align-items:flex-start;
}
.benefit .b-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background: color-mix(in lab, var(--brand) 16%, transparent); flex:0 0 34px;
}
.benefit h3{ margin:.1rem 0 .25rem; font-size:1rem; }

/* Processo */
.process{ display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:step; }
@media (max-width:960px){ .process{ grid-template-columns:1fr; } }
.step{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; position:relative;
}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-12px; left:-12px; width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center; color:#fff; font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px color-mix(in lab, var(--brand) 35%, transparent);
}

/* FAQ */
.faq details{ border:1px solid var(--border); border-radius:12px; background:var(--card); padding:.75rem 1rem; }
.faq details+details{ margin-top:.6rem; }
.faq summary{ cursor:pointer; list-style:none; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .answer{ color:var(--muted); margin-top:.4rem; }

/* Sticky CTA (mobile) */
.apply-cta{ position:fixed; bottom:12px; left:12px; right:12px; z-index:90; display:none; }
.apply-cta .btn{ width:100%; justify-content:center; }
@media (max-width:820px){ .apply-cta{ display:block; } }

/* Ativo no menu */
.menu-links a[aria-current="page"]{
  color:var(--text);
  background: color-mix(in lab, var(--brand) 12%, transparent);
}

/* Ancoragem dos cards */
.card.job{ scroll-margin-top: calc(var(--header-h) + 16px); }
.job--highlight{ outline:3px solid var(--ring); outline-offset:2px; box-shadow:0 0 0 6px color-mix(in lab, var(--ring) 35%, transparent); }

/* ---------- Modal base ---------- */
.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; }
.modal[data-state="closed"]{ pointer-events:none; }
.modal[data-state="closed"] .modal-backdrop{ opacity:0; }
.modal[data-state="closed"] .modal-dialog{ transform:translateY(8px) scale(.98); opacity:0; }

.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(4px) saturate(120%);
  transition:opacity .18s ease;
}

.modal-dialog{
  position:relative;
  width:min(1040px,94vw);
  max-height:86vh;
  display:grid;
  grid-template-rows: 1fr auto;        /* sem header visual */
  background:var(--card); color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(2,6,23,.30);
  overflow:hidden;
  transition:transform .18s ease, opacity .18s ease;
}

/* Botão fechar ABSOLUTO dentro do quadrado */
.modal-close{
  position:absolute; top:.6rem; right:1rem;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:10px;
  width:36px; height:34px; line-height:1;
  cursor:pointer;
}
.modal-close:hover{ background: color-mix(in lab, var(--card) 85%, var(--brand) 15%); }

.modal-body{ padding:.8rem 1rem; overflow:auto; }
.modal-footer{
  padding:.75rem 1rem; border-top:1px solid var(--border);
  background:var(--card); display:flex; justify-content:flex-end;
}

/* Conteúdo da vaga no modal */
.modal-job-title{ margin:0 0 .25rem; font-size:1.2rem; line-height:1.15; }
.job-modal-content .section-lead{ margin:.15rem 0 .6rem; }

/* Colunas: menos espaço entre colunas; direita com largura decente */
.job-cols{
  display:grid;
  grid-template-columns: 1.6fr 1.4fr;   /* dá mais espaço à coluna da direita */
  column-gap:.5rem;                     /* menos gap entre colunas */
  row-gap:.6rem;
}
@media (max-width:960px){ .job-cols{ grid-template-columns:1fr; } }

/* Secções: menos espaço entre blocos */
.job-sec{ margin-bottom:.5rem; }
.job-sec:last-child{ margin-bottom:0; }
.job-sec-title{ margin:.05rem 0 .25rem; font-size:1rem; }

/* Listas: compactar */
.job-list{
  margin:.15rem 0 .35rem;
  padding-left:1.05rem;
  color:var(--muted);
}
.job-list li{ margin:.1rem 0; hyphens:auto; }

/* Facts: compactar ainda mais */
.job-facts{
  display:grid; grid-template-columns:auto 1fr;
  gap:.2rem .5rem;
}
.job-facts dt{ font-weight:600; white-space:nowrap; }
.job-facts dd{ margin:0; color:var(--muted); hyphens:auto; }

/* Perks */
.job-perks{ display:flex; flex-wrap:wrap; gap:.3rem; }
.job-perks .tag{ white-space:nowrap; }

/* Scroll lock */
body.modal-open{ overflow:hidden; }

/* Asides mínimos para reduzir wrap exagerado em ecrãs largos */
.job-cols > aside{ min-width:320px; }

/* Texto agradável */
.job-modal-content{ text-wrap: pretty; }


/* botão fechar com melhor área de toque e posição */
.modal-header{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--border);
  background: color-mix(in lab, var(--brand) 8%, var(--card));
}
.modal-close{
  position:absolute;
  top:.6rem;
  right:1rem;       /* um pouco mais à esquerda do canto */
  width:40px;       /* touch target confortável */
  height:40px;
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  line-height: 1;
  cursor: pointer;
  display:grid;
  place-items:center;
}

/* título dentro da modal, em cima da descrição */
.modal-job-title{
  margin: 0 0 .3rem;
  font-size: 1.2rem;
  line-height: 1.15;
}

/* reduzir espaçamentos internos entre secções da vaga */
.job-sec{ margin-bottom: .5rem; }
.job-sec-title{ margin:.05rem 0 .25rem; font-size:1rem; }
.job-list{ margin:.2rem 0 .5rem; padding-left:1.1rem; }

/* coluna direita com um pouco mais de largura */
.job-cols{
  display:grid;
  gap:.8rem;
  grid-template-columns: 1.65fr 1.35fr;   /* + espaço à direita */
  column-gap: .6rem;
}
@media (min-width:1200px){
  .job-cols{ grid-template-columns: 1.55fr 1.45fr; }
}
.job-cols>aside{ min-width:320px; }

/* esconder CTA quando modal aberta (garantido pelo JS e CSS) */
body.modal-open .apply-cta{ display:none !important; }

/* CTA móvel: não ficar sempre visível; animar entrada/saída */
.apply-cta{
  position: fixed;
  bottom: 12px; left: 12px; right: 12px;
  z-index: 90;
  display: none;                /* desktop: escondido */
}
@media (max-width:820px){
  .apply-cta{
    display:block;              /* mobile: controlamos por classe */
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .apply-cta.is-visible{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .apply-cta .btn{ width:100%; justify-content:center; }
}


/* header compacto, close alinhado à direita */
.modal-header{
  position: relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--border);
  background: color-mix(in lab, var(--brand) 8%, var(--card));
}

/* botão close — look “glass”, redondo, com hover/focus */
.modal-close{
  position:absolute;
  top:.6rem;
  right:1rem;               /* “mais à esquerda” do canto */
  width:42px; height:42px;  /* bom para toque */
  display:grid; place-items:center;
  border-radius:999px;
  border:1px solid color-mix(in lab, var(--border) 80%, var(--brand) 10%);
  background: color-mix(in lab, var(--card) 85%, transparent);
  backdrop-filter: blur(4px) saturate(120%);
  box-shadow: 0 8px 18px rgba(2,6,23,.12);
  cursor:pointer; touch-action: manipulation;
  transition: background .2s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}

.modal-close:hover{
  background: color-mix(in lab, var(--card) 92%, var(--brand) 8%);
  border-color: color-mix(in lab, var(--border) 60%, var(--brand) 24%);
  transform: scale(1.04);
}

.modal-close:active{ transform: scale(.96); }

.modal-close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in lab, var(--ring) 45%, transparent),
              0 8px 18px rgba(2,6,23,.18);
}

/* ícone “X” */
.modal-close-icon{
  width:18px; height:18px;
  color: var(--text);
  opacity:.85;
  transition: opacity .2s ease, color .2s ease;
}
.modal-close:hover .modal-close-icon{ opacity:1; }

/* menos movimento para quem preferir */
@media (prefers-reduced-motion: reduce){
  .modal-close{ transition:none; }
  .modal-close:hover{ transform:none; }
}

.modal-close-icon{
  width:18px; height:18px;
  color: var(--text);
  opacity:.9;
  pointer-events:none; /* o clique apanha no botão, não no SVG */
}