.modal {
	width: 100%;
	height: 100vh;
	padding: 0.3125em 0;
	background-color: var(--grisMuyClaroTransparent);
	position: fixed;
	top: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
	font-size: 0.9375rem;
}
.modal--show {
	opacity: 1;
	visibility: visible;
}
.modal__pokedex {
	width: 20em;
	height: auto;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
	border: 0.125em solid var(--color-primary);
	border-radius: 6.25em;
	background-color: var(--bluePrimary);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s, visibility 0.2s;
	transition-delay: 0.1s;
}
.modal__pokedex--show {
	opacity: 1;
	visibility: visible;
	animation-name: scale;
	animation-duration: 0.4s;
	animation-timing-function: ease-out;
}
.modal__btn {
	width: 1.875em;
	height: 1.875em;
	position: absolute;
	top: 6.875em;
	right: 0.625em;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	padding: 0;
}
.modal__btn::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.modal__iconClose {
	position: relative;
	width: 90%;
	height: 0.3125em;
}
.modal__iconClose::after,
.modal__iconClose::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 0.3125em;
	top: 0;
	left: 0;
	border-radius: 0.625em;
	background-color: var(--grisMuyClaro);
	transform: rotate(45deg);
	transition: transform 0.3s;
}
.modal__iconClose::before {
	transform: rotate(-45deg);
}
@media (hover: hover) {
	.modal__btn:hover .modal__iconClose::after {
		transform: rotate(-45deg);
	}
	.modal__btn:hover .modal__iconClose::before {
		transform: rotate(45deg);
	}
}
.modal__top {
	width: 20em;
	transform: translateY(0.625em);
	transition: transform 0.3s;
	transition-delay: 0.1s;
}
.modal__top--show {
	transform: translateY(0px);
}
.modal__bottom {
	width: 20em;
	transform: translateY(-0.625em);
	transition: transform 0.3s;
	transition-delay: 0.1s;
}
.modal__bottom--show {
	transform: translateY(0px);
}
@keyframes scale {
	0% {
		transform: scale(1.09);
	}
	100% {
		transform: scale(1);
	}
}
.modal__img {
	width: 10em;
}
.modal__img--show {
	animation-name: scale;
	animation-duration: 0.4s;
	animation-timing-function: ease-out;
}
.modal__info {
	width: 100%;
	padding-top: 0.3125em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.modal__contentStats {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.modal__name {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 0.3125em;
	margin-bottom: 0px;
}
.modal__nameNumber {
	margin-right: 0.3125rem;
}
.modal__stats {
	margin-top: 0.3125em;
	padding-left: 0;
}
.modal__st {
	width: 17.5em;
	margin-bottom: 0.3125em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 0.125em solid var(--grisClaro);
}
.modal__statsValue--types {
	margin-left: 0.3125em;
	background-color: var(--colorTypes);
	padding: 0.1875em 0.625em;
	border-radius: 0.625em;
	font-weight: bold;
}
.modal__st--types {
	border-bottom: 0px solid transparent;
}