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

   Tres letras, y las tres vienen del mismo sitio: la sala de máquinas.
     · Big Shoulders Display — la SEÑAL. Condensada de señalética civil
       (la familia nace del sistema de señales de Chicago). En caja alta y
       a cuerpo grande se lee como una placa atornillada a un equipo, no
       como un titular de folleto. Es lo contrario exacto de la Archivo
       expandida del sistema A: misma familia de grotescas, ancho opuesto.
     · Instrument Sans — la EXPLICACIÓN. Neutra, estrecha, buena a cuerpo
       pequeño. No compite.
     · IBM Plex Mono — el LOG. Códigos, familias, referencias y cifras.
       Un log de autorización se lee en mono o no se lee.

   Los nombres de rol son los mismos de las otras propuestas a propósito:
   el marcado y el JavaScript son idénticos. Lo que cambia es la materia.
   ============================================================ */

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

/* El titular del tablero va en verde de marca: es la declaración de color
   de la página y a la vez su afirmación. 7,05:1 sobre el campo. */
.titular-mayor {
  font-size: var(--tamano-titular-mayor);
  font-weight: var(--peso-display-fuerte);
  line-height: var(--interlinea-titular);
  letter-spacing: var(--tracking-titular);
  color: var(--color-marca);
  max-width: 14ch;
}

.titular {
  font-size: var(--tamano-titular);
  font-weight: var(--peso-display-fuerte);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-titular);
  max-width: 20ch;
}

.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 del tablero: mono en 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);
  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 de log: referencias, códigos, conteos. 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); }