:root {

    /* Tipografias */
    --font-1: 'Archivo', sans-serif;
    --font-2: 'Poppins', sans-serif;

    /* Font size */
    --body-size: 16px;
    --h1-size: 2.4rem;
    --h2-size: 1.6rem;
    --h3-size: 1.4rem;
    --h4-size: 1.2rem;
    --h5-size: 1.1rem;
    --h6-size: 1rem;

    /* Colores */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-yellow: #ffe13c; 
    --color-orange: #ffce3b; 
    --color-purple: #9247ff;

    /* Colores con variaciones */
    --color-gray-50: #f7fafe;
    --color-gray-100: #f0f2f4;
    --color-gray-200: #e3e5e8;
    --color-gray-300: #c7cdd6;
    --color-gray-400: #adb1ba;
    --color-gray-500: #91939e;
    --color-gray-600: #6c7077;
    --color-gray-700: #4b4f57;
    --color-gray-900: #1a1c21;
    
    /* Filters */
    --filter-white: invert(1);
    --filter-gray-50: invert(95%) sepia(6%) saturate(230%) hue-rotate(175deg) brightness(104%) contrast(99%);
    --filter-gray-100: invert(89%) sepia(5%) saturate(310%) hue-rotate(215deg) brightness(102%) contrast(94%);
    --filter-gray-200: invert(80%) sepia(8%) saturate(288%) hue-rotate(191deg) brightness(96%) contrast(92%);
    --filter-gray-300: invert(64%) sepia(6%) saturate(260%) hue-rotate(180deg) brightness(95%) contrast(92%);
    --filter-gray-500: invert(55%) sepia(3%) saturate(303%) hue-rotate(181deg) brightness(92%) contrast(88%);

    /* Border radius */
    --border-color: var(--color-gray-200);
    --border-radius: 1rem;
}

/* Fonts styles */

html, body {color: var(--color-gray-500); font-size: var(--body-size); font-family: var(--font-1); line-height: 1.35; }
h1, h2, h3, h4, h5, h6, p {margin: 0;}
h1, .h1 {font-size: var(--h1-size); font-family: var(--font-2);font-weight: bold;line-height: 1.3;}
h2, .h2 {font-size: var(--h2-size); font-family: var(--font-2);font-weight: bold;line-height: 1.3;}
h3, .h3 {font-size: var(--h3-size); font-family: var(--font-1);font-weight: bold;line-height: 1.3;}
h4, .h4 {font-size: var(--h4-size); font-family: var(--font-1);font-weight: bold;line-height: 1.3;}
h5, .h5 {font-size: var(--h5-size); font-family: var(--font-1);font-weight: bold;line-height: 1.2;}
h6, .h6 {font-size: var(--h6-size); font-family: var(--font-1);font-weight: bold;line-height: 1.2; }
p {font-size: var(--body-size);line-height: 1.4;}
@media screen and (max-width:768px) {
    h1, .h1 { font-size: var(--h2-size); }
    h2, .h2 { font-size: var(--h3-size); }
}

/* Others */
section { padding-top: 6rem; padding-bottom: 6rem; position: relative; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important; }
space { width: 100%; height: .5rem; display: block; }
space[h="2"] { height: 1rem; }
space[h="3"] { height: 1.5rem; }
space[h="4"] { height: 2rem; }
space[h="5"] { height: 2.5rem; }
space[h="6"] { height: 3rem; }
.radius { border-radius: 50%; }
.radius-1 { border-radius: 1rem; }
.radius-2 { border-radius: 2rem; }
.tt-up { text-transform: uppercase; }
.ls-1 { letter-spacing: .1em; }
.ls-2 { letter-spacing: .2em; }
.lh-1 { line-height: 1; }
hr {background-color: var(--border-color);opacity: 1;}
::placeholder { opacity: 0.8; }
::-webkit-scrollbar { display: none; }
.empty { display: none; }
.link { text-decoration: underline; color: inherit; }
.link:hover { cursor: pointer; text-decoration: underline; }
ul, li { margin: 0; padding: 0; list-style: none }
.bold { font-weight: bold; }
.circle { border-radius: 50% }
.box { padding: 1rem; position: relative; }
.ff-1 { font-family: var(--font-1); }
.ff-2 { font-family: var(--font-2); }
.disabled { pointer-events: none; }
.disabled:hover { cursor: default; }
*:focus { outline: none; }
figure { margin: 0; }
.ov-hidden { overflow: hidden !important }
.container.w-100 { max-width: 100%; padding: 0; }

/* Botones */

.btn { border-radius: .5rem; line-height: 1; padding: 0.75rem; min-width: unset; font-size: 1rem; letter-spacing: 0; gap: .25rem; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: .1s ease all; user-select: none; -webkit-user-select: none; position: relative; text-align: center; overflow: hidden; font-family: var(--font-2); cursor: pointer; }
.btn:hover {text-decoration: none;cursor: pointer;}

.btn.bg-yellow:hover {background-color: var(--color-yellow)!important;}
.btn.bg-white:hover {background-color: var(--color-white)!important;}
.btn.bg-black:hover {background-color: var(--color-black)!important;}

