:root {
    --medium-blue: #306DB6;
    
    --grey: #637381;
    --white-input: #F9F9FF;
    --blue: #3636D8;
    
    --blue-dark-content: #071642;
    
    --blue-dia: #3DA4D0;
    --green-coa: #A3B656;
    --blue-sdi: #065091;
    --orange-sita: #C13A1C;
    --green-diaenlinea: #026A47;
    
    --text-xs: 12px;
    --text-sm: 16px;
    --text-md: 20px;
    --text-lg: 28px;
    --text-xl: 40px;
    --text-2xl: 64px;
    
    /* Colores actualizados por el cliente */
    --light-blue: #3636D8;
    --dark-blue: #071642;
    --light-grey: #F9F8F7;
    --yellow: #FFC931;
    --orange: #F7A923;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--dark-blue);
}

body {
    position: relative;
}

#header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
}

.text--xs {
    font-size: var(--text-xs) !important;
}

.text--sm {
    font-size: var(--text-sm) !important;
}

.text--md {
    font-size: var(--text-md) !important;
}

.text--lg {
    font-size: var(--text-lg) !important;
}

.text--xl {
    font-size: var(--text-xl) !important;
}

.text--2xl {
    font-size: var(--text-2xl) !important;
}

.text--70px {
    font-size: 70px;
}

.text--60px {
    font-size: 60px;
}

.text--50px  {
    font-size: 50px;
}

.text--45px {
    font-size: 45px;
}

.text--40px {
    font-size: 40px;
}

.text--35px {
    font-size: 35px;
}

.text--30px {
    font-size: 30px;
}

.text--25px {
    font-size: 25px;
}

.text--24px {
    font-size: 24px;
}

.text--18px {
    font-size: 18px;
}

.text--12px {
    font-size: 12px;
}

.text--bold {
    font-weight: bold;
}

.text--white {
    color: white;
}

.text--grey {
    color: var(--grey);
}

.text--blue {
    color: var(--blue);
}

.text--mediumBlue {
    color: var(--medium-blue);
}

.text--green-coa {
    color: var(--green-coa);
}
.text--blue-sdi {
    color: var(--blue-sdi);
}
.text--orange-sita {
    color: var(--orange-sita);
}
.text--green-diaenlinea {
    color: var(--green-diaenlinea);
}

.text--dark-blue {
    color: var(--dark-blue);
}

.text-bdc {
    color: var(--blue-dark-content) !important;
}

.text--yellow {
    color: var(--yellow);
}

.text--orange {
    color: var(--orange);
}

.text--justify {
    text-align: justify;
}

a {
    text-decoration: none !important;
}

.a--dark-blue {
    color: var(--dark-blue);
    transition: color 0.6s ease-in-out;
}

