/* ═══════════════════════════════════════════════════════════════════════════
   Demo del producto: escenario + pasos.

   Reglas de movimiento:
     · El escenario tiene alto fijo. Cambiar de paso nunca mueve la página.
     · Los paneles se funden, no saltan: la continuidad la da el propio marco.
     · La barra del paso activo mide el tiempo que queda; es el único elemento
       que se mueve solo, y se detiene en cuanto el usuario interviene.
   ═══════════════════════════════════════════════════════════════════════════ */

.demo {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: center;
}

/* ── Escenario ────────────────────────────────────────────────────────────── */

.demo-stage {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: var(--r-card);
	border: 1px solid var(--line-strong);
	overflow: hidden;
	background: radial-gradient(60% 70% at 50% 0%, var(--surface-2), var(--surface-0) 78%);
	box-shadow: var(--shadow-float);
}

.stage-panel {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity var(--t-slow) var(--ease-out);
}

.stage-panel.is-active {
	opacity: 1;
}

.stage-panel[hidden] {
	display: none;
}

/* Fotograma de cámara: ocupa todo el escenario. */
.stage-wide {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
}

.stage-wide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% center;
}

/* Barrido de análisis: una sola pasada al entrar, no un bucle permanente. */
.stage-scan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 42%,
		rgba(72, 185, 139, 0.16) 50%,
		transparent 58%
	);
	background-size: 260% 100%;
	background-position: 130% 0;
}

.stage-panel.is-active .stage-scan {
	animation: scan 1.5s var(--ease-in-out) 1 both;
}

@keyframes scan {
	to {
		background-position: -60% 0;
	}
}

.stage-tag {
	position: absolute;
	left: 0.9rem;
	bottom: 0.9rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--r-pill);
	background: rgba(7, 8, 11, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--line);
	font-size: 0.75rem;
	color: var(--text-3);
}

/* Pantallas de la app: el teléfono se apoya en el escenario. */
.stage-device {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: clamp(1rem, 2.5vw, 1.75rem);
}

.stage-device .phone {
	width: auto;
	height: 100%;
	max-height: 100%;
	aspect-ratio: 1206 / 2622;
	padding: 8px;
	border-radius: 34px;
}

.stage-device .phone img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 27px;
}

/* ── Lecturas superpuestas ────────────────────────────────────────────────── */

.hud {
	position: absolute;
	left: clamp(0.75rem, 2vw, 1.5rem);
	top: 50%;
	translate: 0 -50%;
	width: min(15rem, 42%);
	padding: 1rem 1.1rem;
	border-radius: var(--r-small);
	border: 1px solid var(--line-strong);
	background: rgba(14, 16, 21, 0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--shadow-lift);
}

.hud-right {
	left: auto;
	right: clamp(0.75rem, 2vw, 1.5rem);
}

/* Entra desde el teléfono, que es de donde sale el dato. */
.stage-panel.is-active .hud {
	animation: hud-in 480ms var(--ease-spring) 160ms both;
}

@keyframes hud-in {
	from {
		opacity: 0;
		transform: translateX(12px) scale(0.96);
	}
}

.stage-panel.is-active .hud-right {
	animation-name: hud-in-right;
}

@keyframes hud-in-right {
	from {
		opacity: 0;
		transform: translateX(-12px) scale(0.96);
	}
}

.hud-title {
	font-family: var(--font-instrument);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 0.75rem;
}

.hud dl {
	display: grid;
	gap: 0.5rem;
}

.hud dl div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.8125rem;
	border-bottom: 1px solid var(--line);
	padding-bottom: 0.5rem;
}

.hud dt {
	color: var(--text-3);
}

.hud dd {
	color: var(--text-1);
	font-variant-numeric: tabular-nums;
}

.hud-live {
	color: var(--success) !important;
	font-family: var(--font-instrument);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.hud-big {
	font-family: var(--font-instrument);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--text-1);
}

.hud-sub {
	font-size: 0.8125rem;
	color: var(--text-3);
	margin-top: 0.5rem;
}

.hud-note {
	display: block;
	margin-top: 0.85rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--line);
	font-size: 0.75rem;
	color: var(--text-3);
}

/* Canales: entran escalonados porque el aviso sale por los tres a la vez. */
.channels {
	position: absolute;
	right: clamp(0.75rem, 2vw, 1.5rem);
	top: 50%;
	translate: 0 -50%;
	display: grid;
	gap: 0.5rem;
}

