/* ============================================================================
   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)}
/* ⭐ EL ESCALON QUE FALTABA (2026-08-31, decision del usuario). Medido sobre `metodo.html`: la
   pagina tenia TRES tamanos —h1 24,8 · parrafo 16,5 · rotulo de seccion 12,5— y entre el parrafo y
   el h1 no habia nada, asi que el unico elemento por encima de 16 px era el titulo de la pagina.
   ⛔ La cura obvia era agrandar `.sec-h`, y NO se hizo: ese rotulo vive en `despegue.css`, la hoja
   compartida, y moverlo cambiaba las 724 paginas del sitio. Ademas es un ROTULO y esta bien que lo
   sea. El escalon se agrega por abajo: el PRIMER parrafo de cada seccion entra como entradilla.
   ⚠️ Sin copy nuevo y sin claves nuevas: promueve el parrafo que ya estaba escrito, asi que no hay
   nada que traducir ni que pueda desincronizarse entre ES y EN. */
/* ⛔ SOLO EN LAS DOS DE PROSA, y se acoto el mismo dia midiendo lo que la regla tocaba de verdad.
   La primera version colgaba de `.panel` a secas y alcanzaba a las 5 paginas de esta piel (10 con
   las inglesas, 60 parrafos). En `/metodo` y `/autor` el primer parrafo de cada seccion ES una
   entradilla y el escalon lo hace leer mejor. En las tres legales NO: en `/privacidad` y
   `/terminos` el primer parrafo es una CLAUSULA como las otras —agrandarla afirma que pesa mas, y
   en un texto legal todas pesan igual— y en `/impressum` es directamente **el domicilio de la
   sociedad**, que en 18,5 px es un defecto y no un escalon. */
.inst-prosa .panel > .inst-p:first-child{font-size:18.5px;line-height:1.55;color:var(--tx)}
.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)}

/* ---- ANCHO DE LECTURA: NO SE TOCA ACA (comprobado el 2026-09-07) ----
   La lectura externa pidio angostar los parrafos de esta pagina. NO se hace aca: la medida de linea
   es UNA regla para las 407 paginas y vive en `cierre.css` («una regla, no treinta y cuatro»,
   decision del usuario del 2026-08-31). Un tope propio de esta hoja seria la regla numero dos.
   ⚠️ Lo que SI aparecio midiendo es que esa regla no entrega lo que dice: esta anotado en
   `tareas.md` con su medicion, y es decision del usuario porque mueve las 407. */

/* ---- LOS TRES PASOS, NUMERADOS (2026-09-07) ----
   Se leian como tres parrafos con la cabeza en negrita. El ordinal en monoespaciada —la misma
   tipografia con la que el sitio escribe toda su metadata— los convierte en protocolo sin agregar
   ni una caja. La sangria cuelga el numero afuera del bloque de texto. */
.met-paso{padding-left:42px;position:relative}
.met-paso .met-n{position:absolute;left:0;top:1px;font-family:var(--mono);font-size:.78rem;
  font-weight:700;letter-spacing:.04em;color:var(--ac);opacity:.85}

/* ---- EL MAIL DE CONTACTO DEJA DE SALIR EN 18,5 px (2026-09-07) ----
   No era una decision: lo causaba la regla de entradilla de arriba. `contacto` tiene UN solo
   parrafo, asi que su unico contenido —una direccion de correo en azul— se promovia a entradilla y
   quedaba compitiendo con el formulario que esta tres bloques mas arriba. El formulario es el canal
   comercial; el mail es el canal de correcciones, y tiene que verse como lo segundo.
   ⚠️ El `id` vive en el `<h2>`, no en el panel: por eso el selector es hermano adyacente.
   Arregla tambien `/autor`, que tiene la misma seccion con la misma forma (4 paginas en total). */
#contacto + .panel > .inst-p:first-child{font-size:var(--fs-body-lg);line-height:1.7;color:var(--tx2)}

/* ---- el atajo al formulario: SOLO en telefono (ver `metodo.emp.atajo`) ---- */
.met-atajo{display:none}
.met-atajo a{color:var(--ac);text-decoration:none;font-weight:600;font-size:.95rem}

