/* Hereda el sistema de diseño del portfolio: mismos tokens, misma nav,
   mismo selector de idioma. Sólo cambia la columna de lectura. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root{
  --bg:#0B0B0D;
  --fg:#F7F7F8;
  --muted:#B4B4BB;
  --border:#303036;
  --accent:#B8FF3D;
  --accent-fg:#09090B;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --flag:#FFB86B;

  /* Medidas del sistema editorial. Una sola fuente para el ancho: si cambia
     aqui, cambia la cabecera, la columna y el sangrado de los visuales a la vez.
       --band     nav y pie, que son chrome del portfolio y siguen anchos
       --measure  columna de lectura: 44rem = 704 px, dentro del 680-720 del brief
       --wide     objetos de evidencia: rompen el margen y salen del texto
       --gutter   margen lateral */
  --band:1320px;
  --measure:44rem;
  --wide:56rem;
  --gutter:32px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--fg);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
a{color:inherit;transition:color .2s ease}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--accent-fg);padding:8px 12px;z-index:9}

/* nav — idéntica al portfolio */
.nav{padding:20px 32px;border-bottom:1px solid var(--border);background:rgba(11,11,13,.85);backdrop-filter:blur(8px);flex:none}
.nav-inner{max-width:var(--band);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px}
.nav-brand{font-weight:800;font-size:15px;letter-spacing:-.01em;text-decoration:none}
.nav-brand .dot{color:var(--accent)}
.lang-switch{display:inline-flex;align-items:center;flex:none;border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px}
.lang-switch a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:5px 9px;border-radius:999px;line-height:1;text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}
.lang-switch a:hover{color:var(--fg)}
.lang-switch a.is-current{background:var(--accent);color:var(--accent-fg)}

/* cabecera de sección */
/* La cabecera arranca donde arranca el texto: mismo ancho de medida y mismo
   centrado, para que el filete y el rotulo caigan sobre el eje de lectura. Si se
   queda en la banda de 1320, el texto centrado y el rotulo a la izquierda se
   leen como dos paginas distintas. */
.masthead{max-width:calc(var(--measure) + var(--gutter)*2);width:100%;margin:0 auto;
  padding:64px var(--gutter) 0}
