/**
 * Componente Servicios (section/services.php).
 * Origen: #s-servicios de home-final.html (valores exactos).
 *
 * @package silomasters
 */

.services-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px;
}
@media(max-width:720px){ .services-grid{grid-template-columns:1fr;} }

.service-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  height:320px; transition:box-shadow .3s ease;
}
.service-card:hover{box-shadow:0 24px 40px -16px rgba(22,22,22,.35);}
.service-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.service-card:hover img{transform:scale(1.06);}
.service-card-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.82) 100%);
  transition:background .3s ease;
}
.service-card:hover .service-card-overlay{background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.9) 100%);}
.service-card-content{position:absolute; left:24px; right:24px; bottom:20px; z-index:2; color:var(--white);}
.service-card-index{font-family:var(--label); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange);}
.service-card-title{font-family:var(--display); font-weight:800; font-size:22px; text-transform:uppercase; line-height:1.05; margin-top:6px; color:var(--white);}
.service-card-desc{font-size:13.5px; line-height:1.5; margin-top:8px; max-width:34ch; color:rgba(255,255,255,.85);}

@media(prefers-reduced-motion: reduce){
  .service-card img,
  .service-card-overlay{transition:none;}
  .service-card:hover img{transform:none;}
}