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

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 400;
    src: url('../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 500;
    src: url('../fonts/IBM_Plex_Mono/IBMPlexMono-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-dark4: rgba(21, 30, 40, 0.04);
    --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-light4: rgba(255, 255, 255, 0.04);
    --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);

    --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);

    --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-family: 'Outfit', Helvetica, Arial, sans-serif;
    --font-family-mono: 'IBM Plex Mono', Consolas, Helvetica, Arial, sans-serif;

    --font-size-8: 0.5rem;
    --font-size-10: 0.625rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;

    --line-height-12: 0.75rem;
    --line-height-16: 1rem;
    --line-height-18: 1.125rem;
    --line-height-20: 1.25rem;
    --line-height-24: 1.5rem;
    --line-height-28: 1.75rem;
    --line-height-36: 2.25rem;

    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;

    --letter-spacing-0: 0;
    --letter-spacing-05: 0.005em;
    --letter-spacing-1: 0.01em;

    --font-display: var(--font-weight-400) var(--font-size-32)/var(--line-height-36) var(--font-family);
    --font-title-large: var(--font-weight-600) var(--font-size-24)/var(--line-height-28) var(--font-family);
    --font-title-medium: var(--font-weight-600)var(--font-size-20)/var(--line-height-24) var(--font-family);
    --font-title-small: var(--font-weight-500) var(--font-size-18)/var(--line-height-24) var(--font-family);
    --font-body: var(--font-weight-400) var(--font-size-16)/var(--line-height-24) var(--font-family);
    --font-body-strong: var(--font-weight-500) var(--font-size-16)/var(--line-height-24) var(--font-family);
    --font-caption-medium: var(--font-weight-400) var(--font-size-14)/var(--line-height-20) var(--font-family);
    --font-caption-medium-strong: var(--font-weight-500) var(--font-size-14)/var(--line-height-20) var(--font-family);
    --font-caption-small: var(--font-weight-400) var(--font-size-12)/var(--line-height-16) var(--font-family);
    --font-caption-small-strong: var(--font-weight-500) var(--font-size-12)/var(--line-height-16) var(--font-family);

    --font-printing-display: var(--font-weight-600) var(--font-size-24)/var(--line-height-28) var(--font-family);
    --font-printing-title-large: var(--font-weight-600)var(--font-size-20)/var(--line-height-24) var(--font-family);
    --font-printing-title-medium: var(--font-weight-600) var(--font-size-16)/var(--line-height-24) var(--font-family);
    --font-printing-title-small: var(--font-weight-500) var(--font-size-14)/var(--line-height-18) var(--font-family);
    --font-printing-body: var(--font-weight-400) var(--font-size-10)/var(--line-height-12) var(--font-family);
    --font-printing-body-strong: var(--font-weight-500) var(--font-size-10)/var(--line-height-12) var(--font-family);
    --font-printing-caption: var(--font-weight-400) var(--font-size-8)/var(--line-height-12) var(--font-family);
    --font-printing-caption-strong: var(--font-weight-500) var(--font-size-8)/var(--line-height-12) var(--font-family);

    --font-mono-body: var(--font-weight-400) var(--font-size-16)/var(--line-height-24) var(--font-family-mono);
    --font-mono-body-strong: var(--font-weight-500) var(--font-size-16)/var(--line-height-24) var(--font-family-mono);
    --font-mono-caption: var(--font-weight-400) var(--font-size-14)/var(--line-height-20) var(--font-family-mono);
    --font-mono-caption-strong: var(--font-weight-500) var(--font-size-14)/var(--line-height-20) var(--font-family-mono);


    /* Variables para breakpoints */
    --screen-xs: 320px;
    --screen-sm: 640px;
    --screen-md: 768px;
    --screen-lg: 1024px;
    --screen-xl: 1280px;
    --screen-2xl: 1536px;
    --screen-3xl: 1920px;
}

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

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

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

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

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

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

.font-caption-medium {
    font: var(--font-caption-medium) !important;
    letter-spacing: var(--letter-spacing-1);
}

.font-caption-medium-strong {
    font: var(--font-caption-medium-strong) !important;
    letter-spacing: var(--letter-spacing-1);
}

.font-caption-small {
    font: var(--font-caption-small) !important;
    letter-spacing: var(--letter-spacing-1);
}

.font-caption-small-strong {
    font: var(--font-caption-small-strong) !important;
    letter-spacing: var(--letter-spacing-1);
}

.font-mono-body {
    font: var(--font-mono-body) !important;
    letter-spacing: 0;
}

.font-mono-body-strong {
    font: var(--font-mono-body-strong) !important;
    letter-spacing: 0;
}

.font-mono-caption {
    font: var(--font-mono-caption) !important;
    letter-spacing: var(--letter-spacing-1);
}

.font-mono-caption-strong {
    font: var(--font-mono-caption-strong) !important;
    letter-spacing: var(--letter-spacing-1);
}

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

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

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

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

.font-printing-body {
    font: var(--font-printing-body) !important;
    letter-spacing: 0;
}

.font-printing-body-strong {
    font: var(--font-printing-body-strong) !important;
    letter-spacing: 0;
}

.font-printing-caption {
    font: var(--font-printing-caption) !important;
    letter-spacing: var(--letter-spacing-1);
}

.font-printing-caption-strong {
    font: var(--font-printing-caption-strong) !important;
    letter-spacing: 0;
}

.font-underline {
    font-weight: 500;
    text-decoration-line: underline;
}

:focus-visible {
    outline: none;
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--color-neutral-500, #566A80);
    background-color: var(--color-neutral-0);
    min-height: 100vh;
    padding-right: 12px !important;
}

/* 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);
}

/*-----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-----*/


@media screen and (max-width: 1280px) {

    body::-webkit-scrollbar {
        display: none;
        width: 0 !important;
    }
}

@media screen and (max-width: 640px) {
    body::-webkit-scrollbar {
        width: 0 !important;
    }
}