*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
  font-family: "Jost", sans-serif;
  font-style: normal;
}

nav{
    
    z-index: 999;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    padding-left: 3rem;
    padding-right: 3rem;
}

.navSombra{
    -webkit-box-shadow: 0px 3px 25px -14px #000000; 
    box-shadow: 0px 3px 25px -14px #000000;
}

nav a{
    text-decoration: none;
    color: #707070;
    font-size: 20px;
    font-weight: 400;
}

nav strong{
    color: #707070;
    font-size: 20px;
}

.buttonOne{
    background-color: #534CDA;
    color: white;
    border: none;
    font-weight: 600;
    font-size: 20px;
    border-radius: 25px;
    padding: 5px 20px;
    width: max-content;
}

.buttonTwo{
    background-color: #534CDA;
    color: white;
    border: none;
    font-weight: 600;
    font-size: 20px;
    border-radius: 25px;
    padding: 10px 55px;
    width: max-content;
}

.buttonFour{
    background-color: #8d8d8d;
    color: white;
    border: none;
    font-weight: 600;
    font-size: 20px;
    border-radius: 25px;
    padding: 8px 65px;
    width: max-content;
}

.buttonFive{
    background-color: #F2C335;
    color: white;
    border: none;
    font-weight: 600;
    font-size: 20px;
    border-radius: 25px;
    padding: 8px 65px;
    width: max-content;
}

.containerApp{
    padding-left: 5%;
    padding-right: 5%;
}

.containerApp video{
    width: 40%;
}


@media screen and (max-width: 850px){
    .containerApp{
        flex-direction: column;
    }
    .containerApp video{
        width: 100%;
        margin-top: 20px;
    }
}

