/* ================================================================
   TARJETAS DE SERVICIO — Diseño simple con imágenes de fondo
   ================================================================ */

/* --- Tarjeta de servicio base --- */
.service-card {
  background: linear-gradient(135deg,
    rgba(27, 27, 27, 0.85),
    rgba(47, 52, 58, 0.75)
  );
  border: 1px solid rgba(191, 196, 201, 0.15);
  border-radius: 14px;
  padding: var(--sp-lg);
  text-align: left;
  cursor: default;
  position: relative;
  overflow: hidden;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Fondo de imagen oscurecida */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(135deg,
    rgba(13, 13, 13, 0.8),
    rgba(13, 13, 13, 0.85)
  );
  border-radius: 14px;
  background-blend-mode: darken;
}

/* Asignar imagen específica a cada tarjeta */
.service-card[data-service="alineacion"]::after {
  background-image:
    linear-gradient(135deg, rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.85)),
    url('../media/service-bg/alineacion.jpg');
}

.service-card[data-service="diagnostico"]::after {
  background-image:
    linear-gradient(135deg, rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.85)),
    url('../media/service-bg/diagnostico.jpg');
}

.service-card[data-service="frenos"]::after {
  background-image:
    linear-gradient(135deg, rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.85)),
    url('../media/service-bg/frenos.jpg');
}

.service-card[data-service="suspension"]::after {
  background-image:
    linear-gradient(135deg, rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.85)),
    url('../media/service-bg/suspension.jpg');
}

.service-card[data-service="mantenimiento"]::after {
  background-image:
    linear-gradient(135deg, rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.85)),
    url('../media/service-bg/mantenimiento.jpg');
}

.service-card[data-service="electrico"]::after {
  background-image:
    linear-gradient(135deg, rgba(13, 13, 13, 0.8), rgba(13, 13, 13, 0.85)),
    url('../media/service-bg/electrico.jpg');
}

/* --- Títulos en las tarjetas --- */
.service-card h3 {
  margin: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--laser);
  position: relative;
  z-index: 2;
}

/* --- Párrafo de texto --- */
.service-card p {
  font-size: 0.9rem;
  color: var(--text-md);
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .service-card {
    padding: var(--sp-md);
  }

  .service-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .service-card p {
    font-size: 0.85rem;
  }
}