/* ==========================================================================
   figuras.css — la figura con crédito, común a las historias y a las guías
   --------------------------------------------------------------------------
   Estas reglas vivían dentro de css/historias.css, donde nacieron. El 15 de
   septiembre de 2026 las guías vivas del cielo estrenaron sus propias imágenes
   reales y necesitaban exactamente la misma figura, así que el bloque se sacó
   aquí para que exista UNA sola definición y las dos secciones no deriven.

   Las declaraciones son las mismas, letra por letra, que tenía historias.css;
   lo único que cambia es el selector, que ahora nombra también a la figura de
   las guías (.fig). En las historias la figura es un <figure> suelto dentro de
   .hist y el marcado no se tocó; en las guías se escribe
   <figure class="fig"> porque ahí conviven con figuras de diagrama que tienen
   sus propias reglas en eclipse.css y lluvias.css.

   No define colores ni tipografías propias: todo sale de las variables de
   site.css. Esta hoja se enlaza DESPUÉS de site.css.
   ========================================================================== */

/* -------------------------------------------------- figuras con su crédito - */
.hist figure,
.fig {
  margin: 1.9rem 0;
}
.hist figure img,
.fig img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #000;
}
.hist figure:not(.fig-menor) img,
.fig:not(.fig-menor) img { width: 100%; }
/* Pieza por debajo de los 800 px de ancho: se muestra a su tamaño real y jamás
   ampliada. En este canal la resolución baja de una placa de instrumento no es
   un defecto que haya que disimular, es parte del dato. Aquí NO se declara
   `width` en CSS a propósito: así mandan los atributos width/height del HTML,
   que llevan los píxeles reales del archivo, y el navegador reserva el hueco
   exacto antes de descargar la imagen en lugar de colapsar la figura a cero. */
.hist figure.fig-menor img,
.fig.fig-menor img { margin-inline: auto; }
.hist figcaption,
.fig figcaption {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin-top: 0.6rem;
}
.hist figcaption .credito,
.fig figcaption .credito { color: var(--grey-own); }

@media (max-width: 30rem) {
  .hist figure,
  .fig { margin: 1.5rem 0; }
}