/* Tierras Fantásticas — estilos de la web.
   Concepto «nebulosa de neón»: el reino de noche bajo una nebulosa rosa, violeta y cian (una sola imagen fija),
   tipografía Unbounded (titulares) y Figtree (texto), tarjetas opacas con filo claro que se separan del fondo y botones
   con volumen de bloque (se elevan, brillan y cambian de color al pasar el ratón y se hunden al pulsar). Una sola
   paleta: rosa neón, violeta y cian sobre índigo. Pensado primero para el móvil: sin desenfoques ni capas fijas; lo que se anima solo usa transform y
   opacity, y todo se apaga con «reducir movimiento». Orden: tokens → base → carga → botones → cabecera → portada →
   bloques comunes → pie → tienda → ventanas → cuenta → probador → tamaños de pantalla. */

/* ---------- Tokens ---------- */

:root {
  /* Noche de neón: fondo índigo casi negro, superficies violeta oscuro y acentos rosa neón, violeta y cian */
  --bg: #07061a;
  --bg-2: #0b0920;
  --bg-rgb: 7 6 26;
  --s0: #0e0b24;
  --s1: #13102e;
  --s1-rgb: 19 16 46;
  --s2: #1a1640;
  --s3: #231d52;
  --s4: #2e2768;
  --line-rgb: 196 176 255;
  --bd: rgb(var(--line-rgb) / 0.13);
  --bd-2: rgb(var(--line-rgb) / 0.24);
  --text: #f7f4ff;
  --text-2: #d6cff2;
  --muted: #a39cc8;
  --faint: #6c6591;
  /* Acento principal: rosa neón (los nombres --a-* sustituyen al verde de antes) */
  --a-200: #ffd8f7;
  --a-300: #ffa3ef;
  --a-400: #ff5edb;
  --a-500: #e23cc8;
  --a-600: #a91aa0;
  --a-rgb: 255 94 219;
  --a2-rgb: 226 60 200;
  --a3-rgb: 255 163 239;
  --on-accent: #ffffff;
  --on-accent-rgb: 255 255 255;
  /* Botón principal y elementos activos: degradado rosa → violeta → índigo */
  --pri-a: #ff6ad9;
  --pri-b: #8f45f5;
  --pri-lip: #3e1478;
  --pri-grad: linear-gradient(135deg, #ff5ed5 0%, #b04cf2 52%, #6f5cff 100%);
  /* El destello de los botones: rosa → violeta → azul → cian (el doble de ancho, se desliza al pasar el ratón) */
  --shimmer: linear-gradient(110deg, #ff5ed5 0%, #b04cf2 30%, #6f5cff 55%, #3fc8ff 80%, #ff5ed5 100%);
  /* El mismo destello en esmeralda vivo → turquesa → azul (botón «Visitar la tienda» de la portada) */
  --shimmer-sea: linear-gradient(110deg, #12d98f 0%, #0fc4a8 28%, #10a9d6 55%, #3b6dff 80%, #12d98f 100%);
  --violet: #a78bfa;
  --violet-2: #7c3aed;
  --v-rgb: 167 139 250;
  --v2-rgb: 124 58 237;
  --cyan: #45e9ff;
  --c-rgb: 69 233 255;
  --ok: #3dffa8;
  --gold: #fcc94a;
  --gold-2: #f59e0b;
  --red: #ff6b8b;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --wrap: 1200px;
  --gutter: 18px;
  --header-h: 68px;
  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(4, 2, 16, 0.55), 0 22px 46px -20px rgba(0, 0, 0, 0.95);
  /* Superficie de las tarjetas: opaca y más clara que el fondo, para que se distinga siempre */
  --surface: linear-gradient(180deg, #241c55 0%, #1a1442 55%, #150f37 100%);
  --surface-2: #2a2163;
  --neon-border: linear-gradient(135deg, rgb(var(--a-rgb) / 0.7), rgb(var(--v-rgb) / 0.35) 45%, rgb(var(--c-rgb) / 0.6));
  /* Neón de los bordes: un filo fino de luz y un halo suave alrededor (nunca en las letras) */
  --edge: rgb(var(--line-rgb) / 0.3);
  --edge-hot: rgb(var(--a-rgb) / 0.8);
  --haze: 0 0 30px -14px rgb(var(--v2-rgb) / 0.85);
  --haze-hot: 0 0 0 1px rgb(var(--a-rgb) / 0.3), 0 0 36px -6px rgb(var(--a-rgb) / 0.6), 0 0 70px -18px rgb(var(--c-rgb) / 0.5);
  --grid-lines:
    linear-gradient(rgb(var(--line-rgb) / 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgb(var(--line-rgb) / 0.045) 1px, transparent 1px) 0 0 / 44px 44px;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5edb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fondo: la nebulosa de neón sobre el reino de noche (tools/nebula_bg.py la genera ya oscurecida), fija detrás de
   todo. Es una sola capa fija que solo se acerca muy despacio (transform: la mueve la tarjeta gráfica). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.08) 0%, rgb(var(--bg-rgb) / 0.3) 50%, rgb(var(--bg-rgb) / 0.62) 100%),
    url('/img/nebula-1672.webp') 62% 30% / cover no-repeat,
    var(--bg);
  transform-origin: 70% 30%;
  will-change: transform;
  animation: night-drift 60s ease-in-out infinite alternate;
}

/* ---------- Fondo vivo ---------- */

/* Encima de la base fija (body::before) y debajo de la viñeta (body::after): la nebulosa A se desplaza y respira, la B
   (con las nubes en otro sitio) aparece y se apaga, y así el color del cielo cambia despacio; dos mosaicos de
   estrellas bajan muy despacio y titilan a destiempo, y de vez en cuando cruza una estrella fugaz. Solo transform y
   opacity (lo mueve la tarjeta gráfica). En el móvil van la nebulosa A y un mosaico de estrellas. Lo genera
   tools/nebula_bg.py. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.sky i {
  position: absolute;
  display: block;
}

.sky .neb-a,
.sky .neb-b {
  inset: -8%;
  background: 62% 30% / cover no-repeat;
}

.sky .neb-a {
  background-image: url('/img/nebula-a-1280.webp');
  opacity: 0.8;
  animation: neb-a 24s ease-in-out infinite alternate;
}

.sky .neb-b {
  background-image: url('/img/nebula-b-1280.webp');
  opacity: 0;
  animation: neb-b 15s ease-in-out infinite alternate;
}

/* Corrientes de luz de la nebulosa: dos manchas grandes (rosa y cian) que cruzan el cielo despacio y cambian el color
   del fondo; es lo que hace que la nebulosa se vea viva */
.sky .neb-glow {
  inset: -30%;
  background:
    radial-gradient(28% 22% at 30% 35%, rgb(var(--a-rgb) / 0.34), transparent 70%),
    radial-gradient(24% 20% at 70% 55%, rgb(var(--c-rgb) / 0.26), transparent 70%),
    radial-gradient(30% 24% at 55% 20%, rgb(var(--a2-rgb) / 0.3), transparent 70%);
  animation: neb-glow 18s ease-in-out infinite alternate;
}

/* Las estrellas solo en el cielo: se apagan hacia el valle */
.sky-stars {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 78%);
}

.sky .stars-a,
.sky .stars-b {
  inset: -512px 0 0;
  background: url('/img/stars-a.webp') 0 0 / 512px 512px repeat;
  animation:
    stars-fall 260s linear infinite,
    twinkle 4.2s ease-in-out infinite alternate;
}

.sky .stars-b {
  background-image: url('/img/stars-b.webp');
  background-position: 190px 140px;
  animation:
    stars-fall 170s linear infinite,
    twinkle 3.1s ease-in-out -1.6s infinite alternate;
}

/* Estrella fugaz: una estela que cruza el cielo cada pocos segundos (solo en pantallas grandes) */
.sky .shoot {
  display: none;
  top: 9%;
  left: 68%;
  width: 150px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgb(var(--a-rgb) / 0.6) 30%, transparent);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform-origin: 0 50%;
  animation: shoot 13s ease-in 4s infinite;
}

.sky .shoot.s2 {
  top: 22%;
  left: 34%;
  width: 110px;
  animation-duration: 17s;
  animation-delay: 11s;
}

@keyframes neb-a {
  from {
    transform: translate3d(1.5%, -1%, 0) scale(1) rotate(0deg);
    opacity: 0.6;
  }
  to {
    transform: translate3d(-5%, 3%, 0) scale(1.14) rotate(1.5deg);
    opacity: 1;
  }
}

@keyframes neb-b {
  0% {
    transform: translate3d(4%, -2%, 0) scale(1.06);
    opacity: 0;
  }
  100% {
    transform: translate3d(-4%, 3%, 0) scale(1.16);
    opacity: 0.95;
  }
}

@keyframes neb-glow {
  0% {
    transform: translate3d(-8%, 4%, 0) rotate(-6deg) scale(1);
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(8%, -5%, 0) rotate(8deg) scale(1.12);
    opacity: 0.7;
  }
}

@keyframes stars-fall {
  to {
    transform: translate3d(0, 512px, 0);
  }
}

@keyframes twinkle {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

@keyframes shoot {
  0%,
  90% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(0, 0, 0) scaleX(0.3);
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(-520px, 0, 0) scaleX(1);
  }
}

@media (min-width: 960px) {
  .sky .shoot {
    display: block;
  }
}

/* Móvil: menos capas (la nebulosa A más pequeña y un solo mosaico de estrellas) */
@media (max-width: 760px) {
  .sky .neb-a {
    background-image: url('/img/nebula-a-640.webp');
    background-position: 72% 30%;
  }

  .sky .neb-b,
  .sky .stars-b {
    display: none;
  }

  .sky .neb-glow {
    animation-duration: 24s;
  }
}

/* Viñeta: oscurece los bordes de la pantalla para que el contenido mande */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 0% 100%, rgb(var(--a2-rgb) / 0.12), transparent 70%),
    radial-gradient(130% 90% at 50% 40%, transparent 50%, rgb(var(--bg-rgb) / 0.7) 100%);
}

@media (max-width: 760px) {
  body::before {
    background:
      linear-gradient(180deg, rgb(var(--bg-rgb) / 0.06) 0%, rgb(var(--bg-rgb) / 0.32) 50%, rgb(var(--bg-rgb) / 0.66) 100%),
      url('/img/nebula-768.webp') 72% 30% / cover no-repeat,
      var(--bg);
  }
}

body.lock,
body:has(dialog[open]) {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--a-300);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgb(var(--a-rgb) / 0.35);
  color: #fff;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  width: auto;
  height: auto;
  padding: 10px 16px;
  clip: auto;
  border-radius: var(--r);
  background: var(--a-400);
  color: var(--on-accent);
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pixel-img {
  image-rendering: pixelated;
}

/* Imágenes de la tienda: aparecen con un fundido cuando terminan de cargar */
.fx {
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}

.fx:not(.ok) {
  opacity: 0;
}

/* ---------- Tipografía ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h2,
.section-head h2 {
  font: 700 clamp(26px, 4.6vw, 44px) / 1.12 var(--font-display);
  letter-spacing: -0.02em;
}

.lead {
  color: var(--text-2);
  font-size: 18px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgb(var(--a-rgb) / 0.25);
  background: rgb(var(--a-rgb) / 0.09);
  color: var(--a-300);
  font: 800 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.text-grad {
  /* Palabra destacada: color liso, sin brillo ni degradado (el neón va en bordes y botones, no en las letras) */
  color: #e8cdfc;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 14px;
}

