/*
 * Widget sy-source-funnel (Foundation de Platform). Medidas: design/platform.md §2.
 * Mobile: grilla de 3 columnas, flecha y barra. Desde 1024: fila de fuentes,
 * curvas (SVG generado por el widget) y barra con el logo.
 */

.sy-funnel {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sy-funnel__sources {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}

.sy-funnel__source {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 65px;
	padding: 12px 6px;
	border: 1px solid #E3E7F2;
	border-radius: 14px;
	background: var(--sy-white);
	box-shadow: 0 10px 24px -20px rgba(10, 23, 145, 0.6);
	text-align: center;
}

.sy-funnel__icon {
	color: var(--sy-ultramarine);
	font-size: 18px;
	line-height: 0;
}

.sy-funnel__label {
	color: var(--sy-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 15px;
}

.sy-funnel__lines {
	display: none;
}

.sy-funnel__arrow {
	width: 24px;
	height: 56px;
	fill: none;
	stroke: var(--sy-green);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sy-funnel__bar {
	display: grid;
	place-items: center;
	gap: 6px;
	width: 100%;
	height: 72px;
	border-radius: 18px;
	background:
		var(--sy-overlay-media),
		url("../../img/bg-waves.webp") center / cover no-repeat,
		var(--sy-deep);
	box-shadow: 0 30px 60px -30px rgba(10, 23, 145, 0.8);
}

.sy-funnel__logo {
	display: block;
	width: 244px;
	height: auto;
}

.sy-funnel__bar-text {
	color: var(--sy-on-dark);
	font-size: 13px;
	font-weight: 600;
}

@media (min-width: 1024px) {
	.sy-funnel__sources {
		display: flex;
		gap: 10px;
	}

	.sy-funnel__source {
		flex: 1 1 0;
		min-width: 0;
		gap: 8px;
		min-height: 72px;
		padding: 14px 8px;
		border-radius: 16px;
	}

	.sy-funnel__label {
		font-size: 13px;
		line-height: 16px;
	}

	/* viewBox de 1200×70 estirado al ancho: a 1200 el trazo mide 1.5 exacto. */
	.sy-funnel__lines {
		display: block;
		width: 100%;
		height: 70px;
		fill: none;
		stroke-width: 1.5;
	}

	.sy-funnel__arrow {
		display: none;
	}

	.sy-funnel__bar {
		height: 86px;
		border-radius: 22px;
	}

	.sy-funnel__logo {
		width: 312px;
	}
}