comentário no CSS causa problemas no javascript (solucionado) | JavaScript: programando na linguagem da web

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>

    <h1 class="titulo">Alerta!</h1>

    <p class="intro"> Um paragráfo!</p>

    <h2 class="subTitulo">Aviso!</h2>

    <p class="corpo"> Um outro paragráfo!</p>

    <script src="aula3_cap8.js"></script>

</body>
</html>

javascript:

var titulo = document.querySelector(".titulo");
var subTitulo = document.querySelector(".subTitulo");
var intro = document.querySelector(".intro");
var corpo = document.querySelector(".corpo");

titulo.classList.add("titulos");

conteudoTitulo = titulo.textContent;

// Mais algumas linhas de código js...
subTitulo.classList.add("titulos");

if(conteudoTitulo == "Alerta!"){
    intro.classList.add("mensagemImportante");
}

console.log(conteudoTitulo);

// Mais algumas linhas de código js...

if(subTitulo.textContent == "Aviso!"){
    corpo.classList.add("mensagemImportante");
}

css:

.titulos{
    color: lightcoral;
}

.mensagemImportante {
(o erro esta aqui no comentário do css)
    //alteração de apenas uma linha!
    color: orange;
}