:root{
	--c-blanco: #fff;
	--c-blanco-transparent: #ffffff2f;
	--c-blanco-transparent-10: #ffffff46;
	--c-blanco-transparent-20: #ffffff60;
	--c-blanco-transparent-30: #ffffff7c;
	--c-blanco-transparent-40: #ffffff8b;
	--c-blanco-transparent-50: #ffffff9e;
	--c-blanco-transparent-60: #ffffffb0;
	--c-blanco-transparent-70: #ffffffc6;
	--c-blanco-transparent-80: #ffffffd5;
	--c-blanco-transparent-90: #ffffffe5;

	--c-scale-10: #f3f5fa;
	--c-scale-20: #e9ecf6;
	--c-scale-30: #d7daee;
	--c-scale-40: #bec3e3;
	--c-scale-50: #a3a6d6;
	--c-scale-60: #8d8cc8;
	--c-scale-70: #7a73b8;
	--c-scale-80: #6a63a1;
	--c-scale-90: #565182;
	--c-scale-100: #484669;
	--c-scale-200: #2b293d;

	--c-scale-transparent: #2b293d52;
	--c-scale-0-trans: #2b293d14;
	--c-transparent-10: #2b293d0e;
	--c-transparent-20: #2b293d1f;
	--c-transparent-30: #2b293d37;
	--c-transparent-40: #2b293d51;
	--c-transparent-50: #2b293d6d;
	--c-transparent-60: #2b293d8e;

	--c-primary-10: #d6f1ff;
	--c-primary-20: #b5e9ff;
	--c-primary-30: #83ddff;
	--c-primary-40: #48c8ff;
	--c-primary-50: #1ea9ff;
	--c-primary-60: #068bff;

	--c-primary: #0077ff;
	--c-primary-hover: #003f9b;

	--c-secondary-10: #edfdfe;
	--c-secondary-20: #d1fafc;
	--c-secondary-30: #a8f1f9;
	--c-secondary-40: #6de6f3;
	--c-secondary-50: #0e90ac;
	--c-secondary: #1fcee5;
	--c-secondary-hover: #0eb3cc;

	--c-action-10: #fff0f8;
	--c-action-20: #ffe3f9;
	--c-action-30: #ffc6f3;
	--c-action-40: #ff98f8;
	--c-action: #fd009e;
	--c-action-hover: #ff27c0;

	--c-yellow-00: #fffde9;
	--c-yellow-10: #fffac5;
	--c-yellow-20: #fff685;
	--c-yellow-30: #ffeb46;
	--c-yellow-40: #ffdc18;
	--c-yellow: #ffbc00;
	--c-yellow-hover: #d79e00;
	--c-yellow-hover-10: #946c00;

	--c-orange-10: #fef7ee;
	--c-orange-20: #fcedd8;
	--c-orange-30: #f9d7af;
	--c-orange-40: #f4ba7d;
	--c-orange: #ed8937;
	--c-orange-hover: #ea7625;

	--c-red-10: #ffe0e0;
	--c-red-20: #ffc6c6;
	--c-red-30: #ff9f9f;
	--c-red-40: #ff6767;
	--c-red: #fc4646;
	--c-red-hover: #ea1818;

	--c-violet-10: #fce3ff;
	--c-violet-20: #fac6ff;
	--c-violet-30: #fa9aff;
	--c-violet-40: #ee22ff;
	--c-violet-50: #d701f8;
	--c-violet: #b700ce;
	--c-violet-hover: #9200a2;

	--c-green-10: #d3f8e4;
	--c-green-20: #abefce;
	--c-green-30: #75e0b3;
	--c-green-40: #3dca93;
	--c-green: #1bbc82;
	--c-green-hover: #0d8e62;

	--c-lemon-10: #f7ffe6;
	--c-lemon-20: #ecfec9;
	--c-lemon-30: #d9fe98;
	--c-lemon-40: #bef95d;
	--c-lemon-50: #a2ef2c;
	--c-lemon: #8de50e;
	--c-lemon-hover: #4c810a;

	--c-black-00:#e4e4e4;
	--c-black-10: #dbdbdb;
	--c-black-20: #b6b6b6;
	--c-black-30: #989898;
	--c-black-40: #7b7b7b;
	--c-black-50: #646464;
	--c-black: #2d2d2d;
	--c-black-hover: #1c1c1c;

	--font-gotham: 'Gotham Rounded';
	--font-exo: "Exo 2", sans-serif;

	--box-sh: 0px 4px 10px #2b293d17;
	--box-sh-20: 0px 4px 10px #2b293d47;
	--box-sh-primary: -3px -3px 10px var(--c-secondary-30), 3px 3px 10px var(--c-primary-20);
	--box-sh-home: 10px 5px 36px -8px var(--c-primary-30), -10px 4px 36px -10px var(--c-action-30);
	--box-sh-item: 14px 12px 26px -14px var(--c-primary-20), -10px 4px 36px -10px var(--c-action-30), 21px -5px 33px -27px var(--c-yellow-20);

	--linear-gradient: linear-gradient(45deg, var(--c-primary), var(--c-secondary));

	/* Tamaño texto */
	--font-sz-title-card: clamp(2.2rem, 2.5vw, 2.7rem);
	--font-sz-title: clamp(2.5rem, 3.5vw, 3.7rem);
	--font-sz-subtitle: clamp(1.8rem, 2vw, 2.2rem);
	--font-sz-parrafo: clamp(1.5rem, 2vw, 2rem);
	--font-sz-title-slider: clamp(2.5rem, 4.5vw, 5rem);
}


