/* =========================================================
   GD Project Solutions — Service pages (v6.1 dark, compact)
   One-screen module page: dark control surface continuous with
   the home (steel + copper, Inter Tight). Hero + a single compact
   3-column spec band. No grid; ambient copper sheen + particles.
   ========================================================= */

body.service-page {
  min-width: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--page-bg);
  font-family: var(--font-sans);
}

/* Sticky bar stays light, same as the home. */
body.service-page .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  z-index: 20;
}
body.service-page .gd-foot { position: relative; z-index: 1; }

/* ---------- Ambient atmosphere — copper sheen + rising particles ----------
   Fixed layer behind all content (no grid). Ports the home stage-rail mood. */
.svc-atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.svc-atmos__glow {
  position: absolute; inset: -25% -30%;
  mix-blend-mode: screen; opacity: .7; filter: saturate(1.06);
  background-image:
    radial-gradient(ellipse 44% 40% at 82% 8%, rgba(242,189,156,.22), rgba(199,100,50,.10) 46%, transparent 72%),
    radial-gradient(ellipse 40% 52% at 16% 62%, rgba(199,100,50,.11), transparent 70%),
    linear-gradient(104deg, transparent 0 26%, rgba(230,146,102,.06) 40%, rgba(199,100,50,.13) 50%, rgba(230,146,102,.06) 60%, transparent 74%);
  background-size: 160% 150%, 150% 160%, 240% 100%;
  background-position: 82% 8%, 16% 62%, 0% 50%;
  will-change: background-position, opacity;
}

.svc-atmos__particles { position: absolute; inset: 0; }
.svc-atmos__particles i {
  position: absolute; bottom: -12px;
  left: 50%;
  width: 2px; height: 2px;
  --dur: 12s;
  --del: 0s;
  border-radius: 50%;
  background: var(--accent-ink);
  box-shadow: 0 0 6px rgba(230,146,102,.6);
  opacity: 0;
}
.svc-particle--01 { left: 4.0%; --dur: 9.0s; --del: 0.0s; width: 3px; height: 3px; }
.svc-particle--02 { left: 9.3%; --dur: 10.7s; --del: 1.9s; }
.svc-particle--03 { left: 14.6%; --dur: 12.4s; --del: 3.8s; }
.svc-particle--04 { left: 19.9%; --dur: 14.1s; --del: 5.7s; }
.svc-particle--05 { left: 25.2%; --dur: 15.8s; --del: 7.6s; width: 3px; height: 3px; }
.svc-particle--06 { left: 30.5%; --dur: 17.5s; --del: 9.5s; }
.svc-particle--07 { left: 35.8%; --dur: 10.2s; --del: 0.4s; }
.svc-particle--08 { left: 41.1%; --dur: 11.9s; --del: 2.3s; }
.svc-particle--09 { left: 46.4%; --dur: 13.6s; --del: 4.2s; width: 3px; height: 3px; }
.svc-particle--10 { left: 51.7%; --dur: 15.3s; --del: 6.1s; }
.svc-particle--11 { left: 57.0%; --dur: 17.0s; --del: 8.0s; }
.svc-particle--12 { left: 62.3%; --dur: 9.7s; --del: 9.9s; }
.svc-particle--13 { left: 67.6%; --dur: 11.4s; --del: 0.8s; width: 3px; height: 3px; }
.svc-particle--14 { left: 72.9%; --dur: 13.1s; --del: 2.7s; }
.svc-particle--15 { left: 78.2%; --dur: 14.8s; --del: 4.6s; }
.svc-particle--16 { left: 83.5%; --dur: 16.5s; --del: 6.5s; }
.svc-particle--17 { left: 88.8%; --dur: 9.2s; --del: 8.4s; width: 3px; height: 3px; }
.svc-particle--18 { left: 94.1%; --dur: 10.9s; --del: 10.3s; }

@media (prefers-reduced-motion: no-preference) {
  .svc-atmos__glow { animation: svc-sheen 19s cubic-bezier(.38,0,.18,1) infinite alternate; }
  .svc-atmos__particles i { animation: svc-particle-rise var(--dur, 12s) linear var(--del, 0s) infinite; }
}

