/* =========================================================================
   JLM Comunicación — Capa "revolucionaria" (aditiva y reversible)
   Intro cinematográfica + barra de progreso + botones magnéticos.
   Coherente con la marca: azul #5083C4. Se carga después de refresh.css.
   Para desactivar: quitar el <link> de revolution.css y el <script>.
   ========================================================================= */

:root { --jlm-accent: #5083C4; --jlm-accent-2: #FFBC7D; }

/* -- Barra de progreso de lectura -- */
.jlm-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--jlm-accent), #7fa8dd 70%, var(--jlm-accent-2));
  box-shadow: 0 0 12px rgba(80,131,196,.45);
  z-index: 99999; transition: width .08s linear; pointer-events: none;
}

/* -- Intro cinematográfica de marca -- */
.jlm-intro {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  background: radial-gradient(120% 130% at 50% 20%, #ffffff, #eef1f6 78%);
  pointer-events: none;               /* nunca bloquea la interacción */
  animation: jlm-intro-hide 2.3s forwards;   /* auto-oculta aunque falle el JS */
}
.jlm-intro__inner {
  text-align: center; opacity: 0; transform: translateY(16px) scale(.96);
  animation: jlm-intro-in .9s .1s cubic-bezier(.2,.7,.2,1) forwards;
  padding: 2rem;
}
.jlm-intro img { width: min(170px, 40vw); height: auto; margin: 0 auto 1.3rem; filter: drop-shadow(0 16px 40px rgba(80,131,196,.25)); }
.jlm-intro__line {
  height: 3px; width: 0; margin: 0 auto; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--jlm-accent), transparent);
  animation: jlm-line 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards;
}
.jlm-intro__txt { color: #5a6473; letter-spacing: .32em; text-transform: uppercase; font-size: .7rem; margin-top: 1.15rem; }
@keyframes jlm-intro-in { to { opacity: 1; transform: none; } }
@keyframes jlm-line { to { width: min(240px, 56vw); } }
@keyframes jlm-intro-hide {
  0%, 60% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* -- Botones magnéticos (el JS aplica el transform inline) -- */
.jlm-magnetic { transition: transform .18s cubic-bezier(.2,.7,.2,1); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .jlm-intro { display: none !important; }
  .jlm-magnetic { transition: none; }
}