/* Menú con fondo claro */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #f7eacb;
  /* Fondo claro */
}

.navbar .nav-link,
.navbar-brand {
  color: #6d4c41 !important;
  /* Texto oscuro en el menú */
}

body {
  padding-top: 70px;
  background-color: #fdf8f2;
  /* Fondo claro para el cuerpo */
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  background-color: #fff8ee;
  /* Fondo suave para las tarjetas */
}

.card:hover {
  transform: scale(1.05);
}

.dropdown-menu img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

/* Sección de bienvenida con fondo oscuro */
header {
  background-color: #6d4c41;
  /* Fondo oscuro */
  color: #f7eacb;
  /* Texto claro */
}

.product-card {
  background-color: #fff8ee;
  /* Fondo suave para productos */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
}

.product-card img {
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.product-card h5 {
  font-size: 1.2rem;
  color: #6d4c41;
  margin-top: 10px;
}

.product-card .price {
  font-size: 1.1rem;
  color: #e91e63;
  margin-top: 5px;
}

.product-card .btn {
  background-color: #6d4c41;
  color: white;
  border-radius: 5px;
  margin-top: 10px;
}

.product-card .btn:hover {
  background-color: #4e3629;
}

/* Estilos para el botón de WhatsApp flotante */
.whatsapp-button {
  position: fixed;
  /* Fija el botón en la ventana */
  left: 20px;
  /* Lo coloca en la parte izquierda */
  bottom: 20px;
  /* Lo coloca en la parte inferior */
  width: 60px;
  /* Ancho del botón */
  height: 60px;
  /* Alto del botón */
  background-color: #25d366;
  /* Color de fondo de WhatsApp */
  border-radius: 50%;
  /* Hace el botón circular */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra suave */
  cursor: pointer;
  z-index: 1000;
  /* Asegura que el botón esté por encima de otros elementos */
}

.whatsapp-button i {
  color: white;
  /* Color del icono de WhatsApp */
  font-size: 30px;
  /* Tamaño del icono */
}

.color-container {
  display: flex;
  /* Muestra los cuadros de colores en línea */
  gap: 10px;
  /* Espacio entre los cuadros */
}

.color-box {
  width: 35px;
  /* Ancho del cuadro */
  height: 35px;
  /* Alto del cuadro */
  border-radius: 50%;
  /* Bordes redondeados */
  border: 2px solid #ccc;
  /* Borde gris claro */
  cursor: pointer;
  /* Cambia el cursor cuando se pasa sobre el cuadro */
  transition: transform 0.3s ease;
  /* Transición para un efecto suave */
}

.color-box:hover {
  transform: scale(1.1);
  /* Efecto de agrandar al pasar el ratón */
}

/* Ejemplo de colores */
.color-1 {
  background-color: #FF5733;
  /* Color naranja */
}

.color-2 {
  background-color: #33FF57;
  /* Color verde */
}

.color-3 {
  background-color: #3357FF;
  /* Color azul */
}

.color-4 {
  background-color: #F33FFF;
  /* Color rosa */
}