@keyframes svc-sheen {
  0%   { background-position: 82% 8%, 16% 62%, 0% 50%;  opacity: .52; }
  50%  { background-position: 66% 12%, 28% 58%, 52% 50%; opacity: .82; }
  100% { background-position: 88% 6%, 12% 66%, 100% 50%; opacity: .62; }
}
@keyframes svc-particle-rise {
  0%   { transform: translateY(0);       opacity: 0; }
  10%  { opacity: .55; }
  82%  { opacity: .28; }
  100% { transform: translateY(-101vh);  opacity: 0; }
}

/* =========================================================
   Hero (compact)
   ========================================================= */
.service-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 30px 0 24px;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.service-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-decor) 16%, var(--accent-ink) 56%, transparent);
  opacity: .9;
}

.service-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .56fr);
  gap: 40px;
  align-items: stretch;
}

.service-hero__copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  max-width: 760px;
  animation: svc-rise 600ms var(--mo-ease-out, ease) both;
}

.service-backlink,
.service-kicker,
.svc-kicker,
.svc-spec__h,
.service-panel__head span,
.service-module-map__item span,
.svc-list__tag {
  font-family: var(--font-mono);
}
.service-backlink,
.service-kicker,
.svc-kicker,
.service-panel__head span,
.service-module-map__item span {
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}

.service-backlink {
  display: inline-flex; min-height: 40px; align-items: center; gap: 12px;
  color: var(--accent-ink); text-decoration: none;
}
.service-backlink::before { content: ""; width: 40px; height: 2px; background: var(--accent-decor); transition: width var(--mo-base) var(--mo-ease); }
.service-backlink:hover { color: var(--accent-line); }
.service-backlink:hover::before { width: 56px; }

.service-kicker { margin: 0; color: var(--ink-2); }

.service-hero h1 {
  max-width: 15ch; margin: 0;
  color: var(--ink);
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 600; line-height: 1.02; letter-spacing: -.015em;
  text-wrap: balance;
}

.service-objective {
  max-width: 46ch; margin: 0;
  color: var(--ink-2);
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 400; line-height: 1.5;
  text-wrap: balance;
}

.service-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

