/*
 * JK-Hive Bootstrap Template
 * Honeycomb-inspired hexagonal design system
 * Author: JK
 * Version: 1.0.0
 */

/* ========================================
   1. CSS VARIABLES & COLOR SYSTEM - CYBERNETIC HIVE
   ======================================== */
:root {
  /* Primary Colors - Electric Blue (Tech & Energy) */
  --jk-primary-blue: #0ea5e9;
  --jk-primary-blue-light: #38bdf8;
  --jk-primary-blue-dark: #0284c7;
  --jk-primary-blue-darker: #075985;
  
  /* Secondary Colors - Cyber Teal (Innovation & Digital) */
  --jk-secondary-green: #14b8a6;
  --jk-secondary-green-light: #2dd4bf;
  --jk-secondary-green-dark: #0d9488;
  
  /* Accent Colors - Metallic Honey (Energy & Alert) */
  --jk-accent-honey: #d4a017;
  --jk-accent-honey-light: #f4c430;
  --jk-accent-honey-dark: #b8860b;
  
  /* Metallic Colors */
  --jk-metal-light: #e2e8f0;
  --jk-metal: #cbd5e1;
  --jk-metal-dark: #94a3b8;
  --jk-metal-darker: #64748b;
  
  /* Dark Tech Colors */
  --jk-tech-darker: #0f172a;
  --jk-tech-dark: #1e293b;
  --jk-tech-medium: #334155;
  --jk-tech-light: #475569;
  
  /* Neutral Colors */
  --jk-white: #ffffff;
  --jk-gray-50: #f8fafc;
  --jk-gray-100: #f1f5f9;
  --jk-gray-200: #e2e8f0;
  --jk-gray-300: #cbd5e1;
  --jk-gray-400: #94a3b8;
  --jk-gray-500: #64748b;
  --jk-gray-600: #475569;
  --jk-gray-700: #334155;
  --jk-gray-800: #1e293b;
  --jk-gray-900: #0f172a;
  
  /* Hexagon Dimensions */
  --hex-size: 80px;
  --hex-size-sm: 50px;
  --hex-size-lg: 120px;
  --hex-size-xl: 160px;
  
  /* Spacing */
  --jk-spacing-xs: 0.25rem;
  --jk-spacing-sm: 0.5rem;
  --jk-spacing-md: 1rem;
  --jk-spacing-lg: 1.5rem;
  --jk-spacing-xl: 2rem;
  
  /* Transitions */
  --jk-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --jk-transition-fast: all 0.15s ease-in-out;
  
  /* Shadows & Glows */
  --jk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --jk-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --jk-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --jk-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --jk-shadow-honey: 0 0 30px rgba(212, 160, 23, 0.7), 0 0 60px rgba(184, 134, 11, 0.4);
  --jk-glow-blue: 0 0 20px rgba(14, 165, 233, 0.5), 0 0 40px rgba(14, 165, 233, 0.3);
  --jk-glow-cyan: 0 0 20px rgba(20, 184, 166, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
  --jk-glow-neon: 0 0 30px rgba(244, 196, 48, 0.9), 0 0 60px rgba(212, 160, 23, 0.5), 0 0 90px rgba(184, 134, 11, 0.3);
}

/* ========================================
   2. GLOBAL STYLES - CYBERNETIC
   ======================================== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 50%, var(--jk-tech-darker) 100%);
  background-attachment: fixed;
  color: var(--jk-metal-light);
  overflow-x: hidden;
  position: relative;
}

/* Tech Grid Background Pattern */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* Animated Circuit Lines */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(20, 184, 166, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 40% 20%, rgba(212, 160, 23, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: techPulse 10s ease-in-out infinite;
}

@keyframes techPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

* {
  box-sizing: border-box;
}

/* ========================================
   3. HEXAGON BASE SHAPE - METALLIC TECH
   ======================================== */
.jkhive-hex {
  position: relative;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  background: linear-gradient(135deg, var(--jk-tech-medium) 0%, var(--jk-tech-dark) 100%);
  margin: calc(var(--hex-size) * 0.5774) 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: var(--jk-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--jk-shadow), inset 0 0 30px rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

/* Metallic Inner Border */
.jkhive-hex::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}

/* Tech Glow Effect */
.jkhive-hex::after {
  content: '';
  position: absolute;
  inset: -2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, 
    rgba(14, 165, 233, 0.3) 0%, 
    rgba(20, 184, 166, 0.2) 50%,
    rgba(14, 165, 233, 0.3) 100%);
  z-index: -1;
  opacity: 0;
  transition: var(--jk-transition);
}

/* Hexagon Sizes */
.jkhive-hex-sm {
  width: var(--hex-size-sm);
  height: calc(var(--hex-size-sm) * 1.1547);
  margin: calc(var(--hex-size-sm) * 0.5774) 0;
}

.jkhive-hex-lg {
  width: var(--hex-size-lg);
  height: calc(var(--hex-size-lg) * 1.1547);
  margin: calc(var(--hex-size-lg) * 0.5774) 0;
}

.jkhive-hex-xl {
  width: var(--hex-size-xl);
  height: calc(var(--hex-size-xl) * 1.1547);
  margin: calc(var(--hex-size-xl) * 0.5774) 0;
}

/* Hexagon with Honey Border */
.jkhive-hex-honey-border {
  border: 3px solid var(--jk-accent-honey);
  box-shadow: var(--jk-shadow-honey);
}

/* Hexagon Hover Effect - Tech Glow */
.jkhive-hex:hover {
  transform: scale(1.1);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue);
  filter: brightness(1.3);
  border-color: var(--jk-primary-blue);
}

.jkhive-hex:hover::after {
  opacity: 1;
  animation: techGlow 2s ease-in-out infinite;
}

@keyframes techGlow {
  0%, 100% {
    opacity: 0.5;
    filter: blur(10px);
  }
  50% {
    opacity: 1;
    filter: blur(15px);
  }
}

/* Hexagon Content */
.jkhive-hex-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--jk-metal-light);
  padding: var(--jk-spacing-md);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.jkhive-hex-icon {
  font-size: 1.5rem;
  margin-bottom: var(--jk-spacing-xs);
}

.jkhive-hex-text {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* ========================================
   4. HEXAGON COLOR VARIANTS - METALLIC
   ======================================== */
.jkhive-hex-primary {
  background: linear-gradient(135deg, var(--jk-primary-blue-dark) 0%, var(--jk-primary-blue) 50%, var(--jk-primary-blue-dark) 100%);
  box-shadow: var(--jk-shadow), var(--jk-glow-blue), inset 0 0 30px rgba(14, 165, 233, 0.2);
  border-color: var(--jk-primary-blue-light);
}

.jkhive-hex-primary-light {
  background: linear-gradient(135deg, var(--jk-primary-blue) 0%, var(--jk-primary-blue-light) 50%, var(--jk-primary-blue) 100%);
  box-shadow: var(--jk-shadow), var(--jk-glow-blue), inset 0 0 30px rgba(56, 189, 248, 0.2);
}

.jkhive-hex-primary-dark {
  background: linear-gradient(135deg, var(--jk-primary-blue-darker) 0%, var(--jk-primary-blue-dark) 50%, var(--jk-primary-blue-darker) 100%);
  box-shadow: var(--jk-shadow), inset 0 0 20px rgba(14, 165, 233, 0.3);
}

.jkhive-hex-secondary {
  background: linear-gradient(135deg, var(--jk-secondary-green-dark) 0%, var(--jk-secondary-green) 50%, var(--jk-secondary-green-dark) 100%);
  box-shadow: var(--jk-shadow), var(--jk-glow-cyan), inset 0 0 30px rgba(20, 184, 166, 0.2);
  border-color: var(--jk-secondary-green-light);
}

.jkhive-hex-secondary-light {
  background: linear-gradient(135deg, var(--jk-secondary-green) 0%, var(--jk-secondary-green-light) 50%, var(--jk-secondary-green) 100%);
  box-shadow: var(--jk-shadow), var(--jk-glow-cyan), inset 0 0 30px rgba(45, 212, 191, 0.2);
}

.jkhive-hex-secondary-dark {
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-secondary-green-dark) 50%, var(--jk-tech-dark) 100%);
  box-shadow: var(--jk-shadow), inset 0 0 20px rgba(20, 184, 166, 0.3);
}

