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

body {
  width: auto; }

h1 {
  color: orange; }

.fixed {
  position: fixed;
  right: 50px;
  bottom: 50px; }
  .fixed a img {
    height: 50px;
    width: 50px; }

.locales div .storesGrid .storesItem {
  padding-left: 20px;
  padding-right: 20px; }


/*-----header-----*/

.openMenu{
    display: none;
}
.closeMenu{
    display: none;
}
.head {
  background-color: #1F1F1F;
  height: 120px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  grid-area: head; }
  .searchBar{
    display: flex;
    align-items: center;
    justify-content:space-between;
    }
    .searchBar ul{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    height: 40px;
}
  .head nav h1 {
    font-size: 50px;
    font-family: shippori antique b1;
    font-weight: 500;
    font-style: initial;
    text-align: left;
    width: 250px;
    display: flex;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-top: 20px; 
  }
    #main-title-scnd-half {
        color: #0097B2;
    }
  .head nav a {
    text-decoration: none;
    color: white; }
  .head ul {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-content: center;
    background-color: #1F1F1F;
    height: 40px; }
    .head ul li {
      list-style-type: none;
      margin-top: 5px; 
    }
      .head ul li a {
        text-decoration: none;
        font-family: poppins;
        font-size: 25px;
        font: weight 50px;
        color: white;
        padding: 5px;
        top: 70px;
        margin-inline: 15px;
        transition: font-size 1s; 
      } .head ul li a:hover {
          color:#0097B2; 
        } #menu {
          margin-bottom: 0px;
        }

.whatsapp-button{
  display: flex;
  width: 100%;
  justify-content: end;
  position: fixed;
  bottom: 20px;
} .whatsapp-floating {
    justify-self: end;
    z-index: 1000;
  } .whatsapp-floating img{
      margin-right: 30px;
      margin-left: 30px;
      width: 80px;
    }

  #tango-products{
    color: white;
    font-family: poppins;
    font-size: 25px;
    margin-left: 15px;
    margin-right: 15px;
  }
  #tango-products:hover{
    color: #0097B2;
  }
  #tango-products-lista{
    display: none;
    color: white;
    font-family: poppins;
    background-color: #272727;
    position: absolute;
    width: auto;
    list-style: none;
    
    padding: 10px 10px 10px 10px;
    height: auto;
  }
  #tango-products-lista li a{
    font-size: 20px;
  }
  #tango-products:hover #tango-products-lista{
    display: block;
  }
#boton-directo img{
  width: 120px;
  height: auto;
}

/*-----carrousel-----*/
.d-block {
  height: auto;
  width: 100%;
} 
.carousel{
    margin-inline: auto;
    align-content: center;
    grid-area: carousel;
  }.carousel-caption{
    align-self: center;
    margin-bottom: 200px;
  }.carousel-caption h5{
        font-family: montserrat;
        font-weight: bold;
        font-size: 50px;
        color: rgb(255, 255, 255);
        margin-bottom: 30px;
    }.carousel-caption button a, 
    .carousel-caption button{
      color: white;
      text-decoration: none;
    } #caption1{
      margin-bottom: 50px;
    }.carousel-caption button{
        font-size: 25px;
        font-family: montserrat;
        border: solid white 3px;
        background-color: transparent;  
        padding: 15px 15px 10px 15px;
        border-radius: 40px;
      }
#caption2{
  font-size: 40px;
  font-family: poppins;
  margin-bottom: 300px;
}

/*-----info section-----*/
.info{
  background-image: url("../img/futuristic-bg.jpg");
  background-size: cover;
  box-shadow: 0 10px 10px rgb(255, 255, 255);
}
.comp-info {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 100px;
  grid-template-rows: auto auto;} 
  .comp-info div{
    margin-top: 50px;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
  } .comp-info div img{
      width: 500px;
      height: auto;
      justify-self: center;
    } .comp-info h2{
        width: auto;
        font-size: 50px;
        font-style: bold;
        font-family: poppins;
        grid-column: 2;
        align-content: end;
        margin-bottom: 30px;
      } .comp-info p{
          grid-column: 2;
          margin-bottom: 40px;
          font-size: 30px;
          font-family: poppins;
          font-style: thin;
      } 

/*----section titles----*/
.section-title {
  font-size: 40px;
  font-family: poppins;
  font-weight: bold;
  margin-bottom: 30px;
  justify-self: center;
  text-align: center;
}
.section-title--white {
  font-size: 40px;
  font-family: poppins;
  font-weight: bold;
  margin-bottom: 30px;
  color: white;
  justify-self: center;
  text-align: center;
}

