/* Vestuario de la portada (antes «Armería»). Generado desde prototipos/armeria-vestuario.html:
   todos los selectores van dentro de .vst-app para no tocar el resto de la portada,
   y las animaciones llevan el prefijo vst-. */
    /* ============================================================
       PROTOTIPO — Armería «Vestuario» (v3)
       Vestuario de gimnasio: cada prenda en su taquilla; al abrirla sale al rojo vivo y se enfría.
       v3 (pulido de UX/UI y fallos):
       - 3D más simple y seguro para Safari/iPhone: la perspectiva va en cada taquilla (no en la fila) y el
         interior es plano y sin esquinas recortadas (Safari dejaba de pintar la prenda animada).
       - El destello empieza cuando la puerta ya se está abriendo, así se ve de verdad.
       - Barra fija abajo en móvil con la prenda, la talla elegida y el botón (antes había que bajar a la ficha).
       - Etiquetas de talla de 44 px en pantallas táctiles; si pulsas comprar sin talla, parpadean.
       - Carrusel también en tablet y portátil pequeño (antes las 7 taquillas se cortaban).
       - Envío gratis: tras añadir, cuánto falta para los 65 €.
       v4 (interfaz):
       - En el carrusel, la taquilla activa manda: las de los lados se encogen y se apagan.
       - Nombre, precio y aviso de stock justo debajo de la taquilla (sin bajar a la ficha).
       - Tallas: «quedan 2» bajo la etiqueta, agotadas tachadas en diagonal y la elegida se balancea.
       - La percha entra balanceándose, sombra en el suelo de la taquilla y foto a pantalla completa al tocar la prenda.
       - Accesibilidad: más contraste, foco visible en las etiquetas y un único aviso hablado al abrir.
       v5 (estética de la web):
       - Botones, ficha, avisos y campos con el lenguaje de ignit.fit: esquinas cortadas, botón rojo que se llena de blanco
         al pasar, letras de 11 px con 3 px de espaciado, precio en #ff6b73 y especificaciones en filas como la ficha de producto.
       - Ampliar: movimiento de cámara, la escena gira y se acerca a la puerta (que queda de frente con el póster del modelo); «Prenda» lleva la cámara al interior.
       No se publica (carpeta prototipos/).
       ============================================================ */
    .vst-app {
      /* texturas generadas (ruido SVG): grano fino, manchas de hormigón, veta de madera y acero cepillado */
      --grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .55 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --grain-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .3 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* grano suave, para la pintura de las taquillas */
      --worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -.9 0 0 0 1.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* máscara de pintura gastada (letras pintadas en el suelo) */
      --grain-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --mottle-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 .35 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .22' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.03 1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .4 0 0 0 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      color-scheme: dark;
      --red: #C1121F; --red-hov: #D72535; --bone: #F4F2ED; --mute: #B3B6BB; --soft: #A3A7AD; --light: #F6F3E7;
      --steel-1: #3B4048; --steel-2: #23272D; --tape: #ECE6D4; --lava: #ff6a1a; --ink: #0B0B0D;
      /* en escritorio las taquillas crecen si la pantalla lo permite (plano final más cerca); en móvil y tablet se redefinen abajo */
      --locker-w: clamp(168px, min(12.5vw, (100vh - 390px) / 2.857), 230px); --locker-h: calc(var(--locker-w) * 2.857); --gap: 6px;
      --ease-door: cubic-bezier(.2, 1.15, .35, 1);
      --ease-out: cubic-bezier(.2, .8, .2, 1);
      --display: 'Big Shoulders Display', 'Anton', Impact, sans-serif;
      --body: 'Montserrat', system-ui, sans-serif;
      --bar-h: 0px;
      /* lenguaje de la web (css/chrome.css, tienda.css, product-v2.css) */
      --bt-ease: cubic-bezier(.1, .4, .2, 1); --price: #e11d2b; --cat: #ff4d57; --line: rgba(244,242,237,.16);
    }
    /* esquinas cortadas, como los botones y tarjetas de ignit.fit */
    .vst-app .btn, .vst-app .bag, .vst-app .nav button, .vst-app .bb-bag, .vst-app .zoom-x, .vst-app .zoom-tabs button, .vst-app .fav-list button, .vst-app .notify input, .vst-app .vst-toast, .vst-app .card, .vst-app .countdown {
      --c: 10px; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
    .vst-app .bag, .vst-app .nav button, .vst-app .bb-bag, .vst-app .zoom-x, .vst-app .notify input, .vst-app .fav-list button { --c: 7px; }
    .vst-app .card { --c: 16px; }
    .vst-app * { box-sizing: border-box; }
    .vst-app { margin: 0; background: #060607; color: var(--bone); font-family: var(--body); -webkit-font-smoothing: antialiased; }
    
    .vst-app a { color: inherit; }
    .vst-app button { font-family: inherit; }
    .vst-app :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

    /* Barra del prototipo */
    
    
    
    
       /* oculta: el selector «Ver como» sigue ahí (invitado por defecto) para el código */

    /* ---------- La sala ---------- */
    .vst-app .vst { position: relative; overflow: hidden; padding: 40px 0 64px; isolation: isolate;
      background:
        radial-gradient(ellipse 60% 45% at 50% 4%, rgba(246,243,231,.12), transparent 70%),
        linear-gradient(180deg, rgba(6,6,7,.45), rgba(6,6,7,.94) 82%),
        repeating-linear-gradient(0deg, #1d1e21 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, #1d1e21 0 1px, transparent 1px 46px), #121315; }
    .vst-app .vst::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; z-index: -1; background: linear-gradient(180deg, #17181b, #09090b); box-shadow: inset 0 18px 30px -10px rgba(0,0,0,.8); }
    .vst-app .tube { position: absolute; top: 24px; left: 50%; width: min(560px, 70vw); height: 8px; transform: translateX(-50%); border-radius: 6px; background: #2a2b2e; }
    .vst-app .tube::before { content: ""; position: absolute; inset: 2px 6px; border-radius: 4px; background: var(--light); opacity: 0; box-shadow: 0 0 22px 6px rgba(246,243,231,.55), 0 0 120px 40px rgba(246,243,231,.12); }
    .vst-app .vst.is-lit .tube::before { animation: vst-flicker 1.3s steps(1) forwards; }
    /* haz de luz bajo el fluorescente */
    .vst-app .tube::after { content: ""; position: absolute; top: 8px; left: 50%; width: 150%; height: 560px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 1.4s .4s;
      background: radial-gradient(ellipse 36% 100% at 50% 0%, rgba(246,243,231,.085), rgba(246,243,231,.035) 45%, transparent 78%); }
    .vst-app .vst.is-lit .tube::after { opacity: 1; }
    .vst-app .mote { position: absolute; top: 46%; width: 2px; height: 2px; border-radius: 50%; background: rgba(246,243,231,.7); pointer-events: none; z-index: 2; opacity: 0;
      animation: vst-mote var(--t, 12s) linear var(--d, 0s) infinite; }
    @keyframes vst-mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translate(var(--dx, 20px), -300px); opacity: 0; } }
    /* resplandor rojo en el suelo */
    .vst-app .vst::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 44%; z-index: -1; pointer-events: none;
      background: radial-gradient(ellipse 45% 40% at 50% 60%, rgba(193,18,31,.16), transparent 70%); animation: vst-glow 6s ease-in-out infinite; }
    @keyframes vst-glow { 50% { opacity: .55; } }
    @keyframes vst-flicker { 0% { opacity: 0 } 8% { opacity: .9 } 12% { opacity: .1 } 20% { opacity: .85 } 24% { opacity: .2 } 34% { opacity: 1 } 100% { opacity: 1 } }
    /* Entrada: vestuario en 3D (taquillas juntas en la pared, banco, suelo y fluorescentes). La cámara se acerca a la
       primera taquilla y, al llegar, la escena se funde con la taquilla real, que está exactamente en el mismo sitio. */
    .vst-app .lr { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; perspective: 1000px; background: #050506; }
    .vst-app .vst.pre .row { visibility: hidden; }
    .vst-app .vst-head, .vst-app .now, .vst-app .nav, .vst-app .dots, .vst-app .hint, .vst-app .data-note { transition: opacity .9s ease; }
    .vst-app .vst.pre .vst-head, .vst-app .vst.pre .now, .vst-app .vst.pre .nav, .vst-app .vst.pre .dots, .vst-app .vst.pre .hint, .vst-app .vst.pre .data-note { opacity: 0; }
    .vst-app .lr-world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
    .vst-app .lr-world > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden; }
    .vst-app .lr .locker { position: absolute; flex: none; }
    .vst-app .lr .locker .inside { background: #0b0c0e; }
    /* pared de azulejo con charcos de luz de los fluorescentes */
    /* pared de azulejo esmaltado: junta hundida (sombra arriba, luz abajo), brillo en cada pieza, grano y sombra de contacto abajo */
    .vst-app .lr-wall { background:
        radial-gradient(ellipse 18% 30% at var(--l1, 30%) 22%, rgba(246,243,231,.12), transparent 70%),
        radial-gradient(ellipse 18% 30% at var(--l2, 70%) 22%, rgba(246,243,231,.12), transparent 70%),
        linear-gradient(0deg, rgba(0,0,0,.75), transparent 9%),
        linear-gradient(180deg, rgba(0,0,0,.6), transparent 14%),
        var(--grain-l) 0 0 / 160px 160px, var(--grain-d) 0 0 / 170px 170px, var(--mottle) 0 0 / 420px 420px,
        repeating-linear-gradient(0deg, rgba(0,0,0,.8) 0 2px, rgba(255,255,255,.07) 2px 3px, transparent 3px 34px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.8) 0 2px, rgba(255,255,255,.05) 2px 3px, transparent 3px 68px),
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 45%, rgba(0,0,0,.15)) 0 0 / 68px 34px,
        linear-gradient(180deg, #1c1e21, #131416 60%, #0c0d0e); }
    .vst-app .lr-trim, .vst-app .lr-base-unused { background: linear-gradient(180deg, #3a3e44, #1c1e22 60%, #0d0e10); box-shadow: 0 6px 10px rgba(0,0,0,.7); }
    .vst-app .lr-base { background: linear-gradient(180deg, #0b0c0d, #151618); box-shadow: inset 0 2px 0 rgba(255,255,255,.06); }
    /* suelo: hormigón pulido con manchas y poro, juntas con canto, reflejo de la luz junto a las taquillas,
       el resplandor rojo de la sala y sombra de contacto donde se junta con la pared */
    .vst-app .lr-floor { background:
        linear-gradient(180deg, rgba(0,0,0,.8), transparent 4%),
        linear-gradient(180deg, transparent 3%, rgba(246,243,231,.07) 6%, transparent 22%),
        radial-gradient(ellipse 40% 50% at 50% 10%, rgba(225,29,43,.14), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(246,243,231,.06), transparent 70%),
        linear-gradient(100deg, transparent 30%, rgba(255,255,255,.025) 45%, transparent 60%),
        var(--grain-l) 0 0 / 160px 160px, var(--grain-d) 0 0 / 170px 170px, var(--mottle) 0 0 / 420px 420px, var(--mottle-l) 0 0 / 380px 380px,
        repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 2px, rgba(255,255,255,.05) 2px 3px, transparent 3px 160px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 2px, rgba(255,255,255,.04) 2px 3px, transparent 3px 160px),
        linear-gradient(180deg, #1a1b1e, #101113); }
    /* techo de placas */
    .vst-app .lr-ceil { background: var(--grain-d) 0 0 / 170px 170px,
        repeating-linear-gradient(0deg, rgba(0,0,0,.7) 0 2px, rgba(255,255,255,.03) 2px 3px, transparent 3px 90px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.7) 0 2px, rgba(255,255,255,.03) 2px 3px, transparent 3px 90px),
        linear-gradient(0deg, #0d0d0f, #060607); }
    /* banco de vestuario: tablón de roble barnizado (veta, reflejo del barniz y canto redondeado) sobre pies de acero cromado */
    .vst-app .lr-seat { background:
        linear-gradient(100deg, transparent 25%, rgba(255,240,220,.16) 42%, transparent 58%),
        var(--wood) 0 0 / 300px 300px, var(--grain-d) 0 0 / 170px 170px,
        repeating-linear-gradient(90deg, rgba(60,30,10,.18) 0 1px, transparent 1px 7px, rgba(60,30,10,.1) 7px 8px, transparent 8px 19px),
        linear-gradient(180deg, #b98c5d, #94653d 60%, #7d5332);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), inset 0 -2px 0 rgba(255,230,200,.25); }
    .vst-app .lr-seatf { background: linear-gradient(180deg, #d9b088 0, #9a6a42 22%, #6b4529 70%, #3f2817), var(--wood) 0 0 / 300px 300px; box-shadow: 0 4px 6px rgba(0,0,0,.6); }
    .vst-app .lr-leg { background: var(--brushed) 0 0 / 200px 200px, linear-gradient(90deg, #1b1d21, #6f767e 22%, #e6eaee 38%, #8a9199 52%, #3a3e44 80%, #1b1d21); }
    .vst-app .lr-foot { border-radius: 4px; background: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.35), transparent 40%), radial-gradient(ellipse at 50% 50%, #50555c, #1a1b1e 80%); box-shadow: 0 2px 3px rgba(0,0,0,.8); }
    .vst-app .lr-shadow { border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.75), transparent 70%); }
    /* fluorescentes colgados: regleta + tubo que se enciende con parpadeo */
    .vst-app .lr-lamp { border-radius: 3px; background: linear-gradient(180deg, #4a4e55, #24262a 45%, #121315); box-shadow: 0 3px 5px rgba(0,0,0,.7); }
    .vst-app .lr-lamp::before { content: ""; position: absolute; inset: 0; border-radius: 3px; border-left: 6px solid #15161a; border-right: 6px solid #15161a; }   /* tapas de la regleta */
    .vst-app .lr-lamp::after { content: ""; position: absolute; inset: 2px 5px; border-radius: 3px; background: var(--light); opacity: 0; box-shadow: 0 0 18px 5px rgba(246,243,231,.55), 0 0 90px 30px rgba(246,243,231,.1); }
    .vst-app .lr.is-on .lr-lamp::after { animation: vst-flicker 1.3s steps(1) forwards; }
    .vst-app .lr-wire { background: linear-gradient(90deg, #0d0e10, #3a3d42, #0d0e10); }
    /* viñeta y, abajo, el suelo se pierde en la oscuridad (así no se ve dónde acaba en el plano lejano) */
    .vst-app .lr-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #050506 0, rgba(5,5,6,.85) 8%, transparent 30%), radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, rgba(0,0,0,.75)); }
    .vst-app .lr .lr-dark { position: absolute; inset: 0; background: #000; pointer-events: none; }
    /* al acabar la entrada la sala se queda como fondo: detrás de todo, con la misma pared, suelo y luces */
    .vst-app .lr.static { z-index: -1; }
    .vst-app .skip { position: absolute; z-index: 9; right: 16px; bottom: 22px; padding: 10px 16px; border: 0; cursor: pointer; color: #f4f2ed; background: rgba(6,6,7,.6);
      box-shadow: inset 0 0 0 1px rgba(244,242,237,.25); font: 800 10px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; opacity: 0; animation: vst-skip-in .4s .6s forwards; }
    .vst-app .skip:hover { box-shadow: inset 0 0 0 1px #f4f2ed; }
    @keyframes vst-skip-in { to { opacity: 1; } }
    .vst-app .lr.static .lr-vig { opacity: .7; }
    .vst-app .lr:not(.static) .lr-vig { background: linear-gradient(0deg, #050506 0, #050506 14%, rgba(5,5,6,.7) 26%, transparent 46%), radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, rgba(0,0,0,.75)); }   /* en la entrada, más oscuro abajo */
    .vst-app .vst.room::before, .vst-app .vst.room::after, .vst-app .vst.room .tube, .vst-app .vst.room .bench { display: none; }
    .vst-app .vst.room { background: #050506; }
    /* laterales de las taquillas de la escena (la fila sobresale de la pared) */
    /* laterales y techo de la fila: chapa pintada con grano y vetas de cepillado */
    .vst-app .lr-side { background: var(--grain-l) 0 0 / 160px 160px, repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), linear-gradient(90deg, #0b0c0e, #24272c); }
    .vst-app .lr-side.r { background: var(--grain-l) 0 0 / 160px 160px, repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), linear-gradient(270deg, #0b0c0e, #24272c); }
    .vst-app .lr-top { background: var(--grain-l) 0 0 / 160px 160px, linear-gradient(0deg, #2c2f34, #111214); }
    @media (prefers-reduced-motion: reduce) { .vst-app .vst.pre .row { visibility: visible; } .vst-app .vst.pre .vst-head, .vst-app .vst.pre .now, .vst-app .vst.pre .nav, .vst-app .vst.pre .dots, .vst-app .vst.pre .hint { opacity: 1; } }
    .vst-app .dim { transition: opacity 1.1s .25s; opacity: .3; }
    .vst-app .vst.is-lit .dim { opacity: 1; }

    .vst-app .tools { position: absolute; top: 18px; left: 16px; right: 16px; z-index: 6; display: flex; justify-content: flex-end; pointer-events: none; }
    .vst-app .tools > * { pointer-events: auto; }
    .vst-app .bag { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; color: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(244,242,237,.14); font: 800 11px var(--body); letter-spacing: 3px; text-transform: uppercase; }
    .vst-app .bag b { min-width: 22px; padding: 4px 6px; background: var(--red); color: #fff; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; }
    .vst-app .bump { animation: vst-bump .5s var(--ease-door); }
    @keyframes vst-bump { 40% { transform: scale(1.18) } }

    .vst-app .vst-head { text-align: center; padding: 0 16px; margin-bottom: 34px; }
    .vst-app .eyebrow { display: inline-flex; gap: 12px; align-items: center; margin: 0 0 14px; color: var(--mute); font: 700 11px/1 var(--body); letter-spacing: 5px; text-transform: uppercase; }
    .vst-app .eyebrow i { width: 28px; height: 1px; background: var(--red); }
    .vst-app .eyebrow i:last-child { margin-left: -5px; }   /* compensa el espacio de letra tras la última letra: las dos barras quedan a la misma distancia */
    .vst-app .vst-title { margin: 0; font: 900 clamp(2.7rem, 8vw, 6rem)/.9 var(--display); text-transform: uppercase; text-wrap: balance; }
    .vst-app .vst-title em { font-style: normal; color: var(--red); }
    .vst-app .all-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; padding: 6px 2px; color: #f4f2ed; font: 800 11px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--red); }
    .vst-app .all-link:hover span { transform: translateX(3px); }
    .vst-app .all-link span { transition: transform .2s; color: var(--red); }
    .vst-app .vst-sub { margin: 14px auto 0; max-width: 520px; color: var(--mute); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

    /* ---------- Taquillas ---------- */
    .vst-app .row { position: relative; display: flex; gap: var(--gap); justify-content: center; padding: 0 16px 10px; }
    /* La perspectiva va en CADA taquilla y la taquilla no es «preserve-3d»: así puerta e interior no compiten
       en el mismo espacio 3D (en Safari eso hacía que la puerta tapara la prenda o que esta desapareciera). */
    .vst-app .locker { position: relative; flex: 0 0 var(--locker-w); height: var(--locker-h); perspective: 1100px; perspective-origin: 30% 50%; transition: filter .5s; }
    .vst-app .locker.is-open { z-index: 3; }
    .vst-app .hood, .vst-app .plinth { position: absolute; left: calc(var(--gap) / -2 - 1px); right: calc(var(--gap) / -2 - 1px); pointer-events: none; z-index: 0; }
    .vst-app .hood { bottom: calc(100% + 4px); height: calc(var(--locker-h) * .055);
      background: var(--grain-l) 0 0 / 160px 160px, repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #121316, #2b2f35 55%, #474c54 92%, #8c939b); box-shadow: 0 -1px 0 #060708, inset 0 1px 0 rgba(255,255,255,.05);
      clip-path: polygon(0 18%, 100% 18%, 100% 100%, 0 100%); }
    .vst-app .hood::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.18); }
    .vst-app .plinth { top: calc(100% + 4px); height: calc(var(--locker-h) * .045);
      background: var(--grain-d) 0 0 / 170px 170px, repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 2px, rgba(255,255,255,.035) 2px 3px, transparent 3px 7px), linear-gradient(180deg, #050506, #101113 40%, #18191c); box-shadow: inset 0 3px 4px rgba(0,0,0,.8), 0 6px 10px rgba(0,0,0,.7); }
    /* Marco de acero cepillado alrededor de toda la taquilla (por fuera de la puerta: se ve abierta y cerrada) */
    .vst-app .locker::before { content: ""; position: absolute; inset: -4px; z-index: 0; pointer-events: none; border-radius: 3px; padding: 4px;
      background: linear-gradient(180deg, #e2e6ea, #9aa1a9 22%, #5b6168 50%, #8d949c 78%, #3c4046);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      box-shadow: 0 0 0 1px #060708; }
    .vst-app .locker.rattle { animation: vst-rattle .45s; }
    @keyframes vst-rattle { 15% { transform: translateX(-4px) rotate(-.6deg) } 35% { transform: translateX(4px) rotate(.6deg) } 55% { transform: translateX(-3px) } 75% { transform: translateX(2px) } }

    /* Interior: plano, sin esquinas recortadas y en su propia capa */
    .vst-app .inside { position: absolute; inset: 0; overflow: hidden; transform: translateZ(0);
      background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.55)), linear-gradient(180deg, #16181b, #0c0d0f);
      box-shadow: inset 0 0 0 3px #08090a, inset 0 30px 40px -20px rgba(0,0,0,.9); }
    .vst-app .inside::before { content: none; position: absolute; top: 8px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: var(--light); opacity: 0; box-shadow: 0 0 14px 3px rgba(246,243,231,.6); transition: opacity .2s .3s; }
    .vst-app .inside::before, .vst-app .inside::after { pointer-events: none; }
    /* Fluorescente en el techo de la taquilla: regleta de acero con el tubo; se enciende con parpadeo al abrir */
    .vst-app .ftube { position: absolute; z-index: 6; top: 10px; left: 22px; right: 22px; height: 8px; border-radius: 2px; pointer-events: none;
      background: linear-gradient(180deg, #43474d, #1d1f23); box-shadow: 0 2px 3px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); }
    .vst-app .ftube::before { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 4px; border-radius: 3px; background: linear-gradient(180deg, #5c5f64, #34363a); }
    .vst-app .ftube::after { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 4px; border-radius: 3px; opacity: 0; background: var(--light);
      box-shadow: 0 0 8px 2px rgba(246,243,231,.7), 0 6px 30px 8px rgba(246,243,231,.2); }
    .vst-app .locker.is-open .ftube::after { opacity: 1; animation: vst-flicker 1.1s steps(1) .25s backwards; }
    /* El interior se enciende con el fluorescente: una capa oscura que sigue el mismo parpadeo (a oscuras cuando el tubo
       se apaga) y un fogonazo blanco en cada encendido. Va por encima de la prenda, la percha y las tallas, por debajo del tubo. */
    .vst-app .lit { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: #020203; }
    .vst-app .lit::after { content: ""; position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
      background: radial-gradient(ellipse 85% 60% at 50% 8%, rgba(246,243,231,.55), rgba(246,243,231,.12) 55%, transparent 80%); }
    .vst-app .locker.is-open .lit { animation: vst-lit-dark 1.1s steps(1) .25s backwards; }
    .vst-app .locker.is-open .lit::after { animation: vst-lit-flash 1.1s ease-out .25s backwards; }
    @keyframes vst-lit-dark { 0% { opacity: .85 } 8% { opacity: .08 } 12% { opacity: .78 } 20% { opacity: .12 } 24% { opacity: .7 } 34% { opacity: 0 } 100% { opacity: 0 } }
    @keyframes vst-lit-flash { 0%, 7.9% { opacity: 0 } 8% { opacity: .55 } 11.9% { opacity: .1 } 12%, 19.9% { opacity: 0 } 20% { opacity: .5 } 23.9% { opacity: .1 } 24%, 33.9% { opacity: 0 } 34% { opacity: .75 } 60% { opacity: 0 } 100% { opacity: 0 } }   /* la luz no debe tapar el toque sobre la prenda */
    .vst-app .inside::after { content: ""; position: absolute; inset: 10px 0 0; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(246,243,231,.2), transparent 70%); opacity: 0; transition: opacity .5s .35s; }
    .vst-app .locker.is-open .inside::before, .vst-app .locker.is-open .inside::after { opacity: 1; }
    /* Profundidad del interior: paredes laterales en perspectiva, techo y suelo, y sombra en las esquinas del fondo.
       La barra va de pared a pared. */
    .vst-app .depth { position: absolute; inset: 0; pointer-events: none; }
    .vst-app .depth::before, .vst-app .depth::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16px; }
    .vst-app .depth::before { left: 0; background: linear-gradient(90deg, #040405, #121316 70%, #1a1c20); clip-path: polygon(0 0, 100% 3.5%, 100% 95%, 0 100%); }
    .vst-app .depth::after { right: 0; background: linear-gradient(270deg, #070708, #1b1d21 70%, #24272b); clip-path: polygon(0 3.5%, 100% 0, 100% 100%, 0 95%); }
    .vst-app .depth.h::before, .vst-app .depth.h::after { left: 0; right: 0; width: auto; }
    .vst-app .depth.h::before { top: 0; bottom: auto; height: 3.5%; background: linear-gradient(180deg, #030304, #0d0e10); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%); }
    .vst-app .depth.h::after { top: auto; bottom: 0; height: 5%; background: linear-gradient(0deg, #0b0c0e, #202226); clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%); }
    /* fondo: un poco más oscuro en las esquinas, como si estuviera más lejos */
    .vst-app .depth.h { box-shadow: inset 16px 0 30px -12px rgba(0,0,0,.7), inset -16px 0 30px -12px rgba(0,0,0,.6), inset 0 20px 30px -14px rgba(0,0,0,.8); }
    .vst-app .locker.is-open .depth.h::after { background: linear-gradient(0deg, #101114, #2a2c31); }   /* el LED ilumina el suelo */
    /* Cubo: paredes, techo y suelo en perspectiva hasta la repisa de tallas, con líneas finas de rejilla que marcan la profundidad */
    .vst-app .depth::before, .vst-app .depth::after { content: none; }
    .vst-app .box, .vst-app .stickers { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
    .vst-app .box { overflow: visible; }
    .vst-app .box .lines { stroke: rgba(244,242,237,.045); stroke-width: 1; fill: none; }
    .vst-app .box .edges { stroke: rgba(244,242,237,.1); stroke-width: 1; fill: none; }
    .vst-app .box .floor { fill: url(#bx-floor); }
    .vst-app .locker.is-open .box .floor { fill: url(#bx-floor-lit); }
    /* Pegatinas IGNIT en el fondo: troqueladas con borde blanco, brillo de vinilo y una esquina levantada */
    .vst-app .stk { position: absolute; display: flex; align-items: center; justify-content: center; opacity: .72; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.75)); }
    .vst-app .stk img { display: block; pointer-events: none; }
    .vst-app .stk::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: linear-gradient(118deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 38%, transparent 55%, rgba(255,255,255,.08) 80%, transparent); }
    .vst-app .stk.word { width: 54px; height: 22px; border-radius: 3px; background: #0b0b0c; border: 2px solid #e9e6df; transform: rotate(-7deg);
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
    .vst-app .stk.word img { width: 76%; }
    /* esquina despegada: el reverso del vinilo, doblado sobre la pegatina */
    .vst-app .stk.word::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: linear-gradient(225deg, #f3f0ea 30%, #a9a49b);
      clip-path: polygon(0 0, 100% 100%, 0 100%); box-shadow: -1px 1px 2px rgba(0,0,0,.6); }
    .vst-app .stk.flame { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0303d, #b5101b 70%); border: 2px solid #f1eee7; transform: rotate(12deg); }
    .vst-app .stk.flame img { height: 64%; }
    .vst-app .stk.tag2 { width: 46px; height: 15px; border-radius: 2px; background: #ece9e2; transform: rotate(4deg);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
    .vst-app .stk.tag2 img { width: 74%; filter: invert(1); }
    .vst-app .stk.tag2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 7px; height: 7px; background: linear-gradient(45deg, #fbfaf7 30%, #b2ada4);
      clip-path: polygon(0 0, 100% 0, 100% 100%); box-shadow: 1px -1px 2px rgba(0,0,0,.5); }
    .vst-app .stickers { transition: opacity .5s .3s; }
    .vst-app .locker:not(.is-open) .stickers { opacity: 0; }
    /* Barras empotradas: entran en las paredes laterales (se oscurecen al entrar) y se sujetan con una placa plana
       atornillada a la pared inclinada, que proyecta su sombra sobre la pared. */
    .vst-app .rail { position: absolute; left: 6px; right: 6px; border-radius: 1px;
      background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 12px, transparent calc(100% - 12px), rgba(0,0,0,.6)),
        linear-gradient(180deg, #d3d7dc, #8a9098 40%, #4b5057 75%, #2e3236); }
    .vst-app .rail { z-index: 3; top: 68px; height: 6px; box-shadow: 0 2px 3px rgba(0,0,0,.65), 0 14px 12px -8px rgba(0,0,0,.6); }
    .vst-app .rail::before, .vst-app .rail::after { content: ""; position: absolute; top: 50%; width: 5px; height: 16px; margin-top: -8px; border-radius: 2px / 40%;
      background: radial-gradient(circle at 50% 30%, #0e0f11 0 .9px, transparent 1.3px), radial-gradient(circle at 50% 72%, #0e0f11 0 .9px, transparent 1.3px), linear-gradient(90deg, #6a7077, #3a3e44 60%, #24272b); }
    .vst-app .rail::before { left: -2px; box-shadow: 3px 0 5px rgba(0,0,0,.65); }
    .vst-app .rail::after { right: -2px; box-shadow: -3px 0 5px rgba(0,0,0,.65); }
    /* La barra va por delante del gancho: el gancho pasa por encima y baja por detrás, así la percha cuelga de verdad.
       Percha y prenda giran sobre el mismo punto (el centro de la barra, y = 71 px). */
    /* Percha de una sola pieza de alambre (mismo trazo del gancho a los brazos), dibujada con las medidas reales de cada taquilla.
       Gira sobre el centro de la barra (y = 71 px), igual que la prenda. */
    .vst-app .hanger { position: absolute; z-index: 2; left: 0; top: 58px; width: 100%; transform-origin: 50% 13px; overflow: visible; pointer-events: none; }
    .vst-app .hanger.hook-front { z-index: 4; }   /* la punta del gancho baja por delante de la barra */
    .vst-app .garment { --gh: 270px; position: absolute; z-index: 1; top: 83px; left: 6px; right: 6px; height: var(--gh); padding: 0; border: 0; background: none; cursor: zoom-in;
      transform-origin: 50% -12px; opacity: 0; transition: opacity .25s; -webkit-tap-highlight-color: transparent;
      /* las fotos traen aire transparente arriba (--trim, por prenda): se sube para que el cuello quede en el gancho */
      --shift: calc(-1 * var(--trim, .1) * min(var(--gh), (var(--locker-w) - 12px) * 1.25)); }
    /* sombra de la prenda sobre el fondo de la taquilla (sin filtros en la foto: en iPhone daban problemas) */
    .vst-app .garment.is-back { z-index: 3; }   /* vista por detrás: el cuello de la camiseta tapa la percha */
    .vst-app .garment::before { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; top: 6%; height: 70%; border-radius: 40%; background: rgba(0,0,0,.55); filter: blur(16px); transform: translate(8px, 14px); }
    .vst-app .garment:focus-visible { outline-offset: -2px; }
    /* sombra en el suelo de la taquilla, sigue el balanceo */
    .vst-app .floor-shadow { position: absolute; left: 22%; right: 22%; bottom: 66px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.75), transparent 70%); opacity: 0; transition: opacity .6s .5s; }
    .vst-app .locker.is-open .floor-shadow { opacity: 1; animation: vst-shadow-sway 3.8s ease-in-out 1.2s infinite; }
    @keyframes vst-shadow-sway { 0%, 100% { transform: translateX(0) scaleX(1) } 30% { transform: translateX(5px) scaleX(.94) } 70% { transform: translateX(-4px) scaleX(.96) } }
    .vst-app .garment img, .vst-app .sheen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; translate: 0 var(--shift); }
    .vst-app .garment img { display: block; object-fit: contain; object-position: center top; }
    /* al abrir, la percha entra con un balanceo que se va calmando y luego se mece suave */
    /* al abrir, el aire de la puerta empuja la prenda: se mece con la percha y la tela va un poco por detrás (skew) */
    .vst-app .locker.is-open .garment { opacity: 1; animation: vst-swing-in 1.7s cubic-bezier(.33, .6, .3, 1) .22s backwards, vst-sway 3.8s ease-in-out 1.95s infinite; }
    .vst-app .locker.is-open .hanger { animation: vst-hook-in 1.7s cubic-bezier(.33, .6, .3, 1) .22s backwards, vst-sway2 3.8s ease-in-out 1.95s infinite; }
    @keyframes vst-swing-in { 0% { transform: rotate(0) } 16% { transform: rotate(-5.5deg) skewX(1.6deg) } 40% { transform: rotate(3.4deg) skewX(-1.1deg) } 63% { transform: rotate(-1.7deg) skewX(.5deg) } 83% { transform: rotate(.6deg) } 100% { transform: rotate(0) } }
    @keyframes vst-hook-in { 0% { transform: rotate(0) } 16% { transform: rotate(-5.5deg) } 40% { transform: rotate(3.4deg) } 63% { transform: rotate(-1.7deg) } 83% { transform: rotate(.6deg) } 100% { transform: rotate(0) } }
    @keyframes vst-sway { 0%, 100% { transform: rotate(0deg) } 30% { transform: rotate(1.4deg) } 70% { transform: rotate(-1.1deg) } }
    @keyframes vst-sway2 { 0%, 100% { transform: rotate(0deg) } 30% { transform: rotate(1.4deg) } 70% { transform: rotate(-1.1deg) } }
    /* Repisa del pie de la taquilla: parte del propio mueble (mismo acero oscuro, canto de acero claro como la barra).
       Las tallas van troqueladas en ella, hundidas, no como botones pegados encima. */
    .vst-app .cork { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none;
      background: var(--grain-l) 0 0 / 160px 160px, var(--grain-d) 0 0 / 170px 170px, repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px), linear-gradient(180deg, #1d2024, #111316 70%, #0b0c0e);
      box-shadow: inset 0 0 0 3px #08090a; }
    /* canto superior: la luz de la taquilla lo pilla de frente, y debajo cae la sombra de la repisa sobre el fondo */
    .vst-app .cork::before { content: ""; position: absolute; left: 3px; right: 3px; top: 0; height: 3px;
      background: linear-gradient(180deg, #c9ced4, #6f757c 60%, #33373c); box-shadow: 0 -10px 14px -6px rgba(0,0,0,.8); }
    .vst-app .cork::after { content: none; }

    /* Al aparecer: un barrido de luz blanca recorre la prenda, como un foco de tienda (capa con la silueta exacta, sin filtros) */
    .vst-app .sheen { pointer-events: none; opacity: 0; mix-blend-mode: screen;
      -webkit-mask: var(--mask) no-repeat center top / contain; mask: var(--mask) no-repeat center top / contain;
      background: linear-gradient(100deg, transparent 44%, rgba(255,255,255,.06) 46.5%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.06) 53.5%, transparent 56%) no-repeat 130% 0 / 320% 100%; }
    .vst-app .locker.is-revealing .sheen { animation: vst-sheen-pass 1.25s cubic-bezier(.45, .1, .25, 1) forwards; }
    @keyframes vst-sheen-pass { 0% { opacity: 1; background-position: 130% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
    .vst-app .locker.is-revealing .garment img { animation: vst-emerge .7s ease-out backwards; }
    @keyframes vst-emerge { from { opacity: 0; scale: .985; } }
    /* luz suave detrás de la prenda cuando la taquilla está abierta */
    .vst-app .heat { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s .3s;
      background: radial-gradient(ellipse 70% 48% at 50% 34%, rgba(246,243,231,.13), rgba(246,243,231,.03) 55%, transparent 75%); }
    .vst-app .locker.is-open .heat { opacity: 1; }
    .vst-app .reflect { position: absolute; left: 8%; right: 8%; top: calc(100% + 4px); height: 50px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1.7s;
      background: radial-gradient(ellipse at 50% 0%, rgba(246,243,231,.22), transparent 70%); filter: blur(6px); }
    .vst-app .locker.is-open .reflect { opacity: .3; }

    /* Tallas troqueladas en la repisa: huecos hundidos del mismo ancho, repartidos de lado a lado */
    .vst-app .sizes { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; height: 36px; display: flex; gap: 6px; opacity: 0; transition: opacity .35s .75s; }
    .vst-app .locker.is-open .sizes { opacity: 1; }
    .vst-app .tagw { position: relative; flex: 1 1 0; max-width: 54px; display: flex; }
    .vst-app .sizes { justify-content: center; }
    .vst-app .tag { position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 2px; cursor: pointer; color: rgba(244,242,237,.82); font: 900 13px/1 var(--display); letter-spacing: .06em;
      background: linear-gradient(180deg, #08090a, #121417); box-shadow: inset 0 2px 3px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.09), 0 1px 0 rgba(255,255,255,.05);
      transition: background .2s, color .2s, box-shadow .2s; }
    .vst-app .tag:hover { color: #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,.9), inset 0 0 0 1px rgba(244,242,237,.22); }
    .vst-app .tag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .vst-app .tag[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #b3121e, #e11d2b); box-shadow: inset 0 2px 3px rgba(0,0,0,.45), 0 0 12px rgba(225,29,43,.45); }
    /* pocas unidades: un punto rojo en la esquina (el número exacto sale debajo de la taquilla) */
    .vst-app .tag.low::after { content: ""; position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 5px rgba(225,29,43,.8); }
    .vst-app .tag.low[aria-pressed="true"]::after { background: #fff; box-shadow: none; }
    .vst-app .tagw small { display: none; }
    /* agotada: apagada y tachada en diagonal */
    .vst-app .tag.out { color: rgba(244,242,237,.25); background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(244,242,237,.2) 50%, transparent calc(50% + 1px)), linear-gradient(180deg, #08090a, #101114); }
    .vst-app .tag.out[aria-pressed="true"] { color: #fff; box-shadow: inset 0 0 0 1px var(--red); background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(225,29,43,.7) 50%, transparent calc(50% + 1px)), linear-gradient(180deg, #08090a, #101114); }
    .vst-app .sizes.pulse .tag:not(.out) { animation: vst-pulse .9s ease-in-out 2; }
    @keyframes vst-pulse { 50% { box-shadow: inset 0 0 0 2px var(--red), 0 0 14px rgba(225,29,43,.6); } }
    .vst-app .soldout { position: absolute; z-index: 4; left: 50%; top: 44%; transform: translateX(-50%); padding: 10px 16px 11px; white-space: nowrap; background: rgba(6,6,7,.88); color: #fff;
      font: 800 10px/1 var(--body); letter-spacing: 4px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(244,242,237,.22), inset 0 -2px 0 var(--red);
      clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); opacity: 0; transition: opacity .3s .8s; }
    .vst-app .locker.is-soldout .garment img { opacity: .45; }
    .vst-app .locker.is-open .soldout { opacity: 1; }

    /* Tu taquilla */
    .vst-app .favs { position: absolute; top: 90px; left: 8px; right: 8px; height: 220px; display: flex; justify-content: center; align-items: flex-start; gap: 4px; opacity: 0; transition: opacity .35s .3s; }
    .vst-app .locker.is-open .favs { opacity: 1; }
    .vst-app .favs img { width: 48%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,.6)); }
    .vst-app .favs .empty { margin-top: 40px; color: var(--mute); font-size: 12px; text-align: center; line-height: 1.5; }
    .vst-app .favs-k { position: absolute; bottom: 42px; left: 0; right: 0; margin: 0; text-align: center; color: var(--mute); font: 700 10px var(--body); letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .35s .5s; }
    .vst-app .locker.is-open .favs-k { opacity: 1; }

    /* Puerta (es el botón). Es el único elemento 3D: gira sobre su bisagra. */
    .vst-app .door { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; color: inherit; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform .9s var(--ease-door); border-radius: 2px;
      background: var(--grain-s) 0 0 / 160px 160px, var(--mottle) 0 0 / 420px 420px,
        linear-gradient(90deg, rgba(255,255,255,.09) 0, rgba(255,255,255,0) 5%, rgba(0,0,0,0) 88%, rgba(0,0,0,.4) 100%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%, transparent 72%, rgba(0,0,0,.35)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px), linear-gradient(180deg, #2a2d32, #15171a);
      box-shadow: inset 0 0 0 1px #08090a, inset 0 0 0 2px rgba(255,255,255,.05), inset 0 1px 0 2px rgba(255,255,255,.04), 0 26px 44px -18px rgba(0,0,0,.95); -webkit-tap-highlight-color: transparent; }
    @media (hover: hover) { .vst-app .locker:not(.is-open):not(.is-drop) .door:hover { transform: rotateY(-9deg); transition-duration: .35s; } }
    .vst-app .locker.is-open .door { transform: translateX(-7px) rotateY(-108deg); }   /* bisagra sobre el marco: la puerta abierta no se mete en el hueco */
    /* «Ampliar» = movimiento de cámara: la puerta termina de abrirse hasta quedar plana (póster de frente)
       mientras toda la escena gira y se acerca a ella. Se ve la taquilla real, no una foto aparte. */
    .vst-app .locker.is-open.is-showing .door { transform: rotateY(-180deg); transition: transform 1s cubic-bezier(.45, .05, .2, 1); }
    .vst-app .locker.is-showing { z-index: 6; }
    /* en modo cámara nada recorta la escena (la puerta puede quedar fuera del carrusel) */
    /* …pero el body sí recorta: si no, el móvil ve contenido más ancho que la pantalla y aleja toda la página */
    html.cam-on { overflow: hidden; }
    html.cam-on body { overflow: hidden; overflow: clip; }
    .vst-app .vst.cam { overflow: visible; z-index: 60; }
    .vst-app .vst.cam .row { overflow: visible; scroll-snap-type: none; }
    html.cam-on .vst-app .buybar { transform: translateY(110%); }
    
    .vst-app .locker.slam .door { transition: transform .3s cubic-bezier(.6, 0, .9, .6); }
    .vst-app .door > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    /* Grosor de la puerta (antes, al abrirse, se veía fina como un papel): la cara interior va 9 px por detrás
       y dos cantos de chapa cierran los lados. Solo se ven cuando la puerta gira. */
    .vst-app .locker { --door-t: 9px; }
    .vst-app .door > .door-edge { position: absolute; top: 0; bottom: 0; width: var(--door-t); pointer-events: none; backface-visibility: visible; -webkit-backface-visibility: visible;
      background: linear-gradient(90deg, #121417, #2f3338 40%, #41454c 55%, #1a1c20); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
    .vst-app .door > .door-edge.r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
    .vst-app .door > .door-edge.l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
    /* Safari: con la puerta cerrada, la cara interior y los cantos (que quedan detrás) podían taparle los detalles a la cara
       de fuera. Los detalles van explícitamente delante y lo de detrás solo existe mientras la puerta está abierta o abriéndose. */
    .vst-app .door > *:not(.door-back):not(.door-edge) { translate: 0 0 .6px; }
    .vst-app .door > .door-back, .vst-app .door > .door-edge { visibility: hidden; transition: visibility 0s .95s; }
    .vst-app .locker.is-open .door > .door-back, .vst-app .locker.is-open .door > .door-edge { visibility: visible; transition: none; }
    /* ---------- Puerta premium: acero negro cepillado, rejilla microperforada, placa grabada,
       tirador de barra y cerradura electrónica con LED ---------- */
    .vst-app .door::before, .vst-app .door::after { backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
    /* tira LED en el canto: se enciende en la taquilla activa y «respira» */
    .vst-app .door::before { content: ""; position: absolute; top: 10%; bottom: 10%; right: 3px; width: 2px; border-radius: 2px; background: #ff2a3a; opacity: 0;
      box-shadow: 0 0 6px 1px rgba(225,29,43,.9), 0 0 18px 2px rgba(225,29,43,.45); transition: opacity .5s; }
    .vst-app .locker.is-focus .door::before, .vst-app .door:hover::before { opacity: 1; animation: vst-breathe 3.2s ease-in-out infinite; }
    .vst-app .locker.is-drop .door::before, .vst-app .locker.is-mine .door::before { display: none; }   /* en las que no se abren parecía un láser */
    @keyframes vst-breathe { 50% { opacity: .45; } }
    /* reflejo de luz que recorre el metal de vez en cuando (cada puerta con su retraso) */
    .vst-app .door::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 54%, transparent 62%) no-repeat;
      background-size: 320% 100%; background-position: 160% 0; animation: vst-sheen 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .7s); }
    @keyframes vst-sheen { 0%, 72% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
    .vst-app .vents { position: absolute; top: 18px; left: 16px; right: 16px; height: 60px; border-radius: 2px;
      background: radial-gradient(circle, #030304 1.1px, transparent 1.7px) 0 0 / 6px 6px, linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.1));
      box-shadow: inset 0 1px 3px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06); }
    .vst-app .vents span { display: none; }
    /* número grabado en el metal */
    .vst-app .num { position: absolute; top: 92px; left: 16px; color: rgba(244,242,237,.5); font: 800 12px/1 var(--display); letter-spacing: .32em;
      text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,255,255,.06); }
    .vst-app .num::before { content: "N.º "; letter-spacing: .1em; }
    /* placa con el nombre: negro anodizado, esquinas cortadas y línea roja */
    .vst-app .tape { position: absolute; top: 114px; left: 12px; right: 12px; padding: 11px 10px 14px; text-align: left; overflow-wrap: break-word;
      background: linear-gradient(180deg, #121316, #070708); color: #f4f2ed; font: 900 17px/.95 var(--display); letter-spacing: .03em; text-transform: uppercase;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 rgba(0,0,0,.55), 0 10px 18px -6px rgba(0,0,0,.7);
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
    .vst-app .tape[data-cat]::before { content: attr(data-cat); display: block; margin-bottom: 6px; color: var(--cat); font: 700 8px/1 var(--body); letter-spacing: 3px; }
    .vst-app .tape::after { content: ""; position: absolute; left: 12px; bottom: 7px; width: 22px; height: 2px; background: var(--red); }
    /* tirador de barra en acero, con sus dos soportes */
    /* Uso: rozaduras y pintura más pulida junto al tirador, patadas y suciedad abajo, cantos con luz y sombra,
       y tres bisagras cromadas en el lado de giro (izquierda). No va en la puerta de cristal del drop. */
    .vst-app .wear { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
      background:
        linear-gradient(112deg, transparent 47%, rgba(255,255,255,.1) 50%, transparent 53%) calc(100% - 22px) 45% / 34px 10px no-repeat,
        linear-gradient(104deg, transparent 46%, rgba(255,255,255,.08) 50%, transparent 54%) calc(100% - 32px) 53% / 26px 8px no-repeat,
        linear-gradient(118deg, transparent 46%, rgba(255,255,255,.07) 50%, transparent 54%) calc(100% - 16px) 61% / 20px 7px no-repeat,
        linear-gradient(98deg, transparent 46%, rgba(255,255,255,.05) 50%, transparent 54%) calc(100% - 40px) 41% / 18px 6px no-repeat,
        radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.055), transparent 70%) calc(100% + 6px) 50% / 60px 150px no-repeat,
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.45), transparent 70%) 50% 100% / 80% 13% no-repeat,
        linear-gradient(168deg, transparent 45%, rgba(255,255,255,.06) 50%, transparent 55%) 28% 95% / 30px 11px no-repeat,
        linear-gradient(12deg, transparent 45%, rgba(255,255,255,.045) 50%, transparent 55%) 62% 97% / 42px 9px no-repeat,
        linear-gradient(0deg, rgba(60,50,40,.18), transparent 7%);
      box-shadow: inset 1px 0 0 rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.6); }
    .vst-app .wear::after { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 6px;
      background:
        linear-gradient(90deg, #1d1f23, #9aa1a9 30%, #eef1f4 45%, #6b7179 70%, #26292d) 0 11% / 6px 28px no-repeat,
        linear-gradient(90deg, #1d1f23, #9aa1a9 30%, #eef1f4 45%, #6b7179 70%, #26292d) 0 50% / 6px 28px no-repeat,
        linear-gradient(90deg, #1d1f23, #9aa1a9 30%, #eef1f4 45%, #6b7179 70%, #26292d) 0 89% / 6px 28px no-repeat;
      filter: drop-shadow(1px 1px 1px rgba(0,0,0,.7)); }
    .vst-app .locker.is-drop .wear { display: none; }
    /* el interior, con la misma pintura en polvo */
    .vst-app .igrain { position: absolute; inset: 0; pointer-events: none; opacity: .9; background: var(--grain-s) 0 0 / 160px 160px, var(--mottle) 0 0 / 420px 420px; }
    .vst-app .handle { position: absolute; top: 43%; right: 14px; width: 9px; height: 100px; border-radius: 5px;
      background: linear-gradient(90deg, #2c2f34 0, #c9cdd3 38%, #f2f4f6 48%, #8a9098 62%, #2a2d31 100%); box-shadow: -5px 6px 10px rgba(0,0,0,.6); }
    .vst-app .handle::before, .vst-app .handle::after { content: ""; position: absolute; left: -6px; width: 8px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #6f757d, #2c2f34); box-shadow: 0 2px 2px rgba(0,0,0,.6); }
    .vst-app .handle::before { top: 8px; } .vst-app .handle::after { bottom: 8px; }
    /* cerradura electrónica: LED rojo que respira; al abrir, blanco */
    .vst-app .lock { position: absolute; top: calc(43% + 112px); right: 10px; width: 18px; height: 28px; border-radius: 3px;
      background: linear-gradient(180deg, #17181b, #08080a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.7); }
    .vst-app .lock::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
      background: #ff2a3a; box-shadow: 0 0 5px 1px rgba(225,29,43,.95), 0 0 12px 2px rgba(225,29,43,.4); animation: vst-breathe 2.6s ease-in-out infinite; }
    .vst-app .lock::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 12px; background: radial-gradient(circle, rgba(255,255,255,.28) .8px, transparent 1.3px) 0 0 / 5px 4px; }
    .vst-app .locker.is-open .lock::before { background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.8); animation: none; }
    /* etiqueta de estado, como las de la tienda */
    .vst-app .badge { position: absolute; top: 208px; left: 14px; padding: 5px 7px; background: var(--red); color: #fff; font: 800 8px/1 var(--body); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
      clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
    .vst-app .badge.is-new { background: #f4f2ed; color: #0c0c0f; }
    .vst-app .badge.is-out { background: rgba(244,242,237,.12); color: #f4f2ed; }
    .vst-app .badge[hidden] { display: none; }
    /* logo grabado en la chapa */
    .vst-app .emboss { position: absolute; left: 16px; bottom: 50px; color: rgba(255,255,255,.08); font: 900 12px/1 var(--display); letter-spacing: .45em;
      text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 -1px 0 rgba(255,255,255,.04); }
    .vst-app .foot-vents { position: absolute; bottom: 16px; left: 16px; right: 16px; display: grid; gap: 5px; }
    .vst-app .foot-vents span { height: 3px; border-radius: 2px; background: linear-gradient(180deg, #020203, #0e0f11); box-shadow: 0 1px 0 rgba(255,255,255,.05); }

    /* Por dentro de la puerta: póster del modelo (fondo blanco) sujeto con dos imanes */
    .vst-app .door-back { position: absolute; inset: 0; border-radius: 2px; transform: translateZ(calc(-1 * var(--door-t, 0px))) rotateY(180deg); overflow: hidden;
      background: radial-gradient(circle, rgba(0,0,0,.45) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, #24272c, #141619); box-shadow: inset 0 0 0 1px #0a0b0d, inset 0 0 30px rgba(0,0,0,.5); }
    .vst-app .poster { position: absolute; top: 44px; left: 12px; right: 12px; bottom: 70px; margin: 0; background: #f4f2ed; padding: 6px 6px 26px; box-shadow: 0 12px 22px -6px rgba(0,0,0,.7); }
    .vst-app .poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
    .vst-app .poster figcaption { position: absolute; left: 8px; right: 8px; bottom: 9px; display: flex; justify-content: space-between; color: #0c0c0f; font: 800 8px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; }
    .vst-app .poster figcaption::after { content: "IGNIT"; color: var(--red); font-weight: 900; letter-spacing: 2px; }
    .vst-app .poster::before, .vst-app .poster::after { content: ""; position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #6a6e74, #111214 62%); box-shadow: 0 3px 4px rgba(0,0,0,.6); }
    .vst-app .poster::before { left: 12px; } .vst-app .poster::after { right: 12px; }
    @media (min-width: 1241px) {
      .vst-app .garment { --gh: calc(var(--locker-h) * .5625); }   /* la prenda crece con la taquilla */
      /* en escritorio la puerta es estrecha: el póster va centrado a media altura y la foto se ve completa (4:5) */
      .vst-app .poster { top: 50%; bottom: auto; transform: translateY(-50%); }
      .vst-app .poster img { height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #f4f2ed; }
    }

    /* Próximo drop: puerta de cristal ahumado, silueta de la prenda y un láser que la escanea */
    .vst-app .locker.is-drop .door { background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 26%, transparent 58%, rgba(255,255,255,.05) 66%, transparent 76%), linear-gradient(180deg, rgba(24,26,30,.38), rgba(8,9,11,.62));
      box-shadow: inset 0 0 0 2px #1d1f23, inset 0 0 0 3px rgba(255,255,255,.08), 0 24px 40px -18px rgba(0,0,0,.95); }
    .vst-app .locker.is-drop .vents { opacity: .5; }
    .vst-app .drop-sil { position: absolute; top: 60px; left: 6px; right: 6px; height: 270px; display: flex; justify-content: center; align-items: center;
      background: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(225,29,43,.6), rgba(225,29,43,.14) 60%, transparent 75%); }   /* contraluz rojo: la silueta negra se recorta sobre él */
    .vst-app .drop-sil img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) drop-shadow(0 0 1px rgba(255,60,70,.7)); opacity: .9; }
    .vst-app .scan { position: absolute; left: 8px; right: 8px; top: 20%; height: 2px; background: linear-gradient(90deg, transparent, #ff2a3a 20%, #ff2a3a 80%, transparent);
      box-shadow: 0 0 10px 2px rgba(225,29,43,.75), 0 0 40px 6px rgba(225,29,43,.25); animation: vst-scan 3.4s ease-in-out infinite alternate; }
    @keyframes vst-scan { to { top: 70%; } }
    .vst-app .countdown { position: absolute; left: 12px; right: 12px; bottom: 62px; padding: 9px 4px 10px; background: rgba(5,5,6,.9); color: #fff; text-align: center;
      font: 900 18px/1 var(--display); letter-spacing: .08em; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(225,29,43,.7); box-shadow: inset 0 0 0 1px rgba(225,29,43,.45); }
    .vst-app .countdown::before { content: "Se abre en"; display: block; margin-bottom: 6px; color: var(--cat); font: 700 8px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; text-shadow: none; }

    /* Banco */
    .vst-app .bench { position: relative; width: min(1240px, 92vw); height: 22px; margin: -6px auto 0; border-radius: 2px; background: linear-gradient(180deg, #2c2f34, #121315 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 24px -6px rgba(0,0,0,.9), 0 14px 40px -10px rgba(225,29,43,.35); z-index: 4; transition: box-shadow 1.7s; }
    .vst-app .bench::before, .vst-app .bench::after { content: ""; position: absolute; top: 22px; width: 14px; height: 34px; background: linear-gradient(90deg, #555a62, #2b2f35); }
    .vst-app .bench::before { left: 8%; } .vst-app .bench::after { right: 8%; }

    /* Navegación + posición */
    .vst-app .nav { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 30px; }
    .vst-app .nav button { width: 46px; height: 46px; border: 0; cursor: pointer; color: #fff; font-size: 18px;
      background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(244,242,237,.2);
      transition: background-size .5s var(--bt-ease), color .35s var(--bt-ease), scale .2s; }
    .vst-app .nav button:hover { background-size: 100% 100%; color: #0c0c0f; }
    .vst-app .nav button:active { scale: .96; }
    .vst-app .pos { min-width: 66px; text-align: center; color: var(--mute); font: 800 14px/1 var(--display); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
    .vst-app .dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
    .vst-app .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244,242,237,.25); transition: width .3s, background .3s; }
    .vst-app .dots i.on { width: 18px; border-radius: 3px; background: var(--red); }
    .vst-app .hint { margin: 12px 0 0; padding: 0 16px; text-align: center; color: var(--soft); font-size: 13px; letter-spacing: .02em; }
    .vst-app .data-note { margin: 8px 0 0; text-align: center; color: var(--soft); font-size: 12px; }

    /* Lo que tienes delante: nombre, precio y stock bajo la taquilla (solo en carrusel) */
    .vst-app .now { display: block; text-align: center; padding: 0 16px; transition: opacity .25s, transform .25s var(--ease-out); }
    .vst-app .now.swap { opacity: 0; transform: translateY(6px); transition: none; }
    .vst-app .now-paint { transform: perspective(420px) rotateX(42deg); transform-origin: 50% 0; margin-bottom: -22px;
      -webkit-mask: var(--worn) 0 0 / 260px 260px; mask: var(--worn) 0 0 / 260px 260px; }
    .vst-app .now-paint .now-name { letter-spacing: .02em; }
    .vst-app .now-k { margin: 0 0 8px; color: var(--cat); font: 700 10px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; }
    .vst-app .now-name { margin: 0; font: 900 clamp(2rem, 9vw, 2.8rem)/.95 var(--display); text-transform: uppercase; }
    .vst-app .now-line { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 10px; }
    .vst-app .now-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
    .vst-app .now-act .btn { height: 44px; padding: 0 22px; }
    .vst-app .now .notify { justify-content: center; margin-top: 12px; }
    .vst-app .now .size-help { display: inline-block; margin-top: 12px; }
    .vst-app .now-price { color: var(--price); font: 900 1.8rem/1 var(--display); letter-spacing: .03em; }
    .vst-app .now-stock { color: var(--cat); font-size: 13px; font-weight: 700; }
    .vst-app .now-stock.ok { color: var(--mute); font-weight: 500; }
    /* «Ver de cerca»: lleva la cámara a la puerta de la taquilla abierta */
    .vst-app .closer { display: inline-flex; align-items: center; gap: 9px; height: 38px; margin-top: 4px; padding: 0 16px; border: 0; cursor: pointer; color: #fff;
      font: 800 10px/1 var(--body); letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
      background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(244,242,237,.3);
      clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); transition: background-size .5s var(--bt-ease), color .35s var(--bt-ease); }
    .vst-app .closer:hover { background-size: 100% 100%; color: #0c0c0f; }
    .vst-app .closer:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }

    /* Foto a pantalla completa */
    /* controles del modo cámara: transparentes, encima de la escena real (solo un degradado para leer los textos) */
    .vst-app .zoom { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: linear-gradient(180deg, rgba(6,6,7,.85), transparent 18%, transparent 80%, rgba(6,6,7,.85)); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
    .vst-app .zoom.on { opacity: 1; visibility: visible; transition: opacity .4s .6s; }
    .vst-app .zoom-img img { display: none; }
    .vst-app .zoom-top { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; }
    .vst-app .zoom-top h3 { margin: 0; font: 900 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
    .vst-app .zoom-top small { display: block; margin-bottom: 6px; color: var(--cat); font: 700 10px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; }
    .vst-app .zoom-x { width: 46px; height: 46px; border: 0; cursor: pointer; color: #fff; font-size: 18px; background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(244,242,237,.2); transition: background-size .5s var(--bt-ease), color .35s var(--bt-ease); }
    .vst-app .zoom-x:hover { background-size: 100% 100%; color: #0c0c0f; }
    .vst-app .zoom-img { position: relative; min-height: 0; }
    /* la foto ocupa exactamente su hueco (16 px a los lados, 8 px arriba y abajo) y se encaja sin recortar */
    .vst-app .zoom-img img { position: absolute; top: 8px; left: 16px; width: calc(100% - 32px); height: calc(100% - 16px); object-fit: contain; transform: scale(.96); opacity: 0; transition: transform .35s var(--ease-out), opacity .25s; }
    .vst-app .zoom.on .zoom-img img.ready { transform: none; opacity: 1; }
    .vst-app .zoom-img img.instant { transition: none; }
    .vst-app .zoom-tabs { display: flex; gap: 8px; justify-content: center; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .vst-app .zoom-tabs button { height: 50px; padding: 0 24px; border: 0; cursor: pointer; color: #fff; font: 800 11px var(--body); letter-spacing: 3px; text-transform: uppercase;
      background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 transparent; box-shadow: inset 0 0 0 1px rgba(244,242,237,.4); transition: background-size .5s var(--bt-ease), color .35s var(--bt-ease); }
    .vst-app .zoom-tabs button:hover { background-size: 100% 100%; color: #0c0c0f; }
    .vst-app .zoom-tabs button[aria-pressed="true"] { background-color: var(--red); box-shadow: none; }
    .vst-app .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* ---------- Ficha ---------- */
    .vst-app .card { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 40px; align-items: end; width: min(1040px, calc(100vw - 32px)); margin: 56px auto 0; padding: 28px 30px 30px;
      border-top: 2px solid var(--red); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(244,242,237,.1); transition: opacity .3s, transform .3s var(--ease-out); }
    .vst-app .card.swap { opacity: 0; transform: translateY(8px); transition: none; }
    .vst-app .card-k { margin: 0 0 10px; color: var(--cat); font: 700 10px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; }
    .vst-app .card-name { margin: 0; font: 900 clamp(2.4rem, 5vw, 3.6rem)/.88 var(--display); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
    .vst-app .card-desc { margin: 12px 0 18px; color: rgba(244,242,237,.7); font-size: 14px; line-height: 1.65; max-width: 58ch; }
    /* especificaciones como en la ficha de producto: filas con línea y la etiqueta pequeña a la derecha */
    .vst-app .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: 620px; }
    .vst-app .chips li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 800 13px/1.25 var(--body); color: #fff; }
    .vst-app .chips b { order: 2; flex: none; color: rgba(244,242,237,.55); font: 700 9px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; }
    .vst-app .card-side { display: grid; justify-items: end; gap: 12px; }
    .vst-app .price { font: 900 2.6rem/1 var(--display); letter-spacing: .03em; color: var(--price); }
    .vst-app .size-note { margin: 0; color: var(--mute); font-size: 13px; text-align: right; }
    .vst-app .size-note strong { color: #fff; }
    .vst-app .size-help { padding: 4px 0; color: rgba(244,242,237,.65); font: 700 10px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(244,242,237,.3); transition: color .3s, border-color .3s; }
    .vst-app .size-help:hover { color: var(--cat); border-color: var(--red); }
    .vst-app .btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    /* botón «de fuego» de la web: rojo, y al pasar se llena de blanco desde abajo */
    .vst-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 28px; border: 0; cursor: pointer; white-space: nowrap;
      font: 800 11px/1 var(--body); letter-spacing: 3px; text-transform: uppercase; text-decoration: none; color: #fff;
      background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 var(--red);
      transition: background-size .5s var(--bt-ease), color .35s var(--bt-ease), box-shadow .35s var(--bt-ease), scale .2s; }
    .vst-app .btn:hover { background-size: 100% 100%; color: #0c0c0f; }
    .vst-app .btn:active { scale: .98; }
    .vst-app .btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #fff; }
    .vst-app .btn.soft, .vst-app .btn.ghost { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(244,242,237,.4); }
    .vst-app .btn.soft:hover, .vst-app .btn.ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
    .vst-app .notify { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .vst-app .notify input { min-width: 0; width: 230px; height: 54px; padding: 0 16px; border: 0; background: rgba(255,255,255,.05); color: #fff; box-shadow: inset 0 0 0 1px rgba(244,242,237,.18); font: 500 14px var(--body); }
    .vst-app .notify input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--red); }
    .vst-app .notify-ok { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; max-width: 420px; font-size: 12px; line-height: 1.45; color: var(--mute); text-align: left; }
    .vst-app .notify-ok input { accent-color: var(--red); width: 16px; height: 16px; margin-top: 1px; flex: none; }
    .vst-app .notify-ok a { color: inherit; }
    .vst-app .fav-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .vst-app .fav-list button { height: 44px; padding: 0 16px; border: 0; cursor: pointer; color: #fff; font: 800 10px var(--body); letter-spacing: 2px; text-transform: uppercase;
      background: linear-gradient(#fff, #fff) no-repeat 0 100% / 100% 0 rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(244,242,237,.2); transition: background-size .5s var(--bt-ease), color .35s var(--bt-ease); }
    .vst-app .fav-list button:hover { background-size: 100% 100%; color: #0c0c0f; }

    /* Barra fija de compra (móvil y tablet) */
    .vst-app .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      background: rgba(11,11,13,.96); box-shadow: 0 -1px 0 rgba(244,242,237,.1), 0 -18px 30px -10px rgba(0,0,0,.8); transform: translateY(110%); transition: transform .35s var(--ease-out); }
    .vst-app .buybar.on { transform: none; }
    .vst-app .buybar img { width: 44px; height: 54px; object-fit: contain; flex: none; }
    .vst-app .bb-txt { min-width: 0; flex: 1; }
    .vst-app .bb-name { display: block; font: 900 19px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vst-app .bb-sub { display: block; margin-top: 4px; color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vst-app .bb-sub b { color: var(--price); }
    .vst-app .buybar .btn { flex: none; height: 50px; padding: 0 14px; font-size: 10px; letter-spacing: 1.5px; }
    .vst-app .buybar { gap: 8px; } .vst-app .buybar img { width: 38px; }
    .vst-app .bb-bag { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(244,242,237,.14); }
    .vst-app .bb-bag b { position: absolute; top: 5px; right: 5px; min-width: 16px; padding: 2px 4px; background: var(--red); color: #fff; font: 800 9px/1.2 var(--body); text-align: center; }

    .vst-app .flyer { position: fixed; z-index: 70; pointer-events: none; object-fit: contain; transition: transform .7s cubic-bezier(.5, -0.2, .7, .4), opacity .7s; }
    .vst-app .vst-toast { position: fixed; left: 50%; bottom: calc(24px + var(--bar-h)); z-index: 65; transform: translate(-50%, 20px); opacity: 0; width: max-content; max-width: calc(100vw - 32px); padding: 14px 18px; background: #0c0c0f; color: #fff; font-size: 13px; line-height: 1.45; border-top: 2px solid var(--red); box-shadow: inset 0 0 0 1px rgba(244,242,237,.14); transition: .3s; pointer-events: none; }
    .vst-app .vst-toast.on { opacity: 1; transform: translate(-50%, 0); }
    .vst-app .vst-toast b { color: var(--cat); }

    /* Pantallas táctiles: etiquetas de 44 px */
    @media (pointer: coarse) { .vst-app .cork { height: 68px; } .vst-app .sizes { height: 44px; bottom: 12px; gap: 6px; } .vst-app .tag { font-size: 15px; } }
    /* Carrusel en móvil, tablet y portátil pequeño (antes, entre 900 y 1240 px las taquillas se cortaban) */
    @media (max-width: 1240px) {
      .vst-app { --locker-w: min(66vw, 280px); --locker-h: min(112vw, 500px); --gap: 6px; }
      /* solo horizontal: con overflow-x:auto el eje Y también se volvía desplazable (el brillo bajo las taquillas sobresale)
         y el gesto vertical se lo quedaba el carrusel, que saltaba de prenda en vez de bajar la página */
      .vst-app .row { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; overscroll-behavior-y: auto; padding: 10px calc(50vw - var(--locker-w) / 2) 64px; scrollbar-width: none; }
      .vst-app .row::-webkit-scrollbar { display: none; }
      .vst-app .locker { scroll-snap-align: center; scroll-snap-stop: always; transition: filter .45s, transform .45s var(--ease-out); }
      /* la taquilla del centro manda: las de los lados se encogen y se apagan (escala desde el centro: no mueve el snap) */
      /* taquillas unidas, como una fila de vestuario: las de los lados ya no se encogen */
      /* la puerta abierta en perspectiva es más alta que la taquilla: margen arriba y abajo para que el carrusel no la recorte
         (el margen negativo compensa, así el diseño no se mueve) */
      .vst-app .row { padding-top: 48px; padding-bottom: 80px; margin-top: -38px; margin-bottom: -40px; }
      .vst-app .tape { font-size: 23px; } .vst-app .garment { height: 270px; }
      .vst-app .now-buy { display: none; }   /* en móvil y tablet se compra desde la barra fija */
      .vst-app .nav { margin-top: 18px; }
      .vst-app .bench { display: none; }
      .vst-app .buybar { display: flex; }
      .vst-app .tools .bag { display: none; }
    }
    @media (max-width: 700px) {
      .vst-app .vst { padding-top: 22px; }
      .vst-app .card { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; margin-top: 18px; }
      .vst-app .card-side { justify-items: start; }
      .vst-app .btns, .vst-app .notify { justify-content: flex-start; }
      .vst-app .size-note { text-align: left; }
      .vst-app .card .btn.buy { display: none; }   /* en móvil el botón de compra está en la barra fija */
      .vst-app .card-side .price { display: none; } /* el precio ya está bajo la taquilla y en la barra */
      .vst-app .chips { grid-template-columns: minmax(0, 1fr); }
      /* en móvil la puerta se abre menos: el póster se ve de canto y no tapa la taquilla de al lado */
      .vst-app .locker { perspective: 1600px; }
      .vst-app .locker.is-open .door { transform: translateX(-7px) rotateY(-97deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .vst-app *, .vst-app *::before, .vst-app *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; }
    }

/* ---------- Ajustes de la portada ---------- */
.vst-app { position: relative; background: #050506; }
.vst-app .tools { display: none; }                       /* el carrito ya está en la barra de navegación */
.vst-app .row { scroll-margin-top: 80px; }
/* la barra de compra fija solo mientras el vestuario está en pantalla */
.vst-app.off-view .buybar { visibility: hidden; opacity: 0; pointer-events: none; }
/* La puerta abierta, en perspectiva, sobresale por arriba y por abajo de la taquilla (~16 % de su alto):
   hueco proporcional para que no pise «Ver toda la colección» ni el nombre y el precio pintados en el suelo */
.vst-app .vst-head { margin-bottom: calc(34px + var(--locker-h) * .1); }
.vst-app .now { margin-top: calc(var(--locker-h) * .1); }
@media (max-width: 700px) {
  .vst-app .vst-head { margin-bottom: calc(34px + var(--locker-h) * .05); }
  .vst-app .now { margin-top: calc(var(--locker-h) * .06); }
}
/* Fluorescente colgado sobre «El vestuario»: regleta con tapas, tubo que se enciende con parpadeo y luz que cae sobre el título */
.vst-app .head-lamp { position: relative; width: min(440px, 72%); height: 9px; margin: 0 auto 26px; border-radius: 3px;
  background: linear-gradient(180deg, #4a4e55, #24262a 45%, #121315); box-shadow: 0 3px 5px rgba(0,0,0,.7); }
.vst-app .head-lamp::before { content: ""; position: absolute; inset: 0; border-radius: 3px; border-left: 7px solid #15161a; border-right: 7px solid #15161a; }
.vst-app .head-lamp i { position: absolute; left: 9px; right: 9px; top: 2px; height: 5px; border-radius: 3px; background: var(--light, #f6f3e7); opacity: 0;
  box-shadow: 0 0 14px 4px rgba(246,243,231,.6), 0 0 70px 22px rgba(246,243,231,.12); }
.vst-app .head-lamp::after { content: ""; position: absolute; left: 50%; top: 8px; width: 170%; height: 240px; transform: translateX(-50%); pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 45% 100% at 50% 0%, rgba(246,243,231,.10), rgba(246,243,231,.03) 50%, transparent 78%); transition: opacity 1.2s .4s; }
.vst-app .vst.is-lit:not(.pre) .head-lamp i { animation: vst-flicker 1.3s steps(1) .2s forwards; }
.vst-app .vst.is-lit:not(.pre) .head-lamp::after { opacity: 1; }
@media (max-width: 700px) { .vst-app .head-lamp { margin-bottom: 18px; } }
/* la barra de navegación de la portada va fija arriba (65 px): el fluorescente cuelga justo por debajo */
.vst-app .vst { padding-top: 84px; }
@media (max-width: 700px) { .vst-app .vst { padding-top: 74px; } }
/* portátil y tablet (carrusel): la taquilla abierta cabe entera en la pantalla con el título y el fluorescente encima */
@media (min-width: 701px) and (max-width: 1240px) {
  .vst-app { --locker-h: min(112vw, 500px, calc(100vh - 440px)); --locker-w: min(66vw, 280px, calc((100vh - 440px) / 1.786)); }
}
/* lo marcado como oculto se oculta siempre (la ficha tiene display: grid y, sin esto, se veía vacía) */
.vst-app [hidden] { display: none !important; }