*, *::before, *::after {
    box-sizing: border-box;
}

/* @font-face {
    font-family: 'Nunito, sans-serif';
    src: url('../../fonts/Outfit/Outfit-Regular.ttf') format('truetype');
}

@font-face {
    font-family: ' Nunito, sans-serif';
    src: url('../../fonts/Outfit/Outfit-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: ' Nunito, sans-serif';
    src: url('../../fonts/Outfit/Outfit-Medium.ttf') format('truetype');
} */

:root {

    /* Nuevos colores primitivos*/
    --color-gray-0: #FFFFFF;
    --color-gray-100: #F3F4F7;
    --color-gray-200: #D5DFEC;
    --color-gray-300: #B7C9DF;
    --color-gray-400: #8CA2B5;
    --color-gray-500: #566A80;
    --color-gray-600: #425567;
    --color-gray-700: #314254;
    --color-gray-800: #263645;
    --color-gray-900: #151e28;

    --color-blue-100: #F0F9FF;
    --color-blue-200: #D8F0FE;
    --color-blue-300: #B2DFFE;
    --color-blue-400: #8CC9FD;
    --color-blue-500: #6FB5FB;
    --color-blue-600: #0E55B9;
    --color-blue-700: #164FA1;
    --color-blue-800: #163A79;
    --color-blue-900: #0C255A;
    --color-blue-950: #071845;

    --color-purple-100: #F2EBFF;
    --color-purple-200: #E1D2FE;
    --color-purple-300: #C1A6FD;
    --color-purple-400: #AE90F9;
    --color-purple-500: #9073F7;
    --color-purple-600: #5F25F1;
    --color-purple-700: #3F18CF;
    --color-purple-800: #2E11AD;
    --color-purple-900: #1F0A8B;
    --color-purple-950: #150673;

    --color-magenta-100: #FBECFA;
    --color-magenta-200: #FAD5F9;
    --color-magenta-300: #FAB0F9;
    --color-magenta-400: #FA88FA;
    --color-magenta-500: #F747FB;
    --color-magenta-600: #DD20E2;
    --color-magenta-700: #AD17B1;
    --color-magenta-800: #6C096F;
    --color-magenta-900: #4D054F;
    --color-magenta-950: #320233;

    --color-red-100: #FFF1F0;
    --color-red-200: #FDD3D3;
    --color-red-300: #FBACAC;
    --color-red-400: #F48585;
    --color-red-500: #E85858;
    --color-red-600: #D82525;
    --color-red-700: #BA1B1B;
    --color-red-800: #9C1313;
    --color-red-900: #740B0B;
    --color-red-950: #4A0202;

    --color-orange-100: #FCEEE4;
    --color-orange-200: #FBDAC0;
    --color-orange-300: #FFC599;
    --color-orange-400: #FFAF6D;
    --color-orange-500: #FF9E42;
    --color-orange-600: #FB8C04;
    --color-orange-700: #9D5501;
    --color-orange-800: #6C3800;
    --color-orange-900: #432101;
    --color-orange-950: #321700;

    --color-yellow-100: #FCF0D9;
    --color-yellow-200: #FCE1AE;
    --color-yellow-300: #FFD694;
    --color-yellow-400: #FEC87D;
    --color-yellow-500: #FFB53D;
    --color-yellow-600: #F4A504;
    --color-yellow-700: #8F5F02;
    --color-yellow-800: #624001;
    --color-yellow-900: #3D2600;
    --color-yellow-950: #2D1B00;

    --color-green-100: #EEFBF0;
    --color-green-200: #D5FBDD;
    --color-green-300: #B2FAC1;
    --color-green-400: #79EC98;
    --color-green-500: #3CDD6C;
    --color-green-600: #20B351;
    --color-green-700: #008035;
    --color-green-800: #0F6B2E;
    --color-green-900: #145224;
    --color-green-950: #103C1B;

    --color-cyan-100: #E3FDFA;
    --color-cyan-200: #C8FAF2;
    --color-cyan-300: #93F6EE;
    --color-cyan-400: #5BE5E5;
    --color-cyan-500: #33C1CC;
    --color-cyan-600: #00A0BC;
    --color-cyan-700: #006F91;
    --color-cyan-800: #00557B;
    --color-cyan-900: #003D63;
    --color-cyan-950: #002C52;

    /* Variables colores semánticos */
    --color-neutral-0: var(--color-gray-0);
    --color-neutral-100: var(--color-gray-100);
    --color-neutral-200: var(--color-gray-200);
    --color-neutral-300: var(--color-gray-300);
    --color-neutral-400: var(--color-gray-400);
    --color-neutral-500: var(--color-gray-500);
    --color-neutral-600: var(--color-gray-600);
    --color-neutral-700: var(--color-gray-700);
    --color-neutral-800: var(--color-gray-800);
    --color-neutral-900: var(--color-gray-900);

    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-primary-900: var(--color-blue-900);
    --color-primary-950: var(--color-blue-950);

    --color-secondary-100: var(--color-orange-100);
    --color-secondary-200: var(--color-orange-200);
    --color-secondary-300: var(--color-orange-300);
    --color-secondary-400: var(--color-orange-400);
    --color-secondary-500: var(--color-orange-500);
    --color-secondary-600: var(--color-orange-600);
    --color-secondary-700: var(--color-orange-700);
    --color-secondary-800: var(--color-orange-800);
    --color-secondary-900: var(--color-orange-900);
    --color-secondary-950: var(--color-orange-950);

    --color-info-100: var(--color-blue-100);
    --color-info-200: var(--color-blue-200);
    --color-info-300: var(--color-blue-300);
    --color-info-400: var(--color-blue-400);
    --color-info-500: var(--color-blue-500);
    --color-info-600: var(--color-blue-600);
    --color-info-700: var(--color-blue-700);
    --color-info-800: var(--color-blue-800);
    --color-info-900: var(--color-blue-900);
    --color-info-950: var(--color-blue-950);

    --color-success-100: var(--color-green-100);
    --color-success-200: var(--color-green-200);
    --color-success-300: var(--color-green-300);
    --color-success-400: var(--color-green-400);
    --color-success-500: var(--color-green-500);
    --color-success-600: var(--color-green-600);
    --color-success-700: var(--color-green-700);
    --color-success-800: var(--color-green-800);
    --color-success-900: var(--color-green-900);
    --color-success-950: var(--color-green-950);

    --color-warning-100: var(--color-yellow-100);
    --color-warning-200: var(--color-yellow-200);
    --color-warning-300: var(--color-yellow-300);
    --color-warning-400: var(--color-yellow-400);
    --color-warning-500: var(--color-yellow-500);
    --color-warning-600: var(--color-yellow-600);
    --color-warning-700: var(--color-yellow-700);
    --color-warning-800: var(--color-yellow-800);
    --color-warning-900: var(--color-yellow-900);
    --color-warning-950: var(--color-yellow-950);

    --color-danger-100: var(--color-red-100);
    --color-danger-200: var(--color-red-200);
    --color-danger-300: var(--color-red-300);
    --color-danger-400: var(--color-red-400);
    --color-danger-500: var(--color-red-500);
    --color-danger-600: var(--color-red-600);
    --color-danger-700: var(--color-red-700);
    --color-danger-800: var(--color-red-800);
    --color-danger-900: var(--color-red-900);
    --color-danger-950: var(--color-red-950);

    --color-complementary-a-100: var(--color-purple-100);
    --color-complementary-a-200: var(--color-purple-200);
    --color-complementary-a-300: var(--color-purple-300);
    --color-complementary-a-400: var(--color-purple-400);
    --color-complementary-a-500: var(--color-purple-500);
    --color-complementary-a-600: var(--color-purple-600);
    --color-complementary-a-700: var(--color-purple-700);
    --color-complementary-a-800: var(--color-purple-800);
    --color-complementary-a-900: var(--color-purple-900);
    --color-complementary-a-950: var(--color-purple-950);

    --color-complementary-b-100: var(--color-magenta-100);
    --color-complementary-b-200: var(--color-magenta-200);
    --color-complementary-b-300: var(--color-magenta-300);
    --color-complementary-b-400: var(--color-magenta-400);
    --color-complementary-b-500: var(--color-magenta-500);
    --color-complementary-b-600: var(--color-magenta-600);
    --color-complementary-b-700: var(--color-magenta-700);
    --color-complementary-b-800: var(--color-magenta-800);
    --color-complementary-b-900: var(--color-magenta-900);
    --color-complementary-b-950: var(--color-magenta-950);

    --color-complementary-c-100: var(--color-cyan-100);
    --color-complementary-c-200: var(--color-cyan-200);
    --color-complementary-c-300: var(--color-cyan-300);
    --color-complementary-c-400: var(--color-cyan-400);
    --color-complementary-c-500: var(--color-cyan-500);
    --color-complementary-c-600: var(--color-cyan-600);
    --color-complementary-c-700: var(--color-cyan-700);
    --color-complementary-c-800: var(--color-cyan-800);
    --color-complementary-c-900: var(--color-cyan-900);
    --color-complementary-c-950: var(--color-cyan-950);

    --color-transparency-dark8: rgba(21, 30, 40, 0.08);
    --color-transparency-dark16: rgba(21, 30, 40, 0.16);
    --color-transparency-dark24: rgba(21, 30, 40, 0.24);
    --color-transparency-dark32: rgba(21, 30, 40, 0.32);
    --color-transparency-dark48: rgba(21, 30, 40, 0.48);

    --color-transparency-light8: rgba(255, 255, 255, 0.08);
    --color-transparency-light16: rgba(255, 255, 255, 0.16);
    --color-transparency-light24: rgba(255, 255, 255, 0.24);
    --color-transparency-light32: rgba(255, 255, 255, 0.32);
    --color-transparency-light48: rgba(255, 255, 255, 0.48);

    --spacing-space-0: 0rem;
    --spacing-space-1: 0.125rem;
    --spacing-space-2: 0.25rem;
    --spacing-space-3: 0.5rem;
    --spacing-space-4: 0.75rem;
    --spacing-space-5: 1rem;
    --spacing-space-6: 1.25rem;
    --spacing-space-7: 1.5rem;
    --spacing-space-8: 2rem;
    --spacing-space-9: 2.5rem;
    --spacing-space-10: 3rem;
    --spacing-space-11: 4rem;
    --spacing-space-12: 5rem;
    --spacing-space-13: 6rem;
    --spacing-space-14: 8rem;
    --spacing-space-15: 15rem;
    --spacing-space-16: 20rem;

    --border-radius-corner-xs: 0;
    --border-radius-corner-s: 0.25rem;
    --border-radius-corner-md: 0.5rem;
    --border-radius-corner-lg: 1rem;
    --border-radius-corner-xl: 1.5rem;
    --border-radius-corner-xxl: 2rem;

    --font-display: 400 2rem/2.25rem Nunito, sans-serif;
    --font-title-large: 600 1.5rem/1.75rem  Nunito, sans-serif;
    --font-title-medium: 600 1.25rem/1.5rem  Nunito, sans-serif;
    --font-title-small: 500 1.125rem/1.5rem  Nunito, sans-serif;
    --font-body: 400 1rem/1.5rem Nunito, sans-serif;
    --font-body-strong: 500 1rem/1.5rem  Nunito, sans-serif;
    --font-caption-medium: 400 0.875rem/1.25rem Nunito, sans-serif;
    --font-caption-medium-strong: 500 0.875rem/1.25rem  Nunito, sans-serif;
    --font-caption-small: 400 0.75rem/1rem Nunito, sans-serif;
    --font-caption-small-strong: 500 0.75rem/1rem  Nunito, sans-serif;
    --letter-spacing-caption: 0.01em;

    --font-printing-display: 400 1.5rem/1.75rem Nunito, sans-serif;
    --font-printing-title-large: 600 1.25rem/1.5rem  Nunito, sans-serif;
    --font-printing-title-medium: 600 1rem/1.5rem  Nunito, sans-serif;
    --font-printing-title-small: 500 0.875rem/1.125rem  Nunito, sans-serif;
    --font-printing-body: 400 0.625rem/0.75rem Nunito, sans-serif;
    --font-printing-body-strong: 500 0.625rem/0.75rem  Nunito, sans-serif;
    --font-printing-caption: 400 0.5rem/0.75rem Nunito, sans-serif;
    --font-printing-caption-strong: 500 0.5rem/0.75rem  Nunito, sans-serif;

    /* Variables actualizadas */
    --boxshadow-1: 0px 2px 4px 0px rgba(21, 30, 40, 0.04), 0px 2px 8px 0px rgba(21, 30, 40, 0.08);    
    --boxshadow-2: 0px 6px 20px -2px rgba(21, 30, 40, 0.08);
    --boxshadow-3: 0px 8px 32px -2px rgba(38, 54, 69, 0.16);
    --boxshadow-4: var(--boxshadow-3);
    --boxshadow-5: var(--boxshadow-3);
    --boxshadow-6: 0px 2px 4px 0px rgba(21, 30, 40, 0.04), 0px 2px 8px 0px rgba(21, 30, 40, 0.08);
    --boxshadow-7: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);

    /* Variables de fuente antiguas actualizadas */
    --font-headline: var(--font-display);
    --font-title-l: var(--font-title-large);
    --font-title-m: var(--font-title-medium);
    --font-title-s: var(--font-title-small);
    --font-button: var(--font-body-strong);
    --font-caption: var(--font-caption-medium);
    --font-label: var(--font-caption-medium-strong);
}

