{{-- Header demo-accounting-1 — Usa componentes compartidos --}}
<header id="header" class="header-transparent header-effect-shrink @yield('header_classes')" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
    <div class="header-body border-top-0" style="background: transparent; border-bottom: 1px solid var(--primary-rgba-10) !important;">
        <div class="header-container container container-xl-custom">
            <div class="header-row">
                <div class="header-column">
                    <div class="header-row">
                        <div class="header-logo">
                            <a href="{{ url('/') }}">
                                <img alt="{{ config('site.assets.main_logo_alt', config('site.name')) }}" src="{{ site_asset_url('main_logo') }}" class="img-fluid" style="max-width: 180px; height: auto;" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="header-column justify-content-end">
                    <div class="header-row">
                        <div class="header-nav header-nav-links order-2 order-lg-1">
                            <div class="header-nav-main header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
                                <nav class="collapse">
                                    <ul class="nav nav-pills" id="mainNav">
                                        <x-header-nav :dropdowns="false" link-classes="font-weight-bold text-uppercase" />
                                    </ul>
                                </nav>
                            </div>
                            <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav" style="background-color: var(--primary); color: var(--secondary);">
                                <i class="fas fa-bars"></i>
                            </button>
                        </div>
                        <div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border-left order-1 order-lg-2 ms-lg-3">
                            <x-header-cta classes="btn-primary btn-rounded font-weight-bold text-2 px-4 py-2" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>