/* Banner de conversion de la home (modulos/banner-conversion-home.php).
   Todo va dentro de .bch para no tocar el hero (.asisa-home-hero) ni el resto de la web.
   Orden:
     - el fondo azul ocupa todo el ancho de la pagina y el contenido va dentro del .container;
     - escritorio (>= 992px): a la izquierda, el titulo, el selector de seguros y los pasos y,
       a la derecha, la tarjeta blanca del seguro elegido (foto con el precio, ventajas y boton);
     - tablet y movil: todo en una columna, el selector en dos filas de tres y la tarjeta debajo.
   Debajo, separada por una linea, la franja de confianza y el telefono. */

.bch {
	--bch-azulon: #0c1a2f;
	--bch-azul: #1c4a82;
	--bch-azul-claro: #3098cf;
	--bch-naranja: #ff5400;
	--bch-naranja-osc: #e04a00;
	--bch-crema: #ffd9a8;
	--bch-verde: #22c27a;
	--bch-texto: #1d2b3f;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 64px 0 40px;
	background: linear-gradient(135deg, var(--bch-azulon) 0%, #13305a 55%, var(--bch-azul) 100%);
	color: #fff;
}

/* ---------- Contenido (el fondo azul es de toda la seccion) ---------- */
.bch-caja {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}
/* Luces de fondo */
.bch::before,
.bch::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.bch::before {
	top: -160px;
	right: -120px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(48, 152, 207, .45) 0%, transparent 70%);
}
.bch::after {
	bottom: -180px;
	left: -120px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(255, 84, 0, .22) 0%, transparent 70%);
}

/* ---------- Textos ---------- */
.bch-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--bch-crema);
}
.bch-eyebrow-punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bch-verde);
	box-shadow: 0 0 0 0 rgba(34, 194, 122, .6);
	animation: bch-latido 2s infinite;
}
@keyframes bch-latido {
	0% { box-shadow: 0 0 0 0 rgba(34, 194, 122, .6); }
	70% { box-shadow: 0 0 0 9px rgba(34, 194, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 194, 122, 0); }
}
.bch-h2 {
	margin: 0 0 12px;
	font-size: clamp(1.65rem, 2.8vw, 2.35rem);
	font-weight: 800;
	line-height: 1.12;
	color: #fff;
}
.bch-h2 span {
	color: var(--bch-naranja);
}
.bch-lead {
	max-width: 520px;
	margin: 0 0 26px;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

/* ---------- Selector de seguros ---------- */
.bch-pregunta {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bch-crema);
}
.bch-pestanas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	max-width: 540px;
}
.bch-pestana {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 14px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	font-size: .98rem;
	font-weight: 600;
	color: #fff;
	text-align: left;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s, color .2s, box-shadow .2s;
}
.bch-pestana i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	font-size: 1rem;
	color: var(--bch-crema);
	transition: background .2s, color .2s;
}
.bch-pestana:hover {
	border-color: rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .13);
	transform: translateY(-2px);
}
.bch-pestana:focus-visible {
	outline: 3px solid var(--bch-crema);
	outline-offset: 2px;
}
.bch-pestana[aria-selected="true"] {
	border-color: #fff;
	background: #fff;
	color: var(--bch-azul);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.bch-pestana[aria-selected="true"] i {
	background: var(--bch-naranja);
	color: #fff;
}

/* ---------- Pasos ---------- */
.bch-pasos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	color: rgba(255, 255, 255, .78);
}
.bch-pasos li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bch-pasos span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	font-size: .78rem;
	font-weight: 700;
	color: #fff;
}

