@import url('colors.css');
@import url('typography.css');
@import url('radius.css');
* {
    padding: 0; 
	margin: 0; 
    
	list-style: none; 
	text-decoration: none; 
	cursor: default; 
	color: inherit; 
	border:0;
    box-sizing: border-box;

    text-rendering:optimizeLegibility;

    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-optical-sizing: auto;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html {
    font-size: var(--text-size-base);
}

body {
    touch-action: manipulation;

    height: 100%;
    position: relative;

    font-weight: var(--text-regular);
    font-variation-settings: "slnt" 0;
    color: var(--color-gray-dark-500);
}

hr,
.hr {
    border-width: 1px 0 0 0;
    border-color: var(--color-gray-200);
    border-style: solid;

    &.vertical {
        border-width: 0 1px 0 0;
    }
}

/* Background */
.bg-white {background-color: var(--color-base-white) !important;}

.bg-gray-25 {background-color: var(--color-gray-25) !important;}
.bg-gray-50 {background-color: var(--color-gray-50) !important;}
.bg-gray-100 {background-color: var(--color-gray-100) !important;}
.bg-gray-200 {background-color: var(--color-gray-200) !important;}
.bg-gray-300 {background-color: var(--color-gray-300) !important;}
.bg-gray-400 {background-color: var(--color-gray-400) !important;}
.bg-gray-500 {background-color: var(--color-gray-500) !important;}
.bg-gray-600 {background-color: var(--color-gray-600) !important;}
.bg-gray-700 {background-color: var(--color-gray-700) !important;}
.bg-gray-800 {background-color: var(--color-gray-800) !important;}
.bg-gray-900 {background-color: var(--color-gray-900) !important;}
.bg-gray-950 {background-color: var(--color-gray-950) !important;}

.bg-gray-dark-50 {background-color: var(--color-gray-50) !important;}
.bg-gray-dark-100 {background-color: var(--color-gray-100) !important;}
.bg-gray-dark-200 {background-color: var(--color-gray-200) !important;}
.bg-gray-dark-300 {background-color: var(--color-gray-300) !important;}
.bg-gray-dark-400 {background-color: var(--color-gray-400) !important;}
.bg-gray-dark-500 {background-color: var(--color-gray-500) !important;}
.bg-gray-dark-600 {background-color: var(--color-gray-600) !important;}
.bg-gray-dark-700 {background-color: var(--color-gray-700) !important;}
.bg-gray-dark-800 {background-color: var(--color-gray-800) !important;}
.bg-gray-dark-900 {background-color: var(--color-gray-900) !important;}
.bg-gray-dark-950 {background-color: var(--color-gray-950) !important;}

.bg-corp-50 {background-color: var(--color-corp-50) !important;}
.bg-corp-100 {background-color: var(--color-corp-100) !important;}
.bg-corp-200 {background-color: var(--color-corp-200) !important;}
.bg-corp-300 {background-color: var(--color-corp-300) !important;}
.bg-corp-400 {background-color: var(--color-corp-400) !important;}
.bg-corp-500 {background-color: var(--color-corp-500) !important;}
.bg-corp-600 {background-color: var(--color-corp-600) !important;}
.bg-corp-700 {background-color: var(--color-corp-700) !important;}
.bg-corp-800 {background-color: var(--color-corp-800) !important;}
.bg-corp-900 {background-color: var(--color-corp-900) !important;}
.bg-corp-950 {background-color: var(--color-corp-950) !important;}

.bg-corpBlack-50 {background-color: var(--color-corpBlack-50) !important;}
.bg-corpBlack-100 {background-color: var(--color-corpBlack-100) !important;}
.bg-corpBlack-200 {background-color: var(--color-corpBlack-200) !important;}
.bg-corpBlack-300 {background-color: var(--color-corpBlack-300) !important;}
.bg-corpBlack-400 {background-color: var(--color-corpBlack-400) !important;}
.bg-corpBlack-500 {background-color: var(--color-corpBlack-500) !important;}
.bg-corpBlack-600 {background-color: var(--color-corpBlack-600) !important;}
.bg-corpBlack-700 {background-color: var(--color-corpBlack-700) !important;}
.bg-corpBlack-800 {background-color: var(--color-corpBlack-800) !important;}
.bg-corpBlack-900 {background-color: var(--color-corpBlack-900) !important;}
.bg-corpBlack-950 {background-color: var(--color-corpBlack-950) !important;}

.shadow-sm {box-shadow: 0 0px 1rem 0 rgba(0, 0, 0, .10);}
.shadow-md {box-shadow: 0 0px 2rem .5rem rgba(0, 0, 0, .10);}
.shadow-lg {box-shadow: 0 0px 3rem .75rem rgba(0, 0, 0, .10);}
.shadow-xl {box-shadow: 0 0px 4rem 1rem rgba(0, 0, 0, .10);}

/* index */

.zindex--1 {z-index: -1;}
.zindex-0 {z-index: 0;}
.zindex-1 {z-index: 1;}
.zindex-2 {z-index: 2;}

.relative {position: relative;}
.absolute {position: absolute;}

/* Text style */

.text-c {text-align: center;}

b {font-weight: var(--text-bold);}
p {font-size: var(--text-size-md); line-height: var(--line-text-lg);}

.text-italic {font-style: italic;}

.badge {
    font-size: var(--text-size-xs);
    font-weight: var(--text-light);

    padding: .3rem .8rem;

    border-radius: var(--radius-lg);

    background: var(--color-base-white);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;

    & i {
        font-size: var(--text-size-md);
        color: var(--color-corp-500);
    }
}

a,
button,
.btn {
    cursor: pointer;
    &> * {
        cursor: pointer;
    }
}

a {
    &:hover {
        text-decoration: underline;
    }
}

.btn {
    background: var(--color-gray-50);
    font-size: var(--text-size-md);
    font-weight: var(--text-medium);

    padding: .8rem 1.4rem;
    border-radius: var(--radius-md);

    letter-spacing: .5px;

    &.btn-primary {
        background: var(--color-blue-600);
        color: var(--color-base-white);
    }

    &.btn-corp {
        background: var(--color-corpBlack-500);
        color: var(--color-base-white);

        &:hover {
            background: var(--color-corp-500);
        }
    }
}
textarea,
input[type="text"],
.inp-text {
    font-size: var(--text-size-md);
    font-weight: var(--text-regular);
    padding: .8rem 1.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);

    resize: none;

    -moz-appearance: none;
    -webkit-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
    
    &:focus {
        outline: none;
        border-color: var(--color-corp-500);
        box-shadow: 0 0 0px 1px var(--color-corp-500);
    }
}