.center {
  text-align: center;
}

.loading {
  color: var(--muted);
  padding: 24px 0;
}

.section {
  padding-block: 72px;
}

.section.pt-0 {
  padding-top: 0;
}

.section.pt-sm {
  padding-top: 36px;
}

.section-head {
  max-width: 700px;
  margin-bottom: 36px;
}

.section-head h2 {
  margin-top: 16px;
}

.section-head p {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 17px;
  text-shadow: 0 1px 12px rgb(var(--bg-rgb) / 0.9);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

/* Filo de neón bajo cada cabecera de sección (se dibuja de izquierda a derecha al aparecer) */
.section-head::after {
  content: '';
  display: block;
  width: 84px;
  height: 3px;
  margin-top: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--a-400), var(--violet), var(--cyan));
  box-shadow: 0 0 14px rgb(var(--a-rgb) / 0.55);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease) 0.25s;
}

.section-head.center::after {
  margin-inline: auto;
  transform-origin: 50% 50%;
}

.split-head::after {
  display: none;
}

.js .section-head.reveal:not(.in)::after {
  transform: scaleX(0);
}

.split-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  max-width: none;
}

.grid {
  display: grid;
  gap: 16px;
}

/* ---------- Pantalla de carga (primera página de la visita) ---------- */

.loader {
  display: none;
}

.js:not(.seen) .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 42%, rgb(var(--a2-rgb) / 0.16), transparent 70%),
    var(--bg);
  transition:
    opacity 0.55s var(--ease),
    visibility 0s linear 0.55s;
}

.ready .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  transition: transform 0.55s var(--ease);
}

.ready .loader-inner {
  transform: scale(1.06);
}

.loader img {
  width: 104px;
  height: auto;
  animation: float 3s ease-in-out infinite;
}

/* Barra como la de experiencia de Minecraft: bloques verdes que avanzan */
.loader-bar {
  width: 200px;
  height: 10px;
  margin: 26px 0 14px;
  padding: 2px;
  border-radius: 4px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--bd-2);
  overflow: hidden;
}

.loader-bar i {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--a-400) 0 16px, transparent 16px 19px);
  box-shadow: 0 0 12px rgb(var(--a-rgb) / 0.6);
  animation: load-bar 1.15s var(--ease) infinite;
}

.loader span {
  color: var(--muted);
  font: 600 12px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes load-bar {
  from {
    transform: translateX(-105%);
  }
  to {
    transform: translateX(230%);
  }
}

/* ---------- Esqueletos mientras carga la tienda ---------- */

.skel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.skel-card {
  overflow: hidden;
  padding-bottom: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: var(--s1);
}

.skel {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--s2);
}

.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s ease-in-out infinite;
}

.skel-art {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  margin-bottom: 16px;
}

.skel-line {
  height: 12px;
  margin: 12px 16px 0;
}

.skel-line.short {
  width: 45%;
}

.skel-account {
  grid-template-columns: 1fr;
}

.skel-account .skel-card {
  padding: 24px 8px 24px;
}

.skel-account .skel-line:first-child {
  width: 30%;
  margin-top: 0;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ---------- Transiciones entre páginas ---------- */

/* En todos los navegadores: al pulsar un enlace de la web (app.js pone .leaving) el contenido se desvanece hacia
   arriba con una barra de neón que corre por arriba; la página nueva entra subiendo y apareciendo. */
.js:not(.ready) main,
.js:not(.ready) .footer {
  opacity: 0;
}

.ready main,
.ready .footer {
  animation: page-in 0.7s var(--ease) backwards;
}

.ready .footer {
  animation-delay: 0.12s;
}

.leaving main,
.leaving .footer {
  opacity: 0;
  transform: translateY(-18px) scale(0.99);
  filter: saturate(1.4);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease),
    filter 0.3s;
}

.page-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: 3px;
  background: linear-gradient(90deg, var(--a-400), var(--violet), var(--cyan));
  box-shadow: 0 0 14px rgb(var(--a-rgb) / 0.8);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.leaving .page-bar {
  transform: scaleX(0.85);
  transition: transform 1.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

/* ---------- Botones: bloques con volumen ---------- */

.btn {
  --a: var(--s4);
  --b: var(--s2);
  --lip: var(--bg);
  --fg: var(--text);
  --glow: rgba(0, 0, 0, 0);
  --lift: 4px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r);
  font: 700 12.5px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: linear-gradient(180deg, var(--a), var(--b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 var(--lift) 0 var(--lip),
    0 12px 24px -12px var(--glow);
  transition:
    transform 0.25s var(--spring),
    box-shadow 0.25s var(--ease),
    background-position 0.6s var(--ease),
    color 0.2s,
    filter 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* Destello que cruza el botón al pasar el ratón */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.1) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 calc(var(--lift) + 2px) 0 var(--lip),
    0 18px 32px -12px var(--glow);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:active {
  transform: translateY(calc(var(--lift) - 1px)) scale(0.99);
  filter: brightness(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 1px 0 var(--lip),
    0 4px 10px -6px var(--glow);
  transition-duration: 0.06s;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.3s var(--ease);
}

.btn:hover svg:last-child:not(:first-child) {
  transform: translateX(5px);
}

.btn:hover svg:first-child:not(:last-child) {
  transform: scale(1.15) rotate(-6deg);
}

.btn-primary,
.btn-theme {
  --a: var(--pri-a);
  --b: var(--pri-b);
  --lip: var(--pri-lip);
  --fg: var(--on-accent);
  --glow: rgb(var(--a2-rgb) / 0.75);
  /* El degradado es el doble de ancho: al pasar el ratón se desliza del rosa al violeta y el cian */
  background: var(--shimmer) 0 0 / 220% 100%;
  text-shadow: 0 1px 2px rgba(40, 0, 60, 0.45);
  /* Neón: filo rosa claro y halo */
  box-shadow:
    inset 0 0 0 1px rgb(255 214 247 / 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 var(--lift) 0 var(--lip),
    0 0 22px -4px rgb(var(--a-rgb) / 0.55),
    0 12px 26px -12px var(--glow);
}

.btn-primary:hover,
.btn-theme:hover {
  background-position: 100% 0;
  box-shadow:
    inset 0 0 0 1px rgb(255 214 247 / 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 calc(var(--lift) + 2px) 0 var(--lip),
    0 0 34px -2px rgb(var(--a-rgb) / 0.75),
    0 0 60px -14px rgb(var(--c-rgb) / 0.6);
  animation: btn-breathe 1.8s ease-in-out 0.3s infinite;
}

.btn-ghost {
  --a: #3a2f86;
  --b: #2a2166;
  --lip: #120d33;
  /* Al pasar el ratón una capa (::before, en «Relleno de neón») lo llena de izquierda a derecha */
  background: linear-gradient(180deg, var(--a), var(--b));
  box-shadow:
    inset 0 0 0 1px rgb(var(--line-rgb) / 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 var(--lift) 0 var(--lip),
    0 0 18px -8px rgb(var(--v2-rgb) / 0.8);
  transition:
    transform 0.25s var(--spring),
    box-shadow 0.25s var(--ease),
    filter 0.2s;
}

.btn-ghost:hover {
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgb(var(--a-rgb) / 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 calc(var(--lift) + 2px) 0 var(--lip),
    0 0 30px -6px rgb(var(--a-rgb) / 0.7);
}

/* Relleno de neón (botones secundarios y pestañas): una capa con el destello rosa → azul que entra desde la izquierda
   con un fundido rápido y, al quitar el ratón, se recoge hacia la derecha mientras se desvanece (sin dejar una línea).
   El destello se sigue deslizando por dentro mientras está lleno. */
.btn-ghost:not(.is-loading)::before,
.tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--shimmer) 0 0 / 220% 100%;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition:
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.32s ease 0.06s,
    background-position 0.9s var(--ease);
  pointer-events: none;
}

.btn-ghost:hover::before,
.tab:hover::before {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left center;
  background-position: 100% 0;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease,
    background-position 0.9s var(--ease);
}

.tab[aria-selected='true']::before {
  display: none;
}

.btn-discord {
  --a: #7d87ff;
  --b: #5865f2;
  --lip: #343db0;
  --fg: #fff;
  --glow: rgba(88, 101, 242, 0.65);
}

.btn-whatsapp {
  --a: #4fe08a;
  --b: #1faa55;
  --lip: #0d6b33;
  --fg: #fff;
  --glow: rgba(37, 211, 102, 0.6);
  text-shadow: 0 1px 2px rgba(0, 40, 15, 0.45);
}

/* «Visitar la tienda» de la portada: el mismo destello que el botón principal, en esmeralda vivo y azul */
.btn-shop {
  --lip: #04594a;
  --fg: #fff;
  --glow: rgb(16 220 170 / 0.75);
  background: var(--shimmer-sea) 0 0 / 220% 100%;
  text-shadow: 0 1px 2px rgba(0, 40, 40, 0.5);
  box-shadow:
    inset 0 0 0 1px rgb(200 255 240 / 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 var(--lift) 0 var(--lip),
    0 0 22px -4px rgb(16 220 170 / 0.55),
    0 12px 26px -12px var(--glow);
}

.btn-shop:hover {
  background-position: 100% 0;
  box-shadow:
    inset 0 0 0 1px rgb(200 255 240 / 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 calc(var(--lift) + 2px) 0 var(--lip),
    0 0 34px -2px rgb(16 220 170 / 0.75),
    0 0 60px -14px rgb(60 140 255 / 0.65);
  animation: btn-breathe-sea 1.8s ease-in-out 0.3s infinite;
}

/* PayPal: su amarillo y su azul (como pide su guía de marca) */
.btn-paypal {
  --a: #ffd55e;
  --b: #ffc439;
  --lip: #c08a00;
  --fg: #142c8e;
  --glow: rgba(255, 196, 57, 0.55);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}

.pp-word {
  font: italic 800 17px/1 var(--font-body);
  color: #003087;
}

.pp-word i {
  color: #0079c1;
}

.btn-coin {
  --a: #ffe08a;
  --b: #f5b324;
  --lip: #9a5c08;
  --fg: #2b1a00;
  --glow: rgba(245, 179, 36, 0.55);
}

.btn-sm {
  --lift: 3px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 11px;
}

.btn-lg {
  --lift: 5px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 14px;
  font-size: 13.5px;
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  animation: none;
  filter: grayscale(0.75) brightness(0.7);
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 0 var(--lip);
}

.btn:disabled::after {
  display: none;
}

/* Mientras espera al servidor: una rueda delante del texto */
.btn.is-loading {
  pointer-events: none;
  filter: none;
}

.btn.is-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

.link-btn {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #a5b0ff;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s;
}

.link-btn:hover {
  color: #c7cdff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Cabecera ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  view-transition-name: header;
  transition:
    background-color 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}

/* Sobre la portada, un degradado oscuro para leer los enlaces; al bajar, sólida */
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 -30px;
  z-index: -1;
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.7), transparent);
  pointer-events: none;
  transition: opacity 0.35s;
}

.header.solid,
body:not([data-hero]) .header {
  /* Sólida al bajar, con una línea de neón abajo */
  background:
    linear-gradient(90deg, transparent 4%, rgb(var(--a-rgb) / 0.55), rgb(var(--v-rgb) / 0.4), rgb(var(--c-rgb) / 0.5), transparent 96%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #0d0a26, #09071c);
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.9);
}

.header.solid::before,
body:not([data-hero]) .header::before {
  opacity: 0;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand img {
  width: 34px;
  height: auto;
  transition: transform 0.4s var(--spring);
}

.brand:hover img {
  transform: rotate(-8deg) scale(1.08);
}

.brand span {
  font: 700 14px/1 var(--font-display);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav {
  display: none;
}

.nav a {
  position: relative;
  padding: 10px 2px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  transition: color 0.2s;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--a-400), var(--violet), var(--cyan));
  box-shadow: 0 0 10px rgb(var(--a-rgb) / 0.7);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: #fff;
}

.nav a:hover::after,
.nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.header-actions {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions .btn-primary {
  display: none;
}

.ip-chip {
  display: none;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 5px 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.75);
  font: 700 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.ip-chip:hover {
  border-color: rgb(var(--a-rgb) / 0.5);
}

.ip-chip:hover .hint {
  color: #fff;
  background: var(--shimmer) 100% 0 / 220% 100%;
}

.ip-chip .hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgb(var(--a-rgb) / 0.12);
  color: var(--a-300);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.ip-chip .hint svg {
  width: 14px;
  height: 14px;
}

.ip-chip.copied .hint {
  background: var(--a-400);
  color: var(--on-accent);
  animation: pop 0.45s var(--spring);
}

/* Punto de estado: verde con un latido cuando el servidor está en línea */
.dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.dot.online {
  background: var(--ok);
}

.dot.online::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: ping 2s var(--ease) infinite;
}

.dot.offline {
  background: var(--red);
}

.menu-btn,
.account-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: var(--r);
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.75);
  color: var(--text);
  transition:
    border-color 0.2s,
    background-color 0.2s,
    transform 0.2s var(--ease);
}

.menu-btn {
  width: 42px;
  padding: 0;
}

.account-chip {
  max-width: 190px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
}

.menu-btn:hover,
.account-chip:hover {
  border-color: rgb(var(--a-rgb) / 0.5);
  background: var(--s2);
}

.menu-btn:active,
.account-chip:active {
  transform: scale(0.96);
}

.menu-btn svg,
.account-chip svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.account-chip img {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 6px;
}

.account-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip.signed {
  padding-left: 7px;
}

@media (max-width: 599px) {
  .account-chip span {
    display: none;
  }

  .account-chip,
  .account-chip.signed {
    width: 42px;
    padding: 0;
  }
}

/* Menú del móvil: entra desde la derecha */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 55% at 100% 0%, rgb(var(--a2-rgb) / 0.14), transparent 60%),
    radial-gradient(110% 50% at 0% 100%, rgb(var(--v2-rgb) / 0.16), transparent 60%),
    var(--bg);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.45s var(--ease),
    visibility 0s linear 0.45s;
}

