/* ============================================================================
   EL RADIO ES DE LOS CONTROLES, NO DEL CONTENIDO (U15, 2026-08-15 — medido, no opinado).
   Se midió caja por caja la página de proyecto (proyectos/vicuna-*.html), que es la referencia
   del idioma nuevo: sus 87 contenedores con marco de 4 lados van a RADIO 0, y sus 57 cajas
   redondeadas son TODAS zona de cierre, .panel/.disc o controles (.opt, .back, .chip, links-botón
   a 8px). Vicuña NO tiene un solo contenedor de contenido redondeado.
   => Un contenedor de CONTENIDO no lleva border-radius; un control, un chip, una pastilla o el
   panel, sí. Por eso .hero-despegue/.kpi/.dossier/.op-card/.ff/.mh/.op-mx-cell/.op-mx-ch/
   .emp-strip/.tes-esl/.tes-piezas/.tes-punch/.ref-lectura/.ref-imp/.ref-ancla/.ind-lectura/
   .clima-watch/.op-perim — y en la portada .wk/.score/.reg-lect/.sig-upd/.card/.maprank/
   .puertas-intro/.pi-door — perdieron el suyo, y .op-chip/.op-mx-chip/.tes-pal/.dsr-medal/
   .dsr-lore/.dsr-readtag/.oc-go/.emp-link/.door y los links de fila con hover (.dm-row/.mr-row)
   lo conservan. Un bloque con FILO IZQUIERDO de acento va siempre a 0: es el patrón .pyv/.pyi/.pyd.
   Si agregás un contenedor, no le pongas radio: la caja se separa por el marco y la regla.
   ============================================================================ */
:root{
  /* Paleta Claude Design (2026-06-27): negro un toque más suave/azulado + bordes BLANCO-ALPHA (no azules
     sólidos: matan el "brillo de borde" que cansaba) + rampa de texto que separa título/cuerpo/secundario. */
  /* ⭐ 2026-08-12 — PALETA DE LA MAQUETA «Vicuña Página» (decisión del usuario: *«tienen más vida, se
     ve más moderno, no tan apagado, y hasta el fondo es un poco más oscuro»*). Fondo más oscuro y más
     NEUTRO (se le va el azul), y la rampa de gris con más contraste entre cuerpo y secundario. */
  --bg:#04050a;--panel:#090c14;--panel2:#070910;--bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
  /* texto: --tx near-white SOLO para títulos/énfasis; --tx2 (cuerpo, gris-perla) reduce fatiga en texto
     largo sobre dark; --mut/--dim escalonan la jerarquía. (Reemplaza la rampa brillante 2026-06-21.)
     ⚠️ --tx2 NO baja a #c3c9d6 (el valor de la maqueta): hay decisión previa del usuario de mantener
     claro el gris secundario de contenido, y el cuerpo es lo que más se lee. El que se oscurece es
     --dim, que es rótulo: ahí el contraste contra el cuerpo es lo que da el escalón. */
  /* ⛔ `--dim` NO se sube hasta `--mut`, y ese es el limite que decide el valor. Los dos son
     grises de la misma familia y el sitio los usa como DOS NIVELES: `--mut` para lo secundario y
     `--dim` para el metadato. Igualarlos deja la etiqueta pesando lo mismo que el dato que
     acompana. Medido sobre el panel oscuro: #7c8496 daba 5,21 de contraste (pasaba WCAG, que pide
     4,5), #8a92a4 da 6,26 y sigue siendo un gris distinto, y #9aa2b3 daria 7,63 pero ES `--mut`. */
  --tx:#e8eaf0;--tx2:#cdd5e1;--mut:#9aa2b3;--dim:#8a92a4;--ink:#04050a;
  /* el gris del rol de la firma. Va aparte de `--dim` porque `.cierre-zone` REMAPEA `--dim` a
     #7c8496 (el valor viejo, anterior a la medicion de arriba) y la firma vive adentro del cierre
     en 206 paginas y afuera en 484: colgada de `--dim` salia con DOS grises distintos sobre el
     mismo fondo. Toma el valor medido de `:root` (6,26 de contraste contra los 5,21 del otro). */
  --firma-rol-tx:#8a92a4;
  /* === accent celeste (bandera argentina) — reemplaza el ámbar (decisión usuario 2026-06-21) ===
     TODO el celeste del sitio sale de acá: cambiar el tono = editar estos tokens, nada hardcodeado.
     (El generar_html.py tiene su propia copia para JS/SVG/mapa: constantes ACCENT* en Python.) */
  /* ⚠️ 2026-08-12: el acento pasa del CELESTE (#7cc0ff, «bandera argentina», decisión 2026-06-21) al
     AZUL de la maqueta. Es reversible en un token, pero conviene saber qué se cambia: se gana vida y
     saturación (el celeste pálido es lo que el usuario leyó como «apagado»), y se pierde la lectura
     literal de la bandera. La celeste sigue presente en el sitio por el mapa y los tints claros. */
  --ac:#5b8cff;            /* acento principal sobre dark (texto, iconos, bordes) — azul Claude Design */
  --on-ac:#04050a;         /* texto SOBRE el acento (botones): oscuro sobre el azul de esta piel */
  --ac-rgb:91,140,255;     /* el mismo azul para tints: rgba(var(--ac-rgb),a) */
  --ac-lo:#9DB8FF;         /* azul claro: acentos GRANDES sobre dark (cifras stat, readtags) */
  /* ⛔ SIN ESTA LINEA EL BOTON DE ACENTO SE BORRA AL PASARLE EL MOUSE, y son 7 paginas.
     `.idx-cta:hover` (tokens.css) pinta `background:var(--acink)`, y esta piel definia `--acink`
     SOLO dentro de `.cierre-zone`. Fuera de esa zona la variable no existe, la declaracion queda
     invalida y el fondo cae a transparente: medido con el color computado, pasa de
     `rgb(91,140,255)` a `rgba(0,0,0,0)` con el texto en `rgb(4,5,10)` sobre el fondo casi negro
     de la pagina. Es el mismo defecto de contraste 1,00 del chip activo que se curo el 2026-08-28.
     El valor no se inventa: es el que `.cierre-zone` ya usaba en esta misma piel. */
  --acink:#9DB8FF;         /* acento sobre dark: hover de los botones de acento (.idx-cta) */
  /* ⚠️ #2E7BC4 hasta el 2026-08-22: daba **4,34** de contraste sobre la tarjeta clara de la
     firma y 4,42-4,50 en `.mr-usd`, o sea por DEBAJO del 4,5 que WCAG AA pide para texto
     normal (12,5px). Medido con `pipeline/revision/contraste.py`, que lee el color computado.
     El valor nuevo no es un azul inventado: es el `--acink` que `despegue-gente.css` ya define
     para ESTE mismo trabajo («texto/link de acento sobre el claro»). Sube a 5,12 / 5,22.
     ⚠️ Al unificar la firma (2026-09-17) `.firma-rol` desaparecio, asi que el consumidor sobre
     fondo claro que queda es `.mr-usd`. */
  --ac-hi:#1E6FB8;         /* celeste profundo: texto/cifras sobre el hero claro */
  --ac-mid:#2E6FA8;        /* arranque de gradiente (barras de stat) */
  --ac-dk:#12354E;         /* arranque de gradiente muy oscuro (swatch del legend) */
  /* hero como tarjeta CLARA (antes bloque ámbar): superficie + textos sobre claro */
  --hero-bg1:#F6FAFE;--hero-bg2:#E7F1FB;--hero-bd:#CFE0EF;--hero-card:#FBFDFF;
  --hero-tx:#17222E;--hero-sub:#39556A;--hero-mut:#5A7184;
  --cy:#27D3C4;
  /* ⭐ `--prv` — EL COLOR DEL RECORRIDO PROVEEDOR (P5, 2026-08-24). Nace como token propio, igual
     que `--ac` (inversor) y `--cy` (gente), y NO se recicla de la escala de sellos: `--ver` verde,
     `--pro` ambar, `--est` violeta, `--tes` gris y `--sin` rojo son los CINCO SELLOS de confianza, y
     `--urg` es la fase urgente. Pintar la tercera puerta con cualquiera de esos la haria leer como
     un sello — justo en el sitio donde el sello es el moat (es lo mismo que `T142` acaba de curar).
     ⚠️ Y el atajo que parecia obvio NO sirve: el oro `--pro` figura en la memoria del proyecto como
     personalizacion deliberada del usuario y es tentador por el nombre, pero es el color del sello
     `probable`, no el del proveedor.
     El rosa-magenta es la unica franja de tono que el sitio no usa para nada. Se cambia editando
     esta linea; lo que no se puede es que sea un color de la escala de confianza. */
  --prv:#f472b6;--prv-rgb:244,114,182;
  /* semáforo + sellos, con los tonos de la maqueta: más saturados y un punto más profundos que los
     pasteles anteriores (#4ADE9C / #E5C15C / #FF7070), que es de donde salía el «no tan apagado». */
  --ok:#35d07f;--warn:#e0b64a;--bad:#ff6b4a;
  /* ⚠️ --est se queda VIOLETA: la maqueta le da el mismo azul que al acento, y acá los cinco sellos
     tienen que distinguirse entre sí (es lo que la leyenda del pie promete). --tes SÍ toma el gris de
     la maqueta, que además resuelve una colisión: el azul viejo (#7AB0FF) queda casi igual al acento
     nuevo. Y es coherente: una tesis no es evidencia, así que no lleva color de evidencia. */
  --ver:#35d07f;--pro:#e0b64a;--est:#B79BFF;--tes:#9aa2b3;--tes-rgb:154,162,179;
  /* U7-bis (2026-08-15) — los `-rgb` companeros de la escala de confianza, para que un TINTE del
     mismo color no tenga que escribirse a mano: `rgba(var(--ver-rgb),.08)` en vez de
     `rgba(74,222,156,.08)`. Nacen de una medicion: habia 73 tintes escritos a mano en las hojas
     oscuras, y varios eran el MISMO color con un digito de diferencia (cuatro verdes, tres oros).
     Sin el companero `-rgb` no hay forma de tintar un token en CSS, y por eso se escribian duros.
     ⚠️ El valor tiene que ser EL MISMO que el solido de arriba, o el tinte y el solido se separan. */
  --ver-rgb:53,208,127;--pro-rgb:224,182,74;--cy-rgb:39,211,196;
  --bad-rgb:255,107,74;--est-rgb:183,155,255;
  --hero-tx-rgb:23,34,46;  /* el unico que faltaba: 3 tintes del texto del hero, a mano (17-ago) */
  /* ⭐ 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 9 veces. Probado declaracion por declaracion con `verificar_tokens.py`. */
  --bd-row:#101722;        /* ⭐ la linea que separa filas: td .rf .tes .sig .vc .lrow .emp (9 usos) */
  --tx-hi:#F2F5F9;         /* enfasis maximo: titulo de detalle abierto, valor de KPI */
  --white:#fff;            /* blanco puro (venia escrito #fff y #FFF) */
  --sin:#FF8A8A;           /* ⭐ el 5º sello. --ver/--pro/--est/--tes ya eran token; este era el unico
                              con el color escrito a mano, y en la piel clara ni siquiera es el mismo
                              criterio (alla `.se-c.sin` reusa --bad). Ver `tareas-proyectos-rigi.md`. */
  --mut-hi:#A6B6CA;        /* numeros en negrita del score (mas claro que --mut) */
  --dim2:#5f6779;--dim3:#46556e;--dim4:#3a404f;   /* la escalera de grises por debajo de --dim */
  --tint:rgba(255,255,255,.014);  /* el velo casi invisible del fondo (paleta de tesis, embudo) */
  --adv-bg1:#16110A;--adv-bg2:#0F0B06;--adv-bd:#5C4A1A;  /* la banda de advertencia, en oscuro.
     ⚠️ `--adv-bd` existe con el MISMO nombre y OTRO valor en la piel clara: eso es el modelo. */
  --card-hover:#121925;    /* tope del degradado al pasar el mouse por una tarjeta */
  --urg:#F2A33C;           /* fase URGENTE. Nombre propio a proposito: NO cuelga del oro --pro.
                              ⚠️ El mismo hex sale ademas 48 veces INLINE desde `i18n_*.py` (FASE_META),
                              que ninguna hoja ve — anotado en `tareas-proyectos-rigi.md`. */
  --grid-hero:rgba(231,235,242,.075);--grid-res:rgba(231,235,242,.055);  /* cuadricula del molde */
  --gc-seg:#2c3645;--gc-dir:#3a72b4;   /* segmento neutro y «directo» del grafico de cadena */
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
}
/* paleta del CIERRE en esta piel (OSCURA). La estructura vive en cierre.css; mapea los nombres que el
   cierre espera (--card/--ink/--acink/...) a la paleta dark. --on-ac = texto sobre el acento claro. */
.cierre-zone{--paper:#04050a;--card:#090c14;--soft:#070910;--bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
  --ink:#e8eaf0;--sec:#cdd5e1;--dim:#7c8496;--ac:#5b8cff;--acink:#9DB8FF;--ac-soft:rgba(91,140,255,.12);
  --ver:#35d07f;--pro:#e0b64a;--bad:#ff6b4a;--on-ac:#04050a}
/* (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. Un token sin
   consumidor es la version silenciosa del CSS muerto — no rompe nada y confunde al leer.) */

body{margin:0;background:radial-gradient(1000px 540px at 72% -8%,rgba(var(--ac-rgb),.05),transparent 60%),var(--bg);
  color:var(--tx2);font:15.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}

/* header — MEDIDAS en tokens.css (chrome compartido entre skins); acá SOLO el color de esta piel */
header{background:linear-gradient(180deg,var(--panel),rgba(5,7,11,.93))}
.brand{color:var(--tx)}
.brand-tag{color:var(--dim)}
.chip{color:var(--mut)}
.chip.cy{color:var(--cy);border-color:rgba(var(--cy-rgb),.35);background:rgba(var(--cy-rgb),.07);display:inline-flex;gap:6px;align-items:center}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.langsw b{background:var(--ac);color:var(--ink)}
.langsw a{color:var(--mut)}
.langsw a:hover{color:var(--tx)}
.coords{color:var(--mut)}
.co-est.co-ok{color:var(--ok)}
.co-est.co-esp{color:var(--warn)}
.swn-d summary{color:var(--mut);background:var(--panel2)}
.swn-d summary:hover{border-color:rgba(var(--ac-rgb),.5);color:var(--ac)}
.swn-m{background:var(--panel);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.swn-g{color:var(--ac)}
.swn-i{color:var(--tx2)}
.swn-i:hover{background:rgba(var(--ac-rgb),.08);color:var(--ac)}
.swn-i.cur{color:var(--ac);background:rgba(var(--ac-rgb),.08)}

/* 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 — el unico modificador de la familia que NO tenia regla propia, y no por decision: su clase `tw`
   venia recibiendo la del TICKER por colision de nombre (ver el bloque `.tkw`, 2026-08-16). Al sacarle
   el accidente quedaba como el unico boton sin identidad al pasar el mouse, contra `wa` (verde
   WhatsApp), `li` (azul LinkedIn) y `cp` (verde de copiado). Se completa con la MISMA formula de la
   familia —color de marca + borde .55 + fondo .1— y el negro real de X, que en piel oscura se lee
   como su blanco. Ningun valor nuevo de estructura: la formula ya existia. */
.share-b.tw:hover{color:var(--white);border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}

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

/* ticker (tamano minimo subido — decision 4, 2026-06-10)
   ⚠️ SE LLAMA `.tkw`, NO `.tw` — renombrado el 2026-08-16 (U16·U3b) porque `.tw` chocaba, y el choque
   estaba PUBLICADO. `tw` es tambien el modificador de la barra de compartir (`class="share-b tw"` = el
   boton de X, 196 instancias en las dos pieles), y las dos reglas son de un solo `.clase`, o sea IGUAL
   especificidad: gana la que esta mas abajo en la hoja. El ticker estaba mas abajo (linea 113 contra
   105), asi que el boton de X venia recibiendo `height:36px` y `overflow:hidden` del TICKER — 2 px mas
   alto que sus 4 hermanos (`wa` `li` `cp` `nat`) y con su contenido recortado, en 115 paginas oscuras.
   Se renombra el TICKER (2 instancias, solo la portada ES y EN) y no el modificador (196): mismo
   arreglo, 98× menos superficie. La piel CLARA se salvaba solo porque no enlaza esta hoja — o sea que
   el choque era una bomba con la espoleta puesta para el dia que se unificaran las hojas, que es
   justo lo que se hizo hoy.
   ⛔ No poner nombres de dos letras en una hoja compartida: `tw` ya significa TRES cosas en el repo
   (ticker · twitter/X · table-wrap en `medicion_audiencia.py`, que se salva por tener `<style>` propio). */
.tkw{overflow:hidden;border-bottom:1px solid var(--bd);background:var(--panel2);height:36px}
.tk{display:flex;gap:42px;white-space:nowrap;padding:9px 0;animation:roll 50s linear infinite;font-family:var(--mono);font-size:var(--fs-body)}
.tkw:hover .tk{animation-play-state:paused}.tk s{text-decoration:none;color:var(--mut)}.tk b{color:var(--tx);font-weight:500}.tk .a{color:var(--ac)}.tk .c{color:var(--cy)}
@keyframes roll{to{transform:translateX(-50%)}}
/* ⭐ `--w-page` — el ancho del sitio, declarado en `tokens.css` (se mudo alli el 2026-09-18 para
   que la piel clara tambien lo lea). Hasta el 2026-08-27 habia CINCO anchos distintos
   (964 · 988 · 1164 · 1244 · 1280 utiles) y el usuario lo cazo navegando: *«son todos distintos»*.
   ⛔ Lo que decia este comentario hasta el 18-sep —que la piel clara no lo usa porque ensancharla
   lleva el renglon a 199 caracteres— se midio y era cierto A MEDIAS: los parrafos del cuerpo topan
   en 720px, pero `.disc`, `.idx-h` y `.idx-cv` no topaban en nada y ya salian a 144 caracteres. Al
   ensanchar la piel clara se les puso tope; el ancho quedo igualado. */
.page{max-width:var(--w-page);margin:0 auto;padding:16px 18px 60px}

/* ===== barra-indice sticky (portada + provincia inversor; molde xN D1 2026-07-15) =====
   se apoya JUSTO debajo del header (--hh la fija el JS = alto real del header, que envuelve en movil).
   En movil es una fila de chips que scrollea de costado; el chip activo se auto-centra (JS). */
/* presencia V1+V2 (decision usuario 2026-07-15, captura comparada): banda con fondo PROPIO (mas
   clara que el header) + subrayado celeste de 2px + chips con peso (semibold, texto claro) —
   la barra se despega del header y los chips invitan al click. */
.pnav{--pnav-bg:#101623;position:sticky;top:var(--hh,54px);z-index:18;background:#101623;border-top:1px solid var(--bd);border-bottom:2px solid rgba(var(--ac-rgb),.75);box-shadow:0 12px 26px -12px rgba(0,0,0,.9)}

/* etiqueta "Ir a" fija (fuera del scroll): anuncia que la barra ES navegacion, con un tick de acento */
.pnav-lbl{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ac);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;box-shadow:0 0 7px -1px var(--ac)}

/* chips = pastillas con borde (se leen tappables); el activo se rellena de celeste (como el switch ES/EN) */
.pnav a{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.03em;color:var(--tx);text-decoration:none;padding:7px 15px;border-radius:var(--r-8);border:1px solid var(--bd2);background:var(--panel2);white-space:nowrap;transition:.13s}
.pnav a:hover{color:var(--tx);border-color:rgba(var(--ac-rgb),.5);background:rgba(var(--ac-rgb),.12)}
/* T122 (2026-09-02) — el CONTADOR dentro del chip de la barra fija. El chip decia adonde lleva
   y no cuanto hay del otro lado, y en una pagina de 6.194 px eso es lo que decide si saltas. */
.pnav-n{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:var(--r-4);
  background:rgba(var(--ac-rgb),.16);color:var(--ac);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.02em;vertical-align:1px}
.pnav a.on .pnav-n{background:rgba(0,0,0,.22);color:var(--on-ac)}

/* aterrizaje de las anclas de la barra bajo la zona sticky (header+barra); --stick lo fija el JS.
   La lista cubre portada + provincia inversor (anclas nuevas D1 2026-07-15). */
#provincias,#tablero,#verificado,#ref-sec,#tesis,#cartera,#fuentes,#producto,
#dossier,#indicadores,#clima,#op-sec,#empresas,#watchlist,
/* eje del programa (TANDA 0 revision externa 2026-08-24): sus 8 anclas ya existian en el
   h2 y no tenian aterrizaje; con la barra-indice encima lo necesitan. `#lectura` y
   `#normas` los emite tambien la ficha de reforma, que NO tiene barra: ahi --stick vale
   hh+14 y el salto queda bajo el header, que es lo correcto y hoy no lo hacia. */
#promesa,#dato,#serie,#historia,#lectura,#normas,#mercados,#reloj{scroll-margin-top:var(--stick,112px)}
/* boton "volver arriba" (xN, D4): aparece al bajar (.show por JS) */
.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(12,16,24,.92);backdrop-filter:blur(8px);color:var(--ac);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s}

.totop:hover{border-color:rgba(var(--ac-rgb),.55);background:rgba(var(--ac-rgb),.14)}
/* ===== secciones/paneles plegables (referencia): cabecera clickeable + cuerpo colapsable =====
   patron unico: feed / cartera / metodo (panel con .ph) y track record (summary con clase .sec-h).
   El caret resetea el ::before del .sec-h (que trae su propio guion-acento) via width/height/background auto. */
/* ÁREA DE TOQUE — min-height 24px = piso AA de WCAG 2.5.8 (Target Size), sobre TODO `summary` y no
   caso por caso: el barrido midio 23-29 px en viewport tactil y el parche puntual dejaba afuera los
   `<details>` sin clase propia (`dsr-fold`) y cualquiera que se agregue despues. NO se sube a los 44
   de la guia de Apple / nivel AAA: engordaria 197 paginas en todas las pieles sin que nadie lo pida.
   Decision del usuario, 2026-08-13 (control total, decision 2). Lo mide `pipeline/barrido_render.py`. */

.sec-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.sec-fold>summary::-webkit-details-marker{display:none}
.sec-fold>summary::before{content:"\25B8";width:auto;height:auto;background:none;color:var(--ac);font-size:12px;line-height:1;transition:transform .15s;flex:0 0 auto}
.sec-fold[open]>summary::before{transform:rotate(90deg)}
.sec-fold>summary .ph{flex:1;margin:0}
.sec-fold.panel[open]>summary{margin-bottom:16px}
/* fold NO-panel CERRADO (#tesis sf-mobile en movil): su .panel interno -que aporta el gap- esta
   display:none -> sin margen propio pega con el bloque siguiente (harness 360/390). Solo cerrado:
   abierto, el .panel interno ya separa (evita doblar el margen). */
.sec-fold:not(.panel):not([open]){margin-bottom:22px}
.sec-fold>summary:hover .ph h3,.sec-fold>summary:hover .ph h2{color:var(--ac)}
/* summary tipo sec-h (track record): mantiene el look de encabezado de seccion; hover tinta el titulo */
.sec-fold>summary.sec-h:hover{color:var(--ac)}
/* T60-B — el titulo de una seccion plegada de la ficha de proyecto es un <h3> DENTRO del summary:
   asi entra en el esquema de encabezados de la pagina, que es lo que el frente B vino a arreglar,
   sin dejar de ser un <summary> clickeable. La regla lo devuelve a la tipografia del summary para
   que no mueva un pixel: el navegador le pondria 1.17em, negrita y un margen propio arriba y abajo.
   El guion-acento (::before) y el gap siguen viviendo en el .sec-h del summary. */
.sec-fold>summary.sec-h>.sf-h{font:inherit;letter-spacing:inherit;color:inherit;margin:0}

/* ⭐ HERO — port de `Hero A · Oscura reglada` (2026-08-17, decisión del usuario: «me quedo con la
   capa negra»). Reemplaza a la tarjeta BLANCA del 2026-06-21, que a su vez había reemplazado al
   bloque ámbar. El hero deja de ser una CAJA y pasa a ser una zona REGLADA sobre el fondo del
   sitio: filo abajo, la firma con filo a la izquierda, y el desglose como barra proporcional.
   ⚠️ Alcance medido antes de tocar (P3): `.hero-despegue` vive en 12 páginas — la portada Y las 5
   provincias inversor, en ES y EN. Es un elemento COMPARTIDO y por eso cambia en las 12: una sola
   forma, lo único que cambia por piel es la paleta.
   ⛔ Los resets van DECLARADOS (`background:none`, `border:0`, `border-radius:0`) y no omitidos:
   omitir deja caer al default de la skin o del navegador (trampa ya pagada el 16-ago). */
.hero-despegue{display:flex;gap:34px;align-items:flex-start;background:none;color:var(--tx);
  border:0;border-bottom:1px solid var(--bd);padding:2px 0 22px;margin-bottom:16px}
.hero-despegue h1{margin:0 0 9px;font-size:clamp(29px,4.4vw,44px);line-height:1.02;font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;color:var(--tx)}
.hero-despegue p{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut);max-width:700px}
/* la firma deja de ser tarjeta y pasa a columna con filo. SOLO dentro del hero: `.hd-firma` suelta
   vive en otras 102 páginas (nicho, proyecto) y ahí sigue siendo tarjeta. */
/* ⚠️ el `display:flex` / `align-items` los pone `.firma` en tokens.css (columna, una sola forma en
   las dos pieles). Acá queda SOLO lo que es de esta superficie: la caja y su lugar en la fila. */
/* ⭐ Q4 CONTESTADA POR EL USUARIO (2026-08-27): el blanco NO era deliberado. La tarjeta suelta
   de la firma pintaba `--hero-card` (#FBFDFF, casi blanco) y era **el unico bloque claro de la piel
   oscura** en 216 paginas -- 169 de `/reformas/`, 40 de `/programa/` (ES+EN) y 7 mas. Textual:
   *«eso lo podemos cambiar porque ya vi que el negro existe»*, y tenia razon: el negro ya existia
   y estaba probado -- es lo que `.nicho .hd-firma` venia aplicando en 130 hojas de nicho desde que
   nacio la piel. Acá se promueve a la BASE, con los mismos tres tokens (`--panel` / `--bd` / `--tx`),
   asi que las 216 quedan identicas a las 130 que ya se veian bien.
   ⛔ Las 22 paginas con la firma DENTRO del hero no cambian: `.hero-despegue .hd-firma` resetea el
   fondo a `none` y hereda, y ese reset sigue declarado abajo.
   ⚠️ Con esto `--hero-card` se queda SIN UN SOLO USO (era el unico). Se conserva el token
   porque `--hero-bg1/bg2/bd` siguen vivos y son una paleta, pero queda declarado para el proximo
   barrido de CSS muerto.
   ⚠️ Lo que ESTO NO ARREGLA, y sigue abierto en `R9`: la tarjeta mide 1.240 px y su contenido
   llega a 675 -- el 47% derecho queda vacio. Eso es ancho, no paleta. */
/* ⭐ TOPE DE ANCHO (decision del usuario, 2026-08-31) — es lo que `R9` venia midiendo y lo que de
   verdad se veia mal: `flex:0 0 320px` SOLO manda si el padre es una fila flex. Donde la tarjeta va
   suelta mas abajo el flex no aplica, y la caja se estira a **1.240 px con el contenido llegando a
   675** -- el 47% derecho vacio. El tope la cierra sin tocar nada adentro, y en la fila flex es
   inerte (320 < 46rem). Textual del usuario: *«esa tarjeta inferior deberiamos corregirla porque es
   el mismo elemento en todos lados y expandido no se ve bien»*. */
.hd-firma{margin-left:auto;flex:0 0 320px;border:1px solid var(--bd);border-radius:var(--r-12);padding:14px 16px;background:var(--panel);color:var(--tx);max-width:min(100%,46rem)}
/* ⭐ Q9 (decision del usuario, 2026-09-03) — EL TOPE DE ARRIBA SE SUELTA DONDE LA TARJETA VA SUELTA.
   El tope de 46rem se puso el 31-ago contra el defecto correcto («expandido no se ve bien»: 1.240 px
   de caja con 675 de contenido), pero curaba el SINTOMA — achicaba la caja en vez de hacer que el
   contenido llenara— y por eso el usuario volvio a marcarla el 3-sep con la queja del otro lado:
   «angosta, alta y deja un espacio vacio a la derecha». Medido: 736 px de tarjeta contra 1.244 de
   sus vecinos, o sea 526 px de hueco, y 4 credenciales apiladas.
   La causa se arregla en `tokens.css`: las credenciales pasan a una REJILLA que se reparte el ancho,
   asi que a 1.244 px entran las cuatro en una linea y el filo llega hasta el texto. Con el contenido
   llenando, la caja ya puede acompañar a sus vecinos y el hueco desaparece por los dos lados.
   ⛔ Solo aplica donde la tarjeta va SUELTA en el cuerpo (hija directa de `.page`). En la fila flex
   del hero sigue mandando `flex:0 0 320px` y la columna angosta no cambia. */
.page>.hd-firma{max-width:none}
/* ⛔ ACA VIVIAN las cuatro reglas de la firma DENTRO del hero (columna de 340 px, sin tarjeta, con
   filo a la izquierda). Se retiran el 2026-09-17: la firma es una sola forma en todo el sitio y no
   se emite dentro de ningun hero — medido en navegador sobre las 779 paginas que la llevan, cero. */
/* el parrafo de posicionamiento, como CITA con filo — es el elemento de la maqueta que lo separa
   del dato de arriba: hasta acá se informa, de acá para abajo se dice quiénes somos. */
.hero-despegue>.hd-left>p:last-child{padding-left:16px;border-left:2px solid var(--ac);color:var(--mut)}
/* segunda linea de la entradilla del hero: como se lee una fila de la tabla. Va aparte del
   parrafo que dice que hay adentro, dentro de la misma cita. */
.hd-lead2{display:block;margin-top:8px}
/* La entradilla de la FICHA DE NORMA no viene despues del h1 sino despues de las etiquetas (o de
   la linea «deriva de»), y ahi no hay margen que la separe: en la captura del 2026-09-02 el filo
   azul arrancaba pegado al borde de abajo de los chips. Se separa SOLO en ese caso, por el hermano
   anterior, para no mover la entradilla del hub, que si tiene el margen del h1. */
.rfp-chips+p,.rfp-madre+p{margin-top:16px}
/* avatar del autor (Claude Design): disco con degradé + iniciales (o foto). Funciona sobre claro y oscuro. */
.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» en mono) y el nombre como ENLACE subrayado.
   Se retiran el 2026-09-17 con la unificacion de la firma: el rol ahora es `.pp-firma-r` y el
   nombre es texto — el unico enlace es «Metodologia y trayectoria». Medido: 0 emisiones de las dos. */
.hd-nombre{font-weight:700;font-size:var(--fs-body-lg)}
/* color y peso; la LISTA (filo por item, mono, ritmo) la pone .firma-creds en tokens.css */
/* ⛔ `--dim` y NO `--hero-sub`: al pasar la tarjeta a oscura (2026-08-27) el gris azulado del
   hero claro (#39556A) quedo a **2,50** de contraste sobre `--panel`, debajo del piso 3,0 de
   WCAG hasta para texto grande. `--dim` da **5,21**. Medido con `revision/contraste.py` sobre
   las 454 paginas con firma, que es el unico instrumento que lee el color COMPUTADO contra el
   fondo EFECTIVO -- leyendo el CSS esto no se ve. Dentro del hero el fondo sigue siendo claro y
   por eso `.hero-despegue .hd-creds` mantiene el suyo, declarado arriba. */
.hd-creds{color:var(--dim)}
.hd-creds li{border-bottom-color:var(--hero-bd)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.kpi{background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--bd);padding:15px 16px;transition:.13s}
.kpi:hover{border-color:rgba(var(--ac-rgb),.55)}
.kpi .k{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.kpi .v{font-family:var(--mono);font-size:28px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.kpi .v .kpre{font-size:.62em;color:var(--mut);font-weight:500;margin-right:1px}
.kpi .u{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);margin-top:4px}
.kpi.acc .v{color:var(--ac)}
/* ⭐ `.kpi.dom` (2026-09-02) — el tile DOMINANTE de una fila de KPIs. Nace del arreglo que el
   reporte externo de `encadenamientos` marco obligatorio: cuatro cifras del mismo cuerpo no
   tienen orden de lectura, y la que la pagina defiende es UNA. No agrega color: es `.acc` mas
   cuerpo, de modo que el orden se lee sin leer los rotulos. Se pone en UN tile por fila. */
.kpi.dom .v{font-size:38px;line-height:1.06}
/* .kpi.go (U3 de la sesion 2, 2026-08-25) — el KPI que es PUERTA al bloque que cuenta. Espejo de
   `.kpi-g.go`/`.kg-go` de la piel gente, que ya publicaba esta forma: mismo afford (`ver` + flecha
   arriba-derecha), misma caja tocable que ilumina al hover. Lo unico que cambia es la paleta.
   ⚠️ `display:block` porque el elemento pasa a ser un <a>: sin esto hereda `inline` y el padding
   deja de empujar la caja. Y `color:inherit` para que el <a> no pinte de azul los tres textos. */
.kpi.go{display:block;text-decoration:none;color:inherit;cursor:pointer}
.kpi.go:hover{border-color:var(--ac);background:rgba(var(--ac-rgb),.05)}
.k-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.k-go{font-family:var(--mono);font-size:var(--fs-label);color:var(--cy);white-space:nowrap;flex:0 0 auto}
.kpi.acc .k-go{color:var(--ac)}

/* ===== DOSSIER de provincia (ancho completo, decision usuario 2026-06-14; mockup Claude Design
   adaptado a la paleta ambar) ===== */
.dossier{position:relative;margin:0 0 14px;border:1px solid var(--bd2);overflow:hidden;
  background:linear-gradient(162deg,#0E1422,var(--panel) 58%,var(--panel));box-shadow:0 24px 70px -34px rgba(0,0,0,.8)}
.dsr-strip{height:2px;background:linear-gradient(90deg,var(--ac),rgba(var(--ac-rgb),0))}
/* hero */
.dsr-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:26px 30px 22px;border-bottom:1px solid var(--bd)}
.dsr-hk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;font-family:var(--mono)}
.dsr-region{padding:4px 10px;border:1px solid rgba(var(--cy-rgb),.3);border-radius:var(--r-4);background:rgba(var(--cy-rgb),.07);font-size:var(--fs-micro);font-weight:600;letter-spacing:.15em;color:var(--cy)}

.dsr-doss{font-size:var(--fs-label);letter-spacing:.14em;color:var(--dim)}
/* sin degrade vertical (2026-06-21, pedido usuario): titulo en color solido, alto contraste */
.dsr-name{margin:0;font-family:var(--sans);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(36px,5.5vw,62px);line-height:.9;letter-spacing:.01em;color:var(--tx)}
.dsr-sub{margin-top:11px;font-family:var(--mono);font-size:var(--fs-body-sm);letter-spacing:.02em;color:var(--mut)}
.dsr-medalwrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px}
/* caja agrandada + padding + min-height auto: el contenido (etiqueta + numero + etiqueta) no entraba
   en los 94px fijos y "PROVINCIAL" se salia por abajo (fix 2026-06-21, reporte usuario) */