.channels li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.9rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--line-signal);
	background: rgba(14, 16, 21, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: 0.8125rem;
	color: var(--text-1);
	white-space: nowrap;
}

.channels .ico {
	width: 1rem;
	height: 1rem;
	color: var(--signal-bright);
}

.stage-panel.is-active .channels li {
	animation: channel-in 420ms var(--ease-spring) both;
}

.stage-panel.is-active .channels li:nth-child(1) {
	animation-delay: 180ms;
}
.stage-panel.is-active .channels li:nth-child(2) {
	animation-delay: 300ms;
}
.stage-panel.is-active .channels li:nth-child(3) {
	animation-delay: 420ms;
}

@keyframes channel-in {
	from {
		opacity: 0;
		transform: translateX(-14px) scale(0.94);
	}
}

/* ── Pasos ────────────────────────────────────────────────────────────────── */

.demo-steps {
	display: grid;
	gap: 0.4rem;
}

.step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.9rem;
	width: 100%;
	text-align: left;
	padding: 1rem 1.1rem 1.15rem;
	border-radius: var(--r-small);
	border: 1px solid transparent;
	transition: background-color var(--t-base) ease, border-color var(--t-base) ease;
}

.step.is-active {
	background: var(--surface-1);
	border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
	.step:not(.is-active):hover {
		background: rgba(255, 255, 255, 0.03);
	}
}

.step-index {
	font-family: var(--font-instrument);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	color: var(--text-3);
	padding-top: 0.2rem;
	transition: color var(--t-base) ease;
}

.step.is-active .step-index {
	color: var(--signal-bright);
}

.step-text strong {
	display: block;
	font-family: var(--font-instrument);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--text-2);
	margin-bottom: 0.3rem;
	transition: color var(--t-base) ease;
}

.step.is-active .step-text strong {
	color: var(--text-1);
}

/* El texto largo solo se muestra en el paso activo: la lista no se hincha. */
.step-text span {
	display: block;
	font-size: 0.9375rem;
	color: var(--text-3);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--t-slow) var(--ease-out), opacity var(--t-base) ease;
}

.step.is-active .step-text span {
	max-height: 9rem;
	opacity: 1;
}

/* Barra de tiempo: sólo visible en el paso activo. */
.step-bar {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 0.55rem;
	height: 2px;
	border-radius: 2px;
	background: var(--line);
	opacity: 0;
	transition: opacity var(--t-base) ease;
}

.step.is-active .step-bar {
	opacity: 1;
}

.step-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: var(--signal);
}

.step.is-active .step-bar i {
	animation: step-fill var(--step-ms, 7000ms) linear forwards;
}

/* Si la demo está en pausa (foco, hover o intervención) la barra se congela. */
.demo.is-paused .step.is-active .step-bar i {
	animation-play-state: paused;
}

@keyframes step-fill {
	to {
		width: 100%;
	}
}

/* ── Movimiento reducido ──────────────────────────────────────────────────── */
/* Sin avance automático la barra no significa nada: se oculta. */

@media (prefers-reduced-motion: reduce) {
	.step-bar {
		display: none;
	}

	.step-text span {
		max-height: none;
		opacity: 1;
	}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.demo {
		grid-template-columns: minmax(0, 1fr);
	}

	.demo-stage {
		aspect-ratio: 4 / 5;
		max-height: 30rem;
	}

	.hud,
	.channels {
		top: auto;
		bottom: 1rem;
		translate: none;
	}

	.hud {
		left: 1rem;
		right: 1rem;
		width: auto;
	}

	.channels {
		left: 1rem;
		right: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}

	.channels li {
		justify-content: center;
	}
}

@media (max-width: 560px) {
	.demo-stage {
		aspect-ratio: 3 / 4;
	}

	.hud dl {
		gap: 0.35rem;
	}
}

/* ── Pausa del avance automático (WCAG 2.2.2) ─────────────────────────────── */
/* Lo crea demo.js; con movimiento reducido no existe. */

.demo-pause {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 0.6rem 1.1rem;
	font-size: 0.875rem;
}

/* Pausa del usuario: el pulso de la alerta del hero también se detiene. */
.motion-paused .hero-alert-dot {
	animation-play-state: paused;
}