.rule{width:80px;height:4px;background:var(--accent);border-radius:2px;margin-bottom:26px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.masthead .lede{font-size:17px;line-height:1.6;color:var(--muted);margin:0;max-width:56ch}

/* columna de lectura */
main{flex:1;max-width:calc(var(--wide) + var(--gutter)*2);width:100%;margin:0 auto;
  padding:44px var(--gutter) 96px}
/* Columna de lectura: 704 px a 18 px, centrada en el viewport. Mas ancha cansa
   en un parrafo largo, y esta publicacion tiene parrafos largos. Va centrada y
   no pegada al borde de una banda de 1320: el ojo busca el eje, no el margen. */
.col{max-width:var(--wide);margin:0 auto}
/* Un solo eje, una sola regla: todo hijo de la columna se centra. El texto a la
   medida de lectura; los objetos de evidencia al ancho ancho, rompiendo el
   margen del texto — «keep the reading column narrow and the evidence objects
   wide». Centrado con margin auto y no con grid: el grid anula el colapso de
   margenes verticales y sumaria 22 px antes de cada titular. */
/* Se escribe main>.col> y no .col> por especificidad: .pull, .deck, .viz y el
   resto declaran margin en atajo mas abajo en este fichero, y con la misma
   especificidad ganaria el ultimo y devolveria el bloque al borde izquierdo. */
main>.col>*{max-width:var(--measure);margin-inline:auto}
main>.col>.viz,main>.col>.evidence,main>.col>.tablewrap{max-width:var(--wide)}
/* Una tabla es un objeto de evidencia y va ancha. Envuelta, porque una tabla que
   no cabe tiene que hacer scroll ella y no el documento. */
.tablewrap{overflow-x:auto;margin:0 0 24px}
.tablewrap table{margin:0}
main>.col>.pull{max-width:34rem}
h1{font-size:clamp(32px,5.4vw,52px);font-weight:900;line-height:1.06;letter-spacing:-.028em;margin:0 0 18px}
/* 27 px. A 23 la jerarquia quedaba plana en una columna de 704: el titular de
   seccion tiene que separar dos bloques de investigacion, no solo etiquetarlos. */
h2{font-size:27px;font-weight:600;letter-spacing:-.02em;margin:54px 0 14px;line-height:1.22}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:32px 0 10px}
p{font-size:18px;line-height:1.7;color:#E4E4E8;margin:0 0 22px}

/* El deck: el abstract impreso. Es la entrada a la pieza, no un resumen gris. */
.deck{font-size:21px;line-height:1.55;color:var(--fg);margin:0 0 26px;font-weight:400}

/* Pull quote: aire, sin comillas y sin borde de blog. Maximo tres por nota. */
.pull{font-size:clamp(28px,3.4vw,34px);line-height:1.22;letter-spacing:-.02em;
  font-weight:500;color:var(--fg);margin:48px 0;padding:0;max-width:34rem}
.pull::before{content:"";display:block;width:56px;height:3px;background:var(--accent);
  border-radius:2px;margin-bottom:22px}
strong{color:var(--fg)}

.meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 30px}
.meta span+span::before{content:" · "}
.meta a{color:var(--accent);text-decoration:none}
/* La firma es un enlace, pero no es informacion activa: el lima senala donde
   quieres que mire el lector (design-system §2) y en la cabecera ya lo llevan
   el filete y el rotulo. Se distingue subrayandose al pasar, no coloreandose. */
.meta a.byline{color:inherit}
.meta a.byline:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

.disclosure{border-left:3px solid var(--flag);background:rgba(255,184,107,.07);padding:14px 18px;font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 30px}
.disclosure b{color:var(--fg)}
.notice{border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 32px}
.notice a{color:var(--accent);font-weight:600;text-decoration:none}

/* portada */
/* La pregunta manda, y en la portada manda literalmente: es el h1. El descriptor
   va debajo, dentro del contenido, y por eso la cabecera no lo repite (shell
   lede=False). El tamano sube sobre el h1 de nota porque aqui no compite con un
   titular: es el unico objeto de la primera pantalla. */
.hero{margin:0 0 10px}
.hero .question{font-size:clamp(34px,6.2vw,60px);font-weight:900;line-height:1.03;
  letter-spacing:-.032em;margin:0 0 22px}
.hero .hero-sub{font-size:18.5px;line-height:1.6;color:var(--muted);margin:0 0 52px;max-width:52ch}

/* La pieza destacada no es una tarjeta: no lleva caja, lleva un filete y aire.
   Una tarjeta con una sola nota parece un listado vacio; un bloque editorial
   parece la pieza. */
main>.col>.featured{max-width:var(--wide)}
.featured{border-top:1px solid var(--border);padding-top:36px;margin:0 0 30px}
/* Mismo eje que la columna, un nivel mas abajo: el texto a la medida de lectura
   y el objeto de evidencia al ancho ancho. */
.featured>*{max-width:var(--measure);margin-inline:auto}
.featured>.viz{max-width:var(--wide)}
/* El lima ya lo lleva el rotulo de la cabecera y los eventos marcados del log.
   Un tercer acento en la misma pantalla deja de senalar y decora (§2). */
.featured-vertical{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.featured h2{font-size:clamp(27px,3.6vw,40px);font-weight:700;letter-spacing:-.026em;
  line-height:1.12;margin:0 0 18px}
.featured h2 a{text-decoration:none}
.featured h2 a:hover{color:var(--accent)}
.featured .featured-deck{font-size:19px;line-height:1.6;color:var(--fg);margin:0 0 16px}
.featured .meta{margin:0 0 18px}
.featured .badge{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--flag)}
.featured .badge.draft{color:var(--accent)}
.featured .viz{margin:30px 0 0}

