/* forma · before / after compare (VID-05 «Se nota?»): two photos, the divider follows the pointer (as umbral-sun's
   «Lo que mostramos es lo que entregamos»). Tokens come from the landing (--brand-*); fallbacks keep it standalone. */
.fc { position: relative; --p: 50%; aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; outline: none; touch-action: pan-y;
  border-radius: var(--brand-radius, 14px); background: var(--brand-accent-soft, #EBDCD2); user-select: none; -webkit-user-select: none; }
.fc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fc-top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p)); }
.fc-bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(transparent, #FFFFFF 18%, #FFFFFF 82%, transparent); box-shadow: 0 0 12px rgba(58, 42, 36, .25); }
.fc-knob { position: absolute; left: var(--p); top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 4px 14px rgba(58, 42, 36, .22); display: grid; place-items: center; pointer-events: none; }
.fc-knob svg { width: 22px; height: 14px; }
.fc-l, .fc-r { position: absolute; top: 12px; font: 500 11px/1 var(--brand-font, Inter, system-ui, sans-serif); letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-text, #3A2A24); background: rgba(255, 255, 255, .82); border-radius: 100px; padding: 6px 9px;
  pointer-events: none; }
.fc-l { left: 12px; } .fc-r { right: 12px; }
.fc-note { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 400 11px/1.3 var(--brand-font, Inter, system-ui, sans-serif);
  color: rgba(255, 255, 255, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: none; }
.fc:focus-visible { box-shadow: 0 0 0 2px var(--brand-accent, #8A5A44); }
.fc.is-live { cursor: ew-resize; }