/* ——— Recursos interactivos educativos (páginas de tratamientos) ———
   Comparador: adaptación del bloque gratuito «Image compare» de bencho.dev (licencia MIT, © Lorenzo Cabra).
   Lente de enfoque: implementación propia. Ambos con dedo, ratón y teclado. */
.iafig{margin:2.2rem auto 0;max-width:min(40rem,calc(100% - 2*var(--margin,1.25rem)))}
.iafig__frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 28px -18px rgba(6,38,62,.35);background:var(--ink)}
.iafig figcaption{margin-top:.7rem;font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.iafig figcaption .iafig__cred{color:#7d939e}

/* Comparador deslizante nublada/nítida (port MIT bencho image-compare) */
.cmp{position:relative;overflow:hidden;touch-action:none;cursor:ew-resize;outline:none;user-select:none;-webkit-user-select:none;width:100%;aspect-ratio:3/2}
.cmp:focus-visible{box-shadow:inset 0 0 0 3px var(--blue)}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.cmp-before{position:absolute;inset:0}
.cmp-before img{filter:blur(7px) saturate(.75) brightness(1.02)}
.cmp-tag{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:999px;background:rgba(14,28,38,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:500;pointer-events:none}
.cmp-tag.cmp-right{left:auto;right:12px}
.cmp-line{position:absolute;inset:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
.cmp-line path{fill:none;stroke:#fff;stroke-width:2}
.cmp-grip{position:absolute;top:0;bottom:0;width:0;pointer-events:none}
.cmp-knob{position:absolute;left:50%;top:50%;width:38px;height:38px;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--blue-deep);box-shadow:0 2px 12px rgba(14,28,38,.25);transition:scale 220ms cubic-bezier(.24,1.34,.38,1)}
.cmp[data-held] .cmp-knob{scale:.9}

/* Lente de enfoque: la imagen de base está desenfocada; la lente revela la zona nítida */
.flens{position:relative;overflow:hidden;touch-action:none;cursor:crosshair;outline:none;width:100%;aspect-ratio:3/2}
.flens:focus-visible{box-shadow:inset 0 0 0 3px var(--blue)}
.flens>img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(6px) saturate(.85);-webkit-user-drag:none;user-select:none}
.flens__lens{position:absolute;width:150px;height:150px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 18px rgba(14,28,38,.35),inset 0 0 0 1px rgba(14,28,38,.15);background-repeat:no-repeat;pointer-events:none;display:none;transform:translate(-50%,-50%)}
@media (max-width:800px){.flens__lens{width:120px;height:120px}}
@media (prefers-reduced-motion:reduce){.cmp-knob{transition:none}}