.card{width:78px;height:120px;border-radius:9px;position:relative;flex:none}
.card.img{background-color:var(--card-tint,transparent);background-blend-mode:multiply;background-size:100% 100%;background-repeat:no-repeat;filter:var(--card-filter,brightness(1)) drop-shadow(0 2px 2px rgba(0,0,0,.35))}
/* Dorso: marco claro, trama de rombos, y un rombo con doble borde en el centro */
.card.back{background:var(--back-a,#534ab7);border:3px solid #fbfaf4;box-shadow:0 2px 0 rgba(0,0,0,.25);overflow:hidden}
.card.back::before{content:"";position:absolute;inset:2px;border:1.5px solid var(--back-c,#ece9ff);border-radius:5px;background-image:repeating-linear-gradient(45deg,transparent 0 5px,var(--back-b,rgba(255,255,255,.3)) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,var(--back-b,rgba(255,255,255,.3)) 5px 6px)}
.card.back::after{content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);background:var(--back-a,#534ab7);border:2px solid var(--back-c,#ece9ff);box-shadow:0 0 0 3px var(--back-a,#534ab7),0 0 0 4.5px var(--back-c,#ece9ff)}
.card.back i{position:absolute;z-index:2;left:50%;top:50%;width:27%;aspect-ratio:80.47/111.5;transform:translate(-50%,-50%);background:var(--back-c,#ece9ff);-webkit-mask:url(/logo-marca.svg) center/contain no-repeat;mask:url(/logo-marca.svg) center/contain no-repeat}
.card.sm{width:50px;height:76px}
.card.xs{width:26px;height:40px;border-width:2px;border-radius:5px}
.card.xs::before{inset:1px;border-width:1px}
.card.xs::after{border-width:1px;box-shadow:0 0 0 1px var(--back-a,#534ab7),0 0 0 2px var(--back-c,#ece9ff)}