/* Estilos para dispositivos móviles (generalmente teléfonos) */
  @media only screen and (min-width: 1px) and (max-width: 768px) {
    .abrir, .cerrar {
        position: fixed;
        display: block;
        right: 0;
        top: 0;
        margin: 20px 20px 0 0 !important;
        width: 50px;
        background-color: inherit;
        border: 0;
    }

    nav .nav-list {
        padding: 0 100px !important;
    }
}

/* Estilos para tabletas (generalmente pantallas más grandes que dispositivos móviles) */
@media only screen and (max-width: 1098px) {   
    nav .nav-list {
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        padding: 0 20% !important;
    }

    .nav-list.visible {
        opacity: 1;
        visibility: visible;
    }

    .nav-list.visible li a {
        font-size: 1.5rem;
    }

    .abrir, .cerrar {
        cursor: pointer;
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        margin: 40px 40px 0 0;
        width: 50px;
        background-color: inherit;
        border: 0;
    }

    nav .nav-list {
        display: flex;
        justify-content: center;
        /* gap: 3rem; */
        font-size: 1.5rem;
        position: fixed;
        padding: 0;
        margin: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        flex-direction: column;
        text-align: center;
        background-color: rgba(0,0,0,0.88);
        background-size: cover;
        z-index: 9998;
    }

    nav .nav-list li {
        border-bottom: 0.6px solid var(--oro);
        margin: 0 auto;
        width: 100%;
        padding: 25px;
    }

    nav .nav-list li:last-child {
        border-bottom: none;
    }

    /* Mostramos el botón de "Abrir Menú Hamburguesa" */
    .abrir {display: block;}
}

/* Estilos para pantallas medianas a grandes (tabletas y escritorio) */
@media screen and (min-width: 1099px) {
    .abrir, .cerrar {display: none;}
  }