:root {
    --letra-extra-grande: 22px;
    --letra-grande: 20px;
    --letra-mediana: 18px;
     --letra-normal: 16px;
    --letra-regular: 16px;
    --letra-chica: 14px;
    --letra-extra-chica: 12px;

}


/* movil */
@media only screen and (max-width:767px) {
    h1 {
        font-size: 40px;
        line-height: 120%;
    }

    h2 {
        font-size: 36px;
        line-height: 120%;
    }

    h3 {
        font-size: 32px;
        line-height: 120%;
    }

    h4 {
        font-size: 24px;
        line-height: 120%;
    }

    h5 {
        font-size: 20px;
        line-height: 120%;
    }

    h6 {
        font-size: 18px;
        line-height: 120%;
    }

    :root {
    --letra-regular: 18px;

}

}

/* tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 52px;
        line-height: 120%;
    }

    h2 {
        font-size: 44px;
        line-height: 120%;
    }

    h3 {
        font-size: 36px;
        line-height: 120%;
    }

    h4 {
        font-size: 28px;
        line-height: 120%;
    }

    h5 {
        font-size: 24px;
        line-height: 120%;
    }

    h6 {
        font-size: 20px;
        line-height: 120%;
    }
}

/* escritorio */
@media only screen and (min-width: 1024px) {
    h1 {
        font-size: 56px;
        line-height: 120%;
    }

    h2 {
        font-size: 48px;
        line-height: 120%;
    }

    h3 {
        font-size: 40px;
        line-height: 120%;
    }

    h4 {
        font-size: 32px;
        line-height: 120%;
    }

    h5 {
        font-size: 24px;
        line-height: 120%;
    }

    h6 {
        font-size: 20px;
        line-height: 120%;
    }
}


.letra-extra-grande{
    font-size: var(--letra-extra-grande);
    line-height: 140%;
}

.letra-grande{
    font-size: var(--letra-grande);
    line-height: 140%;
}

.letra-normal{
   font-size: var(--letra-normal);
    line-height: 140%;
}

.letra-mediana{
   font-size: var(--letra-mediana);
    line-height: 140%;
}

.letra-regular{
    font-size: var(--letra-regular);
    line-height: 140%;
}

.letra-chica{
    font-size: var(--letra-chica);
    line-height: 140%;
}

.letra-extra-chica{
   font-size: var(--letra-extra-chica);
    line-height: 140%;
}