@font-face {
	font-family: 'Hurme Geometric Sans 4-Regular';
	src: url('../../fonts/HurmeGeometricSans4-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-Light';
	src: url('../../fonts/HurmeGeometricSans4-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-Black';
	src: url('../../fonts/HurmeGeometricSans4-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-LightOblique';
	src: url('../../fonts/HurmeGeometricSans4-LightObl.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Hurme Geometric Sans 4-SemiBold';
	src: url('../../fonts/HurmeGeometricSans4-SemiBold.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Hurme Geometric Sans 4-Black", Helvetica;
}

html,
body {
	width: 100%;
	height: 100%;
}

.inicio-de-sesion {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
	font-size: 24px;
}

.fondo-azul {
	position: absolute;
	width: 100%;
	min-height: 100vh;
	background-image: url(/images/fondo2000x2000.svg);
	background-repeat: no-repeat;
	background-size: cover;
	/* Mantiene la imagen sin cortes */
	background-position: center;
}

.container {
	display: flex;
	width: 100%;
	margin-top: 10%;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	align-items: center;
	left: auto;
	right: auto;
}

.logo-plataforma {
	display: flex;
	width: 100%;
	align-items: anchor-center;
	justify-content: center;
}

.logocorto {
	/*width: 20%;*/
	width: 45%;
}

.line {
	margin: 0 20px;
}

.plataforma-credito {
	display: flex;
	flex-direction: column;
	font-family: "Hurme Geometric Sans 4-Regular", Helvetica;
}

.span {
	color: #3e4a60;
}

.text-wrapper-5 {
	color: #3e5063;
	font-size: 33px;
}

.text-wrapper-6 {
	color: #3e4a60;
	font-size: 25px;
}

.text-wrapper-7 {
	color: #3e4a60;
	font-size: 45px;
}

.text-wrapper-8 {
	color: #536bb9;
	font-size: 2rem;
}

/*****************/
.cajaInicioSesion {
	width: 436px;
	margin-top: 1%;
	z-index: 1;
	position: relative;
}

.input-container {
	position: relative;
	width: 100%;

}

.input-container input {
 width: 100%;
 padding: 10px 50px;
 font-size: 16px;
 border-radius: 50px;
 outline: none;
 transition: border-color 0.3s;
 z-index: 3;
 border: 0px solid #fff;
 color: #777;
 box-shadow: 40px 16px 38px -14px #FA851440;
}

.input-container label {
	position: absolute;
	left: 50px;
	/* Para evitar que se sobreponga con el ícono */
	top: 50%;
	transform: translateY(-50%);
	font-family: "Hurme Geometric Sans 4-Regular", Helvetica;
	padding: 0 5px;
	font-size: 16px;
	color: #777;
	transition: 0.3s;
}

.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
	top: -20px;
	/* Más alto para separarlo */
	left: 10px;
	/* Mantiene la alineación */
	font-size: 12px;
	color: #536bb9;
	padding-bottom: 15px;
}

.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
	top: 0;
	font-size: 12px;
	color: #536bb9;
}

.input-container img {
	position: absolute;
	width: 18px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #777;
	margin: 0 10px;
}


.rectangle {
	border: none;
	box-shadow: 40px 16px 38px -14px #fa851426;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	border-radius: 50px;
}

.rectangle::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 4px;
	border-radius: 50px;
	background: linear-gradient(90deg, rgba(250, 133, 20, 1) 26%, rgba(154, 173, 252, 1) 55%, rgba(81, 105, 183, 1) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 1;
	pointer-events: none;
}

.input-contrasenia {
	margin-top: 5%;
}

.olvidateContrasenia {
	margin-bottom: 5px;
}

.olvidateContrasenia a {
	width: 100%;
	font-family: "Hurme Geometric Sans 4-LightOblique", Helvetica;
	font-weight: 300;
	color: #3e4a60;
	font-size: 14px;
	letter-spacing: 0;
	white-space: nowrap;
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.copy-wrap {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 15px;
}

.btn-ingresar {
	position: relative;
	background-color: #536bb9;
	width: 100%;
	height: 48px;
	top: 70%;
	left: 0;
	padding: 7px 0;
	border-radius: 50px;
	font-family: "Hurme Geometric Sans 4-SemiBold", Helvetica;
	font-weight: 600;
	color: #ffffff;
	font-size: 20px;
	letter-spacing: 0;
	line-height: normal;
	text-align: center;
	margin-top: 5%;

}

.Copyright {
	position: absolute;
	top: 1022px;
	left: 1459px;
	font-family: "Hurme Geometric Sans 4-Regular", Helvetica;
	font-weight: 400;
	color: #5169b7;
	font-size: 14px;
	letter-spacing: 0;
	line-height: normal;
	display: none;
}

.semcirculoAzul {
	width: 100%;
	position: fixed;
	display: flex;
	justify-content: flex-end;
}

.semcirculoAzul img {
	width: 17%;
}

.semcirculoNaranja {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.semcirculoNaranja img {
	width: 17%;
}

.btn-ingresar {
	position: relative;
	z-index: 10;
}
@media only screen and (max-width: 1400px) {

	.semcirculoNaranja img {
		width: 20%;
	}

	.semcirculoAzul img {
		width: 20%;
	}
}

@media only screen and (max-width: 976px) {
	.logocorto {
		width: 100%;
	}

	.semcirculoNaranja img {
		width: 22%;
	}

	.semcirculoAzul img {
		width: 22%;
	}

	.container {
		margin-top: 15%;
	}

	.cajaInicioSesion {
		width: 10%;
	}

	.text-wrapper-5 {
		font-size: 30px;
	}

	.text-wrapper-8 {
		font-size: 45px;
	}
}

@media only screen and (max-width: 850px) {
	.container {
		margin-top: 18%;
	}

	.logocorto {
		width: 100%;
	}
}

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

	.semcirculoNaranja img {
		width: 25%;
	}

	.semcirculoAzul img {
		width: 25%;
	}

	.container {
		margin-top: 160px;
	}

	.logocorto {
		width: 100%;
	}

	.text-wrapper-5 {
		font-size: 23px;
	}

	.text-wrapper-8 {
		font-size: 35px;
	}

	.cajaInicioSesion {
		width: 350px;
	}

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

		.semcirculoNaranja img {
			width: 25%;
		}

		.semcirculoAzul img {
			width: 25%;
		}

		.container {
			margin-top: 160px;
		}

		.logocorto {
			width: 100%;
		}

		.text-wrapper-5 {
			font-size: 20px;
		}

		.text-wrapper-8 {
			font-size: 30px;
		}

		.cajaInicioSesion {
			width: 320px;
		}
	}
}

.pais-badge,
.version-badge {
	font-size: 0.8rem;
	font-weight: 500;
	color: #2D398F;
	line-height: 1;
}

/***** Estilo para la banderita *****/
.flag-icon {
	width: 20px;
	height: auto;
	vertical-align: middle;
	padding-bottom: 10px;
}

.flag-row {
	margin-top: 0.25rem;
}