/*1. Contenedor #####################################*/
.barraNav {
    z-index: 1000;
    width: 100%;
    height: 13.7vh;
    background-color: #F3F3F3;
    box-shadow: 0px 0.77mm 0.77mm rgba(0, 0, 0, 0.2), 0px -0.77mm 0.77mm rgba(0, 0, 0, 0.2);
    margin-top: 1.37vh;
    position: fixed;
}

/*2. Propiedades compartidas #####################################*/
.barraNav__logo, .barraNav__logoImg, .barraNav__elems, .barraNav__elems--item, .calculos {
    display: inline-block;
}

.barraNav__logo, .barraNav__logoSec {
    position: relative;
}

.barraNav__elems, .calculos, .barraNav__fondo {
    position: absolute;
}

.barraNav__elems--item, .barraNav__logo, .calculos {
    cursor: pointer;
}

.barraNav__elems--item,  .calculos{
    font-size: 3.426vh;
    text-align: center;
}

.leter {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 2.74vh;
    letter-spacing: 0.137vh;
    color: gray;
}

.arrow {
    font-size: 2.466vh;
    color: gray;
    margin-left: 1.3mm;
}

/*3. Elementos de derecha a izquierda #####################################*/
.barraNav__fondo {
    width: 100%;
    height: 1.37vh;
    background-color: #DFDFDF;
    top: -1.37vh;
}

.barraNav__logo {
    height: 9.59vh;
    width: 21.681%;
    font-family: 'Rubik Glitch', system-ui;
    font-size: 4.795vh;
    line-height: 1;
    bottom: 1.096vh;
    left: 4.8%;
}

.barraNav__logoSec {
    left: 20%;
}

.barraNav__logoIni {
    text-decoration: none;
    color: #5D8AFF;
}

.barraNav__logoSec {
    display: block;
}

.barraNav__elems {
    width: 73%;
    left: 25%;
}

.barraNav__elems--item {
    height: 13.70vh;
    line-height: 2.5;
    padding-top: 1.71vh;
    margin-left: 4.17%;
}

.calculos__leter {
    letter-spacing: 0.7mm;
    color: white;
}

.calculos {
    width: 16.68%;
    height: 6.85vh;
    line-height: 1.67;
    background-color: #5D8AFF;
    margin-left: 15.84%;
    top: 3.43vh;
}

/*4. Animaición #####################################*/
/*4.1 transición*/
.barraNav__logoIni, .barraNav__elems--item, .leter, .arrow .calculos{
    transition-duration: 0.1s;
}

/*4.2 Propiedades de transición*/
.barraNav__logo:hover > .barraNav__logoIni {
    color: #1C4BC9;
}

.barraNav__elems--item:hover > .leter, 
.barraNav__elems--item:hover > .arrow {
    color: #1C4BC9;
}

.barraNav__elems--item:hover {
    border-bottom: 1mm solid #1C4BC9;
}

.calculos:hover {
    background-color: #1C4BC9;
    color: transparent;
}