/*
===============================================================================
Archivo: header.css
Ubicación: assets/css/header.css
-------------------------------------------------------------------------------
Header corporativo compartido de NominareIA.

Responsabilidad:
- Identidad corporativa.
- Navegación principal.
- Dropdowns.
- Botón Ingresar.
- Navegación móvil.
- Estados hover/focus.
===============================================================================
*/


/* ==========================================================================
   1. CONTENEDOR
   ========================================================================== */

#site-header {
    position: relative;
    z-index: 1000;

    width: 100%;
}


/* ==========================================================================
   2. HEADER
   ========================================================================== */

.corporate-header {
    position: fixed;
    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;
    min-height: var(--header-height);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    background:
        rgba(2, 11, 36, 0.91);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.12);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


/*
 * El contenido del header utiliza exactamente el mismo
 * contenedor maestro que el resto de las páginas.
 */
.corporate-header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height:
        var(--header-height);

    gap:
        2.5rem;
}


/* ==========================================================================
   3. MARCA
   ========================================================================== */

.brand-home {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    gap:
        0.8rem;

    color:
        #ffffff;

    text-decoration:
        none;
}


.brand-home:hover {
    color:
        #ffffff;
}


.header__logo {
    display: block;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    object-fit:
        contain;
}


.brand-home__name {
    color:
        #ffffff;

    font-family:
        var(--font-primary);

    font-size:
        1.08rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.025em;

    white-space:
        nowrap;
}


/* ==========================================================================
   4. NAVEGACIÓN
   ========================================================================== */

.corporate-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap:
        0.35rem;

    min-width:
        0;
}


/* ==========================================================================
   5. ENLACES DIRECTOS
   ========================================================================== */

.corporate-nav > a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        44px;

    padding:
        0 0.9rem;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    color:
        rgba(255, 255, 255, 0.76);

    font-family:
        var(--font-primary);

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -0.01em;

    white-space:
        nowrap;

    text-decoration:
        none;

    transition:
        color var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}


/*
 * Hover corporativo:
 * cápsula translúcida + halo cyan inferior.
 */
.corporate-nav > a::after {
    content: "";

    position: absolute;

    right:
        18%;

    bottom:
        -1px;

    left:
        18%;

    height:
        2px;

    border-radius:
        var(--radius-pill);

    background:
        var(--gradient-primary);

    opacity:
        0;

    transform:
        scaleX(0.45);

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);
}


.corporate-nav > a:hover,
.corporate-nav > a:focus-visible {
    border-color:
        rgba(103, 234, 255, 0.13);

    background:
        rgba(103, 234, 255, 0.075);

    color:
        #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 187, 223, 0.07);

    transform:
        translateY(-1px);
}


.corporate-nav > a:hover::after,
.corporate-nav > a:focus-visible::after {
    opacity:
        1;

    transform:
        scaleX(1);
}


/* ==========================================================================
   6. DROPDOWN
   ========================================================================== */

.nav-dropdown {
    position: relative;

    display: flex;
    align-items: center;

    flex-shrink:
        0;
}


/* ==========================================================================
   7. TRIGGER DROPDOWN
   ========================================================================== */

.nav-dropdown__trigger {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        0.45rem;

    min-height:
        44px;

    margin:
        0;

    padding:
        0 0.9rem;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    background:
        transparent;

    color:
        rgba(255, 255, 255, 0.76);

    font-family:
        var(--font-primary);

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -0.01em;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}


.nav-dropdown__trigger::after {
    content: "";

    position: absolute;

    right:
        18%;

    bottom:
        -1px;

    left:
        18%;

    height:
        2px;

    border-radius:
        var(--radius-pill);

    background:
        var(--gradient-primary);

    opacity:
        0;

    transform:
        scaleX(0.45);

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);
}


.nav-dropdown__trigger:hover,
.nav-dropdown__trigger:focus-visible,
.nav-dropdown.is-open > .nav-dropdown__trigger {
    border-color:
        rgba(103, 234, 255, 0.13);

    background:
        rgba(103, 234, 255, 0.075);

    color:
        #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 187, 223, 0.07);

    transform:
        translateY(-1px);
}


.nav-dropdown__trigger:hover::after,
.nav-dropdown__trigger:focus-visible::after,
.nav-dropdown.is-open > .nav-dropdown__trigger::after {
    opacity:
        1;

    transform:
        scaleX(1);
}


/* ==========================================================================
   8. CHEVRON
   ========================================================================== */

