.services .services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

@media(max-width:1000px){
  .services .services-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .services .services-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }
}

/* Card base */
.services .service-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#0b0b10;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  aspect-ratio:3/4; /* vertical por defecto */
}

/* Si la imagen es horizontal → mejor aspecto panorámico */
.services .service-card.card--landscape{
  aspect-ratio:16/10;
}

/* Hover premium */
.services .service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 42px rgba(0,0,0,.28);
}

/* Imagen */
.services .service-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.75) saturate(1.1);
  transition:transform .4s ease;
}

.services .service-card:hover img{
  transform:scale(1.05);
}

/* Overlay */
.services .service-card .overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));
  color:#fff;
}

.services .service-card h3{
  font-size:1.3rem;
  margin:0 0 6px 0;
  font-weight:600;
}

.services .service-card p{
  font-size:.95rem;
  color:#e7e7e7;
  margin:0;
}