/* =========================================================
   KONNECT — Marketplace KONNECT (post-presentación)
   Forma parte de KONNECT Evoluciona · powered by PYMiO (solo aquí y en su
   teaser de Inicio). Identidad neutral dentro del sistema KONNECT: navy
   oficial + aqua + un gris azulado frío; sin el morado de Hipotecario ni el
   naranja/azul de PYMiO. Contenido y visual PROVISIONALES hasta validar
   con Fer y con una captura real de PYMiO.
   Recorrido: apertura (rutas → comparación, recurso visual) → cuatro
   momentos de una operación → beneficios → contexto PYMiO y el 30 (nunca
   sumado al 38) → preguntas → cierre.
========================================================= */
.mkt-hero, .mkt-why, .mkt-faq, .mkt-final, .mkt-journey, .mkt-count { --mkt: #C9CEF5; }
.mkt-hero .k-tone, .mkt-final .k-tone, .mkt-why .k-tone { color: var(--k-aqua); }

/* ---------- Apertura ---------- */
.mkt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--k-header-h) + 32px) 0 calc(var(--k-r-xl) + 72px);
  background:
    radial-gradient(45% 60% at 80% 45%, rgba(201, 206, 245, 0.16), transparent 70%),
    radial-gradient(35% 45% at 92% 92%, rgba(94, 237, 242, 0.14), transparent 70%),
    linear-gradient(170deg, #121360 0%, var(--k-field) 60%, #1A1C78 100%);
  color: var(--k-on-dark);
}
.mkt-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.mkt-hero__tag { display: inline-flex; margin-top: 18px; padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; color: var(--k-on-dark-2); background: rgba(245, 247, 255, 0.06); border: 1px solid rgba(245, 247, 255, 0.18); }
.mkt-hero__tag strong { margin-left: 4px; color: var(--k-on-dark); }
.mkt-hero__title { margin-top: 18px; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 16ch; color: var(--k-on-dark); }
.mkt-hero__lede { margin-top: 22px; max-width: 50ch; font-size: clamp(1.05rem, 1.25vw, 1.18rem); color: var(--k-on-dark-2); }
.mkt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mkt-pymio { margin-top: 26px; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--k-on-dark-3); }

/* Recurso visual: una solicitud que se abre en rutas y termina en ofertas comparables */
.mkt-routes { position: relative; margin: 0; width: min(560px, 100%); justify-self: center; }
.mkt-routes__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mkt-routes__source { fill: var(--k-aqua); filter: drop-shadow(0 0 0 rgba(94, 237, 242, 0)); }
.mkt-routes__bars rect { fill: rgba(201, 206, 245, 0.22); transform-box: fill-box; transform-origin: left center; }
.mkt-routes__bars rect.is-pick { fill: var(--k-aqua); }
.mkt-routes__caption { margin-top: 14px; text-align: center; font-size: 0.78rem; color: var(--k-on-dark-3); }
@media (prefers-reduced-motion: no-preference) {
  .mkt-routes__paths path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mkt-draw 1100ms var(--k-ease-out) 200ms forwards; }
  .mkt-routes__paths path:nth-child(2) { animation-delay: 280ms; }
  .mkt-routes__paths path:nth-child(3) { animation-delay: 360ms; }
  .mkt-routes__paths path:nth-child(4) { animation-delay: 440ms; }
  .mkt-routes__paths path:nth-child(5) { animation-delay: 520ms; }
  .mkt-routes__bars rect { transform: scaleX(0); animation: mkt-bar 700ms var(--k-ease-out) forwards; animation-delay: calc(1000ms + var(--i) * 90ms); }
  .mkt-routes__bars rect.is-pick { animation: mkt-bar 700ms var(--k-ease-out) forwards, mkt-pick 2.8s var(--k-ease-in-out) 2.2s infinite; animation-delay: calc(1000ms + var(--i) * 90ms), 2.2s; }
}
@keyframes mkt-draw { to { stroke-dashoffset: 0; } }
@keyframes mkt-bar { to { transform: scaleX(1); } }
@keyframes mkt-pick { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ---------- Cómo funciona una operación ---------- */
.mkt-journey { padding: clamp(72px, 8vw, 112px) 0; }
.mkt-journey__head .k-h2 { max-width: 22ch; }
.mkt-journey__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(36px, 4vw, 56px); }
/* Línea continua que une los cuatro momentos */
.mkt-journey__steps::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 28px; height: 2px;
  background: linear-gradient(90deg, var(--k-aqua), var(--mkt));
  transform-origin: left;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mkt-journey__steps::before { animation: mkt-line linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes mkt-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mkt-step {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: 10px;
  padding: 72px clamp(18px, 2vw, 26px) clamp(22px, 2.4vw, 30px);
  border-radius: var(--k-r-lg); background: var(--k-card); border: 1px solid var(--k-card-line);
}
.mkt-step__dot { position: absolute; top: 20px; left: clamp(18px, 2vw, 26px); width: 18px; height: 18px; border-radius: 50%; background: var(--k-aqua); box-shadow: 0 0 0 6px rgba(94, 237, 242, 0.18); }
.mkt-step:nth-child(n+3) .mkt-step__dot { background: var(--mkt); box-shadow: 0 0 0 6px rgba(201, 206, 245, 0.18); }
.mkt-step img { position: absolute; top: 10px; right: 10px; width: 76px; height: auto; transition: transform 600ms var(--k-ease-out); }
@media (hover: hover) and (pointer: fine) { .mkt-step:hover img { transform: translateY(-5px) rotate(-6deg); } }
.mkt-step h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.05; }
.mkt-step p { color: var(--k-on-light-2); }
.mkt-journey__note { margin-top: 20px; }