.btn.bg-orange:hover. { box-shadow: 0 .5rem .5rem rgba(255, 125, 91, .2) }
.btn.bg-yellow:hover { box-shadow: 0 .5rem .5rem rgba(255, 232, 7, .2) }
.btn.bg-white:hover { box-shadow: 0 .5rem .5rem rgba(131, 124, 173, 0.2) }
.btn.bg-black:hover { box-shadow: 0 .5rem .5rem rgba(65, 65, 65, 0.2) }

.btn.bg-yellow:link,.btn.bg-yellow:visited {color: #000; text-decoration: none;}

/* Colors */
.c-white { color: var(--color-white) !important }
.c-black { color: var(--color-black) !important }
.c-orange { color: var(--color-orange) !important; }
.c-yellow { color: var(--color-yellow) !important; }
.bg-white { background-color: var(--color-white) !important }
.bg-yellow { background-color: var(--color-yellow) !important; }
.bg-orange { background-color: var(--color-orange) !important; }
.bg-black { background-color: var(--color-black) !important }

/* Filters */
.f-white { filter: var(--filter-white) !important }
.f-gray { filter: var(--filter-gray-300) !important }
.f-orange { filter: var(--filter-orange) !important }
.f-yellow { filter: var(--filter-yellow-500) !important }

/**/
.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; }
.vertical-line { position: relative; text-align: center; height: 6rem; }
.vertical-line:before { content: ""; width: 1px; height: auto; top: 0; bottom: 0; position: absolute; left: 0; right: 0; margin: auto; background-color: #e2e2e2; }

/* Icons */
.icon { background-position: center; background-size: contain; display: inline-block; }
.icon-services { background-image: url(../img/icon-services.svg); background-size: cover; }
.icon-services-1 { background-position: 0 0; }
.icon-services-2 { background-position: 9.1% 0; }
.icon-services-3 { background-position: 18.2% 0; }
.icon-services-4 { background-position: 27.3% 0; }
.icon-services-5 { background-position: 36.4% 0; }
.icon-services-6 { background-position: 45.5% 0; }
.icon-services-7 { background-position: 54.6% 0; }
.icon-services-8 { background-position: 63.7% 0; }
.icon-services-9 { background-position: 72.8% 0; }
.icon-services-10 { background-position: 81.9% 0; }
.icon-services-11 { background-position: 91% 0; }
.icon-services-12 { background-position: 100% 0; }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: flex; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: auto; margin: 0; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; }
.slick-arrow.slick-hidden { display: none; }

