/* ===== Header mobile/tablet Divi: logo izq + burger der ===== */
@media (max-width:980px){
       .et_header_style_split #main-header .mobile_nav {
        display: block;
        text-align: left;
        background-color: white;
        border-radius: 5px;
        padding: 0px 10px;
    }


  /* Oculta el logo estándar en mobile/tablet */
  #main-header .logo_container{display:none!important;}

  /* Barra mobile como contenedor */
  #et_mobile_nav_menu .mobile_nav{
    position:relative;
    display:flex;
    align-items:center;
    height:56px;
    padding:0 56px 0 16px;   /* espacio a la derecha para el burger */
    background:#f3f4f6;
    border-radius:12px;
  }

  /* “Select Page” -> logo a la izquierda */
  #et_mobile_nav_menu .mobile_nav .select_page{font-size:0;line-height:0;}
  #et_mobile_nav_menu .mobile_nav .select_page::before{
    content:"";
    display:block;
    width:70px;height:70px;
    background:url("/wp-content/uploads/robotlogo.svg") center/contain no-repeat; /* cambia ruta */
  }

  /* Burger al extremo derecho de la pill */
  #et_mobile_nav_menu .mobile_menu_bar{
    position:absolute!important;
    right:16px!important;
    left:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin-top:20px!important;
    z-index:5;
  }
  #et_mobile_nav_menu .mobile_menu_bar:before{font-size:36px;color:#0f3b6a;}

  /* Separación del dropdown al abrir */
  #et_mobile_nav_menu .et_mobile_menu{margin-top:8px;}
}





/* ======================================
   ÍCONOS PERSONALIZADOS
====================================== */

/* Íconos generales */
#menu-item-7944>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-menu-servicio-uxweb.webp');
}

#menu-item-7945>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-menu-metodologia-uxweb.webp');
}

#menu-item-7431>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-menu-contacto-uxweb.webp');
}

#menu-item-7940>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-menu-portafolio-uxweb.webp');
}

/* Íconos de servicios */
#menu-item-7123 a {
	display: flex;
	align-items: center;
}


/* Submenú: quitar gris default y usar color elegante */
.sub-menu li a {
  background: transparent !important;   /* sin gris por defecto */
  transition: background .3s ease, color .3s ease;
  color: #0d355e;                       /* color base de texto */
}

/* Hover: azul marino con texto blanco */
.sub-menu li:hover a {
background: #e6f0fa !important;  /* Azul cielo muy claro */
color: #0d355e;       /* Texto en azul marino */


}

/* Base icon style */
#mobile_menu #menu-item-7123>a::before,
#mobile_menu #menu-item-7427>a::before,
#mobile_menu #menu-item-7432>a::before,
#mobile_menu #menu-item-7629>a::before,
#mobile_menu #menu-item-7939>a::before {
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin-right: 8px;
	display: none;
}

/* Íconos individuales */
#mobile_menu #menu-item-7123>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-seo-uxweb.webp');
}

#mobile_menu #menu-item-7427>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-publicidad-uxweb.webp');
}

#mobile_menu #menu-item-7432>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-web-uxweb.webp');
}

#mobile_menu #menu-item-7939>a::before {
	background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-ventas-uxweb.webp');
}

/* ======================================
   FLECHAS ACORDEÓN
====================================== */
.et_mobile_menu .first-level>a,
.et_mobile_menu .second-level>a {
	background-color: transparent;
	position: relative;
}

.et_mobile_menu .first-level>a:after,
.et_mobile_menu .second-level>a:after {
	font-family: 'ETmodules';
	content: '\4c';
	position: absolute;
	top: 13px;
	right: 10px;
	font-size: 16px;
}

.et_mobile_menu .first-level>a.icon-switch:after,
.et_mobile_menu .second-level>a.icon-switch:after {
	content: '\4d';
}

/* ======================================
   TRANSICIONES DE SUBMENÚ
====================================== */
.et_mobile_menu .second-level,
.et_mobile_menu .third-level {
	display: none;
	transition: all .5s ease;
}

.et_mobile_menu .second-level.reveal-items,
.et_mobile_menu .third-level.reveal-items {
	display: block;
	background: #fff;
	color: transparent;
}

