/* Ciudadanía por Inversión — Colossus Lab. Sistema visual editorial de OpenArg (openarg.org). */
:root {
  --ed-display: "Familjen Grotesk", "Space Grotesk", "Inter", system-ui, sans-serif;
  --ed-body: "Inter", system-ui, sans-serif;
  --ed-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Oscuro (por defecto, como openarg.org) */
  --ed-paper: #06090f; --ed-paper-2: #0d1117; --ed-paper-3: #1a2030;
  --ed-ink: #e8ecf4; --ed-ink-2: #8892a8;
  --ed-vermilion: #f6b40e; --ed-cobalt: #74acdf; --ed-chrome: #ffd04a; --ed-celeste: #93c5f8;
  --ed-rule: #e8ecf429; --ed-rule-strong: #e8ecf46b;
  --chart-grid: #74acdf1a; --chart-axis: #8892a8; --chart-1: #74acdf; --chart-2: #f6b40e; --chart-3: #a78bfa;
  --tooltip-bg: #1a1f35; --tooltip-border: #74acdf33; --tooltip-text: #f0f4fc;
  --plate: #ffffff;
  --glow-a: #74acdf1f; --glow-b: #f6b40e12; --grid-a: #74acdf0f; --grid-b: #e8ecf409; --vignette: #00000073;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ed-paper: #f2ede2; --ed-paper-2: #e6decc; --ed-paper-3: #d8cfb8;
    --ed-ink: #11142e; --ed-ink-2: #4a5170;
    --ed-vermilion: #c03a18; --ed-cobalt: #1f4e89; --ed-chrome: #d9a20e; --ed-celeste: #4a8abf;
    --ed-rule: #11142e2e; --ed-rule-strong: #11142e6b;
    --chart-grid: #11142e14; --chart-axis: #4a5170; --chart-1: #1f4e89; --chart-2: #c03a18; --chart-3: #6d4fc2;
    --tooltip-bg: #f2ede2; --tooltip-border: #11142e33; --tooltip-text: #11142e;
    --glow-a: #1f4e891a; --glow-b: #c03a180f; --grid-a: #1f4e8912; --grid-b: #11142e0a; --vignette: #11142e24;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ed-paper: #f2ede2; --ed-paper-2: #e6decc; --ed-paper-3: #d8cfb8;
  --ed-ink: #11142e; --ed-ink-2: #4a5170;
  --ed-vermilion: #c03a18; --ed-cobalt: #1f4e89; --ed-chrome: #d9a20e; --ed-celeste: #4a8abf;
  --ed-rule: #11142e2e; --ed-rule-strong: #11142e6b;
  --chart-grid: #11142e14; --chart-axis: #4a5170; --chart-1: #1f4e89; --chart-2: #c03a18; --chart-3: #6d4fc2;
  --tooltip-bg: #f2ede2; --tooltip-border: #11142e33; --tooltip-text: #11142e;
  --glow-a: #1f4e891a; --glow-b: #c03a180f; --grid-a: #1f4e8912; --grid-b: #11142e0a; --vignette: #11142e24;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; position: relative; overflow-x: hidden;
  background-color: var(--ed-paper); color: var(--ed-ink); font-family: var(--ed-body); line-height: 1.55;
  background-image: radial-gradient(1400px 900px at 12% -10%, var(--glow-a), transparent 55%),
                    radial-gradient(1100px 800px at 100% 105%, var(--glow-b), transparent 60%);
  background-repeat: no-repeat; background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none; width: 200vw; height: 250vh; top: -75vh; left: -50vw;
  background-image: linear-gradient(var(--grid-a) 1px, transparent 1px), linear-gradient(90deg, var(--grid-a) 1px, transparent 1px),
                    linear-gradient(var(--grid-b) 1px, transparent 1px), linear-gradient(90deg, var(--grid-b) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 80px 80px, 80px 80px;
  transform: perspective(1200px) rotateX(40deg); transform-origin: 50%;
  -webkit-mask-image: radial-gradient(50% 35%, #000 0%, #0000008c 55%, transparent 85%);
          mask-image: radial-gradient(50% 35%, #000 0%, #0000008c 55%, transparent 85%);
}
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 100%, transparent 55%, var(--vignette) 100%); }
main, header, footer { position: relative; z-index: 1; }
::selection { background: var(--ed-vermilion); color: #fff; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; }

.ed-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 2.5rem; }
.ed-flagstripe { display: block; height: 4px; background: linear-gradient(90deg, #74acdf 0 33.3%, #ffffff 33.3% 66.6%, #74acdf 66.6% 100%); opacity: .9; }

/* Topbar */
.ed-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 2rem; border-bottom: 1px solid var(--ed-rule); }
.ed-topbar-mark { display: inline-flex; align-items: baseline; gap: .65rem; text-decoration: none; color: var(--ed-ink); min-width: 0; }
.ed-topbar-mark-name { font-family: var(--ed-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; white-space: nowrap; }
.ed-topbar-mark-sub { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ed-ink-2); white-space: nowrap; }
.ed-topbar-nav { display: flex; gap: 1.4rem; font-size: .88rem; }
.ed-topbar-nav a { text-decoration: none; color: var(--ed-ink-2); transition: color .14s; }
.ed-topbar-nav a:hover, .ed-topbar-nav a[aria-current="page"] { color: var(--ed-ink); }
.ed-topbar-right { display: flex; align-items: center; gap: .8rem; }
.ed-theme-toggle { background: none; border: 1px solid var(--ed-rule); color: var(--ed-ink-2); border-radius: 999px; width: 2.1rem; height: 2.1rem; cursor: pointer; display: grid; place-items: center; }
.ed-theme-toggle:hover { color: var(--ed-ink); border-color: var(--ed-rule-strong); }
.ed-topbar-cta { font-size: .82rem; font-weight: 600; text-decoration: none; padding: .5rem .9rem; border: 1px solid var(--ed-ink); color: var(--ed-ink); white-space: nowrap; transition: background .14s, color .14s; }
.ed-topbar-cta:hover { background: var(--ed-ink); color: var(--ed-paper); }

/* Tipografía editorial */
.ed-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ed-ink-2); }
.ed-eyebrow-num { font-family: var(--ed-mono); letter-spacing: .04em; color: var(--ed-vermilion); font-weight: 500; }
.ed-display { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 0; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.ed-section-title { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.022em; line-height: 1.1; margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.4rem); text-wrap: balance; }
.ed-lead { color: var(--ed-ink-2); max-width: 62ch; margin: 0; font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.6; }
.ed-meta { font-size: .78rem; color: var(--ed-ink-2); letter-spacing: .04em; }
.ed-meta-mono { font-family: var(--ed-mono); font-size: .75rem; color: var(--ed-ink-2); }
.ed-textlink { position: relative; display: inline-flex; align-items: baseline; gap: .4rem; padding-bottom: 2px; font-weight: 600; text-decoration: none; color: var(--ed-ink); transition: color .14s; }
.ed-textlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ed-ink); transition: background .14s; }
.ed-textlink:hover { color: var(--ed-vermilion); }
.ed-textlink:hover::after { background: var(--ed-vermilion); }
.ed-textlink-arrow { display: inline-block; transition: transform .2s; }
.ed-textlink:hover .ed-textlink-arrow { transform: translateX(3px); }

