.services-grid {
  display: grid;
  /* Bajamos el mínimo a 120px para garantizar que entren 2 en mobile, pero estiren en desktop */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem; /* Achicamos un pelín el gap para dar más aire en pantallas chicas */
  max-width: 900px; 
  margin: 2rem auto; 
  padding: 0 1rem; /* 1rem de padding lateral es ideal para mobile */
}

/* Ajuste fino para las cards internas */
.card {
  background: var(--bg-card);
  border: 2px solid rgba(199, 164, 66, 0.3);
  border-radius: 12px;
  padding: 1.2rem 0.8rem; /* Un padding interno levemente más compacto */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  height: 100%; /* Obliga a todas a medir lo mismo */
}

/* Esto evita que palabras largas estiren la card hacia los costados */
.card p {
  color: var(--color-texto-card);
  overflow-wrap: anywhere; /* Rompe la palabra si es más ancha que la card */
  font-size: 0.95rem; /* Un pelín más chico para que entre en 2 columnas */
}

.services-header h1,
.services-header p {
  align-items: center;
  text-align: center;
  padding: 10px;
}