/* índice */
/* El resto de las notas, debajo de la destacada y con menos peso. */
h2.more{font-size:12px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--muted);margin:52px 0 6px}
.listing{list-style:none;padding:0;margin:0}
.listing li{border-bottom:1px solid var(--border);padding:26px 0}
.listing li:last-child{border-bottom:none}
.listing h3{margin:0 0 8px;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.listing h3 a{text-decoration:none}
.listing h3 a:hover{color:var(--accent)}
.listing .deck{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.listing .meta{margin:0 0 10px}
.listing .featured-vertical{margin:0 0 10px}
.empty{color:var(--muted);font-size:16px}

/* Cada nota del indice se abre entera, no solo por el titular.
   Un solo enlace por nota —el del titulo— estirado con ::after sobre todo el
   bloque. Dos enlaces al mismo destino se oyen dos veces en un lector de
   pantalla; asi se oye uno. El bloque no se convierte en tarjeta por esto:
   sigue siendo el bloque editorial con su filete y su aire, y la unica
   superficie que llega a dibujarse es el tinte de :active.
   El z-index no es decorativo: dentro del visual destacado hay elementos
   posicionados (.log li) que sin el se pintarian por encima del ::after y
   dejarian muerta justo esa parte del bloque. */
.featured,.listing li{position:relative}
.featured h2 a::after,.listing h3 a::after{content:"";position:absolute;inset:0;z-index:1}

/* El titulo responde desde cualquier punto del bloque y no solo sobre sus
   palabras: es la senal de que lo que se abre es la nota entera. */
.featured:hover h2 a,.listing li:hover h3 a{color:var(--accent)}

.read-more{margin:24px 0 0;font-size:15px;font-weight:600;color:var(--accent);
  display:flex;align-items:center;gap:9px}
.read-more .arrow{transition:transform .18s ease}
.featured:hover .read-more .arrow,
.listing li:hover .read-more .arrow{transform:translateX(5px)}

/* En movil no hay hover: sin esto el dedo no sabe si ha acertado. El tinte
   aparece al tocar y se va con el dedo. */
.featured:active,.listing li:active{background:rgba(255,255,255,.04)}

/* El contorno enmarca lo que de verdad se activa —el bloque— y no las palabras
   del titulo, que es solo donde vive el enlace. Por eso va sobre el ::after. */
.featured h2 a:focus-visible,.listing h3 a:focus-visible{outline:none}
.featured h2 a:focus-visible::after,
.listing h3 a:focus-visible::after{outline:2px solid var(--accent);
  outline-offset:8px;border-radius:10px}

/* fuentes con evaluación */
.sources{list-style:none;padding:0;margin:0;counter-reset:s}
.sources li{border-top:1px solid var(--border);padding:16px 0 16px 36px;position:relative;font-size:15.5px;line-height:1.55;color:var(--muted)}
.sources li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:18px;font-family:var(--mono);font-size:11px;color:var(--accent)}
.sources a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--border)}
.sources a:hover{color:var(--accent)}
/* Marcadores de fuente en el cuerpo. Llevan al pie, donde esta la evaluacion:
   enlazar a la URL directamente se saltaria justo lo que hay que leer. */
