.mi-safe-area-top {
	display: none;
}

@supports (height: env(safe-area-inset-top)) {
	.mi-safe-area-top {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: env(safe-area-inset-top);
		background: #153846;
		pointer-events: none;
		z-index: 99998;
	}
}

.mi-site-header {
	font-family: var(--mi-font-sans);
	position: sticky;
	top: 0;
	z-index: 10000;
	background: rgba(21, 56, 70, .97);
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.09);
	box-shadow: 0 10px 30px rgba(10, 35, 45, .16);
	backdrop-filter: blur(16px) saturate(135%);
	-webkit-backdrop-filter: blur(16px) saturate(135%);
	transition: transform .22s ease, box-shadow .18s ease, background-color .18s ease;
	will-change: transform;
}
.mi-site-header.is-hidden { transform: translate3d(0, calc(-100% - 6px), 0); }
.admin-bar .mi-site-header { top: 32px; }

/* iPhone/iPad con notch o Dynamic Island: el fondo del header ocupa
   también el área segura superior sin acercar el contenido a los sensores. */
@supports (padding-top: env(safe-area-inset-top)) {
	body:not(.admin-bar) .mi-site-header {
		padding-top: env(safe-area-inset-top);
	}
}

.mi-site-header__inner {
	max-width: var(--mi-wide);
	min-height: 72px;
	margin: 0 auto;
	padding: 9px clamp(14px, 2.1vw, 30px);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
}
.mi-brand { min-width: 46px; }
.mi-brand .custom-logo-link { display: inline-flex; align-items: center; }
.mi-brand img {
	display: block;
	width: auto;
	max-width: 62px;
	max-height: 50px;
	object-fit: contain;
	border-radius: 10px;
}
.mi-brand__text {
	color: #fff;
	font-size: 1.03rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}
.mi-brand__text:hover,
.mi-brand__text:focus-visible { color: #fff; }

.mi-nav { min-width: 0; }
.mi-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(2px, .55vw, 10px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mi-nav__list li { position: relative; margin: 0; }
.mi-nav__list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: rgba(255,255,255,.92);
	font-size: clamp(.72rem, .75vw, .86rem);
	font-weight: 700;
	letter-spacing: .035em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.mi-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 0;
	height: 2px;
	border-radius: 999px;
	background: #dc8c46;
	transform: translateX(-50%);
	transition: width .18s ease;
}
.mi-nav__list > li > a:hover,
.mi-nav__list > li > a:focus-visible {
	background: rgba(255,255,255,.09);
	color: #fff;
	transform: translateY(-1px);
}
.mi-nav__list > li > a:hover::after,
.mi-nav__list > li > a:focus-visible::after { width: 54%; }

.mi-nav__list > .current-menu-item > a,
.mi-nav__list > .current_page_item > a {
	background: rgba(152,202,167,.15);
	border-color: rgba(152,202,167,.23);
	color: #fff;
}
.mi-nav__list > .current-menu-item > a::after,
.mi-nav__list > .current_page_item > a::after { width: 54%; }

.mi-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: rgba(21,56,70,.985);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
	box-shadow: 0 18px 38px rgba(5,25,34,.25);
	transform: translateX(-50%);
}
.mi-nav__list li:hover > .sub-menu,
.mi-nav__list li:focus-within > .sub-menu { display: block; }
.mi-nav__list .sub-menu a {
	display: block;
	padding: 9px 11px;
	border-radius: 9px;
	color: rgba(255,255,255,.88);
	font-size: .84rem;
	font-weight: 650;
	text-decoration: none;
}
.mi-nav__list .sub-menu a:hover,
.mi-nav__list .sub-menu a:focus-visible {
	background: rgba(255,255,255,.08);
	color: #fff;
}

.mi-site-header__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.mi-account-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 11px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 12px;
	background: rgba(255,255,255,.07);
	color: #fff;
	font-size: .8rem;
	font-weight: 750;
	text-decoration: none;
}
.mi-account-link:hover,
.mi-account-link:focus-visible {
	background: rgba(255,255,255,.12);
	color: #fff;
}
.mi-account-link__icon {
	display: inline-flex;
	width: 17px;
	height: 17px;
}
.mi-account-link svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mi-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 12px;
	background: rgba(255,255,255,.07);
	color: #fff;
	cursor: pointer;
}
.mi-nav-toggle:hover,
.mi-nav-toggle:focus-visible { background: rgba(255,255,255,.12); }
.mi-nav-toggle__bars {
	width: 20px;
	display: inline-grid;
	gap: 4px;
}
.mi-nav-toggle__bars span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 99px;
	background: currentColor;
}

