/* ==========================================================================
   XPlay Nin Store — Botones (los que eligió la tienda en 21st.dev)
   Copia en CSS de los componentes, en su versión para fondo oscuro (la página es oscura):
     · Liquid Glass (EFECTOS VISUALES/BOTONES.txt, LiquidButton) → opciones y botones
       secundarios: píldora transparente con bordes de luz, distorsión del filtro SVG
       #container-glass (en las páginas) y crece 5 % al pasar el cursor.
     · Colorful (EFECTOS VISUALES/BOTONES 2.txt, ButtonColorful) → comprar, reservar y ver
       producto: cuerpo zinc con el degradado índigo · morado · rosa difuminado encima (40 %),
       que se enciende (80 %) al pasar el cursor.
     · Efecto 1 (efecto botones/efecto de boton 1.txt, CyberButton) → menú "Categorías":
       losa rectangular con marco de líneas de luz del color de cada marca, textura de puntos
       en los bordes y un halo de puntos que aparece al pasar el cursor.
     · Efecto 2 (efecto botones/efecto de boton 2.txt, GetStartedButton) → barra de categorías:
       botón del color de la marca con un panel de flecha a la derecha que crece hasta cubrirlo
       al pasar el cursor (el texto se desvanece) y se encoge al hacer clic.
   Los dos últimos son rectangulares, sin bordes redondos (pedido de la tienda, 15/10/2026).
   Se carga de último en index.html y catalogo.html para mandar sobre los estilos anteriores.
   ========================================================================== */
:root {
  --g-ease: cubic-bezier(.2, .8, .2, 1);
  /* sombras del LiquidButton (variante oscura del componente) */
  --glass-shadow:
    0 0 8px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09), inset -3px -3px .5px -3.5px rgba(255, 255, 255, .85),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .6), inset -1px -1px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12), inset 0 0 2px 2px rgba(255, 255, 255, .06), 0 0 12px rgba(0, 0, 0, .15);
  /* letra del CyberButton (font-mono de Tailwind) */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ==========================================================================
   1) LIQUID GLASS
   ========================================================================== */
.btn--ghost, .gbtn--ghost, .gbtn--dark, .btn--wa, .gbtn--wa, .btn--blue,
.subchip, .pill span, .opt__pill span,
.ibtn, .stage__btn, .plink--3d, .plink--wa, .pqty, .prod__add, .buy__back, .xradio__btn {
  color: #fafafa;
  background: transparent;
  border: 0; border-radius: 9999px;
  box-shadow: var(--glass-shadow);
  text-shadow: none; filter: none;
  -webkit-backdrop-filter: blur(4px) saturate(150%);
          backdrop-filter: blur(4px) saturate(150%);
  transition: transform .3s var(--g-ease), box-shadow .3s, background-color .3s, color .3s, translate .35s var(--ease-expo, ease);
}
/* sin los adornos de antes (brillos, bordes animados, subrayados) */
.btn--wa::before, .btn--wa::after, .gbtn--wa::before, .btn--blue::before, .btn--blue::after,
.catbar__link::after, .mega__ico::before, .mega__ico::after { content: none; }
.gbtn--ghost:hover, .gbtn--dark:hover { animation: none; }

