/* ==========================================================================
   Header — barra de navegación flotante con efecto glass
   Mismo lenguaje que la portada (home.css): Geist, azul noche, papel, azul de marca.
   - Fija arriba, se oculta al bajar y reaparece al subir (header.js).
   - Arriba del todo: vidrio azul noche sobre el hero.
   - Con scroll (.is-scrolled): vidrio claro color papel, texto tinta.
   Mobile-first. Breakpoint de escritorio de Astra: 922px.
   ========================================================================== */

:root {
	--nav-max: 1240px;
	--nav-h: 60px;
	--nav-gap-top: 12px;
	--nav-radius: 999px;
	--nav-blur: blur(22px) saturate(170%);
	--nav-ease: cubic-bezier(.16, 1, .3, 1);
	--nav-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	--nav-accent: var(--ast-global-color-0, #0056ef);
	--nav-accent-hover: #0047c7;
	--nav-ink: #0b1020;

	/* Estado inicial, sobre el hero */
	--nav-bg-top: rgba(10, 18, 48, .38);
	--nav-border-top: rgba(255, 255, 255, .14);
	--nav-fg-top: #ffffff;

	/* Estado con scroll: papel de la portada (#eef1f6) */
	--nav-bg-solid: rgba(238, 241, 246, .74);
	--nav-border-solid: rgba(255, 255, 255, .85);
	--nav-fg-solid: var(--nav-ink);

	--nav-shadow: 0 16px 40px -20px rgba(10, 18, 48, .35);

	--nav-offset: 0px; /* barra de admin de WordPress */
}

body.admin-bar { --nav-offset: 46px; }

@media (min-width: 783px) {
	body.admin-bar { --nav-offset: 32px; }
}

html { scroll-padding-top: calc(var(--nav-h) + var(--nav-gap-top) + 16px); }

/* Contenedor fijo (reemplaza el position:absolute del header transparente) */
body #masthead.site-header {
	--nav-bg: var(--nav-bg-top);
	--nav-border: var(--nav-border-top);
	--nav-fg: var(--nav-fg-top);

	position: fixed;
	top: var(--nav-offset);
	left: 0;
	right: 0;
	z-index: 999;
	margin: 0;
	padding: var(--nav-gap-top) 16px 0;
	background: none;
	border: 0;
	font-family: var(--nav-font);
	pointer-events: none; /* solo la píldora recibe clics */
	transition: transform .6s var(--nav-ease);
	will-change: transform;
}

body #masthead.is-hidden { transform: translateY(calc(-100% - var(--nav-offset) - 8px)); }

/* Nunca esconderla si se navega con teclado o el menú móvil está abierto */
body #masthead:focus-within,
body.ast-main-header-nav-open #masthead { transform: none; }

/* Estado claro: con scroll, con menú móvil abierto o en páginas sin hero transparente */
body #masthead.is-scrolled,
body.ast-main-header-nav-open #masthead,
body:not(.ast-theme-transparent-header) #masthead {
	--nav-bg: var(--nav-bg-solid);
	--nav-border: var(--nav-border-solid);
	--nav-fg: var(--nav-fg-solid);
}

/* Páginas sin header transparente: reservar el espacio de la barra fija */
body:not(.ast-theme-transparent-header) #page {
	padding-top: calc(var(--nav-h) + var(--nav-gap-top) * 2);
}

/* ---- La píldora de vidrio ---- */
#masthead .main-header-bar-wrap,
#masthead .ast-mobile-header-content { pointer-events: auto; }

#masthead .main-header-bar {
	max-width: var(--nav-max);
	margin-inline: auto;
	background: var(--nav-bg);
	-webkit-backdrop-filter: var(--nav-blur);
	backdrop-filter: var(--nav-blur);
	border: 1px solid var(--nav-border);
	border-radius: var(--nav-radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	transition:
		background-color .5s ease,
		border-color .5s ease,
		box-shadow .5s ease;
}

#masthead.is-scrolled .main-header-bar,
body.ast-main-header-nav-open #masthead .main-header-bar,
body:not(.ast-theme-transparent-header) #masthead .main-header-bar {
	box-shadow: var(--nav-shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root {
		--nav-bg-top: rgba(10, 18, 48, .85);
		--nav-bg-solid: rgba(238, 241, 246, .97);
	}
}

#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap { min-height: var(--nav-h); }

/* Móvil y tablet: marca centrada dentro de la píldora, menú a la derecha.
   (Astra anula el padding de .main-header-bar, por eso va en la fila) */
#masthead #ast-mobile-header .ast-builder-grid-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--nav-h);
	padding: 0 8px;
}
#masthead #ast-mobile-header .site-header-primary-section-left {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(100% - 120px);
}
#masthead #ast-mobile-header .site-header-primary-section-right { margin-left: auto; }

/* ---- Marca ---- */
#masthead .site-branding { padding: 0; }

/* Wordmark: Geist en mayúsculas con tracking amplio */
#masthead .site-title {
	margin: 0;
	font-family: var(--nav-font);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
}

#masthead .site-title a {
	color: var(--nav-fg);
	/* compensa el tracking de la última letra para que quede centrado ópticamente */
	margin-right: -.22em;
	transition: color .5s ease, opacity .2s ease;
}

#masthead .site-title a:hover { opacity: .75; }

/* ---- Botón hamburguesa (móvil) ---- */
#masthead .menu-toggle.main-header-menu-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--nav-border);
	border-radius: 50%;
	color: var(--nav-fg);
	background: color-mix(in srgb, var(--nav-fg) 8%, transparent);
	transition: background-color .3s ease, color .5s ease, border-color .5s ease;
}

#masthead .menu-toggle .ast-mobile-svg { fill: currentColor; width: 18px; height: 18px; }

