.hero>img {
    min-height: 400px;
    object-fit: cover;
}
.hero--contacto>img {
    min-height: 25px;
    object-fit: cover;
    max-height: 152px;
}

.home__banner {
    background-image: url('../img/home/banner.png');
    background-size: cover;
    background-position: center;
    height: 300px;
    width: 100%;
    align-content: center;
    margin: 0 auto;
}

.hero.hero--about.hero--diaV8 {
    overflow: hidden;
}

.hero.hero--about.hero--diaV8 img {
    height: auto !important;
}

.hero.hero--about {
    height: 420px !important;
}

.hero.hero--about img {
    object-fit: cover;
    height: 100%;
}

.hero.hero--about > div {
    width: 100% !important;
    max-width: 1440px;
    left: 50%;
    transform: translateX(-50%);
}

.hero--contacto > div {
    width: 100% !important;
    max-width: 1440px;
    left: 50%;
    transform: translateX(-50%);
}
.accordion-button {
    background-color: #F9F8F7 !important;
}

.accordion-button:not(.collapsed) {
    background-color: #F9F8F7 !important;
}

.accordion__faq>.accordion-item {
    border: none !important;
    background-color: transparent !important;

}

.accordion__faq>.accordion-item>.accordion-header>button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600 !important;
    color: #000 !important;
    font-size: var(--text-md);
}

.accordion__faq>.accordion-item>.accordion-header>.accordion-button {
    box-shadow: none !important;
}
.accordion__faq__gray>.accordion-item>.accordion-header>.accordion-button.collapsed {
    background-color: #F9F8F7 !important; /* Fondo gris oscuro colapsado */
}

.accordion__faq__gray>.accordion-item>.accordion-header>.accordion-button:not(.collapsed) {
    background-color: #F9F8F7 !important; /* Fondo gris oscuro o diferente al colapsado */
}


.section__clientes {
    background: rgb(255, 191, 85);
    background: linear-gradient(0deg, rgba(255, 191, 85, 1) 0%, rgba(45, 75, 180, 1) 100%);
}

.section__clientes>.splide>.splide__track {
    width: 60%;
    margin: 0 auto;
    transition: height ease-in-out 0.6s;
}

.section__clientes .splide__arrow {
    background-color: transparent;
}

.section__clientes .splide__arrow svg {
    fill: #fff !important;
}

.list--2cols {
    column-count: 2;
    /* Divide en dos columnas */
    column-gap: 20px;
    /* Espaciado entre columnas */
}

.footer--gradient {
    height: 52px;
    width: 100%;
    background: rgb(255, 191, 85);
    background: linear-gradient(270deg, rgba(255, 191, 85, 1) 71%, rgba(45, 75, 180, 1) 91%);
}

.container__reconocimentos {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 48px;
}

button.sistema__card {
    border: none;
    background: white;
}

.section__sistemas {
    margin: 0 auto !important;
}

.section__sistemas h3{
    text-align: end;
}

.section__sistemas--content {
    display: flex;
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    justify-content: space-between !important;
    flex-wrap: wrap;
    padding: 24px 32px !important;
}

.sistema__card {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 16px;
    align-content: center;
    text-align: center;
    width: 240px;
    height: 190px;
    margin: 12px;
}


.sistema__card:hover {
    background-color: #DBDBDB;
    transition: all 0.3s ease;
}

.nav-tabs .nav-item .nav-link {
    font-size: 18px;
}

.nav-tabs .nav-link.active {
    color: black !important; 
    border: none;
    border-radius: 0;
}

/* Estilo para las pestañas no activas */
.nav-tabs .nav-link {
    color: #6c757d; /* Texto gris */
    transition: all 0.3s ease;
}

/************************** ESTILOS PAGINA DIA */
.nav-tabs-sdi .nav-link.active {
    background-color: var(--blue-sdi);
    border-bottom: 3px solid var(--blue-sdi) !important;
}
.nav-tabs-sdi .nav-link:hover {
    color: var(--blue-sdi); /* Texto negro al pasar el mouse */
}
.ul-sdi li::marker {
    color: var(--blue-sdi);
}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button.collapsed::after {
    color: var(--blue-sdi) !important; /* Color de la flecha para el estado colapsado */

}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    color: var(--blue-dia) !important; /* Color de la flecha para el estado abierto */
}


