/* =========================================================
   KONNECT V3 · Capa de motion graphics sobre la base V2
   - Variantes de aparición (una por tipo de segmento) que extienden
     .reveal de reveal.js: el contenido sigue visible por defecto y
     solo se oculta lo que reveal.js marca como .is-pending.
   - Escenas animadas (SVG + CSS) que sustituyen iconos estáticos.
   - Todo respeta prefers-reduced-motion y solo anima transform,
     opacity, clip-path, filter y stroke.
========================================================= */
:root {
  --mg-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mg-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mg-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* =========================================================
   VARIANTES DE APARICIÓN
========================================================= */
/* Repartir: como cartas que se colocan sobre la mesa */
.reveal--deal { transition: opacity 500ms var(--mg-out), transform 900ms var(--mg-drawer); transform-origin: 50% 120%; }
.reveal--deal.is-pending { opacity: 0; transform: translateX(80px) rotate(6deg) scale(0.94); }

/* Volteo 3D desde abajo */
.reveal--flip { transition: opacity 420ms var(--mg-out), transform 800ms var(--mg-out); transform-origin: 50% 100%; }
.reveal--flip.is-pending { opacity: 0; transform: perspective(900px) rotateX(-24deg) translateY(30px); }

/* Enfoque: de desenfocado y amplio a nítido */
.reveal--blur { transition: opacity 600ms var(--mg-out), transform 900ms var(--mg-out), filter 700ms var(--mg-out); }
.reveal--blur.is-pending { opacity: 0; transform: scale(1.06); filter: blur(14px); }

/* Barrido horizontal (filas de tabla, bandas) */
.reveal--wipe { transition: clip-path 900ms var(--mg-in-out), opacity 300ms linear; }
.reveal--wipe.is-pending { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; }
.reveal--wipe.is-in { clip-path: inset(0 0 0 0); }

/* Iris: la fotografía se abre desde su centro */
.reveal--iris { transition: clip-path 1100ms var(--mg-out), opacity 300ms linear; }
.reveal--iris.is-pending { clip-path: circle(0% at 50% 50%); opacity: 1; transform: none; }
.reveal--iris.is-in { clip-path: circle(75% at 50% 50%); }

/* Elevación con escala: superficies que emergen del fondo */
.reveal--lift { transition: opacity 600ms var(--mg-out), transform 1000ms var(--mg-out), box-shadow 1000ms var(--mg-out); }
.reveal--lift.is-pending { opacity: 0; transform: translateY(60px) scale(0.94); }

/* Inclinación lateral (preguntas, listas) */
.reveal--skew { transition: opacity 500ms var(--mg-out), transform 700ms var(--mg-out); }
.reveal--skew.is-pending { opacity: 0; transform: translateX(40px) skewX(-8deg); }

/* Caída desde arriba con rebote suave (cifras) */
.reveal--drop { transition: opacity 400ms var(--mg-out), transform 800ms var(--mg-spring); }
.reveal--drop.is-pending { opacity: 0; transform: translateY(-36px) scale(0.9); }

/* Expansión desde la izquierda (tarjetas anchas) */
.reveal--grow { transition: opacity 500ms var(--mg-out), transform 900ms var(--mg-drawer); transform-origin: 0 50%; }
.reveal--grow.is-pending { opacity: 0; transform: scaleX(0.82) translateX(-20px); }

@media (prefers-reduced-motion: reduce) {
  .reveal--deal.is-pending, .reveal--flip.is-pending, .reveal--blur.is-pending, .reveal--lift.is-pending,
  .reveal--skew.is-pending, .reveal--drop.is-pending, .reveal--grow.is-pending { transform: none; filter: none; }
  .reveal--wipe.is-pending, .reveal--iris.is-pending { clip-path: none; opacity: 0; }
}

/* =========================================================
   TITULARES: variantes de palabra (data-split de V2)
========================================================= */
[data-split].mg-words-blur.is-split .k-word { filter: blur(10px); transform: translateY(0.3em); transition: opacity 600ms var(--mg-out), transform 700ms var(--mg-out), filter 600ms var(--mg-out); }
[data-split].mg-words-blur.is-split-in .k-word { filter: none; transform: none; }
[data-split].mg-words-rise.is-split .k-word { transform: translateY(0.9em) rotate(4deg); transform-origin: 0 100%; transition: opacity 500ms var(--mg-out), transform 800ms var(--mg-spring); }
[data-split].mg-words-rise.is-split-in .k-word { transform: none; }
[data-split].mg-words-scale.is-split .k-word { transform: scale(0.6); transition: opacity 400ms var(--mg-out), transform 700ms var(--mg-spring); }
[data-split].mg-words-scale.is-split-in .k-word { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-split] .k-word { filter: none !important; transform: none !important; } }

