/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 30 2025 | 14:06:39 */
/* === BOTÓN HAMBURGUESA === */
a.ekit-menu-nav-link {
  color: transparent !important;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1001;
}

a.ekit-menu-nav-link i.elementskit-submenu-indicator {
  display: none !important;
}

/* Ícono hamburguesa */
a.ekit-menu-nav-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Crect y="15" width="100" height="10" rx="5"/%3E%3Crect y="45" width="100" height="10" rx="5"/%3E%3Crect y="75" width="100" height="10" rx="5"/%3E%3C/svg%3E')
    no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

/* Ícono X cuando el menú está abierto */
a.ekit-menu-nav-link.open::before {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Crect transform="rotate(45 50 50)" y="45" x="10" width="80" height="10" rx="5"/%3E%3Crect transform="rotate(-45 50 50)" y="45" x="10" width="80" height="10" rx="5"/%3E%3C/svg%3E')
    no-repeat center center;
  background-size: contain;
}

/* === BLOQUEAR ACTIVACIÓN POR HOVER === */
.elementskit-dropdown-has:hover .elementskit-megamenu-panel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === ACTIVAR MEGAMENÚ SOLO CON CLIC === */
.elementskit-menu-container.elementskit-active .elementskit-megamenu-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* === FIX "SALTO VISUAL" DEL MEGAMENÚ === */
.elementskit-megamenu-panel {
  transition: opacity 0.3s ease !important;
  position: absolute !important;
  top: 100% !important; /* o usa el valor real que tu plantilla esté usando */
  transform: none !important;
  margin: 0 !important;
  z-index: 9999;
}
/*.eael-elements-flip-box-front-container{
filter: grayscale(100%);
	}
*/
/* === BOTÓN HAMBURGUESA PERSONALIZADO === */
a.ekit-menu-nav-link {
  color: transparent !important;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1001;
}

a.ekit-menu-nav-link i.elementskit-submenu-indicator {
  display: none !important;
}

/* Icono hamburguesa (3 líneas) */
a.ekit-menu-nav-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Crect y="15" width="100" height="10" rx="5"/%3E%3Crect y="45" width="100" height="10" rx="5"/%3E%3Crect y="75" width="100" height="10" rx="5"/%3E%3C/svg%3E')
    no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

/* Icono X cuando el menú está abierto */
a.ekit-menu-nav-link.open::before {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Crect transform="rotate(45 50 50)" y="45" x="10" width="80" height="10" rx="5"/%3E%3Crect transform="rotate(-45 50 50)" y="45" x="10" width="80" height="10" rx="5"/%3E%3C/svg%3E')
    no-repeat center center;
  background-size: contain;
}

/* === BLOQUEA ACTIVACIÓN POR HOVER (solo por clic) === */
.elementskit-dropdown-has:hover .elementskit-megamenu-panel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === ACTIVA MENÚ AL HACER CLIC === */
.elementskit-menu-container.elementskit-active .elementskit-megamenu-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.elementskit-megamenu-panel {
  transition: opacity 0.3s ease !important;
  position: absolute !important;
  top: 100% !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 9999;
}

/* === AJUSTES RESPONSIVE === */
@media (max-width: 1024px) {
  /* Oculta hamburguesa nativa de Elementskit */
  .elementskit-menu-hamburger.elementskit-menu-toggler {
    display: none !important;
  }

  /* Muestra tu botón personalizado */
  a.ekit-menu-nav-link {
    display: inline-block !important;
  }

  /* Oculta menú lateral móvil nativo */
  .elementskit-menu-panel {
    display: none !important;
  }

  /* Usa el mismo menú de escritorio en responsive */
  #ekit-megamenu-menu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .elementskit-menu-container {
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    width: 100%;
    position: relative;
  }

  .elementskit-megamenu-panel {
    position: static !important;
    width: 100% !important;
    top: auto !important;
  }
}