/* === style-article.css — «The agent economy, live» dentro de la pestaña Agent Economy ===
   Origen: articulo-vivo-site-en.html (artefacto del operador), integrado 2026-09-14.
   TODO el árbol vive bajo #agent-economy-article.av — clases av-*, ids av-*: ni un
   selector genérico (colisiones reales encontradas: .wide 960px vs 1080px del sitio,
   .prose, .meta, .detail/#detail, .body, .q, .t, .m, .rule, .node, .cite, .how, .old).
   LIGHT-ONLY a propósito: el sitio es de capa única clara (style-base COLOR-01/02);
   los bloques prefers-color-scheme/[data-theme] del artefacto se retiraron — dentro
   del sitio el artículo no puede oscurecerse por su cuenta (decisión pendiente de
   ratificar por el operador; el standalone conserva su dark).
   Paleta: hereda los tokens del sitio (--ink/--accent/--accent-soft/--surface/--line/
   --serif/--mono son semánticamente los mismos); solo estos cinco son propios: */
.av{
  --av-surface-2:#f1ece1;
  --av-muted:var(--ink-soft);
  --av-bar:#b8ae9c;
  --av-warn:#b2560d;
  --av-warn-soft:#fbeee2;
}
  .av *{box-sizing:border-box}
  /* el fondo lo pone el sitio; el artículo solo aporta tipografía y aire.
     position:relative ancla el raíl absoluto del índice lateral (16-sep). */
  .av{position:relative;color:var(--ink);font-family:var(--serif);
       font-size:17.5px;line-height:1.68;padding-block:44px 24px;padding-left:24px;padding-right:24px}
  /* 15-sep (dictamen operador): el texto al MISMO ancho que el diagrama (960px)
     para que las dos bandas queden alineadas — antes 690px */
  .av-wrap{max-width:960px;margin:0 auto}
  .av-wide{max-width:960px;margin:44px auto}

  .av .av-header{margin-bottom:14px}
  .av-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
           color:var(--av-muted);margin:0 0 14px}
  .av h1{font-size:clamp(32px,5.6vw,50px);font-weight:600;line-height:1.07;margin:0 0 18px;
     letter-spacing:-.022em;text-wrap:balance}
  .av-standfirst{margin:0;font-size:20px;line-height:1.5;color:var(--av-muted);text-wrap:pretty}

  .av-meta{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
        margin:26px 0 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
        font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--av-muted)}
  .av-meta b{color:var(--ink);font-weight:500}
  .av-meta .av-old{color:var(--av-warn)}

  .av h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
     color:var(--accent);margin:58px 0 6px;font-weight:500}
  /* los rótulos de Parte van solos (sin h3 pegado debajo en la Parte II) */
  .av h2.av-part{margin-bottom:18px}
  .av h3{font-size:26px;font-weight:600;margin:0 0 20px;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
  .av h3 + h3, .av p + h3, .av blockquote + h3, .av p.av-bill + h3{margin-top:46px}
  .av h4{font-size:19px;font-weight:600;margin:32px 0 8px;line-height:1.3}
  .av p{margin:0 0 18px}
  .av p.av-lead{font-size:19.5px;line-height:1.55}

  /* ---- cierres paralelos (reestructura 16-sep, nota §6): cada bloque institucional
     cierra con su factura física y cada físico con su tiempo de expansión — las dos
     entradas del modelo, entregadas en prosa antes de la aritmética. Mismo formato
     para ambos, distinto del cuerpo, y SIN el lenguaje del margen (eso es de vivos). */
  .av p.av-bill{font-style:italic;font-size:16px;color:var(--av-muted);margin:20px 0 8px}
  .av p.av-bill b{font-style:normal;color:var(--ink);font-weight:600}

  /* ---- índice lateral (reestructura 16-sep) ----
     Raíl absoluto que abarca el alto del artículo con nav sticky dentro; visible solo
     a partir de 1420px (960 de columna + raíl sin pisarla). Por debajo, el details
     .av-tocm de la cabecera ES el índice. Sin scroll-spy a propósito: el sitio ya lo
     retiró una vez (SCROLL-02) — las entradas solo bajan. */
  .av-tocrail{display:none}
  .av-toct{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--av-muted);margin:0 0 12px}
  ol.av-toc{list-style:none;margin:0;padding:0}
  ol.av-toc li{margin:0 0 7px}
  ol.av-toc a{font-family:var(--mono);font-size:11px;line-height:1.45;letter-spacing:.02em;
              color:var(--av-muted);text-decoration:none;display:block}
  ol.av-toc a:hover{color:var(--accent-ink)}
  ol.av-toc a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  ol.av-toc .av-tocp{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
              color:var(--accent);margin:16px 0 8px}
  @media (min-width:1420px){
    .av-tocrail{display:block;position:absolute;top:150px;bottom:60px;
                left:calc(50% - 480px - 218px);width:190px}
    .av-tocrail nav{position:sticky;top:96px;max-height:calc(100vh - 130px);
                    overflow-y:auto;padding-right:6px}
    .av-tocm{display:none}
  }
  .av-tocm{border:1px solid var(--line);border-radius:6px;background:var(--surface);
           margin:28px 0 0;padding:0 18px}
  .av-tocm summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:10.5px;
           letter-spacing:.13em;text-transform:uppercase;color:var(--av-muted);padding:13px 0}
  .av-tocm summary::-webkit-details-marker{display:none}
  .av-tocm summary::after{content:"+";float:right;font-size:14px;color:var(--accent)}
  .av-tocm[open] summary::after{content:"−"}
  .av-tocm summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .av-tocm ol.av-toc{padding:2px 0 16px}

  /* ---- pasajes vivos — DEL FONDO AL MARGEN (dictamen operador 16-sep) ----
     Un recuadro relleno lee como paréntesis y el lector lo salta aunque sea el hilo
     principal. La distinción vive en el margen: regla de 2px en acento a la izquierda,
     etiqueta+fecha en mono encima, «See history» como enlace discreto al FINAL del
     pasaje (el botón se movió en el markup: vhead ya no lo contiene). El texto del
     pasaje hereda tamaño y color de cuerpo — el 18.5px anterior también lo separaba. */
  .av-vivo{position:relative;margin:30px 0;padding:2px 0 2px 20px;
        border-left:2px solid var(--accent)}
  .av-vivo > .av-vhead{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:10px}
  .av-vtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--accent-ink);font-weight:600}
  .av-vdate{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--av-muted)}
  .av-vbtn{font-family:var(--mono);font-size:10px;letter-spacing:.07em;
        text-transform:uppercase;background:none;border:0;padding:0;color:var(--av-muted);
        text-decoration:underline;text-underline-offset:3px;
        text-decoration-color:var(--line-strong);cursor:pointer}
  .av-vbtn:hover{color:var(--accent-ink);text-decoration-color:var(--accent)}
  .av-vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* la predicción se distingue TAMBIÉN en el margen, nunca en el fondo */
  .av-vivo[data-p="prediccion"]{border-left-color:var(--av-warn)}
  .av-vivo[data-p="prediccion"] .av-vtag{color:var(--av-warn)}
  .av-vivo[data-p="prediccion"] .av-vbtn:hover{color:var(--av-warn);text-decoration-color:var(--av-warn)}
  .av-vhist{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .av-vhist ol{list-style:none;padding:0;margin:0}
  .av-vhist li{padding:12px 0;border-top:1px solid var(--line)}
  .av-vhist li:first-child{border-top:0;padding-top:0}
  .av-vhist time{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--av-muted);
              display:block;margin-bottom:4px}
  .av-vhist q{display:block;font-size:16px;line-height:1.5;color:var(--av-muted);quotes:none}
  .av-vhist .av-why{display:block;margin-top:6px;font-size:14px;color:var(--av-muted);font-style:italic}
  .av-vhist .av-why b{font-style:normal;color:var(--ink);font-weight:600}

  /* ---- mapa ---- */
  .av-mapwrap{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .av-mapscroll{overflow-x:auto;padding:20px 18px 4px}
  .av-mapscroll svg{display:block;width:100%;height:auto;min-width:760px}
  .av-maphint{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--av-muted);
           padding:0 20px 14px;text-transform:uppercase}
  .av-detail{border-top:1px solid var(--line);padding:22px 24px;min-height:150px;background:var(--av-surface-2)}
  .av-detail .av-dk{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
              color:var(--accent);margin:0 0 5px}
  .av-detail h5{font-size:21px;font-weight:600;margin:0 0 10px;line-height:1.25}
  .av-detail p{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--av-muted)}
  .av-detail p b{color:var(--ink);font-weight:600}
  .av-dstats{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .av-dstat{font-family:var(--mono);font-size:10px;letter-spacing:.06em;background:var(--surface);
         border:1px solid var(--line);border-radius:3px;padding:4px 9px;color:var(--av-muted)}
  .av-dstat b{color:var(--ink);font-weight:500}
  .av-dstat.av-w{border-color:var(--av-warn);color:var(--av-warn)}
  .av-dgo{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
       color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}

  .av g.av-node{cursor:pointer}
  .av g.av-node rect{transition:fill .14s}
  .av g.av-node:hover rect.av-hit{fill:var(--accent-soft)}
  .av g.av-node.av-on rect.av-hit{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6}

  .av-bx{fill:var(--surface);stroke:var(--line);stroke-width:1}
  .av-bxt{fill:var(--av-surface-2);stroke:var(--line);stroke-width:1}
  .av-bxa{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.3}
  .av-bxd{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 4}
  .av-t{fill:var(--ink);font-family:var(--serif);font-size:12.5px;text-anchor:middle}
  .av-tb{fill:var(--ink);font-family:var(--serif);font-size:14px;font-weight:600;text-anchor:middle}
  .av-m{fill:var(--av-muted);font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-anchor:middle}
  .av-ml{fill:var(--av-muted);font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-anchor:start}
  .av-numa{fill:var(--accent);font-family:var(--mono);font-size:13px;text-anchor:middle}
  .av-num{fill:var(--av-muted);font-family:var(--mono);font-size:13px;text-anchor:middle}
  .av-edge{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.55}

  /* ---- citas ---- */
  .av a.av-cite{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:.66em;
         vertical-align:super;padding:0 1px}
  .av a.av-cite:hover{text-decoration:underline}
  .av ol.av-refs{list-style:none;counter-reset:r;padding:0;margin:0}
  .av ol.av-refs li{counter-increment:r;padding:12px 0 12px 36px;border-top:1px solid var(--line);
             position:relative;font-size:15px;line-height:1.5;color:var(--av-muted)}
  .av ol.av-refs li::before{content:"[" counter(r) "]";position:absolute;left:0;top:13px;
                     font-family:var(--mono);font-size:11px;color:var(--accent)}
  .av ol.av-refs li b{color:var(--ink);font-weight:600}
  .av ol.av-refs li em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--av-muted)}
  /* :target nunca dispara aquí (las anclas internas no tocan el hash — el router
     del sitio se dispararía); article-live.js pone .av-hit en la referencia pulsada */
  .av ol.av-refs li.av-hit{background:var(--accent-soft);border-radius:4px}

  .av blockquote{margin:30px 0;padding:0 0 0 22px;border-left:2px solid var(--accent);
             font-size:21px;line-height:1.45;text-wrap:pretty}
  .av blockquote p{margin:0}
  .av blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);
                  font-size:11px;letter-spacing:.06em;color:var(--av-muted)}

  .av-keyaside{background:var(--surface);border:1px solid var(--line);border-radius:6px;
            padding:20px 22px;margin:30px 0;font-size:16px;line-height:1.6}
  .av-keyaside h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
               color:var(--av-muted);font-weight:500;margin:0 0 9px}
  .av-keyaside p{margin:0 0 11px;font-size:16px}
  .av-keyaside p:last-child{margin:0}

  /* ---- desplegables explicativos ---- */
  .av-acc{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface);margin:18px 0 0}
  .av-acc details{border-top:1px solid var(--line)}
  .av-acc details:first-of-type{border-top:0}
  .av-acc summary{cursor:pointer;list-style:none;padding:15px 20px;display:flex;gap:14px;
               align-items:baseline;font-size:17px;font-weight:600;line-height:1.3}
  .av-acc summary::-webkit-details-marker{display:none}
  .av-acc summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:16px;
                      color:var(--accent);font-weight:400;line-height:1}
  .av-acc details[open] summary::after{content:"−"}
  .av-acc summary:hover{background:var(--av-surface-2)}
  .av-acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .av-acc summary .av-q{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
                  color:var(--av-muted);font-weight:500;flex:none;width:104px;padding-top:4px}
  .av-acc .av-body{padding:2px 20px 22px 138px;font-size:16px;line-height:1.6;color:var(--av-muted)}
  .av-acc .av-body p{margin:0 0 13px;font-size:16px}
  .av-acc .av-body p:last-child{margin:0}
  .av-acc .av-body b{color:var(--ink);font-weight:600}
  .av-acc .av-body .av-how{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .av-acc .av-body .av-how span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
                       color:var(--accent);display:block;margin-bottom:6px}
  @media (max-width:620px){
    .av-acc summary{flex-direction:column;gap:4px}
    .av-acc summary .av-q{width:auto;padding-top:0}
    .av-acc .av-body{padding-left:20px}
  }

  /* ---- destinos de ancla bajo la barra sticky (17-sep) ----
     El navegador alinea el destino con el borde superior de la ventana, y ahí está la
     barra: el título quedaba tapado. scroll-margin-top = ALTURA MEDIDA de la barra +
     respiro (~15px), en TODO destino con id — secciones, refs, acordeones, vivos.
     Medidas reales 17-sep (nav EN): mayor de 600px = 73px; 600px o menos = 127px (el
     media query del sitio, style-base:263); ~420px o menos = 181px (envoltura por
     CONTENIDO, no por media query — la banda arranca en 426px con margen de seguridad
     porque el punto exacto depende del texto del nav; margen de más = solo más aire).
     CSS puro: el interceptor usa scrollIntoView y lo respeta — no se toca. */
  .av [id]{scroll-margin-top:90px}
  @media (max-width:600px){.av [id]{scroll-margin-top:144px}}
  @media (max-width:426px){.av [id]{scroll-margin-top:198px}}

  /* Los hr separadores viven ENTRE los .av-wrap (nivel .av), así que sin tope se
     estiraban al ancho del contenedor y se metían bajo el raíl del índice (reporte
     operador 17-sep). Mismo ancho y centrado que la columna; los que quedan DENTRO
     de un wrap no cambian (ya miden ≤960). */
  .av hr.av-rule{border:0;border-top:1px solid var(--line);margin:54px auto;max-width:960px}
  .av [hidden]{display:none!important}
  @media (prefers-reduced-motion:reduce){.av *{transition:none!important}}

  /* ---- glosario (14-sep): término clicable + side drawer ---- */
  /* Los términos los envuelve article-live.js en runtime (lista AV_TERMS) — el HTML
     fuente queda limpio y el vocabulario se mantiene en UN sitio. Botón, no <a>:
     no navega, no toca el hash. */
  .av-gl{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
         cursor:pointer;border-bottom:1px dotted var(--accent)}
  .av-gl:hover{color:var(--accent)}
  .av-gl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .av-drawer-scrim{position:fixed;inset:0;background:rgba(28,26,23,.32);z-index:1200}
  /* nav sticky del sitio: z-index 50 — el drawer va muy por encima */
  .av-drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:1201;
             background:var(--surface);border-left:1px solid var(--line);
             box-shadow:-14px 0 36px rgba(28,26,23,.10);
             padding:22px 24px 28px;overflow-y:auto;
             font-family:var(--serif);color:var(--ink)}
  .av-drawer-head{display:flex;align-items:baseline;justify-content:space-between;
                  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
  .av-drawer-head .av-dk{margin:0}
  .av-drawer-x{background:none;border:1px solid var(--line);border-radius:3px;
               color:var(--av-muted);font-family:var(--mono);font-size:12px;
               padding:3px 9px;cursor:pointer;line-height:1}
  .av-drawer-x:hover{border-color:var(--accent);color:var(--accent)}
  .av-drawer-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .av-drawer h5{font-size:21px;font-weight:600;margin:0 0 10px;line-height:1.25}
  .av-drawer-body p{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--av-muted)}
  .av-drawer-body p b{color:var(--ink);font-weight:600}
  .av-drawer-rel{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
  .av-drawer-rel > span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;
                        text-transform:uppercase;color:var(--av-muted);display:block;margin-bottom:8px}
  .av-drawer-rel .av-gl-chip{display:inline-block;background:none;cursor:pointer;
                        font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
                        border:1px solid var(--line);border-radius:3px;color:var(--accent);
                        padding:4px 9px;margin:0 6px 6px 0}
  .av-drawer-rel .av-gl-chip:hover{border-color:var(--accent);background:var(--accent-soft)}

  /* ---- ejemplos dentro del drawer (15-sep) ---- */
  .av-drawer-ex{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
  .av-drawer-ex > span{font-family:var(--mono);font-size:9px;letter-spacing:.11em;
                       text-transform:uppercase;color:var(--av-muted);display:block;margin-bottom:8px}
  .av-ex-item{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--av-muted)}
  .av-ex-item b{color:var(--ink);font-weight:600}
  .av-ex-link{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent);font-weight:600}
  .av-ex-link:hover{border-bottom-style:solid}