No reconoce el color de un enlace <a> dentro de <p> al hacer :hover fuera de <a>

[kahlito]

Buenas.

Estoy intentando lograr que al pasar el ratón por encima con :hover el color del texto dentro de <p> como enlace <a> tenga un color determinado pero por mas pruebas que hago siempre sale en blanco tanto el fondo como el texto y solo si me posiciono dentro del texto sale en color azul.

Código HTML:

<!-- Introduction -->
        <section id="inicio">
            <article class="header">                        
                <h1><span>Título</span><br>
                    Más contenido del título <br> 
                    Última frase del título.
                </h1>               
                <p><a href="contacto" title="Contácteme" class="boton-contactar"> Contácteme</a></p>                
            </article>              
        </section>
 

Código CSS:

:root {
--azul-marino-oscuro: #354355;
}
 
#inicio p{
    background: var(--azul-marino-oscuro);
    color: white;       
    margin-top: 1rem;   
    border-radius:10px; 
    font-family: Tahoma, Verdana, Segoe, sans-serif; 
    font-weight: bold;  
    text-align: center;
    text-transform: uppercase;
    width: 36%; 
    padding: 1rem;
    transition: all 400ms ease; 
}
 
#inicio p:hover{    
    background-color: white;
    color: var(--azul-marino-oscuro) !important;
    cursor: pointer;        
}
 
#inicio p > a.boton-contactar:hover{    
    color: var(--azul-marino-oscuro) !important;    
}
 

¿Como puedo hacer para que salga dicho color --azul-marino-oscuro al pasar el ratón en :hover sobre el blanco de <p> sin tocar <a>? Es decir que incluya todo el fondo en el :hover y no solo el texto que hay en <a> para reconocer el nuevo color.

Saludos.