/* ==========================================================================
   Buzz — Design System v1
   Fase 1 de SMS-456. Mockup navegable.

   Color: escala hue-210 heredada de BuzzDesk (doc/brand/README.md del fork),
   la única del ecosistema con contraste MEDIDO. Regla dura: brand-500 es un
   color de superficie oscura (2.66:1 sobre blanco). En claro se baja a
   brand-800 para texto/rellenos y brand-700 para focus rings.

   Todas las ratios de este archivo están calculadas contra --bg (#FBFBF8),
   no estimadas a ojo.
   ========================================================================== */

:root {
  /* ── Marca: escala hue-210 (BuzzDesk) ─────────────────────────────── */
  --brand-50:  #eef6fe;
  --brand-100: #d9ebfd;
  --brand-200: #b9dbfb;
  --brand-500: #54a3f2;  /* logo. SOLO sobre superficies oscuras */
  --brand-700: #127fed;  /* focus rings sobre claro — 3.97:1 */
  --brand-800: #1070d1;  /* rellenos, links, nav activa — 4.85:1 AA */
  --brand-900: #0d5cab;  /* hover */
  --brand-950: #0a3d71;  /* pressed */

  /* ── Superficie (BuzzWave app) ────────────────────────────────────── */
  --bg:          #FBFBF8;  /* blanco cálido, no blanco puro */
  --surface:     #FEFEFD;   /* teñido, no blanco puro */
  --surface-alt: #F4F5F1;
  --ink:         #0B0B0D;  /* 18.5:1 */
  --ink-2:       #3F3F46;  /* 10.1:1 */
  --ink-3:       #696973;  /* 5.23:1 AA — el piso, no bajar de acá */
  --line:        #E6E6E1;
  --line-strong: #D2D2CB;

  /* ── Acento por producto ──────────────────────────────────────────────
     Una sola familia fría, de cian a índigo: nada de verde. BuzzAgents,
     BuzzDesk y BuzzWave conservan el color real de su app; BuzzCRM pasa al
     celeste para quedar dentro de la rampa. Cada uno tiene un tono "ink"
     (AA sobre claro, para texto e iconos) y uno "vivo" (rellenos y halos). */
  --crm-ink:   #0E7490;  --crm-live:   #22D3EE;  --crm-wash:   #E6F9FD;  /* cian    */
  --agt-ink:   #0369A1;  --agt-live:   #38BDF8;  --agt-wash:   #E8F4FE;  /* celeste */
  --desk-ink:  #1070D1;  --desk-live:  #54A3F2;  --desk-wash:  #EAF3FE;  /* azul    */
  --wave-ink:  #3B55D9;  --wave-live:  #4C6FFF;  --wave-wash:  #EEF0FE;  /* índigo  */

  /* ── Aurora: los tres tonos con los que se pintan los halos ────────── */
  --aur-1: 34, 211, 238;    /* cian     */
  --aur-2: 84, 163, 242;    /* azul     */
  --aur-3: 108, 140, 255;   /* índigo   */
  --glow-brand: 0 8px 24px -8px rgba(16,112,209,.45);
  --glow-soft:  0 0 0 4px rgba(16,112,209,.10);

  /* ── Tipografía ───────────────────────────────────────────────────── */
  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Espaciado (ritmo de 4) ───────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ── Forma y movimiento ───────────────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --dur-fast: 140ms; --dur: 200ms; --dur-slow: 320ms;
  --dur-enter: 280ms; --dur-exit: 200ms;
  /* Las curvas nativas de CSS son demasiado débiles: no tienen punch. */
  --ease: cubic-bezier(.23, 1, .32, 1);          /* ease-out fuerte */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);    /* ease-in-out fuerte */

  --shadow-sm: 0 1px 2px rgba(12,30,58,.06);
  --shadow-md: 0 4px 16px -4px rgba(12,30,58,.10), 0 1px 3px rgba(12,30,58,.05);
  --shadow-lg: 0 24px 56px -20px rgba(12,40,80,.20), 0 2px 8px rgba(12,30,58,.06);

  --maxw: 1200px;
  --gutter: 28px;
  --nav-h: 68px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-200); color: var(--ink); }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0; font-weight: 600; font-size: 14px;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* La retícula: hairlines verticales que corren toda la página. Es el motivo
   estructural del sistema — la web se lee como una hoja de especificación. */