/* ---------- Module map (hero panel — the cross-module navigator) ---------- */
.service-hero__panel {
  position: relative; z-index: 1; overflow: hidden; color: #fff;
  background:
    radial-gradient(520px 280px at 12% 22%, rgba(199,100,50,.18), transparent 66%),
    linear-gradient(180deg, var(--steel-900), #141416);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-3);
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  animation: svc-rise 600ms 70ms var(--mo-ease-out, ease) both;
}
.service-panel__head {
  display: grid; gap: 8px; padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.service-panel__head span { color: var(--accent-ink); }
.service-panel__head strong { max-width: 32ch; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.28; }

.service-module-map { position: relative; display: grid; margin: 0; padding: 0; overflow: hidden; }
.service-module-map__item {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px;
  align-items: center; min-height: 46px; padding: 9px 20px; overflow: hidden;
  color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease);
}
.service-module-map__item:last-child { border-bottom: 0; }
.service-module-map__item::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-decor), var(--accent-ink), transparent);
  opacity: 0; transform: translateX(-42%); transition: opacity var(--mo-fast) var(--mo-ease);
}
.service-module-map__item::after {
  content: ""; position: absolute; z-index: 1; width: 86px; height: 86px; right: -42px; top: -42px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(227,144,97,.30), transparent 64%);
  opacity: 0; transform: scale(.74);
  transition: opacity var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease);
}
.service-module-map__item span, .service-module-map__item strong { position: relative; z-index: 2; }
.service-module-map__item span { color: var(--accent-ink); }
.service-module-map__item strong { overflow-wrap: anywhere; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.service-module-map__item.is-active {
  background: rgba(255,255,255,.055);
  box-shadow: inset 3px 0 0 var(--accent-decor), inset 0 0 0 1px rgba(227,144,97,.12);
}
.service-module-map__item:hover, .service-module-map__item:focus-visible {
  background: rgba(255,255,255,.08); color: #fff; transform: translateY(-1px); text-decoration: none;
}
.service-module-map__item:hover::before, .service-module-map__item:focus-visible::before { opacity: 1; animation: service-node-glint 760ms var(--mo-ease-out) both; }
.service-module-map__item:hover::after, .service-module-map__item:focus-visible::after { opacity: 1; transform: scale(1); }
.service-module-map__item:active { transform: translateY(0) scale(.985); }
.service-module-map__item.is-active::before { opacity: 1; transform: none; }
.service-module-map__item.is-active::after { opacity: .72; transform: scale(1); animation: service-node-pulse 2600ms var(--mo-ease) infinite; }

/* ---------- Per-module blueprint (the page's visual identity) ---------- */
.service-bp {
  position: relative; z-index: 1; margin: 0;
  display: flex; min-height: 264px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(440px 280px at 80% 12%, var(--glow-strong), transparent 68%),
    var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  animation: svc-rise 640ms 70ms var(--mo-ease-out, ease) both;
}
.service-bp__tag {
  position: absolute; z-index: 2; inset: 14px 16px auto 16px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink);
}
.service-bp__svg { width: 100%; height: 100%; display: block; }
.bp-guide  { stroke: rgba(231,226,220,.13); stroke-width: 1; fill: none; }
.bp-line   { stroke: var(--accent-ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-accent { stroke: var(--accent-ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bp-fill   { fill: var(--accent-line); stroke: none; }
.bp-dot    { fill: var(--accent-ink); stroke: none; }

/* ---------- Horizontal module navigator — module console ---------- */
.svc-modnav {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; margin-top: 18px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  overflow: hidden;
}
.svc-modnav__item {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px 11px;
  background: var(--surface-3);
  text-decoration: none;
  transition: background var(--mo-base) var(--mo-dry);
}
.svc-modnav__item:hover,
.svc-modnav__item:focus-visible { background: var(--surface-hover); text-decoration: none; }
/* Console rail — one segment per module, continuous across the 1px seams */
.svc-modnav__rail { position: relative; display: block; height: 9px; margin-bottom: 2px; }
.svc-modnav__rail::before {
  content: ""; position: absolute; top: 4px; left: -15px; right: -15px; height: 1px;
  background: var(--hairline-2);
}
.svc-modnav__node {
  position: absolute; top: 1px; left: 0; z-index: 1;
  width: 7px; height: 7px; border-radius: var(--r-1);
  background: var(--surface-3);
  border: 1px solid var(--hairline-2);
  transition: background var(--mo-fast) var(--mo-dry),
              border-color var(--mo-fast) var(--mo-dry),
              box-shadow var(--mo-fast) var(--mo-dry);
}
.svc-modnav__item:hover .svc-modnav__node,
.svc-modnav__item:focus-visible .svc-modnav__node { border-color: var(--accent-line); }
.svc-modnav__code { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-2); }
.svc-modnav__name { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--ink-2); }
.svc-modnav__item.is-active { background: var(--accent-chip-bg); }
.svc-modnav__item.is-active .svc-modnav__rail::before { background: var(--accent-line); }
.svc-modnav__item.is-active .svc-modnav__node {
  background: var(--accent-decor); border-color: var(--accent-decor);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.svc-modnav__item.is-active .svc-modnav__code { color: var(--accent-ink); }
.svc-modnav__item.is-active .svc-modnav__name { color: var(--ink); }

/* =========================================================
   Compact 3-column spec band (Cobertura / Cuándo / Recibe)
   ========================================================= */
.service-detail { position: relative; z-index: 1; padding: 18px 0 56px; }

.svc-kicker {
  margin: 0; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.svc-kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent-decor); }

.svc-journey { animation: svc-rise 600ms var(--mo-ease-out, ease) both; }
.svc-journey__head { margin-bottom: 20px; }
.svc-journey__head .svc-kicker { margin-bottom: 14px; }
.svc-journey__claim {
  margin: 0; max-width: 30ch;
  color: var(--ink);
  font-size: clamp(22px, 2.7vw, 31px);
  font-weight: 600; letter-spacing: -.012em; line-height: 1.1;
  text-wrap: balance;
}
.svc-journey__lead {
  margin: 12px 0 0; max-width: 52ch;
  color: var(--ink-2);
  font-size: clamp(14.5px, 1.5vw, 16px); line-height: 1.55;
  text-wrap: pretty;
}
.svc-journey__lead b { color: var(--accent-ink); font-weight: 600; }

/* Stage flow — the module's own journey on a copper rail (the GD line) */
.svc-flow {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin: 0; padding: 0; list-style: none;
}
.svc-flow::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px;
  background: linear-gradient(90deg, var(--copper-700), var(--copper-400) 50%, var(--copper-700));
  opacity: .55;
}
.svc-flow__step {
  position: relative; display: grid; gap: 11px; justify-items: start;
  animation: svc-rise 540ms var(--mo-ease-out, ease) both;
}
.svc-flow__step:nth-child(2) { animation-delay: 70ms; }
.svc-flow__step:nth-child(3) { animation-delay: 140ms; }
.svc-flow__step:nth-child(4) { animation-delay: 210ms; }
.svc-flow__node {
  position: relative; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 13px;
  color: var(--accent-ink);
  background: var(--surface-1);
  border: 1px solid var(--accent-chip-bd);
  box-shadow: 0 0 0 6px var(--page-bg), var(--card-shadow);
}
.svc-flow__node svg { width: 24px; height: 24px; }
.svc-flow__phase { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.svc-flow__item { color: var(--ink); font-size: 13.5px; line-height: 1.36; max-width: 22ch; }
/* Sober hover: lift the step, node + phase gain copper */
.svc-flow__step { transition: transform var(--mo-base) var(--mo-ease); }
.svc-flow__step:hover { transform: translateY(-2px); }
.svc-flow__node {
  transition: border-color var(--mo-base) var(--mo-ease),
              color var(--mo-base) var(--mo-ease),
              box-shadow var(--mo-base) var(--mo-ease);
}
.svc-flow__step:hover .svc-flow__node {
  border-color: var(--accent-line);
  color: var(--accent-line);
  box-shadow: 0 0 0 6px var(--page-bg), 0 6px 18px rgba(0,0,0,.28), var(--card-shadow);
}
.svc-flow__phase { transition: color var(--mo-base) var(--mo-ease); }
.svc-flow__step:hover .svc-flow__phase { color: var(--accent-line); }

/* Meta — capabilities (tags) + when (conditions) */
.svc-journey__meta {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hairline);
}
.svc-meta__label { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
/* Chips — same compact treatment on both service meta lists */
.svc-caps, .svc-when { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.svc-caps li, .svc-when li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink);
  padding: 8px 13px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  line-height: 1.3;
  transition: background var(--mo-base) var(--mo-ease),
              border-color var(--mo-base) var(--mo-ease),
              box-shadow var(--mo-base) var(--mo-ease);
}
.svc-caps li::before,
.svc-when li::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 2px;
  background: var(--accent-decor);
  transition: width var(--mo-fast) var(--mo-dry), background var(--mo-fast) var(--mo-dry);
}
.svc-caps li:hover, .svc-when li:hover {
  background: var(--surface-hover);
  border-color: var(--accent-chip-bd);
  box-shadow: inset 0 0 0 1px var(--accent-chip-bd);
}
.svc-caps li:hover::before,
.svc-when li:hover::before { width: 14px; background: var(--accent-line); }

/* ---------- Motion ---------- */
@keyframes svc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes service-node-glint { 0% { transform: translateX(-72%); } 100% { transform: translateX(72%); } }
@keyframes service-node-pulse { 0%, 100% { opacity: .42; transform: scale(.92); } 50% { opacity: .82; transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .service-hero__copy, .service-bp, .svc-journey, .svc-flow__step { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .service-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-flow { grid-template-columns: repeat(2, 1fr); }
  .svc-flow::before { display: none; }
  .svc-journey__meta { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 780px) {
  .service-hero { padding: 36px 0 26px; }
  .service-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .service-bp { min-height: 148px; padding: 12px; }
  .svc-modnav { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .svc-flow { grid-template-columns: 1fr; }
  .svc-modnav { grid-template-columns: repeat(2, 1fr); }
}