/** ESTILO PARA EL HEADER PRINCIPAL **/
.menuprincipal{
 display:flex;
 justify-content:space-between;
}

/*Visualización correcta en el escritorio*/
@media screen and (min-width: 480px) {
    .menuprincipal {
        width: 37vw;
    }
}
    
.menu-item{
 position:relative;
}

/* BOTONES */

.menu-btn{
 display:flex;
 align-items:center;
 gap:8px;
 cursor:pointer;
 transition:.3s;
}

.arrow{
 stroke:#ff5b8d;
 fill:none;
 stroke-width:2;
 transition:transform .45s cubic-bezier(.19,1,.22,1);
}

/* Animación flecha */

.menu-item:hover .arrow,
.menu-item.active .arrow{
 transform:translateY(8px) rotate(180deg);
}

/* SUBMENU */

.submenu{

 position:absolute;
 top:65px;
 min-width:200px;

 padding:18px;

 border-radius:14px;

 backdrop-filter: blur(14px);
 background:rgba(32,54,68,.85);

 box-shadow:
 0 10px 30px rgba(0,0,0,.35);

 display:flex;
 flex-direction:column;
 gap:10px;

 opacity:0;
 transform:translateY(-15px) scale(.96);

 pointer-events:none;

 transition:
 opacity .35s,
 transform .35s;
}

/* aparición */

.menu-item:hover .submenu,
.menu-item.active .submenu{

 opacity:1;
 transform:translateY(0) scale(1);

 pointer-events:auto;
}

/* barra gradiente animada */

.submenu::before{

 content:"";

 position:absolute;
 top:-4px;
 left:50%;

 width:0;
 height:3px;

 transform:translateX(-50%);

 border-radius:3px;

 transition:width .45s cubic-bezier(.19,1,.22,1);
}

/* activar barra */

.menu-item:hover .submenu::before,
.menu-item.active .submenu::before{

 width:100%;
}

/* degradado izquierdo */

.submenu-iz::before{

 background:linear-gradient(
 90deg,
 #203644 0%,
 #732654 40%,
 #ff5b8d 60%,
 #e9d8c8 100%
 );
}

/* degradado derecho */

.submenu-der::before{

 background:linear-gradient(
 90deg,
 #e9d8c8 0%,
 #ff5b8d 40%,
 #732654 66%,
 #203644 100%
 );
}

/* links */

.submenu a{

 text-decoration:none;
 color:#fff;
 font-size:14px;
 padding:6px 4px;
 border-radius:6px;

 transition:.25s;
}

.submenu a:hover{

 background:rgba(255,255,255,.08);
 color:#ff5b8d;
 transform:translateX(4px);
}


.submenu a{

 text-decoration:none;
 color:#fff;
 font-size:14px;
 padding:6px 4px;
 border-radius:6px;

 transition:.25s;
}

.submenu a:hover{

 background:rgba(255,255,255,.08);
 color:#ff5b8d;
 transform:translateX(4px);
}


@media screen and (max-width: 480px) {
    span .sobremiclass{
        margin: 0rem;
        width: 80px;
    }
    span .herramientasmenuclass{
        margin: 0rem;
        width: 100px;
    }

    .menu-item{
        margin: 1rem;
    }
    .btn-gradientiz .menu-btn{
        margin: 3rem;
        padding: rem;
    }


}
/** ----------------FIN ESTILO HEADER PRINCIPAL---------------- **/

/** ----------------INICIO ESTILO FOOTER---------------- **/