/* ============================================================================ nicho.css - LO ESPECIFICO DE LA PAGINA DE NICHO, compartido por ambas audiencias (inversor dark + gente claro). Clases nh-/af-/ck-/nm-/hm-/gc-, tokenizadas. Extraido de despegue.css (2026-06-30); el vocabulario `py*` SALIO de aca a molde.css el 2026-08-15 (U16 · D2, 287 reglas) porque no era CSS «del nicho»: mientras vivio adentro, la portada y las provincias no podian adoptar la piel nueva, porque no enlazan esta hoja. ⛔ No devolver `py*` aca. Si una regla vale para mas de una familia de pagina, su casa es molde.css (o tokens.css si vale para las dos pieles). DONDE ENCAJA EN LA CASCADA: fonts -> tokens -> molde -> [nicho|oficio] -> skin -> cierre. El contrato completo, con el porque de cada escalon, vive en UN solo lugar y no se copia: la cabecera de `pipeline/generar_html.py` (constante CSS_MOLDE / CSS_NICHO). Consecuencia que se usa todo el tiempo: esta hoja va ANTES del skin, asi que el skin gente puede pisar los pocos fondos dark hardcodeados que quedan (.nm-card). El .b.warn (status badge compartido) NO esta aca: queda en despegue.css (lo usan portada/provincia). EL RADIO ES DE LOS CONTROLES, NO DEL CONTENIDO (U15, 2026-08-15 — medido, no opinado). ⭐ La doctrina, con su medicion caja por caja sobre la pagina de proyecto, esta escrita en la cabecera de `despegue.css` y NO se repite aca (hasta el 16-ago estaba en las dos y esta copia ya nombraba piezas extintas — `.nv` y `.nh-ver` murieron con U16·A1). Lo que si es de esta hoja: por esa regla `.nm-card`, `.md-var`, `.md-formula`, `.md-lp`, `.hm-res`, `.qp-remate` y `.nh-arco` perdieron su radio, y `.nm-go` / `.fr-chip` lo conservan por ser controles. Si agregas un contenedor de contenido, no le pongas border-radius: la caja se separa por el marco y la regla, no por la esquina. ============================================================================ */ /* ⭐ EL ANCHO DEL NICHO SE IGUALA AL DEL RESTO DEL SITIO — decision del usuario, 2026-08-27. Lo abrio el navegando: *«¿por que los nichos no usan el mismo ancho que las otras paginas? Son mas angostas»*. Eran 1000 px contra 1320 del resto, y **para ese 1000 no habia ningun motivo escrito**: lo puso el commit del molde de nicho para gente y nunca se justifico. ⭐ SE MIDIO ANTES DE TOCARLO, y el resultado es que ensanchar aca es GRATIS: caracteres por renglon 105 -> 105 (NO SE MUEVE) alto de la pagina -672 px El texto no se mueve porque su parrafo tiene tope propio (`.page.nicho p` a 780 px, la regla de abajo). Ensanchar el contenedor le da aire SOLO a las tablas y las grillas, que es lo que en esta hoja iba apretado -- y la pagina se acorta 672 px porque las filas dejan de partirse. ⛔ POR QUE NO SE TOCA LA PIEL CLARA, aunque tambien sea mas angosta (1020): ahi NO hay tope de parrafo, asi que ensanchar la lleva de 137 a **199 caracteres por renglon** (`nicho-gente`) y de 134 a 182 (`provincia-gente`). Medido. Ensanchar solo gana donde el parrafo ya esta acotado. ⚠️ Verificado antes de aplicar: las 130 paginas con `.page.nicho` son **todas de piel oscura**; ninguna hoja gente lleva esta clase. */ .page.nicho{max-width:var(--w-page)} /* anclas de seccion: deep-link compartible + destino de la barra-indice `.pnav`. El aterrizaje compensa la zona sticky COMPLETA (header + barra); `--stick` lo fija el JS y vale hh+ph+14, asi que en una pagina sin `.pnav` da lo mismo que el 66px de antes. ⚠️ Esta linea decia «el indice visible se descarto 2026-07-03» y era de OTRO componente: lo descartado fue un mini-indice «En esta pagina» no sticky (`32c6af99`), y la `.pnav` la eligio el usuario sobre captura comparada el 15-jul (`8bf66a90`). ⭐ ESTADO: la barra baja a los 4 moldes largos. Estuvo DETENIDA desde el revert `32be4609` «hasta que cierre el analisis de los 24 moldes»; ese analisis cerro y la propuesta volvio aprobada como `P6` de `T137` (2026-08-24), asi que la regla que la frenaba quedo derogada por `MAGA-PAGINA-001`. Se re-aplico como `B8` — y NO con el `cherry-pick` que el papel prescribia: ver `T139`. */ .idx-sec,.page.nicho #fuentes{scroll-margin-top:var(--stick,66px)} /* hero del nicho ── U16·A1 (2026-08-15): el hero TERMINO SU PORT y estas 11 reglas MURIERON con el. `.nicho-hero` `.nh-k` `.nh-t` `.nh-ver` `.nh-ver-t` `.nh-lead` `.nh-bar` `.nh-tam` `.nh-tam-v` `.nh-tam-c` `.nh-tam-k` fueron la MISMA pieza que el hero de proyecto hasta la 1a-b vuelta del port (`ff1a200b`), que las evoluciono a `.pyh-*` sin tocar el nicho. Ahora el nicho las usa: ver el bloque `.pyh` mas abajo en esta hoja. Verificadas extintas en las 207 paginas antes de borrarlas (0 apariciones); `.nh-arco` es la unica que sigue viva y por eso se conserva. */ .nh-arco{font-family:var(--mono);font-size:var(--fs-sub);color:var(--mut);padding:5px 11px;border:1px solid var(--bd); border-left:3px solid var(--ac);background:rgba(255,255,255,.013)} /* V29: ver despegue.css — el arco lleva su propio ambar, no el rojo de 'sin confirmar'. */ .nh-arco.fz-urgente{border-left-color:var(--urg)}.nh-arco.fz-emergente{border-left-color:var(--cy)} /* la norma que lo mueve — deep-link a #ref-... de la portada */ .nn-row{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;border-bottom:1px solid var(--bd); text-decoration:none;transition:.13s} .nn-row:last-child{border-bottom:none} .nn-row:hover{background:rgba(var(--ac-rgb),.04)} /* columna fija: el enum tiene 3 largos (HABILITA/PRESIONA/TOCA) y con flex auto el titulo arrancaba en x distinto por fila (feedback usuario 2026-07-03) */ .nn-ef{flex:0 0 88px;margin-top:2px;text-transform:uppercase;text-align:center} .nn-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .nn-n{font-size:15px;font-weight:700;color:var(--tx);line-height:1.3} .nn-row:hover .nn-n{color:var(--ac)} /* `.nn-g` (la glosa) murio con U16·A7: la fila de norma paso a `.pyr-i` y su glosa es `.pyr-i-g`. El resto del bloque `.nn-*` SIGUE VIVO — Vicuña lo usa en «Fuentes oficiales», que es el segundo consumidor de la pieza y el motivo por el que A7 va scopeada. Verificado: 5 instancias. */ .nn-go{flex:0 0 auto;align-self:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em; text-transform:uppercase;color:var(--ac);white-space:nowrap} @media(max-width:640px){.nn-go{display:none}} /* nichos vecinos (internal links) ── U16·A3 (2026-08-15): `.nicho-vec` (grilla de 2 tarjetas) y `.nv`/`.nv-n` MURIERON. Los vecinos usan las FILAS de Vicuña (`.pyi-rows.pyi-vec`, ver §pyi-vec mas abajo): nombre a la izquierda, TAM a la derecha, filete entre filas. Verificadas extintas en las 207 paginas antes de borrar. `.nv-t` sobrevive: es el TAM en mono acento y no hay celda equivalente en la fila de Vicuña. */ .nv-t{font-family:var(--mono);font-size:var(--fs-sub);color:var(--ac)} /* firma del analista en la pagina de nicho (autoridad/E-E-A-T): hd-firma esta pensada para el hero CLARO del inversor -> suelta sobre el fondo oscuro quedaba caja blanca. Aca va como panel oscuro. */ /* ⚠️ LAS CUATRO REGLAS DE COLOR YA NO SE DECLARAN ACA: el 2026-08-27 se promovieron a la base (`.hd-firma` en despegue.css). Este era el UNICO lugar del sitio donde la firma se veia bien, asi que lo correcto no era copiarlo a las otras 216 paginas sino subirlo. Eran cuatro y no una -- fondo/borde/texto, el rol, las credenciales y el subrayado del nombre --, y promover solo la primera dejo las credenciales a 2,50 de contraste hasta que `contraste.py` lo cazo. Queda SOLO lo que es de esta superficie: el lugar de la caja en la pagina. */ .nicho .hd-firma{margin:0 0 22px;flex:none;width:auto} /* ⭐ EL TOPE DEL PARRAFO SUBE DE 780 A 940 -- decision del usuario, 2026-08-27. Nace de que el usuario mirara la rama despues de que el CONTENEDOR subiera a 1320: el texto quedaba cortado a 780 mientras el titulo, la regla horizontal y las secciones llegaban al borde, y eso se lee como una pagina a medio llenar. ⛔ El defecto NO era la medida de linea, era que el parrafo no se alineaba con nada de lo que lo rodea. ⭐ MEDIDO ANTES DE APLICARLO sobre la hoja real (`probe_parrafo.py`, 7 combinaciones): tope caracteres aire a la derecha alto de la pagina 780 84 540 px 14.691 px <- como estaba 860 92 460 px -643 px 940 101 380 px -962 px <- ESTE 1020 110 300 px -1.231 px sin tope 133 86 px -1.633 px Es el unico que mejora las DOS cosas a la vez: menos aire y pagina mas corta. Los 101 caracteres no son un salto al vacio -- el resto del sitio esta en 130, asi que esta sigue siendo la prosa mas comoda de leer del sitio. ⛔ LO QUE SE DESCARTO, y por MEDICION y no por gusto: bajar el contenedor. Es la salida intuitiva -- si sobra aire, achica la pagina -- y es la peor de las siete: a 1100 la hoja crece 643 px y a 1000, 1.693 px, porque con el contenedor ancho las tablas y las grillas dejan de partirse. ⚠️ EL ARGUMENTO EN CONTRA, declarado: 780 px daba 84 caracteres, que es la mancha de Vicuna (85-95) -- la referencia que el propio usuario fijo el 26-ago. Subir a 940 se aleja de ella. Se le mostro renderizado con las 3 capturas y el conmutador de tres ejes, y lo eligio igual. ⚠️ Este tope solo alcanza a los `

