/* ================================
   NAV FLUTUANTE
================================ */

.nav-flutuante{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translateX(-50%) translateY(20px);

    width:min(1200px,92%);
    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:9999;

    opacity:0;
    pointer-events:none;

    padding:10px 16px;
    border-radius:18px;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

/* quando ativa */
.nav-flutuante.show{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

/* ================================
   BOTÕES
================================ */

.nav-btn{
    display:flex;
    align-items:center;
    gap:12px;

    background:#2D2928;
    border:none;
    padding:10px 16px;

    cursor:pointer;

    color:#fff;
    font-weight:600;
    letter-spacing:.3px;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    transition:
        transform .25s,
        box-shadow .25s,
        background .25s;

    will-change: transform;
}

.nav-btn:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.45);
    background:#b89358;
}

/* ================================
   SETA
================================ */

.arrow{
    font-size:20px;
    display:flex;
    align-items:center;
}

/* ================================
   PREVIEW
================================ */

.preview{
    display:flex;
    align-items:center;
    gap:10px;
}

/* ================================
   LOGOS
================================ */

.preview img{
    width:44px;
    height:44px;
    object-fit:contain;

    border-radius:6px;
    background:transparent;

    opacity:.92;

    min-width:44px;
    min-height:44px;

    transition:
        transform .25s,
        opacity .25s;

    will-change: transform;
}

.nav-btn:hover img{
    transform:scale(1.12);
    opacity:1;
}

/* skeleton */

.preview img:not([src]),
.preview img[src=""]{
    background:rgba(255,255,255,.08);
}

/* ===============================
   ANIMAÇÃO ULTRA FLUIDA
=============================== */

.empreendimento-wrapper{

    position:relative;
    background:#0f0f10; /* remove flash branco */

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease,
        filter .45s ease;

    will-change: transform, opacity;
}

/* saída */

.slide-out-left{
    transform:translate3d(-140px,0,0);
    opacity:0;
    filter:brightness(.55);
}

.slide-out-right{
    transform:translate3d(140px,0,0);
    opacity:0;
    filter:brightness(.55);
}

.slide-in{
    transform:translate3d(0,0,0);
    opacity:1;
    filter:brightness(1);
}

/* ================================
   TABLET
================================ */

@media(max-width:768px){

    .nav-flutuante{
        width:94%;
        bottom:20px;
    }

    .preview span{
        display:none;
    }

    .preview img{
        width:34px;
        height:34px;
        min-width:34px;
        min-height:34px;
    }

    .nav-btn{
        padding:8px 12px;
        gap:8px;
    }
}

/* ================================
   CELULAR
================================ */

@media(max-width:480px){

    .preview img{
        display:none;
    }

    .nav-btn{
        border-radius:50px;
        padding:14px;
        gap:0;
    }

    .arrow{
        font-size:18px;
    }
}