.ref{font-size:.62em;line-height:0;vertical-align:super;margin-left:1px}
.ref a{color:var(--accent);text-decoration:none;padding:0 1px}
.ref a:hover{text-decoration:underline}
.ref + .ref{margin-left:0}
.sources li:target{background:rgba(184,255,61,.08);border-radius:6px}
.sources .kind{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sources .appraisal{display:block;margin-top:7px;max-width:64ch}

/* historial: correcciones fechadas y retirada */
.corrections{list-style:none;padding:0;margin:0;counter-reset:c}
.corrections li{border-top:1px solid var(--border);padding:16px 0 16px 36px;position:relative;font-size:15.5px;line-height:1.55;color:var(--muted)}
.corrections li::before{counter-increment:c;content:counter(c);position:absolute;left:0;top:18px;font-family:var(--mono);font-size:11px;color:var(--flag)}
.corrections .when{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--flag)}
.corrections .what{display:block;margin-top:7px;max-width:64ch;color:#E4E4E8}
.corrections .why{display:block;margin-top:5px;max-width:64ch}

.retraction{border:1px solid var(--flag);border-radius:12px;padding:22px 24px;margin:0 0 36px}
.retraction .label{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--flag);font-weight:600}
.retraction .when{margin:8px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.retraction .why{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--fg);max-width:62ch}
.retraction .kept{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:62ch}

.listing li.retracted h3 a{color:var(--muted)}
.listing li.retracted h3 a:hover{color:var(--flag)}
.listing .badge{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--flag)}

/* Borradores: solo existen en la salida de --preview, nunca en site/dist. La
   marca tiene que ser imposible de confundir con una nota publicada. */
.draft{border:1px dashed var(--accent);border-radius:12px;padding:14px 18px;margin:0 0 26px;
  font-size:15.5px;line-height:1.6;color:var(--muted);background:rgba(184,255,61,.06)}
.draft b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:6px}
.listing li.is-draft{opacity:.85}
.listing li.is-draft h3 a{color:var(--muted)}
.listing li.is-draft h3 a:hover{color:var(--accent)}
.listing .badge.draft{color:var(--accent)}

footer.site{
  border-top:1px solid var(--border);max-width:var(--band);width:100%;margin:0 auto;
  padding:22px var(--gutter) 44px;font-size:13px;color:var(--muted);display:flex;gap:22px;flex-wrap:wrap;
}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--accent)}

blockquote{margin:0 0 22px;padding-left:18px;border-left:3px solid var(--border);color:var(--muted)}

/* ---------- visuales generados desde datos ----------
   Sin imagenes externas: HTML y CSS. El texto reflowa en movil, se selecciona y
   lo lee un lector de pantalla, que es lo que un SVG con texto no hace. */
.viz{margin:36px 0 40px;padding:24px;border:1px solid var(--border);border-radius:14px;
  background:rgba(255,255,255,.015)}
/* OIM / FN01 / 02. Lo numera el build por orden de lectura. */
.viz-id{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);opacity:.55;margin:0 0 14px}
.viz-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px;display:flex;gap:14px;flex-wrap:wrap}
.viz-label span{color:var(--muted);opacity:.72}
/* El rotulo del visual no lleva lima (design-system §2): en el indice el lima
   es de la llamada, que es la accion, y un segundo acento en la misma pantalla
   deja de senalar. Sigue siendo lo mas prominente de la caja por contraste, que
   es lo que le corresponde a una conclusion. */
.viz-foot{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);margin:20px 0 0}
.viz-place,.viz-note{font-family:var(--mono);font-size:10.5px;line-height:1.5;
  color:var(--muted);margin:10px 0 0}
.viz-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}

/* event log: el carril a la izquierda, la hora sobre el evento */
/* Dos columnas y no tres. Antes la hora y el carril compartian fila y el punto
   acababa sobre los digitos: primero con un margen negativo que metia la hora
   dentro del carril, y despues con un carril propio que seguia dependiendo de
   que la hora cupiera en su columna. Las dos veces el fallo era el mismo,
   suponer un ancho. Apilada sobre el evento, la hora no compite con nada por el
   espacio y no hay ancho que suponer. De paso desaparece el caso movil: dos
   columnas, una de ellas de 12 px, caben en cualquier pantalla.
   El carril mide 12 px y su eje es x=6: la linea a 5,5 y el punto a 2. */
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:12px 1fr;column-gap:14px;
  padding:0 0 18px;position:relative}
