/* ⭐ `--w-page` — EL ANCHO DEL SITIO, EN UN SOLO LUGAR. Nacio en `despegue.css` el
   2026-08-27 y se muda aca el 2026-09-18, cuando la piel clara paso a usarlo: `despegue.css`
   lo cargan solo las paginas oscuras, asi que desde alli la piel de gente no lo veia y habria
   que repetir el numero. `tokens.css` la cargan las tres pieles.
   ⚠️ `institucional.css` lo pisa con 980px para las paginas de lectura, y eso sigue igual. */
:root{--w-page:1320px}
/* ============================================================================
   tokens.css — capa de ESTRUCTURA compartida por TODAS las skins del sitio.
   Se carga ANTES de despegue.css (dark) y despegue-gente.css (clara):
       fonts.css  ->  tokens.css  ->  {skin}.css
   ----------------------------------------------------------------------------
   REGLA (no negociable): un valor entra acá SOLO si DEBE ser idéntico entre
   skins (legibilidad, ritmo de espaciado). Lo que difiere por skin a propósito
   — color, sombra, radio de panel — NO va acá: vive en el :root de cada skin.
   ⚠️ El «tamaño base de cuerpo (audiencia)» ESTABA en esta lista y salió el
   2026-08-20 (D1): la oscura iba a 14,5 y la clara a 15, y la decisión del
   usuario —«que el tamaño de proyecto RIGI rija en toda la página»— derogó esa
   divergencia. Hoy las dos van a 15,5, y sigue viviendo en el :root de cada piel
   por herencia del molde, no porque deba diferir. Si no podés escribir el motivo de una
   divergencia en una línea, es deriva (bug), no decisión: unificá acá.
   Cambiar un valor de estructura/legibilidad = editar UN token, no las dos skins.
   ============================================================================ */
:root{
  /* escala tipográfica de texto chico (la banda de legibilidad). Canónico = dark, aprobado. */
  /* Banda subida en 2 pasos (2026-06-21, pedido usuario: la letra de contenido se leia chica)
     y OTRO +0.5 el 2026-07-06 (lectura de las paginas de oficio, mismo pedido: "las letras mas
     pequenas de contenido cuestan, en general, no solo en oficio"). --fs-label (micro-rotulos
     mono uppercase: th/badges/chips/sellos) queda en 11.5 a proposito — es rotulo, no lectura;
     el resto es la banda de CONTENIDO (captions, prosa secundaria, listas, fichas). */
  /* ⭐ TERCER PASO, 2026-08-20 (D1 del visual U2-v2 · decision del usuario: «quiero que el tamaño
     de proyecto RIGI sea lo que rija la pagina en toda la pagina»). La banda entera sube al reparto
     del MODELO —la pagina de proyecto RIGI—, que se leyo con el computed sobre el HTML emitido y no
     del CSS: sus escalones son prosa 16,5 · filas 15 · sub-dato 13 · rotulo de columna 12,5.
     POR QUE SE TOCA EL TOKEN Y NO CADA HOJA: los tokens ya eran IDENTICOS en las 81 paginas; lo que
     cambiaba era cual usaba cada bloque, y por eso la diferencia no se veia leyendo el CSS. Subir la
     banda mueve la masa del texto en las 81 de una vez, con una sola decision auditable. Medido
     antes del cambio, texto por debajo de 14px: modelo 23,6% · nicho 56,4% · P2 68,7% · inversor
     33,9% · gente 27,0% · portada 20,8%.
     ⚠️ --fs-micro se queda en 13: ES el escalon de sub-dato del modelo, no es deriva. ⛔ Su ejemplo
     ERA `.py-li-sub`, y desde el 2026-09-07 ya no lo es: esa clase es PROSA y paso a la sans a 15 px
     (ver `molde.css`). El token sigue gobernando los rotulos y sub-datos que si son dato. */
  /* ⭐ CUARTO PASO, 2026-08-24 (T90 · decision del usuario tras ver los pares lado a lado).
     La banda de arriba gobierna la LECTURA, y por eso el cambio del 20-ago no alcanzo: los
     MICRO-ROTULOS estaban escritos a mano en cada hoja y no los movia ningun token. Medido
     sobre las 370 paginas oscuras: en pantalla habia 13 escalones para 6 declarados, y 7 de
     ellos por debajo del piso (9 · 9,5 · 10 · 10,5 · 11 · 11,5 · 12) = 102.078 caracteres.
     El MISMO rol media 9 en el nicho y 12,5 en Vicuna.
     ⚠️ VICUNA ERA LA REFERENCIA CORRECTA y su rotulo propio YA estaba en 12,5: solo el 2,2%
     de los suyos caia bajo el piso (contra 25% de la portada), y esos 12 venian de bloques
     COMPARTIDOS (.fsrc-l, .cap-k), no del molde de proyecto. La cura no baja a Vicuna: sube
     al resto hasta ella.
     --fs-tag EXISTE PARA NO ROMPER LA FILA DENSA, y lo pidio el usuario: un chip dentro de una
     fila con su dato al lado, subido a 12,5, COMPITE con el dato en vez de acompanarlo. Se
     queda un escalon abajo -- pero DECLARADO, que es la diferencia con el 9px de antes. */
  --fs-tag:11px;       /* chip y valor secundario DENTRO de una fila densa: .gc-tag, .sat-cf, .emp-* */
  /* ⭐ 12,5px hasta el 2026-09-07. Lo subieron DOS lecturas externas independientes que llegaron
     por caminos distintos: la de `/programa/` señalo que era la letra mas chica del sitio, y la de
     `/provincias/` pidio +1/+2px en las capas secundarias de su tabla. Medido antes de tocar: los
     rotulos de columna salian a 13,5px (este token +1 del cuerpo de tabla) y el enlace «sobre que
     se calcula, y que lo limita» a 12,5 — las dos capas mas chicas de la pagina, y en mono, que a
     tamaño chico cuesta mas que una sans. Con 14 quedan en 15 y 14.
     ⛔ El contraste NO era el problema y se midio antes de subirlo: 0 nodos por debajo del umbral
     en seis capas sobre 796 paginas. Lo que se discutia era el tamaño.
     ⚠️ Es el piso de 220 usos: mueve toda la capa de micro-rotulos del sitio a la vez, que es
     justo lo que las dos lecturas pedian. */
  --fs-label:14px;     /* piso: labels mono uppercase, th, badges (.b), .fch, .chip — rotulo del modelo */
  --fs-micro:13px;     /* mono secundario: entsub, foot, fd-cta, sub de stats, cap labels — sub-dato del modelo */
  --fs-sub:14.5px;     /* body chico: .u, .nota, .tend, .qh, of-sec, embudo, piezas */
  --fs-body-sm:15px;   /* .kv, .lrow, .mh-titulo, .ff-desc, .dsr-cap — filas del modelo */
  --fs-body:15.5px;    /* font-size de table, ref-q, cap text, prosa secundaria */
  --fs-body-lg:16.5px; /* .prosa, .sig .tx, .sem-origen, hero-p — prosa del modelo */

  /* espaciado de celda / panel (lo que se desincronizó entre skins) */
  --pad-th:7px 9px;
  --pad-td:10px 9px;
  --pad-panel:16px 18px;

  /* radio chico uniforme (fch, badges, chips) */

  /* ⭐ EL ESTADIO — la pieza que la escala del molde NO cubre (U16 · la tarjeta, 2026-08-16).
     Vicuña redondea con [4·5·6·8·9·10·12·14·18] y hace circulos con `.pyo-n{border-radius:50%}` —
     pero eso es un CIRCULO porque la caja es cuadrada (26x26). No tiene ninguna pastilla de ANCHO
     VARIABLE, que es lo que nosotros si necesitamos: un contador que dice «3» en una provincia y «19»
     en la portada, o un pill de hero que lleva «USD 3.716 M aprobados».
     ⛔ Copiar el 50% sin copiar la caja da una ELIPSE — ya se probo y se revirtio ([[L881]]).
     Por eso el estadio es una EXCEPCION DECLARADA, y se declara UNA vez acá en vez de cuatro veces
     en las hojas. Antes convivian dos idiomas para la misma forma: `20px` (.ref-cat-n .dsr-lore
     .dsr-delta) y `999px` (.hd-split span). Los dos se ven igual mientras la pieza sea baja —el
     navegador clampea el radio a la mitad del alto—, o sea que la diferencia no era estetica: era
     vocabulario. Gana `999px` porque ES la intencion (estadio a cualquier alto), mientras que `20px`
     solo lo parece hasta que la pieza crece. */
  --r-pill:999px;

  /* ⭐ LA ESCALA DE RADIO DE LA PIEL CLARA (U21, 2026-08-28) — un solo lugar donde vive.
     El problema medido: `despegue-gente.css` tenía **26 valores distintos de `border-radius` para
     81 usos** —2·3·4·5·6·7·8·9·10·11·12·13·14·16·18·20·22 px, más 50%, más cuatro formas de 4
     valores—. Con esa dispersión nadie puede elegir bien: la regla nº 27 se escribe copiando el
     número de la regla de al lado, y así se llegó a tener 11, 12, 13 y 14 conviviendo.
     ⛔ ESTOS TOKENS NO CAMBIAN NI UN PIXEL, y es deliberado: cada uno vale EXACTAMENTE el literal
     que reemplaza. Lo que cambia es que ahora la escala es un objeto —se puede leer de un vistazo,
     y una regla nueva elige un PASO en vez de inventar un número—. 66 de los 81 usos ya la usan;
     los de un solo uso y las formas compuestas (`7px 3px 3px 7px`) quedan literales a propósito,
     porque tokenizar un uso único es ruido.
     PRUEBA de que no se movió nada: se expandieron los `var(--r-*)` de vuelta a su valor y el
     archivo resultante es byte a byte el original.
     ⚠️ ACORTAR la escala —decidir que 11 y 12 son el mismo paso— SÍ mueve píxeles en páginas
     publicadas, así que es decisión del usuario y está anotada, con su medición, en
     `tareas-lote-investigacion.md`. */
  /* ESCALA CORTA de 6 pasos (2026-08-28, decision del usuario: «no tengamos 20 cosas
     distintas cuando es lo mismo, es mas facil de mantener»). Los quince valores que
     convivian caen en el paso mas cercano; se cambia el VALOR del token, no quien lo usa,
     asi que ninguna regla de estilo se toco. Movimiento medido: 45 de los 66 usos se
     corren 1 o 2 px, en 77 paginas publicadas. Los pasos son: 2 · 4 · 8 · 12 · 16 · pill. */
  --r-2:2px; --r-4:4px; --r-8:8px; --r-12:12px; --r-16:16px;

  /* ⭐ LOS UNICOS COLORES DE ESTA HOJA, y estan aca porque cumplen la regla de la cabecera al pie
     de la letra: valen IGUAL en las dos pieles. Son dos elementos escritos byte por byte identicos
     en `despegue.css` y `despegue-gente.css` — la firma del autor y el verde de WhatsApp —, asi que
     declararlos en cada `:root` seria justo la duplicacion que este archivo existe para evitar.
     ⚠️ El medidor los daba como «de un solo uso» DOS VECES, una por piel, y por eso no aparecian:
     por piel no se repiten; entre pieles, si (17-ago). */
  --firma-bg1:#1c3a5c;--firma-bg2:#0f2236;--firma-bd:rgba(124,192,255,.3);--firma-tx:#aed4f5;
  /* ⚠️ DOS valores, y no es deriva: `--wa` es el verde que se LEE como texto (#1FAE54,
     oscurecido para contrastar sobre fondo claro) y `--wa-rgb` es el verde de MARCA de
     WhatsApp (#25D366), que sólo se usa como tinte de borde y fondo. La piel clara ya lo
     tenía escrito a mano; la oscura ponía ahí el verde del sello «verificado» (`--ver-rgb`),
     o sea el mismo botón decía dos cosas distintas según la piel. M3 del 2026-08-18. */
  --wa:#1FAE54;--wa-rgb:37,211,102;
}

/* ⭐ FOCO DE TECLADO VISIBLE (2026-09-07) — un anillo, no un borde de 1 px.
   Medido antes: no había ninguna regla de foco en todo el sitio salvo dos que lo APAGAN
   (`.rfh-q:focus` y `.pv-in:focus` ponen `outline:none` y sólo cambian el color del borde), así
   que el que navega con Tab por el buscador y los 20 chips de filtro de la cartera no ve dónde
   está parado. Va en `tokens.css` porque es estructura: el color sale del acento de cada piel.
   ⚠️ `:focus-visible`, no `:focus` — el anillo aparece con teclado y no en cada clic del ratón.
   ⚠️ Y se comprueba ESPERANDO: los chips llevan `transition:.12s` sobre todas las propiedades, así
   que leer el estilo justo después del Tab devuelve el anillo a medio aparecer (0 px) y parece que
   la regla no entró. Con 400 ms de espera se lee 2px solid #5b8cff, que es lo que hay. */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ============================================================================
   HEADER — chrome compartido (2026-07-02). Las MEDIDAS de la barra superior
   (marca + back + chip + langsw + coords) son ÚNICAS entre skins; cada skin
   pone SOLO color/fondo/hover encima (dark cy/ac · gente teal). Marca
   750/17.5px = voto usuario; el resto de valores viene de la piel clara.
   Los var(--bd)/var(--bd2)/etc. resuelven a la paleta de la skin que cargue.
   ============================================================================ */
/* z-index 35 y no 20: la barra del menu de sitio (`.mnu`) es `position:relative` con z-index 30, o sea
   MAS ALTA, asi que al scrollear pasaba POR ENCIMA de esta cabecera pegajosa en vez de por debajo -
   y como la cabecera lleva `backdrop-filter`, el navegador componia el desenfoque con retraso y el
   menu parecia asomar y esconderse. Comprobado forzando el solape: en la franja de la cabecera pintaba
   el menu (2026-09-07). 35 la deja arriba de `.mnu` (30) y del submenu de seccion, y debajo del boton
   de subir (40) y de la `.pnav` flotante del telefono (39), que viven abajo y nunca se cruzan. */
header{position:sticky;top:0;z-index:35;display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;gap:12px;min-height:54px;padding:8px 16px;border-bottom:1px solid var(--bd);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand svg{display:block}
.brand-name{font-weight:750;font-size:17.5px;letter-spacing:-.01em}
/* ⚠️ Un corte de fecha es UNA unidad: el navegador partia «sep-2026» por el guion y quedaba «SEP-»
   arriba y «2026» abajo. La clase la pone el template donde imprime el corte. */
.nowrap{white-space:nowrap}
.brand-tag{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding-left:13px;border-left:1px solid var(--bd2)}
.back{font-family:var(--mono);font-size:var(--fs-micro);text-decoration:none;border:1px solid var(--bd2);padding:6px 11px;border-radius:6px;transition:.13s;white-space:nowrap}
/* en pantallas muy angostas (360px) un back-link largo —ej. el EN "To work and start a business
   (in Spanish)"— desborda el doc; se le permite wrapear en vez de forzar scroll horizontal (lectura fría F8d) */
@media (max-width:400px){.back{white-space:normal}}
.chip{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;padding:4px 10px;border-radius:5px;border:1px solid var(--bd2)}
/* el «›» que separa la seccion de la entrada cuando el rotulo sale del menu (`chip_de_menu`).
   Va mas apagado que las dos palabras a proposito: es puntuacion, no una tercera cosa que leer.
   El `letter-spacing:0` lo saca del rastreo del chip, que a .1em separaba el signo de su hueco. */
.chip .chip-sep{opacity:.5;letter-spacing:0;margin:0 1px}
/* ES/EN va al racimo DERECHO (utilidades: idioma + actualizado), separado de la navegación
   (back/chip/toggle). Si un header no tiene langsw (mapa-datos), coords conserva el empuje. */
.langsw{flex:0 0 auto;display:inline-flex;margin-left:auto;border:1px solid var(--bd2);border-radius:5px;overflow:hidden;font-family:var(--mono);font-size:var(--fs-label);font-weight:700}
.langsw b{padding:5px 9px}
.langsw a{padding:5px 9px;text-decoration:none}
.coords{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label)}
/* T40(a) · el estado de la pagina, delante de la fecha. La fecha sola se leia como vejez
   («hace 87 dias, esto es viejo») cuando lo que dice es CUANDO abrimos la fuente; el estado
   la convierte en la prueba de una afirmacion. Estructura aca, color en cada piel. */
