@media (max-width: 768px) {
    .navbar {
        display: none;
    }

    .navbar-mobile {
        display: block;
    }

    /* Navbar Mobile */
    .navbar-mobile {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 0;
        left: 0;
        color: var(--color-secondary);
        padding: 1rem;
    }

    .navbar-mobile-logo {
        width: 30%;
    }

    .navbar-mobile__icon {
        font-size: 3rem;
    }

    .navbar-mobile-items {
        position: absolute;
        top: 80px; /* Un poco más de espacio desde arriba */
        right: 1rem; /* Alineado a la derecha */
        width: 250px; /* Un ancho fijo puede funcionar mejor */
        background-color: var(--color-primary);
        border-radius: 15px;
        padding: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
        z-index: 1000;

        /* --- Propiedades para la animación --- */
        visibility: hidden; /* Oculto pero accesible para la transición */
        opacity: 0;
        transform: translateY(-10px); /* Empieza ligeramente movido hacia arriba */
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    /* Esta clase se añadirá con JavaScript */
    .navbar-mobile-items.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0); /* Vuelve a su posición original */
    }

    .navbar-mobile-close__icon {
        font-size: 2rem;
        color: var(--color-secondary);
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .navbar-mobile-items__list {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: left;
        font-family: var(--anton);
        font-size: 1.3rem;
    }

    .navbar-mobile-items__link {
        display: block;
        width: 100%;
        margin: 1rem 0;
        color: var(--color-secondary);
        text-decoration: none;
    }

}