/* ============================================================
   TASKIA — "Aurora & Signal"
   paleta = tokens --ws2-* del editor Aurora (work-smart-v2)
   lienzo + bento de Tabela · restricción y pin de Levo
   footer de paneles y parallax de DriveBerry
   ============================================================ */
:root{
  /* superficies — ws2-bg-base / ws2-surface */
  --stone:#F5F6FA; --stone-2:#ECEEF3;
  --panel:#FFFFFF; --panel-dp:#F5F6FA;
  --dark:#0F172A;  --dark-2:#1E293B;

  /* texto — ws2-text / text-2 / text-3 (rampa slate) */
  --ink:#0F172A; --ink-2:#475569; --ink-3:#94A3B8;
  --ink-line:rgba(15,23,42,.08); --ink-line-soft:rgba(15,23,42,.05);
  --ink-hover:rgba(15,23,42,.04);
  --on-dark:#fff; --on-dark-2:rgba(255,255,255,.62); --on-dark-3:rgba(255,255,255,.40);
  --on-dark-line:rgba(255,255,255,.12);

  /* vidrio — ws2-glass-* */
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.6);
  --card-shadow:0 10px 34px -20px rgba(15,23,42,.16);

  /* acento — ws2-brand */
  --signal:#3688FF; --signal-deep:#1F5FD0;
  --signal-tint:rgba(54,136,255,.10); --signal-soft:#D7E6FF;

  /* estados — ws2-c-* */
  --pos:#5BC97A; --neg:#F4B740;
  --navy:#12315F;                       /* azul oscuro: destino del morph de Operaciones */
  --c-ideas:#6BD6B5; --c-todo:#A78BFA; --c-progress:#F4B740;
  --c-review:#FF8C5A; --c-done:#5BC97A;

  /* radios — anclados a ws2-r (14px) */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --pad:10px; --gut:clamp(20px,4vw,48px);
  /* la medida del contenido: 95% de la pantalla, con tope de 1440px. La
     aplican .wrap y los contenedores internos de los paneles a sangre —
     todos con width:95% + max-width:var(--max) y sin relleno lateral, para
     que el ancho sea el mismo en toda la página. --gut se queda sólo para
     los ritmos verticales que ya lo usaban. */
  --max:1440px;

  /* escala de titulares: un solo nivel de sección (--h2) y su variante comprimida
     (--h2-sm) para los paneles fijados a 100vh. Un paso abajo, no la mitad. */
  --h2:clamp(30px,4vw,56px);
  --h2-sm:clamp(24px,2.9vw,40px);
  --sans:"Poppins",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Sintony",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--stone);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Enlace suelto en PROSA. El reset de arriba deja sin señal a todo enlace que
   no viva dentro de un componente con estilo propio (.nav-links, .chx,
   .link-arrow...). Para los de texto corrido hace falta decirlo: en
   /eliminar-cuenta/ el correo de soporte es el ÚNICO camino para una cuenta de
   ERP o para quien perdió el acceso, así que un enlace que no se ve clicable
   no es un detalle estético — es el camino roto.
   El subrayado va tenue y se enciende al pasar por encima: la misma gramática
   de .link-arrow, que revela su borde en :hover. */
.lnk{
  color:var(--signal-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in oklab,currentColor 38%,transparent);
  transition:text-decoration-color .3s var(--ease);
}
.lnk:hover{text-decoration-color:currentColor}
/* foco visible: los enlaces van sin subrayado, así que el anillo es la única
   señal que le queda a quien navega con teclado */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
/* salto al contenido: fuera de pantalla hasta que el teclado lo enfoca — con
   transform y no display:none, para que siga siendo enfocable */
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:12px 18px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;
  transform:translateY(-180%);transition:transform .28s var(--ease);
}
.skip:focus{transform:none}
#main:focus{outline:none}
.on-dark :focus-visible,.f-cta :focus-visible,.pin-panel :focus-visible{outline-color:#fff}
.wrap{width:95%;max-width:var(--max);margin-inline:auto}

/* ---------------- tipografía ---------------- */
.label{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;
}
.label::before{content:"";width:0;height:1px;background:currentColor;opacity:.5;
  transition:width .8s var(--ease) .1s}
.label.in::before{width:20px}
.label svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
h1{font-size:clamp(42px,7vw,104px);font-weight:600;line-height:1}
h2{font-size:var(--h2);font-weight:600;line-height:1.06}
h3{font-size:clamp(20px,2vw,26px);font-weight:600;line-height:1.2}
h4{font-size:16px;font-weight:600;}
.lead{font-size:clamp(17px,1.3vw,19px);color:var(--ink-2);max-width:46ch}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.dim{color:var(--ink-2)}
/* tick en línea — reemplaza los glifos ✓ de texto */
.ck{
  display:inline-block;width:1em;height:1em;vertical-align:-.14em;
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.ui-pill .ck{margin-left:.35em}
.pline .pn .ck{margin-right:.4em;vertical-align:-.1em}

/* ---------------- botones ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;position:relative;overflow:hidden;
  height:48px;padding:0 24px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:15px;font-weight:500;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{box-shadow:0 14px 30px -14px rgba(15,23,42,.5)}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover{background:var(--signal-deep);box-shadow:0 14px 34px -14px rgba(54,136,255,.65)}
.btn-line{border-color:var(--ink-line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--ink-hover)}
.btn-onblue{background:#fff;color:var(--signal-deep)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
/* barrido de brillo al hover */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-110%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(110%)}

/* ============ barra de progreso de scroll ============ */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:99;
  background:var(--signal);transform-origin:0 50%;transform:scaleX(var(--sp,0));
}

/* ============================ NAV ============================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(245,246,250,.72);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--ease),background .35s,border-color .35s,height .35s var(--ease);
}
nav.stuck{border-bottom-color:var(--ink-line);background:rgba(245,246,250,.86)}
nav.hide{transform:translateY(-102%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px;
  transition:height .35s var(--ease)}
nav.stuck .nav-in{height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:500;font-size:19px}
.logo img{width:24px;height:24px;border-radius:6px;transition:transform .5s var(--ease)}
.logo:hover img{transform:rotate(-8deg) scale(1.08)}
.nav-links{display:flex;gap:2px;margin-inline:auto}
.nav-links a{padding:8px 14px;border-radius:var(--r-pill);font-size:15px;color:var(--ink-2);
  transition:color .2s,background .25s}
.nav-links a:hover{color:var(--ink);background:var(--ink-hover)}
.nav-links a.active{color:var(--ink);font-weight:500}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-right .ghost{font-size:15px;color:var(--ink-2);padding:8px 12px;transition:color .2s}
.nav-right .ghost:hover{color:var(--ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}

/* ---------------- menú móvil (≤860px) ---------------- */
.nav-burger{
  display:none;width:40px;height:40px;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger:hover{background:var(--ink-hover)}
.nav-burger span{
  display:block;width:19px;height:1.8px;border-radius:2px;background:var(--ink);
  transition:transform .38s var(--ease),opacity .2s var(--ease);
}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}

.nav-menu{
  position:fixed;inset:0;z-index:55;
  padding-block:calc(var(--nav-h,74px) + 12px) calc(var(--gut) + 12px);
  background:rgba(245,246,250,.97);backdrop-filter:blur(18px) saturate(1.4);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .38s var(--ease);
}
.nav-menu.open{opacity:1;transform:none}
.nav-menu:focus{outline:none}
.nav-menu-in{
  display:flex;flex-direction:column;max-width:420px;
  margin-inline:auto;padding-inline:clamp(6px,3vw,16px);
}
.nav-menu-in > a{
  display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px 2px;
  font-size:21px;font-weight:500;color:var(--ink);text-align:center;
  border-bottom:1px solid var(--ink-line-soft);
}
.nav-menu-in > a.active{color:var(--signal)}
.nav-menu-foot{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.nav-menu-foot .btn{width:100%;justify-content:center;height:52px}
body.nav-open{overflow:hidden}
/* en escritorio el cajón no existe, pase lo que pase */
@media (min-width:861px){.nav-menu{display:none}}

/* ============================ HERO ============================ */
.hero{padding:calc(74px + clamp(44px,5vw,76px)) 0 clamp(20px,3vw,32px)}
.hero-grid{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,5vw,64px);align-items:center;margin-bottom:clamp(28px,4vw,44px)}
.hero-copy{position:relative}
.hero-grid h1{margin:0 0 22px;font-size:clamp(38px,5vw,66px);line-height:1.02}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero-sub{font-size:clamp(16px,1.15vw,18px);color:var(--ink-2);max-width:44ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fine{font-size:13.5px;color:var(--ink-3)}

/* ---------------- chips sueltos (reemplazan los eyebrows) ----------------
   lavado de color: cada chip se tiñe con --chip-c (rampa ws2-c-*),
   fórmula tonal igual que .ws2-tonal-chip del editor Aurora.
   sin rotación por ahora — se juega primero con el color. */
.chip{
  --chip-c:var(--signal);
  --wash:14%;               /* intensidad del lavado de fondo */
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:500;white-space:nowrap;
  background:
    linear-gradient(135deg,
      color-mix(in oklab,var(--chip-c) calc(var(--wash) + 8%),#fff),
      color-mix(in oklab,var(--chip-c) var(--wash),#fff) 62%);
  border:1px solid color-mix(in oklab,var(--chip-c) 26%,#fff);
  color:color-mix(in oklab,var(--chip-c) 82%,var(--ink));
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease) var(--cd,.12s),transform .55s var(--ease) var(--cd,.12s);
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--chip-c);flex:none}
.chip.no-dot::before{display:none}

/* variante sólida — lavado invertido */
.chip.solid{
  background:linear-gradient(135deg,
    color-mix(in oklab,var(--chip-c) 92%,#fff),var(--chip-c));
  border-color:transparent;color:#fff;
}
.chip.solid::before{background:rgba(255,255,255,.92)}

/* sobre tarjeta oscura — lavado translúcido */
.chip.on-dark{
  background:linear-gradient(135deg,
    color-mix(in oklab,var(--chip-c) 30%,transparent),
    color-mix(in oklab,var(--chip-c) 16%,transparent) 70%);
  border-color:color-mix(in oklab,var(--chip-c) 42%,transparent);
  color:color-mix(in oklab,var(--chip-c) 28%,#fff);
  box-shadow:none;backdrop-filter:blur(8px);
}

/* sobre tarjeta/panel azul de marca — vidrio blanco lavado */
.chip.on-blue{
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.12));
  border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none;
  backdrop-filter:blur(6px);
}
.chip.on-blue::before{background:rgba(255,255,255,.9)}

.chip.float{position:absolute;z-index:4}
.in .chip,.chip.in{opacity:1;transform:translateY(0)}

/* ================= HERO DEMO — dos tarjetas apiladas (v1) =================
   la factura se arma y genera su asiento contable, en bucle de 12 s.
   timeline única: cada paso lleva sus % LITERALES (los @keyframes no
   admiten var()). Si cambias --dur, los % siguen valiendo. */
.demo-stage{--dur:9s;position:relative;min-height:520px;perspective:1200px}

.ui-card{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
.ui-head{display:flex;align-items:center;gap:11px;padding:13px 17px;border-bottom:1px solid var(--ink-line)}
.ui-hgroup{min-width:0}
.ui-title{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:baseline;gap:7px}
.ui-ref{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--ink-3)}
.ui-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.dot3{display:flex;gap:5px;flex:none}
.dot3 i{width:8px;height:8px;border-radius:50%;background:rgba(15,23,42,.14)}

/* pills de estado — mismo lavado tonal que .chip */
.ui-pill{
  --pc:var(--signal);flex:none;
  font-size:11px;font-weight:600;white-space:nowrap;
  padding:3px 10px;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--pc) 14%,#fff);
  border:1px solid color-mix(in oklab,var(--pc) 26%,#fff);
  color:color-mix(in oklab,var(--pc) 82%,var(--ink));
}
.ui-pill.warn{--pc:var(--c-progress)}
.ui-pill.ok{--pc:var(--c-done)}
.pill-wrap{position:relative;display:inline-grid;margin-left:auto}
.pill-wrap .ui-pill{grid-area:1/1}

/* apilado + leve giro (la firma del patrón v1) */
.fact-card{position:absolute;top:0;left:0;width:min(90%,460px);z-index:2;transform:rotate(-1.4deg)}
.asto-card{position:absolute;bottom:0;right:0;width:min(87%,440px);z-index:3;transform:rotate(1.6deg)}

.fact-body{padding:6px 17px 14px}
.fact-row{display:grid;grid-template-columns:minmax(0,1fr) 30px 88px 92px;gap:8px;align-items:center;
  padding:9px 0;border-bottom:1px dashed var(--ink-line);font-size:12.5px}
.fact-row .n{font-weight:500;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fact-row .q,.fact-row .p,.fact-row .tt{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-align:right}
.fact-row .tt{font-weight:600;color:var(--ink)}
.fact-tot{display:flex;justify-content:flex-end;gap:24px;padding:11px 0 2px;font-size:12.5px}
.fact-tot .lbl{color:var(--ink-3)}
.fact-tot .val{font-family:var(--mono);font-weight:600;color:var(--ink);min-width:96px;text-align:right}
.fact-tot.total{border-top:1px solid var(--ink-line);margin-top:2px;padding-top:11px}
.fact-tot.total .lbl{font-weight:600;color:var(--ink)}
.fact-tot.total .val{font-size:15px;color:var(--signal-deep)}
.fact-foot{display:flex;justify-content:flex-end;padding:12px 17px 15px}
.proc-btn{font-size:12.5px;font-weight:600;color:#fff;background:var(--signal);
  padding:8px 18px;border-radius:10px}

/* segunda tarjeta: inventario que baja en vivo al procesar la factura */
.inv-body{padding:6px 17px 13px}
.inv-cols{display:grid;grid-template-columns:minmax(0,1fr) 44px 52px;gap:10px;padding:8px 0 4px;
  font-size:10px;text-transform:uppercase;color:var(--ink-3)}
.inv-cols span:nth-child(n+2){text-align:right}
.inv-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 52px;gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--ink-line);font-size:12px;align-items:center}
.inv-row .acc{color:var(--ink);font-weight:500}
.inv-row .acc small{display:block;font-size:10px;color:var(--ink-3);font-weight:400}
.inv-row .was{font-family:var(--mono);font-size:11px;text-align:right;color:var(--ink-3)}
.inv-row .now{font-family:var(--mono);font-size:12px;font-weight:600;text-align:right;color:var(--c-done)}
.inv-row .now::before{content:"→\00a0";color:var(--ink-3);font-weight:400}
.inv-row.low .now{color:var(--c-progress)}
.inv-row.low .acc::after{content:"\00a0bajo";color:var(--c-progress);font-size:10px;text-transform:uppercase}
.inv-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 0 4px;font-size:12px}
.inv-foot .eq{font-weight:500;color:var(--ink-2)}
.inv-foot .chk{width:20px;height:20px;border-radius:50%;background:var(--c-done);display:grid;place-items:center;flex:none}
.inv-foot .chk svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}

.demo-caption{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;z-index:4;
  font-size:12.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--ink-line);border-radius:12px;padding:10px 16px;
  box-shadow:var(--card-shadow)}