/* ⛔ Y LO MISMO POR EL COSTADO (2026-09-17, reporte del usuario: «sale fuera del cuadrado»). El ancho
   era fijo en 120 px y dejaba 100 útiles entre paddings, pero «RANKING ECON.» mide ~118 y no puede
   cortar (nowrap): se salía 9 px por la derecha en las 10 páginas, a cualquier ancho. La caja pasa a
   crecer con su texto —sigue siendo cuadrada cuando la etiqueta entra— en vez de recortarlo. */
.dsr-medal{width:auto;min-width:120px;min-height:120px;border-radius:var(--r-16);border:1px solid rgba(var(--ac-rgb),.4);
  background:linear-gradient(160deg,rgba(var(--ac-rgb),.13),rgba(var(--ac-rgb),.03));display:grid;place-items:center;padding:14px 16px}
.dsr-medal-in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;gap:4px}
/* etiquetas en UNA linea, centradas; menos tracking para que entren en la caja sin clip */
.dsr-rank-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.05em;text-align:center;line-height:1.2;white-space:nowrap;color:var(--ac-lo)}
.dsr-rank{font-family:var(--sans);font-weight:800;font-size:42px;line-height:1;text-align:center;color:var(--ac)}
.dsr-delta{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid rgba(var(--ver-rgb),.32);border-radius:var(--r-pill);
  background:rgba(var(--ver-rgb),.08);font-family:var(--mono);font-size:var(--fs-label);font-weight:600;color:var(--ver)}
/* leader */
.dsr-leader{display:flex;align-items:center;gap:16px;padding:17px 30px;border-bottom:1px solid var(--bd);background:rgba(255,255,255,.012)}
.dsr-ava{flex-shrink:0;width:52px;height:52px;border-radius:50%;border:1px solid var(--bd2);
  background:linear-gradient(160deg,#16202f,#0e1622);display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:16px;color:var(--cy);overflow:hidden}
.dsr-ava img{width:100%;height:100%;object-fit:cover;display:block}
a.dsr-ava{text-decoration:none;transition:.13s}
a.dsr-ava:hover{border-color:var(--cy)}
.dsr-lk{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.17em;color:var(--cy);margin-bottom:5px}
.dsr-lrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dsr-lname{font-family:var(--sans);font-weight:700;font-size:19px;color:var(--tx)}
.dsr-since{padding:3px 8px;border:1px solid var(--bd2);border-radius:var(--r-4);font-family:var(--mono);font-size:var(--fs-label);color:var(--mut)}
.dsr-lrow2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.dsr-party{font-size:var(--fs-body-lg);color:var(--mut)}
.dsr-lore{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid rgba(var(--ac-rgb),.28);border-radius:var(--r-pill);
  background:rgba(var(--ac-rgb),.07);font-family:var(--mono);font-size:var(--fs-micro);color:var(--ac-lo)}
/* stat grid */
/* minmax(0,1fr) + flex-wrap: el sello con fecha (2026-07-05) ensancha el min-content del tile;
   sin esto la grilla revienta a 390px (blowout clipeado, invisible al lector) */
.dsr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--bd);border-bottom:1px solid var(--bd)}
.dsr-stat{background:var(--panel2);padding:16px 18px;min-width:0}
.dst-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;flex-wrap:wrap;row-gap:3px}
.dst-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;color:var(--mut)}
.dst-v{font-family:var(--sans);font-weight:800;font-size:clamp(22px,6.4vw,29px);line-height:1.05;color:var(--tx);overflow-wrap:anywhere} /* clamp+wrap: un destacado con caveat ("12% +3% prórrogas"/"...on extensions") clipeaba en el tile a 360/390 — L189, mismo fix que .dst-sub. Desktop intacto (max 29px) */
.dst-v.am{color:var(--ac-lo)}.dst-v .up{font-family:var(--mono);font-size:var(--fs-body);color:var(--ver)}
.dst-bar{margin-top:10px;height:6px;border-radius:var(--r-4);background:rgba(var(--tes-rgb),.14);overflow:hidden}
.dst-bar.am{background:rgba(var(--ac-rgb),.13)}
.dst-bar i{display:block;height:100%;border-radius:var(--r-4);background:linear-gradient(90deg,var(--ac-mid),var(--ac))}
.dst-sub{margin-top:8px;font-family:var(--mono);font-size:var(--fs-label);color:var(--mut);overflow-wrap:anywhere} /* "c/industrialización" no entraba en el tile a 360px y se clipeaba (L189) */
.dst-flags{display:inline-flex;align-items:center;gap:5px}
/* secciones (meter / fiscal / mods) */
.dsr-sec{padding:21px 30px;border-bottom:1px solid var(--bd)}
.dsr-sec:last-child{border-bottom:0}
.dsr-sech{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.dsr-sect{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.dsr-secx{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;color:var(--dim)}
.dsr-prose{margin:14px 0 0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx2);max-width:880px}
/* alineacion = nuestra lectura (sin medidor con aguja: esa "posicion" era inventada) */
.dsr-align{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dsr-readtag{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ac-lo);padding:5px 13px;border:1px solid rgba(var(--ac-rgb),.3);border-radius:var(--r-8);background:rgba(var(--ac-rgb),.06)}
.dsr-readnote{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim)}
/* caption del regimen fiscal (matiz exento/sobretasa, tono calmo)
   2026-08-30 — sube a prosa: se llama `-cap` pero lo que emite son parrafos de 390 a 999
   caracteres de analisis fiscal en las 5 fichas de provincia. Es lo que se lee, no un epigrafe. */
.dsr-cap{margin:13px 0 0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--mut);max-width:920px}
.dsr-cap b{color:var(--tx);font-weight:600}
@media(max-width:760px){
  .dsr-hero{flex-direction:column-reverse;align-items:flex-start;gap:16px;padding:18px}
  .dsr-leader,.dsr-sec{padding:16px 18px}
  .dsr-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* El mapa se BORRO en U12 (2026-08-14) y sus clases en U8 (16-ago). `#map` y el `#mapa` de la
   lista de anclas de arriba sobrevivieron a las dos podas: los caza la medicion C5 del 18-ago
   (5 selectores muertos sobre 2.038; los otros 3 son falsos positivos). Borrados aca. */

/* mapa + panel ranking "el dinero por provincia" (mapa-rigi-total 2026-07-18) */
/* `.map-duo` (la grilla mapa+cartera) se BORRO en U12, 2026-08-14: quitado el mapa quedo con 0
   emisores en las 207 paginas —verificado con barrido en runtime, no con grep ([[L845]]).
   ✅ RESUELTO EN U8 (2026-08-16): las OTRAS clases del mapa (`.mapcard`, `.maptop`, `.maplegend`,
   `.maperr`, `.frame`, `.sw`) SE BORRARON, y no hubo que decidir nada sobre los 8 prototipos. El
   dato que lo cerro: los prototipos son **autocontenidos** — no enlazan ninguna hoja del sitio y
   definen esas mismas clases en su propio `<style>`. Emitir una clase no es depender de su regla,
   asi que borrar aca no les quita un pixel. Se mide con `u16_muerto.py`, que separa las tres
   cubetas (muerta / la mantiene un consumidor que SI enlaza / viva por JS). */
.mr-rows{display:flex;flex-direction:column;gap:7px;flex:1}
/* r9, no r7 — U16 · la tarjeta, 2026-08-16. Fila-link clicable: su marco (y por lo tanto su radio) solo
   aparece en :hover, asi que el cambio es de VOCABULARIO, no de aspecto en reposo. r9 es el radio con el
   que ya quedo su hermana `.door` (la otra tarjeta de navegacion de la portada) en la 4a tanda, y el que
   el molde usa para todo control. El 7 no estaba en la escala del molde [4·5·6·8·9·10·12·14·18·50]. */
.mr-row{display:block;text-decoration:none;border-radius:var(--r-8);padding:4px 7px 6px;border:1px solid transparent}
a.mr-row:hover{border-color:var(--cy);background:rgba(var(--cy-rgb),.06)}

/* P3 (2026-08-26) — el nombre del proyecto como ancla propia. La fila dejo de ser un `<a>`
   porque ahora contiene links a los mercados, y anclas anidadas son HTML invalido. */
.mr-nm{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.mr-nm:hover{color:var(--cy);border-bottom-color:currentColor}
.mr-eval a{color:var(--tx2);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.35)}
.mr-eval a:hover{color:var(--ac);border-bottom-color:currentColor}
.mr-l1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--fs-label);color:var(--tx)}
/* ⭐ 2026-09-17 · en el telefono los dos textos de esta fila no entran uno al lado del otro: el de
   la izquierda se parte en cinco lineas y el de la derecha se sale de la pantalla (medido a 390 px
   en /data-centers). Se apilan, y el `nowrap` de cada uno deja de aplicar. */
@media(max-width:640px){
  .mr-l1{flex-wrap:wrap;gap:2px 8px}
  .mr-l1 .mr-go,.mr-l1 .mr-prox{white-space:normal;flex:1 1 100%}
}
.mr-l1 .mr-go{color:var(--cy);white-space:nowrap}
.mr-l1 .mr-prox{color:var(--mut);white-space:nowrap;font-size:var(--fs-micro)}
.mr-l2{display:flex;align-items:center;gap:8px;margin-top:4px}
.mr-bar{flex:1;height:5px;border-radius:var(--r-4);background:rgba(127,184,230,.13);overflow:hidden}
.mr-bar i{display:block;height:100%;border-radius:var(--r-4);background:linear-gradient(90deg,var(--ac-dk),var(--ac))}
/* ⚠️ `--ac` y no `--ac-hi`: medido con `contraste.py`, este elemento vive sobre
   `rgb(7,9,16)` —fondo OSCURO— en las dos portadas y sobre `rgb(9,12,20)` en
   rigi-encadenamientos. Pedia el acento de CLARO y pasaba raspando por casualidad (4,42);
   al corregir `--ac-hi` para el rol de la firma quedo en 3,81 y el error salio a la luz.
   ⛔ La leccion es del METODO: un ratio de contraste NO dice de que lado esta el claro.
   El campo `fondo` de la medicion si, y hay que leerlo. */
.mr-usd{font-size:var(--fs-label);color:var(--ac);white-space:nowrap}
.mr-sin{margin-top:10px;font-size:var(--fs-micro);color:var(--mut);line-height:1.5}
.mr-tot{margin-top:8px;padding-top:9px;border-top:1px solid var(--bd);font-size:var(--fs-label);color:var(--tx);line-height:1.5}
.mr-eval{margin:6px 0 0;font-size:var(--fs-body);color:var(--mut);line-height:1.55}

/* ===== U12 (2026-08-14): la cartera por provincia QUEDO SOLA — el mapa 3D se quito de la portada.
   Nacio como columna de 340px al lado del mapa dentro de `.map-duo`; sin el vecino, ese ancho la deja
   como una tira angosta y desbalanceada en el medio de la pagina. `.solo` la libera y le da a las
   filas el ancho completo, que es lo que el dato pedia desde el principio (nombre + USD + entrada).
   ⚠️ Es una medida PUENTE, declarada como tal: U11 rediseña este bloque entero con Claude Design
   —el encargo es «hacé UNA pieza que haga el trabajo», porque el mapa, esta cartera y las tarjetas
   de provincia renderizaban el MISMO par provincia→inversión→entrada tres veces—. No vale la pena
   pulirla mas de esto antes de que Design decida su forma final. */
/* el estado de adhesion RESCATADO de la leyenda del mapa: era su unico dato exclusivo y no podia
   irse con el (regla «quitar un eco no es quitar el dato»). Hereda el look de `.mr-sin`, que dice
   algo de la misma familia (las jurisdicciones que no aportan proyectos). */
.mr-adh{margin-top:8px;font-size:var(--fs-micro);color:var(--mut);line-height:1.55}
/* fila-puerta a `rigi-encadenamientos.html` (P2, encendida 2026-08-19): la unica fila del panel que
   no es una provincia — no lleva barra ni monto, asi que se separa con su propio borde en vez de
   entrar a la grilla de `.mr-rows`. El BORDE va en el wrapper y no en el <a>, para no pelearse con
   el `border-color` que `.mr-row:hover` pinta en los cuatro lados. */
.mr-p2{margin-top:8px;padding-top:9px;border-top:1px solid var(--bd)}
.mr-p2-sub{display:block;margin-top:4px;font-size:var(--fs-micro);color:var(--mut);line-height:1.55}

/* ============================================================================================
   `.pvr` — EL BLOQUE FUSIONADO DE PROVINCIAS (port del diseno «3a» de Claude Design, 2026-08-26)
   Reemplaza a `.maprank` + `.puertas-intro` + las 5 tarjetas `.card` de la portada, que
   publicaban LAS MISMAS 5 provincias con LAS MISMAS 5 cifras separadas por 780 px de scroll
   (lo caza el usuario mirando la pagina; el comentario de `.maprank.solo`, arriba, ya lo tenia
   anotado desde julio). Es portada-only por construccion: ningun otro molde emite `pvr-*`.
   ⛔ Y POR ESO NO SE TOCO `.cards`, que la usan 35 paginas mas.
   Los colores NO son los del diseno (#5b8cff/#ff5c9a/#35e3b0) sino los TOKENS del sitio
   (--ac/--prv/--cy): son los mismos tres roles y ya gobiernan las puertas en 40 paginas. El
   rosa `--prv` lo eligio el usuario y no se unifica hacia el azul.
   ============================================================================================ */
.pvr{margin:4px 0 0;border:1px solid var(--bd);background:var(--panel2);border-radius:var(--r-12);
     overflow:hidden}
/* --- la cabecera: quien es este bloque, y la cifra que lo resume */
.pvr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
          padding:15px 18px 13px;border-bottom:1px solid var(--bd)}
.pvr-h-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.pvr-k{font-family:var(--mono);font-size:var(--fs-body);letter-spacing:.01em;color:var(--tx)}
.pvr-sub{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut)}
.pvr-h-r{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pvr-big{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--tx-hi);
         letter-spacing:-.02em}
.pvr-big-k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;
           text-transform:uppercase;color:var(--mut)}
/* --- la barra de concentracion: lo UNICO que el bloque estrena, y es la pregunta que ninguno de
   los dos paneles viejos contestaba. Sin `min-width` en los tramos: un ancho minimo sobre un
   segmento porcentual vuelve infiel al grafico (RUNBOOK-PORT-DISENO §3, medido: +38% de error). */
.pvr-conc{padding:13px 18px 11px;border-bottom:1px solid var(--bd);display:flex;
          flex-direction:column;gap:6px}
.pvr-conc-b{display:flex;gap:3px;height:12px}
.pvr-s{display:block;border-radius:var(--r-4)}
.pvr-s1{background:linear-gradient(90deg,var(--ac-mid),var(--ac-lo))}
.pvr-s2{background:var(--ac)}
.pvr-s3{background:var(--ac-mid)}
.pvr-s4{background:var(--ac-hi)}
.pvr-s5{background:var(--ac-dk)}
.pvr-s6{background:rgba(var(--ac-rgb),.22)}
.pvr-conc-l{display:flex;gap:3px;font-family:var(--mono);font-size:var(--fs-tag);
            letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.pvr-conc-l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvr-cl-r{flex:1;text-align:right}
/* --- la leyenda de las tres puertas: se conserva del bloque viejo porque es donde el lector
   aprende que significan «Invertir / Proveer / Trabajar» antes de verlos como chips */
.pvr-lead{padding:11px 18px;border-bottom:1px solid var(--bd);font-size:var(--fs-sub);
          color:var(--tx2);line-height:1.5}
.pvr-lead b{color:var(--tx)}
/* --- la grilla: encabezado, filas y total comparten plantilla, que es lo que hace que las
   columnas queden alineadas sin una <table> (y que en telefono se puedan romper de una) */
/* ⚠️ COLUMNAS DETERMINISTAS, y no es cosmetica: encabezado, filas y total son TRES grillas
   independientes, asi que una columna dimensionada por CONTENIDO (`auto`, o el `min-content`
   implicito de `1fr`) las resuelve distinto en cada una y quedan desalineadas. Medido en la
   primera captura: el rotulo PARTICIPACION caia 65 px a la derecha de su barra, porque la ultima
   columna del encabezado dice «Participar» y la de las filas lleva tres chips.
   `minmax(0,Nfr)` + anchos fijos = mismo reparto en las tres, pase lo que pase adentro. */
.pvr-th,.pvr-r,.pvr-tf{display:grid;
  /* 292 px en la ultima columna NO es un numero elegido a ojo: los tres chips MIDEN 284
     (93+86+93 + 2 huecos de 6). Con 218 envolvian a dos filas y cada fila crecia 54 px. */
  /* ⭐ 2026-09-12: las columnas de conteo pasan de 50/58 a 88/112 px porque sus rotulos dejaron de
     estar abreviados («Proy.» y «Oport.» obligaban a decodificar). Los dos anchos son los que el
     rotulo MIDE en mono a 14 px, medidos, no elegidos: con los de antes el texto se cortaba a
     1440, 1366 y 1100. El espacio sale de las dos columnas elasticas, que iban sobradas. */
  grid-template-columns:26px minmax(0,1.1fr) minmax(0,1.15fr) 78px 88px 132px 292px;
  column-gap:13px;align-items:center;padding:10px 18px}
.pvr-th{border-bottom:1px solid var(--bd);background:rgba(255,255,255,.015);
        font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.11em;
        text-transform:uppercase;color:var(--mut)}
.pvr-th span:nth-child(n+4):nth-child(-n+6),.pvr-tf span:nth-child(n+3):nth-child(-n+6){text-align:right}
.pvr-th span:last-child{text-align:right}
.pvr-r{border-bottom:1px solid var(--bd-row)}
.pvr-r:hover{background:rgba(var(--ac-rgb),.045)}
.pvr-i{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim)}
.pvr-nc{display:flex;flex-direction:column;gap:2px;min-width:0}
.pvr-nm{font-size:var(--fs-body-lg);font-weight:600;color:var(--tx-hi);text-decoration:none;
        letter-spacing:-.01em}
a.pvr-nm:hover{color:var(--ac)}
.pvr-nm-off{color:var(--mut);font-weight:500}
.pvr-reg{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.09em;
         text-transform:uppercase;color:var(--dim)}
.pvr-prox{color:var(--mut);text-transform:none;letter-spacing:0}
.pvr-c{font-family:var(--mono);font-size:var(--fs-body-sm);color:var(--tx2);text-align:right}
.pvr-c-bar{display:flex;align-items:center;gap:10px;text-align:left}
.pvr-bar{flex:1;height:6px;border-radius:var(--r-4);background:rgba(var(--ac-rgb),.12);overflow:hidden;
         min-width:40px}
.pvr-bar i{display:block;height:100%;border-radius:var(--r-4);
           background:linear-gradient(90deg,var(--ac-mid),var(--ac-lo))}
.pvr-pct{font-family:var(--mono);font-size:var(--fs-label);color:var(--ac-lo);min-width:44px;
         text-align:right}
.pvr-usd{font-size:var(--fs-body-lg);font-weight:600;color:var(--tx-hi);letter-spacing:-.015em}
.pvr-r-off .pvr-usd{color:var(--mut);font-weight:500}
/* --- las tres puertas como chips. Mismo rol y mismo token que `.door-*`; lo que cambia es que
   aca son de FILA, asi que el rotulo va corto y el punto de color hace de indice visual. */
.pvr-c-pta{display:flex;justify-content:flex-end}
.pvr-ps{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pvr-p{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:var(--r-8);
       border:1px solid var(--bd2);text-decoration:none;font-size:var(--fs-label);
       line-height:1;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.pvr-p i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pvr-p-inv{color:var(--ac);border-color:rgba(var(--ac-rgb),.34);background:rgba(var(--ac-rgb),.07)}
.pvr-p-inv:hover{background:rgba(var(--ac-rgb),.15);border-color:var(--ac)}
.pvr-p-prv{color:var(--prv);border-color:rgba(var(--prv-rgb),.34);background:rgba(var(--prv-rgb),.07)}
.pvr-p-prv:hover{background:rgba(var(--prv-rgb),.15);border-color:var(--prv)}
.pvr-p-gen{color:var(--cy);border-color:rgba(var(--cy-rgb),.34);background:rgba(var(--cy-rgb),.06)}
.pvr-p-gen:hover{background:rgba(var(--cy-rgb),.14);border-color:var(--cy)}
/* --- el total y el pie (el pie reusa `.mr-sin/.mr-adh/.mr-eval/.mr-p2`, que siguen vivos) */
.pvr-tf{background:rgba(255,255,255,.02);font-family:var(--mono);font-size:var(--fs-label);
        letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.pvr-tf .num{font-size:var(--fs-body-sm);letter-spacing:0;color:var(--tx)}
.pvr-pie{padding:12px 18px 14px;border-top:1px solid var(--bd)}
/* ⭐ LAS TRES NOTAS DE COBERTURA, PLEGADAS EN EL TELEFONO (2026-09-12). Son 330 px de los 463 que
   mide el pie a 390 px, y dicen QUE NO ENTRA en la tabla: metodo que se consulta, no prosa que se
   lee de corrido. El rotulo cerrado ANUNCIA el caveat con sus dos numeros, asi que el que no lo
   abre igual sabe que la tabla deja cosas afuera (regla 4.17: un caveat se comprime, no se borra).
   ⛔ En computadora el rotulo no se emite y el bloque queda abierto: ahi no costaba nada. */
.pvr-notas{margin:0}
.pvr-notas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  min-height:30px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);line-height:1.4}
.pvr-notas>summary::-webkit-details-marker{display:none}
.pvr-notas>summary::after{content:"";width:6px;height:6px;flex:0 0 auto;margin-left:auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .15s}
.pvr-notas[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.pvr-notas>summary:hover{color:var(--tx2)}
@media(min-width:761px){.pvr-notas>summary{display:none}}
.pvr-pie .mr-sin{margin-top:0}
/* --- LA ETIQUETA DE CELDA: existe en el HTML (no en `content:` del CSS, que ningun lint alcanza
   y se publica sin traducir). En escritorio la dice el encabezado de columna; en telefono, donde
   no hay encabezado, la dice cada celda. */
.pvr-k2{display:none}
/* El corte a ficha va a 1000 px y no a 900: la tabla necesita 582 px de columnas fijas, asi que
   entre 900 y 1000 las dos columnas flexibles caen por debajo de 150 px y «Buenos Aires»
   envuelve. Se rompe a ficha ANTES de que se rompa el contenido. */
@media(max-width:1000px){
  /* la tabla NO scrollea de costado: cada fila se vuelve una ficha, que es lo que el diseno 3a
     dibuja para 390 px. El encabezado de columna se va porque ya no encabeza nada. */
  .pvr-th{display:none}
  .pvr-r,.pvr-tf{grid-template-columns:1fr;row-gap:9px;padding:14px 15px}
  .pvr-r{position:relative}
  .pvr-i{position:absolute;top:14px;right:15px;border:1px solid var(--bd2);border-radius:var(--r-pill);
         padding:3px 8px;font-size:var(--fs-tag)}
  .pvr-c,.pvr-c-bar{text-align:left;justify-content:flex-start;
                    display:flex;align-items:baseline;gap:8px}
  .pvr-c-bar{align-items:center}
  .pvr-k2{display:inline;font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.1em;
          text-transform:uppercase;color:var(--dim);min-width:74px}
  .pvr-usd{font-size:22px}
  .pvr-c-pta{justify-content:stretch}
  .pvr-ps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%}
  /* area de toque: el porton del proyecto es 24 px (WCAG 2.5.8 AA) y en telefono se va a 44 */
  .pvr-p{justify-content:center;min-height:44px;padding:7px 6px}
  .pvr-tf span:empty{display:none}
  .pvr-tf{row-gap:4px}
  /* a 390 los tres rotulos no entran y el del medio sale cortado: se queda el lider y el resto,
     que es lo que la barra tiene que decir. El dato de cada provincia esta en su fila. */
  .pvr-conc-l{font-size:11px}
  .pvr-conc-l span:nth-child(2){display:none}
  .pvr-conc-l span:first-child{width:auto!important;flex:0 0 auto}
  .pvr-big{font-size:26px}
}

/* titulares de seccion (injerto B: bloque ambar) */
/* Encabezado de sección (Claude Design): tick de color + rótulo mono, sobre transparente — liviano y
   escaneable (reemplaza la píldora azul rellena). El tick toma el acento; se puede teñir por sección. */
/* P6 (2026-08-26) — TITULO DE UNA HOJA DE CONTENIDO de esta piel.
   Existe porque `rigi-encadenamientos` y `mapa-datos` usaban `.sec-h` para su `<h1>`, que es el
   ROTULO DE SECCION (12,5px, mono, uppercase): el titulo de la pagina salia MAS CHICO que sus
   propios `<h2>` (15,5px) — ratio 0,81 y 1,00, contra 1,45-4,80 en 22 de los 24 moldes.
   Toma el mismo clamp que `.hero-despegue h1`, que es como titula `proyectos/proveedores`, su
   hermana en esta misma piel. Conserva el tick de acento del `.sec-h` para no perder la firma. */
.pg-h1{position:relative;margin:26px 0 8px;padding-left:34px;color:var(--tx);font-weight:800;
  font-size:clamp(26px,3.6vw,40px);line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.pg-h1::before{content:"";position:absolute;left:0;top:.62em;width:22px;height:2px;
  border-radius:var(--r-2);background:var(--ac)}
@media(max-width:640px){.pg-h1{padding-left:0}.pg-h1::before{display:none}}
/* la bajada del `.pg-h1`: mismo cuerpo y mismo color que la entradilla del hero, para que una
   pagina titulada con `.pg-h1` lea igual que una titulada con `.hero-despegue`. */
.pg-lead{margin:0 0 22px;padding-left:34px;max-width:760px;
  font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut)}
@media(max-width:640px){.pg-lead{padding-left:0}}


/* ============================================================================================
   ⭐ DONDE SE USA LA MAYUSCULA MONOESPACIADA (2026-09-12) — ES HIPOTESIS, NO LEY
   **Se reserva para elementos de sistema, metadata y TITULOS donde aporte jerarquia; no se usa por
   defecto para frases explicativas, glosas o copy corrido.**
   ⛔ El criterio NO es la longitud. Un titulo largo puede ir en mayusculas si visualmente ordena;
   contar caracteres sirve para ENCONTRAR candidatos, no para decidirlos.
   ⛔ Y menos mayusculas no es lenguaje visual convencional: el caracter industrial vive en el mono
   y el tracking, que se quedan. Lo que se saca es el grito indiscriminado.
   Medido a 390 px antes de tocar: 202 piezas en mayusculas, 5.128 px, el 63 % de la pagina — con
   todo gritando, un titulo de seccion y su nota al pie pesaban lo mismo.
   ⇒ Los TITULOS conservan su mayuscula (`.sec-h`, `.ph h2/h3`, `.ref-ancla-l`); la pierden las
   GLOSAS y las frases (`.sec-h>span`, `.hd-seg i`, `.spark-cap`, `.tr-k`, `.hd-bar-k`, `.pvr-k`,
   `.b.tsem`) y las ACCIONES (`.score-go`).
   ⏳ Validado solo en el molde 1. Pasa a regla global despues de comprobarlo en Nicho, Proyecto y
   Provincia — `RUNBOOK-PASADA-VISUAL.md §4.18`.
   ============================================================================================ */
/* `scroll-margin-top` (Q2, 2026-09-16): la barra superior es fija y mide 54 px, así que al llegar
   por un anclaje (`#que-cambio`, `#lectura`, …) el título quedaba DEBAJO de ella. Es el mismo valor
   que `.leyenda.sellos` ya usa desde el 2026-07-05, por el mismo motivo.
   ⛔ No cambia un píxel en reposo: `scroll-margin-top` sólo actúa cuando el navegador salta a un
   anclaje. Por eso va en la regla compartida y no en una copia por molde. */
.sec-h{display:flex;width:fit-content;align-items:center;gap:11px;color:var(--tx);
  font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:13px;
  margin:36px 0 16px;scroll-margin-top:70px}
.sec-h::before{content:"";flex:0 0 auto;width:22px;height:2px;border-radius:var(--r-2);background:var(--ac)}
.sec-h span[style]{color:var(--mut)!important;opacity:.9;font-weight:500;letter-spacing:.01em;text-transform:none}

/* .sub-h — el SUB-ENCABEZADO que parte una seccion en dos grupos por EVIDENCIA (2026-09-03).
   Nace en /negocios/empresas, que divide su columna de oferta segun la empresa tenga o no un
   proyecto RIGI vinculado. Es un escalon por DEBAJO de .sec-h y tiene que leerse como tal: mismo
   idioma (mono, versalita) y menos peso — sin el guion-acento, mas chico y en gris, para que el
   lector vea "dos grupos DENTRO de una seccion" y no "dos secciones". */
.sub-h{color:var(--mut);font-family:var(--mono);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:11.5px;margin:26px 0 6px}
.sub-h+.disc{margin:0 0 12px;max-width:72ch}

/* paneles (overflow-x: una tabla ancha scrollea DENTRO del panel, no panea la pagina — fix mobile 2026-06-11) */
.panel{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r-12);padding:22px 24px;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}
/* si un encabezado de seccion sigue a un panel, su margin-top ya da el aire: no duplicar */

/* ⭐⭐ ...Y LA QUE CONTIENE UN SOLO BLOQUE QUE PINTA EL MISMO FONDO, TAMPOCO (TR2, 2026-09-03) ===
   Es la misma decision de arriba con el contenido envuelto en un <div> en vez de un <p>, y por eso
   el selector `> p:only-child` no la alcanzaba: mismo defecto, otra etiqueta.

   MEDIDO EN RUNTIME sobre las 430 paginas emitidas, no sobre un ejemplar por molde
   (`pipeline/revision/marco_doble.py --todas`): la caja pinta `--panel` = rgb(9,12,20) y `.ref-imp`
   vuelve a pintar EXACTAMENTE rgb(9,12,20). El marco no separa nada del fondo que el contenido ya
   trae — solo dibuja un borde y mete el texto 24 px adentro. Son **103 cajas** en las fichas de
   norma: 90 con signo favorable, 12 con reparo y 1 adversa. El filo de color del hijo —que es lo
   que marca el signo— se queda entero: no se toca ni una palabra ni un color del contenido.
   ⚠️ `:only-child` es la mitad que importa: cuando la norma pega en DOS provincias o mas, la caja
   agrupa los efectos y el selector no matchea. Ahi el marco si dice donde empieza y termina. */
.panel:has(> .ref-imp:only-child){
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow-x:visible;
  margin-bottom:18px}


/* ===== EL HUECO DECLARADO — el bloque que dice QUE NO MEDIMOS TODAVIA =====================
   ⛔ VIVE ACA Y NO EN `nicho.css` DESDE EL 2026-09-03, y el motivo es un defecto que estuvo en
   vivo: lo emiten TRES moldes —ficha de proyecto (126 bloques), hoja de nicho (63) y ficha de
   norma (52)— y **la ficha de norma no carga `nicho.css`**, que era la unica hoja donde estaba
   definido. Ahi el bloque salia sin borde, sin fondo, sin padding y con el rotulo en letra comun,
   en 168 paginas publicadas. No fallaba nada: el HTML era correcto y el CSS tambien, y ningun
   control mira la interseccion — solo se ve pidiendo el estilo COMPUTADO al navegador.
   `despegue.css` la cargan las 342 paginas que pueden emitirlo, asi que aca no se puede repetir.
   ⚠️ Lo unico que se queda en `nicho.css` es `section.af-hueco`, que es el override de la hoja de
   nicho — mas especifico (0,1,1), asi que gana aunque esta hoja cargue despues.
   ========================================================================================== */
.af-hueco{margin:4px 0;background:rgba(var(--ac-rgb),.06);border:1px solid rgba(var(--ac-rgb),.22);
  border-left:3px solid var(--ac);border-radius:10px;padding:19px 22px}
