/* Cara a cara de cartas (antes solo en por-que-opoteca.html). Compartido con index.html.
   Todo va bajo .tcg para no pisar clases genéricas de la portada (.op, .nota, .vs…). */
.tcg .duelo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);gap:28px;align-items:center;margin-top:36px}
@media(max-width:900px){.tcg .duelo{grid-template-columns:1fr;gap:10px;justify-items:center;margin-top:40px}}
.tcg .lado{display:grid;gap:14px;justify-items:center;min-width:0}
.tcg .quien{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sobre-noche-2)}
.tcg .quien.nuestra{color:var(--oro-claro)}
.tcg .lado-otra .mazo{rotate:-3deg;filter:saturate(.5) brightness(.93)}
.tcg .vs{display:grid;justify-items:center;gap:4px}
.tcg .vs .m{width:84px;animation:dd-flota 2.4s steps(2) infinite}
.tcg .vs .mira{position:relative;display:block;height:134px}
.tcg .vs .mira img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.tcg .vs .mira[data-m="c"] .fr,.tcg .vs .mira[data-m="i"] .ld,.tcg .vs .mira[data-m="d"] .ld{opacity:1}
.tcg .vs .mira[data-m="d"] .ld{transform:scaleX(-1)}
.tcg .vs b{font-size:48px;line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--oro-claro);text-shadow:0 0 22px hsl(48 100% 60% / .45)}
.tcg .vs span{font-family:var(--mano);font-weight:700;font-size:22px;color:hsl(48 60% 80%);rotate:-4deg}
@media(max-width:900px){.tcg .vs{grid-auto-flow:column;align-items:center;gap:12px;margin:6px 0 4px}.tcg .vs .m{width:56px}.tcg .vs b{font-size:36px}}
@keyframes dd-flota{50%{transform:translateY(-4px)}}

.tcg .nota{display:flex;align-items:flex-start;gap:8px;margin-top:-6px;font-family:var(--mano);font-weight:700;font-size:25px;line-height:1.05;color:hsl(48 60% 80%);max-width:330px;min-height:2.2em;transition:opacity .25s}
.tcg .nota img{width:60px;flex:none;margin-top:-18px;transform:rotate(-58deg)}
.tcg .nota.izq{color:hsl(0 0% 76%)}
.tcg .nota.izq img{transform:scaleX(-1) rotate(-58deg);filter:grayscale(1) brightness(1.8)}
.tcg .nota.cambia{opacity:0}
.tcg .pasar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.tcg .pasar .num{font-weight:700;color:var(--sobre-noche-2)}
.tcg .pista-mazo{font-size:13.5px;margin-top:-4px;color:var(--sobre-noche-2);text-align:center;max-width:36ch}
.tcg .neg{transition:color .25s}
body.con-ayuda-neg.tcg .neg,body.con-ayuda-neg .tcg .neg{text-transform:uppercase;font-weight:900;padding:0 .12em;border-radius:.25em .6em .35em .7em / .7em .35em .6em .25em;
  background:linear-gradient(93deg,hsl(50 100% 56% / .15),hsl(48 100% 56% / .6) 30%,hsl(47 100% 56% / .55) 70%,hsl(50 100% 56% / .15)) 0 70%/100% 60% no-repeat}