.demo-caption .live{width:7px;height:7px;border-radius:50%;background:var(--c-done);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* estado base: todo visible salvo cuando la timeline corre */
.anim .fact-row,.anim .fact-tot,.anim .proc-btn,.anim .inv-row,.anim .inv-foot,.anim .asto-card,.anim .inv-cols{opacity:0}
.anim:not(.play) .fact-row,.anim:not(.play) .fact-tot,.anim:not(.play) .proc-btn,
.anim:not(.play) .inv-row,.anim:not(.play) .inv-foot,.anim:not(.play) .asto-card,.anim:not(.play) .inv-cols{opacity:1}
.anim:not(.play) .pill-a{opacity:0}

@keyframes kf-s1{0%,4%{opacity:0;transform:translateY(9px)}7%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-s2{0%,9%{opacity:0;transform:translateY(9px)}12%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-s3{0%,14%{opacity:0;transform:translateY(9px)}17%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-s4{0%,20%{opacity:0;transform:translateY(9px)}23%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-s5{0%,24%{opacity:0;transform:translateY(9px)}27%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-s6{0%,28%{opacity:0;transform:translateY(9px)}31%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
.anim.play .s1{animation:kf-s1 var(--dur) infinite}
.anim.play .s2{animation:kf-s2 var(--dur) infinite}
.anim.play .s3{animation:kf-s3 var(--dur) infinite}
.anim.play .s4{animation:kf-s4 var(--dur) infinite}
.anim.play .s5{animation:kf-s5 var(--dur) infinite}
.anim.play .s6{animation:kf-s6 var(--dur) infinite}
@keyframes kf-btn{0%,20%{opacity:0;transform:translateY(9px) scale(1)}23%{opacity:1;transform:none}
  33%{transform:scale(1)}35%{transform:scale(.93)}37%{transform:scale(1)}96%{opacity:1}100%{opacity:0}}
.anim.play .proc-btn{animation:kf-btn var(--dur) infinite}
@keyframes pill-swap-a{0%,34%{opacity:1}36%,100%{opacity:0}}
@keyframes pill-swap-b{0%,38%{opacity:0;transform:scale(.8)}41%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
.anim.play .pill-a{animation:pill-swap-a var(--dur) infinite}
.anim.play .pill-b{animation:pill-swap-b var(--dur) infinite}
@keyframes card-in{0%,40%{opacity:0;transform:rotate(1.6deg) translateY(32px) scale(.97)}
  47%,96%{opacity:1;transform:rotate(1.6deg) translateY(0) scale(1)}100%{opacity:0}}
.anim.play .asto-card{animation:card-in var(--dur) infinite}
@keyframes kf-a0{0%,46%{opacity:0;transform:translateY(9px)}49%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-a1{0%,50%{opacity:0;transform:translateY(9px)}53%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-a2{0%,55%{opacity:0;transform:translateY(9px)}58%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-a3{0%,60%{opacity:0;transform:translateY(9px)}63%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
@keyframes kf-a4{0%,67%{opacity:0;transform:translateY(9px)}71%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
.anim.play .a0{animation:kf-a0 var(--dur) infinite}
.anim.play .a1{animation:kf-a1 var(--dur) infinite}
.anim.play .a2{animation:kf-a2 var(--dur) infinite}
.anim.play .a3{animation:kf-a3 var(--dur) infinite}
.anim.play .a4{animation:kf-a4 var(--dur) infinite}
@keyframes chk-pop{0%,68%{transform:scale(0)}74%{transform:scale(1.25)}78%,100%{transform:scale(1)}}
.anim.play .chk{animation:chk-pop var(--dur) infinite}

/* ---------------- marquee de clientes ---------------- */
.marq-wrap{
  border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
  margin-top:clamp(28px,4vw,48px);padding:20px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marq{display:flex;gap:56px;width:max-content;animation:marq 34s linear infinite}
.marq-wrap:hover .marq{animation-play-state:paused}
.marq span{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:12px}
.marq span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--signal);opacity:.5}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================ SECCIONES ============================ */
section{padding:clamp(72px,9vw,128px) 0}
.sec-head{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(52px,5vw,72px)}
.sec-head h2{margin-top:0}
.sec-head .lead{padding-bottom:6px}

/* ============ MÓDULOS — sección fijada que se transforma módulo a módulo ============ */
.modpin{position:relative;height:620vh;padding:0;background:var(--panel-dp)}
.modpin-stage{--acc:var(--signal);position:sticky;top:0;min-height:100vh;
  display:flex;align-items:center;overflow:hidden}
.modpin-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 85% at 82% 45%,
    color-mix(in oklab,var(--acc) 13%,transparent),transparent 70%);
  transition:background .6s var(--ease)}
.modpin-panel{position:relative;width:95%;max-width:var(--max);margin-inline:auto;
  padding-block:clamp(28px,5vh,54px);
  display:grid;gap:clamp(14px,2.4vh,26px);
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "view";align-items:stretch}
.modpin-title{grid-area:title;display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.modpin-title h2{margin:0;font-size:var(--h2);max-width:22ch}


/* ============ el bento que se reconstruye módulo a módulo ============ */
.modpin-view{grid-area:view;position:relative;min-height:clamp(340px,56vh,560px)}
.modslide{
  position:absolute;inset:0;display:grid;gap:10px;
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.modslide.on{opacity:1;pointer-events:auto}

/* ---- las diez composiciones: ninguna reparte el espacio igual que otra ---- */
/* 01 · pantalla dominante a la derecha, identidad arriba, lectura abajo */
.modslide[data-l="ventas"]{grid-template-areas:
  "id   id   scr  scr  scr  scr"
  "read read scr  scr  scr  scr"
  "read read scr  scr  scr  scr"}
/* 02 · pantalla estrecha a la izquierda, la lectura toma la mitad derecha */
.modslide[data-l="crm"]{grid-template-areas:
  "scr  scr  scr  read read read"
  "scr  scr  scr  read read read"
  "scr  scr  scr  id   id   id"}
/* 03 · pantalla a todo lo ancho arriba, franja partida abajo */
.modslide[data-l="compras"]{grid-template-areas:
  "scr  scr  scr  scr  scr  scr"
  "scr  scr  scr  scr  scr  scr"
  "id   id   read read read read"}
/* 04 · identidad como columna completa a la izquierda */
.modslide[data-l="inventario"]{grid-template-areas:
  "id   id   scr  scr  scr  scr"
  "id   id   scr  scr  scr  scr"
  "id   id   read read read read"}
/* 05 · la lectura como columna completa a la derecha */
.modslide[data-l="cartera"]{grid-template-areas:
  "scr  scr  scr  scr  read read"
  "scr  scr  scr  scr  read read"
  "id   id   id   id   read read"}
/* 06 · espejo de la 05: la lectura manda desde la izquierda */
.modslide[data-l="caja"]{grid-template-areas:
  "read read id   id   id   id"
  "read read scr  scr  scr  scr"
  "read read scr  scr  scr  scr"}
/* 07 · la lectura arriba, la pantalla ancha abajo */
.modslide[data-l="conta"]{grid-template-areas:
  "read read read read id   id"
  "scr  scr  scr  scr  scr  scr"
  "scr  scr  scr  scr  scr  scr"}
/* 08 · pantalla alta a la izquierda (la tabla de producción necesita ancho) */
.modslide[data-l="ops"]{grid-template-areas:
  "scr  scr  scr  scr  id   id"
  "scr  scr  scr  scr  read read"
  "scr  scr  scr  scr  read read"}
/* 09 · identidad con peso, lectura corta: la hoja de tareas habla sola */
.modslide[data-l="proyectos"]{grid-template-areas:
  "id   id   scr  scr  scr  scr"
  "id   id   scr  scr  scr  scr"
  "read read scr  scr  scr  scr"}
/* 10 · tablero ancho arriba, mitades iguales abajo */
.modslide[data-l="reportes"]{grid-template-areas:
  "scr  scr  scr  scr  scr  scr"
  "scr  scr  scr  scr  scr  scr"
  "id   id   id   read read read"}

/* ---- la tarjeta base del bento ---- */
.bt{
  background:var(--panel);border:1px solid rgba(18,22,28,.06);border-radius:16px;
  padding:13px 15px;overflow:hidden;position:relative;min-width:0;
  display:flex;flex-direction:column;min-height:0;
  opacity:0;transform:translateY(16px) scale(.965);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * .055s);
}
.modslide.on .bt{opacity:1;transform:none}
.bt.d{background:var(--dark);border-color:transparent;color:var(--on-dark)}
.bt.t{background:color-mix(in oklab,var(--acc) 17%,#fff);border-color:transparent;
  transition:opacity .5s var(--ease),transform .6s var(--ease),background .5s var(--ease);
  transition-delay:calc(var(--i,0) * .055s)}
.bt-tag{font:400 9px var(--mono);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;flex:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bt.d .bt-tag{color:var(--on-dark-3)}
.bt .acc{color:var(--acc)}
.bt.d .acc{color:color-mix(in oklab,var(--acc) 82%,#fff)}

/* ---- átomos de datos ---- */
.ln{display:flex;justify-content:space-between;gap:10px;align-items:center;
  font-size:11.5px;padding:4.5px 0;border-bottom:1px solid var(--ink-line);min-width:0}
.bt.d .ln{border-color:var(--on-dark-line)}
.ln:last-child{border-bottom:0}
.ln > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln b{font:400 11.5px var(--mono);font-variant-numeric:tabular-nums;flex:none}
.ln.tot{border-top:1px solid currentColor;border-bottom:0;margin-top:4px;padding-top:7px}
.ln.tot b{font-size:13px}

.bars{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.bar{display:grid;grid-template-columns:minmax(0,1fr) 1.4fr auto;gap:8px;align-items:center;
  font:400 9.5px var(--mono);color:var(--ink-2);text-transform:uppercase}
.bt.d .bar{color:var(--on-dark-2)}
.bar > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar i{height:7px;border-radius:4px;background:rgba(18,22,28,.09);position:relative}
.bt.d .bar i{background:var(--on-dark-line)}
.bar i::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--acc);
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform .95s var(--ease) calc(var(--i,0) * .055s + .3s),background .5s var(--ease)}
.modslide.on .bar i::after{transform:scaleX(var(--w,.5))}
.bar b{font-weight:400;flex:none;color:var(--ink)}
.bt.d .bar b{color:#fff}

.bignum{font:700 clamp(19px,2.5vw,33px)/1 var(--mono);letter-spacing:-2.5px;margin-top:auto}
.bignum em{font-style:normal;font-size:.42em;margin-left:5px;opacity:.5;font-weight:400;letter-spacing:0}
.cap{font:400 9.5px var(--mono);color:var(--ink-3);margin-top:6px}
.bt.d .cap{color:var(--on-dark-3)}

.flow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:auto}
.flow s{text-decoration:none;font:400 8.5px var(--mono);text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r-pill);background:var(--panel-dp);color:var(--ink-2)}
.flow s.on{background:var(--acc);color:#0B1220;transition:background .5s var(--ease)}
.flow u{text-decoration:none;color:var(--ink-3);font-size:9px}

.kcards{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.kcards em{font-style:normal;background:var(--panel-dp);border-radius:8px;padding:6px 8px;
  font-size:10.5px;line-height:1.25;color:var(--ink-2)}
.bt.d .kcards em{background:rgba(255,255,255,.07);color:var(--on-dark-2)}

.mchart{margin-top:auto;display:flex;align-items:flex-end;gap:4px;flex:1;min-height:0}
.mchart i{flex:1;height:var(--h,50%);border-radius:3px 3px 0 0;background:var(--acc);opacity:.9;
  transform-origin:50% 100%;transform:scaleY(0);
  transition:transform .8s var(--ease) calc(var(--i,0) * .055s + .3s),background .5s var(--ease)}
.mchart i:last-child{opacity:1}
.modslide.on .mchart i{transform:none}

/* ---- copia de pantalla: el chrome real de la app ---- */
.scr{padding:0;background:var(--panel)}
.scr-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;flex:none;
  border-bottom:1px solid var(--ink-line);background:var(--panel-dp)}
.dots{display:flex;gap:4px;flex:none}
.dots b{width:7px;height:7px;border-radius:50%;background:rgba(18,22,28,.15);display:block}
.scr-t{font:500 11.5px var(--sans);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-t em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:7px}
.scr-act{margin-left:auto;display:flex;gap:5px;flex:none}
.scr-act s{text-decoration:none;font:400 8.5px var(--mono);text-transform:uppercase;
  padding:4px 8px;border-radius:6px;background:rgba(18,22,28,.06);color:var(--ink-2);white-space:nowrap}
.scr-act s.p{background:var(--acc);color:#0B1220;transition:background .55s var(--ease)}
.scr-tabs{display:flex;gap:2px;padding:0 12px;flex:none;border-bottom:1px solid var(--ink-line)}
.scr-tabs s{text-decoration:none;font:500 10.5px var(--sans);padding:8px 10px;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.scr-tabs s.on{color:var(--ink);border-bottom-color:var(--acc);transition:border-color .55s var(--ease)}
.scr-body{padding:11px 12px 12px;display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.scr-h,.scr-r{display:grid;gap:10px;align-items:center;min-width:0}
.scr-h{font:400 8.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
  padding-bottom:7px;border-bottom:1px solid var(--ink-line);flex:none}
.scr-r{font-size:11.5px;padding:6.5px 0;border-bottom:1px solid var(--ink-line);flex:none}
.scr-h > *,.scr-r > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.scr-r b{font:400 11.5px var(--mono);font-variant-numeric:tabular-nums}
.scr-r:last-of-type{border-bottom:0}
.scr-f{margin-top:auto;padding-top:10px;border-top:1px solid var(--ink-line);
  display:flex;align-items:center;gap:9px;flex:none;font:400 9.5px var(--mono);color:var(--ink-3);flex-wrap:wrap}
.st{font:400 8.5px var(--mono);text-transform:uppercase;padding:4px 8px;
  border-radius:var(--r-pill);background:rgba(18,22,28,.06);color:var(--ink-2);flex:none}
.st.ok{background:color-mix(in oklab,var(--acc) 24%,#fff);color:#0B1220;
  transition:background .55s var(--ease)}
.st.warn{background:rgba(217,119,6,.15);color:#8A5200}
.scr-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0;flex:1}
.scr-2 > div{min-width:0;display:flex;flex-direction:column;min-height:0}
.scr-2 h6{font:400 8.5px var(--mono);font-weight:400;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px}

/* ---- qué puedes leer aquí ---- */
.read{background:var(--dark);border-color:transparent;color:var(--on-dark)}
.read .q{font:400 8.5px var(--mono);text-transform:uppercase;
  color:var(--on-dark-3);flex:none;display:flex;align-items:center;gap:8px}
.read .q::before{content:"";width:14px;height:1px;background:currentColor;flex:none}
.read p{font-size:clamp(13px,1.2vw,17.5px);line-height:1.36;
  margin-top:auto;padding-top:14px;text-wrap:pretty}
.read p mark{background:none;color:color-mix(in oklab,var(--acc) 76%,#fff);
  transition:color .55s var(--ease)}
.read .from{font:400 9px var(--mono);text-transform:uppercase;
  color:var(--on-dark-3);margin-top:13px;padding-top:11px;
  border-top:1px solid var(--on-dark-line);flex:none}

/* ---- las tarjetas de texto se adaptan al hueco que les tocó ---- */
.idt,.read{container-type:size}
@container (max-height:210px){
  .idt .ms-i{width:32px;height:32px;border-radius:10px;margin-bottom:9px}
  .idt .ms-i svg{width:16px;height:16px}
  .idt h3{font-size:clamp(17px,1.9vw,23px);margin-bottom:5px}
  .idt p{font-size:11.5px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .read p{font-size:clamp(12.5px,1.05vw,15.5px);padding-top:10px}
  .read .from{margin-top:10px;padding-top:9px}
}
@container (max-width:280px){ .idt p{display:none} }

/* ---- la tarjeta de identidad del módulo ---- */
.idt{justify-content:center}
.ms-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in oklab,var(--acc) 18%,#fff);color:var(--acc);margin-bottom:13px;
  transition:background .5s var(--ease),color .5s var(--ease)}
.ms-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ms-n{font:400 9.5px var(--mono);text-transform:uppercase;
  color:var(--acc);margin-bottom:6px;transition:color .5s var(--ease)}
.idt h3{font-size:clamp(19px,2.2vw,28px);margin-bottom:8px;line-height:1.05}
.idt p{font-size:12.5px;color:var(--ink-2);line-height:1.45}
/* variante horizontal, cuando la identidad ocupa una franja */
.idt.row{flex-direction:row;align-items:center;gap:18px;justify-content:flex-start}
.idt.row .ms-i{margin-bottom:0}
.idt.row > div{min-width:0}
.idt.row .ms-n{margin-bottom:4px}
.idt.row h3{margin-bottom:4px}
.idt.row p{max-width:52ch}

.modpin-foot{font:500 11px var(--mono);color:var(--ink-3);
  white-space:nowrap;padding-bottom:4px}
/* el pie de PM enumera las cinco vistas: en un teléfono angosto no cabe en una
   línea y, con nowrap, desbordaba la ventana. Es un pie: puede plegarse. */
@media (max-width:560px){ .modpin-foot{white-space:normal;line-height:1.5} }
.modpin-foot b{color:var(--acc);font-weight:500;transition:color .6s var(--ease)}

/* ============ EL COSTO REAL — banda oscura, cajas que entran al scroll ============ */
.pin{position:relative;height:250vh;padding:0}
.pin-stage{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:var(--pad);
}
.pin-panel{
  background:var(--dark);color:var(--on-dark);border-radius:var(--r-xl);
  width:100%;height:calc(100vh - var(--pad)*2);position:relative;overflow:hidden;
  display:flex;align-items:center;
}
.pin-panel::after{
  content:"";position:absolute;left:50%;bottom:-22%;width:1100px;height:1100px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(54,136,255,calc(.09 + var(--p,0)*.17)),transparent 62%);
  transition:background .5s linear;
}
.pin-in{position:relative;width:min(calc(95% + var(--pad) * 1.9), var(--max), 95vw);margin-inline:auto}
.pin-in h2{color:var(--on-dark);max-width:22ch}
.pin-lead{color:var(--on-dark-2);font-size:clamp(16px,1.2vw,18px);max-width:46ch;margin-top:18px}

/* ---- las tres cajas ---- */
.cboxes{
  display:grid;gap:12px;margin-top:clamp(22px,3.2vh,42px);
  grid-template-columns:repeat(4,1fr);align-items:stretch;
}
.cbox{
  position:relative;background:var(--dark-2);border:1px solid var(--on-dark-line);
  border-radius:var(--r-lg);padding:clamp(18px,1.9vw,24px);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(44px) scale(.98);
  transition:opacity .75s var(--ease),transform .85s var(--ease),
             border-color .5s var(--ease),filter .7s var(--ease);
}
/* cada caja entra y se queda: la siguiente se suma, no la reemplaza */
.cbox.on{opacity:1;transform:none}

/* los cuatro dolores */
.cbox.old .px{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in oklab,var(--c-review) 20%,var(--dark-2));
  color:var(--c-review);margin-bottom:14px;
  transition:background .6s var(--ease),color .6s var(--ease);
}
.cbox.old .px svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.cbox h4{font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.28;margin-bottom:9px}
.cbox h4 > i{
  font-style:normal;
  text-decoration:line-through 1.5px;
  text-decoration-color:transparent;
  text-underline-offset:0;
  transition:text-decoration-color .5s var(--ease);
}
.cbox p{font-size:13px;color:var(--on-dark-2);line-height:1.5;margin-top:auto;padding-top:6px}

/* al aterrizar el remate azul, los cuatro dolores se tachan y se apagan.
   El retardo va sólo en .done: al volver hacia arriba se deshace sin esperar. */
.cboxes.done .cbox.old h4 > i{text-decoration-color:var(--c-review);transition-delay:.46s}
.cboxes.done .cbox.old:nth-child(2) h4 > i{transition-delay:.58s}
.cboxes.done .cbox.old:nth-child(3) h4 > i{transition-delay:.7s}
.cboxes.done .cbox.old:nth-child(4) h4 > i{transition-delay:.82s}
.cboxes.done .cbox.old{opacity:.5;filter:saturate(.55);transition-delay:.44s}
.cboxes.done .cbox.old .px{background:rgba(255,255,255,.07);color:var(--on-dark-3)}

/* el remate: azul, a todo lo ancho, con brillo propio */
.cbox.win{
  grid-column:1 / -1;background:var(--signal);border-color:transparent;color:#fff;
  box-shadow:0 26px 74px -30px rgba(54,136,255,.8);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  gap:clamp(18px,2.6vw,44px);align-items:center;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
}
.cbox.win .win-head{min-width:0}
.cbox.win .tag{
  display:block;font:500 clamp(12px,1.05vw,14px) var(--mono);text-transform:uppercase;
  letter-spacing:.06em;color:#fff;margin-bottom:11px;
}
.cbox.win h4{
  font-size:clamp(20px,2.4vw,31px);line-height:1.06;margin:0;
  max-width:15ch;text-wrap:balance;
}
.cbox.win p{
  color:rgba(255,255,255,.86);font-size:clamp(13px,1.05vw,15px);margin:0;padding:0;
  line-height:1.5;text-wrap:pretty;
}
.cbox.win .keep{
  list-style:none;margin:0;padding:0 0 0 clamp(16px,2vw,28px);
  border-left:1px solid rgba(255,255,255,.28);align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
}
.cbox.win .keep li{
  font:400 9.5px var(--mono);text-transform:uppercase;
  color:#fff;white-space:nowrap;display:flex;align-items:center;gap:8px;
}
.cbox.win .keep li::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.75);
}
.cbox.win::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.16),transparent 60%);
}

/* la banda mide 100vh: en pantallas bajas hay que apretar */
/* Estas dos aprietan las bandas fijadas cuando la pantalla es baja: en un
   portátil la sección se clava en 100vh y todo tiene que caber de una vez.
   En el teléfono no hay tal cosa — la banda se desplaza como cualquier otra
   sección — y un iPhone SE (667px de alto) caía aquí y perdía los párrafos.
   Por eso van atadas al ancho de escritorio, no sólo a la altura. */
@media (max-height:860px) and (min-width:901px){
  .pin-in h2,.modpin-title h2{font-size:var(--h2-sm)}
  .pin-lead{margin-top:12px;font-size:15.5px}
  .cboxes{margin-top:20px;gap:10px}
  .cbox{padding:16px 18px}
  .cbox p{font-size:12.5px}
  .cbox.win h4{font-size:clamp(19px,2.2vw,27px)}
}
@media (max-height:720px) and (min-width:901px){
  .cbox.old p{display:none}
  .cbox.old .px{margin-bottom:10px}
  .cbox.win p{display:none}
  .pin-lead{display:none}
}

/* ============ átomos compartidos: que las barras y el chart vivan fuera del bento ============ */
.in .bar i::after,.rv.in .bar i::after{transform:scaleX(var(--w,.5))}
.in .mchart i,.rv.in .mchart i{transform:none}

/* ============ SPLIT — copia a un lado, pantalla al otro ============ */
.split{
  display:grid;gap:clamp(28px,4vw,72px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.split.flip .split-copy{order:2}
.split.flip .split-view{order:1}
.split-copy h2{margin:18px 0 20px}
.split-copy p{font-size:clamp(15.5px,1.15vw,17px);color:var(--ink-2);line-height:1.6;
  max-width:52ch;margin-bottom:15px}
.split-copy p b{color:var(--ink);font-weight:500}
.split-copy .link-arrow{margin-top:6px}
/* copia densa desglosada en filas escaneables */
.split-feats{
  list-style:none;margin:22px 0 24px;padding:0;max-width:52ch;
  border-top:1px solid rgba(18,22,28,.09);
}
.split-feats li{
  display:grid;grid-template-columns:18px 1fr;column-gap:14px;row-gap:5px;
  align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(18,22,28,.09);
}
.split-feats li::before{
  content:"+";grid-column:1;grid-row:1;
  font:400 15px var(--mono);color:var(--signal);line-height:1.5;
}
.split-feats .ft-k{
  grid-column:2;grid-row:1;
  font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.4;
}
.split-feats .ft-d{
  grid-column:2;grid-row:2;
  font-size:15.5px;line-height:1.6;color:var(--ink-2);
}
.split-feats .ft-d b{color:var(--ink);font-weight:500}
.split-view{position:relative}
.split-note{
  display:flex;align-items:center;gap:9px;margin:14px auto 0;width:fit-content;
  font:400 10.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
}
.split-note i{
  width:6px;height:6px;border-radius:50%;background:var(--pos);flex:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--pos) 55%,transparent);
  animation:livedot 2.4s var(--ease) infinite;
}
@keyframes livedot{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--pos) 55%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}
}

/* ============ CASOS REALES — tablero de instalaciones vivas ============ */
.cred{background:var(--stone);overflow:hidden}
/* cabecera asimétrica: titular a la izquierda, las cifras como libro a la derecha */
.cred-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,68px);
}
.cred-head h2{margin-top:20px;max-width:20ch}
.ledger{display:flex;flex-direction:column}
.lrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--ink-line);
}
.lrow:first-child{padding-top:0}
.lrow:last-child{border-bottom:0;padding-bottom:0}
.lrow .lv{
  font-family:var(--mono);font-weight:700;letter-spacing:-2.5px;
  font-size:clamp(26px,3vw,40px);line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lrow .lv em{font-style:normal;color:var(--signal);letter-spacing:0}
.lrow .ll{
  font:400 10px var(--mono);text-transform:uppercase;
  color:var(--ink-3);text-align:right;max-width:14ch;line-height:1.5;
}

/* las tres fichas, escalonadas y con deriva al scroll */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);align-items:start}
.client-slot{will-change:transform;transform:translateY(var(--dy,0px))}
.client-slot:nth-child(1){padding-top:0}
.client-slot:nth-child(2){padding-top:clamp(20px,4vw,58px)}
.client-slot:nth-child(3){padding-top:clamp(10px,2vw,26px)}
.client{
  background:var(--panel);border:1px solid rgba(18,22,28,.06);border-radius:var(--r-lg);
  padding:24px 26px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  min-height:clamp(196px,19vw,240px);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s;
}
.client::after{ /* brillo que sigue al cursor */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
    color-mix(in oklab,var(--cc,var(--signal)) 13%,transparent),transparent 70%);
}
.client:hover{
  transform:translateY(-6px);
  border-color:color-mix(in oklab,var(--cc,var(--signal)) 42%,transparent);
  box-shadow:0 26px 60px -28px rgba(18,22,28,.3);
}
.client:hover::after{opacity:1}
.c-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:clamp(20px,2.2vw,30px);position:relative}
.c-mono{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in oklab,var(--cc,var(--signal)) 15%,var(--panel));
  color:var(--cc-ink,var(--signal-deep));
  font:500 13px var(--mono);
  transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease);
}
.client:hover .c-mono{
  background:var(--cc,var(--signal));color:#fff;transform:rotate(-6deg) scale(1.07);
}
.c-live{
  display:flex;align-items:center;gap:7px;flex:none;
  font:400 9.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
}
.c-live i{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:none;
  animation:livedot 2.4s var(--ease) infinite}
.c-name{
  font-size:clamp(19px,1.85vw,26px);font-weight:500;line-height:1.18;
  position:relative;text-wrap:balance;
}
/* el sector queda anclado abajo: el nombre respira arriba y la ficha tiene por qué ser alta */
.c-tag{
  font-size:13.5px;color:var(--ink-2);position:relative;line-height:1.45;
  margin-top:auto;padding-top:18px;
}

@media (max-width:1080px){
  .cred-head{grid-template-columns:1fr;align-items:start}
  .ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .lrow{flex-direction:column;align-items:flex-start;gap:8px;
    border-bottom:0;border-top:1px solid var(--ink-line);padding:16px 0 0}
  .lrow:first-child{padding-top:16px}
  .lrow .ll{text-align:left;max-width:none}
}
@media (max-width:860px){
  .clients{grid-template-columns:1fr 1fr}
  .client-slot{padding-top:0!important;transform:none!important}
  .client-slot:nth-child(3){grid-column:span 2}
}
@media (max-width:620px){
  .clients{grid-template-columns:1fr}
  .client-slot:nth-child(3){grid-column:auto}
  .ledger{grid-template-columns:1fr}
}

/* ============ PILARES — lista editorial numerada, no otra fila de tarjetas ============ */
.pilares{background:var(--stone)}
.pilar-list{margin-top:clamp(6px,1vw,14px)}
.pilar{
  --pa:var(--signal);
  position:relative;display:grid;align-items:start;
  grid-template-columns:clamp(46px,4.4vw,62px) minmax(0,.9fr) minmax(0,1.2fr);
  gap:clamp(18px,2.8vw,48px);
  /* la franja se sale --pil-x por lado y vuelve a entrar con el relleno, para
     que el fondo del hover rebase el texto. Ya no hay relleno en .wrap que lo
     absorba, así que se topa con el margen real: 2,5% de pantalla son 1/38
     del contenedor. Sin el tope, en un teléfono se salía de la ventana. */
  --pil-x:min(clamp(14px,1.6vw,22px), calc(100% / 38));
  padding:clamp(26px,2.9vw,38px) var(--pil-x);
  margin-inline:calc(-1 * var(--pil-x));
  transition:background .45s var(--ease);
  border-radius:var(--r-md);
}
/* la regla se dibuja de izquierda a derecha cuando la fila entra */
.pilar::before{
  content:"";position:absolute;top:0;left:var(--pil-x);right:var(--pil-x);height:1px;background:var(--ink-line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease) var(--d,0s);
}
.pilar.in::before{transform:scaleX(1)}
.pilar:last-child::after{
  content:"";position:absolute;bottom:0;left:var(--pil-x);right:var(--pil-x);height:1px;background:var(--ink-line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease) calc(var(--d,0s) + .18s);
}
.pilar.in:last-child::after{transform:scaleX(1)}
.pilar:hover{background:var(--panel)}

/* el contenido entra después de la regla */
.pilar > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease) calc(var(--d,0s) + .2s),
             transform .8s var(--ease) calc(var(--d,0s) + .2s);
}
.pilar > *:nth-child(2){transition-delay:calc(var(--d,0s) + .3s)}
.pilar > *:nth-child(3){transition-delay:calc(var(--d,0s) + .4s)}
.pilar.in > *{opacity:1;transform:none}

