/* ============================================================================
   Crystelis — screen-composition layer
   Sits ON TOP of the frozen @crystelis/design-system (crystelis.css). Uses only
   its semantic tokens; adds screen-level layout + two gaps the system doesn't
   cover: marketing display type (the tool's type scale tops out at 1.75rem) and
   the ledger substrate signature. es-CO.

   The real app shell (topbar/sidebar/main) is `.cr-app`/`.cr-topbar`/`.cr-sidebar`
   from the design system, rendered by `appShell()` — NOT reproduced here. This
   file only adds: the public landing page, the ledger/content furniture used
   inside pages (dashboard, organización), and the onboarding screen.
   ============================================================================ */

/* --- content-width wrapper for the public landing (cr-main has no padding of
   its own — appShell's pages get it from .cr-page-body; the landing doesn't
   use appShell, so it needs its own centering) -------------------------------- */
.landing { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); }

/* --- ledger substrate — faint ruled accounting paper ------------------------ */
.led {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(var(--row-h) - 1px),
    var(--border-hairline) calc(var(--row-h) - 1px), var(--border-hairline) var(--row-h));
}

/* ============================================================================
   LANDING — editorial (the boldest surface)
   ============================================================================ */
.mk-nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.mk-nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; }
.mk-nav__brand .cr-icon-lg { color: var(--brand); width: 22px; height: 22px; }
.mk-nav__links { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.mk-nav__links a { color: var(--fg-secondary); text-decoration: none; font-size: var(--text-base); padding: 6px 10px; border-radius: var(--radius-control); }
.mk-nav__links a:hover { color: var(--fg-primary); }

.hero { position: relative; padding: var(--space-16) 0 var(--space-12); overflow: hidden; }
/* atmosphere: warm paper with a low emerald wash + gold ember, never a flat fill */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 620px; z-index: 0;
  background:
    radial-gradient(60% 70% at 78% 8%, color-mix(in oklab, var(--verified) 16%, transparent), transparent 70%),
    radial-gradient(70% 90% at 12% 0%, color-mix(in oklab, var(--brand) 13%, transparent), transparent 60%);
  pointer-events: none;
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand);
  padding: 5px 10px; border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--border)); border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 7%, var(--surface-0));
}
.mk-display {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem); line-height: 1.04; letter-spacing: -0.025em;
  font-weight: 600; text-wrap: balance; margin: var(--space-4) 0 var(--space-3); max-width: 15ch;
}
.mk-display em { font-style: normal; color: var(--brand); }
.hero__lead { font-size: var(--text-lg); line-height: 1.5; color: var(--fg-secondary); max-width: 46ch; }
.hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__cta .cr-btn { height: 44px; padding: 0 var(--space-6); font-size: var(--text-md); }
.hero__meta { margin-top: var(--space-6); display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--fg-muted); }
.hero__meta b { color: var(--fg-secondary); font-variant-numeric: tabular-nums; }

/* hero right: "Tu plan" recibo — the modular pricing thesis, static preview */
.plan-preview {
  position: relative; z-index: 1; background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--elevation-menu); padding: var(--space-6);
}
.plan-preview__title { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); margin-bottom: var(--space-3); }
.plan-preview__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-bottom: 1px dotted var(--border-hairline); font-family: var(--font-mono); font-size: var(--text-sm); }
.plan-preview__row:last-of-type { border-bottom: 0; }
.plan-preview__foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); color: var(--verified-fg); font-size: var(--text-sm); font-weight: 500; text-align: center; }

.ticker {
  margin-top: var(--space-8); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0; display: flex; gap: var(--space-6); flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--fg-muted); text-transform: uppercase;
}
.ticker span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ticker .cr-icon { color: var(--brand); }

.band { padding: var(--space-16) 0; }
.band--tint { background: var(--surface-1); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.band__head { max-width: 52ch; margin-bottom: var(--space-8); }
.band__head h2 { font-size: var(--text-2xl); letter-spacing: -0.02em; text-wrap: balance; }
.band__head p { color: var(--fg-secondary); font-size: var(--text-md); margin-top: var(--space-2); }
/* centered variant: the closing CTA band has no grid to anchor to */
.band__head--center { margin-inline: auto; text-align: center; max-width: 44ch; }
.band__head--center + .hero__cta { justify-content: center; }
.kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--verified-fg); }

.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.prop { padding: var(--space-6); background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-card); }
.prop__ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in oklab, var(--brand) 10%, var(--surface-1)); color: var(--brand); margin-bottom: var(--space-3); }
.prop__ic .cr-icon-lg { width: 20px; height: 20px; }
.prop h3 { font-size: var(--text-md); letter-spacing: -0.01em; }
.prop p { color: var(--fg-secondary); font-size: var(--text-base); line-height: 1.5; margin-top: 6px; }

/* módulos catalog — reuses .prop card styling; each card also carries a status chip */
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.modgrid .prop { display: flex; flex-direction: column; align-items: flex-start; }
.modgrid .prop > .cr-sello, .modgrid .prop > .cr-tag { margin-top: var(--space-3); }

/* cómo funciona — a genuine ordered sequence, so numbering is earned */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); counter-reset: step; }
.step { position: relative; padding: var(--space-4) 0 0; border-top: 2px solid var(--border-emphasis); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--brand); font-weight: 500;
  position: absolute; top: -0.85em; background: var(--surface-1); padding-right: 8px;
}
.step h4 { font-size: var(--text-md); margin-top: var(--space-2); letter-spacing: -0.01em; }
.step p { color: var(--fg-tertiary); font-size: var(--text-sm); line-height: 1.5; margin-top: 4px; }

