/**
 * Banners internos 2026.
 * Alcance deliberadamente limitado a páginas internas; el home no carga
 * esta hoja de estilos.
 */

body.cosami-internal-banners :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	--cosami-banner-gradient: linear-gradient(105deg, #004b7c 0%, #087eb3 100%);
	background-color: #00558c;
	background-image: var(--cosami-banner-gradient);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 28px;
	isolation: isolate;
	overflow: hidden;
	padding: 84px 42px;
	position: relative;
}

body.cosami-internal-banners--savings :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	--cosami-banner-gradient: linear-gradient(105deg, #004b7c 0%, #079ed6 100%);
}

body.cosami-internal-banners--credit :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	--cosami-banner-gradient: linear-gradient(105deg, #079ed6 0%, #004b7c 100%);
}

body.cosami-internal-banners--fri :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	--cosami-banner-gradient: linear-gradient(105deg, #079ed6 0%, #48c8e8 100%);
}

body.cosami-internal-banners--general :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	--cosami-banner-gradient: linear-gradient(105deg, #004b7c 0%, #087eb3 100%);
}

body[class*="cosami-banner-pattern--"] :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-position: calc(100% - 58px) center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: 210px 210px, cover;
}

body.cosami-banner-pattern--totonicapan :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-image: url('../images/internal-banners/totonicapan-white.png'), var(--cosami-banner-gradient);
}

body.cosami-banner-pattern--quetzaltenango :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-image: url('../images/internal-banners/quetzaltenango-white.png'), var(--cosami-banner-gradient);
}

body.cosami-banner-pattern--nebaj :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-image: url('../images/internal-banners/nebaj-white.png'), var(--cosami-banner-gradient);
}

body.cosami-banner-pattern--solola :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-image: url('../images/internal-banners/solola-white.png'), var(--cosami-banner-gradient);
}

body.cosami-banner-pattern--retalhuleu :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-image: url('../images/internal-banners/retalhuleu-white.png'), var(--cosami-banner-gradient);
}

body.cosami-banner-pattern--suchitepequez :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-image: url('../images/internal-banners/suchitepequez-white.png'), var(--cosami-banner-gradient);
}

body.cosami-banner-position--right_top :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-position: calc(100% - 58px) 28px, center;
}

body.cosami-banner-position--right_bottom :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-position: calc(100% - 58px) calc(100% - 28px), center;
}

body.cosami-banner-position--bottom_right_crop :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-position: calc(100% + 36px) calc(100% + 36px), center;
	background-size: 205px 205px, cover;
}

body.cosami-banner-position--left_center :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) {
	background-position: 58px center, center;
}

body.cosami-internal-banners :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) .titulo_banner_principal {
	color: #fff;
	position: relative;
	z-index: 1;
}

body.cosami-internal-banners :is(
	.banner_azul,
	.banner_green,
	.seccion_banner_general,
	.banner__videoteca
) .cont_cta_banner_full {
	position: relative;
	z-index: 1;
}

body.cosami-internal-banners .cta_banners {
	background-color: #3dae2b;
	border: 2px solid #3dae2b;
	border-radius: 999px;
	color: #fff;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.cosami-internal-banners .cta_banners:hover,
body.cosami-internal-banners .cta_banners:focus-visible {
	background-color: #2f9221;
	border-color: #2f9221;
	color: #fff;
}

body.cosami-internal-banners .cta_banners:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media screen and (max-width: 767px) {
	body.cosami-internal-banners :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) {
		border-radius: 22px;
		padding: 52px 20px 76px;
	}

	body[class*="cosami-banner-pattern--"] :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) {
		background-position: calc(100% - 18px) calc(100% - 16px), center;
		background-size: 72px 72px, cover;
	}

	body.cosami-banner-position--bottom_right_crop :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) {
		background-position: calc(100% + 28px) calc(100% + 28px), center;
		background-size: 104px 104px, cover;
	}

	body.cosami-banner-position--right_top :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) {
		background-position: calc(100% - 18px) 16px, center;
	}

	body.cosami-banner-position--right_bottom :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) {
		background-position: calc(100% - 18px) calc(100% - 16px), center;
	}

	body.cosami-banner-position--left_center :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) {
		background-position: 18px calc(100% - 16px), center;
	}

	body.cosami-internal-banners :is(
		.banner_azul,
		.banner_green,
		.seccion_banner_general,
		.banner__videoteca
	) .titulo_banner_principal {
		font-size: 28px;
		line-height: 1.2;
	}
}