.p-idx{
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  font:400 clamp(11px,1vw,12px) var(--mono);color:var(--ink-3);
  transition:color .4s var(--ease);
}
.pilar:hover .p-idx{color:var(--pa)}
.p-mid{min-width:0;padding-top:.05em}
.pilar .ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in oklab,var(--pa) 15%,var(--panel));
  color:var(--pa-ink,var(--signal-deep));
  transition:background .45s var(--ease),color .45s var(--ease),transform .5s var(--ease);
}
.pilar:hover .ic{background:var(--pa);color:#fff;transform:rotate(-6deg) scale(1.07)}
.pilar .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.pilar h3{
  font-size:clamp(20px,2.2vw,30px);line-height:1.14;
  text-wrap:balance;margin:0;
}
.pilar p{
  font-size:clamp(15px,1.15vw,17px);color:var(--ink-2);line-height:1.6;margin:0;
  max-width:56ch;padding-top:.2em;
}
.chip-ve{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:10px;
  padding:5px 10px;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--c-done) 18%,var(--panel));color:#0B6B45;
  font:500 10px var(--mono);white-space:nowrap;
}

@media (max-width:900px){
  .pilar{
    grid-template-columns:clamp(40px,7vw,64px) minmax(0,1fr);
    gap:14px clamp(14px,3vw,26px);
    /* sin hover que resaltar, la franja no necesita rebasar el texto: a cero
       para que el margen negativo no despegue la fila del borde del contenido */
    --pil-x:0px;
    padding:26px 0;
  }
  .pilar p{grid-column:2;max-width:none}
  .pilar:hover{background:transparent}
}
/* En el teléfono las cuatro cajas se apilan y el pin no corre: llegas cuando
   ya están tachadas, sin haber visto tacharse. Al 50% y desaturadas se leían
   como contenido deshabilitado. El tachado basta para decir "resuelto". */
@media (max-width:900px){
  .cboxes.done .cbox.old{opacity:.86;filter:none}
}
@media (max-width:560px){
  .pilar{grid-template-columns:1fr;gap:14px}
  .pilar p{grid-column:auto}
  .p-idx{padding-top:0}
}

/* ============ tarjetas de demo dentro de los split ============ */
.dcard{
  background:var(--panel);border:1px solid rgba(18,22,28,.06);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 22px 62px -34px rgba(18,22,28,.3);
}
.dcard + .dcard{margin-top:12px}
.dcard .scr-bar{padding:12px 18px}
.dcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}

/* embudo del CRM */
.stages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stages s{
  text-decoration:none;font:400 9.5px var(--mono);text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);background:var(--panel-dp);color:var(--ink-3);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.stages s.done{background:var(--signal-tint);color:var(--signal-deep)}
.stages s.won{background:var(--pos);color:#08301f}
/* la etapa activa late una vez al entrar */
.stages s.now{box-shadow:0 0 0 0 color-mix(in oklab,var(--signal) 45%,transparent);
  animation:stagePulse 1.1s var(--ease)}
@keyframes stagePulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--signal) 45%,transparent)}
  100%{box-shadow:0 0 0 9px transparent}
}
.stages u{text-decoration:none;color:var(--ink-3);font-size:9px}
.deal{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px;border-radius:var(--r-md);background:var(--panel-dp);
}
.ring{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
.ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.ring .bgc{stroke:rgba(18,22,28,.1)}
.ring .fgc{stroke:var(--signal);stroke-dasharray:113;
  stroke-dashoffset:calc(113 - 113 * var(--pct,0));
  transition:stroke-dashoffset .85s var(--ease),stroke .5s var(--ease)}
.ring.won .fgc{stroke:var(--pos)}
.ring b{transition:color .4s var(--ease)}
.ring.won b{color:#0B6B45}
.st{transition:background .45s var(--ease),color .45s var(--ease)}
.ring b{position:absolute;font:400 11px var(--mono);}
.deal .dn{font-size:14px;font-weight:500;line-height:1.3}
.deal .dm{font:400 11.5px var(--mono);color:var(--ink-2);margin-top:4px}
.hist{display:flex;flex-direction:column;gap:2px}
.hitem.hnew{
  overflow:hidden;max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent;
  transition:max-height .55s var(--ease),opacity .45s var(--ease),
             padding .55s var(--ease),border-color .45s;
}
.hitem.hnew.show{max-height:46px;opacity:1;padding-top:9px;padding-bottom:9px;
  border-bottom-color:var(--ink-line)}
.hitem.hnew i{background:color-mix(in oklab,var(--pos) 18%,var(--panel));color:#0B6B45}
.hitem.hnew span:first-of-type{color:#0B6B45}
.hitem{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--ink-line);font-size:13px;
}
.hitem:last-child{border-bottom:0}
.hitem i{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel-dp);color:var(--ink-3);
}
.hitem i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hitem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hitem .hw{font:400 10px var(--mono);text-transform:uppercase;color:var(--ink-3)}

/* kanban del PM */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kb-col{display:flex;flex-direction:column;gap:7px;min-width:0}
.kh{
  display:flex;align-items:center;gap:7px;
  font:400 9px var(--mono);text-transform:uppercase;color:var(--ink-3);
  padding-bottom:4px;
}
.kh i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--c-todo)}
.kb-col:nth-child(2) .kh i{background:var(--c-progress)}
.kb-col:nth-child(3) .kh i{background:var(--c-done)}
.kcard{
  background:var(--panel-dp);border-radius:10px;padding:10px 11px;font-size:12px;line-height:1.35;
  display:flex;flex-direction:column;gap:9px;
}
.kcard.mover{position:relative;z-index:2;will-change:transform}
.kcard.mover.lift{
  box-shadow:0 14px 30px -12px rgba(18,22,28,.4);
  background:var(--panel);
}
/* hueco que se abre en la columna destino mientras la tarjeta llega */
.kslot{
  height:0;border-radius:10px;transition:height .45s var(--ease),margin .45s var(--ease);
  border:1px dashed transparent;
}
.kslot.open{height:44px;margin-bottom:7px;border-color:var(--ink-line)}
.kav{display:flex;gap:-4px}
.kav span{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:500 8.5px var(--mono);color:#fff;border:1.5px solid var(--panel);margin-right:-6px;
}
/* rentabilidad */
.rh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
.rh b{font-weight:500;}
.rh span{font:400 11px var(--mono);color:var(--ink-3)}
.rbar{height:10px;border-radius:6px;background:rgba(18,22,28,.08);display:flex;overflow:hidden}
.rbar span{height:100%;width:0;transition:width 1.15s var(--ease)}
.rbar .spent{background:var(--signal)}
.rbar .comp{background:color-mix(in oklab,var(--signal) 42%,var(--panel))}
.rbar.run .spent{width:61%}
.rbar.run .comp{width:17%;transition-delay:.35s}
.rleg{display:flex;gap:18px;font:400 10.5px var(--mono);color:var(--ink-2)}
.rleg span{display:flex;align-items:center;gap:7px}
.rleg b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.rleg i{width:8px;height:8px;border-radius:3px;flex:none}
.rleg .l1 i{background:var(--signal)}
.rleg .l2 i{background:color-mix(in oklab,var(--signal) 42%,var(--panel))}
.rmargin{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px solid var(--ink-line);
  font:400 10.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
}
.rmargin b{font:700 19px var(--mono);letter-spacing:-2.5px;color:#0B6B45;text-transform:none}

/* cobro multimoneda */
.mm-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--ink-line);font-size:13px;
}
.mm-row .mu{font:400 12px var(--mono);color:var(--ink-2);min-width:64px;text-align:right}
.mm-row .ma{font:400 12.5px var(--mono);font-variant-numeric:tabular-nums;min-width:104px;text-align:right}
.mm-tag{
  display:inline-block;margin-left:7px;padding:3px 7px;border-radius:var(--r-pill);
  font:500 9px var(--mono);
  background:var(--signal-tint);color:var(--signal-deep);
}
.mm-tag.bs{background:color-mix(in oklab,var(--c-todo) 20%,var(--panel));color:#4C2A9E}
.mm-badge{
  display:inline-block;margin-left:7px;padding:3px 8px;border-radius:var(--r-pill);
  font:500 9px var(--mono);text-transform:uppercase;
  background:color-mix(in oklab,var(--c-progress) 22%,var(--panel));color:#7A4A00;
}
.mm-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:6px;padding-top:13px;border-top:1px solid var(--ink);
}
.mm-total .lbl{font:400 10.5px var(--mono);text-transform:uppercase;color:var(--ink-2)}
.mm-total .val{font:700 20px var(--mono);letter-spacing:-2.5px}
.mm-check{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-md);
  background:color-mix(in oklab,var(--pos) 14%,var(--panel));
  font-size:12.5px;color:#0B6B45;
}
.mm-check .chk{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--pos);color:#08301f;
}
.mm-check .chk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* tira de conversión + entrada animada del cobro */
.mm-ref{color:var(--ink-3);font-family:var(--mono);font-size:11.5px}
.mm-list{display:block}
.mm-fx{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 13px;border-radius:var(--r-md);background:var(--panel-dp);
  font:400 13px var(--mono);font-variant-numeric:tabular-nums;
}
.mm-fx .u{color:var(--signal-deep);font-weight:500}
.mm-fx .ar{color:var(--ink-3)}
.mm-fx .b{color:var(--ink)}
.mm-fx .r{margin-left:auto;font-size:9.5px;text-transform:uppercase;color:var(--ink-3)}
#mmDemo .mm-fx{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
#mmDemo .mm-fx.show{opacity:1;transform:none}
#mmDemo .mm-row.pend{opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
#mmDemo .mm-row.pend.show{opacity:1;transform:none}
#mmDemo .mm-row.pend.show .mm-badge{animation:mm-badge .6s var(--ease)}
@keyframes mm-badge{0%{opacity:0;transform:scale(.75)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
#mmDemo .mm-check{opacity:0;transform:translateY(9px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
#mmDemo .mm-check.show{opacity:1;transform:none}
#mmDemo .mm-check.show .chk{animation:mm-chk .55s var(--ease)}
@keyframes mm-chk{0%{transform:scale(0)}62%{transform:scale(1.2)}100%{transform:scale(1)}}
#mmDemo .mm-total .val{transition:color .4s var(--ease)}
#mmDemo.done .mm-total .val{color:#0B6B45}

/* ============ responsive de las secciones nuevas ============ */
@media (max-width:1080px){
  /* minmax(0,·) y no 1fr: un track 1fr toma como mínimo automático el
     min-content de su contenido, y la barra de título de las maquetas
     (nowrap + elipsis) lo empujaba a 421px — 51px de desborde horizontal
     en la home y en ERP, que body{overflow-x:hidden} sólo tapaba. */
  .split{grid-template-columns:minmax(0,1fr)}
  .split-copy,.split-view{min-width:0}
  .split.flip .split-copy,.split.flip .split-view{order:0}
}
@media (max-width:760px){
  .clients,.stats{grid-template-columns:1fr}
  .stats{gap:22px}
  .kb{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mm-row{grid-template-columns:minmax(0,1fr) auto}
  .mm-row .mu{grid-column:2;min-width:0}
}

/* ============ PRECIO — la sección leída como un documento de Taskia ============ */
.precio{background:var(--stone)}
.precio .sec-head{margin-bottom:clamp(34px,4vw,52px)}
.precio-grid{
  display:grid;gap:clamp(20px,3vw,40px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;
}
.precio-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:104px}
.precio-aside .lead{max-width:38ch}
.precio-note{
  background:var(--panel);border:1px solid rgba(18,22,28,.06);border-radius:var(--r-md);
  padding:18px 20px;font-size:14.5px;color:var(--ink-2);line-height:1.5;
}
.precio-note b{color:var(--ink);font-weight:500}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:15px;font-weight:500;color:var(--signal-deep);
  border-bottom:1px solid transparent;transition:border-color .3s,gap .35s var(--ease);
}
.link-arrow::after{content:"→";transition:transform .35s var(--ease)}
.link-arrow:hover{border-bottom-color:currentColor}
.link-arrow:hover::after{transform:translateX(4px)}

/* el documento */
.pdoc{
  background:var(--panel);border:1px solid rgba(18,22,28,.06);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 20px 60px -32px rgba(18,22,28,.26);
}
.pdoc .scr-bar{padding:12px 20px}
.pdoc-body{padding:6px 20px 20px}
.pline{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:18px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--ink-line);
}
.pline .pn{
  font:400 10.5px var(--mono);color:var(--ink-3);
  padding-top:4px;white-space:nowrap;
}
.pline h4{font-size:clamp(15px,1.25vw,17.5px);line-height:1.25}
.pline p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:6px;max-width:48ch}
.pline .pv{
  text-align:right;font:400 10.5px var(--mono);text-transform:uppercase;
  color:var(--ink-2);padding-top:4px;white-space:nowrap;
}
.pline .pv b{display:block;font-weight:400;font-size:15px;
  text-transform:none;color:var(--ink);margin-top:4px}

/* la línea que nunca se cobra: es el argumento, así que se separa y se pinta */
.pline.never{
  --pos-ink:#0B6B45;                 /* verde legible sobre blanco; --pos es el tinte */
  border-bottom:0;margin-top:14px;padding:20px;border-radius:var(--r-md);
  background:color-mix(in oklab,var(--pos) 15%,var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--pos) 42%,transparent);
}
.pline.never .pn{color:var(--pos-ink);font-weight:500}
.pline.never .pv{color:color-mix(in oklab,var(--pos-ink) 62%,var(--ink))}
.pline.never .pv b{color:var(--pos-ink);font-size:17px}
.pline.never h4{color:var(--ink)}
.pline.never p{color:var(--ink-2)}
.pdoc-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--ink-line);background:var(--panel-dp);
  font:400 10px var(--mono);text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:1080px){
  .precio-grid{grid-template-columns:1fr}
  .precio-aside{position:static}
}
@media (max-width:560px){
  .pline{grid-template-columns:32px minmax(0,1fr);gap:14px}
  .pline .pv{grid-column:2;text-align:left;padding-top:10px}
  .pline .pv b{display:inline;margin-left:8px}
  /* la primera columna mide lo que ocupa "01"; en la línea del "Nunca" ahí
     dentro va además la palabra, que no cabe y se montaba sobre el título */
  .pline.never{grid-template-columns:minmax(0,1fr)}
  .pline.never .pn{grid-column:1;margin-bottom:2px;padding-top:0}
  .pline.never .pv{grid-column:1}
}