/* ---- Panel del menú móvil ---- */
#masthead .ast-mobile-header-content {
	max-width: var(--nav-max);
	margin: 8px auto 0;
	padding: 10px;
	background: var(--nav-bg-solid);
	-webkit-backdrop-filter: var(--nav-blur);
	backdrop-filter: var(--nav-blur);
	border: 1px solid var(--nav-border-solid);
	border-radius: 28px;
	box-shadow: var(--nav-shadow);
	font-family: var(--nav-font);
}

#masthead .ast-mobile-header-content .main-header-menu { background: none; border: 0; }

#masthead .ast-mobile-header-content .main-header-menu .menu-item { border: 0; }

#masthead .ast-mobile-header-content .main-header-menu .menu-item > .menu-link {
	padding: .9rem 1.1rem;
	border: 0;
	border-radius: 18px;
	color: var(--nav-ink);
	font-family: var(--nav-font);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.2;
	background: none;
	transition: background-color .2s ease, color .2s ease;
}

#masthead .ast-mobile-header-content .main-header-menu .menu-item > .menu-link:hover,
#masthead .ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link {
	color: var(--nav-accent);
	background: rgba(255, 255, 255, .7);
}

/* Entrada escalonada de los enlaces al abrir el menú móvil */
body.ast-main-header-nav-open #masthead .ast-mobile-header-content .menu-item {
	animation: nav-item-in .6s var(--nav-ease) both;
}
body.ast-main-header-nav-open #masthead .ast-mobile-header-content .menu-item:nth-child(2) { animation-delay: .04s; }
body.ast-main-header-nav-open #masthead .ast-mobile-header-content .menu-item:nth-child(3) { animation-delay: .08s; }
body.ast-main-header-nav-open #masthead .ast-mobile-header-content .menu-item:nth-child(4) { animation-delay: .12s; }
body.ast-main-header-nav-open #masthead .ast-mobile-header-content .menu-item:nth-child(5) { animation-delay: .16s; }

@keyframes nav-item-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Escritorio
   ========================================================================== */
@media (min-width: 922px) {
	:root { --nav-h: 64px; --nav-gap-top: 16px; }

	#masthead .site-title { font-size: 1rem; letter-spacing: .24em; }
	#masthead .site-title a { margin-right: -.24em; }

	#masthead .site-primary-header-wrap.ast-container {
		max-width: none;
		padding: 0 8px 0 28px;
	}

	/* Menú centrado */
	#masthead .ast-builder-menu-1 .main-header-menu { gap: 4px; }

	/* La marca ya lleva al inicio: se oculta el ítem "Inicio" del menú de escritorio */
	#masthead .ast-builder-menu-1 .menu-item-home { display: none; }

	#masthead .main-header-menu > .menu-item { line-height: 1; }

	#masthead .ast-builder-menu-1 .main-header-menu .menu-item > .menu-link {
		padding: .65rem 1.05rem;
		border-radius: 999px;
		color: var(--nav-fg);
		font-family: var(--nav-font);
		font-size: .9375rem;
		font-weight: 500;
		letter-spacing: -.005em;
		line-height: 1.2;
		transition: color .5s ease, background-color .3s ease;
	}

	/* Texto que se desliza (inc/header.php envuelve el texto en .nav-label) */
	#masthead .nav-label { position: relative; display: block; height: 1.2em; overflow: hidden; }
	#masthead .nav-label > span,
	#masthead .nav-label::after { display: block; transition: transform .5s var(--nav-ease); }
	#masthead .nav-label::after { content: attr(data-text); }
	#masthead .menu-link:hover .nav-label > span,
	#masthead .menu-link:hover .nav-label::after,
	#masthead .menu-link:focus-visible .nav-label > span,
	#masthead .menu-link:focus-visible .nav-label::after { transform: translateY(-100%); }

	/* Página actual: píldora de vidrio (sin puntos) */
	#masthead .ast-builder-menu-1 .main-header-menu .current-menu-item > .menu-link {
		background: color-mix(in srgb, var(--nav-fg) 12%, transparent);
	}

	#masthead .ast-builder-menu-1 .main-header-menu .menu-item > .menu-link:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	/* Botón de llamada a la acción: píldora azul con círculo y flecha */
	#masthead .ast-header-button-1 .ast-custom-button {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		padding: 5px 5px 5px 18px;
		border: 0;
		border-radius: 999px;
		color: #fff;
		background: var(--nav-accent);
		font-family: var(--nav-font);
		font-size: .875rem;
		text-transform: none;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
		transition: background-color .3s ease, box-shadow .3s ease;
	}

	#masthead .ast-header-button-1 .ast-custom-button::after {
		content: "";
		flex: none;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6' fill='none' stroke='%230056ef' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat,
			#fff;
		transition: transform .5s var(--nav-ease);
	}

	#masthead .ast-header-button-1 .ast-custom-button:hover {
		color: #fff;
		background: var(--nav-accent-hover);
		box-shadow: 0 12px 28px -12px rgba(0, 86, 239, .7);
	}

	#masthead .ast-header-button-1 .ast-custom-button:hover::after { transform: rotate(45deg); }
}

/* Reducir transparencia: vidrio sólido */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--nav-bg-top: rgba(10, 18, 48, .95);
		--nav-bg-solid: rgba(238, 241, 246, .98);
	}
}

@media (prefers-reduced-motion: reduce) {
	body #masthead.site-header,
	#masthead .main-header-bar,
	#masthead .nav-label > span,
	#masthead .nav-label::after,
	#masthead .ast-header-button-1 .ast-custom-button,
	#masthead .ast-header-button-1 .ast-custom-button::after { transition: none; }
	body.ast-main-header-nav-open #masthead .ast-mobile-header-content .menu-item { animation: none; }
}