/* Hero */
.ed-hero { padding: 3rem 0 4rem; }
.ed-hero-center { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
.ed-hero-title { font-size: clamp(3rem, 7vw, 6.2rem); letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.ed-hero-title-line { display: block; }
.ed-hero-title-line--alt { color: var(--ed-ink-2); font-style: italic; font-weight: 600; }
.ed-hero-subtitle { font-family: var(--ed-display); font-weight: 500; max-width: 60ch; margin: 0 auto; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.5; }
.ed-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2rem; }
.ed-hero-foot { margin-top: 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; border-top: 1px solid var(--ed-rule); padding-top: 2rem; }
.ed-num-display { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.05em; line-height: .85; font-size: clamp(4rem, 9vw, 7.5rem); color: var(--ed-cobalt); font-variant-numeric: tabular-nums; }
.ed-hero-toc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; font-size: .86rem; }
.ed-hero-toc li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--ed-rule); }
.ed-hero-toc a { text-decoration: none; color: var(--ed-ink-2); }
.ed-hero-toc a:hover { color: var(--ed-ink); }
.ed-hero-toc .n { font-family: var(--ed-mono); color: var(--ed-vermilion); margin-right: .5rem; font-size: .75rem; }

/* Secciones */
.ed-section { border-top: 1px solid var(--ed-rule); padding: 4.5rem 0; }
.ed-section-head { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.8rem; }

