<!DOCTYPE html>
<html>

<head>
    <title>{{ correoTitulo }}</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #444444;
        }

        .header {
            background-color: #eeeeee;
            padding: 20px;
        }

        .logo {
            max-width: 200px;
            height: auto;
            margin: 0 auto;
            display: block;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        table th,
        table td {
            padding: 10px;
            border: 1px solid #cccccc;
            text-align: left;
        }

        table th {
            background-color: #eeeeee;
        }
    </style>
</head>

<body>
    <!-- Cabecera -->
    <div class="header">
        <img src="https://yoaporto.cl/assets/images/logo_sils.png" alt="Logo de la empresa" class="logo">
    </div>

    <!-- Contenido principal -->
    <div class="content">
        <p>Hola {{ correoNombre }},</p>
        <p>Este es un correo electrónico de ejemplo que contiene algunos datos dinámicos:</p>

        <!-- Tabla con datos dinámicos -->
        <table table width="600" border="1" cellspacing="0" cellpadding="20" bordercolor="#999999">
            <thead>
                <tr>
                    <th>Dato</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Nombre</td>
                    <td>{{ correoNombre }}</td>
                </tr>
                <tr>
                    <td>Edad</td>
                    <td>{{ correoEdad }}</td>
                </tr>
                <tr>
                    <td>Correo electrónico</td>
                    <td>{{ correoCorreo }}</td>
                </tr>
            </tbody>
        </table>

        <p>Gracias por utilizar nuestro servicio,</p>
        <p>El equipo de ejemplo</p>
    </div>

    <!-- Pie de página -->
    <div class="footer">
        <p>Este correo electrónico fue enviado automáticamente. Por favor, no responder.</p>
    </div>
</body>

</html>