/* ==========================================================================
   DataClever · Agent Steps (pasos con línea de recorrido animada, fondo claro)
   ========================================================================== */

.dc-asteps {
	--dcs-primary: #675df6;
	--dcs-soft: #8f8ff2;
	--dcs-tint: #d3d3ea;
	--dcs-tint2: #b7b7ed;
	--dcs-accent: #00dcb1;
	--dcs-ink: #090d19;
	--dcs-light: #f3f7f9;
	--dcs-bg: #ffffff;

	position: relative;
	z-index: 0;
	background: var(--dcs-bg);
	color: var(--dcs-ink);
	padding: clamp(48px, 7vw, 88px) 28px;
	font-family: Helvetica, Arial, sans-serif;
}

.dc-asteps *,
.dc-asteps *::before,
.dc-asteps *::after {
	box-sizing: border-box;
}

.dc-asteps .dc-asteps__list,
.dc-asteps .dc-asteps__step,
.dc-asteps .dc-asteps__icon,
.dc-asteps .dc-asteps__title,
.dc-asteps .dc-asteps__text {
	margin: 0;
	padding: 0;
}

.dc-asteps .dc-asteps__list {
	list-style: none;
	position: relative;
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(48px, 5vw, 64px) clamp(20px, 3vw, 40px);
}

.dc-asteps .dc-asteps__step {
	position: relative;
	z-index: 1;
	flex: 0 1 calc(25% - 30px);
	min-width: 220px;
	max-width: 280px;
	list-style: none;
}

.dc-asteps .dc-asteps__icon {
	position: relative;
	z-index: 1;
	width: 92px;
	height: 92px;
	border-radius: 24px;
	display: grid;
	place-items: center;
	color: var(--dcs-primary);
	background: var(--dcs-light);
	border: 1px solid var(--dcs-tint);
	box-shadow: 6px 6px 0 color-mix(in srgb, var(--dcs-tint2) 45%, transparent);
	margin-bottom: 22px;
	transition:
		border-color 0.4s ease,
		box-shadow 0.4s ease,
		transform 0.4s ease;
}

.dc-asteps .dc-asteps__icon svg {
	width: 60px;
	height: 60px;
	overflow: visible;
}

.dc-asteps .dc-asteps__icon img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.dc-asteps .dc-asteps__title {
	font-family: Quicksand, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.25;
	color: var(--dcs-ink);
	text-transform: none;
	margin-bottom: 10px;
}

.dc-asteps .dc-asteps__num {
	color: var(--dcs-primary);
	transition: color 0.4s ease;
}

.dc-asteps .dc-asteps__text {
	font-size: 16px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--dcs-ink) 72%, #fff);
	max-width: 30ch;
	/* tapa la línea de recorrido que pasa por detrás del texto */
	background: var(--dcs-bg);
}

/* ---------- Línea que recorre los pasos (la dibuja agent-steps.js) ---------- */
.dc-asteps .dc-asteps__route {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.dc-asteps .dc-asteps__route-base {
	fill: none;
	stroke: var(--dcs-tint);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 2 9;
	animation: dcAstepsRouteFlow 1.2s linear infinite;
}

@keyframes dcAstepsRouteFlow {
	to {
		stroke-dashoffset: -11;
	}
}

.dc-asteps .dc-asteps__route-fill {
	fill: none;
	stroke: var(--dcs-primary);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dc-asteps .dc-asteps__route-dot {
	fill: var(--dcs-accent);
	filter: drop-shadow(0 0 6px var(--dcs-accent));
}

.dc-asteps .dc-asteps__route-halo {
	fill: var(--dcs-accent);
	opacity: 0.25;
}

/* Estados que pone el JS según el avance de la línea */
.dc-asteps .dc-asteps__step.is-done .dc-asteps__icon {
	border-color: var(--dcs-primary);
	box-shadow: 6px 6px 0 color-mix(in srgb, var(--dcs-accent) 45%, transparent);
}

.dc-asteps .dc-asteps__step.is-active .dc-asteps__icon {
	transform: translateY(-4px);
	box-shadow:
		6px 6px 0 color-mix(in srgb, var(--dcs-accent) 55%, transparent),
		0 0 0 6px color-mix(in srgb, var(--dcs-accent) 18%, transparent);
}

.dc-asteps .dc-asteps__step.is-active .dc-asteps__num {
	color: var(--dcs-accent);
}

/* ---------- Móvil: una columna, icono a la izquierda ---------- */
@media (max-width: 640px) {
	.dc-asteps {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dc-asteps .dc-asteps__list {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.dc-asteps .dc-asteps__step {
		max-width: none;
		display: grid;
		grid-template-columns: 92px 1fr;
		column-gap: 20px;
		align-items: start;
	}

	.dc-asteps .dc-asteps__icon {
		grid-row: span 2;
		margin-bottom: 0;
	}

	.dc-asteps .dc-asteps__title {
		margin-top: 6px;
	}
}

/* ---------- Animaciones de los iconos ---------- */
.dcs1-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: dcs1-draw 3.2s ease-in-out infinite;
}

@keyframes dcs1-draw {
	0%,
	15% {
		stroke-dashoffset: 1;
	}
	40%,
	85% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

.dcs1-shield {
	transform-box: fill-box;
	transform-origin: center;
	animation: dcs1-guard 3.2s ease-in-out infinite;
}

@keyframes dcs1-guard {
	0%,
	35%,
	100% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.08);
	}
	55% {
		transform: scale(1);
	}
}

.dcs2-dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: dcs2-type 1.2s ease-in-out infinite;
}

.dcs2-dot:nth-child(2) {
	animation-delay: 0.15s;
}

.dcs2-dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes dcs2-type {
	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.45;
	}
	30% {
		transform: translateY(-2.5px);
		opacity: 1;
	}
}