.rules {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: flex; justify-content: center;
}
.rules > div {
  width: 100%; max-width: var(--maxw); height: 100%;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rules span { border-left: 1px solid var(--line); }
.rules span:last-child { border-right: 1px solid var(--line); }
@media (max-width: 860px) { .rules { display: none; } }

.page { position: relative; z-index: 1; }

.section { padding: var(--s10) 0; position: relative; }
.section--tight { padding: var(--s9) 0; }
.section--alt { background: var(--surface-alt); }
.section + .section { border-top: 1px solid var(--line); }

/* ── Etiqueta de capítulo: la voz mono heredada de buzzcrm.ai ──────── */
.chapter {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s5);
}
.chapter i { font-style: normal; color: var(--brand-800); }
.chapter::after { content: ''; width: 32px; height: 1px; background: var(--line-strong); }

.h1 {
  font-size: clamp(34px, 6.4vw, 78px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
}
.h2 {
  font-size: clamp(27px, 3.8vw, 46px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
}
.h3 { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.lead {
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
  color: var(--ink-2); max-width: 62ch;
}
.muted { color: var(--ink-3); }
.section-head { max-width: 66ch; margin-bottom: var(--s8); }
.section-head .lead { margin-top: var(--s4); }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 12px 24px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
/* Feedback de presión: la interfaz tiene que acusar recibo del click. */
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--primary { background: var(--brand-800); color: #FEFEFD; box-shadow: var(--glow-brand); }
.btn--primary:hover { background: var(--brand-900); box-shadow: 0 10px 30px -8px rgba(16,112,209,.55); }
.btn--primary:active { background: var(--brand-950); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--surface-alt); }
.btn--lg { min-height: 54px; padding: 15px 30px; font-size: 16px; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.arrow { transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(3px); }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(251,251,248,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: 100%; display: flex; align-items: center; gap: var(--s6);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.brand__mark { width: 30px; height: 30px; flex: none; border-radius: 9px; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--ink); background: var(--surface-alt); }
.nav__cta { display: flex; align-items: center; gap: var(--s3); }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.nav__toggle svg { width: 22px; height: 22px; }

@media (max-width: 1000px) {
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  .nav__cta { order: 3; }
}
.nav__mobile {
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: var(--nav-h); z-index: 99;
  overflow: hidden; visibility: hidden;
  max-height: 0; opacity: 0; transform: translateY(-6px);
  transition: max-height var(--dur-exit) var(--ease), opacity var(--dur-exit) var(--ease),
              transform var(--dur-exit) var(--ease), visibility 0s linear var(--dur-exit);
}
.nav__mobile.open {
  visibility: visible; max-height: 420px; opacity: 1; transform: none;
  transition: max-height var(--dur-enter) var(--ease), opacity var(--dur-enter) var(--ease),
              transform var(--dur-enter) var(--ease), visibility 0s;
}
@media (min-width: 1001px) { .nav__mobile { display: none; } }
.nav__mobile a {
  display: block; padding: 15px var(--gutter);
  border-top: 1px solid var(--line); font-weight: 500;
}
.nav__mobile a:first-child { border-top: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: var(--s10) 0 var(--s9); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: var(--s8); align-items: center;
}
.hero__grid > * { min-width: 0; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  margin-bottom: var(--s5); box-shadow: var(--shadow-sm);
}
.eyebrow b { color: var(--brand-800); font-weight: 500; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crm-live); flex: none; }

.hero h1 { margin-bottom: var(--s5); }
.hero h1 em { font-style: normal; color: var(--brand-800); }
.hero .lead { margin-bottom: var(--s6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s7); }

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4);
}
.stats > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.stats dt { font-family: var(--mono); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stats dd { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
@media (max-width: 620px) {
  .stats > div + div { padding-left: 0; border-left: none; }
}

/* ==========================================================================
   El circuito — el momento de la página
   Los 4 productos como nodos de un ciclo, con un pulso que los recorre.
   ========================================================================== */
.circuit { position: relative; }
.circuit svg { width: 100%; max-width: 100%; height: auto; }
.circuit__path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
/* El perimetro de la pista es 2*(384-66) + 2*PI*33 = 843.35. La suma de raya
   y hueco tiene que dar ese numero exacto: si no, el pulso salta al reiniciar. */
.circuit__pulse {
  fill: none; stroke: var(--brand-700); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 110 733.35; filter: drop-shadow(0 0 7px rgba(18,127,237,.45));
  animation: travel 7s linear infinite;
}
@keyframes travel { to { stroke-dashoffset: -843.35; } }
.stubs path { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }

.node rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.node text { font-family: var(--sans); font-weight: 700; font-size: 14px; fill: var(--ink); }
.node .node__sub { font-family: var(--mono); font-weight: 400; font-size: 10.5px; fill: var(--ink-3); letter-spacing: .04em; }
.node circle { r: 4; }
.node--crm  circle { fill: var(--crm-live); }
.node--agt  circle { fill: var(--agt-live); }
.node--desk circle { fill: var(--desk-live); }
.node--wave circle { fill: var(--wave-live); }
.node { transition: transform var(--dur) var(--ease); }
.node rect { transition: stroke var(--dur) var(--ease), filter var(--dur) var(--ease); }
.circuit:hover .node rect { stroke: var(--line); }
.node:hover rect { stroke: var(--brand-700); filter: drop-shadow(0 6px 18px rgba(11,11,13,.12)); }

/* ==========================================================================
   Clientes
   ========================================================================== */
.clients {
  padding: var(--s7) 0; background: var(--surface-alt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.clients__label { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); text-align: center; margin-bottom: var(--s6); }
.clients__marquee {
  overflow: hidden;
  /* Los bordes se desvanecen: sin esto los logos aparecen y desaparecen
     de golpe contra el corte del contenedor. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__grid {
  display: flex; width: max-content; gap: var(--s8); align-items: center;
  animation: clientsTicker 34s linear infinite;
  will-change: transform;
}
.clients__track { display: flex; gap: var(--s8); align-items: center; flex: 0 0 auto; }

/* Cuatro copias iguales: el ciclo avanza exactamente una copia (-25%) y
   vuelve al origen sin que se note el salto. */
@keyframes clientsTicker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

.clogo { height: 28px; width: auto; opacity: .78; flex: 0 0 auto; }
.clogo--dlocalgo { height: 32px; }
/* Estos tres vienen en blanco sobre transparente y sobre superficie clara
   desaparecen. brightness(0) los deja en silueta respetando el alfa. */
.clogo--xukah,
.clogo--cumaelearn,
.clogo--lafontaine { filter: brightness(0); opacity: .66; }

@media (hover: hover) and (pointer: fine) {
  /* Se frena al pasar por encima, para poder leer un logo concreto. */
  .clients__marquee:hover .clients__grid { animation-play-state: paused; }
}
.client-name { flex: 0 0 auto; }
/* Degradación del logo a nombre: nunca un icono de imagen rota. */
.client-name {
  font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  color: var(--ink-2); opacity: .78;
}

/* ==========================================================================
   El sistema — grid de 4 productos
   ========================================================================== */
.system { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.system__cell { padding: var(--s6) var(--s5); border-left: 1px solid var(--line); position: relative; transition: background var(--dur) var(--ease); }
.system__cell:first-child { border-left: none; }
.system__cell:hover { background: var(--surface-alt); }
.system__cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c); }
.system__step {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: var(--s5);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.system__step b { font-size: 22px; font-weight: 500; color: var(--ci); letter-spacing: -.02em; }
.system__cell h3 { margin-bottom: var(--s2); }
.system__cell p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
/* La flecha entre celdas: hace legible que es una secuencia, no un catálogo.
   Solo tiene sentido cuando las cuatro están en fila; apiladas, sobra. */
@media (min-width: 901px) {
  .system__cell + .system__cell::after {
    content: ''; position: absolute; left: -5px; top: calc(var(--s6) + 6px);
    width: 9px; height: 9px; border-top: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong); transform: rotate(45deg);
    background: var(--surface);
  }
}
@media (max-width: 900px) {
  .system { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system__cell:nth-child(odd) { border-left: none; }
  .system__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .system { grid-template-columns: minmax(0, 1fr); }
  .system__cell { border-left: none; border-top: 1px solid var(--line); }
  .system__cell:first-child { border-top: none; }
}

/* ==========================================================================
   Producto
   ========================================================================== */
.product { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--s9); align-items: center; }
.product > * { min-width: 0; }
.product--flip .product__copy { order: 2; }
@media (max-width: 980px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .product--flip .product__copy { order: 0; }
}

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--w); color: var(--ci);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--s4);
}
.tag .dot { background: currentColor; }
.product h2 { margin-bottom: var(--s4); }
.product__copy > .lead { margin-bottom: var(--s5); }

.feats { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.feats li { display: flex; gap: var(--s3); font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.feats svg { width: 18px; height: 18px; flex: none; margin-top: 3px; stroke: var(--ci); }
.feats b { color: var(--ink); font-weight: 600; }

.note { margin-bottom: var(--s6); max-width: 58ch; }
.note::before {
  content: attr(data-label); display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ci);
}
.note p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.note b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Mockups de UI — dibujados en CSS, no screenshots
   ========================================================================== */
.mock {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-lg);
  overflow: hidden; font-size: 13px;
}
.mock__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-alt);
}
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock__bar span { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .05em; }
.mock__body { padding: var(--s5); }

