/*----vista mobile-----*/
@media screen and (min-width:350px) and (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #main-title{
    font-size: 40px;
    padding: 5px 5px 5px 5px;
    align-self: center;
    justify-self: center;
    display: flex;
  } #main-title a{
    justify-self: center;
  }
  .head{
    height: 55px;
    width: 100%;
    z-index: 2;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    } .head nav{
      height: 100%;
      display: flex;
    }.searchBar {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      } .openMenu, .closeMenu{
          display: block;
          height: 50px;
          width: auto;
          justify-self: start;
          background-color: transparent;
          background: none;
          border: none;
          cursor: pointer;
        } .openMenu img, .closeMenu img{
          justify-self: start;
          width: 50px;
          height: auto;
          justify-self: start;
          margin-top: 0px;
        } 
 #menu {
  position: fixed;
  top: 0;
  left: -100%; /* fuera de pantalla inicialmente */
  width: 75%;
  height: 100%;
  background-color: #111;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  gap: 1.5rem;
  list-style: none;
  transition: left 0.35s ease-in-out;
  z-index: 999;
  align-items: flex-start;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}
#menu.visible {
  left:0;
  padding-left: 20px;
  transform: translateX(0);
}
#menu li{
  width: 100%;
  text-align: left;
}

#menu a , #tango-products{
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s;
}

#menu a:hover {
  color: #00bcd4;
}
#tango-products{
  cursor: pointer; 
}
#tango-products-lista {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.3rem;
  list-style: none;
  padding-left: 15px;
  position: relative;
  width: 90%;
  overflow: hidden; 
  background-color: #111;
  max-height: 0px;
  transition: max-height 0.4s ease-in-out;
} #tango-products.sublista-activa #tango-products-lista {
    max-height: 300px;
}#tango-products-lista li {
    margin-top: 5px;
    font-size: 15px;
    padding: 3px 0;
    border-bottom: none;
} #tango-products-lista li a{
    margin-left: 0px;
    padding-left: 0px;
    font-size: 15px;
    text-align: start;
}

#tango-products:hover #tango-products-lista {
  display: flex;
}
.closeMenu {
  position: absolute;
  top: 10px;
  left: 1rem;
}

/* --- Estilos de los elementos del menú --- */

.section-title{
  font-size: 25px;
  margin-bottom: 15px;
  width: auto;
}
.carousel{
      margin-top: 0px;
      height: auto;
      width: 100%;
    }.carousel-inner{
      overflow: hidden;
    }
    .carousel-item img{
      height: auto;
      width: 300%;
      justify-self: center;
      }.carousel-item video {
        height: auto;
        width: 100%;
        justify-self: center;
      } .d.block{
        margin-top: 80px;
        height: 500px;
  }.carousel-caption{
    display: block;
    margin-bottom: 0px;
    align-content: center;
  } .carousel-caption h5{
      color: white;
      font-size: 25px;
    }.carousel-caption button{
        border: solid white 3px;
        background-color: transparent;  
        padding: 15px 15px 10px 15px;
        border-radius: 30px;
        font-size: 15px;
      } 
#caption2{
  font-size: 40px;
  font-family: poppins;
  margin-bottom: 0px;
}
.info{
  background-image: url("../img/futuristic-bg--vertical.jpg");
  background-size: cover;
} .comp-info{
  display: block;
  width: 100%;
  justify-content: center;
  margin-bottom: 30px;
  }.comp-info div{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  } .comp-info div img{
    width: 80%;
    justify-self: center;
    }.comp-info h2{
      padding-top: 20px;
      margin-bottom: 20px;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 25px;
      justify-self: center;
      text-align: center;
      }.comp-info p{
        font-size: 20px;
        text-align: center;
        margin-bottom: 10px;
        }

.whatsapp-floating img{
  width: 70px;
}
.product-boxes{
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  justify-self: center;
} .product-boxes div{
    min-width: 80px;
    max-width: 150px;
    height: 150px;
    justify-self: center;
 } .product-boxes div a{
    display: flex;
    justify-content: center;
 } .product-boxes div a img{
    width: 95%;
    margin-top: 0px;
    align-self: center;
  } #box-gestion{
    grid-column: 1;
    grid-row: 1;
  } #box-pdv{
    grid-column: 2;
    grid-row: 1;
  } #box-eecc{
    grid-column: 1;
    grid-row: 2;
  } #box-factura{
    grid-column: 2;
    grid-row: 2;
  }
  .product-boxes div button{
    display: none;
  }

.box-cols-2-5{
    grid-template-columns: 
      repeat(
        auto-fit,
        minmax(80px, 1fr)
      );
    grid-template-rows: 1fr 1fr;
    width: 90%;
    padding: 20px 30px 20px 30px;
    height: auto;
    gap: 20px;
    justify-self: center;
  } .box-cols-2-5 div{
    display: block;
  }
    .box-cols-2-5 div img{
      width: 70px;
      height: auto;
      justify-self: center;
  } .box-cols-2-5 h4{
      font-size: 15px;
      align-content: center;
      justify-content: center;
      font-family: poppins;
      text-align: center;
  }

