.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    transition: background-color 0.3s ease;
    text-wrap: nowrap;
}

.navbar.transparent {
    background-color: rgba(0, 8, 20, 0.5);
    backdrop-filter: blur(1px);
}

.navbar.transparent .topMenu ul li a {
    color: #fff;
}

.navbar.transparent .bottomMenu ul li a,
.navbar.transparent .topMenu ul li,
.navbar.transparent .bottomMenu ul li,
.navbar.transparent .topMenu ul li a,
.navbar.transparent .menuSection .topMenu ul li a,
.navbar.transparent .menuSection .bottomMenu ul li a,
.navbar.transparent .submenu li a {
    color: #fff !important;
}

.navbar.solid {
    background-color: rgb(236, 240, 241);
}

.navbar.transparent .logo img {
    filter: brightness(0) invert(1);
}

.navbar.solid .logo img {
    filter: none;
}

.logo img {
    box-sizing: border-box;
    padding-top: 2vh;
    width: 28vh;
}

.menuSection {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    align-items: flex-end;
    width: 40%;
    font-family: var(--paragraph-font);
}

.topMenu ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2vh;
    font-size: 2vh;
    color: #3a434b;
    font-family: var(--paragraph-font);
}

.topMenu ul li a {
    color: #3a434b;
}

.topMenu ul li:hover a {
    color: #000814;
}

.bottomMenu ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 2vh;
    font-size: 3vh;
    font-family: var(--paragraph-font);
}

.bottomMenu ul li a {
    color: #000814;
    transition: all 0.2s ease-in-out;
}

.bottomMenu ul li:not(.getQuote) a {
    position: relative;
    overflow: hidden;
}

.bottomMenu ul li:not(.getQuote) a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.4vh;
    width: 100%;
    background-color: var(--yellow-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.bottomMenu ul li:not(.getQuote) a:hover::after {
    transform: scaleX(1);
}

.bottomMenu ul li a:hover {
    color: #000814;
}

.bottomMenu ul li.getQuote a {
    background-color: #003566;
    color: #fff;
    padding: 1vh;
    transition: all 0.2s ease-in-out;
}

.bottomMenu ul li.getQuote a:hover {
    background-color: var(--yellow-color);
    color: #000814;
}

.bottomMenu li {
    position: relative;
}

.bottomMenu .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background-color: #ecf0f1;
    flex-direction: column;
    min-width: 150px;
    align-items: center;
    text-align: center;
    padding: 1.5vh 2vh;
    gap: 1vh;
    margin-top: -1px;
}

.bottomMenu .submenu.open {
    display: block;
}

/* Submenú animación y hover */
.submenu li a {
    display: inline-block; /* solo tan ancho como el texto */
    color: #000814;
    font-size: 2vh;
    text-align: center;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.submenu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.4vh;
    width: 100%;
    background-color: var(--yellow-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.submenu li a:hover::after {
    transform: scaleX(1);
}

.submenu li a:hover {
    color: var(--yellow-color);
}

/* Submenú cuando navbar es transparente */
.navbar.transparent .submenu {
    background-color: rgba(0, 8, 20, 0.5);
    backdrop-filter: blur(1px);
}

/* ------------------- RESPONSIVE ------------------- */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
}

.hamburger span {
    height: 2.5px;
    width: 25px;
    background-color: #000814;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(2.5px, 2.5px);
    opacity: 1;
}

.hamburger.active span:nth-child(2) {
    transform: rotate(-45deg) translate(2.5px, -2.5px);
    opacity: 1;
}

@media (max-width: 900px) {

    .logo img {
        width: 20vh;
        box-sizing: border-box;
        padding-top: 1vh;
    }

    .navbar {
        justify-content: space-around;
        gap: 40%;
        height: 10vh;
    }

    .navbar.transparent {
        height: 10vh;
        padding: 0;
    }

    .navbar.transparent .hamburger span {
        background-color: #ffffff; /* blanco */
    }
    
    .navbar.solid .hamburger span {
        background-color: #000814; /* azul oscuro (ya lo tienes por defecto) */
    }    

    .menuSection {
        position: absolute;
        top: 10vh;
        right: 0;
        width: auto;
        height: 90vh;
        background-color: rgb(236, 240, 241);
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
        margin-top: -1px;
        display: none;
        animation: slideDown 0.3s ease forwards;
    }

    .menuSection.active {
        display: flex;
    }

    .topMenu ul,
    .bottomMenu ul {
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;
        padding: 15px 4vh 0;
    }

    .topMenu {
        padding: 3vh 0;
    }

    .bottomMenu ul li {
        font-size: 3vh;
        text-align: right;
    }

    .submenu {
        position: static !important;
        transform: none !important;
        display: none;
        flex-direction: column;
        background-color: transparent;
        gap: 1vh;
        text-align: right;
        width: 100%;
        margin-left: auto;
        padding: 0;
    }

    .submenu.open {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        background-color: #ecf0f1;
        text-wrap: wrap;
        max-width: 17vh;
    }

    .submenu li a {
        font-size: 2vh;
        text-align: right;
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
    }

    .has-submenu > a {
        position: relative;
        text-align: right;
    }

    .hamburger {
        display: flex;
    }
}

/* Despliegue suave */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}