/* ================================
   SERVICIOS – SECCIÓN
================================ */

.division-servicios {
  position: relative;
  padding: 48px 20px 80px;
  background: #000;
}

/* Wrapper general */
.servicios-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* ================================
   HEADER SERVICIOS
================================ */

.servicios-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 50px;
}

.servicios-linea {
  width: 24px;
  height: 2px;
  background-color: #f2b233;
  flex-shrink: 0;
}

.servicios-titulo {
  font-family: 'Questrial', sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================================
   GRID SERVICIOS
================================ */

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

/* ================================
   ITEM SERVICIO
================================ */

.servicio-item {
  position: relative;
  height: 280px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-decoration: none;
}

/* ================================
   EFECTO PROFESIONAL SERVICIOS
================================ */

/* Imagen: zoom sutil */
.servicio-item {
  transition: transform 0.6s ease;
}

.servicio-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.8s ease;
  z-index: 0;
}

/* Overlay por encima */
.servicio-item .servicio-overlay {
  z-index: 1;
}

/* Texto */
.servicio-item .servicio-content {
  transform: translateY(8px);
  transition: transform 0.45s ease, opacity 0.45s ease;
  opacity: 0.95;
}

/* Hover */
@media (hover: hover) {
  .servicio-item:hover::before {
    transform: scale(1.08);
  }

  .servicio-item:hover .servicio-content {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Overlay */
.servicio-item .servicio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.35s ease;
  z-index: 1;
}

@media (hover: hover) {
  .servicio-item:hover .servicio-overlay {
    background: rgba(0, 0, 0, 0.20);
  }
}

/* Texto */
.servicio-item .servicio-content {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  color: #fff;
}

.servicio-item .servicio-content span {
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f2b233;
  display: block;
  margin-bottom: 6px;
}

.servicio-item .servicio-content h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

/* ================================
   RESPONSIVE
================================ */

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

  .servicio-item {
    height: 260px;
  }

  .servicios-titulo {
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .servicios-header {
    justify-content: center;
  }

  .servicios-grid {
    grid-template-columns: 1fr;
  }

  .servicio-item {
    height: 240px;
  }

  .servicios-titulo {
    font-size: 32px;
  }
}

/* ================================
   IMÁGENES POR SERVICIO
================================ */

.servicio-item.acarreo-mediano {
  background-image: url("../img/servicios/acarreo-mediano.jpg");
}

.servicio-item.acarreo-pesado {
  background-image: url("../img/servicios/acarreo-pesado.jpg");
}

.servicio-item.camilla-liviana {
  background-image: url("../img/servicios/camilla-liviana.jpg");
}

.servicio-item.camilla-mediana {
  background-image: url("../img/servicios/camilla-mediana.jpg");
}

.servicio-item.camilla-pesada {
  background-image: url("../img/servicios/camilla-pesada.jpg");
}

.servicio-item.desencajes-livianos {
  background-image: url("../img/servicios/desencajes-livianos.jpg");
}

.servicio-item.desencajes-pesados {
  background-image: url("../img/servicios/desencajes-pesados.jpg");
}

.servicio-item.carreton {
  background-image: url("../img/servicios/carreton.jpg");
}

.servicio-item.carreton-apiladores {
  background-image: url("../img/servicios/carreton-apiladores.jpg");
}

.servicio-item.servicios-especiales {
  background-image: url("../img/servicios/servicios-especiales.jpg");
}

.servicio-item.autoelevadores {
  background-image: url("../img/servicios/autoelevadores.jpg");
}

.servicio-item.brazos {
  background-image: url("../img/servicios/brazos.jpg");
}

.servicio-item.manipuladores {
  background-image: url("../img/servicios/manipuladores.jpg");
}

.servicio-item.tijeras-plataformas {
  background-image: url("../img/servicios/tijeras-plataformas.jpg");
}

.servicio-item.maquinas-viales {
  background-image: url("../img/servicios/maquinas-viales.jpg");
}


/* ================================
   APARICIÓN SERVICIOS AL SCROLL
================================ */

.servicio-item {
  opacity: 1;
  transform: none;
}