Email Generation

1.2 — DARK theme (notificaciones / campañas / día del viaje)

Usado en: Notificaciones 24h, Día del viaje, Combate Naval, Campañas masivas.

2 · Recursos de Marca (URLs fijas)

2.1 — Logotipos

2.2 — Redes Sociales

2.3 — URLs de Producto

3 · Variables GHL (GoHighLevel)

3.1 — Variables del contacto (más usadas en emails)

3.2 — Custom values (location-level)

4 · Estructura HTML Obligatoria

4.1 — Anatomía de un correo Yatezzitos

┌────────────────────────────────────────┐
│ PREHEADER (oculto, 90 chars max)       │
├────────────────────────────────────────┤
│ BODY bg (light: #f5f7fb / dark: #000)  │
│ ┌──────────────────────────────────┐   │
│ │ CARD (640px max, centered)       │   │
│ │ ┌──────────────────────────────┐ │   │
│ │ │ LOGO (centrado)              │ │   │
│ │ ├──────────────────────────────┤ │   │
│ │ │ RIBBON (banner tipo barra)   │ │   │
│ │ ├──────────────────────────────┤ │   │
│ │ │ CONTENIDO PRINCIPAL          │ │   │
│ │ │ • Heading (H1)               │ │   │
│ │ │ • Saludo personal            │ │   │
│ │ │ • Info box (status/alert)    │ │   │
│ │ │ • Tabla de detalles          │ │   │
│ │ │ • CTA principal              │ │   │
│ │ │ • Fallback link              │ │   │
│ │ │ • Sección "Próximos pasos"   │ │   │
│ │ ├──────────────────────────────┤ │   │
│ │ │ SOCIAL ICONS (dark only)     │ │   │
│ │ ├──────────────────────────────┤ │   │
│ │ │ FOOTER                       │ │   │
│ │ └──────────────────────────────┘ │   │
│ └──────────────────────────────────┘   │
└────────────────────────────────────────┘

4.2 — Reglas técnicas obligatorias (STRICT Email-Safe & Mobile-Safe)

1. Tabla-based layout 100% puro — Usar únicamente <table role="presentation"> para toda la estructura. Cero div para maquetación.
2. 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;".
3. 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.
4. Imágenes fluidas seguras — Todas las imágenes deben llevar estrictamente display:block; max-width:100%; height:auto;.
5. 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;.
6. 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.
7. Font family — font-family:"Barlow", Arial, Helvetica, sans-serif (LIGHT) ó font-family:Arial, Helvetica, sans-serif (DARK). Siempre con fallback seguro.
8. Google Fonts — Solo en LIGHT: <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800&display=swap">.
9. Outlook VML — Botones con fallback <!--[if mso]>...<![endif]--> usando v:roundrect.
10. Outlook color fix — Links con mso-style-textfill-fill-color: + <!--[if mso]><font color="">...<![endif]-->.
11. Cero Modern CSS — Nunca JavaScript. Nunca CSS Grid / Flexbox. Siempre pensar en MS Word rendering engine (Outlook).
12. Preheader y Alt text — Texto oculto de previsualización arriba del email. Atributo alt obligatorio en todas las imágenes.

4.3 — Preheader snippet (copiar/pegar)

<!-- LIGHT theme -->
<td style="display:none;visibility:hidden;mso-hide:all;opacity:0;color:transparent;height:0;width:0;overflow:hidden;line-height:1px;font-size:1px;">
  TEXTO PREHEADER AQUÍ
</td>

<!-- DARK theme -->
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;font-size:1px;line-height:1px;">
  TEXTO PREHEADER AQUÍ
</div>

4.4 — CTA Button snippet (copiar/pegar)

<!-- Bulletproof CTA (Mobile Safe & Anti-scroll) -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="padding: 10px 0;">
      <!-- La tabla interna controla el ancho del botón para compatibilidad universal -->
      <table role="presentation" width="330" cellpadding="0" cellspacing="0" border="0" style="width:330px;max-width:100%;">
        <tr>
          <td align="center" bgcolor="#194395" style="border-radius:8px;">
            <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
              href="URL_AQUI" style="height:48px;v-text-anchor:middle;width:330px;" arcsize="12%" stroke="f" fillcolor="#194395">
              <w:anchorlock/>
              <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;">
                TEXTO CTA
              </center>
            </v:roundrect>
            <![endif]-->
            <!--[if !mso]><!-- -->
            <a href="URL_AQUI" target="_blank" rel="noopener"
               style="background:#194395;border-radius:8px;color:#ffffff;display:block;font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:15px;font-weight:800;line-height:48px;text-align:center;text-transform:uppercase;letter-spacing:.6px;width:100%;max-width:100%;box-sizing:border-box;text-decoration:none;">
              Texto CTA
            </a>
            <!--<![endif]-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

4.5 — Social Icons Block (DARK theme, copiar/pegar)

<!-- Social Icons Row (DARK theme, inline SVG, fondo negro, iconos blancos) -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- Instagram -->
    <td style="padding:0 6px;">
      <a href="https://www.instagram.com/yatezzitos_mx" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm10 2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10zm-5 3.5A4.5 4.5 0 1 0 16.5 12 4.5 4.5 0 0 0 12 7.5zm0 7.4A2.9 2.9 0 1 1 14.9 12 2.9 2.9 0 0 1 12 14.9zM17.6 6.4a1 1 0 1 0 1 1 1 1 0 0 0-1-1z"/>
          </svg>
        </span>
      </a>
    </td>
    <!-- Facebook -->
    <td style="padding:0 6px;">
      <a href="https://www.facebook.com/Yatezzitos" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M22 12a10 10 0 1 0-11.56 9.87v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.62.77-1.62 1.56V12h2.76l-.44 2.88h-2.32v6.99A10 10 0 0 0 22 12z"/>
          </svg>
        </span>
      </a>
    </td>
    <!-- TikTok -->
    <td style="padding:0 6px;">
      <a href="https://www.tiktok.com/@yatezzitosmexico?lang=es" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M16.5 2h-2.3v13.2a3.3 3.3 0 1 1-3.3-3.3c.3 0 .6 0 .9.1V9.7a5.7 5.7 0 1 0 5.7 5.7V8.2c1 .8 2.3 1.3 3.7 1.3V7.2c-2.2-.1-4-1.9-4.4-5.2z"/>
          </svg>
        </span>
      </a>
    </td>
    <!-- X (Twitter) -->
    <td style="padding:0 6px;">
      <a href="https://x.com/yatezzitos" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M18.9 2H22l-6.8 7.8L23 22h-6.7l-5.2-6.7L5.6 22H2l7.3-8.4L1 2h6.9l4.7 6.1L18.9 2zm-1.2 18h1.7L7.1 3.9H5.3L17.7 20z"/>
          </svg>
        </span>
      </a>
    </td>
    <!-- YouTube -->
    <td style="padding:0 6px;">
      <a href="https://www.youtube.com/channel/UCbuxpBSUvfAs0XqMV-HD7AA" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M21.6 7.2a2.7 2.7 0 0 0-1.9-1.9C18 4.9 12 4.9 12 4.9s-6 0-7.7.4A2.7 2.7 0 0 0 2.4 7.2 28.3 28.3 0 0 0 2 12a28.3 28.3 0 0 0 .4 4.8 2.7 2.7 0 0 0 1.9 1.9c1.7.4 7.7.4 7.7.4s6 0 7.7-.4a2.7 2.7 0 0 0 1.9-1.9A28.3 28.3 0 0 0 22 12a28.3 28.3 0 0 0-.4-4.8zM10.2 15.4V8.6L16 12l-5.8 3.4z"/>
          </svg>
        </span>
      </a>
    </td>
    <!-- Google Maps -->
    <td style="padding:0 6px;">
      <a href="https://www.google.com.mx/maps/place/Yatezzitos+M%C3%A9xico" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/>
          </svg>
        </span>
      </a>
    </td>
    <!-- Pinterest -->
    <td style="padding:0 6px;">
      <a href="https://mx.pinterest.com/yatezzitosm/" target="_blank" rel="noopener" style="text-decoration:none;">
        <span style="display:inline-block;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center;line-height:40px;">
          <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:middle;">
            <path fill="#FFFFFF" d="M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2.1 0-3l1.5-6.2s-.4-.8-.4-2c0-1.9 1.1-3.3 2.5-3.3 1.2 0 1.7.9 1.7 1.9 0 1.2-.8 3-1.2 4.6-.3 1.4.7 2.5 2.1 2.5 2.5 0 4.4-2.6 4.4-6.4 0-3.4-2.4-5.7-5.8-5.7-4 0-6.3 3-6.3 6.1 0 1.2.5 2.5 1.1 3.2.1.1.1.3.1.4l-.4 1.6c-.1.3-.3.4-.6.3-1.7-.8-2.7-3.2-2.7-5.2 0-4.2 3-8.1 8.8-8.1 4.6 0 8.2 3.3 8.2 7.7 0 4.6-2.9 8.3-6.9 8.3-1.3 0-2.6-.7-3.1-1.5l-.8 3c-.3 1-.9 2.2-1.3 2.9.9.3 1.9.5 2.9.5A10 10 0 0 0 12 2z"/>
          </svg>
        </span>
      </a>
    </td>
  </tr>
</table>

5 · Reglas de Redacción y Tono

1. Español mexicano, profesional, cálido, con toques de exclusividad premium.
2. Tuteo — usar "tú" con el cliente, nunca "usted".
3. Emojis con moderación — 1–3 por correo, usados estratégicamente (⚓, 🐋, 🔥, 🎆, 😎).
4. Urgencia sutil — crear sentido de importancia sin ser agresivo.
5. Lenguaje aspiracional — "experiencia", "premium", "exclusivo", "adventure".
6. Llamada a la acción clara — un solo CTA principal por correo.
7. Correos internos — tono directo, operativo, orientado a acción inmediata.
8. Soporte — siempre ofrecer responder el correo o contactar por WhatsApp.

6 · Cuándo usar cada tema

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:

📁 resources/catalog.md

Este catálogo contiene:

Uso recomendado por tipo de email:

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.