/* ==========================================================================
   MakeOver Colombia: sistema de movimiento (Fase 8)
   Mejora progresiva: nada se oculta ni se mueve si no existe html.mk-motion,
   que solo se pone con JavaScript, IntersectionObserver y sin
   prefers-reduced-motion. Solo se animan transform y opacity. Todos los
   valores vienen de tokens.css.
   Norma de redaccion: prohibido el guion largo.
   ========================================================================== */

/* --- 1. Aparicion por desplazamiento ---------------------------------------
   motion.js marca con data-mk-revela solo lo que empieza fuera de pantalla:
   lo que ya se ve al cargar no parpadea ni retrasa el primer pintado. */
html.mk-motion [data-mk-revela] {
  opacity: 0;
  transform: translate3d(0, var(--mk-desplazamiento), 0);
  transition:
    opacity var(--mk-dur-larga) var(--mk-ease),
    transform var(--mk-dur-larga) var(--mk-ease);
  transition-delay: calc(var(--mk-i, 0) * var(--mk-escalon));
}
html.mk-motion [data-mk-revela].is-visible {
  opacity: 1;
  transform: none;
}

/* --- 2. Filete que se dibuja bajo el titulo --------------------------------
   El filete estatico lo pone base.css. Aqui solo se recoge y se despliega
   desde la izquierda cuando su introduccion entra en pantalla. */
html.mk-motion .site-main .mk-seccion__intro .elementor-widget-heading::after {
  transform: scaleX(0);
  transition: transform var(--mk-dur-larga) var(--mk-ease) var(--mk-dur-corta);
}
html.mk-motion .site-main .mk-seccion__intro.mk-filete-visible .elementor-widget-heading::after {
  transform: none;
}

/* --- 3. Arco del cruce: parallax ---------------------------------------------
   El desplazamiento lo calcula motion.js y queda acotado por
   --mk-parallax-max. Sin transicion: sigue al scroll, no lo persigue. */
html.mk-motion .mk-arco { will-change: transform; }

/* --- 4. Tarjetas: elevacion minima, sin sombras -------------------------------
   Solo con raton, y nunca con reduced-motion. El borde pasa a filete dorado
   sin transicion: el cambio de color no es movimiento. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-main :is(.mk-caja-borde, .mk-ficha) {
    transition: transform var(--mk-dur-corta) var(--mk-ease);
  }
  .site-main :is(.mk-caja-borde, .mk-ficha):hover {
    transform: translate3d(0, var(--mk-elevacion), 0);
  }
  .site-main .mk-caja-borde:hover { border-color: var(--mk-filete-dorado); }
}

/* --- 5. Impresion: todo visible ------------------------------------------------ */
@media print {
  html.mk-motion [data-mk-revela] { opacity: 1; transform: none; }
  html.mk-motion .site-main .mk-seccion__intro .elementor-widget-heading::after { transform: none; }
}