/* ═══════════════════════════════════════════════════════════════
   ACADEMIA MMB — Sistema premium (Fase 7)
   Componentes genuinamente nuevos de esta fase: shimmer de carga,
   imágenes con fade-in, fondo con gradiente reutilizable, y el
   overlay de transición entre páginas. Depende de mmb-tokens.css
   (variables --mmb-*) y se carga después de mmb-components.css.

   Por qué un archivo aparte: mmb-sections.css ya tiene más de 600
   líneas: lo nuevo de esta fase vive aquí para no seguir engordando
   los archivos existentes con sistemas que no son una extensión
   natural de lo que ya había.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Skeleton loading (shimmer) ─────────
   Solo tiene sentido donde hay carga real que ocultar: imágenes
   reales por debajo del pliegue. No se simulan estados de carga
   falsos para contenido que ya está en el HTML (testimonios, texto,
   tarjetas) — eso no seria un logro genuino, solo un adorno vacío. */
.mmb-skeleton{
  position:relative;
  overflow:hidden;
  background:var(--mmb-bg-elevated);
  border-radius:var(--mmb-radius-sm);
}
.mmb-skeleton::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: mmb-skeleton-shimmer 1.6s linear infinite;
}
@keyframes mmb-skeleton-shimmer{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

/* ───────── Imágenes con fade-in al cargar ─────────
   Compañero de loading="lazy": la imagen aparece con una transición
   suave en vez de aparecer de golpe en cuanto el navegador la pinta.
   initLazyImages() en mmb-premium.js añade/retira ".is-loaded". */
.mmb-img-fade{
  opacity:0;
  transition: opacity .5s ease;
}
.mmb-img-fade.is-loaded{
  opacity:1;
}

/* ───────── Fondo con gradiente suave (utilidad opcional) ─────────
   Centraliza el tipo de degradado que hoy se repite a mano en cada
   página de curso. Es opt-in: ninguna sección existente la usa
   todavía, solo queda disponible para nuevas secciones/mejoras. */
.mmb-bg-mesh{
  background:
    radial-gradient(circle at 20% 15%, rgba(0,120,212,.18), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(80,230,255,.12), transparent 50%),
    var(--mmb-bg-soft);
}
:root[data-theme="light"] .mmb-bg-mesh{
  background:
    radial-gradient(circle at 20% 15%, rgba(0,120,212,.08), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(3,105,161,.06), transparent 50%),
    var(--mmb-bg-soft);
}

/* ───────── Overlay de transición entre páginas ─────────
   Un único div fijo, oculto por defecto; initPageTransitions() en
   mmb-premium.js lo activa solo al navegar entre las páginas de esta
   fase (nunca en enlaces externos, mailto/tel, anclas o módulos). */
#mmb-page-fade{
  position:fixed;
  inset:0;
  z-index:var(--mmb-z-page-transition, 2000);
  background:var(--mmb-bg);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
#mmb-page-fade.is-active{
  opacity:1;
  pointer-events:auto;
}

/* ───────── Accesibilidad: prefers-reduced-motion ─────────
   Bloque único y centralizado para todo lo nuevo de este archivo
   (a diferencia de los bloques repetidos en mmb-sections.css, que se
   consolidan en un paso aparte sin tocar su comportamiento actual). */
@media (prefers-reduced-motion: reduce){
  .mmb-skeleton::after{ animation:none; }
  .mmb-img-fade{ transition:none; }
  #mmb-page-fade{ transition:none; }
}