.log li:last-child{padding-bottom:0}
/* Las dos van a la columna derecha y se apilan solas en dos filas: la hora
   encima, el evento debajo. Sin tocar el HTML del visual. */
.log .t{grid-column:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--muted);margin:0 0 5px}
.log li.on .t{color:var(--fg)}
.log .e{grid-column:2;font-size:15.5px;line-height:1.5;color:var(--muted);margin:0}
.log li.on .e{color:var(--fg)}
/* La linea vive del primer punto al ultimo y no sobresale por ningun extremo. */
.log li::before{content:"";position:absolute;left:5.5px;top:0;bottom:0;width:1px;
  background:var(--border)}
.log li:first-child::before{top:9px}
.log li:last-child::before{bottom:auto;height:9px}
.log li::after{content:"";position:absolute;left:2px;top:5px;width:8px;height:8px;
  border-radius:50%;background:var(--border)}
/* El evento marcado ya se distingue por contraste: .on sube la hora y el texto
   de --muted a --fg. El punto sigue esa misma escala en vez de traer un tercer
   acento a la pantalla. */
.log li.on::after{background:var(--fg)}

/* cifras: el dato grande arriba, su limitacion pequena y visible debajo */
.figs{list-style:none;display:flex;flex-wrap:wrap;gap:34px;margin:0;padding:0}
.figs li{display:flex;flex-direction:column;gap:6px}
.figs b{font-size:clamp(38px,6vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.figs span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fig-high{display:flex;align-items:baseline;gap:12px;margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--border)}
.fig-high b{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.fig-high span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* system check: no es un cuadro de riesgo con semaforos. El lima no dice "bien",
   dice "mira aqui", asi que se lo queda la pregunta abierta y no lo comprobado. */
.viz-check .check-q{font-size:20px;line-height:1.4;font-weight:500;color:var(--fg);
  margin:0 0 26px;max-width:32rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.checks li{padding-top:20px;border-top:1px solid var(--border)}
.check-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.check-head b{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.state{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;line-height:1;white-space:nowrap}
.state.done{color:var(--muted);border:1px solid var(--border)}
.state.open{color:var(--accent-fg);background:var(--accent);font-weight:700}
.check-sub{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--muted)}
.check-txt{margin:0;font-size:16px;line-height:1.62;color:#E4E4E8}

/* ---------- actores: cuatro columnas que convergen en la evidencia ----------
   Las lineas que unen las columnas con el nodo son bordes CSS, no un SVG: se
   reordenan solas cuando la caja se estrecha, y el lector de pantalla encuentra
   una lista numerada, que es lo que el objeto es de verdad. */
.viz-actors{position:relative}
.spine{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);opacity:.4;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:12px}
.spine span+span::before{content:"/ ";opacity:.6}
.actors{list-style:none;margin:0;padding:0;display:grid;gap:28px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.actors li{position:relative;display:flex;flex-direction:column;gap:7px}
.a-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);opacity:.8}
.actors b{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}
.a-does{font-size:13.5px;line-height:1.5;color:var(--muted)}
.a-verb{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);margin-top:auto;padding-top:4px}
.a-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:12px}
.actors-join{position:relative;height:40px}
.actors-join::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;
  border-top:1px solid var(--border)}
.actors-join::after{content:"";position:absolute;top:0;bottom:0;left:50%;
  border-left:1px solid var(--border)}
.node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  margin:0 auto;padding:16px 20px;border:1px solid var(--accent);border-radius:12px;
  background:rgba(184,255,61,.06);max-width:30rem}