.sheet.open {
  transform: none;
  visibility: visible;
  transition: transform 0.45s var(--ease);
}

.sheet-top {
  flex: none;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet nav {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.sheet nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: rgb(var(--s1-rgb) / 0.85);
  font: 600 18px/1.2 var(--font-display);
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.sheet nav a svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.sheet nav a[aria-current='page'] {
  border-color: rgb(var(--a-rgb) / 0.45);
  color: var(--a-300);
}

.sheet nav a[aria-current='page'] svg {
  color: var(--a-300);
}

.sheet.open nav a {
  animation: rise 0.5s var(--ease) both;
}

.sheet.open nav a:nth-child(2) {
  animation-delay: 0.05s;
}

.sheet.open nav a:nth-child(3) {
  animation-delay: 0.1s;
}

.sheet.open nav a:nth-child(4) {
  animation-delay: 0.15s;
}

.sheet.open nav a:nth-child(5) {
  animation-delay: 0.2s;
}

.sheet-foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
}

/* ---------- Caja de la IP (portada y menú) ---------- */

.ip-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 8px 8px 8px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgb(var(--bg-rgb) / 0.82);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
  text-align: left;
  transition:
    border-color 0.25s,
    transform 0.25s var(--ease);
}

.ip-box:hover {
  border-color: rgb(var(--a-rgb) / 0.55);
  transform: translateY(-2px);
}

.ip-box:active {
  transform: translateY(1px);
}

.ip-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ip-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ip-box .ip {
  overflow: hidden;
  text-overflow: ellipsis;
  font: 800 18px/1.1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.ip-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 46px;
  padding: 0 16px;
  border-radius: 11px;
  background: rgb(var(--a-rgb) / 0.13);
  color: var(--a-300);
  font: 700 11.5px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background-color 0.25s,
    box-shadow 0.25s,
    color 0.25s;
}

.ip-copy svg {
  width: 16px;
  height: 16px;
}

.ip-box:hover .ip-copy {
  color: #fff;
  background: var(--shimmer) 100% 0 / 220% 100%;
  box-shadow: 0 0 22px -6px rgb(var(--a-rgb) / 0.7);
}

.ip-box.copied {
  border-color: var(--a-400);
}

.ip-box.copied .ip-copy {
  background: var(--a-400);
  color: var(--on-accent);
  animation: pop 0.45s var(--spring);
}

/* ---------- Portada: héroe ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(100svh, 920px);
  padding: calc(var(--header-h) + 28px) 0 120px;
  overflow: hidden;
  text-align: center;
}

.hero-art,
.page-hero .hero-art,
.shop-head .hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero-art img {
  object-position: 50% 40%;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El héroe deja ver el fondo fijo (el reino de noche): solo una viñeta suave detrás del texto */
  background:
    radial-gradient(60% 45% at 50% 52%, rgb(var(--bg-rgb) / 0.45), transparent 75%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.35) 0%, transparent 25%);
}

/* Luz de neón sobre el arte del reino: rosa abajo a la izquierda, violeta a la derecha y cian en el centro */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 0% 85%, rgb(var(--a2-rgb) / 0.34), transparent 70%),
    radial-gradient(55% 55% at 100% 75%, rgb(var(--v2-rgb) / 0.4), transparent 70%),
    radial-gradient(40% 30% at 50% 95%, rgb(var(--c-rgb) / 0.16), transparent 70%);
  /* Que la luz se apague antes del borde inferior: sin cortes al pasar a la sección siguiente */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-mark {
  position: relative;
  width: 168px;
  margin-bottom: 18px;
}

.logo-mark img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
  animation: float 6s ease-in-out infinite;
}

.logo-mark .glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--a-rgb) / 0.35), rgb(var(--v2-rgb) / 0.18) 55%, transparent 75%);
  animation: glow 6s ease-in-out infinite;
}

/* Destello que cruza el emblema cada pocos segundos, recortado a su silueta. Va dentro de la misma capa que flota. */
.logo-mark .shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url('/img/logo.webp') center / contain no-repeat;
  mask: url('/img/logo.webp') center / contain no-repeat;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

.logo-mark .shine::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 246, 255, 0.18) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 246, 255, 0.18) 65%, transparent 90%);
  transform: translateX(0) skewX(-14deg);
  animation: shine 6s var(--ease) infinite;
}

/* Al entrar en la página el emblema aparece con un pequeño salto */
.js .logo-mark {
  animation: logo-in 1.1s var(--spring) both;
}

.js:not(.ready) .logo-mark {
  animation-play-state: paused;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgb(var(--bg-rgb) / 0.72);
  font-size: 14px;
  font-weight: 700;
}

.hero-title {
  margin-top: 18px;
  font: 800 clamp(34px, 8vw, 80px) / 1.02 var(--font-display);
  letter-spacing: -0.03em;
  color: #fff;
  /* Letras limpias: solo una sombra oscura para que se lean sobre la imagen */
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 10px 36px rgba(0, 0, 0, 0.65);
}

/* Las letras del título suben una a una (cada letra lleva --i en pages.py; las palabras no se parten) */
.hero-title .w {
  display: inline-block;
  white-space: nowrap;
}

.js .hero-title .ch {
  display: inline-block;
  animation: letter-in 0.9s var(--spring) both;
  animation-delay: calc(0.25s + var(--i) * 0.035s);
}

.js:not(.ready) .hero-title .ch {
  animation-play-state: paused;
}

.hero .lead {
  max-width: 620px;
  margin: 20px auto 0;
  color: #dfe4ee;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.hero-cta {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  margin-top: 32px;
}

.hero-meta {
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Debajo de «Minecraft Java · Forge»: Discord, WhatsApp y cómo entrar, en una fila (en el móvil, uno debajo de otro) */
.hero-links {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  margin-top: 20px;
}

.hero-links .btn {
  min-height: 46px;
}

@media (min-width: 760px) {
  .hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 980px;
  }
}

/* Entrada escalonada del héroe cuando termina la carga */
.hero-inner > *,
.page-hero .wrap > *,
.shop-head-inner > * {
  animation: rise 0.9s var(--ease) both;
}

.js:not(.ready) .hero-inner > *,
.js:not(.ready) .page-hero .wrap > *,
.js:not(.ready) .shop-head-inner > * {
  animation-play-state: paused;
}

.hero-inner > :nth-child(2),
.page-hero .wrap > :nth-child(2),
.shop-head-inner > :nth-child(2) {
  animation-delay: 0.08s;
}

.hero-inner > :nth-child(3),
.page-hero .wrap > :nth-child(3) {
  animation-delay: 0.16s;
}

.hero-inner > :nth-child(4) {
  animation-delay: 0.24s;
}

.hero-inner > :nth-child(5) {
  animation-delay: 0.32s;
}

.hero-inner > :nth-child(6) {
  animation-delay: 0.4s;
}

.hero-inner > :nth-child(7) {
  animation-delay: 0.48s;
}

/* ---------- Portada: cifras del servidor ---------- */

/* ---------- Tarjetas (superficie común) ---------- */

/* Superficie opaca y más clara que el fondo, con un filo claro alrededor, una línea de neón arriba, una sombra que la
   despega del fondo y un halo violeta suave. Así cada tarjeta se distingue sobre la nebulosa. */
.panel,
.frame {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--edge);
  background:
    linear-gradient(90deg, transparent 4%, rgb(var(--a-rgb) / 0.8), rgb(var(--c-rgb) / 0.65), transparent 96%) top / 100% 1px no-repeat,
    radial-gradient(120% 70% at 50% 0%, rgb(var(--v-rgb) / 0.1), transparent 60%),
    var(--surface);
  box-shadow: var(--card-shadow), var(--haze);
}

/* ---------- Portada: pilares ---------- */

/* ---------- Páginas interiores: cabecera con el arte ---------- */

.page-hero,
.shop-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-hero {
  padding: calc(var(--header-h) + 64px) 0 56px;
  text-align: center;
}

/* Página 404: el número enorme con el degradado de neón detrás del título */
.page-hero.lost {
  display: grid;
  align-items: center;
  min-height: min(88svh, 820px);
}

.lost-code {
  display: block;
  margin-bottom: 4px;
  font: 800 clamp(96px, 22vw, 220px) / 0.9 var(--font-display);
  letter-spacing: -0.06em;
  background: var(--shimmer) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 40px rgb(var(--a-rgb) / 0.35));
  animation:
    shimmer-flow 6s ease-in-out infinite alternate,
    float 6s ease-in-out infinite;
}

.page-hero.lost .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.page-hero .hero-art img,
.shop-head .hero-art img {
  object-position: 50% 30%;
  opacity: 0.45;
}

