/*
 * service-page.css — Hero de páginas de servicio individuales
 */

/* ── Hero split ──────────────────────────────────── */
.sp-hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.sp-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 9rem 3.5rem 5rem 4rem;
  background: var(--bg); position: relative;
}
.sp-right { position: relative; overflow: hidden; clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); }
.sp-right-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sp-right-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, rgba(10,8,18,.5) 12%, transparent 30%); z-index: 5; pointer-events: none; }
.sp-right-inner::after  { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%); z-index: 5; pointer-events: none; }
.sp-right-bg { position: absolute; inset: 0; }

.sp-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--accent-bg); border: 1px solid var(--border);
  padding: .42rem 1.1rem; border-radius: 24px;
  font-family: "JetBrains Mono", monospace; font-size: .67rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 2rem; width: fit-content;
}
.sp-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); animation: pulse 2s ease infinite; }

.sp-h1 {
  font-family: "Fraunces", serif;
  font-size: clamp(2.8rem, 5vw, 6rem);
  font-weight: 200; line-height: 1.02; letter-spacing: -.02em;
}
.sp-sub   { font-size: 1.05rem; color: var(--muted); max-width: 440px; line-height: 1.85; margin-top: 1.8rem; }
.sp-actions{ display: flex; gap: 1.5rem; align-items: center; margin-top: 2.5rem; flex-wrap: wrap; }
.sp-stats { display: flex; gap: 2.5rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.sp-sn    { font-family: "Fraunces", serif; font-size: 2.4rem; font-weight: 200; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sp-sl    { font-family: "JetBrains Mono", monospace; font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }

/* ── Service hero con imagen subida ──────────────────── */
.sp-right-photo {
    background-size: cover !important;
    background-position: center !important;
}
.sp-photo-overlay {
    position: absolute;
    inset: 0;
}