/*=========================================================
    XALTILOLLI 2.0
    ROOM NAVIGATOR
=========================================================*/


.roomNavigator{

    width:100%;

    max-width:1200px;

    margin-inline:auto;

    overflow:visible;

    perspective:2200px;

}



.roomTrack{

    position:relative;

    height:240px;

}



/*=========================================================
    ROOM CARD
=========================================================*/

.roomCard{

    position:absolute;

    left:50%;
    top:0;

    width:var(--room-width);
    height:var(--room-height);

    overflow:hidden;

    border-radius:var(--room-radius);

    background:var(--color-card);

    box-shadow:var(--shadow-large);

    transform-style:preserve-3d;

    cursor:pointer;

    user-select:none;

    transition:

        transform .65s cubic-bezier(.22,.61,.36,1),

        opacity .45s,

        filter .45s,

        box-shadow .45s;





    /*====================================
        VARIABLES DINÁMICAS
    ====================================*/

    --x:-50%;

    --z:0px;

    --rotateY:0deg;

    --rotateX:0deg;

    --scale:1;

    --opacity:1;





    transform:

        translateX(var(--x))

        translateZ(var(--z))

        rotateY(var(--rotateY))

        rotateX(var(--rotateX))

        scale(var(--scale));



    opacity:var(--opacity);

}



/*=========================================================
    IMAGEN
=========================================================*/

.roomCard img{

    width:100%;
    height:100%;

    object-fit:cover;

}



/*=========================================================
    BANDA
=========================================================*/




/*=========================================================
    TARJETA ACTIVA
=========================================================*/

.roomCard.active{

    box-shadow:

        0 0 0 2px rgba(211,0,135,.35),

        0 25px 55px rgba(0,0,0,.40);

}



.roomCard.active .roomCard__band{

    opacity:1;

}



/*=========================================================
    TARJETAS LATERALES
=========================================================*/

.roomCard:not(.active){

    filter:saturate(.8);

}



/*=========================================================
    HOVER
=========================================================*/

.roomCard:hover{

    filter:brightness(1.08);

}



/*=========================================================
    EFECTO SUAVIZADO
=========================================================*/

.roomTrack{

    transform-style:preserve-3d;

}



/*=========================================================
    SOMBRA INFERIOR
=========================================================*/

.roomTrack::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    width:55%;

    height:30px;

    background:

        radial-gradient(

            ellipse,

            rgba(0,0,0,.45),

            transparent

        );

    filter:blur(18px);

    pointer-events:none;

}

/*=========================================================
    NAV BUTTONS
=========================================================*/

.navButton{

    width:64px;
    height:64px;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:3rem;

    color:var(--color-accent);

    transition:.25s;

    user-select:none;

}

.navButton:hover{

    transform:scale(1.18);

    color:var(--color-accent-hover);

}