/************************** ESTILOS PAGINA COA */
.nav-tabs-coa .nav-link.active {
    background-color: var(--green-coa);
    border-bottom: 3px solid var(--green-coa) !important;
}
.nav-tabs-coa .nav-link:hover {
    color: var(--green-coa); /* Texto negro al pasar el mouse */
}
.ul-coa li::marker {
    color: var(--green-coa);
}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button.collapsed::after {
    color: var(--green-coa) !important; /* Color de la flecha para el estado colapsado */

}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    color: var(--green-coa) !important; /* Color de la flecha para el estado abierto */
}

/************************** ESTILOS PAGINA DIAENLINEA */
.nav-tabs-diaenlinea .nav-link.active {
    background-color: var(--green-diaenlinea);
    border-bottom: 3px solid var(--green-diaenlinea) !important;
}
.nav-tabs-diaenlinea .nav-link:hover {
    color: var(--green-diaenlinea); /* Texto negro al pasar el mouse */
}
.ul-diaenlinea li::marker {
    color: var(--green-diaenlinea);
}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button.collapsed::after {
    color: var(--green-diaenlinea) !important; /* Color de la flecha para el estado colapsado */

}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    color: var(--green-diaenlinea) !important; /* Color de la flecha para el estado abierto */
}
/************************** ESTILOS PAGINA SITA */
.nav-tabs-sita .nav-link.active {
    background-color: var(--orange-sita);
    border-bottom: 3px solid var(--orange-sita) !important;
}
.nav-tabs-sita .nav-link:hover {
    color: var(--orange-sita); /* Texto negro al pasar el mouse */
}
.ul-sita li::marker {
    color: var(--orange-sita);
}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button.collapsed::after {
    color: var(--orange-sita) !important; /* Color de la flecha para el estado colapsado */

}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    color: var(--orange-sita) !important; /* Color de la flecha para el estado abierto */
}
/************************** ESTILOS PAGINA SDI */
.nav-tabs-dia .nav-link.active {
    background-color: var(--blue-dia);
    border-bottom: 3px solid var(--blue-dia) !important;
}
.nav-tabs-dia .nav-link:hover {
    color: var(--blue-dia); /* Texto negro al pasar el mouse */
}
.ul-dia li::marker {
    color: var(--blue-dia);
}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button.collapsed::after {
    color: var(--blue-dia) !important; /* Color de la flecha para el estado colapsado */

}
.accordion__faq>.accordion-item>.accordion-header>.accordion-button:not(.collapsed)::after {
    color: var(--blue-dia) !important; /* Color de la flecha para el estado abierto */
}

#accordionFAQHome1 .accordion-button::after,
#accordionFAQHome2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(7063%) hue-rotate(339deg) brightness(92%) contrast(94%);
}

#accordionDIA_v8_1 .accordion-button::after,
#accordionDIA_v8_2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(46%) sepia(49%) saturate(2219%) hue-rotate(160deg) brightness(87%) contrast(101%);
}

#accordionDIAENL1 .accordion-button::after,
#accordionDIAENL2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(30%) sepia(35%) saturate(1685%) hue-rotate(120deg) brightness(90%) contrast(98%);
}

#accordionSita1 .accordion-button::after,
#accordionSita2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(24%) sepia(61%) saturate(1788%) hue-rotate(344deg) brightness(108%) contrast(99%);
}

#accordionSDIV1 .accordion-button::after,
#accordionSDIV2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(21%) sepia(87%) saturate(1365%) hue-rotate(186deg) brightness(97%) contrast(97%);
}

#accordionCOA1 .accordion-button::after,
#accordionCOA2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(4990%) hue-rotate(27deg) brightness(81%) contrast(87%);
}

