/* Tier 0 — design tokens (docs/PATTERNS.md §2 rule 2: tokens as code, CSS custom
   properties only, no new hues, WCAG AA pairs). The token block is the dashboard's
   single source of truth, reused VERBATIM (no new hues, no raw colors outside
   :root). The public site is dark-on-dark like the console: one brand.

   The component layer below replicates the binding mock `docs/design/mock/home.html`
   (REVISED storytelling value one-pager, design-spec §2.1): hero → problema →
   giro/solución (3 resultados) → resultado (the honest line + promise band) →
   access CTA → minimal footer. The manifest grid and the measured-figures table
   are DELIBERATELY cut from the landing (design-spec §14). */
:root {
  --bg-base: #0f1419;
  --bg-surface: #161d24;
  --bg-raised: #1e2832;
  --border-grid: #25303b;
  --border-strong: #35414f;
  --text-primary: #eef3f7;
  --text-muted: #a8b4c0;
  --text-faint: #85919e;
  --accent: #e8a93c;
  --accent-strong: #ffc866;
  --accent-ink: #221600;
  --danger: #ff6b81;
  --safe: #3ecf8e;

  /* Deltas adopted from docs/design/design-spec.md §4.2 — identical to the
     dashboard token block; no new hues, every shade derived with color-mix(). */
  --accent-8: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-35: color-mix(in srgb, var(--accent) 35%, transparent);
  --warning: color-mix(in srgb, var(--danger) 35%, var(--accent));
  --warning-ink: var(--accent-ink);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;
  --r-full: 9999px;

  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem;
  --fs-hero: clamp(2rem, 6vw, 3.25rem);

  --lh-tight: 1.2; --lh-base: 1.6;

  --dur-fast: 150ms; --dur-base: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-strong); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: var(--lh-tight); }
p { margin: 0 0 var(--sp-3); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.measure { max-width: 46rem; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  font-weight: 700;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---------- isotype: la torre que avisa (SVG de línea, 24px grid, trazo 1.5) ----------
   Torres de línea: base, cuerpo trapezoidal, plataforma, garita con tejado y un
   punto de faro ámbar — el vigía que avisa. */
.isotype { display: inline-block; color: var(--text-primary); flex: none; }
.isotype .beacon { fill: var(--accent); }
.isotype--small { width: 22px; height: 22px; }
.isotype--hero { width: 40px; height: 40px; color: var(--accent); }

/* ---------- header / nav ---------- */
.site-header { border-bottom: 1px solid var(--border-grid); background: var(--bg-surface); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-top: var(--sp-3); padding-bottom: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; }
.brand__word { font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; }
.site-nav { display: flex; align-items: center; gap: var(--sp-2); }
.site-nav a {
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); min-height: 44px;
  display: inline-flex; align-items: center;
}
.site-nav a:hover { color: var(--text-primary); background: var(--bg-raised); }
.site-nav a[aria-current="page"] { color: var(--accent-strong); }
.locale-switch {
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-4); min-height: 44px; display: inline-flex; align-items: center;
  background: transparent; color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.locale-switch:hover { color: var(--text-primary); border-color: var(--accent); }

/* ---------- hero: la promesa ---------- */
main { display: block; }
.hero { padding-top: var(--sp-9); padding-bottom: var(--sp-8); }
.hero__mark { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero h1 { font-size: var(--fs-hero); margin: 0 0 var(--sp-4); font-weight: 700; }
.lede { color: var(--text-muted); font-size: var(--fs-lg); margin: 0 0 var(--sp-5); max-width: 40rem; line-height: 1.5; }

.cta {
  display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 700; padding: 0 var(--sp-6); min-height: 54px;
  border-radius: var(--r-full); border: 0; cursor: pointer; font-size: var(--fs-lg);
}
.cta:hover { background: var(--accent-strong); }

/* ---------- story: problema → giro → resultado ---------- */
.story section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); border-top: 1px solid var(--border-grid); }
.story h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); font-weight: 600; }

