/* =================================================================
   Miau Navbar
   ================================================================= */
.miau-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 12px 20px;
	transition: padding 0.4s ease;
}
.miau-navbar.is-scrolled {
	padding: 6px 20px;
}
/* Layout: Boxed */
.miau-navbar--boxed {
	max-width: var(--navbar-max-width, 1200px);
	left: 50%;
	transform: translateX(-50%);
}
/* Spacer */
.miau-navbar-spacer {
	display: block;
}
/* Bar */
.miau-navbar__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.30);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 10px 16px;
	overflow: visible; /* IMPORTANTE: permite que el logo desborde */
}
/* Sections */
.miau-navbar__section {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}
.miau-navbar__section--left {
	justify-content: flex-start;
}
.miau-navbar__section--right {
	justify-content: flex-end;
}
/* Home button */
.miau-navbar__home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #E7002A;
	color: #FFF;
	font-family: "Outfit", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -0.32px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.3s ease;
	flex-shrink: 0;
}
.miau-navbar__home-btn:hover {
	background: #c50024;
	color: #FFF;
}
/* Menus */
.miau-navbar__menu-list {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.miau-navbar__menu-list li {
	position: relative;
}
.miau-navbar__menu a {
	color: #FFF;
	text-align: center;
	font-family: "Outfit", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -0.32px;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 14px;
	transition: opacity 0.3s ease;
}
.miau-navbar__menu a:hover {
	opacity: 0.75;
	color: #FFF;
}
/* Indicador de submenú (chevron) en el item padre */
.miau-navbar__menu-list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
	vertical-align: middle;
}
.miau-navbar__menu-list .menu-item-has-children:hover > a::after {
	transform: translateY(1px) rotate(225deg);
}
/* Submenu */
.miau-navbar__menu-list .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 14px;
	padding: 10px 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	z-index: 10;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}
/* Pequeño triángulo decorativo apuntando al item padre */
.miau-navbar__menu-list .sub-menu::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 2px;
}
/* Puente invisible para que el hover no se pierda al cruzar el gap */
.miau-navbar__menu-list .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}
.miau-navbar__menu-list li:hover > .sub-menu,
.miau-navbar__menu-list li:focus-within > .sub-menu {
	display: block;
}
.miau-navbar__menu-list .sub-menu li {
	width: 100%;
}
.miau-navbar__menu-list .sub-menu a {
	display: block;
	padding: 10px 22px;
	font-family: "Outfit", sans-serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.32px;
	color: #FFFFFF;
	text-align: left;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.miau-navbar__menu-list .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.10);
	color: #FFFFFF;
	opacity: 1;
}
/* =================================================================
   Logo — Efecto slide-up / slide-down
   ================================================================= */
.miau-navbar__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	overflow: visible;
	transition: width 0.4s ease-in-out, height 0.4s ease-in-out, top 0.4s ease-in-out;
	pointer-events: none;
}
/* Logo grande */
.miau-navbar__logo-full {
	position: absolute;
	top: var(--logo-top-offset, 50px);
	width: var(--logo-full-img-size, 120px);
	height: auto;
	object-fit: contain;
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}
/* Logo pequeño */
.miau-navbar__logo-small {
	position: absolute;
	top: var(--logo-top-offset, 50px);
	width: var(--logo-small-img-size, 100px);
	height: auto;
	object-fit: contain;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease-in-out 0.15s, transform 0.4s ease-in-out, top 0.4s ease-in-out;
}
/* =================================================================
   Animación fade-down al cargar
   ================================================================= */
@keyframes miauFadeDown {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-40px);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}
.miau-navbar__logo.miau-fade-down {
	animation: miauFadeDown 2s ease-out forwards;
}
.miau-navbar.is-scrolled .miau-navbar__logo.miau-fade-down {
	animation: none;
}

#miau-navbar-f88c307.is-scrolled .miau-navbar__logo-small
{
	transform: translateY(-50%)!important;
}
/* Desplazar el navbar fijo cuando la barra de admin está activa */
body.admin-bar .miau-navbar {
	top: 32px;
}
/* Responsive: en móviles/tablets la barra de WP mide 46px */
@media screen and (max-width: 782px) {
	body.admin-bar .miau-navbar {
		top: 46px;
	}
}

/* =================================================================
   Hamburger + menú móvil: ocultos por defecto
   ================================================================= */
.miau-navbar__hamburger,
.miau-navbar__mobile-menu {
	display: none;
}

/* =================================================================
   Hamburger (base — posición y aspecto, independiente del breakpoint)
   ================================================================= */
