/* ===================================================================
   publico.css — formulários abertos (candidatura e contratação).

   Depende de base.css, que precisa vir antes no HTML.

   É a primeira impressão que o candidato tem da Visio, então prioriza
   respiro, hierarquia clara e conforto no celular — onde a maioria vai
   preencher.
   =================================================================== */

body {
  min-height: 100vh;
  padding: var(--e10) var(--e4) var(--e16);
  /* Um brilho da marca no alto, muito sutil: dá profundidade à página
     sem competir com o conteúdo. */
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(0,168,216,.09), transparent 70%),
    radial-gradient(700px 400px at 85% 5%, rgba(60,180,147,.06), transparent 65%),
    var(--sup-0);
  background-attachment: fixed;
}

.pagina { max-width: 640px; margin: 0 auto; }

/* =========================== CABEÇALHO =========================== */
.cabecalho { margin-bottom: var(--e8); text-align: center; }

.cabecalho .marca {
  gap: var(--e3);
  margin-bottom: var(--e6);
}
.cabecalho .marca-nome { font-size: 19px; letter-spacing: -.01em; }

.cabecalho h1 {
  font-size: 30px;
  margin-bottom: var(--e3);
  letter-spacing: -.02em;
}

.subtitulo {
  color: var(--txt-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto;
}

/* Fio com o gradiente da marca, separando cabeçalho e formulário */
.cabecalho::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--e6) auto 0;
  border-radius: var(--r-pilula);
  background: var(--marca-gradiente);
}

/* =========================== FORMULÁRIO =========================== */
.formulario {
  background: var(--sup-1);
  border: 1px solid var(--linha);
  border-radius: var(--r4);
  padding: var(--e8);
  box-shadow: var(--sombra-2);
}

@media (max-width: 560px) {
  body { padding: var(--e6) var(--e3) var(--e12); }
  .formulario { padding: var(--e5); border-radius: var(--r3); }
  .cabecalho h1 { font-size: 25px; }
}

.campo { margin-bottom: var(--e5); }
.campo:last-of-type { margin-bottom: 0; }

/* Duas colunas que viram uma no celular */
.linha { display: flex; gap: var(--e4); }
.linha .campo { flex: 1; min-width: 0; }
.campo-cidade { flex: 2 !important; }
.campo-estado { flex: 0 0 96px !important; }
.campo-curto-md { max-width: 220px; }

@media (max-width: 560px) {
  .linha { flex-direction: column; gap: 0; }
  .campo-estado { flex: 1 !important; }
  .campo-curto-md { max-width: none; }
}

/* =========================== SEÇÕES =========================== */
/* Agrupa campos por assunto — em formulário longo, blocos sem divisão
   viram uma parede de campos e a pessoa desiste no meio. */
.secao {
  margin: var(--e8) 0 var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
}
.secao:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.secao-titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--txt-3);
  margin-bottom: var(--e5);
}
.secao-titulo::before {
  content: "";
  width: 3px; height: 13px;
  border-radius: 2px;
  background: var(--marca-gradiente);
}

/* =========================== GRUPOS DE ESCOLHA =========================== */
fieldset.grupo { border: none; padding: 0; margin: 0 0 var(--e5); }

fieldset.grupo legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 580;
  color: var(--txt-2);
}

.opcoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Pílula selecionável — usada para horas, turnos e vínculo */
.opcao-pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  padding: 9px var(--e4);
  background: var(--sup-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-pilula);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--txt-2);
  transition: all var(--t-rapida);
  user-select: none;
}
.opcao-pilula:hover { border-color: var(--linha-forte); color: var(--txt); }

.opcao-pilula input { position: absolute; opacity: 0; pointer-events: none; }

.opcao-pilula:has(input:checked) {
  background: var(--info-fundo);
  border-color: var(--marca-ciano);
  color: var(--marca-ciano-viva);
  font-weight: 600;
}
.opcao-pilula:has(input:focus-visible) { box-shadow: var(--brilho-foco); }

/* A marca de seleção aparece só quando escolhido, sem mexer no tamanho */
.opcao-pilula::before {
  content: "";
  width: 0;
  overflow: hidden;
  transition: width var(--t-rapida);
}
.opcao-pilula:has(input:checked)::before {
  content: "✓";
  width: 12px;
  font-size: 11px;
  font-weight: 700;
}

/* =========================== ARMADILHA ANTI-ROBÔ =========================== */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =========================== ENVIO =========================== */
.aviso-privacidade {
  display: flex;
  gap: var(--e3);
  margin: var(--e8) 0 var(--e5);
  padding: var(--e4);
  background: var(--sup-2);
  border-left: 3px solid var(--marca-ciano);
  border-radius: var(--r1);
  font-size: 12.5px;
  color: var(--txt-2);
  line-height: 1.55;
}
.aviso-privacidade::before { content: "🔒"; flex-shrink: 0; opacity: .75; }

.turnstile:not(:empty) { margin-bottom: var(--e4); display: flex; justify-content: center; }

.botao {
  width: 100%;
  padding: 14px;
  background: var(--marca-gradiente);
  color: #04222b;
  border: none;
  border-radius: var(--r2);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,168,216,.22);
  transition: filter var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida);
}
.botao:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0,168,216,.3);
}
.botao:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 8px rgba(0,168,216,.2); }
.botao:focus-visible { outline: none; box-shadow: var(--brilho-foco), 0 4px 14px rgba(0,168,216,.22); }
.botao:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }

.mensagem {
  margin: var(--e4) 0 0;
  font-size: 13.5px;
  text-align: center;
  line-height: 1.5;
}
.mensagem:empty { display: none; }
.mensagem.ruim {
  color: var(--erro);
  background: var(--erro-fundo);
  padding: 11px var(--e4);
  border-radius: var(--r2);
  border: 1px solid rgba(242,109,120,.25);
}

/* =========================== SUCESSO =========================== */
.sucesso {
  background: var(--sup-1);
  border: 1px solid rgba(52,201,138,.3);
  border-radius: var(--r4);
  padding: var(--e12) var(--e8);
  text-align: center;
  box-shadow: var(--sombra-2);
  animation: entrar var(--t-media) both;
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.sucesso-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: var(--e5);
  background: var(--ok-fundo);
  border: 2px solid rgba(52,201,138,.35);
  border-radius: 50%;
  color: var(--ok);
  font-size: 28px;
}

.sucesso h2 { margin-bottom: var(--e3); font-size: 22px; }
.sucesso p { color: var(--txt-2); margin-bottom: var(--e2); line-height: 1.6; }
.sucesso-obs { font-size: 13px; color: var(--txt-3); margin-top: var(--e4); }

/* =========================== RODAPÉ =========================== */
.rodape {
  margin-top: var(--e8);
  text-align: center;
  font-size: 12px;
  color: var(--txt-3);
}