.m_t-b-30{
    margin: 30px 0 30px 0;
}
.m_t-b-40{
    margin: 40px 0 40px 0;
}
.m_t-50{
    margin-top: 50px;
}
.p_t-b-30{
    padding: 30px 0 30px 0;
}
.p_t-b-40{
    padding: 40px 0 40px 0;
}

.strong-300{
    font-weight: 300 !important;
}
.strong-400{
    font-weight: 400 !important;
}
.strong-500{
    font-weight: 500 !important;
}
.strong-600{
    font-weight: 600 !important;
}
.strong-700{
    font-weight: 600 !important;
}

.width-responsive,
.width-responsive-no-desktop{
    width: 94%;
    margin: auto;
}
@media (max-width:819px){
    .width-responsive-no-mobile{
        width: fit-content;
        margin: 0;
    }
}
.hide{
	display: none;
}
@media (max-width:819px){
    .hide-mobile{
        display: none;
    }
}
@media (min-width:820px){
    .hide-desktop{
        display: none;
    }
    .width-responsive-no-desktop{
        width: fit-content;
    }
}

.w-120-160,
.w-120-220{
    width: 120px !important;
}
@media (min-width:820px){
    .w-120-160{
        width: 160px !important;
    }
    .w-120-220{
        width: 220px !important;
    }
}

