:root {
  --primario: #131415;
  --secundario: #ffa600;
  --terciario: #e1e1e1;
  --back: #ffffff;
  --backsec: #000000;
  --font1: "Ubuntu", sans-serif;
  --font2: "Sometype Mono", monospace;
}

.img--box {
  /* width: 20rem;
  height: 20rem; */
  position: relative;
  top: -4rem;
  margin-bottom: -4rem;
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
.img--box img {
  width: 100%;
}
.card--btns {
  display: flex;
  gap: 1rem;
}
button.card--btn:hover {
  border: 2px solid white;
  /* box-shadow: 0 2px 0.5rem white; s*/
  width: 50%;
  box-shadow: none;
  padding: 0.4rem 0.8rem;
}
button.card--btn {
  width: 55%;
  letter-spacing: 1px;
  padding: 0.4rem 0.8rem;
  transition: all 0.4s ease-in-out;
}
button.card--btn.card--buttonbuy:hover {
  width: 60%;
  /* font-weight: 600; */
  border-color: rgb(255 255 255);
  border-bottom: 2px solid white;
  box-shadow: inset 0 0 5px white, 0 0 8px white;
}
button.card--btn.card--btnsmd:hover {
  width: 60%;
  /* font-weight: 600; */
  border-color: rgb(255 255 255);
  border-bottom: 2px solid white;
  box-shadow: inset 0 0 5px white, 0 0 8px white;
}
.producto--info {
  overflow: hidden;
  /* border: 1px solid; */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}
.cardProduct {
  border: 1px solid white;
  box-shadow: 0 0 15px black;
  transition: all 0.5s;
  width: 100%;
  height: 25.5rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /* backdrop-filter: blur(0.5px); */
  justify-content: space-between;
  /* height: fit-content; */
}
h3 {
  font-size: 1rem;
  color: white;
  font-family: var(--font1);
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  /* filter: drop-shadow(0px 0px 21px white); */
}
main span {
  font-size: 1.5rem;
  color: white;
  font-family: var(--font1);
  /* filter: drop-shadow(2px 0px 22px white); */
}

.cardProduct:hover {
  scale: 1.01;
  box-shadow: 0 0 2rem #e1fbff, inset 0px 0px 16px white;
}
.cardProduct:hover > .img--box > img {
  animation: flotar 2s 0s infinite alternate ease-in-out;
}

@media (max-width: 800px) {
  .cardProduct {
    border: 1px solid white;
    box-shadow: 0 0 15px black;
    transition: all 0.5s;
    width: 38vw;
    height: 50vw;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    /* backdrop-filter: blur(0.5px); */
    justify-content: space-between;
    /* height: fit-content; */
  }
  .img--box {
    position: relative;
    top: -5vw;
    margin-bottom: -5vw;
    display: flex;
    align-items: center;
    padding: 0.5rem;
  }
  .img--box img {
    width: 100%;
  }
  .producto--info {
    overflow: hidden;
    /* border: 1px solid; */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
  }
  .producto--info span {
    font-size: 3.1vw;
  }
  .producto--info h3 {
    font-size: 2.1vw;
  }
  .card--btns {
    display: flex;
    gap: 1.6vw;
  }
  .card--btn {
    padding: 1vw 1.6vw;
    font-size: 2.1vw;
  }
}

@media (max-width: 425px) {
  .cardProduct {
    border: 1px solid white;
    box-shadow: 0 0 15px black;
    transition: all 0.5s;
    width: 70vw;
    height: 75vw;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    /* backdrop-filter: blur(0.5px); */
    justify-content: space-between;
    /* height: fit-content; */
  }
  .img--box {
    position: relative;
    top: -21vw;
    margin-bottom: -32vw;
    display: flex;
    align-items: center;
    /* padding: 0 1.5rem; */
  }
  .producto--info h3 {
    font-size: 3.6vw;
    text-align: center;
  }
  .producto--info span {
    font-size: 4.3vw;
  }
  .card--btn {
    font-size: 4.1vw;
  }
}