/*
 * Aiden UI · bloque hero-section (Arc UI, https://uiarc.dev/components/blocks/hero-section) — sin dependencias.
 * Traducción literal de hero-section.module.css + hero-content/-lumen/-relay/-cadence/-mesh.module.css de Arc UI,
 * con prefijo .aui-hero-* y las mismas variables, medidas, tiempos y curvas de foundation.css.
 *
 * Rediseño 7-oct §2 #38/#43 (direccion/diseno/REDISENO-7OCT.md): llamada a la acción final de las webs
 * comerciales (HeroContent) y el hero «Screenshot» de aidenstartup.com con su panel (HeroLumen, Fase B aparte).
 *
 * Tres diseños completos (cada uno UNA pantalla, 100svh) + el modo «tu contenido» (HeroContent):
 *   .aui-hero-content  → HeroContent, en los tres layouts (data-variant="centered|split|minimal")
 *   .aui-hero-lumen    → HeroLumen   (variant="centered", «Screenshot»)
 *   .aui-hero-relay    → HeroRelay  (variant="split", «Workflow»)
 *   .aui-hero-cadence  → HeroCadence (variant="minimal", «Mesh»)
 * La malla de fondo (HeroMesh) es un render CSS (gradientes radiales) con variables locales
 * --aui-hero-mesh-* (no existen --mesh-* en foundation.css), más un drift animado por JS sobre esas
 * mismas variables en vez del WebGL de Arc — ver «Lo que no se ha trasladado» del LEEME.
 */

/* ── Envoltorio compartido (hero-section.module.css) ──────────────────────────────────────────────────── */
.aui-hero { position: relative; container: aui-hero / inline-size; overflow: clip; background: var(--background); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
.aui-hero *, .aui-hero *::before, .aui-hero *::after { box-sizing: border-box; }
.aui-hero-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* color explícito (no basta con heredar de .aui-hero): un tema WordPress con su propio h1{color:…}
   gana a la herencia aunque .aui-hero-title tenga más especificidad — una declaración directa en
   el h1 siempre gana a un valor heredado, pase lo que pase con la especificidad del selector
   (WEB-20261021-1, aidenstartup.com con el tema UiCore: título invisible en oscuro). */
.aui-hero-title { max-width: 16ch; margin: 0; color: var(--foreground); font-family: var(--font-display); font-size: clamp(2.25rem, 1.3rem + 4.4cqi, 4.5rem); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-wrap: balance; }
.aui-hero-description { max-width: 560px; margin: 0; color: var(--text-secondary); font-size: var(--text-lg); line-height: var(--leading-body); text-wrap: pretty; }
@container aui-hero (max-width: 560px) { .aui-hero-description { font-size: var(--text-base); } }

/* Los tres diseños y el modo contenido llenan una pantalla completa, como Hero signup de Arc. La svh evita
   que la barra del navegador móvil se coma parte del hero. */
.aui-hero-screen { width: 100%; min-height: 100vh; min-height: 100svh; }

/* Demo del fixture: el mando de diseño flota sobre el borde superior, en cristal. No ocupa espacio propio. */
.aui-hero-preview { position: relative; display: grid; width: 100%; min-height: 100vh; min-height: 100svh; }
.aui-hero-preview > .aui-hero { min-height: inherit; }
.aui-hero-switcher {
  position: absolute; z-index: 20; top: var(--space-4); left: 50%; translate: -50% 0;
  display: flex; max-width: calc(100% - 2 * var(--space-4));
  border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--surface) 64%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 1px rgb(20 24 40 / .04), 0 10px 30px -12px rgb(20 24 40 / .22);
}
:root[data-theme="dark"] .aui-hero-switcher { border-color: color-mix(in oklab, var(--foreground) 14%, transparent); background: color-mix(in oklab, var(--surface) 58%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 8%, transparent), 0 10px 30px -12px rgb(0 0 0 / .6); }
.aui-hero-switcher .aui-segmented-control { border: 0; border-radius: var(--radius-pill); background: transparent; }
.aui-hero-switcher .aui-segmented-control-button { border-radius: var(--radius-pill); }

