/* ==========================================================================
   Euskolabs — Nav Pills V2.1 — Botones principales con fondo claro + texto oscuro
   Cargar DESPUÉS de nav-pills.css original
   ========================================================================== */

/* === Base pill-secondary (pequeños interiores — sin cambios, están bien) === */
.nav-pill.pill-secondary {
  font-size: 0.74rem;
  padding: 0.42rem 0.8rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #94a3b8;
  font-weight: 600;
}
.nav-pill.pill-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* === COLORES PROPIOS por botón secundario (mantienen estilo oscuro) === */
.nav-pill.pill-saas {
  border-color: rgba(236, 72, 153, 0.4);
  color: #f472b6;
  background: rgba(236, 72, 153, 0.08);
}
.nav-pill.pill-saas:hover {
  background: rgba(236, 72, 153, 0.18);
  border-color: #ec4899;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-saas .pill-dot { background: #ec4899; opacity: 1; box-shadow: 0 0 6px #ec4899; }
.nav-pill.pill-saas .pill-badge {
  background: rgba(236, 72, 153, 0.2);
  border-color: rgba(236, 72, 153, 0.5);
  color: #f472b6;
}

.nav-pill.pill-ai {
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.08);
}
.nav-pill.pill-ai:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-ai .pill-dot { background: #6366f1; opacity: 1; box-shadow: 0 0 6px #6366f1; }
.nav-pill.pill-ai .pill-badge {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
}

.nav-pill.pill-osint {
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.08);
}
.nav-pill.pill-osint:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-osint .pill-dot { background: #f59e0b; opacity: 1; box-shadow: 0 0 6px #f59e0b; }
.nav-pill.pill-osint .pill-badge {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.nav-pill.pill-web {
  border-color: rgba(6, 182, 212, 0.4);
  color: #22d3ee;
  background: rgba(6, 182, 212, 0.08);
}
.nav-pill.pill-web:hover {
  background: rgba(6, 182, 212, 0.18);
  border-color: #06b6d4;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-web .pill-dot { background: #06b6d4; opacity: 1; box-shadow: 0 0 6px #06b6d4; }

.nav-pill.pill-blog {
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
}
.nav-pill.pill-blog:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-blog .pill-dot { background: #10b981; opacity: 1; box-shadow: 0 0 6px #10b981; }

.nav-pill.pill-faq {
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}
.nav-pill.pill-faq:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: #a855f7;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-faq .pill-dot { background: #a855f7; opacity: 1; box-shadow: 0 0 6px #a855f7; }

.nav-pill.pill-glosario {
  border-color: rgba(244, 63, 94, 0.4);
  color: #fb7185;
  background: rgba(244, 63, 94, 0.08);
}
.nav-pill.pill-glosario:hover {
  background: rgba(244, 63, 94, 0.18);
  border-color: #f43f5e;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-glosario .pill-dot { background: #f43f5e; opacity: 1; box-shadow: 0 0 6px #f43f5e; }

.nav-pill.pill-about {
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}
.nav-pill.pill-about:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-about .pill-dot { background: #38bdf8; opacity: 1; box-shadow: 0 0 6px #38bdf8; }

.nav-pill.pill-more {
  border-color: rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.08);
}
.nav-pill.pill-more:hover {
  background: rgba(148, 163, 184, 0.18);
  border-color: #94a3b8;
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.3);
  transform: translateY(-2px);
}
.nav-pill.pill-more .pill-dot { background: #94a3b8; opacity: 1; }

.nav-pill.pill-roi {
  border-color: rgba(132, 204, 22, 0.4);
  color: #a3e635;
  background: rgba(132, 204, 22, 0.08);
}
.nav-pill.pill-roi:hover {
  background: rgba(132, 204, 22, 0.18);
  border-color: #84cc16;
  box-shadow: 0 0 16px rgba(132, 204, 22, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-roi .pill-dot { background: #84cc16; opacity: 1; box-shadow: 0 0 6px #84cc16; }

.nav-pill.pill-filosofia {
  border-color: rgba(139, 92, 246, 0.4);
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.08);
}
.nav-pill.pill-filosofia:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: #8b5cf6;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}
.nav-pill.pill-filosofia .pill-dot { background: #8b5cf6; opacity: 1; box-shadow: 0 0 6px #8b5cf6; }

/* ═══════════════════════════════════════════════════════════
   BOTONES PRINCIPALES (GRANDES) — FONDO CLARO + TEXTO OSCURO
   ═══════════════════════════════════════════════════════════ */

/* 1. Diseño Web (Oro) — fondo dorado claro, texto oscuro */
.nav-pill.pill-art {
  background: rgba(251, 191, 36, 0.9) !important;
  border: 2px solid #fbbf24 !important;
  color: #1a1a2e !important;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3) !important;
}
.nav-pill.pill-art .pill-dot { background: #1a1a2e !important; opacity: 1; }
.nav-pill.pill-art .pill-badge {
  background: rgba(26, 26, 46, 0.15);
  border-color: rgba(26, 26, 46, 0.3);
  color: #1a1a2e;
}
.nav-pill.pill-art:hover {
  background: rgba(251, 191, 36, 1) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 6px 28px rgba(251, 191, 36, 0.5) !important;
  transform: translateY(-2px);
}
.nav-pill.pill-art:hover .pill-dot { box-shadow: 0 0 8px rgba(26,26,46,0.6); }

/* 2. Eusko Tech (Cian neón) — fondo cian claro, texto oscuro */
.nav-pill.pill-tech {
  background: rgba(0, 240, 255, 0.85) !important;
  border: 2px solid #00f0ff !important;
  color: #0a1a2e !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.3) !important;
}
.nav-pill.pill-tech .pill-dot { background: #0a1a2e !important; opacity: 1; }
.nav-pill.pill-tech .pill-badge {
  background: rgba(10, 26, 46, 0.15);
  border-color: rgba(10, 26, 46, 0.3);
  color: #0a1a2e;
}
.nav-pill.pill-tech:hover {
  background: rgba(0, 240, 255, 1) !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 6px 28px rgba(0, 240, 255, 0.5) !important;
  transform: translateY(-2px);
}

/* 3. IA para PyMEs (Esmeralda) — fondo esmeralda claro, texto oscuro */
.nav-pill.pill-pymes {
  background: rgba(16, 185, 129, 0.85) !important;
  border: 2px solid #10b981 !important;
  color: #0a1f1a !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3) !important;
}
.nav-pill.pill-pymes .pill-dot { background: #0a1f1a !important; opacity: 1; }
.nav-pill.pill-pymes .pill-badge {
  background: rgba(10, 31, 26, 0.15);
  border-color: rgba(10, 31, 26, 0.3);
  color: #0a1f1a;
}
.nav-pill.pill-pymes:hover {
  background: rgba(16, 185, 129, 1) !important;
  border-color: #059669 !important;
  box-shadow: 0 6px 28px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-2px);
}

/* 4. Global Work (Sky) — fondo sky claro, texto oscuro */
.nav-pill.pill-global-work {
  background: rgba(56, 189, 248, 0.85) !important;
  border: 2px solid #38bdf8 !important;
  color: #0a1828 !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.3) !important;
}
.nav-pill.pill-global-work .pill-dot { background: #0a1828 !important; opacity: 1; box-shadow: 0 0 6px #0a1828; }
.nav-pill.pill-global-work .pill-badge {
  background: rgba(10, 24, 40, 0.15);
  border-color: rgba(10, 24, 40, 0.3);
  color: #0a1828;
}
.nav-pill.pill-global-work:hover {
  background: rgba(56, 189, 248, 1) !important;
  border-color: #0ea5e9 !important;
  box-shadow: 0 6px 28px rgba(56, 189, 248, 0.5) !important;
  transform: translateY(-2px);
}

/* 5. SaaS Factory (Fucsia) — fondo fucsia claro, texto oscuro */
.nav-pill.pill-saas {
  background: rgba(236, 72, 153, 0.85) !important;
  border: 2px solid #ec4899 !important;
  color: #2a0a1a !important;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3) !important;
}
.nav-pill.pill-saas .pill-dot { background: #2a0a1a !important; opacity: 1; }
.nav-pill.pill-saas .pill-badge {
  background: rgba(42, 10, 26, 0.15);
  border-color: rgba(42, 10, 26, 0.3);
  color: #2a0a1a;
}
.nav-pill.pill-saas:hover {
  background: rgba(236, 72, 153, 1) !important;
  border-color: #db2777 !important;
  box-shadow: 0 6px 28px rgba(236, 72, 153, 0.5) !important;
  transform: translateY(-2px);
}

/* 6. AI Agents (Índigo) — fondo índigo claro, texto oscuro */
.nav-pill.pill-ai {
  background: rgba(99, 102, 241, 0.85) !important;
  border: 2px solid #6366f1 !important;
  color: #0a0a2a !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3) !important;
}
.nav-pill.pill-ai .pill-dot { background: #0a0a2a !important; opacity: 1; }
.nav-pill.pill-ai .pill-badge {
  background: rgba(10, 10, 42, 0.15);
  border-color: rgba(10, 10, 42, 0.3);
  color: #0a0a2a;
}
.nav-pill.pill-ai:hover {
  background: rgba(99, 102, 241, 1) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 6px 28px rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-2px);
}

/* 7. OSINT (Ámbar) — fondo ámbar claro, texto oscuro */
.nav-pill.pill-osint {
  background: rgba(245, 158, 11, 0.85) !important;
  border: 2px solid #f59e0b !important;
  color: #2a1a0a !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3) !important;
}
.nav-pill.pill-osint .pill-dot { background: #2a1a0a !important; opacity: 1; }
.nav-pill.pill-osint .pill-badge {
  background: rgba(42, 26, 10, 0.15);
  border-color: rgba(42, 26, 10, 0.3);
  color: #2a1a0a;
}
.nav-pill.pill-osint:hover {
  background: rgba(245, 158, 11, 1) !important;
  border-color: #d97706 !important;
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.5) !important;
  transform: translateY(-2px);
}

/* === Dropdown "Más" mejorado === */
.nav-dropdown-menu {
  background: rgba(7, 8, 12, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 0.5rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}
.nav-dropdown-menu a {
  display: block !important;
  padding: 0.6rem 1rem !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
}
.nav-dropdown-menu a:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
  padding-left: 1.2rem !important;
}