/* Container */
.historia {
	position: relative;
	padding-bottom: 52px !important;
	overflow: hidden;
	margin-bottom: var(--section-padding-block);
	margin-top: calc(var(--section-padding-block) * 0.3);
}

.historia::after {
	content: "";
	position: absolute;
	bottom: 35px;
	width: 100%;
	height: 1px;
	background: var(--primary);
	z-index: -1;
	pointer-events: none;
}

.historia-hero {
	margin-bottom: 40px;
}

/* Track */
.historia-inner {
	display: flex;
	gap: 20px;
}
@media screen and (max-width: 1025px) {
	.historia-inner {
		transform: translateX(-25px) !important;
		width: 100vw !important;
		padding-left: 25px;
		padding-bottom: 35px !important;
		overflow-x: scroll;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-right: 25px;
	}
	.historia-inner::-webkit-scrollbar {
		display: none;
	}
	.historia::after {
		bottom: 60px;
	}
	body .historia-single::after {
		bottom: -34px;
	}
}
/* Slides */
.historia-single.historia-single.historia-single {
	position: relative;
	display: flex;
	min-width: 30vw;
	max-width: 30vw;
	padding: 12px;
	gap: 17px;
	background: white;
	cursor: url("../../assets/media/icons/cursor-drag.svg") 34 34, grab;
}
@media screen and (max-width: 1025px) {
	.historia-single {
		min-width: 280px !important;
		max-width: 280px !important;
		flex-direction: column;
	}
}
.historia-single h3 {
	margin-bottom: 14px;
}
.historia-single::after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 15px;
	height: 15px;
	background: var(--primary-ultra-dark);
	border-radius: 50vmax;
	z-index: 1;
	pointer-events: none;
}

/* Slide content */
@media screen and (min-width: 1026px) {
	.historia-img {
		width: 40%;
	}
}
@media screen and (min-width: 1026px) {
	.historia-img {
		width: 190px;
		height: 210px;
		overflow: hidden;
		border-radius: var(--radius-s);
	}
}
.historia-img img {
	min-height: 100%;
	min-width: 100%;
	transform: translateZ(0);
	pointer-events: none;
	object-fit: cover;
}
@media screen and (max-width: 1025px) {
	.historia-img img {
		aspect-ratio: 255 / 211;
		width: 100%;
	}
}

.historia-img img::selection {
	background: transparent;
}

@media screen and (min-width: 1026px) {
	.historia-content {
		width: 60%;
	}
}

@media screen and (max-width: 1025px) {
	.historia-content {
		padding-top: 8px;
	}
}
/* Navigation */
.historia-navigation {
	position: absolute;
	right: 0;
	bottom: -20px;
	display: flex;
	gap: 12px;
	width: fit-content !important;
}

.historia-navigation button {
	display: flex;
	padding: 7px;
	background: var(--primary-ultra-dark);
	border-radius: 50vmax;
	outline: none !important;
}

.historia-navigation button svg path {
	fill: white;
	transition: 0.2s ease-out;
}

.historia-navigation button.historia-next svg {
	transform: rotate(180deg);
}

.historia-navigation button[aria-disabled="true"] {
	cursor: not-allowed;
	background: var(--primary);
}

.historia-navigation button[aria-disabled="true"] svg path {
	fill: var(--primary-dark) !important;
}

.historia-navigation button[aria-disabled="false"]:is(:hover, :focus-visible) path {
	fill: var(--accent);
}

@media screen and (max-width: 1025px) {
	.historia-navigation {
		display: none !important;
	}
}