.af-hueco-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-bottom:11px}
.af-hueco-i{margin:0 0 14px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx);font-weight:600}
/* el hueco que es DEUDA NUESTRA y no hallazgo (L732): mismo bloque, lenguaje visual de CASILLERO
   VACIO. El de acento dice "miramos y no esta" —es resultado del trabajo y pesa—; este dice
   "todavia no lo trabajamos" y tiene que leerse como el molde sin llenar, no como un hallazgo.
   Modificador y no reescritura de .af-hueco: la clase base la comparte la pagina de NICHO.
   ⚠️ RESTAURADA el 2026-08-20 (U3). El barrido de CSS muerto de `b58501fc` la borro con razon —el
   16-ago estaba muerta de verdad, porque solo habia DOS proyectos publicados y ninguno emitia el
   estado vacio—. Al publicar 19 fichas mas, `_py_vacio` la emite en 115 archivos y sin regla el
   «todavia no lo trabajamos» se dibujaba IGUAL que el hallazgo: se perdia justo la distincion que
   L732 vino a marcar. Lo canto `lint_clases_css`. ⇒ un barrido de CSS muerto solo es seguro contra
   lo que esta publicado EN ESE MOMENTO: al encender paginas nuevas hay que volver a correrlo. */
.af-pend{background:transparent;border:1px dashed var(--bd2);border-left:3px dashed var(--bd2)}
.af-pend .af-hueco-k{color:var(--mut)}
.af-pend .af-hueco-i{color:var(--tx2);font-weight:500}
/* sin panza abajo cuando el texto es lo ultimo: en la pagina de proyecto el estado vacio es solo
   rotulo + parrafo, y el margin-bottom de 14px daba 33px abajo contra 19 arriba. En la de NICHO al
   parrafo siempre le sigue algo (.af-pasos, .hm), asi que ahi la regla no aplica. */
.af-hueco-i:last-child{margin-bottom:0}

/* D1 (2026-08-26) — LA CAJA QUE JUNTA LOS HUECOS DE UN GRUPO.
   17 de las 28 fichas repetian NUEVE veces la misma caja de «todavia no lo trabajamos», cada una con
   su propio rotulo de seccion. Se declara lo mismo (rotulo + motivo de cada bloque) en una sola caja
   al pie del grupo. ⛔ No esconde nada: el motivo textual de cada bloque se conserva entero, que es
   lo que sostiene la decision de la UNIDAD 4. Reusa `.af-hueco.af-pend` para no inventar una segunda
   forma del mismo elemento — aca solo va la lista. */
.af-hueco-multi .af-pend-list{margin:0;padding:0;list-style:none}
.af-hueco-multi .af-pend-list li{margin:0;padding:9px 0;font-size:var(--fs-body-lg);line-height:1.55;
  color:var(--mut);border-top:1px solid rgba(var(--ac-rgb),.16)}
.af-hueco-multi .af-pend-list li:first-child{border-top:0;padding-top:0}
.af-hueco-multi .af-pend-list li:last-child{padding-bottom:0}
.af-hueco-multi .af-pend-list b{color:var(--tx);font-weight:600}

/* TERCER estado (L734): el bloque que todavia NO EXISTE porque el proyecto no llego a esa etapa. No
   es deuda nuestra y no lo cierra investigar — lo cierra que el proyecto avance. Va SOLIDO y apagado:
   es un hecho verificado (sale del `estado` sellado del proyecto), no un casillero sin llenar. La
   gradacion completa queda: acento+solido (hallazgo) -> apagado+solido (etapa) -> punteado (deuda). */
/* ⚠️ --panel, NO --card: `--card` existe pero esta scopeado a `.cierre-zone`, asi que aca resolvia a
   nada y el fondo salia transparente — lo cazo getComputedStyle, no la captura ([[L722]]). */
/* ⚠️ RESTAURADA el 2026-08-21, al traer `master` a la rama de reestructuracion — y es la SEGUNDA
   vez que pasa lo mismo en esta familia: `b58501fc` borro la regla y dejo el comentario que la
   especifica, igual que le habia pasado a `.af-pend` (ver su nota, unas lineas arriba).
   ⭐ Lo que hace este caso distinto: la clase NO la emitia ninguno de los dos lados por separado.
   Hace falta el DATO de master (la curacion profunda que llena `fases`) sobre las PAGINAS de la
   rama (las 21 fichas de U3) para que salga — 4 archivos. Un defecto que solo existe en la
   COMBINACION no lo puede ver ninguna de las dos ramas sola, y por eso conviene mergear temprano
   en vez de dejarlo para el final. Lo canto `lint_clases_css`.
   Sigue la gradacion que el comentario de arriba especifica: acento+solido (hallazgo) ->
   apagado+solido (ESTA) -> punteado (deuda). */
.af-etapa{background:var(--panel);border:1px solid var(--bd);border-left:3px solid var(--bd2)}
.af-etapa .af-hueco-k{color:var(--dim)}
.af-etapa .af-hueco-i{color:var(--mut);font-weight:500}

/* ⭐ LA CAJA DE AFUERA NO SE DIBUJA CUANDO EL HUECO ES LO UNICO QUE HAY ADENTRO (TR2, 2026-09-03).
   `div.af-hueco` ya trae fondo, borde de 1 px, filo de 3 px y 19/22 de padding. Envolverlo en
   `.panel` son DOS marcos concentricos separados por 22 px de aire: la caja dentro de la caja.
   Medido en runtime sobre las 430 paginas: **115 cajas** — 63 en fichas de proyecto y 52 en fichas
   de norma. ⚠️ Las 52 entran recien ahora: mientras el bloque no tenia marco propio alli, la
   `.panel` era el unico que habia y sacarla las dejaba sin nada. Primero se arreglo la hoja. */
.panel:has(> .af-hueco:only-child){
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow-x:visible;
  margin-bottom:18px}

/* ⭐⭐ ...Y LAS CUATRO FORMAS QUE APROBASTE MIRANDO EL COMPARADOR (3-sep) ======================
   Todas son la misma cosa: adentro hay texto corrido y nada que agrupar, asi que el marco no
   separa dos zonas — dibuja un borde y mete el texto 24 px adentro. Cada una se vio en su pagina
   real, con y sin caja, en `visual/cajas-comparador.html`.

     .rfp-der    9  una linea de rotulo + valor en la ficha de una norma        90 -> 44 px
     .pgp-dato  17  el dato del mes en una pagina del programa                 468 -> 422 px
     .pgp-hist  10  la herencia, en el bloque de al lado                       134 ->  88 px
     p.disc+a.regla / a.ng-norma  64   un parrafo con un enlace chico al pie   135 ->  89 px
     p.disc + UNA a.pyr-i         21   un parrafo con UNA sola fila de proyecto 369 -> 323 px

   ⛔ `:only-of-type` en la ultima NO es adorno: cuando el nicho tiene VARIOS proyectos, esa misma
   caja sostiene una lista de filas y el marco si dice donde empieza y termina. Sin ese guardia la
   regla se llevaria puestas las listas. Las 21 son las de una sola fila, o sea sin nada que agrupar.
   ⚠️ Lo que NO entra aca, y esta medido: la ficha tecnica del indicador (`.rfp-grid`, 18) son pares
   de rotulo y valor —eso ES una lista— y el bloque «pendiente» de las fichas de norma
   (`.af-hueco`, 52), que ahi no tiene marco propio porque esas paginas no cargan `nicho.css`. */
.panel:has(> .rfp-der:only-child),
.panel:has(> .pgp-dato:only-child),
.panel:has(> .pgp-hist:only-child),
.panel:has(> p.disc):has(> a.regla),
.panel:has(> p.disc):has(> a.pyr-i:only-of-type){
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow-x:visible;
  margin-bottom:18px}

.scorewrap>*,.kpis>*{min-width:0}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.ph h3,.ph h2{font-family:var(--mono);font-size:var(--fs-body);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx);margin:0;display:flex;align-items:center;gap:9px}
/* ⭐ EL TITULO DE BLOQUE, EN DOS REGISTROS (2026-09-12, decision del usuario). Un titulo de 57
   caracteres en mayusculas caia en TRES renglones a 390 px: ahi la mayuscula deja de ordenar y pasa
   a ocupar. ⇒ **kicker** con el nombre del bloque (mayuscula: es un rotulo corto, y ahi si ordena)
   + **segunda linea con el dato**, en caja baja y con el numero destacado.
   ⛔ La segunda linea lleva INFORMACION, no una explicacion de lo que el bloque ya muestra. */
.ph h2:has(.ph-k),.ph h3:has(.ph-k){flex-wrap:wrap;align-items:baseline;row-gap:2px;gap:0 9px}
.ph-k{flex:0 0 auto}
/* ⚠️ ES RESPONSIVE, NO DOS COMPONENTES: en computadora los dos registros entran en UNA linea y el
   titulo no crece un pixel; abajo de 560 la segunda linea baja sola. Mismo contenido, otro arreglo
   segun el ancho — que es lo que pidio el usuario. */
.ph-t{flex:0 0 auto;font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;
  text-transform:none;color:var(--mut)}
.ph-t::before{content:"\00B7 ";margin-right:7px;color:var(--dim)}
.ph-t b,.ph-t .num{color:var(--tx)}
@media(max-width:560px){
  /* ⛔ `flex-basis:100%` MAS un margen NO entra: pide el ancho entero del contenedor y despues se
     corre 13 px. Medido el 13-sep a 390 px en las tres hojas del molde 2: 1 px de desborde
     horizontal en la pagina entera, y 13 px contra el borde de su propio contenedor —los otros 12
     los absorbia el relleno lateral de `.page`, que es lo que lo hacia parecer un defecto chico.
     La base tiene que descontar el margen. */
  .ph-t{flex:0 0 calc(100% - 13px);margin-left:13px}
  .ph-t::before{content:none}
}
.ph h3::before,.ph h2::before{content:"";width:4px;height:15px;border-radius:var(--r-2);background:var(--ac);flex:0 0 auto;box-shadow:0 0 8px -1px var(--ac)}
.ph .tag{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);color:var(--mut);border:1px solid var(--bd2);padding:2px 7px;border-radius:var(--r-4)}
.prosa{font-size:var(--fs-body-lg);color:var(--tx2);margin:0;line-height:1.62}

/* tablas */

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

/* hub de proyectos (/proyectos/): el nombre linkeado a su ficha propia + la marca "ficha ->", que
   va DENTRO del <a> (T14). Sin estas reglas el <a> caia al azul por defecto del navegador
   (#0000ee subrayado) sobre la tabla oscura y la marca se leia del mismo tamano y peso que el
   nombre. El nombre conserva la caja de `.ent`; la marca es el afijo mono que dice que hay pagina
   detras — y es la unica parte que cambia respecto de una fila sin ficha, asi que carga sola la
   affordance. */
/* ⛔ ESTA DECLARACION DE `color` NO ESTA EN EFECTO, y descubrirlo es hallazgo de R7 (2026-08-25).
   La pisa `tokens.css:423` — `.disc a[href], td a[href], …{color:var(--ac)}` — por ESPECIFICIDAD,
   no por orden de hoja: `td a[href]` es (0,1,2) (dos selectores de tipo + un atributo) y
   `a.py-hub-a` es (0,1,1). Que `despegue.css` cargue despues no alcanza.
   ⇒ El nombre del proyecto se dibuja AZUL (`--ac`, medido rgb(91,140,255), contraste 6,18 sobre la
   tabla) desde que T14 lo escribio, y el parrafo de abajo describe una intencion que nunca se
   publico. Se conserva la declaracion —quitarla no cambia un pixel— y se anota, para que la
   proxima pasada no re-derive la teoria mirando el codigo en vez de la pantalla
   ([[L1593]]: para el front la Capa 3 es la captura, o el `getComputedStyle`).
   La decision de si el nombre debe ir en color de texto o en azul quedo anotada en
   `tareas.md` como `R7b`: es visual y son 56 filas de la portada + 28 del hub.

   (T14, la intencion original) hub de proyectos (/proyectos/): el nombre linkeado a su ficha propia
   + la marca "ficha ->", que va DENTRO del <a>. Sin estas reglas el <a> caia al azul por defecto
   del navegador (#0000ee subrayado) sobre la tabla oscura — eso SI lo arreglo — y la marca se leia
   del mismo tamano y peso que el nombre. La marca es el afijo mono que dice que hay pagina detras. */
a.py-hub-a{color:var(--tx);text-decoration:none}
a.py-hub-a:hover{color:var(--ac)}
a.py-hub-a:hover .py-hub-f{text-decoration:underline}
.py-hub-f{font-family:var(--mono);font-size:var(--fs-label);font-weight:400;color:var(--ac);white-space:nowrap}

.u{color:var(--dim);font-size:var(--fs-label)}

.src{color:var(--ac);text-decoration:none;font-family:var(--mono);font-size:var(--fs-sub);opacity:.85}.src:hover{opacity:1}

/* 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(--bd);border-radius:var(--r-4);padding:1px 5px;white-space:nowrap;vertical-align:middle}

/* ===== sello de procedencia PLANO (decision usuario 2026-06-21): un solo bloque tenue, SIN cajas,
   y TODO clickeable a la fuente (no solo la flechita). Reemplaza el combo badge+↗+fch boxed.
   Forma: <punto+palabra de confianza> · <fecha corta> ↗ . Pesa la mitad. ===== */

a.sello:hover{background:var(--bd)}

/* `.se-c.sin` subió a `tokens.css` el 2026-08-18 (A8(b)): su forma es idéntica en las dos pieles.
   `.se-c.neutral` NO sube — acá es `--dim` y en la clara `--sec`. */
.se-c.neutral{color:var(--dim)}

.se-go{color:var(--ac);font-size:var(--fs-sub);line-height:1}
a.sello:hover .se-f{color:var(--mut)}

/* leyenda de los sellos de confianza (decision 1, 2026-06-10); #sellos es ancla de metodo de
   portada+provincias (2026-07-05) -> scroll-margin compensa el header sticky */
.leyenda{font-family:var(--mono);font-size:var(--fs-body);color:var(--mut);line-height:2.1;margin:0 0 10px}
.leyenda.sellos{scroll-margin-top:70px}
/* P3 (2026-08-24) — LA INTRO ES EL LINK a `/metodo#sellos`. La glosa de cada sello bajó a 2-3
   palabras; el desarrollo se mudó al método. Sin este link el recorte sería una poda; con él, una
   mudanza — y por eso `T140` (darle anclas a `/metodo`) era su precondición.
   ⚠️ Se deja el subrayado NATIVO del navegador y sólo se le pone color: es la única cosa clickeable
   de la línea y tiene que verse. Un `border-bottom` propio acá dibujaba DOS rayas, porque el `a`
   base del sitio no resetea `text-decoration`. */
.ley-mas{color:var(--ac);white-space:nowrap}

/* [borrado 2026-08-13] `.fuentes-det`/`.fd-cta` — el catalogo de fuentes COLAPSADO de la portada
   (H3, 2026-06-11), reemplazado por `.fsrc-*` de `cierre.css`. Medido antes de sacarlo: 0 de las
   216 paginas del sitio lo emiten y `generar_html.py` no lo menciona. Se iba de todos modos:
   traia el mismo `content:"abrir el cat\00E1logo"` en CSS que se acaba de curar en `cierre.css`. */

/* cartera RIGI: tamano minimo subido (decision 4, 2026-06-10) */
.panel.metodo{margin-bottom:18px}
.metodo-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}
.mp{display:flex;gap:11px;align-items:flex-start}
.mp-n{flex:0 0 auto;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font:700 var(--fs-sub) var(--mono);color:var(--ac);border:1px solid rgba(var(--ac-rgb),.45);background:rgba(var(--ac-rgb),.08)}
.mp h4,.mp h3{margin:0 0 3px;font-size:var(--fs-sub);letter-spacing:.05em;text-transform:uppercase;color:var(--tx)}
.mp p{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--mut)}
.metodo-cierre{margin:16px 0 0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx);border-top:1px solid var(--bd);padding-top:13px}
.metodo-iso{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
/* track record: barra + leyenda en humano (rediseno 2026-06-13, el conteo crudo no se entendia) */
.panel.tr{margin-bottom:14px}
.tr-lead{margin:0 0 14px;font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx);max-width:760px}
.tr-punch{color:var(--ver)}
.tr-punch.bad{color:var(--bad)}   /* si alguna resulto falsa, el titular deja de ser verde */
/* radio 9: gemelo exacto `.gc-bar` (nicho.css) — la MISMA pieza (una barra con segmentos, borde y
   overflow oculto) que el destino ya emite con 9. El 7 no esta en la escala del molde. U16 · tanda 4. */
.tr-bar{display:flex;height:13px;border-radius:var(--r-8);overflow:hidden;gap:2px;background:var(--panel2);border:1px solid var(--bd)}
.tr-seg{display:block}
.tr-seg.ver{background:var(--ver)}.tr-seg.pro{background:var(--pro)}.tr-seg.mat{background:var(--tes)}.tr-seg.bad{background:var(--bad)}.tr-seg.dim{background:var(--dim)}
/* ⛔ UNA FILA POR ESTADO, SIEMPRE. Con `flex-wrap` a 390 px entraban «49 ciertas, con un
   matiz» y «0 falsas» en el mismo renglon y los otros tres solos, asi que la fila mas
   importante —la de las falsas— quedaba apretada al costado como un agregado. Cuesta un
   renglon de alto y devuelve las cinco al mismo patron, que es lo que las hace comparables. */
.tr-legend{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.tr-li{display:flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);color:var(--mut)}
.tr-li b{color:var(--tx);font-size:15px;font-weight:800;font-family:var(--mono)}
.tr-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.tr-dot.ver{background:var(--ver)}.tr-dot.pro{background:var(--pro)}.tr-dot.mat{background:var(--tes)}.tr-dot.bad{background:var(--bad)}.tr-dot.dim{background:var(--dim)}
.tr-ej{margin:15px 0 0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut);border-top:1px solid var(--bd);padding-top:13px;max-width:760px}
/* desktop: leyenda (izq) + explicador (der) lado a lado; la frase y la barra siguen full-width */
@media(min-width:780px){
  .tr-cols{display:grid;grid-template-columns:minmax(220px,270px) 1fr;column-gap:40px;align-items:start;margin-top:16px}
  .tr-legend{flex-direction:column;gap:9px;margin-top:0}
  .tr-ej{margin-top:0;border-top:0;border-left:2px solid var(--bd);padding:1px 0 1px 16px;max-width:none}
}
.tr-ej b{color:var(--tx)}
/* el explicador es DOS parrafos desde el 7-sep (definicion + ejemplo): el <p> no trae
   margen propio y la separacion la pone el contenedor, para que partirlo cueste lo menos
   posible de alto. */
.tr-ej p{margin:0}
.tr-ej .tr-ej-x{margin-top:7px}
/* ===== "El programa, verificado" (F11 2026-08-04): UN bloque, TRES capas =====
   marcador (no envejece) · ultima rendicion (fechada) · archivo (todo, plegado). Reemplaza a
   #track + #semana + #senales, tres paneles que decian lo mismo con criterios distintos.
   La racha: el respaldo del numero unico (cuantos balances de la serie cubrimos). */
.pv-racha{margin:15px 0 0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut);max-width:760px;border-top:1px solid var(--bd);padding-top:13px}
.pv-racha b{color:var(--tx)}
/* capas 2 y 3: <details> hermanos dentro del mismo panel, separados por una regla (la linea del
   mockup). El caret y el titulo van en el summary; el cuerpo respira abajo. */
.pv-capa{border-top:1px solid var(--bd);margin-top:18px;padding-top:15px}
.pv-capa>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pv-capa>summary::-webkit-details-marker{display:none}
.pv-capa>summary::before{content:"\25B8";color:var(--ac);font-size:12px;line-height:1;transition:transform .15s;flex:0 0 auto;align-self:center}
.pv-capa[open]>summary::before{transform:rotate(90deg)}
.pv-h{font-size:var(--fs-body-lg);font-weight:800;color:var(--tx);letter-spacing:.01em}
.pv-sub{font-size:var(--fs-body-sm);color:var(--mut);font-weight:500}
.pv-capa>summary:hover .pv-h{color:var(--ac)}
.pv-b{padding-top:4px}
/* filas del archivo: cada publicacion desplegable (balance, conferencia o senal suelta) */
.wk{border:1px solid var(--bd);margin-bottom:7px;background:var(--panel2)}
.wk[open]{background:transparent}
.wk-s{cursor:pointer;padding:9px 13px;font-size:var(--fs-body-sm);color:var(--mut);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;list-style:none}
.wk-s::-webkit-details-marker{display:none}
.wk-s::before{content:"\25B8";color:var(--cy);flex:0 0 auto;transition:transform .15s}
.wk[open] .wk-s::before{transform:rotate(90deg)}
.wk-s:hover{color:var(--tx)}
.wk-s b{color:var(--tx);font-family:var(--mono);font-weight:800}
.wk-n{margin-left:auto;color:var(--dim);font-size:var(--fs-body-xs,.78rem)}
/* chip de serie: distingue el BALANCE SEMANAL del vocero de una conferencia o una senal suelta.
   El contador se apoya en esa distincion para no llamar "resumen semanal" a una entrevista (L484). */
.wk-serie{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ac);border:1px solid rgba(var(--ac-rgb),.35);background:rgba(var(--ac-rgb),.08);border-radius:var(--r-4);padding:1px 7px;font-weight:700;flex:0 0 auto}
.wk-b{padding:2px 13px 13px}
.panel.cartera table{font-size:var(--fs-body)}
.panel.cartera .num{font-size:var(--fs-body-lg)}
.panel.cartera .sub{font-size:var(--fs-micro)}
/* caveat de la cifra (cola de `unidad`) en la celda USD: ancho minimo para que no se envuelva en
   una columna de 1-2 palabras y estire la fila (la tabla ya scrollea horizontal en movil) */
.panel.cartera td.num .sub{min-width:200px;white-space:normal;line-height:1.45}
/* MAGNITUD de la cifra (UNIDAD 2c, 2026-08-08): que mide el numero — activo computable del regimen o
   monto anunciado. Se distingue del caveat de `unidad` que va debajo: aquella es prosa especifica del
   proyecto, esta es la etiqueta CONSISTENTE ×27 que sale de `inversion_magnitud`. Va en versalita y
   con el acento del sitio para que se lea como clasificacion y no como una segunda nota al pie.
   Mismo cuerpo que el caveat (--fs-micro): se distingue por COLOR, no por tamano — bajar a --fs-label
   (11,5px) la volvia la linea mas chica de la pagina justo donde el lector necesita entender el numero.
   ⚠️ 2026-08-16: este comentario tenia UN CIERRE DE COMENTARIO DE MAS a mitad de camino, asi que el
   navegador descartaba la regla de abajo — `.mag-nota` NUNCA se aplico desde que se escribio
   (08-ago). Lo cazo `pipeline/lint_css_comentarios.py`, que nacio de la misma clase de defecto en
   `nicho.css`. (Y ojo: escribir la secuencia de cierre DENTRO de un comentario para explicarla lo
   cierra ahi mismo — por eso esta nota la nombra en palabras.) */
.panel.cartera td.num .mag-nota{color:var(--tx2);letter-spacing:.02em;margin-top:2px}

/* SISTEMA DE TOKENS (regla del molde, 2026-06-25): caja = se puede TOCAR (CTAs/filtros) · PLANO = se LEE
   (sello + estado + fase). El color de semáforo + el punto cargan el significado; la caja queda RESERVADA
   a lo clickeable para que su affordance signifique algo (y el hover la ilumina, ver más abajo). Por eso
   TODO .b va plano: la CALIDAD del dato (verificado/probable/estimación/sin) y el ESTADO de ciclo
   (aprobado/presentado/anunciado) se distinguen por color, no por caja. */

/* `.b-cav` (letra chica del chip de estado) vive en `tokens.css`, al lado de `.b`: es
   estructura compartida por las dos pieles. Su regla se escribio el 2026-08-21. */

/* `.b.sin` subió a `tokens.css` el 2026-08-18 (A8(b)). `.b.neutral` NO: acá es `--tes` y en la
   clara `--sec`. */
.b.neutral{color:var(--tes)}

/* SEMAFORO DE ESTADO de la pagina de proyecto (`EST_PROM` y `ESTADO_VENT` de generar_html): la promesa
   cumplida/parcial/incumplida/vencida y la ventana operativa/en construccion. Se emitian SIN regla desde
   el alta de `/proyectos/<slug>` (2026-08-09) y heredaban el azul de acento dentro de `.py-li-e`, asi que
   "cumplida" e "incumplida" se veian IDENTICAS -> en un producto que se sostiene en decir cuando algo NO
   se cumplio, es el peor lugar donde perder el color. Hoy no se nota (Vicuna: 8 pendiente + 1 cumplida),
   pero se paga x26 al curar las promesas del resto. `lint_clases_css` no lo caza: mira nombres, y
   ok/am/bad estan estilados en OTROS contextos (.b.prog-ok, .tr-seg.bad) [[L725]]. Reusa los tokens del
   semaforo, sin color nuevo. */
.b.ok{color:var(--ok)}
.b.am{color:var(--warn)}
.b.bad{color:var(--bad)}

/* tablero (injerto B: banda de estado completa) */
.scorewrap{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
.score{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--bd);overflow:hidden;transition:border-color .14s}
/* la tarjeta responde al hover (señala que hay algo que abrir) y resalta su affordance pill */
.score:hover{border-color:rgba(var(--ac-rgb),.4)}
.score:hover .score-det>summary{border-color:rgba(var(--ac-rgb),.5);color:var(--ac)}
.score-top{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid var(--bd);margin-bottom:0}
.score.s-ok .score-top{background:rgba(var(--ver-rgb),.09);border-bottom-color:rgba(var(--ver-rgb),.3)}
.score.s-warn .score-top{background:rgba(var(--pro-rgb),.09);border-bottom-color:rgba(var(--pro-rgb),.3)}
.score.s-bad .score-top{background:rgba(var(--bad-rgb),.10);border-bottom-color:rgba(var(--bad-rgb),.32)}
.score .eje{font-family:var(--sans);font-size:var(--fs-body-lg);font-weight:650;color:var(--tx);margin-right:auto}
.score-top .b{border:none;background:transparent;padding:0;font-weight:700;letter-spacing:.14em;font-size:var(--fs-label)}
.b.prog-ok{color:var(--ok)}.b.prog-warn{color:var(--warn)}.b.prog-bad{color:var(--bad)}
/* ⛔ SIN PUNTO — cierra la regla que abrió `T142(b)` y que `T77/HG2` dejó a medias (2026-08-24).
   Los `prog-*` son NUESTRA LECTURA: el estado de un eje (cumpliendo / en proceso / en riesgo) y el
   signo de una reforma (favorable / mixto / adverso). Y `--ok` es **el mismo hex que `--ver`**
   (#35d07f), así que `● CUMPLIENDO` y `● VERIF` eran idénticos: mismo verde, mismo punto de 5 px,
   misma mono. Se ve peor de cerca: en la ficha de reforma el chip `● favorable` sale **pegado a un
   sello real** (`{esc(SIGNO_ETQ)}` + `sello(ip)`), o sea dos puntos seguidos, uno lectura y otro
   evidencia. Medido: **447 chips en 144 páginas**, ninguno con sello propio.
   ⇒ El punto queda como marca EXCLUSIVA del sello. El hue no se toca: el semáforo sigue leyéndose. */
.b.prog-ok::before,.b.prog-warn::before,.b.prog-bad::before{display:none}
.tend{font-size:var(--fs-sub);line-height:1}.tend.up{color:var(--cy)}.tend.flat{color:var(--mut)}.tend.down{color:var(--bad)}
/* chip de regla del marco (R1..R11 — decia R1..R7 hasta el 2026-08-23, con R10 viva desde julio):
   UNA sola forma, liviana SIN caja (antes .preg y .regla divergian:
   dos cajas casi iguales para lo mismo). Queda solo color --tes + mono -> consistente en todo el sitio. */
/* `inline-block` + `max-width:100%` en vez del `white-space:nowrap` que estuvo hasta el 2026-08-05.
   El nowrap buscaba que el chip CORTO no se parta en alto y migre entero al renglon siguiente, y para
   eso servia: la mediana del chip son 29 caracteres. Pero el campo es prosa libre y 64 de 260 chips
   pasan los 60 caracteres -el mayor tiene 1.183, en la portada-, asi que para esos el nowrap
   garantizaba el desborde: medido antes del cambio, hasta 1.089 px fuera de su columna en movil.
   El inline-block conserva LAS DOS cosas: es una caja atomica (si no entra en el renglon, migra
   entera, que era la intencion) y ademas envuelve por dentro en vez de salirse. */
.preg,.regla{font-family:var(--mono);font-size:var(--fs-label);color:var(--tes);
  display:inline-block;max-width:100%;overflow-wrap:break-word}
/* chip de regla cliqueable al metodo (#sellos) cuando hay ancla — mismo look que el span, hover avisa */
a.regla{text-decoration:none}a.regla:hover{text-decoration:underline dotted}
/* ⭐ El chip PELADO ya no publica el codigo a secas: `_glosar_preg()` le cuelga la frase de cada
   regla en el `title`. Se marca con subrayado punteado y `cursor:help` para que el lector sepa que
   hay algo debajo -- si no, un tooltip que nadie descubre es lo mismo que no tenerlo.
   ⛔ El texto VISIBLE no cambia: el codigo sigue siendo el ancla para quien sigue el marco. */
.preg.regla-ttl{cursor:help;border-bottom:1px dotted rgba(var(--tes-rgb),.65)}
.preg.regla-ttl:hover{color:var(--tx2);border-bottom-color:var(--tx2)}
/* dato grande protagonista; promesa/watchlist colapsadas (decision 4, 2026-06-10) */

/* tarjeta-stat del tablero (redisenio 2026-06-12): LA CIFRA protagonista + serie oficial */
.score-cifra{font-family:var(--mono);font-size:28px;font-weight:650;color:var(--white);letter-spacing:-.01em;line-height:1.15;margin:13px 14px 3px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.score-cifra .tend{font-size:var(--fs-body);flex:0 0 auto}
.score-sub{font-size:var(--fs-micro);color:var(--mut);line-height:1.55;margin:0 14px 6px}
.score-sub .b,.score-sub .fch{vertical-align:1px}
/* ⭐ EL ARCO DESDE LA HERENCIA (TT1/TT2/TT3, 2026-08-27) — la linea que contesta la promesa del eje.
   Hasta hoy vivia DENTRO de `.score-sub`, o sea en la misma linea gris corrida que la unidad y la
   fecha, y era invisible: la tarjeta de empleo publico publicaba «-104.900 puestos: -3,0%» y el
   usuario leyo «de 3,5 a 3,4 parece que no es un carajo», porque eso es lo que lideraba.
   La sacamos a su propia linea, con filo de color y un escalon mas de contraste que la glosa
   (`--mut-hi` sobre `--mut`). ⛔ No es texto nuevo: es el MISMO string, reordenado.
   Sale en 13 de los 18 ejes — los 5 que no tienen clausula de herencia no la dibujan. */
.score-arco{margin:0 14px 8px;padding:5px 0 5px 9px;border-left:2px solid rgba(var(--ac-rgb),.55);
  font-size:var(--fs-micro);line-height:1.5;color:var(--mut-hi)}
.score.s-ok .score-arco{border-left-color:rgba(var(--ver-rgb),.6)}
.score.s-warn .score-arco{border-left-color:rgba(var(--pro-rgb),.6)}
.score.s-bad .score-arco{border-left-color:rgba(var(--bad-rgb),.6)}
/* svg SIEMPRE a ancho completo + caption SIEMPRE debajo (no al lado): toda tarjeta del tablero
   con el grafico igual de ancho y la fecha/unidad abajo — consistencia (pedido usuario 2026-06-21) */
.spark{display:flex;flex-direction:column;align-items:stretch;gap:3px;margin:6px 14px 11px}
.spark svg{width:100%;height:auto;display:block;font-family:var(--mono)}
/* caption del grafico = sello plano unificado (clase 'sello spark-cap'): no se estira a todo el ancho
   de la columna y queda al ras del svg (la flecha .se-go va en acento, todo el bloque clickeable) */
.spark-cap{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.01em;color:var(--dim);align-self:flex-start;margin-left:0}
@media(min-width:1280px){.scorewrap{grid-template-columns:repeat(3,1fr)}}
/* T87 (2026-08-24): estas cuatro reglas colgaban de `.score` y NO MATCHEABAN EN NINGUN LADO --
   medido: dentro de `.score` no hay ni un `.prom`, `.qh` ni `.qh-item` en las 456 paginas. El
   contenedor real es `.reg-lect`, y el rename ya se habia hecho A MEDIAS: 26 lineas mas abajo,
   `.reg-lect .qh>.b.tes` ya usa el nombre nuevo. Consecuencia: el texto secundario de los 18 ejes
   (x2 idiomas) salia a 15,5px con el color del cuerpo, indistinguible del principal.
   ⚠️ Pasan a BASE y no a `.reg-lect` porque hay 2 `.prom` que cuelgan de `.panel`
   (programa/seguridad) y un prefijo `.reg-lect` los dejaria afuera ([[L1578]]). */
.prom{font-size:var(--fs-sub);color:var(--mut);line-height:1.55;margin:9px 0 0}.prom b{color:var(--mut-hi)}
.score .wl{font-size:var(--fs-micro);color:var(--mut);line-height:1.55;font-style:italic;margin:8px 0 0}
.qh{font-size:var(--fs-sub);color:var(--mut);line-height:1.55;margin:9px 0 0}.qh b{color:var(--tes)}
.qh-item{margin:5px 0 0;padding-left:15px;position:relative}
.qh-item:before{content:"\2192";position:absolute;left:0;color:var(--tes)}
.score .wl b{color:var(--mut-hi);font-style:normal}
.score-det{margin:0 14px 12px;border-top:1px dashed var(--bd);padding-top:8px}
/* el summary usa el affordance pill compartido (pill + chevron que rota). Acá solo el margin. */
/* U5 (2026-08-21): el detalle del eje se mudó a `/programa/<eje>` y la tarjeta cierra con un LINK
   en vez de un cajón. `.score-det` se REUSA como pie de la tarjeta —es puro layout: sangría, borde
   punteado y padding— así la tarjeta no cambia de forma al cambiar de affordance, y `.score-go` es
   el pill, que toma su aspecto del grupo compartido de más abajo (mismo pill, mismo chevron).
   ⛔ Por eso `.score-det` no se borra ni queda huérfano, y además sigue emitiéndose como cajón en
   el eje que todavía no tiene página (el guard de `tablero_programa`). */
.score-go{text-decoration:none}
/* Aca habia un `.score-det>summary{margin-top:2px}` que NUNCA se aplico: mas abajo (l.~968) el
   grupo `.ff-det>summary,…,.score-det>summary` declara `margin-top:8px` con la MISMA especificidad
   y, al ir despues, gana. O sea que el 2px era intencion escrita y no render. Se saca la linea
   muerta y el render NO se toca (hoy son 8px y es lo aprobado); si el 2px era lo querido, hay que
   decidirlo mirando y la cura seria mover la regla debajo del grupo. Declarado en el cierre. */
/* registro "Nuestra lectura" (Fase 2 portada, 2026-07-21): bloque tintado que separa NUESTRA
   interpretación (tendencia + qué habilita + qué vigilamos) de los hechos con fuente (dato completo,
   promesa, aval). Reusa el vocabulario tesis (--tes, misma familia que .tes-punch/.sig-upd). Clase de
   PIEL, no del Tablero → reusable ×N donde el dato conviva con nuestra lectura. */
.reg-lect{margin:12px 0 2px;padding:8px 14px 11px;border:1px solid rgba(var(--tes-rgb),.20);
  border-left:3px solid var(--tes);background:rgba(var(--tes-rgb),.05)}
.reg-lect-lbl{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tes);font-weight:700;margin:2px 0 0}
.reg-lect-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tes);flex:0 0 auto}
/* el badge "TESIS" del qh es redundante dentro del bloque (la etiqueta del bloque ya sella la lectura) */
.reg-lect .qh>.b.tes{display:none}

