html,
body {
	margin: 0 auto;
	height: 100%;
	width: 100%;
	cursor: default;
	scroll-behavior: smooth;
}

img,
html {
	-webkit-user-drag: none;
}

::selection {
	background-color: #17152d;
	color: white;
}

::-webkit-scrollbar {
	width: 2px;
	background-color: #17152d;
}

::-webkit-scrollbar-thumb {
	width: 2px;
	border-radius: 99px;
	background-color: #243364;
}

::-webkit-scrollbar:hover,
::-webkit-scrollbar-track:hover {
	width: 6px;
	transition: all ease-in-out;
	transition-delay: 300ms;
}

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease;
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}

textarea {
	resize: none !important;
}

.belt {
	top: var(--belt-y, 60%);
	transform: translateY(-50%);
	height: var(--belt-h, 200px);
	object-fit: cover;
}

@media (min-width: 320px) {
	.belt {
		--belt-y: 85%;
		--belt-h: 224px;
	}
}

@media (min-width: 768px) {
	.belt {
		--belt-y: 85%;
		--belt-h: 224px;
	}
}

@media (min-width: 1280px) {
	.belt {
		--belt-y: 85%;
		--belt-h: 120px;
	}
}

@media (min-width: 1360px) {
	.belt {
		--belt-y: 85%;
		--belt-h: 200px;
	}
}

@media (max-width: 768px) {
	#hero-video {
		scale: 2.5 !important;
	}
}

.leaflet-control-attribution {
	display: none !important;
}

.hidden-service {
	display: none;
	opacity: 0;
	transform: translateY(20px);
}

.show-service {
	display: block;
	animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.rotate-180 {
	transform: rotate(180deg);
}

body.reventometro-active {
	overflow: hidden;
}

.reventometro-slide-up {
	transform: translateY(-100%) !important;
}

.reventometro-slide-down {
	transform: translateY(100%) !important;
}

.reventometro-fade-out {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-out 0.8s, visibility 0s 1.3s;
}

#reventometro-top::before,
#reventometro-bottom::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 2px;
	height: 60px;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transform: translateX(-50%);
	animation: pulse 2s ease-in-out infinite;
}

#reventometro-top::before {
	bottom: 0;
}

#reventometro-bottom::before {
	top: 0;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.3;
		transform: translateX(-50%) scaleY(1);
	}

	50% {
		opacity: 0.8;
		transform: translateX(-50%) scaleY(1.2);
	}
}