{{-- Header demo-architecture-2 — Usa componentes compartidos --}}
<header id="header" class="header-transparent header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyHeaderContainerHeight': 80, 'stickyStartAt': 50, 'stickyChangeLogo': false}">
    <div class="header-body border-top-0 bg-primary appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'forceAnimation': true}">
        <div class="header-container container container-xl-custom custom-container-style">
            <div class="header-row">
                <div class="header-column align-items-start justify-content-center">
                    <div class="header-logo z-index-2 col-lg-2 px-0">
                        <a href="{{ front_homepage_url() }}">
                            <img alt="{{ config('site.assets.main_logo_alt') }}" height="44" src="{{ site_asset_url('footer_logo') }}">
                        </a>
                    </div>
                </div>
                <div class="header-column flex-row justify-content-end justify-content-lg-center">
                    <div class="header-nav header-nav-line header-nav-bottom-line header-nav-bottom-line-effect-1 header-nav-dropdowns-dark header-nav-light-text justify-content-end">
                        <div class="header-nav-main header-nav-main-arrows header-nav-main-mobile-dark header-nav-main-dropdown-no-borders header-nav-main-effect-3 header-nav-main-sub-effect-1">
                            <nav class="collapse">
                                <ul class="nav nav-pills" id="mainNav">
                                    <x-header-nav :dropdowns="true" />
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <button class="btn header-btn-collapse-nav bg-transparent border-0 text-4 position-relative top-2 p-0 ms-4" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
                <div class="header-column align-items-end justify-content-center d-none d-lg-flex">
                    <x-social-icons theme="light" size="md" classes="header-social-icons social-icons-icon-light social-icons-medium custom-social-icons-divider" />
                </div>
            </div>
        </div>
    </div>
</header>