/* ===== Flex Box ======*/
.flex-r,
.flex-_c,
.flex-_c-r,
.flex-c-_r,
.flex-_c-_r,
.flex-c,
.flex-r-c,
.flex-c-r,
.flex-_r,
.flex-_r-c{
    display: flex;
}
.flex-r{
    flex-direction: row;
}
.flex-_c,
.flex-_c-r{
    flex-direction: column-reverse;
}
.flex-_c,
.flex-_c-_r{
    flex-direction: column-reverse;
}
.flex-_r,
.flex-c-_r,
.flex-_r-c{
    flex-direction: row-reverse;
}
.flex-c,
.flex-c-r{
    flex-direction: column;
}
.flex-r-c{
    flex-direction: row;
}
@media (min-width: 1024px){
    .flex-c-r,
    .flex-_c-r{
        flex-direction: row;
    }
    .flex-_c-_r,
    .flex-c-_r{
        flex-direction: row-reverse;
    }
    .flex-r-c,
    .flex-_r-c{
        flex-direction: column;
    }
    .flex-r-desktop{
        display: flex;
    }
}
.jc-b,
.jc-b-l,
.jc-b-c,
.jc-b-r{
    justify-content: space-between;
}
.jc-c{
    justify-content: center;
}
.jc-r,
.jc-r-c{
    justify-content: flex-end;
}
.jc-l-r{
    justify-content: left;
}
@media (min-width:820px){
    .jc-b-r,
    .jc-l-r{
        justify-content: right;
    }
    .jc-b-l{
        justify-content: flex-start;
    }
    .jc-b-c,
    .jc-r-c{
        justify-content: center;
    }
}
.as-c{
    align-self: center;
}
.as-r{
    align-self: flex-end;
}
.as-l{
    align-self: flex-start;
}
.ai-c,
.ai-c-r{
    align-items: center;
}
.ai-r,
.ai-r-c{
    align-items: flex-end;
}
.ai-c-l{
    align-items: center;
}
.ai-l,
.ai-l-c,
.ai-l-r{
    align-items: flex-start;
}
@media (min-width:1024px){
	.ai-c-l{
        align-items: flex-start;
    }
    .ai-l-c,
    .ai-r-c{
        align-items: center;
    }
    .ai-l-r,
    .ai-c-r{
        align-items: flex-end;
    }
}
.gap-5-20,
.gap-5{
    gap:5px;
}
.gap-10,
.gap-10-5,
.gap-10-15,
.gap-10-20,
.gap-10-40,
.gap-10-0{
    gap:10px;
}
.gap-15{
    gap:15px;
}
.gap-20,
.gap-20-0,
.gap-20-5,
.gap-20-10{
    gap:20px;
}
.gap-25{
    gap:25px;
}
.gap-30-40,
.gap-10-30,
.gap-30-20,
.gap-30{
    gap:30px;
}
.gap-40,
.gap-40-20{
    gap: 40px;
}
.gap-50{
    gap: 50px;
}
@media (min-width: 1024px){
    .gap-10-0,
    .gap-20-0{
        gap: 0px;
    }
    .gap-10-5,
    .gap-20-5{
        gap: 5px;
    }
    .gap-20-10{
        gap: 10px;
    }
    .gap-10-15{
        gap: 15px;
    }
    .gap-5-20,
    .gap-10-20,
    .gap-30-20,
    .gap-40-20{
        gap:20px;
    }
    .gap-10-30{
        gap:30px;
    }
    .gap-30-40,
    .gap-10-40{
        gap: 40px;
    }
}
.wrap,
.wrap-m{
    flex-wrap: wrap;
}
.nowrap,
.no-wrap{
    flex-wrap: nowrap;
}
@media (min-width:820px){
    .wrap-d{
        flex-wrap: wrap;
    }
    .wrap-m{
        flex-wrap: nowrap;
    }
}
@media (min-width:768px) and (max-width:1023px){
    .wrap-t{
        flex-wrap: wrap;
    }
}
/*===== Fin - Flex Box =====*/