/*--productos tango----*/
 .tango-products div {
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
  } .products-tango div h4 {
        font-size: 30px;
        font-family: poppins;
        margin-bottom: 70px; 
      } .product-boxes{
          display: flex;
          justify-content: center;
          gap: 100px;
          margin-bottom: 50px;
      } .product-boxes div{
          width: 200px;
          height: 300px;
          display: grid;
          justify-items: center;
          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.253);
      } #box-gestion{
          background-color: #2FA7DF;
          border-radius: 30px;
      } #box-pdv{
          background-color: #2FA7DF;
          border-radius: 30px;
      } #box-eecc{
          background-color: #F47D30;
          border-radius: 30px;
      } .product-boxes div a img{
            justify-self: center;
            width: 190px;
            height: auto;
            margin-top: 30px;
          } .product-boxes div button{
              display: flex;
              justify-content: center;
              border-radius: 10px;
              padding: 5px 10px 5px 10px;
              height: 40px;
            } .product-boxes div button a{
                text-decoration: none;
                font-family: poppins;
                font-size: 20px;
                color: black;
              }
/*-----servicios-----*/
.box-grid-cols{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-bottom: 50px;
  } .box-cols-2-5{
      grid-column: 2 / span 4;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.253);
      background-color: white;
      border-radius: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      height: 300px;
  } .box-cols-2-5 div{
      justify-self: center;
      display: grid;
      grid-template-columns: 
      repeat(
        auto-fit,
        minmax(80px, 1fr)
      );
      grid-template-rows: auto auto;
      align-self: center;
  } .box-cols-2-5 div img{
      width: 100px;
      height: auto;
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: 
      repeat(
        auto-fit,
        minmax(150px, 1fr)
      )
    ;
      justify-self: center;
  } .box-cols-2-5 h4{
      font-size: 25px;
      align-content: center;
      justify-content: center;
      font-family: poppins;
      margin-bottom: 10px;
      text-align: center;
  } .box-cols-2-5 div p{
      font-size: 18px;
      font-family: poppins;
      text-align: center;
    } .box-cols-2-5 div a{
        text-decoration: none;
        color: #1F1F1F;
    }

/*----location info----*/
.location-info{
  background-image: url("../img/futuristic-bg-2.jpg");
  background-size: cover;
}
.location-grid{
    margin-top: 50px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: 
      repeat(
        auto-fit,
        minmax(150px, 1fr)
      )
    ;
    grid-template-rows: auto auto;
} .location-info h3{
    text-align: center;
  } .location-info--textbox{
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.253);
      background-color: white;
      width: auto;
      justify-self: center;
      margin: 10px 30px 10px 0px;
      padding: 15px 15px 15px 15px;
      border-radius: 25px;
    } .info-row-1-col-1 h4{
        font-size: 20px;
      } .location-grid iframe{
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        border-radius: 30px;
        height: 100%;
        margin-right: 30px;
      } .img-row-2{
          grid-row: 2;
          display: flex;
          justify-self: start;
          margin-left: 30px;
        } .img-row-2 img{
            width: 500px;
            height: auto;
            border-radius: 30px;
            justify-self: center;
          }

/*-----nosotros-y-servicios---*/
.section-sobre-nosotros{
    margin-top: 150px;
    margin-bottom: 50px;
    display: block;
} .section-info--row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 50px;
  } 
  .section-row__text--right{
      margin-left: 100px;
      margin-right: 150px;
      font-family: poppins;
      font-size: 20px;
      text-align: right;
      grid-column: 2;
  } .section-row__text--left{
      margin-left: 150px;
      margin-right: 100px;
      font-family: poppins;
      font-size: 20px;
      text-align: left;
      grid-row: 1;
      grid-column: 1;
    } .section-img--left{
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
      } .section-img--left img{
          width: 500px;
          height: auto;
          border-radius: 30px;
    } 
    .section-img--right{
        justify-self: center;
        grid-column: 2;
      } .section-img--right img{
          width: 500px;
          height: auto;
          border-radius: 30px;
  }

.servicios-info{
    margin-top: 50px;
    margin-bottom: 50px;
    display: block;
}


