P-Card component from PrimeNG simply won't accept CSS changes

I need to dynamically change a p-card component in my APP. But it's simply not working... Heres what I've tried so far :

<div class="card-image-comp">
            <p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
                <img src="../../../assets/icons/person.png">
            </p-card>
            <p>Paciente</p>
</div>
<div>
            <p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
                <img src="../../../assets/icons/estetoscopio.png">
            </p-card>
            <p>Profissional de Saúde</p>
</div>
...
My function:
    selectProfileType(numCard: number){
        this.profileCardSelected = numCard;
    }

This part is working just fine, the issue is that the component is not obeying it's new class.

I've tried the normal stuff:

.activeCard {
  background-color: black;
}

... 
div {
  .activeCard {
    background-color: black;
  }
}

... 
.personalCardComp {
  .activeCard {
    background-color: black;
  }
}

... and even some nasty stuff
:host {
  ::ng-deep .activeCard {
    background-color: black;
  }
}

...
:host {
  ::ng-deep p-card.p-element.activeCard {
    background-color: black;
  }
}

As I said before, the class is applied correctly, but the card only changes when I apply the css to the div children of the p-card...

Basically if I could apply the class to this div children It would work just fine... Is there a way to do so? Apply the class to p-card but the div children obbey...