/* 1.2.2 · La navegación principal usa siempre la tipografía MI.
   Algunos estilos heredados asignan fuente directamente a los enlaces,
   por lo que no basta con confiar en la herencia del body. */
@media (min-width: 981px) {
	.mi-site-header .mi-nav__list > li > a,
	.mi-site-header .mi-nav__list .sub-menu a {
		font-family: var(--mi-font-sans) !important;
	}
}

@media (max-width: 1180px) {
	.mi-site-header__inner { grid-template-columns: auto 1fr auto; }
	.mi-nav__list { gap: 1px; }
	.mi-nav__list > li > a { padding-inline: 6px; font-size: .72rem; }
}
@media (max-width: 980px) {
	.admin-bar .mi-site-header { top: 46px; }
	.mi-site-header.is-hidden { transform: none; }
	.mi-site-header__inner {
		min-height: 66px;
		grid-template-columns: auto 1fr auto;
	}
	.mi-nav-toggle { display: inline-grid; place-items: center; }
	.mi-account-link { margin-left: auto; }
	.mi-account-link span:last-child { display: none; }
	.mi-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 12px;
		right: 12px;
		max-height: min(72vh, 620px);
		overflow: auto;
		padding: 12px;
		background: rgba(21,56,70,.99);
		border: 1px solid rgba(255,255,255,.12);
		border-radius: 0 0 18px 18px;
		box-shadow: 0 18px 35px rgba(5,25,34,.24);
	}
	.mi-nav.is-open { display: block; }
	.mi-nav__list {
		align-items: stretch;
		flex-direction: column;
		gap: 3px;
	}
	.mi-nav__list > li > a {
		width: 100%;
		min-height: 44px;
		justify-content: flex-start;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: .82rem;
	}
	.mi-nav__list > li > a::after { display: none; }
	.mi-nav__list .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		margin: 2px 0 4px 12px;
		padding: 0 0 0 10px;
		border: 0;
		border-left: 2px solid rgba(152,202,167,.28);
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}
}
@media (max-width: 600px) {
	/* En WordPress la admin bar deja de ser fija en móvil.
	   El header debe pegarse al borde superior cuando la barra sale del viewport. */
	.admin-bar .mi-site-header { top: 0; }
}

@media (max-width: 480px) {
	.mi-site-header__inner { padding-inline: 10px; }
	.mi-brand img { max-width: 54px; max-height: 46px; }
	.mi-account-link { width: 42px; padding: 0; justify-content: center; }
}

/* En móvil la barra de administración de WordPress estorba más de lo que ayuda:
   incluso para administradores se oculta en el frontal. La gestión sigue
   disponible desde /wp-admin/ y en escritorio se conserva la toolbar. */
@media (max-width: 782px) {
	:root {
		--mi-mobile-header-height: 66px;
		--mi-mobile-safe-top: env(safe-area-inset-top, 0px);
	}

	html {
		margin-top: 0 !important;
		background: #153846;
		scroll-padding-top: calc(var(--mi-mobile-header-height) + var(--mi-mobile-safe-top) + 12px);
	}

	body,
	body.admin-bar {
		margin-top: 0 !important;
		padding-top: calc(var(--mi-mobile-header-height) + var(--mi-mobile-safe-top));
	}

	#wpadminbar {
		display: none !important;
	}

	/* En móvil el header pasa a fixed. Safari puede dejar de respetar sticky
	   cuando cambia la chrome del navegador o cuando una vista interna crea
	   un nuevo contexto de scroll (por ejemplo Mi cuenta). Fixed evita que
	   el header viaje con el contenido y deja un comportamiento único. */
	.mi-site-header,
	.admin-bar .mi-site-header {
		position: fixed;
		top: 0 !important;
		inset-inline: 0;
		width: auto;
		max-width: 100%;
		transform: none !important;
	}

	@supports (padding-top: env(safe-area-inset-top)) {
		.mi-site-header,
		body.admin-bar .mi-site-header,
		body:not(.admin-bar) .mi-site-header {
			padding-top: env(safe-area-inset-top);
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.mi-site-header,
	.mi-site-header * { transition: none !important; }
}


@media (max-width: 782px) {
	.mi-site-header__inner {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.mi-brand,
	.mi-site-header__tools,
	.mi-nav-toggle,
	.mi-account-link {
		min-width: 0;
	}

	.mi-nav {
		max-width: calc(100% - 24px);
	}
}