/* ==========================================================================
   Páginas de serviço (/servicos/<serviço>/)
   Geradas por tools/make-service-pages.ps1; carregam este arquivo além dos
   quatro CSS da home.
   ========================================================================== */

/* ---------- Topo: texto à esquerda, ilustração à direita ---------- */
.spage-hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vw, 3.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(34rem 22rem at 100% 0%, color-mix(in srgb, var(--pcj-green-vibrant) 12%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--surface-2), var(--surface) 90%);
}
.spage-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.spage-hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.spage-hero__title {
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--heading);
  text-wrap: balance;
}
.spage-hero__lead { font-size: var(--fs-md); color: var(--text-muted); max-width: 34rem; }
.spage-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Trilha de navegação (Início › Serviços › …) */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.crumbs li + li::before { content: "›"; margin-right: 0.35rem; opacity: 0.7; }
.crumbs a { color: inherit; text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--heading); font-weight: 600; }

.spage-hero__art {
  margin: 0;
  border-radius: 1.75rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---------- Ilustrações (cores da marca, acompanham o tema) ---------- */
.ill { display: block; width: 100%; height: auto; }
.ill-bg { fill: var(--blue-soft); }
.ill-dot { fill: color-mix(in srgb, var(--pcj-blue-secondary) 16%, transparent); }
.ill-card { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.ill-soft { fill: var(--surface-2); }
.ill-soft2 { fill: color-mix(in srgb, var(--pcj-blue-secondary) 30%, var(--surface)); }
.ill-line { fill: var(--line); }
.ill-blue { fill: var(--pcj-blue-primary); }
.ill-blue2 { fill: var(--pcj-blue-secondary); }
.ill-green { fill: var(--pcj-green-primary); }
.ill-vib { fill: var(--pcj-green-vibrant); }
.ill-ink { fill: var(--ink); }
.ill-white { fill: #fff; }
.ill-label { fill: #fff; font: 700 13px var(--font-body); letter-spacing: 0.02em; }
.ill-check, .ill-white-stroke { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill-ink-stroke { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ill-ink-stroke-thin { fill: none; stroke: var(--heading); stroke-width: 3; }
.ill-ring { fill: none; stroke: var(--pcj-blue-secondary); stroke-width: 4; }
.ill-ring-sq { fill: none; stroke: var(--text-muted); stroke-width: 2.5; opacity: 0.6; }
.ill-axis { fill: none; stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill-line-stroke { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; }
.ill-blue-stroke { fill: none; stroke: var(--pcj-blue-secondary); stroke-width: 6; stroke-linecap: round; }
.ill-green-stroke { fill: none; stroke: var(--pcj-green-primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ill-vib-stroke { fill: none; stroke: var(--pcj-green-vibrant); stroke-width: 6; stroke-linecap: round; }
.ill-ink-dash { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 4 5; }
.ill-dashed { stroke-width: 4; stroke-dasharray: 2 12; }
.ill-donut-a { fill: none; stroke: var(--line); stroke-width: 22; }
.ill-donut-b { fill: none; stroke: var(--pcj-blue-primary); stroke-width: 22; }
.ill-donut-c { fill: none; stroke: var(--pcj-green-vibrant); stroke-width: 22; }
.ill-glass { fill: none; stroke: var(--pcj-blue-primary); stroke-width: 12; }
.ill-handle { fill: none; stroke: var(--pcj-blue-primary); stroke-width: 20; stroke-linecap: round; }
.ill-heart { fill: var(--pcj-blue-secondary); }
.ill-area { fill: color-mix(in srgb, var(--pcj-green-vibrant) 24%, transparent); }
.ill-green-ring { stroke: var(--pcj-green-primary); stroke-width: 4; }
.ill-cal rect { fill: var(--surface-2); }
.ill-box { fill: color-mix(in srgb, var(--pcj-blue-secondary) 55%, var(--surface)); }
.ill-box2 { fill: color-mix(in srgb, var(--pcj-green-primary) 45%, var(--surface)); }
.ill-tape { fill: rgb(255 255 255 / 0.5); }
.ill-flow, .ill-flow-head { fill: none; stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* No escuro, o azul-marinho some no fundo: as peças "ink" viram azul da marca */
[data-theme="dark"] .ill-ink { fill: var(--pcj-blue-primary); }

/* ---------- Detalhes: para quem / o que fazemos / o que você ganha ---------- */
.spage-details {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.spage-details__text { display: grid; gap: var(--space-6); }
.spage-details__text h2 { font-size: var(--fs-xl); font-weight: 800; color: var(--heading); margin-bottom: var(--space-3); }
.spage-details__text p { font-size: var(--fs-md); color: var(--text-muted); max-width: 40rem; }
.spage-gains {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.spage-gains h2 { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--space-4); color: var(--heading); }

/* ---------- Como funciona ---------- */
.spage-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
  counter-reset: passo;
}
.spage-steps li {
  counter-increment: passo;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.spage-steps li::before {
  content: counter(passo, decimal-leading-zero);
  color: var(--pcj-green-primary);
  font-weight: 800;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}
.spage-steps strong { color: var(--heading); font-size: var(--fs-md); }
.spage-steps span { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- Quem faz: foto real da equipe ---------- */
.spage-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.spage-team figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.spage-team img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.spage-team__text { display: grid; gap: var(--space-4); justify-items: start; }
.spage-team__text p { color: var(--text-muted); font-size: var(--fs-md); }

/* ---------- Outros serviços ---------- */
.spage-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
.spage-more a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--heading);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s var(--ease), color 0.2s;
}
.spage-more a:hover { border-color: var(--pcj-blue-secondary); color: var(--accent-text); transform: translateY(-2px); }
.spage-more .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--pcj-green-primary); }

/* ---------- Chamada final (faixa escura) ---------- */
.spage-cta {
  --color-focus: var(--pcj-green-vibrant);
  background:
    radial-gradient(30rem 20rem at 100% 0%, color-mix(in srgb, var(--pcj-green-primary) 35%, transparent), transparent 70%),
    #001a3b;
  color: rgb(255 255 255 / 0.85);
  text-align: center;
}
.spage-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); justify-items: center; max-width: 44rem; margin-inline: auto; }
.spage-cta__actions .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.spage-cta .h2 { color: #fff; }
.spage-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.spage-cta .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 0.35); }
.spage-cta .btn--ghost:hover { color: var(--pcj-green-vibrant); border-color: var(--pcj-green-vibrant); }

@media (max-width: 64em) {
  .spage-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spage-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56em) {
  .spage-hero__grid, .spage-details, .spage-team { grid-template-columns: minmax(0, 1fr); }
  .spage-hero__art { max-width: 32rem; }
}
@media (max-width: 34em) {
  .spage-steps, .spage-more { grid-template-columns: minmax(0, 1fr); }
}