.dcs2-reply {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: dcs2-reply 3.6s ease-in-out infinite;
}

@keyframes dcs2-reply {
	0%,
	30% {
		stroke-dashoffset: 1;
	}
	55%,
	85% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

.dcs3-flow path {
	stroke-dasharray: 1.5 3.5;
	animation: dcs3-flow 1s linear infinite;
}

@keyframes dcs3-flow {
	to {
		stroke-dashoffset: -5;
	}
}

.dcs3-lock {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: dcs3-lock 3s ease-in-out infinite;
}

@keyframes dcs3-lock {
	0%,
	70%,
	100% {
		transform: scale(1);
	}
	80% {
		transform: scale(1.12);
	}
	90% {
		transform: scale(1);
	}
}

.dcs4-l,
.dcs4-ok {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.dcs4-l1 {
	animation: dcs4-l1 4s ease-in-out infinite;
}

.dcs4-l2 {
	animation: dcs4-l2 4s ease-in-out infinite;
}

.dcs4-l3 {
	animation: dcs4-l3 4s ease-in-out infinite;
}

.dcs4-ok {
	animation: dcs4-ok 4s ease-in-out infinite;
}

@keyframes dcs4-l1 {
	0%,
	5% {
		stroke-dashoffset: 1;
	}
	18%,
	88% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

@keyframes dcs4-l2 {
	0%,
	18% {
		stroke-dashoffset: 1;
	}
	31%,
	88% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

@keyframes dcs4-l3 {
	0%,
	31% {
		stroke-dashoffset: 1;
	}
	42%,
	88% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

@keyframes dcs4-ok {
	0%,
	45% {
		stroke-dashoffset: 1;
	}
	58%,
	88% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

.dcs5-gear {
	transform-box: view-box;
	transform-origin: 32px 32px;
	animation: dcs5-spin 8s linear infinite;
}

@keyframes dcs5-spin {
	to {
		transform: rotate(360deg);
	}
}

.dcs5-core {
	transform-box: fill-box;
	transform-origin: center;
	animation: dcs5-core 2s ease-in-out infinite;
}

@keyframes dcs5-core {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.75);
	}
}

.dcs5-ring {
	transform-box: fill-box;
	transform-origin: center;
	animation: dcs5-ring 2s ease-out infinite;
}

@keyframes dcs5-ring {
	0% {
		transform: scale(0.6);
		opacity: 1;
	}
	100% {
		transform: scale(1.25);
		opacity: 0;
	}
}

.dcs6-chart {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: dcs6-chart 4s ease-in-out infinite;
}

@keyframes dcs6-chart {
	0%,
	5% {
		stroke-dashoffset: 1;
	}
	40%,
	90% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

.dcs6-pt {
	opacity: 0;
	animation: dcs6-pt 4s ease-in-out infinite;
}

@keyframes dcs6-pt {
	0%,
	38% {
		opacity: 0;
		transform: translateY(0);
	}
	42% {
		opacity: 1;
		transform: translateY(0);
	}
	55% {
		opacity: 1;
		transform: translateY(3px);
	}
	70% {
		opacity: 1;
		transform: translateY(-3px);
	}
	82% {
		opacity: 1;
		transform: translateY(0);
	}
	90% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(0);
	}
}

.dcs7-loop {
	transform-box: view-box;
	transform-origin: 32px 32px;
	animation: dcs7-loop 6s ease-in-out infinite;
}

@keyframes dcs7-loop {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(-20deg);
	}
	100% {
		transform: rotate(0);
	}
}

.dcs7-bar {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: dcs7-grow 2.4s ease-in-out infinite;
}

.dcs7-bar:nth-child(2) {
	animation-delay: 0.2s;
}

.dcs7-bar:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes dcs7-grow {
	0%,
	100% {
		transform: scaleY(0.45);
	}
	50% {
		transform: scaleY(1);
	}
}

/* Fuera de pantalla se pausan las animaciones (lo marca el JS) */
.dc-asteps.is-paused * {
	animation-play-state: paused !important;
}

/* Movimiento reducido, o animación desactivada desde el widget */
@media (prefers-reduced-motion: reduce) {
	.dc-asteps * {
		animation: none !important;
	}

	.dc-asteps [pathLength] {
		stroke-dashoffset: 0 !important;
	}

	.dc-asteps .dcs6-pt {
		opacity: 1 !important;
	}

	.dc-asteps .dc-asteps__route-dot,
	.dc-asteps .dc-asteps__route-halo {
		display: none;
	}
}

.dc-asteps.is-static * {
	animation: none !important;
}

.dc-asteps.is-static [pathLength] {
	stroke-dashoffset: 0 !important;
}

.dc-asteps.is-static .dcs6-pt {
	opacity: 1 !important;
}

.dc-asteps.is-static .dc-asteps__route-dot,
.dc-asteps.is-static .dc-asteps__route-halo {
	display: none;
}