.productos {
  padding-top: 114px;
  font-family: "Poppins", sans-serif;
}

/* Estilo para la cuadrícula de productos */
.center-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 1rem 0rem 1rem;
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); /* Muestra 4 columnas por fila */
  gap: 20px; /* Ajusta el espacio entre los productos según tus preferencias */
  max-width: 1200px; /* Máximo ancho de la cuadrícula */
  /* margin: 0 8rem; */
}

/* Estilo para cada producto dentro de la cuadrícula */
.producto {
  padding: 20px;
  text-align: center;
  /* min-width: 125px; */
}

/* Estilo para la imagen del producto */
.producto-img img {
  max-width: 100%;
  height: auto;
}

/* Ajuste para el texto dentro de los productos */
.descripcion-producto {
  margin-top: 20px;
  text-align: left; /* Alinea el texto a la izquierda */
}

/* Estilo para el nombre del producto */
.descripcion-producto .nombre {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

/* Estilo para el precio del producto */
.descripcion-producto .precio {
  font-size: 16px;
}

/* Estilo para la línea gris */
.linea-gris {
  width: 100%;
  height: 2px;
  background-color: #959595;
  margin: 15px 0; /* Ajusta el margen según tus preferencias */
}

/* Estilo para la sección de compra */
.compra {
  margin-top: 15px;
}

/* Estilo para el texto "Seleccione Cantidad" */
.compra p {
  font-size: 10px;
  margin-bottom: 5px;
  font-weight: bold;
}

/* Estilo para el botón del dropdown y el botón de añadir al carrito */
.dropdown-compra {
  position: relative;
}

.dropdown-compra button,
.carrito {
  border: 1px solid #000; /* Borde negro de 1px */
  border-radius: 20px; /* Bordes redondeados */
  padding: 5px 10px 5px 10px; /* Ajusta el espacio interno según tus preferencias */
  cursor: pointer;
  background-color: #fff; /* Fondo blanco */
  font-size: 12px;
  width: 95%;
}

/* Estilo para el botón del dropdown */
.dropdown-compra button {
  margin-right: 10px; /* Ajusta el margen derecho según tus preferencias */
}

/* Estilo para el botón del dropdown cuando está abierto */
.dropdown-compra button:hover,
.dropdown-compra button:focus,
.carrito:hover,
.carrito:focus {
  background-color: #ddd; /* Cambia el fondo al pasar el ratón o hacer foco */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 100%;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown-compra:hover .dropdown-content {
  display: block;
}

.dropdown-compra:hover .dropbtn {
  background-color: #ccc;
}