/* ==========================================================================
   OCTA SYSTEMS — Página de currículo (banco de talentos)
   Reaproveita os tokens/reset/tipografia de style.css; aqui só o que é
   específico desta página (cabeçalho simples, formulário, estado de sucesso).

   Página fixa, sem rolagem: header, formulário e footer se distribuem
   dentro de 100svh (flex column), e o formulário usa espaçamento
   compacto para caber por completo na tela em qualquer viewport comum
   (desktop e mobile), igual ao app original que serviu de referência.
   ========================================================================== */

html{height:100%}
body.page-form{
  height:100svh;height:100dvh;
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* ---------- Header simples ---------- */
.form-header{
  flex:0 0 auto;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,6,.7);backdrop-filter:blur(14px);
}
.form-header__inner{
  height:clamp(48px,6vh,80px);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.form-header__inner .brand img{width:clamp(64px,7vh,96px)}
.link-arrow--back{display:inline-flex;align-items:center;gap:7px;font-size:clamp(12.5px,1.3vh,15px);padding-bottom:0}
.link-arrow--back::after,.link-arrow--back::before{display:none}
.link-arrow--back svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.link-arrow--back:hover{color:#fff}
.link-arrow--back:hover svg{transform:translateX(-4px)}

/* ---------- Layout principal ----------
   Todo o dimensionamento abaixo usa clamp() com vh/vw como unidade
   principal: em telas baixas, cai no piso (mesmo tamanho já testado
   sem rolagem); em telas grandes e altas, cresce de verdade em vez de
   sobrar uma faixa estreita de formulário cercada de espaço vazio. */
.form-page__main{
  flex:1 1 auto;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding-block:10px;
}
.form-shell{width:100%;max-width:clamp(660px,48vw,1000px);max-height:100%}

.form-intro{margin-bottom:clamp(14px,2.6vh,34px)}
.form-intro .eyebrow{margin-bottom:clamp(6px,.9vh,14px);font-size:clamp(10px,1vh,13px)}
.form-intro .h2{font-size:clamp(19px,2.9vh,34px);line-height:1.22;margin-bottom:clamp(7px,1.1vh,16px);max-width:30ch}
.form-intro .body{font-size:clamp(12.5px,1.6vh,18px);line-height:1.55;max-width:64ch}

/* ---------- Formulário ---------- */
.talent-form{
  display:flex;flex-direction:column;gap:clamp(11px,1.8vh,26px);
  padding:clamp(18px,3vh,42px) clamp(22px,3vw,52px);
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
}
.talent-form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,30px)}

