/* ═══════════════════════════════════════════════════════════════════
   🎯 GEP CAROUSEL POSITION - CONTROL GRANULAR RESPONSIVO
   ═══════════════════════════════════════════════════════════════════
   📌 PROPÓSITO:
   Control individual de posición X e Y para cada carrusel de servicio
   en TODOS los breakpoints responsive.
   
   🎨 CARACTERÍSTICAS:
   • Control independiente para cada uno de los 9 servicios
   • Ajustes personalizados en cada breakpoint (19 tamaños diferentes)
   • Ejes X e Y configu/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 3: UNIDADES DE BOMBEO
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔧 CONFIGURACIÓN BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   ⚠️ PROBLEMA DETECTADO Y SOLUCIONADO:
   • El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   • SOLUCIÓN: Se agregó class="carousel-servicio-3" al div con id="SliderBombeo"
   
   ✅ UBICACIÓN HTML: index.html línea ~1556
   ✅ ANTES: <div id="SliderBombeo" class="carousel slide">
   ✅ AHORA: <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   📋 CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. ✅ CSS tiene .carousel-servicio-X { position: relative !important; }
   2. ✅ HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. ✅ Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-3 {
  position: relative !important;  /* ✅ Necesario para que top/left funcionen */
} 

/*separado
   • Comentarios de control para fácil ajuste
   
   📱 BREAKPOINTS CUBIERTOS:
   1. ≤320px    - Móvil Muy Muy Pequeño
   2. 321-340px - Móvil Muy Pequeño  
   3. 341-360px - Móvil Pequeño
   4. 361-390px - Móvil Pequeño Medio
   5. 391-420px - Móvil Medio
   6. 421-450px - Móvil Medio Grande
   7. 451-480px - Móvil Grande
   8. 481-520px - Móvil Extra Grande
   9. 521-550px - Móvil XXL
   10. 551-600px - Tablet Mini
   11. 601-650px - Tablet Pequeña
   12. 651-700px - Tablet Pequeña-Media
   13. 701-800px - Tablet Media
   14. 801-900px - Tablet Grande
   15. 901-992px - Tablet Extra Grande
   16. 993-1100px - Desktop Pequeño
   17. 1101-1200px - Desktop Medio
   18. 1201-1400px - Desktop Grande
   19. >1400px - Desktop Extra Grande
   
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 1: OPERACIÓN Y MANTENIMIENTO
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   � CONFIGURACIÓN BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-1 {
  position: relative !important;  /* ✅ Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   �📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -380px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-1 {
    /* ← CONTROLES POSICION CARRUSEL 1 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 2: OPERACIÓN Y MANTENIMIENTO
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   � CONFIGURACIÓN BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-2 {
  position: relative !important;  /* ✅ Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   �📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -470px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-2 {
    /* ← CONTROLES POSICION CARRUSEL 2 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 3: UNIDADES DE BOMBEO
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-3 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   �📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -470px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-3 {
    /* ← CONTROLES POSICION CARRUSEL 3 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 4: Plantas de tratamiento de aguas
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-4 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -430px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-4 {
    /* ← CONTROLES POSICION CARRUSEL 4 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 5: Well testing pruebas iniciales y extensas
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-5 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -390px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-5 {
    /* ← CONTROLES POSICION CARRUSEL 5 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 6: MANTENIMIENTO MAYOR Y MENOR DE EQUIPOS
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-6 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -470px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-6 {
    /* ← CONTROLES POSICION CARRUSEL 6 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 7: VENTA DE EQUIPOS Y REPUESTOS
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-7 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -480px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-7 {
    /* ← CONTROLES POSICION CARRUSEL 7 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 8: METROLOGIA
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-8 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -420px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-8 {
    /* ← CONTROLES POSICION CARRUSEL 8 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   🎯 SERVICIO 9: CONSTRUCCION Y MONTAJE - SOLDADURA
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONFIGURACION BASE: Habilitar posicionamiento
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   PROBLEMA DETECTADO Y SOLUCIONADO:
   - El carrusel NO FUNCIONABA porque faltaba la clase en el HTML
   - SOLUCION: Se agrego class="carousel-servicio-3" al div con id="SliderBombeo"
   
   UBICACION HTML: index.html linea ~1556
   ANTES: <div id="SliderBombeo" class="carousel slide">
   AHORA:  <div id="SliderBombeo" class="carousel slide carousel-servicio-3">
   
   CHECKLIST PARA QUE UN SERVICIO FUNCIONE:
   1. CSS tiene .carousel-servicio-X { position: relative !important; }
   2. HTML tiene class="carousel-servicio-X" en el div del carrusel
   3. Breakpoints configurados con left, top, transform
   
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.carousel-servicio-9 {
  position: relative !important;  /* Necesario para que top/left funcionen */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 1: ≤320px (Móvil Muy Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 320px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (320px) */
    left: 0px !important;      /* ← EJE X (horizontal): 0 = borde izquierdo */
    top: 0px !important;       /* ← EJE Y (vertical): 0 = parte superior */
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 2: 321-340px (Móvil Muy Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 321px) and (max-width: 340px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (321-340px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 3: 341-360px (Móvil Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 341px) and (max-width: 360px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (341-360px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 4: 361-390px (Móvil Pequeño Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 361px) and (max-width: 390px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (361-390px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 5: 391-420px (Móvil Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 391px) and (max-width: 420px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (391-420px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 6: 421-450px (Móvil Medio Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 421px) and (max-width: 450px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (421-450px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 7: 451-480px (Móvil Grande) - TU DISPOSITIVO 468x858
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 451px) and (max-width: 480px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (451-480px) ⭐ TU DISPOSITIVO */
    left: 0px !important;
    top: -600px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 8: 481-520px (Móvil Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 520px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (481-520px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 9: 521-550px (Móvil XXL)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 521px) and (max-width: 550px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (521-550px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 10: 551-600px (Tablet Mini)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 551px) and (max-width: 600px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (551-600px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 11: 601-650px (Tablet Pequeña)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 601px) and (max-width: 650px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (601-650px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 12: 651-700px (Tablet Pequeña-Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 651px) and (max-width: 700px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (651-700px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 13: 701-800px (Tablet Media)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 701px) and (max-width: 800px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (701-800px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 14: 801-900px (Tablet Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 801px) and (max-width: 900px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (801-900px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 15: 901-992px (Tablet Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) and (max-width: 992px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (901-992px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 16: 993-1100px (Desktop Pequeño)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 993px) and (max-width: 1100px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (993-1100px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 17: 1101-1200px (Desktop Medio)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (1101-1200px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 18: 1201-1400px (Desktop Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (1201-1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📱 BREAKPOINT 19: >1400px (Desktop Extra Grande)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1401px) {
  .carousel-servicio-9 {
    /* ← CONTROLES POSICION CARRUSEL 9 (>1400px) */
    left: 0px !important;
    top: 0px !important;
    transform: translateX(0%) translateY(0%) !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════
   📚 GUIA DE USO COMPLETA
   ═══════════════════════════════════════════════════════════════════
   
   SISTEMA DE CONTROL GRANULAR DE POSICION DE CARRUSELES
   
   TODOS LOS SERVICIOS (1-9) ESTAN CONFIGURADOS Y LISTOS PARA USAR
   
   COMO AJUSTAR UN CARRUSEL:
   
   1. Busca el servicio que necesitas (SERVICIO 1 a SERVICIO 9)
   2. Busca el breakpoint de tu dispositivo (451-480px marcado como TU DISPOSITIVO)
   3. Modifica los valores de left y top
   
   EJEMPLOS:
   
   Mover carrusel 100px hacia abajo:
   top: 100px !important;
   
   Mover carrusel 50px hacia arriba:
   top: -50px !important;
   
   Mover carrusel a la derecha 20px:
   left: 20px !important;
   
   Centrar horizontalmente:
   left: 50% !important;
   transform: translateX(-50%) translateY(0%) !important;
   
   ESTADO ACTUAL:
   - Servicio 1: top: -50px (subido 50px)
   - Servicio 2: top: 50px (bajado 50px)
   - Servicios 3-9: top: 0px (posicion normal)
   
   PARA AGREGAR MAS BREAKPOINTS:
   Copia la estructura de los servicios 1, 2 o 3 que tienen los 19 breakpoints completos
   
   ═══════════════════════════════════════════════════════════════════ */