/* problema: la tensión, en tres frases */
.problem__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.problem__lines li { font-size: var(--fs-lg); color: var(--text-primary); line-height: 1.45; }

/* solución: tres resultados, no features — sin tarjetas, solo tipografía y aire */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
.pillar h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); font-weight: 600; color: var(--text-primary); }
.pillar p { color: var(--text-muted); font-size: var(--fs-md); max-width: 34rem; }

/* valor: la línea honesta (firma de la marca) */
.value__lede { color: var(--text-muted); font-size: var(--fs-lg); line-height: 1.5; margin-bottom: var(--sp-5); }
.promise {
  border-left: 3px solid var(--accent);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.promise ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.promise li { font-size: var(--fs-lg); color: var(--text-primary); line-height: 1.4; }

/* ---------- prose (sources + privacy pages) ---------- */
.prose { max-width: 56rem; padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
.prose h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.prose section { margin: var(--sp-6) 0; }
.prose h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); font-weight: 600; }
.prose ul { color: var(--text-muted); padding-left: 1.2em; }
.prose li { margin-bottom: var(--sp-2); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-xs); margin: 0; }
.note { color: var(--text-faint); font-size: var(--fs-sm); }

/* ---------- register table ---------- */
.register-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.register-table th, .register-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-grid); vertical-align: top; }
.register-table th { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); font-weight: 500; }
.register-table td { color: var(--text-muted); }
.register-table td.src { color: var(--text-primary); font-weight: 500; }
.status { display: inline-block; border-radius: var(--r-full); padding: 2px var(--sp-2); font-size: var(--fs-xs); border: 1px solid var(--border-strong); white-space: nowrap; }
.status--in-use { color: var(--safe); border-color: var(--safe); }
.status--implemented { color: var(--accent-strong); border-color: var(--accent); }
.status--candidate { color: var(--text-primary); }
.status--dropped { color: var(--danger); border-color: var(--danger); }

/* ---------- access: el único CTA ---------- */
.access { padding-top: var(--sp-8); padding-bottom: var(--sp-9); border-top: 1px solid var(--border-grid); }
.access__panel { background: var(--bg-surface); border: 1px solid var(--border-grid); border-radius: var(--r-lg); padding: var(--sp-6); max-width: 32rem; }
.access__panel h2 { margin: 0 0 var(--sp-2); font-weight: 600; }
.access__panel .lede { font-size: var(--fs-md); margin-bottom: var(--sp-5); }
.access-form { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
.access-form label { font-size: var(--fs-sm); color: var(--text-muted); }
.access-form input {
  background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--text-primary); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); font-family: inherit;
  min-height: 44px;
}
.access-form button {
  justify-self: start; margin-top: var(--sp-2); background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--r-full); font-weight: 700; padding: 0 var(--sp-6); min-height: 54px;
  font-size: var(--fs-md); cursor: pointer;
}
.access-form button:hover { background: var(--accent-strong); }
.access-form__result { color: var(--safe); min-height: 1.6em; margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.access__note { color: var(--text-faint); font-size: var(--fs-xs); margin-top: var(--sp-4); }

/* ---------- footer: mínimo ---------- */
.site-footer { border-top: 1px solid var(--border-grid); background: var(--bg-surface); }
.site-footer__inner { padding-top: var(--sp-5); padding-bottom: var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); }
.site-footer__tagline { color: var(--text-primary); font-weight: 600; }
.site-footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-3) 0; }
.site-footer nav a { color: var(--text-muted); text-decoration: none; padding: var(--sp-1) 0; min-height: 32px; }
.site-footer nav a:hover { color: var(--accent-strong); }
.site-footer .contact { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); }

/* ---------- 404 ---------- */
.notfound { max-width: 40rem; padding-top: var(--sp-9); padding-bottom: var(--sp-8); }

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}
@media (max-width: 719px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-nav a { white-space: nowrap; }
  .register-table { font-size: var(--fs-xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}