El home, revisado · 24-sep-2026

En 30 segundosFunciona bien, pero todavía no se ve de lujo

12errores

Además de 9 detalles. Son cosas rotas, encimadas o que no se leen, y la mayoría viene de reglas viejas que se pisan entre sí. Se arreglan en una tanda sin cambiar el diseño.

5 → 2letras

Lo que más nos separa de un sitio de lujo no es el diseño, es disciplina y curaduría: usamos 5 letras, 34 colores de texto y 9 estilos de botón, y los primeros hoteles salen por orden de importación.

33/100 en celular

Es la calificación de velocidad de Google en celular (en PC, 89). La causa principal es el brinco de la página al abrirla, y tiene arreglo.

ErroresLo que hay que arreglar, ya

Cada uno con su foto y cómo se arregla. Los encontraron los revisores, y yo volví a medir los más importantes antes de ponerlos aquí.

AltaCelular y tabletE1

La página brinca al abrirla

Al abrir el home, «Why plan your Cabo trip with us?» aparece justo debajo del video. Uno o dos segundos después se arman la bienvenida del mapa y la franja del buscador, y todo lo de abajo baja unos 850 píxeles de golpe. Google lo mide y le da al home 33 de 100 en velocidad en celular (en PC, 89).

Arreglo: Que esos dos bloques ya vengan armados desde el servidor, como la franja de socios, en lugar de construirse después con un script. No cambia nada de cómo se ven.

AltaPCE2

«Why plan» se queda rota y da un brinco

Si alguien usa el botón de volver arriba y vuelve a bajar, la tarjeta azul «Four reasons…» se queda encima de las razones 02 y 03 y las cuatro columnas se ven chuecas. Lo reprodujimos dos veces de dos. Además, al entrar a la sección con la rueda del ratón, el bloque brinca 85 píxeles.

Arreglo: Que el efecto se reinicie cuando uno sale de la sección hacia arriba, y que mida la página cuando ya terminó de cargarse. Es un ajuste pequeño en el script del efecto.

AltaTodosE3

«All 59 beaches», «View all guides» y «Yacht rentals» casi no se leen

En las tres bandas azul oscuro, estos enlaces salen en azul petróleo sobre azul marino: contraste de 2.2 a 1, cuando el mínimo es 4.5. Solo se ve la flechita. El botón ya estaba en crema, pero una regla que se agregó después con la paleta le pinta el texto de azul.

Arreglo: Texto crema, como su flecha. Es una sola regla.

AltaCelularE4

En el pie de página del celular, los títulos casi desaparecen

EXPLORE, POPULAR PLACES, COMPANY, FOR BUSINESSES y LEGAL salen verde azulado sobre el degradado azul: contraste de 1.5 a 2 contra 1. Solo pasa en el home, porque una regla vieja de agosto le gana al dorado del pie; en las demás páginas se ven bien. El botón «Subscribe» también se lee mal (2.4 contra 1) y queda una rayita vertical suelta junto al boletín.

Arreglo: Títulos dorados como en PC, «Subscribe» dorado con letra azul, y quitar la rayita.

AltaCelularE5

Un emoji 🔥 y dos etiquetas se salen: la página queda más ancha que el teléfono

En «What do you want to do?» dice «🔥 MOST POPULAR DIRECTORY». En el iPhone el fuego se lee a oferta, no a lujo, y la frase no cabe: se encima con la tarjeta de al lado y hace la página 3 píxeles más ancha que la pantalla, así que se mueve de lado. La placa «TRANSPORTATION» también se sale de su foto.

Arreglo: Quitar el emoji y la etiqueta (no dice nada con dato), y placas un poco más chicas en celular.

AltaCelular y tabletE6

En el menú del celular, tocar «Explore» no hace nada

Al abrir el menú y tocar la palabra «Explore» no pasa nada: ni abre la lista ni navega. Solo funciona la flechita de la derecha. La X para cerrar mide 28 por 16 píxeles, difícil de atinarle con el dedo.

