/*
 * Header animado:
 *  - Fijo arriba; al bajar se achica, queda translúcido (efecto vidrio) y con sombra.
 *  - Barra de progreso de lectura con el degradado de la marca.
 *  - Entrada animada la primera vez que se abre el sitio en la sesión.
 *  - Subrayado animado en el menú y brillo en el botón.
 *  - Menú móvil con el degradado de la marca y opciones en cascada.
 */

/* ---------- Fijo arriba ---------- */
#masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
	/* Mantiene el header por encima de las tarjetas mientras se animan los filtros */
	view-transition-name: fz-header;
}

/* En celular la barra de administración de WordPress no queda fija */
@media (max-width: 600px) {
	#masthead {
		top: 0;
	}
}

#masthead {
	transition: background-color 0.35s, box-shadow 0.35s;
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
	transition: background-color 0.35s;
}

#masthead .site-main-header-inner-wrap {
	transition: min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#masthead .site-branding a.brand img {
	transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Al bajar: más compacto y translúcido.
   El vidrio va en #masthead y no en la fila interna: view-transition-name convierte
   a #masthead en "backdrop root" y un backdrop-filter interno ya no vería la página. */
.fz-header-compacto #masthead {
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 6px 24px rgba(16, 34, 46, 0.08);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
}

.fz-header-compacto #masthead .site-main-header-wrap .site-header-row-container-inner {
	background: transparent;
}

.fz-header-compacto #masthead .site-main-header-inner-wrap {
	min-height: 64px;
}

.fz-header-compacto #masthead .site-branding a.brand img {
	max-width: 150px;
}

/* ---------- Barra de progreso de lectura ---------- */
#masthead::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	transform: scaleX(var(--fz-progreso, 0));
	transform-origin: left;
	background: linear-gradient(90deg, #0167b0, #047b83, #3fa974, #bee45d);
	content: "";
	pointer-events: none;
}

/* ---------- Menú: subrayado animado ---------- */
#masthead .header-navigation .header-menu-container > ul > li > a {
	position: relative;
}

#masthead .header-navigation .header-menu-container > ul > li > a::after {
	position: absolute;
	right: 0;
	bottom: 0.35em;
	left: 0;
	height: 2px;
	transform: scaleX(0);
	transform-origin: right;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--global-palette1, #0167b0), var(--global-palette10, #3fa974));
	content: "";
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#masthead .header-navigation .header-menu-container > ul > li > a:hover::after,
#masthead .header-navigation .header-menu-container > ul > li > a:focus-visible::after,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a::after,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ---------- Botón: degradado con brillo al pasar el mouse ---------- */
#masthead .header-button,
#mobile-drawer .mobile-header-button-wrap .button {
	position: relative;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, #0167b0, #047b83 60%, #3fa974);
	background-size: 160% 100%;
	color: #fff;
	font-weight: 600;
	transition: background-position 0.4s, transform 0.25s, box-shadow 0.25s;
}

#masthead .header-button::before,
#mobile-drawer .mobile-header-button-wrap .button::before {
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	transform: skewX(-20deg);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
	content: "";
}

#masthead .header-button::after {
	display: inline-block;
	margin-left: 0.45em;
	content: "→";
	transition: transform 0.25s;
}

#masthead .header-button:hover,
#masthead .header-button:focus-visible {
	background-position: 100% 0;
	box-shadow: 0 10px 24px rgba(1, 103, 176, 0.35);
	color: #fff;
	transform: translateY(-2px);
}

#masthead .header-button:hover::before {
	left: 130%;
	transition: left 0.7s ease;
}

#masthead .header-button:hover::after {
	transform: translateX(4px);
}

/* ---------- Entrada animada (primera visita de la sesión) ---------- */
.fz-anim-js.fz-header-intro #masthead .site-branding {
	animation: fz-header-izq 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li {
	animation: fz-header-baja 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li:nth-child(1) { animation-delay: 0.15s; }
.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li:nth-child(2) { animation-delay: 0.23s; }
.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li:nth-child(3) { animation-delay: 0.31s; }
.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li:nth-child(4) { animation-delay: 0.39s; }
.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li:nth-child(5) { animation-delay: 0.47s; }
.fz-anim-js.fz-header-intro #masthead .header-navigation .header-menu-container > ul > li:nth-child(n+6) { animation-delay: 0.55s; }

.fz-anim-js.fz-header-intro #masthead .header-button-wrap {
	animation: fz-header-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
}

.fz-anim-js.fz-header-intro #masthead .site-header-main-section-right .menu-toggle-open,
.fz-anim-js.fz-header-intro #mobile-header .site-branding {
	animation: fz-header-baja 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes fz-header-izq {
	from { opacity: 0; transform: translateX(-24px); }
}

@keyframes fz-header-baja {
	from { opacity: 0; transform: translateY(-14px); }
}

@keyframes fz-header-pop {
	from { opacity: 0; transform: scale(0.7); }
}

/* ---------- Menú móvil ---------- */
#mobile-drawer .drawer-inner {
	background:
		radial-gradient(circle at 100% 0%, rgba(190, 228, 93, 0.35), transparent 45%),
		linear-gradient(160deg, #02557f 0%, #036e82 55%, #2f8f63 100%);
}

#mobile-drawer .drawer-header .drawer-toggle {
	color: #fff;
}

#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
	border-bottom-color: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
}

#mobile-drawer .mobile-navigation ul li.current-menu-item > a {
	color: #bee45d;
}

#mobile-drawer .mobile-navigation .menu > li,
#mobile-drawer .mobile-header-button-wrap {
	opacity: 0;
	transform: translateX(28px);
	transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#mobile-drawer.active .mobile-navigation .menu > li,
#mobile-drawer.active .mobile-header-button-wrap {
	opacity: 1;
	transform: none;
}

#mobile-drawer.active .mobile-navigation .menu > li:nth-child(1) { transition-delay: 0.12s; }
#mobile-drawer.active .mobile-navigation .menu > li:nth-child(2) { transition-delay: 0.18s; }
#mobile-drawer.active .mobile-navigation .menu > li:nth-child(3) { transition-delay: 0.24s; }
#mobile-drawer.active .mobile-navigation .menu > li:nth-child(4) { transition-delay: 0.3s; }
#mobile-drawer.active .mobile-navigation .menu > li:nth-child(n+5) { transition-delay: 0.36s; }
#mobile-drawer.active .mobile-header-button-wrap { transition-delay: 0.42s; }

#mobile-drawer .mobile-header-button-wrap {
	width: 100%;
	margin-top: 1.5rem;
}

#mobile-drawer .mobile-header-button-inner-wrap {
	display: block;
	width: 100%;
}

#mobile-drawer .mobile-header-button-wrap .button {
	display: block;
	width: 100%;
	padding: 0.9em 1.5em;
	background: #fff;
	color: var(--global-palette2, #02557f);
	text-align: center;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	#masthead *,
	#masthead::after,
	#mobile-drawer * {
		animation: none !important;
		transition: none !important;
	}

	#mobile-drawer .mobile-navigation .menu > li,
	#mobile-drawer .mobile-header-button-wrap {
		opacity: 1;
		transform: none;
	}
}