Blockquote's

Boa noite!

Ao inserir as informações dessa ultima aula, ao passar o mouse em cima do primeiro "blockquote", as aspas do segundo não ficam "escuras". Anexei as imagens no "imgur" para ficar mais fácil de entender:

Blockquote 1: http://imgur.com/a/aqUxJ Blockquete 2 (que ficou normal): http://imgur.com/a/Od48O

<div class="corpo-principal">

                <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

                <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de <strong>acessibilidade, responsividade e web semântica</strong>, sem descuidar da qualidade de código.</p>

                <h2>Como trabalho</h2>

                <blockquote class="citacao-recomendacoes fiat">
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite>José Souza, Fiat</cite>
                </blockquote>

                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

                <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

                <h2>Experiência</h2>

                <blockquote class="citacao-recomendacoes petrobras">
                    <p>João domina as tecnologias como ninguém.  Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                    <cite>Manoel Santos, Petrobrás</cite>
                </blockquote>

                <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com.br">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

                <p>Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

                <h2>Comunidade</h2>

                <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portifolio.html">diversas palestras</a> e mantenho <a href="blog.html">um blog</a>.</p>

            </div>

.citacao-recomendacoes {
    background-color: #D9E5E3;
    border: .5rem solid #C2CCCA;
    width: 30ch;
    box-sizing: border-box;
    margin: 1em 2em;
    padding: 1em;
}
.citacao-recomendacoes > p {
    position: relative;
}
.citacao-recomendacoes::before {
    content: '“' ;
    font-size: 10em;
    color: #BBB;
    position: absolute;
    line-height: .8;
}
.citacao-recomendacoes:nth-of-type(even) {
    float: left;
}
.citacao-recomendacoes:nth-of-type(even):hover,
.citacao-recomendacoes:nth-of-type(even):focus {
    box-shadow: 0 0 0px 9999px rgba(0,0,0,.8);
    transform: scale(1.2) rotate(-5deg);
}
.citacao-recomendacoes:nth-of-type(odd) {
    float: right;
}
.citacao-recomendacoes:nth-of-type(odd):hover,
.citacao-recomendacoes:nth-of-type(odd):focus {
    transform: scale(1.2) rotate(5deg);
    box-shadow: 0 0 0 9999px rgba(0,0,0,.8);
}
cite {
    font-style: italic;
    float: right;
}
strong{
    font-weight: bold;
}
em {
    font-style: italic;
}
.corpo-principal > p::first-letter {
    font-size: 200%;
    color: #3C1D3D;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    margin-right: .2ch;
    line-height: 1;
}