*{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* panel de navegacion */
.navar{
    position: fixed;
    height: 40px;
    width: 100vw;
    max-width: 100%;
    box-sizing: content-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(20px);
    background-image: linear-gradient(
        120deg,
        transparent 0%,
        #1B3039
    );
}

.navar .tituls{
    display: none;
}

.navar .hbtns{
    display: flex;
    height: 100%;
    flex-direction: row;
    border-radius: 0 0 10% 10%;
    box-sizing: border-box;
    background-color: transparent;
}

.hbtns::before{
    filter: blur(1000px);
    transform: scale(1.1);

}


.navar .hbtn{
    display: flex;
    justify-content: center;
    width: 110px;
    height: 100%;
}

.navar .login{
    display: flex;
    justify-content: center;
    width: 110px;
    height: 100%;
}

.tema{
    margin-top: 5px;
    width: 110px;
    height: 100%;

}

.navar .tema path{
    transform: translateY(-4px);
}
.hbtn, .login, .tema{
    transition: fill .6s;
}

.hbtn:hover, .login:hover, .tema:hover{
    fill: #05ADEA;
}


/* BOTON RESPONSIVE */

.tituls{
    display: none;
    z-index: 5  ;
}


/* BOTON PRESIONADO RESPONSIVE */

.navars{
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    backdrop-filter: blur(32px);
    width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    top: 0;
    z-index: 5;
}
.salidaMenu{
    display: none;
}
.navars .salidaMenu{
    display: flex;
    width: 100%;
    height: 14.28dvh;
}

.navars .salidaMenu:hover{
    color: #05ADEA;
}

.navars .login {
    width: 100%;
    height: 14.28dvh;
}

.navars .hbtns{
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 80vh;
    background: transparent;
}

.navars .hbtn{
    width: 100%;
    height: 14.28dvh;
}

.navars .hbtns a , .navars a, .navars .tema{
    width: 100%;
    height: 14.28dvh;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.navars .tema{
    width: 100%;
    height: 14.28dvh;
    
}

.navars .hbtns a:hover , .navars a:hover, .navars .tema:hover, .navars .salidaMenu:hover{
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.3),
        #05adea41
    );

}

/* TEMA CLARO */

.tema-claro .navar{
    background-image: linear-gradient(
        120deg,
        transparent 0%,
        #1b303975
    );
}
.tema-claro .hbtn{
    fill: black;
}
@media (max-width: 650px){
    
    .navar > * {
        display: none;
    }
    
    .navar > * > * {
        display: none;
    }
    
    .navar .tituls {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }
    .navar .tituls h1{
        display: block;
    }
    .navar{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
    }
    /* TEMA CLARO MOBILE */
    
    .tema-claro .navar .tituls{
        color: black;
    }
    .tema-claro .navar:hover .tituls{
        color: #fcfcfc;
        filter: contrast(100%);
    }
    
    .tema-claro .navar{
        background: #05ADEA;
            backdrop-filter: blur(32px);
            cursor: pointer;
            border-radius: 15px;
            transition: filter .6s linear 0ms;
            filter: contrast(200%);
    
    }
    
    .navar:hover{
        filter: contrast(70%);
    }
    
    /* TEMA OSCURO MOBILE */
    
    .tema-oscuro .tituls{
        color: white;
    }
    
    .tema-oscuro .navar .tituls{
        color: white;
        transition: color .4s linear 0ms;
    }
    
    .tema-oscuro .navar:hover .tituls{
        color: #00202b;
    }
    
    
    .tema-oscuro .navar{
        background: #05ADEA;
            backdrop-filter: blur(32px);
            cursor: pointer;
            border-radius: 15px;
            transition: filter .6s linear 0ms;
    }
    
    .tema-oscuro .navar:hover{
        filter: contrast(200%);
    }
    .tema-oscuro .tituls{
        color: white;
    }
    
    .tema-oscuro .navar .tituls{
        color: white;
        transition: color .4s linear 0ms;
    }
    
    .tema-oscuro .navar:hover .tituls{
        color: #00202b;
    }
    
    
    .tema-oscuro .navar{
        background: #05ADEA;
            backdrop-filter: blur(32px);
            border-radius: 15px;
            transition: filter .6s linear 0ms;
    }
    
    .tema-oscuro .navar:hover{
        filter: contrast(200%);
    }
    
      }

/* TEMA CLARO */

.tema-claro .salidaMenu{
    fill: black;
}

.tema-claro .navar .hbtn{
    fill: black;
}

.tema-claro .titulo{
    color: black;
}

.tema-claro .login{
    fill: black;
}

.tema-claro .tema{
    fill: black;
}




.tema-claro .hbtn:hover,
.tema-claro .login:hover,
.tema-claro .tema:hover,
.tema-claro .icon-socials:hover{
    fill: #05ADEA;
    cursor: pointer;
}

/* TEMA OSCURO */


.tema-oscuro .salidaMenu{
    color: white;
}

.tema-oscuro .navar .hbtn{
    fill: white;
}

.tema-oscuro .login{
    color: white;
}

.tema-oscuro .icon-socials,
.tema-oscuro .hbtn{
    fill: white;
}

.tema-oscuro .hbtn:hover,.tema-oscuro
.login:hover,.tema-oscuro
.tema:hover,.tema-oscuro
.icon-socials:hover{
    fill: #05ADEA;
    cursor: pointer;
}



.portada{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00161E;
    height: 300px;
}

.backdrop{
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.backdrop h1{
    color: white;
    font-size: 1.5em;
    z-index: 2;
}