/* CSS Document */


.montserrat-fac {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body {

	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;	
	background-color: #fff;	
	
}

img{ display: block;}

.fallo{ position: fixed; z-index: 9998; opacity: 0; background-color: #b20b00; width: 100vw; height: 100vh; display: none; }
.acierto{ position: fixed; z-index: 9998; opacity: 0; background-color: #00ce5f; width: 100vw; height: 100vh; display: none; }
 
.puntos{ position: fixed; z-index: 9998; opacity: 0; background-color: #00ce5f; width: 100vw; height: 100vh; display: none; }

.tex_valoracion{ position: absolute; top: 20%; left: 0; width: 100%; text-align: center; color: white; font-size: 30px; font-weight: bold; }
.tex_valoracionfinal{ position: relative; margin: 40px auto;  width: 100%; text-align: center; color: white; font-size: 30px; font-weight: bold; }
.box_puntos{ position: relative; width: 100%;  }

.valoracion{ color: #fff; font-size: 16px; margin: 30px auto; width: 700px; }

.flechafinal{ position: absolute; opacity: 0; height: 8%; }
.flechafinal img{ /*height: 100% !important;*/ }

#nota{ font-size: 22px; font-weight: bold; color: #fff; display: inline-block; vertical-align: middle; margin-left: 10px; }


.box_barra_puntos{ position: relative; box-sizing: border-box; width: 700px; margin:auto; height: 100%; padding-left: 5%;  }
.box_barra_puntos img{ width: 50%; margin: auto; }

.barrapuntos1, .barrapuntos2, .barrapuntos3, .barrapuntos4{ display: none; height: 100%; }

.fondo_rojo{ position: relative;  width: 700px; height: 100vh; margin: auto;  cursor: pointer; overflow: hidden; }
.fondo_verde{ position: relative; width: 100vw; height: 100vh; display: block; cursor:pointer; }
.fondo_verde2{ position: relative; width: 100vw; height: 100vh; display: block; cursor:pointer; overflow-y: auto; }



/*.mano_fallo img{ width: 60%; }

.mano_fallo img {
  position: absolute;
  top: 60%;
  left: -100%;
  transform: translateY(-50%);
  transition: left 0.6s ease;
}

.mano_fallo.activa img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.mano_acierto img{ height: 70%; }

.mano_acierto img {
  position: absolute;
  bottom: -100%; 
  left: 50%;
  transform: translateX(-50%);
  transition: bottom 0.6s ease;
  
}

.mano_acierto.activa img {
  bottom: 0; 
}*/

.mano_fallo img {
  position: absolute;
  top: 60%;
  left: -100%;
  transform: translateY(-50%);
  transition: left 0.6s ease;
  width: 60%;
}

.mano_fallo.activa img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.mano_acierto img {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  transition: bottom 0.6s ease;
  height: 70%;
}

.mano_acierto.activa img {
  bottom: 0;
}


a{ text-decoration:none; }

.oculto{ display:none; }
.alfacero{ opacity:0; }

.contenedor100{ 
  width: 100vw;
  max-height: 100vh;
  overflow-y: auto;
}
.contenedor{ display: none; overflow-y: auto; opacity: 0; width: 100vw; max-height: 100vh; }

.box_100{ position: relative; width:100%; /*border:1px solid red;*/ }

.logo{ width:80%; margin:0 auto 0 auto; /*border:1px solid red;*/ }
.logo img{ width: 40%; margin:0 auto; max-width: 500px;  }

.box_inicio{ position: relative; margin:0px auto; width:100%; max-height: none; /*border:1px solid red;*/ }

.con_inicio{ position: relative; width: 715px; margin:0 auto; /*border:1px solid red;*/ }

.franja_verde{ position:relative; box-sizing: border-box; width: 100%; padding: 0 5%; background-color: #00ce5f; height: 140px; display: flex; justify-content: center; align-items: center; }

.tex_franja_verde{ text-align: center; color: white; font-size: 22px; font-weight: 500;  }

.b_gris{ width: 223px; height: 46px; line-height: 46px; text-align: center; margin: 40px auto; background-color: #7f7f7f; font-size: 18px; text-transform: uppercase; color: white; border-radius: 25px; }

.ancla_b_gris .b_gris:hover{ background-color: #525252;}

.b_gris.hover-activo {  
  background-color: #525252; /* ejemplo de cambio visual */
  transition: background-color 0.3s ease;
}

.ancla_b_grisfinal{ position: relative; margin: auto;  }

.con_inicio{ position: relative; box-sizing: border-box; z-index: 2; }



.volver{ text-decoration: underline; }

.npaso{ font-size: 22px; text-align: center; margin: 20px 0;}

.preg{ font-size:20px; text-align:center; }
.margen_bajo_preg{ margin:0 0 25px 0; }

.box_opciones{ position: relative; margin: 40px auto;  }

.opcion{ color: #000;}
.b_opcion{ border: 1px solid silver; box-sizing: border-box; padding: 10px 10px; width: 300px; min-height: 60px; text-align: center; margin: 0px auto 20px auto; background-color: #fff; font-size: 18px;  border-radius: 5px;  display: flex;  align-items: center;  justify-content: center; }

/*.opcion:hover .b_opcion,
.b_opcion.hover-activo {
  background-color: #ffe680;
  color: #333;
}*/

.b_opcion.hover-activo {
  background-color: #00ce5f;
  color: #fff;
  font-weight: bold;
  transition: all 0.3s ease;
}
.b_opcion.hover-activo2 {
  background-color: #b20b00;
  color: #fff;
  font-weight: bold;
  transition: all 0.3s ease;
}


.franja_verdequiz{ position:relative; overflow: hidden; box-sizing: border-box; width: 100%; padding: 0 5%; background-color: #00ce5f; min-height: 250px; display: flex; justify-content: center; align-items: center;  }

.ico_quiz{ position: absolute; bottom: 0px; height: 90%; }
.ico_quiz img{ height: 100%;  }

.solucion{ font-size: 18px; width: 660px; margin:20px auto; color: #fff; display: none; }
.solucionfoto{ width: 700px; margin: auto; display: none; }
.solucionfoto img{ width: 100%; }

.swiper {
  width: 700px;
  height: auto;
}

.pie{ position: relative; width: 70%; text-align: center; margin: 20px auto; font-size: 12px; }
.pie a{ color: #000; }

.bsig{ display: none; }

/*Fuentes*/

.blanca{ color:white; }
.lila{ color:#973790; }
.lila2{ color: #9b6297; }
.gris{ color:#424242; }
.gris_claro{ color: #dcdcdc; }


.regular{ font-weight:400; }
.medium{ font-weight:500; }
.semibold{ font-weight:600; }
.bold{ font-weight:700; }



@media screen and (max-width:1200px) {
	/*.logo img{ width: 45%;  }*/
}

@media screen and (max-width:1024px) {
	
	/*.box_inicio{ position: relative; margin:0px auto; width:500px; }*/
		
}

@media screen and (max-width:850px) {
	
	.paso{  padding:23px 15px 0 15px; }	 
	.infoini{ font-size:21px; width:100%; }
	.logo img{ width: 50%;  }
	.pie{ font-size: 10px; }
	
}

@media screen and (max-width:768px) {
	
	.paso{  padding:23px 15px 0 15px; }	 
	.infoini{ font-size:21px; width:100%; }
	.logo img{ width: 50%;  }
	
}

@media screen and (max-width:720px) {
	.con_inicio{ width: 100%; }
	.fondo_rojo{ width: 100%; }
	.swiper{  width: 100%;}
	.solucionfoto{  width: 100%;}
	.solucionfoto img{ width: 100%; }
	.box_barra_puntos{ width: 95% }
	.box_barra_puntos img{ width: 80%; margin: inherit; }
	.valoracion{ color: #fff; font-size: 16px; margin: 30px auto; width: 85%; }
}

@media screen and (max-width:600px) {

	.logo{ width:100%; margin:20px auto 0 auto; /*border:1px solid red;*/ }
	.logo img{ width: 70%;  }

	.franja_verde{  height: 100px;  }

	.tex_franja_verde{ font-size: 18px;   }

	
}

@media screen and (max-width:400px) {

	.preg{width: 90%; margin: auto;}
	
	.logo img{ width: 60%;  }

	
}