body{
		/* margin: 0; */
		padding: 0;
		overflow: hidden;
		background: #4b6cb7;
		background: -webkit-linear-gradient(to right, #182848, #4b6cb7);
		background: linear-gradient(to right, #182848, #4b6cb7);
	}

.container {
				height: 100%;
				width: 100%;
				position: absolute;
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				grid-template-rows: repeat(12, 1fr);

			}

.logo {
		grid-column: 3 / 11;
		grid-row: 1 / 4;
	  }

.cont-login {
				display: flex;
				grid-column: 5 / 9;
				grid-row: 3 / 11;
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				grid-template-rows: repeat(12, 1fr);
				backdrop-filter: blur(30px);
  				background-color: rgba(65, 65, 65, 0.308);
				border-radius: 20px;
				border: 2px solid rgba(255, 255, 255);
				padding: 10px;
			}

.cont-login:hover {
						box-shadow: 10px 10px 20px 3px #C10D0E4f;
						border: 2px solid rgba(255, 255, 255);
					}

.etiqueta {
			display: flex;
			grid-column: 1 / 13;
			grid-row: 4 / 5;
			color: white;
			font-size: 20px;
		 	letter-spacing: 1.2px;
		 	justify-content: center;
		 	padding: 10px;
		  }

.etiqueta1 {
			color: white;
			font-size: 1.1em;
		 	letter-spacing: 1.2px;
		 	justify-content: left;
		 	padding: 10px;
		  }

.cont-input {
				display: flex;
				grid-column: 1 / 13;
				grid-row: 6 / 13;
				flex-direction: column;
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				grid-template-rows: repeat(4, 1fr);
			}

.input-group {
				display: flex;
				grid-column: 2/12;
				padding: 10px 0px;
				position: relative;
				justify-content: center;
			}

.input-group {
	position: relative;
	width: 100%;
}

.input {
	width: 100%;
	height: 42px;
	border: solid 1.5px #9e9e9e;
	border-radius: 1rem;
	background: none;
	padding: 1rem;
	padding-right: 40px;
	font-size: 1rem;
	color: #f5f5f5;
	transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

.user-label {
	position: absolute;
	left: 15px;
	color: #e8e8e8;
	pointer-events: none;
	transform: translateY(1rem);
	transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.user-la {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-30%);
	cursor: pointer;
	width: 30px;
	height: auto;
}

.input:focus, input:valid {
							outline: none;
							border: 1.5px solid #fff;
						  }

.input:focus ~ label, input:valid ~ label {
											transform: translateY(-50%) scale(0.8);
											background-color: #2D3A58;
											padding: 0.2em;
											color: #fff;
										  }
 
.button {
	cursor: pointer;
	position: relative;
	padding: 10px 24px;
	font-size: 18px;
	color: #ffffff;
	border: 2px solid #0B08A9;
	border-radius: 34px;
	background-color: transparent;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	border-radius: inherit;
	scale: 0;
	z-index: -1;
	background-color: rgb(3, 87, 156);
	transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {	scale: 3;	}

.button:hover {
	color: #212121;
	scale: 1.1;
	box-shadow: 0 0px 20px rgb(19, 15, 199);
}

.button:active {	scale: 1;	}

/*= . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .
					CELULAR VERTICAL
 = . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .*/
@media only screen and (orientation: portrait)
{
	.cont-login {
		display: flex;
		grid-column: 2 / 12;
		grid-row: 3 / 11;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(12, 1fr);
	}

	.etiqueta {
		display: flex;
		grid-row: 4 / 6;
	}

	.cont-input {
		display: flex;
		grid-column: 1 / 13;
		grid-row: 6 / 13;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(4, 1fr);
	}
}

/*= . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .
					CELULAR HORIZONTAL
 = . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .*/
@media only screen and (max-width: 1024px) and (min-width: 769px) and (orientation: landscape)
{
	.cont-login {
		display: flex;
		grid-column: 4 / 10;
		grid-row: 3 / 11;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(10, 1fr);
	}

	.etiqueta {
		display: flex;
		grid-row: 4 / 5;
	}

	.cont-input {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
}

/*= . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .
							TABLET
 = . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .*/
@media only screen and (max-width: 769px) and (orientation: landscape)
{
	.cont-login {
		display: flex;
		grid-column: 4 / 10;
		grid-row: 3 / 11;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(12, 1fr);
	}
}

/* Estilos para pantallas grandes */
@media (min-width: 1920px) {
	.cont-login {
		display: flex;
		grid-column: 5 / 9;
		grid-row: 4 / 10;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(12, 1fr);
	}

	.cont-input {
		display: flex;
		grid-column: 2 / 12;
		grid-row: 6 / 12;
		flex-direction: column;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(4, 1fr);
	}

	.user-la {
		top: 40%;
	}
}