:root{
  --paper:#FAF5EC;--card:#FFFFFF;--bd:#E8DECC;--bd2:#D9CDB4;--soft:#F4EDDD;
  --ink:#21252C;--sec:#5B6472;
  /* ⛔ #867F6E hasta el 2026-09-06: daba **3,41-3,98** de contraste segun el fondo, por debajo
     del 4,5 que WCAG pide para texto normal. No es un gris decorativo: pinta rotulos, unidades,
     fechas de sello y notas al pie. Medido sobre los 26 moldes, era la causa de ~600 de los
     1.017 nodos que fallaban, todos en esta piel. */
  /* Re-medido desde `master` el 2026-09-07 sobre `/trabajo/`, que llego al mismo token por
     otro camino: el valor nuevo da **5,62 sobre la tarjeta blanca y 5,17 sobre el papel**. */
  --dim:#6F6A5C;
  /* el gris del rol de la firma, declarado aparte por la misma razon que en la piel oscura:
     para que no dependa de que `.cierre-zone` mapee `--dim` al mismo valor. Hoy coinciden. */
  --firma-rol-tx:#6F6A5C;
  /* accent celeste brand (decisión usuario 2026-06-21): medio-oscuro para resaltar sobre el claro.
     Todo el celeste sale de acá. El ámbar semántico (probable/warning/expectativa) NO es brand. */
  /* ⛔ #2E7BC4 daba **4,42** y fallaba por 0,08. En esta piel `--ac` no es solo fondo: los
     enlaces la usan como color de texto, asi que arrastraba 185 nodos en las paginas de
     trabajo. El valor nuevo es el que `--acink` tenia, que ya estaba elegido para texto
     de acento sobre claro. */
  --ac:#1E6FB8;            /* fondo de acento (sec-h, langsw) — texto blanco encima */
  --on-ac:#fff;            /* texto SOBRE el acento (botones): blanco sobre el azul medio de esta piel */
  --acink:#175E9E;         /* texto/link de acento sobre el claro — un escalon por debajo de
                              `--ac`, para que sigan siendo dos niveles y no uno */
  --ac-rgb:30,111,184;     /* tints brand: rgba(var(--ac-rgb),a) — sigue a `--ac` */
  --ac-soft:#EAF3FB;       /* fondo celeste muy claro (hover, puerta emprender) */
  --teal:#0C7A6D;--bad:#B3261E;
  --ver:#1B7A4E;--pro:#8F6400;--est:#6D4FC4;--tes:#2B6CB0;
  /* `--prv` — el recorrido PROVEEDOR (P5, 2026-08-24). Mismo token que en la piel oscura, con el
     valor que esta necesita: sobre papel claro el #f472b6 de la oscura no llega a 4,5 de contraste,
     asi que baja a un magenta mas profundo. El porque de que sea un color NUEVO y no uno de la
     escala de sellos esta escrito una sola vez, en `despegue.css`, y no se repite. */
  --prv:#B4276E;--prv-rgb:180,39,110;
  /* companeros `-rgb` — 2026-08-17. La piel OSCURA ya resolvia asi sus tintes (81 usos de
     `rgba(var(--x-rgb),a)`, U7-bis del 15-ago) y esta tenia uno solo: por eso repetia el rgb a mano
     39 veces, y una sola de esas familias era el MISMO teal escrito con 10 alfas distintos. El alfa
     sigue libre; lo que deja de estar suelto es el COLOR, que ahora cuelga del token de al lado.
     ⚠️ El valor tiene que ser EL MISMO que el solido de arriba, o el tinte y el solido se separan. */
  --teal-rgb:12,122,109;--ver-rgb:27,122,78;--pro-rgb:143,100,0;--tes-rgb:43,108,176;
  --est-rgb:109,79,196;--ink-rgb:33,37,44;--card-rgb:255,255,255;--paper-rgb:250,245,236;
  /* ⭐ LOS QUE FALTABAN (17-ago). Un color que se repite ES un token que falta: se declara con el
     valor que YA tenia, asi que no se mueve un pixel — lo unico que cambia es que deja de estar
     escrito 2, 3 o 6 veces. Probado declaracion por declaracion con `verificar_tokens.py`. */
  --teal-soft:#EAF4F1;     /* fondo palido teal: hover de volver, chip cy, paso actual, paso trabajo */
  --teal-lo:#7FD1C0;       /* teal claro de los iconos macro (hermano de --ac-lo en la oscura) */
  --ac-bd:#D3E2EF;         /* borde azul palido (hermano de --ac-soft, que ya estaba) */
  --adv-soft:#FCF3DF;--adv-bd:#E3C98E;   /* banda de advertencia / ficha volatil / modulo arancel */
  --ver-soft:#EAF5EE;      /* el veredicto «refuerza» */
  --ver-bd:#BFE0CC;        /* borde de la familia verde. Nace el 2026-08-18 al tokenizar la
     pildora de modalidad: era un hex duro y NO es un tinte de --ver. Medido: la formula que
     usa su hermano `.gh-ver.refuerza` —rgba(var(--ver-rgb),.30) sobre --ver-soft— da #ACD0BE,
     ΔE 6,04 contra este valor: perceptible. Por eso token propio y no reuso. */
  /* ⛔ --pro-soft SE FUE (M2, 2026-08-18). Valia #FBF3DF: 1 punto sobre 255 contra --adv-soft
     (dE 0,38) y el mismo trabajo — el fondo crema de la familia ambar. La prueba de que ya eran
     el mismo token estaba escrita en la hoja: `.fch.vol` y `.of-mod.arancel` pintan `color:var(--pro)`
     sobre `--adv-soft`, o sea que la familia «presiona» ya usaba la crema de «advertencia». Con ella
     se fue tambien el #FAF2DD suelto de `.cm-caveat` (dE 0,77). Tres cremas, un token. */
  --pro-fill:#D9A92E;      /* el punto y la barra solidos de «en evaluacion» */
  --via-trabajo:#15665A;--via-trabajo-bd:#C4E2D6;  /* las dos vias del modulo caminos */
  --via-pyme:#234E95;--via-pyme-bd:#CCDCF1;
  --track:#EEE6D3;         /* la pista del medidor de oficios, llena y rayada */
  --sin:#A24A40;           /* ⭐ el 5º sello, con nombre propio y TONO propio en las DOS pieles.
                              Hasta el 2026-08-18 valia var(--bad) exacto: «sin confirmar» —que es un
                              hueco declarado, lo que MAS credibilidad da— se pintaba con el mismo rojo
                              que un dato REFUTADO. Terracota, no rojo de error (dE 26 del #B3261E).
                              ⚠️ El tono propuesto era #B0554A y NO entro: da 4.24 sobre --soft, bajo el
                              4.5 de AA para texto chico. Este da 5.02 en el peor de los tres fondos
                              (paper/card/soft) y esta a dE 4.6 del propuesto — misma decision, tono
                              corrido lo justo para que el sello se lea. M1 del 2026-08-18. */
  /* las 5 sombras. ⚠️ Cuatro de ellas son cremas casi identicas (dE < 2.3) haciendo el MISMO
     trabajo: eso es DERIVA, no diseno. Se tokenizan por separado a proposito —cero pixel— y
     unificarlas queda como decision aparte, que una vez aca cuesta borrar cuatro lineas. */
  --sh-card:rgba(26,28,22,.03);--sh-card-lg:rgba(26,28,22,.4);
  --sh-door:rgba(33,30,24,.04);--sh-kpi:rgba(34,34,30,.04);--sh-panel:rgba(60,45,20,.04);
  /* terracota = rol "tension / el hueco / amenaza alta" en la pagina de nicho gente (v2, decision
     2026-07-01). NO es alarma (--bad es demasiado rojo). Se sumo un token propio porque ningun token
     existente juega ese rol sin colision: --pro (ambar) ya es "probable" y choca con el sello del hero
     y con el nivel MEDIO del medidor de amenaza. Para revertir a ambar: apuntar estos 3 a --pro. */
  --gap:#C0603F;--gap-soft:#FAF6F3;--gap-bd:#ECDCD3;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --sans:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
}
/* paleta del CIERRE en esta piel (clara). La estructura vive en cierre.css; cada skin define su paleta. */
.cierre-zone{--paper:#FAF5EC;--card:#FFFFFF;--soft:#F4EDDD;--bd:#E8DECC;--bd2:#D9CDB4;
  /* la zona del formulario define SU propia paleta y no toma la del sitio: sin tocarla aca,
     los 13 nodos del formulario seguian con el gris viejo aunque el resto ya estuviera bien. */
  --ink:#21252C;--sec:#5B6472;--dim:#6F6A5C;--ac:#1E6FB8;--on-ac:#fff;--acink:#175E9E;--ac-soft:#EAF3FB;
  --ver:#1B7A4E;--pro:#8F6400;--bad:#B3261E;--on-ac:#fff}
/* (los 3 tokens --gcseg* se retiraron el 2026-08-16 con la barra de composicion del catalogo:
   su unico consumidor era `.cierre-zone .gc-seg`, y esa barra ya no se emite.) */

body{margin:0;background:var(--paper);color:var(--ink);font:15.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased}

/* header — MEDIDAS en tokens.css (chrome compartido entre skins); acá SOLO el color de esta piel */
header{background:rgba(var(--paper-rgb),.96)}
.brand{color:var(--ink)}
.back{color:var(--teal);background:var(--card)}
.back:hover,.back:active{border-color:var(--teal);background:var(--teal-soft)}
.back.alt{color:var(--acink)}
.back.alt:hover,.back.alt:active{border-color:var(--acink);background:var(--ac-soft)}
/* el interruptor de recorrido, con DOS links desde P5 (2026-08-24). Igual que en la piel oscura:
   sólo cambia la paleta, la estructura no se bifurca. Acá `--prv` vale #B4276E (5,6 de contraste
   sobre el papel; el #f472b6 de la oscura daría 2,65 y no pasaría AA). */
.back.alt.alt-prv{color:var(--prv)}
.back.alt.alt-prv:hover,.back.alt.alt-prv:active{border-color:var(--prv);background:rgba(var(--prv-rgb),.07)}
.back.alt.alt-inv{color:var(--acink)}
.back.alt.alt-inv:hover,.back.alt.alt-inv:active{border-color:var(--acink);background:var(--ac-soft)}
.chip{color:var(--sec)}
.chip.cy{color:var(--teal);border-color:rgba(var(--teal-rgb),.35);background:var(--teal-soft)}
.langsw b{background:var(--ac);color:var(--card)}
.langsw a{color:var(--sec);background:var(--card)}
.coords{color:var(--dim)}
/* la piel clara no tiene --ok/--warn: usa los MISMOS tokens que ya visten sus sellos
   (--ver verificado, --pro probable), que estan contrastados contra --paper. */
.co-est.co-ok{color:var(--ver)}
.co-est.co-esp{color:var(--pro)}
.swn-d summary{color:var(--sec);background:var(--card)}
.swn-d summary:hover{border-color:var(--acink);color:var(--acink)}
.swn-m{background:var(--card);box-shadow:0 14px 30px rgba(var(--ink-rgb),.18)}
.swn-g{color:var(--acink)}
.swn-i{color:var(--sec)}

/* ===== barra-indice sticky (pagina gente; molde xN D2 2026-07-15) — version CLARA del .pnav de
   despegue.css: misma estructura y JS (scroll-spy + auto-centrado del chip activo), paleta de esta
   piel. MEDIDAS espejo de la dark: si se ajusta una, ajustar la otra. */
/* presencia V1+V2 (decision usuario 2026-07-15, espejo de la dark): banda blanca propia (distinta
   del papel del header) + subrayado celeste + chips con peso. */
.pnav{--pnav-bg:var(--card);position:sticky;top:var(--hh,54px);z-index:18;background:var(--card);border-top:1px solid var(--bd);border-bottom:2px solid rgba(var(--ac-rgb),.6);box-shadow:0 10px 24px -14px rgba(var(--ink-rgb),.45)}

.pnav-lbl{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--acink);display:inline-flex;align-items:center;gap:7px}
.pnav-lbl::before{content:"";width:14px;height:2px;border-radius:var(--r-2);background:var(--ac);flex:0 0 auto}

.pnav a{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;letter-spacing:.03em;color:var(--ink);text-decoration:none;padding:7px 15px;border-radius:var(--r-8);border:1px solid var(--bd2);background:var(--soft);white-space:nowrap;transition:.13s}
.pnav a:hover{color:var(--acink);border-color:rgba(var(--ac-rgb),.5);background:var(--ac-soft)}

/* aterrizaje de las anclas de la barra bajo la zona sticky (header+barra); --stick lo fija el JS */
#camino,#obras,#rueda,#numeros,#vecino,#fuentes{scroll-margin-top:var(--stick,112px)}
/* la hoja de nicho GENTE no carga nicho.css, asi que su `.idx-sec` se declara aca (TANDA 0
   de la revision externa, 2026-08-24: la hoja mide 20 pantallas de movil y no tenia indice) */
.idx-sec{scroll-margin-top:var(--stick,66px)}
/* boton "volver arriba" (xN, D4) — version clara del .totop de despegue.css */
.totop{position:fixed;right:16px;bottom:16px;z-index:40;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-12);border:1px solid var(--bd2);background:rgba(var(--card-rgb),.94);backdrop-filter:blur(8px);color:var(--acink);cursor:pointer;box-shadow:0 6px 18px -8px rgba(var(--ink-rgb),.4);opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s}

.totop:hover{border-color:rgba(var(--ac-rgb),.55);background:var(--ac-soft)}
.swn-i:hover{background:var(--ac-soft);color:var(--acink)}
.swn-i.cur{color:var(--teal);background:var(--teal-soft)}

/* COMPARTIR — fila bajo el hero (molde, todas las páginas; estructura compartida, cada piel pone color) */

.share-b.wa:hover{color:var(--wa);border-color:rgba(var(--wa-rgb),.55);background:rgba(var(--wa-rgb),.1)}
/* X — gemelo del de la piel oscura (ver el motivo alli). Aca el negro de marca de X (#0F1419) es el
   que se lee, igual que la piel oscura usa su blanco: la marca es la misma, el contraste lo pone el fondo. */