` DIRECTOS: las `li`, los `.disc` y los `.prosa` van al ancho del contenedor. Por eso el renglon mas ancho de la pagina sigue siendo el descargo legal y no se mueve con esta regla. [[L1203]] */ /* ⭐ 2026-09-07 — ESTE TOPE PASA A SER EL MISMO DEL RESTO DEL SITIO (63ch, ~640 px). ⛔ REEMPLAZA LA DECISION DEL 26-AGO que fijo 940 px, y no se hace en silencio: aquella se tomo con tres capturas delante y el usuario eligio 940 sabiendo que se alejaba de la mancha de Vicuña (85-95 caracteres) que el mismo habia fijado. El 7-sep se le mostro ESTA MISMA PAGINA entera, hoy contra la propuesta, y eligio la propuesta. Medido: con 940 px el renglon entrega **116** caracteres, no los 101 que decia la tabla de arriba —los tamaños se movieron desde entonces— y con 63ch entrega **77**. ⚠️ Volver a 940 es cambiar este numero y nada mas. */ .page.nicho p{max-width:min(100%,63ch)} /* ===== tick de sección: el acento, NUNCA la paleta de sellos (T142, 2026-08-24) ===== Acá vivían `.t-ver` / `.t-est` / `.t-pro` / `.t-bad`, que pintaban el filete de 22×2 px con los MISMOS tokens que la leyenda de sellos enseña. Se sacaron, y no por gusto de diseño: medido sobre el HTML emitido, el color no codificaba nada y en el caso peor mentía. · `t-ver` (verde = VERIFICADO) sobre «Cómo validamos esta cifra» y «La norma que lo mueve», 102 páginas — y adentro hay **108 `estim` + 10 `prob` y CERO `verif`**. · `t-est` (violeta = ESTIMACIÓN) sobre 3 rótulos distintos, 102 páginas — adentro conviven 726 `prob`, 718 `verif`, 502 `estim`, 214 `ap`, 210 `tesis`… o sea, todo. · `t-pro` (oro = PROBABLE) sobre «¿Quién paga de verdad?» — adentro 2 `verif` y 2 `prob`. · `t-bad` (rojo = REFUTADO): **0 páginas lo emitían**. Era CSS muerto. ⇒ Todos caen al `background:var(--ac)` de la base (`despegue.css .sec-h::before`), que es el acento de la piel y **no está en la leyenda**. Las clases se sacaron también del emisor: dejarlas en el HTML sin regla es lo que `lint_clases_css` caza. ⚠️ `t-tx` y `t-mut` (más abajo) SE QUEDAN: usan `--tx` y `--mut`, que no son tokens de sello. */ /* ===== EL NICHO A FONDO — transición + panel con filas etiquetadas (rótulo en el margen) ===== */ .af-trans{margin-top:50px;padding-top:30px;border-top:1px solid var(--bd2)} /* 'El nicho a fondo' = ENCABEZADO de transicion, NO un chip clickeable: sin caja (fondo/borde) para no hablar el idioma visual de lo interactivo (L151, convencion visual). Marcador = tick (como sec-h), no puntito de status. Queda como rotulo de seccion, mas prominente por el corte (af-trans top-border). */ /* P2/T137 (2026-08-25): el rotulo pasa a `h2` en el emisor -- es el bloque mas grande del molde (49,1% del cuerpo) y era el unico de 10 sin encabezado. `margin:0 0 13px` (era `margin-bottom`) anula el margen-top que el navegador le da a un `h2`: el pixel queda identico al del `div`. */ .af-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin:0 0 13px} .af-badge-dot{width:14px;height:3px;border-radius:2px;background:var(--ac)} .af-trans-p{margin:0;max-width:680px;font-size:var(--fs-body-lg);line-height:1.55;color:var(--mut)} .nicho-afondo{margin-top:20px;padding:8px 30px 6px} /* U16·A4 (2026-08-15): `.af-row`, `.af-lbl` y `.af-c` MURIERON — la fila rotulada de «el nicho a fondo» usa `.pyq` (mas abajo en esta hoja), su evolucion en la 4a vuelta del port. Verificadas extintas en las 207 paginas antes de borrar. `.af-sub` sobrevive: es el sub-rotulo, y la fila de Vicuña no tiene celda equivalente. */ .af-sub{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:6px} .af-p{margin:0;font-size:var(--fs-body-lg);line-height:1.62;color:var(--tx2)} /* U16·A4: era `.af-c .af-p+.af-p` */ /* quién ya está */ .af-incs{display:flex;flex-direction:column;gap:17px} .af-inc-h{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:5px} .af-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .af-dot.inc{background:var(--pro)}.af-dot.ac{background:var(--ac)}.af-dot.dim{background:var(--dim)} .af-inc-n{font-size:15px;font-weight:700;color:var(--tx)} /* incumbente con ficha -> nombre clickeable a su ficha (deep-link). Discreto: subrayado al hover. */ a.af-inc-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--bd2);transition:.13s} a.af-inc-link:hover{color:var(--ac);border-bottom-color:var(--ac)} /* --- D5 (sesion 4) · el link a la hoja GENTE del mismo nicho ------------------------------------ La fila «Efecto derrame · Para la gente» publicaba el campo `externalidades` ENTERO, y 13.042 de esas palabras estaban verbatim en la hoja gente del mismo nicho — que es la superficie donde ese texto se LEE (regla del RUNBOOK §4). Acá queda el argumento en una frase y este link; las 27 hojas sin gemela conservan la fila completa. Es el ÚNICO link de la hoja del proveedor a su cara clara: antes eran 0 de 51. Por eso va marcado como link y no heredando color de parrafo. */ a.af-ext-lnk{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.38); transition:.13s;font-weight:500} a.af-ext-lnk:hover{border-bottom-color:var(--ac)} .af-paren{font-weight:400;color:var(--mut)} .af-share{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--mut)} /* ⚠️ RED CONTRA EL AZUL DEL NAVEGADOR (2026-08-10). El sitio NO tiene regla global de `a`: cada link depende de que SU clase defina color, y la clase que se olvida cae a `rgb(0,0,238)` — el azul de Netscape sobre fondo negro. Medido en la pagina de proyecto: 64 de 195 links (33%) salian asi, por `.nn-row` y `.nv`, que tienen reglas pero ninguna de color. Es la TERCERA vez que aparece este defecto en lugares distintos, asi que la cura va en la clase, no en la instancia. Especificidad 0-0-1: cualquier regla con clase le gana, o sea que no pisa ningun color existente — solo atrapa al que no tiene ninguno y lo deja del color del texto que lo rodea. */ a{color:inherit} /* los links PELADOS del molde (sin clase) necesitan verse clickeables, no heredar y desaparecer. El del kicker se fue con U16·A1: el kicker es `.pyh-via`, que ya trae su propia regla de `a`. */ .disc a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.28)} .disc a:hover{border-bottom-color:var(--ac)} /* ===== U1 · MIGRACION DE PIEL (MAGA-PIEL-001, 2026-08-14) ================================== El bloque «el hueco» de la pagina de NICHO pasa al idioma de la pagina de proyecto: PLANO — sin marco cerrado, sin fondo tintado, sin radio— con el filo de acento como unica marca. Es la misma decision que el comentario «V2 VISUAL» de mas abajo ya habia escrito para `ck-ind` el 2026-08-09 («panel > ck-ind > lineas eran TRES bordes anidados con el mismo radio y el mismo azul») y que nunca llego a pantalla porque su selector no matcheaba (ver alli). ⚠️ EL CORTE ES POR ELEMENTO, y es exacto: `

