#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #bc7fcd;
    overflow-x: auto;
}

#menu td {
    text-align: center;
    padding: 5px;
    white-space: nowrap; /* evita que se corte el texto */
}

#menu td:hover {
    background-color: #7cbed4;
}

#menu a {
    font-family: Poppins, sans-serif;
    font-size: 13px;
    color: white;
    text-decoration: none;
    display: block;
}

.categoria {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 15px;
}

.categoria img {
	width: 450px;
	max-width: 800px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.3s ease;
}

.categoria img:hover {
	transform: scale(1.05);
}

/* Responsivo para pantallas medianas (tablets) */
	@media (max-width: 768px) {
	.categoria img {
	width: 45%;
	}
	}

/* Responsivo para celulares */
	@media (max-width: 480px) {
	.categoria img {
	width: 90%;
	}
	}
#texto
{
	font-size: 15px;
	font-family: Poppins;
}
#precio
{
	text-align:center;
	font-family:Poppins;
	font-size: 25px;
	color:black	;
	background-color: #60d0db;}
.precio2
{
	position: absolute;
	top: 550px;  /* vertical */
  	left: 10px; /* horizontal */
  	width: 200px;
  	height: 35px;
	text-align:center;
	font-family:Poppins;
	font-size: 25px;
	color:black	;
	background-color: #60d0db;}
#titulos
{
	text-align:center;
	font-family:Poppins;
	font-size: 30px;
	color:black	;
	background-color:#a09dcf;
}
/*.circulo {
  width: 30px;
  height: 30px;
  background-color: #7cbed4;
  border-radius: 50%;
}.margen {
  margin-left: 100px; /* mueve a la derecha margin-top: -25px;   /* mueve hacia abajo }*/

.fila {
  position: relative; /* Contenedor relativo para referencia absoluta */
  width: 90px; /* ancho para que veas los movimientos */
  height: 40px;
  border: 1px solid #ccc;
}
.texto {
  position: absolute; /* posición manual */
  top: -10px;          /* lo mueves hacia arriba (puedes cambiar este valor) */
  left: 120px;         /* lo mueves hacia la izquierda */
  font-family: serif;
  font-size: 15px;
}
.texto1 {
  position: absolute; /* posición manual */
  top: -10px;          /* lo mueves hacia arriba (puedes cambiar este valor) */
  left: 100px;         /* lo mueves hacia la izquierda */
  font-family: serif;
  font-size: 15px;
}
.circulo {
  position: absolute;  /* posición manual */
  top: -20px;  /* vertical */
  left: 70px; /* horizontal */
  width: 40px;
  height:40px;
  background-color: #8d9296;
  border-radius: 50%;
}
.circulo1 {
  position: absolute;  /* posición manual */
  top: -20px;  /* vertical */
  left: 150px; /* horizontal */
  width: 40px;
  height:40px;
  background-color: #8d9296;
  border-radius: 50%;
}