.nav {
    position: sticky;
    top: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm);
    z-index: 10;
    animation: nav-moment both;
    animation-timeline: view();
}

.nav__logo img {
    width: 2.5rem;
    filter: drop-shadow(0 0 8px var(--color-accent));/*este es para darle una sombra al contenido de la imagen sirve más para imagenes .png, pero puede usarse en las otras, además que se el aplica al contenido y no a la caja que contiene la misma imagen*/
    margin-left:  var(--space-sm);
}

.nav__toggle {
    display: none;/*para que no se vea el switch*/
}

.nav__toggle-icon {
    display: none;/*este es para que no se vea el menú amburguesa*/
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--color-text);
}

/* Lista de enlaces */
.nav__list {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    margin-right: var(--space-lg);
}

.nav__item {
    font-weight: bold;
    text-transform: uppercase;
    font-style: italic;
    text-shadow: 0 0 8px var(--color-accent);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    cursor: pointer;
    transition: filter 0.5s, scale .5s, opacity .5s;
}

.nav__item:hover {
    scale: 1.1;
}
/*es para invertir el color de la lupa cuando se situe en ella :hover*/
.lupaModeIverter:hover {
    filter: invert(1);
}
.nav__list:has(.nav__item:hover) .nav__item:not(:hover) {
    scale: .9;
    filter: blur(.1rem);
    opacity: 1;
}

.nav__item-toggle-search {
    display: none;
    /*este sirve porque en ocasiones se ve el checkbox*/
}

.nav__item__icono-buscar {
    width: 2rem;
    text-align: center;
}

.nav__item-buscador  {
    display: none;
    padding: .7rem;
    width: 0;
    opacity: 0;
    padding: 0;
    border: 0;
    pointer-events: none;/* no se puede pulsar mientras está oculto */
    transition: width .3s ease, opacity .3s ease;
}

.nav__item-toggle-search:checked + label + .nav__item-buscador {
    width: 11.3rem;
    opacity: 1;
    padding: .4rem .6rem;
    pointer-events: auto;
}

/* Mobile */
@media (max-width: 25rem) {

    .nav {
        flex-wrap: wrap;
    }

    .nav__toggle-icon {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        max-height: 0;
        margin-right: 0;
        overflow: hidden;
        transition: max-height 0.5s;
        width: 100%;
        background: var(--color-bg-secondary);
        animation: nav-moment both;
        animation-timeline: view();
    }

    .nav__toggle:checked+.nav__toggle-icon+.nav__list {
        max-height: 20rem;
    }

    .nav__item {
        width: 100%;
        text-align: center;
        border-top: 1px solid var(--color-bg-primary);
    }

    .nav__item-container-buscador {
        /*Aquí vemos que el unico luhar que tiene estilos para la lupa es aquí, pero 
        notamos que se ve un poco arriba, y es porque le entorpece al darle click el elemento de la caja input text, si inspeccionamos y la deshabilitamos veremos que esta centrado*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: row wrap;
        gap: 1rem;
        padding-left: .5rem;
    }

    .nav__list:has(.nav__item:hover) .nav__item:not(:hover) {/*esta forma de aplicar estilo es para que al hacer hover sobre un elemento, lo haga solo al que le ponga el puntero y no a todos, por ello se ve así*/
        scale: 1;
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes nav-moment {
    from {
        background-color: var(--color-bg-secondary);
    }
    to {
        background-color: #26262866;
    }
}