/* ============================================================
   CARD EFFECTS — 3D tilt + specular shimmer
   Aplicado a: .pricing-card, .contact-card, .paquete-item, .spline-card
   ============================================================ */

/* ── Perspectiva para el tilt 3D ── */
.pricing-card,
.contact-card,
.paquete-item,
.spline-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

/* ── Luz especular: sigue al cursor dentro de la card ── */
.pricing-card::before,
.contact-card::before,
.paquete-item::before,
.spline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    circle 120px at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.07) 0%,
    transparent 70%
  );
}

/* Activa el shimmer cuando el cursor entra */
.pricing-card:hover::before,
.contact-card:hover::before,
.paquete-item:hover::before,
.spline-card:hover::before {
  opacity: 1;
}

/* ── Sombra que se profundiza con el tilt ── */
.pricing-card:hover,
.spline-card:hover {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.contact-card:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(249, 115, 22, 0.15) !important;
}

.paquete-item:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(249, 115, 22, 0.1) !important;
}

/* ── Elevación base en hover — complements el tilt ── */
.pricing-card.card--tilting,
.contact-card.card--tilting,
.paquete-item.card--tilting,
.spline-card.card--tilting {
  transition:
    transform 0.08s linear,    /* mientras se mueve: sin lag */
    box-shadow 0.08s linear;
}

/* Spring-back al salir */
.pricing-card.card--resting,
.contact-card.card--resting,
.paquete-item.card--resting,
.spline-card.card--resting {
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease;
}

/* ── Reduced motion: sin tilt, solo sombra ── */
@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .contact-card,
  .paquete-item,
  .spline-card {
    transform: none !important;
    transition: box-shadow 0.3s ease !important;
  }
  .pricing-card::before,
  .contact-card::before,
  .paquete-item::before,
  .spline-card::before {
    display: none !important;
  }
}