/* =========================================================
   ESEMTIA HEADER / NAV SYSTEM
========================================================= */

/* =========================
   VARIABLES
========================= */
:root {
	--header-height-desktop: 72px;
	--header-height-mobile: 68px;

	--logo-height-desktop: 40px;
	--logo-width-desktop: 152px;

	--logo-height-mobile: 40px;
	--logo-width-mobile: 152px;

	--adminbar-height: 0px;
	--offcanvas-width-mobile: min(92vw, 420px);
	
	--esemtia-header-bg-sticky: #e4e7f9;
	--esemtia-header-border-sticky: transparent;  /*rgba(17, 22, 51, 0.08);*/
	--esemtia-header-fg: #111633;

	--esemtia-panel-bg: rgb(228 231 249 / 95%);/*#e4e7f9;*/
	--esemtia-panel-fg: #111633;
	--esemtia-panel-max-width: 1440px;

	--esemtia-content-offset-desktop: var(--header-height-desktop);
	--esemtia-content-offset-mobile: var(--header-height-mobile);
}

body.admin-bar {
	--adminbar-height: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--adminbar-height: 46px;
	}
}

/* =========================
   OFFSET OPCIONAL PARA HERO/BLOQUE SUPERIOR
========================= */
.esemtia-header-offset {
	padding-top: var(--esemtia-content-offset-desktop);
}

@media (max-width: 1024px) {
	.esemtia-header-offset {
		padding-top: var(--esemtia-content-offset-mobile);
	}
}

/* =========================
   ESTADOS DE COLOR
========================= */
/*body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open) {
	--esemtia-header-fg: #ffffff;
}
body.esemtia-hero-light:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open) {
	--esemtia-header-fg: #111633;
}
body.esemtia-header-scrolled:not(.esemtia-desktop-panel-open) {
	--esemtia-header-fg: #111633;
}
body.esemtia-desktop-panel-open {
	--esemtia-header-fg: #ffffff;
}
*/
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open) {
	--esemtia-header-fg: #ffffff;
}
body.esemtia-desktop-panel-open {
	--esemtia-header-fg: #111633;
}

/* =========================
   ESTRUCTURA BASE HEADER
========================= */
.site {
	position: relative;
}

.site-header,
#site-navigation,
.main-navigation,
.main-navigation.is_stuck,
.navigation-stick,
.sticky-enabled .main-navigation.is_stuck,
#mobile-header {
	width: 100%;
	height: var(--header-height-desktop);
	min-height: var(--header-height-desktop);
}
/*#mobile-header {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}*/


.site-header .inside-header.grid-container,
#mobile-header .inside-header.grid-container,
#site-navigation > .inside-navigation.grid-container,
.main-navigation.has-branding .inside-navigation.grid-container,
.main-navigation.is_stuck > .inside-navigation.grid-container,
.main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container,
.navigation-stick > .inside-navigation.grid-container {
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.inside-header,
#site-navigation > .inside-navigation,
.main-navigation.is_stuck > .inside-navigation,
.navigation-stick > .inside-navigation,
#sticky-navigation .inside-navigation {
	height: 100%;
	display: flex;
	align-items: center !important;
	justify-content: space-between !important;
}


/* =========================
   NORMALIZAR PADDINGS / ALTURAS HEADER Y STICKY
========================= */

/* Desktop */
@media (min-width: 1025px) {
	#masthead.site-header .inside-header,
	#site-navigation > .inside-navigation,
	#sticky-navigation .inside-navigation,
	.main-navigation.is_stuck > .inside-navigation,
	.navigation-stick > .inside-navigation,
	.sticky-enabled .main-navigation.is_stuck .inside-navigation {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		min-height: var(--header-height-desktop) !important;
		height: var(--header-height-desktop) !important;
		box-sizing: border-box;
		align-items: center !important;
	}

	#masthead.site-header .site-logo,
	#site-navigation .navigation-branding,
	#site-navigation .menu-bar-items,
	.main-navigation.is_stuck .navigation-branding,
	.main-navigation.is_stuck .menu-bar-items,
	#sticky-navigation .navigation-branding,
	#sticky-navigation .menu-bar-items {
		height: 100%;
		display: flex;
		align-items: center !important;
	}
	
	#sticky-navigation .menu-bar-items {
		padding-right:20px;
	}
}

/* Mobile */
@media (max-width: 1024px) {
	#masthead.site-header .inside-header,
	#mobile-header .inside-header,
	#mobile-menu-control-wrapper > .inside-navigation,
	#site-navigation > .inside-navigation,
	#sticky-navigation .inside-navigation,
	.main-navigation.is_stuck > .inside-navigation,
	.navigation-stick > .inside-navigation,
	.sticky-enabled .main-navigation.is_stuck .inside-navigation {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		min-height: var(--header-height-mobile) !important;
		height: var(--header-height-mobile) !important;
		box-sizing: border-box;
		align-items: center !important;
	}

	#masthead.site-header .site-logo,
	#mobile-header .site-logo,
	#mobile-menu-control-wrapper .menu-bar-items,
	#mobile-header .menu-bar-items,
	#site-navigation .navigation-branding,
	#site-navigation .menu-bar-items {
		height: 100%;
		display: flex;
		align-items: center !important;
	}
}