.font-display {
    font: var(--font-display);
    letter-spacing: 0;
}

.font-title-large {
    font: var(--font-title-large);
    letter-spacing: 0;
}

.font-title-medium {
    font: var(--font-title-medium);
    letter-spacing: 0;
}

.font-title-small {
    font: var(--font-title-small);
    letter-spacing: 0;
}

.font-body {
    font: var(--font-body);
}

.font-body-strong {
    font: var(--font-body-strong);
}

.font-caption-medium {
    font: var(--font-caption-medium);
}

.font-caption-medium-strong {
    font: var(--font-caption-medium-strong);
}

.font-caption-small {
    font: var(--font-caption-small);
}

.font-caption-small-strong {
    font: var(--font-caption-small-strong);
}


/* Chrome, Edge and Safari */
/* *::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0.75rem;
    height: .75rem;
}

*::-webkit-scrollbar-button{
    background-color: transparent;
    width: 0.75rem;
    height: 0;
}

*::-webkit-scrollbar-track {
    border-radius: var(--border-radius-corner-xs, 0px);
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-corner-xs, 0px);
    background: var(--color-neutral-300, #B7C9DF);
}

*::-webkit-scrollbar-thumb:hover{
    background: var(--color-neutral-400, #8CA2B5);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--color-neutral-400, #8CA2B5);
}

*::-webkit-scrollbar-track {
    background: var(--color-neutral-100, #F3F4F7);
}

*::-webkit-scrollbar-track:active {
    border: 0.5px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
} */

