/* ===============================
   HEADER Y MAIN
   =============================== */
body.menu-open {
    overflow: hidden;
}

/* ===============================
   ALTURA HEADER Y MAIN
   =============================== */
header {
    height: auto;
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 1000;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: height 0.35s ease, background 0.3s ease;
}


/* =================================
   FIX ADMIN TOOLBAR DRUPAL
================================= */

body.toolbar-fixed #site-header {
    top: 39px;
    /* altura barra normal */
}

/* Cuando la toolbar está expandida (modo admin) */
body.toolbar-fixed.toolbar-tray-open #site-header {
    top: 79px;
}

/* ===============================
   HEADER BASE
   =============================== */

.nav-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height);
    padding: 0 10px;
    display: flex;
    align-items: center;
    z-index: 500;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width:768px) {
    .nav-header {
        padding: 0 40px;
    }
}


/* ===============================
   BRANDING
   =============================== */
.nav-logo-img .view-content {
    display: flex;
    gap: var(--brand-gap);
}

.nav-logo-img img {
    height: var(--header-img);
    width: auto;
    display: block;
    object-fit: contain;
}

/* ===============================
   TOGGLER
   =============================== */

.navbar-toggler {
    position: relative;
    color: white;
    left: 0px;
    top: 0px;
}
button.navbar-toggler {
    position: relative;
    top: 20px;
    width: fit-content;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon {
    background-image: url('../images/close.svg') !important;
}
.navbar-toggler[aria-expanded=false] .navbar-toggler-icon {
    background-image: url('../images/toggler.svg') !important;
}
.navbar-toggler .navbar-toggler-icon:before {
    position: relative;
    color: white;
    left: -60px;
    top: 5px;
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before {
    content: '';
}

.navbar-toggler[aria-expanded=false] .navbar-toggler-icon:before {
    content: 'MENU';
}


@media (max-width: 1399.98px) {

    .navbar-toggler {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 600;
        border: 1px solid #fff;
        background: transparent;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
}

@media (min-width: 1400px) {
    .navbar-toggler {
        display: none;
    }
}


/* ===============================
   MENÚ 
   =============================== */
.header-top {
    padding: 6px 0;
}

.header-nav {
    padding: 0;
}
header .navbar-nav .nav-link {
    font-size: 0.85rem;
font-weight: 400;
letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* ===============================
   MENÚ MÓVIL
   =============================== */

@media (max-width: 1399.98px) {

    /* Oculto por defecto */
    header ul.navbar-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: rgba(5, 5, 5, 0.97);
        padding: 30px 40px 40px;
        gap: 18px;
    }

    /* Visible cuando Bootstrap añade .show */
    header .navbar-collapse.show ul.navbar-nav {
        display: flex;
    }

    /* Overlay */
    header .navbar-collapse {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background: rgba(5, 5, 5, 0.97);
        z-index: 550;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Items */
    header ul.navbar-nav li {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    header ul.navbar-nav li a {
        display: block;
        width: 100%;
        font-size: 0.95rem;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    /* Área táctil correcta en móvil */
    header ul.navbar-nav li > a,
    header ul.navbar-nav .dropdown-item {
        padding: 14px 0;
    }

    ul.dropdown-menu.nav-level-1.show .dropdown-item {
        padding-left: 14px;
    }

    /* Dropdown visualmente alineado */
    .dropdown-menu {
        padding-left: 0;
    }

    .dropdown-menu .dropdown-item {
        padding-left: 20px;
        font-size: 0.95rem;
        text-transform: none;
        letter-spacing: normal;
    }

}

/* ===============================
   ANIMACIÓN MENÚ
   =============================== */

@media (max-width: 1399.98px) {

    header .navbar-collapse {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    header .navbar-collapse.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}


/* Icono hamburguesa visible */
.navbar-toggler.collapsed .icon-menu {
    opacity: 1;
    transform: scale(1);
}

/* Icono cierre oculto */
.navbar-toggler.collapsed .icon-close {
    opacity: 0;
    transform: scale(0.8);
}

/* Hamburguesa se va rápido */
.navbar-toggler:not(.collapsed) .icon-menu {
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 120ms ease-out,
        transform 120ms ease-out;
}

/* Cierre entra con retraso */
.navbar-toggler:not(.collapsed) .icon-close {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 220ms ease-out 140ms,
        transform 220ms cubic-bezier(.22, 1, .36, 1) 140ms;
}

.icon-close {
    color: #fff;
    width: 24px;
    height: 24px;
}

.icon-menu {
    width: 24px;
    height: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .navbar-toggler * {
        transition: none !important;
    }
}



/* ===============================
   MENÚ DESKTOP
   =============================== */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
}


@media (min-width: 1400px) {

    header ul.navbar-nav {
        display: flex !important;
        flex-direction: row;
        gap: 20px;
        padding: 0;
        background: transparent;
        position: static;
        width: auto;
    }

    header .navbar-collapse {
        position: static;
        width: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}


/* ===============================
   FIX TOGGLER 992px – 1399px
   =============================== */

@media (min-width: 992px) and (max-width: 1399.98px) {

    .navbar-expand-lg .navbar-toggler {
        display: block !important;
    }
}




/* ===============================
   COLOR MENU
   =============================== */
/* ===============================
   MENÚ DESKTOP REFINADO
================================= */

@media (min-width:1400px) {
    header ul.navbar-nav {
        gap: 28px;
        margin: 10px 0;
    }

    header ul.navbar-nav a {
        font-size: 0.9rem;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        position: relative;
        transition: color .25s ease;
    }

    /* Subrayado elegante */
    header .navbar-nav .nav-link {
        position: relative;
    }

    /* Línea base */

    header .navbar-nav .nav-link:not(.dropdown-toggle)::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 1px;
        opacity: 0.7;
        background: var(--accent-gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
opacity: 0;
    }

    /* Hover y active*/
    header .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
    header .navbar-nav .nav-link:not(.dropdown-toggle).is-active::after,
    header .navbar-nav .nav-link:not(.dropdown-toggle).active::after {
        transform: scaleX(1);
        opacity: 1;
    }


}

/* ===============================
   ULTIMO ELEMENTO MENU PRINCIPAL
   =============================== */
@media (max-width: 1399.98px) {
    header ul.navbar-nav {
        justify-content: flex-start !important;
    }

    header ul.navbar-nav.nav-level-0 li:last-child {
        margin: 0px;
        padding: 12px 20px;
        border: 1px solid var(--text-secondary);
    }

    header ul.navbar-nav.nav-level-0 li:last-child a {
        width: auto;
        padding: 0;
    }

    header ul.navbar-nav.nav-level-0 li:last-child:hover {
        background: transparent;
        border: 1px solid var(--accent-gold);
    }

}

/* ===============================
   DROPDOWN
   =============================== */

.dropdown-menu {
    background: #0c0c0c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    padding: 10px 0;
}

.dropdown-item {
    padding: 10px 18px;
    transition: background .2s ease, color .2s ease;
}

.dropdown-item:hover {
    background: rgba(255, 215, 0, 0.08);
    color: var(--accent-gold);
}


/* ===============================
   HEADER ALTURA REAL
================================= */

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* El header ahora crece según su contenido */
.header-top {
    padding: 6px 0;
}

.header-nav {
    padding: 0;
}

/* Compensación automática */
main {
    padding-top: 140px;
    /* valor inicial seguro */
}

/* =========================
   LOGOS
========================= */

.nav-logo-img .view-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-logo-img img {
    max-height: 90px;
    width: auto;
}

/* =========================
   SELECTOR IDIOMA GTRANSLATE
========================= */

.block-gtranslate {
    margin-left: auto;
}

.gt_selector {
    border: 1px solid #ddd;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    background: #f8f9fa;
}


/* =========================
   SELECTOR IDIOMA DRUPAL
========================= */

select#edit-lang-dropdown-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: black;
    background-image: url("/themes/custom/b5subtheme/images/chevron-down-white-solid.svg");
    background-repeat: no-repeat;
    background-position: right 10px center;

    padding-right: 30px;

    color: white;
    text-transform: uppercase;
}

/* =========================
   NAVBAR
========================= */

.header-nav {
    background: transparent;
}

.navbar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: 12px 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}


.navbar-nav .nav-link:hover,
.navbar-nav li.nav-item.dropdown a:hover {
    color: var(--accent-gold);
}

.navbar-nav .nav-link.is-active,
.navbar-nav .nav-link.show,
a.nav-link.active.dropdown-toggle {
    color: var(--accent-gold) !important;
}

/* Dropdown */

.dropdown-menu {
    border-radius: 10px;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.dropdown-item {
    color: white !important;
}

.dropdown-item:hover,
.dropdown-item:active {
    background: black !important;
    color: var(--accent-gold) !important;
}

/* Flecha dropdown */

.navbar-nav .dropdown-toggle::after {
    border: none;
    content: "";
    display: inline-block;
    margin-left: .5rem;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
    position: relative;
    top: -2px;
}

/* Cuando está abierto */
.navbar-nav .dropdown-toggle.show::after {
    transform: rotate(-135deg);
}




/********SELECTOR DE IDIOMA**********/
.gt_selector {
    background-color: transparent;
    border: 1px solid #1a191a;
    color: #fff;
    font-size: 20px;
    padding: 0px;
    width: 80px;
    background-image: url(data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='white'/%3e%3c/svg%3e);
    font-weight: 300;
    height: 30px;
    margin-right: 20px;
}

option {
    background: black;
    color: white;
    font-size: 0.8em;
}