.carta__card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;

    cursor: pointer;
    margin-inline: auto;
    min-width: var(--category-card-min-width, 150px);
    max-width: 200px;
}

.carta__img {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}

.carta__img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    scale: 1;
    transition: scale .3s linear;
}

.carta__img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0px 0px 400px var(--categoryCardBgColorHoverDifuminado);
    opacity: 0;
    transition: opacity .3s linear;
}

.carta__informative .button--build{
    display: none;
}

.carta__informative h3 {
    text-align: center;
    /* "Relleno" del editor de Categorías (config.chipFill). En este estilo el nombre va debajo del
       círculo, sin fondo: sin relleno elegido las dos variables quedan en su valor neutro y la
       tarjeta se ve exactamente igual que siempre. */
    background-color: var(--category-card-chip-bg, transparent);
    padding: var(--category-card-chip-padding, 0);
    border-radius: var(--category-card-chip-radius, 0);
}

@media screen and (min-width: 905px){
    .carta__card{
        min-width: var(--category-card-min-width, 200px);
        max-width: 225px;
    }

    .carta__img {
        width: 200px;
        height: 200px;
    }
}

@media screen and (min-width: 1240px){
    .carta__img:hover img {
        scale: 1.05;
    }

    .carta__img:hover::after {
        opacity: 1;
    }
}