.mrow { display: flex; align-items: center; gap: var(--s3); padding: 11px 0; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: none; }
.mrow__av { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #FEFEFD; }
.mrow__main { min-width: 0; flex: 1; }
.mrow__t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__s { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
  background: var(--surface-alt); color: var(--ink-2); border: 1px solid var(--line);
}
.chip--live { background: var(--crm-wash); color: var(--crm-ink); border-color: transparent; }
.chip--live .dot, .chip--live::before { background: var(--crm-live); }
.chip--warn { background: #FEF3E2; color: #B45309; border-color: transparent; }

.mock__tabs { display: flex; gap: 4px; margin-bottom: var(--s4); flex-wrap: wrap; }
.mock__tab { padding: 6px 12px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; color: var(--ink-3); background: var(--surface-alt); }
.mock__tab.on { background: var(--ci); color: #FEFEFD; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s4); align-items: baseline; }
.kv dt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.kv dd { font-size: 13.5px; }

.bars { display: grid; gap: 10px; }
.bar__top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.bar__top b { font-variant-numeric: tabular-nums; font-weight: 600; }
.bar__track { height: 6px; border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }
.bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--ci); width: var(--v); }
.bar__fill--muted { background: var(--line-strong); }
.bar__fill--warn { background: #B45309; }

.instr { display: grid; gap: var(--s3); }
.instr__item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; }
.instr__item b { font-size: 13px; font-weight: 600; display: block; margin-bottom: 3px; }
.instr__item p { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.instr__item code { font-family: var(--mono); font-size: 11px; color: var(--ci); }

/* ==========================================================================
   Proceso — 4 pasos
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); counter-reset: step; }
.step { padding-top: var(--s5); border-top: 2px solid var(--ink); }
.step:nth-child(n+2) { border-top-color: var(--line-strong); }
.step__n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); margin-bottom: var(--s3); }
.step h3 { font-size: 18px; margin-bottom: var(--s2); }
.step p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Integraciones
   ========================================================================== */
.integrations { display: flex; flex-wrap: wrap; gap: var(--s3); }
.integ {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 500; font-size: 15px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .integ:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
}
.integ svg { width: 18px; height: 18px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0; text-align: left;
  font-size: 17.5px; font-weight: 600; letter-spacing: -.015em;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--brand-800); }
.faq__ico { width: 20px; height: 20px; flex: none; stroke: var(--ink-3); transition: transform var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] .faq__ico { transform: rotate(45deg); }
.faq__q:active { transform: scale(.995); }
/* Cierra más rápido de lo que abre: la salida no se mira, la entrada sí. */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-exit) var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; transition-duration: var(--dur-enter); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--s5); max-width: 72ch; color: var(--ink-2); font-size: 16px; }

