/* ==========================================================================
   COMBATBOTS — sección de investigación.

   Hereda `styles.css` entero: las variables, el nav, `.lab`, `.big`, `.dimtxt`.
   Aquí sólo va lo que un texto largo necesita y la portada no tiene.

   ── Por qué la maqueta es propia y no la plantilla de distill ─────────────

   El encargo pide una maqueta INSPIRADA por distill, y esto lo es: columna de
   lectura estrecha, secciones numeradas, notas al margen, citas numeradas y
   bibliografía al final. Lo que no se hace es cargar su `template.v2.js`.

   Su plantilla está construida para fondo claro y tipografía serif; traerla y
   pintarla de negro es pelearse con ella en cada actualización, y además mete
   una dependencia externa en un sitio que hoy no tiene ninguna salvo el visor
   3D. Se conserva su VOCABULARIO —`<d-cite>`, `<d-footnote>` en la fuente—
   porque es buena notación y deja abierta la puerta a migrar si compensa.
   ========================================================================== */

.rbody { background: var(--ink); }

/* ── El sistema tipográfico de lectura ────────────────────────────────────
   El cuerpo del ensayo va en SERIF y los titulares siguen en la paloseco de
   la marca. No es un capricho estético: el resto del sitio son bloques de
   veinte palabras y esto son 4.500, y una grotesca geométrica que funciona en
   un titular fatiga a las dos páginas. Es además lo que hace distill, que es
   la referencia declarada de la maqueta.

   La pila es de FUENTES DE SISTEMA, sin `@font-face` ni Google Fonts: el sitio
   no tiene hoy ninguna dependencia externa salvo el visor 3D y una sección de
   texto no es motivo para estrenar una. Charter e Iowan Old Style vienen en
   macOS, Georgia cubre Windows, y las tres comparten lo que aquí importa:
   TRAZO DE POCO CONTRASTE. Sobre negro, una serif de trazo fino (Didot, Times)
   se deshilacha y vibra; una de trazo robusto se sostiene.

   Y hay una coincidencia que se aprovecha: el paper compone con XCharter, que
   es la misma Charter. Los dos formatos comparten literalmente la letra. */
.rbody {
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif Pro",
           Georgia, "Times New Roman", serif;
  /* Texto de lectura: NI blanco puro NI frío. Blanco sobre negro produce
     halación —las letras «sangran» y el ojo se cansa antes—, así que se baja a
     ~78% y se calienta para que case con el --paper cálido de la marca. */
  --lectura: #C9C6C0;
}

/* ---------- portada del artículo ---------- */
.art { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* El ancho va en píxeles, no en `ch`. `ch` se resuelve contra la tipografía DEL
   PROPIO elemento, y `.ahead` hereda el cuerpo normal: 22ch daban ~180 px y el
   titular de 62 px se partía en seis líneas. Donde `ch` sí sirve es dentro del
   h1 y del subtítulo, que llevan su propio tamaño. */
.ahead {
  padding: clamp(96px, 15vh, 176px) 0 clamp(28px, 4vh, 46px);
  max-width: 920px;
}

/* El titular de un artículo NO usa `.huge` de la portada: allí la escala es la
   voz de la marca y aquí compite con el propio texto. Un punto por encima del
   cuerpo basta para que se lea como titular. */
/* 20ch y 62 px estaban calibrados para un titular de cuatro palabras. Con un
   título largo salían CINCO líneas que aplastaban la portada. Más medida y un
   punto menos de cuerpo lo dejan en tres, y `balance` reparte las líneas en vez
   de dejar la última coja.

   Lo que `balance` NO hace —se comprobó— es impedir que un compuesto se parta
   por su guion: «Ciber-guerreros» seguía cortándose. Eso lo resuelve el `.nb`
   que envuelve el generador, más abajo. */
.ahead h1 {
  margin-top: 14px; max-width: 26ch;
  font-size: clamp(31px, 4.6vw, 53px);
  line-height: 1.04; letter-spacing: -.032em; font-weight: 700;
  text-wrap: balance; hyphens: none;
}
.asub {
  margin-top: 16px; max-width: 46ch;
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.35;
  color: var(--dim); font-weight: 400; font-style: italic;
}

.abyline {
  display: flex; flex-wrap: wrap; gap: 26px 44px;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: 22px; border-top: 1px solid var(--hair);
  max-width: 780px;
}
.abyline > div { display: flex; flex-direction: column; gap: 6px; }
.bk {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint);
}
.bv { font-size: 13.5px; color: var(--paper); }