h1 {font-size: var(--display-size-xl); line-height: var(--line-display-lg);}
h2 {font-size: var(--display-size-md); line-height: var(--line-display-md);}
h3 {font-size: var(--text-size-xl); line-height: var(--line-text-xl);}
h4 {font-size: var(--text-size-lg); line-height: var(--line-text-lg);}
h5 {font-size: var(--text-size-md); line-height: var(--line-text-md);}

h1, h2, h3, h4, h5 {font-weight: var(--text-bold);}


.text-thin {font-weight: var(--text-thin);}
.text-light {font-weight: var(--text-light);}
.text-regular {font-weight: var(--text-regular);}
.text-medium {font-weight: var(--text-medium);}
.text-semibold {font-weight: var(--text-semibold);}
.text-bold {font-weight: var(--text-bold);}
.text-extrabold {font-weight: var(--text-extrabold);}
.text-black {font-weight: var(--text-black);}

.text-xs {font-size: var(--text-size-xs); line-height: var(--line-text-xs);}
.text-sm {font-size: var(--text-size-sm); line-height: var(--line-text-sm);}
.text-md {font-size: var(--text-size-md); line-height: var(--line-text-md);}
.text-lg {font-size: var(--text-size-lg); line-height: var(--line-text-lg);}
.text-xl {font-size: var(--text-size-xl); line-height: var(--line-text-xl);}

.text-d-xs {font-size: var(--display-size-xs); line-height: var(--line-display-xs);}
.text-d-sm {font-size: var(--display-size-sm); line-height: var(--line-display-sm);}
.text-d-md {font-size: var(--display-size-md); line-height: var(--line-display-md);}
.text-d-lg {font-size: var(--display-size-lg); line-height: var(--line-display-lg);}
.text-d-xl {font-size: var(--display-size-xl); line-height: var(--line-display-xl);}

