/* ============ COTA · TOKENS ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Outfit reemplaza a Manrope + DM Sans. Es geométrica, como pide la guía
     mientras All Round Gothic no esté comprada, y trae cifras tabulares:
     Poppins no las tiene y dos montos de igual largo llegaban a diferir 69,6
     px, con las columnas de plata y los contadores animados bailando. */
  --font:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bg:#FBFBFD;--surface:#FFFFFF;--tint:#F4F5FA;--tint-2:#EDEFF7;
  --line:#E7E8F0;--line-2:#D8DAE6;
  --ink:#0E1226;--ink-2:#585F77;--ink-3:#646A7E;
  /* Azul Cota. Misma rampa que el producto (src/styles/tokens.css): el -600 es
     el #0068FF exacto de la guía y los demás existen para lo que el azul crudo
     no puede hacer. El crudo como TEXTO rinde 4.36 sobre --tint y 4.13 sobre
     --tint-2: reprueba AA. Por eso el texto azul usa --brand-700 (6.42) y el
     --brand queda para rellenos, botones y trazos, donde el contraste lo pone
     el blanco encima. Sobre oscuro manda --brand-400 (6.31 sobre --deep). */
  --brand:#0068FF;--brand-700:#0252C4;--brand-400:#579BFF;--brand-100:#DBEAFF;--brand-50:#EDF4FF;
  --deep:#071A2D;--deep-2:#0E2942;
  --ok:#0E9D6E;--ok-bg:#E6F6F0;--ok-ink:#0A6B4C;
  --warn:#D98A21;--warn-bg:#FBF0DE;--warn-ink:#8A5710;
  --bad:#D9453F;--bad-bg:#FCEAE9;--bad-ink:#93302C;
  --r-sm:8px;--r:12px;--r-lg:18px;--r-xl:26px;
  --sh-1:0 1px 2px rgba(14,18,38,.04),0 4px 12px -4px rgba(14,18,38,.06);
  --sh-2:0 2px 4px rgba(14,18,38,.04),0 12px 28px -10px rgba(14,18,38,.12);
  --sh-3:0 40px 90px -28px rgba(14,18,38,.30),0 8px 24px -12px rgba(14,18,38,.12);
  --sh-ind:0 18px 40px -16px rgba(0,104,255,.35);
  --e:cubic-bezier(.22,.61,.36,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--brand-700);text-decoration:none;transition:color .2s var(--e)}
a:hover{color:var(--brand-700)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap-sm{max-width:780px;margin:0 auto;padding:0 28px}
section{padding:72px 0;position:relative}
/* Sección que continúa a la de arriba en vez de abrir un tema nuevo: no
   necesita el respiro completo entre las dos. */
.sec-sigue{padding-top:8px}

/* ============ TYPE ============ */
.display,h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.04;color:var(--ink)}
h1.hero{font-size:clamp(40px,6.4vw,78px)}
/* `h1.h2` va junto al `h2.h2`: el encabezado de /precio y /modulos pasó a ser
   h1 (esas dos páginas no tenían ninguno) pero conserva la clase, porque el
   tamaño lo da la clase y no el nivel. Se suma el selector en vez de bajarlo a
   `.h2` para no tocar la especificidad de lo que ya estaba. */
h2.h2,h1.h2{font-size:clamp(30px,4vw,50px);line-height:1.06}
h3.h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink-2);line-height:1.55;font-weight:400}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700)}
.eyebrow::before{content:'';width:16px;height:1px;background:var(--brand);opacity:.5}
.eyebrow.on-dark{color:var(--brand-400)}
.eyebrow.on-dark::before{background:var(--brand-400)}
.center{text-align:center}
.sec-head{max-width:720px;margin:0 auto 64px}
.sec-head.center{text-align:center}
.sec-head h2,.sec-head h1{margin-top:18px}
.sec-head .lede{margin-top:20px}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;font-size:15px;font-weight:500;font-family:inherit;white-space:nowrap;transition:transform .25s var(--e),background .2s var(--e),box-shadow .3s var(--e),color .2s var(--e)}
.btn-pri{background:var(--brand);color:#fff;box-shadow:var(--sh-ind)}
.btn-pri:hover{background:var(--brand-700);color:#fff;transform:translateY(-1px);box-shadow:0 22px 48px -16px rgba(0,104,255,.5)}
.btn-sec{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.btn-sec:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}
.btn-ghost-d{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
/* Botón sólido para fondo oscuro. Existe porque en la home hay cinco botones
   azules idénticos ("pedir una demo") y uno más se perdía entre ellos: el
   blanco separa "ir a ver el precio" de "dejar tus datos". Texto en --deep y
   no en negro puro, que sobre blanco resulta duro. */
.btn-claro{background:#fff;color:var(--deep);box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
/* La flecha que se corre es el mismo gesto que ya usa .btn-txt en el resto de
   la página, así que el hover se siente conocido y no inventado. El anillo va
   en blanco translúcido —no azul— para no pelear con los cinco botones azules
   que hay alrededor. */
.btn-social svg{width:17px;height:17px;flex-shrink:0}
.btn-social:hover svg{color:var(--brand)}
.foot-cta{flex-wrap:wrap}
.btn-claro svg{width:17px;height:17px;flex-shrink:0;transition:transform .28s var(--e)}
.btn-claro:hover{background:#fff;color:var(--deep);transform:translateY(-2px);
  box-shadow:0 20px 46px -14px rgba(0,0,0,.62),0 0 0 5px rgba(255,255,255,.13)}
.btn-claro:hover svg{transform:translateX(4px)}
.btn-claro:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn-ghost-d:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-lg{padding:16px 32px;font-size:16px}
.btn-txt{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;color:var(--brand-700)}
.btn-txt svg{transition:transform .25s var(--e)}
.btn-txt:hover svg{transform:translateX(3px)}

/* ============ BADGES ============ */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.tag-ok{background:var(--ok-bg);color:var(--ok-ink)}
.tag-warn{background:var(--warn-bg);color:var(--warn-ink)}
.tag-bad{background:var(--bad-bg);color:var(--bad-ink)}
.tag-ind{background:var(--brand-50);color:var(--brand-700)}
.tag-mute{background:var(--tint-2);color:var(--ink-2)}
.pulse{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;flex-shrink:0}
.pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:currentColor;opacity:.35;animation:ping 1.9s var(--e) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.35}100%{transform:scale(2.4);opacity:0}}

/* ============ SCROLL PROGRESS + NAV ============ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--brand-400),var(--brand));z-index:120;transition:width .1s linear}
.nav{position:sticky;top:0;z-index:110;height:64px;background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);transition:box-shadow .3s var(--e),background .3s var(--e)}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 6px 24px -14px rgba(14,18,38,.18)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{width:29px;height:29px;border-radius:9px;background:var(--brand);display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(0,104,255,.7);flex-shrink:0}
.brand-mark svg{width:15px;height:15px}
.brand-name{font-weight:700;font-size:19px;letter-spacing:-.02em}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{position:relative;padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s var(--e),background .2s var(--e)}
.nav-links a:hover{color:var(--ink);background:var(--tint-2)}
.nav-links a.active{color:var(--brand-700);background:var(--brand-50)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-right .btn{padding:9px 18px;font-size:14px}
.burger{display:none;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;color:var(--ink)}
.burger:hover{background:var(--tint-2)}
.burger svg{width:20px;height:20px}
.mmenu{display:none}
@media (max-width:980px){
  .nav-links,.nav-right .btn-sec{display:none}
  .burger{display:flex}
  .mmenu{display:block;position:fixed;top:64px;left:0;right:0;background:rgba(251,251,253,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:12px 20px 22px;transform:translateY(-120%);transition:transform .38s var(--e);z-index:105}
  .mmenu.open{transform:translateY(0)}
  .mmenu a{display:block;padding:14px 6px;font-size:17px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
  .mmenu .btn{width:100%;margin-top:16px}
}

/* ============ HERO ============ */
.hero{padding:88px 0 0;text-align:center;position:relative;overflow:hidden}
.aurora{position:absolute;inset:-20% -10% auto;height:760px;z-index:0;pointer-events:none;filter:blur(10px)}
.aurora i{position:absolute;border-radius:50%;display:block;opacity:.5;mix-blend-mode:multiply}
.aurora i:nth-child(1){width:620px;height:620px;left:8%;top:-140px;background:radial-gradient(circle at 40% 40%,rgba(129,140,248,.34),transparent 66%);animation:drift1 22s ease-in-out infinite}
.aurora i:nth-child(2){width:560px;height:560px;right:6%;top:-90px;background:radial-gradient(circle at 50% 50%,rgba(0,104,255,.22),transparent 65%);animation:drift2 27s ease-in-out infinite}
.aurora i:nth-child(3){width:480px;height:480px;left:38%;top:170px;background:radial-gradient(circle at 50% 50%,rgba(14,157,110,.13),transparent 66%);animation:drift3 31s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(60px,40px,0) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-70px,52px,0) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-46px,0) scale(1.06)}}
.hero-in{position:relative;z-index:1}
.hero h1{max-width:940px;margin:22px auto 0}
.hero h1 em{font-style:normal;display:inline-block;padding-bottom:.1em;margin-bottom:-.1em;background:linear-gradient(96deg,var(--brand) 12%,var(--brand-400));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{max-width:600px;margin:24px auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-size:13.5px;color:var(--ink-3);display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note svg{width:13px;height:13px;color:var(--ok)}
.caption{margin-top:16px;font-size:13px;color:var(--ink-3);text-align:center}

/* ============ APP WINDOW MOCKUP ============ */
.app-shell{max-width:1080px;margin:64px auto 0;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-3);border:1px solid var(--line);overflow:hidden;position:relative;animation:levitate 7s ease-in-out infinite}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.chrome{height:40px;background:var(--tint);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:8px}
.chrome .dots{display:flex;gap:6px}
.chrome .dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block}
.chrome .url{margin:0 auto;font-size:11.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 14px;letter-spacing:.01em}
.app{display:grid;grid-template-columns:212px 1fr;height:620px;overflow:hidden}
.side{background:var(--tint);border-right:1px solid var(--line);padding:16px 10px;overflow:hidden}
.side-obra{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;box-shadow:var(--sh-1)}
.side-obra .av{width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.side-obra .t{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.side-obra .s{display:block;font-size:10px;color:var(--ink-3)}
.nav-group{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:14px 10px 5px}
.mod{width:100%;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--ink-2);text-align:left;letter-spacing:-.01em;transition:background .18s var(--e),color .18s var(--e)}
.mod svg{width:15px;height:15px;flex-shrink:0;opacity:.75}
.mod:hover{background:var(--tint-2);color:var(--ink)}
.mod.on{background:var(--surface);color:var(--brand-700);box-shadow:var(--sh-1);font-weight:600}
.mod.on svg{opacity:1}
.mod.soon{opacity:.5;cursor:default}
.mod.soon:hover{background:transparent;color:var(--ink-2)}
.mod .soon-tag{margin-left:auto;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brand-50);color:var(--brand-700);padding:2px 5px;border-radius:4px}
.panel{padding:22px 24px;background:var(--surface);transition:opacity .22s var(--e),transform .22s var(--e);text-align:left;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.panel > *{flex-shrink:0}
.panel.swap{opacity:0;transform:translateY(6px)}
.tip{position:absolute;left:224px;top:190px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;padding:8px 13px;border-radius:9px;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--e),transform .3s var(--e);pointer-events:none;z-index:6;box-shadow:var(--sh-2)}
.tip::before{content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:var(--ink);border-radius:2px}
.tip.on{opacity:1;transform:translateX(0)}

/* panel internals */
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.p-crumb{font-size:10.5px;color:var(--ink-3);letter-spacing:.02em}
.p-title{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-top:2px}
.p-sub{font-size:11.5px;color:var(--ink-2);margin-top:3px}
.p-acts{display:flex;gap:6px;flex-wrap:wrap}
.mini{font-size:11px;font-weight:600;padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);letter-spacing:-.01em}
.mini.ind{background:var(--brand);border-color:var(--brand);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh-1);min-width:0}
.kpi .k{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-size:23px;font-weight:700;letter-spacing:-.03em;margin-top:5px;line-height:1;font-variant-numeric:tabular-nums}
.kpi .m{font-size:10.5px;color:var(--ink-3);margin-top:5px}
.kpi.ok .v{color:var(--ok-ink)}
.bar{height:5px;background:var(--tint-2);border-radius:999px;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);transition:width 1.5s var(--e)}
.bar i.g{background:var(--ok)}.bar i.a{background:var(--warn)}
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:12px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-1)}
.box-h{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.box-h em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-3);font-size:10.5px}
.prow{display:grid;grid-template-columns:1.5fr 1fr 76px;align-items:center;gap:10px;padding:7px 0;font-size:12px;opacity:0;transform:translateY(6px);transition:opacity .5s var(--e),transform .5s var(--e)}
.prow.in{opacity:1;transform:translateY(0)}
.prow .n{font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .st{font-size:10px;font-weight:600;text-align:right;color:var(--ink-3)}
.prow .st.g{color:var(--ok-ink)}.prow .st.a{color:var(--warn-ink)}
.prow.flag{background:var(--warn-bg);margin:0 -8px;padding:7px 8px;border-radius:8px}
.note{border-radius:10px;padding:11px 12px;margin-bottom:8px;font-size:11.5px;border-left:3px solid;opacity:0;transform:translateX(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.note.in{opacity:1;transform:translateX(0)}
.note:last-child{margin-bottom:0}
.note.r{background:var(--bad-bg);border-color:var(--bad)}
.note.a{background:var(--warn-bg);border-color:var(--warn)}
.note.g{background:var(--ok-bg);border-color:var(--ok)}
.note .t{font-weight:600;margin-bottom:2px;letter-spacing:-.01em}
.note .s{color:var(--ink-2);font-size:11px;line-height:1.5}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.tbl{width:100%;border-collapse:collapse;font-size:11.5px;background:var(--surface);min-width:520px}
.tbl th{background:var(--tint);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.flag{background:var(--warn-bg)}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tbl .dim{color:var(--ink-3)}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:var(--tint);border-top:1px solid var(--line);font-size:11px;color:var(--ink-2);flex-wrap:wrap}
.tbl-foot strong{color:var(--ink);font-variant-numeric:tabular-nums}
.stack{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--tint-2)}
.stack i{display:block;height:100%;width:0;transition:width 1.1s var(--e)}
.stack .s1{background:var(--ok)}.stack .s2{background:var(--brand)}.stack .s3{background:var(--warn)}.stack .s4{background:var(--line-2)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--ink-2);margin-top:11px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:3px;display:inline-block}
.legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.ratios{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.ratio{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .45s var(--e),transform .45s var(--e)}
.ratio.in{opacity:1;transform:none}
.ratio .top{display:flex;justify-content:space-between;align-items:center}
.ratio .k{font-size:10px;color:var(--ink-3);font-weight:500}
.ratio .d{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.ratio.w .d{background:var(--warn)}
.ratio .v{font-size:19px;font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums}
.ratio .s{font-size:9.5px;color:var(--ink-3);margin-top:4px;line-height:1.35}
.ai{background:linear-gradient(180deg,var(--brand-50),var(--surface));border:1px solid var(--brand-100);border-radius:var(--r);padding:13px 15px;margin-top:12px}
.ai-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.ai-h .l{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--brand-700);letter-spacing:.01em}
.ai-h .l svg{width:13px;height:13px}
.ai-h .r{font-size:10px;color:var(--ink-3)}
.ai-b{font-size:11.5px;color:var(--ink);line-height:1.6;min-height:52px}
.ai-b::after{content:'';display:inline-block;width:2px;height:11px;background:var(--brand);margin-left:2px;vertical-align:-1px;animation:blink 1s steps(2) infinite}
.ai-b.done::after{display:none}
@keyframes blink{50%{opacity:0}}
.log{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;margin-top:12px;box-shadow:var(--sh-1)}
.log-h{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.log-l{display:flex;flex-direction:column;gap:4px;position:relative}
.log-l::before{content:'';position:absolute;left:10px;top:8px;bottom:8px;width:1px;background:var(--line)}
.lrow{display:flex;gap:11px;align-items:flex-start;padding:6px 8px;border-radius:8px;font-size:11.5px;position:relative}
.lrow .i{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;position:relative;z-index:1;box-shadow:0 0 0 3px var(--surface)}
.lrow.ok .i{background:var(--ok)}.lrow.snd .i{background:var(--brand)}
.lrow.edt .i{background:var(--warn)}.lrow.new .i{background:var(--ink-3)}.lrow.bad .i{background:var(--bad)}
.lrow .msg{display:block;font-weight:500;letter-spacing:-.01em}
.lrow .meta{display:block;font-size:10px;color:var(--ink-3);margin-top:1px}
.gantt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-1)}
.g-weeks{display:grid;grid-template-columns:150px repeat(6,1fr);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.g-weeks span:not(:first-child){text-align:center;border-left:1px dashed var(--line)}
.g-rows{position:relative}
.g-now{position:absolute;top:-4px;bottom:0;width:1.5px;background:var(--bad);left:calc(150px + (100% - 150px)*.38);z-index:2}
.g-now::before{content:'HOY';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:700;letter-spacing:.08em;color:var(--bad)}
.g-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:11px}
.g-row:last-child{border-bottom:none}
.g-row .n{display:flex;align-items:center;gap:6px;font-weight:600;font-size:10.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.g-row .n b{margin-left:auto;font-size:9px;font-weight:700;color:var(--ink-3);background:var(--tint-2);padding:1px 6px;border-radius:999px}
.g-track{position:relative;height:16px}
.g-plan{position:absolute;height:5px;top:2px;background:var(--brand-100);border-radius:3px}
.g-real{position:absolute;height:9px;top:8px;border-radius:3px;background:var(--ok);width:0;transition:width 1.1s var(--e)}
.g-real.a{background:var(--warn)}.g-real.r{background:var(--bad)}
.mcard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:10px;padding:12px 14px;margin-bottom:9px;font-size:11.5px;box-shadow:var(--sh-1)}
.mcard:last-child{margin-bottom:0}
.mcard.a{border-left-color:var(--warn)}.mcard.r{border-left-color:var(--bad)}.mcard.m{border-left-color:var(--line-2)}
.mcard .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.mcard .t{font-weight:600;font-size:12.5px;letter-spacing:-.01em}
.mcard .meta{color:var(--ink-3);font-size:10.5px;line-height:1.5}
.mcard .warn{color:var(--bad-ink);font-size:10.5px;font-weight:500;margin-top:5px}
.inline-alert{background:var(--warn-bg);border-left:3px solid var(--warn);border-radius:10px;padding:11px 13px;font-size:11.5px;color:var(--warn-ink);display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}
.inline-alert a{font-weight:600;font-size:11.5px}

/* ============ DASHBOARD MODULE (rich) ============ */
.greet{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.greet .h{font-size:24px;font-weight:700;letter-spacing:-.035em;line-height:1.1}
.greet .s{font-size:11.5px;color:var(--ink-2);margin-top:4px}
.kcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh-1);min-width:0}
.kcard .k{font-size:10px;color:var(--ink-3);font-weight:500;letter-spacing:.01em}
.kcard .mid{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:6px}
.kcard .v{font-size:21px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kcard .f{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-2);margin-top:9px}
.kcard .f i{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.kcard .f.g i{background:var(--ok)}.kcard .f.r i{background:var(--bad)}.kcard .f.a i{background:var(--warn)}
.sparkm{width:74px;height:24px;flex-shrink:0;overflow:visible}
.sparkm path{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:150;stroke-dashoffset:150;transition:stroke-dashoffset 1.3s var(--e)}
.sparkm.on path{stroke-dashoffset:0}
.dash-grid{display:grid;grid-template-columns:1.42fr 1fr;gap:12px;align-items:stretch;flex:1;min-height:0}
.dash-grid > div{display:flex;flex-direction:column;gap:12px;min-height:0}
.dash-grid > div > *{flex-shrink:0}
.acts{overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
.acards{flex:1;min-height:0}
.acard{overflow:hidden}
.dash-grid .box.obras,.dash-grid .box.costs{flex:1;min-height:0;overflow:hidden}
.acts{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-1)}
.acts-h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.acts-h .t{font-size:12.5px;font-weight:700;letter-spacing:-.015em}
.acts-h a{margin-left:auto;font-size:10.5px;font-weight:600}
.acards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acard{border-radius:var(--r);padding:13px;border:1px solid;opacity:0;transform:translateY(10px);transition:opacity .6s var(--e),transform .6s var(--e)}
.acard.in{opacity:1;transform:none}
.acard.crit{background:var(--bad-bg);border-color:rgba(217,69,63,.28)}
.acard.warn{background:var(--warn-bg);border-color:rgba(217,138,33,.3)}
.acard .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.acard .lvl{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.acard .lvl i{width:6px;height:6px;border-radius:50%}
.acard.crit .lvl{color:var(--bad-ink)}.acard.crit .lvl i{background:var(--bad)}
.acard.warn .lvl{color:var(--warn-ink)}.acard.warn .lvl i{background:var(--warn)}
.acard .when{font-size:9.5px;color:var(--ink-3)}
.acard .ttl{font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.acard .meta{font-size:10.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.acard .body{font-size:10.5px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.rec{background:rgba(255,255,255,.72);border-radius:9px;padding:9px 11px;margin-top:10px}
.rec .l{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-700);margin-bottom:3px}
.rec .x{font-size:10.5px;color:var(--ink);line-height:1.45}
.rec .x b{font-weight:700}
.acard .cta{width:100%;margin-top:10px;background:var(--ink);color:#fff;border-radius:9px;padding:9px;font-size:11.5px;font-weight:600;transition:background .2s var(--e)}
.acard .cta:hover{background:var(--brand)}
.pend .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(6px);transition:opacity .5s var(--e),transform .5s var(--e)}
.pend .row.in{opacity:1;transform:none}
.pend .row:last-child{border-bottom:none}
.pend .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pend .dot.r{background:var(--bad)}.pend .dot.a{background:var(--warn)}
.pend .tx{min-width:0;flex:1}
.pend .t1{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.pend .t2{display:block;font-size:10px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pend .btn-mini{flex-shrink:0;font-size:10.5px;font-weight:600;padding:5px 11px;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);background:var(--surface)}
.pend .btn-mini:hover{border-color:var(--brand);color:var(--brand-700)}
.cash{background:linear-gradient(160deg,var(--brand) 0%,#5B54EA 55%,#6D66F0 100%);border-radius:var(--r-lg);padding:16px 18px;color:#fff;box-shadow:var(--sh-ind)}
.cash .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cash .t{font-size:12.5px;font-weight:700;letter-spacing:-.015em}
.cash .badge{font-size:9.5px;font-weight:700;letter-spacing:.05em;background:rgba(255,255,255,.2);padding:3px 8px;border-radius:999px}
.cash .sub{font-size:10px;color:rgba(255,255,255,.72);margin-top:12px}
.cash .big{font-size:31px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums}
.cash svg{width:100%;height:44px;margin-top:10px;overflow:visible}
.cash svg path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.8s var(--e)}
.cash svg.on path{stroke-dashoffset:0}
.cash .axis{display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.6);letter-spacing:.04em;margin-top:2px}
.cash .note{font-size:10px;color:rgba(255,255,255,.78);line-height:1.5;margin-top:11px}
.cash .go{width:100%;margin-top:11px;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;padding:9px;font-size:11.5px;font-weight:600;transition:background .2s var(--e)}
.cash .go:hover{background:rgba(255,255,255,.28)}
.costs .cr{margin-bottom:11px}
.costs .cr:last-child{margin-bottom:0}
.costs .cr .l{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px}
.costs .cr .l span{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.costs .cr .l i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.costs .cr .l b{font-weight:700;font-variant-numeric:tabular-nums}
.costs .cr .sub{font-size:9.5px;color:var(--ink-3);margin-top:4px}
.obras .or{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.obras .or:last-child{margin-bottom:0}
.obras .or .l{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px}
.obras .or .l b{font-weight:700;font-variant-numeric:tabular-nums}
.obras .or .l b.g{color:var(--ok-ink)}.obras .or .l b.a{color:var(--warn-ink)}.obras .or .l b.r{color:var(--bad-ink)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}
.photo{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:repeating-linear-gradient(135deg,var(--tint) 0 7px,var(--tint-2) 7px 14px);aspect-ratio:4/3;display:grid;place-items:center;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
@media (max-width:1080px){.kcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.greet .h{font-size:20px}.kcards{grid-template-columns:1fr 1fr}.sparkm{display:none}.dash-grid{grid-template-columns:1fr}.acards{grid-template-columns:1fr}}

/* ============ DARK SECTION (PROBLEMA) ============ */
.dark{background:var(--deep);color:#fff;overflow:hidden}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lede{color:rgba(255,255,255,.66)}
.dark-mesh{position:absolute;inset:0;opacity:.55;pointer-events:none}
.dark-mesh i{position:absolute;border-radius:50%;display:block}
.dark-mesh i:nth-child(1){width:640px;height:640px;left:-8%;top:-24%;background:radial-gradient(circle,rgba(0,104,255,.5),transparent 62%);animation:drift1 24s ease-in-out infinite}
.dark-mesh i:nth-child(2){width:560px;height:560px;right:-6%;bottom:-28%;background:radial-gradient(circle,rgba(129,140,248,.3),transparent 64%);animation:drift2 29s ease-in-out infinite}
.dark .wrap{position:relative;z-index:1}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.pain{background:rgba(255,255,255,.055);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:30px 26px;transition:transform .4s var(--e),background .4s var(--e)}
.pain:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.pain .n{font-size:46px;font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.pain p{font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.6;margin-top:14px}
/* ---- problemas comunes ---- */
.suena{margin-top:0}
.suena-cierre{margin-top:44px;text-align:center}
.suena-h{font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#fff}
.suena-cta{margin-top:12px;font-size:16.5px;color:rgba(255,255,255,.62)}
.suena-cta b{font-weight:600;color:var(--brand-400)}
.suena-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sn{display:flex;flex-direction:column;gap:12px;padding:20px 18px;border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:opacity .6s var(--e),transform .6s var(--e)}
.sn-h{display:flex;align-items:center;gap:9px}
.sn i{width:32px;height:32px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:rgba(247,144,9,.16);border:1px solid rgba(247,144,9,.18);color:#FEC84B}
.sn i svg{width:17px;height:17px;stroke-width:1.8}
.sn .chip{font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1.2;border-radius:999px;padding:3px 9px;color:#FEC84B;background:rgba(247,144,9,.15)}
.sn p{font-size:14px;line-height:1.45;color:rgba(255,255,255,.70)}
@media(max-width:980px){.suena-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.suena-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:640px){.suena-grid{grid-template-columns:1fr;gap:8px}
  .sn{gap:9px;padding:15px 16px}
  .sn p{font-size:14.5px}}

/* ---- cifras del problema (CNP 2020) ---- */
.cifras{margin-top:64px;padding-top:44px;border-top:1px solid rgba(255,255,255,.10)}
.cifras-lead{text-align:center;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.55)}
.cifras-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.cifra{display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:var(--r-lg);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.cifra b{display:block;font-size:clamp(44px,5.4vw,62px);font-weight:600;letter-spacing:-.04em;line-height:1;color:#FDA29B}
.cifra p{margin-top:14px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.74)}
.cifra p strong{font-weight:600;color:#fff}
.cifra span{display:block;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(255,255,255,.45)}
.cifra span.plata{color:rgba(255,255,255,.72)}
.cifra span.plata strong{font-weight:600;color:#FDA29B}
.cifras-macro{max-width:760px;margin:30px auto 0;text-align:center;font-size:16px;line-height:1.55;color:rgba(255,255,255,.68)}
.cifras-macro b{font-weight:600;color:#fff}
.cifras-src{margin-top:22px;text-align:center;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.38)}
.cifras-src i{font-style:italic}
@media(max-width:820px){.cifras-grid{grid-template-columns:1fr;gap:12px}
  .cifra{display:grid !important;grid-template-columns:auto 1fr;gap:0 20px;align-items:baseline;padding:22px}
  .cifra b{font-size:44px}
  .cifra p{margin-top:0}
  .cifra span{grid-column:2}}

.quote-big{max-width:660px;margin:64px auto 0;text-align:center;font-size:clamp(21px,2.6vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.35;color:#fff}
.quote-big span{color:var(--brand-400)}

/* ============ FLOW / PIPELINE ============ */
.flow{max-width:1000px;margin:0 auto}
.flow-svg{width:100%;height:auto;overflow:visible}
.flow-svg .track{stroke:var(--line-2);stroke-width:2;fill:none;stroke-linecap:round}
.flow-svg .live{stroke:var(--brand);stroke-width:2;fill:none;stroke-dasharray:920;stroke-dashoffset:920;stroke-linecap:round;transition:stroke-dashoffset 2.4s var(--e)}
.flow-svg.in .live{stroke-dashoffset:0}
.flow-svg .nd{transform:scale(0);transform-origin:center;transform-box:fill-box;transition:transform .6s cubic-bezier(.34,1.5,.5,1)}
.flow-svg.in .nd{transform:scale(1)}
.flow-svg .lab{font-size:12px;font-weight:700;fill:var(--ink);letter-spacing:-.01em;opacity:0;transition:opacity .5s .35s var(--e)}
.flow-svg .sub{font-size:10px;fill:var(--ink-3);opacity:0;transition:opacity .5s .35s var(--e)}
.flow-svg.in .lab,.flow-svg.in .sub{opacity:1}
.flow-svg .car{fill:var(--brand);opacity:0}
.flow-svg.in .car{opacity:1;animation:ride 4.6s linear infinite}
@keyframes ride{0%{transform:translateX(0)}100%{transform:translateX(880px)}}
.flow-list{display:none}
.flow-note{max-width:620px;margin:34px auto 0;text-align:center;color:var(--ink-2);font-size:16px}

/* ============ FEATURE 2-COL ============ */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.duo.flip{grid-template-columns:1.1fr .9fr}
.duo.flip .duo-vis{order:-1}
.duo h2{margin-top:18px}
.duo .lede{margin-top:20px}
.checks{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:13px}
.checks li{display:flex;gap:12px;font-size:15.5px;line-height:1.45;color:var(--ink)}
.checks .c{width:20px;height:20px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.checks .c svg{width:11px;height:11px}
.ba{display:grid;gap:12px;margin-top:26px}
.ba-c{border-radius:var(--r-lg);padding:18px 20px;font-size:15px;line-height:1.55}
.ba-c .h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px}
.ba-c.before{background:var(--tint);border:1px solid var(--line);color:var(--ink-2)}
.ba-c.before .h{color:var(--ink-3)}
.ba-c.after{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700)}
.ba-c.after .h{color:var(--brand-700)}
.card-vis{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-2)}

/* sparkline */
.spark-card{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.spark-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.spark-head .l{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.spark-head .v{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.spark{width:100%;height:78px;overflow:visible}
/* el trazo y el área solo se esconden si el script va a dibujarlos: sin JS la
   sección mostraba el gráfico vacío, con la línea punteada de referencia y
   nada encima */
.spark .area{fill:url(#sparkFill);transition:opacity .8s .7s var(--e)}
.js-on .spark .area{opacity:0}
.spark .ln{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.8s var(--e)}
.js-on .spark .ln{stroke-dasharray:900;stroke-dashoffset:900}
.spark .ln2{fill:none;stroke:var(--line-2);stroke-width:1.6;stroke-dasharray:4 4}
.spark .pt{fill:var(--surface);stroke:var(--brand);stroke-width:2;transition:opacity .4s 1.4s var(--e)}
.js-on .spark .pt{opacity:0}
.spark.in .ln{stroke-dashoffset:0}
.spark.in .area,.spark.in .pt{opacity:1}

/* ============ STEPS (BODEGA) ============ */
.steps{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--surface);opacity:0;transform:translateY(10px);transition:opacity .55s var(--e),transform .55s var(--e),background .5s var(--e),border-color .5s var(--e)}
.step.in{opacity:1;transform:none}
.step.done{background:var(--ok-bg);border-color:rgba(14,157,110,.35)}
.step .h{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.step .num{width:24px;height:24px;border-radius:50%;background:var(--tint-2);color:var(--ink-3);display:grid;place-items:center;font-size:11.5px;font-weight:700;flex-shrink:0;transition:background .4s var(--e),color .4s var(--e)}
.step.done .num{background:var(--ok);color:#fff}
.step .d{font-size:13px;color:var(--ink-2);line-height:1.55;padding-left:35px;margin-top:5px}
.step .row{display:flex;align-items:center;gap:8px;padding-left:35px;margin-top:7px;font-size:12px}
.spin{width:13px;height:13px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ ALERTS LOOP ============ */
.alerts{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-2);min-height:392px}
.alerts-h{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;margin-bottom:16px;letter-spacing:-.01em}
.alerts-h .live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-ink)}
.alerts-l{display:flex;flex-direction:column;gap:11px;min-height:300px}
.al{border-radius:var(--r);padding:15px 16px;border-left:4px solid;opacity:0;transform:translateX(26px);transition:opacity .55s var(--e),transform .55s var(--e);position:relative;overflow:hidden}
.al.in{opacity:1;transform:none}
.al.out{opacity:0;transform:translateX(-18px)}
.al.r{background:var(--bad-bg);border-color:var(--bad)}
.al.a{background:var(--warn-bg);border-color:var(--warn)}
.al.g{background:var(--ok-bg);border-color:var(--ok)}
.al .t{font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.al .t i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.al.r .t i{background:var(--bad)}.al.a .t i{background:var(--warn)}.al.g .t i{background:var(--ok)}
.al .d{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:5px;padding-left:17px}
.al .h{font-size:10.5px;color:var(--ink-3);margin-top:7px;padding-left:17px;letter-spacing:.02em}
.al .ring{position:absolute;top:14px;right:14px;width:20px;height:20px;transform:rotate(-90deg)}
.al .ring circle{fill:none;stroke-width:2;r:8;cx:10;cy:10}
.al .ring .bgc{stroke:rgba(14,18,38,.1)}
.al .ring .fg{stroke:currentColor;stroke-dasharray:50.3;stroke-dashoffset:0;transition:stroke-dashoffset 7.4s linear}
.al.in .ring .fg{stroke-dashoffset:50.3}
.al.r .ring{color:var(--bad)}.al.a .ring{color:var(--warn)}.al.g .ring{color:var(--ok)}

/* ============ TRAZABILIDAD ============ */
.trace{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.trace-h{padding:20px 24px;background:var(--tint);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.trace-h .t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.trace-h .s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.tl{padding:16px 24px;display:flex;flex-direction:column;gap:6px;position:relative}
.tl::before{content:'';position:absolute;left:38px;top:26px;bottom:26px;width:1px;background:var(--line)}
.tr{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center;padding:11px 12px;border-radius:var(--r);font-size:13.5px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--e),transform .5s var(--e)}
.tr.in{opacity:1;transform:none}
/* el glifo pasó a SVG: mismo vocabulario que las pastillas del bento, para
   que la sección grande y el mosaico se lean como el mismo sistema */
.tr .i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;position:relative;z-index:1;box-shadow:0 0 0 4px var(--surface)}
.tr .i svg{display:block;width:14px;height:14px}
.tr .msg{display:block;font-weight:500;letter-spacing:-.01em}
.tr .meta{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tr .hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--ink-3);background:var(--tint);padding:4px 8px;border-radius:6px;white-space:nowrap}
.tr.ok{background:var(--ok-bg)}.tr.ok .i{background:var(--ok)}
.tr.snd{background:var(--brand-50)}.tr.snd .i{background:var(--brand)}
.tr.edt{background:var(--warn-bg)}.tr.edt .i{background:var(--warn)}
.tr.sys{background:var(--bad-bg)}.tr.sys .i{background:var(--bad)}
.tr.ia{background:linear-gradient(90deg,var(--brand-50),var(--surface))}.tr.ia .i{background:var(--brand-700)}
.tr.new{background:var(--tint)}.tr.new .i{background:var(--ink-3)}
.trace-f{padding:16px 24px;border-top:1px solid var(--line);background:var(--tint);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}

/* ============ QR ============ */
.qr-card{max-width:560px;margin:44px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-2);display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;text-align:left}
.qr{width:150px;height:150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.qr rect.m{opacity:0;transition:opacity .4s var(--e)}
.qr.in rect.m{opacity:1}
.qr-meta .ok{display:inline-flex;align-items:center;gap:7px;background:var(--ok-bg);color:var(--ok-ink);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;margin-bottom:12px}
.qr-meta .ok svg{width:12px;height:12px}
.qr-meta h4{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.qr-meta p{font-size:12.5px;color:var(--ink-3);line-height:1.6;font-variant-numeric:tabular-nums}

/* ============ MODULES ============ */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mods-t{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 -2px}
.mods-t:first-child{margin-top:0}
.mcell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.mcell:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.mcell .ic{width:32px;height:32px;border-radius:10px;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;margin-bottom:14px}
.mcell .ic svg{width:16px;height:16px}
.mcell.soon .ic{background:var(--tint-2);color:var(--ink-3)}
.mcell .nm{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.mcell .ds{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.mcell .tag{margin-top:12px}
.marquee{margin-top:64px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-t{display:flex;gap:12px;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);white-space:nowrap;box-shadow:var(--sh-1)}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0}

/* ============ COMPARE ============ */
.cmp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:16px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp th{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--tint)}
.cmp th.us{color:var(--brand-700);background:var(--brand-50);border-top:3px solid var(--brand)}
/* La columna de Cota se firma con la marca en vez del nombre escrito. El
   wordmark toma su color por custom property, así que acá se pinta en el
   mismo azul que tenía el texto de la cabecera. */
/* El archivo del diseñador tal cual, como <img>. No se escribe "Cota" con la
   tipografía de la página: la palabra del logo es All Round Gothic, que no
   está licenciada y solo existe convertida a trazos dentro del SVG. A 21 px
   se lee bien; más chico los trazos de las letras caen bajo el píxel. */
.cmp .cmp-logo{height:21px;width:auto;display:block}
.cmp td.us{background:var(--brand-50);font-weight:600;color:var(--brand-700)}
.cmp tr:last-child td{border-bottom:none}
.cmp .no{color:var(--ink-3)}
.cmp .mid{color:var(--ink-2)}
.cmp td.us span{display:inline-flex;align-items:center;gap:8px}
.cmp td.us svg{width:14px;height:14px;flex-shrink:0}
.cmp td.us path{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .7s var(--e)}
.cmp.in td.us path{stroke-dashoffset:0}
/* ── filas de IA ─────────────────────────────────────────────────────────────
   La insignia y el resaltado marcan lo que solo Cota tiene. La celda de Cota
   sube a --brand-100 para no perder su jerarquía cuando la fila entera se
   tiñe, y la barra va con inset box-shadow y no con border-left, que en una
   tabla con border-collapse desplazaría el texto un píxel. */
.cmp .nw,.cmp-mc .nw{white-space:nowrap}
.cmp .ia,.cmp-mc .ia{display:inline-flex;align-items:center;gap:4px;margin-left:9px;
  padding:3px 9px 3px 7px;border-radius:999px;vertical-align:middle;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;line-height:1.4;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;
  box-shadow:0 2px 9px -2px rgba(0,104,255,.6)}
.cmp .ia svg,.cmp-mc .ia svg{width:11px;height:11px;flex-shrink:0}
.cmp tr.dest td{background:var(--brand-100)}
.cmp tr.dest td.us{background:rgba(0,104,255,.22)}
.cmp tr.dest td:first-child{box-shadow:inset 4px 0 0 var(--brand);font-weight:600}
.cmp-mc.dest{background:var(--brand-50);border-color:var(--brand-100);box-shadow:inset 4px 0 0 var(--brand),var(--sh-1)}

.cmp-m{display:none}

/* ============ ROADMAP ============ */
.road{max-width:760px;margin:0 auto;position:relative;padding-left:30px}
.road::before{content:'';position:absolute;left:5px;top:12px;bottom:12px;width:2px;background:var(--line)}
.road-fill{position:absolute;left:5px;top:12px;width:2px;background:linear-gradient(180deg,var(--brand),var(--brand-400));height:0;transition:height .2s linear}
.ph{position:relative;margin-bottom:34px;opacity:0;transform:translateY(18px);transition:opacity .6s var(--e),transform .6s var(--e)}
.ph.in{opacity:1;transform:none}
.ph:last-child{margin-bottom:0}
.ph .dot{position:absolute;left:-30px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2.5px solid var(--line-2);z-index:1}
.ph.now .dot{border-color:var(--brand);background:var(--brand)}
.ph-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-1)}
.ph.now .ph-card{border-color:var(--brand-100);box-shadow:var(--sh-2)}
.ph .when{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.ph.now .when{color:var(--brand-700)}
.ph h3{font-size:20px;font-weight:700;letter-spacing:-.025em;margin:9px 0 8px}
.ph p{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ============ TEAM ============ */
.team{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin:0 auto}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 32px;box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tcard .top{display:flex;align-items:center;gap:16px}
.tcard .av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:-.02em}
.tcard.a .av{background:var(--deep)}
.tcard.b .av{background:var(--brand)}
.tcard .nm{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.tcard .rl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-top:4px}
.tcard.a .rl{color:var(--ink-3)}
.tcard.b .rl{color:var(--brand-700)}
.tcard .pill{align-self:flex-start;margin-top:20px;font-size:12.5px;padding:7px 13px;border-radius:999px;background:var(--tint);border:1px solid var(--line);color:var(--ink-2)}
.tcard blockquote{font-size:16px;line-height:1.6;margin-top:20px;padding-left:16px;border-left:2px solid var(--line-2);color:var(--ink)}
.tcard.b blockquote{border-left-color:var(--brand-100)}
.tcard .bio{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:16px}
.tstats{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:24px;align-items:center}
.tstats .s{flex:1}
.tstats .sv{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tcard.a .sv{color:var(--deep)}.tcard.b .sv{color:var(--brand-700)}
.tstats .sl{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-top:6px;line-height:1.3}
.tstats .div{width:1px;height:40px;background:var(--line)}
.team-foot{text-align:center;margin-top:34px;font-size:13.5px;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:10px}
.team-foot .row{display:inline-flex;align-items:center;gap:9px;color:var(--ok-ink)}

/* ============ TESTIMONIALS ============ */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.qc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:36px;box-shadow:var(--sh-1)}
.qc blockquote{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.5;color:var(--ink)}
.qc .who{display:flex;align-items:center;gap:14px;margin-top:26px}
.qc .av{width:44px;height:44px;border-radius:50%;background:var(--tint-2);color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0}
.qc .nm{font-size:14.5px;font-weight:600}
.qc .rl{font-size:12.5px;color:var(--ink-3)}

/* ============ PRICING ============ */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 30px;display:flex;flex-direction:column;box-shadow:var(--sh-1);position:relative;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.pc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pc.best{border:1px solid var(--brand-100);box-shadow:var(--sh-2);background:linear-gradient(180deg,var(--brand-50) 0%,var(--surface) 40%)}
.pc .best-t{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 15px;border-radius:999px;box-shadow:var(--sh-ind)}
.pc h3{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.pc .amt{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:14px}
.pc .amt small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.pc .for{font-size:13.5px;color:var(--ink-2);margin:12px 0 24px;line-height:1.5}
.pc ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
.pc li{font-size:13.5px;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.pc li svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--brand-700)}
.pc li.off{color:var(--ink-3)}
.pc li.off svg{color:var(--line-2)}
.pc .btn{width:100%}
.price-note{text-align:center;margin-top:30px;font-size:13.5px;color:var(--ink-3)}
.demo-band{max-width:640px;margin:56px auto 0;text-align:center;padding-top:44px;border-top:1px solid var(--line)}
.demo-band p{font-size:16px;color:var(--ink-2);margin-bottom:18px}
.demo-band small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:14px}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px 4px;font-size:17px;font-weight:500;letter-spacing:-.015em;text-align:left;color:var(--ink);transition:color .2s var(--e)}
.faq-q:hover{color:var(--brand-700)}
.faq-ic{width:26px;height:26px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex-shrink:0;transition:transform .35s var(--e),background .3s var(--e)}
.faq-ic svg{width:12px;height:12px;color:var(--ink-2)}
.faq-i.open .faq-ic{transform:rotate(45deg);background:var(--brand-50)}
.faq-i.open .faq-ic svg{color:var(--brand-700)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--e)}
.faq-a p{font-size:15.5px;color:var(--ink-2);line-height:1.7;padding:0 60px 26px 4px}
.faq-i.open .faq-a{max-height:340px}

/* ============ CTA + FOOTER ============ */
.cta{text-align:center;background:radial-gradient(ellipse 70% 60% at 50% 0%,var(--brand-50),var(--bg) 70%)}
.cta h2{max-width:620px;margin:20px auto 0}
.cta .lede{max-width:520px;margin:20px auto 0}
.cta-note{margin-top:20px;font-size:13px;color:var(--ink-3)}
footer{background:var(--deep);color:#fff;padding:76px 0 34px}
.foot{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:44px;margin-bottom:56px}
.foot .brand-name{color:#fff}
.foot .about{font-size:14px;color:rgba(255,255,255,.55);margin-top:16px;line-height:1.6;max-width:270px}
.foot h6{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot a{color:rgba(255,255,255,.7);font-size:14.5px}
.foot a:hover{color:#fff}
.foot-b{padding-top:26px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.42);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============ FLOATING ============ */
.up{position:fixed;bottom:30px;right:30px;width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .3s var(--e),transform .3s var(--e),background .2s var(--e),color .2s var(--e);z-index:95;box-shadow:var(--sh-2);pointer-events:none}
.up.on{opacity:1;transform:none;pointer-events:auto}
.up:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.up svg{width:17px;height:17px}
.wa{position:fixed;bottom:30px;left:30px;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px -10px rgba(37,211,102,.6);z-index:95;transition:transform .25s var(--e)}
.wa:hover{transform:scale(1.07);color:#fff}
.wa svg{width:25px;height:25px}
.wa-tip{position:absolute;left:64px;top:50%;transform:translateY(-50%) translateX(-6px);background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;white-space:nowrap;padding:8px 13px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .25s var(--e),transform .25s var(--e);box-shadow:var(--sh-2)}
.wa-tip::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);width:9px;height:9px;background:var(--ink);border-radius:2px}
.wa:hover .wa-tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e),transform .7s var(--e)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.rv{opacity:1;transform:none}}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .app{grid-template-columns:186px 1fr}
  .duo,.duo.flip{grid-template-columns:1fr;gap:44px}
  .duo .duo-vis,.duo.flip .duo-vis{order:-1}
  .mods{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  section{padding:56px 0}
  .wrap,.wrap-sm{padding:0 20px}
  .sec-head{margin-bottom:44px}
  .pains,.quotes,.team,.prices{grid-template-columns:1fr}
  .prices{max-width:420px;margin:0 auto}
  .foot{grid-template-columns:1fr 1fr;gap:34px}
  /* app mockup → sidebar becomes scroll rail */
  .app-shell{animation:none;border-radius:var(--r-lg);margin-top:40px}
  .app{grid-template-columns:1fr;height:auto;overflow:visible}
  .panel{overflow:visible}
  .side{border-right:none;border-bottom:1px solid var(--line);padding:12px 0 12px 14px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .side::-webkit-scrollbar{display:none}
  .side-obra,.nav-group{display:none}
  .mod{width:auto;flex-shrink:0;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);scroll-snap-align:start;font-size:12px}
  .mod svg,.mod .soon-tag{display:none}
  .mod.soon{display:none}
  .mod.on{border-color:var(--brand-100);background:var(--brand-50)}
  .tip{display:none}
  .panel{padding:16px}
  .cols{grid-template-columns:1fr}
  .g-weeks,.g-row{grid-template-columns:110px 1fr}
  .g-weeks span:nth-child(n+5){display:none}
  .g-now{left:calc(110px + (100% - 110px)*.38)}
  /* flow */
  .flow-svg{display:none}
  .flow-list{display:flex;flex-direction:column;list-style:none;max-width:420px;margin:0 auto}
  .flow-list li{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
  .flow-list li:last-child{border-bottom:none}
  .flow-list .n{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;font-size:15px;font-weight:700}
  .flow-list .t{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .flow-list .s{font-size:12.5px;color:var(--ink-3)}
  /* compare → cards */
  .cmp{display:none}
  .cmp-m{display:flex;flex-direction:column;gap:11px}
  .cmp-mc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh-1)}
  .cmp-mc .t{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
  .cmp-mr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .cmp-mr .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700;margin-bottom:4px}
  .cmp-mr .v{font-size:12px;color:var(--ink-2);line-height:1.35}
  .cmp-mr .v.us{color:var(--brand-700);font-weight:600}
  /* misc */
  .qr-card{grid-template-columns:1fr;text-align:center;justify-items:center;padding:26px}
  .alerts{min-height:0;padding:18px}
  .trace-h,.tl,.trace-f{padding:16px}
  .tr{grid-template-columns:26px 1fr;font-size:12.5px}
  .tr .hash{display:none}
  .tl::before{left:28px}
  .tcard{padding:26px 22px}
  .tstats .sv{font-size:22px}
  .hide-m{display:none}
  .faq-a p{padding-right:12px}
  .up{bottom:18px;right:16px}
  .wa{bottom:18px;left:16px;width:48px;height:48px}
  .wa-tip{display:none}
  .hero{padding:56px 0 0}
  .marquee{margin-top:44px}
}
@media (max-width:520px){
  .kpis{grid-template-columns:1fr 1fr}
  .mods{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .tstats{gap:14px}
}

/* ============================================================
   COTA · SECCIONES NUEVAS (corrección de contenido)
   ============================================================ */

/* ---- Dolores (sección oscura) ---- */
.dolores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px}
.dol{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);padding:24px 26px;opacity:0;transform:translateY(22px);transition:opacity .7s var(--e),transform .7s var(--e)}
.dol.in{opacity:1;transform:none}
.dol .top{display:flex;align-items:center;gap:10px}
.dol .n{font-size:12px;font-weight:700;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.dol .chip{font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:3px 10px;border:0;box-shadow:none}
.dol .chip.w{color:#FEC84B;background:rgba(247,144,9,.15)}
.dol .chip.b{color:#FDA29B;background:rgba(240,68,56,.15)}
.dol .t{margin-top:14px;font-size:18px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.25}
.dol .d{margin-top:8px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.62)}

/* ---- Tesis / lo que hace Cota ---- */
.tesis{margin-top:56px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-lg);padding:32px 36px;box-shadow:var(--sh-1)}
.tesis .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tesis .q{margin-top:14px;font-size:clamp(20px,2.5vw,29px);line-height:1.28;font-weight:600;letter-spacing:-.032em}
.tesis .s{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:620px}

/* ---- Módulos agrupados ---- */
.grupos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:56px}
.grupo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-1)}
.grupo.wide{grid-column:span 2}
.grupo .gh{display:flex;align-items:baseline;gap:10px}
.grupo .gt{font-size:16px;font-weight:600;letter-spacing:-.02em}
.grupo .gc{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.grupo .gl{margin-top:14px}
.gitem{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.gitem:last-child{border-bottom:none;padding-bottom:0}
.gitem .p{width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:9px}
.gitem .nm{font-size:14.5px;font-weight:600;width:184px;flex-shrink:0}
.gitem .ds{font-size:14px;line-height:1.5;color:var(--ink-2);flex:1;min-width:0}
.argumento{margin-top:40px;background:var(--deep);color:#fff;border-radius:var(--r-xl);padding:38px 42px;border-left:3px solid var(--brand-400)}
.argumento .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.argumento .q{margin-top:14px;font-size:clamp(19px,2.4vw,28px);line-height:1.3;font-weight:600;letter-spacing:-.034em;max-width:800px}
.argumento .s{margin-top:14px;font-size:15px;line-height:1.62;color:rgba(255,255,255,.62);max-width:640px}

/* ---- Diferenciadores ---- */
.difs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.dif{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.dif.hero-d{grid-column:span 3;background:var(--deep);color:#fff;border-color:rgba(129,140,248,.35)}
.dif .dh{display:flex;align-items:center;gap:11px}
.dif .ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700)}
.dif.hero-d .ic{background:rgba(129,140,248,.14);border-color:rgba(129,140,248,.3);color:var(--brand-400)}
.dif .ic svg{width:17px;height:17px}
.dif .tg{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--brand-700);background:var(--brand-50);border-radius:6px;padding:4px 9px}
.dif.hero-d .tg{color:var(--brand-400);background:rgba(129,140,248,.14)}
.dif .dt{margin-top:16px;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.026em}
.dif.hero-d .dt{font-size:clamp(20px,2.2vw,26px);max-width:660px;color:#fff}
.dif .dd{margin-top:9px;font-size:14px;line-height:1.58;color:var(--ink-2)}
.dif.hero-d .dd{font-size:15.5px;color:rgba(255,255,255,.68);max-width:660px}
.dif .dp{margin-top:auto;padding-top:15px;display:flex;gap:9px;align-items:flex-start}
.dif .dp::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ok);flex-shrink:0;margin-top:8px}
.dif .dp span{font-size:13px;line-height:1.55;color:var(--ink-3)}
.dif.hero-d .dp span{color:rgba(255,255,255,.5)}
.dif .dp{border-top:1px dashed var(--line-2);margin-top:16px}
.dif.hero-d .dp{border-top-color:rgba(255,255,255,.13)}

/* ---- Qué cambia en tu semana ---- */
.benefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.benef{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.benef .n{font-size:13px;font-weight:700;color:var(--brand-700);letter-spacing:.06em}
.benef .t{margin-top:14px;font-size:18px;line-height:1.28;font-weight:600;letter-spacing:-.025em}
.benef .d{margin-top:10px;font-size:14.5px;line-height:1.58;color:var(--ink-2)}
.benef .ba2{margin-top:auto;padding-top:20px;display:flex;gap:10px;align-items:stretch}
.benef .ba2 > div{flex:1;min-width:0;border-radius:var(--r);padding:11px 13px}
.benef .ba2 .was{background:var(--tint);border:1px solid var(--line)}
.benef .ba2 .now{background:var(--ok-bg);border:1px solid rgba(14,157,110,.2)}
.benef .ba2 .l{font-size:11px;color:var(--ink-3);letter-spacing:.03em}
.benef .ba2 .v{margin-top:3px;font-size:14px;font-weight:600}
/* ── el par antes/ahora ──────────────────────────────────────────────────────
   Centrado y con entrada escalonada: primero el "antes", 160 ms después el
   "ahora", y a los 380 el "ahora" se pone verde, como si el cambio ocurriera
   ahí mismo.

   OJO al verificar: ni el panel del navegador ni Chrome headless avanzan el
   reloj de las transiciones CSS —getAnimations() queda en "running" y el chip
   se dibuja en su fotograma inicial, gris—. Esto solo se comprueba en un
   navegador de verdad; una captura headless va a mentir.

   El estado base es el final (verde), así que sin JS se ve bien: lo neutro
   solo existe bajo .js-on mientras la tarjeta no se ha revelado. */
.benef .ba2 > div{text-align:center}
.benef .ba2 .was,.benef .ba2 .now{
  transition:opacity .5s var(--e),transform .5s var(--e),
             background-color .5s .38s var(--e),border-color .5s .38s var(--e)}
.benef .ba2 .now{transition-delay:.16s,.16s,.38s,.38s}
.benef .ba2 .now .v{transition:color .5s .38s var(--e)}
.js-on .benef:not(.in) .ba2 .was,.js-on .benef:not(.in) .ba2 .now{
  opacity:0;transform:translateY(9px)}
.js-on .benef:not(.in) .ba2 .now{background:var(--tint);border-color:var(--line)}
.js-on .benef:not(.in) .ba2 .now .v{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .js-on .benef:not(.in) .ba2 .was,.js-on .benef:not(.in) .ba2 .now{
    opacity:1!important;transform:none!important}
  .js-on .benef:not(.in) .ba2 .now{
    background:var(--ok-bg)!important;border-color:rgba(14,157,110,.2)!important}
  .js-on .benef:not(.in) .ba2 .now .v{color:var(--ok-ink)!important}
}
.benef .ba2 .now .v{color:var(--ok-ink)}

/* ---- Dónde estamos hoy ---- */
.hechos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px}
.hecho{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-1)}
.hecho .d{font-size:40px;font-weight:700;letter-spacing:-.045em;line-height:1}
.hecho .t{margin-top:8px;font-size:14.5px;font-weight:600}
.hecho .s{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ink-2)}
/* sin las cifras encima, deja de necesitar el margen que la separaba de ellas */
.origen.sola{margin-top:0}
.origen{margin-top:40px;background:var(--deep);color:#fff;border-radius:var(--r-xl);padding:38px 42px;display:flex;gap:40px;flex-wrap:wrap}
.origen .oc{flex:1 1 380px;min-width:280px}
/* sin la columna de la derecha el bloque se estira a 1.100 px y la cita queda
   en renglones larguísimos; :only-child lo acota y lo centra, y se deshace
   solo si algún día vuelve a haber segunda columna */
.origen .oc:only-child{max-width:780px;margin-inline:auto}
.origen .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.origen .q{margin-top:16px;font-size:clamp(19px,2.2vw,25px);line-height:1.38;font-weight:600;letter-spacing:-.03em}
.origen .who{margin-top:20px;display:flex;align-items:center;gap:12px}
.origen .who .av{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--brand-400)}
.origen .who .nm{font-size:14px;font-weight:600}
.origen .who .rl{font-size:13px;color:rgba(255,255,255,.5)}
.origen .ol{flex:1 1 320px;min-width:260px;padding-left:34px;border-left:1px solid rgba(255,255,255,.14)}
.origen .ol ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.origen .ol li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55;color:rgba(255,255,255,.66)}
.origen .ol li::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);flex-shrink:0;margin-top:8px}

/* ---- Formulario ---- */
.cta-grid{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start;margin-top:16px}
.cta-col{flex:1 1 400px;min-width:300px;text-align:left}
.cta-col ul{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.cta-col li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cta-col li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:9px}
.formc{flex:1 1 420px;min-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px 34px;box-shadow:var(--sh-2);text-align:left}
.formc h3{font-size:21px;font-weight:600;letter-spacing:-.025em}
.formc .fs{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.fld{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.fld label{font-size:13px;font-weight:600;color:var(--ink-2)}
.fld input,.fld textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;transition:border-color .2s var(--e),box-shadow .2s var(--e)}
.fld textarea{resize:vertical;min-height:84px;line-height:1.5}
.fld input:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--brand-700);outline-offset:2px;border-color:var(--brand);box-shadow:none}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)}
.formc .btn{margin-top:20px;width:100%}
.fnote{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.fmsg{margin-top:14px;font-size:14px;line-height:1.55;border-radius:var(--r);padding:12px 14px;display:none}
.fmsg.ok{display:block;background:var(--ok-bg);color:var(--ok-ink)}
.fmsg.err{display:block;background:var(--bad-bg);color:var(--bad-ink)}

/* ---- Responsive de lo nuevo ---- */
@media(max-width:980px){
  .difs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dif.hero-d{grid-column:span 2}
  .benefs{grid-template-columns:1fr}
}
@media(max-width:860px){
  .dolores,.grupos,.hechos{grid-template-columns:1fr}
  .grupo.wide{grid-column:span 1}
  .difs{grid-template-columns:1fr}
  .dif.hero-d{grid-column:span 1}
  .gitem{flex-wrap:wrap}
  .gitem .nm{width:auto}
  .gitem .ds{flex:1 1 100%;padding-left:17px}
  .origen{padding:26px 24px;gap:24px}
  .origen .ol{padding-left:0;padding-top:24px;border-left:none;border-top:1px solid rgba(255,255,255,.14)}
  .argumento{padding:26px 24px}
  .tesis{padding:24px 22px}
  .frow{grid-template-columns:1fr}
  .formc{padding:24px 22px}
}

/* Línea animada dentro de una .box (flujo de caja del mockup) */
.box svg.drawline{width:100%;height:64px;overflow:visible;margin-top:8px}
.box svg.drawline path{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.8s var(--e)}
.box svg.drawline.on path{stroke-dashoffset:0}

/* ============ LOGOTIPO ============
   El trazado vectorial de la marca (el mismo del ERP). Dos paths: el símbolo y
   la palabra, coloreados por separado para que en fondo oscuro vayan los dos en
   blanco y en claro el símbolo lleve el azul de marca. */
.brand-logo{height:26px;width:auto;display:block;flex-shrink:0}
.brand-logo{--logo-iso:var(--brand);--logo-word:var(--ink)}
footer .brand-logo .iso,
footer .brand-logo{--logo-word:#fff}
@media(max-width:860px){.brand-logo{height:23px}}

/* ── Foco visible (WCAG 2.2 · 2.4.11) ────────────────────────────────────────
   No había ninguna regla de foco en las 847 líneas, y la única que existía
   (:focus del formulario) daba 1.08:1 contra el fondo: invisible. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--brand-700);outline-offset:2px;border-radius:4px}
.dark :where(a,button):focus-visible,
footer :where(a,button):focus-visible,
.argumento :where(a,button):focus-visible,
.origen :where(a,button):focus-visible{outline-color:#fff}

/* Adorno del mockup: antes era <a href="#"> y saltaba al tope de la página. */
.acts-h .verlink{font-size:11.5px;font-weight:600;color:var(--brand-700);cursor:default}

/* ── Revelado: visible por defecto, animado solo si el JS confirma ───────────
   Antes .rv y compañía arrancaban en opacity:0 y solo el JS les ponía .in:
   sin JavaScript la página quedaba EN BLANCO (82 elementos, incluido el h1).
   Ahora el estado base es visible y la animación vive bajo .js-on, que el
   propio JS enciende y retira si nunca llega a ejecutarse (ver index.html). */
.rv,.dol,.ph,.tr,.step,.al,.prow,.note,.ratio,.acard,.sn,.pend .row{
  opacity:1;transform:none}
.js-on .rv   {opacity:0;transform:translateY(22px)}
.js-on .dol  {opacity:0;transform:translateY(22px)}
.js-on .ph   {opacity:0;transform:translateY(18px)}
.js-on .tr   {opacity:0;transform:translateY(8px)}
.js-on .step {opacity:0;transform:translateY(10px)}
.js-on .al   {opacity:0;transform:translateX(26px)}
.js-on .prow {opacity:0;transform:translateY(6px)}
.js-on .note {opacity:0;transform:translateX(14px)}
.js-on .ratio{opacity:0;transform:translateY(8px) scale(.98)}
.js-on .acard{opacity:0;transform:translateY(10px)}
.js-on .sn   {opacity:0;transform:translateY(16px)}
.js-on .pend .row{opacity:0;transform:translateY(6px)}
.js-on .rv.in,.js-on .dol.in,.js-on .ph.in,.js-on .tr.in,.js-on .step.in,
.js-on .al.in,.js-on .prow.in,.js-on .note.in,.js-on .ratio.in,
.js-on .acard.in,.js-on .sn.in,.js-on .pend .row.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-on .rv,.js-on .dol,.js-on .ph,.js-on .tr,.js-on .step,.js-on .al,
  .js-on .prow,.js-on .note,.js-on .ratio,.js-on .acard,.js-on .sn,
  .js-on .pend .row{
    opacity:1!important;transform:none!important}
}

/* Sección de precio: tres tarjetas, no las dos columnas de .dolores. */
.dolores.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
/* En "cómo se cobra" el encabezado va centrado y las tarjetas quedaban a la
   izquierda. .tres es exclusivo de esa sección —modulos.html usa .dolores a
   secas—, así que centrar acá no toca las otras. */
.dolores.tres .dol{text-align:center}
.dolores.tres .dol .d a{display:inline-block;margin-top:6px}
/* ── el resplandor que rota entre las tres ───────────────────────────────────
   Va en un ::after y anima SOLO opacity, que la GPU sí puede componer; un
   box-shadow animado se recalcula en cada cuadro y tironea. El ciclo dura
   4,5 s y cada tarjeta se enciende un tercio, desfasada 1,5 s, así que
   siempre hay una encendida y solo una.

   Arranca con .in para que no corra mientras las tarjetas todavía no se
   revelaron. Sin JS nunca se enciende: es adorno, no información. */
.dolores.tres .dol{position:relative}
.dolores.tres .dol::after{
  content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);
  pointer-events:none;opacity:0;
  /* halo centrado, sin desplazamiento vertical: con offset se lee como
     sombra y no como que esa tarjeta está encendida */
  box-shadow:0 0 0 1px rgba(87,155,255,.6),0 0 36px -2px rgba(0,104,255,.5),
             inset 0 0 24px -14px rgba(87,155,255,.9);
}
.dolores.tres .dol.in::after{animation:brilloRota 4.5s linear infinite}
.dolores.tres .dol.in:nth-child(2)::after{animation-delay:1.5s}
.dolores.tres .dol.in:nth-child(3)::after{animation-delay:3s}
@keyframes brilloRota{
  0%{opacity:0} 6%{opacity:1} 27%{opacity:1} 33%,100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .dolores.tres .dol.in::after{animation:none;opacity:0}
}
@media(max-width:860px){.dolores.tres{grid-template-columns:1fr}}

/* ============ /precio ============
   Cuatro planes en vez de los tres que asumía el bloque PRICING: el cuarto es
   Enterprise, sin precio. Este bloque va al FINAL del archivo a propósito —
   `.prices.cuatro` pesa más que el `.prices` del media query de 860px, así que
   declarado más arriba ganaría en teléfono y dejaría cuatro columnas de 90px.
   El nav es sticky, no fijo, así que ocupa su espacio y no hay que compensarlo. */
.hero-p{padding-top:72px}
.prices.cuatro{grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.prices.cuatro .pc{padding:30px 22px}
@media(max-width:1100px){.prices.cuatro{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}}
@media(max-width:860px){.prices.cuatro{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* Mensual / Anual. El estado vive en un atributo del <body>: sin JavaScript la
   página se queda en mensual con precios visibles, en vez de sin precios. Las
   clases se llaman .pm/.pa y no .m/.a porque `.a` ya existe (.tcard.a). */
.ptog{display:inline-flex;gap:4px;margin-top:28px;padding:4px;border-radius:999px;background:var(--tint-2);border:1px solid var(--line)}
.ptog button{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:background .2s var(--e),color .2s var(--e)}
.ptog button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.ptog button i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ok-ink);background:var(--ok-bg);padding:3px 8px;border-radius:999px}
body[data-ciclo="mensual"] .pa{display:none}
body[data-ciclo="anual"]   .pm{display:none}

.pc .amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc .amt b{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1}
.pc .amt s{font-size:19px;font-weight:600;color:var(--ink-3);text-decoration-thickness:2px;text-decoration-color:var(--bad)}
.pc .amt b.conv{font-size:26px;letter-spacing:-.03em}
.pc .ciclo{margin-top:9px;font-size:12.5px;color:var(--ink-3);line-height:1.45;min-height:34px}
.pc .ciclo b{color:var(--ok-ink);font-weight:700}

/* La caja del medidor: lo que en estas páginas suele ser «créditos». Acá lo que
   se mide son obras, así que dice obras. */
.pc .quota{margin-top:16px;padding:13px 14px;border-radius:12px;background:var(--brand-50);border:1px solid var(--brand-100)}
.pc.best .quota{background:var(--surface);border-color:var(--brand-100)}
.pc .quota .q1{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.pc .quota .q1 .ico{color:var(--brand);font-size:12px}
.pc .quota .q2{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.pc .for{margin:16px 0 20px}
.pc li.hered{display:block;font-size:12.5px;color:var(--ink-3);padding-bottom:4px}
.pc li.hered b{color:var(--ink-2);font-weight:600}

/* Tabla comparativa: la respuesta a «el precio explica poco». */
.tcomp{min-width:720px}
.tcomp thead th{text-align:left}
.tcomp thead th:not(:first-child){width:17%}
.tcomp td{font-size:13.5px;vertical-align:top}
.tcomp td:first-child{color:var(--ink-2)}
.tcomp tr.sec td{background:var(--tint);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:13px;padding-bottom:13px}
.tcomp td.span{color:var(--ink-3);font-style:normal}
.tcomp .si{display:inline-flex;color:var(--brand-700)}
.tcomp .si svg{width:15px;height:15px}
.tcomp .no{color:var(--line-2)}
@media(max-width:860px){.ptog{width:100%;justify-content:center}}

/* /modulos reusa las tarjetas de grupo de la home, pero cada grupo lleva una
   bajada que en la home no existe. */
.grupo .gsub{margin-top:6px;font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* ============ /modulos ============
   El explorador es el mismo #app de la home —cota.js lo encuentra por id y lo
   anima solo—, así que acá sólo hace falta el envoltorio y las marcas de IA. */
.hero-m{padding:72px 0 96px;text-align:center;position:relative;overflow:hidden}
.hero-m .app-shell{margin-top:44px;text-align:left}

/* La marca de IA. En los botones del explorador va compacta; en la lista de
   los diecisiete, al lado del nombre. */
.ia-b,.mod .ia-tag{font-size:9px;font-weight:700;letter-spacing:.09em;padding:3px 7px;border-radius:5px;background:var(--brand-50);color:var(--brand-700);white-space:nowrap;vertical-align:middle}
.ia-b{margin-left:7px;display:inline-block}
.ia-b.inline{margin:0}
.mod .ia-tag{margin-left:auto;flex-shrink:0}
.mod.on .ia-tag{background:var(--brand-100)}
.dark .ia-b{background:rgba(87,155,255,.16);color:var(--brand-400)}
@media(max-width:860px){.hero-m{padding:56px 0 72px}}
/* La home ya no lista los diecisiete: manda a /modulos, que sí los detalla. */
.mas{text-align:center;margin-top:34px}

/* .tbl trae su propia tarjeta clara, así que tiene que traer también su propia
   tinta. Dentro de una sección .dark heredaba el color:#fff del contenedor y
   las filas quedaban blanco sobre blanco: el encabezado se veía sólo porque
   ése sí declaraba color. Un componente con fondo propio no puede depender del
   color de quien lo envuelve. */
.tbl-wrap{background:var(--surface);color:var(--ink)}
.tbl td{color:var(--ink-2)}
.tbl td.r,.tbl td b,.tbl b{color:var(--ink)}
.tbl-foot span{color:var(--ink-3)}
/* El guión de «no aplica» quedaba en 1,39 sobre blanco: invisible, no discreto. */
.tcomp .no{color:var(--ink-3)}
.mas .mas-t{font-size:15px;color:var(--ink-2);margin-bottom:16px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.5}
.dark .mas .mas-t{color:rgba(255,255,255,.66)}
/* Cinco tarjetas en una grilla de tres: la primera ocupa el ancho completo y
   las cuatro restantes dejan 3+1, o sea la última sola con dos columnas
   vacías al lado. Que ocupe la fila entera cierra el bloque en vez de dejar
   un agujero. */
.difs .dif:last-child{grid-column:span 3}
@media(max-width:1080px){.difs .dif:last-child{grid-column:span 2}}
@media(max-width:760px){.difs .dif:last-child{grid-column:span 1}}

/* ============ CONVERSIÓN ============
   El patrón que usan los B2B que venden por demo (Lattice, Ramp, Attio): un
   ask alto repetido, uno bajo al lado, y decir qué pasa después de apretar.
   Acá el ask bajo es WhatsApp — no hay prueba gratis que ofrecer, y es como
   se habla de verdad con una constructora chilena. */
.banda{padding:0;position:relative}
.banda-in{background:var(--deep);border-radius:var(--r-xl);padding:52px 40px;text-align:center;color:#fff;overflow:hidden}
.banda-in h3{font-family:inherit;font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#fff}
.banda-in p{margin:14px auto 0;max-width:520px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.68)}
.banda-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.banda-in .btn-sec{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
.banda-in .btn-sec:hover{background:rgba(255,255,255,.16)}
.banda-in small{display:block;margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.5)}
.banda-in small a{color:rgba(255,255,255,.78);text-decoration:underline}
.falt{margin-top:14px;font-size:13px;color:var(--ink-3);text-align:center}
.falt a{font-weight:600}
@media(max-width:860px){.banda-in{padding:40px 24px}}

/* ============ /modulos · el recorrido de la partida ============
   Antes esto era una <table> sobre una tarjeta blanca: forma equivocada dos
   veces. El argumento es una SECUENCIA —el dato viaja y nadie lo reescribe— y
   una tabla no muestra movimiento; encima parecía una planilla, en una página
   que vende dejar de usarlas. Ahora es una línea de tiempo nativa del fondo
   oscuro, con los montos que el lector puede restar: 20.527.920 menos
   17.243.450 da los 3.284.470 del final. Ése es el argumento. */
.viaje{max-width:720px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-xl);overflow:hidden}
.viaje-h{padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.09)}
.viaje-h .vh-t{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:#fff}
.viaje-h .vh-s{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.5)}
.viaje-l{list-style:none;padding:10px 26px 22px}
.vp{position:relative;display:flex;align-items:flex-start;gap:16px;padding:16px 0 16px 0}
/* la línea que une los pasos: lo que una tabla no puede decir */
.vp::before{content:"";position:absolute;left:13px;top:34px;bottom:-16px;width:2px;background:rgba(255,255,255,.13)}
.vp.fin::before{display:none}
.vn{position:relative;z-index:1;width:28px;height:28px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(87,155,255,.18);color:var(--brand-300);border:1px solid rgba(87,155,255,.3)}
.vp.fin .vn{background:var(--brand);color:#fff;border-color:var(--brand)}
.vt{flex:1;min-width:0}
.vt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#fff}
.vt .vd{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.58)}
.vv{flex-shrink:0;text-align:right;font-size:14.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.vv small{display:block;margin-top:2px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vp.fin .vv{color:var(--brand-400);font-size:17px}
.viaje-f{padding:18px 26px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.6)}
@media(max-width:640px){.vp{flex-wrap:wrap}.vv{width:100%;text-align:left;padding-left:44px;margin-top:6px}.vv small{display:inline;margin-left:8px}}
/* Con número impar de tarjetas la última queda sola y deja media fila vacía.
   :last-child:nth-child(odd) sólo acierta cuando efectivamente está sola. */
.dolores .dol:last-child:nth-child(odd){grid-column:span 2}
.dolores.tres .dol:last-child:nth-child(odd){grid-column:auto}
@media(max-width:860px){.dolores .dol:last-child:nth-child(odd){grid-column:auto}}

/* ============ ASISTENTE · CONVERSACIÓN ============
   Vive en una sección .dark con marco de futuro. Los colores se declaran acá
   y no se heredan: la lección de la tabla que salía en blanco sobre blanco. */
.chat{max-width:620px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-xl);overflow:hidden}
.chat-h{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:600;color:#fff}
.ch-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0}
.ch-obra{margin-left:auto;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.5)}
/* Altura fija y mensajes anclados abajo: la tarjeta mide lo mismo con cero
   mensajes que con cinco, así que nada salta mientras la conversación se
   escribe. Es además como se comporta un chat de verdad. */
.chat-b{padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;height:560px;overflow:hidden}
/* Animación, no transición: no depende de que alguien añada una clase en un
   segundo frame, así que aparece igual en cualquier entorno de render. */
.chat-b .msg{max-width:82%;padding:12px 15px;border-radius:14px;font-size:13.5px;line-height:1.55;animation:msgIn .34s var(--e) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chat-b .msg p{margin:0}
.chat-b .msg.tu{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px}
.chat-b .msg.ia{align-self:flex-start;background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);border-bottom-left-radius:5px}
.chat-b .msg.av{align-self:flex-start;background:rgba(247,144,9,.13);border:1px solid rgba(247,144,9,.3);color:rgba(255,255,255,.92);max-width:88%}
.av-h{display:block;margin-bottom:5px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#FEC84B}
.chat-b .msg .src{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--brand-300);border-bottom:1px solid rgba(133,183,255,.4);padding-bottom:1px}
.chat-b .msg.av .src{color:#FEC84B;border-bottom-color:rgba(254,200,75,.4)}
.chat-b .msg.esperando{padding:14px 16px}
.dots{display:flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);animation:pulso 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes pulso{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-note{max-width:620px;margin:26px auto 0;text-align:center;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.55)}
/* El remate se separa de la nota técnica: es la línea que más pesa de la
   sección y estaba al final de un párrafo en letra chica. */
.chat-remate{max-width:640px;margin:18px auto 0;text-align:center;font-size:17px;
  line-height:1.45;font-weight:500;letter-spacing:-.015em;color:rgba(255,255,255,.9)}
/* la misma nota, para secciones claras: dos objeciones que frenaban temprano
   y estaban contestadas al final de la página */
.sec-note{max-width:640px;margin:28px auto 0;text-align:center;font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.sec-note b{font-weight:600;color:var(--ink-2)}
.chat-note b{font-weight:600;color:rgba(255,255,255,.8)}
.chat-note b{color:rgba(255,255,255,.82);font-weight:600}
/* Quien pidió menos movimiento no ve los puntos pulsando. */
@media(prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}.msg{animation:none}}
@media(max-width:640px){.msg{max-width:92%}.chat-b{min-height:0}}

/* ============ BENTO ============
   Tres columnas y seis celdas que llenan 3×3 exacto: la alta ocupa dos filas
   de la primera columna y las dos anchas ocupan dos columnas. Sin celdas
   huérfanas, que es el defecto que ya apareció dos veces en esta página. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
/* ── entrada del bento ───────────────────────────────────────────────────────
   Las seis tarjetas entran juntas desde los costados de la pantalla cuando el
   encabezado aparece. Se disparan todas a la vez desde un observador sobre la
   grilla —no una por una como hace .rv—, y el escalonado va en CSS.

   Va con @keyframes y NO con transition: .bc ya usa transition:transform para
   el hover, y compartirla haría que el hover durara 800 ms. Tampoco lleva
   'forwards': si el fotograma final quedara fijado, el transform del hover no
   podría moverse nunca más.

   Sin .in no hay nada aplicado salvo bajo .js-on, así que sin JS las seis se
   ven de una. Con movimiento reducido, el bloque canónico ya las deja quietas. */
/* El recorte va en la sección (ancho completo) y no en .bento, que vive dentro
   de .wrap: si recortara ahí, las tarjetas aparecerían desde el borde del
   contenido y no desde el de la pantalla. */
.sec-recorta{overflow-x:clip}
.js-on .bento .bc{opacity:0}
.js-on .bento.in .bc{animation:bcEntra .8s var(--e) both}
.js-on .bento.in .bc:nth-child(1){--dx:-62vw;animation-delay:0s}
.js-on .bento.in .bc:nth-child(2){--dx: 62vw;animation-delay:.09s}
.js-on .bento.in .bc:nth-child(3){--dx:-62vw;animation-delay:.18s}
.js-on .bento.in .bc:nth-child(4){--dx: 62vw;animation-delay:.27s}
.js-on .bento.in .bc:nth-child(5){--dx:-62vw;animation-delay:.36s}
.js-on .bento.in .bc:nth-child(6){--dx: 62vw;animation-delay:.45s}
@keyframes bcEntra{
  from{opacity:0;transform:translate3d(var(--dx,0),0,0)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js-on .bento .bc{opacity:1!important;animation:none!important;transform:none!important}
}
.bc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px;display:flex;flex-direction:column;box-shadow:var(--sh-1);overflow:hidden;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.bc:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.bc.tall{grid-row:span 2}
.bc.wide{grid-column:span 2}
.bc-h{margin-bottom:16px}
.bc-k{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--brand-700)}
.bc-h b{display:block;margin-top:6px;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.bc-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}

/* chat compacto */
.bc-chat{justify-content:flex-end;gap:9px}
.bm{font-size:12.5px;line-height:1.5;padding:10px 13px;border-radius:13px;max-width:92%}
.bm.tu{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.bm.ia{align-self:flex-start;background:var(--tint-2);color:var(--ink);border-bottom-left-radius:4px}
.bm.ia b{font-weight:700}
.bm-src{display:block;margin-top:7px;font-size:11px;font-weight:600;color:var(--brand-700);border-bottom:1px solid var(--brand-100);padding-bottom:1px;width:fit-content}
.bm.av{align-self:flex-start;background:var(--warn-bg);border:1px solid rgba(217,138,33,.28);color:var(--warn-ink)}
.bm-k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px}

/* alerta */
.ba-row{display:flex;align-items:center;gap:10px}
.ba-tag{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:5px;flex-shrink:0}
.ba-tag.crit{background:var(--bad-bg);color:var(--bad-ink)}
.ba-t{font-size:13.5px;font-weight:600;color:var(--ink);flex:1;min-width:0}
.ba-n{font-size:19px;font-weight:700;color:var(--bad-ink);font-variant-numeric:tabular-nums}
/* el número toma el color de su etiqueta: rojo con CRÍTICO, ámbar con ATENCIÓN */
.ba-card:has(.ba-tag.warn) .ba-n{color:var(--warn-ink)}
.ba-bar{height:7px;border-radius:99px;background:var(--tint-2);margin-top:12px;overflow:hidden}
.ba-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--warn),var(--bad))}
.ba-s{margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* saldo */
.bc-saldo{gap:0}
.bs{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.bs b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:13.5px}
.bs.fin{border-bottom:0;padding-top:12px}
.bs.fin b{color:var(--brand-700);font-size:17px}

/* partidas del mandante */
/* La barra reemplaza al número: el mandante ve los tres estados de un
   vistazo por color y llenado, sin leer tres cifras. El porcentaje exacto
   vive en su portal, que es donde firma. */
.bp{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px 13px;border-radius:var(--r-sm);background:var(--tint);font-size:12.5px;overflow:hidden}
.bp+.bp{margin-top:7px}
.bp-t{font-weight:600;color:var(--ink);flex-shrink:0}
.bp-e{color:var(--ink-3);font-size:11px;flex:1;min-width:0;text-align:right}
.bp-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line-2)}
.bp-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:0 2px 2px 0}
.bp.ok .bp-bar i{background:var(--ok)}
.bp.alerta{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(217,138,33,.3)}
.bp.alerta .bp-e{color:var(--warn-ink);font-weight:600}
.bp.alerta .bp-bar{background:rgba(217,138,33,.22)}

/* pasos de bodega */
/* La tarjeta es ancha: se usa como ancha. La factura a la izquierda y la
   revisión a la derecha, en vez de apilar todo en una columna y dejar la
   mitad del ancho vacía. */
#bBodega{display:grid;grid-template-columns:.92fr 1.08fr;gap:28px;align-items:center}
.bfac{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:13px 15px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ok)}
.bf-k{grid-column:1;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-ink)}
.bfac b{grid-column:1;margin-top:3px;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bf-ic{grid-column:2;grid-row:1/3;width:25px;height:25px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;opacity:0}
.bpasos{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.bpaso{display:flex;gap:11px;align-items:center;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.bn{width:20px;height:20px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--brand-700);box-shadow:inset 0 0 0 1.3px var(--brand-100)}
.bpaso.ok .bn{color:var(--ok-ink);box-shadow:inset 0 0 0 1.3px rgba(14,157,110,.4)}
.bt b{font-weight:600;color:var(--ink)}

/* trazabilidad */
/* Cada evento es una pastilla con su propio fondo y su propio aire. Antes eran
   filas al hilo separadas por una línea, y al entrar una nueva —que abre su
   altura y destella— el destello se comía la línea y las dos filas se leían
   encimadas. Con esquinas redondas y 6px de separación, cada una es un bloque
   aparte y la de arriba se ve claramente llegar. */
/* El alto de tres pastillas y sus dos separaciones, reservado desde el inicio:
   37,2px cada una (19,2 de línea + 18 de padding) más 2x6 de separación. Sin
   esto la lista crece mientras el evento nuevo abre su altura y la tarjeta se
   estira en cada relevo, que es justo lo que se veía. */
.bc-tr{position:relative;gap:6px;justify-content:flex-start;min-height:123.6px}
.btr{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-sm);background:var(--tint);font-size:12px}
.btr i{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center;color:var(--brand-700)}
.btr i svg{display:block;width:16px;height:16px}
.btr.ok i{color:var(--ok-ink)}
.btr.warn i{color:var(--warn-ink)}
/* una línea siempre: un evento largo envolvía a dos en pantallas angostas y
   la pastilla dejaba de medir lo reservado, con lo que la tarjeta volvía a
   estirarse en ese relevo */
.btr span{flex:1;min-width:0;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btr em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--ink-3)}

@media(max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bc.tall{grid-row:auto}
  .bc.wide{grid-column:span 2}
}
@media(max-width:760px){
  .bento{grid-template-columns:1fr}
  .bc.wide{grid-column:auto}
  /* la tarjeta ancha deja de serlo: sus dos columnas internas quedaban en
     140px cada una y el folio se partía en tres líneas */
  #bBodega{grid-template-columns:1fr;gap:16px}
}
/* La celda alta necesitaba cabecera y un turno más: con tres mensajes quedaba
   un vacío arriba que se leía como un error de maquetación. */
.bc-chat{justify-content:flex-start}
.bm-h{display:flex;align-items:center;gap:7px;padding-bottom:11px;margin-bottom:3px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.bm-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.bm-obra{margin-left:auto;font-weight:500;color:var(--ink-3);font-size:10.5px}

/* ── Bento · movimiento ────────────────────────────────────────────────────
   Las piezas de cada celda entran escalonadas cuando la celda aparece. Base
   visible y ocultas solo bajo .js-on: si el script no corre, el mosaico se ve
   igual — la lección de la página en blanco. */
.js-on .bc .bc-body > *{opacity:0}
.js-on .bc.on .bc-body > *{animation:bentoIn .5s var(--e) both}
@keyframes bentoIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.js-on .bc.on .bc-body > *:nth-child(1){animation-delay:.06s}
.js-on .bc.on .bc-body > *:nth-child(2){animation-delay:.16s}
.js-on .bc.on .bc-body > *:nth-child(3){animation-delay:.26s}
.js-on .bc.on .bc-body > *:nth-child(4){animation-delay:.36s}
.js-on .bc.on .bc-body > *:nth-child(5){animation-delay:.46s}
.js-on .bc.on .bc-body > *:nth-child(6){animation-delay:.56s}

/* La barra se llena sola: el 84% se ve LLEGAR al 84%, que es el argumento. */
.ba-bar i{width:0;transition:width 1.15s cubic-bezier(.22,.61,.36,1) .45s}
.bc.on .ba-bar i{width:var(--w,84%)}
.js-on .bc .ba-bar i{width:0}
.js-on .bc.on .ba-bar i{width:var(--w,84%)}

/* Dos latidos ambientales, los únicos infinitos y los dos con motivo: el
   asistente está en línea, y esa partida certifica plata sin respaldo. */
.bm-dot{position:relative}
.bm-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ok);opacity:0;animation:latido 2.6s ease-out infinite}
@keyframes latido{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
.bp.alerta .bp-e{position:relative}
.bp.alerta .bp-e::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:middle;animation:pulsoAmbar 2s ease-in-out infinite}
@keyframes pulsoAmbar{0%,100%{opacity:1}50%{opacity:.3}}

/* El saldo aterriza con un acento, no aparece y ya. */
.js-on .bc.on .bs.fin b{animation:saldoIn .6s var(--e) .5s both}
@keyframes saldoIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .js-on .bc .bc-body > *,.js-on .bc.on .bc-body > *{opacity:1;animation:none}
  .ba-bar i,.js-on .bc .ba-bar i{width:var(--w,84%);transition:none}
  .bm-dot::after,.bp.alerta .bp-e::before{animation:none}
  .js-on .bc.on .bs.fin b{animation:none}
}

/* ============ HERO · EL MOCKUP SE ARMA ============
   Antes el shell entraba como un bloque con .rv y su contenido animaba dentro.
   Ahora se construye a la vista: cromo, barra lateral, los módulos uno a uno,
   y al final el panel — que recién entonces corre sus contadores y sus líneas.
   Es la misma técnica del bento y la de vambe.ai: nada de librerías, sólo
   entradas escalonadas. Base visible: sin JavaScript el mockup se ve entero. */
@keyframes shellIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes railIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* El marco también se oculta: si cota.js tarda en llegar, un shell con borde
   y sombra pero sin contenido se lee como una pantalla rota. Entra él primero
   y después se llena. */
.js-on .app-shell{opacity:0}
.js-on .app-shell.on{animation:shellIn .38s var(--e) both}
.js-on .app-shell .chrome,.js-on .app-shell .side,.js-on .app-shell #panel{opacity:0}
.js-on .app-shell .side > *{opacity:0}
.js-on .app-shell.on .chrome{animation:shellIn .42s var(--e) .14s both}
.js-on .app-shell.on .side{animation:shellIn .42s var(--e) .22s both}
.js-on .app-shell.on #panel{animation:shellIn .5s var(--e) .58s both}
.js-on .app-shell.on .side > *:nth-child(1){animation:railIn .34s var(--e) 0.302s both}
.js-on .app-shell.on .side > *:nth-child(2){animation:railIn .34s var(--e) 0.324s both}
.js-on .app-shell.on .side > *:nth-child(3){animation:railIn .34s var(--e) 0.346s both}
.js-on .app-shell.on .side > *:nth-child(4){animation:railIn .34s var(--e) 0.368s both}
.js-on .app-shell.on .side > *:nth-child(5){animation:railIn .34s var(--e) 0.390s both}
.js-on .app-shell.on .side > *:nth-child(6){animation:railIn .34s var(--e) 0.412s both}
.js-on .app-shell.on .side > *:nth-child(7){animation:railIn .34s var(--e) 0.434s both}
.js-on .app-shell.on .side > *:nth-child(8){animation:railIn .34s var(--e) 0.456s both}
.js-on .app-shell.on .side > *:nth-child(9){animation:railIn .34s var(--e) 0.478s both}
.js-on .app-shell.on .side > *:nth-child(10){animation:railIn .34s var(--e) 0.500s both}
.js-on .app-shell.on .side > *:nth-child(11){animation:railIn .34s var(--e) 0.522s both}
.js-on .app-shell.on .side > *:nth-child(12){animation:railIn .34s var(--e) 0.544s both}
.js-on .app-shell.on .side > *:nth-child(13){animation:railIn .34s var(--e) 0.566s both}
.js-on .app-shell.on .side > *:nth-child(14){animation:railIn .34s var(--e) 0.588s both}
.js-on .app-shell.on .side > *:nth-child(15){animation:railIn .34s var(--e) 0.610s both}
.js-on .app-shell.on .side > *:nth-child(16){animation:railIn .34s var(--e) 0.632s both}
.js-on .app-shell.on .side > *:nth-child(17){animation:railIn .34s var(--e) 0.654s both}
.js-on .app-shell.on .side > *:nth-child(18){animation:railIn .34s var(--e) 0.676s both}
.js-on .app-shell.on .side > *:nth-child(19){animation:railIn .34s var(--e) 0.698s both}
.js-on .app-shell.on .side > *:nth-child(20){animation:railIn .34s var(--e) 0.720s both}
.js-on .app-shell.on .side > *:nth-child(21){animation:railIn .34s var(--e) 0.742s both}
.js-on .app-shell.on .side > *:nth-child(22){animation:railIn .34s var(--e) 0.764s both}
@media(prefers-reduced-motion:reduce){
  .js-on .app-shell,.js-on .app-shell .chrome,.js-on .app-shell .side,
  .js-on .app-shell #panel,.js-on .app-shell .side > *{opacity:1;animation:none}
}

/* ── Cómo funciona · el flujo se enciende al paso de la línea ──────────────
   Dos cosas estaban desincronizadas. Las seis etiquetas aparecían todas a los
   0,35s mientras sus nodos llegaban escalonados hasta 1,3s: el texto salía
   antes que el círculo al que pertenece. Y los puntos viajeros arrancaban de
   inmediato sobre una línea que todavía tardaba 2,4s en dibujarse.

   Ahora todo cuelga del avance de la línea: cada nodo se enciende cuando ella
   lo alcanza —el retraso sale de su posición real en el viewBox— su etiqueta
   lo sigue, y los puntos recién salen cuando la línea llegó al final. La
   sección dice que el dato viaja de la primera partida al último pago; ahora
   se ve viajar. */
.flow-svg .live{transition:stroke-dashoffset 1.9s var(--e)}
.flow-svg .lab,.flow-svg .sub{transition:opacity .45s var(--e)}
.flow-svg .nd:nth-of-type(1){transition-delay:0.00s}
.flow-svg .nd:nth-of-type(1) .lab,.flow-svg .nd:nth-of-type(1) .sub{transition-delay:0.12s}
.flow-svg .nd:nth-of-type(2){transition-delay:0.38s}
.flow-svg .nd:nth-of-type(2) .lab,.flow-svg .nd:nth-of-type(2) .sub{transition-delay:0.50s}
.flow-svg .nd:nth-of-type(3){transition-delay:0.76s}
.flow-svg .nd:nth-of-type(3) .lab,.flow-svg .nd:nth-of-type(3) .sub{transition-delay:0.88s}
.flow-svg .nd:nth-of-type(4){transition-delay:1.14s}
.flow-svg .nd:nth-of-type(4) .lab,.flow-svg .nd:nth-of-type(4) .sub{transition-delay:1.26s}
.flow-svg .nd:nth-of-type(5){transition-delay:1.52s}
.flow-svg .nd:nth-of-type(5) .lab,.flow-svg .nd:nth-of-type(5) .sub{transition-delay:1.64s}
.flow-svg .nd:nth-of-type(6){transition-delay:1.90s}
.flow-svg .nd:nth-of-type(6) .lab,.flow-svg .nd:nth-of-type(6) .sub{transition-delay:2.02s}
.flow-svg .car{animation-play-state:paused}
.flow-svg.in .car{animation:ride 4.6s linear 1.9s infinite;animation-play-state:running}
@media(prefers-reduced-motion:reduce){
  .flow-svg .live,.flow-svg .nd,.flow-svg .lab,.flow-svg .sub{transition:none}
  .flow-svg.in .car{animation:none}
}

/* ── Carta Gantt · el atraso se propaga ────────────────────────────────────
   La sección del asistente dice que la estructura se atrasó seis días y está
   arrastrando a albañilería. Acá se ve pasar: la barra de plan de la
   estructura se estira, las dos partidas que vienen detrás se corren, y el
   vínculo que las ata se dibuja. Mismos seis días que cuenta el chat. */
.g-row .g-plan{transition:left .85s var(--e),width .85s var(--e),background-color .6s var(--e)}
.gantt.slip .slip-src .g-plan{width:36%;background:var(--warn)}
.gantt.slip .slip-dst .g-plan{left:66%}
.gantt.slip .slip-dst2 .g-plan{left:82%}
/* el vínculo: una L punteada que baja de la partida de arriba y entra a ésta */
.g-dep{position:absolute;left:70%;top:-15px;width:0;height:23px;border-left:1.5px dashed var(--warn);border-bottom:1.5px dashed var(--warn);border-bottom-left-radius:5px;opacity:0;pointer-events:none;transition:width .55s .5s var(--e),opacity .3s .5s}
.gantt.slip .g-dep{width:5%;opacity:1}
.g-chip{font-size:8.5px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:4px;background:var(--warn-bg);color:var(--warn-ink);opacity:0;transform:translateX(-4px);transition:opacity .35s .75s var(--e),transform .35s .75s var(--e)}
.gantt.slip .g-chip{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .g-row .g-plan,.g-dep,.g-chip{transition:none}
}

/* ── Bento · las tres celdas vivas ─────────────────────────────────────────
   El chat se escribe, las alertas rotan y la trazabilidad se alimenta. Las
   tres se llenan por JavaScript, así que quedan fuera del escalonado genérico
   de .bc-body — si no, cada elemento nuevo heredaría el retraso de su
   posición y el chat se escribiría a destiempo. */
.js-on .bc.on .bc-body.vivo > *{animation:none;opacity:1}
.bc-body.vivo > *{animation:bentoIn .38s var(--e) both}

/* la alerta se recambia con un desvanecido corto */
#bAlerta{transition:opacity .2s var(--e)}
#bAlerta .ba-bar i{width:0;transition:width 1s cubic-bezier(.22,.61,.36,1)}
.ba-tag.warn{background:var(--warn-bg);color:var(--warn-ink)}

.btr{transition:none}

/* el chat del bento comparte los puntos de espera con el grande */
.bc-chat .esperando{padding:9px 13px}
.bc-chat .dots i{width:5px;height:5px}
.bc-chat .bm p{margin:0}

@media(prefers-reduced-motion:reduce){
  #bAlerta,#bAlerta .ba-bar i,.bc-tr .btr,.bc-body.vivo > *{transition:none;animation:none;opacity:1}
}

/* ── Asistente · del dato a la vista ───────────────────────────────────────
   El chat NO se va: se corre a la izquierda y entra una segunda tarjeta por la
   derecha. Quedan las dos, que es lo que hace entender que una lleva a la otra.
   La tarjeta que entra usa el mismo recorrido escalonado de /modulos, con los
   mismos montos del resto del sitio. */
#duo{display:flex;justify-content:center;align-items:stretch}
#duo .chat{flex:0 0 620px;max-width:620px;margin:0;transition:flex-basis .55s var(--e),max-width .55s var(--e)}
.duo-dest{flex:0 0 auto;max-width:0;margin-left:0;opacity:0;overflow:hidden;
  transition:max-width .55s var(--e),margin-left .55s var(--e),opacity .3s .18s var(--e)}
.duo-inner{width:474px;height:100%}
#duo.ver .chat{flex-basis:474px;max-width:474px}
#duo.ver .duo-dest{max-width:474px;margin-left:20px;opacity:1}
#duo .viaje{max-width:none;margin:0;height:100%;display:flex;flex-direction:column}
#duo .viaje-l,#duo .mg{flex:1}
#duo .mg{display:flex;flex-direction:column;justify-content:center}
#duo .viaje-l{display:flex;flex-direction:column;justify-content:center}
#duo .viaje-f{margin-top:auto}
#duo .viaje-h{position:relative;padding-top:44px}
#duo .viaje-l{padding-bottom:18px}

/* los enlaces son botones de verdad: accionables para el teclado también */
.chat-b .msg .src{font:inherit;font-size:11.5px;font-weight:600;background:none;border:0;padding:0 0 1px;cursor:pointer;display:inline-block;margin-top:9px;color:var(--brand-300);border-bottom:1px solid rgba(133,183,255,.4);transition:color .2s,border-color .2s}
.chat-b .msg .src:hover{color:#fff;border-bottom-color:#fff}
.chat-b .msg.av .src{color:#FEC84B;border-bottom-color:rgba(254,200,75,.4)}
.chat-b .msg.av .src:hover{color:#fff;border-bottom-color:#fff}
.cv-back{position:absolute;top:16px;left:26px;font:inherit;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.5);transition:color .2s}
.cv-back:hover{color:#fff}
.cv-back svg{width:13px;height:13px}
.vp.alerta .vn{background:rgba(247,144,9,.2);color:#FEC84B;border-color:rgba(247,144,9,.35)}
.vp.mal .vn{background:rgba(240,68,56,.2);color:#FDA29B;border-color:rgba(240,68,56,.38)}
.vp.mal .vv{color:#FDA29B}

@media(max-width:1080px){
  #duo{flex-direction:column;align-items:center}
  #duo .chat,#duo.ver .chat{flex-basis:auto;max-width:620px;width:100%}
  .duo-dest{max-width:100%;width:100%}
  .duo-inner{width:100%}
  #duo.ver .duo-dest{max-width:620px;margin-left:0;margin-top:18px}
  .duo-dest{margin-top:0;transition:max-height .5s var(--e),opacity .3s .15s,margin-top .5s var(--e);max-height:0}
  #duo.ver .duo-dest{max-height:900px}
}
@media(prefers-reduced-motion:reduce){.duo .chat,.duo-dest{transition:none}}

/* ── La carta Gantt de verdad ──────────────────────────────────────────────
   Una Gantt es barras ubicadas EN EL TIEMPO: cuándo empieza cada partida,
   cuánto dura y cómo se solapan. Sin eje temporal es una lista con
   porcentajes, que fue el error de la primera versión. */
.mg{padding:16px 22px 6px}
.mg-head{display:grid;grid-template-columns:96px repeat(6,1fr);align-items:center;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.09)}
.mg-head i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.38);text-align:center}
.mg-body{position:relative;padding:6px 0 2px}
.mg-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;padding:9px 0}
.mg-n{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.9);display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.mg-n b{font-size:10px;font-weight:700;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.mg-tr{position:relative;height:18px}
/* la barra: se ubica y se dimensiona por variables, como una Gantt real */
.mg-plan{position:absolute;top:3px;left:var(--l);width:var(--w);height:12px;border-radius:4px;background:rgba(255,255,255,.13);overflow:visible}
.mg-plan i{display:block;height:100%;border-radius:4px;background:var(--ok);width:0;transition:width .9s .35s cubic-bezier(.22,.61,.36,1)}
#duo.ver .mg-plan i{width:var(--p,0)}
.mg-plan.tarde{background:rgba(247,144,9,.22)}
.mg-plan.tarde i{background:var(--warn)}
.mg-plan.corrida{background:rgba(255,255,255,.10);border:1px dashed rgba(255,255,255,.22)}
.mg-ext{position:absolute;right:-4px;top:-16px;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.05em;padding:1px 5px;border-radius:4px;background:rgba(247,144,9,.22);color:#FEC84B}
/* la dependencia: baja de la fila de arriba y entra a esta barra */
.mg-dep{position:absolute;left:70%;top:-16px;width:4%;height:20px;border-left:1.5px dashed rgba(247,144,9,.55);border-bottom:1.5px dashed rgba(247,144,9,.55);border-bottom-left-radius:5px}
.mg-now{position:absolute;top:0;bottom:2px;left:calc(96px + 10px + (100% - 106px)*.38);width:1.5px;background:var(--bad);z-index:2}
.mg-now em{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-style:normal;font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bad)}
.mg-pie{display:flex;gap:14px;padding:11px 0 4px;border-top:1px solid rgba(255,255,255,.09);margin-top:6px;font-size:9.5px;color:rgba(255,255,255,.5)}
.mg-pie span{display:inline-flex;align-items:center;gap:5px}
.mg-pie i{width:8px;height:8px;border-radius:2px}
.c-ok{background:var(--ok)}.c-plan{background:rgba(255,255,255,.22)}.c-late{background:var(--warn)}

/* ── Los enlaces de la conversación son botones ────────────────────────────
   Antes eran texto subrayado y les puse un anillo pulsante alrededor, que se
   leía como un borde de foco roto. Ahora son píldoras con su flecha: se ven
   accionables sin necesidad de un aro. La señal es la flecha, que da un
   empujoncito cada tanto hasta que alguien toca la primera. */
.chat-b .msg .src{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:11.5px;font-weight:600;
  margin-top:11px;padding:5px 9px 5px 11px;border-radius:8px;cursor:pointer;
  background:rgba(133,183,255,.12);border:1px solid rgba(133,183,255,.22);color:var(--brand-300);
  transition:background .2s var(--e),border-color .2s var(--e),color .2s var(--e)}
.chat-b .msg .src::after{content:"";width:11px;height:11px;flex-shrink:0;
  background:currentColor;-webkit-mask:var(--flecha) center/contain no-repeat;mask:var(--flecha) center/contain no-repeat;
  animation:empujon 3.6s ease-in-out infinite}
.chat-b .msg .src:hover{background:rgba(133,183,255,.24);border-color:rgba(133,183,255,.5);color:#fff}
.chat-b .msg .src:hover::after{animation:none;transform:translateX(2px);transition:transform .2s var(--e)}
.chat-b .msg.av .src{background:rgba(247,144,9,.14);border-color:rgba(247,144,9,.3);color:#FEC84B}
.chat-b .msg.av .src:hover{background:rgba(247,144,9,.26);border-color:rgba(247,144,9,.55);color:#fff}
#duo.probado .msg .src::after{animation:none}
@keyframes empujon{0%,86%,100%{transform:translateX(0)}91%{transform:translateX(3px)}95%{transform:translateX(0)}}
:root{--flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.msg .src::after{animation:none}}

/* ============ PIE ============
   Pasa de dos columnas desbalanceadas a cuatro, con una columna propia para el
   mandante — que es el canal de distribución y estaba enterrado en una lista.
   No hay redes ni certificaciones porque no existen: los tres sellos de abajo
   son cosas verificables y ya afirmadas en la página. */
.foot{grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px}
.foot-marca .about{max-width:320px}
.foot-cta{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.foot-cta .btn{font-size:13px;padding:9px 16px}
.foot-cta .btn-sec{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.2)}
.foot-cta .btn-sec:hover{background:rgba(255,255,255,.16)}
.foot h6{margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a:hover{color:#fff}

.foot-sellos{display:flex;flex-wrap:wrap;gap:26px;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.55)}
.foot-sellos span{display:inline-flex;align-items:center;gap:8px}
.foot-sellos i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.s-cl{background:var(--bad)}
.s-ok{background:var(--ok)}
.s-mod{background:var(--brand-400)}
.foot-b{margin-top:22px;border-top:0;padding-top:0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* el pie de /mandante: mismo aire, sólo lo que le sirve a un mandante */
.foot-m{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.fm-t{font-size:17px;font-weight:700;letter-spacing:-.02em;color:#fff}
.foot-m p{margin-top:8px;max-width:420px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.62)}
.fm-l{display:flex;flex-direction:column;gap:10px;text-align:right}
.fm-l a{color:rgba(255,255,255,.7);font-size:14.5px}
.fm-l a:hover{color:#fff}
.foot-m + .foot-b{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}

@media(max-width:980px){.foot{grid-template-columns:1fr 1fr;gap:34px}.foot-marca{grid-column:span 2}}
@media(max-width:620px){.foot{grid-template-columns:1fr}.foot-marca{grid-column:auto}.fm-l{text-align:left}.foot-sellos{gap:12px;flex-direction:column}}
/* «Para mandantes» va separado del resto a propósito: no es un ítem más del
   producto, es la puerta de otra persona — alguien que no viene a comparar
   software sino porque su contratista le mandó el enlace. */
.nav-sep{width:1px;height:18px;background:var(--line-2);margin:0 4px;flex-shrink:0}
.nav-links .nav-mand{border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;color:var(--ink-2);transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e)}
.nav-links .nav-mand:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
@media(max-width:860px){
  .nav-sep{display:none}
  .mmenu .nav-mand{border:1px solid var(--line-2);border-radius:10px;padding:11px 14px;text-align:center;margin-top:4px}
}
/* Los enlaces van junto al logo y los botones al extremo, como en las barras
   que se usan de referencia. Y entra «Iniciar sesión»: el producto vive en el
   mismo dominio y hasta ahora un cliente que llegaba a la portada no tenía
   por dónde entrar. */
.nav-links{margin-right:auto;margin-left:18px}
.nav-login{font-size:14px;font-weight:600;color:var(--ink-2);padding:8px 12px;border-radius:9px;transition:color .2s var(--e),background .2s var(--e)}
.nav-login:hover{color:var(--ink);background:var(--tint-2)}
@media(max-width:860px){
  .nav-links{margin:0}
  .mmenu .nav-login{display:block;text-align:center;padding:11px 14px;margin-top:2px}
}
/* En teléfono el acceso ya vive en el menú desplegable: repetirlo en la barra
   la aprieta al lado del botón principal. Esta regla sólo alcanza a las tres
   páginas que cargan esta hoja — /mandante no tiene menú y conserva el suyo
   visible. */
@media(max-width:860px){.nav-right .nav-login{display:none}}

/* ── Bento · el mosaico respira ────────────────────────────────────────────
   Antes tres celdas estaban vivas y tres muertas, y las muertas contagiaban:
   el conjunto se leía rígido. Ahora las seis tienen ciclo, con períodos
   distintos y primos entre sí (3.1s / 6.1s / 6.8s / 7.6s / 8.3s) para que en
   cualquier instante se muevan dos o tres, nunca las seis a la vez. Seis
   latidos sincronizados no se leen como una obra viva sino como un tablero
   de aeropuerto.

   Todo es CSS: ninguna librería, como el resto de la página. Base visible sin
   JavaScript —lo que se esconde cuelga de .js-on— y quieto bajo
   prefers-reduced-motion, al final del bloque. */
:root{--muelle:cubic-bezier(.34,1.56,.64,1)}

@keyframes popIn{from{opacity:0;transform:scale(.84) translateY(9px)}to{opacity:1;transform:none}}
@keyframes popR{from{opacity:0;transform:translateX(24px) scale(.88)}to{opacity:1;transform:none}}
@keyframes popL{from{opacity:0;transform:translateX(-24px) scale(.88)}to{opacity:1;transform:none}}
@keyframes popOut{to{opacity:0;transform:scale(.8)}}
@keyframes apareceSuave{from{opacity:0}to{opacity:1}}

/* 1 · CHAT — cada burbuja entra por su propio lado, no cae desde arriba.
   Es lo que hace que se lea como conversación y no como lista. */
.js-on .bc.on .bc-chat .bm.tu{animation:popR .44s var(--muelle) both}
.js-on .bc.on .bc-chat .bm.ia,
.js-on .bc.on .bc-chat .bm.av{animation:popL .44s var(--muelle) both}
/* los puntos de espera se van encogiendo en vez de desaparecer de golpe */
.bc-chat .bm.esperando.va{animation:popOut .17s ease-in forwards}
/* el enlace de la fuente llega después de que la burbuja se asentó */
.js-on .bc.on .bc-chat .bm-src{animation:popIn .34s var(--muelle) .26s both}

/* 2 · ALERTAS — deja de ser un cambio de texto: la vieja se va hacia arriba
   y la nueva baja como notificación, con la etiqueta y el número aparte. */
/* el recorte lo hace .bc, que tiene 22px de padding; recortar aquí cortaba
   la primera letra del pie a mitad de la transición */
#bAlerta{justify-content:center}
.ba-card{display:flex;flex-direction:column}
.js-on .bc.on #bAlerta > .ba-card.entra{animation:alertaIn .52s var(--muelle) both}
.js-on .bc.on #bAlerta > .ba-card.sale{animation:alertaOut .24s ease-in forwards}
@keyframes alertaIn{from{opacity:0;transform:translateY(-24px) scale(.965)}to{opacity:1;transform:none}}
@keyframes alertaOut{to{opacity:0;transform:translateY(-15px) scale(.965)}}
.js-on .bc.on #bAlerta .ba-card.entra .ba-tag{animation:popIn .4s var(--muelle) .2s both}
.js-on .bc.on #bAlerta .ba-card.entra .ba-s{animation:popIn .42s var(--muelle) .3s both}

/* 3 · TRAZABILIDAD — la fila entra desde la derecha ABRIENDO su altura, para
   que las de abajo se corran de verdad; destella en el color de su tipo y
   recién ahí se apaga. La que sale se cierra en vez de desaparecer. */
.bc-tr .btr{animation:none}
.btr{overflow:hidden}
.btr.ok{background:var(--ok-bg)}
.btr.warn{background:var(--warn-bg)}
.btr:not(.ok):not(.warn){background:var(--brand-50)}
.js-on .bc.on .bc-tr .btr.entra{animation:trazaEntra .58s var(--muelle) both,trazaFlash 1.5s ease-out both}
.js-on .bc.on .bc-tr .btr.sale{position:absolute;left:0;right:0;animation:trazaSale .42s ease-out forwards}
@keyframes trazaEntra{
  0%{opacity:0;transform:translateX(26px);max-height:0;padding-top:0;padding-bottom:0}
  40%{opacity:1;max-height:56px;padding-top:9px;padding-bottom:9px}
  100%{opacity:1;transform:none;max-height:56px;padding-top:9px;padding-bottom:9px}
}
@keyframes trazaFlash{0%,20%{filter:brightness(.94)}100%{filter:none}}
/* Solo se apaga. Antes cerraba su altura, y como el nuevo la abría al mismo
   tiempo pero más rápido, durante ~150ms había cuatro eventos ocupando alto y
   la tarjeta se estiraba. Fuera del flujo y con opacidad, el relevo no toca
   la altura de nadie. */
@keyframes trazaSale{to{opacity:0}}

/* 4 · LIBRO MAYOR — las cifras cuentan y, al terminar, entra por la izquierda
   el certificado acumulado y se dibuja solo. El espacio del gráfico está
   reservado desde el inicio: si creciera al aparecer, la tarjeta empujaría a
   su vecina y se rompería la fila. */
.bmini{position:relative;margin-top:14px;height:56px}
.bmini-k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.bmini-g{display:block;position:relative;height:38px}
.bmini-g svg{display:block;width:100%;height:100%}
.bmini-a{fill:var(--brand-50);opacity:0}
.bmini-l{fill:none;stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:230;stroke-dashoffset:230}
.bmini-d{position:absolute;right:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface);opacity:0}
.js-on #bSaldo > *{opacity:0}
.js-on #bSaldo.corre .bs{animation:popIn .5s var(--muelle) both}
/* las tres filas entran escalonadas pero los montos arrancan juntos (JS):
   así se ve orden al aparecer y la resta cuadra en todo momento */
.js-on #bSaldo.corre .bs:nth-child(1){animation-delay:.05s}
.js-on #bSaldo.corre .bs:nth-child(2){animation-delay:.15s}
.js-on #bSaldo.corre .bs:nth-child(3){animation-delay:.25s}
.js-on #bSaldo.corre .bmini{animation:popL .56s var(--muelle) 1.5s both}
.js-on #bSaldo.corre .bmini-l{animation:dibuja 1.15s var(--e) 1.78s both}
.js-on #bSaldo.corre .bmini-a{animation:apareceSuave .7s ease 2.3s both}
.js-on #bSaldo.corre .bmini-d{animation:popIn .42s var(--muelle) 2.75s both}
@keyframes dibuja{to{stroke-dashoffset:0}}

/* 5 · BODEGA — la factura llega volando desde la derecha, grande, y se asienta
   en su tamaño. Recién entonces se arman los tres pasos. */
/* el aspecto de la factura vive junto a la estructura de la tarjeta, más
   arriba: tenerlo duplicado acá hacía que la versión vieja ganara por orden */
.js-on #bBodega > *{opacity:0}
.js-on #bBodega.corre .bfac{animation:facturaEntra .72s var(--muelle) .1s both}
/* Crece desde su borde izquierdo y poco. Escalando 1,34 desde el centro, una
   factura de ~320px se pasaba 54px por lado y el overflow de la tarjeta le
   cortaba 32px por la izquierda: se veía un rectángulo deformándose contra el
   canto, que es el "se mueve sin sentido". Anclada a la izquierda no cruza
   nunca el padding. */
.bfac{transform-origin:left center}
@keyframes facturaEntra{from{opacity:0;transform:translateY(-9px) scale(1.09)}to{opacity:1;transform:none}}
.js-on #bBodega.corre .bf-ic{animation:popIn .4s var(--muelle) 1.8s both}
/* la lista aparece entera y son sus tres ítems los que se escalonan */
.js-on #bBodega.corre .bpasos{opacity:1;animation:none}
.js-on #bBodega .bpaso{opacity:0}
.js-on #bBodega.corre .bpaso{animation:popL .46s var(--muelle) both}
.js-on #bBodega.corre .bpaso:nth-child(1){animation-delay:.85s}
.js-on #bBodega.corre .bpaso:nth-child(2){animation-delay:1.15s}
.js-on #bBodega.corre .bpaso:nth-child(3){animation-delay:1.45s}

/* 6 · MANDANTE — la partida entra, cuenta su avance, y la evidencia de terreno
   llega después: primero el número, después con qué se respalda. */
.js-on #bMandante > *{opacity:0}
.js-on #bMandante.corre .bp{animation:popIn .5s var(--muelle) both}
.js-on #bMandante.corre .bp:nth-child(1){animation-delay:.06s}
.js-on #bMandante.corre .bp:nth-child(2){animation-delay:.22s}
.js-on #bMandante.corre .bp:nth-child(3){animation-delay:.38s}
.js-on #bMandante .bp-e{opacity:0}
.js-on #bMandante.corre .bp-e{animation:popIn .4s var(--muelle) both}
.js-on #bMandante.corre .bp:nth-child(1) .bp-e{animation-delay:.62s}
.js-on #bMandante.corre .bp:nth-child(2) .bp-e{animation-delay:.78s}
.js-on #bMandante.corre .bp:nth-child(3) .bp-e{animation-delay:.94s}
/* la barra se llena después de la evidencia: primero con qué se respalda,
   después cuánto. Es el orden en que un mandante revisa antes de firmar. */
@keyframes barraLlena{from{width:0}to{width:var(--w)}}
.js-on #bMandante.corre .bp-bar i{animation:barraLlena 1.05s var(--e) both}
.js-on #bMandante.corre .bp:nth-child(1) .bp-bar i{animation-delay:.72s}
.js-on #bMandante.corre .bp:nth-child(2) .bp-bar i{animation-delay:.9s}
.js-on #bMandante.corre .bp:nth-child(3) .bp-bar i{animation-delay:1.08s}

@media(prefers-reduced-motion:reduce){
  .js-on #bSaldo > *,.js-on #bBodega > *,.js-on #bMandante > *,
  .js-on #bBodega .bpaso,.js-on #bMandante .bp-e,.bf-ic{opacity:1;animation:none}
  .bp-bar i{width:var(--w)}
  .bmini-a{opacity:1}
  .bmini-l{stroke-dashoffset:0}
  .bmini-d{opacity:1}
  .js-on .bc.on .bc-chat .bm.tu,.js-on .bc.on .bc-chat .bm.ia,
  .js-on .bc.on .bc-chat .bm.av,.js-on .bc.on .bc-chat .bm-src,
  .js-on .bc.on #bAlerta > .ba-card.entra,.js-on .bc.on #bAlerta .ba-card.entra .ba-tag,
  .js-on .bc.on #bAlerta .ba-card.entra .ba-s,
  .js-on .bc.on .bc-tr .btr.entra{animation:none;opacity:1;transform:none;max-height:none}
}

/* ── Escenario del hero ────────────────────────────────────────────────
   .hero-runway da el largo de scroll; .hero-stage se queda pegado dentro de
   ese tramo. No es secuestro de scroll: la página baja normal, el escenario
   solo se mantiene en su sitio hasta que la pista se acaba y suelta. */
.hero.esc{padding:0;text-align:left;overflow:visible}
/* El hero necesita overflow visible para que el sticky funcione, así que la
   aurora no puede seguir sobresaliendo por su cuenta: su inset -10% a cada
   lado la hacía 144px más ancha que la página. Acá se ajusta al ancho y se
   recorta a sí misma. */
.hero.esc .aurora{inset:-20% 0 auto;overflow:hidden}
/* La pista dura exactamente lo que la transición. El escenario está pegado
   durante pista + 64 (el top del sticky), así que 496 + 64 = 560, que es el
   recorrido de la animación: en cuanto el mockup queda centrado, suelta y
   la sección siguiente sube con normalidad. Sin reposo intermedio. */
.hero-runway{height:calc(100vh + var(--pista,496px))}
.hero-stage{position:sticky;top:64px;height:calc(100vh - 64px);min-height:700px;display:flex;align-items:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--fade,150px)),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - var(--fade,150px)),transparent)}
.hero.esc .hero-in.split{position:relative;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:56px;align-items:center;max-width:none;width:100%;
  padding-left:max(28px,calc((100vw - 1320px)/2));padding-right:0}
.hero.esc .hero-col{position:relative;z-index:1;max-width:560px;will-change:transform}
/* A2 · el texto centrado dentro de su columna, como el hero de hoy pero en
   560px. Las píldoras siguen apiladas: las tres en fila piden 808px y la
   columna tiene 560. */
.hero.esc h1.hero{font-size:clamp(36px,4.1vw,60px);line-height:1.04;text-align:center;margin:20px 0 0;max-width:none}
/* text-align no se puede interpolar: no hay estado intermedio entre centrado
   e izquierda. Pero si cada línea es un bloque de ancho propio, centrarla es
   un margen automático y moverla a la izquierda es un translate — y eso sí se
   anima. --dxl lo mide el JS por línea: la mitad del espacio que le sobra. */
.hero.esc .hero-col{text-align:left}
/* el h1 lleva la clase .hero, así que hereda el overflow:hidden de la sección
   y recortaba sus propias líneas al desplazarse */
.hero.esc h1.hero,.hero.esc .lede{overflow:visible}
.hero.esc .ln,.hero.esc .hero-cta,.hero.esc .hero-note{
  display:block;width:fit-content;margin-left:auto;margin-right:auto;
  transform:translate3d(calc(var(--p) * var(--dxl,0px)),0,0)}
.hero.esc .hero-cta{display:flex}
/* .rv.in pone transform:none al revelar y le ganaba al del scroll en los
   bloques que llevan esa clase ellos mismos (las líneas del titular no, porque
   van dentro). Se sube la especificidad para los cuatro. */
.hero.esc .hero-col > .eyebrow.rv,.hero.esc .hero-col > .hero-cta.rv,
.hero.esc .hero-col > .hero-note.rv{
  transform:translate3d(calc(var(--p) * var(--dxl,0px)),0,0)}
/* el display:block de la regla de arriba le había quitado la columna */
.hero.esc .hero-note{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero.esc .eyebrow{display:block;width:fit-content;margin-left:auto;margin-right:auto;
  transform:translate3d(calc(var(--p) * var(--dxl,0px)),0,0)}
.hero.esc .lede{margin:22px auto 0}
.hero.esc .hero-cta{justify-content:center}
.hero.esc .hero-note{align-items:center}
.hero.esc .lede{margin:22px 0 0;font-size:16px;max-width:560px}
/* El bloque de píldoras se centra como grupo, pero cada línea queda alineada
   a la izquierda entre ellas: centrada una por una, los tres ✓ quedaban en
   posiciones distintas y se veía desprolijo. */
.hero.esc .hero-note{flex-direction:column;gap:8px;font-size:13px;
  align-items:flex-start;width:fit-content;margin-left:auto;margin-right:auto;text-align:left}
.hero.esc .hero-vis{position:absolute;inset:-70px 0;min-width:0;display:flex;align-items:center;
  justify-content:flex-end;pointer-events:none;z-index:2}
.hero.esc .hero-slide{will-change:transform}
/* El mockup del hero ya no entra con shellIn: su animación es levitate, y una
   propiedad animation no se acumula —la última gana—, así que el fill de
   shellIn dejaba de aplicarse y se quedaba en opacity 0. Acá se declara
   visible; sus partes internas siguen con su propio escalonado. */
.js-on .hero.esc .app-shell{opacity:1}
.hero.esc .app-shell{margin:0;max-width:none;width:1080px;flex-shrink:0;pointer-events:auto;
  animation:levitate 7s ease-in-out infinite;box-shadow:0 12px 34px -22px rgba(14,18,38,.16)}
.hero.esc .tip{display:none}
.nav-in{max-width:none;padding-left:max(28px,calc((100vw - 1320px)/2));padding-right:max(28px,calc((100vw - 1320px)/2))}
@media(max-width:1080px){
  /* sin sticky no hace falta el overflow visible, y sin él la aurora del fondo
     se salía 250px por la derecha */
  .hero.esc{overflow:hidden}
  .hero-runway{height:auto}
  .hero-stage{position:static;height:auto;min-height:0;overflow:visible;
    mask-image:none;-webkit-mask-image:none;padding:56px 0}
  .hero.esc .hero-in.split{grid-template-columns:minmax(0,1fr);gap:36px;padding:0 24px}
  .hero.esc .hero-col,.hero.esc .hero-slide{transform:none!important;opacity:1!important}
  /* En una columna el mockup vuelve al flujo: dejarlo absoluto lo montaba
     encima del texto y su 150% de ancho sacaba la página 229px a la derecha. */
  .hero.esc .hero-vis{position:static;inset:auto;min-width:0;overflow:hidden;
    justify-content:flex-start;margin-top:8px}
  .hero.esc .hero-col{max-width:none}
  .hero.esc .app-shell{width:min(1080px,150%)}
  .hero.esc .ln,.hero.esc .hero-cta,
  .hero.esc .hero-note,.hero.esc .eyebrow{width:auto}
}
@media(prefers-reduced-motion:reduce){
  /* Sin movimiento se congela el estado INICIAL, no el final: con transform:none
     el mockup se iba a su posición centrada y tapaba el texto. */
  .hero.esc .hero-col{transform:none!important;opacity:1!important}
  .hero.esc .hero-slide{transform:translate3d(var(--sobra,316px),0,0)!important}
  .hero.esc .ln,.hero.esc .hero-cta,
  .hero.esc .hero-note,.hero.esc .eyebrow{transform:none!important}
}

/* ── A · empieza partido, el mockup entra y toma la pantalla ── */
.hero.esc{--p:0}
/* El texto no se desvanece: se aprieta. El origen en su borde izquierdo hace
   que al encogerse colapse hacia ese lado —como si el mockup lo empujara— en
   vez de contraerse hacia su propio centro. Y la opacidad se multiplica por
   1.45: el navegador la recorta en 1, así que el texto se mantiene entero el
   primer tercio y recién ahí empieza a irse. */
.hero.esc .hero-col{
  transform:translate3d(calc(var(--p) * -150px),0,0);
  /* entero hasta el 25% del recorrido y ya del todo ido en el 60%: el mockup
     alcanza esa zona justo después, así que nunca se cruzan encima */
  opacity:calc((.6 - var(--p)) / .35)}
/* p=0: desplazado a la derecha, asomando. p=1: centrado en el escenario.
   Sin el segundo término se quedaba pegado a la derecha, que es su posición
   natural con justify-content:flex-end. */
.hero.esc .hero-slide{transform:translate3d(
  calc((1 - var(--p)) * var(--sobra,330px) - var(--p) * var(--centrar,0px)),0,0)}
.hero-stage{--fade:calc(150px * (1 - var(--p)))}