/* =========================
   MÓVIL: PISAR PADDING 0 DE GP
========================= */
@media (max-width: 1024px) {
	.main-navigation.has-branding .inside-navigation.grid-container,
	.main-navigation.has-branding .inside-navigation:not(.grid-container),
	#mobile-header .inside-header.grid-container,
	#mobile-menu-control-wrapper > .inside-navigation,
	#site-navigation > .inside-navigation,
	#sticky-navigation .inside-navigation,
	.main-navigation.is_stuck > .inside-navigation,
	.navigation-stick > .inside-navigation,
	.sticky-enabled .main-navigation.is_stuck .inside-navigation {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: var(--header-height-mobile) !important;
		height: var(--header-height-mobile) !important;
		box-sizing: border-box;
		align-items: center !important;
	}
}

/* =========================
   HEADER OVERLAY SOLO EN HOME, PAGES Y BLOG
========================= */

body.home #masthead.site-header,
body.page #masthead.site-header,
body.blog #masthead.site-header {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* estado inicial transparente */
body.home .main-navigation,
body.home #site-navigation,
body.home #sticky-navigation,
body.home .navigation-stick,
body.page .main-navigation,
body.page #site-navigation,
body.page #sticky-navigation,
body.page .navigation-stick,
body.blog .main-navigation,
body.blog #site-navigation,
body.blog #sticky-navigation,
body.blog .navigation-stick {
	background: transparent;
	border-bottom: 1px solid transparent;
}


/* sticky claro */
body.esemtia-header-scrolled #mobile-header,
body.esemtia-header-scrolled #site-navigation,
body.esemtia-header-scrolled .main-navigation,
body.esemtia-header-scrolled #sticky-navigation,
body.esemtia-header-scrolled .navigation-stick,
body.esemtia-header-scrolled .main-navigation.is_stuck,
.sticky-enabled .main-navigation.is_stuck {
	background: var(--esemtia-header-bg-sticky) !important;
	border-bottom: 1px solid var(--esemtia-header-border-sticky) !important;
}

/* panel abierto: pinta full width el header, no la nav interna */
body.esemtia-desktop-panel-open #masthead.site-header {
	background: var(--esemtia-panel-bg) !important;
}

body.esemtia-desktop-panel-open #site-navigation,
body.esemtia-desktop-panel-open .main-navigation,
body.esemtia-desktop-panel-open #sticky-navigation,
body.esemtia-desktop-panel-open .navigation-stick,
body.esemtia-desktop-panel-open .main-navigation.is_stuck {
	/*background: transparent !important;*/
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* =========================
   HEADER NORMAL EN SINGLE / ARCHIVES / ETC
========================= */

body.single #masthead.site-header,
body.single-post #masthead.site-header,
body.archive #masthead.site-header,
body.category #masthead.site-header,
body.search #masthead.site-header,
body.error404 #masthead.site-header {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

body.single .main-navigation,
body.single #site-navigation,
body.single #sticky-navigation,
body.single .navigation-stick,
body.single-post .main-navigation,
body.single-post #site-navigation,
body.single-post #sticky-navigation,
body.single-post .navigation-stick,
body.archive .main-navigation,
body.archive #site-navigation,
body.archive #sticky-navigation,
body.archive .navigation-stick,
body.category .main-navigation,
body.category #site-navigation,
body.category #sticky-navigation,
body.category .navigation-stick,
body.search .main-navigation,
body.search #site-navigation,
body.search #sticky-navigation,
body.search .navigation-stick,
body.error404 .main-navigation,
body.error404 #site-navigation,
body.error404 #sticky-navigation,
body.error404 .navigation-stick {
	background: var(--esemtia-header-bg-sticky) !important;
	border-bottom: 1px solid var(--esemtia-header-border-sticky) !important;
}

/* =========================
   COLOR GENERAL HEADER
========================= */
.main-navigation .main-nav > ul > li > a,
.main-navigation .menu-bar-item > a,
.main-navigation .menu-toggle,
.main-navigation .navigation-branding a,
#site-navigation .menu-bar-item > a,
#sticky-navigation .menu-bar-item > a,
#site-navigation .slideout-toggle,
#sticky-navigation .slideout-toggle {
	color: var(--esemtia-header-fg) !important;
	transition: color .25s ease;
}

/* =========================
   LOGOS GP
========================= */
.navigation-branding,
.site-logo,
.site-logo.mobile-header-logo,
.sticky-navigation-logo {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1;
	display: flex;
	align-items: center !important;
	box-sizing: border-box;
}

.site-header .header-image,
.site-header .navigation-branding img,
.site-header .site-logo img,
.site-header .site-logo.mobile-header-logo img,
#site-navigation .navigation-branding img,
#site-navigation .sticky-navigation-logo img,
.main-navigation.is_stuck .navigation-branding img,
.main-navigation.is_stuck .sticky-navigation-logo img,
.navigation-stick .navigation-branding img,
.navigation-stick .sticky-navigation-logo img,
#mobile-header .site-logo img,
#mobile-header .site-logo.mobile-header-logo img {
	display: block !important;
	width: var(--logo-width-desktop) !important;
	height: var(--logo-height-desktop) !important;
	min-width: var(--logo-width-desktop) !important;
	min-height: var(--logo-height-desktop) !important;
	max-width: var(--logo-width-desktop) !important;
	max-height: var(--logo-height-desktop) !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	transform: none !important;
	transition: none !important;
}

.main-navigation .sticky-navigation-logo {
	display: none;
}

.main-navigation.navigation-stick .sticky-navigation-logo,
.main-navigation.is_stuck .sticky-navigation-logo,
.sticky-enabled .main-navigation.is_stuck .sticky-navigation-logo {
	display: flex !important;
	align-items: center !important;
}
/* ===== Gestion logo light / default ======= */
/* =========================
   LOGO LIGHT EN HERO OSCURO
   Desktop + móvil
========================= */

