/*
 * vestidor.css — Piofly · EL VESTIDOR (rediseño 2026-10-08)
 * Edgar: «quiero que me rediseñes el vestidor así como está la imagen de
 * referencia». Hoja propia, cargada SOLO por profile.html: el perfil de
 * un amigo (persona.html) comparte profile.css y no tiene vestidor.
 *
 * La referencia, pieza por pieza:
 *   · cabecera: volver en cuadrado redondeado, «Vestir a Pío» grande,
 *     «Personaliza tu mascota» apagado y la píldora verde de monedas;
 *   · ocho categorías iguales con icono de línea y nombre; la activa va
 *     rellena de violeta (la marca se DESLIZA de una a otra);
 *   · filtros Todas · Mías · Favoritas;
 *   · rejilla de seis con Pío al centro: precio verde o PRO violeta
 *     arriba a la izquierda, la estrella arriba a la derecha, tinte verde
 *     lo que se compra, violeta lo Pro, borde violeta lo puesto;
 *   · a la derecha el PANEL: Pío grande sobre su luz violeta, «TONO ·
 *     PUESTA», el nombre, los atuendos guardados y los dos botones.
 * En el teléfono el mismo lenguaje en una columna: el panel arriba (Pío
 * no se va mientras recorres), el catálogo debajo y lo de guardar al
 * final de la rejilla, como en la app.
 *
 * Colores: los del mundo Pío salen de las variables --m-* de profile.css
 * (ya cambian solas con el tema); los del vestidor viven UNA vez abajo,
 * en --v-*, y ningún componente lleva un hex suelto.
 */

