What's in Cabo · QA
/transportation/ — lo que cambió el 21 de agosto
Las tres cosas que pediste: la animación del trayecto desde el aeropuerto antes del listado, la banda de más debajo de la franja oscura, y el aire que le faltaba a la última tarjeta. Todo está ya en vivo en whatsincabo.com/transportation/.
1. El trayecto desde el aeropuerto
La carretera se dibuja sola de SJD hasta Cabo San Lucas y la furgoneta la va abriendo: para en cada destino y frena al llegar (el morro se hunde un poco, como frena un coche de verdad). Va justo antes de «All 10, A–Z».
Los tiempos son los de tus propias preguntas frecuentes: 20–30 min a San José y 45–60 a Cabo San Lucas. El Corredor no lleva número porque la página no publica ninguno — dice «falls between the two», y eso es lo que se rotula. No inventé un dato para rellenar la marca.
PC — las cuatro fases del recorrido
Tablet y móvil — la misma carretera, de pie
Por debajo de 1100 px los cuatro rótulos no caben en horizontal: se leía «Los Cabos Airport (SJD)San José del Cabo», pegados. Ahí la carretera se pone vertical y las paradas pasan a ser renglones.
1 bis. La flota que pasa
La segunda que elegiste. Va de separador entre el listado de empresas y las preguntas, que es el sitio que se propuso para ella. Un shuttle, un sedán y una van cruzan en bucle, y las palmeras del fondo derivan muy despacio.
Es decoración pura: no afirma ningún dato, así que el bloque entero va en aria-hidden y no lleva encabezado. Tampoco se pinta con imágenes — las palmeras son un SVG dentro del propio CSS y los vehículos van en línea: cero peticiones de red.
La profundidad no es un truco de opacidad: cada carril tiene su tamaño, su altura sobre el horizonte y su velocidad. El de más lejos es el más pequeño, el más pálido, el más alto y el más lento — que es justo lo que hace la perspectiva con tres vehículos que en la realidad van igual de rápido.
Dos cosas que solo salieron mirando el render
Las palmeras salían decapitadas: las hojas se dibujan por encima del punto más alto del tronco y se salían del viewBox de su propia baldosa. Ahora la baldosa lleva holgura calculada (la palmera más alta no pasa del 72 % de su alto) y se comprueba en el barrido que ninguna capa se sale del recuadro.
Y el sedán y la van coincidían en la misma x al cargar: se leía como un choque, no como dos carriles. Repartí los retardos para que al entrar en pantalla estén los tres separados.
2. La banda de más debajo de la franja oscura
Eran dos cosas sumadas, no una:
- Los tres bloques de datos estructurados del final los envolvía WordPress en un párrafo con saltos de línea. El código no se ve, pero el párrafo sí ocupaba 44 px.
- Debajo quedaban otros 64 px de relleno del contenedor sobre el gris del tema.
Ahora la franja oscura apoya directamente en el pie: 0 px entre las dos.
3. El aire que le faltaba a la última tarjeta
La rejilla de fichas terminaba exactamente donde empieza la banda de preguntas (las dos en el píxel 3484), por eso TransCabo parecía pegada al borde de la textura. Ahora hay 72 px en PC y 44 en móvil.
Barrido de anchos
Quince anchos, de 1920 a 320. Se mide el rectángulo real del texto, no el de su caja, para que un solapamiento de cajas vacías no cuente como choque.
| Ancho | Disposición | Choques de texto | Desborde horizontal | Errores JS |
|---|---|---|---|---|
| 1920 · 1600 · 1440 · 1280 · 1180 · 1101 | horizontal | 0 | 0 | 0 |
| 1100 · 1024 · 834 · 768 · 600 | vertical | 0 | 0 | 0 |
| 414 · 390 · 360 · 320 | vertical | 0 | 0 | 0 |
Candados
| Qué | Cómo queda |
|---|---|
| Sin JavaScript | El bloque nace en su estado final: carretera dibujada y furgoneta aparcada en Cabo San Lucas. Se ve el esquema completo, no una carretera a medias. |
prefers-reduced-motion | Mismo estado estático, sin movimiento. |
| Rótulos | Texto real y siempre visible. Nada de texto a opacity:0, que ni se lee ni se cita. |
| Arranque | Solo al entrar en pantalla, y una sola vez por carga: reiniciarla al subir se lee como un fallo. |
| Rendimiento | Solo se anima transform, opacity y el trazo del SVG. Nada que provoque recálculo de maquetación. |
| SEO | Sigue habiendo un solo H1, index,follow y canónica propia. El SVG es decorativo y va aria-hidden. |
4. El muro de Instagram
Las diez direcciones que pasaste, calcado de /tours-activities/. Va justo encima de las preguntas.
Calcado quiere decir medido, no parecido. La primera versión lo metí dentro de la caja de contenido de 1256 px y sobre el crema de la página, y por eso se veía como un recuadro pegado en medio en vez de una franja. Ahora todas las medidas salen de la página viva de tours:
| Tours (referencia) | Transporte (ahora) | |
|---|---|---|
| Ancho de la sección a 1440 | 1440 px, empieza en 0 | 1440 px, empieza en 0 |
| Fondo | rgb(255, 253, 250) | rgb(255, 253, 250) |
| Aire arriba | 100 px | 100 px |
| Retícula | 12 columnas, gap 8, filas de 201,594 px | 12 columnas, gap 8, filas de 201,594 px |
| Primer azulejo | 233 × 411, pegado al borde (x = 0) | 233 × 411, pegado al borde (x = 0) |
| Esquina del azulejo | recta, 0 de radio | recta, 0 de radio |
| Título | 30 px, WIC Sans 600, letter-spacing 2,4 px; solo el us in en serif cursiva | idéntico |
| Glifo de Instagram | 34 px, a 12 px de la esquina | 34 px, a 12 px de la esquina |
| Móvil (390) | 2 × 5, 12 px de aire lateral, filas de 187,188 px | 2 × 5, 12 px de aire lateral, filas de 187,188 px |
El reparto no fue a ojo
Cinco de las diez fotos llevan personas y cinco no. Dos fotos de gente pegadas se leen como un collage de retratos, no como un muro de viaje, así que calculé las dos retículas —PC y móvil— y busqué el reparto que minimiza vecindades. Los huecos 1, 4, 5, 8 y 9 dejan una sola vecindad de lado en toda la página (el 4 con el 5, en PC) y ninguna en móvil. Es el mínimo posible con cinco fotos en esta retícula: las demás combinaciones dan dos o tres. Esa única pareja la cubren las dos fotos más distintas que hay —un grupo al aire libre contra un primer plano dentro del coche—, así que ni siquiera se lee como repetición.
Y el hueco decide la foto, no al revés. Los dos altos miden 0,47 de proporción; la foto más vertical del lote es 0,75, así que aun así pierden un 37 % de ancho. En la primera versión puse ahí la familia con el perro y el recorte se llevó a la tercera persona. Ahora en los altos van las dos de sujeto centrado, y cada encuadre lleva su object-position calculado desde dónde está el sujeto y cuánto se lleva el recorte.
| Comprobación | Resultado |
|---|---|
| 13 anchos, de 1920 a 320 | a sangre en todos, 10 azulejos siempre, borde izquierdo y derecho a 0 en PC y a 12 en móvil, desborde horizontal 0 |
| Fotos de gente pegadas de lado | 1 en PC (el mínimo posible), 0 en móvil |
| Texto alternativo | los 10, descriptivo, guardado en la biblioteca |
| La ventana | role="dialog", aria-modal, nombre accesible, resto de la página inerte (69 de 70 hermanos), cerrojo de tabulador, Escape devuelve el foco al azulejo |
Un solo H1, index,follow, canónica propia | sí |
| Errores de JS | 0 |
Dos cosas que tienes que decidir
Las diez fotos salen de tres cuentas, y las tres son empresas de la lista: @cabo.airport.shuttle (5), @brownsprivateservices (3) y @allwayscabotransportation (2). No son fotos de viajeros. La página dice justo arriba «the order carries no judgement — it is not a ranking», y un muro donde solo aparecen 3 de las 10 empresas sí las destaca sobre las otras siete. Si eso te vale, se queda como está; si no, dime y lo equilibro o cambio el rótulo para que no prometa fotos de viajeros.
Permiso escrito. Las fotos se republican, no se incrustan — igual que en playas y golf. Sigue pendiente pedirlo a las tres cuentas.
5. El bloque de guías
Sustituye a la vieja sección «Related guides», que era un H2 y una lista con un solo enlace suelto. Dos columnas en PC, una en móvil, y la tarjeta entera enlaza a la guía — una sola parada de tabulador, sin enlaces anidados.
Todo sale de tokens que ya usa el sitio, medidos, no elegidos a ojo: teal #005962 (el de la cabecera) y #0f6e6e (el de los enlaces), crema #f4ece0 con la misma textura de curvas de la banda de preguntas, filete terracota #b4653a, tarjeta blanca con radio 12 —el mismo de .wic-hub-card— y las tipografías WIC Display y WIC Sans. Ni un color, ni una fuente, ni un radio nuevos.
Preparado para crecer
Las guías son una lista en wic_tr_guias(). La primera se pinta como tarjeta destacada y el resto como renglones debajo. Añadir una guía más es una línea: no hay que tocar ni el HTML ni el CSS.
| Comprobación | Resultado |
|---|---|
| 14 anchos, de 1920 a 320 | 2 columnas hasta 901, 1 desde 900; cero choques de texto, cero desborde |
| Las 4 URLs del bloque | 200 las cuatro |
| Enlaces anidados | 0 — la tarjeta entera es un solo enlace |
Un solo H1, index,follow, canónica propia | sí |
| Errores de JS | 0 |
Dos cosas que tienes que saber
La foto que adjuntaste no la puedo sacar del chat. Por ahora la tarjeta usa la imagen que la propia guía ya tiene en /guides/ — que es la flota de TransCabo, una de las diez empresas listadas. Si dejas tu foto en la carpeta del proyecto, como hiciste con GolfBackground.jpeg, la cambio en una línea.
No hay guía de tours publicada. Las diez que existen son siete de restaurantes, una de aeropuerto, una de golf y una de huracanes. Puse la de restaurantes que pediste y, en el hueco de tours, la de golf — la única de actividad que existe. No inventé ningún artículo. Cuando publiques una de tours entra en una línea.
6. El artwork aprobado, ya montado
Los cinco PNG que enviaste son la fuente de verdad y no se han tocado: solo se escalan y se colocan. Mis dibujos anteriores están fuera del código.
Las cinco se escalan por el mismo factor, así que conservan entre sí exactamente el tamaño relativo con el que fueron dibujadas. La proporción se comprueba en el barrido: en trece anchos, ninguna se deforma.
Tres cosas que hubo que medir en los ficheros
Cada uno tiene un margen transparente distinto. Debajo del dibujo hay 8, 10, 13, 8 y 0 px según el archivo, y el dibujo tampoco está centrado en su lienzo. Sin corregirlo, las cinco apoyarían a alturas distintas aunque sus cajas estuvieran alineadas. Se corrige por fuera, con width y translate por ilustración.
LiteSpeed no las cargaba. Sustituía el src por un gif de 1×1 y no llegaba a intercambiarlo nunca: las cinco se quedaban como cuadrados grises. Ahora llevan la marca que LiteSpeed respeta y el diferido lo hace el navegador, que sí funciona.
Y la carretera bajó. El dibujo del carrito mide 36 px de alto a esta escala, así que con la línea donde estaba se metía dentro de las ilustraciones. La línea baja a 176 y las ilustraciones apoyan en 120: 20 px de aire entre las dos. Además el carrito va por detrás, así que si algo se rozara gana el artwork.
| Comprobación | Resultado |
|---|---|
| Proporción original de las cinco | intacta en trece anchos |
| El carrito toca una ilustración | 0 veces, muestreando todo el bucle en siete anchos |
| El carrito toca un texto | 0 |
| Una ilustración toca un texto | 0 |
| Imágenes sin cargar | 0 |
7. El artículo, con la paleta del mockup
Antetítulo en teal con filete terracota, titular en el teal de la cabecera con la segunda mitad en cursiva, enlaces en el teal de enlace con subrayado, cifras en negrita y filete vertical entre columnas. Antes el antetítulo y los subrayados iban en terracota y el titular en tinta: se leía caliente y plano, sin la jerarquía de color del resto de la página.
Contraste medido sobre su fondo: antetítulo y enlaces 5,56:1, titular 7,42:1. El mínimo son 4,5:1.
8. La franja gris del cierre
Volvía a aparecer porque la regla que la quitaba se perdió al reescribir el bloque de la ruta. Restaurada: la franja oscura vuelve a apoyar en el pie, 0 px entre las dos, y el pie lleva la textura de curvas para que la página termine sobre la misma superficie.
9. Cabecera, paleta y textos (22 de agosto)
La cabecera. Titular nuevo con «& Private Drivers» en dorado, entradilla nueva y las tres pastillas fuera. El H1 ahora se escribe en la propia cabecera y el del contenido se retira, así que sigue habiendo uno y sólo uno. Contraste medido apagando el texto y leyendo los píxeles reales de la foto: blanco 4,09:1, dorado 4,24:1, entradilla 13,35:1 — el mínimo para texto grande es 3:1.
La ruta. Titular en navy con la última frase en terracota, y la línea de cierre en cursiva serif teal en vez de dentro de una caja. Fuera los dos tiempos de trayecto, y las cuatro frases reescritas a la misma medida: en escritorio las cuatro miden exactamente 42 px de alto. Borrar el dato y dejar los párrafos desiguales no era el encargo.
El muro. Corregido un fallo de raíz en mi extracción: el primer clic del visor de Instagram no registraba, así que mi numeración iba corrida una posición en los carruseles — los ficheros que bajé como fotograma 1 y 2 eran idénticos byte a byte. Verificado por huella contra lo que hay servido en la página.
10. Foto de cabecera y muro, corregidos (24 de agosto)
La cabecera lleva la foto que enviaste. Iba en PNG de 2,1 MB — una fotografía en PNG — y la pasé a JPEG: 332 KB, sin diferencia visible, y de ahí WordPress genera todas las variantes. Retiré la línea de crédito: era de la foto anterior, que venía de Wikimedia con licencia que obliga a citar. Dejarla puesta habría atribuido tu foto a quien no es.
Y el sizes no contaba el recorte: en móvil el hueco mide 390×520 y la foto es 16:9, así que para cubrir el alto hay que escalarla hasta 924 de ancho. El navegador pedía la variante de 600 y la estiraba un 54 %. Corregido: factor de escala 1,00 o menos en cinco combinaciones de ancho y densidad.
El muro con los dos azulejos corregidos: el de papel picado y el del grupo junto al autobús.
Una medición mía que estaba mal
Di por fallido el contraste del antetítulo (2,86:1) y reforcé el velo por ello. Nunca falló: estaba midiendo su caja de bloque, que se extiende sobre la mitad derecha clara de la foto donde no hay ni una letra. Midiendo los rectángulos reales de las letras da 6,50 a 12,51:1. Dejé el velo reforzado porque de paso subió el H1 de 4,65 a 7,5:1 y la foto no se apaga — comprobado con las dos versiones lado a lado.
| Contraste sobre la foto (rectángulos reales de las letras) | Peor caso en 10 anchos |
|---|---|
| H1 blanco (mínimo 3:1) | 7,47:1 |
| H1 dorado (mínimo 3:1) | 6,66:1 |
| Entradilla (mínimo 4,5:1) | 14,36:1 |
| Antetítulo (mínimo 4,5:1) | 6,50:1 |
11. Móvil horizontal, «Read more» y menos zoom (24 de agosto)
El trayecto ya no se pone de pie. Cuatro rótulos no caben en 390 px, así que en vez de cambiar la disposición, el escenario conserva su ancho y es un carril el que se arrastra de lado: se ve exactamente lo mismo que en escritorio y el resto se descubre deslizando. Con desplazamiento por teclado, foco visible y ajuste por parada.
Y el ancho del carril está medido, no elegido: con 940 px las anclas quedaban a 288 y el primer rótulo se solapaba 32 px con el segundo. A 1060 la separación es de 328, la misma que en escritorio, donde la medición da cero choques. Comprobado en diez anchos: cero.
El «Read more» va como en las otras páginas: ocho renglones y el botón debajo, en el teal de enlace del sitio. El botón es hermano del bloque recortado, no hijo — dentro lo cortaría el propio recorte y no se vería nunca, que es justo cuando hace falta. Sin «Read less»: plegar un texto que el lector acaba de abrir le mueve la página bajo los pies.
Y la cabecera en PC muestra mucho más de la foto. La imagen es 16:9 y el hueco estaba a 2,38 de proporción, así que se recortaba casi un tercio por arriba y por abajo. Ahora a 1440 el hueco es 1,89 — prácticamente la foto entera. El móvil no se tocó: sus alturas van en otros tramos.
De paso el contraste mejoró solo, porque el texto pasó a caer sobre la parte baja y oscura de la foto en lugar de sobre el rótulo del aeropuerto. Peor caso en nueve anchos: H1 12,07:1, dorado 7,00:1, entradilla 14,59:1, antetítulo 7,70:1.
12. Sin deslizador, botón de verdad y la cabecera medida (24 de agosto)
El trayecto ya no se desliza. Entra entero en la pantalla: se encoge todo y las paradas se quedan sólo con su nombre. La zona y la descripción se van, que es lo que sobra para que quepan las cuatro — esa información sigue completa en el artículo y en las preguntas.
Dos ajustes que salieron midiendo: por debajo de 430 px el primer rótulo se solapaba 34 px con el segundo, así que los cuatro pasan a ir centrados sobre su ancla; y con eso el primero y el último se salían por los lados y el propio escenario los recortaba — se leía «s Cabos airport». Las anclas entran 44 px hacia dentro y ya no se corta nada. Comprobado en diez anchos, de 1100 a 320: cero choques, cero recortes.
El «Read more» es un botón, con recuadro y galón, como el ejemplo.
La cabecera: el número exacto
La foto es 16:9 y la banda es más ancha que alta, así que en una banda de altura fija sólo se puede ver más foto si la banda crece. No hay forma de mostrar más sin agrandar, salvo dejar franjas vacías a los lados. Puse un punto intermedio:
| Altura a 1440 px | Proporción | Foto visible |
|---|---|---|
| 605 (como estaba al principio) | 2,38 | 75 % |
| 677 (ahora) | 2,13 | 84 % |
| 763 (la versión que te pareció grande) | 1,89 | 94 % |
| 810 | 1,78 | 100 % |
Barrido de la flota
| Comprobación | Resultado |
|---|---|
| A sangre en 12 anchos (1920–320) | sí en todos, desborde horizontal 0 |
| Palmeras recortadas por el borde | ninguna, en ningún ancho |
| Peticiones de red nuevas | 0 — palmeras y vehículos van dentro del CSS |
prefers-reduced-motion | los tres quietos y repartidos, verificado a 2,5 s y a 5 s |
| Sin JavaScript | escena parada con los tres repartidos, no amontonados en el borde |
| Errores de JS | 0 |