.ctn-error-state {
	width: 100vw;
	height: 100vh;
	margin-left: -40px;
}

.ctn-error-state .error-state:not(.active) {
	display: none;
}

/* ESTILOS DESDE AQUÍ */
a {
	text-decoration: none;
}

.error-state {
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-bottom: 40px;
}

.error-state section.error-state-content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 8px;
}

.error-state figure {
	/* width: 12.91666666666667%; */
	width: 248px;
}

.error-state .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 40px;
}

.error-state .content .title {
	color: var(--color-neutral-700);
	text-align: center;
}

.error-state .content .text {
	color: var(--color-neutral-500);
	text-align: center;
	max-width: 518px;
}

.error-state .img {
	width: 100%;
	height: 100%;
}

.error-state .buttons {
	display: flex;
	gap: 8px;
}

.error-state .img-footer {
	text-align: center;
	width: 100%;
	height: 24px;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.error-state .img-footer img {
	height: 100%;
}

@media screen and (max-width:1280px) {

	.error-state .content,
	.error-state .buttons {
		padding: 0 32px;
	}
}

@media screen and (max-width:640px) {

	.error-state .content,
	.error-state .buttons {
		padding: 0 20px;
	}

	.error-state .buttons {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.error-state .buttons a,
	.error-state .buttons comp-button {
		width: 100%;
	}

	.error-state .content .text {
		max-width: max-content;
	}
}