.bgContainer{
    background-image: url("./img/bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 70px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.containerBgThree{
    background-image: url("./img/bg3.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 70px;
    padding-top: 100px;
    padding-bottom: 130px;
}

.containerPreguntas{
    background-image: url("./img/bg2.jpg");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
}



.accordion-button{
    background-color: #2C2C2C!important;
    color: white!important;
    font-size: 35px!important;
}

.accordion-item{
    border: none!important;
    background-color: #2C2C2C!important;
}

.accordion-button::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(255, 255, 255, 1);transform: ;msFilter:;'%3E%3Cpath d='M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'%3E%3C/path%3E%3C/svg%3E")!important;
    height: 50px!important;
    width: 50px!important;
    background-size: contain!important;
}

.accordion-body{
    background-color: #2C2C2C!important;
    color: white!important;
}

.accordion-button:focus{
    box-shadow: none!important;
}

.activeMenu{
    transform: translateX(0vh)!important;
}

.navSecundario{
    z-index: 998;

}

.navSecundario a{
    text-decoration: none;
    color: #707070;
}

.precioUno{
    width: 22%;
    padding: 3rem;
}

.precioDos{
    width: 22%;
    padding: 3rem;
}

.precioTres{
    width: 22%;
    padding: 3rem;
}

.precioCuatro{
    width: 22%;
    padding: 3rem;
}

@media screen and (max-width: 1362px){
    .seccionImgDescripcion img{
        width: 50%;
    }
}

@media screen and (max-width: 1000px){
    .seccionImgDescripcion{
        flex-wrap: wrap;
    }
    .seccionImgDescripcion img{
        width: 100%;
    }
}

@media screen and (max-width: 1255px){
    .containerPrecios{
        gap: 20px;
    }
    .precioUno{
        width: 40%;
    }
    .precioDos{
        width: 40%;
    }
    
    .precioTres{
        width: 40%;
    }
    
    .precioCuatro{
        width: 40%;
    }
}

@media screen and (max-width: 747px){
    .precioUno{
        width: 47%;
    }
    .precioDos{
        width: 47%;
    }
    
    .precioTres{
        width: 47%;
    }
    
    .precioCuatro{
        width: 47%;
    }
}

@media screen and (max-width: 610px){
    .containerPrecios .buttonFour{
        padding: 10px 0px;
        width: 100%;
        font-size: 15px;
    }
    .containerPrecios .buttonFive{
        padding: 10px 0px;
        width: 100%;
        font-size: 15px;
    }
    .containerPrecios h3{
        font-size: 20px!important;
    }
    .precioUno{
        padding: 1rem;
    }
    .precioDos{
        padding: 1rem;
    }
    
    .precioTres{
        padding-left: 1rem;
        padding-bottom: 1rem;
        padding-right: 1rem;
        padding-top: 2rem;
    }
    .precioCuatro{
        padding: 1rem;
    }
    .containerBgThree h1{
        font-size: 30px!important;
    }
}

@media screen and (max-width: 441px){
    .precioUno{
        width: 100%;
    }
    .precioDos{
        width: 100%;
    }
    
    .precioTres{
        width: 100%;
    }
    
    .precioCuatro{
        width: 100%;
    }
}

@media screen and (max-width: 1044px){
    .bgContainer img{
        display: none!important;
    }
}  

@media screen and (min-width: 995px){
    .ocultDesktop{
        display: none!important;
    }
}

.itemsCaracteristicas{
    justify-content: space-between;
}

@media screen and (max-width: 995px){
    .ocultMobile{
        display: none!important;
    }
    .menuSecundario{
        height: 70vh!important;
    }
    .seccionImgDescripcion img{
        width: 100%!important;
    }
    .seccionImgDescripcion p{
        width: 100%!important;
        font-size: 20px!important;
    }
    .seccionImgDescripcion h3{
        font-size: 40px!important;
    }
    .voltear{
        flex-direction: column-reverse!important;
    }
    .containerCaracteristicas h2{
        font-size: 40px!important;
    }
    .itemsCaracteristicas{
        justify-content: center;
        gap: 30px;
    }
    .itemsCaracteristicas strong{
        font-size: 24px!important;
    }
    .navSecundario{
        padding-bottom: 80px;
    }
}

.containerItemsSoluciones{
    display: flex;
    justify-content: center;
    gap: 180px;
    position: relative;
}

.containerItemsSoluciones .item {
    position: relative;
    z-index: 90;
}

.containerItemsSoluciones .lineasWeb{
    position: absolute;
    z-index: 89;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}   

.containerItemsSoluciones .item img{
    border: 5px solid #7151ED;
    border-radius: 20px;
}

@media screen and (max-width: 1383px){
    .containerItemsSoluciones .item img{
        width: 80%;
    }
    .containerItemsSoluciones .item h3{
        font-size: 20px!important;
    }
    .containerItemsSoluciones .lineasWeb img{
        object-fit: contain;
        width: 65%;
    }
    .containerItemsSoluciones{
        gap: 80px;
    }
}

@media screen and (max-width: 1261px){
    .containerItemsSoluciones .item img{
        width: 80%;
    }
    .containerItemsSoluciones .item h3{
        font-size: 20px!important;
    }
    .containerItemsSoluciones .lineasWeb img{
        object-fit: contain;
        width: 65%;
        margin-top: -70px;
    }
    .containerItemsSoluciones{
        gap: 80px;
    }
}

.lineaMobile{
    display: none;
}

.containerItemsSolucionesMobile{
    display: none;
}


@media screen and (max-width: 850px){
    .lineaDesktop{
        display: none;
    }
    .lineaMobile{
        display: unset;
    }
    .containerItemsSoluciones{
        display: none!important;
    }
    .containerItemsSolucionesMobile{
        display: flex;
        justify-content: center;
        gap: 180px;
        position: relative;

    }
    .containerItemsSolucionesMobile .item img{
        width: 200px;
        height: 200px;
    }
    .containerItemsSoluciones a{
        width: min-content;
    }
    .containerItemsSolucionesMobile .item h3{
        font-size: 20px!important;
    }
    .containerItemsSolucionesMobile .item {
        position: relative;
        z-index: 90;
    }
    
    .containerItemsSolucionesMobile .lineasWeb{
        position: absolute;
        z-index: 89;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }   
    
    .containerItemsSolucionesMobile .item img{
        border: 5px solid #7151ED;
        border-radius: 20px;
    }
}


@media screen and (max-width: 615px){
    .containerItemsSolucionesMobile {
        gap: 120px;
    }
}

.segundaFilaSolucionesMobile{
    gap: 80px;
}

@media screen and (max-width: 532px){
    .containerItemsSolucionesMobile .item img {
        width: 150px;
        height: 150px;
    }
    .lineaMobile {
        display: unset;
        height: 85%;
    }
    .segundaFilaSolucionesMobile{
        gap: 80px;
    }
}

.lineaMobileDos{
    display: none;
}
.lineaMobileDos{
    display: none;
}

.containerItemsSolucionesMobileDos{
    display: none;
}


@media screen and (max-width: 500px){
    .containerItemsSolucionesMobileDos{
        display: flex;
        justify-content: center;
        gap: 50px;
        position: relative;
        flex-direction: column;
    }
    
    .containerItemsSolucionesMobileDos .item {
        position: relative;
        z-index: 90;
    }
    .containerItemsSolucionesMobileDos .item h3{
        font-size: 20px!important;
    }
    
    .containerItemsSolucionesMobileDos .lineasWeb{
        position: absolute;
        z-index: 89;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }   
    
    .containerItemsSolucionesMobileDos .item img{
        border: 5px solid #7151ED;
        border-radius: 20px;
    }
    .containerItemsSolucionesMobile{
        display: none;
        flex-direction: column;
    }
    .containerItemsSolucionesMobileDos .item img {
        width: 200px;
        height: 200px;
    }
    .lineaMobile{
        display: none;
    }
    .lineaMobileDos{
        display: unset;
    }
    .containerItemsSolucionesMobileDos .lineasWeb {
        align-items: flex-start;
        padding-top: 40px;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 788px){
    .containerItemsSoluciones{
        justify-content: center!important;
    }
}

@media screen and (max-width: 690px){
    .footerOne{
        flex-direction: column;
        gap: 20px;
    
    }
    .footerOne img{
        width: 100%!important;
    }
    .footerOne a{
        font-size: 15px!important;
    }
    .footerTwo strong{
        font-size: 15px!important;
    }
    .menuFooter a{
        text-align: center;
    }
    .menuFooter{
        flex-direction: column!important;
    }
    .menuFooter strong{
        display: none!important;
    }
    .preguntas{
        width: 90%!important;
    }
    .accordion-button{
        font-size: 20px!important;
    }
    .bgContainer h1{
        font-size: 40px!important;
        width: 100%!important;
    }
    .bgContainer p{
        width: 100%!important;
    }
    .containerNuestrasSoluciones h2{
        font-size: 40px!important;
    }
    .containerNuestrasSoluciones strong{
        font-size: 23px!important;
    }
    .containerPreguntas h3{
        font-size: 25px!important;
    }
    .containerPreguntas button{
        padding: 10px 0px!important;
        width: 100%!important;
    }
}



@media screen and (max-width: 356px){
    .containerNuestrasSoluciones h2{
        font-size: 30px!important;
    }
    nav{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .bgContainer button{
        padding: 10px 0px;
        width: 100%;
    }
    .containerCaracteristicas h2 {
        font-size: 30px !important;
    }
    .itemsCaracteristicas strong {
        font-size: 17px !important;
    }
    .seccionImgDescripcion h3 {
        font-size: 30px !important;
    }
    .seccionImgDescripcion p {
        width: 100% !important;
        font-size: 15px !important;
    }
    .bgContainer h1 {
        font-size: 30px !important;
        width: 100% !important;
    }
    .bgContainer p {
        font-size: 18px!important;
    }
    .containerItemsSoluciones img{
        width: 100%;
    }
    .containerItemsSoluciones h3{
        font-size: 20px!important;
    }
    nav img{
        width: 80%!important;
    }
    .bgContainer {
        margin-top: 40px;
    }
    .containerBgThree {
        margin-top: 20px;
    }
}