/* El anchor del logo será la referencia visual */
.site-logo a,
.navigation-branding a,
.sticky-navigation-logo a,
.site-logo.mobile-header-logo a {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Logo light alternativo */
.site-logo a::after,
.navigation-branding a::after,
.sticky-navigation-logo a::after,
.site-logo.mobile-header-logo a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--esemtia-logo-light);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* Mantener la caja visual del logo */
.site-logo a,
.navigation-branding a,
.sticky-navigation-logo a,
.site-logo.mobile-header-logo a {
	width: var(--logo-width-desktop);
	height: var(--logo-height-desktop);
}

@media (max-width: 1024px) {
	.site-logo a,
	.navigation-branding a,
	.sticky-navigation-logo a,
	.site-logo.mobile-header-logo a {
		width: var(--logo-width-mobile);
		height: var(--logo-height-mobile);
	}
}

/* =========================
   HERO OSCURO: mostrar logo claro
   Solo en estado inicial overlay
========================= */
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.site-logo img,
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.navigation-branding img,
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.sticky-navigation-logo img,
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.site-logo.mobile-header-logo img {
	opacity: 0;
}

body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.site-logo a::after,
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.navigation-branding a::after,
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.sticky-navigation-logo a::after,
body.esemtia-hero-dark:not(.esemtia-header-scrolled):not(.esemtia-desktop-panel-open):not(.slide-opened):not(.offside-js--is-open):not(.is-open)
.site-logo.mobile-header-logo a::after {
	opacity: 1;
}

/* =========================
   SCROLL / PANEL / MENÚ ABIERTO:
   volver al logo normal
========================= */
body.esemtia-header-scrolled .site-logo img,
body.esemtia-header-scrolled .navigation-branding img,
body.esemtia-header-scrolled .sticky-navigation-logo img,
body.esemtia-header-scrolled .site-logo.mobile-header-logo img,
body.esemtia-desktop-panel-open .site-logo img,
body.esemtia-desktop-panel-open .navigation-branding img,
body.esemtia-desktop-panel-open .sticky-navigation-logo img,
body.esemtia-desktop-panel-open .site-logo.mobile-header-logo img,
body.slide-opened .site-logo img,
body.slide-opened .navigation-branding img,
body.slide-opened .sticky-navigation-logo img,
body.slide-opened .site-logo.mobile-header-logo img,
body.offside-js--is-open .site-logo img,
body.offside-js--is-open .navigation-branding img,
body.offside-js--is-open .sticky-navigation-logo img,
body.offside-js--is-open .site-logo.mobile-header-logo img,
body.is-open .site-logo img,
body.is-open .navigation-branding img,
body.is-open .sticky-navigation-logo img,
body.is-open .site-logo.mobile-header-logo img {
	opacity: 1;
}

body.esemtia-header-scrolled .site-logo a::after,
body.esemtia-header-scrolled .navigation-branding a::after,
body.esemtia-header-scrolled .sticky-navigation-logo a::after,
body.esemtia-header-scrolled .site-logo.mobile-header-logo a::after,
body.esemtia-desktop-panel-open .site-logo a::after,
body.esemtia-desktop-panel-open .navigation-branding a::after,
body.esemtia-desktop-panel-open .sticky-navigation-logo a::after,
body.esemtia-desktop-panel-open .site-logo.mobile-header-logo a::after,
body.slide-opened .site-logo a::after,
body.slide-opened .navigation-branding a::after,
body.slide-opened .sticky-navigation-logo a::after,
body.slide-opened .site-logo.mobile-header-logo a::after,
body.offside-js--is-open .site-logo a::after,
body.offside-js--is-open .navigation-branding a::after,
body.offside-js--is-open .sticky-navigation-logo a::after,
body.offside-js--is-open .site-logo.mobile-header-logo a::after,
body.is-open .site-logo a::after,
body.is-open .navigation-branding a::after,
body.is-open .sticky-navigation-logo a::after,
body.is-open .site-logo.mobile-header-logo a::after {
	opacity: 0;
}
/* ===== fin Gestion logo light / default ======= */


/* =========================
   CTA / MENU BAR ITEMS
========================= */
#site-navigation .navigation-branding,
.navigation-stick .navigation-branding,
.main-navigation.is_stuck .navigation-branding,
#sticky-navigation .navigation-branding {
	flex: 0 0 auto;
}

#site-navigation .menu-bar-items,
.navigation-stick .menu-bar-items,
.main-navigation.is_stuck .menu-bar-items,
#sticky-navigation .menu-bar-items {
	margin-left: auto !important;
	flex: 0 0 auto;
	display: flex !important;
	align-items: center !important;
	gap: 18px;
}

.esemtia-header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.esemtia-header-signin {
	text-decoration: none;
	color: var(--esemtia-header-fg) !important;
	line-height: 1;
}

.esemtia-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid currentColor;
	background: #0a0f2c;
	color: #fff !important;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
}


/* =========================
   STICKY GP
========================= */
.sticky-enabled .main-navigation.is_stuck {
	height: var(--header-height-desktop);
	top: var(--adminbar-height);
}