/* Filas de escala (cifras clave) */
.ed-scale-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .6fr) minmax(0, 1fr); gap: 1.75rem; align-items: baseline; padding: 1.6rem 0; border-bottom: 1px solid var(--ed-rule); }
.ed-scale-row:first-of-type { border-top: 1px solid var(--ed-rule); }
.ed-scale-row-num { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.ed-scale-row:nth-of-type(4n+1) .ed-scale-row-num { color: var(--ed-cobalt); }
.ed-scale-row:nth-of-type(4n+2) .ed-scale-row-num { color: var(--ed-vermilion); }
.ed-scale-row:nth-of-type(4n+3) .ed-scale-row-num { color: var(--ed-chrome); }
.ed-scale-row:nth-of-type(4n+4) .ed-scale-row-num { color: var(--ed-ink); }
.ed-scale-row-label { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.012em; font-size: clamp(1.05rem, 1.7vw, 1.35rem); }
.ed-scale-row-detail { color: var(--ed-ink-2); font-size: .92rem; line-height: 1.5; }

/* Etiquetas DATO / ESTIMACIÓN / HIPÓTESIS / ESCENARIO */
.tag { display: inline-block; font-family: var(--ed-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .08rem .45rem; border: 1px solid var(--ed-rule-strong); color: var(--ed-ink); white-space: nowrap; vertical-align: .1em; }
.tag--dato { border-color: var(--ed-cobalt); color: var(--ed-cobalt); }
.tag--estimacion { border-color: var(--ed-chrome); color: var(--ed-chrome); }
.tag--hipotesis { border-color: var(--ed-ink-2); color: var(--ed-ink-2); border-style: dashed; }
.tag--escenario { border-color: var(--ed-vermilion); color: var(--ed-vermilion); }
.claim { font-family: var(--ed-mono); font-size: .78em; color: var(--ed-ink-2); text-decoration: none; border-bottom: 1px dotted var(--ed-rule-strong); }
.claim:hover { color: var(--ed-vermilion); border-color: var(--ed-vermilion); }

/* Tabla de respuestas */
.ed-answers { border-top: 2px solid var(--ed-ink); }
.ed-answer { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.4fr) auto; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--ed-rule); align-items: baseline; }
.ed-answer-q { font-family: var(--ed-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; }
.ed-answer-a { color: var(--ed-ink); font-size: .95rem; }
.ed-answer-a strong { color: var(--ed-ink); }
.ed-answer-tags { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

/* Riesgos (pipeline) */
.ed-pipeline { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ed-ink); }
.ed-pipeline--4 { grid-template-columns: repeat(4, 1fr); }
.ed-pipeline-step { display: flex; flex-direction: column; gap: .75rem; padding: 2rem 1.5rem 1.5rem; border-right: 1px solid var(--ed-rule); }
.ed-pipeline-step:last-child { border-right: 0; }
.ed-pipeline-num { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.035em; line-height: .9; font-size: clamp(2.2rem, 3.5vw, 3rem); color: var(--ed-vermilion); font-variant-numeric: tabular-nums; }
.ed-pipeline-label { font-family: var(--ed-display); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
.ed-pipeline-desc { color: var(--ed-ink-2); font-size: .92rem; margin: 0; }

/* Gráficos interactivos */
.ed-chart { border-top: 2px solid var(--ed-ink); padding-top: 1.2rem; margin-bottom: 2.5rem; }
.ed-chart-title { font-family: var(--ed-display); font-weight: 700; font-size: 1.12rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
.ed-chart-sub { color: var(--ed-ink-2); font-size: .86rem; margin: 0 0 1rem; }
.ed-chart-canvas { position: relative; height: 340px; }
.ed-chart-note { font-size: .74rem; color: var(--ed-ink-2); margin-top: .7rem; }
.ed-chart-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .82rem; color: var(--ed-ink-2); margin-bottom: .6rem; }
.ed-chart-legend i { display: inline-block; width: 14px; height: 3px; margin-right: .4rem; vertical-align: middle; border-radius: 2px; }
.ed-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
details.ed-table-view { margin-top: .6rem; font-size: .82rem; }
details.ed-table-view summary { cursor: pointer; color: var(--ed-ink-2); }

/* Tarjetas de módulos */
.ed-ecosystem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ed-rule); border-left: 1px solid var(--ed-rule); }
.ed-ecosystem-card { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); min-height: 170px; text-decoration: none; color: inherit; border-right: 1px solid var(--ed-rule); border-bottom: 1px solid var(--ed-rule); transition: background .16s; }
.ed-ecosystem-card:hover { background: var(--ed-paper-2); }
.ed-ecosystem-card-glyph { display: grid; place-items: center; border-right: 1px solid var(--ed-rule); font-family: var(--ed-display); font-weight: 700; font-size: clamp(2.8rem, 5vw, 4rem); letter-spacing: -.05em; color: var(--ed-cobalt); }
.ed-ecosystem-card:nth-child(even) .ed-ecosystem-card-glyph { color: var(--ed-vermilion); }
.ed-ecosystem-card-body { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.ed-ecosystem-card-num { font-family: var(--ed-mono); font-size: .72rem; letter-spacing: .1em; color: var(--ed-vermilion); font-weight: 700; }
.ed-ecosystem-card-title { font-family: var(--ed-display); font-weight: 700; font-size: 1.2rem; margin: 0; letter-spacing: -.015em; }
.ed-ecosystem-card-tagline { color: var(--ed-ink-2); font-size: .88rem; margin: 0; }
.ed-ecosystem-card-cta { margin-top: auto; font-size: .82rem; font-weight: 600; }

/* Páginas de módulo (prosa) */
.ed-article { max-width: 860px; }
.ed-prose { font-size: 1rem; }
.ed-prose h2 { font-family: var(--ed-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin: 3rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--ed-rule); }
.ed-prose h3 { font-family: var(--ed-display); font-weight: 700; font-size: 1.15rem; margin: 2rem 0 .7rem; }
.ed-prose p, .ed-prose li { color: var(--ed-ink); }
.ed-prose ol, .ed-prose ul { padding-left: 1.3rem; }
.ed-prose li { margin: .45rem 0; }
.ed-prose code { font-family: var(--ed-mono); font-size: .82em; background: var(--ed-paper-2); padding: .05rem .3rem; word-break: break-word; }
.ed-prose blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 3px solid var(--ed-vermilion); color: var(--ed-ink-2); }
.ed-prose a:not(.claim) { color: var(--ed-cobalt); word-break: break-word; }
.ed-table-wrap { width: 100%; overflow-x: auto; margin: 1.2rem 0; border-top: 2px solid var(--ed-ink); }
.ed-prose table, .ed-table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.ed-prose th, .ed-prose td, .ed-table th, .ed-table td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--ed-rule); }
.ed-prose th, .ed-table th { font-family: var(--ed-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ed-ink-2); font-weight: 600; }
.ed-summary { border: 1px solid var(--ed-rule-strong); background: color-mix(in srgb, var(--ed-paper-2) 70%, transparent); padding: 1.6rem 1.8rem; margin: 2rem 0; }
.ed-summary h2 { margin: 0 0 .8rem; padding: 0; border: 0; font-size: 1.1rem; }

