/* Estilo para el contenedor principal */
.container-comparation {
  max-width: 400px;
  max-height: 200px;
  position: relative; /* Asegura que el contenedor tenga una posición relativa para posicionar elementos internos correctamente */
}


/* Estilo para el contenedor de comparación */
#comparison {
  width: 100%;
  padding-bottom: 100%; /* Mantiene la proporción del contenedor cuadrada */
  overflow: hidden; 
  position: relative;
  border-radius: 4%;
}

/* Estilo para el elemento <figure> */
figure { 
  position: absolute;
  background-image: url(https://www.contegral.co/wp-content/assets/img/viejo.png);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Estilo para el divisor */
#divisor { 
  background-image: url(https://www.contegral.co/wp-content/assets/img/nuevo.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  bottom: 0; 
  height: 100%;
}

/* Estilo para los pseudo-elementos del divisor */
#divisor::before,
#divisor::after {
  content: '';
  position: absolute;
  right: -2px;
  width: 6px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}

#divisor::before {
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}

#divisor::after {
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}

/* Estilo para el handle */
#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centraliza el handle */
  z-index: 1;
  border-radius: 50%; /* Redondea el handle */
  background: transparent; /* Asegura que el fondo sea transparente si es necesario */
}

/* Estilo para los pseudo-elementos del handle */
#handle::before,
#handle::after {
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}

#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}

#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

/* Estilo para el control deslizante */
input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%; 
  left: -25px;
  transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}

/* Estilo para el control deslizante cuando está en foco o activo */
input[type=range]:focus,
input[type=range]:active {
  border: none;
  outline: none;
}

/* Estilo para el thumb del slider en Webkit (Chrome, Safari) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

/* Estilo para el thumb del slider en Firefox */
input[type=range]::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

/* Estilo para el track del slider en Firefox */
input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;    
}