/* ==========================================================================
   CTA final
   ========================================================================== */
/* Tarjeta clara: el bloque oscuro cortaba el recorrido de la pagina.
   El peso lo da el wash de marca + el borde, no un cambio de modo. */
/* Sin caja: el cierre respira a todo el ancho y la aurora hace de fondo,
   igual que en el hero. La caja recortaba la luz y la volvía un bloque. */
/* Sin borde superior: la sección ya no es un bloque, es un claro. */
.cta-section { position: relative; isolation: isolate; overflow: clip; border-top: none; }
.cta { color: var(--ink); text-align: center; }
.cta h2 { margin-bottom: var(--s4); }
.cta p { color: var(--ink-2); max-width: 56ch; margin: 0 auto var(--s7); font-size: 18px; }
.cta .btn--ghost { background: var(--surface); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s6); }
.footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s8); }
@media (max-width: 1080px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); } }
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s5); } }
.footer h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; margin-bottom: var(--s4); }
.footer li { margin-bottom: 10px; }
.footer li a { font-size: 15px; color: var(--ink-2); transition: color var(--dur-fast) var(--ease); }
.footer li a:hover { color: var(--brand-800); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.footer__note { font-family: var(--mono); font-size: 11.5px; }

/* ==========================================================================
   Movimiento — entradas escalonadas
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin movimiento el carrusel no tiene sentido: queda una fila centrada. */
  .clients__grid { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .clients__track[aria-hidden="true"] { display: none; }
  .clients__marquee { -webkit-mask-image: none; mask-image: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .circuit__pulse { display: none; }
}

/* ==========================================================================
   Ajustes de viewport chico
   ========================================================================== */
@media (max-width: 640px) {
  .clients__grid, .clients__track { gap: var(--s6); }
  .clogo { height: 24px; }
  .clogo--dlocalgo { height: 28px; }
  :root { --gutter: 20px; --s9: 72px; --s10: 88px; }
  body { font-size: 16px; }

  .nav__in { gap: var(--s3); }
  .brand { font-size: 17px; }
  .brand__mark { width: 26px; height: 26px; }
  .nav__toggle { margin-left: auto; }
  .nav__cta { order: 3; }
  .nav__cta .btn { padding: 8px 14px; }

  .hero { padding: var(--s8) 0 var(--s9); }
  .hero__actions .btn { flex: 1 1 auto; }

  /* Los datos y las celdas del sistema no compiten por ancho acá. */
  .stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .section-head { margin-bottom: var(--s6); }

  .cta__actions .btn { width: 100%; }

  .mock__body { padding: var(--s4); }
  .mrow__meta, .mrow__s { font-size: 11.5px; }
}


/* ==========================================================================
   Scroll fijado — los productos pasan sin que la pantalla se mueva
   El track consume alto de scroll; el stage queda pegado ocupando la pantalla.
   ========================================================================== */
.pin {
  position: relative;
  height: auto;                      /* estado base: lista corriente */
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
}
/* Cuánto scroll consume cada ficha antes de dar paso a la siguiente.
   Más bajo = transiciones más seguidas y livianas; más alto = más tiempo
   de lectura por ficha, pero se siente pesado. */
.pin { --step-scroll: 52vh; }
.js .pin { height: calc((var(--steps, 4) - 1) * var(--step-scroll) + 100vh); }
.pin__anchor { position: absolute; left: 0; width: 1px; height: 1px; }

.pin__stage { padding: var(--s9) 0; display: flex; align-items: center; }
.js .pin__stage {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  padding: var(--s6) 0;
  overflow: hidden;
}
.pin__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s8); align-items: center; width: 100%;
}
.pin__copy { display: flex; flex-direction: column; }
/* Dentro del pin todo baja un escalón: el bloque tiene que entrar en 100vh. */
.pin__copy .h2 { font-size: clamp(26px, 2.7vw, 36px); margin-bottom: var(--s5); }
.pin .chapter { margin-bottom: var(--s4); }
.pin .tag { margin-bottom: var(--s3); }

