/* ==========================================================================
   HEADER EXCLUSIVO DE LA LANDING PAGE (ORTIZ & ASOCIADOS)
   Barra oscura con logotipo centrado y navegación dividida en dos alas,
   inspirada en la maqueta "La Excelencia en Cada Detalle".
   Es autocontenido: no usa la clase .header de global.css para no
   interferir con el header del resto del sitio.
   ========================================================================== */

:root {
    --hl-gold: #d4af37;             /* Dorado de marca */
    --hl-champagne: #d9c690;        /* Champán para enlaces en reposo */
    --hl-champagne-bright: #f4e3b2; /* Champán brillante para hover/activo */
    --hl-separator: rgba(217, 198, 144, 0.38);
}

.header-landing {
    /* Sticky: nace en el flujo normal (el hero arranca justo debajo) pero se
       queda pegado arriba, lo que permite ocultarlo al bajar y reaparecerlo
       al subir sin dejar hueco (ver ocultar-header.js) */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    background: linear-gradient(110deg, #050503 0%, #100e07 35%, #1a1709 50%, #100e07 65%, #050503 100%);
    background-color: #0a0906;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 1001;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    transition: transform 0.3s ease-in-out;
}

.header-landing.hidden {
    transform: translateY(-100%);
}

/* Rejilla: ala izquierda | logo centrado | ala derecha.
   Las alas laterales miden 1fr cada una para que el logo quede
   perfectamente centrado sin importar el largo de los enlaces. */
.hl-bar {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
}

.hl-side {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Ala izquierda: emblema pegado al borde, enlaces pegados al logo */
.hl-side-left {
    justify-content: space-between;
    gap: 18px;
}

/* Ala derecha: enlaces pegados al logo, borde derecho libre */
.hl-side-right {
    justify-content: flex-start;
}

.hl-crest {
    display: inline-flex;
    flex-shrink: 0;
}

.hl-crest img {
    height: 60px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.hl-logo {
    display: inline-flex;
    justify-content: center;
}

.hl-logo img {
    height: 118px;
    width: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Enlaces de navegación con separador vertical fino (estilo "HOME | ACERCA")
   -------------------------------------------------------------------------- */
.hl-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.hl-nav li {
    display: flex;
    align-items: center;
}

.hl-nav li + li::before {
    content: "";
    width: 1px;
    height: 15px;
    background: var(--hl-separator);
    margin: 0 clamp(9px, 1.2vw, 20px);
}

.hl-nav a {
    color: var(--hl-champagne);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 2px;
    position: relative;
    transition: color 0.25s ease;
}

.hl-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--hl-gold);
    transition: width 0.25s ease;
}

.hl-nav a:hover,
.hl-nav li.active a {
    color: var(--hl-champagne-bright);
    text-decoration: none;
}

.hl-nav a:hover::after,
.hl-nav li.active a::after {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Banda compacta para laptops (1200–1449px): se aprietan espacios y se acota
   la tipografía para que las dos alas de navegación quepan sin recortarse
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1449px) {
    .hl-bar {
        padding: 14px 16px;
        column-gap: 12px;
    }

    .hl-side-left {
        gap: 12px;
    }

    .header-landing .hl-nav li + li::before {
        margin: 0 9px;
    }

    .header-landing .hl-nav a {
        font-size: 14px;
        letter-spacing: 2px;
    }
}

/* --------------------------------------------------------------------------
   Versión móvil/tablet: hamburguesa (SlickNav) a la izquierda + logo centrado.
   Por debajo de 1200px las dos alas completas no caben sin recortarse.
   -------------------------------------------------------------------------- */

/* Lista fuente para SlickNav: nunca se muestra directamente */
#hl-slicknav {
    display: none;
}

.hl-mobile-nav {
    display: none;
}

@media (max-width: 1199px) {
    .hl-side {
        display: none;
    }

    /* normalize.css oculta .slicknav_menu y responsive.css solo lo re-muestra
       bajo 768px; aquí el menú móvil aplica hasta 1199px */
    .header-landing .slicknav_menu {
        display: block;
    }

    .hl-bar {
        grid-template-columns: 56px 1fr 56px;
        padding: 10px 16px;
        column-gap: 10px;
    }

    .hl-mobile-nav {
        display: block;
        grid-column: 1;
        grid-row: 1;
    }

    .hl-logo {
        grid-column: 2;
        grid-row: 1;
    }

    .hl-logo img {
        height: 88px;
    }
}

@media (max-width: 480px) {
    .hl-logo img {
        height: 74px;
    }
}

/* Piel dorada del menú SlickNav, limitada al header de la landing */
.header-landing .slicknav_menu {
    background: transparent;
    padding: 0;
}

.header-landing .slicknav_btn {
    background: transparent;
    border: 1px solid rgba(217, 198, 144, 0.55);
    border-radius: 4px;
    float: none;
    display: inline-block;
    margin: 0;
    padding: 10px 11px;
}

.header-landing .slicknav_menu .slicknav_icon-bar {
    background-color: var(--hl-gold);
    box-shadow: none;
}

/* El desplegable cae como cortina sobre el hero, a lo ancho del header */
.header-landing .slicknav_nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #0a0906;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    z-index: 1300;
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.header-landing .slicknav_nav li {
    border-bottom: 1px solid rgba(217, 198, 144, 0.08);
}

.header-landing .slicknav_nav li:last-child {
    border-bottom: none;
}

.header-landing .slicknav_nav a {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--hl-champagne);
    padding: 13px 24px;
    margin: 0;
    display: block;
    text-decoration: none;
}

.header-landing .slicknav_nav a:hover {
    color: var(--hl-champagne-bright);
    background: rgba(212, 175, 55, 0.07);
    border-radius: 0;
}