/* Entrada (heroGroup/heroRise de Arc): cada hijo marcado sube 12px con un desenfoque suave y se asienta, en
   cadena de lectura (80ms por índice, --aui-hero-i lo pone hero-section.js). Movimiento reducido: solo un
   fundido de 160ms, sin desplazamiento ni blur (igual que el resto del kit). */
.aui-hero-rise {
  opacity: 0; transform: translateY(12px); filter: blur(2px);
  transition: opacity 640ms var(--ease-enter), transform 640ms var(--ease-enter), filter 640ms var(--ease-enter);
  transition-delay: calc(var(--aui-hero-i, 0) * 80ms + 40ms);
}
.aui-hero-rise[data-in] { opacity: 1; transform: none; filter: blur(0); }
.aui-hero-rise[data-still] { opacity: 1; transform: none; filter: blur(0); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .aui-hero-rise { transform: none; filter: none; transition: opacity 160ms linear; transition-delay: 0ms; }
}

/* Entrada de la ventana de HeroLumen: sube desde el borde inferior y se asienta plana desde una inclinación. */
.aui-hero-lumen-stage { opacity: 0; transform: translateY(56px); transition: opacity 1100ms var(--ease-enter) 320ms, transform 1100ms var(--ease-enter) 320ms; }
.aui-hero-lumen-stage[data-in] { opacity: 1; transform: none; }
.aui-hero-lumen-tilt { transform: rotateX(22deg) scale(.94); transition: transform 1500ms var(--ease-enter) 360ms; }
.aui-hero-lumen-stage[data-in] .aui-hero-lumen-tilt { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aui-hero-lumen-stage { transform: none; transition: opacity 240ms linear; }
  .aui-hero-lumen-tilt { transform: none; transition: none; }
}

/* Entrada del lienzo de HeroRelay: sube 24px y funde. */
.aui-hero-relay-canvas { opacity: 0; transform: translateY(24px); transition: opacity 1000ms var(--ease-enter) 280ms, transform 1000ms var(--ease-enter) 280ms; }
.aui-hero-relay-canvas[data-in] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aui-hero-relay-canvas { transform: none; transition: opacity 240ms linear; } }

/* ── HeroMesh: render CSS de la malla de gradiente ─────────────────────────────────────────────────────── */
.aui-hero-mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-color: var(--aui-hero-mesh-base); }
.aui-hero-mesh-grain { position: absolute; inset: -2%; opacity: var(--aui-hero-mesh-grain, .3); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); background-size: 180px 180px; }

/* ── HeroContent (contenido propio, los tres layouts) ──────────────────────────────────────────────────── */
.aui-hero-content-inner { display: grid; max-width: 1200px; margin: 0 auto; padding: var(--space-24) var(--space-10); }
.aui-hero-content-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-5); max-width: 760px; margin: 0 auto; text-align: center; }
.aui-hero-content-copy .aui-hero-title { max-width: 16ch; }
.aui-hero-content-copy .aui-hero-description { max-width: 560px; }

.aui-hero-content-announcement { display: inline-flex; max-width: 100%; min-height: 32px; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px var(--space-3); background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.aui-hero-content :is(.aui-hero-content-announcement, .aui-hero-content-action) .aui-hero-arrow { flex: none; transition: transform var(--duration-fast) var(--ease-standard); }

.aui-hero-content-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.aui-hero-content-action { display: inline-flex; height: var(--control-height-md); min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-5); font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
.aui-hero-content-action:active { transform: scale(.97); }
.aui-hero-content-action[data-kind="primary"] { background: var(--foreground); color: var(--background); }
.aui-hero-content-action[data-kind="secondary"] { border-color: var(--border); background: var(--surface); color: var(--foreground); }
@media (hover: hover) and (pointer: fine) {
  .aui-hero-content-action[data-kind="primary"]:hover { opacity: .9; }
  .aui-hero-content-action[data-kind="secondary"]:hover { background: var(--surface-muted); }
  .aui-hero-content-announcement:hover { border-color: var(--border-strong); color: var(--foreground); }
  :is(.aui-hero-content-action, .aui-hero-content-announcement):hover .aui-hero-arrow { transform: translateX(2px); }
}

.aui-hero-content-install { display: flex; width: min(100%, 440px); height: var(--control-height-md); align-items: center; gap: var(--space-2); margin-top: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-1) 0 var(--space-4); background: var(--surface); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; text-align: left; }
.aui-hero-content-prompt { color: var(--text-muted); }
.aui-hero-content-command { flex: 1; overflow: hidden; color: var(--foreground); font: inherit; text-overflow: ellipsis; white-space: nowrap; }

