/* styles/stylesindex.css */ 
/* Contenedor de negocio: centrado y con margen inferior */
.negocio { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  margin-bottom: 20px; 
  position: relative; 
} 

/* Imagen del negocio: ajuste automático */
.negocio img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
} 

/* Grid de productos: 4 columnas con espacio entre elementos */
.productos { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 10px; 
} 

/* Contenedor del producto: centrado y relativo */
.producto-item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  position: relative; 
} 

/* Estilo de los spans del producto: bordes redondeados y padding */
.producto-item span { 
  border-radius: 6px; 
  padding: 5px; 
} 

/* Nombre del producto: arriba a la izquierda con fondo negro */
.producto-item span.nombre { 
  position: absolute; 
  top: -15%; 
  left: 0; 
  background-color: black; 
  color: white; 
} 

/* Precio del producto: arriba a la derecha con fondo rojo */
.producto-item span.precio { 
  position: absolute; 
  top: -5%; 
  right: 0; 
  background-color: red; 
  color: white; 
} 

/* Existencias del producto: abajo a la izquierda con fondo gris */
.producto-item span.existencias-unidad { 
  position: absolute; 
  bottom: 5; 
  left: 5; 
  background-color: grey; 
  color: white; 
} 

/* Imagen del producto: ajuste a 200px y cubriendo el área */
.producto-item img { 
  width: 200px; 
  height: 200px; 
  object-fit: cover; 
} 

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) { 
  .productos { 
    grid-template-columns: repeat(3, 1fr); 
  } 
  .producto-item img { 
    width: 150px; 
    height: 150px; 
  } 
}