/* ============================================================
   JurisOne — SISTEMA B · roles tipográficos

   Dos letras, las dos que hay en un formulario diligenciado:
     · Courier Prime — el ASIENTO: lo que se escribió en el registro.
       Titulares, nombres de módulo, códigos, cifras, sellos.
     · Public Sans — la FORMA IMPRESA: lo que ya venía en la hoja.
       Rótulos, explicaciones, listas, controles.

   Los nombres de rol son los mismos del sistema A a propósito: el marcado
   y el JavaScript son idénticos en las tres propuestas. Lo que cambia es
   qué significa cada rol.
   ============================================================ */

.titular-mayor,
.titular,
.subtitulo,
.titulo-placa {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  text-wrap: balance;
  margin: 0;
}

.titular-mayor {
  font-size: var(--tamano-titular-mayor);
  line-height: var(--interlinea-titular);
  letter-spacing: var(--tracking-titular);
  max-width: 22ch;   /* la mono es ancha: la medida se acorta, no el cuerpo */
}

.titular {
  font-size: var(--tamano-titular);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-titular);
  max-width: 26ch;
}

.subtitulo {
  font-size: var(--tamano-subtitulo);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-subtitulo);
}

.titulo-placa {
  font-size: var(--tamano-placa);
  line-height: var(--interlinea-placa);
  letter-spacing: var(--tracking-placa);
}

.lead {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-cuerpo);
  font-size: var(--tamano-lead);
  line-height: var(--interlinea-lead);
  color: var(--color-texto-principal);
  text-wrap: pretty;
  max-width: var(--ancho-lectura);
}

.cuerpo {
  font-family: var(--fuente-texto);
  font-size: var(--tamano-cuerpo);
  line-height: var(--interlinea-cuerpo);
  text-wrap: pretty;
  max-width: var(--ancho-lectura);
}

.cuerpo-menor {
  font-family: var(--fuente-texto);
  font-size: var(--tamano-cuerpo-menor);
  line-height: var(--interlinea-cuerpo);
  color: var(--color-texto-secundario);
  text-wrap: pretty;
}

/* Rótulo impreso del formulario: grotesca gruesa, caja alta, muy tracada.
   Hace el trabajo de señalización que en otras landings hacen los iconos. */
.utilidad,
.rotulo {
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad);
  line-height: var(--interlinea-utilidad);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.utilidad-menor {
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-cuerpo-fuerte);
  font-size: var(--tamano-utilidad-menor);
  line-height: var(--interlinea-utilidad);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-secundario);
}

.rotulo { color: var(--color-texto-secundario); display: block; }

/* Dato mecanografiado: códigos, cifras, referencias. Siempre tabular. */
.dato {
  font-family: var(--fuente-dato);
  font-weight: var(--peso-cuerpo);
  font-size: var(--tamano-utilidad);
  line-height: var(--interlinea-utilidad);
  letter-spacing: var(--tracking-dato);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-secundario);
}

/* Respeta la grafía original del término (BaaS, Bre-B, PQRS…). */
.utilidad--literal { text-transform: none; letter-spacing: var(--tracking-dato); }

.texto-tenue { color: var(--color-texto-secundario); }