/* ── LANDING PÚBLICA ─────────────────────────────────────
   Usa los tokens de torque/tokens.css (dark-first).
   Prefijo lp- para no pisar clases de la app.
   ──────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.landing-page {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── Fondo: glow de acento + grano sutil + piezas fantasma ──
   Glow de acento con deriva lenta y una capa de grano fino (SVG
   feTurbulence) que le da textura sin dibujar líneas. Capas fijas
   detrás del contenido; las cards con fondo propio las tapan
   localmente. Las piezas fantasma (engranaje, llave) van en
   .lp-bg-deco, más abajo. */
body.landing-page::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 36% at 50% 2%, rgba(139, 47, 201, 0.15), transparent 70%),
    radial-gradient(36% 30% at 88% 58%, rgba(59, 130, 246, 0.07), transparent 70%);
}
/* El grano NO va como capa propia con mix-blend-mode.
   Un blend sobre una capa fija a pantalla completa obliga al navegador a
   recomponer el viewport entero contra todo lo que tiene detrás en CADA frame
   del scroll, y no hay forma de que el compositor lo saltee: era el costo más
   caro de los tres que tenía el fondo. Ahora la textura se dibuja como
   background del propio body, sin capa ni blend. La única diferencia es que el
   grano acompaña el scroll en vez de quedarse quieto — en una textura tan
   sutil no se distingue. La opacidad va horneada en el rect del SVG, más baja
   que antes porque sin `overlay` el gris se ve directo. */
body.landing-page {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
[data-theme="light"] body.landing-page::before {
  background:
    radial-gradient(44% 36% at 50% 2%, rgba(124, 58, 237, 0.09), transparent 70%),
    radial-gradient(36% 30% at 88% 58%, rgba(59, 130, 246, 0.06), transparent 70%);
}
/* En claro el grano tiene que ser todavía más tenue: sobre fondo blanco el
   mismo gris se nota mucho más que sobre negro. */
[data-theme="light"] body.landing-page {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Piezas fantasma: engranaje y llave gigantes, casi invisibles, fijas
   en las esquinas. Se posiciona el wrapper (paralaje por JS via --py)
   por separado del ícono (que tiene su propia animación de giro/vaivén)
   para que ambas transformaciones no se pisen. */
.lp-bg-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.lp-bg-piece {
  position: absolute;
  display: block;
  transform: translateY(var(--py, 0px));
}
.lp-bg-piece i {
  display: block;
  color: var(--text);
  opacity: 0.05;
  line-height: 1;
}
.lp-bg-piece-gear {
  top: -12%;
  right: -8%;
}
.lp-bg-piece-gear i {
  font-size: clamp(380px, 42vw, 640px);
}
.lp-bg-piece-wrench {
  bottom: -10%;
  left: -10%;
}
.lp-bg-piece-wrench i {
  font-size: clamp(260px, 30vw, 460px);
  transform: rotate(-18deg);
}

/* ── Topbar ── */
/* Topbar y footer van siempre en negro (ambos temas): fijan sus
   propios tokens para que links, toggle y botones sigan legibles
   aunque el resto de la página esté en tema claro. */
.lp-topbar,
.lp-footer {
  --text: rgba(255, 255, 255, 0.92);
  --text-2: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.30);
  --border: rgba(255, 255, 255, 0.08);
  --border-mid: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.09);
}
.lp-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Sin backdrop-filter a propósito: un blur detrás de una barra FIJA obliga a
     re-desenfocar esa franja en cada frame del scroll, y es de lo más caro que
     se le puede pedir al compositor. Con el fondo casi opaco el blur no se
     llegaba a ver, así que se paga todo ese costo por nada: se sube 0.88 -> 0.95
     y queda igual. */
  background: rgba(8, 8, 10, 0.95);
  border-bottom: 1px solid var(--border);
}
.lp-topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.lp-brand img {
  height: 32px;
  width: auto;
  display: block;
}
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lp-nav-links a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.lp-nav-links a:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.lp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Toggle de tema (mismo patrón que el login) */
.lp-theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.lp-theme-toggle:hover { background: var(--bg-hover); color: var(--text); }
.lp-theme-toggle i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  pointer-events: none;
}

