/* ==========================================
   EFECTOS HOVER / ACTIVE
   Generados a partir de los atributos style-hover y style-active
   del prototipo original. Cada regla corresponde a un elemento
   interactivo (enlaces del menú, botones, tarjetas).
========================================== */

.jd-hover-0:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.07);
}

.jd-hover-1:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb),0.38), inset 0 1px 0 rgba(255,255,255,0.25);
}

.jd-active-2:active {
  transform: scale(0.97);
}

.jd-hover-3:hover {
  color: var(--accent);
}

.jd-active-4:active {
  transform: scale(0.98);
}

.jd-hover-5:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(var(--accent-rgb),0.42), inset 0 1px 0 rgba(255,255,255,0.25);
}

.jd-hover-6:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -18px rgba(var(--accent-rgb),0.22);
  border-color: var(--border-hover);
}

.jd-hover-7:hover {
  color: var(--accent-deep);
  gap: 12px;
}

.jd-hover-8:hover {
  background: rgba(var(--accent-rgb),0.09);
  transform: translateY(-2px);
}

.jd-hover-9:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(var(--shadow-rgb),0.4);
  border-color: rgba(var(--accent-rgb),0.3);
}

.jd-hover-a:hover {
  transform: translateY(-2px);
  background: var(--accent-hover);
  color: #FFFFFF;
  box-shadow: 0 20px 44px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.22);
}

.jd-hover-b:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(var(--accent-rgb),0.42);
}

.jd-hover-c:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.jd-hover-d:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
}