.jkhive-hex-accent {
  background: linear-gradient(135deg, var(--jk-accent-honey-dark) 0%, var(--jk-accent-honey) 50%, var(--jk-accent-honey-dark) 100%);
  color: var(--jk-tech-darker);
  box-shadow: var(--jk-shadow), var(--jk-glow-neon), inset 0 0 40px rgba(212, 160, 23, 0.4);
  border-color: var(--jk-accent-honey-light);
}

.jkhive-hex-accent .jkhive-hex-content {
  color: var(--jk-tech-darker);
  text-shadow: 0 0 10px rgba(244, 196, 48, 1), 0 0 20px rgba(212, 160, 23, 0.6);
  font-weight: 700;
}

.jkhive-hex-white {
  background: linear-gradient(135deg, var(--jk-metal) 0%, var(--jk-metal-light) 50%, var(--jk-metal) 100%);
  color: var(--jk-tech-darker);
  border: 2px solid var(--jk-metal-dark);
  box-shadow: var(--jk-shadow), inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.jkhive-hex-white .jkhive-hex-content {
  color: var(--jk-tech-darker);
  text-shadow: none;
}

.jkhive-hex-dark {
  background: linear-gradient(135deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 50%, var(--jk-tech-darker) 100%);
  box-shadow: var(--jk-shadow-lg), inset 0 0 30px rgba(14, 165, 233, 0.15);
}

/* ========================================
   5. SIDEBAR NAVIGATION - CYBERNETIC
   ======================================== */
.jkhive-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 140px;
  height: 100vh;
  background: linear-gradient(180deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 50%, var(--jk-tech-darker) 100%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--jk-spacing-lg) 0;
  box-shadow: var(--jk-shadow-lg), inset -2px 0 20px rgba(14, 165, 233, 0.15);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 2px solid rgba(14, 165, 233, 0.3);
}

/* Tech Circuit Pattern on Sidebar */
.jkhive-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Hide scrollbar but keep functionality */
.jkhive-sidebar::-webkit-scrollbar {
  width: 6px;
}

.jkhive-sidebar::-webkit-scrollbar-track {
  background: var(--jk-tech-darker);
}

.jkhive-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--jk-accent-honey-light), var(--jk-accent-honey-dark));
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(212, 160, 23, 0.5);
}

.jkhive-sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--jk-accent-honey-light), var(--jk-accent-honey));
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.8);
}

/* Logo Hexagon */
.jkhive-sidebar-logo {
  margin-bottom: var(--jk-spacing-xl);
}

.jkhive-sidebar-logo a {
  text-decoration: none;
  color: inherit;
}

.jkhive-sidebar-logo a:hover,
.jkhive-sidebar-logo a:focus,
.jkhive-sidebar-logo a:active {
  text-decoration: none;
  color: inherit;
}

.jkhive-sidebar-logo .jkhive-hex {
  width: 90px;
  height: calc(90px * 1.1547);
  background: linear-gradient(135deg, var(--jk-accent-honey-dark) 0%, var(--jk-accent-honey) 50%, var(--jk-accent-honey-light) 70%, var(--jk-accent-honey) 100%);
  box-shadow: var(--jk-shadow-honey), 0 0 30px rgba(212, 160, 23, 0.6), inset 0 0 40px rgba(244, 196, 48, 0.3);
  margin: 0;
  border: 3px solid var(--jk-accent-honey-light);
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% {
    box-shadow: var(--jk-shadow-honey), 0 0 30px rgba(212, 160, 23, 0.7), inset 0 0 40px rgba(244, 196, 48, 0.3);
    border-color: var(--jk-accent-honey-light);
  }
  50% {
    box-shadow: var(--jk-shadow-honey), 0 0 50px rgba(244, 196, 48, 1), inset 0 0 60px rgba(244, 196, 48, 0.5);
    border-color: var(--jk-accent-honey-light);
  }
}

.jkhive-sidebar-logo .jkhive-hex-content {
  color: var(--jk-tech-darker);
  font-size: 1.75rem;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(244, 196, 48, 1), 0 0 30px rgba(212, 160, 23, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  align-items: center;
}

.jkhive-logo-main {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.jkhive-logo-divider {
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #0ea5e9 20%, #06b6d4 50%, #0ea5e9 80%, transparent 100%);
  box-shadow: 0 0 10px rgba(14, 165, 233, 1), 0 0 20px rgba(6, 182, 212, 0.6);
  margin: 0.2rem 0 0 0;
}

.jkhive-logo-sub {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-top: 0.05rem;
  line-height: 1;
  text-shadow: 0 0 10px rgba(244, 196, 48, 0.8), 0 0 20px rgba(212, 160, 23, 0.6);
}

/* Navigation Items - Honeycomb Pattern */
.jkhive-nav-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 10px;
}

.jkhive-nav-item {
  position: relative;
  margin: -12px 0;
  z-index: 1;
}

/* Z-index for hover and active states */
.jkhive-nav-item:hover,
.jkhive-nav-item.active {
  z-index: 10;
}

/* Honeycomb Pattern: Alternating horizontal offset for zig-zag effect */
.jkhive-nav-item:nth-child(even) {
  transform: translateX(21px);
}

.jkhive-nav-item:nth-child(odd) {
  transform: translateX(-22px);
}

.jkhive-nav-item .jkhive-hex {
  width: 85px;
  height: calc(85px * 1.1547);
  background: linear-gradient(135deg, var(--jk-tech-medium) 0%, var(--jk-tech-dark) 100%);
  margin: 0;
  border: 1px solid rgba(14, 165, 233, 0.3);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.4), 
    0 2px 4px -1px rgba(0, 0, 0, 0.3), 
    inset 0 0 20px rgba(14, 165, 233, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.jkhive-nav-item .jkhive-hex:hover {
  background: linear-gradient(135deg, var(--jk-primary-blue-dark) 0%, var(--jk-primary-blue) 100%);
  border-color: var(--jk-primary-blue-light);
  transform: scale(1.05);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue);
  position: relative;
  z-index: 5;
}

.jkhive-nav-item.active .jkhive-hex {
  background: linear-gradient(135deg, var(--jk-secondary-green-dark) 0%, var(--jk-secondary-green) 100%);
  border-color: var(--jk-secondary-green-light);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-cyan);
  animation: activeNavPulse 2s ease-in-out infinite;
  position: relative;
  z-index: 5;
}

@keyframes activeNavPulse {
  0%, 100% {
    box-shadow: var(--jk-shadow-lg), 0 0 20px rgba(20, 184, 166, 0.5);
  }
  50% {
    box-shadow: var(--jk-shadow-lg), 0 0 30px rgba(20, 184, 166, 0.8);
  }
}

.jkhive-nav-item .jkhive-hex-icon {
  font-size: 1.275rem;
  margin-bottom: 0.25rem;
}

.jkhive-nav-item .jkhive-hex-text {
  font-size: 0.5525rem;
  line-height: 1;
}

