/* ==========================================================
   Insurio Steps Carousel - estilos
   Namespace propio: .pwe-*  (independiente de .isc-* / .iss-*)
   ========================================================== */

.pwe-carousel-wrap {
	position: relative;
	width: 100%;
}

.pwe-swiper {
	position: relative;
	overflow: hidden;
	padding: 4px 0 8px;
	/* Pista visual de que el carrusel se navega arrastrando (no hay flechas). */
	cursor: grab;
}

.pwe-swiper:active {
	cursor: grabbing;
}

/* Namespace propio (reemplaza lo que antes daban las clases genéricas
   .swiper-wrapper / .swiper-slide de la librería), para que ningún otro
   script/tema que escanee ".swiper*" toque este carrusel. */
.pwe-swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	box-sizing: content-box;
	transition-property: transform;
}

.pwe-swiper-slide {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	height: 100%;
	transition-property: transform;
}

/* Línea conectora: en vez de UNA sola barra puesta encima de todo el
   carrusel (que solo alcanzaba a cubrir la "primera pantalla" de slides
   y se quedaba pegada ahí al deslizar), cada paso trae su propio tramo de
   línea (antes y después de su círculo) como pseudo-elementos. Así el
   conector viaja pegado a CADA paso sin importar cuántos se muestren por
   pantalla (1, 2, 3, 4...) ni el breakpoint. Queda un pequeño corte en la
   línea exactamente donde va el espacio entre pasos (gap configurado en
   "Ajustes del carrusel"), lo cual es el comportamiento esperado en un
   stepper con separación entre items. */
.pwe-step {
	position: relative;
	text-align: center;
	padding: 0 12px;
	box-sizing: border-box;
}

.pwe-step::before,
.pwe-step::after {
	content: '';
	position: absolute;
	top: 20px; /* alineado al centro del círculo por defecto (40px / 2) */
	width: 50%;
	height: 2px;
	background-color: #1b2a4a;
	z-index: 0;
	pointer-events: none;
}

.pwe-step::before {
	left: 0;
}

.pwe-step::after {
	right: 0;
	/* Se extiende el ancho del tramo derecho para "comerse" el espacio
	   configurado entre pasos (space_between) y así conectar sin corte
	   con el ::before del siguiente paso. Ajustar el valor sumado si
	   cambias "Espacio entre pasos (px)" en los ajustes del widget. */
	width: calc(50% + 24px);
}

.pwe-step-marker {
	position: relative;
	z-index: 1; /* por encima de los tramos de línea ::before/::after */
	width: 40px;
	height: 40px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background-color: #0b1e3d;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.pwe-step-number {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}

.pwe-step-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: #0b1e3d;
	line-height: 1.3;
}

.pwe-step-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6b7280;
}

/* ==========================================================
   Puntos de navegación (dots) - estilo "píldora"
   Los colores/tamaños se sobrescriben desde el panel de Elementor
   (pestaña Estilo > Puntos de navegación).
   ========================================================== */
.pwe-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Swiper oculta/bloquea los dots cuando no hay nada que deslizar
   (por ejemplo, 4 pasos con 4 visibles en desktop). */
.pwe-pagination.pwe-pagination-lock {
	display: none;
}

.pwe-dot {
	display: block;
	width: 28px;
	height: 10px;
	border-radius: 999px;
	background-color: #e8e1d0;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.3s ease, width 0.3s ease;
}

.pwe-dot-active {
	background-color: #b08a2e;
}