/* =============================================================================
   Widget: Profic Diferencial (Que y como)
   Figma Prueba-WPFIG — Desktop 1:1015 / Tablet 1:1383 / Mobile 1:1748

   Desktop 1280×1137: pad 120, gap 60, Frame 91 1040×680 gap 40, cards 500×200
   Tablet  800×1009:  pad 48 30 120, gap 30, Frame 91 740×660 gap 30, cards 355×200
   Mobile  375×1464:  pad 1 14 120, gap 40, stack gap 14, cards 347×200
   Hover: borde neon + glow interno/externo + swap título/desc (sin translate/scale de card/icono).
   ============================================================================= */

.elementor-widget-profic_diferencial,
.elementor-widget-profic_diferencial:not(:last-child),
.elementor-widget-profic_diferencial > .elementor-widget-container {
	margin: 0 !important;
	margin-block-end: 0 !important;
	padding: 0 !important;
}

.profic-diferencial-wrapper {
	position: relative;
	width: 100%;
	padding: 1px 14px 120px;
	background-color: transparent;
	overflow: visible;
	isolation: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px;
}

@media (min-width: 800px) {
	.profic-diferencial-wrapper {
		padding: 48px 30px 120px;
		gap: 30px;
	}
}

@media (min-width: 1280px) {
	.profic-diferencial-wrapper {
		/* pt reducido: Casos ya aporta pb; evita doble colchón bajo el CTA */
		padding: 56px 120px 120px;
		gap: 60px;
	}
}

/* Background dual glows (apagados en .profic-fondos-armonicos) */
.profic-diferencial-bg-grad {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(187px);
	z-index: 0;
}

.profic-diferencial-bg-grad.bg-grad-left {
	width: 1073.72px;
	height: 774.8px;
	left: -902px;
	top: -575px;
	transform: matrix(-0.46, -0.89, -0.89, 0.46, 0, 0);
}

.profic-diferencial-bg-grad.bg-grad-right {
	width: 1049.49px;
	height: 759.22px;
	left: 889px;
	top: -32px;
	transform: matrix(0.87, 0.5, 0.5, -0.87, 0, 0);
}

/* Línea de fondo — Figma 1600×1116 anclada al centro de la sección */
.profic-diferencial-line-bg {
	position: absolute;
	pointer-events: none;
	z-index: 2;
	background-repeat: no-repeat;
	background-position: -206px 161px;
	background-size: 1052px 923px;
	width: 1600px;
	height: 1116px;
	opacity: 1;
}

.profic-diferencial-line-bg.show-desktop {
	display: none;
}

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

.profic-diferencial-line-bg.show-mobile {
	display: block;
	left: calc(50% - 1600px / 2 + 29.5px);
	top: calc(50% - 1116px / 2 - 155.5px);
}

@media (min-width: 800px) {
	.profic-diferencial-line-bg.show-desktop {
		display: none;
	}

	.profic-diferencial-line-bg.show-tablet {
		display: block;
		left: calc(50% - 1600px / 2 + 372px);
		top: calc(50% - 1116px / 2 + 589px);
	}

	.profic-diferencial-line-bg.show-mobile {
		display: none;
	}
}

@media (min-width: 1280px) {
	.profic-diferencial-line-bg.show-desktop {
		display: block;
		left: calc(50% - 1600px / 2 + 595px);
		top: calc(50% - 1116px / 2 + 488px);
	}

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

	.profic-diferencial-line-bg.show-mobile {
		display: none;
	}
}

/* Cabecera — Figma Título: gap 47, px 24. Mobile pad 29 24 */
.profic-diferencial-header {
	position: relative;
	width: 100%;
	max-width: 1040px;
	padding: 29px 24px;
	margin: 0;
	text-align: center;
	z-index: 3;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 47px;
}

@media (min-width: 800px) {
	.profic-diferencial-header {
		padding: 0 24px;
		max-width: 740px;
	}
}

@media (min-width: 1280px) {
	.profic-diferencial-header {
		padding: 0 24px;
		max-width: 1040px;
	}
}

.profic-diferencial-wrapper .profic-diferencial-title,
.profic-diferencial-wrapper h2.profic-diferencial-title {
	margin: 0;
	padding: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 48px;
	line-height: 1.2;
	color: #ffffff;
	text-align: center;
}

.profic-diferencial-wrapper .profic-diferencial-subtitle,
.profic-diferencial-wrapper p.profic-diferencial-subtitle {
	margin: 0;
	padding: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #d8d8d8;
	text-align: center;
	max-width: 299px;
}

@media (min-width: 800px) {
	.profic-diferencial-wrapper .profic-diferencial-subtitle,
	.profic-diferencial-wrapper p.profic-diferencial-subtitle {
		font-size: 17px;
		line-height: 1.5;
		letter-spacing: 0.01em;
		max-width: 628px;
	}
}

@media (min-width: 1280px) {
	.profic-diferencial-wrapper .profic-diferencial-subtitle,
	.profic-diferencial-wrapper p.profic-diferencial-subtitle {
		font-size: 17px;
		letter-spacing: 0.01em;
		max-width: 628px;
	}
}

/* Frame 91 — 2 cols desktop/tablet, stack mobile. Col 2: justify-center + stretch */
.profic-diferencial-columns {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	max-width: 347px;
	z-index: 4;
	box-sizing: border-box;
}

@media (max-width: 479px) {
	.profic-diferencial-wrapper .profic-diferencial-subtitle,
	.profic-diferencial-wrapper p.profic-diferencial-subtitle {
		max-width: none;
		padding: 0 10px;
	}

	.profic-diferencial-columns {
		max-width: 100%;
	}
}