.share-b.tw:hover{color:#0F1419;border-color:rgba(15,20,25,.55);background:rgba(15,20,25,.08)}

.share-b.cp.ok{color:var(--ver);border-color:rgba(74,222,156,.55)}

/* ⭐ EL MISMO ANCHO QUE EL RESTO DEL SITIO (decision del usuario, 2026-09-18, eligiendo sobre
   dos versiones renderizadas). Media 1020px contra los 1320 de la piel oscura, y el usuario lo
   cazo mirando: *«las de invertir son mucho mas anchas»*. Lo que gana son las TABLAS —de 950 a
   1.250 px— y las tarjetas; los parrafos del cuerpo no se mueven porque ya topaban en 720px.
   ⛔ LA CONDICION DE ESTE CAMBIO ESTA EN LA REGLA DE ABAJO: tres clases de texto no topaban en
   nada y con el ancho nuevo pasaban de 144 a 187 caracteres por renglon. Si se saca una, vuelve
   el renglon ilegible que el comentario viejo de `despegue.css` ya advertia. */
.page{max-width:var(--w-page);margin:0 auto;padding:18px 16px 60px}

/* El tope de renglon de los bloques que no lo tenian. 92ch es ancho de lectura y ademas los
   mejora respecto de antes del ensanche, cuando ya salian a 144 caracteres.
   ⚠️ `.cierre-zone .disc` va con su contenedor delante porque `cierre.css` carga DESPUES de
   esta hoja y declara `max-width:none` con la misma especificidad. */
.disc,.idx-h,.idx-cv{max-width:92ch}
.page .cierre-zone .disc,.of-wrap .cierre-zone .disc{max-width:92ch}

.gente-hero{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-16);padding:26px 24px;margin-bottom:14px;box-shadow:0 1px 2px var(--sh-card),0 14px 32px -26px var(--sh-card-lg)}
/* kicker con la firma Moderno A: regla celeste de 3px + azul estructural (igual que .mm-kicker / .sec-h) */
.gente-hero .gh-k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acink);margin-bottom:13px}
.gente-hero .gh-k::before{content:"";width:24px;height:3px;background:var(--ac);border-radius:var(--r-2);flex:0 0 auto}
.gente-hero .gh-t{font-size:clamp(24px,4.5vw,32px);line-height:1.22;font-weight:800;color:var(--ink);margin:0 0 12px}
.gente-hero .gh-t .acc{color:var(--acink)}
/* split aprobado/eval como cajas con punto + monto + % + descripcion (detalle Claude Design 2026-06):
   la caja 'ok' se ajusta al contenido, la 'ev' llena — espeja la proporcion de la barra de arriba. */
.gente-hero .gh-split{display:flex;gap:16px;margin:0}
.ghs{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-12);border:1px solid var(--bd2);background:var(--soft)}
.ghs.ok{flex:0 0 auto;border-color:rgba(var(--ver-rgb),.3);background:var(--ver-soft)}
.ghs.ev{flex:1;border-color:rgba(var(--pro-rgb),.28);background:var(--adv-soft)}
/* ⭐ el azulejo de LA PAGA (T156, 2026-08-29). Antes el hero de la cara gente eran TRES cifras y
   las tres la misma cartera: el h1, «23% ya aprobados» y «77% presentados». La tercera es la que
   menos le sirve al vecino —le avisa que esa plata todavia no esta aprobada— y este azulejo la
   reemplaza por el numero con el que decide: lo que pagan los oficios de SU provincia. La cifra
   de los presentados no se pierde: baja a `.gh-ev`, la linea de contexto de abajo. */
.ghs.of{flex:1;border-color:rgba(var(--ac-rgb),.3);background:var(--ac-soft)}
.ghs-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.ghs.ok .ghs-dot{background:var(--ver)}
.ghs.ev .ghs-dot{background:var(--pro-fill)}
.ghs.of .ghs-dot{background:var(--ac)}
.ghs.of .ghs-v{color:var(--acink)}
a.ghs.of{text-decoration:none;color:inherit}
a.ghs.of:hover{border-color:var(--acink)}
/* `--fs-body` y no `--fs-sub`: es una linea de CONTEXTO, pero es texto corrido de 60+ caracteres y
   `lint_cuerpo_prosa` la mide como prosa — a 14,5 px quedaba bajo el piso duro de 15,5. El token de su
   rol (nota/pie) es este; el escalon de arriba (`--fs-body-lg`) es el de la prosa de lectura. */
.gente-hero .gh-ev{font-size:var(--fs-body);color:var(--dim);line-height:1.5;margin:10px 0 0}
.ghs-v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-body);font-weight:700}
.ghs.ok .ghs-v{color:var(--ver)}
.ghs.ev .ghs-v{color:var(--pro)}
.ghs-pct{font-size:var(--fs-tag);font-weight:500;opacity:.75}
/* T106 (2026-08-31): el azulejo de la PLATA es el mas grande de los dos, porque es la prueba de
   que la oportunidad del titular no esta inventada. Un escalon, no dos: si igualara al `h1` volvia
   a ganar la pelea visual, que es justo lo que se corrigio. */
.ghs-v.gr{font-size:var(--fs-body-lg)}
.ghs-d{font-size:var(--fs-sub);color:var(--sec);line-height:1.4;margin-top:1px}
/* letra chica del split: cuanto de lo "ya aprobado" todavia espera su resolucion en el BO. Hermana
   de .b-cav (chip de estado) y de .hd-split .pend (hero inversor) — mismo dato, tres superficies. */
.ghs-cav{font-size:var(--fs-label);color:var(--dim);line-height:1.4;margin-top:5px;
  padding-top:5px;border-top:1px dashed var(--bd2)}
/* Cuantos proyectos de la provincia YA estan en obra (2026-09-04, decision del usuario). Es la unica
   letra chica del hero que puede AFIRMAR, asi que se le da color: verde cuando estan todos, ambar
   cuando es parcial o ninguno. El texto sale del dato de cada provincia (`linea_obra_gente`), nunca
   de un verbo fijo: Rio Negro tiene 3 de 3 y San Juan 1 de 5. */
.ghs-cav.ok{color:var(--ver)}
.ghs-cav.mid{color:var(--pro)}

.gente-hero .gh-p{font-size:var(--fs-body-lg);line-height:1.6;color:var(--sec);margin:18px 0 0;max-width:720px}
/* barra de proporcion del hero: el split aprobado/eval, ahora visual (puesta a punto 2026-06-25).
   Verde = ya aprobado y arrancando; ambar = presentado/en evaluacion. */
.gh-bar{display:flex;height:11px;gap:2px;margin:0 0 13px}
.gh-bar i{display:block;height:100%}
.gh-bar i.ok{background:var(--ver);border-radius:6px 2px 2px 6px}
.gh-bar i.ev{background:var(--pro-fill);border-radius:2px 6px 6px 2px}

/* fila de KPIs de golpe de vista (gente): las 3 puertas del vecino en numero. Mismo rol que la fila
   k3 del inversor, en la paleta clara. Las card-LINK (oficios/ideas) llevan 'ver ↓' y caja tocable.
   Unidad inline junto a la cifra; refinamientos de Claude Design 2026-06. */
.kpis-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin:0 0 18px}
.kpi-g{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-16);padding:18px 20px;box-shadow:0 1px 3px var(--sh-kpi);text-decoration:none;color:inherit}
.kg-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}
.kg-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kg-go{font-family:var(--mono);font-size:var(--fs-label);color:var(--teal);white-space:nowrap}
.kpi-g.acc .kg-go{color:var(--acink)}
/* flex-wrap: la palabra-unidad baja de linea en movil en vez de clipear ("1.500 trabajadore", CF-40 solidez RN 2026-07-15) */
.kg-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--teal)}
.kpi-g.acc .kg-v{color:var(--acink)}
.kg-un{font-size:var(--fs-label);font-weight:500;color:var(--dim);letter-spacing:0}
.kg-u{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-body-sm);color:var(--sec);line-height:1.4;margin-top:10px}
a.kpi-g.go{transition:.13s}
a.kpi-g.go:hover{border-color:var(--acink);box-shadow:0 4px 13px rgba(var(--ac-rgb),.14);transform:translateY(-1px)}
/* ⭐ (2026-09-07) LA TARJETA HUERFANA. `auto-fit` con un minimo de 168 px entra en DOS columnas
   a 390 px, asi que una fila de 3 tarjetas dejaba la tercera sola a la izquierda y medio renglon
   vacio a la derecha — se lee como un error de maqueta, no como una decision. Con la reja fijada
   en 2 columnas la tercera se estira a todo el ancho, que ademas es donde va la cifra de plata.
   ⚠️ Vale igual para 4 tarjetas: `auto-fit` daba 3+1 y ahora da 2+2. Medido: son 8 paginas del
   sitio las que emiten `.kpis-g` — 3 con tres tarjetas, 3 con dos y 2 con cuatro. */
@media(max-width:640px){
  .kpis-g{grid-template-columns:repeat(2,1fr)}
  .kpis-g>:nth-child(3):last-child{grid-column:1/-1}
}

/* ⭐ (2026-09-07) LOS CONTROLES DE UNA LISTA LARGA en la piel clara — buscador, chips de faceta,
   contador y estado vacio. El mecanismo (`js_hub_filtro`) y el marcado son los mismos que usan
   `/negocios/`, `/reformas/` y `/proyectos/`; lo que no se podia compartir es la PALETA, porque
   esas tres son de piel oscura y su hoja (`despegue.css`) no la carga ninguna pagina gente.
   ⛔ Y por eso NO se subieron las reglas de alla a `tokens.css`: usan `--panel`, `--mut`, `--tx`
   y `--tx2`, que la piel clara no define, y traducirlos habria movido el aspecto de tres paginas
   publicadas para arreglar una cuarta. Es la misma forma en que esta hoja ya re-declara `.pnav` y
   `.totop`: la estructura se comparte, el color lo pone cada piel.
   ⚠️ `.op-chip.on` usa `--on-ac` y no `--ink`: sobre el acento hay UN token que significa
   «texto encima del acento» en las dos pieles, y `--ink` se da vuelta de una a la otra — la
   leccion que ya pago `.esc-dec`. */
.rfh-q-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.rfh-q{flex:1 1 320px;min-width:0;background:var(--card);color:var(--ink);
  border:1px solid var(--bd2);border-radius:var(--r-8);padding:10px 13px;font-size:15px;
  font-family:inherit}
.rfh-q::placeholder{color:var(--dim)}
.rfh-q:focus{outline:none;border-color:var(--acink);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.13)}
.rfh-cnt{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);white-space:nowrap}
.rfh-nada{font-size:15px;color:var(--sec);padding:14px 2px;margin:0}
.op-filt{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--bd)}
.op-filt-grp{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.op-filt-l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.op-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:var(--fs-micro);padding:7px 13px;border-radius:var(--r-8);border:1px solid var(--bd2);
  background:var(--card);color:var(--sec);cursor:pointer;transition:.12s}
.op-chip:hover{color:var(--acink);border-color:var(--acink)}
.op-chip.on{color:var(--on-ac);background:var(--ac);border-color:var(--ac);font-weight:600}
/* ⭐ AREA TACTIL DE 44 px EN EL TELEFONO (2026-09-07, decision del usuario). La piel OSCURA ya la
   tenia desde el 7-sep y esta hoja quedo afuera: medido a 390 px con dedo emulado, los chips de
   `/proyectos/`, `/provincias/` y `/negocios/` daban 44 y los de `/trabajo/` **33**. Es el mismo
   defecto de «se arreglo el molde y no se barrieron las hermanas» que ya se cobro dos veces.
   ⛔ CON PADDING, no con un pseudo-elemento invisible: un `::after` de 44 px desbordando el chip
   NO recibe el toque —el hit-test de un `<button>` se queda en su propia caja—, y un area que la
   medicion dice que no existe es peor que no tenerla.
   ⚠️ Solo en pantalla chica y tactil: con raton, 33 px ya se aciertan y agrandar seria gastar
   alto sin motivo. */
@media(max-width:640px) and (pointer:coarse){
 /* `min-height` y no solo padding: la piel clara arranca de 7px de relleno y una letra distinta,
    asi que el mismo padding que la oscura daba 43 px. La altura minima no depende de la letra. */
 .op-chip{padding-top:12px;padding-bottom:12px;min-height:44px}
}
/* el boton que trae la tanda siguiente: solo lo enciende el JS con la tabla apilada (<=640px). */
.rfh-mas{display:block;width:100%;margin:16px 0 0;padding:13px 16px;background:var(--soft);
  border:1px solid var(--bd2);border-radius:var(--r-8);color:var(--acink);font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.rfh-mas:hover{border-color:var(--acink);background:var(--ac-soft)}
/* ⛔ (2026-09-07) `[hidden]` NO ALCANZA CONTRA UNA CLASE QUE DECLARA `display`, y el
   defecto estaba PUBLICADO: en escritorio `/reformas/` mostraba el boton «216 normas mas
   ↓» aunque las 216 ya estaban a la vista — el JS lo apagaba con `mas.hidden=true` y la
   regla de arriba lo volvia a encender, porque `[hidden]{display:none}` del navegador pesa
   lo mismo que `.rfh-mas` y pierde por ir antes. Se vio abriendo la pagina, no leyendo el
   CSS: el HTML emitido ya decia `hidden` y parecia correcto. */
.rfh-mas[hidden]{display:none}
@media(max-width:640px){.rfh-cnt{width:100%}}

/* strip 'X en numeros' (gente): equivalente ciudadano del rail provincial del inversor. */
.pf-panel{padding:16px 18px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.pf-tile{background:var(--paper);border:1px solid var(--bd);border-radius:var(--r-12);padding:13px 14px;min-width:0}
.pf-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.pf-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--acink)}
.pf-t{font-size:var(--fs-sub);color:var(--sec);line-height:1.4}
.pf-bar{height:7px;border-radius:var(--r-4);overflow:hidden;background:var(--soft);border:1px solid var(--bd2);margin-top:9px}
.pf-bar i{display:block;height:100%;background:var(--ac)}
/* "Lo concreto" de la tile (F8c 2026-07-29): los hechos que el strip promueve traen `surfacear:true`
   y su `valor` curado se perdia — el titulo del agua prometia el desmentido ("no los 2 millones de
   litros que circulan") y nunca lo entregaba. Mismo disclosure que la card de la seccion 04,
   dimensionado para la tile (que es angosta: minmax 196px). */
