/* ============================================================================
   SABNU — landing.css · las secciones nuevas de la portada (PLAN-LANDING)
   Se carga DESPUÉS de styles.css y usa sus tokens (--bg, --w, --cy…, la
   paleta clara MEDIDA de PLAN-COLORES). Aquí sólo hay lo nuevo:
     §0 el sistema (tipografía de sección, retícula, movimiento)
     §1 la sección «Cuatro áreas» (02)
   CSP 'self': nada en línea. Lo que mueve el JS son variables (--x, --y,
   --dur) escritas con style.setProperty, que la CSP no toca.
   ========================================================================== */

/* ── §0 · El sistema ───────────────────────────────────────────────────────
   Titulares: Space Grotesk 500, no 700. Más grandes, más ligeros y más
   cerrados (como Sierra y Vorta): la seriedad la da el tamaño, no el peso.
   La retícula se VE (como Nodi): líneas de 1 px y márgenes rayados. */
:root {
  --l-linea: rgba(var(--ink-rgb), .09);
  --l-linea-2: rgba(var(--ink-rgb), .14);
  --l-raya: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .055) 0 1px, transparent 1px 9px);
  --l-h2: clamp(2.5rem, 5.4vw, 4.75rem);
  --l-marco: 1280px;
  /* Movimiento: una curva de salida para casi todo y tres duraciones. */
  --l-ease: cubic-bezier(.22, 1, .36, 1);
  --l-io: cubic-bezier(.65, 0, .35, 1);
  --l-t1: 220ms;
  --l-t2: 480ms;
  --l-t3: 900ms;
}

/* ── §1 · Una factura, todo el sistema (sección 02) ───────────────────────
   Una historia que avanza con el SCROLL: la pista mide 4 pantallas y dentro
   hay un escenario fijo (sticky). El JS escribe en la sección el paso (0–3)
   y el avance dentro del paso; la hoja decide qué se ve. Sin JS: el último
   paso, quieto. */
.ld { position: relative; border-top: 1px solid var(--l-linea); }
.ld::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--l-raya);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--l-marco) / 2), transparent calc(50% - var(--l-marco) / 2), transparent calc(50% + var(--l-marco) / 2), #000 calc(50% + var(--l-marco) / 2));
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--l-marco) / 2), transparent calc(50% - var(--l-marco) / 2), transparent calc(50% + var(--l-marco) / 2), #000 calc(50% + var(--l-marco) / 2));
}
.ld-marco { position: relative; max-width: var(--l-marco); margin-inline: auto; border-inline: 1px solid var(--l-linea); }
.ld-cab { padding: clamp(72px, 10vw, 136px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px); }
.ld-kicker {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.ld-kicker span:first-child::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px;
  border-radius: 2px; background: var(--cy); vertical-align: 1px;
}
.ld-h {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 500;
  font-size: var(--l-h2); line-height: .98; letter-spacing: -.045em; color: var(--w);
}
.ld-h em { font-style: normal; color: var(--cy-lit); }
.ld-sub { margin-top: 22px; max-width: 34em; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--muted); }

/* El escenario: del alto de una pantalla (sin la cabecera), sin scroll propio. */
.ld-pista { position: relative; }
.ld-fijo {
  position: relative;
  height: clamp(560px, calc(100vh - var(--nav-h) - 40px), 820px);
  height: clamp(560px, calc(100svh - var(--nav-h) - 40px), 820px);
  border-block: 1px solid var(--l-linea);
  overflow: hidden;
}
.ld-rejilla {
  height: 100%;
  display: grid; grid-template-columns: minmax(230px, 2.6fr) minmax(0, 9.4fr);
}

/* ── La guía: los cuatro pasos y el riel de avance ── */
.ld-guia {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 26px);
  padding: 24px clamp(20px, 2.6vw, 40px) 24px clamp(36px, 3.6vw, 56px);
  border-right: 1px solid var(--l-linea);
}
.ld-paso { opacity: .42; transition: opacity var(--l-t2) var(--l-ease); }
.ld-paso.on { opacity: 1; }
@media (hover: hover) { .ld-paso:hover { opacity: .8; } .ld-paso.on:hover { opacity: 1; } }
.ld-b { position: relative; display: grid; grid-template-columns: 2.6em 1fr; gap: 0 4px; width: 100%; padding: 6px 0 14px; text-align: left; color: inherit; cursor: pointer; }
.ld-txt, .ld-t { display: block; }
.ld-barra { position: absolute; left: 2.6em; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--l-linea); overflow: hidden; opacity: 0; transition: opacity var(--l-t1) var(--l-ease); }
.ld-paso.on .ld-barra { opacity: 1; }
.ld-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy-lit), var(--cy)); transform: scaleX(var(--q, 0)); transform-origin: left; }
.ld-pie { margin-top: 4px; }
.ld-leyenda { display: none; }
.ld-n { font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .06em; color: var(--muted-2); padding-top: .35em; }
.ld-paso.on .ld-n { color: var(--cy); }
.ld-t {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2; color: var(--w);
}
.ld-d {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  font-size: .95rem; line-height: 1.5; color: var(--muted);
  transition: grid-template-rows var(--l-t2) var(--l-ease), opacity var(--l-t2) var(--l-ease), margin var(--l-t2) var(--l-ease);
}
.ld-d > span { min-height: 0; }
.ld-paso.on .ld-d { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
/* El riel: una línea que se llena con el avance de toda la historia. */
.ld-riel { position: absolute; left: clamp(18px, 1.8vw, 28px); top: 22%; bottom: 22%; width: 2px; background: var(--l-linea); border-radius: 2px; }
.ld-riel i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--cy-lit), var(--cy)); border-radius: 2px; transform: scaleY(var(--p, 0)); transform-origin: top; }

/* ── El escenario: la réplica se escala entera (1 em = 16 px del panel real) ── */
.ld-escenario {
  position: relative; min-width: 0;
  display: grid; place-items: center;
  padding: clamp(12px, 1.6vw, 24px);
  background:
    radial-gradient(60% 55% at 62% 42%, rgba(var(--cy-rgb), .10), transparent 70%),
    radial-gradient(rgba(var(--ink-rgb), .12) 1px, transparent 1.2px) 0 0 / 18px 18px;
  container-type: size;
}
/* El panel real mide 1180 × 736 px (272 de menú + 908 de contenido): en em,
   73,75 × 46. La letra es la que cabe por ancho y por alto. */
