:root {
    --font-body: "Inascal", Arial, Helvetica, sans-serif;
    --font-title: "Inascal-Deco", Arial, Helvetica, sans-serif;
    --body: 1rem;
    --title-extra-large: 3.75rem;
    --title-large: 2.813rem;
    --title-medium: 2.5rem;
    --title-small: 2.188rem;
    --title-xs: 1.25rem;
    --title-xxs: 1rem;
    --nombres-prod: 0.87rem;
    --bold: 700;
    --regular: 400;
    --light: 300;
    --c-negro: #31312D;
    --c-beige: #E0D4CB;
    --c-beige-bg: #ECE5E0;
    --c-gris: #818386;
    --c-gris-light: #F5F5F5;
    --c-azul: #3CB7CF;
    --c-naranja: #F0854D;
    --c-verde: #8DC567;
    --c-blanco: #ffffff;
    /* Transitions */
    --all-transition: all 0.4s ease;
}
@media screen and (max-width: 1440px) {
    :root {
        --title-extra-large: 3.6rem;
        --title-large: 2.75rem;
        --title-medium: 2.25rem;
        --title-small: 1.9rem;
    }
}
@media screen and (max-width: 1024px) {
    :root {
        --title-extra-large: 3.5rem;
        --title-large: 3rem;
        --title-medium: 2.3rem;
        --title-small: 1.5rem;
        --title-xs: 1.15rem;
    }
}
@media screen and (max-width: 600px) {
    :root {
        --title-extra-large: 3rem;
        --title-large: 2rem;
        --title-medium: 1.75rem;
        --title-xs: 1.1rem;
    }
}