/* Botón personalizado con efecto 3D - Base */
.custom-btn-3d {
  /* Variables CSS personalizadas */
  --btn-3d-radius: 0.75em;
  --btn-3d-bg: #262425;
  --btn-3d-accent: #ffbf00;
  
  font-size: 17px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  border-radius: var(--btn-3d-radius);
  background: var(--btn-3d-accent);
  padding: 0;
  transition: transform 0.1s ease;
  width: 100%;
}

.custom-btn-3d__surface {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--btn-3d-accent);
  border-radius: var(--btn-3d-radius);
  padding: 6px;
  background: var(--btn-3d-bg);
  color: var(--btn-3d-accent);
  transform: translateY(-0.2em);
  transition: transform 0.1s ease;
  text-align: center;
}

.custom-btn-3d:hover .custom-btn-3d__surface {
  transform: translateY(-0.33em);
}

.custom-btn-3d:active .custom-btn-3d__surface {
  transform: translateY(0);
}

/* Variante Azul */
.custom-btn-3d.blue {
  --btn-3d-accent: #3b82f6;
  --btn-3d-bg: #1e3a8a;
}

.custom-btn-3d.blue .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Verde */
.custom-btn-3d.green {
  --btn-3d-accent: #10b981;
  --btn-3d-bg: #065f46;
}

.custom-btn-3d.green .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Rojo */
.custom-btn-3d.red {
  --btn-3d-accent: #ef4444;
  --btn-3d-bg: #991b1b;
}

.custom-btn-3d.red .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Morado */
.custom-btn-3d.purple {
  --btn-3d-accent: #a855f7;
  --btn-3d-bg: #6b21a8;
}

.custom-btn-3d.purple .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Rosa */
.custom-btn-3d.pink {
  --btn-3d-accent: #ec4899;
  --btn-3d-bg: #9f1239;
}

.custom-btn-3d.pink .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Naranja */
.custom-btn-3d.orange {
  --btn-3d-accent: #f97316;
  --btn-3d-bg: #9a3412;
}

.custom-btn-3d.orange .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Cian */
.custom-btn-3d.cyan {
  --btn-3d-accent: #06b6d4;
  --btn-3d-bg: #164e63;
}

.custom-btn-3d.cyan .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Amarillo (original) */
.custom-btn-3d.yellow {
  --btn-3d-accent: #ffbf00;
}

/* Variante Gris */
.custom-btn-3d.gray {
  --btn-3d-accent: #6b7280;
  --btn-3d-bg: #1f2937;
}

.custom-btn-3d.gray .custom-btn-3d__surface {
  color: #ffffff;
}

/* Variante Negro */
.custom-btn-3d.black {
  --btn-3d-accent: #374151;
  --btn-3d-bg: #000000;
}

.custom-btn-3d.black .custom-btn-3d__surface {
  color: #ffffff;
}


/* Variante Blanco */
.custom-btn-3d.white {
  --btn-3d-accent: #adb5bd;
  --btn-3d-bg: #e9ecef;
}

.custom-btn-3d.white .custom-btn-3d__surface {
  color: #1f2937;
}