:root {
    --color-primary: #404040;
    --color-secondary: #5D5D5D;
    --color-muted: #ABABAB;
    --color-light: #FFFFFF;
    --color-background: #FFFDF8;
    --color-blue: #009FE1;
    --color-red: #E10018;
    --color-yellow: #FEED01;
    --color-gradient-green: linear-gradient(59.46deg, #FEED01 7.05%, #009FE1 91.84%);
    --color-gradient-orange: linear-gradient(225deg, #EB5151 0%, #F0DF41 100%);
    --color-gradient-turquoise: linear-gradient(225deg, #00DFDB 0%, #7CFAC3 100%);
}

body {
    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 425px;
    min-height: 100vh;
    padding-top: 58px;
    box-sizing: border-box;

    color: var(--color-secondary);
    background-color: var(--color-background);

    font-family: 'Corbel';
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    font-style: normal;
}

/* UTILS */
.d-flex {
    display: flex;
}

.d-none {
    display: none !important;
}

.flex-grow-1 {
    display: flex;
    flex-grow: 1;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-content-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-1 {
    padding: 4px !important;
}

.p-2 {
    padding: 8px !important;
}

.p-3 {
    padding: 12px !important;
}

.p-4 {
    padding: 16px !important;
}

.hide-in-desktop {
    display: flex;
}

.hide-in-mobile {
    display: none;
}

/* COLORS */

.color-muted {
    color: var(--color-muted);
}

.color-background-primary {
    background-color: var(--color-primary);
}

.color-background-light {
    background-color: var(--color-light);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-light {
    color: var(--color-light) !important;
}

/* TEXTOS */

/* Text/Titulo/Primario */
.title-primary {
    font-family: 'Poppins-SemiBold';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
}

/* Text/Titulo/Secundario */
.title-secondary {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

/* Text/Párrafos/Primario */
.text-primary {
    font-family: 'Corbel';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
}

/* 
.title-2 {
    font-family: 'Poppins-SemiBold';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
} */

.text-btn-primary {
    font-family: 'NotoSans-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

@media (min-width: 768px) {

    body {
        font-size: 20px;
        line-height: 24.15px;
    }

    .title-primary {
        font-size: 36px;
        line-height: 54px;
    }

    .text-primary {
        font-size: 20px;
        line-height: 24px;
    }

    .hide-in-mobile {
        display: flex !important;
    }

    .hide-in-desktop {
        display: none !important;
    }
}