.page-hero::before,
.shop-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 15% 75%, rgb(var(--a2-rgb) / 0.14), transparent 70%),
    radial-gradient(55% 80% at 90% 65%, rgb(var(--v2-rgb) / 0.16), transparent 70%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.3), transparent);
  /* Se funde abajo con el fondo: sin corte al final de la cabecera */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.page-hero h1 {
  margin-top: 18px;
  font: 800 clamp(32px, 7vw, 60px) / 1.06 var(--font-display);
  letter-spacing: -0.03em;
}

.page-hero p {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--text-2);
  font-size: 18px;
}

/* ---------- Bloques comunes ---------- */

.feature {
  padding: 24px;
  transition:
    transform 0.35s var(--ease),
    border-color 0.3s;
}

.feature:hover {
  transform: translateY(-4px);
  border-color: var(--edge-hot);
  box-shadow: var(--card-shadow), var(--haze-hot);
}

.feature .icon,
.trust .icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--a-300);
  background: rgb(var(--a-rgb) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--a-rgb) / 0.25);
}

.feature .icon svg,
.trust .icon svg {
  width: 22px;
  height: 22px;
}

.feature h3 {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 600;
}

.feature p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.split {
  display: grid;
  gap: 32px;
  align-items: center;
}

.split .media {
  overflow: hidden;
  padding: 0;
  border-radius: var(--r-xl);
}

.split .media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.split .media:hover img {
  transform: scale(1.04);
}

.split .h2 {
  margin-top: 16px;
}

.split .muted {
  margin: 14px 0 0;
  font-size: 17px;
}

.list-check {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.list-check li,
.perks li {
  position: relative;
  padding-left: 32px;
  color: var(--text-2);
}

.list-check li::before,
.perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--check) center / 14px no-repeat, rgb(var(--a-rgb) / 0.12);
}

.steps {
  counter-reset: step;
}

.step {
  overflow: hidden;
  padding: 26px 24px;
  transition:
    transform 0.35s var(--ease),
    border-color 0.3s;
}

.step:hover {
  transform: translateY(-4px);
  border-color: var(--edge-hot);
  box-shadow: var(--card-shadow), var(--haze-hot);
}

.step::after {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 6px;
  right: 18px;
  font: 800 72px/1 var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(var(--a-rgb) / 0.25);
}

.step h3 {
  position: relative;
  max-width: 80%;
  font-size: 18px;
  font-weight: 600;
}

.step p {
  position: relative;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.rules {
  counter-reset: rule;
  display: grid;
  gap: 12px;
}

.rule {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s;
}

.rule:hover {
  transform: translateX(4px);
  border-color: var(--edge-hot);
  box-shadow: var(--card-shadow), var(--haze-hot);
}

.rule::before {
  counter-increment: rule;
  content: counter(rule);
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font: 700 16px/1 var(--font-display);
  color: var(--on-accent);
  background: var(--pri-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 var(--pri-lip);
}

.rule b {
  display: block;
  font: 600 16px/1.3 var(--font-display);
}

.rule span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

/* Preguntas frecuentes: se abren con una transición de altura donde el navegador lo admite */
.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin-inline: auto;
}

.faq details {
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: var(--s1);
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

.faq details:hover {
  border-color: var(--bd-2);
}

.faq details[open] {
  border-color: rgb(var(--a-rgb) / 0.35);
  background: var(--s2);
}

.faq details::details-content {
  height: 0;
  overflow: hidden;
  transition:
    height 0.35s var(--ease),
    content-visibility 0.35s allow-discrete;
}

.faq details[open]::details-content {
  height: auto;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 16.5px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Un «+» que gira y se convierte en «×» */
.faq summary::after {
  content: '';
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background:
    linear-gradient(var(--a-300), var(--a-300)) center / 12px 2px no-repeat,
    linear-gradient(var(--a-300), var(--a-300)) center / 2px 12px no-repeat,
    rgb(var(--a-rgb) / 0.1);
  transition: transform 0.35s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq details p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--text-2);
}

.timeline {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  box-shadow: var(--card-shadow);
}

.timeline .num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  font: 700 18px var(--font-display);
  color: var(--on-accent);
  background: var(--pri-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 0 var(--pri-lip);
}

.timeline h3 {
  font-size: 18px;
  font-weight: 600;
}

.timeline p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Banda final: el arte del reino con la luz esmeralda y amatista */
.cta-band {
  overflow: hidden;
  isolation: isolate;
  padding: 48px 22px;
  border-radius: var(--r-xl);
  text-align: center;
  background: var(--s0);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(var(--bg-rgb) / 0.78), rgb(var(--bg-rgb) / 0.92)),
    url('/img/nebula-1280.webp') center 35% / cover no-repeat;
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 80% at 0% 100%, rgb(var(--a2-rgb) / 0.3), transparent 70%),
    radial-gradient(50% 80% at 100% 0%, rgb(var(--v2-rgb) / 0.32), transparent 70%);
}

.cta-band h2 {
  margin-top: 16px;
  font: 800 clamp(26px, 5vw, 44px) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
}

.cta-band p {
  max-width: 540px;
  margin: 16px auto 0;
  color: var(--text-2);
  font-size: 17px;
}

.cta-band .actions {
  display: grid;
  gap: 12px;
  max-width: 340px;
  margin: 30px auto 0;
}

/* ---------- Páginas legales ---------- */

.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-tabs a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  transition:
    border-color 0.2s,
    color 0.2s,
    background-color 0.2s;
}

.legal-tabs a:hover {
  border-color: rgb(var(--a-rgb) / 0.45);
  color: #fff;
}

.legal-tabs a[aria-current='page'] {
  border-color: transparent;
  background: var(--pri-grad);
  color: var(--on-accent);
}

.legal-layout {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

.legal-toc {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: var(--s1);
}

.legal-toc b {
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-toc ol {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal-toc a {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  color: var(--text-2);
  font-size: 14.5px;
  transition: color 0.2s;
}

.legal-toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  color: var(--faint);
  font: 700 12px/1.9 var(--font-display);
}

.legal-toc a:hover {
  color: var(--a-300);
}

.legal-date {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bd);
  color: var(--muted);
  font-size: 13px;
}

.legal-doc {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.legal-section {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  box-shadow: var(--card-shadow);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.legal-section:target {
  border-color: rgb(var(--a-rgb) / 0.5);
}

.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 700 clamp(18px, 2.6vw, 22px) / 1.25 var(--font-display);
}

.legal-section h2 span {
  color: var(--a-400);
  font-size: 0.75em;
}

.legal-section p,
.legal-section li {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.7;
}

.legal-section p {
  margin: 14px 0 0;
}

.legal-section ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 20px;
}

.legal-section li::marker {
  color: var(--a-400);
}

.legal-section b {
  color: var(--text);
}

.legal-section a,
.legal-contact a,
.shop-legal a,
.pay-legal a,
.faq a,
.disclaimer a {
  color: var(--a-300);
  text-decoration: underline;
  text-decoration-color: rgb(var(--a3-rgb) / 0.4);
  text-underline-offset: 3px;
}

.legal-section code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.9em;
}

/* El aviso de no afiliación, bien visible */
.legal-callout {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid rgba(252, 201, 74, 0.4);
  background: rgba(252, 201, 74, 0.08);
}

.legal-callout p {
  margin: 0;
  color: var(--text);
}

.legal-callout p + p {
  margin-top: 8px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

.legal-contact {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Aviso legal de la tienda y de la ventana de compra */
.shop-legal {
  max-width: 900px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.pay-legal {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.55;
}

/* ---------- Pie ---------- */

.footer {
  position: relative;
  margin-top: 0;
  padding: 56px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bd);
  background: var(--bg-2);
}

.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--a-400), var(--violet), transparent);
  opacity: 0.6;
}

.footer-inner {
  display: grid;
  gap: 36px;
}

.footer-brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.footer-brand img {
  width: 48px;
  height: auto;
  flex: none;
}

.footer-brand b {
  font: 700 16px/1.3 var(--font-display);
}

.footer-brand p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
}

.footer h4 {
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.footer ul a {
  display: inline-block;
  color: var(--text-2);
  font-size: 15px;
  transition:
    color 0.2s,
    transform 0.25s var(--ease);
}

.footer ul a:hover {
  color: var(--a-300);
  transform: translateX(3px);
}

/* Aviso de no afiliación con Mojang y Microsoft (obligatorio, en todas las páginas) */
.disclaimer {
  margin: 40px 0 0;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.disclaimer b {
  color: var(--text-2);
}

.disclaimer span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--bd);
  color: var(--faint);
  font-size: 13px;
}

.copyright {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Firma discreta en la esquina de abajo */
.credit {
  position: absolute;
  right: 16px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--faint);
  opacity: 0.75;
}

/* ---------- Tarjetas de la tienda y precios ---------- */

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.price {
  font: 700 21px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.price small {
  display: block;
  margin-bottom: 5px;
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: 0;
  color: var(--muted);
}

.price.free {
  color: var(--a-400);
}

.price.owned {
  font-size: 15px;
  color: var(--a-400);
}

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
  font-size: 14px;
}

.notice svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* ---------- Tienda ---------- */

.shop-head {
  padding: calc(var(--header-h) + 48px) 0 4px;
}

.shop-head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 24px;
}

.shop-head h1 {
  margin-top: 16px;
  font: 800 clamp(38px, 7vw, 64px) / 1.02 var(--font-display);
  letter-spacing: -0.03em;
}

.shop-head .lead {
  max-width: 580px;
  margin: 16px 0 0;
}

.shop-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  height: 50px;
  padding: 0 16px;
  border-radius: var(--r);
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.85);
  color: var(--muted);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.shop-search:focus-within {
  border-color: var(--a-400);
  box-shadow: 0 0 0 4px rgb(var(--a-rgb) / 0.14);
}

.shop-search svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.shop-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.shop-body {
  padding-bottom: 64px;
}

/* Pestañas: un mando segmentado; cada pestaña es un botón que se ve (fondo y filo propios), al pasar el ratón se llena
   de izquierda a derecha con el destello rosa → azul y la elegida lo lleva fluyendo despacio */
.shop-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 30px;
  padding: 6px;
  border-radius: var(--r-lg);
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r);
  isolation: isolate;
  overflow: hidden;
  background: rgb(var(--line-rgb) / 0.06);
  box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.14);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    color 0.25s,
    box-shadow 0.25s,
    transform 0.25s var(--spring);
}

.tab:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgb(255 214 247 / 0.45),
    0 0 22px -6px rgb(var(--a-rgb) / 0.6);
}

.tab:active {
  transform: scale(0.97);
}

.tab .count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
}

.tab .count:empty {
  display: none;
}

.tab:hover .count {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}

.tab[aria-selected='true'] {
  color: var(--on-accent);
  background: var(--shimmer) 0 0 / 220% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 var(--pri-lip),
    0 0 26px -6px rgb(var(--a-rgb) / 0.65);
  animation: shimmer-flow 5s ease-in-out infinite alternate;
}

.tab[aria-selected='true'] .count {
  background: rgb(var(--on-accent-rgb) / 0.18);
  color: var(--on-accent);
}

.shop-intro {
  margin: 26px 0 0;
  max-width: 760px;
  font-size: 16px;
}

.products {
  margin-top: 24px;
}