.pf-det{margin-top:10px;border-top:1px solid var(--soft)}
/* ÁREA DE TOQUE — min-height 24px = piso AA de WCAG 2.5.8, sobre TODO `summary` (gemelo de la
   regla de `despegue.css`; ver alli el porque de 24 y no 44). Control total, 2026-08-13. */

.pf-det>summary{list-style:none;display:flex;align-items:center;gap:6px;padding:8px 0 0;cursor:pointer;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--acink);user-select:none}
.pf-det>summary::-webkit-details-marker{display:none}
.pf-det>summary::before{content:"\25B8";display:inline-block;transition:transform .15s}
.pf-det[open]>summary::before{transform:rotate(90deg)}
.pf-det-body{padding:8px 0 2px}
.pf-det-body p{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec)}
.pf-det-body b{color:var(--ink);font-weight:700}

/* punto de sello (golpe de vista del nivel de confianza, sin texto) — espejo claro del de la skin dark */

/* ⚠️ el `display:flex` / `align-items` los pone `.firma` en tokens.css: una sola forma en las dos
   pieles (17-ago). Acá queda la caja de esta piel y su lugar en la página. */
/* ⭐ MISMO TOPE que `.hd-firma` en la piel oscura (decision del usuario, 2026-08-31): esta es la
   tarjeta que va ABAJO y ocupaba todo el ancho. Es el mismo elemento, asi que toma la misma forma;
   lo unico que difiere por piel es la paleta. */
.firma-gente{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-12);padding:14px 16px;margin:28px 0 18px;max-width:min(100%,46rem)}
.firma-av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--firma-tx);background:linear-gradient(140deg,var(--firma-bg1),var(--firma-bg2));border:1px solid var(--firma-bd);overflow:hidden}

/* ⛔ ACA VIVIAN `.firma-rol` (el «· ANALISTA JEFE») y el nombre como ENLACE subrayado. Se retiran
   el 2026-09-17 con la unificacion de la firma: el rol es `.pp-firma-r` y el nombre es texto.
   Medido: 0 emisiones de las dos en todo el sitio. */
.fg-nombre{font-weight:800;font-size:var(--fs-body-lg)}
/* color; la LISTA (filo por item, mono, ritmo) la pone .firma-creds en tokens.css */
.fg-creds{color:var(--sec)}

/* Header de seccion EDITORIAL (Moderno A 2026-06-27): sin pill de color — titulo ink en bold con
   una regla-kicker celeste de 3px arriba. Reemplaza la caja celeste/teal que se veia "de template". */
.sec-h{display:flex;width:auto;align-items:baseline;flex-wrap:wrap;gap:10px;background:none;color:var(--ink);
  padding:15px 0 0;border-radius:0;position:relative;font-weight:800;font-size:22px;letter-spacing:-.015em;line-height:1.15;margin:40px 0 16px}
.sec-h::before{content:"";position:absolute;top:0;left:0;width:26px;height:3px;background:var(--ac);border-radius:var(--r-2)}
.sec-h span[style]{color:var(--dim)!important;opacity:1!important;font-weight:500;font-size:15px;letter-spacing:0}

/* overflow-x: una tabla ancha scrollea DENTRO del panel, no panea la pagina (fix mobile 2026-06-11) */
.panel{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-12);padding:var(--pad-panel);box-shadow:0 1px 8px var(--sh-panel);overflow-x:auto;margin-bottom:22px}

/* ⭐⭐ LA CAJA QUE CONTIENE UN SOLO PARRAFO NO SE DIBUJA (TR2, 2026-08-27) ==================
   Es la jugada del usuario, textual: *«quitar el elemento pero que no sea visible la caja, creo
   que opticamente puede mejorar»*. Fijate que dice **quitar la CAJA, no el elemento**: el texto
   se queda entero y con su aire; lo que se va es el marco.

   POR QUE UNA REGLA Y NO SIETE EDICIONES DEL RENDER. El defecto vive en 7 moldes y 138 paginas
   —`nicho-inversor` 102 · `nicho-gente` 63 · `vicuna` 29 · las 3 legales 21 · `eje-programa` 19 ·
   `metodo` 3 · `autor` 2, censados el 27-ago con `pipeline/revision/censo_cajas.py`— y en todos
   es EXACTAMENTE la misma forma: una `.panel` cuyo unico hijo de elemento es un `<p>`. El selector
   ES la definicion del defecto, asi que no puede desincronizarse del censo que lo mide.
   ⚠️ Y su modo de fallo es el mejor posible: si un navegador no soporta `:has()`, la regla se
   ignora y la pagina **se ve como hoy**. No hay degradacion.

   ⛔ NO ALCANZA CON QUITAR LAS DECLARACIONES: `.panel` esta definida en las dos pieles con fondo,
   borde y radio, y omitir aca las dejaria vivas (la trampa de `RUNBOOK-PORT-DISENO §3`: quitar una
   declaracion la deja caer al default de quien la definio ANTES, no la apaga). Por eso el reset se
   ESCRIBE: `background:none`, `border:0`, `border-radius:0`, `box-shadow:none`.

   ⚠️ Se conserva el ritmo vertical (el margen inferior) y se saca el padding horizontal, que era
   lo que metia el parrafo 24 px adentro respecto del resto del texto de la pagina.
   Donde la caja SI agrupa —una tabla, una lista, dos bloques distintos— no matchea y no se toca:
   ahi el marco dice donde empieza y termina la lista. */
.panel:has(> p:only-child){
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow-x:visible;
  margin-bottom:18px}

/* ...y la misma caja cuando el parrafo trae un enlace chico al pie (3-sep). Es la hermana de la
   regla de `despegue.css`: un enlace debajo del parrafo no lo convierte en dos zonas, y la unica
   razon por la que `> p:only-child` no la alcanzaba es que ahi hay DOS hijos en vez de uno.
   Un elemento compartido tiene UNA sola forma: esto vive en las dos pieles o en ninguna. */
.panel:has(> p.disc):has(> a.ng-norma){
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow-x:visible;
  margin-bottom:18px}

/* tarjetas-stat de la capa gente (redisenio 2026-06-11): cifra protagonista + detalle colapsable.
   min-width:0 en los hijos del grid: leccion L32 (una col 1fr no encoge bajo su min-content). */
/* auto-FIT (no auto-fill): las columnas sin tile colapsan y los tiles LLENAN la fila; un grupo de
   1 tile pasa a titular a todo el ancho (stat-faro), no a hueco (re-auditoria 2026-06-21). */
.mh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:10px;border-top:1px dashed var(--bd2);padding-top:12px}
.mh{display:flex;flex-direction:column;gap:4px;min-width:0;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-12);padding:13px 14px;box-shadow:0 1px 5px var(--sh-panel);transition:.13s}
.mh:hover{border-color:var(--teal);box-shadow:0 3px 10px rgba(var(--teal-rgb),.10)}
.mh-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:27px;font-weight:700;letter-spacing:-.5px;line-height:1.05;color:var(--teal);overflow-wrap:break-word}
.mh-titulo{font-size:var(--fs-body-sm);font-weight:600;color:var(--ink);line-height:1.45}

/* 'de donde sale la plata': la obra aguas-abajo se muestra por CONTEXTO, separada de los proyectos
   que SI suman al total, para que el conteo cierre a primera vista (lectura fria F8d [10][44][75]) */
.mh-ctx-lbl{font-size:13px;color:var(--dim);line-height:1.5;margin:16px 0 9px}
.mh-grid.mh-ctx{border-top:0;padding-top:0}
.mh-grid.mh-ctx .mh{background:var(--soft);border-style:dashed}
.mh-ab{font-size:var(--fs-micro);color:var(--dim);line-height:1.45;margin-top:5px}
.mh.adv{background:var(--adv-soft);border-color:var(--adv-bd)}
/* .mh.adv = tarjeta de ADVERTENCIA: ámbar semántico (no brand), se mantiene dorado a propósito */
.mh.adv:hover{border-color:var(--pro);box-shadow:0 3px 10px rgba(var(--pro-rgb),.12)}
.mh.adv .mh-cifra{color:var(--pro)}
/* mini-barra de la tile cuando la cifra es un % (46%, +29%, 2,3%...): visualiza la magnitud, igual
   que los minis del inversor. Ambar en las tiles de advertencia (.mh.adv). */

/* tile de advertencia que SURFACEA el "qué pasó" (gente): ancho completo + explicación honesta inline.
   Resuelve la paradoja (un negativo al lado del boom) en vez de dejar un dato suelto que asuste. */

/* surfacing POSITIVO (no advertencia): mismo patrón, paleta teal (ejemplo concreto / prueba), no ámbar */

/* Muro de oficios: banda al TOPE de la pagina gente. Chips SOLIDOS grandes = lo que el que busca
   laburo ve apenas entra (redisenio 2026-06-21). Ancla a la card de detalle via #oficios. */

/* banda 'con titulo o carrera': azul profesional, distinto del oficio (teal) — scaneable de un vistazo */

/* chips SUAVES (pasada Claude Design 2026-06, elegidos por el usuario): etiquetas (no botones) — fondo
   claro + texto color, mono, rectangulares. Se leen como indice, no como tap-targets. Color por banda. */

/* botón de acción ESTÁNDAR (caja iluminada, paleta teal): igual patrón que la skin dark (.oc-go/.ff),
   ilumina al hover propio Y al hover de toda la card .muro-of. */

#oficios{scroll-margin-top:var(--stick,70px)}
/* puerta a EMPRENDER: barra-link bajo el muro que baja a #emprender. Ambar = distinta del muro
   de trabajo (teal/azul); sistema de 'puertas' por color (idea usuario 2026-06-21). */

#emprender{scroll-margin-top:var(--stick,70px)}
/* fch.vol queda ÁMBAR a propósito: es aviso semántico de número perecedero (no es brand) */
.fch.vol{color:var(--pro);border-color:var(--adv-bd);background:var(--adv-soft)}

/* SISTEMA DE TOKENS (regla del molde): caja = se TOCA (CTAs/filtros) · plano = se LEE (sello+estado+fase).
   El color de semáforo + el punto cargan el significado; la caja queda para lo clickeable. */

.b.warn{color:var(--pro)}   /* efecto 'presiona' (NN_EF) en la piel gente: ámbar, igual que .gh-ver.presiona */
/* `.b.sin` subió a `tokens.css` el 2026-08-18 (A8(b)): misma forma en las dos pieles, y `--sin`
   ya vive acá con el valor de la clara. `.b.neutral` NO sube: acá es `--sec` y en la oscura `--tes`. */
.b.neutral{color:var(--sec)}

/* [borrado 2026-08-13] `.fuentes-det`/`.fd-cta` — gemelo claro del bloque que se saco de
   `despegue.css`: el catalogo colapsado viejo (H3), reemplazado por `.fsrc-*` de `cierre.css`.
   0 de las 216 paginas lo emiten. Traia el mismo texto de UI en `content:` de CSS. */

.src{color:var(--acink);text-decoration:none;font-family:var(--mono);font-size:var(--fs-micro)}
.src:hover{text-decoration:underline}

/* sello de frescura "dato al MM-AAAA" (decision 7, 2026-06-10) */
.fch{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--dim);border:1px solid var(--bd2);border-radius:var(--r-4);padding:1px 5px;white-space:nowrap;vertical-align:middle;background:var(--card)}

/* `uni` — la UNIDAD pegada a una cifra, INLINE (t/año, oz/año, MW). Espejo claro de la regla de
   `despegue.css`; ver alli el porque completo (U1, 2026-08-14). Va en LAS DOS PIELES a proposito
   aunque HOY ninguna pagina de piel clara la emita: la regla que solo vive en la hoja de una piel
   es exactamente el defecto que [[L845]] costo, y el precio de prevenirlo es 1 linea. */

/* sello de procedencia PLANO (decision usuario 2026-06-21): espejo claro del de la skin dark */

a.sello:hover{background:rgba(var(--ac-rgb),.08)}

/* `.se-c.sin` subió a `tokens.css` el 2026-08-18 (A8(b)). `.se-c.neutral` NO: acá `--sec`, allá `--dim`. */
.se-c.neutral{color:var(--sec)}

.se-go{color:var(--acink);font-size:var(--fs-micro);line-height:1}
a.sello:hover .se-f{color:var(--ink)}

/* leyenda de los sellos de confianza (decision 1, 2026-06-10) */
.leyenda{font-family:var(--mono);font-size:var(--fs-body);color:var(--sec);line-height:2.2;margin:0 0 12px}
/* leyenda de sellos: caja blanca para que lea sobre el papel beige (no la tira suelta) */
.leyenda.sellos{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-12);padding:11px 16px;line-height:2;margin:0 0 22px;box-shadow:0 1px 2px var(--sh-card);scroll-margin-top:70px}
/* P3 (2026-08-24) — la intro es el link a `/metodo#sellos`. Misma estructura que la piel oscura,
   distinta paleta: acá el acento de texto es `--acink`, que es el que pasa WCAG AA sobre el papel
   claro. Lo único que cambia entre pieles es el color; la estructura NO se bifurca. */
.ley-mas{color:var(--acink);white-space:nowrap}

td{padding:var(--pad-td);border-bottom:1px solid var(--bd);vertical-align:top}tr:hover td{background:var(--soft)}
.ent{color:var(--ink);font-weight:700}

.disc{background:var(--soft);border:1px solid var(--bd);border-radius:var(--r-12);padding:12px 15px;font-size:var(--fs-body-lg);color:var(--sec);margin:16px 0;line-height:1.55}
.sec-lead{font-size:var(--fs-body-lg);color:var(--sec);line-height:1.55}
.sec-lead b{color:var(--ink);font-weight:700}
/* lectura rapida: la negrita de skim resalta sobre el gris del parrafo (en .disc y en el contenido) */
.disc b,.gh-p b{color:var(--ink);font-weight:700}
/* B1 (2026-08-25) — la glosa sale de la caja cuando ya vive DENTRO de una. Hermano exacto de la
   regla de `despegue.css`: un elemento compartido tiene UNA sola forma y lo unico que cambia por
   piel es la paleta. El porque largo (y la medicion de las 43 instancias) vive alla. */
.panel .disc,.reg-lect .disc,.ref-sec .disc{background:none;border:0;border-radius:0;padding:0}

