Deploy the site from pipeline commit fef8f38bbf78

assets/amc.css

@@ -89,6 +89,8 @@ h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }
 .btn svg { width: 16px; height: 16px; }
 .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
         background: var(--surface-2); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
+/* A long chip wraps rather than pushing past a phone's edge (Gobiernos, 320-380 px). */
+.chip { max-width: 100%; white-space: normal; }
 .chip.accent { background: var(--accent-soft); color: var(--accent); }
 .kicker { font: 600 12.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; }
 .seg-ctl { display: inline-flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
@@ -130,7 +132,7 @@ section.block { padding: 56px 0 8px; }
 .stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
 .stories.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 @media (max-width: 960px) { .stories.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 680px) { .stories, .stories.three { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 760px) { .stories, .stories.three { grid-template-columns: minmax(0, 1fr); } }
 .story-card { display: flex; flex-direction: column; text-decoration: none; background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
 .story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
@@ -149,9 +151,16 @@ section.block { padding: 56px 0 8px; }
   .story-card.feature .thumb { min-height: 200px; border-right: 0; border-bottom: 1px solid var(--border); }
 }
 
+/* BREAKPOINTS (audit A-07, 2026-10-19). Four, and every layout rule uses one:
+   560 phone · 760 small tablet · 900 tablet · 960 desktop. A rule that sat
+   between two moved to the one above it, so grids now stack a little sooner
+   and never later. Two exceptions, sized to their content: the header's own
+   set in nav.css, and the console's 1000 px, where its editor and schema panel
+   stop fitting side by side. */
+
 /* ---------------------------------------------------------------- facts */
 .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
-@media (max-width: 860px) { .facts { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 900px) { .facts { grid-template-columns: minmax(0, 1fr); } }
 .fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow);
         display: flex; flex-direction: column; gap: var(--stack); }
 .fact .big { font: 800 clamp(34px, 4.6vw, 46px)/1 var(--display); letter-spacing: -.035em; margin: 0; }
@@ -181,7 +190,7 @@ section.block { padding: 56px 0 8px; }
 .share svg { width: 13px; height: 13px; }
 
 .findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 36px 0 12px; counter-reset: f; }
-@media (max-width: 820px) { .findings { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 900px) { .findings { grid-template-columns: minmax(0, 1fr); } }
 .finding { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); }
 .finding .n { font: 800 clamp(30px, 3.8vw, 40px)/1 var(--display); letter-spacing: -.03em; margin: 0 0 var(--stack); }
 .finding p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@@ -267,7 +276,7 @@ aside.read-this b { color: var(--ink); }
 .seg:last-child { border-radius: 0 4px 4px 0; }
 .seg:hover, .seg:focus-visible { filter: brightness(1.12); }
 .val { font-size: 12.5px; color: var(--ink-2); margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
-@media (max-width: 640px) {
+@media (max-width: 760px) {
   .hbars { grid-template-columns: minmax(0, 1fr) !important; row-gap: 3px; }
   .hbars .lab { text-align: left; margin-top: 8px; }
   /* A long value label drops under its bar rather than pushing past the screen. */
@@ -297,6 +306,7 @@ details.tv table { border-collapse: collapse; width: 100%; }
 details.tv th, details.tv td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
 details.tv th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; position: sticky; top: 0; }
 details.tv td.n, details.tv th.n { text-align: right; font-variant-numeric: tabular-nums; }
+details.tv .tv-acts { margin-top: 6px; }
 
 /* ---------------------------------------------------------------- what changed, cta, trust */
 .changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tight); }
@@ -306,7 +316,7 @@ details.tv td.n, details.tv th.n { text-align: right; font-variant-numeric: tabu
 .change .label { margin: 2px 0 0; font-weight: 600; }
 .change .sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
 .cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tight); }
