Meus style.css não pega totalmente no chrome do mobile porém no firefox está normal.

Bom dia!

Estou com um problema e gostaria de sua ajuda.

Desenvolvi uma página, o meu style.css está pegando normalmente no desktop em ambos navegadores
e inclusive quando ativo a opção mobile no navegador chrome está normal.
Eu e o cliente acessamos a página pelo smartphone, no firefox está normal porém no chrome de ambos celulares as cores não pegam.

No style.css as cores são definidas com variaveis que seria:

:root {
--corPrimaria: #ff9136;
--corSombra1: #d26e35;
--corSecundaria: #9e3f98;
--corSombra2: #672a66;
--corDestaque: #9e3f98;
--corPadrao: #fff;
--corFacebook: #4168b3;
--corTextFace: #171717;
--corBtn: #e4d337;
--corBtn2: #cebf32;
--corSombraBtn: #CAA007;
}

agora vou postar uma das partes do meu projeto que não está pegando o estilo.
um de cada vez, vamos pelo html primeiro:


<section class="introduction">
<div class="container">
<div class="grid-6">
<h6>A combinação perfeita para uma pele mais bonita e saudável!</h6>

<p>O <span class="destaque">DERMAVYN</span> é um produto que foi pensado especialmente para quem sofre com acnes,
cravos e manchas na pele. A sua formula contém vitaminas e nutrientes que são muito importantes para
o bom funcionamento do organismo agindo de dentro para fora, deixando a pele mais forte e saudável.

<div class="beneficios">
<img src="./img/beneficios.png" alt="">
</div>
<div class="botao desce">
<a href="#">
<div class="titleBtn">
<h3>Experimente</h3>
<h4>DERMAVYN HOJE</h4>
</div>
</a>
</div>
</div>

<div class="grid-6 modelo">
<div class="modelo-img"></div>
</div>

</div>
</section>

Uma das partes que deveria pegar seria:

.introduction h6 {
margin: 20px auto 10px auto;
background: linear-gradient(45deg, var(--corSecundaria), var(--corPrimaria));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
}

Como podem ver no começo do parágrafo temos um SPAN com uma classe, o qual o mesmo também não está pegando o estilo que seria:

.destaque {
color: var(--corDestaque);
font-style: italic;
}


Resumindo: Alguém sabe o que está acontecendo?