/* Minusjob — estilos de contenido enriquecido (listas de entregables, proceso, etc.).
   Solo tokens (var(--…)); sin colores literales. Se carga después de minusjob.css y site.css. */

/* ---------- Lista de lo que incluye (servicios, soluciones, contacto) ------
   Misma idea que .mj-price__list (check en círculo brand-blue-50), reutilizable fuera de PriceCard. */
.mj-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mj-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.mj-checklist__icon {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-top: 0;
  border-radius: 50%;
  background: var(--brand-blue-50);
  color: var(--brand-blue-strong);
}
.mj-checklist__icon .mj-i { width: 13px; height: 13px; }

/* Dentro de una tarjeta: separada del párrafo con la línea discontinua de PriceCard. */
.mj-service .mj-checklist { padding-top: var(--space-4); border-top: 1px dashed var(--border-strong); }

/* ---------- ServiceCard: promesa de una línea ----------------------------- */
.mj-service p.mj-service__promise { font: 600 16px/1.45 var(--font-display); letter-spacing: -0.01em; color: var(--ink-strong); text-wrap: balance; }
.mj-service .mj-service__promise + p { margin-top: calc(-1 * var(--space-1)); }

/* ---------- ServiceCard destacada, versión apilada -------------------------
   Con promesa, párrafo y lista, el texto no cabe sobre la foto con el velo de la
   receta (la parte alta del velo es translúcida). Aquí la foto ocupa la parte de
   arriba y el texto queda siempre sobre surface-dark sólido. */
.mj-service--feature.mj-service--stacked { justify-content: flex-start; }
.mj-service--stacked .mj-service__media {
  position: relative; inset: auto; z-index: 0;
  flex: 1 1 220px; min-height: 220px;
  overflow: hidden;
}
.mj-service--stacked .mj-service__media img { position: absolute; inset: 0; }
.mj-service--stacked .mj-service__media::after { background: linear-gradient(180deg, transparent 40%, var(--surface-dark) 100%); }
.mj-service--stacked .mj-service__body { position: relative; z-index: 1; background: var(--surface-dark); padding-top: var(--space-2); }
.mj-service--feature p.mj-service__promise { color: var(--text-on-dark); font-size: 17px; }
.mj-service--feature .mj-checklist { border-top-color: var(--border-dark); }
.mj-service--feature .mj-checklist li { color: var(--text-on-dark); }
.mj-service--feature .mj-checklist__icon { background: var(--surface-dark-raised); box-shadow: inset 0 0 0 1px var(--border-dark); color: var(--brand-blue-soft); }
.mj-service--feature .mj-service__body .mj-link { margin-top: var(--space-2); justify-self: start; }

/* ---------- Cómo trabajamos (NumberedService con el lema) ----------------- */
.mj-how { margin-top: var(--space-9); }
.mj-how__head { display: grid; gap: 18px; justify-items: start; max-width: 680px; margin-bottom: var(--space-7); }
.mj-how__title { font: 700 28px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink-strong); text-wrap: balance; }
ol.mj-how__steps { margin: 0; padding: 0; list-style: none; }
.mj-how__steps .mj-step p { text-wrap: pretty; }

/* ---------- Contacto: qué contarnos para cotizar -------------------------- */
.mj-contact-head .mj-sec__aside { gap: var(--space-4); }
.mj-contact-head__intro { font: 600 16px/1.4 var(--font-display); color: var(--ink-strong); }

@media (max-width: 960px) {
  .mj-how { margin-top: var(--space-8); }
}
@media (max-width: 640px) {
  .mj-how__title { font-size: 24px; }
  .mj-how__head { margin-bottom: var(--space-6); }
  .mj-service--stacked .mj-service__media { flex-basis: 180px; min-height: 180px; }
}