nav {
    background-color: #121212dd; /*202020; 55193e; 660a4f */
    backdrop-filter: blur(5px);
    width:100%;
    /* height: 4rem; */
    height: 65px;
    z-index: 2000;
    box-sizing:border-box;
    position: sticky;
    justify-content: center;
    align-items: center;
    top:0;
    text-align: center;
    vertical-align: middle;
    /* border-top: 1px solid #2b2b2b; */
    /* border-bottom: 1px solid #2b2b2b; */
    /* border-top:#141414de 6px solid; */
    /* border-bottom:#141414de 6px solid; */
}

#nav {
    display: flex;
    padding:10px;
    box-shadow: 0 1px 5px rgba(93, 93, 93, 0.495);
}

#phone-nav {
    display: none;
}

* {
    --rosa: #ff007a;
}

.active div {
    color: var(--rosa);
}

.nav-element {
    /* background-color: transparent; */
    /* color:#bebebe; */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /* position: relative; */
    /* font-size: 160%; */
    /* font-size: 1.6rem; */
    /* cursor: pointer; */
    padding: 0.5em;
    /* padding: 10px 20px; */
	/* margin-right: 25px; */
    /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); */
    transition: transform 0.2s ease-in-out;
    
    &:hover {
        color: #ff007a;
        /* transform: scale(1.1); */
        /* p { transform: scale(1.1); } */
    }
}

