/* ============================================================================
   COMPONENTES › CONTACTO (link de email)
   ----------------------------------------------------------------------------
   Un solo elemento, pero se separa igual: el día que sumes un formulario de
   contacto, este es el archivo donde va y no vas a tener que buscar dónde
   ponerlo.
   ============================================================================ */

.mail {
  display: inline-block;
  margin-top: 22px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--color-acento);
  text-decoration: none;

  /* El borde transparente RESERVA el espacio del subrayado desde el principio.
     Sin esto, al hacer hover aparecerían 2px de golpe y el texto saltaría. */
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;

  transition: border-color var(--transicion),
              color var(--transicion);

  word-break: break-word;                         /* no desborda en pantallas chicas */
}

.mail:hover {
  border-bottom-color: var(--color-acento);
}