/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.block-expand-categories h1,
.block-expand-categories h2,
.block-expand-categories h3 {
	font-family: Inter, serif !important;
}

.block-expand-categories .expand-category {
	--height: 50vh;
	--responsive-height: 60px;
	--hover-flex: 10;

	position: relative;
	background-position: center center;
	background-size: cover;
	border-radius: 20px;
	margin: 10px 0;
	min-height: var(--responsive-height);
	cursor: pointer;
}

.block-expand-categories .expand-category h4 {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0;
	transform: translateY(-50%);
}

/* Larger Device */
@media (min-width: 992px) {

	.block-expand-categories .expand-category {
		height: var(--height);
		flex: 1;
		margin: 0 10px;
		transition: flex 1s ease;
		-webkit-backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
	}

	.block-expand-categories:not(.on-click) .expand-category:hover,
	.block-expand-categories.on-click .expand-category.active {
		flex: var(--hover-flex);
	}

	.block-expand-categories .expand-category h4 {
		opacity: 1;
		top: auto;
		bottom: 10px;
		transform: none;
		transition: opacity .4s ease;
	}

	.block-expand-categories:hover .expand-category:not(.active):not(:hover) h4,
	.block-expand-categories.on-click .expand-category:not(.active) h4 {
		opacity: 0;
	}

}

.list-group-item {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff !important;
	color: #212529;
	border: 0;
	width: 100%;
	padding: 40px;
	margin: 0;
}

.list-group-item:nth-child(1) {
	z-index: 1;
}

.list-group-item .text-anim {
	transform: translateY(-20px);
	--text-anim-duration: .3s;
	transition-property: opacity, transform;
	transition-duration: var(--text-anim-duration);
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: var(--text-anim-delay, 0s);
}

.list-group-item.active .text-anim {
	opacity: 1;
	transform: translateY(0px);
	background-color: #FFF;
}

.list-group-content>div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.mask-image {
	-webkit-mask: url("../imagenes/mask-blob.svg");
	mask: url("../imagenes/mask-blob.svg");
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
}

@media (min-width: 992px) {
	.transform-margin {
		transform: translateY(50px) scale(0.93);
	}
}

.block-contact-1 .form-control {
	padding: 12px 2px;
	background-color: transparent !important;
	border-top-width: 0;
	border-right-width: 0;
	border-left-width: 0;
	border-bottom-width: 2px;
	border-radius: 0;
	font-weight: 500;
	font-size: 18px;
}

.block-contact-1 .form-control::-moz-placeholder {
	color: #CCC;
	font-weight: 400;
	font-size: 15px;
}

.block-contact-1 .form-control:-ms-input-placeholder {
	color: #CCC;
	font-weight: 400;
	font-size: 15px;
}

.block-contact-1 .form-control::-webkit-input-placeholder {
	color: #CCC;
	font-weight: 400;
	font-size: 15px;
}

.block-contact-1 textarea.form-control {
	resize: none;
	overflow: hidden;
	word-wrap: break-word;
}

.block-contact-1 label:not(.custom-control-label) {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: #777;
	margin-bottom: 3px;
	font-size: 14px;
}

.block-contact-1 .custom-control-label::before,
.block-contact-1 .custom-control-label::after {
	top: 0.0875rem;
}

.block-contact-1 .form-control:active,
.block-contact-1 .form-control:focus {
	border-color: #3D1144;
}

.custom-control-input:checked~.custom-control-label::before {
	border-color: #3D1144;
	background-color: #3D1144;
}

.custom-control-input:focus~.custom-control-label::before {
	box-shadow: 0 0 0 0.2rem #3D114415;
}

.block-contact-1 .social-icon {
	background-color: rgba(0, 0, 0, 0.2);
	font-size: 16px;
}

/* Floating WhatsApp Button */
.whatsapp-float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 20px;
	left: 20px;
	background-color: #25d366;
	color: #FFF;
	border-radius: 50px;
	text-align: center;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	70% {
		box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

.whatsapp-float:hover {
	background-color: #128c7e;
	transform: scale(1.1);
	color: #FFF;
}

.whatsapp-float img {
	width: 35px;
	height: 35px;
}

@media (max-width: 767px) {
	.whatsapp-float {
		width: 50px;
		height: 50px;
		bottom: 15px;
		left: 15px;
	}
	.whatsapp-float img {
		width: 30px;
		height: 30px;
	}
}
/* Section Action Buttons */
.section-buttons {
	display: flex;
	gap: 15px;
	margin-top: 25px;
	flex-wrap: wrap;
}

.btn-action {
	padding: 12px 30px;
	border-radius: 30px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border: none;
	text-decoration: none !important;
	color: #FFF !important;
}

.btn-action:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-blue {
	background: linear-gradient(135deg, #452aff 0%, #45ffff 100%);
}

.btn-pink {
	background: linear-gradient(135deg, #ff2a75 0%, #ffdb4f 100%);
}

.btn-purple {
	background: linear-gradient(135deg, #4f00f6 0%, #b000f7 100%);
}

/* Alias for backward compatibility */
.btn-main { background: linear-gradient(135deg, #452aff 0%, #45ffff 100%); }

.btn-whatsapp-section {
	background-color: #25d366;
}

.btn-whatsapp-section:hover {
	background-color: #128c7e;
}

.btn-whatsapp-section i {
	margin-right: 8px;
	font-size: 18px;
}

@media (max-width: 575px) {
	.section-buttons {
		justify-content: center;
	}
	.btn-action {
		width: 100%;
	}
}

/* Premium Contact & Map Section */
.premium-contact-section {
	position: relative;
	padding: 80px 0;
	background: #FFF;
	overflow: hidden;
}

.premium-contact-section::before {
	content: '';
	position: absolute;
	top: -10%;
	right: -5%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(69, 42, 255, 0.1) 0%, rgba(69, 42, 255, 0) 70%);
	z-index: 0;
}

.glass-form-container {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 30px;
	padding: 40px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 1;
}

.map-container {
	height: 100%;
	min-height: 450px;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
	border: 8px solid #FFF;
}

.map-container iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.premium-contact-section .form-control {
	background: rgba(255, 255, 255, 0.5) !important;
	border: 2px solid rgba(61, 17, 68, 0.1);
	border-radius: 12px;
	padding: 12px 15px;
	transition: all 0.3s ease;
}

.premium-contact-section .form-control:focus {
	border-color: #ff2a75;
	background: #FFF !important;
	box-shadow: 0 0 0 4px rgba(255, 42, 117, 0.1);
}

.premium-contact-section label {
	font-weight: 600;
	color: #3D1144;
	margin-bottom: 8px;
	font-size: 14px;
}

@media (max-width: 991px) {
	.premium-contact-section {
		padding: 60px 0;
	}
	.map-container {
		margin-bottom: 40px;
		min-height: 350px;
	}
}
