/* =====================================================
           CONFIGURACIÓN GENERAL
        ===================================================== */

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        body {

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            color: #333;

            background-color: #f5f5f5;

            display: flex;

            flex-direction: column;

            min-height: 100vh;

            transition:
                font-size 0.3s ease,
                filter 0.3s ease;
        }


        /* =====================================================
           HEADER CON IMAGEN DE FONDO
        ===================================================== */

        header {

            background-image: url('imagen principal.jpg');

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            color: white;

            text-align: center;

            padding: 60px 20px;

            min-height: 230px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;
        }


        header h1 {

            margin: 0;

            font-size: 36px;

            font-weight: bold;

            text-shadow:
                2px 2px 5px
                rgba(0,0,0,.70);
        }


        header p {

            margin-top: 12px;

            font-size: 19px;

            text-shadow:
                1px 1px 4px
                rgba(0,0,0,.70);
        }


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

        main {

            flex: 1;

            width: 100%;
        }


        /* =====================================================
           SERVICIOS
        ===================================================== */

        .espacio {

            display: flex;

            justify-content: center;

            align-items: flex-start;

            gap: 80px;

            flex-wrap: wrap;

            margin-top: 45px;

            margin-bottom: 30px;

            padding: 0 20px;
        }


        .espacio a {

            color: #333;

            text-decoration: none;

            text-align: center;

            font-weight: bold;

            transition:
                transform 0.2s ease;
        }


        .espacio a:hover {

            transform:
                translateY(-5px);
        }


        /* =====================================================
           CÍRCULOS
        ===================================================== */

        .circulo {

            width: 130px;

            height: 130px;

            border-radius: 50%;

            background-color: #2e7d32;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: auto;

            box-shadow:
                0 4px 10px
                rgba(0,0,0,.20);

            transition:
                transform 0.2s ease,
                background-color 0.2s ease;
        }


        .circulo:hover {

            transform:
                scale(1.05);

            background-color:
                #1b5e20;
        }


        .circulo img {

            width: 75px;

            height: 75px;

            object-fit: contain;
        }


        /* =====================================================
           FOOTER
           SIEMPRE AL FINAL DE LA PÁGINA
        ===================================================== */

        footer {

            background-color: #fba313;

            color: black;

            padding: 30px 20px;

            margin-top: 50px;

            width: 100%;
        }


        footer a {

            color: green;

            font-weight: bold;
        }


        /* =====================================================
           BOTÓN DE ACCESIBILIDAD
        ===================================================== */

        .accessibility-button {

            position: fixed;

            left: 0;

            top: 50%;

            transform:
                translateY(-50%);

            width: 60px;

            height: 60px;

            border-radius:
                0 30px 30px 0;

            background-color:
                #2e7d32;

            color: white;

            border: 3px solid white;

            border-left: none;

            box-shadow:
                0 4px 12px
                rgba(0,0,0,.35);

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            z-index: 9999;

            font-size: 28px;

            transition:
                width .2s ease,
                background-color .2s ease;
        }


        .accessibility-button:hover {

            width: 70px;

            background-color:
                #1b5e20;
        }


        /* =====================================================
           PANEL DE ACCESIBILIDAD
        ===================================================== */

        .accessibility-panel {

            position: fixed;

            left: -380px;

            top: 0;

            width: 370px;

            max-width: 90%;

            height: 100vh;

            background-color: white;

            box-shadow:
                5px 0 20px
                rgba(0,0,0,.30);

            z-index: 10000;

            transition:
                left .3s ease;

            overflow-y: auto;
        }


        .accessibility-panel.active {

            left: 0;
        }


        /* =====================================================
           CABECERA DEL PANEL
        ===================================================== */

        .panel-header {

            background-color:
                #2e7d32;

            color: white;

            padding: 20px;

            display: flex;

            align-items: center;

            justify-content: space-between;
        }


        .panel-header h2 {

            margin: 0;

            font-size: 21px;
        }


        .close-button {

            border: none;

            background: transparent;

            color: white;

            font-size: 30px;

            cursor: pointer;
        }


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

        .panel-content {

            padding: 20px;
        }


        .panel-description {

            font-size: 14px;

            line-height: 1.5;

            color: #555;

            margin-bottom: 20px;
        }


        /* =====================================================
           OPCIONES DE ACCESIBILIDAD
        ===================================================== */

        .accessibility-option {

            width: 100%;

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 13px;

            margin-bottom: 10px;

            background: white;

            border: 1px solid #ddd;

            border-radius: 8px;

            cursor: pointer;

            text-align: left;

            font-size: 15px;
        }


        .accessibility-option:hover {

            background-color:
                #f1f8f2;

            border-color:
                #2e7d32;
        }


        .option-icon {

            width: 38px;

            height: 38px;

            min-width: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            background-color:
                #e8f5e9;

            color:
                #2e7d32;

            border-radius: 50%;

            font-weight: bold;

            font-size: 18px;
        }


        .option-text {

            font-weight: bold;
        }


        .option-description {

            display: block;

            font-size: 12px;

            color: #777;

            margin-top: 3px;

            font-weight: normal;
        }


        .separator {

            border: none;

            border-top:
                1px solid #ddd;

            margin: 20px 0;
        }


        /* =====================================================
           RESTABLECER
        ===================================================== */

        .reset-button {

            width: 100%;

            border: none;

            padding: 14px;

            background-color:
                #fba313;

            color: black;

            border-radius: 8px;

            font-weight: bold;

            cursor: pointer;

            font-size: 14px;
        }


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

        body.high-contrast {

            background-color: black;

            color: white;
        }


        body.high-contrast header {

            background-image: none;

            background-color: black;

            border-bottom:
                3px solid white;
        }


        body.high-contrast .espacio a {

            color: white;
        }


        body.high-contrast footer {

            background-color: black;

            color: white;

            border-top:
                3px solid white;
        }


        body.high-contrast footer a {

            color: yellow;
        }


        body.high-contrast h1,
        body.high-contrast h2 {

            color: yellow;
        }


        /* =====================================================
           ESCALA DE GRISES
        ===================================================== */

        body.grayscale {

            filter:
                grayscale(100%);
        }


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

        body.highlight-links a {

            background-color:
                yellow !important;

            color:
                black !important;

            text-decoration:
                underline !important;

            font-weight: bold;
        }


        /* =====================================================
           RESALTAR TÍTULOS
        ===================================================== */

        body.highlight-headings h1,
        body.highlight-headings h2,
        body.highlight-headings h3 {

            background-color:
                yellow !important;

            color:
                black !important;

            padding: 5px;
        }


        /* =====================================================
           TAMAÑO DEL TEXTO
        ===================================================== */

        body.text-large {

            font-size: 118%;
        }


        body.text-xlarge {

            font-size: 135%;
        }


        /* =====================================================
           ESPACIADO
        ===================================================== */

        body.text-spacing * {

            letter-spacing:
                .08em;

            word-spacing:
                .12em;
        }


        body.line-spacing * {

            line-height:
                2 !important;
        }


        /* =====================================================
           DETENER ANIMACIONES
        ===================================================== */

        body.no-animation *,
        body.no-animation *::before,
        body.no-animation *::after {

            animation: none !important;

            transition: none !important;
        }


        /* =====================================================
           MENSAJE DE AUDIO
        ===================================================== */

        #speechStatus {

            position: fixed;

            bottom: 20px;

            left: 50%;

            transform:
                translateX(-50%);

            background-color:
                #2e7d32;

            color: white;

            padding: 12px 20px;

            border-radius: 8px;

            display: none;

            z-index: 10001;

            box-shadow:
                0 3px 10px
                rgba(0,0,0,.3);
        }


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

        @media(max-width:600px) {

            .accessibility-panel {

                width: 100%;

                max-width: 100%;
            }


            .accessibility-button {

                width: 52px;

                height: 52px;

                font-size: 24px;
            }


            .espacio {

                gap: 30px;
            }


            .circulo {

                width: 110px;

                height: 110px;
            }


            header {

                padding:
                    45px 15px;
            }


            header h1 {

                font-size: 27px;
            }

        }