.miau-navbar__hamburger {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	box-sizing: border-box;
	flex-shrink: 0;
}
.miau-navbar__hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.miau-navbar__hamburger.is-open span {
	background: #fff;
}
.miau-navbar__hamburger.is-open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.miau-navbar__hamburger.is-open span:nth-child(2) {
	opacity: 0;
}
.miau-navbar__hamburger.is-open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* =================================================================
   Mobile + tablet (≤1024px)
   El menú horizontal de escritorio no cabe por debajo de ~1100px: los items se
   solapan con el logo central (iPad mini = 768px). Por eso el hamburger cubre
   todo el rango táctil. El JS del widget usa el mismo corte (MOBILE_BP = 1024).
   ================================================================= */
@media (max-width: 1024px) {
	/* La barra ocupa siempre el ancho completo: si solo se ensanchara al hacer
	   scroll daba un salto raro. Lo único que cambia es el `top`: arriba del todo,
	   con el logo completo desplegado, queda separada 22px del borde; al aparecer el
	   logo compacto —por scroll o al abrir el menú— se pega al borde superior. */
	.miau-navbar,
	.miau-navbar.miau-navbar--boxed {
		top: 22px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		padding: 0;
		transform: none;
		transition: top 0.35s ease;
	}
	.miau-navbar.is-scrolled,
	.miau-navbar.miau-navbar--boxed.is-scrolled,
	body.miau-menu-open .miau-navbar,
	body.miau-navbar-open .miau-navbar,
	body.miau-menu-open .miau-navbar.miau-navbar--boxed {
		top: 0;
	}
	body.admin-bar .miau-navbar {
		top: 68px;
	}
	body.admin-bar .miau-navbar.is-scrolled,
	body.admin-bar.miau-menu-open .miau-navbar {
		top: 46px;
	}
	/* Barra: 50px en tablet, 60px en móvil (ver abajo). Con el logo completo
	   desplegada y separada del borde, va redondeada por las cuatro esquinas; al
	   pegarse arriba —por scroll o al abrir el menú— pierde el radius del todo. */
	.miau-navbar__bar {
		min-height: 50px;
		width: 100%;
		position: relative;
		border-radius: 12px;
		transition: border-radius 0.35s ease;
	}
	.miau-navbar.is-scrolled .miau-navbar__bar,
	body.miau-menu-open .miau-navbar__bar {
		border-radius: 0;
	}
	/* Ocultar secciones de menú desktop */
	.miau-navbar__section {
		display: none !important;
	}
	/* Mostrar hamburger */
	.miau-navbar__hamburger {
		display: flex !important;
	}
	/* Menú desplegable móvil — mismo glass que el dropdown desktop.
	   Se despliega con una animación: el panel cae desde debajo de la barra y los
	   items entran escalonados. Como `display` no es animable, el panel siempre está
	   en el DOM y se oculta con opacidad + visibilidad; va en `absolute` para que el
	   navbar no crezca y no intercepte clics con el menú cerrado. */
	.miau-navbar__mobile-menu {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		margin-top: 8px;
		padding: 16px;
		border-radius: 14px;
		background: rgba(0, 0, 0, 0.85);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
		transform-origin: top center;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-14px) scaleY(0.96);
		transition: opacity 0.22s ease,
		            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		            visibility 0s linear 0.34s;
	}
	.miau-navbar__mobile-menu.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: opacity 0.2s ease,
		            transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		            visibility 0s;
	}
	/* Items escalonados: entran uno detrás de otro al abrir, y salen a la vez. */
	.miau-navbar__mobile-menu .miau-navbar__home-btn,
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.miau-navbar__mobile-menu.is-open .miau-navbar__home-btn,
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li {
		opacity: 1;
		transform: none;
	}
	.miau-navbar__mobile-menu.is-open .miau-navbar__home-btn { transition-delay: 0.06s; }
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li:nth-child(1) { transition-delay: 0.10s; }
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li:nth-child(2) { transition-delay: 0.14s; }
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li:nth-child(3) { transition-delay: 0.18s; }
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li:nth-child(4) { transition-delay: 0.22s; }
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li:nth-child(5) { transition-delay: 0.26s; }
	.miau-navbar__mobile-menu.is-open .miau-navbar__menu-list > li:nth-child(6) { transition-delay: 0.30s; }
	@media (prefers-reduced-motion: reduce) {
		.miau-navbar__mobile-menu,
		.miau-navbar__mobile-menu .miau-navbar__home-btn,
		.miau-navbar__mobile-menu .miau-navbar__menu-list > li {
			transition: none;
			transform: none;
		}
	}
	/* Anular hover de desktop en móvil (causaba sticky tap) */
	.miau-navbar__mobile-menu .menu-item-has-children:hover > .sub-menu {
		display: none;
	}
	.miau-navbar__mobile-menu .menu-item-has-children.is-open:hover > .sub-menu,
	.miau-navbar__mobile-menu .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	/* "Inicio": píldora roja, pero ajustada al texto en vez de un bloque a ancho
	   completo. Arranca en el mismo margen izquierdo que el resto de items (los 10px
	   de padding del enlace) y comparte con ellos tipografía y separador. */
	.miau-navbar__mobile-menu .miau-navbar__home-btn {
		display: inline-flex;
		align-items: center;
		width: auto;
		align-self: flex-start;
		margin: 0 0 8px 10px;
		padding: 9px 26px;
		background: #E7002A;
		border: 0;
		border-radius: 999px;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.32px;
		text-align: center;
		transition: background-color 0.25s ease;
	}
	.miau-navbar__mobile-menu .miau-navbar__home-btn:hover,
	.miau-navbar__mobile-menu .miau-navbar__home-btn:focus {
		background: #C40024;
		color: #fff;
	}
	.miau-navbar__mobile-menu .miau-navbar__menu-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}
	.miau-navbar__mobile-menu .miau-navbar__menu-list li {
		width: 100%;
	}
	.miau-navbar__mobile-menu .miau-navbar__menu a {
		display: block;
		padding: 12px 0;
		font-size: 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.miau-navbar__mobile-menu .miau-navbar__menu-list li:last-child > a {
		border-bottom: none;
	}
	.miau-navbar__mobile-menu .menu-item-has-children {
		position: relative;
	}
	/* En móvil el chevron lo pinta el botón; ocultar el ::after del enlace (desktop) */
	.miau-navbar__mobile-menu .menu-item-has-children > a::after {
		display: none !important;
	}
	.miau-navbar__mobile-menu .menu-item-has-children > a {
		padding-left: 24px;
		padding-right: 56px; /* hueco para el botón chevron */
	}
	/* Botón de despliegue del submenú (superpuesto a la derecha del enlace).
	   El enlace queda totalmente clicable y navega; este botón solo despliega. */
	.miau-navbar__mobile-menu .miau-submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 48px;
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		z-index: 3;
	}
	.miau-navbar__mobile-menu .miau-submenu-toggle::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-65%) rotate(45deg);
		transition: transform 0.25s ease;
		color: #fff;
	}
	.miau-navbar__mobile-menu .menu-item-has-children.is-open > .miau-submenu-toggle::after {
		transform: translateY(-30%) rotate(225deg);
	}
	/* Submenú: oculto por defecto, se despliega al tap */
	.miau-navbar__mobile-menu .sub-menu {
		position: static;
		left: auto;
		transform: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-radius: 0;
		padding: 0 0 0 16px;
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		display: none;
		overflow: hidden;
	}
	.miau-navbar__mobile-menu .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}
	.miau-navbar__mobile-menu .sub-menu::before {
		display: none;
	}
	.miau-navbar__mobile-menu .sub-menu a {
		font-size: 15px;
		padding: 10px 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		text-align: left;
		white-space: normal;
	}
	.miau-navbar__mobile-menu .sub-menu a:hover {
		background: transparent;
	}
	.miau-navbar__mobile-menu .sub-menu li:last-child > a {
		border-bottom: none;
	}
}

