[data-lupa-toca],[data-lupa-toca] *{cursor:zoom-in}

/* LA LUPA. Vive fuera de #pista a propósito: #pista lleva un
   transform:scale() y todo lo que cuelgue de ahí se escalaría con él. */

#lupa:focus{outline:none}
#lupa{position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:4vh 5vw}
#lupa.viva{display:flex}

#lupa .lupa-fondo{position:absolute;inset:0;background:#08080a;
  opacity:0;transition:opacity .34s ease}
#lupa.dentro .lupa-fondo{opacity:1}

#lupa .lupa-marco{position:relative;margin:0;display:flex;flex-direction:column;
  align-items:center;gap:20px;max-height:92vh;
  opacity:0;transform:scale(.965);
  transition:opacity .34s ease, transform .42s cubic-bezier(.22,.61,.36,1)}
#lupa.dentro .lupa-marco{opacity:1;transform:none}

/* el hueco manda la medida; la pieza se ajusta a él y nunca lo rebasa */
#lupa .lupa-obra{display:flex;align-items:center;justify-content:center;
  min-height:0;cursor:zoom-out}
#lupa .lupa-obra > *{display:block;max-height:80vh;max-width:86vw;
  width:auto;height:auto;border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.55)}

#lupa figcaption{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  justify-content:center;text-align:center;
  font-family:var(--f,-apple-system,system-ui,sans-serif);
  font-size:17px;font-weight:300;line-height:1.35;color:#f0f0f0}
#lupa .lupa-pie{opacity:.72;max-width:70ch}
#lupa .lupa-pie[hidden]{display:none}
#lupa .lupa-cuenta{opacity:.42;font-variant-numeric:tabular-nums;white-space:nowrap}

#lupa button{position:absolute;background:none;border:0;color:#f0f0f0;
  cursor:pointer;font-family:inherit;line-height:1;opacity:.5;
  transition:opacity .2s ease;padding:10px}
#lupa button:hover{opacity:1}
#lupa button:focus-visible{outline:2px solid #f0f0f0;outline-offset:3px;opacity:1;border-radius:4px}
#lupa .lupa-cerrar{top:2.4vh;right:2.4vw;font-size:40px;font-weight:200}
#lupa .lupa-ir{top:50%;transform:translateY(-50%);font-size:46px;font-weight:200}
#lupa .lupa-antes{left:1.4vw}
#lupa .lupa-luego{right:1.4vw}
#lupa .lupa-ir[hidden]{display:none}

/* en teléfono las flechas estorban encima de la pieza */
@media (max-width:720px){
  #lupa{padding:3vh 3vw}
  #lupa .lupa-obra > *{max-width:94vw}
  #lupa .lupa-ir{top:auto;bottom:1vh;transform:none}
}

@media (prefers-reduced-motion:reduce){
  #lupa .lupa-fondo,#lupa .lupa-marco{transition:none}
  #lupa.viva .lupa-fondo{opacity:1}
  #lupa.viva .lupa-marco{opacity:1;transform:none}
}