/* ========== HÉROE ========== */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(60px, 9vw, 110px)) 0 clamp(60px, 8vw, 100px);
  isolation: isolate;
}

/* Fondo: vídeo opcional + aurora animada + líneas de luz */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero-aurora { position: absolute; inset: 0; filter: blur(80px); opacity: .9; }
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}
.hero .blob-a { width: 52vw; height: 52vw; max-width: 780px; max-height: 780px; left: -12%; top: -18%;
  background: radial-gradient(circle, rgba(15, 118, 110, .55), transparent 65%); }
.hero .blob-b { width: 46vw; height: 46vw; max-width: 700px; max-height: 700px; right: -10%; top: 5%;
  background: radial-gradient(circle, rgba(100, 116, 139, .45), transparent 65%); animation-duration: 28s; animation-delay: -6s; }
.hero .blob-c { width: 40vw; height: 40vw; max-width: 620px; max-height: 620px; left: 30%; top: 38%;
  background: radial-gradient(circle, rgba(45, 212, 191, .22), transparent 65%); animation-duration: 32s; animation-delay: -12s; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6%, 8%, 0) scale(1.12); }
  100% { transform: translate3d(-5%, -4%, 0) scale(.95); }
}

.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent-soft); }
.hero-lines .ln {
  fill: none;
  stroke: url(#lg1);
  stroke-width: 1.4;
  stroke-dasharray: 900 2200;
  animation: flowline 14s linear infinite;
}
.hero-lines .ln2 { animation-duration: 18s; animation-delay: -4s; stroke-width: 1; }
.hero-lines .ln3 { animation-duration: 22s; animation-delay: -9s; opacity: .7; }
.hero-lines .ln4 { animation-duration: 26s; animation-delay: -2s; opacity: .5; }
@keyframes flowline { to { stroke-dashoffset: -3100; } }

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 260px;
  background: linear-gradient(180deg, transparent, var(--bg));
  z-index: -1;
}

.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-wrap { max-width: 980px; text-align: center; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .2px;
  margin-bottom: 24px;
}
.hero-line { display: block; }
.hero-text {
  max-width: 720px;
  margin: 0 auto 38px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}

/* ---- Panel ilustrativo ---- */
.dash {
  width: 100%;
  max-width: 1120px;
  margin-top: clamp(50px, 7vw, 80px);
  border: 1px solid var(--line2);
  border-radius: 18px;
  background: rgba(11, 18, 34, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 120px -40px rgba(45, 212, 191, .25), 0 0 0 8px rgba(248, 250, 252, .03);
  overflow: hidden;
  text-align: left;
}
.dash-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--steel); opacity: .6; }
.dash-bar i:first-child { background: var(--accent-text); opacity: .9; }
.dash-url { flex: 0 1 320px; height: 20px; margin: 0 auto; border-radius: 6px; background: rgba(248, 250, 252, .06); }

.dash-body { display: grid; grid-template-columns: 190px 1fr; min-height: 340px; }
.dash-side { padding: 20px 16px; border-right: 1px solid var(--line); }
.dash-side img { width: 110px; margin-bottom: 22px; opacity: .9; }
.dash-side li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 4px;
  border-radius: 8px;
  color: var(--muted); font-size: 14px; font-weight: 400;
}
.dash-side li span { flex: none; width: 8px; height: 8px; border-radius: 2px; border: 1px solid currentColor; }
.dash-side li.on { background: var(--accent); color: var(--accent-ink); }

.dash-main { padding: 22px; }
.dash-title { font-family: var(--font-display); color: var(--ink); font-size: 22px; font-weight: 500; margin-bottom: 18px; }
.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.dash-tile, .dash-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(30, 41, 59, .5);
}
.dash-tile-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line2); color: var(--accent-text); margin-bottom: 10px; }
.dash-tile-label { color: var(--ink); font-size: 15px; font-weight: 400; }
.dash-tile-state { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-text); font-size: 13px; font-weight: 400; }

.dash-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.dash-card-title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 400; margin-bottom: 18px; }
.dash-card-title .ico { color: var(--accent-text); }

.flow-track {
  position: relative;
  display: flex; justify-content: space-between; gap: 8px;
  padding-top: 10px;
}
.flow-track::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 22px;
  height: 1px; background: repeating-linear-gradient(90deg, var(--steel) 0 6px, transparent 6px 12px);
}
.flow-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.flow-node i { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line2); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 12px var(--steel); }
.flow-node:last-of-type i { box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 12px var(--accent-text); }
.flow-pulse {
  position: absolute; top: 17px; left: 6%;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent-text);
  box-shadow: 0 0 14px 3px var(--accent-glow);
  animation: flowpulse 4s var(--ease) infinite;
}
@keyframes flowpulse {
  0%   { left: 6%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 92%; opacity: 0; }
}
.dash-sec li { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; }
.dash-sec li .ico { color: var(--accent-text); flex: none; }

@media (max-width: 991px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dash-row { grid-template-columns: 1fr; }
  .dash-main { padding: 14px; }
  .dash-tiles { gap: 10px; }
  .dash-tile { padding: 12px; }
  .flow-node { font-size: 11px; }
}