.sticky-enabled .main-navigation.is_stuck .inside-navigation {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sticky-enabled .main-navigation.is_stuck .menu-bar-items {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* =========================
   DESKTOP: ESTRUCTURA LIMPIA
========================= */
@media (min-width: 1025px) {
	/* fuera wrapper móvil en desktop */
	#mobile-menu-control-wrapper {
		display: none !important;
	}

	/* header real = logo + nav */
	#masthead.site-header .inside-header {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}

	#masthead.site-header .site-logo {
		flex: 0 0 auto !important;
		position: relative;
		z-index: 1004;
		margin-right: 0 !important;
	}

	/* nav desktop ocupa el resto */
	#site-navigation {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
		position: relative !important;
		background: transparent !important;
		border-bottom: 1px solid transparent !important;
	}

	#site-navigation > .inside-navigation {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: 100% !important;
	}

	/* ocultar menú inline GP */
	.main-navigation:not(.slideout-navigation) .main-nav > ul,
	#site-navigation .inside-navigation .main-nav > ul {
		display: none !important;
	}

	/* ocultar toggles nativos GP en desktop */
	#site-navigation .menu-toggle,
	#site-navigation .slideout-toggle,
	#site-navigation .menu-bar-item.slideout-toggle,
	#sticky-navigation .slideout-toggle,
	#sticky-navigation .menu-bar-item.slideout-toggle,
	.main-navigation.is_stuck .slideout-toggle,
	.main-navigation.is_stuck .menu-bar-item.slideout-toggle,
	.navigation-stick .slideout-toggle,
	.navigation-stick .menu-bar-item.slideout-toggle,
	.sticky-enabled .main-navigation.is_stuck .slideout-toggle,
	.sticky-enabled .main-navigation.is_stuck .menu-bar-item.slideout-toggle {
		display: none !important;
	}

	/* nunca mostrar CTA/toggle custom dentro del wrapper móvil */
	#mobile-menu-control-wrapper .esemtia-header-actions,
	#mobile-menu-control-wrapper .esemtia-desktop-toggle-wrap {
		display: none !important;
	}
}

/* =========================
   TOGGLE DESKTOP (PLUGIN)
========================= */
.esemtia-desktop-toggle-wrap {
	display: none;
}
@media (min-width: 1025px) {
	.esemtia-desktop-toggle-wrap {
		display: flex;
		align-items: center;
		margin-left: 16px;
		flex: 0 0 auto;
	}

	button.esemtia-desktop-toggle,
	button.esemtia-desktop-toggle:hover {
		background: transparent !important;
		color: var(--esemtia-header-fg) !important;
	}

	.esemtia-desktop-toggle {
		position: relative;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		color: var(--esemtia-header-fg);
	}

	.esemtia-desktop-toggle span {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 24px;
		height: 2px;
		background: currentColor;
		border-radius: 999px;
		transform-origin: center;
		transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
		will-change: transform, opacity;
	}

	/* Estado hamburguesa */
	.esemtia-desktop-toggle span:nth-child(1) {
		transform: translate(-50%, -8px);
	}

	.esemtia-desktop-toggle span:nth-child(2) {
		transform: translate(-50%, 0);
	}

	.esemtia-desktop-toggle span:nth-child(3) {
		transform: translate(-50%, 8px);
	}

	/* Estado X */
	body.esemtia-desktop-panel-open .esemtia-desktop-toggle span:nth-child(1) {
		transform: translate(-50%, 0) rotate(45deg);
	}

	body.esemtia-desktop-panel-open .esemtia-desktop-toggle span:nth-child(2) {
		opacity: 0;
	}

	body.esemtia-desktop-panel-open .esemtia-desktop-toggle span:nth-child(3) {
		transform: translate(-50%, 0) rotate(-45deg);
	}
}
/* =========================
   PANEL DESKTOP (PLUGIN)
   Independiente, no colgado de la nav
========================= */
.esemtia-desktop-panel {
	display: none;
}

