/*
 * Movvi — componentes
 * Cada regla es la traducción literal de un style="" del origen.
 * Los valores px de escritorio NO se tocan: la capa responsive vive aparte,
 * siempre dentro de @media, en movvi-responsive.css.
 */

/* =======================================================  1. NAV  ===== */
.mv-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--mv-gutter);
  background:transparent;box-shadow:none;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
}
.mv-nav.is-solid{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--mv-sh-nav);
  padding:12px var(--mv-gutter);
}
.mv-nav__brand{display:flex;align-items:center;gap:12px}
/* El logo se ve SIEMPRE con sus colores. El diseño original lo teñía de
   blanco sobre el hero (filter:brightness(0) invert(1)), pero el isotipo de
   Movvi es un hexágono de color con la "M" calada: al teñirlo se perdía la
   forma y quedaba una mancha blanca. Si algún día usas un logo plano de una
   sola tinta, el widget tiene un interruptor que vuelve a activar el teñido. */
.mv-nav__mark{
  width:38px;height:38px;object-fit:contain;display:block;
  transition:filter .35s ease;
}
.mv-nav--invert-mark .mv-nav__mark{filter:brightness(0) invert(1)}
.mv-nav--invert-mark.is-solid .mv-nav__mark{filter:none}
.mv-nav__word{
  font-size:var(--mv-fs-h4);font-weight:var(--mv-fw-black);
  letter-spacing:-.5px;color:var(--mv-on-dark);transition:color .35s ease;
}
.mv-nav.is-solid .mv-nav__word{color:var(--mv-green-900)}
.mv-nav__links{
  display:flex;align-items:center;gap:34px;
  font-size:var(--mv-fs-body-sm);font-weight:var(--mv-fw-semi);
  color:var(--mv-on-dark-82);transition:color .35s ease;
}
.mv-nav.is-solid .mv-nav__links{color:var(--mv-green-700)}
/* El origen fijaba color:inherit inline, así que estos enlaces no cambian al
   pasar el ratón: se replica declarando también el :hover. */
.mv-nav__link,.mv-nav__link:hover{color:inherit}
.mv-nav__cta,.mv-nav__cta:hover{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mv-green-500);color:var(--mv-on-dark);
  padding:12px 20px;border-radius:var(--mv-r-sm);
  font-weight:var(--mv-fw-bold);box-shadow:var(--mv-sh-nav-cta);
}
/* Variante "sólido siempre": el nav nace blanco con blur en vez de
   transparente. Útil cuando la primera sección no es el hero verde, porque
   sobre un fondo claro el texto blanco no se leería. */
.mv-nav--always-solid{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--mv-sh-nav);
  padding:12px var(--mv-gutter);
}
.mv-nav--always-solid .mv-nav__word{color:var(--mv-green-900)}
.mv-nav--always-solid .mv-nav__links{color:var(--mv-green-700)}
.mv-nav--always-solid .mv-nav__mark{filter:none}

/* Botón del menú móvil — oculto en escritorio (lo activa el responsive). */
.mv-nav__burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  background:transparent;border:1.5px solid var(--mv-on-dark-45);
  border-radius:var(--mv-r-sm);color:var(--mv-on-dark);
  font-size:22px;cursor:pointer;
  transition:border-color .35s ease,color .35s ease;
}
.mv-nav.is-solid .mv-nav__burger{
  border-color:var(--mv-line);color:var(--mv-green-900);
}