/* ============================ FOOTER ============================ */
/* clip-path en el contenedor ⇒ el hijo fixed queda recortado y se revela con parallax */
.f-reveal{position:relative}
#fReveal{clip-path:inset(0)}
.f-reveal.on > .footer{position:fixed;bottom:0;left:0;width:100%}
.footer{padding:var(--pad);display:flex;flex-direction:column;gap:var(--pad);background:var(--stone)}
.f-panel{border-radius:var(--r-xl);position:relative;overflow:hidden}

.f-cta{background:var(--signal);color:#fff;padding:clamp(56px,7vw,96px) 0 clamp(84px,9vw,132px);text-align:center}
.f-cta .mark{
  position:absolute;left:50%;bottom:-10%;
  transform:translate(-50%,var(--wy,0px));
  font-size:clamp(120px,21vw,300px);font-weight:500;line-height:.8;
  color:rgba(255,255,255,.14);pointer-events:none;user-select:none;white-space:nowrap;
}
.f-cta-in{position:relative;width:min(calc(95% + var(--pad) * 1.9), 720px, 95vw);margin-inline:auto}
.f-cta h2{color:#fff;margin:0 0 14px}
.f-cta p{color:rgba(255,255,255,.78);font-size:17px;max-width:52ch;margin-inline:auto}
.f-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.f-cta .btn-line{border-color:rgba(255,255,255,.42);color:#fff}
.f-cta .btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff}

.f-links{background:var(--dark);color:var(--on-dark);padding:clamp(32px,4vw,44px) 0 24px}
.f-cols,.f-divider,.f-bottom{width:min(calc(95% + var(--pad) * 1.9), var(--max), 95vw);margin-inline:auto}
.f-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.f-col-title{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:18px}
.f-brand .logo{color:#fff;margin-bottom:14px}
.f-brand p{font-size:14.5px;color:var(--on-dark-2);max-width:30ch}
.f-brand .mail{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:13px;color:#fff;
  border-bottom:1px solid var(--on-dark-line);padding-bottom:2px}

/* enlaces del footer — subrayado que entra desde la izquierda */
.chx{
  display:block;width:fit-content;position:relative;padding:6px 0;font-size:15px;
  color:var(--on-dark-2);transition:color .22s var(--ease);
}
.chx::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .34s var(--ease);
}
.chx:hover{color:#fff}
.chx:hover::after{transform:scaleX(1);transform-origin:left}

.f-divider{height:1px;background:var(--on-dark-line);margin-block:36px 20px}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--on-dark-3)}
.f-top{display:inline-flex;align-items:center;gap:9px;color:var(--on-dark-2);transition:color .2s}
.f-top:hover{color:#fff}
.f-top span{width:28px;height:28px;border-radius:var(--r-pill);border:1px solid var(--on-dark-line);
  display:grid;place-items:center;transition:transform .45s var(--ease),border-color .2s}
.f-top:hover span{transform:translateY(-4px);border-color:#fff}

/* ---------------- nota de la maqueta ---------------- */
.note{position:fixed;left:16px;bottom:16px;z-index:98;max-width:330px;
  background:var(--ink);color:#fff;border-radius:var(--r-md);padding:14px 16px;
  font-size:12.5px;line-height:1.5;box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.note b{font-weight:500}
.note .label{color:rgba(255,255,255,.4);margin-bottom:8px}
.note .label::before{width:14px;background:rgba(255,255,255,.4)}
.note button{position:absolute;top:8px;right:10px;background:none;border:0;
  color:rgba(255,255,255,.5);font-size:16px;cursor:pointer;line-height:1}

/* ---------------- resplandor que sigue el cursor ----------------
   dos capas: 'screen' aclara sobre superficies oscuras,
   'multiply' tiñe sobre las claras — el brillo se lee en ambas. */
.cglow{
  /* el diámetro del resplandor se toca aquí y en --glow de la capa multiply */
  --glow:140px;
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  pointer-events:none;z-index:50;opacity:0;transition:opacity .55s var(--ease);
}
.cglow.on{opacity:1}
.cglow::after{
  content:"";position:absolute;top:0;left:0;
  width:var(--glow);height:var(--glow);
  margin:calc(var(--glow) / -2) 0 0 calc(var(--glow) / -2);border-radius:50%;
  transform:translate3d(var(--gx,-1000px),var(--gy,-1000px),0);
  will-change:transform;
}
.cglow--screen{mix-blend-mode:screen}
.cglow--screen::after{
  background:radial-gradient(circle at center,
    rgba(130,188,255,.62),rgba(88,155,255,.20) 26%,transparent 62%);
}
/* la capa multiply va algo más ancha, para que el tinte no corte en seco */
.cglow--mult{mix-blend-mode:multiply;--glow:190px}
.cglow--mult::after{
  background:radial-gradient(circle at center,
    rgba(56,98,188,.24),rgba(56,98,188,.06) 38%,transparent 64%);
}
@media (hover:none),(pointer:coarse){.cglow{display:none}}

/* ---------------- motor de revelado ---------------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease) var(--d,0s),transform .85s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv-tile{opacity:0;transform:translateY(34px) scale(.975);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.rv-tile.in{opacity:1;transform:none}
/* titular palabra por palabra con máscara */
.w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.16em;margin-bottom:-.16em}
.w > i{display:inline-block;font-style:inherit;color:inherit;transform:translateY(108%);
  transition:transform .95s var(--ease) var(--wd,0s)}
.in .w > i,.w.in > i{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv-tile,.w > i{opacity:1!important;transform:none!important}
  .chip{opacity:1!important;transform:none!important}
  .anim .fact-row,.anim .fact-tot,.anim .proc-btn,
  .anim .inv-row,.anim .inv-foot,.anim .asto-card,.anim .inv-cols{opacity:1!important}
  .anim *{animation:none!important}
  .pill-a{opacity:0!important}.pill-b{opacity:1!important}
  .demo-caption .live{animation:none}
  .marq{animation:none}
  .pin{height:auto}
  .pin-stage{position:static;height:auto;padding:var(--pad)}
  .pin-panel{height:auto;padding-block:clamp(52px,7vw,96px)}
  .cbox{opacity:1!important;transform:none!important}
  .cboxes .cbox.old h4 > i{text-decoration-color:var(--c-review)!important}
  /* los módulos pasan a carrusel: ver el bloque compartido más abajo */
  .f-reveal.on > .footer{position:static}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .f-cols{grid-template-columns:1fr 1fr 1fr}
  .pin{height:auto}
  .pin-stage{position:static;height:auto}
  .pin-panel{height:auto;padding-block:clamp(52px,7vw,96px)}
  .cboxes{grid-template-columns:1fr 1fr}
  .cbox.win{grid-column:1 / -1;grid-template-columns:1fr;gap:16px}
  .cbox.win h4{max-width:none}
  .cbox.win .keep{padding:14px 0 0;border-left:0;
    border-top:1px solid rgba(255,255,255,.26);
    flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  /* los módulos pasan a carrusel: ver el bloque compartido más abajo */
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  /* "Ingresar" vive en el cajón; sacarlo del header libera ~92px */
  .nav-right .ghost{display:none}
  .hero-grid,.sec-head{grid-template-columns:1fr;align-items:start}
  .hero-copy > .chip.float,.sec-head > .chip.float{
    position:static;justify-self:start;margin:0 0 14px}
  .pin-panel .chip.float,.f-cta .chip.float{display:none}
  /* El tope de 480px sin márgenes automáticos dejaba la maqueta pegada a la
     izquierda con un hueco a la derecha en todo el tramo de ~500 a 860px: como
     el hero pasa a una sola columna, un elemento con max-width se alinea al
     inicio de la columna, no al centro. */
  .demo-stage{min-height:0;margin-top:34px;max-width:480px;margin-inline:auto;
    /* apiladas ya no hay giro que mostrar, y el contexto 3D obligaba a rasterizar
       la tarjeta y reescalarla: de ahí que el texto se viera ligeramente sucio */
    perspective:none}
  .fact-card,.asto-card{position:static;width:100%;margin-bottom:14px}
  /* el desenfoque de fondo tampoco tiene qué desenfocar acá —detrás solo está el
     fondo plano de la página— y era la otra mitad de la pérdida de nitidez */
  .demo-stage .ui-card{
    background:var(--panel);border-color:var(--ink-line);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .asto-card{margin-bottom:0}
  .demo-stage.anim *{animation:none!important;opacity:1!important;transform:none!important}
  .demo-stage .pill-a{opacity:0!important}
  .demo-caption{position:static;transform:none;margin:16px auto 0;white-space:normal;text-align:center}
  .pin{height:auto}
  .pin-stage{position:static;height:auto}
  /* el ancho de .pin-in está calculado para compensar el relleno del panel en
     escritorio; aquí lo dejaba al ras y el texto salía a 4px del borde oscuro */
  .pin-panel{height:auto;padding-block:clamp(52px,7vw,88px);padding-inline:clamp(16px,4.5vw,24px)}
  .pin-in{width:100%}
  .cboxes{grid-template-columns:1fr}
  /* el pie tiene el mismo problema que la banda: dos paneles con fondo cuyo
     relleno lateral es cero, así que el texto se pegaba al borde de color */
  .f-cta,.f-links{padding-inline:clamp(16px,4.5vw,24px)}
  .f-cta-in,.f-cols,.f-divider,.f-bottom{width:100%}
  /* misma fórmula de ancho, mismo resultado: al ras del borde de color */
  .duopin-scene{padding-inline:clamp(16px,4.5vw,24px)}
  .duopin-in,.duopin-in.flip{width:100%}
  /* el tour del editor: mismo caso, y además el carril de fichas se sangra
     con un negativo calculado sobre el relleno del contenedor. Sin relleno,
     ese negativo sacaba las fichas fuera de la caja de color. Se atan los dos
     a la misma medida y el carril vuelve a morir justo en el filo. */
  .tourpin-box{--tour-x:clamp(16px,4.5vw,24px);padding-inline:var(--tour-x)}
  .tourpin-in{width:100%}
  .tour-caps{
    margin-inline:calc(-1 * var(--tour-x));
    padding-inline:var(--tour-x);scroll-padding-inline:var(--tour-x);
  }
  /* el editor se corta en seco a media altura; un desvanecido dice que sigue */
  .te{position:relative}
  .te::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
    pointer-events:none;border-radius:inherit;
    background:linear-gradient(transparent,color-mix(in oklab,var(--panel) 92%,transparent));
  }
  .f-reveal{clip-path:none}
  .f-reveal.on > .footer{position:static}
  .note{display:none}
}
@media (max-width:620px){
  .modpin-view{grid-template-columns:1fr}
}
@media (max-width:560px){
  .f-cols{grid-template-columns:1fr 1fr}
  /* el CTA se queda en el header en todos los tamaños — es el botón que convierte —
     pero se compacta para caber junto al logo y el burger hasta en pantallas de 320px */
  .nav-right .btn-sm{height:36px;padding:0 13px;font-size:13px}
  .nav-in{gap:10px}
}

/* ============================================================
   MÓDULOS EN CARRUSEL
   Sin espacio para fijar la sección — o con movimiento reducido — las diez
   composiciones de bento no caben. En vez de esconder las maquetas (que es la
   prueba de producto más fuerte de la home), cada módulo pasa a ser una tarjeta
   que se desliza. Una sola media query cubre los dos casos.
   ============================================================ */
@media (max-width:1080px), (prefers-reduced-motion:reduce){
  .modpin{height:auto}
  .modpin-stage{position:static;min-height:0;overflow:visible;
    padding-block:clamp(48px,9vw,88px)}
  .modpin-panel{gap:20px}

  .modpin-view{
    min-height:0;display:flex;gap:14px;
    grid-template-columns:none;                     /* anula la rejilla de escritorio */
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* sangrar hasta el borde: la tarjeta siguiente asoma y se lee como carrusel */
    margin-inline:calc(-100% / 38);
    padding-inline:calc(100% / 38);scroll-padding-inline:calc(100% / 38);
    padding-block:4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .modpin-view::-webkit-scrollbar{display:none}

  /* [data-l] para empatar la especificidad de las diez composiciones de escritorio:
     si no, sus grid-template-areas de 6 columnas siguen mandando */
  .modslide,.modslide[data-l]{
    position:relative;inset:auto;display:grid;
    flex:0 0 min(86vw,520px);scroll-snap-align:start;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;grid-auto-flow:row;
    grid-template-areas:none;
    gap:12px;opacity:1;pointer-events:auto;
  }
  /* en escritorio las piezas entran al activarse la diapositiva; aquí ya están */
  .modslide .bt{
    display:block;grid-area:auto!important;opacity:1;transform:none;
  }
  /* tres bandas: quién es, su maqueta y el «Qué puedes leer aquí». La maqueta
     se queda con el hueco que sobre (1fr) y las dos de texto con el suyo, así
     que la tarjeta no se dispara de alto por el pie. */
  .modslide,.modslide[data-l]{grid-template-rows:auto minmax(0,1fr) auto}
  .modslide .idt{display:flex;min-height:0;container-type:normal}
  .modslide .read{container-type:normal}
  .idt.row{flex-direction:column;align-items:flex-start;gap:0}
  .idt.row .ms-i{margin-bottom:13px}
  .modslide .bar i::after{transform:scaleX(var(--w,.5))}
  .modslide .mchart i{transform:none}

  /* la maqueta se encoge en bloque en vez de reflowear: las tablas de un ERP
     con columnas de 44/84/92px no sobreviven a 320px de ancho */
  .modslide .scr{zoom:.86}
}
@media (max-width:620px){
  .modslide{flex-basis:88vw}
  .modslide .scr{zoom:.58}
}

/* ============================================================
   MOVIMIENTO POR SCROLL — páginas de producto
   site.js publica --sp (0..1 al entrar) y --dy (deriva). De aquí para abajo
   todo es CSS. Cada efecto está atado a la posición del scroll, así que se
   puede parar, invertir y retomar a medias: lo conduce el dedo, no un reloj.
   Sólo transform y opacity, para que el trabajo lo haga el compositor.
   ============================================================ */

/* ---- la cadena: una cosa alimenta a la siguiente ---- */
.flow{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px;margin-top:clamp(26px,3.4vw,40px);
}
.flow s{
  --lp:clamp(0,calc((var(--sp,0) - var(--i)*.22) * 4.4),1);
  --fc:var(--signal);--fi:var(--signal-deep);
  text-decoration:none;display:inline-flex;align-items:center;
  padding:9px 17px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:clamp(13.5px,1.05vw,15px);font-weight:500;
  border:1px solid color-mix(in oklab,var(--fc) calc(var(--lp)*55%),var(--ink-line));
  background:color-mix(in oklab,var(--fc) calc(var(--lp)*15%),var(--panel));
  color:color-mix(in oklab,var(--fi) calc(var(--lp)*100%),var(--ink-3));
  transform:translateY(calc((1 - var(--lp)) * 9px));
  opacity:calc(.45 + .55*var(--lp));
}
.flow s:nth-of-type(1){--i:0}
.flow s:nth-of-type(2){--i:1;--fc:var(--c-progress);--fi:#8A5B00}
.flow s:nth-of-type(3){--i:2;--fc:var(--c-review);--fi:#B4430E}
.flow s:nth-of-type(4){--i:3;--fc:var(--c-done);--fi:#0B6B45}
.flow u{
  --lp:clamp(0,calc((var(--sp,0) - (var(--i)*.22 + .11)) * 5),1);
  width:clamp(18px,3.4vw,46px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ink-3),color-mix(in oklab,var(--ink-3) 25%,transparent));
  transform:scaleX(var(--lp));transform-origin:left center;
}
.flow u:nth-of-type(1){--i:0}
.flow u:nth-of-type(2){--i:1}
.flow u:nth-of-type(3){--i:2}

/* ---- las marcas se dibujan: cada punto se verifica al pasar ---- */
.check-list[data-sp] li{
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.1) * 3.2),1);
  opacity:calc(.2 + .8*var(--lp));
  transform:translateY(calc((1 - var(--lp)) * 12px));
}
.check-list[data-sp] .ck{
  stroke-dasharray:28;
  stroke-dashoffset:calc(28 * (1 - var(--lp)));
}
.check-list[data-sp] li:nth-child(2){--i:1}
.check-list[data-sp] li:nth-child(3){--i:2}
.check-list[data-sp] li:nth-child(4){--i:3}
.check-list[data-sp] li:nth-child(5){--i:4}
.check-list[data-sp] li:nth-child(6){--i:5}

/* ---- Inventario: la sección se fija y las cinco fichas suben al scroll ----
        --p lo publica el motor a partir del recorrido propio de la sección. ---- */
.invpin{position:relative;height:210vh;padding:0}
.invpin-stage{
  position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
}
.invpin-panel{
  position:relative;width:min(calc(95% + var(--pad) * 1.9), var(--max), 95vw);margin-inline:auto;
  padding-block:clamp(28px,5vh,56px);
}
.invpin-head{max-width:840px}
.invpin-head h2{margin:16px 0 16px}
.invpin-head p{font-size:clamp(15.5px,1.15vw,17px);color:var(--ink-2);
  line-height:1.6;max-width:62ch}

.invpin-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(26px,3.6vh,42px);
}
/* 3 arriba, 2 abajo: las dos últimas tienen el texto más largo */
.inv-feat:nth-child(-n+3){grid-column:span 2}
.inv-feat:nth-child(n+4){grid-column:span 3}

.inv-feat{
  --lp:clamp(0,calc((var(--p,0) - var(--i,0)*.15) * 3.1),1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * 42px)) scale(calc(.955 + .045*var(--lp)));
  padding:clamp(18px,1.7vw,24px);border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--ink-line);
  box-shadow:var(--card-shadow);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.inv-feat:nth-child(2){--i:1}
.inv-feat:nth-child(3){--i:2}
.inv-feat:nth-child(4){--i:3}
.inv-feat:nth-child(5){--i:4}
.inv-feat:hover{
  border-color:color-mix(in oklab,var(--signal) 42%,var(--ink-line));
  box-shadow:0 18px 40px -24px rgba(54,136,255,.55);
}
.if-ic{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;margin-bottom:14px;
  background:var(--signal-tint);color:var(--signal-deep);
  transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease);
}
.inv-feat:hover .if-ic{background:var(--signal);color:#fff;transform:rotate(-6deg) scale(1.07)}
.if-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.inv-feat h3{font-size:clamp(16px,1.25vw,18.5px);margin-bottom:7px;line-height:1.25}
.inv-feat p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* cuánto queda de la sección */
.invpin-foot{margin-top:clamp(20px,2.6vh,32px)}
.ip-bar{display:block;height:2px;border-radius:2px;background:var(--ink-line);overflow:hidden}
.ip-bar i{display:block;height:100%;background:var(--signal);
  transform:scaleX(var(--p,0));transform-origin:left center}

/* sin sitio para fijar, o con movimiento reducido: la sección se comporta como
   una más y las fichas quedan puestas */
@media (max-width:1080px), (prefers-reduced-motion:reduce){
  .invpin{height:auto}
  .invpin-stage{position:static;min-height:0;overflow:visible;
    padding-block:clamp(48px,9vw,88px)}
  .inv-feat{opacity:1;transform:none}
  .invpin-foot{display:none}
}
@media (max-width:860px){
  .invpin-grid{grid-template-columns:1fr}
  .inv-feat:nth-child(-n+3),.inv-feat:nth-child(n+4){grid-column:auto}
}

/* ---- Un solo panel a sangre para Contabilidad y Operaciones ----
   No son dos secciones fijadas una detrás de otra: es la misma superficie, que
   te retiene mientras cambia. --p recorre las dos escenas:

     0 .. .42   escena A, las fichas de Contabilidad van apareciendo
     .45 .. .65 el fondo vira de azul a azul oscuro y las escenas se relevan
     .58 .. 1   escena B, las cajas de Operaciones entran desde la izquierda

   Las escenas se superponen en la misma caja, así que no hay que scrollear
   "entre" secciones: el panel nunca se va. ---- */
.duopin{position:relative;height:300vh;padding:0}
.duopin-stage{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;
  padding:var(--pad);
}
.duopin-box{
  --mix:clamp(0,calc((var(--p,0) - .42) / .2),1);
  position:relative;width:100%;height:calc(100vh - var(--pad)*2);
  border-radius:var(--r-xl);overflow:hidden;color:#fff;
  background:color-mix(in oklab,var(--navy) calc(var(--mix) * 100%),var(--signal));
}
.duopin-scene{
  position:absolute;inset:0;display:flex;align-items:center;
}
/* --q es el avance dentro de la escena; cada ficha lo lee para saber su turno */
/* el relevo es seco, no un fundido cruzado: A termina de salir justo cuando B
   empieza a entrar. Solapadas se verían las dos a medias, como un fantasma. */
.scene-a{
  --q:clamp(0,calc(var(--p,0) / .40),1);
  opacity:clamp(0,calc((.52 - var(--p,0)) / .08),1);
}
.scene-b{
  --q:clamp(0,calc((var(--p,0) - .60) / .40),1);
  opacity:clamp(0,calc((var(--p,0) - .52) / .08),1);
}
/* sólo la escena en turno recibe el puntero: la otra sigue apilada encima
   aunque esté invisible, y si no se apaga se come los hover de la de abajo */
.duopin-scene{pointer-events:none}
.duopin-scene.live{pointer-events:auto}

.duopin-in{
  width:min(calc(95% + var(--pad) * 1.9), var(--max), 95vw);margin-inline:auto;
  display:grid;gap:clamp(26px,3.6vw,56px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.duopin-in.flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.duopin-head .label{color:rgba(255,255,255,.62)}
.duopin-head .label::before{background:rgba(255,255,255,.55)}
.duopin-head .label svg{color:rgba(255,255,255,.75)}
.duopin-head h2{color:#fff;margin:15px 0 14px;font-size:var(--h2-sm)}
.duopin-head p{color:rgba(255,255,255,.78);
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.6;max-width:46ch}

/* --- escena A: las fichas de Contabilidad, en rejilla 2x2 --- */
.ctapin-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,14px)}
.ct-card{
  /* rampa corta y umbrales separados: una ficha por tramo, no un fundido común */
  --lp:clamp(0,calc((var(--q,0) - .06 - var(--i,0)*.22) * 8),1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * 30px)) scale(calc(.965 + .035*var(--lp)));
  display:flex;flex-direction:column;gap:11px;
  padding:clamp(15px,1.4vw,20px);border-radius:var(--r-md);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.ct-card:nth-child(2){--i:1}
.ct-card:nth-child(3){--i:2}
.ct-card:nth-child(4){--i:3}
.ct-card:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45)}
.ct-card p{font-size:14.5px;line-height:1.5;color:#fff}
.ct-ic{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.9);color:var(--signal-deep);
}
.ct-ic .ck{width:14px;height:14px;stroke-width:3;
  stroke-dasharray:28;stroke-dashoffset:calc(28 * (1 - var(--lp)))}

.ctapin-dots{display:flex;gap:9px;align-items:center;margin-top:clamp(18px,2.4vh,26px)}
.ctapin-dots i{
  --lp:clamp(0,calc((var(--q,0) - .06 - var(--i,0)*.22) * 8),1);
  width:7px;height:7px;border-radius:99px;
  background:color-mix(in oklab,#fff calc(22% + var(--lp)*78%),transparent);
  transform:scale(calc(.8 + .45*var(--lp)));
}
.ctapin-dots i:nth-child(2){--i:1}
.ctapin-dots i:nth-child(3){--i:2}
.ctapin-dots i:nth-child(4){--i:3}

/* rejilla de cinco: la última ocupa el ancho para no dejar un hueco, y los
   umbrales se aprietan — con la separación de cuatro, la quinta se quedaba a
   medio entrar al acabar el recorrido */
.ctapin-grid.five .ct-card{--lp:clamp(0,calc((var(--q,0) - .05 - var(--i,0)*.17) * 8),1)}
.ctapin-grid.five .ct-card:nth-child(5){grid-column:1 / -1}
.ctapin-grid.five .ct-card{gap:9px;padding:13px 15px}
.ctapin-grid.five .ct-card p{font-size:13.5px}
.ct-card:nth-child(5){--i:4}

/* la fila admite el bloque de tres líneas: qué, cada cuánto y de quién */
.duo-li b{display:block;font-weight:600;color:#fff;margin-bottom:1px}
.duo-li em{display:block;font-style:normal;margin-top:2px;
  font:400 10.5px var(--mono);color:rgba(255,255,255,.6)}
.duo-tick svg{stroke-width:2.2}

/* lista compacta para escenas con muchos puntos: entra fila a fila */
.duo-list{display:grid;gap:7px}
.duo-li{
  --lp:clamp(0,calc((var(--q,0) - .05 - var(--i,0)*.16) * 7),1);
  opacity:var(--lp);
  transform:translateX(calc((1 - var(--lp)) * -22px));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  padding:11px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  font-size:14px;line-height:1.45;color:rgba(255,255,255,.86);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.duo-li:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42)}
.duo-li:nth-child(2){--i:1}
.duo-li:nth-child(3){--i:2}
.duo-li:nth-child(4){--i:3}
.duo-li:nth-child(5){--i:4}
.duo-tick{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);
}
.duo-tick svg{width:12px;height:12px;fill:none;stroke:var(--signal-deep);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* --- escena B: las cajas de Operaciones, entrando de lado --- */
.opspin-side{display:grid;gap:clamp(10px,1.2vw,14px)}
.op-box{
  --lp:clamp(0,calc((var(--q,0) - .06 - var(--i,0)*.28) * 8),1);
  opacity:var(--lp);
  transform:translateX(calc((1 - var(--lp)) * -26px));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;
  padding:clamp(15px,1.4vw,20px);border-radius:var(--r-md);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.op-box:nth-child(2){--i:1}
.op-box:nth-child(3){--i:2}
.op-box:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42)}
.op-box h3{font-size:clamp(15.5px,1.2vw,17.5px);color:#fff;margin-bottom:5px;line-height:1.25}
.op-box p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.75)}
.op-ic{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.92);color:var(--signal-deep);
  transition:transform .45s var(--ease);
}
.op-box:hover .op-ic{transform:rotate(-6deg) scale(1.07)}
.op-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* sin sitio para fijar, o con movimiento reducido: dejan de superponerse y
   pasan a ser dos bloques normales, uno debajo del otro */
@media (max-width:1080px), (prefers-reduced-motion:reduce){
  .duopin{height:auto}
  .duopin-stage{position:static;height:auto;padding:var(--pad);display:block}
  .duopin-box{height:auto;background:var(--signal);display:grid}
  .duopin-scene{position:static;opacity:1!important;pointer-events:auto;
    padding-block:clamp(44px,8vw,76px)}
  /* la caja ya no tiene padding horizontal propio (lo pone .duopin-in), así que
     la escena oscura llega sola al borde: sin márgenes negativos */
  .scene-b{background:var(--navy)}
  .duopin-in,.duopin-in.flip{grid-template-columns:1fr;gap:26px}
  .duopin-head{order:-1}
  .duopin-head p{max-width:60ch}
  .ct-card,.op-box,.duo-li{opacity:1;transform:none}
  .ct-ic .ck{stroke-dashoffset:0}
  .ctapin-dots{display:none}
}
@media (max-width:560px){
  .ctapin-grid{grid-template-columns:1fr}
}

/* ---- Hero de Project Management ----
   "El problema" era una sección aparte con un título y un párrafo centrados.
   Se absorbe aquí: la pregunta que da pie al producto llega de tres sitios a la
   vez y Taskia la contesta. El hero pasa a dos columnas. ---- */