@media (min-width: 1025px) {

	.esemtia-desktop-panel {
		position: fixed;
		top: var(--header-height-desktop);
		left: 0;
		right: 0;
		width: 100vw;
		z-index: 1001;
		/*background: var(--esemtia-panel-bg);*/
		color: var(--esemtia-panel-fg);
		/*border-top: 1px solid rgba(255,255,255,.08);*/

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		transition:
			opacity .22s ease,
			transform .22s ease,
			visibility 0s linear .22s;
		display: block !important;
	}

	body.esemtia-desktop-panel-open .esemtia-desktop-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition:
			opacity .22s ease,
			transform .22s ease,
			visibility 0s linear 0s;
	}

	.esemtia-desktop-panel__inner {
		max-width: var(--esemtia-panel-max-width);
		margin: 0 auto;
		padding: 14px 40px 18px;
	}

	/* =========================
	   TOP NAV COMO CAJA FLOTANTE
	========================= */
	.esemtia-desktop-topnav {
		position: relative;
		z-index: 30;
		display: flex;
		justify-content: center;
	}

	.esemtia-desktop-topnav__list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 18px 52px;
		list-style: none;
		margin: 0;
		padding: 22px 32px;
		background: #eef1fb;
		border: 1px solid rgba(17, 22, 51, 0.06);
		border-radius: 22px;
		box-shadow: 0 16px 34px rgba(17, 22, 51, 0.07);
		backdrop-filter: blur(4px);
	}

	.esemtia-desktop-topnav__item {
		position: relative;
		margin: 0;
		padding: 0;
	}

	.esemtia-desktop-topnav__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: var(--color-princ-1);
		font-size: 17px;
		font-weight: 400;
		line-height: 1.2;
		padding: 6px 0;
		transition: color .2s ease, opacity .2s ease;
		white-space: nowrap;
	}

	.esemtia-desktop-topnav__item:hover > .esemtia-desktop-topnav__link,
	.esemtia-desktop-topnav__item.is-active > .esemtia-desktop-topnav__link {
		color: var(--color-princ-2);
	}

	/* =========================
	   SUBPANELES FLOTANTES
	========================= */

	.esemtia-desktop-subpanels {
		position: relative;
		margin-top: 12px;
		min-height: 0;
		height: 0;
		z-index: 20;
	}

	.esemtia-desktop-subpanel {
		position: absolute;
		top: 0;
		left: 50%;
		width: min(100%, 980px);
		display: block;
		z-index: 20;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(-50%) translateY(10px) scale(.985);

		transition:
			opacity .24s ease,
			transform .24s ease,
			visibility 0s linear .24s;
		will-change: opacity, transform;
	}

	.esemtia-desktop-subpanel.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0) scale(1);

		transition:
			opacity .24s ease,
			transform .24s ease,
			visibility 0s linear 0s;
	}

	.esemtia-desktop-subpanel--x-narrow {
		width: max-content;
		min-width: 80px;
		max-width: 130px;
	}
	.esemtia-desktop-subpanel--x-narrow .esemtia-desktop-subpanel__link {
		text-align: center;
        display: block;
        font-size: inherit;
		padding:5px;
	}
	.esemtia-desktop-subpanel--x-narrow .esemtia-desktop-subpanel__inner {
		padding: 12px 12px;
	}
	.esemtia-desktop-subpanel--x-narrow .esemtia-desktop-subpanel__links {
		row-gap: 8px;
	}
	
	.esemtia-desktop-subpanel--narrow {
		width: max-content;
		min-width: 200px;
		max-width: 360px;
	}

	.esemtia-desktop-subpanel--medium {
		width: max-content;
		min-width: 320px;
		max-width: 480px;
	}	

	.esemtia-desktop-subpanel__inner {
		background: #eef1fb;
		border: 1px solid rgba(17, 22, 51, 0.06);
		border-radius: 22px;
		padding: 26px 32px;
		box-shadow: 0 16px 34px rgba(17, 22, 51, 0.07);
		backdrop-filter: blur(4px);
	}

	.esemtia-desktop-subpanel--narrow .esemtia-desktop-subpanel__inner {
		padding: 22px 24px;
	}

	.esemtia-desktop-subpanel__links {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		row-gap: 14px;
		column-gap: 34px;
	}

	.esemtia-desktop-subpanel__links--1col {
		grid-template-columns: 1fr;
		max-width: 300px;
	}

	.esemtia-desktop-subpanel__links--2cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 640px;
	}

	.esemtia-desktop-subpanel__item {
		margin: 0;
		padding: 0;
	}

	.esemtia-desktop-subpanel__link {
		text-decoration: none;
		color: var(--esemtia-panel-fg);
		font-size: 16px;
		line-height: 1.35;
		transition: color .18s ease, opacity .18s ease;
		white-space: nowrap;
	}

	.esemtia-desktop-subpanel__link:hover {
		color: var(--color-princ-2);
	}
}