.profic-diferencial-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
}

.profic-diferencial-col.col-2 {
	justify-content: flex-start;
}

@media (min-width: 800px) {
	.profic-diferencial-columns {
		flex-direction: row;
		align-items: flex-start;
		gap: 30px;
		max-width: 740px;
	}

	.profic-diferencial-col {
		flex: 1 1 0;
		min-width: 0;
		gap: 30px;
	}

	.profic-diferencial-col.col-2 {
		align-self: stretch;
		justify-content: center;
	}
}

@media (min-width: 1280px) {
	.profic-diferencial-columns {
		gap: 40px;
		max-width: 1040px;
	}

	.profic-diferencial-col {
		flex: 1 1 0;
		gap: 40px;
	}
}

/* Tarjeta — Figma 500×200 / 355×200 / 347×200; fill 0.01; radius 21; pad 30 */
.profic-diferencial-card {
	--fill-0: #4d07e7;
	position: relative;
	background: rgba(255, 255, 255, 0.01);
	border: none;
	border-radius: 21px;
	overflow: visible;
	isolation: isolate;
	width: 100%;
	min-width: 280px;
	height: 200px;
	min-height: 200px;
	max-height: 200px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex: none;
	flex-shrink: 0;
	transform: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	outline: none;
	transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

.profic-diferencial-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 3;
	border: 1.5px solid transparent;
	transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.profic-diferencial-card:hover {
	z-index: 3;
	transform: none;
	background: rgba(255, 255, 255, 0.03);
	box-shadow:
		0 0 10px color-mix(in srgb, var(--fill-0) 60%, transparent),
		0 0 28px color-mix(in srgb, var(--fill-0) 32%, transparent);
}

.profic-diferencial-card:hover::after {
	border-color: color-mix(in srgb, var(--fill-0) 72%, white 28%);
	box-shadow: inset 0 -32px 52px color-mix(in srgb, var(--fill-0) 30%, transparent);
}

/*
 * Glow interno — Ellipse 6 recortada al radio de la card.
 * overflow visible en la card deja el neon/glow exterior sin clip.
 */
.profic-diferencial-card-degrade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	opacity: 1;
	transform: none;
}

.profic-diferencial-card-degrade svg {
	display: none;
}

.profic-diferencial-card-degrade::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -18px;
	width: 394px;
	height: 75px;
	border-radius: 50%;
	background: var(--fill-0, #4d07e7);
	filter: blur(91.55px);
	opacity: 0.72;
	pointer-events: none;
	transform: translateX(-50%);
	transition: filter 0.45s ease, transform 0.45s ease, opacity 0.45s ease;
}

.profic-diferencial-card:hover .profic-diferencial-card-degrade::before {
	filter: blur(62px);
	transform: translateX(-50%) scale(1.28);
	opacity: 1;
}

/* Frame 14 — column, icon 90 + textos 48, pad 30 → 140px útiles */
.profic-diferencial-card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	padding: 30px;
	box-sizing: border-box;
	z-index: 1;
	width: 100%;
	height: 100%;
	flex: 1 0 0;
	min-width: 0;
}

.profic-diferencial-card-icon-container {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.profic-diferencial-card-svg-icon {
	display: block;
	position: relative;
	transform: none;
}

.profic-diferencial-card-svg-icon.icon-type-negocio svg {
	width: 45px;
	height: 63px;
}

.profic-diferencial-card-svg-icon.icon-type-equipo svg {
	width: 55px;
	height: 72px;
}

.profic-diferencial-card-svg-icon.icon-type-estrategia svg,
.profic-diferencial-card-svg-icon.icon-type-knowhow svg,
.profic-diferencial-card-svg-icon.icon-type-datos svg {
	width: 72px;
	height: 72px;
}

.profic-diferencial-card-custom-icon {
	display: block;
	max-width: 72px;
	max-height: 72px;
	object-fit: contain;
}

/* Textos Servicio — 48px overflow clip; desc a top 62 (hover la sube) */
.profic-diferencial-card-texts {
	position: relative;
	flex: none;
	flex-shrink: 0;
	width: 100%;
	height: 48px;
	overflow: hidden;
	margin: 0;
}

.profic-diferencial-card-title-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 340px;
	max-width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	transition: top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.profic-diferencial-wrapper .profic-diferencial-card-title,
.profic-diferencial-wrapper h3.profic-diferencial-card-title {
	margin: 0;
	padding: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 20px;
	line-height: 1.2;
	color: #ffffff;
	text-align: left;
	white-space: normal;
}

.profic-diferencial-card-desc-wrap {
	position: absolute;
	top: 62px;
	left: 4.5px;
	width: 331px;
	max-width: calc(100% - 4.5px);
	height: 32px;
	display: flex;
	align-items: center;
	transition: top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.profic-diferencial-wrapper .profic-diferencial-card-desc,
.profic-diferencial-wrapper p.profic-diferencial-card-desc {
	margin: 0;
	padding: 0;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	line-height: 1.24;
	color: rgba(255, 255, 255, 0.65);
	text-align: left;
}

.profic-diferencial-card:hover .profic-diferencial-card-title-wrap {
	top: -55px;
}

.profic-diferencial-card:hover .profic-diferencial-card-desc-wrap {
	top: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.profic-diferencial-card,
	.profic-diferencial-card::after,
	.profic-diferencial-card-degrade::before,
	.profic-diferencial-card-title-wrap,
	.profic-diferencial-card-desc-wrap {
		transition-duration: 0.01ms !important;
	}
}