.co-est{font-weight:700}
.langsw+.coords{margin-left:0}
/* conmutador de nichos/oficios — vive en el HEADER sticky (disponible a cualquier scroll).
   La miga visible se descartó (2026-07-03: duplicaba header + H1); el SEO queda en el JSON-LD. */
.swn-d{position:relative;flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-micro)}
.swn-d summary{list-style:none;cursor:pointer;border:1px solid var(--bd2);border-radius:6px;padding:5px 11px;white-space:nowrap;user-select:none;transition:.13s}
.swn-d summary::-webkit-details-marker{display:none}
.swn-m{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:280px;max-width:min(92vw,370px);max-height:min(62vh,480px);overflow:auto;border:1px solid var(--bd2);border-radius:10px;padding:7px}
.swn-g{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 9px 5px;margin-top:5px;border-top:1px solid var(--bd)}
.swn-g:first-child{margin-top:0;border-top:0;padding-top:6px}
/* ⭐ T2 (decision del usuario, 2026-08-29) — LOS RENGLONES DEL DESPLEGABLE SUBEN AL ESCALON DE
   FILAS. Estaban en `--fs-micro` (13 px) por herencia de `.swn-d`, que es correcto para el BOTON
   —«Todos los nichos (21)» es un rotulo— pero no para la lista: son 21 frases de mediana 50 y
   maximo 87 caracteres que se leen para ELEGIR, y `L1493` dice que un rotulo puede
   ser chico y una frase no.
   ⛔ EL MOTIVO ESCRITO PARA DEJARLO EN 13 ERA FALSO, y se midio antes de tocarlo: decia que
   subirlo «lo hace mas alto que la pantalla en movil», y a 13 px la lista mas larga YA medi­a
   791 px dentro de una caja topada en 480 con `overflow:auto` — o sea que ya se desplazaba. A
   15 px mide 852. El costo real es 15,1 -> 13,8 renglones visibles antes de desplazar.
   ⚠️ Sube SOLO `.swn-i`: `.swn-d` (el boton) y `.swn-g` (el rotulo de grupo) se quedan donde
   estan, porque los dos si son rotulos. Toca las 180 paginas que llevan el desplegable. */
.swn-i{display:block;padding:6px 9px;border-radius:6px;text-decoration:none;line-height:1.45;
  font-size:var(--fs-body-sm)}

/* en movil el panel se ancla al VIEWPORT (fixed bajo el header sticky), no al boton: con el summary
   fusionado el boton quedo centro-derecha en la fila 1 y un ancla left/right al boton desborda
   (visto en captura 2026-07-05). max-width none -> usa el ancho util de la pantalla. */
@media(max-width:760px){.swn-m{position:fixed;left:12px;right:12px;top:62px;max-width:none}}
/* fusion chip+boton SOLO movil (decision usuario 2026-07-05): <760px el chip de contexto esta
   oculto y el summary muestra el tipo corto ("NICHO ▾") -> header sticky de 1 fila; desktop
   conserva el label largo explicito. Espejo del patron .back span (icono solo). */
.swn-d .swn-sm{display:none}
@media(max-width:760px){.swn-d .swn-lg{display:none}.swn-d .swn-sm{display:inline}}
/* hides responsive compartidos; lo que se oculta POR CONTENIDO (qué chip pesa
   en cada página) queda en la skin (.chip.am dark / .chip.cy gente).
   El .back CONSERVA su rótulo en móvil (D7 2026-07-15): el "←" pelado no decía a dónde volvía;
   si el header queda justo, el back achica padding en vez de vaciarse. */
@media(max-width:760px){.brand-tag{display:none}.coords{display:none}.back{padding:6px 8px}}
/* ⭐ R8 (decision del usuario, 2026-08-28) — LA CABECERA, MAS BAJA EN EL TELEFONO.
   Medido antes de tocarla, a 390 px: la cabecera se partia en dos filas en **157 paginas** (nicho
   inversor 51, oficio 42, nicho gente 36, ficha de proyecto 28) y ocupaba entre 97 y 146 px en vez
   de los 54 de una fila. Sumado al menu y al indice, lo que hay ANTES del contenido llegaba a
   243 px —el 29% de la pantalla— en la pagina de provincia.
   Se aprieta lo que menos informa, en este orden y por este motivo:
     · el NOMBRE de la marca se va (el logo queda, y sigue siendo el link a la portada);
     · la pildora de vuelta se recorta con puntos suspensivos en vez de envolver — «Neuquen ·
       proveedor» se lee igual truncada, y sigue siendo el camino de vuelta.
   ⛔ NO se pone `flex-wrap:nowrap`, y no es por prudencia: la cabecera de la pagina de PROVINCIA
   lleva SEIS elementos —incluidas las dos puertas a las otras dos caras («Para proveer a los
   proyectos», «Para trabajar y emprender»)— y sin envolver quedarian los seis apretados en 390 px.
   Esas dos puertas si merecen su renglon. */
@media(max-width:560px){
  header{gap:9px}
  /* ⭐ LA MARCA SE ESCONDE SOLO DONDE ESTORBA (2026-09-12). Ocultarla nacio por la cabecera de
     PROVINCIA, que lleva siete elementos —incluidas las dos puertas a las otras caras— y no entra
     en 390 px: medido, alli mostrar «Despegue» la lleva de 96 a 140 px, una fila mas. En la
     PORTADA la cabecera lleva el logo, ES/EN y la fecha, y mostrarla **no cuesta un solo pixel**:
     sigue en 54.
     ⇒ La condicion no es el ancho, es si la cabecera lleva pildora de vuelta. Quien llega por
     primera vez desde un correo no tiene por que reconocer la marca por el simbolo solo.
     ⚠️ `:has()` degrada seguro: un navegador que no lo soporta ignora el selector entero y la
     marca queda oculta — el comportamiento de antes, nunca la cabecera rota. */
  .brand-name{display:none}
  header:not(:has(.back)) .brand-name{display:inline}
  .back{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* ⛔ ENVOLVER GANA A ENCOGER: mientras la cabecera pueda envolver, el navegador manda el ultimo
     elemento a una fila nueva ANTES de achicar a ninguno, asi que truncar la pildora de vuelta no
     alcanzaba por si solo. Medido a 390 px sobre la hoja de nicho: logo 23 + vuelta 181 +
     desplegable 78 + ES/EN 68 + separaciones 27 = 377 contra 374 disponibles. Faltaban TRES pixeles.
     ⚠️ Por eso el `nowrap` se aplica SOLO donde la cabecera lleva el desplegable de seccion —las
     157 paginas de nicho, oficio y ficha de proyecto, que tienen cuatro elementos—; ahi la pildora
     encoge esos 3 px y entra todo en una fila. La cabecera de PROVINCIA lleva seis (incluidas las
     dos puertas a las otras caras) y sigue envolviendo, que es lo correcto.
     ⛔ Y NO ALCANZA CON QUE HAYA DESPLEGABLE: la hoja de nicho de la capa GENTE tiene ademas las
     dos puertas a las otras caras, o sea CINCO elementos, y sin envolver quedaban los cinco
     recortados a la vez («← Catam…», «Para invert…»). Se vio en la medicion de recorte, no en el
     alto: la cabecera decia 54 px y estaba bien, pero cuatro de sus cinco textos estaban cortados.
     Por eso la regla pide desplegable Y ninguna puerta extra. */
  header:has(.swn-d):not(:has(.back.alt)){flex-wrap:nowrap}
  /* ⭐ EL QUE ENCOGE ES EL DESPLEGABLE, NO LA PILDORA DE VUELTA (2026-09-20). La regla de arriba
     nacio con una cuenta que hoy ya no da: se midio «desplegable 78» y le faltaban TRES pixeles,
     asi que dejar encoger la pildora costaba una letra. Hoy el desplegable mide 187 de los 331
     disponibles y el faltante es de 35 a 50 px, que la pildora paga entera: quedaba en 45 px
     cuando su texto pide 86 («← Neuquen») o 101 («← Catamarca»), y se leia «← …».
     ⛔ Medido a 390 px sobre las 143 hojas: 63 con el nombre de su provincia ilegible, en las
     cinco. La pildora es la UNICA salida de la hoja hacia su provincia; el desplegable es un
     salto lateral que se entiende igual truncado. Por eso el orden se invierte. */
  header:has(.swn-d):not(:has(.back.alt)) .back{flex:0 0 auto;max-width:none}
  header:has(.swn-d):not(:has(.back.alt)) .swn-d{min-width:0;flex:0 1 auto}
  header:has(.swn-d):not(:has(.back.alt)) .swn-d>summary{overflow:hidden;text-overflow:ellipsis}
  .back{max-width:52vw}
  /* ⚠️ Se PROBO sacarle el `margin-left:auto` al conmutador ES/EN y se revirtio con la medicion
     delante: en la hoja de nicho no cambiaba nada (ahi lo resuelve el `nowrap` de abajo) y en la
     pagina de PROVINCIA empeoraba — la cabecera pasaba de 96 a 140 px, porque sin el margen las dos
     puertas a las otras caras dejaban de compartir renglon con el conmutador. */
  /* ⛔ Y LO QUE DE VERDAD SOBRABA ERA UNA PALABRA REPETIDA, que aparecio al mirar la captura:
     en la hoja de nicho y en la de oficio el chip de seccion dice «NICHO» (o «EMPRENDER») y el
     desplegable que va JUSTO AL LADO dice lo mismo otra vez, con su flecha. Dos veces la misma
     palabra, una al lado de la otra, en 129 paginas. Se oculta el chip suelto — que solo rotula—
     y se conserva el desplegable, que ademas navega.
     ⚠️ Solo donde hay desplegable: en la pagina de provincia el chip dice «PARA INVERTIR ·
     NEUQUEN», no lo repite nadie, y se queda. Por eso el selector es `:has(+ .swn-d)` y no `.chip`. */
  .chip:has(+.swn-d){display:none}
  /* ⭐ EL MISMO CRITERIO, PARA EL ROTULO LARGO QUE VIENE DEL MENU (2026-09-20). La regla de arriba
     saca el chip cuando el desplegable repite su palabra. Falta el caso sin desplegable: dos
     paginas emiten un rotulo de recorrido —«Invertir › Quien ya esta operando», «Lo que
     verificamos»— al lado de una pildora que ya dice de donde venis, y el titulo de la pagina lo
     vuelve a decir una linea mas abajo.
     ⛔ Medido a 390 px sobre las 491 paginas del sitio: son las DOS unicas que no miden 54 px de
     cabecera. `negocios/empresas` llega a 137 (tres filas: el rotulo pide 346 de los 358 que hay,
     asi que el conmutador de idioma se va a una fila propia) y `programa/verificado` a 96 (dos).
     ⚠️ El selector pide pildora Y que el chip no sea el unico rotulo: un hub como `/negocios/` no
     lleva pildora y conserva su chip corto, que ahi es lo unico que ubica al lector. */
  header:has(>.back)>.chip{display:none}
}

/* .pp — PARRAFO de la prosa de data/ que emite `prosa()` (2026-07-29). Va como <span> y no <p>
   porque el llamador ya suele envolver en <p class="af-p"> y un <p> anidado es HTML invalido...
   pero un <span> sin regla es INLINE: los 278 spans que el sitio emitia en 16 paginas se veian
   pegados uno atras del otro y el muro de un solo parrafo que el arreglo venia a partir seguia
   intacto (medido el 2026-07-29: 0 reglas `.pp` en el proyecto). Es estructura/ritmo de lectura,
   identico en las tres skins -> vive aca. Margen en `em` para que siga al tamaño de cada bloque. */
.pp{display:block}
.pp+.pp{margin-top:.72em}

/* .conf-nota — la GLOSA que acota un badge de confianza inline: `[estim] el deflactado` dice QUE
   exactamente esta estimado. Sin regla la acotacion se lee como parte de la frase y el sello acotado
   —que es buena practica del proyecto— pierde su marca.
   Vivia en nicho.css, o sea que solo le llegaba a las 103 paginas de nicho; la emiten TAMBIEN las 12
   paginas oscuras de las 23 (90 inst) y 27 de piel clara (68 inst): 158 instancias en 39 paginas
   quedaban sin estilo, y `lint_clases_css` daba 0 porque pregunta «existe la regla?», nunca «le llega
   a ESTA pagina?» ([[L869]]; para lo segundo, u16_alcance.py).
   Entra aca y no en molde.css porque molde.css es la piel OSCURA: las 27 claras seguirian sin ella.
   Cumple la regla de la cabecera —lo identico entre skins es la RELACION (atenuado + 8% mas chico);
   el color concreto lo pone el `--dim` de cada skin, que las dos definen. Mismo caso que `.pp`. */
.conf-nota{color:var(--dim);font-size:.92em}
/* En el texto corrido la etiqueta del sello es el enlace a su fuente (el nombre va en el rotulo). */
.conf-lnk{text-decoration:none}
.conf-lnk:hover .b, .conf-lnk:focus-visible .b{text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   ⭐ LO QUE LAS DOS PIELES ESCRIBIAN IGUAL — fusionado aca el 2026-08-16 (U16·U3).
   Estas reglas estaban DUPLICADAS byte por byte en `despegue.css` y `despegue-gente.css`.
   No son piel: son el vocabulario compartido (badges de confianza, el sello, la barra de
   compartir, la nav de pagina, la base de tabla y los resets). Las dos pieles ya cargan esta
   hoja (`CSS_BASE`), asi que escribirlas aca las escribe UNA vez.
   ⛔ Lo que NO subio: los selectores que las dos hojas comparten con CUERPO DISTINTO
   (`:root` `body` `header` `.panel` `.disc` `.back` `.chip`…). Eso no es duplicacion, es la
   frontera entre una piel oscura y una clara, y unificarla es derivar la paleta clara —
   decision PARQUEADA por el usuario.
   ⚠️ Al agregar una regla aca: tiene que valer para las DOS pieles. Si necesita un color que
   cambia entre pieles, va por `var(--…)`, no con el valor escrito.
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
.share{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:2px 0 20px}
.share-l{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.share-b{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px;border:1px solid var(--bd2);background:var(--panel2);color:var(--mut);cursor:pointer;text-decoration:none;transition:.13s;position:relative}
.share-b:hover{color:var(--ac);border-color:rgba(var(--ac-rgb),.5);background:rgba(var(--ac-rgb),.08)}
/* ⛔ (2026-09-07) EL BOTON DE COMPARTIR NATIVO SE VEIA EN TODAS LAS PAGINAS Y NO HACIA NADA.
   Sale del render con `hidden` y el JS solo lo revela donde existe `navigator.share` (telefono);
   en escritorio ni siquiera le ata el clic. Pero `.share-b{display:inline-grid}` le gana a la
   regla `[hidden]{display:none}` del navegador — misma especificidad, y la del navegador va
   antes—, asi que el boton se pintaba igual en las 785 paginas: un control muerto al lado de
   los cuatro que si funcionan. Medido con el navegador: `navigator.share` undefined, el atributo
   `hidden` puesto, y el boton visible.
   ⚠️ Es el MISMO defecto que `.rfh-mas` (el boton «216 normas mas» de `/reformas/`): toda clase
   que declare `display` y se emita con `hidden` necesita su regla. */
.share-b[hidden]{display:none}
.share-b.li:hover{color:#0A66C2;border-color:rgba(10,102,194,.55);background:rgba(10,102,194,.1)}
.share-b.cp.ok::after{content:"\00a1copiado!";position:absolute;bottom:calc(100% + 6px);right:0;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-micro);color:var(--ver);background:var(--panel2);border:1px solid var(--bd2);border-radius:6px;padding:3px 8px;z-index:5}
.pnav-wrap{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:11px;padding:0 18px}
.pnav-in{flex:1;min-width:0;display:flex;gap:6px;padding:8px 0;overflow-x:auto;scrollbar-width:none}
.pnav-in::-webkit-scrollbar{display:none}
/* ══ P13 (sesion 8) · EL INDICADOR DE DESBORDE DE LA BARRA-INDICE ══════════════════════════════
   Medido con el navegador, no leyendo el CSS: en `/negocios/` la barra tiene **8 chips y a 1280 px
   se ven 5** — `scrollWidth` 1471 contra `clientWidth` 1175. La barra scrollea, pero la barra de
   scroll esta ocultada A PROPOSITO en las dos lineas de arriba, asi que **nada le dice al lector
   que hay tres destinos mas**. Tres secciones de la pagina quedan invisibles para quien no arrastra
   por instinto.

   ⛔ NO se revierte `scrollbar-width:none`: la barra nativa de Windows es gruesa, opaca y roba
   altura a un elemento sticky que ya compite con el encabezado.

   LA TECNICA, y por que esta y no un JS: son **dos pares de degradados superpuestos**. El par
   `local` viaja CON el contenido y tapa al par `scroll`, que queda pegado al borde del contenedor.
   Cuando no hay desborde, el tapado cubre al de abajo y no se ve nada; cuando lo hay, el `local`
   se corre y el `scroll` asoma. Es decir: **la senal aparece sola solo cuando hay algo escondido**,
   sin una linea de JavaScript y sin medir nada. Se apaga sola el dia que los chips entren.
   ⚠️ Necesita saber el fondo del contenedor, y **cada piel tiene el suyo** (`#101623` en la oscura,
   `var(--card)` en la clara). Por eso el color no vive aca: cada piel declara `--pnav-bg` sobre su
   propia `.pnav`, y esta regla —que es la MISMA forma para las dos— lo consume. */
.pnav-in{
  background:
    linear-gradient(to right, var(--pnav-bg, transparent) 42%, rgba(0,0,0,0)) left  / 30px 100% no-repeat local,
    linear-gradient(to left,  var(--pnav-bg, transparent) 42%, rgba(0,0,0,0)) right / 30px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(var(--ac-rgb),.42), rgba(0,0,0,0)) left  / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--ac-rgb),.42), rgba(0,0,0,0)) right / 15px 100% no-repeat scroll;
}
/* ⛔ EL `[href]` NO ES ADORNO Y NO SE SIMPLIFICA (2026-08-25, R1 del recorrido de los 24 moldes).
   Sin el, este selector es `.pnav a.on` — especificidad (0,2,1), la MISMA que
   `.pnav-in a[href]{color:var(--ac)}` de la L403, que va DESPUES y por eso ganaba: el chip activo
   quedaba con el texto del mismo color que su fondo. Medido: **ratio de contraste 1,00** en 121 de
   las 191 paginas con indice — el rotulo no se lee poco, NO SE VE. Es el defecto que el usuario
   describio como «se pone todo azul y no puedes ver mas donde estabas».
   Con `[href]` la especificidad sube a (0,3,1) y la regla de estado gana sin depender del orden.
   ⚠️ Ningun lint del repo mira cascada: `contraste.py` mide contra el fondo EFECTIVO de la pagina y
   este chip pinta el SUYO, en un estado que solo existe al scrollear. Ver L1594. */