/* ======================================================  2. HERO  ===== */
.mv-hero{
  position:relative;min-height:100vh;
  background:var(--mv-grad-hero);color:var(--mv-on-dark);
  overflow:hidden;display:flex;align-items:center;
  padding:120px var(--mv-gutter) 60px;
}
.mv-hero__mark{
  position:absolute;right:-180px;top:-120px;
  width:820px;height:820px;opacity:.07;pointer-events:none;
}
.mv-hero__mark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.mv-hero__orb{
  position:absolute;left:-140px;bottom:-160px;
  width:420px;height:420px;border-radius:50%;background:var(--mv-on-dark-05);
}
.mv-hero__inner{
  position:relative;width:100%;max-width:var(--mv-maxw);margin:0 auto;
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
}
.mv-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--mv-on-dark-14);border:1px solid var(--mv-on-dark-22);
  padding:8px 16px;border-radius:var(--mv-r-pill);
  font-size:var(--mv-fs-label);font-weight:var(--mv-fw-bold);letter-spacing:.5px;
}
.mv-hero__title{
  margin:22px 0 0;font-size:var(--mv-fs-display);line-height:.94;
  font-weight:var(--mv-fw-black);letter-spacing:-3px;text-wrap:pretty;
}
.mv-hero__title span{display:block}
.mv-hero__lead{
  margin:26px 0 0;font-size:var(--mv-fs-lead);line-height:1.55;
  font-weight:var(--mv-fw-med);color:var(--mv-on-dark-88);max-width:520px;
}
.mv-hero__actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.mv-btn-light,.mv-btn-light:hover{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--mv-surface-2);color:var(--mv-green-900);
  font-size:var(--mv-fs-body);font-weight:var(--mv-fw-bold);
  padding:17px 26px;border-radius:var(--mv-r-md);box-shadow:var(--mv-sh-btn-light);
}
.mv-btn-outline,.mv-btn-outline:hover{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--mv-on-dark);
  border:1.5px solid var(--mv-on-dark-50);
  font-size:var(--mv-fs-body);font-weight:var(--mv-fw-bold);
  padding:16px 26px;border-radius:var(--mv-r-md);
}
.mv-hero__stats{
  display:flex;gap:40px;margin-top:52px;padding-top:28px;
  border-top:2px solid var(--mv-on-dark-18);max-width:560px;
}
.mv-stat__value{font-size:var(--mv-fs-stat);font-weight:var(--mv-fw-black);letter-spacing:-1px}
.mv-stat__label{
  font-size:var(--mv-fs-label);font-weight:var(--mv-fw-semi);
  color:var(--mv-on-dark-70);margin-top:2px;
}
.mv-hero__visual{display:flex;justify-content:center;position:relative}
/* El origen anima el transform con mv-bob en el mismo nodo al que movvi.js
   escribe el parallax: por cascada gana la animación, así que el teléfono
   solo flota. Se replica tal cual (ver nota en movvi.js). */
.mv-hero__phone{animation:mv-bob 6s ease-in-out infinite}
.mv-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:var(--mv-fs-nano);font-weight:var(--mv-fw-bold);
  letter-spacing:1.5px;color:var(--mv-on-dark-60);
}
.mv-cue__chev{font-size:18px;animation:mv-cue 1.8s ease-in-out infinite}

/* ================================  Mockup de teléfono (compartido)  == */
.mv-phone-scale{
  /* Envoltorio de escalado: en escritorio es transparente (k=1). */
  transform:scale(var(--mv-phone-k));
  transform-origin:top center;
}
.mv-phone{
  width:322px;background:var(--mv-device);
  border-radius:var(--mv-r-phone);padding:10px;
  box-shadow:var(--mv-sh-phone-hero);
}
.mv-phone__screen{
  background:var(--mv-surface);border-radius:var(--mv-r-screen);
  overflow:hidden;height:664px;display:flex;flex-direction:column;
  color:var(--mv-green-900);
}
.mv-phone--seq{
  width:330px;box-shadow:var(--mv-sh-phone-seq);will-change:transform;
}
.mv-phone--seq .mv-phone__screen{height:672px;display:block;position:relative}

