Antes y despuésLa franja de socios, en tres pantallas
Izquierda: antes. Derecha: ahora. Todo lo de arriba (título, subtítulo y los 13 logos) quedó idéntico; solo se agregó el bloque de abajo.
PC · 1512 px (tu Mac)
Antes
Ahora
iPad vertical · 768 px
Antes
Ahora
iPhone · 390 px
Antes
Ahora
Cómo está hechoMismos colores, un solo toque de VIFAC
- La ceja «OUR CAUSE» es idéntica a «Our Partners»: la misma letra verde azulado y la misma rayita dorada.
- Tarjeta blanca con borde fino y sombra suave, como las demás tarjetas del sitio. El único color de VIFAC es el filo dorado y rosa de arriba.
- Foto de las manitas (la portada de su página, sin caras), con el color un poco bajado para que no grite junto a los logos en gris. Pesa de 11 a 41 KB según la pantalla.
- El logo oficial de VIFAC, la frase «Beyond business, we stand with VIFAC Los Cabos» en la letra de los títulos (Fraunces) y una línea de qué hacen.
- Toda la tarjeta es el enlace a whatsincabo.com/vifac-los-cabos/. Es el primer enlace del sitio hacia esa página, y eso le ayuda en Google.
- En celular la foto va arriba y el texto centrado. En PC, foto a la izquierda y texto a la derecha.
VerificaciónTres revisores, por separado
Un revisor en PC y tablet (10 tamaños), otro en celulares (8 pruebas, iPhone y Android) y un adversario que intentó romperlo (sin JavaScript, red lenta, zoom al 200 %, teclado, anchos extremos). Los dos primeros lo aprobaron con detalles; el adversario no encontró nada grave y confirmó que el resto del home quedó intacto: los datos del home cambiaron solo en ese bloque, y los 46 archivos de estilos y 41 de scripts responden bien. Estos son los detalles que encontraron, todos corregidos y vueltos a medir en vivo:
| Lo que encontraron | Cómo quedó |
|---|---|
| Cuadro gris en lugar del logo de VIFAC mientras carga (y para siempre sin JavaScript) | LiteSpeed ya no toca esas dos imágenes: el logo y la foto salen desde el primer momento. |
| En celular, la foto cortaba las yemas del bebé y dejaba al centro una uña adulta | Nuevo encuadre: la manita completa. |
| El contorno de foco se veía poco (2 a 1) y salía también al hacer clic con el ratón | Ahora solo sale con el teclado, en azul petróleo (6.3 a 1). |
| La tarjeta temblaba si el puntero quedaba justo en su borde | Ya no se eleva: al pasar el ratón solo crece la sombra, la foto hace un zoom leve y la flecha se mueve. |
| «VIFAC Los Cabos» salía en una cursiva falsa (inclinada por el navegador) | Letra recta: se ve limpia y sin el hueco raro. |
| En celulares de 320 px el título quedaba en 3 renglones y el párrafo con una palabra sola al final | Título en 2 renglones y párrafo repartido parejo. |
| HTML: atributo repetido, «aside» dentro de la región de socios | Corregido; el bloque es un grupo con su nombre para lectores de pantalla. |
Medidas finales: cero saltos de diseño por el bloque, nada se sale de la pantalla (de 320 a 2560 px), contraste de textos entre 5.2 y 14 a 1, y un toque en cualquier parte de la tarjeta abre la página de VIFAC (probado 16 de 16 en celulares y en 7 tamaños de PC y iPad).
Cómo se quitaUn minuto
Los datos del home se respaldaron antes del cambio (~/backups/exec/elementor-357.2026-09-25-pre-causa.json). El bloque vive en el widget de la franja de socios, y sus estilos en un módulo propio (wic-home-causa.php) que solo carga en el home.
Home (página 357), widget Elementor wicptn03. Estilos: mu-plugin wic-home-causa.php 1.0.0. Imágenes AVIF y WebP con versión en la URL. Capturas con Chromium, bloqueando Google Analytics.