Centro de marca · logo oficial + biblioteca de diseño · no indexado

What's in Cabo — Centro de marca y herramientas

Fuente compartida para aplicar la identidad de What's in Cabo: logo oficial, significado, formatos y una biblioteca complementaria de paleta, iconos, texturas y patrones web. Cada bloque conserva su propio estado. Los recursos del logo se descargan desde su archivo maestro y sus reglas también están disponibles para agentes de IA.

What's in Cabo

Identidad oficial · v1

El logo correcto, listo para usar

Una familia completa para web, redes, documentos, impresión, aplicaciones y colaboraciones. La geometría y el apóstrofe-choya están protegidos: descarga el archivo adecuado y úsalo sin reconstruirlo.

OFICIAL Familia validada 6 composiciones 2 colores
Descargar kit completo Abrir guía PDF Datos para IA · JSON

Para agentes y automatizaciones: README-AI.md · checksums

Familia principal

Una composición para cada espacio

Elige primero la forma del espacio; después el formato y el color. Para un uso general, empieza con la versión vertical azul.

Logo horizontal extendido oficial azul de What's in Cabo
03 · PanorámicaExtendida

Horizontal extendida

Banners, franjas y encabezados muy anchos. No debe comprimirse para hacerla caber en espacios cortos.

SVG azul SVG blanco PNG azul PNG blanco PDF
Ver variantes secundarias: wordmarks apilado y lineal

Significado

Una señal con destino

El emblema reúne ubicación, naturaleza, mar y desierto en una sola señal. No es una colección decorativa: representa una plataforma que ayuda a descubrir, entender, planear y vivir Los Cabos con información, recomendaciones y herramientas útiles para viajeros y profesionales del destino.

01

Pin y punta

Encontrar, orientarse y señalar “aquí está Cabo”: una puerta de entrada práctica al destino.

02

Cola de ballena

Naturaleza extraordinaria, migración, viaje y la emoción de encontrarse con Los Cabos.

03

Olas y dos mares

El encuentro del océano Pacífico y el mar de Cortés; movimiento, rutas y navegación.

04

Corriente circular

Energía, circulación, conexión, exploración y un punto de interés dentro de un mapa.

05

Choya-apóstrofe

El paisaje desértico de Baja California Sur. Primero puntuación; después, detalle local memorable.

06

Tipografía serif

Autoridad editorial, criterio y permanencia: una referencia confiable del destino.

07

Azul profundo

Océano, confianza, navegación, tecnología y sofisticación sin sentirse corporativo.

08

Blanco y marfil

Claridad, arena, hospitalidad, calma y un lujo cálido conectado con el lugar.

Posicionamiento de marca

La capa de inteligencia de Los Cabos

What’s in Cabo es la capa de inteligencia de Los Cabos: transforma información del destino en herramientas útiles para viajeros y socios locales.

No somos solamente una guía que enumera hoteles, restaurantes y actividades. Organizamos información local, señales actuales y tecnología para ayudar a tomar mejores decisiones sobre el destino.

  1. 01

    Qué hacer.

  2. 02

    Dónde ir.

  3. 03

    Cuándo conviene hacerlo.

  4. 04

    Cómo aprovechar mejor Los Cabos.

Ecosistema

  • Mapa interactivo
  • Golf 3D
  • Live Cabo Signals
  • Cabo Passport
  • TravelDesk Connect

Estos nombres describen el ecosistema de la marca; verifica el estado actual antes de comunicar disponibilidad.

No solamente mostramos lo que existe en Los Cabos; ayudamos a elegir qué Cabo vivir, cuándo y cómo.

Uso y descarga

Tres preguntas. Un archivo correcto.

¿Dónde vivirá? ¿Qué espacio tiene? ¿El fondo es claro u oscuro? La respuesta determina composición, formato y color.

Fondo claro · versión azul Logo horizontal compacto azul sobre fondo marfil #162A3D sobre #F2EDE3 · marfil de presentación, no fondo UI
Fondo oscuro · versión blanca Logo horizontal compacto blanco sobre fondo azul profundo #FFFFFF sobre fondo oscuro
Web y productoEscala limpia y adaptable.
SVGhorizontal-compacto
Redes y documentosTransparencia y uso cotidiano.
PNGvertical · 1024/2048
Avatar, app y mapaReconocimiento en poco espacio.
SVG/PNGsímbolo
Imprenta y proveedorGeometría vectorial para salida.
PDF/SVGsegún composición

