/*
 * Hero v3 — convergencia visual hacia la referencia (Sprint 5A).
 * Construido con el Design System v1.0 (DESIGN_TOKENS.md) + su
 * extensión para dashboards/IA (D-003) + la capa visual fría
 * autorizada por D-004 (enmienda a D-003). Los tokens --panel-* NO
 * viven en tokens.css: siguen siendo una extensión local declarada
 * aquí, por decisión explícita del Propietario del proyecto.
 * Breakpoints oficiales reutilizados: --bp-sm 640px, --bp-md 960px.
 * Sin animaciones ni JS nuevo en esta fase.
 */

.hero {
	/* Paleta fría D-004 (enmienda a D-003) */
	--panel-bg: #060B0A;
	--panel-surface: #0B1614;
	--panel-border: #16241F;
	--panel-text-primary: var(--mm-graphite-050);
	--panel-text-secondary: #9FB0AC;
	--panel-text-muted: #6B7D78;
	--panel-accent: #2DD8E8;
	--panel-accent-dim: #0B4E5C;
	--panel-success: #3FCB7A;

	background: var(--panel-bg);
	padding-block: var(--space-5);
	overflow: hidden;
	position: relative;
}

/* Textura de fondo: cuadrícula tenue + glow radial — todo CSS, sin imágenes */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--panel-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--panel-border) 1px, transparent 1px);
	background-size: 48px 48px;
	opacity: 0.3;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
	pointer-events: none;
}
.hero::after {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	height: 70%;
	background: radial-gradient(circle, var(--panel-accent-dim) 0%, transparent 70%);
	opacity: 0.45;
	pointer-events: none;
}

.hero__grid {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: var(--space-4);
	display: grid;
	gap: var(--space-4);
}

/* ===== Columna izquierda — contenido comercial, compacta ===== */

.hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.hero__badge {
	display: inline-flex;
	width: fit-content;
	padding: 5px 12px;
	border-radius: var(--radius-full);
	background: var(--panel-accent-dim);
	border: var(--border-sm) solid var(--panel-accent);
	color: var(--panel-accent);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}

.hero__title {
	margin: 0 0 var(--space-2);
	max-width: 20ch;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.05rem + 2vw, 2.2rem);
	line-height: 1.12;
	color: var(--panel-text-primary);
	text-wrap: balance;
}

.hero__title-accent {
	color: var(--panel-accent);
}

.hero__description {
	margin: 0 0 var(--space-3);
	max-width: 42ch;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--panel-text-secondary);
}

/* Métrica integrada directamente sobre el fondo — sin tarjeta */
.hero__metric {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.hero__metric-value {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	color: var(--panel-accent);
}

.hero__metric-label {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--panel-text-secondary);
}

.hero__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-3);
}

.hero__actions .btn {
	width: 100%;
}

.hero .btn {
	padding: 9px 18px;
	font-size: 0.875rem;
}

.hero .btn__arrow {
	width: 16px;
	height: 16px;
	margin-left: var(--space-2);
	vertical-align: middle;
}

/* Botón secundario adaptado a la capa fría — sin tocar buttons.css */
.hero .btn--secondary {
	border-color: var(--panel-accent);
	color: var(--panel-text-primary);
}
.hero .btn--secondary:hover {
	background: var(--panel-surface);
}
.hero .btn--secondary:active {
	background: var(--panel-border);
}
.hero .btn:focus-visible {
	outline-color: var(--panel-accent);
}

/* ===== Columna derecha — panel único tipo SCADA ===== */

.hero__dashboard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	background:
		linear-gradient(rgba(45,216,232,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(45,216,232,.025) 1px, transparent 1px),
		linear-gradient(145deg, rgba(8,19,17,.98), rgba(4,11,10,.97));
	background-size: 28px 28px, 28px 28px, auto;
	border: 1px solid color-mix(in srgb, var(--panel-accent) 34%, var(--panel-border));
	border-radius: 14px;
	box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025), 0 0 38px rgba(45,216,232,.04);
	overflow: hidden;
}