/* "Cómo este boom se vuelve tu oportunidad": el CAMINO (v8 Premium, Claude Design 2026-06-27). Steps
   numerados con timeline + dos PUERTAS premium (header en degradé + rail de oficios/rubros SIEMPRE visible,
   feedback usuario "que no esté cerrado") + caveat + chip macro oscuro al Tablero. NÚMEROS = hechos (con
   sello clickeable a la fuente), ENCADENADO = tesis. Sin panel: las cards flotan sobre el papel. */
.cm-wrap{margin:0 0 22px}
.cm-lead{font-size:17.5px;line-height:1.5;color:var(--sec);margin:0 0 24px;max-width:760px}
.cm-lead b{color:var(--ink);font-weight:800}
/* step numerado (tronco) con timeline a la izquierda */
.cm-step{display:grid;grid-template-columns:50px 1fr;gap:18px}
.cm-rail{display:flex;flex-direction:column;align-items:center}
.cm-num{width:44px;height:44px;border-radius:var(--r-12);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cm-railline{flex:1;width:2px;background:var(--bd2);margin:7px 0}
.cm-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-16);padding:20px 24px;box-shadow:0 1px 2px var(--sh-door),0 16px 32px -22px rgba(33,30,24,.22);margin-bottom:4px}
.cm-card-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.cm-h{margin:0;font-size:25px;font-weight:800;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.cm-h-sub{font-family:var(--mono);font-size:var(--fs-sub);color:var(--dim)}
/* evidencia: strip con número grande (mono) + label chica + divisores; el sello clickeable va al frente */
.cm-ev{display:flex;align-items:center;flex-wrap:wrap;gap:9px 13px;background:var(--soft);border:1px solid var(--bd2);border-radius:var(--r-12);padding:10px 15px;margin-bottom:13px}
.cm-ev-pair{display:flex;align-items:baseline;gap:5px}
.cm-n{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cm-ev-l{font-size:var(--fs-micro);color:var(--dim)}
.cm-ev-div{width:1px;height:15px;background:var(--bd2)}
.cm-ev .sello{margin-left:0}
.cm-tag{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.04em;text-transform:uppercase;color:var(--dim);border:1px solid var(--bd2);border-radius:var(--r-12);padding:3px 9px}
.cm-vos{font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec);margin:0}
.cm-vos b{color:var(--ink);font-weight:700}
/* detalle surfaceado de un nodo del camino (hechos con `surfacear`): el valor completo del dato,
   en voz de dato (mono chico) entre el strip de evidencia y el "para vos" */
.cm-det{font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec);margin:0 0 9px;padding:8px 12px;border-left:2px solid var(--bd2);background:rgba(26,28,22,.025);border-radius:0 8px 8px 0}
/* conector 01->02 (la flecha es tesis) */
.cm-conn{display:grid;grid-template-columns:50px 1fr;gap:18px}
.cm-conn-b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 0;font-size:var(--fs-body);color:var(--sec)}
.cm-conn-ar{font-family:var(--mono);color:var(--tes);font-weight:700}
/* cabecera de bifurcación */
.cm-fork{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px}
.cm-fork-t{font-size:var(--fs-body);color:var(--sec)}
.cm-fork-t b{color:var(--ink);font-weight:800}
/* 2026-08-16: el SVG del fork trae `width="360"` del mock v8. A 320 px sobresalia 20 px de cada
   lado y corria la pagina entera (4 mediciones del arnes, 2 paginas gente). Tiene `viewBox`, asi
   que `max-width:100%` + `height:auto` lo escalan sin deformarlo — es decorativo (`aria-hidden`)
   y no hay dato que se pierda al achicarlo. */
.cm-fork svg{margin-top:5px;max-width:100%;height:auto}
/* dos puertas premium */
.cm-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;align-items:start}
.cm-door{background:var(--card);border-radius:var(--r-16);overflow:hidden}
/* Moderno A (2026-06-27): puerta = card blanca con ACENTO de color arriba (3px) en vez del header
   de gradiente saturado + emoji. La semantica teal=trabajo / azul=pyme se conserva como acento. */
