/* Mika — «Comparar» antes y después (R4, 2026-11-03): ventana con el deslizador sobre la portada. Tramo 5i. */
.comparar { margin: auto; width: min(94vw, 980px); max-height: 94vh; overflow-y: auto; border: 0; border-radius: 18px;
  padding: 1.1rem 1.4rem 1.4rem; background: var(--blanco); color: var(--tinta); box-shadow: 0 20px 60px rgba(32, 32, 57, .25); }
.comparar::backdrop { background: rgba(20, 18, 40, .45); }
.comparar[open] { display: grid; gap: .75rem; }
.comparar__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.comparar__cabeza h2 { font-size: 1.3rem; letter-spacing: -.02em; }
.comparar__elegir { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.comparar__elegir select { font: inherit; min-height: 44px; padding: 0 .75rem; border: 2px solid var(--linea); border-radius: 10px;
  background: var(--blanco); color: var(--tinta); }
.comparar__etiquetas { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; font-weight: 700; color: var(--coral-oscuro); }
.comparar__marcos { position: relative; height: min(60vh, 560px); overflow: hidden; border: 1px solid var(--linea); border-radius: 14px;
  background: #fff; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.comparar__marcos[hidden] { display: none; }
.comparar__marcos iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: #fff; }
.comparar__despues { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.comparar__asa { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--coral); transform: translateX(-50%); pointer-events: none; }
.comparar__asa::after { content: "↔"; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: var(--blanco); font-weight: 700; box-shadow: 0 4px 14px rgba(32, 32, 57, .3); }
html.acc-oscuro .comparar__asa::after { color: #13111f; }
.comparar__cargando { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; margin: 0; padding: 1rem; text-align: center;
  background: var(--blanco); color: var(--tinta); font-weight: 600; }
.comparar__cargando[hidden] { display: none; }
.comparar__deslizador { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
.comparar__deslizador input { width: 100%; min-height: 44px; accent-color: var(--coral); }
@media (max-width: 860px) {
  .comparar { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; padding: .9rem; }
  .comparar__marcos { height: min(58dvh, 520px); }
}