.ld-app {
  --a-line: rgba(var(--ink-rgb), .1);
  --a-line2: rgba(var(--ink-rgb), .17);
  position: relative;
  width: 73.75em; height: 46em;
  font-size: min(calc(100cqw / 73.75), calc(100cqh / 46));
  display: grid; grid-template-columns: 17em 1fr;
  background: var(--bg);
  border: 1px solid var(--a-line); border-radius: 1.1em;
  box-shadow: 0 .06em 0 rgba(255,255,255,.9) inset, 0 .15em .4em rgba(var(--sh-rgb), .06), 0 2.6em 5em -2.4em rgba(var(--sh-rgb), .42);
  overflow: hidden; isolation: isolate;
  font-family: 'Inter', sans-serif; color: var(--w);
}
.ld-app svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Barra lateral (dash.css: 272 px, blanca, borde 1 px, ítems de 47 px y radio 12) */
.ld-side { background: #fff; border-right: 1px solid var(--a-line); padding: 1.375em 1em; display: flex; flex-direction: column; gap: 1.2em; overflow: hidden; }
.ld-logo { align-self: flex-start; height: 1.875em; width: auto; max-width: none; margin: .1em .5em; }
.ld-nav { display: flex; flex-direction: column; gap: .12em; }
.ld-i {
  display: flex; align-items: center; gap: .8125em;
  padding: .62em .8125em; border-radius: .75em; border: 1px solid transparent;
  font-size: .8875em; color: rgba(var(--ink-rgb), .88);
  transition: background-color var(--l-t2) var(--l-ease), border-color var(--l-t2) var(--l-ease), color var(--l-t2) var(--l-ease);
}
.ld-i svg { width: 1.34em; height: 1.34em; flex: none; color: rgba(var(--ink-rgb), .75); }
.ld-g::after { content: '›'; margin-left: auto; color: rgba(var(--ink-rgb), .5); font-size: 1.15em; line-height: 1; }
.ld-abierto::after { transform: rotate(90deg); }
.ld-subs { display: flex; flex-direction: column; gap: .12em; margin-left: 1.15em; padding-left: .75em; border-left: 1px solid var(--a-line); }
.ld-i.on { background: rgba(var(--cy-rgb), .09); border-color: rgba(var(--cy-rgb), .2); color: var(--w); font-weight: 600; }
.ld-i.on svg { color: var(--cy); }

/* Barra de arriba (82 px, buscador de 285 × 50, campana redonda) */
.ld-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ld-top { display: flex; justify-content: flex-end; align-items: center; gap: .75em; height: 5.1em; padding: 0 1.4em; }
.ld-busca {
  display: flex; align-items: center; gap: .6em; width: 17.8em; height: 3.1em; padding: 0 .9em;
  border: 1px solid var(--a-line); border-radius: .75em; background: #fff;
  font-size: .86em; color: rgba(var(--ink-rgb), .62);
}
.ld-busca svg { width: 1.1em; height: 1.1em; }
.ld-busca kbd { margin-left: auto; padding: .1em .45em; border: 1px solid var(--a-line); border-radius: .35em; font-family: inherit; font-size: .78em; }
.ld-redondo { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; border: 1px solid var(--a-line); background: #fff; }
.ld-redondo svg { width: 1.15em; height: 1.15em; }

/* Las pantallas */
.ld-pantallas { position: relative; flex: 1; }
.ld-pant {
  position: absolute; inset: 0; padding: .4em 1.6em 1.4em;
  opacity: 0; visibility: hidden; transform: translate3d(0, .8em, 0);
  transition: opacity var(--l-t2) var(--l-ease), transform var(--l-t2) var(--l-ease), visibility 0s linear var(--l-t2);
}
.ld-pant.on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--l-t2) var(--l-ease), transform var(--l-t2) var(--l-ease), visibility 0s; }

