/**
 * Store IO Sistemas — cambios_visuales.md
 * Colores de marca + menú mobile (Hello Elementor / Elementor / Blocksy)
 */

:root,
.elementor-kit-11 {
	--storeio-brand: #0d9a9d;
	--e-global-color-accent: #0d9a9d;
	--e-global-color-afc7c1f: #0d9a9d;
}

/* Sustituir azules corporativos hardcodeados (#025CF2, #073074) */
.elementor a[style*="#025CF2"],
.elementor a[style*="#073074"] {
	color: var(--storeio-brand) !important;
}

/* Logo del header: 50% más grande (solo el logo) */
.elementor-location-header .elementor-element-5c07f5f1 .elementor-widget-container {
	overflow: visible;
}

.elementor-location-header .elementor-element-5c07f5f1 img {
	transform: scale(1.5);
	transform-origin: left center;
	background: transparent !important;
}

/* Logo transparente en footer (mismo que header) */
.elementor-location-footer .elementor-element-2c770954,
.elementor-location-footer .elementor-element-2c770954 .elementor-widget-container,
.elementor-location-footer .elementor-element-2c770954 a {
	background: transparent !important;
}

.elementor-location-footer .elementor-element-2c770954 img {
	background: transparent !important;
}

/* Menú principal del header — desktop (excepto páginas con header fijo/blanco) */
body:not(.storeio-fixed-header) .elementor-location-header .elementor-nav-menu--main .elementor-item,
body:not(.storeio-fixed-header) .elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
body:not(.storeio-fixed-header) .elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
body:not(.storeio-fixed-header) .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
body:not(.storeio-fixed-header) .elementor-location-header .elementor-nav-menu--main .elementor-sub-item,
body:not(.storeio-fixed-header) .elementor-element.elementor-element-2726b2c .elementor-nav-menu--main .elementor-item,
body:not(.storeio-fixed-header) .elementor-element.elementor-element-2726b2c .elementor-nav-menu--main .elementor-item:hover,
body:not(.storeio-fixed-header) .elementor-element.elementor-element-2726b2c .elementor-nav-menu--main .elementor-item:focus,
body:not(.storeio-fixed-header) .elementor-element.elementor-element-2726b2c .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--storeio-brand) !important;
	fill: var(--storeio-brand) !important;
}

.site-header .site-navigation ul.menu > li > a,
.site-header .site-navigation ul.menu > li > a:hover,
.site-header .site-navigation ul.menu > li > a:focus {
	color: var(--storeio-brand) !important;
}

@media (min-width: 768px) {
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-underline .elementor-item.elementor-item-active::after,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-underline .elementor-item.highlighted::after,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-underline .elementor-item:focus::after,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-underline .elementor-item:hover::after,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-overline .elementor-item.elementor-item-active::before,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-overline .elementor-item.highlighted::before,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-overline .elementor-item:focus::before,
	body:not(.storeio-fixed-header) .elementor-location-header .e--pointer-overline .elementor-item:hover::before {
		background-color: var(--storeio-brand) !important;
	}
}

@media (max-width: 767px) {
	/* 1. Hamburguesa — líneas / ícono en blanco */
	.elementor-menu-toggle,
	.elementor-menu-toggle i,
	.elementor-menu-toggle .eicon,
	.elementor-menu-toggle .eicon-menu-bar,
	.mobile-menu-button span,
	.hamburger-line,
	.menu-toggle span,
	.site-header .site-navigation-toggle .site-navigation-toggle-icon,
	.ct-header-trigger .ct-icon,
	.ct-header-trigger svg rect {
		color: #ffffff !important;
		fill: #ffffff !important;
		background-color: #ffffff !important;
		border-color: #ffffff !important;
	}

	.ct-header-trigger,
	.elementor-menu-toggle {
		color: #ffffff !important;
	}

	.site-header .site-navigation-toggle {
		background-color: transparent !important;
	}

	.site-header .site-navigation-toggle .site-navigation-toggle-icon::before,
	.site-header .site-navigation-toggle .site-navigation-toggle-icon::after {
		background-color: #ffffff !important;
		box-shadow: 0 0.35rem 0 #ffffff !important;
	}

	.site-header .site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::before {
		box-shadow: none !important;
	}

	/* 2. Fondo del panel desplegable */
	.elementor-nav-menu--dropdown,
	.elementor-nav-menu--dropdown.elementor-nav-menu__container,
	.elementor-nav-menu--dropdown .elementor-nav-menu,
	.elementor-location-header .elementor-nav-menu--dropdown,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu,
	.mobile-menu,
	.mobile-menu.menu-container,
	.mobile-nav,
	.menu-dropdown,
	.nav-drawer,
	#offcanvas,
	#offcanvas .ct-panel-inner,
	.site-navigation-dropdown,
	.site-navigation-dropdown ul.menu {
		background-color: #8896a5 !important;
	}

	.site-navigation-dropdown ul.menu li a {
		background-color: #8896a5 !important;
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
	}

	/* Ítems del menú desplegable: texto negro sobre fondo gris */
	.elementor-nav-menu--dropdown .elementor-item,
	.elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-nav-menu--dropdown .elementor-item:focus,
	.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	.elementor-nav-menu--dropdown .elementor-sub-item,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	body.storeio-fixed-header .elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
	body.storeio-fixed-header .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
	body.storeio-fixed-header .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus,
	body.storeio-fixed-header .elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	.site-navigation-dropdown ul.menu li a,
	.site-navigation-dropdown ul.menu li a:hover,
	.site-navigation-dropdown ul.menu li a:focus {
		color: #111111 !important;
		fill: #111111 !important;
	}

	.elementor-nav-menu--dropdown .e--pointer-underline .elementor-item.elementor-item-active::after,
	.elementor-nav-menu--dropdown .e--pointer-underline .elementor-item.highlighted::after,
	.elementor-nav-menu--dropdown .e--pointer-underline .elementor-item:focus::after,
	.elementor-nav-menu--dropdown .e--pointer-underline .elementor-item:hover::after {
		background-color: #111111 !important;
	}

	/* 3. Acentos azules → teal en mobile (variables :root aplican en todo el sitio) */
	.elementor-widget-button .elementor-button:not(.elementor-button-outline),
	.elementor-widget-call-to-action .elementor-cta__button {
		background-color: var(--storeio-brand) !important;
		border-color: var(--storeio-brand) !important;
	}

	.elementor-widget-icon-list .elementor-icon-list-icon i,
	.elementor-widget-icon-list .elementor-icon-list-icon svg {
		color: var(--storeio-brand) !important;
		fill: var(--storeio-brand) !important;
	}

	.e--pointer-underline .elementor-item.elementor-item-active::after,
	.e--pointer-underline .elementor-item.highlighted::after,
	.e--pointer-underline .elementor-item:focus::after,
	.e--pointer-underline .elementor-item:hover::after,
	.e--pointer-overline .elementor-item.elementor-item-active::before,
	.e--pointer-overline .elementor-item.highlighted::before,
	.e--pointer-overline .elementor-item:focus::before,
	.e--pointer-overline .elementor-item:hover::before {
		background-color: var(--storeio-brand) !important;
	}
}