/* =================================================
   SERVICE PAGE BASE
   ================================================= */

.service-page {
  background: #111;
  color: white;
}


/* =================================================
   HERO CON FOTO DE FONDO (TU IMAGEN)
   ================================================= */

.service-hero {
  position: relative;

  height: 70vh;
  min-height: 520px;

  background: url("../images/alquiler-bg.jpg") center/cover no-repeat;

  display: flex;
  align-items: center;

  overflow: hidden;
}


/* overlay oscuro para lectura */
.service-hero-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.65) 45%,
    rgba(0,0,0,.35) 75%,
    rgba(0,0,0,.15) 100%
  );
}


/* contenido texto */
.service-hero-content {
  position: relative;
  z-index: 2;

  max-width: 700px;
}


/* =================================================
   TÍTULO
   ================================================= */

.service-hero h1 {
  font-family: 'bebas_regular', sans-serif;
  font-size: 78px;
  letter-spacing: 2px;

  margin-bottom: 18px;

  text-shadow: 0 6px 18px rgba(0,0,0,.9);
}

.service-hero h1 span {
  color: var(--primary);
}


/* =================================================
   DESCRIPCIÓN
   ================================================= */

.service-lead {
  font-size: 20px;
  line-height: 1.5;

  margin-bottom: 28px;

  opacity: .95;
}


/* =================================================
   BOTÓN WHATSAPP
   ================================================= */

.service-cta {
  display: inline-block;

  background: var(--primary);
  color: white;

  padding: 14px 32px;

  border-radius: 6px;

  font-family: 'bebas_regular';
  font-size: 20px;
  letter-spacing: 1px;

  text-decoration: none;

  transition: .25s;
}

.service-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
}


/* =================================================
   BLOQUE TARJETAS
   ================================================= */

.service-content {
  padding: 80px 0 100px;
}


/* grid */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}


/* card */
.service-card {
  background: #1c1c1c;

  padding: 28px;

  border-radius: 8px;

  text-align: left;

  border: 1px solid rgba(255,255,255,.05);

  transition: .25s;
}

.service-card:hover {
  transform: translateY(-5px);
  background: #222;
}

.service-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

/* =================================================
   ICONO MAQUINA
   ================================================= */

.service-icon {
  width: 85px;
  height: auto;

  margin-bottom: 18px;

  filter: drop-shadow(0 8px 12px rgba(0,0,0,.6));

  transition: .25s;
}

.service-card:hover .service-icon {
  transform: scale(1.08);
}



/* =================================================
   MOBILE
   ================================================= */

@media (max-width: 900px) {

  .service-hero {
    height: 60vh;
    text-align: center;
  }

  .service-hero-content {
    max-width: 100%;
  }

  .service-hero h1 {
    font-size: 46px;
  }

  .service-lead {
    font-size: 16px;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }
}