/* ESTILOS BÁSICOS PARA TODOS LOS PRODUCTOS */
.producto {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto ;
  max-width: 100%;
}

/* Contenedor de imágenes */
.imagen-contenedor {
  position: relative;
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}

/* Todas las imágenes */
.img-producto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

/* Imagen base visible */
.img-producto.base {
  opacity: 1;
  visibility: visible;
}

/* Imagen activa */
.img-producto.active {
  opacity: 1;
  visibility: visible;
}

/* Contenedor de colores */
.contenedor-colores {
  padding: 15px;
  background: #000;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.titulo-colores {
  text-align: center;
  font-size: 23px;
  color: #666;
  margin-bottom: 15px;
  font-weight: 500;
}

/* Colores */
.colores {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.color {
  width: 35px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.color:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Color seleccionado */
.color.seleccionado {
  border: 3px solid #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
  transform: scale(1.1);
}

.color.seleccionado::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* Colores específicos */
.color-negro { background: #000; }
.color-gris { background: #666666; }
.color-rojo { background: #c00; }
.color-naranja { background: #FF6600; }
.color-amarillo { background: #f2c400; }
.color-azul { background: #0066CC; }
.color-verde { background: #009900; }
.color-blanco { background: #FFFFFF; border: 1px solid #ccc; }
.color-marron { background: #8B4513; }
.color-bordo { background: #800000; }
.color-violeta { background: #660099; }
.color-rosa { background: #FF66CC; }
.color-capri { background: #0099CC; }
.color-marino { background: #000066; }
.color-francia { background: #001FD1; }
.color-fuxia { background: #CC00CC; }
.color-beneton { background: #009900; }
.color-ingles { background: #006600; }