.pm-hero .wrap{
  display:grid;gap:clamp(30px,4vw,64px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
}
.pm-hero .wrap > *{max-width:none}          /* anula el tope de lectura del subhero */
.pm-hero-copy{max-width:44ch}
.pm-hero-copy .hero-sub{margin-bottom:24px}
.pm-hero-copy .micro{margin-top:14px}

/* las tres preguntas, cayendo una detrás de otra */
.ask-list{display:grid;gap:9px}
.ask-b{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;
  padding:13px 16px;border-radius:14px 14px 14px 5px;
  background:var(--panel);border:1px solid var(--ink-line);
  box-shadow:var(--card-shadow);
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.ask-b:nth-child(1){transition-delay:.10s}
.ask-b:nth-child(2){transition-delay:.26s;margin-left:clamp(10px,3vw,34px)}
.ask-b:nth-child(3){transition-delay:.42s;margin-left:clamp(20px,6vw,68px)}
.in .ask-b{opacity:1;transform:none}
.ask-src{
  grid-column:1;display:flex;align-items:center;gap:6px;
  font:400 10.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
}
.ask-src svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ask-b p{grid-column:1;font-size:15px;font-weight:500;color:var(--ink);line-height:1.4}
.ask-t{grid-column:2;grid-row:1 / span 2;align-self:end;
  font:400 11px var(--mono);color:var(--ink-3)}

/* la respuesta: llega al final y es la única que no es una pregunta */
.ask-ans{
  margin-top:14px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--dark);color:var(--on-dark);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease) .66s,transform .7s var(--ease) .66s;
}
.in .ask-ans{opacity:1;transform:none}
.ask-tag{
  display:inline-block;margin-bottom:9px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--signal);color:#fff;font:500 10.5px var(--mono);text-transform:uppercase;
}
.ask-task{font-size:15.5px;font-weight:600;color:#fff;margin-bottom:9px}
.ask-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:12.5px;color:var(--on-dark-2)}
.ask-meta .st{background:color-mix(in oklab,var(--c-progress) 88%,#fff);color:#3A2500}
.ask-cap{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:46ch}

@media (max-width:900px){
  .pm-hero .wrap{grid-template-columns:1fr;gap:32px}
  .pm-hero-copy{max-width:none}
  .ask-b:nth-child(2),.ask-b:nth-child(3){margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .ask-b,.ask-ans{opacity:1;transform:none}
}

/* ============================================================
   LAS CINCO VISTAS DE PROJECT MANAGEMENT
   Reutiliza el bento de los módulos (.modpin/.modslide/.bt): sólo añade las
   cinco composiciones y las maquetas propias de cada vista.
   ============================================================ */
.vwpin{height:340vh}                       /* cinco diapositivas, ~68vh cada una */
.modpin-note{font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:52ch}

/* ninguna reparte el espacio igual que otra */
.modslide[data-l="cascada"]{grid-template-areas:
  "scr  scr  scr  scr  scr  scr"
  "scr  scr  scr  scr  scr  scr"
  "id   id   read read read read"}
.modslide[data-l="gantt"]{grid-template-areas:
  "id   id   scr  scr  scr  scr"
  "read read scr  scr  scr  scr"
  "read read scr  scr  scr  scr"}
.modslide[data-l="kanban"]{grid-template-areas:
  "scr  scr  scr  scr  id   id"
  "scr  scr  scr  scr  read read"
  "scr  scr  scr  scr  read read"}
.modslide[data-l="mapa"]{grid-template-areas:
  "read read read id   id   id"
  "scr  scr  scr  scr  scr  scr"
  "scr  scr  scr  scr  scr  scr"}
.modslide[data-l="calendario"]{grid-template-areas:
  "id   id   scr  scr  scr  scr"
  "id   id   scr  scr  scr  scr"
  "read read scr  scr  scr  scr"}

/* ---- Lista: lo que importa es la sangría ---- */
.vhead,.vrow{display:grid;
  grid-template-columns:minmax(0,1fr) 74px 88px 82px 46px;gap:10px;align-items:center}
.vhead{font:400 9px var(--mono);text-transform:uppercase;color:var(--ink-3);
  letter-spacing:.04em;padding-bottom:6px;border-bottom:1px solid var(--ink-line)}
.vlist{display:grid;gap:1px}
.vrow{padding:7px 0;font-size:12px;color:var(--ink-2);
  border-bottom:1px solid var(--ink-line-soft)}
/* nombre y marcador viven en UNA celda: si el caret fuera un item suelto,
   correría todas las columnas una posición */
.vname{display:flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow.d1 .vname{padding-left:18px}
.vrow.d2 .vname{padding-left:36px}
.vpc{display:flex;align-items:center;gap:6px;font:400 10.5px var(--mono);color:var(--ink-3)}
.vpc i{flex:1;height:4px;border-radius:99px;background:var(--ink-line);position:relative}
.vpc i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:99px;
  background:var(--acc)}
.st-ok{background:color-mix(in oklab,var(--c-done) 30%,#fff);color:#0B4B2E}
.st-todo{background:color-mix(in oklab,var(--ink-3) 24%,#fff);color:var(--ink-2)}
.vcar.open{transform:rotate(90deg)}
.vrow:last-child{border-bottom:0}
.vrow b{font-weight:600;color:var(--ink)}
.vrow s{opacity:.5}
.vcar{width:0;height:0;flex:none;display:inline-block;
  border:4px solid transparent;border-left-color:var(--ink-3);vertical-align:middle}
.vdot{display:inline-block;width:6px;height:6px;border-radius:50%;
  border:1.5px solid var(--ink-3)}
.vdot.done{background:var(--c-done);border-color:var(--c-done)}
.vwho{font-size:11px;color:var(--ink-3)}
.vdue{font:400 11px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---- Kanban: columnas de estado con tarjetas de verdad ----
        migaja de la tarea padre, etiquetas, barra de cumplimiento y avatares ---- */
.vkb{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:start}
.vkb-h{display:flex;align-items:center;gap:6px;font:400 9.5px var(--mono);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.vkb-h em{font-style:normal;color:var(--ink-2);margin-left:auto}
.vkb-dot{width:7px;height:7px;border-radius:50%;flex:none}
.vkb-c{display:grid;gap:5px;padding:9px 10px;margin-bottom:6px;border-radius:9px;
  background:var(--panel);border:1px solid var(--ink-line)}
.vkb-c.on{border-color:var(--acc);box-shadow:0 8px 20px -14px rgba(15,23,42,.4)}
.vkb-anc{font:400 9px var(--mono);text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vkb-t{font-size:11.5px;font-weight:500;color:var(--ink);line-height:1.3}
.vkb-lab{display:flex;flex-wrap:wrap;gap:4px}
.vkb-lab s{text-decoration:none;font-size:9px;padding:1px 6px;border-radius:99px;
  background:var(--ink-hover);color:var(--ink-2);border:1px solid var(--ink-line)}
.vkb-foot{display:flex;align-items:center;gap:6px}
.vkb-pb{flex:1;height:3px;border-radius:99px;background:var(--ink-line);position:relative}
.vkb-pb b{position:absolute;inset:0;width:var(--w);border-radius:99px;background:var(--acc)}
.vkb-foot em{font:400 9.5px var(--mono);font-style:normal;color:var(--ink-3)}
.vkb-av{display:flex}
.vkb-av i{width:16px;height:16px;border-radius:50%;color:#fff;font-style:normal;
  font:600 7.5px/16px var(--sans);text-align:center;margin-left:-4px;border:1.5px solid var(--panel)}

/* ---- Gantt: pista con semanas, barras y el codo de la prelación ---- */
.vg{display:grid;gap:4px}
.vg-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:center;
  font-size:11.5px;color:var(--ink-2)}
.vg-row > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la pista lleva dibujadas las divisiones de semana */
.vg-row > i{
  position:relative;height:15px;border-radius:5px;
  background:repeating-linear-gradient(90deg,
    var(--ink-line) 0 1px, transparent 1px 25%);
  box-shadow:inset 0 0 0 1px var(--ink-line-soft);
}
.vg-hd > i{height:auto;background:none;box-shadow:none;
  display:grid;grid-template-columns:repeat(4,1fr)}
.vg-hd em{font:400 9px var(--mono);text-transform:uppercase;color:var(--ink-3);
  font-style:normal;text-align:center}
.vg-row > i > b{
  position:absolute;top:2px;bottom:2px;left:var(--s);width:var(--w);
  border-radius:99px;background:color-mix(in oklab,var(--acc) 55%,#fff);
}
.vg-row > i > b.now{background:var(--acc)}
.vg-row > i > b.late{background:repeating-linear-gradient(45deg,
  var(--c-review),var(--c-review) 4px,color-mix(in oklab,var(--c-review) 55%,#fff) 4px,
  color-mix(in oklab,var(--c-review) 55%,#fff) 8px)}
/* el codo sube desde el final de la barra de arriba hasta el inicio de ésta */
.vg-row > i > b.lnk::before{
  content:"";position:absolute;left:-9px;bottom:50%;width:9px;height:19px;
  border-left:1.3px solid var(--ink-3);border-bottom:1.3px solid var(--ink-3);
  border-bottom-left-radius:4px;
}
.vg-row > i > b.lnk::after{
  content:"";position:absolute;left:-4px;top:50%;margin-top:-2.5px;
  border:2.5px solid transparent;border-left-color:var(--ink-3);
}
.vg-foot{margin-top:5px}

/* ---- Calendario: rejilla del mes con barras de varios días ----
   Las barras van en una rejilla superpuesta con las MISMAS columnas y filas que
   las celdas, colocadas con grid-column/grid-row. Antes se posicionaban con
   píxeles calculados a mano sobre un alto de fila supuesto (56px cuando el real
   era 54), y por eso caían encima del número del día. ---- */
.vcal-h{display:grid;grid-template-columns:repeat(7,1fr)}
.vcal-h em{font:400 9px var(--mono);text-transform:uppercase;color:var(--ink-3);
  text-align:center;font-style:normal;padding-bottom:5px}
.vcal-g{position:relative}
.vcal-cells{
  display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(52px,auto);
  border-top:1px solid var(--ink-line);border-left:1px solid var(--ink-line);
}
.vcal-cells b{
  border-right:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
  padding:3px 4px;background:#fff;font-weight:400;
}
.vcal-cells b.wknd{background:#fafbfd}
.vcal-cells b.out{background:#f8fafc}
.vcal-cells u{display:inline-block;text-decoration:none;padding:1px 5px;border-radius:99px;
  font:500 10.5px var(--sans);color:#475569}
.vcal-cells b.out u{color:#cbd5e1}
.vcal-cells b.hoy u{background:var(--acc);color:#fff;font-weight:600}
/* la capa de barras calca la rejilla de celdas */
.vcal-segs{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(3,1fr);
  pointer-events:none;
}
.vseg,.vmore{
  grid-column:var(--c) / span var(--n,1);grid-row:var(--r);
  align-self:end;margin:0 3px 4px;
  height:17px;display:flex;align-items:center;gap:5px;padding:0 6px;
  border-radius:6px;font-size:10px;white-space:nowrap;overflow:hidden;
  background:color-mix(in srgb,var(--sc) 16%,#fff);
  color:color-mix(in srgb,var(--sc) 55%,#1e293b);
}
.vseg .av{width:13px;height:13px;font:600 6.5px/13px var(--sans)}
.vseg em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:9px;opacity:.85}
.vmore{justify-self:start;height:15px;padding:0 7px;font-weight:600;font-size:9.5px;
  color:var(--signal-deep);background:color-mix(in srgb,var(--signal) 12%,#fff)}

/* ---- Mapa Mental: los nodos son tarjetas con campos ---- */
/* alto firme: con menos, las tres ramas se pegan entre sí */
.vmap{position:relative;min-height:172px;display:flex;align-items:center}
.vmap svg{position:absolute;inset:0;width:100%;height:100%;fill:none;
  stroke:var(--ink-line);stroke-width:1.4}
.vn{position:absolute;transform:translate(-50%,-50%);display:grid;gap:4px;
  padding:7px 10px;border-radius:9px;min-width:118px;
  background:var(--panel);border:1px solid var(--ink-line);box-shadow:var(--card-shadow)}
.vn b{font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.vn em{display:flex;align-items:center;gap:5px;font-style:normal;
  font:400 9px var(--mono);color:var(--ink-3)}
.vn .st{font-size:8.5px;padding:1px 6px}
.vn.root{left:22%;top:50%;border-color:var(--acc);
  box-shadow:0 10px 26px -16px color-mix(in oklab,var(--acc) 80%,transparent)}
.vn.n1{left:78%;top:13%}
.vn.n2{left:78%;top:50%}
.vn.n3{left:78%;top:87%}

@media (max-width:620px){
  .vkb{grid-template-columns:1fr}
  .vkb-col:nth-child(n+3){display:none}
}

/* ============================================================
   RECORRIDO POR EL EDITOR DE TAREA (Project Management)
   Panel a sangre y fijado. --p avanza en 8 pasos: el pie de foto cambia y la
   zona del editor que toca se enciende, el resto se atenúa. El pie y la zona
   comparten data-step, así que el motor enciende los dos a la vez.
   Los rótulos son los del producto: Cumplimiento, Checklist, Importancia,
   Tarea padre, Participantes, Inicio/Vence.
   ============================================================ */
.tourpin{position:relative;height:340vh;padding:0}
.tourpin-stage{
  position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:var(--pad);
}
.tourpin-box{
  position:relative;width:100%;height:calc(100vh - var(--pad)*2);
  display:flex;align-items:center;
  border-radius:var(--r-xl);overflow:hidden;
  background:var(--dark);color:var(--on-dark);
}
.tourpin-in{
  width:min(calc(95% + var(--pad) * 1.9), var(--max), 95vw);margin-inline:auto;
  display:grid;gap:clamp(24px,3.4vw,52px);align-items:center;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
}
.tourpin-side .label{color:rgba(255,255,255,.6)}
.tourpin-side .label::before{background:rgba(255,255,255,.5)}
.tourpin-side h2{color:#fff;font-size:var(--h2-sm);margin:14px 0 22px;max-width:16ch}

/* los ocho pies ocupan el mismo hueco: sólo se ve el del paso en curso */
.tour-caps{position:relative;min-height:112px}
.tour-cap{
  position:absolute;inset:0;opacity:0;transform:translateY(8px);
  transition:opacity .34s var(--ease),transform .34s var(--ease);pointer-events:none;
}
.tour-cap.on{opacity:1;transform:none}
.tour-cap b{display:block;font-size:clamp(17px,1.5vw,21px);color:#fff;margin-bottom:8px}
.tour-cap p{font-size:14.5px;line-height:1.6;color:var(--on-dark-2);max-width:34ch}
.tour-foot{margin-top:24px;font:400 11.5px var(--mono);color:var(--on-dark-3)}
.tour-foot b{color:#fff;font-weight:400}

/* ---- la maqueta del editor ---- */
.te{
  background:var(--panel);border-radius:var(--r-lg);overflow:hidden;color:var(--ink);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
  max-height:calc(100vh - var(--pad)*2 - clamp(40px,7vh,88px));
  display:flex;flex-direction:column;
}
.te-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--ink-line);background:var(--panel-dp);
}
.te-crumb{font-size:12.5px;font-weight:600;color:var(--ink)}
.te-crumb em{font-style:normal;font-weight:400;color:var(--ink-3);margin-left:5px}
.te-acts s{text-decoration:none;font-size:11.5px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--signal);color:#fff}
.te-body{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:0;overflow:hidden}
.te-main{padding:16px 18px;overflow:hidden}
.te-rail{padding:16px 16px;border-left:1px solid var(--ink-line);background:var(--panel-dp);
  display:grid;gap:14px;align-content:start}
.te-title{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.te-desc{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:14px}
.te-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:12px}

/* una zona del editor = un paso: apagada por defecto, encendida en su turno */
.te-f,.te-blk,.te-tabs{
  position:relative;border-radius:9px;
  opacity:.34;filter:saturate(.5);
  transition:opacity .38s var(--ease),filter .38s var(--ease),
             background .38s var(--ease),box-shadow .38s var(--ease);
}
.te-f.on,.te-blk.on,.te-tabs.on{
  opacity:1;filter:none;
  background:color-mix(in oklab,var(--signal) 7%,transparent);
  box-shadow:0 0 0 1.5px color-mix(in oklab,var(--signal) 45%,transparent),
             0 10px 26px -18px rgba(54,136,255,.7);
}
.te-f{padding:5px 8px;display:flex;align-items:center;gap:9px}
.te-f.col{flex-direction:column;align-items:flex-start;gap:5px}
.te-blk{padding:9px 10px;margin-bottom:10px}
.te-blk.flush{margin-bottom:0}
.te-k{font:400 9.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;letter-spacing:.04em}
.te-k em{font-style:normal;color:var(--ink-2);margin-left:6px;text-transform:none;
  font-family:var(--sans);font-size:10.5px}
.te-blk .te-k{display:block;margin-bottom:8px}
.te-v{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink)}
.te-v em{font-style:normal;font-size:11px;color:var(--ink-3)}
.av{flex:none;width:19px;height:19px;border-radius:50%;color:#fff;font-style:normal;
  font:600 8.5px/19px var(--sans);text-align:center}

.te-prog{display:flex;align-items:center;gap:10px}
.te-prog i{flex:1;height:7px;border-radius:99px;background:var(--ink-line);position:relative}
.te-prog i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:99px;
  background:var(--signal)}
.te-prog b{font:400 12px var(--mono);color:var(--ink)}

.te-sub,.te-chk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px;color:var(--ink-2)}
.te-sub s{text-decoration:line-through;opacity:.55}
.te-sub .av{margin-left:auto}
.tick,.box{flex:none;width:14px;height:14px;border-radius:50%;border:1.6px solid var(--ink-3)}
.box{border-radius:4px}
.tick.done,.box.on{background:var(--c-done);border-color:var(--c-done);position:relative}
.tick.done::after,.box.on::after{content:"";position:absolute;left:4px;top:1px;
  width:4px;height:7px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}

.te-tabs{display:flex;gap:14px;padding:7px 10px;border-bottom:1px solid var(--ink-line);
  margin-bottom:8px;border-radius:9px 9px 0 0}
.te-tab{font-size:12px;color:var(--ink-3);padding-bottom:5px}
.te-tab.on{color:var(--ink);font-weight:600;box-shadow:0 2px 0 var(--signal)}
.te-tab em{font-style:normal;color:var(--ink-3);margin-left:3px}
.te-cm{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.te-cm b{color:var(--ink);font-weight:600;margin-right:4px}
.te-at{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  font-size:11.5px;color:var(--signal-deep)}
.te-at svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.te-v s{text-decoration:none}
.st-prog{background:color-mix(in oklab,var(--c-progress) 30%,#fff);color:#3A2500}
.st-imp{background:color-mix(in oklab,var(--c-review) 26%,#fff);color:#7A2E06}
.te-tags,.te-ch{display:flex;flex-wrap:wrap;gap:5px}
.te-tags s,.te-ch s{text-decoration:none;font-size:10.5px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--ink-hover);color:var(--ink-2);border:1px solid var(--ink-line)}
.te-dep{font-size:11px;color:var(--ink-3);line-height:1.45}
.te-dep b{color:var(--ink-2);font-weight:600}
.te-act{font-size:11px;color:var(--ink-3)}

/* sin sitio para fijar, o con movimiento reducido: se enseña todo encendido y
   los ocho pies pasan a ser una lista normal */
@media (max-width:1080px), (prefers-reduced-motion:reduce){
  .tourpin{height:auto}
  .tourpin-stage{position:static;height:auto;padding:var(--pad)}
  .tourpin-box{height:auto;padding-block:clamp(40px,7vw,68px)}
  .tourpin-in{grid-template-columns:1fr;gap:28px}
  .te{max-height:none}
  .tour-caps{position:static;min-height:0;display:grid;gap:14px}
  .tour-cap{position:static;opacity:1;transform:none;pointer-events:auto}
  .tour-foot{display:none}
  .te-f,.te-blk,.te-tabs{opacity:1;filter:none}
}
@media (max-width:720px){
  .te-body{grid-template-columns:1fr}
  .te-rail{border-left:0;border-top:1px solid var(--ink-line)}
  .te-grid{grid-template-columns:1fr}
}

/* ---- las marcas como tarjetas: llenan la columna de la derecha y entran
        una detrás de otra, como quien va tachando una lista ---- */
.check-cards{display:grid;gap:10px;margin:0;max-width:none}
.check-cards li{
  grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:center;
  padding:16px 18px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--ink-line);
  box-shadow:var(--card-shadow);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.check-cards li:hover{
  border-color:color-mix(in oklab,var(--signal) 40%,var(--ink-line));
  box-shadow:0 14px 34px -22px rgba(54,136,255,.5);
}
.check-cards .ck{
  width:16px;height:16px;margin:0;padding:7px;box-sizing:content-box;
  border-radius:50%;background:var(--signal-tint);color:var(--signal-deep);
  stroke-width:3;
}
/* Más recorrido y una cascada más separada que en una lista suelta: son tarjetas,
   pesan más, y son lo único que se mueve en esta columna. Al redefinir --lp aquí
   cambian a la vez la opacidad, el trazo de la marca y el desplazamiento, porque
   las tres lo leen. Con .2 de separación y 2.85 de pendiente, la cuarta tarjeta
   termina de entrar al final del recorrido, no a mitad. */
.check-cards[data-sp] li{
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.2) * 2.85),1);
  transform:translateY(calc((1 - var(--lp)) * 22px)) scale(calc(.982 + .018*var(--lp)));
}

/* ---- variante lateral: entran desde el margen, no desde abajo ---- */
.check-list[data-sp].from-side li{
  transform:translateX(calc((1 - var(--lp)) * -22px));
}

/* ---- profundidad: la maqueta deriva más lento que el argumento ---- */
.dcard[data-par]{will-change:transform;transform:translate3d(0,var(--dy,0px),0)}

/* ---- el circuito: un raíl que se dibuja a lo largo de los tres pasos ---- */
.pilar-list[data-sp]{position:relative}
.pilar-list[data-sp]::before{
  content:"";position:absolute;left:calc(-1 * clamp(14px,1.6vw,22px));
  top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(var(--c-todo),var(--c-review) 52%,var(--c-done));
  transform:scaleY(var(--sp,0));transform-origin:top center;
}

/* ---- las tarjetas se levantan y se asientan ---- */
[data-sp].lift-in > *{
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.16) * 2.6),1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * 26px)) scale(calc(.975 + .025*var(--lp)));
}
[data-sp].lift-in > *:nth-child(2){--i:1}
[data-sp].lift-in > *:nth-child(3){--i:2}

/* ---- lo que entra y lo que se suma, distinguibles de un vistazo ----
   El movimiento las separa en el tiempo, pero quien mira la página quieta
   necesita verlo sin leer: verde para lo incluido, ámbar para lo que se cotiza.
   Ámbar y no rojo: pagarlo aparte no es un problema, es un dato. ---- */
.card-feat.is-yes .ic{background:color-mix(in oklab,var(--c-done) 20%,#fff)}
.card-feat.is-yes .ic svg{stroke:#0B6B45;stroke-width:2.6}
.card-feat.is-yes{border-color:color-mix(in oklab,var(--c-done) 32%,var(--ink-line))}

.card-feat.is-extra .ic{background:color-mix(in oklab,var(--c-progress) 24%,#fff)}
.card-feat.is-extra .ic svg{stroke:#8A5B00;stroke-width:2.4}
.card-feat.is-extra{border-color:color-mix(in oklab,var(--c-progress) 34%,var(--ink-line))}

/* ---- dos caras de lo mismo: entran desde lados opuestos ----
   Lo incluido llega por la izquierda y lo que se cotiza aparte por la derecha,
   como los dos platos de una balanza. ---- */
[data-sp].split-in > *{
  --from:max(-38px, -2.4vw);          /* nunca más allá del margen de la página */
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.12) * 3),1);
  opacity:var(--lp);
  transform:
    translateX(calc((1 - var(--lp)) * var(--from,-38px)))
    translateY(calc((1 - var(--lp)) * 12px));
}
[data-sp].split-in > *:nth-child(2){--i:1;--from:min(38px, 2.4vw)}
@media (max-width:860px){
  /* apiladas, de lado se saldrían de pantalla */
  [data-sp].split-in > *,[data-sp].split-in > *:nth-child(2){--from:0px}
}
@media (prefers-reduced-motion:reduce){
  [data-sp].split-in > *{opacity:1;transform:none}
}

/* ---- la lista de preguntas se descubre en orden ---- */
.faq[data-sp] .faq-item{
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.09) * 3.4),1);
  opacity:calc(.15 + .85*var(--lp));
  transform:translateY(calc((1 - var(--lp)) * 14px));
}
.faq[data-sp] .faq-item:nth-child(2){--i:1}
.faq[data-sp] .faq-item:nth-child(3){--i:2}
.faq[data-sp] .faq-item:nth-child(4){--i:3}
.faq[data-sp] .faq-item:nth-child(5){--i:4}
.faq[data-sp] .faq-item:nth-child(6){--i:5}

/* con movimiento reducido site.js fija --sp en 1 y --dy en 0: todo queda
   en su estado final y no se recorre nada. Esto sólo desactiva la deriva. */
@media (prefers-reduced-motion:reduce){
  .dcard[data-par]{transform:none}
}
@media (max-width:860px){
  .dcard[data-par]{transform:none}
  .pilar-list[data-sp]::before{left:calc(-1 * clamp(8px,2vw,14px))}
}

/* ============================================================
   PÁGINAS INTERNAS — erp · project-management · precios · contacto
   (usa los mismos tokens y componentes; solo añade lo que falta)
   ============================================================ */
.subhero{padding:calc(74px + clamp(40px,5vw,72px)) 0 clamp(28px,4vw,46px)}
/* el wrap mide lo mismo que el del nav, para que el borde izquierdo del titular
   caiga justo bajo el del logo; la medida de lectura la pone el contenido */
.subhero .wrap{max-width:var(--max)}
.subhero .wrap > *{max-width:840px}
.subhero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.04;margin:14px 0 18px}
.subhero h1 em{font-style:normal;color:var(--signal)}
.subhero .hero-sub{font-size:clamp(16px,1.2vw,18.5px);max-width:54ch;margin-bottom:22px}
.subhero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.subhero .micro{font-size:13px;color:var(--ink-3);margin-top:14px}

.band{background:var(--stone)}
.center{text-align:center;margin-inline:auto;max-width:680px}
.center .label{justify-content:center}
.lede{font-size:clamp(15.5px,1.15vw,17.5px);color:var(--ink-2);line-height:1.65;margin-top:16px}
.section-tight{padding-top:clamp(40px,5vw,64px)}

/* lista con checks */
.check-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;max-width:58ch}
.check-list li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.check-list li b{color:var(--ink);font-weight:600}
.check-list .ck{color:var(--signal);width:15px;height:15px;margin-top:3px;flex:none}

/* dos columnas de tarjetas */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)}
.card-feat{background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--card-shadow);height:100%}
.card-feat .ic{width:40px;height:40px;border-radius:11px;background:var(--signal-tint);
  display:grid;place-items:center;margin-bottom:15px}
.card-feat .ic svg{width:21px;height:21px;fill:none;stroke:var(--signal-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.card-feat h3{font-size:18.5px;margin-bottom:8px}
.card-feat p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.card-feat .check-list{margin-top:14px}
.card-feat .btn{margin-top:18px}

/* mini grid de vistas */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:30px}
.mini-card{background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:18px}
.mini-card .ic{width:34px;height:34px;border-radius:9px;background:var(--signal-tint);
  display:grid;place-items:center;margin-bottom:12px}
.mini-card .ic svg{width:18px;height:18px;fill:none;stroke:var(--signal-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mini-card h4{font-size:15px;margin-bottom:5px}
.mini-card p{font-size:13px;color:var(--ink-2);line-height:1.5}

/* acordeón FAQ */
/* ---- Preguntas frecuentes: dos columnas, la izquierda acompaña al scroll ---- */
.faq-grid{
  display:grid;gap:clamp(28px,4vw,64px);align-items:start;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
}
.faq-aside{position:sticky;top:calc(74px + clamp(20px,4vh,44px))}
.faq-lead{margin-top:16px;font-size:clamp(15px,1.1vw,16.5px);
  color:var(--ink-2);line-height:1.6;max-width:38ch}
.faq-cta{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  margin-top:clamp(24px,3vw,34px);padding:18px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--ink-line);box-shadow:var(--card-shadow);
}
.faq-cta b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.faq-cta p{font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.faq-cta .btn{grid-column:1 / -1;width:100%;justify-content:center}
.fc-ic{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;background:var(--signal-tint);color:var(--signal-deep);
}
.fc-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.faq{display:grid;gap:8px}
/* Sin overflow:hidden. Lo tenía para recortar la barra de acento, pero convierte
   cada ficha en un contenedor scrolleable: al enfocarse el botón, el navegador lo
   "trae a la vista" desplazando ese contenedor — y con scroll-behavior:smooth en
   html, eso se ve como que la página salta. El radio recorta el fondo igual. */
.faq-item{
  border:1px solid var(--ink-line);border-radius:var(--r-md);
  background:var(--panel);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.faq-item:hover{border-color:color-mix(in oklab,var(--signal) 34%,var(--ink-line))}
.faq-item.open{
  border-color:color-mix(in oklab,var(--signal) 40%,var(--ink-line));
  background:color-mix(in oklab,var(--signal) 8%,#fff);
  box-shadow:0 16px 38px -28px rgba(54,136,255,.45);
}

.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:14px;
  padding:17px clamp(16px,1.6vw,22px);
  font:600 clamp(15px,1.15vw,16.5px) var(--sans);color:var(--ink);letter-spacing:-.01em;
}
.faq-n{
  font:400 11.5px var(--mono);color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .3s var(--ease);
}
.faq-item.open .faq-n,.faq-item:hover .faq-n{color:var(--signal-deep)}
.faq-t{transition:transform .3s var(--ease)}
.faq-item:hover .faq-t{transform:translateX(2px)}
.faq-item.open .faq-q{color:var(--signal-deep)}

/* el +/− vive dentro de una pastilla que se tiñe al abrir */
.faq-q .pm{
  position:relative;width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--panel-dp);transition:background .3s var(--ease)}
.faq-item.open .faq-q .pm{background:var(--signal-tint)}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink-3);border-radius:2px;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.faq-q .pm::before{left:7px;right:7px;top:12px;height:2px}
.faq-q .pm::after{top:7px;bottom:7px;left:12px;width:2px}
.faq-item.open .faq-q .pm::after{transform:scaleY(0)}
.faq-item.open .faq-q .pm::before{background:var(--signal-deep)}

.faq-a{overflow:hidden;height:0;transition:height .34s var(--ease)}
/* el texto entra un poco después que la altura: se lee como que se despliega */
.faq-a p{
  padding:0 clamp(16px,1.6vw,22px) 19px;
  padding-left:calc(clamp(16px,1.6vw,22px) + 26px);
  font-size:14.5px;color:var(--ink-2);line-height:1.62;
  opacity:0;transform:translateY(-5px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.08s}

@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{position:static}
  .faq-lead{max-width:60ch}
  .faq-cta{max-width:520px}
}

/* precios */
.price-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);
  background:var(--panel-dp);border:1px solid var(--ink-line)}
.price-toggle button{border:0;background:none;cursor:pointer;padding:8px 16px;border-radius:var(--r-pill);
  font:600 13px var(--sans);color:var(--ink-2);transition:background .2s,color .2s}
.price-toggle button.on{background:var(--panel);color:var(--ink);box-shadow:var(--card-shadow)}
.price-toggle .save{color:var(--signal-deep);font-weight:700;margin-left:6px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);align-items:stretch;margin-top:26px}
.pcard{background:var(--panel);border:1px solid var(--ink-line);border-radius:var(--r-lg);
  padding:26px 24px;display:flex;flex-direction:column}
.pcard.feat{border-color:var(--signal);box-shadow:0 26px 64px -34px rgba(54,136,255,.42)}
.pcard .pname{font-weight:600;font-size:18px}
.pcard .ptag{font-size:13px;color:var(--ink-3);margin:2px 0 16px;min-height:2.6em}
.pcard .pprice{font:700 clamp(28px,3.2vw,38px)/1 var(--mono);letter-spacing:-2.5px;color:var(--ink)}
.pcard .pprice-sfx{font:400 13px var(--sans);letter-spacing:normal;color:var(--ink-3);margin-left:5px}
.pcard .pfine{font-size:12.5px;color:var(--ink-3);margin:8px 0 18px;min-height:1.4em}
.pcard .btn{margin-top:auto;width:100%;justify-content:center}

/* tabla comparativa */
.cmp-wrap{overflow-x:auto;margin-top:26px;border:1px solid var(--ink-line);border-radius:var(--r-lg)}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
.cmp th,.cmp td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--ink-line)}
.cmp thead th{font:400 10.5px var(--mono);text-transform:uppercase;color:var(--ink-3);background:var(--panel-dp)}
.cmp tbody td:first-child{color:var(--ink);font-weight:500}
.cmp tbody td{color:var(--ink-2)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:last-child{color:var(--signal-deep);font-weight:600}

/* ============================================================
   PRECIOS — el cambio de ciclo y la tabla comparativa
   ============================================================ */

/* el precio sale hacia arriba, cambia, y entra desde abajo */
[data-annual]{display:inline-block;transition:opacity .17s var(--ease),transform .17s var(--ease)}
[data-annual].out{opacity:0;transform:translateY(-7px)}
[data-annual].in{animation:priceIn .24s var(--ease)}
@keyframes priceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- las tres tarjetas entran escalonadas; la recomendada va levantada ---- */
.price-grid[data-sp] .pcard{
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.13) * 3.2),1);
  opacity:var(--lp);
  transform:translateY(calc((1 - var(--lp)) * 24px + var(--lift,0px)));
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.price-grid[data-sp] .pcard:nth-child(2){--i:1}
.price-grid[data-sp] .pcard:nth-child(3){--i:2}
.price-grid[data-sp] .pcard.feat{--lift:-12px}
.pcard:hover{border-color:color-mix(in oklab,var(--signal) 38%,var(--ink-line))}
.pcard.feat:hover{box-shadow:0 32px 72px -34px rgba(54,136,255,.55)}
/* la recomendada se anuncia */
.pcard{position:relative}
.pbadge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--signal);color:#fff;
  font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;
}
@media (prefers-reduced-motion:reduce){
  .price-grid[data-sp] .pcard{opacity:1;transform:translateY(var(--lift,0px))}
}

/* ---- la tarjeta recomendada va en azul, no sólo con el borde azul ----
   Mismo azul que los otros paneles del sitio (.f-cta, la escena A del panel de
   dos escenas), para que se lea como la misma familia. ---- */
.pcard.feat{
  background:var(--signal);border-color:transparent;color:#fff;
  box-shadow:0 30px 70px -34px rgba(54,136,255,.62);
}
.pcard.feat .pname{color:#fff}
.pcard.feat .ptag{color:rgba(255,255,255,.8)}
.pcard.feat .pprice{color:#fff}
.pcard.feat .pprice-sfx{color:rgba(255,255,255,.72)}
.pcard.feat .pfine{color:rgba(255,255,255,.72)}
/* el botón se invierte: azul sobre azul desaparecería */
.pcard.feat .btn-signal{background:#fff;color:var(--signal-deep)}
.pcard.feat .btn-signal:hover{background:rgba(255,255,255,.9);box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
/* y el distintivo también, para que no se pierda contra el azul */
.pcard.feat .pbadge{background:#fff;color:var(--signal-deep)}
.pcard.feat:hover{border-color:transparent;box-shadow:0 36px 80px -32px rgba(54,136,255,.75)}

/* ---- la comparativa: se recorre fila a fila y la columna Taskia manda ---- */
.cmp-cap{
  caption-side:top;text-align:left;padding:12px 18px 0;
  font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);
}
.cmp-wrap[data-sp] tbody tr{
  --lp:clamp(0,calc((var(--sp,0) - var(--i,0)*.055) * 9),1);
  opacity:calc(.18 + .82 * var(--lp));
  transform:translateY(calc((1 - var(--lp)) * 7px));
}
/* la columna de la derecha va sobre un carril azul que la separa del resto */
.cmp .cmp-new{
  background:color-mix(in oklab,var(--signal) 13%,#fff);
  color:var(--signal-deep);font-weight:600;
  box-shadow:inset 1px 0 0 color-mix(in oklab,var(--signal) 30%,transparent);
  transition:background .2s var(--ease);
}
.cmp thead th.cmp-new{
  background:var(--signal-deep);color:#fff;
}
.cmp .cmp-old{color:var(--ink-3);transition:background .2s var(--ease),color .2s var(--ease)}
.cmp tbody td:first-child{transition:background .2s var(--ease)}
.cmp-new .ck{
  width:13px;height:13px;margin-right:7px;vertical-align:-1px;color:var(--signal);
  stroke-dasharray:28;stroke-dashoffset:calc(28 * (1 - var(--lp,1)));
}
/* la fila señalada se pinta entera de azul, no sólo la celda de Taskia */
.cmp tbody tr:hover td{background:color-mix(in oklab,var(--signal) 10%,#fff)}
.cmp tbody tr:hover td:first-child{color:var(--ink)}
.cmp tbody tr:hover .cmp-old{color:var(--ink-2)}
.cmp tbody tr:hover .cmp-new{background:color-mix(in oklab,var(--signal) 22%,#fff)}

@media (prefers-reduced-motion:reduce){
  .cmp-wrap[data-sp] tbody tr{opacity:1;transform:none}
  .cmp-new .ck{stroke-dashoffset:0}
  [data-annual]{transition:none}
  [data-annual].in{animation:none}
}

/* pasos numerados */
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:20px;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font:700 13px var(--mono);letter-spacing:-1px;color:var(--signal);padding-top:2px}
.steps b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:3px}
.steps p{font-size:14px;color:var(--ink-2);line-height:1.55}

/* teléfono (app PM) */
/* ---- el teléfono entra al scroll: se levanta y se endereza ----
   --sp lo conduce, así que va y viene con el dedo en vez de dispararse una vez.
   transform-origin abajo: pivota sobre su base, como si lo alzaran. ---- */
.phone[data-sp]{
  transform-origin:50% 100%;
  transform:
    perspective(1000px)
    translateY(calc((1 - var(--sp,0)) * 84px))
    rotateX(calc((1 - var(--sp,0)) * 16deg))
    scale(calc(.9 + .1 * var(--sp,0)));
  opacity:calc(.1 + .9 * var(--sp,0));
  will-change:transform;
}
/* las tareas caen dentro ya con el teléfono casi puesto */
.phone[data-sp] .ph-task{
  --tp:clamp(0,calc((var(--sp,0) - .38 - var(--i,0)*.11) * 6),1);
  opacity:var(--tp);
  transform:translateY(calc((1 - var(--tp)) * 12px));
}
/* nth-child y no nth-of-type: los hermanos son todos <div>, así que .ph-head
   corría la cuenta y la última tarea se quedaba sin índice */
.phone[data-sp] .ph-task:nth-child(3){--i:1}
.phone[data-sp] .ph-task:nth-child(4){--i:2}
.phone[data-sp] .ph-task:nth-child(5){--i:3}

/* la marca de la casilla se dibuja cuando la tarea se da por hecha */
.ph-task .box::after{transition:transform .3s var(--ease)}
.ph-task:not(.done) .box::after{transform:scale(0)}

/* pie: lo que se marca en el teléfono ya está en la oficina */
.ph-sync{
  display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--ink-line-soft);
  font:400 10px var(--mono);text-transform:uppercase;color:var(--ink-3);
  opacity:0;transition:opacity .45s var(--ease);
}
.ph-sync.on{opacity:1}
.ph-dot{width:6px;height:6px;border-radius:50%;background:var(--pos);flex:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--pos) 70%,transparent);
  animation:phPulse 2s var(--ease) infinite}
@keyframes phPulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--pos) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  .phone[data-sp]{transform:none;opacity:1}
  .phone[data-sp] .ph-task{opacity:1;transform:none}
  .ph-dot{animation:none}
}

.phone{width:232px;margin:0 auto;background:var(--ink);border-radius:36px;padding:11px;
  box-shadow:0 44px 100px -44px rgba(15,23,42,.5)}
.phone-scr{background:var(--panel);border-radius:26px;padding:18px 14px;min-height:388px}
.ph-head{display:flex;justify-content:space-between;font:400 10px var(--mono);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.ph-task{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;
  background:var(--panel-dp);margin-bottom:8px;font-size:12.5px;color:var(--ink)}
.ph-task .box{width:15px;height:15px;border-radius:5px;border:1.6px solid var(--ink-3);flex:none;
  display:grid;place-items:center}
.ph-task.done .box{background:var(--pos);border-color:var(--pos)}
.ph-task.done .box::after{content:"";width:7px;height:7px;
  -webkit-mask:linear-gradient(#000,#000) center/7px 2px no-repeat;background:#08301f}
.ph-task.done span{color:var(--ink-3);text-decoration:line-through}
.ph-task em{margin-left:auto;font-style:normal;font:400 9.5px var(--mono);color:var(--ink-3)}
.ph-task em.hot{color:var(--signal-deep)}

@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .steps li{grid-template-columns:28px 1fr}
}

.check-list.cols{max-width:820px}
@media(min-width:720px){.check-list.cols{grid-template-columns:1fr 1fr;gap:12px 32px}}

/* ---- páginas legales: términos y política de privacidad ---- */
.legal{padding-top:clamp(8px,1.5vw,18px);padding-bottom:clamp(56px,7vw,96px)}
.legal .wrap{max-width:var(--max)}
.legal .wrap > *{max-width:740px}
/* aviso de borrador legal — quitar el <div> del HTML cuando el texto esté revisado */
.legal-review{
  margin:0 0 26px;padding:15px 18px;
  border:1px solid color-mix(in oklab,var(--c-review) 45%,transparent);
  border-left-width:3px;border-radius:var(--r-md);
  background:color-mix(in oklab,var(--c-review) 9%,#fff);
  font-size:14px;line-height:1.6;color:var(--ink-2);
}
.legal-review b{color:var(--ink);font-weight:600}
.legal-body{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.legal-body p{margin:0 0 15px}
.legal-body h2,.legal-body h3,.legal-body h4{
  color:var(--ink);line-height:1.25;margin:34px 0 12px;
  font-size:clamp(18px,1.6vw,22px);
}
.legal-body ul,.legal-body ol{margin:0 0 15px;padding-left:22px}
.legal-body li{margin-bottom:8px}
.legal-body b,.legal-body strong{color:var(--ink);font-weight:500}
.legal-body a{color:var(--signal-deep);text-decoration:underline;text-underline-offset:2px}
.legal-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.legal-body td,.legal-body th{border:1px solid var(--ink-line);padding:9px 11px;text-align:left;vertical-align:top}

/* ---- logos reales de los clientes en la tarjeta ---- */
.c-logo{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--panel);border:1px solid var(--ink-line);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .45s var(--ease);
}
.c-logo img{width:30px;height:30px;display:block;object-fit:contain}
.client:hover .c-logo{transform:rotate(-6deg) scale(1.07);
  box-shadow:0 6px 18px -8px color-mix(in oklab,var(--cc,var(--signal)) 70%,transparent)}

/* ============================================================
   CONTACTO — bento de dos columnas
   Izquierda: titular + maquetas pequeñas de los tres productos.
   Derecha: la demo (única baldosa oscura, es la acción principal)
   y debajo las dos vías de contacto.
   ============================================================ */
.cbento-sec{
  min-height:100vh;display:flex;align-items:center;
  padding:calc(74px + clamp(14px,2.3vh,40px)) 0 clamp(18px,2.5vh,56px);
}
.cbento-sec > .wrap{width:95%}
.cbento{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:12px;align-items:stretch;
}
/* el titular manda su alto; el carrusel se queda con lo que sobre de la pantalla */
.cbento-l{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.cbento-r{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px}

/* ---- la baldosa base ---- */
.ctile{
  background:var(--panel);border:1px solid var(--ink-line);
  border-radius:var(--r-lg);padding:clamp(18px,1.7vw,26px);
  box-shadow:var(--card-shadow);
}
.ctile-hero{padding:clamp(19px,2.9vh,36px) clamp(24px,2.4vw,36px)}
.ctile-hero h1{font-size:clamp(31px,min(4.1vw,5.5vh),54px);line-height:1.03;
  margin:clamp(9px,1.5vh,14px) 0 clamp(10px,1.7vh,16px)}
.ctile-hero h1 em{font-style:normal;color:var(--signal)}
.ctile-hero .hero-sub{margin-bottom:clamp(12px,2.1vh,20px);max-width:38ch}
.ctile-chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---- carrusel de maquetas: una caja, tres pantallas ---- */
.cmock{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,14px);overflow:hidden;
  padding:clamp(17px,2.3vh,26px) clamp(18px,1.7vw,26px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.cmock:hover{border-color:color-mix(in oklab,var(--ink) 14%,transparent);
  box-shadow:0 22px 46px -26px rgba(15,23,42,.3)}
.cmk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cmk-note{font:400 10px var(--mono);text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* pestañas: la activa lleva la barra que marca el tiempo que le queda en pantalla */
.cmk-tabs{display:flex;gap:6px;flex-wrap:wrap}
.cmk-tab{
  position:relative;overflow:hidden;
  border:1px solid var(--ink-line);background:var(--panel);border-radius:var(--r-pill);
  padding:6px 13px;font:500 12px var(--sans);color:var(--ink-3);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.cmk-tab::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--ink-line);transition:background .4s var(--ease)}
.cmk-tab:hover{color:var(--ink);border-color:color-mix(in oklab,var(--ink) 16%,transparent)}
.cmk-tab.on{color:var(--ink);background:color-mix(in oklab,var(--c,var(--signal)) 9%,#fff);
  border-color:color-mix(in oklab,var(--c,var(--signal)) 30%,#fff)}
.cmk-tab.on::before{background:var(--c,var(--signal))}
.cmk-tab::after{                       /* la barra de avance, abajo de la pastilla */
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--c,var(--signal));transform:scaleX(0);transform-origin:0 50%;
}
.cmk-tab.on::after{animation:cmkFill var(--dwell,5.2s) linear forwards}
.cmock:hover .cmk-tab.on::after,
.cmock:focus-within .cmk-tab.on::after{animation-play-state:paused}
@keyframes cmkFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* las tres pantallas comparten celda: cambian con fundido, sin saltos de alto */
.cmk-track{display:grid;flex:1}
.cmk-slide{
  grid-area:1/1;display:grid;grid-template-rows:minmax(0,1fr) auto;
  align-items:center;gap:14px;min-width:0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s .3s;
}
.cmk-slide.on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .38s var(--ease) .18s,transform .46s var(--ease) .18s,visibility 0s 0s;
}
.cmk-cap{font-size:13px;line-height:1.55;color:var(--ink-3);margin:0;align-self:end}

/* pantalla del producto */
.cmk-scr{border:1px solid var(--ink-line);border-radius:var(--r-md);background:var(--panel-dp);overflow:hidden}
.cmk-scr-pad{padding:13px}
.cmk-bar{display:flex;align-items:center;gap:9px;padding:10px 13px;
  background:var(--panel);border-bottom:1px solid var(--ink-line)}
.cmk-ttl{font:500 12px var(--sans);color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmk-ttl em{font-style:normal;font:400 11px var(--mono);color:var(--ink-3);margin-left:7px}
.cmk-pill{margin-left:auto;flex:none;
  font:500 9.5px var(--mono);text-transform:uppercase;letter-spacing:.03em;
  padding:3px 9px;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--c-done) 16%,#fff);
  color:color-mix(in oklab,var(--c-done) 72%,var(--ink));
  border:1px solid color-mix(in oklab,var(--c-done) 32%,#fff);
}
.cmk-body{padding:4px 13px 12px}
.fx-head,.fx-row{display:grid;grid-template-columns:minmax(0,1fr) 42px 82px;gap:12px;align-items:baseline}
.fx-head{font:400 9px var(--mono);text-transform:uppercase;color:var(--ink-3);
  padding:9px 0 6px;border-bottom:1px solid var(--ink-line)}
.fx-head span:nth-child(n+2){text-align:right}
.fx-row{padding:8px 0;border-bottom:1px solid var(--ink-line-soft);font-size:12.5px;color:var(--ink-2)}
.fx-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-row i{font-style:normal;font:400 11.5px var(--mono);color:var(--ink-3);text-align:right}
.fx-row b{font:400 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.fx-tot{display:flex;align-items:baseline;gap:12px;padding:11px 0 2px;font-size:13px;color:var(--ink)}
.fx-tot b{margin-left:auto;font:700 13.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* tablero */
.kb-mini{gap:9px}
.kb-mini .kh{font-size:8.5px}
.kb-mini .kcard{background:var(--panel);padding:9px 10px;font-size:11.5px;gap:8px;
  border:1px solid var(--ink-line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.kb-mini .kav span{width:18px;height:18px;font-size:8px;margin-right:-5px}
.cmock:hover .kb-mini .kb-col:nth-child(2) .kcard{
  transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(15,23,42,.35)}

/* teléfono: la misma pieza que en PM, más pequeña y con su lista al lado */
.cmk-split{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,34px);
  align-items:center;padding:6px 0}
.phone.mini{width:184px;border-radius:26px;padding:7px;
  box-shadow:0 26px 56px -34px rgba(15,23,42,.5);
  transition:transform .5s var(--ease)}
.cmock:hover .phone.mini{transform:translateY(-3px)}
.phone.mini .phone-scr{border-radius:20px;padding:13px 11px;min-height:0}
.phone.mini .ph-head{font-size:8.5px;margin-bottom:9px}
.phone.mini .ph-task{padding:8px 9px;margin-bottom:6px;font-size:10px;gap:8px;line-height:1.3;
  align-items:flex-start}
.phone.mini .ph-task .box{width:12px;height:12px;border-radius:4px;margin-top:1px}
.phone.mini .ph-task.done .box::after{width:6px;-webkit-mask-size:6px 2px}
.phone.mini .ph-task em{font-size:8.5px;margin-top:1px}
.phone.mini .ph-sync{margin-top:10px;padding-top:9px;font-size:8.5px}
.cmk-pts{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.cmk-pts li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.cmk-pts li::before{
  content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;
  background:color-mix(in oklab,var(--c-done) 20%,#fff);
  border:1px solid color-mix(in oklab,var(--c-done) 40%,#fff);
}
.cmk-pts li::after{
  content:"";position:absolute;left:4px;top:9px;width:6px;height:3px;
  border-left:1.6px solid color-mix(in oklab,var(--c-done) 75%,var(--ink));
  border-bottom:1.6px solid color-mix(in oklab,var(--c-done) 75%,var(--ink));
  transform:rotate(-45deg);
}

/* ---- la baldosa de la demo: azul marino, la acción principal ---- */
.ctile-demo{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(19px,2.9vh,34px);
  background:var(--navy);border-color:transparent;color:#fff;
  padding:clamp(24px,2.4vw,34px);position:relative;overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(18,49,95,.7);
}
/* halo suave anclado a la esquina, para que el azul no sea plano */
.ctile-demo::before{
  content:"";position:absolute;inset:auto -30% -55% auto;width:78%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in oklab,var(--signal) 42%,transparent),transparent 68%);
}
.ctile-demo > *{position:relative}
.ctile-demo .label{color:rgba(255,255,255,.5)}
.ctile-demo h2{color:#fff;font-size:clamp(23px,2.1vw,31px);line-height:1.12;margin:14px 0 4px}
.ctile-demo .steps li::before{color:color-mix(in oklab,var(--signal) 72%,#fff)}
.ctile-demo .steps b{color:#fff;font-size:14.5px}
.ctile-demo .steps p{color:rgba(255,255,255,.62);font-size:13px}
.ctile-demo .steps{gap:clamp(11px,1.9vh,16px);margin:clamp(14px,2.2vh,20px) 0 0}
.cd-cta{margin-top:clamp(16px,2.7vh,26px);padding-top:clamp(13px,2vh,20px);border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.cd-fine{font-size:12.5px;color:rgba(255,255,255,.5)}

/* ---- vías de contacto ---- */
.cways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cway{
  display:grid;gap:2px;padding:clamp(12px,1.9vh,16px) 17px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--ink-line);
  text-decoration:none;color:inherit;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.cway-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--signal-tint);margin-bottom:clamp(5px,1.1vh,9px)}
.cway-ic svg{width:17px;height:17px;fill:none;stroke:var(--signal-deep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cway-ic.wa{background:color-mix(in oklab,var(--c-done) 15%,#fff)}
.cway-ic.wa svg{stroke:color-mix(in oklab,var(--c-done) 78%,var(--ink))}
.cway-b{font-size:14.5px;font-weight:600;color:var(--ink)}
.cway-v{font:400 12px var(--mono);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.cway:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--ink) 16%,transparent);
  box-shadow:0 16px 34px -22px rgba(15,23,42,.34)}
/* estado provisional: se ve que falta el dato, no que el enlace esté roto */
.cway.is-slot{
  border:2px dashed color-mix(in oklab,var(--ink) 22%,transparent);
  background:var(--panel);box-shadow:none;
}
.cway.is-slot .cway-v{color:var(--c-review);font-size:11px;text-transform:uppercase;letter-spacing:.02em}

/* ---- adaptación ---- */
@media (max-width:1080px){
  .cbento-sec{min-height:0;display:block;
    padding:calc(74px + clamp(28px,3.4vw,52px)) 0 clamp(40px,5vw,64px)}
  .ctile-hero{padding:clamp(24px,2.4vw,36px)}
  .ctile-hero h1{font-size:clamp(34px,4.1vw,54px);margin:14px 0 16px}
  .cmock{padding:clamp(18px,1.7vw,26px);gap:14px}
  .ctile-demo{padding-block:clamp(24px,2.4vw,34px)}
  .ctile-demo .steps{gap:16px;margin:20px 0 0}
  .cbento{grid-template-columns:1fr}
  .cbento-l,.cbento-r{grid-template-rows:none}
}
@media (max-width:620px){
  .cways{grid-template-columns:1fr}
  .cmk-split{grid-template-columns:1fr;justify-items:center;text-align:left}
  .cmk-pts{gap:10px}
  /* la caja pasa a seguir el alto de la maqueta visible: en móvil las tres
     difieren tanto que la activa quedaba flotando en un hueco de 180 px */
  .cmk-track{position:relative}
  .cmk-slide{position:absolute;inset:0}
  .cmk-slide.on{position:relative}
  /* el tablero no cabe en tres columnas a 375 px: se desliza en horizontal */
  .kb-mini{grid-template-columns:repeat(3,minmax(150px,1fr));
    overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px}
  .cmk-note{display:none}                       /* las pestañas ya ocupan la fila */
  /* sin la columna de cantidad, el nombre del artículo deja de recortarse */
  .fx-head,.fx-row{grid-template-columns:minmax(0,1fr) 82px}
  .fx-head span:nth-child(2),.fx-row i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cmk-tab.on::after{animation:none;transform:scaleX(1)}
  .cmk-slide,.cmk-slide.on{transition:opacity .2s linear,visibility 0s .2s;transform:none}
}

/* ============================================================
   MÓVIL: lo que en escritorio se recorre fijando la pantalla
   ------------------------------------------------------------
   Dos tratamientos distintos, según lo que haga la sección:

   · Si el scroll retenido sirve para pasar de UNA cosa a OTRA
     (los diez módulos, las cinco vistas, los ocho pasos del editor),
     en móvil se recorre deslizando: un carril con enganche.
   · Si sirve para que vayan APARECIENDO fichas (Inventario, las
     tarjetas del cierre), no hay nada que recorrer: cada ficha
     entra sola al pasar por delante, con --sp.
   ============================================================ */

/* ---- el alto fijado de las cinco vistas se colaba en móvil ----
   .vwpin{height:340vh} está después de la media query del bento, así que
   ganaba por orden y dejaba ~2.000px de scroll muerto. Dos clases empatan
   la especificidad y lo zanjan. */
@media (max-width:1080px){
  .modpin.vwpin{height:auto}

  /* y sus cinco composiciones tampoco: .modslide[data-l="gantt"] y compañía se
     declaran DESPUÉS de la media query del bento, así que sus áreas de
     escritorio ganaban por orden y la tarjeta seguía saliendo a dos columnas.
     Desde el final del archivo se aplanan de verdad. */
  .modslide,.modslide[data-l]{
    grid-template-areas:none;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  /* el pie, más compacto: es el tercer bloque de una tarjeta que se desliza,
     no una columna de escritorio */
  .modslide .read{padding:14px 16px}
  .modslide .read p{font-size:13.5px;line-height:1.5}
}

/* ---- el tour del editor de tareas ---- */
@media (max-width:1080px){
  .tourpin-in{grid-template-columns:minmax(0,1fr);gap:18px}
  /* sin esto la columna crece hasta caber el carril entero (min-width:auto de
     los items de rejilla) y el overflow-x nunca llega a recortar */
  .tourpin-side{min-width:0}
  .tourpin-side h2{max-width:none;margin-bottom:18px}

  /* el editor se queda a la vista mientras se desliza el carril */
  .te{max-height:min(48vh,392px)}
  .te-body{
    overflow-y:auto;align-content:start;      /* filas al alto de su contenido */
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .te-body::-webkit-scrollbar{display:none}
  /* el overflow:hidden de base les pone min-height:0 como items de rejilla, y
     dentro de un .te-body de alto acotado se aplastaban (te-main quedaba en
     32px). Con el scroll ya en el cuerpo, aquí sobra. */
  .te-main,.te-rail{overflow:visible;min-height:auto}

  .tour-caps{
    position:static;min-height:0;display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-100% / 38);
    padding-inline:calc(100% / 38);scroll-padding-inline:calc(100% / 38);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .tour-caps::-webkit-scrollbar{display:none}
  .tour-cap{
    position:relative;inset:auto;flex:0 0 min(80vw,380px);scroll-snap-align:start;
    opacity:.34;transform:none;pointer-events:auto;
    transition:opacity .3s var(--ease);
  }
  .tour-cap.on{opacity:1}
  .tour-cap p{max-width:none}

  /* con el paso ya gobernado por el carril, el atenuado vuelve a tener sentido:
     es lo que deja ver a qué campo apunta el pie. El fallback de arriba lo
     encendía todo porque sin sección fijada no había paso que señalar. */
  .te-f,.te-blk,.te-tabs{opacity:.34;filter:saturate(.5)}
  .te-f.on,.te-blk.on,.te-tabs.on{opacity:1;filter:none}

  /* el contador vuelve: es la única pista de cuántos pasos quedan */
  .tour-foot{display:block;margin-top:16px}
  .tf-d{display:none}
  .tf-m{display:inline}
}

/* ---- las que sólo hacen aparecer fichas: entran con el scroll ----
   --lp es la progresión local que ya usan sus transform; en móvil se
   la damos desde --sp (su propio cruce de pantalla) en vez de --p
   (la progresión de una sección fijada que aquí no existe). */
@media (max-width:1080px){
  /* el fallback de más arriba las dejaba puestas (opacity:1) porque sin sección
     fijada no había --p que las trajera. Ahora las trae --sp, su propio cruce
     de pantalla, así que hay que volver a declarar opacidad y transform: el
     fallback fija los valores finales y una variable sola no lo tumba. */
  .inv-feat{
    --lp:var(--sp,1);
    opacity:var(--lp);
    transform:translateY(calc((1 - var(--lp)) * 30px)) scale(calc(.97 + .03*var(--lp)));
  }
  .ct-card{
    --lp:var(--sp,1);
    opacity:var(--lp);
    transform:translateY(calc((1 - var(--lp)) * 24px)) scale(calc(.975 + .025*var(--lp)));
  }
  .ctapin-dots{display:none}
}
/* con movimiento reducido no hay entrada que valga: las fichas están puestas */
@media (prefers-reduced-motion:reduce){
  .inv-feat,.ct-card{opacity:1!important;transform:none!important}
}

/* ---- pantallas muy angostas (≤380px): las columnas de cifras de la factura
   del hero se aprietan para que el nombre del artículo siga siendo legible ---- */
@media (max-width:340px){
  .fact-row{grid-template-columns:minmax(0,1fr) 22px 60px 66px;gap:6px;font-size:11.5px}
  .fact-row .q,.fact-row .p,.fact-row .tt{font-size:10.5px}
  .fact-tot{gap:14px}
  .fact-tot .val{min-width:70px}
  .inv-cols,.inv-row{grid-template-columns:minmax(0,1fr) 36px 44px;gap:7px}
}

/* ---- tablas de las páginas legales en pantallas angostas ----
   Tres columnas de texto no bajan de ~350px por mucho que se aprieten, así
   que por debajo de 600px la tabla pasa a deslizarse en horizontal dentro de
   su propio ancho en vez de empujar la página. ---- */
@media (max-width:600px){
  .legal-body table{
    display:block;width:max-content;max-width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;
  }
}

/* ---- móvil: área táctil cómoda en los enlaces de texto ----
   El dedo no apunta como el cursor: los enlaces que sólo medían la altura de
   su línea (24-35px) quedaban por debajo de los 44px que recomienda Apple.
   Se agranda el área sensible sin mover nada de sitio. */
@media (max-width:860px){
  .link-arrow{padding:10px 0;margin-top:-10px;margin-bottom:-10px}
  .logo{padding:8px 0;margin-top:-8px;margin-bottom:-8px}
  .chx{padding:11px 0}
  .f-top{padding:8px 0}
  .price-toggle button{padding:12px 18px}
  .cmk-tab{padding:12px 15px}
}

/* ---- embudo de ventas: barras que se estrechan etapa a etapa ----
   Antes eran migas de pan ("Nuevo › Contactado › …"): decían el nombre pero no
   dibujaban un embudo. Ahora cada etapa mide lo que le queda vivo. */
.funnel{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.funnel s{
  --w:100%;
  position:relative;width:var(--w);min-width:118px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 11px;border-radius:8px;text-decoration:none;
  background:color-mix(in oklab,var(--signal) 9%,var(--panel));
  border:1px solid color-mix(in oklab,var(--signal) 16%,transparent);
  transition:width .6s var(--ease),background .45s var(--ease),
             border-color .45s var(--ease),opacity .45s var(--ease);
}
.funnel s i{font:500 11px var(--sans);font-style:normal;color:var(--ink-2);white-space:nowrap}
.funnel s b{font:400 9.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.funnel s.done{background:color-mix(in oklab,var(--signal) 16%,var(--panel));
  border-color:color-mix(in oklab,var(--signal) 26%,transparent)}
.funnel s.done i{color:var(--signal-deep)}
.funnel s.now{background:color-mix(in oklab,var(--signal) 22%,var(--panel));
  border-color:color-mix(in oklab,var(--signal) 42%,transparent)}
.funnel s.now i{color:var(--signal-deep);font-weight:600}
.funnel s.won{background:color-mix(in oklab,var(--pos,var(--c-done)) 24%,var(--panel));
  border-color:color-mix(in oklab,var(--pos,var(--c-done)) 46%,transparent)}
.funnel s.won i{color:#0B6B45;font-weight:600}
.funnel s.won b{color:#0B6B45}
@media (max-width:560px){
  /* la última etapa es la más estrecha: que nunca baje de lo que mide su texto */
  .funnel s{min-width:146px;padding:6px 9px}
  .funnel s i{font-size:10.5px}
  .funnel s b{font-size:9px}
}
@media (max-width:340px){
  /* en pantallas muy estrechas el monto no cabe junto a "Negociación";
     el embudo se sigue leyendo por el ancho de cada barra */
  .funnel s{min-width:98px}
  .funnel s b{display:none}
}

/* ---- la comparativa en el teléfono: doce filas de tres columnas no caben ----
   Con min-width:540px la tabla obliga a arrastrar de lado, y el nombre de la
   fila se pierde en cuanto empiezas. Cada fila pasa a ser una ficha: arriba el
   concepto, debajo las dos respuestas con su etiqueta. Los encabezados son
   fijos, así que se reponen desde el CSS sin tocar el marcado. */
@media (max-width:620px){
  .cmp-wrap{overflow-x:visible;border:0;border-radius:0}
  .cmp{min-width:0;display:block;font-size:14.5px}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cmp tbody{display:grid;gap:10px}
  .cmp tbody tr{
    display:grid;gap:2px;padding:14px 16px;
    border:1px solid var(--ink-line);border-radius:var(--r-md);background:var(--panel);
  }
  .cmp tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:6px 0;border-bottom:1px solid var(--ink-line)}
  .cmp tbody td:first-child{
    display:block;padding:0 0 8px;font-size:15.5px;color:var(--ink);font-weight:600;
    border-bottom:1px solid var(--ink-line);margin-bottom:4px;
  }
  .cmp tbody td:last-child{border-bottom:0;padding-bottom:0}
  /* la etiqueta que se perdía al ocultar la cabecera */
  .cmp tbody td:not(:first-child)::before{
    content:attr(data-col);
    font:400 10.5px var(--mono);text-transform:uppercase;color:var(--ink-3);
    flex:none;letter-spacing:.03em;
  }
  .cmp tbody td.cmp-old::before{content:"ERP instalado"}
  .cmp tbody td.cmp-new::before{content:"Taskia"}
  /* el realce de columna se apaga al final del archivo: allí gana por orden */
  .cmp tbody td.cmp-new{background:none}
  .cmp tbody td.cmp-new .ck{margin-left:auto;margin-right:6px}
  .cmp tbody tr:hover td{background:none}
  .cmp tbody tr:hover .cmp-new{background:none}
  /* con la tabla en bloque, un caption sigue siendo caption: se le queda el
     ancho de una columna y el titular cae en vertical. Aquí es un párrafo. */
  .cmp-cap{display:block;width:auto;padding:0 0 14px;text-align:left}
}

/* ---- la columna de Taskia pesa más que la de al lado ----
   Antes se distinguía por un tinte del 13% y un filo de 1px: al lado de doce
   filas de texto gris quedaba como una variación, no como el remate. Ahora es
   una columna con cuerpo — tinte más firme, filo a los dos lados y la
   cabecera azul llena — para que se lea de un golpe cuál es la respuesta. */
.cmp .cmp-new{
  background:color-mix(in oklab,var(--signal) 20%,#fff);
  box-shadow:inset 1px 0 0 color-mix(in oklab,var(--signal) 55%,transparent),
             inset -1px 0 0 color-mix(in oklab,var(--signal) 55%,transparent);
}
.cmp tbody tr:first-child .cmp-new{
  box-shadow:inset 1px 0 0 color-mix(in oklab,var(--signal) 55%,transparent),
             inset -1px 0 0 color-mix(in oklab,var(--signal) 55%,transparent),
             inset 0 1px 0 color-mix(in oklab,var(--signal) 55%,transparent);
}
.cmp tbody tr:last-child .cmp-new{
  box-shadow:inset 1px 0 0 color-mix(in oklab,var(--signal) 55%,transparent),
             inset -1px 0 0 color-mix(in oklab,var(--signal) 55%,transparent),
             inset 0 -1px 0 color-mix(in oklab,var(--signal) 55%,transparent);
}
.cmp tbody .cmp-new{color:var(--signal-deep);font-weight:600}
.cmp-new .ck{color:var(--signal-deep)}
/* y la de la izquierda se retira: es el término de comparación, no la oferta */
.cmp .cmp-old{color:var(--ink-3)}
.cmp thead th.cmp-new{background:var(--signal-deep);color:#fff;font-weight:600}
.cmp tbody tr:hover .cmp-new{background:color-mix(in oklab,var(--signal) 30%,#fff)}


/* ---- en ficha, la columna de Taskia no lleva carril ----
   Va al final a propósito: el realce de la columna se define más arriba y, a
   igual especificidad, manda el último que se lee. */
@media (max-width:620px){
  .cmp tbody .cmp-new,
  .cmp tbody tr:first-child .cmp-new,
  .cmp tbody tr:last-child .cmp-new{background:none;box-shadow:none}
  .cmp tbody tr:hover .cmp-new{background:none}
}

/* ---- el teléfono deja de ser una lista suelta y parece la app ----
   Tenía cuatro renglones y una cabecera de 10px: al lado del editor de tareas
   o de la factura no sostenía la comparación, y no enseñaba ni el comentario
   ni la obra de los que habla el texto de al lado. */
.phone{width:250px}
.phone-scr{padding:12px 12px 10px;min-height:0}
.ph-status{
  display:flex;justify-content:space-between;align-items:center;
  font:500 10px var(--sans);color:var(--ink-3);padding:0 4px 8px;
}
.ph-sig{display:flex;align-items:flex-end;gap:2px}
.ph-sig i{width:2.5px;background:var(--ink-3);border-radius:1px}
.ph-sig i:nth-child(1){height:4px}
.ph-sig i:nth-child(2){height:6px}
.ph-sig i:nth-child(3){height:8px}
.ph-sig b{width:14px;height:7px;border:1px solid var(--ink-3);border-radius:2px;margin-left:3px;position:relative}
.ph-sig b::after{content:"";position:absolute;inset:1.5px;right:5px;background:var(--ink-3);border-radius:1px}
.ph-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;padding:0 2px;text-transform:none;
}
.ph-h b{display:block;font-size:17px;font-weight:600;color:var(--ink);line-height:1.1}
.ph-h em{font-style:normal;font:400 10.5px var(--mono);color:var(--ink-3);text-transform:uppercase}
.ph-av{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#1F5FD0;color:#fff;font:600 10.5px var(--sans);
}
.ph-proj{
  display:flex;align-items:center;gap:7px;margin-bottom:9px;padding:7px 9px;
  border-radius:9px;background:color-mix(in oklab,var(--signal) 10%,var(--panel));
  font:600 11px var(--sans);color:var(--signal-deep);
}
.ph-proj em{font-style:normal;font-weight:400;color:var(--ink-3);font-size:10px;margin-left:auto}
.ph-pd{width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none}
.ph-task{padding:9px;margin-bottom:6px;font-size:12px}
.ph-task em{font-size:9px}
.ph-note{
  display:flex;gap:7px;align-items:flex-start;margin:9px 0 0;padding:8px 9px;
  border-radius:9px;background:var(--panel-dp);font-size:10.5px;line-height:1.4;color:var(--ink-2);
}
.ph-note b{color:var(--ink);font-weight:600}
.ph-ava{
  width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#D97706;color:#fff;font:600 8px var(--sans);font-style:normal;
}
.ph-nav{
  display:flex;justify-content:space-between;gap:4px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--ink-line);
}
.ph-nav s{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  font:500 8.5px var(--sans);color:var(--ink-3);
}
.ph-nav s.on{color:var(--signal-deep)}
.ph-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   CALENDARIO INCRUSTADO  (/contacto/#agendar)
   El widget de Calendly lo monta site.js dentro de .cal-box. Mientras el script
   viaja se ve el esqueleto; al montarse, site.js agrega .on y el esqueleto se
   apaga. Si no llega nunca, queda el enlace de respaldo (.cal-fb).
   ============================================================ */
.cal-sec{padding:clamp(48px,7vh,96px) 0 clamp(56px,8vh,110px);background:var(--stone)}
.cal-head{max-width:54ch;margin-bottom:clamp(20px,3vh,32px)}
.cal-head h2{font-size:var(--h2-sm);line-height:1.1;margin:12px 0 10px}
.cal-head p{color:var(--ink-2);margin:0;max-width:46ch}
.cal-box{
  min-height:760px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);border:1px solid var(--ink-line);box-shadow:var(--card-shadow);
}
.cal-box:not(.on){
  display:grid;place-items:center;
  background:var(--panel) linear-gradient(100deg,transparent 40%,var(--ink-hover) 50%,transparent 60%) no-repeat;
  background-size:240% 100%;animation:calWait 1.6s var(--ease-io) infinite;
}
.cal-box:not(.on)::after{content:"Cargando el calendario…";color:var(--ink-3);font-size:14px}
@keyframes calWait{from{background-position:180% 0}to{background-position:-60% 0}}
.cal-fb{margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.cal-fb a{color:var(--signal-deep)}
@media (prefers-reduced-motion:reduce){.cal-box:not(.on){animation:none}}
@media (max-width:720px){.cal-box{min-height:1020px}}