/* Estilo del NAV */
nav {
  display: grid;
  grid-template-rows: auto auto; /* Dos filas en el grid */
}


#card-img-container-1,
#card-img-container-2,
#card-img-container-3 {
  position: relative;
  overflow: hidden;
}


.card-img-top {
  transition: filter 0.3s ease;
}

#buy-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: gold;
  color: white;
  text-decoration: none; /* Quita el subrayado del link */
  border: none;
  padding: 10px 20px;
  border-radius: 25px; /* Forma redondeada */
  font-size: 16px; /* Tamaño de fuente */
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra moderna */
  transition: all 0.3s ease; /* Transición suave */
  display: none;
  cursor: pointer;
}

#buy-button:hover {
  background-color: #ffd700; /* Color más brillante al pasar el cursor */
  transform: translate(-50%, -50%) scale(1.1); /* Efecto de zoom al pasar el cursor */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Sombra más marcada */
}

#card-img-container-1:hover .card-img-top,
#card-img-container-2:hover .card-img-top,
#card-img-container-3:hover .card-img-top {
  filter: blur(5px);
}

#card-img-container-1:hover #buy-button,
#card-img-container-2:hover #buy-button,
#card-img-container-3:hover #buy-button {
  display: block;
}



/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
  nav {
    grid-template-rows: auto; /* Cambia a una fila si es necesario */
  }
  
  #card-img-container-1,
  #card-img-container-2,
  #card-img-container-3 {
    height: auto; /* Ajusta el tamaño dinámico */
  }
  
  #buy-button {
    font-size: 14px; /* Reduce el tamaño de fuente */
    padding: 8px 16px; /* Ajusta el padding para pantallas pequeñas */
  }
}