/* ======================================================
   BILLY PAGÁN · SITIO OFICIAL
   menu.css
   MENÚ · PRINCIPAL Y MÓVIL
====================================================== */


/* ======================================================
   01. MENÚ PRINCIPAL
====================================================== */

.menu {

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

}


.menu ul {

    display: flex;

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

    width: 100%;

    margin: 0;
    padding: 2rem;

    gap: 2.5rem;

    list-style: none;

}


.menu a {

    display: block;

    color: #202020;

    font-family: "Montserrat", sans-serif;

    font-size: 0.72rem;
    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 0.18em;

    white-space: nowrap;

    transition:
        opacity 0.3s ease,
        color 0.3s ease;

}


.menu a:hover {

    opacity: 0.55;

}


/* ======================================================
   02. ESTADO ACTIVO
====================================================== */

.menu a.activo {

    opacity: 1;

}


/* ======================================================
   03. MENÚ MÓVIL
====================================================== */

.menu-movil {

    display: none;

}


.menu-movil a {

    display: block;

    color: #202020;

    font-family: "Montserrat", sans-serif;

    font-size: 0.82rem;
    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 0.2em;

    text-align: center;

    white-space: nowrap;

    transition: opacity 0.3s ease;

}


.menu-movil a:hover {

    opacity: 0.55;

}


.menu-movil a.activo {

    opacity: 1;

}


/* ======================================================
   04. MENÚ MÓVIL · ESTADO ABIERTO
====================================================== */

.menu-movil.abierto {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

}


/* ======================================================
   FIN · menu.css
====================================================== */