/* ===========================
   BOTÓN COMENZAR BASE
=========================== */

.btn-comenzar {
  display: inline-block;
  margin-top: 60px;
  background: linear-gradient(135deg, #00b3ff, #0ff);
  color: #000;
  font-weight: 600;
  padding: 20px 60px;
  border-radius: 60px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 35px rgba(0, 255, 255, 0.35);
  animation: pulseStart 2.5s infinite ease-in-out;
  letter-spacing: 0.6px;
  font-size: 1.25rem;
}

.btn-comenzar:hover {
  background: linear-gradient(135deg, #0ff, #00b3ff);
  transform: scale(1.08);
  box-shadow: 0 0 50px rgba(0, 255, 255, 0.7);
}

@keyframes pulseStart {
  0%, 100% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.4); }
  50% { box-shadow: 0 0 50px rgba(0, 255, 255, 0.8); }
}

/* ===========================
   VARIANTES DE COLOR
=========================== */

/* Azul (por defecto) */
.btn-comenzar.azul {
  background: linear-gradient(135deg, #00b3ff, #0ff);
}

/* Verde */
.btn-comenzar.verde {
  background: linear-gradient(135deg, #00ffb3, #00c27a);
}

/* Rojo */
.btn-comenzar.rojo {
  background: linear-gradient(135deg, #ff5c5c, #ff9999);
}

/* Morado */
.btn-comenzar.morado {
  background: linear-gradient(135deg, #b066ff, #7a00ff);
}