/* =========================================================
   [REDISEÑO] CARTAS SUELTAS · efecto holo / foil y sección /cartas/
   Lo usan la tienda (/cartas/ y la ficha de una carta) y el panel (vista previa).
   El efecto lo mueve assets/js/pages/cartas.js con --mx --my (posición) --rx --ry (inclinación) --o (intensidad).
   Efectos: fx-normal (reflejo suave) · fx-holo (arcoíris) · fx-brillo (arcoíris con destellos) · fx-oro (foil dorado)
   ========================================================= */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

.tcg-card{--rx:0deg;--ry:0deg;--o:0;position:relative;display:block;aspect-ratio:63/88;border-radius:4.6%/3.3%;overflow:hidden;background:#15161a;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 16px -6px rgba(0,0,0,.25);isolation:isolate;-webkit-tap-highlight-color:transparent}
.tcg-card.on{transition:box-shadow .3s;box-shadow:0 2px 4px rgba(0,0,0,.15),0 18px 40px -12px rgba(0,0,0,.45)}
.tcg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tcg-shine,.tcg-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.tcg-glare{z-index:3;opacity:var(--o);transition:opacity .35s;mix-blend-mode:overlay;
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.75) 0%,rgba(255,255,255,.25) 22%,rgba(0,0,0,.35) 90%)}
.tcg-shine{z-index:2;opacity:0;transition:opacity .35s;mix-blend-mode:color-dodge}
.fx-normal .tcg-shine{display:none}
.fx-holo .tcg-shine{opacity:calc(var(--o) * .7);filter:brightness(.5) contrast(1.8) saturate(1.4);
  background:repeating-linear-gradient(110deg,#f80e35 0%,#eedf10 5%,#21e985 10%,#0dbde9 15%,#c929f1 20%,#f80e35 25%),
             repeating-linear-gradient(-45deg,rgba(14,21,46,.6) 0%,rgba(143,163,163,.5) 3.8%,rgba(143,193,193,.6) 4.5%,rgba(143,163,163,.5) 5.2%,rgba(14,21,46,.6) 10%);
  background-size:400% 400%,300% 300%;background-blend-mode:overlay;background-position:var(--mx) var(--my),calc(100% - var(--mx)) calc(100% - var(--my))}
.fx-brillo .tcg-shine{opacity:calc(var(--o) * .8);filter:brightness(.55) contrast(1.7) saturate(1.5);
  background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px) 0 0/23px 27px,
             radial-gradient(circle at 70% 60%,#fff 0 1.2px,transparent 2.4px) 0 0/31px 19px,
             repeating-linear-gradient(125deg,#ff4d6d 0%,#ffd84d 7%,#4dff9f 14%,#4dd2ff 21%,#b44dff 28%,#ff4d6d 35%);
  background-size:23px 27px,31px 19px,350% 350%;background-blend-mode:screen,screen,normal;
  background-position:calc(var(--mx) * .4) calc(var(--my) * .4),calc(var(--mx) * -.3) calc(var(--my) * .3),var(--mx) var(--my)}
.fx-oro .tcg-shine{opacity:calc(var(--o) * .7);mix-blend-mode:color-dodge;filter:brightness(.6) contrast(1.5);
  background:repeating-linear-gradient(60deg,rgba(255,200,60,0) 0%,rgba(255,224,130,.95) 4%,rgba(255,170,30,0) 9%),
             repeating-linear-gradient(-30deg,rgba(255,255,255,0) 0 3px,rgba(255,236,180,.45) 3px 4px),
             linear-gradient(135deg,#7a5310,#f7d774 45%,#a8771c 70%,#ffe9a8);
  background-size:260% 260%,auto,200% 200%;background-blend-mode:screen,overlay,normal;background-position:var(--mx) var(--my),0 0,var(--mx) var(--my)}
/* En celular (sin puntero) el brillo se mueve solo, despacio */
@keyframes tcgIdle{0%{--mx:15%;--my:20%}50%{--mx:85%;--my:75%}100%{--mx:15%;--my:20%}}
@media (hover:none){
  .tcg-card:not(.on):is(.fx-holo,.fx-brillo,.fx-oro){--o:.55;animation:tcgIdle 7s ease-in-out infinite}
  .tcg-card:not(.on).fx-normal{--o:0}
}
@media (prefers-reduced-motion:reduce){.tcg-card{animation:none!important;transition:none}}

.tcg-grade{position:absolute;z-index:4;top:6px;left:6px;padding:3px 8px;border-radius:6px;background:#111;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;border:1px solid rgba(255,255,255,.35)}
.tcg-sold{position:absolute;z-index:4;inset:auto 0 12px;margin:auto;width:max-content;padding:4px 12px;border-radius:99px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;font-weight:600}
.tcg-item.soldout .tcg-card img{filter:grayscale(.85) brightness(.85)}

/* ---------- Página /cartas/ ---------- */
.tcg-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.tcg-hero h1{margin:4px 0 6px}
.tcg-hero p{margin:0;color:var(--muted);max-width:560px}
.tcg-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tcg-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;text-decoration:none}
.tcg-tab small{font-weight:500;color:var(--muted)}
.tcg-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tcg-tab.on small{color:rgba(255,255,255,.7)}
.tcg-filtros{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tcg-filtros input,.tcg-filtros select{width:100%;min-width:0;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.tcg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:13px;color:var(--muted)}
.tcg-chips a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--brand-50);color:var(--brand);font-weight:600;text-decoration:none}
.tcg-chips label{display:inline-flex;align-items:center;gap:6px;margin-left:auto;cursor:pointer}
.tcg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 18px}
.tcg-item{display:flex;flex-direction:column;gap:10px;min-width:0}
.tcg-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.tcg-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.tcg-rz{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tcg-rz.r-holo{background:linear-gradient(90deg,#ffe0ea,#e0f7ff,#efe0ff);color:#5a2a8a}
.tcg-rz.r-brillo{background:linear-gradient(90deg,#ffd6e0,#fff4c2,#d2ffe6,#d6efff,#ead6ff);color:#4a2470}
.tcg-rz.r-oro{background:linear-gradient(90deg,#f7e3a1,#e7c25c);color:#5a3e05}
.tcg-cond{flex:none;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;border:1px solid var(--border);color:var(--text)}
.tcg-title{font-weight:700;font-size:15px;line-height:1.3;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.tcg-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcg-item .price-row{margin-top:2px}
.tcg-item .card-cta{margin-top:auto}
.tcg-vacio{padding:48px 16px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:18px}
.tcg-vacio b{display:block;color:var(--text);font-size:18px;margin-bottom:6px}
@media (max-width:900px){.tcg-filtros{grid-template-columns:repeat(2,minmax(0,1fr))}.tcg-filtros .f-q{grid-column:1/-1}}
@media (max-width:520px){
  .tcg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.tcg-title{font-size:14px}.tcg-tab{padding:8px 13px;font-size:13.5px}
  .tcg-hero{gap:10px;margin-bottom:12px}.tcg-hero h1{font-size:26px;line-height:1.15}.tcg-hero p{font-size:13.5px}
  .tcg-filtros{gap:8px}.tcg-filtros input,.tcg-filtros select{height:40px;font-size:13.5px;padding:0 10px}
  .tcg-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:0 16px}.tcg-chips::-webkit-scrollbar{display:none}
  .tcg-chips>*{flex:none}.tcg-chips label{margin-left:8px}
}

/* ---------- Ficha de una carta ---------- */
.tcg-pdp{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0}
.tcg-stage{width:min(100%,400px);perspective:1200px}
.tcg-flip{position:relative;transition:transform .7s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.tcg-flip.vuelta{transform:rotateY(180deg)}
.tcg-flip .tcg-card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tcg-flip .tcg-back{position:absolute;inset:0;transform:rotateY(180deg)}
.tcg-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tcg-tools button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.tcg-hint{font-size:12.5px;color:var(--muted);text-align:center;margin:0}
.p-chip.tcg-chip-fx{background:linear-gradient(90deg,#ffe0ea,#e0f7ff,#efe0ff);color:#4a2470;border-color:transparent}
.p-title .tcg-num{font-weight:600;color:var(--muted);font-size:.7em;white-space:nowrap}
.tcg-linea{margin:-4px 0 10px;color:var(--muted);font-size:14.5px}
@media (max-width:520px){.tcg-stage{width:min(76vw,330px)}}