/* ===== Alterfocus - Header/nav compartido + estilos base de sitio =====
 * Cargado via wp_enqueue_style() en functions.php. */

html { scroll-behavior: smooth; }
.af-site { margin: 0; background: var(--af-bg); font-family: var(--af-font-sans); color: var(--af-ink); }
.af-site * { box-sizing: border-box; }
.af-site a { color: var(--af-ink); }
.af-site a:hover { color: var(--af-accent); }
.af-site ::selection { background: var(--af-accent); color: var(--af-ink); }

.af-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(20px,4vw,48px);
	height: clamp(60px,8vw,76px);
	background: rgba(248,247,245,0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(22,22,22,0.08);
}
.af-site-header img.logo { height: clamp(23px,2.6vw,29px); width: auto; display: block; }
.af-site-nav { display: flex; align-items: center; gap: clamp(12px,1.6vw,28px); }
.af-site-nav a { white-space: nowrap; font-size: clamp(12px,1.15vw,14px); font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: color 0.3s var(--ease-fluid); }
.af-site-sep { width: 1px; height: 14px; background: var(--af-ink); opacity: 0.2; }

/* Hamburguesa animada */
.af-site-hamburger { display: none; background: none; border: none; width: 32px; height: 24px; position: relative; cursor: pointer; padding: 0; z-index: 65; }
.af-site-hamburger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--af-ink); transition: transform 0.4s var(--ease-fluid), opacity 0.3s var(--ease-fluid), top 0.4s var(--ease-fluid), background-color 0.3s var(--ease-fluid); }
.af-site-hamburger span:nth-child(1){ top: 3px; }
.af-site-hamburger span:nth-child(2){ top: 11px; }
.af-site-hamburger span:nth-child(3){ top: 19px; }
.af-site-hamburger.open span { background: var(--af-bg); }
.af-site-hamburger.open span:nth-child(1){ top: 11px; transform: rotate(45deg); }
.af-site-hamburger.open span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.af-site-hamburger.open span:nth-child(3){ top: 11px; transform: rotate(-45deg); }

/* Menú Mobile Drawer con Blur y Cascada */
.af-site-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(5, 5, 5, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 22px;
	padding: 0 clamp(24px, 7vw, 48px);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.4s var(--ease-fluid), visibility 0.4s var(--ease-fluid);
}
.af-site-mobile-menu.open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}
.af-site-mobile-menu a {
	font-family: var(--af-font-serif);
	font-weight: 700;
	font-size: clamp(24px, 6.5vw, 32px);
	color: var(--af-bg);
	text-decoration: none;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.45s var(--ease-fluid), opacity 0.45s var(--ease-fluid), color 0.25s var(--ease-fluid);
}
.af-site-mobile-menu a:hover,
.af-site-mobile-menu a.active {
	color: var(--af-accent);
}
.af-site-mobile-menu.open a {
	transform: translateY(0);
	opacity: 1;
}
.af-site-mobile-menu.open a:nth-of-type(1) { transition-delay: 0.05s; }
.af-site-mobile-menu.open a:nth-of-type(2) { transition-delay: 0.10s; }
.af-site-mobile-menu.open a:nth-of-type(3) { transition-delay: 0.15s; }
.af-site-mobile-menu.open a:nth-of-type(4) { transition-delay: 0.22s; }
.af-site-mobile-menu.open a:nth-of-type(5) { transition-delay: 0.26s; }

.af-site-mobile-menu .af-m-sep {
	width: 36px;
	height: 1px;
	background: var(--af-bg);
	opacity: 0;
	margin: 6px 0;
	transform: translateY(14px);
	transition: transform 0.45s var(--ease-fluid), opacity 0.45s var(--ease-fluid) 0.18s;
}
.af-site-mobile-menu.open .af-m-sep {
	opacity: 0.3;
	transform: translateY(0);
}
.af-site-mobile-menu a.af-m-sub {
	font-family: var(--af-font-sans);
	font-size: 16px;
	opacity: 0;
	font-weight: 400;
}
.af-site-mobile-menu.open a.af-m-sub {
	opacity: 0.85;
}

@media (max-width: 820px) {
	.af-site-nav { display: none; }
	.af-site-hamburger { display: block; }
}
@media (min-width: 821px) {
	.af-site-mobile-menu, .af-site-hamburger { display: none !important; }
}

/* Encuadre de foto (focal point) por post — desktop/mobile */
.af-ew-hero-media img,
.af-ed-hero-img,
.af-ap-portrait img { object-position: var(--af-fx,50%) var(--af-fy,50%); }
@media (max-width:760px) {
	.af-ew-hero-media img,
	.af-ed-hero-img,
	.af-ap-portrait img { object-position: var(--af-fx-m,50%) var(--af-fy-m,50%); }
}

/* Link activo (pagina actual) */
.af-site-nav a.active {
	color: var(--af-accent);
	font-weight: 600;
}