/* TOTO EL NAV ANTES DEL LOGO Y LINKS */
.nv-ante-all {
    background-color: var(--clr9);
    border-bottom: 1px solid var(--clr8);
    --svgsz: 15px;
}
.nv-ante {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LADO IZQUIERDO */
.nv-ante-l {
    display: flex;
    align-items: center;
}
.nv-l-st {
    display: flex;
    align-items: center;
}
.nv-l-st svg {
    width: var(--svgsz);
    height: var(--svgsz);
    fill: var(--clr6);
    transition: .2s all;
    margin-right: 5px;
}
.nv-l-st a {
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-left: 5px;
    text-decoration: none;
    color: var(--clr4);
    transition: .2s all;
}
.nv-l-st a svg path,
.nv-l-st a svg rect {
    transition: .2s all ease;
}
.nv-l-st a:hover {
    color: var(--clr3);
}
.nv-l-st a:hover svg path,
.nv-l-st a:hover svg rect {
    fill: var(--clr3);
}
.nv-cel {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid var(--clr5);
}

/* LADO DERECHO */
.nv-ante-r {
    display: flex;
    align-items: center;
}
.nv-rds {
    margin-left: 10px;
}
.nv-rds svg {
    width: var(--svgsz);
    height: var(--svgsz);
    fill: var(--clr6);
    transition: .2s all;
}
.nv-rds svg:hover {
    fill: var(--clr5);
}

/* NAVEGADOR CON LINKS */
.nv-all {
    position: sticky;
    z-index: 99;
    background-color: #fff;
    top: 0;
    border-bottom: 1px solid var(--clr5);
    box-shadow: 0px 8px 50px -15px rgba(7, 28, 48,0.4);
    -webkit-box-shadow: 0px 8px 50px -15px rgba(7, 28, 48, 0.4);
    -moz-box-shadow: 0px 8px 50px -15px rgba(7, 28, 48,0.4);
}
.nv-ctnr {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    --cl-lks: none;
}
.nv-ctnr:has(:checked){
    --cl-lks: flex;
}
.nv-logo {
    height: inherit;
    display: flex;
    align-items: center;
}
.nv-logo img {
    height: 80%;
}
.nv-lks,
.nv-lks a {
    height: inherit;
}
.nv-lks {
    display: flex;
}
.nv-lks a {
    transition: .2s all ease;
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0 20px;
    text-decoration: none;
    color: var(--clr4);
}
.nv-lks a:hover {
    color: var(--clr1);
    border-bottom: 3px solid var(--clr1);
}

/* BURGER BUTTON */
.nv-bgr {
    display: none;
    align-items: center;
}
.nv-bgr-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 30px;
    height: 22px;
}
.nv-bgr-btn input {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.nv-bgr-btn .ln-cb {
    width: 100%;
    height: 3px;
    border-radius: 1px;
    background-color: var(--clr4);
}

@media screen and (max-width: 730px) {
    /* NAV ANTE */
    .nv-ante {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .nv-ante-l {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .nv-addrs {
        display: none;
    }
    .nv-l-st a {
        margin: 0;
    }
    .nv-cel {
        margin-top: 2px;
        padding: 0;
        border: none;
    }
    .nv-ante-r {
        display: none;
    }
    /* NAV LINKS */
    .nv-ctnr {
        position: relative;
    }
    .nv-lks {
        z-index: 100;
        position: absolute;
        box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.5);
        background-color: #fff;
        display: var(--cl-lks);
        flex-direction: column;
        border-radius: 4px;
        height: auto;
        right: 20px;
        top: calc(100% + 10px);
        padding: 20px;
    }
    .nv-lks a {
        justify-content: center;
        text-align: center;
        height: 40px;
        width: auto;
    }
    .nv-lks a:hover {
        border-bottom: none;
    }
    .nv-bgr {
        display: flex;
        align-items: center;
    }
}