.location-info{
  padding-left: 15px;
  padding-right: 15px;
  display: block;
  justify-items: center;
  background-image: url("../img/futuristic-bg-2-vertical.jpg");
  background-size: cover;
}
.location-grid{
  display: block;
  width: auto;
} .location-grid div{
    width: auto;
    max-width: 350px;
    min-width: 200px;
    justify-self: center;
  }.location-info h3{
    font-size: 20px;
    width: 100%;
    justify-self: center;
  }.location-grid div{
      max-width: 350px;
      min-width: 200px;
    } .img-row-2{
      display: flex;
      margin-left: 0px;
      max-width: 500px;
      min-width: 200px;
    } .img-row-2 img{
      width: 100%; 
      height: auto;
      justify-self: center;
      
      } .location-grid iframe{
        margin-top: 30px;
        max-width: 500px;
        min-width: 200px;
        width: 100%;
        height: 300px;
        } .location-info--textbox{
            margin-right: 0px;
          }


/*----delta page----*/
.resumen-tango{
  margin-top: 55px;
}
.resumen-tango__text{
  text-align: center;
  } .resumen-tango__text h2{
    font-size: 30px;
    margin-bottom: 15px;
  } .resumen-tango__text h3{
    font-size: 15px;
  }
.ai-info{
  width: 95%;
  justify-self: center;
  } .ai-info img{
    width: 100%;
  } .ai-info h2{
    font-size: 25px;
    width: auto;
    justify-self: center;
  } .ai-info p{
    font-size: 15px;
    margin: 0px 20px 20px 20px;
  }

.caracteristicas-delta--boxes {
  display: block;
  width: 95%;
  padding: 0px;
  margin: 0px 10px 30px 10px;
  justify-items: center;
} .caracteristicas-delta--boxes div img{
  width: 200px;
} .caracteristicas-delta--boxes div h3, 
.caracteristicas-delta--boxes div h4,
.caracteristicas-delta--boxes div p{
  margin: 0px 10px 10px 10px;
  text-align: center;
}
.caracteristicas-delta--boxes div h3{
  font-size: 25px;
} .caracteristicas-delta--boxes div h4{
  font-size: 20px;
} .caracteristicas-delta--boxes div p{
  font-size: 15px;
}

#footer{
  display: block;
  background-position: center;
  background-size: cover;
}.form{
  margin-left: 0px;
  display: block;
  justify-items: center;
  margin-top: 0px;
  } .form h1{
    font-size: 30px;
    } .form form div label{
        font-size: 15px;
      } .form form div input{
          height: 25px;
          margin-bottom: 10px;
          justify-self: center;
        } #sub-button{
            font-size: 15px;
            text-align: center;
            align-content: center;
            width: 150px;
            padding-top: 5px;
            height: 30px;
          } .contact-info{
            padding-top: 10px;
            margin-top: 0px;
            margin-left: 30px;
            margin-right: 30px;
            } .contact-row{
              margin-top: 0px;
              margin-bottom: 5px;
            } .contact-row h4{
              font-size: 15px;
              align-self: center;
              } .contact-row img{
                  width: 45px;
                  height: 35px;
                  padding-right: 5px;
                } .redes{
                  margin-top: 10px;
                } .redes h2{
                    font-size: 30px;
                  } .redes div a{
                      width: 60px;
                      height: 60px;
                      display: flex;
                      margin-top: 10px;
                    } .redes div a img{
                        width: 70%;
                        height: auto;
                        align-self: center;
                      } 
.section-title--white{
  font-size: 30px;
  margin-bottom: 10px;
} .product-title--white{
    margin-top: 10px;
    margin-bottom: 10px;
}
  .resumen-producto{
    display: block;
    margin-top: 50px;
    width: 100%;
    height: auto;
  } .resumen-producto__logo{
    height: 200px;
    width: 100%;
  } .resumen-producto__logo img{
    height: 190px;
    width: auto;
    align-self: center;
  } .resumen-producto__text{
    height: auto;
  } .resumen-producto__text p{
    margin: 0px 15px 0px 15px;
  } .resumen-producto__text button{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .caracteristicas-tango--grid--boxes{
    display: block;
    max-width: 500px;
    min-width: 300px;
  } .caracteristicas-tango--grid--boxes div img{
    width: 100px;
    height: auto;
  } .funcionalidades-tango__grid--listas{
    display: block;
    justify-items: center;
  } .funcionalidades-tango__grid--listas div{
    justify-self: center;
    padding-left: 30px;
    padding-right: 30px;
    width: auto;
  }
  
  .demo-tango div{
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
    
  } .demo-tango div p{
    font-size: 15px;
  } .demo-tango div button{
    width: auto;
    height: 35px;
    font-size: 20px;
    justify-self: center;
  }

  .section-sobre-nosotros{
    width: auto;
    margin-top: 70px;
  } .section-info--row {
    display: block;
  } .section-info--row div{
    margin: 15px 10px 0px 10px;
  } .section-info--row div img{
    width: 90%;
    display: block;
    justify-self: center;
  } .section-info--row div p{
    display: block;
    justify-self: center;
    text-align: center;
  }

  .form-page{
    margin-top: 50px;
    padding-top: 20px;
    background-position: center;
    background-size: cover;
  }  .form-page h2{
    font-size: 30px;
  } .page-form form{
    margin-top: 0px;
  } .page-form div{
    width: auto;
  } .page-form div label{
    font-size: 20px;
  } .page-form div input{
    width: 100%;
    margin-bottom: 10px;
    height: 30px;
  } .form button{
    background: transparent;
  } #sub-button{
    width: 100%;
  }
}