/* Azkar Marketing — Menu movil a pantalla completa con drill-down (estilo Nike) */

.xpro-elementor-horizontal-menu-overlay {
  display: none !important;
}

.azkar-mobile-overlay {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: 100000;
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.azkar-mobile-overlay.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

body.azkar-mobile-menu-open {
  overflow: hidden;
}

.azkar-mobile-overlay__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid #F0F1F7;
  flex-shrink: 0;
}

.azkar-mobile-overlay__back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: "Nunito Sans 10pt Expanded", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1B1464;
  padding: 6px 4px;
  margin-left: -4px;
  cursor: pointer;
  visibility: hidden;
}

.azkar-mobile-overlay__back.is-visible {
  visibility: visible;
}

.azkar-mobile-overlay__back-arrow {
  font-size: 20px;
  line-height: 1;
}

.azkar-mobile-overlay__close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #1B1464;
  cursor: pointer;
  padding: 4px 6px;
}

.azkar-mobile-overlay__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Nunito Sans 10pt Expanded", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1B1464;
}

.azkar-mobile-overlay__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 40px;
  -webkit-overflow-scrolling: touch;
}

.azkar-mobile-overlay__screen {
  display: none;
}

.azkar-mobile-overlay__screen.is-active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.azkar-mobile-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.azkar-mobile-overlay__list li {
  border-bottom: 1px solid #F5F5FA;
}

.azkar-mobile-overlay__list a,
.azkar-mobile-overlay__list button.azkar-mobile-drill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: "Nunito Sans 10pt Expanded", sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: #12132A;
  text-decoration: none;
  padding: 17px 0;
  cursor: pointer;
}

.azkar-mobile-overlay__list .azkar-chevron {
  font-size: 22px;
  color: #8A8AA3;
  font-weight: 400;
}

.azkar-mobile-overlay__cta {
  border-bottom: none !important;
  margin-top: auto !important;
  padding-top: 24px;
}

.azkar-mobile-overlay__cta a {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  background: #12132A;
  border-radius: 999px;
  padding: 18px 0 !important;
  font-size: 18px !important;
}

/* Fila dividida: para items de menu que tienen submenu propio Y ademas su
   propia pagina (p.ej. "Publicidad"). El texto navega a la pagina, la flecha
   de la derecha despliega el listado de sus hijos. */
.azkar-mobile-split-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.azkar-mobile-split-row__link {
  flex: 1;
  font-family: "Nunito Sans 10pt Expanded", sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: #12132A;
  text-decoration: none;
  padding: 17px 0;
}

.azkar-mobile-split-row__chevron {
  background: none;
  border: none;
  padding: 17px 4px 17px 16px;
  cursor: pointer;
}

.azkar-mobile-split-row__chevron .azkar-chevron {
  font-size: 22px;
  color: #8A8AA3;
  font-weight: 400;
}

@media (min-width: 1025px) {
  .azkar-mobile-overlay {
    display: none !important;
  }
}


/* El item 'Contacto' del menu WP lleva la clase azkar-mobile-cta-item porque solo
   deberia verse como CTA final del menu movil (dentro de nuestro overlay). En
   escritorio no habia ninguna regla que lo ocultase del menu horizontal nativo,
   asi que se mostraba duplicado junto al boton 'Contactanos'. */
@media (min-width: 1025px) {
  .azkar-mobile-cta-item {
    display: none !important;
  }
}


/* Selector de idioma del overlay movil: pegado justo a la izquierda de la X,
   con el mismo estilo (tamano, color, tipografia) que en el header de
   escritorio (bloque azkar-header-utility-v1 del CSS adicional del tema). */
.azkar-mobile-overlay__lang {
  margin-left: auto;
  margin-right: 16px;
}

.azkar-mobile-overlay__lang ul {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.azkar-mobile-overlay__lang li { margin: 0; line-height: 1; }

.azkar-mobile-overlay__lang a {
  font-family: "Nunito Sans 10pt Expanded", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8A8AA3;
  text-decoration: none;
}

.azkar-mobile-overlay__lang li.current-lang a { color: #1B1464; }

/* Telefono dentro del menu movil (clonado del icono-caja real de la cabecera),
   justo debajo de "Blog". Mismo color/tipografia de marca que en escritorio. */
.azkar-mobile-overlay__phone {
  border-bottom: none !important;
  padding: 14px 0 6px;
}

.azkar-mobile-overlay__phone .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
}

.azkar-mobile-overlay__phone .elementor-icon-box-icon,
.azkar-mobile-overlay__phone .elementor-icon-box-icon .elementor-icon {
  color: #1B1464 !important;
  fill: #1B1464 !important;
  margin: 0 !important;
}

.azkar-mobile-overlay__phone .elementor-icon-box-icon svg { width: 16px; height: 16px; }

.azkar-mobile-overlay__phone .elementor-icon-box-title,
.azkar-mobile-overlay__phone .elementor-icon-box-title a {
  font-family: "Nunito Sans 10pt Expanded", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #1B1464 !important;
  text-decoration: none !important;
  margin: 0 !important;
  text-align: left !important;
}