.dashboard-appbar {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 44px;
	padding: 6px 10px 10px;
	border-bottom: 1px solid var(--panel-border);
}
.dashboard-appbar__brand { display: flex; align-items: center; gap: 9px; min-width: max-content; }
.dashboard-appbar__mark {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--panel-accent);
	border-radius: 7px;
	background: rgba(45,216,232,.08);
	box-shadow: inset 0 0 14px rgba(45,216,232,.06);
	font: 700 .7rem var(--font-mono);
	color: var(--panel-accent);
}
.dashboard-appbar__brand > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.dashboard-appbar__brand strong { font: 600 .68rem/1.2 var(--font-body); color: var(--panel-text-primary); }
.dashboard-appbar__brand small { font: 500 .52rem/1.2 var(--font-mono); color: var(--panel-text-muted); text-transform: uppercase; letter-spacing: .07em; }
.dashboard-appbar__nav { display: flex; align-self: stretch; gap: 5px; margin-left: auto; }
.dashboard-appbar__nav span { position: relative; display: flex; align-items: center; padding: 0 9px; font: 500 .58rem var(--font-body); color: var(--panel-text-muted); }
.dashboard-appbar__nav .is-active { color: var(--panel-accent); }
.dashboard-appbar__nav .is-active::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: -11px; height: 2px; background: var(--panel-accent); box-shadow: 0 0 7px var(--panel-accent); }
.dashboard-appbar__status { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(63,203,122,.3); border-radius: 999px; font: 600 .52rem var(--font-mono); color: var(--panel-success); }
.dashboard-appbar__status i, .dashboard-context i { width: 6px; height: 6px; border-radius: 50%; background: var(--panel-success); box-shadow: 0 0 8px var(--panel-success); }

.dashboard-context { display: flex; align-items: center; gap: 14px; padding: 0 10px; font: 500 .54rem var(--font-mono); color: var(--panel-text-muted); }
.dashboard-context span:first-child { display: flex; align-items: center; gap: 6px; color: var(--panel-text-secondary); }
.dashboard-context strong { margin-left: auto; padding: 5px 8px; border: 1px solid var(--panel-border); border-radius: 5px; color: var(--panel-accent); font-weight: 500; }

.dashboard-card {
	background: var(--panel-surface);
	border: var(--border-sm) solid var(--panel-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}
.dashboard-card--chart { box-shadow: inset 0 1px rgba(255,255,255,.02), 0 12px 34px rgba(0,0,0,.16); }

/* --- Zona superior: gráfico + KPIs verticales --- */

.dashboard-panel__top {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.dashboard-card--chart {
	padding: var(--space-3);
}

.dashboard-card__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.dashboard-card__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
}

.dashboard-card__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--panel-text-muted);
}

/* Selector estático "Últimos 30 días" — sin funcionalidad todavía */
.dashboard-chart__selector {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	color: var(--panel-text-secondary);
	border: var(--border-sm) solid var(--panel-border);
	border-radius: var(--radius-sm);
	padding: 3px 8px;
}

.dashboard-chart__kpi {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-chart__kpi-label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.75rem;
	color: var(--panel-text-muted);
}

.dashboard-chart__kpi-value {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--panel-accent);
}

.dashboard-chart__kpi-delta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--panel-success);
}

.dashboard-chart__body {
	display: flex;
	align-items: stretch;
	gap: var(--space-2);
}

.dashboard-chart__y-axis {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-block: 2px;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	color: var(--panel-text-muted);
	text-align: right;
}

