/* Ecaptor — «Cómo funciona» de la portada de la escalera (19-10-2026)
 *
 * Cuatro pasos, cada uno con su pantalla en miniatura hecha con HTML y CSS.
 * Lo que se mueve arranca cuando la sección entra en pantalla: assets/flujo.js
 * le pone `.es-en-marcha`. Sin JavaScript, o con el movimiento reducido, todo
 * se ve quieto y completo.
 */

.ec-flujo {
	--fl-azul: #2f6bff;
	--fl-cian: #5ee0ff;
	--fl-verde: #3ddc97;
	--fl-ambar: #f5b84b;
	--fl-vidrio: rgba(255, 255, 255, 0.04);
	--fl-borde: rgba(143, 180, 255, 0.16);
	--fl-tenue: #8d99bd;
	--fl-curva: cubic-bezier(.2, .8, .2, 1);
}

/* La retícula del fondo, como en el formulario */
.ec-flujo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(143, 180, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 180, 255, 0.07) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 25%, transparent 75%);
	        mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 25%, transparent 75%);
	pointer-events: none;
}

/* ── La línea que une los pasos ─────────────────────────────── */
.ec-flujo__linea {
	display: none;
	position: relative;
	height: 2px;
	margin: 0 12.5% -1px;
	background: linear-gradient(90deg, rgba(47, 107, 255, .15), rgba(94, 224, 255, .35), rgba(47, 107, 255, .15));
}
.ec-flujo__linea i {
	position: absolute;
	top: -3px;
	left: 0;
	width: 120px;
	height: 8px;
	border-radius: 8px;
	background: radial-gradient(closest-side, var(--fl-cian), transparent);
	filter: blur(1px);
	opacity: 0;
}
.es-en-marcha .ec-flujo__linea i { animation: fl-recorre 4.8s linear infinite; }
@keyframes fl-recorre {
	0% { left: -60px; opacity: 0; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { left: calc(100% - 60px); opacity: 0; }
}

/* ── Los pasos ──────────────────────────────────────────────── */
.ec-flujo__pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}
.ec-flujo__paso {
	position: relative;
	padding: 1rem 1rem 1.5rem;
	border: 1px solid var(--fl-borde);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
	transition: border-color .3s, transform .3s var(--fl-curva), box-shadow .3s;
}
.ec-flujo__paso:hover {
	border-color: rgba(94, 224, 255, .4);
	transform: translateY(-3px);
	box-shadow: 0 24px 60px -30px rgba(47, 107, 255, .7);
}
.ec-flujo__paso h3 { margin: .35rem .5rem .5rem; font-size: 1.25rem; letter-spacing: -.02em; }
.ec-flujo__paso > p:last-child { margin: 0 .5rem; font-size: .975rem; line-height: 1.55; }

.ec-flujo__cuando {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 1.15rem .5rem 0 !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--fl-cian) !important;
}
.ec-flujo__cuando span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(94, 224, 255, .45);
	background: rgba(47, 107, 255, .18);
	color: #fff;
	box-shadow: 0 0 16px rgba(47, 107, 255, .55);
}

/* La pantalla de cada paso */
.ec-flujo__escena {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 262px;
	padding: 1rem;
	border-radius: 16px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(47, 107, 255, .35), transparent 60%),
		#070b22;
	border: 1px solid rgba(143, 180, 255, .1);
}

/* ── Piezas comunes de las miniaturas ───────────────────────── */
.ec-mini {
	width: 100%;
	max-width: 260px;
	font-size: 12.5px;
	line-height: 1.35;
	color: #e9eeff;
}
.ec-mini p { margin: 0; color: inherit; }
.ec-mini__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fl-tenue) !important;
}