/* ═══════════════════ LOS TOKENS DEL VESTIDOR ═══════════════════ */
.vst {
  --v-sup: var(--m-card);
  --v-borde: var(--m-borde);
  --v-txt: var(--m-txt);
  --v-sub: var(--m-sub);
  --v-suave: var(--text-soft);
  --v-lila: var(--m-lila);
  --v-lila-tinta: #fff;
  --v-verde: var(--m-verde);
  --v-violeta: var(--premium, #A855F7);
  --v-marca: linear-gradient(180deg, #7C4DDB, #5B33A8);
  --v-boton: linear-gradient(180deg, #8B5CF6, #6D28D9);
  --v-sombra-boton: 0 10px 24px color-mix(in srgb, var(--v-violeta) 28%, transparent);
  --v-panel: var(--bg-panel);
  --v-panel-luz: color-mix(in srgb, var(--v-violeta) 13%, transparent);
  --v-casilla-a: color-mix(in srgb, var(--m-txt) 2%, transparent);
  --v-casilla-b: color-mix(in srgb, var(--m-txt) 6%, transparent);
  --v-suelo: rgba(0, 0, 0, .12);
  --v-velo-fav: rgba(255, 255, 255, .78);
  --v-fav: rgba(15, 23, 42, .4);
  /* las etiquetas de tienda: sólidas, con su tinta oscura encima */
  --v-chip-verde: #5BE39C;  --v-chip-verde-t: #0C3B22;
  --v-chip-pro: #C084FC;    --v-chip-pro-t: #2A0A3D;
  --v-chip-ambar: #FFB35C;  --v-chip-ambar-t: #4A2400;
  --v-oro: #F5B62B;         --v-oro-t: #3A2400;
  --v-estrella: #F5B62B;
  --v-rojo: var(--red, #EF4444);
  /* El conjunto Fénix: fuego, brasa y oro (la cifra en oro oscuro en
     claro, oro vivo en oscuro, para que se lea en los dos). */
  --v-fx: #F97316;          --v-fx-brasa: #C2261A;
  --v-fx-oro: #F5B62B;      --v-fx-oro-t: #9A4A00;
  --v-fx-tinta: #FFF7E6;
}
[data-theme="dark"] .vst {
  --v-suave: #CFC6E4;
  --v-fx-oro-t: #FFD25A;
  --v-lila-tinta: #1A1226;
  --v-panel: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  --v-panel-luz: rgba(124, 58, 237, .34);
  --v-casilla-a: rgba(255, 255, 255, .055);
  --v-casilla-b: rgba(255, 255, 255, .02);
  --v-suelo: rgba(0, 0, 0, .4);
  --v-velo-fav: rgba(0, 0, 0, .34);
  --v-fav: rgba(255, 255, 255, .62);
  --v-estrella: #FFD84D;
}

/* ═══════════════════ EL MARCO ═══════════════════
   Sin tarjeta alrededor (la referencia va sobre el fondo de la página):
   las piezas son las tarjetas. Mientras está abierto, .prof-authed lleva
   data-vestidor="1" y el perfil se esconde (regla en profile.css). */
.vst { position: relative; }
.vst[hidden] { display: none; }
.vst-col {
  position: relative;
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  height: calc(100svh - 190px); min-height: 540px;
}

/* ── Cabecera: volver · título y lema · Listo · monedas ── */
.vst-cabeza { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.vst-atras {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--v-borde); background: var(--v-sup);
  color: var(--v-txt); font-size: 18px; cursor: pointer;
  transition: background .18s ease, transform .18s cubic-bezier(0.22, 1, 0.36, 1);
}
.vst-atras:hover { background: color-mix(in srgb, var(--v-txt) 9%, transparent); transform: translateX(-1px); }
.vst-cabeza-t { flex: 1; min-width: 0; }
.vst-tit {
  margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.4px; line-height: 1.15;
  color: var(--v-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vst-lema {
  margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--v-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Las monedas SIEMPRE se ven: en un vestidor con tienda, saber cuánto
   llevas es lo que te deja decidir si algo te alcanza. */
.vst-fz {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--v-verde) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-verde) 28%, transparent);
  color: var(--v-verde);
}
.vst-fz i { font-size: 16px; }
.vst-fz-n { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Lo que costó se va flotando del contador mientras el número baja. */
.vst-fz-resta {
  position: absolute; right: 12px; top: 100%; pointer-events: none;
  color: var(--v-rojo); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  animation: vst-resta .9s ease-out both;
}
@keyframes vst-resta {
  0% { opacity: 0; transform: translateY(-4px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}
/* «Listo» solo aparece cuando hay algo que cerrar. */
.vst-listo {
  flex-shrink: 0; height: 34px; padding: 0 16px; border-radius: var(--r-pill, 999px);
  border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800;
  background: var(--v-boton); color: #fff; box-shadow: var(--v-sombra-boton);
  animation: vst-pop .4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.vst-listo:hover { filter: brightness(1.08); }
@keyframes vst-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ── El catálogo: categorías, filtros y la rejilla (lo único que se desliza) ──
   En el teléfono va debajo del panel (order). */
.vst-catalogo { order: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }

/* Las ocho categorías: casillas iguales con icono de línea y nombre. En
   el teléfono caben a lo ancho deslizando; la marca violeta viaja a la
   activa (vestidor.js, moverMarca). */
.vst-tabs {
  position: relative; flex-shrink: 0;
  display: flex; gap: 6px; padding: 6px;
  border-radius: 16px; border: 1px solid var(--v-borde);
  background: color-mix(in srgb, var(--v-txt) 2.5%, transparent);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.vst-tabs::-webkit-scrollbar { display: none; }
.vst-tab-marca {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 12px;
  background: var(--v-marca); pointer-events: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--v-violeta) 26%, transparent);
  transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1), width .32s cubic-bezier(0.22, 1, 0.36, 1), height .32s cubic-bezier(0.22, 1, 0.36, 1);
}
.vst-tab {
  position: relative; z-index: 1; flex: 0 0 auto; min-width: 66px; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 8px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.1;
  background: var(--v-sup); border: 1px solid var(--v-borde); color: var(--v-suave);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vst-tab-i { font-size: 20px; line-height: 1; }
.vst-tab-nombre { white-space: nowrap; }
.vst-tab--on, .vst-tab--on:hover { background: transparent; border-color: transparent; color: #fff; }

/* Los filtros: Todas · Mías · Favoritas, y cuántas prendas son tuyas. */
.vst-filtros { display: flex; align-items: center; gap: 7px; flex-shrink: 0; min-width: 0; }
.vst-filtro {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 13px; border-radius: var(--r-pill, 999px); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  background: var(--v-sup); border: 1px solid var(--v-borde); color: var(--v-suave);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vst-filtro i { font-size: 13px; color: var(--v-estrella); }
.vst-filtro:hover { background: color-mix(in srgb, var(--v-txt) 9%, transparent); color: var(--v-txt); }
.vst-filtro--on, .vst-filtro--on:hover { background: var(--v-lila); border-color: transparent; color: var(--v-lila-tinta); }
.vst-cuenta {
  margin-left: auto; min-width: 0; padding-left: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--v-sub); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* En el teléfono angosto la cuenta se dice corta: «33/177». */
.vst-cuenta-c { display: none; }
@media (max-width: 400px) {
  .vst-cuenta-l { display: none; }
  .vst-cuenta-c { display: inline; }
}

.vst-rejilla {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 2px 24px; scrollbar-width: thin;
}
.vst-galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.vst-vacio { margin: 14px 2px; font-size: 13px; line-height: 1.5; color: var(--v-sub); max-width: 44ch; }

/* ── La casilla: Pío al centro, la etiqueta arriba a la izquierda, la
   estrella arriba a la derecha. El tinte dice qué es sin leer nada:
   neutro lo tuyo, verde lo que se compra, violeta lo Pro, ámbar lo que
   se gana; lo puesto lleva el borde violeta encendido. ── */
.vst-it-w { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vst-it {
  position: relative; width: 100%; aspect-ratio: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; cursor: pointer; font-family: inherit;
  --vit-a: var(--v-casilla-a); --vit-b: var(--v-casilla-b); --vit-borde: var(--v-borde);
  background: linear-gradient(180deg, var(--vit-a), var(--vit-b));
  border: 1px solid var(--vit-borde);
  color: var(--v-txt);
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .18s ease, border-color .18s ease;
}
/* El suelo bajo Pío: lo que hace que el dibujo se pare en vez de flotar. */
.vst-it::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 9%; height: 13%; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--v-suelo), transparent 70%);
  pointer-events: none;
}
.vst-it:active { transform: scale(.96); }
/* ── LAS CUATRO CLASES (Edgar 2026-10-09: «ponerles el color al cuadro,
   bien notado»). El tinte es de la CLASE y se queda aunque ya sea tuya:
   gratis neutra, monedas verde, Pro violeta, premios ámbar. Ser tuya lo
   dice la etiqueta (.vst-chip-tuya), no un cuadro gris. ── */
.vst-it--monedas {
  --vit-a: color-mix(in srgb, var(--v-chip-verde) 20%, transparent);
  --vit-b: color-mix(in srgb, var(--v-chip-verde) 6%, transparent);
  --vit-borde: color-mix(in srgb, var(--v-chip-verde) 34%, transparent);
}
.vst-it--pro {
  --vit-a: color-mix(in srgb, var(--v-chip-pro) 26%, transparent);
  --vit-b: color-mix(in srgb, var(--v-violeta) 9%, transparent);
  --vit-borde: color-mix(in srgb, var(--v-chip-pro) 40%, transparent);
}
.vst-it--premio {
  --vit-a: color-mix(in srgb, var(--v-chip-ambar) 22%, transparent);
  --vit-b: color-mix(in srgb, var(--v-chip-ambar) 6%, transparent);
  --vit-borde: color-mix(in srgb, var(--v-chip-ambar) 38%, transparent);
}
/* El premio que aún no ganas, un poco apagado: no depende de ti hoy. */
.vst-it--bloq { opacity: .86; }
.vst-it--nada { border-style: dashed; --vit-borde: color-mix(in srgb, var(--v-txt) 16%, transparent); }
/* El corte entre clases (solo en Todas): ocupa la fila entera y no mide
   nada, así la clase siguiente arranca en la primera columna. */
.vst-corte { grid-column: 1 / -1; height: 0; margin-top: -2px; }
/* Lo puesto: borde y halo violeta ENCIMA del tinte de su clase. */
.vst-it--puesta {
  border: 2px solid var(--v-violeta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-violeta) 16%, transparent), 0 0 22px color-mix(in srgb, var(--v-violeta) 34%, transparent);
  animation: vst-puesta .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes vst-puesta { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.vst-it--comprando { border-color: var(--v-chip-verde); }
.vst-it--pronto { opacity: .6; border-style: dashed; }
.vst-it--lista {
  opacity: 1;
  --vit-a: color-mix(in srgb, var(--v-oro) 30%, transparent);
  --vit-b: color-mix(in srgb, var(--v-oro) 8%, transparent);
  --vit-borde: var(--v-oro);
  animation: vst-lista 1.8s ease-in-out infinite;
}
@keyframes vst-lista { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 18px color-mix(in srgb, var(--v-oro) 55%, transparent); } }
/* El dibujo encima del suelo; las etiquetas y la barrita encima de todo. */
.vst-mini { position: relative; z-index: 1; width: 70%; height: 70%; transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1); }
.vst-sombra { opacity: .15; }
.vst-it-n {
  font-size: 10px; font-weight: 700; text-align: center; color: var(--v-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vst-it-n--on { color: var(--v-lila); }

/* Las etiquetas, arriba a la izquierda y DENTRO de la casilla. */
.vst-chip-precio, .vst-chip-logro, .vst-chip-pro, .vst-chip-pronto {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 2px 5px; border-radius: var(--r-pill, 999px);
  font-size: 10px; font-weight: 900; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.vst-chip-precio { background: var(--v-chip-verde); color: var(--v-chip-verde-t); }
.vst-chip-logro { background: var(--v-chip-ambar); color: var(--v-chip-ambar-t); }
.vst-chip-pro { padding: 2px 7px; background: var(--v-chip-pro); color: var(--v-chip-pro-t); letter-spacing: .3px; }
.vst-chip-pronto { padding: 2px 7px; background: color-mix(in srgb, var(--v-txt) 14%, transparent); color: var(--v-suave); }
.vst-chip-lista { background: var(--v-oro); color: var(--v-oro-t); }
/* Ya es tuya: la misma etiqueta de su clase, con palomita. En el
   teléfono solo la palomita (la estrella vive al lado y no cabe más);
   en escritorio, «Tuya» o «Ganada» escrito. */
.vst-chip-tuya { gap: 3px; padding: 2px 5px; }
.vst-chip-tuya i { font-size: 11px; }
.vst-chip-txt { display: none; }
.vst-chip-pro.vst-chip-tuya { padding: 2px 6px 2px 7px; }
/* La de fábrica: «Predeterminado» abajo. En el teléfono es el renglón
   bajo la casilla (donde va el nombre); en escritorio, que no lleva
   nombres, va dentro de la casilla, abajo. */
.vst-it-n--defecto { color: var(--v-suave); }
.vst-chip-defecto {
  display: none;
  position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 2;
  padding: 1px 4px; border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--v-txt) 13%, transparent); color: var(--v-suave);
  font-size: 9px; font-weight: 800; line-height: 1.5; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vst-chip-precio i, .vst-chip-logro i { font-size: 11px; }
.vst-chip-u { display: none; }
.vst-chip-curso {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  padding: 0 7px; border-radius: var(--r-pill, 999px);
  background: var(--v-chip-verde); color: var(--v-chip-verde-t); font-size: 10px; font-weight: 900;
}
/* Cada candado dice cuánto te falta sin tocarlo. */
.vst-it-av {
  position: absolute; left: 10px; right: 10px; bottom: 7px; z-index: 2; height: 4px;
  border-radius: var(--r-pill, 999px); background: color-mix(in srgb, var(--v-txt) 16%, transparent); overflow: hidden;
}
.vst-it-av > i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--v-chip-ambar); }
/* La estrella: apagada hasta que pasas el mouse; encendida si es favorita. */
.vst-fav {
  position: absolute; right: 6px; top: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--v-fav); background: var(--v-velo-fav);
  opacity: 0; transition: opacity .15s ease, transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), color .15s ease;
}
.vst-fav i { font-size: 14px; }
.vst-it:hover .vst-fav, .vst-it:focus-visible .vst-fav, .vst-it--fav .vst-fav { opacity: 1; }
.vst-fav:hover { transform: scale(1.15); color: var(--v-estrella); }
.vst-it--fav .vst-fav { color: var(--v-estrella); }
@media (hover: none) { .vst-fav { opacity: .8; } }

/* Al cambiar de categoría las casillas entran escalonadas (--i lo pone
   vestidor.js). */
.vst-rejilla.is-entrando .vst-it-w {
  animation: vst-entra .38s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes vst-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ═══════════════════ EL PANEL ═══════════════════
   Pío grande sobre su luz, lo que miras (categoría · estado, el nombre
   y, si no es tuyo, lo que cuesta), y lo que haces. En el teléfono es la
   tarjeta de arriba. */
.vst-panel {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 0 14px 14px; border-radius: 18px;
  border: 1px solid var(--v-borde);
  background: radial-gradient(85% 48% at 50% 26%, var(--v-panel-luz), transparent 72%), var(--v-panel);
}
.vst-escenario {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 0 2px;
}
/* La luz detrás de Pío; en la transformación sube en 300 ms y baja en 620. */
.vst-luz {
  position: absolute; inset: 0; margin: auto; width: 230px; height: 230px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--v-violeta) 34%, transparent), transparent);
  transform-origin: 50% 50%;
  transition: transform .62s cubic-bezier(0.22, 1, 0.36, 1), filter .62s ease;
}
.vst-luz--flash { transform: scale(1.45); filter: brightness(2.1) saturate(1.3); transition-duration: .3s; }
.vst-pio { position: relative; }
/* El dibujo de antes, encima y apagándose, mientras el nuevo ya está
   debajo (vestidor.js, fundir). */
.vst-pio-antes { position: absolute; inset: 0; pointer-events: none; }

/* La banda: solo avisos de un momento (sin red, sesión...); lo que
   explica la prenda lo dice la tarjeta. */
.vst-banda {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 0 0; padding: 11px 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--v-violeta) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-violeta) 28%, transparent);
  opacity: 0; transform: translateY(-8px);
}
.vst-banda[hidden] { display: none; }
.vst-banda--in { opacity: 1; transform: none; transition: opacity .22s ease, transform .22s cubic-bezier(0.22, 1, 0.36, 1); }
.vst-banda i { font-size: 15px; flex-shrink: 0; color: var(--v-lila); }
.vst-banda--venta { background: color-mix(in srgb, var(--v-verde) 10%, transparent); border-color: color-mix(in srgb, var(--v-verde) 30%, transparent); }
.vst-banda--venta i { color: var(--v-verde); }
.vst-banda-txt { flex: 1; font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--v-txt); }