/* Láminas: gráficos estáticos sobre papel blanco */
.ed-plate { margin: 2rem 0; }
.ed-plate-paper { background: var(--plate); padding: .8rem; border: 1px solid var(--ed-rule); }
.ed-plate-paper img { display: block; width: 100%; }
.ed-plate figcaption { font-size: .78rem; color: var(--ed-ink-2); margin-top: .5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.ed-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 2px solid var(--ed-ink); padding-top: 1.5rem; margin-top: 3rem; }

/* Explorador de afirmaciones */
.ed-filters { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
.ed-filters input, .ed-filters select { font: inherit; font-size: .88rem; color: var(--ed-ink); background: var(--ed-paper-2); border: 1px solid var(--ed-rule); padding: .55rem .7rem; min-width: 0; }
.ed-filters input { flex: 1 1 260px; }
.ed-count { font-family: var(--ed-mono); font-size: .78rem; color: var(--ed-ink-2); margin-bottom: .6rem; }
.status-ok { color: var(--ed-cobalt); font-weight: 600; }
.status-rev { color: var(--ed-vermilion); font-weight: 600; }
.ed-claim-cita { font-family: var(--ed-mono); font-size: .74rem; color: var(--ed-ink-2); word-break: break-word; }
tr:target, tr.hl { background: color-mix(in srgb, var(--ed-vermilion) 14%, transparent); }

/* Colofón */
.ed-colophon { border-top: 1px solid var(--ed-rule); color: var(--ed-ink-2); padding: 3rem 0 2rem; font-size: .85rem; }
.ed-colophon-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.ed-colophon-brand-name { display: block; font-family: var(--ed-display); font-weight: 700; color: var(--ed-ink); font-size: 1.4rem; letter-spacing: -.02em; }
.ed-colophon-col-title { display: block; font-family: var(--ed-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .6rem; color: var(--ed-ink); }
.ed-colophon a { color: var(--ed-ink-2); text-decoration: none; display: block; padding: .15rem 0; }
.ed-colophon a:hover { color: var(--ed-ink); }
.ed-colophon-bottom { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--ed-rule); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--ed-mono); font-size: .72rem; }