Arreglo: Que tocar el texto abra su lista, y una X de tamaño de dedo. La causa es un script del menú de PC que también se activa en el celular.

En iPad vertical, «Why plan» se rompe y la búsqueda queda colgando

AltaiPadE7

En iPad vertical, «Why plan» se rompe y la búsqueda queda colgando

Las cuatro razones van en columnitas de 72 píxeles, con los títulos partidos palabra por palabra, y «Recommendations» se sale de su columna. La pastilla «Search Cabo» de arriba cuelga 22 píxeles sobre el video y, al bajar, se queda flotando. Además, los carruseles muestran una sola tarjeta estirada y el pie de página queda apretado.

Arreglo: En iPad: razones en dos por fila, pastilla de búsqueda dentro de la barra, dos tarjetas por vista en los carruseles y un pie en dos pisos.

MediaPCE8

El botón dorado del Passport pierde su texto al pasar el ratón

«Explore Cabo Passport» se pone naranja sobre naranja al pasar el ratón (contraste 1.2 contra 1). Solo se ve la flecha. Es el botón más importante del home.

Arreglo: Que el texto siga azul marino al pasar el ratón.

MediaTodosE9

La agenda muestra eventos que ya pasaron

En «What's on in Cabo», al final del carrusel aparecen tres eventos de julio de 2026 (Festival of Flavors, Mifel Tennis Open y Bisbee's East Cape), y hoy es 24 de septiembre. El Art Walk sale sin fecha.

Arreglo: Mostrar solo eventos que no han terminado, en orden de fecha, y al Art Walk ponerle «Every Thu».

MediaTodosE10

El buscador parece vacío o sin cargar

Lo segundo que ve quien entra es una tarjeta con «SEARCH BEACHES» y «BEACH TYPE» y nada debajo: no hay texto de ejemplo ni línea de campo. En PC las dos etiquetas no están a la misma altura. En celular solo se ven 3 de las 7 categorías, sin pista de que hay más.

Arreglo: Texto de ejemplo en gris («Try Chileno or snorkel…», «Any type»), una línea fina de campo y la pestaña siguiente asomando para invitar a deslizar.

MediaTodosE11

«LIVE MAP» está encima de otra etiqueta que viene grabada en el video

El video del mapa es una grabación de la pantalla del mapa, con sus propios botones y su buscador. La etiqueta «LIVE MAP» quedó encima de un botón grabado («Golden hour in 3h 22m»), que asoma cortado y nunca cambia. Luce amontonado.

Arreglo: Quitar o mover «LIVE MAP» y, cuando se regrabe el video, grabarlo sin los botones de la pantalla.

MediaCelularE12

El corazón tapa el nombre del hotel en Android chico

En pantallas de 360 píxeles, «Hard Rock Hotel Los Cabos» pasa por debajo del botón de corazón y «Cabos» queda tapado.

Arreglo: Dejar margen a la derecha del nombre.

Detalles más chicos

Lo que se ve	Arreglo
El botón de volver arriba queda encima de «Made with ♥ in Los Cabos.» al final de la página (PC).	Subir el botón al llegar al pie.
«San Jose del Cabo» va sin acento en la tarjeta de región (en el pie y en las guías sí lo lleva), y en celular el nombre queda corrido a la derecha con letras muy separadas.	Poner «San José del Cabo» (solo cambia el nombre visible, no la dirección) y alinearlo.
La banda de cifras dice «8 categories» y el home muestra 6; «1 local team» se ve pobre junto a 250+ y 12,000+. En Android chico las etiquetas se parten con mucho espacio.	Revisar esas dos cifras (dejar tres, todas con dato) y el interlineado.
Textos chiquitos que no se leen al sol: estrellas naranjas de calificación, meses de la agenda (OCT), la insignia MICHELIN, «SEE HOW WE VERIFY» y «CABO PASSPORT».	Un poco más grandes o en azul marino con el acento dorado.
La tarjeta de Golf en celular es un cuadro enorme y algo borroso (una panorámica recortada), y es de Cabo Real, que cierra por renovación el 28 de septiembre.	Formato horizontal como Hotels y otra foto de campo.
El muro de Instagram termina disparejo: las columnas acaban a distinta altura y en celular va más pegado a los bordes que el resto.	Columnas parejas y el mismo margen de toda la página.
Bajo la ola azul de las cifras queda una franja blanca y luego un corte recto contra el arena de «Where are you headed?».	El mismo color arena debajo de la ola.
En la cabecera del celular, el menú y las tres señales (clima, sismo, huracán) son botones de 28 a 34 píxeles, pegados a 4 píxeles entre sí.	Área de toque más grande sin cambiar el dibujo.
En laptops de 1280, seis enlaces del pie se parten en dos renglones. En iPad vertical, «…lives here.» queda pegado a «See how we verify» («here.See»).	Columnas del pie más anchas y un espacio entre la frase y el enlace.

