/* DOCK ESTILO APLE */


/* Tablet */
@media screen and (max-width: 991px) {
    :root {
        --container-padding: 1.5em;
    }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
    :root {
        --container-padding: 1em;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
    :root {
    }
}

.docker {
    padding: var(--container-padding);
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    display: flex;
    position: relative;
}

.nav-wrap {
    z-index: 1;
    pointer-events: none;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    position: fixed;
    inset: 0 0 10vh;
}

.nav-list {
    flex-flow: row;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    font-size: 1.4vw;
}

.nav-item {
    justify-content: center;
    align-items: center;
    width: 5em;
    transition: width .5s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    position: relative;
}

.nav-item:hover {
    width: 8em;
}

.nav-item:has(+ .nav-item:hover),
.nav-item:hover + .nav-item {
    width: 7em;
}

.nav-item:has(+ .nav-item + .nav-item:hover),
.nav-item:hover + .nav-item + .nav-item {
    width: 6em;
}

.nav-item__link {
    z-index: 1;
    pointer-events: auto;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    padding-left: 1px;
    padding-right: 1px;
    display: flex;
    position: relative;
}

.image {
    object-fit: contain;
    width: 100%;
}

.nav-item__tooltip {
    z-index: 0;
    background-color: rgba(255, 255, 255, 0);
    opacity: 0;
    white-space: nowrap;
    border-radius: .25em;
    padding: .4em .5em;
    font-size: 1em;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .5s cubic-bezier(.16, 1, .3, 1);
    position: absolute;
    top: 0;
    transform: translate(0, -80%);
    font-weight: 400;
}

.nav-item:hover .nav-item__tooltip {
    opacity: 1;
    transform: translate(0px, -140%);
    color: #001c30;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}