/* Antes / después con deslizador (11 oct 2026), como el de ListQuick: una sola
   foto a todo el ancho con un tirador en el medio. La de "antes" va encima,
   recortada hasta el tirador (--pos). Lo mueve js/comparador.js. Se usa en el
   Estudio de la app y en el bloque de MAX de /precios/ (ES y EN).
   Antes eran dos fotos lado a lado que en el movil salian recortadas en una
   tira estrecha y ocupaban casi dos pantallas. */
.comparador {
  --pos: 50%;
  position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 14px; background: #1e1d19; isolation: isolate;
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.comparador img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none; -webkit-user-drag: none;
}
.comparador .comp-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comp-linea {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; z-index: 2;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); pointer-events: none;
}
.comp-tirador {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; color: #141410; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.comp-tirador svg { width: 22px; height: 22px; display: block; }
.comp-chip {
  position: absolute; top: 12px; z-index: 3; pointer-events: none;
  font-size: 0.72rem; font-weight: 500; line-height: 1; padding: 0.42rem 0.7rem; border-radius: 999px;
  transition: opacity 0.2s ease;
}
.comp-chip-antes { left: 12px; background: rgba(10,10,10,0.72); color: #f5f0e8; }
.comp-chip-despues { right: 12px; background: rgba(245,240,232,0.94); color: #141410; }
/* Con el tirador pegado a un lado, la etiqueta de ese lado sobra. */
.comparador.comp-izq .comp-chip-antes, .comparador.comp-der .comp-chip-despues { opacity: 0; }
/* El control de verdad para teclado y lectores de pantalla: invisible, pero
   al enfocarlo se marca todo el comparador. */
.comp-rango {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.comparador:focus-within { outline: 2px solid #e8452a; outline-offset: 3px; }
.comp-ayuda { text-align: center; font-size: 0.75rem; color: #8f8575; margin: 0.6rem 0 0; }
.comp-pestanas { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto 0.8rem; }
.comp-pestanas button {
  flex: 1; min-height: 40px; padding: 0.5rem 0.8rem; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid rgba(245,240,232,0.14); color: rgba(245,240,232,0.8);
  font: inherit; font-size: 0.85rem;
}
.comp-pestanas button[aria-pressed="true"] { border-color: #e8452a; color: #f5f0e8; background: rgba(232,69,42,0.1); }
.comp-pestanas button:focus-visible { outline: 2px solid #e8452a; outline-offset: 2px; }