/* SC Brand Timeline — Elementor Widget
   Layout replicado a partir da secção "Historia de la marca" (geelyauto.es) */

.sctl-timeline {
	--sctl-line-color: #d9d9d9;
	overflow: hidden;
	box-sizing: border-box;
}
.sctl-timeline * {
	box-sizing: border-box;
}

.sctl-inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Header */
.sctl-header {
	text-align: center;
	width: 100%;
}
.sctl-title {
	margin: 0;
}

/* Years navigation */
.sctl-years-nav {
	height: 56px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 64px;
	position: relative;
	width: 100%;
}
/* A linha de base fica no wrapper que NÃO faz scroll, para se manter
   visível ao longo de toda a largura visível, mesmo com o scroll
   horizontal da lista de anos (ver .sctl-years-track mais abaixo). */
.sctl-years-nav:before {
	background: var( --sctl-line-color );
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 0;
}
.sctl-years-mask {
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 48px;
	z-index: 13;
}
@media screen and (min-width: 992px) {
	.sctl-years-mask {
		width: 68px;
	}
}
.sctl-years-mask-left {
	left: 0;
	background: linear-gradient( 90deg, var( --sctl-mask-color, #f6f5f0 ), rgba( 246, 245, 240, 0 ) );
}
.sctl-years-mask-right {
	right: 0;
	background: linear-gradient( 270deg, var( --sctl-mask-color, #f6f5f0 ), rgba( 246, 245, 240, 0 ) );
}
.sctl-years-track {
	height: 56px;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.sctl-years-track::-webkit-scrollbar {
	display: none;
}
.sctl-year-item {
	cursor: pointer;
	display: inline-block;
	height: 100%;
	position: relative;
	text-align: center;
	transition: transform 0.3s ease-in-out;
	user-select: none;
	vertical-align: top;
	width: 33.333333%;
}
@media screen and (min-width: 576px) {
	.sctl-year-item {
		width: 14.2857%;
	}
}
@media screen and (min-width: 992px) {
	.sctl-year-item {
		width: 11.111111%;
	}
}
.sctl-year-text {
	color: #b2b2b2;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX( -50% );
	white-space: nowrap;
	z-index: 13;
}
.sctl-year-icon {
	background-color: transparent;
	bottom: 0;
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 12;
}
.sctl-year-item.active .sctl-year-icon {
	background-color: var( --primary-color, #3a7ff8 );
}

/* Events / Swiper */
.sctl-events-wrapper {
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	position: relative;
	width: 100%;
}
@media screen and (min-width: 576px) {
	.sctl-events-wrapper {
		margin-top: 40px;
	}
}
.sctl-swiper {
	width: 100%;
}
@media screen and (min-width: 576px) {
	.sctl-swiper {
		width: calc( 100% - 160px );
		margin-left: auto;
		margin-right: auto;
	}
}
.sctl-slide {
	height: auto;
}
.sctl-slide-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	justify-content: center;
	width: 100%;
}
@media screen and (min-width: 576px) {
	.sctl-slide-inner {
		flex-direction: row;
		gap: 24px;
		min-height: 340px;
	}
}
@media screen and (min-width: 992px) {
	.sctl-slide-inner {
		min-height: 420px;
		padding: 8px 0;
	}
}

.sctl-slide-image {
	width: 100%;
}
@media screen and (min-width: 576px) {
	.sctl-slide-image {
		flex: 1;
	}
}
.sctl-slide-image-wrapper {
	border-radius: 8px;
	overflow: hidden;
	padding-top: 67.076923%;
	position: relative;
	width: 100%;
}
.sctl-slide-image-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.sctl-slide-content {
	flex: 1;
	height: 100%;
	max-height: 340px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
@media screen and (min-width: 992px) {
	.sctl-slide-content {
		max-height: 420px;
	}
}
.sctl-slide-content-scroll {
	height: 100%;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sctl-slide-content-scroll::-webkit-scrollbar {
	display: none;
}
@media screen and (min-width: 576px) {
	.sctl-slide-content-scroll {
		margin: auto;
		max-width: 584px;
		min-height: 100%;
		padding: 24px 0;
	}
	.sctl-slide-content:before,
	.sctl-slide-content:after {
		content: "";
		height: 24px;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: 8;
		pointer-events: none;
	}
	.sctl-slide-content:before {
		top: 0;
		background: linear-gradient( 180deg, var( --sctl-mask-color, #f6f5f5 ), rgba( 246, 245, 245, 0 ) );
	}
	.sctl-slide-content:after {
		bottom: 0;
		background: linear-gradient( 0deg, var( --sctl-mask-color, #f6f5f5 ), rgba( 246, 245, 245, 0 ) );
	}
}
@media screen and (min-width: 992px) {
	.sctl-slide-content-scroll {
		max-width: 920px;
	}
}

.sctl-slide-title {
	margin: 0 0 8px;
}
.sctl-slide-description {
	margin: 0;
	opacity: 0.6;
}

/* Arrows
   Propriedades cosméticas com !important: alguns temas aplicam um reset
   global a elementos <button> (fundo, cor, arredondamento) com mais
   especificidade do que uma única classe — isto garante que a seta
   mantém sempre a aparência de círculo branco com ícone preto, seja
   qual for o tema do site. */
.sctl-arrow {
	appearance: none;
	-webkit-appearance: none;
	align-items: center;
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: #000000 !important;
	cursor: pointer;
	display: none;
	height: 40px !important;
	width: 40px !important;
	justify-content: center;
	margin: 0;
	outline: none;
	padding: 0 !important;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	user-select: none;
	z-index: 1;
}
.sctl-arrow svg {
	width: 20px !important;
	height: 20px !important;
	color: inherit;
	fill: none !important;
	stroke: currentColor !important;
	display: block !important;
}
.sctl-arrow:hover {
	border-color: #d2d2d2 !important;
}
@media screen and (min-width: 576px) {
	.sctl-arrow {
		display: flex;
	}
	.sctl-arrow-prev {
		left: 24px;
	}
	.sctl-arrow-next {
		right: 24px;
	}
}
@media screen and (min-width: 992px) {
	.sctl-arrow {
		height: 56px !important;
		width: 56px !important;
	}
	.sctl-arrow svg {
		width: 24px !important;
		height: 24px !important;
	}
}
@media screen and (min-width: 1260px) {
	.sctl-arrow-prev {
		left: 0;
	}
	.sctl-arrow-next {
		right: 0;
	}
}
.sctl-arrow.disabled {
	cursor: not-allowed;
	opacity: 0.3;
}

/* Indicator / pagination */
.sctl-indicator {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	margin-top: 16px;
	position: static;
}
@media screen and (min-width: 576px) {
	.sctl-indicator {
		margin-top: 40px;
	}
}
.sctl-indicator .swiper-pagination-bullet {
	background-color: #d9d9d9;
	border-radius: 0;
	height: 2px;
	width: 32px;
	margin: 0 !important;
	opacity: 1;
	transition: background-color 0.3s ease-in-out;
}
.sctl-indicator .swiper-pagination-bullet-active {
	background-color: var( --primary-color, #3a7ff8 );
}