#pf-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 197px;
	background: var(--pf-bg);
	z-index: 9999;
	display: flex;
	align-items: center;
}

#pf-header-inner {
	width: 100%;
	max-width: var(--pf-max);
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

#pf-nav {
	grid-column: 1;
	justify-self: start;
}

#pf-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

#pf-nav-list li { position: relative; }

#pf-nav-list li a {
	font-family: 'Londrina Solid', sans-serif;
	font-size: 26px;
	font-weight: 400;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	display: block;
	padding: 8px 14px;
	transition: color var(--pf-transition);
}

#pf-nav-list li a:hover { color: var(--pf-yellow); }

#pf-nav-list li.pf-active::after,
#pf-nav-list li.current-menu-item::after {
	content: '';
	display: block;
	height: 3px;
	background: var(--pf-red);
	border-radius: 2px;
	margin: 0 14px;
}

#pf-logo {
	grid-column: 2;
	justify-self: center;
	text-align: center;
	width: 100%;
	max-width: 380px;
}

#pf-logo a,
#pf-logo .custom-logo-link {
	display: block;
	width: 100%;
	line-height: 0;
}

#pf-logo img,
#pf-logo .custom-logo {
	width: 100% !important;
	height: auto !important;
	max-height: 200px;
	object-fit: contain;
	image-rendering: auto;
	display: block;
	margin: 0 auto;
}

#pf-ctas {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 12px;
}

#pf-ctas .pf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pf-red);
	color: #ffffff;
	font-family: 'Londrina Solid', sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 15px 38px;
	border-radius: 6px;
	transition: background var(--pf-transition), transform var(--pf-transition);
	white-space: nowrap;
}

#pf-ctas .pf-btn:hover {
	background: var(--pf-red-hover);
	transform: translateY(-1px);
}

/* CTAs nuevos (solo desktop): WhatsApp verde + Uber Eats oscuro alargado */
#pf-ctas .pf-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 30px;
	border-radius: 8px;
	font-family: 'Londrina Solid', sans-serif;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--pf-transition), transform var(--pf-transition);
}
#pf-ctas .pf-cta:hover { transform: translateY(-1px); }
#pf-ctas .pf-cta--wa { background: #21c75f; }
#pf-ctas .pf-cta--wa:hover { background: #1eb656; }
#pf-ctas .pf-cta__wa-icon { width: 24px; height: 24px; flex-shrink: 0; display: block; object-fit: contain; }
#pf-ctas .pf-cta--uber { background: #142328; padding: 0 40px; min-width: 170px; }
#pf-ctas .pf-cta--uber:hover { background: #1c2f36; }
#pf-ctas .pf-cta__uber-logo { height: 24px; width: auto; display: block; object-fit: contain; }
#pf-ctas .pf-cta--py { background: #d71920; padding: 0 40px; min-width: 170px; }
#pf-ctas .pf-cta--py:hover { background: #b9141b; }
#pf-ctas .pf-cta__py-logo { height: 22px; width: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); }