.pbtn {
  display: inline-block; margin-top: 26px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  border-radius: 100px; line-height: 1; padding: 12px 20px;
}
.pbtn:hover { filter: brightness(1.1); }

/* ---------- resumen ---------- */
.aresumen {
  max-width: 720px; margin-top: clamp(34px, 5vh, 56px);
  padding: 26px 0 30px; border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.aresumen h2 {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent); font-weight: 400;
}
.aresumen p {
  margin-top: 14px; font-family: var(--serif);
  color: var(--lectura); font-size: 17px; line-height: 1.6;
}
.aresumen strong { color: var(--paper); font-weight: 600; }

/* ---------- la columna de lectura y el índice al margen ---------- */
.awrap { display: grid; grid-template-columns: 1fr; gap: 40px; padding: clamp(34px,5vh,60px) 0; }
@media (min-width: 1040px) {
  .awrap { grid-template-columns: 190px minmax(0, 720px); gap: 64px; }
}

.atoc { position: sticky; top: 92px; align-self: start; display: none; }
@media (min-width: 1040px) { .atoc { display: block; } }
.atoc .lab { margin-bottom: 14px; }
.atoc a {
  display: block; padding: 5px 0; font-size: 12.5px; line-height: 1.35;
  color: var(--dim); border-left: 1px solid var(--hair); padding-left: 12px;
  transition: color .16s, border-color .16s;
}
.atoc a:hover { color: var(--paper); border-color: var(--accent); }
.atoc a span {
  display: inline-block; min-width: 22px;
  font-family: var(--mono); font-size: 10px; color: var(--faint);
}
.atoc a.t2 { padding-left: 26px; font-size: 12px; }

/* ---------- el cuerpo ---------- */
/* 720 px y 17 px de cuerpo dan ~66 caracteres por línea, que es la medida en la
   que se lee sin perder el renglón. Es la única razón de que la columna sea
   estrecha teniendo la pantalla entera disponible. */
/* `min-width: 0` no es decorativo: un ítem de rejilla tiene `min-width: auto`, así
   que NO baja del ancho mínimo de su contenido. La tabla lleva `min-width: 520px`
   para poder deslizarse, y sin esta línea esos 520 px estiraban la columna entera
   y desbordaban la página a 390 px de ancho. Con ella, la que se desliza es la
   tabla, que es lo que se quería. */
.abody {
  max-width: 720px; min-width: 0;
  font-family: var(--serif);
  font-size: 19.5px; line-height: 1.66; color: var(--lectura);
  /* En castellano las palabras son largas y la columna estrecha: sin partición
     quedan renglones con huecos enormes al lado de otros apretados, y ese
     desorden se nota aunque no se sepa nombrar. Necesita `lang="es"`. */
  hyphens: auto; -webkit-hyphens: auto;
  /* Sin límites, la partición se desbocaba: cuatro renglones seguidos acabando
     en guión («Volvere-mos», «dise-ños», «res-pondes»…) forman una escalera que
     se lee peor que los huecos que venía a arreglar. Palabra de 6+ letras,
     mínimo 3 a cada lado, y nunca más de dos líneas seguidas partidas. */
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2;
  text-wrap: pretty;
  font-kerning: normal; font-variant-numeric: oldstyle-num;
}
.abody p { margin-bottom: 1.15em; }
/* La entradilla, un punto por encima: da un escalón de entrada al texto y
   marca dónde empieza a leerse de verdad. */
.abody > p:first-of-type { font-size: 21px; line-height: 1.58; color: #DAD7D1; }
.abody strong { color: var(--paper); font-weight: 700; }
.abody em { color: var(--paper); font-style: italic; }
.abody a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.abody code {
  font-family: var(--mono); font-size: .84em;
  background: #14141A; border: 1px solid var(--hair);
  border-radius: 4px; padding: 1px 5px; color: #C9C9D2;
}

/* Los titulares se quedan en la paloseco de la marca. El contraste serif/grotesca
   es lo que hace que un encabezado se lea como encabezado sin necesidad de
   agrandarlo: la jerarquía la da el cambio de voz, no el tamaño. */
.abody h2, .abody h3, .abody h4 {
  font-family: var(--sans); text-wrap: balance; hyphens: none;
}
.abody h2 {
  margin: 2.1em 0 .7em;
  font-size: clamp(24px, 3vw, 33px); line-height: 1.12;
  letter-spacing: -.028em; font-weight: 700; color: var(--paper);
  scroll-margin-top: 90px;
}
/* Un filete finísimo sobre cada sección: separa sin meter una regla gruesa,
   y da al ojo un punto de descanso al bajar por seis páginas de texto. */
.abody h2::before {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--accent); margin-bottom: 22px;
}
.abody h3 {
  margin: 2.2em 0 .55em;
  font-size: clamp(17px, 2vw, 20px); line-height: 1.22;
  letter-spacing: -.01em; font-weight: 700; color: var(--paper);
  scroll-margin-top: 90px;
}
.abody h4 {
  margin: 1.7em 0 .4em; font-size: 15px; font-weight: 700; color: var(--paper);
  letter-spacing: .01em;
}
/* El número de sección va colgado al margen izquierdo en pantalla ancha, como en
   distill: ordena sin robarle sitio al titular. En estrecho vuelve al flujo. */
