/* =========================================================
   FleTrack — gráficos animados en los espacios de imagen (motion.mjs)
   Llenan su contenedor; una foto subida desde el panel los reemplaza.
   ========================================================= */
.mg { position: absolute; inset: 0; overflow: hidden; color: #0f172a; text-align: left; }
.ph[style*="--slot-img"] > .mg { display: none; }
.sol-card__img, .prod-card__media, .hw__media, .cta-final__media, .eco-media, .bigprod__media { position: relative; overflow: hidden; }
.mg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Etiquetas flotantes */
.mg-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px;
  background: #fff; box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .45); font-size: 12px; font-weight: 600; white-space: nowrap; color: #0f172a;
  animation: fade-up .6s var(--ease-out) .6s both;
}
.mg-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-chip--tl { left: 14px; top: 14px; } .mg-chip--tr { right: 14px; top: 14px; } .mg-chip--br { right: 14px; bottom: 14px; } .mg-chip--bl { left: 14px; bottom: 14px; }
.mg-chip--bad { background: #fdecec; color: #b91c1c; } .mg-chip--lime { background: #9bff03; color: #111316; }
.mg-chip--dark { background: rgba(0, 0, 0, .55); color: #fff; }
.mg-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 1.8s ease-in-out infinite; }
.mg-rec { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: sc-blink 1.2s steps(1) infinite; }

/* Rastreo */
.mg-draw { stroke-dasharray: 520; stroke-dashoffset: 520; animation: nx-route 2.2s var(--ease-out) .4s forwards; }
.mg-car { offset-rotate: 0deg; animation: drive 9s linear .8s infinite; }
.mg-ping { animation: sc-node 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* Combustible */
.mg-fuel { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 28px; padding: 22px 24px; background: linear-gradient(180deg, #fff7ed, #fdf1e3); }
.mg-fuel__tank { position: relative; width: 38%; height: 82%; border-radius: 22px; border: 4px solid #0f172a; background: #fff; overflow: hidden; }
.mg-fuel__liq { position: absolute; inset: 0; animation: sc-fuel 8s var(--ease-out) .5s infinite; top: 22%; background: linear-gradient(180deg, #acc6ff, #6e8fd6); }
.mg-fuel__liq i { position: absolute; left: -50%; top: -8px; width: 200%; height: 16px; border-radius: 45%; background: #acc6ff; animation: sc-wave 2.6s linear infinite; }
.mg-fuel__tank b { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; }
.mg-fuel__bars { flex: 1; height: 62%; display: flex; align-items: flex-end; gap: 6px; }
.mg-fuel__bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: #22c55e; transform-origin: 50% 100%; animation: v-grow 1s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + .3s); }
.mg-fuel__bars i:nth-child(4) { background: #ef4444; height: 30%; }

/* Maquinaria */
.mg-hours { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 28px; background: linear-gradient(180deg, #fffaf2, #fdf1e3); }
.mg-hours div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 12.5px; }
.mg-hours small { font-weight: 600; color: #5b6577; } .mg-hours b { text-align: right; font-variant-numeric: tabular-nums; }
.mg-hours span { height: 12px; border-radius: 99px; background: #f3e3c7; overflow: hidden; }
.mg-hours span i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #f7941d, #e07b00); transform-origin: 0 50%; animation: v-grow-x 1.2s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + .3s); }
/* Versión del menú (recuadro alto): encabezado, barras y cifras repartidos */
.mg-hours--tall { justify-content: space-between; gap: 14px; padding: 26px 24px 24px; }
.mg-hours__head { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.mg-hours__head b { text-align: left; font-size: 16px; letter-spacing: -.01em; color: #111316; }
.mg-hours__head small { font-size: 12px; font-weight: 500; color: #8a6a3d; }
.mg-hours--tall div { font-size: 13px; }
.mg-hours--tall div span { height: 14px; }
.mg-hours__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mg-hours__kpis li { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px -14px rgba(15, 23, 42, .4); animation: fade-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 100ms + .5s); }
.mg-hours__kpis b { text-align: left; font-size: 15px; font-variant-numeric: tabular-nums; color: #111316; }
.mg-hours__kpis small { font-size: 10.5px; font-weight: 600; line-height: 1.25; color: #5b6577; }
.mg-gear { position: absolute; right: 14px; top: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .5); }
.mg-gear svg { width: 20px; height: 20px; fill: none; stroke: #e07b00; stroke-width: 1.8; animation: sc-spin 6s linear infinite; }

/* Temperatura */
.mg-wave { animation: mg-wave 5s linear infinite; }
@keyframes mg-wave { to { transform: translateX(-400px); } }
.mg-flake { position: absolute; right: 16px; bottom: 14px; width: 30px; height: 30px; opacity: .55; animation: sc-flake 6s ease-in-out infinite; }
.mg-flake svg { width: 100%; height: 100%; fill: none; stroke: #6e8fd6; stroke-width: 1.6; }

/* Seguridad de carga */
.mg-lock { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #eef2ff, #e4e9f4); }
.mg-lock__radar { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 2px dashed #6e8fd6; background: conic-gradient(from 0deg, rgba(110, 143, 214, .3), transparent 80deg); animation: sc-spin 5s linear infinite; }
.mg-lock__box { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: #0f172a; box-shadow: 0 0 0 10px rgba(255, 255, 255, .7); }
.mg-lock__box svg { width: 34px; height: 34px; fill: none; stroke: #9bff03; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-lock__chip { left: 50%; bottom: 14px; transform: translateX(-50%); animation: none; }

/* Transporte de personal */
.mg-line { position: absolute; left: 12%; right: 12%; top: 45%; }
.mg-line__track { position: absolute; left: 0; right: 0; top: -3px; height: 6px; border-radius: 99px; background: #fde4d6; overflow: hidden; }
.mg-line__track i { display: block; height: 100%; background: #fe773d; transform-origin: 0 50%; animation: sc-progress 8s linear infinite; }
.mg-line em { position: absolute; left: var(--x); top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fe773d; }
.mg-line__bus { position: absolute; top: -26px; left: 0; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; border-radius: 14px; background: #fe773d; box-shadow: 0 10px 20px -10px rgba(254, 119, 61, .8); animation: sc-bus 8s linear infinite; }
.mg-line__bus svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; }
.mg-shuttle { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 26px 24px 24px; }
.mg-line--inline { position: relative; left: auto; right: auto; top: auto; height: 6px; margin: 18px 22px 8px; }
.mg-shuttle__stops { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mg-shuttle__stops li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 12.5px; box-shadow: 0 8px 18px -14px rgba(15, 23, 42, .35); animation: fade-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + .4s); }
.mg-shuttle__stops time { font-size: 11.5px; font-weight: 600; color: #8a8f99; font-variant-numeric: tabular-nums; }
.mg-shuttle__stops span { font-weight: 600; color: #111316; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-shuttle__stops b { font-size: 11.5px; color: #fe773d; }
.mg-shuttle__stops .is-done { opacity: .6; } .mg-shuttle__stops .is-done b { color: #5b6577; }
.mg-shuttle__stops .is-now { box-shadow: inset 0 0 0 1.5px #fe773d, 0 8px 18px -14px rgba(15, 23, 42, .35); }
.mg-shuttle__cap { padding: 10px 12px; border-radius: 12px; background: #fff; }
.mg-shuttle__cap p { display: flex; justify-content: space-between; margin: 0 0 7px; font-size: 12px; }
.mg-shuttle__cap small { font-weight: 600; color: #5b6577; } .mg-shuttle__cap b { font-variant-numeric: tabular-nums; }
.mg-shuttle__cap span { display: block; height: 8px; border-radius: 99px; background: #fde4d6; overflow: hidden; }
.mg-shuttle__cap i { display: block; width: 80%; height: 100%; border-radius: inherit; background: #fe773d; transform-origin: 0 50%; animation: v-grow-x 1s var(--ease-out) .6s both; }
.mg-mini:has(.mg-line) { background: linear-gradient(180deg, #fff4ec, #f6f3f1); }

/* Productos (mini interfaz por marca) */
.mg-app { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px; }
.mg-app--norux { background: linear-gradient(160deg, #0b34ae, #061847 60%, #020818); }
.mg-app--iomaq { background: #f7941d; } .mg-app--movi { background: #fe773d; } .mg-app--tray { background: linear-gradient(160deg, #0b3b35, #1c3644); }
.mg-app__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mg-app__kpis span { padding: 10px; border-radius: 12px; background: #fff; animation: fade-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 100ms + .3s); }
.mg-app__kpis small { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #5b6577; }
.mg-app__kpis b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-app__fleet { padding: 10px 12px; border-radius: 12px; background: #fff; }
.mg-app__fleet small { font-size: 11px; font-weight: 600; color: #5b6577; }
.mg-app__fleet span { display: flex; gap: 3px; height: 9px; margin-top: 6px; }
.mg-app__fleet i { width: var(--w); border-radius: 99px; background: var(--c); transform-origin: 0 50%; animation: v-grow-x .9s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + .6s); }
.mg-stops { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; }
.mg-stops span { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; animation: fade-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + .3s); }
.mg-stops i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 3px #c9ced8; }
.mg-stops .is-done { color: #9aa1ab; text-decoration: line-through; } .mg-stops .is-done i { background: #3fa316; box-shadow: none; }
.mg-stops .is-now i { box-shadow: inset 0 0 0 5px #fe773d; animation: pm-now 1.8s ease-in-out infinite; }
.mg-route { display: grid; grid-template-columns: 78px minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; animation: fade-up .5s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + .3s); }
.mg-route small { font-size: 11.5px; font-weight: 600; } .mg-route b { font-size: 11.5px; text-align: right; }
.mg-route span { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.mg-route span i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #2dd4bf, #b8e62e); transform-origin: 0 50%; animation: v-grow-x 1.2s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + .6s); }

/* Industrias */
.mg-stores { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 46px 22px 50px; background: linear-gradient(180deg, #eef4ea, #f3f5f8); }
.mg-stores > span { position: relative; flex: 1; max-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mg-stores em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cfd5df; animation: sc-badge .4s var(--ease-out) both; animation-delay: calc(1.4s + var(--i) * 1.4s); }
.mg-stores em svg { width: 15px; height: 15px; fill: none; stroke: #cfd5df; stroke-width: 2.2; animation: sc-badge-ico .4s both; animation-delay: inherit; }
.mg-stores i { width: 100%; height: 14px; border-radius: 8px 8px 2px 2px; background: repeating-linear-gradient(90deg, #0f172a 0 10px, #fff 10px 20px); }
.mg-stores b { width: 88%; height: 64px; border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 10px 20px -16px rgba(15, 23, 42, .5); }
.mg-stores__road { position: absolute; left: 0; right: 0; bottom: 20px; height: 18px; background: #fff; }
.mg-stores__road u { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 40px; height: 28px; margin: -14px 0 0 -20px; border-radius: 9px; background: #0f172a; animation: sc-truck 7s linear infinite; }
.mg-stores__road u svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; }
.mg-mini .sc-pin { width: 26px; height: 26px; margin: -26px 0 0 -13px; }

/* Hardware 4G + Bluetooth */
.mg-hw { background: radial-gradient(circle at 50% 55%, #e9effc 0%, #f4f6fa 60%); }
.mg-hw__waves { position: absolute; left: 50%; top: 55%; }
.mg-hw__waves i { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(37, 99, 235, .35); animation: mg-wave-out 3s ease-out infinite; }
.mg-hw__waves i:nth-child(2) { animation-delay: 1s; } .mg-hw__waves i:nth-child(3) { animation-delay: 2s; }
@keyframes mg-wave-out { from { transform: scale(.6); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.mg-hw__device {
  position: absolute; left: 50%; top: 55%; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 132px; height: 84px; margin: -42px 0 0 -66px; padding: 0 16px; border-radius: 18px;
  background: linear-gradient(160deg, #1e293b, #0f172a); color: #fff; box-shadow: 0 24px 40px -18px rgba(15, 23, 42, .7);
}
.mg-hw__device em { position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: sc-blink 1.4s steps(1) infinite; }
.mg-hw__device b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; } .mg-hw__device small { font-size: 11px; color: rgba(255, 255, 255, .6); }
.mg-hw__sat { position: absolute; left: 50%; top: 55%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .5); animation: mg-orbit 10s linear infinite; }
.mg-hw__sat svg { width: 20px; height: 20px; fill: none; stroke: #2563eb; stroke-width: 1.8; animation: mg-orbit 10s linear infinite reverse; }
@keyframes mg-orbit { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }
.mg-hw__sat svg { animation: none; }
.mg-hw__c1 { left: 18px; top: 18px; } .mg-hw__c2 { right: 18px; top: 40%; color: #1d4ed8; } .mg-hw__c3 { left: 24px; bottom: 18px; animation-delay: .9s; }

/* "¿Cuál es tu mayor reto?" — 3 conversaciones que rotan cada 6 s */
.mg-talk { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #e7efff 0%, #f4f6fa 55%); }
.mg-talk__set { position: absolute; left: 50%; top: 46%; width: min(420px, 84%); transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 12px; opacity: 0; animation: mg-set 18s infinite; animation-delay: calc(var(--k) * 6s - 18s); }
@keyframes mg-set { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
.mg-talk__set p { margin: 0; padding: 14px 16px; border-radius: 18px; font-size: 15px; line-height: 1.45; box-shadow: 0 16px 34px -22px rgba(15, 23, 42, .45); }
.mg-talk__q { align-self: flex-end; max-width: 85%; background: #0f172a; color: #fff; border-bottom-right-radius: 6px; }
.mg-talk__typing { position: absolute; left: 0; bottom: 0; display: flex; gap: 5px; background: #fff; animation: mg-typing 18s infinite; }
.mg-talk__typing i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: mg-dot 1s ease-in-out infinite; }
.mg-talk__typing i:nth-child(2) { animation-delay: .15s; } .mg-talk__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mg-dot { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes mg-typing { 0%, 8% { opacity: 1; } 10%, 100% { opacity: 0; } }
.mg-talk__a { align-self: flex-start; max-width: 92%; display: flex; gap: 12px; align-items: flex-start; background: #fff; border-bottom-left-radius: 6px; opacity: 0; animation: mg-answer 18s infinite; animation-delay: inherit; }
@keyframes mg-answer { 0%, 9% { opacity: 0; transform: translateY(8px); } 12%, 100% { opacity: 1; transform: none; } }
.mg-talk__a span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: #eaf1fe; }
.mg-talk__a svg { width: 18px; height: 18px; fill: none; stroke: #2563eb; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-talk__badge { left: 50%; bottom: 22px; transform: translateX(-50%); animation: none; }
.mg-talk__set .mg-talk__typing, .mg-talk__set .mg-talk__a { animation-delay: calc(var(--k) * 6s - 18s); }

/* Ecosistema de productos en órbita */
.mg-eco { background: radial-gradient(circle at 50% 50%, #ffffff 0%, #eef3fb 70%); }
.mg-eco__glow { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .14) 0%, rgba(37, 99, 235, 0) 70%); }
.mg-eco__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(37, 99, 235, .22); }
.mg-eco__ring--1 { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
.mg-eco__ring--2 { width: 480px; height: 480px; margin: -240px 0 0 -240px; border-color: rgba(37, 99, 235, .12); }
.mg-eco__pulse { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 1.5px solid rgba(37, 99, 235, .3); animation: mg-wave-out 4s ease-out infinite; }
.mg-eco__core { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 16px rgba(255, 255, 255, .6), 0 30px 60px -24px rgba(15, 23, 42, .35); }
.mg-eco__core img { width: 100px; height: auto; }
.mg-eco__prod, .mg-eco__mod {
  position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; border-radius: 22px; background: #fff;
  box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .4);
  --r: 150px; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
  animation: mg-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s);
}
.mg-eco__prod { width: 112px; height: 64px; margin: -32px 0 0 -56px; padding: 12px; }
.mg-eco__prod img { width: 100%; height: 100%; object-fit: contain; }
.mg-eco__prod em { position: absolute; left: -6px; top: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; box-shadow: 0 0 0 3px #fff; }
.mg-eco__mod { --r: 240px; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 16px; }
.mg-eco__mod svg { width: 22px; height: 22px; fill: none; stroke: #1d4ed8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes mg-float {
  0%, 100% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) translateY(0); }
  50% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) translateY(-10px); }
}
a.mg-eco__prod:hover { box-shadow: 0 0 0 3px #2563eb, 0 18px 36px -18px rgba(15, 23, 42, .4); }

/* Productos: maqueta grande dentro de cada bloque */
.bigprod__mock { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; }
.bigprod__mock .pm { width: 100%; }
.bigprod__mock--nx { padding: 22px; }
.bigprod__mock--nx .nx { height: 100%; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.bigprod__media.ph { background: transparent; }

/* Tamaños por contenedor */
.eco-media { height: 560px; }
.cta-final__media { min-height: 460px; }
@media (max-width: 1024px) {
  .mg-eco__ring--2 { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
  .mg-eco__mod { --r: 200px; }
}
@media (max-width: 767px) {
  .eco-media { height: 380px; }
  .mg-eco { transform: scale(.72); transform-origin: 50% 50%; inset: -14%; }
  .mg-hw__sat { display: none; } .mg-hw__c2 { display: none; }
  .mg-talk__set p { font-size: 14px; }
  .bigprod__mock { position: relative; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg *, .mg { animation: none !important; }
  .mg-talk__set { opacity: 0; } .mg-talk__set:first-of-type { opacity: 1; } .mg-talk__a { opacity: 1; } .mg-talk__typing { display: none; }
  .mg-draw { stroke-dashoffset: 0; }
}

/* Tarjetas de solución: la barra del título cubre la parte baja → todo el contenido arriba */
.sol-card .mg-chip--br, .sol-card .mg-chip--bl, .sol-card .mg-lock__chip { top: 14px; bottom: auto; }
.sol-card .mg-chip--br { right: 14px; } .sol-card .mg-lock__chip { left: 50%; }
.sol-card .mg-fuel, .sol-card .mg-hours { padding-bottom: 84px; padding-top: 52px; }
.sol-card .mg-fuel__tank b { bottom: auto; top: 8px; color: #0f172a; font-size: 14px; }
.sol-card .mg-line { top: 38%; }
.sol-card .mg-lock { padding-bottom: 60px; }
.sol-card .mg-chip--tl + .mg-chip--br { top: 52px; }

/* Ecosistema dentro del banner de Productos: más grande */
.stage .mg-eco__core { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
.stage .mg-eco__core img { width: 122px; }
.stage .mg-eco__ring--1 { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
.stage .mg-eco__ring--2 { width: 470px; height: 470px; margin: -235px 0 0 -235px; }
.stage .mg-eco__glow { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
.stage .mg-eco__prod { --r: 190px; width: 148px; height: 82px; margin: -41px 0 0 -74px; padding: 16px; border-radius: 24px; }
.stage .mg-eco__mod { --r: 232px; width: 56px; height: 56px; margin: -28px 0 0 -28px; }
@media (max-width: 1024px) {
  .stage .mg-eco { transform: scale(.82); }
}
@media (max-width: 767px) {
  .stage .mg-eco { transform: scale(.6); inset: -20%; }
}

/* =========================================================
   Productos — ecosistema integrado al hero (sin tarjeta)
   Ciclo de 20 s: cada producto tiene 5 s (--k = su turno)
   ========================================================= */
.phero--free { overflow: hidden; padding-bottom: clamp(56px, 7vw, 96px); }
.phub { --cycle: 20s; position: relative; width: min(100vw, 1440px); margin: clamp(32px, 4vw, 56px) 0 0 calc(50% - min(50vw, 720px)); aspect-ratio: 1200 / 560; }
.phub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.phub__lines path { fill: none; vector-effect: non-scaling-stroke; }
.phub__fan { stroke: rgba(37, 99, 235, .13); stroke-width: 1; }
.phub__wire { stroke: rgba(17, 19, 22, .13); stroke-width: 1.5; }
.phub__wire--on {
  stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 16 100; opacity: 0;
  animation: phub-flow 1.3s linear infinite, phub-on var(--cycle) ease-in-out infinite;
  animation-delay: 0s, calc(var(--k) * 5s - var(--cycle));
}
@keyframes phub-flow { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -100; } }
@keyframes phub-on { 0% { opacity: 0; } 3%, 23% { opacity: 1; } 26%, 100% { opacity: 0; } }

.phub__node {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--ink, #111316);
}
.phub__logo {
  display: grid; place-items: center; width: clamp(64px, 6vw, 84px); aspect-ratio: 1; border-radius: 24px; background: #fff;
  box-shadow: 0 1px 0 rgba(17, 19, 22, .04), 0 18px 40px -18px rgba(17, 19, 22, .28);
  animation: phub-node var(--cycle) ease-in-out infinite; animation-delay: calc(var(--k) * 5s - var(--cycle));
  transition: transform .25s ease;
}
.phub__logo img { width: 62%; height: auto; }
.phub__node:hover .phub__logo, .phub__node:focus-visible .phub__logo { transform: translateY(-3px); }
@keyframes phub-node {
  0%, 26%, 100% { box-shadow: 0 1px 0 rgba(17, 19, 22, .04), 0 18px 40px -18px rgba(17, 19, 22, .28); }
  3%, 23% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), 0 22px 46px -16px var(--c); }
}
.phub__cap { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; }
.phub__cap b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.phub__cap small { font-size: 12.5px; color: #5b6577; }

.phub__screen {
  position: absolute; left: 22.5%; right: 22.5%; top: 4%; bottom: 15%; z-index: 1; overflow: hidden;
  border-radius: 22px; background: #fff; border: 1px solid rgba(17, 19, 22, .08);
  box-shadow: 0 50px 100px -40px rgba(17, 19, 22, .35), 0 20px 40px -24px rgba(17, 19, 22, .2);
}
.phub__slide {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; opacity: 0;
  animation: phub-slide var(--cycle) ease-in-out infinite; animation-delay: calc(var(--k) * 5s - var(--cycle));
}
@keyframes phub-slide { 0% { opacity: 0; transform: scale(.985); } 3%, 23% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: scale(1.01); } }
.phub__slide .pm { width: 100%; }
.phub__nx { position: absolute; inset: 0; }
.phub__nx > .nx { height: 100%; border-radius: 0; box-shadow: none; }

.phub__switch {
  position: absolute; left: 50%; bottom: 3%; z-index: 2; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px;
  border-radius: 99px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(17, 19, 22, .06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 30px -18px rgba(17, 19, 22, .3);
}
.phub__switch span {
  padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #5b6577; white-space: nowrap;
  animation: phub-tab var(--cycle) ease-in-out infinite; animation-delay: calc(var(--k) * 5s - var(--cycle));
}
@keyframes phub-tab { 0%, 26%, 100% { background: transparent; color: #5b6577; } 3%, 23% { background: var(--c); color: #fff; } }

@media (max-width: 900px) {
  .phub { aspect-ratio: auto; width: auto; margin: 32px 0 0; padding: 0 16px; }
  .phub__lines, .phub__switch { display: none; }
  .phub__screen { position: relative; inset: auto; aspect-ratio: 4 / 3; order: -1; }
  .phub { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .phub__screen { grid-column: 1 / -1; }
  .phub__node { position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phub__wire--on, .phub__logo, .phub__slide, .phub__switch span { animation: none !important; }
  .phub__slide[style*="--k:0"] { opacity: 1; }
}

/* Mega menú: vista previa animada de la opción señalada (cuando el panel no tiene imagen) */
.mega__media--live { position: relative; overflow: hidden; background: #eef2f7; }
.mega__prev { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .35s ease; }
.mega__prev.is-on { opacity: 1; }
.mega__prev .mg { position: absolute; inset: 0; }
.mega__prev figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 12px 30px -18px rgba(17, 19, 22, .35);
}
.mega__prev figcaption b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #111316; }
.mega__prev figcaption span { font-size: 13px; color: #4b5563; }
@media (prefers-reduced-motion: reduce) { .mega__prev { transition: none; } }

/* =========================================================
   Nosotros — la red de FleTrack sobre el mapa de México (sin tarjeta)
   ========================================================= */
.anet { position: relative; width: min(100vw, 1440px); margin: clamp(24px, 3vw, 40px) 0 0 calc(50% - min(50vw, 720px)); aspect-ratio: 1200 / 600; }
.anet__map { position: absolute; top: 0; left: 15%; width: 64%; height: 100%; overflow: visible; }
.anet__dots circle { fill: rgba(17, 19, 22, .14); }
.anet__route { fill: none; stroke: rgba(37, 99, 235, .22); stroke-width: 1.5; stroke-dasharray: 4 6; }
.anet__flow { fill: none; stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 100; opacity: .85; animation: anet-flow 4.5s linear infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes anet-flow { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -100; } }
.anet__unit { fill: #fff; stroke: #2563eb; stroke-width: 2.5; offset-rotate: 0deg; animation: anet-unit 4.5s linear infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes anet-unit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.anet__city circle:not(.anet__ping) { fill: #111316; stroke: #fff; stroke-width: 2.5; }
.anet__city--hub circle:not(.anet__ping) { fill: #2563eb; }
.anet__ping { fill: rgba(37, 99, 235, .22); transform-box: fill-box; transform-origin: center; animation: anet-ping 2.8s ease-out infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes anet-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.anet__city text { font-size: 15px; font-weight: 600; fill: #111316; paint-order: stroke; stroke: rgba(246, 248, 251, .9); stroke-width: 5px; stroke-linejoin: round; letter-spacing: -.01em; }

.anet__stats { position: absolute; left: clamp(16px, 5vw, 96px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 28px); text-align: left; }
.anet__stat b { display: block; font-size: clamp(30px, 3.2vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -.045em; color: #111316; }
.anet__stat span { display: block; margin-top: 4px; font-size: 14px; color: #5b6577; }

.anet__feed { position: absolute; right: clamp(16px, 4vw, 80px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: min(260px, 22%); }
.anet__feed li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fff; text-align: left;
  border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 16px 36px -24px rgba(17, 19, 22, .35);
  animation: anet-feed 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s - 12s);
}
.anet__feed i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.anet__feed b { display: block; font-size: 13.5px; font-weight: 600; color: #111316; }
.anet__feed small { display: block; font-size: 12.5px; color: #5b6577; }
@keyframes anet-feed { 0%, 100% { opacity: .45; transform: scale(.97); } 4%, 22% { opacity: 1; transform: none; box-shadow: 0 22px 44px -22px rgba(17, 19, 22, .4); } 28% { opacity: .45; transform: scale(.97); } }

@media (max-width: 900px) {
  .anet { width: auto; margin: 32px 0 0; aspect-ratio: auto; display: flex; flex-direction: column; gap: 24px; padding: 0 16px; }
  .anet__map { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 2 / 1.15; }
  .anet__stats { position: static; transform: none; flex-direction: row; justify-content: space-between; text-align: left; }
  .anet__feed { position: static; transform: none; width: 100%; }
  .anet__feed li:nth-child(n+3) { display: none; }
  .anet__city text { display: none; }
  .anet__stat b { font-size: 26px; white-space: nowrap; }
  .anet__stat span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .anet__flow, .anet__unit, .anet__ping, .anet__feed li { animation: none !important; }
  .anet__unit { offset-distance: 50%; }
}
/* La vista previa se enmarca arriba y el texto queda debajo, sin tapar el gráfico */
.mega__media--live { background: linear-gradient(180deg, #eef2f7, #e7ecf3); }
.mega__prev .mg { inset: 18px 18px 100px; border-radius: 24px; box-shadow: 0 18px 40px -26px rgba(17, 19, 22, .35); }
/* El gráfico de "Una nueva era…" (Nosotros) se queda dentro de su recuadro */
.two-col__media { position: relative; overflow: hidden; }

/* Nosotros, versión integrada: el mapa ocupa el ancho y las cifras y eventos se apoyan
   sobre el mapa (cifras sobre el Pacífico, eventos sobre el Golfo), con rutas que los conectan. */
@media (min-width: 901px) {
  .anet { margin-top: 8px; aspect-ratio: 1200 / 620; }
  .anet__map { left: 6%; width: 88%; }
  .anet__stats { top: auto; bottom: 6%; left: 15%; transform: none; flex-direction: row; gap: clamp(20px, 3vw, 44px); padding: 18px 26px; border-radius: 24px;
    background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -32px rgba(17, 19, 22, .35); }
  .anet__stat b { font-size: clamp(26px, 2.6vw, 40px); }
  .anet__feed { top: 16%; right: 9%; transform: none; width: min(270px, 21%); }
}

/* Nosotros · "Una nueva era…": las 4 plataformas apiladas; cada 4 s una pasa al frente */
.pdeck { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); background: radial-gradient(120% 90% at 50% 0%, #eef3fb 0%, #e7ecf4 60%, #e3e8f0 100%); }
.pdeck__stack { position: relative; aspect-ratio: 16 / 12.4; margin-top: 70px; }
.pdeck__card {
  --cycle: 16s; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 24px;
  background: #fff; border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 30px 60px -34px rgba(17, 19, 22, .45);
  transform-origin: 50% 0; animation: pdeck var(--cycle) cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--k) * 4s - var(--cycle));
}
@keyframes pdeck {
  0%, 21% { transform: none; opacity: 1; z-index: 4; }
  25% { transform: translateY(46px) scale(1.02); opacity: 0; z-index: 4; }
  26% { transform: translateY(-72px) scale(.85); opacity: 0; z-index: 1; }
  30%, 46% { transform: translateY(-72px) scale(.85); opacity: .5; z-index: 1; }
  50%, 71% { transform: translateY(-48px) scale(.9); opacity: .75; z-index: 2; }
  75%, 96% { transform: translateY(-24px) scale(.95); opacity: .92; z-index: 3; }
  100% { transform: none; opacity: 1; z-index: 4; }
}
.pdeck__tag { display: flex; align-items: center; gap: 10px; padding: 2px 4px; }
.pdeck__tag img { width: 34px; height: 34px; object-fit: contain; border-radius: 9px; background: #f4f6f9; padding: 4px; }
.pdeck__tag span { display: flex; flex-direction: column; line-height: 1.2; font-size: 12.5px; color: #5b6577; }
.pdeck__tag b { font-size: 14px; color: #111316; }
.pdeck__screen { position: relative; flex: 1; overflow: hidden; border-radius: 16px; background: #f6f8fb; display: grid; place-items: center; }
.pdeck__screen .pm { width: 100%; }
.pdeck__screen .phub__nx { position: absolute; inset: 0; }
.pdeck__screen .phub__nx > .nx { height: 100%; border-radius: 0; box-shadow: none; }
.pdeck__foot { text-align: center; font-size: 15px; color: #5b6577; }
.pdeck__foot b { color: #111316; }
@media (prefers-reduced-motion: reduce) { .pdeck__card { animation: none; } .pdeck__card:not([style*="--k:0"]) { display: none; } }
/* Ajustes: pantallas más grandes y, detrás, solo el borde de cada tarjeta (como una pila de Wallet) */
.pdeck { padding: clamp(20px, 2.6vw, 36px); gap: 20px; }
.pdeck__stack { margin-top: 64px; aspect-ratio: 16 / 13; }
.pdeck__card { padding: 10px; }
.pdeck__card > * { animation: pdeck-inner var(--cycle) cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--k) * 4s - var(--cycle)); }
@keyframes pdeck-inner { 0%, 21% { opacity: 1; } 24%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pdeck__screen { background: #fff; }
@keyframes pdeck {
  0%, 21% { transform: none; opacity: 1; z-index: 4; }
  25% { transform: translateY(46px) scale(1.02); opacity: 0; z-index: 4; }
  26% { transform: translateY(-60px) scale(.85); opacity: 0; z-index: 1; }
  30%, 46% { transform: translateY(-60px) scale(.85); opacity: .55; z-index: 1; }
  50%, 71% { transform: translateY(-40px) scale(.9); opacity: .8; z-index: 2; }
  75%, 96% { transform: translateY(-20px) scale(.95); opacity: .95; z-index: 3; }
  100% { transform: none; opacity: 1; z-index: 4; }
}
@media (prefers-reduced-motion: reduce) { .pdeck__card > * { animation: none; } }
/* Selector de productos clicable: al elegir uno se detiene el ciclo y se queda en ese producto */
.phub__switch { pointer-events: auto; }
.phub__switch button { padding: 7px 14px; border: 0; border-radius: 99px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #5b6577; white-space: nowrap; cursor: pointer;
  animation: phub-tab var(--cycle) ease-in-out infinite; animation-delay: calc(var(--k) * 5s - var(--cycle)); }
.phub__switch button:hover { color: #111316; }
.phub__switch button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.phub.is-manual .phub__slide, .phub.is-manual .phub__wire--on, .phub.is-manual .phub__logo, .phub.is-manual .phub__switch button { animation: none; }
.phub.is-manual .phub__slide { opacity: 0; transform: none; transition: opacity .35s ease; }
.phub.is-manual .phub__slide.is-on { opacity: 1; }
.phub.is-manual .phub__wire--on { opacity: 0; transition: opacity .35s ease; }
.phub.is-manual .phub__wire--on.is-on { opacity: 1; animation: phub-flow 1.3s linear infinite; }
.phub.is-manual .phub__node.is-on .phub__logo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), 0 22px 46px -16px var(--c); }
.phub.is-manual .phub__switch button.is-on { background: var(--c); color: #fff; }
/* Productos · tarjetas grandes: ventanas completas de Movilística y Trayectus */
.bigprod__mock--win { padding: 22px; }
.bigprod__mock--win > .mv, .bigprod__mock--win > .tr { height: 100%; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }