@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Archivo', sans-serif;
}

.ContainerContent {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.navContent {
	background-color: #ff3900;

	display: flex;
	justify-content: center;
	align-items: center;

	padding-block: 20px;
}

.infoContent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100% - 64px);
	/* Resta la altura del navContent */
}

.infoContentNotDisplayed {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100% - 64px);
	/* Resta la altura del navContent */
}

.infoTextContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 24px;
	text-align: center;
	color: #121213;
}

.infoTextContent h2 {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-style: Bold;
	font-size: 24px;
	line-height: 38px;
}

.infoTextContent p {
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
	font-style: Medium;
	font-size: 16px;
	line-height: 24px;
}

/* IOS */
.infoTextIosBox a {
	display: inline-block;
	margin-top: 20px;
	background-color: #ff3900;
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	font-weight: 500;
}

.infoTextIosBox a:hover {
	background-color: #eb3503;
}

/* WEB */
.infoTextContent a {
	display: inline-block;
	background-color: #ff3900;
	color: white;
	text-decoration: none;
	padding: 16px 32px;
	font-weight: 500;
	width: max-content;
}

.infoTextContent a:hover {
	background-color: #eb3503;
}

/* LOADER */
@keyframes loader-spin {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(0deg);
	}
	40% {
		transform: rotate(-40deg);
	}
	65% {
		transform: rotate(0deg);
	}
	70% {
		transform: rotate(40deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes loader-pulse {
	0% {
		transform: translate(-50%, -50%) scale(1.1);
	}
	25% {
		transform: translate(-50%, -50%) scale(0.8);
	}
	75% {
		transform: translate(-50%, -50%) scale(0.8);
	}
	100% {
		transform: translate(-50%, -50%) scale(1.1);
	}
}

@keyframes loader-beat {
	0%,
	50%,
	100% {
		filter: brightness(0.78) saturate(0.94);
		opacity: 0.85;
	}
	25%,
	75% {
		filter: brightness(1.06) saturate(1.04);
		opacity: 1;
	}
}

.infoContentLoader {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.infoContentLoaderContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	color: #121213;
}

.infoContentLoaderText {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-style: Bold;
	font-size: 24px;
	line-height: 38px;
}

.infoContentLoaderImage {
	width: 100px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation:
		loader-pulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite,
		loader-beat 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	will-change: transform, filter, opacity;
}

.infoContentLoaderSpinner {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: conic-gradient(
		#ff3900 0deg 40deg,
		transparent 40deg 90deg,
		#ff3900 90deg 130deg,
		transparent 130deg 180deg,
		#ff3900 180deg 220deg,
		transparent 220deg 270deg,
		#ff3900 270deg 310deg,
		transparent 310deg 360deg
	);
	animation:
		loader-spin 4s cubic-bezier(0.4, 0, 0.2, 1) infinite,
		loader-beat 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	will-change: transform, filter, opacity;
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 16px),
		black calc(100% - 16px)
	);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 16px),
		black calc(100% - 16px)
	);
}