/* Kuma 2026 · movimiento (.fx). Ver fx-motion.js. Escrito a mano. */

/* Reveal: solo cuando el JS ha confirmado que el usuario no pide menos movimiento. */
.fx-motion .fx-out { opacity: 0; transform: translateY(24px); }
.fx-motion .fx-in  { opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1) var(--fx-d, 0ms), transform .7s cubic-bezier(.22,.61,.36,1) var(--fx-d, 0ms); }

/* Hover: tarjetas (rejillas) y botones. Transform y sombra, nada más. */
.fx-motion .fx a[style*="display:contents"] > [data-name="Button"] img { transition: transform .25s; }
.fx-motion .fx a[style*="display:contents"]:hover > [data-name="Button"] img { transform: translateX(4px); }

/* Megamenús: entran con un fundido corto. */
.fx-motion .fx-mm { animation: fx-mm .22s ease-out; }
@keyframes fx-mm { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-out, .fx-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-mm { animation: none; }
}

/* Enlaces: al pasar solo cambia el enlace (color y subrayado), no la tarjeta. */
.fx a[style*="display:contents"]:hover > [data-name="Button"] p { color: #2b6c97; }
.fx a[style*="display:contents"]:hover > [data-name="Button"][class*="border-b"] { border-color: #2b6c97; }
.fx a[href]:hover p[class*="text-\[color:var(--color\\/text\\/link"] { text-decoration: underline; text-underline-offset: 3px; }