.reviStarsContainer {
    --star-color: #dedede;
    --star-background: #f4c318;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    margin: 2px 0px 5px 0px;
    height: 20px;

    /* Asegura que el contenedor vacío tenga altura */
}

.reviStarsContainer .reviStars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 25px;
    font-family: Times;
    line-height: 1;
}

.reviStarsContainer .reviStars::before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: -3px;
    background: -webkit-gradient(linear, left top, right top, from(var(--star-background)), to(var(--star-color)));
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reviStarsContainer .reviStarsBlock {
    font-size: 11px;
    font-family: roboto;
    margin-left: 6px;
    margin-top: 0px;
    color: var(--secundary);
}