/* =============================================================================
   Widget: Profic QIP
   Figma Design-Profic-Mike — Desktop 258:4332 / Tablet 258:4795 / Mobile 258:5236
   (estructura cacheada 112:8783 / 112:9246 / 112:9687)

   Desktop 1280×1020: pad 170 120 · cards LEFT 447×200 gap 40 · copy RIGHT 447 · gap cols 146
   Tablet   800×1190: pad 120 60  · copy TOP 680 · cards 680×200 gap 30 · gap bloques 60
   Mobile   375×1206: pad 120 14 · copy TOP 347 · cards 347×200 gap 29 · gap bloques 30
   ============================================================================= */

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

.profic-qip-section {
	position: relative;
	width: 100%;
	padding: 120px 14px;
	box-sizing: border-box;
	overflow: visible;
	isolation: auto;
	background: transparent;
}

@media (min-width: 800px) {
	.profic-qip-section {
		padding: 120px 60px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-section {
		padding: 170px 120px;
	}
}

/* Fondos blur — anclas relativas al frame Figma */
.profic-qip-bg-grad {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(187px);
	z-index: 0;
	opacity: 0.92;
}

.profic-qip-bg-grad--a {
	width: 1189px;
	height: 945px;
	left: calc(50% - 187.5px + 36px);
	top: -69px;
}

.profic-qip-bg-grad--b {
	width: 1288px;
	height: 1182px;
	left: calc(50% - 187.5px + 1028px);
	top: 571px;
}

@media (min-width: 800px) {
	.profic-qip-bg-grad--a {
		left: calc(50% - 400px + 223px);
		top: -2px;
	}

	.profic-qip-bg-grad--b {
		left: calc(50% - 400px + 1028px);
		top: 571px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-bg-grad--a {
		width: 1167px;
		height: 819px;
		left: calc(50% - 640px + 300px);
		top: 135px;
	}

	.profic-qip-bg-grad--b {
		left: calc(50% - 640px + 938px);
		top: 634px;
	}
}

/* Layout: mobile/tablet = copy → cards; desktop = cards | copy
 * Mobile Figma Card SEO: 335 wide */
.profic-qip-layout {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 335px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 30px;
	box-sizing: border-box;
}

@media (min-width: 800px) {
	.profic-qip-layout {
		max-width: 680px;
		gap: 60px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-layout {
		max-width: 1040px;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 146px;
	}
}

.profic-qip-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 800px) {
	.profic-qip-copy {
		gap: 4px;
		max-width: 680px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-copy {
		order: 2;
		flex: 0 0 447px;
		width: 447px;
		max-width: 447px;
		gap: 40px;
		padding-top: 0;
	}
}

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

@media (min-width: 800px) {
	.profic-qip-section .profic-qip-title,
	.profic-qip-section h2.profic-qip-title {
		font-size: 40px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-section .profic-qip-title,
	.profic-qip-section h2.profic-qip-title {
		font-size: 48px;
	}
}

.profic-qip-section .profic-qip-subtitle,
.profic-qip-section p.profic-qip-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: left;
	max-width: 100%;
}

@media (min-width: 800px) {
	.profic-qip-section .profic-qip-subtitle,
	.profic-qip-section p.profic-qip-subtitle {
		font-size: 17px;
		max-width: 569px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-section .profic-qip-subtitle,
	.profic-qip-section p.profic-qip-subtitle {
		max-width: 447px;
	}
}

.profic-qip-cards {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 29px;
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 800px) {
	.profic-qip-cards {
		gap: 30px;
	}
}

@media (min-width: 1280px) {
	.profic-qip-cards {
		order: 1;
		flex: 0 0 447px;
		width: 447px;
		max-width: 447px;
		gap: 40px;
	}
}

/* Card — mobile-first Figma Card SEO 1 Mobile: 335×270 / pad 30 / radius 21
 * Tablet+Desktop: alto 200 (artboards 680/447)
 * Default: icono + título + Boton mas (+)
 * Hover: desc cubre icono/título; + desvanece y × aparece (crossfade)
 */
.profic-qip-card {
	--fill-0: #4f10cd;
	/* Hover más suave: más lento + ease de salida suave */
	--qip-ease: cubic-bezier(0.33, 0.1, 0.25, 1);
	--qip-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--qip-duration: 0.9s;
	--qip-duration-mas: 0.75s;
	position: relative;
	width: 100%;
	min-width: 280px;
	height: 270px;
	min-height: 270px;
	max-height: 270px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.01);
	border-radius: 21px;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	flex: none;
	transition: background-color 0.75s var(--qip-ease), box-shadow 0.85s var(--qip-ease);
}

@media (min-width: 800px) {
	.profic-qip-card {
		height: 200px;
		min-height: 200px;
		max-height: 200px;
		min-width: 0;
	}
}

.profic-qip-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.75s var(--qip-ease), box-shadow 0.85s var(--qip-ease);
}

.profic-qip-card:hover {
	z-index: 3;
	background: rgba(255, 255, 255, 0.04);
	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-qip-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);
}

.profic-qip-card-degrade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}

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

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