/* Al cambiar de pestaña, el contenido entra escalonado */
.products > * {
  /* backwards: al terminar deja de aplicarse, así la tarjeta se eleva suave al pasar el ratón */
  animation: rise 0.6s var(--ease) backwards;
}

.products > :nth-child(2) {
  animation-delay: 0.05s;
}

.products > :nth-child(3) {
  animation-delay: 0.1s;
}

.products > :nth-child(4) {
  animation-delay: 0.15s;
}

.products > :nth-child(5) {
  animation-delay: 0.2s;
}

.products > :nth-child(6) {
  animation-delay: 0.25s;
}

.products > :nth-child(7) {
  animation-delay: 0.3s;
}

.products > :nth-child(n + 8) {
  animation-delay: 0.35s;
}

.crate-empty {
  margin: 16px 0 0;
}

/* Regalos, rangos y monedas */
.product {
  --t1: var(--gold);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    border-color 0.3s,
    box-shadow 0.4s var(--ease);
}

.product::before,
.crate-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--t1), var(--t2, var(--t1)));
}

.product:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--t1) 50%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--t1) 30%, transparent),
    0 0 34px -10px color-mix(in srgb, var(--t1) 80%, transparent),
    0 28px 50px -26px color-mix(in srgb, var(--t1) 70%, transparent);
}

/* min-height: 0 para que la proporción mande y todas las imágenes midan lo mismo */
.product .thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(55% 75% at 50% 62%, var(--t3, rgba(252, 201, 74, 0.2)), transparent 75%),
    linear-gradient(180deg, var(--s1), var(--s0));
  border-bottom: 1px solid var(--bd);
}

.product .thumb-try {
  position: relative;
  width: 100%;
  padding: 0;
  border-width: 0 0 1px;
  border-style: solid;
  color: inherit;
  cursor: pointer;
}

.product .thumb img {
  width: 86%;
  height: 74%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

.product:hover .thumb img.ok {
  transform: translateY(-5px) scale(1.05);
}

.product .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.product .cat,
.dialog .cat,
.viewer .cat,
.cv-head .cat,
.account-card .cat {
  font: 800 11px/1.2 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t1, var(--a-300));
}

.product h3 {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 600;
}

.product p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.perks {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}

.perks li {
  padding-left: 30px;
}

.perks li::before {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-size: 12px;
}

.trust {
  display: grid;
  gap: 12px;
  margin-top: 48px;
}

.trust .item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
}

.trust b {
  display: block;
  font: 600 15px/1.35 var(--font-display);
}

.trust span:not(.icon) {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

/* Lo que compras es tuyo para siempre: permanentes, irrompibles y vinculados a la cuenta */
.owned {
  margin-top: 16px;
  padding: 26px 22px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.owned-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.owned-head .icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #fff;
  background: var(--pri-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 26px -6px rgb(var(--a-rgb) / 0.7);
}

.owned-head .icon svg {
  width: 26px;
  height: 26px;
}

.owned h2 {
  margin: 2px 0 6px;
  font-size: clamp(19px, 2.4vw, 24px);
}

.owned-head p {
  margin: 0;
  color: var(--text-2);
}

.owned-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.owned-list li {
  padding: 16px 18px 16px 46px;
  border-radius: var(--r);
  background:
    var(--check) 16px 18px / 18px no-repeat,
    rgb(var(--bg-rgb) / 0.45);
  box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.16);
  transition:
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.owned-list li:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgb(var(--a-rgb) / 0.5),
    0 0 24px -10px rgb(var(--a-rgb) / 0.7);
}

.owned-list b {
  display: block;
  font: 600 15px/1.35 var(--font-display);
}

.owned-list span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Rangos: la escalera y el escaparate con el personaje (un solo lienzo 3D) ---------- */
/* Una sola columna (la regla general de .products pone varias desde 960px) */
.products.rank-shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* La escalera de rangos, de menor a mayor; en el móvil se desliza de lado */
.rk-ladder {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: var(--s1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.rk-ladder::-webkit-scrollbar {
  display: none;
}

.rk-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  scroll-snap-align: center;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    transform 0.3s var(--ease);
}

.rk-step:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.03);
}

.rk-step[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--rk) 55%, transparent);
  background: linear-gradient(180deg, var(--rk3), transparent 90%);
}

.rk-gem {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--rk2, var(--t1)), var(--rk, var(--t2)));
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
  transform: rotate(45deg);
  transition:
    transform 0.4s var(--spring),
    box-shadow 0.4s;
}

.rk-step[aria-pressed='true'] .rk-gem {
  transform: rotate(45deg) scale(1.3);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.35),
    0 0 18px var(--rk);
}

.rk-step-name {
  font: 700 11px/1.1 var(--font-display);
  color: var(--rk2);
  white-space: nowrap;
}

.rk-step-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.rk-step[aria-pressed='true'] .rk-step-price {
  color: var(--text);
}

.rk-show {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--rk) 35%, var(--bd));
  background:
    radial-gradient(90% 60% at 30% 35%, var(--rk3), transparent 70%),
    linear-gradient(180deg, var(--s1), var(--bg-2));
  box-shadow: 0 30px 60px -36px var(--rk);
  transition:
    border-color 0.5s,
    box-shadow 0.6s;
}

/* El escenario del personaje: brillo del color del rango y una sombra en el suelo */
.rk-stage,
.cos-stage {
  position: relative;
  isolation: isolate;
  height: 440px;
  cursor: grab;
  touch-action: pan-y;
}

.rk-stage:active,
.cos-stage:active {
  cursor: grabbing;
}

.rk-stage canvas,
.cos-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rk-aura {
  position: absolute;
  inset: 8% 14% 16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rk, var(--t2, var(--a-400))), transparent 75%);
  opacity: 0.45;
  animation: crate-pulse 4s ease-in-out infinite;
}

.rk-floor {
  position: absolute;
  top: var(--feet-y, 93%);
  left: var(--feet-x, 50%);
  z-index: -1;
  width: 190px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  box-shadow: 0 0 40px -6px var(--rk3, var(--t3, transparent));
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
}

.anchored .rk-floor,
.anchored .rk-nametag {
  opacity: 1;
}

.rk-stage .viewer-status,
.cos-stage .viewer-status {
  inset: 50% 0 auto;
}

/* Nombre sobre la cabeza, como en el juego: sigue a la cabeza al girar */
.rk-nametag {
  position: absolute;
  top: var(--head-y, 16px);
  left: var(--head-x, 50%);
  max-width: calc(100% - 24px);
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  font: 700 14px/1.3 var(--font-body);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.4s;
  pointer-events: none;
}

.rk-tag-prefix {
  margin-right: 6px;
  color: var(--rk);
}

.rk-stage .rk-skin,
.cos-stage .rk-skin {
  top: auto;
  right: auto;
  bottom: 12px;
  left: 12px;
}

.rk-drag {
  position: absolute;
  right: 14px;
  bottom: 24px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--faint);
  pointer-events: none;
}

.rk-info {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 22px;
  border-top: 1px solid var(--bd);
}

/* Al cambiar de rango, el texto entra de nuevo */
.rk-anim {
  display: flex;
  flex: 1;
  flex-direction: column;
  animation: rise 0.55s var(--ease) both;
}

.rk-tier {
  font: 800 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rk2);
}

.rk-name {
  margin: 10px 0 0;
  font: 800 clamp(38px, 9vw, 64px) / 1 var(--font-display);
  color: var(--rk);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
}

.rk-tagline {
  margin: 10px 0 0;
  font: 700 17px/1.35 var(--font-display);
  color: var(--text);
}

.rk-pitch {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

/* Así se ve el nombre en el chat del juego */
.rk-chat {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rk-chat-prefix {
  color: var(--rk);
  font-weight: 800;
}

.rk-chat-msg {
  color: var(--text-2);
}

.rk-perks {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.rk-perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 14.5px;
}

.rk-perks svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 7px;
  background: var(--rk3);
  color: var(--rk2);
}

/* Debajo del escaparate: lo que trae el rango en el servidor, con sus comandos */
.rk-cmds {
  margin-top: 18px;
  padding: 22px;
  border-color: color-mix(in srgb, var(--rk) 35%, transparent);
}

.rk-cmds-head h3 {
  font: 800 clamp(17px, 2.4vw, 21px) / 1.25 var(--font-display);
  letter-spacing: -0.02em;
}

.rk-cmds-name {
  color: var(--rk);
}

.rk-cmds-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.rk-cmds-head b {
  color: var(--rk2);
}

.rk-cmd-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.rk-cmd-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  background: rgb(var(--bg-rgb) / 0.45);
  font-size: 14.5px;
  animation: rise 0.5s var(--ease) both;
}

.rk-cmd-list li:nth-child(2n) {
  animation-delay: 0.04s;
}

.rk-cmd-list li:nth-child(3n) {
  animation-delay: 0.08s;
}

.rk-cmd-list li.is-new {
  border-color: color-mix(in srgb, var(--rk) 45%, transparent);
  background: linear-gradient(90deg, var(--rk3), rgb(var(--bg-rgb) / 0.45) 70%);
}

.rk-cmd-list code {
  flex: none;
  min-width: 86px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgb(var(--bg-rgb) / 0.75);
  border: 1px solid var(--bd-2);
  color: var(--rk2);
  font: 700 13px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  text-align: center;
}

.rk-cmd-ico {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 86px;
}

.rk-cmd-ico svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 7px;
  background: var(--rk3);
  color: var(--rk2);
}

.rk-cmd-text {
  flex: 1;
  min-width: 0;
  color: var(--text);
}

.rk-new {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rk);
  color: #0b0b10;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 760px) {
  .rk-cmds {
    padding: 26px 28px;
  }

  .rk-cmd-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pruébate las piezas: cada objeto, sin cajas, se pone o se quita en el personaje */
.rk-try {
  margin-top: 20px;
}

.rk-try-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 800 11.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.rk-reset {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rk) 45%, transparent);
  background: var(--rk3);
  color: var(--rk2);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    background-color 0.25s,
    border-color 0.25s;
}

.rk-reset:hover {
  border-color: var(--rk);
}

.rk-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.rk-piece {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    transform 0.3s var(--spring);
}

.rk-piece img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.rk-piece:hover {
  transform: translateY(-3px) scale(1.08);
  background: rgba(255, 255, 255, 0.04);
}

.rk-piece.worn {
  border-color: color-mix(in srgb, var(--rk) 55%, transparent);
  background: var(--rk3);
}

.rk-piece .worn-dot {
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: var(--rk);
  box-shadow: 0 0 8px var(--rk);
}

.rk-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
}

.rk-price small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rk-price-main {
  font: 800 30px/1.1 var(--font-display);
}

.btn-rank {
  --a: var(--rk2);
  --b: var(--rk);
  --lip: color-mix(in srgb, var(--rk) 50%, #000);
  --fg: #0b0b10;
  --glow: var(--rk3);
}

/* ---------- Cosméticos: el personaje con lo que te pruebas y las colecciones al lado ---------- */
.cos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

/* En el móvil el escenario se queda arriba mientras bajas por la lista */
.cos-stage-col {
  position: sticky;
  top: calc(var(--header-h) + 6px);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 6px;
  background: var(--bg);
}

.cos-stage {
  height: 270px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--t2, var(--a-400)) 30%, var(--bd));
  background:
    radial-gradient(80% 60% at 50% 40%, var(--t3, rgb(var(--a-rgb) / 0.2)), transparent 70%),
    linear-gradient(180deg, var(--s1), var(--bg-2));
}