/* Encabezado de página real: Inter 700, 32 px, media palabra en azul; botones en píldora */
.ld-ph { display: flex; align-items: center; gap: .55em; margin-bottom: 1.1em; }
.ld-ph h4 { margin-right: auto; font-family: 'Inter', sans-serif; font-size: 2em; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--w); }
.ld-ph h4 em { font-style: normal; color: var(--cy); }
.ld-bt {
  display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.12em; border-radius: 99em;
  border: 1px solid var(--a-line2); background: #fff;
  font-family: 'Space Grotesk', sans-serif; font-size: .85em; font-weight: 500; color: var(--w); white-space: nowrap;
}
.ld-bt-p { background: var(--cy); border-color: var(--cy); color: #fff; }

/* Cifras (KPI) */
.ld-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75em; margin-bottom: 1em; }
.ld-kpis p { display: flex; flex-direction: column; gap: .3em; padding: 1em 1.1em; border-radius: 1.1em; border: 1px solid var(--a-line); background: rgba(var(--ink-rgb), .035); }
.ld-kpis span { font-size: .7em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--ink-rgb), .7); }
.ld-kpis b { font-family: 'Space Grotesk', sans-serif; font-size: 1.45em; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ld-kpis small { font-size: .74em; color: rgba(var(--ink-rgb), .7); }

/* Filas de lista (invfila / comfila / ctbfila: blancas, radio 14, borde 1) */
.ld-fila {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: .8em 1em; margin-bottom: .5em; border-radius: .875em; border: 1px solid var(--a-line); background: #fff;
  transition: border-color var(--l-t2) var(--l-ease), box-shadow var(--l-t2) var(--l-ease), background-color var(--l-t2) var(--l-ease);
}
.ld-fila > div { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .6em; min-width: 0; }
.ld-fila > div > b { font-size: .92em; font-weight: 600; color: var(--w); }
.ld-fila > div > span { flex-basis: 100%; font-size: .78em; color: rgba(var(--ink-rgb), .7); }
.ld-tot { font-family: 'Space Grotesk', sans-serif; font-size: 1em; font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-e { font-style: normal; font-size: .68em; font-weight: 600; padding: .25em .7em; border-radius: 99em; }
.ld-e-borr { color: #7a4d02; background: rgba(168, 106, 5, .1); }
.ld-e-reg { color: var(--a-green); background: rgba(var(--ok-rgb), .09); }
.ld-e-debe { color: var(--cy-deep); background: rgba(var(--cy-rgb), .09); }
.ld-fila.pulsada { border-color: rgba(var(--cy-rgb), .45); box-shadow: 0 0 0 .3em rgba(var(--cy-rgb), .08); }

/* 01 · Sabi */
.ld-ava { width: 2.3em; height: 2.3em; border-radius: .6em; flex: none; }
/* La tarjeta de propuesta (panel.css .op, en su tono claro) */
.ld-op {
  --op-bd: rgba(168, 106, 5, .38); --op-bg: rgba(168, 106, 5, .10); --op-ac: #7a4d02;
  width: 29em; border-radius: .875em; overflow: hidden; border: 1px solid var(--op-bd);
  background: linear-gradient(140deg, var(--op-bg), rgba(255,255,255,.5));
  transition: border-color var(--l-t2) var(--l-ease), background-color var(--l-t2) var(--l-ease);
}
.ld-op-h { display: flex; align-items: center; gap: .56em; padding: .68em .94em; border-bottom: 1px solid var(--op-bd); font-family: 'Space Grotesk', sans-serif; font-size: .66em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--op-ac); }
.ld-op-i { width: 1.5em; height: 1.5em; border-radius: 50%; border: .15em solid currentColor; flex: none; display: grid; place-items: center; }
.ld-op-i::after { content: '?'; font-size: 1em; font-weight: 700; line-height: 1; }
.ld-op-p { padding: .82em .94em .6em; font-size: .9em; font-weight: 600; line-height: 1.45; color: var(--w); }
.ld-op-d { padding: 0 .94em .25em; margin: 0; }
.ld-op-d div { display: flex; gap: .7em; padding: .2em 0; font-size: .8em; line-height: 1.4; }
.ld-op-d dt { flex: 0 0 5.25em; font-weight: 500; color: rgba(var(--ink-rgb), .88); }
.ld-op-d dd { margin: 0; color: rgba(var(--ink-rgb), .88); }
.ld-op-b { display: flex; gap: .56em; padding: .75em .94em .4em; }
.ld-op-b span { flex: 1; display: grid; place-items: center; height: 2.4em; border-radius: .56em; border: 1px solid var(--a-line2); background: rgba(var(--ink-rgb), .05); font-size: .85em; font-weight: 600; transition: border-color var(--l-t1) var(--l-ease), color var(--l-t1) var(--l-ease), transform var(--l-t1) var(--l-ease); }
.ld-op-si.pulsado { border-color: var(--op-ac); color: var(--op-ac); transform: scale(.97); }
.ld-op-n { padding: .1em .94em .8em; font-size: .75em; color: rgba(var(--ink-rgb), .88); }
.ld-op-f { display: none; gap: .6em; padding: .75em .94em; border-top: 1px solid var(--op-bd); font-size: .82em; line-height: 1.45; }
.ld-op-f span { display: grid; place-items: center; width: 1.3em; height: 1.3em; flex: none; border-radius: 50%; background: var(--op-ac); color: #fff; font-size: .75em; font-weight: 700; }
.ld-op.ok { --op-bd: rgba(34, 197, 94, .28); --op-ac: var(--a-green); --op-bg: rgba(3, 22, 63, .035); }
.ld-op.ok .ld-op-b, .ld-op.ok .ld-op-n { display: none; }
.ld-op.ok .ld-op-f { display: flex; }
.ld-op.ok .ld-op-p { color: rgba(var(--ink-rgb), .88); }

/* 02 · Compras: la ventana de confirmar (SabnuUI) */
.ld-modal {
  position: absolute; left: 50%; top: 46%; width: 24em; z-index: 3;
  padding: 1.3em 1.4em 1.1em; border-radius: 1.1em; background: #fff; border: 1px solid var(--a-line);
  box-shadow: 0 1.6em 3.4em -1.2em rgba(var(--sh-rgb), .45), 0 0 0 100em rgba(6, 31, 82, .14);
  transform: translate(-50%, -50%) scale(.96); opacity: 0; visibility: hidden;
  transition: opacity var(--l-t2) var(--l-ease), transform var(--l-t2) var(--l-ease), visibility 0s linear var(--l-t2);
}
.ld-modal.si { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity var(--l-t2) var(--l-ease), transform var(--l-t2) var(--l-ease), visibility 0s; }
.ld-modal-t { font-family: 'Space Grotesk', sans-serif; font-size: 1.15em; font-weight: 600; }
.ld-modal-x { margin-top: .5em; font-size: .82em; line-height: 1.5; color: rgba(var(--ink-rgb), .78); }
.ld-modal-b { display: flex; justify-content: flex-end; gap: .5em; margin-top: 1em; }
.ld-modal-b span { padding: .55em 1.1em; border-radius: 99em; border: 1px solid var(--a-line2); font-size: .82em; font-weight: 600; }
.ld-modal-b .ld-bt-p { border-color: var(--cy); }
.ld-modal-b .pulsado { transform: scale(.95); }

/* 03 · Inventario: el contador de unidades (invcant) */
.ld-cant { display: inline-flex; align-items: center; border: 1px solid var(--a-line); border-radius: .6em; overflow: hidden; margin-left: auto; }
.ld-cant i { display: grid; place-items: center; width: 1.9em; height: 1.9em; font-style: normal; color: rgba(var(--ink-rgb), .6); }
.ld-cant b { min-width: 2.6em; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .85em; font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-mas { font-style: normal; font-size: .72em; font-weight: 600; color: var(--a-green); background: rgba(var(--ok-rgb), .09); padding: .2em .6em; border-radius: 99em; opacity: 0; transform: translateX(-.4em); transition: opacity var(--l-t2) var(--l-ease), transform var(--l-t2) var(--l-ease); }
.ld-inv.sube { border-color: rgba(var(--ok-rgb), .4); box-shadow: 0 0 0 .3em rgba(var(--ok-rgb), .07); }
.ld-inv.sube .ld-mas { opacity: 1; transform: none; }

/* 04 · Contabilidad: pestañas, el libro y el cajón del comprobante */
.ld-pills { display: flex; gap: .4em; margin-bottom: .8em; }
.ld-pills span { padding: .45em .95em; border-radius: 99em; border: 1px solid var(--a-line); font-family: 'Space Grotesk', sans-serif; font-size: .78em; font-weight: 500; color: rgba(var(--ink-rgb), .82); }
.ld-pills .on { border-color: rgba(var(--cy-rgb), .35); background: rgba(var(--cy-rgb), .09); color: var(--w); }
.ld-tabs { display: flex; gap: 1.4em; margin-bottom: .9em; border-bottom: 1px solid var(--a-line); }
.ld-tabs span { padding: .5em .1em .6em; font-size: .78em; color: rgba(var(--ink-rgb), .78); }
.ld-tabs .on { color: var(--cy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cy); }
.ld-lib > div > b { font-family: 'Inter', sans-serif; }
.ld-nueva { border-color: rgba(var(--cy-rgb), .3); }
.ld-cajon {
  position: absolute; top: -5.1em; right: -1px; bottom: -1px; width: 31em; z-index: 3;
  padding: 1.4em 1.4em; background: #fff; border-left: 1px solid var(--a-line);
  box-shadow: -2em 0 4em -2em rgba(var(--sh-rgb), .35);
  transform: translateX(105%); transition: transform var(--l-t2) var(--l-ease);
}
.ld-cajon.si { transform: none; }
.ld-cajon-t { font-family: 'Space Grotesk', sans-serif; font-size: 1.15em; font-weight: 600; padding-bottom: .8em; border-bottom: 1px solid var(--a-line); }
.ld-cajon-c { display: flex; flex-direction: column; gap: .2em; margin: 1em 0; }
.ld-cajon-c b { font-size: .92em; }
.ld-cajon-c span { font-size: .78em; color: rgba(var(--ink-rgb), .7); }
.ld-asi p { display: grid; grid-template-columns: minmax(0, 1fr) 6.2em 6.2em; gap: .6em; align-items: start; }
.ld-asi p > span:not(:first-child), .ld-asi-tot b { text-align: right; font-variant-numeric: tabular-nums; }
.ld-asi-cab { padding-bottom: .5em; border-bottom: 1px solid var(--a-line); }
.ld-asi-cab span { font-size: .66em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(var(--ink-rgb), .7); }
.ld-asi-f { padding: .55em 0; border-bottom: 1px solid rgba(var(--ink-rgb), .07); }
.ld-asi-f > span:first-child { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.ld-asi-f b { font-size: .78em; font-weight: 600; }
.ld-asi-f i { font-style: normal; font-size: .72em; color: rgba(var(--ink-rgb), .7); }
.ld-asi-f > span:not(:first-child) { font-size: .81em; }
.ld-asi-tot { padding-top: .6em; border-top: 1px solid var(--a-line2); margin-top: .15em; }
.ld-asi-tot span { font-size: .75em; font-weight: 600; color: rgba(var(--ink-rgb), .75); }
.ld-asi-tot b { font-size: .84em; font-weight: 700; color: var(--cy); }

/* Lo que aparece según el avance: oculto mientras la historia corre. */
.ld.vivo [data-ver]:not(.si), .ld.vivo .ld-e-reg[data-ver]:not(.si) { opacity: 0; transform: translate3d(0, .5em, 0); }
.ld.vivo .ld-cajon[data-ver]:not(.si) { opacity: 1; transform: translateX(105%); }
[data-ver] { transition: opacity var(--l-t2) var(--l-ease), transform var(--l-t2) var(--l-ease); }
.ld-e-borr { transition: opacity var(--l-t2) var(--l-ease); }
.ld-fila-com.registrada .ld-e-borr { display: none; }
.ld:not(.vivo) .ld-e-borr { display: none; }      /* sin historia: el estado final */

/* El dato que viaja: una píldora que salta de pantalla en pantalla. */
.ld-dato {
  position: absolute; left: 0; top: 0; z-index: 6;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .4em .85em .4em .6em; border-radius: 99em;
  background: var(--navy); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: .74em; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 .6em 1.6em -.5em rgba(var(--cy-rgb), .55), 0 0 0 .3em rgba(var(--cy-rgb), .12);
  transform: translate3d(var(--dx, 0), var(--dy, 0), 0);
  transition: transform 700ms var(--l-io), opacity var(--l-t2) var(--l-ease);
  opacity: 0; pointer-events: none;
}
.ld-dato i { width: .55em; height: .55em; border-radius: 50%; background: var(--cy-glow); box-shadow: 0 0 0 .25em rgba(78, 150, 246, .3); }
.ld.vivo .ld-dato.si { opacity: 1; }

.ld-cursor {
  position: absolute; left: 0; top: 0; z-index: 7; width: 1.05em; height: 1.5em;
  /* «translate» y no «transform»: la propiedad «scale» del clic se aplica
     DESPUÉS de translate pero ANTES de transform, así que con transform el
     encogido del clic (.82) recortaba también la posición un 18 %. */
  translate: var(--x, 60em) var(--y, 30em);
  /* Sin transición de posición: el JS la calcula en cada fotograma. Al
     pulsar se encoge desde la PUNTA, que es donde está el clic. */
  transform-origin: 10.6% 6.3%;
  transition: opacity var(--l-t1) var(--l-ease), scale var(--l-t1) var(--l-ease);
  opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(var(--sh-rgb), .3));
}
.ld-cursor svg { width: 100%; height: 100%; display: block; fill: initial; stroke: initial; }
.ld.vivo .ld-cursor { opacity: 1; }
.ld-cursor.clic { scale: .82; }
.ld-cursor::after { content: ''; position: absolute; left: -.6em; top: -.6em; width: 1.2em; height: 1.2em; border-radius: 50%; border: 2px solid var(--cy); opacity: 0; transform: scale(.4); }
.ld-cursor.clic::after { animation: ldClic 520ms var(--l-ease); }
@keyframes ldClic { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }

/* Sin JS no hay historia con scroll: la pista mide lo que mide el escenario
   y se ve el último paso entero. */
.ld:not(.js-ld) .ld-pant[data-pant="3"] { opacity: 1; visibility: visible; transform: none; }
.ld:not(.js-ld) .ld-cajon { transform: none; }
.ld:not(.js-ld) .ld-paso { opacity: 1; }
.ld:not(.js-ld) .ld-d { grid-template-rows: 1fr; opacity: 1; }

/* ── Ancho ──────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* En una columna: arriba el paso de turno (solo ese), abajo el escenario. */
  .ld-rejilla { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ld-guia { display: block; min-height: 0; padding: 18px 20px 14px 46px; border-right: 0; border-bottom: 1px solid var(--l-linea); }
  /* Cuatro botones numerados en fila; el texto de cada botón sigue ahí para
     el lector de pantalla y lo que se lee en pantalla es la leyenda. */
  .ld-guia { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 14px 20px 10px; }
  .ld-paso { opacity: 1; }
  .ld-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--l-linea-2); background: #fff; }
  .ld-paso.on .ld-b { border-color: rgba(var(--cy-rgb), .45); background: rgba(var(--cy-rgb), .08); }
  .ld-b .ld-n { padding: 0; }
  .ld-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ld-barra { left: 8px; right: 8px; bottom: 5px; }
  .ld-pie { margin: 0 0 0 auto; }
  .ld-leyenda { display: block; padding: 0 20px 14px; border-bottom: 1px solid var(--l-linea); font-size: .95rem; line-height: 1.45; color: var(--muted); min-height: 3.2em; }
  .ld-leyenda b { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1.1rem; color: var(--w); }
  .ld-rejilla { grid-template-rows: auto auto minmax(0, 1fr); }
  .ld-fijo { height: clamp(620px, calc(100svh - var(--nav-h) - 28px), 860px); }
  .ld-t { font-size: 1.1rem; }
  .ld-d { font-size: .9rem; }
}
/* Celular: sin barra lateral (como el panel real en un teléfono) y la réplica
   se dibuja en 26 em de ancho, para que la letra se pueda leer. */
@container (max-width: 640px) {
  .ld-app { width: 26em; height: 40em; grid-template-columns: 1fr; font-size: min(calc(100cqw / 26), calc(100cqh / 40)); }
  .ld-side { display: none; }
  .ld-top { height: 4em; padding: 0 1em; }
  .ld-busca { width: auto; flex: 1; }
  .ld-pant { padding: .2em 1em 1em; }
  .ld-ph .ld-bt:not(.ld-bt-p) { display: none; }
  .ld-ph h4 { font-size: 1.7em; }
  .ld-kpis { grid-template-columns: 1fr 1fr; gap: .5em; }
  .ld-kpis p { padding: .7em .8em; }
  .ld-chat { padding: 0; }
  .ld-op { width: auto; flex: 1; min-width: 0; }
  .ld-op-d div:nth-child(n+4):not(:nth-child(6)) { display: none; }
  .ld-fila > div > span { font-size: .74em; }
  .ld-pills span:nth-child(-n+4) { display: none; }
  .ld-tabs span:nth-child(-n+2), .ld-tabs span:nth-child(5) { display: none; }
  .ld-cajon { width: auto; left: 0; top: -4em; }
  .ld-modal { width: 21em; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-pant, .ld-pant.on, .ld-dato, .ld-cursor, .ld-cajon, .ld-modal, .ld-op, .ld-d, .ld-paso, .ld-mas, [data-ver] { transition: none !important; }
  .ld-cursor, .ld-dato { display: none; }
}

/* ── §2 · La misma historia, en el HERO (05/11/2026) ─────────────────────
   Juan la subió al hero. Allí la réplica es el panel en una ventana de
   1000 × 680 px (62,5 × 42,5 em): a ese ancho el panel real aún muestra el
   menú entero (lo esconde por debajo de 981 px, dash.css), y la letra gana
   un 20 % frente a la ventana de 1180. Debajo, los cuatro pasos como botones. */
.ld-hero { display: flex; flex-direction: column; gap: 14px; min-width: 0; border: 0; }
.ld-hero::before { display: none; }
.ld-hero .ld-escenario { display: block; padding: 0; background: none; container-type: inline-size; }
.ld-hero .ld-app { width: 62.5em; height: 45em; font-size: calc(100cqw / 62.5); }   /* 1000 × 720 */
.ld-hero .ld-mando { display: flex; align-items: center; gap: 10px; }
.ld-hero .ld-guia {
  display: flex; flex-direction: row; flex: 1; gap: 6px; min-width: 0;
  padding: 0; border: 0; justify-content: flex-start;
}
.ld-hero .ld-paso { flex: 1 1 0; min-width: 0; opacity: 1; position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; }
.ld-hero .ld-b {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; height: 44px; padding: 0 12px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--l-linea-2); background: rgba(255, 255, 255, .72);
  transition: border-color var(--l-t1) var(--l-ease), background-color var(--l-t1) var(--l-ease);
}
@media (hover: hover) { .ld-hero .ld-b:hover { border-color: rgba(var(--ink-rgb), .28); } }
.ld-hero .ld-paso.on .ld-b { border-color: rgba(var(--cy-rgb), .45); background: rgba(var(--cy-rgb), .07); }
.ld-hero .ld-n { padding: 0; font-size: .72rem; color: var(--muted-2); }
.ld-hero .ld-paso.on .ld-n { color: var(--cy); }
.ld-hero .ld-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 500; color: var(--muted); }
.ld-hero .ld-paso.on .ld-m { color: var(--w); }
/* El texto largo de cada paso es para el lector de pantalla; en pantalla se lee la leyenda. */
.ld-hero .ld-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ld-hero .ld-barra { left: 10px; right: 10px; bottom: 5px; }
.ld-hero .ld-leyenda {
  display: block; margin: 0; padding: 0; border: 0; min-height: 2.9em;
  font-size: .95rem; line-height: 1.5; color: var(--muted);
}
.ld-hero .ld-leyenda b { display: inline; margin-right: .35em; font-family: 'Inter', sans-serif; font-size: 1em; font-weight: 600; color: var(--w); }
@container (max-width: 640px) {
  .ld-hero .ld-app { width: 26em; height: 40em; font-size: calc(100cqw / 26); }
}
@media (max-width: 560px) {
  /* En el teléfono los botones son el número; el nombre del paso va en la leyenda. */
  .ld-hero .ld-m { display: none; }
  .ld-hero .ld-b { justify-content: center; padding: 0; }
}

/* ── §3 · El chat de Sabi, como /sabi/ (panel.css: .composer, .clip, .msg) ──
   1 em = 16 px del panel. */
.ld-pant[data-pant="0"] { display: flex; flex-direction: column; padding-bottom: 1em; }
.ld-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .75em; padding: 0 1.4em .9em; overflow: hidden; }
.ld-msg { display: flex; gap: .875em; align-items: flex-start; }
.ld-yo { flex-direction: row; justify-content: flex-end; }   /* como .msg--me */
.ld-burbuja {
  max-width: 70%; padding: .8em 1.06em; border-radius: 1em 1em .25em 1em;
  background: rgba(var(--ink-rgb), .04); border: 1px solid rgba(var(--ink-rgb), .17);
  font-size: .9em; line-height: 1.55;
}
.ld-clips { display: flex; flex-wrap: wrap; gap: .44em; }
.ld-burbuja .ld-clips { margin-bottom: .5em; }
.ld-clip {
  display: inline-flex; align-items: center; gap: .5em; max-width: 100%;
  padding: .375em .5em .375em .375em; border-radius: .625em;
  border: 1px solid rgba(var(--ink-rgb), .17); background: rgba(var(--ink-rgb), .03);
  font-size: .78em; color: rgba(var(--ink-rgb), .88);
}
.ld-clip b { flex: none; font-family: 'Space Grotesk', sans-serif; font-size: .76em; font-weight: 600; letter-spacing: .06em; padding: .3em .5em; border-radius: .4em; background: rgba(var(--cy-rgb), .12); color: var(--cy); }
.ld-ava { width: 2.125em; height: 2.125em; flex: none; border-radius: .69em; border: 1px solid rgba(var(--cy-rgb), .28); box-shadow: 0 0 1.25em -.375em rgba(var(--cy-rgb), .55); }
.ld-sabi-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5em; }
.ld-who { font-family: 'Space Grotesk', sans-serif; font-size: .78em; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--cy); }

