/* ============================================================
   Ludik — Diferenciales ("¿Qué nos hace únicos?")
   3 pilares con anillo SVG gradiente que se dibuja al hacer scroll.
   ============================================================ */

.diferenciales {
	padding-block: var(--sp-4xl);
	background: var(--color-bg);
}

.diferenciales__head {
	text-align: center;
	margin-bottom: var(--sp-3xl);
}
.diferenciales__eyebrow {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-sm);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-md);
}
.diferenciales__badge {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	padding: 0.35em 0.8em;
	border-radius: var(--radius-pill);
	color: var(--c-neutral-900);
	background: var(--color-accent-green);
}
.diferenciales__title {
	font-size: clamp(1.9rem, 4.5vw, 3.25rem);
	letter-spacing: -0.02em;
}
.diferenciales__accent {
	background: var(--gradient-energy);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Grid de pilares ---------- */
.diferenciales__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-2xl);
}

.dif {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dif__media {
	position: relative;
	width: 150px;
	height: 150px;
	display: grid;
	place-items: center;
	margin-bottom: var(--sp-lg);
}
.dif__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg); /* el dibujo arranca arriba */
	overflow: visible;
}
.dif__ring-track {
	stroke: var(--color-border);
	stroke-width: 3;
}
.dif__ring-path {
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0; /* visible por defecto (sin JS); GSAP lo redibuja */
}
.dif__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	color: var(--c-ink-navy);
	transition: transform 0.4s var(--ease-spring), color 0.4s var(--ease-out);
}
.dif__icon svg { width: 100%; height: 100%; }
.dif:hover .dif__icon {
	color: var(--dif-accent, var(--color-primary));
	transform: scale(1.08);
}

.dif__title {
	font-size: var(--fs-h3);
	color: var(--dif-accent, var(--color-text));
	margin-bottom: var(--sp-sm);
}
.dif__desc {
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--color-text-muted);
	max-width: 32ch;
}

/* ---------- Estado de entrada (solo con .ludik-anim) ---------- */
.ludik-anim .dif__ring-path { stroke-dashoffset: 1; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
	.diferenciales__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
}

@media (prefers-reduced-motion: reduce) {
	.dif__ring-path { stroke-dashoffset: 0; }
}