/* --- Pantalla "home" del hero --------------------------------------- */
.mv-ph-top{background:var(--mv-grad-phone-top);padding:16px 18px 22px;color:var(--mv-on-dark)}
.mv-ph-status{display:flex;justify-content:space-between;font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-bold);opacity:.9}
.mv-ph-status__icons{display:flex;gap:5px;font-size:var(--mv-fs-label)}
.mv-ph-kicker{font-size:var(--mv-fs-nano);opacity:.8;font-weight:var(--mv-fw-bold);letter-spacing:.6px;margin-top:14px}
.mv-ph-addr{display:flex;align-items:center;gap:6px;font-size:var(--mv-fs-body);font-weight:var(--mv-fw-black);margin-top:2px}
.mv-ph-search{
  display:flex;align-items:center;gap:9px;
  background:var(--mv-surface-2);border-radius:var(--mv-r-sm);padding:12px 14px;
  color:var(--mv-ink-500);font-size:var(--mv-fs-label);font-weight:var(--mv-fw-med);
  margin-top:16px;box-shadow:var(--mv-sh-search);
}
.mv-ph-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.mv-ph-cats{display:flex;gap:12px}
.mv-ph-cat{display:flex;flex-direction:column;align-items:center;gap:6px}
.mv-ph-cat__ico{
  width:52px;height:52px;border-radius:var(--mv-r-lg);
  background:var(--mv-surface-2);border:1px solid var(--mv-line);
  color:var(--mv-green-700);display:flex;align-items:center;justify-content:center;
  font-size:var(--mv-fs-h4);
}
.mv-ph-cat__ico--on{background:var(--mv-grad-tile);color:var(--mv-on-dark);border:0}
.mv-ph-cat__label{font-size:var(--mv-fs-nano);font-weight:var(--mv-fw-semi);color:var(--mv-ink-500)}
.mv-ph-cat__label--on{font-weight:var(--mv-fw-bold);color:var(--mv-green-900)}
.mv-ph-promo{
  border-radius:var(--mv-r-xl);padding:18px;background:var(--mv-grad-promo);
  color:var(--mv-on-dark);position:relative;overflow:hidden;
}
.mv-ph-promo__orb{
  position:absolute;right:-24px;bottom:-34px;width:130px;height:130px;
  border-radius:50%;background:var(--mv-on-dark-09);
}
.mv-ph-promo__tag{
  background:var(--mv-amber-500);color:var(--mv-amber-900);
  font-size:10px;font-weight:var(--mv-fw-black);padding:4px 9px;border-radius:var(--mv-r-pill);
}
.mv-ph-promo__title{font-size:var(--mv-fs-lead);font-weight:var(--mv-fw-black);line-height:1.12;margin:10px 0 3px}
.mv-ph-promo__sub{font-size:var(--mv-fs-micro);opacity:.9}

/* --- Tarjeta de tienda (hero + pantalla 2) --------------------------- */
.mv-store-card{
  background:var(--mv-surface-2);border:1px solid var(--mv-line-soft);
  border-radius:var(--mv-r-lg);overflow:hidden;box-shadow:var(--mv-sh-card);
}
.mv-store-card--flat{box-shadow:none}
.mv-store-card__photo{height:86px;background:var(--mv-hatch);position:relative}
.mv-store-card__photo--tall{height:96px}
.mv-store-card__badge{
  position:absolute;top:10px;left:10px;
  background:var(--mv-green-900);color:var(--mv-on-dark);
  font-size:10px;font-weight:var(--mv-fw-bold);padding:4px 9px;border-radius:var(--mv-r-pill);
}
.mv-store-card__body{padding:12px 14px}
.mv-store-card__row{display:flex;justify-content:space-between;align-items:center;color:var(--mv-green-900)}
.mv-store-card__name{font-weight:var(--mv-fw-black);font-size:var(--mv-fs-meta)}
.mv-store-card__rating{display:inline-flex;align-items:center;gap:3px;font-weight:var(--mv-fw-black);font-size:var(--mv-fs-micro)}
.mv-store-card__meta{
  display:flex;gap:12px;margin-top:8px;
  color:var(--mv-ink-500);font-size:var(--mv-fs-nano);font-weight:var(--mv-fw-semi);
}
.mv-store-card__meta--tight{margin-top:7px}
.mv-store-card__meta span{display:inline-flex;align-items:center;gap:4px}

/* ===================================================  3. MARQUEE  ===== */
.mv-marquee{
  background:var(--mv-green-900);color:var(--mv-on-dark);
  padding:20px 0;overflow:hidden;white-space:nowrap;
}
.mv-marquee__track{display:inline-flex;gap:0;animation:mv-marquee 26s linear infinite}
.mv-marquee__item{
  display:inline-flex;align-items:center;gap:12px;
  font-size:17px;font-weight:var(--mv-fw-bold);letter-spacing:-.2px;padding:0 26px;
}
.mv-marquee__dot{font-size:8px;color:var(--mv-green-500);opacity:.9}

/* ============================================  4. CÓMO FUNCIONA  ===== */
.mv-seq{position:relative;background:var(--mv-surface);padding:96px 0}
.mv-seq__row{display:flex;align-items:center}
.mv-seq__inner{
  width:100%;max-width:var(--mv-maxw);margin:0 auto;padding:0 var(--mv-gutter);
  display:grid;grid-template-columns:1fr 360px;gap:64px;align-items:center;
}
.mv-kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.mv-kicker__text{
  font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-black);
  letter-spacing:2px;color:var(--mv-green-500);
}
.mv-kicker__rule{flex:1;height:2px;background:var(--mv-line-2)}
.mv-kicker--dark{margin-bottom:26px}
.mv-kicker--dark .mv-kicker__text{color:var(--mv-green-300)}
.mv-kicker--dark .mv-kicker__rule{background:var(--mv-on-dark-18)}