` lo emite SOLO el nicho (generar_html 2639/2642); `
` lo emite SOLO `_py_vacio` (7921), el estado vacio de la pagina de proyecto, que conserva intacta su gradacion de 3 estados (.af-pend punteado = deuda nuestra · .af-etapa apagado = etapa no alcanzada). Tocar la clase base habria repintado los ~12 estados vacios del molde de proyecto sin que nadie lo pidiera (P3 del RUNBOOK). */ section.af-hueco{margin:6px 0;background:none;border:0; border-left:2px solid rgba(var(--ac-rgb),.34);border-radius:0;padding:2px 0 2px 20px} @media(max-width:640px){section.af-hueco{padding-left:12px}} /* U16·A2 (2026-08-15) — `.af-pasos/.af-paso/.af-num` MURIERON: los pasos del mapa de entrada usan `.pyo-list/.pyo/.pyo-n` (mas abajo en esta hoja), que es la misma pieza evolucionada en la 4a vuelta del port de Vicuna. Verificado extinto en las 207 paginas antes de borrar la regla. */ .af-reg{margin:0 0 12px;font-size:var(--fs-body);line-height:1.62;color:var(--mut);max-width:600px} /* BLOCK, no flex: con flex los nodos de texto sueltos + un se vuelven items separados en fila y el caveat "se parte en columnas" (flag lectura fría C1 2026-07-09; solo pegaba donde el caveat traía negrita). El ▸ va inline con margen. */ /* U16·B5 (2026-08-16, aceptada por el usuario) — 10,5px -> `--fs-label` (11,5px). `tokens.css` declara `--fs-label` como PISO de la escala tipografica y este caveat estaba abajo, hardcodeado: era el texto mas chico de la pagina de nicho, en 103 paginas (102 de nicho + Vicuña, que emite 16 via `_py_cav`). +1px, ninguna otra propiedad, sigue entrando en 2 lineas. */ .af-cav{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;line-height:1.6;color:var(--dim)} .af-cav>span:first-child{color:var(--ac);margin-right:8px} /* embudo honesto completo (mercado_direccionable): cautivo -> tu mercado -> cuña. Los dos peldaños previos son sobrios (borde neutro / medio); la cuña conserva el ámbar protagonista. */ .af-emb{margin:13px 0 0;padding:9px 14px;border-left:3px solid var(--bd2);border-radius:0 9px 9px 0;background:var(--tint)} .af-emb.mid{border-left-color:var(--ac)} .af-emb-k{display:block;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:5px} .af-emb.mid .af-emb-k{color:var(--ac)} .af-emb .af-p{margin:0} .af-emb+.af-cuna{margin-top:0} .af-emb+.af-emb{margin-top:0} /* cuña realista (mercado_direccionable.cuna): el contrapeso honesto a la ARENA de la composición (METODO §2). Acento ámbar a la izquierda = "el número que de verdad capturás", no el segmento entero. */ .af-cuna{margin:13px 0;padding:11px 14px;border-left:3px solid var(--pro);border-radius:0 9px 9px 0;background:rgba(var(--pro-rgb),.06)} .af-cuna-k{display:block;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pro);margin-bottom:5px} .af-cuna .af-p{margin:0} /* qué lo puede romper */ /* efecto derrame */ .af-ext{border-left:2px solid rgba(var(--ver-rgb),.5);padding-left:16px} /* cómo lo calculamos */ .af-formula{font-family:var(--mono);font-size:var(--fs-micro);line-height:1.7;color:var(--mut)} .af-conc-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-right:4px}@media(max-width:680px){ /* U16·A4: era .af-row */ .nicho-afondo{padding:6px 4px}} /* ===== #6 MAPA DE ENTRADA (dentro del hueco): lo que se necesita -> abierto; el playbook -> reservado ===== */ .hm{margin-top:17px;padding-top:15px;border-top:1px dashed var(--bd2)} .hm-intro{font-size:var(--fs-sub);font-weight:600;color:var(--tx);margin-bottom:11px} /* ⛔ LA FAMILIA `hm-*` DE FILA (`hm-rows` `hm-row` `hm-k` `hm-v`) SE EXTINGUIO en U16·B1+B2 (2026-08-16). Sus dos consumidores —el mapa de entrada del nicho (424 inst. en 102 pag.) y las 12 filas de `#s-acto`— pasaron a `.pyq`, la fila rotulada del molde. Lo que queda de `hm-*` en esta hoja es el CONTENEDOR del mapa (`.hm`, `.hm-intro`, `.hm-res`), que no es una fila. */ /* U16·B1 (2026-08-16) — LAS TRES REGLAS SCOPEADAS DE U1 SE FUERON, y con ellas el dialecto. U1 le habia dado a la fila del mapa la anatomia de `py-li-h` SIN cambiarle la clase, y scopeado a `section.af-hueco` porque el otro consumidor de `.hm-row` (las 12 filas de `#s-acto`, con etiquetas que son oraciones) no toleraba una columna de 104px fijos. B1 resuelve el problema de raiz: la fila del mapa PASA a `.pyq`, la fila rotulada del molde, que ya vive en estas mismas 102 paginas desde A4 (200px de columna, gap 32, prosa a 16,5/1,7). El scope deja de hacer falta porque ya no hay dos consumidores compartiendo una clase: hay dos clases, cada una con su medida. */ .hm-res{margin-top:13px;padding:11px 14px;border:1px dashed var(--bd2);background:rgba(255,255,255,.02); font-size:var(--fs-micro);line-height:1.55;color:var(--mut)} .hm-res-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pro);margin-right:6px} .hm-res a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(var(--ac-rgb),.4)} .hm-res a:hover{border-bottom-color:var(--ac)} /* letra chica del pago (F8c 2026-07-29): `disposicion_pago` restituido, plegado, despues del mapa — cuando se cobra la primera factura, el costo fiscal y las puertas comerciales. Cerrado por defecto: el mapa sigue siendo el titular y esto es lo que se abre cuando ya se decidio mirar. */ /* U16·A6 (2026-08-15) — `.hm-det` y `.hm-det-body` MURIERON. El detalle de pago SIGUE PLEGADO (decision del usuario: el plegado es deliberado, y estar plegado no es motivo para conservar el estilo viejo) pero usa el plegable que Vicuña SI tiene: `.pyi-d` + `.pyi-d-solo`, mas abajo en esta hoja. Verificadas extintas en las 207 paginas antes de borrar. */ /* ===== #8 COCKPIT — que vigilamos / cuando entrar (tablero de TIMING, no 'que lo rompe') ===== */ .nicho-cockpit{display:flex;flex-direction:column} /* U1 (MAGA-PIEL-001, 2026-08-14): la tarjeta del indicador pasa al idioma nuevo — PLANA, con el filo de acento como unica marca. Es EXACTAMENTE lo que el bloque «V2 VISUAL» de mas abajo decidio el 2026-08-09 y no llego nunca a pantalla (su selector pedia `ck-ind` DENTRO de `ck-comp`, y en el render son HERMANOS: la regla no matcheaba una sola vez en 102 paginas — ver alli). ⛔ NO se convierte en `py-li`, aunque el plan lo proponia: `py-li` es una LISTA de N filas plegables y aca hay exactamente UN indicador por pagina, que ademas es a proposito «la card destacada, el gancho de retencion» (docstring de `_nicho_cockpit`). Una lista de un elemento no es el idioma nuevo, es un defecto de forma. Lo que se porta es la ANATOMIA (etiqueta mono 13/700, titular 15/600, cuerpo 15 sobre --tx, contenedor plano), no el componente. */ .ck-ind{border:0;border-left:2px solid rgba(var(--ac-rgb),.34);border-radius:0; background:none;padding:2px 0 2px 20px;margin-bottom:18px} .ck-ind-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:9px} .ck-ind-tag{font-family:var(--mono);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)} .ck-ind-l{font-size:var(--fs-body-lg);font-weight:600;color:var(--tx);margin-bottom:7px;line-height:1.45} .ck-ind-v{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;color:var(--ac)} .ck-ind-m{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--tx2);max-width:640px} @media(max-width:640px){.ck-ind{padding-left:12px}} .ck-seguir{margin-top:11px;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.02em; color:var(--mut);padding-top:10px;border-top:1px solid var(--bd);line-height:1.5;text-decoration:none;transition:.13s} a.ck-seguir:hover{color:var(--ac)} a.ck-seguir .se-go{color:var(--ac)} /* .conf-nota se mudo a tokens.css el 2026-08-15 (U16 · el hueco de U5): la emiten las 3 skins —103 nichos, 12 de las 23 oscuras y 27 paginas claras— y aca solo le llegaba a los nichos. */ .ck-comp{margin:0 0 16px;font-size:var(--fs-body-lg);line-height:1.6;color:var(--dim);max-width:680px} .ck-watch{border-top:1px solid var(--bd);padding-top:15px} .ck-watch-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:13px} .ck-ws{display:flex;flex-direction:column;gap:14px} .ck-w{display:grid;grid-template-columns:16px minmax(0,1fr);gap:11px;align-items:start} .ck-wx{color:var(--warn);font-size:12px;line-height:1.5} .ck-wf{font-size:var(--fs-body);font-weight:600;color:var(--tx);margin-bottom:3px} .ck-wp{margin:0;font-size:var(--fs-body-lg);line-height:1.58;color:var(--dim);max-width:620px} /* ===== #9b ¿QUIEN PAGA DE VERDAD? — tres puertas (si vendes X -> el cliente es Y) ===== */ .nicho-qpaga{display:flex;flex-direction:column} .qp-rows{display:flex;flex-direction:column} .qp-row{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1.3fr);gap:14px;align-items:center; padding:16px 0;border-top:1px solid var(--bd)} .qp-row:first-child{border-top:0;padding-top:2px} .qp-vende{display:flex;flex-direction:column;gap:4px} .qp-vende-k{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .qp-vende-v{font-size:var(--fs-body);font-weight:600;color:var(--tx2);line-height:1.4} .qp-arrow{font-family:var(--mono);font-size:16px;color:var(--ac);text-align:center} .qp-cli{min-width:0} .qp-cli-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px} .qp-cli-v{font-size:15px;font-weight:700;color:var(--tx)} .qp-nombres{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--dim);max-width:520px} .qp-remate{margin-top:16px;display:flex;gap:9px;padding:13px 16px;background:rgba(var(--ac-rgb),.05); border:1px solid rgba(var(--ac-rgb),.2);font-size:var(--fs-body-sm);line-height:1.6;color:var(--tx2)} .qp-remate-x{color:var(--ac);flex:0 0 auto} .qp-remate-t{flex:1;min-width:0} @media(max-width:680px){.qp-row{grid-template-columns:1fr;gap:6px;padding:14px 0}.qp-arrow{display:none}} /* (el apilado movil de `.hm-row` se fue con U16·B2: la clase ya no existe. `.pyq` trae el suyo, en el mismo breakpoint de 680, desde `molde.css`) */ /* EL MOTOR — proyectos que generan la demanda (vinculo motor->satelite) */ .nicho-motor{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px} /* U16·B4 (2026-08-16) — EL RELLENO SE FUE, y no es una decision de diseno: era un NO-OP. `background:linear-gradient(180deg,var(--panel),var(--panel))` pinta un color plano `--panel`… sobre un `.panel` que YA es `--panel`. Medido en runtime instancia por instancia: **294 de 294, en las 92 paginas, el relleno era exactamente el color de lo que tenia detras** (`rgb(9,12,20)` sobre `rgb(9,12,20)`). Sacarlo no mueve un pixel — lo prueba `u15_geo`. ⚠️ El `:hover` SI se ve y se conserva: ahi el gradiente arranca en `#121925`, que es otro color. */ .nm-card{display:flex;flex-direction:column;gap:8px;padding:15px 17px; border:1px solid var(--bd);text-decoration:none;transition:.13s} .nm-card:hover{border-color:rgba(var(--ac-rgb),.55);background:linear-gradient(180deg,var(--card-hover),var(--panel))} .nm-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .nm-n{font-size:16px;font-weight:700;color:var(--tx);line-height:1.25;text-decoration:none} .nm-card:hover .nm-n{color:var(--ac)} .nm-usd{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--ac);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .nm-d{margin:0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--dim)} /* r9, no r7 — U16 · la tarjeta, 2026-08-16. `.nm-go` es el GEMELO EXACTO de `.oc-go` (despegue.css): misma declaracion linea por linea, mismo rol (link-boton "ver el nicho/proyecto" al pie de una card), y solo cambia el color (--ac vs --cy). `.oc-go` ya paso a r9 en la 2a tanda; este quedo en 7 porque vive en OTRA hoja. El r9 es el radio de control del molde (`.opt` 24 inst, `.share-b`, `.gc-bar`). */ .nm-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ac);text-decoration:none;align-self:flex-start;border:1px solid rgba(var(--ac-rgb),.34);background:rgba(var(--ac-rgb),.06);border-radius:9px;padding:6px 13px;transition:.13s} .nm-go:hover,.nm-card:hover .nm-go{background:rgba(var(--ac-rgb),.14);border-color:var(--ac)} /* CAJA ENTERA CLICKEABLE (stretched-link): el titulo cubre toda la card con ::after -> click en cualquier parte abre el proyecto. El sello (cifra->fuente) y el boton 'ver el proyecto' van por encima (z-index) para seguir clickeables. Evita el anidado que rompe el layout (L106) y unifica con vecinos/norma. */ .nm-card{position:relative} .nm-n{position:static} /* SIN radio — U16 · la tarjeta, 2026-08-16. Este ::after es el area de click estirada: invisible (no tiene fondo ni marco), asi que su radio no se VE... pero si RECORTA el hit-test. Arrastraba r11 de cuando `.nm-card` era redondeada; la card paso a r0 en U15 («el radio es de los controles, no del contenido») y el overlay quedo atras, dejando las 4 esquinas de la card sin click. r0 = la caja entera clickeable, que es lo que el stretched-link promete. */ .nm-n::after{content:"";position:absolute;inset:0;z-index:1} .nm-card .sello,.nm-card .nm-go{position:relative;z-index:2} .nm-card .nm-n{cursor:pointer} /* QUIEN FABRICA — empresas (incumbente) */ .nicho-emp{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px} .ne-card{display:flex;flex-direction:column;gap:6px;padding:15px 17px; border:1px solid var(--bd);background:var(--panel2);text-decoration:none;transition:.13s} .ne-card:hover{border-color:rgba(var(--ac-rgb),.55)} .ne-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} .ne-n{font-size:16px;font-weight:700;color:var(--tx)} .ne-rol{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:var(--ac)} .ne-d{margin:0;font-size:var(--fs-sub);line-height:1.55;color:var(--dim)} /* COMO SE ARMA EL NUMERO — el TAM como formula + frescura por variable (modelo, no fotografia) */ .md-formula{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 13px;padding:15px 18px; border:1px solid var(--bd);background:linear-gradient(180deg,var(--panel),var(--panel));margin-bottom:16px} .md-fx{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--tx)} .md-eq{font-family:var(--mono);font-size:16px;color:var(--dim)} .md-res{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ac)} .md-vars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px} /* U16·B5 (2026-08-16, aceptada por el usuario sobre la comparacion dibujada) — sin relleno. Medido: `--panel2` contra el `--panel` que tiene detras son **4 puntos sobre 255**; puestas las dos capturas al lado no se distingue cual es cual. La regla que sale de ahi y vale para las 5 cajas: **el relleno lo pone el CONTENEDOR, no la pieza** — la caja que vive dentro de un `.panel` no lo necesita (`.nm-card`, `.op-card`, `.md-var`), la que vive sobre el fondo pelado de la pagina si (`.kpi`, `.score`, que por eso NO se tocan). Es lo que hace Vicuña, y convierte el «grupo C» de una decision de gusto en una consecuencia. */ .md-var{padding:13px 15px;border:1px solid var(--bd)} .md-vh{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px 10px;margin-bottom:5px} .md-vl{font-size:var(--fs-body);font-weight:700;color:var(--tx)} .md-vv{font-family:var(--mono);font-size:var(--fs-body);font-weight:600;color:var(--ac)} .md-vn{font-size:var(--fs-sub);line-height:1.5;color:var(--dim)} .fr-chip{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase; border:1px solid var(--bd2);border-radius:4px;padding:1px 7px;color:var(--dim);cursor:help} .fr-chip.fr-vivo{color:var(--pro);border-color:rgba(var(--pro-rgb),.45);background:rgba(var(--pro-rgb),.08)} .fr-chip.fr-lento{color:var(--mut);border-color:var(--bd2)} .fr-chip.fr-ever{color:var(--ver);border-color:rgba(var(--ver-rgb),.4);background:rgba(var(--ver-rgb),.07)} .md-lp{margin:14px 0 0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut); padding:12px 15px;border:1px dashed var(--bd2)} /* NO flex: es prosa + un badge al final. display:flex+gap volvia cada palabra un flex-item y rompia el flujo del texto (el punto saltaba de linea), mismo bug que .qp-remate (L151). Block normal, badge inline. */ .md-foot{margin:16px 0 0;font-size:var(--fs-body);color:var(--dim);line-height:1.7; padding-top:13px;border-top:1px solid var(--bd)} .md-foot .b{vertical-align:middle} /* COMO VALIDAMOS — la auditoria adversarial de la cifra (metodologia visible) */ .nicho-valid .nv-box{border:1px solid var(--bd);border-left:3px solid var(--tes); padding:15px 17px;background:rgba(var(--ac-rgb),.04)} .nv-tag{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:var(--fs-label); letter-spacing:.06em;text-transform:uppercase;color:var(--tes);font-weight:700;margin-bottom:10px} .nv-tx{margin:0;font-size:var(--fs-body-lg);line-height:1.66;color:var(--mut)} /* LA COBERTURA DE LA BUSQUEDA — que universo se reviso y que no se pudo revisar. Es el caveat que sostiene un faltante, asi que se lee, pero pesa MENOS que el texto de la caja: no es el argumento. El rotulo va en mono, como el de la propia caja. */ .nv-cob{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--bd); font-size:var(--fs-body);line-height:1.6;color:var(--mut2,var(--mut))} .nv-cob-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em; text-transform:uppercase;color:var(--tes);font-weight:700;margin-right:7px} .nv-cob-l{display:block;margin-top:6px} /* LA CITA (D1, 2026-08-17) — la firma de lo propio, pegada al numero que se cita y no en el pie. Peso deliberadamente BAJO: es utilidad, no argumento; no compite con la cifra ni con el sello. La cadena va en mono porque es para copiar y pegar. */ .nv-cita{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--bd); font-size:var(--fs-body-lg);line-height:1.6;color:var(--mut2,var(--mut))} .nv-cita b{color:var(--tx);font-weight:600} .nv-cita-s{font-family:var(--mono);word-break:break-word} .nv-cita a{color:inherit;text-decoration:underline;text-underline-offset:2px} .nv-cita a:hover{color:var(--ac)} /* ===== GRUPO de secciones — pagina de proyecto RIGI (UNIDAD 4, paso 3A: legibilidad del molde) ==== Los 14 bloques de un proyecto salian PLANOS y con identico peso visual: "como se entra a proveerle" —el nucleo de la version V1, la razon de ser de la pagina— pesaba lo mismo que el articulado del acto RIGI, que es referencia de consulta. Medido el 09-ago: 25 pantallas, 8.866 palabras y CERO navegacion, contra 10,6 pantallas del nicho mas largo ya validado. El grupo es la jerarquia que faltaba (4 tandas con nombre + la traza) y ademas es el destino de los chips de .pnav. Unico CSS del paso 3A: el resto reusa el molde (hm-det, sec-fold, ck-ind-m, af-pasos, pnav). */ /* el aire de abajo es 52, no 36: el grupo respira mas que la seccion, y la seccion mas que la fila. Hasta el 16-ago vivia repisado 33 lineas mas abajo y aca se leia un 36px que no renderizaba (U9). */ .pg{margin:0 0 52px} /* 2026-08-12 (port de la pagina): el encabezado de grupo pasa de 23px/780 a titular de verdad. En la maqueta «El proyecto» es un H2 de 44px con filete y aire arriba, y esa es la unica jerarquia que separa cinco tandas en una pagina de 18.000 px de alto — a 23px se leia como un subtitulo mas y el lector no sabia que habia cambiado de tema. Radio: `pg-*` la usan 2 paginas (las de proyecto), o sea que es zona libre; el resto del sitio no se entera. */ .pg-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;margin:0 0 20px;padding-top:38px; border-top:1px solid var(--bd2)} .pg-n{font-size:clamp(27px,3.4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.03; color:var(--tx)} /* la glosa dice de que se trata la tanda antes de entrar en ella; tambien la usa el summary de .sec-fold para que plegar una seccion no esconda QUE hay adentro */ .pg-g{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase; color:var(--dim);font-weight:500} /* el primer grupo ya no llega pegado a la leyenda (que se fue al pie el 12-ago) sino al Resumen, que es una tarjeta con fondo: el filete duplicaria su borde inferior. Aire si, filete no. */ .pg:first-of-type .pg-h{border-top:0;padding-top:14px} @media(max-width:640px){.pg-n{font-size:24px}.pg-h{padding-top:28px;gap:8px}} /* titulo de la tarjeta ck-ind: sin peso propio heredaba del contenedor y quedaba mas chico y apagado que el cuerpo de su propia tarjeta (jerarquia invertida, cazado por la captura del paso 3A). Clase propia y NO un cambio en .ck-ind-h: esa la comparte la pagina de nicho -> 171 paginas publicadas que no son el objeto de esta pasada. */ /* menos caja: dentro de un panel la tarjeta no necesita su propio marco cerrado. ⛔ ESTA REGLA ESTUVO MUERTA 5 DIAS Y NADIE LO VIO (borrada en U1, 2026-08-14). Pedia `.panel .ck-comp .ck-ind` — o sea `ck-ind` DENTRO de `ck-comp` — y en el render son HERMANOS (`_nicho_cockpit` appendea ck-ind, despues ck-comp, despues ck-watch, los tres en el mismo `.panel`). Matcheaba 0 veces en 102 paginas, asi que el defecto #2 que este mismo comentario describe («TRES bordes anidados con el mismo radio y el mismo azul») siguio publicado intacto. ⚠️ Ningun lint la podia ver: `lint_clases_css` caza la CLASE EMITIDA SIN REGLA — el caso simetrico, REGLA QUE NUNCA MATCHEA, no lo mira nadie. La cura de verdad esta arriba, en `.ck-ind`. */ .panel .ck-comp{display:flex;flex-direction:column;gap:26px} /* aire: el grupo respira mas que la seccion, y la seccion mas que la fila (el del grupo vive en la definicion de `.pg`, arriba) */ .pg .panel{margin-bottom:26px} /* ============================================================================ EL CUERPO DE LA PAGINA DE PROYECTO — port de «Vicuna Pagina.dc.html» (2026-08-12, MAGA-PORT-001, tercer port; el 1o fue la portada 1b y el 2o el Resumen 2a). Es el primero que no porta un ELEMENTO sino el ESQUELETO de la pagina: el ancho, el rotulo de seccion y las dos filas del grupo «El proyecto». POR QUE CLASES PROPIAS (P3 del PASO 0, medido sobre las 217 paginas del build): `sec-h` la usan 168 paginas, `hm-row`/`hm-k` 103/105, `panel` 176, `share` 200 y `leyenda` 198. Nada de eso se edita: lo que cambia de forma nace en clase propia (`pyt-*`, `pyc-*`) o en un scope que solo existe aca (`.proy`, `.pg`). ============================================================================ */ /* --- EL ANCHO ------------------------------------------------------------- `.page.nicho` topea en 1000px y ademas `.page.nicho p` topea el parrafo en 780 — pero las filas del cuerpo heredaban de `hm-v` un tope de 560px, o sea ~380px de aire muerto a la derecha de CADA fila dentro de una pagina de 1000. La maqueta usa 1200 para el cuerpo. Se sube el contenedor y se fija la medida por CARACTERES (`ch`) y no por px: 74ch es el largo de linea comodo probado, y a diferencia de un px fijo sigue siendo comodo si manana cambia el cuerpo. ⚠️ Scope `.proy`: NO se toca el ancho global — el resto del sitio sigue en 1000 y unificarlo es decision de la revision del frontend entero (bloque B). */ /* ⭐ Y la de proyecto sube con ella, por lo mismo: 152 -> 154 caracteres (2 de diferencia, o sea nada) y **-794 px de alto**. Su comentario de arriba decia que 1200 era «lo que usa la maqueta»; con el sitio entero en un solo ancho, mantener un tercer valor solo para 28 paginas es la dispersion que esta decision vino a cerrar. */ .page.nicho.proy{max-width:var(--w-page)} /* EL RELATO (2026-08-13) — los dos bloques de prosa corrida de la pagina de proyecto. Hacen falta dos reglas y las dos nacen de un defecto visto en la captura, no supuesto: `.prosa` trae `margin:0` (nacio para ir sola dentro de un panel), asi que el 2o y el 3er parrafo del escenario se pegaban sin aire; y `.prosa-lead` solo existe scopeada a `.panel-clima`, o sea que aca salia SIN ESTILO y con los margenes por defecto del navegador. Scope `.proy`: 0 derrame a las 104 paginas de nicho que tambien usan `.prosa`. */ .proy .prosa-lead{font-size:var(--fs-body-lg);color:var(--tx);line-height:1.62;margin:0 0 15px} .proy .prosa+.prosa,.proy .prosa-lead+.prosa{margin-top:15px} /* --- el ROTULO de seccion dentro del grupo -------------------------------- Mismo idioma que el rotulo del Resumen (`pyr-rot`) y que la maqueta: filete de 34px + mono en caja alta muy espaciada. Scope `.pg` = 2 paginas. */ .pg .sec-h{gap:14px;font-size:var(--fs-micro);letter-spacing:.24em;margin:46px 0 20px} .pg .sec-h::before{width:34px;height:1px;border-radius:0} /* --- el PIE de la pagina: compartir + leyenda ------------------------------ Se fueron del Resumen (12-ago). Aca son colofon, no contenido: alineados a la derecha como en la maqueta, y la leyenda con su filete de separacion. */ .page.proy>.share{margin:52px 0 0;justify-content:flex-end} .page.proy>.leyenda.sellos{margin:24px 0 0;padding-top:24px;border-top:1px solid var(--bd2)} /* «Que te piden» va en blanco (t-tx), no en el azul por defecto: la maqueta usa TRES colores de filete distintos en el mismo grupo (verde/blanco/azul) y ya hay clase para los otros dos — verde es `t-ver` (el `_py_sec` de arriba) y azul es el default. */ .sec-h.t-tx::before{background:var(--tx)} /* «qué va a necesitar y todavía no tiene proveedor» va en gris-neutro (t-mut), no en verde: es HIPÓTESIS de analista (`servicios_satelite`, badge tesis), no un hecho confirmado como las otras dos secciones verdes del grupo. */ .sec-h.t-mut::before{background:var(--mut)}@media(max-width:640px){ .pg .sec-h{margin:34px 0 16px;letter-spacing:.16em} .page.proy>.share{justify-content:flex-start;margin-top:38px} } /* ══════════════════════════════════════════════════════════════════════════════════════════ MOLDE 2 · LA HOJA DE OPORTUNIDAD (rollout 2026-09-13, LOTE 1) La receta es `conocimiento/PLAYBOOK-OPORTUNIDAD.md`. Aca va SOLO la forma. ⛔ ESTA HOJA LA CARGAN 186 PAGINAS, NO LAS 63: las 30 de proyecto tambien la piden. Toda regla que toque una clase compartida va anclada en `body[data-tipo="oportunidad"]`, que es el TIPO DECLARADO de la pagina. ⛔ NO SE USA `.page.nicho` DE ANCLA: esa clase la llevan tambien las 30 de PROYECTO (`page nicho proy`), asi que anclar ahi le cambiaba la cara a un molde sin auditar — medido: la pagina de un proyecto perdia las credenciales de la firma y la entrada lateral del menu. La politica se engancha al TIPO, nunca a la estructura (`REGLAS-INTERFAZ.md §Compartir componente no obliga a compartir comportamiento`). ⛔ Y la cabecera «O2» cuelga de `body.cab-accion`, que es su politica declarada: que otra pagina encienda `body.scrolled` no la mete aca. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* ============ PROPUESTA MOLDE 2 (2a iteracion) ============ */ /* 1 - La medida de lectura, POR ROL y no por etiqueta. 60-75 caracteres segun el componente: la prosa corrida mas angosta, la fila rotulada un poco mas ancha porque su rotulo vive al costado, la formula sin tope porque es una linea que no se lee corrida. ⛔ EL TOPE SE ESCRIBE EN `ch`, PERO UN `ch` NO ES UN CARACTER: es el ancho del cero, y en esta tipografia el caracter promedio de un texto real es **un 19 % mas ancho**. Medido el 13-sep sobre las tres hojas y ocho componentes, la relacion dio **1,19 en todos** —no depende del cuerpo de letra, depende de la tipografia—. De ahi salen los dos numeros de abajo, y por eso NO son los que decia la tabla: escrito `70ch` entregaba **83** caracteres y `66ch`, **79**. Los dos quedaban fuera de la banda declarandose dentro. ⚠️ Se ajusta cambiando estos dos valores y nada mas. Para volver a medirlos: `python visual/chequear_molde2.py`, que cuenta caracteres y no unidades de CSS. */ body{--lect-fila:59ch; /* rotulo al costado -> 70 caracteres */ --lect:56ch} /* prosa corrida -> 66 caracteres */ /* ⛔ Y TODA REGLA DE MEDIDA LLEVA EL PREFIJO `body[data-tipo="oportunidad"]`, aunque la clase sea unica del molde. El tope global de `cierre.css` esta escrito `.page p`, que pesa MAS que una clase sola: los componentes del molde que son `