/* ---------- Beneficios ---------- */
.mkt-why {
  padding: var(--k-section) 0;
  background: radial-gradient(45% 55% at 0% 100%, rgba(201, 206, 245, 0.12), transparent 70%), linear-gradient(180deg, #17186F 0%, var(--k-field) 100%);
  color: var(--k-on-dark);
}
.mkt-why__head .k-h2 { max-width: 22ch; }
.mkt-why__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(40px, 5vw, 64px); }
.mkt-benefit {
  position: relative; overflow: hidden;
  display: grid; align-content: end; gap: 10px; min-height: 260px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--k-r-lg);
  background: rgba(8, 10, 60, 0.5);
}
.mkt-benefit--wide { background: radial-gradient(90% 80% at 100% 0%, rgba(94, 237, 242, 0.22), transparent 65%), rgba(8, 10, 60, 0.55); }
.mkt-benefit h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; color: var(--k-on-dark); }
.mkt-benefit p { color: var(--k-on-dark-2); max-width: 40ch; }

/* ---------- Contexto PYMiO y cifra ---------- */
.mkt-count { padding: var(--k-section) 0; }
.mkt-count__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.mkt-count__copy > p { margin-top: 18px; max-width: 54ch; color: var(--k-on-light-2); font-size: 1.06rem; }
.mkt-count__copy > .mkt-count__legal { font-size: 0.9rem; color: var(--k-on-light-3); }
.mkt-figure { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--k-r-lg); background: rgba(8, 10, 60, 0.42); }
.mkt-figure__value { font-family: var(--k-font-display); font-weight: 700; font-size: clamp(5rem, 10vw, 8rem); line-height: 0.9; color: var(--k-on-light); }
.mkt-figure__label { font-size: 0.98rem; color: var(--k-on-light-2); max-width: 44ch; }

/* ---------- Preguntas ---------- */
.mkt-faq { padding: var(--k-section) 0; background: var(--k-field); color: var(--k-on-dark); }
.mkt-faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

/* ---------- Cierre ---------- */
.mkt-final {
  position: relative; padding: clamp(104px, 13vw, 200px) 0; text-align: center;
  background: radial-gradient(50% 70% at 50% 110%, rgba(94, 237, 242, 0.24), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(201, 206, 245, 0.12), transparent 70%), var(--k-field);
  color: var(--k-on-dark);
}
.mkt-final__inner { display: flex; flex-direction: column; align-items: center; }
.mkt-final__tag { font-size: 0.92rem; color: var(--k-on-dark-2); }
.mkt-final__tag strong { color: var(--k-on-dark); }
.mkt-final__title { margin-top: 18px; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.04; max-width: 18ch; color: var(--k-on-dark); }
.mkt-final__text { margin: 26px 0 36px; max-width: 54ch; font-size: 1.1rem; color: var(--k-on-dark-2); }
.mkt-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .mkt-hero__grid, .mkt-count__grid, .mkt-faq__grid { grid-template-columns: 1fr; }
  .mkt-routes { width: min(460px, 100%); }
  .mkt-journey__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-journey__steps::before { display: none; }
  .mkt-why__grid { grid-template-columns: 1fr; }
  .mkt-benefit { min-height: 200px; }
}
@media (max-width: 640px) {
  .mkt-hero__actions, .mkt-final__actions { flex-direction: column; align-items: stretch; }
  .mkt-journey__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-step img { transition: none; }
}