/* ==================================================
   VARIABLES
================================================== */

:root{

    --gd-button-color:#0057ff;

}

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

#gd-a11y-button{

    position:fixed;

    top:50%;
    right:18px;

    transform:translateY(-50%);

    width:62px;
    height:62px;

    border-radius:50%;

    background:var(--gd-button-color);

    color:#fff;

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

    font-size:30px;
    font-weight:bold;

    cursor:pointer;

    z-index:999999999;

    box-shadow:0 8px 25px rgba(0,0,0,.22);

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

    user-select:none;

}

#gd-a11y-button:hover{

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

}

/* ==================================================
   PANEL
================================================== */

#gd-a11y-panel{

    position:fixed;

    top:50%;
    right:-430px;

    transform:translateY(-50%);

    width:360px;

    max-height:88vh;

    overflow-y:scroll;

    -webkit-overflow-scrolling:touch;

    background:#111827;

    color:#fff;

    z-index:999999999;

    transition:right .25s ease;

    padding:24px;

    border-radius:22px;

    box-shadow:-8px 0 35px rgba(0,0,0,.28);

}

#gd-a11y-panel.active{

    right:20px;

}

/* ==================================================
   HEADER
================================================== */

.gd-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:24px;

}

.gd-header h2{

    margin:0;

    font-size:22px;

    color:#fff;

}

#gd-a11y-close{

    background:none;
    border:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    padding:0;

    line-height:1;

}

/* ==================================================
   TITULO
================================================== */

.gd-section-title{

    margin-bottom:18px;

    font-size:15px;

    font-weight:600;

    opacity:.8;

}

/* ==================================================
   CARDS
================================================== */

.gd-card{

    background:#1f2937;

    border-radius:16px;

    padding:18px;

    margin-bottom:14px;

    border:1px solid rgba(255,255,255,.06);

}

.gd-card-top{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

}

.gd-card-icon{

    width:44px;
    height:44px;

    border-radius:12px;

    background:#2563eb;

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

    font-size:20px;

    flex-shrink:0;

}

.gd-card-info{

    flex:1;

}

.gd-card-info strong{

    display:block;

    font-size:15px;

    margin-bottom:4px;

}

.gd-card-info span{

    font-size:12px;

    opacity:.75;

    line-height:1.4;

}

.gd-card p{

    margin-top:12px;

    font-size:13px;

    opacity:.82;

    line-height:1.6;

}

/* ==================================================
   SWITCH
================================================== */

.gd-switch{

    position:relative;

    width:52px;
    height:28px;

    flex-shrink:0;

}

.gd-switch input{

    display:none;

}

.gd-slider{

    position:absolute;

    inset:0;

    background:#374151;

    border-radius:30px;

    cursor:pointer;

    transition:background .25s ease;

}

.gd-slider::before{

    content:'';

    position:absolute;

    width:20px;
    height:20px;

    left:4px;
    top:4px;

    border-radius:50%;

    background:#fff;

    transition:transform .25s ease;

}

.gd-switch input:checked + .gd-slider{

    background:#2563eb;

}

.gd-switch input:checked + .gd-slider::before{

    transform:translateX(24px);

}

/* ==================================================
   RESET
================================================== */

.gd-a11y-reset-wrap{

    margin-top:22px;

}

#gd-a11y-reset{

    width:100%;

    border:none;

    background:#dc2626;

    color:#fff;

    padding:12px;

    border-radius:12px;

    cursor:pointer;

    font-size:14px;

    transition:opacity .25s ease;

}

#gd-a11y-reset:hover{

    opacity:.92;

}

/* ==================================================
   READING GUIDE
================================================== */

#gd-reading-guide{

    position:fixed;

    left:0;

    width:100%;

    height:4px;

    background:#ffcc00;

    z-index:99999999;

    pointer-events:none;

    display:none;

}

/* ==================================================
   VISUAL
================================================== */

body.gd-contrast{

    background:#000 !important;

    color:#fff !important;

}

body.gd-contrast p,
body.gd-contrast span,
body.gd-contrast li,
body.gd-contrast h1,
body.gd-contrast h2,
body.gd-contrast h3,
body.gd-contrast h4,
body.gd-contrast h5,
body.gd-contrast h6,
body.gd-contrast a,
body.gd-contrast label{

    color:#fff !important;

}

body.gd-contrast main,
body.gd-contrast section,
body.gd-contrast article,
body.gd-contrast .site-content{

    background:#000 !important;

}

/* ==================================================
   TEXTO GRANDE
================================================== */

body.gd-bigtext{

    font-size:115%;

}

body.gd-bigtext p,
body.gd-bigtext li{

    line-height:1.9;

}

/* ==================================================
   EPILEPSIA
================================================== */

body.gd-pauseanim .animated,
body.gd-pauseanim .slider,
body.gd-pauseanim .carousel,
body.gd-pauseanim .swiper,
body.gd-pauseanim [class*="animation"]{

    animation:none !important;
    transition:none !important;

}

body.gd-grayscale{

    filter:grayscale(100%);

}

/* ==================================================
   COGNITIVO
================================================== */

body.gd-cognitive p,
body.gd-cognitive li{

    line-height:2 !important;

    letter-spacing:.04em;

    word-spacing:.12em;

}

body.gd-cognitive img,
body.gd-cognitive video,
body.gd-cognitive iframe{

    opacity:.45 !important;

}

/* ==================================================
   ADHD
================================================== */

body.gd-adhd video,
body.gd-adhd iframe,
body.gd-adhd .slider,
body.gd-adhd .carousel,
body.gd-adhd .swiper,
body.gd-adhd .elementor-motion-effects-layer{

    display:none !important;

}

body.gd-adhd .animated,
body.gd-adhd .elementor-animation,
body.gd-adhd [class*="animation"]{

    animation:none !important;
    transition:none !important;

}

body.gd-adhd p{

    max-width:850px !important;

}

/* ==================================================
   CEGUERA
================================================== */

body.gd-blind a:focus,
body.gd-blind button:focus,
body.gd-blind input:focus,
body.gd-blind textarea:focus,
body.gd-blind select:focus{

    outline:4px solid #00ffd0 !important;

    outline-offset:4px;

}

body.gd-blind img{

    filter:grayscale(100%) !important;

}

/* ==================================================
   FOCUS
================================================== */

body.gd-focus *:focus{

    outline:4px solid #ffcc00 !important;

    outline-offset:4px !important;

}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:768px){

    #gd-a11y-button{

        width:58px;
        height:58px;

        font-size:28px;

        right:14px;
        bottom:18px;

        top:auto;

        transform:none !important;

    }

    #gd-a11y-button:hover{

        transform:none !important;

    }

    #gd-a11y-panel{

        position:fixed;

        left:0;
        right:0;
        bottom:-100%;

        top:auto;

        width:100%;

        height:78vh;

        max-height:78vh;

        border-radius:22px 22px 0 0;

        transform:none !important;

        transition:bottom .25s ease;

        padding:20px;

    }

    #gd-a11y-panel.active{

        bottom:0;
        right:0;

    }

}