.cm-door.trabajo{border:1px solid var(--via-trabajo-bd);border-top:3px solid var(--teal);box-shadow:0 1px 2px var(--sh-door),0 18px 36px -26px rgba(var(--teal-rgb),.4)}
.cm-door.pyme{border:1px solid var(--via-pyme-bd);border-top:3px solid var(--ac);box-shadow:0 1px 2px var(--sh-door),0 18px 36px -26px rgba(35,78,149,.4)}
.cm-door-h{display:flex;align-items:center;gap:13px;padding:16px 22px;background:var(--card);border-bottom:1px solid var(--bd)}
.cm-door-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em}
.cm-door.trabajo .cm-door-k{color:var(--teal)}
.cm-door.pyme .cm-door-k{color:var(--acink)}
.cm-door-t{font-size:21px;font-weight:800;color:var(--ink);line-height:1.1}
.cm-door-b{padding:19px 22px}
.cm-door-b .cm-vos{margin-bottom:17px}
.cm-door.trabajo .cm-door-b .cm-ev{background:#E9F4EF;border-color:var(--via-trabajo-bd)}
.cm-door.pyme .cm-door-b .cm-ev{background:#EAF0FA;border-color:var(--via-pyme-bd)}
.cm-door.trabajo .cm-ev .cm-n{color:var(--via-trabajo)}
.cm-door.pyme .cm-ev .cm-n{color:var(--via-pyme)}
/* rail del abanico de oficios / rubros (siempre visible dentro de la puerta) */
.cm-rl-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:11px}
/* ⛔ Los rotulos chicos que usan un color SEMANTICO se oscurecen un escalon, y solo ellos: el
   token no se toca porque tambien pinta fondos y bordes, y el verde de `verificado` es un
   sello de confianza que no se cambia. Medido el 2026-09-06: daban 3,41-4,18 sobre la
   tarjeta clara, por debajo del 4,5 que pide un texto de 11-12 px. */
.cm-rl-k.trabajo{color:#33705F}   /* #4F9885 daba 3,41 */
.cm-rl-k.pyme{color:#476494}   /* #5E7CB4 daba 4,18 */
.cm-rl{border-left:2px solid;padding-left:14px;display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
.cm-rl.trabajo{border-color:var(--via-trabajo-bd)}
.cm-rl.pyme{border-color:var(--via-pyme-bd)}
.cm-rl-i{display:flex;align-items:baseline;gap:9px;font-size:var(--fs-body-lg);line-height:1.35}
.cm-rl.trabajo .cm-rl-i{color:#3A463F}
.cm-rl.pyme .cm-rl-i{color:#374A63}
.cm-rl-b{font-family:var(--mono);font-size:11px;flex:0 0 auto}
.cm-rl.trabajo .cm-rl-b{color:#9BC3B6}
.cm-rl.pyme .cm-rl-b{color:#9DB6DD}
.cm-rl-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;text-decoration:none;margin-bottom:18px}
.cm-rl-go.trabajo{color:var(--via-trabajo)}
.cm-rl-go.pyme{color:var(--via-pyme)}
.cm-rl-go:hover{text-decoration:underline}
/* CTA primer paso (sólido, color de la puerta) */
/* Moderno A: el "primer paso" pasa de CTA oscuro solido a caja de TINTE CLARO con texto de color
   (espeja .mm-paso); la semantica teal/azul se mantiene. */
.cm-paso{display:block;text-decoration:none;border-radius:var(--r-12);padding:15px 18px;transition:.13s;border:1px solid}
.cm-paso.trabajo{background:var(--teal-soft);border-color:var(--via-trabajo-bd)}
.cm-paso.pyme{background:var(--ac-soft);border-color:var(--via-pyme-bd)}
.cm-paso.trabajo:hover{background:#E0EFEA}
.cm-paso.pyme:hover{background:#E2EDF9}
.cm-paso-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;margin-bottom:7px}
.cm-paso.trabajo .cm-paso-k{color:var(--teal)}
.cm-paso.pyme .cm-paso-k{color:var(--acink)}
.cm-paso-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cm-paso-t{font-size:18px;font-weight:800}
.cm-paso.trabajo .cm-paso-t{color:var(--via-trabajo)}
.cm-paso.pyme .cm-paso-t{color:var(--via-pyme)}
.cm-paso-ar{font-size:16px;flex:0 0 auto}
.cm-paso.trabajo .cm-paso-ar{color:var(--teal)}
.cm-paso.pyme .cm-paso-ar{color:var(--acink)}
.cm-paso-d{font-size:var(--fs-body);line-height:1.45;margin-top:5px;color:var(--sec)}
/* caveat honesto (ámbar, badge "!") */
.cm-caveat{display:flex;gap:15px;background:var(--adv-soft);border:1px solid #ECD9A8;border-radius:var(--r-12);padding:17px 22px;margin-bottom:14px}
/* el signo iba en blanco sobre el ambar y daba 2,17: por debajo hasta del umbral de texto
   grande, que es 3. Va en el marron del propio ambar oscurecido (2026-09-07). */
.cm-cav-b{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-8);background:#D8A93A;color:#3B2C08;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.cm-cav-t{font-size:17.5px;font-weight:800;color:#7D5E14;margin-bottom:6px;letter-spacing:-.01em}
.cm-cav-d{font-size:15.5px;line-height:1.5;color:#6E5A26}
.cm-cav-d b{color:#5E4D1E;font-weight:700}
.cm-cav-d .sello{color:#8A6A14}
/* chip macro al Tablero (oscuro, premium) */
.cm-macro{display:flex;align-items:center;gap:15px;background:var(--ink);border-radius:var(--r-12);padding:16px 22px;text-decoration:none;transition:.13s}
.cm-macro:hover{filter:brightness(1.18)}
.cm-macro-ico{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-8);background:rgba(var(--card-rgb),.08);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;color:var(--teal-lo)}
.cm-macro-t{flex:1;font-size:15.5px;line-height:1.45;color:#D6CFC0}
.cm-macro-t b{color:var(--card);font-weight:700}
.cm-macro-go{font-family:var(--mono);font-size:var(--fs-label);color:var(--teal-lo);white-space:nowrap}
@media(max-width:640px){
  .cm-doors{grid-template-columns:1fr}
  .cm-step,.cm-conn{grid-template-columns:40px 1fr;gap:13px}
  .cm-num{width:38px;height:38px;font-size:var(--fs-body)}
  .cm-h{font-size:22px}
  .cm-card{padding:17px 18px}
}

/* abanico de oficios · ÍNDICE comparable (Mock A, Claude Design 2026-06-27): filtros + tabla con BARRA de
   salario (salario_rango, neto, escala común) + ficha expandible. #oficios (scroll-margin arriba) es el
   ancla del KPI 'oficios' y del primer paso del camino. El salario es estimado/probable y datado: la barra
   no se presenta como hecho duro (punto de confianza al lado del número + base neta + 'cambia c/paritaria'). */
.ofx-wrap{margin:0 0 22px}
.ofx-intro{font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec);margin:0 0 14px;max-width:700px}
.ofx-intro b{color:var(--ink);font-weight:700}
.ofx-note{display:block;margin-top:6px;font-size:var(--fs-body-sm);color:var(--dim)}
.ofx-note b{color:var(--sec);font-weight:700}
.ofx-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 7px}
.ofx-fk{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;color:var(--dim);margin-right:2px}
.ofx-f{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--sec);background:var(--card);border:1px solid var(--bd2);padding:6px 13px;border-radius:var(--r-8);cursor:pointer;transition:.12s}
.ofx-f:hover{border-color:var(--dim)}
.ofx-f.active{color:var(--card);background:var(--ink);border-color:var(--ink)}
.ofx-spacer{flex:1}
.ofx-count{font-family:var(--mono);font-size:var(--fs-tag);color:var(--dim);white-space:nowrap}
.ofx-count b{color:var(--sec);font-weight:600}
/* T114 · `align-items:start` y no `center`: la columna de PAGA lleva el eje debajo del rotulo, asi
   que centrar dejaba «OFICIO» y «DEMANDA» a la altura de las marcas del eje, como si fueran parte
   de el. Arriba, cada rotulo queda en su linea. */
.ofx-head{display:grid;grid-template-columns:1fr 158px 118px 38px;gap:14px;align-items:start;padding:10px 14px 8px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;color:var(--dim)}
.ofx-rows{display:flex;flex-direction:column;gap:8px}
.ofx{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-12);overflow:hidden;box-shadow:0 1px 3px var(--sh-kpi);transition:.13s}
.ofx[open]{background:#FFFDF8;border-color:var(--bd2);box-shadow:0 3px 12px rgba(60,45,20,.07)}
.ofx.ofi{border-left:3px solid var(--teal)}
.ofx.prof{border-left:3px solid var(--tes)}
.ofx-sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 158px 118px 38px;gap:14px;align-items:center;padding:14px}
.ofx-sum::-webkit-details-marker{display:none}
.ofx-name{min-width:0}
.ofx-nl{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ofx-n{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.ofx-cat{font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-4);white-space:nowrap}
.ofx-cat.ofi{color:#155F53;background:#DCEFE5;border:1px solid #BBE3D2}
.ofx-cat.prof{color:var(--via-pyme);background:#DDE8FA;border:1px solid #C2D4F1}
/* T147: era `white-space:nowrap` + ellipsis, o sea UNA linea. Medido a 390 px sobre las 42 filas:
   se leian 49 caracteres de una mediana de 136 —el 36%— y el corte caia a mitad de palabra, asi que
   el telefono se comia justo la parte que UBICA el oficio en la cuenca (el proyecto, la norma, el
   lugar). La cura de fondo fue de dato —la 1a oracion de `que_hace` es ahora un titular corto—; el
   clamp de 2 lineas es la red por si alguna queda larga. */
.ofx-what{font-size:var(--fs-body-sm);line-height:1.4;color:var(--dim);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ofx-pv{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-body);font-weight:600;color:var(--ink);line-height:1}
.ofx-pv.sd{color:var(--dim);font-weight:500}
/* ⭐ T114 (2026-08-29) · LA PISTA ES UN GRAFICO, NO UNA BARRA DE PROGRESO.
   Lo marco el auditor externo de `trabajo/escalas`: es la unica pagina que convierte 36 datos en
   una forma grafica y el largo no se podia leer. Tres cosas la vuelven medible, y ninguna toca la
   cifra ni el sello:
     · las LINEAS VERTICALES cada `--esc-step` son las mismas en todas las filas -> dos filas de
       tablas distintas se comparan mirando, sin volver a leer los numeros;
     · los TOPES de `i` dibujan el minimo y el maximo, que es lo que un rango dice;
     · el EJE ROTULADO (`.esc-ax`) le pone numero al largo.
   `--esc-step` lo emite el generador (`_eje_step`) en el contenedor. SIN ese valor la pista queda
   lisa, que es exactamente como estaba: la regla degrada a lo anterior y no rompe nada. */
.ofx-track{height:4px;background-color:var(--track);border-radius:var(--r-4);margin-top:6px;
  background-image:repeating-linear-gradient(90deg,var(--bd2) 0 1px,transparent 1px var(--esc-step,101%));
  box-shadow:inset -1px 0 0 var(--bd2)}
.ofx-track i{position:relative;display:block;height:100%;border-radius:var(--r-4);
  background:currentColor}
/* el minimo y el maximo, dibujados: sobresalen de la pista para que se lean como los dos extremos
   del rango y no como el borde de una barra que se llena */
.ofx-track i::before,.ofx-track i::after{content:"";position:absolute;top:-3px;bottom:-3px;
  width:2px;border-radius:1px;background:currentColor}
.ofx-track i::before{left:0}
.ofx-track i::after{right:0}
.ofx-track.ofi i{color:var(--teal)}
.ofx-track.prof i{color:var(--tes)}
.ofx-track.empty{background-color:transparent;box-shadow:none;
  background-image:repeating-linear-gradient(90deg,var(--track) 0 5px,transparent 5px 10px)}

/* EL EJE. Las marcas caen en el mismo % que las lineas de la pista, asi que el rotulo y la
   referencia son el mismo corte. Va en la cabecera de la columna de paga; en movil, donde el
   `thead` se esconde, la copia `.esc-ax-m` sale arriba de la tabla. */
.esc-ax{position:relative;height:19px;margin:5px 0 0;text-transform:none;letter-spacing:0;
  background-image:repeating-linear-gradient(90deg,var(--bd2) 0 1px,transparent 1px var(--esc-step,101%));
  background-size:100% 4px;background-repeat:no-repeat}
.esc-ax::after{content:"";position:absolute;right:0;top:0;width:1px;height:4px;background:var(--bd2)}
.esc-tk{position:absolute;top:7px;transform:translateX(-50%);font-family:var(--mono);
  font-size:var(--fs-tag);font-weight:500;line-height:1;color:var(--dim);white-space:nowrap}
.esc-tk.a0{transform:none}
.esc-tk.a1{transform:translateX(-100%)}
.esc-ax-m{display:none}
.ofx-dt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-8);white-space:nowrap}
.ofx-dt.urgente{color:var(--card);background:var(--teal);border:1px solid var(--teal)}
.ofx-dt.firme{color:var(--sec);background:var(--soft);border:1px solid var(--bd2)}
.ofx-dt.emergente{color:var(--dim);background:var(--soft);border:1px solid var(--bd2)}
.ofx-chev{font-family:var(--mono);font-size:var(--fs-tag);color:var(--acink);text-align:right;white-space:nowrap}
.ofx[open] .ofx-chev{color:var(--dim)}
.ofx-chev::after{content:" \25BE"}
.ofx[open] .ofx-chev::after{content:" \25B4"}
.ofx-body{padding:2px 16px 18px 16px;border-top:1px dashed var(--bd2)}
.ofx-d{display:grid;grid-template-columns:148px 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--soft)}
.ofx-d:first-child{border-top:0;padding-top:14px}
.ofx-dk{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;padding-top:2px}
.ofx-dk.pay{color:var(--pro)}.ofx-dk.cert{color:var(--teal)}.ofx-dk.form{color:var(--acink)}.ofx-dk.via{color:var(--dim)}.ofx-dk.frena{color:var(--pro)}
.ofx-dv{font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec)}
.ofx-dv b{color:var(--ink);font-weight:700}
.ofx-rngnote{display:block;margin-top:4px;font-size:var(--fs-sub);color:var(--dim)}
.ofx-rngnote b{color:var(--sec)}
.ofx-rngwhy{color:var(--dim)}
.ofc-forms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.ofc-forms li{font-size:var(--fs-body-lg);line-height:1.45;color:var(--sec)}
.ofc-forms b{color:var(--ink)}
.ofc-fnota{color:var(--dim);font-size:var(--fs-sub)}
/* La pildora de modalidad del curso. DUENA UNICA desde el 2026-08-18: `oficio.css` tenia las tres
   reglas duplicadas y ninguna llegaba a pantalla (la skin carga despues), asi que se borraron alla.
   `.arancel` (antes `.aran` aca y `.arancel` en oficio.css: el mismo estado con dos nombres). */
.of-mod{font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-4);margin:0 2px}
.of-mod.gratis{color:var(--ver);background:var(--ver-soft);border:1px solid var(--ver-bd)}
.of-mod.arancel{color:var(--pro);background:var(--adv-soft);border:1px solid var(--adv-bd)}

.ofx-paso{display:flex;gap:10px;align-items:baseline;min-width:0;margin-top:14px;padding:12px 15px;background:var(--teal-soft);border:1px solid rgba(var(--teal-rgb),.26);border-radius:var(--r-12);font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink)}
.ofx-paso>*{min-width:0}
.ofx-pk{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.ofx-fsrc{margin-top:12px;padding-top:10px;border-top:1px dashed var(--bd2);font-size:12px;color:var(--dim)}
.ofx-fsrc .ofx-dk{display:inline;margin-right:6px}
@media(max-width:680px){
  .ofx-head{display:none}
  .ofx-sum{grid-template-columns:1fr auto;gap:6px 11px}
  .ofx-name{grid-column:1}
  .ofx-chev{grid-column:2;align-self:center}
  .ofx-pay{grid-column:1/-1;display:flex;align-items:center;gap:11px;margin-top:3px}
  .ofx-track{flex:1;margin-top:0;min-width:70px}
  .ofx-dem{grid-column:1/-1}
  .ofx-d{grid-template-columns:1fr;gap:3px}
}

@media(max-width:760px){
  .chip.cy{display:none}
  .page{padding:14px 13px 50px}
  .gente-hero{padding:20px 17px}
  .gh-split{flex-direction:column}
  .ghs.ok,.ghs.ev,.ghs.of{flex:1 1 auto}
}

/* ---- agregados de implementacion (no venian en el handoff) ---- */

/* ============================================================================
   MODERNO A — bloque "Impacto micro - para la gente" (Claude Design 2026-06-27).
   Lenguaje editorial serio: secciones NUMERADAS sin emoji, metadata en mono,
   card-metrica de numero grande + sello + disclosure nativo (abierto por default
   = surfacea, honra L134), tesis-lede acotada. SOLO gente (el inversor no carga
   esta hoja). Reusa los tokens de confianza ya establecidos (--ver/--pro/--tes),
   no los reinventa. Piloto del rollout de Moderno A a toda la pagina gente. */
.mm{max-width:880px}
.mm-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.mm-kicker i{width:24px;height:3px;background:var(--ac);border-radius:var(--r-2);flex:0 0 auto}
.mm-kicker span{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acink)}
.mm-intro{font-size:17px;line-height:1.5;color:var(--sec);max-width:720px;margin:0 0 34px}
.mm-intro b{color:var(--ink);font-weight:700}

.mm-sec{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.mm-sec.next{margin-top:50px}
.mm-n{font-family:var(--mono);font-size:var(--fs-sub);font-weight:600;color:var(--dim)}
.mm-h{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}

.mm-tesis{display:flex;gap:13px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-12);padding:16px 18px;margin:0 0 22px}
.mm-tbadge{flex:0 0 auto;height:fit-content;margin-top:2px;font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;letter-spacing:.1em;color:var(--tes);background:rgba(var(--tes-rgb),.09);border:1px solid rgba(var(--tes-rgb),.22);padding:3px 8px;border-radius:var(--r-4)}
.mm-tesis p{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec)}
.mm-tesis b{color:var(--ink);font-weight:700}.mm-tesis .warn{color:var(--pro)}

.mm-glabel{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);margin:22px 0 11px}
.mm-glabel.warn{color:var(--pro)}
/* la banda del TAM junto al rótulo "qué tan firme es el número": el rótulo prometía un número que no estaba */
.ng-tamval{color:var(--ink);font-weight:700;letter-spacing:.02em;text-transform:none}

.mm-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-16);box-shadow:0 1px 2px var(--sh-card),0 14px 32px -26px var(--sh-card-lg);overflow:hidden;margin:0 0 12px}
.mm-card.legal{border-color:var(--ac-bd);box-shadow:0 1px 2px var(--sh-card),0 14px 32px -26px rgba(31,100,153,.45)}
.mm-card.adv{border-color:#ECDFC4;box-shadow:0 1px 2px var(--sh-card),0 14px 32px -26px rgba(176,125,28,.40)}
.mm-cbody{padding:19px 21px}
.mm-crow{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mm-nt{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mm-num{font-size:38px;font-weight:800;letter-spacing:-.025em;line-height:.95;color:var(--acink);font-variant-numeric:tabular-nums lining-nums}
.mm-card.adv .mm-num{color:var(--pro)}
.mm-tx{font-size:15.5px;line-height:1.35;color:var(--sec);max-width:380px}
.mm-tx b{color:var(--ink);font-weight:700}
.mm-sello-tr{flex:0 0 auto;white-space:nowrap}
.mm-bar{height:6px;background:var(--soft);border-radius:var(--r-4);overflow:hidden;margin-top:15px}
.mm-bar i{display:block;height:100%;background:var(--ac);border-radius:var(--r-4)}
/* disclosure NATIVO (sin JS): abierto por default = surfacea el valor curado (L134), colapsable */
.mm-det{border-top:1px solid var(--soft)}
.mm-det>summary{list-style:none;display:flex;align-items:center;gap:8px;background:var(--soft);padding:11px 21px;cursor:pointer;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acink);user-select:none}
.mm-det.adv>summary{color:var(--pro)}
.mm-det>summary::-webkit-details-marker{display:none}
.mm-det>summary::before{content:"\25B8";display:inline-block;transition:transform .15s}
.mm-det[open]>summary::before{transform:rotate(90deg)}
.mm-det-body{padding:15px 21px 19px;background:var(--card)}
.mm-det-body p{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--sec)}
.mm-det-body b{color:var(--ink);font-weight:700}

.mm-paso{background:var(--ac-soft);border:1px solid var(--ac-bd);border-radius:var(--r-12);padding:15px 19px;margin:14px 0 0}
.mm-pk{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acink);margin-bottom:7px}
.mm-paso p{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec)}
.mm-paso b{color:var(--acink);font-weight:700}

@media(max-width:560px){
  .mm-num{font-size:32px}
  .mm-crow{flex-direction:column;gap:9px}
  .mm-sello-tr{order:-1}
}

/* ============================================================================
   IDEAS PARA EMPRENDER — ÍNDICE RANQUEADO (Moderno B, Claude Design 2026-06-27).
   El gemelo del abanico de oficios para el lado EMPRENDER: una tabla, filas por
   urgencia de demanda + medidor de 3 barras + disclosure nativo. Gente-only.
   urgente=rojo (--bad) · ventana abierta=azul (--ac). */
.idx-title{font-size:clamp(22px,3.4vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.18;margin:0 0 9px}
.idx-title .acc{color:var(--acink)}
.idx-intro{font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec);max-width:740px;margin:0 0 22px}
.idx-intro b{color:var(--ink);font-weight:700}
/* puerta de tramite oficial del bloque emprender (CF-14, solidez RN 2026-07-15): linea de accion con link externo */
.idx-reg{font-size:14.5px;line-height:1.5;color:var(--sec);max-width:740px;margin:-12px 0 22px;padding:10px 14px;border:1px solid var(--bd);border-left:3px solid var(--teal);border-radius:var(--r-12);background:var(--card)}
.idx-reg a{color:var(--teal);text-decoration:none}
.idx-reg a:hover{text-decoration:underline}
.idx-reg b{color:var(--ink)}
.idx-list{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-16);overflow:hidden;box-shadow:0 1px 2px var(--sh-card),0 16px 34px -28px rgba(26,28,22,.5)}
.idx-row{border-top:1px solid var(--bd)}
.idx-row:first-child{border-top:none}
.idx-row[open]{background:var(--soft)}
.idx-sum{list-style:none;cursor:pointer;display:grid;grid-template-columns:30px 1fr 150px 24px;gap:18px;align-items:center;padding:16px 22px}
.idx-sum::-webkit-details-marker{display:none}
.idx-num{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--dim)}
.idx-main{min-width:0}
.idx-t{font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.idx-h{font-size:var(--fs-body-sm);line-height:1.42;color:var(--sec);margin-top:3px}
.idx-h b{color:var(--ink);font-weight:700}
.idx-meter{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.idx-dl{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.05em}
.idx-bars{display:flex;gap:3px}
.idx-bars i{width:20px;height:5px;border-radius:var(--r-4);background:var(--bd2)}
.idx-row.urg .idx-dl{color:var(--bad)}
.idx-row.urg .idx-bars i.on{background:var(--bad)}
.idx-row.ven .idx-dl{color:var(--acink)}
.idx-row.ven .idx-bars i.on{background:var(--ac)}
.idx-chev{font-family:var(--mono);font-size:12px;text-align:center;transition:transform .15s;color:var(--dim)}
.idx-row[open] .idx-chev{transform:rotate(90deg)}
.idx-row.urg .idx-chev{color:var(--bad)}
.idx-row.ven .idx-chev{color:var(--acink)}
.idx-body{padding:0 22px 20px 70px}
.idx-pk,.idx-ck{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.idx-pk{margin-bottom:9px}
.idx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.idx-chip{font-size:var(--fs-sub);color:var(--ink);background:var(--card);border:1px solid var(--bd2);border-radius:var(--r-8);padding:5px 11px}
.idx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r-12);overflow:hidden}
.idx-cell{background:var(--card);padding:13px 15px}
.idx-ck{margin-bottom:7px}
.idx-row.urg .idx-ck{color:var(--bad)}
.idx-row.ven .idx-ck{color:var(--acink)}
.idx-cv{font-size:var(--fs-sub);line-height:1.45;color:var(--sec)}
.idx-cv b{color:var(--ink);font-weight:700}
@media(max-width:620px){
  .idx-sum{grid-template-columns:26px 1fr 22px;gap:8px 11px}
  .idx-meter{grid-column:2;flex-direction:row;align-items:center;gap:9px;margin-top:4px}
  .idx-chev{grid-column:3;align-self:center}
  .idx-body{padding-left:22px}
}

/* ============================================================================
   PAGINA DE NICHO — piel GENTE (render_nicho_gente): construida con los ELEMENTOS
   nativos de la pagina gente (gente-hero, kpis-g, panel, sec-h, mm-paso, cm-ev,
   ofx-d, mh, firma-gente), NO el molde inversor. Aca solo lo propio del nicho.
   ============================================================================ */

/* LA OTRA PUNTA inversa (nicho gente -> pagina de oficio relacionada; espejo del .of-rel de oficio.css) */
.ng-rel{margin:18px 0 26px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec);
  background:color-mix(in srgb,var(--teal) 6%,var(--card));border:1px solid var(--bd);
  border-radius:var(--r-12);padding:11px 15px}