-@media (max-width: 860px) { .cta { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 900px) { .cta { grid-template-columns: minmax(0, 1fr); } }
 .cta a { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border);
          border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
 .cta a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
@@ -336,6 +346,12 @@ footer.site .clyx-credit { margin-top: 18px; }
                   border: 2.5px solid var(--border); border-top-color: var(--ink-2); animation: spin .8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .error { color: var(--down); padding: 40px 0; }
+.error-state { max-width: 640px; padding: 56px 0 40px; }
+.error-state h1 { font: 800 clamp(30px, 5vw, 46px)/1.08 var(--display); letter-spacing: -.03em; margin: 8px 0 0; }
+.error-state .dek { margin: 14px 0 0; }
+.error-state .row { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
+.error-state details { margin: 28px 0 0; color: var(--muted); font-size: 13px; }
+.error-state details code { display: block; margin-top: 6px; font: 12.5px var(--mono); overflow-wrap: anywhere; }
 
 /* The monthly bulletin: its stamp, the way to the months either side, and the list. */
 .stamp { max-width: var(--read); margin: 24px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
@@ -393,7 +409,7 @@ p, li, .fig-head p, .cta .d { text-wrap: pretty; }
 .card, .fact, .finding, .tile, .change, .story-card .body, .cta a, .trust p, .fig-head p, aside.read-this, .scrolly .step, #tip {
   -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; overflow-wrap: break-word; }
 .fact .big, .finding .n, .tile .value, .change .value, .story-card .stat { font-variant-numeric: tabular-nums; -webkit-hyphens: manual; hyphens: manual; }
-@media (max-width: 540px) {
+@media (max-width: 560px) {
   .prose { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
 }
 @media (min-width: 900px) {

assets/amc.js

@@ -134,6 +134,9 @@ export const shortActivity = (s, max = 58) => {
   const t = s.replace(/\s*\(.*?\)\s*/g, " ").replace(/\s+/g, " ").trim();
   return t.length <= max ? t : `${t.slice(0, max - 1).replace(/[\s,;]+\S*$/, "")}…`;
 };
+// In a sentence, the whole name: a cut "…con surtido compuesto…" reads as a
+// typo in prose (audit A-34). Only the asides in parentheses go.
+export const activityName = (s) => shortActivity(s, Infinity);
 
 // ------------------------------------------------------------------ DOM
 export const el = (tag, attrs = {}, ...kids) => {
@@ -169,6 +172,7 @@ export const icon = (name) => {
     sun: "M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z",
     arrow: "M5 12h14M13 6l6 6-6 6",
     down: "M12 5v14M6 13l6 6 6-6",
+    download: "M12 4v11M7 10l5 5 5-5M5 20h14",
   };
   const s = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   s.setAttribute("viewBox", "0 0 24 24"); s.setAttribute("fill", "none"); s.setAttribute("stroke", "currentColor");
@@ -180,9 +184,11 @@ export const icon = (name) => {
 
 // ------------------------------------------------------------------ chrome
 const NAV = [
-  ["inicio", "", "Inicio", "opt"],
+  // No "Inicio": the AMC badge is the way home, as on most sites, and the
+  // explorer took its room in the bar (2026-10-19).
   ["historias", "historias/index.html", "Historias"],
   ["boletin", "boletin/index.html", "Boletín"],
+  ["explorar", "explorar/index.html", "Explorar"],
   ["consulta", "consulta/index.html", "Consulta SQL"],
   ["metodologia", "metodologia/index.html", "Metodología", "opt"],
 ];
@@ -200,7 +206,9 @@ export function chrome(current) {
       el("span", { class: "name" }, "Analíticas Mercantiles", el("small", { text: "Empresas de Colombia, en datos abiertos" }))),
     clyxBy(),
     el("div", { class: "links" }, ...NAV.map(([k, href, label, cls]) =>
-      el("a", { href: ROOT + href || "./", class: cls, "aria-current": k === current ? "page" : (current?.startsWith(k + "/") ? "section" : null), text: label })), theme)));
+      el("a", { href: ROOT + href || "./", class: cls, "aria-current": k === current ? "page" : (current?.startsWith(k + "/") ? "section" : null) },
+        // "Consulta SQL" is "SQL" below 720 px, so every link fits down to 360 px.
+        ...(label === "Consulta SQL" ? [el("span", { class: "long", text: "Consulta " }), "SQL"] : [label]))), theme)));
   document.body.prepend(nav);
   document.body.append(el("div", { id: "tip", role: "status", "aria-live": "polite" }));
   initTheme(theme);
@@ -238,6 +246,7 @@ export function footer(s, o = {}) {
       el("li", {}, el("a", { href: `${ROOT}historias/index.html`, text: "Historias" })),
       el("li", {}, el("a", { href: `${ROOT}boletin/index.html`, text: "Boletín mensual" })),
       el("li", {}, el("a", { href: "https://amc.clyxconsulting.com/feed.xml", text: "Boletín por RSS" })),
+      el("li", {}, el("a", { href: `${ROOT}explorar/index.html`, text: "Explorar una actividad" })),
       el("li", {}, el("a", { href: `${ROOT}consulta/index.html`, text: "Consulta SQL" })))),
     el("div", {}, el("h4", { text: "Los datos" }), el("ul", {},
       el("li", {}, el("a", { href: `${ROOT}metodologia/index.html`, text: "Metodología" })),
@@ -319,9 +328,19 @@ export function tipOn(node, data, onEnter, onLeave, { focusable = true } = {}) {
   TIPS.set(node, data);
   // Dense marks (a year of days, sixty age bands) are not each a tab stop:
   // the table view beside them carries every value to the keyboard.
-  if (focusable) node.setAttribute("tabindex", "0");
-  const d = typeof data === "function" ? null : data;
-  if (d) node.setAttribute("aria-label", `${d.title}: ${(d.rows || []).map((r) => `${r.label} ${r.value}`).join(", ")}`);
+  // A mark that takes focus says what it is: an image with its value as its
+  // name. One that does not is left unnamed; a label on an element with no
+  // role is one screen readers ignore (audit A-35), and the table view
+  // already carries its value.
+  const name = (x) => x ? `${x.title}: ${(x.rows || []).map((r) => `${r.label} ${r.value}`).join(", ")}` : "";
+  const now = () => { try { return typeof data === "function" ? data() : data; } catch { return null; } };
+  if (focusable) {
+    node.setAttribute("tabindex", "0");
+    node.setAttribute("role", "img");
+    node.setAttribute("aria-label", name(now()) || "Dato de la gráfica");
+    // A tooltip computed on demand may change: named again when focused.
+    if (typeof data === "function") node.addEventListener("focus", () => { const x = name(now()); if (x) node.setAttribute("aria-label", x); });
+  }
   const get = () => (typeof data === "function" ? data() : data);
   node.addEventListener("pointermove", (e) => showTip(get(), e.clientX, e.clientY));
   node.addEventListener("pointerenter", () => onEnter?.());
@@ -336,7 +355,26 @@ export function tableView(caption, head, rows, numeric = null) {
   const t = el("table", {}, el("caption", { class: "sr-only", text: caption }),
     el("thead", {}, el("tr", {}, ...head.map((h, i) => el("th", { class: isNum(i) ? "n" : null, text: h })))),
     el("tbody", {}, ...rows.map((r) => el("tr", {}, ...r.map((c, i) => el("td", { class: isNum(i) ? "n" : null, text: c }))))));
-  return el("details", { class: "tv" }, el("summary", {}, "Ver como tabla"), el("div", { class: "tv-wrap" }, t));
+  const dl = el("button", { class: "linkbtn", type: "button" }, icon("download"), "Descargar CSV");
+  dl.addEventListener("click", () => download(csvName(caption), toCSV(head, rows), "text/csv;charset=utf-8"));
+  return el("details", { class: "tv" }, el("summary", {}, "Ver como tabla"), el("div", { class: "tv-wrap" }, t),
+    el("div", { class: "tv-acts" }, dl));
+}
+
+// The table as a reader sees it, for a spreadsheet: semicolons and a BOM,
+// which is how Excel in Colombia (decimal comma) opens a file with accents
+// and "1.234,5" intact. The figures stay formatted, so the file says what the
+// page says; the exact numbers are a query away in the console.
+function toCSV(head, rows) {
+  const q = (c) => { const s = String(c ?? ""); return /[";\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s; };
+  return "\ufeff" + [head, ...rows].map((r) => r.map(q).join(";")).join("\r\n") + "\r\n";
+}
+const slug = (s) => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+const csvName = (caption) => `amc-${slug(location.pathname.split("/").filter((x) => x && x !== "index.html").pop() || "inicio")}-${slug(caption).slice(0, 60)}.csv`;
+export function download(name, text, type) {
+  const a = el("a", { href: URL.createObjectURL(new Blob([text], { type })), download: name });
+  document.body.append(a); a.click(); a.remove();
+  setTimeout(() => URL.revokeObjectURL(a.href), 1000);
 }
 
 export const consoleLink = (sql) => `${ROOT}consulta/index.html#q=${encodeURIComponent(sql)}`;
@@ -352,7 +390,7 @@ export function figure({ title: t, sub, wide = true, sql, table, source = "RUES
     btn.addEventListener("click", () => {
       const on = sqlBox.classList.toggle("on");
       btn.setAttribute("aria-expanded", String(on));
-      if (on && !sqlBox.firstChild) sqlBox.append(el("pre", { text: sql }),
+      if (on && !sqlBox.firstChild) sqlBox.append(el("pre", { text: sql, tabindex: "0" }),
         el("div", { class: "row" }, el("a", { class: "btn", href: consoleLink(sql) }, icon("open"), "Ejecutarlo en la consulta SQL")));
     });
     acts.append(btn);
@@ -410,8 +448,22 @@ export function scrolly(steps, draw, label = "", after = null) {
   return box;
 }
 
+// When a page cannot load (audit A-37): what happened in the reader's words,
+// a way to try again and a way out. The browser's own message, in English,
+// goes in a closed line at the bottom for whoever reports it.
 export function fail(app, e, what = "la historia") {
-  app.replaceChildren(el("p", { class: "error", text: `No se pudo cargar ${what} (${e.message || e}).` }));
-  window.__amcError = String(e.message || e);
+  const msg = String(e?.message || e);
+  const net = /fetch|network|load failed|NetworkError|timed? ?out|HTTP [45]\d\d/i.test(msg);
+  const retry = el("button", { class: "btn primary", type: "button", text: "Intentar de nuevo" });
+  retry.addEventListener("click", () => location.reload());
+  app.replaceChildren(el("section", { class: "error-state", role: "alert" },
+    el("p", { class: "kicker", text: "Algo falló" }),
+    el("h1", { text: `No pudimos cargar ${what}` }),
+    el("p", { class: "dek", text: net
+      ? "Parece un problema de conexión con los archivos de datos, o los datos se están actualizando en este momento. Suele resolverse en unos minutos."
+      : "Algo en esta página no funcionó como esperábamos. Intentar de nuevo suele bastar; si no, el resto del sitio sigue disponible." }),
+    el("div", { class: "row" }, retry, el("a", { class: "btn", href: ROOT || "./", text: "Ir al inicio" })),
+    el("details", {}, el("summary", { text: "Detalle técnico" }), el("code", { text: msg }))));
+  window.__amcError = msg;
   console.error(e);
 }

assets/charts.js

@@ -1090,7 +1090,9 @@ export function jurisdictionMap(container, o) {
       const H = Math.ceil(y1 - y0) + 8;
       proj.fitExtent([[4, 4], [W - 4, H - 4]], main);
       const path = d3.geoPath(proj);
-      const root = svg(W, H, o.label);
+      // A group, not an image: its chambers are buttons, and an image's
+      // children are hidden from assistive technology (axe nested-interactive, A-36).
+      const root = svg(W, H, o.label).attr("role", "group");
       // Islands a few pixels across get an outline in their own colour, so
       // they show at any size, over a faint dark ring, so the palest class
       // still stands out from the page; a hit area around them takes the tap.

assets/nav.css

@@ -43,6 +43,14 @@ nav.top .theme svg { width: 17px; height: 17px; }
   nav.top .brand .name { display: none; }
   nav.top .links a { padding: 7px 8px; font-size: 14px; }
 }
+@media (max-width: 720px) { nav.top .links a .long { display: none; } }
+@media (max-width: 640px) { nav.top .brand .name { display: none; } }
+@media (max-width: 400px) { nav.top .links a { padding: 7px 6px; font-size: 13px; } }
+@media (max-width: 360px) { nav.top .links a { padding: 7px 4px; font-size: 12.5px; } }
+@media (max-width: 960px) { nav.top .brand .name small { display: none; } }
+/* Metodología returns only where it fits beside "por Clyx" and the explorer. */
+@media (max-width: 880px) { nav.top .links a.opt { display: none; } }
+@media (max-width: 340px) { nav.top .wrap { gap: 8px; } nav.top .links { gap: 0; } }
 @media print { nav.top { display: none; } }
 
 /* ---------------------------------------------------------------- Clyx Consulting

boletin/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../assets/amc.css">
 <link rel="stylesheet" href="../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/boletin/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/boletin/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando los boletines…</p></main>

boletin/ultimo/index.html

@@ -26,6 +26,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/boletin/ultimo/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/boletin/ultimo/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando el boletín…</p></main>

consulta/index.html

@@ -5,6 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Consulta SQL · AMC</title>
 <meta name="description" content="Consulta con SQL el registro empresarial de Colombia — una fila por empresa, verificado — directamente en tu navegador.">
+<meta property="og:title" content="Consulta SQL del registro empresarial de Colombia">
+<meta property="og:description" content="Una fila por empresa, verificada: consulta con SQL el registro mercantil de Colombia en tu navegador, con 30 ejemplos para empezar.">
+<meta property="og:type" content="website">
 <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
 <meta property="og:image" content="https://amc.clyxconsulting.com/assets/og/inicio.png">
 <meta property="og:image:width" content="1200">
@@ -171,6 +174,8 @@ footer { color: var(--faint); font-size: 12.5px; padding: 0 0 32px; }
 
 @media (max-width: 560px) { .sm-hide { display: none; } }
 </style>
+<link rel="canonical" href="https://amc.clyxconsulting.com/consulta/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/consulta/">
 </head>
 <body>
 <nav class="top" aria-label="Principal">

explorar/index.html

@@ -0,0 +1,291 @@
+<!doctype html>
+<html lang="es" data-root="../">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Explora una actividad · AMC</title>
+<meta name="description" content="Escoge una actividad económica y una región de Colombia: cuántas empresas están activas, cuántas se crean cada año, cuántas siguen y cuáles son las más grandes. Sin escribir SQL.">
+<meta property="og:title" content="Explora una actividad económica en Colombia">
+<meta property="og:description" content="Cuántas empresas activas hay en cada actividad y región, cuántas se crean cada año y cuáles venden más, con los datos abiertos del registro.">
+<meta property="og:type" content="website">
+<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
+<meta property="og:image" content="https://amc.clyxconsulting.com/assets/og/inicio.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:site_name" content="Analíticas Mercantiles Colombianas">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://amc.clyxconsulting.com/assets/og/inicio.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../assets/amc.css">
+<link rel="stylesheet" href="../assets/nav.css">
+<style>
+.pick { display: grid; gap: 12px; margin: 26px 0 0; max-width: 820px; }
+.pick .act { position: relative; }
+.pick input { width: 100%; box-sizing: border-box; font: 500 18px var(--sans); color: var(--ink); background: var(--surface);
+              border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
+.pick input:focus { outline: 2px solid var(--c1); outline-offset: 1px; }
+.pick .row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
+.sugg { display: grid; gap: 6px; margin: 8px 0 0; }
+.sugg button { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; text-align: left; width: 100%;
+               background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 10px 14px;
+               font: inherit; color: inherit; cursor: pointer; }
+.sugg button:hover, .sugg button:focus-visible { border-color: var(--border-strong); box-shadow: var(--shadow); }
+.sugg .code { font: 500 12.5px var(--mono); color: var(--muted); margin-right: 8px; }
+.sugg .n { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
+.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
+.quick button { cursor: pointer; border: 1px solid var(--border); }
+.quick button:hover { border-color: var(--border-strong); }
+.status { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; min-height: 20px; }
+.chosen { margin: 34px 0 0; scroll-margin-top: 80px; }
+.chosen h2 { font: 800 clamp(26px, 4vw, 40px)/1.1 var(--display); letter-spacing: -.03em; margin: 6px 0 0; }
+.facts.x4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; }
+@media (max-width: 960px) { .facts.x4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 560px) { .facts.x4 { grid-template-columns: minmax(0, 1fr); } }
+.facts.x4 .fact .big { font-size: clamp(30px, 3.6vw, 40px); }
+.firms { display: grid; gap: 6px; }
+.firm { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline;
+        padding: 10px 2px; border-bottom: 1px solid var(--border); }
+.firm .k { color: var(--muted); font-variant-numeric: tabular-nums; }
+.firm a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
+.firm a:hover { text-decoration: underline; }
+.firm .v { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
+.firm .s { grid-column: 2 / 4; color: var(--ink-2); font-size: 13px; }
+</style>
+<link rel="canonical" href="https://amc.clyxconsulting.com/explorar/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/explorar/">
+</head>
+<body>
+<main class="wrap" id="app"><p class="loading">Cargando…</p></main>
+<noscript><p class="wrap">Esta página necesita JavaScript.</p></noscript>
+<script type="module">
+import * as A from "../assets/amc.js";
+import { columns, barList } from "../assets/charts.js";
+const { el, n, pct, pct1, rich, figure, readThis, tableView, money } = A;
+// A share small enough to round to 0 % says so instead.
+const share = (x) => x >= 0.1 ? pct(x) : x >= 0.001 ? pct1(x) : x > 0 ? "< 0,1 %" : pct(0);
+
+A.chrome("explorar");
+const app = document.getElementById("app");
+const norm = (t) => t.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9ñ ]/g, " ").replace(/\s+/g, " ").trim();
+// Everyday words the official names do not use: "software" is not in 6201's
+// name, nor "restaurante" in 5611's. Added to what a search matches, never shown.
+const ALIAS = {
+  "6201": "software programacion desarrollo apps aplicaciones", "6202": "software consultoria informatica sistemas",
+  "5820": "software", "5611": "restaurante restaurantes comida", "5613": "cafe cafeteria", "5619": "comidas rapidas",
+  "4711": "tienda tiendas minimercado supermercado", "4773": "drogueria farmacia", "6910": "abogados abogado juridica",
+  "6920": "contador contadores contabilidad", "8621": "medico consultorio", "8622": "odontologo odontologia",
+  "9602": "salon de belleza barberia", "4923": "transporte de carga camiones", "4921": "taxi transporte de pasajeros",
+  "7310": "agencia de publicidad marketing", "4111": "construccion de vivienda", "6810": "inmobiliaria finca raiz",
+  "1081": "panaderia pan", "4631": "mayorista alimentos", "5511": "hotel hoteles", "7911": "agencia de viajes turismo",
+};
+const MES = ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"];
+const TIPOS = [["todas", "Todas"], ["juridicas", "Sociedades y entidades"], ["naturales", "Personas naturales"]];
+
+try {
+  const s = await A.summary();
+  const Y = s.year;
+  const d = await import("../assets/duck.js");
+  // The activities with their live companies, and the chambers: what the
+  // pickers offer. The newest fiscal year sets which revenue is current.
+  const [acts, cams, [{ fy }]] = await Promise.all([
+    d.query(`SELECT e.sector_code AS clase, arg_max(a.descripcion, a.edicion) AS nombre, sum(e.activas) AS activas
+             FROM explorer e JOIN activities a ON a.clase = e.sector_code GROUP BY 1 ORDER BY 3 DESC`),
+    d.query(`SELECT codigo_camara, any_value(chamber) AS chamber, sum(activas) AS activas
+             FROM explorer WHERE codigo_camara IS NOT NULL GROUP BY 1 ORDER BY 2`),
+    d.query(`SELECT max(anio_fiscal) AS fy FROM explorer_firms`)]);
+  const byCode = new Map(acts.map((a) => [a.clase, a]));
+  const camName = new Map(cams.map((c) => [c.codigo_camara, A.title(c.chamber)]));
+  const allLive = cams.reduce((t, c) => t + c.activas, 0);
+  const regionOf = new Map((await d.query(`SELECT codigo, region FROM regions WHERE tipo = 'camara'`)).map((r) => [r.codigo, r.region]));
+  for (const a of acts) a.key = norm(`${a.clase} ${a.nombre} ${ALIAS[a.clase] || ""}`);
+
+  const h = new URLSearchParams(location.hash.slice(1));
+  const st = { clase: byCode.has(h.get("clase")) ? h.get("clase") : null,
+               camara: camName.has(h.get("camara")) ? h.get("camara") : "",
+               tipo: TIPOS.some(([k]) => k === h.get("tipo")) ? h.get("tipo") : "todas" };
+
+  const input = el("input", { type: "search", placeholder: "Actividad o código CIIU: software, panadería, 4711…", "aria-label": "Actividad económica", autocomplete: "off" });
+  const sugg = el("div", { class: "sugg" });
+  const sel = el("select", { class: "sel", "aria-label": "Región" }, el("option", { value: "", text: "Todo el país" }),
+    ...cams.map((c) => el("option", { value: c.codigo_camara, text: camName.get(c.codigo_camara) })));
+  sel.value = st.camara;
+  const seg = el("div", { class: "seg-ctl", role: "group", "aria-label": "Tipo de empresa" },
+    ...TIPOS.map(([k, label]) => el("button", { type: "button", "data-k": k, "aria-pressed": String(k === st.tipo), text: label })));
+  const quick = el("div", { class: "quick" }, el("span", { class: "status", text: "Las que más empresas activas tienen:" }),
+    ...acts.slice(0, 6).map((a) => el("button", { type: "button", class: "chip", "data-clase": a.clase, text: A.shortActivity(a.nombre, 34) })));
+  const out = el("section", { class: "chosen", "aria-live": "polite" });
+
+  app.replaceChildren(
+    el("header", { class: "story-head", style: "padding-bottom:0" },
+      el("p", { class: "kicker", text: "Herramienta · Actividades" }),
+      el("h1", { text: "Explora una actividad" }),
+      el("p", { class: "dek", text: "Escoge a qué se dedican las empresas y dónde: cuántas están activas, cuántas se crean cada año, cuántas de cada año siguen y cuáles venden más. Sin escribir SQL." }),
+      el("div", { class: "pick" }, el("div", { class: "act" }, input, sugg), el("div", { class: "row" }, sel, seg), quick)),
+    out,
+    readThis(["La actividad es la ", { b: "principal" }, " que la empresa declaró en el registro, con la clasificación CIIU del DANE. Una empresa que hace varias cosas cuenta en una sola."],
+      ["La región es la ", { b: "cámara de comercio" }, " donde está la matrícula: la jurisdicción del registro, no necesariamente donde opera. El registro abierto no trae el municipio."],
+      [{ b: "Activa" }, ` quiere decir que renovó su matrícula en ${Y}. Las creadas en ${Y} van hasta el ${A.date(s.data_through)}.`],
+      ["Los ingresos son los que la empresa reportó a la Superintendencia de Sociedades. Los bancos, las aseguradoras y las sociedades que cotizan en bolsa reportan a la Superintendencia Financiera y no aparecen."]));
+  A.footer(s, { resolution: "todas" });
+  A.reveal(app);
+
+  function showSugg() {
+    const q = norm(input.value);
+    sugg.replaceChildren();
+    if (q.length < 2) return;
+    const words = q.split(" ");
+    const hits = acts.filter((a) => /^\d+$/.test(q) ? a.clase.startsWith(q) : words.every((w) => a.key.includes(w))).slice(0, 8);
+    if (!hits.length) { sugg.append(el("p", { class: "status", text: "Ninguna actividad tiene esas palabras. Prueba con otra, o con el código CIIU." })); return; }
+    for (const a of hits)
+      sugg.append(el("button", { type: "button", "data-clase": a.clase },
+        el("span", {}, el("span", { class: "code", text: a.clase }), a.nombre), el("span", { class: "n", text: `${n(a.activas)} activas` })));
+  }
+  const choose = (clase) => { st.clase = clase; input.value = byCode.get(clase).nombre; sugg.replaceChildren(); render(true); };
+  input.addEventListener("input", showSugg);
+  input.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); sugg.querySelector("button")?.click(); } });
+  for (const box of [sugg, quick]) box.addEventListener("click", (e) => { const b = e.target.closest("button[data-clase]"); if (b) choose(b.dataset.clase); });
+  sel.addEventListener("change", () => { st.camara = sel.value; render(); });
+  seg.addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-k]"); if (!b) return;
+    st.tipo = b.dataset.k;
+    for (const x of seg.children) x.setAttribute("aria-pressed", String(x === b));
+    render();
+  });
+
+  let run = 0;
+  async function render(scroll = false) {
+    if (!st.clase) return;
+    const mine = ++run;
+    history.replaceState(null, "", `#${new URLSearchParams({ clase: st.clase, ...(st.camara && { camara: st.camara }), tipo: st.tipo })}`);
+    input.value = byCode.get(st.clase).nombre;
+    const a = byCode.get(st.clase);
+    const conds = [`sector_code = ${d.lit(st.clase)}`, st.tipo !== "todas" && `is_juridical = ${st.tipo === "juridicas"}`].filter(Boolean);
+    const here = [...conds, st.camara && `codigo_camara = ${d.lit(st.camara)}`].filter(Boolean).join(" AND ");
+    const country = conds.join(" AND ");
+    const place = st.camara ? camName.get(st.camara) : "todo el país";
+    const who = { todas: "empresas", juridicas: "sociedades y entidades", naturales: "comerciantes personas naturales" }[st.tipo];
+    const sqlYears = `SELECT formation_year AS anio, sum(empresas) AS creadas, sum(activas) AS siguen_activas\nFROM explorer\nWHERE ${here} AND formation_year IS NOT NULL\nGROUP BY 1 ORDER BY 1`;
+    const sqlCams = `SELECT codigo_camara, any_value(chamber) AS camara, sum(activas) AS activas\nFROM explorer\nWHERE ${country}\nGROUP BY codigo_camara HAVING sum(activas) > 0\nORDER BY 3 DESC`;
+    const sqlFirms = `SELECT display_name, anio_fiscal, ingresos, is_live\nFROM explorer_firms\nWHERE sector_code = ${d.lit(st.clase)}${st.camara ? ` AND codigo_camara = ${d.lit(st.camara)}` : ""} AND anio_fiscal >= ${fy - 1}\nORDER BY ingresos DESC LIMIT 10`;
+    const sqlMonths = `SELECT mes, sum(empresas) AS creadas\nFROM explorer_months\nWHERE ${here}\nGROUP BY 1 ORDER BY 1`;
+    // Per inhabitant, by region: a chamber's region, and the region's people
+    // (DANE's projection for this year), summed over its departments.
+    const sqlRegion = `WITH cam AS (SELECT codigo, region FROM regions WHERE tipo = 'camara'),
+pob AS (SELECT r.region, sum(p.poblacion) AS poblacion FROM regions r
+        JOIN population p ON p.dp = r.codigo AND p.anio = ${Y}
+        WHERE r.tipo = 'departamento' GROUP BY 1)
+SELECT cam.region, sum(e.activas) AS activas, any_value(pob.poblacion) AS poblacion,
+       100000.0 * sum(e.activas) / any_value(pob.poblacion) AS por_100000
+FROM explorer e JOIN cam ON cam.codigo = e.codigo_camara JOIN pob USING (region)
+WHERE ${country}
+GROUP BY 1 ORDER BY 4 DESC`;
+    out.replaceChildren(el("p", { class: "status", text: "Contando…" }));
+    const [years, byCam, firms, months, regions] = await Promise.all([d.query(sqlYears), d.query(sqlCams),
+      st.tipo === "naturales" ? [] : d.query(sqlFirms), d.query(sqlMonths), d.query(sqlRegion)]);
+    if (mine !== run) return;                              // a newer choice is already drawing
+
+    const y = new Map(years.map((r) => [r.anio, r]));
+    const live = years.reduce((t, r) => t + r.siguen_activas, 0);
+    const liveCountry = byCam.reduce((t, r) => t + r.activas, 0);
+    const made = (k) => y.get(k)?.creadas ?? 0;
+    const head = el("header", {},
+      el("p", { class: "kicker", text: `${a.clase} · ${place}` }),
+      el("h2", { text: A.cap(a.nombre) }),
+      el("div", { class: "meta", style: "margin-top:12px" }, el("span", { class: "chip", text: A.cap(who) }), A.shareButton()));
+    if (!years.length) {
+      out.replaceChildren(head, el("p", { class: "lede", style: "margin-top:18px", text: `No hay ${who} con esta actividad en ${place}.` }));
+      return;
+    }
+    const fact = (big, parts) => el("div", { class: "fact" }, el("p", { class: "big", text: big }), rich("p", {}, parts));
+    const prev = made(Y - 1), prev2 = made(Y - 2);
+    const facts = el("div", { class: "facts x4" },
+      fact(n(live), [`${who} activas: renovaron su matrícula en ${Y}.`]),
+      fact(n(prev), [`se crearon en ${Y - 1}`, prev2 ? `, ${A.signedPct(prev / prev2 - 1)} frente a ${Y - 2} (${n(prev2)}).` : "."]),
+      fact(n(made(Y)), [`se han creado en ${Y}, hasta el ${A.dayMonth(s.data_through)}.`]),
+      st.camara
+        ? fact(share(liveCountry ? live / liveCountry : 0), ["de las ", { b: n(liveCountry) }, ` activas del país en esta actividad están en ${place}.`])
+        : fact(share(live / allLive), ["de todas las empresas activas del país, ", { b: n(allLive) }, ", se dedican a esto."]));
+
+    // Created each year, and how many of each year still renew: the last 30.
+    const span = years.filter((r) => r.anio >= Y - 29 && r.anio <= Y);
+    const f1 = figure({ title: "Cuántas se crean cada año, y cuántas siguen",
+      sub: `La columna entera es lo que se creó ese año; la parte de abajo, las que siguen activas en ${Y}. ${Y} va hasta el ${A.date(s.data_through)}.`,
+      sql: sqlYears, source: "RUES · Confecámaras. Cálculos de AMC." });
+    f1.body.append(A.legend([{ label: `Siguen activas en ${Y}`, color: "var(--accent)" }, { label: "Ya no renuevan", color: "var(--c1)" }]));
+    columns(f1.body, span.map((r) => ({ label: r.anio % 5 === 0 ? String(r.anio) : "", value: r.creadas, part: r.siguen_activas,
+      tip: { title: String(r.anio), rows: [{ label: "Creadas", value: n(r.creadas) }, { label: "Siguen activas", value: n(r.siguen_activas) },
+        { label: "De cada 100", value: n(100 * r.siguen_activas / r.creadas) }] } })),
+      { label: `Empresas creadas por año en ${a.nombre}, ${place}`, labelEvery: () => 1 });
+    f1.fig.append(tableView(`Empresas creadas y activas por año: ${a.nombre}, ${place}`, ["Año", "Creadas", "Siguen activas", "De cada 100"],
+      years.slice().reverse().map((r) => [String(r.anio), n(r.creadas), n(r.siguen_activas), n(100 * r.siguen_activas / r.creadas)])));
+
+    // Month by month, the last 24: what opened last month, without SQL.
+    const byMonth = new Map(months.map((r) => [r.mes.slice(0, 7), r.creadas]));
+    const last = s.data_through.slice(0, 7), [ly, lm] = last.split("-").map(Number);
+    const m24 = Array.from({ length: 24 }, (_, i) => { const dt = new Date(Date.UTC(ly, lm - 24 + i, 1)); return dt.toISOString().slice(0, 7); });
+    const mLabel = (k) => `${MES[+k.slice(5) - 1]} ${k.slice(0, 4)}`;
+    const prevM = m24[22];
+    const f1m = figure({ title: `Mes a mes: ${n(byMonth.get(prevM) ?? 0)} en ${mLabel(prevM)}`,
+      sub: `Empresas creadas cada mes, los últimos 24. ${A.cap(mLabel(last))} va hasta el ${A.dayMonth(s.data_through)}.`,
+      sql: sqlMonths, source: "RUES · Confecámaras. Cálculos de AMC." });
+    columns(f1m.body, m24.map((k) => ({ label: k.endsWith("-01") || k === m24[0] ? mLabel(k) : "", value: byMonth.get(k) ?? 0,
+      color: k === last ? "var(--other)" : null, tip: { title: mLabel(k), rows: [{ label: "Creadas", value: n(byMonth.get(k) ?? 0) }] } })),
+      { label: `Empresas creadas por mes en ${a.nombre}, ${place}`, labelEvery: () => 1 });
+    f1m.fig.append(tableView(`Empresas creadas por mes: ${a.nombre}, ${place}`, ["Mes", "Creadas"],
+      m24.slice().reverse().map((k) => [mLabel(k), n(byMonth.get(k) ?? 0)])));
+
+    // Where the live ones are: every chamber, the chosen one marked.
+    const top = byCam.slice(0, 12);
+    const chosen = st.camara ? byCam.find((r) => r.codigo_camara === st.camara) : null;
+    if (chosen && !top.includes(chosen)) top.push(chosen);
+    const f2 = figure({ title: "Dónde están las activas", sub: `Por cámara de comercio, de ${n(liveCountry)} ${who} activas del país en esta actividad.`,
+      sql: sqlCams, source: "RUES · Confecámaras. Cálculos de AMC." });
+    barList(f2.body, top.map((r) => ({ label: A.title(r.camara), value: r.activas, strong: r === chosen, dim: chosen && r !== chosen })),
+      { unit: "Activas", labelWidth: 220 });
+    f2.fig.append(tableView(`Empresas activas por cámara: ${a.nombre}`, ["Cámara", "Activas", "Del país"],
+      byCam.map((r) => [A.title(r.camara), n(r.activas), pct(r.activas / liveCountry)])));
+
+    // Per 100,000 inhabitants, by region: where the activity is dense, not just big.
+    // Ranked only where 20 or more are live: below that one company moves the rate.
+    const MIN = 20, ranked = regions.filter((r) => r.activas >= MIN);
+    const myRegion = st.camara ? regions.find((r) => r.region === regionOf.get(st.camara)) : null;
+    const f2p = figure({ title: ranked.length ? `Por cada 100.000 habitantes: ${A.title(ranked[0].region)} primero` : "Por cada 100.000 habitantes",
+      sub: `${A.cap(who)} activas por cada 100.000 habitantes de cada región, con la población que el DANE proyecta para ${Y}. La región es la de la cámara. En la gráfica, solo regiones con ${MIN} o más activas: con menos, una sola empresa mueve la cifra; la tabla las trae todas.`,
+      sql: sqlRegion, source: "RUES · Confecámaras y DANE (proyecciones de población). Cálculos de AMC." });
+    const topR = ranked.slice(0, 12);
+    if (myRegion && myRegion.activas >= MIN && !topR.includes(myRegion)) topR.push(myRegion);
+    barList(f2p.body, topR.map((r) => ({ label: A.title(r.region), value: r.por_100000, strong: r === myRegion, dim: myRegion && r !== myRegion })),
+      { unit: "Por 100.000 habitantes", labelWidth: 220, format: (v) => A.n1(v) });
+    f2p.fig.append(tableView(`Activas por cada 100.000 habitantes, por región: ${a.nombre}`, ["Región", "Activas", "Habitantes", "Por 100.000"],
+      regions.map((r) => [A.title(r.region), n(r.activas), n(r.poblacion), A.n1(r.por_100000)])));
+
+    const blocks = [head, facts, f1.fig, f1m.fig, f2.fig, f2p.fig];
+    if (st.tipo !== "naturales") {
+      const f3 = figure({ title: "Las que más venden", wide: false,
+        sub: `Ingresos de su último año reportado (${fy - 1} o ${fy}), entre las que reportan a la Superintendencia de Sociedades.`,
+        sql: sqlFirms, source: "Superintendencia de Sociedades (estados financieros NIIF) y RUES · Confecámaras. Cálculos de AMC." });
+      if (!firms.length) f3.body.append(el("p", { class: "lede", text: `Ninguna empresa de esta actividad en ${place} reportó estados financieros en ${fy - 1} o ${fy}. Solo reportan las obligadas, unas 30.000 al año: eso no dice que sean pequeñas.` }));
+      else {
+        f3.body.append(el("div", { class: "firms" }, ...firms.map((r, i) => el("div", { class: "firm" },
+          el("span", { class: "k", text: String(i + 1) }),
+          el("a", { href: `../historias/tu-empresa/index.html#nit=${r.nit}`, text: r.display_name }),
+          el("span", { class: "v", text: `${money(r.ingresos)} de pesos` }),
+          el("span", { class: "s", text: `Ingresos de ${r.anio_fiscal}${r.is_live ? "" : " · no renovó en " + Y}` })))));
+        f3.fig.append(tableView(`Las que más venden: ${a.nombre}, ${place}`, ["Empresa", "Año", "Ingresos (millones de pesos)"],
+          firms.map((r) => [r.display_name, String(r.anio_fiscal), n(r.ingresos / 1e3)])));
+      }
+      blocks.push(f3.fig);
+    }
+    out.replaceChildren(...blocks);
+    A.reveal(out);
+    if (scroll) out.scrollIntoView({ behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "start" });
+  }
+  if (st.clase) render();
+} catch (e) {
+  A.fail(app, e, "el explorador");
+}
+</script>
+</body>
+</html>

historias/abril-2020/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/abril-2020/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/abril-2020/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>
@@ -71,7 +73,7 @@ try {
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: A.dayMonth(recovered) }),
       rich("p", {}, ["Ese día, el ritmo semanal de creación de empresas volvió a ser el de las mismas fechas de 2019: ", { b: `${Math.round((A.parseDate(recovered) - A.parseDate(lockStart)) / 864e5)} días` }, " después de empezar la cuarentena."])),
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: A.signedPct(top.ch) }),
-      rich("p", {}, ["Las empresas de ", { b: A.shortActivity(top.descripcion).toLowerCase() }, ` pasaron de ${n(top.anio_2019)} creadas en 2019 a ${n(top.anio_2020)} en 2020, el mayor salto de cualquier actividad.`])));
+      rich("p", {}, ["Las empresas de ", { b: A.activityName(top.descripcion).toLowerCase() }, ` pasaron de ${n(top.anio_2019)} creadas en 2019 a ${n(top.anio_2020)} en 2020, el mayor salto de cualquier actividad.`])));
 
   // ------------------------------------------------------------- 1. 2020 vs 2019
   const days20 = keys.filter((k) => k >= "2020-01-01" && k < "2021-01-01");
@@ -171,7 +173,7 @@ try {
     prose({ h2: "No todos se detuvieron igual" },
       ["En abril y mayo de 2020 se crearon ", { b: A.signedPct(hosp.ch).replace("−", "") + " menos" }, " empresas de alojamiento y comida que un año antes. El transporte y almacenamiento, en cambio, cayó apenas un ", { b: pct(Math.abs(trans.ch)) }, `: la logística siguió funcionando, y sobre el año completo terminó ${trans.chy > 0 ? "creciendo" : "cayendo"} un ${pct(Math.abs(trans.chy))}. El comercio cerró 2020 ${com.chy >= 0 ? "por encima" : "por debajo"} de 2019.`]),
     f3.fig,
-    prose(["Mirando la actividad exacta, la pandemia se ve con nitidez. Se crearon más empresas de ", { b: A.shortActivity(top.descripcion).toLowerCase() }, ` (${A.signedPct(top.ch)})`,
+    prose(["Mirando la actividad exacta, la pandemia se ve con nitidez. Se crearon más empresas de ", { b: A.activityName(top.descripcion).toLowerCase() }, ` (${A.signedPct(top.ch)})`,
       web ? [" y de ", { b: "comercio por internet" }, ` (${A.signedPct(web.ch)})`] : "", ". Y una pareja lo resume: las empresas de ", { b: "bares y expendios de bebidas para consumo en el lugar" }, ` ${bars ? A.signedPct(bars.ch) : ""}, y las de `, { b: "tiendas de bebidas y tabaco" }, ` ${shops ? A.signedPct(shops.ch) : ""}.`].flat()),
     f4.fig,
     prose("El golpe tampoco fue igual en todas partes. Las cámaras con más actividad en abril y mayo cayeron, pero unas mucho más que otras."),

historias/carrera/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/carrera/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/carrera/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/concentracion/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/concentracion/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/concentracion/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>
@@ -128,6 +130,7 @@ try {
     prose(["Y arriba casi no hay cambios. De las ", { b: `${n(topN)} empresas más grandes de ${P.desde}` }, `, el ${pct(stayed)} seguía en el 10% más grande en ${yr}.`]),
     f5.fig,
     readThis(["Solo están las empresas ", { b: "obligadas a reportar" }, " a la Superintendencia de Sociedades, y casi todas las cifras son de las que reportaron todos los años: las que cerraron, se fusionaron o dejaron de estar obligadas no están. No dice cómo se reparte el ingreso entre todas las empresas del país, que en su mayoría no reportan."],
+      ["Tampoco están las más grandes de todas: los bancos, las aseguradoras y las sociedades que cotizan en bolsa, como Ecopetrol o Bancolombia, reportan a la ", { b: "Superintendencia Financiera" }, ". El «10% más grande» es el de las empresas que reportan a la de Sociedades."],
       ["Los ingresos son los del ", { b: "reporte propio" }, " de cada empresa: un grupo empresarial aparece repartido entre sus sociedades, y una empresa que absorbe a otra crece aunque nada haya cambiado. Sumar ingresos no es medir la economía: una venta entre dos de ellas cuenta dos veces."],
       ["Los años que una empresa reportó en otra unidad, en pesos en vez de miles, se dejan por fuera. No hay empresas con nombre: todas las cifras son de grupos."]),
     moreStories("concentracion"));

historias/conexiones/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/conexiones/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/conexiones/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/depuraciones/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/depuraciones/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/depuraciones/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/duracion/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/duracion/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/duracion/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>
@@ -54,9 +56,9 @@ try {
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: pct(T.soc) }),
       rich("p", {}, ["de las ", { b: "sociedades" }, ` creadas entre ${from} y ${to} seguía renovando tres años después; de los comerciantes personas naturales, el `, { b: pct(T.nat) }, "."])),
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: pct(SOC[0].rate) }),
-      rich("p", {}, ["de las sociedades de ", { b: A.shortActivity(SOC[0].descripcion, 70).toLowerCase() }, " seguía renovando: la actividad más estable entre las sociedades."])),
+      rich("p", {}, ["de las sociedades de ", { b: A.activityName(SOC[0].descripcion).toLowerCase() }, " seguía renovando: la actividad más estable entre las sociedades."])),
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: pct(NAT[NAT.length - 1].rate) }),
-      rich("p", {}, ["de los comerciantes de ", { b: A.shortActivity(NAT[NAT.length - 1].descripcion, 70).toLowerCase() }, " seguía renovando: la actividad con menos continuidad."])));
+      rich("p", {}, ["de los comerciantes de ", { b: A.activityName(NAT[NAT.length - 1].descripcion).toLowerCase() }, " seguía renovando: la actividad con menos continuidad."])));
 
   const f1 = figure({ title: "Sociedades: las actividades más y menos estables",
     sub: `Diferencia, en puntos porcentuales, entre el porcentaje de sociedades de cada actividad que seguía renovando tres años después y el promedio de las sociedades (${pct(T.soc)}). Las diez más altas y las diez más bajas.`, sql: st.sql("clases") });

historias/gacelas/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/gacelas/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/gacelas/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/gobiernos/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/gobiernos/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/gobiernos/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/index.html

@@ -19,6 +19,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../assets/amc.css">
 <link rel="stylesheet" href="../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando las historias…</p></main>

historias/latido/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/latido/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/latido/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/margenes/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/margenes/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/margenes/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/marzo/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/marzo/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/marzo/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/migracion/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/migracion/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/migracion/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/negocios/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/negocios/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/negocios/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>
@@ -60,11 +62,11 @@ try {
 
   const findings = el("div", { class: "findings" },
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: n(top.activas) }),
-      rich("p", {}, ["empresas activas se dedican a ", { b: A.shortActivity(top.descripcion, 90).toLowerCase() }, `: la actividad más común del país, el ${A.pct1(top.activas / total)} de todas.`])),
+      rich("p", {}, ["empresas activas se dedican a ", { b: A.activityName(top.descripcion).toLowerCase() }, `: la actividad más común del país, el ${A.pct1(top.activas / total)} de todas.`])),
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: pct(top10 / total) }),
       rich("p", {}, ["de las empresas activas caben en solo ", { b: "diez actividades" }, ` de las ${n(K.length)}. El resto se reparte en una cola larga de negocios.`])),
     el("div", { class: "finding reveal" }, el("p", { class: "n", text: `${A.n1(churn[0].ratio * 100)}%` }),
-      rich("p", {}, [`es la proporción entre las empresas de `, { b: A.shortActivity(churn[0].descripcion, 70).toLowerCase() }, ` creadas en ${year} y las que hay activas: la actividad que más rápido se renueva.`])));
+      rich("p", {}, [`es la proporción entre las empresas de `, { b: A.activityName(churn[0].descripcion).toLowerCase() }, ` creadas en ${year} y las que hay activas: la actividad que más rápido se renueva.`])));
 
   const f1 = figure({ title: "Todas las empresas activas del país, por actividad",
     sub: "El área es el número de empresas activas. El color, qué parte son comerciantes personas naturales: más intenso, más personas naturales.", sql: st.sql("clases") });

historias/nombres/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/nombres/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/nombres/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/pandemia/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/pandemia/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/pandemia/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/peso/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/peso/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/peso/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>
@@ -136,6 +138,7 @@ try {
       `. En conjunto, las que más suman son las de ${topSum.franja} años: el ${pct(topSum.ingresos / sum(EI, "ingresos"))} de todos los ingresos.`]),
     f5.fig,
     readThis(["Solo están las empresas ", { b: "obligadas a reportar" }, " a la Superintendencia de Sociedades. No son una muestra: una empresa que no reporta no es pequeña, es desconocida. Los comerciantes personas naturales no reportan, y por eso la comparación es con las sociedades activas."],
+      ["Tampoco están las más grandes de todas: los bancos, las aseguradoras y las sociedades que cotizan en bolsa, como Ecopetrol o Bancolombia, reportan a la ", { b: "Superintendencia Financiera" }, ". «Las que más venden» son, aquí, las que más venden entre las que reportan a la de Sociedades."],
       ["Los ingresos son los del ", { b: "reporte propio" }, " de cada empresa, no los consolidados de su grupo: un grupo empresarial aparece repartido entre sus sociedades. Y sumar ingresos de empresas no es medir la economía: una venta entre dos de ellas cuenta dos veces."],
       ["La cámara de comercio es la del ", { b: "domicilio" }, " de la empresa, no la de los lugares donde vende. La edad se cuenta desde su primera matrícula."]),
     moreStories("peso"));

historias/piramide/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/piramide/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/piramide/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/regiones-tiempo/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/regiones-tiempo/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/regiones-tiempo/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/regiones/index.html

@@ -40,6 +40,8 @@ table.all tr.row:hover td { background: var(--surface-2); }
 table.all tr.on td { background: var(--accent-soft); font-weight: 600; }
 .tablewrap { overflow: auto; max-height: 520px; }
 </style>
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/regiones/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/regiones/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando las regiones…</p></main>
@@ -188,7 +190,7 @@ try {
   drawTable();
   const all = el("section", { class: "block" }, el("div", { class: "sec-head" }, el("div", {}, el("p", { class: "kicker", text: "Comparar" }),
     el("h2", { text: "Todas las cámaras de comercio" }), el("p", { text: "Ordena por cualquier columna y elige una fila para ver su perfil." }))),
-    el("div", { class: "card", style: "padding:0" }, el("div", { class: "tablewrap" }, table)));
+    el("div", { class: "card", style: "padding:0" }, el("div", { class: "tablewrap", tabindex: "0", role: "region", "aria-label": "Tabla de regiones" }, table)));
 
   sel.addEventListener("change", () => render(sel.value));
   app.replaceChildren(head, view, all, moreStories("regiones"));

historias/sas/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/sas/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/sas/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/software/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/software/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/software/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la historia…</p></main>

historias/tu-empresa/index.html

@@ -36,7 +36,7 @@
 .profile .pname { font: 800 clamp(28px, 4.4vw, 44px)/1.08 var(--display); letter-spacing: -.03em; margin: 8px 0 0; }
 .profile .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
 .facts2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
-@media (max-width: 860px) { .facts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 900px) { .facts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 .ctx { display: grid; gap: 12px; margin: 22px 0 0; }
 .ctx .c { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
 .ctx .c .big { font: 800 34px/1 var(--display); letter-spacing: -.03em; margin: 0 0 6px; }
@@ -47,6 +47,8 @@
 .chip.ok { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
 .chip.off { background: var(--surface-2); color: var(--ink-2); }
 </style>
+<link rel="canonical" href="https://amc.clyxconsulting.com/historias/tu-empresa/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/historias/tu-empresa/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando…</p></main>
@@ -179,7 +181,7 @@ try {
       if (r.actividad_vivas != null) {
         const q = { live: r.actividad_vivas, here: r.actividad_camara_vivas };
         out.push(el("div", { class: "c reveal" }, el("p", { class: "big", text: n(q.live) }),
-          rich("p", {}, ["empresas activas en todo el país tienen su misma actividad", act ? [" (", { b: A.shortActivity(act.descripcion, 70).toLowerCase() }, ")"] : "", `; ${n(q.here)} de ellas en ${A.title(r.chamber)}.`].flat())));
+          rich("p", {}, ["empresas activas en todo el país tienen su misma actividad", act ? [" (", { b: A.activityName(act.descripcion).toLowerCase() }, ")"] : "", `; ${n(q.here)} de ellas en ${A.title(r.chamber)}.`].flat())));
       }
       return out;
     };
@@ -205,7 +207,7 @@ try {
     const box = el("section", { class: "block", style: "padding-top:28px" },
       el("p", { class: "kicker", text: "Superintendencia de Sociedades" }), el("h3", { text: "Estados financieros" }));
     if (!rows.length) {
-      box.append(el("p", { class: "lede", text: "Esta empresa no está entre las que reportan estados financieros a la Superintendencia de Sociedades. Eso no dice nada de su tamaño: solo las obligadas a reportar aparecen en estos datos." }));
+      box.append(el("p", { class: "lede", text: "Esta empresa no está entre las que reportan estados financieros a la Superintendencia de Sociedades. Eso no dice nada de su tamaño: solo las obligadas a reportar aparecen en estos datos. Los bancos, las aseguradoras y las sociedades que cotizan en bolsa reportan a la Superintendencia Financiera, y tampoco están." }));
       return box;
     }
     const last = rows[rows.length - 1];
@@ -213,7 +215,7 @@ try {
     if (r.ingresos_puesto != null && r.ingresos_anio === last.anio_fiscal) {
       const q = { n: r.ingresos_entre, above: r.ingresos_puesto - 1 };
       box.append(rich("p", { class: "lede" }, [`En ${last.anio_fiscal} reportó ingresos por `, { b: `${money(last.ingresos)} de pesos` },
-        `. Entre las ${n(q.n)} empresas de ${(sec?.label || "su sector").toLowerCase()} que reportaron ese año, es la `, { b: `número ${n(q.above + 1)}` }, " por ingresos."]));
+        `. Entre las ${n(q.n)} empresas de ${(sec?.label || "su sector").toLowerCase()} que reportaron ese año a la Superintendencia de Sociedades, es la `, { b: `número ${n(q.above + 1)}` }, " por ingresos."]));
     }
     const max = Math.max(...rows.map((x) => x.ingresos || 0));
     const card = el("div", { class: "card" });
@@ -231,7 +233,7 @@ try {
     }
     card.append(grid, A.tableView("Estados financieros por año, en millones de pesos", ["Año", "Ingresos", "Ganancia", "Activos"],
       rows.map((x) => [String(x.anio_fiscal), ...[x.ingresos, x.ganancia, x.activos].map((v) => v == null ? "—" : n(v / 1e3))])),
-      el("p", { class: "lede", style: "margin:12px 0 0;font-size:13.5px", text: "Ingresos de cada año fiscal, del reporte propio de la empresa (no el consolidado de su grupo). Fuente: estados financieros NIIF, Superintendencia de Sociedades, datos.gov.co." }));
+      el("p", { class: "lede", style: "margin:12px 0 0;font-size:13.5px", text: "Ingresos de cada año fiscal, del reporte propio de la empresa (no el consolidado de su grupo). Los activos de 2017 vienen, casi siempre, del reporte de 2018, que repite el año anterior: la fuente casi no publicó los de ese año. Fuente: estados financieros NIIF, Superintendencia de Sociedades, datos.gov.co." }));
     box.append(card);
     return box;
   }

index.html

@@ -19,6 +19,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="assets/amc.css">
 <link rel="stylesheet" href="assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando el panorama…</p></main>
@@ -56,6 +58,7 @@ function hero(s) {
     note,
     el("div", { style: "display:flex;gap:10px;flex-wrap:wrap;margin-top:24px" },
       el("a", { class: "btn primary", href: "historias/index.html" }, "Leer las historias", A.icon("arrow")),
+      el("a", { class: "btn", href: "explorar/index.html" }, "Explorar una actividad"),
       el("a", { class: "btn", href: "consulta/index.html" }, A.icon("sql"), "Consultar con SQL")),
     ribbon);
 }
@@ -246,11 +249,11 @@ function changes(s) {
 function explore(s) {
   return el("section", { class: "block", id: "explorar" },
     el("div", { class: "sec-head" }, el("div", {}, el("p", { class: "kicker", text: "Los datos" }), el("h2", { text: "Haz tus propias preguntas" }),
-      el("p", { text: "Los mismos datos que usan las historias, empresa por empresa, para consultar en tu navegador o descargar." }))),
+      el("p", { text: "Los mismos datos que usan las historias, empresa por empresa: sin escribir código, con SQL en tu navegador o descargados." }))),
     el("div", { class: "cta" },
-      el("a", { class: "primary", href: "consulta/index.html" }, el("div", { class: "t", text: "Consulta SQL →" }), el("div", { class: "d", text: `${A.words(s.headline.companies)} de empresas, en tu navegador, sin instalar nada` })),
-      el("a", { href: "metodologia/index.html#datos" }, el("div", { class: "t", text: "Datos abiertos" }), el("div", { class: "d", text: "Archivos Parquet con licencia CC BY-SA 4.0, para cualquier herramienta" })),
-      el("a", { href: "metodologia/index.html" }, el("div", { class: "t", text: "Metodología" }), el("div", { class: "d", text: "De dónde salen las cifras, qué significan y qué no se puede concluir" }))));
+      el("a", { class: "primary", href: "explorar/index.html" }, el("div", { class: "t", text: "Explorar una actividad →" }), el("div", { class: "d", text: "Cuántas empresas hay en tu actividad y tu región, cuántas se crean cada mes y cuáles venden más. Sin SQL." })),
+      el("a", { href: "consulta/index.html" }, el("div", { class: "t", text: "Consulta SQL →" }), el("div", { class: "d", text: `${A.words(s.headline.companies)} de empresas, en tu navegador, sin instalar nada` })),
+      el("a", { href: "metodologia/index.html#datos" }, el("div", { class: "t", text: "Datos abiertos" }), el("div", { class: "d", text: "Archivos Parquet con licencia CC BY-SA 4.0, para cualquier herramienta" }))));
 }
 
 function trust(s) {

metodologia/comparacion/index.html

@@ -20,6 +20,8 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="../../assets/amc.css">
 <link rel="stylesheet" href="../../assets/nav.css">
+<link rel="canonical" href="https://amc.clyxconsulting.com/metodologia/comparacion/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/metodologia/comparacion/">
 </head>
 <body>
 <main class="wrap" id="app"><p class="loading">Cargando la comparación…</p></main>

metodologia/index.html

@@ -5,6 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Metodología · AMC</title>
 <meta name="description" content="De dónde vienen los datos, qué se hizo con ellos, qué significa cada cifra y cómo descargarlos: la ficha metodológica de Analíticas Mercantiles Colombianas.">
+<meta property="og:title" content="Metodología de Analíticas Mercantiles Colombianas">
+<meta property="og:description" content="De dónde vienen los datos, qué se hizo con ellos, qué significa cada cifra y cómo descargarlos.">
+<meta property="og:type" content="article">
 <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
 <meta property="og:image" content="https://amc.clyxconsulting.com/assets/og/inicio.png">
 <meta property="og:image:width" content="1200">
@@ -82,7 +85,7 @@ ol.steps li b { display: block; }
 .facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
 .facts th { width: 38%; color: var(--ink-2); font-weight: 500; }
 /* On a phone the label goes above its value: side by side, each value wrapped to four lines. */
-@media (max-width: 540px) {
+@media (max-width: 560px) {
   .facts tr { display: block; border-bottom: 1px solid var(--border); }
   .facts tr:last-child { border-bottom: 0; }
   .facts th, .facts td { display: block; width: auto; border-bottom: 0; }
@@ -117,6 +120,8 @@ footer { padding: 0 0 48px; color: var(--muted); font-size: 13px; }
 
 @media (max-width: 560px) { .sm-hide { display: none; } }
 </style>
+<link rel="canonical" href="https://amc.clyxconsulting.com/metodologia/">
+<meta property="og:url" content="https://amc.clyxconsulting.com/metodologia/">
 </head>
 <body>
 <nav class="top" aria-label="Principal">
@@ -170,6 +175,8 @@ footer { padding: 0 0 48px; color: var(--muted); font-size: 13px; }
       <p>Toda empresa, comerciante y entidad sin ánimo de lucro de Colombia se registra en una cámara de comercio. Las cámaras consolidan esos registros en el <b>RUES</b>, que Confecámaras publica como dato abierto en <a href="https://www.datos.gov.co" target="_blank" rel="noopener">datos.gov.co</a> (conjunto <code>c82u-588k</code>): una fila por matrícula, unos 9,4 millones, con 36 columnas.</p>
       <p>El sistema revisa la fuente cada día y descarga una copia nueva solo cuando cambia, lo que ocurre aproximadamente una vez al mes. Cada copia se verifica contra un conteo independiente de filas antes de usarse. La fuente se publica con un rezago de unos diez días: el corte actual contiene hechos registrados hasta la fecha que indica la ficha técnica, no hasta el día de la descarga.</p>
       <p id="estados"><b>Una segunda fuente, para el tamaño.</b> El registro no distingue una empresa grande de una pequeña. Las empresas obligadas a reportar a la <b>Superintendencia de Sociedades</b>, unas 30.000 al año, le envían sus estados financieros NIIF de fin de ejercicio, que la Superintendencia publica en datos.gov.co (conjuntos <code>prwj-nzxa</code> y <code>pfdp-zks5</code>). De ellos se toman cinco cifras por empresa y año: ingresos, ganancia, activos, pasivos y patrimonio, en miles de pesos. Se unen al registro por el NIT, y más del 99,9 % encuentra su empresa. Se revisan cada semana y se publican en la tabla <code>financials</code>.</p>
+      <p id="estados-faltan"><b>Quiénes no están.</b> Los bancos, las aseguradoras y las demás entidades financieras, y las sociedades que emiten acciones o bonos en la bolsa, reportan a la <b>Superintendencia Financiera</b>, no a la de Sociedades, y no aparecen en estos datos. Entre ellas están algunas de las empresas más grandes del país, como Ecopetrol, Bancolombia o Almacenes Éxito. Por eso, cuando una página ordena o suma ingresos, habla de las empresas que reportan a la Superintendencia de Sociedades, no de las más grandes de Colombia.</p>
+      <p><b>Un año incompleto en la fuente, completado con el siguiente.</b> Para 2017 la Superintendencia publicó el balance de muy pocas empresas: unas 200 de 19.600. Pero cada reporte trae también el año anterior para comparar, así que el balance de 2017 se toma del reporte de 2018 cuando la empresa lo presentó y cuadra exactamente: unas 16.500 empresas. Lo mismo se hace con las unas 850 de 2020 a las que les faltaba. La columna <code>balance_origen</code> dice de dónde viene cada balance, porque una empresa puede corregir el año anterior al reportarlo. Los ingresos y la ganancia son siempre los del reporte de ese mismo año.</p>
       <p>De cada empresa se toma su <b>reporte propio</b>, individual o separado, nunca el consolidado, que suma las cifras de sus subordinadas. Si presentó más de uno para el mismo año, se toma el más reciente, y si cierra cuentas cada seis meses, los ingresos y la ganancia del año suman los dos semestres. Cada estado trae también las cifras del año anterior para comparar, y las comprobaciones verifican que coincidan con las que la empresa reportó ese año.</p>
     </section>
 
@@ -193,6 +200,8 @@ footer { padding: 0 0 48px; color: var(--muted); font-size: 13px; }
         <dd>El registro de una empresa o comerciante en una cámara de comercio. Es la unidad de la fuente: una fila del RUES.</dd>
         <dt>Empresa</dt>
         <dd>Una persona jurídica o un comerciante persona natural, con todas sus matrículas reunidas. Es la unidad de este panorama: una empresa con matrículas en tres cámaras cuenta una vez.</dd>
+        <dt id="nueva">Empresa nueva</dt>
+        <dd>La que se matricula <b>por primera vez</b>, en cualquier cámara. Su año de creación es el de su primera matrícula. Por eso un comerciante que cerró un negocio y abre otro con su misma cédula no cuenta como empresa nueva: es la misma empresa, que vuelve.</dd>
         <dt id="activa">Empresa activa</dt>
         <dd>La que <b>renovó su matrícula mercantil en el año en curso</b>. Es la única señal de actividad que la fuente registra de forma verificable. No es lo mismo que el estado “ACTIVA” de la matrícula (ver los matices).</dd>
         <dt>Persona jurídica y persona natural</dt>
@@ -260,7 +269,7 @@ footer { padding: 0 0 48px; color: var(--muted); font-size: 13px; }
       <h2>Lo que estos datos no pueden decir</h2>
       <p><b>Cuánto dura una empresa.</b> La fuente guarda solo el último año en que cada empresa renovó, no la historia de sus renovaciones. Se puede saber cuántas empresas creadas en un año siguen renovando hoy, pero no calcular con rigor cuánto tiempo sobreviven (<a href="#supervivencia">por qué</a>).</p>
       <p><b>Dónde está o cómo contactarla.</b> El RUES abierto no publica direcciones, municipios, teléfonos ni correos. La ubicación disponible es la cámara de comercio.</p>
-      <p><b>El tamaño de la mayoría de las empresas.</b> Los ingresos y activos solo existen para las empresas que reportan a la Superintendencia de Sociedades, que no son una muestra: son las obligadas a reportar, en su mayoría grandes y medianas. Una empresa sin estados financieros no es pequeña: no se sabe. Y ninguna fuente aquí mide empleados.</p>
+      <p><b>El tamaño de la mayoría de las empresas.</b> Los ingresos y activos solo existen para las empresas que reportan a la Superintendencia de Sociedades, que no son una muestra: son las obligadas a reportar, en su mayoría grandes y medianas. Una empresa sin estados financieros no es pequeña: no se sabe. Las más grandes del sector financiero y de la bolsa reportan a otra superintendencia y tampoco están (<a href="#estados-faltan">quiénes</a>). Y ninguna fuente aquí mide empleados.</p>
       <p><b>Quién es cada comerciante persona natural.</b> Por decisión deliberada: ver privacidad.</p>
     </section>
 
@@ -293,11 +302,11 @@ footer { padding: 0 0 48px; color: var(--muted); font-size: 13px; }
       <h3>En Power BI</h3>
       <p class="muted">Descarga el archivo y usa <i>Obtener datos → Parquet</i>.</p>
       <h3>En Python</h3>
-<pre><code>import duckdb  # pip install duckdb
+<pre tabindex="0"><code>import duckdb  # pip install duckdb
 url = "https://huggingface.co/datasets/clyxconsultingdev/amc-rues/resolve/main/data/companies.parquet"
 duckdb.sql(f"SELECT chamber, count(*) AS activas FROM '{url}' WHERE is_live GROUP BY 1 ORDER BY 2 DESC").show()</code></pre>
       <h3>En R</h3>
-<pre><code>library(duckdb)  # install.packages("duckdb")
+<pre tabindex="0"><code>library(duckdb)  # install.packages("duckdb")
 con &lt;- dbConnect(duckdb())
 url &lt;- "https://huggingface.co/datasets/clyxconsultingdev/amc-rues/resolve/main/data/companies.parquet"
 dbGetQuery(con, sprintf("SELECT section, count(*) AS activas FROM '%s' WHERE is_live GROUP BY 1", url))</code></pre>

robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /assets/og/render.html
+
+Sitemap: https://amc.clyxconsulting.com/sitemap.xml

sitemap.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<url><loc>https://amc.clyxconsulting.com/boletin/2026-09/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/boletin/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/boletin/ultimo/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/consulta/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/explorar/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/abril-2020/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/carrera/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/concentracion/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/conexiones/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/depuraciones/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/duracion/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/gacelas/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/gobiernos/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/latido/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/margenes/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/marzo/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/migracion/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/negocios/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/nombres/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/pandemia/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/peso/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/piramide/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/regiones-tiempo/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/regiones/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/sas/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/software/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/historias/tu-empresa/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/metodologia/comparacion/</loc></url>
+<url><loc>https://amc.clyxconsulting.com/metodologia/</loc></url>
+</urlset>