/* =============================================================================
   Widget: Profic Contacto
   Figma Contactanos 6309:137613 / 137644 / 137672
   (node 202:5239 — misma sección en Design-Profic-Mike)
   Breakpoints: <800 · 800–1279 · ≥1280 (Sites REFLOW)
   Bottom pad grande en T/M = aire para solapa del footer curvo
   ============================================================================= */

.elementor-widget-profic_contacto,
.elementor-widget-profic_contacto:not(:last-child),
.elementor-widget-profic_contacto > .elementor-widget-container {
	margin: 0 !important;
	margin-block-end: 0 !important;
	padding: 0 !important;
	max-width: 100%;
	width: 100%;
}

.profic-contacto-wrapper {
	position: relative;
	width: 100%;
	/* Mobile — Figma 61 / 44 / 274 */
	--profic-contacto-pad-top: 61px;
	--profic-contacto-pad-bottom: 274px;
	--profic-contacto-pad-inline: 44px;
	padding: var(--profic-contacto-pad-top) var(--profic-contacto-pad-inline)
		var(--profic-contacto-pad-bottom);
	background-color: transparent;
	overflow: visible;
	isolation: auto;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

@media (min-width: 800px) and (max-width: 1279px) {
	.profic-contacto-wrapper {
		/* Tablet — Figma 133 / 60 / 410 */
		--profic-contacto-pad-top: 133px;
		--profic-contacto-pad-bottom: 410px;
		--profic-contacto-pad-inline: 60px;
	}
}

@media (min-width: 1280px) {
	.profic-contacto-wrapper {
		/*
		 * Desktop — Figma pad 120 H/T, bottom no declarado;
		 * 160px = aire lógico para la curva del footer (overlap ~88px).
		 */
		--profic-contacto-pad-top: 120px;
		--profic-contacto-pad-bottom: 160px;
		--profic-contacto-pad-inline: 120px;
	}
}

/* Background glows */
.profic-contacto-bg-glow {
	position: absolute;
	width: 1000px;
	height: 1000px;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	opacity: 0.18;
	mix-blend-mode: screen;
	z-index: 0;
}

.profic-contacto-bg-glow.glow-left {
	left: -400px;
	top: -200px;
	filter: blur(197px);
}

.profic-contacto-bg-glow.glow-right {
	right: -400px;
	bottom: -200px;
	filter: blur(197px);
}

/* Background lines */
.profic-contacto-line-bg {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	background-repeat: no-repeat;
	opacity: 0.58;
}

.profic-contacto-line-bg.show-tablet,
.profic-contacto-line-bg.show-mobile {
	inset: 0;
	background-position: center center;
	background-size: cover;
}

.profic-contacto-line-bg.show-desktop {
	inset: auto;
	right: calc(-1 * var(--profic-contacto-pad-inline, 120px));
	bottom: 0;
	width: 1238px;
	height: 994px;
	max-width: none;
	background-position: right bottom;
	background-size: 1238px 994px;
	display: none;
}

.profic-contacto-line-bg.show-desktop svg {
	display: block;
	width: 1238px;
	height: 994px;
	max-width: none;
}

.profic-contacto-line-bg.show-tablet {
	display: none;
}

.profic-contacto-line-bg.show-mobile {
	display: block;
}

@media (min-width: 800px) and (max-width: 1279px) {
	.profic-contacto-line-bg.show-desktop,
	.profic-contacto-line-bg.show-mobile {
		display: none;
	}
	.profic-contacto-line-bg.show-tablet {
		display: block;
	}
}

@media (min-width: 1280px) {
	.profic-contacto-line-bg.show-desktop {
		display: block;
	}
	.profic-contacto-line-bg.show-tablet,
	.profic-contacto-line-bg.show-mobile {
		display: none;
	}
}

/*
 * Hero SEO container
 * Mobile/Tablet stack gap 60 (Figma M Hero; T logical same rhythm)
 * Desktop row gap 56 (Figma Hero SEO)
 * Content max: M 287 · T 680 · D 1040
 */
.profic-contacto-container {
	position: relative;
	width: 100%;
	max-width: 287px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 60px;
	z-index: 2;
	text-align: left;
	box-sizing: border-box;
}

@media (max-width: 479px) {
	.profic-contacto-container {
		max-width: 100%;
	}

	.profic-contacto-desc {
		max-width: none;
	}
}

@media (min-width: 800px) and (max-width: 1279px) {
	.profic-contacto-container {
		max-width: 680px;
		gap: 60px;
	}
}

@media (min-width: 1280px) {
	.profic-contacto-container {
		max-width: 1040px;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 56px;
	}
}

/* Columna izquierda — Título, sub y cta gap 36 */
.profic-contacto-info-col {
	flex: 0 0 auto;
	width: 100%;
	max-width: 482px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
	box-sizing: border-box;
}

@media (min-width: 1280px) {
	.profic-contacto-info-col {
		flex: 0 0 482px;
		width: 482px;
		max-width: 482px;
	}
}

/* Icon — Figma 188.97 × 143.84 */
.profic-contacto-browser-icon {
	width: 188.97px;
	height: 143.84px;
	display: block;
	flex-shrink: 0;
	transition: transform 0.4s ease;
}

.profic-contacto-info-col:hover .profic-contacto-browser-icon {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.profic-contacto-info-col:hover .profic-contacto-browser-icon {
		transform: none;
	}
}

.profic-contacto-browser-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Title — 32/36.8 · 36/39.6 · 48/52.8 */
.profic-contacto-title {
	margin: 0;
	padding: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 36.8px;
	letter-spacing: 0;
	color: #ffffff;
}

@media (min-width: 800px) {
	.profic-contacto-title {
		font-size: 36px;
		line-height: 39.6px;
	}
}

@media (min-width: 1280px) {
	.profic-contacto-title {
		font-size: 48px;
		line-height: 52.8px;
	}
}

/* Desc — 14/21 · 15/22.5 · 17/25.5 */
.profic-contacto-desc {
	margin: 0;
	padding: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.14px;
	color: #d8d8d8;
	max-width: 229px;
}

@media (min-width: 800px) {
	.profic-contacto-desc {
		font-size: 15px;
		line-height: 22.5px;
		letter-spacing: 0.15px;
		max-width: 461px;
	}
}

@media (min-width: 1280px) {
	.profic-contacto-desc {
		font-size: 17px;
		line-height: 25.5px;
		letter-spacing: 0.17px;
		max-width: 461px;
	}
}

/* Social — Frame 37 gap 33 */
.profic-contacto-social-media {
	display: flex;
	gap: 33px;
	align-items: center;
	min-height: 22px;
}

.profic-contacto-social-media .social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: transform 0.3s ease, color 0.25s ease;
}

.profic-contacto-social-media .social-icon:hover {
	transform: translateY(-2px);
}

.profic-contacto-social-media .social-icon:hover svg path {
	fill: #c084fc;
}

.profic-contacto-social-media .social-icon:hover svg stop {
	stop-color: #c084fc;
}

.profic-contacto-social-media .social-icon svg {
	display: block;
	height: 22px;
	width: auto;
}

/* Form col — M 287 · T 680 · D 502 */
.profic-contacto-form-col {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (min-width: 1280px) {
	.profic-contacto-form-col {
		flex: 0 0 502px;
		width: 502px;
		max-width: 502px;
		min-height: 0;
	}
}

.profic-contacto-form {
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 100%;
	box-sizing: border-box;
}

/* Inputs */
.profic-input-field {
	position: relative;
	width: 100%;
	border-bottom: 1px solid #5d0fec;
	transition: border-bottom-color 0.3s ease, box-shadow 0.3s ease;
}

.profic-input-field:focus-within {
	border-bottom: 2px solid #6b1fef;
	box-shadow: 0 2px 20px rgba(93, 15, 236, 0.35);
}

.profic-form-input {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	box-sizing: border-box;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: #ffffff;
	padding: 12px 0;
	display: block;
}

@media (min-width: 800px) {
	.profic-form-input {
		font-size: 20px;
	}
}

.profic-form-input::placeholder {
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #969696;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.profic-form-input:focus::placeholder {
	opacity: 0;
}

.profic-input-field.multiline {
	height: auto;
}

.profic-input-field.multiline .profic-form-input {
	resize: none;
	min-height: 150px;
}

.profic-form-submit-container {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* CTA states: profic-cta-btn.css */
.profic-form-submit-btn {
	position: relative;
}

.profic-form-submit-btn .btn-loader {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: spin-loader 0.8s linear infinite;
	margin-left: 10px;
}

.profic-form-submit-btn.loading .btn-loader {
	display: inline-block;
}

@keyframes spin-loader {
	to {
		transform: rotate(360deg);
	}
}

/* Floating Success Banner */
.profic-form-response-banner {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #4f10cd;
	border-radius: 16px;
	padding: 15px 30px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	max-width: 90%;
	box-sizing: border-box;
}

.profic-form-response-banner.active {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	animation: banner-fade-in 0.3s ease-out;
}

.profic-form-response-banner.error {
	background: #c0392b;
}

.profic-form-response-banner .response-text {
	margin: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 18px;
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
}

@keyframes banner-fade-in {
	from {
		opacity: 0;
		transform: translate(-50%, -40%) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* =============================================================================
   Entrance — Figma Smart Animate
   ============================================================================= */
@keyframes figma110Opacity {
	0% {
		opacity: 0;
		transform: translateY(35px) scale(0.93);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.profic-contacto-wrapper .profic-contacto-browser-icon,
.profic-contacto-wrapper .profic-contacto-title,
.profic-contacto-wrapper .profic-contacto-desc,
.profic-contacto-wrapper .profic-contacto-social-media .social-icon,
.profic-contacto-wrapper .profic-contacto-form-col {
	opacity: 0;
	transform: translateY(35px) scale(0.93);
	will-change: opacity, transform;
}

.profic-contacto-wrapper.in-view .profic-contacto-browser-icon {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.1s;
}

.profic-contacto-wrapper.in-view .profic-contacto-title {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.2s;
}

.profic-contacto-wrapper.in-view .profic-contacto-desc {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.3s;
}

.profic-contacto-wrapper.in-view .profic-contacto-social-media .social-icon:nth-child(1) {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.38s;
}
.profic-contacto-wrapper.in-view .profic-contacto-social-media .social-icon:nth-child(2) {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.44s;
}
.profic-contacto-wrapper.in-view .profic-contacto-social-media .social-icon:nth-child(3) {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.5s;
}
.profic-contacto-wrapper.in-view .profic-contacto-social-media .social-icon:nth-child(4) {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.56s;
}

.profic-contacto-wrapper.in-view .profic-contacto-form-col {
	animation: figma110Opacity 1.2s cubic-bezier(0.45, 1.45, 0.8, 1) forwards;
	animation-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
	.profic-contacto-wrapper .profic-contacto-browser-icon,
	.profic-contacto-wrapper .profic-contacto-title,
	.profic-contacto-wrapper .profic-contacto-desc,
	.profic-contacto-wrapper .profic-contacto-social-media .social-icon,
	.profic-contacto-wrapper .profic-contacto-form-col {
		opacity: 1;
		transform: none;
		will-change: auto;
		animation: none !important;
	}
}

.elementor-editor-active .profic-contacto-wrapper .profic-contacto-browser-icon,
.elementor-editor-active .profic-contacto-wrapper .profic-contacto-title,
.elementor-editor-active .profic-contacto-wrapper .profic-contacto-desc,
.elementor-editor-active .profic-contacto-wrapper .profic-contacto-social-media .social-icon,
.elementor-editor-active .profic-contacto-wrapper .profic-contacto-form-col {
	opacity: 1;
	transform: none;
}