/* reformas / feed */
/* === Catálogo de reformas: fila densa colapsable + cuerpo de 2 columnas (rediseño Claude Design
   2026-06-25, importado vía DesignSync). Colapsada = una fila escaneable; abierta = contenido con
   MEDIDA DE LECTURA ACOTADA (.rf-main ~620px, grid etiqueta→valor) + RIEL de metadatos (.rf-rail). */
.rf{border-bottom:1px solid var(--bd-row)}.rf:last-child{border-bottom:0}
.rf>summary{cursor:pointer;list-style:none}.rf>summary::-webkit-details-marker{display:none}
/* FILA = grid de columnas fijas: estado, ámbito y fecha alinean parejo en TODAS las filas (el "orden
   cuadrado"); el título toma el espacio que sobra y solo trunca si hace falta. Los wrappers
   .rf-row-l/.rf-row-r usan display:contents para que sus hijos caigan directo en las columnas del grid. */
.rf-row{display:grid;grid-template-columns:15px minmax(0,1fr) minmax(0,186px) 116px 86px 74px;align-items:center;column-gap:15px;padding:12px 2px}
.rf-row-l,.rf-row-r{display:contents}
.rf-car{color:var(--dim2);font-size:10px;transition:transform .15s;justify-self:center}
.rf[open] .rf-car{transform:rotate(90deg)}
.rf>summary:hover .rf-title{color:var(--ac)}
.rf-title{font-size:15px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;min-width:0}
.rf-src{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* fecha: columna derecha alineada -> todas las filas terminan en el mismo borde. */
.rf-date{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.02em;color:var(--mut);text-align:right;justify-self:end}
/* ABIERTA: el titular crece a todo el ancho; el meta denso (norma/estado/ámbito/fecha) se oculta del
   encabezado y pasa al riel del cuerpo (rf-rail), como una ficha (estructura del diseño). */
.rf[open] .rf-row{grid-template-columns:15px 1fr}
.rf[open] .rf-title{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--tx-hi);white-space:normal;overflow:visible;grid-column:2}
.rf[open] .rf-src,.rf[open] .rf-row-r .b,.rf[open] .rf-date{display:none}
.rf-body{display:flex;justify-content:flex-start;align-items:flex-start;gap:44px;padding:2px 2px 18px 21px}
.rf-main{flex:0 1 calc(104px + 16px + 63ch + 24px);min-width:0}
/* ⭐ MEDIDA DEL TEXTO EN LA FICHA (2026-09-12). El tope incluia la columna del rotulo
   (104 px + 16 de separacion), asi que al parrafo le quedaban 480 px: mas angosto que los 63ch
   del resto del sitio, y con la caja al lado vacia. El tope se calcula sobre el TEXTO. */
.rf-grid{display:grid;grid-template-columns:104px 1fr;gap:12px 16px;
  max-width:calc(104px + 16px + 63ch);margin-bottom:4px}
.rf-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.rf-v{font-size:var(--fs-body);line-height:1.62;color:#C2CAD6}.rf-v b{color:var(--tx)}
.rf-rail{flex:0 0 178px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
/* PIE de la fila abierta: la puerta a la ficha propia de la norma (T59 #12). Vive dentro de
   .rf-main, o sea FUERA del <summary>: su clic navega y no togglea el <details> (medido con el
   evento `toggle`). Un link en `.rf-src` hacia lo contrario — no abria la fila, y ademas
   `.rf[open] .rf-src{display:none}` lo escondia justo al abrir. */
.rf-ficha{margin-top:15px;padding-top:12px;border-top:1px solid var(--bd-row)}
.rf-ficha a{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--ac)}
.rf-ficha a:hover{text-decoration:underline}
@media(max-width:680px){
  /* el grid de 6 columnas no entra en un teléfono -> la fila pasa a 3 líneas: título (envuelve, sin
     truncar) arriba; la NORMA (tipo: ley/decreto/resolución/proyecto) en su PROPIA línea legible; y
     estado/ámbito/fecha abajo. Se anula display:contents de los wrappers. FIX 2026-07-22: la norma era
     `flex:0 0 auto` (rígida ~226px) y aplastaba el título a ~25-55px -> se apilaba letra por letra
     (reporte del usuario "columna tipo angosta"); ahora `flex:1 1 100%` la baja a su renglón. */
  .rf-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:5px}
  .rf-row-l{display:flex;flex-wrap:wrap;flex:1 1 100%;min-width:0;align-items:baseline;gap:3px 9px}
  .rf-row-r{display:flex;flex:1 1 100%;align-items:center;gap:11px}
  .rf-title{white-space:normal;overflow:visible}
  .rf-src{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip}
  .rf-date{margin-left:auto;justify-self:auto}
  .rf[open] .rf-row{display:flex}
  /* cuerpo abierto en mobile: la grilla etiqueta|valor se apila (etiqueta arriba, texto a todo el ancho)
     en vez de quedar en dos columnas angostas que se ven mal en el teléfono. */
  .rf-grid{grid-template-columns:1fr;gap:3px 0;max-width:none}
  .rf-k{padding-top:0;margin-bottom:1px}
  .rf-body{flex-direction:column;gap:12px;padding-left:14px}.rf-rail{align-items:flex-start;text-align:left}}
/* ⚠️ EL FILO ES DE 2px, NO DE 3 — U16 · provincia inversor, 1a tanda (2026-08-15).
   Las 5 piezas-de-filo del molde (`.pyi` `.pyd` `.pyv` `.pyi-dbody` `.pyn`) llevan `border-left:2px`
   SIN EXCEPCION, y con cualquier color semantico: el ancho no codifica jerarquia, el color si
   (`--dim` `--ac` `--bd2` `--bad`). El 3px de esta hoja no era una decision: `.ref-imp` estaba
   escrita bajo el comentario «agregados de implementacion (no venian en el handoff)» y tiene su
   gemelo exacto en el molde — `.pyi`, mismo rol y MISMO color `--dim`, con 2px. Eso es deriva, no
   diseño. (El unico 3px de molde.css es `.pyr-seg.dir` dentro de un @media de movil: es una marca
   de direccion en una barra apilada, no la pieza-de-filo del rol.)
   ⛔ Al agregar una pieza de filo nueva a esta hoja: 2px. El 3px vuelve a abrir la brecha. */
/* ⭐ Desde el 2026-08-27 vive SIN `.panel` alrededor (TR2/R5): el marco era doble -- la caja
   ponia el mismo fondo `--panel` que ya trae este elemento. Al quedarse sola necesita su
   propio aire, que antes le daba el padding de la caja. El filo `--tes` se queda: es lo que
   dice que esto es TESIS y no hecho, y sacarlo si seria perder dato. */
.ref-lectura{font-size:var(--fs-body-lg);color:var(--tx2);line-height:1.6;max-width:88ch;margin:7px 0 22px;padding:12px 15px;background:var(--panel);border-left:2px solid var(--tes)}
.ref-lectura b{color:var(--tes)}
/* tesis de convergencia: inferencia de 2do orden (varias piezas = una historia). Sello tesis siempre,
   semaforo derivado del estado de las piezas. Lenguaje visual hermano de .ref + acento --tes. */
/* div.tes (cualificado): la fila de tesis comparte el nombre 'tes' con el badge <span class="b tes">;
   sin cualificar, su padding 14px 0 + border-bottom se filtraban al badge y lo hacian alto/sin ancho
   (colision de clases, fix 2026-06-21, reporte usuario) */
div.tes{padding:14px 0;border-bottom:1px solid var(--bd-row)}div.tes:last-child{border:0}
.tes-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.tes-n{font-size:16px;color:var(--tx);font-weight:680;margin-right:auto;max-width:62ch}
.tes-punch{font-size:var(--fs-body-lg);color:#D6DEEA;line-height:1.6;max-width:90ch;padding:10px 16px;background:var(--panel);border-left:2px solid var(--tes)}
/* palancas core de la tesis (la cuantificacion del moat) fuera del expander: chips escaneables */
.tes-palancas{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px;max-width:96ch}
.tes-pal{font-family:var(--mono);font-size:var(--fs-label);line-height:1.45;color:var(--tx2);border:1px solid var(--bd2);border-radius:var(--r-8);padding:4px 9px;background:var(--tint)}
/* «El desarrollo, en <Provincia>» — la contrapartida de P1 (2026-08-24): la portada resume la tesis
   y manda el desarrollo a la provincia, que es su dueña. Sin este renglón el recorte sería una poda.
   Va DEBAJO del punch y en tono de pie, no de CTA: no compite con la conclusión, la despide. */
.tes-donde{font-size:var(--fs-sub);color:var(--mut);margin:8px 0 2px}
.tes-det{margin-top:8px}
.tes-q{font-size:var(--fs-body-lg);color:var(--tx2);margin:7px 0;line-height:1.6;max-width:90ch}.tes-q b{color:var(--tx)}
.tes-piezas{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;padding:11px 16px;background:var(--panel);border:1px solid var(--bd)}
.tes-pieza{font-size:var(--fs-sub);color:var(--tx2);line-height:1.5;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tes-pieza>b,.tes-pieza>a{color:var(--tx);font-weight:640}
.tes-rol{color:var(--mut);flex:1 1 60%;min-width:240px}
/* LOS SUPUESTOS del razonamiento: van antes de «lo que la rompe» y se leen igual que ese bloque,
   con su rotulo en el gris de lo que todavia no es hecho. */
.tes-sup{margin-top:9px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx2)}
.tes-sup>b{color:var(--tx);margin-right:5px}
.tes-sup ul{margin:6px 0 0;padding-left:18px}.tes-sup li{margin:3px 0}
.tes-rompe{margin-top:9px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx2)}
/* ⭐ `.tes-tr` NO tenia regla propia, asi que sus `li` heredaban el cuerpo del documento (15,5)
   y quedaban fuera de la escala sin que nadie lo viera: son 36.420 caracteres de lectura en las
   5 paginas de provincia. Un bloque de prosa SIN font-size declarado es tan invisible como uno
   declarado con el token equivocado. (27-ago, la pasada del cuerpo de prosa.) */
.tes-tr{font-size:var(--fs-body-lg);line-height:1.6}
.tes-rompe>b{color:var(--pro)}
.tes-rompe ul{margin:6px 0 0;padding-left:18px}.tes-rompe li{margin:3px 0}
/* eslabones: la cadena multicausal tramo por tramo, badge de solidez por eslabon (§🔧·5 2026-07-15) */
.tes-eslabones{margin-top:9px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx2)}
.tes-eslabones>b{color:var(--pro)}
.tes-eslabones ol{margin:6px 0 0;padding:0;list-style:none}
.tes-esl{margin:7px 0;padding:9px 12px;background:var(--panel);border:1px solid var(--bd)}
.tes-esl-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tes-esl-n{font-family:var(--mono);font-size:var(--fs-label);color:var(--mut);border:1px solid var(--bd2);border-radius:50%;width:1.7em;height:1.7em;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:center}
.tes-esl-paso{flex:1 1 60%;min-width:240px;color:var(--tx);font-weight:560}
.tes-esl-sub{margin-top:5px;color:var(--mut);max-width:90ch}
.tes-esl-sub>b{color:var(--tx2);font-weight:600}
/* lectura tesis del panel de indicadores: por que son los indicadores clave (mismo lenguaje .ref-lectura) */
.ind-lectura{margin:2px 0 12px;padding:9px 12px;background:var(--panel);border-left:2px solid var(--tes)}
.il-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.il-t{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.il-p{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx2)}
.ind-rompe{margin-top:8px;font-size:var(--fs-sub);line-height:1.55;color:var(--mut)}
.ind-rompe .ir-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--pro);margin-right:7px}
/* dos columnas en desktop con filas alineadas (grid, mismo criterio que .claims) */
@media(min-width:780px){
  .sigs{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;row-gap:6px;align-items:start}
  .sig{border-bottom:0}
}
.sig{padding:12px 0;border-bottom:1px solid var(--bd-row)}.sig:last-child{border:0}
.sig .m{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-label);color:var(--mut)}.sig .who{color:var(--ac)}
/* cargo del emisor dentro de la tarjeta del archivo: texto plano, no chip. La fila ya dice quien
   habla, asi que el cargo queda solo — un chip con borde sobre un cargo largo se volvia una caja
   a todo el ancho (visto en captura, F11). Degrada a cualquier largo. */
.sig .rol{color:var(--mut);font-size:var(--fs-label);letter-spacing:.03em;line-height:1.5;max-width:78ch}
.sig .m .sep{color:var(--dim)}
.sig .tx{font-size:var(--fs-body-lg);margin:5px 0;color:var(--tx);line-height:1.6;max-width:88ch}
/* El pliegue que guarda la cita del anuncio: es lo secundario de la tarjeta —nuestra lectura queda
   arriba y a la vista—, así que su rótulo se lee como un control, no como un título. */
.sig-anuncio > summary{cursor:pointer;font-family:var(--mono);font-size:var(--fs-label);
 letter-spacing:.05em;color:var(--ac);margin-top:7px}
.sig-anuncio[open] > summary{color:var(--mut)}
/* ===== LOS DOS PLIEGUES NUEVOS DE LA PÁGINA DE PROVINCIA (2026-09-17): el detalle de la ficha y el
   resto del análisis de clima. Mismo control que ya usan la cartera y la tesis —no se inventa un
   componente nuevo—, sólo el selector cambia. */
.dsr-mas>summary,.clima-mas>summary,.sigs-mas>summary,.tes-mas>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;
 width:fit-content;list-style:none;font-family:var(--mono);font-size:var(--fs-label);
 letter-spacing:.01em;color:var(--ac);border:1px solid var(--bd2);border-radius:var(--r-8);
 padding:5px 12px;transition:.13s}
.dsr-mas>summary::-webkit-details-marker,.clima-mas>summary::-webkit-details-marker,
.sigs-mas>summary::-webkit-details-marker,.tes-mas>summary::-webkit-details-marker{display:none}
.dsr-mas>summary::before,.clima-mas>summary::before,.sigs-mas>summary::before,
.tes-mas>summary::before{content:"\25B8";font-size:10.5px;line-height:1;transition:transform .15s}
.dsr-mas[open]>summary::before,.clima-mas[open]>summary::before,
.sigs-mas[open]>summary::before,.tes-mas[open]>summary::before{transform:rotate(90deg)}
.dsr-mas>summary:hover,.clima-mas>summary:hover,.sigs-mas>summary:hover,
.tes-mas>summary:hover{border-color:var(--ac)}
.dsr-mas{margin:0 22px 20px}
.clima-mas{margin:4px 0 14px}
.sigs-mas,.tes-mas{margin:12px 0 2px}
.tes-punch-mas{margin:0 0 10px;color:var(--tx2)}
/* titular curado de la senal (campo `tema`): el tweet crudo no se auto-titula */
.sig .sig-tema{margin-top:5px;font-weight:700;font-size:var(--fs-body);color:var(--tx2);letter-spacing:.01em;max-width:88ch}
/* pie "fuente que cita": el dataset que ELLOS citan y nosotros observamos directo (pilar del metodo) */
.sig .sig-fc{margin-top:6px;font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);letter-spacing:.02em}
.sig .sig-fc .lbl{color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
/* nuestra lectura del tweet = inferencia (tesis): etiquetada y con acento azul fino, mismo
   lenguaje que "La semana del programa" y la lectura de las reformas (voz propia diferenciada) */
.sig .inf{margin-top:7px;padding-left:13px;border-left:2px solid rgba(var(--ac-rgb),.5);font-size:var(--fs-sub);color:var(--mut);line-height:1.55;max-width:88ch}
.sig .inf .lbl{color:var(--tes);font-weight:700}

.sig .m a.src{color:var(--mut);text-decoration:none}.sig .m a.src:hover{color:var(--ac)}
/* WATCHLIST (pagina inversor: 'lo que esta por salir') — acento ambar = pendiente/upside, sin alarma */
.sig.wl{padding-left:14px;border-left:2px solid rgba(var(--ac-rgb),.35)}
.sig.wl .m .chip.ev{color:var(--ac);border-color:rgba(var(--ac-rgb),.4);background:rgba(var(--ac-rgb),.08);letter-spacing:.08em;font-weight:700}
/* estante 2 (F12): el acto que YA salio. Verde = el token de verificado del sitio, el mismo del
   marcador de la portada — el lector no aprende un color nuevo, reconoce el que ya significa "esto
   pasó y lo comprobamos". */
.sig.wl.ok{border-left-color:rgba(var(--ver-rgb),.45)}
.sig.wl.ok .m .chip.ok{color:var(--ver);border-color:rgba(var(--ver-rgb),.42);background:rgba(var(--ver-rgb),.08);letter-spacing:.08em;font-weight:700}
/* la LINEA de la senal cumplida cuya norma ya tiene ficha en esta pagina: una fila, no una tarjeta
   (repetir el hecho y la lectura de la ficha es duplicar). Envuelve en movil en vez de desbordar. */
/* sin border-bottom a proposito: `.sigs` es una grilla de 2 columnas, y un separador horizontal con
   `:last-child` deja la ultima celda sin el suyo -asimetria visible-. El borde izquierdo verde y el
   chip ya separan las filas. */
.wl-ln{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;padding:7px 0 7px 14px;
  border-left:2px solid rgba(var(--ver-rgb),.45)}
.wl-ln .chip.ok{color:var(--ver);border-color:rgba(var(--ver-rgb),.42);background:rgba(var(--ver-rgb),.08);letter-spacing:.08em;font-weight:700;flex:0 0 auto}
.wl-ln-f{font-family:var(--mono);font-size:var(--fs-label);color:var(--mut);flex:0 0 auto}
.wl-ln-t{font-size:var(--fs-body);color:var(--tx2);line-height:1.5;flex:1 1 260px;min-width:0}
.wl-ln-a{font-family:var(--mono);font-size:var(--fs-label);color:var(--ac);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.wl-ln-a:hover{text-decoration:underline}
/* sub-rotulo de estante: solo aparece cuando el panel muestra LOS DOS */
.wl-sub{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin:18px 0 2px}
.wl-sub:first-child{margin-top:0}
/* actualizacion de una senal (evolucion posterior al registro): sub-bloque tintado + chip datado.
   Separa el estado ORIGINAL del cambio POSTERIOR (antes se pegaba con '||' y salia literal). Verde =
   `resultado: cumplida` (el acto que vigilabamos se materializo). Sin scope: sirve en .sig y en .vc. */
.sig-upd{margin:9px 0 3px;padding:9px 13px 10px;background:rgba(var(--ac-rgb),.05);border:1px solid rgba(var(--ac-rgb),.16)}
.sig-upd .u-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ac);border:1px solid rgba(var(--ac-rgb),.4);background:rgba(var(--ac-rgb),.08);border-radius:var(--r-4);padding:2px 8px;font-weight:700}
.sig-upd .u-tx{margin:7px 0 0;font-size:var(--fs-body-lg);color:var(--tx2);line-height:1.55;max-width:86ch}

/* chip de regla glosada (R5 · mejor netback exportador): jerga decodificada, color tesis */
/* .regla unificada con .preg (chip de regla sin caja, definido arriba). Es `inline-block` con
   `max-width:100%`: migra entero al renglon siguiente como caja atomica, y si su glosa no entra en el
   ancho de la columna envuelve por dentro en vez de desbordarse (cambio 2026-08-05, ver alla). */

/* la semana del programa: anuncio oficial vs nuestro veredicto.
   Formato COLUMNA COMPACTA (decision usuario 2026-06-21, sobre el handoff Claude Design "La Semana
   del Programa"): adoptamos la idea de etiquetar "Nuestra lectura" como voz propia, pero sin la caja
   pesada -> para 8 afirmaciones seguidas la tarjeta cansaba. Apilado: veredicto + afirmacion +
   lectura con acento fino del color del veredicto. Densidad del sem-item viejo + la lectura separada.
   Los colores salen de nuestros tokens de veredicto (no de la paleta del mockup). */
.sem-origen{margin:14px 0 0;max-width:760px;font-size:var(--fs-body-lg);line-height:1.62;color:var(--mut)}
.sem-origen b{color:var(--tx);font-weight:700}
.sem-origen .src{opacity:1}
.sem-tally{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin:18px 0 0;padding-bottom:15px;
  border-bottom:1px solid var(--bd);font-family:var(--mono);font-size:var(--fs-sub);color:var(--dim)}
.sem-tally .t0{color:var(--tx);font-weight:600}
.sem-tally b{font-weight:700}

.claims{margin-top:16px}
/* dos columnas en desktop con FILAS reales (grid, no column-count): asi fila N izquierda y fila N
   derecha arrancan a la misma altura (column-count son flujos sueltos que se desfasan -> caos).
   align-items:start = cada celda pega arriba de su fila; la altura de la fila la marca la mas alta.
   Sin border separador (en grid quedaba dentado): la etiqueta de veredicto + el aire separan. */
@media(min-width:780px){
  .claims{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;row-gap:6px;align-items:start}
  .vc{border-bottom:0}
}
.vc{padding:14px 0;border-bottom:1px solid var(--bd-row)}
.vc:last-child{border-bottom:0}
.vc-v{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vc)}
.vc-v .d{width:7px;height:7px;border-radius:50%;background:var(--vc);flex:0 0 auto}
/* ⭐ EL PESO VA EN LO QUE PRODUCIMOS NOSOTROS, NO EN LO QUE COPIAMOS (decision del usuario,
   2026-09-20). Las dos partes de la tarjeta tenian el MISMO cuerpo de letra, pero la afirmacion del
   gobierno iba en blanco y semi-negrita y nuestra verificacion en gris y peso normal: el comunicado
   ajeno dominaba la tarjeta y lo unico que aportamos se leia como una nota al pie. Se da vuelta el
   enfasis sin tocar ni el tamano ni el orden — la afirmacion es una CITA de un tercero y se compone
   como tal; la lectura es nuestra y es la razon de existir del bloque. */
.vc-claim{margin:6px 0 0;font-size:var(--fs-body-lg);line-height:1.55;font-weight:400;color:var(--mut);max-width:90ch}
.vc-claim .src{margin-left:2px}
.vc-read{margin:8px 0 0;padding:1px 0 1px 13px;border-left:2px solid var(--vc-bd);overflow-wrap:anywhere;
  font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx);font-weight:600;max-width:90ch}
.vc-read .lbl{color:var(--vc);font-weight:700}
/* color del veredicto (sin color-mix, igual que el resto del sitio) */
.vc.v-ver{--vc:var(--ver);--vc-bd:rgba(var(--ver-rgb),.5)}
.vc.v-pro{--vc:var(--pro);--vc-bd:rgba(var(--pro-rgb),.5)}
.vc.v-tes{--vc:var(--tes);--vc-bd:rgba(var(--ac-rgb),.55)}

.vc.v-dim{--vc:var(--dim);--vc-bd:rgba(var(--tes-rgb),.45)}
@media(max-width:600px){ .sem-tally{gap:5px 14px} }

/* provincias / puertas */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px;margin-bottom:6px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--bd);padding:14px 15px;transition:border-color .15s}
.card:hover{border-color:var(--bd2)}
/* radio 9: gemelo por FUNCION `.fsrc-cta` (cierre.css), el boton-CTA que el destino emite con 9 —
   mismo criterio con el que `.oc-go` y `.op-chip` salieron del 7 en la tanda 2. U16 · tanda 4. */
.door{display:block;text-align:center;text-decoration:none;font-family:var(--mono);font-size:var(--fs-sub);padding:9px 10px;border-radius:var(--r-8);border:1px solid;transition:.13s}
.door-inv{color:var(--ac);border-color:rgba(var(--ac-rgb),.4);background:rgba(var(--ac-rgb),.07)}
.door-inv:hover{background:rgba(var(--ac-rgb),.13);border-color:var(--ac)}
.door-gen{color:var(--cy);border-color:rgba(var(--cy-rgb),.4);background:rgba(var(--cy-rgb),.06)}
.door-gen:hover{background:rgba(var(--cy-rgb),.12);border-color:var(--cy)}
/* la TERCERA puerta (P5, 2026-08-24). Misma forma que sus dos hermanas — lo único que cambia es el
   token, que es la regla del sitio para un elemento compartido. Ver `--prv` arriba. */
.door-prv{color:var(--prv);border-color:rgba(var(--prv-rgb),.4);background:rgba(var(--prv-rgb),.07)}
.door-prv:hover{background:rgba(var(--prv-rgb),.13);border-color:var(--prv)}

/* disclaimer / footer */
.disc{background:var(--panel2);border:1px solid var(--bd);border-radius:var(--r-8);padding:10px 14px;font-size:var(--fs-body-lg);color:var(--mut);margin:14px 0;line-height:1.6}
/* lectura rapida: la negrita de skim resalta sobre el gris del parrafo (antes era bold mismo gris -> no saltaba) */
.disc b{color:var(--tx);font-weight:600}
/* B1 (2026-08-25) — LA GLOSA SALE DE LA CAJA cuando ya vive DENTRO de una.
   Elegida por el usuario sobre su ejemplo literal, el parrafo de «Reformas pro-mercado»
   (`visual/propuesta-cajas-y-menu.html` §3). `.disc` se diseño como nota suelta y por eso trae
   caja propia; el problema aparece cuando esa caja cae adentro de un `.panel`, que ya es una caja:
   dos marcos concentricos para un parrafo. MEDIDO el 25-ago sobre el HTML emitido de los 24
   ejemplares: **44 glosas en 16 moldes -> 153 paginas ES** (mas sus gemelas EN).
   ⛔ El texto se queda COMPLETO: se van el fondo, el borde y el radio (`IDENTIDAD §2 regla 7`).
   Se conserva el color y el tamano, que son los que dicen «esto es glosa, no cuerpo».
   ⚠️ Un `.disc` SUELTO —sin caja alrededor— conserva la suya: ahi el marco es lo que lo separa
   de lo que lo rodea, y quitarselo lo confundiria con el cuerpo del texto. Por eso el selector
   pide ancestro, no `.disc` a secas — y el control esta medido: **17 `.disc` sueltas** siguen
   con caja en los mismos 24 ejemplares, o sea que `.disc` pelado NO habria sido lo mismo.
   ⚠️ HAY QUE RESETEAR, NO OMITIR, y ya esta pagado: `cierre.css` lo escribe con todas las letras
   («la trampa de la clase PRESTADA»). `.disc` la definen las DOS pieles sin scope, asi que no
   declarar el reset deja el marco puesto igual. Por eso van `background`, `border` y
   `border-radius` explicitos. Y el `.cierre-zone .disc` de `cierre.css` sigue ganando por orden
   de hoja: su version conserva un filete, que es lo que ese bloque necesita.
   Hermano exacto en `despegue-gente.css` (piel clara): lo unico que cambia por piel es la
   paleta, nunca la estructura. */
.panel .disc,.reg-lect .disc,.ref-sec .disc{background:none;border:0;border-radius:0;padding:0}
/* la frase que cierra la lista de la cartera (2026-09-07): va DEBAJO de la tabla —decision del
   usuario ese dia, la clave del sello no vuelve arriba— y se separa de la ultima fila. */
.cr-disc{margin:14px 0 0}
/* dos puertas (portada): la promesa central del producto -> callout con peso, no nota al pie gris */
/* filo de 2px — U16 · la tarjeta, 2026-08-16. La 1a tanda bajo el filo de 3 a 2 px en las 10 reglas de
   la PROVINCIA; estas dos se salvaron por estar en la PORTADA, no porque fueran otra cosa: son la misma
   pieza-de-filo (bloque con riel izquierdo de acento) y la regla escrita 200 lineas mas arriba no admite
   excepcion — «al agregar una pieza de filo nueva a esta hoja: 2px». El color sigue codificando el rol
   (--ac inversor / --cy gente); el ancho no codifica nada. */
.pi-inv{border-left:2px solid var(--ac)}.pi-inv b{color:var(--ac-lo)}
.pi-prv{border-left:2px solid var(--prv)}.pi-prv b{color:var(--prv)}
.pi-gen{border-left:2px solid var(--cy)}.pi-gen b{color:var(--cy)}
.pi-sub{font-size:var(--fs-sub);color:var(--dim)}
@media(max-width:560px){.pi-doors{flex-direction:column}}