@media (max-width: 900px) {
  .ed-topbar-nav { display: none; }
  .ed-pipeline, .ed-pipeline--4 { grid-template-columns: 1fr; }
  .ed-pipeline-step { border-right: 0; border-bottom: 1px solid var(--ed-rule); padding: 1.5rem 0; }
  .ed-two { grid-template-columns: 1fr; }
  .ed-colophon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ed-container { padding: 0 16px; }
  .ed-topbar { padding: .75rem 16px; }
  .ed-topbar-mark-sub, .ed-topbar-cta { display: none; }
  .ed-section { padding: 3rem 0; }
  .ed-hero { padding: 1.75rem 0 2.5rem; }
  .ed-hero-foot { grid-template-columns: 1fr; }
  .ed-hero-toc { columns: 1; }
  .ed-scale-row { grid-template-columns: 1fr; gap: .4rem; padding: 1.3rem 0; }
  .ed-answer { grid-template-columns: 1fr; gap: .5rem; }
  .ed-answer-tags { justify-content: flex-start; }
  .ed-ecosystem { grid-template-columns: 1fr; }
  .ed-ecosystem-card { grid-template-columns: 80px minmax(0, 1fr); min-height: 130px; }
  .ed-chart-canvas { height: 280px; }
  .ed-summary { padding: 1.2rem; }
  .ed-colophon-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }