/*
 * Vitrina XCAPS (versión B): pared oscura con una repisa de acrílico por gorra y detalle «la cámara entra».
 * Archivo aparte para no engordar b.css; usa las variables de b.css. Se animan solo transform, opacity, filter y clip-path.
 */
.vit {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; color: var(--blanco); overflow: hidden;
  background:
    radial-gradient(ellipse 80% 45% at 50% -8%, rgba(255, 228, 176, .07), transparent 62%),
    radial-gradient(ellipse 60% 40% at 92% 100%, rgba(195, 20, 27, .12), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 178px, rgba(0, 0, 0, .22) 178px 180px, rgba(255, 255, 255, .015) 180px 181px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .035' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.16'/%3E%3C/svg%3E"),
    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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #151517, #0d0d0f);
  animation: vit-entra .3s ease both;
}
.vit[hidden] { display: none; }
@keyframes vit-entra { from { opacity: 0; } to { opacity: 1; } }

.vit__barra { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 64px; padding: 0 clamp(14px, 3vw, 40px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.vit__marca { display: flex; align-items: center; gap: 2px; }
.vit__x { margin-right: -8px; transform: rotate(-6deg); }
.vit__marca img { width: auto; height: 32px; }
.vit__acciones { display: flex; align-items: center; gap: 8px; }
.vit__btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a3a40; background: rgba(11, 11, 12, .6); color: var(--blanco); font: 700 14px/1 var(--cuerpo); }
.vit__btn:hover { background: var(--carbon); }
.vit__btn i { font-size: 20px; }
.vit__btn--icono { width: 44px; padding: 0; justify-content: center; }
.vit__pedido .insignia { position: absolute; top: -6px; right: -4px; }

/* ----- Pared ----- */
.vit__pared { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 clamp(14px, 3vw, 40px) 56px; }
.vit__pantalla--fuera { display: none; }
.vit__cab { padding: clamp(18px, 4vh, 40px) 0 clamp(14px, 3vh, 28px); }
.vit__kicker { margin: 0 0 6px; font: 700 12px/1 var(--tec); letter-spacing: .16em; text-transform: uppercase; color: var(--gris-claro); }
.vit__titulo { font: 900 clamp(46px, 7vw, 96px)/.86 var(--display); text-transform: uppercase; outline: none; }
.vit__sub { margin: 10px 0 0; color: var(--gris-claro); font-size: 15px; }
.vit__rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.vit__rejilla--mira { transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -9px), 0) scale(1.012); }
@media (max-width: 1280px) { .vit__rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 960px) { .vit__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vit__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Nicho suave con repisa de acrílico */
.vit__nicho {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 6; padding: 0; border: 0; border-radius: 8px; overflow: hidden; color: inherit; text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(8, 8, 9, .35) 60%, rgba(8, 8, 9, .5));
  box-shadow: inset 0 0 0 1px rgba(230, 49, 30, .22), inset 0 26px 44px -14px rgba(0, 0, 0, .85);
}
.vit__nicho::before { content: ''; position: absolute; z-index: 2; top: 0; left: 36%; width: 28%; height: 3px; border-radius: 0 0 3px 3px; background: #ffe9bf; box-shadow: 0 0 14px 3px rgba(255, 226, 170, .7); }
.vit__nicho::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 8px; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px var(--rojo-vivo), inset 0 -34px 46px -22px rgba(230, 49, 30, .45); transition: opacity .35s ease; }
.vit__foco { position: absolute; top: 0; left: 0; right: 0; height: 74%; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 228, 176, .5), rgba(255, 228, 176, 0) 92%); opacity: .5; transition: opacity .35s ease; }
.vit__gorra { position: absolute; z-index: 1; left: 9%; width: 82%; bottom: 31.5%; max-height: 52%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .75)); transform: perspective(700px) translateY(calc(var(--pie, 0) * 100%)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.vit__repisa { position: absolute; z-index: 1; left: 5%; right: 5%; bottom: 31%; height: 10px; border-radius: 2px; background: linear-gradient(180deg, rgba(200, 222, 240, .42), rgba(130, 160, 185, .14)); border: 1px solid rgba(255, 255, 255, .24); border-bottom-color: rgba(230, 49, 30, .55); }
.vit__repisa::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); clip-path: inset(0 100% 0 0); pointer-events: none; }
.vit__repisa::after { content: ''; position: absolute; left: -2%; right: -2%; top: 100%; height: 26px; background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(230, 49, 30, .7), transparent 75%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.vit__nombre { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 clamp(16px, 1.5vw, 21px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.vit__precio { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 11px; font: 600 13px/1 var(--tec); letter-spacing: .06em; color: var(--gris-claro); }
.vit__nicho:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
.vit__nicho:focus-visible::after, .vit__nicho:focus-visible .vit__repisa::after { opacity: 1; }
.vit__nicho:focus-visible .vit__foco { opacity: .95; }
.vit__nicho:focus-visible .vit__gorra { transform: perspective(700px) translateY(calc(var(--pie, 0) * 100% - 6px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04); }
@media (hover: hover) {
  .vit__nicho:hover::after, .vit__nicho:hover .vit__repisa::after { opacity: 1; }
  .vit__nicho:hover .vit__foco { opacity: .95; }
  .vit__nicho:hover .vit__gorra { transform: perspective(700px) translateY(calc(var(--pie, 0) * 100% - 6px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04); }
  .vit__nicho:hover .vit__repisa::before { animation: vit-brilla .9s ease-out; }
}
.vit__nicho--agotado .vit__gorra { filter: grayscale(1) brightness(.5) drop-shadow(0 12px 10px rgba(0, 0, 0, .75)); }
.vit__sello { z-index: 2; top: 24%; left: 0; right: 0; margin: auto; width: fit-content; height: fit-content; }
@media (max-width: 600px) { .vit__sello b { font-size: 34px; } .vit__nombre { font-size: 17px; } }

/* ----- Detalle ----- */
.vit__detalle { flex: 1; min-height: 0; display: flex; flex-direction: column; touch-action: pan-y; }
.vit--f .vit__pared:not(.vit__pantalla--fuera), .vit--f .vit__detalle { animation: vit-entra .2s ease both; }
.vit__detalle[hidden] { display: none; }
.vit__escena { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; padding: 16px clamp(14px, 3vw, 48px); }
.vit__col { display: grid; gap: 14px; align-content: center; }
.vit__nav { display: flex; align-items: center; gap: 16px; }
.vit__volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a3a40; background: rgba(11, 11, 12, .6); color: var(--blanco); font: 700 14px/1 var(--cuerpo); }
.vit__volver:hover { background: var(--carbon); }
.vit__pos { margin: 0; font: 700 13px/1 var(--tec); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-claro); }
.vit__codigo { margin: 0; font: 600 12px/1.3 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-claro); }
.vit__nombre-g { font: 900 clamp(44px, 6vw, 92px)/.86 var(--display); text-transform: uppercase; overflow-wrap: anywhere; outline: none; }
.vit__linea { margin: 0; color: var(--gris-claro); font-size: 16px; max-width: 38ch; }
.vit__datos { display: grid; gap: 6px; margin: 4px 0 0; font-size: 14px; }
.vit__datos div { display: flex; gap: 10px; }
.vit__datos dt { flex: 0 0 64px; font: 700 11px/1.6 var(--tec); letter-spacing: .1em; text-transform: uppercase; color: var(--gris-claro); }
.vit__datos dd { margin: 0; color: var(--gris-claro); }
.vit__col--der { justify-items: stretch; }
.vit__precio-g { margin: 0; font: 900 clamp(48px, 5vw, 76px)/.9 var(--display); }
.vit__opcion-fija { margin: 0; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.vit__opcion-fija span { font: 700 12px/1 var(--tec); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-claro); }
.vit__tallas { margin: 0; }
.vit__tallas legend { color: var(--gris-claro); }
.vit__aviso-op { margin: 0; color: #ff9d8f; font-size: 14px; }
.vit__aviso-op:empty { display: none; }

.vit__centro { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 260px; height: min(62dvh, 560px); }
.vit__foco--grande { height: 82%; opacity: .75; clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%); }
.vit__gorra-g { position: relative; z-index: 1; width: 100%; height: calc(100% - 4px); min-height: 0; object-fit: contain; object-position: center bottom; align-self: end; transform: perspective(900px) translateY(calc(var(--pie, 0) * 100%)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .8)); margin-bottom: 8px; }
.vit__gorra-g--agotada { filter: grayscale(1) brightness(.5) drop-shadow(0 22px 18px rgba(0, 0, 0, .8)); }
.vit__repisa--g { left: 4%; right: 4%; bottom: 6px; height: 16px; border-radius: 3px; border-bottom-color: var(--rojo-vivo); }
.vit__repisa--g::after { opacity: 1; height: 44px; }
.vit__sello--g { top: 30%; }

.vit__pie { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 22px; height: 72px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(8, 8, 9, .55); }
.vit__flecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #3a3a40; background: rgba(11, 11, 12, .6); color: var(--blanco); font-size: 22px; }
.vit__flecha:hover { background: var(--rojo); border-color: var(--rojo); }
.vit__contador { margin: 0; min-width: 110px; text-align: center; font: 700 20px/1 var(--tec); letter-spacing: .12em; }
.vit__num { display: inline-flex; }
.vit__dig { position: relative; display: inline-block; clip-path: inset(-2px -1px); }
.vit__dig b { display: inline-block; font-weight: inherit; }
.vit__dig-fuera { position: absolute; left: 0; top: 0; }

/* Aviso al agregar: arriba a la derecha */
.vit__aviso { position: absolute; z-index: 5; top: 72px; right: clamp(14px, 3vw, 40px); display: flex; align-items: center; gap: 12px; width: min(320px, calc(100% - 28px)); padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid #3a3a40; border-left: 3px solid var(--rojo-vivo); background: #17171a; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.vit__aviso:empty { display: none; }
.vit__aviso--ver { opacity: 1; transform: none; }
.vit__aviso img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #0b0b0c; }
.vit__aviso div { display: grid; gap: 2px; min-width: 0; }
.vit__aviso strong { font-size: 15px; line-height: 1.2; }
.vit__aviso span { font-size: 13px; color: var(--gris-claro); }

/* Celular y pantallas angostas: volver, gorra, nombre, compra (precio, opción y botón) y después el detalle, para que
   «Agregar al pedido» quede a la vista sin scroll. Las columnas se disuelven y cada pieza se ordena sola. */
@media (max-width: 860px) {
  .vit__escena { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 12px; padding-top: 10px; }
  .vit__col { display: contents; }
  .vit__nav { order: -4; }
  .vit__centro { order: -3; height: clamp(150px, 27dvh, 300px); min-height: 0; }
  .vit__codigo { order: -2; margin-top: 2px; }
  .vit__nombre-g { order: -1; font-size: clamp(34px, 10vw, 56px); }
  .vit__precio-g { font-size: 40px; }
  .vit__linea, .vit__datos { order: 5; }
  .vit__linea { max-width: none; }
  .vit__datos { padding-bottom: 12px; }
  .vit__pie { height: 64px; }
  .vit__btn-txt { display: none; }
  .vit__pedido { padding: 0 12px; }
  /* El aviso baja junto al pie para no tapar «Vitrina / XCAPS» mientras vuela la copia al pedido. */
  .vit__aviso { top: auto; bottom: 76px; transform: translateY(10px); }
  .vit__aviso--ver { transform: none; }
}

@media (max-width: 860px) and (max-height: 700px) { .vit__centro { height: 118px; } .vit__escena { gap: 8px; } .vit__nombre-g { font-size: clamp(32px, 9.4vw, 44px); } }

.look__b img { cursor: pointer; }

/* ----- Movimiento: se enciende, se asienta, se inclina, flota y vuela al pedido ----- */
/* 1. «Se encienden las luces» al abrir (clase temporal .vit--enciende; --d es el retardo por fila y columna) */
@keyframes vit-led-on { 0% { opacity: 0; } 10% { opacity: .95; } 18% { opacity: .1; } 30% { opacity: 1; } 42% { opacity: .25; } 56% { opacity: .9; } 100% { opacity: 1; } }
@keyframes vit-foco-on { from { opacity: 0; } }
@keyframes vit-asienta { 0% { opacity: 0; translate: 0 -24px; } 60% { opacity: 1; translate: 0 3px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes vit-barre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes vit-glitch { 0%, 100% { filter: none; translate: 0 0; } 18% { filter: drop-shadow(4px 0 0 var(--rojo-vivo)) drop-shadow(-3px 0 0 rgba(255, 255, 255, .5)); translate: -3px 0; } 38% { filter: drop-shadow(-5px 0 0 var(--rojo-vivo)); translate: 3px 0; } 58% { filter: drop-shadow(3px 0 0 var(--rojo-vivo)); translate: -1px 0; } 78% { filter: none; translate: 0 0; } }
@keyframes vit-sube { from { opacity: 0; translate: 0 14px; } }
.vit--enciende .vit__nicho::before { animation: vit-led-on .55s linear var(--d, 0ms) backwards; }
.vit--enciende .vit__foco { animation: vit-foco-on .5s ease-out calc(var(--d, 0ms) + 260ms) backwards; }
.vit--enciende .vit__gorra { animation: vit-asienta .5s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 340ms) backwards; }
.vit--enciende .vit__kicker { animation: vit-sube .5s ease-out .05s backwards; }
.vit--enciende .vit__titulo { animation: vit-barre .6s cubic-bezier(.7, 0, .2, 1) .1s backwards, vit-glitch .34s steps(1) .55s; will-change: clip-path; }
.vit--enciende .vit__sub { animation: vit-sube .5s ease-out .3s backwards; }

/* 2. Nichos bajo el pliegue: aparecen al llegar a la vista, una sola vez */
.vit__nicho { transition: opacity .55s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
.vit__nicho--pre { opacity: 0; translate: 0 28px; }

/* 3. Pared: parpadeo del tubo y brillo que recorre la repisa */
@keyframes vit-led-corto { 12% { opacity: .12; } 28% { opacity: 1; } 42% { opacity: .35; } 60% { opacity: 1; } }
@keyframes vit-foco-corto { 12% { opacity: .15; } 42% { opacity: .3; } }
@keyframes vit-brilla { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 40% 0 40%); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes vit-destello { 0% { opacity: 1; } }
.vit__nicho--parpadea::before { animation: vit-led-corto .4s linear; }
.vit__nicho--parpadea .vit__foco { animation: vit-foco-corto .4s linear; }
.vit__nicho--destello::after { animation: vit-destello .8s ease-out .35s backwards; }

/* 4. Detalle: cascada a la izquierda y a la derecha (< 700 ms) y repisa que se ilumina */
@keyframes vit-mascara { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 26px; } to { clip-path: inset(-4% -2% -4% -2%); } }
@keyframes vit-lado { from { opacity: 0; translate: var(--dx, 30px) 0; } }
@keyframes vit-luz { from { opacity: 0; } }
@keyframes vit-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes vit-sombra { 0%, 100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.9); opacity: .38; } }
.vit__escena--abre .vit__a { animation: vit-sube .28s cubic-bezier(.2, .8, .2, 1) calc(180ms + var(--k, 0) * 35ms) backwards; }
.vit__escena--abre .vit__nombre-g { animation: vit-mascara .42s cubic-bezier(.2, .8, .2, 1) calc(180ms + var(--k, 0) * 35ms) backwards; }
.vit__escena--abre .vit__foco--grande { animation: vit-luz .5s ease-out .15s backwards; }
.vit__escena--abre .vit__repisa--g::after { animation: vit-luz .6s ease-out .2s backwards; }
.vit__escena--cambia .vit__a:not(.vit__a--nav) { animation: vit-lado .38s cubic-bezier(.2, .8, .2, 1) calc(var(--k, 0) * 30ms) backwards; }
.vit__fantasma { position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none; }
.vit__centro::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 6px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .6), transparent 70%); opacity: 0; pointer-events: none; }
.vit__centro--flota::before { opacity: .55; animation: vit-sombra 3.8s ease-in-out infinite; }
.vit__centro--flota .vit__gorra-g { animation: vit-flota 3.8s ease-in-out infinite; }
.vit__centro--flota .vit__fantasma { animation: none; }