/* El compositor */
.ld-compo { padding: 0 1.4em; }
.ld-caja {
  display: flex; flex-direction: column; gap: .62em;
  padding: .75em .75em .62em 1em; border-radius: 1.125em;
  border: 1px solid rgba(var(--ink-rgb), .17); background: #fff;
  transition: border-color var(--l-t2) var(--l-ease);
}
.ld-caja.foco { border-color: rgba(var(--cy-rgb), .45); }
.ld-ta { position: relative; min-height: 1.5em; font-size: .9em; line-height: 1.5; color: var(--w); }
.ld-ta-ph { color: rgba(var(--ink-rgb), .62); }
.ld-ta.lleno .ld-ta-ph { display: none; }
.ld-caret { display: inline-block; width: 1.5px; height: 1.1em; margin: 0 1px -.18em; background: var(--cy); opacity: 0; }
.ld-caja.foco .ld-caret { opacity: 1; animation: ldCaret 1s steps(1) infinite; }
@keyframes ldCaret { 50% { opacity: 0; } }
.ld-clips-caja { display: none; }
.ld-clips-caja.si { display: flex; }
.ld-clip .ld-sp { display: none; width: .8em; height: .8em; border-radius: 50%; border: 2px solid rgba(var(--ink-rgb), .17); border-top-color: var(--cy); animation: ldGira .7s linear infinite; }
.ld-clip .ld-x { font-style: normal; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: .375em; color: rgba(var(--ink-rgb), .62); font-size: 1.1em; line-height: 1; }
.ld-clips-caja.sube .ld-clip { border-style: dashed; color: rgba(var(--ink-rgb), .62); }
.ld-clips-caja.sube .ld-clip b { background: rgba(var(--ink-rgb), .06); color: rgba(var(--ink-rgb), .62); }
.ld-clips-caja.sube .ld-sp { display: block; }
.ld-clips-caja.sube .ld-x { display: none; }
@keyframes ldGira { to { transform: rotate(360deg); } }
.ld-botones { display: flex; align-items: center; gap: .5em; }
.ld-ico { display: grid; place-items: center; width: 2.125em; height: 2.125em; flex: none; border-radius: .625em; border: 1px solid rgba(var(--ink-rgb), .17); color: rgba(var(--ink-rgb), .75); transition: border-color var(--l-t1) var(--l-ease), color var(--l-t1) var(--l-ease), transform var(--l-t1) var(--l-ease); }
.ld-ico svg, .ld-send svg { width: 1em; height: 1em; }
.ld-ico-clip.pulsado { border-color: rgba(var(--cy-rgb), .4); color: var(--cy); transform: scale(.94); }
.ld-send { margin-left: auto; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .75em; color: #fff; background: linear-gradient(140deg, var(--cy-lit), var(--cy)); box-shadow: 0 .6em 1.5em -.9em rgba(var(--cy-rgb), .9); opacity: .45; transition: opacity var(--l-t1) var(--l-ease), transform var(--l-t1) var(--l-ease); }
.ld-send.listo { opacity: 1; }
.ld-send.pulsado { transform: scale(.92); }
.ld-nota { margin: .56em .25em 0; font-size: .69em; color: rgba(var(--ink-rgb), .62); }

@container (max-width: 640px) {
  .ld-chat, .ld-compo { padding-inline: 0; }
  .ld-burbuja { max-width: 86%; }
  .ld-nota { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-caret, .ld-clip .ld-sp { animation: none !important; }
}

.ld-sabi-c .ld-op { width: auto; max-width: 31em; }

/* Los mensajes del chat no ocupan sitio hasta que llegan (si no, los que aún
   no han aparecido empujan hacia arriba al que sí está y lo cortan), y
   entran como en el panel: «msgIn», 8 px y fundido en .45 s (panel.css). */
.ld.vivo .ld-chat [data-ver]:not(.si) { display: none; }
.ld-chat .ld-msg.si { animation: ldMsgIn .45s var(--l-ease) both; }
@keyframes ldMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-chat .ld-msg.si { animation: none; } }

/* ══ §4 · LAS SECCIONES TRAS EL HERO (05/11/2026) ══════════════════════════
   Mismo sistema que el hero: retícula a la vista, titulares Space Grotesk
   500, tarjetas blancas con sombra navy. Cada sección se anima UNA vez al
   entrar en pantalla: el JS le pone «.si». Lo oculto antes de eso sólo se
   oculta con JS (html.js) y sin movimiento reducido. */
/* overflow-x: clip y no hidden: no crea caja de scroll (el anillo que gira
   ensancha su caja al rotar y daba 31 px de scroll a 375). */
.lx { position: relative; border-top: 1px solid var(--l-linea); overflow-x: clip; }
.lx::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--l-raya);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--l-marco) / 2), transparent calc(50% - var(--l-marco) / 2), transparent calc(50% + var(--l-marco) / 2), #000 calc(50% + var(--l-marco) / 2));
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--l-marco) / 2), transparent calc(50% - var(--l-marco) / 2), transparent calc(50% + var(--l-marco) / 2), #000 calc(50% + var(--l-marco) / 2));
}
.lx-marco { position: relative; max-width: var(--l-marco); margin-inline: auto; border-inline: 1px solid var(--l-linea); padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 56px); }
.lx-kicker {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: clamp(18px, 2.6vw, 28px);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
}
.lx-kicker span { white-space: nowrap; }
.lx-kicker span:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 2px; background: var(--cy); vertical-align: 1px; }
.lx-h { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 500; font-size: var(--l-h2); line-height: .98; letter-spacing: -.045em; color: var(--w); }
.lx-h em { font-style: normal; color: var(--cy-lit); }
.lx-sub { margin-top: 22px; max-width: 32em; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--muted); }
.lx-nota-m { margin-top: 18px; max-width: 34em; font-size: .97rem; line-height: 1.55; color: var(--muted); }
.lx-nota-m b { color: var(--w); font-weight: 600; }
.lx-cab { margin-bottom: clamp(36px, 5vw, 64px); }

