diff --git a/.gitignore b/.gitignore
index 81eb070..403aafc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ test-results
 public/src
 eslint-report.txt
 coverage/
+CLAUDE.md
 .vite/
 uploads/images/collaborators/
 uploads/images/events/
diff --git a/content/i18n/en.md b/content/i18n/en.md
index daebbd8..7a96f30 100644
--- a/content/i18n/en.md
+++ b/content/i18n/en.md
@@ -43,8 +43,22 @@ updatedAt: "2026-05-21T03:25:31.940Z"
     "switch_to_light": "Switch to light mode"
   },
   "a11y": {
-    "enable": "Enable accessibility mode: higher contrast, larger text and reduced motion",
-    "disable": "Disable accessibility mode"
+    "open": "Accessibility preferences",
+    "title": "Accessibility preferences",
+    "close": "Close",
+    "master": "Turn on every option",
+    "theme_label": "Color theme",
+    "theme_system": "Use system setting",
+    "theme_light": "Light",
+    "theme_dark": "Dark",
+    "text_size_label": "Text size",
+    "text_normal": "Normal",
+    "text_large": "Large",
+    "text_xlarge": "Extra large",
+    "high_contrast": "High contrast",
+    "reduce_motion": "Reduce motion",
+    "underline_links": "Underline links",
+    "reset": "Reset preferences"
   },
   "itinerary": {
     "schedule": "Activity schedule",
diff --git a/content/i18n/es.md b/content/i18n/es.md
index c0f69ed..390ebc7 100644
--- a/content/i18n/es.md
+++ b/content/i18n/es.md
@@ -43,8 +43,22 @@ updatedAt: "2026-05-21T03:25:31.942Z"
     "switch_to_light": "Cambiar a modo claro"
   },
   "a11y": {
-    "enable": "Activar modo accesibilidad: mas contraste, letra mas grande y menos animaciones",
-    "disable": "Desactivar modo accesibilidad"
+    "open": "Preferencias de accesibilidad",
+    "title": "Preferencias de accesibilidad",
+    "close": "Cerrar",
+    "master": "Activar todas las opciones",
+    "theme_label": "Tema de color",
+    "theme_system": "Usar ajuste del sistema",
+    "theme_light": "Claro",
+    "theme_dark": "Oscuro",
+    "text_size_label": "Tamaño del texto",
+    "text_normal": "Normal",
+    "text_large": "Grande",
+    "text_xlarge": "Muy grande",
+    "high_contrast": "Alto contraste",
+    "reduce_motion": "Reducir animaciones",
+    "underline_links": "Subrayar enlaces",
+    "reset": "Restablecer preferencias"
   },
   "itinerary": {
     "schedule": "Programación de actividades",
diff --git a/package-lock.json b/package-lock.json
index 71f5a13..36ca959 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1269,9 +1269,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.31",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.31.tgz",
-      "integrity": "sha512-MujYO3eP72uvmSE0i4wltsodRfIpZATP3jvzRNRGGxgzId7aVocVJJV3nf01qnzzKFGxQVC9bpWxl5cjxTr/7Q==",
+      "version": "2.11.20",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.20.tgz",
+      "integrity": "sha512-H0ulySigv6icDJ1F7SjtdCD6PrhTpdYCmP0CactWy1+ekh0AFd0o1Wn5T8b+hnTmdBx19u9yhL6wvCylXMY7zw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -1319,9 +1319,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
-      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "version": "4.28.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz",
+      "integrity": "sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==",
       "dev": true,
       "funding": [
         {
@@ -1339,11 +1339,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.12",
-        "caniuse-lite": "^1.0.30001782",
-        "electron-to-chromium": "^1.5.328",
-        "node-releases": "^2.0.36",
-        "update-browserslist-db": "^1.2.3"
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
+        "electron-to-chromium": "^1.5.402",
+        "node-releases": "^2.0.53",
+        "update-browserslist-db": "^1.3.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -1423,9 +1423,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001793",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
-      "integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+      "version": "1.0.30001810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
+      "integrity": "sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==",
       "dev": true,
       "funding": [
         {
@@ -1807,9 +1807,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.360",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.360.tgz",
-      "integrity": "sha512-GkcBt6YYAw9SxFWn+xVar4cLVGlXVuswwtRLBozi2zp0GjXs4ZnOrqV4zbXzg35n7w81hCkyJNYicgXlVHAmBA==",
+      "version": "1.5.420",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.420.tgz",
+      "integrity": "sha512-2yD6XreGusOfNV+dUcvipJEXc3n/n7fgr7996aszTG+YY5E4mqM4tOq/3uhP129cazL9YHbVWSpc79ePotWtPA==",
       "dev": true,
       "license": "ISC"
     },
@@ -3913,11 +3913,14 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.44",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.44.tgz",
-      "integrity": "sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ==",
+      "version": "2.0.54",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.54.tgz",
+      "integrity": "sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -4437,9 +4440,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5627,9 +5630,9 @@
       "license": "MIT"
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
+      "integrity": "sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==",
       "dev": true,
       "funding": [
         {
diff --git a/package.json b/package.json
index 9489505..edbd6db 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,9 @@
     "dev": "concurrently -n PUB,ADMIN -c \"cyan,magenta\" \"vite\" \"vite --config vite-admin.config.ts --port 5174\"",
     "dev:admin": "pkill -f 'vite.*5174' 2>/dev/null; npx vite --config vite-admin.config.ts --port 5174",
     "build": "vite build",
+    "typecheck": "tsc --noEmit",
     "test:prepush": "npm run test:drag && npm run build",
-    "test:drag": "node --test src/utils/theme.test.js src/utils/accessibility.test.js src/pages/adminDragModel.test.js src/pages/eventPageModel.test.js src/utils/mediaEmbeds.test.js src/utils/adminMediaUpload.test.js src/utils/adminAssetApiValidation.test.js src/utils/adminPathSecurity.test.js src/components/itinerary/itineraryModel.test.js src/components/home/homepageRefinements.test.js",
+    "test:drag": "node --test src/utils/theme.test.js src/utils/accessibility.test.js src/pages/adminDragModel.test.js src/pages/eventPageModel.test.js src/utils/mediaEmbeds.test.js src/utils/adminMediaUpload.test.js src/utils/adminAssetApiValidation.test.js src/utils/adminPathSecurity.test.js src/components/itinerary/itineraryModel.test.js src/components/home/homepageRefinements.test.js src/components/home/heroCanvasBackdrop.test.js",
     "test:e2e": "npm run generate:content && playwright test",
     "test:e2e:base-path": "playwright test --config playwright.base-path.config.ts",
     "setup:hooks": "git config core.hooksPath .githooks",
diff --git a/playwright.config.ts b/playwright.config.ts
index 25980a5..afce3da 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,6 +2,7 @@ import { defineConfig, devices } from 'playwright/test';
 
 export default defineConfig({
   testDir: './tests/e2e',
+  testIgnore: ['homepageBasePath.spec.ts', 'legalBasePath.spec.ts'],
   fullyParallel: true,
   reporter: 'line',
   use: {
diff --git a/public/api/i18n/en.json b/public/api/i18n/en.json
index d5f3aa3..246170d 100644
--- a/public/api/i18n/en.json
+++ b/public/api/i18n/en.json
@@ -42,8 +42,22 @@
       "switch_to_light": "Switch to light mode"
     },
     "a11y": {
-      "enable": "Enable accessibility mode: higher contrast, larger text and reduced motion",
-      "disable": "Disable accessibility mode"
+      "open": "Accessibility preferences",
+      "title": "Accessibility preferences",
+      "close": "Close",
+      "master": "Turn on every option",
+      "theme_label": "Color theme",
+      "theme_system": "Use system setting",
+      "theme_light": "Light",
+      "theme_dark": "Dark",
+      "text_size_label": "Text size",
+      "text_normal": "Normal",
+      "text_large": "Large",
+      "text_xlarge": "Extra large",
+      "high_contrast": "High contrast",
+      "reduce_motion": "Reduce motion",
+      "underline_links": "Underline links",
+      "reset": "Reset preferences"
     },
     "itinerary": {
       "schedule": "Activity schedule",
diff --git a/public/api/i18n/es.json b/public/api/i18n/es.json
index eecf25b..52fa27b 100644
--- a/public/api/i18n/es.json
+++ b/public/api/i18n/es.json
@@ -42,8 +42,22 @@
       "switch_to_light": "Cambiar a modo claro"
     },
     "a11y": {
-      "enable": "Activar modo accesibilidad: mas contraste, letra mas grande y menos animaciones",
-      "disable": "Desactivar modo accesibilidad"
+      "open": "Preferencias de accesibilidad",
+      "title": "Preferencias de accesibilidad",
+      "close": "Cerrar",
+      "master": "Activar todas las opciones",
+      "theme_label": "Tema de color",
+      "theme_system": "Usar ajuste del sistema",
+      "theme_light": "Claro",
+      "theme_dark": "Oscuro",
+      "text_size_label": "Tamaño del texto",
+      "text_normal": "Normal",
+      "text_large": "Grande",
+      "text_xlarge": "Muy grande",
+      "high_contrast": "Alto contraste",
+      "reduce_motion": "Reducir animaciones",
+      "underline_links": "Subrayar enlaces",
+      "reset": "Restablecer preferencias"
     },
     "itinerary": {
       "schedule": "Programación de actividades",
diff --git a/public/index.html b/public/index.html
index 7162bcd..76fb71b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,16 +19,6 @@
     <meta name="twitter:title" content="VRTon" />
     <meta name="twitter:description" content="Usando tecnologia para cambiar vidas a traves de la filantropia en realidad virtual." />
     <meta name="twitter:image" content="https://vrton.github.io/vrton-cms/android-chrome-512x512.png" />
-    <!--
-      Resuelve el tema antes del primer pintado para que no haya flash blanco
-      al cargar en modo oscuro. Tiene que ser inline y sincrono: si esperara al
-      bundle de React, la pagina ya se dibujo clara.
-
-      Duplica a proposito la logica de src/utils/theme.js (resolveTheme y
-      applyTheme). Son seis lineas y no hay forma de importar el modulo aca sin
-      volver a introducir el flash. Si cambia la clave o los colores, hay que
-      tocar los dos lados.
-    -->
     <script>
       (function () {
         try {
@@ -42,13 +32,21 @@
             meta.setAttribute('content', theme === 'dark' ? '#12100f' : '#ffffff');
           }
 
-          // Modo accesible, por el mismo motivo: sin esto la pagina se dibuja
-          // con la tipografia normal y salta al tamano grande recien cuando
-          // monta React. La clase del body la pone React, porque el <body>
-          // todavia no existe en este punto del <head>.
-          if (window.localStorage.getItem('vrton-accessibility') === 'on') {
-            document.documentElement.setAttribute('data-a11y', 'on');
+          var raw = window.localStorage.getItem('vrton-accessibility');
+          var textSize = 'normal';
+          try {
+            if (raw === 'on') {
+              textSize = 'large';
+            } else if (raw && raw !== 'off') {
+              var parsed = JSON.parse(raw);
+              if (parsed && (parsed.textSize === 'large' || parsed.textSize === 'xlarge')) {
+                textSize = parsed.textSize;
+              }
+            }
+          } catch (e) {
+            textSize = 'normal';
           }
+          document.documentElement.setAttribute('data-a11y-text-size', textSize);
         } catch (e) {
           document.documentElement.setAttribute('data-theme', 'light');
         }
diff --git a/src/App.tsx b/src/App.tsx
index 0755cca..45e0944 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,14 +2,12 @@ import { useEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import PublicLayout from './components/layout/PublicLayout';
-import AdminShell from './components/layout/AdminShell';
 import HomePage from './pages/HomePage';
 import NotFoundPage from './pages/NotFoundPage';
 import PageRenderer from './pages/PageRenderer';
 import EventPage from './pages/EventPage';
-import AdminPage from './pages/AdminPage';
 import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from './i18n/languages';
-import { useAccessibilityMode } from './hooks/useAccessibility.ts';
+import { useReduceMotion } from './hooks/useAccessibility.ts';
 
 type LegalSection = 'terms' | 'code-of-conduct' | 'volunteering';
 
@@ -39,12 +37,10 @@ function LegacyLegalRedirect({
   return <Navigate replace to={`${basePath}#${anchors[language][section]}`} />;
 }
 
-const IS_DEV = import.meta.env.DEV;
-
 function App() {
   const location = useLocation();
   const { i18n } = useTranslation();
-  const reduceMotion = useAccessibilityMode();
+  const reduceMotion = useReduceMotion();
 
   useEffect(() => {
     const firstSegment = location.pathname.split('/').filter(Boolean)[0];
@@ -111,12 +107,6 @@ function App() {
 
   return (
     <Routes>
-      {IS_DEV && (
-        <Route element={<AdminShell />}>
-          <Route path="/admin" element={<AdminPage />} />
-        </Route>
-      )}
-
       <Route element={<PublicLayout />}>
         {legacyLegalRoutes.map((route) => (
           <Route
diff --git a/src/components/common/AccessibilityPanel.tsx b/src/components/common/AccessibilityPanel.tsx
new file mode 100644
index 0000000..99bfc93
--- /dev/null
+++ b/src/components/common/AccessibilityPanel.tsx
@@ -0,0 +1,302 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAccessibilityControls } from '../../hooks/useAccessibility.ts';
+import useTheme from '../../hooks/useTheme.ts';
+import {
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_NORMAL,
+  TEXT_SIZE_XLARGE,
+} from '../../utils/accessibility.ts';
+import type { TextSize } from '../../utils/accessibility.ts';
+import { DARK, LIGHT, SYSTEM } from '../../utils/theme.ts';
+import type { ThemeChoice } from '../../utils/theme.ts';
+
+const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+interface SegmentedOption<T extends string> {
+  value: T
+  label: string
+}
+
+interface SegmentedControlProps<T extends string> {
+  label: string
+  value: T
+  options: Array<SegmentedOption<T>>
+  onChange: (_value: T) => void
+}
+
+function SegmentedControl<T extends string>({ label, value, options, onChange }: SegmentedControlProps<T>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const offset = event.key === 'ArrowRight' || event.key === 'ArrowDown'
+      ? 1
+      : event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+        ? -1
+        : 0;
+
+    if (offset === 0) {
+      return;
+    }
+
+    event.preventDefault();
+    const index = options.findIndex((option) => option.value === value);
+    const next = options[(index + offset + options.length) % options.length];
+    onChange(next.value);
+
+    const buttons = containerRef.current?.querySelectorAll('button');
+    const target = buttons?.[options.indexOf(next)];
+    if (target instanceof HTMLElement) {
+      target.focus();
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="a11y-segmented"
+      role="radiogroup"
+      aria-label={label}
+      onKeyDown={handleKeyDown}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            tabIndex={selected ? 0 : -1}
+            className={`a11y-segment${selected ? ' a11y-segment-active' : ''}`}
+            onClick={() => onChange(option.value)}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+interface PreferenceCheckboxProps {
+  label: string
+  checked: boolean
+  onChange: (_checked: boolean) => void
+  indeterminate?: boolean
+  className?: string
+}
+
+function PreferenceCheckbox({ label, checked, onChange, indeterminate, className }: PreferenceCheckboxProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [indeterminate]);
+
+  return (
+    <label className={className ? `a11y-check ${className}` : 'a11y-check'}>
+      <input
+        ref={inputRef}
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
+function AccessibilityPanel() {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const titleId = useId();
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  const {
+    preferences,
+    allEnabled,
+    partiallyEnabled,
+    setAllEnabled,
+    setTextSize,
+    setHighContrast,
+    setReduceMotion,
+    setUnderlineLinks,
+    reset,
+  } = useAccessibilityControls();
+  const { choice, setChoice } = useTheme();
+
+  const close = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    const dialog = dialogRef.current;
+    const first = dialog?.querySelector(FOCUSABLE);
+    if (first instanceof HTMLElement) {
+      first.focus();
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        close();
+        return;
+      }
+
+      if (event.key !== 'Tab' || !dialog) {
+        return;
+      }
+
+      const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE))
+        .filter((node): node is HTMLElement => node instanceof HTMLElement && node.tabIndex !== -1);
+
+      if (focusable.length === 0) {
+        return;
+      }
+
+      const edge = event.shiftKey ? focusable[0] : focusable[focusable.length - 1];
+      if (document.activeElement === edge) {
+        event.preventDefault();
+        (event.shiftKey ? focusable[focusable.length - 1] : focusable[0]).focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open, close]);
+
+  const themeOptions: Array<SegmentedOption<ThemeChoice>> = [
+    { value: SYSTEM, label: t('a11y.theme_system') },
+    { value: LIGHT, label: t('a11y.theme_light') },
+    { value: DARK, label: t('a11y.theme_dark') },
+  ];
+
+  const textSizeOptions: Array<SegmentedOption<TextSize>> = [
+    { value: TEXT_SIZE_NORMAL, label: t('a11y.text_normal') },
+    { value: TEXT_SIZE_LARGE, label: t('a11y.text_large') },
+    { value: TEXT_SIZE_XLARGE, label: t('a11y.text_xlarge') },
+  ];
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="a11y-fab"
+        onClick={() => setOpen(true)}
+        title={t('a11y.open')}
+        aria-label={t('a11y.open')}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+      >
+        <span aria-hidden="true">Aa</span>
+      </button>
+
+      {open && (
+        <div className="a11y-overlay" onClick={close}>
+          <div
+            ref={dialogRef}
+            className="a11y-dialog"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className="a11y-dialog-header">
+              <h2 id={titleId} className="a11y-dialog-title">{t('a11y.title')}</h2>
+              <button
+                type="button"
+                className="a11y-dialog-close"
+                onClick={close}
+                title={t('a11y.close')}
+                aria-label={t('a11y.close')}
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+
+            <div className="a11y-dialog-body">
+              <PreferenceCheckbox
+                className="a11y-check-master"
+                label={t('a11y.master')}
+                checked={allEnabled}
+                indeterminate={partiallyEnabled}
+                onChange={setAllEnabled}
+              />
+
+              <div className="a11y-field">
+                <span className="a11y-field-label">{t('a11y.theme_label')}</span>
+                <SegmentedControl
+                  label={t('a11y.theme_label')}
+                  value={choice}
+                  options={themeOptions}
+                  onChange={setChoice}
+                />
+              </div>
+
+              <div className="a11y-field">
+                <span className="a11y-field-label">{t('a11y.text_size_label')}</span>
+                <SegmentedControl
+                  label={t('a11y.text_size_label')}
+                  value={preferences.textSize}
+                  options={textSizeOptions}
+                  onChange={setTextSize}
+                />
+              </div>
+
+              <PreferenceCheckbox
+                label={t('a11y.high_contrast')}
+                checked={preferences.highContrast}
+                onChange={setHighContrast}
+              />
+              <PreferenceCheckbox
+                label={t('a11y.reduce_motion')}
+                checked={preferences.reduceMotion}
+                onChange={setReduceMotion}
+              />
+              <PreferenceCheckbox
+                label={t('a11y.underline_links')}
+                checked={preferences.underlineLinks}
+                onChange={setUnderlineLinks}
+              />
+            </div>
+
+            <div className="a11y-dialog-actions">
+              <button
+                type="button"
+                className="a11y-dialog-reset"
+                onClick={() => {
+                  reset();
+                  setChoice(SYSTEM);
+                }}
+              >
+                {t('a11y.reset')}
+              </button>
+              <button type="button" className="a11y-dialog-done" onClick={close}>
+                {t('a11y.close')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default AccessibilityPanel;
diff --git a/src/components/common/AccessibilityToggle.tsx b/src/components/common/AccessibilityToggle.tsx
deleted file mode 100644
index 5460807..0000000
--- a/src/components/common/AccessibilityToggle.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAccessibility } from '../../hooks/useAccessibility.ts';
-
-function AccessibilityToggle() {
-  const { t } = useTranslation();
-  const { enabled, toggle } = useAccessibility();
-
-  const label = enabled ? t('a11y.disable') : t('a11y.enable');
-
-  return (
-    <button
-      type="button"
-      className={`a11y-toggle${enabled ? ' a11y-toggle-active' : ''}`}
-      onClick={toggle}
-      title={label}
-      aria-label={label}
-      aria-pressed={enabled}
-    >
-      <i className="fa-solid fa-universal-access" aria-hidden="true" />
-    </button>
-  );
-}
-
-export default AccessibilityToggle;
diff --git a/src/components/home/Carousel.tsx b/src/components/home/Carousel.tsx
index fae908d..8f10396 100644
--- a/src/components/home/Carousel.tsx
+++ b/src/components/home/Carousel.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import type { EventItem } from '../../types';
 import { withBasePath } from '../../utils/assetPath';
-import { useAccessibilityMode } from '../../hooks/useAccessibility.ts';
+import { useReduceMotion } from '../../hooks/useAccessibility.ts';
 
 interface CarouselProps {
   events: EventItem[]
@@ -22,7 +22,7 @@ function Carousel({ events, year, href, linkLabel }: CarouselProps) {
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const transitionTimeoutRef = useRef<number | null>(null);
   const totalSlides = events.length;
-  const reduceMotion = useAccessibilityMode();
+  const reduceMotion = useReduceMotion();
 
   const goToSlide = useCallback((index: number, direction: 'next' | 'prev') => {
     if (!totalSlides) {
diff --git a/src/components/home/FlyingHeartsBackground.tsx b/src/components/home/FlyingHeartsBackground.tsx
index 64a5851..bf8a44d 100644
--- a/src/components/home/FlyingHeartsBackground.tsx
+++ b/src/components/home/FlyingHeartsBackground.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
+import { applyTransparentBackdrop } from './heroCanvasBackdrop.ts';
 
 interface HeartData {
   mesh: THREE.Mesh
@@ -33,7 +34,6 @@ function FlyingHeartsBackground() {
 
     const container = mountRef.current;
     const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0xffffff);
 
     const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 100);
     camera.position.z = 18;
@@ -41,7 +41,7 @@ function FlyingHeartsBackground() {
     const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.setSize(container.clientWidth, container.clientHeight);
-    renderer.setClearColor(0xffffff, 1);
+    applyTransparentBackdrop(scene, renderer);
     renderer.outputColorSpace = THREE.SRGBColorSpace;
     renderer.premultipliedAlpha = true;
     container.appendChild(renderer.domElement);
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 0b15a50..71458f4 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import Button from '../common/Button';
 import SocialIcons from '../common/SocialIcons';
 import { withBasePath } from '../../utils/assetPath';
-import { useAccessibilityMode } from '../../hooks/useAccessibility.ts';
+import { useReduceMotion } from '../../hooks/useAccessibility.ts';
 
 const FlyingHeartsBackground = lazy(() => import('./FlyingHeartsBackground'));
 
@@ -30,7 +30,7 @@ interface HeroProps {
 }
 
 function Hero({ config = {} }: HeroProps) {
-  const reduceMotion = useAccessibilityMode();
+  const reduceMotion = useReduceMotion();
   const { t } = useTranslation();
 
   const title = config.title || t('home.hero.title');
diff --git a/src/components/home/heroCanvasBackdrop.test.js b/src/components/home/heroCanvasBackdrop.test.js
new file mode 100644
index 0000000..429fbcf
--- /dev/null
+++ b/src/components/home/heroCanvasBackdrop.test.js
@@ -0,0 +1,33 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { applyTransparentBackdrop, HERO_CLEAR_ALPHA, HERO_CLEAR_COLOR } from './heroCanvasBackdrop.ts';
+
+function createRendererStub() {
+  const calls = [];
+
+  return {
+    calls,
+    setClearColor(color, alpha) {
+      calls.push([color, alpha]);
+    },
+  };
+}
+
+describe('hero canvas backdrop', () => {
+  it('leaves the scene without its own background so the page shows through', () => {
+    const scene = { background: { isColor: true } };
+
+    applyTransparentBackdrop(scene, createRendererStub());
+
+    assert.equal(scene.background, null);
+  });
+
+  it('clears the canvas with zero alpha instead of an opaque colour', () => {
+    const renderer = createRendererStub();
+
+    applyTransparentBackdrop({ background: null }, renderer);
+
+    assert.equal(HERO_CLEAR_ALPHA, 0);
+    assert.deepStrictEqual(renderer.calls, [[HERO_CLEAR_COLOR, HERO_CLEAR_ALPHA]]);
+  });
+});
diff --git a/src/components/home/heroCanvasBackdrop.ts b/src/components/home/heroCanvasBackdrop.ts
new file mode 100644
index 0000000..0024644
--- /dev/null
+++ b/src/components/home/heroCanvasBackdrop.ts
@@ -0,0 +1,15 @@
+export const HERO_CLEAR_COLOR = 0x000000;
+export const HERO_CLEAR_ALPHA = 0;
+
+interface BackdropScene {
+  background: unknown
+}
+
+interface BackdropRenderer {
+  setClearColor: (_color: number, _alpha: number) => void
+}
+
+export function applyTransparentBackdrop(scene: BackdropScene, renderer: BackdropRenderer) {
+  scene.background = null;
+  renderer.setClearColor(HERO_CLEAR_COLOR, HERO_CLEAR_ALPHA);
+}
diff --git a/src/components/layout/NavBar.tsx b/src/components/layout/NavBar.tsx
index ee4b75a..cebac0b 100644
--- a/src/components/layout/NavBar.tsx
+++ b/src/components/layout/NavBar.tsx
@@ -3,8 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import LanguageSwitcher from '../common/LanguageSwitcher';
 import ThemeToggle from '../common/ThemeToggle';
-import AccessibilityToggle from '../common/AccessibilityToggle';
-import { useAccessibilityMode } from '../../hooks/useAccessibility.ts';
+import { useReduceMotion } from '../../hooks/useAccessibility.ts';
 import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from '../../i18n/languages';
 import { withBasePath } from '../../utils/assetPath';
 
@@ -13,7 +12,7 @@ const supportedCodes = new Set(SUPPORTED_LANGUAGES.map((lang) => lang.code));
 function NavBar() {
   const { t, i18n } = useTranslation();
   const location = useLocation();
-  const reduceMotion = useAccessibilityMode();
+  const reduceMotion = useReduceMotion();
 
   const normalizedLanguage = i18n.language.split('-')[0];
   const activeLang = supportedCodes.has(normalizedLanguage) ? normalizedLanguage : DEFAULT_LANGUAGE;
@@ -108,9 +107,6 @@ function NavBar() {
           <li className="nav-item nav-theme-item">
             <ThemeToggle />
           </li>
-          <li className="nav-item nav-a11y-item">
-            <AccessibilityToggle />
-          </li>
         </ul>
       </div>
     </nav>
diff --git a/src/components/layout/PublicLayout.tsx b/src/components/layout/PublicLayout.tsx
index 87e79f5..f9b9481 100644
--- a/src/components/layout/PublicLayout.tsx
+++ b/src/components/layout/PublicLayout.tsx
@@ -2,11 +2,12 @@ import React, { useEffect } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import NavBar from './NavBar';
 import Footer from './Footer';
-import { useAccessibilityMode } from '../../hooks/useAccessibility.ts';
+import AccessibilityPanel from '../common/AccessibilityPanel';
+import { useReduceMotion } from '../../hooks/useAccessibility.ts';
 
 function PublicLayout() {
   const location = useLocation();
-  const reduceMotion = useAccessibilityMode();
+  const reduceMotion = useReduceMotion();
   const hideShell = location.pathname === '/discord' || location.pathname === '/discord/' || location.pathname === '/discord.html';
 
   useEffect(() => {
@@ -54,6 +55,7 @@ function PublicLayout() {
       {!hideShell && <NavBar />}
       <Outlet />
       {!hideShell && <Footer />}
+      {!hideShell && <AccessibilityPanel />}
     </>
   );
 }
diff --git a/src/components/page/PageUI.tsx b/src/components/page/PageUI.tsx
index f5deca7..1c436ce 100644
--- a/src/components/page/PageUI.tsx
+++ b/src/components/page/PageUI.tsx
@@ -256,7 +256,6 @@ function DragHandleButton({ id, data, icon, title }: DragHandleButtonProps) {
 }
 
 interface AdminPageProps {
-  contentMode: string
   pages: PageGroup[]
   normalizedFiles: Array<{ path: string; page: string; lang: string; section: string }>
   activePath: string
diff --git a/src/generated/i18n/en.json b/src/generated/i18n/en.json
index d5f3aa3..246170d 100644
--- a/src/generated/i18n/en.json
+++ b/src/generated/i18n/en.json
@@ -42,8 +42,22 @@
       "switch_to_light": "Switch to light mode"
     },
     "a11y": {
-      "enable": "Enable accessibility mode: higher contrast, larger text and reduced motion",
-      "disable": "Disable accessibility mode"
+      "open": "Accessibility preferences",
+      "title": "Accessibility preferences",
+      "close": "Close",
+      "master": "Turn on every option",
+      "theme_label": "Color theme",
+      "theme_system": "Use system setting",
+      "theme_light": "Light",
+      "theme_dark": "Dark",
+      "text_size_label": "Text size",
+      "text_normal": "Normal",
+      "text_large": "Large",
+      "text_xlarge": "Extra large",
+      "high_contrast": "High contrast",
+      "reduce_motion": "Reduce motion",
+      "underline_links": "Underline links",
+      "reset": "Reset preferences"
     },
     "itinerary": {
       "schedule": "Activity schedule",
diff --git a/src/generated/i18n/es.json b/src/generated/i18n/es.json
index eecf25b..52fa27b 100644
--- a/src/generated/i18n/es.json
+++ b/src/generated/i18n/es.json
@@ -42,8 +42,22 @@
       "switch_to_light": "Cambiar a modo claro"
     },
     "a11y": {
-      "enable": "Activar modo accesibilidad: mas contraste, letra mas grande y menos animaciones",
-      "disable": "Desactivar modo accesibilidad"
+      "open": "Preferencias de accesibilidad",
+      "title": "Preferencias de accesibilidad",
+      "close": "Cerrar",
+      "master": "Activar todas las opciones",
+      "theme_label": "Tema de color",
+      "theme_system": "Usar ajuste del sistema",
+      "theme_light": "Claro",
+      "theme_dark": "Oscuro",
+      "text_size_label": "Tamaño del texto",
+      "text_normal": "Normal",
+      "text_large": "Grande",
+      "text_xlarge": "Muy grande",
+      "high_contrast": "Alto contraste",
+      "reduce_motion": "Reducir animaciones",
+      "underline_links": "Subrayar enlaces",
+      "reset": "Restablecer preferencias"
     },
     "itinerary": {
       "schedule": "Programación de actividades",
diff --git a/src/hooks/useAccessibility.ts b/src/hooks/useAccessibility.ts
index 9658e28..0c7c658 100644
--- a/src/hooks/useAccessibility.ts
+++ b/src/hooks/useAccessibility.ts
@@ -1,76 +1,109 @@
 import { useCallback, useEffect, useState } from 'react';
 import {
-  applyAccessibility,
-  readStoredAccessibility,
-  resolveAccessibility,
-  writeStoredAccessibility,
+  ALL_ON_PREFERENCES,
+  DEFAULT_PREFERENCES,
+  applyPreferences,
+  areAllPreferencesOn,
+  clearStoredPreferences,
+  isAnyPreferenceOn,
+  readStoredPreferences,
+  resolvePreferences,
+  withPreference,
+  writeStoredPreferences,
 } from '../utils/accessibility.ts';
+import type { AccessibilityPreferences, TextSize } from '../utils/accessibility.ts';
 
-/*
-  Store minimo a nivel de modulo en vez de un Context.
+let currentPreferences: AccessibilityPreferences = { ...DEFAULT_PREFERENCES };
+const listeners = new Set<(_value: AccessibilityPreferences) => void>();
 
-  El modo accesible lo tienen que leer componentes que estan muy repartidos:
-  el listener de ripple vive en App, el scroll suave en PublicLayout y NavBar,
-  el autoplay en Carousel y el loop de Three.js en FlyingHeartsBackground.
-  Envolver todo en un provider obligaria a tocar tambien src/admin.tsx, que
-  monta varios de estos componentes y no deberia saber nada del modo accesible.
-
-  Con un store de modulo cualquier componente se suscribe solo, y en el admin
-  simplemente lee false y no cambia nada.
-*/
-let currentValue = false;
-const listeners = new Set<(_value: boolean) => void>();
-
-function notify(value: boolean): void {
-  currentValue = value;
-  listeners.forEach((listener) => listener(value));
+function notify(next: AccessibilityPreferences): void {
+  currentPreferences = next;
+  applyPreferences(next);
+  listeners.forEach((listener) => listener(next));
 }
 
-/** Estado inicial, leido una sola vez al cargar el modulo. */
-function readInitial(): boolean {
+function readInitial(): AccessibilityPreferences {
   if (typeof window === 'undefined') {
-    return false;
+    return { ...DEFAULT_PREFERENCES };
   }
-  return resolveAccessibility(readStoredAccessibility());
+  return resolvePreferences(readStoredPreferences());
 }
 
-currentValue = readInitial();
+currentPreferences = readInitial();
 
-/** Solo lectura. Para los componentes que reaccionan al modo. */
-export function useAccessibilityMode(): boolean {
-  const [enabled, setEnabled] = useState<boolean>(currentValue);
+export function useAccessibilityPreferences(): AccessibilityPreferences {
+  const [preferences, setPreferences] = useState<AccessibilityPreferences>(currentPreferences);
 
   useEffect(() => {
-    listeners.add(setEnabled);
-    setEnabled(currentValue);
+    listeners.add(setPreferences);
+    setPreferences(currentPreferences);
     return () => {
-      listeners.delete(setEnabled);
+      listeners.delete(setPreferences);
     };
   }, []);
 
-  return enabled;
+  return preferences;
 }
 
-export interface UseAccessibilityResult {
-  enabled: boolean
-  toggle: () => void
+export function useReduceMotion(): boolean {
+  return useAccessibilityPreferences().reduceMotion;
 }
 
-/** Lectura y escritura. Lo usa el boton del navbar. */
-export function useAccessibility(): UseAccessibilityResult {
-  const enabled = useAccessibilityMode();
+export interface UseAccessibilityControlsResult {
+  preferences: AccessibilityPreferences
+  allEnabled: boolean
+  partiallyEnabled: boolean
+  setAllEnabled: (_enabled: boolean) => void
+  setTextSize: (_size: TextSize) => void
+  setHighContrast: (_enabled: boolean) => void
+  setReduceMotion: (_enabled: boolean) => void
+  setUnderlineLinks: (_enabled: boolean) => void
+  reset: () => void
+}
+
+export function useAccessibilityControls(): UseAccessibilityControlsResult {
+  const preferences = useAccessibilityPreferences();
 
   useEffect(() => {
-    applyAccessibility(enabled);
-  }, [enabled]);
+    applyPreferences(preferences);
+  }, [preferences]);
+
+  const update = useCallback(<K extends keyof AccessibilityPreferences>(
+    key: K,
+    value: AccessibilityPreferences[K],
+  ) => {
+    const next = withPreference(currentPreferences, key, value);
+    writeStoredPreferences(next);
+    notify(next);
+  }, []);
+
+  const setTextSize = useCallback((size: TextSize) => update('textSize', size), [update]);
+  const setHighContrast = useCallback((enabled: boolean) => update('highContrast', enabled), [update]);
+  const setReduceMotion = useCallback((enabled: boolean) => update('reduceMotion', enabled), [update]);
+  const setUnderlineLinks = useCallback((enabled: boolean) => update('underlineLinks', enabled), [update]);
 
-  const toggle = useCallback(() => {
-    const next = !currentValue;
-    writeStoredAccessibility(next);
+  const setAllEnabled = useCallback((enabled: boolean) => {
+    const next = enabled ? { ...ALL_ON_PREFERENCES } : { ...DEFAULT_PREFERENCES };
+    writeStoredPreferences(next);
     notify(next);
   }, []);
 
-  return { enabled, toggle };
+  const reset = useCallback(() => {
+    clearStoredPreferences();
+    notify({ ...DEFAULT_PREFERENCES });
+  }, []);
+
+  return {
+    preferences,
+    allEnabled: areAllPreferencesOn(preferences),
+    partiallyEnabled: isAnyPreferenceOn(preferences) && !areAllPreferencesOn(preferences),
+    setAllEnabled,
+    setTextSize,
+    setHighContrast,
+    setReduceMotion,
+    setUnderlineLinks,
+    reset,
+  };
 }
 
-export default useAccessibility;
+export default useAccessibilityPreferences;
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 46f87cb..b977b3c 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -2,13 +2,13 @@ import { useCallback, useEffect, useState } from 'react';
 import {
   DARK,
   LIGHT,
+  SYSTEM,
   applyTheme,
-  readStoredTheme,
-  resolveTheme,
-  toggleTheme as flipTheme,
-  writeStoredTheme,
+  readStoredThemeChoice,
+  resolveThemeChoice,
+  writeStoredThemeChoice,
 } from '../utils/theme.ts';
-import type { Theme } from '../utils/theme.ts';
+import type { Theme, ThemeChoice } from '../utils/theme.ts';
 
 const DARK_QUERY = '(prefers-color-scheme: dark)';
 
@@ -19,49 +19,72 @@ function getSystemPrefersDark(): boolean {
   return window.matchMedia(DARK_QUERY).matches;
 }
 
+interface ThemeState {
+  choice: ThemeChoice
+  theme: Theme
+}
+
+function readInitial(): ThemeState {
+  if (typeof window === 'undefined') {
+    return { choice: SYSTEM, theme: LIGHT };
+  }
+  const choice = readStoredThemeChoice();
+  return { choice, theme: resolveThemeChoice(choice, getSystemPrefersDark()) };
+}
+
+let currentState: ThemeState = readInitial();
+const listeners = new Set<(_value: ThemeState) => void>();
+
+function notify(next: ThemeState): void {
+  currentState = next;
+  applyTheme(next.theme);
+  listeners.forEach((listener) => listener(next));
+}
+
+if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+  window.matchMedia(DARK_QUERY).addEventListener('change', (event) => {
+    if (currentState.choice !== SYSTEM) {
+      return;
+    }
+    notify({ choice: SYSTEM, theme: event.matches ? DARK : LIGHT });
+  });
+}
+
 export interface UseThemeResult {
+  choice: ThemeChoice
   theme: Theme
   isDark: boolean
+  setChoice: (_choice: ThemeChoice) => void
   toggle: () => void
 }
 
 export function useTheme(): UseThemeResult {
-  // El script inline de public/index.html ya dejo el data-theme correcto antes
-  // del primer pintado. Aca se recalcula lo mismo para que React arranque con
-  // el estado que ya esta en pantalla y no provoque un salto.
-  const [theme, setTheme] = useState<Theme>(() => resolveTheme(readStoredTheme(), getSystemPrefersDark()));
-  const [hasExplicitChoice, setHasExplicitChoice] = useState<boolean>(() => readStoredTheme() !== null);
+  const [state, setState] = useState<ThemeState>(currentState);
 
   useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-
-  // Mientras el usuario no haya elegido, el sitio sigue al sistema en vivo:
-  // si cambia el tema del SO con la pestana abierta, la pagina acompana.
-  useEffect(() => {
-    if (hasExplicitChoice || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-      return undefined;
-    }
-
-    const query = window.matchMedia(DARK_QUERY);
-    const handleChange = (event: MediaQueryListEvent) => {
-      setTheme(event.matches ? DARK : LIGHT);
+    listeners.add(setState);
+    setState(currentState);
+    return () => {
+      listeners.delete(setState);
     };
+  }, []);
 
-    query.addEventListener('change', handleChange);
-    return () => query.removeEventListener('change', handleChange);
-  }, [hasExplicitChoice]);
+  const setChoice = useCallback((choice: ThemeChoice) => {
+    writeStoredThemeChoice(choice);
+    notify({ choice, theme: resolveThemeChoice(choice, getSystemPrefersDark()) });
+  }, []);
 
   const toggle = useCallback(() => {
-    setTheme((current) => {
-      const next = flipTheme(current);
-      writeStoredTheme(next);
-      return next;
-    });
-    setHasExplicitChoice(true);
-  }, []);
+    setChoice(currentState.theme === DARK ? LIGHT : DARK);
+  }, [setChoice]);
 
-  return { theme, isDark: theme === DARK, toggle };
+  return {
+    choice: state.choice,
+    theme: state.theme,
+    isDark: state.theme === DARK,
+    setChoice,
+    toggle,
+  };
 }
 
 export default useTheme;
diff --git a/src/pages/AdminPage.tsx b/src/pages/AdminPage.tsx
deleted file mode 100644
index 8327dc2..0000000
--- a/src/pages/AdminPage.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { usePageState } from '../components/page/usePageState';
-import { AdminPage } from '../components/page/PageUI';
-
-export default function PageEditor() {
-  const state = usePageState();
-  return <PageUI {...state} />;
-}
\ No newline at end of file
diff --git a/src/pages/adminDragModel.ts b/src/pages/adminDragModel.ts
index 77e280e..ef7c52b 100644
--- a/src/pages/adminDragModel.ts
+++ b/src/pages/adminDragModel.ts
@@ -1,5 +1,5 @@
 import { arrayMove } from '@dnd-kit/sortable';
-import type { Block, Row, Column, Item, SectionBlock } from '../types.ts';
+import type { Block, Row, Column, Item, SectionBlock } from '../types/index.ts';
 import { normalizeSectionItems, createDefaultSectionColumn, createDefaultSectionRow, normalizeSectionRows } from '../components/page/utils.ts';
 import { parseColumnDropId, parseColumnDragId, parseColumnTargetId, parseAnyColumnTarget, parseRowDragId } from '../components/page/parsing.ts';
 import { isContainerBlock } from '../components/page/blocks.ts';
diff --git a/src/styles/index.css b/src/styles/index.css
index 3474744..e940bff 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,4 +1,4 @@
-* {
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -1299,10 +1299,14 @@ body,
         --nav-height: 70px;
     }
 
-    :root[data-a11y="on"] {
+    :root[data-a11y-text-size="large"] {
         --nav-height: 88px;
     }
 
+    :root[data-a11y-text-size="xlarge"] {
+        --nav-height: 100px;
+    }
+
     .nav-container {
         padding: 0.75rem 1rem;
     }
@@ -1818,29 +1822,88 @@ body,
 }
 
 /* ==========================================================================
-   Modo accesibilidad (Tarea 5)
-
-   Se activa con la clase .accessibility-mode en el <body>, que es lo que pide
-   el issue. El atributo data-a11y en <html> es un espejo de esa clase y existe
-   por una razon concreta: casi todos los tamanos de este archivo estan en rem,
-   y rem se calcula sobre el font-size de <html>, no del body. Sin el atributo
-   no habria forma de subir la tipografia base sin reescribir el archivo.
-
-   Es independiente del tema: funciona igual en claro y en oscuro, y los dos
-   pueden estar encendidos a la vez (CP12).
+   Accesibilidad (Tarea 5)
    ========================================================================== */
 
-/* Criterio 2: la base pasa de 16px a 20px. Como casi todo esta en rem, sube
-   texto y espaciado juntos, que es lo que espera alguien que agranda la letra. */
-:root[data-a11y="on"] {
+:root[data-a11y-text-size="large"] {
     font-size: 125%;
     --nav-height: 100px;
 }
 
-/* --------------------------------------------------------------------------
-   Criterio 3: contraste AAA 7:1. Valores calculados par por par, no estimados.
-   -------------------------------------------------------------------------- */
-body.accessibility-mode {
+:root[data-a11y-text-size="xlarge"] {
+    font-size: 150%;
+    --nav-height: 112px;
+}
+
+body.a11y-text-scaled {
+    line-height: 1.8;
+}
+
+body.a11y-text-scaled p,
+body.a11y-text-scaled li,
+body.a11y-text-scaled .faq-answer p,
+body.a11y-text-scaled .legal-section p,
+body.a11y-text-scaled .legal-section li,
+body.a11y-text-scaled .page-card p,
+body.a11y-text-scaled .page-card li,
+body.a11y-text-scaled .section-block-description,
+body.a11y-text-scaled .footer-text {
+    line-height: 1.8;
+}
+
+:root[data-a11y-text-size="xlarge"] body.a11y-text-scaled,
+:root[data-a11y-text-size="xlarge"] body.a11y-text-scaled p,
+:root[data-a11y-text-size="xlarge"] body.a11y-text-scaled li {
+    line-height: 1.9;
+}
+
+body.a11y-text-scaled p + p,
+body.a11y-text-scaled li + li {
+    margin-top: 0.8rem;
+}
+
+body.a11y-text-scaled .btn {
+    padding: 1.5rem 3.5rem;
+}
+
+:root[data-a11y-text-size="xlarge"] body.a11y-text-scaled .btn {
+    padding: 1.75rem 4rem;
+}
+
+body.a11y-text-scaled .nav-link {
+    padding: 0.9rem 1.4rem;
+}
+
+body.a11y-text-scaled .faq-question {
+    padding: 2rem 1.75rem;
+}
+
+body.a11y-text-scaled .footer-link {
+    padding: 0.35rem 0;
+}
+
+body.a11y-text-scaled .carousel-btn {
+    width: 56px;
+    height: 56px;
+}
+
+body.a11y-text-scaled .indicator {
+    width: 16px;
+    height: 16px;
+}
+
+body.a11y-text-scaled .theme-toggle {
+    width: 48px;
+    height: 48px;
+    font-size: 1.2rem;
+}
+
+body.a11y-text-scaled .social-icon {
+    width: 60px;
+    height: 60px;
+}
+
+body.a11y-high-contrast {
     --vrton-red: #a52b33;
     --vrton-red-rgb: 165, 43, 51;
     --accent-fill: #a52b33;
@@ -1870,7 +1933,7 @@ body.accessibility-mode {
     --hero-glow-stop: transparent;
 }
 
-:root[data-theme="dark"] body.accessibility-mode {
+:root[data-theme="dark"] body.a11y-high-contrast {
     --accent-text: #ff9ba3;
 
     --surface-page: #000000;
@@ -1891,15 +1954,10 @@ body.accessibility-mode {
     --gradient-hero: #000000;
 }
 
-/*
-   Los titulos usan background-clip: text con el relleno transparente, asi que
-   el color real sale de un degradado. Es el peor problema de contraste del
-   sitio y en modo accesible no puede quedarse: vuelven a color solido.
-*/
-body.accessibility-mode .hero-title,
-body.accessibility-mode .hero-subtitle,
-body.accessibility-mode .legal-page h1,
-body.accessibility-mode .error-code {
+body.a11y-high-contrast .hero-title,
+body.a11y-high-contrast .hero-subtitle,
+body.a11y-high-contrast .legal-page h1,
+body.a11y-high-contrast .error-code {
     background: none;
     -webkit-background-clip: border-box;
     background-clip: border-box;
@@ -1907,150 +1965,71 @@ body.accessibility-mode .error-code {
     color: var(--text-primary);
 }
 
-/* El navbar deja de ser translucido: el desenfoque sobre contenido en
-   movimiento arruina el contraste del texto que tiene encima. */
-body.accessibility-mode .navbar {
+body.a11y-high-contrast .navbar {
     backdrop-filter: none;
     border-bottom: 2px solid var(--border-strong);
 }
 
-/* --------------------------------------------------------------------------
-   Criterio 7: interlineado minimo 1.8
-   -------------------------------------------------------------------------- */
-body.accessibility-mode {
-    line-height: 1.8;
-}
-
-body.accessibility-mode p,
-body.accessibility-mode li,
-body.accessibility-mode .faq-answer p,
-body.accessibility-mode .legal-section p,
-body.accessibility-mode .legal-section li,
-body.accessibility-mode .page-card p,
-body.accessibility-mode .page-card li,
-body.accessibility-mode .section-block-description,
-body.accessibility-mode .footer-text {
-    line-height: 1.8;
-}
-
-body.accessibility-mode p + p,
-body.accessibility-mode li + li {
-    margin-top: 0.8rem;
+body.a11y-high-contrast a:focus-visible,
+body.a11y-high-contrast button:focus-visible,
+body.a11y-high-contrast input:focus-visible,
+body.a11y-high-contrast select:focus-visible,
+body.a11y-high-contrast summary:focus-visible,
+body.a11y-high-contrast [role="button"]:focus-visible {
+    outline-width: 4px;
 }
 
-/* --------------------------------------------------------------------------
-   Criterio 5: todos los enlaces subrayados, para no depender solo del color
-   -------------------------------------------------------------------------- */
-body.accessibility-mode a {
+body.a11y-underline-links a {
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 3px;
 }
 
-/* El subrayado no aplica a los que son botones o iconos: ahi estorba y el
-   elemento ya se distingue por su forma. */
-body.accessibility-mode a.btn,
-body.accessibility-mode a.nav-btn,
-body.accessibility-mode a.social-icon,
-body.accessibility-mode a.footer-social-icon,
-body.accessibility-mode .nav-logo,
-body.accessibility-mode .collab-logo,
-body.accessibility-mode .event-collaborators a {
+body.a11y-underline-links a.btn,
+body.a11y-underline-links a.nav-btn,
+body.a11y-underline-links a.social-icon,
+body.a11y-underline-links a.footer-social-icon,
+body.a11y-underline-links .nav-logo,
+body.a11y-underline-links .collab-logo,
+body.a11y-underline-links .event-collaborators a {
     text-decoration: none;
 }
 
-/* --------------------------------------------------------------------------
-   Criterio 6: areas clickeables mas grandes
-   -------------------------------------------------------------------------- */
-body.accessibility-mode .btn {
-    padding: 1.5rem 3.5rem;
-}
-
-body.accessibility-mode .nav-link {
-    padding: 0.9rem 1.4rem;
-}
-
-body.accessibility-mode .faq-question {
-    padding: 2rem 1.75rem;
-}
-
-body.accessibility-mode .footer-link {
-    padding: 0.35rem 0;
-}
-
-body.accessibility-mode .carousel-btn {
-    width: 56px;
-    height: 56px;
-}
-
-body.accessibility-mode .indicator {
-    width: 16px;
-    height: 16px;
-}
-
-body.accessibility-mode .theme-toggle,
-body.accessibility-mode .a11y-toggle {
-    width: 48px;
-    height: 48px;
-    font-size: 1.2rem;
-}
-
-body.accessibility-mode .social-icon {
-    width: 60px;
-    height: 60px;
-}
-
-/* --------------------------------------------------------------------------
-   Criterio 4: animaciones reducidas
-
-   El CSS solo no alcanza. El ripple se inyecta por JS, el carrusel avanza con
-   un setInterval y los corazones son un loop de requestAnimationFrame sobre
-   Three.js, asi que esos cuatro van apagados desde los componentes.
-   -------------------------------------------------------------------------- */
-body.accessibility-mode *,
-body.accessibility-mode *::before,
-body.accessibility-mode *::after {
+body.a11y-reduce-motion *,
+body.a11y-reduce-motion *::before,
+body.a11y-reduce-motion *::after {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
     scroll-behavior: auto !important;
 }
 
-/* El hover no debe desplazar ni escalar: es el movimiento mas repetido del
-   sitio y aparece en casi todos los componentes. */
-body.accessibility-mode .btn:hover,
-body.accessibility-mode .nav-btn:hover,
-body.accessibility-mode .event-card:hover,
-body.accessibility-mode .social-icon:hover,
-body.accessibility-mode .footer-social-icon:hover,
-body.accessibility-mode .footer-link:hover,
-body.accessibility-mode .collab-logo:hover,
-body.accessibility-mode .page-card:hover,
-body.accessibility-mode .theme-toggle:hover,
-body.accessibility-mode .a11y-toggle:hover {
+body.a11y-reduce-motion .btn:hover,
+body.a11y-reduce-motion .nav-btn:hover,
+body.a11y-reduce-motion .event-card:hover,
+body.a11y-reduce-motion .social-icon:hover,
+body.a11y-reduce-motion .footer-social-icon:hover,
+body.a11y-reduce-motion .footer-link:hover,
+body.a11y-reduce-motion .collab-logo:hover,
+body.a11y-reduce-motion .page-card:hover,
+body.a11y-reduce-motion .theme-toggle:hover,
+body.a11y-reduce-motion .a11y-fab:hover {
     transform: none;
 }
 
-body.accessibility-mode .carousel-btn:hover {
+body.a11y-reduce-motion .carousel-btn:hover {
     transform: translateY(-50%);
 }
 
-/* El circulo que se expande dentro de los botones tambien es movimiento. */
-body.accessibility-mode .btn::before,
-body.accessibility-mode .btn:hover::before {
+body.a11y-reduce-motion .btn::before,
+body.a11y-reduce-motion .btn:hover::before {
     display: none;
 }
 
-body.accessibility-mode .logo {
+body.a11y-reduce-motion .logo {
     animation: none;
 }
 
-/*
-   Respetar prefers-reduced-motion siempre, este el modo encendido o no.
-   Aca si va un media query suelto y no rompe nada del admin: admin.css no
-   tiene un solo @keyframes, asi que lo unico que pasa es que sus transiciones
-   se vuelven instantaneas, que es exactamente lo que el usuario pidio.
-*/
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
@@ -2068,88 +2047,268 @@ body.accessibility-mode .logo {
     }
 }
 
-/* --------------------------------------------------------------------------
-   Boton de accesibilidad
-   -------------------------------------------------------------------------- */
-.nav-a11y-item {
-    display: flex;
-    align-items: center;
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+summary:focus-visible,
+[role="button"]:focus-visible {
+    outline: 3px solid var(--accent-text);
+    outline-offset: 3px;
+    border-radius: 4px;
 }
 
-.a11y-toggle {
+/* ==========================================================================
+   Panel de preferencias de accesibilidad
+   ========================================================================== */
+
+.a11y-fab {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    z-index: 900;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 52px;
+    height: 52px;
     padding: 0;
     border-radius: 50%;
     border: 2px solid var(--border-strong);
-    background: transparent;
+    background: var(--surface-raised);
     color: var(--text-primary);
-    font-size: 1.15rem;
+    font-size: 1.05rem;
+    font-weight: 700;
     line-height: 1;
     cursor: pointer;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
     transition: all 0.3s ease;
 }
 
-.a11y-toggle:hover {
+.a11y-fab:hover {
     color: var(--accent-text);
     border-color: var(--vrton-red);
     transform: translateY(-2px);
 }
 
-.a11y-toggle:active {
+.a11y-fab:active {
     transform: translateY(0);
 }
 
-/* Encendido se nota sin depender solo del color. */
-.a11y-toggle-active {
-    background: var(--accent-fill);
-    color: var(--vrton-white);
-    border-color: var(--accent-fill);
+.a11y-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(4px);
 }
 
-.a11y-toggle-active:hover {
-    color: var(--vrton-white);
+.a11y-dialog {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 30rem;
+    max-height: 90vh;
+    overflow: hidden;
+    border-radius: 16px;
+    border: 1px solid var(--border-subtle);
+    background: var(--surface-raised);
+    color: var(--text-primary);
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
 }
 
-/*
-   Foco visible. El repositorio no tenia ni un :focus ni un outline en las dos
-   hojas de estilo, asi que navegar con teclado era adivinar donde estabas.
-   Va fuera del modo accesible a proposito: es el minimo para todo el mundo.
-*/
-a:focus-visible,
-button:focus-visible,
-select:focus-visible,
-summary:focus-visible,
-[role="button"]:focus-visible {
-    outline: 3px solid var(--accent-text);
-    outline-offset: 3px;
-    border-radius: 4px;
+.a11y-dialog-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 1.25rem 1.75rem 0;
 }
 
-body.accessibility-mode a:focus-visible,
-body.accessibility-mode button:focus-visible,
-body.accessibility-mode select:focus-visible,
-body.accessibility-mode summary:focus-visible,
-body.accessibility-mode [role="button"]:focus-visible {
-    outline-width: 4px;
+.a11y-dialog-header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1.5rem 1.75rem 1rem;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.a11y-dialog-title {
+    margin: 0;
+    font-size: 1.35rem;
+    font-weight: 700;
+}
+
+.a11y-dialog-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 50%;
+    border: 1px solid var(--border-subtle);
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.a11y-dialog-close:hover {
+    border-color: var(--vrton-red);
+    color: var(--accent-text);
+}
+
+.a11y-field {
+    margin-bottom: 1.25rem;
+}
+
+.a11y-field-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.95rem;
+    font-weight: 700;
+}
+
+.a11y-segmented {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: 0.5rem;
+}
+
+.a11y-segment {
+    padding: 0.7rem 0.5rem;
+    border-radius: 999px;
+    border: 1px solid var(--border-subtle);
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.a11y-segment:hover {
+    border-color: var(--vrton-red);
+}
+
+.a11y-segment-active {
+    background: var(--surface-invert);
+    border-color: var(--surface-invert);
+    color: var(--text-on-invert);
+}
+
+.a11y-check {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    margin-bottom: 0.6rem;
+    border-radius: 12px;
+    border: 1px solid var(--border-subtle);
+    font-size: 0.95rem;
+    cursor: pointer;
+}
+
+.a11y-check:hover {
+    border-color: var(--vrton-red);
+}
+
+.a11y-check-master {
+    margin-bottom: 1.25rem;
+    padding-bottom: 1.1rem;
+    border: 0;
+    border-bottom: 1px solid var(--border-subtle);
+    border-radius: 0;
+    font-weight: 700;
+}
+
+.a11y-check-master:hover {
+    border-color: var(--border-subtle);
+    color: var(--accent-text);
+}
+
+.a11y-check input {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--accent-fill);
+    cursor: pointer;
+}
+
+.a11y-dialog-actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 1.25rem 1.75rem 1.5rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.a11y-dialog-reset,
+.a11y-dialog-done {
+    padding: 0.7rem 1.4rem;
+    border-radius: 999px;
+    font-size: 0.95rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.a11y-dialog-reset {
+    border: 1px solid var(--border-strong);
+    background: transparent;
+    color: var(--text-primary);
+}
+
+.a11y-dialog-reset:hover {
+    border-color: var(--vrton-red);
+    color: var(--accent-text);
+}
+
+.a11y-dialog-done {
+    border: 1px solid var(--accent-fill);
+    background: var(--accent-fill);
+    color: #ffffff;
+}
+
+.a11y-dialog-done:hover {
+    filter: brightness(1.08);
 }
 
 @media (max-width: 768px) {
-    .a11y-toggle {
-        width: 36px;
-        height: 36px;
-        font-size: 1rem;
+    .a11y-fab {
+        right: 1rem;
+        bottom: 1rem;
+        width: 46px;
+        height: 46px;
+        font-size: 0.95rem;
     }
-}
 
-@media (max-width: 480px) {
-    .a11y-toggle {
-        width: 32px;
-        height: 32px;
-        font-size: 0.9rem;
-        border-width: 1px;
+    .a11y-dialog-header {
+        padding: 1.15rem 1.25rem 0.85rem;
+    }
+
+    .a11y-dialog-body {
+        padding: 1rem 1.25rem 0;
+    }
+
+    .a11y-dialog-actions {
+        padding: 1rem 1.25rem 1.15rem;
+    }
+
+    .a11y-segmented {
+        grid-auto-flow: row;
+    }
+
+    .a11y-dialog-actions {
+        flex-direction: column-reverse;
+        align-items: stretch;
     }
 }
diff --git a/src/utils/accessibility.test.js b/src/utils/accessibility.test.js
index 1386d66..669f8ff 100644
--- a/src/utils/accessibility.test.js
+++ b/src/utils/accessibility.test.js
@@ -2,15 +2,29 @@ import test, { describe } from 'node:test';
 import assert from 'node:assert/strict';
 import {
   ACCESSIBILITY_STORAGE_KEY,
-  ACCESSIBILITY_CLASS,
-  ACCESSIBILITY_ATTRIBUTE,
-  ON,
-  OFF,
-  isValidStoredValue,
-  readStoredAccessibility,
-  writeStoredAccessibility,
-  resolveAccessibility,
-  applyAccessibility,
+  ALL_ON_PREFERENCES,
+  DEFAULT_PREFERENCES,
+  HIGH_CONTRAST_CLASS,
+  LEGACY_ON_PREFERENCES,
+  REDUCE_MOTION_CLASS,
+  TEXT_SCALED_CLASS,
+  TEXT_SIZE_ATTRIBUTE,
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_NORMAL,
+  TEXT_SIZE_XLARGE,
+  UNDERLINE_LINKS_CLASS,
+  applyPreferences,
+  areAllPreferencesOn,
+  clearStoredPreferences,
+  isAnyPreferenceOn,
+  isDefaultPreferences,
+  isValidTextSize,
+  normalizePreferences,
+  parseStoredPreferences,
+  readStoredPreferences,
+  resolvePreferences,
+  withPreference,
+  writeStoredPreferences,
 } from './accessibility.ts';
 
 function withLocalStorage(initial, run) {
@@ -20,6 +34,7 @@ function withLocalStorage(initial, run) {
     localStorage: {
       getItem: (k) => (store.has(k) ? store.get(k) : null),
       setItem: (k, v) => store.set(k, String(v)),
+      removeItem: (k) => store.delete(k),
     },
   };
   try {
@@ -48,115 +63,227 @@ function fakeDoc() {
   return { documentElement: html, body, _html: html, _classes: classes };
 }
 
-describe('resolveAccessibility', () => {
-  test('sin preferencia guardada arranca apagado', () => {
-    assert.equal(resolveAccessibility(null), false);
+describe('isValidTextSize', () => {
+  test('acepta los tres tamanos', () => {
+    assert.equal(isValidTextSize(TEXT_SIZE_NORMAL), true);
+    assert.equal(isValidTextSize(TEXT_SIZE_LARGE), true);
+    assert.equal(isValidTextSize(TEXT_SIZE_XLARGE), true);
   });
 
-  test('respeta la eleccion guardada', () => {
-    assert.equal(resolveAccessibility(true), true);
-    assert.equal(resolveAccessibility(false), false);
+  test('rechaza cualquier otra cosa', () => {
+    assert.equal(isValidTextSize('gigante'), false);
+    assert.equal(isValidTextSize(null), false);
+    assert.equal(isValidTextSize(2), false);
   });
 });
 
-describe('isValidStoredValue', () => {
-  test('acepta solo on y off', () => {
-    assert.equal(isValidStoredValue(ON), true);
-    assert.equal(isValidStoredValue(OFF), true);
-    assert.equal(isValidStoredValue('true'), false);
-    assert.equal(isValidStoredValue('ON'), false);
-    assert.equal(isValidStoredValue(null), false);
+describe('normalizePreferences', () => {
+  test('un objeto vacio cae en los valores por defecto', () => {
+    assert.deepEqual(normalizePreferences({}), DEFAULT_PREFERENCES);
+  });
+
+  test('lo que no es objeto tambien cae en los valores por defecto', () => {
+    assert.deepEqual(normalizePreferences(null), DEFAULT_PREFERENCES);
+    assert.deepEqual(normalizePreferences('grande'), DEFAULT_PREFERENCES);
   });
-});
 
-describe('readStoredAccessibility', () => {
-  test('lee on como encendido', () => {
-    withLocalStorage({ [ACCESSIBILITY_STORAGE_KEY]: ON }, () => {
-      assert.equal(readStoredAccessibility(), true);
+  test('descarta un tamano invalido y conserva el resto', () => {
+    assert.deepEqual(
+      normalizePreferences({ textSize: 'gigante', highContrast: true }),
+      { ...DEFAULT_PREFERENCES, highContrast: true },
+    );
+  });
+
+  test('solo el booleano true enciende una opcion', () => {
+    const parsed = normalizePreferences({
+      highContrast: 'si',
+      reduceMotion: 1,
+      underlineLinks: true,
     });
+    assert.equal(parsed.highContrast, false);
+    assert.equal(parsed.reduceMotion, false);
+    assert.equal(parsed.underlineLinks, true);
+  });
+});
+
+describe('parseStoredPreferences', () => {
+  test('sin nada guardado devuelve null', () => {
+    assert.equal(parseStoredPreferences(null), null);
+  });
+
+  test('migra el "on" del modo viejo a todas las opciones encendidas', () => {
+    assert.deepEqual(parseStoredPreferences('on'), LEGACY_ON_PREFERENCES);
+  });
+
+  test('migra el "off" del modo viejo a los valores por defecto', () => {
+    assert.deepEqual(parseStoredPreferences('off'), DEFAULT_PREFERENCES);
   });
 
-  test('lee off como apagado', () => {
-    withLocalStorage({ [ACCESSIBILITY_STORAGE_KEY]: OFF }, () => {
-      assert.equal(readStoredAccessibility(), false);
+  test('lee el JSON nuevo', () => {
+    const stored = JSON.stringify({
+      textSize: TEXT_SIZE_XLARGE,
+      highContrast: true,
+      reduceMotion: false,
+      underlineLinks: true,
     });
+    assert.deepEqual(parseStoredPreferences(stored), {
+      textSize: TEXT_SIZE_XLARGE,
+      highContrast: true,
+      reduceMotion: false,
+      underlineLinks: true,
+    });
+  });
+
+  test('un JSON roto devuelve null y no revienta', () => {
+    assert.equal(parseStoredPreferences('{no es json'), null);
   });
+});
 
-  test('sin nada guardado devuelve null, que no es lo mismo que apagado', () => {
+describe('readStoredPreferences y writeStoredPreferences', () => {
+  test('lo escrito se vuelve a leer igual', () => {
     withLocalStorage({}, () => {
-      assert.equal(readStoredAccessibility(), null);
+      const preferences = {
+        textSize: TEXT_SIZE_LARGE,
+        highContrast: true,
+        reduceMotion: true,
+        underlineLinks: false,
+      };
+      writeStoredPreferences(preferences);
+      assert.deepEqual(readStoredPreferences(), preferences);
     });
   });
 
-  test('un valor corrupto se trata como ausencia de preferencia', () => {
-    withLocalStorage({ [ACCESSIBILITY_STORAGE_KEY]: 'quizas' }, () => {
-      assert.equal(readStoredAccessibility(), null);
+  test('guarda bajo la clave que espera el script inline', () => {
+    withLocalStorage({}, (store) => {
+      writeStoredPreferences(DEFAULT_PREFERENCES);
+      assert.equal(store.has(ACCESSIBILITY_STORAGE_KEY), true);
     });
   });
 
-  test('no explota si localStorage tira una excepcion', () => {
-    const original = globalThis.window;
-    globalThis.window = {
-      localStorage: { getItem() { throw new Error('SecurityError'); } },
-    };
-    try {
-      assert.equal(readStoredAccessibility(), null);
-    } finally {
-      globalThis.window = original;
-    }
+  test('clearStoredPreferences borra la clave', () => {
+    withLocalStorage({ [ACCESSIBILITY_STORAGE_KEY]: 'on' }, (store) => {
+      clearStoredPreferences();
+      assert.equal(store.has(ACCESSIBILITY_STORAGE_KEY), false);
+      assert.equal(readStoredPreferences(), null);
+    });
   });
 });
 
-describe('writeStoredAccessibility', () => {
-  test('persiste con la clave que pide el issue', () => {
-    withLocalStorage({}, (store) => {
-      writeStoredAccessibility(true);
-      assert.equal(store.get(ACCESSIBILITY_STORAGE_KEY), ON);
-      writeStoredAccessibility(false);
-      assert.equal(store.get(ACCESSIBILITY_STORAGE_KEY), OFF);
-    });
+describe('resolvePreferences', () => {
+  test('sin preferencia guardada arranca todo apagado', () => {
+    assert.deepEqual(resolvePreferences(null), DEFAULT_PREFERENCES);
+  });
+
+  test('respeta lo guardado', () => {
+    const stored = { ...DEFAULT_PREFERENCES, reduceMotion: true };
+    assert.deepEqual(resolvePreferences(stored), stored);
+  });
+});
+
+describe('withPreference', () => {
+  test('cambia una sola opcion y deja el resto intacto', () => {
+    const base = { ...DEFAULT_PREFERENCES, highContrast: true };
+    const next = withPreference(base, 'underlineLinks', true);
+    assert.equal(next.highContrast, true);
+    assert.equal(next.underlineLinks, true);
+    assert.equal(next.reduceMotion, false);
+    assert.equal(next.textSize, TEXT_SIZE_NORMAL);
+  });
+
+  test('no muta el objeto original', () => {
+    const base = { ...DEFAULT_PREFERENCES };
+    withPreference(base, 'reduceMotion', true);
+    assert.equal(base.reduceMotion, false);
+  });
+});
+
+describe('isDefaultPreferences', () => {
+  test('reconoce el estado por defecto', () => {
+    assert.equal(isDefaultPreferences(DEFAULT_PREFERENCES), true);
+  });
+
+  test('cualquier opcion encendida ya no es el estado por defecto', () => {
+    assert.equal(isDefaultPreferences({ ...DEFAULT_PREFERENCES, reduceMotion: true }), false);
+    assert.equal(isDefaultPreferences({ ...DEFAULT_PREFERENCES, textSize: TEXT_SIZE_LARGE }), false);
+  });
+});
+
+describe('areAllPreferencesOn', () => {
+  test('reconoce el estado con todo encendido', () => {
+    assert.equal(areAllPreferencesOn(ALL_ON_PREFERENCES), true);
+  });
+
+  test('falta una sola opcion y ya no esta todo encendido', () => {
+    assert.equal(areAllPreferencesOn({ ...ALL_ON_PREFERENCES, underlineLinks: false }), false);
+    assert.equal(areAllPreferencesOn({ ...ALL_ON_PREFERENCES, textSize: TEXT_SIZE_NORMAL }), false);
+  });
+
+  test('el tamano muy grande tambien cuenta como encendido', () => {
+    assert.equal(areAllPreferencesOn({ ...ALL_ON_PREFERENCES, textSize: TEXT_SIZE_XLARGE }), true);
+  });
+
+  test('el estado por defecto no es todo encendido', () => {
+    assert.equal(areAllPreferencesOn(DEFAULT_PREFERENCES), false);
+  });
+});
+
+describe('isAnyPreferenceOn', () => {
+  test('el estado por defecto no tiene nada encendido', () => {
+    assert.equal(isAnyPreferenceOn(DEFAULT_PREFERENCES), false);
+  });
+
+  test('una sola opcion basta para que haya algo encendido', () => {
+    assert.equal(isAnyPreferenceOn({ ...DEFAULT_PREFERENCES, reduceMotion: true }), true);
+    assert.equal(isAnyPreferenceOn({ ...DEFAULT_PREFERENCES, textSize: TEXT_SIZE_LARGE }), true);
   });
 
-  test('no explota si localStorage tira una excepcion', () => {
-    const original = globalThis.window;
-    globalThis.window = {
-      localStorage: { setItem() { throw new Error('QuotaExceededError'); } },
-    };
-    try {
-      assert.doesNotThrow(() => writeStoredAccessibility(true));
-    } finally {
-      globalThis.window = original;
-    }
+  test('con todo encendido tambien hay algo encendido', () => {
+    assert.equal(isAnyPreferenceOn(ALL_ON_PREFERENCES), true);
   });
 });
 
-describe('applyAccessibility', () => {
-  test('CP2: al activar, el body recibe la clase accessibility-mode', () => {
+describe('applyPreferences', () => {
+  test('en normal no deja ninguna clase puesta', () => {
     const doc = fakeDoc();
-    applyAccessibility(true, doc);
-    assert.equal(doc._classes.has(ACCESSIBILITY_CLASS), true);
+    applyPreferences(DEFAULT_PREFERENCES, doc);
+    assert.equal(doc._html.attrs[TEXT_SIZE_ATTRIBUTE], TEXT_SIZE_NORMAL);
+    assert.equal(doc._classes.size, 0);
   });
 
-  test('CP3: al desactivar, el body pierde la clase', () => {
+  test('cada opcion enciende solo su propia clase', () => {
     const doc = fakeDoc();
-    applyAccessibility(true, doc);
-    applyAccessibility(false, doc);
-    assert.equal(doc._classes.has(ACCESSIBILITY_CLASS), false);
+    applyPreferences({ ...DEFAULT_PREFERENCES, highContrast: true }, doc);
+    assert.equal(doc.body.classList.contains(HIGH_CONTRAST_CLASS), true);
+    assert.equal(doc.body.classList.contains(REDUCE_MOTION_CLASS), false);
+    assert.equal(doc.body.classList.contains(UNDERLINE_LINKS_CLASS), false);
   });
 
-  test('el atributo espejo en html se pone y se quita', () => {
+  test('un tamano distinto de normal agrega la clase de escala', () => {
     const doc = fakeDoc();
-    applyAccessibility(true, doc);
-    assert.equal(doc._html.attrs[ACCESSIBILITY_ATTRIBUTE], ON);
+    applyPreferences({ ...DEFAULT_PREFERENCES, textSize: TEXT_SIZE_LARGE }, doc);
+    assert.equal(doc._html.attrs[TEXT_SIZE_ATTRIBUTE], TEXT_SIZE_LARGE);
+    assert.equal(doc.body.classList.contains(TEXT_SCALED_CLASS), true);
+  });
 
-    applyAccessibility(false, doc);
-    assert.equal(doc._html.attrs[ACCESSIBILITY_ATTRIBUTE], undefined);
+  test('volver a normal saca la clase de escala', () => {
+    const doc = fakeDoc();
+    applyPreferences({ ...DEFAULT_PREFERENCES, textSize: TEXT_SIZE_XLARGE }, doc);
+    applyPreferences(DEFAULT_PREFERENCES, doc);
+    assert.equal(doc._html.attrs[TEXT_SIZE_ATTRIBUTE], TEXT_SIZE_NORMAL);
+    assert.equal(doc.body.classList.contains(TEXT_SCALED_CLASS), false);
   });
 
-  test('no explota si todavia no hay body', () => {
+  test('las opciones son independientes entre si', () => {
     const doc = fakeDoc();
-    doc.body = null;
-    assert.doesNotThrow(() => applyAccessibility(true, doc));
-    assert.equal(doc._html.attrs[ACCESSIBILITY_ATTRIBUTE], ON);
+    applyPreferences({
+      textSize: TEXT_SIZE_NORMAL,
+      highContrast: false,
+      reduceMotion: true,
+      underlineLinks: true,
+    }, doc);
+    assert.equal(doc.body.classList.contains(HIGH_CONTRAST_CLASS), false);
+    assert.equal(doc.body.classList.contains(REDUCE_MOTION_CLASS), true);
+    assert.equal(doc.body.classList.contains(UNDERLINE_LINKS_CLASS), true);
+    assert.equal(doc.body.classList.contains(TEXT_SCALED_CLASS), false);
   });
 });
diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts
index f8ff53e..46ac483 100644
--- a/src/utils/accessibility.ts
+++ b/src/utils/accessibility.ts
@@ -1,71 +1,166 @@
 export const ACCESSIBILITY_STORAGE_KEY = 'vrton-accessibility';
 
-export const ON = 'on';
-export const OFF = 'off';
-
-/** Clase que pide la Tarea 5. Va en el body y activa todo el modo. */
-export const ACCESSIBILITY_CLASS = 'accessibility-mode';
-
-/**
- * Atributo espejo en <html>. Existe por una razon concreta: casi todos los
- * tamanos de index.css estan en rem, y rem se calcula sobre el font-size de
- * <html>, no del body. Con la clase solamente en el body no habria forma de
- * subir la tipografia base sin reescribir el archivo entero.
- */
-export const ACCESSIBILITY_ATTRIBUTE = 'data-a11y';
-
-export function isValidStoredValue(value: unknown): value is typeof ON | typeof OFF {
-  return value === ON || value === OFF;
+export const TEXT_SIZE_NORMAL = 'normal';
+export const TEXT_SIZE_LARGE = 'large';
+export const TEXT_SIZE_XLARGE = 'xlarge';
+
+export type TextSize =
+  | typeof TEXT_SIZE_NORMAL
+  | typeof TEXT_SIZE_LARGE
+  | typeof TEXT_SIZE_XLARGE;
+
+export const TEXT_SIZES: readonly TextSize[] = [
+  TEXT_SIZE_NORMAL,
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_XLARGE,
+];
+
+export interface AccessibilityPreferences {
+  textSize: TextSize
+  highContrast: boolean
+  reduceMotion: boolean
+  underlineLinks: boolean
+}
+
+export const DEFAULT_PREFERENCES: AccessibilityPreferences = {
+  textSize: TEXT_SIZE_NORMAL,
+  highContrast: false,
+  reduceMotion: false,
+  underlineLinks: false,
+};
+
+export const LEGACY_ON = 'on';
+export const LEGACY_OFF = 'off';
+
+export const ALL_ON_PREFERENCES: AccessibilityPreferences = {
+  textSize: TEXT_SIZE_LARGE,
+  highContrast: true,
+  reduceMotion: true,
+  underlineLinks: true,
+};
+
+export const LEGACY_ON_PREFERENCES: AccessibilityPreferences = ALL_ON_PREFERENCES;
+
+export const TEXT_SIZE_ATTRIBUTE = 'data-a11y-text-size';
+export const TEXT_SCALED_CLASS = 'a11y-text-scaled';
+export const HIGH_CONTRAST_CLASS = 'a11y-high-contrast';
+export const REDUCE_MOTION_CLASS = 'a11y-reduce-motion';
+export const UNDERLINE_LINKS_CLASS = 'a11y-underline-links';
+
+export function isValidTextSize(value: unknown): value is TextSize {
+  return value === TEXT_SIZE_NORMAL || value === TEXT_SIZE_LARGE || value === TEXT_SIZE_XLARGE;
+}
+
+export function normalizePreferences(value: unknown): AccessibilityPreferences {
+  if (!value || typeof value !== 'object') {
+    return { ...DEFAULT_PREFERENCES };
+  }
+
+  const source = value as Record<string, unknown>;
+
+  return {
+    textSize: isValidTextSize(source.textSize) ? source.textSize : DEFAULT_PREFERENCES.textSize,
+    highContrast: source.highContrast === true,
+    reduceMotion: source.reduceMotion === true,
+    underlineLinks: source.underlineLinks === true,
+  };
 }
 
-export function readStoredAccessibility(): boolean | null {
+export function parseStoredPreferences(raw: string | null): AccessibilityPreferences | null {
+  if (raw === null) {
+    return null;
+  }
+
+  if (raw === LEGACY_ON) {
+    return { ...LEGACY_ON_PREFERENCES };
+  }
+
+  if (raw === LEGACY_OFF) {
+    return { ...DEFAULT_PREFERENCES };
+  }
+
   try {
-    const raw = window.localStorage.getItem(ACCESSIBILITY_STORAGE_KEY);
-    if (!isValidStoredValue(raw)) {
-      return null;
-    }
-    return raw === ON;
+    return normalizePreferences(JSON.parse(raw));
   } catch {
     return null;
   }
 }
 
-export function writeStoredAccessibility(enabled: boolean): void {
+export function readStoredPreferences(): AccessibilityPreferences | null {
   try {
-    window.localStorage.setItem(ACCESSIBILITY_STORAGE_KEY, enabled ? ON : OFF);
+    return parseStoredPreferences(window.localStorage.getItem(ACCESSIBILITY_STORAGE_KEY));
   } catch {
-    // Navegador en modo privado o storage lleno. El modo igual funciona en memoria.
+    return null;
   }
 }
 
-/**
- * El modo accesible arranca apagado y solo se enciende a mano.
- *
- * No se auto-activa desde prefers-reduced-motion ni prefers-contrast a
- * proposito: subir la tipografia un 25% y cambiar toda la paleta a AAA porque
- * el sistema pidio menos animacion seria una sorpresa desagradable, y ademas
- * chocaria con el criterio 10, que exige que no haya regresion visual en modo
- * normal. La preferencia del sistema se respeta igual, pero solo en la parte
- * que corresponde: el bloque @media (prefers-reduced-motion: reduce) de
- * index.css apaga las animaciones tenga el modo encendido o no.
- */
-export function resolveAccessibility(storedEnabled: boolean | null): boolean {
-  return storedEnabled === true;
+export function writeStoredPreferences(preferences: AccessibilityPreferences): void {
+  try {
+    window.localStorage.setItem(
+      ACCESSIBILITY_STORAGE_KEY,
+      JSON.stringify(normalizePreferences(preferences)),
+    );
+  } catch {
+    return;
+  }
+}
+
+export function clearStoredPreferences(): void {
+  try {
+    window.localStorage.removeItem(ACCESSIBILITY_STORAGE_KEY);
+  } catch {
+    return;
+  }
 }
 
-export function applyAccessibility(enabled: boolean, doc?: Document): void {
+export function resolvePreferences(stored: AccessibilityPreferences | null): AccessibilityPreferences {
+  return stored ? normalizePreferences(stored) : { ...DEFAULT_PREFERENCES };
+}
+
+export function withPreference<K extends keyof AccessibilityPreferences>(
+  preferences: AccessibilityPreferences,
+  key: K,
+  value: AccessibilityPreferences[K],
+): AccessibilityPreferences {
+  return normalizePreferences({ ...preferences, [key]: value });
+}
+
+export function areAllPreferencesOn(preferences: AccessibilityPreferences): boolean {
+  const resolved = normalizePreferences(preferences);
+  return resolved.textSize !== TEXT_SIZE_NORMAL
+    && resolved.highContrast
+    && resolved.reduceMotion
+    && resolved.underlineLinks;
+}
+
+export function isAnyPreferenceOn(preferences: AccessibilityPreferences): boolean {
+  return !isDefaultPreferences(preferences);
+}
+
+export function isDefaultPreferences(preferences: AccessibilityPreferences): boolean {
+  const resolved = normalizePreferences(preferences);
+  return resolved.textSize === DEFAULT_PREFERENCES.textSize
+    && !resolved.highContrast
+    && !resolved.reduceMotion
+    && !resolved.underlineLinks;
+}
+
+export function applyPreferences(preferences: AccessibilityPreferences, doc?: Document): void {
   const target = doc || (typeof document === 'undefined' ? null : document);
   if (!target) {
     return;
   }
 
-  if (target.body) {
-    target.body.classList.toggle(ACCESSIBILITY_CLASS, enabled);
-  }
+  const resolved = normalizePreferences(preferences);
+
+  target.documentElement.setAttribute(TEXT_SIZE_ATTRIBUTE, resolved.textSize);
 
-  if (enabled) {
-    target.documentElement.setAttribute(ACCESSIBILITY_ATTRIBUTE, ON);
-  } else {
-    target.documentElement.removeAttribute(ACCESSIBILITY_ATTRIBUTE);
+  if (!target.body) {
+    return;
   }
+
+  target.body.classList.toggle(TEXT_SCALED_CLASS, resolved.textSize !== TEXT_SIZE_NORMAL);
+  target.body.classList.toggle(HIGH_CONTRAST_CLASS, resolved.highContrast);
+  target.body.classList.toggle(REDUCE_MOTION_CLASS, resolved.reduceMotion);
+  target.body.classList.toggle(UNDERLINE_LINKS_CLASS, resolved.underlineLinks);
 }
diff --git a/src/utils/theme.test.js b/src/utils/theme.test.js
index 8be0d7e..b268e3b 100644
--- a/src/utils/theme.test.js
+++ b/src/utils/theme.test.js
@@ -4,11 +4,16 @@ import {
   THEME_STORAGE_KEY,
   LIGHT,
   DARK,
+  SYSTEM,
   isValidTheme,
+  isValidThemeChoice,
   resolveTheme,
+  resolveThemeChoice,
   toggleTheme,
   readStoredTheme,
+  readStoredThemeChoice,
   writeStoredTheme,
+  writeStoredThemeChoice,
   applyTheme,
 } from './theme.ts';
 
@@ -170,3 +175,88 @@ describe('applyTheme', () => {
     assert.equal(doc._html.attrs['data-theme'], undefined);
   });
 });
+
+function withFullLocalStorage(initial, run) {
+  const store = new Map(Object.entries(initial || {}));
+  const original = globalThis.window;
+  globalThis.window = {
+    localStorage: {
+      getItem: (k) => (store.has(k) ? store.get(k) : null),
+      setItem: (k, v) => store.set(k, String(v)),
+      removeItem: (k) => store.delete(k),
+    },
+  };
+  try {
+    return run(store);
+  } finally {
+    globalThis.window = original;
+  }
+}
+
+describe('isValidThemeChoice', () => {
+  test('acepta system ademas de los dos temas', () => {
+    assert.equal(isValidThemeChoice(SYSTEM), true);
+    assert.equal(isValidThemeChoice(LIGHT), true);
+    assert.equal(isValidThemeChoice(DARK), true);
+  });
+
+  test('rechaza cualquier otra cosa', () => {
+    assert.equal(isValidThemeChoice('auto'), false);
+    assert.equal(isValidThemeChoice(null), false);
+  });
+});
+
+describe('readStoredThemeChoice', () => {
+  test('sin nada guardado la eleccion es system', () => {
+    withFullLocalStorage({}, () => {
+      assert.equal(readStoredThemeChoice(), SYSTEM);
+    });
+  });
+
+  test('un tema guardado se devuelve tal cual', () => {
+    withFullLocalStorage({ [THEME_STORAGE_KEY]: DARK }, () => {
+      assert.equal(readStoredThemeChoice(), DARK);
+    });
+  });
+
+  test('un valor invalido se trata como system', () => {
+    withFullLocalStorage({ [THEME_STORAGE_KEY]: 'morado' }, () => {
+      assert.equal(readStoredThemeChoice(), SYSTEM);
+    });
+  });
+});
+
+describe('writeStoredThemeChoice', () => {
+  test('elegir system borra la clave en vez de guardar la palabra', () => {
+    withFullLocalStorage({ [THEME_STORAGE_KEY]: DARK }, (store) => {
+      writeStoredThemeChoice(SYSTEM);
+      assert.equal(store.has(THEME_STORAGE_KEY), false);
+    });
+  });
+
+  test('elegir un tema lo persiste', () => {
+    withFullLocalStorage({}, (store) => {
+      writeStoredThemeChoice(LIGHT);
+      assert.equal(store.get(THEME_STORAGE_KEY), LIGHT);
+    });
+  });
+
+  test('ignora una eleccion invalida', () => {
+    withFullLocalStorage({ [THEME_STORAGE_KEY]: DARK }, (store) => {
+      writeStoredThemeChoice('morado');
+      assert.equal(store.get(THEME_STORAGE_KEY), DARK);
+    });
+  });
+});
+
+describe('resolveThemeChoice', () => {
+  test('system sigue al sistema', () => {
+    assert.equal(resolveThemeChoice(SYSTEM, true), DARK);
+    assert.equal(resolveThemeChoice(SYSTEM, false), LIGHT);
+  });
+
+  test('una eleccion explicita le gana al sistema', () => {
+    assert.equal(resolveThemeChoice(LIGHT, true), LIGHT);
+    assert.equal(resolveThemeChoice(DARK, false), DARK);
+  });
+});
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index b596802..0ec0009 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -2,11 +2,13 @@ export const THEME_STORAGE_KEY = 'vrton-theme';
 
 export const LIGHT = 'light';
 export const DARK = 'dark';
+export const SYSTEM = 'system';
 
 export type Theme = typeof LIGHT | typeof DARK;
+export type ThemeChoice = Theme | typeof SYSTEM;
+
+export const THEME_CHOICES: readonly ThemeChoice[] = [SYSTEM, LIGHT, DARK];
 
-// Color de la barra del navegador en cada tema. Alimenta <meta name="theme-color">,
-// que es lo que pinta la barra de direcciones en Android y en iOS instalado como PWA.
 export const THEME_COLORS: Record<Theme, string> = {
   [LIGHT]: '#ffffff',
   [DARK]: '#12100f',
@@ -16,10 +18,6 @@ export function isValidTheme(value: unknown): value is Theme {
   return value === LIGHT || value === DARK;
 }
 
-/**
- * Decide el tema efectivo. Una eleccion guardada siempre le gana al sistema;
- * si no hay ninguna, manda prefers-color-scheme.
- */
 export function resolveTheme(storedTheme: unknown, systemPrefersDark: boolean): Theme {
   if (isValidTheme(storedTheme)) {
     return storedTheme;
@@ -47,14 +45,42 @@ export function writeStoredTheme(theme: Theme): void {
   try {
     window.localStorage.setItem(THEME_STORAGE_KEY, theme);
   } catch {
-    // Navegador en modo privado o storage lleno. El tema igual funciona en memoria.
+    return;
+  }
+}
+
+export function isValidThemeChoice(value: unknown): value is ThemeChoice {
+  return value === SYSTEM || isValidTheme(value);
+}
+
+export function readStoredThemeChoice(): ThemeChoice {
+  return readStoredTheme() || SYSTEM;
+}
+
+export function writeStoredThemeChoice(choice: ThemeChoice): void {
+  if (!isValidThemeChoice(choice)) {
+    return;
   }
+
+  if (choice === SYSTEM) {
+    try {
+      window.localStorage.removeItem(THEME_STORAGE_KEY);
+    } catch {
+      return;
+    }
+    return;
+  }
+
+  writeStoredTheme(choice);
+}
+
+export function resolveThemeChoice(choice: unknown, systemPrefersDark: boolean): Theme {
+  if (isValidTheme(choice)) {
+    return choice;
+  }
+  return systemPrefersDark ? DARK : LIGHT;
 }
 
-/**
- * Escribe el tema en el DOM. Recibe el document en vez de asumirlo para poder
- * probarlo sin un navegador.
- */
 export function applyTheme(theme: unknown, doc?: Document): void {
   const target = doc || (typeof document === 'undefined' ? null : document);
   if (!target || !isValidTheme(theme)) {
diff --git a/tests/e2e/accessibility.spec.ts b/tests/e2e/accessibility.spec.ts
new file mode 100644
index 0000000..41ebd35
--- /dev/null
+++ b/tests/e2e/accessibility.spec.ts
@@ -0,0 +1,266 @@
+import { expect, test } from 'playwright/test';
+
+const STORAGE_KEY = 'vrton-accessibility';
+const THEME_KEY = 'vrton-theme';
+
+async function openPanel(page) {
+  await page.getByRole('button', { name: 'Preferencias de accesibilidad' }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  return dialog;
+}
+
+test('el boton flotante abre el panel en todas las paginas publicas', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('.a11y-fab')).toBeVisible();
+
+  await page.goto('/itinerario-2026');
+  await expect(page.locator('.a11y-fab')).toBeVisible();
+});
+
+test('cada preferencia se enciende por separado', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+  const body = page.locator('body');
+
+  await dialog.getByRole('checkbox', { name: 'Alto contraste' }).check();
+  await expect(body).toHaveClass(/a11y-high-contrast/);
+  await expect(body).not.toHaveClass(/a11y-reduce-motion/);
+  await expect(body).not.toHaveClass(/a11y-underline-links/);
+
+  await dialog.getByRole('checkbox', { name: 'Subrayar enlaces' }).check();
+  await expect(body).toHaveClass(/a11y-underline-links/);
+  await expect(body).toHaveClass(/a11y-high-contrast/);
+
+  await dialog.getByRole('checkbox', { name: 'Alto contraste' }).uncheck();
+  await expect(body).not.toHaveClass(/a11y-high-contrast/);
+  await expect(body).toHaveClass(/a11y-underline-links/);
+});
+
+test('el tamano de texto tiene tres pasos y sube la base al menos un 25 por ciento', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+  const html = page.locator('html');
+
+  const baseSize = await page.evaluate(() => parseFloat(getComputedStyle(document.documentElement).fontSize));
+
+  await dialog.getByRole('radio', { name: 'Grande', exact: true }).click();
+  await expect(html).toHaveAttribute('data-a11y-text-size', 'large');
+  const largeSize = await page.evaluate(() => parseFloat(getComputedStyle(document.documentElement).fontSize));
+  expect(largeSize).toBeGreaterThanOrEqual(baseSize * 1.25);
+
+  await dialog.getByRole('radio', { name: 'Muy grande' }).click();
+  await expect(html).toHaveAttribute('data-a11y-text-size', 'xlarge');
+  const xlargeSize = await page.evaluate(() => parseFloat(getComputedStyle(document.documentElement).fontSize));
+  expect(xlargeSize).toBeGreaterThan(largeSize);
+
+  await expect(page.locator('body')).toHaveClass(/a11y-text-scaled/);
+  await expect(page.locator('body')).toHaveCSS('line-height', /.+/);
+});
+
+test('el interlineado sube a 1.8 cuando el texto se agranda', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+
+  await dialog.getByRole('radio', { name: 'Grande', exact: true }).click();
+
+  const ratio = await page.evaluate(() => {
+    const styles = getComputedStyle(document.body);
+    return parseFloat(styles.lineHeight) / parseFloat(styles.fontSize);
+  });
+  expect(ratio).toBeGreaterThanOrEqual(1.79);
+});
+
+test('las preferencias sobreviven a una recarga', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+
+  await dialog.getByRole('radio', { name: 'Grande', exact: true }).click();
+  await dialog.getByRole('checkbox', { name: 'Reducir animaciones' }).check();
+  await dialog.getByRole('button', { name: 'Cerrar' }).last().click();
+
+  await page.reload();
+
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'large');
+  await expect(page.locator('body')).toHaveClass(/a11y-reduce-motion/);
+});
+
+test('el tema del panel y el del navbar comparten estado', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+
+  await dialog.getByRole('radio', { name: 'Oscuro' }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+  await dialog.getByRole('button', { name: 'Cerrar' }).last().click();
+  await page.locator('.theme-toggle').click();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+
+  await openPanel(page);
+  await expect(page.getByRole('radio', { name: 'Claro', exact: true })).toHaveAttribute('aria-checked', 'true');
+});
+
+test('accesibilidad y modo oscuro funcionan a la vez', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+
+  await dialog.getByRole('radio', { name: 'Oscuro' }).click();
+  await dialog.getByRole('checkbox', { name: 'Alto contraste' }).check();
+
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await expect(page.locator('body')).toHaveClass(/a11y-high-contrast/);
+});
+
+test('restablecer deja todo en el estado inicial', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+
+  await dialog.getByRole('radio', { name: 'Muy grande' }).click();
+  await dialog.getByRole('checkbox', { name: 'Alto contraste' }).check();
+  await dialog.getByRole('checkbox', { name: 'Reducir animaciones' }).check();
+
+  await dialog.getByRole('button', { name: 'Restablecer preferencias' }).click();
+
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'normal');
+  await expect(page.locator('body')).not.toHaveClass(/a11y-high-contrast/);
+  await expect(page.locator('body')).not.toHaveClass(/a11y-reduce-motion/);
+  await expect(page.locator('body')).not.toHaveClass(/a11y-text-scaled/);
+});
+
+test('el interruptor maestro prende y apaga todas las opciones', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+  const body = page.locator('body');
+  const master = dialog.getByRole('checkbox', { name: 'Activar todas las opciones' });
+
+  await master.check();
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'large');
+  await expect(body).toHaveClass(/a11y-high-contrast/);
+  await expect(body).toHaveClass(/a11y-reduce-motion/);
+  await expect(body).toHaveClass(/a11y-underline-links/);
+  await expect(dialog.getByRole('checkbox', { name: 'Alto contraste' })).toBeChecked();
+
+  await master.uncheck();
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'normal');
+  await expect(body).not.toHaveClass(/a11y-high-contrast/);
+  await expect(body).not.toHaveClass(/a11y-reduce-motion/);
+  await expect(body).not.toHaveClass(/a11y-underline-links/);
+  await expect(body).not.toHaveClass(/a11y-text-scaled/);
+});
+
+test('el interruptor maestro queda en mixto cuando solo hay algunas opciones', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+  const master = dialog.getByRole('checkbox', { name: 'Activar todas las opciones' });
+
+  await expect(master).not.toBeChecked();
+  await expect(master).toHaveJSProperty('indeterminate', false);
+
+  await dialog.getByRole('checkbox', { name: 'Reducir animaciones' }).check();
+  await expect(master).toHaveJSProperty('indeterminate', true);
+  await expect(master).not.toBeChecked();
+
+  await dialog.getByRole('checkbox', { name: 'Alto contraste' }).check();
+  await dialog.getByRole('checkbox', { name: 'Subrayar enlaces' }).check();
+  await dialog.getByRole('radio', { name: 'Grande', exact: true }).click();
+  await expect(master).toBeChecked();
+  await expect(master).toHaveJSProperty('indeterminate', false);
+});
+
+test('el interruptor maestro no toca el tema', async ({ page }) => {
+  await page.goto('/');
+  const dialog = await openPanel(page);
+
+  await dialog.getByRole('radio', { name: 'Oscuro' }).click();
+  await dialog.getByRole('checkbox', { name: 'Activar todas las opciones' }).check();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+  await dialog.getByRole('checkbox', { name: 'Activar todas las opciones' }).uncheck();
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+});
+
+test('el panel se cierra con Escape y devuelve el foco al boton', async ({ page }) => {
+  await page.goto('/');
+  await openPanel(page);
+
+  await page.keyboard.press('Escape');
+  await expect(page.getByRole('dialog')).toBeHidden();
+  await expect(page.locator('.a11y-fab')).toBeFocused();
+});
+
+test('el panel bloquea el scroll de la pagina mientras esta abierto', async ({ page }) => {
+  await page.goto('/');
+  await openPanel(page);
+
+  await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
+  const before = await page.evaluate(() => window.scrollY);
+  await page.mouse.wheel(0, 600);
+  await page.waitForTimeout(300);
+  expect(await page.evaluate(() => window.scrollY)).toBe(before);
+
+  await page.keyboard.press('Escape');
+  await expect(page.locator('body')).not.toHaveCSS('overflow', 'hidden');
+});
+
+test('las casillas del panel muestran el anillo de foco del sitio', async ({ page }) => {
+  await page.goto('/');
+  await openPanel(page);
+
+  await page.keyboard.press('Tab');
+  const outline = await page.evaluate(() => {
+    const el = document.activeElement;
+    return el ? getComputedStyle(el).outlineStyle : null;
+  });
+  expect(outline).toBe('solid');
+});
+
+test('la preferencia guardada del modo viejo se migra a las opciones nuevas', async ({ page }) => {
+  await page.goto('/');
+  await page.evaluate((key) => window.localStorage.setItem(key, 'on'), STORAGE_KEY);
+  await page.reload();
+
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'large');
+  await expect(page.locator('body')).toHaveClass(/a11y-high-contrast/);
+  await expect(page.locator('body')).toHaveClass(/a11y-reduce-motion/);
+  await expect(page.locator('body')).toHaveClass(/a11y-underline-links/);
+});
+
+test('el "off" del modo viejo no pisa el tema oscuro antes del primer pintado', async ({ page }) => {
+  await page.goto('/');
+  await page.evaluate(([accessibilityKey, themeKey]) => {
+    window.localStorage.setItem(accessibilityKey, 'off');
+    window.localStorage.setItem(themeKey, 'dark');
+  }, [STORAGE_KEY, THEME_KEY]);
+
+  await page.route('**/main.tsx', (route) => route.abort());
+  await page.reload();
+
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'normal');
+});
+
+test('un valor corrupto tampoco pisa el tema oscuro antes del primer pintado', async ({ page }) => {
+  await page.goto('/');
+  await page.evaluate(([accessibilityKey, themeKey]) => {
+    window.localStorage.setItem(accessibilityKey, '{roto');
+    window.localStorage.setItem(themeKey, 'dark');
+  }, [STORAGE_KEY, THEME_KEY]);
+
+  await page.route('**/main.tsx', (route) => route.abort());
+  await page.reload();
+
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'normal');
+});
+
+test('sin preferencias no hay regresion visual respecto al modo normal', async ({ page }) => {
+  await page.goto('/');
+  const body = page.locator('body');
+
+  await expect(page.locator('html')).toHaveAttribute('data-a11y-text-size', 'normal');
+  await expect(body).not.toHaveClass(/a11y-text-scaled/);
+  await expect(body).not.toHaveClass(/a11y-high-contrast/);
+  await expect(body).not.toHaveClass(/a11y-reduce-motion/);
+  await expect(body).not.toHaveClass(/a11y-underline-links/);
+});
+
diff --git a/tests/e2e/events.spec.ts b/tests/e2e/events.spec.ts
index 19b4ad7..5186aa7 100644
--- a/tests/e2e/events.spec.ts
+++ b/tests/e2e/events.spec.ts
@@ -1,9 +1,9 @@
 import { expect, test } from 'playwright/test';
 
 const editions = [
-  { year: '2023', amount: 'U$D 474', collaborators: 3 },
-  { year: '2024', amount: 'U$D 1458', collaborators: 8 },
-  { year: '2025', amount: 'U$D 3.255', collaborators: 12 },
+  { year: '2023', amount: 'USD 474', collaborators: 3 },
+  { year: '2024', amount: 'USD 1458', collaborators: 8 },
+  { year: '2025', amount: 'USD 3.255', collaborators: 12 },
 ];
 
 for (const edition of editions) {
@@ -78,6 +78,7 @@ test('works in dark and accessible modes', async ({ page }) => {
   await page.goto('/eventos/vrton-2025');
   await page.locator('.theme-toggle').click();
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-  await page.locator('.a11y-toggle').click();
-  await expect(page.locator('body')).toHaveClass(/accessibility-mode/);
+  await page.locator('.a11y-fab').click();
+  await page.getByRole('checkbox', { name: 'Alto contraste' }).check();
+  await expect(page.locator('body')).toHaveClass(/a11y-high-contrast/);
 });
diff --git a/tests/e2e/itinerary.spec.ts b/tests/e2e/itinerary.spec.ts
index e04a0f5..839c4d3 100644
--- a/tests/e2e/itinerary.spec.ts
+++ b/tests/e2e/itinerary.spec.ts
@@ -53,22 +53,17 @@ test('uses stacked instance sections on mobile without horizontal overflow', asy
   expect(hasOverflow).toBe(false);
 });
 
-test('shows only the first description line in cards and the full text in the modal', async ({ page }) => {
+test('shows the activity description in cards and in the modal on both layouts', async ({ page }) => {
   await page.goto('/itinerario-2026');
 
   const desktopActivity = page.locator('.itinerary-desktop')
     .getByRole('button', { name: /Musica de Bienvenida/ });
   const desktopPreview = desktopActivity.locator('.itinerary-activity-copy span');
   await expect(desktopPreview).toHaveText('Momento chill y relax');
-  await expect(desktopPreview).not.toContainText('Lorem ipsum');
 
   await desktopActivity.click();
   const dialog = page.getByRole('dialog');
-  const fullDescription = dialog.locator('.itinerary-modal-description');
-  await expect(fullDescription).toContainText('Momento chill y relax');
-  await expect(fullDescription).toContainText('Lorem ipsum dolor sit amet');
-  await expect(dialog.locator('.itinerary-modal-image')).toBeVisible();
-  expect(await dialog.evaluate((element) => element.scrollHeight > element.clientHeight)).toBe(true);
+  await expect(dialog.locator('.itinerary-modal-description')).toHaveText('Momento chill y relax');
   await page.keyboard.press('Escape');
 
   await page.setViewportSize({ width: 375, height: 812 });
@@ -76,11 +71,10 @@ test('shows only the first description line in cards and the full text in the mo
     .getByRole('button', { name: /Musica de Bienvenida/ });
   const mobilePreview = mobileActivity.locator('.itinerary-activity-copy span');
   await expect(mobilePreview).toHaveText('Momento chill y relax');
-  await expect(mobilePreview).not.toContainText('Lorem ipsum');
 
   await mobileActivity.click();
   await expect(page.getByRole('dialog').locator('.itinerary-modal-description'))
-    .toContainText('Lorem ipsum dolor sit amet');
+    .toHaveText('Momento chill y relax');
 });
 
 test('keeps the desktop table at the 768px breakpoint and supports dark mode', async ({ page }) => {
diff --git a/tests/e2e/legal.spec.ts b/tests/e2e/legal.spec.ts
index b8f0c32..e6b7f72 100644
--- a/tests/e2e/legal.spec.ts
+++ b/tests/e2e/legal.spec.ts
@@ -104,7 +104,9 @@ test('restores the original legal cards in light, dark, and accessibility modes'
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
   await expect(firstCard).toBeVisible();
 
-  await page.getByRole('button', { name: /Activar modo accesibilidad/ }).click();
-  await expect(page.locator('body')).toHaveClass(/accessibility-mode/);
+  await page.locator('.a11y-fab').click();
+  await page.getByRole('checkbox', { name: 'Alto contraste' }).check();
+  await expect(page.locator('body')).toHaveClass(/a11y-high-contrast/);
+  await page.getByRole('button', { name: 'Cerrar' }).last().click();
   await expect(firstCard).toBeVisible();
 });
diff --git a/tsconfig.json b/tsconfig.json
index 93d71bb..d70aaa4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
+    "types": ["vite/client"],
     "paths": {
       "@/*": ["./src/*"]
     }
diff --git a/vite.config.ts b/vite.config.ts
index ecbbac0..53b0560 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -277,7 +277,7 @@ const sharedConfig = {
   plugins: [react(), createAdminApiPlugin(), copyStaticPublicAssetsPlugin()],
   resolve: {
     alias: {
-      '@': resolve(__dirname, '../src'),
+      '@': resolve(__dirname, 'src'),
     },
   },
   build: {