/* Formulario de inscripción — sin backend, solo maquetado + validación de cliente */

.inscripcion {
  background: var(--color-paper-2);
}

.inscripcion__grid {
  display: grid;
  gap: var(--space-2xl);
  max-width: 40rem;
  margin-inline: auto;
}

.inscripcion__form {
  display: grid;
  gap: var(--space-md);
}

.inscripcion__field {
  display: grid;
  gap: var(--space-2xs);
}
.inscripcion__field label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.inscripcion__field input,
.inscripcion__field select {
  font: inherit;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  color: var(--color-ink);
}
.inscripcion__field input:focus-visible,
.inscripcion__field select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.inscripcion__submit { margin-top: var(--space-sm); justify-self: start; }

.inscripcion__success {
  display: none;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent-warm) 12%, var(--color-surface));
  border: 1px solid var(--color-accent-warm);
  font-weight: 600;
}
.inscripcion__success.is-visible { display: block; }