.ng-rel-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--teal);
  font-weight:600;margin-right:8px}
.ng-rel a{color:var(--teal);font-weight:600;text-decoration:none}
.ng-rel a:hover{text-decoration:underline}

/* veredicto en el hero (pill, mismo color-code que las cajas del split) */
.gh-ver{display:inline-flex;align-items:center;gap:9px;margin:2px 0 14px;padding:7px 14px;border-radius:var(--r-12);
  font-size:var(--fs-body);font-weight:700;border:1px solid}
.gh-ver.refuerza{color:var(--ver);background:var(--ver-soft);border-color:rgba(var(--ver-rgb),.30)}
.gh-ver.presiona{color:var(--pro);background:var(--adv-soft);border-color:rgba(var(--pro-rgb),.28)}

/* la norma que lo mueve — filas limpias dentro del panel */
.ng-norma{display:flex;align-items:flex-start;gap:13px;padding:14px 2px;border-top:1px solid var(--bd);text-decoration:none;transition:.13s}
.ng-norma:first-of-type{border-top:0}
.ng-norma:hover{background:var(--soft)}
.ng-norma-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ng-norma-tx b{font-size:15px;color:var(--ink);line-height:1.3}
.ng-norma-tx span{font-size:var(--fs-body-sm);color:var(--sec);line-height:1.5}
.ng-go{flex:0 0 auto;align-self:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--acink);white-space:nowrap}
@media(max-width:560px){.ng-go{display:none}}

/* quien ya esta — incumbentes con punto de color */

/* mapa de entrada: reusa la fila de definicion ofx-d, con el rotulo en acento */
/* margen propio ARRIBA (L199, el mismo caso que .ng-ejemplos de mas abajo): .panel solo trae
   margin-bottom, asi que .ng-mapa dependia de que el vecino de arriba pusiera la separacion. Con
   `ejemplos` cargados el que separaba era .ng-ejemplos (margin:16px 0) — y en el nicho SIN ejemplos
   .ng-mapa quedaba PEGADO a .ng-huecos (gap 0 en los 4 anchos, cazado por harness_responsivo al
   construir la capa gente de Catamarca). Es el bloque opcional que se rompe con OTRA combinacion de
   vecinos, no con otro ancho. Los 16px colapsan con el margin-bottom de .ng-ejemplos (hermanos
   adyacentes), asi que las 10 paginas que ya tenian ejemplos no cambian. */
.ng-mapa{margin-top:16px}
.ng-mapa .ofx-d{grid-template-columns:130px 1fr}
.ng-mapa .ofx-dk{color:var(--acink)}
@media(max-width:560px){.ng-mapa .ofx-d{grid-template-columns:1fr;gap:3px}}

/* la linea 'seguir' del indicador (clickeable a la fuente) */
.ng-seguir{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-label);color:var(--acink);text-decoration:none}
.ng-seguir:hover{text-decoration:underline}
.ng-mec{margin:13px 0 0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--sec)}
.ng-mec b{color:var(--ink);font-weight:700}

/* tile del motor: el titulo es link (el tile es <div>, sin anchor anidado) */
a.mh-titulo,a.mh-lnk{text-decoration:none;color:var(--ink);transition:.12s}
a.mh-lnk:hover{color:var(--acink)}

/* puntero a recurso con nombre (link_recurso: escuela/organismo) — el nombre ENTERO clickeable,
   flecha adentro; mismo lenguaje que a.mh-lnk (tinta que avisa al hover) */
a.rsrc{text-decoration:none;color:inherit;transition:.12s}
a.rsrc:hover{color:var(--acink)}
.rsrc-f{color:var(--acink);font-family:var(--mono);font-size:var(--fs-micro)}
.mh-cifra{text-decoration:none}

/* grafico de barras comparativas (gente): 'por que aca / cuanto deja' de un vistazo */
.gcb{display:flex;flex-direction:column;gap:14px}
.gcb-row{display:grid;grid-template-columns:120px 1fr auto;gap:8px 14px;align-items:center}
.gcb-lbl{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;color:var(--sec);text-align:right}
/* alto 30 y radio 7: la etiqueta va ADENTRO de la barra destacada (bloque #3, mas abajo). Los
   valores viven aca, en la definicion del componente — hasta el 16-ago el bloque #3 los repisaba a
   79 lineas de distancia y el que leia esta linea veia un 22px que no renderizaba nunca (U9). */
.gcb-track{height:30px;background:var(--soft);border:1px solid var(--bd2);border-radius:var(--r-8);overflow:hidden}
.gcb-fill{height:100%;background:#CDBE9E;border-radius:7px 3px 3px 7px}
.gcb-fill.hi{background:var(--ac)}
.gcb-v{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--fs-body);font-weight:700;color:var(--ink);white-space:nowrap}

/* sub de barra no-destacada: DEBAJO del track (col 2), no en la celda del valor — si engorda la
   columna auto, cada fila queda con track de distinto largo y las barras pierden la base común (L135) */
.gcb-under{grid-column:2;font-family:var(--sans);font-size:var(--fs-micro);font-weight:600;color:var(--acink);margin-top:-4px}
/* sub de la barra DESTACADA (la cuña): mismo lugar que los otros, con el acento que antes daba el chip
   dentro de la barra. El chip .gcb-inl se retiro el 2026-08-01: el item 'hi' es por construccion el de
   menor valor -> la barra mas angosta -> el texto NUNCA entraba y se cortaba (9/22 paginas a 1280px,
   11/22 a 390px). Ver L464 y el comentario en generar_html.py. */
.gcb-under.hi{color:var(--ac);font-weight:700}
/* 2026-08-30 — sube a prosa. Se llama `-nota` y quedo a 15,5 por eso, pero lo que emite en las 37
   hojas de nicho es el argumento del calculo ("la ingenieria basica queda afuera de tu alcance
   porque exige un profesional habilitado..."): mediana 308 caracteres, maximo 1.608. */