Siempre

Protege la firma

  • Conserva proporción y área libre mínima de 1X; X es la altura visible del wordmark.
  • Usa 300 px como tamaño recomendado. No uses la firma completa por debajo de 240 px.
  • Entre 32 y 239 px usa el símbolo; en 16 px usa el favicon.
  • En impresión, usa al menos 35 mm y entrega PDF o SVG.
  • Sobre fotografía, busca una zona tranquila o usa una placa.

Nunca

No reconstruyas el logo

  • No deformes, gires, recortes ni recompongas.
  • No recolorees ni cambies el azul oficial por navy de interfaz.
  • No agregues sombra, contorno, degradado, brillo o transparencia.
  • No sustituyas el apóstrofe-choya ni separes los elementos.
  • No uses capturas, JPG o imágenes generadas por IA como maestro.

Paquete de distribución limpio

Todo lo necesario, sin archivos internos

Incluye SVG, PNG 1024/2048, PDF de impresión, favicons, lámina, guía, contrato JSON, instrucciones Markdown y checksums. Excluye pruebas, controles y exploraciones históricas.

Kit oficial · ZIP Verificar ZIP · SHA-256 Ver lámina maestra Guía humana · PDF
HERRAMIENTA · PALETA OFICIAL · v1.0.0 · APROBADA 2026-08-24

La paleta del sitio (obligatoria para todo lo nuevo)

Elegida por panel de 5 lentes (4-1) + decisiones de Iván. Historia completa y tiras comparativas: propuesta-paleta-fondos · máquina-legible: paleta.json. Estado: APLICADA en el home principal y el preview (25-ago).

FONDOS DE INTERFAZ (los únicos 5)
Blanco
tarjetas densas
Crema papel
base del sitio
Arena clara
secciones destacadas
Arena
apoyo y cierres
Navy único
bandas oscuras y títulos
CROMO · EL MARCO (header y footer)
Petróleo cromo → navy
Header y footer en degradado hacia #062C53, Y color de acción de los botones (Search, newsletter, toggles). (Iván, 25-ago). Encima: dorado y textos claros; nunca teal. El #005962 es un color heredado de interfaz; no debe usarse dentro del logo. El azul protegido del logo oficial es #162A3D.
ACENTOS Y TINTAS
Dorado acento
líneas e iconos, nunca letra
Dorado texto
dorado como letra, en grande
Teal chips
chips y etiquetas; los botones de acción usan el petróleo #086380
Teal texto
letra teal pequeña
Gris tinta
párrafos
Salvia
SOLO banda-degradado, 2 por página

