/*
 * Registro (/registro), sobre la superficie de marca (brand-theme.css): volver y el progreso del
 * paso debajo de los aros, titular, formulario con los campos de marca y "Continuar" con el
 * degradado de marca al final, justo encima de la cinta.
 */
.register {
  --decor-ribbon-zone: 150px;

  display: flex;
}

@media (min-width: 768px) {
  .register {
    --decor-ribbon-zone: 132px;
  }
}

/* Volver + barra del paso + "Paso 1 de 2", en una fila. */
.register__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
}

.register__back {
  flex: none;
  color: var(--brand-text-muted);
}

@media (hover: hover) {
  .register__back:hover {
    color: var(--brand-text);
  }
}

.register__progress .progress-bar {
  flex: 1;
  /* No es el progreso del cuestionario: no se transforma en la barra de la pregunta 1. */
  view-transition-name: none;
}

.register__progress .progress-bar__fill {
  view-transition-name: none;
}

.register__progress .step-count {
  flex: none;
}

.register__title {
  /* Dos líneas, como el boceto: "Cuéntanos / sobre ti". */
  max-width: 6em;
  margin-top: var(--space-6);
  font-size: var(--text-title);
  font-weight: var(--weight-black);
  line-height: var(--text-display-leading);
  letter-spacing: var(--text-display-tracking);
  text-wrap: wrap;
}

.register__lead {
  margin-top: var(--space-3);
  color: var(--brand-text-muted);
  font-size: var(--text-label);
  letter-spacing: -0.01em;
  line-height: var(--text-lead-leading);
}

.register__form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.register__form .checkbox-row {
  margin-top: var(--space-2);
}

.register__form .alert {
  margin-top: var(--space-1);
}

.register__submit {
  margin-top: var(--space-4);
}