*{
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}
:root{
	--negro: #000000;
	--rojo: #ee2233;
	--blanco: #ffffff;
	--rojo_intenso: #ff0000ff;
	--opaco: #aaaaaa;
	--obscuro: #666666;
	--fondo: #222222;
}
body{
	background-color: var(--negro);
	color: var(--blanco);
}
/**/
.separador{
	display: none;
}
.plantilla{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.cnt_logo{
	padding: 20px 0px 10px 0px;
}
.logo{
	width: 140px;
}
.titulo{
	margin-bottom: 15px;
}
.contenedor{
	width: 90%;
}
.caja{
	position: relative;
  	margin-bottom: 15px;
  	display: flex;
}
.entradas{
	width: 100%;
  	padding: 16px 12px 8px;
  	font-size: 16px;
  	border: 1px solid #ccc;
  	border-radius: 6px;
  	outline: none;
  	background-color: var(--negro);
  	border: 2px solid var(--obscuro);
  	color: var(--opaco);
}
.texto_entrada{
	position: absolute;
  	top: 16px;
  	left: 12px;
  	color: #888;
  	font-size: 16px;
  	pointer-events: none;
  	transition: 0.2s ease all;
}
.entradas:focus + .texto_entrada,
.entradas:not(:placeholder-shown) + .texto_entrada,
.entradas:valid + .texto_entrada {
  top: 4px;
  left: 8px;
  font-size: 0.8rem;
  color: var(--opaco);
  padding: 0 4px;
}
.cnt_pais{
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}
.pais{
	background-color: var(--negro);
	color: var(--opaco);
	padding: 10px 0px;
	font-size: 1rem;
	margin-top: 5px;
}
.cnt_ver{
	display: flex;
	justify-content: center;
	padding-bottom: 20px;
	user-select: none;
}
.check{
	cursor: pointer;
}
.ver{
	padding-left: 5px;
	font-size: .9rem;
	cursor: pointer;
}
.advertencia{
	border: 2px solid var(--rojo_intenso);
	background-color: var(--negro);
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 20px;
	color: var(--rojo_intenso);
	user-select: none;
	display: none;
}
.cnt_aceptar{
	text-align: center;
	padding-bottom: 20px;
	user-select: none;
}
.cnt_aceptar a{
	color: var(--opaco);
}
.cnt_continuar{
	width: 100%;
	display: flex;
	justify-content: center;
}
.continuar{
	font-size: 1rem;
	padding: 10px 15px;
	background-color: var(--rojo_intenso);
	border: none;
	cursor: pointer;
	color: var(--negro);
	font-weight: 600;
}
.redireccion{
	padding: 20px 0px;
	user-select: none;
	text-align: center;
}
.redireccion a{
	color: var(--opaco);
}

/**/
.cnt_dos{
	display: none;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	background-color: var(--negro);
}
.validacion{
	padding: 20px;
	background-color: var(--fondo);
	margin: 20px auto;
	width: 85%;
}
.cnt_codigo{
	margin-top: 10px;
	display: flex;
	flex-direction: column;
}
.codigo{
	width: 90%;
	font-size: 1rem;
	padding: 5px;
	border: 2px solid var(--opaco);
	background-color: var(--negro);
	outline: none;
	color: var(--blanco);
}
.enviar{
	width: 120px;
	padding: 10px;
	border: none;
	color: var(--negro);
	background-color: var(--rojo_intenso);
	margin-top: 10px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

/**/
.cnt_tres{
	display: none;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	background-color: var(--negro);
	padding: 20px 0px;
}
.emergente{
	width: 80%;
	margin: auto;
	background-color: var(--fondo);
	border-radius: 15px;
	border: 2px solid var(--opaco);
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.emergente span{
	margin: 10px 0px;
	color: var(--opaco);
}
.aceptar{
	border: none;
	background-color: var(--rojo_intenso);
	color: var(--negro);
	font-weight: 600;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 1rem;
}

@media(min-width: 550px){
	.cnt_uno{
		display: flex;
		width: 100%;
	}
	.separador{
		display: initial;
		width: 20%;
		background-color: var(--rojo_intenso);
	}
	.plantilla{
		width: 80%;
	}
	.validacion{
		width: 400px;
		margin-left: 10%;
	}
	.emergente{
		width: 430px;
	}
}

@media(min-width: 850px){
	.separador{
		width: 35%;
	}
	.plantilla{
		width: 500px;
		margin: auto;
	}
}