/* ============================================================================
   MasInfoDe — LANDING DE PRESENTACIÓN — v1.0.217
   Se sirve como página de sistema (`landing`) sin el marco de la app. Todo el
   CSS vive bajo `.mid-landing` para no pisar nada del panel ni del theme.
   Paleta: violeta #8B5CF6 · degradado #7C3AED → #C026D3 → #F0562F.
   Responsive: escritorio (>1023), tablet (768–1023), móvil (≤767 y ≤420).
   ========================================================================== */

.mid-landing {
  --ml-violet: #8B5CF6;
  --ml-violet-dark: #7C3AED;
  --ml-magenta: #C026D3;
  --ml-coral: #F0562F;
  --ml-grad: linear-gradient(100deg, #7C3AED 0%, #C026D3 52%, #F0562F 100%);
  --ml-ink: #16161D;
  --ml-body: #6B7280;
  --ml-muted: #9CA3AF;
  --ml-white: #ffffff;
  --ml-alt: #FAF8FF;
  --ml-lilac: #F5F0FF;
  --ml-border: #ECE9F5;
  --ml-green: #22C55E;
  --ml-amber: #F59E0B;
  --ml-radius: 16px;
  --ml-shadow: 0 2px 10px rgba(22, 22, 29, .05), 0 12px 30px rgba(22, 22, 29, .05);
  --ml-shadow-lg: 0 18px 50px rgba(124, 58, 237, .16);
  --ml-font-h: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ml-font-b: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ml-max: 1140px;

  margin: 0; padding: 0;
  font-family: var(--ml-font-b);
  color: var(--ml-body);
  background: var(--ml-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mid-landing *, .mid-landing *::before, .mid-landing *::after { box-sizing: border-box; }
.mid-landing h1, .mid-landing h2, .mid-landing h3, .mid-landing h4 { font-family: var(--ml-font-h); color: var(--ml-ink); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.mid-landing p { margin: 0; }
.mid-landing ul, .mid-landing ol { list-style: none; margin: 0; padding: 0; }
.mid-landing a { text-decoration: none; }
/* OJO — ESTA REGLA YA SE PAGÓ TRES VECES EN ESTE PROYECTO. Una regla genérica de enlaces PISA el color
   de los componentes que son enlaces (botones, tarjetas, el botón flotante de WhatsApp…), porque
   `.mid-landing a` pesa más que la clase del componente. Por eso aquí NO se pone un `color` genérico:
   cada componente trae el suyo, y el único enlace que necesita heredar lo dice por su nombre. */
.mid-landing a.ml-post { color: inherit; }
.mid-landing .ml-brand { color: var(--ml-ink); }
.mid-landing .ml-brand--light { color: #fff; }
.mid-landing .ml-wa { color: #fff; }
.mid-landing button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.mid-landing img, .mid-landing svg { display: block; }
.mid-landing :focus-visible { outline: 2px solid var(--ml-violet-dark); outline-offset: 3px; border-radius: 8px; }

.ml-container { width: 100%; max-width: var(--ml-max); margin: 0 auto; padding: 0 22px; }
.ml-center { text-align: center; margin-top: 26px; }
/* Respaldo sin JS: al saltar a un ancla, la sección no queda bajo la barra flotante. */
.mid-landing section[id], .mid-landing [id="demo"] { scroll-margin-top: 96px; }

/* Texto en degradado (segunda parte de cada título) */
.ml-grad {
  background: var(--ml-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Botones ---------- */
.ml-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-family: var(--ml-font-b); font-weight: 600; font-size: 14.5px; line-height: 1;
  white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.ml-btn--grad { background: var(--ml-grad); color: #fff; box-shadow: 0 8px 22px rgba(124, 58, 237, .32); }
.ml-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124, 58, 237, .42); }
.ml-btn--outline { background: #fff; color: var(--ml-violet-dark); border: 1.5px solid #DDD6FE; }
.ml-btn--outline:hover { background: var(--ml-lilac); border-color: var(--ml-violet); }
.ml-btn--ghost { background: #fff; color: var(--ml-ink); border: 1.5px solid var(--ml-border); }
.ml-btn--ghost:hover { border-color: #D8D3E8; transform: translateY(-2px); }
.ml-btn--white { background: #fff; color: var(--ml-violet-dark); box-shadow: 0 10px 26px rgba(22, 22, 29, .18); }
.ml-btn--white:hover { transform: translateY(-2px); }
.ml-btn--ghost-light { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.ml-btn--ghost-light:hover { background: rgba(255,255,255,.24); }
.ml-btn--lg { padding: 15px 26px; font-size: 15.5px; }
.ml-btn--block { width: 100%; margin-top: auto; }
.ml-play { font-size: 12px; }

/* ---------- Píldora/badge sobre los títulos ---------- */
.ml-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--ml-lilac); border: 1px solid #E4DAFF; color: var(--ml-violet-dark);
  font-size: 13px; font-weight: 600;
}
.ml-badge--light { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }

/* ============================================================================
   1. NAVBAR
   ========================================================================== */
.ml-nav-wrap { position: sticky; top: 0; z-index: 60; padding: 14px 16px 6px; background: linear-gradient(180deg, rgba(245,240,255,.96) 0%, rgba(245,240,255,0) 100%); }
.ml-nav {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--ml-max); margin: 0 auto; padding: 10px 14px 10px 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ml-border); border-radius: 999px; box-shadow: var(--ml-shadow);
}
.ml-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ml-font-h); font-weight: 700; font-size: 17px; color: var(--ml-ink); }
.ml-brand__mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ml-grad); color: #fff; font-size: 15px; box-shadow: 0 5px 14px rgba(124,58,237,.35);
}
.ml-brand__de { color: var(--ml-magenta); }
.ml-brand--light { color: #fff; }
.ml-brand--light .ml-brand__de { color: #E879F9; }
.ml-nav__menu { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: 1; }
.ml-nav__menu > a { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ml-body); }
.ml-nav__menu > a:hover { background: var(--ml-lilac); color: var(--ml-violet-dark); }
.ml-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ml-nav__toggle { display: none; width: 42px; height: 42px; margin-left: auto; border-radius: 12px; border: 1px solid var(--ml-border); background: #fff; place-items: center; }
.ml-bars { position: relative; width: 18px; height: 2px; background: var(--ml-ink); border-radius: 2px; display: block; transition: background .15s; }
.ml-bars::before, .ml-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ml-ink); border-radius: 2px; transition: transform .18s, top .18s; }
.ml-bars::before { top: -6px; } .ml-bars::after { top: 6px; }
.ml-nav__toggle.is-open .ml-bars { background: transparent; }
.ml-nav__toggle.is-open .ml-bars::before { top: 0; transform: rotate(45deg); }
.ml-nav__toggle.is-open .ml-bars::after { top: 0; transform: rotate(-45deg); }

/* ============================================================================
   2. HERO
   ========================================================================== */
.ml-hero { background: linear-gradient(165deg, #F5F0FF 0%, #FBF6FF 45%, #FFF1F0 100%); padding: 40px 0 70px; }
.ml-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ml-h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); font-weight: 700; margin: 18px 0 0; }
.ml-lead { max-width: 680px; margin: 18px auto 0; font-size: clamp(15px, 1.5vw, 17.5px); color: var(--ml-body); }
.ml-ideal { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.ml-ideal__label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--ml-muted); }
.ml-ideal__pill { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #E4DAFF; color: var(--ml-violet-dark); font-weight: 600; font-size: 14px; box-shadow: var(--ml-shadow); transition: opacity .25s; }
.ml-hero__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.ml-proof { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; color: var(--ml-body); }
.ml-avatars { display: flex; }
.ml-avatars span { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--ml-grad); border: 2px solid #fff; margin-left: -8px; }
.ml-avatars span:first-child { margin-left: 0; }
.ml-proof__item { position: relative; padding-left: 18px; }
.ml-proof__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: #D9D2EE; }

/* --- Mockup del editor (v1.0.229) ---
   Antes era un esqueleto de líneas grises con los rótulos en mayúsculas: no se reconocía como el
   Builder. Ahora lleva la barra del editor (página + dispositivo + Publicar), la biblioteca de widgets
   con su buscador, un lienzo con una mini-página DE VERDAD y las propiedades con controles reales. */
.ml-mockup { position: relative; width: 100%; max-width: 900px; margin: 46px auto 34px; }
.ml-mockup__win { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow-lg); }
.ml-mockup__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #F7F5FC; border-bottom: 1px solid var(--ml-border); }
.ml-dot { width: 11px; height: 11px; border-radius: 999px; }
.ml-dot--r { background: #FF5F57; } .ml-dot--y { background: #FEBC2E; } .ml-dot--g { background: #28C840; }
.ml-mockup__url { margin-left: 12px; flex: 1; text-align: center; font-size: 12px; color: var(--ml-muted); background: #fff; border: 1px solid var(--ml-border); border-radius: 999px; padding: 4px 12px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Barra del editor */
.ml-mockup__tools { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--ml-border); }
.ml-mockup__page { font-size: 12px; font-weight: 700; color: var(--ml-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-mockup__devices { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
.ml-mockup__devices i { width: 26px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; color: var(--ml-muted); background: #F7F5FC; border: 1px solid var(--ml-border); }
.ml-mockup__devices i.is-on { background: var(--ml-lilac); color: var(--ml-violet-dark); border-color: #E4DAFF; }
/* Los tres aparatos se dibujan con CSS: un emoji se ve distinto en cada sistema (y en algunos sale un cuadro). */
.ml-mockup__devices i::before { content: ""; display: block; border: 2px solid currentColor; }
.ml-mockup__devices i:nth-child(1)::before { width: 13px; height: 8px; border-radius: 2px; }
.ml-mockup__devices i:nth-child(2)::before { width: 10px; height: 12px; border-radius: 3px; }
.ml-mockup__devices i:nth-child(3)::before { width: 7px; height: 13px; border-radius: 2px; }
.ml-mockup__publish { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--ml-grad); border-radius: 999px; padding: 5px 13px; }

.ml-mockup__body { display: grid; grid-template-columns: 158px minmax(0, 1fr) 168px; gap: 0; min-height: 300px; }
.ml-mockup__side { padding: 14px 12px; background: #FCFBFF; }
.ml-mockup__side--lib { border-right: 1px solid var(--ml-border); position: relative; }
/* Degradado al pie: la lista sigue, se ve que hay más (como en el panel real). */
.ml-mockup__side--lib::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(180deg, rgba(252, 251, 255, 0), #FCFBFF); pointer-events: none; }
.ml-mockup__side--props { border-left: 1px solid var(--ml-border); }
.ml-mockup__title { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-muted); margin-bottom: 10px; }
.ml-mockup__search { display: block; font-size: 11px; color: var(--ml-muted); background: #fff; border: 1px solid var(--ml-border); border-radius: 8px; padding: 6px 9px; margin-bottom: 9px; }
.ml-mockup__list li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ml-body); padding: 6px 9px; border-radius: 8px; margin-bottom: 3px; background: #fff; border: 1px solid var(--ml-border); }
.ml-mockup__list li i { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 4px; background: #EDE9FE; border: 1px solid #DDD6FE; }
.ml-mockup__list li.is-on { background: var(--ml-lilac); border-color: #E4DAFF; color: var(--ml-violet-dark); font-weight: 600; }
.ml-mockup__list li.is-on i { background: var(--ml-grad); border-color: transparent; }

.ml-mockup__center { padding: 22px 18px; display: grid; place-items: center; background: linear-gradient(160deg, #FBFAFF, #F6F4FC); }
.ml-mockup__card { width: 100%; max-width: 250px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow); display: flex; flex-direction: column; gap: 8px; }
.ml-mockup__avatar { width: 50px; height: 50px; margin: 0 auto 2px; border-radius: 999px; background: var(--ml-grad); color: #fff; display: grid; place-items: center; font-family: var(--ml-font-h); font-size: 20px; font-weight: 800; }
.ml-mockup__biz { font-size: 13.5px; text-align: center; color: var(--ml-ink); }
.ml-mockup__tag { font-style: normal; font-size: 11.5px; text-align: center; color: var(--ml-body); }
.ml-mockup__cta { display: block; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: #25D366; border-radius: 10px; padding: 9px; margin-top: 4px; }
.ml-mockup__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.ml-mockup__gallery i { height: 32px; border-radius: 8px; display: block; }
.ml-mockup__gallery i:nth-child(1) { background: linear-gradient(140deg, #FDE68A, #FCA5A5); }
.ml-mockup__gallery i:nth-child(2) { background: linear-gradient(140deg, #BFDBFE, #A7F3D0); }
.ml-mockup__gallery i:nth-child(3) { background: linear-gradient(140deg, #DDD6FE, #FBCFE8); }

.ml-mockup__label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-muted); margin: 12px 0 8px; }
.ml-swatches { display: flex; gap: 8px; margin-bottom: 4px; }
.ml-swatches i { width: 22px; height: 22px; border-radius: 999px; display: block; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.ml-mockup__slider { display: block; position: relative; height: 6px; border-radius: 999px; background: #EFECF7; }
.ml-mockup__slider i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ml-grad); }

.ml-float { position: absolute; background: #fff; border: 1px solid var(--ml-border); border-radius: 14px; box-shadow: var(--ml-shadow-lg); font-size: 12px; }
/* v1.0.229 — Las tarjetas flotantes ya NO se montan encima de los paneles del editor (la de María
   tapaba la lista de widgets): la de «en vivo» va sobre el borde de arriba y las otras dos asoman
   por debajo de la ventana, en las esquinas. */
.ml-float--live { top: -16px; right: 18px; padding: 8px 14px; color: var(--ml-green); font-weight: 700; background: #F0FDF4; border-color: #BBF7D0; animation: ml-bob 3.4s ease-in-out infinite; }
.ml-float--left, .ml-float--right { display: flex; align-items: center; gap: 9px; padding: 10px 14px; }
.ml-float--left { left: 22px; bottom: -22px; animation: ml-bob 4.2s ease-in-out infinite; }
.ml-float--right { right: 22px; bottom: -22px; animation: ml-bob 3.6s ease-in-out infinite .5s; }
.ml-float strong { display: block; color: var(--ml-ink); font-size: 12px; }
.ml-float em { font-style: normal; color: var(--ml-muted); font-size: 11px; }
.ml-float__avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--ml-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.ml-float__ico { font-size: 16px; }
@keyframes ml-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ============================================================================
   Secciones
   ========================================================================== */
.ml-section { padding: 78px 0; }
.ml-section--alt { background: var(--ml-alt); }
.ml-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.ml-h2 { font-size: clamp(1.55rem, 3.6vw, 2.7rem); font-weight: 700; margin: 16px 0 0; }
.ml-sub { margin-top: 14px; font-size: 16px; color: var(--ml-body); }

/* 3. Cómo funciona */
/* 3. Cómo funciona — v1.0.228: tarjetas de verdad (antes eran columnas sueltas sobre una línea de
   fondo) con el número como insignia sobre el icono y una flecha que une cada paso con el siguiente. */
.ml-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.ml-step { position: relative; text-align: center; padding: 30px 24px 26px; background: #fff; border: 1px solid var(--ml-border); border-radius: 20px; box-shadow: var(--ml-shadow); transition: transform .18s, box-shadow .18s; }
.ml-step:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lg); }
.ml-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -12px; width: 9px; height: 9px; border-right: 2px solid #D8CFF0; border-bottom: 2px solid #D8CFF0; transform: translateY(-50%) rotate(-45deg); }
.ml-step__ico { position: relative; width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--ml-grad); color: #fff; box-shadow: 0 10px 22px rgba(124, 58, 237, .22); }
.ml-step__n { position: absolute; top: -9px; right: -9px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--ml-violet-dark); font-family: var(--ml-font-h); font-size: 11.5px; font-weight: 800; box-shadow: 0 4px 12px rgba(15, 23, 42, .16); }
.ml-step h3 { font-size: 17.5px; margin-bottom: 8px; }
.ml-step p { font-size: 14px; margin: 0; }

/* 4. Funciones */
.ml-grid { display: grid; gap: 18px; }
.ml-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ml-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-card { background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); padding: 22px 20px; box-shadow: var(--ml-shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
.ml-card:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lg); border-color: #E4DAFF; }
.ml-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.ml-ico--violet { background: #F1EBFF; color: var(--ml-violet-dark); }
.ml-ico--coral { background: #FFEDE6; color: var(--ml-coral); }
.ml-ico--green { background: #E7FBEE; color: #15803D; }
.ml-card h3 { font-size: 15.5px; margin-bottom: 7px; }
.ml-card p { font-size: 13.5px; }

/* 5. Carrusel de widgets */
.ml-widgets { padding-bottom: 66px; }
.ml-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ml-marquee__track { display: flex; gap: 12px; width: max-content; padding: 4px 0; animation: ml-scroll 46s linear infinite; }
.ml-marquee:hover .ml-marquee__track { animation-play-state: paused; }
.ml-chip { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow); font-size: 14px; font-weight: 500; color: var(--ml-ink); white-space: nowrap; }
@keyframes ml-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 6. Mini CTA */
.ml-mini-cta { text-align: center; padding: 52px 28px; border-radius: 24px; background: var(--ml-grad); color: #fff; box-shadow: var(--ml-shadow-lg); }
.ml-mini-cta h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.mid-landing .ml-mini-cta h2 { color: #fff; }
.ml-mini-cta p { margin: 12px auto 24px; max-width: 52ch; color: rgba(255,255,255,.92); }

/* 7. Soluciones por negocio */
.ml-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
/* v1.0.227 — El rótulo va en tinta (no en el gris del cuerpo) y el icono queda algo más suave: con
   cinco pestañas seguidas, el gris claro sobre blanco se leía flojo. */
.ml-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--ml-border); color: var(--ml-ink); font-size: 14px; font-weight: 700; transition: all .15s; }
.ml-tab svg { color: var(--ml-body); transition: color .15s; }
.ml-tab:hover { border-color: #DDD6FE; color: var(--ml-violet-dark); }
.ml-tab:hover svg { color: var(--ml-violet-dark); }
.ml-tab.is-active { background: var(--ml-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(124,58,237,.28); }
.ml-tab.is-active svg { color: #fff; }
.ml-tabpanel { animation: ml-fade .28s ease; }
@keyframes ml-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ml-biz { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; background: #fff; border: 1px solid var(--ml-border); border-radius: 22px; padding: 34px; box-shadow: var(--ml-shadow); }
.ml-biz__text h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: 10px; }
.ml-biz__text > p { font-size: 15px; margin-bottom: 18px; }
.ml-checks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ml-checks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ml-ink); }
.ml-checks svg { color: var(--ml-green); }
.ml-biz__mock { padding: 24px; border-radius: 16px; background: linear-gradient(160deg, #F7F3FF, #FFF4F1); border: 1px solid var(--ml-border); display: flex; flex-direction: column; gap: 10px; }
.ml-biz__emoji { font-size: 40px; margin-bottom: 6px; }
/* v1.0.227 — En vez de un esqueleto de líneas grises (que no decía nada), los WIDGETS REALES que se
   usan para conseguir ese objetivo. Los nombres salen del catálogo del producto. */
.ml-biz__mocktitle { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-body); }
.ml-biz__wgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-biz__w { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; background: #fff; border: 1px solid var(--ml-border); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ml-ink); }
.ml-biz__w svg { color: var(--ml-violet-dark); flex: 0 0 auto; }

/* 8. Estadísticas */
.ml-stats-section { background: var(--ml-lilac); }
.ml-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.ml-stat__n { display: block; font-family: var(--ml-font-h); font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 700; line-height: 1; }
.ml-stat__l { display: block; margin-top: 10px; font-size: 14px; color: var(--ml-body); font-weight: 500; }

/* 9. Precios */
.ml-billing { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--ml-border); box-shadow: var(--ml-shadow); }
.ml-billing button { padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ml-body); }
.ml-billing button.is-active { background: var(--ml-grad); color: #fff; }
.ml-billing__save { font-size: 12px; font-weight: 700; color: #15803D; background: #DCFCE7; border-radius: 999px; padding: 3px 10px; margin-right: 6px; }
/* v1.0.227 — `overflow-x: clip` (y NO `hidden`): Chrome contaba el ancho mínimo del contenido de las
   tarjetas como desborde de TODA la página y a 390px salía scroll lateral. `clip` lo contiene sin
   recortar en vertical, así que la cinta de «Más popular» (que sobresale hacia arriba) se sigue viendo.
   Con `hidden`, el eje vertical pasaría a `auto` y la cinta quedaría cortada. */
.ml-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; overflow-x: clip; }
.ml-plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--ml-border); border-radius: 20px; padding: 28px 24px; box-shadow: var(--ml-shadow); }
.ml-plan.is-popular { border: 2px solid var(--ml-violet); box-shadow: 0 24px 60px rgba(124,58,237,.18); padding-top: 40px; padding-bottom: 40px; }
.ml-plan__pop { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: var(--ml-grad); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ml-plan__name { font-size: 15px; letter-spacing: .04em; }
.ml-plan__tag { font-size: 13.5px; color: var(--ml-muted); }
.ml-plan__price { display: flex; align-items: baseline; gap: 6px; }
.ml-plan__cur { font-size: 14px; font-weight: 700; color: var(--ml-muted); }
.ml-plan__num { font-family: var(--ml-font-h); font-size: 42px; font-weight: 700; color: var(--ml-ink); line-height: 1; }
.ml-plan__per { font-size: 14px; color: var(--ml-muted); }
.ml-plan__cop { display: inline-block; align-self: flex-start; font-size: 12.5px; font-weight: 600; color: #92400E; background: #FEF3C7; border-radius: 999px; padding: 4px 12px; }
.ml-plan__cop--muted { color: var(--ml-muted); background: var(--ml-alt); }
.ml-plan__features { display: flex; flex-direction: column; gap: 9px; }
.ml-plan__features li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ml-ink); }
.ml-plan__features svg { color: var(--ml-green); }
.ml-premium { border-radius: 14px; padding: 14px; border: 1px solid var(--ml-border); background: var(--ml-alt); }
.ml-premium--off { background: #FFF5F7; border-color: #FBD5E0; }
.ml-premium--on { background: #F0FDF4; border-color: #BBF7D0; }
.ml-premium__title { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-ink); margin-bottom: 10px; }
/* v1.0.226 — `auto-fit` y no 2 columnas fijas: hoy el único módulo premium es la Ruleta y con dos
   columnas fijas se quedaba a media anchura, con un hueco al lado. */
.ml-premium__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; }
.ml-premium__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #9F1239; background: #fff; border-radius: 9px; padding: 7px 9px; border: 1px solid #FBD5E0; }
.ml-premium__item.is-on { color: #15803D; border-color: #BBF7D0; }
.ml-premium__note { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ml-muted); }
.ml-premium--on .ml-premium__note { color: #15803D; }
.ml-widgets-badge { display: flex; flex-direction: column; gap: 9px; }
.ml-widgets-badge__n { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-violet-dark); background: var(--ml-lilac); border-radius: 999px; padding: 4px 12px; }
.ml-widgets-badge__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-wchip { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.ml-wchip.is-off { background: #F3F4F6; color: #9CA3AF; border-color: #E5E7EB; text-decoration: line-through; }
.ml-wchip--more { background: #fff; color: var(--ml-body); border-color: var(--ml-border); text-decoration: none; }
.ml-trust { text-align: center; margin-top: 30px; font-size: 14px; color: var(--ml-body); font-weight: 500; }

/* 10. Testimonios */
.ml-quote { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); padding: 26px 22px; box-shadow: var(--ml-shadow); }
.ml-quote__mark { font-family: var(--ml-font-h); font-size: 46px; line-height: .6; color: #DDD6FE; }
.ml-quote blockquote { margin: 0; font-size: 14.5px; color: var(--ml-ink); line-height: 1.6; }
.ml-stars { color: var(--ml-amber); letter-spacing: 2px; font-size: 15px; }
.ml-quote figcaption { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 6px; }
.ml-quote__avatar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--ml-grad); color: #fff; font-weight: 700; }
.ml-quote figcaption strong { display: block; font-size: 14px; color: var(--ml-ink); }
.ml-quote figcaption em { font-style: normal; font-size: 12.5px; color: var(--ml-muted); }

/* 11. FAQ */
.ml-faq { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ml-faq__item { background: #fff; border: 1px solid var(--ml-border); border-radius: 14px; box-shadow: var(--ml-shadow); overflow: hidden; }
.ml-faq__item[open] { border-color: #DDD6FE; }
.ml-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; cursor: pointer; font-family: var(--ml-font-h); font-weight: 600; font-size: 15px; color: var(--ml-ink); list-style: none; }
.ml-faq__item summary::-webkit-details-marker { display: none; }
.ml-faq__ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--ml-lilac); color: var(--ml-violet-dark); font-size: 17px; font-weight: 700; transition: transform .2s; }
.ml-faq__item[open] .ml-faq__ico { transform: rotate(45deg); }
.ml-faq__a { padding: 0 20px 18px; font-size: 14.5px; }

/* 12. Blog */
.ml-post { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--ml-border); border-radius: var(--ml-radius); padding: 16px; box-shadow: var(--ml-shadow); transition: transform .18s, box-shadow .18s; }
.ml-post:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lg); }
.ml-post__art { position: relative; height: 150px; border-radius: 12px; overflow: hidden; }
.ml-post__art--violet { background: linear-gradient(150deg, #EDE6FF, #D8C7FF); }
.ml-post__art--teal { background: linear-gradient(150deg, #E0F7F4, #B9E8E2); }
.ml-post__art--turquoise { background: linear-gradient(150deg, #E0F2FE, #BAE6FD); }
/* Con imagen destacada del artículo: la foto ocupa el marco del diseño. */
.ml-post__art--img { background: var(--ml-alt); }
.ml-post__art--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-post__shape { position: absolute; border-radius: 10px; background: rgba(255,255,255,.65); }
.ml-post__shape--1 { width: 62px; height: 62px; left: 22px; top: 24px; transform: rotate(-8deg); }
.ml-post__shape--2 { width: 40px; height: 40px; left: 96px; top: 62px; border-radius: 999px; background: rgba(255,255,255,.85); }
.ml-post__shape--3 { width: 84px; height: 26px; right: 20px; bottom: 22px; transform: rotate(6deg); }
.ml-post h3 { font-size: 15px; transition: color .15s; }
.ml-post:hover h3 { color: var(--ml-violet-dark); }
.ml-post__more { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ml-violet-dark); margin-top: auto; }

/* 13. CTA final */
.ml-final { position: relative; overflow: hidden; background: var(--ml-grad); padding: 88px 0; text-align: center; color: #fff; }
/* Un brillo suave arriba: da volumen a la banda y ayuda a leer el titular en blanco. */
.ml-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 130% at 50% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 62%); }
.ml-final > .ml-container { position: relative; }
/* OJO: el titular es un `h2` CON clase, y `.mid-landing h2` (0,1,1) le ganaba a `.ml-final__title`
   (0,1,0) → el título salía OSCURO sobre el degradado. Aquí se sube la especificidad a propósito. */
.mid-landing .ml-final__title { color: #fff; font-size: clamp(1.7rem, 4.2vw, 2.8rem); margin-top: 18px; }
.ml-final__text { margin: 16px auto 28px; max-width: 54ch; color: rgba(255,255,255,.94); font-size: 16.5px; }
.ml-final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ml-final__note { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.88); }

/* 14. Footer */
.ml-footer { background: var(--ml-ink); color: #C9C9D4; padding: 60px 0 0; }
.ml-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; padding-bottom: 44px; }
.ml-footer__brand p { margin: 14px 0 16px; font-size: 13.5px; color: #9A9AA8; max-width: 30ch; }
.ml-footer__col { display: flex; flex-direction: column; gap: 9px; }
.ml-footer__col h3 { font-family: var(--ml-font-h); font-size: 12px; letter-spacing: .08em; color: #fff; margin-bottom: 4px; }
.ml-footer__col a, .ml-footer__col span { font-size: 13.5px; color: #9A9AA8; }
.ml-footer__col a:hover { color: #fff; }
.ml-social { display: flex; gap: 9px; }
.ml-social__i { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.ml-social__i:hover { background: rgba(255,255,255,.18); }
.ml-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; }
.ml-footer__bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #8A8A98; }
.ml-flags { margin-left: 6px; }

/* Botón flotante de WhatsApp (número, mensaje y efecto se eligen en el panel: Ajustes → Landing) */
.ml-wa { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 12px 30px rgba(37, 211, 102, .45); transition: transform .18s, box-shadow .18s; }
.ml-wa:hover { transform: scale(1.07); box-shadow: 0 16px 38px rgba(37, 211, 102, .55); }
.ml-wa svg { display: block; }

/* Efectos del botón */
.ml-wa--pulso::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: ml-wa-pulso 2.2s ease-out infinite; }
@keyframes ml-wa-pulso { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

.ml-wa--rebote { animation: ml-wa-rebote 2.6s ease-in-out infinite; }
@keyframes ml-wa-rebote { 0%, 22%, 52%, 82%, 100% { transform: translateY(0); } 36% { transform: translateY(-9px); } 66% { transform: translateY(-4px); } }
.ml-wa--rebote:hover { animation-play-state: paused; }

.ml-wa--brillo::before { content: ""; position: absolute; inset: -8px; border-radius: 999px; background: radial-gradient(circle, rgba(37, 211, 102, .6) 0%, rgba(37, 211, 102, 0) 70%); animation: ml-wa-brillo 2.4s ease-in-out infinite; z-index: -1; }
@keyframes ml-wa-brillo { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }

/* ---------- Animación de entrada ----------
   Solo se oculta el contenido cuando el JS está presente (la clase `ml-js` la pone el propio
   JS antes de pintar): si el archivo no carga, la landing se lee entera en vez de quedarse en
   blanco. */
.ml-js .mid-landing .ml-reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.ml-js .mid-landing .ml-reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================================
   TABLET (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  .ml-section { padding: 62px 0; }
  /* v1.0.227 — La barra de navegación se pasaba 1px de ancho a 900px (el menú de escritorio no se
     recoge hasta 767). Se aprieta un poco antes para que no saque scroll. */
  .ml-nav__menu > a { padding: 8px 10px; font-size: 13.5px; }
  .ml-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-plan.is-popular { padding-top: 34px; padding-bottom: 34px; }
  .ml-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-footer__brand { grid-column: 1 / -1; }
  .ml-biz { grid-template-columns: 1fr; gap: 24px; }
  .ml-mockup__body { grid-template-columns: 140px minmax(0, 1fr) 150px; }
}

/* ============================================================================
   MÓVIL (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  .ml-section { padding: 52px 0; }
  .ml-container { padding: 0 16px; }

  /* Navbar: menú desplegable */
  .ml-nav-wrap { padding: 10px 12px 4px; }
  .ml-nav { flex-wrap: wrap; border-radius: 20px; padding: 10px 12px; }
  .ml-nav__toggle { display: grid; }
  .ml-nav__menu { display: none; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; margin: 8px 0 2px; flex: 0 0 100%; }
  .ml-nav__menu.is-open { display: flex; }
  .ml-nav__menu > a { padding: 12px 10px; border-radius: 12px; font-size: 15px; }
  .ml-nav__actions { margin-left: 0; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; }
  .ml-nav__actions .ml-btn { width: 100%; }

  .ml-hero { padding: 26px 0 52px; }
  .ml-h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .ml-proof { gap: 12px; }
  .ml-proof__item { padding-left: 12px; }

  /* Mockup simplificado */
  .ml-mockup { margin-top: 34px; margin-bottom: 26px; }
  .ml-mockup__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ml-mockup__side--lib { border-right: 0; border-bottom: 1px solid var(--ml-border); }
  .ml-mockup__side--props { border-left: 0; border-top: 1px solid var(--ml-border); }
  .ml-mockup__list { display: flex; flex-wrap: wrap; gap: 5px; }
  .ml-mockup__list li { margin-bottom: 0; }
  .ml-mockup__center { padding: 20px 16px; }
  .ml-float--left, .ml-float--right { display: none; }
  .ml-float--live { right: 6px; top: -12px; }

  .ml-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ml-step:not(:last-child)::after { display: none; }
  .ml-grid--4, .ml-grid--3 { grid-template-columns: 1fr; }
  /* v1.0.227 — `minmax(0, 1fr)` y NO `1fr`: con `1fr` el mínimo es «auto» (el ancho mínimo del
     contenido) y una tarjeta de plan no bajaba de 557px, así que a 390px la página sacaba scroll
     lateral. Con el mínimo a 0 la columna encoge de verdad. */
  .ml-plans { grid-template-columns: minmax(0, 1fr); }
  /* El plan popular va PRIMERO en móvil */
  .ml-plan.is-popular { order: -1; padding-top: 36px; padding-bottom: 30px; }
  .ml-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }

  /* Tabs con desplazamiento horizontal */
  .ml-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ml-tabs::-webkit-scrollbar { display: none; }
  .ml-tab { flex: 0 0 auto; }

  .ml-biz { padding: 22px 18px; }
  .ml-mini-cta { padding: 40px 20px; }
  .ml-final { padding: 60px 0; }
  .ml-final__cta .ml-btn { width: 100%; }
  .ml-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .ml-footer__bottom-in { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   MÓVIL PEQUEÑO (≤420px)
   ========================================================================== */
@media (max-width: 420px) {
  .ml-stats { grid-template-columns: 1fr; }
  .ml-premium__grid { grid-template-columns: 1fr; }
  .ml-quote { padding: 22px 18px; }
}

/* ============================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mid-landing *, .mid-landing *::before, .mid-landing *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .ml-reveal { opacity: 1 !important; transform: none !important; }
  .ml-marquee__track { animation: none; }
}