@use url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

:root {
    --open-sans: 'Open Sans', sans-serif;

    /* --atrapalo-rounded: 'AtrapaloRoundedDisplay'; */
    --atrapalo-rounded: var(--flexa-compressedBold);
    --atrapalo-webBold: 'atrapaloWebBold', sans-serif;
    --flexa-compressedBold: 'flexa-compressedBold', sans-serif;
    --font-size-50: 0.5rem;
    --font-size-75: 0.75rem;
    --font-size-87: 0.875rem;
    --font-size-base: 1rem;
    --font-size-112: 1.125rem;
    --font-size-125: 1.25rem;
    --font-size-150: 1.5rem;
    --font-size-175: 1.75rem;
    --font-size-2: 2rem;
    --font-size-225: 2.25rem;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --line-height-50: 0.5rem;
    --line-height-75: 0.75rem;
    --line-height-87: 0.875rem;
    --line-height-base: 1rem;
    --line-height-112: 1.125rem;
    --line-height-125: 1.25rem;
    --line-height-150: 1.5rem;
    --line-height-175: 1.75rem;
    --line-height-200: 2rem;
    --line-height-225: 2.25rem;
    --letter-spacing-15: -0.15px;
    --letter-spacing-20: -0.2px;
    --font-typescale-font-family: var(--open-sans);
    --font-large-big-font-family: var(--font-typescale-font-family);
    --font-large-big-weight-semibold: 600;
    --font-large-big-weight-regular: 400;
    --font-large-big-size: 28px;
    --font-large-big-line-height: 36px;
    --font-large-big-letter-spacing: -0.2px;
    --font-large-moderate-font-family: var(--font-typescale-font-family);
    --font-large-moderate-weight-semibold: 600;
    --font-large-moderate-weight-regular: 400;
    --font-large-moderate-size: 24px;
    --font-large-moderate-line-height: 32px;
    --font-large-moderate-letter-spacing: -0.2px;
    --font-large-modest-font-family: var(--font-typescale-font-family);
    --font-large-modest-weight-semibold: 600;
    --font-large-modest-weight-regular: 400;
    --font-large-modest-size: 20px;
    --font-large-modest-line-height: 28px;
    --font-large-modest-letter-spacing: -0.15px;
    --font-medium-modest-font-family: var(--font-typescale-font-family);
    --font-medium-modest-weight-semibold: 600;
    --font-medium-modest-weight-regular: 400;
    --font-medium-modest-size: 16px;
    --font-medium-modest-line-height: 24px;
    --font-medium-modest-letter-spacing: 0;
    --font-base-font-family: var(--font-typescale-font-family);
    --font-base-weight-semibold: 600;
    --font-base-weight-regular: 400;
    --font-base-size: 14px;
    --font-base-line-height: 20px;
    --font-base-letter-spacing: 0;
    --font-small-font-family: var(--font-typescale-font-family);
    --font-small-weight-semibold: 600;
    --font-small-weight-regular: 400;
    --font-small-size: 12px;
    --font-small-line-height: 18px;
    --font-small-letter-spacing: 0;
    --font-display-font-family: var(--flexa-compressedBold);
    --font-display-large-big-font-family: var(--font-display-font-family);
    --font-display-large-big-weight-semibold: 600;
    --font-display-large-big-weight-regular: 400;
    --font-display-large-big-size: 44px;
    --font-display-large-big-line-height: 48px;
    --font-display-large-big-letter-spacing: 0;
    --font-display-large-moderate-font-family: var(--font-display-font-family);
    --font-display-large-moderate-weight-semibold: 600;
    --font-display-large-moderate-weight-regular: 400;
    --font-display-large-moderate-size: 34px;
    --font-display-large-moderate-line-height: 40px;
    --font-display-large-moderate-letter-spacing: 0;
    --font-display-large-modest-font-family: var(--font-display-font-family);
    --font-display-large-modest-weight-semibold: 600;
    --font-display-large-modest-weight-regular: 400;
    --font-display-large-modest-size: 30px;
    --font-display-large-modest-line-height: 36px;
    --font-display-large-modest-letter-spacing: 0;
    --font-display-medium-font-family: var(--font-display-font-family);
    --font-display-medium-weight-semibold: 600;
    --font-display-medium-weight-regular: 400;
    --font-display-medium-size: 20px;
    --font-display-medium-line-height: 24px;
    --font-display-medium-letter-spacing: 0;
    --font-display-small-font-family: var(--font-display-font-family);
    --font-display-small-weight-semibold: 600;
    --font-display-small-weight-regular: 400;
    --font-display-small-size: 16px;
    --font-display-small-line-height: 20px;
    --font-display-small-letter-spacing: 0;

    /* Shorthands */
    --font-large-big: var(--font-large-big-weight-semibold) var(--font-large-big-size)/var(--font-large-big-line-height) var(--font-large-big-font-family);
    --font-large-moderate-regular: var(--font-large-moderate-weight-regular) var(--font-large-moderate-size)/var(--font-large-moderate-line-height) var(--font-large-moderate-font-family);
    --font-large-moderate-semibold: var(--font-large-moderate-weight-semibold) var(--font-large-moderate-size)/var(--font-large-moderate-line-height) var(--font-large-moderate-font-family);
    --font-large-modest-regular: var(--font-large-modest-weight-regular) var(--font-large-modest-size)/var(--font-large-modest-line-height) var(--font-large-modest-font-family);
    --font-large-modest-semibold: var(--font-large-modest-weight-semibold) var(--font-large-modest-size)/var(--font-large-modest-line-height) var(--font-large-modest-font-family);
    --font-medium-modest-regular: var(--font-medium-modest-weight-regular) var(--font-medium-modest-size)/var(--font-medium-modest-line-height) var(--font-medium-modest-font-family);
    --font-medium-modest-semibold: var(--font-medium-modest-weight-semibold) var(--font-medium-modest-size)/var(--font-medium-modest-line-height) var(--font-medium-modest-font-family);
    --font-base-regular: var(--font-base-weight-regular) var(--font-base-size)/var(--font-base-line-height) var(--font-base-font-family);
    --font-base-semibold: var(--font-base-weight-semibold) var(--font-base-size)/var(--font-base-line-height) var(--font-base-font-family);
    --font-small-regular: var(--font-small-weight-regular) var(--font-small-size)/var(--font-small-line-height) var(--font-small-font-family);
    --font-small-semibold: var(--font-small-weight-semibold) var(--font-small-size)/var(--font-small-line-height) var(--font-small-font-family);
    --font-display-large-big: var(--font-display-large-big-weight-regular) var(--font-display-large-big-size)/var(--font-display-large-big-line-height) var(--font-display-large-big-font-family);
    --font-display-large-moderate: var(--font-display-large-moderate-weight-regular) var(--font-display-large-moderate-size)/var(--font-display-large-moderate-line-height) var(--font-display-large-moderate-font-family);
    --font-display-large-modest: var(--font-display-large-modest-weight-regular) var(--font-display-large-modest-size)/var(--font-display-large-modest-line-height) var(--font-display-large-modest-font-family);
    --font-display-medium: var(--font-display-medium-weight-regular) var(--font-display-medium-size)/var(--font-display-medium-line-height) var(--font-display-medium-font-family);
    --font-display-small: var(--font-display-small-weight-regular) var(--font-display-small-size)/var(--font-display-small-line-height) var(--font-display-small-font-family);

    --font-family-default: 'Open Sans', sans-serif;
    --font-family-display: 'flexa-compressedBold', sans-serif;

    /* Default variants */
    --font-xsmall-regular: 400 12px / 18px var(--font-family-default); /* --font-small-regular */
    --font-xsmall-strong: 600 12px / 18px var(--font-family-default); /* --font-small-strong */
    --font-small-regular: 400 14px / 20px var(--font-family-default); /* --font-base-regular */
    --font-small-strong: 600 14px / 20px var(--font-family-default); /* --font-base-strong */
    --font-medium-regular: 400 16px / 24px var(--font-family-default); /* --font-medium-moderate-regular o --font-medium-modest-regular */
    --font-medium-strong: 600 16px / 24px var(--font-family-default); /* --font-medium-moderate-strong */
    --font-large-regular: 400 20px / 28px var(--font-family-default); /* --font-large-modest-regular */
    --font-large-strong: 600 20px / 28px var(--font-family-default); /* --font-large-modest-strong | font-large-modest-semibold */
    --font-xlarge-regular: 400 24px / 32px var(--font-family-default); /* --font-large-moderate-regular */
    --font-xlarge-strong: 600 24px / 32px var(--font-family-default); /* --font-large-moderate-strong */
    --font-2xlarge-strong: 600 28px / 36px var(--font-family-default); /* --font-large-big */

    /* Display variants */
    --font-display-xsmall: normal 16px / 20px var(--font-family-display); /* --font-display-small */
    --font-display-small: normal 20px / 24px var(--font-family-display); /* --font-display-medium */
    --font-display-medium: normal 24px / 30px var(--font-family-display); /* --font-display-medium2 */
    --font-display-large: normal 30px / 36px var(--font-family-display); /* --font-display-large-modest */
    --font-display-xlarge: normal 34px / 40px var(--font-family-display); /* --font-display-large-moderate */
    --font-display-2xlarge: normal 44px / 48px var(--font-family-display); /* --font-display-large-big */

     /* Display number variants */
    --font-display-number-small: var(--font-display-xsmall);
    --font-display-number-medium: var(--font-display-small);
    --font-display-number-large: var(--font-display-medium);

    /* Button variants */
    --font-button-small: normal 16px / 16px var(--font-family-display);
    --font-button-large: normal 20px / 20px var(--font-family-display);
    --font-button-secondary: 400 14px / 20px var(--font-family-default); /* --font-base-regular */
    
      /* Button variants */
    --font-button-primary-small: normal 16px / 16px var(--font-family-display);
    --font-button-primary-large: normal 20px / 20px var(--font-family-display);
    --font-button-primary-case: uppercase;

    --font-button-secondary-small: 600 14px / 20px var(--font-family-default); /* --font-base-regular */
    --font-button-secondary-large: var(--font-button-secondary-small);
    --font-button-secondary-case: initial;

    /* Tweak variants */
    --font-tweak-strong: 600 18.5px / 24px var(--font-family-default); /* --font-medium-moderate-strong */
}

