/* ---------- Comparador antes / depois ----------
   As duas fotos ficam empilhadas; a de "depois" é recortada a partir da linha (--pos).
   Um <input range> invisível cobre a imagem: arrastar, tocar e usar as setas do teclado
   funcionam sem código extra. Ao aparecer na tela, a linha faz uma varredura sozinha. */

.ba { position: relative; background: var(--ink); padding: 14px; box-shadow: 14px 14px 0 var(--gold); --pos: 50%; }
.ba--plain { padding: 0; box-shadow: none; border: 1px solid var(--line-d); }

.ba__stage { position: relative; overflow: hidden; aspect-ratio: 2 / 1; user-select: none; touch-action: pan-y; }
.ba__stage .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__depois { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }

.ba__linha {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; z-index: 2;
  background: var(--gold); box-shadow: 0 0 18px var(--glow); pointer-events: none;
}
.ba__pega {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 6px var(--glow), 0 10px 24px var(--shadow);
  transition: transform .25s var(--ease);
}
.ba__pega::before, .ba__pega::after {
  content: ''; position: absolute; top: 50%; margin-top: -6px; border-style: solid; border-color: transparent;
}
.ba__pega::before { left: 10px; border-width: 6px 8px 6px 0; border-right-color: var(--ink); }
.ba__pega::after { right: 10px; border-width: 6px 0 6px 8px; border-left-color: var(--ink); }
.ba__stage:hover .ba__pega, .ba__stage:focus-within .ba__pega { transform: scale(1.12); }
.ba__stage:focus-within .ba__pega { outline: 2px solid var(--white); outline-offset: 4px; }

.ba__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}

.ba__lbl {
  position: absolute; top: 14px; z-index: 2; pointer-events: none;
  font-family: var(--f-mono); font-weight: 500; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  background: var(--veil); color: var(--gold); padding: 6px 10px; border: 1px solid var(--line-d);
  transition: opacity .3s;
}
.ba__lbl--a { left: 14px; }
.ba__lbl--d { right: 14px; }
.ba__cap { font-family: var(--f-mono); font-size: .66rem; color: var(--dim); padding-top: 12px; }
.ba__dica { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); pointer-events: none;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white);
  background: var(--veil); padding: 5px 10px; white-space: nowrap; transition: opacity .4s; }
.ba.mexeu .ba__dica { opacity: 0; }