/* ==========================================================================
   6. CABECERA — #site_header
   ========================================================================== */

#site_header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    /* Arranca transparente sobre el héroe y se opaca al hacer scroll. */
    background-color: transparent;
    transition:
        background-color var(--site-duration-medium) var(--site-ease-out),
        box-shadow var(--site-duration-medium) var(--site-ease-out);
}

/* Estado sólido, lo activa assets/js/global.js al desplazar la página. */
#site_header.is-scrolled {
    background-color: rgba(11, 18, 32, 0.92);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

/* 6.1 Contenedor */

#site_header .site-header__shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space-5);
    min-height: var(--site-header-height);
}

/* 6.2 Logotipo (wordmark, el cliente no dispone de logo) */

#site_header .site-header__logo {
    display: flex;
    align-items: center;
    gap: var(--site-space-3);
    flex: 0 0 auto;
    text-decoration: none;
}

#site_header .site-header__logo-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: var(--site-blue-500);
}

#site_header .site-header__logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#site_header .site-header__logo-name {
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-display);
    font-size: 1.375rem;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
}

#site_header .site-header__logo-tag {
    color: var(--site-ink-muted-dark);
    font-family: var(--site-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.26em;
    line-height: 1;
    text-transform: uppercase;
}

/* 6.3 Navegación de escritorio */

#site_header .site-header__nav {
    display: none;
}

#site_header .site-header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--site-space-6);
}

#site_header .site-header__nav-link {
    position: relative;
    display: block;
    padding-block: var(--site-space-2);
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

/* Subrayado animado del enlace. */
#site_header .site-header__nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--site-blue-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--site-duration-medium) var(--site-ease-out);
}

#site_header .site-header__nav-link:hover::after,
#site_header .site-header__nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

#site_header .site-header__nav-link[aria-current="page"] {
    color: var(--site-blue-100);
}

/* 6.4 Acciones de la derecha */

#site_header .site-header__actions {
    position: relative;
    /* Por encima del panel (110), para que el botón de cierre siga visible
       y pulsable cuando el menú está desplegado. */
    z-index: 120;
    display: flex;
    align-items: center;
    gap: var(--site-space-4);
    flex: 0 0 auto;
}

#site_header .site-header__phone {
    display: none;
    align-items: center;
    gap: var(--site-space-3);
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-decoration: none;
}

#site_header .site-header__phone-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--site-blue-500);
}

#site_header .site-header__phone:hover {
    color: var(--site-blue-100);
}

/* 6.5 Botón hamburguesa */

#site_header .site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--site-radius-pill);
    background-color: transparent;
    cursor: pointer;
    transition:
        background-color var(--site-duration-fast) var(--site-ease-out),
        border-color var(--site-duration-fast) var(--site-ease-out);
}

#site_header .site-header__toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

#site_header .site-header__toggle-bars {
    position: relative;
    width: 20px;
    height: 12px;
    flex: 0 0 20px;
}

#site_header .site-header__toggle-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--site-ink-on-dark);
    transition:
        transform var(--site-duration-medium) var(--site-ease-out),
        opacity var(--site-duration-fast) var(--site-ease-out);
}

#site_header .site-header__toggle-bar:nth-child(1) {
    top: 0;
}

#site_header .site-header__toggle-bar:nth-child(2) {
    top: 5px;
}

#site_header .site-header__toggle-bar:nth-child(3) {
    top: 10px;
}

/* Hamburguesa convertida en equis mientras el panel está abierto. */
#site_header .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

#site_header .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

#site_header .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* 6.6 Barra de progreso de lectura */

#site_header .site-header__progress {
    height: 2px;
    background-color: var(--site-blue-500);
    /* assets/js/animations.js escala este valor con el scroll. */
    transform: scaleX(0);
    transform-origin: left center;
}

/* 6.7 Panel del menú móvil */

#site_header .site-header__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: var(--site-space-7);
    width: min(88vw, 400px);
    /* El relleno superior deja libre la franja de la cabecera, para que los
       enlaces no queden debajo del botón de cierre. */
    padding: calc(var(--site-header-height) + var(--site-space-5)) var(--site-gutter) var(--site-space-7);
    background-color: var(--site-night-900);
    border-left: 1px solid var(--site-night-700);
    overflow-y: auto;
    /* Oculto por defecto; menu-mobile.js alterna el atributo hidden. */
    transform: translateX(100%);
    transition: transform var(--site-duration-medium) var(--site-ease-out);
}

#site_header .site-header__panel[hidden] {
    display: none;
}

#site_header .site-header__panel.is-open {
    transform: translateX(0);
}

#site_header .site-header__panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-2);
}

#site_header .site-header__panel-link {
    display: block;
    padding-block: var(--site-space-3);
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

#site_header .site-header__panel-link:hover,
#site_header .site-header__panel-link[aria-current="page"] {
    color: var(--site-blue-500);
}

#site_header .site-header__panel-contact {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-3);
    padding-top: var(--site-space-6);
    border-top: 1px solid var(--site-night-700);
}

#site_header .site-header__panel-contact-link {
    color: var(--site-ink-muted-dark);
    font-family: var(--site-font-mono);
    font-size: 0.875rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

#site_header .site-header__panel-contact-link:hover {
    color: var(--site-ink-on-dark);
}

/* 6.8 Velo tras el panel */

#site_header .site-header__overlay {
    position: fixed;
    inset: 0;
    z-index: 105;
    background-color: rgba(11, 18, 32, 0.6);
    backdrop-filter: blur(2px);
    border: 0;
    padding: 0;
    cursor: pointer;
}

#site_header .site-header__overlay[hidden] {
    display: none;
}

/* 6.9 Responsive de la cabecera */

@media (min-width: 1024px) {
    #site_header .site-header__nav {
        display: block;
    }

    #site_header .site-header__phone {
        display: inline-flex;
    }

    #site_header .site-header__toggle {
        display: none;
    }
}