@media (max-width:640px){
  .met-atajo{display:block;margin:10px 0 2px}
  /* los dos registros del ejemplo vivo se leian como un bloque corrido de cuatro lineas, porque en
     una columna el valor, la glosa y el sello caen uno abajo del otro. La linea los vuelve a
     separar en dos fichas independientes, que es lo que el par tiene que probar. */
  .inst-ej .row + .row{border-top:1px solid var(--bd);padding-top:9px}
  .met-paso{padding-left:0}
  .met-paso .met-n{position:static;display:block;margin-bottom:2px}
}

/* ---- EL ANCHO DE LAS PAGINAS DE CONFIANZA (decision del usuario, 2026-09-07) ----
   Lo levanto la lectura externa de `/autor`: la caja llegaba de margen a margen y el contenido usaba
   dos tercios, «como si la pagina esperara otra columna que nunca llego». Medido: la caja vale
   `--w-page: 1320px` y todo parrafo y toda fila se topan en `89ch` (~890 px), asi que a 1280 de
   pantalla sobraban ~350 px vacios a la derecha de CADA panel.
   ⛔ NO se toca `:root{--w-page}`: eso mueve las 407 paginas, y las de dato necesitan el ancho para
   sus tablas y sus grillas. Estas cinco son de PROSA, y son las unicas que no lo necesitan.
   ⛔ Y NO se toca la medida de linea (`89ch`): ese es el otro item, el que mueve las 407 y se decide
   con el sitio delante. Angostar la caja no lo pisa — lo hace innecesario aca.
   COMO: se le da a la propia pagina su valor de `--w-page`, que es la variable que `.page` ya lee.
   Asi no depende del orden de las hojas y el ancho sigue viviendo en un solo mecanismo. */
.inst-page{--w-page:980px}

/* ============================================================================
   LA CAPA COMERCIAL (2026-09-08): /para-empresas, /para-empresas/ejemplo y /para-instituciones
   usan el chrome institucional (esta hoja) y agregan lo de abajo. Todo con los tokens de la piel
   oscura; ninguna paleta propia.
   ============================================================================ */
/* ---- el hero de la landing: los dos botones debajo de la bajada ---- */
.pe-lead{font-size:1.08rem}
.pe-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
/* la linea de escala del hero (2026-09-17): prueba de que el analisis sale de una base construida,
   no una seccion nueva. Monoespaciada y chica a proposito: se lee de un golpe y no compite con los
   botones. Las cifras salen de `obra`, el mismo conteo que rinde /para-instituciones. */
.pe-escala{font-family:var(--mono);font-size:.8rem;line-height:1.75;color:var(--mut);margin:12px 0 0;max-width:70ch}
.pe-escala a{color:var(--ac);text-decoration:none;white-space:nowrap}
.pe-escala a:hover{text-decoration:underline}
/* `.btn-p` / `.btn-s` viven en tokens.css: los usan tambien la portada y los CTA contextuales. */
.pe-lk{display:inline-block;margin-top:8px;color:var(--ac);text-decoration:none;font-weight:600}
/* ---- que recibis: lista con cabeza en negrita ---- */
.pe-list{margin:4px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.pe-list li{line-height:1.6;font-size:var(--fs-body-lg);color:var(--tx2)}
.pe-list li b{color:var(--tx)}
/* el cierre que va DESPUES de una lista numerada respira (2026-09-17) */
.pe-list + .inst-p{margin-top:14px}
/* ---- el formulario compartido ---- */
.pe-form .pe-k{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut);margin-top:12px}
.pe-form .pe-k i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--dim)}
.pe-form .cta-in{margin-top:6px}
.pe-form select.cta-in{appearance:auto;cursor:pointer}
.pe-quien{border:none;padding:0;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:8px 14px}
.pe-quien legend{padding:0}
.pe-quien .pe-q{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;
  font-size:.98rem;color:var(--tx)}