/* 6. Agregar al pedido: la copia vuela hasta el botón; el botón confirma «Agregado» */
.vit__vuelo { position: absolute; z-index: 8; pointer-events: none; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); transform-origin: center; }
.vit .boton.vit__ok { background: #1f7a45; border-color: #1f7a45; }
.vit__ok i { margin-right: 4px; }

/* Pared que se apaga mientras la gorra vuela al detalle (queda detrás, sin ocupar lugar) */
@keyframes vit-apaga { to { opacity: 0; } }
.vit__pared--apaga { position: absolute; z-index: -1; left: 0; right: 0; top: 64px; bottom: 0; pointer-events: none; animation: vit-apaga .24s ease-in forwards; }

/* 7. Cerrar: las luces bajan y se funde */
@keyframes vit-sale { to { opacity: 0; filter: brightness(.55); } }
.vit--sale { animation: vit-sale .26s ease-in forwards; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .vit, .vit *, .vit *::before, .vit *::after { animation: none !important; transition: none !important; }
  .vit__rejilla--mira { transform: none; }
  .vit__nicho--pre { opacity: 1; translate: none; }
  .vit__vuelo { display: none; }
  .vit__gorra, .vit__gorra-g { --rx: 0deg !important; --ry: 0deg !important; }
  .vit__nicho:hover .vit__gorra, .vit__nicho:focus-visible .vit__gorra { transform: translateY(calc(var(--pie, 0) * 100%)); }
}
.vit__precio-g--pendiente { font: 700 clamp(18px, 2vw, 24px)/1.2 var(--tec); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-claro); }