.nav-dropdown__chevron {
    display:
        inline-flex;

    color:
        var(--color-cyan-400);

    font-size:
        1rem;

    line-height:
        1;

    transform:
        translateY(-1px);

    transition:
        transform var(--transition-normal);
}


.nav-dropdown.is-open
.nav-dropdown__chevron {
    transform:
        translateY(1px)
        rotate(180deg);
}


/* ==========================================================================
   9. INGRESAR
   ========================================================================== */

.nav-dropdown__trigger--access {
    min-height:
        46px;

    margin-left:
        0.35rem;

    padding:
        0.72rem
        1.2rem;

    border:
        1px solid rgba(103, 234, 255, 0.45);

    background:
        linear-gradient(
            135deg,
            rgba(0, 95, 186, 0.96),
            rgba(0, 187, 223, 0.84)
        );

    color:
        #ffffff;

    box-shadow:
        0 10px 30px rgba(0, 95, 186, 0.20);
}


.nav-dropdown__trigger--access::after {
    display:
        none;
}


.nav-dropdown__trigger--access:hover,
.nav-dropdown__trigger--access:focus-visible,
.nav-dropdown--access.is-open
.nav-dropdown__trigger--access {
    border-color:
        rgba(103, 234, 255, 0.90);

    background:
        linear-gradient(
            135deg,
            #0066c7,
            #00bbdf
        );

    color:
        #ffffff;

    box-shadow:
        0 12px 32px rgba(0, 187, 223, 0.25),
        0 0 24px rgba(0, 187, 223, 0.09);

    transform:
        translateY(-2px);
}


/* ==========================================================================
   10. PANEL DROPDOWN
   ========================================================================== */

.nav-dropdown__panel {
    position:
        absolute;

    z-index:
        1100;

    top:
        calc(100% + 0.75rem);

    left:
        50%;

    width:
        min(25rem, calc(100vw - 2rem));

    padding:
        0.55rem;

    border:
        1px solid rgba(103, 234, 255, 0.17);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(0, 187, 223, 0.17),
            transparent 34%
        ),
        rgba(4, 18, 51, 0.98);

    box-shadow:
        0 28px 65px rgba(0, 12, 45, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate(-50%, -8px)
        scale(0.985);

    transform-origin:
        top center;

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}


.nav-dropdown__panel::before {
    content: "";

    position:
        absolute;

    top:
        -6px;

    left:
        50%;

    width:
        12px;

    height:
        12px;

    border-top:
        1px solid rgba(103, 234, 255, 0.17);

    border-left:
        1px solid rgba(103, 234, 255, 0.17);

    background:
        #07183e;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* ==========================================================================
   11. PANEL INGRESAR
   ========================================================================== */

.nav-dropdown--access
.nav-dropdown__panel {
    right:
        0;

    left:
        auto;

    transform:
        translateY(-8px)
        scale(0.985);

    transform-origin:
        top right;
}


.nav-dropdown--access
.nav-dropdown__panel::before {
    right:
        1.5rem;

    left:
        auto;

    transform:
        rotate(45deg);
}


/* ==========================================================================
   12. PANEL ABIERTO
   ========================================================================== */

.nav-dropdown.is-open
.nav-dropdown__panel {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(-50%, 0)
        scale(1);
}


.nav-dropdown--access.is-open
.nav-dropdown__panel {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================================
   13. OPCIONES
   ========================================================================== */

.nav-dropdown__item {
    display:
        grid;

    grid-template-columns:
        2.2rem
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        0.85rem;

    width:
        100%;

    padding:
        0.9rem;

    border:
        1px solid transparent;

    border-radius:
        13px;

    color:
        #ffffff;

    text-decoration:
        none;

    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}


.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
    border-color:
        rgba(103, 234, 255, 0.18);

    background:
        linear-gradient(
            90deg,
            rgba(0, 187, 223, 0.13),
            rgba(0, 95, 186, 0.08)
        );

    color:
        #ffffff;

    box-shadow:
        inset 3px 0 0 var(--color-cyan-400);

    transform:
        translateX(4px);
}


.nav-dropdown__index {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.1rem;

    height:
        2.1rem;

    border:
        1px solid rgba(103, 234, 255, 0.25);

    border-radius:
        10px;

    background:
        rgba(103, 234, 255, 0.08);

    color:
        var(--color-cyan-300);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}


.nav-dropdown__item strong {
    display:
        block;

    margin-bottom:
        0.15rem;

    color:
        #ffffff;

    font-size:
        0.8rem;

    font-weight:
        700;

    line-height:
        1.3;
}


.nav-dropdown__item small {
    display:
        block;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.65rem;

    font-weight:
        500;

    line-height:
        1.45;
}


/* ==========================================================================
   14. BOTÓN HAMBURGUESA
   ========================================================================== */

.nav-toggle {
    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        1px solid rgba(103, 234, 255, 0.20);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        #ffffff;
}


.nav-toggle__icon {
    position:
        relative;

    width:
        20px;

    height:
        14px;
}


.nav-toggle__icon::before,
.nav-toggle__icon::after,
.nav-toggle__icon span {
    content:
        "";

    position:
        absolute;

    left:
        0;

    width:
        20px;

    height:
        2px;

    border-radius:
        2px;

    background:
        var(--color-cyan-300);

    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal),
        top var(--transition-normal);
}


