/*==================================================
    CHATEADORES V2
    MENÚ
==================================================*/


/*=========================================
  BARRA DEL MENÚ
=========================================*/

.barra-menu{

    width:90%;

    max-width:1700px;

    margin:0 auto 18px;

    background:var(--cristal);

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

    border-radius:var(--radio-lg);

    backdrop-filter:blur(8px);

    overflow:hidden;

}


/*=========================================
  MENÚ PRINCIPAL
=========================================*/

.menu-principal{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    padding:12px;

    flex-wrap:wrap;

}


/*=========================================
  ENLACES
=========================================*/

.menu-principal a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 24px;

    border-radius:var(--radio-pill);

    text-decoration:none;

    font-weight:bold;

    color:var(--texto-secundario);

    background:var(--cristal-claro);

    border:1px solid rgba(90,180,255,.20);

    transition:var(--transicion);

}


.menu-principal a:hover{

    background:var(--cristal-hover);

    box-shadow:var(--sombra-neon);

    transform:translateY(-2px);

}


/*=========================================
  BOTÓN ACTIVO
=========================================*/

.menu-principal a.activo{

    color:var(--texto);

    background:linear-gradient(
        90deg,
        var(--color-azul),
        var(--color-morado)
    );

    box-shadow:var(--sombra-neon);

}


/*=========================================
  RESPONSIVE
=========================================*/

@media (max-width:900px){

    .menu-principal{

        gap:10px;

    }

    .menu-principal a{

        padding:10px 18px;

        font-size:14px;

    }

}

/* Armario de ChatZona: riel superior y cada sección suspendida de él. */
.barra-menu{
    position:relative;
    padding-top:10px;
    overflow:visible;
    background:linear-gradient(180deg,rgba(31,41,88,.90),rgba(18,24,55,.88));
}

/* Las dos barras compartidas siempre permanecen sobre el contenido de Radio. */
.barra-menu{
    position:fixed;
    top:88px;
    left:50%;
    z-index:190;
    transform:translateX(-50%);
}

.barra-menu::before{
    content:"";
    position:absolute;
    top:8px;
    left:4%;
    width:92%;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,#259ee4,#8d82ff,#d04cff);
    box-shadow:0 0 13px rgba(91,185,255,.55);
}

.menu-principal a{ position:relative; background:rgba(255,255,255,.055); }

.menu-principal a::before{
    content:"";
    position:absolute;
    top:-22px;
    left:50%;
    width:3px;
    height:19px;
    border:0;
    border-radius:999px;
    background:linear-gradient(#9cdfff,#806fff);
    transform:translateX(-50%);
    opacity:1;
    box-shadow:0 0 8px rgba(112,203,255,.75);
}

.menu-principal{ padding:22px 12px 12px; }

.barra-menu::after{
    content:"";
    position:absolute;
    right:4%;
    bottom:7px;
    left:4%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(99,196,255,.65),rgba(216,105,255,.65),transparent);
}