/*=========================================================
    XALTILOLLI 2.0
    TEMPORALIDADES
=========================================================*/

.temporalidad{

    max-width:1100px;

    margin:auto;

    padding:40px 20px 10px;

}

/*=====================================================*/

.temporalidad__titulo{

    text-align:center;

    font-size:2.5rem;

    font-weight:700;

    color:#FFFFFF;

    margin-bottom:25px;

}

/*=====================================================*/

.temporalidad__descripcion{

    max-width:800px;

    margin:0 auto 40px;

    text-align:center;

    line-height:1.8;

    color:#FFFFFF;

}

/*=====================================================*/

.temporalidad__imagen{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:40px;

}

/*=====================================================*/

.temporalidad__imagen img{

    width:80%;

    max-width:650px;

    height:auto;

    display:block;

}

/*=========================================================
    VISOR
=========================================================*/

.temporalidad__visor{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:30px;

}

/*=========================================================
    FLECHAS
=========================================================*/

.navTemporalidad{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:70px;

    height:70px;

    border:none;

    background:transparent;

    color:#FFFFFF;

    font-size:3.5rem;

    cursor:pointer;

    transition:.30s;

    z-index:10;

}

.navTemporalidad--izquierda{

    left:-4%;

}

.navTemporalidad--derecha{

    right:-4%;

}

.navTemporalidad:hover{

    transform:

        translateY(-50%)

        scale(1.15);

}

.navTemporalidad:disabled{

    opacity:.25;

    cursor:not-allowed;

}

.temporalidad{

    opacity:1;

    transition:opacity .5s ease;

}

.temporalidad.ocultar{

    opacity:0;

}

.selectorTemporalidades{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin:0px auto;

}

.btnTemporalidad{

    width:110px;

    cursor:pointer;

    transition:.30s;

    border-radius:8px;

}

.btnTemporalidad:hover{

    transform:scale(1.08);

}

.btnTemporalidad.activo{

    transform:scale(1.12);

    box-shadow:0 0 20px rgba(255,255,255,.45);

}

.btnTemporalidad.activo{

    transform:scale(1.2);

    filter:brightness(1.55);

    box-shadow:0 0 25px rgba(255,255,255,.40);

}