.mv-seq__track{position:relative;height:330px}
.mv-step{
  position:absolute;inset:0;opacity:0;
  transition:opacity .5s ease,transform .5s ease;
}
.mv-step__n{
  font-size:var(--mv-fs-body-sm);font-weight:var(--mv-fw-black);
  color:var(--mv-green-500);letter-spacing:1px;
}
.mv-step__title{
  margin:10px 0 0;font-size:var(--mv-fs-h2-sm);line-height:1;
  font-weight:var(--mv-fw-black);letter-spacing:-2.4px;max-width:640px;text-wrap:pretty;
}
.mv-step__body{
  margin:20px 0 0;font-size:var(--mv-fs-lead-sm);line-height:1.55;
  font-weight:var(--mv-fw-med);color:var(--mv-ink-600);max-width:520px;
}
.mv-chip{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  background:var(--mv-surface-2);border:1px solid var(--mv-line);
  padding:11px 18px;border-radius:var(--mv-r-pill);
  font-size:var(--mv-fs-meta);font-weight:var(--mv-fw-bold);box-shadow:var(--mv-sh-chip);
}
.mv-seq__bars{display:flex;gap:10px;margin-top:40px}
/* En el origen era un <div> clicable; aquí es <button> para que funcione con
   teclado. Mismo aspecto: sin borde, sin fondo propio, sin radio. */
.mv-bar{
  height:4px;flex:1;background:var(--mv-line-2);
  position:relative;overflow:hidden;cursor:pointer;
  padding:0;border:0;border-radius:0;appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;
}
.mv-bar__fill{
  position:absolute;inset:0;background:var(--mv-green-500);
  transform:scaleX(0);transform-origin:left;
}
.mv-seq__visual{display:flex;justify-content:center}
.mv-scr{
  position:absolute;inset:0;opacity:0;
  display:flex;flex-direction:column;
  transition:opacity .45s ease,transform .45s ease;
}
.mv-scr--white{background:var(--mv-surface-2)}
.mv-scr--done{
  background:var(--mv-grad-done);color:var(--mv-on-dark);
  align-items:center;justify-content:center;padding:36px;
}

/* --- Pantalla 1: ubicación ------------------------------------------- */
.mv-s1__top{background:var(--mv-grad-screen-top);padding:44px 20px 26px;color:var(--mv-on-dark)}
.mv-s1__kicker{font-size:var(--mv-fs-nano);font-weight:var(--mv-fw-bold);letter-spacing:.6px;opacity:.8}
.mv-s1__addr{display:flex;align-items:center;gap:7px;font-size:var(--mv-fs-lead-sm);font-weight:var(--mv-fw-black);margin-top:4px}
.mv-s1__search{
  display:flex;align-items:center;gap:9px;
  background:var(--mv-surface-2);border-radius:var(--mv-r-sm);padding:13px 14px;
  color:var(--mv-ink-500);font-size:var(--mv-fs-label);font-weight:var(--mv-fw-med);margin-top:18px;
}
.mv-s1__grid{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mv-s1__tile{
  background:var(--mv-surface-2);border:1px solid var(--mv-line);color:var(--mv-green-900);
  border-radius:var(--mv-r-lg);padding:18px;
  font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-body-sm);
  display:flex;flex-direction:column;gap:22px;
}
.mv-s1__tile--on{
  background:var(--mv-grad-tile);color:var(--mv-on-dark);
  border:0;font-weight:var(--mv-fw-black);
}

/* --- Pantalla 2: tiendas -------------------------------------------- */
.mv-s2__top{background:var(--mv-surface-2);padding:44px 20px 16px;border-bottom:1px solid var(--mv-line-soft)}
.mv-s2__title{font-size:var(--mv-fs-lead-sm);font-weight:var(--mv-fw-black)}
.mv-s2__filters{display:flex;gap:8px;margin-top:14px;font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-bold)}
.mv-s2__f{padding:7px 13px;border-radius:var(--mv-r-pill)}
.mv-s2__f--on{background:var(--mv-green-900);color:var(--mv-on-dark)}
.mv-s2__f--off{background:var(--mv-surface);border:1px solid var(--mv-line);color:var(--mv-ink-600)}
.mv-s2__list{padding:16px 20px;display:flex;flex-direction:column;gap:14px}