/* ── Botones ── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
}
.lp-btn:active { transform: scale(0.99); }
.lp-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.lp-btn-primary:hover {
  background: var(--accent-hi);
  box-shadow: 0 6px 22px var(--accent-glow);
}
.lp-btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.lp-btn-ghost:hover { background: var(--bg-hover); }
.lp-btn-sm { padding: 8px 16px; font-size: 13.5px; }
.lp-btn-lg { padding: 13px 26px; font-size: 15px; border-radius: var(--radius-lg); }
.lp-btn:disabled { opacity: 0.65; cursor: not-allowed; }

.lp-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lp-spin 0.6s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ── Layout general ── */
.lp-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.lp-section { padding: 72px 0 8px; }

/* ── Cabezas de sección: luz, color y una línea que se dibuja ── */
.lp-section-head {
  position: relative;
  max-width: 620px;
  margin-bottom: 40px;
  padding-bottom: 24px;
}
/* Glow ambiental detrás del título */
.lp-section-head::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -60px;
  width: min(420px, 80vw);
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent);
  filter: blur(14px);
  opacity: 0.65;
  pointer-events: none;
}
/* Línea de energía: se dibuja cuando la sección entra en pantalla */
.lp-section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi) 45%, transparent 95%);
  box-shadow: 0 0 14px var(--accent-glow);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
/* Solo se oculta si el sistema de reveals está activo (JS + motion OK) */
.lp-section-head.lp-reveal:not(.is-visible)::after { transform: scaleX(0); }

