/* /services y /services/:slug — capa fina sobre work.css (nav, footer,
   hero, cta, wk-card, wk-empty ya están definidos ahí). Solo lo que es
   propio de Services vive aquí. */

.sv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 64px 100px; max-width: 1200px; margin: 0 auto; }
.sv-card {
  position: relative; overflow: hidden; padding: 40px 34px; border-radius: 12px; border: 1px solid var(--line-ink);
  background: linear-gradient(160deg, var(--ink-soft) 0%, var(--ink) 100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.sv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--coral), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.sv-card:hover { transform: translateY(-6px); border-color: rgba(255,90,54,.5); box-shadow: 0 24px 46px -20px rgba(255,90,54,.4); }
.sv-card:hover::before { transform: scaleX(1); }
.sv-card-num { display: block; font: 400 30px/1 var(--font-d), sans-serif; color: rgba(255,255,255,.28); margin-bottom: 18px; }
.sv-card h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; color: #fff; margin: 0 0 12px; }
.sv-card p { font: 400 15px/1.55 var(--font-b); color: var(--text-ink-soft); margin: 0 0 22px; }
.sv-card-arrow { display: inline-block; font: 800 11.5px/1 var(--font-b); letter-spacing: .06em; text-transform: uppercase; color: var(--coral-light); }

.sv-proceso { padding: 30px 64px 90px; max-width: 900px; margin: 0 auto; }
.sv-proceso-list { margin-top: 26px; display: flex; flex-direction: column; }
.sv-proceso-row { display: flex; gap: 26px; padding: 26px 0; border-top: 1px solid var(--line-ink); align-items: baseline; }
.sv-proceso-num { font: 400 22px/1 var(--font-d), sans-serif; color: var(--gold); width: 44px; flex-shrink: 0; }
.sv-proceso-row h3 { font-size: 19px; color: #fff; margin: 0 0 6px; }
.sv-proceso-row p { font: 400 14.5px/1.55 var(--font-b); color: var(--text-ink-soft); margin: 0; }

.sv-relacionado { padding: 0 64px 90px; max-width: 1400px; margin: 0 auto; }
.sv-relacionado h2 { font: 800 11px/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin: 0 0 22px; }
.sv-relacionado-grid { grid-template-columns: repeat(3, 1fr); padding: 0; }
.sv-relacionado-grid .wk-card-media { aspect-ratio: 16/10; }

@media (max-width: 880px) {
  .sv-grid { grid-template-columns: 1fr; padding: 0 20px 60px; }
  .sv-card { padding: 30px 24px; }
  .sv-proceso { padding: 20px 20px 60px; }
  .sv-relacionado { padding: 0 20px 60px; }
  .sv-relacionado-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}