/* Lo que miras: la puesta, la que te pruebas o la que señala el mouse. */
.vst-decide { flex-shrink: 0; padding-top: 8px; min-height: 52px; }
.vst-cp { display: flex; flex-direction: column; gap: 4px; }
.vst-cp-k {
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--v-sub);
}
/* El estado (puesta, tuya, lo que cuesta) y la CLASE, cada uno en su
   color: la clase con el de su casilla, siempre, también si ya es tuya. */
.vst-cp--mia .vst-cp-k .vst-cp-est { color: var(--v-lila); }
.vst-cp--precio .vst-cp-k .vst-cp-est { color: var(--v-verde); }
.vst-cp--pro .vst-cp-k .vst-cp-est { color: var(--v-chip-pro); }
.vst-cp--logro .vst-cp-k .vst-cp-est { color: var(--v-chip-ambar); }
.vst-cp-cls--gratis { color: var(--v-sub); }
.vst-cp-cls--monedas { color: var(--v-verde); }
.vst-cp-cls--pro { color: var(--v-chip-pro); }
.vst-cp-cls--premio { color: var(--v-chip-ambar); }
.vst-cp-cls--fenix { color: var(--v-fx-oro-t); }
.vst-cp-n {
  font-size: 21px; font-weight: 900; letter-spacing: -.3px; line-height: 1.15; color: var(--v-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vst-cp-precio { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
.vst-cp-precio i { font-size: 16px; color: var(--v-verde); align-self: center; }
.vst-cp-precio b { font-size: 20px; font-weight: 900; color: var(--v-txt); font-variant-numeric: tabular-nums; }
.vst-cp-precio span { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--v-sub); font-variant-numeric: tabular-nums; }
.vst-cp-txt { margin: 3px 0 0; font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--v-suave); }
.vst-cp-av { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.vst-cp-barra { flex: 1; height: 6px; border-radius: var(--r-pill, 999px); overflow: hidden; background: color-mix(in srgb, var(--v-txt) 10%, transparent); }
.vst-cp-barra i { display: block; height: 100%; border-radius: inherit; background: var(--v-chip-ambar); transform-origin: left; transform: scaleX(var(--p, 0)); }
.vst-cp-av--precio .vst-cp-barra i { background: var(--v-chip-verde); }
.vst-cp-cifra { font-size: 13px; font-weight: 900; color: var(--v-txt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vst-cp-cifra span { font-weight: 700; color: var(--v-sub); }
.vst-guardado { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: var(--v-verde); }
.vst-guardado i { font-size: 22px; }
/* La tarjeta ENTRA cuando cambia la prenda: los renglones suben
   escalonados y la barra se llena desde cero. Al pasar el mouse solo se
   funde (recorrer una fila con la entrada completa se vería nervioso). */
.vst-cp--entra > * { animation: vst-cp-in .42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.vst-cp--entra > :nth-child(2) { animation-delay: .05s; }
.vst-cp--entra > :nth-child(3) { animation-delay: .1s; }
.vst-cp--entra > :nth-child(4) { animation-delay: .15s; }
.vst-cp--entra .vst-cp-barra i { animation: vst-cp-llena .8s cubic-bezier(0.22, 1, 0.36, 1) .22s both; }
.vst-cp--entra .vst-cp-precio i { animation: vst-cp-moneda .6s cubic-bezier(0.34, 1.56, 0.64, 1) .1s both; }
.vst-cp--vista { animation: vst-cp-vista .22s ease-out both; }
@keyframes vst-cp-vista { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes vst-cp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vst-cp-llena { from { transform: scaleX(0); } }
@keyframes vst-cp-moneda { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Los botones: uno principal violeta a todo lo ancho y uno oscuro.
   Al decidir una prenda (comprarla, ver Pro, quitártela) los botones de
   la decisión ocupan ese mismo sitio. ── */
.vst-acciones { display: flex; gap: 8px; margin-top: 12px; }
.vst-acciones:empty { display: none; }
.vst-btn {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), filter .18s ease, background .18s ease;
}
.vst-btn i { font-size: 17px; }
.vst-btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }
.vst-btn:disabled { cursor: default; opacity: .55; }
.vst-btn--pri { background: var(--v-boton); color: #fff; box-shadow: var(--v-sombra-boton); }
.vst-btn--sec { background: var(--v-sup); border-color: var(--v-borde); color: var(--v-txt); }
.vst-btn--sec:not(:disabled):hover { background: color-mix(in srgb, var(--v-txt) 9%, transparent); filter: none; }
.vst-btn--sec i { color: var(--v-lila); }
.vst-comprar { background: var(--v-chip-verde); color: var(--v-chip-verde-t); }
.vst-comprar:disabled { opacity: 1; background: color-mix(in srgb, var(--v-txt) 8%, transparent); color: var(--v-sub); }
.vst-ver-pro { background: var(--v-chip-pro); color: var(--v-chip-pro-t); }
/* El recibo de guardar un atuendo: el botón dice «Guardado» un momento. */
.vst-btn--ok { animation: vst-ok .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes vst-ok { 0% { transform: scale(.95); } 55% { transform: scale(1.03); } 100% { transform: none; } }

/* ── El pie: los atuendos guardados, Guardar atuendo, Sorpréndeme y,
   discreto, Empezar de cero. En escritorio va en el panel; en el
   teléfono, al final de la rejilla (vestidor.js, colocarPie). ── */
.vst-pie { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.vst-presets-cab { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.vst-presets-t { font-size: 10.5px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; color: var(--v-sub); }
.vst-presets-cab b { font-size: 10.5px; font-weight: 800; color: var(--v-sub); opacity: .75; font-variant-numeric: tabular-nums; }
.vst-presets-vacio { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--v-sub); }
.vst-presets-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px 8px; }
.vst-preset { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.vst-preset-pio {
  width: 56px; height: 56px; border-radius: 15px; padding: 2px; cursor: pointer;
  border: 1px solid var(--v-borde); background: var(--v-sup);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), border-color .18s ease;
}
.vst-preset-pio:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--v-violeta) 60%, transparent); }
.vst-preset-pio .pio { width: 50px; height: 50px; }
.vst-preset-pio .pio svg, .vst-preset-pio .pio svg * { animation: none !important; }
.vst-preset--nuevo { animation: vst-preset-nuevo .55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes vst-preset-nuevo { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: none; } }
.vst-preset-n {
  max-width: 100%; padding: 0 2px; border: none; background: none; cursor: text; font-family: inherit;
  font-size: 11px; font-weight: 700; color: var(--v-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vst-preset-n:hover { color: var(--v-txt); text-decoration: underline dotted; }
.vst-preset-inp {
  width: 100%; max-width: 76px; padding: 1px 4px; border-radius: 6px; border: 1px solid var(--v-violeta); font-family: inherit;
  font-size: 11px; font-weight: 700; color: var(--v-txt); background: var(--bg-panel); outline: none;
}
.vst-preset-x {
  position: absolute; right: calc(50% - 36px); top: -6px; width: 20px; height: 20px; border-radius: 50%; border: none;
  cursor: pointer; display: grid; place-items: center; font-size: 11px;
  background: var(--text-main); color: var(--bg-panel); opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.vst-preset:hover .vst-preset-x, .vst-preset:focus-within .vst-preset-x { opacity: 1; }
.vst-preset-x:hover { background: var(--v-rojo); color: #fff; }
@media (hover: none) { .vst-preset-x { opacity: .85; } }
.vst-botones { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.vst-decero {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center;
  margin-top: 2px; padding: 6px 12px; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--v-sub); border-radius: 8px;
  transition: color .18s ease;
}
.vst-decero i { font-size: 14px; }
.vst-decero:hover { color: var(--v-txt); }
/* En el teléfono el pie vive al final de la rejilla. */
.vst-rejilla > .vst-pie { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--v-borde); }
/* Decidiendo (te pruebas algo que no es tuyo): se decide eso primero. */
.vst--decide .vst-presets, .vst--decide .vst-botones, .vst--decide .vst-decero { display: none; }

/* El foco visible en todo lo tocable. */
.vst button:focus-visible, .vst [role="button"]:focus-visible { outline: 2px solid var(--v-violeta); outline-offset: 2px; }

/* La entrada del vestidor: las piezas suben escalonadas (el ritmo de los
   overlays de Piofly). */
.vst--entra .vst-cabeza, .vst--entra .vst-tabs, .vst--entra .vst-filtros, .vst--entra .vst-panel {
  animation: vst-sube .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vst--entra .vst-panel { animation-delay: 70ms; }
.vst--entra .vst-tabs { animation-delay: 120ms; }
.vst--entra .vst-filtros { animation-delay: 180ms; }
@keyframes vst-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Angosto: menos aire. */
@media (max-width: 640px) {
  .vst-col { height: calc(100svh - 170px); gap: 10px; }
}
@media (max-width: 380px) {
  .vst-tit { font-size: 18px; }
  .vst-fz { height: 32px; padding: 0 11px; }
  .vst-filtro { padding: 0 11px; font-size: 12px; }
  .vst-galeria { gap: 9px 7px; }
}
/* Teléfono bajito: el panel y las categorías ceden alto a la rejilla. */
@media (max-width: 1099px) and (max-height: 760px) {
  .vst-escenario { padding-top: 14px; }
  .vst-decide { padding-top: 4px; min-height: 44px; }
  .vst-cp-n { font-size: 18px; }
  .vst-tab { min-height: 50px; gap: 3px; }
  .vst-tab-i { font-size: 18px; }
}

/* ═══════════════════ EN ESCRITORIO (1100 px para arriba) ═══════════════════
   Dos zonas, como en la referencia: a la izquierda el catálogo (las ocho
   categorías, los filtros y la rejilla de seis, lo único que se
   desliza); a la derecha el panel, fijo. La página no se desplaza. */
@media (min-width: 1100px) {
  body.vst-abierto { overflow: hidden; }
  body.vst-abierto .prof-wrap { padding-bottom: 18px; }
  /* Sin tope de ancho ni centrado: con el tope de 1400 la columna se
     centraba y de 1500 px para arriba se despegaba del riel (Edgar
     2026-10-09: «sí teníamos un margen bien, sin alejarme tanto del
     sidebar»). Así arranca donde el Perfil: riel + el relleno de
     .prof-wrap, en todos los anchos. */
  .vst-col {
    max-width: none; margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 340px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "cab cab" "cat panel";
    gap: 16px 16px;
    height: calc(100svh - 38px); min-height: 600px;
  }
  .vst-cabeza { grid-area: cab; gap: 14px; }
  .vst-atras { width: 42px; height: 42px; border-radius: 13px; font-size: 19px; }
  .vst-tit { font-size: 26px; letter-spacing: -.5px; }
  .vst-lema { font-size: 13.5px; margin-top: 3px; }
  .vst-fz { height: 40px; padding: 0 16px; gap: 8px; }
  .vst-fz i { font-size: 18px; }
  .vst-fz-n { font-size: 16px; }
  .vst-listo { height: 40px; padding: 0 18px; font-size: 14px; }
  .vst-catalogo { grid-area: cat; gap: 14px; }
  .vst-tabs {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; padding: 7px;
    border-radius: 18px; overflow: visible;
  }
  .vst-tab { min-width: 0; min-height: 74px; gap: 8px; border-radius: 13px; font-size: 12.5px; padding: 10px 4px; }
  .vst-tab-marca { border-radius: 13px; }
  .vst-tab-i { font-size: 23px; }
  .vst-tab-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .vst-filtro { height: 34px; padding: 0 16px; font-size: 13px; }
  .vst-cuenta { font-size: 12.5px; }
  .vst-rejilla { padding: 2px 4px 28px 2px; }
  .vst-galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  /* Sin nombres bajo las casillas: el nombre lo da el panel al pasar el
     mouse o al tocar. */
  .vst-it-n { display: none; }
  .vst-it { border-radius: 15px; }
  .vst-chip-precio, .vst-chip-logro, .vst-chip-pro, .vst-chip-pronto { left: 8px; top: 8px; font-size: 11px; padding: 2px 8px 2px 6px; }
  .vst-chip-pro, .vst-chip-pronto { padding: 2px 8px; }
  .vst-chip-precio i, .vst-chip-logro i { font-size: 12px; }
  .vst-chip-u { display: inline; margin-left: 3px; }
  .vst-chip-tuya { padding: 2px 8px 2px 6px; }
  .vst-chip-txt { display: inline; }
  .vst-chip-defecto { display: block; left: 12px; right: 12px; bottom: 9px; font-size: 11px; padding: 2px 6px; }
  .vst-fav { width: 28px; height: 28px; right: 8px; top: 8px; }
  .vst-fav i { font-size: 15px; }
  .vst-it-av { left: 12px; right: 12px; bottom: 9px; height: 5px; }
  .vst-panel {
    grid-area: panel; min-height: 0; overflow: hidden auto; scrollbar-width: thin;
    padding: 0 20px 18px; border-radius: 20px;
  }
  /* Pío NO se mueve: el escenario mide lo que da la pantalla (no lo que
     haya debajo) y Pío va centrado en él, como en la referencia; lo de
     abajo crece hacia abajo. */
  .vst-escenario { height: clamp(226px, calc(100svh - 520px), 390px); padding: 18px 0 6px; }
  .vst-luz { width: 300px; height: 300px; }
  .vst-decide { padding-top: 6px; min-height: 60px; }
  .vst-cp-n { font-size: 24px; }
  .vst-acciones { flex-direction: column; gap: 10px; margin-top: 16px; }
  .vst-btn { flex: 0 0 auto; width: 100%; min-height: 46px; border-radius: 13px; font-size: 14.5px; }
  .vst-btn--sec { min-height: 44px; }
  .vst-pie { margin-top: 14px; }
}
@media (min-width: 1100px) and (hover: hover) {
  .vst-it:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); border-color: color-mix(in srgb, var(--v-violeta) 55%, transparent); }
  .vst-it:hover .vst-mini { transform: scale(1.08) translateY(-2%); }
  .vst-it--puesta:hover { transform: none; border-color: var(--v-violeta); }
  .vst-tab:hover:not(.vst-tab--on) { background: color-mix(in srgb, var(--v-txt) 8%, transparent); color: var(--v-txt); }
}

/* ═══════════ LA PREGUNTA AL SALIR (vestidor.js, preguntarSalida) ═══════════
   Velo oscuro, tarjeta centrada, Guardar en morado, Descartar en contorno
   y «Seguir vistiendo» en letra. El velo se funde y la tarjeta sube con
   resorte. */
.vst-salida {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 5, 16, 0); transition: background .22s ease;
}
.vst-salida--in { background: rgba(26, 18, 38, .5); }
[data-theme="dark"] .vst-salida--in { background: rgba(8, 5, 16, .72); }
.vst-salida-caja {
  width: 100%; max-width: 380px; padding: 24px 22px 18px; border-radius: 22px;
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  box-shadow: 0 24px 60px rgba(26, 18, 38, .25);
  display: flex; flex-direction: column; gap: 8px; text-align: center;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .26s cubic-bezier(0.22, 1, 0.36, 1), transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .vst-salida-caja {
  background: #1A1226; border-color: rgba(196, 166, 255, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .2);
}
.vst-salida--in .vst-salida-caja { opacity: 1; transform: none; }
.vst-salida-t { font-size: 18px; font-weight: 900; letter-spacing: -.2px; color: var(--m-txt); text-wrap: balance; }
.vst-salida-s { font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--m-sub); text-wrap: balance; }
.vst-salida-btns { display: flex; gap: 10px; margin-top: 12px; }
.vst-salida-b {
  flex: 1; padding: 13px 16px; border-radius: 14px; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 800; border: 1px solid transparent;
  transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), filter .18s ease, background .18s ease;
}
.vst-salida-b:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vst-salida-b--si { background: #A855F7; color: #fff; }
.vst-salida-b--no { background: transparent; color: var(--m-txt); border-color: var(--border-mid, var(--border-soft)); }
[data-theme="dark"] .vst-salida-b--no { border-color: rgba(255, 255, 255, .16); }
.vst-salida-b--no:hover { background: color-mix(in srgb, var(--m-txt) 7%, transparent); }
.vst-salida-seguir {
  margin: 6px auto 0; padding: 8px 12px; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--m-sub);
}
.vst-salida-seguir:hover { color: var(--m-txt); }
.vst-salida-b:focus-visible, .vst-salida-seguir:focus-visible { outline: 2px solid #C4A6FF; outline-offset: 2px; }

/* ═══════════════ EL FESTEJO (Festejo.js de la app, en CSS) ═══════════
   Velo, 12 rayos dorados girando −25°→18°, aro 148 con glow, la prenda
   en grande. La luz llega ANTES que el objeto; el objeto entra con
   resorte y se pasa un poco; sale solo. El toque lo cierra antes. */
.vst-festejo { position: fixed; inset: 0; z-index: 999; cursor: pointer; }
.vst-festejo-velo { position: absolute; inset: 0; background: rgba(8, 5, 16, .86); opacity: 0; transition: opacity .24s ease; }
.vst-festejo--in .vst-festejo-velo { opacity: 1; }
.vst-festejo--out .vst-festejo-velo { opacity: 0; }
.vst-festejo-centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vst-festejo-rayos {
  position: absolute; opacity: 0; transform: rotate(-25deg) scale(.55);
  transition: opacity .3s ease, transform .48s cubic-bezier(.34, 1.56, .64, 1);
}
.vst-festejo--in .vst-festejo-rayos { opacity: .75; transform: rotate(18deg) scale(1); }
.vst-festejo--out .vst-festejo-rayos { opacity: 0; }
.vst-festejo-caja {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 30px;
  opacity: 0; transform: scale(.55) translateY(26px);
  transition: opacity .24s ease, transform .48s cubic-bezier(.34, 1.56, .64, 1);
}
.vst-festejo--in .vst-festejo-caja { opacity: 1; transform: none; }
.vst-festejo--out .vst-festejo-caja { opacity: 0; transform: scale(1.06) translateY(-10px); }
.vst-festejo-k { color: #F5B62B; font-size: 11px; font-weight: 900; letter-spacing: 3.4px; margin-bottom: 14px; }
.vst-festejo-aro {
  width: 148px; height: 148px; border-radius: 74px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 182, 43, .10); border: 2px solid rgba(245, 182, 43, .45);
  box-shadow: 0 0 26px rgba(245, 182, 43, .75); color: #fff;
}
.vst-festejo-mini { width: 104px; height: 104px; }
.vst-festejo-n { color: #fff; font-size: 23px; font-weight: 900; letter-spacing: -.5px; margin-top: 18px; text-align: center; }
.vst-festejo-m { color: #A99BC4; font-size: 12.5px; line-height: 18px; margin-top: 6px; text-align: center; max-width: 260px; }
.vst-festejo-ya {
  color: #C4A6FF; font-size: 12px; font-weight: 800; margin-top: 14px; padding: 6px 14px; border-radius: 999px;
  background: rgba(196, 166, 255, .14);
}
/* En un monitor el festejo crece con la pantalla. */
@media (min-width: 1100px) {
  .vst-festejo-rayos svg { width: min(62vmin, 520px); height: min(62vmin, 520px); }
  .vst-festejo-aro { width: clamp(148px, 24vmin, 220px); height: clamp(148px, 24vmin, 220px); border-radius: 50%; }
  .vst-festejo-mini { width: 70%; height: 70%; }
  .vst-festejo-k { font-size: 13px; }
  .vst-festejo-n { font-size: 28px; }
  .vst-festejo-m { font-size: 14px; line-height: 20px; max-width: 320px; }
}

/* ═══════════════════ EL CONJUNTO FÉNIX (2026-10-09) ═══════════════════
   La regla, en el panel: «Conjunto Fénix N/8», las ocho piezas (puesta
   en fuego, tuya con su contorno, por ganar punteada; cada una lleva a su
   categoría) y lo que falta. Las casillas de 365 días se tiñen de brasa y
   oro: el premio de un año no se confunde con los de 30 a 150. */
.vst-fenix {
  margin: 10px 0 2px; padding: 10px 12px 11px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v-fx-brasa) 15%, transparent), color-mix(in srgb, var(--v-fx) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--v-fx) 32%, transparent);
  animation: vst-fx-in .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vst-fenix[hidden] { display: none; }
@keyframes vst-fx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vst-fx-cab {
  display: flex; align-items: center; gap: 6px; color: var(--v-txt);
  font-size: 11px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase;
}
.vst-fx-cab i { color: var(--v-fx); font-size: 15px; }
.vst-fx-n { margin-left: auto; font-size: 13px; letter-spacing: .4px; color: var(--v-fx-oro-t); font-variant-numeric: tabular-nums; }
.vst-fx-piezas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.vst-fx-p {
  aspect-ratio: 1; min-height: 28px; border-radius: 9px; display: grid; place-items: center; padding: 0;
  font-size: 15px; cursor: pointer; border: 1px solid var(--v-borde); background: var(--v-sup); color: var(--v-sub);
  transition: transform var(--tr), background var(--tr), box-shadow var(--tr);
}
.vst-fx-p:hover { transform: translateY(-1px); }
.vst-fx-p:focus-visible { outline: 2px solid var(--v-fx); outline-offset: 2px; }
.vst-fx-p--tuya { color: var(--v-fx); border-color: color-mix(in srgb, var(--v-fx) 50%, transparent); }
.vst-fx-p--puesta {
  color: var(--v-fx-tinta); border-color: transparent;
  background: linear-gradient(180deg, var(--v-fx), var(--v-fx-brasa));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--v-fx) 34%, transparent);
}
.vst-fx-p--falta { border-style: dashed; opacity: .6; }
.vst-fx-txt { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--v-suave); }
.vst-fx-ver {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--v-fx) 48%, transparent); background: transparent;
  color: var(--v-fx-oro-t); font: 800 12px/1 Nunito, system-ui, sans-serif; cursor: pointer; transition: background var(--tr);
}
.vst-fx-ver:hover { background: color-mix(in srgb, var(--v-fx) 12%, transparent); }
.vst-fx-ver:focus-visible { outline: 2px solid var(--v-fx); outline-offset: 2px; }
.vst-fenix--listo {
  background: linear-gradient(135deg, color-mix(in srgb, var(--v-fx-brasa) 30%, transparent), color-mix(in srgb, var(--v-fx-oro) 14%, transparent));
  border-color: color-mix(in srgb, var(--v-fx-oro) 60%, transparent);
}
.vst-fenix--listo .vst-fx-txt { color: var(--v-txt); font-weight: 800; }
.vst-it--fenix {
  --vit-a: color-mix(in srgb, var(--v-fx) 28%, transparent);
  --vit-b: color-mix(in srgb, var(--v-fx-brasa) 10%, transparent);
  --vit-borde: color-mix(in srgb, var(--v-fx-oro) 58%, transparent);
}
.vst-cp-fx {
  display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.45; font-weight: 700; color: var(--v-fx-oro-t);
}
.vst-cp-fx i { color: var(--v-fx); font-size: 14px; margin-top: 1px; }
@media (max-width: 1099px) {
  .vst-fenix { margin: 6px 0 0; padding: 8px 10px 9px; }
  .vst-fx-piezas { gap: 4px; margin-top: 6px; }
  .vst-fx-p { font-size: 13px; border-radius: 8px; }
  .vst-fx-txt { font-size: 12px; margin-top: 6px; }
  .vst-fx-ver { margin-top: 6px; padding: 5px 10px; font-size: 11.5px; }
}

