/* ══════════════════════════════════════════════════════════════════════ CONSO — accesibilidad: preferencias de lectura Qué es y qué NO es. Esto no es un "overlay" de los que se contratan por mes. No toca el ARIA de la página, no secuestra el foco ni finge arreglar nada: sólo cambia variables CSS del propio sitio cuando el visitante lo pide. Un lector de pantalla configurado por su dueño sigue funcionando exactamente igual, con el panel abierto o cerrado. CÓMO FUNCIONA El estado vive en atributos de (data-a11y-*), no en clases de componentes. La paleta del sitio ya está armada sobre variables en :root, así que alcanza con redefinir esas variables acá: ningún componente del sitio sabe que este archivo existe, y por eso se puede sacar entero sin romper nada. El orden importa: este archivo se carga DESPUÉS de site.css. QUÉ HAY Y QUÉ NO Ocho controles: tamaño del texto en escalones, alto contraste, espaciado, resaltar enlaces, tipografía simple, cursor grande, máscara de lectura y guía de lectura. Faltan cuatro de los que traen los widgets del rubro, y faltan a propósito: no hay animaciones que pausar (el sitio no se mueve, por decisión de diseño), las fotos son parte del contenido y esconderlas rompe la página, no hay tooltips, y reacomodar la alineación del texto empeora la lectura para todos. Un botón que no hace nada es peor que un botón que falta: promete ayuda y no la da. Tampoco hay "fuente para dislexia": los estudios controlados no muestran ventaja de las tipografías especiales frente a una común. Lo que sí ayuda —trazo ancho y aire entre letras— es lo que hace "Tipografía simple", sin prometer un diagnóstico que no puede atender. ══════════════════════════════════════════════════════════════════════ */ /* ── utilidad: sólo para lectores de pantalla ───────────────────────── Texto que existe para el lector de pantalla y no para el ojo. No se usa display:none ni visibility:hidden porque eso también lo esconde del lector, que es justo lo contrario de lo que se busca. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── saltar al contenido ────────────────────────────────────────────── Primero en el orden de tabulación de toda página. Sin esto, quien navega con teclado tiene que atravesar el menú entero —con sus submenús— antes de llegar al texto, y de nuevo en cada página que abre. Invisible hasta que recibe el foco: no le cuesta nada a quien usa mouse. */ .saltar { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--card); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: var(--shadow-raised); font-family: var(--display); font-size: 0.95rem; font-weight: 600; text-decoration: none; } .saltar:focus { top: 12px; } /*
recibe tabindex="-1" desde el JS para poder ser destino del salto. Ese tabindex haría aparecer un anillo de foco al hacer clic en cualquier parte del contenido, que sería ruido visual sin significado. */ main:focus { outline: none; } /* ══════════════════════════════════════════════════════════════════════ LOS CINCO MODOS ══════════════════════════════════════════════════════════════════════ */ /* ── 1 · alto contraste ─────────────────────────────────────────────── Cada nivel de tinta baja un escalón hacia el negro y las líneas se afirman. Los valores van literales y no como var(): las variables se resuelven tarde, así que escribir `--ink-3: var(--ink-2)` junto con `--ink-2: var(--ink)` terminaría con los tres niveles del mismo color y la jerarquía del texto aplastada. */ html[data-a11y-contraste='alto'] { --ink-2: #2f1e12; /* el valor de --ink */ --ink-3: #6b5945; /* el valor de --ink-2 de base */ --borrador: #6b5945; --rule: #d8c9ad; /* el valor de --rule-strong */ --rule-strong: #b9a67f; /* El dorado también baja un escalón, en sus dos registros: --firma es el de bordes e íconos (de 3.01:1 a 5.84:1) y --firma-fuerte el de los rótulos chicos (de 5.08:1 a 7.33:1). */ --firma: #7d5210; --firma-fuerte: #6b4410; --firma-hover: #5f3d0b; --firma-soft: color-mix(in oklab, #7d5210 18%, transparent); --noche-2: color-mix(in oklab, #f3ead8 88%, transparent); --noche-rule: color-mix(in oklab, #f3ead8 42%, transparent); } /* El anillo de foco es información, no decoración: si no se distingue del fondo, quien navega con teclado no sabe dónde está parado. */ html[data-a11y-contraste='alto'] :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* El sistema operativo manda. Quien ya pidió más contraste en su equipo lo recibe sin tener que encontrar ni tocar el panel —que es exactamente lo que los widgets contratados no hacen, porque les interesa su interruptor y no la configuración que el visitante ya tenía. */ @media (prefers-contrast: more) { html:not([data-a11y-contraste='no']) { --ink-2: #2f1e12; --ink-3: #6b5945; --rule: #d8c9ad; --rule-strong: #b9a67f; --firma: #7d5210; --firma-fuerte: #6b4410; --firma-hover: #5f3d0b; } } /* ── alto contraste sobre tema oscuro ───────────────────────────────── Los valores de arriba son literales de la paleta de día: sobre el tema oscuro dejarían tinta marrón sobre papel negro, es decir, el contrario exacto de lo que se pidió. Acá el mismo escalón se sube en vez de bajarse. Los dos selectores llevan los dos atributos a propósito: así ganan por especificidad a las reglas de una sola condición, sin importar el orden de los archivos. */ html[data-tema='oscuro'][data-a11y-contraste='alto'] { --ink-2: #f4ece0; /* el valor de --ink */ --ink-3: #c8b8a3; /* el valor de --ink-2 de base */ --borrador: #c8b8a3; --rule: #514234; /* el valor de --rule-strong */ --rule-strong: #6d5a47; --firma: #f0be74; --firma-fuerte: #f6cf90; --firma-hover: #fadaa4; --firma-soft: color-mix(in oklab, #f0be74 20%, transparent); --noche-2: color-mix(in oklab, #f3ead8 88%, transparent); --noche-rule: color-mix(in oklab, #f3ead8 42%, transparent); } @media (prefers-contrast: more) { html[data-tema='oscuro']:not([data-a11y-contraste='no']) { --ink-2: #f4ece0; --ink-3: #c8b8a3; --rule: #514234; --rule-strong: #6d5a47; --firma: #f0be74; --firma-fuerte: #f6cf90; --firma-hover: #fadaa4; } } /* ── el botón de WhatsApp con alto contraste ────────────────────────── El botón lleva el verde de marca (#25d366) con el texto en blanco, que es como Meta entrega la pieza. Ese par da 1.98:1: se reconoce de lejos, pero no se lee de cerca. Acá, y sólo acá, gana la lectura sobre la marca: el verde oscuro oficial de WhatsApp (#075e54) con blanco da 7.67:1 y sigue siendo un verde de WhatsApp, no un botón genérico. Se cambia el fondo y no el texto porque oscurecer la letra sobre el verde claro llega a 4.5:1 pero deja el botón indistinguible del resto de la página en escala de grises; el fondo oscuro lo mantiene como bloque. */ html[data-a11y-contraste='alto'] .btn--wa, html[data-a11y-contraste='alto'] .wafab { background: #075e54; color: #fff; } html[data-a11y-contraste='alto'] .btn--wa:hover, html[data-a11y-contraste='alto'] .wafab:hover { background: #04443d; } @media (prefers-contrast: more) { html:not([data-a11y-contraste='no']) .btn--wa, html:not([data-a11y-contraste='no']) .wafab { background: #075e54; color: #fff; } html:not([data-a11y-contraste='no']) .btn--wa:hover, html:not([data-a11y-contraste='no']) .wafab:hover { background: #04443d; } } /* ── 2 · tamaño del texto ───────────────────────────────────────────── Una sola línea alcanza para todo el sitio porque 78 de los 79 tamaños de fuente están declarados en rem, y rem se mide contra . Escalones y no botones "+/−": no hay que acertarle varias veces seguidas a un botón chico con el pulso tembloroso. */ html[data-a11y-texto='115'] { font-size: 115%; } html[data-a11y-texto='130'] { font-size: 130%; } html[data-a11y-texto='150'] { font-size: 150%; } /* El ancla de navegación tiene que crecer con el encabezado, o el título al que se salta queda tapado por la cabecera fija. */ html[data-a11y-texto] { scroll-padding-top: 7rem; } /* ── la cabecera tiene que plegarse antes cuando el texto crece ─────── El sitio pasa a menú de hamburguesa por debajo de 1160px. Ese corte está en píxeles, y con el texto al 130 % o al 150 % el menú de escritorio sigue desplegado pero ya no entra: «Precios» e «Ingresar» se montan uno sobre otro y el botón de demo parte en dos renglones. Sin esto, agrandar el texto rompería la navegación de todas las páginas —la función haría daño en lugar de ayudar. No sirve pasar el corte de 1160px a em: en una consulta de medios las unidades relativas se miden contra el tamaño inicial del navegador y no contra el font-size que este panel le pone a . Por eso el corte se corre a mano, multiplicado por cada escalón: 115 % → 1160 × 1.15 ≈ 1334 130 % → ≈ 1508 150 % → 1740 La especificidad de `html[data-a11y-texto] .nav` supera la de `.nav` a secas, así que gana sin importar el orden de los archivos. */ @media (max-width: 1739px) { html[data-a11y-texto='150'] .nav, html[data-a11y-texto='150'] .hdr__solo-desktop { display: none; } html[data-a11y-texto='150'] .hdr__burger { display: inline-flex; } html[data-a11y-texto='150'] .drawer[data-open='true'] { display: block; } } @media (max-width: 1507px) { html[data-a11y-texto='130'] .nav, html[data-a11y-texto='130'] .hdr__solo-desktop { display: none; } html[data-a11y-texto='130'] .hdr__burger { display: inline-flex; } html[data-a11y-texto='130'] .drawer[data-open='true'] { display: block; } } @media (max-width: 1333px) { html[data-a11y-texto='115'] .nav, html[data-a11y-texto='115'] .hdr__solo-desktop { display: none; } html[data-a11y-texto='115'] .hdr__burger { display: inline-flex; } html[data-a11y-texto='115'] .drawer[data-open='true'] { display: block; } } /* ── 3 · espaciado del texto ────────────────────────────────────────── Los objetivos de WCAG 1.4.12: interlínea 1,5×, letras 0,12em, palabras 0,16em y 2em entre párrafos. Un solo interruptor en vez de las tres perillas separadas del widget: son la misma necesidad de lectura y separarlas sólo obliga a tomar tres decisiones para conseguir una cosa. */ html[data-a11y-espaciado='si'] body { line-height: 1.85; letter-spacing: 0.055em; word-spacing: 0.12em; } html[data-a11y-espaciado='si'] p, html[data-a11y-espaciado='si'] li { line-height: 1.85; } html[data-a11y-espaciado='si'] p + p { margin-top: 2em; } /* Los títulos llevan letter-spacing negativo por diseño; con el modo activo eso se neutraliza en vez de sumarse y quedar apretado igual. */ html[data-a11y-espaciado='si'] :is(h1, h2, h3, h4, .h1, .h2, .h3) { letter-spacing: 0; line-height: 1.28; } /* El panel se lee bien solo: si además recibiera el espaciado, sus propios controles se desarmarían y quien lo activó no podría desactivarlo. */ html[data-a11y-espaciado='si'] .a11y { line-height: 1.65; letter-spacing: normal; word-spacing: normal; } /* ── 4 · resaltar enlaces ───────────────────────────────────────────── Distinguir un enlace sólo por el color falla para quien no separa bien los colores (WCAG 1.4.1). Con el modo activo cada enlace del contenido queda subrayado y con marco, sin depender del tono. */ html[data-a11y-enlaces='si'] main a, html[data-a11y-enlaces='si'] footer a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background-image: none; /* el sitio dibuja subrayados con background-size */ } html[data-a11y-enlaces='si'] main a:not(.btn):not(.card):not(.tarjeta):not(.canal):not(.mas__it), html[data-a11y-enlaces='si'] footer a { outline: 1px solid var(--rule-strong); outline-offset: 2px; border-radius: 3px; } /* ── 5 · tipografía simple ──────────────────────────────────────────── No se ofrece "fuente para dislexia": los estudios controlados no muestran ventaja de las tipografías especiales frente a una común: lo que ayuda es el trazo ancho y el aire entre letras. Eso es lo que hace este modo, y no promete más de lo que puede cumplir. Usa fuentes que ya están en el equipo: no descarga nada. */ html[data-a11y-tipo='simple'] { --display: system-ui, 'Segoe UI', Verdana, sans-serif; } html[data-a11y-tipo='simple'] body { letter-spacing: 0.012em; } html[data-a11y-tipo='simple'] :is(h1, h2, h3, h4, .h1, .h2, .h3) { letter-spacing: -0.012em; /* menos apretado que el -0.028em de diseño */ } /* ── 6 · cursor grande ──────────────────────────────────────────────── Sí, el tamaño del puntero se configura en el sistema operativo. Pero nadie va a entrar a la configuración de Windows para leer una página: quien pierde el cursor de vista lo pierde acá y ahora, y la ayuda tiene que estar donde está el problema. Los dibujos van embebidos como data:URI —ni un archivo más que pedirle al servidor— y son blancos con contorno negro para que se vean tanto sobre el papel claro como sobre la franja oscura del pie. */ html[data-a11y-cursor='grande'], html[data-a11y-cursor='grande'] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2v16l4-3.6 2.5 5.6 2.9-1.3-2.5-5.4H17z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 7 4, auto; } html[data-a11y-cursor='grande'] :is(a, button, summary, label, select, [role='button'], [role='radio']), html[data-a11y-cursor='grande'] :is(a, button, summary, [role='button']) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M10 20.5c-2 0-3.2-.9-4.2-2.4l-2.4-3.6a1.5 1.5 0 0 1 2.3-1.9L8 14.6V4.6a1.6 1.6 0 0 1 3.2 0v5.6h.5V8.4a1.6 1.6 0 0 1 3.2 0v1.8h.5V9.2a1.6 1.6 0 0 1 3.2 0v5.6c0 3.2-2.2 5.7-5.4 5.7z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 18 4, pointer; } /* En un campo de texto el cursor tiene que seguir diciendo "acá se escribe": cambiárselo por una flecha esconde información. */ html[data-a11y-cursor='grande'] :is(input[type='text'], input[type='email'], input[type='search'], textarea) { cursor: text; } /* ── 7 · franja y guía de lectura ───────────────────────────────────── Dos formas de no perder el renglón. La franja apaga todo menos la altura que se está leyendo; la guía sólo marca esa altura con una línea. Sirven para leer textos largos sin saltar de renglón —una necesidad común y muy poco atendida— y las dos siguen al mouse. La franja es UN solo elemento: el hueco claro es el elemento mismo y lo oscuro es su sombra, estirada más allá de la pantalla. Dos paneles —uno arriba y otro abajo— habrían necesitado calcular dos alturas en cada movimiento del mouse. */ .a11y-franja, .a11y-linea { position: fixed; left: 0; right: 0; top: 0; display: none; pointer-events: none; /* la página se sigue usando por debajo */ z-index: 45; /* por debajo del botón flotante (50) */ } .a11y-franja { height: 7.5rem; box-shadow: 0 0 0 100vmax rgb(20 12 6 / 0.62); } html[data-a11y-lectura='mascara'] .a11y-franja { display: block; } .a11y-linea { height: 0.28rem; background: var(--ink); /* Un filo claro alrededor: sobre la franja oscura del pie, una línea marrón sobre fondo marrón no se vería. */ box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9); } html[data-a11y-lectura='guia'] .a11y-linea { display: block; } /* ── nada de esto existe sin mouse ──────────────────────────────────── En un teléfono no hay puntero: la franja quedaría clavada en el medio de la pantalla tapando el contenido, y el "cursor grande" no tendría ningún cursor que agrandar. Los tres controles se esconden en vez de mentir. Los selectores repiten la especificidad de los de arriba y ganan por venir después: no hace falta ningún !important. */ @media (hover: none) { /* Se cualifica con .a11y a propósito: `.a11y__grupo` se define más abajo en este archivo y, a igual especificidad, ganaría por orden. Subir la especificidad acá deja la regla a salvo de que alguien mueva bloques. */ .a11y .a11y__grupo--puntero { display: none; } html[data-a11y-lectura='mascara'] .a11y-franja, html[data-a11y-lectura='guia'] .a11y-linea { display: none; } html[data-a11y-cursor='grande'], html[data-a11y-cursor='grande'] * { cursor: auto; } } /* ══════════════════════════════════════════════════════════════════════ EL BOTÓN Abajo a la izquierda. El de WhatsApp vive abajo a la derecha: esquinas distintas para que no compitan ni se tapen en el teléfono. Deliberadamente NO es dorado: en este sitio el dorado significa una sola cosa —lo que el administrador firma— y esto no se firma. ══════════════════════════════════════════════════════════════════════ */ /* Las medidas van en rem y no en px: el botón y el panel tienen que crecer junto con el texto. Quien pidió 150 % lo pidió porque ve poco, y dejarle el botón del tamaño original —o peor, el panel más angosto que el contenido que crece adentro— es fallarle justo en el control que existe para ayudarlo. */ .a11yfab { position: fixed; left: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: 0 6px 24px rgb(44 26 16 / 0.22); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .a11yfab:hover { background: var(--paper-2); } .a11yfab svg { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; } /* Mientras el panel está abierto el botón queda marcado: sin esto, con el panel corrido a un costado, no se ve qué lo abrió. */ .a11yfab[aria-expanded='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ══════════════════════════════════════════════════════════════════════ EL PANEL nativo: la trampa de foco, Escape y la devolución del foco al botón las hace el navegador, y las hace mejor que cualquier reimplementación. La ironía del rubro es que los widgets de accesibilidad contratados suelen ser inaccesibles con teclado; acá el panel se maneja entero con Tab, flechas, Enter y Escape. ══════════════════════════════════════════════════════════════════════ */ .a11y { position: fixed; inset: auto auto 5.5rem 20px; /* justo encima del botón que lo abrió */ width: min(23rem, calc(100vw - 40px)); /* El navegador le pone a todo un max-width propio de calc(100% - 38px), pensado para que un diálogo centrado no toque los bordes. Acá el ancho ya lo decide la línea de arriba, y ese tope ajeno recortaba el panel en pantallas angostas: en un teléfono de 390 lo dejaba en 352 y no llegaba a los bordes. */ max-width: none; max-height: min(76vh, 40rem); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 16px; box-shadow: var(--shadow-raised); font-family: var(--display); font-size: 1rem; line-height: 1.65; } .a11y::backdrop { background: rgb(44 26 16 / 0.28); } /* Igual que el pie: la cruz de cerrar no puede quedar fuera de la vista al desplazar la lista. */ .a11y__cab { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; background: var(--card); border-bottom: 1px solid var(--rule); } .a11y__cab h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; } .a11y__x { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--rule); border-radius: 9px; color: var(--ink-2); cursor: pointer; } .a11y__x:hover { background: var(--paper-2); color: var(--ink); } .a11y__x svg { width: 17px; height: 17px; } .a11y__cuerpo { padding: 14px 16px 16px; display: grid; gap: 16px; } .a11y__grupo { display: grid; gap: 8px; } .a11y__rot { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); } /* ── interruptores ─────────────────────────────────────────────────── */ .a11y__sw { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; background: var(--paper); border: 1px solid var(--rule); border-radius: 11px; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .a11y__sw:hover { background: var(--paper-2); } .a11y__sw svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink-2); } /* El estado encendido no se dice sólo con color: lleva marco grueso y la pastilla se corre. Quien no distingue bien los colores igual ve cuál está activo. Y el lector de pantalla lo lee del aria-pressed, no de esto. */ .a11y__sw[aria-pressed='true'] { background: var(--paper-2); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .a11y__sw[aria-pressed='true'] svg { color: var(--ink); } .a11y__pill { margin-left: auto; flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; background: var(--rule-strong); position: relative; } .a11y__pill::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgb(44 26 16 / 0.3); } .a11y__sw[aria-pressed='true'] .a11y__pill { background: var(--ink); } .a11y__sw[aria-pressed='true'] .a11y__pill::after { left: 20px; } /* ── escalones de tamaño ───────────────────────────────────────────── */ .a11y__escalones { display: flex; gap: 6px; } .a11y__paso { flex: 1 1 0; min-width: 0; padding: 11px 2px; /* "150 %" no puede partirse en dos renglones: el escalón crecería de alto y la fila quedaría despareja justo cuando el texto está más grande. */ white-space: nowrap; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); font-family: inherit; font-weight: 600; cursor: pointer; line-height: 1.2; } .a11y__paso:hover { background: var(--paper-2); } .a11y__paso[aria-checked='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Cada escalón se muestra en su propio tamaño: se elige mirando, no leyendo el número. */ .a11y__paso:nth-child(1) { font-size: 0.8rem; } .a11y__paso:nth-child(2) { font-size: 0.88rem; } .a11y__paso:nth-child(3) { font-size: 0.96rem; } .a11y__paso:nth-child(4) { font-size: 1.04rem; } /* ── pie del panel ─────────────────────────────────────────────────── */ /* Pegado al fondo del panel: con siete interruptores la lista ya no entra sin desplazar, y "Restablecer todo" es justamente lo que busca quien se perdió entre las opciones. Dejarlo al final de un scroll sería esconder la salida de emergencia. */ .a11y__pie { position: sticky; bottom: 0; padding: 12px 16px 15px; border-top: 1px solid var(--rule); background: var(--card); display: grid; gap: 9px; } .a11y__reset { padding: 10px 14px; background: transparent; border: 1px solid var(--rule-strong); border-radius: 10px; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .a11y__reset:hover { background: var(--paper-2); } .a11y__nota { font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); } .a11y__nota kbd { font-family: var(--mono); font-size: 0.92em; padding: 1px 5px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper); } /* ── en el teléfono: hoja desde abajo, a todo el ancho ─────────────── */ @media (max-width: 560px) { .a11y { /* width:auto con left y right en 0: el ancho lo resuelve el inset y no hay que pelearle a los estilos propios del . */ inset: auto 0 0 0; width: auto; max-height: 88vh; border-radius: 16px 16px 0 0; border-bottom: 0; } .a11yfab { left: 16px; bottom: 16px; } } /* ── quien pidió menos movimiento en su equipo ─────────────────────── */ @media (prefers-reduced-motion: reduce) { .a11yfab, .a11y__sw, .a11y__paso { transition: none; } }