/* === EFECTOS HOVER MEJORADOS v2.2 ===
   Añadir al final de nav-pills-v2.css
   Efectos: escala + glow intenso + destello + borde animado === */

/* Transición base más dramática para todos los pills principales */
.nav-pill.pill-art,
.nav-pill.pill-tech,
.nav-pill.pill-pymes,
.nav-pill.pill-global-work,
.nav-pill.pill-saas,
.nav-pill.pill-ai,
.nav-pill.pill-osint {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  overflow: visible;
}

/* === HOVER: escala 1.08 + glow doble + elevación === */

/* 1. Diseño Web (Oro) */
.nav-pill.pill-art:hover {
  background: rgba(251, 191, 36, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.6), 0 0 24px rgba(251, 191, 36, 0.4) !important;
  color: #1a1a2e !important;
}
.nav-pill.pill-art:hover .pill-dot {
  background: #1a1a2e !important;
  box-shadow: 0 0 12px rgba(26,26,46,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-art:hover .pill-badge {
  background: rgba(26, 26, 46, 0.25);
  border-color: rgba(26, 26, 46, 0.5);
}

/* 2. Eusko Tech (Cian) */
.nav-pill.pill-tech:hover {
  background: rgba(0, 240, 255, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(0, 240, 255, 0.6), 0 0 24px rgba(0, 240, 255, 0.4) !important;
  color: #0a1a2e !important;
}
.nav-pill.pill-tech:hover .pill-dot {
  background: #0a1a2e !important;
  box-shadow: 0 0 12px rgba(10,26,46,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-tech:hover .pill-badge {
  background: rgba(10, 26, 46, 0.25);
  border-color: rgba(10, 26, 46, 0.5);
}

/* 3. IA PyMEs (Esmeralda) */
.nav-pill.pill-pymes:hover {
  background: rgba(16, 185, 129, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.6), 0 0 24px rgba(16, 185, 129, 0.4) !important;
  color: #0a1f1a !important;
}
.nav-pill.pill-pymes:hover .pill-dot {
  background: #0a1f1a !important;
  box-shadow: 0 0 12px rgba(10,31,26,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-pymes:hover .pill-badge {
  background: rgba(10, 31, 26, 0.25);
  border-color: rgba(10, 31, 26, 0.5);
}

/* 4. Global Work (Sky) */
.nav-pill.pill-global-work:hover {
  background: rgba(56, 189, 248, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.6), 0 0 24px rgba(56, 189, 248, 0.4) !important;
  color: #0a1828 !important;
}
.nav-pill.pill-global-work:hover .pill-dot {
  background: #0a1828 !important;
  box-shadow: 0 0 12px rgba(10,24,40,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-global-work:hover .pill-badge {
  background: rgba(10, 24, 40, 0.25);
  border-color: rgba(10, 24, 40, 0.5);
}

/* 5. SaaS Factory (Fucsia) */
.nav-pill.pill-saas:hover {
  background: rgba(236, 72, 153, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.6), 0 0 24px rgba(236, 72, 153, 0.4) !important;
  color: #2a0a1a !important;
}
.nav-pill.pill-saas:hover .pill-dot {
  background: #2a0a1a !important;
  box-shadow: 0 0 12px rgba(42,10,26,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-saas:hover .pill-badge {
  background: rgba(42, 10, 26, 0.25);
  border-color: rgba(42, 10, 26, 0.5);
}

/* 6. AI Agents (Índigo) */
.nav-pill.pill-ai:hover {
  background: rgba(99, 102, 241, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6), 0 0 24px rgba(99, 102, 241, 0.4) !important;
  color: #0a0a2a !important;
}
.nav-pill.pill-ai:hover .pill-dot {
  background: #0a0a2a !important;
  box-shadow: 0 0 12px rgba(10,10,42,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-ai:hover .pill-badge {
  background: rgba(10, 10, 42, 0.25);
  border-color: rgba(10, 10, 42, 0.5);
}

/* 7. OSINT (Ámbar) */
.nav-pill.pill-osint:hover {
  background: rgba(245, 158, 11, 1) !important;
  border-color: #fff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.6), 0 0 24px rgba(245, 158, 11, 0.4) !important;
  color: #2a1a0a !important;
}
.nav-pill.pill-osint:hover .pill-dot {
  background: #2a1a0a !important;
  box-shadow: 0 0 12px rgba(42,26,10,0.8) !important;
  transform: scale(1.4);
}
.nav-pill.pill-osint:hover .pill-badge {
  background: rgba(42, 26, 10, 0.25);
  border-color: rgba(42, 26, 10, 0.5);
}

/* === HOVER en pills secundarios pequeños también con escala === */
.nav-pill.pill-roi:hover,
.nav-pill.pill-filosofia:hover,
.nav-pill.pill-more:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

.nav-pill.pill-blog:hover,
.nav-pill.pill-faq:hover,
.nav-pill.pill-glosario:hover,
.nav-pill.pill-about:hover,
.nav-pill.pill-web:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-width: 1.5px !important;
}

/* === Pulsación del pill-dot al hover === */
.nav-pill:hover .pill-dot {
  animation: dotPulse 0.8s ease-in-out infinite alternate !important;
}
@keyframes dotPulse {
  from { transform: scale(1); }
  to { transform: scale(1.4); }
}

/* === Brillo del badge al hover === */
.nav-pill:hover .pill-badge {
  animation: badgeShine 0.6s ease !important;
}
@keyframes badgeShine {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.9; }
}