/* Comparador «antes / después» (sección Así instalamos). Componente común: escenas y portada. */
.cmp {
  --cmp-pos: 50%;
  position: relative; width: 100%; aspect-ratio: var(--cmp-ratio, 16 / 9);
  overflow: hidden; border-radius: 14px; border: 1px solid rgba(201, 163, 92, 0.3);
  background: #17231a; box-shadow: 0 18px 40px rgba(5, 9, 5, 0.35);
  touch-action: pan-y;               /* el dedo en vertical sigue moviendo la página */
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: ew-resize;
}
.cmp-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.cmp-antes { clip-path: inset(0 calc(100% - var(--cmp-pos)) 0 0); }
.cmp-barra {
  position: absolute; top: 0; bottom: 0; left: var(--cmp-pos); z-index: 3;
  width: 48px; margin-left: -24px; display: flex; align-items: center; justify-content: center;
  outline: none; cursor: ew-resize;
}
.cmp-barra::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: #f2eee3; box-shadow: 0 0 0 1px rgba(12, 17, 12, 0.3), 0 0 14px rgba(12, 17, 12, 0.45);
}
.cmp-tirador {
  position: relative; width: 50px; height: 50px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #e7cd93, #c9a35c); color: #241b0c;
  border: 2px solid #f2eee3; box-shadow: 0 8px 22px rgba(5, 9, 5, 0.5);
  transition: transform 0.15s ease;
}
.cmp-tirador svg { display: block; }
.cmp:hover .cmp-tirador, .cmp-arrastrando .cmp-tirador { transform: scale(1.06); }
.cmp-barra:focus-visible .cmp-tirador { outline: 3px solid #e7cd93; outline-offset: 3px; }
.cmp-etq, .cmp-sello {
  position: absolute; z-index: 2; padding: 5px 12px; border-radius: 999px; pointer-events: none;
  font-family: "Manrope", sans-serif; color: #f2eee3;
  background: rgba(12, 17, 12, 0.6); border: 1px solid rgba(201, 163, 92, 0.3);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}
.cmp-etq { top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.cmp-etq-antes { left: 14px; }
.cmp-etq-despues { right: 14px; }
.cmp-etq.cmp-oculta { opacity: 0; }
.cmp-sello { right: 14px; bottom: 14px; font-size: 11.5px; letter-spacing: 0.06em; }
.ai-comparar-nota { margin: 6px 0 0; font-size: 13px; color: rgba(242, 238, 227, 0.6); }
@media (max-width: 560px) {
  .cmp { border-radius: 10px; }
  .cmp-etq { top: 10px; padding: 4px 9px; font-size: 10.5px; letter-spacing: 0.14em; }
  .cmp-etq-antes { left: 10px; }
  .cmp-etq-despues { right: 10px; }
  .cmp-sello { right: 10px; bottom: 10px; padding: 4px 9px; font-size: 10.5px; }
  .cmp-tirador { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cmp-tirador, .cmp-etq { transition: none; } }