/* ========================================================================
   modern-ux.css
   Capa visual: transiciones, animaciones, skeleton loading e imagenes.
   No reemplaza nada del sitio; se suma despues de main.min.css.
   ======================================================================== */

:root {
  --mux-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Fade-in general de la pagina al cargar */
body {
  animation: mux-page-fade-in .5s var(--mux-ease) both;
}
@keyframes mux-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll suave para anclas internas */
html {
  scroll-behavior: smooth;
}

/* Transiciones globales en elementos interactivos */
a, button, .btn, input[type="submit"], .list-group-item {
  transition: color .25s var(--mux-ease), background-color .25s var(--mux-ease),
              border-color .25s var(--mux-ease), box-shadow .25s var(--mux-ease),
              transform .25s var(--mux-ease);
}

/* Tarjetas de proyectos / oportunidades: leve elevacion al pasar el mouse */
.contenedor_proyectos_destacados > div,
.contenedor_proyectos_oportunidades > div,
.contenedor_proyectos_inversionistas > div,
.card {
  transition: transform .3s var(--mux-ease), box-shadow .3s var(--mux-ease);
}
.contenedor_proyectos_destacados > div:hover,
.contenedor_proyectos_oportunidades > div:hover,
.contenedor_proyectos_inversionistas > div:hover,
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}

/* ---- Skeleton shimmer + fade-in de imagenes ----
   Las clases mux-img-loading / mux-img-loaded las agrega modern-ux.js
   en tiempo real segun el estado real de carga de cada imagen, asi que
   si el script no corre las imagenes se ven normales (sin riesgo). */
img.mux-img-loading {
  opacity: 0;
  background: linear-gradient(100deg, #e9e9e9 20%, #f2f2f2 40%, #e9e9e9 60%);
  background-size: 200% 100%;
  animation: mux-shimmer 1.4s ease-in-out infinite;
}
img.mux-img-loaded {
  opacity: 1;
  transition: opacity .5s var(--mux-ease);
  animation: none;
  background: none;
}
@keyframes mux-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Scroll-reveal generico ----
   mux-reveal / mux-visible las agrega modern-ux.js via IntersectionObserver.
   Si JS no corre, nunca se agrega mux-reveal y el contenido queda visible. */
.mux-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--mux-ease), transform .6s var(--mux-ease);
}
.mux-reveal.mux-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Barra de progreso de carga de pagina (arriba de todo, tipo YouTube/GitHub).
   La crea/anima modern-ux.js en cada carga de pagina - complementa el
   shimmer por imagen: esta cubre "la pagina en si se esta cargando". */
#mux-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #009371, #4be3ad);
  z-index: 99999;
  pointer-events: none;
  transition: width .4s var(--mux-ease), opacity .3s ease;
  box-shadow: 0 0 8px rgba(0, 147, 113, .55);
}
#mux-progress-bar.mux-progress-done {
  opacity: 0;
}

/* Respeta preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}