/*----pagina servicios----*/
.nuestros-servicios-head{
    margin-top: 120px;
    padding-top: 30px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    background-image: url('../img/equipo-de-empresarios-jovenes.jpg');
    background-size: cover;
    display: block;
} .nuestros-servicios-head h2{
    color: white;
}

/*----pagina productos----*/
.product-title, .product-title--white{
  font-family: montserrat;
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 30px;
  justify-self: center;
  text-align: center;
}
#img-eecc{
  background-color: #F47D30;
}
#funcionalidades-eecc-listas div ul li{
  border-bottom: #F47D30 solid 3px;
} #funcionalidades-eecc-listas .acordeon-titulo.subrayado{
    border-bottom: #F47D30 solid 3px;
  }
#resumen-producto--pdv{
  background-image: url("../img/mujer-administrando-punto-de-venta.jpg");
  background-size: cover;
}
#resumen-producto--eecc{
  background-image: url("../img/contadora-con-graficos-y-laptop.jpg");
}
.resumen-producto{
    margin-top: 120px;
    margin-bottom: 50px;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 2fr;
} .resumen-producto__logo{
    background-color: #2FA7DF;
    height: 100%;
    width: 100%;
    align-content: center;
    display: grid;
    justify-items: center;
  } .resumen-producto__logo img{
      width: 90%;
      height: auto;
      justify-self: center;
    }
  .resumen-producto__text{
    background-image: url("../img/mujer-escribiendo.jpg");
    background-size: cover;
    display: block;
    justify-items: center;
    align-content: center;
    color: white;
    font-family: montserrat;
  } .resumen-producto__text p{
      text-align: center;
      margin-left: 80px;
      margin-right: 80px;
      align-content: center;
    } .resumen-producto__text button{
        border-radius: 20px;
        display: flex;
        justify-self: center;
        background-color: transparent;
        margin-top: 40px;
      } .resumen-producto__text button a{
          text-decoration: none;
          background-color: transparent;
          color: white;
          border: white solid 3px;
          border-radius: 30px;
          padding: 10px 15px 10px 15px;
        }

    .caracteristicas-tango--grid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    } .caracteristicas-tango--grid--boxes{
        grid-column: 2/span 3;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.253);
        border-radius: 30px;
        justify-self: center;
        align-self: center;
      }.caracteristicas-tango--grid--boxes div{
          justify-self: center;
          display: grid;
          align-self: center;
          text-align: center;
          font-size: 15px;
          font-family: montserrat;
          margin-inline: 20px;
      } .caracteristicas-tango--grid--boxes div img{
          width: 150px;
          justify-self: center;
          margin-top: 15px;
          margin-bottom: 15px;
          }

    .funcionalidades-tango{
        margin-top: 30px;
        font-family: montserrat;
        margin-bottom: 40px;
      } .funcionalidades-tango__grid{
          margin-top: 40px;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        } .funcionalidades-tango__grid--listas{
            grid-column: 2/span 3;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            justify-content: center;
          } .funcionalidades-tango__grid--listas div{
              display: grid;
              justify-self: start;
              font-size: 25px;
            } .funcionalidades-tango__grid--listas div ul{
                width: 400px;
                padding-right: 32px;
                list-style: none;
              } .funcionalidades-tango__grid--listas div ul li{
                  border-bottom: solid 3px #2FA7DF;
                  list-style: none;
                  font-style: bold;
              } .funcionalidades-tango__grid--listas div ul p{
                  display: none;
                } .funcionalidades-tango__grid--listas div ul ul {
                  display: none;
                } .acordeon-descripcion.activo{
                    display: block;
                    font-size: 20px;
                  } .acordeon-titulo.subrayado{
                      border-bottom: solid 3px #2FA7DF;
                    }

    .demo-tango{
        margin-bottom: 50px;
        font-family: montserrat;
        font-size: 25px;
      } .demo-tango div{
        margin-left: 300px;
        margin-right: 300px;
        justify-self: center;
        } .demo-tango div p{
            text-align: center;
            margin-bottom: 50px;
          }.demo-tango div button{
            background-color: transparent;
          } .demo-tango div button a{
              text-decoration: none;
              color: #0097B2;
              padding: 10px 15px 10px 15px;
              border: #0097B2 solid 3px;
              border-radius: 30px;
          }
