/* ============================================================
   Tipografía
   Archivo variable permite jugar con la anchura (font-stretch).
   Los títulos van expandidos; las etiquetas técnicas, en mono.
   ============================================================ */

.display,
.titulo-seccion,
.titulo-monumental,
h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.titulo-monumental {
    font-size: var(--t-monumental);
    font-stretch: 112%;
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.titulo-display {
    font-size: var(--t-display);
    font-stretch: 105%;
    line-height: 0.94;
}

.titulo-seccion {
    font-size: var(--t-h2);
    font-stretch: 108%;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

h3,
.titulo-3 {
    font-size: var(--t-h3);
    font-stretch: 100%;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.titulo-4 {
    font-family: var(--display);
    font-size: var(--t-h4);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Etiqueta técnica: el «sello» del sistema */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--niebla);
}

.etiqueta::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: var(--verde);
    flex: none;
}

.etiqueta--sin-linea::before {
    display: none;
}

.indice {
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--verde);
}

.entrada {
    font-size: var(--t-cuerpo-lg);
    line-height: 1.5;
    color: var(--niebla);
    max-width: 46ch;
    text-wrap: pretty;
}

.parrafo {
    max-width: var(--ancho-texto);
    color: var(--niebla);
    text-wrap: pretty;
}

.dato-mono {
    font-family: var(--mono);
    font-size: var(--t-pequeno);
    letter-spacing: 0.04em;
    color: var(--niebla);
}

.resalte {
    color: var(--hielo);
}

.acento {
    color: var(--verde-luz);
}

/* Cifra grande de la barra de credibilidad */
.cifra {
    font-family: var(--display);
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-stretch: 115%;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--hielo);
    display: block;
}

.cifra sup {
    font-size: 0.34em;
    vertical-align: super;
    color: var(--verde);
    margin-left: 0.15em;
}