Para verse de 100 mil dólaresLo que más rinde, en orden

Ordenado por cuánto se nota contra cuánto cuesta hacerlo. Casi todo es ajuste del home, sin tocar el video, la paleta ni el boletín del pie, que ya decidiste.

La curaduría: que lo primero de cada carrusel esté elegido a mano

Impacto 5/5Esfuerzo: RápidoL1

La curaduría: que lo primero de cada carrusel esté elegido a mano

Hoy los hoteles salen en el orden en que se importaron: Hilton, Hard Rock (con una foto morada de un concierto), Hampton Inn y Hacienda Encantada. Mientras tanto, ya tenemos publicados Four Seasons Costa Palmas, Chileno Bay, Four Seasons Cabo del Sol y Acre, con fotos de nivel, y nunca salen en la portada. Pasa lo mismo en tours, transporte y eventos: fotos de clientes posando, una premiación con hieleras, una selfie de grupo. Es lo que más distingue a una revista de lujo de un directorio.

Propuesta: Elegir a mano los 4 primeros de cada carrusel y su mejor foto, como ya hicimos con restaurantes y playas. El widget ya lo permite: es un cambio de orden, no de diseño.

Una sola voz: dos letras, pocos tamaños y menos negritas

Impacto 5/5Esfuerzo: MedioL2

Una sola voz: dos letras, pocos tamaños y menos negritas

El home usa 5 tipos de letra (Roboto, Fraunces, Inter, Montserrat y la del sistema), 24 tamaños distintos, y más de la mitad del texto va en negrita. Cada carrusel titula sus tarjetas diferente. Además, de Fraunces solo se carga el grosor 600, así que sus cursivas son de mentira: el navegador inclina la letra normal. Aman usa 3 letras y 8 tamaños, todo en peso normal; Mr & Mrs Smith, 2 letras.

Propuesta: Fraunces para títulos y nombres, Inter para todo lo demás, 8 tamaños y pesos de 400 a 600. Cargar la cursiva verdadera de Fraunces y títulos un poco más finos. Mira el antes y el después en «Así se vería».

Impacto 4/5Esfuerzo: RápidoL3

Menos ruido: fuera las etiquetas de relleno

«REGION» se repite 6 veces, «🔥 Most popular directory» y «Verified directory» afirman cosas sin dato detrás, «NEW» sale en 11 de 12 tours (la regla marca como nuevo todo lo de 45 días), y «View details →» aparece 66 veces aunque toda la tarjeta ya es el enlace. En los sitios de lujo las tarjetas no llevan nada que no informe.

Propuesta: Quitar esas etiquetas. «NEW» solo en estrenos de 2 semanas y máximo uno por carrusel. «View details» solo al pasar el ratón.

Impacto 5/5Esfuerzo: RápidoL4

La foto es la tarjeta: sin caja, borde ni sombra

Contamos 122 elementos con sombra, en 12 estilos distintos, y 16 redondeos de esquina diferentes. Aman tiene cero sombras: foto, y el texto directo sobre el fondo. Nuestras tarjetas de restaurante son caja blanca con borde, sombra, esquina de 13 píxeles y un brinco al pasar el ratón, sobre una sección que también es blanca.

