/* RHD homepage service-card photography.
   Cards 02–06 use referential service artwork uploaded under assets/motors/.
   These backgrounds are navigation imagery only and must not be reused as
   evidence inside the individual service pages. Card 07 uses its own uploaded
   control image exclusively as homepage navigation photography. */

/* Service-card layout policy.
   Keep the CTA in normal document flow instead of absolutely positioning it.
   This guarantees that longer descriptions can never collide with the action. */
.service-grid .service-card.service-card--link{
  display:flex;
  flex-direction:column;
  min-height:320px;
  padding:34px;
}
.service-grid .service-card.service-card--link > p{
  margin-bottom:0;
}
.service-grid .service-card.service-card--link .service-enter{
  position:relative !important;
  left:auto !important;
  bottom:auto !important;
  margin-top:auto;
  padding-top:22px;
  flex:0 0 auto;
  align-self:flex-start;
}

.service-card.service-card--photo{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#121212 !important;
  color:#fff;
  box-shadow:
    0 16px 38px rgba(12,12,12,.09),
    0 3px 10px rgba(12,12,12,.04),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.service-card.service-card--photo .service-card-bg{
  position:absolute;
  inset:5px;
  z-index:0;
  display:block;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  border-radius:22px;
  object-fit:cover;
  object-position:center;
  filter:saturate(.94) contrast(1.04) brightness(.78);
  transform:scale(1.005);
  transition:transform .45s ease,filter .35s ease;
}

.service-card.service-card--photo::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  pointer-events:none;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(5,5,6,.20) 0%,rgba(5,5,6,.43) 42%,rgba(5,5,6,.83) 100%),
    linear-gradient(100deg,rgba(5,5,6,.36) 0%,rgba(5,5,6,.05) 58%,rgba(5,5,6,.18) 100%);
  box-shadow:inset 0 0 36px rgba(0,0,0,.20);
}

.service-card.service-card--photo::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  pointer-events:none;
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(244,244,241,.15),transparent 7%,transparent 93%,rgba(244,244,241,.12)),
    linear-gradient(120deg,rgba(197,19,25,.11),transparent 52%);
}

.service-card.service-card--photo > *:not(.service-card-bg){
  position:relative;
  z-index:2;
}

.service-card.service-card--photo h3{color:#fff}
.service-card.service-card--photo p{color:rgba(255,255,255,.82)}
.service-card.service-card--photo .service-no{color:#ef3036}
.service-card.service-card--photo .service-enter{color:#ff4349}

.service-card.service-card--photo:hover .service-card-bg{
  transform:scale(1.035);
  filter:saturate(1) contrast(1.06) brightness(.82);
}

/* Individual framing per source image. */
.service-card--generators .service-card-bg{object-position:center 47%}
.service-card--bombas .service-card-bg{object-position:center 52%}
.service-card--reductores .service-card-bg{object-position:center 48%}
.service-card--diagnostico .service-card-bg{object-position:center 50%}
.service-card--mantenimiento .service-card-bg{object-position:center 53%}

/* Card 07: uploaded control image reserved exclusively for this navigation card. */
.service-card.service-card--automation{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-color:#111;
  background-image:
    radial-gradient(circle at 80% 18%,rgba(197,19,25,.17),transparent 29%),
    linear-gradient(180deg,rgba(5,5,6,.16) 0%,rgba(5,5,6,.48) 45%,rgba(5,5,6,.88) 100%),
    url("assets/optimized/servicios/control/imagen fondo tarjeta control.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:#fff;
  box-shadow:
    0 16px 38px rgba(12,12,12,.09),
    0 3px 10px rgba(12,12,12,.04),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
.service-card.service-card--automation::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  border-radius:22px;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(135deg,#000,transparent 82%);
  box-shadow:inset 0 0 36px rgba(0,0,0,.22);
}
.service-card.service-card--automation::after{
  content:"CTRL";
  position:absolute;
  right:12px;
  top:18px;
  z-index:1;
  color:rgba(255,255,255,.07);
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:86px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  pointer-events:none;
}
.service-card.service-card--automation > *{position:relative;z-index:2}
.service-card.service-card--automation h3{color:#fff}
.service-card.service-card--automation p{color:rgba(255,255,255,.82)}
.service-card.service-card--automation .service-no{color:#ef3036}
.service-card.service-card--automation .service-enter{color:#ff4349}

@media(max-width:640px){
  .service-grid .service-card.service-card--link{
    min-height:300px;
    padding:30px;
  }
  .service-grid .service-card.service-card--link .service-enter{
    padding-top:20px;
  }
  .service-card.service-card--photo .service-card-bg,
  .service-card.service-card--photo::before,
  .service-card.service-card--photo::after,
  .service-card.service-card--automation::before{
    inset:4px;
    border-radius:20px;
  }
  .service-card.service-card--photo .service-card-bg{
    width:calc(100% - 8px);
    height:calc(100% - 8px);
  }
  .service-card.service-card--automation::after{font-size:68px}
}

@media(prefers-reduced-motion:reduce){
  .service-card.service-card--photo .service-card-bg{transition:none}
}