.legend { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-6); }
.legend > span:first-child { font-size: var(--text-sm); color: var(--fg-muted); }

.mk-foot { padding: var(--space-12) 0; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--text-sm); }
.mk-foot__row { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.mk-foot__row nav { display: flex; gap: var(--space-4); margin-left: auto; flex-wrap: wrap; }
.mk-foot__row nav a { color: var(--fg-secondary); text-decoration: none; }

/* ============================================================================
   LEDGER CONTENT — dashboard totals strip, aside cards, tables
   ============================================================================ */
/* dashboard — ledger totals strip (NOT metric-card grid) */
.totals { display: flex; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-0); overflow: hidden; margin-bottom: var(--space-6); }
.totals__c { flex: 1; padding: var(--space-4) var(--space-4); border-right: 1px solid var(--border-hairline); }
.totals__c:last-child { border-right: 0; }
.totals__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; }
.totals__v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.totals__v small { font-size: var(--text-sm); color: var(--fg-tertiary); font-weight: 400; }
.totals__v .cr-icon { color: var(--verified); width: 15px; height: 15px; }

.dash { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); align-items: start; }
.led-no { font-family: var(--font-mono); font-weight: 500; }
.led-no span { color: var(--fg-muted); }
.aside-card { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-4); }
.aside-card h3 { font-size: var(--text-base); letter-spacing: -0.01em; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.aside-card h3 .cr-icon { color: var(--fg-tertiary); }
.idrow { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dotted var(--border-hairline); font-size: var(--text-sm); }
.idrow:last-child { border-bottom: 0; }
.idrow span { color: var(--fg-muted); }
.idrow b { font-weight: 500; }
.idrow .mono { font-family: var(--font-mono); }

/* ============================================================================
   ONBOARDING — "registra tu empresa" (minimal chrome, abrir el libro)
   ============================================================================ */
.ob { display: grid; grid-template-columns: 1fr 0.82fr; min-height: 640px; }
.ob__form { padding: var(--space-12) var(--space-12); }
.ob__aside { background: var(--surface-1); border-left: 1px solid var(--border); padding: var(--space-12) var(--space-8); position: relative; }
.ob__aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 90% 10%, color-mix(in oklab, var(--verified) 12%, transparent), transparent 70%); pointer-events: none; }
.ob__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: var(--space-8); }
.ob__brand .cr-icon-lg { color: var(--brand); }
.ob__steps { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); font-family: var(--font-mono); font-size: var(--text-xs); }
.ob__steps b { color: var(--brand); }
.ob__steps span { color: var(--fg-muted); }
.ob h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.ob__sub { color: var(--fg-secondary); margin: var(--space-2) 0 var(--space-8); max-width: 44ch; }
.ob__form .cr-field { margin-bottom: var(--space-4); }
.ob__two { display: grid; grid-template-columns: 1fr 96px; gap: var(--space-3); }
.ob__two--wide { grid-template-columns: 200px 1fr; }
.ob__cta { margin-top: var(--space-6); display: flex; gap: var(--space-3); align-items: center; }
.ob__cta .cr-btn--primary { height: 44px; padding: 0 var(--space-8); }
/* carátula preview — the book's cover page */
.caratula { position: relative; z-index: 1; background: var(--surface-0); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--elevation-menu); padding: var(--space-6); }
.caratula__lbl { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }
.caratula h3 { font-size: var(--text-xl); letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-1); }

/* --- first-org onboarding (onboardingPage(), Task 11) — a centered first-run
   welcome screen wrapping the plain card/postForm; distinct from the .ob
   mockup above (which is for a later, richer "registra tu empresa" flow) --- */
.onboard { max-width: 460px; margin: 0 auto; padding-top: var(--space-16); }
.onboard__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: var(--space-6); }
.onboard__brand .cr-icon-lg { color: var(--brand); }

/* ============================================================================
   ORGANIZACIÓN — sedes registry + equipo
   ============================================================================ */
.org-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.sede { position: relative; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); }
.sede--principal { border-color: color-mix(in oklab, var(--verified) 45%, var(--border)); }
.sede__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.sede__name { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.sede__name .cr-icon { color: var(--fg-tertiary); }
.sede__addr { color: var(--fg-tertiary); font-size: var(--text-sm); line-height: 1.5; }
.sede__code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); margin-top: var(--space-2); }
.who { display: flex; align-items: center; gap: var(--space-3); }
.who__av { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--brand) 12%, var(--surface-1)); color: var(--brand); font-weight: 600; font-size: var(--text-sm); }
.who__n { font-weight: 500; }
.who__m { color: var(--fg-muted); font-size: var(--text-sm); }
.tsub { font-size: var(--text-sm); color: var(--fg-tertiary); }

.section-h { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 var(--space-3); }
.section-h h2 { font-size: var(--text-lg); letter-spacing: -0.01em; }
.section-h .rule { flex: 1; height: 1px; background: var(--border-hairline); }

/* responsive: collapse to single column on narrow viewports */
@media (max-width: 860px) {
  .hero__grid, .dash, .ob, .props, .steps, .org-grid { grid-template-columns: 1fr; }
}

/* one tasteful page-load moment; silent for reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .hero__grid > * { animation: rise var(--dur-slow) var(--ease) both; }
  .hero__grid > *:nth-child(2) { animation-delay: 60ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}