/**
 * LAYOUT — header, footer, transiciones SPA.
 */

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-bg-alt);
	border-bottom: 1px solid transparent;
	transition: background var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
	background: var(--color-bg-alt);
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-xs);
}

.site-header__topbar {
	background: var(--color-text);
	color: var(--color-text-invert);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wide);
	padding: var(--sp-2) 0;
	text-align: center;
}
.site-header__topbar a { color: inherit; border-bottom: 1px dotted; }

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-4);
	min-height: var(--header-height);
	transition: min-height var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] .site-header__inner { min-height: var(--header-height-scrolled); }

.site-header__left  { display: flex; align-items: center; gap: var(--sp-3); }
.site-header__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); }
.site-header__center {
	display: flex;
	justify-content: center;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	height: 44px;                                 /* misma altura que .icon-btn */
	font-family: var(--font-serif);
	font-size: var(--fs-xl);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	line-height: 1;
	font-weight: var(--fw-normal);
}
.site-logo--text span { display: inline-block; }
.site-logo:hover { color: var(--color-primary); }

/* ── Nav primary ─────────────────────────────────────────────── */
.nav-primary {
	display: none;
	list-style: none;
	margin: 0; padding: 0;
	gap: var(--sp-4);
}
@media (min-width: 1024px) {
	.nav-primary { display: flex; align-items: center; justify-content: center; }
}
.nav-primary > li { position: relative; }
.nav-primary > li > a {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-3) var(--sp-3);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text);
	position: relative;
	white-space: nowrap;   /* evita que los labels largos se rompan a 2 líneas */
}

/* Item destacado (Ramo Personalizado) — color rose, subrayado solo en hover como el resto */
.nav-primary > li.menu-item--accent > a { color: var(--color-primary); }
.nav-primary > li.menu-item--accent > a::after { background: var(--color-primary); }
.nav-primary > li > a::after {
	content: '';
	position: absolute;
	left: var(--sp-3); right: var(--sp-3); bottom: 8px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-out);
}
.nav-primary > li:hover > a::after,
.nav-primary > li.current-menu-item > a::after,
.nav-primary > li.current-menu-parent > a::after { transform: scaleX(1); }

/* Mega menu */
.nav-primary .sub-menu {
	position: absolute; top: 100%; left: 50%;
	transform: translateX(-50%) translateY(-8px);
	background: var(--color-bg-alt);
	min-width: 260px;
	padding: var(--sp-5) var(--sp-5);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	list-style: none; margin: 0;
	display: flex; flex-direction: column; gap: var(--sp-2);
	opacity: 0; visibility: hidden;
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
	z-index: var(--z-mega);
}
.nav-primary > li:hover > .sub-menu,
.nav-primary > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.nav-primary .sub-menu a {
	display: block;
	font-size: var(--fs-sm);
	color: var(--color-text);
	padding: var(--sp-2) 0;
	letter-spacing: var(--tracking-wide);
	white-space: nowrap;
}
.nav-primary .sub-menu a:hover { color: var(--color-primary); padding-left: var(--sp-2); }

/* Sub-sub-menu */
.nav-primary .sub-menu .sub-menu {
	position: static;
	transform: none;
	padding: var(--sp-2) 0 0 var(--sp-3);
	border: 0;
	box-shadow: none;
	background: transparent;
	opacity: 1; visibility: visible;
	border-left: 1px solid var(--color-border);
	margin-top: var(--sp-2);
}

/* ── Mobile menu drawer ──────────────────────────────────────── */
.nav-mobile { padding: var(--sp-4) 0; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile > ul > li > a {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--sp-4) 0;
	font-family: var(--font-serif);
	font-size: var(--fs-lg);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
}
.nav-mobile .sub-menu {
	display: none;
	padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
	border-left: 1px solid var(--color-border);
	margin: var(--sp-2) 0;
}
.nav-mobile li.is-open > .sub-menu { display: block; }
.nav-mobile .sub-menu a {
	display: block;
	padding: var(--sp-2) 0;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.mobile-only { display: inline-flex; }
@media (min-width: 1024px) { .mobile-only { display: none; } }

.desktop-only { display: none; }
@media (min-width: 1024px) { .desktop-only { display: inline-flex; } }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
	background: var(--color-bg-invert);
	color: var(--color-text-invert);
	padding-top: var(--sp-12);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: var(--sp-8);
	padding-bottom: var(--sp-10);
}
@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.site-footer h4, .footer-widget__title {
	font-family: var(--font-sans);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-text-invert);
	margin-bottom: var(--sp-4);
	opacity: 0.7;
}
.site-footer a { color: var(--color-text-invert); opacity: 0.85; }
.site-footer a:hover { opacity: 1; color: var(--c-rose-300); }
.site-footer ul li { padding: var(--sp-1) 0; }
.site-footer .brand {
	font-family: var(--font-serif);
	font-size: var(--fs-xl);
	margin-bottom: var(--sp-4);
	opacity: 1;
}
.site-footer__contact p { font-size: var(--fs-sm); opacity: 0.7; }

.site-footer__bar {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-block: var(--sp-5);
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: var(--sp-4);
	font-size: var(--fs-2xs); opacity: 0.6;
}
.site-footer__bar ul { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* ── Main transitions (Swup) ─────────────────────────────────── */
main.transition-fade {
	transition: opacity var(--dur-page) var(--ease-out), transform var(--dur-page) var(--ease-out);
	opacity: 1;
	transform: translateY(0);
}
html.is-animating main.transition-fade {
	opacity: 0;
	transform: translateY(12px);
}
html.is-leaving main.transition-fade { opacity: 0; }

/* Loader bar SPA */
.spa-loader {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 2px;
	background: transparent;
	z-index: var(--z-max);
	pointer-events: none;
}
.spa-loader::after {
	content: '';
	display: block; width: 0%; height: 100%;
	background: var(--color-primary);
	transition: width var(--dur-slow) var(--ease-out);
}
html.is-leaving .spa-loader::after { width: 60%; }
html.is-rendering .spa-loader::after { width: 100%; transition-duration: 200ms; }