/* Cápsula de navegación: transparente al cargar, se resuelve en cristal blanco
   al hacer scroll. Misma lógica que la propuesta de Tecnara (y < 40px = arriba). */
.iaexp-nav-shell {
	transition: background-color 320ms ease, box-shadow 320ms ease, backdrop-filter 320ms ease;
}

.iaexp-nav-shell:not(.iaexp-nav-shell--scrolled) {
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* El fondo del estado scrolled lo pinta SOLO el contenedor exterior, a todo el
   ancho y sin redondeos: la clase iaexp-nav-shell está en los dos contenedores
   del header (padre e hijo) y pintar ambos producía dos pastillas concéntricas. */
#header_compacto.iaexp-nav-shell--scrolled {
	background: color-mix(in srgb, var(--e-global-color-4c06697, #fff) 88%, transparent) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	box-shadow: 0 6px 24px -14px rgba(20, 17, 37, 0.22) !important;
}

/* El contenedor interior nunca pinta fondo, sombra ni cápsula: solo aporta el
   layout (logo | menú | botón) y su padding. El padding vertical da la altura de
   la barra: se sube por CSS en vez de en Elementor porque solo afecta al alto y
   deja intacto el ancho, que es lo que tiene el margen justo. */
#header_compacto .iaexp-nav-shell {
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-radius: 0 !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

/* El tema dejaba la cabecera fuera de pantalla al cargar
   (custom-style.css: #header_compacto { top: -200px }) y solo la bajaba con
   header_compacto_activo a partir de 164px de scroll. Se mantiene visible desde
   el inicio, siempre a la misma altura: al hacer scroll solo cambia el fondo, no
   se mueve. El radio va a 0 fijo (no en el transition) para que la barra sea
   rectangular desde el primer fotograma en vez de pasar por la cápsula. */
.elementor-location-header #header_compacto.iaexp-nav-shell {
	top: 26px !important;
	border-radius: 0 !important;
	transition: background-color 320ms ease, box-shadow 320ms ease !important;
}

/* Sobre el vídeo del hero el color de menú del kit (#5B5675) no contrasta con
   casi ningún fotograma, así que en el estado transparente se pasa a blanco con
   halo oscuro: legible sobre fotogramas claros y oscuros sin añadir fondo. */
.iaexp-nav-shell:not(.iaexp-nav-shell--scrolled) .elementor-nav-menu--main .elementor-item,
.iaexp-nav-shell:not(.iaexp-nav-shell--scrolled) .elementor-nav-menu--main .elementor-item:hover,
.iaexp-nav-shell:not(.iaexp-nav-shell--scrolled) .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: #fff !important;
	fill: #fff !important;
	text-shadow: 0 1px 2px rgba(10, 0, 69, 0.7), 0 2px 14px rgba(10, 0, 69, 0.55);
}

.iaexp-nav-shell:not(.iaexp-nav-shell--scrolled) .elementor-widget-theme-site-logo img {
	filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(10, 0, 69, 0.6));
}

/* Los iconos del menu son SVG grises pintados como background-image, así que se
   blanquean con filter igual que el logo mientras la cápsula es transparente. */
.iaexp-nav-shell:not(.iaexp-nav-shell--scrolled) .elementor-nav-menu--main .elementor-item .material-icons {
	filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(10, 0, 69, 0.55));
}

.iaexp-nav-shell .elementor-widget-theme-site-logo img,
.iaexp-nav-shell .elementor-nav-menu--main .elementor-item {
	transition: color 320ms ease, filter 320ms ease, text-shadow 320ms ease;
}

/* Los iconos del menu los pinta el tema como background-image del <i
   class="material-icons icon-menu"> segun la clase menu-item-{ID} del <li>
   (custom-style.css, "Icons menu"). Para "Agentes y Desarrollo" no habia SVG
   subido, asi que va inline. El <li> NO lleva atributo id, solo clase. */
.elementor-nav-menu--layout-horizontal li.menu-item-7113 a .material-icons,
.elementor-nav-menu--layout-vertical li.menu-item-7113 a .material-icons {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 5v3'/%3E%3Ccircle cx='12' cy='3.5' r='1.2'/%3E%3Cpath d='M9.2 13h.01M14.8 13h.01M9.5 17h5'/%3E%3C/svg%3E");
}

/* La cabecera venia con el menu partiendose a dos lineas y desbordando el ancho
   (20px de fuente + 20px de margen + 12px de padding por item). Se compacta el
   conjunto para que las siete secciones, el logo y el boton quepan en una fila. */
.iaexp-nav-shell .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap !important;
}

/* Los tamaños crecen con el viewport en vez de saltar en un breakpoint fijo: el
   mínimo de cada clamp es el valor compacto que ya cabía, así que en las
   pantallas justas la fila queda exactamente igual que antes y solo se ensancha
   donde sobra sitio. El máximo se calcula sobre el hueco libre a 1920px (unos
   400px entre logo, menú y botón). */
.iaexp-nav-shell .elementor-nav-menu--main .elementor-item {
	white-space: nowrap;
	font-size: clamp(15px, 0.88vw, 17px) !important;
	line-height: 1.3 !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
	gap: 6px;
}

.iaexp-nav-shell .elementor-widget-nav-menu {
	--e-nav-menu-horizontal-menu-item-margin: 5px !important;
}

.iaexp-nav-shell .elementor-nav-menu--main .elementor-item .material-icons {
	width: clamp(18px, 1.05vw, 20px);
	height: clamp(18px, 1.05vw, 20px);
}

/* El alto va en auto para que el logo conserve su proporción al ensancharse
   (a 130px de ancho da los mismos 30px de antes). */
.iaexp-nav-shell .elementor-widget-theme-site-logo img {
	width: clamp(130px, 7.6vw, 148px) !important;
	height: auto !important;
}

.iaexp-nav-shell .elementor-widget-button .elementor-button {
	font-size: clamp(14px, 0.8vw, 15.5px) !important;
	line-height: 1.2 !important;
	padding: clamp(9px, 0.62vw, 12px) clamp(18px, 1.15vw, 22px) !important;
	border-width: 2px !important;
	white-space: nowrap;
}

@media (max-width: 1400px) {
	.iaexp-nav-shell .elementor-nav-menu--main .elementor-item {
		font-size: 13px !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.iaexp-nav-shell .elementor-widget-nav-menu {
		--e-nav-menu-horizontal-menu-item-margin: 3px !important;
	}

	.iaexp-nav-shell .elementor-widget-button .elementor-button {
		font-size: 13px !important;
		padding: 8px 14px !important;
	}
}