/* 1 · El formulario */
.ec-mini__pregunta { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px !important; }
.ec-mini__opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ec-mini__opciones li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border-radius: 9px;
	border: 1px solid var(--fl-borde);
	background: rgba(18, 26, 58, .7);
}
.ec-mini__opciones kbd {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1px solid var(--fl-borde);
	font: 500 9.5px var(--wp--preset--font-family--mono);
	color: var(--fl-tenue);
}
.ec-mini__opciones .es-elegida {
	border-color: var(--fl-azul);
	background: linear-gradient(90deg, rgba(47, 107, 255, .35), rgba(47, 107, 255, .1));
	box-shadow: 0 0 0 1px var(--fl-azul), 0 8px 24px -8px rgba(47, 107, 255, .8);
}
.ec-mini__opciones .es-elegida kbd { background: var(--fl-azul); border-color: var(--fl-azul); color: #fff; }
.ec-mini__opciones .es-elegida i {
	margin-left: auto;
	width: 12px;
	height: 7px;
	border: 2.5px solid var(--fl-verde);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg) translate(1px, -2px);
}
.ec-mini__enviar {
	margin-top: 10px !important;
	padding: 8px;
	border-radius: 9px;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(135deg, #3b78ff, #2456e0);
	box-shadow: 0 8px 22px -8px rgba(47, 107, 255, .9);
}
.es-en-marcha .ec-mini--form .es-elegida { animation: fl-elige 4.8s var(--fl-curva) infinite; }
@keyframes fl-elige {
	0%, 12% { border-color: var(--fl-borde); background: rgba(18, 26, 58, .7); box-shadow: none; }
	22%, 100% { border-color: var(--fl-azul); background: linear-gradient(90deg, rgba(47, 107, 255, .35), rgba(47, 107, 255, .1)); box-shadow: 0 0 0 1px var(--fl-azul), 0 8px 24px -8px rgba(47, 107, 255, .8); }
}

/* 2 · El anuncio */
.ec-mini--anuncio {
	padding: 10px;
	border-radius: 14px;
	background: #fff;
	color: #0d1330;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8);
}
.ec-mini__perfil { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; }
.ec-mini__perfil b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 10.5px;
	color: #fff;
	background: linear-gradient(135deg, #2f6bff, #0aa8c9);
}
.ec-mini__perfil span { display: grid; font-size: 10.5px; color: #6b7593; }
.ec-mini__perfil strong { font-size: 12.5px; color: #0d1330; }
.ec-mini__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 108px;
	padding: 10px;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, #0b2a8a, #1f5fd6 55%, #0aa8c9);
}
.ec-mini__visual svg {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 46px;
	height: 46px;
	color: rgba(255, 255, 255, .85);
}
.ec-mini__visual p { font-size: 13px; line-height: 1.25; color: #fff !important; }
.ec-mini__visual b { font-size: 15px; }
.ec-mini__pie { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px !important; font-size: 10.5px; color: #6b7593 !important; }
.ec-mini__pie b { flex: none; padding: 5px 9px; border-radius: 7px; background: #e8eefc; color: #1f4fd6; font-size: 10.5px; }
.es-en-marcha .ec-mini--anuncio { animation: fl-flota 6s ease-in-out infinite; }
@keyframes fl-flota { 50% { transform: translateY(-5px) rotate(-.6deg); } }

/* 3 · Los avisos */
.ec-mini--avisos { display: grid; gap: 7px; }
.ec-mini__aviso {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 8px 9px;
	border-radius: 12px;
	border: 1px solid var(--fl-borde);
	background: rgba(30, 40, 80, .75);
	backdrop-filter: blur(6px);
}
.ec-mini__aviso img { flex: none; border-radius: 7px; }
.ec-mini__aviso p { display: grid; font-size: 11.5px; color: #c9d3ef !important; }
.ec-mini__aviso span { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fl-tenue); }
.ec-mini__aviso strong { font-size: 12.5px; color: #fff; }
.ec-mini__aviso:first-child { border-color: rgba(94, 224, 255, .45); box-shadow: 0 0 22px -6px rgba(94, 224, 255, .55); }
.es-en-marcha .ec-mini__aviso { animation: fl-llega 4.8s var(--fl-curva) infinite; animation-delay: calc(var(--i) * -.25s); }
.es-en-marcha .ec-mini__aviso:first-child { animation-name: fl-llega-primero; }
@keyframes fl-llega { 0%, 10% { transform: translateY(-46px); } 22%, 100% { transform: none; } }
@keyframes fl-llega-primero { 0%, 10% { opacity: 0; transform: translateY(-14px) scale(.96); } 22%, 100% { opacity: 1; transform: none; } }

/* 4 · La app */
.ec-mini__chip { padding: 2px 7px; border-radius: 99px; background: rgba(47, 107, 255, .25); color: #cfe0ff; letter-spacing: .04em; text-transform: none; }
.ec-mini__fila {
	display: grid;
	grid-template-columns: 26px 1fr auto 26px;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	margin-top: 6px;
	border-radius: 11px;
	border: 1px solid var(--fl-borde);
	background: rgba(18, 26, 58, .7);
}
.ec-mini__fila > b {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 9.5px;
	background: rgba(143, 180, 255, .16);
	color: #cfe0ff;
}
.ec-mini__fila p { display: grid; min-width: 0; font-size: 10.5px; color: var(--fl-tenue) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-mini__fila strong { font-size: 12px; color: #fff; }
.ec-mini__estado { padding: 2px 7px; border-radius: 99px; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.ec-mini__estado--nuevo { background: rgba(47, 107, 255, .25); color: #a9c4ff; }
.ec-mini__estado--curso { background: rgba(245, 184, 75, .18); color: var(--fl-ambar); }
.ec-mini__estado--ganado { background: rgba(61, 220, 151, .16); color: var(--fl-verde); }
.ec-mini__llamar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1faa59;
	color: #fff;
}
.ec-mini__llamar svg { width: 13px; height: 13px; }
.ec-mini__fila:first-of-type { border-color: rgba(94, 224, 255, .4); }
.es-en-marcha .ec-mini__fila:first-of-type .ec-mini__llamar { animation: fl-late 1.8s ease-out infinite; }
@keyframes fl-late {
	0% { box-shadow: 0 0 0 0 rgba(31, 170, 89, .7); }
	70%, 100% { box-shadow: 0 0 0 10px rgba(31, 170, 89, 0); }
}

/* ── Quién hace qué ─────────────────────────────────────────── */
.ec-flujo__reparto {
	display: grid;
	gap: 1rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.ec-flujo__reparto > div {
	padding: 1.4rem 1.5rem;
	border-radius: 20px;
	border: 1px solid var(--fl-borde);
	background: var(--fl-vidrio);
}
.ec-flujo__reparto .ec-flujo__tu {
	border-color: rgba(47, 107, 255, .55);
	background: linear-gradient(135deg, rgba(47, 107, 255, .22), rgba(10, 168, 201, .08));
}
.ec-flujo__quien {
	margin: 0 0 .75rem !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fl-cian) !important;
}
.ec-flujo__reparto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ec-flujo__reparto li { position: relative; padding-left: 1.6rem; color: #dfe6fb; }
.ec-flujo__reparto li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .75rem;
	height: .45rem;
	border: 2px solid var(--fl-verde);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}
.ec-flujo__tu .ec-btn { margin-top: 1.25rem; }

/* ── Escritorio ─────────────────────────────────────────────── */
@media (min-width: 720px) {
	.ec-flujo__pasos { grid-template-columns: repeat(2, 1fr); }
	.ec-flujo__reparto { grid-template-columns: 1.4fr 1fr; }
}
@media (min-width: 1080px) {
	.ec-flujo__linea { display: block; margin-bottom: 1.25rem; }
	.ec-flujo__pasos { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ec-flujo *, .ec-flujo *::before { animation: none !important; transition: none !important; }
}