/* Vetrina della home (21/10): foto centrale grande, precedente e successiva più piccole e sbiadite ai lati.
   Anche lo z-index passa in transizione: la foto che arriva al centro sale sopra le altre a metà percorso.
   Le posizioni arrivano da data-pos (HTML iniziale, poi nh/vetrina.js). */
.apertura > .foto.vetrina { --vn:56; --vl:calc(var(--vn) * 1%); --vt:.9s cubic-bezier(.22,.61,.36,1); position:relative; display:block; margin-top:32px; padding:0 0 22px; }
.vetrina__pista { position:relative; aspect-ratio:100 / calc(var(--vn) * .75); overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.vetrina__f { position:absolute; top:0; left:50%; z-index:1; display:block; width:var(--vl); height:100%; padding:5px; border:1px solid var(--linea, #c9d9e2); background:var(--superficie, #fbf8f1); box-shadow:0 14px 32px rgb(30 48 60 / .16);
  transform:translateX(-50%) scale(.5); opacity:0; transition:transform var(--vt), opacity var(--vt), filter var(--vt), box-shadow var(--vt), z-index var(--vt); will-change:transform; -webkit-tap-highlight-color:transparent; }
.vetrina__f img { display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.vetrina__f[data-pos="centro"] { z-index:3; transform:translateX(-50%); opacity:1; cursor:zoom-in; }
.vetrina__f:is([data-pos="prima"],[data-pos="dopo"]) { z-index:2; opacity:.62; filter:saturate(.45) brightness(1.1) contrast(.9); box-shadow:0 6px 16px rgb(30 48 60 / .1); cursor:pointer; }
.vetrina__f[data-pos="prima"] { transform:translateX(-102%) scale(.72); }
.vetrina__f[data-pos="dopo"] { transform:translateX(2%) scale(.72); }
.vetrina__f[data-pos="fuori-prima"] { transform:translateX(-140%) scale(.5); }
.vetrina__f[data-pos="fuori-dopo"] { transform:translateX(40%) scale(.5); }
.vetrina__f[data-pos="via-prima"] { transform:translateX(-160%) scale(.4); }
.vetrina__f[data-pos="via-dopo"] { transform:translateX(60%) scale(.4); }
.vetrina__f:is([data-pos="prima"],[data-pos="dopo"]):hover { opacity:.85; filter:saturate(.8) brightness(1.04); }
.vetrina__f:focus-visible { outline:2px solid #266786; outline-offset:3px; }

/* frecce semitrasparenti appena fuori dai bordi della foto centrale, sopra le laterali */
.vetrina__freccia { position:absolute; z-index:4; top:calc(50% - 11px); display:grid; place-items:center; width:50px; height:50px; padding:0; border:1px solid rgb(38 103 134 / .3); border-radius:50%;
  background:rgb(255 253 247 / .55); color:#266786; opacity:.82; box-shadow:0 2px 10px rgb(30 48 60 / .08); cursor:pointer; transform:translateY(-50%); transition:background .25s, opacity .25s, border-color .25s; }
.vetrina__freccia span { display:block; width:11px; height:11px; border-top:2px solid currentColor; border-right:2px solid currentColor; }
.vetrina__freccia--prima { left:max(4px, calc((100% - var(--vl)) / 2 - 64px)); }
.vetrina__freccia--prima span { transform:translateX(2px) rotate(-135deg); }
.vetrina__freccia--dopo { right:max(4px, calc((100% - var(--vl)) / 2 - 64px)); }
.vetrina__freccia--dopo span { transform:translateX(-2px) rotate(45deg); }
.vetrina__freccia:is(:hover,:focus-visible) { opacity:1; background:rgb(255 253 247 / .9); border-color:rgb(38 103 134 / .5); }
.vetrina__freccia:focus-visible { outline:2px solid #266786; outline-offset:2px; }

.vetrina__punti { position:absolute; bottom:-2px; left:0; right:0; display:flex; justify-content:center; gap:4px; }
.vetrina__punti button { width:30px; height:22px; padding:0; border:0; background:none; cursor:pointer; }
.vetrina__punti button::before { content:""; display:block; width:14px; height:2px; margin:auto; border-radius:2px; background:#266786; opacity:.28; transition:width .5s cubic-bezier(.22,.61,.36,1), opacity .5s; }
.vetrina__punti button[aria-current="true"]::before { width:28px; opacity:.9; }
.vetrina__punti button:hover::before { opacity:.6; }
.vetrina__punti button:focus-visible { outline:2px solid #266786; outline-offset:-2px; border-radius:4px; }

@media (max-width:700px) {
  .apertura > .foto.vetrina { --vn:74; margin-top:24px; }
  .vetrina__f { padding:3px; }
  .vetrina__f:is([data-pos="prima"],[data-pos="dopo"]) { opacity:.5; }
  .vetrina__freccia { width:40px; height:40px; }
  .vetrina__freccia span { width:9px; height:9px; }
  .vetrina__freccia--prima { left:max(2px, calc((100% - var(--vl)) / 2 - 44px)); }
  .vetrina__freccia--dopo { right:max(2px, calc((100% - var(--vl)) / 2 - 44px)); }
}
@media (prefers-reduced-motion:reduce) { .vetrina__f, .vetrina__punti button::before { transition:none; } }