/**
* --- Menú
**/

.menu-superior-prinicipal {
    font-family: 'Oswald Light', Arial, Helvetica, sans-serif;
    gap: 15px;
}

.menu-superior-prinicipal li {
    list-style: none;
}

.menu-superior-prinicipal li a {
    position: relative;
    display: inline-block;
    padding: 18px 35px;
    color: var(--color-blanco);
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.menu-superior-prinicipal li a:hover {
    box-shadow: -0.5px 0.5px 12px 4px rgb(0, 0, 0, 0.5) !important;
}

.menu-superior-prinicipal li a span {
    position: relative;
    z-index: 5;
    pointer-events: none;
}

/* Barra del navegador, queda al frente de todo */
.menu-superior-prinicipal li a::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 22px;
    margin-top: -2px;
    background-color: #272822;
    background-image:
        radial-gradient(circle, #f92672 40%, transparent 45%),
        radial-gradient(circle, #fd971f 40%, transparent 45%),
        radial-gradient(circle, #a6e22e 40%, transparent 45%);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 10px center, 28px center, 46px center;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

/* Editor Monakai, detrás del texto */
.menu-superior-prinicipal li a::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3e3f32;
    background-repeat: no-repeat;
    background-size: 80% 3px, 70% 3px, 85% 3px, 60% 3px;
    background-position: 15px 35px, 15px 48px, 15px 61px, 15px 74px;
    opacity: 0;
    transition: top 0.4s ease-out, opacity 0.8s ease;
    z-index: 2;
}

.menu-superior-prinicipal li a:hover::before {
    top: 0;
}

.menu-superior-prinicipal li a:hover span {
    content: "";
    color: var(--color-blanco);
    top: 7px;
    transition: top 0.4s ease-out, opacity 0.8s ease;
}

.menu-superior-prinicipal li a:hover::after {
    top: 0;
    opacity: 1;
}