/* MÉTODO doliveira.net · módulo 19 · antes e depois (comparador acessível). Igual em todo cliente.
   Sem JS: as duas fotos ficam lado a lado, cada uma com o rótulo. Com JS: vira um comparador com <input type=range>. */
.antdep{margin:24px 0 8px;max-width:640px}
.antdep__palco{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.antdep__lado{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--raio,2px);background:var(--cor-superficie,#14100b)}
.antdep__lado img{display:block;width:100%;height:100%;object-fit:cover}
.antdep__rot{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:2px;background:rgba(0,0,0,.72);color:#f3ede3;font:600 12px/1.4 var(--apoio,system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase}
.antdep figcaption{margin-top:10px;font-size:.85rem;line-height:1.4;color:var(--cor-linha,#9c9186)}
.claro .antdep figcaption{color:#5b5247}

.antdep--js{max-width:420px}
.antdep--js .antdep__palco{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--raio,2px);--p:50%;touch-action:pan-y}
.antdep--js .antdep__lado{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.antdep--js .antdep__lado--antes{z-index:1;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.antdep--js .antdep__lado--depois .antdep__rot{left:auto;right:10px}
.antdep--js .antdep__lado--antes .antdep__rot{z-index:3}
.antdep__linha{position:absolute;top:0;bottom:0;left:var(--p);z-index:3;width:2px;margin-left:-1px;background:var(--cor-acento,#c49662);pointer-events:none}
.antdep__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;background:transparent;opacity:1;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.antdep__range::-webkit-slider-runnable-track{height:100%;background:transparent}
.antdep__range::-moz-range-track{height:100%;background:transparent}
.antdep__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;border:2px solid var(--cor-acento,#c49662);border-radius:50%;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c49662' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat;margin-top:calc(50% - 22px)}
.antdep__range::-moz-range-thumb{width:40px;height:40px;border:2px solid var(--cor-acento,#c49662);border-radius:50%;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c49662' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat}
.antdep__range:focus-visible{outline:3px solid var(--cor-acento,#c49662);outline-offset:-3px}