body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
}

.bienvenido {
	font-size: 10vh;
	overflow: hidden;
	white-space: nowrap;
}

.letra {
	opacity: 0;
	animation: aparecer 0.5s forwards;
	animation-delay: calc(0.1s * var(--i));
}

@keyframes aparecer {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.imagen {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
}

.desaparecer {
	animation: desaparecer 0.5s forwards;
	animation-delay: calc(0.1s * var(--i));
}

@keyframes desaparecer {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Added reset class to prepare for next animation cycle */
.reset {
	opacity: 0;
	animation: none !important;
}