.module__category-subcategories {
	background: var(--color-vibe-yellow-cream);
	border-radius: var(--radius-vibe);
	padding: 7rem 0;
	& .category-subcategories__parent-category {
		width: 75%;
		margin: 0 auto;
	}

	& .category-subcategories__subcategory-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 6rem 8rem;
		justify-content: center;
		margin-top: 5rem;
		padding: 0 1rem;
	}
}

.subcategory-card {
	position: relative;
	width: 40rem;
	& h3 {
		font: 500 2.8rem/3rem var(--font-secondary);
		& strong {
			font-weight: 100;
		}
	}
	> h3 {
		position: absolute;
		bottom: -3rem;
		left: 0;
		transform: rotate(-90deg);
		transform-origin: left top;
		transition: all 0.5s;
	}
}

.card__image {
	position: relative;
	max-width: 36rem;
	height: 40rem;
	margin-left: 4rem;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius-vibe);
	& .back-btn {
		background-color: var(--color-vibe-yellow-cream);
		padding: 1rem 0 0 1rem;
		border-radius: var(--radius-vibe) 0 var(--radius-vibe) 0;
		position: absolute;
		bottom: 0;
		right: 0;
		&:before,
		&:after {
			content: url("data:image/svg+xml;charset=UTF-8,<svg id='Capa_2' data-name='Capa 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><defs><style>.cls-1{fill:%23f0ece6;stroke-width:0px;}</style></defs><g id='Capa_1-2' data-name='Capa 1'><path class='cls-1' d='M12,0h0v12H0c6.63,0,12-5.37,12-12Z'/></g></svg>");
			width: 1.6rem;
			height: 1.6rem;
			position: absolute;
		}
		&:before {
			bottom: 99%;
			right: 0;
		}
		&:after {
			right: 99%;
			bottom: 0;
		}
		& .btn_info {
			font: unset;
			border-color: var(--color-vibe-yellow);
			background-color: var(--color-vibe-yellow-cream);
			display: block;
			padding: 1.4rem 1.6rem 1.2rem;
			transition: background-color 0.5s;
		}
	}
}

.card__description {
	opacity: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(
		19,
		20,
		21,
		0.3
	); /* Color de fondo con 30% de opacidad */
	backdrop-filter: blur(7px);
	border-radius: var(--radius-vibe);
	padding: 10rem 3rem 3rem 3rem;
	transition: opacity 0.5s;
	& h3,
	& p {
		color: var(--color-background);
		text-align: center;
		opacity: 0;
		transition: all 1.3s;
	}
	& a {
		text-decoration: none;
	}
	& h3 {
		padding-top: 7rem;
		transition: padding-top 1.7s;
	}
}

/** HOVER CARDS **/

.subcategory-card:hover > h3 {
	opacity: 0;
	left: 3rem;
	transition: all 0.5s;
}

.subcategory-card:hover .card__image .btn_info {
	background-color: var(--color-vibe-yellow);
	transition: background-color 0.5s;
	& img {
		filter: brightness(3);
		transition: filter 0.5s;
	}
}

.subcategory-card:hover .card__description {
	opacity: 1;
	transition: opacity 0.5s;
	& h3,
	& p {
		opacity: 1;
		transition: all 0.7s;
	}
	& h3 {
		padding-top: 0;
		transition: padding-top 0.7s;
	}
}
/** FIN HOVER CARDS **/