.pnav a[href].on{color:var(--on-ac);background:var(--ac);border-color:var(--ac);font-weight:600}

/* ===== R4 · EL INDICE DE PAGINA, DESPLEGABLE EN TELEFONO (decision del usuario, 2026-08-28) =====
   Medido antes de construirlo, con el navegador a 390 px: la cinta mostraba **1 chip de 10** en el
   nicho de gente, 2 de 9 en el de inversor y 3 de 11 en la ficha de oficio -> **209 paginas** donde
   las secciones restantes no existen para el lector. El degradado de los bordes (arriba) ya estaba
   y sigue: avisa de que hay mas, pero no lo muestra.
   ⭐ MISMO MARKUP EN LAS DOS MEDIDAS: lo unico que cambia es este CSS, asi que el arbol ES y el EN
   no pueden divergir por medida (que es lo que compara `lint_paridad_en`).
   ⛔ El panel es HERMANO del boton: un <details> cerrado oculta a sus hijos y eso lo hace el
   navegador, no el layout. Es la misma leccion que pago el menu del sitio ([[L1203]]).
   T100 · el SEGUNDO NIVEL: la ficha de proyecto son 31 secciones con nombre y 63 pantallas de
   telefono con un indice de 5 grupos. En escritorio la fila queda igual (`display:contents` sobre
   el envoltorio, `.pnav-sub` oculto); con el panel abierto, cada grupo lista sus secciones. */
.pnav-drop{display:none}
.pnav-g{display:contents}
.pnav-sub{display:none}

/* ⛔ EL BOTON DE LA CABECERA «O2» NO EXISTE ARRIBA DE 860 px, Y ESTO NO ES UN DETALLE DE ESTILO.
   La politica O2 es de TELEFONO: el boton se mueve del menu a la barra pegada porque el menu no
   esta pegado y ahi abajo nunca llegaba a estar en pantalla. En computadora el menu SI se ve, asi
   que el boton no hace falta — y todas sus reglas viven adentro del `@media` de abajo.
   Sin esta linea el enlace sale al HTML SIN NINGUNA REGLA: a 1366 se dibujaba como texto suelto
   de 135x50 px, partido en dos renglones, empujando el menu y tapando el `ES|EN`. Medido el
   2026-09-13 sobre las 126 paginas del molde 2 — y estaba igual en el prototipo, porque la pasada
   visual midio de 340 a 860 px y nadie lo abrio en computadora. */
header .mnu-cta-h{display:none}

@media(max-width:860px){
  .pnav-drop{display:block}
  /* el panel se oculta desde el BOTON, que es su hermano: `+` alcanza al elemento siguiente */
  .pnav-drop:not([open])+.pnav-wrap{display:none}
  .pnav-drop>summary{display:flex;align-items:center;gap:8px;padding:11px 18px;cursor:pointer;
    list-style:none;font-family:var(--mono);font-size:var(--fs-label);font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ac);user-select:none}
  .pnav-drop>summary::-webkit-details-marker{display:none}
  .pnav-bt::before{content:"";width:14px;height:2px;border-radius:2px;background:currentColor;
    display:inline-block;vertical-align:middle;margin-right:7px}
  /* el chevron rota al abrir: es la senal de «esto despliega» */
  .pnav-c{width:6px;height:6px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .15s;opacity:.8}
  .pnav-drop[open] .pnav-c{transform:rotate(-135deg) translate(-2px,-2px)}
  /* la cinta deja de ser una cinta: pasa a ser la lista completa, apilada y a todo el ancho.
     ⛔ LOS SELECTORES VAN CALIFICADOS CON `.pnav` A PROPOSITO, y esto costo una vuelta: este
     archivo se carga ANTES que la hoja de cada piel, y las dos pieles vuelven a declarar
     `.pnav-lbl` y `.pnav a` con la MISMA especificidad. A igualdad de especificidad gana la que
     va despues, o sea la piel — asi que `.pnav-lbl{display:none}` no ocultaba nada y el rotulo
     «IR A» seguia comiendose 68 px a la izquierda de la lista desplegada. Se vio en la captura del
     panel abierto, no leyendo el CSS. Con `.pnav` delante la regla sube un escalon y gana. */
  .pnav .pnav-wrap{padding:0;border-top:1px solid var(--bd);display:block}
  .pnav .pnav-lbl{display:none}
  .pnav .pnav-in{flex-direction:column;align-items:stretch;gap:0;padding:2px 0 6px;
    overflow-x:visible;background:none}
  .pnav .pnav-in a{white-space:normal;text-align:left;border:0;border-radius:0;background:none;
    border-left:2px solid transparent;padding:11px 18px;font-weight:600}
  .pnav .pnav-in a[href].on{background:none;border-left-color:var(--ac);color:var(--ac)}
  .pnav .pnav-g{display:block}
  .pnav .pnav-sub{display:flex;flex-direction:column;align-items:stretch}

  /* ⭐ Q10 (decision del usuario, 2026-09-03) — EL INDICE SALE DE ARRIBA Y VUELVE COMO BOTON AL PIE.
     Lo que se midio antes de tocar, en un telefono de 390 px: la pagina abria con CUATRO franjas
     apiladas —marca, menu, la cinta que se desplaza y el indice— y 177 px antes del contenido. Tres
     de las cuatro se parecen entre si y en 6 paginas usan las mismas palabras haciendo cosas
     distintas. Sacando el indice quedan 3 franjas y 132 px.
     **Por que al pie y no plegado adentro del menu**, que era la otra opcion dibujada: el menu del
     sitio te lleva a OTRA pagina y el indice te mueve DENTRO de la que estas. Juntarlos en una sola
     puerta las vuelve a confundir; separarlos de verdad las distingue, y ademas deja el indice a
     mano cuando de verdad se usa, que es leyendo — no antes de empezar.
     ⛔ `nav.pnav` y no `.pnav`: las dos pieles vuelven a declarar `.pnav` con su fondo y su sombra
     de barra, van DESPUES de este archivo y a igual especificidad ganan ellas. Sumar el elemento
     sube un escalon. Es la misma trampa que documenta el bloque de arriba.
     ⛔ Va a la IZQUIERDA porque `.totop` («subir») ya vive abajo a la derecha con z-index 40. */
  nav.pnav{position:fixed;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    left:12px;right:auto;width:auto;max-width:calc(100vw - 24px);z-index:39;
    background:none;border:0;box-shadow:none;transition:opacity .2s}
  /* 2026-09-08: mientras el hero esta en pantalla, el boton no pisa sus textos ni sus dos botones
     comerciales (la clase la pone el JS de la nav con un IntersectionObserver).
     ⭐ 2026-09-16: vale tambien para la FICHA DE PROYECTO (`.page.proy .pyh`), donde el boton
     tapaba el valor de produccion en la primera pantalla. */
  nav.pnav.pnav-hero{opacity:0;pointer-events:none}
  nav.pnav .pnav-drop>summary{border:1px solid var(--bd2);border-radius:22px;padding:11px 17px;
    background:var(--pnav-bg);box-shadow:0 8px 22px -8px rgba(0,0,0,.65)}
  /* el panel se abre HACIA ARRIBA: el boton esta al pie, asi que crecer para abajo lo sacaria de
     la pantalla. Y se le pone tope de alto porque el indice mas largo del sitio tiene 25 entradas. */
  nav.pnav .pnav-drop[open]+.pnav-wrap{position:absolute;bottom:calc(100% + 9px);left:0;
    min-width:min(292px,calc(100vw - 24px));max-height:min(62vh,430px);overflow-y:auto;
    background:var(--pnav-bg);border:1px solid var(--bd2);border-radius:14px;
    box-shadow:0 14px 34px -10px rgba(0,0,0,.7)}
  .pnav .pnav-sub .pnav-s{padding:9px 18px 9px 36px;font-weight:400;opacity:.82}
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
/* ⭐ EN EL TELEFONO PESA MENOS (2026-09-12). Es una accion auxiliar y se estaba superponiendo a
   botones, controles y texto en casi todas las pantallas. Mas chico, mas pegado a la esquina y
   translucido: sigue estando sin disputarle la vista a lo que el lector vino a leer.
   ⚠️ 40 px es el minimo tactil comodo y no se baja de ahi. */
@media(max-width:620px){
  .totop{width:40px;height:40px;right:10px;bottom:10px}
  .totop.show{opacity:.7}
  .totop.show:active,.totop.show:focus-visible{opacity:1}
}
summary{min-height:24px}
img.firma-av{object-fit:cover}

/* ⭐ LA FIRMA — una sola forma en las DOS pieles (decisión del usuario 2026-08-17, mirando la maqueta
   del Hero A: «la columna derecha… los puntos separados en bullets, lo quiero en todos»). Antes era
   una FILA (foto | texto) con las credenciales en un párrafo corrido separadas por «·»; ahora la foto
   va arriba y cada credencial es una línea con su filo.
   Vive acá y no en cada piel porque es ESTRUCTURA: la relación entre foto, nombre y lista es idéntica
   en la oscura y en la clara. El color lo pone el `--bd` / `--dim` de cada una.
   Alcance: las 114 páginas con `hd-firma` + las de piel clara con `firma-gente`. */
.firma{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.firma-cuerpo{width:100%;min-width:0}
/* el tope de ancho no es estético: la firma vive en una columna de 340 px (hero) y en una caja de
   ~990 px (nicho, proyecto, gente). Sin tope, en la caja ancha el filo de cada credencial cruza los
   990 px enteros para una línea de 40 caracteres, y la lista se lee como una tabla vacía. */
.firma-creds{list-style:none;margin:9px 0 0;padding:0;max-width:640px}
/* La firma COMPACTA es autoría —quién lo analizó y dónde está el método—, no un currículum: su
   lista de credenciales no se muestra en ninguna página. Las credenciales siguen enteras en /autor
   y en el JSON-LD. */
.firma-compacta .firma-creds{display:none}
/* Y dentro del cierre, la firma compacta se lee en FILA: foto a la izquierda, crédito al lado, como
   en el resto del sitio. Sin esto queda pegada a la derecha, con la foto suelta y centrada arriba y
   el nombre partido en una columna angosta. En teléfono se deja apilada, que ahí ya se ve bien. */
.cierre-zone > .hd-firma.firma-compacta{max-width:none;margin:26px 0 0;flex:none}
@media(min-width:861px){
 .cierre-zone > .hd-firma.firma-compacta{flex-direction:row;align-items:center;gap:18px}
 .cierre-zone > .hd-firma.firma-compacta > .firma-av{flex:0 0 auto;margin:0}
 .cierre-zone > .hd-firma.firma-compacta > .firma-cuerpo{display:flex;align-items:baseline;
  flex-wrap:wrap;gap:4px 16px;text-align:left}
}
.firma-creds li{font-family:var(--mono);font-size:var(--fs-body);line-height:1.5;letter-spacing:.02em;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--bd);text-wrap:pretty}
.firma-creds li:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}

/* ⭐ T24 (decision del usuario, 2026-08-28) — LA FIRMA EN UNA LINEA. Las cuatro credenciales salian
   enteras en 537 paginas; ahora sale el nombre con su cara y UN link que las prueba. Las completas
   viven en `/autor/ignacio-aredez.html` (con emisor y link de verificacion) y en el `hasCredential`
   del JSON-LD, que es lo que leen Google y las LLM: no se pierde ninguna senal de autoridad.
   ⚠️ CORREGIDO 2026-08-30 — esta linea decia «`.firma-creds` se conserva a proposito: la usa la
   pagina del autor», y es FALSO: medido sobre los 391 HTML emitidos, la clase no sale en ninguno,
   `/autor/ignacio-aredez.html` incluida. Quedo huerfana el mismo dia de T24. Se conserva la regla
   porque `pipeline/revision/contraste.py` la lleva en su `SEL_DEFAULT` y porque la pagina del autor
   es su destino natural si alguna vez publica la lista; lo que NO se conserva es la afirmacion. */
