/* ---------------------------------------------------- */
/* 1. Clases de Utilidad de Propósito (Para casos específicos) */
/* ---------------------------------------------------- */

.title{
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);   
    margin-bottom: 1rem;
    margin-top: 1rem;
    color: var(--primary);
}

/* Clase de Utilidad para el Párrafo Base (si no quieres usar la etiqueta <p>) */
.text-base {
    font-size: var(--font-size-base); /* 1.6rem */
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}

.text-medium {
    font-size: var(--font-size-base); /* 1.6rem (16px) */
    font-weight: var(--font-weight-medium); /* weight 500*/
    line-height: 1.5;
}

/* Texto pequeño para etiquetas, leyendas o metadatos */
.text-sm {
    font-size: var(--font-size-sm); /* 1.4rem */
    font-weight: var(--font-weight-light);
    line-height: 1.4;
    color: var(--color-grey-light);
}

.text-sm-bold {
    font-size: var(--font-size-sm); /* 1.4rem */
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    color: var(--color-grey-light);
}

/* Texto grande para destacar o introducir una sección */
.text-lg {
    font-size: var(--font-size-h6); /* 1.8rem */
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

.text-lg-bold {
    font-size: var(--font-size-h6); /* 1.8rem */
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

/* ---------------------------------------------------- */
/* 3. Clases de Título (Si no usas <h1>, <h2>, etc.) */
/* ---------------------------------------------------- */

.heading-xl{
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.heading-lg {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.heading-md{
    font-size: var(--font-size-h3); /* 2.8rem (28px) */
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin-top: 1.2rem;
    margin-bottom: 1.0rem;
}

.heading-sm{
    font-size: var(--font-size-h4); /* 2.8rem (28px) */
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    margin-top: 1.2rem;
    margin-bottom: 1.0rem;
}