/* Banner con imagen y tarificador de salud (modulos/banner-tarificador-imagen.php).
   Todo va dentro de .bti para no tocar el resto de la web ni los otros dos banners (.hero-hub-asisa-v2 y .bta).
   La foto es un <img> (.bti-foto), no un background: va por debajo de los textos y del formulario.
   Orden:
     - pantallas grandes (>= 1800px): la foto a la izquierda, a la vista, y a su derecha los textos y el formulario
       sobre el azul de la marca, que se funde con la foto;
     - escritorio (992-1599px): la foto ocupa todo el banner, oscurecida por la izquierda para leer los textos,
       y el formulario a la derecha;
     - tablet y movil: la foto arriba como una franja, el h1 encima de su parte baja, el formulario y, debajo,
       las ventajas. */

.bti {
	--bti-azulon: #0c1a2f;
	--bti-azul: #1c4a82;
	--bti-azul-claro: #3098cf;
	--bti-naranja: #ff5400;
	--bti-crema: #ffd9a8;
	--bti-verde: #22c27a;
	--bti-foto-ancho: 100%;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--bti-azulon);
	color: #fff;
}

/* ---------- Foto ---------- */
.bti-foto {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	width: var(--bti-foto-ancho);
}
.bti-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 22% 30%;
}
/* Velo para leer los textos: oscuro por la izquierda, donde van, y aclarandose hacia el formulario */
.bti::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(12, 26, 47, .9) 0%, rgba(12, 26, 47, .74) 40%, rgba(12, 26, 47, .4) 70%, rgba(12, 26, 47, .25) 100%),
		linear-gradient(0deg, rgba(12, 26, 47, .55) 0%, transparent 35%);
}
/* Un toque calido de la luz de la foto */
.bti::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	z-index: -1;
	width: 55%;
	height: 90%;
	background: radial-gradient(closest-side, rgba(255, 140, 60, .22), transparent);
	pointer-events: none;
}

.bti-contenido {
	max-width: 1320px;
	margin: 0 auto;
	padding: 64px 24px 60px;
}
.bti-caja {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
	gap: 56px;
	align-items: center;
}
/* En escritorio el formulario va mas ancho: con mas de 520px de hueco se pone en tres columnas (nombre, telefono
   y email en una fila...) y el banner queda mucho mas bajo */
@media (min-width: 1200px) {
	.bti-contenido { max-width: 1500px; padding: 56px 40px 52px; }
	.bti-caja { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 44px; }
	/* Los textos ocupan todo su hueco (antes iban a 540-560px), y asi bajan de alto */
	.bti h2.bti-h2, .bti-lead, .bti-ventajas { max-width: 720px; }
}

/* ---------- Textos ---------- */
.bti-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 7px 15px 7px 9px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}
.bti-eyebrow-punto {
	position: relative;
	width: 10px;
	height: 10px;
	margin: 0 2px 0 4px;
	border-radius: 50%;
	background: var(--bti-verde);
}
.bti-eyebrow-punto::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--bti-verde);
	opacity: 0;
	animation: bti-latido 2s ease-out infinite;
}
@keyframes bti-latido {
	0% { transform: scale(.6); opacity: .9; }
	100% { transform: scale(1.6); opacity: 0; }
}