/* Submenu - Tech Style */
.jk-submenu {
  position: absolute;
  left: 120px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%);
  border-radius: 12px;
  padding: var(--jk-spacing-md);
  box-shadow: var(--jk-shadow-lg), 0 0 30px rgba(14, 165, 233, 0.3);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: var(--jk-transition);
  z-index: 1001;
  border: 2px solid var(--jk-primary-blue);
  backdrop-filter: blur(10px);
}

.jkhive-nav-item:hover .jk-submenu {
  opacity: 1;
  visibility: visible;
  left: 140px;
}

/* Adjust submenu position for honeycomb offset */
.jkhive-nav-item:nth-child(even):hover .jk-submenu {
  left: 160px;
}

.jkhive-nav-item:nth-child(odd):hover .jk-submenu {
  left: 120px;
}

.jk-submenu::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--jk-accent-honey) transparent transparent;
}

.jk-submenu-item {
  padding: var(--jk-spacing-sm) var(--jk-spacing-md);
  color: var(--jk-metal-light);
  text-decoration: none;
  display: block;
  border-radius: 8px;
  transition: var(--jk-transition-fast);
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 2px solid transparent;
}

.jk-submenu-item:hover {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.2) 0%, transparent 100%);
  color: var(--jk-primary-blue-light);
  transform: translateX(5px);
  border-left-color: var(--jk-primary-blue);
  box-shadow: inset 4px 0 10px rgba(14, 165, 233, 0.2);
}

/* ========================================
   6. MAIN CONTENT AREA
   ======================================== */
.jkhive-main-content {
  margin-left: 140px;
  margin-top: 70px;
  min-height: 100vh;
  padding: var(--jk-spacing-xl);
}

/* ========================================
   7. HEXAGON BUTTONS - TECH STYLE
   ======================================== */
.jkhive-btn-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 120px;
  height: calc(120px * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--jk-tech-medium) 0%, var(--jk-tech-dark) 100%);
  color: var(--jk-metal-light);
  border: none;
  cursor: pointer;
  transition: var(--jk-transition);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--jk-shadow), inset 0 0 20px rgba(14, 165, 233, 0.1);
  text-decoration: none;
  padding: var(--jk-spacing-md);
  text-align: center;
  border: 1px solid rgba(14, 165, 233, 0.3);
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.jkhive-btn-hex:hover {
  transform: scale(1.1) rotate(3deg);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue);
  filter: brightness(1.3);
  border-color: var(--jk-primary-blue);
}

.jkhive-btn-hex:active {
  transform: scale(1.05) rotate(3deg);
  box-shadow: var(--jk-shadow), inset 0 0 30px rgba(14, 165, 233, 0.3);
}

/* Button Variants */
.jkhive-btn-hex-primary {
  background: linear-gradient(135deg, var(--jk-primary-blue-dark) 0%, var(--jk-primary-blue) 50%, var(--jk-primary-blue-dark) 100%);
  border: 2px solid var(--jk-primary-blue-light);
  box-shadow: var(--jk-shadow), var(--jk-glow-blue), inset 0 0 30px rgba(14, 165, 233, 0.2);
}

.jkhive-btn-hex-primary:hover {
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue), inset 0 0 40px rgba(14, 165, 233, 0.3);
}

.jkhive-btn-hex-secondary {
  background: linear-gradient(135deg, var(--jk-secondary-green-dark) 0%, var(--jk-secondary-green) 50%, var(--jk-secondary-green-dark) 100%);
  border: 2px solid var(--jk-secondary-green-light);
  box-shadow: var(--jk-shadow), var(--jk-glow-cyan), inset 0 0 30px rgba(20, 184, 166, 0.2);
}

.jkhive-btn-hex-secondary:hover {
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-cyan), inset 0 0 40px rgba(20, 184, 166, 0.3);
}

.jkhive-btn-hex-accent {
  background: linear-gradient(135deg, var(--jk-accent-honey-dark) 0%, var(--jk-accent-honey) 50%, var(--jk-accent-honey-light) 70%, var(--jk-accent-honey) 100%);
  color: var(--jk-tech-darker);
  border: 2px solid var(--jk-accent-honey-light);
  box-shadow: var(--jk-shadow), var(--jk-glow-neon), inset 0 0 40px rgba(212, 160, 23, 0.4);
  text-shadow: 0 0 15px rgba(244, 196, 48, 1), 0 0 30px rgba(212, 160, 23, 0.6);
  font-weight: 900;
}

.jkhive-btn-hex-accent:hover {
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-neon), inset 0 0 50px rgba(244, 196, 48, 0.5);
  color: var(--jk-tech-darker);
}

/* Small Button */
.jkhive-btn-hex-sm {
  width: 80px;
  height: calc(80px * 1.1547);
  font-size: 0.75rem;
}

/* Large Button */
.jkhive-btn-hex-lg {
  width: 160px;
  height: calc(160px * 1.1547);
  font-size: 1.1rem;
}

/* Carousel Button (30% smaller total - 15% + 15%) */
.jkhive-btn-hex-carousel {
  width: 116px;
  height: calc(116px * 1.1547);
  transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
              background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8rem 0.5rem !important;
  margin: 0 auto;
  flex-direction: column;
  border: none !important;
  vertical-align: middle;
}

.jkhive-btn-hex-carousel #hero-carousel-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* ========================================
   HEXAGONAL GALLERY - HONEYCOMB PATTERN
   ======================================== */

/* Base Gallery Container */
.jkhive-hex-gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  padding: 2rem 0;
}

/* ========================================
   GALLERY BIG - 3 items per row (3-2-3-2) - HEXÁGONOS GRANDES
   ======================================== */
.jkhive-hex-gallery-big {
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 350px);
  gap: 0 5px; /* gap vertical 0, horizontal 5px */
  justify-content: center;
  padding: 30px 20px; /* Padding superior reducido 10px (40px → 30px) */
}

.jkhive-hex-gallery-big .jkhive-hex-gallery-item {
  width: 350px;
  height: 404px;
  margin: 0; /* Sin margin por defecto */
  position: relative;
  transition: transform 0.3s ease, z-index 0s;
}

/* Primera fila (hex 1, 2, 3) - sin margin negativo */
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(3) { grid-column: 3; grid-row: 1; }

/* Todas las filas después de la primera: margin-top negativo para superposición */
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(n+4) {
  margin-top: -96px; /* Reducido 5px más de superposición (-91px → -96px) */
}

/* Segunda fila desplazada (hex 4, 5) - 2 items centrados */
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(4) { 
  grid-column: 1 / 2; 
  grid-row: 2;
  transform: translateX(178.5px); /* Movido 1.5px a la izquierda */
}
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(5) { 
  grid-column: 2 / 3; 
  grid-row: 2;
  transform: translateX(178.5px); /* Movido 1.5px a la izquierda */
}

/* Tercera fila (hex 6, 7, 8) */
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(6) { grid-column: 1; grid-row: 3; }
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(7) { grid-column: 2; grid-row: 3; }
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(8) { grid-column: 3; grid-row: 3; }

/* Cuarta fila desplazada (hex 9, 10) */
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(9) { 
  grid-column: 1 / 2; 
  grid-row: 4;
  transform: translateX(178.5px); /* Movido 1.5px a la izquierda */
}
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(10) { 
  grid-column: 2 / 3; 
  grid-row: 4;
  transform: translateX(178.5px); /* Movido 1.5px a la izquierda */
}

.jkhive-hex-gallery-big .jkhive-hex-gallery-item:hover {
  z-index: 10;
}

