/* =========================
   SERVICIOS
========================= */
.services{
  padding:56px 0 54px;
  background:#fff;
}

.sectionTitle{
  font-family: var(--ff-title);
  font-weight:900;
  font-size:26px;
  color:var(--red);
  margin:35px 0px;
  letter-spacing:.3px;
}

.servicesGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
}

.serviceBtn{
  background:#efefef;
  border-radius:0;             /* en el diseño se ve bien “cuadrado” */
  padding:26px 18px;
  text-decoration:none;
  color:#111;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:335px;
  transition:transform .15s ease, box-shadow .15s ease;
}

.serviceBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.10);
}

.serviceBtn__icon{
  height:90px;
  object-fit:contain;
  margin-bottom:14px;
}

.serviceBtn__text{
  font-family: var(--ff-body);
  font-weight:500;
  font-size:18px;
  line-height:1.15;
  text-align:center;
  max-width:170px; /* ayuda a que queden en 2 líneas como el diseño */
}

/* Responsive */
@media (max-width: 992px){
  .servicesGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px){
  .servicesGrid{ grid-template-columns: 1fr; }
  .serviceBtn__icon{ height:150px; }
}