/* --- Pantalla 3: pago ----------------------------------------------- */
.mv-s3__top{
  padding:44px 20px 16px;border-bottom:1px solid var(--mv-line-soft);
  font-size:var(--mv-fs-lead-sm);font-weight:var(--mv-fw-black);
}
.mv-s3__body{padding:16px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.mv-s3__line{display:flex;align-items:center;gap:12px}
.mv-s3__thumb{width:46px;height:46px;border-radius:var(--mv-r-sm);background:var(--mv-hatch-sm)}
.mv-s3__item{flex:1}
.mv-s3__name{font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-meta)}
.mv-s3__sub{color:var(--mv-ink-500);font-size:var(--mv-fs-micro)}
.mv-s3__price{font-weight:var(--mv-fw-black);font-size:var(--mv-fs-meta)}
.mv-s3__rule{height:1px;background:var(--mv-line-soft);margin:4px 0}
.mv-s3__row{
  display:flex;justify-content:space-between;
  font-size:var(--mv-fs-label);color:var(--mv-ink-500);font-weight:var(--mv-fw-semi);
}
.mv-s3__free{color:var(--mv-green-500);font-weight:var(--mv-fw-black)}
.mv-s3__total{display:flex;justify-content:space-between;font-size:18px;font-weight:var(--mv-fw-black)}
.mv-s3__pay{
  display:flex;align-items:center;gap:10px;
  background:var(--mv-surface);border:1.5px solid var(--mv-green-500);
  border-radius:var(--mv-r-sm);padding:13px 14px;
  font-size:var(--mv-fs-label);font-weight:var(--mv-fw-bold);box-shadow:var(--mv-sh-pay);
}
.mv-s3__spacer{flex:1}
.mv-s3__cta{
  background:var(--mv-grad-tile);color:var(--mv-on-dark);text-align:left;
  padding:16px 18px;border-radius:var(--mv-r-md);
  font-weight:var(--mv-fw-black);font-size:var(--mv-fs-body-sm);
  display:flex;justify-content:space-between;align-items:center;box-shadow:var(--mv-sh-screen-cta);
}

/* --- Pantalla 4: en camino ------------------------------------------ */
.mv-s4__map{flex:1;background:var(--mv-map);position:relative;overflow:hidden}
.mv-s4__grid{position:absolute;inset:0;background:var(--mv-map-grid)}
.mv-s4__route{position:absolute;inset:0;width:100%;height:100%}
.mv-s4__route path{stroke:var(--mv-green-500)}
.mv-s4__dot{
  position:absolute;left:24px;bottom:36px;width:16px;height:16px;border-radius:50%;
  background:var(--mv-green-900);border:3px solid var(--mv-surface-2);
}
.mv-s4__rider{
  position:absolute;left:246px;top:80px;width:34px;height:34px;border-radius:50%;
  background:var(--mv-green-500);border:3px solid var(--mv-surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--mv-on-dark);
}
.mv-s4__ping{
  position:absolute;inset:-3px;border-radius:50%;
  background:var(--mv-green-500);animation:mv-pulse 2.2s ease-out infinite;
}
.mv-s4__sheet{
  background:var(--mv-surface-2);border-radius:26px 26px 0 0;padding:20px;
  margin-top:-26px;position:relative;box-shadow:var(--mv-sh-sheet);
}
.mv-s4__row{display:flex;align-items:center;gap:12px}
.mv-s4__avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--mv-green-900);color:var(--mv-on-dark);
  display:flex;align-items:center;justify-content:center;font-weight:var(--mv-fw-black);
}
.mv-s4__name{font-weight:var(--mv-fw-black);font-size:var(--mv-fs-body-sm)}
.mv-s4__plate{color:var(--mv-ink-500);font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi)}
.mv-s4__call{
  width:40px;height:40px;border-radius:var(--mv-r-sm);
  background:var(--mv-surface);border:1px solid var(--mv-line);
  display:flex;align-items:center;justify-content:center;color:var(--mv-green-700);
}
.mv-s4__steps{display:flex;gap:6px;margin-top:18px}
.mv-s4__seg{flex:1;height:5px;background:var(--mv-green-500);border-radius:99px}
.mv-s4__seg--off{background:var(--mv-line-2)}
.mv-s4__eta{
  display:flex;justify-content:space-between;margin-top:12px;
  font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-bold);color:var(--mv-ink-500);
}
.mv-s4__eta-val{color:var(--mv-green-900)}