.lp-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hi) 35%, transparent);
  box-shadow: 0 0 18px var(--accent-glow);
  margin-bottom: 16px;
}
.lp-section-head h2 {
  position: relative;
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text);
}
/* Frase clave en degradado violeta */
.lp-section-head h2 em,
.lp-form-side h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-hi), #d8b4fe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="light"] .lp-section-head h2 em,
[data-theme="light"] .lp-form-side h2 em {
  background: linear-gradient(100deg, var(--accent-dim), var(--accent-hi));
  -webkit-background-clip: text;
  background-clip: text;
}
.lp-section-head p {
  position: relative;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── Hero: centrado, tipográfico, con cinta de actividad ── */
.lp-hero {
  position: relative;
  padding: 150px 0 0;
  overflow: hidden;
}
.lp-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 52px;
}
/* Eyebrow técnico con corchetes, estilo etiqueta de plano */
.lp-hero-eyebrow {
  margin: 0 0 20px;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.lp-hero-eyebrow::before { content: "[ "; color: var(--accent-hi); }
.lp-hero-eyebrow::after  { content: " ]"; color: var(--accent-hi); }
.lp-hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
  color: var(--text);
  max-width: 17ch;
}
.lp-hero-lead {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}
/* Subrayado tipo marcador sobre la palabra clave */
.lp-hero h1 em {
  font-style: normal;
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.lp-hero h1 em::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.04em;
  height: 0.26em;
  background: var(--accent);
  opacity: 0.45;
  border-radius: 3px;
  z-index: -1;
  transform: skewY(-0.6deg);
}
.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.lp-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-hi);
  text-decoration: none;
}
.lp-hero-link i { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-hero-link:hover i { transform: translateX(3px); }
.lp-hero-fineprint {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Escenario del mock: la ventana completa, de frente */
.lp-hero-stage {
  padding-bottom: 24px;
}
.lp-hero-stage .lp-mock {
  max-width: 980px;
  margin: 0 auto;
  font-size: 10.5px;
}
.lp-hero-stage .lp-mock-body { grid-template-columns: 150px 1fr; }

/* Nota aclaratoria debajo del mock */
.lp-mock-caption {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
}
.lp-mock-caption i { color: var(--accent-hi); margin-right: 5px; }
.lp-mock-caption-hint { color: var(--text-2); }

/* ── "Probalo con tu marca": rebrandea el mock en vivo ── */
.lp-brand-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto 18px;
}
.lp-brand-try-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.lp-brand-try-label i { color: var(--accent-hi); font-size: 12px; }
.lp-brand-try input {
  width: 200px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-brand-try input:focus {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.lp-brand-try input::placeholder { color: var(--text-muted); }
.lp-brand-try-colors { display: inline-flex; gap: 7px; }
.lp-brand-try-colors button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.lp-brand-try-colors button:hover { transform: scale(1.15); }
.lp-brand-try-colors button.on {
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent);
}

/* ── Mock de la app (hero) ── */
.lp-mock {
  /* Acento propio del mock: lo pisa el rebranding en vivo */
  --mk-accent: var(--accent);
  --mk-accent-hi: var(--accent-hi);
  --mk-accent-soft: var(--accent-soft);
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: 10px;
  user-select: none;
  pointer-events: none;
}
.lp-mock-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.lp-mock-titlebar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.lp-mock-url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9.5px;
}
.lp-mock-body {
  display: grid;
  grid-template-columns: 128px 1fr;
  min-height: 330px;
}
.lp-mock-side {
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lp-mock-side-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 10px;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.lp-mock-side-brand i {
  width: 16px; height: 16px;
  border-radius: 5px;
  background: var(--mk-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  flex-shrink: 0;
}
.lp-mock-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 500;
}
.lp-mock-item i { font-size: 8.5px; width: 10px; text-align: center; color: var(--text-muted); }
.lp-mock-item.on {
  background: var(--mk-accent-soft);
  color: var(--mk-accent-hi);
}
.lp-mock-item.on i { color: var(--mk-accent-hi); }
/* Sidebar interactiva: solo la sidebar recibe clicks; el resto del mock
   hereda pointer-events:none de .lp-mock y queda inerte. */
.lp-mock-side { pointer-events: auto; }
.lp-mock-item { cursor: pointer; transition: background 0.15s, color 0.15s; }
.lp-mock-item:not(.on):hover { background: var(--bg-hover); color: var(--text); }
.lp-mock-item:not(.on):hover i { color: var(--text-2); }
.lp-mock-main { padding: 14px; }

/* Escenas del mock: una venta viajando por el sistema */
.lp-mock-scene {
  display: none;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.lp-mock-scene.on { display: flex; animation: lp-scene-in 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes lp-scene-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lp-mock-htitle { font-size: 12px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.lp-mock-hsub { font-size: 9px; color: var(--text-muted); margin-top: 2px; }
.lp-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-mock-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
}
.lp-mock-kpi em {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.lp-mock-kpi strong {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.lp-mock-kpi small { display: block; font-size: 8px; margin-top: 3px; color: var(--success); }
.lp-mock-kpi small.rojo { color: var(--danger); }
.lp-mock-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  flex: 1;
}
.lp-mock-trow {
  display: grid;
  grid-template-columns: 2.4fr 1.2fr 1fr 0.9fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.lp-mock-trow:last-child { border-bottom: none; }
.lp-mock-trow.head b {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.lp-mock-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-hover);
}
.lp-mock-bar.w60 { width: 60%; }
.lp-mock-bar.w80 { width: 80%; }
.lp-mock-bar.w45 { width: 45%; }
.lp-mock-num { font-size: 9px; font-weight: 600; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.lp-mock-num.verde { color: var(--success); }
.lp-mock-num.rojo  { color: var(--danger); }
/* Celda de texto del mock (nombre de producto / cliente) */
.lp-mock-cell {
  font-size: 9px;
  color: var(--text-2);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-mock-cell.prod { font-weight: 600; color: var(--text); }
.lp-mock-cell.dim  { color: var(--text-muted); }

/* Filas simples y pie de tabla (escenas de CC y caja) */
.lp-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
  color: var(--text-2);
}
.lp-mock-row:last-child { border-bottom: none; }
.lp-mock-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid var(--border-mid);
  font-size: 9.5px;
  color: var(--text-2);
}
.lp-mock-foot strong { font-size: 10.5px; font-weight: 700; color: var(--text); }
.lp-mock-foot .lp-mock-pill { margin-left: auto; }
.lp-mock-pill {
  justify-self: start;
  font-size: 7.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.lp-mock-pill.ok { background: var(--success-soft); color: var(--success); }
.lp-mock-pill.warn { background: var(--warning-soft); color: var(--warning); }
.lp-mock-pill.cc { background: var(--blue-soft); color: var(--blue); }

/* ── Módulos: bento asimétrico con fragmentos de UI del sistema ── */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.lp-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  padding: 20px;
  --tile-color: var(--accent-hi);
  --tile-soft: var(--accent-soft);
}
.lp-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0.6;
  background: linear-gradient(90deg, transparent, var(--tile-color), transparent);
}
.lp-tile.t-blue    { --tile-color: var(--blue);    --tile-soft: var(--blue-soft); }
.lp-tile.t-green   { --tile-color: var(--success); --tile-soft: var(--success-soft); }
.lp-tile.t-warning { --tile-color: var(--warning); --tile-soft: var(--warning-soft); }
.lp-tile.span-2 { grid-column: span 2; }
.lp-tile.span-3 { grid-column: span 3; }
.lp-tile.span-6 { grid-column: span 6; }
.lp-tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lp-tile-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--tile-soft);
  color: var(--tile-color);
  font-size: 13px;
}
.lp-tile h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lp-tile > p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Fragmentos de UI (mismo lenguaje que el mock del hero) */
.lp-ui {
  margin-top: 14px;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  font-size: 11px;
  user-select: none;
  pointer-events: none;
}
.lp-ui-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.lp-ui-row:last-child { border-bottom: none; }
.lp-ui-row.head {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.lp-ui-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-hover);
  flex: 1;
}
.lp-ui-bar.w60 { flex: 0 0 60%; }
.lp-ui-bar.w45 { flex: 0 0 45%; }
/* Celda de texto de las mini-UIs (nombre de producto) */
.lp-ui-cell {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text);
}
.lp-ui-label { color: var(--text-2); }
.lp-ui-num {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lp-ui-num.verde { color: var(--success); }
.lp-ui-num.rojo  { color: var(--danger); }
.lp-ui-num.fuerte { color: var(--text); font-weight: 700; }
.lp-ui-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.lp-ui-pill.ok   { background: var(--success-soft); color: var(--success); }
.lp-ui-pill.warn { background: var(--warning-soft); color: var(--warning); }
.lp-ui-pill.cc   { background: var(--blue-soft);    color: var(--blue); }
.lp-ui-total {
  border-top: 1px solid var(--border-mid);
  margin-top: 2px;
}
.lp-ui-sub {
  display: block;
  padding: 6px 0 8px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Nube de chips para el resto de los módulos */
.lp-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  background: var(--bg-overlay);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.lp-chip i { color: var(--accent-hi); font-size: 11px; }

/* ── Planilla vs. Torque ── */
.lp-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lp-vs-col {
  border-radius: var(--radius-xl);
  padding: 26px;
}
.lp-vs-col h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp-vs-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-vs-col ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.lp-vs-col ul li i { margin-top: 3px; font-size: 11px; width: 12px; text-align: center; }
/* Antes: apagado, borde punteado, como planilla precaria */
.vs-antes {
  border: 1px dashed var(--border-strong);
  background: transparent;
}
.vs-antes h3 { color: var(--text-muted); }
.vs-antes h3 i { color: var(--text-muted); }
.vs-antes ul li { color: var(--text-muted); }
.vs-antes ul li i { color: var(--danger); opacity: 0.7; }
/* Después: la card sólida con el acento del sistema */
.vs-despues {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.vs-despues::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.75;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
}
.vs-despues h3 { color: var(--accent-hi); }
.vs-despues ul li { color: var(--text-2); }
.vs-despues ul li i { color: var(--success); }

/* ── Diferenciales: lista editorial, sin cajas ── */
.lp-difs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}
.lp-dif {
  padding-top: 16px;
  border-top: 1px solid var(--border-mid);
}
.lp-dif-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lp-dif-head i {
  color: var(--accent-hi);
  font-size: 15px;
  width: 18px;
  text-align: center;
}
.lp-dif h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.lp-dif p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ── Toggle Mensual / Anual sobre los planes ── */
.lp-billing-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.lp-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
}
.lp-billing-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.lp-billing-opt:hover { color: var(--text); }
.lp-billing-opt.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.lp-billing-opt.on:hover { color: #fff; }
.lp-billing-save {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  white-space: nowrap;
}
.lp-billing-opt.on .lp-billing-save {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Línea de ahorro por plan (visible solo en anual; reserva alto para no saltar) */
.lp-plan-ahorro {
  min-height: 17px;
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
}

/* ── Add-on con switch: "sumar facturación electrónica" (plan Inicial) ── */
.lp-plan-addon-row {
  padding: 10px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  transition: border-color 0.18s, background 0.18s;
}
.lp-plan-addon-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-soft);
}
.lp-addon-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.lp-addon-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lp-addon-switch {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--bg-hover);
  border: 1px solid var(--border-strong);
  transition: background 0.18s, border-color 0.18s;
}
.lp-addon-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform 0.18s, background 0.18s;
}
.lp-addon-toggle input:checked + .lp-addon-switch {
  background: var(--accent);
  border-color: var(--accent);
}
.lp-addon-toggle input:checked + .lp-addon-switch::after {
  transform: translateX(14px);
  background: #fff;
}
.lp-addon-toggle input:focus-visible + .lp-addon-switch {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.lp-addon-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.lp-addon-text b { color: var(--text); font-weight: 700; }
.lp-addon-text small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Planes: un solo panel comparativo con tres columnas ──
   Colores como los badges del panel de SuperAdmin: Inicial azul,
   Pyme violeta (destacada), Full verde. */
.lp-planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  --plan-color: var(--accent-hi);
  --plan-soft: var(--accent-soft);
}
.lp-plan + .lp-plan { border-left: 1px solid var(--border-mid); }
.lp-plan.p-inicial { --plan-color: var(--blue);      --plan-soft: var(--blue-soft); }
.lp-plan.p-pyme    { --plan-color: var(--accent-hi); --plan-soft: var(--accent-soft); }
.lp-plan.p-full    { --plan-color: var(--success);   --plan-soft: var(--success-soft); }
.lp-plan::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.75;
  background: linear-gradient(90deg, transparent, var(--plan-color), transparent);
}
.lp-plan.destacado {
  background: linear-gradient(180deg, var(--accent-soft), transparent 55%);
}
.lp-plan-tag {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
  margin-bottom: 12px;
}
/* Mantiene alineadas las tres columnas: las no destacadas compensan la etiqueta */
.lp-plan:not(.destacado) { padding-top: 63px; }
.lp-plan h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plan-color);
}
.lp-plan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--plan-color);
  box-shadow: 0 0 8px var(--plan-color);
}
.lp-plan-desc { margin: 0 0 18px; font-size: 13px; color: var(--text-2); }
.lp-plan-precio {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.lp-plan-precio strong {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
}
.lp-plan-precio span { font-size: 13px; color: var(--text-muted); }
.lp-plan-nota {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--plan-soft);
  border-radius: 20px;
  padding: 4px 10px;
  margin: 6px 0 18px;
}
.lp-plan-nota i { font-size: 10px; color: var(--plan-color); }
.lp-plan ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.lp-plan ul li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.lp-plan ul li i {
  margin-top: 3px;
  font-size: 11px;
  color: var(--success);
}
.lp-plan ul li.no { color: var(--text-muted); }
.lp-plan ul li.no i { color: var(--text-faint); }
.lp-plan ul li i.fa-circle-plus { color: var(--accent-hi); }
.lp-planes-aclaracion {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Pasos: timeline horizontal, sin cajas ── */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  counter-reset: paso;
}
.lp-step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--border-mid);
  counter-increment: paso;
}
/* Punto brillante sobre la línea del timeline */
.lp-step::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 10px var(--accent-glow), 0 0 0 3px var(--accent-soft);
}
.lp-step::before {
  content: "Paso 0" counter(paso);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: 10px;
}
.lp-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.lp-step p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ── Formulario de solicitud ── */
.lp-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: start;
}
.lp-form-card {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.lp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-field.full { grid-column: 1 / -1; }
.lp-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.lp-field input,
.lp-field select,
.lp-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-field textarea { resize: vertical; min-height: 84px; }
.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.lp-field input::placeholder,
.lp-field textarea::placeholder { color: var(--text-muted); }

/* Honeypot: fuera de la vista, pero no display:none (algunos bots lo detectan) */
.lp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lp-form-msg {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
}
.lp-form-msg.error { display: flex; background: var(--danger-soft); color: var(--danger); }
.lp-form-msg.ok { display: flex; background: var(--success-soft); color: var(--success); }
.lp-form-msg i { margin-top: 2px; }

/* Turnstile corre en modo invisible (appearance: interaction-only):
   no reserva altura; solo crece si Cloudflare necesita mostrar un desafío. */
.lp-turnstile { display: none; justify-content: flex-start; }

/* Cláusula informativa de protección de datos, debajo del botón de envío. */
.lp-form-legal {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

.lp-form-legal a {
  color: var(--text-2);
  text-decoration: underline;
}

.lp-form-legal a:hover { color: var(--accent-hi); }

.lp-form-side h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.lp-form-side > p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.lp-form-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-form-side ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.lp-form-side ul li i { color: var(--accent-hi); font-size: 13px; margin-top: 3px; }

/* ── Footer (mismo esquema que la web de AMFIX Solutions:
   tres columnas con divisores — marca+Instagram / links / ubicación) ── */
.lp-footer {
  margin-top: 80px;
  background: #08080a;
  border-top: 1px solid var(--border);
  padding: 56px 0 64px;
  color: var(--text-2);
}
.lp-footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr;
  gap: 0;
}
.lp-footer-col + .lp-footer-col {
  border-left: 1px solid var(--border-mid);
  padding-left: 56px;
}
.lp-footer-col:first-child { padding-right: 56px; }
.lp-footer-col:nth-child(2) { padding-right: 56px; }

.lp-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.lp-footer-brand img { height: 32px; width: auto; margin-left: -19px; }
.lp-footer-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.lp-footer-social i { font-size: 17px; }
.lp-footer-social:hover { color: var(--text); }

.lp-footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.lp-footer-links a {
  font-size: 14.5px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}
.lp-footer-links a:hover { color: var(--text); }

.lp-footer-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.lp-footer-info p { margin: 0; }
.lp-footer-info p.lp-footer-loc {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.lp-footer-dir { font-size: 14px; color: var(--text-2); }
.lp-footer-copy { font-size: 13.5px; color: var(--text-2); }

/* ── Fab de WhatsApp (mismo estilo que el de la app) ── */
.wsp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.wsp-fab svg { display: block; }
.wsp-fab:hover {
  transform: scale(1.08);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* ── Animaciones ─────────────────────────────────────────
   Entrada del hero por CSS (siempre above the fold), reveals
   por scroll vía .lp-reveal + IntersectionObserver (landing.js).
   Todo se apaga con prefers-reduced-motion. */

@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-shimmer {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}
@keyframes lp-step-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--accent-glow), 0 0 0 3px var(--accent-soft); }
  50%      { box-shadow: 0 0 16px var(--accent-glow), 0 0 0 6px var(--accent-soft); }
}
@keyframes lp-fab-ping {
  0%   { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.4); }
  60%  { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes lp-gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes lp-wrench-sway {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(-14deg); }
}

