/** * ─── Accesibilidad de base, en TODO el sitio ────────────────────────────────── * * Se encola sin condición desde `inc/accesibilidad.php`, junto al JS que ya vestía * el toggle de búsqueda del header. Aquí van las tres correcciones que salieron de * la revisión de UI/UX del 2026-09-01 y que NO son de una plantilla concreta. * * Cada bloque documenta la medición que lo justifica, porque las tres se leen como * obviedades y ninguna lo es. */ /* ══ 01 · ANILLO DE FOCO ══════════════════════════════════════════════════════ * * ⚠️ **El `!important` no es pereza: es obligatorio, y sin él esta hoja entera no * pinta nada.** El theme padre trae en su «Browser Reset» (`mink/css/main.css:406`): * * *:focus { outline: none !important; } * * o sea que el sitio salía con el indicador de foco ANULADO para quien navega con * teclado. Medido el 2026-09-04: 265 reglas `:focus` y 37 `:focus-visible` en las 122 * hojas de la portada —varias nuestras, en `linea-producto.css`, `lonas.css` y * `legales.css`— y ninguna alcanzaba el caso genérico, porque un `!important` solo lo * bate otro `!important`. El primer enlace de `#main` devolvía * `outline: rgb(255,255,255) none 0px` y `box-shadow: none`. * * Por eso tampoco vale `:where(...)`, que aporta 0 de especificidad: con dos * `!important` empatados decide el orden de las hojas, y el orden entre `main.css` * (theme padre) y esta (hijo, prioridad 20) no está garantizado. `body :focus-visible` * es (0,1,1) y bate al (0,1,0) de `*:focus` por especificidad, así que gana sin * depender del orden. El `body` está solo para eso: no acota nada. * * ── Por qué un selector genérico y no una lista de etiquetas ────────────────── * * La primera versión enumeraba `a`, `button`, `input`, `select`, `textarea`, * `[tabindex]`… y dejó fuera **dos paradas de tabulación de cada catorce**, medidas con * teclado real en `/contacto/`: `div.wgl-menu-outer_content` y los dos envoltorios de * Turnstile. Son `
` sin `tabindex` que Chrome mete igualmente en el orden de * tabulación **por tener scroll**, y no hay selector que diga «desbordable». Cualquier * lista de etiquetas tiene ese agujero por construcción; el genérico no. * * Y no reparte anillos de más: `:focus-visible` es justamente el pseudo-estado que el * propio navegador enciende cuando cree que hace falta un indicador. * * ⚠️ **Contrapartida asumida: este anillo PISA los `:focus-visible` a medida** de los * componentes (el toggle del plugin de contacto, las flechas de Splide, las pestañas de * Elementor), porque ninguno usa `!important` y aquí es obligatorio. Se acepta a cambio * de un indicador uniforme y sin huecos. **Un componente que quiera el suyo tiene que * declararlo con `!important`** — es el precio de que el theme padre anulase el foco de * todo el sitio con un `!important` en su reset. * * ── Por qué el anillo es de DOS tonos y no del rojo de marca ────────────────── * * Un indicador de foco necesita 3:1 contra lo que tiene al lado (WCAG 2.2 §1.4.11). * El rojo `#BC090E` da 3,18:1 sobre negro —ya anotado en el CLAUDE.md como por debajo * de AA para texto— y sobre una foto a media luz no llega. Un solo color obliga a * enumerar cada sección oscura del sitio y a mantener esa lista para siempre. * * La salida es el anillo negro con filete blanco: sobre fondo claro se ve el negro, * sobre fondo oscuro o sobre foto se ve el blanco, y no hay lista que mantener. Es * el mismo criterio que ya usa `.pt-wa__toggle:focus-visible` del plugin de contacto * (outline claro + `box-shadow` de contraste), aquí generalizado. * * `:focus-visible` y no `:focus`: el anillo aparece con teclado y no al hacer clic. */ body :focus-visible { outline: 3px solid #000000 !important; outline-offset: 2px !important; /* El filete blanco entra por dentro (los 2px del offset) y sale 2px por fuera del trazo negro, así que el anillo se lee sobre cualquier fondo. */ box-shadow: 0 0 0 7px #ffffff !important; border-radius: 2px; /* Solo el anillo se exime de la transición del theme, no el elemento entero: acotar `transition-property` deja intactos el color y el fondo, que sí deben seguir animando en el hover. Sin esto el anillo entra con fundido y el indicador llega tarde —y, de paso, cualquier medición lo pilla a medias (trampa 103)—. */ transition-property: outline-color, outline-width, outline-offset, box-shadow !important; transition-duration: 0s !important; } /* Sobre las bandas negras y sobre el hero se invierten los dos tonos, porque ahí el que tiene que dar la cara es el blanco. No es imprescindible —el filete blanco de la regla de arriba ya se ve— pero el anillo queda más limpio con el trazo grueso del color que contrasta. Los colores van literales y NO por variable heredada a propósito: el gate real es esta lista de selectores, así que una `--pt-foco-trazo` declarada en una sección nueva no la haría entrar sola —seguiría necesitando su línea aquí— y la indirección solo escondería dónde se decide. Sección oscura nueva: se añade su selector aquí. */ .pt-cta :focus-visible, .pt-lp-hero :focus-visible, .pt-lp-cotiza :focus-visible, .wgl-theme-header :focus-visible, [data-elementor-type="footer"] :focus-visible, footer :focus-visible { outline-color: #ffffff !important; box-shadow: 0 0 0 7px #000000 !important; } /* ══ 02 · ENLACE PARA SALTAR AL CONTENIDO ═════════════════════════════════════ * * El header trae 61 ítems de menú (5 ramas con mega menú): sin este enlace, llegar * al contenido con teclado son decenas de tabulaciones en cada página. El destino es * el `
` que ya imprime `header.php` del hijo, y el enlace lo inyecta * `inc/accesibilidad.php` en `wp_body_open()` — no hace falta tocar la plantilla. * * Se oculta con la técnica de 1x1 px recortado y NO con `display: none` ni con * `left: -9999px`, y las dos exclusiones tienen su motivo: * * · `display: none` (y `visibility: hidden`) quita el elemento del orden de * tabulación: el enlace no existiría para quien lo necesita. * · ⚠️ **`left: -9999px` sí funciona pero rompe `medir.py`**, la sonda del proyecto: * lo cuenta como desborde horizontal de 10.209 px y, al ir esta hoja en TODAS las * páginas, metería un 🚨 falso en las 36. Comprobado antes de dejarlo así. Con el * recorte, la caja mide 1x1 px dentro del viewport y no desborda nada. * * `transition: none` no es cosmética: el theme pone transición a los ``, así que sin * ella el enlace ATRAVESABA la pantalla al recibir el foco —medido con teclado real: * 150 ms después del primer Tab iba por `left: -2931px`, todavía de viaje—. Un * indicador de foco tiene que aparecer donde está, no llegar. */ .pt-saltar { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; transition: none !important; z-index: 100000; background-color: #ffffff; color: #1a1a1a; font-size: 15px; font-weight: 600; text-decoration: none; text-transform: none; letter-spacing: normal; } .pt-saltar:focus, .pt-saltar:focus-visible { top: 16px; left: 16px; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; padding: 14px 22px; } /* ══ 03 · MOVIMIENTO REDUCIDO ═════════════════════════════════════════════════ * * ⚠️ **El informe decía «cero reglas de `prefers-reduced-motion` en toda la hoja» y * es falso: hay 13 bloques** (medido el 2026-09-04) — `animate.css` del padre, * Elementor, Font Awesome, Splide, el plugin de contacto y `linea-producto.css`. Lo * que ninguno cubre son los revelados de WGL, que son justo los que molestan. * * El de `animate.css` (línea 3616) acota por `.animated`, y los `` de letra a * letra del `wgl-text-editor` NO llevan esa clase: llevan solo el nombre de la * animación (`fadeIn`). Y sobre todo, ninguno toca el `opacity: 0` de partida, que es * lo que deja el texto sin pintar mientras espera su turno. * * ⚠️ **Aquí NO va un `*, *::before, *::after { animation-duration: 0.01ms }`.** Medio * interfaz de este theme vive en estados que dependen de que una animación TERMINE * (trampas 103, 106, 111, 112 y 119 del CLAUDE.md): un barrido global es * precisamente la forma de romperlos en silencio. Se nombran los mecanismos. * * `animation: none` y no `animation-duration: 1ms`: estos revelados no escuchan * `animationend` —el estado final lo fija la clase `.appear` que añade el JS, no el * evento—, así que cortar la animación de raíz es seguro y además evita el parpadeo. */ @media (prefers-reduced-motion: reduce) { /* Texto letra a letra y palabra a palabra del `wgl-text-editor`. */ .wgl-text-editor.text_appear .target, .wgl-text-editor.scroll_text_appear .target, .wgl-text-editor.text_appear .word, .wgl-double-heading .target { opacity: 1 !important; animation: none !important; transform: none !important; } /* Revelado al hacer scroll de Elementor y de los widgets WGL. */ .elementor-invisible, .wgl-portfolio_container.appear-animation .portfolio-item, .wgl-gallery_items.appear-animation .gallery-item, .wgl-products.appear-animation .product, .hotspots__container.appear_animation .hotspots__item, [class*="tlv__items-"] { opacity: 1 !important; animation: none !important; transform: none !important; visibility: visible !important; } /* Transición de página del theme y desplazamiento suave. */ html { scroll-behavior: auto !important; } } /* ══ 04 · CAMPOS DE FORMULARIO A 16px EN MÓVIL ════════════════════════════════ * * Por debajo de 16px, iOS Safari hace ZOOM automático al enfocar un campo de texto y * deja la página descuadrada. Medido en `/contacto/` a 375px el 2026-09-04: los **8 * campos de texto de los tres CF7 iban a 14px**. Es el único trozo de la * recomendación de escala tipográfica que se aplica tal cual — la escala de prosa del * proyecto (CLAUDE.md § Convenciones) no se toca. * * ⚠️ **Va aquí, en una hoja global, y no junto a cada formulario a propósito.** El * `font-size: 14px` está declarado en TRES sitios —`cta-cotiza.css:171`, * `producto.css:555` (los dos para `.pt-cta__form`, definición duplicada, mismo caso * que `.pt-prosa`) y `linea-producto.css:655` para `.pt-lp-cotiza__form`—. Repartir * el remedio en tres archivos es garantizar que un día se desincronicen, y además * dejaría fuera cualquier formulario nuevo. La regla es una restricción del sitio * («ningún campo de texto baja de 16px en móvil»), no del estilo de un formulario. * * De ahí el `!important`: hay que batir `.pt-cta__form input[type="text"]` (0,2,1) sin * depender del orden de encolado entre hojas del mismo theme. * * `[type="submit"]` y las casillas quedan fuera: iOS solo amplía donde se escribe. */ @media (max-width: 767px) { .wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .pt-cta__form input[type="text"], .pt-cta__form input[type="email"], .pt-cta__form input[type="tel"], .pt-cta__form input[type="number"], .pt-cta__form select, .pt-cta__form textarea, .pt-lp-cotiza__form input[type="text"], .pt-lp-cotiza__form input[type="email"], .pt-lp-cotiza__form input[type="tel"], .pt-lp-cotiza__form select, .pt-lp-cotiza__form textarea, .search-form .search-field { font-size: 16px !important; } } /* ══ 05 · TAMAÑO DE LOS OBJETIVOS TÁCTILES ════════════════════════════════════ * * Segunda tanda de la revisión de UI/UX del 2026-09-01. El informe contaba «52 de 82 * áreas táctiles por debajo del mínimo» y medía **51 de 67 a 375 px**; el reparto, que * no daba y es lo que decide cómo se escribe esto, es **22 en el footer, 17 en * contenido y 1 en el header**. * * ── Qué norma se aplica, porque el informe mezcla dos ───────────────────────── * * Los **44×44 pt de Apple y los 48×48 dp de Material son guías de plataforma**, y en * WCAG equivalen al nivel **AAA** (§2.5.5). El requisito **AA** es §2.5.8, **24×24 px**, * y trae tres excepciones explícitas que aquí aplican a mucho de lo que el informe * listaba como fallo: * * · **En línea** — el objetivo está dentro de una frase o su tamaño lo constriñe el * `line-height` del texto que lo rodea. * · **Equivalencia** — hay otro objetivo en la página que hace LO MISMO y sí cumple. * · **Espaciado** — un círculo de 24 px centrado en cada objetivo no interseca otro. * * ── La política, y por qué no es una sola cifra ─────────────────────────────── * * · **44×44 lo que tiene forma de botón** (botones del theme, «Leer más», paginación) * **y el logotipo**, que es el enlace a la portada y hay uno por plantilla: ahí la * altura no cuesta nada porque son controles sueltos con sitio. * · **32 px los enlaces de TEXTO** —las filas de lista, los chips de metadato y los * enlaces sociales—: supera el 24×24 de AA con margen y no infla el diseño. Las 21 filas del mapa del sitio del footer suben de * 20 a 32 px, lo que deja el footer en ~2.380 px a 375 px en vez de 2.128 (+12 %). * **A 44 px serían ~2.632 px (+24 %)** — decisión de José el 2026-09-04, con las dos * cifras medidas delante. * · **Nada que la norma exima**, y son cuatro casos, listados abajo con su motivo. * * ── Los cuatro que NO se tocan ──────────────────────────────────────────────── * * (Un quinto candidato, los `tel:` del footer, sí se toca aunque la norma lo exima: * ver el comentario de `.elementor-element-c1a0001 a`, más abajo. Sale gratis.) * * 1. **Los títulos de tarjeta** (`.single_link`, 245×31 en el portafolio). Cada tarjeta * ya lleva **un enlace de 345×259 sobre la foto al mismo destino** (`.single_link * .portfolio_link`), y el de blog uno de 345×214 (`.media-link.image-overlay`): es * la excepción de equivalencia, literal. Y además ya cumplen AA por sí solos (31 y * 86 px). Los chips de categoría del mismo bloque **sí** se tocan, porque van a * archivos de término DISTINTOS y ninguna equivalencia los cubre. * 2. **Los enlaces en prosa** — los tres «Ver las seis pérgolas retráctiles…» de la * landing de Pérgolas viven dentro de un `

`: excepción en línea. Subirlos * rompería el interlineado del párrafo, que es justo lo que la excepción evita. * 3. **Las migas** (39×15). Son un rastro de texto con separadores, uno solo por * página («Inicio»; el actual no enlaza), y la barra mide 14 px en algunos archivos: * llevarlas a 32 px cambiaría la altura de la cabecera de cada página por un * objetivo. Excepción en línea, y anotado por si alguna vez se rediseña la barra. * 4. **La casilla de consentimiento de los tres CF7** (22×22). ⚠️ **Es un falso * positivo del inventario**: el `