.a--dark-blue:hover {
    color: var(--medium-blue);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.a--black {
    color: black;
    transition: color 0.6s ease-in-out;
}

.a--black:hover {
    color: var(--blue);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.bg--darkBlue {
    background-color: var(--dark-blue);
}

.bg--mediumBlue {
    background-color: var(--medium-blue);
}

.bg--green-coa {
    background-color: var(--green-coa);
}

.bg--blue-sdi {
    background-color: var(--blue-sdi);
}
.bg--green-diaenlinea {
    background-color: var(--green-diaenlinea);
}
.bg--orange-sita {
    background-color: var(--orange-sita);
}

.bg--white-input {
    background-color: var(--white-input);
}

.bg--lightGrey {
    background-color: var(--light-grey);
}

.bg--hueso {
    background-color: #F9F8F7;
}

.btn {
    border-radius: 10px;
    padding: 2% 5%;
    transition: all 0.5s ease-in-out;
    text-decoration: none;
    color: inherit; 
}

.btn:hover {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.general-button {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 14px !important;
    padding: 20px 32px !important;
    width: fit-content;
}

.general-button:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
}

.btn--vmas {
    color: #3636D8 !important;
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    width: fit-content;
    border: 2px solid #3636D8 !important;
    transition: background-color 0.6s ease-in-out !important;
}

.btn--vmas:hover {
    border: 1px solid #7D9AFF !important;
    color: #7D9AFF !important;
    transition: background-color 0.6s ease-in-out !important;
}

.btn--hero {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 18px !important;
    width: 185px !important;
    height: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.btn--contactanos {
    background-color: var(--yellow) !important;
    color: var(--dark-blue) !important;
    padding: 20px 30px !important;
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 14px !important;
    transition: background-color 0.6s ease-in-out !important;
}

.btn--contactanos:hover {
    background-color: #FFDE80 !important;
    color: var(--light-blue) !important;
    transition: background-color 0.3s ease-in-out !important;
}

.btn__about--vermas {
    color: var(--dark-blue) !important;
    background-color: var(--yellow) !important;
    border: 2px solid var(--yellow) !important;
    transition: background-color 0.6s ease-in-out !important;
}

.btn__about--vermas:hover {
    color: var(--light-blue) !important;
    background-color: #FFF !important;
    border: 2px solid var(--light-blue) !important;
    transition: background-color 0.3s ease-in-out !important;
}

.btn__about--contactanos {
    color: var(--yellow) !important;
    background-color: transparent !important;
    border: 2px solid var(--yellow) !important;
    transition: background-color 0.6s ease-in-out !important;
}

.btn__about--contactanos:hover {
    color: #FFF !important;
    background-color: transparent !important;
    border: 2px solid #FFF !important;
    transition: background-color 0.3s ease-in-out !important;
}

.btn--rounded {
    border-radius: 50px !important;
}

.btn--square {
    aspect-ratio: 1/1;
}

.rounded--md {
    border-radius: 24px !important;
}


.btn--diablue {
    background-color: #3DA4D0 !important;
    color: white !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--diablue:hover {
    background-color: var(--dark-blue) !important;
    color: white !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--yellow {
    background-color: var(--yellow) !important;
    color: #071642 !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--yellow:hover {
    background-color: #071642 !important;
    color: var(--yellow) !important;
    transition: background-color 0.6s ease-in-out;
}



.btn--white {
    background-color: white !important;
    color: var(--dark-blue) !important;
    border: 1px solid var(--dark-blue) !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--white:hover {
    background-color: var(--dark-blue) !important;
    color: white !important;
    transition: background-color 0.3s ease-in-out;
}

.btn--mediumBlue {
    background-color: white !important;
    color: var(--medium-blue) !important;
    border: 1px solid var(--medium-blue) !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--mediumBlue:hover {
    background-color: var(--dark-blue) !important;
    color: white !important;
    transition: background-color 0.3s ease-in-out;
}

.btn--v8 {
    background-color: white;
    color: #3DA4D0 !important;
    border: 1px solid #3DA4D0 !important;
}

.btn--v8:hover {
    background-color: #3DA4D0 !important;
    color: white !important;
    transition: background-color 0.3s ease-in-out;
}

.btn--blue-sdi {
    background-color: white !important;
    color: var(--blue-sdi) !important;
    border: 1px solid var(--blue-sdi) !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--blue-sdi:hover {
    background-color: var(--dark-blue) !important;
    color: white !important;
    transition: background-color 0.3s ease-in-out;
}
.btn--orange-sita {
    background-color: white !important;
    color: var(--orange-sita) !important;
    border: 1px solid var(--orange-sita) !important;
    transition: background-color 0.6s ease-in-out;
}
.btn--green-diaenlinea {
    background-color: white !important;
    color: var(--green-diaenlinea) !important;
    border: 1px solid var(--green-diaenlinea) !important;
    transition: background-color 0.6s ease-in-out;
}
.btn--green-coa {
    background-color: white !important;
    color: var(--green-coa) !important;
    border: 1px solid var(--green-coa) !important;
    transition: background-color 0.6s ease-in-out;
}


.btn--transparent {
    background-color: transparent !important;
    color: var(--yellow) !important;
    border: 1px solid var(--yellow) !important;
    transition: background-color 0.6s ease-in-out;
}

.btn--transparent:hover {
    background-color: rgba(227, 146, 40, 0.3) !important;
    transition: background-color 0.3s ease-in-out;
}

.btn__contactanos--de:hover {
    background-color: #7D9AFF !important;
    border: 1px solid #7D9AFF !important;
}

.grid--2cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid--2colsDL {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.grid--3cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px;
}


.grid--4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.grid--5cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.grid--6rows {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 8px;
}

.gap--24 {
    gap: 24px !important;
}



.w--50 {
    width: 50% !important;
}

.w--75 {
    width: 75% !important;
}

.w--64 {
    width: 64px;
}

.w--128 {
    width: 128px;
}

.w--480 {
    width: 480px;
}

.mw--100 {
    max-width: 100px;
}

.mw--120 {
    max-width: 120px;
}

.mw--240 {
    max-width: 240px;
}

.mw--280 {
    max-width: 280px !important;
    margin: 0 auto;
}

.mw-400 {
    max-width: 400px;
    margin: 0 auto;
}

.mw--480 {
    max-width: 480px;
    margin: 0 auto;
}

.mw--600 {
    max-width: 600px;
    margin: 0 auto;
}

.mw--720 {
    max-width: 720px;
}

.mw--960 {
    max-width: 960px;
}

.mw--1080 {
    max-width: 1080px;
}

.mw--1440 {
    max-width: 1440px;
    margin: 0 auto;
}

.mw--1000 {
    max-width: 1000px;
    margin: 0 auto;
}

.mw--1100 {
    max-width: 1100px;
    margin: 0 auto;
}

.h--64 {
    height: 64px;
}

.h--320 {
    height: 320px;
}

.h--fit {
    height: fit-content;
}

.h--screen {
    height: 100vh;
}

.w--fit {
    width: fit-content !important;
}

.w--screen {
    width: 100vw;
}

.list--unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}

.img--logo {
    width: 92px;
    height: 29px;
}

.p--container {
    padding: 120px 60px;
}

.py--100 {
    padding: 100px 0;
}

.py--80 {
    padding: 80px 0;
}

.hr--r{
    border-right: 1px solid var(--dark-blue)
}

.btnSlider{
    background-color: #DBDBDB !important; 
    height:80px !important; 
    width: 80px !important; 
    top:40% !important; 
}

.border--light-grey{
    border: solid var(--light-grey);
    border-radius: 10px;
}


/* Fonts */
.inter-thin {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.inter-regular {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.inter-medium {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.inter-semibold {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.inter-bold {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.outfit-100 {
     font-family: "Outfit", serif;
     font-optical-sizing: auto;
     font-weight: 100;
     font-style: normal;
 }

.outfit-400 {
     font-family: "Outfit", serif !important;
     font-optical-sizing: auto !important;
     font-weight: 400 !important;
     font-style: normal !important;
 }

.outfit-500 {
     font-family: "Outfit", serif;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
 }

.outfit-600 {
     font-family: "Outfit", serif;
     font-optical-sizing: auto;
     font-weight: 600;
     font-style: normal;
 }

.outfit-700 {
     font-family: "Outfit", serif !important;
     font-optical-sizing: auto;
     font-weight: 700;
     font-style: normal;
}

.outfit-800 {
     font-family: "Outfit", serif;
     font-optical-sizing: auto;
     font-weight: 700;
     font-style: normal;
}

.mont-thin {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 100 !important;
    font-style: normal !important;
}

.mont-400 {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.mont-500 {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 500 !important;
    font-style: normal !important;
}

.mont-600 {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

.mont-700 {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.mont-800 {
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

.ul--yellow > li::marker {
    color: var(--yellow);
}

div#splideUnicos > div.splide__track {
    height: 100% !important;
}

div#containerLoQue {
    padding: 0 1rem 0 0;
}

textarea {
    resize: none !important;
}

.break--all {
    word-break: break-all;
}
@media (max-width: 1400px) {
    .grid--5cols {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

@media (max-width: 990px) {
    .grid--2cols {
        grid-template-columns: 1fr;
    }

    .grid--4cols {
        grid-template-columns: 1fr 1fr;
    }

    .w--50 {
        width: 100%;
    }

    .w--480 {
        width: 100%;
    }

    .p--container {
        padding: 24px;
    }
}

@media (max-width: 767px) {
    .grid--4cols {
        grid-template-columns: 1fr;
    }
    .grid--5cols {
        grid-template-columns: 1fr 1fr;
    }
    .hr--r{
        border-right: none;
    }
    .text--2xl {
        font-size: var(--text-xl);
    }

    .text--xl {
        font-size: var(--text-md);
    }

    .text--70px {
        font-size: 32px;
    }

    .text--60px {
        font-size: 30px;
    }

    .text--50px {
        font-size: 30px;
    }

    .text--45px {
        font-size: 32px;
    }

    .text--40px {
        font-size: 30px;
    }

    .text--35px {
        font-size: 20px;
    }


    .grid--3cols {
        grid-template-columns: 1fr 1fr;
    }

    div#containerLoQue {
        padding: 0;
    }

    .grid--2colsDL {
        grid-template-columns: 1fr;
        margin: 0 auto;
        justify-items: center;
    }
}

@media (max-width: 520px) {
    .grid--3cols {
        grid-template-columns: 1fr;
    }
    .grid--5cols {
        grid-template-columns: 1fr;
    }

    .text--sm--20px {
        font-size: 20px !important;
    }

    p.text-sm--justify {
        text-align: justify !important;
    }
}

@media (max-width: 460px) {
    

    .grid--2colsDL .sistema__card img {
        width: 100%;
    }

}