/* =========================
   MÓVIL: BASE
========================= */
@media (max-width: 1024px) {
	.site-header,
	#site-navigation,
	.main-navigation,
	.main-navigation.is_stuck,
	.navigation-stick,
	.sticky-enabled .main-navigation.is_stuck,
	#mobile-header {
		height: var(--header-height-mobile);
		min-height: var(--header-height-mobile);
	}

	.site-header .header-image,
	.site-header .navigation-branding img,
	.site-header .site-logo img,
	.site-header .site-logo.mobile-header-logo img,
	#site-navigation .navigation-branding img,
	#site-navigation .sticky-navigation-logo img,
	.main-navigation.is_stuck .navigation-branding img,
	.main-navigation.is_stuck .sticky-navigation-logo img,
	.navigation-stick .navigation-branding img,
	.navigation-stick .sticky-navigation-logo img,
	#mobile-header .site-logo img,
	#mobile-header .site-logo.mobile-header-logo img {
		width: var(--logo-width-mobile) !important;
		height: var(--logo-height-mobile) !important;
		min-width: var(--logo-width-mobile) !important;
		min-height: var(--logo-height-mobile) !important;
		max-width: var(--logo-width-mobile) !important;
		max-height: var(--logo-height-mobile) !important;
		object-fit: contain !important;
	}

	/* En móvil no queremos los menu-bar-items del header desktop */
	#mobile-header .menu-bar-items,
	#mobile-menu-control-wrapper .menu-bar-items,
	.main-navigation.mobile-menu-control-wrapper .menu-bar-items {
		display: none !important;
	}

	.esemtia-header-actions {
		display: none !important;
	}

	.esemtia-desktop-toggle-wrap,
	.esemtia-desktop-panel {
		display: none !important;
	}
	
	/* asegurar el toggle y formatear */
	#mobile-header .menu-toggle {
		/*display:block !important;*/
		display: flex !important;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
	}
	#mobile-header .menu-toggle .gp-icon {
		font-size: 24px;
		line-height: 1;
	}


	/* Ocultar toggles nativos en barras desktop/sticky también en mobile */
	#site-navigation .slideout-toggle,
	#site-navigation .menu-bar-item.slideout-toggle,
	#sticky-navigation .slideout-toggle,
	#sticky-navigation .menu-bar-item.slideout-toggle,
	.main-navigation.is_stuck .slideout-toggle,
	.main-navigation.is_stuck .menu-bar-item.slideout-toggle,
	.navigation-stick .slideout-toggle,
	.navigation-stick .menu-bar-item.slideout-toggle {
		display: none !important;
	}

	/* Mantener visible el toggle del wrapper móvil real */
	#mobile-menu-control-wrapper .slideout-toggle,
	#mobile-menu-control-wrapper .menu-bar-item.slideout-toggle,
	#mobile-header .slideout-toggle,
	#mobile-header .menu-bar-item.slideout-toggle {
		display: inline-flex !important;
		align-items: center;
	}

	#mobile-menu-control-wrapper,
	#site-navigation .menu-toggle,
	.is_stuck .menu-toggle,
	.navigation-stick .menu-toggle {
		display: none !important;
	}


	/* =========================
	   MÓVIL OVERLAY REAL
	   - transparente al cargar
	   - contenido visible por debajo
	   - sólido al hacer scroll o abrir menú
	========================= */
	
	/* móvil overlay solo home y pages y blog */
	body.home #mobile-header,
	body.home #mobile-menu-control-wrapper,
	body.page #mobile-header,
	body.page #mobile-menu-control-wrapper,
	body.blog #mobile-header,
	body.blog #mobile-menu-control-wrapper {
		position: absolute !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1002;
		background: transparent !important;
		border-bottom: 1px solid transparent !important;
		box-shadow: none !important;
	}

	/* El header general no debe estorbar visualmente en móvil */
	#masthead.site-header {
		background: transparent !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}


	/* móvil normal en single / archives / search / 404 */
	body.single #mobile-header,
	body.single #mobile-menu-control-wrapper,
	body.single-post #mobile-header,
	body.single-post #mobile-menu-control-wrapper,
	body.archive #mobile-header,
	body.archive #mobile-menu-control-wrapper,
	body.category #mobile-header,
	body.category #mobile-menu-control-wrapper,
	body.search #mobile-header,
	body.search #mobile-menu-control-wrapper,
	body.error404 #mobile-header,
	body.error404 #mobile-menu-control-wrapper {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		background: var(--esemtia-header-bg-sticky) !important;
		border-bottom: 1px solid var(--esemtia-header-border-sticky) !important;
		box-shadow: none !important;
	}

	/* Si la página ya ha hecho scroll -> barra móvil fija y clara */
	body.esemtia-header-scrolled #mobile-header,
	body.esemtia-header-scrolled #mobile-menu-control-wrapper {
		position: fixed !important;
		top: var(--adminbar-height);
		left: 0;
		right: 0;
		background: var(--esemtia-header-bg-sticky) !important;
		border-bottom: 1px solid var(--esemtia-header-border-sticky) !important;
		box-shadow: none !important;
	}

	/* Si el menú móvil está abierto -> barra móvil fija y clara */
	body.slide-opened #mobile-header,
	body.slide-opened #mobile-menu-control-wrapper,
	body.offside-js--is-open #mobile-header,
	body.offside-js--is-open #mobile-menu-control-wrapper,
	body.is-open #mobile-header,
	body.is-open #mobile-menu-control-wrapper {
		position: fixed !important;
		top: var(--adminbar-height);
		left: 0;
		right: 0;
		background: var(--esemtia-header-bg-sticky) !important;
		border-bottom: 1px solid var(--esemtia-header-border-sticky) !important;
		box-shadow: none !important;
	}

	/* =========================
	   TOGGLE MÓVIL GP
	========================= */

	.slideout-toggle {
		position: relative;
		width: 44px;
		height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		border: 0;
		background: transparent;
		cursor: pointer;
		color: #111633;
	}

	body.esemtia-hero-dark .slideout-toggle {
		color: #fff !important;
	}

	body.esemtia-header-scrolled .slideout-toggle,
	#sticky-navigation .slideout-toggle,
	#mobile-header .slideout-toggle {
		color: #111633 !important;
	}

	/* =========================
	   OFF-CANVAS MÓVIL GP
	========================= */

	#generate-slideout-menu.do-overlay,
	.slideout-navigation.do-overlay {
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		background: rgba(8, 15, 44, 0.18) !important;
		overflow: hidden !important;
		z-index: 99999 !important;
	}

	#generate-slideout-menu.do-overlay .inside-navigation,
	.slideout-navigation.do-overlay .inside-navigation {
		position: relative;
		width: var(--offcanvas-width-mobile) !important;
		max-width: var(--offcanvas-width-mobile) !important;
		min-height: 100dvh;
		height: 100dvh !important;
		margin: 0 !important;
		padding: 18px 22px 22px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		box-sizing: border-box;
		background: #f5f6fb;
		border-right: 1px solid rgba(10, 15, 44, 0.06);
		box-shadow: 0 16px 48px rgba(11, 20, 51, 0.16);
		overflow: hidden !important;
	}
	
	#generate-slideout-menu .inside-navigation {
		position: relative;
        min-height: 100dvh;
        height: 100dvh !important;
        margin: 0 !important;
		padding: 20px 22px 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box;
        background: #f5f6fb;
        border-right: 1px solid rgba(10, 15, 44, 0.06);
        box-shadow: 0 16px 48px rgba(11, 20, 51, 0.16);
        overflow: hidden !important;
	}
	#generate-slideout-menu .inside-navigation .main-nav {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 6px 4px 18px 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }		


	.slideout-navigation button.slideout-exit,
	.slideout-navigation .slideout-exit,
	.slideout-navigation .gp-close-button {
		position: sticky;
		top: 0;
		z-index: 5;
		margin: 0 0 12px auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: #0a0f2c !important;
		line-height: 1;
		flex: 0 0 auto;
	}

	.slideout-navigation .slideout-exit .gp-icon,
	.slideout-navigation .gp-close-button .gp-icon {
		font-size: 28px;
		line-height: 1;
	}

	#generate-slideout-menu.do-overlay .main-nav,
	.slideout-navigation.do-overlay .main-nav {
		width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
		margin: 0 !important;
		padding: 6px 4px 18px 0;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.slideout-navigation .main-nav > ul,
	.slideout-navigation .main-nav > div > ul {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.slideout-navigation.main-navigation .main-nav ul li a {
		display:block;
	}

	.slideout-navigation .main-nav > ul > li,
	.slideout-navigation .main-nav > div > ul > li,
	#generate-slideout-menu.do-overlay .slideout-menu > li {
		margin: 0 0 10px;
		text-align: left !important;
	}

	.slideout-navigation .main-nav > ul > li > a,
	.slideout-navigation .main-nav > div > ul > li > a,
	#generate-slideout-menu.do-overlay .slideout-menu > li > a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 18px;
		line-height: 1.25 !important;
		font-weight: 600;
		padding: 6px 0 !important;
		text-align: left;
		color: #0a0f2c !important;
		text-decoration: none;
	}

	.slideout-navigation .dropdown-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		color: #ff2d7a;
		padding-top: 2px;
	}

	.slideout-navigation .dropdown-menu-toggle .gp-icon {
		font-size: 17px;
	}

	.slideout-navigation .sub-menu,
	.slideout-navigation .children {
		display: none !important;
		position: static !important;
		box-shadow: none !important;
		background: transparent !important;
		width: 100% !important;
		padding-left: 0 !important;
		margin: 6px 0 0 !important;
		text-align: left;
	}

	.slideout-navigation .sfHover > .sub-menu,
	.slideout-navigation .sfHover > .children,
	.slideout-navigation .toggled-on > .sub-menu,
	.slideout-navigation .toggled-on > .children,
	.slideout-navigation .dropdown-open > .sub-menu,
	.slideout-navigation .dropdown-open > .children {
		display: block !important;
	}

	.slideout-navigation .sub-menu li,
	.slideout-navigation .children li,
	#generate-slideout-menu.do-overlay .slideout-menu li ul li {
		margin: 0 0 4px;
		text-align: left;
	}

	.slideout-navigation .sub-menu li a,
	.slideout-navigation .children li a,
	#generate-slideout-menu.do-overlay .slideout-menu li ul li > a {
		display: block;
		padding: 4px 20px !important;
		font-size: 15px;
		line-height: 1.4;
		color: #344054;
		text-decoration: none;
	}

	#generate-slideout-menu .offcanvas-cta,
	.slideout-navigation .offcanvas-cta {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		margin-top: auto !important;
		padding: 18px 0 0;
		border-top: 1px solid rgba(10, 15, 44, 0.08);
		gap: 12px;
		background: #f5f6fb;
		position: relative;
		z-index: 3;
	}

	.offcanvas-cta .esemtia-mobile-signin {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 15px;
		font-weight: 500;
		text-decoration: none;
		color: #667085;
	}

	.offcanvas-cta .esemtia-mobile-cta {
		width: 100%;
		min-height: 52px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 14px 20px;
		border-radius: 14px;
		border: 1px solid #0a0f2c;
		background: #0a0f2c;
		color: #fff !important;
		font-size: 17px;
		font-weight: 600;
		text-decoration: none;
		box-shadow: 0 8px 24px rgba(10, 15, 44, 0.12);
	}

	.offcanvas-cta a {
		text-decoration: none;
	}

	.offcanvas-cta .esemtia-mobile-signin:hover {
		opacity: .85;
	}

	.offcanvas-cta .esemtia-mobile-cta:hover {
		opacity: .96;
	}

	/* =========================================
	   OFFCANVAS BRANDING (GP element)
	========================================= */
	.esemtia-offcanvas-header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 44px; /* iguala la altura visual del botón cerrar */
		margin: 0 0 6px;
		padding: 0 52px 0 0; /* deja aire para la X */
		box-sizing: border-box;
		flex: 0 0 auto;
	}

	.esemtia-offcanvas-logo {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		line-height: 1;
		max-width: 100%;
		height: 44px; /* centra el logo dentro de la misma línea visual */
	}

	.esemtia-offcanvas-logo-image {
		display: block;
		width: auto;
		height: 30px;
		max-width: 155px;
		object-fit: contain;
	}

	.esemtia-offcanvas-logo--text {
		font-size: 28px;
		font-weight: 700;
		color: #111633;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		height: 44px;
	}
	.slideout-overlay button.slideout-exit {
		top:12px !important;
	}

}


