#situaciones {
  position: absolute;
  right: 0px;
  /* Permite ajustar automáticamente el ancho */
  width: 12vw;
  /* Permite ajustar automáticamente la altura */
  height: auto;
  top: 20vh;
  /* Incluye padding y border en el ancho total */
  box-sizing: border-box;
  z-index: 6;

}

#imagenEscena {
  position: absolute;
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: 100% 100%;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  /* Puedes ajustar este valor según tus necesidades */
  max-width: 100%;
  /* Puedes ajustar este valor según tus necesidades */
  max-height: 100vh;
  /* Centra el div horizontalmente */
  margin: auto;
  /* Permite ajustar automáticamente el ancho */
  width: 100vw;
  /* Permite ajustar automáticamente la altura */
  height: 100vh;

  /* Incluye padding y border en el ancho total */
  box-sizing: border-box;
  z-index: 0;

}

#siguienteImg {
  position: absolute;
  display: none;
  /* Permite ajustar automáticamente el ancho */
  width: 73vw;
  /* Permite ajustar automáticamente la altura */
  height: 60vh;
  top: 18vh;
  left: 12vw;
  z-index: 5;

}
#imagenA{
  position: absolute;
  background-image: url('elementos/materiales/opa.png');
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: 100% 100%;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  /* Puedes ajustar este valor según tus necesidades */
  max-width: 100%;
  /* Puedes ajustar este valor según tus necesidades */
  max-height: 100vh;
  /* Centra el div horizontalmente */
  margin: auto;
  /* Permite ajustar automáticamente el ancho */
  width: 100vw;
  /* Permite ajustar automáticamente la altura */
  height: 100vh;
  z-index: 1;
}
#imagenB{
  position: absolute;
  background-image: url('elementos/materiales/opb.png');
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: 100% 100%;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  /* Puedes ajustar este valor según tus necesidades */
  max-width: 100%;
  /* Puedes ajustar este valor según tus necesidades */
  max-height: 100vh;
  /* Centra el div horizontalmente */
  margin: auto;
  /* Permite ajustar automáticamente el ancho */
  width: 100vw;
  /* Permite ajustar automáticamente la altura */
  height: 100vh;
  z-index: 1;
}
#opcionA{
  position: absolute;
  height: 16vh;
  width: 17vw;
  bottom: 23vh;
  left: 27vw;
  /*background-color: brown;*/
  z-index: 7;
}
#opcionB{
  position: absolute;
  height: 16vh;
  width: 17vw;
  bottom: 23vh;
  right: 26vw;
  /*background-color: blueviolet;*/
  z-index: 7;

}

#botonVolver {
  position: absolute;
  background-image: url('elementos/materiales/botonVolver.png');  
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: cover;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  height: 10vh;
  width: 15vw;
  bottom: 5vh;
  right: 1vw;
  z-index: 7;
}

#botonAnterior {
  position: absolute;
  display: none; 
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: contain;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  height: 5vh;
  width: 5vw;
  bottom: 19vh;
  left: 39vw;
  z-index: 7;
}


#cabecero {
  position: absolute;
  background-image: url('elementos/materiales/marco.png');
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: 100% 100%;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  /* Puedes ajustar este valor según tus necesidades */
  max-width: 100%;
  /* Puedes ajustar este valor según tus necesidades */
  max-height: 100vh;
  /* Centra el div horizontalmente */
  margin: auto;
  /* Permite ajustar automáticamente el ancho */
  width: 100%;
  /* Permite ajustar automáticamente la altura */
  height: 120%;
  top: 0px;
  /* Agrega espacio alrededor del contenido del div */
  padding: 20px;
  /* Incluye padding y border en el ancho total */
  box-sizing: border-box;
  z-index: 5;

}

.situacion {
  /* Ancho del contenedor hijo (restar 10px para la separación) */
  width: calc(100% - 10px);
  /* Altura del contenedor hijo */
  height: 5vh;
  /* Ajusta la imagen para cubrir todo el contenedor sin distorsionar */
  background-size: 100% 100%;
  /* Evita que se repita la imagen en caso de que el gif sea más pequeño que el contenedor */
  background-repeat: no-repeat;
  /* Centra la imagen dentro del contenedor */
  background-position: center;
  /* Separación entre los contenedores hijos */
  margin-bottom: 10px;
  transition: transform 0.2s, background-image 0.2s;
}

/* Escalado de boton o mouse over*/
.situacion:hover {
  /* Hace que el div sea un poco más grande al pasar el ratón por encima */
  transform: scale(1.05);
}
.opcion:hover{
  transform: scale(1.06);
}