{{-- Header demo-construction — Usa componentes compartidos --}}
<header id="header" class="header-transparent header-semi-transparent header-semi-transparent-light" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyStartAt': 1, 'stickySetTop': '1'}">
	<div class="header-body border-0">
		<div class="header-container container">
			<div class="header-row">
				<div class="header-column">
					<div class="header-row">
						<div class="header-logo custom-header-logo">
							<a href="{{ front_homepage_url() }}">
								<img class="logo" alt="{{ config('site.assets.main_logo_alt') }}" width="123" src="{{ site_asset_url('footer_logo') }}">
								<img class="logo-sticky" alt="{{ config('site.assets.main_logo_alt') }}" width="123" src="{{ site_asset_url('main_logo') }}">
							</a>
						</div>
					</div>
				</div>
				<div class="header-column justify-content-end">
					<div class="header-row">
						<div class="header-nav header-nav-links order-3 order-lg-1">
							<div class="header-nav-main header-nav-main-square header-nav-main-text-capitalize header-nav-main-effect-1 header-nav-main-sub-effect-1">
								<nav class="collapse px-3-5">
									<ul class="nav nav-pills" id="mainNav">
										<x-header-nav :dropdowns="true" />
									</ul>
								</nav>
							</div>
							<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
								<i class="fas fa-bars"></i>
							</button>
						</div>
						<div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border d-none d-sm-flex ms-3 order-1 order-lg-2">
							<x-social-icons theme="dark" size="md" classes="header-social-icons d-none d-sm-block ms-0" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>