/* ============================================================
   Vagas — extensão do design system do site
   Carregado DEPOIS de assets/css/style.css: tokens, .btn,
   .eyebrow, .h2, .area-card, .site-header e .site-footer vêm
   de lá. Aqui fica só o que é específico do formulário.
   ============================================================ */

/* O site bloqueia seleção de texto; num formulário isso atrapalha */
.etapa,.etapa *,.gaveta,.gaveta *{-webkit-user-select:text;user-select:text}

body{display:flex;flex-direction:column;min-height:100vh}
.palco{flex:1;display:flex;align-items:center;padding:110px 0 80px}
/* O pattern fica na periferia: no miolo é onde a pergunta é lida */
.palco.section--pattern::before{
  -webkit-mask-image:radial-gradient(125% 85% at 50% 50%,transparent 0 40%,#000 82%);
  mask-image:radial-gradient(125% 85% at 50% 50%,transparent 0 40%,#000 82%)
}
.palco.saindo{opacity:0;transform:translateY(10px)}
.palco{transition:opacity .18s var(--ease),transform .18s var(--ease)}

/* barra de progresso presa à base do .site-header, que já é position:fixed */
.trilho{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.trilho span{display:block;height:100%;width:0;background:var(--wine);transition:width .45s var(--ease)}
#contador-etapas{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:.7
}

/* ---------- etapa ---------- */
.etapa{animation:sobe .45s var(--ease) both}   /* largura vem do .shell */
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.etapa--estreita{max-width:720px}
.etapa .h2{margin-bottom:14px}
.etapa .section-sub{margin:0 0 30px}

/* ---------- abertura ---------- */
.abertura .section-head{max-width:none;text-align:center;margin-bottom:52px}
.abertura .section-sub{margin-inline:auto}
.vaga-card{cursor:pointer;text-align:left;font:inherit;color:inherit}
.vaga-card .area-body{gap:0}
.vaga-card .link-arrow{margin-top:auto}


/* ---------- detalhes da vaga ---------- */
.detalhes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;margin:6px 0 26px}
.detalhe h3{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);margin:0 0 12px;font-weight:500
}
.detalhe li{position:relative;padding-left:18px;font-size:.88rem;margin-bottom:8px;list-style:none}
.detalhe li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--wine)}
.detalhe ul{margin:0;padding:0}
.diferencial{
  font-size:.86rem;font-style:italic;border-left:2px solid var(--line-strong);
  padding-left:15px;margin:0 0 28px
}

/* ---------- campos sobre fundo claro ---------- */
.campo{margin-bottom:8px}
.entrada{
  width:100%;font-family:var(--sans);font-size:1.12rem;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:2px solid var(--line-strong);
  padding:10px 2px;transition:border-color .3s
}
.entrada::placeholder{color:var(--ink-soft);opacity:.4}
.entrada:focus{outline:none;border-color:var(--wine)}
.entrada--select{
  appearance:none;-webkit-appearance:none;cursor:pointer;font-size:1rem;
  border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--card);
  padding:14px 44px 14px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C4667' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px
}
.entrada--select:disabled{opacity:.55;cursor:default}
.dupla{display:grid;grid-template-columns:1fr 1.3fr;gap:14px}
@media (max-width:620px){.dupla{grid-template-columns:1fr}}

.entrada--area{
  border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:15px 17px;
  font-size:1rem;resize:vertical;min-height:130px;background:var(--card)
}

.opcoes{display:grid;gap:12px;margin-bottom:8px}
.opcao{
  display:flex;align-items:center;gap:14px;text-align:left;font:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px;font-size:.95rem;color:var(--ink);transition:.4s var(--ease);cursor:pointer
}
.opcao:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong);background:#fff}
.opcao.marcada{border-color:var(--wine);background:#fff}
.tecla{
  width:27px;height:27px;flex:none;display:grid;place-items:center;border-radius:6px;
  border:1px solid var(--line-strong);font-size:.7rem;font-weight:500;color:var(--wine)
}
.opcao.marcada .tecla{background:var(--wine);color:#fff;border-color:var(--wine)}

.erro{color:#A3231B;font-size:.85rem;margin:12px 0 0}
.acoes{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.dica-enter{font-size:.74rem;opacity:.6}

/* ---------- vídeo ---------- */
.arquivo-cartao{
  display:flex;align-items:center;gap:15px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:6px
}
.arquivo-ico{width:34px;height:34px;flex:none;color:var(--wine)}
.arquivo-ico svg{width:100%;height:100%}
.arquivo-cartao strong{display:block;font-size:.95rem;color:var(--ink);font-weight:500;word-break:break-all}
.arquivo-cartao span{font-size:.8rem;color:var(--ink-soft)}

.aviso-permissao{
  font-size:.8rem;line-height:1.55;color:var(--ink-soft);background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--wine);border-radius:var(--r);
  padding:13px 16px;margin:0 0 20px;max-width:64ch
}
.video-caixa{
  position:relative;background:var(--plum);border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:16/9;border:1px solid var(--line-strong)
}
.video-preview{width:100%;height:100%;object-fit:cover;display:block;background:var(--plum)}
.cronometro{
  position:absolute;top:14px;right:14px;background:rgba(59,27,49,.86);color:var(--blush);
  font-variant-numeric:tabular-nums;font-size:.88rem;font-weight:500;
  padding:7px 14px;border-radius:100px;display:flex;align-items:center;gap:9px
}
.cronometro::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5484D;animation:pulsa 1.1s infinite}
.cronometro.acabando{background:#A3231B}
@keyframes pulsa{50%{opacity:.25}}
.video-estado{font-size:.86rem;margin:14px 0 0;color:var(--ink-soft)}
.btn--parar{background:#A3231B;color:#fff}
.btn--parar:hover{background:#8a1d16}

/* ---------- revisão e fim ---------- */
.resumo{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;margin:0 0 24px;display:grid;gap:10px;font-size:.9rem;list-style:none
}
.resumo strong{color:var(--ink);font-weight:500}
.aceite{display:flex;gap:12px;align-items:flex-start;font-size:.84rem;line-height:1.55;cursor:pointer}
.aceite input{margin-top:4px;width:17px;height:17px;flex:none;accent-color:var(--wine)}
.aceite a{color:var(--wine);border-bottom:1px solid rgba(124,70,103,.4)}

.fim{text-align:center;max-width:620px;margin-inline:auto}
.selo-ok{
  width:66px;height:66px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;
  background:var(--lilac);color:var(--wine)
}
.selo-ok svg{width:30px;height:30px}
.fim .acoes{justify-content:center}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* as regras de display acima sobrescreveriam o atributo hidden do HTML */
[hidden]{display:none !important}

@media (max-width:860px){
  .palco{padding:92px 0 60px}
  .areas-primary{grid-template-columns:1fr}
  .acoes{gap:12px}
  .acoes .btn{flex:1;justify-content:center}
  .dica-enter{display:none}
}