/* Hover aumenta el tamaño igual que service-card */
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(5n+4):hover,
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(5n+5):hover {
  transform: translateX(178.5px) scale(1.05);
}

.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(5n+1):hover,
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(5n+2):hover,
.jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(5n+3):hover {
  transform: scale(1.05);
}

/* ========================================
   GALLERY MEDIUM - 5 items per row (5-4) - HEXÁGONOS MEDIANOS
   ======================================== */
.jkhive-hex-gallery-medium {
  max-width: 1400px;
  padding-top: 60px;
  display: grid;
  grid-template-columns: repeat(5, 210px);
  grid-gap: 0;
  justify-content: center;
  align-items: start;
}

.jkhive-hex-gallery-medium .jkhive-hex-gallery-item {
  width: 210px;
  height: 243px;
  margin: 0 3px -60px 3px; /* Aumentado a 3px para tener 1px de separación entre hexágonos */
  position: relative;
  transition: transform 0.3s ease, z-index 0s;
}

/* Patrón completo: Filas pares tienen 4 items (6-9, 15-18, 24-27, etc.) */
/* Fila 2 (items 6-9), Fila 4 (items 15-18), Fila 6 (items 24-27), etc. */
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+6),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+7),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+8),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+9) {
  transform: translateX(106px);
  margin-top: -1px;
}

/* Posicionamiento específico de columnas para filas pares */
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+6) { grid-column: 1; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+7) { grid-column: 2; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+8) { grid-column: 3; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+9) { grid-column: 4; }

/* Fila 3 (items 10-14): resetear para que ocupen columnas 1-5 normalmente */
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+10),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+11),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+12),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+13),
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+14) {
  transform: none;
  margin-top: 0;
}

.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+10) { grid-column: 1; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+11) { grid-column: 2; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+12) { grid-column: 3; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+13) { grid-column: 4; }
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+14) { grid-column: 5; }

.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:hover {
  z-index: 10;
}

/* Tamaños específicos para gallery medium */
.jkhive-hex-gallery-medium .jkhive-hex-gallery-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.jkhive-hex-gallery-medium .jkhive-hex-gallery-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.jkhive-hex-gallery-medium .jkhive-hex-gallery-subtitle {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.jkhive-hex-gallery-medium .jkhive-hex-gallery-actions {
  position: relative; /* Cambiar de absolute a relative para centrarlo */
  bottom: auto;
  left: auto;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* Hover aumenta el tamaño igual que service-card - Filas impares (1, 3, 5...) */
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+1):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+2):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+3):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+4):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+5):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+10):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+11):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+12):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+13):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+14):hover {
  transform: scale(1.05);
}

/* Hover para filas pares (2, 4, 6...) - mantener translateX */
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+6):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+7):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+8):hover,
.jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(9n+9):hover {
  transform: translateX(106px) scale(1.05);
}

/* ========================================
   GALLERY SMALL - 8 items per row (8-7-8-7) - HEXÁGONOS PEQUEÑOS
   ======================================== */
.jkhive-hex-gallery-small {
  max-width: 1600px;
  padding-top: 15px; /* Proporcional al tamaño */
}

.jkhive-hex-gallery-small .jkhive-hex-gallery-item {
  width: 130px;
  height: 150px;
  margin: -38px 1px;
  position: relative;
  transition: transform 0.3s ease, z-index 0s;
}

.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+9),
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+10),
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+11),
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+12),
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+13),
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+14),
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+15) {
  margin-top: 0px;
  transform: translateX(66px);
}

.jkhive-hex-gallery-small .jkhive-hex-gallery-item:hover {
  z-index: 10;
}

/* Hover aumenta el tamaño igual que service-card */
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+9):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+10):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+11):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+12):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+13):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+14):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+15):hover {
  transform: translateX(66px) scale(1.05);
}

.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+1):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+2):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+3):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+4):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+5):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+6):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+7):hover,
.jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(15n+8):hover {
  transform: scale(1.05);
}

/* ========================================
   COMMON ITEM STYLES
   ======================================== */
.jkhive-hex-gallery-item {
  position: relative;
  transition: transform 0.3s ease, z-index 0s;
}

.jkhive-hex-gallery-item:hover {
  z-index: 10;
}

.jkhive-hex-gallery-hex {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.95) 0%, 
    rgba(30, 41, 59, 0.95) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.3), 
              inset 0 0 40px rgba(14, 165, 233, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

/* Glow effect pseudo */
.jkhive-hex-gallery-hex::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.3) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.jkhive-hex-gallery-item:hover .jkhive-hex-gallery-hex {
  box-shadow: 0 12px 40px rgba(14, 165, 233, 0.5), 
              0 0 60px rgba(244, 196, 48, 0.3),
              inset 0 0 60px rgba(14, 165, 233, 0.25);
}

.jkhive-hex-gallery-icon {
  font-size: 3rem;
  color: var(--jk-accent-cyan);
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.8));
  position: relative;
  z-index: 2;
}

.jkhive-hex-gallery-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--jk-accent-honey);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(212, 160, 23, 0.5);
  position: relative;
  z-index: 2;
}

.jkhive-hex-gallery-subtitle {
  font-size: 0.9rem;
  color: var(--jk-metal-light);
  margin-bottom: 0.75rem;
  line-height: 1.6;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.jkhive-hex-gallery-badge {
  position: absolute;
  top: 20px;
  right: 30px;
  background: var(--jk-accent-honey);
  color: var(--jk-tech-darker);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.5);
}