.nav-toggle__icon::before {
    top:
        0;
}


.nav-toggle__icon span {
    top:
        6px;
}


.nav-toggle__icon::after {
    top:
        12px;
}


/* ==========================================================================
   15. TABLET
   ========================================================================== */

@media screen and (max-width: 1100px) {

    .corporate-header > .container {
        gap:
            1.2rem;
    }


    .corporate-nav > a,
    .nav-dropdown__trigger {
        padding-inline:
            0.65rem;

        font-size:
            0.75rem;
    }


    .brand-home__name {
        font-size:
            1rem;
    }

}


/* ==========================================================================
   16. MÓVIL
   ========================================================================== */

@media screen and (max-width: 820px) {

    .corporate-header {
        position:
            relative;
    }


    .corporate-header > .container {
        position:
            relative;

        flex-wrap:
            wrap;

        min-height:
            var(--header-height);

        padding-block:
            0.7rem;

        gap:
            0.7rem;
    }


    .nav-toggle {
        display:
            inline-flex;

        margin-left:
            auto;
    }


    .corporate-nav {
        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

        padding:
            0.5rem
            0
            0.8rem;

        gap:
            0.25rem;
    }


    .corporate-header.is-nav-open
    .corporate-nav {
        display:
            flex;
    }


    .corporate-nav > a {
        justify-content:
            flex-start;

        width:
            100%;

        min-height:
            46px;

        padding:
            0.75rem
            0.9rem;

        border-radius:
            var(--radius-sm);

        font-size:
            0.78rem;
    }


    .corporate-nav > a::after {
        display:
            none;
    }


    .nav-dropdown {
        display:
            block;

        width:
            100%;
    }


    .nav-dropdown__trigger {
        justify-content:
            space-between;

        width:
            100%;

        min-height:
            46px;

        padding:
            0.75rem
            0.9rem;

        border-radius:
            var(--radius-sm);

        font-size:
            0.78rem;

        text-align:
            left;
    }


    .nav-dropdown__trigger::after {
        display:
            none;
    }


    .nav-dropdown__trigger--access {
        margin:
            0.35rem
            0
            0;
    }


    .nav-dropdown__panel,
    .nav-dropdown--access
    .nav-dropdown__panel {
        position:
            relative;

        top:
            auto;

        right:
            auto;

        left:
            auto;

        width:
            100%;

        max-height:
            0;

        margin:
            0;

        padding:
            0 0.35rem;

        border-width:
            0;

        opacity:
            0;

        visibility:
            hidden;

        overflow:
            hidden;

        pointer-events:
            none;

        transform:
            none;

        box-shadow:
            none;

        transition:
            max-height 320ms ease,
            opacity 220ms ease,
            margin-top 320ms ease,
            padding 320ms ease;
    }


    .nav-dropdown__panel::before {
        display:
            none;
    }


    .nav-dropdown.is-open
    .nav-dropdown__panel,
    .nav-dropdown--access.is-open
    .nav-dropdown__panel {
        max-height:
            26rem;

        margin-top:
            0.35rem;

        padding:
            0.35rem;

        border-width:
            1px;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            none;
    }

}


/* ==========================================================================
   17. MÓVIL PEQUEÑO
   ========================================================================== */

@media screen and (max-width: 430px) {

    .header__logo {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .brand-home__name {
        font-size:
            0.95rem;
    }

}


/* ==========================================================================
   18. REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .corporate-nav > a,
    .corporate-nav > a::after,
    .nav-dropdown__trigger,
    .nav-dropdown__trigger::after,
    .nav-dropdown__chevron,
    .nav-dropdown__panel,
    .nav-dropdown__item,
    .nav-toggle__icon::before,
    .nav-toggle__icon::after,
    .nav-toggle__icon span {
        transition:
            none;
    }

}