/* City landing — noche de ciudad con alumbrado de sodio.
   Tinta azul + grilla blueprint + ámbar sodio. Nada de blobs ni sombras de tarjeta. */

@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  color-scheme: dark;
  --ink:   #0a0d12;  /* asfalto de noche */
  --grid:  #182230;  /* blueprint */
  --panel: #10161ecc;
  --line:  #1d2837;
  --text:  #e9e2d4;  /* papel cálido */
  --muted: #7c8896;
  --amber: #ffb454;  /* sodio — la firma */
  --amber-dim: #8a6234;
  --mint:  #57d9a3;  /* señal de vida */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 15px/1.55 var(--font-body);
  min-height: 100vh;
}

/* the real city, live, behind everything */
#citymap {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
}
.veil {
  position: fixed; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 20% 10%, transparent 0%, #0a0d12cc 55%, #0a0d12f2 100%),
    linear-gradient(#0a0d1200, #0a0d12 92%);
}

.top, .hero, .panel, .pulse { position: relative; z-index: 2; }

/* ── header ─────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.word { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.word em { font-style: normal; color: var(--muted); font-weight: 500; }
.livep {
  width: 8px; height: 8px; border-radius: 50%;
  background: #434e5c;
  transition: background .4s, box-shadow .4s;
}
.livep.on { background: var(--mint); box-shadow: 0 0 10px #57d9a366; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top nav { display: flex; gap: 8px; }
.ghost {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 12px;
  transition: border-color .15s, color .15s;
}
.ghost:hover { border-color: var(--amber); color: var(--amber); }

/* ── hero ───────────────────────────────── */
.hero {
  max-width: 760px;
  padding: 84px 28px 70px;
}
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 20px;
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
h1 mark {
  background: none;
  color: var(--amber);
}
.lede {
  font-size: 17px; line-height: 1.6;
  color: #c9c3b5;
  max-width: 55ch;
  margin: 0 0 40px;
}

/* counters — la contabilidad de la ciudad */
.counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel);
  backdrop-filter: blur(6px);
}
.counter {
  padding: 16px 18px 14px;
  border-right: 1px solid var(--line);
}
.counter:last-child { border-right: 0; }
.counter dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.counter dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.counter dd.flick { animation: flick .5s ease; }
@keyframes flick { 0% { color: var(--amber); } 100% { color: var(--text); } }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--ink);
  background: var(--amber);
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .15s;
}
.cta:hover { background: #ffc677; }
.cta .arr { transition: transform .15s; }
.cta:hover .arr { transform: translateX(4px); }
.ghostlink {
  background: none;
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 500;
}
.ghostlink:hover { border-color: var(--amber); color: var(--amber); background: none; }

/* ── panel: cómo vivir ──────────────────── */
.panel {
  max-width: 980px;
  margin: 0 auto 90px;
  padding: 0 28px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px; margin-bottom: 8px;
}
.panel h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0;
}
.tag {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  padding: 3px 9px; border-radius: 3px;
  white-space: nowrap;
}
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.steps li {
  display: flex; gap: 16px;
  background: #0d131b;
  padding: 22px 20px;
}
.steps .n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--amber);
  padding-top: 3px;
}
.steps h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  margin: 0 0 10px;
}
.steps p { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.code {
  margin: 0;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  background: #070a0e;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  overflow-x: auto;
  color: #b8c2cd;
  white-space: pre;
}
.rules {
  font-size: 12.5px; color: var(--muted);
  font-family: var(--font-mono);
  margin: 18px 0 0;
}
.rules a { color: var(--amber); }

/* ── ticker del pulso ───────────────────── */
.pulse {
  border-top: 1px solid var(--line);
  background: #0c1118f2;
  backdrop-filter: blur(6px);
}
.pulse-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 28px 0;
}
.pulse .label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint);
}
.ticker-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ticker {
  display: flex; gap: 0;
  overflow-x: auto;
  padding: 10px 28px 12px;
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }
.tick {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--muted);
  padding: 6px 14px 6px 0;
  margin-right: 14px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.tick b { color: var(--amber); font-weight: 500; }
.tick .who { color: var(--text); }
.tick time { color: #4d5a6b; margin-right: 8px; }

@media (max-width: 720px) {
  .hero { padding: 54px 20px 46px; }
  .counters { grid-template-columns: repeat(2, 1fr); }
  .counter:nth-child(2) { border-right: 0; }
  .counter:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .top { padding: 14px 18px; }
  .panel { padding: 0 18px; margin-bottom: 64px; }
  .pulse-head, .ticker { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .counter dd.flick { animation: none; }
  .cta .arr, .cta:hover .arr { transition: none; transform: none; }
}