/* Confronto prima/dopo: due schermate della stessa pagina, una sopra l'altra.
   La "dopo" si scopre trascinando il cursore; il range nativo da' tastiera e lettori di schermo gratis. */
.pd { position: relative; margin: 0; user-select: none; -webkit-user-select: none; }
.pd__stage { position: relative; overflow: hidden; border: 2px solid #0A0A0A; background: #0A0A0A; line-height: 0; }
.pd__stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.pd__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pd, 50%)); }
.pd__after img { width: 100%; height: 100%; object-fit: cover; }
.pd__line { position: absolute; top: 0; bottom: 0; left: var(--pd, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.pd__knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); display: grid; place-items: center; font: 700 15px/1 system-ui, sans-serif; color: #0A0A0A; }
.pd__tag { position: absolute; top: 12px; padding: 5px 10px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(10,10,10,.78); pointer-events: none; line-height: 1; }
.pd__tag--prima { left: 12px; }
.pd__tag--dopo { right: 12px; background: #df0067; }
.pd__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pd__range:focus-visible + .pd__line { background: #df0067; }
.pd figcaption { margin-top: 1rem; font-size: .95rem; line-height: 1.5; color: inherit; opacity: .8; max-width: 70ch; }
.pd--phone { max-width: 360px; }