.aui-hero-content-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; border-top: 1px solid var(--border-subtle); padding: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--text-sm); list-style: none; }
.aui-hero-content-media { min-width: 0; }

.aui-hero-content[data-variant="split"] .aui-hero-content-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--space-12); }
.aui-hero-content[data-variant="split"] .aui-hero-content-copy,
.aui-hero-content[data-variant="minimal"] .aui-hero-content-copy { justify-items: start; margin: 0; text-align: left; }
.aui-hero-content[data-variant="split"] .aui-hero-content-actions,
.aui-hero-content[data-variant="minimal"] .aui-hero-content-actions { justify-content: flex-start; }
.aui-hero-content[data-variant="minimal"] .aui-hero-content-copy { max-width: 860px; }

@container aui-hero (max-width: 800px) {
  .aui-hero-content[data-variant="split"] .aui-hero-content-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}
@container aui-hero (max-width: 560px) {
  .aui-hero-content-inner { padding: var(--space-16) var(--space-4); }
  .aui-hero-content-actions { width: 100%; }
  .aui-hero-content-action { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .aui-hero-content-action, .aui-hero-content-announcement, .aui-hero-arrow { transition: none; }
  .aui-hero-content-action:active { transform: none; }
}
/* Los botones (acción sin href) son ../../button con el alto de los enlaces vecinos. */
.aui-hero-content-action.aui-button { height: var(--control-height-md); min-height: var(--control-height-md); border-radius: var(--radius-control); font-size: var(--text-sm); }

/* ── HeroCadence (minimal, «Mesh») ─────────────────────────────────────────────────────────────────────── */
.aui-hero-cadence { isolation: isolate; display: grid; }
.aui-hero-cadence .aui-hero-mesh {
  --aui-hero-mesh-base: #f2ede7;
  --aui-hero-mesh-1: #bdd3ec; --aui-hero-mesh-2: #c3c6ff; --aui-hero-mesh-3: #ffd0b0;
  --aui-hero-mesh-4: #f6bfd6; --aui-hero-mesh-5: #cfe8dc; --aui-hero-mesh-6: #fff3dc;
  z-index: -1;
}
:root[data-theme="dark"] .aui-hero-cadence .aui-hero-mesh {
  --aui-hero-mesh-base: #09090f;
  --aui-hero-mesh-1: #0d3a47; --aui-hero-mesh-2: #2a2f86; --aui-hero-mesh-3: #5a2a3c;
  --aui-hero-mesh-4: #3a1f5a; --aui-hero-mesh-5: #7a3a22; --aui-hero-mesh-6: #12142c;
}
.aui-hero-cadence::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, transparent 40%, color-mix(in oklab, var(--background) 22%, transparent)); pointer-events: none; }

.aui-hero-cadence-inner { display: grid; box-sizing: border-box; width: 100%; max-width: 1320px; grid-template-rows: 1fr auto auto 1fr auto; gap: var(--space-10); margin: 0 auto; padding: clamp(88px, 12svh, 128px) var(--space-10) var(--space-10); }
.aui-hero-cadence-title { grid-row: 2; max-width: 14ch; font-size: clamp(2.75rem, 1rem + 7cqi, 7rem); }
.aui-hero-cadence-row { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-8) var(--space-16); }
.aui-hero-cadence-description { max-width: 520px; color: color-mix(in oklab, var(--foreground) 76%, transparent); }
.aui-hero-cadence-cta { display: grid; justify-items: end; gap: var(--space-3); }
.aui-hero-cadence-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.aui-hero-cadence-fine { margin: 0; color: color-mix(in oklab, var(--foreground) 62%, transparent); font-size: var(--text-sm); }