#accordionOtro1 .accordion-button::after,
#accordionOtro2 .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(85%) sepia(58%) saturate(1994%) hue-rotate(330deg) brightness(104%) contrast(101%);
}

#dropProdsDesk.dropdown-menu.show {
    background-color: #FFFFFFDB;
    transform: translate(16px, 60px) !important;
}

#dropProdsDesk.dropdown-menu .dropdown-item:focus, #dropProdsDesk.dropdown-menu .dropdown-item:hover {
    color: #ffc931 !important;
    background-color: transparent !important;
}

#dropProdsDesk.dropdown-menu .dropdown-item.active, #dropProdsDesk.dropdown-menu .dropdown-item:active {
    color: var(--blue) !important;
    text-decoration: none;
    background-color: transparent !important;
}

#imgModal {
    width: 100%;
}

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

.soluciones__grid > div {
    width: 200px !important;
}

/* From Uiverse.io by gharsh11032000 */
.card-container {
    width: 250px;
    height: 218px;
    position: relative;
    border-radius: 32px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.reconocimiento_card {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: relative;
}

.reconocimiento_card .front-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    padding: 12px;
}

.reconocimiento_card .front-content img {
    width: 100px;
    height: 100px;
}

.reconocimiento_card .front-content h3 {
    font-size: var(--text-md);
}

.reconocimiento_card .content {
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    padding: 24px;
    text-align: center;
    opacity: 0;
}

.reconocimiento_card:hover .content {
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.input-descarga,
.input-descarga::placeholder {
    font-size: 14px !important;
    font-family: "Montserrat", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

.input-descarga {
    color: var(--dark-blue) !important;
}

.input-descarga::placeholder {
    color: var(--light-blue) !important;
}

.input-descarga:focus {
    border-color: var(--dark-blue);
    box-shadow: none !important;
}

.input__form {
    padding: 12px 24px !important;
    font-family: "Outfit", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 14px !important;
}

.input__form::placeholder {
    color: var(--dark-blue) !important;
}

.servad__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.servad__itm {
    /*width: 30%;*/
    align-content: center;
    position: relative;
    font-size: 25px !important;
    word-wrap: break-word;
    width: 250px;
    height: 175px;
    margin: 12px 32px;
    padding: 12px;
}

.servad__itm .servad__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    padding: 24px;
    opacity: 0;
    transition: all 0.6s ease;
    border-radius: inherit;
    align-content: center;
}

.servad__itm:hover .servad__back {
    opacity: 1;
    transition: all 0.3s ease;
}

.otrosp__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
}

.otrosp__content > div {
    width: 17% !important;
    padding: 3% 1% !important;
    margin: 0 100px;
    align-content: center;
    transition: all 0.6s ease;
}

.otrosp__content > div:hover {
    background-color: #DBDBDB;
    transition: all 0.3s ease;
    cursor: pointer;
}

.otrosp__content img {
    width: 100%;
    max-width: inherit;
}

.otrosp__content.otrosp__content--3items {
    justify-content: space-evenly !important;
}

.otrosp__content.otrosp__content--3items > div {
    margin: 0 !important;
}

.nabvar__link {
    color: var(--dark-blue) !important;
    font-weight: 400 !important;
    transition: all 0.6s ease;
}

.nabvar__link:hover {
    color: var(--yellow) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}

.nabvar__link:focus,
.nabvar__link.active {
    color: var(--light-blue) !important;
}

.nabvar__link img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(10%) saturate(3844%) hue-rotate(187deg) brightness(86%) contrast(113%);
}

.nabvar__link:hover img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(54%) saturate(1046%) hue-rotate(329deg) brightness(103%) contrast(101%);
}

.nabvar__link:focus img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(67%) saturate(5274%) hue-rotate(242deg) brightness(87%) contrast(94%);
}

