{{-- Header demo-transportation-logistic — Usa componentes compartidos --}}
<header id="header" class="@yield('header_classes')" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyStartAt': 45, 'stickySetTop': '-45px', 'stickyChangeLogo': true}">
    <div class="header-body">
        <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="{{ front_homepage_url() }}">
                                <img alt="{{ config('site.assets.main_logo_alt') }}" height="{{ config('site.assets.main_logo_height') }}" data-sticky-height="40" data-sticky-top="25" src="{{ site_asset_url('main_logo') }}">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="header-column justify-content-end">
                    <div class="header-row pt-3">
                        <nav class="header-nav-top">
                            <ul class="nav nav-pills">
                                <li class="nav-item nav-item-left-border nav-item-left-border-remove nav-item-left-border-sm-show">
                                    <x-social-icons theme="dark" size="md" classes="header-social-icons d-none d-sm-block" />
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="header-row">
                        <div class="header-nav pt-1">
                            <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">
                                <nav class="collapse">
                                    <ul class="nav nav-pills" id="mainNav">
                                        <x-header-nav :dropdowns="true" link-classes="text-uppercase font-weight-semi-bold" />
                                    </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>
                </div>
            </div>
        </div>
    </div>
</header>