/* --- Pantalla 5: entregado ------------------------------------------ */
.mv-s5__check{
  width:88px;height:88px;border-radius:50%;background:var(--mv-on-dark-16);
  display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;
}
.mv-s5__ping{
  position:absolute;inset:0;border-radius:50%;
  background:var(--mv-on-dark-30);animation:mv-pulse 2.4s ease-out infinite;
}
.mv-s5__title{font-size:28px;font-weight:var(--mv-fw-black);margin-top:24px;text-align:center;line-height:1.1}
.mv-s5__meta{font-size:var(--mv-fs-meta);opacity:.9;margin-top:10px;text-align:center}
.mv-s5__stars{display:flex;gap:6px;margin-top:26px;font-size:26px;color:var(--mv-amber-500)}
.mv-s5__again{
  background:var(--mv-surface-2);color:var(--mv-green-900);
  font-weight:var(--mv-fw-black);font-size:var(--mv-fs-meta);
  padding:14px 22px;border-radius:var(--mv-r-sm);margin-top:26px;
}

/* ==================================================  5. LA APP  ====== */
.mv-todo{background:var(--mv-surface-2);border-top:2px solid var(--mv-line);padding:110px var(--mv-gutter)}
.mv-todo__inner{max-width:var(--mv-maxw);margin:0 auto}
.mv-todo__head{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;
  padding-bottom:40px;border-bottom:2px solid var(--mv-line);
}
.mv-todo__title{
  margin:0;font-size:var(--mv-fs-h2);line-height:.98;
  font-weight:var(--mv-fw-black);letter-spacing:-2.6px;
}
.mv-todo__lead{
  margin:0;font-size:var(--mv-fs-lead-sm);line-height:1.6;
  color:var(--mv-ink-600);font-weight:var(--mv-fw-med);
}
.mv-todo__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-bottom:2px solid var(--mv-line);
}
.mv-feature{padding:44px 40px;border-right:1px solid var(--mv-line);border-top:1px solid var(--mv-line)}
.mv-feature__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--mv-r-md);
  background:var(--mv-tint);color:var(--mv-green-700);font-size:var(--mv-fs-h4);
}
.mv-feature__title{
  font-size:var(--mv-fs-h4);font-weight:var(--mv-fw-black);
  margin:20px 0 0;letter-spacing:-.5px;
}
.mv-feature__body{
  font-size:var(--mv-fs-body-sm);line-height:1.6;color:var(--mv-ink-600);
  margin:8px 0 0;font-weight:var(--mv-fw-med);
}

/* ==================================================  6. ALIADOS  ===== */
.mv-allies{
  background:var(--mv-green-900);color:var(--mv-on-dark);
  padding:110px var(--mv-gutter);position:relative;overflow:hidden;
}
.mv-allies__mark{position:absolute;left:-160px;bottom:-200px;width:560px;height:560px;opacity:.06}
.mv-allies__mark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.mv-allies__inner{position:relative;max-width:var(--mv-maxw);margin:0 auto}
.mv-allies__title{
  margin:0 0 48px;font-size:var(--mv-fs-h2-xs);line-height:1;
  font-weight:var(--mv-fw-black);letter-spacing:-2.4px;max-width:760px;
}
.mv-allies__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mv-ally{
  background:var(--mv-on-dark-06);border:1px solid var(--mv-on-dark-14);
  border-radius:var(--mv-r-2xl);padding:40px;
  transition:transform .5s ease,background .4s ease;
}
.mv-ally__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--mv-r-lg);
  background:var(--mv-green-500);color:var(--mv-on-dark);font-size:26px;
}
.mv-ally__ico--amber{background:var(--mv-amber-500);color:var(--mv-amber-900)}
.mv-ally__title{
  font-size:var(--mv-fs-h3);font-weight:var(--mv-fw-black);
  margin:24px 0 0;letter-spacing:-1px;
}
.mv-ally__body{
  font-size:var(--mv-fs-body);line-height:1.6;color:var(--mv-on-dark-80);
  margin:12px 0 24px;font-weight:var(--mv-fw-med);
}
.mv-ally__bullets{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
.mv-ally__bullet{display:flex;align-items:center;gap:10px;font-size:var(--mv-fs-body-sm);font-weight:var(--mv-fw-semi)}
.mv-ally__cta,.mv-ally__cta:hover{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--mv-surface-2);color:var(--mv-green-900);
  font-weight:var(--mv-fw-black);font-size:var(--mv-fs-body-sm);
  padding:14px 22px;border-radius:var(--mv-r-sm);margin-top:30px;
}
.mv-ally__cta--ghost,.mv-ally__cta--ghost:hover{
  background:transparent;color:var(--mv-on-dark);
  border:1.5px solid var(--mv-on-dark-45);padding:13px 22px;
}