.abody .snum {
  font-family: var(--mono); font-weight: 400; color: var(--accent);
  font-size: .5em; letter-spacing: .1em; margin-right: .8em;
}
@media (min-width: 1040px) {
  .abody .snum { position: absolute; margin-left: -3.2em; margin-right: 0; }
  .abody h2, .abody h3 { position: relative; }
}

.abody ul, .abody ol { margin: 0 0 1.3em 1.15em; padding-left: .4em; }
.abody li { margin-bottom: .65em; }
.abody ul li::marker { color: var(--accent); }
.abody ol li::marker { color: var(--accent); font-family: var(--mono); font-size: .85em; }

.abody blockquote {
  margin: 1.9em 0; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent);
  color: var(--paper); font-size: 20px; line-height: 1.5;
  font-style: italic; hyphens: none;
}

.abody hr {
  border: 0; height: 1px; background: var(--hair);
  margin: 2.8em 0;
}

/* ---------- figuras ---------- */
/* El SVG va INCRUSTADO, no en un <img>: así hereda la paleta, escala sin
   pixelarse y no cuesta una petición de red por diagrama. La geometría la
   genera `research/tools/diagramas.py`, que emite la misma escena en TikZ para
   el paper — un diagrama que sólo existiera aquí rompería la promesa de que
   los dos formatos dicen lo mismo. */
.dfig {
  margin: 2.4em 0; padding: 26px 24px 20px;
  border: 1px solid var(--hair); background: #0C0C10; border-radius: 3px;
}
.dfig .dsvg { display: block; width: 100%; height: auto; }
/* Misma regla que las tablas: un diagrama técnico no se encoge, se desliza.
   Encogido a 340 px, los rótulos de estas escenas caen a ~6 px y dejan de
   leerse — y un diagrama ilegible ocupa sitio sin decir nada. */
@media (max-width: 700px) {
  .dfig { padding: 20px 16px 16px; }
  .dfig .dfigw { overflow-x: auto; }
  .dfig .dsvg { min-width: 520px; }
}
.dfig figcaption {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--dim); hyphens: none;
}
.dfig figcaption b { color: var(--accent); font-weight: 600; }
/* En pantalla ancha la figura respira hacia el margen derecho, que está vacío.
   Se sale de la medida a propósito: un diagrama no se lee renglón a renglón. */
@media (min-width: 1180px) { .dfig { width: calc(100% + 96px); } }

/* ---------- tablas ---------- */
/* Una tabla técnica no se encoge: se desliza, igual que los diagramas del kit.
   Con rótulos de 12 px, reducir cuatro columnas a 340 px las vuelve ilegibles.

   Pero deslizar sin decirlo es lo mismo que cortar: en macOS y en iOS la barra
   está oculta hasta que se arrastra, así que la tabla parecía simplemente
   truncada. Se le pone la misma barra fina que a las galerías del resto del
   sitio, por coherencia y porque es la única pista que hay en un móvil. */
