/* Efectos reutilizables: ripple + tilt */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(0,0,0,.08), transparent 46%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.ripple:active::after { opacity: 1; }

.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt-20 { transform: translateZ(20px); }
.tilt-30 { transform: translateZ(30px); }