.pe-quien .pe-q input{accent-color:var(--ac);width:18px;height:18px;margin:0}
.pe-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pe-grid .pe-f2{grid-column:1 / -1}
.pe-grid .pe-f{display:block}
@media (max-width:640px){.pe-grid{grid-template-columns:1fr}}
/* ---- la demo ejecutiva (lo que sigue vivo en /para-empresas/ejemplo) ---- */
/* el encaje de la empresa ficticia es ilustrativo: se dice al lado del veredicto, sin sello */
.demo-encaje{font-size:var(--fs-body,15.5px);line-height:1.55;color:var(--tx2);border-left:3px solid var(--warn,#b5761f);padding:4px 12px;margin:8px 0 12px}
.demo-encaje b{color:var(--tx)}
.demo-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:6px;
  font-size:var(--fs-body-lg);color:var(--tx2)}
/* los tres ganchos del JS del formulario compartido tienen regla propia para que `lint_clases_css`
   no los lea como clases muertas: son reales, y lo que hacen esta en `_pe_form_js()`. */
.pe-cta-form{margin:0}
/* ---- LA HOJA, SIN CONTENEDOR (2026-09-08, segunda pasada) ----
   La foto del documento va directo sobre el fondo del sitio: papel blanco con un anillo fino y sombra.
   Ningun recuadro claro alrededor. La landing es prosa sobre el fondo (los paneles pierden borde y
   fondo). Todo con los tokens de la piel oscura. */
.pe-landing .panel{background:transparent;border:0;padding:0 0 4px;box-shadow:none}
.pe-landing .sec-h{margin-top:34px}
.pe-muestra img,.pe-crop img,.visor-hoja img{display:block;background:#fff;border-radius:3px;
  box-shadow:0 0 0 1px var(--bd2),0 22px 48px -18px rgba(0,0,0,.85)}
/* la respuesta primero: en PC dos columnas, la hoja 1 ENTERA en pantalla a la izquierda y a la derecha
   la entradilla, el indice de las dos paginas y el boton; en telefono una columna, la hoja primero. */
.pe-resp{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:22px 44px;align-items:start;margin-top:14px}
/* ⭐ 2026-09-17: la respuesta abre con un RECORTE legible (horizontal), no con la hoja entera, asi
   que va en UNA columna: la frase, la pieza a su ancho real, el indice de las dos paginas y el boton.
   La regla de dos columnas de arriba se conserva porque la sigue usando el visor del ejemplo. */
.pe-resp-1c{display:block}
.pe-resp-1c .pe-muestra{margin:18px 0 0}
.pe-resp-1c .pe-muestra img{width:auto;max-width:100%}
.pe-resp-1c .pe-muestra figcaption{text-align:left}
.pe-resp-1c .pe-resp-txt{margin-top:2px}
.pe-resp-1c .pe-indice{max-width:880px}
.pe-muestra{margin:0}
.pe-muestra a{display:block}
.pe-muestra img{width:100%;height:auto}
.pe-muestra figcaption{font-size:var(--fs-micro);color:var(--mut);margin:10px 0 0;text-align:center;line-height:1.5}
.pe-resp-p{font-size:18.5px;line-height:1.55;color:var(--tx)}
.pe-indice{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:22px}
.pe-idx-pag{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--bd)}
.pe-indice ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pe-indice li{display:flex;gap:9px;font-size:var(--fs-body,15.5px);line-height:1.45;color:var(--tx2)}
.pe-idx-n{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--ac);opacity:.85;padding-top:2px;flex:0 0 auto}
.pe-resp-txt .pe-hero-cta{margin-top:20px}
/* los tres recortes: caption arriba, la imagen a tamano real (el ancho lo pone el generador desde el
   manifest) alineada a la izquierda y nunca mas ancha que la columna; un filete entre uno y otro. */
.pe-crops{display:flex;flex-direction:column;margin-top:4px}
.pe-crop{margin:0;padding:24px 0 28px;border-top:1px solid var(--bd)}
.pe-crop:first-child{border-top:0;padding-top:10px}
.pe-crop figcaption{font-size:var(--fs-body-lg);color:var(--tx2);line-height:1.55;margin:0 0 16px;max-width:720px}
.pe-crop figcaption b{display:block;color:var(--tx);font-size:1.12rem;margin-bottom:3px}
.pe-crop figcaption .pe-lk{margin:6px 0 0}
.pe-crop-img{display:block}
.pe-crop img{max-width:100%;height:auto}
/* el visor (/para-empresas/ejemplo): en PC las dos hojas lado a lado y enteras en la pantalla (el alto
   manda, el ancho sigue); en telefono una debajo de otra, cada una entera en la pantalla. */
.visor{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:8px}
.visor-hoja{margin:0;min-width:0}
.visor-hoja a{display:block}
.visor-hoja img{width:auto;max-width:100%;height:auto;max-height:calc(100vh - 290px);min-height:360px;margin:0 auto}
.visor-hoja figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:center;margin-top:10px}
.visor-abrir{font-size:var(--fs-body,15.5px);color:var(--tx2);margin:16px 0 0;text-align:center}
.visor-abrir a{color:var(--ac);text-decoration:none;font-weight:600}
.visor-cierre{margin-top:28px}
.visor-ctx{max-width:760px}
@media (max-width:900px){
  .pe-resp{grid-template-columns:1fr}
  .pe-muestra{max-width:520px}
}
@media (max-width:640px){
  .pe-indice{grid-template-columns:1fr}
  .visor{grid-template-columns:1fr;gap:30px}
  .visor-hoja img{max-height:none;min-height:0;width:100%}
}
.pe-ej-link{cursor:pointer}
.pe-k-hace{display:block}