/* ======================================
   RESPONSIVE - MOBILE (max-width: 1024px)
====================================== */
@media (max-width: 1024px) {

	#mobile_menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transform: translateY(-20px);
		visibility: hidden;
		transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
	}

	.mobile_nav.opened #mobile_menu {
		max-height: 1000px;
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	/* Mostrar íconos al abrir */
	#mobile_menu #menu-item-7123>a::before,
	#mobile_menu #menu-item-7427>a::before,
	#mobile_menu #menu-item-7432>a::before,
	#mobile_menu #menu-item-7629>a::before,
	#mobile_menu #menu-item-7939>a::before {
		display: inline-block;
	}

	/* Ítems principales */
	#menu-item-7944,
	#menu-item-7940,
	#menu-item-7945,
	#menu-item-7431 {
		width: 48%;
		border-radius: 12px;
		box-shadow: 0 2px 6px;
        color:rgba(0, 0, 0, 0.08);
        text-align: center;
		padding: 16px 8px;
		box-sizing: border-box;
		transition: width 1s;
	}

	#menu-item-7944 a,
	#menu-item-7940 a,
	#menu-item-7945 a,
	#menu-item-7431 a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 14px;
		color: #2A2A2A;
		text-decoration: none;
		transition: all .5s ease;
	}

	#menu-item-7944 a::before,
	#menu-item-7940 a::before,
	#menu-item-7945 a::before,
	#menu-item-7431 a::before {
		content: '';
		display: block;
		width: 120px;
		height: 120px;
		margin-bottom: 8px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transition: all .5s ease;
	}

	#mobile_menu .first-level>a:not(.icon-switch)+ul {
		display: none !important;
	}

	#mobile_menu .first-level>a.icon-switch+ul {
		display: flex !important;
		flex-direction: row;
	}

	#mobile_menu.expand-menu {
		width: 83vw !important;
		max-width: 85vw !important;
	}

	#mobile_menu.expand-menu>#menu-item-7944 {
		width: 100%;
	}

	#mobile_menu .first-level>.sub-menu {
		display: flex !important;
		flex-wrap: wrap;
		gap: 12px;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	#mobile_menu .second-level.menu-item,
	#mobile_menu .first-level>.sub-menu>li {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 47%;
		text-align: center;
		border-radius: 16px;
		padding: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	}

	#mobile_menu .second-level.menu-item a {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 600;
		color: #2A2A2A;
		line-height: 1.3;
		text-align: center;
		transition: all .5s ease;
	}

	#mobile_menu .second-level.menu-item a::before {
		display: block !important;
		width: 60px;
		height: 60px;
		margin-bottom: 6px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transition: all .5s ease;
	}

	#mobile_menu .third-level {
		margin-top: 8px;
		padding: 0 10px;
		text-align: left;
	}

	#mobile_menu .third-level.menu-item {
		width: 100%;
		border-bottom: 1px solid; 
        color:#E0E0E0;
		padding: 12px 0;
		box-sizing: border-box;
	}

	#mobile_menu .third-level.menu-item:last-child {
		border-bottom: none;
	}

	#mobile_menu .third-level.menu-item>a {
		position: relative;
		display: block;
		font-size: 17px;
		font-weight: 600;
		color: #2A2A2A;
		padding-left: 26px;
		line-height: 1.4;
		text-decoration: none;
	}

	#mobile_menu .third-level.menu-item>a::before {
		font-family: 'ETmodules';
		content: '\45';
		font-size: 14px;
		color: #0076CE;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	#mobile_menu .third-level.menu-item>a:hover {
		color:#D60B72;
	}

	/* Clases auxiliares */
	#mobile_menu .second-level.menu-item.hide-temporal {
		display: none !important;
	}

	#mobile_menu .second-level.menu-item.sub-expand-100 {
		display: flex !important;
		width: 100% !important;
	}

	#mobile_menu .second-level.menu-item.sub-expand-100 .third-level {
		display: block !important;
	}
}

/* ======================================
   RESPONSIVE - TABLETS (981px–1024px)
====================================== */
@media only screen and (min-width: 981px) and (max-width: 1024px) {
	#logo {
		width: 25%;
	}
}

