/* ============================
   Estilos del menú de navegación
   ============================ */

/* Contenedor general del logo + menú */
.gto-header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    flex-wrap: nowrap; /* ⬅️ clave */
}

/* Contenedor principal centrado */
.nav-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* ============================
   Logo
   ============================ */
.menu-logo img,
.gto-logo a,
.gto-hmenu .menu-logo a {
    height: 50px;
    width: auto;
}

/* ============================
   Navegación principal
   ============================ */
.gto-nav {
    display: flex;
    justify-content: flex-end;
    width: auto; /* ⬅️ antes 100% */
    flex: unset; /* ⬅️ antes flex:1 */
}

/* Inner para logo + menú */
.gto-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* separa logo y menú */
    width: 100%;
}

/* ============================
   Lista principal del menú
   ============================ */
.gto-hmenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}


    /* Elementos de menú */
    .gto-hmenu li {
        position: relative;
    }

    /* Enlaces principales */
    .gto-hmenu > li > a {
        display: flex;
        align-items: center;
        text-decoration: none;
        text-transform: uppercase;
        color: #004b87;
        font-family: 'Proxima Nova', sans-serif;
        font-weight: bold;
        font-size: 14px;
        line-height: 60px;
        padding: 0 5px;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

        /* Hover de los enlaces principales */
        .gto-hmenu > li > a:hover {
            color: #0b3bb2;
            background: #f0f6ff;
            border-radius: 4px;
        }

    /* ============================
   Submenús
   ============================ */

    .gto-hmenu li ul {
        display: none;
        position: absolute;
        background: #fff;
        list-style: none;
        padding: 10px 0;
        margin: 0;
        min-width: 320px;
        box-shadow: 0 2px 6px rgba(0,0,0,.1);
        top: 100%;
        left: 0;
        z-index: 2000;
    }
    
    /* Mostrar submenú al hover */
    .gto-hmenu li:hover > ul {
        display: block;
    }

    /* Enlaces del submenú */
    .gto-hmenu li ul li a {
        display: block;
        padding: 8px 15px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        font-family: 'Proxima Nova', sans-serif;
        font-weight: bold;
    }

        /* Hover submenú */
        .gto-hmenu li ul li a:hover {
            background: #f0f0f0;
            color: #1266FF;
        }

/* ============================
   Responsividad
   ============================ */


/* ============================
   Móviles (≤ 768px)
   ============================ */
@media (max-width: 768px) {

    /* Contenedor general: logo + menú */
    .gto-header-nav {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    /* Logo centrado */
    .menu-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

        .menu-logo img {
            height: 40px; /* Tamaño más adecuado para móvil */
            width: auto;
        }

    /* Contenedor del menú */
    .gto-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 5px;
    }

    /* Lista del menú */
    .gto-hmenu {
        flex-direction: column; /* Menú vertical */
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 8px;
        padding: 0;
        margin: 0;
    }

        .gto-hmenu > li > a {
            width: 100%;
            text-align: center;
            padding: 12px 0;
            line-height: normal;
            border-bottom: 1px solid #eee; /* Separa visualmente opciones */
        }

        /* Submenús ahora aparecen en bloque */
        .gto-hmenu li ul {
            position: static;
            width: 100%;
            box-shadow: none;
            text-align: center;
        }
}


.gto-nav-wrapper {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 1000;
}

/* ============================
   NAV / HEADER - MOBILE FIX
   ============================ */
@media (max-width: 768px) {

    /* Wrapper del nav ocupa todo el ancho real */
    .gto-nav-wrapper {
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 1000;
    }

        /* Quitamos el límite del container SOLO en móvil */
        .gto-nav-wrapper .container {
            max-width: 100% !important;
            width: 100%;
            padding-left: 12px;
            padding-right: 12px;
            margin: 0 auto;
        }

    /* Header completo en columna (como el footer) */
    .gto-header-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    /* Logo centrado arriba */
    .menu-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

        .menu-logo img {
            height: 42px;
            width: auto;
            max-width: 100%;
        }

    /* Contenedor del menú */
    .gto-nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Menú en una sola columna */
    .gto-hmenu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0;
        margin: 0;
    }

        .gto-hmenu > li {
            width: 100%;
        }

            .gto-hmenu > li > a {
                width: 100%;
                justify-content: center;
                padding: 14px 0;
                line-height: normal;
                border-bottom: 1px solid #e5e5e5;
            }

        /* Submenús también en columna */
        .gto-hmenu li ul {
            position: static;
            width: 100%;
            box-shadow: none;
            background: #f9f9f9;
        }

            .gto-hmenu li ul li a {
                text-align: center;
            }
}


/* =========================
   BOTÓN HAMBURGUESA
   ========================= */

.gto-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    color: #1266FF;
    cursor: pointer;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    .gto-header-nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Mostrar botón */
    .gto-toggle {
        display: block;
    }

    /* Ocultar menú por defecto */
    .gto-nav {
        display: none;
        width: 100%;
    }

        /* Cuando esté activo */
        .gto-nav.active {
            display: block;
        }

    .gto-hmenu {
        flex-direction: column;
        width: 100%;
    }

        .gto-hmenu > li > a {
            text-align: center;
            padding: 14px 0;
            border-bottom: 1px solid #eee;
        }
}