.text-line-xs {line-height: var(--line-text-xs) !important;}
.text-line-sm {line-height: var(--line-text-sm) !important;}
.text-line-md {line-height: var(--line-text-md) !important;}
.text-line-lg {line-height: var(--line-text-lg) !important;}
.text-line-xl {line-height: var(--line-text-xl) !important;}

.text-gray-50 {color: var(--color-gray-50);}
.text-gray-100 {color: var(--color-gray-100);}
.text-gray-200 {color: var(--color-gray-200);}
.text-gray-300 {color: var(--color-gray-300);}
.text-gray-400 {color: var(--color-gray-400);}
.text-gray-500 {color: var(--color-gray-500);}
.text-gray-600 {color: var(--color-gray-600);}
.text-gray-700 {color: var(--color-gray-700);}
.text-gray-800 {color: var(--color-gray-800);}
.text-gray-900 {color: var(--color-gray-900);}
.text-gray-950 {color: var(--color-gray-950);}

.text-corp-50 {color: var(--color-corp-50);}
.text-corp-100 {color: var(--color-corp-100);}
.text-corp-200 {color: var(--color-corp-200);}
.text-corp-300 {color: var(--color-corp-300);}
.text-corp-400 {color: var(--color-corp-400);}
.text-corp-500 {color: var(--color-corp-500);}
.text-corp-600 {color: var(--color-corp-600);}
.text-corp-700 {color: var(--color-corp-700);}
.text-corp-800 {color: var(--color-corp-800);}
.text-corp-900 {color: var(--color-corp-900);}
.text-corp-950 {color: var(--color-corp-950);}

.text-corpBlack-50 {color: var(--color-corpBlack-50);}
.text-corpBlack-100 {color: var(--color-corpBlack-100);}
.text-corpBlack-200 {color: var(--color-corpBlack-200);}
.text-corpBlack-300 {color: var(--color-corpBlack-300);}
.text-corpBlack-400 {color: var(--color-corpBlack-400);}
.text-corpBlack-500 {color: var(--color-corpBlack-500);}
.text-corpBlack-600 {color: var(--color-corpBlack-600);}
.text-corpBlack-700 {color: var(--color-corpBlack-700);}
.text-corpBlack-800 {color: var(--color-corpBlack-800);}
.text-corpBlack-900 {color: var(--color-corpBlack-900);}
.text-corpBlack-950 {color: var(--color-corpBlack-950);}



/* images */

picture {
    & img {
        width: inherit;
        height: 100%;
        object-fit: cover;
        object-position: center;

        border-radius: inherit;
    }
}

/* flex */

.row {display: flex; box-sizing: border-box;}

.wrap {flex-wrap: wrap;}

.column {flex-direction: column;}

.align-c {align-items: center;}
.align-s {align-items: flex-start;}

.justify-c {justify-content: center;}
.justify-sb {justify-content: space-between;}
.justify-fe {justify-content: flex-end;}

.gap {gap: .5rem;}
.gap-1 {gap: 1rem;}
.gap-2 {gap: 1.5rem;}
.gap-3 {gap: 2rem;}
.gap-4 {gap: 2.5rem;}

.column-gap {column-gap: .5rem !important;}
.column-gap-1 {column-gap: 1rem !important;}
.column-gap-2 {column-gap: 1.5rem !important;}
.column-gap-3 {column-gap: 2rem !important;}
.column-gap-4 {column-gap: 2.5rem !important;}

.row-gap {row-gap: .5rem;}
.row-gap-1 {row-gap: 1rem;}
.row-gap-2 {row-gap: 1.5rem;}
.row-gap-3 {row-gap: 2rem;}
.row-gap-4 {row-gap: 2.5rem;}

.flex-12    {flex: 12 1 100%;}
.flex-11    {flex: 11 2 91.66666667%;}
.flex-10 	{flex: 10 3 83.33333333%;}
.flex-9		{flex: 9 4 75%;}
.flex-8		{flex: 8 5 66.66666667%;}
.flex-7		{flex: 7 6 58.33333333%;}
.flex-6		{flex: 6 7 50%;}
.flex-5		{flex: 5 8 41.66666667%;}
.flex-4		{flex: 4 9 33.33333333%;}
.flex-3		{flex: 3 10 25%;}
.flex-2		{flex: 2 11 16.66666667%;}
.flex-1		{flex: 1 12 8.33333333%;}