.resumen-tango{
  background-image: url("../img/abstract_flowing_cyber_particles_background_0709.jpg");
  background-size: cover;
  color: white;
}
  .ai-info{
    display: grid;
    justify-content: center;
  } .ai-info img{
      width: 900px;
      height: auto;
      justify-self: center;
    }.ai-info h2, .last-title h2{
      text-align: center;
      font-weight: 700;
      }.ai-info p{
        text-align: center;
        margin-left: 200px;
        margin-right: 200px;
        font-size: 20px;
        margin-bottom: 50px;
        } .last-title h2{
          padding-bottom: 50px;
          margin-bottom: 0;
        }
  .caracteristicas-delta{
    background-color: #020225;
    color: white;
  }
  .caracteristicas-delta--grid{
    display: block;
  } .caracteristicas-delta--boxes{
      margin: 0px 50px 50px 50px;
      padding: 20px 20px 20px 20px;
      align-items: center;
      display: grid;
      grid-template-columns: 2fr 1fr;
    }.caracteristicas-delta--boxes div img{
        width: 400px;
        height: auto;
        justify-self: center;
      } .caracteristicas-delta--boxes div h3{
          font-size: 40px;
          font-family: montserrat;
          margin-bottom: 20px;
          margin-left: 50px;
          text-shadow: #70eaff  0 0 10px;
        } .caracteristicas-delta--boxes div h4{
            margin-left: 50px;
            font-family: montserrat;
            text-shadow: #0098d4 0 0 5px;
        } .caracteristicas-delta--boxes div p{
            margin-left: 50px;
            font-size: 20px;
            font-family: montserrat;
            margin-bottom: 50px;
    }
/*-----pagina consulta----*/
.form-page{
  background-image: url("../img/photovoltaics-factory-worker.jpg");
  background-size: cover;
  margin-top: 120px;
  font-family: poppins;
  color: white;
  padding: 50px 50px 50px 50px;
} .form-page h2{
    font-size: 40px;
}
.page-form{
    position: relative;
  } .page-form form{
        font-size: 20px;
        display: block;
        margin-top: 20px;
      } .page-form div{
        width: 400px;
      } .page-form form div input{
          width: 100%;
          height: 40px;
          margin-bottom: 20px;
          border-radius: 10px;
          padding: 10px 10px 10px 10px;
        } .page-form form button{
            width: 75px;
            height: 40px;
            border-radius: 10px;
            background-color: #0097B2;
            color: white;
            font-size: 20px;
            font-family: poppins;
            border: none;
          } .page-form form label {
            display: block;
            font-size: 25px;
          } #sub-button{
              width: 200px;
              justify-content: center;
              align-content: center;
              text-align: center;
              color: white;
              background-color: #0097B2;
            } #consulta{
              width: 100%;
              height: 100px;
              border-radius: 10px;
              margin-bottom: 20px;
            }
/*-----footer-----*/
#footer {
  background-image: url('../img/futuristic-background.jpg');
  background-size: cover;
  color: white;
  font-family: poppins;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding-bottom: 50px;
} .form{
    margin-left: 100px;
    margin-top: 20px;
    position: relative;
  } .form h1{
      padding-top: 30px;
      font-size: 40px;
      font-style: bold;
    } .form form{
        font-size: 20px;
        display: block;
        margin-top: 20px;
      } .form form div{
        width: 300px;
      } .form form input{
          width: 100%;
          height: 40px;
          margin-bottom: 20px;
          border-radius: 10px;
          padding: 10px 10px 10px 10px;
        } .form form label {
            display: block;
          } #sub-button{
              width: 200px;
              height: auto;
              border-radius: 10px;
              align-content: center;
              text-align: center;
              background-color: #0097B2;
              font-size: 20px;
              font-family: poppins;
            } #consulta{
              height: 100px;;
            }
        .contact-info{
          margin-left: 50px;
          margin-top: 40px;
          font-family: shippori antique b1;
          } .contact-row{
            display: flex;
            margin-block: 20px;
            align-items: center;
          } .contact-row img{
              width: 70px;
              height: 50px;
              padding-right: 20px;
          }
          .redes{
              margin-top: 40px;
              display: block;
            } .redes div{
              display: flex;
              } .redes h2{
                  font-family: poppins;
                  font-size: 40px;
                } .redes div a{
                  margin-top: 20px;
                  background-color: white;
                  clip-path: circle();
                  display: block;
                  width: 80px;
                  height: auto;
                  margin-inline-end: 20px;
                  justify-content: center;
                  align-content: center;
                } .redes div a img{        
                    display: flex;            
                    width: 50px;
                    justify-self: center;
                    margin: 15px 15px 15px 15px;
                  }