Reglas duras: la salvia NUNCA es fondo plano — solo banda-degradado arena→salvia→arena, máximo 2 por página · el dorado brillante nunca es letra · tarjetas blancas siempre con borde o sombra · los 13 colores viejos (grises #F4F4F4/#F6F6F5, azules #F9FCFF/#ECF4F6, cremas #FDFBF6/#FDFBF7/#F7F1E6/#FBF6EC, navys #04203D/#081E36/#0A2844, dorados #DB9A45/#C98A3D) están PROHIBIDOS en trabajo nuevo · anclas temáticas: verdes solo en golf, café solo en Restaurants.

HERRAMIENTA · ICONOS DEL BUSCADOR · DUOTONO NAVY+ORO · ELEGIDOS 2026-08-23

Set de iconos propio (10 categorías)

Dibujados a mano para WIC (opción B del catálogo propuesta-iconos-buscador): palapa, palma+hotel, brújula, campana, yate, banderola, camioneta, cámara, guía y calendario. SVG autocontenidos (navy #062C53 + oro #E8A24C). En el buscador del home viven como máscaras CSS dentro de wic-home-lujo-v2.php (generador: gen-b-css.py del scratchpad de Claude); para cualquier otro uso, tomar estos SVG. Regla: en páginas/asset nuevos, NUNCA volver a los Material Icons genéricos para estas categorías.

BeachesBeaches
HotelsHotels
Tours (brújula)Tours (brújula)
RestaurantsRestaurants
YachtsYachts
GolfGolf
TransportationTransportation
PhotographersPhotographers
Tour OperatorsTour Operators
EventsEvents
HERRAMIENTA · ICONO DE WELLNESS · DUOTONO NAVY+ORO · APROBADO 2026-10-06

Icono de Wellness (spas, yoga y bienestar)

Diseño de Iván: una persona meditando sobre una ola dorada. Trazado a 48×48 desde su imagen con los colores de la paleta (navy #062C53 + oro #E8A24C), igual que el set de 10 de arriba. Vive en el hub /wellness/ (aviso «For businesses»). Úsalo para todo lo de Wellness en lugar de un Material Icon genérico.

WellnessWellness

Reglas del paquete: los archivos están congelados (DEC-004…015) — nada se edita ni se renombra. Solo la Dirección 01 es repetible (seamless); las 02–13 jamás en repeat. Para web usar los WebP. Inventario máquina-legible: manifest.json.

Estado: RECOMENDACIÓN 2026-08-14. Ninguna dirección está integrada aún — cada ubicación se aprueba con Iván antes de montarse.

Dirección 01

Topografía de cardón

Área sugerida: Fondos largos, franjas, navegación y tarjetas amplias (único patrón repetible)

Dirección 02

Cintas entrelazadas

Área sugerida: Por definir con Iván

SVG seamless · descartado
Dirección 03

Cardones y dunas

Área sugerida: Por definir con Iván

SVG seamless · descartado
Dirección 04

Secciones de cardón

Área sugerida: Por definir con Iván

Dirección 05

Cardones en el horizonte

Área sugerida: Por definir con Iván

Dirección 06

Corrientes entrelazadas

Área sugerida: Por definir con Iván

Dirección 07

Cardón y marea

Área sugerida: Cabo Passport · escritorio

Dirección 08

Hilos de marea de Cortés

Área sugerida: Guides

Dirección 09

Oleaje del Pacífico

Área sugerida: Newsletter

Dirección 10

Bahías laterales

Área sugerida: Living Map o bloque editorial

Dirección 11

Convergencia de dos mares

Área sugerida: Firma visual «Pacífico × Mar de Cortés»

Dirección 12

Dunas al viento · diagonal

Área sugerida: Blogs de aventura y road trips

Dirección 13

Dunas al viento · horizontal

Área sugerida: Fondos y separadores editoriales

HERRAMIENTA · GUÍA DE ESTILO · CAMPOS DE GOLF 3D · v1.1.0 · 2026-09-23

Cómo se ven los campos de golf 3D

Colores, apariencia y formas de todos los exploradores 3D de golf, medidos en los 7 campos publicados, más el orden de trabajo de Iván: forma → detalles → botones y demás → plantas al final. Es la referencia para armar cada campo nuevo sin preguntar qué se usa. Página visual: golf-estilo · guía completa, con la fuente de cada valor: skill wic-golf-listing/references/ESTILO-CAMPOS-GOLF-WIC.md (legible por máquina: estilo-campos-golf-wic.json).

HERRAMIENTA · CIERRE DE PREGUNTAS FRECUENTES · v1.3.0 · 2026-08-28

El cierre de «Frequently Asked Questions»

El remate que va debajo de la rejilla de preguntas en todas las páginas de directorio (hoteles, restaurantes, playas, transporte, tours, regiones). Son dos piezas: la nota editorial y la banda de cierre. Se documenta aquí porque los mismos fallos se repiten cada vez que se monta en una página nueva.

Los dos fallos que se repiten. (1) La nota editorial nace con un border-top gris a todo lo ancho que no separa nada —encima ya hay una rejilla de tarjetas blancas sobre textura— y hay que quitarlo a mano. (2) A la cejilla «EDITORIAL NOTES & SOURCES» se le olvida el filete dorado, y sin él el bloque se lee como texto suelto en vez de como el remate editorial de la sección. (3) El <h2> vive fuera del contenedor que centra las tarjetas y acaba con un relleno distinto: en restaurantes el título arrancaba en x=24 y las tarjetas en x=116, casi cien píxeles de desfase que a simple vista parece «un título un poco corrido».

Anatomía

<section class="…-faq"> <div class="…-faq__inner"> <p class="…-kicker">Plan the stay</p> <h2>Frequently Asked Questions</h2> <div class="…-faq__grid"> ← 6 <article> con <h3> + <p> <footer class="…-sources"> ← nota editorial + equipo y fecha <div class="…-faq__bar"> ← banda navy, A SANGRE

Fondo y color

El CSS de los dos arreglos

/* 1 · fuera el filete gris, y se recupera el aire que sobraba */ .…-sources { border-top: 0; margin-top: 18px; padding-top: 0; } /* 2 · la cejilla con su filete dorado delante */ .…-sources strong { align-items: center; display: flex; gap: 10px; } .…-sources strong::before { background: #e8a24c; content: ""; flex: none; height: 2px; width: 26px; }

Las medidas que TIENEN que coincidir

Esta tabla es el contrato. Se comprueba leyendo el estilo computado en la página viva y comparándolo contra /hotels/, que es la referencia. Si un valor no cuadra, la sección no está terminada — y son justo estos tres los que se olvidan siempre.

Elemento Propiedad Valor exacto
.…-faq (la sección) padding 82px 0 40px — los 40 de abajo dejan la crema bajo la banda; con 0 la banda muere pegada al canto
interior de la banda padding 10px 32px — sin el vertical la banda se queda en el mínimo y se lee más estrecha
interior de la banda gap 28px — separa el texto del CTA
interior de la banda min-height 62px
.…-sources border-top / margin-top / padding-top 0 / 18px / 0 — medido en restaurantes, playas, tours y regiones. /hotels/ es la excepción: lleva 26 px y está pendiente de igualar, así que para ESTE valor la referencia son las otras cuatro, no hoteles
título, tarjetas y nota borde izquierdo (getBoundingClientRect().x) el mismo número en los tres — mismo max-width y mismo padding lateral; da igual cuál sea el valor mientras coincidan entre sí
La cuarta trampa: la especificidad. En páginas viejas las reglas del bloque de preguntas suelen colgar de una cadena larga —en tours, de .wic-guide.wic-guide--pillar, que son dos clases en un solo elemento— y varias llevan !important. Un selector nuevo escrito «a secas» pierde y el arreglo se queda a medias sin que nada falle: en tours el h3 se quedó en 21 px y el párrafo en café, aunque las tarjetas y la banda sí habían cambiado. Hay que repetir la misma cadena de ancestros y poner !important donde lo tenga el original. Y el propio envoltorio puede romperse: ahí la sección se arma con una expresión regular que exigía la banda pegada a la rejilla, y al meter la nota editorial en medio dejó de casar y la banda desapareció entera.
Antes de dar por buena la sección: que no quede ningún borde visible dentro del bloque (se comprueba recorriendo todos los descendientes, no solo los dos que se ven), que la banda navy vaya a sangre y no encajonada, y que el negativo con el que sangra coincida con el relleno del contenedor — en playas eran −32 px contra 24 de relleno y desbordaba la página 8 px de 700 a 1300.

Cómo se comprueba: no con capturas. Se leen los estilos computados de la página nueva y los de /hotels/ y se comparan valor a valor; las diferencias de 10 px que rompen la sensación de «misma sección» son invisibles en una imagen y saltan solas en una tabla.
HERRAMIENTA · TEXTURA EN BLANCO SOBRE FONDO OSCURO · v1.0.0 · 2026-08-28

Poner una textura del pack sobre una banda oscura

Las 13 direcciones de textura vienen dibujadas en tinta oscura sobre papel crema, así que sobre una banda navy no se ven. Esta es la receta para usar la misma composición con las formas en blanco y sin tocar el color de fondo. Vive en la sección «Go deeper into San José» de San José del Cabo, con la Dirección 06, Corrientes entrelazadas, al 20 % sobre el navy.

El truco. El asset se guarda como el dibujo en blanco sobre negro y se compone con mix-blend-mode: screen: el negro deja el fondo exactamente igual y solo suben las líneas. Nada de PNG con transparencia — un RGBA donde todo el detalle vive en el canal alfa pesa 310 KB; el mismo dibujo opaco en blanco sobre negro pesa 79 KB, porque el 68 % del cuadro es negro plano y eso el WebP lo comprime casi gratis.

Cómo se genera desde el pack

Archivos

texturas/marine-interlocking-currents-white-on-dark.webp (1200×676 · 79 KB) y su .css al lado, con la clase .wic-textura--corrientes-blancas lista para copiar.

Dos cosas que hay que revisar siempre. (1) Que el fondo siga siendo el color exacto: se mide el color más frecuente de la banda en la captura y tiene que dar el hex de la paleta — en San José da #062C53 clavado. (2) Que en pantallas estrechas no se use cover: la sección se alarga tanto que el dibujo se amplía 3× y solo quedan dos curvas gigantes que parecen manchas. Por debajo de 1050 px se ancla arriba a tamaño natural y se desvanece con una máscara.