.header-page {
    background-color: var(--color-ocho);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.container-img {
    max-width: 150px;
    max-height: 100%;
}

.navbar-brand {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}

.img-header {
    max-width: 100%;
}

.img-header:hover {
    transform: scale(1.05);
}

.navbar-nav .nav-link {
    color: var(--color-text-primary) !important;
    font-size: 1.1rem;
    padding: 1rem 1.2rem !important;
    text-transform: uppercase;
    position: relative;
    font-family: var(--font-primary), sans-serif;
}

/*animación de la rayita dorada */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 0;
    height: 2px;
    transition: width 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
}

/* Crece al pasar el mouse */
.navbar-nav .nav-link:hover::after {
    width: 50%;
}

.navbar-nav .nav-link:hover {
    color: #d4af37 !important;
}


/* --- MENU DESPLEGABLE (DROPDOWN) --- */
.dropdown-menu {
    background-color: var(--color-ocho);
    border-radius: 0;
    padding: 0;
    border: none;
    margin-top: 0;
}

.dropdown-item {
    color: var(--color-text-primary) !important;
    padding: 12px 20px;
    transition: 0.2s;
}

.dropdown-item:hover {
    background-color: #d4af37;
    color: black;
}

/* --- LÓGICA PC (ESCRITORIO) --- */
@media (min-width: 992px) {

    /* Esto hace que se abra al pasar el mouse sin click */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Asegura que estén pegados */
    }

    /* Ajuste fino para que el submenú no tape la barra */
    .dropdown-menu {
        margin-top: -1px;
    }
}

/* --- LÓGICA MÓVIL --- */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--color-ocho);
        padding-bottom: 20px;
        border-top: 1px solid #333;
        text-align: center;
    }

    .navbar-nav .nav-link {
        padding: 15px 0 !important;
        border-bottom: 1px solid #222;
    }

    .dropdown-menu {
        text-align: center;
    }
}