.cos-stage .rk-drag {
  display: none;
}

.cos-buy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 8px 8px 10px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: var(--s1);
}

.cos-buy-art img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.cos-buy-text {
  flex: 1;
  min-width: 0;
}

.cos-buy-text small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.cos-buy-text b {
  display: block;
  overflow: hidden;
  font-size: 14.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cos-buy .btn {
  flex: none;
  padding: 0 14px;
}

.cos-head h2 {
  margin: 0;
}

.cos-head p {
  margin: 8px 0 0;
  font-size: 15px;
}

.cos-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bd-2);
  background: var(--s1);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.chip:hover {
  border-color: rgb(var(--a-rgb) / 0.5);
}

.chip[aria-pressed='true'] {
  border-color: transparent;
  background: var(--shimmer) 0 0 / 220% 100%;
  color: #fff;
  animation: shimmer-flow 5s ease-in-out infinite alternate;
}

.cos-themes {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.cos-theme {
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--t2, var(--a-400)) 9%, transparent), transparent 120px),
    var(--s1);
  animation: rise 0.5s var(--ease) both;
}

.cos-theme header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cos-theme h3 {
  margin: 0;
  font-size: 17px;
  color: var(--t1, var(--text));
}

.cos-pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cos-piece {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px 9px;
  border-radius: 14px;
  border: 1px solid var(--bd);
  background: var(--s2);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease),
    border-color 0.25s,
    background-color 0.25s,
    box-shadow 0.35s;
}

.cos-piece:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--t2, var(--a-400)) 60%, transparent);
}

.cos-piece[aria-pressed='true'] {
  border-color: var(--t2, var(--a-400));
  background: color-mix(in srgb, var(--t2, var(--a-400)) 14%, var(--s2));
  box-shadow: 0 14px 30px -18px var(--t2, var(--a-400));
}

.cos-art img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s var(--spring);
}

.cos-piece:hover .cos-art img {
  transform: scale(1.1) rotate(-3deg);
}

.cos-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.cos-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.cos-meta b {
  color: var(--text);
}

/* ---------- Crates: la tarjeta con el brillo de su color ---------- */

.crate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crate-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    border-color 0.3s,
    box-shadow 0.4s var(--ease);
}

.crate-tile:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--t2, var(--a-400)) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--t2, var(--a-400)) 30%, transparent),
    0 0 36px -10px var(--t2, var(--a-400)),
    0 28px 50px -24px var(--t2, var(--a-400));
}

.crate-tile-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(0, 0, 0, 0.4), transparent 70%),
    linear-gradient(180deg, var(--s1), var(--s0));
  cursor: pointer;
}

.crate-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  transition:
    opacity 0.5s var(--ease),
    scale 0.6s var(--spring),
    translate 0.6s var(--ease);
}

/* Al pasar el ratón la crate se acerca y sube (scale/translate: no pisan la flotación, que usa transform) */
.crate-tile:hover .crate-tile-art img.ok {
  scale: 1.1;
  translate: 0 -6px;
}

/* Destello que cruza la tarjeta al pasar el ratón */
.crate-tile::after,
.product::after,
.coin-item::after,
.cos-piece::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.13) 47%, rgb(var(--c-rgb) / 0.12) 53%, transparent 64%);
  transform: translateX(-115%);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}

.crate-tile:hover::after,
.product:hover::after,
.coin-item:hover::after,
.cos-piece:hover::after {
  transform: translateX(115%);
}

.coin-item,
.cos-piece {
  overflow: hidden;
}

/* En el ordenador las crates flotan despacio, cada una a su ritmo */
@media (hover: hover) and (min-width: 960px) {
  .crate-tile-art img.ok {
    animation: crate-float 7s ease-in-out infinite;
  }

  .crate-tile:nth-child(3n + 2) .crate-tile-art img.ok {
    animation-delay: -2.3s;
  }

  .crate-tile:nth-child(3n) .crate-tile-art img.ok {
    animation-delay: -4.6s;
  }
}

/* El brillo del color de la crate, que late (solo opacidad) */
.crate-glow {
  position: absolute;
  inset: 4% 8% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--t2, var(--a-400)), var(--t3, transparent) 55%, transparent 78%);
  opacity: 0.45;
  animation: crate-pulse 3.6s ease-in-out var(--d, 0s) infinite;
}

.crate-tile:hover .crate-glow {
  animation-duration: 1.8s;
}

.try-on {
  position: absolute;
  left: 50%;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--t1, var(--a-300)) 45%, transparent);
  background: rgb(var(--bg-rgb) / 0.85);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t1, var(--a-300));
  opacity: 0;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease);
}

.crate-tile:hover .try-on,
.crate-tile-art:focus-visible .try-on,
.product:hover .try-on,
.thumb-try:focus-visible .try-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.crate-tile .body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 18px 18px 18px;
}

.crate-tile h3 {
  font-size: 16px;
  font-weight: 600;
}

.crate-tile p,
.tile-tag {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.pieces {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t1, var(--a-300));
}

.crate-tile .card-foot {
  padding-top: 12px;
}

/* ---------- Ruleta ---------- */

.roulette {
  display: grid;
  gap: 30px;
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 90% at 100% 0%, rgb(var(--v2-rgb) / 0.2), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgb(var(--a2-rgb) / 0.1), transparent 60%),
    linear-gradient(180deg, var(--s2), var(--s1));
}

.roulette h2 {
  margin-top: 16px;
  font: 800 clamp(26px, 4.4vw, 40px) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
}

.roulette-info p {
  margin: 14px 0 0;
  max-width: 540px;
  color: var(--text-2);
  font-size: 15.5px;
}

.roulette .small {
  margin-top: 14px;
}

.spin-buttons {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.spin-buttons .btn {
  padding-inline: 12px;
}

.coin-spins {
  margin-top: 24px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(252, 201, 74, 0.24);
  background: rgba(252, 201, 74, 0.05);
}

.coin-spins-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
}

.coin-spins .spin-buttons {
  margin-top: 14px;
}

.coin-spins .small {
  margin: 12px 0 0;
}

.odds h3 {
  font: 800 12px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.odds ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.odds li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 72px 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  background: rgb(var(--bg-rgb) / 0.55);
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s;
}

.odds li:hover {
  transform: translateX(4px);
  border-color: var(--bd-2);
}

.odds li.rare {
  border-color: rgb(var(--v-rgb) / 0.5);
  background: linear-gradient(90deg, rgb(var(--v2-rgb) / 0.2), rgb(var(--bg-rgb) / 0.55));
}

.odds-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.odds-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.odds-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.odds-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.odds-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transform-origin: left;
  animation: bar-grow 0.9s var(--ease) 0.2s both;
}

.odds li.rare .odds-bar i {
  background: linear-gradient(90deg, var(--violet-2), var(--violet));
}

.odds li b {
  text-align: right;
  font: 700 13px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.roulette-weapons {
  margin-top: 44px;
}

.roulette-weapons h3 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
}

.roulette-weapons .section-head {
  margin-bottom: 0;
}

.roulette-weapons .section-head p {
  margin-top: 8px;
  font-size: 15px;
}

.roulette-reel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.reel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 6px 12px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  transition:
    transform 0.3s var(--ease),
    border-color 0.25s,
    box-shadow 0.3s;
}

.reel-item:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--v-rgb) / 0.55);
  box-shadow: 0 18px 34px -20px rgb(var(--v2-rgb) / 0.9);
}

.reel-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.4s var(--spring);
}

.reel-item:hover img {
  transform: rotate(-10deg) scale(1.12);
}

.reel-item span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: var(--text-2);
}

/* ---------- Tienda de monedas ---------- */

.coin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.coin-head h2 {
  font: 800 clamp(24px, 4vw, 34px) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.coin-head p {
  margin: 8px 0 0;
  font-size: 15px;
}

.coin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.coin-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 12px 14px;
  transition:
    transform 0.35s var(--ease),
    border-color 0.3s;
}

.coin-item:hover {
  transform: translateY(-4px);
  border-color: rgba(252, 201, 74, 0.55);
  box-shadow: var(--card-shadow), 0 0 0 1px rgba(252, 201, 74, 0.15), 0 0 30px -8px rgba(252, 201, 74, 0.5);
}

.coin-icon {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 6px;
  border-radius: var(--r);
  background:
    radial-gradient(50% 50% at 50% 55%, rgba(252, 201, 74, 0.16), transparent 75%),
    var(--s0);
  box-shadow: inset 0 0 0 1px var(--bd);
}

.coin-icon img {
  width: 54%;
  height: 54%;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform 0.4s var(--spring);
}

.coin-item:hover .coin-icon img.ok {
  transform: translateY(-4px) scale(1.08);
}

.coin-icon span {
  font: 800 34px var(--font-display);
  color: var(--gold);
}

.coin-item h3 {
  font: 700 15px/1.3 var(--font-body);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.coin-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font: 700 16px/1 var(--font-display);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.coin-item .btn {
  width: 100%;
  margin-top: 10px;
}

.coin-empty {
  margin-top: 22px;
  padding: 32px 24px;
  text-align: center;
  color: var(--muted);
}

.coin-empty p {
  margin: 0;
}

.coin-empty code,
.coin-note code {
  color: var(--text);
}

.coin-note {
  margin: 20px 0 0;
}

.hint3d {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--t1, var(--a-300));
}

/* ---------- Ventanas (compra, visor 3D y probador) ---------- */

/* En el móvil son hojas que suben desde abajo; desde 640px, ventanas centradas */
.dialog,
.viewer,
.crate-view {
  width: 100%;
  max-width: 100%;
  max-height: calc(100% - 20px);
  margin: auto 0 0;
  padding: 0;
  border: 1px solid var(--bd-2);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(180deg, var(--s2), var(--s1));
  color: var(--text);
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.8);
}

.dialog[open],
.viewer[open],
.crate-view[open] {
  animation: sheet-in 0.45s var(--ease);
}

.dialog::backdrop,
.viewer::backdrop,
.crate-view::backdrop {
  background: rgb(var(--bg-rgb) / 0.8);
  animation: fade-in 0.3s ease;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.6);
  color: var(--text);
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.3s var(--ease);
}

.dialog-close:hover {
  border-color: rgb(var(--a-rgb) / 0.5);
  background: var(--s3);
  transform: rotate(90deg);
}

.dialog-close svg {
  width: 18px;
  height: 18px;
}

/* ---------- Visor 3D ---------- */

.viewer {
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.viewer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 52px;
}

.viewer .cat {
  color: var(--violet);
}

.viewer h3 {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
}

.viewer-stage {
  position: relative;
  margin-top: 16px;
  height: min(62vh, 500px);
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background:
    radial-gradient(60% 60% at 50% 50%, rgb(var(--v2-rgb) / 0.2), transparent 70%),
    linear-gradient(180deg, var(--s1), var(--bg));
  overflow: hidden;
  touch-action: none;
}

.viewer-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.viewer-stage canvas:active {
  cursor: grabbing;
}

.viewer-status {
  position: absolute;
  inset: auto 0 16px;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.viewer-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 12px;
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.75);
  color: var(--text);
  transition:
    border-color 0.2s,
    transform 0.25s var(--ease);
}

.viewer-nav:hover {
  border-color: rgb(var(--v-rgb) / 0.6);
}

.viewer-nav.prev:hover {
  transform: translateX(-3px);
}