/* La entrada genérica: sube 16 px y aparece; el retraso lo da --d. */
.lx-kicker, .lx-h, .lx-sub, .lx-nota-m { transition: opacity .7s var(--l-ease) var(--d, 0s), transform .7s var(--l-ease) var(--d, 0s); }
.lx-h { --d: .08s; } .lx-sub, .lx-nota-m { --d: .16s; }
.js .lx[data-entra]:not(.si) :is(.lx-kicker, .lx-h, .lx-sub, .lx-nota-m) { opacity: 0; transform: translate3d(0, 16px, 0); }

/* ── 1 · Del desorden a un sistema ── */
.lx-uno-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lx-uno .lx-h { font-size: clamp(2.5rem, 4.6vw, 4.4rem); }
.lx-uno-txt .lx-h em { display: inline-block; transition: opacity .8s var(--l-ease) 2.4s, transform .8s var(--l-ease) 2.4s; }
.js .lx-uno:not(.si) .lx-uno-txt .lx-h em { opacity: 0; transform: translate3d(0, 10px, 0); }
.lx-uno-escena { position: relative; height: clamp(360px, 34vw, 460px); }
.lx-sitio {
  --x: 0px; --y: 0px; --r: 0deg;
  position: absolute; left: 50%; top: 50%; width: 190px; padding: 12px 14px 14px;
  border-radius: 14px; background: #fff; border: 1px solid var(--l-linea-2);
  box-shadow: 0 1px 2px rgba(var(--sh-rgb), .06), 0 18px 40px -22px rgba(var(--sh-rgb), .4);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform .9s var(--l-io) var(--d, 0s), opacity .4s var(--l-ease) calc(var(--d, 0s) + .6s);
}
.lx-s-hoja { --x: -150px; --y: -120px; --r: -5deg; --d: .8s; }
.lx-s-cuaderno { --x: 140px; --y: -128px; --r: 4deg; --d: .95s; }
.lx-s-recibos { --x: -190px; --y: 70px; --r: 3deg; --d: 1.1s; }
.lx-s-contable { --x: 160px; --y: 60px; --r: -3deg; --d: 1.25s; }
.lx-s-chat { --x: -10px; --y: 148px; --r: -2deg; --d: 1.4s; }
/* Al entrar: los cinco van al centro y se apagan; aparece el uno. */
.lx-uno.si .lx-sitio { --x: 0px; --y: 0px; --r: 0deg; opacity: 0; transform: translate(-50%, -50%) scale(.35); }
.lx-s-t { margin-bottom: 9px; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.lx-hoja { display: grid; grid-template-columns: 1.6fr 1fr 1fr .6fr; border: 1px solid #cfdcc9; font-size: .66rem; }
.lx-hoja i, .lx-hoja span { padding: 3px 5px; border-right: 1px solid #dfe8da; border-bottom: 1px solid #dfe8da; }
.lx-hoja i { font-style: normal; text-align: center; color: #5d7656; background: #eef4ea; }
.lx-hoja span { color: #2f3a2c; }
.lx-mano { font-family: 'Inter', sans-serif; font-style: italic; font-size: .78rem; line-height: 1.5; color: #2b3a67; border-bottom: 1px solid #dfe6f3; }
.lx-tachado { text-decoration: line-through; color: #8090ad; }
.lx-s-cuaderno { background: #fffdf6; }
.lx-recibo { display: block; height: 22px; margin-top: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #eceff4 0 6px, #f6f7f9 6px 12px); border: 1px solid #e3e7ee; }
.lx-recibo:nth-child(3) { width: 82%; } .lx-recibo:nth-child(4) { width: 64%; }
.lx-gris { height: 9px; margin-top: 7px; border-radius: 3px; background: #e7eaef; font-size: .66rem; line-height: 9px; color: transparent; }
.lx-gris:first-of-type { height: auto; padding: 5px 7px; color: #6b7280; background: #eef0f3; border: 1px solid #dde1e7; }
.lx-corto { width: 70%; }
.lx-bur { display: inline-block; margin-top: 6px; padding: 5px 9px; border-radius: 10px 10px 10px 3px; background: #eef2f7; font-size: .7rem; color: #344055; }
.lx-bur-yo { display: block; width: fit-content; margin-left: auto; border-radius: 10px 10px 3px 10px; background: rgba(var(--cy-rgb), .1); }
.lx-uno-panel {
  position: absolute; left: 50%; top: 50%; width: 300px; padding: 20px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 18px; background: #fff; border: 1px solid rgba(var(--cy-rgb), .3);
  box-shadow: 0 0 0 6px rgba(var(--cy-rgb), .06), 0 30px 60px -28px rgba(var(--sh-rgb), .5);
  transform: translate(-50%, -50%); transition: opacity .6s var(--l-ease) 1.9s, transform .8s var(--l-ease) 1.9s;
}
.js .lx-uno:not(.si) .lx-uno-panel { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
.lx-uno-panel img { height: 26px; width: auto; align-self: flex-start; margin: 0 8px 10px; }
.lx-uno-panel p { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; font-size: .95rem; font-weight: 500; color: var(--w); }
.lx-uno-panel p:nth-of-type(odd) { background: rgba(var(--cy-rgb), .05); }
.lx-uno-panel svg { width: 16px; height: 16px; color: var(--cy); fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Sin JS: los cinco sitios no estorban; se ve el uno. */
html:not(.js) .lx-sitio { display: none; }

/* ── 2 · Cuatro áreas (bento) ── */
.lx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.lx-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-width: 0;
  padding: clamp(20px, 2.4vw, 30px); border-radius: 20px; background: #fff; border: 1px solid var(--l-linea);
  box-shadow: var(--sh-1); overflow: hidden;
  transition: opacity .7s var(--l-ease) var(--d, 0s), transform .7s var(--l-ease) var(--d, 0s), box-shadow var(--l-t2) var(--l-ease);
}
.lx-t-conta { grid-column: span 7; --d: .05s; } .lx-t-ventas { grid-column: span 5; --d: .15s; }
.lx-t-inv { grid-column: span 5; --d: .25s; } .lx-t-crm { grid-column: span 7; --d: .35s; }
.js .lx-areas:not(.si) .lx-tile { opacity: 0; transform: translate3d(0, 18px, 0); }
@media (hover: hover) { .lx-tile:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(var(--sh-rgb), .06), 0 28px 60px -30px rgba(var(--sh-rgb), .38); } }
.lx-tile h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.02em; color: var(--w); }
.lx-tile-txt p { margin-top: 8px; max-width: 30em; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.lx-ui { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--l-linea); font-size: 13px; }
.lx-ui > * { transition: opacity .55s var(--l-ease), transform .55s var(--l-ease); }
.lx-ui > :nth-child(2) { transition-delay: .5s; } .lx-ui > :nth-child(3) { transition-delay: .62s; } .lx-ui > :nth-child(4) { transition-delay: .74s; } .lx-ui > :nth-child(5) { transition-delay: .86s; }
.js .lx-areas:not(.si) .lx-ui > * { opacity: 0; transform: translate3d(0, 8px, 0); }
.lx-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.lx-pills span { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--l-linea-2); font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; color: var(--muted); background: #fff; }
.lx-pills .on { border-color: rgba(var(--cy-rgb), .35); background: rgba(var(--cy-rgb), .09); color: var(--w); }
.lx-ui-t { margin-top: 4px; font-weight: 600; color: var(--w); }
.lx-ui-r { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--l-linea); color: var(--muted); }
.lx-ui-r b { font-variant-numeric: tabular-nums; color: var(--cy); font-weight: 600; }
.lx-doc, .lx-inv, .lx-cli, .lx-comprar { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; background: #fff; border: 1px solid var(--l-linea); }
.lx-doc b { font-size: 12.5px; color: var(--w); }
.lx-doc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.lx-doc em { font-style: normal; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--w); }
.lx-inv span { flex: 1; display: flex; flex-direction: column; font-weight: 600; color: var(--w); }
.lx-inv small { font-weight: 400; font-size: 11.5px; color: var(--muted-2); }
.lx-inv b { min-width: 44px; padding: 4px 0; text-align: center; border: 1px solid var(--l-linea-2); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.lx-inv em, .lx-cli em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.lx-bajo em { color: var(--warn); background: rgba(138, 90, 0, .09); }
.lx-comprar { justify-content: space-between; border-color: rgba(var(--cy-rgb), .3); background: rgba(var(--cy-rgb), .04); color: var(--muted); }
.lx-comprar b { color: var(--cy-deep); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.lx-av { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: #6d4bd8; color: #fff; font-style: normal; font-size: 11px; font-weight: 600; }
.lx-cli span { flex: 1; min-width: 0; font-weight: 600; color: var(--w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-et { color: var(--muted); border: 1px solid var(--l-linea-2); background: #fff; }
.lx-et::before { content: '●'; margin-right: 5px; font-size: .8em; color: #8a94a8; }
.lx-et-con::before { color: #2563eb; } .lx-et-neg::before { color: #7c3aed; }

/* ── 3 · Contabilidad ── */
.lx-conta-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.lx-pronto { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(138, 90, 0, .3); background: rgba(138, 90, 0, .06); font-size: .9rem; font-weight: 500; color: var(--warn); }
.lx-pronto i { width: 8px; height: 8px; border-radius: 50%; background: #c2851f; box-shadow: 0 0 0 4px rgba(194, 133, 31, .18); }
.lx-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--l-linea-2); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--sh-1); }
.lx-forms li { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 18px; border-right: 1px solid var(--l-linea); border-bottom: 1px solid var(--l-linea); transition: background-color .5s var(--l-ease) var(--d, 0s); }
.lx-forms li:nth-child(3n) { border-right: 0; }
.lx-forms li:not(.lx-forms-otro)::before { content: ''; position: absolute; top: 13px; right: 13px; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--ok-rgb), .12); transition: opacity .4s var(--l-ease) var(--d, 0s); }
.js .lx-conta:not(.si) .lx-forms li::before { opacity: 0; }
.lx-forms b { font-family: 'JetBrains Mono', monospace; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; color: var(--w); }
.lx-forms span { font-size: .86rem; line-height: 1.4; color: var(--muted); }
/* La marca de «lleno»: aparece casilla por casilla al entrar. */
.lx-forms li:not(.lx-forms-otro)::after {
  content: ''; position: absolute; top: 18px; right: 19px; width: 5px; height: 10px;
  border: solid var(--a-green); border-width: 0 2px 2px 0; rotate: 45deg;
  transition: opacity .4s var(--l-ease) var(--d, 0s), transform .4s var(--l-ease) var(--d, 0s);
}
.js .lx-conta:not(.si) .lx-forms li::after { opacity: 0; transform: scale(.5); }
.lx-forms li:nth-child(1) { --d: .3s; } .lx-forms li:nth-child(2) { --d: .42s; } .lx-forms li:nth-child(3) { --d: .54s; }
.lx-forms li:nth-child(4) { --d: .66s; } .lx-forms li:nth-child(5) { --d: .78s; } .lx-forms li:nth-child(6) { --d: .9s; }
.lx-forms li:nth-child(7) { --d: 1.02s; } .lx-forms li:nth-child(8) { --d: 1.14s; } .lx-forms li:nth-child(9) { --d: 1.26s; }
.lx-forms-otro { grid-column: 1 / -1; flex-direction: row !important; align-items: center; min-height: 0 !important; background: var(--bg); border-bottom: 0 !important; }
.lx-forms-otro b { color: var(--cy); }

/* ── 4 · Sabi ── */
.lx-sabi-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.lx-cifra { display: flex; align-items: baseline; gap: 18px; justify-self: end; max-width: 30em; }
.lx-cifra b { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(4.5rem, 9vw, 8.5rem); line-height: .85; letter-spacing: -.05em; color: var(--cy); font-variant-numeric: tabular-nums; }
.lx-cifra span { font-size: 1rem; line-height: 1.45; color: var(--muted); }
.lx-niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lx-nivel { padding: clamp(22px, 2.4vw, 30px); border-radius: 20px; background: #fff; border: 1px solid var(--l-linea); box-shadow: var(--sh-1); transition: opacity .7s var(--l-ease) var(--d, 0s), transform .7s var(--l-ease) var(--d, 0s); }
.lx-nivel:nth-child(1) { --d: .2s; } .lx-nivel:nth-child(2) { --d: .35s; } .lx-nivel:nth-child(3) { --d: .5s; }
.js .lx-sabi:not(.si) .lx-nivel { opacity: 0; transform: translate3d(0, 18px, 0); }
.lx-nivel-n b { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 2.6rem; letter-spacing: -.03em; color: var(--w); font-variant-numeric: tabular-nums; }
.lx-nivel h3 { margin-top: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1.2rem; letter-spacing: -.015em; color: var(--w); }
.lx-nivel p:last-child { margin-top: 6px; font-size: .93rem; color: var(--muted); }
.lx-nivel:nth-child(2) { border-color: rgba(168, 106, 5, .3); background: linear-gradient(140deg, rgba(168, 106, 5, .06), #fff 60%); }
.lx-nivel:nth-child(3) { border-color: rgba(var(--cy-rgb), .3); background: linear-gradient(140deg, rgba(var(--cy-rgb), .06), #fff 60%); }
.lx-wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 1rem; color: var(--muted); }
.lx-wa svg { width: 20px; height: 20px; color: #128c4b; }

/* ── 5 · Habla como tu negocio ── */
.lx-voc-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lx-voc-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px 14px; border-radius: 99px; background: var(--navy); color: #fff; font-size: .9rem; font-weight: 500; }
.lx-voc-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cy-glow); box-shadow: 0 0 0 4px rgba(78, 150, 246, .3); }
.lx-voc-app { display: grid; grid-template-columns: 200px 1fr; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--l-linea-2); box-shadow: var(--sh-2); min-height: 240px; }
.lx-voc-side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: #f4f8fd; border-right: 1px solid var(--l-linea); }
.lx-voc-side span { display: flex; align-items: center; gap: 0; padding: 9px 11px; border-radius: 11px; border: 1px solid transparent; font-size: .88rem; color: var(--muted); white-space: nowrap; }
.lx-voc-side svg { width: 17px; height: 17px; margin-right: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lx-voc-side .on { background: rgba(var(--cy-rgb), .09); border-color: rgba(var(--cy-rgb), .2); color: var(--w); font-weight: 600; }
.lx-voc-side .on svg { color: var(--cy); }
.lx-voc-main { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.lx-voc-h { margin-bottom: 6px; font-family: 'Inter', sans-serif; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--w); }
.lx-voc-h em { font-style: normal; color: var(--cy); }
.lx-voc-k { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--l-linea); background: var(--bg); color: var(--muted); }
.lx-voc-k b { font-family: 'Space Grotesk', sans-serif; color: var(--w); }
.lx-voc-k span b { font-family: inherit; font-weight: 400; color: inherit; }
/* El cambio de palabra: se va hacia arriba y llega desde abajo. */
[data-v] { display: inline-block; transition: opacity .32s var(--l-ease), transform .32s var(--l-ease), filter .32s var(--l-ease); }
[data-v].cambia { opacity: 0; transform: translate3d(0, -6px, 0); filter: blur(2px); }

/* ── 6 · Mis Apps ── */
.lx-apps-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lx-apps-l { margin-top: 26px; display: flex; flex-direction: column; border-top: 1px solid var(--l-linea); }
.lx-apps-l li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--l-linea); }
.lx-apps-l b { font-weight: 600; color: var(--w); }
.lx-apps-l span { color: var(--muted); text-align: right; }
.lx-orbita { position: relative; aspect-ratio: 1; max-width: 480px; width: 100%; justify-self: center; }
.lx-anillo { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px dashed rgba(var(--cy-rgb), .3); animation: lxGira 60s linear infinite; }
.lx-a1 { width: 64%; height: 64%; } .lx-a2 { width: 100%; height: 100%; border-style: solid; border-color: var(--l-linea); animation-direction: reverse; animation-duration: 90s; }
@keyframes lxGira { to { transform: rotate(360deg); } }
.lx-centro { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 26px; box-shadow: 0 0 0 10px rgba(var(--cy-rgb), .07), 0 24px 50px -20px rgba(var(--sh-rgb), .55); }
.lx-centro img { width: 100%; height: 100%; border-radius: 26px; }
.lx-sat {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 99px;
  background: #fff; border: 1px solid var(--l-linea-2); box-shadow: 0 10px 24px -14px rgba(var(--sh-rgb), .45);
  font-family: 'Space Grotesk', sans-serif; font-size: .92rem; font-weight: 500; color: var(--w); white-space: nowrap;
  transform: translate(-50%, -50%); animation: lxFlota 6s ease-in-out infinite;
  transition: opacity .6s var(--l-ease) var(--d, 0s);
}
.js .lx-apps:not(.si) .lx-sat { opacity: 0; }
.lx-sat svg { width: 15px; height: 15px; }
.lx-sat-ext { color: var(--muted); border-style: dashed; }
.lx-sat-ext svg { color: #128c4b; }
.lx-sat-1 { left: 50%; top: 18%; --d: .2s; } .lx-sat-2 { left: 82%; top: 36%; --d: .35s; animation-delay: -1s; }
.lx-sat-3 { left: 80%; top: 68%; --d: .5s; animation-delay: -2s; } .lx-sat-4 { left: 50%; top: 84%; --d: .65s; animation-delay: -3s; }
.lx-sat-5 { left: 19%; top: 66%; --d: .8s; animation-delay: -4s; } .lx-sat-6 { left: 15%; top: 34%; --d: .95s; animation-delay: -5s; }
.lx-sat-7 { left: 50%; top: 2%; --d: 1.1s; animation-delay: -2.5s; }
@keyframes lxFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ── 7 · Tus datos ── */
.lx-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lx-fichas li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--l-linea); box-shadow: var(--sh-1); transition: opacity .7s var(--l-ease) var(--d, 0s), transform .7s var(--l-ease) var(--d, 0s); }
.lx-fichas li:nth-child(1) { --d: .1s; } .lx-fichas li:nth-child(2) { --d: .2s; } .lx-fichas li:nth-child(3) { --d: .3s; } .lx-fichas li:nth-child(4) { --d: .4s; }
.js .lx-datos:not(.si) .lx-fichas li { opacity: 0; transform: translate3d(0, 16px, 0); }
.lx-fichas svg { width: 26px; height: 26px; margin-bottom: 12px; color: var(--cy); fill: none; stroke: currentColor; stroke-width: 1.6; }
.lx-fichas b { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1.15rem; color: var(--w); }
.lx-fichas span { font-size: .93rem; line-height: 1.5; color: var(--muted); }


/* ── 8b · Planes (05/11/2026): tres tarjetas de los planes que se compran;
   la prueba es la frase de arriba, no una tarjeta (Juan). El marcado lo
   escribe bin/precios.php desde sabnu_plans(). ── */
.lx-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lx-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.6vw, 34px);
  border-radius: 22px; background: #fff; border: 1px solid var(--l-linea); box-shadow: var(--sh-1);
  transition: opacity .7s var(--l-ease) var(--d, 0s), transform .7s var(--l-ease) var(--d, 0s), box-shadow var(--l-t2) var(--l-ease);
}
.lx-plan:nth-child(1) { --d: .1s; } .lx-plan:nth-child(2) { --d: .22s; } .lx-plan:nth-child(3) { --d: .34s; }
.js .lx-planes-sec:not(.si) .lx-plan { opacity: 0; transform: translate3d(0, 18px, 0); }
@media (hover: hover) { .lx-plan:hover { box-shadow: 0 2px 6px rgba(var(--sh-rgb), .06), 0 28px 60px -30px rgba(var(--sh-rgb), .38); } }
.lx-plan-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; color: var(--w); }
.lx-plan-t { margin-top: 8px; min-height: 3em; font-size: .97rem; line-height: 1.5; color: var(--muted); }
.lx-plan-p { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 22px; padding-top: 22px; border-top: 1px solid var(--l-linea); }
.lx-plan-p b { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(2.2rem, 3.2vw, 2.9rem); line-height: 1; letter-spacing: -.04em; color: var(--w); font-variant-numeric: tabular-nums; }
.lx-plan-p span { font-size: .88rem; color: var(--muted-2); }
.lx-plan .btn { justify-content: center; width: 100%; }
.lx-plan-l { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.lx-plan-l li { position: relative; padding-left: 26px; font-size: .93rem; line-height: 1.45; color: var(--w); }
.lx-plan-l li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--cy-rgb), .12); }
.lx-plan-l li::after { content: ''; position: absolute; left: 7px; top: calc(.38em + 3px); width: 3px; height: 6px; border: solid var(--cy); border-width: 0 1.6px 1.6px 0; rotate: 45deg; }
/* Los días de prueba (Juan, 05/11/2026: «más visual»): un sello con el número
   grande y siete marcas alrededor, una por día, que se encienden al entrar. */
.lx-planes-sec .lx-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
.lx-planes-sec .lx-kicker { grid-column: 1 / -1; }
.lx-gratis {
  display: inline-flex; align-items: center; gap: 24px; padding: 22px 30px 22px 22px; border-radius: 99px;
  background: #fff; border: 1px solid rgba(var(--cy-rgb), .22);
  box-shadow: 0 0 0 6px rgba(var(--cy-rgb), .05), 0 24px 50px -26px rgba(var(--sh-rgb), .45);
  transition: opacity .7s var(--l-ease) .3s, transform .7s var(--l-ease) .3s;
}
.js .lx-planes-sec:not(.si) .lx-gratis { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); }
.lx-gratis b {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2f7bff, var(--cy) 55%, #1b41a7);
  font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -8px rgba(9, 94, 245, .6);
}
/* Las siete marcas: un anillo cortado en 7 con una máscara cónica. */
.lx-gratis b::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  background: conic-gradient(var(--cy-glow) var(--a, 360deg), rgba(var(--cy-rgb), .14) 0);
  -webkit-mask: repeating-conic-gradient(#000 0 40deg, transparent 40deg 51.43deg), radial-gradient(circle, transparent 46px, #000 47px);
          mask: repeating-conic-gradient(#000 0 40deg, transparent 40deg 51.43deg), radial-gradient(circle, transparent 46px, #000 47px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: --a 1.4s var(--l-io) .6s;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.js .lx-planes-sec:not(.si) .lx-gratis b::before { --a: 0deg; }
.lx-gratis span { display: flex; flex-direction: column; gap: 4px; }
.lx-gratis strong { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--w); }
.lx-gratis small { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--muted); }
.lx-gratis small::before { content: ''; width: 4px; height: 8px; margin: 0 3px 2px 2px; border: solid var(--a-green); border-width: 0 2px 2px 0; rotate: 45deg; }

/* El del medio, resaltado por posición: navy de la marca. */
.lx-plan-medio { background: linear-gradient(160deg, #0a2a6b, var(--navy) 55%, #03163f); border-color: transparent; box-shadow: 0 30px 70px -30px rgba(var(--sh-rgb), .7); }
.lx-plan-medio .lx-plan-n { color: #fff; }
.lx-plan-medio .lx-plan-t, .lx-plan-medio .lx-plan-p span { color: rgba(255, 255, 255, .72); }
.lx-plan-medio .lx-plan-p { border-color: rgba(255, 255, 255, .14); }
.lx-plan-medio .lx-plan-p b, .lx-plan-medio .lx-plan-l li { color: #fff; }
.lx-plan-medio .lx-plan-l li::before { background: rgba(156, 195, 255, .18); }
.lx-plan-medio .lx-plan-l li::after { border-color: #9cc3ff; }

/* ── 9 · Preguntas ── */
.lx-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lx-faq-l { border-top: 1px solid var(--l-linea-2); }
.lx-faq-l details { border-bottom: 1px solid var(--l-linea-2); }
.lx-faq-l summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 2px; cursor: pointer; list-style: none; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; letter-spacing: -.01em; color: var(--w); }
.lx-faq-l summary::-webkit-details-marker { display: none; }
.lx-faq-l summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--l-linea-2); color: var(--cy); font-size: 1.2rem; transition: transform var(--l-t2) var(--l-ease); }
.lx-faq-l details[open] summary::after { transform: rotate(45deg); }
.lx-faq-l details p { padding: 0 2px 22px; max-width: 40em; font-size: 1rem; line-height: 1.6; color: var(--muted); }

/* ── 10 · Cierre ── */
.lx-cierre { overflow: hidden; }
.lx-cierre-in { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; padding-block: clamp(96px, 12vw, 168px); }
.lx-cierre-in::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 55%, rgba(var(--cy-rgb), .12), transparent 70%); pointer-events: none; }
.lx-cierre .lx-h { font-size: clamp(2.8rem, 6.4vw, 5.6rem); }

/* ── Ancho ── */
@media (max-width: 1000px) {
  .lx-uno-in, .lx-conta-in, .lx-voc-in, .lx-apps-in, .lx-faq-in, .lx-sabi-cab { grid-template-columns: 1fr; }
  .lx-cifra { justify-self: start; }
  .lx-bento > * { grid-column: 1 / -1 !important; }
  .lx-fichas { grid-template-columns: 1fr 1fr; }
  .lx-niveles { grid-template-columns: 1fr; }
  .lx-planes { grid-template-columns: 1fr; max-width: 560px; }
  .lx-planes-sec .lx-cab { grid-template-columns: 1fr; }
  .lx-gratis { justify-self: start; margin-top: 26px; }
  .lx-plan-t { min-height: 0; }
}
@media (max-width: 560px) {
  .lx-uno-escena { height: 340px; }
  .lx-sitio { width: 150px; padding: 10px; }
  .lx-s-hoja { --x: -80px; --y: -112px; } .lx-s-cuaderno { --x: 82px; --y: -104px; }
  .lx-s-recibos { --x: -88px; --y: 56px; } .lx-s-contable { --x: 86px; --y: 40px; } .lx-s-chat { --x: 0px; --y: 134px; }
  .lx-forms { grid-template-columns: 1fr 1fr; }
  .lx-forms li:nth-child(3n) { border-right: 1px solid var(--l-linea); }
  .lx-forms li:nth-child(2n) { border-right: 0; }
  .lx-fichas { grid-template-columns: 1fr; }
  .lx-voc-app { grid-template-columns: 1fr; }
  .lx-voc-side { flex-direction: row; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--l-linea); }
  .lx-voc-side span:not(.on) { display: none; }
  .lx-orbita { max-width: 340px; }
  .lx-sat { font-size: .8rem; padding: 7px 11px; }
  .lx-doc span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lx *, .lx *::before, .lx *::after { transition: none !important; animation: none !important; }
}