.bti h1.bti-h1 {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(34px, 3.8vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.025em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.bti-h1 span,
.bti h1.bti-h1 span {   /* el segundo, para ganar a los «h1 span» de las landings (bloque y mas pequeño) */
	display: inline;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	background: linear-gradient(90deg, #ffc48a, #ff7a2f);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.bti h2.bti-h2 {
	margin: 0 0 16px;
	max-width: 560px;
	color: rgba(255, 255, 255, .95);
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}
.bti-h2 em {
	font-style: normal;
	color: var(--bti-crema);
	box-shadow: inset 0 -.32em 0 rgba(255, 84, 0, .35);
}
.bti-lead {
	margin: 0 0 24px;
	max-width: 540px;
	color: rgba(255, 255, 255, .84);
	font-size: 17px;
	line-height: 1.55;
}
.bti-lead strong { color: #fff; }

/* ---------- Precio desde ---------- */
.bti-precio {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	padding: 12px 22px 12px 18px;
	border-radius: 18px;
	background: #fff;
	color: var(--bti-azulon);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	transform: rotate(-1.5deg);
}
.bti-precio-desde {
	padding: 6px 10px;
	border-radius: 10px;
	background: var(--bti-naranja);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.15;
	max-width: 70px;
	text-align: center;
}
.bti-precio-num { font-size: 40px; font-weight: 800; line-height: 1; white-space: nowrap; letter-spacing: -.02em; }
.bti-precio-dec { font-size: 22px; }
.bti-precio-mes { color: #5d6b82; font-size: 13px; line-height: 1.25; }
/* Precio de referencia de un perfil (modulos/precios-referencia-banner.php) y su aclaración, debajo */
.bti-precio--ref .bti-precio-desde { max-width: 96px; }
.bti-precio-nota { max-width: 460px; margin: -10px 0 24px; color: rgba(255, 255, 255, .8); font-size: 12.5px; line-height: 1.45; }
.bti-precio-nota strong { color: #fff; font-weight: 700; }

/* ---------- Ventajas ---------- */
.bti-ventajas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	max-width: 560px;
}
.bti-ventajas li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .94);
}
.bti-ventajas i {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bti-verde);
	color: #fff;
	font-size: 11px;
}

/* ---------- Telefono ---------- */
.bti-telefono {
	display: flex;
	align-items: center;
	gap: 14px;
	color: rgba(255, 255, 255, .8);
	font-size: 13.5px;
	line-height: 1.35;
}
.bti-telefono a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s;
}
.bti-telefono a:hover { background: #fff; border-color: #fff; color: var(--bti-azulon); }

/* ---------- Sello sobre la foto (solo pantallas grandes) ---------- */
.bti-sello {
	display: none;
	position: absolute;
	left: 3%;
	top: 40px;
	z-index: 1;
	align-items: center;
	gap: 12px;
	max-width: 290px;
	padding: 12px 18px 12px 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .94);
	color: #5d6b82;
	font-size: 13px;
	line-height: 1.3;
	box-shadow: 0 16px 36px rgba(0, 0, 0, .25);
}
.bti-sello strong { display: block; color: var(--bti-azulon); font-size: 15px; }
.bti-sello-icono {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #ffe9dc;
	color: var(--bti-naranja);
	font-size: 19px;
}

/* ---------- Tarjeta del formulario ---------- */
.bti-form {
	position: relative;
	padding: 28px 26px 20px;
	border-radius: 24px;
	background: #fff;
	color: #1b2433;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 34px 70px rgba(0, 0, 0, .45);
}
.bti-form-cinta {
	position: absolute;
	top: -15px;
	left: 26px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 15px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff7a2f, var(--bti-naranja));
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 8px 18px rgba(255, 84, 0, .45);
}
.bti-form-cab { margin: 4px 0 12px; }
.bti-form-titulo { margin: 0; color: var(--bti-azulon); font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.bti-form-sub { margin: 3px 0 0; color: #5d6b82; font-size: 13.5px; }

/* El formulario del banner, sin su cabecera ni su sombra (ya van en la tarjeta) */
.bti .tsrb { max-width: none; }
/* De la cabecera del formulario solo se ven los pasos («1 Tus datos · 2 Precios»), en claro sobre la tarjeta
   blanca; el titulo ya va en .bti-form-cab */
.bti .tsrb-cabecera {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	box-shadow: none;
	overflow: visible;
}
.bti .tsrb-cabecera::after,
.bti .tsrb-cabecera-icono,
.bti .tsrb-cabecera-texto { display: none; }
.bti .tsrb-pasos {
	display: inline-flex;
	order: 0;
	width: auto;
	padding: 4px;
	border: 1px solid #e3e9f2;
	background: #f1f5fa;
}
.bti .tsrb-pasos li { margin: 0; color: #5d6b82; font-size: 13px; }
.bti .tsrb-pasos li span { background: #dde4ee; color: #5d6b82; }
.bti .tsrb-pasos li.activo { background: #fff; color: var(--bti-azulon); box-shadow: 0 2px 6px rgba(14, 36, 72, .12); }
.bti .tsrb-pasos li.activo span { background: var(--bti-naranja); color: #fff; }
.bti .tsrb-tarjeta { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
/* Boton grande y naranja: es la accion principal del banner */
.bti .tsrb-enviar {
	height: 58px;
	font-size: 18px;
	border-radius: 14px;
	background: linear-gradient(90deg, #ff7a2f, var(--bti-naranja));
	box-shadow: 0 12px 26px rgba(255, 84, 0, .35);
	animation: bti-boton 3.5s ease-in-out 2s infinite;
}
.bti .tsrb-enviar:hover { filter: brightness(1.05); }
@keyframes bti-boton {
	0%, 86%, 100% { transform: none; }
	90% { transform: scale(1.025); }
	94% { transform: scale(.99); }
}

/* ---------- Pantallas grandes: la foto a la vista a la izquierda ----------
   Aqui la foto es asisa-salud-familia.webp, un recorte de la familia de asisa-salud.webp, para que quepa
   entera en su hueco. */
@media (min-width: 1800px) {
	/* La foto, algo mas estrecha (38%) para dejar mas sitio a los textos y al formulario */
	.bti { --bti-foto-ancho: 38%; }
	.bti-foto img { object-position: 29% 30%; }
	/* La foto se funde con el azul hacia la derecha */
	.bti::before {
		background:
			linear-gradient(90deg, transparent 0%, transparent 25%, rgba(12, 26, 47, .75) 32%, var(--bti-azulon) 38%),
			linear-gradient(0deg, rgba(12, 26, 47, .45) 0%, transparent 30%);
	}
	.bti::after { right: -5%; width: 45%; }
	.bti-contenido { max-width: none; padding: 64px 3vw 60px calc(31% + 24px); }
	.bti-caja { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 44px; max-width: 1260px; }
	.bti-sello { display: flex; }
}

/* ---------- Tablet y movil: la foto arriba ---------- */
@media (max-width: 991.98px) {
	.bti { --bti-foto-ancho: 100%; }
	.bti-foto { position: relative; display: block; height: 300px; }
	.bti-foto img { object-position: 50% 25%; }
	.bti::before {
		bottom: auto;
		height: 300px;
		background: linear-gradient(0deg, var(--bti-azulon) 0%, rgba(12, 26, 47, .55) 38%, rgba(12, 26, 47, .05) 75%);
	}
	.bti::after { display: none; }
	.bti-contenido { margin-top: -120px; padding: 0 20px 44px; }
	.bti-caja { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	/* Titulo y precio, luego el formulario y, debajo, ventajas y telefono */
	.bti-textos { display: contents; }
	.bti-eyebrow, .bti-h1, .bti-h2, .bti-lead, .bti-precio { order: 1; }
	.bti-form { order: 2; margin-top: 14px; }
	.bti-ventajas, .bti-telefono { order: 3; }
	.bti-eyebrow { justify-self: start; margin: 0; }
	.bti h1.bti-h1, .bti h2.bti-h2, .bti-lead, .bti-precio, .bti-ventajas { margin: 0; }
	.bti-caja { gap: 14px; }
	.bti-precio { justify-self: start; margin-top: 4px; }
	.bti-precio-nota { order: 1; margin: 0; }
	.bti-ventajas { margin-top: 10px; }
}
@media (max-width: 767.98px) {
	.bti-foto, .bti::before { height: 260px; }
	.bti-foto img { object-position: 50% 20%; }
}
@media (max-width: 575.98px) {
	.bti-foto, .bti::before { height: 270px; }
	.bti-foto img { object-position: 50% 10%; }
	.bti-contenido { margin-top: -84px; padding: 0 14px 36px; }
	.bti-lead { font-size: 16px; }
	.bti-precio { transform: none; }
	.bti-precio-num { font-size: 34px; }
	.bti-form { padding: 24px 14px 16px; border-radius: 18px; }
	.bti-form-titulo { font-size: 21px; }
	.bti-ventajas { grid-template-columns: 1fr; }
	.bti-telefono { flex-direction: column; align-items: flex-start; }
}
/* ---------- Autonomos y pymes (modulos/banner-tarificador-imagen-autonomos.php): solo cambia el encuadre de su foto */
.bti--autonomos .bti-foto img { object-position: 34% 25%; }
@media (min-width: 1800px) {
	.bti--autonomos .bti-foto img { object-position: 62% 25%; }
}
@media (max-width: 991.98px) {
	.bti--autonomos .bti-foto img { object-position: 40% 20%; }
}
@media (max-width: 767.98px) {
	.bti--autonomos .bti-foto img { object-position: 50% 12%; }
}

/* ---------- Dental (modulos/banner-tarificador-imagen-dental.php): solo cambia el encuadre de su foto */
.bti--dental .bti-foto img { object-position: 30% 25%; }
@media (min-width: 1800px) {
	.bti--dental .bti-foto img { object-position: 60% 25%; }
}
@media (max-width: 991.98px) {
	.bti--dental .bti-foto img { object-position: 35% 20%; }
}
@media (max-width: 767.98px) {
	.bti--dental .bti-foto img { object-position: 60% 15%; }
}

/* ---------- Vida (modulos/banner-tarificador-imagen-vida.php): solo cambia el encuadre de su foto */
.bti--vida .bti-foto img { object-position: 20% 30%; }
@media (min-width: 1800px) {
	.bti--vida .bti-foto img { object-position: 78% 30%; }
}
@media (max-width: 991.98px) {
	.bti--vida .bti-foto img { object-position: 25% 25%; }
}
@media (max-width: 767.98px) {
	.bti--vida .bti-foto img { object-position: 50% 20%; }
}
/* El formulario de vida va en filas de tres y aqui cabe en dos columnas: el tercer campo de cada fila
   (profesion y «¿Cuando empezar?») ocupa la fila entera en vez de dejar un hueco. Con «Otro importe» la fila del
   capital ya tiene cuatro campos y se queda de dos en dos. Vale para todos los banners con el formulario de vida
   (.bti--vida y .bti--hipoteca). Solo cuando el formulario va en dos columnas (hueco de 520px o menos); con mas
   hueco va en tres y no hace falta. */
@container (max-width: 520px) {
	.bti .tvrb .tsrb-fila:not(.tsrb-contacto) > .tsr-campo:last-child { flex-basis: 100%; }
	.bti .tvrb .tsrb-fila:has(.tvr-otro:not([hidden])) > .tsr-campo:last-child { flex-basis: calc((100% - var(--hueco)) / 2); }
}

/* ---------- Viaje (modulos/banner-tarificador-imagen-viaje.php): solo cambia el encuadre de su foto */
.bti--viaje .bti-foto img { object-position: 28% 30%; }
@media (min-width: 1800px) {
	.bti--viaje .bti-foto img { object-position: 45% 30%; }
}
@media (max-width: 991.98px) {
	.bti--viaje .bti-foto img { object-position: 35% 20%; }
}
@media (max-width: 767.98px) {
	.bti--viaje .bti-foto img { object-position: 50% 20%; }
}

/* ---------- Mascotas (modulos/banner-tarificador-imagen-mascotas.php): solo cambia el encuadre de su foto */
.bti--mascotas .bti-foto img { object-position: 30% 40%; }
@media (min-width: 1800px) {
	.bti--mascotas .bti-foto img { object-position: 50% 40%; }
}
@media (max-width: 991.98px) {
	.bti--mascotas .bti-foto img { object-position: 35% 30%; }
}
@media (max-width: 767.98px) {
	.bti--mascotas .bti-foto img { object-position: 50% 30%; }
}

/* ---------- Extranjeros (modulos/banner-tarificador-imagen-extranjeros.php): solo cambia el encuadre de su foto */
.bti--extranjeros .bti-foto img { object-position: 28% 25%; }
@media (min-width: 1800px) {
	.bti--extranjeros .bti-foto img { object-position: 50% 25%; }
}
@media (max-width: 991.98px) {
	.bti--extranjeros .bti-foto img { object-position: 35% 20%; }
}
@media (max-width: 767.98px) {
	.bti--extranjeros .bti-foto img { object-position: 50% 15%; }
}

/* ---------- Internacional (modulos/banner-tarificador-imagen-internacional.php): solo cambia el encuadre de su foto */
.bti--internacional .bti-foto img { object-position: 28% 25%; }
@media (min-width: 1800px) {
	.bti--internacional .bti-foto img { object-position: 52% 25%; }
}
@media (max-width: 991.98px) {
	.bti--internacional .bti-foto img { object-position: 32% 20%; }
}
@media (max-width: 767.98px) {
	.bti--internacional .bti-foto img { object-position: 50% 15%; }
}

/* ---------- Funcionarios (modulos/banner-tarificador-imagen-funcionarios.php): solo cambia el encuadre de su foto */
.bti--funcionarios .bti-foto img { object-position: 30% 35%; }
@media (min-width: 1800px) {
	.bti--funcionarios .bti-foto img { object-position: 50% 35%; }
}
@media (max-width: 991.98px) {
	.bti--funcionarios .bti-foto img { object-position: 35% 30%; }
}
@media (max-width: 767.98px) {
	.bti--funcionarios .bti-foto img { object-position: 50% 30%; }
}

/* ---------- Familiar (modulos/banner-tarificador-imagen-familiar.php): solo cambia el encuadre de su foto */
.bti--familiar .bti-foto img { object-position: 25% 25%; }
@media (min-width: 1800px) {
	.bti--familiar .bti-foto img { object-position: 50% 25%; }
}
@media (max-width: 991.98px) {
	.bti--familiar .bti-foto img { object-position: 30% 20%; }
}
@media (max-width: 767.98px) {
	.bti--familiar .bti-foto img { object-position: 50% 15%; }
}

/* ---------- Niños (modulos/banner-tarificador-imagen-ninos.php): solo cambia el encuadre de su foto */
.bti--ninos .bti-foto img { object-position: 30% 20%; }
@media (min-width: 1800px) {
	.bti--ninos .bti-foto img { object-position: 50% 20%; }
}
@media (max-width: 991.98px) {
	.bti--ninos .bti-foto img { object-position: 35% 20%; }
}
@media (max-width: 767.98px) {
	.bti--ninos .bti-foto img { object-position: 50% 20%; }
}

/* ---------- Embarazadas (modulos/banner-tarificador-imagen-embarazadas.php): solo cambia el encuadre de su foto */
.bti--embarazadas .bti-foto img { object-position: 25% 50%; }
@media (min-width: 1800px) {
	.bti--embarazadas .bti-foto img { object-position: 50% 50%; }
}
@media (max-width: 991.98px) {
	.bti--embarazadas .bti-foto img { object-position: 30% 80%; }
}
@media (max-width: 767.98px) {
	.bti--embarazadas .bti-foto img { object-position: 50% 90%; }
}

/* ---------- Sin copagos (modulos/banner-tarificador-imagen-sin-copagos.php): solo cambia el encuadre de su foto */
.bti--sin-copagos .bti-foto img { object-position: 25% 30%; }
@media (min-width: 1800px) {
	.bti--sin-copagos .bti-foto img { object-position: 50% 30%; }
}
@media (max-width: 991.98px) {
	.bti--sin-copagos .bti-foto img { object-position: 30% 25%; }
}
@media (max-width: 767.98px) {
	.bti--sin-copagos .bti-foto img { object-position: 50% 25%; }
}

/* ---------- Barato (modulos/banner-tarificador-imagen-barato.php, landing/barato.php): solo cambia el encuadre */
.bti--barato .bti-foto img { object-position: 25% 30%; }
@media (min-width: 1800px) {
	.bti--barato .bti-foto img { object-position: 50% 30%; }
}
@media (max-width: 991.98px) {
	.bti--barato .bti-foto img { object-position: 30% 25%; }
}
@media (max-width: 767.98px) {
	.bti--barato .bti-foto img { object-position: 50% 25%; }
}

/* ---------- Landing de autonomos (modulos/banner-tarificador-imagen-landing-autonomos.php): solo cambia el encuadre */
.bti--landing-autonomos .bti-foto img { object-position: 35% 25%; }
@media (min-width: 1800px) {
	.bti--landing-autonomos .bti-foto img { object-position: 50% 25%; }
}
@media (max-width: 991.98px) {
	.bti--landing-autonomos .bti-foto img { object-position: 40% 20%; }
}
@media (max-width: 767.98px) {
	.bti--landing-autonomos .bti-foto img { object-position: 50% 20%; }
}

/* ---------- Con copago (modulos/banner-tarificador-imagen-con-copago.php, landing/con-copago.php): solo el encuadre */
.bti--con-copago .bti-foto img { object-position: 30% 50%; }
@media (min-width: 1800px) {
	.bti--con-copago .bti-foto img { object-position: 50% 50%; }
}
@media (max-width: 991.98px) {
	.bti--con-copago .bti-foto img { object-position: 35% 50%; }
}
@media (max-width: 767.98px) {
	.bti--con-copago .bti-foto img { object-position: 50% 50%; }
}

/* ---------- ASISA Ya (modulos/banner-tarificador-imagen-asisa-ya.php, asisa-ya.php): solo el encuadre */
.bti--asisa-ya .bti-foto img { object-position: 25% 30%; }
@media (min-width: 1800px) {
	.bti--asisa-ya .bti-foto img { object-position: 50% 30%; }
}
@media (max-width: 991.98px) {
	.bti--asisa-ya .bti-foto img { object-position: 25% 20%; }
}
@media (max-width: 767.98px) {
	.bti--asisa-ya .bti-foto img { object-position: 50% 20%; }
}

/* ---------- ASISA Esencial (modulos/banner-tarificador-imagen-asisa-esencial.php, asisa-esencial.php): el encuadre */
.bti--asisa-esencial .bti-foto img { object-position: 20% 30%; }
@media (min-width: 1800px) {
	.bti--asisa-esencial .bti-foto img { object-position: 45% 30%; }
}
@media (max-width: 991.98px) {
	.bti--asisa-esencial .bti-foto img { object-position: 20% 25%; }
}
@media (max-width: 767.98px) {
	.bti--asisa-esencial .bti-foto img { object-position: 40% 25%; }
}

/* ---------- ASISA Completa (modulos/banner-tarificador-imagen-asisa-completa.php, asisa-completa.php): el encuadre */
.bti--asisa-completa .bti-foto img { object-position: 20% 30%; }
@media (min-width: 1800px) {
	.bti--asisa-completa .bti-foto img { object-position: 45% 30%; }
}
@media (max-width: 991.98px) {
	.bti--asisa-completa .bti-foto img { object-position: 20% 30%; }
}
@media (max-width: 767.98px) {
	.bti--asisa-completa .bti-foto img { object-position: 40% 30%; }
}

/* ---------- ASISA Completa + (modulos/banner-tarificador-imagen-asisa-completa-plus.php, asisa-completa-plus.php): el encuadre */
.bti--asisa-completa-plus .bti-foto img { object-position: 45% 50%; }
@media (min-width: 1800px) {
	.bti--asisa-completa-plus .bti-foto img { object-position: 50% 50%; }
}
@media (max-width: 991.98px) {
	.bti--asisa-completa-plus .bti-foto img { object-position: 40% 50%; }
}
@media (max-width: 767.98px) {
	.bti--asisa-completa-plus .bti-foto img { object-position: 45% 50%; }
}

/* ---------- ASISA Completa ++ (modulos/banner-tarificador-imagen-asisa-completa-plus-plus.php, asisa-completa-plus-plus.php): el encuadre */
.bti--asisa-completa-plus-plus .bti-foto img { object-position: 25% 35%; }
@media (min-width: 1800px) {
	.bti--asisa-completa-plus-plus .bti-foto img { object-position: 10% 35%; }
}
@media (max-width: 991.98px) {
	.bti--asisa-completa-plus-plus .bti-foto img { object-position: 25% 30%; }
}
@media (max-width: 767.98px) {
	.bti--asisa-completa-plus-plus .bti-foto img { object-position: 35% 30%; }
}

/* ---------- ASISA Integral (modulos/banner-tarificador-imagen-asisa-integral.php, asisa-integral.php): el encuadre */
.bti--asisa-integral .bti-foto img { object-position: 15% 60%; }
@media (min-width: 1800px) {
	.bti--asisa-integral .bti-foto img { object-position: 40% 60%; }
}
@media (max-width: 991.98px) {
	.bti--asisa-integral .bti-foto img { object-position: 15% 60%; }
}
@media (max-width: 767.98px) {
	.bti--asisa-integral .bti-foto img { object-position: 25% 60%; }
}

/* ---------- ASISA Próxima Pymes (modulos/banner-tarificador-imagen-autonomos-proxima-pymes.php, autonomos-pymes/proxima-pymes.php): el encuadre */
.bti--autonomos-proxima-pymes .bti-foto img { object-position: 34% 25%; }
@media (min-width: 1800px) {
	.bti--autonomos-proxima-pymes .bti-foto img { object-position: 62% 25%; }
}
@media (max-width: 991.98px) {
	.bti--autonomos-proxima-pymes .bti-foto img { object-position: 40% 20%; }
}
@media (max-width: 767.98px) {
	.bti--autonomos-proxima-pymes .bti-foto img { object-position: 50% 12%; }
}

/* ---------- ASISA Próxima Pymes Plus (modulos/banner-tarificador-imagen-autonomos-proxima-pymes-plus.php, autonomos-pymes/proxima-pymes-plus.php): el encuadre */
.bti--autonomos-proxima-pymes-plus .bti-foto img { object-position: 20% 25%; }
@media (min-width: 1800px) {
	.bti--autonomos-proxima-pymes-plus .bti-foto img { object-position: 45% 25%; }
}
@media (max-width: 991.98px) {
	.bti--autonomos-proxima-pymes-plus .bti-foto img { object-position: 20% 20%; }
}
@media (max-width: 767.98px) {
	.bti--autonomos-proxima-pymes-plus .bti-foto img { object-position: 30% 15%; }
}

/* ---------- ASISA Salud Pymes (modulos/banner-tarificador-imagen-autonomos-salud-pymes.php, autonomos-pymes/salud-pymes.php): el encuadre */
.bti--autonomos-salud-pymes .bti-foto img { object-position: 25% 25%; }
@media (min-width: 1800px) {
	.bti--autonomos-salud-pymes .bti-foto img { object-position: 45% 25%; }
}
@media (max-width: 991.98px) {
	.bti--autonomos-salud-pymes .bti-foto img { object-position: 25% 20%; }
}
@media (max-width: 767.98px) {
	.bti--autonomos-salud-pymes .bti-foto img { object-position: 35% 15%; }
}

/* ---------- ASISA Salud Pymes Plus (modulos/banner-tarificador-imagen-autonomos-salud-pymes-plus.php, autonomos-pymes/salud-pymes-plus.php): el encuadre */
.bti--autonomos-salud-pymes-plus .bti-foto img { object-position: 35% 30%; }
@media (min-width: 1800px) {
	.bti--autonomos-salud-pymes-plus .bti-foto img { object-position: 50% 30%; }
}
@media (max-width: 991.98px) {
	.bti--autonomos-salud-pymes-plus .bti-foto img { object-position: 35% 25%; }
}
@media (max-width: 767.98px) {
	.bti--autonomos-salud-pymes-plus .bti-foto img { object-position: 45% 20%; }
}

/* ---------- ASISA Integral Pymes (modulos/banner-tarificador-imagen-autonomos-integral-pymes.php, autonomos-pymes/integral-pymes.php): el encuadre */
.bti--autonomos-integral-pymes .bti-foto img { object-position: 15% 50%; }
@media (min-width: 1800px) {
	.bti--autonomos-integral-pymes .bti-foto img { object-position: 35% 50%; }
}
@media (max-width: 991.98px) {
	.bti--autonomos-integral-pymes .bti-foto img { object-position: 15% 50%; }
}
@media (max-width: 767.98px) {
	.bti--autonomos-integral-pymes .bti-foto img { object-position: 20% 50%; }
}

/* ---------- Hipoteca (modulos/banner-tarificador-imagen-hipoteca.php, landing/seguro-hipoteca-asisa.php): el encuadre */
.bti--hipoteca .bti-foto img { object-position: 25% 60%; }
@media (min-width: 1800px) {
	.bti--hipoteca .bti-foto img { object-position: 50% 60%; }
}
@media (max-width: 991.98px) {
	.bti--hipoteca .bti-foto img { object-position: 30% 60%; }
}
@media (max-width: 767.98px) {
	.bti--hipoteca .bti-foto img { object-position: 40% 60%; }
}

@media (prefers-reduced-motion: reduce) {
	.bti-eyebrow-punto::after, .bti .tsrb-enviar { animation: none; }
}

/* ---------- Vida con la foto asisa-vida (seguro-de-vida.php, $btiFotoVida): el padre y el hijo estan a la
   izquierda de la foto (del 16 al 47 % del ancho), asi que se encuadra pegada a la izquierda para que se vean
   entre los textos y el formulario. Las landings con la foto de Vida Tranquilidad siguen con el encuadre de arriba. */
.bti--vida-familia .bti-foto img { object-position: 0% 30%; }
@media (min-width: 1800px) {
	.bti--vida-familia .bti-foto img { object-position: 27% 30%; }
}
@media (max-width: 991.98px) {
	.bti--vida-familia .bti-foto img { object-position: 0% 25%; }
}
@media (max-width: 767.98px) {
	.bti--vida-familia .bti-foto img { object-position: 60% 20%; }
}
/* En escritorio (1200-1799px) la foto va de fondo de todo el banner y, al ser tan panoramica, padre e hijo
   quedaban detras del texto y del formulario. Las columnas son las de todos los banners (los textos ocupan el resto del ancho y el formulario 620px),
   con el velo mas suave en el centro, y la foto se encuadra para que padre e hijo queden entre los dos. */
@media (min-width: 1200px) and (max-width: 1799.98px) {
	/* La foto a su tamano (600px de alto) en vez de ampliada a todo el alto del banner, fundida por abajo con el azul */
	.bti--vida-familia .bti-foto { bottom: auto; height: 600px; }
	.bti--vida-familia .bti-foto img {
		object-fit: cover;
		object-position: var(--bti-vida-x, 0px) 0;
		-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	}
	.bti--vida-familia::before {
		background:
			linear-gradient(90deg, rgba(12, 26, 47, .92) 0%, rgba(12, 26, 47, .8) 26%, rgba(12, 26, 47, .15) 42%, rgba(12, 26, 47, .08) 55%, rgba(12, 26, 47, .45) 68%, rgba(12, 26, 47, .6) 100%),
			linear-gradient(0deg, rgba(12, 26, 47, .55) 0%, transparent 35%);
	}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.bti--vida-familia { --bti-vida-x: -190px; }
}
@media (min-width: 1500px) and (max-width: 1799.98px) {
	/* Mas ancho: la foto algo mas grande para que el padre salga de detras del texto */
	.bti--vida-familia .bti-foto { height: 720px; }
}

/* ---------- Erasmus (modulos/banner-tarificador-imagen-erasmus.php): encuadre de su foto y enlace del texto */
.bti--erasmus .bti-foto img { object-position: 30% 30%; }
@media (max-width: 991.98px) {
	.bti--erasmus .bti-foto img { object-position: 35% 25%; }
}
@media (max-width: 767.98px) {
	.bti--erasmus .bti-foto img { object-position: 50% 20%; }
}
.bti--erasmus .bti-lead a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Estudiantes extranjeros (modulos/banner-tarificador-imagen-estudiantes-extranjeros.php): encuadre de su foto */
.bti--estudiantes-extranjeros .bti-foto img { object-position: 0% 30%; }
@media (min-width: 1800px) {
	.bti--estudiantes-extranjeros .bti-foto img { object-position: 19% 30%; }
}
@media (max-width: 767.98px) {
	.bti--estudiantes-extranjeros .bti-foto img { object-position: 30% 25%; }
}

/* ---------- ASISA Esencial Plus (modulos/banner-tarificador-imagen-asisa-esencial-plus.php): encuadre de su foto */
.bti--asisa-esencial-plus .bti-foto img { object-position: 30% 30%; }
@media (max-width: 767.98px) {
	.bti--asisa-esencial-plus .bti-foto img { object-position: 40% 25%; }
}

/* ---------- Travel and You (modulos/banner-tarificador-imagen-travel-and-you.php): encuadre de su foto (la familia
   ocupa del 15 al 50 % del ancho; no hay foto retrato, asi que a partir de 1800px se recorta la horizontal) */
.bti--travel-and-you .bti-foto img { object-position: 22% 45%; }
@media (min-width: 1800px) {
	.bti--travel-and-you .bti-foto img { object-position: 30% 45%; }
}
@media (max-width: 991.98px) {
	.bti--travel-and-you .bti-foto img { object-position: 30% 40%; }
}
@media (max-width: 767.98px) {
	.bti--travel-and-you .bti-foto img { object-position: 40% 40%; }
}

/* ---------- Travel and You Cruise (modulos/banner-tarificador-imagen-travel-and-you-cruise.php): encuadre de su foto
   (la viajera esta en el 15-40 % del ancho) */
.bti--travel-and-you-cruise .bti-foto img { object-position: 30% 40%; }
@media (max-width: 767.98px) {
	.bti--travel-and-you-cruise .bti-foto img { object-position: 30% 35%; }
}

/* ---------- Travel Unlimited 60 (modulos/banner-tarificador-imagen-travel-unlimited-60.php): encuadre de su foto (las
   dos personas ocupan del 15 al 50 % del ancho) */
.bti--travel-unlimited-60 .bti-foto img { object-position: 25% 30%; }
@media (min-width: 1800px) {
	.bti--travel-unlimited-60 .bti-foto img { object-position: 32% 30%; }
}
@media (max-width: 767.98px) {
	.bti--travel-unlimited-60 .bti-foto img { object-position: 35% 25%; }
}

/* ---------- Travel Study (modulos/banner-tarificador-imagen-travel-study.php): encuadre de su foto (la estudiante
   ocupa del 5 al 40 % del ancho) */
.bti--travel-study .bti-foto img { object-position: 20% 30%; }
@media (min-width: 1800px) {
	.bti--travel-study .bti-foto img { object-position: 24% 30%; }
}
@media (max-width: 767.98px) {
	.bti--travel-study .bti-foto img { object-position: 25% 25%; }
}

/* ---------- Dental autonomos e infantil (modulos/banner-tarificador-imagen-dental-autonomos.php y -infantil.php):
   encuadre de sus fotos (la persona esta del 15 al 45 % del ancho) */
.bti--dental-autonomos .bti-foto img,
.bti--dental-infantil .bti-foto img { object-position: 30% 25%; }
@media (max-width: 767.98px) {
	.bti--dental-autonomos .bti-foto img,
	.bti--dental-infantil .bti-foto img { object-position: 32% 20%; }
}

/* ---------- Dental mutualistas (modulos/banner-tarificador-imagen-dental-mutualistas.php): el paciente esta del 30 al
   55 % del ancho */
.bti--dental-mutualistas .bti-foto img { object-position: 30% 35%; }
@media (max-width: 767.98px) {
	.bti--dental-mutualistas .bti-foto img { object-position: 45% 30%; }
}

/* ---------- ASISA Vida Tranquilidad (modulos/banner-tarificador-imagen-vida-tranquilidad.php): la familia esta del 0 al
   50 % del ancho de la foto */
.bti--vida-tranquilidad .bti-foto img { object-position: 20% 30%; }
@media (max-width: 767.98px) {
	.bti--vida-tranquilidad .bti-foto img { object-position: 30% 30%; }
}

/* ---------- Vida hipoteca (modulos/banner-tarificador-imagen-vida-hipoteca.php): la casa esta del 20 al 48 % del ancho */
.bti--vida-hipoteca .bti-foto img { object-position: 30% 50%; }
@media (max-width: 767.98px) {
	.bti--vida-hipoteca .bti-foto img { object-position: 25% 50%; }
}

/* ---------- Decesos (modulos/banner-tarificador-imagen-decesos.php): sin tarificador; en la tarjeta va el formulario
   de llamada gratis (TARIFICADORES/Presupuestos, controlformulario 'llamada', el mismo de /contacto) ---------- */
.bti--decesos .bti-foto img { object-position: 30% 30%; }
@media (max-width: 991.98px) {
	.bti--decesos .bti-foto img { object-position: 40% 25%; }
}
@media (max-width: 767.98px) {
	.bti--decesos .bti-foto img { object-position: 50% 20%; }
}
/* El h1 de la pagina lleva el nombre y una frase: la frase, debajo y como subtitulo */
.bti--decesos h1.bti-h1 span,
.bti--hospitalizacion h1.bti-h1 span,
.bti--accidentes h1.bti-h1 span {
	display: block;
	margin: 14px 0 0;
	max-width: 600px;
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--bti-crema);
	text-shadow: none;
}
.bti-decesos-etiqueta { margin: -8px 0 24px; }
.bti-decesos-etiqueta a {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}
.bti-decesos-etiqueta a:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }

/* Formulario de llamada: se le quitan la caja, la leyenda y los anchos fijos de su CSS (compartido) y se le da el
   aspecto de los campos del resto de banners. Nombre y telefono en una fila; horario, casilla y boton debajo. */
.bti-llamada form#presupuesto,
.bti-llamada fieldset,
.bti-llamada .contenedorprincipal_llamada {
	width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.bti-llamada fieldset { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 14px; min-width: 0; }
.bti-llamada fieldset > * { grid-column: 1 / -1; }
.bti-llamada fieldset > #idnombre, .bti-llamada fieldset > #idtel { grid-column: auto; }
.bti-llamada legend.legend { display: none; }
.bti-llamada form#presupuesto input[type=text],
.bti-llamada form#presupuesto input[type=tel],
.bti-llamada form#presupuesto select {
	display: block; width: 100% !important; max-width: none !important; height: 50px; margin: 0 !important; padding: 0 14px !important;
	border: 1px solid #dfe6ef !important; border-radius: 12px !important; background: #f7f9fc !important; box-shadow: none !important;
	font-size: 16px !important; color: #1b2433 !important; box-sizing: border-box;
}
.bti-llamada form#presupuesto input:focus,
.bti-llamada form#presupuesto select:focus { border-color: var(--bti-azul-claro) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(48, 152, 207, .16) !important; outline: none; }
.bti-llamada form#presupuesto label[for=idhorario] {
	display: block; margin: 4px 0 -4px !important; padding: 0 !important; width: auto !important;
	font-size: 13px !important; font-weight: 700; color: #5d6b82 !important; text-align: left !important;
}
.bti-llamada #solicitante .protecciondatos { display: flex !important; justify-content: flex-start; align-items: flex-start !important; gap: 10px; margin: 4px 0 0 !important; padding: 0 !important; width: auto !important; text-align: left !important; }
.bti-llamada #solicitante .protecciondatos input#protecciondatos { flex: 0 0 auto; width: 20px !important; min-width: 0; height: 20px !important; margin: 1px 0 0 !important; transform: none; -webkit-transform: none; accent-color: var(--bti-naranja); }
.bti-llamada #solicitante .protecciondatos label { margin: 0 !important; padding: 0 !important; width: auto !important; font-size: 14px !important; line-height: 1.45; color: #1b2433 !important; text-align: left !important; }
.bti-llamada #solicitante .protecciondatos a { color: var(--bti-azul) !important; font-weight: 700; text-decoration: underline; }
.bti-llamada-legal { margin: 0; color: #5d6b82; font-size: 9.5px; line-height: 1.45; text-align: justify; }
.bti-llamada .protecciondatos + .bti-llamada-legal { padding: 0 0 0 30px; }
.bti-llamada-legal a { color: var(--bti-azul); text-decoration: underline; }
.bti-llamada form#presupuesto input.enviar {
	display: block; width: 100% !important; height: 58px; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important;
	background: linear-gradient(90deg, #ff7a2f, var(--bti-naranja)) !important; color: #fff !important; box-shadow: 0 12px 26px rgba(255, 84, 0, .35);
	font-size: 18px !important; font-weight: 800; letter-spacing: .02em; cursor: pointer;
	animation: bti-boton 3.5s ease-in-out 2s infinite;
}
.bti-llamada form#presupuesto input.enviar:hover { filter: brightness(1.05); }
.bti-llamada-garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: #5d6b82; font-size: 13.5px; }
.bti-llamada-garantias li { margin: 0; line-height: 1.4; }
.bti-llamada-garantias i { margin-right: 5px; color: var(--bti-verde); }
@media (max-width: 575.98px) {
	.bti-llamada fieldset { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.bti-llamada form#presupuesto input.enviar { animation: none; }
}
@media (max-width: 991.98px) {
	/* En tablet y movil la etiqueta va con los textos, debajo de la entradilla (sin orden saldria la primera, sobre la foto) */
	.bti-decesos-etiqueta { order: 1; justify-self: start; margin: 0; }
}
/* Los botones de la pagina («Que me llamen») llevan a este banner: que la cabecera fija no tape la tarjeta */
#te-llamamos-decesos, #te-llamamos-hospitalizacion, #te-llamamos-accidentes { scroll-margin-top: 70px; }

/* ---------- Decesos Prima Única (modulos/banner-tarificador-imagen-decesos-prima-unica.php): mismo formulario de
   llamada que decesos (.bti-llamada); sin precio fijo, en su lugar «Modalidad · Pago único · cobertura vitalicia» */
.bti--decesos-pu .bti-foto img { object-position: 30% 35%; }
@media (max-width: 991.98px) {
	.bti--decesos-pu .bti-foto img { object-position: 45% 30%; }
}
@media (max-width: 767.98px) {
	.bti--decesos-pu .bti-foto img { object-position: 50% 25%; }
}
.bti-precio--pu .bti-precio-num { font-size: 30px; }
.bti-precio--pu .bti-precio-desde { max-width: none; }

/* ---------- Hospitalización (modulos/banner-tarificador-imagen-hospitalizacion.php): mismo formulario de llamada que
   decesos (.bti-llamada) y precio de precios.php (043, al año); el subtitulo del h1 va como en decesos */
.bti--hospitalizacion .bti-foto img { object-position: 30% 40%; }
@media (max-width: 991.98px) {
	.bti--hospitalizacion .bti-foto img { object-position: 45% 35%; }
}
@media (max-width: 767.98px) {
	.bti--hospitalizacion .bti-foto img { object-position: 50% 30%; }
}

/* ---------- Accidentes (modulos/banner-tarificador-imagen-accidentes.php): mismo formulario de llamada que decesos
   (.bti-llamada) y precio de precios.php (042, al año); el subtitulo del h1 va como en decesos */
.bti--accidentes .bti-foto img { object-position: 25% 30%; }
@media (max-width: 991.98px) {
	.bti--accidentes .bti-foto img { object-position: 30% 25%; }
}
@media (max-width: 767.98px) {
	.bti--accidentes .bti-foto img { object-position: 35% 20%; }
}