/* El recorrido de Servicios define la tarjeta, los botones y la apertura.
   Estas reglas solo dibujan la comparación sobre el video. */
.services--journey .service__media.vfx-comparador {
  width: 100%;
  max-width: min(360px, 40svh);
  justify-self: center;
  margin: 0;
}

.vfx-visor { position: relative; }
.vfx-comparador .plano {
  --split: 45.8%;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}

.vfx-comparador .plano img,
.vfx-comparador .plano canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vfx-comparador .plano video {
  position: absolute;
  top: 0;
  right: 0;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.vfx-comparador canvas { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.vfx-comparador .plano[data-frame] img { visibility: hidden; }
.vfx-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid #fffa;
  border-radius: 30px;
  background: #171713ee;
  color: white;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.vfx-comparador .corte {
  position: absolute;
  inset: 0 auto 0 var(--split);
  width: 1px;
  pointer-events: none;
  background: #fffe;
  box-shadow: 0 0 3px #1117;
}

.vfx-comparador .asa {
  position: absolute;
  top: 65%;
  left: 0;
  display: grid;
  place-items: center;
  width: 21px;
  height: 15px;
  transform: translate(-50%, -50%);
  border: 1px solid #fffa;
  border-radius: 12px;
  background: #171713ba;
}

.vfx-comparador .asa svg {
  width: 13px;
  height: 8px;
  fill: none;
  stroke: white;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vfx-comparador :focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
#panel-vfx [hidden] { display: none; }
#vfx-instruccion {
  margin: 0 0 .5rem;
  color: var(--ash);
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
}
#vfx-instruccion .tactil { display: none; }

@media (hover: none), (pointer: coarse) {
  #vfx-instruccion .raton { display: none; }
  #vfx-instruccion .tactil { display: inline; }
}