.firma-1l{align-items:center}

/* ⭐ Q9 (decision del usuario, 2026-09-03) — LA TARJETA DEJA DE SER ANGOSTA Y ALTA DONDE HAY ANCHO.
   Textual suyo: «angosta, alta y deja un espacio vacio a la derecha». Medido antes de tocar nada:
   en la caja de un nicho la tarjeta ocupa 736 px y deja 526 px VACIOS a su derecha, con las cuatro
   credenciales apiladas una debajo de otra (291 px de alto); en la columna del hero mide 340x358.
   ⛔ NO se cambia la forma de la columna angosta: ahi no hay ancho que aprovechar, y esa forma la
   eligio el usuario el 2026-08-17. Lo que cambia es SOLO el caso ancho.
   Se usa una CONSULTA DE CONTENEDOR y no una de ventana a proposito: la misma tarjeta vive en una
   columna de 340 px y en una caja de ~990 px DENTRO DE LA MISMA PAGINA, asi que el ancho de la
   ventana no distingue los dos casos — el del contenedor si. Sigue siendo UNA sola forma en las dos
   pieles, que es la regla: lo que cambia es como se acomoda, no que se muestra. */
/* ⛔ EL CONTENEDOR ES `.firma-cuerpo`, NO `.firma`, Y LA DIFERENCIA NO ES DE ESTILO: un elemento
   NO puede responder a una consulta sobre si mismo. Con `container-type` en `.firma` la regla de
   abajo no se aplicaba nunca —lo vi en la captura: la foto quedaba suelta y centrada arriba y el
   ultimo filo sin cerrar—. `.firma-cuerpo` es el padre de la lista, asi que si la gobierna. */
.firma-cuerpo{container-type:inline-size}
@container (min-width:560px){
  /* REJILLA que se reparte sola, no un numero fijo de columnas: la tarjeta vive en cajas de ancho
     muy distinto (una columna de 340 px en el hero, 1.244 en el cuerpo de una pagina) y un numero
     fijo deja el mismo filo vacio que el tope de ancho venia a tapar. Con `auto-fit` entran las 4
     credenciales en una linea cuando hay ancho, 2 o 3 en medio y 1 en la columna angosta — y en
     los tres casos el filo llega hasta donde llega el texto. */
  .firma-creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    column-gap:26px;row-gap:2px;max-width:none;margin-top:11px}
  /* en rejilla, el ultimo de la lista ya no es el ultimo de su columna: sin esto una columna
     termina sin filo y las otras con el, que se lee como un error de alineacion. */
  .firma-creds li,.firma-creds li:last-child{padding-bottom:8px;margin-bottom:0;
    border-bottom:1px solid var(--bd)}
}
/* ⛔ ACA VIVIA `.page>.hd-firma.firma-1l`, que ponia la foto al costado con `align-items:flex-start`
   en «el caso ancho». Se saca porque PELEABA contra la unica forma de la firma: con tres clases le
   ganaba en peso a `.firma-autoria.firma-1l`, y el resultado eran dos tarjetas distintas otra vez —
   3 px mas alta en escritorio, y en telefono en fila donde el canon va apilado (medido: 131 px
   contra 160). La forma la gobierna `.firma-autoria`, y nada mas. */
