/* =====================================================================
   Formulário de inscrição (inscricao.html)
   Usa os tokens de site.css. Padrão de referência: formulário da G4.
   ===================================================================== */

body.insc {
  min-height: 100svh;
  background-color: var(--verde);
  background-image:
    radial-gradient(70% 60% at 85% 15%, rgba(58, 79, 59, 0.9) 0%, rgba(48, 67, 48, 0) 70%),
    radial-gradient(60% 50% at 10% 100%, rgba(36, 51, 38, 0.9) 0%, rgba(48, 67, 48, 0) 70%);
  color: var(--branco);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.insc__moldura {
  width: 100%;
  max-width: calc(680px + 2 * var(--margem));
  margin-inline: auto;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) var(--margem) 4rem;
}
.insc__topo { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.insc__marca img { height: clamp(36px, 30px + 1.5vw, 48px); width: auto; }
.insc__evento { font-weight: 600; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem); color: var(--branco); }

/* barra de progresso em segmentos */
.progresso {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  margin: 1.5rem 0 clamp(2rem, 1.5rem + 2vw, 3rem);
}
.progresso span { height: 3px; border-radius: 2px; background: var(--branco-linha); transition: background-color 400ms var(--ease); }
.progresso span.feito { background: var(--dourado); }
.progresso span.atual { background: var(--branco); }

/* passos */
.form { position: relative; }
.passo { max-width: 600px; }
@media (prefers-reduced-motion: no-preference) {
  .js .passo.entrando { animation: passo-entra 450ms var(--ease) both; }
}
@keyframes passo-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.form__voltar {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0.4rem 0;
  background: none; border: 0;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--branco-suave);
  transition: color 200ms var(--ease);
}
.form__voltar .icone { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.form__voltar:hover { color: var(--dourado); }

.passo__ola { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); line-height: 1.2; margin-bottom: 1rem; }
.passo__ola .italico { display: inline; }
.passo__intro { color: var(--branco-suave); font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1rem); margin-bottom: 2rem; max-width: 52ch; }
.passo__pergunta {
  display: block;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.3;
  margin-bottom: 1.1rem;
  padding: 0;
}
.passo__n { color: var(--dourado); font-family: var(--serif); font-style: italic; font-weight: 400; margin-right: 0.15em; }
.passo__ajuda { margin: -0.4rem 0 1rem; color: var(--branco-suave); font-size: 0.95rem; max-width: 52ch; }
.passo__legal { margin-top: 2.5rem; font-size: 0.8125rem; color: var(--branco-suave); max-width: 52ch; }

.campo {
  display: block; width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--raio);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(20, 31, 22, 0.35);
  color: var(--branco);
  font: inherit; font-size: 1.0625rem;
  caret-color: var(--dourado);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.campo::placeholder { color: rgba(255, 255, 255, 0.55); }
.campo:hover { border-color: rgba(255, 255, 255, 0.45); }
.campo:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(196, 173, 83, 0.28); background: rgba(20, 31, 22, 0.5); }
.campo[aria-invalid="true"] { border-color: #e8a598; box-shadow: 0 0 0 3px rgba(232, 165, 152, 0.22); }

.erro { margin-top: 0.6rem; color: #f2bcb1; font-size: 0.9375rem; font-weight: 500; }

button.botao { border: 0; }
.form__avancar { margin-top: 1.5rem; gap: 0.55rem; }
.form__avancar .icone, .resultado .botao .icone { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.form__avancar:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* opções (cargo, faturamento) */
.opcoes { border: 0; margin: 0; padding: 0; min-width: 0; }
.opcoes legend { float: left; width: 100%; }
.opcoes legend + * { clear: both; }
.opcao {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--raio);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1.0625rem; font-weight: 500;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.opcao:hover { background: rgba(255, 255, 255, 0.06); }
.opcao input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 1.35rem; height: 1.35rem; margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  display: grid; place-items: center;
  transition: border-color 200ms var(--ease);
}
.opcao input::after {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--dourado); transform: scale(0); transition: transform 200ms var(--ease);
}
.opcao input:checked { border-color: var(--dourado); }
.opcao input:checked::after { transform: scale(1); }
.opcao input:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.opcao:has(input:checked) { background: rgba(196, 173, 83, 0.12); border-color: rgba(196, 173, 83, 0.5); }

/* final */
.analisando { padding-block: 3rem; color: var(--branco-suave); max-width: 360px; }
.analisando__linha { display: block; height: 2px; margin-top: 1rem; border-radius: 2px; background: var(--branco-linha); overflow: hidden; position: relative; }
.analisando__linha::after { content: ""; position: absolute; inset: 0; background: var(--dourado); transform-origin: left; transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .analisando__linha::after { animation: encher 1400ms var(--ease) both; }
}
@keyframes encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.resultado__titulo {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 400; line-height: 1.18; letter-spacing: -0.01em;
}
.resultado__titulo .italico { margin-top: 0.15em; }

.resumo {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; align-items: center;
  margin: 2rem 0;
  padding: 1.25rem;
  border-radius: var(--raio-cartao);
  background: rgba(20, 31, 22, 0.35);
  border: 1px solid var(--branco-linha);
}
.resumo__foto { width: 100%; aspect-ratio: 1.1 / 1; object-fit: cover; object-position: 50% 15%; border-radius: var(--raio); }
.resumo__nome { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.35rem; }
.resumo__nome span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--dourado); margin-left: 0.25rem; }
.resumo__texto > p:not(.resumo__nome) { color: var(--branco-suave); font-size: 0.95rem; }
.resumo__dados { margin-top: 0.85rem; display: grid; gap: 0.3rem; font-size: 0.95rem; }
.resumo__dados li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.5rem; }
.resumo__dados li > span:first-child { color: var(--dourado); font-weight: 600; }
@media (max-width: 520px) {
  .resumo { grid-template-columns: 1fr; }
  .resumo__foto { aspect-ratio: 16 / 9; }
}

.resultado__texto { color: var(--branco-suave); margin-bottom: 1.5rem; max-width: 52ch; }
.resultado__texto strong { color: var(--branco); font-weight: 600; white-space: nowrap; }
.resultado .botao { gap: 0.6rem; }
.resultado__seguro { display: flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font-size: 0.875rem; color: var(--branco-suave); }
.resultado__seguro .icone { width: 1rem; height: 1rem; color: var(--dourado); }
.resumo picture { display: block; min-width: 0; }