@charset "UTF-8";

  :root{
    /* Paleta — tema oscuro aprobado, MIKUY_CORPORATE_IDENTITY_DESIGN_SYSTEM_v1.0 + tokens.css [data-mikuy-theme="dark"] */
    --bg:#0F1A14; --surface:#16241C;
    --brand:#7FC6A0; --brand-2:#5EA982; --brand-soft:#1E3128; --brand-line:#365243;
    --accent:#F0994F; --accent-soft:#3A2A16;
    --ink:#E8F0EB; --ink-2:#A9BFB0; --ink-3:#7C9384;
    --line:#24382C; --pass:#4FBF80; --on-brand:#0F1A14;

    /* Tipografía — §5: Georgia display / Segoe UI body / Consolas dato */
    --display:Georgia,"Times New Roman",serif;
    --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
    --mono:Consolas,"Cascadia Code","SFMono-Regular",ui-monospace,monospace;

    --fs-10:.625rem; --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem;
    --fs-15:.9375rem; --fs-16:1rem; --fs-17:1.0625rem;

    /* Geometría — §6: radios 4/8/10, sin sombras */
    --r-sm:4px; --r-md:8px; --r-lg:10px; --r-card:16px;
    color-scheme:dark;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0; min-width:320px; background:var(--bg); color:var(--ink);
    font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
  ::selection{background:var(--brand-soft); color:var(--ink)}
  .shell{width:min(1300px, calc(100% - 56px)); margin:0 auto}
  @media (max-width:640px){ .shell{width:min(100% - 40px, 1180px)} }
  header,main,footer{position:relative; z-index:1}

  /* ── fondo: territorio + tecnología + agricultura, muy sutil ─────────── */
  .bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
  .bg::before{content:""; position:absolute; inset:0; background:
    linear-gradient(100deg, rgba(15,26,20,.95) 0%, rgba(15,26,20,.74) 36%, rgba(15,26,20,.42) 70%, rgba(15,26,20,.6) 100%),
    linear-gradient(180deg, rgba(15,26,20,.4) 0%, transparent 34%, rgba(15,26,20,.62) 100%),
    url('../img/hero-bg-under-construction.jpg') center/cover no-repeat;}

  /* ── header ───────────────────────────────────────────────────────────── */
  .site-header{border-bottom:1px solid var(--line)}
  .site-header__in{height:84px; display:flex; align-items:center; justify-content:space-between; gap:16px}
  .brand{display:inline-flex; align-items:center}
  .brand__logo{width:110px; height:auto; display:block}
  .status-pill{display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid var(--brand-line);
    border-radius:999px; background:var(--brand-soft); color:var(--brand); font-family:var(--mono);
    font-size:var(--fs-11); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
  .status-pill__dot{width:7px; height:7px; border-radius:50%; background:var(--pass); flex:none}
  @media (max-width:480px){ .status-pill{font-size:9px; padding:7px 10px; letter-spacing:.05em} }

  /* ── hero ─────────────────────────────────────────────────────────────── */
  .hero{padding:52px 0 36px}
  .hero__in{display:flex; flex-direction:column; gap:44px}
  @media (min-width:960px){
    .hero{padding:78px 0 36px}
    .hero__in{display:grid; grid-template-columns:1.5fr 1fr; grid-template-areas:"content market" "trust trust";
      column-gap:64px; row-gap:36px; align-items:start}
    .hero__content{grid-area:content}
    .hero__marketplace{grid-area:market; align-self:start; justify-self:end}
    .hero__trust{grid-area:trust}
  }
  .eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 20px; padding:7px 16px;
    border:1px solid var(--accent); border-radius:999px;
    background:rgba(240,153,79,.1); color:var(--accent);
    font-family:var(--mono); font-weight:600; font-size:var(--fs-11); letter-spacing:.18em; text-transform:uppercase}
  .eyebrow::before{content:""; width:20px; height:1px; background:var(--accent)}
  h1{margin:0 0 22px; font-family:var(--display); font-weight:700; font-size:clamp(2.05rem,4vw,3.3rem);
    line-height:1.16; letter-spacing:-.008em; color:var(--ink); max-width:16ch}
  h1 em{font-style:italic; color:var(--accent)}
  .lead{margin:0 0 26px; max-width:52ch; font-size:var(--fs-17); line-height:1.72; color:var(--ink-2)}
  .status-line{display:flex; align-items:center; gap:10px; margin:0 0 32px; padding:12px 16px;
    border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.02);
    font-family:var(--mono); font-size:var(--fs-12); color:var(--ink-2); max-width:52ch}
  .status-line__dot{width:6px; height:6px; border-radius:50%; background:var(--pass); flex:none}
  .hero__cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:14px}
  .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  font:inherit;
  font-size:var(--fs-14);
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn svg{
  width:14px;
  height:14px;
  flex:none;
}
  .btn--primary{background:var(--accent); color:var(--on-brand)}
  .btn--primary:hover,.btn--primary:focus-visible{filter:brightness(.93)}
  .btn .btn__arrow{width:18px; height:18px}
  .btn__arrow{animation:arrow-blink 1.4s ease-in-out infinite}
  @keyframes arrow-blink{0%,100%{opacity:.25; transform:translateX(0)} 50%{opacity:1; transform:translateX(5px)}}
  .btn-note{font-family:var(--mono); font-size:var(--fs-12); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); text-shadow:0 1px 8px rgba(0,0,0,.7)}

  /* ── visual del marketplace ───────────────────────────────────────────── */
  .hero__marketplace{position:relative; max-width:460px; width:100%; margin:0 auto}
  @media (min-width:960px){ .hero__marketplace{margin:0} }

  /* ── indicadores de confianza ─────────────────────────────────────────── */
  .hero__trust{
    --orb:40px;
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:96px;
    width:min(856px, calc(100% - 48px));
    margin:28px auto 0;
    padding:14px 0 6px;
    list-style:none;
  }
  /* franja oscura uniforme detrás del bloque (foto fija de .bg sigue visible) */
  .hero__trust::before{content:""; position:absolute; z-index:-1; pointer-events:none;
    top:-40px; bottom:-40px; left:50%; width:100vw; transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(4,24,17,0) 0%, rgba(4,24,17,.5) 20%, rgba(4,24,17,.5) 80%, rgba(4,24,17,0) 100%)}
  .hero__trust li{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; padding:0; text-align:center}
  /* orbe de vidrio oscuro con el icono */
  .hero__trust li > svg{flex:none; width:var(--orb); height:var(--orb); padding:calc(var(--orb) * .17);
    border:1px solid rgba(127,230,180,.28); border-radius:50%;
    background:radial-gradient(circle at 50% 28%, rgba(52,132,88,.55), rgba(10,48,32,.82) 68%);
    box-shadow:inset 0 0 22px rgba(127,230,180,.14), inset 5px 5px 14px -6px rgba(198,242,78,.32), -4px -4px 12px -5px rgba(198,242,78,.4), 0 8px 26px rgba(0,0,0,.35)}
  /* arco lima sobre el borde superior izquierdo */
  .hero__trust li::before{content:""; position:absolute; top:-4px; left:50%; width:calc(var(--orb) + 8px); height:calc(var(--orb) + 8px);
    margin-left:calc((var(--orb) + 8px) / -2); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 50% 1.75px, #9BEA5A 1.85px, transparent 2.15px),
      conic-gradient(from -100deg, rgba(198,242,78,0) 0deg, #C6F24E 34deg, #9BEA5A 100deg, rgba(155,234,90,0) 101deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px))}
  .hero__trust li > div{min-width:0; max-width:134px}
  .hero__trust b{display:block; font-size:.75rem; line-height:1.2; font-weight:700; color:#F3FAF6}
  .hero__trust span{display:block; margin-top:4px; font-size:.6875rem; line-height:1.4; color:rgba(232,240,235,.85)}
  /* separadores verticales (desktop) */
  .hero__trust li:not(:last-child)::after{content:""; position:absolute; top:6px; bottom:0; right:-48px; width:1px;
    background:linear-gradient(180deg, rgba(190,235,200,0), rgba(190,235,200,.32) 22%, rgba(190,235,200,.32) 78%, rgba(190,235,200,0))}
  @media (max-width:900px){
    .hero__trust{--orb:38px; grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:40px; margin-top:0}
    .hero__trust b{font-size:.75rem}
    .hero__trust span{font-size:.6875rem}
    .hero__trust li:nth-child(3)::after{display:none}
    /* tablet: división horizontal entre filas */
    .hero__trust li:nth-child(-n+2)::after{display:block; top:auto; bottom:-20px; left:12%; right:12%; width:auto; height:1px;
      background:rgba(190,235,200,.2)}
  }
  @media (max-width:560px){
    .hero__trust{--orb:36px; grid-template-columns:1fr; gap:28px; padding:30px 0 18px}
    .hero__trust li::after{display:none !important}
  }

  /* ── footer ───────────────────────────────────────────────────────────── */
  .site-footer{border-top:1px solid var(--line)}
  .site-footer__in{padding:24px 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; font-size:var(--fs-12); color:var(--ink-3)}
  .site-footer__brand{margin:0; font-family:var(--display); font-weight:700; font-size:var(--fs-14); color:var(--brand); letter-spacing:.02em}
  .site-footer__tag,.site-footer__legal{margin:0}
  .site-footer__legal::before{content:"·"; margin-right:14px; color:var(--line)}
  @media (max-width:640px){ .site-footer__in{flex-direction:column; gap:4px} .site-footer__legal::before{display:none} }

  /* ── modal de contacto ────────────────────────────────────────────────── */
 /* ── modal de contacto ────────────────────────────────────────────────── */
.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}

.modal.is-open{
  display:flex;
}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,12,9,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:36px 32px 32px;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
  box-shadow:0 32px 80px -24px rgba(0,0,0,.75);
}

.modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  color:var(--ink-3);
  cursor:pointer;
}