.jkhive-hex-gallery-badge.disabled {
  background: rgba(150, 150, 150, 0.3);
  color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */
@media (max-width: 768px) {
  /* Gallery Big - Mobile (2-1-2-1) - Hexágonos grandes */
  .jkhive-hex-gallery-big .jkhive-hex-gallery-item {
    width: 200px;
    height: 231px;
    margin: -58px 1px;
  }
  
  /* Anular margin negativo para todos excepto primera fila */
  .jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(n+3) {
    margin-top: 0px;
  }
  
  /* Segunda fila desplazada (hex 3, 6, 9...) */
  .jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(3n+3) {
    transform: translateX(101px);
  }
  
  .jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(3n+3):hover {
    transform: translateX(101px) scale(1.05);
  }
  
  /* Hover para items SIN translateX */
  .jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(3n+1):hover,
  .jkhive-hex-gallery-big .jkhive-hex-gallery-item:nth-child(3n+2):hover {
    transform: scale(1.05);
  }
  
  /* Gallery Medium - Mobile (3-2-3-2) - Hexágonos medianos */
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-item {
    width: 130px;
    height: 150px;
    margin: -38px 1px;
  }
  
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(5n+4),
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(5n+5) {
    margin-top: 0px;
    transform: translateX(66px);
  }
  
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(5n+4):hover,
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-item:nth-child(5n+5):hover {
    transform: translateX(66px) scale(1.05);
  }
  
  /* Gallery Small - Mobile (4-3-4-3) - Hexágonos pequeños */
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item {
    width: 90px;
    height: 104px;
    margin: -26px 1px;
  }
  
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(7n+5),
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(7n+6),
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(7n+7) {
    margin-top: 0px;
    transform: translateX(46px);
  }
  
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(7n+5):hover,
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(7n+6):hover,
  .jkhive-hex-gallery-small .jkhive-hex-gallery-item:nth-child(7n+7):hover {
    transform: translateX(46px) scale(1.05);
  }
  
  /* Ajustes de tamaño de contenido */
  .jkhive-hex-gallery-big .jkhive-hex-gallery-icon {
    font-size: 3rem;
  }
  
  .jkhive-hex-gallery-big .jkhive-hex-gallery-title {
    font-size: 1.1rem;
  }
  
  .jkhive-hex-gallery-big .jkhive-hex-gallery-subtitle {
    font-size: 0.75rem;
  }
  
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-icon {
    font-size: 2rem;
  }
  
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-title {
    font-size: 0.8rem;
  }
  
  .jkhive-hex-gallery-medium .jkhive-hex-gallery-subtitle {
    font-size: 0.6rem;
  }
  
  .jkhive-hex-gallery-small .jkhive-hex-gallery-icon {
    font-size: 1.5rem;
  }
  
  .jkhive-hex-gallery-small .jkhive-hex-gallery-title {
    font-size: 0.65rem;
  }
  
  .jkhive-hex-gallery-small .jkhive-hex-gallery-subtitle {
    font-size: 0.5rem;
  }
}

/* Small Action Button (only emoji, tooltip on hover) */
.jkhive-btn-hex-action {
  width: 70px;
  height: calc(70px * 1.1547);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jkhive-btn-hex-action .emoji-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.jkhive-btn-hex-action .tooltip-text {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: var(--jk-accent-honey);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  z-index: 1000;
  border: 1px solid var(--jk-accent-honey);
}

.jkhive-btn-hex-action:hover .tooltip-text {
  opacity: 1;
  bottom: -40px;
}

.jkhive-btn-hex-action:hover {
  transform: scale(1.05);
}

/* ========================================
   8. HEXAGON CARDS - METALLIC
   ======================================== */
.jk-card-hex {
  position: relative;
  width: 280px;
  height: calc(280px * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%);
  box-shadow: var(--jk-shadow-md), inset 0 0 40px rgba(14, 165, 233, 0.1);
  transition: var(--jk-transition);
  overflow: hidden;
  border: 2px solid rgba(14, 165, 233, 0.3);
}

.jk-card-hex:hover {
  transform: scale(1.05);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue), inset 0 0 60px rgba(14, 165, 233, 0.2);
  border-color: var(--jk-primary-blue);
}

.jk-card-hex-content {
  padding: var(--jk-spacing-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.jk-card-hex-icon {
  font-size: 3rem;
  color: var(--jk-primary-blue-light);
  margin-bottom: var(--jk-spacing-md);
  text-shadow: 0 0 20px rgba(14, 165, 233, 0.8);
  filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.5));
}

.jk-card-hex-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jk-metal-light);
  margin-bottom: var(--jk-spacing-sm);
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

.jk-card-hex-text {
  font-size: 0.9rem;
  color: var(--jk-metal);
  line-height: 1.5;
}

/* Card with Image Background */
.jk-card-hex-image {
  position: relative;
}

.jk-card-hex-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
}

/* ========================================
   9. HEXAGON GRID LAYOUT
   ======================================== */
.jkhive-hex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jk-spacing-md);
  padding: var(--jk-spacing-xl);
  position: relative;
}

.jkhive-hex-grid-item {
  position: relative;
}

/* Honeycomb Pattern Grid */
.jk-honeycomb-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--jk-spacing-xl);
  margin: 0 auto;
  max-width: 1200px;
}

.jk-honeycomb-row {
  display: flex;
  justify-content: center;
}

.jk-honeycomb-row:nth-child(even) {
  margin-left: calc(var(--hex-size) * 0.866);
}

.jk-honeycomb-item {
  margin: calc(var(--hex-size) * 0.1) calc(var(--hex-size) * 0.05);
}

/* ========================================
   10. HEXAGON GALLERY
   ======================================== */
.jk-gallery-hex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--jk-spacing-lg);
  padding: var(--jk-spacing-xl);
}

.jk-gallery-item {
  position: relative;
  width: 200px;
  height: calc(200px * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  cursor: pointer;
  transition: var(--jk-transition);
  border: 2px solid rgba(14, 165, 233, 0.5);
  margin: 0 auto;
  box-shadow: var(--jk-shadow), inset 0 0 20px rgba(14, 165, 233, 0.1);
}

.jk-gallery-item:hover {
  transform: scale(1.1);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue);
  z-index: 10;
  border-color: var(--jk-primary-blue-light);
}

.jk-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--jk-transition);
}

.jk-gallery-item:hover img {
  transform: scale(1.1);
}

.jk-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(20, 184, 166, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--jk-transition);
  color: var(--jk-white);
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
  padding: var(--jk-spacing-md);
  text-shadow: 0 0 15px rgba(14, 165, 233, 1);
  backdrop-filter: blur(5px);
}

.jk-gallery-item:hover .jk-gallery-overlay {
  opacity: 1;
}

/* ========================================
   11. HEXAGON BADGES & LABELS
   ======================================== */
.jk-badge-hex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: calc(60px * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--jk-primary-blue);
  color: var(--jk-white);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid var(--jk-accent-honey);
}

.jk-badge-hex-sm {
  width: 40px;
  height: calc(40px * 1.1547);
  font-size: 0.6rem;
}

.jk-badge-hex-primary {
  background: var(--jk-primary-blue);
}

.jk-badge-hex-secondary {
  background: var(--jk-secondary-green);
}

.jk-badge-hex-accent {
  background: var(--jk-accent-honey);
  color: var(--jk-gray-900);
}

/* ========================================
   12. RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
  .jkhive-sidebar {
    width: 80px;
    padding: var(--jk-spacing-md) 0;
  }
  
  .jkhive-sidebar-logo .jkhive-hex {
    width: 60px;
    height: calc(60px * 1.1547);
  }
  
  .jkhive-sidebar-logo .jkhive-hex-content {
    font-size: 1.2rem;
  }
  
  .jkhive-logo-main {
    font-size: 1.2rem;
  }
  
  .jkhive-logo-divider {
    width: 50%;
    height: 1.5px;
    margin: 0.15rem 0 0 0;
  }
  
  .jkhive-logo-sub {
    font-size: 0.4rem;
    margin-top: 0.03rem;
    line-height: 1;
  }
  
  .jkhive-nav-item .jkhive-hex {
    width: 60px;
    height: calc(60px * 1.1547);
  }
  
  .jkhive-nav-item .jkhive-hex-icon {
    font-size: 1.2rem;
  }
  
  .jkhive-nav-item .jkhive-hex-text {
    font-size: 0.5rem;
  }
  
  /* Adjust honeycomb offset for mobile */
  .jkhive-nav-item {
    margin: -8px 0;
  }
  
  .jkhive-nav-item:nth-child(even) {
    transform: translateX(14px);
  }
  
  .jkhive-nav-item:nth-child(odd) {
    transform: translateX(-15px);
  }
  
  .jkhive-main-content {
    margin-left: 80px;
    padding: var(--jk-spacing-md);
  }
  
  .jk-submenu {
    left: 70px;
    min-width: 160px;
  }
  
  .jkhive-nav-item:nth-child(even):hover .jk-submenu {
    left: 85px;
  }
  
  .jkhive-nav-item:nth-child(odd):hover .jk-submenu {
    left: 55px;
  }
  
  .jk-card-hex {
    width: 200px;
    height: calc(200px * 1.1547);
  }
  
  .jk-gallery-item {
    width: 150px;
    height: calc(150px * 1.1547);
  }
}

/* ========================================
   13. UTILITY CLASSES
   ======================================== */
.jk-text-center {
  text-align: center;
}

.jk-mt-1 { margin-top: var(--jk-spacing-xs); }
.jk-mt-2 { margin-top: var(--jk-spacing-sm); }
.jk-mt-3 { margin-top: var(--jk-spacing-md); }
.jk-mt-4 { margin-top: var(--jk-spacing-lg); }
.jk-mt-5 { margin-top: var(--jk-spacing-xl); }