.dashboard-chart__plot {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dashboard-chart {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 440 / 165;
	overflow: visible;
}

.dashboard-chart__grid {
	stroke: var(--panel-border);
	stroke-width: 1;
	opacity: 0.35;
}

.dashboard-chart__gradient-start {
	stop-color: var(--panel-accent);
	stop-opacity: 0.10;
}
.dashboard-chart__gradient-end {
	stop-color: var(--panel-accent);
	stop-opacity: 0;
}

.dashboard-chart__area {
	stroke: none;
}

.dashboard-chart__path {
	fill: none;
	stroke: var(--panel-accent);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 620;
	stroke-dashoffset: 620;
	animation: dashboard-line-draw 1.8s cubic-bezier(.22,.8,.25,1) .2s forwards;
}

.dashboard-chart__point {
	fill: var(--panel-bg);
	stroke: var(--panel-accent);
	stroke-width: 1.5;
}
.dashboard-chart__point--current {
	fill: var(--panel-accent);
	filter: drop-shadow(0 0 3px var(--panel-accent));
	animation: dashboard-point-pulse 2.2s ease-in-out infinite;
}

.dashboard-chart__values text {
	fill: var(--panel-text-secondary);
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 500;
	text-anchor: middle;
	paint-order: stroke;
	stroke: var(--panel-surface);
	stroke-width: 3px;
	stroke-linejoin: round;
	opacity: .82;
}
.dashboard-chart__values .dashboard-chart__value-current {
	fill: var(--panel-accent);
	font-weight: 700;
	text-anchor: end;
	opacity: 1;
	filter: drop-shadow(0 0 3px var(--panel-accent-dim));
}
.dashboard-chart__values text:first-child { text-anchor: start; }

.dashboard-chart__labels {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-1);
	font-family: var(--font-mono);
	font-size: 0.625rem;
	color: var(--panel-text-muted);
}

/* KPIs — módulos compactos, no tarjetas grandes */
.dashboard-kpis {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kpi-module {
	position: relative;
	overflow: hidden;
	flex: 1 1 0;
	justify-content: center;
	min-height: 0;
	background:
		linear-gradient(135deg, rgba(45,216,232,.055), transparent 48%),
		color-mix(in srgb, var(--panel-surface) 94%, white 3%);
	border: 1px solid color-mix(in srgb, var(--panel-border) 66%, var(--panel-accent) 18%);
	border-radius: 9px;
	padding: 12px 13px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	box-shadow: inset 0 1px rgba(255,255,255,.025);
	transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.kpi-module::before { content: ''; position: absolute; top: -1px; right: -1px; width: 32px; height: 12px; border-top: 2px solid var(--panel-accent); border-right: 2px solid var(--panel-accent); border-radius: 0 9px 0 0; opacity: .72; }
.kpi-module::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72%; height: 2px; background: linear-gradient(90deg, var(--panel-accent), transparent); opacity: .42; }
.kpi-module:nth-child(2)::after { width: 54%; }
.kpi-module:nth-child(3)::after { width: 88%; background: linear-gradient(90deg, var(--panel-success), transparent); }
.kpi-module:nth-child(3)::before { border-color: var(--panel-success); }

.kpi-module__head {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 1px;
}

.kpi-module__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--panel-accent);
}

.kpi-module__label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.59rem;
	line-height: 1.25;
	letter-spacing: 0.065em;
	text-transform: uppercase;
	color: var(--panel-text-muted);
}

.kpi-module__value {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: clamp(1rem, 1.35vw, 1.32rem);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	color: var(--panel-text-primary);
}

.kpi-module__delta {
	align-self: flex-start;
	padding: 4px 7px;
	border: 1px solid rgba(45,216,232,.13);
	border-radius: 999px;
	background: rgba(45,216,232,.035);
	font-family: var(--font-body);
	font-size: 0.57rem;
	line-height: 1.2;
	color: var(--panel-text-secondary);
}
.dashboard-kpis .kpi-module:nth-child(3) .kpi-module__delta { border-color: rgba(63,203,122,.18); background: rgba(63,203,122,.04); }

@media (hover: hover) and (pointer: fine) {
	.kpi-module:hover {
		z-index: 2;
		transform: translateX(-4px) scale(1.025);
		border-color: color-mix(in srgb, var(--panel-accent) 62%, var(--panel-border));
		background-color: color-mix(in srgb, var(--panel-surface) 93%, var(--panel-accent) 4%);
		box-shadow: 0 14px 30px rgba(0,0,0,.25), 0 0 20px rgba(45,216,232,.07);
	}
	.kpi-module:nth-child(3):hover { border-color: color-mix(in srgb, var(--panel-success) 58%, var(--panel-border)); }
}

/* Indicador de estado discreto — solo en el KPI de estado operacional
   (3er módulo: "Todo normal"), sin agregar marcado nuevo en hero.php */
