/* ------------------------------------------------------------------ *
 * Vinté+ · las pantallas de la app, en movimiento
 *
 * Estas pantallas no son capturas: son las mismas que se dibujan en
 * vinte.plus con los tokens del producto, traídas aquí tal cual —marcado
 * y fotogramas CSS— para que el caso enseñe la app moviéndose y no una
 * foto de la app. Todo se mide en `--pt`, un punto de la app: la pantalla
 * es un contenedor de consulta, así que los números de estas reglas son
 * los mismos que están escritos en el código de la app.
 *
 * Los tokens de Vinté+ viven acotados en `.vp-stage` para no tocar el
 * sistema de Vector Studio. `on-inverse` es lo que usa la marca cuando
 * sus piezas se apoyan sobre una banda oscura, que es este caso.
 *
 * Ni una línea de JavaScript: con «reducir movimiento» todo se detiene.
 * ------------------------------------------------------------------ */

.vp-stage {
  /* Neutros cálidos — nunca #FFF, nunca #000 */
  --ink-900: #1a1917;
  --ink-700: #3a3733;
  --ink-500: #635e55;
  --ink-400: #8f887c;
  --ink-200: #cfc9bc;
  --line-200: #e2ded4;
  --bg-100: #f4f1ea;
  --bg-000: #fffdf8;

  /* El Espectro */
  --rust-500: oklch(.58 .16 32);
  --amber-500: oklch(.70 .15 65);
  --amber-700: oklch(.50 .13 65);
  --sage-500: oklch(.60 .11 165);
  --indigo-500: oklch(.55 .13 265);

  /* Semánticos · Cara A */
  --surface: var(--bg-000);
  --surface-raised: var(--bg-100);
  --surface-inverse: var(--ink-900);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-inverse: var(--bg-100);
  --text-muted-on-inverse: var(--ink-200);
  --border: var(--line-200);
  --border-strong: var(--ink-900);
  --border-on-inverse: rgba(244, 241, 234, .16);
  --action: var(--ink-900);
  --action-text: var(--bg-100);
  --accent: var(--amber-500);
  --accent-text: var(--amber-700);

  --space-3: 12px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-image: 4px;
  --radius-control: 8px;
  --radius-full: 999px;
  --level-2: 0 8px 24px rgba(26, 25, 23, .12);

  --font-display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --type-mono-eyebrow: 500 .75rem/1.3 var(--font-data);

  --ease-entrance: cubic-bezier(.23, 1, .32, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
}

.phone { gap: var(--space-3); justify-items: center; width: 100%; max-width: 300px; margin: 0px; display: grid; }
@media (min-width: 48rem) {
.phone { max-width: 268px; }
}
.phone__body { aspect-ratio: 9 / 19.5; border: 1px solid var(--border-strong); background: var(--surface); width: 100%; box-shadow: var(--level-2); border-radius: 34px; padding: 10px; position: relative; }
.on-inverse .phone__body { border-color: var(--border-on-inverse); background: var(--ink-700); }
.phone__island { z-index: 2; border-radius: var(--radius-full); background: var(--ink-900); width: 62px; height: 18px; position: absolute; top: 18px; left: 50%; transform: translate(-50%); }
.phone__screen { background: var(--surface); border-radius: 26px; height: 100%; position: relative; overflow: hidden; }
.phone__caption { color: var(--text-muted); font: var(--type-mono-eyebrow); letter-spacing: 0.04em; text-transform: uppercase; }
.on-inverse .phone__caption { color: var(--text-muted-on-inverse); }
.phone__screen { container-type: inline-size; }
.shot { --pt: calc(100cqw / 390); --u: calc(16 * var(--pt)); height: 100%; color: var(--text); background: var(--surface); font-family: var(--font-ui); flex-direction: column; display: flex; position: relative; overflow: hidden; }
.shot__empty { padding: calc(20 * var(--pt)); color: var(--text-muted); font-size: calc(13 * var(--pt)); line-height: calc(20 * var(--pt)); }
.shot-spectrum { width: 100%; height: calc(4 * var(--pt)); grid-template-columns: repeat(4, 1fr); display: grid; }
.shot-spectrum i:first-child { background: var(--rust-500); }
.shot-spectrum i:nth-child(2) { background: var(--amber-500); }
.shot-spectrum i:nth-child(3) { background: var(--sage-500); }
.shot-spectrum i:nth-child(4) { background: var(--indigo-500); }
.shot-tabs { z-index: 3; right: calc(16 * var(--pt)); bottom: calc(12 * var(--pt)); left: calc(16 * var(--pt)); height: calc(54 * var(--pt)); padding: calc(8 * var(--pt)); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--level-2); align-items: center; display: flex; position: absolute; }
.shot-tabs__item { border-radius: var(--radius-full); height: 100%; color: var(--text-muted); flex: 1 1 0%; place-items: center; display: grid; }
.shot-tabs__item.is-on { color: var(--text); background: var(--surface-raised); }
.shot-tabs__item svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.shot--map { background: var(--surface-raised); }
.shot-map__plane { position: absolute; inset: 0px; }
.shot-map__plane em { background: var(--surface); border-radius: 2px; position: absolute; }
.shot-map__plane em.shot-map__park { background: color-mix(in oklab, var(--sage-500) 22%, var(--surface)); }
.shot-map__header { z-index: 2; padding: calc(40 * var(--pt)) calc(24 * var(--pt)) calc(16 * var(--pt)) calc(20 * var(--pt)); border-radius: 0 0 calc(20 * var(--pt)) calc(20 * var(--pt)); background: var(--surface); box-shadow: var(--level-2); position: relative; overflow: hidden; }
.shot-map__title { font-size: calc(17 * var(--pt)); letter-spacing: calc(-.17 * var(--pt)); font-weight: 600; line-height: calc(23 * var(--pt)); margin: 0px; }
.shot-map__meta { margin: calc(2 * var(--pt)) 0 0; color: var(--text-muted); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); font-weight: 500; line-height: calc(14 * var(--pt)); }
.shot-map__headerRule { width: auto; position: absolute; bottom: 0px; left: 0px; right: 0px; }
.shot-pin { z-index: 1; color: var(--ink-900); transform-origin: center bottom; justify-items: center; display: grid; position: absolute; transform: translate(-50%, -100%); }
.shot-pin__hanger { width: calc(var(--u) * 13.5); display: block; }
.shot-pin__tag { width: calc(var(--u) * 9); height: calc(var(--u) * 12); margin-top: calc(var(--u) * -3.336); border-radius: calc(var(--u) * .6) calc(var(--u) * .6) calc(var(--u) * 1.5) calc(var(--u) * 1.5); background: var(--ink-900); display: block; position: relative; overflow: hidden; }
.shot-pin__eye { top: var(--u); width: var(--u); height: var(--u); border-radius: var(--radius-full); background: var(--bg-000); position: absolute; left: 50%; transform: translate(-50%); }
.shot-pin__band { height: calc(var(--u) * .65); position: absolute; bottom: 0px; left: 0px; right: 0px; }
.shot-pin[data-plan="shop"] .shot-pin__band { background: var(--ink-200); }
.shot-pin[data-plan="pro"] .shot-pin__band { background: var(--sage-500); }
.shot-pin[data-plan="premium"] .shot-pin__band { background: var(--amber-500); }
.shot-pin[data-plan="custom"] .shot-pin__band { background: var(--indigo-500); }
.shot-pin[data-plan="directory"] .shot-pin__band { display: none; }
.shot-pin.is-seal .shot-pin__tag { border: 1.5px solid var(--ink-900); background: var(--bg-000); }
.shot-pin.is-seal .shot-pin__eye { background: var(--ink-900); }
.shot-pin.is-on { z-index: 2; transform: translate(-50%, -100%) scale(1.33); }
.shot-pin.is-on .shot-pin__tag { background: var(--sage-500); border: 0px; }
.shot-pin.is-on .shot-pin__eye { background: var(--bg-000); }
.shot-pin.is-on .shot-pin__band { display: none; }
.shot-map__puck { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); border: calc(2.5 * var(--pt)) solid var(--surface); border-radius: var(--radius-full); background: var(--indigo-500); box-shadow: 0 0 0 calc(6 * var(--pt)) #4c74c038; position: absolute; top: 56%; left: 21%; }
.shot-map__locate { z-index: 3; right: calc(20 * var(--pt)); bottom: calc(190 * var(--pt)); width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--level-2); color: var(--text); place-items: center; display: grid; position: absolute; }
.shot-map__locate svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.shot-map__rail { z-index: 2; right: 0px; bottom: calc(78 * var(--pt)); gap: calc(12 * var(--pt)); padding-inline: calc(20 * var(--pt)); display: flex; position: absolute; left: 0px; }
.shot-map__card { width: calc(232 * var(--pt)); padding: calc(12 * var(--pt)); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--level-2); flex: 0 0 auto; position: relative; overflow: hidden; }
.shot-map__card.is-on { border-color: var(--border-strong); background: var(--surface-inverse); }
.shot-map__cardTop { color: var(--text-muted); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); line-height: calc(14 * var(--pt)); justify-content: space-between; margin: 0px; display: flex; }
.shot-map__cardTop em { font-style: normal; font-weight: 500; }
.shot-map__cardTop b { font-weight: 400; }
.shot-map__cardName { margin: calc(4 * var(--pt)) 0 0; font-size: calc(17 * var(--pt)); letter-spacing: calc(-.17 * var(--pt)); font-weight: 600; line-height: calc(23 * var(--pt)); }
.shot-map__cardMeta { margin: calc(4 * var(--pt)) 0 calc(8 * var(--pt)); color: var(--text-muted); font-size: calc(13 * var(--pt)); line-height: calc(20 * var(--pt)); }
.shot-map__card.is-on .shot-map__cardName { color: var(--text-on-inverse); }
.shot-map__card.is-on .shot-map__cardTop, .shot-map__card.is-on .shot-map__cardMeta { color: var(--text-muted-on-inverse); }
.shot-map__cardBand { height: calc(4 * var(--pt)); position: absolute; bottom: 0px; left: 0px; right: 0px; }
.shot__empty--map { bottom: calc(90 * var(--pt)); text-align: center; position: absolute; left: 0px; right: 0px; }
.shot--directory { background: var(--surface); }
.shot-head { padding: calc(48 * var(--pt)) calc(20 * var(--pt)) calc(24 * var(--pt)); background: var(--surface-inverse); flex: 0 0 auto; position: relative; }
.shot-head__eyebrow { color: var(--accent); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); font-weight: 500; line-height: calc(14 * var(--pt)); margin: 0px; }
.shot-head__title { margin: calc(8 * var(--pt)) 0 0; color: var(--text-on-inverse); font-family: var(--font-display); font-size: calc(32 * var(--pt)); letter-spacing: calc(-.96 * var(--pt)); font-weight: 700; line-height: calc(32 * var(--pt)); }
.shot-head__copy { margin: calc(8 * var(--pt)) 0 0; color: var(--text-muted-on-inverse); font-size: calc(15 * var(--pt)); line-height: calc(23 * var(--pt)); }
.shot-head__rule { width: auto; position: absolute; bottom: 0px; left: 0px; right: 0px; }
.shot-search { height: calc(48 * var(--pt)); align-items: center; gap: calc(8 * var(--pt)); margin-top: calc(16 * var(--pt)); padding-inline: calc(12 * var(--pt)); border: 1px solid var(--border-on-inverse); border-radius: var(--radius-control); background: var(--ink-700); color: var(--ink-200); display: flex; }
.shot-search svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); flex: 0 0 auto; }
.shot-search em { color: var(--ink-200); font-size: calc(15 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0%; font-style: normal; overflow: hidden; }
.shot-search__split { width: 1px; height: calc(22 * var(--pt)); background: var(--border-on-inverse); }
.shot-body { padding: calc(12 * var(--pt)) calc(20 * var(--pt)) 0; flex: 1 1 0%; overflow: hidden; }
.shot-chips { gap: calc(8 * var(--pt)); display: flex; }
.shot-chips span { height: calc(36 * var(--pt)); padding-inline: calc(16 * var(--pt)); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text); font-size: calc(13 * var(--pt)); white-space: nowrap; align-items: center; font-weight: 600; display: grid; }
.shot-chips span.is-on { border-color: var(--action); color: var(--action-text); background: var(--action); }
.shot-count { margin: calc(16 * var(--pt)) 0 calc(12 * var(--pt)); color: var(--text-muted); font-size: calc(13 * var(--pt)); line-height: calc(20 * var(--pt)); }
.shot-count b { color: var(--text); font-family: var(--font-data); font-weight: 500; }
.shot-cards { gap: calc(24 * var(--pt)); display: grid; }
.shot-tag { padding: var(--u); border-radius: calc(8 * var(--pt)) calc(8 * var(--pt)) calc(20 * var(--pt)) calc(20 * var(--pt)); background: var(--surface-inverse); flex: 0 0 auto; position: relative; overflow: hidden; }
.shot-tag__eye { width: var(--u); height: var(--u); margin: 0 auto calc(var(--u) * .7); border-radius: var(--radius-full); background: var(--surface); display: block; }
.shot-tag__window { aspect-ratio: 16 / 9; border-radius: var(--radius-image); background: var(--ink-700); display: block; overflow: hidden; }
.shot-tag__window img { object-fit: cover; width: 100%; height: 100%; }
.shot-tag__place { margin: calc(var(--u) * .7) 0 0; color: var(--text-muted-on-inverse); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); font-weight: 500; line-height: calc(14 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.shot-tag__name { margin: calc(4 * var(--pt)) 0 0; color: var(--text-on-inverse); font-family: var(--font-display); font-size: calc(24 * var(--pt)); letter-spacing: calc(-.6 * var(--pt)); font-weight: 700; line-height: calc(26 * var(--pt)); }
.shot-tag__sells { margin: calc(4 * var(--pt)) 0 0; color: var(--text-muted-on-inverse); font-size: calc(13 * var(--pt)); line-height: calc(20 * var(--pt)); -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.shot-tag__state { align-items: center; gap: calc(12 * var(--pt)); margin: calc(8 * var(--pt)) 0 0; display: flex; }
.shot-tag__verified { align-items: center; gap: calc(4 * var(--pt)); color: var(--sage-500); font-size: calc(13 * var(--pt)); font-weight: 600; display: inline-flex; }
.shot-tag__verified svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.shot-tag__pieces { color: var(--text-muted-on-inverse); font-family: var(--font-data); font-size: calc(13 * var(--pt)); }
.shot-tag__actions { margin: calc(var(--u) * .7) 0 0; padding-top: calc(12 * var(--pt)); border-top: 1px solid var(--border-on-inverse); color: var(--text-on-inverse); align-items: center; display: flex; }
.shot-tag__actions svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.shot-tag__share { color: var(--text-muted-on-inverse); margin-left: auto; }
.shot-tag__share svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.shot-tag__band { height: calc(4 * var(--pt)); position: absolute; bottom: 0px; left: 0px; right: 0px; }
.shot--piece { padding: calc(48 * var(--pt)) calc(20 * var(--pt)) 0; background: var(--surface); }
.shot-piece__head { margin-bottom: calc(16 * var(--pt)); flex: 0 0 auto; }
.shot-piece__eyebrow { color: var(--text-muted); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); font-weight: 500; line-height: calc(14 * var(--pt)); margin: 0px; }
.shot-piece__shop { margin: calc(4 * var(--pt)) 0 0; font-family: var(--font-display); font-size: calc(24 * var(--pt)); letter-spacing: calc(-.6 * var(--pt)); font-weight: 700; line-height: calc(26 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.shot-piece__window { aspect-ratio: 4 / 5; border-radius: var(--radius-image); background: var(--surface); display: block; position: relative; overflow: hidden; }
.shot-piece__media { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0px; }
.shot-piece__paper { top: calc(8 * var(--pt)); left: calc(8 * var(--pt)); padding: calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius: var(--radius-image); color: var(--surface); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); font-weight: 500; line-height: calc(14 * var(--pt)); background: rgba(26, 25, 23, 0.78); position: absolute; }
.shot-piece__brand { top: calc(12 * var(--pt)); right: calc(12 * var(--pt)); max-width: 62%; padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: var(--radius-image); background: var(--surface); font-size: calc(13 * var(--pt)); font-weight: 600; position: absolute; rotate: -2deg; }
.shot-piece__dots { right: 0px; bottom: calc(8 * var(--pt)); justify-content: center; align-items: center; gap: calc(4 * var(--pt)); display: flex; position: absolute; left: 0px; }
.shot-piece__dots i { width: calc(5 * var(--pt)); height: calc(5 * var(--pt)); border-radius: var(--radius-full); background: var(--surface-inverse); opacity: 0.4; }
.shot-piece__dots i.is-on { width: calc(16 * var(--pt)); opacity: 1; }
.shot-piece__foot { align-items: center; gap: calc(12 * var(--pt)); margin: calc(var(--u) * .7) 0 0; color: var(--text-on-inverse); display: flex; }
.shot-piece__foot span { font-size: calc(17 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0%; font-weight: 600; overflow: hidden; }
.shot-piece__foot b { font-family: var(--font-data); font-size: calc(17 * var(--pt)); font-weight: 500; }
.shot-tag--next { margin-top: calc(24 * var(--pt)); }
.app-stage .phone-rail { margin-top: var(--space-12); }
.phone-rail { gap: var(--space-8); grid-template-columns: 1fr; justify-items: center; display: grid; }
@media (min-width: 48rem) {
.phone-rail { grid-template-columns: repeat(3, minmax(0px, 1fr)); align-items: start; }
.phone-rail > :nth-child(2) { transform: translateY(-24px); }
}
@media (prefers-reduced-motion: reduce) {
.phone-rail > :nth-child(2) { transform: none; }
}
.shot-route { z-index: 1; width: 100%; height: 100%; position: absolute; inset: 0px; }
.shot-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.shot-route__casing { stroke: var(--ink-900); stroke-width: calc(9 * var(--pt)); }
.shot-route__walked { stroke: var(--ink-500); stroke-width: calc(5 * var(--pt)); }
.shot-route__ahead { stroke: var(--amber-500); stroke-width: calc(5 * var(--pt)); }
.is-ruta .shot-route path { stroke-dasharray: 120; animation: shot-draw 7s var(--ease-entrance) infinite; }
.is-ruta .shot-route__casing { animation-delay: -0.15s; }
.is-ruta .shot-route__walked { animation-delay: -0.1s; }
@keyframes shot-draw { 
  0% { stroke-dashoffset: 120px; }
  34% { stroke-dashoffset: 0; }
  82% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 120px; opacity: 0; }
}
.shot-pin__pulse { bottom: calc(var(--u) * -1.5); width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: var(--radius-full); background: var(--amber-500); opacity: 0; animation: 1.6s ease-out 0s infinite normal none running shot-pulse; position: absolute; left: 50%; transform: translate(-50%); }
.shot-pin[data-plan="pro"] .shot-pin__pulse { animation-delay: 0.5s; }
.shot-pin[data-plan="premium"] .shot-pin__pulse { animation-delay: 1s; }
@keyframes shot-pulse { 
  0% { opacity: 0.5; transform: translate(-50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%) scale(1.5); }
}
.shot-map__track { gap: calc(12 * var(--pt)); display: flex; }
.is-carrusel .shot-map__track { animation: shot-rail 12s var(--ease-sheet) infinite; }
@keyframes shot-rail { 
  0%, 22% { transform: translate(0px); }
  30%, 55% { transform: translateX(calc(-244 * var(--pt))); }
  63%, 88% { transform: translateX(calc(-488 * var(--pt))); }
  96%, 100% { transform: translate(0px); }
}
.is-carrusel .shot-map__card { animation: 12s step-end 0s infinite normal none running shot-pick; }
.is-carrusel .shot-map__card:nth-child(2) { animation-delay: -8s; }
.is-carrusel .shot-map__card:nth-child(3) { animation-delay: -4s; }
@keyframes shot-pick { 
  0%, 24% { border-color: var(--border-strong); color: var(--text-on-inverse); background: var(--surface-inverse); }
  25%, 100% { border-color: var(--border); color: var(--text); background: var(--surface); }
}
.is-carrusel .shot-map__cardName { color: inherit; }
.is-carrusel .shot-map__cardTop, .is-carrusel .shot-map__cardMeta { color: inherit; opacity: 0.62; }
.shot-sheet { z-index: 2; padding: calc(8 * var(--pt)) calc(20 * var(--pt)) calc(84 * var(--pt)); border-radius: calc(20 * var(--pt)) calc(20 * var(--pt)) 0 0; background: var(--surface); box-shadow: var(--level-2); position: absolute; bottom: 0px; left: 0px; right: 0px; transform: translateY(100%); }
.is-carrusel .shot-sheet, .is-escaparate .shot-sheet { animation: shot-sheet 12s var(--ease-sheet) infinite; }
@keyframes shot-sheet { 
  0%, 10% { transform: translateY(100%); }
  18%, 24% { transform: translateY(0px); }
  30%, 100% { transform: translateY(100%); }
}
.shot-sheet__grab { width: calc(36 * var(--pt)); height: calc(4 * var(--pt)); margin: 0 auto calc(12 * var(--pt)); border-radius: var(--radius-full); background: var(--ink-200); display: block; }
.shot-sheet__place { color: var(--text-muted); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.76 * var(--pt)); font-weight: 500; line-height: calc(14 * var(--pt)); margin: 0px; }
.shot-sheet__name { margin: calc(4 * var(--pt)) 0 0; font-family: var(--font-display); font-size: calc(24 * var(--pt)); letter-spacing: calc(-.6 * var(--pt)); font-weight: 700; line-height: calc(26 * var(--pt)); }
.shot-sheet__meta { margin: calc(4 * var(--pt)) 0 0; color: var(--text-muted); font-size: calc(13 * var(--pt)); line-height: calc(20 * var(--pt)); }
.shot-sheet__cta { height: calc(44 * var(--pt)); margin-top: calc(12 * var(--pt)); border-radius: var(--radius-control); color: var(--action-text); background: var(--action); font-size: calc(13 * var(--pt)); place-items: center; font-weight: 600; display: grid; }
.shot-tap { z-index: 3; width: calc(56 * var(--pt)); height: calc(56 * var(--pt)); border: calc(2 * var(--pt)) solid var(--ink-900); border-radius: var(--radius-full); opacity: 0; animation: 12s ease-out 0s infinite normal none running shot-tap; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) scale(0.3); }
@keyframes shot-tap { 
  0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  11% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.6); }
  16%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