/* ── RENACER: el momento de volverse Fénix ───────────────────────────
   Vive en el body (fuera de .vst), así que trae sus colores. La brasa se
   enciende, el fogonazo, el aro se abre, sube el Fénix entre rayos y
   chispas y entra la frase. Todo CSS (el Fénix, SMIL); se salta con un
   toque o con Esc. */
.vst-renacer {
  --rn-velo: rgba(12, 3, 2, .97); --rn-luz: rgba(92, 20, 6, .94);
  --rn-oro: #FFD25A; --rn-fuego: #F97316; --rn-blanco: #FFF7E6; --rn-sub: #EBCBAA; --rn-toca: rgba(255, 247, 230, .55);
  position: fixed; inset: 0; z-index: 1000; cursor: pointer; overflow: hidden;
}
.vst-renacer-velo {
  position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at 50% 42%, var(--rn-luz), var(--rn-velo) 62%);
}
.vst-renacer--in .vst-renacer-velo { opacity: 1; }
.vst-renacer--out { opacity: 0; transition: opacity .26s cubic-bezier(0.55, 0, 0.85, 0.4); }
.vst-renacer-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.vst-renacer-rayos {
  position: absolute; top: 40%; left: 50%; width: min(92vmin, 660px); height: min(92vmin, 660px);
  transform: translate(-50%, -50%) rotate(-30deg) scale(.6); opacity: 0;
}
.vst-renacer-rayos svg { width: 100%; height: 100%; display: block; }
.vst-renacer--in .vst-renacer-rayos { animation: rn-rayos 4.2s .55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rn-rayos {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(.6); }
  22% { opacity: .8; }
  100% { opacity: .5; transform: translate(-50%, -50%) rotate(28deg) scale(1); }
}
.vst-renacer-brasa {
  position: absolute; top: 40%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--rn-blanco), var(--rn-oro) 40%, var(--rn-fuego) 68%, transparent 71%);
}
.vst-renacer--in .vst-renacer-brasa { animation: rn-brasa 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rn-brasa {
  0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1); }
  52% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(16); }
}
.vst-renacer-aro {
  position: absolute; top: 40%; left: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; opacity: 0;
  border: 3px solid var(--rn-oro); box-shadow: 0 0 40px var(--rn-fuego), inset 0 0 30px var(--rn-fuego);
}
.vst-renacer--in .vst-renacer-aro { animation: rn-aro 1.15s .5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rn-aro { 0% { opacity: 0; transform: scale(.15); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.7); } }
.vst-renacer-pio { position: relative; margin-top: -6vh; opacity: 0; transform: translateY(60px) scale(.35); }
.vst-renacer--in .vst-renacer-pio { animation: rn-pio .85s .62s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes rn-pio { to { opacity: 1; transform: none; } }
.vst-renacer-chispas { position: absolute; inset: 0; }
.vst-renacer-chispas i {
  position: absolute; left: var(--x); bottom: -10px; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
  background: var(--rn-oro); box-shadow: 0 0 10px var(--rn-fuego);
}
.vst-renacer--in .vst-renacer-chispas i { animation: rn-chispa 2.6s calc(.7s + var(--i) * .11s) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rn-chispa { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-78vh); } }
.vst-renacer-txt { position: relative; text-align: center; margin-top: 14px; padding: 0 16px; }
.vst-renacer-k { color: var(--rn-oro); font-size: 12px; font-weight: 900; letter-spacing: 3.4px; opacity: 0; }
.vst-renacer-t {
  color: var(--rn-blanco); font-size: clamp(30px, 6vw, 46px); font-weight: 900; letter-spacing: -.5px; margin-top: 6px; opacity: 0;
  text-shadow: 0 0 24px color-mix(in srgb, var(--rn-fuego) 60%, transparent);
}
.vst-renacer-s { color: var(--rn-sub); font-size: 14px; line-height: 1.5; margin: 8px auto 0; max-width: 340px; opacity: 0; }
.vst-renacer-toca { color: var(--rn-toca); font-size: 11.5px; font-weight: 800; margin-top: 16px; opacity: 0; }
.vst-renacer--in .vst-renacer-k { animation: rn-sube .5s 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.vst-renacer--in .vst-renacer-t { animation: rn-sube .55s 1.27s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.vst-renacer--in .vst-renacer-s { animation: rn-sube .55s 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.vst-renacer--in .vst-renacer-toca { animation: rn-sube .5s 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rn-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vst-fenix { animation: none; }
  .vst-renacer, .vst-renacer * { animation: none !important; transition: none !important; }
  .vst-renacer-velo, .vst-renacer-pio, .vst-renacer-k, .vst-renacer-t, .vst-renacer-s, .vst-renacer-toca { opacity: 1; transform: none; }
  .vst-renacer-rayos { opacity: .6; transform: translate(-50%, -50%); }
  .vst-renacer-brasa, .vst-renacer-aro, .vst-renacer-chispas { display: none; }
}

/* ═══════════════════ MOVIMIENTO REDUCIDO ═══════════════════
   Sin luz, sin resorte, sin marca que viaja, sin entradas: todo en su
   estado final y visible. */
@media (prefers-reduced-motion: reduce) {
  .vst-it, .vst-tab, .vst-mini, .vst-btn, .vst-fav, .vst-filtro, .vst-preset-pio, .vst-atras { transition: none; }
  .vst-it:hover, .vst-it:hover .vst-mini, .vst-it:active, .vst-btn:not(:disabled):hover, .vst-preset-pio:hover, .vst-fav:hover, .vst-atras:hover { transform: none; }
  .vst-luz { transition: none; }
  .vst-luz--flash { transform: none; filter: none; }
  .vst-tab-marca { transition: none; }
  .vst-banda--in { transition: none; }
  .vst-rejilla.is-entrando .vst-it-w, .vst-it--puesta, .vst-fz-resta, .vst-it--lista, .vst-listo,
  .vst-cp--entra > *, .vst-cp--entra .vst-cp-barra i, .vst-cp--entra .vst-cp-precio i, .vst-cp--vista,
  .vst-btn--ok, .vst-preset--nuevo,
  .vst--entra .vst-cabeza, .vst--entra .vst-tabs, .vst--entra .vst-filtros, .vst--entra .vst-panel {
    animation: none; opacity: 1; transform: none;
  }
  .vst-salida, .vst-salida-caja, .vst-salida-b { transition: none; }
  .vst-salida-caja { opacity: 1; transform: none; }
  .vst-salida-b:hover { transform: none; }
  /* El festejo se simplifica a un fundido: sin resorte ni giro. */
  .vst-festejo-rayos, .vst-festejo-caja { transition: opacity .2s ease; transform: none; }
  .vst-festejo--in .vst-festejo-rayos { transform: rotate(18deg); }
}