.jk-mb-1 { margin-bottom: var(--jk-spacing-xs); }
.jk-mb-2 { margin-bottom: var(--jk-spacing-sm); }
.jk-mb-3 { margin-bottom: var(--jk-spacing-md); }
.jk-mb-4 { margin-bottom: var(--jk-spacing-lg); }
.jk-mb-5 { margin-bottom: var(--jk-spacing-xl); }

.jk-py-3 {
  padding-top: var(--jk-spacing-md);
  padding-bottom: var(--jk-spacing-md);
}

.jk-py-5 {
  padding-top: var(--jk-spacing-xl);
  padding-bottom: var(--jk-spacing-xl);
}

/* ========================================
   14. ANIMATIONS
   ======================================== */
@keyframes jk-pulse-honey {
  0%, 100% {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
  }
}

.jkhive-animate-pulse {
  animation: jk-pulse-honey 2s infinite;
}

@keyframes jk-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.jkhive-animate-float {
  animation: jk-float 3s ease-in-out infinite;
}

.jkhive-animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.jkhive-animate-on-scroll.jkhive-animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   15. HEADER COMPONENT - CYBERNETIC
   ======================================== */
.jkhive-header {
  background: linear-gradient(135deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 50%, var(--jk-tech-darker) 100%);
  padding: var(--jk-spacing-xl) 0;
  text-align: center;
  color: var(--jk-metal-light);
  border-bottom: 3px solid var(--jk-primary-blue);
  box-shadow: var(--jk-shadow-lg), 0 4px 30px rgba(14, 165, 233, 0.3);
  position: relative;
  overflow: hidden;
}

.jkhive-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.jkhive-header-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--jk-spacing-sm);
  text-shadow: 0 0 20px rgba(14, 165, 233, 0.8), 0 0 40px rgba(14, 165, 233, 0.4);
  position: relative;
  z-index: 1;
}

.jkhive-header-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  color: var(--jk-metal);
}

/* ========================================
   16. FOOTER COMPONENT - CYBERNETIC
   ======================================== */
.jkhive-footer {
  background: linear-gradient(135deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 50%, var(--jk-tech-darker) 100%);
  color: var(--jk-metal-light);
  padding: var(--jk-spacing-xl);
  text-align: center;
  border-top: 3px solid var(--jk-primary-blue);
  box-shadow: 0 -4px 30px rgba(14, 165, 233, 0.2);
  position: relative;
}

.jkhive-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--jk-primary-blue) 50%, transparent 100%);
}

.jkhive-footer-text {
  margin-bottom: var(--jk-spacing-md);
}

.jkhive-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--jk-spacing-lg);
  flex-wrap: wrap;
}

.jkhive-footer-link {
  color: var(--jk-accent-honey);
  text-decoration: none;
  transition: var(--jk-transition-fast);
}

.jkhive-footer-link:hover {
  color: var(--jk-accent-honey-light);
  text-decoration: underline;
}

/* ========================================
   17. TOP NAVBAR - HEXAGONAL
   ======================================== */
.jkhive-navbar {
  position: fixed;
  top: 0;
  left: 140px;
  right: 0;
  height: 70px;
  background: linear-gradient(135deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 100%);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--jk-spacing-xl);
  box-shadow: var(--jk-shadow-lg), inset 0 -2px 20px rgba(14, 165, 233, 0.15);
  border-bottom: 2px solid rgba(14, 165, 233, 0.3);
  overflow: visible; /* Allow language selector to overflow */
}

/* Navbar left section (breadcrumb/title) */
.jkhive-navbar-left {
  display: flex;
  align-items: center;
  gap: var(--jk-spacing-md);
}

.jkhive-navbar-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--jk-metal-light);
  text-shadow: 0 0 15px rgba(14, 165, 233, 0.6);
  margin: 0;
}

.jkhive-navbar-breadcrumb {
  font-size: 0.9rem;
  color: var(--jk-metal);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jkhive-navbar-breadcrumb a {
  color: var(--jk-primary-blue-light);
  text-decoration: none;
  transition: var(--jk-transition-fast);
}

.jkhive-navbar-breadcrumb a:hover {
  color: var(--jk-accent-honey);
}

/* Navbar right section (utilities) */
.jkhive-navbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: visible; /* Allow language selector dropdown to be visible */
}

/* Navbar hexagonal items */
.jkhive-navbar-hex-item {
  position: relative;
  width: 38px;
  height: calc(38px * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--jk-tech-medium) 0%, var(--jk-tech-dark) 100%);
  box-shadow: var(--jk-shadow), inset 0 0 15px rgba(14, 165, 233, 0.1), 0 0 0 1px rgba(14, 165, 233, 0.3);
  cursor: pointer;
  transition: var(--jk-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jk-metal-light);
  font-size: 1.02rem;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
  z-index: 1;
}

.jkhive-navbar-hex-item:hover {
  z-index: 10;
  transform: scale(1.1);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue), 0 0 0 1px rgba(14, 165, 233, 0.6);
  filter: brightness(1.3);
}

/* Notification badge */
.jkhive-notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: var(--jk-accent-honey);
  border-radius: 50%;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--jk-tech-darker);
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.8);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ========================================
   18. HEXAGONAL DROPDOWN MENU SYSTEM
   ======================================== 
   
   This system can be reused for: Language Selector, User Menu, Notifications, etc.
   
   STRUCTURE:
   .jk-[type]-selector          → Container (38x38px, grows on open)
     └─ .jk-[type]-hex-container → Inner container (handles overflow)
        └─ .jk-[type]-hex        → Individual hexagon items
   
   HONEYCOMB PATTERN POSITIONS:
   - All hexagons start at: top: 0, left: 11px (centered)
   - When .open, they move to their honeycomb positions:
   
   Row 1 (center):     ES: top: 0,    left: 11px
   Row 2 (right):      EN: top: 34px,  left: 31px
   Row 3 (center):     IT: top: 68px,  left: 11px
   Row 4 (right):      DE: top: 102px, left: 31px
   
   Pattern continues: center → right → center → right (zigzag)
   Vertical spacing: 34px between rows (honeycomb overlap)
   Horizontal offset: 20px from center (31px vs 11px)
   
   ACTIVE STATE:
   - .active class applies metallic honey yellow background
   - Active item is ALWAYS visible (closed or open)
   - Active item maintains honeycomb position when open
   - Non-active items are hidden when closed (opacity: 0, scale: 0)
   
   RESPONSIVE:
   - Container expands downward only (no upward shift)
   - Uses overflow: visible to prevent clipping
   - z-index: 9999 when open to stay above all content
   
   TO REPLICATE FOR OTHER MENUS:
   1. Copy .jkhive-lang-selector structure
   2. Rename classes (e.g., .jk-user-selector, .jk-notif-selector)
   3. Adjust honeycomb positions based on number of items
   4. Keep vertical spacing at 34px for proper honeycomb effect
   5. Keep horizontal offset at ±20px from center
   6. Ensure .active state uses !important for all styles
   
   ======================================== */
.jkhive-lang-selector {
  position: relative;
  width: 38px;
  height: 38px;
  z-index: 1;
  overflow: visible !important; /* CRITICAL: Allow children to overflow */
  align-self: center; /* Align vertically with other navbar hexagons */
  top: -2px; /* Compensate for 2px vertical offset */
}

.jkhive-lang-selector.open {
  z-index: 9999; /* Higher than everything to avoid being covered */
  /* DON'T change width/height - let container expand with overflow visible */
  overflow: visible !important; /* CRITICAL: Allow children to overflow */
}

.jkhive-lang-selector:hover {
  z-index: 10;
}