@media(max-width:1000px){
  
  /* el tablero se queda en 2 columnas en tablet (600-1000px): tarjetas-stat escaneables, la mitad
     de alto que apiladas. En telefono (<=600px) vuelve a 1 col: la tarjeta-stat es rica (estado +
     regla + sparkline con caption) y a <300px de ancho recorta texto. Una grilla-tile compacta que
     entre en 2 col en el telefono seria un rediseno de la tarjeta (pendiente, no en esta pasada). */
  .scorewrap{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .metodo-pasos{grid-template-columns:1fr;gap:13px}
  .hero-despegue{flex-direction:column;align-items:flex-start;gap:16px}
  .hd-firma{margin-left:0;flex:none;width:100%}
  /* la firma pierde el filo lateral y toma uno superior: apilada, un `border-left` no separa nada */
  .hero-despegue .hd-firma{border-left:0;border-top:1px solid var(--bd);padding:14px 0 0}
  /* ⚠️ La barra NO apila acá aunque el hero sí: al apilar el hero, la columna izquierda se queda con
     el ancho ENTERO, o sea que la barra tiene MAS espacio, no menos. Su apilado vive en su propia
     media query, abajo, y el breakpoint salio de medir el rotulo — no de copiar este 1000. */
  .capture{grid-template-columns:1fr}
  .cap-k{flex:0 0 100%}
}
/* ⭐ La barra del hero APILA acá y pierde el relleno proporcional: dos filas del mismo ancho ya no
   comunican proporcion, y el segmento lleno pesa mas que el tramo mayor (trampa ya escrita en el
   molde). Queda el FILO de color —que es lo que dice de que tramo se trata— y el monto, que nunca
   se va.
   ⚠️ EL BREAKPOINT SE MIDIO, no se eligio: el rotulo del segmento angosto (el del 32%) va en 2
   lineas mientras el segmento mide >=219 px, y salta a 3 debajo de ~215. Con la firma al lado eso
   ocurre a viewport ~1080 — o sea que el corte NO es un numero redondo de movil: es 1080, y a 1024
   (sin este corte) el rotulo ya salia en 3 lineas. */
@media(max-width:1080px){
  .hd-bar{flex-direction:column;min-height:0;border:0}
  .hd-seg{width:100% !important;background:none !important;border-right:0;
    border-left:3px solid currentColor;padding:7px 0 7px 11px}
  .hd-seg+.hd-seg{margin-top:7px}
  .hd-seg.res{color:var(--ac)}.hd-seg.com{color:var(--pro)}.hd-seg.eval{color:var(--dim)}
  .hd-seg.res b,.hd-seg.eval b,.hd-seg.com b{color:var(--tx)}
}
/* ⭐ LAS CUATRO CIFRAS, EN FILA Y NO EN TARJETA (2026-09-12). Medido a 390 px: la grilla de 2x2
   se llevaba 380 px para cuatro numeros, porque cada rotulo se partia en dos renglones y su glosa
   en tres. En fila —numero a la izquierda, rotulo y glosa a la derecha— el rotulo entra entero.
   ⛔ No se quita nada: los cuatro numeros, sus cuatro rotulos y sus cuatro glosas siguen. */
@media(max-width:560px){
  .kpis{grid-template-columns:1fr;gap:6px}
  /* ⚠️ `.kpi.go` TAMBIEN, y hay que nombrarlo: `.kpi.go{display:block}` son dos clases contra una,
     asi que ganaba por especificidad y el recuadro que ES PUERTA se quedaba apilado mientras el de
     al lado iba en fila. Con la fila de tres bajada a una columna (2026-09-20) los tres quedan uno
     debajo del otro y la diferencia se ve de golpe: dos formas distintas para la misma cosa. */
  .kpi,.kpi.go{display:grid;grid-template-columns:minmax(52px,auto) 1fr;column-gap:11px;
    align-items:center;padding:9px 12px}
  .kpi .v{grid-column:1;grid-row:1/3;margin:0;font-size:25px;line-height:1.1}
  .kpi .k-h{grid-column:2;grid-row:1;min-width:0}
  .kpi .k{letter-spacing:.07em}
  .kpi .u{grid-column:2;grid-row:2;margin-top:1px;line-height:1.4}
}
@media(max-width:760px){.page{padding:12px 12px 50px}.kpi .v{font-size:24px}
  .kpi.dom .v{font-size:31px}}
/* ⭐ TELEFONO (<=600px): UNA COLUMNA. Cambiado el 2026-09-02 y el motivo esta MEDIDO en captura.
   Hasta hoy eran 2 columnas con la tarjeta compactada (Fase 2 portada, 2026-07-21), y el limite de
   1 col estaba en 340px, o sea que un telefono normal (390px) caia en 2 columnas de ~178px. A ese
   ancho la tarjeta no entra: el titulo del eje va en 3 lineas («Produccion energetica (Vaca
   Muerta)»), la fecha del sello se parte en tres («31-
07-
2026») y la caption del sparkline
   estaba directamente apagada. Es el arreglo que el reporte externo de la portada marco
   obligatorio. A 366px de ancho la tarjeta entra entera y la caption vuelve.
   ⛔ Los 2 col NO se pierden: siguen vivos de 601 a 1000 px (tablet), donde la tarjeta tiene
   ~300px y si entra. */
@media(max-width:600px){
  .scorewrap{grid-template-columns:1fr;gap:10px}
  .score-top{flex-wrap:wrap;row-gap:3px;padding:7px 11px 8px}
  .score .eje{flex:1 1 100%;margin-right:0;font-size:var(--fs-body-sm);line-height:1.3}
  .score-cifra{font-size:21px;margin:10px 11px 2px;gap:6px}
  .score-cifra .tend{font-size:var(--fs-sub)}
  .score-sub{margin-left:11px;margin-right:11px}
  
  /* La caption del sparkline VUELVE en telefono desde el 2026-09-02: se habia apagado porque a
     ~175px de ancho se cortaba, y con una sola columna la tarjeta tiene 366px. */
  .score-det{margin:0 11px 11px}
}

/* ---- inversor: navegacion (medidas de .back en tokens.css) ---- */
/* ⭐ `:active` VA JUNTO A `:hover` (2026-09-20). El boton de la cabecera solo tenia estado de
   raton, y en un telefono el raton no existe: al tocarlo no cambiaba de tono, o sea que no
   devolvia ninguna senal de haber sido tocado. La pastilla de subir ya lo tenia resuelto asi
   (`.totop.show:active` en tokens.css); esta es la misma cura, en el boton que mas se toca. */
.back{color:var(--cy)}
.back:hover,.back:active{border-color:var(--cy);background:rgba(var(--cy-rgb),.08)}
.back.alt{color:var(--ac)}
.back.alt:hover,.back.alt:active{border-color:var(--ac);background:rgba(var(--ac-rgb),.08)}
/* el interruptor de recorrido del header pasó de UN link a DOS (P5, 2026-08-24): cada uno lleva el
   color de SU recorrido, para que el lector reconozca a dónde va antes de leer el rótulo.
   ⚠️ A 390 px cada link toma su propia fila — el costo medido es +47 px, y es «un link más», no «un
   rótulo más largo»: los tres candidatos de rótulo daban exactamente el mismo alto. */
.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),.08)}
.back.alt.alt-gen{color:var(--cy)}
.back.alt.alt-gen:hover,.back.alt.alt-gen:active{border-color:var(--cy);background:rgba(var(--cy-rgb),.08)}
.chip.am{color:var(--ac);border-color:rgba(var(--ac-rgb),.4);background:rgba(var(--ac-rgb),.08)}
/* ---- ficha provincial ---- */
.rail{display:flex;flex-direction:column;gap:14px}

/* ⚠️ SE LLAMA `.lrow`, NO `.li` — renombrado el 2026-08-16 (U16·U3b) por el MISMO choque que se acaba
   de arreglar en el ticker, y este era el segundo caso: `li` es tambien el modificador del boton de
   LinkedIn (`class="share-b li"`, 196 instancias). Igual especificidad, gana la de mas abajo, y esta
   fila de lista esta en la 886 contra la 105 del boton — asi que en piel OSCURA el icono de LinkedIn
   salia con `--tx2` (mas brillante que el `--mut` de sus 4 hermanos) y con el borde inferior en
   `#101722`, o sea CASI INVISIBLE sobre el fondo: el boton parecia no tener borde de abajo.
   Se renombra la FILA (6 puntos de emision, 36 instancias) y no el modificador (196).
   ⛔ Los nombres de dos letras en una hoja compartida chocan. Ya paso dos veces el mismo dia. */
.lrow{font-size:var(--fs-body-sm);color:var(--tx2);padding:8px 0;border-bottom:1px solid var(--bd-row);line-height:1.6}.lrow:last-child{border:0}

/* ---- hero slim de provincia ---- */

/* En el telefono se esconde el rotulo de seccion, con UNA excepcion medida el 2026-09-07: la ficha
   de proyecto es la unica de esta piel que NO lleva el desplegable de hermanos, asi que ahi nada mas
   dice que es un proyecto RIGI. Se marca `corta` y se muestra, acortada a "RIGI" tapando la palabra
   de mas: mide 57 px, entra en la fila que ya existe y el titulo no se mueve (0 px). En nicho y oficio
   el desplegable de al lado ya dice "NICHO" y "OFICIO", por eso el chip suelto sigue escondido. */
@media(max-width:760px){.chip.am:not(.corta){display:none}.chip .w-lg{display:none}}

/* ---- agregados de implementacion (no venian en el handoff) ---- */
.ref-imp{font-size:var(--fs-sub);color:var(--tx2);line-height:1.55;margin-top:7px;padding:7px 9px;background:var(--panel);border-left:2px solid var(--dim)}
.ref-imp b{color:var(--ac)}.ref-imp.i-ok{border-left-color:var(--ok)}.ref-imp.i-warn{border-left-color:var(--warn)}.ref-imp.i-bad{border-left-color:var(--bad)}
/* .i-bad faltaba: un impacto provincial ADVERSO salia con el borde neutro, indistinguible de
   uno sin signo. Latente hasta que U6 publico `impacto_provincial` entero en /reformas/ — el
   cajon de la portada solo lo pinta con `foco_id`. Lo cazo lint_clases_css. [[L455]] */
/* panel de reformas agrupado (74 normas): banda de anclas + secciones colapsables por categoria + filtro */
/* B1 (2026-08-25) — la seccion de reformas pierde su marco exterior. Era la caja de MAS AFUERA de
   tres concentricas sobre el mismo parrafo: `.panel` > `.disc` (la glosa) > `.ref-ancla` (la banda
   de anclas). El usuario lo marco con su ejemplo literal —«Reformas pro-mercado»— y medido resulto
   peor de lo que decia: no eran dos cajas, eran tres. Se van las dos de afuera; la de adentro se
   queda, porque esa SI agrupa (`.ref-ancla` y las secciones por categoria).
   ⛔ El texto se queda COMPLETO — lo que se va es el marco (`IDENTIDAD §2 regla 7`).
   Alcance medido: 6 paginas (la portada y las 5 `provincia-inversor`), que son las dos que llaman
   a `tabla_reformas(agrupar=True)`. NO es R5 —las 1.698 cajas que solo enmarcan prosa—, que sigue
   siendo CRITERIO y se decide aparte.
   ⚠️ Conserva `overflow-x:auto` del `.panel` que reemplaza: adentro viven una grilla de 2 columnas
   y las secciones colapsables, y sin el un desborde se lleva puesto el scroll horizontal de la
   pagina entera. */
.ref-sec{margin-bottom:22px;overflow-x:auto}
.ref-sec+.sec-h{margin-top:10px}
.ref-ancla{margin:2px 0 16px;padding:13px 15px;border:1px solid rgba(var(--ac-rgb),.30);background:rgba(var(--ac-rgb),.05)}
.ref-ancla-l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:9px}
.ref-ancla-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
.ref-ancla-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bd-row);text-decoration:none}
.ref-ancla-n{font-size:var(--fs-body);color:var(--tx);font-weight:600;margin-right:auto;line-height:1.3}
.ref-ancla-row:hover .ref-ancla-n{color:var(--ac)}
/* la cifra de la fila de cartera (`mini_cartera()`, 2026-08-30). Es la UNICA regla nueva de ese
   cambio: la banda, la fila y el nombre son las de arriba, ya probadas en la banda de reformas
   destacadas. Va en `--mono` y con cifras tabulares para que los seis montos se lean en columna
   aunque la fila sea flex. */
.mc-usd{font-family:var(--mono);font-size:var(--fs-label);font-variant-numeric:tabular-nums;color:var(--mut);white-space:nowrap}
@media(max-width:640px){.ref-ancla-rows{grid-template-columns:1fr}}
.ref-cat{border-top:1px solid var(--bd)}
.ref-cat>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 2px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--tx);font-weight:700}
.ref-cat>summary::-webkit-details-marker{display:none}
.ref-cat>summary::before{content:"\25B8";font-size:11px;color:var(--ac);transition:transform .15s}
.ref-cat[open]>summary::before{transform:rotate(90deg)}
.ref-cat>summary:hover{color:var(--ac)}
/* ⚠️ ESTA PIEZA NO VA AL 50% DEL MOLDE, Y SE INTENTO — U16 · provincia inversor, 2a tanda (2026-08-15).
   El gemelo por funcion en el destino parece `.pyo-n` de molde.css (el mismo numerito en un
   circulo), asi que se probo `border-radius:50%`. **Resulto una ELIPSE**: `.pyo-n` es circulo
   porque tiene `width:26px;height:26px` — o sea que la forma no la da el 50%, la da la CAJA
   CUADRADA. Este contador es de ancho variable (dice «3» en una provincia y «19» en la portada),
   asi que no puede tener caja fija sin romperse con dos digitos.
   ⛔ Copiar el VALOR de un modelo sin copiar su CAJA no reproduce su forma ([[L881]]).
   El ESTADIO es la forma correcta acá, y desde el 16-ago se pide por su nombre: `var(--r-pill)`
   (tokens.css lo declara y explica por que el molde no lo cubre). Era `20px` escrito a mano — mismo
   dibujo, pero un valor suelto que no decia su intencion y que convivia con el `999px` de .hd-split. */
.ref-cat-n{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);background:var(--panel2);border:1px solid var(--bd2);border-radius:var(--r-pill);padding:1px 9px;font-weight:600}
.ref-cat-body{padding:0 0 8px 4px}
.ref-cat-body .rf:last-child{border-bottom:0}
/* pliegue "ver las N restantes" dentro de una categoria (2º nivel de colapso, 2026-07-16) */
.ref-mas{border-top:1px dashed var(--bd);margin-top:2px}
.ref-mas>summary{cursor:pointer;list-style:none;padding:9px 2px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ref-mas>summary::-webkit-details-marker{display:none}
.ref-mas>summary::before{content:"\25B8";font-size:10px;color:var(--mut);margin-right:8px;display:inline-block;transition:transform .15s}
.ref-mas[open]>summary::before{transform:rotate(90deg)}
.ref-mas>summary:hover{color:var(--ac)}
.ref-mas-body .rf:last-child{border-bottom:0}
.rf-kids{margin:2px 0 12px 21px;padding-left:16px;border-left:2px solid var(--bd2)}
.rf-kids-l{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:6px 0 0}
.rf-kids .rf-title{font-size:var(--fs-body)}.rf-kids .rf[open] .rf-title{font-size:16px}

/* ---- tarjetas-stat y redisenio de la pagina inversor (2026-06-11, pedido usuario) ---- */
/* espejo dark de las .mh de la capa gente: misma estructura, paleta Despegue dark */
.mh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:10px}
.mh-grid>*{min-width:0}
.mh{display:flex;flex-direction:column;gap:4px;min-width:0;background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--bd);padding:15px 16px;transition:.13s}
.mh:hover{border-color:rgba(var(--ac-rgb),.55)}
.mh-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--ac);overflow-wrap:break-word}
.mh-titulo{font-size:var(--fs-body-sm);font-weight:600;color:var(--tx);line-height:1.45}

.mh-det .mh-full{font-size:var(--fs-body-sm);color:var(--tx2);line-height:1.6;padding:6px 0 2px}
/* .mh.adv = tarjeta de ADVERTENCIA: ámbar semántico (no brand). La cifra base es celeste (--ac);
   acá se devuelve a dorado para que la tarjeta de alerta quede coherente */
.mh.adv{background:linear-gradient(180deg,var(--adv-bg1),var(--adv-bg2));border-color:var(--adv-bd)}
.mh.adv .mh-cifra{color:var(--warn)}

/* mapa de oportunidades como fichas de nicho (FILA LARGA: 1 por renglon, expansion a lo ancho) */
.op-cards{display:flex;flex-direction:column;gap:8px}
/* U16·B4 (2026-08-16) — el relleno se fue por la misma razon que en `.nm-card`: era un NO-OP.
   Medido en runtime, **102 de 102 instancias en las 10 paginas** pintaban `rgb(9,12,20)` sobre un
   `.panel` que ya es `rgb(9,12,20)`. El `:hover` SI se ve y se conserva. */
.op-card{position:relative;min-width:0;border:1px solid var(--bd);padding:13px 16px;transition:.13s;cursor:pointer}
.op-card:hover{border-color:rgba(var(--ac-rgb),.55);background:linear-gradient(180deg,var(--card-hover),var(--panel))}
.of-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.of-hl{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:2px}
.of-hr{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.of-hr-r{display:flex;align-items:center;gap:10px}
.oc-n{font-size:var(--fs-body-lg);font-weight:700;color:var(--tx);line-height:1.3;min-width:0;overflow-wrap:break-word}
.oc-cat{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.oc-tam{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ac);letter-spacing:-.01em;white-space:nowrap}
.oc-cuna{font-size:var(--fs-label);line-height:1.35;color:var(--mut);text-align:right;max-width:340px}
.oc-cuna-k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.oc-cuna-v{font-family:var(--mono);font-weight:600;color:var(--tx)}

/* fichas de cartera (proyecto RIGI expandible, FILA LARGA: 1 por renglon) + link motor<->entrada */
.ff-grid{display:flex;flex-direction:column;gap:8px}
.ff{min-width:0;background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--bd);padding:13px 16px;transition:.13s}
.ff:hover{border-color:rgba(var(--ac-rgb),.55)}
.ff-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.ff-name{flex:1 1 220px;font-size:var(--fs-body-lg);font-weight:700;color:var(--tx);line-height:1.3;min-width:0;overflow-wrap:break-word}

.ff-usd{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ac);white-space:nowrap}
.ff-um{font-size:.62em;color:var(--mut)}
/* caveat de la cifra (cola de `unidad`: computable RIGI vs total, plazos): sub-linea full-width
   alineada a la derecha, bajo el numero — el numero "pelado" hacia parecer errada una cifra que
   es mas rigurosa que el titular de prensa */
.ff-uni{grid-column:1/-1;display:block;font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;color:var(--mut);text-align:right;line-height:1.4;white-space:normal}
@media(max-width:720px){.ff-uni{flex:1 1 100%;text-align:left}}
/* ---- variante TABLA de la cartera (.ff-tab): fichas con columnas que cuadran fila a fila,
   sin perder el desplegable. Columnas FIJAS (no content-based) para que cada ficha — que es su
   propio grid — calcule el mismo ancho y alinee con el encabezado (2026-06-21, pedido usuario). ---- */
.ff-tab{gap:6px}
/* Proyecto y Sector con fr (fluido): como todas las fichas son del mismo ancho, el fr resuelve
   igual fila a fila y las columnas cuadran. Estado y USD fijos. Reparto: el nombre manda, pero
   Sector deja de apretarse a 3 lineas (2026-06-21, redistribucion pedida por usuario). */
.ff-tabhead,.ff-tab .ff-head{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 196px 108px;column-gap:20px}
.ff-tabhead{padding:0 16px 8px;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--bd);margin-bottom:2px}
.ff-tabhead .r{text-align:right}
.ff-tab .ff-head{align-items:baseline;row-gap:3px}
/* nombre de proyecto un punto mas grande que el body (pedido usuario): es el dato que se escanea */
.ff-tab .ff-name{flex:none;align-self:baseline;font-size:15px}
.ff-tab .ff-c{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;min-width:0;font-family:var(--mono);font-size:var(--fs-sub);color:var(--mut);line-height:1.4}
.ff-tab .ff-usd{margin-left:0;justify-self:end;text-align:right}
/* ⚠️ 720 -> 1000 (2026-08-13) -> **1024** (2026-08-18, marca del usuario). El corte original
   estaba puesto 280 px ANTES de que la tabla tuviera lugar: entre 720 y 1000 la columna SECTOR
   quedaba en ~118 px y partia «Mineria - Cobre (con oro y plata)» en 4 lineas, con aire sobrando
   a la derecha. Es la misma queja que el usuario ya habia hecho el 2026-06-21 («Sector deja de
   apretarse a 3 lineas»): aquella redistribucion arreglo el desktop y dejo la banda del medio.
   La cuenta: ESTADO(196) + USD(108) + 3 gaps(60) = 364 px fijos.

   ⛔ EL COMENTARIO ANTERIOR AFIRMABA «1024 -> 2 lineas» Y ESO NO REPRODUCE. Re-medido el
   2026-08-18 contando los RECTANGULOS DE LINEA de `.ff-tab .ff-c-sec` ([[L839]]: nunca
   alto/lineHeight, que mide la caja), sobre las paginas inversor de Neuquen (9 filas) y Salta (5):

     ancho     | forma   | lineas de SECTOR (peor celda)  NQN / SALTA
     ----------+---------+--------------------------------------------
      1440     | tabla   | 2 / 2
      1200     | tabla   | 2 / 2
      1120     | tabla   | 2 / -     <- ACA cuadra de verdad (<=2 lineas)
      1035..80 | tabla   | 3 / -
      1025..34 | tabla   | **4** / -
      1024     | tabla   | **4** / **3**   <- el punto MAS apretado, ANTES del cambio
      1001     | tabla   | 4 / 3
      <=1000   | apilada | 1 / 1

   O sea: la franja 1001-1024 era la PEOR de todo el rango, y «la tabla cuadra desde 1024» era
   falso. Subir el corte a 1024 **saca esa franja del modo tabla** (pasa a la ficha apilada, 1 linea)
   y es una mejora real — pero NO un cierre, y hay que decirlo:
     · queda una franja de ~10 px (1025-1034) todavia en 4 lineas;
     · de 1035 a ~1119 quedan 3;
     · el umbral donde la tabla cuadra de verdad es **~1120**, no 1024.
   Subir el corte hasta 1120 es una decision del usuario (mueve 5 paginas publicadas x2 idiomas a
   ficha apilada en una banda de 120 px mas), no una correccion de plomeria: queda declarado.
   Radio: las 5 paginas `provincia-*-inversor` (ES) y sus gemelas `/en/`. */
@media(max-width:1024px){
  .ff-tabhead{display:none}
  .ff-tab .ff-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px}
  .ff-tab .ff-name{flex:1 1 100%}
  .ff-tab .ff-usd{margin-left:auto}
}
.ff-det>summary,.mh-det>summary,.tes-det>summary,.score-det>summary,.score-go{cursor:pointer;display:inline-flex;align-items:center;gap:6px;width:fit-content;list-style:none;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.01em;color:var(--ac);margin-top:8px;border:1px solid var(--bd2);border-radius:var(--r-8);padding:4px 11px;transition:.13s}
.ff-det>summary::-webkit-details-marker,.mh-det>summary::-webkit-details-marker,.tes-det>summary::-webkit-details-marker,.score-det>summary::-webkit-details-marker{display:none}
.ff-det>summary::before,.mh-det>summary::before,.tes-det>summary::before,.score-det>summary::before,.score-go::before{content:"\25B8";font-size:10.5px;line-height:1;transition:transform .15s}
.ff-det[open]>summary::before,.mh-det[open]>summary::before,.tes-det[open]>summary::before,.score-det[open]>summary::before{transform:rotate(90deg)}
.ff-det>summary:hover,.mh-det>summary:hover,.tes-det>summary:hover,.score-det>summary:hover,.score-go:hover{background:rgba(var(--ac-rgb),.1);border-color:var(--ac)}
/* hover en TODA la card de empresa ilumina su botón "Ver ficha" (affordance dinámica, gemela de
   .op-card:hover .oc-go): si algo es tocable, pasar el mouse por la card lo confirma. */
.ff:hover .ff-det>summary{background:rgba(var(--ac-rgb),.1);border-color:var(--ac)}
/* hover en TODA la card ilumina su botón de abrir, en todas las cards con desplegable (consistencia con
   .ff y .score): mini-indicador (.mh, "el dato completo") y tarjeta de tesis (.tes). OJO: el botón
   .tes-det es HERMANO de .tes-punch (ambos hijos de .tes), no su descendiente -> el hover va en .tes,
   no en .tes-punch (si no, la regla nunca matchea y solo ilumina al pasar justo por el botón). */
.mh:hover .mh-det>summary,.tes:hover .tes-det>summary{background:rgba(var(--ac-rgb),.1);border-color:var(--ac)}
.ff-det[open]>summary,.mh-det[open]>summary,.tes-det[open]>summary,.score-det[open]>summary{background:rgba(var(--ac-rgb),.07);border-color:rgba(var(--ac-rgb),.4)}
/* U1 (2026-08-20) · el rotulo de los 18 cajones del Tablero pasó de una ORDEN corta ("ver el detalle")
   a un rotulo DESCRIPTIVO ("el dato, su fuente y la lectura"). En la grilla de 2 columnas del telefono
   la tarjeta mide ~178px: cualquier rotulo asi ocupa varias lineas — es estructural, no del texto.
   El grupo de arriba centra el triangulito con `align-items:center`, que contra un bloque de 3 lineas
   lo deja flotando al medio. Se alinea a la PRIMERA linea. Medido con captura a 390, no leyendo CSS. */
.score-det>summary{align-items:flex-start}
.score-det>summary::before{margin-top:4px}
.ff-full{padding:7px 0 2px;display:flex;flex-direction:column;gap:8px}
.ff-desc{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx2)}
.ff-row{font-size:var(--fs-sub);line-height:1.5;color:var(--tx2)}
.ff-k{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
/* D2 (2026-08-26) — el RESUMEN de servicios satelite en la cartera de provincia.
   El desarrollo (los 3-8 servicios con su razonamiento) vive en la ficha del proyecto, que es su
   duena: se publicaba palabra por palabra en las dos y eran 6.848 palabras. Aca queda el conteo,
   el sello y la puerta. */
.ff-sat-res{display:block;color:var(--tx2)}
.ff-sat-res b{color:var(--tx);font-weight:700}
.ff-sat-mas{white-space:nowrap;color:var(--ac);text-decoration:none;border-bottom:1px solid transparent}
.ff-sat-mas:hover{border-bottom-color:currentColor}
/* `uni` — la UNIDAD pegada a una cifra, INLINE (t/año, oz/año, MW, t/día). U1, 2026-08-14.
   POR QUE EXISTE: estas instancias se estilaban prestandose `hm-k`, que es la etiqueta de la columna
   izquierda de `hm-row` y cuya UNICA regla vive en `nicho.css`. La ficha de cartera de la pagina de
   provincia NO enlaza esa hoja, asi que sus 4 unidades (×2 idiomas = 8, provincia PUBLICADA) salian
   en sans 13,5px w400 gris — texto de cuerpo. Es la clase de defecto de [[L845]] y se
   cura igual: la regla va donde la enlazan TODAS las paginas que la emiten. Por eso vive en LAS DOS
   PIELES (aca y en despegue-gente.css), no en nicho.css.
   ⚠️ SIN `text-transform:uppercase`, a diferencia de `hm-k`: la notacion de unidad tiene caja
   canonica y «t/año» no es «T/AÑO». Y en `--dim`, no en acento: el protagonista es el numero. */

/* "Demanda que arrastra" AGRUPADA por familia (Opción A) + INTENSIDAD por fila (Opción C) — Demanda
   Ideas / Claude Design. Cada familia = label coloreado (--fc, inline por cluster) + borde + conteo;
   dentro, cada vertical en su fila con 3 puntos = tier de TAM. Se escanea por familia (color) y por peso. */
.dm-leg{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;margin:5px 0 9px;font-family:var(--mono);font-size:var(--fs-label);color:var(--dim)}
.dm-leg>span{display:inline-flex;align-items:center;gap:4px}
/* ⛔ Usaba `--dim3` (#46556e) y daba **2,59** de contraste sobre su panel: por debajo de 3, que es
   donde ya no hay lectura defendible. `--dim3` es un peldano de la escalera de grises pensado para
   trazos y bordes, no para texto que alguien tiene que leer. Medido el 2026-09-06 sobre
   `/provincia-neuquen-inversor`, donde son 9 nodos. */
.dm-leg-n{color:var(--dim);font-style:italic}
.dm-leg .dm-d.on{background:var(--ac)}
.dm-fams{display:flex;flex-direction:column;gap:13px;margin-top:2px}
.dm-fam{--fc:var(--ac);border-left:2px solid color-mix(in srgb,var(--fc) 45%,transparent);padding-left:12px}
.dm-fam-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.dm-fam-l{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fc)}
.dm-fam-n{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim)}
.dm-row{display:flex;align-items:center;gap:11px;padding:4px 6px;border-radius:var(--r-8);text-decoration:none;transition:.12s}
.dm-row:hover{background:color-mix(in srgb,var(--fc) 9%,transparent)}
.dm-int{display:inline-flex;gap:2px;flex:0 0 auto}
.dm-d{width:5px;height:5px;border-radius:50%;background:#2a3242}
.dm-d.on{background:var(--fc,var(--ac))}
.dm-nm{font-size:var(--fs-sub);line-height:1.35;color:var(--tx2)}
.dm-row:hover .dm-nm{color:var(--tx)}
/* 'El boom sobre el terreno' — panel de LOCALIDADES (panel_localidades, §🔬·1 2026-07-21).
   El render decia "cada localidad = card" y emitia .loc-grid/.loc-card/.loc-nm/.loc-ind/.loc-nota
   SIN UNA SOLA REGLA: salia como una lista plana de parrafos, con el toponimo indistinguible del
   cuerpo, en Neuquen y Rio Negro (las dos publicadas que cargan `localidades`). Mismo modo de fallo
   que .sat-* el 31-jul ([[L455]]), y lo cazo la auditoria previa al candado de clases sin regla
   (UNIDAD 2, 2026-08-01) — ningun lint lo veia. Idioma visual de .op-card, sin inventar nada. */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:start}
.loc-card{min-width:0;background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--bd);padding:12px 15px 13px}
.loc-nm{font-size:var(--fs-sub);font-weight:600;color:var(--tx);letter-spacing:-.01em;margin-bottom:7px}
.loc-ind{font-size:var(--fs-sub);line-height:1.55;color:var(--tx2);margin-bottom:5px}
.loc-nota{margin-top:9px;padding-top:8px;border-top:1px dashed var(--bd2);font-size:var(--fs-sub);line-height:1.5;color:var(--mut);font-style:italic}
/* servicios satelite en la ficha de proyecto (MAGA-SAT-RENDER 2026-07-31): lo que el proyecto va a
   pedir y todavia no tiene oferente. Es HIPOTESIS (schema), asi que se lee distinto de las filas de
   dato: borde punteado en vez de solido, y la fuerza de cada item a la vista. */
.sat-wrap{margin-top:2px}
.sat-nota{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);font-style:italic;margin-bottom:10px}
.sat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.sat-i{list-style:none;border-left:2px dashed var(--bd2);padding-left:12px}
.sat-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.sat-serv{font-size:var(--fs-sub);line-height:1.35;font-weight:600;color:var(--tx)}
.sat-cf{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--bd2);border-radius:var(--r-4);padding:1px 5px;flex:0 0 auto;white-space:nowrap}
/* Los TRES niveles de confianza_hipotesis tienen que leerse distintos entre si (2026-08-01).
   Antes solo existia .sat-cf-alta: `media` y `especulativa` caian al base y quedaban IDENTICAS,
   o sea que el chip prometia una escala de 3 y mostraba 2. Escalonan por color + peso de borde. */
.sat-cf-alta{color:var(--ac);border-color:rgba(var(--ac-rgb),.45)}
.sat-cf-media{color:var(--mut);border-color:var(--bd2)}

.sat-razon{margin:0 0 5px;font-size:var(--fs-sub);line-height:1.5;color:var(--tx2)}
.sat-prov{font-family:var(--mono);font-size:var(--fs-label);line-height:1.4;color:var(--cy)}
.sat-prov-k{color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

.cf-bridge{margin:0 0 14px;font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut);border-bottom:1px dashed var(--bd2);padding-bottom:12px}
.cf-bridge b{color:var(--ac)}
/* ficha de nicho (oportunidad): tipo de proveedor + expansion con mapa competitivo */

/* ---- vista de oportunidades por categoria + arco temporal (fase) ---- */
.op-vista{display:flex;flex-direction:column;gap:2px}
.op-fam-h{display:flex;align-items:center;gap:12px;margin:18px 0 2px}
.op-fam-l{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.op-fam-r{flex:1;height:1px;background:linear-gradient(90deg,var(--bd2),transparent)}
.op-cat{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--bd)}
.op-cat-rail{border-left:2px solid var(--cc);padding-left:14px;align-self:start}
.op-cat-n{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:750;color:var(--tx);line-height:1.2}
.op-cat-chip{width:10px;height:10px;border-radius:var(--r-4);background:var(--cc);box-shadow:0 0 8px -1px var(--cc);flex:0 0 auto}
.op-cat-d{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.03em;color:var(--dim);margin:7px 0 9px;line-height:1.5}
.op-cat-agg{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut)}
.op-cat-agg b{color:var(--cc)}
.op-cat-cards{min-width:0}

.op-fase{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.02em;color:var(--mut);margin-top:7px;line-height:1.3}

.op-fase::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.op-fase.urgente::before{background:var(--urg);box-shadow:0 0 6px rgba(var(--pro-rgb),.55)}
.op-fase.emergente::before{background:var(--cy);box-shadow:0 0 6px rgba(var(--cy-rgb),.55)}
.op-fase.sostenida::before{background:var(--ac);box-shadow:0 0 6px rgba(var(--ac-rgb),.55)}
/* señal competitiva de la card (1ra clausula de `concentracion`): moat vs campo abierto de un
   vistazo entre los 21 nichos, sin abrir cada pagina */
.op-comp{margin-top:6px;font-size:var(--fs-sub);line-height:1.45;color:var(--mut)}
.op-comp-k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-right:4px}
@media(max-width:720px){.op-cat{grid-template-columns:1fr;gap:10px}.op-cat-rail{border-left:0;border-top:2px solid var(--cc);padding-left:0;padding-top:10px}}
/* .pp-puente (U1 sesion 2, 2026-08-25) — el PUENTE que la cara inversor deja donde vivian los
   nichos y las empresas. Es un LINK de bloque, no un panel: tiene que leerse como puerta a otra
   pagina y no como un resumen que se puede saltear. Reusa los tokens del molde (--ac ambar del
   perfil pro, --panel, --bd) para no inventar una piel nueva por una pieza. */
.pp-puente{display:block;margin:26px 0;padding:20px 22px;border:1px solid var(--bd);
  border-left:3px solid var(--ac);background:var(--panel);text-decoration:none;color:inherit;
  transition:border-color .15s ease,background .15s ease}
.pp-puente:hover{border-color:var(--ac);background:rgba(var(--ac-rgb),.04)}
.ppu-k{display:block;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ac);margin-bottom:7px}
.ppu-t{display:block;font-size:var(--fs-h3);font-weight:600;line-height:1.3;color:var(--tx);
  margin-bottom:11px}
.ppu-d{display:flex;flex-wrap:wrap;gap:7px 18px;margin-bottom:11px}
.ppu-n{font-family:var(--mono);font-size:var(--fs-body-sm);color:var(--tx2)}
.ppu-n b{color:var(--tx);font-weight:600}
.ppu-go{display:block;font-size:var(--fs-body-sm);color:var(--ac)}
@media(max-width:560px){.pp-puente{padding:16px 15px}.ppu-d{gap:5px 13px}}
/* lead confiado de la seccion */
.op-lead{font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx);margin:0 0 16px;max-width:66ch}
/* perimetro del menu de nichos (F8c 2026-07-29): que cubre lo cuantificado y que quedo identificado
   sin TAM. Va debajo del lead y antes de la matriz — acota el mapa ANTES de que se lea como completo. */
