/* Blocco 21 — Segnali del puntatore: angoli che inquadrano l'elemento sotto il mouse ([data-inquadra]) e
   un'etichetta che segue il puntatore sulle immagini ([data-etichetta="Guarda"]). Solo mouse, mai su touch,
   mai con "riduci movimento". Il cursore del sistema resta sempre visibile. */
.inquadra-angoli { position: fixed; z-index: 80; pointer-events: none; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  transition: opacity .2s ease, transform .35s cubic-bezier(.23,1,.32,1), width .35s cubic-bezier(.23,1,.32,1), height .35s cubic-bezier(.23,1,.32,1); }
.inquadra-angoli.on { opacity: 1; }
.inquadra-angoli i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--puntatore-colore, var(--accent, #2F5D8A)); }
.inquadra-angoli i:nth-child(1) { left: -8px; top: -8px; border-left-width: 2px; border-top-width: 2px; }
.inquadra-angoli i:nth-child(2) { right: -8px; top: -8px; border-right-width: 2px; border-top-width: 2px; }
.inquadra-angoli i:nth-child(3) { left: -8px; bottom: -8px; border-left-width: 2px; border-bottom-width: 2px; }
.inquadra-angoli i:nth-child(4) { right: -8px; bottom: -8px; border-right-width: 2px; border-bottom-width: 2px; }
.etichetta-puntatore { position: fixed; z-index: 81; left: 0; top: 0; pointer-events: none; padding: 9px 14px; border-radius: 999px;
  background: var(--puntatore-colore, var(--accent, #2F5D8A)); color: #fff; font: 600 13px/1 var(--sans, system-ui);
  opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .18s ease; will-change: transform; }
.etichetta-puntatore.on { opacity: 1; }