/* =====================================================================
   Pase de Temporada · más vistoso (solo apariencia: las recompensas no cambian)
   ===================================================================== */
@property --spa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spSpin { to { transform: rotate(360deg); } }
@keyframes spBorderTurn { to { --spa: 360deg; } }
@keyframes spSweep { 0%, 35% { background-position: -150% 0; } 75%, 100% { background-position: 250% 0; } }
@keyframes spArtFloat { 50% { transform: translateY(-7px) scale(1.04); } }
@keyframes spBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spHeart { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.15); } 40% { transform: scale(.96); } }

/* ---------- cabecera: brasas y fuegos fatuos que suben ---------- */
.sp-head > .sp-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sp-fx i { position: absolute; left: var(--x); bottom: -40px; width: calc(28px * var(--s)); height: calc(28px * var(--s)); opacity: 0;
  background: url(../assets/pass/ember.png) center / contain no-repeat; animation: spFxUp 6s linear infinite; animation-delay: calc(var(--d) * -1.2); }
.sp-fx i.w { width: calc(46px * var(--s)); height: calc(46px * var(--s)); background-image: url(../assets/pass/wisp.png); animation-duration: 9s; }
@keyframes spFxUp { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .95; } 60% { transform: translate(26px, -160px); } 100% { transform: translate(-10px, -280px); opacity: 0; } }
.sp-title b { background: linear-gradient(100deg, #fff3c4 0%, #ffb03a 38%, #fffbe8 50%, #ffb03a 62%, #fff3c4 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text;
  animation: spTitle 5s linear infinite; }
@keyframes spTitle { to { background-position: 260% 0; } }
.sp-lvl-n { position: relative; }
.sp-ring { position: absolute; inset: -16px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(#ffd23a, transparent 22%, #a24bff 35%, transparent 55%, #ff7a1a 70%, transparent 90%, #ffd23a);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%); mask: radial-gradient(circle, transparent 58%, #000 61%); animation: spSpin 3.5s linear infinite; filter: blur(1px); }
.sp-get { position: relative; overflow: hidden; font-size: 34px; padding: 14px 34px; }
.sp-get-shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.8) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: spSweep 2.6s ease-in-out infinite; }

/* ---------- pestañas ---------- */
.sp-tabs button { border-radius: 20px 20px 0 0; transition: background .15s, transform .15s; }
.sp-tabs button:hover { transform: translateY(-2px); }
.sp-tabs button.on { background: linear-gradient(rgba(255,170,60,.35), rgba(255,255,255,.12)); box-shadow: inset 0 -5px 0 #ffb03a, 0 -6px 20px rgba(255,160,50,.3); }
.sp-tabs button[data-tab="premium"] { color: #ffd27a; }

/* ---------- escaparate de la recompensa final ---------- */
.sp-show-stage { overflow: visible; }
.sp-rays { position: absolute; left: 50%; top: 44%; width: 560px; height: 560px; margin: -280px 0 0 -280px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,190,80,.26) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: spSpin 22s linear infinite; }
.sp-pedestal { position: absolute; left: 50%; bottom: 40px; width: 320px; height: 70px; margin-left: -160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,180,70,.85), rgba(160,80,255,.45) 50%, transparent 72%); animation: spGlowPulse 2.4s ease-in-out infinite; }
@keyframes spGlowPulse { 50% { opacity: .6; transform: scaleX(1.08); } }
.sp-show b { background: linear-gradient(100deg, #ffd27a, #fff6d8 50%, #ffd27a) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 #5a1f86); animation: spTitle 4s linear infinite; }

/* ---------- pista de recompensas ---------- */
.sp-trackwrap { background: radial-gradient(ellipse at 50% 120%, rgba(255,140,40,.18), transparent 60%); }
.sp-col.here { background: linear-gradient(rgba(255,210,90,.14), rgba(255,210,90,.04)); border-radius: 26px; box-shadow: 0 0 0 3px rgba(255,210,90,.35); }
.sp-here { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 2px 12px; border-radius: 12px; white-space: nowrap;
  background: linear-gradient(#ff6b5a, #e2363b); color: #fff; font: 700 17px var(--font); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.3); animation: spBounce 1.2s ease-in-out infinite; }
.sp-here::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; }
.sp-col { margin-top: 36px; }
.sp-cell .sp-st { z-index: 2; }

/* cosméticos (cada 3 niveles): borde de colores que gira y dibujo que flota */
.sp-cell.star:not(.got) { border: 5px solid transparent; animation: spBorderTurn 4s linear infinite; }
.sp-cell.p.star:not(.got) { background: linear-gradient(170deg, #4a2268, #24103a) padding-box, conic-gradient(from var(--spa), #ffd23a, #ff7a1a, #a24bff, #ffd23a) border-box; box-shadow: 0 0 26px rgba(255,180,60,.55); }
.sp-cell.f.star:not(.got) { background: linear-gradient(170deg, #1f4a3a, #142a26) padding-box, conic-gradient(from var(--spa), #9cf09a, #3fae3b, #bff7ff, #9cf09a) border-box; box-shadow: 0 0 22px rgba(95,207,90,.5); }
.sp-cell.star .sp-art { animation: spArtFloat 2.6s ease-in-out infinite; }
.sp-cell.star.can { animation: spBorderTurn 2s linear infinite, spGlow 1s ease-in-out infinite alternate; }

/* Premium bloqueado: destello dorado que pasa */
.sp-cell.p.locked::after { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,230,150,.32) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: spSweep 3.4s ease-in-out infinite; }
.sp-cell.locked .sp-st { background: linear-gradient(#ffe48a, #f2b51c); color: #4a2a00; }

/* ¡Reclamar!: salta un poco */
.sp-cell.can { animation-name: spGlow; }
.sp-cell.can .sp-art { animation: spBounce .9s ease-in-out infinite; }
.sp-cell.got .sp-art { filter: grayscale(.4); }

/* ---------- pestaña Premium ---------- */
.sp-premium2 { display: grid; grid-template-columns: 1.4fr 1fr; height: 100%; }
.spp-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at 50% 45%, rgba(255,150,40,.3), transparent 60%), radial-gradient(circle at 50% 70%, rgba(140,60,255,.3), transparent 70%); }
.spp-rays { position: absolute; left: 50%; top: 45%; width: 1300px; height: 1300px; margin: -650px 0 0 -650px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,200,90,.14) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); animation: spSpin 40s linear infinite; }
.spp-items { position: relative; display: grid; grid-template-columns: repeat(5, 170px); gap: 16px; }
.spp-it { position: relative; height: 196px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 4px solid transparent; background: linear-gradient(170deg, #4a2268, #24103a) padding-box, conic-gradient(from var(--spa), #ffd23a, #ff7a1a, #a24bff, #ffd23a) border-box;
  box-shadow: 0 0 18px rgba(255,170,60,.35); animation: spBorderTurn 5s linear infinite, sppFloat 3.2s ease-in-out infinite; animation-delay: 0s, calc(var(--i) * -.33s); }
@keyframes sppFloat { 50% { transform: translateY(-8px); } }
.spp-it.final { box-shadow: 0 0 34px rgba(255,190,60,.85); }
.spp-it.final::before { content: '👑'; position: absolute; top: -18px; font-size: 30px; }
.spp-art { height: 132px; display: grid; place-items: center; }
.spp-art img { max-width: 150px; max-height: 130px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.spp-art img.sp-card { height: 124px; border-radius: 10px; border: 3px solid #fff; }
.spp-it small { padding: 0 8px; font: 700 15px/1.1 var(--font); color: #fff3c4; text-align: center; }
.spp-perks { position: relative; display: flex; gap: 12px; margin-top: 24px; }
.spp-perks span { padding: 8px 18px; border-radius: 16px; background: rgba(0,0,0,.35); border: 2px solid rgba(255,210,90,.6); font: 700 21px var(--font); color: #ffe8b8; }

.spp-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 48px; text-align: center;
  background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.32)); }
.spp-heart, .spp-badge { font-size: 92px; line-height: 1; filter: drop-shadow(0 0 22px rgba(190,110,255,.8)); animation: spHeart 1.5s ease-in-out infinite; }
.spp-badge { filter: drop-shadow(0 0 24px rgba(255,200,60,.9)); }
.spp-side h3 { margin: 0; font: 700 44px/1.1 var(--font); color: #ffd27a; text-shadow: 0 4px 0 #5a1f86; }
.spp-lead { margin: 0; font: 600 26px/1.3 var(--font); color: #f2e8ff; }
.spp-price { display: flex; align-items: baseline; gap: 10px; padding: 8px 28px; border-radius: 20px; background: linear-gradient(#fff3c4, #f2b51c); color: #4a2a00; box-shadow: 0 5px 0 #8a5a00; }
.spp-price b { font: 700 48px/1 var(--font); }
.spp-price span { font: 700 22px var(--font); }
.spp-patreon { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 36px; border-radius: 28px; border: 5px solid #fff; text-decoration: none; color: #fff; text-align: left;
  background: linear-gradient(#ff7178, #ff424d 55%, #d62f3a); box-shadow: 0 8px 0 #8a1a22, 0 0 34px rgba(255,66,77,.6); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.spp-patreon:hover { transform: translateY(-4px) scale(1.04); }
.spp-patreon::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: spSweep 2.8s ease-in-out infinite; }
.spp-pi { font-size: 56px; line-height: 1; }
.spp-patreon b { display: block; font: 700 34px/1.1 var(--font); }
.spp-patreon small { display: block; margin-top: 4px; font: 700 21px var(--font); opacity: .95; }
.spp-how { font: 600 18px var(--font); color: #d9c6ff; }
.spp-how a { color: #b9c2ff; }
.spp-code { width: 100%; max-width: 480px; }
.spp-code summary { cursor: pointer; font: 700 20px var(--font); color: #ffd27a; list-style: none; }
.spp-code summary::-webkit-details-marker { display: none; }
.spp-code .sp-redeem { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .sp-fx, .sp-rays, .spp-rays, .sp-ring { display: none; }
  .sp-cell, .sp-cell .sp-art, .spp-it, .sp-here, .spp-heart, .spp-badge, .sp-get-shine, .spp-patreon::after, .sp-title b, .sp-show b { animation: none !important; }
}