.dashboard-kpis .kpi-module:nth-child(3) .kpi-module__value::before {
	content: '●';
	display: inline-block;
	margin-right: 5px;
	font-size: 0.55em;
	color: var(--panel-success);
	vertical-align: middle;
}

/* --- Balance metalúrgico --- */

.dashboard-flow {
	background: var(--panel-surface);
	border: var(--border-sm) solid color-mix(in srgb, var(--panel-border) 85%, var(--panel-accent) 6%);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
}

.dashboard-flow__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--panel-text-muted);
}

.dashboard-flow__stages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.flow-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--space-2);
	border-radius: 6px;
	transition: transform .22s ease, background-color .22s ease, filter .22s ease;
}
.flow-stage:not(:last-child)::after {
	content: '↓';
	position: absolute;
	left: 0;
	bottom: -3px;
	color: color-mix(in srgb, var(--panel-accent) 40%, var(--panel-text-muted));
	font-size: 0.75rem;
	line-height: 1;
}

.flow-stage__name {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: .015em;
	color: var(--panel-text-primary);
	transition: color .22s ease, text-shadow .22s ease;
}

.flow-stage__value {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	color: var(--panel-success);
	transition: color .22s ease, text-shadow .22s ease;
}

.flow-stage:first-child .flow-stage__name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	color: var(--panel-accent);
	animation: flow-start-text 1.8s ease-in-out infinite;
}
.flow-stage:first-child .flow-stage__name::before {
	content: '';
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--panel-success);
	box-shadow: 0 0 8px var(--panel-success);
	animation: flow-start-dot 1.8s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
	.flow-stage:hover {
		z-index: 2;
		transform: translateY(-4px) scale(1.055);
		background: color-mix(in srgb, var(--panel-accent) 7%, transparent);
		filter: drop-shadow(0 0 8px var(--panel-accent-dim));
	}
	.flow-stage:hover .flow-stage__name {
		color: var(--panel-accent);
		text-shadow: 0 0 10px color-mix(in srgb, var(--panel-accent) 42%, transparent);
	}
	.flow-stage:hover .flow-stage__value {
		color: var(--panel-success);
		text-shadow: 0 0 10px color-mix(in srgb, var(--panel-success) 45%, transparent);
	}
	.flow-stage:hover::before {
		content: '';
		position: absolute;
		left: 0;
		bottom: -10px;
		width: 24px;
		height: 2px;
		background: var(--panel-accent);
		box-shadow: 0 0 7px var(--panel-accent);
	}
}

.flow-stage--active .flow-stage__name { color: var(--panel-text-primary); }
.flow-stage--active .flow-stage__value { color: var(--panel-success); }
.flow-stage--active {
	filter: drop-shadow(0 0 4px var(--panel-accent-dim));
}
.flow-stage--active::before {
	display: none;
}

.dashboard-ai-insight {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	background: linear-gradient(90deg, rgba(45,216,232,.075), rgba(8,18,16,.78) 58%);
	border: 1px solid color-mix(in srgb, var(--panel-accent) 30%, var(--panel-border));
	border-radius: 8px;
	box-shadow: inset 0 1px rgba(255,255,255,.02);
	overflow: hidden;
}
.dashboard-ai-insight::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--panel-accent);
	box-shadow: 0 0 8px var(--panel-accent);
}
.dashboard-ai-insight__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--panel-accent);
	border-radius: 7px;
	background: rgba(45,216,232,.07);
	font: 700 .59rem var(--font-mono);
	color: var(--panel-accent);
	box-shadow: inset 0 0 12px rgba(45,216,232,.06);
}
.dashboard-ai-insight p { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.dashboard-ai-insight strong { font: 600 .61rem/1.3 var(--font-mono); color: var(--panel-text-primary); text-transform: uppercase; letter-spacing: .04em; }
.dashboard-ai-insight p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .57rem/1.4 var(--font-body); color: var(--panel-text-secondary); }
.dashboard-ai-insight em { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 7%, transparent); font: 600 .5rem var(--font-mono); font-style: normal; color: var(--color-accent); }

.dashboard-disclaimer {
	margin: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.625rem;
	color: var(--panel-text-muted);
}

