/* ********************************** */
/* Estilos para Explicaciones */
/* ********************************** */

  
 /* aviso de navegador problematico */
 #mensaje-navegador{
 	width: 70%;
 	margin: 0.3rem auto 0.8rem auto;
 	padding: 1rem;
 	background: #AD2121;
 } 

 #mensaje-navegador p{
 	text-align: center;
   font-size: 0.8rem;
   color: #FFFFFF;
   line-height: 1.2rem;
 } 

 #mensaje-navegador p b{
   font-size: 1.1rem;
 } 

 /* fin aviso de navegador problematico */

  div + .nota-peq{
  	margin-top: 2rem;
  }
 
 .nota-peq,  .nota-peq li{
 	margin-top:0;
 	margin-bottom: 0.5rem !important;
 	font-size: 0.85rem !important;
 	line-height: 1.4em
 }

 

 
.congelar{
	opacity: 0.5;
	pointer-events: none;
}


/* 3columnas con botones*/

.tresOpciones{
	display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 2rem;
}

.tresOpciones.centrado{
 
    justify-content: center;
 
}


.tresOpciones .columna{
	 text-align: center;
	 width: 28%;
}


.tresOpciones.dos .columna{
	 text-align: center;
	 width: 45%;
}

.tresOpciones .columna img{
	 display: block;
	 margin: 20px auto 0 auto;
	 max-width: 100%;
	 border-radius: 20px;
}

.variasColumnas{
     display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    text-align: center;
    margin-bottom: 2rem;
}

 
.variasColumnas h3{
	margin: 0 0 0.5rem 0;
}
 



  

.redonderBorde{
	border-radius: 20px;
}

.bordeBlanco{
	border:15px solid #FFF;
}


 

/* razonamiento abstracto */

 

.destacarLetra{
	/* letra con color rojo */
	font-weight: bold;
	color: #E71717;
}

.destacarLetra-azul{
	 
	font-weight: bold;
	color: #18AAE0;
}

.destacarLetra-v2{
	/* letra con fondo amarillo */
	padding: 0.2rem 0;
	font-weight: bold;
	background: yellow;
	color: #333333;
}

.textoExplicacion .destacarLetra,
.textoExplicacion .destacarLetra-azul{
	font-size: 1rem;
	text-shadow: 1px 1px 1px #000;
}

.textoExplicacion .destacarLetra{
	color: #FF7A38;
}

.textoExplicacion .destacarLetra-azul{
	color: #46CDFF;
}

 




/*-*-*-*--*-*-*-*-*-**-*/
/*MediaQueries*/

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

	.variasColumnas {
	 	flex-wrap: wrap;
	}

	.variasColumnas .columna{
	 	width: 50%;
	 	margin-bottom: 2rem;
	}

}

@media screen and (max-width: 550px){	
	.grafico-explicacion svg{
 		width: 100% !important;
 	}
}



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

	.variasColumnas .columna{
	 	width: 100%;
	 
	}

}