/* SOYESE · Cinematic Collectible: carta vertical premium (personaje protagonista, efectos discretos). */
.pcard { --w: 320px; --a: #ffb44d; --rx: 0deg; --ry: 0deg; --mx: .5; --my: .4; position: relative; width: min(var(--w), 100%); aspect-ratio: 2/3; border-radius: 20px; padding: 3px; isolation: isolate; color: #fff; font-family: var(--head, system-ui);
  background: linear-gradient(145deg, #fff1c9, #b9852f 30%, #ffe9a8 52%, #8a5d17 78%, #f4d58a); box-shadow: 0 28px 70px rgba(10,5,40,.55), 0 0 0 1px rgba(0,0,0,.4);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .14s ease-out; will-change: transform; }
.pc-in { position: relative; height: 100%; border-radius: 17px; overflow: hidden; background: #0d0a1f; }
.pc-art { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 50% 24%; transform: translate(calc((var(--mx) - .5) * -14px), calc((var(--my) - .4) * -10px)); transition: transform .14s ease-out; }
.pc-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,25,.55) 0, rgba(8,5,25,0) 22%, rgba(8,5,25,0) 52%, rgba(8,5,25,.82) 78%, rgba(8,5,25,.96) 100%); pointer-events: none; }
.pc-top { position: absolute; z-index: 3; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; font: 800 .62rem var(--head, system-ui); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.pc-sigil { display: inline-flex; align-items: center; gap: 6px; color: var(--a); } .pc-sigil svg { width: 18px; height: 18px; fill: none; stroke: var(--a); stroke-width: 1.8; filter: drop-shadow(0 0 6px var(--a)); }
.pc-brand { opacity: .85; }
.pc-info { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 12px; text-align: center; }
.pc-name { margin: 0; font: 900 clamp(1.45rem, 7vw, 1.9rem) var(--head, system-ui); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,.8); line-height: 1.05; }
.pc-sub { margin: 4px 0 10px; font: 600 .78rem system-ui; color: var(--a); letter-spacing: .04em; }
.pc-attrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pc-attr { display: grid; gap: 4px; font: 700 .6rem system-ui; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.pc-attr i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; } .pc-attr i b { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--a), #fff3c4); border-radius: 4px; }
.pc-attr em { font-style: normal; color: #fff; font-size: .72rem; }
.pc-foil { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light; opacity: .55; border-radius: 17px;
  background: linear-gradient(115deg, transparent 20%, rgba(255,122,217,.55) 34%, rgba(255,228,94,.5) 44%, rgba(109,255,210,.5) 54%, rgba(108,184,255,.55) 64%, transparent 78%); background-size: 260% 260%; background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%); }
.pc-shine { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 17px; background: radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.22), transparent 42%); }
.pc-sp { position: absolute; z-index: 2; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--a); opacity: .8; animation: pcfloat 5s ease-in-out infinite; }
.pc-sp:nth-of-type(1) { left: 14%; top: 34%; } .pc-sp:nth-of-type(2) { right: 12%; top: 52%; animation-delay: -1.7s; } .pc-sp:nth-of-type(3) { left: 24%; top: 62%; animation-delay: -3.1s; }
@keyframes pcfloat { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-14px); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .pcard, .pc-art { transition: none; } .pc-sp { animation: none; } }