Skill para generar correos electrónicos HTML compatibles con GHL/Outlook que cumplen con los estándares de diseño y marca de Yatezzitos México. Incluye tokens de diseño, estructura, variables GHL, recursos de marca y plantillas de referencia.
Propósito: Cada vez que se necesite crear, editar o adaptar un correo electrónico para Yatezzitos, este documento es la fuente de verdad obligatoria de diseño y recursos.
1 · Sistemas de Diseño
Yatezzitos emplea dos sistemas de diseño según el tipo de correo:
Tabla-based layout 100% puro — Usar únicamente <table role="presentation"> para toda la estructura. Cero div para maquetación.
Wrapper externo y contenedor fijo — Wrapper exterior al 100% de ancho. Contenedor interno fijo de 640px oblitagorio: width="640" + style="width:640px; max-width:640px; table-layout:fixed;".
Cero scroll horizontal (Mobile-safe) — En móvil, elimina el padding lateral del contenedor exterior; el padding limitante debe controlarse solo del lado interno de las tablas. Nunca uses anchos que superen el contenedor ni bordes que se sumen al 100% de ancho.
Imágenes fluidas seguras — Todas las imágenes deben llevar estrictamente display:block; max-width:100%; height:auto;.
Botones CTA Bulletproof (Estrictos) — NUNCA hagas botones con <a> inline-block + borde + ancho fijo. Los CTA deben construirse insertando una tabla anidada de ancho fijo, y el <a> dentro con display:block; width:100%; max-width:100%; box-sizing:border-box; text-decoration:none;.
Desbordes y rgba() — Evita elementos que rompan viewport (SVG sueltos, anchos fijos anidados mal calculados). Evita rgba() en elementos de alto contraste porque Outlook no lo soporta; usa HEX #XXXXXX.
Font family — font-family:"Barlow", Arial, Helvetica, sans-serif (LIGHT) ó font-family:Arial, Helvetica, sans-serif (DARK). Siempre con fallback seguro.
Google Fonts — Solo en LIGHT: <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800&display=swap">.
Outlook VML — Botones con fallback <!--[if mso]>...<![endif]--> usando v:roundrect.
Outlook color fix — Links con mso-style-textfill-fill-color: + <!--[if mso]><font color="">...<![endif]-->.
Cero Modern CSS — Nunca JavaScript. Nunca CSS Grid / Flexbox. Siempre pensar en MS Word rendering engine (Outlook).
Preheader y Alt text — Texto oculto de previsualización arriba del email. Atributo alt obligatorio en todas las imágenes.
Llamada a la acción clara — un solo CTA principal por correo.
Correos internos — tono directo, operativo, orientado a acción inmediata.
Soporte — siempre ofrecer responder el correo o contactar por WhatsApp.
6 · Cuándo usar cada tema
Tipo de correo
Tema
Logo
Social Icons
Cotización enviada
LIGHT
Oscuro, 100px
No
Recordatorio de pago
LIGHT
Oscuro, 100px
No
Confirmación de pago
LIGHT
Oscuro, 100px
No
Correo interno operativo
LIGHT
Oscuro, 100px
No
Notificación pre-viaje (7+ días)
LIGHT
Oscuro, 100px
No
Notificación pre-viaje (3 días o menos)
DARK
Blanco, 75px
Sí
Día del viaje
DARK
Blanco, 75px
Sí
Campañas masivas / promociones
DARK
Blanco, 75px
Opcional
Reseñas / post-viaje
DARK
Blanco, 75px
Sí
7 · Checklist de Calidad (antes de entregar cualquier correo)
¿HTML válido con <!doctype html> y lang="es"?
¿Preheader oculto incluido?
¿Logo correcto según el tema (dark vs. light)?
¿Ribbon/banner con texto descriptivo?
¿Heading (H1) visible y prominente?
¿Saludo con {{contact.name}} o {{contact.first_name}}?
¿Variables GHL correctas (sin typos)?
¿CTA con fallback MSO/Outlook?
¿Fallback link debajo del CTA?
¿Responsive con media query?
¿Footer con copyright de Yatezzitos?
¿Social icons (si aplica)?
¿Sin JavaScript ni CSS Grid/Flexbox?
¿Colores consistentes con la tabla de tokens?
¿Texto legible (mínimo 12px)?
8 · Referencia rápida de archivos existentes
Los correos de referencia están en:
ghl-data/emails/
├── Avistamientos de ballenas/ 🌊 dark theme, notificaciones
├── Combate Naval/ 🎆 dark theme, notificaciones
├── Correos Internos/ 📋 light theme, operativo
├── Cotización enviada/ 💼 light theme, transaccional
├── Definio fecha de pago/ 💳 light theme, transaccional
├── Email - Masivos/ 📢 dark theme, campañas
├── Generados IA Agente/ 🤖 legacy (NO usar como referencia)
├── Plantilla_Rescate_-_30_Dias_IA/ ⚠️ legacy (NO usar como referencia)
├── Recibo de deposito/ 🧾 light theme, transaccional
└── Renta de yates/ ⛵ light theme, transaccional
⚠️ NOTA: Las plantillas dentro de Generados IA Agente/ y Plantilla_Rescate_-_30_Dias_IA/ son templates legacy antiguos que NO siguen el estándar de diseño actual. Nunca usarlos como referencia de diseño. Siempre tomar como modelo los correos de Cotización enviada/, Renta de yates/, Correos Internos/ (LIGHT) y Avistamientos de ballenas/, Combate Naval/, Email - Masivos/ (DARK).
9 · Catálogo de Contenido para Nutrir Emails
Para enriquecer los correos con enlaces a embarcaciones, destinos y artículos del blog, consultar el archivo:
Link a la ficha del yate reservado, sugerencias de otros yates
Ciudades
10 destinos con URL + variable GHL
Link "Explora tu destino", CTAs secundarios
Blog posts
50+ artículos por destino
Nutrición pre-viaje ("Descubre qué hacer en…"), tips, guías
Uso recomendado por tipo de email:
Tipo de correo
Contenido del catálogo a incluir
60–30 días antes
Link a guía de la ciudad + 1–2 blog posts del destino
15–7 días antes
Link a blog de "qué empacar" o "mejores playas" del destino
3–0 días antes
Solo datos operativos (marina, mapa, hora), sin blog
Internos
Link a ficha del yate + datos del contacto
Campañas masivas
Links a múltiples destinos y embarcaciones
Post-viaje / Reseñas
Link a Google Reviews + yate específico
Datos de cada embarcación disponibles via JSON:
Los datos completos de cada yate se leen de:
data/yachts/Destinos/{Ciudad}/{Tipo}/{slug}.json
Campos disponibles: Nombre del Yate, Ciudad/Ubicación, Categoría, URL de Reserva, Precio, Capacidad, Amenidades/Incluye, Año Construcción, Ubicación de Abordaje, Descripción.