/* =========================================================================
   SERVICIOS.CSS — Rejilla de servicios de construcción
   ========================================================================= */

.services-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.service-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem 1.7rem; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-mid); }
.service-card__icon {
  width: 58px; height: 58px; border-radius: 14px; margin-bottom: 1.2rem;
  display: grid; place-items: center; background: var(--off-white); color: var(--blue-mid);
  border: 1px solid var(--border);
}
.service-card:hover .service-card__icon { background: var(--navy); color: #fff; border-color: var(--navy); }
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { font-size: 1.28rem; margin-bottom: .6rem; }
.service-card p { color: var(--text-muted); font-size: .98rem; margin-bottom: 1.1rem; }
.service-card ul { list-style: none; margin-top: auto; }
.service-card li { position: relative; padding-left: 1.4rem; margin: .35rem 0; font-size: .95rem; }
.service-card li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--blue-mid); transform: rotate(45deg);
}