/*===== Grid ======*/
.d-grid{
    display: grid;
}
.cl-2,
.cl-2-3,
.cl-2-4,
.cl-2-5{
    grid-template-columns: repeat(2, 1fr);
}
.cl-3,
.cl-3-2,
.cl-3-3,
.cl-3-4,
.cl-3-5{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cl-4,
.cl-4-5,
.cl-4-2{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cl-5{
    grid-template-columns: repeat(5, 1fr);
}
.cl-6{
    grid-template-columns: repeat(6, 1fr);
}
.cl-7{
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cl-8{
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
@media (min-width: 1025px) {
    .cl-4-5,
    .cl-2-5,
    .cl-3-5{
        grid-template-columns: repeat(5, 1fr);
    }
    .cl-4-2,
    .cl-3-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .cl-2-3,
    .cl-3-3{
        grid-template-columns: repeat(3, 1fr);
    }
    .cl-2-4,
    .cl-3-4{
        grid-template-columns: repeat(4, 1fr);
    }
}

.cl-auto-3{
    grid-template-columns: auto 1fr 1fr 1fr;
}
.cl-auto-4{
    grid-template-columns: auto 1fr 1fr 1fr 1fr;
}
.cl-auto-3-auto{
    grid-template-columns: auto 1fr 1fr 1fr auto;
}
.cl-3-auto{
    grid-template-columns: 1fr 1fr 1fr auto;
}
.cl-3-auto,
.cl-3-auto_cl-4-auto{
    grid-template-columns: 1fr 1fr 1fr auto;
}
.cl-4-auto,
.cl-4-auto_cl-3-auto{
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
}
.cl-5-auto{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
}
.cl-6-auto{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr auto;
}
.cl-2-auto-1-auto{
    grid-template-columns: 1fr 1fr auto 1fr auto;
}
.cl-1-auto-3{
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.span-2{
    grid-column: span 2;
}
.span-3{
    grid-column: span 3;
}
.span-4{
    grid-column: span 4;
}
.span-5{
    grid-column: span 5;
}
.span-6{
    grid-column: span 6;
}
.cl-4-location {
    grid-column: 4 / 4;
}
.cl-3-location {
    grid-column: 3 / 5;
}

@media (min-width:601px) and (max-width:991px){
    .m-span-2 {
        grid-column: span 2;
    }
    .m-span-3 {
        grid-column: span 3;
    }
    .m-span-4 {
        grid-column: span 4;
    }
    .m-span-5 {
        grid-column: span 5;
    }
}

@media (min-width:768px){
    .cl-3-auto_cl-4-auto{
        grid-template-columns: 1fr 1fr 1fr 1fr auto;
    }
    .cl-4-auto_cl-3-auto{
        grid-template-columns: 1fr 1fr 1fr auto;
    }

}

/*===== Fin - Grid =======*/


/*===== Flex/Gid =====*/
.flex-c-r__grid,
.flex-r-c__grid,
.flex-c__grid,
.flex-r__grid,
.flex-_c__grid{
    display: flex;
}
.flex-c__grid{
    flex-direction: column;
}
.flex-_c__grid{
    flex-direction: column-reverse;
}
.flex-r__grid{
    flex-direction: row;
}
.grid__flex-r{
    display: grid;
}
@media (min-width: 1024px){
	.flex-c__grid,
    .flex-r__grid,
    .flex-_c__grid
    {
        display: grid;
    }
    .grid__flex-r{
        display: flex;
        flex-direction: row;
    }
}
/*tablet - ipad*/
@media (min-width:768px){
    .flex-c-r__grid{
        flex-direction: row;
    }
    .flex-r-c__grid{
        flex-direction: column;
    }
}
/*Desktop*/
@media (min-width:1024px){
    .flex-c-r__grid,
    .flex-r-c__grid{
        display: grid !important;
    }
}

/*===== Fin - Flex/Grid ======*/

/* Colores */
.c-green{
    color: var(--c-green);
}
.c-blue{
    color: var(--c-primary);
}
.c-pink,
.c-action{
    color: var(--c-action);
}
.c-yellow{
    color: var(--c-yellow-hover);
}
.c-red{
    color: var(--c-red);
}
.c-orange{
    color: var(--c-orange);
}
.c-cyan{
    color: var(--c-secondary-hover);
}
/* Background */
.ct-bg-blues{
	color: var(--c-blanco);
	background: linear-gradient(45deg, var(--c-primary), var(--c-secondary));
	box-shadow: -3px -3px 10px var(--c-secondary-30), 3px 3px 10px var(--c-primary-20);
}
.ct-bg-blue{
	color: var(--c-blanco);
	background: var(--c-primary);
	box-shadow: -3px -3px 10px var(--c-secondary-30), 3px 3px 10px var(--c-primary-20);
} 

/* Botones */

.ct-btn{
    /*width: 50%;
	min-width: 120px;*/
    height: 46px;
	max-height: 46px;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    text-align: center;
    padding: 10px 25px;
	text-wrap: nowrap;
    cursor: pointer;
	transition: all .3s ease;
    line-height: 1.5;
	&:hover,
	&:focus,
	&:active{
        text-decoration: none;
		outline: 0;
        transition: all .3s ease;
    }

    @media (min-width: 992px) {
        width: fit-content;
    }
    @media (min-width: 600px) {
        width: fit-content;
    }
}

.ct-btn-primary{
    color: var(--c-blanco);
	min-height: 46px;
    background: linear-gradient(45deg, var(--c-primary), var(--c-secondary));
    box-shadow: -3px -3px 10px var(--c-secondary-30), 3px 3px 10px var(--c-primary-20);

    &:hover,
	&:focus,
	&:active{
        background: var(--c-primary);
        color: var(--c-blanco);
    }
}

.ct-btn-secondary{
    background: var(--c-secondary);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-secondary-hover);
        color: var(--c-blanco);
    }
}

.ct-btn-alert{
    background: var(--c-action);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-action-hover);
		color: var(--c-blanco);
    }
}
.ct-btn-default{
    background: var(--c-scale-20);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-scale-30);
    }
}
.ct-btn-simple{
    background: transparent;
    color: var(--c-scale-70);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-primary-10);
        color: var(--c-primary);
    }
}
.ct-btn-simple-blue{
    background: var(--c-primary-10);
    color: var(--c-primary);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-primary-20);
        color: var(--c-primary);
    }
}
.ct-btn-simple-blue-hover{
    background: var(--c-primary-20);
    color: var(--c-primary);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-primary-30);
        color: var(--c-primary);
    }
}
.ct-btn-basic{
    border: 1px solid var(--c-secondary-hover);
    background: var(--c-secondary-10);
    color: var(--c-secondary-hover);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-secondary-20);
        color: var(--c-secondary-50);
    }
}
.ct-btn-buscar{
    border: 1px solid var(--c-scale-20);
    background: var(--c-blanco);
    color: var(--c-scale-70);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-scale-20);
        color: var(--c-scale-80);
    }
}