.is-scroll .shot-cards { animation: 18s linear 0s infinite normal none running shot-feed; }
.is-escaparate .shot-piece__feed { animation: 24s linear 0s infinite normal none running shot-feed; }
@keyframes shot-feed { 
  0% { transform: translateY(0px); }
  8% { transform: translateY(0px); }
  100% { transform: translateY(-50%); }
}
.shot--piece { overflow: hidden; }
.shot-piece__feed { gap: calc(24 * var(--pt)); display: grid; }
.shot-piece__data { margin: calc(12 * var(--pt)) 0 0; color: var(--text-muted); font-family: var(--font-data); font-size: calc(13 * var(--pt)); justify-content: space-between; display: flex; }
.shot-piece__data span:last-child { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
.shot-route path, .shot-pin__pulse, .shot-map__track, .shot-map__card, .shot-sheet, .shot-tap, .shot-cards, .shot-piece__feed { animation: auto ease 0s 1 normal none running none !important; }
.shot-route path { stroke-dashoffset: 0; }
.shot-pin__pulse, .shot-tap { display: none; }
.shot-sheet { transform: translateY(100%); }
}
.shot--reserva, .shot--armario { padding: calc(48 * var(--pt)) calc(20 * var(--pt)) 0; background: var(--surface); overflow: hidden; }
.shot-reserva__body { gap: calc(14 * var(--pt)); display: grid; }
.shot-reserva__window { position: relative; }
.shot-reserva__stamp { top: calc(14 * var(--pt)); left: calc(14 * var(--pt)); padding: calc(5 * var(--pt)) calc(10 * var(--pt)); border-radius: calc(3 * var(--pt)); color: var(--surface-inverse); background: var(--sage-500); font-family: var(--font-data); font-size: calc(11 * var(--pt)); letter-spacing: 0.16em; position: absolute; rotate: -2deg; }
.shot-reserva__clock, .shot-reserva__code { gap: calc(2 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border: 1px solid var(--border); border-radius: calc(10 * var(--pt)); color: var(--text); margin: 0px; display: grid; }
.shot-reserva__clock span, .shot-reserva__code span { color: var(--accent-text); font-family: var(--font-data); font-size: calc(10 * var(--pt)); letter-spacing: 0.16em; }
.shot-reserva__clock b, .shot-reserva__code b { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: calc(26 * var(--pt)); letter-spacing: 0.04em; font-weight: 500; }
.shot-reserva__note { color: var(--text-muted); font-size: calc(12 * var(--pt)); margin: 0px; line-height: 1.4; }
.shot-armario__grid { gap: calc(12 * var(--pt)); grid-template-columns: 1fr 1fr; display: grid; }
.shot-armario__foot { align-items: baseline; gap: calc(6 * var(--pt)); margin: calc(8 * var(--pt)) 0 0; color: var(--text-on-inverse); display: flex; }
.shot-armario__foot span { font-size: calc(12 * var(--pt)); text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0%; font-weight: 600; overflow: hidden; }
.shot-armario__foot b { font-family: var(--font-data); font-size: calc(12 * var(--pt)); font-weight: 500; }