*, *::before, *::after {
	box-sizing: inherit;
}

.wrapper {
	position: relative;
	/*width: 100vw;*/
	height: calc(50vw * 0.75);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.splitview {
	position: relative;
	width: 100vw;
	height: 100%;
	overflow: hidden;

}

.panel {
	position: absolute;
	height: 100%; /* Ajustar a la altura dinámica */
	overflow: hidden;
}

.top {
	width: 100vw;
	z-index: 2;
	
	background-image: url('https://www.xxi-banorte.com/wp-content/themes/banorte-xxi/assets/homee/splitter_mujer_desktop.webp');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	--border-transition: 0.3s;
	
	display: flex;
	color: #fff;
	text-align: center;
	
	--display: flex;
	--min-height: 650px;
	--flex-direction: row;
	--container-widget-width: initial;
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--justify-content: center;
	--gap: 0px 0px;
	--overflow: hidden;
	--background-transition: 0.3s;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;

	--margin-inline-end: auto;
	--margin-inline-start: auto;
	position: relative:


}

.bottom {
	width: 100vw;
	left: 0;
	z-index: 1;
	background-image: url('https://www.xxi-banorte.com/wp-content/themes/banorte-xxi/assets/homee/hero_cochinito_desktop_v2.webp');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	--border-transition: 0.3s;
	
	display: flex;
	color: #fff;
	text-align: center;
	justify-content:right;
	
	--display: flex;
	--min-height: 650px;
	--flex-direction: row;
	--container-widget-width: initial;
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--justify-content: center;
	--gap: 0px 0px;
	--overflow: hidden;
	--background-transition: 0.3s;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;

	--margin-inline-end: auto;
	--margin-inline-start: auto;
	position: relative;
}


.handle {
position: absolute;
top: 50px;
left: 50%;
height: 80%;
width: 20px;
cursor: col-resize;
z-index: 1001;
border-left: 2px dashed #fff;
display: flex;
align-items: center;
justify-content: center;
}

.handle::before, .handle::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: var(--arrow-size, 10px) solid transparent; /* Tamaño dinámico basado en zoom */
top: var(--cursor-y, 45%);
}

.handle::before {
border-right: 12px solid #FFF; /* Tamaño de la flecha a la izquierda */
left: -35px; 
}


.handle::after {
border-left: 12px solid #FFF; /* Tamaño de la flecha a la derecha */
right: -15px; /* Ajustar posición a la derecha */
}

.handle:hover {
cursor: none; /* Oculta el cursor nativo solo cuando el mouse está sobre el handle */
}

.cta {
font-size: 2.1rem;
font-family: "Montserrat", Sans-serif;
line-height: 1.1;
max-width: 380px;
padding: 20px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
text-align:left;

}

.cta span {
font-weight: bold;
}

.btn_afil {
	padding: 0px 30px;
}

.btn_calc {
	padding: 0px 25px;
}

.cta button {
border: 1px solid #FFF;
border-radius: 0px;
cursor: pointer;
font-size: 24px;
color: #FFF;
font-weight: 400;

}

.cta button:hover {
background-color: #fff;
color: #EA0029;
}

.cta button:focus {
outline: none;
border: none;
}

.ctaw {
position: absolute;
left: 3%;
top: 5%
}
.ctaw button {
margin-top:20px
}

.ctap {
position: absolute;
top: 5%;
right: 15%;

}

.ctap button {
margin-top:55px
}

.ctap button:focus {
outline: none;
border: none;
}	


@media only screen and (max-width: 767px) {
.wrapper {
	width: inherit;
	height: calc(50vw * 2.69);
}
html, body {
  overscroll-behavior: none;
}

.top {
	display:flex;
	justify-content:left;
	
}
.cta {
	font-size: 1.125rem;
	line-height: 1.2;
	padding: 5px;
	max-width: 200px;
}
.btn_afil {
	padding: 0px 25px;
}

.btn_calc {
	padding: 0px 15px;
}
.cta button {
	cursor: pointer;
	font-size: 20px;
}		

.ctaw button {
	margin-top:10px;
}	

.ctap {
	right: -5%;
}		

.ctap button {
	margin-top: 30px;
}

}

@media only screen and (min-width: 768px) and (max-width:1024px) { 
.cta {
	font-size: 1.5rem;
	max-width: 370px;
}
.cta button {
	font-size: 1.25rem;
}
}