.viewer-nav.next:hover {
  transform: translateX(3px);
}

.viewer-nav svg {
  width: 20px;
  height: 20px;
}

.viewer-nav.prev {
  left: 12px;
}

.viewer-nav.next {
  right: 12px;
}

.viewer-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Ventana de compra ---------- */

.dialog {
  overflow: auto;
  overscroll-behavior: contain;
}

.dialog form {
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

.dialog-head {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-right: 48px;
}

.dialog-img {
  width: 72px;
  height: 72px;
  flex: none;
  object-fit: contain;
  padding: 6px;
  border-radius: 16px;
  background:
    radial-gradient(circle, var(--t3, rgba(252, 201, 74, 0.25)), transparent 70%),
    var(--s0);
  box-shadow: inset 0 0 0 1px var(--bd);
}

.dialog h3 {
  margin-top: 6px;
  font-size: 21px;
  font-weight: 700;
}

.dialog-desc {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 15px;
}

.field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.field label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
}

.field input {
  height: 52px;
  padding: 0 16px;
  border-radius: var(--r);
  border: 1px solid var(--bd-2);
  background: var(--bg-2);
  font-size: 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.field input:hover {
  border-color: rgb(var(--line-rgb) / 0.35);
}

.field input:focus {
  outline: none;
  border-color: var(--a-400);
  background: #0d121c;
  box-shadow: 0 0 0 4px rgb(var(--a-rgb) / 0.15);
}

.discord-box {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(88, 101, 242, 0.35);
  background: rgba(88, 101, 242, 0.08);
}

.discord-linked {
  display: flex;
  gap: 12px;
  align-items: center;
}

.discord-linked img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.discord-hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.dialog-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bd);
  color: var(--muted);
}

.dialog-total strong {
  font: 700 26px/1 var(--font-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dialog-total small {
  font-size: 12px;
  color: var(--a-300);
}

.error {
  min-height: 1em;
  margin: 10px 0 0;
  color: var(--red);
  font-size: 14px;
}

.pay-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.pay-actions .pay-btn {
  margin-top: 0;
}

.pay-btn {
  margin-top: 8px;
}

.pay-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.pay-note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--a-300);
}

/* Casilla de aceptación de los Términos (compra, crear cuenta y cuando cambian) */
.terms-check {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--bd-2);
  background: rgb(255 255 255 / 0.03);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.terms-check:hover {
  border-color: rgb(var(--a-rgb) / 0.45);
}

.terms-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.terms-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgb(var(--line-rgb) / 0.5);
  background: rgb(0 0 0 / 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.terms-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.terms-check input:checked + .terms-box {
  border-color: transparent;
  background: var(--pri-grad);
  box-shadow: 0 0 14px rgb(var(--a-rgb) / 0.45);
}

.terms-check input:checked + .terms-box::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.terms-check input:focus-visible + .terms-box {
  outline: 2px solid var(--a-300);
  outline-offset: 2px;
}

.terms-check:has(input:checked) {
  border-color: rgb(var(--a-rgb) / 0.4);
  background: rgb(var(--a-rgb) / 0.06);
  color: var(--text);
}

.terms-check a {
  color: var(--a-200);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-dialog {
  max-width: 480px;
}

.terms-dialog h3 {
  margin: 0 0 8px;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Jugador comprobado contra el servidor */
.player-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid var(--bd-2);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: var(--muted);
  animation: rise 0.35s var(--ease) both;
}

.player-card img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.player-card.found {
  border-color: rgb(var(--a-rgb) / 0.4);
  background: rgb(var(--a-rgb) / 0.07);
}

.player-card.missing,
.player-card.invalid,
.player-card.error,
.player-card.blocked {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.06);
  color: #f3c1c1;
}

.player-name {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-size: 15px;
}

.player-ok {
  display: block;
  color: var(--a-400);
}

.player-ok .on {
  font-weight: 700;
}

.player-note {
  display: block;
  margin-top: 4px;
  color: var(--gold);
}

.player-note.bad {
  color: var(--red);
}

.rank-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rank, var(--gold));
  border: 1px solid color-mix(in srgb, var(--rank, var(--gold)) 50%, transparent);
  background: color-mix(in srgb, var(--rank, var(--gold)) 13%, transparent);
}

.spinner {
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bd-2);
  border-top-color: var(--a-400);
  vertical-align: -3px;
  animation: spin 0.8s linear infinite;
}

/* ---------- Cuenta ---------- */

.account-grid {
  display: grid;
  gap: 16px;
}

.account-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 24px;
}

.account-card p {
  margin: 0;
}

.account-card > .btn {
  justify-self: start;
}

.account-who {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.account-who img {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.8);
}

.account-who img.round {
  border-radius: 50%;
}

.account-who > div {
  display: grid;
  gap: 5px;
  justify-items: start;
  min-width: 0;
}

.account-who b {
  font: 700 19px/1.2 var(--font-display);
}

.account-who .uuid {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.account-orders {
  margin-top: 16px;
}

.orders-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.orders {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* En el móvil, el precio y el estado van debajo del nombre; desde 640px, a la derecha */
.orders li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--bd);
}

.order-img {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 12px;
  background: var(--s0);
  object-fit: contain;
}

.order-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-main b {
  font-size: 15.5px;
}

.order-main .small {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.order-side {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.order-side b {
  font-family: var(--font-display);
  font-size: 15px;
}

.order-side .state {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
}

.order-side .state[data-kind='ok'] {
  color: var(--a-400);
}

.order-side .state[data-kind='bad'] {
  color: var(--red);
}

.auth-card {
  max-width: 470px;
  margin-inline: auto;
}

/* Entrar / Crear cuenta: el mismo mando segmentado que las pestañas de la tienda */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-lg);
  border: 1px solid var(--bd);
  background: var(--bg-2);
}

.auth-tabs button {
  height: 44px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 700;
  transition:
    color 0.25s,
    background-color 0.25s,
    box-shadow 0.25s;
}

.auth-tabs button:hover {
  color: #fff;
}

.auth-tabs button[aria-selected='true'] {
  color: var(--on-accent);
  background: var(--shimmer) 0 0 / 220% 100%;
  animation: shimmer-flow 5s ease-in-out infinite alternate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 var(--pri-lip);
}

.auth-card .field:first-child {
  margin-top: 4px;
}

.auth-card .btn-block {
  margin-top: 6px;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 13px;
}

.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

.member-ok,
.member-bad {
  font-size: 14px;
  font-weight: 700;
}

.member-ok {
  color: var(--a-400);
}

.member-bad {
  color: var(--red);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.account-actions .link-btn,
.link-btn.left {
  margin-left: 0;
  justify-self: start;
}

/* Términos aceptados (o el aviso para aceptar la versión nueva) */
.terms-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.terms-status a {
  color: var(--a-200);
}

.terms-status.warn {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgb(var(--a-rgb) / 0.45);
  background: rgb(var(--a-rgb) / 0.08);
  color: var(--text);
}

.password-form {
  display: grid;
  gap: 4px;
}

.password-form .btn {
  justify-self: start;
  margin-top: 8px;
}

/* ---------- Volver arriba (aparece al bajar en las páginas largas) ---------- */

.to-top {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, var(--s4), var(--s2));
  box-shadow:
    inset 0 0 0 1px rgb(var(--line-rgb) / 0.4),
    0 10px 24px -10px rgb(0 0 0 / 0.7),
    0 0 18px -6px rgb(var(--a-rgb) / 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--spring),
    box-shadow 0.25s ease;
}

.to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgb(var(--a-rgb) / 0.7),
    0 14px 28px -10px rgb(0 0 0 / 0.7),
    0 0 26px -4px rgb(var(--a-rgb) / 0.8);
}

.to-top svg {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  transition: transform 0.3s var(--ease);
}

.to-top:hover svg {
  transform: rotate(-90deg) translateX(3px);
}

/* ---------- Aviso flotante ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 13px 18px 13px 14px;
  border-radius: 14px;
  border: 1px solid rgb(var(--a-rgb) / 0.4);
  background: var(--s3);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.85);
  font-size: 14.5px;
  font-weight: 700;
  transform: translateX(-50%);
  animation: toast 2.5s var(--ease) forwards;
}

.toast::before {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--check) center / 14px no-repeat, rgb(var(--a-rgb) / 0.16);
}

/* ---------- Aparición al entrar en pantalla (una sola vez) ---------- */

/* Cabeceras de sección: la etiqueta, el título y el texto entran escalonados; el título se descubre de abajo arriba */
.js .section-head.reveal {
  opacity: 1;
  transform: none;
}

.js .section-head.reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.8s var(--ease),
    clip-path 0.9s var(--ease);
}

.js .section-head.reveal h2 {
  clip-path: inset(0 0 100% 0);
  transform: translateY(28px);
}

.js .section-head.reveal.in > * {
  opacity: 1;
  transform: none;
}

.js .section-head.reveal.in h2 {
  clip-path: inset(0 0 -20% 0);
  transition-delay: 0.08s;
}

.js .section-head.reveal.in > :nth-child(3) {
  transition-delay: 0.18s;
}

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.grid .reveal:nth-child(2),
.rules .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.grid .reveal:nth-child(3),
.rules .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.grid .reveal:nth-child(4),
.rules .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.rules .reveal:nth-child(5) {
  transition-delay: 0.32s;
}

/* Las tarjetas que se elevan al pasar el ratón no deben esperar al retraso de aparición */
.js .reveal.in:hover {
  transition-delay: 0s;
}

/* ---------- Página de la compra ---------- */

.receipt-card {
  max-width: 600px;
  padding: 26px;
}

.receipt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 22px;
  margin: 22px 0 0;
  font-size: 15px;
}

.receipt dt {
  color: var(--muted);
}

.receipt dd {
  margin: 0;
  font-weight: 700;
  word-break: break-word;
}

.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

#state[data-kind='ok'] {
  border-color: rgb(var(--a-rgb) / 0.4);
  color: var(--a-300);
}

#state[data-kind='wait'] {
  border-color: rgba(252, 201, 74, 0.4);
  background: rgba(252, 201, 74, 0.08);
  color: var(--gold);
}

#state[data-kind='bad'] {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: var(--red);
}

.prizes {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}

.prizes h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--violet);
}

.prizes ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.prizes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--r);
  border: 1px solid rgb(var(--v-rgb) / 0.35);
  background: rgb(var(--v2-rgb) / 0.08);
  font-size: 13px;
  text-align: center;
  animation: pop 0.5s var(--spring) both;
}

.prizes img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* ---------- Probador de crates ---------- */

.crate-view {
  height: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.crate-view[open] {
  display: flex;
  flex-direction: column;
}

.cv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--bd);
}

.cv-head h2 {
  margin-top: 6px;
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 700;
}

.cv-head p {
  margin: 4px 0 0;
  font-size: 14px;
}

.cv-head .dialog-close {
  position: static;
  flex: none;
}

.cv-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cv-stage {
  position: relative;
  flex: none;
  height: min(54vh, 460px);
  background:
    radial-gradient(55% 60% at 50% 55%, var(--t3, rgb(var(--a-rgb) / 0.14)), transparent 72%),
    linear-gradient(180deg, var(--s1), var(--bg));
  touch-action: none;
}

.cv-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.cv-stage canvas:active {
  cursor: grabbing;
}

.cv-modes {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.82);
}

.cv-modes button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  transition:
    background-color 0.25s,
    color 0.25s;
}

