/* LMI Fondos v1.1. Estilos de las capas animadas y de sus respaldos estáticos. */
:root {
  --lmi-banda-alto: clamp(620px, 78%, 900px);   /* alto de la zona animada del hero; el borde curvo se funde con el fondo */
  --lmi-brillo-color: rgba(255, 224, 1, 0.16);  /* color del brillo que sigue el cursor */
  --lmi-respaldo-claro: radial-gradient(60% 90% at 78% 28%, rgba(255, 224, 1, 0.5), rgba(255, 224, 1, 0) 70%), radial-gradient(55% 85% at 18% 18%, rgba(201, 215, 227, 0.85), rgba(201, 215, 227, 0) 70%), #F7F8FA;
  --lmi-respaldo-oscuro: radial-gradient(60% 90% at 75% 20%, #1D4A66, rgba(29, 74, 102, 0) 70%), radial-gradient(55% 85% at 15% 80%, #14384F, rgba(20, 56, 79, 0) 70%), #071925;
}
.lmi-fx-hero, .lmi-fx-cta, .lmi-fx-red, .lmi-fx-glow, .lmi-fx-grano { position: relative; isolation: isolate; overflow: hidden; }

/* Respaldo CSS: se ve desde el primer pintado y queda si WebGL falla */
.lmi-fx-hero::before, .lmi-fx-cta::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.lmi-fx-hero::before, .lmi-capa--banda { top: 0; left: 0; right: 0; height: var(--lmi-banda-alto); }
.lmi-fx-hero::before { background: var(--lmi-respaldo-claro); -webkit-mask-image: radial-gradient(130% 92% at 58% 0%, #000 52%, rgba(0, 0, 0, 0) 80%); mask-image: radial-gradient(130% 92% at 58% 0%, #000 52%, rgba(0, 0, 0, 0) 80%); }
.lmi-fx-hero.lmi-oscuro::before { background: var(--lmi-respaldo-oscuro); }
.lmi-fx-cta::before { inset: 0; background: var(--lmi-respaldo-oscuro); }

.lmi-capa { position: absolute; z-index: -1; pointer-events: none; transition: opacity 1.4s ease; }
.lmi-capa canvas { display: block; width: 100%; height: 100%; }
.lmi-capa--completa, .lmi-capa--brillo, .lmi-capa--grano { inset: 0; }
.lmi-capa--brillo { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), var(--lmi-brillo-color), rgba(255, 224, 1, 0) 60%); }
.lmi-capa--grano {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .1 0 0 0 0 .15 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"), radial-gradient(40% 60% at 20% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%), radial-gradient(45% 55% at 80% 70%, rgba(201, 215, 227, .6), rgba(201, 215, 227, 0) 70%);
  background-size: 180px 180px, 140% 140%, 140% 140%;
  background-position: 0 0, 0% 0%, 100% 100%;
  animation: lmiDeriva 48s ease-in-out infinite;
}
[data-fx][data-fx-on="0"] { opacity: 0; }
.lmi-capa--grano[data-fx-on="0"] { animation-play-state: paused; }
[data-glow] { opacity: 0; transition: opacity .6s ease; }
[data-glow="on"] { opacity: 1; }
[data-rv] { transition: opacity .9s cubic-bezier(.2, .65, .2, 1), transform .9s cubic-bezier(.2, .65, .2, 1); }
[data-rv="0"] { opacity: 0; transform: translate3d(0, 18px, 0); }
@keyframes lmiDeriva { 0%, 100% { background-position: 0 0, 0% 0%, 100% 100%; } 50% { background-position: 0 0, 60% 30%, 40% 70%; } }
/* Línea de los seis sistemas. Un solo reloj en lmi-fondos.js mueve todo para que nunca se desincronice:
   cada punto crece y, mientras se reduce, la línea gris se llena en amarillo hasta el siguiente punto, que llega a su máximo
   justo cuando el trazo termina. El tramo punteado se llena en azul oscuro y el cierre se enciende en oscuro.
   Clases, en orden de izquierda a derecha: lmi-nodo (puntos), lmi-tramo (líneas), lmi-tramo-fin (tramo punteado),
   lmi-cierre (círculo del cierre) y lmi-cierre-texto (textos del cierre). */
.lmi-nodo { width: 12px; height: 12px; border-radius: 50%; border: 0; background: #FFE001; transform: scale(calc(1 + .35 * var(--k, 0))); box-shadow: 0 0 0 calc(4px + 3px * var(--k, 0)) rgba(255, 224, 1, calc(.22 + .1 * var(--k, 0))), 0 0 calc(22px * var(--k, 0)) calc(6px * var(--k, 0)) rgba(255, 224, 1, calc(.4 * var(--k, 0))), 0 1px 2px rgba(7, 25, 37, .28); }
.lmi-tramo { position: relative; height: 2px; margin: 0 10px 0 8px; border-radius: 2px; background: rgba(7, 25, 37, .16); }
.lmi-tramo-fin { position: relative; height: 0; margin: 0 10px 0 8px; border-top: 2px dotted rgba(7, 25, 37, .3); }
.lmi-tramo::after, .lmi-tramo-fin::after { content: ""; position: absolute; left: 0; width: calc(var(--p, 0) * 100%); opacity: var(--o, 0); pointer-events: none; }
.lmi-tramo::after { top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 224, 1, 0), #FFE001); }
.lmi-tramo-fin::after { top: -2px; border-top: 2px dotted #071925; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000); }
.lmi-cierre { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, #071925 calc(var(--c, 0) * 100%), #8A96A1); background-color: rgba(7, 25, 37, var(--c, 0)); transform: scale(calc(1 + .35 * var(--c, 0))); box-shadow: 0 0 0 calc(6px * var(--c, 0)) rgba(7, 25, 37, calc(.08 * var(--c, 0))); }
.lmi-cierre-texto { color: color-mix(in srgb, #071925 calc(var(--c, 0) * 100%), #4A5866); }
@media (prefers-reduced-motion: reduce) {
  .lmi-capa--grano { animation: none; }
  [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
}