/* =========================================================
   FIXES GP en MÓVIL: 
========================================================= */

@media (max-width: 1024px) {
	
	/* =========================================================
		neutralizar sticky-placeholder de GeneratePress
	   en páginas overlay, sobre todo en móvil
	========================================================= */
   
	/* Solo donde quieres overlay real */
	body.home #sticky-placeholder,
	body.page #sticky-placeholder,
	body.blog #sticky-placeholder {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	body.home #sticky-placeholder > .inside-navigation,
	body.page #sticky-placeholder > .inside-navigation,
	body.blog #sticky-placeholder > .inside-navigation {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
	}

	/* Corta cualquier resto visual/estructural del clon */
	body.home #sticky-placeholder .site-logo,
	body.home #sticky-placeholder .navigation-branding,
	body.home #sticky-placeholder .menu-toggle,
	body.home #sticky-placeholder .main-nav,
	body.home #sticky-placeholder .menu-bar-items,
	body.page #sticky-placeholder .site-logo,
	body.page #sticky-placeholder .navigation-branding,
	body.page #sticky-placeholder .menu-toggle,
	body.page #sticky-placeholder .main-nav,
	body.page #sticky-placeholder .menu-bar-items,
	body.blog #sticky-placeholder .site-logo,
	body.blog #sticky-placeholder .navigation-branding,
	body.blog #sticky-placeholder .menu-toggle,
	body.blog #sticky-placeholder .main-nav,
	body.blog #sticky-placeholder .menu-bar-items {
		display: none !important;
	}

	/* =========================================================
	   MÓVIL - PLANTILLAS NORMALES
	   Barra fija con hueco estable, sin saltos sticky
	========================================================= */
	
	/* 1) Barra móvil siempre fija en plantillas normales */
	body.single #mobile-header,
	body.single #mobile-menu-control-wrapper,
	body.single-post #mobile-header,
	body.single-post #mobile-menu-control-wrapper,
	body.archive #mobile-header,
	body.archive #mobile-menu-control-wrapper,
	body.category #mobile-header,
	body.category #mobile-menu-control-wrapper,
	body.search #mobile-header,
	body.search #mobile-menu-control-wrapper,
	body.error404 #mobile-header,
	body.error404 #mobile-menu-control-wrapper {
		position: fixed !important;
		top: var(--adminbar-height) !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 1002 !important;
		background: var(--esemtia-header-bg-sticky) !important;
		border-bottom: 1px solid var(--esemtia-header-border-sticky) !important;
		box-shadow: none !important;
	}

	/* 2) El contenido arranca siempre debajo de la barra */
	body.single #page,
	body.single-post #page,
	body.archive #page,
	body.category #page,
	body.search #page,
	body.error404 #page {
		padding-top: calc(var(--header-height-mobile) + var(--adminbar-height)) !important;
	}

	/* 3) El placeholder de GP no debe reservar hueco extra */
	body.single #sticky-placeholder,
	body.single-post #sticky-placeholder,
	body.archive #sticky-placeholder,
	body.category #sticky-placeholder,
	body.search #sticky-placeholder,
	body.error404 #sticky-placeholder {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	body.single #sticky-placeholder > .inside-navigation,
	body.single-post #sticky-placeholder > .inside-navigation,
	body.archive #sticky-placeholder > .inside-navigation,
	body.category #sticky-placeholder > .inside-navigation,
	body.search #sticky-placeholder > .inside-navigation,
	body.error404 #sticky-placeholder > .inside-navigation {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}
	
	/* REAPLICAR CAbecera BLOG (por si tambien tiene el class 'archive' */
	body.blog #masthead.site-header {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		background: transparent !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	body.blog .main-navigation,
	body.blog #site-navigation,
	body.blog #sticky-navigation,
	body.blog .navigation-stick {
		background: transparent !important;
		border-bottom: 1px solid transparent !important;
	}
}