/* El carrete: las fichas se apilan en el mismo hueco y se turnan. */
.pin__reel { display: grid; gap: var(--s7); }
/* Las fichas viajan de abajo hacia arriba dentro de una banda fija. Son
   opacas y no se cruzan: la de salida se va entera antes de que la
   siguiente llegue al centro. La máscara evita el corte duro en los bordes
   de la banda, que si no se ve como una guillotina. */
.js .pin__reel {
  gap: 0; align-items: center;
  height: min(34vh, 280px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.pstep { grid-area: 1 / 1; align-self: start; }
.js .pstep { align-self: center; }
/* Atado al scroll: el JS escribe opacity/transform cuadro a cuadro, así que
   acá no va ninguna transición — competiría con esos valores y se vería el
   salto. El suavizado sale de la curva de la ventana, no de un transition. */
.js .pstep { pointer-events: none; will-change: transform; }
.js .pstep.is-on { pointer-events: auto; }

.pstep__name { font-size: clamp(24px, 2.5vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-bottom: var(--s2); }
.pstep__lead { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s4); max-width: 48ch; }
.pstep .feats { gap: 10px; margin-bottom: var(--s4); }
.pstep .feats li { font-size: 14.5px; line-height: 1.45; }
.pstep .note { margin-bottom: 0; }

/* Pie: navegación por pasos + CTA */
.pin__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pin__dots { display: flex; flex-wrap: wrap; gap: var(--s2); margin-right: auto; }
.pin__dots button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  color: var(--ink-3); border: 1px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pin__dots button span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pin__dots li.is-on button { color: var(--ink); background: var(--surface); border-color: var(--line); }
.pin__dots li.is-on button span { background: var(--ci, var(--brand-800)); transform: scale(1.25); }
@media (hover: hover) and (pointer: fine) {
  .pin__dots button:hover { color: var(--ink); }
}

/* Los mockups se turnan igual que las fichas. */
.pin__mocks { display: grid; align-items: center; gap: var(--s7); }
.js .pin__mocks {
  gap: 0;
  height: min(62vh, 500px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pmock { grid-area: 1 / 1; display: flex; align-items: center; }
.pmock > .mock { width: 100%; }
.js .pmock { pointer-events: none; will-change: transform; }
.js .pmock.is-on { pointer-events: auto; }

@media (max-width: 980px) {
  /* Sin espacio para dos columnas el efecto estorba: se desarma en lista.
     `display: contents` sube fichas y mockups al mismo grid para poder
     intercalarlos con `order` — cada producto con su pantalla debajo. */
  .pin { height: auto; background: var(--surface-alt); }
  .pin__stage { position: static; height: auto; min-height: 0; padding: var(--s9) 0; overflow: visible; }
  .pin__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .js .pin { height: auto; }
  .js .pin__stage { position: static; height: auto; min-height: 0; padding: var(--s9) 0; overflow: visible; }
  .js .pin__reel, .js .pin__mocks { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .js .pstep, .js .pmock { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .pin__copy, .pin__reel, .pin__mocks { display: contents; }
  .pstep, .pmock { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; }
  .pstep { margin-top: var(--s7); }
  .pstep:first-of-type { margin-top: var(--s5); }
  .pstep[data-i="0"] { order: 1; } .pmock[data-i="0"] { order: 2; }
  .pstep[data-i="1"] { order: 3; } .pmock[data-i="1"] { order: 4; }
  .pstep[data-i="2"] { order: 5; } .pmock[data-i="2"] { order: 6; }
  .pstep[data-i="3"] { order: 7; } .pmock[data-i="3"] { order: 8; }
  .pin__foot { display: none; }
  .pin__anchor { position: static; }
}

/* ==========================================================================
   Cómo trabajamos — línea que se llena
   ========================================================================== */
.flow {
  background: var(--bg); color: var(--ink);
}
.flow__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: var(--s8); align-items: start; }
.flow__copy { position: sticky; top: calc(var(--nav-h) + var(--s6)); }
.flow .h2 { margin-bottom: var(--s5); }
.flow .lead { color: var(--ink-2); }
.flow__actions { margin-top: var(--s6); }


.flow__steps { position: relative; display: grid; gap: var(--s5); padding-left: 0; align-content: start; }
/* Riel base y riel de relleno, uno encima del otro. */
.flow__steps::before,
.flow__steps::after {
  content: ''; position: absolute; left: 20px; top: 21px; bottom: 21px; width: 2px;
  border-radius: 2px;
}
.flow__steps::before { background: var(--line-strong); }
.flow__steps::after {
  background: linear-gradient(180deg, var(--brand-800), var(--wave-ink));
  bottom: auto; height: var(--fill, 0%);
  transition: height 120ms linear;
}

.fstep { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.fstep__badge {
  position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  transition: border-color var(--dur-enter) var(--ease), background var(--dur-enter) var(--ease),
              box-shadow var(--dur-enter) var(--ease);
}
.fstep__badge svg { width: 18px; height: 18px; stroke: var(--ink-3); transition: stroke var(--dur-enter) var(--ease); }
.fstep.is-on .fstep__badge {
  border-color: var(--brand-800);
  background: var(--brand-800);
  box-shadow: 0 0 0 4px rgba(16,112,209,.10);
}
.fstep.is-on .fstep__badge svg { stroke: #FEFEFD; }

.fstep__body { padding-top: 1px; display: grid; gap: 5px; }
.fstep__head { display: flex; align-items: center; gap: 10px; }
.fstep__n {
  padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--surface-alt); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  transition: background var(--dur-enter) var(--ease), color var(--dur-enter) var(--ease);
}
.fstep.is-on .fstep__n { background: var(--brand-50); border-color: transparent; color: var(--brand-800); }
.fstep__t { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.fstep p:last-child { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 44ch; }

@media (max-width: 980px) {
  .flow__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .flow__copy { position: static; }
}
@media (max-width: 560px) {
  .fstep__head { flex-wrap: wrap; gap: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento, pero el contenido tiene que seguir siendo alcanzable. */
  .pin, .js .pin { height: auto; }
  .pin__stage, .js .pin__stage { position: static; height: auto; min-height: 0; padding: var(--s9) 0; overflow: visible; }
  /* Hay que deshacer también la banda: sin JS que mueva las fichas, un
     contenedor de 280px con overflow oculto se comería la lista entera. */
  .pin__reel, .pin__mocks, .js .pin__reel, .js .pin__mocks {
    display: grid; gap: var(--s7);
    height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .pstep, .pmock, .js .pstep, .js .pmock {
    grid-area: auto; opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  }
  .pin__foot { display: none; }
  .flow__steps::after { height: 100% !important; }
  .fstep .fstep__badge { border-color: var(--brand-800); background: var(--brand-800); }
  .fstep .fstep__badge svg { stroke: #FEFEFD; }
}


/* ── Mockups del recorrido ───────────────────────────────────────────────── */
.bubble {
  margin-top: var(--s4); padding: 13px 15px;
  border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg);
  background: var(--surface-alt); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 92%;
}
.bubble--quiet { margin-top: 0; opacity: .6; }
.mnote {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-3);
}
.acts { display: grid; gap: 2px; }
.acts li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
}
.acts li:last-child { border-bottom: none; }
.acts svg { width: 15px; height: 15px; stroke: var(--ci); transform: translateY(2px); }
.acts b { color: var(--ink); font-weight: 600; }
.acts code { font-family: var(--mono); font-size: 11.5px; color: var(--ci); }


/* ==========================================================================
   Aurora — el brillo del sistema
   Tres bandas frías, muy tenues y muy desenfocadas. No es un degradado
   decorativo centrado: recorre el ancho como una luz de fondo.
   ========================================================================== */
.aurora {
  position: absolute; inset: -45% -35% auto -35%; height: 105vh;
  z-index: -1; pointer-events: none;
  /* Los centros quedan lejos de los bordes y el radio cierra antes de
     llegar: así la luz se apaga sola y no se ve el corte del recorte. */
  background:
    radial-gradient(38% 42% at 26% 46%, rgba(var(--aur-1), .13), transparent 62%),
    radial-gradient(40% 44% at 52% 26%, rgba(var(--aur-2), .16), transparent 64%),
    radial-gradient(36% 44% at 76% 48%, rgba(var(--aur-3), .11), transparent 62%);
  filter: blur(72px) saturate(1.1);
}
.aurora--soft { opacity: .5; }
.hero, .pin { position: relative; isolation: isolate; }
.hero, .pin { overflow: clip; }

/* En el cierre la aurora rodea el texto: cubre la sección de lado a lado y
   los centros quedan por fuera del bloque de copy para no lavarlo. */
.cta-section .aurora {
  inset: -40% -30% -40% -30%; height: auto;
  background:
    radial-gradient(34% 46% at 16% 46%, rgba(var(--aur-1), .26), transparent 64%),
    radial-gradient(38% 44% at 50% 12%, rgba(var(--aur-2), .24), transparent 66%),
    radial-gradient(34% 46% at 84% 50%, rgba(var(--aur-3), .22), transparent 64%);
  filter: blur(76px) saturate(1.12);
  /* La luz se apaga antes de tocar los bordes de la sección: si no, el
     recorte deja una línea horizontal dura contra la sección de arriba. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
}

/* Los nodos del circuito y los puntos activos brillan en vez de sólo pintarse. */
.node--crm  circle { filter: drop-shadow(0 0 5px rgba(34,211,238,.60)); }
.node--agt  circle { filter: drop-shadow(0 0 5px rgba(56,189,248,.55)); }
.node--desk circle { filter: drop-shadow(0 0 5px rgba(84,163,242,.55)); }
.node--wave circle { filter: drop-shadow(0 0 5px rgba(76,111,255,.50)); }
.pin__dots li.is-on button span { box-shadow: 0 0 8px -1px currentColor; }
.eyebrow .dot { box-shadow: 0 0 7px rgba(34,211,238,.85); }


/* ==========================================================================
   Botón aurora — el mismo cielo del bloque de cierre, en escala de botón
   A este tamaño no sirve desenfocar: el blur se comería los bordes. Los
   radiales se pintan directo, con más alfa para compensar la falta de blur
   y centros fuera de la caja para que dentro solo se vea la parte suave.
   ========================================================================== */
.btn--aurora {
  color: var(--ink);
  border-color: var(--brand-100);
  background-color: var(--brand-50);
  background-image:
    radial-gradient(90% 220% at 6% 12%,  rgba(var(--aur-1), .60), transparent 58%),
    radial-gradient(80% 200% at 48% -8%, rgba(var(--aur-2), .42), transparent 60%),
    radial-gradient(90% 220% at 96% 26%, rgba(var(--aur-3), .55), transparent 58%);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-size var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  background-size: 100% 100%;
}
@media (hover: hover) and (pointer: fine) {
  /* Al pasar por encima el cielo se abre un poco: los centros se alejan y
     entra más superficie de color, sin cambiar el tamaño del botón. */
  .btn--aurora:hover {
    border-color: var(--brand-200);
    background-size: 128% 150%;
    box-shadow: 0 8px 22px -8px rgba(16,112,209,.40);
  }
}
.btn--aurora:active { box-shadow: var(--shadow-sm); }


/* ==========================================================================
   Tipografía de las cards
   Plus Jakarta Sans en 400 se afina mucho por debajo de 14px: los mockups
   quedaban lavados. Dentro de las cards el peso mínimo pasa a 500 y algunos
   cuerpos suben medio punto. Ambas familias son variables (Jakarta 400-800,
   Mono 400-500), así que el 500 es un peso real, no un engrosado sintético.
   ========================================================================== */
.mock { font-weight: 500; }
.mock__bar span   { font-weight: 500; font-size: 11px; }
.mock__tab        { font-weight: 500; }
.chip             { font-weight: 500; }

.mrow__t          { font-weight: 700; }
.mrow__s          { font-weight: 500; font-size: 12.5px; }
.mrow__meta       { font-weight: 500; font-size: 11px; }

.instr__item b    { font-weight: 700; }
.instr__item p    { font-weight: 500; font-size: 13px; color: var(--ink-2); }

.acts li          { font-weight: 500; font-size: 13.5px; }
.acts b           { font-weight: 700; }

.bubble           { font-weight: 500; font-size: 14px; }
.mnote            { font-weight: 500; font-size: 11.5px; }

.kv dt            { font-weight: 500; }
.kv dd            { font-weight: 500; font-size: 14px; }

.bar__top         { font-weight: 500; font-size: 13px; }
.bar__top b       { font-weight: 700; }

/* ==========================================================================
   Nav · menú de productos (SMS-460)
   El disparador comparte la geometría de .nav__links a para que el menú no
   se lea como un botón distinto: es el mismo item, con un chevron.
   ========================================================================== */
.nav__group { position: relative; }
.nav__trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 8px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__trigger:hover { color: var(--ink); background: var(--surface-alt); }
.nav__chev { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--surface-alt); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 120;
  width: 320px; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  /* Cerrado no recibe foco ni lectura: visibility, no solo opacity. */
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur-exit) var(--ease), transform var(--dur-exit) var(--ease),
              visibility 0s linear var(--dur-exit);
}
.nav__menu.open {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease), visibility 0s;
}
.nav__menu a {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 10px; padding: 10px 12px; border-radius: var(--r-md);
}
.nav__menu a:hover { background: var(--surface-alt); }
.nav__dot {
  grid-row: span 2; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.nav__menu b { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.nav__menu i {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}

/* Página actual: subrayado corto, no un pill relleno. */
.nav__links [aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__links [aria-current="page"]::after {
  content: ''; display: block; height: 2px; margin: 4px 12px -6px;
  background: var(--brand-800); border-radius: 2px;
}

.nav__mobile-label {
  padding: 14px var(--gutter) 6px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3);
}
.nav__mobile-label + a { border-top: none; }
.nav__mobile.open { max-height: 640px; }

/* Fila de acciones de un bloque de producto: el CTA de demo y el enlace a la
   página dedicada. El enlace es texto, no un segundo botón — dos botones del
   mismo peso compiten y ninguno gana. */
.product__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.link-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--ci, var(--brand-800));
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease);
}
.link-more:hover { border-bottom-color: currentColor; }
.link-more svg { width: 15px; height: 15px; }
.link-more:hover .arrow, .link-more:hover svg.arrow { transform: translateX(3px); }