/* movil */
@media only screen and (max-width:768px) {
    .display {
        font-size: 48px;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 36px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 20px;
    }

    h6 {
        font-size: 18px;
    }
}

/* tablet */
@media only screen and (min-width: 769px) and (max-width: 1023px) {
    .display {
        font-size: 60px;
    }

    h1 {
        font-size: 52px;
    }

    h2 {
        font-size: 44px;
    }

    h3 {
        font-size: 36px;
    }

    h4 {
        font-size: 28px;
    }

    h5 {
        font-size: 24px;
    }

    h6 {
        font-size: 20px;
    }
}

/* escritorio */
@media only screen and (min-width: 1024px) {
    .display {
        font-size: 60px;
    }

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 48px;
    }

    h3 {
        font-size: 40px;
    }

    h4 {
        font-size: 32px;
    }

    h5 {
        font-size: 24px;
    }

    h6 {
        font-size: 20px;
    }
}

.display {
    font-weight: var(--fw-muy-grueso);
}

h1 {
    font-weight: var(--fw-extra-grueso);
}

h2,
h3 {
    font-weight: var(--fw-grueso);
}

h4,
h5,
h6 {
    font-weight: var(--fw-mediano);
}


:is(h1, h2, h3, h4, h5, h6),
.display {
    line-height: 120%;
}

p {
    line-height: 140%;
}

.letra-extra-grande {
    font-size: var(--fs-extra-grande);
}

.letra-grande {
    font-size: var(--fs-grande);
}

.letra-mediana {
    font-size: var(--fs-mediano);
}

.letra-regular {
    font-size: var(--fs-regular);
}

.letra-chica {
    font-size: var(--fs-chico);
}

.letra-extra-chica {
    font-size: var(--fs-extra-chico);
}