/* Frame interno — pad 30; icon 90 + título */
.profic-qip-card-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	padding: 30px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.profic-qip-card-icon {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	transition:
		opacity var(--qip-duration) var(--qip-ease),
		transform var(--qip-duration) var(--qip-ease-out);
}

.profic-qip-card-svg-icon {
	display: block;
	position: relative;
	line-height: 0;
}

.profic-qip-card-svg-icon svg {
	display: block;
}

.profic-qip-card-svg-icon.icon-type-circulos svg,
.profic-qip-card-svg-icon.icon-type-check svg {
	width: 90px;
	height: 90px;
}

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

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

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

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

.profic-qip-section .profic-qip-card-title,
.profic-qip-section h3.profic-qip-card-title {
	margin: 0;
	padding: 0;
	max-width: 340px;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: #ffffff;
	text-align: left;
	transition:
		opacity var(--qip-duration) var(--qip-ease),
		transform var(--qip-duration) var(--qip-ease-out);
}

/* Desc: fuera de vista → en hover cubre icono + título (como Figma) */
.profic-qip-card-desc-wrap {
	position: absolute;
	left: 30px;
	right: 70px; /* deja hueco al Boton mas */
	top: 30px;
	bottom: 30px;
	max-width: 315px; /* el valor que quieras */
	width: 100%; /* el valor que quieras */
	z-index: 2;
	display: flex;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
		/*Centrar verticalmente el texto*/
		display: flex;
		align-items: center;
	transition:
		opacity var(--qip-duration) var(--qip-ease-out),
		transform var(--qip-duration) var(--qip-ease-out);
	transition-delay: 0s;
}

.profic-qip-section .profic-qip-card-desc,
.profic-qip-section p.profic-qip-card-desc {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: "Amsi Pro", sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.5;
	color: #ffffff;
	text-align: left;

}

.profic-qip-card:hover .profic-qip-card-icon,
.profic-qip-card:hover .profic-qip-card-title {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}

.profic-qip-card:hover .profic-qip-card-desc-wrap {
	opacity: 1;
	transform: translateY(0);
	/* La desc entra un poco después → crossfade más fluido */
	transition-delay: 0.12s;
}

/*
 * Boton mas — + gira suavemente 45° y queda en ×
 */
.profic-qip-card-mas {
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 4;
	width: 40px;
	height: 40px;
	color: rgba(255, 255, 255, 0.75);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.75s var(--qip-ease);
}

.profic-qip-card-mas-icon {
	display: block;
	width: 40px;
	height: 40px;
	transform: rotate(0deg);
	transform-origin: center center;
	transition: transform var(--qip-duration-mas) var(--qip-ease-out);
	will-change: transform;
}

.profic-qip-card:hover .profic-qip-card-mas {
	color: #ffffff;
}

.profic-qip-card:hover .profic-qip-card-mas-icon {
	transform: rotate(45deg);
}

@media (min-width: 800px) and (max-width: 1279px) {
	.profic-qip-card-desc-wrap {
		max-width: 510px;
		left: 30px;
		right: 70px;
	}
}

@media (max-width: 799px) {
	.profic-qip-cards {
		gap: 30px;
	}

	.profic-qip-card-desc-wrap {
		max-width: 205px;
		width: 100%;
		left: 30px;
		right: 56px;
		top: 30px;
		bottom: 56px;
	}
}

@media (max-width: 479px) {
	.profic-qip-layout {
		max-width: min(335px, 100%);
	}

	.profic-qip-card-desc-wrap {
		left: 30px;
		right: 52px;
	}
}

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

	.profic-qip-card:hover .profic-qip-card-icon,
	.profic-qip-card:hover .profic-qip-card-title {
		transform: none;
	}

	.profic-qip-card-desc-wrap {
		transform: none;
	}

	.profic-qip-card:hover .profic-qip-card-mas-icon {
		transform: rotate(45deg);
	}
}