/* Franja «cambiar / conservar» con comparador de antes y después (home 3, 22-sep). */
/* Fondo: verde profundo LĀR, resplandor salvia y la foto de quirófano muy atenuada, con el parallax existente. */
.about3--ba { background: #232b26; }
.about3--ba::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 80% at 22% 55%, rgba(155, 171, 159, .30) 0%, rgba(155, 171, 159, 0) 68%),
    radial-gradient(50% 60% at 85% 20%, rgba(96, 109, 99, .35) 0%, rgba(96, 109, 99, 0) 70%);
}
.about3--ba .about3__bg img { opacity: .26; filter: brightness(.95) saturate(.55); mix-blend-mode: luminosity; object-position: 28% 42%; }
.about3--ba .about3__bg::after {
  background:
    linear-gradient(90deg, rgba(35, 43, 38, .10) 0%, rgba(35, 43, 38, .40) 50%, rgba(35, 43, 38, .82) 100%),
    linear-gradient(180deg, rgba(35, 43, 38, .55) 0%, rgba(35, 43, 38, 0) 35%, rgba(35, 43, 38, .60) 100%);
}
.about3__inner--ba { padding-top: clamp(88px, 12vh, 128px); padding-bottom: clamp(72px, 10vh, 112px); }
.about3--ba .about3__copy { position: relative; z-index: 2; }

.ba { grid-column: 2 / 7; justify-self: end; position: relative; z-index: 2; width: 100%; max-width: 450px; margin-right: clamp(20px, 2.4vw, 36px); color: var(--ivory); }
.ba__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ba__kicker { margin-bottom: 0; }
.ba__nav { display: flex; align-items: center; gap: 10px; }
.ba__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  border: 1px solid var(--ivory-45); border-radius: 50%; background: transparent; color: var(--ivory);
  cursor: pointer; transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.ba__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ba__arrow:hover { background: var(--sage-hi); border-color: var(--sage-hi); color: var(--night); }
.ba__arrow:focus-visible { outline: 2px solid var(--sage-hi); outline-offset: 4px; }
.ba__count { min-width: 5.5ch; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .12em; color: var(--ivory-70); }

.ba__stage {
  position: relative; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 18px;
  background: #0e0d0c; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(239, 232, 225, .08);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba__case { position: absolute; inset: 0; }
.ba__case[hidden] { display: none; }
.ba__img { position: absolute; inset: 0; margin: 0; }
.ba__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__tag {
  position: absolute; top: 16px; padding: 7px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(28, 25, 23, .62); color: var(--ivory); border: 1px solid rgba(239, 232, 225, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; }

.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 2; pointer-events: none; }
.ba__handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ivory); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ba__knob {
  position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 52px; height: 52px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--ivory); color: var(--night);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.ba__knob svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ba__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 52px; height: 52px; }
.ba__range::-moz-range-thumb { width: 52px; height: 52px; border: 0; }
.ba__range:focus-visible + .ba__handle .ba__knob,
.ba__stage:has(.ba__range:focus-visible) .ba__knob { outline: 2px solid var(--sage-hi); outline-offset: 4px; }

.ba__meta { margin: 18px 0 0; font-size: 15px; color: var(--ivory-85); }
.ba__meta strong { font-weight: 700; color: var(--ivory); }
.ba__dot { margin: 0 10px; color: var(--ivory-45); }
.ba__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ivory-45); max-width: 44ch; }

/* Sin JavaScript: las dos fotos del primer caso, una junto a otra. */
html:not(.js) .ba__nav, html:not(.js) .ba__handle, html:not(.js) .ba__range, html:not(.js) .ba__count { display: none; }
html:not(.js) .ba__stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: transparent; box-shadow: none; }
html:not(.js) .ba__case { position: static; display: contents; }
html:not(.js) .ba__case[hidden] { display: none; }
html:not(.js) .ba__img { position: relative; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden; }
html:not(.js) .ba__img--before { clip-path: none; order: -1; }

@media (max-width: 1024px) {
  .about3__inner--ba { padding-top: 72px; padding-bottom: 64px; }
  .about3--ba .about3__bg { position: absolute; inset: 0; height: auto; min-height: 0; }
  .about3--ba .about3__bg img { object-position: 30% 50%; }
  .ba { grid-column: auto; justify-self: stretch; max-width: 560px; margin-right: 0; }
  .about3--ba .about3__copy { grid-column: auto; }
}
@media (max-width: 600px) {
  .ba__head { flex-wrap: wrap; }
  .ba__knob { width: 46px; height: 46px; }
  .ba__tag { top: 12px; font-size: 10px; padding: 6px 10px; }
  .ba__tag--before { left: 12px; }
  .ba__tag--after { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba__arrow { transition: none; }
}