/* =========================
   MENU "ACCEDE" (DESKTOP)
========================= */
.esemtia-access-menu {
	position: relative;
	display: none;
}

@media (min-width: 1025px) {
	.esemtia-access-menu {
		display: block;
	}

	.esemtia-access-menu__toggle {
		appearance: none;
		border: 0;
		background: transparent;
		padding: 0;
		margin: 0;
		font: inherit;
		line-height: 1;
		cursor: pointer;
		color: var(--esemtia-header-fg) !important;
		transition: color .2s ease, opacity .2s ease;
	}

	.esemtia-access-menu__toggle:hover,
	.esemtia-access-menu.is-open .esemtia-access-menu__toggle {
		color: var(--color-princ-2) !important;
	}

	.esemtia-access-menu__panel {
		position: absolute;
		width: max-content;
		min-width: 220px;
		max-width: 320px;

		background: #eef1fb;
		border: 1px solid rgba(17, 22, 51, 0.06);
		border-radius: 22px;
		padding: 22px 24px;
		box-shadow: 0 16px 34px rgba(17, 22, 51, 0.07);
		backdrop-filter: blur(4px);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		left: 50%;
		right: auto;
		top: calc(100% + 20px);
		transform: translateX(-50%) translateY(6px) scale(.985);
		transform-origin: top center;
		transition:
			opacity .22s ease,
			transform .22s ease,
			visibility 0s linear .22s;
		z-index: 1100;
	}


	.esemtia-access-menu.is-open .esemtia-access-menu__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0) scale(1);
		transition:
			opacity .22s ease,
			transform .22s ease,
			visibility 0s linear 0s;
	}

	.esemtia-access-menu__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		row-gap: 14px;
	}

	.esemtia-access-menu__list li {
		margin: 0;
		padding: 0;
	}

	.esemtia-access-menu__list a {
		display: block;
		text-decoration: none;
		color: var(--esemtia-panel-fg);
		font-size: 16px;
		line-height: 1.35;
		transition: color .18s ease, opacity .18s ease;
		white-space: nowrap;
	}

	.esemtia-access-menu__list a:hover {
		color: var(--color-princ-2) !important;
	}

	/* evito herencia estilos */
	.esemtia-access-menu__toggle {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		background: none !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0;
		font: inherit;
		line-height: 1;
		cursor: pointer;
		color: var(--esemtia-header-fg) !important;
		box-shadow: none !important;
	}

	.esemtia-access-menu__toggle:hover,
	.esemtia-access-menu.is-open .esemtia-access-menu__toggle {
		color: var(--color-princ-2) !important;
	}
}