/* =============================================================================
   Widget: Profic Cards de texto (slug profic_ecosistema)
   Figma Prueba-WPFIG — Desktop 2233:4581 / Tablet 2233:4799 / Mobile 2233:5000

   Desktop 1280: título 45 · gap 100 · pastillas pad 0 20 · 4 columnas gap 20
   Tablet   800: título 36 · gap 100 · pastillas pad 0 20 · 2 columnas gap 20
   Mobile   375: título 34 · gap 100 · frame pad 0 10     · 1 columna gap 10
   ============================================================================= */

.elementor-widget-profic_ecosistema > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

.profic-ecosistema {
	position: relative;
	width: 100%;
	padding: 100px 0 160px;
	box-sizing: border-box;
	/* Figma: la sección no recorta (clipsContent false) — los brillos cruzan a las secciones vecinas.
	   Solo se recorta en horizontal para no generar scroll lateral. */
	overflow-x: clip;
	background-color: transparent;
	color: #fff;
	font-family: "Amsi Pro", sans-serif;
}

.profic-ecosistema__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 100px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
}

@media (min-width: 800px) {
	.profic-ecosistema__inner {
		padding: 0;
	}
}

.profic-ecosistema__header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}

.profic-ecosistema .profic-ecosistema__subtitle {
	max-width: 744px;
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
}

@media (min-width: 800px) {
	.profic-ecosistema .profic-ecosistema__subtitle {
		font-size: 14px;
		line-height: 1.46;
	}
}

@media (min-width: 1280px) {
	.profic-ecosistema .profic-ecosistema__subtitle {
		font-size: 18px;
		line-height: 1.48;
	}
}

.profic-ecosistema .profic-ecosistema__title {
	position: relative;
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 34px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
}

@media (min-width: 800px) {
	.profic-ecosistema .profic-ecosistema__title {
		font-size: 36px;
	}
}

@media (min-width: 1280px) {
	.profic-ecosistema .profic-ecosistema__title {
		font-size: 45px;
	}
}

/* ---------- Brillos (Figma layer blur R → CSS blur R/2) ---------- */

.profic-ecosistema__glows {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.profic-ecosistema__glow {
	position: absolute;
	display: block;
	background: #5d0fec;
	opacity: 0.42;
	filter: blur(119.9px);
}

.profic-ecosistema__glow--a {
	left: -201px;
	top: 147px;
	width: 342px;
	height: 358px;
}

.profic-ecosistema__glow--b {
	left: 342px;
	top: 500px;
	width: 244px;
	height: 256px;
}

.profic-ecosistema__glow--c {
	left: 824px;
	top: 37px;
	width: 532px;
	height: 358px;
	opacity: 0.46;
	filter: blur(252.3px);
}

.profic-ecosistema__glow--d {
	left: -78px;
	top: 815px;
	width: 342px;
	height: 778px;
}

@media (min-width: 800px) {
	.profic-ecosistema__glow--d {
		display: none;
	}
}

/* ---------- Pastillas ---------- */

.profic-ecosistema__pastillas {
	position: relative;
}

@media (min-width: 800px) {
	.profic-ecosistema__pastillas {
		padding: 0 20px;
	}
}

.profic-ecosistema .profic-ecosistema__linea {
	position: absolute;
	left: -145px;
	top: -220px;
	width: 1338px;
	max-width: none;
	height: 697px;
	pointer-events: none;
}

.profic-ecosistema__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

@media (min-width: 800px) {
	.profic-ecosistema__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1280px) {
	.profic-ecosistema__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1279px) {
	.profic-ecosistema--swap .profic-ecosistema__card--second {
		order: -1;
	}
}

.profic-ecosistema__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	padding: 30px;
	border-radius: 21px;
	background: rgba(9, 5, 17, 0.7);
	box-sizing: border-box;
}

.profic-ecosistema .profic-ecosistema__card-title {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

/* Línea de 0px de alto en Figma con trazo de 2px hacia arriba: no ocupa espacio en el flujo */
.profic-ecosistema__card-divider {
	display: block;
	width: 22px;
	height: 2px;
	margin-top: -2px;
	background: #5d0fec;
}

.profic-ecosistema .profic-ecosistema__card-text {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

@media (min-width: 800px) {
	.profic-ecosistema .profic-ecosistema__card-title {
		font-size: 17px;
	}

	.profic-ecosistema .profic-ecosistema__card-text {
		font-size: 15px;
	}
}

@media (min-width: 1280px) {
	.profic-ecosistema .profic-ecosistema__card-title {
		font-size: 20px;
		line-height: 1.2;
	}
}

/* ---------- Modo lista — Figma Prueba-WPFIG 2245:6256 ----------
   Desktop: pad 0 0 120 · pastillas 800 centradas (pad 0 240) gap 20 · dos líneas de fondo */

.profic-ecosistema--list .profic-ecosistema__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 800px;
	margin-inline: auto;
}

@media (min-width: 1280px) {
	.profic-ecosistema--list {
		padding: 0 0 120px;
	}
}

/* Mismo trazo que la grilla: la imagen asoma 80px a la izquierda y 58px arriba del vector */
.profic-ecosistema .profic-ecosistema__linea--a {
	left: -467px;
	top: -148px;
}

.profic-ecosistema .profic-ecosistema__linea--b {
	left: 352px;
	top: 361px;
}

/* ---------- Hover: borde y sombra que el diseño deja ocultos en cada pastilla ---------- */

.profic-ecosistema--hover .profic-ecosistema__card,
.profic-ecosistema[data-profic-anim="highlight"] .profic-ecosistema__card {
	transition: box-shadow 0.35s cubic-bezier(0, 0, 0.58, 1);
}

.profic-ecosistema--hover .profic-ecosistema__card::after,
.profic-ecosistema[data-profic-anim="highlight"] .profic-ecosistema__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid #5d0fec;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.35s cubic-bezier(0, 0, 0.58, 1);
	pointer-events: none;
}

.profic-ecosistema--hover .profic-ecosistema__card:hover,
.profic-ecosistema .profic-ecosistema__card.is-lit {
	box-shadow: 0 0 106.2px rgba(93, 15, 236, 0.18);
}

.profic-ecosistema--hover .profic-ecosistema__card:hover::after,
.profic-ecosistema .profic-ecosistema__card.is-lit::after {
	opacity: 1;
}

/* Resaltado en secuencia: transición más lenta que el hover para que se lea como un recorrido */
.profic-ecosistema[data-profic-anim="highlight"] .profic-ecosistema__card,
.profic-ecosistema[data-profic-anim="highlight"] .profic-ecosistema__card::after {
	transition-duration: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.profic-ecosistema--hover .profic-ecosistema__card,
	.profic-ecosistema--hover .profic-ecosistema__card::after,
	.profic-ecosistema[data-profic-anim="highlight"] .profic-ecosistema__card,
	.profic-ecosistema[data-profic-anim="highlight"] .profic-ecosistema__card::after {
		transition: none;
	}
}