.modal__close:hover{
  background:var(--brand-soft);
  color:var(--ink);
  border-color:var(--brand-line);
}

.modal__close svg{
  width:18px;
  height:18px;
}

.modal__eyebrow{
  display:inline-block;
  margin:0 0 12px;
  padding:5px 12px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:rgba(240,153,79,.1);
  color:var(--accent);
  font-family:var(--mono);
  font-weight:500;
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.modal__title{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:700;
  font-size:1.6rem;
  line-height:1.2;
  color:var(--ink);
}

.modal__lead{
  margin:0 0 26px;
  font-size:.875rem;
  line-height:1.6;
  color:var(--ink-2);
}

.form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form__honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media (max-width:520px){
  .form__row{
    grid-template-columns:1fr;
  }
}

.form__field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.form__label{
  font-family:var(--body);
  font-size:.75rem;
  font-weight:500;
  color:var(--ink-2);
}

.form__hint{
  font-weight:400;
  color:var(--ink-3);
}

.form__input{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  color:var(--ink);
  font:inherit;
  font-size:.875rem;
  transition:border-color .15s;
}

.form__input::placeholder{
  color:var(--ink-3);
  opacity:.75;
}

.form__input:hover{
  border-color:var(--brand-line);
}

.form__input:focus{
  outline:none;
  border-color:var(--brand);
  background:rgba(127,198,160,.04);
  box-shadow:0 0 0 3px rgba(127,198,160,.15);
}

.form__input--area{
  resize:vertical;
  min-height:96px;
  line-height:1.55;
}

.form__fieldset{
  padding:0;
  margin:0;
  border:none;
}

.form__fieldset .form__label{
  display:block;
  margin-bottom:9px;
}

.form__radios{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

@media (max-width:520px){
  .form__radios{
    grid-template-columns:1fr;
  }
}

.form__radio{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.015);
  cursor:pointer;
  font-size:.8125rem;
  color:var(--ink-2);
}

.form__radio:hover{
  border-color:var(--brand-line);
  color:var(--ink);
}

.form__radio:has(input:checked){
  border-color:var(--brand);
  background:rgba(127,198,160,.06);
  color:var(--ink);
}

.form__radio input{
  appearance:none;
  width:16px;
  height:16px;
  margin:0;
  border:1.5px solid var(--ink-3);
  border-radius:50%;
  flex:none;
  cursor:pointer;
}

.form__radio input:checked{
  border-color:var(--brand);
  background:radial-gradient(
    circle at center,
    var(--brand) 0%,
    var(--brand) 35%,
    transparent 38%
  );
}

.form__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.form__legal{
  margin:6px 0 0;
  font-size:.6875rem;
  line-height:1.55;
  color:var(--ink-3);
}

.btn--ghost{
  background:transparent;
  border:1px solid var(--brand-line);
  color:var(--brand);
}

.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:var(--brand-soft);
  border-color:var(--brand);
}

  /* ── movimiento — lento, discreto, respeta reduced-motion ────────────── */
  @media (prefers-reduced-motion:no-preference){
    .status-pill__dot,.status-line__dot{animation:pulse 2.6s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.72)}}
    .hero__content>*{animation:rise .6s both cubic-bezier(.2,.7,.2,1)}
    .hero__content>*:nth-child(1){animation-delay:.02s}
    .hero__content>*:nth-child(2){animation-delay:.08s}
    .hero__content>*:nth-child(3){animation-delay:.14s}
    .hero__content>*:nth-child(4){animation-delay:.2s}
    .hero__content>*:nth-child(5){animation-delay:.26s}
    .hero__content>*:nth-child(6){animation-delay:.3s}
    .hero__marketplace{animation:rise .7s .18s both cubic-bezier(.2,.7,.2,1)}
    .hero__trust{animation:rise .6s .34s both cubic-bezier(.2,.7,.2,1)}
    @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  }

          .mk-flow{
            --mk-mint:#76E3B4; --mk-mint-rgb:118,227,180;
            --mk-orange:#F0994F; --mk-orange-rgb:240,153,79;
            --mk-wa:#25D366; --mk-wa-rgb:37,211,102;
            --mk-ink:#EAF4EE; --mk-ink-2:#C9DCD0; --mk-ink-3:#A3BCAE; --mk-white:#F3FAF6;
            --mk-line:rgba(var(--mk-mint-rgb),.18); --mk-line-2:rgba(var(--mk-mint-rgb),.32);
            --mk-display:Georgia,"Times New Roman",serif;
            --mk-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
            --mk-mono:Consolas,"Cascadia Code",ui-monospace,monospace;
            --mk-ease:cubic-bezier(.2,.7,.2,1);
            --mk-cycle:8s;     /* datos: Productor → MIKUY → Comprador, luego pausa */
            --mk-route:12s;    /* carga: Puno → Arequipa → Nazca → Lima */
            position:relative; isolation:isolate; width:100%;
            padding:clamp(26px,6vw,36px) clamp(16px,5vw,24px) clamp(22px,5vw,28px);
            border:1px solid var(--mk-line-2); border-radius:20px;
            background:radial-gradient(90% 55% at 50% 0%, rgba(var(--mk-mint-rgb),.07), transparent 65%),
                       linear-gradient(180deg, rgba(14,29,22,.97), rgba(9,20,15,.98));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 24px 60px -24px rgba(0,0,0,.6);
            color:var(--mk-ink); font-family:var(--mk-body); line-height:1.4;
          }
          .mk-flow *,.mk-flow *::before,.mk-flow *::after{box-sizing:border-box}
          :where(.mk-flow) :where(p,h2,h3,ol,ul){margin:0; padding:0}
          :where(.mk-flow) :where(ol,ul){list-style:none}
          :where(.mk-flow) svg{display:block; overflow:visible}

          /* ── cabecera ── */
          .mk-flow__kicker{font-family:var(--mk-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mk-ink-3); text-align:center}
          .mk-flow__kicker b{color:var(--mk-orange); font-weight:700}
          .mk-flow__title{margin-top:18px; text-align:center; font-family:var(--mk-display); font-weight:700; font-size:clamp(1.4rem,5vw,1.7rem); line-height:1.15; color:var(--mk-white)}
          .mk-flow__sub{margin-top:6px; font-size:.92rem; color:var(--mk-ink-2); text-align:center}

          /* ── pasos: Productor → MIKUY → Comprador ── */
          .mk-flow__steps{display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr; align-items:stretch; margin-top:28px}
          .mk-flow__step{--mk-glow:var(--mk-mint-rgb);
            position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
            padding:20px 6px 18px; border:1px solid var(--mk-line-2); border-radius:14px; gap:8px;
            background:linear-gradient(180deg, rgba(var(--mk-mint-rgb),.05), rgba(0,0,0,.18));
            transition:transform .4s var(--mk-ease), border-color .3s ease, opacity .3s ease}
          .mk-flow__step::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
            box-shadow:0 0 0 1px rgba(var(--mk-glow),.7), 0 0 22px -2px rgba(var(--mk-glow),.4); opacity:0}
          .mk-flow__num{font-family:var(--mk-mono); font-size:1.02rem; font-weight:600; color:var(--mk-white)}
          .mk-flow__ico{width:30px; height:30px; color:var(--mk-mint)}
          .mk-flow__ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
          .mk-flow__name{font-size:.92rem; font-weight:700; color:var(--mk-white)}
          .mk-flow__cap{font-family:var(--mk-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mk-ink-2); line-height:1.35}
          .mk-flow__step--mikuy{--mk-glow:var(--mk-orange-rgb); border-color:rgba(var(--mk-mint-rgb),.6);
            background:radial-gradient(100% 70% at 50% 0%, rgba(var(--mk-mint-rgb),.14), transparent 75%), linear-gradient(180deg, rgba(var(--mk-mint-rgb),.07), rgba(0,0,0,.2))}
          .mk-flow__step--mikuy .mk-flow__num{color:var(--mk-orange)}
          .mk-flow__step--mikuy .mk-flow__cap{color:var(--mk-orange)}
          .mk-flow__step--mikuy .mk-flow__ico{width:36px; height:36px; margin-top:-3px}
          .mk-flow__step--mikuy .mk-flow__ico svg{stroke:none}
          .mk-flow__iso{transform-box:fill-box; transform-origin:center}
          .mk-flow__iso-a{fill:#7FE6B8} .mk-flow__iso-b{fill:#4FB587} .mk-flow__iso-c{fill:#A6E35A} .mk-flow__iso-d{fill:var(--mk-orange)}

          /* flechas con pulso */
          .mk-flow__arrow{position:relative; align-self:center; height:12px; color:var(--mk-ink-3)}
          .mk-flow__arrow svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
          .mk-flow__pulse{position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; opacity:0;
            background:var(--mk-mint); box-shadow:0 0 10px 2px rgba(var(--mk-mint-rgb),.6)}
          .mk-flow__arrow--in .mk-flow__pulse{background:var(--mk-orange); box-shadow:0 0 10px 2px rgba(var(--mk-orange-rgb),.6)}

          /* ── canales ── */
          .mk-flow__channels{display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px}
          .mk-flow__chip{position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:8px 10px;
            border:1px dashed var(--mk-line-2); border-radius:10px; font-family:var(--mk-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mk-ink);
            transition:border-color .3s ease, background-color .3s ease, color .3s ease}
          .mk-flow__chip svg{flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
          .mk-flow__chip--wa{border-style:solid; border-color:rgba(var(--mk-wa-rgb),.5); background:rgba(var(--mk-wa-rgb),.07); color:var(--mk-white); font-weight:600}
          .mk-flow__wa{position:relative; flex:none; width:22px; height:22px; border-radius:50%; background:var(--mk-wa)}
          .mk-flow__wa svg{position:relative; z-index:1; width:100%; height:100%; padding:4px; fill:#fff; stroke:none}
          .mk-flow__wa::after{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--mk-wa); opacity:0}
          .mk-flow__chip--web::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
            box-shadow:0 0 0 1px rgba(var(--mk-mint-rgb),.6), 0 0 16px rgba(var(--mk-mint-rgb),.3); opacity:0}

          /* ── movimiento de la carga (solo chips) ── */
          .mk-flow__cargo{margin-top:26px; padding-top:22px; border-top:1px solid var(--mk-line); text-align:center}
          .mk-flow__label{font-family:var(--mk-mono); font-size:.62rem; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--mk-ink-3)}
          .mk-flow__label b{display:block; margin-bottom:4px; color:var(--mk-white); font-weight:600}
          .mk-flow__chain{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px}
          .mk-flow__pill{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--mk-line-2); border-radius:999px;
            font-size:.74rem; color:var(--mk-white); white-space:nowrap; transition:border-color .3s ease, background-color .3s ease}
          .mk-flow__pill svg{width:20px; height:14px; fill:none; stroke:var(--mk-mint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
          .mk-flow__pill--log{border-color:rgba(var(--mk-mint-rgb),.5); background:rgba(var(--mk-mint-rgb),.06)}
          .mk-flow__dots{flex:none; width:26px; height:4px; background:radial-gradient(circle, var(--mk-mint) 1.1px, transparent 1.6px) 0 50%/6px 4px repeat-x; opacity:.8}
          .mk-flow__corridor{margin-top:24px; font-family:var(--mk-mono); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mk-orange)}
          .mk-flow__route{display:flex; align-items:center; gap:0; margin-top:12px}
          .mk-flow__city{position:relative; flex:none; padding:4px 9px; border:1px dashed var(--mk-line-2); border-radius:999px;
            border-style:solid; border-color:rgba(var(--mk-c),.55); background:rgba(var(--mk-c),.08);
            font-family:var(--mk-mono); font-size:.66rem; letter-spacing:.04em; color:rgb(var(--mk-c))}
          .mk-flow__city::after{content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgb(var(--mk-c));
            background:rgba(var(--mk-c),.2); box-shadow:0 0 14px rgba(var(--mk-c),.45); opacity:0}
          .mk-flow__city span{position:relative; z-index:1}
          .mk-flow__leg{flex:1; min-width:8px; height:4px; background:radial-gradient(circle, rgba(var(--mk-mint-rgb),.75) 1px, transparent 1.5px) 0 50%/6px 4px repeat-x}

          /* ── leyenda ── */
          .mk-flow__legend{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:24px; padding-top:14px; border-top:1px solid var(--mk-line);
            font-family:var(--mk-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mk-ink-3)}
          .mk-flow__legend li{display:flex; align-items:center; gap:8px}
          .mk-flow__legend li::before{content:""; width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--mk-orange), var(--mk-mint))}
          .mk-flow__legend li + li::before{height:0; border-top:1.5px dashed var(--mk-mint); background:none}

          /* ── animación (solo si no hay reduced-motion) ── */
          @media (prefers-reduced-motion:no-preference){
            .mk-flow__step--producer::after{animation:mk-glow-a var(--mk-cycle) ease-in-out infinite}
            .mk-flow__step--mikuy::after{animation:mk-glow-b var(--mk-cycle) ease-in-out infinite}
            .mk-flow__step--buyer::after{animation:mk-glow-c var(--mk-cycle) ease-in-out infinite}
            .mk-flow__arrow--in  .mk-flow__pulse{animation:mk-pulse-a var(--mk-cycle) ease-in-out infinite}
            .mk-flow__arrow--out .mk-flow__pulse{animation:mk-pulse-b var(--mk-cycle) ease-in-out infinite}
            .mk-flow__wa::after{animation:mk-wa-ring var(--mk-cycle) ease-out infinite}
            .mk-flow__chip--web::after{animation:mk-glow-c var(--mk-cycle) ease-in-out infinite}
            .mk-flow__iso{animation:mk-iso var(--mk-cycle) ease-out infinite}
            .mk-flow__leaf{transform-box:view-box; transform-origin:12px 20px; animation:mk-leaf 4.5s ease-in-out infinite alternate}
            .mk-flow__truck{animation:mk-truck 3s ease-in-out infinite}
            .mk-flow__city::after{animation:mk-city var(--mk-route) ease-in-out infinite; animation-delay:calc(var(--i) * 3s)}
            .mk-flow__dots,.mk-flow__leg{animation:mk-dots 1.1s linear infinite}

            /* entrada única */
            .mk-flow.is-armed:not(.is-in) .mk-flow__enter{opacity:0}
            .mk-flow.is-in .mk-flow__enter{animation:mk-enter .5s var(--mk-ease) var(--mk-d,0ms) backwards}
            .mk-flow.is-armed:not(.is-in) *,.mk-flow.is-armed:not(.is-in) *::before,.mk-flow.is-armed:not(.is-in) *::after,
            .mk-flow.is-off *,.mk-flow.is-off *::before,.mk-flow.is-off *::after{animation-play-state:paused !important}

            @media (hover:hover){
              .mk-flow__step:hover{transform:translateY(-3px); border-color:rgba(var(--mk-mint-rgb),.7)}
            }
          }

          /* ── hover: cada paso ilumina su canal ── */
          @media (hover:hover){
            .mk-flow:has(.mk-flow__step--producer:hover) .mk-flow__chip--wa{background:rgba(var(--mk-wa-rgb),.16); border-color:var(--mk-wa)}
            .mk-flow:has(.mk-flow__step--buyer:hover) .mk-flow__chip--web{border-style:solid; border-color:var(--mk-mint); color:var(--mk-white)}
            .mk-flow:has(.mk-flow__step--mikuy:hover) .mk-flow__chip{border-color:rgba(var(--mk-mint-rgb),.7); color:var(--mk-white)}
            .mk-flow:has(.mk-flow__step--producer:hover) .mk-flow__step--buyer,
            .mk-flow:has(.mk-flow__step--buyer:hover) .mk-flow__step--producer{opacity:.55}
            .mk-flow__pill--log:hover{border-color:var(--mk-mint); background:rgba(var(--mk-mint-rgb),.12)}
          }

          /* ── keyframes · ciclo de 8 s (1 s = 12,5 %) ──
             0,6 s WhatsApp emite · 1,0–1,8 s oferta → MIKUY · 1,8–3,0 s MIKUY coordina · 2,6–3,4 s → Comprador · 3,4–4,6 s portal · pausa */
          @keyframes mk-wa-ring{0%,7%{opacity:0; transform:scale(1)} 8%{opacity:.8} 18%,100%{opacity:0; transform:scale(2)}}
          @keyframes mk-glow-a{0%,6%{opacity:0} 10%{opacity:.8} 20%,100%{opacity:0}}
          @keyframes mk-pulse-a{0%,12%{opacity:0; transform:translateX(-11px)} 14%{opacity:1} 21%{opacity:1} 23%,100%{opacity:0; transform:translateX(11px)}}
          @keyframes mk-glow-b{0%,22%{opacity:0} 26%{opacity:1} 38%,100%{opacity:0}}
          @keyframes mk-iso{0%,22%{transform:scale(1)} 25%{transform:scale(1.1)} 30%,100%{transform:scale(1)}}
          @keyframes mk-pulse-b{0%,32%{opacity:0; transform:translateX(-11px)} 34%{opacity:1} 41%{opacity:1} 43%,100%{opacity:0; transform:translateX(11px)}}
          @keyframes mk-glow-c{0%,42%{opacity:0} 46%{opacity:.8} 58%,100%{opacity:0}}
          /* carga: cada ciudad se enciende 3 s después de la anterior */
          @keyframes mk-city{0%{opacity:0} 5%,20%{opacity:1} 26%,100%{opacity:0}}
          @keyframes mk-dots{to{background-position:6px 50%}}
          @keyframes mk-truck{0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)}}
          @keyframes mk-leaf{from{transform:rotate(-3deg)} to{transform:rotate(3deg)}}
          @keyframes mk-enter{from{opacity:0; translate:0 10px} to{opacity:1; translate:0 0}}

          @media (max-width:380px){
            .mk-flow__steps{grid-template-columns:1fr 16px 1fr 16px 1fr}
            .mk-flow__name{font-size:.84rem}
            .mk-flow__cap{font-size:.54rem; letter-spacing:.06em}
            .mk-flow__chip{font-size:.58rem; letter-spacing:.06em}
          }