/* formulario.css — cuatro pasos, uno a la vez. Mucho aire, una sola decisión por pantalla. */
.formulario__cabecera { text-align: center; margin-bottom: var(--esp-7); }
.formulario__cuerpo {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--esp-6) var(--esp-5) var(--esp-7);
  background: var(--kv-nube);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.formulario__barra {
  height: 3px;
  border-radius: var(--radio-pill);
  background: var(--kv-perla);
  overflow: hidden;
  margin-bottom: var(--esp-6);
}
.formulario__avance {
  height: 100%;
  width: var(--avance, 25%);
  border-radius: inherit;
  background: var(--kv-lavanda);
  transition: width var(--mov-medio) var(--curva);
}
.formulario__pasos { position: relative; }
.formulario__paso {
  display: grid;
  gap: var(--esp-5);
  transition: opacity var(--mov-medio) var(--curva), transform var(--mov-medio) var(--curva);
}
/* El saliente se va con un desplazamiento corto; el entrante llega desde el otro lado */
.formulario__paso--sale-izq, .formulario__paso--entra-izq { opacity: 0; transform: translateX(-28px); }
.formulario__paso--sale-der, .formulario__paso--entra-der { opacity: 0; transform: translateX(28px); }

.formulario__contador {
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--kv-tinta-tenue);
}
.formulario__pregunta {
  display: block;
  font-family: var(--fuente-serif);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
  font-size: var(--txt-2xl);
  line-height: var(--interlineado-titular);
  margin-bottom: var(--esp-5);
  text-wrap: balance;
}
.formulario__pregunta:focus { outline: none; box-shadow: none; }
.formulario__opciones { display: grid; gap: var(--esp-3); }
.formulario__campos { display: grid; gap: var(--esp-5); }
.formulario__error {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  color: var(--kv-error);
  font-size: var(--txt-sm);
  font-weight: 500;
}
.formulario__error:empty { display: none; }
.formulario__error svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.formulario__acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-7);
}
.formulario__continuar { min-width: 160px; }

@media (min-width: 600px) {
  .formulario__cuerpo { padding: var(--esp-8); }
  .formulario__opciones { grid-template-columns: 1fr 1fr; }
}