/* columnd width */

.col-12	    {width: 100%;}
.col-11	    {width: 91.66666667%;}
.col-10 	{width: 83.33333333%;}
.col-9		{width: 75%;}
.col-8		{width: 66.66666667%;}
.col-7		{width: 58.33333333%;}
.col-6		{width: 50%;}
.col-5		{width: 41.66666667%;}
.col-4		{width: 33.33333333%;}
.col-3		{width: 25%;}
.col-2		{width: 16.66666667%;}
.col-1		{width: 8.33333333%;}

/* grid */

.grid {display: grid;}

.grid-column-2 {grid-template-columns: repeat(2, 1fr);}
.grid-column-3 {grid-template-columns: repeat(3, 1fr);}
.grid-column-4 {grid-template-columns: repeat(4, 1fr);}

/* Border radius */

.radius-sm {border-radius: var(--radius-sm);}
.radius-md {border-radius: var(--radius-md);}
.radius-lg {border-radius: var(--radius-lg);}
.radius-xl {border-radius: var(--radius-xl);}
.radius-xxl {border-radius: var(--radius-xxl);}
.radius-xxxl {border-radius: var(--radius-xxxl);}
.radius-full {border-radius: var(--radius-full);}

.radius-tln {border-top-left-radius: 0 !important;}
.radius-trn {border-top-right-radius: 0 !important;}
.radius-bln {border-bottom-left-radius: 0 !important;}
.radius-brn {border-bottom-right-radius: 0 !important;}

/* padding y margin */

.pt-xxxl {padding-top: var(--radius-xxxl);}
.pt-xxl {padding-top: var(--radius-xxl);}
.pt-xl {padding-top: var(--radius-xl);}
.pt-lg {padding-top: var(--radius-lg);}
.pt-md {padding-top: var(--radius-md);}
.pt-sm {padding-top: var(--radius-sm);}
.pt-xs {padding-top: var(--radius-xs);}

.pb-xxxl {padding-bottom: var(--radius-xxxl);}
.pb-xxl {padding-bottom: var(--radius-xxl);}
.pb-xl {padding-bottom: var(--radius-xl);}
.pb-lg {padding-bottom: var(--radius-lg);}
.pb-md {padding-bottom: var(--radius-md);}
.pb-sm {padding-bottom: var(--radius-sm);}
.pb-xs {padding-bottom: var(--radius-xs);}

.pl-xxxl {padding-left: var(--radius-xxxl);}
.pl-xxl {padding-left: var(--radius-xxl);}
.pl-xl {padding-left: var(--radius-xl);}
.pl-lg {padding-left: var(--radius-lg);}
.pl-md {padding-left: var(--radius-md);}
.pl-sm {padding-left: var(--radius-sm);}
.pl-xs {padding-left: var(--radius-xs);}

.pr-xxxl {padding-right: var(--radius-xxxl);}
.pr-xxl {padding-right: var(--radius-xxl);}
.pr-xl {padding-right: var(--radius-xl);}
.pr-lg {padding-right: var(--radius-lg);}
.pr-md {padding-right: var(--radius-md);}
.pr-sm {padding-right: var(--radius-sm);}
.pr-xs {padding-right: var(--radius-xs);}

.p-xxxl {padding: var(--radius-xxxl);}
.p-xxl {padding: var(--radius-xxl);}
.p-xl {padding: var(--radius-xl);}
.p-lg {padding: var(--radius-lg);}
.p-md {padding: var(--radius-md);}
.p-sm {padding: var(--radius-sm);}
.p-xs {padding: var(--radius-xs);}

.p-ln {padding-left: 0 !important;}
.p-rn {padding-right: 0 !important;}
.p-tn {padding-top: 0 !important;}
.p-bn {padding-bottom: 0 !important;}

.mt-xxxl {margin-top: var(--radius-xxxl);}
.mt-xxl {margin-top: var(--radius-xxl);}
.mt-xl {margin-top: var(--radius-xl);}
.mt-lg {margin-top: var(--radius-lg);}
.mt-md {margin-top: var(--radius-md);}
.mt-sm {margin-top: var(--radius-sm);}
.mt-xs {margin-top: var(--radius-xs);}

