/*
 * === SKIN "PANEL DE NAVEGACIÓN TÁCTIL" PARA SHIFTNAV - LUJOS MOTOR ===
 * Diseñado con una filosofía "Móvil Primero". Cero :hover, máximo feedback táctil.
*/

/* --- 1. VARIABLES DE DISEÑO --- */
.shiftnav.shiftnav-skin-custom {
  --nav-bg: #1a1a1a;
  --nav-accent: #FFD700;
  --nav-text-primary: #ffffff;
  --nav-text-secondary: #a0a0a0;
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-active-bg: rgba(255, 215, 0, 0.1); /* Brillo sutil para el ítem activo */
  --nav-font: 'Poppins', 'Montserrat', sans-serif;
  --animation-speed-fast: 0.2s;
}

/* --- 2. CONTENEDOR PRINCIPAL DEL MENÚ --- */
.shiftnav.shiftnav-skin-custom {
  background: var(--nav-bg);
  color: var(--nav-text-primary);
  border-right: none !important;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.5);
}

/* --- 3. TÍTULO / CABECERA --- */
.shiftnav.shiftnav-skin-custom .shiftnav-site-title,
.shiftnav.shiftnav-skin-custom .shiftnav-brand a {
  font-family: var(--nav-font);
  font-size: 24px;
  text-align: left;
  padding: 28px 24px;
  font-weight: 700;
  color: var(--nav-text-primary);
  border-bottom: 1px solid var(--nav-border);
}

/* --- 4. ÍTEMS DEL MENÚ (OPTIMIZADOS PARA EL TACTO) --- */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu > li.menu-item > .shiftnav-target {
  font-family: var(--nav-font);
  color: var(--nav-text-secondary);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  
  /* Mayor padding vertical para un área de toque más cómoda */
  padding: 20px 24px;
  
  border-top: none;
  border-bottom: 1px solid var(--nav-border);
  text-shadow: none;
  
  position: relative;
  
  /* Transición solo para el feedback al tocar */
  transition: background-color var(--animation-speed-fast) ease, 
              transform var(--animation-speed-fast) ease;
}

/* --- 5. FEEDBACK AL TOCAR (ESTADO :active) --- */
/* Esta es la única "animación" de interacción, se activa al presionar. */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu > li.menu-item > .shiftnav-target:active {
    background: var(--nav-active-bg); /* Un brillo sutil al tocar */
    transform: scale(0.98); /* El ítem se "hunde" ligeramente */
    color: var(--nav-text-primary);
}

/* --- 6. ÍTEM ACTIVO (PÁGINA ACTUAL) - DISEÑO SÓLIDO Y CLARO --- */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target {
  background: var(--nav-active-bg) !important;
  color: var(--nav-text-primary) !important;
  font-weight: 700 !important;
  padding-left: 20px !important; /* Hacemos espacio para la barra de energía */
  
  /* La barra de energía vertical, siempre visible */
  border-left: 4px solid var(--nav-accent);
}

/* --- 7. LIMPIEZA DE ESTILOS RESIDUALES --- */
/* Eliminamos cualquier efecto hover residual que el plugin pueda tener */
.shiftnav.shiftnav-skin-custom.shiftnav-nojs ul.shiftnav-menu li.menu--item > .shiftnav-target:hover,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu.shiftnav-active-on-hover li.menu-item > .shiftnav-target:hover {
  background: transparent;
  color: var(--nav-text-secondary);
}
/* Aseguramos que el ítem activo no tenga hover */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target:hover {
    color: var(--nav-text-primary) !important;
    background: var(--nav-active-bg) !important;
}