/* body {
    margin: 0;
    font-family: Nunito, sans-serif;
    color: var(--color-gray-600, #425567);
    background-color: var(--color-neutral-0);
} */

/*-----STYLES_SQUARE_SCROLL-----*/

.scroll::-webkit-scrollbar {
    -webkit-appearance: none;
}

.scroll::-webkit-scrollbar-button{
    background-color: transparent;
    height: 0;
}

.scroll::-webkit-scrollbar-track {
    border-radius: var(--border-radius-corner-xs, 0px);
    background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-corner-xs, 0px);
    background: var(--color-neutral-300, #B7C9DF);
}

.scroll::-webkit-scrollbar-thumb:hover{
    background: var(--color-neutral-400, #8CA2B5);
}

.scroll::-webkit-scrollbar-thumb:active {
    background: var(--color-neutral-400, #8CA2B5);
}

.scroll::-webkit-scrollbar-track {
    background: var(--color-neutral-100, #F3F4F7);
}

.scroll::-webkit-scrollbar-track:active {
    border: 0.5px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
}

/*-----S-----*/

.scroll.scroll-s::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
}

.scroll.scroll-s::-webkit-scrollbar-button{
    width: 0.25rem;
}

/*-----S-----*/

/*-----M-----*/

.scroll.scroll-m::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

.scroll.scroll-m::-webkit-scrollbar-button{
    width: 0.5rem;
}

/*-----M-----*/

/*-----L-----*/

.scroll.scroll-l::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
}

.scroll.scroll-l::-webkit-scrollbar-button{
    width: 0.75rem;
}

/*-----L-----*/

/*-----STYLES_SQUARE_SCROLL-----*/

/*-----STYLES_ROUND_SCROLL-----*/

.scroll.round-scroll::-webkit-scrollbar-track {
    border-radius: var(--border-radius-corner-md, 8px);
}

.scroll.round-scroll::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-corner-md, 8px);
}

/*-----STYLES_ROUND_SCROLL-----*/