.firma-mas{display:inline-block;margin-top:3px;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.03em;color:var(--ac);text-decoration:none}
.firma-mas:hover{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   ⭐ LA FIRMA COMO AUTORÍA — una sola regla para los tres moldes que la usan así (2026-09-16).
   La forma la eligió el usuario en la hoja de oportunidad y pidió replicarla: nombre, rol y enlace
   en una franja de un renglón, con la foto al costado, y sin la lista de credenciales.
   ⛔ LO QUE ESTO REEMPLAZA, y es el motivo de existir: la misma decisión estaba escrita TRES VECES
   —`nicho.css` para `data-tipo="oportunidad"`, `nicho.css` para `data-tipo="proyecto"` y
   `despegue.css` para el aviso de norma—, puesta por tres pasadas distintas. El componente ya era
   uno solo (`firma_analista`); lo que estaba partido era su forma, así que un arreglo en una copia
   no llegaba a las otras dos.
   ⇒ Cuelga de `.firma-autoria`, que emite `firma_analista(compacta=True)`: la política viaja con la
   decisión que la causa, no con el molde ni con el contenedor.
   ⚠️ En teléfono NO se toca: ahí la tarjeta con la foto arriba ya se ve bien, y así estaba en la
   hoja de oportunidad.
   ⚠️ No se pierde ninguna señal de autoridad: las credenciales siguen en `/autor/ignacio-aredez`
   y en el `hasCredential` del JSON-LD, que es lo que leen Google y las LLM.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Doble clase y no `.firma-autoria` a secas: `.hd-firma` (despegue.css) declara
   `max-width:min(100%,46rem)` con la misma especificidad y se carga después, así que ganaba y la
   franja quedaba en 736 px — con el enlace cayendo a un segundo renglón. Es la razón por la que el
   canon de `nicho.css` colgaba de `body[data-tipo=…] .cierre-zone > …`: no era gusto, era peso. */
.firma.firma-autoria{max-width:none;margin-left:0;flex:none;margin-top:26px}
.firma-autoria .firma-creds{display:none}
/* ⚠️ 12,5 px LITERALES, no `--fs-sub`: es el valor que tenía el canon en `nicho.css`, y al pasarlo
   al token la franja crecía 12 px en la hoja de oportunidad — o sea que unificar movía justo el
   molde que se estaba copiando. */
/* ⚠️ `--firma-rol-tx` y no `--dim`: `--tx3` no esta declarado en ninguna hoja —siempre caia al
   fallback— y `--dim` vale distinto adentro y afuera del cierre, asi que el mismo renglón salia con
   dos grises según dónde estuviera la tarjeta. Cada piel declara el suyo, una vez. */
.firma-autoria .pp-firma-r{font:400 12.5px/1.6 var(--mono,"IBM Plex Mono",monospace);
  color:var(--firma-rol-tx,var(--dim));margin:2px 0 0}
@media(min-width:861px){
  .firma-autoria.firma-1l{flex-direction:row;align-items:center;gap:18px}
  .firma-autoria.firma-1l>.firma-av{flex:0 0 auto;margin:0}
  .firma-autoria.firma-1l>.firma-cuerpo{display:flex;align-items:baseline;flex-wrap:wrap;
    gap:4px 16px;text-align:left}
}

.panel+.sec-h{margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
th{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:left;padding:var(--pad-th);border-bottom:1px solid var(--bd2)}
td.r,th.r{text-align:right}
.sub{color:var(--dim);font-size:var(--fs-label)}
/* ⭐ 2026-09-17 · en el TELEFONO este subtexto es prosa de lectura: sale dentro de las celdas de las
   tablas apiladas, con frases largas, y a 15 px queda por debajo del piso del sitio. En computadora
   se queda como esta: ahi acompaña a una cifra y no se lee corrido. */
@media(max-width:640px){td .sub,td.sub{font-size:var(--fs-body)}}

.sello{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-label);
  color:var(--dim);text-decoration:none;vertical-align:middle;white-space:nowrap;line-height:1.3;
  border-radius:var(--r-4);padding:1px 4px;margin-left:3px;transition:background .12s,color .12s}
.se-c{display:inline-flex;align-items:center;gap:4px;letter-spacing:.04em;text-transform:uppercase}
.se-c::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.se-c.ver{color:var(--ver)}
.se-c.pro{color:var(--pro)}
.se-c.est{color:var(--est)}
.se-c.tes{color:var(--tes)}
/* el 5º sello, subido acá el 2026-08-18 (A8(b)): vivía duplicado en las DOS pieles con la misma
   forma (`color:var(--sin)`), y `--sin` ya está declarada en las dos con el valor que le toca a
   cada una (oscura `#FF8A8A`, clara `#B3261E`). Refactor de estructura, CERO píxel — verificado
   con `getComputedStyle` en 8 páginas de las dos pieles, antes y después.
   ⛔ `.se-c.neutral` y `.b.neutral` NO subieron y no deben: usan tokens DISTINTOS por piel
   (`--dim` en la oscura, `--sec` en la clara / `--tes` vs `--sec`), así que su forma no es la
   misma y unificarlas sí movería color. */
.se-c.sin{color:var(--sin)}
.se-c.neutral::before{display:none}
.se-sep{color:var(--bd2)}
.se-f{color:var(--dim)}
.b{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;
  border:0;background:none;padding:0;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.b::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.b.ver{color:var(--ver)}
.b.pro{color:var(--pro)}
.b.est{color:var(--est)}
.b.tes{color:var(--tes);letter-spacing:.06em}
.b.sin{color:var(--sin)}   /* el 5º sello, subido acá el 2026-08-18 (A8(b)) — ver la nota de `.se-c.sin` */
/* ⛔ EL PUNTO ES LA MARCA DEL SELLO, y sólo el sello lo lleva (T142(b), 2026-08-24).
   `ap` / `pr` / `an` son ESTADO DE UNA NORMA (vigente · en ejecución · en trámite), no confianza de
   un dato — pero comparten regla, hue Y forma con `ver` / `pro` / `est`. Medido sobre las 168 fichas
   de reforma: **151 `● VIGENTE` contra 13 `● VERIF`**, idénticos, y en el mismo fold que la leyenda
   que enseña que ese verde significa «verificado». Quitarles el punto los separa **sin mover un
   hue**, que es la mitigación barata: la fusión de hue con `T99` está sin aplicar a propósito.
   El precedente es la línea de abajo — `.b.neutral` ya se resolvió así el 2026-08-18. */
.b.ap::before,.b.pr::before,.b.an::before{display:none}
/* ⭐ D5 (sesion 6, 2026-08-26) — EL ESTADO DE UNA NORMA DEJA DE TENER LA FORMA DE UN SELLO.
   Quitarles el punto (arriba, T142(b)) los separo a medias: medido con `getComputedStyle` sobre el
   catalogo, el chip `vigente` y el sello `verif` seguian siendo **el mismo `rgb(53,208,127)`, la
   misma familia y el mismo cuerpo de 12,5 px** — lo unico distinto era la palabra. Y conviven en
   la misma pantalla, a ~250 px, con la leyenda que le ensena al lector que ese verde significa
   «verificado». Le ensenamos el codigo y despues lo usamos para otra cosa.
   ⛔ NO se toca un solo color del sistema de sellos (eso es T99 y es decision del usuario): se
   toca la FORMA, que es lo que ya distingue a `.rfp-cat` de un sello en la misma ficha. La caja
   con borde dice «esto es una etiqueta de estado», el punto sigue diciendo «esto es un sello». */
.b.ap,.b.pr,.b.an{border:1px solid currentColor;border-radius:999px;padding:2px 9px;opacity:.85}
/* ⭐ T144 (2026-08-30) — EL ESTADO DE UNA NORMA DEJA TAMBIÉN EL HUE DE LA LEYENDA, y con eso cierra
   la separación que T142(b) y D5 dejaron a medias: los dos tocaron la FORMA (el punto, la caja) y
   las dos notas de arriba declaran que el color quedaba pendiente «porque es decisión del usuario».
   El usuario la tomó el 2026-08-30 («si tenés recomendación la acepto»), y ésta es la recomendación
   con su porqué:

   ⛔ NO se les da otro hue, se les da una ESCALA. `vigente > en ejecución > en trámite` es una
   escala de cuánto existe la norma, no tres categorías sueltas — y una escala se lee por INTENSIDAD.
   Darles un cuarto hue sólo mudaría el problema: el azul ya es el ÁMBITO (`.b.amb`) y está en la
   columna de al lado, así que un estado azul se confundiría con «provincial» en la misma fila.
   ⇒ los tres pasan a la rampa de texto que las dos pieles ya comparten (el mismo `var(--tx,var(--ink))`
   que usa el menú), y los cinco hues de la leyenda quedan EXCLUSIVOS del sello.

   ✅ Lo que NO se pierde al sacarles el color: el catálogo de las 176 normas ya tiene un FILTRO
   propio por estado (`vigente` / `en ejecución` / `en trámite`, construido en la sesión 6), así que
   el color no era lo que hacía escaneable la columna — la caja con borde y el filtro sí.
   ⛔ Y no se toca el ámbar `--pro` donde SÍ es sello (`estimacion`): es personalización deliberada
   del usuario. Lo que se saca es el ámbar de donde no era sello, que es este chip. */
.b.ap{color:var(--tx,var(--ink))}
.b.pr{color:var(--tx2,var(--sec))}
.b.an{color:var(--mut,var(--dim))}
/* `amb` — el ÁMBITO de una norma (nacional / provincial). Nace acá porque hasta hoy «PROVINCIAL»
   reusaba `.b est`, o sea el VIOLETA DE `estimacion`: **51 de las 52 apariciones de ese violeta en
   las fichas eran jurisdicción y UNA sola era un sello real**. Y no se arreglaba quitando el punto,
   porque era la MISMA clase que el sello: hacía falta una propia. Toma el acento de la piel, que no
   está en la leyenda, y va sin punto igual que su hermano `neutral` (NACIONAL). */
.b.amb{color:var(--ac)}
/* `tsem` — EL ESTADO DE UNA TESIS (2026-08-31, marca del usuario mirando la portada: «está todo
   gris» y «el estado se ve más grande que el título»). Nace por la MISMA razón que `.b.amb`: hasta
   hoy «4/4 piezas firmes · lista para ejecutar» reusaba `.b.ap`, que es estado de una NORMA — y a
   ése `T144` le sacó el color el 30-ago para que los cinco hues de la leyenda queden sólo para los
   sellos. Consecuencia medida con `getComputedStyle`: el chip quedaba en el MISMO
   `rgb(232,234,240)` del titular, y con mayúsculas + 1 px de tracking + cápsula **pesaba más que el
   título de 16 px**. Achicarlo no era opción (piso de rótulo 12,5 px, `D1` 2026-08-20).
   ⛔ No toma un hue de la leyenda: toma el ACENTO de la piel, igual que `amb`, y va RELLENO — el
   acento plano se confunde con un enlace, y en la misma tarjeta los destinos «Neuquén · Río Negro»
   son de ese mismo azul. El relleno dice «etiqueta», no «hacé clic».
   ⚠️ Los tokens: `--ac-lo` es el azul CLARO y sólo existe en la piel oscura, así que cae a `--ac` en
   la clara; el relleno sale de `--ac-rgb`, que sí está en las dos. `--acink`/`--ac-soft` NO sirven
   acá: viven sólo dentro de `.cierre-zone`.
   Alcance: la portada y las 5 caras inversor. ⛔ NO alcanza a los chips de cada PIEZA de una tesis
   en la página de provincia: ésos sí son estado de una norma y siguen con `ap`/`pr`/`an`. */
/* ⚠️ Esta insignia NO es un rotulo: dice «4/4 piezas firmes · lista para ejecutar», 38 caracteres.
   Por la regla de tipografia del 13-sep, una FRASE no va en mayusculas aunque viva en una caja. */
.b.tsem{text-transform:none;letter-spacing:.01em;color:var(--ac-lo,var(--ac));background:rgba(var(--ac-rgb),.12);
  border:1px solid rgba(var(--ac-rgb),.32);border-radius:999px;padding:2px 9px}
.b.neutral::before,.b.amb::before,.b.tsem::before{display:none}
@media(max-width:640px){
  /* El `white-space:nowrap` de badge y sello mantiene la caja ATOMICA —si no entra en el renglon
     migra entera— y para eso sirve MIENTRAS entre. Con el piso de rotulo en 12,5 (D1, 2026-08-20)
     los mas largos dejaron de entrar en movil: medido a 390, `.b.ap` ocupaba 342px dentro de una
     columna de 316 y `.sello` 153 dentro de 144. Es EL MISMO defecto que `.regla` ya pago el
     2026-08-05 (ver la nota de `.b.prog-*` en despegue.css), y la cura es la misma: en movil la
     caja envuelve por dentro en vez de salirse. En desktop no cambia un pixel. */
  .b,.sello{white-space:normal;max-width:100%}
}
/* ===== MENU DE SITIO — REDISENADO el 2026-08-27 (decision 1 del usuario, `TN3`).
   Reemplaza la cinta horizontal de 7 puertas: *«no debe ser cinta horizontal... eso nacio como
   parche y nunca me termino de convencer»*. Ahora son 4 secciones con desplegable, y la primera
   son las 5 provincias — que es donde el GSC dice que aterriza TODO el trafico real de nicho.

   ⚠️ NO es sticky, y sigue sin serlo por el mismo motivo de antes: la `.pnav` es el indice de ESTA
   pagina (tiene que seguir a mano al scrollear) y esto es el mapa del SITIO (se usa al llegar y al
   irse). Dos barras pegajosas comen media pantalla a 390.
   ⚠️ Forma identica en las dos pieles; el color sale de los tokens de cada :root.
   ⭐ MISMO MARKUP en las dos medidas: lo que cambia es SOLO el CSS. Asi el arbol ES y el EN no
   pueden divergir por medida, que es lo que `lint_paridad_en` compara. ===== */
/* ⛔ EL FONDO VA CON FALLBACK, y no es cosmetica: `--panel2` SOLO existe en la piel oscura
   (`despegue.css`); la clara (`despegue-gente.css`) define `--card`. Un `var()` sin valor NO cae a
   un default: cae a transparente, asi que en las paginas de piel clara el submenu flotante dejaba
   ver el texto de abajo. Lo vio el usuario, no el codigo — y no lo caza ningun lint porque el HTML
   y la clase estan bien: lo que falta es el token en esa piel. */
.mnu{border-bottom:1px solid var(--bd);background:var(--panel2,var(--card,#fff));position:relative;
  z-index:30}
.mnu-wrap{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:2px;padding:0 16px}
/* el <summary> ES la puerta: mismo tamano y tipografia que tenia la cinta, para no mover el ritmo
   vertical del encabezado. `list-style:none` + `::-webkit-details-marker` matan el triangulito
   nativo, que en Safari se dibuja igual aunque se declare `display:flex`. */
.mnu-i{flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.02em;color:var(--mut,var(--dim));text-decoration:none;padding:9px 12px;
  white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s;cursor:pointer;
  display:flex;align-items:center;gap:6px;list-style:none;user-select:none}
.mnu-i::-webkit-details-marker{display:none}
.mnu-i:hover{color:var(--tx,var(--ink))}
.mnu-i.cur{color:var(--ac);border-bottom-color:var(--ac)}
.mnu-d{position:relative}
/* el chevron rota al abrir: es la senal de «esto despliega», y sin ella el titulo se lee como
   link roto (click y no navega). Se dibuja con bordes para no depender de una fuente de iconos. */
.mnu-c{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .15s;opacity:.75}
.mnu-d[open]>.mnu-i>.mnu-c{transform:rotate(-135deg) translate(-2px,-2px)}
.mnu-d[open]>.mnu-i{color:var(--tx,var(--ink))}
/* EL PANEL. En escritorio flota debajo de su puerta y no empuja el contenido. */
.mnu-m{position:absolute;top:100%;left:0;min-width:236px;max-width:min(94vw,560px);background:var(--panel2,var(--card,#fff));
  border:1px solid var(--bd);border-top:none;border-radius:0 0 6px 6px;padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:1px}
.mnu-s{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut,var(--ink));text-decoration:none;
  padding:8px 10px;border-radius:4px;white-space:nowrap;transition:background .12s,color .12s}
.mnu-s:hover{background:var(--bg,var(--ac-soft,#eef3f8));color:var(--tx,var(--ink))}
.mnu-s.cur{color:var(--ac);background:var(--bg,var(--ac-soft,#eef3f8))}
.mnu-p{display:block;font-size:var(--fs-micro);color:var(--dim);margin:4px 8px 2px;
  max-width:230px;white-space:normal;line-height:1.45}
/* ⭐ LA GRILLA DE PROVINCIAS: una fila por provincia, sus TRES caras al lado (idea del usuario,
   2026-08-28). Una lista plana de 15 links es ilegible; asi el nombre ancla la fila y el lector
   elige que viene a hacer en esa provincia: invertir, trabajar/emprender o proveer. */
/* ⚠️ El panel de la grilla necesita ANCHO PROPIO: con los 236 px del resto, las tres caras
   envolvian y la fila se apilaba en tres renglones — 591 px de alto y el nombre flotando al
   medio. Lo cazo la captura, no el CSS. */
.mnu-grid>.mnu-m{min-width:498px}
.mnu-fp{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:5px}
.mnu-fp:hover{background:var(--bg,var(--ac-soft,#eef3f8))}
.mnu-pn{font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;color:var(--tx,var(--ink));
  min-width:86px;flex:0 0 auto}
.mnu-c3s{display:flex;gap:2px;flex-wrap:nowrap}
.mnu-c3{font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut,var(--dim));
  text-decoration:none;padding:4px 8px;border-radius:4px;white-space:nowrap;
  border:1px solid transparent;transition:color .12s,border-color .12s}
.mnu-c3:hover{color:var(--ac);border-color:var(--bd)}
/* ⭐ DONDE ESTAS, DENTRO DEL MENU (2026-09-17). Dos marcas distintas y la diferencia importa:
   `.cur` = esta ES la pagina que estas viendo (color + relleno) · `.cur-de` = esta pagina CUELGA
   de aca (solo color). Antes habia una sola, y se usaba para las dos cosas: 410 de las 445
   paginas marcaban con relleno un hub en el que el lector no estaba, y la grilla de provincias
   no marcaba nada en ninguna (0 de 445). */
.mnu-c3.cur{color:var(--ac);background:var(--bg,var(--ac-soft,#eef3f8));border-color:var(--ac)}  /* el borde, y no solo el relleno: en el telefono el fondo del boton y el del panel son el
     mismo color, asi que sin borde la cara actual no se distinguia de la fila marcada */
.mnu-s.cur-de,.mnu-c3.cur-de{color:var(--ac)}
.mnu-fp.cur{box-shadow:inset 2px 0 0 var(--ac)}
.mnu-fp.cur .mnu-pn{color:var(--ac)}
/* Metodo va al MARGEN, no en la fila principal (decision del usuario): separado por el borde y
   fuera de las 4 puertas de contenido, para que no compita con ellas */
.mnu-lat{flex:0 0 auto;color:var(--dim);border-left:1px solid var(--bd);padding-left:14px;
  margin-left:auto}
/* ⭐ EL BOTON GLOBAL «Analizar mi empresa» (capa comercial, 2026-09-08). Vive DESPUES de Metodo,
   al margen derecho, y es el unico elemento con relleno de la barra: en las pieles de dato
   (inversor, proveedor, portada) va lleno con el acento; en la piel de la gente (`.mnu-cta-soft`,
   decidido por `documento()` segun la skin) va sin relleno y en gris, porque ahi el lector no es
   una empresa y el boton no tiene que competir con la lectura. Se emite solo con
   PARA_EMPRESAS_PUBLICA. */
.mnu-cta{flex:0 0 auto;margin-left:10px;padding:7px 13px;border-radius:7px;border-bottom:none;
  background:var(--ac);color:var(--ink,#0b1118);font-weight:700;letter-spacing:.02em}
.mnu-cta:hover{background:var(--ac-lo,var(--ac));color:var(--ink,#0b1118)}
.mnu-cta.cur{color:var(--ink,#0b1118);border-bottom:none}
.mnu-cta-soft{background:transparent;color:var(--mut,var(--dim));border:1px solid var(--bd);
  font-weight:600}
.mnu-cta-soft:hover{background:transparent;color:var(--tx,var(--ink));border-color:var(--tx,var(--ink))}
/* ⭐ EL BOTON BAJA EL TONO DESPUES DEL HERO (2026-09-12, decision del usuario). Arriba de la
   pagina el boton lleno esta bien: es la accion de la primera pantalla. Pero se quedaba azul y
   brillante durante las siete pantallas siguientes, mientras el lector lee metodo, evidencia y
   reformas — y ahi empieza a leerse como landing comercial, que es justo lo que este sitio no es.
   ⛔ NO se elimina: pasa a CONTORNO. Sigue a un clic, deja de ser lo mas fuerte de la pantalla.
   El interruptor lo pone el JS al salir el hero de la vista (`body.scrolled`), con el mismo
   IntersectionObserver que ya existia para la barra. */
body.scrolled .mnu-cta{background:transparent;color:var(--ac);border:1px solid var(--ac);
  font-weight:600}
body.scrolled .mnu-cta:hover{background:var(--ac);color:var(--ink,#0b1118)}
/* la version de TELEFONO: el panel del menu esta cerrado por defecto, asi que el boton de la barra
   quedaria escondido. Este segundo enlace vive fuera del panel, a la derecha del boton «Menu», y
   en escritorio no existe. Es el MISMO destino: dos enlaces, un solo lugar. */
.mnu-cta-m{display:none}
/* la hamburguesa NO existe en escritorio: el <details> que la envuelve se anula y su panel es la
   fila de siempre.
   ⛔ `display:contents` a secas NO alcanza, y lo cazo la MEDICION EN PIXELES, no el HTML: un
   <details> cerrado oculta a todos sus hijos menos el <summary>, y eso lo hace el navegador, no
   el layout — con `display:contents` el menu de escritorio media **1 px de alto** y el HTML se
   veia perfecto. Por eso el panel se declara visible explicitamente en esta medida. */
.mnu-burger{display:none}

@media(max-width:860px){
  /* ⭐ TELEFONO: LA MISMA ESTRUCTURA CON OTRA FORMA. Antes acá habia una cinta que scrolleaba de
     costado y mostraba 4 de 7 puertas, con un degradado que avisaba que seguia. El problema
     medido no era el degradado: era que el lector tenia que descubrir por scroll lo que un menu
     tiene que ofrecer de una. Ahora el boton abre las 4 secciones APILADAS, cada una con su
     submenu, y nada queda fuera de la pantalla. */
  .mnu-burger{display:block}
  /* el panel se oculta desde el BOTON, que es su hermano: `+` alcanza al elemento siguiente.
     Sin JS y sin que el navegador se lo lleve puesto por estar dentro de un <details>. */
  .mnu-burger:not([open])+.mnu-wrap{display:none}
  .mnu-burger>summary{display:flex;align-items:center;gap:9px;padding:10px 16px;cursor:pointer;
    list-style:none;font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
    letter-spacing:.02em;color:var(--mut)}
  .mnu-burger>summary::-webkit-details-marker{display:none}
  /* las tres barras, dibujadas con la caja y sus dos pseudo-elementos (cero markup extra) */
  .mnu-bl{position:relative;width:16px;height:2px;background:currentColor;display:block;flex:0 0 auto}
  .mnu-bl::before,.mnu-bl::after{content:"";position:absolute;left:0;width:16px;height:2px;
    background:currentColor}
  .mnu-bl::before{top:-5px}
  .mnu-bl::after{top:5px}
  .mnu-burger[open]>summary{color:var(--ac)}
  .mnu-bt{letter-spacing:.06em}
  /* el panel deja de ser una fila y pasa a ser una lista vertical a todo el ancho */
  .mnu-wrap{flex-direction:column;align-items:stretch;gap:0;padding:0 0 6px;
    border-top:1px solid var(--bd)}
  .mnu-d{position:static}
  .mnu-i{border-bottom:none;padding:11px 16px;justify-content:space-between;
    border-left:2px solid transparent}
  .mnu-i.cur{border-bottom:none;border-left-color:var(--ac)}
  /* el submenu NO flota: se abre en su lugar y empuja, que es lo que se espera en telefono */
  .mnu-m{position:static;min-width:0;border:none;border-radius:0;box-shadow:none;
    background:var(--bg,var(--ac-soft,#eef3f8));padding:2px 0 6px}
  .mnu-s{padding:9px 16px 9px 30px;border-radius:0;white-space:normal}
  /* en telefono la fila de provincia se apila: nombre arriba, las 3 caras debajo */
  .mnu-fp{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 16px 8px 30px;
    border-radius:0}
  .mnu-pn{min-width:0}
  .mnu-grid>.mnu-m{min-width:0}
  .mnu-c3s{flex-wrap:wrap}
  .mnu-c3{padding:5px 9px 5px 0}
  .mnu-p{margin:4px 16px 2px 30px;max-width:none}
  .mnu-lat{margin:2px 0 0;padding:11px 16px;border-left:none;border-top:1px solid var(--bd)}
  /* el boton global dentro del panel apilado se vuelve una fila mas, y el de la barra aparece */
  .mnu-cta{margin:8px 16px 4px;justify-content:center;border-radius:8px;padding:11px 16px}
  .mnu-cta-m{display:inline-flex;align-items:center;position:absolute;right:12px;top:7px;
    padding:6px 11px;border-radius:7px;background:var(--ac);color:var(--ink,#0b1118);
    font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;text-decoration:none;
    letter-spacing:.02em;min-height:32px;white-space:nowrap}
  .mnu-cta-m.mnu-cta-soft{background:transparent;color:var(--mut,var(--dim));border:1px solid var(--bd)}
  /* ⭐ Y EN EL TELEFONO TAMBIEN BAJA EL TONO (2026-09-12). La regla de escritorio alcanzaba solo a
     `.mnu-cta`; el que se ve en el telefono es este, que vive fuera del panel del menu. Ahi pesa
     MAS: 288 px de ancho sobre una pantalla de 390, o sea tres cuartos de la barra, azul y lleno
     durante las once pantallas que siguen al hero. */
  body.scrolled .mnu-cta-m{background:transparent;color:var(--ac);border:1px solid var(--ac);
    font-weight:600}
  body.scrolled .mnu-cta{background:transparent;color:var(--ac);border:1px solid var(--ac)}
  /* ⭐⭐ LA CABECERA PRIORIZA LA ACCION DESPUES DEL HERO — «O2», elegida por el usuario el
     2026-09-13 sobre dos alternativas renderizadas.
     EL DEFECTO QUE RESUELVE, medido a 390 px sobre la portada Y sobre la ficha: el boton de
     telefono vive dentro de `.mnu`, que NO esta pegada. Al bajar 2.600 px quedaba a 2.433 px por
     encima del borde de la pantalla. O sea que la regla del 12-sep describia un boton fijo que no
     era fijo, y eso esta asi en vivo.
     ⛔ LA POLITICA ES POR MOLDE: `body.cab-accion` lo declara, y hoy lo declara SOLO el molde 2.
        Que la portada, las normas y provincia ya enciendan `body.scrolled` no las mete acá:
        compartir componente no obliga a compartir comportamiento (`REGLAS-INTERFAZ.md`).
     ⛔ Y ES UNA SOLA BARRA DE 54 px, no dos: por eso el boton entra a la cabecera en vez de
        pegarse la barra del menu, que costaba 96 px de cromo permanente.
     LO QUE CEDE SU LUGAR, y solo mientras el hero no esta en pantalla:
       · la cara de la pildora (`· proveedor`, 79 px) — el contexto ya se aprendio al entrar;
       · el `ES|EN` (72 px) — arriba de la pagina, que es donde alguien elige idioma, sigue estando;
       · la marca, abajo de 390 px — no nombra nada que se pierda, y vuelve al subir.
     ⚠️ Medido de 340 a 860 px: una sola barra de 54 px y 0 de desborde. La pildora entra entera
        desde 360; abajo cede lo que falte sin partir la barra. */
  body.cab-accion header .mnu-cta-h{display:inline-flex;align-items:center;margin-left:auto;
    padding:7px 11px;border-radius:7px;background:var(--ac);color:var(--ink,#0b1118);
    font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;text-decoration:none;
    letter-spacing:.02em;min-height:32px;white-space:nowrap;flex:0 0 auto}
  body.cab-accion:not(.scrolled) header .mnu-cta-h{display:none}
  body.cab-accion.scrolled header .mnu-cta-h{background:transparent;color:var(--ac);
    border:1px solid var(--ac);font-weight:600}
  body.cab-accion.scrolled header .back .back-cara{display:none}
  body.cab-accion.scrolled header .langsw{display:none}
  /* la barra no se parte nunca: el boton no se achica y la pildora cede el sobrante */
  body.cab-accion.scrolled header{flex-wrap:nowrap}
  body.cab-accion.scrolled header .back{min-width:0;flex:0 1 auto;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  body.cab-accion.scrolled header .brand{flex:0 0 auto}

  /* ⭐ Y MIENTRAS EL HERO ESTA EN PANTALLA, EL BOTON FIJO NO EXISTE (2026-09-12). En el telefono la
     primera pantalla mostraba el MISMO boton dos veces: pegado arriba y otra vez grande en el hero,
     a 350 px de distancia. ⛔ No se borra ninguno: el del hero hace el trabajo durante el primer
     viewport y el fijo aparece cuando el hero sale, que es cuando empieza a hacer falta. Lo mueve
     el mismo `body.scrolled` que ya bajaba el tono. */
  body:not(.scrolled) .mnu-cta-m{display:none}
}
/* abajo de 390 la MARCA cede su lugar antes que la pildora: el logo no nombra nada que se pierda
   —vuelve al subir y esta en el pie—, y la pildora dice ADONDE se vuelve. */
@media(max-width:389px){
  body.cab-accion.scrolled header .brand{display:none}
}
/* El titular de AGENDA del bloque «El programa, verificado» (decision 3, 2026-08-27). Va ARRIBA
   del lead y un escalon mas grande: es lo primero que el bloque afirma. Hoy solo se emite con
   `AGENDA_LIDERA` encendido en `generar_html.py`. */
.tr-agenda{font-size:var(--fs-body-lg);line-height:1.5;margin:0 0 10px;color:var(--tx)}
/* ══ LOS ROTULOS QUE SEPARAN LOS DOS UNIVERSOS del marcador (feedback externo, 6-sep) ══════════
   Uno cuenta de que habla el gobierno en 90 dias; el otro, cuanto pudimos contrastar desde que el
   metodo existe. Iban seguidos y sin rotulo, asi que el lector sumaba dos denominadores distintos. */
.tr-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.01em;
  color:var(--dim);margin:0 0 6px;font-weight:600}
.tr-agenda+.tr-k{margin-top:18px}
/* que significa «contra la fuente oficial», contestado antes de que el lector lo pregunte.
   ⛔ NACIO EN `--fs-micro` (13 px) el 6-sep y eso lo dejaba BAJO EL PISO de la escala: son 398
   caracteres de prosa que se leen, no un pie de tabla, y `lint_cuerpo_prosa` lo marco en las dos
   paginas que lo publican. Va en `--fs-body` (15,5), el escalon de las notas: un peldano debajo del
   cuerpo de lectura porque es una aclaracion, pero dentro de la escala. */
.tr-que{font-size:var(--fs-body);line-height:1.55;color:var(--sec);margin:-6px 0 14px;max-width:760px}
.tr-agenda b{color:var(--ac)}
/* `.tbl-w` envuelve a `.tbl-k` cuando la tabla sale de prosa curada: en computadora una tabla
   ancha scrollea DENTRO del bloque en vez de panear la pagina entera, que es el mismo criterio de
   `.panel` y de `.op-mx-wrap`. En telefono no hace falta y estorba: ahi `.tbl-k` apila las filas. */
.tbl-w{overflow-x:auto}
@media(max-width:640px){.tbl-w{overflow-x:visible}}
/* ===== `.tbl-k` · LA TABLA QUE SE APILA EN MOVIL (promovida de `.esc-pg` el 2026-08-20, U4).
   Una tabla de 3+ columnas a 390 no entra: o se scrollea de costado —y lo que se pierde es
   justo la ultima columna, que suele ser la cifra— o se apila. Acá se apila: cada fila pasa a ser
   una tarjeta y cada celda lleva su rotulo puesto via `data-k`, asi no se saca ninguna columna.
   ⛔ Nacio scopeada a `.esc-pg` en U2 y se promueve SIN cambiar un pixel: los 3 hubs de U4 tienen
   la misma tabla y duplicar la regla seria la segunda forma del mismo elemento. `.esc-pg` la usa
   ahora por herencia (su <div class="page esc-pg"> suma la clase). ===== */
@media(max-width:640px){
  .tbl-k table{table-layout:auto}
  .tbl-k thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl-k table,.tbl-k tbody,.tbl-k tr,.tbl-k td{display:block;width:auto}
  .tbl-k tr{border-bottom:1px solid var(--bd);padding:12px 0}
  .tbl-k tr:last-child{border-bottom:0}
  .tbl-k td{border:0;padding:0 0 5px;text-align:left}
  .tbl-k td:last-child{padding-bottom:0}
  /* apilada, una celda pierde su encabezado: la que no se explica sola lo lleva puesto. Una celda
     SIN `data-k` es una decision, no un olvido: su orden en la tarjeta ya se lee solo. */
  .tbl-k td[data-k]::before{content:attr(data-k) " ";font-family:var(--mono);
    font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
    margin-right:7px}
}

/* ===== `.esc-dec` · LAS DOS COLUMNAS DE "QUE DECISION CAMBIA ESTO" (promovida de
   `despegue-gente.css` el 2026-08-23, T59 #10). Vive aca por lo mismo que `.tbl-k`: la emiten
   los DOS lados — `trabajo/escalas` y `trabajo/formacion` (piel gente) y `negocios/empresas`
   (piel inversor), y esa ultima NO carga la hoja gente. Medido antes de moverla, a 1280:
     trabajo/escalas    -> display:grid · 2 columnas de 462px · rotulo IBM Plex Mono 12,5 w600
     negocios/empresas  -> display:block · una columna · rotulo IBM Plex SANS 15,5 w400
   O sea que en la pagina inversor el rotulo («Si vas a vender un servicio») se leia IGUAL que el
   parrafo: el lector no podia saber que era un encabezado, y el bloque perdia su comparacion.
   Es ESTRUCTURA, no paleta: los 3 tokens que usa —`--ac` `--bd` `--mono`— los definen las DOS
   pieles, asi que cada una le pone su color sin duplicar una sola regla.
   ⛔ EL PARRAFO NO DECLARA COLOR, Y NO ES UN OLVIDO. La version de la hoja gente traia
   `color:var(--ink)`, y al subirla eso ROMPIO la pagina inversor: ahi `--ink` es `#04050a`
   sobre un fondo `rgb(9,12,20)` —contraste ~1, texto invisible—, porque en la piel oscura el
   color de texto es `--tx`. Y en la piel clara la declaracion era REDUNDANTE: el color
   heredado ya es `rgb(33,37,44)`, identico a su `--ink`. Heredar arregla una y no mueve la
   otra (medido: las 2 capturas gente dan el mismo MD5 antes y despues).
   ⇒ una regla compartida no puede fijar un token de TEXTO cuyo significado se da vuelta por
   piel; el color del cuerpo se hereda y punto.
   ⚠️ `lint_clases_css` daba 0 sobre esto y NO estaba roto: cruza el HTML contra TODOS los
   `pipeline/assets/*.css` a la vez, o sea que no sabe que hoja carga cada pagina. Es su punto
   ciego, y esta declarado en `falsos-positivos.md §B`. ===== */
.esc-dec{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.esc-dec-c p{margin:0 0 10px;font-size:var(--fs-body-lg);line-height:1.62;text-wrap:pretty}
.esc-dec-c p:last-child{margin-bottom:0}
.esc-dec-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
@media(max-width:640px){.esc-dec{gap:20px}}
/* letra chica del chip de estado: aprobado por el Comite, pero el instrumento todavia no salio en el
   BO. Va apagada, en minuscula y SIN punto a proposito -> matiza el chip sin competirle ni parecer un
   cuarto estado (V20, lector-frio Catamarca). Vive aca y no en cada piel porque es ESTRUCTURA y usa
   solo tokens que las dos definen; el color lo pone el `--dim` de cada una.
   ⚠️ Escrita el 2026-08-21: el comentario que la describia estaba desde el 06-ago y la REGLA no —
   las 3 superficies de este mismo dato salian sin estilo. Hermanas: `.hd-split .pend` (hero inversor,
   despegue.css) y `.ghs-cav` (hero gente, despegue-gente.css).
   ⛔ `text-transform:none`, NO `lowercase`: el texto de i18n ya viene en minuscula y forzarlo rompe la
   SIGLA — la captura de control mostraba «sin resolucion en el bo». La minuscula la pone la fuente
   del texto, no el CSS. */
.b-cav{font-family:var(--mono);font-size:var(--fs-label);font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--dim);margin-left:7px;white-space:nowrap;vertical-align:middle}
.foot{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);text-align:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--bd)}
.mh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:auto;padding-top:6px}
.uni{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.02em;color:var(--dim)}

/* CTA de indice hacia una pagina propia — LAS DOS PIELES.
   Nace en la piel GENTE (la fila del indice emprender hacia su `pagina_gente`) y hasta el
   2026-08-23 su regla vivia SOLO en `despegue-gente.css`. Cuando `/negocios/` (piel INVERSOR)
   empezo a emitir la misma clase para su puerta a `/negocios/empresas`, el link salio con el
   AZUL POR DEFECTO DEL NAVEGADOR sobre fondo oscuro — `rgb(0,0,238)`, subrayado, sin fondo ni
   padding — mientras la piel gente lo pintaba como boton.
   ⛔ Es la misma clase que `.b-cav` de aca abajo y que los `.sat-*` de [[L455]]: HTML y CSS se
   editan por separado y nada los cruza. ⚠️ `lint_clases_css` NO lo ve, y no es un bug suyo:
   busca la clase en `pipeline/assets/*.css` como conjunto, no en la hoja que la pagina CARGA.
   Lo destapo una captura, igual que las dos veces anteriores.
   La regla usa SOLO tokens que las dos pieles definen (`--mono --fs-micro --on-ac --ac
   --acink`, el contrato declarado en la cabecera de `cierre.css`), asi que cada piel la pinta
   con su paleta: lo unico que difiere por piel es el color, nunca la estructura. */
/* CTA de la fila del indice emprender hacia la pagina propia del nicho (pagina_gente) */
.idx-cta{display:inline-flex;align-items:center;gap:7px;margin-top:13px;padding:9px 15px;border-radius:9px;
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;text-decoration:none;
  color:var(--on-ac);background:var(--ac);transition:.13s}
.idx-cta:hover{background:var(--acink)}

/* ══ EL CONTEO DE CADA ESLABON en el hub de nichos (feedback externo, 6-sep) ═══════════════════
   El lector tenia que elegir cual de los 8 grupos abrir sin saber cuantos nichos habia detras de
   cada uno; en telefono, donde los 74 se leen como fichas apiladas, esa era la unica pista posible.
   El numero lo emite `render_hub_negocios()` desde `len(items)` — nunca escrito a mano. */
.hn-n{display:inline-block;margin-left:7px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:.8em;color:var(--ac)}
.pnav .hn-n{margin-left:5px;font-size:.92em;opacity:.7}
.pnav a[href].on .hn-n{color:inherit;opacity:.75}
/* ══ LA VENTANA DE CADA MERCADO (decision del usuario, 2026-09-07) ════════════════════════════
   La ultima columna dice si la oportunidad es urgente, emergente o sostenida, y para el que quiere
   vender es lo que decide si mueve algo esta semana o el ano que viene. Salia en gris chico, con el
   mismo peso que la provincia.
   ⛔ SOLO «urgente» cambia. Las otras dos se quedan en `--dim` a proposito: pintar las tres lo
   vuelve un semaforo, que es lo unico que la lectura externa pidio NO hacer. Medido: 30 de los 74
   son urgentes, 21 sostenidos, 16 emergentes y 7 sin ventana declarada.
   ⚠️ El triangulo es la SEGUNDA senal, para quien no distingue el ambar del gris: el color solo
   nunca alcanza. ⛔ Y lleva su texto alternativo VACIO (`/ ""`): sin eso un lector de pantalla
   anuncia el nombre del simbolo antes de la palabra, que es ruido — la palabra ya dice «urgente».
   El color `--urg` y la clase `.fz-urgente` ya existian: los usa la hoja de cada nicho para marcar
   el MISMO arco, asi que la palabra se ve igual en la tabla y en la ficha.
   Medido sobre el fondo real: el ambar da 9,77 a 1, muy por encima del minimo de 4,5. */
.vent{color:var(--dim)}
.vent.fz-urgente{color:var(--urg)}
.vent.fz-urgente::before{content:"\25B2\A0" / "";font-size:.72em;vertical-align:.16em}

/* ⭐ NG3 · LA FILA QUE ABRE UNA HOJA SE DISTINGUE SIN EL COLOR. El chevron sale solo en las 63
   que tienen hoja propia; las 11 que no la tienen quedan sin el. `aria-hidden` no hace falta: es
   contenido generado, los lectores de pantalla no lo anuncian. */
.hn-abre::after{content:" ›";color:var(--dim);font-weight:400}
.hn-abre:hover::after{color:inherit}
/* ⭐ NG8 · EL REPARTO DE LA COLUMNA EN DOLARES, DENTRO DE SU ESLABON. La barra va DETRAS del
   numero y no en una columna nueva: la tabla ya tiene cuatro y el ancho es el que es. `--hn-w` lo
   escribe el render contra el maximo de SU grupo. En movil la tabla se apila (`.tbl-k`) y la celda
   deja de ser columna: ahi la barra no aporta y se apaga. */
.hn-bar{position:relative;display:inline-block;min-width:6.4ch;text-align:right}
.hn-bar::before{content:"";position:absolute;right:0;bottom:-3px;height:2px;
  width:var(--hn-w,0);min-width:2px;background:var(--ac);opacity:.42;border-radius:1px}
@media(max-width:640px){.hn-bar{min-width:0}.hn-bar::before{display:none}}
/* ══ +1 px EN EL CUERPO DE LAS TABLAS ═══════════════════════════════════════════════════════════
   Medido antes de tocarlo, sobre la tabla mas densa del sitio (`/provincias/`, a 1280 px): con +1
   crece 26 px —de 1.110 a 1.136, un 2,3%— y nada se reacomoda; con +2 crece 59 y el encabezado de
   la ultima columna se parte en dos lineas. Por eso es +1 y no +2.

   ⛔ Y va SOBRE LA TABLA, no sobre `--fs-label` / `--fs-micro`. Esos dos tokens pintan tambien
   rotulos, pies, chips y sellos de todo el sitio: moverlos ahi cambiaria 371 paginas enteras para
   arreglar la legibilidad de un renglon de tabla. Los dos tamanos que aparecen dentro de una tabla
   son exactamente estos —12,5 px en encabezado, provincia y sello; 13 px en subtitulo y puerta—,
   contados con el tamano computado sobre las tres paginas auditadas. */
/* ⭐ 2026-09-07 — 13,5 px hasta hoy. Lo subieron las dos lecturas externas (ver `--fs-label`): el
   rotulo de columna es lo que te dice QUE estas mirando y era, con el sello, la letra mas chica de
   la tabla. Ahora 15, que es el +1,5 que se le mostro renderizado y eligio.
   ⚠️ El aviso del bloque de arriba —«con +2 el encabezado de la ultima columna se parte en dos
   lineas»— se re-midio con este valor antes de dejarlo. */
.panel table th,
.panel table .sub,
.panel table .se-c,
.panel table .se-f{font-size:15px}
.panel table .pv-sub,
.panel table .pv-p,
.panel table .rfh-n{font-size:14px}

/* la unidad que va DESPUES de la cifra en un KPI: mismo tratamiento que el prefijo */
.kpi .v .kpost{margin-left:2px}
/* ══ EL ESLABON, PLEGABLE EN TELEFONO ══════════════════════════════════════════════════════════
   Medido a 390 px: la pagina son 17.352 px = 20,6 pantallas contra 8,2 en escritorio, y las 74
   fichas apiladas se llevan el 87%. Plegados, el telefono muestra un indice de ocho lineas con su
   conteo y el lector abre el que le toca. En escritorio salen abiertos y no cambia nada.
   El `list-style:none` va con el `::-webkit-details-marker`: sin los dos, Safari deja su flechita. */
.hn-g>summary{list-style:none;cursor:pointer}
.hn-g>summary::-webkit-details-marker{display:none}
/* ⚠️ La flecha va POSICIONADA, no en el flujo. Con `margin-left:auto` dentro del <h2> caia a un
   renglon propio debajo del subtitulo largo y dejaba un hueco de ~90 px por grupo (probado sobre
   la captura). Solo se muestra donde el plegado sirve: en escritorio los grupos estan siempre
   abiertos y una flecha ahi seria un control muerto. */
@media(max-width:700px){
  .hn-g>summary{position:relative;padding-right:26px}
  /* ⛔ La flecha se DIBUJA con bordes, no con un caracter: `ƒA` no esta en el subset de
     IBM Plex Mono que carga el sitio y salia como la caja de glifo faltante (visto en captura). */
  .hn-g>summary::after{content:"";position:absolute;right:9px;top:50%;margin-top:-7px;
    width:8px;height:8px;border-right:2px solid var(--ac);border-bottom:2px solid var(--ac);
    transform:rotate(45deg);transition:transform .15s}
  .hn-g[open]>summary::after{transform:rotate(-135deg);margin-top:-3px}
  .hn-g>summary:hover>h2{color:var(--ac)}
  /* plegado, el subtitulo del eslabon no ayuda a elegir y duplica el alto del indice */
  .hn-g:not([open])>summary>h2>span{display:none}
  .hn-g:not([open])>summary>h2>span.hn-n{display:inline}
}
/* el aviso de escalas del hub de provincias: va ANTES de la tabla y tiene que leerse como un
   aviso, no como una nota al pie mas. Mismo tamano que la nota, con marco tenue de advertencia. */
.hp-aviso{margin:10px 0 16px;padding:10px 13px;border:1px solid rgba(224,182,74,.28);
  border-left:2px solid var(--pro);border-radius:5px;background:rgba(224,182,74,.05)}

/* Fila de DOS puertas `.idx-cta`, para el par de hijas de /trabajo (P6, sesion 8). Los botones son
   `inline-flex`, asi que sin contenedor se apilaban con su `margin-top` y ocupaban dos renglones
   enteros; en el telefono siguen apilandose (el `wrap`) pero comparten el `gap` en vez de sumar
   dos margenes. El `margin-top:0` de los hijos evita que el primero empuje la fila entera. */
.idx-par{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.idx-par>.idx-cta{margin-top:0}

/* ══ EL PISO DEL COLOR DE LINK — vive en la base porque el defecto era de TODAS las pieles ══
   Medido el 2026-08-23 sobre las 465 paginas del sitio: **753 links en 234 paginas** mostraban su
   propio texto con el `#0000EE` del navegador (contraste 2,01 sobre el panel, contra el umbral AA
   de 4,5). Nadie eligio ese azul: son links a los que sencillamente nunca se les puso color.

   ⛔ NO LO VE NINGUN DETECTOR, y no es un bug de `lint_clases_css`: su pregunta es «¿la clase tiene
   una regla?», y `.rfh-t{font-weight:600}` **es** una regla. Que no diga nada del color esta fuera
   de lo que puede preguntar. Lo caza `getComputedStyle`, y la firma es literal: `rgb(0, 0, 238)`.

   ⭐ LA DECISION YA ESTABA TOMADA Y ESCRITA, sin aplicar: `nicho.css` trae `a{color:inherit}` desde
   antes, con su porque («la cura va en la clase, no en la instancia») — y por eso las paginas de
   nicho son las UNICAS que no aparecen en la medicion. Esto la sube a la base, que es donde
   correspondia, y le suma la mitad que faltaba: heredar sirve para que nada caiga al azul del
   navegador, pero un link que hereda deja de PARECER un link. Van las dos capas.

   Especificidad 0-0-1: cualquier regla con clase le gana, asi que no pisa ni un color ya disenado. */
a{color:inherit}

/* Y donde el link es una PUERTA REAL, el color de la casa. Los cuatro contextos salen de la
   medicion, no de una lista a ojo: prosa (204 links), celda de tabla (319 entre `rfh-t` y pelados),
   nota al pie de confianza (20) y la navegacion interna de pagina (data-nav). */
.disc a[href], td a[href], .conf-nota a[href], .pnav-in a[href]{color:var(--ac);text-decoration:none}
.disc a[href]:hover, td a[href]:hover, .conf-nota a[href]:hover, .pnav-in a[href]:hover{
  text-decoration:underline}
/* el titular de fila del hub de normas: hermano exacto de `.rfp-der-t`, que ya se curo en su hoja */
a.rfh-t[href]{color:var(--ac);text-decoration:none}
a.rfh-t[href]:hover{text-decoration:underline}

/* ══ P3 (sesión 8) · el plegable del caveat dentro de la celda de la cartera ═══════════════════
   `cr-f` = cartera · fold. Vive en la base y no en una piel porque `tabla_cartera()` es UNA
   función y la rinden la portada (piel oscura) y `/proyectos/` (la misma): el elemento compartido
   tiene UNA sola forma, y lo único que difiere por piel es la paleta — que acá ni siquiera hace
   falta, porque hereda `.sub`.
   ⛔ El `<summary>` conserva la clase que ya tenía el bloque (`.sub mag-nota`) para que no cambie
   ni un píxel de tipografía al plegarse: lo único que se agrega es la marca de que se abre.
   ⚠️ `list-style:none` + el `::-webkit-details-marker` van los dos: Safari ignora el primero. */
.cr-f{display:block}
.cr-f>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:baseline;gap:5px}
.cr-f>summary::-webkit-details-marker{display:none}
.cr-f>summary::after{content:"\25BE";font-size:.72em;opacity:.6;transition:transform .13s}
.cr-f[open]>summary::after{transform:rotate(180deg)}
.cr-f>summary:hover{color:var(--ac)}
.cr-f-b{margin-top:5px;padding-left:9px;border-left:2px solid var(--bd2)}

/* ══ P14 (sesión 8) · el comparador MÓVIL de /provincias/ ══════════════════════════════════════
   Sólo existe abajo de 760 px, que es donde la tabla se reescribe en 5 bloques apilados y deja de
   comparar. En escritorio la tabla ya pone las 5 filas a la vista, así que este bloque sería el
   mismo dato dos veces en la misma pantalla — y eso lo prohíbe IDENTIDAD §2 regla 8.
   ⛔ El corte va en 760 px porque es el mismo que usa el resto del molde para pasar a la vista
   apilada: si fuera otro habría un rango de anchos con las dos vistas o con ninguna. */
.pv-cmp{display:none}
.pvc-l{list-style:none;margin:12px 0 0;padding:0;counter-reset:pvc}
.pvc-l>li{counter-increment:pvc}
.pvc-l>li+li{margin-top:6px}
.pvc-l a{display:flex;align-items:baseline;gap:10px;padding:11px 13px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--bd2);text-decoration:none}
.pvc-l a::before{content:counter(pvc);font-family:var(--mono);font-size:var(--fs-micro);
  color:var(--dim);min-width:1.1em}
.pvc-n{flex:1;font-weight:600;color:var(--tx)}
.pvc-v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;color:var(--ac);
  font-weight:700;white-space:nowrap}
@media (max-width:760px){ .pv-cmp{display:block;margin:6px 0 18px} }

/* ===== `.mas-f` · LA LISTA LARGA QUE MUESTRA LAS PRIMERAS Y PLIEGA EL RESTO (T128, 2026-08-29).
   Nace en `rigi-encadenamientos`: «Proyecto por proyecto» ocupaba el 41% de la pagina (2.045 px
   de 5.027, medido en el navegador) y el lector abandona en la fila 9-10 — o sea que el bloque
   mas repetitivo hacia de PEAJE antes de «Que no dice esta pagina» y «Que falta medir», que son
   los dos que sostienen la credibilidad frente a un lector que arranca en desacuerdo.
   ⛔ No borra ninguna fila: las esconde detras de un click y lo dice con el numero puesto.
   Es generico a proposito — sirve a cualquier lista larga que tenga bloques importantes debajo. */
.mas-f>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--ac);padding:12px 0 2px}
.mas-f>summary::-webkit-details-marker{display:none}
.mas-f>summary::before{content:"BE";font-size:10px;line-height:1;transition:transform .15s}
.mas-f[open]>summary::before{transform:rotate(180deg)}
.mas-f>summary:hover{text-decoration:underline}
.mas-f .mas-m{display:none}
.mas-f[open] .mas-v{display:none}
.mas-f[open] .mas-m{display:inline}

/* ===== `.lin` · EL CAMINO DEL NUMERO (T129, 2026-08-29). El rastro del calculo, escalon por
   escalon, con el sello de cada uno. ⛔ NO es un grafico y no se convierte en uno: el reporte
   externo descarto el diagrama de flujo porque sugeriria que los proyectos se SUMAN, y la propia
   pagina advierte lo contrario (los mercados se comparten entre proyectos vecinos). */
.lin{display:flex;flex-wrap:wrap;align-items:center;gap:7px 9px;margin:2px 0 14px;
  font-size:var(--fs-micro);line-height:1.5}
.lin-p{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  background:var(--panel2,var(--card,#fff));border:1px solid var(--bd);border-radius:7px;
  padding:6px 10px;color:var(--mut,var(--dim))}
.lin-p b{font-family:var(--mono);font-size:1.06em;color:var(--tx,var(--ink));font-weight:700}
.lin-a{color:var(--ac);font-family:var(--mono);flex:0 0 auto}
@media(max-width:640px){.lin{gap:5px 7px}.lin-a{display:none}
  .lin-p{width:100%;border-left:3px solid var(--ac)}}

/* ===== `.rank` · LA RESPUESTA ANTES DEL LISTADO (T124, 2026-08-29). La pagina tenia la respuesta
   —«que puerta me deja mas salidas abiertas»— y obligaba a calcularla leyendo 55 registros.
   Cada fila nombra la institucion que mas oficios abre en esa provincia y salta a su bloque.
   ⭐ Va ABIERTO a proposito: es la respuesta que demuestra que el trabajo esta hecho. Lo que se
   puede cobrar empieza un paso despues, en «cual de esas puertas es mejor PARA MI». */
.rank{display:flex;flex-direction:column;gap:6px;margin:4px 0 22px}
.rkp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;text-decoration:none;
  border:1px solid var(--bd);border-radius:8px;padding:9px 13px;transition:.13s;
  background:var(--panel2,var(--card,#fff))}
.rkp:hover{border-color:var(--ac);background:var(--bg,var(--ac-soft,#eef3f8))}
.rkp-p{font-weight:700;color:var(--tx,var(--ink));flex:0 0 auto;min-width:104px}
.rkp-b{color:var(--mut,var(--dim));font-size:var(--fs-micro);flex:1 1 240px}
.rkp-b b{color:var(--tx,var(--ink));font-weight:600}
.rkp-n{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ac);flex:0 0 auto}
@media(max-width:640px){.rkp{flex-direction:column;gap:3px}.rkp-p{min-width:0}}

/* ===== `.prov-h` · LA PROVINCIA COMO ENCABEZADO DE GRUPO, NO COMO ROTULO AL MARGEN
   (T125, 2026-08-29). Se dibujaba con el mismo lenguaje que los rotulos secundarios —12,5 px,
   versalita, rayita— en una pagina que se recorre BUSCANDO LA PROVINCIA PROPIA. Medido a 390 px:
   un salteño bajaba 10.477 px de provincias ajenas para llegar a la suya.
   ⛔ El scroll no se arregla con una barra de progreso ni con un buscador: los tres reportes
   externos descartan las dos. Lo que faltaba era poder SALTAR, y eso lo da `.rank` de arriba.
   ⚠️ EL TECHO NO ES ESTETICO: la provincia es un `<h3>` DENTRO de una seccion cuyo `<h2>` mide
   22 px. La primera version quedo en 24 y eso invertia la jerarquia — el mismo defecto que T126,
   al reves. Se acota a 20 px de techo: se lee como encabezado de grupo (contra los 12,5 px de
   antes) y sigue por debajo de su seccion. */
/* ⚠️ EL ESCALON DE MAS NO ES ADORNO ([[L1235]]): la piel clara declara
   `.esc-pg .esc-fam-h{font-size:12.5px}` — misma especificidad que `.esc-fam-h.prov-h` y carga
   DESPUES, asi que ganaba ella y el encabezado seguia en 12,5 px aunque el CSS se leyera bien.
   Se califica con el contenedor, que es la convencion de esta hoja. */
.esc-pg .esc-fam-h.prov-h,.esc-fam-h.prov-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;width:100%;
  font-family:inherit;font-size:clamp(17px,1.7vw,20px);font-weight:800;letter-spacing:-.015em;
  text-transform:none;color:var(--tx,var(--ink));border-bottom:2px solid var(--bd);
  padding-bottom:8px;margin:38px 0 14px;scroll-margin-top:var(--stick,90px)}
.esc-fam-h.prov-h::before{display:none}
.prov-h .prov-n{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  color:var(--mut,var(--dim));letter-spacing:.04em;text-transform:none}
/* T125, la mitad que faltaba (2026-09-02): el microresumen. Va a la DERECHA del encabezado y
   empujado por `margin-left:auto`, para que se lea como resumen del grupo y no como un tercer
   rotulo pegado al nombre. En movil cae abajo solo, porque el `<h3>` ya es `flex-wrap`. */
.prov-h .prov-r{font-family:var(--mono);font-size:var(--fs-micro);font-weight:600;
  color:var(--ac);letter-spacing:.04em;text-transform:none;margin-left:auto}
@media(max-width:640px){.prov-h .prov-r{margin-left:0}}

/* ===== `.opos` · LOS DOS LADOS DE LA MESA (T121, 2026-08-29). «A 28 les vendes, contra 4
   competis» es una OPOSICION y la pagina la publicaba como cuatro indicadores del mismo tamaño
   (32 · 28 · 4 · 14): el lector se llevaba «cuatro estadisticas del mismo rango». Peor todavia,
   despues las dos listas ocupan 2.997 px contra 445 px, asi que lo que quedaba era «una lista
   enorme y una lista chica», no «dos lados». El 32 y el 14 no desaparecen: bajan a metadato. */
.opos{display:flex;align-items:stretch;gap:0;border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;margin:0 0 8px;background:var(--panel2,var(--card,#fff))}
.opos-l,.opos-r{flex:1 1 0;display:flex;flex-direction:column;gap:3px;padding:18px 20px;
  text-decoration:none;transition:.13s;min-width:0}
.opos-l:hover,.opos-r:hover{background:var(--bg,var(--ac-soft,#eef3f8))}
.opos-v{flex:0 0 1px;background:var(--bd)}
.opos-n{font-family:var(--mono);font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1;
  color:var(--ac);letter-spacing:-.02em}
.opos-k{font-weight:700;color:var(--tx,var(--ink));font-size:1.02em}
.opos-s{color:var(--mut,var(--dim));font-size:var(--fs-micro);line-height:1.45}
.opos-m{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);margin:0 0 22px;
  padding-left:2px}
@media(max-width:640px){.opos{flex-direction:column}.opos-v{flex:0 0 1px;height:1px;width:100%}}

/* ===== `.salta` · IR DIRECTO, SIN RECORRER (T115, 2026-08-29). Para llegar a un oficio habia que
   bajar por las 8 familias enteras. ⛔ El reporte descarta la salida facil y su argumento se
   conserva: «no añadiria progreso porcentual: saber que falta 63% no resuelve nada. Necesita
   navegacion NO LINEAL, no un velocimetro del sufrimiento». */
.salta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:2px 0 20px}
.salta-k{font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);
  text-transform:uppercase;letter-spacing:.09em;margin-right:3px}
.salta-c{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;
  border:1px solid var(--bd);border-radius:20px;padding:5px 12px;transition:.13s;
  color:var(--tx,var(--ink));font-size:var(--fs-micro);background:var(--panel2,var(--card,#fff))}
.salta-c:hover{border-color:var(--ac);color:var(--ac)}
.salta-n{font-family:var(--mono);color:var(--dim)}
.esc-fam{scroll-margin-top:var(--stick,90px)}

/* ============================================================================
   LA CAPA COMERCIAL (2026-09-08) — piezas compartidas por todas las pieles: los dos botones, el
   CTA contextual de una sola idea, la bifurcacion del hero de la portada y el corte del nicho sin
   formulario. Colores por token: cada piel pone los suyos.
   ============================================================================ */
.btn-p,.btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:11px 20px;border-radius:10px;font-family:var(--mono);font-size:15px;font-weight:700;
  text-decoration:none;letter-spacing:.01em;cursor:pointer}
.btn-p{background:var(--ac);color:var(--ink,#0b1118)}
.btn-p:hover{background:var(--ac-lo,var(--ac));color:var(--ink,#0b1118)}
.btn-s{color:var(--ac);border:1px solid rgba(var(--ac-rgb,46,125,178),.5);background:transparent}
.btn-s:hover{border-color:var(--ac);background:rgba(var(--ac-rgb,46,125,178),.07)}
/* el CTA contextual: un titulo literal, una frase y un boton. Filo de acento como el `.pv-cta`
   que el sitio ya usa para «esto es una salida, no un dato». */
.pe-cta{border:1px solid var(--bd);border-left:3px solid var(--ac);border-radius:12px;
  padding:16px 18px;margin:18px 0;background:var(--panel2,var(--card,#fff))}
.pe-cta-h{font-weight:700;font-size:1.06rem;line-height:1.35;color:var(--tx-hi,var(--tx,var(--ink)))}
.pe-cta-p{color:var(--tx2,var(--ink2));margin:6px 0 12px;line-height:1.55;font-size:var(--fs-body-lg,16.5px)}
.pe-cta-btn{white-space:nowrap}
/* ⭐ 2026-09-18 · la segunda linea del CTA, debajo del boton: el analisis real que ya se puede
   abrir. Solo la emiten los cuatro puentes comerciales grandes (`pe_cta_box(..., caso=True)`), no
   cada ficha. Se lee, asi que va al piso de prosa y no al escalon de rotulo. */
.pe-cta-caso{margin:12px 0 0;font-size:var(--fs-body,15.5px);line-height:1.55;color:var(--tx2,var(--ink2))}
.pe-cta-caso a{color:var(--ac);text-decoration:none;font-weight:600}
.pe-cta-caso a:hover{text-decoration:underline}
/* `.pe-caso-link` es el enganche del JS que mide el clic al caso real (evento `Caso real`, en
   `menu_sitio`): existe en 676 paginas y tiene regla propia para que `lint_clases_css` no la lea como
   clase muerta. Lo que hace esta en el JS, no aca. */
.pe-caso-link{cursor:pointer}
/* la bifurcacion del hero de la portada */
.hd-bif{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 2px}
.hd-bif-inst{font-size:var(--fs-body,15.5px);color:var(--tx2);margin:8px 0 0}
.hd-bif-inst a{color:var(--ac);text-decoration:none}
.hd-bif-inst a:hover{text-decoration:underline}
/* el corte del nicho sin la columna del formulario */
.pv-corte-cta{grid-template-columns:1fr}
.pv-corte-cta .pv-corte-p{margin-top:4px}
/* lote 2 y 3: la linea debajo de la tarjeta cruzada de la provincia inversor, la linea institucional
   y la linea gris de la columna PyME de escalas. Texto con enlace, nunca caja. */
.pp-puente-cta{font-size:var(--fs-body,15.5px);color:var(--tx2,var(--ink2));margin:8px 0 0;line-height:1.5}
.pp-puente-cta a{color:var(--ac);text-decoration:none;font-weight:600}
.pe-inst-line{font-size:var(--fs-body,15.5px);color:var(--tx2,var(--ink2));margin:12px 0 0;line-height:1.55}
.pe-inst-line a{color:var(--ac);text-decoration:none;font-weight:600}
.esc-dec-lk{font-size:var(--fs-body,15.5px);color:var(--dim,var(--ink3));margin:10px 0 0}
.esc-dec-lk a{color:var(--dim,var(--ink3));text-decoration:underline}
.esc-dec-lk a:hover{color:var(--ac)}

/* ⭐ UNA SOLA BARRA ARRIBA (2026-09-12, decision del usuario) — el JS comun mete el menu dentro de
   la cabecera y le pone esta clase, arriba de 1100 px.
   ⛔ Abajo de 1100 el JS lo saca: el telefono queda como estaba ([[L1936]]).
   ⚠️ Desde el 2026-09-17 alcanza tambien a las paginas con la frase de marca (autor, para-empresas,
   metodo, institucionales y legales): se midio que entra a 1100, 1366, 1440 y 1920 px. */
.barra-unica>.brand-tag{order:0;flex:0 0 auto}
@media(min-width:1100px){
  header.barra-unica{flex-wrap:nowrap;gap:18px;padding:6px 16px}
  header.barra-unica>.brand{order:1;flex:0 0 auto}
  header.barra-unica>.mnu{order:2;flex:1 1 auto;min-width:0;position:static;border:0;background:none;padding:0}
  header.barra-unica>.coords{order:3;flex:0 0 auto}
  header.barra-unica>.langsw{order:4;flex:0 0 auto}
  header.barra-unica>.mnu-cta{order:5;flex:0 0 auto}
  header.barra-unica .mnu-wrap{max-width:none;margin:0;padding:0;gap:2px}
  header.barra-unica .mnu-lat{margin-left:0}
  header.barra-unica .mnu-d>summary,header.barra-unica .mnu-i{padding-top:6px;padding-bottom:6px}
}
/* el boton dice el resultado y mide ~290 px: abajo de 1440 sale la fecha, que es lo que menos pesa
   de la barra y ademas esta en el pie. La navegacion entera se queda. */
@media(min-width:1100px) and (max-width:1439px){ header.barra-unica>.coords{display:none} }

/* ================================================================================================
   LA CABECERA EN COMPUTADORA, CUANDO LLEVA CONTEXTO (2026-09-16)
   La barra unica se midio sobre la PORTADA, que lleva cinco cosas: marca, menu, fecha, idioma y
   boton. Las demas paginas meten ademas el contexto —«< Portada», «PARA INVERTIR · NEUQUEN», las
   puertas a las otras caras—, y para esas piezas no habia ninguna regla: caian en `order:0` (antes
   de la marca) y no podian encoger, asi que el menu —el unico con `min-width:0`— absorbia todo el
   faltante y quedaba con 0 px de ancho, con sus palabras impresas encima de las vecinas.
   Medido en las 863 paginas publicadas: 340 rotas a 1440 px y 110 a 1366.

   ⛔ NO SE INVENTA FORMA NUEVA. Son las cuatro reglas que ya estaban decididas para el telefono o
   para la ficha, a las que solo les faltaba llegar a este ancho:
     1. «La marca antes del contexto de la ficha» (D2, aprobada; vivia solo en `nicho.css`).
     2. «La fecha es lo que menos pesa de la barra, y ademas esta en el pie» (vivia entre 1100 y
        1439 px; aca se extiende a toda cabecera que lleve contexto).
     3. «Dos veces la misma palabra, una al lado de la otra»: el rotulo suelto se esconde cuando el
        desplegable de al lado ya lo dice (vivia hasta 560 px).
     4. «La cabecera de provincia sigue envolviendo, que es lo correcto» (vivia hasta 560 px).
   Las cuatro cuelgan de QUE LLEVA la cabecera, nunca del nombre de la pagina.
   ================================================================================================ */
@media(min-width:1100px){
  header.barra-unica>.brand{order:-1;margin-right:4px}
  header.barra-unica:has(>.back,>.chip,>.swn-d)>.coords{display:none}
  header.barra-unica .chip:has(+.swn-d){display:none}
  header.barra-unica:has(>.back,>.chip,>.swn-d){flex-wrap:wrap;row-gap:4px}
}

/* ================================================================================================
   EN COMPUTADORA, LA BARRA «IR A» SE LEE COMO EL INDICE FINO (2026-09-16)
   El molde 1 (12-sep) reemplazo la barra pegada por el indice fino porque «cobraba 58 px de cromo
   en toda la pagina» para una pagina que ya tiene el menu arriba; el molde 2 la siguio. Los otros
   moldes nunca se auditaron y siguen con la barra: 212 paginas que suman 52-58 px de cromo fijo
   debajo de una cabecera que ya mide 54.

   ⛔ ESTO NO TOCA EL TELEFONO, y no es prudencia: abajo de 560 px la `pnav` NO es una barra, es el
   boton flotante que abre el indice entero, y se construyo con su propia medicion (28-ago: a 390 px
   la cinta mostraba 1 chip de 10 y habia 209 paginas donde el lector no se enteraba de que existian
   las otras secciones). Ahi sigue igual.

   ⚠️ `nav.pnav` y no `.pnav`: las dos pieles redeclaran `.pnav` con su fondo y su sombra, van
   DESPUES de este archivo y a igual especificidad ganan ellas. Sumar el elemento sube un escalon.
   ================================================================================================ */
@media(min-width:1100px){
  nav.pnav{position:static;top:auto;z-index:auto;background:none;box-shadow:none;
    border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin:26px 0 6px;padding:11px 0}
  /* ⛔ ancho y relleno los pone `.page`, que ahora es su padre: repetirlos aca lo indentaba 18 px
     de mas y lo sacaba de la columna del texto. */
  nav.pnav .pnav-wrap{max-width:none;margin:0;padding:0;flex-wrap:wrap;
    align-items:baseline;gap:4px 13px}
  /* el rotulo deja de ser una etiqueta fija fuera del scroll y pasa a ser el rotulo del indice */
  nav.pnav .pnav-lbl{font-size:var(--fs-tag);letter-spacing:.09em;color:var(--dim);margin-right:2px}
  nav.pnav .pnav-lbl::before{display:none}
  /* la fila deja de deslizarse de costado: envuelve, que es lo que hace el indice fino */
  /* ⛔ `flex-basis:0` y no `auto`: con `auto` el bloque de enlaces pide TODO su ancho de contenido,
     no entra al lado del rotulo y se va entero al renglon siguiente — o sea que «IR A» se quedaba
     con una fila para el solo. Con base 0 comparte fila y los enlaces envuelven adentro. */
  nav.pnav .pnav-in{flex:1 1 0;min-width:0;flex-wrap:wrap;overflow:visible;padding:0;gap:4px 13px;
    background:none;-webkit-mask-image:none;mask-image:none}
  nav.pnav .pnav-in>a,nav.pnav .pnav-g>a{font-size:var(--fs-label);color:var(--ac);
    text-decoration:none;background:none;border:0;border-radius:0;padding:0 0 2px;
    border-bottom:1px solid rgba(var(--ac-rgb),.42)}
  nav.pnav .pnav-in>a::before,nav.pnav .pnav-g>a::before{content:"\2193";margin-right:4px;opacity:.7}
  nav.pnav .pnav-in>a:hover,nav.pnav .pnav-g>a:hover{color:var(--tx);border-bottom-color:var(--ac)}
  /* el destino activo no se pinta como chip relleno: en una linea de enlaces eso es un bloque */
  nav.pnav a[href].on{background:none;color:var(--tx);border-color:transparent;
    border-bottom:2px solid var(--ac);font-weight:600}
}


/* ============================================================================================
   ⭐ LA LEYENDA DE SELLOS, PLEGABLE EN EL TELEFONO (2026-09-12, pasada visual del molde 1)
   Va ACA y no en cada piel porque la leyenda la emiten las 793 paginas y `tokens.css` es la unica
   hoja que cargan todas.
   ⛔ EN COMPUTADORA NO CAMBIA NADA: arriba de 761 px el rotulo y el cuerpo vuelven a ser texto en
   linea —la misma fila corrida de hoy— y el bloque no se puede plegar (`pointer-events:none`),
   asi que un clic distraido no puede esconder la leyenda de un lector de escritorio.
   ⛔ Y no rompe el aterrizaje de los links `#sellos`: el JS la deja abierta cuando el hash apunta
   a ella. Sin JS queda abierta en los dos anchos, que es el comportamiento de hoy.
   ============================================================================================ */
.leyenda.sellos>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  min-height:26px;line-height:1.5}
.leyenda.sellos>summary::-webkit-details-marker{display:none}
.leyenda.sellos>summary::after{content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.5;transition:transform .15s}
.leyenda.sellos[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
/* ⚠️ EN COMPUTADORA EL ROTULO VA FLOTADO, Y NO ES CAPRICHO: medido a 1366 px, con el `<summary>`
   en linea la leyenda pasaba de 65 a 98 px —una fila mas en las 793 paginas— porque el summary
   abre su propia caja de linea igual. Flotandolo, el cuerpo lo rodea y el bloque vuelve a medir
   exactamente los 65 px de antes. Es el mismo recurso que ya usa `.cap2-busca legend`. */
@media(min-width:761px){
  .leyenda.sellos>summary{display:inline;float:left;margin-right:6px;line-height:inherit;
    min-height:0;gap:0;pointer-events:none}
  .leyenda.sellos>summary::after{display:none}
  .leyenda.sellos>summary>a{pointer-events:auto}
  .leyenda.sellos>.ley-body{display:inline}
}

/* ============================================================================================
   LOS CAMPOS DE UN FORMULARIO MIDEN 16 px EN EL TELEFONO
   ⛔ Por debajo de 16 px, el navegador del iPhone AMPLIA la pagina al tocar el campo y no la
   devuelve: el lector queda con la hoja mas ancha que la pantalla, arrastrando de costado, y la
   unica salida es alejar con dos dedos. `font:inherit` deja los campos en 15/15,5 px, que es
   justo por debajo del limite. Los redondos y las casillas no disparan el zoom y no entran.

   ⚠️ VA CON `!important` Y NO ES PEREZA: cada molde declara el suyo con dos clases
   (`.cierre-zone .cap2-f input`, `.cta-in`, `.cap-nicho`…), asi que un selector de elemento pierde
   siempre. Escribirlo molde por molde lo deja roto para el molde que venga: el campo nuevo nace
   con `font:inherit` y el zoom vuelve. Esta es la unica regla que tiene que ganarle a todos.
   ============================================================================================ */
@media(max-width:720px){
  input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],
  input[type=number],input[type=password],input:not([type]),select,textarea{font-size:16px!important}
}