.op-perim{font-size:var(--fs-body-sm);line-height:1.6;color:var(--tx2);margin:0 0 16px;padding:11px 14px;
  max-width:74ch;border:1px dashed var(--bd2);border-left:2px solid var(--ac);background:rgba(255,255,255,.015)}
.op-perim a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.4)}
.op-perim a:hover{border-bottom-color:var(--ac)}
/* ⭐ `.op-perim-d` (2026-09-02) — el perimetro del menu de nichos, plegado. El bloque mide de
   1.9k a 4.8k caracteres segun la provincia y estaba ENTERO entre el lead y el primer nicho: en
   telefono, hasta 5 pantallas de peaje. Reusa `.sec-fold` (mismo triangulo, mismo afford que el
   resto del sitio); lo unico propio es el rotulo, que va en mono para leerse como control. */
.op-perim-d{margin:0 0 16px}
.op-perim-d>summary{padding:9px 12px;border:1px dashed var(--bd);background:var(--panel)}
.op-perim-d[open]>summary{border-bottom-style:solid;margin-bottom:0}
.op-perim-d[open] .op-perim{margin-top:0;border-top:0}
.op-perim-sum{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim)}
.op-perim-d>summary:hover .op-perim-sum{color:var(--ac)}
/* matriz categoria x arco */
.op-mx-wrap{overflow-x:auto;margin:2px 0 20px;padding-bottom:2px}
/* `--ncol` lo emite el render con las columnas que REALMENTE tienen nichos: una columna entera
   vacía (0 nichos) ya no se dibuja, así que la grilla no puede tenerlas fijas en 3. */
.op-mx{display:grid;grid-template-columns:182px repeat(var(--ncol,3),1fr);gap:9px}
.op-mx-ch{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:10px 13px;border:1px solid var(--bd);border-top:2px solid var(--fc);background:var(--panel)}
.op-mx-ch b{font-family:var(--mono);font-size:var(--fs-sub);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--fc)}
.op-mx-sub{flex-basis:100%;font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);letter-spacing:.02em}
.op-mx-cnt{position:absolute;top:9px;right:12px;font-family:var(--mono);font-size:var(--fs-body);font-weight:600;color:var(--fc)}
.op-mx-rh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;align-content:center;padding:10px 12px;border-left:2px solid var(--cc)}
.op-mx-rn{font-weight:700;font-size:var(--fs-body-sm);line-height:1.18;color:var(--tx)}
.op-mx-fam{flex-basis:100%;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.op-mx-note{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);margin-top:8px}
/* affordance de scroll de la matriz: solo cuando scrollea (movil) */
.op-mx-swipe{display:none;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 7px;text-align:right}
/* mencion de nicho en prosa de senales (humanizar_ops): link discreto al ancla de su tarjeta */

.op-mx-cell{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--bd);background:var(--panel2);min-height:54px}
.op-mx-cell.empty{background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 7px,var(--panel) 7px,var(--panel) 14px);border-style:dashed}
.op-mx-chip{display:flex;flex-direction:column;gap:2px;text-decoration:none;border-left:2px solid var(--cc);background:var(--panel);border-radius:var(--r-8);padding:7px 9px;transition:.12s}
.op-mx-chip:hover{background:var(--card-hover);transform:translateX(2px)}
.op-mx-ct{font-size:var(--fs-micro);font-weight:600;line-height:1.25;color:var(--tx)}
.op-mx-cm{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;color:var(--ac)}
/* filtros */
.op-filt{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:0 0 14px;padding-bottom:14px;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)}
/* ⭐ EN EL TELEFONO LAS OCHO CATEGORIAS DEJAN DE SER BOTONES Y PASAN A SER EL REPARTO (2026-09-12).
   Solo `.op-filt-tira`, que es la de la PORTADA.
   El motivo no es el alto, es que ahi los ocho llevan TODOS al mismo destino: tocar «Laboral» y
   tocar «RIGI e inversion» hacen exactamente lo mismo. O sea que la caja de boton promete un
   filtro que no existe —el filtro de verdad esta en el hub, y su puerta es el boton de abajo.
   ⇒ se les saca la caja y quedan los ocho nombres con su numero, que es la informacion real:
   como se reparten las 216 normas. A 390 px, de 344 px a ~130, sin perder un solo nombre.
   ⛔ NO se aplica a las barras de filtro de los hubs: ahi cada chip SI filtra la lista de abajo. */
@media(max-width:560px){
  .op-filt-tira{display:block;padding-bottom:11px}
  .op-filt-tira .op-filt-grp{display:block}
  .op-filt-tira .op-filt-l{display:block;margin-bottom:4px}
  .op-filt-tira .op-chip{display:inline;border:0;background:none;padding:0;border-radius:0;
    line-height:1.95;color:var(--mut);text-decoration:none}
  /* ⚠️ El separador va por codigo de caracter y con el espacio que lo TERMINA (trampa 13):
     un `\00B7` escrito a mano en el archivo se guarda mal segun con que se edite. */
  .op-filt-tira .op-chip+.op-chip::before{content:"\00B7 ";margin:0 7px;color:var(--dim)}
  .op-filt-tira .op-chip-n{font-weight:700;color:var(--tx);margin-left:5px}
}
/* radio 9 y no 7: el gemelo por FUNCION es `.opt` de cierre.css — el chip seleccionable del
   formulario, que el destino ya emite con 9. El 7 no estaba en la escala del molde
   (4·5·6·8·9·10·12·14·18·50) y era el unico valor huerfano con peso. */
.op-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-micro);padding:6px 12px;border-radius:var(--r-8);border:1px solid var(--bd2);background:var(--panel);color:var(--mut);cursor:pointer;transition:.12s}
.op-chip:hover{color:var(--tx);border-color:var(--dim)}
.op-chip.on{color:var(--ink);background:var(--ac);border-color:var(--ac);font-weight:600}
.op-chip-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
/* ⭐ AREA TACTIL DE 44 px EN EL TELEFONO (2026-09-07). Medido a 390 px sobre el hub de
   proyectos: los 20 chips de filtro miden 31 px de alto y el dedo pide 44.
   ⛔ SE HACE CON PADDING, no con un pseudo-elemento invisible: se probó primero un `::after` de
   44 px desbordando el chip y NO recibe el toque —medido dos veces, el punto a 5 px del borde
   sigue sin activar el filtro—, porque el hit-test de un `<button>` se queda en su propia caja.
   Un área que la medición dice que no existe es peor que no tenerla: parece arreglado y no lo está.
   ⚠️ Sólo en pantalla chica y táctil: con ratón, 31 px ya se aciertan. Cuesta 13 px por cada
   renglón de chips (los tres grupos ocupan 6 renglones a 390 px). */
@media(max-width:640px) and (pointer:coarse){
 .op-chip{padding-top:12.5px;padding-bottom:12.5px}
}
/* ===== LA MATRIZ EN EL TELÉFONO NO ES UNA MATRIZ (2026-09-16, pasada visual del molde provincia).
   Hasta hoy conservaba la composición horizontal y había que arrastrarla de costado: el riel de
   categoría se quedaba con más de la mitad del ancho, a la tarjeta le sobraban ~250 px y un título
   se partía en ocho renglones. Abajo de 720 px la grilla se deshace y queda una lista: la categoría
   es el encabezado y debajo van sus nichos. El eje que se pierde —urgente / sostenida / emergente—
   viaja DENTRO de cada celda en `data-fase`, con el color de su columna, así que no se pierde dato.
   Las celdas vacías no se dibujan: en la lista no separan nada, sólo suman huecos. */
@media(max-width:720px){
 .op-mx-wrap{overflow-x:visible}
 .op-mx{display:block;min-width:0;gap:0}
 .op-mx-corner,.op-mx-ch,.op-mx-swipe{display:none}
 .op-mx-rh{padding:14px 0 6px;border-left:0;border-bottom:1px solid var(--bd)}
 .op-mx-cell{border:0;background:none;padding:10px 0 0;min-height:0}
 .op-mx-cell.empty{display:none}
 .op-mx-cell[data-fase]::before{content:attr(data-fase);display:block;margin-bottom:5px;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--fc)}
 .op-mx-chip{border:1px solid var(--bd);border-left:2px solid var(--cc)}
 .of-head{flex-direction:column;align-items:flex-start;gap:7px}
 .of-hl{flex:0 0 auto;width:100%}
 .of-hr{width:100%;align-items:flex-start;flex-shrink:1}
 .of-hr-r{width:100%;justify-content:space-between}
 .oc-tam{white-space:normal}
 .oc-cuna{text-align:left;max-width:none}
 .cap-hint{padding-left:0}
}
/* ===== fase color helpers ===== */
/* V29: el ARCO de demanda no comparte tinta con los SELLOS de confianza. #FF8A8A es `.se-c.sin`
   ('sin confirmar'), y la leyenda lo ensena como falta de respaldo dos bloques mas arriba: el chip
   'DEMANDA URGENTE' se leia como dato flojo. El arco es otra dimension y lleva su propio ambar. */
.fz-urgente{--fc:var(--urg)}.fz-sostenida{--fc:var(--ac)}.fz-emergente{--fc:var(--cy)}
/* ===== cara compacta: footer + boton 'ver el nicho' ===== */
.of-cardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
/* radio 9: gemelo por FUNCION `.fsrc-cta` de cierre.css («cerrar el catalogo»), el boton-link que
   el destino emite con 9. Mismo caso huerfano que `.op-chip`. */
.oc-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.03em;color:var(--cy);text-decoration:none;border:1px solid rgba(var(--cy-rgb),.34);background:rgba(var(--cy-rgb),.06);border-radius:var(--r-8);padding:6px 13px;transition:.13s;white-space:nowrap}
.oc-go:hover{background:rgba(var(--cy-rgb),.14);border-color:var(--cy)}
.oc-go span{font-size:var(--fs-body)}
/* stretched-link: toda la cara abre el modal; el boton se sigue resaltando como guia visual.
   El ::after se ancla en .op-card (relative) porque .oc-go es static. */
.op-card .oc-go::after{content:"";position:absolute;inset:0;z-index:1}
.op-card:hover .oc-go{background:rgba(var(--cy-rgb),.14);border-color:var(--cy)}
/* el ↗ de fuente debe seguir clickeable por encima del overlay */
.op-card .src{position:relative;z-index:2}
/* ===== modal epico del nicho (:target, CSS-only) ===== */
/* al abrir un modal, congelar el scroll del fondo (CSS-only via :has, baseline 2023) para que el
   gesto de scroll mueva SIEMPRE la tarjeta y no el fondo difuminado, este el cursor donde este. */

@keyframes opmf{from{opacity:0}to{opacity:1}}

/* ===== contenido rico (KPIs, mapa competitivo, hueco) ===== */

/* ---- las 4 preguntas de control (METODOLOGIA §7): embudo + killers + cara B ---- */

.of-k{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-bottom:4px}

/* ===== Empresas del ecosistema (I9): FILA densa clickeable -> ficha (rediseño Empresas Ecosistema +
   Ficha Empresa, Claude Design via DesignSync 2026-06-25). Misma lengua visual que el catálogo de
   reformas: fila colapsada escaneable -> ficha rica (stat-strip + definition-list + 'enchufa a'). ===== */
.emp-grp{display:flex;align-items:baseline;gap:11px;margin:26px 0 2px}
.emp-grp:first-of-type{margin-top:4px}
.eg-t{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ac)}
.eg-s{font-size:var(--fs-micro);color:var(--mut);flex:1;min-width:0}
.eg-n{font-family:var(--mono);font-size:var(--fs-label);color:var(--mut)}
.emp-list{display:flex;flex-direction:column}
.emp{border-top:1px solid var(--bd-row)}.emp:last-child{border-bottom:1px solid var(--bd-row)}
/* las tarjetas que reciben un ancla (#proy-/#emp-) dejan aire arriba para no quedar tapadas por el
   header sticky (54px, tokens.css) al saltar; el JS de anclas afina el scroll con la altura real del header. */
.ff,.emp{scroll-margin-top:66px}
.emp>summary{cursor:pointer;list-style:none}.emp>summary::-webkit-details-marker{display:none}
.emp-row{display:grid;grid-template-columns:26px minmax(0,1fr) 186px 132px 18px;align-items:center;column-gap:18px;padding:14px 6px}
.emp-row.emp-srv{grid-template-columns:minmax(0,1fr) 186px 132px 18px}
.emp-row:hover{background:rgba(var(--ac-rgb),.05)}
.emp-rank{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);text-align:center}
.emp-nm{min-width:0}
.emp-nm-t{font-size:15.5px;font-weight:600;color:var(--tx);letter-spacing:-.01em;line-height:1.25}
.emp>summary:hover .emp-nm-t{color:var(--ac)}
.emp-nm-d{font-size:var(--fs-micro);color:var(--mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* sin ellipsis: el ticker corto ("YPF (NYSE, ADR)") se truncaba feo incluso en desktop
   (hallazgo 2026-07-03) — wrapea a 2 lineas y se lee entero */
.emp-tk{font-family:var(--mono);font-size:var(--fs-tag);color:var(--dim);text-align:right;line-height:1.4;min-width:0}
.emp-noq{color:var(--dim)}   /* #586272 daba 3,17 de contraste, por debajo del 4,5 exigido */
/* T123 (2026-09-02) — la columna «Capital» del hub de empresas. NO es estetica: el auditor externo
   la marco como hallazgo de PRODUCTO. Los tres estados dicen QUE HABILITAN, con el rotulo en
   versalita y su glosa debajo, y el que cotiza publica su ticker (el puntero a la evidencia). */
.emp-cap{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:var(--fs-tag);
  letter-spacing:.05em;font-weight:700;line-height:1.3}
.emp-cap.ok{color:var(--ok)}
.emp-cap.mz{color:var(--ac)}
.emp-cap.pv{color:var(--dim)}
.emp-cap-t{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);margin-top:3px;line-height:1.35}
/* la leyenda, UNA vez debajo de la tabla: la glosa se repetia en las 28 filas y eso rompe la
   regla 8 de IDENTIDAD.md (cada dato se cuenta una vez por pagina). */
/* ⚠️ `--fs-body` y no `--fs-micro`: son 296 caracteres de texto CORRIDO, o sea prosa de lectura,
   y `lint_cuerpo_prosa` bloqueo con razon a 13 px. La cura que el propio control indica para un
   pie o una leyenda es su token de rol, no bajar el piso. */
.emp-cap-ley{margin:14px 0 0;font-size:var(--fs-body);color:var(--mut);line-height:1.65;
  border-top:1px solid var(--bd-row);padding-top:12px}
.emp-cap-ley .emp-cap{margin-right:2px}
.emp-metr{min-width:0}
.emp-metr-top{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-bottom:5px}
.emp-pct{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--tx)}
.emp-pct-u{font-family:var(--mono);font-size:var(--fs-tag);color:var(--mut)}
.emp-bar{height:4px;background:var(--bd);border-radius:var(--r-4);overflow:hidden}
.emp-bar-f{height:100%;background:rgba(var(--ac-rgb),.5);border-radius:var(--r-4)}
.emp-bar-f.lead{background:var(--ac)}
.emp-tag{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.04em;text-transform:uppercase;color:var(--mut);border:1px solid var(--bd2);border-radius:var(--r-4);padding:3px 9px;justify-self:end;white-space:nowrap}
.emp-chev{font-family:var(--mono);font-size:15px;color:var(--dim3);text-align:center;transition:transform .15s}
.emp[open] .emp-chev{transform:rotate(90deg)}
.emp[open] .emp-row{background:rgba(var(--ac-rgb),.04)}
/* ---- ficha (cuerpo expandible) ---- */
.emp-ficha{padding:2px 6px 22px}
.emp-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);overflow:hidden;margin:10px 0 16px}
.emp-kpi{background:var(--panel);padding:14px 16px}
.emp-kpi-l{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.emp-kpi-v{font-size:24px;font-weight:700;color:var(--tx-hi);letter-spacing:-.01em;display:flex;align-items:baseline;gap:6px}
.emp-kpi-u{font-family:var(--mono);font-size:var(--fs-tag);font-weight:400;color:var(--mut)}
.emp-kpi-s{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);margin-top:5px}
/* radio 4 y no 3: 4 es el radio dominante del molde (99 de sus 167 instancias con radio) y el 3 no
   estaba en su escala. Es la diferencia mas chica de la tanda —1 px— pero es 18 instancias del
   valor huerfano con mas peso despues de los chips. */
.emp-kpi-ctx{display:inline-block;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);background:rgba(var(--tes-rgb),.12);border-radius:var(--r-4);padding:1px 6px;margin-right:3px;white-space:nowrap;vertical-align:1px}
.emp-dl{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--bd)}
.emp-dl-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.emp-dl-c{min-width:0;max-width:680px}
.emp-dl-v{font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx2)}.emp-dl-v b{color:var(--tx)}
.emp-dl-m{margin-top:8px}

.emp-dl-rel{align-items:start}
.emp-rel{display:flex;flex-wrap:wrap;gap:9px}
.emp-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ac);background:rgba(var(--ac-rgb),.08);border:1px solid rgba(var(--ac-rgb),.3);border-radius:var(--r-8);padding:7px 13px;text-decoration:none;transition:.12s}
.emp-link:hover{background:rgba(var(--ac-rgb),.16);border-color:var(--ac)}
.emp-link span{color:var(--ac)}
.emp-foot{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);line-height:1.5}
.emp-foot-bar{display:inline-block;width:22px;height:4px;background:var(--ac);border-radius:var(--r-4);flex:0 0 auto}
@media(max-width:680px){
  .emp-row,.emp-row.emp-srv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:13px 4px}
  .emp-rank,.emp-chev{display:none}
  .emp-nm{flex:1 1 100%}
  .emp-tk{flex:1 1 auto;text-align:left}
  .emp-metr{flex:0 0 auto;margin-left:auto;min-width:118px}
  .emp-tag{margin-left:auto}
  .emp-strip{grid-template-columns:1fr}
  .emp-dl{grid-template-columns:1fr;gap:4px 0}
  .emp-dl-k{padding-top:0}
}

/* mapa-datos.html (pagina interna de procedencia: de donde sale cada variable y cuando cambia) */
.via{display:inline-flex;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;padding:2px 7px;border-radius:var(--r-4);border:1px solid var(--bd2);color:var(--mut);white-space:nowrap}
.via.auto{color:var(--ok);border-color:rgba(var(--ver-rgb),.4);background:rgba(var(--ver-rgb),.06)}
.via.semi{color:var(--cy);border-color:rgba(var(--cy-rgb),.4);background:rgba(var(--cy-rgb),.06)}
.via.cal{color:var(--warn);border-color:rgba(var(--pro-rgb),.4);background:rgba(var(--pro-rgb),.06)}
.via.evento{color:var(--mut)}
.via.deriv{color:var(--est);border-color:rgba(var(--est-rgb),.4);background:rgba(var(--est-rgb),.06)}
.md-cmd{font-family:var(--mono);font-size:var(--fs-label);color:var(--cy)}
.md-intro{background:linear-gradient(180deg,var(--adv-bg1),var(--adv-bg2));border:1px solid var(--adv-bd);padding:13px 16px;font-size:var(--fs-body);color:var(--tx);line-height:1.7;margin:14px 0}
.md-intro b{color:var(--ac)}

/* hero epico de la pagina inversor: la cartera ES el numero de la pagina */
.hero-epic{padding:2px 0 22px}
/* T86 (2026-08-24): la regla es BASE, no `.hero-epic .hd-k`. `.hd-k` es el kicker del header y lo
   emiten 228 paginas de la piel inversor; solo 12 ponen `.hero-epic` (portada ES/EN + las 5 fichas
   de provincia x2), asi que las otras 216 -- las 169 de reformas, las 40 del programa y los indices --
   lo publicaban en Sans 15,5px sin tracking, sin mayusculas y pegado al titulo: se leia como una
   linea suelta, no como la etiqueta del hero. Ningun lint podia verlo: la clase TIENE regla, bajo un
   ancestro que esas paginas no emiten ([[L1578]]).
   ⚠️ Bajar la especificidad de (0,2,0) a (0,1,0) es seguro y se verifico: esta es la UNICA regla que
   nombra `.hd-k` en todo el CSS fuente, asi que no destapa ninguna competidora, y las 12 que ya la
   recibian reciben la misma declaracion. Los 216 textos son kickers cortos y legitimos
   ("La norma, en detalle" x168, "El eje, en detalle" x18; max 42 chars contra los 66 de la portada). */
.hd-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
/* el titulo sube con el fondo oscuro: la maqueta lo lleva a 74px, pero el nuestro va en MAYUSCULAS
   y con `font-stretch:125%`, asi que a 46 ocupa la misma mancha. Copiar el 74 lo desbordaria. */
.hero-epic h1{font-size:clamp(26px,4vw,46px);margin-bottom:2px}
.hd-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:14px 0 10px}
.hd-cur{font-family:var(--mono);font-size:clamp(16px,2vw,22px);font-weight:700;color:var(--mut)}
.hd-num .num{font-family:var(--mono);font-size:clamp(44px,7.2vw,92px);font-weight:600;letter-spacing:-.045em;line-height:.92;color:var(--ac)}
.hd-num-u{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);font-weight:600;flex-basis:100%}
/* linea de contexto nacional bajo el numero del hero (encuadre 2026-07-10): el numero gordo es la
   cartera auditable; el pais entero se declara al lado. */
.hd-pais{margin:0 0 10px;font-size:var(--fs-sub);color:var(--mut);line-height:1.55}
.hd-pais b{color:var(--tx)}
.hero-despegue .sello{color:var(--dim)}
.hero-despegue a.sello:hover{background:rgba(var(--ac-rgb),.08)}
.hd-split{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.hd-split span{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);line-height:1.3}
.hd-split .ok{background:rgba(var(--ver-rgb),.16);color:var(--ver);border:1px solid rgba(var(--ver-rgb),.4)}
.hd-split .ev{background:rgba(255,255,255,.05);color:var(--mut);border:1px solid var(--bd2)}
/* la MISMA letra chica que `.b-cav`, en la tercera superficie: cuanto de lo "ya aprobado" todavia
   espera su resolucion en el BO. NO es un tercer estado —matiza al `.ok`—, asi que va sin relleno y
   con filo punteado: se lee como salvedad, no como pill de estado. El texto es largo (una frase, no
   una etiqueta) ⇒ se le saca el `white-space:nowrap` que heredaria de `.hd-split span`. */
.hd-split .pend{background:none;color:var(--dim);border:1px dashed var(--bd2);
  font-weight:500;letter-spacing:.02em;text-transform:none;white-space:normal}

/* ⭐ LA BARRA DEL DESGLOSE PAIS — el corazon del port de `Hero A`. El parrafo que enumeraba los tres
   tramos pasa a segmentos con su ancho REAL y su monto ESCRITO adentro.
   ⛔ La maqueta le pone `min-width:max-content` al segmento, y eso es justamente la trampa que el
   molde ya tiene escrita: un minimo sobre un segmento porcentual **deja de ser fiel a su cifra**
   (medido: 132 px diciendo «10,6%», +38% de error). Por eso acá NO se porta ese minimo — el ancho
   es el porcentaje y nada mas. Lo que se hace en angosto es APILAR (ver la media query), donde una
   barra de dos filas ya no comunica proporcion y por eso pierde el relleno. */
.hd-bar-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.02em;color:var(--dim);margin:16px 0 7px}
.hd-bar{display:flex;align-items:stretch;min-height:60px;margin:0 0 16px;border:1px solid var(--bd)}
.hd-seg{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px 14px;min-width:0;
  border-right:1px solid var(--bg)}
.hd-seg:last-child{border-right:0}
.hd-seg b{font-family:var(--mono);font-size:var(--fs-body-lg);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.hd-seg i{font-family:var(--mono);font-style:normal;font-size:var(--fs-label);letter-spacing:.01em;line-height:1.4}
.hd-seg.res{background:rgba(var(--ac-rgb),.22)}
.hd-seg.res b,.hd-seg.res i{color:var(--ac-lo)}
.hd-seg.com{background:rgba(var(--pro-rgb),.2)}
.hd-seg.com b,.hd-seg.com i{color:var(--pro)}
.hd-seg.eval{background:rgba(255,255,255,.045)}
.hd-seg.eval b,.hd-seg.eval i{color:var(--mut)}
/* letra chica del pill: cuanto de lo APROBADO espera todavia su resolucion en el BO. Sin fondo y en
   peso normal -> matiza el agregado sin competirle a los dos chips que si son estados (V20). */

.kpis.k3{grid-template-columns:repeat(3,1fr)}
/* k2: una provincia sin fichas de empresa omite ese tile (el conteo en cero afirmaba falso, F8b
   Salta 2026-08-04). Sin esta regla los 2 tiles restantes caian al grid de 4 y quedaban a media caja.
   ⛔ EL COMENTARIO ESTABA Y LA REGLA NO — desde el 2026-08-04 hasta el 25-ago. No lo veia nadie
   porque `k2` no se emitia en ninguna pagina viva: era un defecto LATENTE, escrito y sin efecto.
   Lo destapo la cara proveedor de U1, que rinde 2 tiles, y lo cazo `lint_clases_css` (`.k2` en 10
   archivos, sin regla). Medido con captura antes de escribirla: `grid-template-columns` daba
   `303.5px x4` con 2 tiles, o sea la mitad derecha de la fila vacia. */
.kpis.k2{grid-template-columns:repeat(2,1fr)}

/* clima de inversion: tratamiento editorial (prosa, no tarjetas) */
.panel-clima .prosa-lead{font-size:var(--fs-body-lg);line-height:1.62;color:var(--tx);font-weight:600;margin:0 0 11px}
.panel-clima .prosa{margin:0 0 10px;line-height:1.7}
.panel-clima .prosa:last-child{margin-bottom:0}
/* watchlist del clima: el riesgo de la apuesta (amber-caution, distinto del azul-tesis) */
/* ⚠️ el ORO `--pro` de esta pieza NO se toca (personalizacion deliberada del usuario): lo que se
   alinea al molde es el ANCHO del filo, 3px -> 2px. El color queda exactamente igual. */
.clima-watch{margin-top:14px;padding:10px 13px;background:var(--adv-bg2);border-left:2px solid var(--pro)}
.cw-h{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pro);margin-bottom:4px}
/* 2026-08-30 — la frontera prosa/nota, cerrada MIRANDO el texto emitido. Esta salia a 15,5 por
   llamarse `-sub`, y encabeza una `.cw-list` que ya esta a 16,5: la bajada se leia mas chica que la
   lista que introduce, dentro de la misma caja. Es prosa de lectura, no una nota. */
.cw-sub{margin:0 0 7px;font-size:var(--fs-body-lg);color:var(--mut);line-height:1.5}
.cw-list{margin:0;padding-left:16px}
.cw-list li{font-size:var(--fs-body-lg);line-height:1.55;color:var(--tx2);margin-bottom:6px}
.cw-list li:last-child{margin-bottom:0}

/* fix de orden de cascada (2026-06-11): este bloque va al FINAL del archivo para ganar la cascada.
   Nacio por `.cols`/`.cols2`/`.hero-prov`, que se re-declaraban despues del bloque responsive de
   arriba y le pisaban el media query en mobile; las tres murieron en U8 (2026-08-16) y hoy lo que
   sostiene el bloque es `.kpis.k3`: su base esta en la l.~1270, o sea DESPUES del `@media` de
   `.kpis` de la l.~796, asi que su version responsive tiene que vivir mas abajo todavia.
   ⚠️ Aca habia ademas un `@media(max-width:1000px){.kpis.k3{repeat(3,1fr)}}` que repetia palabra por
   palabra la regla base: quedo sin proposito al irse las tres clases con las que compartia bloque. */
@media(max-width:760px){
  .kpis.k3{grid-template-columns:1fr 1fr}
  .hd-num .num{font-size:34px}
}
/* ⭐ EN EL TELEFONO LA FILA DE TRES BAJA A UNA COLUMNA (2026-09-20). El bloque de la l.~1553 ya
   manda `1fr` a 560px y arma cada recuadro como fila —numero a la izquierda, rotulo y glosa a la
   derecha—, pero `.kpis.k3` gana por especificidad desde aca abajo y dejaba DOS columnas de 178px
   en un telefono de 390. En esos 178px la fila no entra: el numero se queda con su columna minima
   de 52px, la glosa con ~110, y un numero largo se monta encima del texto.
   ⛔ NO es teorico: medido a 390px, «~10.000 / proveedores · 78% PyMEs» del recuadro Ecosistema de
   Neuquen se encimaba 32px. Los otros recuadros aguantaban por tener numeros de un digito, o sea
   que el defecto esperaba al primer numero largo de cualquier provincia. */
@media(max-width:560px){
  .kpis.k3,.kpis.k2{grid-template-columns:1fr}
}


/* ════════════════════════════════════════════════════════════════════════════════════════════
   «ESTO LO ABRIS VOS» EN LA PIEL DARK — port de U1 (sesion 2, 2026-08-25)
   ════════════════════════════════════════════════════════════════════════════════════════════
   ⛔ POR QUE ESTA ACA: el bloque de ideas para emprender se mudo de la cara GENTE a la cara
   PROVEEDOR, que usa la piel dark. Sus 52 reglas vivian SOLO en `despegue-gente.css`, asi que la
   primera version de la pagina lo publico SIN ESTILO: los chips pegados sin separacion, la grilla
   sin columnas y el medidor de barras invisible. No lo caza `lint_clases_css` —las clases SI tienen
   regla, en la otra hoja— y no lo caza ningun lint: lo caza una CAPTURA, que es como se encontro.
   ⚠️ SE PORTA LA ESTRUCTURA, NO LA PALETA, que es la regla del repo para un elemento compartido.
   ⛔ Y EL MAPEO SE MIDIO, porque suponerlo publico el bloque con el TEXTO INVISIBLE. La primera
   version de este port asumio que los 10 tokens de color existian en las dos pieles con su valor
   propio. Medido contra el `:root` de esta hoja: CINCO no existen fuera de `.cierre-zone`
   (`--sec` `--card` `--soft` `--acink`) y —el que hizo el daño— **`--ink` aca vale `#04050a`, o sea
   NEGRO**: en la piel gente es el texto principal, en la dark es el color para escribir SOBRE claro.
   Resultado: titulo, nombres de rubro y negritas en negro sobre fondo negro. Lo cazo la captura;
   ningun lint puede — las clases tienen regla y los tokens existen, sólo que significan otra cosa.
   El mapeo que rige: --ink->--tx · --sec->--tx2 · --card->--panel · --soft->--card-hover ·
   --acink->--ac · --teal->--cy · --sh-card-> sombra propia. Los que SI coinciden y quedan igual:
   --dim --bd --bd2 --ac --bad.
   ⚠️ `.mm-kicker` entra aca SIN prefijo, o sea que es la definicion BASE del componente en esta
   piel — que no existia. Verificado que no toca a nadie mas: los 22 `.mm-kicker` que la piel dark
   ya emitia (portada + 5 caras inversor, ES y EN) viven TODOS dentro de `.cierre-zone`, que los
   estila con su propia regla y mas especificidad. Medido en pantalla despues del port: siguen en
   `margin-bottom:13px` y `#9DB8FF`, que son los de `cierre.css`. El unico que toma la regla base
   es el del bloque emprender de la cara proveedor.
   Y la sombra larga de card (`rgba(26,28,22,.5)`) se SACO en vez de traducirse: esta escrita con un
   color claro literal, sobre fondo oscuro no se ve, y el molde dark no usa sombras de card.
   ⚠️ La duena de estas reglas para la piel GENTE sigue siendo `despegue-gente.css`: si una cambia
   estructura, cambian LAS DOS. Lo unico que puede divergir es el valor de un token.
/* 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)}
.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(--ac)}
/* ============================================================================
   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(--tx);line-height:1.18;margin:0 0 9px}
.idx-title .acc{color:var(--ac)}
.idx-intro{font-size:var(--fs-body-lg);line-height:1.5;color:var(--tx2);max-width:740px;margin:0 0 22px}
.idx-intro b{color:var(--tx);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(--tx2);max-width:740px;margin:-12px 0 22px;padding:10px 14px;border:1px solid var(--bd);border-left:3px solid var(--cy);border-radius:var(--r-12);background:var(--panel)}
.idx-reg a{color:var(--cy);text-decoration:none}
.idx-reg a:hover{text-decoration:underline}
.idx-reg b{color:var(--tx)}
.idx-list{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r-16);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.idx-row{border-top:1px solid var(--bd)}
.idx-row:first-child{border-top:none}
.idx-row[open]{background:var(--card-hover)}
.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(--tx);line-height:1.2}
.idx-h{font-size:var(--fs-body-sm);line-height:1.42;color:var(--tx2);margin-top:3px}
.idx-h b{color:var(--tx);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(--ac)}
.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(--ac)}
.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(--tx);background:var(--panel);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(--panel);padding:13px 15px}
.idx-ck{margin-bottom:7px}
.idx-row.urg .idx-ck{color:var(--bad)}
.idx-row.ven .idx-ck{color:var(--ac)}
.idx-cv{font-size:var(--fs-sub);line-height:1.45;color:var(--tx2)}
.idx-cv b{color:var(--tx);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}
}
@media(max-width:560px){
  .ng-ejemplos .idx-chips{margin-bottom:0}
}


.b.warn{color:var(--warn)}

/* V15: la fila de fuente promete un documento y su url es la home de la organizacion. Se deriva de
   la propia url (host pelado) y se marca en gris chico -> el lector sabe adonde lo manda el click. */
.src-home{font-family:var(--mono);font-size:.76em;color:var(--mut);opacity:.85;white-space:nowrap}