.tablaw {
  overflow-x: auto;
  /* Sin declarar overflow-y el navegador lo calcula como `auto` por su cuenta:
     en CSS, si un eje deja de ser `visible`, el otro tampoco puede serlo. La
     tabla se convertiría en contenedor de scroll VERTICAL y se quedaría con la
     rueda del ratón antes que la página. Es el mismo fallo que tenían las
     galerías de la portada hasta la auditoría de agosto. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  margin: 1.7em 0;
  scrollbar-width: thin; scrollbar-color: #3a3a42 transparent;
}
.tablaw::-webkit-scrollbar       { height: 6px; }
.tablaw::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 3px; }
.abody table {
  border-collapse: collapse; width: 100%; min-width: 520px;
  font-family: var(--sans); font-size: 14px; hyphens: none;
}
/* Dos columnas —clave y valor— envuelven bien a 390 px. Obligarlas a deslizar
   escondía media norma en un móvil, que es justo la parte del reglamento que se
   consulta con el robot en la mano. */
.tablaw.estrecha { overflow-x: visible; }
.tablaw.estrecha table { min-width: 0; }
@media (max-width: 560px) {
  .tablaw.estrecha th, .tablaw.estrecha td { padding-right: 10px; }
  .tablaw.estrecha table { font-size: 13.5px; }
}
.abody th, .abody td {
  text-align: left; vertical-align: top;
  padding: 11px 16px 11px 0; border-bottom: 1px solid var(--hair);
}
.abody th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); font-weight: 400;
  border-bottom-color: var(--faint);
}
.abody td { color: var(--dim); line-height: 1.5; }
.abody td:first-child { color: var(--paper); }

/* Fila marcada con `|=` en el origen: es la postura del proyecto. Sin señalarla,
   la tabla obliga a volver al párrafo para saber cuál de las cuatro es la
   nuestra. El filete de la izquierda repite el del recuadro, que ya significa
   «esto es voz propia». */
.abody tbody tr.on td {
  background: rgba(255, 59, 15, .07); color: var(--accent);
  border-bottom-color: rgba(255, 59, 15, .30);
}
.abody tbody tr.on td:first-child {
  color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px;
}

/* Número en círculo, `((3))` neutro y `((!3))` en acento. Emparejan la lista de
   objeciones con la de respuestas: el mismo dígito en los dos sitios, y el color
   diciendo cuál es la crítica y cuál la contestación. */
.cnum {
  display: inline-block; width: 1.42em; height: 1.42em; line-height: 1.36em;
  border-radius: 50%; border: 1px solid var(--dim); text-align: center;
  font-family: var(--sans); font-weight: 600; font-size: .66em;
  color: var(--dim); vertical-align: .16em; margin-right: .1em;
}
.cnum.on {
  border-color: var(--accent); color: var(--accent);
  background: rgba(255, 59, 15, .10);
}

/* ---------- citas numeradas y notas al margen ---------- */
.cita { font-family: var(--mono); font-size: .68em; }
.cita a { color: var(--accent); text-decoration: none; }

/* La nota es un `<input type=checkbox>` oculto y su etiqueta: en pantalla ancha
   vive al margen y en móvil se despliega al tocarla. Sin una línea de JavaScript,
   que es la regla del sitio. */
.nota-r {
  font-family: var(--mono); font-size: .68em; color: var(--accent);
  cursor: pointer; vertical-align: super; padding: 0 2px;
}
.nota-t { display: none; }
.nota {
  display: none; margin: .7em 0; padding-left: 14px;
  border-left: 2px solid var(--faint); font-family: var(--sans);
  font-size: 13.5px; line-height: 1.5; color: var(--dim);
}
.nota-t:checked + .nota { display: block; }
@media (min-width: 1320px) {
  .nota-r { cursor: default; }
  .nota {
    display: block; position: absolute; right: -270px; width: 240px;
    margin-top: -1.2em; padding-left: 12px; border-left: 1px solid var(--hair);
    font-size: 12.5px;
  }
  .abody p { position: relative; }
}

/* ---------- referencias ---------- */
.refs {
  margin: 0 0 1em 1.35em; font-family: var(--sans);
  font-size: 14px; line-height: 1.55; color: var(--dim);
}
.refs li { margin-bottom: .9em; scroll-margin-top: 90px; }
.refs li::marker { color: var(--accent); font-family: var(--mono); font-size: .85em; }
.refs i { color: var(--paper); font-style: normal; }
.rnota { display: block; margin-top: 4px; color: var(--faint); font-size: 12.5px; }

