.login-wrapper{
	width:100%;
	max-width:650px;
	margin:90px auto 0 auto;
	padding:0 20px;
	box-sizing:border-box;
}

.login-title{
	background:linear-gradient(135deg,#294d8f,#1f3766);
	padding:18px 20px;
	border-radius:22px;
	text-align:center;
	box-shadow:
		0 0 30px rgba(0,140,255,.15),
		0 10px 40px rgba(0,0,0,.45);
	border:1px solid rgba(255,255,255,.08);
}

.login-title h1{
	margin:0;
	color:#fff;
	font-size:2.5rem;
	font-weight:800;
	letter-spacing:-1px;
	text-shadow:0 2px 15px rgba(0,0,0,.35);
}

.login-title span{
	display:block;
	margin-top:8px;
	font-size:1rem;
	color:#d8e4ff;
	font-weight:400;
	letter-spacing:.5px;
}

.login-box{
	margin-top:35px;
	text-align:center;
}

.datos{
	width:100%;
	max-width:520px;
	height:74px;
	border-radius:18px;
	border:1px solid rgba(84,140,255,.45);
	background:rgba(5,15,35,.85);
	color:white;
	font-size:30px;
	text-align:center;
	outline:none;
	box-sizing:border-box;
	padding:0 25px;
	transition:all .25s ease;
	box-shadow:
		inset 0 0 20px rgba(0,0,0,.35),
		0 0 25px rgba(0,70,170,.12);
}

.datos::placeholder{
	color:#9fb5df;
	font-weight:300;
	letter-spacing:.5px;
}

.datos:focus{
	border-color:#5ea2ff;
	background:rgba(10,22,48,.95);
	box-shadow:
		0 0 0 3px rgba(94,162,255,.15),
		0 0 35px rgba(94,162,255,.25);
	transform:translateY(-2px);
}

 

@media(max-width:700px){

	.login-title h1{
		font-size:2rem;
	}

	.datos{
		font-size:24px;
		height:65px;
	}
}

/* ===== BODY ===== */

body{
	margin:0;
	min-height:100vh;
	font-family:'Segoe UI', Arial, sans-serif;

	background:
		radial-gradient(circle at top, #163d7a 0%, #081321 45%, #02050b 100%);

	position:relative;
	overflow-x:hidden;
}

/* subtle animated glow */
body:before{
	content:"";
	position:fixed;
	inset:0;
	background:
		radial-gradient(circle at 50% 0%, rgba(0,140,255,.18), transparent 35%);
	animation: glowMove 6s ease-in-out infinite alternate;
	pointer-events:none;
}

@keyframes glowMove{
	from{ transform:translateY(-20px); }
	to{ transform:translateY(20px); }
}



/* ===== MAIN LOGIN CONTAINER ===== */

.login-wrapper{
	width:100%;
	max-width:620px;
	margin:80px auto 0 auto;
	padding:0 20px;
	box-sizing:border-box;
}



/* ===== TITLE ===== */

.login-title{
	text-align:center;

	padding:34px 20px;

	border-radius:26px;

	background:
		linear-gradient(135deg,
		rgba(40,75,140,.96),
		rgba(20,38,70,.96));

	border:1px solid rgba(120,170,255,.22);

	box-shadow:
		0 0 40px rgba(0,120,255,.18),
		0 18px 50px rgba(0,0,0,.55);

	backdrop-filter:blur(8px);
}

.login-title h1{
	margin:0;

	color:white;

	font-size:3.4rem;
	font-weight:800;

	letter-spacing:-1px;

	text-shadow:
		0 3px 20px rgba(0,0,0,.45);
}

.login-title span{
	display:block;

	margin-top:10px;

	color:#d6e5ff;

	font-size:1.05rem;
	font-weight:400;

	letter-spacing:.7px;
}



/* ===== LOGIN BOX ===== */

.login-box{
	margin-top:50px;
	text-align:center;
}



/* ===== INPUT FIELDS ===== */

.datos{

	width:100%;
	max-width:540px;

	height:78px;

	border-radius:22px;

	border:1px solid rgba(110,170,255,.35);

	background:
		linear-gradient(180deg,
		rgba(10,24,48,.96),
		rgba(5,14,30,.96));

	color:white;

	font-size:30px;
	font-weight:500;

	text-align:center;

	padding:0 25px;

	outline:none;

	box-sizing:border-box;

	transition:all .25s ease;

	box-shadow:
		inset 0 0 25px rgba(255,255,255,.03),
		0 0 30px rgba(0,100,255,.08),
		0 12px 35px rgba(0,0,0,.45);
}



/* placeholder */

.datos::placeholder{
	color:#8ea9d9;
	font-weight:300;
	letter-spacing:.5px;
}



/* hover */

.datos:hover{
	border-color:rgba(130,190,255,.65);

	box-shadow:
		0 0 35px rgba(0,140,255,.16),
		0 15px 40px rgba(0,0,0,.5);
}



/* focus */

.datos:focus{

	transform:translateY(-2px) scale(1.01);

	border-color:#67a8ff;

	background:
		linear-gradient(180deg,
		rgba(14,32,62,.98),
		rgba(8,18,38,.98));

	box-shadow:
		0 0 0 4px rgba(80,140,255,.14),
		0 0 45px rgba(70,140,255,.28),
		0 18px 45px rgba(0,0,0,.6);
}



/* ===== SLIDER AREA ===== */

.slider-wrap{
	display:flex;
	justify-content:center;
	align-items:center;

	width:100%;

	margin-top:20px;
}



/* ===== MOBILE ===== */

@media(max-width:700px){

	.login-wrapper{
		margin-top:40px;
	}

	.login-title{
		padding:24px 16px;
	}

	.login-title h1{
		font-size:2.1rem;
		line-height:1.15;
	}

	.login-title span{
		font-size:.95rem;
	}

	.datos{
		height:68px;
		font-size:24px;
		border-radius:18px;
	}
}