.mb-xxxl {margin-bottom: var(--radius-xxxl);}
.mb-xxl {margin-bottom: var(--radius-xxl);}
.mb-xl {margin-bottom: var(--radius-xl);}
.mb-lg {margin-bottom: var(--radius-lg);}
.mb-md {margin-bottom: var(--radius-md);}
.mb-sm {margin-bottom: var(--radius-sm);}
.mb-xs {margin-bottom: var(--radius-xs);}

.ml-xxxl {margin-left: var(--radius-xxxl);}
.ml-xxl {margin-left: var(--radius-xxl);}
.ml-xl {margin-left: var(--radius-xl);}
.ml-lg {margin-left: var(--radius-lg);}
.ml-md {margin-left: var(--radius-md);}
.ml-sm {margin-left: var(--radius-sm);}
.ml-xs {margin-left: var(--radius-xs);}

.mr-xxxl {margin-right: var(--radius-xxxl);}
.mr-xxl {margin-right: var(--radius-xxl);}
.mr-xl {margin-right: var(--radius-xl);}
.mr-lg {margin-right: var(--radius-lg);}
.mr-md {margin-right: var(--radius-md);}
.mr-sm {margin-right: var(--radius-sm);}
.mr-xs {margin-right: var(--radius-xs);}

.mt-xxxl- {margin-top: calc(var(--radius-xxxl) * -1);}
.mt-xxl- {margin-top: calc(var(--radius-xxl) * -1);}
.mt-xl- {margin-top: calc(var(--radius-xl) * -1);}
.mt-lg- {margin-top: calc(var(--radius-lg) * -1);}
.mt-md- {margin-top: calc(var(--radius-md) * -1);}
.mt-sm- {margin-top: calc(var(--radius-sm) * -1);}
.mt-xs- {margin-top: calc(var(--radius-xs) * -1);}

.mb-xxxl- {margin-bottom: calc(var(--radius-xxxl) * -1);}
.mb-xxl- {margin-bottom: calc(var(--radius-xxl) * -1);}
.mb-xl- {margin-bottom: calc(var(--radius-xl) * -1);}
.mb-lg- {margin-bottom: calc(var(--radius-lg) * -1);}
.mb-md- {margin-bottom: calc(var(--radius-md) * -1);}
.mb-sm- {margin-bottom: calc(var(--radius-sm) * -1);}
.mb-xs- {margin-bottom: calc(var(--radius-xs) * -1);}

.ml-xxxl- {margin-left: calc(var(--radius-xxxl) * -1);}
.ml-xxl- {margin-left: calc(var(--radius-xxl) * -1);}
.ml-xl- {margin-left: calc(var(--radius-xl) * -1);}
.ml-lg- {margin-left: calc(var(--radius-lg) * -1);}
.ml-md- {margin-left: calc(var(--radius-md) * -1);}
.ml-sm- {margin-left: calc(var(--radius-sm) * -1);}
.ml-xs- {margin-left: calc(var(--radius-xs) * -1);}

.mr-xxxl- {margin-right: calc(var(--radius-xxxl) * -1);}
.mr-xxl- {margin-right: calc(var(--radius-xxl) * -1);}
.mr-xl- {margin-right: calc(var(--radius-xl) * -1);}
.mr-lg- {margin-right: calc(var(--radius-lg) * -1);}
.mr-md- {margin-right: calc(var(--radius-md) * -1);}
.mr-sm- {margin-right: calc(var(--radius-sm) * -1);}
.mr-xs- {margin-right: calc(var(--radius-xs) * -1);}

.m-xxxl {margin: var(--radius-xxxl);}
.m-xxl {margin: var(--radius-xxl);}
.m-xl {margin: var(--radius-xl);}
.m-lg {margin: var(--radius-lg);}
.m-md {margin: var(--radius-md);}
.m-sm {margin: var(--radius-sm);}
.m-xs {margin: var(--radius-xs);}

.m-ln {margin-left: 0 !important;}
.m-rn {margin-right: 0 !important;}
.m-tn {margin-top: 0 !important;}
.m-bn {margin-bottom: 0 !important;}

.ml-a {margin-left: auto;}
.mr-a {margin-right: auto;}
.mt-a {margin-top: auto;}
.mb-a {margin-bottom: auto;}