/* Entrada del hero */
.lp-hero-eyebrow,
.lp-hero h1,
.lp-hero-lead,
.lp-hero-actions,
.lp-hero-fineprint,
.lp-brand-try {
  opacity: 0;
  animation: lp-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.lp-hero-eyebrow   { animation-delay: 0.05s; }
.lp-hero h1        { animation-delay: 0.12s; }
.lp-hero-lead      { animation-delay: 0.2s; }
.lp-hero-actions   { animation-delay: 0.28s; }
.lp-hero-fineprint { animation-delay: 0.36s; }
.lp-brand-try      { animation-delay: 0.3s; }

/* El mock "arranca" como la app: ventana, sidebar, KPIs y filas en cascada */
@keyframes lp-mock-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-hero-stage .lp-mock {
  opacity: 0;
  animation: lp-mock-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
.lp-mock-side {
  opacity: 0;
  animation: lp-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* Deriva lenta de los glows del fondo de página */
/* Solo desplazamiento, sin scale: mover una capa ya rasterizada es trabajo puro
   de compositor, pero escalarla la obliga a re-rasterizar, y esta capa mide un
   viewport entero. En loop infinito eso le compite al scroll cada frame. El
   recorrido se agranda un poco para que el movimiento siga leyéndose igual sin
   el "respiro" del scale. */
@keyframes lp-aurora {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-2.5%, 1.5%, 0); }
}
body.landing-page::before {
  animation: lp-aurora 22s ease-in-out infinite;
  /* Promueve la capa una sola vez, así el desplazamiento no la vuelve a
     rasterizar en cada frame. */
  will-change: transform;
}

/* Piezas fantasma: giro lento del engranaje, vaivén sutil de la llave */
.lp-bg-piece-gear i   { animation: lp-gear-spin 90s linear infinite; }
.lp-bg-piece-wrench i { animation: lp-wrench-sway 10s ease-in-out infinite; }

/* Shimmer de "cargando" en los skeletons (mock y mini-UIs) */
.lp-mock-bar,
.lp-ui-bar {
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: lp-shimmer 2.8s linear infinite;
}
[data-theme="light"] .lp-mock-bar,
[data-theme="light"] .lp-ui-bar {
  background-image: linear-gradient(100deg, transparent 35%, rgba(0, 0, 0, 0.05) 50%, transparent 65%);
}

/* Reveals por scroll */
.lp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.lp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Micro-interacciones */
.lp-btn-primary i { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-btn-primary:hover i { transform: translateX(3px); }
.lp-chip { transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s; }
.lp-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  transform: translateY(-2px);
}
.lp-tile { transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.lp-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Topbar: sombra al despegarse del tope */
.lp-topbar { transition: box-shadow 0.25s; }
.lp-topbar.scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }

/* Puntos del timeline con pulso alternado */
.lp-step::after { animation: lp-step-pulse 3.2s ease-in-out infinite; }
.lp-step:nth-child(2)::after { animation-delay: 0.5s; }
.lp-step:nth-child(3)::after { animation-delay: 1s; }

/* Fab: entrada + anillo de atención cada tanto */
.wsp-fab { animation: lp-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, lp-fab-ping 5s 1.5s ease-out infinite; }

/* Accesibilidad: sin movimiento para quien lo pide */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-hero-eyebrow, .lp-hero h1, .lp-hero-lead, .lp-hero-actions,
  .lp-hero-fineprint, .lp-brand-try,
  .lp-mock, .lp-mock-side, .lp-mock-kpi, .lp-mock-trow,
  .lp-reveal, .wsp-fab {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  .lp-mock-bar, .lp-ui-bar, .lp-step::after,
  .lp-mock-scene.on, body.landing-page::before { animation: none; }
  /* Sin animación no hay nada que promover: se libera la capa. */
  body.landing-page::before { will-change: auto; }
  .lp-bg-piece-gear i, .lp-bg-piece-wrench i { animation: none; }
  .lp-bg-piece { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 920px) {
  .lp-hero-head { margin-bottom: 40px; }
  .lp-form-wrap { grid-template-columns: 1fr; gap: 28px; }
  .lp-nav-links { display: none; }
  .lp-tile.span-3 { grid-column: span 6; }
  .lp-tile.span-2 { grid-column: span 3; }
  .lp-vs { grid-template-columns: 1fr; }
  .lp-planes { grid-template-columns: 1fr; }
  .lp-plan + .lp-plan { border-left: none; border-top: 1px solid var(--border-mid); }
  .lp-plan:not(.destacado) { padding-top: 30px; }
  .lp-steps { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .lp-form-grid { grid-template-columns: 1fr; }
  .lp-section { padding: 56px 0 8px; }
  .lp-hero { padding-top: 108px; }
  /* Se sube la especificidad para ganarle al override de escritorio
     `.lp-hero-stage .lp-mock-body` (150px 1fr). Sin esto, al ocultar la
     sidebar quedaba una columna fantasma de 150px y el contenido del mock
     se corría a la derecha (se veía "roto" en mobile). */
  .lp-mock-body,
  .lp-hero-stage .lp-mock-body { grid-template-columns: 1fr; }
  .lp-mock-side { display: none; }
  .lp-mock-caption-hint { display: none; }
  .lp-tile.span-2 { grid-column: span 6; }
  .lp-difs { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 780px) {
  .lp-footer { padding: 40px 0 48px; }
  .lp-footer-grid { grid-template-columns: 1fr; }
  .lp-footer-col + .lp-footer-col {
    border-left: none;
    border-top: 1px solid var(--border-mid);
    padding-left: 0;
    padding-top: 28px;
    margin-top: 28px;
  }
  .lp-footer-col:first-child,
  .lp-footer-col:nth-child(2) { padding-right: 0; }
  .lp-footer-brand { gap: 24px; }
  .lp-footer-info { gap: 24px; }
}