CSS en email: por qué falla y cómo arreglarlo

1. Los botones salen con esquinas rectas

Causa. Outlook para Windows no reconoce border-radius; la ficha remite al elemento VML roundrect como alternativa. Arreglo. Haz que el botón sea una celda de tabla con color de fondo y un enlace inline-block con el relleno. Sin esquinas redondas el botón sigue siendo legible y clicable, y el padding funciona porque va dentro del enlace. Si la marca exige el redondeo también en Outlook, la ficha cita buttons.cm para generar el VML.

<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td bgcolor="#d9480f" style="background-color: #d9480f; border-radius: 8px;">
      <a href="https://ejemplo.com/pedido/2210"
         style="display: inline-block; padding: 14px 26px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color: #ffffff; text-decoration: none;">
        Ver mi pedido
      </a>
    </td>
  </tr>
</table>

2. La cabecera pierde su imagen de fondo

Causa. background-image no es compatible en Outlook para Windows y es parcial en Yahoo, que descarta la coma entre varios valores. La ficha añade que Gmail puede eliminar el atributo style completo cuando aparece una URL de imagen. Arreglo. Combina el atributo background, el estilo y un bloque VML visible solo para Outlook, y fija siempre un bgcolor que mantenga legible el texto si la imagen no carga.

<td background="https://ejemplo.com/img/cabecera.jpg" bgcolor="#1d3557" width="600" valign="top"
    style="background-image: url('https://ejemplo.com/img/cabecera.jpg'); background-color: #1d3557;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:260px;">
    <v:fill type="tile" src="https://ejemplo.com/img/cabecera.jpg" color="#1d3557" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding: 36px 28px; color: #ffffff;">Título sobre la imagen</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

3. Las columnas no se apilan en el móvil

Causa. Las media queries son «no» en Outlook para Windows y parciales en el resto: la ficha dice que en las apps de Gmail no valen con cuentas que no son de Google, que Outlook elimina las anidadas y que Yahoo se limita a screen y a condiciones de ancho y alto. Arreglo. Diseña la versión estrecha como válida por defecto y usa !important para apilar donde la media query sí se lee; la ficha de !important avisa de que en Gmail solo se admite en minúsculas.

<style>
  @media screen and (max-width: 600px) {
    .col { display: block !important; width: 100% !important; }
  }
</style>

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td class="col" width="50%" valign="top" style="padding: 12px;">Columna izquierda</td>
    <td class="col" width="50%" valign="top" style="padding: 12px;">Columna derecha</td>
  </tr>
</table>

4. La fuente de marca no aparece

Causa. @font-face es compatible en Apple Mail y Samsung Email, parcial en Outlook para Windows (la declaración se lee pero las fuentes remotas se ignoran) y no compatible en Gmail, Outlook.com ni Yahoo. Arreglo. Escribe la pila pensando primero en la sustituta; la fuente de marca es un extra para quien pueda verla.

font-family: 'Nunito Sans', 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;

5. Los espacios no coinciden con el diseño

Causa. margin figura como parcial en casi todos los clientes (los valores negativos no se admiten y, en Outlook de escritorio, auto tampoco). padding es fiable en celdas de tabla. Arreglo. Pon el espacio en el relleno de la celda contenedora y anula el margen de los títulos y párrafos.

<!-- en lugar de margin en el título -->
<td style="padding-bottom: 20px;">
  <h1 style="margin: 0; font-size: 26px; line-height: 32px;">Novedades de octubre</h1>
</td>

6. El contenedor se ensancha en Outlook

Causa. En Outlook para Windows max-width solo funciona sobre elementos table, y width no se admite en div, p ni img mediante CSS. Arreglo. Una «tabla fantasma» dentro de un comentario condicional da a Outlook una tabla de ancho fijo, y el resto de clientes leen el div con max-width. En las imágenes, usa el atributo HTML width en píxeles: la ficha lo da como compatible en casi todos los clientes y, en Outlook para Windows, como parcial, con errores en anchos porcentuales y en pantallas de 120 ppp.

<!--[if mso]>
<table role="presentation" align="center" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
  <!-- contenido -->
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

7. Flexbox o grid se rompen

Causa. Según las fichas de display:flex y display:grid, ambos funcionan en Gmail web, Outlook.com, Apple Mail y Yahoo, son parciales en las apps de Gmail y no compatibles en Outlook para Windows. Arreglo. Si Outlook para Windows está entre tus lectores, maqueta con tablas, como en el ejemplo de columnas, y deja flex y grid para proyectos en los que puedas medir qué clientes usa tu lista.

8. El interlineado cambia en Outlook

Causa. La ficha de line-height señala que las unidades px y em se comportan de forma irregular en Outlook para Windows y recomienda mso-line-height-rule: exactly. Arreglo. Define line-height en píxeles junto con esa regla en la celda que contiene el texto. Evita rem, que no es compatible en Outlook para Windows ni en Yahoo.

9. Los estilos del bloque style no llegan

Causa. La ficha del style es parcial en Gmail (web, iOS y Android), no compatible en Gmail web móvil y con un tope de 16 KB en el web de escritorio, y exige en Outlook para Windows declarar el elemento antes de usar sus reglas. Arreglo. Los estilos de los que depende la lectura se copian en línea al compilar. MJML lo hace con mj-style inline="inline", según su documentación.

<mjml>
  <mj-head>
    <mj-style inline="inline">
      .enlace-pie a { color: #555555 !important; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="enlace-pie">Texto del pie</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

10. Sombras y efectos de hover que no aparecen

Causa. box-shadow figura como compatible en Outlook.com, Outlook para Mac y móvil, Apple Mail y Samsung Email, parcial en las apps de Gmail y no compatible en Gmail web, Outlook para Windows ni Yahoo; :hover falla en Gmail para iOS y en Outlook para Windows. Arreglo. No hagas depender del efecto ningún dato: un borde fino sustituye a la sombra y el enlace debe verse como tal sin cambio al pasar el ratón.

Cuando el color cambia solo

Si el problema no es la maquetación sino los colores invertidos en modo oscuro, lee el artículo sobre el modo oscuro. Para comprobar un arreglo en varios clientes, la guía de compatibilidad de clientes propone una matriz mínima, y si prefieres que una herramienta genere este código, compara MJML y React Email.