.gcb-nota{margin:15px 0 0;padding-top:12px;border-top:1px solid var(--bd);font-size:var(--fs-body-lg);line-height:1.5;color:var(--dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:560px){.gcb-row{grid-template-columns:1fr auto;gap:5px 10px}.gcb-lbl{grid-column:1;text-align:left}.gcb-track{grid-column:1/-1;order:3}.gcb-under{grid-column:1/-1;order:4;margin-top:0}}

/* ¿qué pongo? chips de ejemplos concretos, dentro del bloque del hueco */
.ng-ejemplos{margin:16px 0}  /* margen propio AMBOS lados (L199): sin top quedaba pegado a .ng-huecos */
.ng-ejemplos .idx-chips{margin-bottom:0}
/* motor emprender: link 'ver todos los proyectos' */
.ng-vermas{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;color:var(--acink);text-decoration:none}
.ng-vermas:hover{text-decoration:underline}

/* ============================================================================
   PAGINA DE NICHO GENTE v2 (adaptacion del diseño Claude Design, 2026-07-01):
   hero-colision, desbalance, antes->ahora, cada-proyecto-agranda-el-hueco,
   competis-con-medidor, momento-con-SVG, de-donde-sacamos-3-card. Solo tokens.
   Azul = demanda/lo-que-entra; teal = positivo/oferta-tuya; --gap = tension/hueco.
   ============================================================================ */

/* --- #1 hero: caja-colision (lo que entra vs lo que hay para atenderlo) --- */
.ng-col{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin:4px 0 0}
.ng-col-box{border-radius:var(--r-12);padding:20px 22px;border:1px solid;display:flex;flex-direction:column}
.ng-col-box.entra{flex:5 1 300px;background:var(--ac-soft);border-color:rgba(var(--ac-rgb),.28)}
.ng-col-box.hay{flex:3 1 210px;background:var(--gap-soft);border-color:var(--gap-bd)}
.ng-col-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.ng-col-box.entra .ng-col-k{color:var(--acink)}
.ng-col-box.hay .ng-col-k{color:color-mix(in srgb,var(--gap) 78%,#000)}   /* daba 3,92 */
.ng-col-v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:clamp(30px,5vw,42px);font-weight:600;line-height:1}
.ng-col-box.entra .ng-col-v{color:var(--acink)}
.ng-col-box.hay .ng-col-v{color:var(--gap)}
.ng-col-s{font-size:var(--fs-body);line-height:1.45;color:var(--sec);margin-top:9px}
.ng-col-s .sello{margin-left:0}
.ng-col-lnk{margin-top:auto;padding-top:11px;font-family:var(--mono);font-size:var(--fs-label);color:var(--acink);text-decoration:none}
.ng-col-lnk:hover{text-decoration:underline}
.ng-col-vs{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ng-col-vs span{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@media(max-width:560px){.ng-col-vs{display:none}}

/* tira de KPIs durables ADENTRO del hero (borde superior) */
.ng-herostats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 26px;margin-top:22px;padding-top:20px;border-top:1px solid var(--bd)}
.ng-hs-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.ng-hs-v{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:26px;font-weight:600;line-height:1;color:var(--teal)}
.ng-hs.acc .ng-hs-v{color:var(--acink)}
.ng-hs-un{font-size:var(--fs-sub);font-weight:500;color:var(--dim)}
.ng-hs-u{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-sub);line-height:1.45;color:var(--sec);margin-top:8px}

/* --- remate: caja de cierre de seccion. solido verde = hook fuerte; soft = con sello; amber = ilustrativo --- */
.ng-remate{background:var(--teal);color:var(--card);border-radius:var(--r-12);padding:16px 20px;font-size:15.5px;line-height:1.5;margin-top:18px}
.ng-remate b{font-weight:800;color:var(--card)}
.ng-remate.soft{background:rgba(var(--teal-rgb),.08);border:1px solid rgba(var(--teal-rgb),.22);color:var(--sec)}
.ng-remate.soft b{color:var(--teal)}
.ng-remate.soft .sello{margin-left:0}
.ng-remate.amber{background:var(--soft);border:1px solid var(--bd2);color:var(--sec)}
.ng-remate.amber b{color:var(--ink)}

/* --- #2 el desbalance: barras Demanda (100%) vs Oferta formal (baja) --- */
.ng-db{display:flex;flex-direction:column;gap:12px;margin:0}
.ng-db-row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.ng-db-l{font-family:var(--mono);font-size:var(--fs-micro);color:var(--sec);text-align:right}
.ng-db-t{height:26px;background:var(--soft);border:1px solid var(--bd2);border-radius:var(--r-8);overflow:hidden}
.ng-db-t i{display:block;height:100%;border-radius:var(--r-8)}
.ng-db-t i.dem{background:linear-gradient(90deg,var(--ac),var(--acink))}
.ng-db-t i.ofe{background:var(--gap)}
.ng-cap{margin:12px 0 0;display:flex;justify-content:flex-end}
.ng-cap:empty{display:none}
@media(max-width:560px){.ng-db-row{grid-template-columns:82px 1fr;gap:10px}}

/* --- #3 por que aca se gasta mas: etiqueta ADENTRO de la barra destacada --- */
/* (el alto de `.gcb-track` y el radio de `.gcb-fill` que esto pedia viven en su definicion, arriba) */
.gcb-fill.hi{display:flex;align-items:center;justify-content:flex-end;padding-right:9px}

/* --- #4 ¿que cambio a tu favor? antes -> ahora --- */
.ng-cambio{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.ng-cb-col{flex:1 1 300px;border-radius:var(--r-12);padding:18px 20px;border:1px solid}
.ng-cb-col.antes{background:var(--gap-soft);border-color:var(--gap-bd)}
.ng-cb-col.ahora{background:rgba(var(--teal-rgb),.06);border-color:rgba(var(--teal-rgb),.22)}
.ng-cb-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.ng-cb-col.antes .ng-cb-k{color:color-mix(in srgb,var(--gap) 78%,#000)}   /* daba 3,92 */
.ng-cb-col.ahora .ng-cb-k{color:var(--teal)}
.ng-cb-row{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin-bottom:10px;font-size:var(--fs-body-lg);line-height:1.45;color:var(--sec)}
.ng-cb-row:last-child{margin-bottom:0}
/* la cuarta que usa `--gap` como TEXTO, y se habia quedado afuera del arreglo del 6-sep:
   daba 3,92 igual que sus tres hermanas. No es adorno —la cruz separa la lista de «antes»
   de la de «ahora»—, asi que se oscurece en vez de declararse decorativa (2026-09-07). */
.ng-cb-x{color:color-mix(in srgb,var(--gap) 78%,#000);font-size:15px;font-weight:700;line-height:1.3;text-align:center}
.ng-cb-ck{width:18px;height:18px;border-radius:50%;background:rgba(var(--teal-rgb),.13);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ng-cb-ck svg{width:10px;height:10px}
.ng-cb-arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;color:var(--dim)}
@media(max-width:560px){.ng-cb-arrow{display:none}}
.ng-cb-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--bd)}
.ng-cb-foot>span{font-size:var(--fs-body);color:var(--sec);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ng-cb-foot b{color:var(--ink)}
.ng-cb-lnk{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--acink);text-decoration:none;white-space:nowrap}
.ng-cb-lnk:hover{text-decoration:underline}

/* --- #5 ¿de donde sale la plata? cards del motor (borde) --- */
.mh-grid.ng-cards{border-top:0;padding-top:0}
.mh.card{border:1px solid var(--bd);border-radius:var(--r-12);padding:16px 18px}

/* --- #6 cada proyecto agranda el hueco (ILUSTRATIVO, deriva de la cartera) --- */
.ng-grow-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px;font-size:var(--fs-micro);color:var(--sec)}
.ng-grow-legend .lg{display:inline-flex;align-items:center;gap:7px}
.ng-grow-legend .lg::before{content:"";width:11px;height:11px;border-radius:var(--r-4)}
.ng-grow-legend .lg.dem::before{background:var(--teal)}
.ng-grow-legend .lg.cap::before{width:14px;height:0;border-radius:0;border-top:2px dashed var(--gap)}
.ng-grow{position:relative;height:236px;border-left:1px solid var(--bd2);border-bottom:1px solid var(--bd2);padding:0 6px;margin-bottom:4px}
.ng-grow-cap{position:absolute;left:0;right:0;bottom:15%;border-top:2px dashed var(--gap)}
.ng-grow-cap span{position:absolute;right:4px;top:-15px;font-family:var(--mono);font-size:10px;color:var(--gap)}

.ng-grow-bars{position:absolute;left:10px;right:10px;bottom:0;top:6px;display:flex;align-items:flex-end;gap:5%}
.ng-grow-bar{flex:1;background:linear-gradient(180deg,rgba(var(--teal-rgb),.72),var(--teal));border-radius:7px 7px 0 0;position:relative;min-height:8px}
.ng-grow-top{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--teal);white-space:nowrap}
.ng-grow-x{display:flex;gap:5%;padding:8px 10px 0;font-family:var(--mono);font-size:var(--fs-tag);color:var(--sec);text-align:center}
.ng-grow-x span{flex:1;min-width:0;overflow-wrap:break-word}
.ng-ilus{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.05em;color:var(--dim)}

/* --- #7 ¿contra quien competis? cards con medidor de amenaza --- */
.ng-lead{margin:0 0 16px;max-width:760px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--sec)}
.ng-lead b{color:var(--ink);font-weight:700}
.ng-comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.ng-comp{border:1px solid var(--bd);border-radius:var(--r-12);padding:16px 18px}
.ng-comp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ng-comp-nm{font-size:16px;font-weight:800;color:var(--ink)}
.ng-comp-lvl{font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;white-space:nowrap}
.ng-comp.alto .ng-comp-lvl{color:var(--gap)}
.ng-comp.medio .ng-comp-lvl{color:var(--pro)}
.ng-comp.bajo .ng-comp-lvl{color:var(--ver)}
.ng-comp-meter{display:flex;gap:5px;margin-bottom:11px}
.ng-comp-meter i{flex:1;height:7px;border-radius:var(--r-4);background:var(--bd2)}
.ng-comp.alto .ng-comp-meter i.on{background:var(--gap)}
.ng-comp.medio .ng-comp-meter i.on{background:var(--pro)}
.ng-comp.bajo .ng-comp-meter i.on{background:var(--ver)}
/* incumbente SIN `amenaza` medida: la card va sin etiqueta y sin medidor (2026-08-09). El nivel se
   derivaba de la POSICION en la lista y se publicaba con cara de dato — 40 de esos llegaban a
   pantalla en San Juan, EN VIVO. Sin dato, el hueco se ve como hueco: borde apagado, sin barra. */

.ng-comp-n{font-size:var(--fs-body-sm);line-height:1.5;color:var(--sec)}

/* --- D3 (sesion 4) · la LEYENDA de la barra, una vez por bloque ---------------------------------
   El nivel se publicaba DOS veces por tarjeta (la palabra ALTO/MEDIO/BAJO y la barra del mismo
   color): 239 y 239 sobre las 36 hojas. Quedo la barra; lo que significan sus 3 segmentos se dice
   aca una sola vez, que es donde mejor se lee (regla 8 de IDENTIDAD §2). */
.ng-comp-leg{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;margin:0 0 14px;
  font-family:var(--mono);font-size:var(--fs-tag);color:var(--sec)}
.ng-comp-leg .cl{display:inline-flex;align-items:center;gap:4px}
.ng-comp-leg .cl i{width:11px;height:7px;border-radius:var(--r-4);background:var(--bd2)}
.ng-comp-leg .cl:last-child i:last-of-type{margin-right:3px}
.ng-comp-leg .cl i+i{margin-left:0}
.ng-comp-leg .cl.bajo i.on{background:var(--ver)}
.ng-comp-leg .cl.medio i.on{background:var(--pro)}
.ng-comp-leg .cl.alto i.on{background:var(--gap)}

/* --- D3 · en MOVIL se muestran 4 tarjetas y el resto se despliega -------------------------------
   ⛔ NO es un recorte: los 12 nombres se emiten SIEMPRE al HTML. Esto los colapsa por CSS y solo
   por debajo de 720px, donde el bloque pesaba 2.276 px (13,9% de una pagina de 19,4 pantallas).
   En desktop el toggle y el boton no existen. 25 de las 36 hojas tienen mas de 4. */
.ng-comp-tgl{position:absolute;opacity:0;pointer-events:none}
.ng-comp-mas{display:none}
@media(max-width:720px){
  .ng-comp-tgl:not(:checked)+.ng-comp-grid>.ng-comp:nth-child(n+5){display:none}
  .ng-comp-tgl:not(:checked)~.ng-comp-mas{display:inline-flex;align-items:center;gap:6px;
    margin:12px 0 0;padding:9px 15px;border:1px solid var(--bd);border-radius:var(--r-8);cursor:pointer;
    font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;color:var(--ac);background:var(--card)}
  .ng-comp-tgl:not(:checked)~.ng-comp-mas span{color:var(--sec);font-weight:400}
  .ng-comp-tgl:focus-visible~.ng-comp-mas{outline:2px solid var(--ac);outline-offset:2px}
}

/* --- #8 ¿donde esta tu hueco? caja celeste + mapa con checks --- */
.ng-hueco-box{background:var(--ac-soft);border:1px solid rgba(var(--ac-rgb),.28);border-radius:var(--r-12);padding:18px 22px;margin-bottom:20px}
.ng-hueco-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acink);margin-bottom:9px}
.ng-hueco-box p{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--ink)}
.ng-hueco-box b{font-weight:700}
.ng-mi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px 24px;padding-top:18px;margin-top:6px;border-top:1px solid var(--bd)}
.ng-mi{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.ng-mi-ck{width:22px;height:22px;border-radius:50%;background:rgba(var(--teal-rgb),.12);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ng-mi-ck svg{width:12px;height:12px}
.ng-mi-k{font-size:15px;font-weight:700;color:var(--ink);display:block}
.ng-mi-v{font-size:var(--fs-body);line-height:1.55;color:var(--sec);display:block;margin-top:2px}
.ng-mi-v b{color:var(--ink);font-weight:700}
.ng-reservado{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start;background:rgba(var(--teal-rgb),.06);border:1px solid rgba(var(--teal-rgb),.22);border-radius:var(--r-12);padding:15px 18px;margin-top:18px}
.ng-res-k{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;color:var(--teal)}
.ng-res-body p{font-size:var(--fs-body-lg);line-height:1.6;color:var(--sec);margin:0 0 12px}
.ng-res-incl{margin:0 0 15px;padding:0;list-style:none;display:grid;gap:7px}
.ng-res-incl li{font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink);padding-left:20px;position:relative}
.ng-res-incl li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
.ng-res-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-8);
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;text-decoration:none;
  color:var(--on-ac);background:var(--ac);transition:.13s}
.ng-res-cta:hover{background:var(--acink)}
/* Los Cinco Huecos (diseno DesignSync, adaptado a tokens): frentes del nicho como tarjetas escaneables.
   La respaldada (.hi) resalta en verde con su cifra+sello; las demas quedan "Por dimensionar" (gris). */
.ng-huecos{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;margin-top:2px}
.ng-hueco-c{border:1px solid var(--bd);border-radius:var(--r-12);padding:16px 18px;display:flex;flex-direction:column;min-height:148px;background:var(--card)}
.ng-hueco-c.hi{border-color:rgba(var(--ver-rgb),.34);background:rgba(var(--ver-rgb),.06)}
.ng-hueco-top{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;flex:1}
.ng-hueco-n{font-family:var(--mono);font-size:var(--fs-body);font-weight:600;color:var(--acink);background:var(--ac-soft);border-radius:var(--r-8);width:30px;height:30px;display:flex;align-items:center;justify-content:center}
/* el verde sobre su propio tinte daba 3,84 y es un NUMERO de orden, no adorno: se oscurece
   igual que `.ng-hueco-tag`, que recibio el mismo tratamiento el 6-sep (2026-09-07). */
.ng-hueco-c.hi .ng-hueco-n{color:color-mix(in srgb,var(--ver) 72%,#000);background:rgba(var(--ver-rgb),.13)}
.ng-hueco-t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.ng-hueco-d{font-size:var(--fs-body-sm);line-height:1.45;color:var(--sec);margin-top:3px}
.ng-hueco-tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-tag);font-weight:600;letter-spacing:.04em;color:color-mix(in srgb,var(--ver) 80%,#000);background:rgba(var(--ver-rgb),.1);border:1px solid rgba(var(--ver-rgb),.28);border-radius:var(--r-4);padding:2px 7px;margin-left:7px;vertical-align:middle}
.ng-hueco-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--bd)}
.ng-hueco-tam{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ver)}
.ng-hueco-tam span{font-size:var(--fs-tag);color:var(--dim);margin-left:3px}
.ng-hueco-sll{margin-left:auto}
.ng-hueco-dim{display:inline-flex;align-items:center;gap:7px}
.ng-hueco-dim i{width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.5}
.ng-hueco-dim span{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.03em;color:var(--dim)}

@media(max-width:560px){.ng-mi-grid{grid-template-columns:1fr}.ng-reservado{grid-template-columns:1fr;gap:8px}}

/* --- #10 como se que es el momento v2: viz REAL (serie divergente desde eje 0 / hitos datados)
       + ventana + señal-a-seguir + vigilar. La curva ilustrativa murio (2026-07-05). --- */
.ng-mom-viz{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:2px}
.ng-mom-svg{flex:1 1 300px;min-width:260px}
.ng-mom-svg svg{display:block;width:100%;height:auto}
.ng-dv .ax{stroke:var(--bd);stroke-width:1}
.ng-dv .dv-a{fill:var(--teal)}
.ng-dv .dv-b{fill:var(--bd2)}
.ng-dv .dv-v{font-family:var(--mono);font-size:15px;font-weight:700;fill:var(--ink)}
.ng-dv .dv-l{font-size:11.5px;fill:var(--sec)}
.ng-hitos{display:flex;flex-direction:column;gap:14px;margin:4px 0 2px}
.ng-hito{display:flex;gap:12px;align-items:baseline}
.ng-hito-f{font-family:var(--mono);font-size:var(--fs-tag);font-weight:700;color:var(--teal);flex:0 0 72px;white-space:nowrap}
.ng-hito-t{font-size:var(--fs-body-lg);color:var(--sec);line-height:1.5}
.ng-vent{margin-top:12px}
.ng-mirar{margin:12px 0 0;font-size:var(--fs-body-lg);line-height:1.55}
.ng-mirar-t{color:var(--sec)}
.ng-mirar .ng-seguir{display:inline;margin-top:0}
.ng-vigila{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--bd);font-size:var(--fs-body-lg);color:var(--sec);line-height:1.55}
.ng-vigila-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:6px}
.ng-mom-x{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);text-align:right;margin-top:4px}
.ng-mom-mec{flex:1 1 240px;min-width:220px}
.ng-mom-mec .ng-mec{margin-top:0}
.ng-mom-mec .ng-seguir{margin-top:12px}

/* --- #11 ¿de donde sacamos esto? 3 tarjetas por grado de firmeza --- */
.ng-val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:6px}
.ng-val{border:1px solid var(--bd);border-radius:var(--r-12);padding:16px 18px}
.ng-val-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ng-val-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ng-val-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ng-val-v{font-size:var(--fs-body-lg);line-height:1.5;color:var(--sec)}
.ng-val-v b{color:var(--ink);font-weight:700}
.ng-val.ver{border-color:rgba(var(--ver-rgb),.32);background:rgba(var(--ver-rgb),.05)}
.ng-val.ver .ng-val-dot{background:var(--ver)}.ng-val.ver .ng-val-k{color:var(--ver)}
.ng-val.pro{border-color:rgba(var(--pro-rgb),.32);background:rgba(var(--pro-rgb),.05)}
.ng-val.pro .ng-val-dot{background:var(--pro)}.ng-val.pro .ng-val-k{color:var(--pro)}
.ng-val.est{border-color:rgba(var(--est-rgb),.32);background:rgba(var(--est-rgb),.06)}
.ng-val.est .ng-val-dot{background:var(--est)}.ng-val.est .ng-val-k{color:var(--est)}
.ng-val.tes{border-color:rgba(var(--tes-rgb),.32);background:rgba(var(--tes-rgb),.05)}
.ng-val.tes .ng-val-dot{background:var(--tes)}.ng-val.tes .ng-val-k{color:var(--tes)}

/* ============================================================================
   U2 · /trabajo/escalas — las escalas de convenio, las 5 provincias juntas.
   Vocabulario `esc-*`. No hay molde nuevo: son tres piezas sobre `.panel` y la
   `table` de tokens.css. La pagina reusa ademas el indice `.ofx-*` de esta misma
   hoja, que es el que ya publica cada provincia — un elemento compartido tiene
   UNA sola forma (regla del usuario), y aca lo unico que cambia es que la fila
   dice de que provincia es.
   ============================================================================ */
/* la lectura que abre el bloque de comparacion (es inferencia: lleva su badge tesis) */
.esc-lead{margin:0 0 14px;font-size:var(--fs-body);line-height:1.62;color:var(--ink);text-wrap:pretty}
.esc-lead:last-of-type{margin-bottom:20px}

/* una familia de oficio = un titulito + su tabla. `fixed` para que las columnas
   caigan en la MISMA posicion en las 8 familias: sin eso cada tabla se auto-ajusta
   a su contenido y la comparacion, que es el punto de la pagina, se lee en zigzag. */
