/* ============================================================================
   institucional.css — el chrome de las 5 paginas de CONFIANZA (autor · metodo · privacidad ·
   terminos · impressum), en sus dos idiomas: 10 paginas.
   Son paginas de confianza, no de dato: sin captura y sin panel de fuentes.

   POR QUE ES UNA HOJA Y NO UN `<style>` EMBEBIDO (U16 · UNIDAD 2, 2026-08-16).
   Hasta hoy estas ~48 reglas vivian en una constante de Python (`_CSS_INST`) que se inyectaba como
   `<style>` DENTRO del `<div class="page">` de cada pagina. Funcionaba — y era **piel fuera del
   sistema de piel**: ningun medidor las alcanzaba, porque `u16_alcance`, `u16_hojas`, `u16_muerto`
   y `u16_podar` leen `pipeline/assets/*.css`. O sea que 38 clases no entraban a ningun radar: no se
   podia saber si alguna estaba muerta, si chocaba con otra hoja, ni si su color estaba tokenizado.
   Sacarlas aca no cambia un pixel; las pone bajo medicion.
   (`mapa-datos.html` y `assets/came/ARTICULO.html` se quedan con su `<style>`, y eso NO es un hueco:
   el primero es una pagina interna que nadie enlaza, y el segundo es un artefacto para copiar y
   pegar en un editor externo — tiene que ser autocontenido para servir.)

   DONDE ENCAJA EN LA CASCADA: fonts -> tokens -> [molde] -> [nicho|oficio|institucional] -> skin
   -> cierre. Va en el escalon 4, el de la ESPECIALIZACION por familia de pagina, al lado de
   nicho.css y oficio.css. El contrato completo vive en la cabecera de `pipeline/generar_html.py`.
   Todas estas paginas son de piel OSCURA, asi que la skin que las pisa es siempre `despegue.css`.
   ============================================================================ */

/* ---- titulo, bajada y prosa ---- */
.inst-h1{font-size:1.55rem;line-height:1.2;margin:26px 0 4px}
.inst-sub{color:var(--tx2);font-size:var(--fs-body-lg);line-height:1.6;margin:0 0 14px}
.inst-p{margin:0;line-height:1.7;font-size:var(--fs-body-lg);color:var(--tx2)}
.inst-p+.inst-p{margin-top:10px}
.inst-p a,.inst-sub a{color:var(--ac);text-decoration:none;font-weight:600}

/* ---- listas de credenciales / enlaces verificables ---- */
.inst-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.inst-list li{line-height:1.5;font-size:var(--fs-body-lg);color:var(--tx2)}
.inst-list a.lk{color:var(--ac);text-decoration:none;font-weight:600}
.inst-list .vf{font-family:var(--mono);font-size:.78rem;margin-left:8px;white-space:nowrap}

/* ---- P11 (sesion 8) · las dos listas que dejan de ser renglones ----
   `cred-list` (las 3 credenciales, la unica prueba verificable de la pagina) y `obra-list` (las 5
   puertas al observatorio, la unica evidencia de trabajo). Las dos eran `<li>` de 15,2 px dentro de
   la misma `inst-list` que la lista de perfiles, o sea que lo que mas pesa se veia igual que lo que
   menos. Son MODIFICADORES: heredan la estructura de `inst-list` y solo cambian el tratamiento. */
.cred-list li,.obra-list li{background:var(--panel2);border:1px solid var(--bd2);border-radius:11px;
  padding:11px 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.cred-list .vf{margin-left:auto;color:var(--ac)}
.obra-list li{padding:0}
.obra-list a.lk{display:flex;align-items:baseline;gap:9px;width:100%;padding:11px 14px}
.obra-list a.lk b{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;
  font-size:1.18rem;color:var(--tx);min-width:2.2em;text-align:right}
.obra-list a.lk:hover{background:rgba(var(--ac-rgb),.07);border-radius:11px}

/* ---- retrato del autor (E-E-A-T) ---- */
.inst-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:2px solid var(--bd2);margin:24px 0 4px;display:block}

.inst-sellos{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.inst-sellos .row{display:flex;gap:10px;align-items:baseline;line-height:1.5;font-size:.93rem;color:var(--tx2)}

/* ---- caja de contacto ----
   ⚠️ El COLOR de acento de la caja NO se toca: es personalizacion deliberada, no deriva de piel. */
.inst-cta{margin-top:6px;border:1px solid rgba(var(--ac-rgb),.35);border-radius:14px;
  padding:18px 20px;background:rgba(var(--ac-rgb),.06)}
.inst-cta .inst-p{color:var(--tx)}
/* escala alineada con el formulario de Vicuña (`.cierre-zone .cap-mail` / `.cap-btn`, cierre.css)
   el 2026-08-15: son el MISMO diseño a dos escalas, y la chica dejaba el boton en 39 px de alto,
   por debajo del minimo tactil de 44 que el de Vicuña declara explicito. */
.inst-cta .cta-in{display:block;width:100%;box-sizing:border-box;margin-top:9px;
  background:var(--panel2);border:1px solid var(--bd);border-radius:10px;padding:13px 16px;
  color:var(--tx);font:inherit;font-size:15px;min-height:44px}
.inst-cta .cta-in::placeholder{color:var(--dim)}
.inst-cta .cta-in:focus{outline:none;border-color:rgba(var(--ac-rgb),.6)}
.inst-cta .cta-ta{resize:vertical;min-height:62px;line-height:1.5}
.inst-cta .cta-send{margin-top:12px;font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--ink);background:var(--ac);border:none;border-radius:10px;padding:13px 28px;
  cursor:pointer;min-height:44px}
.inst-cta .cta-send:hover{background:var(--ac-lo)}
.inst-cta .cta-send:disabled{opacity:.6;cursor:default}
.inst-cta .cta-legal{margin-top:11px;font-size:var(--fs-micro);color:var(--dim);line-height:1.5;
  display:flex;gap:7px;align-items:flex-start;cursor:pointer;min-height:24px}
.inst-cta .cta-legal input{flex:0 0 auto;margin:1px 0 0;accent-color:var(--ac)}
.inst-cta .cta-legal a{color:var(--ac);text-decoration:none}
.inst-cta .cta-ok{color:var(--tx2);font-size:.98rem;line-height:1.6}
.inst-cta .cta-err{margin-top:9px;color:#e79aa0;font-size:.88rem;line-height:1.5}

/* ---- pie con los cross-links entre las 5 (internal linking + navegacion) ---- */
.inst-foot .lset{margin-bottom:8px;display:flex;flex-wrap:wrap;gap:4px 5px;justify-content:center}
.inst-foot .lset a{color:var(--ac);text-decoration:none}
.inst-foot .lset a:hover{color:var(--ac-lo)}
.inst-foot .lset b{color:var(--tx2)}

/* ---- P8 (sesión 8) · el ejemplo VIVO de /metodo ----
   La página afirmaba «cada dato lleva el enlace a su fuente primaria» con 0 enlaces externos en su
   cuerpo. Ahora rinde dos filas reales de `data/` con el mismo `sello()` del resto del sitio; esto
   sólo les da el ancho de columna para que el valor y la glosa no se peguen. Es un modificador de
   `inst-sellos`: misma estructura, distinto reparto. */
.inst-ej .row{flex-wrap:wrap}
.inst-ej .ej-v{font-family:var(--mono);font-weight:700;color:var(--tx);white-space:nowrap}
.inst-ej .ej-q{flex:1;min-width:190px;color:var(--tx2)}