/* ---------- 5. DIFERENCIAL ----------
   Padrão (sem JS / movimento reduzido): emaranhado já embaraçado, funil de "Produto digital" completo. */
.diff { position: relative; padding-top: var(--s-9); }
.diff .sec-head { margin-bottom: var(--s-8); }
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.side { display: grid; gap: var(--s-5); align-content: start; }
.side-visual { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-sunken); border: 1px solid var(--line); aspect-ratio: 16 / 12; }
.side-label { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--t-h3); line-height: 1.12; }
.side.other .side-label { color: var(--ink-3); }
.side.drs .side-label { color: var(--accent); }
.side p { color: var(--ink-2); text-wrap: pretty; max-width: 34rem; }
.side p b { color: var(--ink); }
.side .g { color: var(--accent); }

/* as duas imagens: mesma proporção, uma contra a outra */
.contrast { align-items: start; }
.side-media { position: relative; }
.side-visual { aspect-ratio: 1.74 / 1; }
.vis-other { margin: 0; border-color: color-mix(in oklab, var(--danger) 45%, var(--line)); box-shadow: 0 0 0 4px var(--danger-soft); }
.vis-other img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.95); }
.vis-other .vig-tag { z-index: 2; }
.vis-drs { margin: 0; overflow: visible; background: none; border: 0; }
.vis-drs .shot-frame { height: 100%; display: grid; grid-template-rows: auto 1fr; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 30px 80px -30px var(--accent-glow); }
.vis-drs img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 0 0; }
.vs-badge { position: absolute; z-index: 3; top: 50%; right: calc(-.5 * clamp(1.5rem, 4vw, 4rem) - 1.35rem); translate: 0 -50%; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink-2); font-family: var(--font-display); font-style: italic; font-size: var(--t-sm); box-shadow: var(--shadow-panel); }
@media (max-width: 56rem) { .vs-badge { display: none; } }

.diff-close-wrap { padding: var(--s-9) 0 var(--s-10); text-align: center; }
.diff-close { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); max-width: 18em; margin-inline: auto; }

@media (max-width: 56rem) {
  .contrast { grid-template-columns: 1fr; gap: var(--s-8); }
  .picker-opts { grid-template-columns: 1fr; }
  .picker-opts button { min-height: 2.75rem; text-align: left; padding-inline: .9rem; }
  .vis-drs { aspect-ratio: auto; }
}
.vis-drs.has-img .picker { visibility: hidden; }