.node b{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.node span{font-size:14px;line-height:1.5;color:var(--muted)}

@media (min-width:860px){
  /* La espina operacional al margen, leyendose de abajo arriba. No es decoracion:
     es la lista de lo que cada actor toca del mismo viaje. */
  .viz-actors{padding-left:58px}
  .viz-actors .spine{position:absolute;left:22px;top:24px;bottom:24px;margin:0;
    writing-mode:vertical-rl;transform:rotate(180deg);align-items:center;gap:14px}
  .actors li+li::before{content:"\2192";position:absolute;left:-19px;top:0;
    font-family:var(--mono);font-size:12px;color:var(--border)}
}
@media (max-width:859px){
  .actors{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:559px){
  .actors{grid-template-columns:minmax(0,1fr);gap:20px}
  .actors-join{height:26px}
  .actors-join::before{display:none}
}

/* ---------- del proceso al sistema: dos columnas y el mismo hecho ----------
   Los puntos llenos en lima son solo de la columna derecha; los de la izquierda
   son huecos. La diferencia no es el volumen de trabajo, es quien lo detecta. */
.shift{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:start}
.shift-col{padding:0 26px}
.shift-then{padding-left:0}
.shift-now{padding-right:0}
.shift-mid{position:relative;margin:0;display:flex;align-items:center;justify-content:center;
  align-self:stretch;min-height:200px}
.shift-mid::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  border-left:1px solid var(--border)}
.shift-mid::after{content:"\2192";position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:14px;color:var(--accent);background:var(--bg);padding:0 0 8px}
.shift-mid span{position:relative;writing-mode:vertical-rl;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  background:var(--bg);padding:16px 0}
.shift-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.shift-title{font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--fg);margin:0 0 7px}
.shift-now .shift-title{color:var(--accent)}
.shift-mode{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 24px}
.shift-steps{list-style:none;margin:0 0 22px;padding:0}
.shift-steps li{position:relative;margin-left:4px;padding:0 0 18px 22px;
  border-left:1px solid var(--border)}
.shift-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.shift-steps li::before{content:"";position:absolute;left:-4.5px;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--bg);border:1px solid var(--border);box-sizing:border-box}
.shift-now .shift-steps li::before{background:var(--accent);border-color:transparent}
.shift-steps b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);margin-bottom:4px}
.shift-steps span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.shift-traits{list-style:none;margin:0 0 14px;padding:16px 0 0;
  border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:7px 16px}
.shift-traits li{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.shift-foot{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.shift-now .shift-foot{color:#E4E4E8}

@media (max-width:759px){
  .shift{grid-template-columns:minmax(0,1fr)}
  .shift-col{padding:0}
  .shift-mid{min-height:0;align-self:auto;margin:26px 0;padding-top:24px;
    border-top:1px solid var(--border)}
  .shift-mid::before{display:none}
  .shift-mid::after{content:"\2193";top:-8px;padding:0 8px}
  .shift-mid span{writing-mode:horizontal-tb;padding:0}
}

/* La caja es ancha para que respire el dato, no para tirar lineas de cien
   caracteres: dentro del objeto, el texto corrido mantiene su propia medida. */
.check-sub,.check-txt,.log .e,.viz-note,.viz-place{max-width:34rem}

/* ---------- bloque de evidencia: recuento y desglose generados ---------- */
.evidence{margin:0 0 26px;padding:18px 20px;border:1px solid var(--border);border-radius:12px}
.evidence-total{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.evidence-split{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.evidence-split li{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.evidence-split b{color:var(--fg);font-size:14px;margin-right:6px}

@media (max-width:560px){
  .viz{padding:18px 14px}
  .figs{gap:22px}
}
code{font-family:var(--mono);font-size:.86em;background:#17171B;padding:2px 5px;border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 24px}
th,td{text-align:left;border-bottom:1px solid var(--border);padding:10px 12px 10px 0;vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
td{color:#E4E4E8}
@media (max-width:640px){
  .nav,.masthead,main,footer.site{padding-left:20px;padding-right:20px}
  /* 44 px es el minimo tocable. El bloque entero pasa de sobra; la llamada, que
     es donde apunta el pulgar, se asegura aparte. */
  .read-more{min-height:44px;margin-top:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}