@keyframes dashboard-line-draw { to { stroke-dashoffset: 0; } }
@keyframes dashboard-point-pulse { 50% { transform: scale(1.35); transform-origin: center; filter: drop-shadow(0 0 7px var(--panel-accent)); } }
@keyframes flow-start-text {
	0%, 100% { opacity: .58; text-shadow: none; }
	50% { opacity: 1; text-shadow: 0 0 10px rgba(45,216,232,.55); }
}
@keyframes flow-start-dot {
	0%, 100% { opacity: .45; transform: scale(.8); }
	50% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 12px var(--panel-success); }
}

/* ===== Banda de capacidades — contenido real, sin aria-hidden ===== */

.hero__capabilities {
	position: relative;
	max-width: 1440px;
	margin: var(--space-5) auto 0;
	padding: var(--space-3);
	background: linear-gradient(145deg, rgba(11, 22, 20, .82), rgba(6, 11, 10, .72));
	border: 1px solid color-mix(in srgb, var(--panel-accent) 22%, var(--panel-border));
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(45, 216, 232, .04), 0 16px 44px rgba(0, 0, 0, .22);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.hero__capabilities::before,
.hero__capabilities::after {
	content: '';
	position: absolute;
	width: 54px;
	height: 16px;
	pointer-events: none;
}
.hero__capabilities::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--panel-accent);
	border-left: 2px solid var(--panel-accent);
	border-radius: 14px 0 0 0;
}
.hero__capabilities::after {
	right: -1px;
	bottom: -1px;
	border-right: 2px solid var(--panel-accent);
	border-bottom: 2px solid var(--panel-accent);
	border-radius: 0 0 14px 0;
}

.capability {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-1);
	min-height: 170px;
	padding: var(--space-4);
	background: rgba(8, 17, 15, .54);
	border: 1px solid transparent;
	border-radius: 10px;
	transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.capability:hover {
		z-index: 1;
		transform: translateY(-5px) scale(1.035);
		background: color-mix(in srgb, var(--panel-surface) 88%, var(--panel-accent) 4%);
		border-color: color-mix(in srgb, var(--panel-accent) 58%, var(--panel-border));
		box-shadow: 0 14px 32px rgba(0, 0, 0, .3), 0 0 22px rgba(45, 216, 232, .12);
	}
	.capability:hover .capability__icon {
		transform: scale(1.16);
		filter: drop-shadow(0 0 7px rgba(45, 216, 232, .48));
	}
	.capability:hover .capability__title { color: var(--panel-text-primary); }
	.capability:hover .capability__text { color: #C2D0CC; }
}

.capability__icon {
	width: 30px;
	height: 30px;
	color: var(--panel-accent);
	margin-bottom: 6px;
	transition: transform .25s ease, filter .25s ease;
}

.capability__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--panel-accent);
}

.capability__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--panel-text-secondary);
	max-width: 38ch;
}

/* ===== Tablet — --bp-sm 640px ===== */
@media (min-width: 640px) {
	.hero__grid {
		padding-inline: var(--space-6);
	}
	.hero__actions {
		flex-direction: row;
		align-items: stretch;
	}
	.hero__actions .btn {
		width: auto;
	}

	.dashboard-kpis {
		flex-direction: row;
	}
	.kpi-module {
		flex: 1 1 0;
	}

	.dashboard-flow__stages {
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
	}
	.flow-stage {
		flex: 1 1 0;
		padding-bottom: 0;
		padding-right: var(--space-3);
	}
	.flow-stage:not(:last-child)::after {
		content: '→';
		left: auto;
		right: 4px;
		bottom: auto;
		top: 2px;
	}
	.flow-stage--active::before {
		bottom: -10px;
		left: 0;
		width: 20px;
	}

	.hero__capabilities {
		flex-direction: row;
	}
	.capability {
		flex: 1 1 0;
		padding-inline: var(--space-4);
	}
	.capability:first-child {
		padding-inline: var(--space-4);
	}
}