` —el arco, los riesgos, el descargo— se quedaban en el tope global (75 caracteres) declarando el suyo, y solo los que son `

` obedecian. Medido el 13-sep: 3 de 8 componentes. */ body[data-tipo="oportunidad"] .pyq-v, body[data-tipo="oportunidad"] .af-inc, body[data-tipo="oportunidad"] .af-ext, /* ⛔ `.nv-box p` NO alcanza, y es la misma trampa de siempre: la regla se escribio para la ETIQUETA y la prosa de esa caja sale en `` cuando el texto viene partido. Medido el 2026-09-20 en la hoja de San Juan: cuatro parrafos a 129 caracteres por renglon dentro de una caja cuyo hermano `

` obedecia. Se nombra el ROL, que es lo que la hoja ya decidio. */ body[data-tipo="oportunidad"] .qp-remate-t, body[data-tipo="oportunidad"] .nv-box p, body[data-tipo="oportunidad"] .nv-box .pp{max-width:min(100%,var(--lect-fila))} body[data-tipo="oportunidad"] .af-emb, body[data-tipo="oportunidad"] .af-cuna, body[data-tipo="oportunidad"] .pyo, body[data-tipo="oportunidad"] .gc-sub, body[data-tipo="oportunidad"] .gc-nota, body[data-tipo="oportunidad"] .af-cav, body[data-tipo="oportunidad"] .hm-res, body[data-tipo="oportunidad"] .pyi-dbody, body[data-tipo="oportunidad"] .pyr-i-g, body[data-tipo="oportunidad"] li, body[data-tipo="oportunidad"] .ck-w > div, /* ⛔ `.af-p` y `.prosa` NO tenian tope propio: caian en el global de `cierre.css` (63ch), que entrega 75 caracteres — el borde exacto de la banda. Con el rol que les toca van a 66. */ body[data-tipo="oportunidad"] .af-p, body[data-tipo="oportunidad"] .prosa, body[data-tipo="oportunidad"] .disc, /* ⛔ RE-MEDIDO EL 2026-09-20 SOBRE LA HOJA PUBLICADA, no sobre la propuesta: de 36 bloques de texto quedaban 7 por encima de 70 caracteres por renglon, y el peor era `.pp-ev-c` con 131. Los dos que entran aca son los unicos que son PROSA CORRIDA y no cabian en ninguna de las dos listas de arriba. Los otros que quedan no son prosa: `.ley-body` es la tira de sellos -una fila de definiciones de tres palabras separadas por puntos, que angostarla la vuelve tres renglones en 793 paginas- y `.pp` y `.pp-der` miden 75 y 74, dentro del ruido de la banda. */ body[data-tipo="oportunidad"] .pp-ev-c, body[data-tipo="oportunidad"] .pp-tg-q, .cierre-zone .disc{max-width:min(100%,var(--lect))} /* 1b - LA AYUDA DEL CAMPO VA EN SU PROPIA LINEA, no en el texto gris de adentro. Medido el 13-sep a 390 px: el texto de adentro se cortaba en «tu LinkedIn o un catalog» y los tres formatos admitidos —que son el ajuste que evita que el que pega su perfil se vaya— no se leian. En una linea propia envuelve y se ve entero. */ .cierre-zone .cap2-f>.cap2-ayuda{display:block;font-style:normal;font-size:13px;line-height:1.45; color:var(--sec);margin:-2px 0 6px} /* 1c - LA SEGUNDA MITAD DE UN PARRAFO PARTIDO. Es un bloque dentro del MISMO elemento, no un hermano: la fila rotulada es una grilla y un hermano cae en la celda del rotulo. */ body[data-tipo="oportunidad"] .pp-parte{display:block;margin-top:.85em} /* 2 - «Metodo» sale de la barra SOLO donde estorba: en las hojas interiores, que son las que llevan pildora de vuelta. Ya esta en el pie, igual que la fecha. */ body[data-tipo="oportunidad"] .mnu-wrap > .mnu-lat{display:none} /* 3 - Una sola barra pegada. El indice deja de ser una segunda barra de saltos internos en computadora; en el telefono conserva la pildora flotante del molde 1. */ .pp-idx{margin:2px 0 30px} .pp-idx .swn-d{margin-top:10px} /* 4 - EL HERO: una cifra manda. El rango de entrada es la principal; el mercado entero es contexto y baja de jerarquia sin desaparecer. */ .pp-h-k{font:600 11.5px/1.5 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.13em; text-transform:uppercase;color:var(--mut);margin:26px 0 3px} .pp-h-cifra{font-family:var(--mono,"IBM Plex Mono",monospace);font-weight:600; font-size:clamp(30px,5.4vw,52px);line-height:1.08;color:var(--ac);letter-spacing:-.01em} .pp-h-plazo{font:400 13px/1.6 var(--mono,"IBM Plex Mono",monospace);color:var(--tx3,#6f8299); margin:5px 0 0} body[data-tipo="oportunidad"] .pp-h-ctx{margin:14px 0 0;padding:11px 0 0;border-top:1px solid var(--bd2,#243040); font-size:14px;line-height:1.7;color:var(--tx2,#9fb0c4);max-width:min(100%,var(--lect))} .pp-h-ctx b{color:var(--tx,#e7edf5);font-weight:600;font-family:var(--mono,"IBM Plex Mono",monospace)} .pp-h-ctx .pp-sep{color:var(--dim,#46566b);margin:0 8px} /* el mercado entero, cuando NO hay rango de entrada curado: sigue siendo la cifra principal, y la pagina lo dice en vez de fingir que tiene una respuesta mas fina */ body[data-tipo="oportunidad"] .pp-h-nota{font:400 12.5px/1.6 var(--mono,"IBM Plex Mono",monospace);color:var(--tx3,#6f8299); margin:9px 0 0;max-width:min(100%,var(--lect))} /* 5 - LA FRESCURA: sale de la navegacion, no del producto. Vive al lado del sello del hero. */ .pp-fresh{display:flex;align-items:center;gap:7px; font:400 12.5px/1.7 var(--mono,"IBM Plex Mono",monospace); color:var(--tx3,#6f8299);margin:6px 0 0} .pp-fresh::before{content:"";width:5px;height:5px;border-radius:50%;background:#3fb27f} .pp-fresh.pend::before{background:#d9a441} /* 6 - DE UN VISTAZO: la capa de decision. Lo corto y con enlace al bloque que lo desarrolla; el texto completo vive UNA sola vez, abajo. */ .pp-vis{margin:24px 0 30px;border:1px solid var(--bd2,#243040);border-radius:12px; background:var(--panel,#0e151e);padding:17px 19px} .pp-vis-h{font:600 11.5px/1.5 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.13em; text-transform:uppercase;color:var(--ac);margin:0 0 13px} .pp-vis-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px} .pp-vis-i{min-width:0} .pp-vis-k{display:block;font:600 11px/1.5 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em; text-transform:uppercase;color:var(--tx3,#6f8299);margin:0 0 3px} body[data-tipo="oportunidad"] .pp-vis-v{font-size:14.5px;line-height:1.62;color:var(--tx2,#9fb0c4);max-width:var(--lect)} .pp-vis-v b{color:var(--tx,#e7edf5)} .pp-vis-go{display:inline-block;margin-top:4px; font:400 12.5px/1.5 var(--mono,"IBM Plex Mono",monospace); color:var(--ac);text-decoration:none} .pp-vis-go:hover{text-decoration:underline} .pp-vis-i.wide{grid-column:1 / -1;border-top:1px solid var(--bd2,#243040);padding-top:14px} @media(max-width:760px){.pp-vis-g{grid-template-columns:1fr} .pp-vis-i.wide{border-top:0;padding-top:0}} /* 7 - El titulo de bloque en dos registros. NO se inventa una pieza: se adopta la que la portada ya estreno (`.ph-k` / `.ph-t`), con su respiracion y su responsive. */ body[data-tipo="oportunidad"] .sec-h:has(.ph-k){display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px;gap:0 9px} body[data-tipo="oportunidad"] .sec-h .ph-t{text-transform:none;letter-spacing:.01em;font-weight:500; font-size:var(--fs-label);color:var(--mut);font-family:var(--mono)} body[data-tipo="oportunidad"] .sec-h .ph-t::before{content:"\00B7 ";margin-right:7px;color:var(--dim)} /* ⛔ EL ANCHO DEL TELEFONO NO SE RE-DECLARA ACA. Lo pone `despegue.css`, y escrito con `flex:0 0 100%` mas un margen de 13 px pedia el contenedor entero y DESPUES se corria: 13 px de desborde contra su propio contenedor, de los que 12 se comia el relleno lateral de `.page` y 1 llegaba a la pagina. Era el unico desborde horizontal que quedaba en las tres hojas a 390 px. Aca queda solo lo que es propio del molde 2: el separador que sobra cuando el dato baja de linea. */ @media(max-width:560px){body[data-tipo="oportunidad"] .sec-h .ph-t::before{content:none}} /* 8 - El rastro de ubicacion del hero deja de gritar: no es un rotulo, es donde estamos. */ body[data-tipo="oportunidad"] .pyh-via{text-transform:none !important;letter-spacing:.01em !important;font-size:13.5px} /* 9 - El arco largo se compone como prosa, no como tira monoespaciada a todo ancho. */ body[data-tipo="oportunidad"] .pp-arco{margin:16px 0 0;max-width:min(100%,var(--lect));font-size:15.5px;line-height:1.68; color:var(--tx2,#9fb0c4);border-left:2px solid var(--ac);padding-left:14px} .pp-arco-k{display:block;font:600 11.5px/1.5 var(--mono,"IBM Plex Mono",monospace); letter-spacing:.13em;text-transform:uppercase;color:var(--ac);margin:0 0 5px} /* 10 - CAPA 3, la evidencia: plegada por defecto, con su conclusion a la vista. */ .pp-fold{margin:12px 0 0;border-top:1px solid var(--bd2,#243040);padding-top:2px} .pp-fold > summary{cursor:pointer;font:600 12.5px/1.6 var(--mono,"IBM Plex Mono",monospace); letter-spacing:.02em;color:var(--ac);list-style:none;padding:9px 0} .pp-fold > summary::-webkit-details-marker{display:none} .pp-fold > summary::before{content:"+ "} .pp-fold[open] > summary::before{content:"\2212 "} /* 11 - PROFUNDIDAD PROGRESIVA, EN FORMA DE CONCLUSION + EVIDENCIA. ⛔ Se cayo el «fade + seguir leyendo»: repetido diez veces en una hoja larga deja de leerse como profundidad y pasa a leerse como contenido deshabilitado o teaser. Lo que se ve ahora es una CONCLUSION entera —cortada en un final de frase, no a los N caracteres— y debajo un disclosure que dice que lo que falta es evidencia. */ .pp-ev{margin:7px 0 0} .pp-ev > summary{cursor:pointer;list-style:none;display:inline-block; font:400 12.5px/1.5 var(--mono,"IBM Plex Mono",monospace);color:var(--ac);padding:3px 0} .pp-ev > summary::-webkit-details-marker{display:none} .pp-ev > summary::after{content:" \25BE"} .pp-ev[open] > summary::after{content:" \25B4"} .pp-ev > summary:hover{text-decoration:underline} .pp-ev-c{margin-top:7px;padding-left:13px;border-left:1px solid var(--bd2,#243040)} /* lista larga: en vez de diez disclosures iguales, cuatro abiertos y el resto en uno */ .pp-mas-lista{margin:14px 0 0;border-top:1px solid var(--bd2,#243040);padding-top:4px} .pp-mas-lista > summary{cursor:pointer;list-style:none; font:600 12.5px/1.6 var(--mono,"IBM Plex Mono",monospace);color:var(--ac);padding:9px 0} .pp-mas-lista > summary::-webkit-details-marker{display:none} .pp-mas-lista > summary::before{content:"+ "} .pp-mas-lista[open] > summary::before{content:"\2212 "} /* 11b - EL RIESGO: que es, cuanto pesa, que consecuencia tiene. Y despues la evidencia. */ .pp-rk{padding:13px 0;border-top:1px solid var(--bd2,#243040)} .pp-rk:first-child{border-top:0;padding-top:2px} .pp-rk-t{font-size:15.5px;font-weight:650;color:var(--tx,#e7edf5);line-height:1.45} .pp-rk-m{display:flex;flex-wrap:wrap;gap:0 10px;margin:4px 0 6px; font:400 11.5px/1.6 var(--mono,"IBM Plex Mono",monospace);color:var(--tx3,#6f8299)} .pp-rk-m .pp-rk-i{color:var(--warn,#d9a441);text-transform:uppercase;letter-spacing:.08em} body[data-tipo="oportunidad"] .pp-rk-c{font-size:var(--fs-body);line-height:1.68;color:var(--tx2,#9fb0c4); max-width:min(100%,var(--lect))} /* 11c - LA NORMA: que cambia economicamente arriba, el fundamento juridico abajo. */ .pp-nm{display:block;padding:14px 0;border-top:1px solid var(--bd2,#243040);text-decoration:none} .pp-nm:first-of-type{border-top:0} .pp-nm-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin:0 0 5px} .pp-nm-t{font-size:15.5px;font-weight:650;color:var(--tx,#e7edf5);line-height:1.45;flex:1 1 320px} body[data-tipo="oportunidad"] .pp-nm-c{display:block;font-size:15px;line-height:1.68;color:var(--tx2,#9fb0c4); max-width:min(100%,var(--lect))} .pp-nm-go{font:400 12.5px/1.5 var(--mono,"IBM Plex Mono",monospace);color:var(--ac); text-decoration:none;white-space:nowrap} .pp-nm-go:hover{text-decoration:underline} /* 11d - LA VENTANA, operativa: disparador / que cambia / estado. */ .pp-tg{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:4px 0 0} .pp-tg-r{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,150px); gap:6px 22px;padding:12px 0;border-top:1px solid var(--bd2,#243040);align-items:start} .pp-tg-r:first-child{border-top:0} .pp-tg-d{font-size:15px;font-weight:650;color:var(--tx,#e7edf5);line-height:1.5} .pp-tg-q{font-size:14.5px;line-height:1.62;color:var(--tx2,#9fb0c4)} .pp-tg-e{font:400 12px/1.6 var(--mono,"IBM Plex Mono",monospace);color:var(--tx3,#6f8299)} .pp-tg-h{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,150px); gap:6px 22px;font:600 10.5px/1.5 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.12em; text-transform:uppercase;color:var(--tx3,#6f8299);padding-bottom:8px} @media(max-width:820px){ .pp-tg-r,.pp-tg-h{grid-template-columns:minmax(0,1fr)} .pp-tg-h{display:none} .pp-tg-e{margin-top:2px} } /* 11e - LA FIRMA: autoria, no curriculum. */ /* la firma de este molde la gobierna `.firma-autoria` (tokens.css), que es la MISMA regla para los tres moldes que la usan así. Ver el comentario de allá: acá estaba la copia original. */ /* 11f - LA LEYENDA DE SELLOS, COMPACTA Y ARRIBA. La larga sigue abajo. */ .pp-sel{margin:0 0 26px;padding:9px 0;border-top:1px solid var(--bd2,#243040); border-bottom:1px solid var(--bd2,#243040); font:400 12px/1.9 var(--mono,"IBM Plex Mono",monospace);color:var(--tx3,#6f8299); display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline} .pp-sel a{color:var(--ac);text-decoration:none} .pp-sel a:hover{text-decoration:underline} /* 11g - LAS TRES UNIDADES DE «la oportunidad a fondo». */ .pp-u{margin:30px 0 0} .pp-u:first-of-type{margin-top:6px} .pp-u-h{display:flex;align-items:baseline;gap:10px;margin:0 0 4px; font:600 11.5px/1.5 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.13em; text-transform:uppercase;color:var(--ac)} .pp-u-h::before{content:"";width:4px;height:13px;border-radius:2px;background:var(--ac); flex:0 0 auto;align-self:center} .pp-u-s{font:400 13.5px/1.6 var(--sans,inherit);color:var(--tx3,#6f8299);letter-spacing:0; text-transform:none;font-weight:400} /* 13 - EL VACIO QUE PARECE CONTENIDO FALTANTE. Dos salidas, segun el bloque: (a) la caja se angosta hasta el texto, y entonces el vacio es aire; (b) la segunda columna lleva informacion que aporta. Se usan las clases que la portada ya tiene (`.rl2 / .rl-izq / .rl-der`), no unas nuevas. */ /* ⚠️ `.pp-angosta` NO es la medida de lectura, es el ANCHO DE LA CAJA (§4.5): la caja se angosta hasta su texto para que el vacio se lea como margen. Por eso no usa `--lect`: la prosa que vive adentro trae su propio tope y es la que manda sobre el renglon. */ body[data-tipo="oportunidad"] .pp-angosta{max-width:min(100%,74ch)} body[data-tipo="oportunidad"] .rl2{gap:34px} body[data-tipo="oportunidad"] .rl-der .rl-der-k{display:block;font:600 10.5px/1.5 var(--mono,"IBM Plex Mono",monospace); letter-spacing:.12em;text-transform:uppercase;color:var(--tx3,#6f8299);margin:0 0 5px} body[data-tipo="oportunidad"] .rl-der > div + .rl-der-k{margin-top:16px;padding-top:14px; border-top:1px solid var(--bd2,#243040)} body[data-tipo="oportunidad"] .rl-der-v{font-size:14.5px;line-height:1.62;color:var(--tx2,#9fb0c4)} body[data-tipo="oportunidad"] .rl-der-v b{color:var(--tx,#e7edf5)} @media(max-width:900px){body[data-tipo="oportunidad"] .rl2{display:block} body[data-tipo="oportunidad"] .rl-der{border-left:0;padding-left:0;margin-top:22px; border-top:1px solid var(--bd2,#243040);padding-top:16px}} /* 14 - EL INDICE: todos los destinos visibles, en dos filas si hace falta. Cero scroll lateral. */ /* ⚠️ Al dejar de haber scroll lateral hay que apagar tambien la sombra que lo anunciaba: sus gradientes van pegados al scroll y sin scroll se quedan pintados como un bloque gris fijo. */ /* 15 - «Ver un informe de ejemplo», al lado del boton y sin competirle. */ .pp-ej{margin-left:16px;font:400 13px/1.5 var(--mono,"IBM Plex Mono",monospace); color:var(--ac);text-decoration:none;white-space:nowrap} .pp-ej:hover{text-decoration:underline} /* 18 - ⏳ EL INDICE EN TELEFONO: DECISION PENDIENTE DEL USUARIO, medida y sin resolver. Al unificar el indice con el de la portada, la ficha hereda su regla de telefono: `nav.idx` no se emite abajo de 560 px. Eso lo decidio la pasada del 12-sep para la PORTADA —«se ven 1,5 de 7 y hay que deslizar de costado»— y quedo escrito como «a decidir por el usuario». ⚠️ EN LA FICHA EL CALCULO ES OTRO, y esta medido el 13-sep: · mostrando la tira -> se ven **2 de 9** destinos, 646 px de deslizamiento lateral · escondiendola -> una hoja de **15 a 30 pantallas** se queda sin saltar entre bloques · como desplegable -> disparador de 45 px; abierto 366x419 con los 9, 0 scroll, empuja 427 ⛔ La tercera se PROBO Y SE REVIRTIO: envolver el `.idx` en un `