.cv-modes button[aria-pressed='true'] {
  background: var(--shimmer) 0 0 / 220% 100%;
  color: #fff;
  animation: shimmer-flow 5s ease-in-out infinite alternate;
}

.cv-modes button:disabled {
  opacity: 0.4;
  cursor: default;
}

.cv-skin {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 4px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.82);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  transition: border-color 0.2s;
}

.cv-skin:focus-within {
  border-color: var(--a-400);
}

.cv-skin input {
  width: 108px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: var(--s2);
  color: var(--text);
  font-size: 13px;
  outline: 0;
}

.cv-actions {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 6px 6px 6px 16px;
  border-radius: 14px;
  border: 1px solid var(--bd-2);
  background: rgb(var(--bg-rgb) / 0.85);
  transform: translateX(-50%);
}

.cv-selected {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
}

.cv-actions .btn {
  flex: none;
}

.cv-stage .viewer-status {
  bottom: 74px;
}

.cv-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 0;
}

.cv-desc {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
}

.cv-side h4 {
  font: 800 12px/1.4 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.cv-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.cv-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 4px 9px;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  background: var(--s2);
  color: var(--text);
  transition:
    border-color 0.2s,
    background-color 0.2s,
    transform 0.25s var(--ease);
}

.cv-item:hover {
  border-color: var(--bd-2);
  transform: translateY(-2px);
}

.cv-item[aria-pressed='true'] {
  border-color: var(--t1, var(--a-400));
  background: color-mix(in srgb, var(--t1, var(--a-400)) 12%, var(--s2));
}

.cv-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.cv-item span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  font-size: 11.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--text-2);
}

.worn-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--a-400);
  box-shadow: 0 0 8px var(--a-400);
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.25s,
    transform 0.35s var(--spring);
}

.cv-item.worn .worn-dot,
.cos-piece.worn .worn-dot,
.rk-piece.worn .worn-dot {
  opacity: 1;
  transform: none;
}

.cv-bound {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--r);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
  background: rgb(var(--a-rgb) / 0.07);
  box-shadow: inset 0 0 0 1px rgb(var(--a-rgb) / 0.22);
}

.cv-bound svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--a-300);
}

.cv-buy {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bd);
  background: var(--s1);
}

/* ---------- Animaciones ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes ping {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes pop {
  0% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.06);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.7) rotate(-6deg);
  }
}

@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateY(0.55em) rotate(6deg) scale(0.9);
  }
}

@keyframes shine {
  0%,
  55% {
    transform: translateX(0) skewX(-14deg);
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  85%,
  100% {
    transform: translateX(380%) skewX(-14deg);
    opacity: 0;
  }
}

/* El destello de las pestañas y opciones elegidas fluye despacio de un lado a otro */
@keyframes shimmer-flow {
  to {
    background-position: 100% 0;
  }
}

/* Halo de los botones principales mientras el ratón está encima */
@keyframes btn-breathe {
  50% {
    box-shadow:
      inset 0 0 0 1px rgb(255 214 247 / 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 calc(var(--lift) + 2px) 0 var(--lip),
      0 0 46px 2px rgb(var(--a-rgb) / 0.6),
      0 0 80px -10px rgb(var(--c-rgb) / 0.75);
  }
}

@keyframes btn-breathe-sea {
  50% {
    box-shadow:
      inset 0 0 0 1px rgb(200 255 240 / 0.75),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 calc(var(--lift) + 2px) 0 var(--lip),
      0 0 46px 2px rgb(16 220 170 / 0.6),
      0 0 80px -10px rgb(60 140 255 / 0.75);
  }
}

@keyframes night-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08) translate3d(-1.2%, 0.8%, 0);
  }
}

@keyframes crate-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes crate-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes toast {
  0% {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.96);
  }
  10%,
  85% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}

/* ---------- Móvil ---------- */

@media (max-width: 479px) {
  .ip-box {
    padding-left: 16px;
  }

  .ip-box .ip {
    font-size: 15.5px;
  }

  .ip-copy {
    height: 42px;
    padding: 0 12px;
  }

  .odds li {
    grid-template-columns: 36px minmax(0, 1fr) 44px;
  }

  .odds-bar {
    display: none;
  }

  .brand span {
    font-size: 12.5px;
  }

  .brand img {
    width: 30px;
  }

  .cv-skin span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .cv-skin input {
    width: 92px;
  }
}

@media (max-width: 639px) {
  .crate-tile .body {
    padding: 14px 12px 14px;
    gap: 4px;
  }

  .crate-tile h3 {
    font-size: 14px;
  }

  .crate-tile p,
  .tile-tag {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
  }

  .crate-grid .try-on {
    display: none;
  }

  .pieces {
    font-size: 11px;
  }

  .crate-tile .card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .crate-tile .card-foot .btn {
    width: 100%;
    padding: 0 6px;
  }

  .crate-tile .price {
    font-size: 17px;
  }

  .shop-tabs .tab {
    font-size: 13px;
    padding: 0 6px;
  }
}

/* ---------- Pantallas medianas ---------- */

@media (min-width: 480px) {
  .roulette-info > .spin-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 28px;
  }

  .rk-stage {
    height: 520px;
  }

  .rk-info {
    padding: 30px 30px 26px;
  }

  .cos-stage {
    height: 340px;
  }

  .cos-pieces {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section {
    padding-block: 88px;
  }

  .logo-mark {
    width: 200px;
  }

  .hero-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 640px;
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust {
    grid-template-columns: repeat(3, 1fr);
  }

  .owned {
    padding: 32px 32px 30px;
  }

  .owned-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .legal {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
  }

  .legal > span {
    max-width: 340px;
    text-align: right;
  }

  .shop-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crate-grid,
  .skel-grid,
  .coin-grid {
    gap: 16px;
  }

  .skel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .skel-account {
    grid-template-columns: 1fr 1fr;
  }

  .cta-band {
    padding: 72px 40px;
  }

  .cta-band .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: none;
  }

  .orders li {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .order-side {
    grid-column: auto;
    display: grid;
    justify-items: end;
    text-align: right;
  }

  .account-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Ventanas centradas */
  .dialog,
  .viewer,
  .crate-view {
    margin: auto;
    max-height: calc(100% - 48px);
    border: 1px solid var(--bd-2);
    border-radius: var(--r-xl);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
  }

  .dialog[open],
  .viewer[open],
  .crate-view[open] {
    animation-name: zoom-in;
  }

  .dialog {
    width: min(480px, 100% - 48px);
  }

  .dialog form {
    padding: 28px;
  }

  .viewer {
    width: min(760px, 100% - 48px);
    padding: 22px;
  }

  .crate-view {
    width: min(1140px, 100% - 48px);
    height: min(820px, 100% - 48px);
  }

  .cv-stage {
    height: min(56vh, 480px);
  }
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

/* ---------- Escritorio ---------- */

@media (min-width: 960px) {
  .rk-ladder {
    grid-auto-flow: row;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: visible;
  }

  .rk-show {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .rk-stage {
    height: auto;
    min-height: 620px;
  }

  .rk-info {
    padding: 42px 42px 36px;
    border-top: 0;
    border-left: 1px solid var(--bd);
  }

  .cos-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 26px;
  }

  .cos-stage-col {
    top: calc(var(--header-h) + 16px);
    padding: 0;
    background: none;
  }

  .cos-stage {
    height: min(66vh, 600px);
  }

  .cos-pieces {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :root {
    --header-h: 78px;
  }

  .nav {
    display: flex;
    gap: 30px;
    margin-left: 40px;
  }

  .ip-chip,
  .header-actions .btn-primary {
    display: inline-flex;
  }

  .menu-btn {
    display: none;
  }

  .section {
    padding-block: 112px;
  }

  .section.pt-0 {
    padding-top: 0;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .products {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .product .thumb {
    aspect-ratio: 16 / 10;
  }

  .logo-mark {
    width: 230px;
  }

  .crate-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }

  .skel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .coin-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .split {
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
  }

  .footer-inner {
    grid-template-columns: 1.2fr 2fr;
  }

  .legal-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }

  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

  .legal-section {
    padding: 32px 34px;
  }

  .shop-tabs {
    display: flex;
  }

  .shop-tabs .tab {
    flex: 1 1 auto;
  }

  .roulette {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 52px;
  }

  .cv-body {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr);
    overflow: hidden;
  }

  .cv-stage {
    height: auto;
    min-height: 0;
  }

  .cv-side {
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px 0;
    border-left: 1px solid var(--bd);
  }
}

@media (min-width: 960px) and (max-width: 1180px) {
  .ip-chip {
    display: none;
  }

  .nav {
    gap: 22px;
    margin-left: 28px;
  }
}

/* En pantallas táctiles no hay «pasar el ratón»: nada se queda levantado */
@media (hover: none) {
  .btn:hover,
  .crate-tile:hover,
  .product:hover,
  .feature:hover,
  .step:hover,
  .rule:hover,
  .reel-item:hover,
  .coin-item:hover,
  .odds li:hover,
  .ip-box:hover {
    transform: none;
  }

  .crate-grid .try-on,
  .product .try-on {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin desplazamientos (entradas, flotar, deslizar); los cambios de color y de brillo se quedan */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }

  /* El dueño quiere ver la web viva también con las animaciones de Windows apagadas: se quedan el fondo que se
     acerca muy despacio, el emblema que flota y su halo, y los brillos (movimientos lentos y pequeños) */
  body::before {
    animation-duration: 60s !important;
    animation-iteration-count: infinite !important;
  }

  .logo-mark img,
  .logo-mark .glow,
  .logo-mark .shine,
  .logo-mark .shine::before {
    animation-duration: 6s !important;
    animation-iteration-count: infinite !important;
  }

  .crate-glow,
  .rk-aura {
    animation-duration: 3.6s !important;
    animation-iteration-count: infinite !important;
  }

  .tab[aria-selected='true'],
  .auth-tabs button[aria-selected='true'],
  .cv-modes button[aria-pressed='true'],
  .chip[aria-pressed='true'] {
    animation-duration: 5s !important;
    animation-iteration-count: infinite !important;
  }

  .crate-tile-art img.ok {
    animation-duration: 7s !important;
    animation-iteration-count: infinite !important;
  }

  /* El fondo vivo (movimientos muy lentos) se queda */
  .sky i {
    animation-iteration-count: infinite !important;
  }

  .sky .neb-a {
    animation-duration: 24s !important;
  }

  .sky .neb-b {
    animation-duration: 15s !important;
  }

  .sky .neb-glow {
    animation-duration: 18s !important;
  }

  .sky .stars-a {
    animation-duration: 260s, 4.2s !important;
  }

  .sky .stars-b {
    animation-duration: 170s, 3.1s !important;
    animation-delay: 0s, -1.6s !important;
  }

  .sky .shoot {
    animation-duration: 13s !important;
    animation-delay: 4s !important;
  }

  .sky .shoot.s2 {
    animation-duration: 17s !important;
    animation-delay: 11s !important;
  }

  /* La entrada de cada página (corta y suave) y el halo de los botones al pasar el ratón también se quedan */
  .ready main,
  .ready .footer {
    animation-duration: 0.7s !important;
  }

  .ready .footer {
    animation-delay: 0.12s !important;
  }

  .btn-primary:hover,
  .btn-theme:hover,
  .btn-shop:hover {
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
    animation-delay: 0.3s !important;
  }
}