.tcg .controles{display:flex;align-items:center;gap:14px;padding:6px 8px 6px 6px;border-radius:99px;background:hsl(0 0% 100% / .07);box-shadow:inset 0 0 0 1px hsl(0 0% 100% / .1)}
.tcg .btn-sig{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:8px 12px 8px 14px;border-radius:99px;background:var(--blanco);color:var(--pri);font:800 14px var(--font);font-variant-numeric:tabular-nums}
.tcg .btn-sig:hover{background:hsl(150 20% 94%)}.tcg .btn-sig .num{color:var(--pri)}.tcg .btn-sig .ico{width:16px;height:16px}
.tcg .controles .sep{width:1px;height:20px;background:hsl(0 0% 100% / .15)}
.tcg .controles .ayuda-neg{font-size:13.5px}
.tcg .info{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid hsl(0 0% 100% / .45);font:italic 800 12px/1 Georgia,serif;color:var(--sobre-noche);cursor:help}
.tcg .info-tip{position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 4px;width:260px;padding:10px 12px;border-radius:10px;background:var(--card);color:var(--fg);font:500 13px/1.45 var(--font);box-shadow:0 12px 30px -10px hsl(0 0% 0% / .5);opacity:0;pointer-events:none;transition:opacity .15s,translate .15s;z-index:5}
.tcg .info:hover .info-tip,.tcg .info:focus .info-tip{opacity:1;translate:-50% 0}
.tcg .ayuda-neg{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--sobre-noche);cursor:pointer;user-select:none}
.tcg .ayuda-neg input{position:absolute;opacity:0;pointer-events:none}
.tcg .ayuda-neg .sw{position:relative;width:38px;height:22px;border-radius:99px;background:hsl(150 10% 35%);transition:background .2s}
.tcg .ayuda-neg .sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:translate .2s}
.tcg .ayuda-neg input:checked+.sw{background:var(--s3)}.tcg .ayuda-neg input:checked+.sw::after{translate:16px 0}
.tcg .ayuda-neg input:focus-visible+.sw{outline:2px solid var(--marcador);outline-offset:2px}
/* ===== Cartas coleccionables (piezas de la landing) ===== */
.tcg .mazo-zona{position:relative;display:grid;justify-items:center}
.tcg .mazo-zona::before{content:"";position:absolute;left:50%;top:-12%;width:150%;height:125%;translate:-50% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 45% 55% at 50% 45%,hsl(52 90% 75% / .16),transparent 70%)}
.tcg .mazo-zona::after{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:40px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,hsl(0 0% 0% / .55),transparent 70%);filter:blur(4px)}
.tcg .mazo{position:relative;width:min(410px,84vw);aspect-ratio:63/88;perspective:1800px;margin:10px 30px 30px 0}
.tcg .lado-otra .mazo{width:min(370px,80vw);margin:10px 0 24px}
.tcg .carta-tcg{box-sizing:border-box;position:absolute;inset:0;display:block;transform-style:preserve-3d;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .55s var(--ease);outline:none}
.tcg .mazo .carta-tcg{cursor:grab}
.tcg .carta-tcg.arrastrando{transition:none;cursor:grabbing}
.tcg .carta-tcg:not(.arriba){pointer-events:none}
.tcg .carta-tcg:focus-visible .cara{outline:3px solid var(--s3);outline-offset:4px}
.tcg .tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out}
.tcg .giro{position:absolute;inset:0;transform-style:preserve-3d}
.tcg .cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:9px;display:flex;
  background:linear-gradient(135deg,hsl(203 8% 80%),var(--plata-claro) 35%,var(--plata) 55%,hsl(200 20% 93%) 80%,hsl(203 8% 70%));
  box-shadow:0 2px 3px hsl(151 40% 5% / .15),0 24px 44px -16px hsl(151 40% 5% / .5)}
.tcg .oro .cara{background:linear-gradient(135deg,hsl(40 55% 42%),hsl(46 90% 72%) 30%,hsl(42 70% 52%) 52%,hsl(48 95% 80%) 74%,hsl(38 60% 40%))}
.tcg .holo .cara{background:linear-gradient(125deg,var(--holo-a),var(--holo-b) 30%,var(--holo-c) 55%,var(--holo-a) 80%,var(--holo-b));background-size:220% 220%;animation:holo 6s linear infinite}
@keyframes holo{to{background-position:220% 0}}
.tcg .dorso{transform:rotateY(180deg)}
.tcg .interior{flex:1;min-width:0;border-radius:11px;background:var(--card);display:flex;flex-direction:column;overflow:hidden;position:relative;color:var(--fg)}
.tcg .holo .frente .interior::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,hsl(0 0% 100% / .35) 45%,transparent 60%);background-size:250% 100%;mix-blend-mode:soft-light;animation:holo 5s linear infinite}
.tcg .brillo{position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),hsl(0 0% 100% / .38),transparent 40%)}
.tcg .carta-tcg.arriba:hover .brillo,.tcg .carta-tcg.arrastrando .brillo{opacity:1}
.tcg .banda{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(90deg,hsl(151 64% 13%),hsl(151 50% 20%));color:var(--blanco);font-size:12.5px;font-weight:700;flex:none}
.tcg .pips{display:flex;gap:4px;flex:none}
.tcg .pips i{width:9px;height:9px;border-radius:50%;background:hsl(0 0% 100% / .25)}
.tcg .pips i.on{background:var(--oro-claro)}
.tcg .arte{position:relative;display:flex;align-items:flex-end;gap:6px;height:86px;flex:none;padding:0 16px 10px;overflow:hidden;color:var(--blanco);
  background:linear-gradient(160deg,hsl(151 55% 14%),hsl(151 45% 22%) 60%,hsl(160 45% 28%))}
.tcg .arte::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 20deg at 78% 120%,hsl(52 100% 70% / 0) 0 6deg,hsl(52 100% 70% / .5) 7deg 8deg,transparent 9deg 14deg)}
.tcg .arte::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.7;
  background:radial-gradient(circle at var(--mx,50%) calc(var(--my,30%) * 3),hsl(52 100% 90% / .7),transparent 45%)}
