La síntesis del crítico — su sistema de diseño real
SISTEMA DE DISEÑO REAL (patrones en 4-5 de 5 páginas):
1. Hero full-bleed solo-media (video/slideshow ~720-900px) SIN H1 encima + scroll-cue circular; breadcrumb+Share+H1 siempre DEBAJO del fold. Es decisión de sistema, no descuido puntual: se repite en las 5.
2. Chrome de DMO persistente: header doble nivel (utility nav nicho + nav por intención) con clima en vivo 91.6° e idioma, y rail derecho fijo FAVES(contador)+VIEW GUIDES naranja. El loop guardar→guía es SU única conversión site-wide.
3. Plantilla única de sección "rail + slider peek": columna izq (eyebrow con línea teal + H2 serif + párrafo ~50 palabras + CTA navy uppercase 13px ls 2.6) + carrusel Glide/Simpleview. Instanciada 5x en things-to-do, 3x en events, 4-across en visit/stay/restaurants: todo el sitio es UN componente parametrizado.
4. Lenguaje visual fijo: Romelio serif 400 display + proxima-nova UI uppercase; paleta petrol #005F7F funcional / navy #242F44 CTA / naranja #F1A240 único acento cálido / aqua #BEEAF8; card foto + placa blanca solapada + pin naranja + Quick View, sin precio ni rating.
5. Motion cero y deuda compartida: jQuery/Simpleview sin GSAP/Lenis, iframes ad-tech, primer <p> "browser not supported", truncados a media palabra — la calidad percibida vive 100% en la fotografía.
OPORTUNIDADES QUE SOLO SE VEN EN CONJUNTO:
1. Asimetría de facetas: solo Stay y Restaurants tienen filtros con conteos; Things-to-do (0 selects, 6000px) y Events (sin calendario ni fecha) — sus 2 páginas de mayor intención — son revista pura. WIC gana siendo directorio útil exactamente donde VLC no lo es: things-to-do filtrable por zona/precio y un "this weekend in Cabo" con fechas reales es un vacío que el DMO oficial no puede responder hoy.
2. Como todo VLC es una plantilla repetida, WIC no debe portar 4 widgets distintos sino UN widget Elementor WIC "section-rail" parametrizable (vertical, guía, colección curada) que cubra home + /guides/ — mismo costo de build, cinco usos, y cumple la regla home=solo widgets.
3. VLC valida el loop Faves→Guides en 5 páginas pero nunca lo monetiza (0 faves, featured pay-to-play devaluado). WIC tiene el cierre que a VLC le falta: bookmarks MyListing → tray "My Cabo list" → Cabo Passport como CTA de valor. Es adoptar el patrón probado con el eslabón de negocio que el original no tiene.
RE-VERIFICAR:
1. Faltan páginas: el encargo dice 7 y el JSON trae 5, con events truncado (sin cierre de debilidades ni paraWIC). Reclamar las 2 restantes antes de cerrar la disección.
2. Los overlays "auto-abiertos" (chat 28% en things-to-do, panel vacío 30% en places-to-visit) huelen a artefacto de headless (widget que hidrata mal sin interacción real); re-checar con Playwright con puntero real antes de citarlos como debilidad.
3. places-to-visit (3,385px, 7 destinos) es anómalamente corta vs 6-9k de las demás: posible captura antes de hidratar lazy content — re-crawlear con waits; ídem el "shift ~2000px" de events.
4. Contradicción entre páginas: restaurants dice que el p 22px/700 es el aviso de navegador, places-to-visit lo reporta como body real. Uno de los dos midió mal; resolver antes de fijar la ficha tipográfica.
/things-to-do/ 6,196px
Estructura
0–80: header 2 niveles (utility row con clima en vivo 91.6° + idioma; nav principal) + rail fijo derecho MENU/FAVES(0)/VIEW GUIDES 80–800: hero full-bleed video mp4 loop muted (~720px) con flecha scroll-down anclada 800–1160: breadcrumb Home/Experiences + Share; H1 serif centrado + intro editorial con ~8 links inline a sub-verticales (jet skiing, whale-watching, golf...) 1162–3450: 5 "category rails" repetidos (~375px c/u): Tours & Water Activities / Beautiful Beaches / Outdoor Adventures / Art Galleries & Culture / Spa & Wellness — cada uno: columna izq (eyebrow con línea teal + H2 serif + párrafo ~50 palabras + CTA navy uppercase "Explore more X") + slider Glide.js con peek a la derecha (perView 2, peek 245px, flechas laterales) 3532–3920: grid 4-across de tiles simples imagen+título: Golf, Nightlife & Clubs, Shopping, Things To Do With Kids ~3950–4440: módulo 360° interactivo (iframe skynav "Click and drag to look around" + botón "Ask" IA) 4440–5300: muro UGC Instagram "Tag #VisitLosCabos" (masonry 2 filas, iconos IG por tile) 5300–5520: banda dúo CTA con fondos pastel estampados: Media & PR Inquiries (teal claro) + E-Newsletter Signup (durazno) 5520–6196: footer navy fotográfico (Arco de fondo), logo gigante, dirección del Tourism Board, links legales
🧩 Patrones
- Category rail repetible: header en columna izquierda (eyebrow corto con guion/línea teal + H2 serif + descripción ~50 palabras + botón navy uppercase 13px ls 2.6px) y a la derecha slider con PEEK (Glide.js, perView 2, peek 245px: media card siguiente visible invita al swipe sin paginación) — 5 instancias idénticas, una por sub-vertical
- Card de venue estilo DMO: imagen 4:3, caja blanca superpuesta al borde inferior-izquierdo con el nombre en uppercase tracking amplio, y debajo la dirección precedida por un pipe/pin naranja; SIN rating ni precio — directorio editorial puro
- Jerarquía de verticales en dos niveles: los 5 fuertes reciben slider+copy; los secundarios (Golf, Nightlife, Shopping, Kids) se compactan en un grid 4-across de tiles imagen+título — no todo recibe el mismo peso
- Intro editorial bajo el H1 con enlaces internos inline a cada sub-página de actividad (jet skiing, sport fishing, scuba, whale-watching, golf, clubs...) — interlinking SEO denso disfrazado de párrafo de bienvenida
- Rail utilitario fijo top-right en todo el scroll: MENU (hamburguesa+lupa), contador FAVES (trip-builder de favoritos) y VIEW GUIDES con fondo naranja — planificación de viaje siempre a un click
- Hero full-bleed de solo media (video loop muted, sin titular encima); el H1 y el breadcrumb viven DEBAJO del hero, con botón circular de flecha como ancla de scroll
- Header con clima en tiempo real (91.6°) y selector de idioma — señal de 'sitio oficial del destino'
- Cierre en 3 actos: muro UGC con hashtag (#VisitLosCabos) → banda dúo de conversión (PR / Newsletter) con fondos pastel estampados → footer navy fotográfico con logo enorme
- Chatbot IA (Satisfi) con quick-replies por categoría (Shopping/Tours/Beaches...) y tarjeta con foto — concierge conversacional en vez de filtros
- Cero filtros/facetas en la página: 0 selects, sin buscador de actividades; toda la exploración es scroll + sliders (modelo revista, no modelo directorio)
⚠️ Debilidades
- El chat Satisfi se AUTO-ABRE y tapa ~28% del viewport (columna derecha completa) sobre cards y contenido en desktop; encima tiene typo en sus quick-replies ('Outdoor Advetures')
- Semántica de headings sucia: el eyebrow vive DENTRO del mismo h2 con whitespace masivo ('Where to go! \n\t\t...Beautiful Beaches') — malo para lectores de pantalla y para parsing de crawlers
- Cards truncan títulos y direcciones sin gracia ('Ginocchio Gale...', 'Next To Come A Cas...'); la caja blanca del título invade la card vecina en algunos anchos
- Stack pesado y legacy: jQuery + 4-6 iframes de ad-tech (DoubleClick, adsrvr) + video firmado servido a 1920px dentro de contenedor 1440 — lastre de LCP evidente
- Para ser LA página de 'things to do' no hay ni un filtro ni buscador de actividades (0 selects); usuarios con intención concreta dependen de 6000px de scroll
- Sin motion de entrada ni micro-interacciones: con esa fotografía, la página se siente plana comparada con su ambición visual
✅ Para What's In Cabo
- Portar el 'category rail' como widget Elementor 'WIC Category Rail' para el home: columna izq con eyebrow+línea teal #007481, H2 serif, descripción ≤50 palabras y CTA navy #062c53 uppercase; a la derecha slider con peek (media card visible) alimentado por listings del vertical (restaurants/tours/beaches). El peek invita al swipe sin paginación y respeta la regla 'home = solo widgets WIC'
- Aplicar el patrón de intro editorial con links inline al hub /guides/ (POST 4919) y a las guías best-of: párrafo de apertura con 6-8 enlaces contextuales a spokes/verticales dentro del texto — es el interlinking de la Fase 3 del plan SEO hecho patrón visual, manteniendo la regla de refuerzo de listado (venues como ejemplos, nunca coronados)
- Adoptar la jerarquía de dos niveles en el home: sliders con copy solo para los verticales con inventario real (restaurants 76, tours 5) y un grid 4-across de tiles simples imagen+título para los vacíos (golf/yachts/transportation/events) como widget 'WIC Vertical Tiles' — evita prometer profundidad que no existe todavía
- Versión WIC del rail utilitario fijo: un solo botón/rail lateral persistente 'Cabo Passport' + 'Guides' (widget Elementor) en lugar de las 3+ bandas de links del home actual — misma disponibilidad permanente del CTA con mucho menos ruido; NO copiar el chat auto-abierto (es la peor debilidad de VLC)
/places-to-visit/ 3,385px
Estructura
0-80: header 2 niveles — utility nav (360 Tour, Golf, Meetings, Travel Industry, Stories) + idioma + widget de clima en vivo (91.6°); nav principal por intención (Places to Visit, Experiences, Gastronomy, Stay, Plan, Events) + hamburguesa/búsqueda; rail fijo derecho con contador Faves (corazón) y botón naranja "View Guides". 80-800: hero video full-bleed ~720px (autoplay muted, sin titular encima), botón circular scroll-cue al pie y CTA flotante teal "Have a Question?". 800-884: fila breadcrumb (Home / Places to Visit) + botón Share alineado a la derecha. 884-1382: intro editorial centrada ~498px — H1 serif 50px + subtítulo sans 34px (el H1 queda cortado justo al borde del primer viewport 900px). 1424-1864: slider 4-across ~440px con 7 cards de destinos/zonas (foto arriba, título bold, excerpt de 3 líneas truncado, flechas laterales; clones en DOM para el loop → H2 duplicados). 1918-2700: sección "thematic-map quickview" ~782px — mapa ilustrado custom (no Google Maps) de Baja Sur con pins etiquetados por región + iconografía (peces, cactus, olas) + panel lateral de texto con CTA; los pins abren quickview. 2780-3385: footer ~605px (Media & PR, enlaces institucionales).
🧩 Patrones
- Header de dos niveles: utility nav para audiencias nicho (golf, meetings, trade) separada de la nav principal organizada por intención de viaje (Places/Experiences/Gastronomy/Stay/Plan/Events), no por tipo de contenido
- Widget de clima en vivo en el header — señal de destino barata y de alta confianza para un sitio de viajes
- Rail fijo derecho con sistema de favoritos (corazón + contador) y CTA persistente 'View Guides' en color acento — engagement de planeación de viaje siempre visible
- Hero de video full-bleed autoplay con scroll-cue circular al pie, seguido de fila breadcrumb + Share antes del H1
- Intro editorial centrada: H1 serif display 50px + subtítulo sans 34px como transición del hero al contenido
- Slider 4-across de cards de zona/destino: foto, título bold, excerpt de 3 líneas, flechas laterales — cada card enlaza a su página pillar de zona
- Mapa temático ILUSTRADO (SVG/imagen custom con paleta propia: tierra arena, mar menta, pins naranja) en vez de embed de Google Maps, con panel lateral de texto + CTA y quickview al hacer clic en pin
- CTA de chat persistente 'Have a Question?' en esquina inferior derecha
- Cards con jerarquía consistente imagen→título→excerpt y todo el card clickeable
⚠️ Debilidades
- Panel blanco de quickview/chat se renderiza ABIERTO y VACÍO cubriendo ~30% del viewport sin interacción alguna (observado en headless 1440×900 al 45% de scroll) — overlay roto que tapa slider y mapa
- H1 invisible en el primer viewport: el hero de video no lleva titular encima y el H1 queda cortado justo en el borde de 900px — LCP sin mensaje
- Excerpts de cards truncados a media palabra con '…' ('del…', 'not…') — se ve descuidado
- H2 duplicados en el DOM por los clones del slider (7 destinos → 14 H2), ruido semántico y de accesibilidad
- Primer <p> del DOM es un mensaje 'Your browser is not supported for this experience' (fallback del 360/video) — mala señal para parsers y lectores
- Página muy corta y delgada para ser el pillar 'Places to Visit' (3,385px, solo 7 destinos, sin filtros ni buscador)
- Stack jQuery/CMS legado sin motion moderno; el rail de Faves llega a solaparse sobre las cards al scrollear
✅ Para What's In Cabo
- Portar el slider 4-across de zonas como widget Elementor 'WIC Zones Slider' para el home (regla: home = solo widgets WIC): cards CSL / SJD / Corridor / East Cape / Todos Santos con foto + título + descripción ≤120 car (regla card ya vigente) enlazando a /guides/{zona}/ — es exactamente el hub visual de zonas que el plan de verticales necesita y VLC valida el patrón
- Construir un mapa ilustrado propio (SVG estático, tierra crema / mar teal #007481 / pins navy #062c53) para la guía pillar de things-to-do en /guides/: pins por zona que abren un quickview-card apuntando a fichas MyListing con las coordenadas reales ya capturadas (p.ej. outlets Grand Velas); NO embed de Google Maps — el mapa ilustrado es marca, no utilidad
- Reemplazar los 3 links sueltos de Cabo Passport del home por UN CTA persistente estilo 'View Guides' de VLC: badge sticky en el header/rail derecho con el acento cálido de la paleta WIC, un solo destino (la landing /cabo-passport cuando exista) — mismo patrón de conversión siempre visible sin ensuciar secciones
- Adoptar en las plantillas de /guides/ la fila breadcrumb + botón Share inmediatamente bajo el hero y el scroll-cue circular; y a diferencia de VLC, mantener el H1 visible sobre el hero de video (nuestro wic-home-hero ya es LCP-safe) — su error confirma nuestra regla
/places-to-stay/ 6,422px
Estructura
0-80: header doble fila (utility nav: 360 Tour/Golf/Meetings/idiomas + clima en vivo "91.6°"; nav principal uppercase) + rail derecho fijo MENU / FAVES(0) / tab amarilla VIEW GUIDES. 0-884: hero slideshow full-bleed (foto aérea, soporta video, 1 <video>), SIN H1 encima; scroll-cue circular con flecha al borde inferior. 884-1347 (~463px): breadcrumb Home/Places To Stay + botón Share; H1 "Places To Stay in Los Cabos" (Romelio 50px) + intro editorial. ~1350-1600: sección "Luxury Hotels of Los Cabos" (H2 Caslon 55px). 1602-2190 (~588px): "Virtuoso Properties" — slider custom 4-across (ccl-v2-widget core-v2-slider, CMS Simpleview). ~2190-4268 (~2080px): DIRECTORIO FILTRABLE = sidebar teal #005F7F (keyword search, Categories con conteos: Hotels & Resorts 108/All Inclusive 42..., Regions con conteos: CSL 59/SJD 30/Scenic 23..., "Show N more" colapsable, botón Clear Filters durazno, cactus ilustrado de fondo) + grid 3 col de cards: foto, ribbon FEATURED (clip-path flecha, azul cielo #BEEAF8), corazón fave, nombre, dirección con pin, link QUICK VIEW (modal). 4268-4950 (~682px): "Special Offers & Packages" — image-boxes CTA. 4950-5817: bloques image-box/related adicionales. 5817-6422 (~605px): footer navy oscuro #1A222D (Media & PR, nav, social).
🧩 Patrones
- Directorio con facetas laterales CON CONTEO por categoría y región (Hotels & Resorts 108, CSL 59, SJD 30...) + 'Show 8 more' colapsable + Clear Filters de un click — el usuario ve el tamaño del inventario antes de filtrar
- Card de listado mínima: foto 16:9, ribbon FEATURED con clip-path en esquina, corazón de guardado (alimenta contador FAVES del header), nombre, dirección con icono pin, y CTA secundario 'QUICK VIEW' (modal in-page que evita abandonar el grid)
- Sistema de favoritos site-wide: corazón en cada card + contador persistente '(0) FAVES' en rail derecho fijo del header — convierte browsing en planeación de viaje
- Header utilitario de DMO: clima en vivo con icono, selector de idioma/mercado (Germany/Japan), y tab lateral fija 'VIEW GUIDES' en amarillo como CTA permanente
- Hero slideshow full-bleed 884px con scroll-cue circular; H1 y breadcrumb+Share van DEBAJO del hero, no encima
- Sliders 4-across para colecciones curadas ('Virtuoso Properties') como capa editorial encima del directorio crudo
- Jerarquía tipográfica serif display (Romelio/Caslon 50-55px) para títulos + Proxima Nova para UI/nav uppercase con letter-spacing
- Motion: esencialmente estático — jQuery + sliders custom, sin GSAP/Lenis/canvas; toda la 'vida' está en hover de cards y carruseles
⚠️ Debilidades
- Dato sucio en el grid: 'FITURCA - Fideicomiso de Turismo de Los Cabos' (el fideicomiso del propio DMO) aparece como card entre hoteles, con foto de yate y sin dirección — QA de inventario flojo
- Ribbon FEATURED en 6+ cards consecutivas (filas enteras) — el badge pierde todo significado jerárquico
- Cards pobres en información de decisión: sin rango de precio, sin rating, sin zona legible — solo direcciones crudas tipo 'Carretera transpeninsular Km. 15' y con formato inconsistente (algunas vacías)
- Hero de 884px sin H1 ni mensaje encima: la orientación (breadcrumb + H1) queda bajo el fold — pantalla completa desperdiciada
- Stack pesado/legacy: jQuery + 3 iframes de tracking DoubleClick; párrafo base 22px/700 bold como default delata CSS poco cuidado
- H2 (55px) mayor que H1 (50px) — jerarquía tipográfica invertida
- No hay paginación visible detectada para 108 hoteles — grid largo y DOM gordo
✅ Para What's In Cabo
- Facetas con CONTEO por región y categoría + 'Show more' colapsable → configurar en la página Explore de MyListing (vertical hotels y también restaurants): mostrar counts visibles (Cabo San Lucas N / San José N / Corridor N) refuerza el inventario completo — alineado con la regla de 'browse the full list' en vez de coronar venues
- Card destacada con ribbon clip-path + corazón de guardado → nuevo widget Elementor WIC de featured listings para el home (regla home=solo widgets): ribbon teal #007481 sobre crema, MÁXIMO 3-4 por vista (el error de VLC es saturarlo), corazón conectado a los bookmarks nativos de MyListing y contador en header
- Botón 'Quick view' en las cards de las guías /guides/ best-of (skill wic-vertical-guide, p.ej. /best-restaurants-in-cabo/): modal con zona, horario, precio y link a la ficha /listing/ sin abandonar la página pilar — retiene sesión en el contenido SEO y VLC demuestra el patrón sin datos; nosotros SÍ tenemos precio/zona por ficha, hagámoslo con datos de decisión
- Header utilitario de viaje → widget WIC: chip de clima actual de Cabo (navy #062c53 con acento teal) + tab lateral persistente hacia el hub /guides/ (POST 4919), replicando la tab 'View Guides' de VLC como puerta de descubrimiento site-wide sin tocar la estructura del home
/restaurants/ 8,960px
Estructura
0–80: header doble sticky (fila utilitaria: 360 Tour/Golf/Meetings + idioma + clima 91.6°F con toggle F/C; fila primaria: Places/Experiences/Gastronomy/Stay/Plan/Events) + tabs laterales fijas "Faves (0)" y "View Guides" 0–900: hero video full-viewport (b-roll gastronómico autoplay) con controles pause/mute abajo-derecha y chip-flecha de scroll; SIN titular sobre el video 884–1999 (~1115px): breadcrumb Home/Gastronomy + Share, H1 serif "Best Restaurants in Los Cabos", copy intro SEO y subsección H2 "Award-Winning Dining" 2051–2733 (682px): callout editorial "Michelin Guide" (image-box asimétrico) 2733–3430 (697px): "Recommended Restaurants" — tiles 3-across (widget callout) 3916–5794 (1878px): DIRECTORIO — sidebar de facetas (Keyword, Categories con conteos: Seafood 96/International 95/Mexican 76…, Regions: CSL 145/SJD 107/Scenic Route 40…, Michelin Rating: Recommended 18/Bib Gourmand 3/Green Star 2/1 Star 1; Show N more, Clear Filters, Show Map) + grid 3 columnas de cards (~27 visibles) 5858–7020 (1162px): slider temático 4-across "Dinner in Los Cabos From Farm-To-Table…" 7223–7842 (619px): side-by-side alternado "Los Cabos Gastronomy Guide" (cross-sell) 7941–8355 (414px): grid de contenido relacionado 8355–8960 (605px): footer (Media & PR, nav, legal)
🧩 Patrones
- Sidebar de facetas con CONTEOS por término (Seafood 96, CSL 145…) colapsadas con 'Show 14 more', más 'Clear Filters' y toggle 'Show Map' — el mapa está oculto por defecto, el grid manda
- Faceta exclusiva 'Michelin Rating' (Recommended 18 / Bib Gourmand 3 / Green Star 2 / 1 Star 1) — convierten una credencial de tercero en filtro navegable
- Doble sistema de badges en card: ribbon aqua 'FEATURED' con muesca sobre la foto (monetización/partners) + línea de texto rojo 'MICHELIN RECOMMENDED' bajo el título (autoridad); pin naranja + dirección; link 'QUICK VIEW' (modal que no pierde el scroll)
- Corazón de guardado en cada card conectado a contador persistente en header ('Faves (0)' + 'View Guides') — trip-planning save-to-list en todo el sitio
- Hero 100vh de solo video con pause/mute accesibles y chip de scroll; el H1 y el breadcrumb viven DEBAJO del fold
- Sandwich editorial antes del directorio: intro SEO → callout Michelin → 3 tiles recomendados → recién entonces el grid filtrable (el directorio empieza al 44% del alto)
- Tipografía dual: serif display propia (Romelio) para H1/H3/H4-eyebrow uppercase + grotesca (proxima-nova) para H2/body/UI
- Widget de clima en vivo en el header (91.6° con forecast) como señal de destino
- Cero motion moderno: sin GSAP/ScrollTrigger/Lenis/Swiper; jQuery + sliders del CMS Simpleview; la página es estática con hovers
⚠️ Debilidades
- <title> truncado y roto: 'Top Restaurants in Los Cabos: From Farm to Beachfron' (cortado a media palabra)
- Hero desperdicia todo el above-the-fold: 900px de video abstracto (close-up borroso) sin titular ni CTA; el H1 aparece hasta y≈884
- El directorio filtrable — el core de la página — empieza en y≈3916 (44% del alto), enterrado bajo 3 secciones editoriales
- Cards con alturas/baselines inconsistentes: cuando falta la línea Michelin (ej. tercera card de la fila) la dirección sube y rompe la alineación del grid
- Ribbon 'FEATURED' en casi todas las cards visibles — si todo es featured, el badge pierde significado (pay-to-play evidente)
- Deuda técnica: jQuery legacy, 2 iframes doubleclick, y un párrafo 'Your browser is not supported' presente en el DOM; skip-link 'Skip to header slideshow' de 30px
- Sin control de orden/sort visible en el listado; el mapa escondido tras un toggle
✅ Para What's In Cabo
- Faceta 'Michelin' con conteos en el Explore de MyListing: crear término/atributo de designación Michelin en las fichas (ya tenemos las designaciones reales de /guides/ Michelin) y exponer facetas con CONTEO por término en el sidebar del Explore de restaurants — VLC demuestra que el filtro Michelin es EL diferenciador local y nosotros ya tenemos el contenido honesto; estilizar en teal #007481 sobre crema vía CSS del child theme, nunca el rojo Michelin fuera de contexto de marca
- Línea-badge de credencial bajo el título de card (patrón 'MICHELIN RECOMMENDED' de VLC): snippet CSS/PHP del child theme para cards de resultados MyListing y para las cards bento de /best-restaurants-in-cabo/ — una línea corta de designación en navy #062c53, con altura reservada SIEMPRE (fix a la debilidad de VLC: sus cards se desalinean cuando falta el badge); respeta la regla de cards ≤120 caracteres
- Invertir el sandwich editorial en el pillar de /guides/ restaurants (skill wic-vertical-guide): tomar la secuencia intro → callout Michelin → grid → banda temática → cross-sell de VLC PERO subir el listado arriba del 25% del alto y cerrar cada bloque con cue abierto 'browse the full list' (regla de refuerzo de listado); VLC entierra su directorio al 44% y eso es exactamente lo que no hay que copiar
- Guardados con contador persistente ('Faves' + 'View Guides') → puente natural a Cabo Passport: activar el bookmark nativo de MyListing en fichas y un tray 'My Cabo list' cuyo CTA de valor sea Passport (perks en tus guardados); en el home SOLO como widget Elementor WIC nuevo si Ivan lo aprueba — es el mismo gancho de trip-planning que VLC usa site-wide, pero con monetización propia en vez de pay-to-play
/events/ 6,448px
Estructura
0-80: header sticky doble (utility bar: 360 Tour/Golf/Meetings + clima 91.6° + idioma; nav principal 6 items) + rail derecho fijo (Faves con contador + tab naranja View Guides + MENU hamburguesa). 80-800 (720px): hero mosaico de eventos destacados (custom-marquee): 1 imagen grande izq (~72%) con placa blanca solapada (H2 evento + excerpt + botón navy READ MORE) + 2 cards apiladas der con badge de fecha JUL/17 y placa de título. ~800-880: breadcrumb Home/Events + botón Share. 884-1224 (340px): banda Newsletter side-by-side (widget verde). ~1230-1560: intro con H1 "Los Cabos Events" + texto. 1563-2245 (682px): spotlight image-box del evento ancla (torneo de tenis) — split imagen/texto. 2245-3577: TRES sliders de categoría consecutivos (~372-389px c/u): Culinary / Hotels & Restaurants / Music — cada uno con rail izq (H2 + descripción + VIEW ALL navy) y carrusel Glide de cards de evento. 3600-5800: trío de columnas de categoría (Sports / Wellness / Arts & Culture) con eyebrow + guion teal, H2 grande y mini-listas de eventos con Read More + Quick View. 5843-6448 (605px): footer navy oscuro (Explore, Media & PR, redes).
🧩 Patrones
- Hero mosaico 1+2 de eventos destacados: imagen grande + 2 secundarias, cada una con badge de fecha apilado (mes chico arriba, dia en numeral gigante) y placa blanca de titulo que solapa el borde inferior-izq de la foto
- Sistema de badge de fecha doble: .date-month/.date-day apilado sobre imagen en cards grandes; mini-date-section inline (Jul 17) en items de lista — jerarquia visual de fecha antes que titulo
- Category preview slider: rail izquierdo fijo (H2 display + parrafo + boton navy VIEW ALL) + carrusel horizontal de cards a la derecha; repetido 3 veces con distinta categoria = plantilla de seccion reutilizable
- Card de evento: imagen 4:3 + badge fecha + placa blanca de titulo (uppercase letterspaced) + meta rows con icono (venue, rango de fechas Jul 17 - Dec 31) + boton Quick View (modal) + link /event/{slug}/{id}/ (patron DMO id-suffix, mismo que sus listings)
- Cards instrumentadas: cada article lleva data-gtm-vars con itemName/itemCategory/itemCity/itemId/acctId → analytics por venue sin tocar el markup visible
- Trio de columnas de categoria como cierre: eyebrow uppercase con guion de color + H2 display + mini-lista con Read More — digest que empuja a paginas hijas en vez de mostrar grid infinito
- Rail derecho persistente de utilidades: Faves (corazon con contador de guardados) + tab naranja View Guides — CTA de conversion siempre visible sin ocupar el nav
- Curaduria editorial en vez de filtros: la pagina de eventos NO tiene date-picker ni filtros de categoria; organiza por sliders tematicos curados + un buscador global
⚠️ Debilidades
- Typo en H2 del sitio en produccion: 'Music & Entertaiment Events' (falta la n) — descuido editorial visible
- Badge de fecha roto conceptualmente: TODOS los eventos muestran la fecha de hoy (Jul 17) porque son recurrentes; el rango real (Jul 17 - Dec 31, 2026) esta escondido en la meta → la jerarquia de fecha no informa nada
- Clones del carrusel visibles en reposo: la misma card (Brunch x Chef Michelle Mathelin) aparece duplicada lado a lado en pantalla — se ve roto
- Layout shift fuerte entre cargas: las mismas secciones midieron offsets con ~2000px de diferencia entre dos visitas (sliders lazy que hidratan tarde) → CLS alto
- Pagina de EVENTOS sin calendario, sin filtro por fecha/categoria y sin paginacion — solo sliders curados y un search global; imposible responder 'que hay este fin de semana'
- Flechas de los sliders renderizan como cajas vacias (dependencia de icon-font fragil) y el primer <p> del DOM es un aviso 'Your browser is not supported'
- Mismo evento repetido entre secciones distintas (aparece en Culinary Y en Hotels & Restaurants) — inventario delgado disfrazado con duplicacion
✅ Para What's In Cabo
- Widget Elementor 'WIC Events Spotlight' para el home (regla: home = solo widgets): mosaico 1 grande + 2 apiladas con badge de fecha apilado (mes/dia gigante) y placa crema de titulo solapando la foto; CTA navy #062c53, iconos meta teal #007481. Es el patron exacto para lanzar el vertical events sin construir aun el archive
- Portar el 'category preview slider' (rail izq con H2 + descripcion + boton VIEW ALL + carrusel de cards) como seccion nueva del skill wic-vertical-guide para /guides/: implementarlo con CSS scroll-snap (no Glide/jQuery, evita sus clones visibles), y cerrar con cue abierto 'browse the full list' — alinea con la regla de refuerzo de listado (venues como ejemplos, no coronados)
- Sistema de badge de fecha para futuras cards de events en MyListing, CORRIGIENDO su debilidad: eventos one-off llevan mes/dia apilado; recurrentes llevan 'Daily/Fri-Sun until {fecha fin}' en el badge en vez de la fecha de hoy — asi el badge siempre informa
- Replicar las cards instrumentadas: data-attributes (item name/categoria/id) en los widgets WIC de cards para medir clicks por venue en GA4 via Site Kit — alimenta directo el dashboard de monitoreo que pide Luis sin tocar el diseno
/golf/ 3,551px
Estructura
0–80px: header blanco delgado — logo izq (sol naranja), utility nav (VISIT LOS CABOS / 360° TOUR / STORIES), chip de clima en vivo "91.6°", segunda fila contextual (GOLF | REQUEST INFO), botón MENU en cuadro navy y tab naranja "VIEW GUIDES" colgando bajo el header. 80–884px: hero full-bleed ~800px con video (2 <video>; poster = aérea de campo junto al océano), SIN texto overlay; scroll-cue circular con flecha abajo al centro. 884–1310px: intro editorial centrada (~426px) — link "Share", H1 serif 50px + párrafo; el titular vive DEBAJO del fold. 1362–1702px: banda side-by-side "Golf Guide" azul (clase slide-left = reveal CSS al entrar), CTA hacia la guía de golf (~340px). ~1702–2100px: sección "Golf Resorts in Los Cabos" — VACÍA en el render (widget/iframe diferido que no pobló; hueco blanco visible al 45% de scroll). ~2100–2946px: social hub #LosCabos — eyebrow uppercase con regla teal, H2 serif, fila de iconos sociales redondos teal (FB/IG/TikTok/X/YT/LinkedIn), grid UGC de Instagram (estilo CrowdRiff) sobre fondo con patrón geométrico tipo talavera azul claro. 2946–3551px: footer blanco 605px — "Media & PR Inquiries", formulario (1 form, newsletter) y nav.
🧩 Patrones
- Hero full-bleed de video sin texto (poster aéreo = LCP) + scroll-cue circular; el H1 y el copy editorial van en una sección centrada inmediatamente después, no encima de la imagen
- Header de DMO con doble fila: utility nav global arriba + nav contextual de la vertical (GOLF | REQUEST INFO) abajo, más chip de clima en vivo (91.6°) como señal de 'destino' y tab persistente naranja VIEW GUIDES colgando del header como CTA permanente
- Banda side-by-side de color de marca (azul) con reveal CSS 'slide-left' al entrar en viewport, usada como cross-link hacia la guía descargable de la vertical
- Social hub UGC por hashtag: eyebrow uppercase con línea, H2 serif, iconos sociales circulares monocolor teal y masonry de fotos Instagram sobre un patrón decorativo geométrico local (talavera) en azul claro — identidad regional a costo de bytes casi nulo
- Sistema tipográfico dual: serif display (Romelio) SOLO para headings (w400, sin bold) y grotesca (proxima-nova) para body/UI/eyebrows con tracking — jerarquía por familia y tamaño, no por peso
- Página de vertical = brand page corta (3.5k px, 6 bloques), NO directorio: cero cards, cero filtros, cero tabs, cero mapa (cardLike:0, filterLike:0, tabLike:0, mapLike:0); el inventario real se delega a un embed de terceros
- Motion mínimo y legacy: sin GSAP/Lenis/Swiper/canvas; jQuery 2.2.4 + reveals CSS por clase; todo el 'wow' recae en el video hero
⚠️ Debilidades
- Sección 'Golf Resorts in Los Cabos' renderiza VACÍA (widget/iframe diferido de terceros que no pobló en 8s+scroll): hueco blanco de ~400px a mitad de página y riesgo de CLS — el contenido crítico depende de un embed
- La página se titula 'Best Oceanfront Golf Guide' pero no lista ningún campo: sin cards, sin filtros, sin mapa, sin precios/tee times — intención de búsqueda de directorio sin satisfacer (oportunidad directa para WIC)
- H1 con gramática rara ('A true haven for Golf enthusiasm only in Los Cabos') y además queda 100% debajo del fold (hero de 800px sin texto + header 80px)
- Stack legacy: jQuery 2.2.4 (2016, EOL, advisories conocidos); markup sucio en el widget de clima (texto '91.6° , weather forecast' con tabs/saltos dentro del botón)
- Página muy corta y genérica para la vertical con mayor gasto por visitante: 3.5k px, 3 H2, 20 imágenes (solo 9 lazy), 71 links — más branding que utilidad
✅ Para What's In Cabo
- Página vertical Golf de WIC (futura /guides/golf-courses-in-cabo/ con wic-vertical-guide): adoptar el esqueleto hero full-bleed poster/video + scroll-cue + intro editorial centrada serif, PERO ganarle a VLC llenando su hueco: directorio real de campos en cards con datos (green fees, diseñador, zona) — exactamente lo que su página promete y no entrega; patrón hero ya probado en WIC con mu-plugin wic-home-hero (poster=LCP, video post-load)
- Widget Elementor WIC 'guide-crossband': banda side-by-side navy #062c53 con foto + eyebrow + H3 serif + CTA teal #007481, reveal slide-in vía IntersectionObserver con candado prefers-reduced-motion, para cross-linkear guías de /guides/ desde el home (cumple regla 'home = solo widgets WIC') y desde otras verticales — traducción directa de la banda azul 'Golf Guide' de VLC
- Widget WIC 'social-proof band': patrón geométrico decorativo sutil (SVG inline crema/teal, eco local sin peso) de fondo + grid de fotos propias/licenciadas con hashtag propio + fila de iconos sociales circulares en teal #007481 — portar el PATRÓN del social hub #LosCabos sin CrowdRiff ni fotos de terceros; útil al pie de guías y del home
- Header/hero: chip de clima en vivo de Cabo ('84° in Cabo today') como micro-widget — señal de destino vivo que VLC usa bien; y evaluar un tab persistente estilo VIEW GUIDES como CTA fijo a /guides/ o a Cabo Passport (resolver antes el 404 de /cabo-passport) — en navy/naranja de la paleta WIC, nunca copiando el naranja VLC
/blog/ 5,321px
Estructura
0-80: header blanco 2 niveles (utility: 360 Tour/Golf/Meetings/idioma/clima 90.6° + nav primaria Places to Visit/Experiences) + rail vertical sticky derecho "(0) FAVES" navy y tab naranja "VIEW GUIDES" 80-800: hero marquee slideshow full-bleed (foto) con card blanca superpuesta a la izquierda: eyebrow "LOS CABOS" con regla teal, H2 serif 30px, excerpt, botón navy READ MORE ~800-962: banda navy de chips de categoría (All Stories, Adventure, Gastronomy, Tours & Activities, Events, Beaches, Art & Culture, Nightlife, Watersports) 962-1528: "Trending Stories" slider 1-across fullwidth (566px) 1568-1940: "Insider Picks / Top Picks Los Cabos" slider de cards 3-across con header kicker+título serif (372px) 2039-2411: "Eat + Drink / Gastronomy in Los Cabos" mismo widget 3-across (372px) 2511-3091: "Los Cabos Top Stories" split: intro editorial izquierda + panel foto verde con lista numerada 1-5 de artículos, cards arriba con badge "4 Min Read" + reloj (580px) 3091-3773: image-box promocional full-bleed "Tailored Land Excursions" (advertorial, 682px) 3773-4145: "Wellness Reimagined" slider 3-across (372px) 4244-4616: "Explore Nature / Arts & Culture" slider 3-across (372px, kicker inconsistente con subtítulo) 4716-5321: footer blanco (Media & PR, newsletter, legal)
🧩 Patrones
- Hub curado, NO índice cronológico: cero paginación/load-more; el blog se presenta como filas temáticas (Trending, Picks, Eat+Drink, Wellness, Arts) cada una con su slider — el archivo completo vive detrás de los chips de categoría
- Banda de chips de categoría anclada al borde inferior del hero (navy, texto claro) que funciona como navegación taxonómica del blog completo
- Widget repetible 'fila con header': kicker uppercase pequeño + regla corta de color + título serif grande + slider 3-across con flechas — la misma pieza instanciada 4 veces con distinto tema
- Hero tipo marquee editorial: slideshow full-bleed con card blanca superpuesta (eyebrow + serif + excerpt + CTA navy) que rota la historia destacada, en vez de hero estático
- Panel 'Top 5' numerado en split-layout: intro editorial a la izquierda, panel con foto tintada a la derecha con números 1-5 en tiles claros + títulos linkeados
- Metadata de card: badge de tiempo de lectura con icono de reloj ('4 Min Read') + categoría como eyebrow — escaneabilidad y señal editorial
- Rail utilitario sticky en el borde derecho: contador de favoritos + tab naranja de guías descargables, persistente en todo el scroll
- Motion mínimo: solo jQuery + sliders propios del CMS (Simpleview ccl-v2) con fade-in .js-loaded; sin GSAP/Lenis/canvas/video — el 'premium' lo cargan la fotografía y la tipografía serif
⚠️ Debilidades
- Chat widget (Satisfi Labs) se auto-abre y tapa ~30% del viewport en desktop de forma persistente — aparece en ambos screenshots cubriendo contenido y CTAs
- H1 oculto con font-size 0 y texto genérico de marca; la jerarquía semántica real empieza en H2 — desperdicio SEO en un hub editorial
- Markup sucio: H2s con tabs/saltos de línea embebidos ('Insider Picks\n\t\t\tTop Picks…'), doble texto kicker+título dentro del mismo heading
- Inconsistencia editorial: sección con kicker 'Explore Nature' pero subtítulo 'Arts & Culture in Los Cabos'
- 100 <article> y 111 imágenes cargados en una sola página sin paginación ni load-more — peso alto y sin ruta al archivo profundo desde el hub
- El mismo widget 3-across repetido 4 veces idéntico produce monotonía visual a mitad de página
- Títulos de card a 17px en serif display quedan débiles/poco legibles frente a los headers de 36px
✅ Para What's In Cabo
- Portar la banda de chips de categoría (patrón hero-bottom) al hub /guides/ (page 4919): banda navy #062c53 con chips crema y activo teal #007481 enlazando los 8 verticales (restaurants/hotels/beaches/tours/yachts/golf/transportation/events) — convierte el hub en navegación taxonómica escaneable como hace VLC con All Stories/Adventure/Gastronomy
- Crear widget Elementor WIC 'guide-row' reutilizable para el home (regla: home = solo widgets): kicker uppercase + regla corta teal + título serif grande + carrusel 3-across de cards de guías/listings; instanciable por vertical igual que VLC repite su fila temática, pero variando fondo (crema/navy alterno) para evitar su monotonía
- Añadir metadata 'X min read' con icono de reloj + eyebrow de vertical a las cards de /guides/ y del hub — patrón de escaneabilidad de VLC directamente aplicable a nuestras guías best-of y pillar
- Adaptar el panel numerado Top-5 como módulo de guías best-of (intro editorial izquierda + panel tintado navy con tiles 1-5), SOLO para artículos/guías, no para venues: la regla de refuerzo de listado prohíbe coronar venues, así que los tiles enlazan guías ('Top 5 stories this month') y cierran con cue 'browse all guides'