/* ---------- pie del artículo ---------- */
.afoot {
  max-width: 720px; margin: clamp(40px,6vh,72px) 0 clamp(60px,9vh,110px);
  padding-top: 26px; border-top: 1px solid var(--hair);
  color: var(--faint); font-size: 13px; line-height: 1.6;
}
.afoot p { margin-top: 10px; }
.afoot code { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ---------- índice de la sección ---------- */
.rindex { max-width: var(--maxw); margin: 0 auto; padding: clamp(96px,15vh,176px) var(--pad) 0; }
.rindex h1 { margin-top: 14px; }
.rindex .dimtxt { margin-top: 24px; max-width: 56ch; }

.rlist {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin: clamp(38px,6vh,70px) 0 clamp(60px,9vh,110px);
}
@media (min-width: 900px) { .rlist { grid-template-columns: repeat(2, 1fr); } }

.rcard {
  display: flex; flex-direction: column;
  padding: clamp(24px,3vw,34px); border: 1px solid var(--hair); background: #0D0D11;
  transition: border-color .18s, background .18s, transform .18s;
}
.rcard:hover { border-color: var(--accent); background: #121217; transform: translateY(-2px); }
.rnum {
  font-size: clamp(30px,3.6vw,44px); font-weight: 700;
  letter-spacing: -.05em; color: var(--accent); line-height: 1;
}
.rtipo {
  margin-top: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.rcard h2 {
  margin-top: 10px; font-size: clamp(19px,2.2vw,25px);
  line-height: 1.16; letter-spacing: -.02em; font-weight: 700;
}
.rsub { margin-top: 8px; color: var(--dim); font-size: 14px; line-height: 1.45; }
.rdesc { margin-top: 14px; color: var(--faint); font-size: 13px; line-height: 1.55; }
.rgo {
  margin-top: auto; padding-top: 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.rgo::after { content: " →"; }

/* ---------- frase destacada ---------- */
/* El recurso que usan los papers para que la tesis se lea sin leer el párrafo
   entero. NO lleva comillas: no es una cita ajena, es el propio texto subido de
   volumen. Va en paloseco para que se distinga del cuerpo en serif. */
.destacado {
  margin: 2.1em 0; padding: 26px 0;
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(21px, 2.7vw, 27px); line-height: 1.24;
  letter-spacing: -.02em; color: var(--paper);
  hyphens: none; text-wrap: balance;
}
.destacado strong { color: var(--accent); font-weight: 700; }

/* ---------- recuadro de aclaración ---------- */
.recuadro {
  margin: 2em 0; padding: 20px 22px;
  border-left: 2px solid var(--accent); background: #17100E;
  font-size: 17px; line-height: 1.6; color: #D3D0CA;
}
.recuadro .rec-t {
  margin-bottom: 8px; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.recuadro p:last-child { margin-bottom: 0; }
.recuadro strong { color: var(--paper); }

/* ---------- índice: sección activa ---------- */
.atoc a.on {
  color: var(--paper); border-color: var(--accent);
  background: linear-gradient(90deg, rgba(255,59,15,.10), transparent 70%);
}
.atoc a.on span { color: var(--accent); }

/* Compuesto que no debe partirse en un titular. Lo aplica `titulo_h1()` en el
   generador: el guion es una oportunidad de corte y a 53 px parte palabras como
   «Ciber-guerreros» por la mitad. */
.nb { white-space: nowrap; }


/* ---------- móvil: la barra fija ---------- */
/* La barra móvil mide 66 px (una fila con el icono de menú). El
   `scroll-margin-top` de 90 px está calibrado para la de escritorio y aquí dejaba
   un hueco de más al saltar desde el índice. */
@media (max-width: 780px) {
  .abody h2, .abody h3, .refs li { scroll-margin-top: 78px; }
  .atoc { top: 78px; }
}

/* El cuerpo a 19,5 px viene calibrado para 720 px de columna (~66 caracteres).
   En un teléfono la columna es de ~346 px, y ese mismo cuerpo da ~40: demasiado
   corto, y la partición de palabras se dispara hasta hacer escalera. Un punto
   menos devuelve la línea a ~46 caracteres, que en móvil es lo cómodo. */
@media (max-width: 700px) {
  .abody { font-size: 17.5px; line-height: 1.62; }
  .abody > p:first-of-type { font-size: 18.5px; line-height: 1.56; }
  .abody blockquote { font-size: 18px; }
  .recuadro { font-size: 15.5px; padding: 16px 16px; }
  .aresumen p { font-size: 16px; }
}

/* ---------- medios: imagen y clip ---------- */
/* Un clip lleva SIEMPRE póster: es el fotograma que imprime el paper, y además
   evita que la página cargue vídeo que quizá nadie reproduzca (`preload=none`). */
.dfig .dmed {
  display: block; width: 100%; height: auto;
  border-radius: 2px; background: #000;
}
.dfig video.dmed { cursor: pointer; }