/* ============================================================ MCTidia — panel de accesibilidad Dos mitades independientes: 1. el mando (botón de engranaje + cajón lateral) 2. los efectos, colgados de atributos de que pone js/a11y-boot.js antes del primer pintado La segunda mitad no sabe nada de la primera: si el módulo de la interfaz fallara al cargar, las preferencias guardadas se seguirían aplicando igual. ============================================================ */ /* --------------------------------------------------------------- 1. MANDO --------------------------------------------------------------- */ .a11y-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 150; display: grid; place-items: center; width: 48px; height: 52px; padding: 0; border: 1px solid var(--hairline-hi); border-right: 0; border-radius: 12px 0 0 12px; background: rgba(8, 10, 13, 0.86); backdrop-filter: blur(14px); color: var(--text-dim); cursor: pointer; transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), width 0.3s var(--ease-out); } .a11y-fab:hover, .a11y-fab:focus-visible { width: 56px; color: var(--cyan); background: rgba(14, 18, 24, 0.94); } .a11y-fab svg { width: 22px; height: 22px; /* el engranaje gira solo al pasar por encima: un giro perpetuo en una esquina fija es justo el tipo de movimiento que este panel apaga */ transition: transform 0.6s var(--ease-out); } .a11y-fab:hover svg, .a11y-fab:focus-visible svg { transform: rotate(60deg); } .a11y-scrim { position: fixed; inset: 0; z-index: 189; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; /* visibility no se interpola: se retrasa hasta el final al cerrar y salta al instante al abrir. Interpolarla dejaba el panel en `hidden` durante el tick de apertura y nada de dentro admitía foco. */ transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s; } .a11y-panel { position: fixed; top: 0; right: 0; z-index: 190; display: flex; flex-direction: column; width: min(370px, 100vw); height: 100dvh; border-left: 1px solid var(--hairline-hi); background: rgba(6, 8, 11, 0.97); backdrop-filter: blur(20px); transform: translateX(101%); visibility: hidden; transition: transform 0.42s var(--ease-cine), visibility 0s linear 0.42s; } .a11y-panel[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform 0.42s var(--ease-cine), visibility 0s; } .a11y-scrim[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease-out), visibility 0s; } .a11y-panel__head { display: flex; align-items: flex-start; gap: 16px; padding: calc(var(--pad) * 0.8) calc(var(--pad) * 0.8) 18px; border-bottom: 1px solid var(--hairline); } .a11y-panel__title { margin: 0; font-family: var(--grot); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; } .a11y-panel__sub { margin: 6px 0 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .a11y-panel__close { flex: none; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--text-dim); font-size: 1rem; line-height: 1; cursor: pointer; transition: color 0.25s, border-color 0.25s; } .a11y-panel__close:hover, .a11y-panel__close:focus-visible { color: var(--text); border-color: var(--hairline-hi); } .a11y-panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--pad) * 0.7) calc(var(--pad) * 0.8); display: grid; gap: 22px; align-content: start; } .a11y-group__label { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .a11y-group__hint { margin: 8px 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--text-faint); } /* Segmentos: cada grupo es un radiogroup real, así el lector de pantalla anuncia "opción 2 de 3" y las flechas navegan sin ayuda nuestra. */ .a11y-seg { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .a11y-seg__opt { flex: 1; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-family: var(--grot); font-size: 0.8rem; font-weight: 400; line-height: 1.25; cursor: pointer; transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out); } .a11y-seg__opt:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); } .a11y-seg__opt[aria-checked="true"] { background: color-mix(in srgb, var(--cyan) 17%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 42%, transparent); } .a11y-panel__foot { padding: 16px calc(var(--pad) * 0.8) calc(var(--pad) * 0.8); border-top: 1px solid var(--hairline); } .a11y-reset { width: 100%; min-height: 44px; border: 1px solid var(--hairline-hi); border-radius: 10px; background: transparent; color: var(--text-dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.25s, border-color 0.25s; } .a11y-reset:hover, .a11y-reset:focus-visible { color: var(--copper); border-color: var(--copper); } /* El aviso de recarga sólo aparece cuando el cambio lo necesita de verdad (movimiento): el resto se aplica en caliente. */ .a11y-note { margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--copper) 34%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--copper) 8%, transparent); font-size: 0.76rem; line-height: 1.5; color: var(--text); } .a11y-note[hidden] { display: none; } .a11y-note__btn { margin-top: 8px; padding: 7px 14px; min-height: 36px; border: 1px solid var(--copper); border-radius: 8px; background: transparent; color: var(--copper); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .a11y-note__btn:hover { background: color-mix(in srgb, var(--copper) 16%, transparent); } /* El engranaje se aparta del pulgar en móvil: a media altura tapa contenido en pantallas estrechas y compite con el banner de consentimiento abajo. */ @media (max-width: 640px) { .a11y-fab { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); transform: none; } } /* --------------------------------------------------------------- 2. EFECTOS --------------------------------------------------------------- */ /* --- Movimiento reducido --- Interruptor general para todo lo que anima por CSS. Lo que anima por JS (scrub del video, visor 3D, parallax) lo apaga js/a11y.js en el arranque: ahí no basta con acortar la duración, hay que no cargar los 97 fotogramas. */ :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } :root[data-motion="reduce"] { scroll-behavior: auto !important; } /* --- Alto contraste --- Los tonos apagados de la marca suben a texto pleno y las hairlines dejan de ser insinuaciones. Los velos decorativos (grano, viñeta, halos) se retiran porque restan contraste justo encima del texto. */ :root[data-contrast="high"] { --text: #ffffff; --text-dim: #ffffff; --text-faint: rgba(255, 255, 255, 0.88); --hairline: rgba(255, 255, 255, 0.42); --hairline-hi: rgba(255, 255, 255, 0.7); --copper: #ffbe8c; --cyan: #7ce4ff; --accent: #ffbe8c; } :root[data-contrast="high"] .stage__vignette, :root[data-contrast="high"] .stage__glow, :root[data-contrast="high"] .lights, :root[data-contrast="high"] .cinema__canvas { opacity: 0.18 !important; } /* fondos translúcidos que dejaban leer la imagen de debajo se vuelven sólidos */ :root[data-contrast="high"] .nav, :root[data-contrast="high"] .a11y-panel, :root[data-contrast="high"] .a11y-fab { background: #000000; } /* --- Tipografía legible --- Michroma y Space Grotesk son fuentes de cartel: bonitas en un titular, costosas para dislexia y baja visión. Se sustituyen por una sans neutra de trazo uniforme y se sueltan los interletrados apretados. */ :root[data-font="legible"] { --grot: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif; --brand: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif; --serif: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif; } :root[data-font="legible"] body { font-family: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif; } :root[data-font="legible"] h1, :root[data-font="legible"] h2, :root[data-font="legible"] h3, :root[data-font="legible"] p, :root[data-font="legible"] li, :root[data-font="legible"] a, :root[data-font="legible"] button, :root[data-font="legible"] label { letter-spacing: normal; word-spacing: 0.06em; } :root[data-font="legible"] p, :root[data-font="legible"] li { line-height: 1.75; } /* --- Escala de texto --- Se mueve la raíz, no cada elemento. Las hojas del sitio declaran 165 de sus 166 tamaños en rem, así que toda la escala tipográfica sube junta y conserva sus proporciones; los espaciados van en px y clamp(px), de modo que el layout no se desarma. En porcentaje, además, parte del tamaño que el usuario ya haya fijado en su navegador en vez de pisarlo. Los titulares en clamp(rem, vw, rem) crecen menos que el texto corrido: el término vw no se mueve. Es lo que interesa —el cuerpo es lo que hay que leer, y un titular de portada desbordado taparía el modelo 3D. */ :root[data-text="115"] { font-size: 115%; } :root[data-text="130"] { font-size: 130%; } /* --- Enlaces subrayados --- Un enlace que sólo se distingue por el color desaparece para quien no percibe ese color. Se excluyen los que ya son un botón o un logo: ahí el subrayado cruza el rótulo sin aportar información. */ :root[data-links="underline"] a:not(.nav__brand):not([class*="btn"]):not([class*="cta"]) { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; } /* --- Foco reforzado --- */ :root[data-focus="strong"] :focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px !important; border-radius: 4px; } /* --- Corrección de daltonismo --- No es una simulación: las matrices redistribuyen el error del canal que el ojo no separa hacia los que sí, de modo que dos colores antes gemelos se separan. Los filtros viven en el SVG que inyecta js/a11y.js. El filtro va en , no en : en el elemento raíz no crea bloque contenedor, así que la barra fija y los sticky del plató siguen enteros. */ :root[data-cvd="prot"] { filter: url(#a11y-prot); } :root[data-cvd="deut"] { filter: url(#a11y-deut); } :root[data-cvd="trit"] { filter: url(#a11y-trit); } .a11y-filters { position: absolute; width: 0; height: 0; overflow: hidden; } /* El propio panel respeta la preferencia del sistema aunque el usuario todavía no haya tocado nada: no puede entrar deslizándose alguien que pidió no ver deslizamientos. */ @media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-fab svg, .a11y-panel, .a11y-scrim { transition-duration: 0.001ms; } }