.jkhive-lang-hex-container {
  position: absolute;
  top: 0; /* Align with selector top */
  left: 0; /* Centered alignment */
  width: 100px; /* Much wider to accommodate zigzag */
  height: 38px;
  z-index: 9999;
  overflow: visible !important; /* Allow hexagons to overflow */
  pointer-events: none; /* Allow clicking through empty areas */
}

.jkhive-lang-selector.open .jkhive-lang-hex-container {
  /* Container expands but selector stays same size */
  height: 140px; /* Compact height to match new spacing (96px top + 44px hex height) */
  width: 100px; /* Wide enough for zigzag pattern */
  top: 0; /* Start from top of selector */
  pointer-events: all; /* Re-enable clicks when open */
}

.jkhive-lang-hex {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: calc(38px * 1.1547);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--jk-tech-medium) 0%, var(--jk-tech-dark) 100%);
  border: 1px solid var(--jk-primary-blue);
  box-shadow: var(--jk-shadow), inset 0 0 15px rgba(14, 165, 233, 0.1);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jk-metal-light);
  font-weight: 700;
  font-size: 0.6rem;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
  user-select: none;
  z-index: 1;
}

/* Active language hexagon - ALWAYS visible with metallic honey yellow */
.jkhive-lang-hex.active {
  background: linear-gradient(135deg, var(--jk-accent-honey-dark) 0%, var(--jk-accent-honey) 50%, var(--jk-accent-honey-light) 100%) !important;
  border-color: var(--jk-accent-honey-light) !important;
  color: var(--jk-tech-darker) !important;
  box-shadow: var(--jk-shadow), var(--jk-glow-neon), inset 0 0 25px rgba(212, 160, 23, 0.3) !important;
  text-shadow: 0 0 8px rgba(244, 196, 48, 0.8) !important;
  z-index: 200 !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: all !important;
  display: flex !important;
  visibility: visible !important;
}

/* Inactive language options - hidden by default */
.jkhive-lang-hex:not(.active) {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  visibility: hidden;
}

/* When selector is open, keep active hexagon visible too */
.jkhive-lang-selector.open .jkhive-lang-hex.active {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: all !important;
  display: flex !important;
  z-index: 10001 !important; /* Slightly higher than inactive ones */
  visibility: visible !important;
}

/* When selector is open, show all options */
.jkhive-lang-selector.open .jkhive-lang-hex:not(.active) {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: all !important;
  display: flex !important;
  z-index: 10000 !important;
  visibility: visible !important;
}

/* Honeycomb pattern - all hexagons start stacked at top */
.jkhive-lang-hex[data-lang="es"],
.jkhive-lang-hex[data-lang="en"],
.jkhive-lang-hex[data-lang="it"],
.jkhive-lang-hex[data-lang="de"] {
  top: 0;
  left: 0; /* Centered in container */
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* When selector is open, arrange in honeycomb zigzag pattern */
/* Fine-tuned alignment based on visual feedback */

/* First hexagon - stays at top center when open */
.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="es"]:not(.active) {
  top: 0;
  left: 0;
  transition-delay: 0s;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.7) 0%, rgba(200, 16, 46, 0.7) 25%, rgba(255, 196, 0, 0.7) 25%, rgba(255, 196, 0, 0.7) 75%, rgba(200, 16, 46, 0.7) 75%, rgba(200, 16, 46, 0.7) 100%); /* España: Rojo-Amarillo-Rojo */
}

/* Second hexagon - down and to the right (GB/UK) */
.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="en"]:not(.active) {
  top: 34px; /* Adjusted: 2px down for better alignment */
  left: 20px; /* Adjusted: centered with 20px offset for honeycomb pattern */
  transition-delay: 0.1s;
  background: linear-gradient(135deg, rgba(0, 33, 71, 0.8) 0%, rgba(200, 16, 46, 0.8) 100%); /* UK: Azul y Rojo */
}

/* Third hexagon - down and to the left (Italy) */
.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="it"]:not(.active) {
  top: 68px; /* Adjusted: 2px more down for honeycomb alignment */
  left: 0; /* Aligned with ES center */
  transition-delay: 0.2s;
  background: linear-gradient(90deg, rgba(0, 146, 70, 0.8) 0%, rgba(241, 242, 241, 0.8) 33%, rgba(206, 43, 55, 0.8) 66%, rgba(206, 43, 55, 0.8) 100%); /* Italia: Verde, Blanco, Rojo */
}

/* Fourth hexagon - down and to the right (Germany) */
.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="de"]:not(.active) {
  top: 102px; /* Adjusted: 2px more down for perfect honeycomb alignment */
  left: 20px; /* Centered with 20px offset for honeycomb pattern */
  transition-delay: 0.3s;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(221, 0, 0, 0.8) 50%, rgba(255, 206, 0, 0.8) 100%); /* Alemania: Negro, Rojo, Dorado */
}

/* Active language keeps its honeycomb position when selector is open */
.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="es"].active {
  top: 0;
  left: 0;
}

.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="en"].active {
  top: 34px;
  left: 20px;
}

.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="it"].active {
  top: 68px;
  left: 0;
}

.jkhive-lang-selector.open .jkhive-lang-hex[data-lang="de"].active {
  top: 102px;
  left: 20px;
}

/* Hover effects */
.jkhive-lang-hex:hover {
  transform: scale(1.05);
  border-color: var(--jk-primary-blue-light);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-blue);
  filter: brightness(1.3);
  z-index: 300 !important;
}

.jkhive-lang-hex.active:hover {
  transform: scale(1.05);
  border-color: var(--jk-accent-honey-light);
  box-shadow: var(--jk-shadow-lg), var(--jk-glow-neon);
}

/* Flag icons inside hexagons */
.jkhive-lang-hex .flag-icon {
  font-size: 1.02rem;
  display: block;
}

/* Placeholder styles for future features */
.jkhive-navbar-placeholder {
  opacity: 0.3;
  pointer-events: none;
}

/* Mobile adjustments for navbar and language selector */
@media (max-width: 768px) {
  .jkhive-navbar {
    left: 80px;
    height: 60px;
    padding: 0 var(--jk-spacing-md);
  }
  
  .jkhive-navbar-right {
    gap: 1px;
  }
  
  .jkhive-navbar-title {
    font-size: 1.2rem;
  }
  
  .jkhive-navbar-hex-item {
    width: 32px;
    height: calc(32px * 1.1547);
    font-size: 0.85rem;
  }
  
  .jkhive-lang-hex {
    width: 32px;
    height: calc(32px * 1.1547);
    font-size: 0.55rem;
  }
  
  /* Honeycomb pattern for mobile */
  .jkhive-lang-hex[data-lang="es"],
  .jkhive-lang-hex[data-lang="en"],
  .jkhive-lang-hex[data-lang="it"],
  .jkhive-lang-hex[data-lang="de"] {
    top: 0;
    left: 9px;
  }
  
  .jkhive-lang-selector.open .jkhive-lang-hex[data-lang="es"] {
    top: 0;
    left: 9px;
  }
  
  .jkhive-lang-selector.open .jkhive-lang-hex[data-lang="en"] {
    top: 27px; /* Mobile hexagon ~37px height - 10px overlap */
    left: 23px; /* Right zigzag */
  }
  
  .jkhive-lang-selector.open .jkhive-lang-hex[data-lang="it"] {
    top: 54px;
    left: -5px; /* Left zigzag */
  }
  
  .jkhive-lang-selector.open .jkhive-lang-hex[data-lang="de"] {
    top: 81px;
    left: 23px; /* Right zigzag */
  }
  
  .jkhive-lang-hex .flag-icon {
    font-size: 0.85rem;
  }
  
  .jkhive-lang-hex-container {
    left: -9px;
    width: 50px;
    z-index: 9999;
  }
  
  .jkhive-lang-selector.open .jkhive-lang-hex-container {
    height: 115px;
  }
  
  .jkhive-main-content {
    margin-top: 60px;
  }
  
  .jkhive-navbar-breadcrumb {
    display: none;
  }
}

