.headCont{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding:0 .5rem .2rem .5rem;
    z-index: 200;
}

.headCont .header{
    display: flex;
    width: 100%;
    background: #fff;
    padding: .5rem;
    border-radius:0 0 1rem 1rem;
    gap: .5rem;
    align-items: center;
    box-shadow: 0 5px 12px rgba(0, 33, 63, 0.2);
}
.headCont .header .logo{
    display: flex;
    height:3.5rem;
    width: 3.5rem;
}
.headCont .header .logo img{
    border-radius: .5rem;
}
.headCont .header .navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-right: auto;
    margin-left: auto;
}
.headCont .header .navbar a{
    color: #333;
    font-weight: 400;
    padding: .3rem;
    border-radius: .3rem;
    font-size: clamp(.6rem, 2vw, 1.1rem);
}
.headCont .header .navbar a:hover{
    background: #f5f5f5;
}
.headCont .header .navbar .services{
    position: relative;
}



.headCont .header .navbar .services span{
    cursor: pointer;
    padding: .3rem;
    border-radius: .3rem;
    font-size: clamp(.6rem, 2vw, 1.1rem);
}
.headCont .header .navbar .services span:hover{
    background: #f5f5f5;
}
.headCont .header .navbar .services .enlaces{
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    display: flex;
    visibility: hidden;
    pointer-events: none;
    flex-direction: column;
    row-gap: .2rem;
    padding: 1rem;
    width: max-content;
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(0,0,0, .080);
}
.headCont .header .navbar .services:hover span i{
    rotate: 90deg;
}
.headCont .header .navbar .services:hover .enlaces{
    visibility: visible;
    pointer-events: all;
}
.headCont .header .navbar .services:hover .enlaces a.active{
    background:linear-gradient(0, #72138f, #cf13c6);
    color: #fff;
    box-shadow: 0 0 8px #cf13c6;
    border: 1px solid #fff; 
}




.headCont .leftBtn{
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius:.5rem;
    background: #fff;
    padding: .5rem;
    color: #555;
    box-shadow: 0 0 10px rgba(0,0,0, .150);
    font-size: 1.3rem;
}

.headCont .respLinks{
    position: absolute;
    top: 100%;
    left: -100%;
    visibility: hidden;
    pointer-events: none;
    z-index: -5;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding: 1rem;
    width: 100%;
    background: linear-gradient(0, #f0f0f0, #ffff);
    height: 100dvh;
}
.headCont .respLinks.active{
    left: 0;
    visibility: visible;
    pointer-events: all;
}



.headCont .respLinks .closeRespMenu{
    width: 100%;
    display: flex;
    align-items: center;
}
.headCont .respLinks .closeRespMenu span{
    padding: .3rem 1rem;
    font-size: .8rem;
    color: #777;
    border-radius: 3rem;
    box-shadow: 0 0 8px rgba(0,0,0, .150);
    margin-left: auto;
    cursor: pointer;
}
.headCont .respLinks .respSocial{
    display: flex;
    align-items: center;
    padding: 0 0 .5rem 0;
    gap: .5rem;
    border-bottom:1px solid #f0f0f0 ;
}
.headCont .respLinks .respSocial .item a{
    font-size: 1.3rem;
    color: #aaa;
    min-height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #f5f5f5;
    box-shadow: 0 3px 10px rgba(0,0,0, .130);
    background: #fff;
}

.headCont .respLinks .respServices{
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid #eeeeee;
}
.headCont .respLinks .respServices span{
    font-size: 1.3rem;
    font-weight: 600;
    color: #777;
}
.headCont .respLinks .respServices a{
    color: #be9716;
    padding: .4rem;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 300;
    border: 1px solid #f0f0f0;
}
.headCont .respLinks .respServices a:hover{
    background: var(--accent);
    color: #fff;
}

.headCont .respLinks .idiomasCont{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.headCont .respLinks .idiomasCont a{
    padding: .2rem .7rem;
    border-radius: 3rem;
    border: 1px solid #ddd;
    box-shadow: 0 3px 8px rgba(0,0,0, .080);
    color: #999;
    font-size: .7rem;
}
.headCont .respLinks .idiomasCont a.active{
    background:linear-gradient(0, #72138f, #cf13c6);
    color: #fff;  
    box-shadow: 0 0 8px #cf13c6;  
}


.headCont .userCont{
    position: relative;
}

.headCont .userCont .escalCont{
    height: 2.4rem;
    width: 2.4rem;
    display: flex;
    align-items: center;
    background:#ddd;
    border-radius: 50%;
    gap: .3rem;
    cursor: pointer;
    border: 1px solid #96b8b2;
    overflow: hidden;
}
.headCont .userCont .escalCont img{
    height:100%;
    width:100%;
    object-fit: cover;
}




.headCont .userCont .accessCont{
    display: flex;
    visibility: hidden;
    pointer-events: none;
    flex-direction: column;
    padding: .5rem;
    border-radius:1em;
    background: #fff;
    position: absolute;
    right: 0;
    top: 100%;
    width: max-content;
    row-gap: .5rem;
    box-shadow: 3px 5px 8px rgba(0, 33, 63, 0.2);
    transition: .5s ease-in-out;
    opacity: 0;
}
.headCont .userCont .accessCont a{
    color: #777;
    font-weight: 300;
    font-size: clamp(.7rem, 2vw, .8rem);
    padding: .3rem;
    border-radius: .5rem;
    display: none;
}
.headCont .userCont .accessCont a:hover{
    background: #96b8b2;
    color: #fff;
}

.headCont .userCont:hover .accessCont{
    opacity: 1;
    visibility: visible;
    pointer-events: all;
} 

.headCont .userCont .accessCont .loginLink.print,
.headCont .userCont .accessCont .userProfile.print,
.headCont .userCont .accessCont .setupLink.print,
.headCont .userCont .accessCont .logOutLink.print{
    display: block;
}


/* Soporte móvil: el hover no existe bien -> usamos .open por JS */
.headCont .userCont.open .accessCont{
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}





@media(max-width:1200px){
    .headCont .header .navbar .services{
        display: none;
    }
    .headCont{
        padding: 0;
    }
    .headCont .header{
        border-radius: 0;
    }
        .headCont .leftBtn{
        display: flex;
    }

}