/* ═══════════════════════════════════════════════════════════════
   S4 Accelerator · Vaga UGC
   Paleta oficial: Navy #0A1628 (autoridade), Gold #D4A855 (ação).
   Proporção 60/30/10 — neutro domina, navy estrutura, gold só no CTA.
   Montserrat nos títulos, Inter no corpo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy:        #0A1628;
  --navy-mid:    #1E3A5F;
  --navy-light:  #2E5A8F;
  --gold:        #D4A855;
  --gold-light:  #E8C97D;
  --fire:        #E85A3D;   /* alertas */
  --neutro:      #F5F5F5;
  --branco:      #FFFFFF;
  --linha:       #E3E6EA;
  --texto:       #0A1628;
  --texto-suave: #5B6675;
  --raio:        10px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--neutro);
  color:var(--texto);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ═══════════════ TOPO ═══════════════ */

.topo{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--navy);
}
.topo__marca{
  max-width:720px;
  margin:0 auto;
  padding:16px 20px;
  color:var(--branco);
  font-family:Montserrat, Inter, sans-serif;
  font-weight:900;
  font-size:17px;
  letter-spacing:.04em;
}
.topo__marca span{ color:var(--gold); font-weight:700; }

.prog{ height:3px; background:var(--navy-mid); }
.topo{ padding-bottom:0; }
.prog span{
  display:block;
  height:100%;
  width:20%;
  background:var(--gold);
  transition:width .3s ease;
}

/* ═══════════════ PALCO ═══════════════ */

.palco{
  max-width:720px;
  margin:0 auto;
  padding:28px 20px 56px;
}

/* ═══════════════ CAPA ═══════════════ */

.capa{
  background:var(--navy);
  color:var(--branco);
  border-radius:var(--raio);
  padding:32px 26px;
  margin-bottom:26px;
}
.tag{
  display:inline-block;
  margin-bottom:16px;
  padding:5px 12px;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold);
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.capa h1{
  font-family:Montserrat, Inter, sans-serif;
  font-weight:800;
  font-size:clamp(24px, 5vw, 32px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:16px;
}
.capa__texto{
  color:#C8D0DA;
  margin-bottom:12px;
}
.capa__aviso{
  margin-top:18px;
  padding:14px 16px;
  border-left:3px solid var(--gold);
  background:rgba(212,168,85,.08);
  font-size:15px;
}
.capa__aviso b{ color:var(--gold-light); }

/* ═══════════════ ETAPAS ═══════════════ */

.etapa{
  border:0;
  background:var(--branco);
  border-radius:var(--raio);
  padding:26px 24px;
  box-shadow:0 1px 3px rgba(10,22,40,.07);
}
.etapa[hidden]{ display:none; }

legend{
  font-family:Montserrat, Inter, sans-serif;
  font-weight:800;
  font-size:19px;
  color:var(--navy);
  padding-bottom:18px;
}
.etapa__nota{
  margin:-6px 0 20px;
  color:var(--texto-suave);
  font-size:15px;
}

/* ═══════════════ CAMPOS ═══════════════ */

.campo{ display:block; margin-bottom:20px; }
.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .dupla{ grid-template-columns:1fr; gap:0; } }

.campo__rotulo{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:600;
  color:var(--navy);
}
.campo__ajuda{
  display:block;
  margin:-2px 0 10px;
  color:var(--texto-suave);
  font-size:13px;
  line-height:1.5;
}

input[type=text], input[type=tel], input[type=email],
input[type=url], input[type=number], textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--linha);
  border-radius:8px;
  background:var(--branco);
  color:var(--texto);
  font-family:inherit;
  font-size:16px;    /* 16px evita o zoom automático do iOS ao focar */
  resize:vertical;
}
input:focus, textarea:focus{
  outline:0;
  border-color:var(--navy-light);
  box-shadow:0 0 0 3px rgba(46,90,143,.12);
}
input::placeholder, textarea::placeholder{ color:#A7AFBA; }

/* o campo do vídeo em espanhol é o que decide a vaga: tem peso visual próprio */
.campo--destaque{
  margin-bottom:20px;
  padding:18px;
  border:1px solid var(--gold);
  border-radius:var(--raio);
  background:rgba(212,168,85,.06);
}

/* ═══════════════ GRUPOS ═══════════════ */

.grupo{ margin-bottom:22px; }
.grupo .campo__rotulo{ margin-bottom:10px; }

.opcao{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
  padding:11px 14px;
  border:1px solid var(--linha);
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
  transition:border-color .15s ease, background .15s ease;
}
.opcao:hover{ border-color:var(--navy-light); }
.opcao input{
  flex:none;
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--navy-mid);
  cursor:pointer;
}
.opcao:has(input:checked){
  border-color:var(--navy-mid);
  background:rgba(30,58,95,.05);
}

.termo{
  margin:22px 0;
  padding:16px;
  border:1px solid var(--linha);
  border-radius:8px;
  background:var(--neutro);
}
.termo .opcao{ border:0; padding:0; margin:0; background:none; }

/* ═══════════════ ERRO ═══════════════ */

.is-invalid{ border-color:var(--fire) !important; }
.is-invalid .opcao{ border-color:var(--fire); }
.erro{
  margin:4px 0 14px;
  color:var(--fire);
  font-size:14px;
  font-weight:600;
}

/* ═══════════════ BOTÕES ═══════════════ */

.navegacao{
  display:flex;
  gap:10px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--linha);
}

.botao{
  flex:1;
  padding:14px 20px;
  border:0;
  border-radius:8px;
  background:var(--gold);
  color:var(--navy);
  font-family:Montserrat, Inter, sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.botao:hover{ background:var(--gold-light); }
.botao:active{ transform:scale(.99); }
.botao[disabled]{ opacity:.6; cursor:progress; }

.botao--fantasma{
  flex:0 0 auto;
  min-width:110px;
  background:transparent;
  color:var(--texto-suave);
  border:1px solid var(--linha);
  font-weight:600;
}
.botao--fantasma:hover{ background:var(--neutro); color:var(--navy); }

/* ═══════════════ RODAPÉ ═══════════════ */

.rodape{
  padding:22px 20px 34px;
  text-align:center;
  color:var(--texto-suave);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}

/* texto do progresso, abaixo da barra */
.prog__texto{
  max-width:720px;
  margin:0 auto;
  padding:8px 20px 10px;
  color:#9AA7B6;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--navy);
}
.prog__texto b{ color:var(--gold); }

/* Armadilha anti-robô: fora da tela, sem display:none — alguns robôs ignoram
   campos escondidos por display, mas preenchem os que existem no DOM. */
.armadilha{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}