/* Alturas de barra por resolución. Van al final del fichero para ganar al
   `min-height` del bloque ≤1024, que tiene la misma especificidad. */
@media (max-width: 767px) {
	.miau-navbar__bar {
		min-height: 60px;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.miau-navbar__bar {
		min-height: 75px;
	}
}


/* =================================================================
   Página actual + hover: línea roja bajo el item
   ================================================================= */

/* Escritorio: la línea crece de izquierda a derecha al entrar el ratón y se
   retira hacia la derecha al salir. En la página actual queda fija. */
@media (min-width: 1025px) {
	.miau-navbar__menu-list > li > a {
		position: relative;
	}
	.miau-navbar__menu-list > li > a::before {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 2px;
		height: 2px;
		border-radius: 2px;
		background: #E7002A;
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.miau-navbar__menu-list > li > a:hover::before,
	.miau-navbar__menu-list > li:focus-within > a::before,
	.miau-navbar__menu-list > li.current-menu-item > a::before,
	.miau-navbar__menu-list > li.current-menu-ancestor > a::before,
	.miau-navbar__menu-list > li.current-menu-parent > a::before,
	.miau-navbar__menu-list > li.current_page_item > a::before,
	.miau-navbar__menu-list > li.current_page_ancestor > a::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
	/* El item de la página actual no se atenúa con el hover global. */
	.miau-navbar__menu-list > li.current-menu-item > a,
	.miau-navbar__menu-list > li.current-menu-ancestor > a {
		opacity: 1;
	}
}

/* Móvil y tablet: sin hover, solo se marca la página actual con una barra roja
   a la izquierda del item. No cambia alturas ni márgenes del panel. */
@media (max-width: 1024px) {
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li > a {
		position: relative;
	}
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li.current-menu-item > a::before,
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li.current-menu-ancestor > a::before,
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li.current-menu-parent > a::before,
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li.current_page_item > a::before,
	.miau-navbar__mobile-menu .miau-navbar__menu-list > li.current_page_ancestor > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 22px;
		border-radius: 3px;
		background: #E7002A;
	}
}