.btn__contactanos--home {
    background-color: #FFF !important;
    color: var(--dark-blue) !important;
    /*padding: 24px 25px !important;*/
    transition: all 0.6s ease;
    /*width: fit-content;*/
    width: 165px;
    height: 50px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.btn__contactanos--home:hover {
    color:  #595959 !important;
    background-color: #DBDBDB !important;
    transition: all 0.3s ease;
}

.btn--diaenlinea {
    background-color:#1A9F8C;
    transition: all 0.6s ease;
}

.btn--diaenlinea:hover {
    background-color: #0D4D46;
    transition: all 0.3s ease;
}

.tab-pane ul {
    padding: 0 0 0 20px !important;
}

#carruselOpiniones .splide__arrow {
    top: 100px;
}

#carruselOpiniones .splide__slide p,
#carruselOpiniones .splide__slide li {
    color: #FFF !important;
    font-size: 16px;
}

.footer__link:hover {
    filter: brightness(0) saturate(100%) invert(58%) sepia(31%) saturate(3327%) hue-rotate(202deg) brightness(105%) contrast(104%);
}

.noshace__item {
    position: relative;
    border: none;
}

.noshace__item:hover .noshace__item--normal {
    opacity: 0.5;
    transition: all 0.3s ease;
}

.noshace__item:hover .noshace__item--hover {
    opacity: 0.8;
    transition: all 0.3s ease;
    cursor: pointer;
}

.noshace__item--normal {
    height: 100%;
    opacity: 1;
    transition: all 0.6s ease;
}

.noshace__item--hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #DBDBDB;
    padding: 32px 24px;
    opacity: 0;
    text-align: center;
    transition: all 0.6s ease;
}

.noshace__item:focus .noshace__item--hover{
    background-color: #595959;
    opacity: 0.8;
}

.modal__unicos {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: -1;
    opacity: 0;
    transition: all 0.6s ease;
}

.modal__unicos > div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*padding: 24px;*/
    width: 100%;
    max-width: 720px;
    text-align: center;
    background-color: transparent;
}

.modal__unicos.active {
    z-index: 1000;
    opacity: 1;
    transition: all 0.6s ease;
}

.splide__noshace--desc {
    padding: 12px 24px;
    background-color: var(--dark-blue);
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.splide__noshace--desc h3,
.splide__noshace--desc p {
    color: #FFF;
}

.splide__noshace--itm {
    position: relative;
    height: 100%;
}

#dropProdsDesk {
    top: 52px !important;
}

#splideUnicosModal .splide__arrows {
    display: flex;
    justify-content: center;
}

#splideUnicosModal .splide__arrows button {
    background-color: #DBDBDB;
    color: var(--dark-blue);
    border: 2px solid #FFF;
    border-radius: 50%;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px;
    transition: all 0.6s ease;
    opacity: 0.85;
}

#splideUnicosModal .splide__arrows button:hover {
    background-color: #595959;
    transition: all 0.3s ease;
}

#splideUnicosModal .splide__arrows button:hover i {
    color: white;
}

#splideUnicosModal .splide__arrow {
     position: static;
    transform: none;
    width: auto;
    opacity: 1;
}

.aviso__priv {
    background: rgb(255,191,85);
    background: -moz-linear-gradient(321deg, rgba(255,191,85,1) 23%, rgba(45,75,180,1) 91%);
    background: -webkit-linear-gradient(321deg, rgba(255,191,85,1) 23%, rgba(45,75,180,1) 91%);
    background: linear-gradient(321deg, rgba(255,191,85,1) 23%, rgba(45,75,180,1) 91%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffbf55",endColorstr="#2d4bb4",GradientType=1);
}

#splideClientesListHome > .splide__slide > img {
    aspect-ratio: 3/2 !important;
    object-fit: contain !important;
}

.alcances__row {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    margin: 0 12px;
}

.accordion-header > button.accordion-button.outfit-700 {
    color: var(--dark-blue) !important;
}

.btn--soporte {
    width: 60px;
    height: 60px;
    border: none;
    background-color: transparent;
    position: fixed;
    bottom: 25%;
    right: 80px;
}

.btn--sita {
    background-color: #A9411D;
    transition: all 0.6s ease;
}

