/*=========================================================
    XALTILOLLI 2.0
    ACCESIBILIDAD
=========================================================*/

/*=====================================================
    BOTÓN
=====================================================*/

#btnAccesibilidad{

    position:fixed;

    top:90px;

    left:20px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:none;

    background-image:url("../assets/images/icons/boton_inc.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:65%;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(0,0,0,.35);

    z-index:9998;

    transition:.30s;

}

#btnAccesibilidad:hover{

    transform:scale(1.08);

}

/*=====================================================
    OVERLAY
=====================================================*/

#modalAccesibilidad{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0, 0, 0, 0.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

#modalAccesibilidad.activo{

    opacity:1;

    visibility:visible;

}
/*=========================================================
    MODAL
=========================================================*/

.modalAccesibilidad__contenido{

    width:min(80vw,800px);

    max-height:75vh;

    overflow-y:auto;

    background:#FFFFFF;

    border-radius:28px;

    padding:20px;

    position:relative;

    box-shadow:

        0 20px 60px rgba(0,0,0,.35);

}
.modalAccesibilidad__cerrar{

    position:absolute;

    top:22px;

    right:22px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#8B5FBF;

    color:#FFF;

    font-size:28px;

    cursor:pointer;

    transition:.30s;

}

.modalAccesibilidad__cerrar:hover{

    transform:scale(1.08);

}

/*=========================================================
    CABECERA
=========================================================*/

.accesibilidad__header{

    text-align:center;

    margin-bottom:40px;

}

.accesibilidad__icono img{

    width:90px;

    margin-bottom:18px;

}

.accesibilidad__header h2{

    font-size:48px;

    color:#7A3FA7;

    margin-bottom:8px;

}

.accesibilidad__header h4{

    color:#666;

    font-size:20px;

    margin-bottom:18px;

}

.accesibilidad__header p{

    color:#777;

    font-size:18px;

    max-width:600px;

    margin:auto;

}

/*=========================================================
    GRID DE TARJETAS
=========================================================*/

.accesibilidad__grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin-top:35px;

}

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

.accesibilidad__tarjeta{

    background:#FFFFFF;

    border:1px solid #ECECEC;

    border-radius:18px;

    padding:24px;

    transition:.30s;

}

.accesibilidad__tarjeta:hover{

    transform:translateY(-3px);

    box-shadow:

        0 10px 30px rgba(0,0,0,.08);

}

/*=========================================================
    CABECERA TARJETA
=========================================================*/

.accesibilidad__cabecera{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

}

.accesibilidad__cabecera img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.accesibilidad__cabecera span{

    font-size:22px;

    font-weight:600;

    color:#5F3B8D;

}

.accesibilidad__tarjeta button{

    min-width:90px;

    padding:10px 18px;

    border-radius:10px;

    border:2px solid #7A3FA7;

    background:#FFF;

    color:#7A3FA7;

    cursor:pointer;

    transition:.25s;

    font-size:15px;

    font-weight:600;

}

.accesibilidad__tarjeta button:hover{

    background:#7A3FA7;

    color:#FFF;

}

.accesibilidad__tarjeta > div:last-child{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    justify-content:center;

}

/*=====================================================
    TAMAÑO DE TEXTO
=====================================================*/

body.texto-pequeno{

    font-size:90%;

}

body.texto-grande{

    font-size:2rem;

}

/*=====================================================
    INTERLINEADO
=====================================================*/

body.linea-media,
body.linea-media p,
body.linea-media li,
body.linea-media span{

    line-height:1.8 !important;

}

body.linea-grande,
body.linea-grande p,
body.linea-grande li,
body.linea-grande span{

    line-height:2.2 !important;

}

/*=====================================================
    CONTRASTE
=====================================================*/

body.contraste-alto{

    filter:contrast(2.2);

}

/*=====================================================
    MONOCROMÍA
=====================================================*/

body.monocromo{

    filter:grayscale(100%);

}

/*=====================================================
    ENLACES
=====================================================*/

body.enlaces-resaltados a{

    background:#ffeb3b;

    color:#000 !important;

    font-weight:bold;

    text-decoration:underline;

    padding:2px 4px;

    border-radius:4px;

    transition:.30s;

}

/*=====================================================
    LUPA
=====================================================*/

body.zoom125{

    zoom:1.25;

}

body.zoom150{

    zoom:1.5;

}

/*=====================================================
    MODO CONCENTRACIÓN
=====================================================*/

body.modo-concentracion header{

    opacity:.55;

}

body.modo-concentracion footer{

    opacity:.55;

}

body.modo-concentracion .sala{

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

}

/*=====================================================
    GUÍA DE LECTURA
=====================================================*/

#guiaLectura{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    display:none;

    z-index:9997;

}

#guiaLectura.activa{

    display:block;

}

#guiaLectura::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:calc(var(--guiaY) - 35px);

    background:rgba(0,0,0,.65);

}

#guiaLectura::after{

    content:"";

    position:absolute;

    left:0;

    top:calc(var(--guiaY) + 35px);

    width:100%;

    bottom:0;

    background:rgba(0,0,0,.65);

}