.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;
}

/* --category-card-img-radius: "Redondeo de esquinas" del editor de Categorías (0 a 50 %). Sin
   valor queda en 50 %, el círculo de siempre. */
.carta__img {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: var(--category-card-img-radius, 50%);
    overflow: hidden;
}

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

/* Velo del hover: el "Color de la tarjeta" (--categoryCardBgColor) al 40% de opacidad sobre la
   imagen, con la misma forma que ella. */
.carta__img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--category-card-img-radius, 50%);
    background-color: color-mix(in srgb, var(--categoryCardBgColor) 40%, transparent);
    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;
    }
}

/* Al pasar el mouse por la tarjeta (en cualquier pantalla con mouse, antes sólo desde 1240px): la
   imagen crece un poco y se pinta con el velo. En pantallas táctiles no hay hover. */
@media (hover: hover){
    .carta__card:hover .carta__img img {
        scale: 1.05;
    }

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