:root {
	--openSans-regular: openSans-regular;
	--openSans-BoldItalic: openSans-BoldItalic;
	--openSans-semibold: openSans-semibold;
	--openSans-Bold: openSans-Bold;
	--effra-light: effra-light;
	--effra-regular: effra-regular;
	--effra-bold: effra-bold;
	--helvetica: Helvetica;
	--roboto-bold: roboto-bold;
	--roboto-medium: roboto-medium;
	--roboto-regular: roboto-regular;
	--roboto-light: roboto-light;
	--black-color: #343434;
	--violet-color: #E31952;
	--white-color: white;
	--gray-color: #707070;
	--red-color: #E7192D;
	--gray-color-line: #e2dfdf;
	--gray-color-icon-blog: #9D9D9D;
	--background-gray-color: #F5F5F7;
	--background-blue-sky-color: #DFDEFF;
	--background-blue-light: #F1F0FF;
	--border-line-blogpost: #e3e3e3;
	--purple-color: #7037ce;
}


/* ****** fonts ******* */
@font-face {
	font-family: openSans-BoldItalic;
	src: url('/RS/assets/fonts/OpenSans-BoldItalic.ttf');
}

@font-face {
	font-family: openSans-regular;
	src: url('/RS/assets/fonts/OpenSans-Regular.ttf');
}

@font-face {
	font-family: openSans-semibold;
	src: url('/RS/assets/fonts/OpenSans-SemiBold.ttf');
}

@font-face {
	font-family: openSans-Bold;
	src: url('/RS/assets/fonts/OpenSans-Bold.ttf');
}

@font-face {
	font-family: helvetica-neue;
	src: url('/RS/assets/fonts/helvetica_regular.otf');
}


@font-face {
	font-family: effra-light;
	src: url('/RS/assets/fonts/Effra_Std_Lt.ttf');
}

@font-face {
	font-family: effra-regular;
	src: url('/RS/assets/fonts/Effra_Std_Rg.ttf');
}

@font-face {
	font-family: effra-bold;
	src: url('/RS/assets/fonts/Effra-Bold.ttf');
}


@font-face {
	font-family: roboto-bold;
	src: url('/RS/assets/fonts/Roboto-Bold.ttf');
}

@font-face {
	font-family: roboto-medium;
	src: url('/RS/assets/fonts/Roboto-Medium.ttf');
}

@font-face {
	font-family: roboto-regular;
	src: url('/RS/assets/fonts/Roboto-Regular.ttf');
}


@font-face {
	font-family: roboto-light;
	src: url('/RS/assets/fonts/Roboto-Light.ttf');
}


/* ***** */

.banner-flexidigital {
	background: linear-gradient(90deg, #BA2A53, #16267E);
	color: white;
	padding: 0px 8%;
	border-radius: 10px;
	position: relative;
	font-family: var(--roboto-medium);
	overflow: hidden;
}

.banner-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8%;
}

.text-section {
	flex: 1;
	min-width: 250px;
}

	.text-section h2 {
		font-size: 1.8rem;
		margin: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
	}

.inline-logo {
	height: 1.9rem;
	vertical-align: middle;
}

.text-section p {
	margin-top: 10px;
	font-size: 1rem;
}

.image-section {
	flex-shrink: 0;
	height: 100%;
	display: flex;
	align-items: stretch;
}

.card-img {
	height: 100%;
	max-height: 120px;
	object-fit: contain;
}

.cta-section {
	flex-shrink: 0;
}

.cta-btn {
	background-color: white;
	color: #000;
	font-weight: bold;
	font-family: var(--roboto-bold);
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.close-btn {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 24px;
	color: white;
	background: none;
	border: none;
	cursor: pointer;
}

@media (max-width: 768px) {

	.banner-flexidigital {
		padding: 8%;
	}
	.banner-content {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.text-section {
		order: 1;
		height: auto;
	}
	.text-section h2 {
		justify-content: center;
	}

		.text-section p {
			margin-top: 20px;
			margin-bottom: 20px;
			font-size: 1rem;
		}

	.image-section {
		order: 2;
		height: auto;
	}

	.cta-section {
		order: 3;
		height: auto;
	}

	.card-img {
		max-height: 100%;
		height: 100%;
		content: url("/RS/build/img/finanblog/promo/tarjeta-flexi-mobile.png");
	}
}


@media (min-width: 1920px) {

	.banner-content {
		gap: 22%;
	}
}