/* ===== Servicios: tarjetas con inclinación suave (solo mouse; en celular no cambia nada) =====
   Igual que «Productos listos para usar»: la perspectiva va dentro del transform de CADA tarjeta, no en el contenedor. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .services__grid.tilt-ready .services__card {
    transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px));
    transition: transform .18s ease-out, box-shadow .3s ease;
  }
  .services__grid.tilt-ready .services__card.is-tilting {
    --lift: -4px;
    transition: transform .06s linear, box-shadow .3s ease;
    box-shadow: 0 24px 46px rgba(30, 140, 255, .2);
  }
}

/* ===== Servicios · tarjeta 04 (Chatbot): es un enlace (toda la tarjeta es clicable, sin botón extra; el cursor cambia a manito) ===== */
.services__card-link { position: relative; display: block; flex: 1; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: pointer; }
.services__card-link:focus-visible { outline: 3px solid #1E8CFF; outline-offset: -3px; border-radius: 18px; }