.btn--sita:hover {
    background-color: #C13A1C;
    transition: all 0.3s ease;
}

.btn--coa {
    background-color: #093B15 !important;
    transition: all 0.3s ease;
}

.btn--coa:hover {
    background-color: #037C35 !important;
    transition: all 0.6s ease;
}

.btn--sdi {
    background-color: #3B9ACA;
    transition: all 0.6s ease;
}

.btn--sdi:hover {
    background-color: var(--dark-blue);
    transition: all 0.3s ease;
}

.img__soporte--first {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 0.6s ease;
}

#modalCloseContacto,
#modalCloseDescargas {
    filter: brightness(0) saturate(100%) invert(23%) sepia(63%) saturate(3304%) hue-rotate(231deg) brightness(86%) contrast(95%);
    opacity: 1;
    border: 3px solid var(--light-blue);
    border-radius: 50%;
    padding: 8px;
}

#modalCloseContacto:hover,
#modalCloseDescargas:hover {
    filter: brightness(0) saturate(100%) invert(57%) sepia(86%) saturate(1353%) hue-rotate(198deg) brightness(99%) contrast(106%);
    border: 3px solid #7c9bff;
}

.btn--soporte:hover .img__soporte--first {
    opacity: 0;
    transition: all 0.3s ease;
}

@media(max-width: 1023px) {
    .soluciones__grid {
        grid-template-columns: repeat(6, 1fr)
    }

    .soluciones__grid > div {
        grid-column: span 2;
    }

    .soluciones__grid > div:nth-child(4) {
        grid-column: 2 / 4;
    }
}

@media (max-width: 992px) {

    .otrosp__content > div {
        width: 40% !important;
        margin: 12px auto !important;
    }

    .section__sistemas--content {
        justify-content: center !important;
    }

    .clientes__img {
        width: 100%;
    }

    .otrosp__content.otrosp__content--3items > div {
        margin: 20px !important;
    }
}

@media (max-width: 768px) {
    .section__clientes>.splide>.splide__track {
        width: 100%;
    }

    .container__reconocimentos >  div {
        width: 45%;
    }

    .nav-tabs .nav-item {
        width: 100%;
    }

    .soluciones__grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .soluciones__grid > div:nth-child(4) {
        grid-column: span 2;
    }

    .soluciones__grid > div:nth-child(5) {
        grid-column: 2 / 4;
    }

    .servad__itm {
        margin: 12px;
    }

    .otrosp__content > div {
        width: 100% !important;
        margin: 12px auto !important;
        padding: 24px !important;
    }

    .otrosp__content > div > img {
        width: auto;
    }

    .otrosp__content {
        display: grid;
        grid-template-rows: 1fr 1fr;
    }

    .otrosp__content.otrosp__content--3items > div {
        margin: 20px 0 !important;
    }
}

@media (max-width: 600px) {
    .section__sistemas--content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .container__reconocimentos >  div {
        width: 100%;
    }

    .soluciones__grid {
        grid-template-columns: 1fr;
    }

    .soluciones__grid > div {
        width: auto !important;
    }

    .soluciones__grid > div:nth-child(5) {
        grid-column: auto;
    }

    /*#splideUnicosModal .splide__track {*/
    /*    height: 520px;*/
    /*}*/

    .btn--soporte {
        right: 20px;
    }

    .btn--faqs {
        display: block !important;
        margin: 24px 0;
    }

    .list--2cols {
        column-count: 1;
        /* Divide en dos columnas */
        column-gap: 20px;
        /* Espaciado entre columnas */
    }

    .splide__noshace--itm {
        position: static;
        display: grid;
        grid-template-rows: 1fr 1fr;
        max-height: 520px;
    }

    /*.splide__noshace--itm img {*/
    /*    height: 100% !important;*/
    /*}*/

    .splide__noshace--itm .splide__noshace--desc {
        position: static;
        align-content: center;
    }

    .splide__noshace--itm .splide__noshace--desc p {
        font-size: 12px !important;
    }
}