:root {
    --primary-light-50: #ffe6ea;
    --primary-light-100: #ffb8c4;
    --primary-base-700: #ff002d;
    --primary-dark-750: #e6002c;
    --primary-dark-800: #d1002d;
    --primary-dark-900: #b30030;
    --secondary-light-50: #e3f2fd;
    --secondary-light-200: #8fcbfa;
    --secondary-base-700: #0e78d5;
    --secondary-dark-800: #0967c3;
    --white: #fff;
    --neutral-00: #fff;
    --neutral-05: #f6f6f6;
    --neutral-10: #f0f0f0;
    --neutral-20: #ddd;
    --neutral-30: #ccc;
    --neutral-50: #999;
    --neutral-70: #666;
    --neutral-80: #444;
    --neutral-base-90: #222;
    --error-background: #fce6e6;
    --error-border: #f8c0c0;
    --error-text: #e6002c;
    --info-background: #e3f2fd;
    --info-border: #8fcbfa;
    --info-text: #0967c3;
    --warning-background: #fce6e6;
    --warning-border: #f8c0c0;
    --warning-text: #e6002c;
    --success-background: #dff3eb;
    --success-border: #9fdcc2;
    --success-text: #027d49;
    --cro-green: #027d49;
    --cro-blue: #0e78d5;
    --cro-electric-blue: #2c4bd1;
    --cro-purple: #862e9c;
    --cro-red: #e6002c;
    --cro-dark-red: #890000;
    --cro-grey: #5d6a71;
    --cro-coral: #fc7754;
    --cro-orange: #ff810c;
    --cro-yellow: #fcc905;
    --cro-light-green: #dff3eb;
    --cro-light-blue: #e3f2fd;
    --cro-light-electric-blue: #e7eefb;
    --cro-light-purple: #f0e7fa;
    --cro-light-red: #fce6e6;
    --cro-light-grey: #e6e9eb;
    --rating-regular: #eb5658;
    --rating-regular-light: #f7bbbb;
    --rating-acceptable: #f49155;
    --rating-acceptable-light: #fad1b7;
    --rating-correct: #aac55f;
    --rating-correct-light: #d7e4b4;
    --rating-good: #6fb743;
    --rating-good-light: #c6e4b4;
    --rating-very-good: var(--rating-good);
    --rating-excellent: #50a662;
    --rating-excellent-light: #badec2;
    --rating-extraordinary: var(--rating-excellent);
    --atrapapuntos: #ff810c;
    --plan-solidario: #ed5503;

    /* New brand colors */
    --primary-extended1-light-50: #fdf1bf;
    --primary-extended1-light-100: #fde381;
    --primary-extended1-base-700: #fcc905;
    --primary-extended1-dark-800: #fcb223;
    --primary-extended2-light-50: #dff3eb;
    --primary-extended2-light-100: #9fdcc2;
    --primary-extended2-base-700: #00a15c;
    --primary-extended2-dark-900: #027d49;

    /* GLOBAL CSS COLORS */

    /* Primary */
    --primary-050: #ffe6ea; /* primary-light-50 */
    --primary-100: #ffb8c4; /* primary-light-100 */
    --primary-700: #ff002d; /* primary-base-700 */
    --primary-750: #e6002c; /* primary-dark-750 */
    --primary-800: #d1002d; /* primary-dark-800 */
    --primary-900: #b30030; /* primary-dark-900 */
    --primary-base: var(--primary-700);
    --primary-tweak: var(--primary-750);

    /* Primary extended 1 */
    --primary-extended1-050: #fdf1bf; /* primary-extended1-light-50 */
    --primary-extended1-100: #fde381; /*  primary-extended1-light-100 */
    --primary-extended1-700: #fcc905; /* primary-extended1-base-700 */
    --primary-extended1-800: #fcb223; /*  primary-extended1-dark-800 */
    --primary-extended1-base: var(--primary-extended1-700);

    /* Primary extended 2 */
    --primary-extended2-050: #daf7e6; /* primary-extended2-light-50 */
    --primary-extended2-100: #9fdcc2; /* primary-extended2-light-100 */
    --primary-extended2-700: #00a15c; /* primary-extended2-base-700 */
    --primary-extended2-900: #027d49; /* primary-extended2-dark-900  */
    --primary-extended2-base: var(--primary-extended2-700);

    /* Secondary */
    --secondary-050: #dcf4fe; /* secondary-light-50 */
    --secondary-100: #8fcbfa; /* secondary-light-100 */
    --secondary-700: #0e78d5; /* secondary-base-700 */
    --secondary-800: #0967c3; /* secondary-dark-800 */
    --secondary-base: var(--secondary-700);

    /* Neutral */
    --neutral-000: #fff;
    --neutral-050: #f6f6f6; /* neutral-05 */
    --neutral-100: #f0f0f0; /* neutral-10  */
    --neutral-200: #ddd; /* neutral-20  */
    --neutral-300: #ccc; /* neutral-30  */
    --neutral-500: #999; /* neutral-50  */
    --neutral-700: #666; /*  neutral-70 */
    --neutral-800: #444; /* neutral-80  */
    --neutral-900: #222; /* --neutral-90 */
    --neutral-base: var(--neutral-900);

    /* Semantic */
    --error-050: #ffe6ea;
    --error-100: #ffb8c4;
    --error-800: #d1002d;
    --info-050: #dcf4fe;
    --info-100: #8fcbfa;
    --info-800: #0967c3;
    --warning-050: #ffe6ea;
    --warning-100: #ffb8c4;
    --warning-800: #d1002d;
    --success-050: #daf7e6;
    --success-100: #9fdcc2;
    --success-800: #027d49;

    /* Status */
    --error-background: var(--error-050);
    --error-border: var(--error-100);
    --error-content: var(--error-800); /* error-text */
    --info-background: var(--info-050);
    --info-border: var(--info-100);
    --info-content: var(--info-800); /* info-text */
    --warning-background: var(--warning-050);
    --warning-border: var(--warning-100);
    --warning-content: var(--warning-800); /* warning-text */
    --success-background: var(--success-050);
    --success-border: var(--success-100);
    --success-content: var(--success-800); /* success-text */

    /* CRO */
    --cro-green-light: #daf7e6; /* cro-light-green */
    --cro-green: #027d49;
    --cro-blue-light: #dcf4fe; /*  cro-light-blue */
    --cro-blue: #0e78d5;
    --cro-blue-dark: #0967c3; /* cro-light-electric-blue */
    --cro-electric-blue-light: #d8e5fc; /* cro-electric-blue */
    --cro-electric-blue: #2c4bd1; /* cro-light-purple */
    --cro-violet-light: #e2ddff; /* cro-purple */
    --cro-violet: #5631b7; /* cro-light-red */
    --cro-purple-light: #f6e1fd; /* cro-red */
    --cro-purple: #96298d; /* cro-dark-red */
    --cro-red-light: #ffe6ea; /* cro-grey */
    --cro-red: #e6002c; /* cro-light-grey */
    --cro-red-dark: #d1002d; /* cro-yellow */
    --cro-grey-light: #e6e9eb; /* cro-coral */
    --cro-grey: #545969; /* cro-orange */
    --cro-yellow: #fcc905; /*  atrapapuntos */
    --cro-cyan: #0d8296;
    --cro-lime: #517806;
    --cro-amber: #d2460f;

    /* Rating */
    --rating-regular-light: #fee4e0; /* rating-regular */
    --rating-regular-dark: #c91810; /* rating-acceptable */
    --rating-acceptable-light: #feead2; /* rating-correct */
    --rating-acceptable-dark: #b74605; /* rating-good */
    --rating-correct-light: #e6f3ba; /* rating-very-good */
    --rating-correct-dark: #517806; /* rating-excellent */
    --rating-good-light: #d8f7cf; /* rating-extraordinary */
    --rating-good-dark: #027f00;
    --rating-very-good-light: #d8f7cf;
    --rating-very-good-dark: #027f00;
    --rating-excellent-light: #daf7e6;
    --rating-excellent-dark: #027d49;
    --rating-extraordinary-light: #daf7e6;
    --rating-extraordinary-dark: #027d49;

    /* Avatar */
    --avatar-background: #dde7ee;
    --avatar-content: #4a545a;

    /* Smart */
    --smart-gradient: linear-gradient(to right, var(--primary-base), #714193);
    --smart-gradient-light: linear-gradient(to right, #f6768c, #5d3a75);

    /* Buttons */
    --button-primary-background: var(--primary-base);
    --button-primary-content: var(--neutral-000);
    --button-primary-action-background: var(--primary-800);
    --button-primary-inverse-action-background: var(--neutral-050);
    --button-primary-inverse-disable-content: rgb(255 255 255 / 60%);

    --button-secondary-background: var(--neutral-000);
    --button-secondary-content: var(--primary-tweak);
    --button-secondary-border: var(--primary-tweak);
    --button-secondary-action-background: var(--neutral-050);
    --button-secondary-inverse-border: var(--neutral-000);
    --button-secondary-inverse-action-background: var(--primary-900);
    --button-secondary-inverse-disable-content: rgb(255 255 255 / 60%);
    --button-secondary-inverse-disable-border: rgb(255 255 255 / 60%);

    /* Links */
    --link-primary: var(--primary-tweak);
    --link-secondary: var(--neutral-900);    
}

:root {
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-s: 12px;
    --spacing-m: 16px;
    --spacing-l: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-xxl-2: 40px;
    --spacing-xxl-3: 48px;
    --spacing-xxl-4: 64px;
    --spacing-xxl-5: 80px;
}

:root {
    --shadow-outlined-small-offset-x: 0;
    --shadow-outlined-small-offset-y: 1px;
    --shadow-outlined-small-negative-offset-y: -1px;
    --shadow-outlined-small-blur: 4px;
    --shadow-outlined-small-spread: 0;
    --shadow-outlined-small-color: rgba(0, 0, 0, 0.1);
    --shadow-outlined-medium-offset-x: 0;
    --shadow-outlined-medium-offset-y: 4px;
    --shadow-outlined-medium-negative-offset-y: -1px;
    --shadow-outlined-medium-blur: 8px;
    --shadow-outlined-medium-spread: 0;
    --shadow-outlined-medium-color: rgba(0, 0, 0, 0.16);

        /* The following variables should not be used directly; they are for internal use in the following shadows */
    --shadow-small-offset-x: 0;
    --shadow-small-offset-y: 1px;
    --shadow-small-blur: 4px;
    --shadow-small-spread: 0;
    --shadow-small-color: rgb(0 0 0 / 10%);
    --shadow-medium-offset-x: 0;
    --shadow-medium-offset-y: 4px;
    --shadow-medium-blur: 8px;
    --shadow-medium-spread: 0;
    --shadow-medium-color: rgb(0 0 0 / 16%);
    --shadow-large-offset-x: 0;
    --shadow-large-offset-y: 8px;
    --shadow-large-blur: 24px;
    --shadow-large-spread: 0;
    --shadow-large-color: rgb(0 0 0 / 16%);

    /* This for usage */
    --shadow-small: var(--shadow-small-offset-x) var(--shadow-small-offset-y)
        var(--shadow-small-blur) var(--shadow-small-spread)
        var(--shadow-small-color);
    --shadow-medium: var(--shadow-medium-offset-x) var(--shadow-medium-offset-y)
        var(--shadow-medium-blur) var(--shadow-medium-spread)
        var(--shadow-medium-color);
    --shadow-large: var(--shadow-large-offset-x) var(--shadow-large-offset-y)
        var(--shadow-large-blur) var(--shadow-large-spread)
        var(--shadow-large-color);

    --shadow-up-small: var(--shadow-small-offset-x)
        calc(-1 * var(--shadow-small-offset-y)) var(--shadow-small-blur)
        var(--shadow-small-spread) var(--shadow-small-color);
}