/* ========================================
   GALLERY HEXAGON ACTION BUTTONS
   ======================================== */

.jkhive-hex-gallery-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 0.8rem;
  position: relative;
  z-index: 5;
}

/* ========================================
   LINKEDIN PROFILE HEXAGON - CUSTOM STYLING
   ======================================== */
.jkhive-hex-gallery-centered.jkhive-hex-gallery-big {
  grid-template-columns: 350px !important;
  justify-content: center !important;
}

/* LinkedIn Profile Section Spacing */
#linkedin-profile {
  margin-top: 20px; /* 20px desde hero section */
  margin-bottom: 20px; /* 20px hasta siguiente sección */
  padding: 0;
}

#linkedin-profile .jkhive-hex-gallery {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 auto;
}

/* Profile Photo in Hexagon */
.jkhive-hex-gallery-icon.jkhive-profile-photo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  color: transparent !important;
  filter: none !important;
  padding: 0;
  margin-bottom: 0.75rem;
}

.jkhive-hex-gallery-icon.jkhive-profile-photo img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--jk-accent-cyan);
  display: block !important;
  filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.8)) !important;
  position: relative;
  z-index: 3;
}

.jkhive-btn-hex-mini {
  width: 40px;
  height: 46px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
  border: 2px solid var(--jk-accent-cyan);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
  backdrop-filter: blur(5px);
  text-decoration: none;
}

a.jkhive-btn-hex-mini {
  text-decoration: none;
}

.jkhive-btn-hex-mini .emoji-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.5));
  text-decoration: none;
}

.jkhive-btn-hex-mini:hover:not(:disabled) {
  transform: scale(1.1);
  border-color: var(--jk-accent-honey);
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.4);
}

.jkhive-btn-hex-mini:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ========================================
   INFO BUTTON - SMALL HEXAGON WITH TOOLTIP
   ======================================== */

.jkhive-btn-hex-info {
  position: relative;
  width: 36px; /* Slightly larger to accommodate border */
  height: calc(36px * 1.1547);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--jk-metal-light);
  font-size: 1rem;
  font-weight: 700;
  z-index: 5;
  /* Use box-shadow to create hexagon border effect */
  filter: drop-shadow(0 0 0 2px var(--jk-primary-blue)) 
          drop-shadow(0 4px 15px rgba(14, 165, 233, 0.2));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(6, 182, 212, 0.3) 100%);
  backdrop-filter: blur(5px);
}

.jkhive-btn-hex-info:hover {
  transform: scale(1.15);
  color: var(--jk-accent-honey);
  filter: drop-shadow(0 0 0 2px var(--jk-accent-honey)) 
          drop-shadow(0 6px 25px rgba(212, 160, 23, 0.5));
  background: linear-gradient(135deg, rgba(212, 160, 23, 0.2) 0%, rgba(244, 196, 48, 0.2) 100%);
}

/* Tooltip - appears on hover */
.jkhive-btn-hex-info::before {
  content: attr(data-tooltip);
  position: fixed; /* Use fixed to escape clip-path context */
  bottom: auto;
  left: auto;
  transform: translate(-50%, -100%) scale(0);
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%);
  color: var(--jk-metal-light);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--jk-primary-blue);
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 99999;
  clip-path: none;
  filter: none;
}

.jkhive-btn-hex-info:hover::before {
  transform: translate(-50%, calc(-100% - 10px)) scale(1);
  opacity: 1;
}

/* ========================================
   PRODUCT MODAL
   ======================================== */

.jkhive-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jkhive-modal.show,
.jkhive-modal.active {
  display: flex;
  opacity: 1;
}

.jkhive-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.jkhive-modal-content {
  position: relative;
  background: linear-gradient(135deg, var(--jk-tech-darker) 0%, var(--jk-tech-dark) 50%, var(--jk-primary-blue-darker) 100%);
  border: 3px solid var(--jk-accent-cyan);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(14, 165, 233, 0.4), 
              inset 0 0 60px rgba(14, 165, 233, 0.1);
  animation: modalSlideIn 0.4s ease-out;
  z-index: 10000;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.jkhive-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(239, 68, 68, 0.2);
  border: 2px solid rgb(239, 68, 68);
  color: rgb(239, 68, 68);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jkhive-modal-close:hover {
  background: rgb(239, 68, 68);
  color: white;
  transform: rotate(90deg);
}

.jkhive-modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.jkhive-modal-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.5));
}

.jkhive-modal-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--jk-accent-honey);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(212, 160, 23, 0.5);
}

.jkhive-modal-subtitle {
  font-size: 1.1rem;
  color: var(--jk-accent-cyan);
  opacity: 0.9;
}

.jkhive-modal-body {
  margin-bottom: 2rem;
}

.jkhive-modal-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--jk-metal-light);
}

.jkhive-modal-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--jk-primary);
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

/* ========================================
   SECTION TITLES - Títulos de Sección
   ======================================== */

.jkhive-section-title {
  color: var(--jk-primary-blue);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
}

/* Línea decorativa inferior (siempre visible) */
.jkhive-section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background: var(--jk-accent-honey);
  border-radius: 2px;
}

/* Alineación */
.jkhive-section-title.left {
  text-align: left;
  display: block;
  width: auto;
}

.jkhive-section-title.left::after {
  left: 0;
  transform: none;
}

.jkhive-section-title.right {
  text-align: right;
  display: block;
  width: auto;
}

.jkhive-section-title.right::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Iconos dentro de títulos */
.jkhive-section-title i {
  color: var(--jk-accent-honey);
  margin-right: 0.75rem;
}

/* Tamaños alternativos */
.jkhive-section-title.lg {
  font-size: 3rem;
}

.jkhive-section-title.sm {
  font-size: 1.8rem;
}

/* Sin línea decorativa */
.jkhive-section-title.no-underline::after {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .jkhive-section-title {
    font-size: 1.8rem;
  }
  
  .jkhive-section-title.lg {
    font-size: 2.2rem;
  }
  
  .jkhive-section-title.sm {
    font-size: 1.4rem;
  }
  
  .jkhive-section-title::after {
    width: 80%;
  }
}

.jkhive-modal-features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.jkhive-modal-feature {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(14, 165, 233, 0.2);
  color: var(--jk-metal-light);
  font-size: 0.95rem;
}

.jkhive-modal-feature:last-child {
  border-bottom: none;
}

.jkhive-modal-deployment {
  background: rgba(14, 165, 233, 0.1);
  border-left: 4px solid var(--jk-accent-cyan);
  padding: 1rem;
  border-radius: 8px;
  color: var(--jk-metal-light);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.jkhive-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.jkhive-modal-actions .jkhive-btn-hex-carousel {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsive modal */
@media (max-width: 768px) {
  .jkhive-modal-content {
    margin: 1rem;
    padding: 2rem 1.5rem;
    max-width: 90%;
  }
  
  .jkhive-modal-icon {
    font-size: 3rem;
  }
  
  .jkhive-modal-title {
    font-size: 1.5rem;
  }
  
  .jkhive-modal-actions {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .jkhive-btn-hex-mini {
    width: 35px;
    height: 40px;
  }
  
  .jkhive-btn-hex-mini .emoji-icon {
    font-size: 1rem;
  }
}