/* ============================================================
   08-servicio.css · Plantilla de subpágina de servicio (VP-01…VP-06)
   Reutiliza variables y utilidades de 01-base.css
   ============================================================ */

.svc-hero {
  padding-top: calc(var(--nav-h) + var(--space-xl));
  padding-bottom: var(--space-lg);
  background: var(--vp-gris-claro);
  border-bottom: 1px solid var(--color-line);
}
.svc-hero__h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.svc-hero__lead {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--color-accent);
  max-width: 40ch;
}

.svc-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--container-pad); }
/* Ritmo vertical de sección más compacto que el Home: 64px desktop, 32px móvil
   (el Home usa section { padding: var(--space-xl) } / @768 var(--space-lg) de 01-base). */
.svc-page section { padding: var(--space-lg) 0; }
@media (max-width: 768px) {
  .svc-page section { padding: var(--space-md) 0; }
}

.svc-block__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.svc-block__body { font-size: 1.075rem; line-height: 1.65; color: var(--color-ink-soft); max-width: 64ch; }
.svc-block__body + .svc-block__body { margin-top: var(--space-sm); }

/* Diferenciador crítico */
.svc-callout {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-accent);
  background: rgba(63, 52, 119, 0.05);
  border-radius: var(--radius-md);
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--color-ink);
}

/* Entregables */
.svc-deliverables { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-sm); }
.svc-deliverables li {
  position: relative;
  padding-left: 30px;
  font-size: 1.075rem;
  line-height: 1.45;
  color: var(--color-ink);
}
.svc-deliverables li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--vp-lavanda);
}

/* Chips Aplica en */
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-sm); }
.svc-chip {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--vp-azul-profundo);
  color: var(--vp-blanco);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
}

/* Caso (experiencia previa) */
.svc-case {
  margin-top: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--vp-gris-claro);
  border-radius: var(--radius-lg);
  font-size: 1.05rem; line-height: 1.6; color: var(--color-ink-soft);
}
.svc-case strong { color: var(--color-ink); }

/* CTA final */
.svc-cta { background: var(--color-dominant); border-top: 1px solid var(--color-line); }
.svc-cta__h {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--color-ink); margin-bottom: var(--space-md);
}
.svc-cta__row { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 600px) {
  .svc-cta__row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-chip, .svc-deliverables li { transition: none !important; }
}

/* ── Comparativa lado a lado (Prompt Maestro #7) ── */
.svc-compare .cmp {
  margin-top: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cmp__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--color-line);
}
.cmp__row:first-child { border-top: 0; }
.cmp__dim {
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--vp-gris-claro);
  display: flex;
  align-items: center;
}
.cmp__val {
  padding: var(--space-sm) var(--space-md);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
}
/* Columna del Propietario destacada con la paleta VP */
.cmp__val--propietario {
  background: var(--vp-azul-profundo);
  color: var(--vp-blanco);
}
.cmp__row--head .cmp__dim { background: transparent; }
.cmp__row--head .cmp__val {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}
.cmp__row--head .cmp__val--propietario {
  background: var(--vp-azul-ejecutivo);
  color: var(--vp-blanco);
}

/* Toggle (solo mobile) */
.cmp-toggle { display: none; gap: 8px; margin-top: var(--space-md); }
.cmp-toggle__btn {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-dominant);
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: all var(--t-fast);
}
.cmp-toggle__btn.is-active {
  border-color: var(--vp-azul-ejecutivo);
  background: rgba(63, 52, 119, 0.05);
  color: var(--color-accent);
}

@media (max-width: 700px) {
  .cmp-toggle { display: flex; }
  .cmp__row { grid-template-columns: 1fr 1fr; }
  .cmp__row--head { display: none; }
  .cmp[data-active="contratista"] .cmp__val--propietario { display: none; }
  .cmp[data-active="propietario"] .cmp__val--contratista { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-toggle__btn { transition: none !important; }
}