/* Letra del componente: normal (sin mayúsculas forzadas) */
.btn--ghost, .gbtn--ghost, .gbtn--dark, .btn--wa, .gbtn--wa, .btn--blue,
.subchip, .pill span, .opt__pill span,
.stage__btn, .plink--3d, .plink--wa, .buy__back {
  font-family: var(--font); font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* Hover del componente: crece 5 % y se ilumina */
.btn--ghost:hover, .gbtn--ghost:hover, .gbtn--dark:hover, .btn--wa:hover, .gbtn--wa:hover, .btn--blue:hover,
.subchip:hover, .pill:hover span, .opt__pill:hover span,
.ibtn:hover, .stage__btn:hover, .plink--3d:hover, .plink--wa:hover, .prod__add:hover, .buy__back:hover, .xradio__btn:hover {
  color: #fff; transform: scale(1.05); filter: none;
  background: rgba(255, 255, 255, .06); border-color: transparent;
  box-shadow: var(--glass-shadow), 0 0 22px -8px rgba(255, 255, 255, .45);
}
.btn--ghost:active, .gbtn--ghost:active, .gbtn--dark:active, .btn--wa:active, .gbtn--wa:active, .btn--blue:active,
.subchip:active, .pill:active span, .opt__pill:active span,
.ibtn:active, .stage__btn:active, .plink--3d:active, .plink--wa:active, .prod__add:active, .buy__back:active, .xradio__btn:active { transform: scale(.97); }

/* Elegido / activo: el vidrio se llena de luz con el color de su marca */
.pill, .opt__pill, .subchip { --sel: color-mix(in srgb, var(--pc) 70%, #fff); }
.subchip[aria-pressed="true"],
.pill input:checked + span, .pill--fmt input:checked + span, .opt__pill input:checked + span {
  color: #fff; border-color: transparent;
  background: rgba(255, 255, 255, .16);
  box-shadow: var(--glass-shadow), inset 0 0 0 1.5px var(--sel), 0 0 14px -4px var(--sel);
}
.pill input:checked + span .ico, .pill input:checked + span .ico-b, .pill--fmt input:checked + span .ico { color: var(--sel); filter: none; }
.opt__pill input:disabled + span { transform: none; }
.opt__pill input:disabled:not(:checked) + span { border-color: transparent; opacity: .5; }

/* ---------- Selector de plataforma y formato (ficha del juego y vista de compra) ---------- */
.pill span { padding: 0 22px; font-size: 14.5px; }
.opt__pill span { padding: 0 22px; font-size: 15px; }

/* ---------- Filtros rápidos de cada zona ---------- */
.subchip { font-size: 14px; padding: 0 8px 0 16px; }
.subchip span { border-radius: 9999px; }
.subchip[aria-pressed="true"] span { color: #fff; background: rgba(255, 255, 255, .18); }

/* ---------- Botones secundarios ---------- */
.gbtn--ghost, .gbtn--dark, .gbtn--wa { font-size: 15px; }
.gbtn--xl.gbtn--ghost, .gbtn--xl.gbtn--wa { font-size: 16.5px; }
.btn--ghost, .btn--wa, .btn--blue { font-size: 16px; }
.btn--wa .ico-b, .gbtn--wa .ico-b, .plink--wa .ico-b { color: #25d366; }
.plink--3d, .plink--wa { min-height: 46px; padding: 0 20px; font-size: 15px; color: #fafafa; }
.plink--3d .ico, .stage__btn .ico { color: #c4b5fd; }
.stage__btn { padding: 0 16px; font-size: 14px; }
.buy__back { padding: 0 20px 0 14px; font-size: 15px; }
.ibtn[aria-pressed="true"] { color: #ff4f9a; box-shadow: var(--glass-shadow), 0 0 20px -4px rgba(255, 45, 138, .8); }
.pqty button { border-radius: 9999px; transition: background-color .25s, transform .3s var(--g-ease); }
.pqty button:hover { color: #fff; background: rgba(255, 255, 255, .08); transform: scale(1.05); }
.prod__add.is-done, .prod__add.is-done:hover { color: #0a1200; background: linear-gradient(180deg, var(--lime-hi), var(--lime)); box-shadow: 0 0 22px -4px rgba(155, 226, 47, .9); }

/* Distorsión real del vidrio líquido (filtro SVG #container-glass; en Chrome/Edge) */
@supports (backdrop-filter: url("#container-glass")) {
  .btn--ghost, .gbtn--ghost, .gbtn--dark, .btn--wa, .gbtn--wa, .btn--blue, .subchip, .pill span, .opt__pill span,
  .stage__btn, .plink--3d, .plink--wa, .buy__back, .xradio__btn { backdrop-filter: url("#container-glass"); }
}

/* ==========================================================================
   2) COLORFUL
   ========================================================================== */
.btn--primary, .gbtn--primary, .prod__cta, .buy__add {
  position: relative; isolation: isolate; overflow: hidden;
  color: #18181b; background: #f4f4f5;
  border: 0; border-radius: 6px;
  font-family: var(--font); font-weight: 600; letter-spacing: 0; text-transform: none;
  text-shadow: none; box-shadow: none; filter: none; animation: none;
  transition: all .2s;
}
.btn--primary::before, .gbtn--primary::before, .prod__cta::before, .buy__add::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: none;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  opacity: .4; filter: blur(8px); transition: opacity .5s;
}
.btn--primary:hover, .gbtn--primary:hover, .prod__cta:hover, .buy__add:hover {
  color: #18181b; transform: none; filter: none; box-shadow: none;
}
.btn--primary:hover::before, .gbtn--primary:hover::before, .prod__cta:hover::before, .prod:hover .prod__cta::before, .buy__add:hover::before { opacity: .8; transform: none; }
.btn--primary:active, .gbtn--primary:active, .prod__cta:active, .buy__add:active { transform: scale(.98); }
.btn--primary .ico, .gbtn--primary .ico, .prod__cta .ico, .buy__add .ico { color: rgba(24, 24, 27, .9); }
/* sin los brillos de antes */
.btn--primary::after, .prod__cta::after { content: none; }
.buy__add .buy__add-fx { display: none; }
/* tamaños */
.btn--primary { min-height: 52px; font-size: 16px; }
.gbtn--primary { font-size: 15px; }
.gbtn--primary.gbtn--sm { font-size: 14px; }
.gbtn--primary.gbtn--xl { --bh: 54px; font-size: 16.5px; }
.prod__cta { font-size: 14px; }
.buy__add { min-height: 58px; font-size: 17px; }

/* ==========================================================================
   3) EFECTO 2 — GetStartedButton → barra de categorías del catálogo
   Botón del color de la marca (letra blanca). Al pasar el cursor el texto se desvanece y
   el panel de la flecha (¼ del botón, a la derecha) crece hasta cubrirlo con un tono más
   claro; al hacer clic el panel se encoge (95 %). Sin bordes redondos.
   ========================================================================== */
.xb2, .catbar__all, .catbar__link, .catbar__help {
  --bc: #33435c; --fg: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 0;
  font: 500 14px/1 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--fg); background: var(--bc);
  box-shadow: none; text-shadow: none; filter: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .15s, color .15s, box-shadow .25s;
}
.catbar__all { --bc: #9be22f; --fg: #0b1300; }
.catbar__help { --bc: #15803d; margin-left: 4px; }
.xb2__label { display: inline-flex; align-items: center; gap: 7px; margin-right: 32px; transition: opacity .5s; }
.catbar__all .ico, .catbar__all .ico-b, .catbar__link .ico, .catbar__link .ico-b, .catbar__help .ico, .catbar__help .ico-b {
  width: 16px; height: 16px; color: currentColor; filter: none; stroke-width: 2;
}
.catbar__all .xb2__label .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.catbar__help .xb2__label .ico-b { width: 18px; height: 18px; color: #fff; }
.catbar__link--hot b {
  margin-left: 1px; padding: 3px 6px; border-radius: 0; box-shadow: none;
  font: 700 11px/1 var(--hud, var(--display)); letter-spacing: .04em; color: var(--bc); background: #fff;
}
.xb2__panel {
  position: absolute; right: 4px; top: 4px; bottom: 4px; z-index: 10;
  display: grid; place-items: center; width: 25%; border-radius: 0;
  font-style: normal; color: var(--fg);
  background: color-mix(in srgb, var(--fg) 15%, transparent);
  transition: all .5s;
}
.xb2__panel .ico { width: 16px; height: 16px; stroke-width: 2; }
.catbar__all .xb2__panel .catbar__chev { width: 16px; height: 16px; transition: transform .3s var(--ease, ease); }
.xb2 .xb2__label .ico { width: 18px; height: 18px; }
.xb2--block { display: flex; width: 100%; }
.xb2--xl { height: 54px; padding: 0 22px; font-size: 16px; }
.xb2:disabled { opacity: .5; cursor: not-allowed; }
/* sin los estados de antes (fondo transparente, subir 1 px, brillo) */
.catbar__all:hover, .catbar__link:hover, .catbar__help:hover, .catbar__link.is-active {
  color: var(--fg); background: var(--bc); transform: none; filter: none;
}
.catbar__link:hover .ico, .catbar__link:hover .ico-b { filter: none; }
/* Se activa al pasar el cursor por el botón o por la tarjeta que lo contiene (data-xb2-host) */
@media (hover: hover) {
  .xb2:hover, [data-xb2-host]:hover .xb2, .catbar__all:hover, .catbar__link:hover, .catbar__help:hover {
    color: var(--fg); background: color-mix(in srgb, var(--bc) 90%, transparent);
    transform: none; box-shadow: none; filter: none;
  }
  .xb2:not(:disabled):hover .xb2__label, [data-xb2-host]:hover .xb2 .xb2__label,
  .catbar__all:hover .xb2__label, .catbar__link:hover .xb2__label, .catbar__help:hover .xb2__label { opacity: 0; }
  .xb2:not(:disabled):hover .xb2__panel, [data-xb2-host]:hover .xb2 .xb2__panel,
  .catbar__all:hover .xb2__panel, .catbar__link:hover .xb2__panel, .catbar__help:hover .xb2__panel { width: calc(100% - 8px); }
}
.xb2:active .xb2__panel, [data-xb2-host]:active .xb2 .xb2__panel,
.catbar__all:active .xb2__panel, .catbar__link:active .xb2__panel, .catbar__help:active .xb2__panel { transform: scale(.95); }
.xb2:focus-visible, .catbar__all:focus-visible, .catbar__link:focus-visible, .catbar__help:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 0; }
.xb2.is-done { --bc: #2f7d0b; }
/* Zona en la que estás / menú abierto: línea blanca abajo y panel más claro */
.catbar__link.is-active, .catbar__all[aria-expanded="true"] { box-shadow: inset 0 -3px 0 #fff; }
.catbar__link.is-active .xb2__panel, .catbar__all[aria-expanded="true"] .xb2__panel { background: color-mix(in srgb, var(--fg) 28%, transparent); }
.catbar__all[aria-expanded="true"] .catbar__chev { transform: rotate(180deg); }

.catbar__list { gap: 4px; padding-block: 0; }
.catbar__in { gap: 6px; }
:root.page-catalog { --catbar-h: 58px; }
.xpchip { border-radius: 0; height: 44px; }
.xpchip__lvl { border-radius: 0; }

/* ==========================================================================
   4) EFECTO 1 — CyberButton → menú "Categorías" del catálogo
   Losa transparente rectangular con un borde de 1 px, letra mono en mayúsculas, cuatro líneas
   de luz del color de la marca que sobresalen del botón (50 % → 100 % al pasar el cursor), un
   halo de puntos que aparece alrededor y textura de puntos en los bordes. Al pasar el cursor
   brilla con el color de su marca; al hacer clic se llena de ese color y baja 1 px.
   ========================================================================== */
.mega__link, .mega__plain {
  --glow: #9be22f;
  position: relative; isolation: isolate; overflow: visible;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 0;
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: #fafafa; background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fafafa 10%, transparent);
  transform: none; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: box-shadow .3s, transform .3s, background-color .3s;
}
.mega__link { display: block; min-height: 58px; }
.mega__plain { display: block; }
.cy__in { position: relative; z-index: 10; display: flex; align-items: center; gap: 12px; min-height: inherit; }
.mega__link .cy__in { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 16px; min-height: 58px; }
.mega__plain .cy__in { min-height: 44px; font-size: 12px; }
.mega__plain-t { flex: 1 1 auto; min-width: 0; }
.mega__ico { width: auto; height: auto; display: grid; place-items: center; color: var(--glow); background: none; box-shadow: none; border-radius: 0; }
.mega__ico .ico, .mega__ico .ico-b { width: 20px; height: 20px; }
.mega__plain .cy__in > .ico:first-child { width: 18px; height: 18px; color: var(--glow); }
.mega__name { display: grid; gap: 5px; min-width: 0; }
.mega__name b { font: 700 12.5px/1.1 var(--mono); letter-spacing: .2em; color: #fafafa; }
.mega__name small { font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; color: #8f9bab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__n {
  padding: 4px 8px; border-radius: 0; font: 700 11.5px/1 var(--mono); letter-spacing: .08em; color: #fafafa;
  background: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, #fafafa 18%, transparent);
}
.mega__link .cy__arrow, .mega__plain .cy__arrow { width: 16px; height: 16px; color: #fafafa; transition: transform .3s, color .3s; }
.mega__link:hover, .mega__plain:hover { transform: none; }

/* Capas decorativas del componente */
.cy__halo, .cy__edge, .cy__tex { position: absolute; pointer-events: none; }
.cy__halo {
  inset: -64px; z-index: -1; opacity: 0; transition: opacity .5s;
  background-image: radial-gradient(color-mix(in oklab, var(--glow) 30%, transparent) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 50%);
          mask-image: radial-gradient(ellipse at center, #000 20%, transparent 50%);
}
.cy__edge { z-index: 1; opacity: .5; transition: opacity .3s; box-shadow: 0 0 14px 0 var(--glow); }
.cy__edge--l, .cy__edge--r { top: -22px; bottom: -22px; width: 1px; background: linear-gradient(to bottom, transparent, var(--glow), transparent); }
.cy__edge--l { left: 0; }
.cy__edge--r { right: 0; }
.cy__edge--t, .cy__edge--b { left: -22px; right: -22px; height: 1px; background: linear-gradient(to right, transparent, var(--glow), transparent); }
.cy__edge--t { top: 0; }
.cy__edge--b { bottom: 0; }
.cy__tex {
  inset: 0; z-index: 0; opacity: .1;
  background-image: radial-gradient(color-mix(in oklab, #fafafa 80%, transparent) 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 35%, #000 100%);
          mask-image: radial-gradient(ellipse at center, transparent 35%, #000 100%);
}
@media (hover: hover) {
  .mega__link:hover, .mega__plain:hover {
    color: #fff; transform: none;
    background: color-mix(in srgb, var(--glow) 17%, transparent);
    box-shadow: 0 0 30px -6px var(--glow);
  }
  .mega__link:hover .cy__edge, .mega__plain:hover .cy__edge { opacity: 1; }
  .mega__link:hover .cy__halo, .mega__plain:hover .cy__halo { opacity: 1; }
  .mega__link:hover .cy__arrow, .mega__plain:hover .cy__arrow { transform: translateX(4px); color: var(--glow); }
  .mega__link:hover .mega__name small { color: #c9d3df; }
}
.mega__link:focus-visible, .mega__plain:focus-visible {
  outline: 2px solid var(--glow); outline-offset: 2px; border-radius: 0;
  box-shadow: 0 0 30px -6px var(--glow);
}
.mega__link:focus-visible .cy__edge, .mega__plain:focus-visible .cy__edge { opacity: 1; }
.mega__link:active, .mega__plain:active { transform: translateY(1px); background: color-mix(in srgb, var(--glow) 32%, transparent); }
.mega__links { gap: 8px; }
.mega__promo { border-radius: 0; }

/* ==========================================================================
   5) Radio de los juegos (js/music.js)
   ========================================================================== */
.xradio {
  position: fixed; left: clamp(12px, 2vw, 24px); bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom)); z-index: 65;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(400px, calc(100vw - 108px));
  padding: 6px 7px 6px 6px; border-radius: 9999px;
  color: #fff; background: rgba(9, 11, 17, .7);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
          backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--glass-shadow), 0 18px 40px -18px rgba(0, 0, 0, .95), 0 0 34px -14px var(--c, #ff4fa3);
  opacity: 0; visibility: hidden; translate: 0 18px;
  transition: opacity .35s, translate .55s cubic-bezier(.16, 1, .3, 1), bottom .45s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s;
}
.xradio.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.has-buybar .xradio { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* En la vista de compra va arriba al centro, en la barra (abajo tapaba el botón de compra) */
.buy .xradio { z-index: 5; top: calc(9px + env(safe-area-inset-top)); bottom: auto; left: 50%; translate: -50% -18px; }
.buy .xradio.is-on { translate: -50% 0; }
.xradio__cover {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 16px -6px var(--c, #ff4fa3);
}
.xradio__cover img { width: 100%; height: 100%; object-fit: cover; }
.xradio__eq {
  position: absolute; inset: auto 0 0; height: 62%; display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  padding: 0 11px 8px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent);
}
.xradio__eq i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(0deg, var(--c, #ff4fa3), var(--c2, #ffb03a)); transform-origin: 50% 100%; transform: scaleY(.22); transition: transform .4s; }
.xradio.is-playing .xradio__eq i { animation: xr-eq .9s ease-in-out infinite alternate; }
.xradio.is-playing .xradio__eq i:nth-child(2) { animation-duration: .62s; animation-delay: -.3s; }
.xradio.is-playing .xradio__eq i:nth-child(3) { animation-duration: .78s; animation-delay: -.5s; }
.xradio.is-playing .xradio__eq i:nth-child(4) { animation-duration: .55s; animation-delay: -.15s; }
@keyframes xr-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.xradio__txt { min-width: 0; display: grid; gap: 4px; padding-right: 2px; }
.xradio__station {
  font: 800 10.5px/1 var(--hud, var(--display)); letter-spacing: .24em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--c, #ff4fa3), var(--c2, #ffb03a)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xradio__song { font: 700 14px/1.15 var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xradio__btn { flex: none; display: grid; place-items: center; cursor: pointer; }
.xradio__btn svg { width: 18px; height: 18px; fill: currentColor; }
.xradio__btn--play { width: 42px; height: 42px; }
.xradio__btn--next { width: 36px; height: 36px; }
.xradio__btn--next svg { width: 16px; height: 16px; }
.xradio.is-waiting .xradio__btn--play { animation: xr-call 1.6s ease-in-out infinite; }
@keyframes xr-call { 50% { box-shadow: var(--glass-shadow), 0 0 0 7px color-mix(in srgb, var(--c, #ff4fa3) 35%, transparent); } }

/* ==========================================================================
   Pantallas medianas y celular
   ========================================================================== */
@media (max-width: 1099px) {
  :root.page-catalog { --catbar-h: 54px; }
  .catbar__all, .catbar__link, .catbar__help { height: 40px; padding: 0 14px; }
  .xpchip { height: 40px; }
}
@media (max-width: 760px) {
  :root.page-catalog { --catbar-h: 52px; }
  .catbar__all, .catbar__link { height: 38px; padding: 0 12px; }
  /* En el celular no hay cursor: botones compactos de color, sin el panel de la flecha */
  .catbar__all .catbar__txt { display: none; }
  .catbar__all .xb2__panel, .catbar__link .xb2__panel { display: none; }
  .catbar__all .xb2__label, .catbar__link .xb2__label { margin-right: 0; }
  .xpchip { height: 38px; }
  .mega__link .cy__in { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .mega__link .cy__arrow { display: none; }
}
@media (max-width: 640px) {
  .xradio { gap: 8px; padding: 5px; }
  .xradio .xradio__txt, .xradio .xradio__btn--next { display: none; }
  /* La música de la tienda aparece con el botón de WhatsApp, al bajar un poco: la portada queda limpia */
  .js:not(.show-wa) .xradio--site { opacity: 0; visibility: hidden; translate: 0 18px; transition: opacity .3s, translate .3s, visibility 0s .3s; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn--ghost:hover, .gbtn--ghost:hover, .gbtn--dark:hover, .btn--wa:hover, .gbtn--wa:hover, .btn--blue:hover,
  .subchip:hover, .pill:hover span, .opt__pill:hover span,
  .ibtn:hover, .stage__btn:hover, .plink--3d:hover, .plink--wa:hover, .prod__add:hover, .buy__back:hover, .xradio__btn:hover,
  .pqty button:hover { transform: none; }
  .xb2__label, .xb2__panel, .cy__halo, .cy__edge, .cy__arrow { transition: none; }
  .xradio.is-playing .xradio__eq i { animation: none; transform: scaleY(.7); }
  .xradio.is-waiting .xradio__btn--play { animation: none; }
}