.aui-hero-cadence-brands { grid-row: 5; display: grid; gap: var(--space-5); border-top: 1px solid color-mix(in oklab, var(--foreground) 14%, transparent); padding-top: var(--space-6); }
.aui-hero-cadence-brands p { margin: 0; color: color-mix(in oklab, var(--foreground) 62%, transparent); font-size: var(--text-sm); }
.aui-hero-cadence-brands ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5) var(--space-8); margin: 0; padding: 0; list-style: none; }
.aui-hero-cadence-brands li { display: inline-flex; align-items: center; gap: 9px; color: color-mix(in oklab, var(--foreground) 78%, transparent); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); }
.aui-hero-cadence-brands svg { width: 22px; height: 22px; color: currentColor; }

@container aui-hero (max-width: 800px) {
  .aui-hero-cadence-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .aui-hero-cadence-cta { justify-items: start; }
  .aui-hero-cadence-brands ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container aui-hero (max-width: 560px) {
  .aui-hero-cadence-inner { gap: var(--space-6); padding: 80px var(--space-4) var(--space-6); }
  .aui-hero-cadence-actions { width: 100%; }
  .aui-hero-cadence-actions > * { flex: 1 1 auto; }
  .aui-hero-cadence-cta { width: 100%; }
  .aui-hero-cadence-brands ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .aui-hero-cadence-brands li:nth-child(n + 7) { display: none; }
  .aui-hero-cadence-brands li { font-size: var(--text-base); }
  .aui-hero-cadence-brands svg { width: 18px; height: 18px; }
}

/* ── HeroLumen (centered, «Screenshot») ────────────────────────────────────────────────────────────────── */
.aui-hero-lumen { isolation: isolate; display: flex; height: 100vh; height: 100svh; min-height: 600px; flex-direction: column; padding-top: clamp(88px, 14svh, 144px); text-align: center; }
.aui-hero-lumen .aui-hero-mesh {
  --aui-hero-mesh-base: var(--background);
  --aui-hero-mesh-1: #ffe6d8; --aui-hero-mesh-2: #e3dcff; --aui-hero-mesh-3: #dbe4ff; --aui-hero-mesh-4: #f0e0ff; --aui-hero-mesh-5: #e0eefc;
  z-index: -1;
}
:root[data-theme="dark"] .aui-hero-lumen .aui-hero-mesh { --aui-hero-mesh-1: #2a1822; --aui-hero-mesh-2: #1c1a44; --aui-hero-mesh-3: #141c40; --aui-hero-mesh-4: #231842; --aui-hero-mesh-5: #0e2133; }

.aui-hero-lumen-copy { position: relative; display: grid; justify-items: center; gap: var(--space-5); max-width: 900px; margin: 0 auto; padding-inline: var(--space-10); }
.aui-hero-lumen-copy .aui-hero-title { max-width: 14ch; font-size: clamp(2.5rem, 1.2rem + 5cqi, var(--text-5xl)); }
.aui-hero-lumen-copy .aui-hero-description { max-width: 590px; }
.aui-hero-lumen-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.aui-hero-lumen-fine { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

.aui-hero-lumen-stage { --halo: 96px; position: relative; flex: 1 1 0; box-sizing: border-box; width: 100%; min-height: 0; max-width: calc(1200px + 2 * var(--space-10)); margin: calc(var(--space-12) - var(--halo)) auto 0; overflow: hidden; padding: var(--halo) var(--space-10) 0; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.aui-hero-lumen-glow {
  position: absolute; z-index: -1; top: calc(var(--halo) - 110px); left: 10%; right: 10%; height: 240px;
  background: radial-gradient(50% 50% at 50% 50%, var(--aui-hero-glow), transparent 72%);
  filter: blur(36px);
  --aui-hero-glow: color-mix(in oklab, color-mix(in oklab, var(--accent) 35%, #7d8cff) 36%, transparent);
}
:root[data-theme="dark"] .aui-hero-lumen-glow { --aui-hero-glow: color-mix(in oklab, color-mix(in oklab, var(--accent) 30%, #6e7cff) 58%, transparent); }
.aui-hero-lumen-perspective { display: flex; justify-content: center; perspective: 2200px; perspective-origin: 50% 0%; }
.aui-hero-lumen-tilt { position: relative; flex: none; transform-origin: 50% 0%; will-change: transform; }
.aui-hero-lumen-scaler { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) { .aui-hero-lumen-tilt { will-change: auto; } }

.aui-hero-lumen-window {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--foreground);
  text-align: left; font-size: var(--text-sm);
  box-shadow: 0 1px 1px rgb(20 24 40 / .04), 0 24px 48px -16px rgb(20 24 40 / .16), 0 60px 120px -40px rgb(40 48 110 / .22);
}
:root[data-theme="dark"] .aui-hero-lumen-window { border-color: color-mix(in oklab, var(--foreground) 14%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 9%, transparent), 0 24px 48px -16px rgb(0 0 0 / .6), 0 60px 140px -40px rgb(40 50 140 / .35); }
:root[data-theme="dark"] .aui-hero-lumen-window::after { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent, color-mix(in oklab, #b9c2ff 70%, transparent), transparent); pointer-events: none; }

.aui-hero-lumen-chrome { position: relative; display: flex; height: 40px; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-subtle); background: color-mix(in oklab, var(--surface-muted) 55%, var(--surface)); }
.aui-hero-lumen-lights { position: absolute; left: 16px; display: flex; gap: 7px; }
.aui-hero-lumen-lights i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 14%, transparent); }
.aui-hero-lumen-url { border-radius: 8px; padding: 3px 14px; background: var(--surface); color: var(--text-muted); font-size: var(--text-xs); box-shadow: inset 0 0 0 1px var(--border-subtle); }

.aui-hero-lumen-app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 0; }
.aui-hero-lumen-window[data-narrow] .aui-hero-lumen-app { grid-template-columns: minmax(0, 1fr); }

.aui-hero-lumen-sidebar { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-subtle); padding: 14px 12px; background: color-mix(in oklab, var(--surface-muted) 40%, var(--surface)); }
.aui-hero-lumen-workspace { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.aui-hero-lumen-ws-mark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; }
.aui-hero-lumen-ws-name { flex: 1; font-weight: 500; }
.aui-hero-lumen-dim { color: var(--text-muted); }
.aui-hero-lumen-search { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; border: 1px solid var(--border-subtle); border-radius: 9px; padding: 6px 8px; background: var(--surface); color: var(--text-muted); }
.aui-hero-lumen-search kbd { margin-left: auto; font: inherit; font-size: var(--text-xs); }
.aui-hero-lumen-nav { display: grid; gap: 1px; }
.aui-hero-lumen-nav-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 6px 8px; color: var(--text-secondary); }
.aui-hero-lumen-nav-item svg { color: var(--text-muted); }
.aui-hero-lumen-nav-item[data-active] { background: var(--accent-subtle); color: var(--foreground); font-weight: 500; }
.aui-hero-lumen-nav-item[data-active] svg { color: var(--accent); }
.aui-hero-lumen-group-label { margin: 18px 8px 6px; color: var(--text-muted); font-size: var(--text-xs); }
.aui-hero-lumen-dot { width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: var(--text-muted); }
.aui-hero-lumen-dot[data-tone="accent"] { background: var(--accent); }
.aui-hero-lumen-dot[data-tone="danger"] { background: var(--danger); }
.aui-hero-lumen-me { display: flex; align-items: center; gap: 10px; margin-top: auto; border-top: 1px solid var(--border-subtle); padding: 12px 6px 2px; }
.aui-hero-lumen-me span:not([role]) { display: grid; flex: 1; line-height: 1.3; }
.aui-hero-lumen-me strong { font-weight: 500; }
.aui-hero-lumen-me small { color: var(--text-muted); font-size: var(--text-xs); }

.aui-hero-lumen-main { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 22px 24px; }
.aui-hero-lumen-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aui-hero-lumen-h2 { margin: 0; color: var(--foreground); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); }
.aui-hero-lumen-sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.aui-hero-lumen-range { flex: none; }

.aui-hero-lumen-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aui-hero-lumen-window[data-narrow] .aui-hero-lumen-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aui-hero-lumen-kpi { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px 12px; background: var(--surface); }

.aui-hero-lumen-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.aui-hero-lumen-window[data-narrow] .aui-hero-lumen-grid { grid-template-columns: minmax(0, 1fr); }
.aui-hero-lumen-card { display: grid; align-content: start; gap: 14px; min-width: 0; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 18px; background: var(--surface); }
.aui-hero-lumen-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.aui-hero-lumen-insight { display: flex; gap: 8px; max-width: 46ch; margin: 0; color: var(--text-secondary); line-height: 1.45; }
.aui-hero-lumen-insight strong { color: var(--foreground); font-weight: 500; }
.aui-hero-lumen-insight svg { flex: none; margin-top: 2px; color: var(--accent); }
.aui-hero-lumen-legend { display: flex; flex: none; gap: 14px; color: var(--text-muted); font-size: var(--text-xs); }
.aui-hero-lumen-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aui-hero-lumen-swatch { width: 14px; height: 2px; border-radius: 2px; background: var(--accent); }
.aui-hero-lumen-swatch[data-last] { background: repeating-linear-gradient(to right, color-mix(in oklab, var(--foreground) 46%, var(--surface)) 0 4px, transparent 4px 7px); }
.aui-hero-lumen-window[data-narrow] .aui-hero-lumen-legend { display: none; }

.aui-hero-lumen-card-title { display: flex; justify-content: space-between; font-weight: 500; }
.aui-hero-lumen-card-title span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.aui-hero-lumen-movers { display: grid; margin: 0; padding: 0; list-style: none; }
.aui-hero-lumen-movers li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-subtle); padding: 10px 0; }
.aui-hero-lumen-movers li:first-child { border-top: 0; padding-top: 2px; }
.aui-hero-lumen-mover-mark { display: grid; flex: none; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; }
.aui-hero-lumen-who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.aui-hero-lumen-who strong { font-weight: 500; }
.aui-hero-lumen-who small { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.aui-hero-lumen-amount { color: var(--success); font-variant-numeric: tabular-nums; font-weight: 500; }
.aui-hero-lumen-amount[data-down] { color: var(--danger); }

@container aui-hero (max-width: 560px) {
  .aui-hero-lumen { padding-top: 84px; }
  .aui-hero-lumen-copy { gap: var(--space-4); padding-inline: var(--space-4); }
  .aui-hero-lumen-actions { width: 100%; margin-top: var(--space-2); }
  .aui-hero-lumen-actions > * { flex: 1 1 auto; }
  .aui-hero-lumen-stage { --halo: 56px; margin-top: calc(var(--space-10) - var(--halo)); padding-inline: 0; }
}
/* La tarjeta de KPI compone Sparkline: su leyenda envuelve para que la etiqueta quede sobre un valor mayor. */
.aui-hero-lumen-kpi figcaption { flex-wrap: wrap; row-gap: 4px; }
.aui-hero-lumen-kpi figcaption > :first-child { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-muted); }
.aui-hero-lumen-kpi .aui-sparkline-value { margin-left: 0; font-size: var(--text-2xl, 1.5rem); letter-spacing: var(--tracking-body); }

/* ── HeroRelay (split, «Workflow») ─────────────────────────────────────────────────────────────────────── */
.aui-hero-relay {
  --aui-hero-relay-dot: color-mix(in oklab, var(--foreground) 13%, transparent);
  --aui-hero-relay-wire: color-mix(in oklab, var(--foreground) 17%, transparent);
  --aui-hero-relay-node-shadow: 0 1px 1px rgb(20 24 40 / .04), 0 8px 24px -12px rgb(20 24 40 / .14);
  isolation: isolate; display: grid; align-items: center;
  background: color-mix(in oklab, var(--accent) 2%, var(--background));
}
:root[data-theme="dark"] .aui-hero-relay {
  --aui-hero-relay-dot: color-mix(in oklab, var(--foreground) 17%, transparent);
  --aui-hero-relay-wire: color-mix(in oklab, var(--foreground) 20%, transparent);
  --aui-hero-relay-node-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 7%, transparent), 0 12px 32px -14px rgb(0 0 0 / .7);
}
.aui-hero-relay::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--aui-hero-relay-dot) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 52%, #000 30%, transparent 85%);
  mask-image: radial-gradient(70% 80% at 72% 52%, #000 30%, transparent 85%);
}
.aui-hero-relay-inner { display: grid; box-sizing: border-box; width: 100%; max-width: 1320px; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: var(--space-16); margin: 0 auto; padding: clamp(88px, 12svh, 120px) var(--space-10) var(--space-12); }
.aui-hero-relay-copy { display: grid; justify-items: start; gap: var(--space-5); text-align: left; }
.aui-hero-relay-copy .aui-hero-title { max-width: 12ch; font-size: clamp(2.5rem, 1.2rem + 4.6cqi, 4.5rem); }
.aui-hero-relay-copy .aui-hero-description { max-width: 500px; }
.aui-hero-relay-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.aui-hero-relay-fine { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

.aui-hero-relay-canvas { display: grid; justify-items: center; gap: var(--space-4); min-width: 0; }
.aui-hero-relay-toolbar { display: flex; width: min(100%, 640px); align-items: center; justify-content: space-between; gap: var(--space-3); }
/* «Send test event»: Button variant="secondary" size="sm" de Arc, sin componer ../../button (el kit no lo necesita
   para una sola pulsación con :active). */
.aui-hero-relay-send { display: inline-flex; height: var(--control-height-sm); min-height: var(--control-height-sm); align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.aui-hero-relay-send:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .aui-hero-relay-send:hover { background: var(--surface-muted); } }
@media (prefers-reduced-motion: reduce) { .aui-hero-relay-send:active { transform: none; } }
.aui-hero-relay-file { display: inline-flex; min-width: 0; align-items: center; gap: 8px; color: var(--text-secondary); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.aui-hero-relay-live { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--text-muted); transition: background-color var(--duration-standard) var(--ease-standard); }
.aui-hero-relay-live[data-on] { background: var(--success); }

.aui-hero-relay-stage { position: relative; width: min(100%, 640px); }
.aui-hero-relay-graph { position: absolute; top: 0; left: 50%; translate: -50% 0; transform-origin: 50% 0; }
.aui-hero-relay-edges { position: absolute; inset: 0; overflow: visible; }
.aui-hero-relay-wire { fill: none; stroke: var(--aui-hero-relay-wire); stroke-width: 1.25; }
.aui-hero-relay-wire[data-skipped] { stroke-dasharray: 3 4; opacity: .7; }
.aui-hero-relay-flow { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; transition: stroke-dashoffset var(--aui-hero-relay-flow-duration, 240ms) var(--ease-in-out), opacity 80ms linear; }

.aui-hero-relay-node {
  position: absolute; display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 14px; padding: 0 14px;
  background: var(--surface); box-shadow: var(--aui-hero-relay-node-shadow);
  font-size: 13px; line-height: 1.3;
  transition: border-color var(--duration-standard) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard);
}
.aui-hero-relay-node[data-status="running"] { border-color: color-mix(in oklab, var(--accent) 70%, var(--border)); background: color-mix(in oklab, var(--accent) 4%, var(--surface)); }
.aui-hero-relay-node[data-status="skipped"] { opacity: .5; box-shadow: none; }
.aui-hero-relay-icon { display: grid; width: 20px; height: 20px; flex: none; place-items: center; color: var(--text-secondary); }
.aui-hero-relay-text { display: grid; flex: 1; min-width: 0; }
.aui-hero-relay-text strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.aui-hero-relay-text small { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.aui-hero-relay-state { display: grid; flex: none; justify-items: end; }
.aui-hero-relay-state-inner { display: inline-flex; align-items: center; gap: 6px; }
.aui-hero-relay-meta { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.aui-hero-relay-check { color: var(--success); }
.aui-hero-relay-skip { color: var(--text-muted); }
.aui-hero-relay-pending { display: block; width: 10px; height: 10px; border: 1.5px solid var(--aui-hero-relay-wire); border-radius: 50%; }
.aui-hero-relay-spinner { display: block; width: 13px; height: 13px; flex: none; border: 1.5px solid color-mix(in oklab, var(--accent) 22%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: aui-hero-relay-spin .7s linear infinite; }
@keyframes aui-hero-relay-spin { to { rotate: 360deg; } }

.aui-hero-relay-node[data-compact] { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 8px 4px; padding: 0 14px; }
@container aui-hero (max-width: 560px) { .aui-hero-relay-node[data-compact] { gap: 6px 4px; padding: 0 10px; } }
.aui-hero-relay-node[data-compact] .aui-hero-relay-text { grid-column: 1 / -1; }
.aui-hero-relay-node[data-compact] .aui-hero-relay-state { grid-column: 2; grid-row: 1; }

.aui-hero-relay-summary { position: absolute; left: 0; display: flex; height: 44px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border-subtle); padding: 0 2px; color: var(--text-muted); font-size: 13px; }
.aui-hero-relay-event { display: inline-flex; align-items: center; gap: 12px; }
.aui-hero-relay-event code { border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 7px; background: var(--surface); color: var(--text-secondary); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--text-xs); }
.aui-hero-relay-num { font-variant-numeric: tabular-nums; }
.aui-hero-relay-result { display: inline-flex; align-items: center; gap: 7px; transition: opacity var(--duration-fast) var(--ease-standard); }
.aui-hero-relay-result[data-done] { color: var(--foreground); }
.aui-hero-relay-result[data-done] svg { color: var(--success); }

@container aui-hero (max-width: 900px) {
  .aui-hero-relay-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .aui-hero-relay::before { -webkit-mask-image: radial-gradient(90% 60% at 50% 78%, #000 30%, transparent 85%); mask-image: radial-gradient(90% 60% at 50% 78%, #000 30%, transparent 85%); }
}
@container aui-hero (max-width: 560px) {
  .aui-hero-relay-inner { gap: var(--space-8); padding: 80px var(--space-4) var(--space-6); }
  .aui-hero-relay-copy { gap: var(--space-4); }
  .aui-hero-relay-actions { width: 100%; margin-top: var(--space-1); }
  .aui-hero-relay-actions > * { flex: 1 1 auto; }
  .aui-hero-relay-canvas { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .aui-hero-relay-spinner { animation: none; }
  .aui-hero-relay-node, .aui-hero-relay-live { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aui-hero-rise { transition: none !important; }
}

/* ── Protección contra el CSS agresivo de las webs/temas (márgenes, MAYÚSCULAS, svg recortado) ────────── */
.aui-hero :is(h1, h2, p):not(#aui) { text-transform: none !important; margin: 0 !important; }
.aui-hero .aui-hero-title:not(#aui) { font-family: var(--font-display) !important; font-weight: 500 !important; }
.aui-hero ul:not(#aui), .aui-hero li:not(#aui) { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.aui-hero svg:not(#aui) { display: block !important; max-width: none !important; }
.aui-hero button:not(#aui) { -webkit-appearance: none !important; appearance: none !important; }