Propuesta: Tarjetas de restaurante sin caja, con la foto de esquina casi recta y el texto debajo. Al pasar el ratón, solo el zoom lento de la foto, igual en todas las tarjetas del home.

Impacto 5/5Esfuerzo: MedioL5

Primera pantalla del celular: más video y un buscador que invite

En el iPhone el video ocupa solo el 35 % de la pantalla y el resto es el buscador vacío. El primer título apenas asoma abajo.

Propuesta: Sin poner nada encima del video (tu regla), hacerlo más alto en celular (cerca del 60 % de la pantalla, con un corte vertical del mismo video) y un buscador con texto de ejemplo. El video móvil tendría que salir del material original en alta.

Impacto 4/5Esfuerzo: MedioL6

Un solo botón y un solo enlace

Hay 9 estilos de botón en PC y 13 en celular, con 3 letras, 4 alturas y 3 colores. Los sitios de referencia usan de 2 a 4.

Propuesta: Un botón principal, uno secundario y un solo estilo de «ver todo», con la misma letra y altura en todo el home.

Impacto 4/5Esfuerzo: MedioL7

Todo alineado a la misma orilla

Las secciones arrancan en 7 orillas izquierdas distintas (116, 156, 180, 196 píxeles…). Al bajar se nota un zigzag, aunque nadie sepa decir por qué.

Propuesta: Que todo, salvo las fotos a sangre, arranque en la misma línea que los títulos de los carruseles.

Impacto 3/5Esfuerzo: RápidoL8

Menos colores de texto

34 colores de texto distintos, entre ellos 9 grises casi iguales y 4 azul marino. Aman usa 4.

Propuesta: Seis colores para todo el texto: azul marino, un gris, verde azulado para etiquetas, dorado, crema y blanco.

Impacto 4/5Esfuerzo: MedioL9

Un celular más corto, sin quitar secciones

El home mide 20.6 pantallas de iPhone. Siete bloques pasan de una pantalla, y cada carrusel gasta una fila en flechas que en el celular nadie usa, porque se desliza con el dedo.

Propuesta: Recortar aire, no contenido: razones más juntas, Golf horizontal, regiones más compactas y flechas fuera en pantallas táctiles. Son unos 1,450 píxeles menos, casi dos pantallas.

Fotos con la misma luz, y menos pero más grandes

Impacto 5/5Esfuerzo: LargoL10

Fotos con la misma luz, y menos pero más grandes

Medimos el colorido de cada foto: el nuestro es casi el doble que el de Aman y va de muy apagado a muy saturado. Las fotos de las referencias comparten luz cálida, como una familia. También usan menos fotos pero más grandes, del 30 al 48 % del ancho contra nuestro 19 %.

Propuesta: Un mismo ajuste de color para las fotos de la portada (siempre propias o con permiso) y, en Guías, una historia grande con tres titulares al lado, como una portada de revista.

Impacto 4/5Esfuerzo: MedioL11

Velocidad en celular: de 33 a más de 70

Además del brinco al abrir (primer error), el video del héroe en celular pesa 7 MB y se vuelve a bajar en cada visita, porque en su almacenamiento (R2) no tiene instrucción de guardarse en el teléfono. La carga también espera a 15 hojas de estilo, y las fotos de transporte pesan de 300 a 470 KB cada una.

Propuesta: Arreglar el brinco, configurar la caché del video (y un video móvil más ligero), juntar hojas de estilo y comprimir esas fotos. Después, volver a medir con Google.

Más mejoras

