/* Módulos v2: sistema visual de las páginas de módulo (piloto: CRM).
   Cada página define su acento con --m (y --m2 para el degradé) en <body class="m2" style="--m:...;--m2:...">.
   Las franjas oscuras (.m2-dark) son siempre oscuras, en modo claro y oscuro. */
.m2{--m:#8B5CF6;--m2:#487CFF;--mdim:color-mix(in srgb,var(--m) 14%,transparent);--msoft:color-mix(in srgb,var(--m) 30%,transparent)}
.m2 .kicker{color:var(--m)}
.m2 .sec:not(.m2-dark) .kicker{color:color-mix(in srgb,var(--m) 68%,#111)}
.m2-dark{background:#0C0C10;color:#F4F3F1;position:relative;overflow:hidden}
.m2-dark .kicker{color:color-mix(in srgb,var(--m) 70%,#fff)}
.m2-dark .sub2,.m2-dark p{color:#B9B8C2}
.m2-dark h1,.m2-dark h2,.m2-dark h3{color:#F7F5F4}
.m2-glow{position:absolute;inset:auto;width:900px;height:620px;border-radius:50%;filter:blur(90px);opacity:.38;pointer-events:none;background:radial-gradient(closest-side,var(--m),transparent)}
.m2-grad{background:linear-gradient(100deg,var(--m) 10%,var(--m2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.m2 .cta:not(.ghost){background:var(--m)}
.m2 .cta:not(.ghost):hover{box-shadow:0 10px 30px color-mix(in srgb,var(--m) 40%,transparent)}
.m2-dark .cta.ghost{border-color:#3A3A44;color:#E6E5EA;background:transparent}

/* Textos de sección */
.m2 .sub2{font-size:clamp(15px,1.4vw,17px);color:var(--t2);line-height:1.7;max-width:760px;margin-top:16px}
.m2-dark .sub2{color:#B9B8C2}
.m2 .center{text-align:center}
.m2 .center .sub2{margin-left:auto;margin-right:auto}

/* Hero */
.m2-hero{padding:clamp(70px,9vw,118px) clamp(20px,4vw,44px) clamp(56px,7vw,96px)}
.m2-hero .hin{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:center;position:relative;z-index:1}
.m2-hero h1{font-size:clamp(40px,5.4vw,72px);font-weight:800;letter-spacing:-.045em;line-height:1.02;margin-top:18px}
.m2-hero .lead{max-width:520px;margin-top:22px;font-size:clamp(15px,1.35vw,17px);line-height:1.65}
.m2-hero .m2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.m2-chips span{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#D9D7E4;border:1px solid #30303A;border-radius:99px;padding:7px 12px;background:rgba(255,255,255,.03)}
@media(max-width:980px){.m2-hero .hin{grid-template-columns:1fr}}

/* Demos: usan el componente común .dk (web/dash.css), igual que las demás páginas.
   Dentro de una franja oscura se fuerzan los valores claros para que se vean idénticas. */
.m2-dk{margin-top:0;--surf:#FEFEFE;--bd:#DDDAD4;--bds:#EDEBE7;background:#FEFEFE;color:#111}
.m2-dark .m2-dk{box-shadow:0 40px 90px rgba(0,0,0,.45)}
.m2-dk h5{color:#111}
.m2-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.m2-col{min-height:232px;display:flex;flex-direction:column;gap:7px;padding:12px 10px}
.m2-col h6{font-size:12px;font-weight:800;color:#111;display:flex;justify-content:space-between;gap:6px;margin:0}
.m2-col h6 b{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dk-s1);font-weight:700}
.m2-col .sum{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dk-ink3);margin-bottom:4px}
.m2-card{background:#fff;border:1px solid #E7E4DE;border-radius:12px;padding:9px 10px;font-size:12px;font-weight:700;color:#111;line-height:1.35;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .45s ease,border-color .45s ease,box-shadow .45s ease}
.m2-card small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;color:var(--dk-ink3);margin-top:5px}
.m2-card small em{font-style:normal;white-space:nowrap}
.m2-card.won{border-color:#BFE3C6;background:#F2FAF3}
.m2-card.won small em:last-child{color:#2E9E44}
.m2-card.hot{border-color:var(--dk-s1);box-shadow:0 0 0 3px rgba(72,124,255,.15)}
.m2-card.in{animation:m2in .55s cubic-bezier(.2,.9,.3,1)}
@keyframes m2in{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:560px){.m2-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.m2-col{min-height:0}}
.m2-list{margin-top:12px}
.m2-list div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #EDEBE7;font-size:12.5px}
.m2-list div:last-child{border-bottom:0}
.m2-list span{color:var(--dk-ink2)}
.m2-list b{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;color:#111;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m2-list b.ok{color:#2E9E44}

/* Cinta de capacidades */
.m2-strip{border-block:1px solid var(--bds);background:var(--surf);overflow:hidden}
.m2-strip .track{display:flex;gap:44px;padding:18px 0;width:max-content;animation:m2marq 38s linear infinite}
.m2-strip span{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap}
.m2-strip span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--m)}
@keyframes m2marq{to{transform:translateX(-50%)}}

/* Recorrido por etapas */
.m2-journey{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,4vw,54px);align-items:center;margin-top:44px;position:relative;z-index:1}
.m2-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.m2-steps button{width:100%;text-align:left;background:transparent;border:1px solid #24242C;border-radius:16px;padding:16px 18px;cursor:pointer;color:inherit;font:inherit;position:relative;overflow:hidden;transition:background .25s ease,border-color .25s ease}
.m2-steps button .n{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:#77768A}
.m2-steps button b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:4px;color:#ECEBF2}
.m2-steps button span{display:block;font-size:13px;color:#9C9BAA;line-height:1.55;margin-top:6px;max-height:0;opacity:0;transition:max-height .35s ease,opacity .35s ease}
.m2-steps button[aria-selected="true"]{background:#16161D;border-color:var(--msoft)}
.m2-steps button[aria-selected="true"] .n{color:color-mix(in srgb,var(--m) 70%,#fff)}
.m2-steps button[aria-selected="true"] span{max-height:120px;opacity:1}
.m2-steps button i{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--m),var(--m2))}
.m2-steps button[aria-selected="true"] i{animation:m2prog var(--dur,6s) linear forwards}
.m2-journey.paused .m2-steps button i{animation-play-state:paused}
@keyframes m2prog{to{width:100%}}
.m2-stage{position:relative;min-height:380px}
.m2-pane{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.m2-pane.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:900px){.m2-journey{grid-template-columns:1fr}.m2-stage{min-height:400px}}

/* Piezas de las demos */
.m2-pipe{display:flex;gap:4px;margin-top:14px}
.m2-pipe i{flex:1;height:6px;border-radius:99px;background:#ECEAE6}
.m2-pipe i.on{background:var(--dk-s1)}
.m2-feed{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.m2-feed div{display:flex;gap:10px;font-size:12.5px;line-height:1.45;align-items:flex-start;color:var(--dk-ink2)}
.m2-feed strong{color:#111}
.m2-feed div b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(72,124,255,.12);color:var(--dk-s1);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800}
.m2-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:2px solid #111;font-weight:800;color:#111}
.m2-total span:last-child{font-size:20px;letter-spacing:-.02em}

/* Dos columnas */
.m2-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:900px){.m2-split{grid-template-columns:1fr}}
.m2-actions{display:flex;gap:8px;margin-top:16px}
.m2-actions span{flex:1;text-align:center;font-size:12.5px;font-weight:700;border-radius:10px;padding:10px;border:1px solid #DDDAD4;color:#111}
.m2-actions span.pri{background:var(--dk-s1);border-color:var(--dk-s1);color:#fff}

/* Tarjetas con ícono */
.m2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:40px}
.m2-f{background:var(--surf);border:1px solid var(--bd);border-radius:20px;padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.m2-f:hover{transform:translateY(-4px);border-color:var(--msoft);box-shadow:0 18px 40px color-mix(in srgb,var(--m) 14%,transparent)}
.m2-f .ic{width:42px;height:42px;border-radius:12px;background:var(--mdim);color:var(--m);display:flex;align-items:center;justify-content:center}
.m2-f h4{font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin-top:16px}
.m2-f p{font-size:13.5px;color:var(--t2);line-height:1.62;margin-top:8px}

/* Lo que pasa al ganar */
.m2-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin-top:44px;position:relative;z-index:1}
.m2-node{background:#15151B;border:1px solid #282830;border-radius:18px;padding:20px 18px;min-height:150px}
.m2-node .n{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:color-mix(in srgb,var(--m) 70%,#fff)}
.m2-node b{display:block;font-size:17px;font-weight:800;margin-top:8px;color:#F1F0F5}
.m2-node span{display:block;font-size:12.5px;color:#9C9BAA;line-height:1.55;margin-top:8px}
.m2-node.won{border-color:var(--msoft);background:linear-gradient(160deg,var(--mdim),#15151B 70%)}
.m2-link{width:34px;height:2px;background:repeating-linear-gradient(90deg,var(--m) 0 6px,transparent 6px 11px);background-size:22px 2px;animation:m2dash 1s linear infinite}
@keyframes m2dash{to{background-position:22px 0}}
@media(max-width:980px){.m2-flow{grid-template-columns:1fr}.m2-link{width:2px;height:24px;justify-self:center;background:repeating-linear-gradient(180deg,var(--m) 0 6px,transparent 6px 11px);background-size:2px 22px}}

/* Aparición al hacer scroll */
.m2-up{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.m2-up.m2-seen{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .m2-strip .track,.m2-link,.m2-steps button i{animation:none!important}
  .m2-up{opacity:1;transform:none;transition:none}
  .m2-card,.m2-pane{transition:none}
}