.tcg .holo .arte{background:linear-gradient(125deg,hsl(163 50% 30%),hsl(225 45% 36%) 45%,hsl(300 40% 34%))}
.tcg .holo .arte::before{opacity:.6;background:repeating-linear-gradient(115deg,hsl(163 64% 69% / .5) 0 6px,hsl(317 74% 81% / .45) 6px 12px,hsl(225 76% 75% / .5) 12px 18px)}
.tcg .art-l{position:relative;font-size:14px;font-weight:700;opacity:.8;margin-bottom:9px}
.tcg .art-n{position:relative;font-size:60px;line-height:.9;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,hsl(52 100% 82%) 60%,hsl(46 90% 62%));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px hsl(151 60% 5% / .45))}
.tcg .rareza{position:absolute;right:12px;top:10px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  background:hsl(46 90% 60% / .25);border:1px solid hsl(46 90% 72% / .7);color:hsl(48 100% 88%);backdrop-filter:blur(4px)}
.tcg .holo .rareza{background:linear-gradient(90deg,hsl(163 64% 69% / .4),hsl(317 74% 81% / .4),hsl(225 76% 75% / .4));border-color:hsl(0 0% 100% / .6);color:var(--blanco)}
.tcg .cuerpo{flex:1;padding:14px 16px 10px;display:flex;flex-direction:column;gap:6px;overflow:auto;scrollbar-width:thin}
.tcg .enun{font-size:15px;font-weight:700;line-height:1.38;letter-spacing:-.01em;margin-bottom:4px}
.tcg .op{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:10px;background:var(--surf-2);font:13.5px/1.35 var(--font);color:var(--fg);border:0;text-align:left;width:100%}
.tcg .op b{width:22px;height:22px;border-radius:7px;background:var(--blanco);display:grid;place-items:center;font-size:12px;flex:none}
.tcg button.op{cursor:pointer;transition:box-shadow .15s,transform .15s var(--ease)}
.tcg button.op:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--s3);transform:translateX(2px)}
.tcg .op.bien{background:var(--okbg);box-shadow:inset 0 0 0 1.5px hsl(142 60% 55%)}.tcg .op.bien b{background:var(--ok);color:#fff}
.tcg .op.mal{background:var(--redbg);box-shadow:inset 0 0 0 1.5px hsl(0 70% 70%)}.tcg .op.mal b{background:var(--red);color:#fff}
.tcg .pie{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px 10px;font-size:11.5px;font-weight:700;color:var(--mut);border-top:1px solid var(--bd);flex:none}
.tcg .pie .gira{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:700 11.5px var(--font);color:var(--pri);padding:0;cursor:pointer}
.tcg .pie .gira .ico{width:14px;height:14px}
.tcg .dorso .banda{background:var(--oro-claro);color:var(--oro-ink)}
.tcg .dorso .pips i{background:hsl(40 100% 20% / .2)}.tcg .dorso .pips i.on{background:var(--oro-ink)}
.tcg .anat{flex:1;padding:12px 16px;overflow:auto;scrollbar-width:thin;display:grid;gap:12px;align-content:start;font-size:13.5px;line-height:1.45}
.tcg .anat h3{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--pri);margin-bottom:4px}
.tcg .anat .correcta{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--okbg);box-shadow:inset 0 0 0 1.5px hsl(142 60% 60%);font-weight:600}
.tcg .anat .correcta b{width:22px;height:22px;border-radius:7px;background:var(--ok);color:var(--blanco);display:grid;place-items:center;font-size:12px;flex:none}
.tcg .anat blockquote{font-family:var(--read);font-style:italic;font-size:14.5px;line-height:1.45;padding-left:12px;box-shadow:inset 2px 0 0 hsl(48 95% 62%)}
.tcg .anat blockquote cite{display:block;font-family:var(--font);font-style:normal;font-size:11.5px;font-weight:700;color:var(--mut);margin-top:4px}
.tcg .anat p{color:var(--mut)}
.tcg .sello{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--ok)}
.tcg .sello img{width:24px}
/* carta común: la de otra app. Marco gris plano, sin arte ni foil */
.tcg .comun .cara{background:linear-gradient(135deg,hsl(0 0% 78%),hsl(0 0% 88%));box-shadow:0 2px 3px hsl(0 0% 0% / .12),0 18px 34px -18px hsl(0 0% 0% / .5)}
.tcg .comun .banda,.tcg .comun .dorso .banda{background:hsl(0 0% 55%);color:var(--blanco)}
.tcg .comun .arte{background:hsl(0 0% 70%);height:66px}
.tcg .comun .arte::before,.tcg .comun .arte::after{display:none}
.tcg .comun .art-n{font-size:44px;background:none;color:hsl(0 0% 97%);-webkit-background-clip:border-box;background-clip:border-box;filter:none}
.tcg .comun .rareza{background:hsl(0 0% 100% / .25);border-color:hsl(0 0% 100% / .55);color:var(--blanco);backdrop-filter:none}
.tcg .comun .pie .gira{color:hsl(0 0% 38%)}
.tcg .vacio{flex:1;display:grid;place-content:center;gap:12px;text-align:center;padding:24px 18px;color:var(--mut)}
.tcg .vacio .solo{font-size:17px;font-weight:800;color:var(--fg);background:var(--surf-2);border-radius:12px;padding:14px 16px}
@media(max-width:640px){
  .tcg .mazo{width:min(330px,82vw);aspect-ratio:63/112;margin:10px 18px 24px 0}
  .tcg .lado-otra .mazo{width:min(320px,80vw);aspect-ratio:63/96}
  .tcg .enun{font-size:14px}.tcg .op{font-size:12.5px;padding:6px 8px}.tcg .anat{font-size:12.5px;gap:10px}
  .tcg .arte{height:66px}.tcg .art-n{font-size:48px}
  .tcg .holo .cara{animation:none}.tcg .brillo{display:none}.tcg .rareza{backdrop-filter:none}
}