/* ════════════════════════════════════════════════════════════════════════
   landing-desk.css — «En el ordenador» (store/index.html, Santi 2026-10-02)

   A section that only exists on a wide screen with a mouse: six computer
   screenshots as thumbnails, and a viewer that grows the one pressed from its
   own place to fill the window. On a phone or a tablet the section is not
   shown and its pictures are never requested (page script, landing-desk.js).
   Motion is decoration only and stops under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

/* Only with JavaScript: without it the thumbnails could neither load nor open. */
.desk { display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  html.js .desk { display: block; }
}

.desk-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.desk-thumb {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: zoom-in;
}
/* A generic window: a thin bar with three dots over the screenshot. */
.desk-win {
  position: relative; display: block;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--frame-edge);
  background: var(--screen);
  box-shadow: 0 18px 40px -18px var(--shadow), 0 0 0 1px var(--gold-soft);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.desk-bar {
  display: flex; gap: 6px; align-items: center;
  height: 22px; padding: 0 10px;
  background: linear-gradient(180deg, var(--frame-a), var(--frame-b));
}
.desk-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.desk-shot { position: relative; display: block; aspect-ratio: 16 / 10; }
.desk-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.desk-shot .shot-label { font-size: 13px; }
/* «Ampliar» hint, shown on hover and on keyboard focus. */
.desk-zoom {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(13, 13, 13, .78); color: #f0ede8; /* over the picture in both themes */
  font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s var(--ease);
}
.desk-zoom svg { width: 15px; height: 15px; }
.desk-thumb:hover .desk-win,
.desk-thumb:focus-visible .desk-win {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -18px var(--shadow), 0 0 0 1px var(--gold-line);
}
.desk-thumb:hover .desk-zoom,
.desk-thumb:focus-visible .desk-zoom { opacity: 1; transform: none; }
.desk-thumb:focus-visible { outline: none; }
.desk-thumb:focus-visible .desk-win { outline: 2px solid var(--gold); outline-offset: 3px; }
.desk-cap { display: block; margin-top: 12px; font-size: 15px; color: var(--text-dim); }
.desk-cap b { display: block; font-family: var(--font-head); font-weight: 600; color: var(--gold); letter-spacing: .02em; }
.desk-hint { text-align: center; margin-top: 26px; color: var(--muted); font-size: 14px; }

/* ── The viewer ─────────────────────────────────────────────────────── */
/* It is dark in both themes (a dimmed room around the picture), so its colours
   are fixed on purpose rather than theme tokens. The scrollbar keeps its gutter
   while the page can't scroll, or the grid would jump under the closing FLIP. */
html { scrollbar-gutter: stable; }
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #f0ede8;
  overflow: hidden;
}
.lb::backdrop { background: rgba(8, 8, 8, .9); backdrop-filter: blur(3px); }
.lb[open]::backdrop { animation: lb-fade .3s ease both; }
.lb.closing::backdrop { animation: lb-fade .3s ease reverse both; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lb-fig {
  position: absolute; inset: 56px 88px 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  pointer-events: none;
}
.lb-img {
  max-width: 100%; max-height: calc(100% - 40px);
  border-radius: 10px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 168, 75, .25);
  transform-origin: 0 0;
  pointer-events: auto; cursor: zoom-out;
}
.lb-cap { font-size: 16px; text-align: center; color: #f0ede8; max-width: 60em; }
.lb-cap b { font-family: var(--font-head); font-weight: 600; color: #c8a84b; letter-spacing: .02em; margin-right: 8px; }
.lb.closing .lb-cap, .lb.opening .lb-cap { opacity: 0; }
.lb-cap { transition: opacity .2s ease; }

.lb-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(200, 168, 75, .35); background: rgba(22, 22, 22, .85); color: #c8a84b;
  cursor: pointer; transition: background .2s ease, opacity .2s ease;
}
.lb-btn:hover { background: rgba(200, 168, 75, .16); }
.lb-btn:disabled { opacity: .3; cursor: default; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-close {
  position: absolute; top: 14px; right: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(200, 168, 75, .35); background: rgba(22, 22, 22, .85); color: #f0ede8;
  font: 500 14px var(--font-body); cursor: pointer;
}
.lb-close:hover { background: rgba(200, 168, 75, .16); }
.lb-close svg { width: 16px; height: 16px; }
.lb-count { position: absolute; top: 24px; left: 24px; font-size: 13px; color: #b3aea6; letter-spacing: .08em; }
.lb .lb-btn:focus-visible, .lb .lb-close:focus-visible { outline: 2px solid #c8a84b; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .desk-win, .desk-zoom, .lb-cap { transition: none; }
  .desk-thumb:hover .desk-win, .desk-thumb:focus-visible .desk-win { transform: none; }
  .lb[open]::backdrop, .lb.closing::backdrop { animation: none; }
}