/* Contenedor principal */
.mouse-controller {
  position: relative;
  width: 100%; /* Ajusta a tus necesidades */
  height: 95vh; /* Ajusta a tus necesidades */
  overflow: hidden; /* Ocultar cualquier contenido fuera del área */
  min-height: 210px;
}

/* Imagen de fondo */
.imagen-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: #1570E6;*/
  background: url('../img/bar_sin_silla.webp') no-repeat center center;
  background-size: cover;
  z-index: 1; /* Primer capa - fondo */
}

/* Contenido intermedio oculto */
.revelar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Segunda capa */

  /* Añadimos un "clip" inicial para ocultar el contenido */
  /*-webkit-clip-path: inset(0 0 0 0);*/
  clip-path: inset(6% 24.5% 7% 52%);

  /* Imagen base + contenido extra */
  background: url('../img/bar_con_silla.webp') no-repeat center center;
  background-size: cover;
}

.mascara {
  position: absolute;
  top: 0;
  right: 23%;
  width: 498px;
  height: 918px;
  z-index: 3;
  background: url('../img/celular.png') no-repeat center center;
  background-size: cover;
}

/* Diseño responsive para móviles */
@media only screen and (max-width: 980px) {
  .mouse-controller {
    width: 100%;
    height: 27%; /* Permitir altura flexible */
  }

  .imagen-base {
    background-size: contain; /* Ajustar para que se vea completa en pantallas más pequeñas */
  }

  .revelar {
    background-size: contain;
    clip-path: inset(12% 7% 8% 70%);
  }

  .mascara {
    top: 12%;
    right: 5%;
    width: 100px; /* Tamaño reducido para móviles */
    height: 175px; /* Mantener proporción */
  }
}