/* U0 (2026-08-20) · el chip de URGENCIA del calendario del art. 50, en /proyectos/proveedores.
   Marca el vencimiento que cae dentro de los proximos 12 meses. Se computa contra el reloj en cada
   build, asi que la clase se enciende y se apaga sola: NO es una marca escrita a mano que envejece.
   .pv-ya es el que YA vencio -> rojo, porque no es lo mismo "te queda poco" que "se te paso". */
.pv-u{font-family:var(--mono);font-size:.72em;font-weight:600;letter-spacing:.02em;
  color:var(--warn);border:1px solid var(--warn);border-radius:var(--r-8);padding:1px 6px;
  white-space:nowrap;margin-left:6px;opacity:.9}
.pv-u.pv-ya{color:var(--bad);border-color:var(--bad)}


/* U0 · el bloque que lleva del catalogo de proyectos a la pagina de proveedores. Es la PATA 3 del
   opt-in (el link entrante) y por eso se estila: sin regla se dibujaba como un panel mas. */
.pv-cta{border-left:3px solid var(--ac)}
/* El rótulo de transición: avisa que terminó la lectura de inversión y empieza el paso siguiente
   para una empresa que quiere vender dentro de esa inversión. */
.pv-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
 letter-spacing:.07em;color:var(--ac);margin-bottom:7px}
.pv-a{font-weight:600;color:var(--ac);text-decoration:none;border-bottom:1px solid transparent}
.pv-a:hover{border-bottom-color:var(--ac)}

/* U0 · el CUIT es un identificador: partido en dos lineas no se puede leer ni copiar. Visto en la
   captura del 2026-08-20, no deducido del codigo. */
.pv-cuit{white-space:nowrap;font-family:var(--mono)}

/* ============================================================ U0 · /proyectos/proveedores
   La estructura D (2026-08-20): entra por PROVINCIA —que es lo que se busca y la decision que
   el proveedor toma primero— y el calendario queda abajo, detras de la linea de corte. */

/* --- las tarjetas de provincia: la entrada --- */
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px}
/* 2026-08-26 — LA PUERTA AL FORMULARIO SE ALINEA AL PIE DE LA CAJA, en las seis.
   La grilla ya estiraba las tarjetas a la misma altura, pero el contenido apilaba desde arriba con
   `display:block`, asi que el link caia donde terminaba el texto: medido, el hueco de abajo iba de
   17 px (San Juan, Neuquen, Nacion) a 39 (Rio Negro), 37 (Salta) y 84 (Catamarca). Lo caza el ojo,
   no un lint. La columna flexible + `margin-top:auto` en el link lo empareja sin tocar nada mas. */
.pv-pv{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r-12);padding:16px 17px;
  display:flex;flex-direction:column}
.pv-pv-o{display:flex;flex-direction:column;flex:1 1 auto}
.pv-pv .pv-pide{margin-top:auto;align-self:flex-start;padding-top:12px}
/* la destacada es San Juan: piso vigente y padron inexistente, que es el hallazgo */
.pv-pv-hot{border-color:var(--ac)}
.pv-pv-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.pv-pv-n{font-size:var(--fs-body-lg);font-weight:700;color:var(--tx-hi)}
.pv-pv-t{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.pv-pv-hot .pv-pv-t{color:var(--ac)}
/* T110 (2026-09-02) — se invirtio el PESO, no el contenido. El piso legal deja de ser el titulo de
   la tarjeta y pasa a una linea de cuerpo al pie; el padron —lo que la propia pagina dice que
   decide— toma el tamaño que tenia el porcentaje. */
.pv-pv-p{font-family:var(--mono);font-size:var(--fs-body);font-weight:700;color:var(--tx2)}
.pv-pv-b{font-size:var(--fs-micro);color:var(--dim)}
.pv-pv-ley{border-top:1px solid var(--bd-row);margin-top:13px;padding-top:11px;line-height:1.55}
.pv-pv-o{padding-top:2px}
.pv-pv-ol{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.1em;color:var(--mut);margin-bottom:4px}
.pv-pv-oc{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.pv-pv-oe{font-size:var(--fs-sub);color:var(--mut);line-height:1.5;margin-top:5px}
/* LAS SEIS TARJETAS COMPARAN LO MISMO (2026-09-17): cada campo es una fila rotulada, y la que no
   tiene dato no se emite. El primer valor —el padron— es el que se lee de lejos. */
.pv-pv-r{border-top:1px solid var(--bd-row);margin-top:11px;padding-top:9px}
.pv-pv-r:first-child{border-top:0;margin-top:0;padding-top:2px}
.pv-pv-rl{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
 letter-spacing:.07em;color:var(--mut);margin-bottom:3px}
.pv-pv-rv{font-size:var(--fs-body-lg);color:var(--tx);line-height:1.4}
.pv-pv-r:first-child .pv-pv-rv{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.pv-pv-rn{font-size:var(--fs-sub);color:var(--mut);font-weight:400}
/* «Como se computa», en cuatro preguntas con su rotulo (2026-09-17). */
.pv-met+.pv-met{border-top:1px solid var(--bd-row);margin-top:15px;padding-top:13px}
.pv-met-k{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
 letter-spacing:.07em;color:var(--ac);margin-bottom:6px}
.pv-met p{margin:0 0 9px}
.pv-met p:last-child{margin-bottom:0}
.pv-pv-oe b{color:var(--tx2)}

/* --- la bisagra: separa lo que dice la ley de lo que averiguamos nosotros --- */
/* T112 (2026-09-02) — dos etiquetas con peso, no una frase gris centrada. Esta linea cambia el MODO
   de la pagina (de marco normativo a inteligencia propia) y hasta hoy pesaba como un adorno. */
.pv-bisagra{display:flex;align-items:center;justify-content:center;gap:11px;margin:34px 0 26px;
  flex-wrap:wrap}
.pv-bisagra::before,.pv-bisagra::after{content:'';flex:1 1 40px;height:1px;background:var(--bd-row)}
.pv-bisagra span{font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.09em;font-weight:700;line-height:1.3;text-align:center}
.pv-bis-a{color:var(--mut);background:rgba(148,163,184,.08);
  border:1px solid var(--bd-row);border-radius:var(--r-8);padding:7px 12px}
.pv-bis-b{color:var(--ac);background:rgba(var(--ac-rgb),.12);
  border:1px solid rgba(var(--ac-rgb),.4);border-radius:var(--r-8);padding:7px 12px}
.pv-bis-f{color:var(--dim);font-size:15px;flex:0 0 auto}

/* --- el calendario: una fila = un comprador con fecha --- */
.pv-cal{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pv-f{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;align-items:center;
  background:var(--panel);border:1px solid var(--bd);border-left:3px solid var(--pro);
  border-radius:var(--r-12);padding:14px 16px}
/* el color del borde y del numero es la URGENCIA, y se computa contra el reloj en cada build:
   la clase se enciende sola, no es una marca escrita a mano que envejece. */
.pv-f.pv-urg{border-left-color:var(--bad);border-color:var(--bd2)}
.pv-f.pv-ya{border-left-color:var(--dim)}
.pv-d{font-family:var(--mono);font-size:27px;font-weight:600;color:var(--pro);line-height:1}
.pv-f.pv-urg .pv-d{color:var(--bad)}
.pv-f.pv-ya .pv-d{color:var(--dim);font-size:var(--fs-body)}
.pv-du{display:block;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);margin-top:3px;font-weight:400}
.pv-n{font-size:var(--fs-body-lg);font-weight:600;color:var(--tx-hi);margin-bottom:3px}
.pv-m{font-size:var(--fs-sub);color:var(--mut)}
.pv-m b{color:var(--tx2);font-weight:600}
.pv-fact{font-size:var(--fs-sub);color:var(--mut);margin-top:4px}
.pv-fact b{color:var(--tx2);font-weight:600}

/* --- el corte: lo de abajo NO esta en el HTML, asi que esto no tapa nada --- */
.pv-corte{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:28px;
  align-items:start;background:var(--panel2);border:1px solid var(--bd2);border-radius:var(--r-12);
  padding:20px 22px;margin-top:14px}
.pv-corte-h{font-size:var(--fs-body-lg);font-weight:700;color:var(--tx-hi);margin-bottom:8px}
.pv-corte-tx p{font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx2);margin:0 0 9px}
.pv-corte-tx b{color:var(--tx-hi)}
.pv-corte-p{color:var(--mut) !important}

/* --- el formulario del corte --- */
.pv-form .cap-row{display:flex;flex-direction:column;gap:10px}
.pv-l{display:block;font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.1em;color:var(--mut)}
.pv-in{display:block;width:100%;margin-top:5px;background:var(--ink);color:var(--tx);
  border:1px solid var(--bd2);border-radius:var(--r-8);padding:9px 11px;font-family:var(--sans);
  font-size:var(--fs-body-sm);text-transform:none;letter-spacing:0;box-sizing:border-box}
.pv-in:focus{border-color:var(--ac)}
.pv-in:focus:not(:focus-visible){outline:none}
/* los tres campos opcionales del formulario (proyecto, web, desde donde) van plegados en un <details>:
   abierto sin JS y en escritorio; en el telefono lo cierra JS_COMMON y el lector lo abre si quiere.
   Seis campos entre el titulo del calendario y su primera fila era demasiado en una pantalla chica. */
.pv-mas{margin:0}
.pv-mas-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:24px;
  font-size:var(--fs-body);font-weight:600;color:var(--ac)}
.pv-mas-s::-webkit-details-marker{display:none}
.pv-mas-s::before{content:"\25B8";font-size:11px;line-height:1;transition:transform .15s}
.pv-mas[open]>.pv-mas-s::before{transform:rotate(90deg)}
.pv-mas .pv-l{margin-top:10px}
.pv-btn{width:100%;background:var(--ac);color:var(--on-ac);border:0;border-radius:var(--r-8);
  padding:11px 14px;font-family:var(--sans);font-size:var(--fs-body-sm);font-weight:700;
  cursor:pointer;transition:.13s}
.pv-btn:hover{background:var(--ac-lo)}
.pv-btn:disabled{opacity:.6;cursor:default}

@media (max-width:720px){
  .pv-corte{grid-template-columns:1fr;gap:18px}
  /* ⭐ T111 (2026-08-29) — EN TELEFONO EL PLAZO VA ARRIBA, EN UNA FILA. La columna de 66 px
     dejaba tan poco lugar que el nombre del proyecto envolvia en 8 a 10 lineas, y el calendario
     terminaba ocupando 7.265 px: EL 55% DE LA PAGINA. Medido antes de tocarlo.
     ⛔ La cura NO es paginar, ni esconder filas, ni recortar a 12 meses: el propio reporte dice
     que eso destruiria la fortaleza de la pagina. Es darle el ancho completo al nombre. */
  .pv-f{grid-template-columns:minmax(0,1fr);gap:7px}
  .pv-d{display:flex;align-items:baseline;gap:7px;font-size:20px}
  .pv-du{display:inline;margin-top:0}
}

/* U0 · el nombre del proyecto que TIENE ficha. Hoy son 2 de 21, asi que un link en azul
   subrayado grita entre 19 filas que no lo son y se lee como defecto, no como jerarquia
   (lo cazo el usuario en la primera revision). Se queda del color del texto y marca su
   condicion de link con la flecha y el subrayado al hover — la misma gramatica que el resto
   del sitio. Cuando U3 le de ficha a los 21 esto sigue siendo correcto. */
.pv-n a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.45)}
.pv-n a:hover{color:var(--ac-lo);border-bottom-color:var(--ac-lo)}
.pv-n a::after{content:' \2192';color:var(--ac);font-weight:400}

/* la celda de la tabla de normas: 'sin cupo' es un valor, no dos palabras sueltas */
.pv-nowrap,td[data-k='Piso']{white-space:nowrap}

/* U0 · el link del CUARTO ESTANDAR: la conclusion queda arriba, el desarrollo se pide. Sale
   solo en las tarjetas que son inferencia nuestra (`tesis`), no en las que publican un hecho. */
.pv-pide{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.08em;color:var(--ac);text-decoration:none;
  border-bottom:1px solid rgba(var(--ac-rgb),.4);padding-bottom:2px}
.pv-pide:hover{color:var(--ac-lo);border-bottom-color:var(--ac-lo)}

/* U0 · el «Proximamente» de la lista de espera. Va ARRIBA del titulo y no al lado: lo primero
   que el lector tiene que saber es que esto todavia no existe, antes de leer que promete. */
.pv-badge{display:inline-block;font-family:var(--mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.1em;color:var(--ac);border:1px solid var(--ac);
  border-radius:var(--r-16);padding:3px 11px;margin-bottom:11px}

/* el encabezado del calendario: le devuelve a las fichas el rotulo que perdieron al dejar de
   ser <th>. Nace de que el usuario preguntara «118 dias para que?». */
.pv-cal-h{display:block;padding:0 16px 6px;
  font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.08em;color:var(--dim);border-bottom:1px solid var(--bd-row);margin-top:16px}

/* el pie del calendario: el enlace chico de vuelta al analisis por empresa (T111, 2026-08-30).
   ⛔ NO es un `.disc`: un `.disc` es una caja con fondo y borde, o sea el mismo peso visual que
   el bloque de arriba, y el reporte externo pidio explicitamente «un enlace CHICO al final, sin
   repetir el formulario». Una linea de texto secundario con su flecha alcanza. */
.pv-cal-pie{margin:14px 16px 0;font-size:var(--fs-body);color:var(--mut);line-height:1.6}
.pv-cal-pie a{color:var(--ac);white-space:nowrap}

/* el numero y su sujeto, apilados: el numero grande y debajo QUE mide */
.pv-dn{display:block;font-family:var(--mono);font-size:27px;font-weight:600;line-height:1}

/* (la regla movil del grid murio con el grid: el encabezado es una linea) */

/* ---- U6 · /reformas/ (2026-08-21): la ficha de una norma + el hub -------------------------
   Hermanas de las `.rf-*` del cajon de la portada, pero para una PAGINA: la medida de lectura
   se suelta (alla la fila vive en un acordeon de 167; aca la norma tiene la pagina entera) y
   la columna de etiquetas es mas ancha porque los rotulos son los del molde de reformas
   («A quien afecta», «Desde cuando rige»), que no entran en los 104px de `.rf-grid`. */
.rfp-norma-l{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);margin:6px 0 0;
  line-height:1.5}
/* gap 6 -> 14 (T142(b), 2026-08-24): el punto de 5 px de `.b::before` estaba haciendo de SEPARADOR
   además de marcar el sello. Al quitárselo a `ap`/`amb` —para que `VIGENTE` deje de ser idéntico al
   sello `VERIF`— «vigente PROVINCIAL» quedaba corrido a un espacio de distancia, en la misma mono
   mayúscula, leyéndose como una sola tira. El separador vuelve como aire, que es lo que era. */
.rfp-chips{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:11px 0 0}
/* ESTADO Y TENDENCIA, cada uno con su rotulo (encargo del usuario, 2026-09-17). El hero del eje
   mostraba los dos chips pegados y sin decir cual era cual, y al lado la glosa de la regla —que es
   lectura nuestra— como si fuera del mismo orden. El rotulo los separa sin agregar una fila. */
.pgp-kv{display:inline-flex;align-items:center;gap:8px}
.pgp-kv-l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
 text-transform:uppercase;color:var(--tx2);white-space:nowrap}
@media (max-width:640px){.rfp-chips{gap:9px 14px}.pgp-kv{gap:6px}}
.rfp-cat{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ac);background:var(--panel2);
  border:1px solid var(--ac-dk);border-radius:var(--r-pill);padding:2px 10px;font-weight:600}
.rfp-madre{margin:13px 0 0;font-size:var(--fs-sub);color:var(--mut)}
.rfp-madre a{color:var(--ac)}
/* A2 (2026-08-25) — el bloque «Que cambio y a quien le toca» pierde la caja y queda el filete.
   Elegida por el usuario entre cuatro variantes renderizadas sobre su propia ficha
   (`visual/propuesta-cajas-y-menu.html` §2). Hereda 168 paginas.
   ⭐ EL HALLAZGO QUE NO HAY QUE RE-DERIVAR: el hueco de la derecha NO era un error de layout.
   `.rfp-v` tiene `max-width:88ch`, que es un tope de MEDIDA DE LECTURA y esta bien puesto. Lo que
   estaba mal es que la caja no se achicaba con el: medido el 25-ago sobre 3 fichas a 1280 px, el
   marco media 1.244 px y el contenido llegaba a 1.031 ⇒ **231 px de caja vacia**. Por eso «hay
   muchas cajas» y «hay un hueco» eran la misma pregunta, y una sola variante las contesta: sin
   marco, ese mismo espacio se lee como margen.
   ⛔ El texto se queda COMPLETO — lo que se va es el marco (`IDENTIDAD §2 regla 7` sigue en pie).
   El filete de acento conserva lo unico que la caja hacia de util: decir donde empieza y termina
   el bloque. La columna de etiqueta (`.rfp-k`) se conserva a proposito: es la que deja saltar a
   «A quien afecta» sin leer, y en una pagina de referencia eso vale.
   ⚠️ A ≤640 px no cambia nada: `.rfp-grid` ya colapsa a una columna (la variante A3 es el movil
   de hoy) y ahi el hueco medido era de 25 px, no de 231. */
.rfp-hecho{border-left:2px solid var(--ac);padding:2px 0 2px 20px;margin-bottom:22px;
  overflow-x:auto}
/* el hermano de `.panel+.sec-h` (tokens.css): sin esto, el `<h2>` de la seccion siguiente
   —«Nuestra lectura»— se despega respecto de las otras 170 paginas del molde. */
.rfp-hecho+.sec-h{margin-top:10px}
/* la etiqueta baja de 150 a 132 px (2026-09-16): es una columna de rótulos de una o dos palabras en
   versalita, y los 18 px que suelta se los lleva el texto, que es lo que se lee. */
.rfp-grid{display:grid;grid-template-columns:132px 1fr;gap:13px 20px;max-width:100%}
.rfp-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);padding-top:4px}
/* ⭐ F8 (2026-09-16) — EL TOPE SE RECALIBRA, NO SE INVENTA. El `max-width` ya estaba y está bien
   puesto (ver el comentario de `.rfp-hecho` arriba): lo que fallaba era la UNIDAD. `ch` mide el
   ancho del carácter «0», más angosto que la letra promedio, así que 88ch rendía **100 a 109
   caracteres reales** medidos en el navegador sobre las tres puntas del molde — contando renglones
   con `Range.getClientRects()`, no leyendo el CSS.
   ⛔ En teléfono no cambia nada y no hace falta media query: a 390 px la columna mide 344 px, muy
   por debajo de cualquiera de los dos topes, así que el `max-width` no llega a actuar. Ahí el
   renglón mide 42-45 caracteres y está sano.
   ⚠️ No re-abre el ancho de PÁGINA del 2026-08-27 (`visual/anchos-prosa-probado-2026-08-27.html`):
   aquella decisión igualó el contenedor a 1.320 px y dejó escrito que la cura de la línea va en el
   párrafo. Esto es esa cura.
   ⭐ CALIBRADO EN DOS PASOS, y el segundo lo pidió el usuario mirando la página: 60ch dejaba la
   columna en 558 px —el texto «se corta a mitad de la pantalla y la columna izquierda le quita
   ancho»—. Se renderizaron tres anchos sobre la misma ficha: 60ch → 77 caracteres · **72ch → 95** ·
   84ch → 107, que es volver al problema. Queda 72ch: la columna pasa a 670 px y termina más a la
   derecha que el resumen del encabezado. */
.rfp-v{font-size:var(--fs-body);line-height:1.65;color:#C2CAD6;max-width:72ch}
.rfp-v b{color:var(--tx)}
/* la lectura propia del molde: `.ref-lectura` es compartida con la tarjeta de norma de la portada,
   que no está en esta pasada — por eso el tope va en una clase propia y no en la compartida. */
.rfp-lect{max-width:74ch}
/* ⭐ EL ATAJO al formulario de la propia página (2026-09-16). Es el primero de los dos niveles de
   la misma acción: un botón secundario, sin título ni párrafo, que baja al bloque del producto.
   ⛔ Tiene MENOS peso que el botón del formulario a propósito (`.btn-s`, no `.btn-p`): si los dos
   pesan igual se leen como dos pedidos distintos, que es justo lo que se quería evitar. */
.rfp-atajo{margin:18px 0 34px}
/* ⛔ LA FIRMA DE ESTE MOLDE NO SE DECLARA ACÁ (2026-09-16): su forma —autoría en una franja,
   sin la lista de credenciales— es la misma que la de la hoja de oportunidad y la de la ficha de
   proyecto, así que vive en UNA regla, `.firma-autoria` en `tokens.css`, que emite
   `firma_analista(compacta=True)`. Acá estuvo la tercera copia de esa misma decisión. */
/* F7: la deuda de impacto por provincia, declarada en una línea en vez de un panel vacío */
.rfp-pend{font-size:var(--fs-sub);color:var(--mut);margin:26px 0 22px;scroll-margin-top:70px}
.rfp-pend b{color:var(--tx2);font-weight:600}
/* F7: «rige igual en todo el país» — el hecho que antes ocupaba un <h2> y un panel de ~190 px en
   48 fichas. Es un dato de ALCANCE, no de estado ni de ámbito: por eso no reusa `.b` (la forma de
   los chips) sino que va un escalón por debajo, en minúscula y con su propio separador. Con la
   forma de `.b neutral` quedaba pegado a «NACIONAL» y los dos se leían como una sola tira. */
.rfp-alcance{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);letter-spacing:.02em}
.rfp-alcance::before{content:"·";margin-right:13px;color:var(--bd2)}
.rfp-norma{font-size:var(--fs-sub);color:var(--mut)}
.rfp-prov{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ac);font-weight:700;margin-right:8px}
.rfp-der{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--bd-row);font-size:var(--fs-body)}
.rfp-der:last-child{border-bottom:0}
.rfp-der-n{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);flex:1 1 auto}
/* U7 · el titulo de la fila. En /en/programa/ el MISMO tag sale SIN `href` (la ficha de norma no
   existe en ingles): sin `:link` el navegador no lo pinta como link, asi que hereda el color del
   texto y se lee como lo que es — un nombre, no una puerta rota. */
.rfp-der-t{font-weight:600}
a.rfp-der-t:not([href]){color:var(--tx2);cursor:default}
/* ⛔ Y el caso CON href no tenia color, asi que caia al azul por defecto del navegador
   (#0000EE): contraste 2.01 sobre el panel, contra el umbral AA de 4.5. Medido con
   `getComputedStyle` el 2026-08-23 al construir T80 — la captura sola no concluye
   ([[L1571]]). No lo ve ningun lint: `lint_clases_css` pregunta si la clase
   TIENE regla, y `.rfp-der-t{font-weight:600}` es una regla. Nadie eligio ese azul: la regla
   de al lado prueba que el diseno si penso el caso sin href y se olvido del otro. */
a.rfp-der-t[href]{color:var(--ac);text-decoration:none}
a.rfp-der-t[href]:hover{text-decoration:underline}
/* hub: la fila de la tabla — el titular linkea y la norma va de subtitulo */
.rfh-t{font-weight:600}
/* ⭐ D4 (sesion 6, 2026-08-26) — los controles del catalogo de normas.
   Nacen acá y no en `tokens.css` porque son de ESTA pagina: el catalogo es UNA pagina, no un molde
   que se replica x168. El buscador reusa la caja del sitio; el contador es mono como el resto de
   los numeros; la columna de fecha va mono y alineada para poder escanearla en vertical. */
.rfh-q-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
/* ⭐ R10 (decision del usuario, 2026-08-28) — el buscador del catalogo de normas queda PEGADO
   arriba. Medido: la pagina son 49,8 pantallas de telefono y tiene 2 secciones con titulo, asi que
   el indice de pagina no aplica; el control que sirve es el buscador, y se iba en la 2a pantalla.
   ⛔ Solo funciona porque el bloque salio del `.panel`: ese lleva `overflow-x:auto` para la tabla,
   y un ancestro con overflow clipea a un hijo sticky (el CSS se ve bien y no pega nada).
   El fondo es obligatorio: sin el, las filas de la tabla pasan POR DEBAJO y se leen encima. */
.rfh-q-fija{position:sticky;top:var(--hh,54px);z-index:17;background:var(--bg);
  padding:11px 0 9px;margin:0;border-bottom:1px solid var(--bd)}
.rfh-q{flex:1 1 320px;min-width:0;background:var(--pan2);color:var(--tx);
  border:1px solid var(--bd);border-radius:var(--r-8);padding:9px 13px;font-size:14.5px;
  font-family:inherit}
.rfh-q::placeholder{color:var(--dim)}
.rfh-q:focus{border-color:var(--ac)}
.rfh-q:focus:not(:focus-visible){outline:none}
.rfh-cnt{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);white-space:nowrap}
.rfh-d{font-family:var(--mono);font-size:var(--fs-micro);color:var(--tx2);white-space:nowrap}
/* el `th` ordenable. ⛔ NADA DE GLIFOS RAROS: la primera version puso `95` (↕) y la fuente mono
   no lo tiene, asi que salio un TOFU —el cuadrito con el codigo adentro— y ademas partido en dos
   renglones porque la celda es angosta. Lo cazo el usuario mirando la pagina. La senal de
   «ordenable» se da con el subrayado punteado, que no depende de ninguna fuente. */
.rfh-th-d{cursor:pointer;user-select:none;white-space:nowrap;
  text-decoration:underline dotted;text-underline-offset:4px}
.rfh-th-d:hover{color:var(--tx)}
.rfh-nada{font-size:14px;color:var(--tx2);padding:14px 2px;margin:0}
/* ⭐ `.rfh-mas` (2026-09-02) — el boton que trae la tanda siguiente del catalogo de normas.
   Sale `hidden` del render y SOLO lo enciende el JS con la tabla apilada (<=640px): en escritorio
   no existe, porque ahi partir la lista romperia el Ctrl+F sobre las 193. Ancho completo y
   familia mono para que se lea como un control de la lista y no como un link mas del catalogo. */
.rfh-mas{display:block;width:100%;margin:14px 0 0;padding:13px 16px;background:var(--panel);
  border:1px solid var(--bd);color:var(--ac);font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.rfh-mas:hover{border-color:var(--ac);background:rgba(var(--ac-rgb),.06)}
/* ⛔ (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%}}
/* ⭐ PROSA, NO DATO (decision del usuario, 2026-09-07) — misma decision que `.py-li-sub`,
   `.pyd-mag-d` y `.pyd-sincifra-tx` en `molde.css`. Es la microdescripcion de cada provincia («El
   polo del cobre argentino · lider nacional en RIGI minero · piso de oro hoy…»), de hasta 139
   caracteres: una frase, no un dato. La monoespaciada se queda donde vive de verdad — rotulos,
   cifras, sellos y fechas.
   ⚠️ El tope de `.panel table .rfh-n` (14 px, en tokens.css) sigue mandando dentro de la tabla:
   ahi el renglon convive con la cifra y no puede crecer. */
.rfh-n{font-family:var(--sans);font-size:14.5px;color:var(--dim);margin-top:3px;
  line-height:1.45}
@media (max-width:640px){
  .rfp-grid{grid-template-columns:1fr;gap:3px 0}
  .rfp-k{padding-top:13px}
}

/* ---- U7 · /programa/ (2026-08-21): la pagina de un eje + su hub ---------------------------
   Hermanas de las `.score-*` de la tarjeta del Tablero, pero para una PAGINA: la cifra crece
   (aca es el numero protagonista, no una celda de una grilla de 18) y la prosa suelta su medida
   de lectura, porque el eje tiene la pagina entera y no una tarjeta. */
.pgp-cifra{font-family:var(--mono);font-size:40px;font-weight:650;color:var(--white);
  letter-spacing:-.015em;line-height:1.1;margin:15px 0 4px}
.pgp-tit{font-size:var(--fs-sub);color:var(--mut);line-height:1.55;max-width:76ch}
.pgp-tit .b,.pgp-tit .fch{vertical-align:1px}
/* ⭐ El ARCO DESDE LA HERENCIA en la pagina del eje — hermano de `.score-arco` de la portada, con el
   cuerpo de esta superficie (el hero del eje respira mas que una tarjeta de 407 px). Sale en los
   mismos 13 ejes: es el mismo `titulo`, partido por el mismo separador. */
.pgp-arco{margin:9px 0 0;padding:7px 0 7px 11px;border-left:2px solid rgba(var(--ac-rgb),.55);
  font-size:var(--fs-body-sm);line-height:1.55;color:var(--mut-hi);max-width:76ch}
.pgp-prom{font-size:var(--fs-body-lg);line-height:1.7;color:#C2CAD6;max-width:88ch;margin:0}
.pgp-dato{font-size:var(--fs-body);line-height:1.7;color:#C2CAD6;max-width:88ch}
.pgp-hist{font-size:var(--fs-body);line-height:1.65;color:#C2CAD6;max-width:88ch;
  padding:11px 0;border-bottom:1px solid var(--bd-row)}
.pgp-hist:last-child{border-bottom:0;padding-bottom:0}
/* el grafico grande: el sparkline se dibuja con su viewBox propio y escala sin deformarse */
/* El grafico toma el ancho del panel. Hasta el 2026-08-26 tenia `max-width:680px`, o sea el
   55% de los 1.236px utiles del panel en desktop. Las etiquetas ya NO viven adentro del SVG
   (`etq_html=True`): un `<text>` del viewBox escala con el contenedor y en un telefono caia
   a 6px de alto. En HTML el cuerpo de letra es absoluto. */
/* D7 · «Nuestra lectura» de la pagina de eje: sus tres partes pasan a subtitulo propio.
   ⛔ SOLO en `.pgp-lect`. La misma `.reg-lect` dibuja la tarjeta del tablero en la portada, donde
   el bloque es de dos lineas y partirlo lo rompe. */
.pgp-lect>.prom,.pgp-lect>.qh,.pgp-lect>.wl{margin:0;padding:13px 0 0}
.pgp-lect>.prom:first-child,.pgp-lect>.qh:first-child,.pgp-lect>.wl:first-child{padding-top:2px}
.pgp-lect>.qh,.pgp-lect>.wl{border-top:1px solid rgba(var(--tes-rgb),.16);margin-top:13px}
.pgp-lect>.prom>b,.pgp-lect>.qh>b,.pgp-lect>.wl>b{display:block;font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  margin:0 0 6px}
.pgp-lect>.prom>b{color:var(--mut-hi)}
.pgp-lect>.qh>b,.pgp-lect>.wl>b{color:var(--tes)}
/* La tendencia queda en su propia linea, debajo del rotulo, con la flecha adelante. */
.pgp-lect>.prom>.tend{margin-right:5px}

/* D3 · el archivo de rendiciones: sin cajon padre, con encabezado por entrada y su reparto
   de veredictos en la linea. `.wk-h` imita el peso del `<b>` que habia antes: lo que cambia es
   la SEMANTICA (56 encabezados que la pagina no tenia), no la jerarquia visual. */
.pv-cab{margin:14px 0 8px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.wk-h{display:inline;margin:0;font-size:var(--fs-body);font-weight:650;color:var(--tx);
  font-family:inherit;letter-spacing:0}
.wk-h .wk-au{font-weight:400;color:var(--tx2)}
.wk-rep{display:inline-flex;gap:5px;flex-wrap:wrap;margin-left:8px;vertical-align:middle}
.wk-rp{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.03em;padding:1px 6px;
  border-radius:var(--r-4);border:1px solid currentColor;opacity:.9;white-space:nowrap}
/* El color del chip sale del MISMO veredicto que pinta la tarjeta de adentro. ⚠️ Las clases
   `v-*` de mas arriba solo aplican combinadas con `.vc`, asi que aca van sus propias reglas. */
.wk-rp.v-ver{color:var(--ver)}
.wk-rp.v-pro{color:var(--pro)}
.wk-rp.v-tes{color:var(--tes)}
.wk-rp.v-bad{color:var(--bad)}
.wk-rp.v-dim{color:var(--dim)}
@media(max-width:640px){.wk-rep{margin-left:0;margin-top:4px;width:100%}}

/* D3 · los grupos por mes del archivo de rendiciones */
.pv-mes{border-top:1px solid var(--bd)}
.pv-mes:first-child{border-top:0}
.pv-mes-s{cursor:pointer;list-style:none;padding:11px 2px;display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap}
.pv-mes-s::-webkit-details-marker{display:none}
.pv-mes-s::before{content:"\25B8";color:var(--ac);font-size:11px;flex:0 0 auto;transition:transform .15s}
.pv-mes[open]>.pv-mes-s::before{transform:rotate(90deg)}
.pv-mes-h{display:inline;margin:0;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--tx)}
.pv-mes-b{padding:0 0 8px 15px}

/* D4 · la sintesis de las excepciones, arriba de la tabla del hub */
.pgh-exc{margin:0 0 12px;line-height:1.9;font-size:var(--fs-body-lg)}
.pgh-exc-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tes);margin-right:6px}
.pgh-seg-a{color:var(--tx2);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.35)}
.pgh-seg-a:hover{color:var(--ac)}

/* D6 · la edad del dato, debajo de su cadencia en la tabla del hub */
.rfh-rez{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);
  letter-spacing:.02em;margin-top:2px;white-space:nowrap}