` lo oculta tambien en computadora —el elemento esconde su contenido y el CSS solo apagaba el disparador—, asi que sin JS no se resuelve. Queda para la pasada responsive, con los tres numeros ya medidos. */ /* 17 - EL SELECTOR DE HOJAS HERMANAS: desplegable de navegacion local, no superficie flotante. ⛔ Lo que se desmonta: `position:absolute/fixed`, el `max-height` y el `overflow` propio. Lo que queda es flujo normal, asi que EMPUJA el contenido. */ .swn-abre{position:static !important;max-height:none !important;overflow:visible !important; width:auto !important;max-width:none !important;inset:auto !important;transform:none !important; margin:10px 0 0;padding:16px 18px;border:1px solid var(--bd2,#243040);border-radius:11px; background:var(--sf2,#0e1521);box-shadow:none} /* cada familia es un bloque que las columnas NO parten al medio */ .swn-abre .swn-fam{break-inside:avoid;page-break-inside:avoid;margin:0 0 15px} .swn-abre .swn-fam:last-child{margin-bottom:0} .swn-abre .swn-g{margin:0 0 5px} .swn-abre .swn-i{display:block;padding:3px 0;line-height:1.4} /* la actual no es enlace y se marca sin gritar */ .swn-abre .swn-i.cur{opacity:.62;font-weight:600} .swn-abre .swn-i.cur::before{content:"— ";opacity:.7} @media(min-width:900px){ .swn-abre{columns:3;column-gap:30px} } @media(min-width:700px) and (max-width:899px){ .swn-abre{columns:2;column-gap:26px} } /* 16 - D1 APROBADO: «De un vistazo» va al costado del hero desde 1200 px y apilado por debajo. Ya no es conmutador: es el molde. */ @media(min-width:1200px){ .pp-hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:0 34px;align-items:start} /* ⛔ La tesis ENTRA a la grilla, debajo del hero. Antes era un hermano DESPUES del contenedor, asi que arrancaba debajo de la columna mas alta —el panel de «De un vistazo»— y el espacio bajo el hero quedaba muerto: medido el 13-sep, 320 px en la flaca, 296 en la mediana y 147 en la gorda. El panel pasa a ocupar las dos filas y la tesis sube a llenar el hueco. */ .pp-hero-wrap .pyh{grid-column:1;grid-row:1} .pp-hero-wrap .pp-tesis{grid-column:1;grid-row:2;margin-top:18px} .pp-hero-wrap .pp-vis{margin:0;position:sticky;top:70px;grid-column:2;grid-row:1 / span 2} .pp-hero-wrap .pp-vis-g{grid-template-columns:minmax(0,1fr);gap:13px} .pp-hero-wrap .pp-vis-i.wide{border-top:1px solid var(--bd2,#243040);padding-top:13px} .pp-hero-wrap .pyh-t{font-size:clamp(30px,3.6vw,44px)} } /* 17 - D2 APROBADO: la marca antes del contexto de la ficha. */ body.cab-accion header .brand{order:-1;margin-right:4px} /* 20 - EL EFECTO DERRAME baja de jerarquia: en una ficha ordenada para un proveedor no compite con capital, regimen y entrada. Queda como dato secundario con su puerta a la mirada de oficios. */ body[data-tipo="oportunidad"] .pp-der{margin:18px 0 0;padding:13px 0 0;border-top:1px solid var(--bd2,#243040); font-size:var(--fs-body);line-height:1.66;color:var(--tx3,#6f8299);max-width:min(100%,74ch)} body[data-tipo="oportunidad"] .pp-der-k{font:600 10.5px/1.5 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.12em; text-transform:uppercase;color:var(--tx3,#6f8299);margin-right:9px} body[data-tipo="oportunidad"] .pp-der b{color:var(--tx2,#9fb0c4);font-weight:600} body[data-tipo="oportunidad"] .pp-der a{color:var(--ac);text-decoration:none} body[data-tipo="oportunidad"] .pp-der a:hover{text-decoration:underline} /* 19 - CADA UNIDAD DIBUJA SU PROPIA CAJA, y la caja termina donde termina el texto. ⛔ El defecto era una caja unica de ancho completo con tres unidades adentro: la de prosa ocupaba 690 px de 1284 y el resto se leia como contenido que falta. Ahora la caja grande no se dibuja y cada unidad trae la suya del ancho que necesita — la de prosa angosta, la del mapa entera, porque esa si usa el ancho con su rotulo al costado. */ body[data-tipo="oportunidad"] .panel.nicho-afondo{background:none;border:0;padding:0;margin-bottom:0; overflow-x:visible} body[data-tipo="oportunidad"] .pp-u{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r-12); padding:20px 24px;margin:0 0 18px} body[data-tipo="oportunidad"] .pp-u.pp-angosta{max-width:min(100%,80ch)} body[data-tipo="oportunidad"] .pp-u-h{margin-bottom:10px} /* 18 - El arco y el parrafo de entrada, despues de la capa de decision. */ .pp-tesis{margin:0 0 8px} .pp-tesis .pyh-lead{margin-top:16px} /* 12 - Los mercados vecinos son contexto, no un informe paralelo. */ .pp-vec-mas{margin-top:2px} /* ── El POR QUE de un rango de entrada `no_estimable` (F1, decision del usuario 2026-09-14). El hero dice que no hay cifra defendible; este renglon dice por que, con el texto curado. Se ve como lo secundario que es —color y borde—, no achicando el cuerpo de letra (D13). */ body[data-tipo="oportunidad"] .af-cuna-pq{margin:9px 0 0;padding-left:11px; border-left:2px solid var(--bd2);color:var(--tx2)} body[data-tipo="oportunidad"] .af-cuna-pq-k{display:block;font-family:var(--mono);font-size:11px; letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-bottom:2px} /* ── El sello de una fila de la ventana (F2, decision del usuario 2026-09-14). Va debajo del estado, en la misma columna: la fila ya es angosta y el sello es procedencia, no contenido. */ body[data-tipo="oportunidad"] .pp-tg-s{display:block;margin-top:4px} /* ───────────────────────────────────────────────────────────────────────────────────────────── EL CIERRE DE LA HOJA DE OPORTUNIDAD, EN EL ORDEN EN QUE SE DECIDE (decision del usuario, 2026-09-14): la primera lectura (formulario + ejemplo) -> autor, metodologia y como leer los sellos -> Compartir -> pie. Autor, sellos y Compartir pasaron ADENTRO de `.cierre-zone`, asi que las reglas que les daban ancho completa colgaban de `.page > …` y dejaron de aplicar. ⛔ Todo lo de acá cuelga de `.cierre-zone`, que en el resto del sitio no lleva ninguno de estos tres bloques: ninguna otra pagina cambia. */ /* ⛔ LA VERSION COMPACTA ES UNA FRANJA, NO UNA TARJETA. Sus credenciales van ocultas, asi que la rejilla que llenaba el ancho no existe: estirada a 1.284 px dejaba ~1.000 vacios, y encogida a su contenido caia a una columna de 120 px con el nombre partido palabra por palabra. Puesta en fila —foto a la izquierda, credito a la derecha— el bloque baja a una franja de dos renglones y el vacio de la derecha es margen, que es lo que §4.5 del PLAYBOOK ya decide para este molde. ⚠️ En telefono no se toca: ahi la tarjeta centrada con la foto arriba ya se ve bien. */ /* ⭐ ESTA FORMA ES AHORA EL CANON DEL SITIO y vive en `.firma-autoria` (`tokens.css`): el usuario la eligió acá el 2026-09-16 y pidió replicarla en todos los moldes que firman así. Lo que estaba escrito en este bloque se movió allá tal cual —incluida la foto al costado y el «en teléfono no se toca»—; lo que queda arriba es el porqué, que sigue siendo de esta hoja. */ /* el cierre institucional se separa del formulario y se lee como lo secundario que es */ body[data-tipo="oportunidad"] .cierre-zone > .hd-firma{margin-top:26px} body[data-tipo="oportunidad"] .cierre-zone > .ley-body{margin-top:18px} body[data-tipo="oportunidad"] .cierre-zone > .share{margin-top:22px} /* ⭐ EL MISMO CIERRE PARA LA FICHA DE PROYECTO (decision del usuario, 2026-09-16): la firma en una franja de un renglon y sin credenciales, los tres bloques separados entre si, y el descargo a la medida de lectura. Antes la firma salia como una tarjeta alta de ~490 px con la foto centrada arriba y las cuatro credenciales en rejilla. ⛔ Se declara aparte y NO se suma a los selectores de arriba: el molde 2 esta cerrado y vigilado, y tocar una coma de sus reglas lo mueve. */ /* ⛔ LA FIRMA YA NO SE DECLARA ACÁ (2026-09-16): la forma de «autoría, no currículum» vive en UNA regla, `.firma-autoria` en `tokens.css`, que emite `firma_analista(compacta=True)`. Estaba escrita tres veces —acá para proyecto, abajo para oportunidad y en `despegue.css` para el aviso de norma— y un arreglo en una copia no llegaba a las otras. El resultado renderizado es el mismo: 74 px. */ body[data-tipo="proyecto"] .cierre-zone > .ley-body{margin-top:18px} body[data-tipo="proyecto"] .cierre-zone > .share{margin-top:22px} body[data-tipo="proyecto"] .disc{max-width:min(100%,var(--lect))}