.esc-fam{margin:0 0 22px}
.esc-fam:last-child{margin-bottom:0}
.esc-fam-h{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac);margin:0 0 6px;display:flex;align-items:center;gap:9px}
.esc-fam-h::before{content:"";flex:0 0 auto;width:18px;height:2px;border-radius:var(--r-2);background:var(--ac)}
/* ⭐ (2026-09-07, decision del usuario) EL GRUPO ES PLEGABLE. `.esc-fam` paso de `<div>` a
   `<details>` en `/trabajo/escalas` y `/trabajo/formacion`, y su encabezado vive dentro de un
   `<summary>`; en el telefono el JS los cierra (`js_plegar_movil`) y en escritorio quedan abiertos,
   que es como estaban. Sin JS quedan abiertos tambien, que es lo que ve Google.
   ⚠️ El indice «Los otros N» sigue siendo un `<div class="esc-fam">` y NO se pliega: es la unica
   tabla larga de la pagina y lleva tanda de filas. El selector del JS pide `details.esc-fam`, asi
   que la distingue sola.
   ⛔ El triangulo nativo se apaga y se dibuja uno propio: el del navegador se pinta con el color
   del texto del `<summary>` y sale de un tamaño distinto en cada navegador. Los dos
   `::-webkit-details-marker` y `list-style` hacen falta: uno para Safari viejo, el otro para el resto. */
.esc-fam-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:2px 0;border-radius:var(--r-2)}
.esc-fam-s::-webkit-details-marker{display:none}
.esc-fam-s>.esc-fam-h{flex:1 1 auto;margin:0}
/* la flecha propia: mira abajo cerrado y arriba abierto, y es DECORATIVA — el estado real lo
   anuncia el propio `<details>` al lector de pantalla. */
.esc-fam-s::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:2px;
  border-right:2px solid var(--ac);border-bottom:2px solid var(--ac);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.esc-fam[open]>.esc-fam-s::after{transform:rotate(225deg) translate(-2px,-2px)}
.esc-fam-s:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
/* ⚠️ El area tactil de la norma son 44px y un rotulo de una linea no llega: se gana con padding
   vertical SOLO donde el grupo se pliega de verdad, para no separar el encabezado de su tabla en
   escritorio, donde nunca se toca. */
@media(max-width:640px){
  .esc-fam-s{padding:11px 0;min-height:44px}
  details.esc-fam{margin-bottom:0;border-bottom:1px solid var(--bd)}
  details.esc-fam:last-child{border-bottom:0}
}
.esc-fam table{table-layout:fixed}
/* T114 · el encabezado se alinea con SU columna. Traia el `--pad-th` global (9px a la izquierda) y
   la celda 0, asi que el rotulo salia 9px corrido a la derecha de su contenido. Con el eje dibujado
   adentro del `th` eso deja de ser un detalle: las marcas tienen que caer sobre las barras. */
.esc-fam th{padding:7px 10px 7px 0;vertical-align:top}
.esc-fam td{padding:9px 10px 9px 0;border-bottom:1px solid var(--bd);vertical-align:top;line-height:1.45}
.esc-fam tr:last-child td{border-bottom:0}
.esc-fam col.c-prov{width:14%}
.esc-fam col.c-nom{width:33%}
.esc-fam col.c-pay{width:23%}
.esc-fam col.c-esc{width:30%}
/* la celda de paga reusa la barra del indice (.ofx-pv/.ofx-track): misma forma, mismo significado */
.esc-pay .ofx-pv{margin:0 0 5px}

/* las dos columnas de "que decision cambia esto" SUBIERON a `tokens.css` el 2026-08-23 (T59 #10),
   por el mismo motivo que `.tbl-k`: las emiten los dos lados. `negocios/empresas` es de la piel
   INVERSOR y no carga esta hoja, asi que sus 3 clases salian sin una sola regla. */

/* la provincia en la fila del indice: solo sale en la pagina nacional, donde la
   misma tabla junta 5 provincias y el nombre del oficio ya no alcanza para saber
   cual es. En la pagina de provincia no se emite (ahi seria repetir el titulo). */
.ofx-prov{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--bd2);border-radius:var(--r-4);padding:1px 7px;white-space:nowrap}
/* En telefono la tabla de 4 columnas no entra: comprimida, la ultima columna —que es JUSTO la que
   sostiene la lectura de la pagina, de que convenio sale cada cifra— se salia del panel. Cada fila
   pasa a ser una tarjeta apilada: se ve todo, sin scroll horizontal y sin sacar ninguna columna.
   Medido con captura a 390, que es como se vio el defecto. */
@media(max-width:640px){
  /* el apilado vale para TODA tabla de esta pagina, no solo para las de familia: la de convenios
     tiene CINCO columnas y a 390 se salia del panel — se perdian «neto/mes» y la fecha, que son
     justo las dos que el lector vino a ver. Medido con captura a 390, que es como se vio. */
  /* la forma de apilar subio a `tokens.css` como `.tbl-k` el 2026-08-20 (U4): la comparten los 3
     hubs. Aca quedan solo las reglas PROPIAS de la tabla de familias, que no son compartibles. */
  .esc-fam td:first-child{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim)}
  .esc-fam td:nth-child(2){font-weight:600;color:var(--ink)}
  .esc-pg .esc-fam td:last-child .sub{display:inline;margin-top:0}
  /* T114 · apilada, la tabla esconde el `thead` y con el se iba el eje: la barra volvia a ser un
     riel sin escala, que es JUSTO lo que el auditor dijo que en telefono empeora las cosas. El eje
     pasa arriba de la tabla, con el mismo ancho que las barras de las tarjetas de abajo. */
  /* el margen derecho de 10px NO es aire: es el `padding-right` que la celda conserva apilada
     (`.esc-fam td` le gana por orden a `.tbl-k td`), y sin el el eje termina 10px mas a la derecha
     que las barras — o sea que la marca del tope caeria fuera de la escala que rotula. */
  .esc-ax-m{display:block;margin:2px 10px 13px 0}
}

/* ---------------------------------------------------------------------------
   U2b (2026-08-20) · LA ESCALA TIPOGRAFICA, alineada con la PAGINA DE PROYECTO
   RIGI — que es el modelo que el usuario declaro ("los indicadores de tamaño
   son los de los proyectos RIGI").

   MEDIDO sobre el HTML emitido, no supuesto. Los TOKENS son identicos en las
   dos paginas (--fs-body 14,5 · --fs-label 11,5): lo que cambia es CUAL usa
   cada bloque. En el modelo la masa del texto corre a 16,5px (29,3% de los
   caracteres) y sus filas a 15; aca corria el 53,6% a 14,5 y el 19,1% al label
   de 11,5 — el DOBLE de la proporcion del modelo. O sea: la pagina no era mas
   chica por diseño, era mas chica por descuido.

   ⛔ TODO VA SCOPEADO A `.esc-pg`, y no es prolijidad: `.disc`, `td`, `th` y
   `.sub` son clases COMPARTIDAS con las 5 paginas gente y la portada. Subirlas
   sueltas cambiaria 81 paginas desde una decision tomada mirando una. Si el
   usuario decide que la escala nueva es la del sitio, se promueven estas mismas
   reglas al selector pelado y se borra el scope — una linea.
   --------------------------------------------------------------------------- */
/* prosa de contenido: el tamaño del modelo (.pyq-v / .pyd-lec / .pyo-p) */
.esc-pg .esc-lead,
.esc-pg .esc-dec-c p,
.esc-pg .prosa p{font-size:16.5px;line-height:1.6}
/* avisos y filas: el escalon de abajo, no el de tabla */
.esc-pg .disc{font-size:var(--fs-body-lg);line-height:1.58}
.esc-pg td{font-size:15px}
@media(max-width:640px){.esc-pg td{font-size:var(--fs-body)}.esc-pg .sub{font-size:14px}}
/* los rotulos de columna suben del piso (11,5) al escalon que ya usa el sitio
   para un label legible; siguen siendo mono uppercase, no compiten con el dato */
.esc-pg th{font-size:12.5px}
/* el sub-dato (firmante del convenio, fecha, «sin dato publico») estaba en el
   PISO de la escala, 11,5px: es lo que el usuario marco como «muy chiquitas».
   El modelo usa 13 para su equivalente (.py-li-sub). */
.esc-pg .sub{font-size:13px}
.esc-pg .esc-fam-h{font-size:12.5px}

/* LA CIFRA, UNA SOLA FORMA (regla del usuario: elemento compartido = una sola
   forma). El mismo rango neto se dibujaba de tres maneras — 36 veces en mono,
   12 en sans normal y 3 en sans bold. Las de TABLA se unifican en la mono, que
   es la que ya usaban las 36 y la que el sitio reserva para un dato. Las de
   prosa se quedan como prosa: una cifra en medio de una oracion no es celda. */
.esc-pg .esc-num,
.esc-pg .ofx-pv{font-family:var(--mono);font-size:16.5px;font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.2px;white-space:nowrap}
.esc-pg .ofx-pv .b{font-size:var(--fs-label);font-weight:500}
/* la barra de la paga era un hilo casi invisible sobre fondo claro */
.esc-pg .ofx-track{height:6px;border-radius:var(--r-4)}
.esc-pg .esc-pay .ofx-pv{margin:0 0 6px}

/* separador entre las dos tablas del panel de convenios (misma pregunta, dos
   clases de respuesta): antes eran dos paneles y dos moldes de titulo */
.esc-pg .esc-sep{height:1px;background:var(--bd);margin:26px 0 22px}
/* la fecha iba INLINE detras del nombre del convenio y se partia al medio («05-» / «2026»):
   es un dato, no una coletilla. Va en su propia linea, que ademas la deja escaneable en columna. */
.esc-pg .esc-fam td:last-child .sub{display:block;margin-top:3px}
.esc-fam col.c-nom{width:31%}
.esc-fam col.c-esc{width:32%}

@media(max-width:640px){
  .esc-pg .esc-lead,.esc-pg .esc-dec-c p,.esc-pg .prosa p{font-size:16px}
  .esc-pg .esc-num,.esc-pg .ofx-pv{font-size:15.5px}
  .esc-pg td{font-size:var(--fs-body)}   /* 2026-09-17: estaba en 14,5 y es prosa de lectura */
}

/* ===== `.cm-fold` · LA RUEDA PLEGADA (T107, 2026-08-29). Los seis pasos siguen los seis, en su
   orden, con su cifra, su sello y su estado A LA VISTA: lo que se pliega es la explicacion en
   criollo. Estaba en el medio del camino — puertas a 1.556 px, rueda a 2.895, oficios a 4.501 —
   y el lector que bajaba leyendo se la comia entera antes de llegar a donde iba.
   ⛔ No se movio de lugar ni se le saco un paso: mover la mata (contesta «¿esto dura?», y eso va
   antes de elegir oficio) y sacarle pasos rompe la cadena, que es el argumento. */
.cm-fold{display:block}
.cm-fold>summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:stretch;
  border-radius:10px;transition:background .13s}
.cm-fold>summary::-webkit-details-marker{display:none}
.cm-fold>summary:hover{background:var(--bg2,rgba(0,0,0,.03))}
.cm-fold>summary .cm-card{flex:1 1 auto;display:block;position:relative;padding-right:26px}
.cm-fold>summary .cm-card::after{content:"BE";position:absolute;right:8px;top:12px;
  font-size:10px;color:var(--sec);transition:transform .15s}
.cm-fold[open]>summary .cm-card::after{transform:rotate(180deg)}
.cm-fold>summary .cm-h{display:block}
.cm-fb{padding-left:calc(var(--cm-rail-w,34px) + 14px)}
.cm-fb .cm-vos{margin-top:2px}

/* La cabecera del paso, EN UNA FILA. Medido antes de escribir esto: los seis resumenes sumaban
   1.008 px de los 1.775 del bloque, porque la tarjeta apila titulo, cifra, sub, sello y estado
   uno debajo del otro. En una fila el paso se lee de un vistazo y sigue mostrando LO MISMO. */
.cm-fold>summary .cm-card{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
  padding:11px 26px 11px 0;border:0;background:none;box-shadow:none}
.cm-fold>summary .cm-card-h{flex:1 1 230px;min-width:0;margin:0;padding:0;border:0}
.cm-fold>summary .cm-h{font-size:var(--fs-body-lg);margin:0}
.cm-fold>summary .cm-ev{display:flex;align-items:baseline;gap:7px 10px;flex-wrap:wrap;
  margin:0;padding:0;border:0;background:none;flex:0 1 auto}
.cm-fold>summary .cm-ev-pair{display:flex;align-items:baseline;gap:7px}
.cm-fold>summary .cm-n{font-size:var(--fs-body-lg)}
.cm-fold>summary .cm-ev-div{display:none}
.cm-fold>summary .cm-card::after{top:16px}
@media(max-width:640px){.cm-fold>summary .cm-card{gap:4px 10px}}

/* curva de obra — misma estructura que la piel oscura, solo cambia la paleta (regla del repo: un
   elemento compartido tiene UNA forma; lo que difiere por piel es el color). */
.cob-t{background:var(--card);border-color:var(--bd)}
.cob-t i{background:var(--sec)}
.cob-pico .cob-t i{background:var(--acink)}


/* ⭐ EL INDICE DE PAGINA, MAS CHICO EN LA PIEL GENTE (2026-09-16, decision del usuario).
   Las paginas de gente —oficio, emprender, escalas, formacion y la cara gente de provincia— tienen
   entre 10 y 11 destinos con rotulos largos («Cuanto se gana», «Donde me formo»), y a tamano de la
   piel oscura la linea se llevaba dos renglones. Va en ESTA hoja y no en `tokens.css` porque es
   una decision de la piel, no del componente: el elemento y su forma son los mismos.
   ⚠️ Solo de 1100 px para arriba: abajo la `pnav` es el boton flotante y no se toca. */
@media(min-width:1100px){
  nav.pnav{margin:18px 0 4px;padding:8px 0}
  nav.pnav .pnav-lbl{font-size:10.5px}
  nav.pnav .pnav-in>a,nav.pnav .pnav-g>a{font-size:12.5px}
  nav.pnav .pnav-in{gap:3px 11px}
}