/* ===== Desktop — --bp-md 960px: dos columnas, proporción 45/55 ===== */
@media (min-width: 960px) {
	.hero {
		padding-block: var(--space-6);
	}
	.hero__grid {
		grid-template-columns: 0.78fr 1.22fr;
		align-items: stretch;
		gap: var(--space-6);
		padding: var(--space-5);
		background:
			linear-gradient(145deg, rgba(11, 22, 20, .82), rgba(6, 11, 10, .62));
		border: 1px solid color-mix(in srgb, var(--panel-accent) 30%, var(--panel-border));
		border-radius: 16px;
		box-shadow:
			0 24px 70px rgba(0, 0, 0, .34),
			inset 0 1px 0 rgba(45, 216, 232, .06),
			0 0 28px rgba(11, 78, 92, .13);
	}

	.hero__content {
		align-self: stretch;
		padding: clamp(22px, 2.2vw, 34px);
		background:
			linear-gradient(rgba(45,216,232,.018) 1px, transparent 1px),
			linear-gradient(90deg, rgba(45,216,232,.018) 1px, transparent 1px),
			linear-gradient(155deg, rgba(9,20,18,.82), rgba(5,12,11,.58));
		background-size: 32px 32px, 32px 32px, auto;
		border: 1px solid color-mix(in srgb, var(--panel-accent) 18%, var(--panel-border));
		border-radius: 12px;
		box-shadow: inset 0 1px rgba(255,255,255,.018);
		overflow: hidden;
	}
	.hero__content::before {
		content: '';
		position: absolute;
		left: 0;
		top: 12%;
		bottom: 12%;
		width: 2px;
		background: linear-gradient(transparent, var(--panel-accent) 24%, var(--panel-accent) 76%, transparent);
		box-shadow: 0 0 12px rgba(45,216,232,.35);
	}
	.hero__content::after {
		content: '';
		position: absolute;
		right: -50px;
		top: -50px;
		width: 150px;
		height: 150px;
		border: 1px solid rgba(45,216,232,.065);
		border-radius: 50%;
		box-shadow: 0 0 0 24px rgba(45,216,232,.018), 0 0 0 48px rgba(45,216,232,.012);
		pointer-events: none;
	}
	.hero__content > * { position: relative; z-index: 1; }
	.hero__description { max-width: 46ch; margin-bottom: 18px; }
	.hero__metric {
		width: fit-content;
		max-width: 100%;
		margin-bottom: 20px;
		padding: 10px 12px;
		background: rgba(45,216,232,.035);
		border: 1px solid rgba(45,216,232,.13);
		border-radius: 8px;
	}

	.hero__grid::before,
	.hero__grid::after {
		content: '';
		position: absolute;
		width: 76px;
		height: 24px;
		pointer-events: none;
	}
	.hero__grid::before {
		top: -1px;
		left: -1px;
		border-top: 2px solid var(--panel-accent);
		border-left: 2px solid var(--panel-accent);
		border-radius: 16px 0 0 0;
	}
	.hero__grid::after {
		right: -1px;
		bottom: -1px;
		border-right: 2px solid var(--panel-accent);
		border-bottom: 2px solid var(--panel-accent);
		border-radius: 0 0 16px 0;
	}

	.hero__title {
		font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem);
	}

	.dashboard-panel__top {
		flex-direction: row;
		align-items: stretch;
	}
	.dashboard-card--chart {
		flex: 0 0 72%;
	}
	.dashboard-kpis {
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.capability,
	.capability__icon {
		transition: none;
	}
	.dashboard-chart__path,
	.dashboard-chart__point--current,
	.flow-stage:first-child .flow-stage__name,
	.flow-stage:first-child .flow-stage__name::before {
		animation: none;
		stroke-dashoffset: 0;
	}
	.capability:hover {
		transform: none;
	}
}

@media (max-width: 699px) {
	.hero__dashboard { padding: 9px; }
	.dashboard-appbar { gap: 8px; padding-inline: 4px; }
	.dashboard-appbar__nav { display: none; }
	.dashboard-appbar__status { margin-left: auto; }
	.dashboard-context { padding-inline: 4px; gap: 8px; }
	.dashboard-context span:nth-child(2) { display: none; }
	.dashboard-ai-insight { grid-template-columns: 30px minmax(0, 1fr); }
	.dashboard-ai-insight em { display: none; }
	.dashboard-ai-insight p span { white-space: normal; }
}