.field{display:flex;flex-direction:column;gap:clamp(5px,.8vh,10px)}
.field label{font-size:clamp(10.5px,1.1vh,13.5px);color:var(--txt-2);letter-spacing:.01em}
.field label .req{color:#fff}
.field label .opt{color:var(--txt-3);font-size:.93em}

.field input,.field select{
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid var(--line-strong);border-radius:2px;
  padding:clamp(7.5px,1.3vh,16px) clamp(11px,1.3vw,20px);
  font:inherit;font-size:clamp(12px,1.35vh,16px);color:var(--txt);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.field input::placeholder{color:rgba(255,255,255,.28)}
.field input:focus,.field select:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.field select{cursor:pointer;color-scheme:dark}
.field select option{background:#0d0d10;color:#fff}

/* ---------- Upload de arquivo ---------- */
.dropzone{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:clamp(9px,1.6vh,24px) clamp(12px,1.6vw,22px);
  border:1px dashed var(--line-strong);border-radius:2px;
  color:var(--txt-2);font-size:clamp(11.5px,1.25vh,14.5px);text-align:center;cursor:pointer;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.dropzone svg{width:15px;height:15px;flex-shrink:0}
.dropzone:hover,.dropzone:focus-visible{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03);color:#fff}
.dropzone.is-dragging{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}

.file-chip{
  display:flex;align-items:center;gap:8px;
  padding:clamp(7.5px,1.3vh,16px) clamp(11px,1.3vw,20px);
  border:1px solid var(--line-strong);border-radius:2px;
  background:rgba(255,255,255,.04);
}
.file-chip svg{width:14px;height:14px;flex-shrink:0;color:var(--txt-2)}
.file-chip__name{font-size:clamp(11.5px,1.25vh,14.5px);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.file-chip__size{font-size:.85em;color:var(--txt-3);flex-shrink:0}
.file-chip__remove{margin-left:auto;flex-shrink:0;width:20px;height:20px;display:grid;place-items:center;color:var(--txt-2);border-radius:2px;transition:color .3s,background .3s}
.file-chip__remove svg{width:11px;height:11px}
.file-chip__remove:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Erro / envio ---------- */
.form-error{
  display:flex;align-items:center;gap:8px;font-size:clamp(11.5px,1.2vh,14px);color:#ff8a8a;
  padding:0;
}
.talent-form__submit{align-self:flex-start;margin-top:2px;padding:clamp(9px,1.6vh,18px) clamp(22px,2.6vw,36px);font-size:clamp(12px,1.35vh,16px)}
.talent-form__submit:disabled{opacity:.55;pointer-events:none}
.talent-form__submit .spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(0,0,0,.35);border-top-color:transparent;
  animation:formSpin .7s linear infinite;
}
@keyframes formSpin{to{transform:rotate(360deg)}}

/* ---------- Sucesso (modal) ---------- */
.talent-modal{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;
}
body.modal-open{overflow:hidden}
.talent-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,6,.78);backdrop-filter:blur(10px);
  animation:modalFade .35s var(--ease);
}
.talent-modal__panel{
  position:relative;z-index:1;width:min(440px,100%);
  padding:clamp(26px,4vw,38px);text-align:center;
  border:1px solid var(--line-strong);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  box-shadow:0 50px 90px -24px rgba(0,0,0,.75);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:modalIn .45s var(--ease);
  max-height:88vh;overflow-y:auto;
}
.talent-modal__close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  display:grid;place-items:center;color:var(--txt-2);border-radius:2px;
  transition:color .3s,background .3s;
}
.talent-modal__close svg{width:15px;height:15px}
.talent-modal__close:hover{color:#fff;background:rgba(255,255,255,.08)}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.talent-success__icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(120,255,180,.08);border:1px solid rgba(120,255,180,.3);color:#7dffb4;
  animation:successPop .5s var(--ease);
}
.talent-success__icon svg{width:21px;height:21px}
@keyframes successPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.talent-success .h3{margin-bottom:0;font-size:19px}
.talent-success .body{max-width:42ch;font-size:13px}

/* ---------- CTA de Instagram ----------
   Foco do modal: converter quem acabou de se candidatar em seguidor
   qualificado, prometendo algo concreto (saber das próximas vagas em
   primeira mão) em vez de um genérico "nos siga". Único ponto do site
   com um acento de cor (o gradiente da própria marca do Instagram),
   usado com moderação para chamar o olho sem fugir do tom do site. */
.ig-cta{
  width:100%;margin-top:6px;padding:18px 20px;text-align:left;
  border:1px solid rgba(255,255,255,.14);border-radius:4px;
  background:
    linear-gradient(165deg,var(--panel-2),var(--panel)) padding-box,
    linear-gradient(135deg,rgba(245,133,41,.55),rgba(221,42,123,.5) 45%,rgba(129,52,175,.55)) border-box;
  border:1px solid transparent;
  position:relative;
}
.ig-cta__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-bottom:10px;border-radius:9px;color:#fff;
  background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4);
}
.ig-cta__icon svg{width:19px;height:19px}
.ig-cta__title{font-size:13.5px;font-weight:500;color:#fff;margin-bottom:5px;letter-spacing:-.01em}
.ig-cta__text{font-size:12px;line-height:1.55;color:var(--txt-2);margin-bottom:14px;max-width:40ch}
.ig-cta__text strong{color:#fff;font-weight:500}

.ig-cta__btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  width:100%;justify-content:center;
  padding:11px 18px;border-radius:2px;
  font-size:12.5px;font-weight:500;letter-spacing:.01em;color:#0a0a0a;
  background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4);
  background-size:150% 150%;background-position:0% 50%;
  transition:background-position .5s var(--ease),transform .3s var(--ease);
}
.ig-cta__btn svg{width:15px;height:15px;flex-shrink:0}
.ig-cta__btn svg:first-child{color:#0a0a0a}
.ig-cta__btn svg:last-child{transition:transform .4s var(--ease)}
.ig-cta__btn:hover{background-position:100% 50%}
.ig-cta__btn:hover svg:last-child{transform:translateX(4px)}
.ig-cta__btn:active{transform:scale(.98)}

.talent-modal__back{font-size:12px;margin-top:2px;padding-bottom:0}
.talent-modal__back::after,.talent-modal__back::before{display:none}
.talent-modal__back:hover{color:#fff}

/* ---------- Footer ---------- */
.form-footer{flex:0 0 auto;border-top:1px solid var(--line);padding-block:10px}
.form-footer__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10.5px;color:var(--txt-3);
}
.form-footer__inner a{color:var(--txt-2);transition:color .3s}
.form-footer__inner a:hover{color:#fff}

/* elementos com display próprio (flex/grid) precisam reafirmar [hidden],
   senão o atributo é ignorado e eles aparecem mesmo "escondidos" pelo JS */
.dropzone[hidden],.file-chip[hidden],.talent-modal[hidden],.form-error[hidden]{display:none}

/* ---------- Responsivo ---------- */
@media (max-width:640px){
  .form-header__inner{height:48px}
  .form-header__inner .brand img{width:64px}
  .link-arrow--back span{display:none}
  .form-intro .body br{display:none}
  .file-chip__name{max-width:130px}
}

/* telas bem baixas (notebooks pequenos, celular em paisagem): aperta
   ainda mais para garantir que nada seja cortado sem rolagem */
@media (max-height:680px){
  .form-header__inner{height:44px}
  .form-intro{margin-bottom:9px}
  .form-intro .eyebrow{margin-bottom:3px}
  .form-intro .h2{font-size:18px;margin-bottom:4px}
  .form-intro .body{font-size:11.5px;line-height:1.4}
  .talent-form{gap:7px;padding:13px 18px}
  .talent-form__row{gap:9px}
  .field{gap:3px}
  .field input,.field select{padding:5.5px 10px}
  .dropzone{padding:6px 10px}
  .form-footer{padding-block:6px}
}