/**/
.accordeon-list { list-style: none; margin: 0; padding: 0; }
.accordeon-list li { padding: 1.5rem; background-color: #fff; border-radius: 2rem; margin: 1rem 0; text-align: left; }
.accordeon-list li:hover { cursor: pointer; }
.accordeon-list li p:last-child { margin: 0; }
.accordeon-list li h4 { margin: 0; position: relative; padding-right: 2rem; color: #545e5e; }
.accordeon-list li h4 i { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; transform: rotate(225deg); transition: .3s ease all; width: 1.5rem; width: 1.5rem; filter: invert(54%) sepia(14%) saturate(505%) hue-rotate(170deg) brightness(88%) contrast(90%); }
.accordeon-list li h4 + div { overflow: hidden; margin-top: 0; transition: .3s ease all; }
.accordeon-list li h4 + div { margin-top: .5rem; }
.accordeon-list li.hidden h4 i { transform: rotate(0deg); }
.accordeon-list li.hidden h4 + div { height: 0 !important; overflow: hidden; margin-top: 0; }

/**/
header { padding-top: 2rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 1; }
header .bx {background-color: #fff;padding: 1rem;border-radius: 1rem;/* box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.1); */}
header .logo { height: 3.5rem; }
header nav a { padding: .75rem; color: #000; }
header nav a:hover { color: #6e6d7a; text-decoration: none; }
header nav .social { margin-right: .5rem; }

/**/
footer { padding-top: 2rem; padding-bottom: 2rem; font-size: .85rem; background-color: #000; }
footer .b { text-align: right; }
footer .link { margin: 0 .25rem; }

/* Modals */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; justify-content: center; }
.modal .box { border-radius: 1rem 1rem; background-color: #fff; position: relative; padding: 2rem; }
.modal.anim-in { -webkit-animation: anim_modal_in linear .3s 1 forwards; }
.modal.anim-out { -webkit-animation: anim_modal_out linear .3s 1 forwards; }
@keyframes anim_modal_in {
    0% { opacity: 0; transform: translateY(8rem); }
    100% { opacity: 1; transform: none; }
}
@keyframes anim_modal_out {
    0% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(8rem); }
}
.modal.bottom { align-items: flex-end; }
.modal.bottom .box { border-radius: 1rem 1rem 0 0; }
.modal.legal p {margin-bottom: 1rem;}
.modal.page { display: block !important; }
.modal.page .btn-close { top: 0; }
.modal.page .box { top: 3rem; padding-bottom: 0; bottom: 0; border-radius: 1rem 1rem 0 0; overflow: scroll; position: absolute; left: 0; right: 0; padding-left: 0; padding-right: 0; }
.modal.page .a { margin-bottom: 1.5rem; position: relative; padding-left: 3rem; }
.modal.page .a .h5 { color: #000;margin: 0;display: flex;flex-direction: row;align-items: center;gap: .25rem; }
.modal.page .a figure { overflow: hidden; border-radius: 50%; position: absolute; width: 2.5rem; height: 2.5rem; top: 0; left: 0; background-color: #f2f5f8; }
.modal.page .a figure img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }
.modal.page .b { }
.modal.page .b img { width: 100%; border-radius: 0; }
.modal.page .b video { object-fit: cover; }
.modal.page .slider-02 { padding: 1rem 0; }
.modal.page .slider-01 { pointer-events: none; border-radius: .5rem; overflow: hidden; }
.modal.page .slider-02 img { margin: .5rem; border-radius: .5rem; object-fit: cover; }
.modal.page .slider-02 .slick-current { box-shadow: 0 0 0 0.25rem var(--color-yellow); }
.modal.page .c { padding: 1rem 0; }
.modal.page .c ul { padding-left: .75rem; }
.modal.page .c ul li { list-style: disc; margin-bottom: .75rem; }
.modal.page .c ul li:last-child { margin: 0 }
.modal.page a { text-decoration: underline; color: inherit; }
.modal.page a:hover { cursor: pointer; }
.modal.page .d { text-align: center; margin-top: 4rem; padding-bottom: 2rem; position: relative; }
.modal.page .d:before { content: ""; display: block; height: 1px; background-color: #dbe1e7; position: absolute; top: 0; left: 0; right: 0; }
.modal.page .d figure { height: 5rem; width: 5rem; display: inline-block; border-radius: 50%; overflow: hidden; margin-bottom: .5rem; margin-top: -2.5rem; box-shadow: 0 0 0 .5rem #fff; position: relative; }
.modal.page .d figure img { width: 100%; height: 100%; object-fit: cover; }
.modal .btn-close { position: absolute; top: -3rem; width: 3rem; right: 0; line-height: 3rem; color: var(--color-orange); font-size: 2rem; text-align: center; }
.modal .btn-close:hover { cursor: pointer; }
.modal .top-figure { height: 5rem; width: 5rem; border-radius: 50%; overflow: hidden; position: absolute; top: -2.5rem; left: 0; right: 0; margin: auto; box-shadow: 0 0 0 5px #fff; background-color: #fff; }
.modal .top-figure img { width: 100%; height: 100%; object-fit: cover; }
.modal .top-figure + * { margin-top: 1rem; }
.modal .content { max-height: 60vh; overflow: scroll; }
.modal .required { display: none; }
.modal.required .required { display: block; }
.modal.required .btn-close { display: none; }
.modal-bg { z-index: 8; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); }
.modal-bg, .modal { display: none; visibility: hidden; opacity: 0; transition: .3s linear all; }
.modal-bg.visible, .modal.visible { display: flex; visibility: visible; opacity: 1; }
.modal-bg.anim-in { -webkit-animation: anim_bg_modal_in .3s 1 linear forwards; }
.modal-bg.anim-out { -webkit-animation: anim_bg_modal_out .3s 1 linear forwards; }

@media (max-width:768px) {
    html { font-size: 15px; }
    section { padding-top: 3rem; padding-bottom: 3rem; }
    header {padding-top:1rem}
    header .logo {height: 3rem;}
    header nav { display: none; }
    header .icon-menu {color: #000;font-size: 1.5rem;text-align: center;}
    header .icon-menu.right { right: 1rem; }
    nav { background-color: #fff; padding: 0; text-align: center; }
    nav a { color: #000; font-weight: bold; width: 100%; display: block; text-align: center; border-radius: 0.5rem; margin: 0 !important; font-size: 1.1rem; }
    nav .social { display: block; margin: 1.5rem 0 1rem 0; }
    nav .social a { display: inline-block; width: auto; border: 0; padding: 0; background-color: transparent; }
    nav .social a i { color: #fff; padding: .5rem; border-radius: 50%; margin: 0 .25rem; width: 2.5rem; height: 2.5rem; display: inline-flex; justify-content: center; align-items: center; background-color: #eff3f7; }
    nav .social a .bi-instagram { background-color: #f04190; }
    nav .social a .bi-linkedin { background-color: #1769ff; }
    nav .social a .bi-twitter { background-color: #00aced; }
    nav .social a .bi-whatsapp { background-color: #05cc47; }
    nav .social a .bi-envelope { background-color: #ff4a4a; }
    header .justify-content-between {}
    footer * { text-align: center !important; }
    .modal { align-items: flex-end; }
    .modal .box { padding: 1.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 1rem 1rem 0 0; }
    .modal.page .slider-01 { border-radius: 0 }
    .modal.page .a { padding-left: 4.5rem; }
    .modal.page .a figure { left: 1rem; }
    .modal.page .c { padding: 1rem; }
    .modal.page .d:before { left: 1rem; right: 1rem; }
}