/* =================================================  7. DESCARGA  ===== */
.mv-dl{background:var(--mv-surface);padding:110px var(--mv-gutter)}
.mv-dl__card{
  max-width:var(--mv-maxw);margin:0 auto;background:var(--mv-grad-cta);
  border-radius:var(--mv-r-3xl);padding:72px;color:var(--mv-on-dark);
  position:relative;overflow:hidden;box-shadow:var(--mv-sh-cta-card);
}
.mv-dl__orb{
  position:absolute;right:-90px;top:-110px;width:420px;height:420px;
  border-radius:50%;background:var(--mv-on-dark-07);
}
.mv-dl__grid{
  position:relative;display:grid;grid-template-columns:1.2fr .8fr;
  gap:48px;align-items:center;
}
.mv-dl__title{
  margin:0;font-size:var(--mv-fs-h2-sm);line-height:.98;
  font-weight:var(--mv-fw-black);letter-spacing:-2.6px;
}
.mv-dl__lead{
  margin:22px 0 34px;font-size:var(--mv-fs-lead-sm);line-height:1.55;
  color:var(--mv-on-dark-88);font-weight:var(--mv-fw-med);max-width:520px;
}
.mv-dl__stores{display:flex;gap:14px;flex-wrap:wrap}
.mv-store,.mv-store:hover{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--mv-surface-2);color:var(--mv-green-900);
  padding:14px 24px;border-radius:var(--mv-r-md);box-shadow:var(--mv-sh-store);
}
.mv-store__pre{display:block;font-size:var(--mv-fs-nano);font-weight:var(--mv-fw-semi);color:var(--mv-ink-500)}
.mv-store__name{display:block;font-size:17px;font-weight:var(--mv-fw-black);letter-spacing:-.4px}
.mv-dl__visual{display:flex;justify-content:center}
.mv-dl__logo{
  width:232px;height:232px;border-radius:52px;
  box-shadow:var(--mv-sh-logo);display:block;
}

/* ===================================================  8. FOOTER  ===== */
.mv-footer{background:var(--mv-surface);border-top:2px solid var(--mv-line);padding:44px var(--mv-gutter) 56px}
.mv-footer__inner{
  max-width:var(--mv-maxw);margin:0 auto;display:flex;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.mv-footer__brand{display:flex;align-items:center;gap:12px}
.mv-footer__mark{width:34px;height:34px;object-fit:contain;display:block}
.mv-footer__word{font-size:var(--mv-fs-lead-sm);font-weight:var(--mv-fw-black)}
.mv-footer__tag{font-size:var(--mv-fs-meta);color:var(--mv-ink-500);font-weight:var(--mv-fw-semi);margin-left:8px}
.mv-footer__links{
  display:flex;gap:26px;font-size:var(--mv-fs-meta);
  font-weight:var(--mv-fw-semi);color:var(--mv-ink-600);
}
.mv-footer__copy{font-size:var(--mv-fs-label);color:var(--mv-ink-500);font-weight:var(--mv-fw-med)}

/* Contenedor raíz: igual que [data-mv-root] del origen. */
.mv-root{width:100%;overflow-x:hidden}

/* ======================================  Reveal (lo pinta movvi.js)  == */
/* El origen escribía estos valores inline; aquí son clases para que la
   capa responsive pueda seguir mandando. El retardo escalonado
   ((i % 6) × 90ms) lo pone movvi.js en transition-delay. */
[data-rv].mv-rv{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--mv-ease),transform .9s var(--mv-ease);
}
[data-rv].mv-rv.is-in{opacity:1;transform:none}