.spark-lg{max-width:none}
.pgp-graf .spark{max-width:none}
.pgp-graf .spark svg{width:100%;height:auto}
.spark-ext{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.02em;margin:0 0 2px}
.spark-ext .sx-i{color:#C3D0DF;font-weight:650}
.spark-ext .sx-f{color:var(--ac);font-weight:700;font-size:var(--fs-body)}
/* la tabla de puntos de la serie: existe para CITAR el numero, asi que va monoespaciada,
   compacta y con cifras tabulares (las columnas cuadran, que es lo que pidio el usuario para
   todo dato en columna) */
.pgp-serie{width:100%;margin:11px 0 0;font-size:var(--fs-sub)}
.pgp-serie th{text-align:left;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.05em;text-transform:uppercase;color:var(--dim);font-weight:600;
  padding:0 0 6px;border-bottom:1px solid var(--bd2)}
.pgp-serie td{padding:5px 0;border-bottom:1px solid var(--bd-row);color:var(--tx2)}
.pgp-serie tr:last-child td{border-bottom:0}
.pgp-num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--white)}
/* R5 (2026-09-07) · LA CELDA DE LA CIFRA TIENE DOS RENGLONES: el numero, y de quien es y de
   cuando. La fila entregaba «0,1% verif ↗» — el sello decia la CALIDAD de la fuente y nunca cual
   era — mientras el hero prometia «el ultimo dato CON FUENTE». Van en renglones separados y no
   en la misma linea porque la columna es angosta: con el organismo al lado, la cifra —que es lo
   que la columna existe para comparar— quedaba desalineada fila contra fila. */
.pgp-cif{display:block}
.pgp-src{display:block;margin-top:3px;font-variant-numeric:normal}
.pgp-org{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);letter-spacing:.02em;
  margin-right:6px}
/* R11 · el conteo dentro del chip de filtro: el filtro es ademas el resumen del universo */
.op-chip-n{font-variant-numeric:tabular-nums;font-weight:700;opacity:.72;margin-left:1px}
.op-chip.on .op-chip-n{opacity:1}
/* R4 · la regla de los tres estados, pegada al filtro que la usa */
.pgh-reglas{margin:0 0 13px;line-height:1.75}
.pgh-reglas b{color:var(--tx2);font-weight:650}
/* la misma regla, dicha en la ficha de UN eje: ahi va solo la definicion de SU estado, debajo de
   la fila de chips que la necesita */
.pgp-regla{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);letter-spacing:.02em;
  margin-top:7px;line-height:1.5;flex-basis:100%}
/* la columna de tendencia no parte «▼ empeora» en dos renglones: con dos de los 18 ejes
   partidos, la columna deja de cuadrar y es justo lo que el dato en columna tiene que hacer */
.pgp-tend{white-space:nowrap}
@media (max-width:640px){
  .pgp-cifra{font-size:32px}
  .pgp-tend{white-space:normal}
  /* T11 (2026-08-30) — el defecto que se veia como un error de la pagina, no como una decision.
     Apilada, cada celda lleva su rotulo puesto por `data-k`. Los tres rotulos cortos («Eje»,
     «Ultimo dato», «Se actualiza») entran al lado de su valor; los DOS largos no: «Tendencia ·
     lectura nuestra» y «Estado · lectura nuestra» ocupan dos renglones, y entonces el valor cae
     al lado del rotulo o debajo segun mida un par de caracteres mas — `▲ mejora` entraba y
     `▬ estable` no, en la misma tabla y a la vista uno del otro.
     La cura es hacerlo DETERMINISTA: en las dos columnas de lectura propia el rotulo va en su
     propio renglon siempre. Se paga con 36 renglones en los 18 ejes y se gana que las 18 filas
     se lean iguales. ⛔ No se toca el rotulo: decir «lectura nuestra» es lo que separa nuestra
     interpretacion del dato de al lado, y acortarlo para que entre seria pagar con lo unico que
     esa columna tiene que decir. */
  .pgp-tend::before,.pgp-est::before{display:block;margin:0 0 3px}

  /* ⭐ R7 (lectura externa, 2026-09-07) · LA TARJETA DE TELEFONO SE COMPRIME, NO SE VACIA.
     Medido antes de escribir esta regla, a 390 px: la pagina son 8.927 px y la tabla de los 18
     ejes 5.329 de ellos —el 60%—, a 296 px de tarjeta promedio. La causa no era la cantidad de
     dato: era que cada fila gastaba SEIS renglones en rotulos y descripcion antes de llegar al
     numero. La cura es de ritmo, no de contenido: no se saca ninguna columna y no se esconde
     ninguna de las 18 filas (el que copia y el que busca con Ctrl+F siguen viendo todo).
     ⛔ SCOPEADA A `#pgh` A PROPOSITO: `.tbl-k` la comparten ~15 moldes y la tabla de los ejes es
     la unica con dos columnas de lectura propia y una descripcion larga por fila. */
  /* 1 · las DOS columnas de lectura propia comparten UN rotulo y UN renglon. T11 pedia que el
     rotulo no se acortara porque «lectura nuestra» es lo que separa nuestra interpretacion del
     dato de al lado — eso se cumple igual: la marca sigue, una vez, delante de las dos. */
  #pgh .pgp-est,#pgh .pgp-tend{display:inline;padding:0}
  #pgh .pgp-est::before{content:attr(data-k2) " ";display:inline;margin:0}
  #pgh .pgp-tend::before{content:none}
  #pgh .pgp-tend{margin-left:9px}
  #pgh tbody td:last-child{padding-top:6px}
  /* 2 · el rotulo «Eje» se va: el nombre es el titulo de la tarjeta y es el unico link de la
     fila. Es la decision que el propio `.tbl-k` contempla («una celda SIN data-k es una
     decision, no un olvido»), tomada aca para una tabla concreta y no para las quince. */
  #pgh tbody td:first-child::before{content:none}
  #pgh .rfh-t{font-size:var(--fs-body-lg);font-weight:600}
  /* 3 · la cifra y su procedencia vuelven a UN renglon. En escritorio van en dos porque la
     columna es angosta y la cifra tiene que cuadrar con la de arriba; apilada no hay columna que
     cuadrar y el ancho es el de la pagina entera, asi que separarlas costaba 108 px por tarjeta
     —la celda mas cara de las cinco— para no ganar nada. Lo mismo con el rezago, que en la
     columna cuelga de su cadencia y aca cabe al lado. Medido: la celda baja de 108 a 44 px. */
  #pgh .pgp-cif,#pgh .pgp-src{display:inline}
  #pgh .pgp-src{margin-left:8px}
  #pgh .rfh-rez{display:inline;margin-left:6px}
  /* 4 · la descripcion se recorta a dos renglones. Es la GLOSA del eje, no un dato con sello, y
     entera vive en la ficha que abre el propio titulo de la tarjeta — a un toque. Recortarla en
     escritorio no haria falta y no se hace: ahi la fila cabe en una linea. */
  #pgh .rfh-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.5}
}

/* ---- U8 · /provincias/ (2026-08-21): el comparador de las 5 --------------------------------
   Hermanas de las `.pgp-*` del hub del programa: misma familia de celda de tabla (mono + cifras
   tabulares para que las columnas cuadren, que es lo que el usuario pidio para TODO dato en
   columna), con dos diferencias que las justifican como clases propias:
     · una celda de este comparador apila DOS cifras con su rotulo (extraccion / servicios), asi
       que necesita su propio ritmo vertical;
     · la columna de compre local NO es numerica a proposito (T45) y por eso se estila como texto
       con puerta, no como dato. */
.pv-cel{white-space:nowrap}
/* ⛔ EL CAVEAT DE LA CELDA TIENE QUE ROMPER EL `nowrap`, y sin esto la tabla mide 6.710 px.
   `white-space:nowrap` es correcto para una cifra —un «3,60%» partido en dos renglones es
   ilegible— pero el plegable del piso local (T45) mete una frase de 200+ caracteres en la misma
   celda: hereda el nowrap y estira la columna hasta reventar el ancho de la pagina. Medido con el
   plegable abierto antes de escribir esta regla. El tope en `ch` es del TEXTO, no de la columna:
   la celda sigue tan ancha como su cifra cuando el plegable esta cerrado, que es el default. */
.pv-cel .cr-f>summary,.pv-cel .cr-f-b{white-space:normal;max-width:38ch}
.pv-cel .cr-f{margin-top:7px}
.pv-num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--white);
  font-size:var(--fs-sub);font-weight:600}
/* la 2a cifra de la celda de IIBB: mismo peso, separada del rotulo de la 1a */
.pv-n2{display:inline-block;margin-top:9px}
.pv-sub{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);margin-top:2px;
  line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
/* el estado vacio se DECLARA, no se esconde: se lee como lo que es — un hueco nuestro, no un
   cero. Va en el gris mas apagado y sin mayusculas, para que no compita con un dato real. */
.pv-vacio{color:var(--dim);font-style:italic;text-transform:none;letter-spacing:0}
/* las dos puertas de cada fila (invertir / trabajar): el destino real de la fila es la provincia,
   asi que van juntas y chicas debajo del nombre, no como columna propia */
.pv-ps{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px}
.pv-p{font-size:var(--fs-micro);color:var(--ac);white-space:nowrap}
/* las tres puertas de la fila del hub llevan el color de SU recorrido (P5, 2026-08-24), igual que
   el azulejo y el header: el color es lo que hace que las tres se lean como tres cosas distintas
   sin agregar una palabra.
   ⚠️ Las TRES llevan regla propia aunque `-inv` repita el `--ac` que ya hereda de `.pv-p`: el lint
   `lint_clases_css` cazó la asimetría —una clase emitida en 10 páginas sin regla— y tiene razón en
   la forma, no sólo en la letra. Un trío en el que dos declaran su color y el tercero lo hereda se
   rompe callado en cuanto alguien cambia el color base. */
.pv-p-inv{color:var(--ac)}
.pv-p-prv{color:var(--prv)}
.pv-p-gen{color:var(--cy)}
/* la celda de compre local: el titulo de la norma, que abre su ficha */
.pv-reg{font-size:var(--fs-sub);line-height:1.45;color:var(--tx2);display:inline-block;
  max-width:44ch}
a.pv-reg[href]{color:var(--ac)}
/* ⭐ EL `<a>` SIN `href` — [[L1522]]: cuando el destino no existe en un idioma lo
   que cambia es el href, NUNCA el tag (cambiar el nodo rompe `lint_paridad_en`, y lo rompio: ES=10
   `pv-p` contra EN=5 en la primera version). Entonces el estilo tiene que hacer que se LEA como
   texto y no como puerta rota. Mismo patron que `a.rfp-der-t:not([href])`, que ya existia.
   Aplica en /en/: la cara GENTE es ES-only y `/en/reformas/` no se emite todavia (T33). */
a.pv-p:not([href]),a.pv-reg:not([href]){color:var(--tx2);cursor:default}
@media (max-width:640px){
  /* apilada (`.tbl-k`) la celda deja de ser columna: el nowrap la desborda */
  .pv-cel{white-space:normal}
  .pv-reg{max-width:none}
}

/* ── «PARA EMPRESAS»: las 5 tarjetas de /metodo (decision del usuario, 2026-08-29) ──────────────
   Reusan `.cards`/`.card`, que es la grilla del sitio; lo unico propio son las TRES LINEAS de
   cada tarjeta, que el molde de provincia no tiene. El `margin-top:auto` del ejemplo alinea los
   enlaces al pie aunque las descripciones midan distinto. */
.pe-grid{margin:14px 0 6px}
.card.pe-c{display:flex;flex-direction:column;padding:16px 16px 14px}
.pe-c .pe-q{font-weight:640;color:var(--tx);font-size:1.02rem;line-height:1.35;margin:0 0 8px}
.pe-c .pe-d{color:var(--tx2);font-size:.93rem;line-height:1.5;margin:0 0 12px}
.pe-c .pe-ex{border-top:1px solid var(--bd);padding-top:10px;margin-top:auto}
.pe-c .pe-ex-k{display:block;font:600 .70rem/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.pe-c .pe-ex a{color:var(--ac);text-decoration:none;font-size:.9rem;line-height:1.45;
  border-bottom:1px solid rgba(var(--ac-rgb),.35)}
.pe-c .pe-ex a:hover{border-bottom-color:var(--ac)}
/* ===== `.pv-anio` · EL CORTE POR AÑO DE VENCIMIENTO (T111, 2026-08-29). Los 21 se reparten 1 en
   2026, 8 en 2027 y 7 en 2028: sin la marca son una sola masa de filas iguales y el lector no ve
   que lo suyo pasa el año que viene. ⛔ No esconde ninguna fila — es un rotulo de corte. */
.pv-anio{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;color:var(--mut);
  margin:16px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--bd)}
.pv-anio:first-child{margin-top:2px}
.pv-anio-n{color:var(--dim);letter-spacing:0;text-transform:none}

/* ═══ CURVA DE OBRA del hub de proyectos (2026-08-31) ═══
   Cuantos proyectos estan en construccion cada anio. Barras horizontales y no un grafico: la lectura
   es «en que anio hay mas obra», y para eso el orden vertical con la etiqueta al lado se lee de un
   vistazo y no necesita ejes. El anio pico se marca con el acento, que es la unica informacion
   jerarquica que la figura tiene que dar. */
.cob{display:flex;flex-direction:column;gap:6px}
.cob-row{display:flex;align-items:center;gap:11px}
.cob-a{flex:0 0 56px;font-family:var(--mono);font-size:var(--fs-label);color:var(--mut);
  text-align:right;font-variant-numeric:tabular-nums}
.cob-t{flex:1;height:18px;background:var(--panel);border:1px solid var(--bd);
  border-radius:4px;overflow:hidden}
.cob-t i{display:block;height:100%;background:var(--dim)}
.cob-v{flex:0 0 34px;font-family:var(--mono);font-size:var(--fs-label);color:var(--tx2);
  font-variant-numeric:tabular-nums}
.cob-pico .cob-t i{background:var(--ac)}
.cob-pico .cob-a,.cob-pico .cob-v{color:var(--tx);font-weight:650}
@media(max-width:520px){.cob-a{flex:0 0 44px}.cob-v{flex:0 0 28px}}

/* ═══ LAS DOS SERIES DE MINERIA en /negocios/ (2026-08-31) ═══
   Van en grilla de dos porque el par ES el mensaje: una sube, la otra baja, y leerlas al lado es lo
   que hace visible que el sector crece sin tomar gente. En movil apilan, que es la unica forma en
   que la comparacion sigue siendo legible. */
.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sm-card{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r-12);padding:15px 16px}
.sm-k{font-size:var(--fs-sub);color:var(--tx2);line-height:1.4;margin-bottom:9px;text-wrap:pretty}
.sm-n{font-family:var(--mono);font-size:26px;font-weight:650;color:var(--white);letter-spacing:-.01em;
  line-height:1.15;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sm-u{font-family:inherit;font-size:var(--fs-label);font-weight:400;color:var(--mut);letter-spacing:0}
.sm-var{font-family:var(--mono);font-size:var(--fs-label);margin:4px 0 8px;letter-spacing:.02em}
.sm-var.ok{color:var(--ver)}.sm-var.bad{color:var(--bad)}
@media(max-width:760px){.sm-grid{grid-template-columns:1fr}}

/* ⭐ AIRE EN LA BIFURCACION DEL HERO (2026-09-12): la linea de instituciones nacia pegada
   al borde del boton (0 px) y el boton nacia pegado al parrafo.
   ⚠️ La especificidad va con `.hero-despegue` delante: `.hero-despegue p{margin:0}` le gana a
   `.hd-bif` a secas. */
.hero-despegue .hd-bif{margin-top:20px}
.hd-bif .btn-s,.hd-bif .btn-p{padding-top:14px;padding-bottom:14px}
.hero-despegue .hd-bif-inst{margin-top:18px}

/* ⭐ BLOQUE ANCHO A DOS COLUMNAS: la conclusion a la izquierda, la evidencia a la derecha
   (2026-09-12, pasada visual del molde 1).
   El problema medido en la portada: 478 y 625 caracteres de prosa ocupando 624 px dentro de una
   caja de 1.284, o sea la mitad derecha vacia leyendose como contenido que falta.
   ⛔ La salida NO es estirar el renglon: la medida de lectura son 63ch y es decision medida del
   usuario (07-sep, `cierre.css`). La salida es que la mitad vacia pase a ser DATO, con su sello. */
.rl2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:start}
/* ⚠️ 42ch y no 32: desde que el marcador dice exactamente que se probo —«ninguna resulto
   incompatible con la fuente oficial correspondiente»— el titular es mas largo, y con 32ch caia a
   cuatro renglones. Sigue por debajo de la medida de lectura: es un titular, no prosa. */
.rl-izq .rl-tit{font-size:19px;line-height:1.35;font-weight:650;color:var(--tx);margin:6px 0 9px;
  max-width:42ch}
.rl-izq .rl-txt{margin:0 0 12px}
.rl-mas{display:inline-block;font-family:var(--mono);font-size:var(--fs-label);margin-top:6px}
.rl-der{border-left:1px solid var(--bd);padding-left:26px}
.rl-der-k{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.rl-der-k2{margin-top:16px;padding-top:14px;border-top:1px solid var(--bd)}
.rl-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 13px;padding:7px 0;
  align-items:baseline}
.rl-d b{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ac);white-space:nowrap}
.rl-d span{font-size:var(--fs-body-sm);color:var(--mut);line-height:1.42}
/* el sello va en la segunda columna, debajo de su glosa: es la procedencia de ESA cifra */
.rl-d .sello{grid-column:2}
/* ⚠️ `rl-mal` NO es "malo": marca el dato que NO acompania a la conclusion, y se distingue por
   TONO (gris en vez de acento), nunca por rojo — un eje en riesgo es un hecho, no una alarma. */
.rl-mal b{color:var(--dim)}
@media(max-width:820px){
  .rl2{grid-template-columns:1fr;gap:18px}
  .rl-der{border-left:0;border-top:1px solid var(--bd);padding-left:0;padding-top:16px}
}

/* ⭐ EL INDICE FINO DE LA PORTADA (2026-09-12). Reemplaza a la barra «IR A» pegada: esa cobraba
   58 px de cromo en todas las pantallas para una pagina que ya tiene menu propio arriba.
   Tiene que leerse como una FILA DE ENLACES, no como una fila de frases: de ahi la flecha, el
   subrayado tenue y la tipografia mono, que es la del resto de la navegacion del sitio. */
.idx{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 13px;margin:26px 0 6px;padding:11px 0;
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.idx-k{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin-right:2px}
.idx a{font-family:var(--mono);font-size:var(--fs-label);color:var(--ac);text-decoration:none;
  border-bottom:1px solid rgba(var(--ac-rgb),.42);padding-bottom:2px}
/* ⚠️ La separacion de la flecha va por `margin`, NO por un espacio dentro del `content`: en CSS
   un espacio despues de un escape hexadecimal lo TERMINA y no se imprime, y ponerlo como `\00a0`
   suma 7 px por enlace — con siete entradas eso alcanza para tirar el indice a un segundo renglon. */
.idx a::before{content:"\2193";margin-right:4px;opacity:.7}
.idx a:hover{border-bottom-color:var(--ac);color:var(--tx)}
@media(max-width:820px){.idx{gap:2px 14px;margin:18px 0 4px;padding:9px 0}}
/* ⭐ EL DISPARADOR DEL TELEFONO, que SOLO existe en la politica «plegable». En computadora no se
   dibuja nunca: la pagina emite UNA sola lista de destinos y cada pantalla la presenta a su manera.
   ⛔ Es HERMANO de `nav.idx`, no su padre, y eso no es una preferencia de marcado: un <details>
   CERRADO oculta a todos sus hijos menos al <summary>, y lo hace el navegador. Envolver el indice
   adentro lo apagaba tambien en computadora (probado el 13-sep y revertido). Con el disparador al
   lado, `+` alcanza a la lista y el interruptor queda en el CSS, sin JS. Es el mismo mecanismo con
   el que ya funciona el menu del sitio (`.mnu-burger:not([open])+.mnu-wrap`). */
.idx-d{display:none}
/* ⭐ EN EL TELEFONO EL INDICE ES UNA TIRA QUE SE DESLIZA DE COSTADO (2026-09-12). A 390 px los
   siete enlaces caian en cinco renglones y median 129 px: un indice que ocupa media pantalla deja
   de ser un indice. En una sola fila miden ~49 px y NO se pierde ninguno — se llega deslizando.
   ⛔ Por eso no se pliega: un indice cerrado deja de decir de que va la pagina, que es lo unico
   que hace. Comprimir, no podar (regla 4.15).
   El degradado del borde derecho es lo que dice que sigue habiendo enlaces; sin el, la fila
   parece terminada. Y el relleno vertical de cada enlace es lo que le da los 44 px al dedo. */
/* ⭐ EL INDICE EN TELEFONO TIENE UNA POLITICA POR MOLDE, no una sola forma (decision del usuario,
   2026-09-13): «compartir componente no obliga a compartir comportamiento». El elemento es el
   mismo; lo que cambia es cuanta navegacion necesita esa pagina, y eso lo decide cada molde.

     data-movil="oculto"     NO se emite en telefono. Es la PORTADA (molde 1, 12-sep): siete
                             destinos sobre una pagina que ya tiene el menu del sitio arriba.
     data-movil="plegable"   «En esta pagina ▾», 46 px cerrado y los destinos en vertical al abrir.
                             Es OPORTUNIDAD (molde 2, 13-sep): nueve destinos sobre una ficha de 15
                             a 26 pantallas, donde sin indice no hay manera de saltar entre bloques.

   ⛔ La tercera forma se probo y perdio: la tira que se desliza de costado deja 2 de 9 destinos a
   la vista y esconde los otros siete detras de 646 px de deslizamiento lateral, un gesto que nadie
   espera en una pagina de contenido. No se re-propone.
   ⛔ Y en la politica «plegable» NO se poda ni un destino: la lista es la misma que en computadora,
   y es la misma del HTML. */
@media(max-width:560px){
  nav.idx[data-movil="oculto"]{display:none}
  .idx-d{display:block;margin:18px 0 4px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
  .idx-d>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    padding:13px 0;font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.09em;
    text-transform:uppercase;color:var(--dim)}
  .idx-d>summary::-webkit-details-marker{display:none}
  /* La flecha va a la DERECHA del rotulo y gira al abrir: es lo unico que anuncia que hay mas.
     ⛔ SE DIBUJA CON BORDES, no con un caracter: la tipografia mono del sitio no tiene el
     triangulo y salia un recuadro vacio. Es la misma flecha que ya usa `.pvr-notas`. */
  .idx-d>summary::after{content:"";width:6px;height:6px;flex:0 0 auto;margin-left:8px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:translateY(-3px) rotate(45deg);transition:transform .16s ease}
  .idx-d>summary{color:var(--ac)}
  .idx-d[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
  /* el disparador cerrado apaga la lista, que es su HERMANA. Cuando esta abierto, la lista se
     dibuja debajo y EMPUJA el contenido: no flota ni tapa. */
  .idx-d:not([open])+.idx{display:none}
  .idx-d[open]+.idx{flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    gap:0;margin:0 0 4px;padding:2px 0 8px;border-top:0}
  /* el rotulo ya lo dice el disparador: repetirlo adentro es eco */
  .idx-d[open]+.idx .idx-k{display:none}
  /* 43 px por destino es lo que corresponde para el dedo (el minimo recomendado son 44): no se
     aprieta para que entren mas. Con nueve destinos abre en 419 px y NO necesita barra propia. */
  .idx a{padding:11px 0;border-bottom:1px solid var(--bd-row,var(--bd))}
  .idx a:last-child{border-bottom:0}
}

/* ⭐ LAS PROVINCIAS SIN PAGINA, PLEGADAS EN UNA LINEA (2026-09-12). Eran cuatro pantallas de
   telefono de filas que solo dicen «proximamente»; el dato no se pierde, se abre con un toque. */
.pvr-off-fold{border-top:1px solid var(--bd-row);margin:0}
.pvr-off-fold>summary{cursor:pointer;padding:13px 14px;font-size:var(--fs-body-sm);color:var(--mut);
  list-style:none}
.pvr-off-fold>summary::-webkit-details-marker{display:none}
.pvr-off-fold>summary::before{content:"+";font-family:var(--mono);margin-right:9px;color:var(--ac)}
.pvr-off-fold[open]>summary::before{content:"\2212"}
.pvr-off-fold>summary b{color:var(--tx)}
.pvr-off-fold>summary span{display:block;font-family:var(--mono);font-size:var(--fs-tag);
  color:var(--dim);margin-top:3px}

/* ⭐ EL HERO DE LA PORTADA, A TODO EL ANCHO (2026-09-12). Con la ficha del autor fuera de la
   portada el hero ya no tiene columna a la derecha: la de la izquierda toma el ancho entero. */
.hero-despegue>.hd-left{flex:1 1 100%;min-width:0}

/* ⭐ EL BLOQUE DEL PRODUCTO de la portada (2026-09-12, pasada visual del molde 1). Dice que es el
   analisis de empresa y manda a `/para-empresas`. Va DESPUES de la evidencia.
   ⛔ VIVE ACA, EN LA PIEL, y no en `cierre.css`: `#producto` es HERMANO de `.cierre-zone`, no hijo.
   Escrito alla y prefijado con `.cierre-zone`, el bloque salia sin una sola regla —sin marco, sin
   relleno y con los dos botones pegados— y ningun control lo vio, porque la clase existia y lo
   unico que fallaba era el ancestro. Lo vio el usuario en pantalla. */
.prod{border:1px solid var(--bd);border-radius:var(--r-12);padding:22px 26px;margin:30px 0 8px;
  background:linear-gradient(180deg,rgba(var(--ac-rgb),.07),transparent 70%)}
.prod-k{font-family:var(--mono);font-size:var(--fs-tag);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);margin-bottom:8px}
.prod-h{font-size:23px;line-height:1.25;margin:0 0 8px;border:0;padding:0;color:var(--tx)}
.prod-p{max-width:62ch;margin:0 0 16px;color:var(--mut)}
/* ⚠️ `gap` NO alcanza si el contenedor no es flex: los dos botones son `<a>` en linea y sin esto
   quedan pegados uno al otro. Es justo lo que pasaba. */
.prod-cta{display:flex;gap:11px;flex-wrap:wrap;margin:0}
/* ⛔ UN BOTON NUNCA ES MAS ANCHO QUE SU PROPIA CAJA. Medido el 13-sep en la portada a 390 px: el
   boton media 359,5 px dentro de un contenedor de 328 y llegaba a x=390,5, o sea que su borde
   derecho quedaba FUERA DE PANTALLA y la pagina se deslizaba 1 px de costado. Un elemento de flex
   con texto de un solo renglon no se achica solo: hay que permitirselo.
   ⚠️ Que el texto quede apretado contra los bordes es sintoma de otra cosa —el rotulo largo de
   hoy—, y se va solo cuando el boton pase a decir «Ver si mi empresa encaja», que mide 217 px.
   ⚠️ Esto NO arregla el desborde de 360 px: ahi lo que se pasa es el hero de la portada
   (359,5 px dentro de 336), y eso es rediseñar un bloque del molde 1, no un ajuste de medidas. */
main .prod-cta>.btn-p{min-width:0;max-width:100%}

/* ⭐ LA PUERTA AL CATALOGO DE NORMAS (2026-09-12). Cierra el bloque de reformas de la portada, que
   desde hoy publica el resumen: destacadas + reparto por materia + esta puerta.
   ⚠️ `max-width:none` porque es una fila de boton, no prosa: la medida de lectura no le aplica. */
.ref-hub{margin:18px 0 0;max-width:none}
@media(max-width:700px){.prod{padding:18px}.prod-h{font-size:19px}}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LA PASADA DE MOVIL DE LA PORTADA (2026-09-12). El diagnostico que la ordena: en 390 px no hay
   un problema conceptual — hay componentes ADAPTADOS del escritorio en vez de disenados para el
   telefono. Lo que sigue no poda contenido: lo comprime.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:620px){

  /* ── M3 · EL ENCABEZADO DE SECCION, EN VERTICAL ────────────────────────────────────────────
     En escritorio es titulo + metadato en una fila y funciona. En 390 px los dos se reparten el
     ancho y quedan DOS COLUMNAS ESTRECHAS: «TABLERO DE CUMPLIMIENTO DEL PROGRAMA» a la izquierda
     y «14 DE ESOS 18 VAN CUMPLIENDO» a la derecha, cada uno partido en cuatro renglones.
     ⛔ La composicion horizontal no se conserva: el metadato baja, y baja mas chico. */
  /* ⛔ `display:block` NO, por la misma razon que en `.ph`: la raya azul de `::before` tiene ancho
     y alto, y en un bloque el navegador se los ignora — el encabezado se quedaba sin su marca.
     Lo que apila el metadato es el `flex-wrap`, no el cambio de display. */
  /* ⛔ Ni `flex` ni `block`: con flex la raya se va a un renglon propio en cuanto el titulo es
     largo, y con block desaparece. En el telefono el encabezado es texto corrido y la raya es un
     `inline-block` delante de la primera palabra — asi acompana al titulo mida lo que mida. */
  h2.sec-h{display:block;width:auto}
  h2.sec-h::before{display:inline-block;vertical-align:middle;margin:0 11px 3px 0}
  h2.sec-h>span{display:block;margin-top:3px;font-size:var(--fs-tag);letter-spacing:.01em;
    line-height:1.45}

  /* ── M2 · LA CABECERA DE UN BLOQUE PLEGABLE ────────────────────────────────────────────────
     Mismo defecto y misma cura: el titulo largo de la cartera y su chip de cifras se disputaban
     el ancho y se rompian los dos («CARTERA RIGI · LOS APROBADOS / Y LOS QUE / ESPERAN /
     RESOLUCION» contra «USD 98.634 / M · 23 / aprobados · 7 / presentados»). */
  /* el triangulo del plegable se alinea con el TITULO, no con el centro del bloque entero: con el
     metadato abajo, «centrado» lo dejaba a la altura del metadato y lejos de lo que abre */
  .sec-fold>summary{align-items:flex-start}
  .sec-fold>summary::before{margin-top:7px}
  .ph{display:block}
  /* ⛔ El titulo NO pasa a `display:block`: su barra azul de acento es un `::before` con ancho y
     alto, y en un elemento de bloque el navegador los IGNORA — la barra desaparecia en el telefono
     y el titulo quedaba flotando detras del triangulo. Sigue siendo flex; lo que se apila es el
     `.ph`, que era el que armaba las dos columnas estrechas. */
  .ph>h2,.ph>h3{display:block}
  .ph>h2::before,.ph>h3::before{display:inline-block;vertical-align:middle;margin:0 9px 3px 0}
  .ph-t{display:block;margin-left:13px}
  .ph-t::before{content:none}
  /* ⛔ SIN CAJA: a todo ancho el recuadro del metadato se lee como un campo de formulario dentro
     de otro bloque. Es una nota, y una nota se distingue por tamano y color, no por borde. */
  .ph>.tag{display:block;margin:5px 0 0 13px;white-space:normal;border:0;padding:0}

  /* ── EL ROTULO QUE LA PROPIA BARRA YA DICE (2026-09-12) ────────────────────────────────────
     La celda de participacion imprime «Participación» en cada una de las 5 filas, al lado de una
     barra con su porcentaje al final. La barra + el % ya dicen que mide; el rotulo es eco.
     ⛔ Los otros tres rotulos de la fila (USD M, Proyectos, Oportunidades) SI se quedan: sin
     encabezado, son lo unico que dice que es cada numero. */
  .pvr-c-bar>.pvr-k2{display:none}

  /* ── M4 · LAS TARJETAS DE PROVINCIA ────────────────────────────────────────────────────────
     ⛔ NO se quita informacion: las cinco provincias siguen diciendo puesto, region, participacion,
     USD, proyectos, oportunidades y sus tres puertas. Lo que sobraba era el ALTO que cada dato se
     llevaba — la fila estaba armada con el aire de una tabla de escritorio.
     ⚠️ Las tres puertas conservan 44 px de alto tactil: eso NO se toca. */
  .pvr-r,.pvr-tf{padding:11px 14px;row-gap:6px}
  .pvr-nm{font-size:var(--fs-body)}
  .pvr-c{font-size:var(--fs-body-sm)}
  .pvr-ps{gap:6px}
  .pvr-p{padding:0 11px;min-height:44px}
  .pvr-lead{padding:9px 14px}
  .pvr-head{padding:13px 14px}
  /* ⭐ LOS TRES CONTEOS, EN UNA FILA. Cada uno se llevaba su propio renglon con su rotulo al lado
     —«USD M 51.265», «PROYECTOS 6», «OPORTUNIDADES 29»—: tres renglones para tres numeros. Pasan a
     tres columnas, rotulo arriba en chico y numero abajo, que es como se lee una ficha.
     ⛔ El nombre, la barra de participacion y las tres puertas siguen a todo el ancho: son lo que
     el lector viene a buscar y lo que tiene que poder tocar. */
  .pvr-r{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px}
  .pvr-nc,.pvr-c-bar,.pvr-c-pta{grid-column:1/-1}
  .pvr-usd,.pvr-r>.pvr-c:not(.pvr-c-bar):not(.pvr-c-pta){display:block;text-align:left}
  .pvr-r>.pvr-c:not(.pvr-c-bar):not(.pvr-c-pta) .pvr-k2{display:block;margin-bottom:1px;
    font-size:var(--fs-tag);letter-spacing:.06em}

  /* ── M5c · LAS CUATRO CIFRAS DE COBERTURA ──────────────────────────────────────────────────
     El 2x2 esta bien y no se cambia. Lo que se llevaba la pantalla entera era el aire: el rotulo
     en mayusculas con mucha separacion entre letras partia en tres renglones. */
  .kpi{padding:12px 13px}
  .kpi .k{letter-spacing:.05em;line-height:1.3}
  .kpi .u{line-height:1.4}

}