.ct-btn-link{
	width: fit-content;
    text-decoration: underline !important;
    padding: 3px;
    font-size: 14px;
    cursor: pointer;
	border: none;
	background: transparent;
    transition: all .3s ease;

    &:hover,
    &:active,
    &:focus{
        border: none;
        outline: 0;
        font-weight: 500;
        color: var(--c-action) !important;
        transition: all .3s ease;
    }
}
.ct-btn-blanco{
	background: var(--c-blanco);
    color: var(--c-scale-70);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-blanco-transparent);
    }
}
.ct-btn-blue{
	background: var(--c-primary);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-primary-hover);
        color: var(--c-blanco);
    }
}
.ct-btn-yellow{
	background: var(--c-yellow);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-yellow-hover);
        color: var(--c-blanco);
    }
}
.ct-btn-green{
	background: var(--c-green);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-green-hover);
        color: var(--c-blanco);
    }
}
.ct-btn-purpule,
.ct-btn-violet{
	background: var(--c-violet);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-violet-hover);
        color: var(--c-blanco);
    }
}
.ct-btn-orange{
	background: var(--c-orange);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-orange-hover);
        color: var(--c-blanco);
    }
}
.ct-btn-deg{
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        filter: brightness(0.9);
        color: var(--c-blanco);
    }
}
.ct-btn-orange-lemon{
    background: linear-gradient(45deg, var(--c-orange), var(--c-lemon));
}
.ct-btn-lemon-orange{
    background: linear-gradient(45deg, var(--c-lemon), var(--c-orange));
}
.ct-btn-red-blue{
    background: linear-gradient(45deg, var(--c-red), var(--c-primary-60));
}
.ct-btn-blue-red{
    background: linear-gradient(45deg, var(--c-primary), var(--c-red));
}

/* Botones */
.ct-btn{
    height: 40px;
	max-height: 40px;
    font-size: 14px;
    border-radius: 30px;
    border: none;
    text-align: center;
    padding: 10px 25px;
	text-wrap: nowrap;
    cursor: pointer;
	transition: all .3s ease;
    line-height: 1.5;
	&:hover,
	&:focus,
	&:active{
        text-decoration: none;
		outline: 0;
        transition: all .3s ease;
    }
}
.btn-s{
    height: 32px;
	max-height: 32px;
    font-size: 12px;
}
.btn-m{
    height: 40px;
	max-height: 40px;
    font-size: 14px;
}
.btn-l{
    height: 45px;
	max-height: 45px;
    font-size: 16px;
}
/* btn color */
.btn-primary, .btn-blue{
    background: var(--c-primary);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-primary-hover);
        color: var(--c-blanco);
    }
}
/* btn pastel */
.btn-cyan-pastel,
.btn-secondary-pastel{
    background: var(--c-secondary-10);
    color: var(--c-secondary-hover);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-secondary-20);
        color: var(--c-secondary-hover);
    }
}

.btn-active-pastel,
.btn-pink-pastel,
.btn-alert-pastel{
    background: var(--c-action-10);
    color: var(--c-action);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-action-20);
		color: var(--c-action);
    }
}
.btn-default-pastel{
    background: var(--c-scale-10);
    color: var(--c-scale-80);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-scale-20);
        color: var(--c-scale-80);
    }
}