/* =========================
   DESKTOP (≥1024px)
========================= */
@media only screen and (min-width:1024px){
	
	
  /* Íconos en menú principal */
  #top-menu #menu-item-7123>a,
  #top-menu #menu-item-7427>a,
  #top-menu #menu-item-7432>a,
  #top-menu #menu-item-7629>a,
  #top-menu #menu-item-7939>a{
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }

  #top-menu #menu-item-7123>a::before{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-seo-uxweb.webp'); }
  #top-menu #menu-item-7427>a::before{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-publicidad-uxweb.webp'); }
  #top-menu #menu-item-7432>a::before{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-web-uxweb.webp'); }
  #top-menu #menu-item-7939>a::before{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-ventas-uxweb.webp'); }

  #top-menu #menu-item-7123>a::before,
  #top-menu #menu-item-7427>a::before,
  #top-menu #menu-item-7432>a::before,
  #top-menu #menu-item-7629>a::before,
  #top-menu #menu-item-7939>a::before{
    content:''; display:block; width:100px; height:100px;
    background-size:contain; background-repeat:no-repeat; margin-bottom:8px;
  }

  /* Submenús en grid */
  #top-menu li.first-level>ul{
    display:grid !important; grid-template-columns:repeat(2,300px) !important; gap:40px; width:auto !important;
  }
  #top-menu li li a{ padding:20px; width:300px; }
  .nav li li ul{
    width:900px; display:grid !important; grid-template-columns:repeat(2,350px) !important;
    gap:10px; transform:translate(100px,200px);
  }

  /* ---------- Micro-interacciones de accesibilidad ---------- */
  #top-menu > li > a{
    position:relative; text-decoration:none; transition:color .2s ease;
  }
  /* Color y subrayado suave en hover/focus */
  @media (hover:hover){
    #top-menu > li > a:hover{ color:#D60B72; }
  }
  #top-menu > li > a:focus-visible{
    outline:none;
    box-shadow:0 2px 0 0 #2d4f7a;
  }
  /* Página activa (opcional) */
  #top-menu > li.current-menu-item > a{ color:#2d4f7a; }
  #top-menu > li.current-menu-item > a::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#2d4f7a;
  }

  /* ---------- Hover con imagen adicional (preview) ---------- */
  /* Aplica a Portafolio, FAQ (si lo usas), y Contáctanos */
  #menu-item-7940, /* Portafolio */
  #menu-item-7945, /* (si decides usarlo) */
  #menu-item-7431  /* Contáctanos */{
    position:relative;
  }

  #menu-item-7940::after,
  #menu-item-7945::after,
  #menu-item-7431::after{
    content:''; position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
    width:clamp(120px,12vw,180px); height:clamp(80px,8vw,120px);
    background-repeat:no-repeat; background-size:contain; background-position:center;
    opacity:0; pointer-events:none; will-change:opacity, transform;
    transition:opacity .25s ease, transform .25s ease; z-index:10;
  }

  @media (hover:hover){
    #menu-item-7940:hover::after{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-menu-portafolio-uxweb.webp'); opacity:1; transform:translate(-50%,0); }
    #menu-item-7945:hover::after{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-menu-metodologia-uxweb.webp');                   opacity:1; transform:translate(-50%,0); }
    #menu-item-7431:hover::after{ background-image:url('https://www.uxweb.mx/wp-content/uploads/icono-menu-contacto-uxweb.webp');    opacity:1; transform:translate(-50%,0); }
  }

  /* Respeta usuarios con motion reducido */
  @media (prefers-reduced-motion:reduce){
    #top-menu > li > a{ transition:none; }
    #menu-item-7940::after, #menu-item-7945::after, #menu-item-7431::after{ transition:none; }
  }

.sub-menu li a::before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 8px auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .3s ease; /* animación suave */
}

/* Solo zoom en hover */
.sub-menu li:hover a::before {
  transform: scale(1.3);
}

/* Imágenes específicas */
#menu-item-7123 a::before {
  background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-seo-uxweb.webp');
}
#menu-item-7427 a::before {
  background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-web-uxweb.webp');
}
#menu-item-7432 a::before {
  background-image: url('https://www.uxweb.mx/wp-content/uploads/web-ux-3.png');
}
#menu-item-7939 a::before {
  background-image: url('https://www.uxweb.mx/wp-content/uploads/icono-ventas-uxweb.webp');
}
	
}