/* Il livello “prima” resta a dimensione fissa: cambia solo il ritaglio. */
.comparison-before{inset:0;width:100%;border-right:0;clip-path:inset(0 50% 0 0);will-change:clip-path}.comparison-before img{width:100%;max-width:none}.comparison-before::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:#fff}

/* Confronto prima/dopo ripreso dal demo: grande, tattile e leggibile. */
.demo-compare{--comparison-position:50%;position:relative;height:clamp(340px,34vw,450px);min-height:0;overflow:hidden;border-radius:28px;background:#102d43;box-shadow:0 25px 55px rgba(8,40,66,.18);cursor:ew-resize}.demo-compare::after{content:"";position:absolute;z-index:3;top:0;bottom:0;left:var(--comparison-position);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.16);transform:translateX(-50%);pointer-events:none}.demo-compare .comparison-after{filter:none}.demo-compare .comparison-before{z-index:2;border:0}.demo-compare .comparison-before::after{display:none}.demo-compare .comparison-before img{filter:sepia(.38) saturate(.62) brightness(.66)}.demo-compare .comparison-label{z-index:4;top:20px;padding:8px 14px;border-radius:999px;font-family:Barlow,Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.09em;opacity:1}.demo-compare .comparison-label-before{left:20px;background:#062c49}.demo-compare .comparison-label-after{right:20px;background:var(--orange)}.demo-compare .comparison-divider{z-index:4;width:68px;height:68px;border:5px solid #fff;background:var(--orange);box-shadow:0 10px 30px rgba(0,0,0,.28);font-size:25px}.demo-compare .comparison-divider i{font-size:28px}.demo-compare .comparison-range{z-index:5}.demo-compare .comparison-range:focus-visible~.comparison-divider{outline:3px solid #062c49;outline-offset:5px}
@media(max-width:800px){.demo-compare{height:min(78vw,410px);border-radius:20px}.demo-compare .comparison-divider{width:58px;height:58px;border-width:4px}.demo-compare .comparison-label{top:14px;padding:7px 11px}.demo-compare .comparison-label-before{left:14px}.demo-compare .comparison-label-after{right:14px}}

@media(min-width:801px){.demo-compare{height:320px}}

/* Breve riflesso che valorizza il lato pulito del confronto. */
.demo-compare::before{content:"";position:absolute;z-index:1;inset:-30% -55%;background:linear-gradient(108deg,transparent 46%,rgba(255,255,255,.56) 50%,transparent 54%);opacity:0;pointer-events:none;transform:translateX(-52%)}.demo-compare.is-clean-swept::before{animation:clean-sweep 1.15s ease-out .22s forwards}@keyframes clean-sweep{0%{opacity:0;transform:translateX(-52%)}18%{opacity:.82}100%{opacity:0;transform:translateX(52%)}}
@media(prefers-reduced-motion:reduce){.demo-compare::before{display:none}}