/* ---- /metodo: las dos puertas del cierre (2026-09-17). Las seis tarjetas prueban la capacidad; el
   cierre manda a cada lector a SU pagina en vez de repetir una oferta generica. ---- */
.met-puertas{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin-top:18px}
.met-puerta{border-top:1px solid var(--bd);padding-top:14px}
.met-puerta h3{font-size:1.05rem;line-height:1.35;margin:0 0 6px;color:var(--tx)}
.met-puerta .inst-p{margin:0}
.met-puerta .pe-hero-cta{margin:12px 0 0}
@media (max-width:760px){.met-puertas{grid-template-columns:1fr;gap:4px}}

/* ============================================================================
   EL TELEFONO (2026-09-17). Medido a 390 px: el recorte del documento entra al 26 % y la hoja
   entera al 22 % — a ese tamano no se lee una sola palabra, y una imagen ilegible no prueba nada.
   ⛔ La cura no es agrandarla (una tabla de cuatro columnas no entra en 390 px): es que en el
   telefono la pieza sea el TEXTO, y que el enlace al documento —que si se acomoda al ancho— deje
   de parecer una nota al pie y pase a ser el boton de la seccion.
   ⚠️ Las dos hojas completas del ejemplo SI se quedan: ahi la imagen no promete lectura, muestra
   de que forma es el entregable, y ya se sirve la variante liviana por `srcset`.
   ============================================================================ */
@media(max-width:640px){
  .pe-crop .pe-crop-img,.pe-resp-1c .pe-muestra{display:none}
  .pe-crop figcaption{margin-bottom:0}
  .pe-crop figcaption .pe-lk{display:inline-block;margin-top:12px;padding:11px 15px;
    border:1px solid var(--bd2);border-radius:8px;min-height:44px;line-height:1.35}
  .pe-crop{padding:18px 0 20px}
}

/* ============================================================================
   EL CASO REAL (2026-09-18) — /para-empresas/caso-ebonit y las lineas de prueba que lo enlazan.
   La pagina reusa el molde del visor del ejemplo (recortes, hojas, cierre); lo de abajo es lo
   unico propio: el rotulo de arriba del titulo, el nombre de la seccion dentro de cada recorte,
   la linea de prueba y la franja que va antes del formulario.
   ⛔ Toda linea que se LEE va a `--fs-body` o mas: `lint_cuerpo_prosa` mide el tamano computado.
   ============================================================================ */
.inst-eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);margin:0 0 10px}
/* el nombre con el que el documento entregado llama a esa parte: va debajo de la explicacion, en
   monoespaciada, para que se lea como una referencia y no como otra frase. */
.caso-sec{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--dim);
  margin-top:8px}
.caso-declara{max-width:78ch}
/* la linea de prueba: aparece debajo de los botones del hero, al cierre de «que recibis» y de
   «como funciona», y en /autor. Una sola linea, sin caja. */
.pe-prueba{font-size:var(--fs-body,15.5px);line-height:1.6;color:var(--tx2);margin:14px 0 0;max-width:78ch}
.pe-prueba a{color:var(--ac);text-decoration:none;font-weight:600}
.pe-prueba a:hover{text-decoration:underline}
.pe-ficticio{margin-top:22px;padding-top:18px;border-top:1px solid var(--bd)}
/* la franja que va JUSTO ANTES del formulario: se puede inspeccionar el trabajo antes de dejar
   ningun dato. Tiene borde propio porque interrumpe, a proposito, el camino al formulario. */
.pe-franja{border:1px solid var(--bd2);border-left:3px solid var(--ac);border-radius:10px;
  padding:14px 16px;margin:16px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.pe-franja p{margin:0;font-size:var(--fs-body,15.5px);line-height:1.55;color:var(--tx2);max-width:62ch}
.pe-franja a{color:var(--ac);text-decoration:none;font-weight:700;white-space:nowrap}
.pe-franja a:hover{text-decoration:underline}