/* ============================================
   HEADER DESKTOP - SHA THEME 2025
   ============================================ */

/* --- 1. Estado Base (Transparente por defecto) --- */
.site-header-desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1015;
    /* Por encima de todos los bloques del menú (1002, 1001, 1000) pero debajo de la promo bar (1020) */
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, top 0.3s ease-in-out, transform 0.3s ease-in-out;
    border-bottom: 1px solid transparent;
    /* Para la transición cuando se vuelve blanco */
}

/* Ajuste del header cuando hay promo bar */
body:has(.promo-bar) .site-header-desktop {
    top: 40px;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, top 0.3s ease-in-out, transform 0.3s ease-in-out;
}

body:has(.promo-bar).logged-in .site-header-desktop {
    top: 72px;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, top 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Ocultar header cuando se hace scroll hacia abajo (desktop) */
@media (min-width: 1024px) {
    body.header-hidden:not(:has(.promo-bar)) .site-header-desktop {
        transform: translateY(-96px) !important;
        /* Altura del header sin promo bar */
    }

    body.header-hidden:has(.promo-bar):not(.logged-in) .site-header-desktop {
        transform: translateY(-136px) !important;
        /* Ocultar completamente: 40px promo + 96px header */
    }

    body.header-hidden:has(.promo-bar).logged-in .site-header-desktop {
        transform: translateY(-168px) !important;
        /* Ocultar completamente: 72px promo+admin + 96px header */
    }

    /* Ocultar promo bar cuando se hace scroll hacia abajo */
    body.header-hidden:has(.promo-bar):not(.logged-in) .promo-bar {
        transform: translateY(-40px) !important;
        /* Altura de la promo bar */
    }

    body.header-hidden:has(.promo-bar).logged-in .promo-bar {
        transform: translateY(-72px) !important;
        /* Altura de la promo bar + admin bar */
    }
}

/* Ajuste del off-canvas menu cuando hay promo bar */
body:has(.promo-bar) .off-canvas-menu {
    top: 136px;
    /* 40px promo bar + 96px header */
}

body:has(.promo-bar).logged-in .off-canvas-menu {
    top: 168px;
    /* 72px promo bar + 96px header */
}

/* Elementos en estado transparente */
.site-header-desktop .hamburger-line {
    background-color: #fff;
}

.site-header-desktop .logo .logo-white {
    display: block;
}

.site-header-desktop .logo .logo-black {
    display: none;
}

.site-header-desktop .cta-book {
    color: #fff;
    border-color: #fff;
}

/* --- 2. Estado Activo (Fondo Blanco) --- */
/* Se activa con scroll, al abrir el menú o al abrir el selector de idiomas */
.site-header-desktop.is-scrolled,
body.no-home .site-header-desktop,
body.off-canvas-open .site-header-desktop,
body.lang-menu-open .site-header-desktop {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    /* Mismo estilo que los bordes laterales de los submenús */
}

/* Elementos en estado activo (fondo blanco) */
.site-header-desktop.is-scrolled .hamburger-line,
body.no-home .site-header-desktop .hamburger-line,
body.off-canvas-open .site-header-desktop .hamburger-line,
body.lang-menu-open .site-header-desktop .hamburger-line {
    background-color: #000;
}

.site-header-desktop.is-scrolled .logo .logo-white,
body.no-home .site-header-desktop .logo .logo-white,
body.off-canvas-open .site-header-desktop .logo .logo-white,
body.lang-menu-open .site-header-desktop .logo .logo-white {
    display: none;
}

.site-header-desktop.is-scrolled .logo .logo-black,
body.no-home .site-header-desktop .logo .logo-black,
body.off-canvas-open .site-header-desktop .logo .logo-black,
body.lang-menu-open .site-header-desktop .logo .logo-black {
    display: block;
}

.site-header-desktop.is-scrolled .cta-book,
body.no-home .site-header-desktop .cta-book,
body.off-canvas-open .site-header-desktop .cta-book,
body.lang-menu-open .site-header-desktop .cta-book {
    background-color: #2c2c2c;
    /* Fondo gris cuando la cabecera es blanca */
    color: #ffffff;
    /* Letras blancas */
    border-color: #2c2c2c;
    /* Borde gris */
}

.site-header-desktop.is-scrolled .cta-book:hover,
body.no-home .site-header-desktop .cta-book:hover,
body.off-canvas-open .site-header-desktop .cta-book:hover,
body.lang-menu-open .site-header-desktop .cta-book:hover {
    background-color: #555555;
    /* Fondo gris más claro en hover */
    border-color: #555555;
    color: #ffffff;
}

/* --- 3. Contenedor y Layout --- */
.site-header-desktop .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    /* Altura fija de la cabecera */
}

.site-header-desktop .header-left,
.site-header-desktop .header-right {
    flex: 1;
}

.site-header-desktop .header-center {
    flex: 0 1 auto;
}

.site-header-desktop .header-left {
    display: flex;
    align-items: center;
    gap: 40px;
    /* Separación entre hamburger y selector de idiomas */
    padding: 0;
    /* Sin padding propio, usar el del contenedor */
}

.site-header-desktop .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* --- 4. Componentes Específicos --- */
.logo a {
    display: inline-block;
    height: auto;
    width: 130px !important;
}

.logo img {
    height: 100%;
    width: 130px !important;
    display: block;
}

.cta-book {
    padding: 12px 24px;
    /* Mismo padding que botones.css */
    border-radius: 4px;
    /* Border radius de botones.css */
    border: 1px solid;
    /* El color se define en los estados */
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    background: none;
    /* Transparente por defecto */
    text-transform: uppercase;
    /* Texto en mayúsculas */
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    font-family: inherit;
}

.cta-book,
button.cta-book {
    border: 1px solid;
    background: none;
    font-family: inherit;
}

/* Mostrar/ocultar elementos según dispositivo */
.solo-desktop {
    display: block !important;
}

.solo-movil {
    display: none !important;
}