/* =============================================================
   Hero oscuro de catálogo (.svc-hero--dark)
   Variante sobre fondo #0A1014 del hero .svc-hero (hub-services-scroll.css)
   Pensado para portadas de listados de servicios (IA y futuras áreas)
   ============================================================= */

.svc-hero--dark {
  background:
    radial-gradient(circle at 14% 18%, rgba(20, 104, 163, 0.30) 0%, transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(43, 177, 255, 0.16) 0%, transparent 46%),
    #0a1014;
  color: #fff;
  min-height: min(90vh, 820px);
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(4rem, 8vh, 6rem);
}

/* Malla de puntos sobre el fondo oscuro */
.svc-hero--dark::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Trama de pixeles animada (canvas) */
.svc-hero--dark .svc-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 34%), linear-gradient(to bottom, #000 48%, transparent 98%);
  mask-image: linear-gradient(to right, transparent 2%, #000 34%), linear-gradient(to bottom, #000 48%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.svc-hero--dark .svc-hero__inner {
  position: relative;
  z-index: 1;
}

.svc-hero--dark .svc-hero__eyebrow { color: #6fc2f5; }
.svc-hero--dark .svc-hero__eyebrow::before {
  background: #6fc2f5;
  box-shadow: 0 0 0 4px rgba(111, 194, 245, 0.18);
}

.svc-hero--dark .svc-hero__title { color: #fff; }
.svc-hero--dark .svc-hero__title em {
  background: linear-gradient(120deg, #4da3e0 0%, #2bb1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-hero--dark .svc-hero__sub { color: rgba(255, 255, 255, 0.74); }
.svc-hero--dark .svc-hero__sub strong { color: #fff; }

.svc-hero--dark .svc-hero__meta { border-top-color: rgba(255, 255, 255, 0.14); }
.svc-hero--dark .svc-hero__meta-num { color: #fff; }
.svc-hero--dark .svc-hero__meta-num small { color: #6fc2f5; }
.svc-hero--dark .svc-hero__meta-label { color: rgba(255, 255, 255, 0.58); }

/* Valores de texto en vez de numeros (n8n, A medida...) */
.svc-hero__meta-num--txt {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.svc-hero--dark .btn--ghost {
  --fg: #fff;
  --bd: rgba(255, 255, 255, 0.32);
}
.svc-hero--dark .btn--ghost:hover {
  --bg: #fff;
  --fg: #0a1014;
  --bd: #fff;
}

@media (max-width: 760px) {
  .svc-hero--dark { min-height: 0; }
}