Mejora	En qué consiste
Pulir el efecto de «Why plan»	Al 7–20 % del recorrido los textos se enciman con la tarjeta semitransparente, y del 46 al 100 % hay un tramo en que la página parece atorada. Se conserva el efecto aprobado: los textos se desvanecen mientras se juntan y el tramo muerto se acorta a la mitad.
Passport sin rectángulo beige	La imagen de los teléfonos trae su propio fondo beige y se ve como un recuadro pegado dentro de la tarjeta blanca. Exportarla con fondo transparente.
Un mismo gesto al pasar el ratón	Hoy cada tipo de tarjeta reacciona distinto (sube, sombra, zoom o nada). Uno solo para todas.
Barra de acción fija en celular	Al bajar no queda ningún botón a la mano. Una barra delgada abajo con «Search Cabo» y «Get Cabo Passport» que aparezca después del video.
Menú del celular con la marca	Hoy es un panel blanco genérico con 4 renglones y 70 % vacío. Vestirlo en azul marino o crema, con logo, búsqueda y botón del Passport.
Nitidez en tu Mac	4 de las 5 ventanas del Arco, la foto de Tours y el video del mapa se ven algo blandos en pantalla Retina: subirlos al doble de tamaño.
Títulos parejos	En celular varios títulos dejan una palabra sola en el segundo renglón («Tonight's table is / waiting»). Repartirlos en renglones parejos.
Tours con frase	Las tarjetas de tours tienen un hueco de 40 a 54 píxeles porque no tienen frase corta; ponerles una como a los hoteles.

Propuesta

Sitios de lujo, medidos igualQué hacen ellos que nosotros no

Medimos las portadas de Aman, Condé Nast Traveler y Mr & Mrs Smith con el mismo método que la nuestra, en tu Mac y en un iPhone. La diferencia no es de espacio ni de falta de fotos buenas: es disciplina.

Sitio	Letras	Tamaños	Colores de texto	Botones	Sombras	Texto en negrita	Largo (pantallas PC / celular)
aman.com	3	8	4	2	0	0 %	6.2 / 9.8
cntraveler.com	6	12	11	3	0	1 %	17.8 / 23.4
mrandmrssmith.com	2	12	6	4	1	3 %	3.4 / 5.4
whatsincabo.com (hoy)	5	24	34	9	122	55 %	15.7 / 20.6

Condé Nast es una revista con publicidad: es largo por los anuncios. Patrones sí, propiedad intelectual no: no copiamos textos, fotos ni código de nadie.

Tarjetas sin ruido: nada encima de la foto y un solo enlace

Adornos racionados: la ceja con raya dorada va en 16 de nuestras secciones; ellos casi no usan adornos

La selección es el producto: menos carruseles con flechas y portadas más cortas

VIFAC en el homeQue se note que colaboramos, sin que ocupe media página

Probé cuatro formatos encima del home real, en tu pantalla de 1512 y en un iPhone. Todos usan los colores de What's in Cabo, con un solo toque del rosa de VIFAC, y su logo oficial a color. Esto se simuló solo en mi navegador de pruebas: el sitio no se tocó.

Cuándo sale al aire: el mismo día que publiquemos la página de VIFAC. Antes no se puede, porque el botón llevaría a una página que todavía es borrador. Para publicarla faltan tus decisiones de la página (la dirección /give-back/vifac-los-cabos/, tu texto y el compromiso de What's in Cabo) y que Karol confirme el banco y el SWIFT.

A · La cinta, justo debajo de las cifras

Una franja fina después de «250+ venues visited». Es lo tercero que ve quien entra, así que casi todos la ven. Dice que apoyamos a VIFAC y lleva a su página con «How you can help».

Mi recomendación

PC (1512 px)

Celular (390 px)

Alto que agrega: 202 px en PC · 312 px en celularSe ve: en la 3.ª pantalla

B · La tarjeta con foto, entre los eventos y el Passport

Lleva la foto de la manita del bebé (sin caras), la cifra real de Karol («About $5,500 MXN covers one mom's month») y un botón dorado de «Sponsor a mom». Es la que más empuja a donar, pero ocupa más y queda a media página.

PC (1512 px)

Celular (390 px)

Alto que agrega: 478 px en PC · 698 px en celularSe ve: hacia la pantalla 13 de 16 (PC)

C · «Our cause» junto a los socios

Va dentro de «In good company», debajo de los logos. Es natural (socios y causa juntos), pero está casi al final de la página, donde llega menos gente.

PC (1512 px)

Celular (390 px)

Alto que agrega: 303 px en PC · 329 px en celularSe ve: al final

D · Una firma en el pie de página (en todo el sitio)

Una línea discreta en el pie: «♥ What's in Cabo proudly supports VIFAC Los Cabos». Sale en todas las páginas, no solo en el home. Casi no ocupa lugar, pero es más fácil que pase desapercibida.

Complemento de A

PC (1512 px)

Celular (390 px)

Alto que agrega: 51 px en PC · 78 px en celularSe ve: en todas las páginas

Mi recomendación es A + D. A se ve pronto y ocupa poco. D recuerda la alianza en todo el sitio. Si quieres empujar más las donaciones, B se puede sumar más adelante, cuando VIFAC confirme el banco y el SWIFT para donar desde fuera de México. Todo se monta como widget de Elementor, igual que la franja de socios.

Textos en inglés como el resto del sitio. Datos con fuente: servicios gratuitos y confidenciales (Facebook de VIFAC Los Cabos) y costo aproximado de $5,500 MXN al mes por mamá (Karol, 24-sep-2026). El logo es marca registrada de VIFAC: Karol tiene pendiente darnos el visto bueno de cómo se ve.

Lo que decides túContesta con números, como siempre

¿Arreglo ya los 12 errores y los detalles? No cambian el diseño: son colores, orden, textos y scripts que se pisan. Los hago en el home real y te mando fotos de antes y después, en PC y celular.
Letra única: ¿Fraunces para títulos e Inter para todo lo demás, con títulos un poco más finos, como en «Así se vería»?
Curaduría de hoteles: ¿los primeros cuatro serían Four Seasons Costa Palmas, Chileno Bay, Four Seasons Cabo del Sol y Acre? Después hago lo mismo con tours, transporte y eventos, y te enseño las fotos elegidas antes de cambiarlas.
¿Quito las etiquetas de relleno? «REGION», el emoji 🔥, «NEW» en todos los tours y «View details» en cada tarjeta.
¿Tarjetas de restaurante sin caja, como en la maqueta?
¿Primera pantalla del celular con el video más alto? Necesita un corte vertical del video, sacado del material original.
VIFAC en el home: ¿A + D (la cinta y la firma del pie)? Sale el día que publiquemos su página.
Golf en «What do you want to do?» usa una foto de Cabo Real, que cierra el 28 de septiembre. ¿La cambio por otra de nuestros campos?
Ya estaban pendientes: la foto de banco de imágenes de Cabo Baja Limousines (hay una candidata real esperando tu OK) y las caras de clientes en DanysCabo.

Cómo se revisóPara que se pueda repetir

Capturas: home real, 8 tamaños (PC 1920, 1512 y 1280; iPad 1024 y 768; iPhone 430 y 390; Android 360), una por pantalla de arriba abajo, más recortes de cada hallazgo. Sin contar las visitas en Analytics.
Mediciones automáticas: tipos y tamaños de letra, colores, contraste real contra el fondo, botones, sombras, nitidez de cada foto, desbordes, tamaño de lo que se toca, textos encimados, brincos al cargar (CLS) y peso de la página.
Google PageSpeed (24-sep-2026, 21:57 UTC): celular 33 en velocidad, 95 en accesibilidad y 100 en buenas prácticas y SEO. PC: 89, 97, 100 y 100.
Tres revisores independientes: uno en PC, otro en celular y tablet, y otro que midió tres sitios de lujo con el mismo método. Los hallazgos más importantes los volví a medir yo: los colores de los enlaces y del pie, el brinco al cargar y el emoji.
Maquetas: se aplicaron solo en el navegador de pruebas, encima del home real. En el sitio no se cambió nada.

What's in Cabo · informe interno (no indexado) · 24 de septiembre de 2026