/* ═══════════════════════════════════════════════════════════════
   LEX — servicos.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero assimétrico ───────────────────────────────────────── */
.servicos-hero .grid { align-items: center; }
.servicos-hero__content .display { font-size: clamp(44px, 6.4vw, 88px); }
.servicos-hero__sub { max-width: 34ch; }
.servicos-hero__aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(74, 101, 128, 0.22);
}
.servicos-hero__aside svg { width: 78%; max-width: 280px; height: auto; }

/* ── Detalhe de serviço ─────────────────────────────────────── */
.service-detail .grid { align-items: start; }
.service-detail__aside { position: sticky; top: 120px; }
.service-detail__num {
  display: block;
  font-size: clamp(64px, 9vw, 130px);
  font-weight: var(--font-display);
  color: rgba(74, 101, 128, 0.5);
  line-height: 0.85;
  margin-bottom: var(--space-md);
}
.service-detail__title { color: var(--color-black); }
.service-detail__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  margin-top: var(--space-lg);
}

.service-detail__body .lead {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: var(--font-light);
  color: var(--color-black);
  line-height: 1.4;
  margin-bottom: var(--space-lg);
  max-width: 40ch;
}
.service-detail__body .body-text {
  max-width: 56ch;
  margin-bottom: var(--space-md);
}

/* ── Lista de entregas ──────────────────────────────────────── */
.deliverables {
  margin: var(--space-lg) 0;
  display: grid;
  gap: var(--space-sm);
}
.deliverables li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-body);
  color: var(--color-black);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-blue-ghost);
}
.deliverables svg {
  width: 20px;
  height: 20px;
  color: var(--color-blue);
  flex-shrink: 0;
}

/* ── Como trabalhamos (processo) ────────────────────────────── */
.processo__head { margin-bottom: var(--space-2xl); align-items: end; }
.processo__head .label { display: block; margin-bottom: var(--space-md); }
.processo__intro .body-text { max-width: 42ch; }

.processo__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  position: relative;
}
.processo__steps::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-blue-ghost);
}
.processo__step {
  position: relative;
  padding-top: var(--space-xl);
}
.processo__step::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-blue);
}
.processo__num {
  display: block;
  font-size: clamp(40px, 4vw, 60px);
  font-weight: var(--font-display);
  color: rgba(74, 101, 128, 0.5);
  line-height: 1;
  margin-bottom: var(--space-md);
}
.processo__step-title {
  font-size: var(--text-subhead);
  font-weight: var(--font-light);
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}
.processo__step-desc {
  font-size: var(--text-small);
  color: var(--color-gray-mid);
  line-height: 1.65;
  max-width: 28ch;
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .servicos-hero__aside { display: none; }
  .service-detail__aside {
    position: static;
    margin-bottom: var(--space-lg);
  }
  .service-detail__num { margin-bottom: var(--space-sm); }

  .processo__steps { grid-template-columns: 1fr; gap: 0; }
  .processo__steps::before { left: 3px; top: 0; width: 1px; height: 100%; }
  .processo__step { padding-top: var(--space-md); padding-left: var(--space-lg); padding-bottom: var(--space-lg); }
  .processo__step::before { top: 6px; }
}