Hola!
Ocurre que la dirección de correo electrónica no aparece como underline, a pesar de que en el CSS sí se especifica esta función.
Mi código HTML:
<section class="institucional container">
<h2 class="institucional__titulo">Institucional</h2>
<p class="institucional__descripcion">Un poco más sobre Apeperia</p>
<address class="institucional__direccion">
Calle Vergueiro, 3185 </br>
Villa Mariana, São Paulo
<article class="institucional_contacto">
<p>
<a href="+551155712751" class="institucional_contacto-telefono">+55 11 55712751</a> o
<a href="mailto:contato@apeperia.com" class="institucional_contacto-email">contato@apeperia.com</a>
</p>
</article>
</address>
<video src="img/formacion-java.mp4" class="institucional__video" controls></video>
</section>
Y mi CSS de institucional:
.institucional {
display: flex;
flex-direction: column;
align-items: center;
color: var(--fuente-ceniza-oscuro);
text-align: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
.institucional__titulo {
color: var(--fuente-ceniza-oscuro);
font-weight: 700;
font-size: 1.5rem;
font-family: var(--montserrat);
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
.institucional__descripcion {
margin-bottom: 2rem;
}
.institucional__direccion {
font-size: 1.5rem;
line-height: normal;
margin-bottom: 2rem;
}
.institucional__contacto {
font-size: 1.2rem;
line-height: 1.8;
margin-top: 2rem;
}
.institucional__contacto-telefono {
line-height: normal;
}
.institucional__contacto-email {
color: var(--fuente-ceniza-oscuro);
text-decoration: underline;
display: block;
}
.institucional__video {
width: 100vw;
}