/* ---------- Tarjeta del seguro elegido ---------- */
.bch-panel {
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
	color: var(--bch-texto);
	animation: bch-entra .35s ease;
}
.bch-panel[hidden] {
	display: none;
}
@keyframes bch-entra {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.bch-foto {
	position: relative;
	height: 230px;
}
.bch-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.bch-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(12, 26, 47, .55) 0%, transparent 55%);
}
.bch-precio {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 14px;
	border-radius: 16px;
	background: var(--bch-naranja);
	box-shadow: 0 10px 24px rgba(255, 84, 0, .35);
	color: #fff;
	line-height: 1;
}
.bch-precio-desde {
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.bch-precio-num {
	font-size: 2rem;
	font-weight: 800;
	white-space: nowrap;
}
.bch-precio-dec {
	font-size: 1.1rem;
	font-weight: 700;
}
.bch-precio-unidad {
	font-size: .76rem;
	line-height: 1.2;
	opacity: .92;
}
.bch-panel-cuerpo {
	padding: 22px 26px 24px;
}
.bch-producto {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--bch-azul);
}
.bch-producto i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 84, 0, .1);
	font-size: 1rem;
	color: var(--bch-naranja);
}
.bch-panel-titulo {
	margin: 0 0 14px;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bch-azul);
}
.bch-panel-titulo em {
	font-style: normal;
	color: var(--bch-azul-claro);
}
.bch-ventajas {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.bch-ventajas li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
	font-size: .98rem;
	color: var(--bch-texto);
}
.bch-ventajas i {
	margin-top: 3px;
	color: var(--bch-verde);
}

/* ---------- Botones ---------- */
.bch-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--bch-naranja);
	box-shadow: 0 12px 26px rgba(255, 84, 0, .32);
	font-size: 1.08rem;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none !important;
	transition: background .2s, transform .2s, box-shadow .2s;
}
/* Brillo que cruza el boton */
.bch-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg);
	animation: bch-brillo 3.8s ease-in-out infinite;
}
@keyframes bch-brillo {
	0%, 60% { left: -60%; }
	100% { left: 130%; }
}
.bch-cta:hover {
	background: var(--bch-naranja-osc);
	box-shadow: 0 16px 32px rgba(255, 84, 0, .4);
	transform: translateY(-2px);
}
.bch-cta-flecha {
	transition: transform .2s;
}
.bch-cta:hover .bch-cta-flecha {
	transform: translateX(4px);
}
.bch-mas {
	display: block;
	margin-top: 12px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--bch-azul) !important;
	text-align: center;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.bch-mas:hover {
	color: var(--bch-azul-claro) !important;
}

/* ---------- Confianza y contacto ---------- */
.bch-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 30px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.bch-confianza {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bch-confianza li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
}
.bch-confianza i {
	color: var(--bch-crema);
}
.bch-contacto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	font-size: .92rem;
	color: rgba(255, 255, 255, .75);
}
.bch-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bch-azul) !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s;
}
.bch-tel:hover {
	background: var(--bch-crema);
}
.bch-llamada {
	font-weight: 600;
	color: var(--bch-crema) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
	.bch {
		padding: 44px 0 32px;
	}
	.bch-caja {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.bch-intro {
		text-align: center;
	}
	.bch-lead,
	.bch-pestanas {
		margin-left: auto;
		margin-right: auto;
	}
	.bch-pasos {
		justify-content: center;
	}
	.bch-paneles {
		max-width: 560px;
		width: 100%;
		margin: 0 auto;
	}
	.bch-pie {
		justify-content: center;
		text-align: center;
	}
	.bch-confianza,
	.bch-contacto {
		justify-content: center;
	}
}

/* ---------- Movil ---------- */
@media (max-width: 575.98px) {
	.bch {
		padding: 32px 0 24px;
	}
	.bch-eyebrow {
		font-size: .74rem;
	}
	.bch-pregunta {
		font-size: 1.05rem;
	}
	.bch-lead {
		font-size: .98rem;
		margin-bottom: 20px;
	}
	.bch-pestanas {
		gap: 8px;
	}
	.bch-pestana {
		flex-direction: column;
		gap: 6px;
		padding: 10px 4px;
		font-size: .86rem;
		text-align: center;
	}
	.bch-pasos {
		display: none;
	}
	.bch-foto {
		height: 190px;
	}
	.bch-precio-num {
		font-size: 1.7rem;
	}
	.bch-panel-cuerpo {
		padding: 18px 18px 20px;
	}
	.bch-producto {
		font-size: 1.3rem;
	}
	.bch-panel-titulo {
		font-size: 1rem;
	}
	.bch-cta {
		font-size: 1rem;
		padding: 15px 14px;
	}
	.bch-confianza {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		text-align: left;
	}
	.bch-confianza li {
		font-size: .85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bch-eyebrow-punto,
	.bch-cta::after,
	.bch-panel {
		animation: none;
	}
	.bch-pestana,
	.bch-cta {
		transition: none;
	}
}