/* =========================================================
   SERVICIOS V26
   - Carrusel SOLO en tablets: 721px–1120px.
   - PC/laptop: tarjetas estáticas.
   - Móvil: tarjetas estáticas.
   - Ajuste de margen interno del CTA "Todos los servicios".
   ========================================================= */

/* ---------- PC / LAPTOP: SIN CARRUSEL ---------- */
@media (min-width: 1121px) {
  .servicios-carrusel-zona {
    display: block;
  }

  .servicios-viewport {
    overflow: visible;
    padding: 7px 3px 14px;
  }

  .servicios-lista {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .servicio-tarjeta,
  .servicio-tarjeta:last-child {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .servicios-nav,
  .servicios-dots {
    display: none !important;
  }

  .boton-todos-servicios.btn-principal {
    padding-left: 24px !important;
    padding-right: 17px !important;
  }

  .boton-todos-servicios .texto-boton {
    position: static !important;
    left: auto !important;
    transform: none !important;
    padding-left: 2px;
  }
}

/* ---------- TABLET: CARRUSEL ACTIVO ---------- */
@media (min-width: 721px) and (max-width: 1120px) {
  .servicios-carrusel-zona {
    display: flex;
  }

  .servicios-viewport {
    overflow: hidden;
    touch-action: pan-y;
  }

  /*
    Una tarjeta visible por vez para evitar que quede delgada.
    El JavaScript avanza exactamente 1 tarjeta por movimiento.
  */
  .servicios-lista {
    --servicios-visibles: 1 !important;
    display: flex !important;
    gap: 18px !important;
    transform: translate3d(0,0,0);
    will-change: transform;
  }

  .servicio-tarjeta,
  .servicio-tarjeta:last-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
  }

  .servicios-nav {
    display: inline-flex !important;
  }

  .servicios-dots {
    display: flex !important;
  }

  .boton-todos-servicios.btn-principal {
    padding-left: 24px !important;
    padding-right: 17px !important;
  }

  .boton-todos-servicios .texto-boton {
    position: static !important;
    left: auto !important;
    transform: none !important;
    padding-left: 2px;
  }
}

/* ---------- MÓVIL: SIN CARRUSEL ---------- */
@media (max-width: 720px) {
  .servicios-carrusel-zona {
    display: block;
    margin-inline: 0 !important;
  }

  .servicios-viewport {
    overflow: visible;
    padding: 7px 0 14px;
    touch-action: auto;
  }

  .servicios-lista {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .servicio-tarjeta,
  .servicio-tarjeta:last-child {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  .servicios-nav,
  .servicios-dots {
    display: none !important;
  }
}