/* Asegura que el contenido principal del loader esté por encima */
.tvh-form-carga > *:not(.cmp-characters),
.tvhm-carga-vida > *:not(.cmp-characters),
.tsm-carga-salud > *:not(.cmp-characters),
.ilt-vmr-carga-ilt > *:not(.cmp-characters),
.ctii-form-carga > *:not(.cmp-characters) {
  position: relative;
  z-index: 1;
}

/* Capa decorativa común a todos los comparadores: detrás y a la izquierda */
.cmp-characters {
  position: absolute;
  left: clamp(10px, 4vw, 40px);
  top: 0;
  bottom: 0;               /* ocupa el alto del overlay */
  width: min(800px, 45vw); /* máx 800px, responsive */
  z-index: 0;              /* por detrás del resto */
  pointer-events: none;    /* no intercepta clics */
}

/* Imágenes apiladas, centradas verticalmente, ocultas por defecto */
.cmp-characters .cmp-character-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(1.02);
  max-height: 80vh;        /* evita cortes de cabeza */
  width: auto;
  max-width: 100%;
  height: auto;
  opacity: 0;              /* ocultas por defecto */
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

/* Visibles ~60% cuando toquen */
.cmp-characters .cmp-character-img.is-visible {
  opacity: 0.6;
  transform: translateY(-50%) scale(1);
}

/* ===== MOBILE: arriba del todo y con left negativo ===== */
@media (max-width: 767px) {
  .cmp-characters {
    left: clamp(-30px, -4vw, -20px);          /* ~ -20 a -30px */
    top: max(0px, env(safe-area-inset-top));  /* respeta notch */
    bottom: auto;
    width: min(480px, 75vw);
  }
  .cmp-characters .cmp-character-img {
    top: 0;
    transform: none;
    max-height: 65vh;
  }
  .cmp-characters .cmp-character-img.is-visible {
    opacity: 0.6;
    transform: none;
  }
}