/*=========================================================
    SALA
=========================================================*/

.sala{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding:var(--space-xl) var(--space-md);

}

/*=========================================================
    ENCABEZADO
=========================================================*/

.sala__encabezado{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:var(--space-md);

    margin-bottom:var(--space-xl);

}

.sala__isometrico img{

    width:100%;

    max-width:250px;

    height:auto;

}

.sala__informacion{

    max-width:900px;

}

.sala__titulo{

    margin-bottom:var(--space-sm);

}

.sala__descripcion{

    line-height:1.7;

}


/*=========================================================
    TEMPORALIDAD
=========================================================*/

.tempo{

    margin-bottom:var(--space-sm);

}

.tempo__encabezado{

    width:100%;

    min-height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    background-size:cover;

    background-position:center;

    border-radius:10px;

    margin-bottom:var(--space-lg);

}

.tempo__titulo{

    color:var(--color-white);

    text-align:center;

}


/*=========================================================
    CONTENIDO
=========================================================*/

.tempo__multimedia{

    display:grid;

    grid-template-columns:1fr 180px;

    gap:2rem;

    align-items:center;

}

.tempo__texto{

    max-width:900px;

    margin:0 auto 3rem;

    text-align:center;

    line-height:1.8;

}

.tempo__imagen{

    display:flex;

    justify-content:center;

}

.tempo__imagen img{

    width:100%;

    max-width:320px;

    border-radius:12px;

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

}


/*=========================================================
    RECURSOS
=========================================================*/

.tempo__recursos{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}

.recurso{

    display:block;

    transition:.25s;

}

.recurso img{

    width:110px;

    height:auto;

}

.recurso:hover{

    transform:scale(1.08);

}

.navegacionSalas{

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1200px;

    margin:4rem auto;

}

.navegacionSalas button{

    cursor:pointer;

    padding:1rem 2rem;

}

.navegacionSalas button:disabled{

    opacity:.35;

    cursor:not-allowed;

}


/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:992px){

    .tempo__multimedia{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .tempo__imagen{

        display:flex;

        justify-content:center;

    }

    .tempo__recursos{

        display:flex;

        flex-direction:row;

        justify-content:center;

        gap:2rem;

        margin-top:2rem;

    }

}

/*=========================================================
    NAVEGACIÓN ENTRE SALAS
=========================================================*/

.sala__encabezado{

    position:relative;

}

.navSala{

    position:absolute;

    top:130px;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:3rem;

    transition:.3s;

    z-index:100;

    color: deeppink;

}

.navSala--izquierda{

    left:8%;

}

.navSala--derecha{

    right:8%;

}

.navSala:hover{

    transform:translateY(-50%) scale(1.15);

}

.navSala:disabled{

    opacity:.35;

    cursor:not-allowed;

}

/*=========================================================
    TRANSICIÓN ENTRE SALAS
=========================================================*/

.sala{

    opacity:1;

    transition:
        opacity .35s ease;

}

.sala--oculta{

    opacity:0;

}