/* =========================================================
   ESCENAS ANIMADAS · "Así conecta KONNECT"
   Se reproducen cuando su tarjeta está activa (escritorio) o cuando
   entran en pantalla (móvil: .is-play lo pone motion.js).
========================================================= */
.mg-scene { position: absolute; top: 22px; right: 22px; width: clamp(200px, 22vw, 300px); aspect-ratio: 300 / 220; pointer-events: none; }
.mg-scene svg { width: 100%; height: 100%; overflow: visible; }
.mg-scene .s-card { fill: rgba(14, 15, 70, 0.92); stroke: rgba(245, 247, 255, 0.16); stroke-width: 1.5; }
.mg-scene .s-soft { fill: rgba(245, 247, 255, 0.16); }
.mg-scene .s-aqua { fill: #5EEDF2; }
.mg-scene .s-white { fill: #F5F7FF; }
.mg-scene .s-stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mg-scene [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mg-scene .s-pop, .mg-scene .s-bar, .mg-scene .s-coin, .mg-scene .s-spark, .mg-scene .s-node, .mg-scene .s-rider { transform-box: fill-box; }
.mg-scene .s-pop { transform-origin: center; transform: scale(0); }
.mg-scene .s-bar { transform-origin: left center; transform: scaleX(0); }
.mg-scene .s-coin { opacity: 0; transform: translateY(-60px); }
.mg-scene .s-spark { transform-origin: center; opacity: 0; }
.mg-scene .s-node { transform-origin: center; transform: scale(0); }
.mg-scene .s-rider { opacity: 0; }

/* Estado "en juego" */
.connect-card.is-active .mg-scene, .mg-scene.is-play { --play: running; }
.connect-card.is-active .mg-scene .s-bar, .mg-scene.is-play .s-bar { animation: s-bar 700ms var(--mg-out) forwards; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene .s-pop, .mg-scene.is-play .s-pop { animation: s-pop 600ms var(--mg-spring) forwards; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene [pathLength], .mg-scene.is-play [pathLength] { animation: s-draw 1000ms var(--mg-in-out) forwards; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene .s-coin, .mg-scene.is-play .s-coin { animation: s-coin 700ms var(--mg-spring) forwards; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene .s-spark, .mg-scene.is-play .s-spark { animation: s-spark 900ms var(--mg-out) forwards; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene .s-node, .mg-scene.is-play .s-node { animation: s-pop 500ms var(--mg-spring) forwards; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene .s-rider, .mg-scene.is-play .s-rider { animation: s-ride var(--dur, 2400ms) var(--mg-in-out) infinite; animation-delay: var(--d, 0ms); }
.connect-card.is-active .mg-scene .s-pulse, .mg-scene.is-play .s-pulse { animation: s-pulse 1800ms var(--mg-out) 4; animation-delay: var(--d, 0ms); /* V4: finita; las animaciones SVG no se componen y, infinitas, mantenían el hilo principal ocupado en reposo */ transform-box: fill-box; transform-origin: center; }
.connect-card.is-active .mg-scene .s-blink, .mg-scene.is-play .s-blink { animation: s-blink 1s steps(1) 6; animation-delay: var(--d, 0ms); }

@keyframes s-bar { to { transform: scaleX(1); } }
@keyframes s-pop { to { transform: scale(1); } }
@keyframes s-draw { to { stroke-dashoffset: 0; } }
@keyframes s-coin { to { opacity: 1; transform: none; } }
@keyframes s-spark { 0% { opacity: 0; transform: scale(0.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes s-ride { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes s-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes s-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mg-scene .s-pop, .mg-scene .s-bar, .mg-scene .s-coin, .mg-scene .s-node { transform: none; opacity: 1; animation: none !important; }
  .mg-scene [pathLength] { stroke-dashoffset: 0; animation: none !important; }
  .mg-scene .s-spark, .mg-scene .s-rider, .mg-scene .s-pulse { display: none; }
}
@media (min-width: 1100px) {
  .connect-deck.is-ready .mg-scene { width: clamp(220px, 21vw, 300px); }
}
@media (max-width: 1099px) { .mg-scene { width: 190px; top: 16px; right: 16px; } }

/* =========================================================
   BENEFICIOS · fotografía viva e iconos que flotan
========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .benefit__media img { transition: transform 1200ms var(--mg-out); }
  @media (hover: hover) and (pointer: fine) {
    .benefit:hover .benefit__media picture img, .benefit.is-open .benefit__media picture img { transform: scale(1.08) translateY(-2%); }
  }
  .benefit__media--art img { animation: mg-bob 5.5s ease-in-out infinite alternate; }
  .benefit__media--art img:nth-child(2) { animation-duration: 6.5s; animation-delay: -2s; }
  .benefit__media--art img:nth-child(3) { animation-duration: 4.8s; animation-delay: -1s; }
}
@keyframes mg-bob { from { translate: 0 -6px; rotate: -2deg; } to { translate: 0 8px; rotate: 2deg; } }

/* =========================================================
   MEMBRESÍAS · palomas que se dibujan y destello en Evoluciona
========================================================= */
.mg-check { display: inline-block; width: 26px; height: 26px; vertical-align: middle; }
.mg-check circle { fill: rgba(94, 237, 242, 0.14); stroke: rgba(94, 237, 242, 0.55); stroke-width: 1.5; }
.mg-check path { fill: none; stroke: #5EEDF2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mg-plans.is-armed .mg-check path { stroke-dashoffset: 1; }
.mg-plans.is-armed .mg-check circle { transform: scale(0.4); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mg-plans.is-play .mg-check circle { animation: s-pop 500ms var(--mg-spring) forwards; animation-delay: var(--d, 0ms); }
.mg-plans.is-play .mg-check path { animation: s-draw 450ms var(--mg-out) forwards; animation-delay: calc(var(--d, 0ms) + 180ms); }
@keyframes s-pop-o { to { transform: scale(1); opacity: 1; } }
.mg-plans.is-play .mg-check circle { animation-name: s-pop-o; }
.mg-sheen { position: relative; overflow: hidden; }
.mg-sheen::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(94, 237, 242, 0.18), transparent); transform: skewX(-12deg) translateX(-120%); }
@media (prefers-reduced-motion: no-preference) {
  .mg-plans.is-play .mg-sheen::after { animation: mg-sheen 2600ms var(--mg-in-out) 900ms 1 forwards; }
}
@keyframes mg-sheen { to { transform: skewX(-12deg) translateX(520%); } }
@media (prefers-reduced-motion: reduce) { .mg-plans.is-armed .mg-check path { stroke-dashoffset: 0; } .mg-plans.is-armed .mg-check circle { transform: none; opacity: 1; } }

/* =========================================================
   LÍNEAS DE NEGOCIO · isotipo vivo dentro del resplandor
========================================================= */
.home-division__iso {
  position: absolute;
  right: 6%;
  bottom: -9%;
  z-index: 0;
  width: clamp(150px, 19vw, 260px);
  height: auto;
  pointer-events: none;
  opacity: 0.72;
  filter: drop-shadow(0 30px 50px rgba(3, 3, 20, 0.5));
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(0deg);
  transform-origin: 50% 70%;
  transition: transform 700ms var(--mg-out), opacity 350ms ease;
}
.home-division__link { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .home-division:hover .home-division__iso,
  .home-division:focus-within .home-division__iso {
    opacity: 0.94;
    transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 12px), 0) rotate(0deg) scale(1.055);
  }
}
@media (max-width: 767px) { .home-division__iso { width: 120px; right: 5%; bottom: -6%; opacity: 0.48; } }

/* =========================================================
   RED EN CIFRAS · constelación en movimiento
========================================================= */
.mg-network { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; }
.home-stats > .k-container { position: relative; z-index: 1; }

/* =========================================================
   MARKETPLACE · abanico: una solicitud, varias rutas
========================================================= */
.mg-fan { position: absolute; inset: -14% -16% 26% 34%; z-index: 0; pointer-events: none; }
.mg-fan svg { width: 100%; height: 100%; overflow: visible; }
.mg-fan .f-line { fill: none; stroke: rgba(245, 247, 255, 0.42); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mg-fan .f-trunk { fill: none; stroke: #5EEDF2; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mg-fan .f-end { fill: #F5F7FF; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); }
.mg-fan .f-dot { fill: #5EEDF2; opacity: 0; }
.mg-fan.is-play .f-trunk { animation: s-draw 700ms var(--mg-in-out) forwards; }
.mg-fan.is-play .f-line { animation: s-draw 1100ms var(--mg-in-out) forwards; animation-delay: var(--d); }
.mg-fan.is-play .f-end { animation: s-pop-o 500ms var(--mg-spring) forwards; animation-delay: calc(var(--d) + 700ms); }
.mg-fan.is-play .f-dot { animation: s-ride 2800ms var(--mg-in-out) infinite; animation-delay: var(--d); }
.home-market__figure { position: relative; isolation: isolate; }
.home-market__figure > *:not(.mg-fan) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mg-fan .f-line, .mg-fan .f-trunk { stroke-dashoffset: 0; } .mg-fan .f-end { opacity: 1; transform: none; } .mg-fan .f-dot { display: none; } }

/* =========================================================
   CTA FINAL · rutas que cruzan el cierre
========================================================= */
.mg-routes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mg-routes svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-routes path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0.85; }
.mg-routes.is-play path { animation: s-draw 2200ms var(--mg-in-out) forwards; animation-delay: var(--d, 0ms); }
.mg-routes .r-dot { opacity: 0; }
.mg-routes.is-play .r-dot { animation: s-ride 5200ms var(--mg-in-out) infinite; animation-delay: var(--d, 0ms); }
.home-final__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mg-routes path { stroke-dashoffset: 0; } .mg-routes .r-dot { display: none; } }

/* =========================================================
   COMUNIDAD · fotografías con deriva suave al hacer scroll
========================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mg-drift { animation: mg-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .mg-drift--slow { animation-name: mg-drift-slow; }
  }
}
@keyframes mg-drift { from { translate: 0 40px; } to { translate: 0 -40px; } }
@keyframes mg-drift-slow { from { translate: 0 -24px; } to { translate: 0 24px; } }

/* =========================================================
   BOTONES · respuesta táctil y brillo (Emil: scale 0.97 al presionar)
========================================================= */
.k-btn { transition: transform 160ms var(--mg-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.k-btn:active { transform: scale(0.97); }
.k-btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.k-btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .k-btn--primary:hover::before { transform: translateX(120%); transition: transform 700ms var(--mg-out); }
}
.mg-final { position: relative; overflow: hidden; isolation: isolate; }

/* =========================================================
   PÁGINAS INTERIORES
========================================================= */
[data-mg-network] { position: relative; isolation: isolate; }
[data-mg-network] > :not(.mg-network) { position: relative; z-index: 1; }
.mg-final > :not(.mg-routes) { position: relative; z-index: 1; }

/* Isotipos de línea de negocio que flotan */
.mg-iso { position: absolute; pointer-events: none; height: auto; filter: drop-shadow(0 24px 40px rgba(3, 3, 20, 0.5)); }
.mg-iso--portal { right: 14px; bottom: 16px; width: 54px; z-index: 0; opacity: 0.95; }
.mg-iso--chapter { width: clamp(110px, 12vw, 170px); right: -2%; top: -4%; z-index: -1; opacity: 0.22; rotate: 12deg; }
.sol-portal a { isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .mg-iso--portal { animation: mg-bob 4.8s ease-in-out infinite alternate; }
  .sol-portal:nth-child(2) .mg-iso--portal { animation-delay: -1.2s; }
  .sol-portal:nth-child(3) .mg-iso--portal { animation-delay: -2.4s; }
  .sol-portal:nth-child(4) .mg-iso--portal { animation-delay: -3.6s; }
  .mg-iso--chapter { animation: mg-iso 10s ease-in-out infinite alternate; }
}

/* Escena integrada en el flujo (Perfilador) */
.mg-scene--inline { position: relative; top: auto; right: auto; width: min(340px, 100%); }

/* Destello periódico en el plan destacado */
@media (prefers-reduced-motion: no-preference) {
  .mg-sheen--loop::after { animation: mg-sheen 3200ms var(--mg-in-out) 1200ms infinite; }
}

/* Recorrido de Marketplace: los puntos laten en secuencia */
.mg-journey.is-armed .mkt-step__dot { transform: scale(0); }
.mg-journey.is-play .mkt-step__dot { animation: s-pop-o 500ms var(--mg-spring) forwards; }
.mg-journey.is-play .mkt-step:nth-child(2) .mkt-step__dot { animation-delay: 250ms; }
.mg-journey.is-play .mkt-step:nth-child(3) .mkt-step__dot { animation-delay: 500ms; }
.mg-journey.is-play .mkt-step:nth-child(4) .mkt-step__dot { animation-delay: 750ms; }
.mg-journey .mkt-step__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; color: #5EEDF2; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mg-journey.is-play .mkt-step__dot::after { animation: s-pulse 2200ms var(--mg-out) 1200ms 4; }
}

/* Alta en cuatro pasos: los números giran y encienden */
.mg-join.is-armed .mem-join__num { transform: rotate(-180deg) scale(0.3); opacity: 0; }
.mg-join.is-play .mem-join__num { animation: mg-num 700ms var(--mg-spring) forwards; }
.mg-join.is-play .mem-join__step:nth-child(2) .mem-join__num { animation-delay: 220ms; }
.mg-join.is-play .mem-join__step:nth-child(3) .mem-join__num { animation-delay: 440ms; }
.mg-join.is-play .mem-join__step:nth-child(4) .mem-join__num { animation-delay: 660ms; }
@keyframes mg-num { to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mg-journey.is-armed .mkt-step__dot, .mg-join.is-armed .mem-join__num { transform: none; opacity: 1; }
}

/* Las variantes con desplazamiento lateral (repartir, inclinar, crecer) no deben
   crear scroll horizontal mientras esperan su turno. clip no rompe position: sticky. */
html, body { overflow-x: clip; }