.btn-blanco-pastel{
	background: var(--c-blanco-10);
    color: var(--c-blanco);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-blanco-20);
        color: var(--c-blanco);
    }
}
.btn-primary-pastel,
.btn-blue-pastel{
	background: var(--c-primary-10);
    color: var(--c-primary);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-primary-20);
        color: var(--c-primary);
    }
}
.btn-yellow-pastel{
	background: var(--c-yellow-10);
    color: var(--c-yellow);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-yellow-20);
        color: var(--c-yellow);
    }
}
.btn-green-pastel{
	background: var(--c-green-10);
    color: var(--c-green);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-green-20);
        color: var(--c-green);
    }
}
.btn-purpule-pastel,
.btn-violet-pastel{
	background: var(--c-violet-10);
    color: var(--c-violet);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-violet-20);
        color: var(--c-violet);
    }
}
.btn-orange-pastel{
	background: var(--c-orange-10);
    color: var(--c-orange);
    &:hover,
    &:active,
    &:focus{
        background: var(--c-orange-20);
        color: var(--c-orange);
    }
}
.btn-secondary-pastel{
    background: var(--c-scale-10);
    color: var(--c-scale-60);
    &:hover{
        background: var(--c-scale-20);
    }
}
.btn-yellow-pastel{
    background: var(--c-yellow-10);
    color: var(--c-yellow);
    &:hover{
        background: var(--c-yellow-20);
        color: var(--c-yellow);
    }
}
.btn-cyan-pastel{
    background: var(--c-cyan-10);
    color: var(--c-cyan-hover);
    &:hover{
        background: var(--c-cyan-20);
        color: var(--c-cyan-hover);
    }
}
.btn-orange-pastel{
    background: var(--c-orange-10);
    color: var(--c-orange);
    &:hover{
        background: var(--c-orange-20);
        color: var(--c-orange);
    }
}
.btn-green-pastel{
    background: var(--c-green-10);
    color: var(--c-green);
    &:hover{
        background: var(--c-green-20);
        color: var(--c-green);
    }
}
.btn-pink-pastel{
    background: var(--c-action-10);
    color: var(--c-action);
    &:hover{
        background: var(--c-action-20);
        color: var(--c-action);
    }
}
.btn-red-pastel{
    background: var(--c-red-10);
    color: var(--c-red);
    &:hover{
        background: var(--c-red-20);
        color: var(--c-red);
    }
}
.btn-scale-10{
    background: var(--c-scale-10);
    color: var(--c-scale-80);
    &:hover, &:active, &:focus{background: var(--c-scale-20);}
}
.btn-scale-20{
    background: var(--c-scale-20);
    color: var(--c-scale-80);
    &:hover, &:active, &:focus{background: var(--c-scale-30);}
}
.btn-scale-30{
    background: var(--c-scale-30);
    color: var(--c-scale-80);
    &:hover, &:active, &:focus{background: var(--c-scale-40);}
}
.btn-scale-40{
    background: var(--c-scale-40);
    color: var(--c-blanco);
    &:hover, &:active, &:focus{background: var(--c-scale-50);}
}
.btn-scale-50{
    background: var(--c-scale-50);
    color: var(--c-blanco);
    &:hover, &:active, &:focus{background: var(--c-scale-60);}
}
.btn-scale-60{
    background: var(--c-scale-60);
    color: var(--c-blanco);
    &:hover, &:active, &:focus{background: var(--c-scale-70);}
}
.btn-scale-70{
    background: var(--c-scale-70);
    color: var(--c-blanco);
    &:hover, &:active, &:focus{background: var(--c-scale-80);}
}

/**/

.ct-badge-r,
.ct-badge{
    padding: 5px 15px;
    border-radius: 7px;
    font-size: 14px;
	height: fit-content;
	width: fit-content;
	border: none;
}
.ct-badge-r{
    border-radius: 50px;
    /*&:hover{
        color: var(--c-blanco);
    }*/
}
.badge-blue{
    background: var(--c-primary-10);
    color: var(--c-primary);
}
.badge-cyan{
    background: var(--c-secondary-10);
    color: var(--c-secondary);
}
.badge-green{
    background: var(--c-green-10);
    color: var(--c-green);
}
.badge-action{
    background: var(--c-action-20);
    color: var(--c-action);
}
.badge-red{
    background: var(--c-red-10);
    color: var(--c-red);
}
.badge-pink{
    background: var(--c-action-20);
    color: var(--c-action);
}
.badge-yellow{
    background: var(--c-yellow-10);
    color: var(--c-yellow);
}
.badge-orange{
    background: var(--c-orange-10);
    color: var(--c-orange);
}
.badge-violet,
.badge-purple{
    background: var(--c-violet-10);
    color: var(--c-violet);
}
.badge-default{
    background: var(--c-scale-20);
    color: var(--c-scale-80);
}
.badge-black-0 {
    background: var(--c-scale-0-trans);
    color: var(--c-scale-80);
}
.badge-blue-bg{
    background: var(--c-primary);
    color: var(--c-blanco);
}
.badge-red-bg{
    background: var(--c-red);
    color: var(--c-blanco);
}
.badge-orange-bg{
    background: var(--c-orange);
    color: var(--c-blanco);
}
.badge-yellow-bg{
    background: var(--c-yellow);
    color: var(--c-blanco);
}
.badge-cyan-bg{
    background: var(--c-green);
    color: var(--c-blanco);
}
.badge-violet-bg{
    background: var(--c-violet);
    color: var(--c-blanco);
}
.badge-blanco-bg{
    background: var(--c-blanco-transparent);
    color: var(--c-blanco) !important;
}

.ct-indicator{
    padding: 5px 15px;
    border-radius: 7px;
    font-size: 14px;
}

.indicator-red{
    background: var(--c-action);
    color: var(--c-blanco) !important;
}
.indicator-blue{
    background: var(--c-primary);
    color: var(--c-blanco) !important;
}
.indicator-green{
    background: var(--c-secondary);
    color: var(--c-blanco) !important;
}

.color-action{
    color: var(--c-action);
}
.color-primary{
    color: var(--c-primary);
}
.color-secondary{
    color: var(--c-secondary);
}
.color-secondary-hover{
    color: var(--c-secondary-hover);
}
.color-scale-10{
    color: var(--c-scale-10);
}
.color-scale-20{
    color: var(--c-scale-20);
}
.color-scale-30{
    color: var(--c-scale-30);
}
.color-scale-40{
    color: var(--c-scale-40);
}
.color-scale-50{
    color: var(--c-scale-50);
}
.color-scale-60{
    color: var(--c-scale-60);
}
.color-scale-70{
    color: var(--c-scale-70);
}
.color-scale-80{
    color: var(--c-scale-80);
}
.color-scale-90{
    color: var(--c-scale-90);
}
.color-scale-100{
    color: var(--c-scale-100);
}
.color-scale-200{
    color: var(--c-scale-200);
}


.fill-action{
    fill: var(--c-action);
}
.fill-action-20{
    fill: var(--c-action-20);
}
.fill-blue{
    fill: var(--c-primary-20);
}
.fill-blanco{
    fill: var(--c-blanco);
}
.fill-verde{
    fill: var(--c-secondary-20);
}
.fill-scale-10{
    fill: var(--c-scale-10);
}

/*
    =============
    SVG ICONS
*/
.icons-svg{
	/*font-size: 1.5em;*/
    stroke-width: 7%;
    /*max-width: 47rem;*/
	
	.bs-icon{
		display: inline-block;
		fill: none;
		margin: 0.2em;
		font-size: 1em;
		width: 1em;
		stroke: currentColor;
		stroke-width: inherit;
		stroke-linecap: inherit;
		stroke-linejoin: inherit;
		overflow: visible;
	}
}


/* Labels radio - input */

.input-style-radio label{
	text-align: left;
    position: relative;
    padding-left: 30px;
    transition: all 0.3s ease;

    &:before{
        content: "";
        width: 16px;
        max-width: 16px;
        height: 16px;
        max-height: 16px;
        background: var(--c-scale-20);
        border: .2em solid var(--c-blanco);
        box-shadow: 0 0 0px 2px var(--c-scale-40);
        border-radius: 20px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        transition: all .3s ease;
    }
    
}
.input-style-radio input,
.input-style-check input{
    display: none;
}
.input-style-radio input:checked+label {
	color: var(--c-scale-80);
    font-weight: 500;
    
    &:before{
        background-color: var(--c-primary) !important;
        box-shadow: 0 0 0px 2px var(--c-primary);
    }
}

.input-style-check label{
	text-align: left;
    position: relative;
    padding-left: 30px;
    transition: all 0.3s ease;

    &:before{
        content: "";
        width: 16px;
        max-width: 16px;
        height: 16px;
        max-height: 16px;
        background: var(--c-scale-20);
        border: .2em solid var(--c-blanco);
        box-shadow: 0 0 0px 2px var(--c-scale-40);
        border-radius: 3px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: 3px auto;
        transition: all .3s ease;
    }
}
.input-style-check input:checked + label{
	color: var(--c-scale-80);
    font-weight: 500;
    &:before {
        background-color: var(--c-secondary) !important;
        box-shadow: 0 0 0px 2px var(--c-secondary), 0 0 10px 0px var(--c-secondary);
    }
}

input[type="file"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
}