/* Página de rangos y MMO Coins (tienda.html). Cada rango, más épico que el anterior. */
.tienda-portada { position: relative; overflow: hidden; padding: 70px 0 60px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #3a1f6e 0%, #0b1026 65%); }
.tienda-portada h1 { font-family: "Pixelify Sans", sans-serif; font-size: clamp(44px, 8vw, 84px); margin: 14px 0 8px; line-height: 1;
  background: linear-gradient(90deg, #7fb2ff, #ffcb05, #ff6fd8, #7fb2ff); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: correr 8s linear infinite; }
.tienda-portada p { color: var(--suave); font-size: 19px; max-width: 640px; margin: 0 auto; }
.bolas-flotan { display: flex; justify-content: center; gap: clamp(18px, 6vw, 70px); margin: 36px 0 10px; }
.bolas-flotan svg { width: clamp(70px, 14vw, 130px); height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); animation: flotar 4s ease-in-out infinite; }
.bolas-flotan svg:nth-child(2) { animation-delay: -1.3s; width: clamp(84px, 17vw, 150px); }
.bolas-flotan svg:nth-child(3) { animation-delay: -2.6s; width: clamp(96px, 20vw, 170px); filter: drop-shadow(0 0 30px rgba(226,110,240,.7)) drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes correr { to { background-position: 300% 0; } }
.aviso-demo { display: inline-block; margin-top: 22px; background: rgba(255,203,5,.14); color: var(--amarillo); border: 1px solid rgba(255,203,5,.35);
  border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: 14px; }

.rangos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: end; }
.rango { position: relative; border-radius: 24px; padding: 28px 24px 24px; text-align: center; overflow: hidden; isolation: isolate; }
.rango .bola-rango { width: 96px; height: 96px; margin: -4px auto 6px; display: block; }
.rango h3 { font-family: "Pixelify Sans", sans-serif; font-size: 40px; margin: 4px 0 0; letter-spacing: 2px; }
.rango .lema { margin: 2px 0 14px; font-weight: 700; opacity: .85; }
.precio { font-family: "Pixelify Sans", sans-serif; font-size: 46px; line-height: 1; margin: 6px 0 2px; }
.precio small { font-size: 20px; }
.o-mc { font-weight: 800; opacity: .85; margin-bottom: 16px; }
.tarjeta-nombre { display: block; margin: 0 auto 16px; max-width: 100%; image-rendering: pixelated; border-radius: 10px; }
.ventajas { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; display: grid; gap: 8px; }
.ventajas li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.ventajas li b { font-weight: 900; }
.ventajas .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: rgba(255,255,255,.12); }
.ventajas li.nuevo .ic { background: rgba(255,255,255,.95); color: #111; }
.boton-rango { display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px; font: 900 18px "Nunito", sans-serif; cursor: not-allowed;
  color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.boton-rango small { display: block; font-size: 12px; font-weight: 700; opacity: .85; }

/* Super: azul con las franjas rojas de la Super Ball */
.rango.super { background: linear-gradient(180deg, #1d3f99, #0c1d52); border: 2px solid #5096ff; }
.rango.super::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 8px; background: linear-gradient(90deg, #e23636 0 28%, transparent 28% 72%, #e23636 72%); }
.rango.super h3 { color: #bcd9ff; }
.rango.super .boton-rango { background: linear-gradient(180deg, #5c9dff, #2c63d6); }

/* Ultra: negro y amarillo, con brillo que cruza */
.rango.ultra { background: linear-gradient(180deg, #24242c, #0f0f13); border: 3px solid #ffcb05; padding-top: 40px; margin-bottom: 14px;
  box-shadow: 0 0 0 1px rgba(255,203,5,.25), 0 20px 50px rgba(255,203,5,.18); }
.rango.ultra::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.13) 48%, transparent 56%);
  background-size: 260% 100%; animation: brillo 3.5s linear infinite; z-index: -1; }
.rango.ultra::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(90deg, #ffcb05 0 26px, #111 26px 40px); }
.rango.ultra h3 { color: #ffd84a; }
.rango.ultra .boton-rango { background: linear-gradient(180deg, #ffd84a, #e0a800); color: #1a1400; }
.cinta { position: absolute; top: 26px; right: -58px; transform: rotate(35deg); text-align: center; width: 220px; background: #ffcb05; color: #1a1400; font-weight: 900;
  font-size: 12px; letter-spacing: 1px; padding: 5px 0; text-transform: uppercase; }
@keyframes brillo { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* Master: morado, borde de colores que gira, chispas y halo */
.rango.master { background: radial-gradient(ellipse at 50% 0%, #6a2aa8, #2a0b4c 70%); padding: 46px 26px 28px; margin-bottom: 28px;
  border: 3px solid transparent; background-clip: padding-box; box-shadow: 0 0 60px rgba(226,110,240,.45), 0 24px 60px rgba(0,0,0,.6); }
.rango.master::after { content: ""; position: absolute; inset: -3px; border-radius: 26px; padding: 3px; z-index: -1;
  background: conic-gradient(from var(--giro, 0deg), #ff6fd8, #9c6bff, #6fd3ff, #ffcb05, #ff6fd8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: girar-borde 4s linear infinite; }
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes girar-borde { to { --giro: 360deg; } }
.rango.master h3 { background: linear-gradient(90deg, #ff9be2, #c9a0ff, #8fe0ff, #ff9be2); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: correr 4s linear infinite; font-size: 48px; }
.rango.master .bola-rango { width: 118px; height: 118px; filter: drop-shadow(0 0 22px rgba(255,111,216,.8)); animation: flotar 4s ease-in-out infinite; }
.rango.master .boton-rango { background: linear-gradient(90deg, #e26ef0, #8b5cf6, #e26ef0); background-size: 200% 100%; animation: correr 3s linear infinite; }
.rango.master .cinta { background: linear-gradient(90deg, #ff6fd8, #9c6bff); color: #fff; }
.chispa { position: absolute; width: 6px; height: 6px; background: #fff; box-shadow: 0 0 10px #ff9be2, 0 0 20px #c9a0ff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(2.2);
  animation: titilar 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes titilar { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(2.4); } }

.comparar { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; overflow: hidden; }
.comparar th, .comparar td { padding: 13px 14px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.comparar td:first-child, .comparar th:first-child { text-align: left; font-weight: 700; }
.comparar thead th { font-family: "Pixelify Sans", sans-serif; font-size: 22px; background: #0e1535; }
.comparar .c-super { color: #8fbaff; } .comparar .c-ultra { color: #ffd84a; } .comparar .c-master { color: #ff9be2; }
.comparar .si { color: var(--verde); font-weight: 900; } .comparar .no { color: #4b557f; }
.tabla-scroll { overflow-x: auto; }

.chat-ejemplo { max-width: 760px; margin: 0 auto; background: rgba(0,0,0,.55); border-radius: 12px; padding: 16px 20px; font-family: "Pixelify Sans", monospace;
  font-size: 19px; line-height: 1.7; border: 1px solid rgba(255,255,255,.1); }
.chat-ejemplo .t-super { color: #5096ff; font-weight: 700; } .chat-ejemplo .t-ultra { color: #ffcb05; font-weight: 700; }
.chat-ejemplo .t-master { color: #e26ef0; font-weight: 700; } .chat-ejemplo .gris { color: #aaa; }

.monedas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; }
.paquete { position: relative; text-align: center; background: linear-gradient(180deg, #1b2556, #121a3d); border: 1px solid var(--borde); border-radius: 20px;
  padding: 20px 14px 16px; transition: transform .2s; }
.paquete:hover { transform: translateY(-6px); }
.paquete .pila { height: 110px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.paquete .pila svg { width: auto; max-width: 100%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.paquete h4 { font-family: "Pixelify Sans", sans-serif; font-size: 24px; margin: 0; }
.paquete .cantidad { font-family: "Pixelify Sans", sans-serif; font-size: 30px; color: var(--amarillo); margin: 4px 0 0; }
.paquete .regalo { display: inline-block; background: var(--verde); color: #062b10; font-weight: 900; font-size: 12px; border-radius: 999px; padding: 2px 10px; margin: 4px 0 10px; }
.paquete .regalo.vacio { visibility: hidden; }
.paquete .euros { font-weight: 900; font-size: 20px; margin-bottom: 12px; }
.paquete .boton-rango { background: linear-gradient(180deg, #ffd84a, #e0a800); color: #1a1400; font-size: 16px; padding: 11px; }
.paquete.popular { border: 2px solid var(--amarillo); box-shadow: 0 0 34px rgba(255,203,5,.25); }
.paquete.popular::before { content: "Más elegido"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--amarillo); color: #1a1400;
  font-weight: 900; font-size: 12px; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }

.preguntas-tienda { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preguntas-tienda .tarjeta h3 { margin-top: 0; }

@media (max-width: 960px) {
  .rangos { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .rango.ultra, .rango.master { margin-bottom: 0; }
  .monedas { grid-template-columns: repeat(2, 1fr); }
  .preguntas-tienda { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }