/* Refem Valor · comparador antes/después */
.ad-grid{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.ad-item{margin:0}
.ad-item figcaption span{font-weight:400;color:#6B6459;font-size:14px}
.ad-item figcaption{margin-top:8px;font-weight:600;color:#2A261F}
.ad{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:8px;border:1px solid #DDD7C8;background:#EEECE2;user-select:none;touch-action:pan-y;--pos:50%}
.ad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ad .ad-antes{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ad .ad-linea{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 6px rgba(0,0,0,.35)}
.ad .ad-linea::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4D3B' stroke-width='2.5'%3E%3Cpath d='M9 6l-5 6 5 6M15 6l5 6-5 6'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.ad .ad-tag{position:absolute;top:12px;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff}
.ad .ad-tag-antes{left:12px;background:rgba(42,38,31,.75)}
.ad .ad-tag-despues{right:12px;background:#1D4D3B}
.ad input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ad-hero{max-width:520px}