.listado {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 30fr); 
  gap: 0px; 
}

.navigator {
  display: flex;
}

.listado .grid-item {
  transition: all 0.2s ease-in-out; 
  text-align: center;
  background-color: #edf9ff;
}

.botones a, .botones button {
  border: none;
  text-decoration: none;
  color: #1b1b1b;
  margin-left: 1.8px;
  margin-right: 1.5px;
  margin-bottom: 3px;
}

.product {
  position: relative;
}

.descuento {
  position: absolute;
  top: .5cm;
  left: .5cm;
  color: #ffffff;
  font-size: large;
  background-color: #0080c5;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 32px;
  z-index: 300;
}

.botones .quoteBtn {
  background-color: #74ffbc;
}

.botones .share-button {
  background-color: #ffcf9c;
}

.botones .cartBtn {
  background-color: #28bcf6;
}

.botones .quoteBtn:hover {
  background-color: #00d66f;
}

.botones .share-button:hover {
  background-color: #ff9d34;
}

.botones .cartBtn:hover {
  background-color: #0080c5;
  color:white;
}

.botones i {
  font-size: small;
}

.listado .grid-item .botones {
  display:none
}

.listado a {
  color: #4e4e4e;
  text-decoration: none;
}

.listado a:hover{
  text-decoration: underline;
}

.listado .grid-item:hover .botones {
  display: block;
}

.listado .grid-item:hover {
  box-shadow: 0px 0px 6px 3px #d3d3d396;
  background-color: white;
  z-index: 500;
}

.listado h4 {
  font-weight: bolder;
  font-size: large;
  margin-left: 10px;
  margin-right: 10px;
}

.listado h5 {
  margin-top: -6px;
  font-size: medium;
}

.grid-item img {
  max-height: 200px;
  margin-top: 14px;
}

.grid-item .botones input {
  display: none;
}

/* -----------------------------codigo para hacer la pagina responsiva de escritorio---------------------------- */
@media screen and (min-width: 1051px) {

  .navigator {
    align-items: center;
    justify-content: space-between;
  }

  h1 {
    margin-left: 5px;
  }

  .navigator h2 {
    font-size: 15px;
    margin-right: 10px;
  }

  .navigator #subject {
    font-size: 15px;
  }

  .listado {
    grid-template-columns: repeat(4, 30fr); 
  }

  .listado .grid-item {
    margin: 10px;
  }

  .listado .grid-item:hover {
    transform: scale(1.4);
    min-width: 19vw;
    background-color: #ffffff;
  }

  .botones a, .botones button {
    padding:10px;
    font-size: 10px;
    transition: 0.2s; 
    border-radius: 0px;
    min-width: 6vw;
  }

  .botones a:hover, button:hover {
    cursor: pointer;
  }

  .botones .textoBtn {
    display: inline-block;
  }

  .botones i {
    padding-left: 3px;
  }

  .listado h5 {
    font-weight: lighter;
  }

}

/* -----------------------------codigo para hacer la pagina responsiva de movil---------------------------- */
@media screen and (max-width: 1050px) {

  main {
    margin-left: 0px;
  }

  .navigator {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
  }

  .listado {
    left: 0px;
    grid-template-columns: repeat(2, 60fr); 
  }

  .listado .grid-item {
    margin-left: -3vw; 
    margin-right: -3vw;
    margin-top: -18px;
    margin-bottom: -18px;
    scale: 0.8;
  }

  .botones a, .botones button {
    padding: 15px;
    font-size: 13px;
  }

  .botones .textoBtn {
    display: none;
  }

  h2 {
    font-size: larger;
  }

  .listado h5 {
    font-weight: light;
  }
}