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

   Dos letras. Dos, porque el sistema entero es una resta.
     · Bricolage Grotesque — la AFIRMACIÓN. Grotesca variable con trampas
       de tinta y remates cortados: a cuerpo muy grande y en caja baja se
       lee como algo impreso y no como algo tecleado. Va siempre en caja
       baja, al contrario que la señalética en caja alta de la propuesta
       «Autorizado»: aquí no se rotula un equipo, se afirma una cosa.
     · Schibsted Grotesk — la EXPLICACIÓN. Grotesca de prensa nórdica,
       cálida y muy sólida a cuerpo pequeño. Lleva también los rótulos:
       este sistema no tiene monoespaciada porque no tiene log que mostrar.

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

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

/* Caja baja, siempre. El titular es una frase dicha, no un rótulo. */
.titular-mayor {
  font-size: var(--tamano-titular-mayor);
  font-weight: var(--peso-display-fuerte);
  line-height: var(--interlinea-titular);
  letter-spacing: var(--tracking-titular);
  max-width: 15ch;
}

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

.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);
}

/* La declaración: la única frase de la página que no explica nada.
   Es la resta dicha en voz alta. */
.declaracion {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tamano-titular);
  line-height: var(--interlinea-subtitulo);
  letter-spacing: var(--tracking-subtitulo);
  text-wrap: balance;
  max-width: 20ch;
  margin: 0;
}

.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: grotesca 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-utilidad);
  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: cifras y conteos. En este sistema los números importan —son el
   argumento— así que van en la letra de display, no en una de utilidad. */
.dato {
  font-family: var(--fuente-dato);
  font-weight: var(--peso-cuerpo-fuerte);
  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); }