<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu Invitación - Evento Institucional</title>
    <!--[if mso]>
    <style type="text/css">
        body, table, td, a { font-family: Arial, sans-serif !important; }
    </style>
    <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #f8f6f2; font-family: Arial, sans-serif;">
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f6f2;">
        <tr>
            <td align="center" style="padding: 40px 20px;">
                <!-- Contenedor principal -->
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08);">
                    
                    <!-- Línea gráfica superior -->
                    <tr>
                        <td style="padding: 0; background: linear-gradient(90deg, #1a5276 0%, #00abb6 100%); height: 6px;">
                        </td>
                    </tr>
                    
                    <!-- Logo (imagen principal) - sin textos -->
                    <tr>
                        <td align="center" style="padding: 40px 30px 25px; background-color: #ffffff;">
                            <img src="{{IMAGEN_PRINCIPAL}}" alt="Logo" style="max-width: 220px; max-height: 140px; height: auto; border-radius: 4px; display: block;" width="220">
                        </td>
                    </tr>
                    
                    <!-- Nombre del evento -->
                    <tr>
                        <td align="center" style="padding: 0 30px 25px; background-color: #ffffff;">
                            <h1 style="margin: 0; padding: 0; font-size: 28px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif;">
                                {{NOMBRES_NOVIOS}}
                            </h1>
                            <div style="width: 50px; height: 2px; background-color: #00abb6; margin: 15px auto 0;"></div>
                        </td>
                    </tr>
                    
                    <!-- Mensaje de bienvenida -->
                    <tr>
                        <td align="center" style="padding: 0 30px 25px; background-color: #ffffff;">
                            <p style="margin: 0 0 10px; padding: 0; font-size: 17px; line-height: 1.6; color: #333333; font-family: Arial, sans-serif;">
                                Estimado(a) <strong style="color: #1a5276;">{{NOMBRE_INVITADO}}</strong>
                            </p>
                            <p style="margin: 0; padding: 0; font-size: 15px; line-height: 1.7; color: #555555; font-family: Arial, sans-serif;">
                                Tienes una invitación especial esperándote.<br>
                                Nos complace invitarte a este evento institucional.
                            </p>
                        </td>
                    </tr>
                    
                    <!-- Información del evento -->
                    <tr>
                        <td align="center" style="padding: 0 30px 30px; background-color: #ffffff;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e8e8e8;">
                                <tr>
                                    <td align="center" style="padding: 25px;">
                                        <p style="margin: 0 0 5px; padding: 0; font-size: 12px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.5px;">
                                            Fecha
                                        </p>
                                        <p style="margin: 0 0 18px; padding: 0; font-size: 18px; font-weight: 500; color: #333333; font-family: Arial, sans-serif;">
                                            {{FECHA_EVENTO}}
                                        </p>
                                        
                                        <p style="margin: 0 0 5px; padding: 0; font-size: 12px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.5px;">
                                            Hora
                                        </p>
                                        <p style="margin: 0 0 18px; padding: 0; font-size: 18px; font-weight: 500; color: #333333; font-family: Arial, sans-serif;">
                                            {{HORA_EVENTO}}
                                        </p>
                                        
                                        <p style="margin: 0 0 5px; padding: 0; font-size: 12px; font-weight: 600; color: #1a5276; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.5px;">
                                            Lugar
                                        </p>
                                        <p style="margin: 0; padding: 0; font-size: 16px; font-weight: 500; color: #333333; font-family: Arial, sans-serif;">
                                            {{LUGAR_EVENTO}}
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Botón - Ver Invitación -->
                    <tr>
                        <td align="center" style="padding: 0 30px 35px; background-color: #ffffff;">
                            <p style="margin: 0 0 20px; padding: 0; font-size: 15px; line-height: 1.5; color: #666666; font-family: Arial, sans-serif;">
                                Haz clic para ver los detalles de tu invitación digital
                            </p>
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
                                <tr>
                                    <td align="center" style="background-color: #1a5276; border-radius: 6px;">
                                        <a href="{{LINK_INVITACION}}" style="display: inline-block; padding: 14px 40px; font-size: 16px; font-weight: 600; color: #ffffff !important; text-decoration: none; font-family: Arial, sans-serif;">
                                            Ver Mi Invitación
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Nota -->
                    <tr>
                        <td align="center" style="padding: 0 30px 35px; background-color: #ffffff;">
                            <p style="margin: 0; padding: 16px 20px; font-size: 13px; line-height: 1.5; color: #666666; font-family: Arial, sans-serif; background-color: #f8f9fa; border-radius: 6px; border-left: 4px solid #1a5276;">
                                <strong style="color: #1a5276;">Nota:</strong> Este enlace es personal e intransferible. Por favor, no lo compartas con terceros.
                            </p>
                        </td>
                    </tr>
                    
                    <!-- Footer -->
                    <tr>
                        <td align="center" style="padding: 30px; background: linear-gradient(90deg, #1a5276 0%, #00abb6 100%);">
                            <p style="margin: 0; padding: 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); font-family: Arial, sans-serif;">
                                {{NOMBRES_NOVIOS}}
                            </p>
                            <p style="margin: 15px 0 0; padding: 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); font-family: Arial, sans-serif;">
                                {{YEAR}} · Evento Institucional
                            </p>
                            <p style="margin: 12px 0 0; padding: 0; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); font-family: Arial, sans-serif;">
                                Invitaciones Digitales por 
                                <a href="https://ritmocreativo.com" style="color: #ffffff; text-decoration: underline; font-weight: 500;">Ritmo Creativo Ec</a>
                            </p>
                        </td>
                    </tr>
                    
                </table>
                
                <!-- Enlace alternativo -->
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="max-width: 600px; margin-top: 20px;">
                    <tr>
                        <td align="center" style="padding: 0 20px;">
                            <p style="margin: 0; padding: 0; font-size: 11px; line-height: 1.5; color: #999999; font-family: Arial, sans-serif;">
                                Si el botón no funciona, copia y pega este enlace en tu navegador:<br>
                                <a href="{{LINK_INVITACION}}" style="color: #1a5276; text-decoration: underline; word-break: break-all;">{{LINK_INVITACION}}</a>
                            </p>
                        </td>
                    </tr>
                </table>
                
            </td>
        </tr>
    </table>
</body>
</html>