.nav-element {
    position: relative;
    /* font-size: 1.4rem; */
    font-size: 22.5px;
    color: #bebebe;
    background: linear-gradient(to right, #ff007a 50%, #bebebe 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-clip: text;
    background-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.5s ease;
    cursor: pointer;
}

:root {
  --activo: #ffffff;
  --rosa: #ff007a;
}
/* Forzar color normal cuando el item esté activo */
/* Estado ACTIVE */
/* ESTADO ACTIVO (color sólido #8c0044) PERO manteniendo gradiente animable */
.active .nav-element {
    background: linear-gradient(to right, var(--rosa) 50%, var(--activo) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;  /* se ve solo #8c0044 */
    background-clip: text;
    background-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PARA QUE FUNCIONE CON ESPECTACULOS */
.nav-element.active {
     background: linear-gradient(to right, var(--rosa) 50%, var(--activo) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;  /* se ve solo #8c0044 */
    background-clip: text;
    background-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



/* HOVER — INCLUYE LOS ACTIVOS */
.nav-element:hover {
    background-position: 0 0; /* desliza gradiente hacia adelante */
}

/* .otros:hover {
    transform: scale(1.1);
} */

.nav-element p {
    /* transition: color 0s ease-in-out, transform 0.2s ease-in-out; */
    transition: transform 0.2s ease-in-out;
}

/* NAV BAR DESPLEGABLE */

.submenu {
    /* margin-top: 0.23em; */
    margin-top: 4px;
    /* font-size: 1.15rem; */
    font-size: 19px;
    /* margin-top: 4px; */
    position: absolute;
    top: 100%;
    left: 50%; /* Centra el menú en relación con el botón */
    transform: translateX(-50%);
    background: #121212dd;
    /* backdrop-filter: blur(5px); */
    display: flex;
    flex-direction: column;
    width: max-content; /* Se ajusta al contenido */
    /* min-width: 200px; */
    /* Asegura un ancho mínimo */
    overflow: hidden;
    max-height: 0;
    /* opacity: 1; */
    /* border-radius: 10px; */
    transition: max-height 0.45s ease-in-out;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.submenu div {
    padding: 10px;
    cursor: pointer;
    text-align: center;
    /* color: #bebebe; */
    background: linear-gradient(to right, #ff007a 50%, #bebebe 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-clip: text;
    background-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.5s ease;
    font-size: 0.9em;
    /* font-size: 0.8em; */
    /* transition: color 0.4s ease-in; */
    /* transition: background-color 0.3s ease-in; */
    /* white-space: nowrap;  */
    /* Evita que los elementos se envuelvan */
    &:hover {
        /* background: #ff0077; */
        /* background: #b85777; */
        background-position: 0 0;
        /* background: #ff007a; */
        /* color: #222; */
    }
}

.submenu a {
    color: #bebebe;
    text-decoration: none;
}

.nav-item {
    position: relative;
    display: inline-block;
}

.nav-item:hover .submenu {
    max-height: 500px; /* Ajusta según el contenido */
}

/* #primer_boton:hover .submenu {
    max-height: 800px;
} */

.nav-element p {
    transition-delay: 0.6s;
}

.nav-element:hover p {
    transition-delay: 0s;
}

/* #primer_boton {
    margin-left: 25px;
} */

.logo {
    margin-left: -50%;
    /* margin-right: 30%; */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    height: 50px;
    /* height: 3.2rem; */
}

#logo {
    margin-right: 40px;
    margin-left: 20%;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    height: 3.2em;
    /* height: 50px; */
    /* transition: transform 0.25s ease-in-out; */
    transition: filter 0.15s ease-in-out;

    &:hover {
        /* transform: scale(1.1); */
        filter: brightness(1.5);
    }
}

#search {
    border: none;
    cursor: pointer;
    font-size: 16px;

    &:hover { content: url('/images/logos/lupa_hover.svg'); }
}

/* #login:hover {
    content: url('/images/logos/login_hover.svg');
} */

#searchInput {
    background-color: #333;
    color: #8f8f8f;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #222;
    margin-right: 10px;
    border-radius: 10px;
    display: none;
    outline: none; /* Evita el borde azul predeterminado en algunos navegadores */
    box-sizing: border-box;

    &:focus {
        color: #bebebe;
        border: 1.5px solid #ff007b53;
    }
}

#header-phone-divider {
    display: none;
    height: 0.5rem;
    background-color: #141414;
    border: none;
    box-sizing: border-box;
}

/* Para smartphones y tablets*/
@media (width <= 860px) {
    
    nav {
        position: fixed;
        background-color: transparent;
        border: none;
        backdrop-filter: blur(0px);
        justify-content: space-between;
    }

	#nav {
        display: none;
    }

    #phone-nav {
        display: flex;
    }
    
    .nav-color-changed { 
        transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
        background: #141414dd;
        backdrop-filter: blur(5px);
        box-shadow: 0 1px 5px rgba(93, 93, 93, 0.495);
    }

    #header-phone-divider {
        display: block;
    }

    #logo-phone {
        margin-left: 20%;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        height: 3.2em;
        /* opacity: 1; */
        transition: filter 0.15s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;

        &:hover {
            /* transform: scale(1.1); */
            filter: brightness(1.5);
        }
    }

    /* @keyframes hidden-logo {
        to { opacity: 0;
            display: none;}
    } */

    .ocultar-logo {
        /* animation: hidden-logo 4s ease-in-out; */
        visibility: hidden;
        opacity: 0;
        /* display: none; */
    }

    .nav-element {
        margin-right: 0;

        /* &:hover { 
            transform: scale(1.1);
        } */
    }

    .menu-icon {
        cursor: pointer;
        color: #bebebe;
        font-size: 2em;
        margin-right: 15px;

        &:hover {
            color: #ff007a;
        }
    }

    .iconos {
        display: flex;
        /* width:5%; */
        justify-content: space-between;
        align-items: center;
        /* alinear verticalmente */
    }

    /* BURGER MENU */

    .burger {
        position: relative;
        width: 30px;
        height: 25px;
        cursor: pointer;
        display: block;
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 15px;
    }

    .burger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #bebebe;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: 0.25s ease-in-out, background-color 0s;
    }

    .burger:hover span {
        background-color: #ff007a;
    }

    .burger span:nth-of-type(1) {
        top: 0px;
        transform-origin: left center;
    }

    .burger span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
        transform-origin: left center;
    }

    .burger span:nth-of-type(3) {
        top: 100%;
        transform: translateY(-100%);
        transform-origin: left center;
    }

    .burger.active span:nth-of-type(1) {
        transform: rotate(45deg);
        top: 0px;
        left: 5px;
    }

    .burger.active span:nth-of-type(2) {
        width: 0%;
        opacity: 0;
    }

    .burger.active span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: 21px;
        left: 5px;
    }

    /* SE USABA PARA EL INPUT DE SEARCH */
    /* .hidden {
        display: none;
    } */
}