/*==================================================
    NUNTIUS MEGA MENU
==================================================*/

.ce-menu{

    position:sticky;
    top:0;
    z-index:9999;

    background:var(--color-primary-dark);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.ce-menu-inner{

    min-height:62px;

    display:flex;

    align-items:center;

}

.ce-menu-nav{

    width:100%;

}

.ce-menu-nav > ul{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0;

    padding:0;

    list-style:none;

}

.ce-menu-nav > ul > li{

    position:relative;

}

.ce-menu-nav > ul > li > a{

    display:block;

    padding:22px 22px;

    text-decoration:none;

    color:#fff;

    font-family:var(--font-menu);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    transition:var(--transition);

}

.ce-menu-nav > ul > li:hover > a{

    color:var(--color-accent);

}

.ce-menu-nav > ul > li.active > a{

    color:var(--color-accent);

}

.ce-menu-nav > ul > li::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:0;

    height:3px;

    background:var(--color-accent);

    transform:scaleX(0);

    transition:var(--transition);

}

.ce-menu-nav > ul > li:hover::after,

.ce-menu-nav > ul > li.active::after{

    transform:scaleX(1);

}

/*=========================================
        SUBMENÚ
=========================================*/

.ce-menu-nav ul ul{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:290px;

    padding:14px 0;

    margin:0;

    list-style:none;

    background:#fff;

    border-radius:10px;

    border:1px solid var(--color-border);

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.ce-menu-nav li:hover>ul{

    display:block;

}

.ce-menu-nav ul ul li{

    width:100%;

}

.ce-menu-nav ul ul a{

    display:block;

    padding:13px 24px;

    color:var(--color-text);

    text-decoration:none;

    font-family:var(--font-body);

    font-size:17px;

    transition:var(--transition);

}

.ce-menu-nav ul ul a:hover{

    background:var(--color-background);

    color:var(--color-primary);

    padding-left:30px;

}

/*=========================================
        BOTÓN MÓVIL
=========================================*/

.ce-menu-toggle{

    display:none;

}

@media(max-width:992px){

    .ce-menu-inner{

        justify-content:space-between;

    }

    .ce-menu-toggle{

        display:flex;

        flex-direction:column;

        gap:5px;

        background:none;

        border:none;

        cursor:pointer;

    }

    .ce-menu-toggle span{

        width:28px;

        height:3px;

        background:#fff;

        display:block;

        border-radius:2px;

    }

    .ce-menu-nav{

        display:none;

    }

}


/* ==========================================================
   NUNTIUS — MENÚ MÓVIL DESPLEGABLE
========================================================== */

@media(max-width:992px){

    .ce-menu-inner{
        position:relative;
    }

    .ce-menu-nav.is-open{
        display:block;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        z-index:9999;

        width:100%;
        background:#0b274f;

        box-shadow:0 12px 25px rgba(0,0,0,.18);
    }

    .ce-menu-nav.is-open > ul{
        display:flex;
        flex-direction:column;

        width:100%;
        margin:0;
        padding:8px 0;
    }

    .ce-menu-nav.is-open > ul > li{
        display:block;
        width:100%;
        margin:0;
    }

    .ce-menu-nav.is-open > ul > li > a{
        display:block;
        width:100%;

        padding:14px 20px;

        color:#fff;
        text-align:left;

        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .ce-menu-nav.is-open > ul > li > a:hover{
        color:#c7a55b;
        background:rgba(255,255,255,.05);
    }

}


/* ==========================================================
   NUNTIUS — SUBMENÚ EDITORIAL
========================================================== */


/* Texto accesible de Joomla: debe existir pero no verse */

.ce-menu .visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


/* ----------------------------------------------------------
   ELEMENTO PADRE
---------------------------------------------------------- */

@media(min-width:993px){

    .ce-menu-nav > ul > li.deeper.parent{
        display:flex;
        align-items:center;
        position:relative;
    }


    /*
     * Economía continúa siendo un enlace normal.
     */

    .ce-menu-nav > ul > li.deeper.parent > a{
        padding-right:7px;
    }


    /*
     * Flecha nativa de Joomla
     */

    .ce-menu-nav > ul > li.deeper.parent >
    .mod-menu__toggle-sub{

        display:flex;
        align-items:center;
        justify-content:center;

        width:25px;
        height:25px;

        margin-right:12px;
        padding:0;

        border:0;
        background:transparent;

        color:#fff;

        cursor:pointer;
    }


    /*
     * Ocultamos el icono Joomla y hacemos
     * nuestra propia flecha limpia.
     */

    .ce-menu-nav
    .mod-menu__toggle-sub
    .icon-chevron-down{
        display:none;
    }


    .ce-menu-nav
    .mod-menu__toggle-sub::before{
        content:"";

        width:7px;
        height:7px;

        border-right:1.5px solid currentColor;
        border-bottom:1.5px solid currentColor;

        transform:
            translateY(-2px)
            rotate(45deg);

        transition:
            transform .2s ease,
            color .2s ease;
    }


    .ce-menu-nav > ul > li.deeper.parent:hover >
    .mod-menu__toggle-sub{
        color:#c7a55b;
    }


    /* ------------------------------------------------------
       PANEL DESPLEGABLE
    ------------------------------------------------------ */

    .ce-menu-nav > ul > li.deeper.parent >
    ul.mod-menu__sub{

        display:block;

        position:absolute;

        top:100%;
        left:0;

        min-width:245px;
        width:max-content;
        max-width:330px;

        margin:0;
        padding:9px 0;

        background:#0b274f;

        border:0;
        border-top:3px solid #c7a55b;
        border-radius:0 0 8px 8px;

        box-shadow:
            0 14px 30px
            rgba(0,0,0,.20);

        opacity:0;
        visibility:hidden;

        transform:translateY(8px);

        pointer-events:none;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;

        z-index:10000;
    }


    /*
     * Abrir al pasar el mouse.
     */

    .ce-menu-nav > ul > li.deeper.parent:hover >
    ul.mod-menu__sub{

        opacity:1;
        visibility:visible;

        transform:translateY(0);

        pointer-events:auto;
    }


    /* ------------------------------------------------------
       ELEMENTOS DEL SUBMENÚ
    ------------------------------------------------------ */

    .ce-menu-nav
    ul.mod-menu__sub > li{

        display:block;
        width:100%;

        margin:0;
        padding:0;
    }


    .ce-menu-nav
    ul.mod-menu__sub > li > a{

        display:block;

        width:100%;

        padding:11px 20px;

        color:#fff;

        background:transparent;

        font-family:var(--font-body);
        font-size:15px;
        font-weight:500;

        line-height:1.3;

        text-decoration:none;

        border:0;

        transition:
            background .15s ease,
            color .15s ease,
            padding-left .15s ease;
    }


    .ce-menu-nav
    ul.mod-menu__sub > li > a:hover{

        background:
            rgba(255,255,255,.08);

        color:#c7a55b;

        padding-left:25px;
    }

}


/* ==========================================================
   MÓVIL
   Por ahora solamente corregimos el texto accesible.
   El comportamiento lo hacemos después de verificar PC.
========================================================== */

@media(max-width:992px){

    .ce-menu-nav
    .mod-menu__toggle-sub
    .visually-hidden{
        position:absolute !important;
        width:1px !important;
        height:1px !important;
        overflow:hidden !important;
        clip:rect(0,0,0,0) !important;
        white-space:nowrap !important;
    }

}




/* ==========================================================
   NUNTIUS — SUBMENÚ MÓVIL / ACORDEÓN
========================================================== */

@media(max-width:992px){

    /*
     * Cada sección padre se convierte en una fila.
     */

    .ce-menu-nav.is-open >
    ul >
    li.deeper.parent{

        position:relative;

        display:grid;

        grid-template-columns:
            minmax(0, 1fr)
            52px;

        width:100%;
    }


    /*
     * El nombre continúa siendo enlace.
     */

    .ce-menu-nav.is-open >
    ul >
    li.deeper.parent >
    a{

        grid-column:1;
        grid-row:1;

        width:100%;

        padding:
            14px
            10px
            14px
            20px;

        color:#fff;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);

        text-align:left;
    }


    /*
     * Botón independiente para desplegar.
     */

    .ce-menu-nav.is-open
    .mod-menu__toggle-sub{

        grid-column:2;
        grid-row:1;

        display:flex;

        align-items:center;
        justify-content:center;

        width:52px;
        height:100%;

        margin:0;
        padding:0;

        background:transparent;

        border:0;
        border-left:
            1px solid
            rgba(255,255,255,.08);

        border-bottom:
            1px solid
            rgba(255,255,255,.08);

        color:#fff;

        cursor:pointer;
    }


    /*
     * No usamos el icono original de Joomla.
     */

    .ce-menu-nav.is-open
    .mod-menu__toggle-sub
    .icon-chevron-down{

        display:none;
    }


    /*
     * Flecha propia.
     */

    .ce-menu-nav.is-open
    .mod-menu__toggle-sub::before{

        content:"";

        display:block;

        width:8px;
        height:8px;

        border-right:
            2px solid currentColor;

        border-bottom:
            2px solid currentColor;

        transform:
            translateY(-2px)
            rotate(45deg);

        transition:
            transform .2s ease,
            color .2s ease;
    }


    /*
     * Flecha cuando está abierto.
     */

    .ce-menu-nav.is-open
    li.ce-submenu-open >
    .mod-menu__toggle-sub{

        color:#c7a55b;
    }

    .ce-menu-nav.is-open
    li.ce-submenu-open >
    .mod-menu__toggle-sub::before{

        transform:
            translateY(2px)
            rotate(225deg);
    }


    /*
     * Submenús cerrados por defecto.
     */

    .ce-menu-nav.is-open >
    ul >
    li.deeper.parent >
    ul.mod-menu__sub{

        grid-column:1 / -1;
        grid-row:2;

        display:none;

        position:static;

        width:100%;
        min-width:0;
        max-width:none;

        margin:0;
        padding:5px 0 8px;

        background:#071d3b;

        border:0;
        border-bottom:
            1px solid
            rgba(255,255,255,.08);

        border-radius:0;

        box-shadow:none;

        opacity:1;
        visibility:visible;

        transform:none;

        pointer-events:auto;
    }


    /*
     * Mostrar solamente el seleccionado.
     */

    .ce-menu-nav.is-open >
    ul >
    li.deeper.parent.ce-submenu-open >
    ul.mod-menu__sub{

        display:block;
    }


    /*
     * Links secundarios.
     */

    .ce-menu-nav.is-open
    ul.mod-menu__sub >
    li{

        display:block;

        width:100%;

        margin:0;
        padding:0;
    }


    .ce-menu-nav.is-open
    ul.mod-menu__sub >
    li >
    a{

        display:block;

        width:100%;

        padding:
            11px
            20px
            11px
            35px;

        color:
            rgba(255,255,255,.88);

        background:transparent;

        border:0;

        font-size:15px;
        font-weight:500;

        text-align:left;
        text-decoration:none;
    }


    .ce-menu-nav.is-open
    ul.mod-menu__sub >
    li >
    a:hover,
    .ce-menu-nav.is-open
    ul.mod-menu__sub >
    li.active >
    a{

        color:#c7a55b;

        background:
            rgba(255,255,255,.045);
    }

}



/* ==========================================================
   NUNTIUS — SCROLL VERTICAL DEL MENÚ MÓVIL
========================================================== */

@media(max-width:992px){

    /*
     * El panel completo del menú nunca puede superar
     * el espacio disponible de la pantalla.
     */

    .ce-menu-nav.is-open{

        max-height:calc(100dvh - 62px);

        overflow-y:auto;
        overflow-x:hidden;

        overscroll-behavior:contain;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:thin;
    }


    /*
     * Evita que el UL limite el crecimiento del contenido.
     */

    .ce-menu-nav.is-open > ul{

        min-height:0;
        height:auto;

        overflow:visible;
    }


    /*
     * Los submenús forman parte del scroll general.
     */

    .ce-menu-nav.is-open
    ul.mod-menu__sub{

        max-height:none !important;

        overflow:visible !important;
    }


    /*
     * Espacio inferior para que el último elemento
     * no quede pegado al borde de la pantalla.
     */

    .ce-menu-nav.is-open > ul{

        padding-bottom:30px;
    }

}