#pf-hamburger,
.pf-hamburger {
	grid-column: 3;
	justify-self: end;
	display: none;
	flex-direction: column;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

#pf-hamburger span,
.pf-hamburger span {
	display: block;
	width: 26px;
	height: 2px;
	background: #ffffff;
}

@media (max-width: 1024px) {
	#pf-nav-list li a { font-size: 20px; }
	#pf-ctas .pf-btn { font-size: 16px; padding: 12px 24px; }
}

/* ===================================================================
   HEADER MÓVIL ESTILO LANDING (todas las páginas)
   Home: transparente sobre el hero → sólido al hacer scroll.
   Resto: sólido siempre, con logo + íconos visibles.
   =================================================================== */

.pf-nav-actions,
.pf-nav-progress,
.pf-menu-overlay,
.pf-menu-head,
.pf-nav-brand { display: none; }

.pf-nav-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	flex-shrink: 0;
	text-decoration: none;
}
.pf-nav-ic img { display: block; object-fit: contain; }
.pf-nav-ic--wa { background: #21c75f; }
.pf-nav-ic--wa img { width: 26px; height: 26px; }
.pf-nav-ic--uber { background: #32b466; }
.pf-nav-ic__img--uber { height: 22px; width: auto; max-width: 38px; }
.pf-nav-ic--py { background: #d71920; }
.pf-nav-ic__img--py { width: 26px; height: 26px; }

@keyframes pf-nav-brand-in { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes pf-nav-icon-in { from { opacity: 0; transform: translateY(-18px) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes pf-nav-pop-in { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: none; } }
@keyframes pf-menu-item-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
	#pf-header {
		min-height: 0;
		background: rgba(11, 11, 11, 0.96);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		transition: background 0.35s ease;
	}
	#pf-header-inner {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		height: 90px;
		min-height: 90px;
		box-sizing: border-box;
		padding: 0 16px;
		padding-top: env(safe-area-inset-top, 0px);
		grid-template-columns: none;
	}
	#pf-logo { display: none !important; }
	#pf-ctas { display: none; }
	#pf-hamburger, .pf-hamburger { display: flex; z-index: 10001; }

	/* Brand (logo) + acciones: visibles por defecto (páginas internas) */
	.pf-nav-brand { display: block; margin: 0 auto 0 0; flex-shrink: 0; line-height: 0; }
	.pf-nav-brand-logo { display: block; height: 56px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
	.pf-nav-actions { display: flex; align-items: center; gap: 8px; }

	/* Barra de progreso de scroll */
	.pf-nav-progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
	.pf-nav-progress__fill { display: block; height: 100%; width: 0; background: #f4df35; transition: width 0.12s linear; }

	/* Front page: transparente arriba; sólido (compacto) al hacer scroll */
	body.home #pf-header:not(.pf-nav--compact) {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	body.home #pf-header:not(.pf-nav--compact) .pf-nav-brand,
	body.home #pf-header:not(.pf-nav--compact) .pf-nav-actions { display: none; }
	body.home #pf-header:not(.pf-nav--compact) #pf-hamburger { margin-left: auto; }

	#pf-header.pf-nav--compact {
		background: rgba(11, 11, 11, 0.96);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	/* Panel deslizable (reusa .menu-open del hamburger) */
	#pf-header #pf-nav {
		display: block;
		position: fixed;
		top: 0;
		left: auto;
		right: 0;
		height: 100dvh;
		width: min(320px, 86vw);
		background: #141414;
		border-left: 1px solid #2a2a2a;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 10000;
		padding: 0 0 24px;
		padding-top: env(safe-area-inset-top, 0px);
		overflow-y: auto;
	}
	#pf-header.menu-open #pf-nav { transform: translateX(0); }

	/* El panel tiene su propia X: ocultar la hamburguesa cuando está abierto */
	#pf-header.menu-open #pf-hamburger,
	#pf-header.menu-open .pf-hamburger { display: none; }

	/* Evita el scroll horizontal que genera el panel fuera de pantalla */
	html, body { overflow-x: hidden; }

	/* Encabezado del panel: logo + cerrar */
	.pf-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; border-bottom: 1px solid #2a2a2a; }
	.pf-menu-logo { height: 44px; width: auto; max-width: 140px; object-fit: contain; }
	.pf-menu-close { width: 40px; height: 40px; background: none; border: none; cursor: pointer; flex-shrink: 0; padding: 0; }
	.pf-menu-close span { display: block; width: 20px; height: 20px; position: relative; margin: 0 auto; }
	.pf-menu-close span::before,
	.pf-menu-close span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: #ffffff; border-radius: 2px; }
	.pf-menu-close span::before { transform: translate(-50%, -50%) rotate(45deg); }
	.pf-menu-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }

	/* Lista del menú */
	#pf-header #pf-nav-list { flex-direction: column; gap: 0; align-items: stretch; padding: 8px 0; overflow: hidden; }
	#pf-header #pf-nav-list li { position: static; }
	#pf-header #pf-nav-list li a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		font-family: 'Londrina Solid', sans-serif;
		font-weight: 700;
		font-size: 1.2rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #ffffff;
		padding: 18px 22px;
		border-bottom: 1px solid #242424;
	}
	#pf-header #pf-nav-list li a::after {
		content: '';
		width: 9px;
		height: 9px;
		border-right: 2px solid #777;
		border-top: 2px solid #777;
		transform: rotate(45deg);
		flex-shrink: 0;
	}
	#pf-header #pf-nav-list li.current-menu-item > a,
	#pf-header #pf-nav-list li.current_page_item > a { color: #f4df35; }
	#pf-header #pf-nav-list li.current-menu-item::after,
	#pf-header #pf-nav-list li.current_page_item::after { display: none; }
	#pf-header #pf-nav-list li a:active { background: #1f1f1f; }

	/* Overlay del menú */
	.pf-menu-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.6); }
	.pf-menu-overlay[hidden] { display: none; }
	#pf-header.menu-open ~ .pf-menu-overlay { display: block; }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	/* Entrada del header compacto (home) al hacer scroll */
	body.home #pf-header.pf-nav--compact .pf-nav-brand { animation: pf-nav-brand-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
	body.home #pf-header.pf-nav--compact .pf-nav-ic--wa { animation: pf-nav-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.05s; }
	body.home #pf-header.pf-nav--compact .pf-nav-ic--uber { animation: pf-nav-icon-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.12s; }
	body.home #pf-header.pf-nav--compact .pf-nav-ic--py { animation: pf-nav-icon-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.18s; }

	/* Entrada escalonada de los ítems al abrir el menú (todas las páginas) */
	#pf-header.menu-open #pf-nav-list li { animation: pf-menu-item-in 0.35s ease-out both; }
	#pf-header.menu-open #pf-nav-list li:nth-child(1) { animation-delay: 0.10s; }
	#pf-header.menu-open #pf-nav-list li:nth-child(2) { animation-delay: 0.16s; }
	#pf-header.menu-open #pf-nav-list li:nth-child(3) { animation-delay: 0.22s; }
	#pf-header.menu-open #pf-nav-list li:nth-child(4) { animation-delay: 0.28s; }
	#pf-header.menu-open #pf-nav-list li:nth-child(5) { animation-delay: 0.34s; }
	#pf-header.menu-open #pf-nav-list li:nth-child(6) { animation-delay: 0.40s; }
}