/* Suite Simple — CSS base de landings. Plano, sin build.
   Cada producto fija su acento DESPUÉS de este archivo (tripleta RGB):
   :root { --ui-accent: 47 111 223; --ui-accent-hover: 36 88 184; --ui-accent-text: 36 88 184; --ui-accent-soft: 232 240 253; }
   [data-theme="dark"] { --ui-accent-hover: ...; --ui-accent-text: ...; --ui-accent-soft: ...; }
   Colores = tripleta RGB: rgb(var(--ui-x) / .5). Tema: atributo data-theme="light|dark" en <html>. */
:root {
  color-scheme: light;
  --ui-canvas: 245 245 247; --ui-surface: 255 255 255; --ui-surface-sunken: 241 241 244;
  --ui-line: 226 226 231; --ui-fg: 29 29 31; --ui-fg-muted: 86 88 96; --ui-fg-inverse: 255 255 255;
  --ui-accent: 10 91 211; --ui-accent-hover: 8 71 166; --ui-accent-text: 10 91 211;
  --ui-accent-fg: 255 255 255; --ui-accent-soft: 236 243 255;
  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / .04), 0 2px 8px -2px rgb(0 0 0 / .05);
  --ui-shadow-lg: 0 2px 6px rgb(0 0 0 / .04), 0 24px 56px -12px rgb(0 0 0 / .16);
  --ui-glass: rgb(255 255 255 / .72); --ui-glass-line: rgb(0 0 0 / .07);
  --ui-radius-control: .625rem; --ui-radius-card: 1.125rem; --ui-radius-sheet: 1.375rem;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: 10 10 12; --ui-surface: 28 28 30; --ui-surface-sunken: 44 44 46;
  --ui-line: 52 52 56; --ui-fg: 245 245 247; --ui-fg-muted: 174 177 186; --ui-fg-inverse: 29 29 31;
  --ui-accent-hover: 60 138 240; --ui-accent-text: 127 180 255; --ui-accent-soft: 22 38 68;
  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px -2px rgb(0 0 0 / .3);
  --ui-shadow-lg: 0 2px 6px rgb(0 0 0 / .3), 0 24px 56px -12px rgb(0 0 0 / .6);
  --ui-glass: rgb(30 30 32 / .7); --ui-glass-line: rgb(255 255 255 / .08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--ui-font); background: rgb(var(--ui-canvas)); color: rgb(var(--ui-fg)); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.ld-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.ld-section { padding: 4.5rem 0; }
.ld-section--alt { background: rgb(var(--ui-surface)); border-block: 1px solid rgb(var(--ui-line)); }
.ld-eyebrow { color: rgb(var(--ui-accent-text)); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5rem; }
.ld-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .75rem; }
.ld-lead { color: rgb(var(--ui-fg-muted)); max-width: 40rem; margin: 0 0 2rem; font-size: 1.1rem; }

/* Barra superior */
.ld-nav { position: sticky; top: 0; z-index: 10; background: var(--ui-glass); border-bottom: 1px solid var(--ui-glass-line); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.ld-nav .ld-wrap { display: flex; align-items: center; gap: .6rem; height: 3.5rem; }
.ld-brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; letter-spacing: -.02em; margin-right: auto; }
.ld-brand b { color: rgb(var(--ui-accent-text)); }
.ld-links { display: flex; gap: 1.25rem; margin-right: .75rem; }
.ld-links a { text-decoration: none; color: rgb(var(--ui-fg-muted)); font-size: .93rem; }
.ld-links a:hover { color: rgb(var(--ui-fg)); }
.ld-tool { font: inherit; font-size: .85rem; font-weight: 600; color: rgb(var(--ui-fg)); background: transparent; border: 1px solid rgb(var(--ui-line)); border-radius: var(--ui-radius-control); padding: .35rem .7rem; cursor: pointer; }
.ld-tool:hover { background: rgb(var(--ui-surface-sunken)); }

/* Botones */
.ld-btn { display: inline-block; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--ui-radius-control); padding: .75rem 1.4rem; background: rgb(var(--ui-accent)); color: rgb(var(--ui-accent-fg)); }
.ld-btn:hover { background: rgb(var(--ui-accent-hover)); }
.ld-btn--ghost { background: transparent; color: rgb(var(--ui-fg)); border-color: rgb(var(--ui-line)); }
.ld-btn--ghost:hover { background: rgb(var(--ui-surface-sunken)); }

/* Hero */
.ld-hero { padding: 5rem 0 4rem; background: radial-gradient(60rem 24rem at 50% -10%, rgb(var(--ui-accent) / .14), transparent); }
.ld-hero .ld-wrap { text-align: center; }
.ld-hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 auto 1rem; max-width: 46rem; }
.ld-hero p { color: rgb(var(--ui-fg-muted)); font-size: 1.2rem; max-width: 38rem; margin: 0 auto 2rem; }
.ld-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* Grilla de beneficios */
.ld-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.ld-card { background: rgb(var(--ui-surface)); border: 1px solid rgb(var(--ui-line)); border-radius: var(--ui-radius-card); padding: 1.5rem; box-shadow: var(--ui-shadow-sm); }
.ld-card h3 { margin: .75rem 0 .35rem; font-size: 1.08rem; letter-spacing: -.01em; }
.ld-card p { margin: 0; color: rgb(var(--ui-fg-muted)); font-size: .95rem; }
.ld-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ui-radius-control); background: rgb(var(--ui-accent-soft)); color: rgb(var(--ui-accent-text)); font-size: 1.2rem; }

/* Cómo funciona */
.ld-steps { counter-reset: paso; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); list-style: none; padding: 0; margin: 0; }
.ld-steps li { counter-increment: paso; position: relative; padding-top: 3rem; }
.ld-steps li::before { content: counter(paso); position: absolute; top: 0; left: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--ui-accent)); color: rgb(var(--ui-accent-fg)); font-weight: 700; }
.ld-steps h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.ld-steps p { margin: 0; color: rgb(var(--ui-fg-muted)); font-size: .95rem; }

/* CTA */
.ld-cta .ld-wrap { text-align: center; background: rgb(var(--ui-accent)); color: rgb(var(--ui-accent-fg)); border-radius: var(--ui-radius-sheet); padding: 3.5rem 1.5rem; box-shadow: var(--ui-shadow-lg); width: calc(100% - 2.5rem); }
.ld-cta h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
.ld-cta p { margin: 0 0 1.5rem; opacity: .9; }
.ld-cta .ld-btn { background: #fff; color: rgb(var(--ui-accent)); }

/* Pie */
.ld-footer { padding: 2rem 0 3rem; color: rgb(var(--ui-fg-muted)); font-size: .88rem; }
.ld-footer .ld-wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; border-top: 1px solid rgb(var(--ui-line)); padding-top: 1.5rem; }

@media (max-width: 40rem) {
  .ld-links { display: none; }
  .ld-section { padding: 3rem 0; }
  .ld-hero { padding: 3rem 0 2.5rem; }
}