/* =========================================================================
   lamanufacturera.com  ·  bitácora de cultura, arte y diseño (Guadalajara)
   Hoja única. Sin tipografías remotas, sin CDN, sin scripts. Todo local.
   Vocabulario de clases: prefijo tll- (jerga de taller gráfico y redacción:
   bastidor, cintillo, balazo, entradilla, capitular, ladillo, destacado,
   recuadro, lámina, legajo, ficha, pliego, colofón).
   -------------------------------------------------------------------------
   Contrastes medidos sobre el papel #f5e7e1 :
     texto  #2b1c19  13,5:1   ·  texto suave #5f4741  7,0:1
     jade   #0d5a4b   6,7:1   ·  jade hondo  #083d33  10,1:1
     mínimo dentro de los bloques en hueco (#ead2c9) : 5,5:1
   ========================================================================= */

:root {
  /* --- Color ---------------------------------------------------------- */
  --cal: #f5e7e1;          /* papel: cal rosada, muro encalado del poniente */
  --cal-honda: #ead2c9;    /* fondo de los bloques en hueco                 */
  --tinta: #2b1c19;        /* texto corrido: café casi negro                */
  --tinta-suave: #5f4741;  /* fechas, pies, notas                           */
  --jade: #0d5a4b;         /* acento: verde jade, enlaces y numeración      */
  --jade-hondo: #083d33;   /* jade al pasar el cursor y en el foco          */
  --filete: #d9b3a6;       /* filetes, bordes, puntillas                    */

  /* --- Tipografías (solo pilas del sistema) --------------------------- */
  --tipo-titular: "Bodoni 72", "Bodoni MT", Didot, "Big Caslon",
                  "Hoefler Text", "Playfair Display", Georgia, serif;
  --tipo-lectura: Charter, "Bitstream Charter", "Sitka Text", Constantia,
                  Cambria, "Noto Serif", Georgia, serif;
  --tipo-seca: "Avenir Next Condensed", "Helvetica Neue Condensed",
               "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow",
               Arial, sans-serif;

  /* --- Medida y ritmo -------------------------------------------------- */
  --medida: 31.5rem;       /* columna de lectura, estrecha a propósito      */
  --margen-ancho: 12rem;   /* corondel izquierdo: fechas, cifras, números   */
  --respiro: 3.1rem;
  --cuerpo: clamp(1.06rem, 0.98rem + 0.36vw, 1.24rem);
  --interlinea: 1.74;

  --filete-grosor: 1px;
  --radio: 0;
}

/* =========================================================================
   1. Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--tipo-lectura);
  font-size: var(--cuerpo);
  line-height: var(--interlinea);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--tipo-titular);
  font-weight: 400;
  line-height: 1.14;
  margin: 0;
  letter-spacing: 0.002em;
}

p, ul, ol, figure, table, blockquote, dl { margin: 0; }

a { color: var(--jade); text-underline-offset: 0.2em; }
a:hover { color: var(--jade-hondo); }

:focus-visible { outline: 3px solid var(--jade-hondo); outline-offset: 2px; }

hr { border: 0; }

/* =========================================================================
   2. Salto al contenido
   ========================================================================= */

.tll-salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--jade-hondo);
  color: var(--cal);
  padding: 0.7rem 1.2rem;
  font-family: var(--tipo-seca);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 30;
}
.tll-salto:focus { left: 0.5rem; top: 0.5rem; color: var(--cal); }

/* =========================================================================
   3. El bastidor : columna única + corondel de márgenes
   -------------------------------------------------------------------------
   NO TOCAR el par width/padding-left: de él dependen las cifras, las fechas
   y las láminas que salen al corondel izquierdo sin desbordar la pantalla.
   ========================================================================= */

.tll-bastidor {
  width: min(100% - 2.2rem, var(--medida));
  margin-inline: auto;
  position: relative;
}

@media (min-width: 68rem) {
  .tll-bastidor {
    width: min(100% - 4rem, calc(var(--medida) + var(--margen-ancho)));
    padding-left: var(--margen-ancho);
  }
}

.tll-fuera { margin-left: 0; }
@media (min-width: 68rem) {
  .tll-fuera { margin-left: calc(-1 * var(--margen-ancho)); }
}

/* =========================================================================
   4. Cabecera y cintillo
   ========================================================================= */

.tll-cabecera { padding-top: 1.25rem; }

.tll-cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.4rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--tinta);
}

.tll-rotulo {
  font-family: var(--tipo-titular);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--tinta);
  text-decoration: none;
}
.tll-rotulo:hover { color: var(--jade); }

.tll-rotulo__lema {
  display: block;
  font-family: var(--tipo-seca);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 0.42rem;
}

.tll-brujula ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.05rem;
}

.tll-brujula a {
  font-family: var(--tipo-seca);
  font-size: 0.92rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-decoration: none;
  padding-bottom: 0.12rem;
  border-bottom: 2px solid transparent;
}
.tll-brujula a:hover { color: var(--jade); border-bottom-color: var(--filete); }
.tll-brujula a[aria-current] { color: var(--tinta); border-bottom-color: var(--jade); }

/* Banda fina bajo la cabecera : una sola línea, siempre la misma */
.tll-cintillo {
  border-bottom: var(--filete-grosor) solid var(--filete);
  margin-bottom: var(--respiro);
}
.tll-cintillo p {
  font-family: var(--tipo-seca);
  font-size: 0.76rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--jade);
  padding: 0.5rem 0 0.55rem;
}

/* =========================================================================
   5. Portada de página y encabezado de texto
   ========================================================================= */

.tll-portada { padding-top: 0.4rem; }

/* Los párrafos sueltos de la portada de página (editorial, presentación de
   sección) necesitan aire; :where() mantiene la especificidad a cero para que
   las clases de abajo sigan mandando sobre sus propios márgenes. */
.tll-portada :where(p) { margin-bottom: 1.15rem; max-width: var(--medida); }
.tll-portada :where(p:last-child) { margin-bottom: 0; }
.tll-recuadro :where(p) { margin-bottom: 0.9rem; }

.tll-balazo {
  font-family: var(--tipo-seca);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 1rem;
}
.tll-balazo a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filete); }
.tll-balazo a:hover { border-bottom-color: currentColor; }

.tll-titular {
  font-size: clamp(1.95rem, 1.5rem + 2vw, 2.9rem);
  margin-bottom: 1.05rem;
}

.tll-entradilla {
  font-family: var(--tipo-lectura);
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--tinta-suave);
  margin-bottom: 1.35rem;
}

.tll-firma {
  font-family: var(--tipo-seca);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  padding-bottom: 1.3rem;
  border-bottom: var(--filete-grosor) solid var(--filete);
}
.tll-firma span::after { content: "/"; margin-left: 0.85rem; color: var(--filete); }
.tll-firma span:last-child::after { content: ""; margin: 0; }

/* =========================================================================
   6. Cuerpo de texto
   ========================================================================= */

.tll-cuerpo { counter-reset: tll-ladillo; padding-top: 1.7rem; }

.tll-cuerpo p { margin-bottom: 1.2rem; max-width: var(--medida); }

.tll-cuerpo > ul, .tll-cuerpo > ol {
  margin: 0 0 1.6rem;
  padding-left: 1.25rem;
  max-width: var(--medida);
}
.tll-cuerpo li { margin-bottom: 0.55rem; }
.tll-cuerpo li::marker { color: var(--jade); }

.tll-cuerpo a { color: var(--jade); text-decoration: underline; }

/* Capitular en bloque : letra en hueco sobre cuadro de jade */
.tll-capitular::first-letter {
  float: left;
  font-family: var(--tipo-titular);
  font-size: 2.9em;
  line-height: 1;
  padding: 0.16em 0.2em 0.14em;
  margin: 0.06em 0.4rem 0 0;
  background: var(--jade);
  color: var(--cal);
}

/* Ladillos : filete fino arriba y cifra grande en el corondel */
.tll-ladillo {
  font-size: clamp(1.28rem, 1.15rem + 0.55vw, 1.62rem);
  margin: 2.9rem 0 0.95rem;
  padding-top: 0.95rem;
  border-top: var(--filete-grosor) solid var(--tinta);
  position: relative;
  max-width: var(--medida);
}

.tll-ladillo::before {
  counter-increment: tll-ladillo;
  content: counter(tll-ladillo, decimal-leading-zero);
  display: block;
  font-family: var(--tipo-titular);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--jade);
  margin-bottom: 0.3rem;
}

@media (min-width: 68rem) {
  .tll-ladillo::before {
    position: absolute;
    left: calc(-1 * var(--margen-ancho));
    top: 0.85rem;
    width: calc(var(--margen-ancho) - 1.8rem);
    text-align: right;
    font-size: 2.15rem;
    margin: 0;
  }
}

.tll-subladillo {
  font-family: var(--tipo-seca);
  font-size: 1.06rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 2rem 0 0.7rem;
  color: var(--tinta);
  max-width: var(--medida);
}

/* Destacado : centrado en la columna, entre dos filetes de jade.
   (En este sitio la cita NO se va al corondel: el corondel es de las cifras,
   las fechas y las láminas.) */
.tll-destacado {
  margin: 2.4rem 0;
  padding: 1.15rem 0 1.2rem;
  border-top: 2px solid var(--jade);
  border-bottom: 2px solid var(--jade);
  text-align: center;
  font-family: var(--tipo-titular);
  font-style: italic;
  font-size: clamp(1.22rem, 1.08rem + 0.6vw, 1.55rem);
  line-height: 1.34;
  color: var(--tinta);
  max-width: var(--medida);
}
.tll-destacado p { margin: 0; max-width: none; }
.tll-destacado cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--tipo-seca);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Recuadro en hueco : barra de jade a la izquierda */
.tll-recuadro {
  background: var(--cal-honda);
  border-left: 5px solid var(--jade);
  padding: 1.25rem 1.35rem;
  margin: 2.4rem 0;
  max-width: var(--medida);
}
.tll-recuadro__titulo {
  font-family: var(--tipo-seca);
  font-size: 0.8rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--jade-hondo);
  margin-bottom: 0.55rem;
}
.tll-recuadro p:last-child { margin-bottom: 0; }
.tll-recuadro ul { margin: 0.6rem 0 0; padding-left: 1.15rem; }
.tll-recuadro li { margin-bottom: 0.4rem; }
.tll-recuadro li:last-child { margin-bottom: 0; }

/* Glosario : bloque de definiciones cortas, extraíbles de un vistazo.
   Es el bloque propio de este sitio; no viene del esqueleto. */
.tll-glosario {
  margin: 2.4rem 0;
  padding-top: 1rem;
  border-top: 2px solid var(--tinta);
  max-width: var(--medida);
}
.tll-glosario__titulo {
  font-family: var(--tipo-seca);
  font-size: 0.8rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.9rem;
}
.tll-glosario dt {
  font-family: var(--tipo-titular);
  font-size: 1.06rem;
  color: var(--tinta);
  margin-top: 0.95rem;
}
.tll-glosario dt:first-of-type { margin-top: 0; }
.tll-glosario dd {
  margin: 0.25rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.98rem;
  border-left: 2px solid var(--filete);
  padding-left: 0.8rem;
}

/* Lámina : la imagen sale al corondel, el texto no */
.tll-lamina { margin: 2.5rem 0; }
.tll-lamina img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 3px solid var(--jade);
}
.tll-lamina figcaption {
  font-family: var(--tipo-seca);
  font-size: 0.86rem;
  color: var(--tinta-suave);
  margin-top: 0.6rem;
  max-width: var(--medida);
}

/* En pantalla ancha la lámina ocupa columna y corondel; el pie vuelve a la columna */
@media (min-width: 68rem) {
  .tll-lamina.tll-fuera {
    margin-left: calc(-1 * var(--margen-ancho));
    width: calc(100% + var(--margen-ancho));
  }
  .tll-lamina.tll-fuera figcaption { margin-left: var(--margen-ancho); }
}

/* Tabla ancha : desplazamiento dentro de su propio marco */
.tll-tabla {
  overflow-x: auto;
  margin: 2.2rem 0;
  border-top: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  -webkit-overflow-scrolling: touch;
}
.tll-tabla table {
  border-collapse: collapse;
  min-width: 34rem;
  width: 100%;
  font-family: var(--tipo-seca);
  font-size: 0.95rem;
}
.tll-tabla th:first-child, .tll-tabla td:first-child { white-space: nowrap; }
.tll-tabla caption {
  caption-side: top;
  text-align: left;
  padding: 0.75rem 0.85rem;
  font-family: var(--tipo-seca);
  font-size: 0.79rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: var(--filete-grosor) solid var(--filete);
}
.tll-tabla th, .tll-tabla td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: var(--filete-grosor) solid var(--filete);
  vertical-align: top;
}
.tll-tabla thead th {
  color: var(--jade-hondo);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
.tll-tabla tbody tr:last-child td { border-bottom: 0; }

/* Como las láminas, las tablas usan también el corondel en pantalla ancha */
@media (min-width: 68rem) {
  .tll-tabla {
    margin-left: calc(-1 * var(--margen-ancho));
    width: calc(100% + var(--margen-ancho));
  }
}

/* Cuando el cuerpo abre directamente con un ladillo (páginas de sección),
   el filete del ladillo sobra: ya hay uno justo encima. */
.tll-cuerpo > .tll-ladillo:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 68rem) {
  .tll-cuerpo > .tll-ladillo:first-child::before { top: -0.15rem; }
}

/* =========================================================================
   7. Llamadas y notas
   ========================================================================= */

.tll-llamada {
  font-family: var(--tipo-seca);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  padding: 0 0.1em;
}
.tll-llamada:hover { text-decoration: underline; }

.tll-notas {
  margin-top: 3.1rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--tinta);
}
.tll-notas__titulo {
  font-family: var(--tipo-seca);
  font-size: 0.8rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1rem;
}
.tll-notas ol {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.94rem;
  color: var(--tinta-suave);
  max-width: var(--medida);
}
.tll-notas li { margin-bottom: 0.8rem; }
.tll-notas li::marker { font-family: var(--tipo-seca); color: var(--jade); }
.tll-regreso { font-family: var(--tipo-seca); text-decoration: none; margin-left: 0.3rem; }

/* =========================================================================
   8. Índice al final del texto
   ========================================================================= */

.tll-indice {
  margin-top: 2.9rem;
  padding: 1.4rem 0 0;
  border-top: var(--filete-grosor) solid var(--filete);
}
.tll-indice__titulo {
  font-family: var(--tipo-seca);
  font-size: 0.8rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1rem;
}
.tll-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: tll-hilo-indice; }
.tll-indice li { margin-bottom: 0.6rem; }
.tll-indice a {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(1.4rem, 1fr) auto;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--tipo-seca);
  font-size: 1rem;
}
.tll-indice a:hover { color: var(--jade); }
.tll-indice a::before {
  counter-increment: tll-hilo-indice;
  content: counter(tll-hilo-indice, decimal-leading-zero);
  font-family: var(--tipo-titular);
  color: var(--jade);
  font-size: 0.9rem;
}
.tll-puntos { border-bottom: 1px dotted var(--filete); transform: translateY(-0.3em); }
.tll-indice__minutos { color: var(--tinta-suave); font-size: 0.84rem; }

/* =========================================================================
   9. Legajo de fichas (portada y secciones). Nunca tarjetas, nunca rejilla.
   ========================================================================= */

.tll-legajo { list-style: none; margin: 0; padding: 0; }

.tll-ficha {
  padding: 1.6rem 0;
  border-bottom: var(--filete-grosor) solid var(--filete);
  position: relative;
}
.tll-ficha:first-child { padding-top: 0.35rem; }
.tll-legajo > .tll-ficha:last-child { border-bottom: 0; padding-bottom: 0.7rem; }

.tll-ficha__fecha {
  display: block;
  font-family: var(--tipo-seca);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.4rem;
}

@media (min-width: 68rem) {
  .tll-ficha__fecha {
    position: absolute;
    left: calc(-1 * var(--margen-ancho));
    top: 1.95rem;
    width: calc(var(--margen-ancho) - 1.8rem);
    text-align: right;
    margin: 0;
  }
  .tll-ficha:first-child .tll-ficha__fecha { top: 0.6rem; }
}

.tll-ficha__titulo {
  font-size: clamp(1.24rem, 1.1rem + 0.62vw, 1.56rem);
  margin-bottom: 0.5rem;
}
.tll-ficha__titulo a { color: var(--tinta); text-decoration: none; }
.tll-ficha__titulo a:hover { color: var(--jade); text-decoration: underline; }

.tll-ficha__resumen { color: var(--tinta-suave); margin-bottom: 0.6rem; }

.tll-ficha__pie {
  font-family: var(--tipo-seca);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
}
.tll-ficha__pie a { color: var(--jade); text-decoration: none; }
.tll-ficha__pie a:hover { text-decoration: underline; }

/* =========================================================================
   10. Pliego de secciones : lista de enlaces
   ========================================================================= */

.tll-pliego { list-style: none; margin: 0; padding: 0; }
.tll-pliego li {
  padding: 1rem 0;
  border-bottom: var(--filete-grosor) dotted var(--filete);
}
.tll-pliego li:last-child { border-bottom: 0; }
.tll-pliego a {
  font-family: var(--tipo-titular);
  font-size: 1.16rem;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--jade);
}
.tll-pliego a:hover { color: var(--jade); }
.tll-pliego p { margin: 0.42rem 0 0; font-size: 0.96rem; color: var(--tinta-suave); }

/* =========================================================================
   11. Filetes, tramos, apuntes, seguir leyendo, pasos
   ========================================================================= */

.tll-hilo {
  height: 0;
  border-top: 2px solid var(--tinta);
  margin: var(--respiro) 0;
  max-width: var(--medida);
}
.tll-hilo--fino { border-top: var(--filete-grosor) solid var(--filete); }

.tll-tramo { margin-bottom: var(--respiro); }

.tll-tramo__titulo {
  font-family: var(--tipo-seca);
  font-size: 0.82rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: 0.5rem;
  border-bottom: var(--filete-grosor) solid var(--tinta);
  margin-bottom: 1.3rem;
}

.tll-apunte {
  font-family: var(--tipo-seca);
  font-size: 0.86rem;
  color: var(--tinta-suave);
  margin-bottom: 1.3rem;
}

.tll-seguir { margin-top: 2.8rem; }
.tll-seguir ul { list-style: none; margin: 0; padding: 0; }
.tll-seguir li { padding: 0.75rem 0; border-bottom: var(--filete-grosor) dotted var(--filete); }
.tll-seguir li:last-child { border-bottom: 0; }
.tll-seguir a {
  font-family: var(--tipo-titular);
  font-size: 1.12rem;
  color: var(--tinta);
  text-decoration: none;
}
.tll-seguir a:hover { color: var(--jade); text-decoration: underline; }
.tll-seguir span {
  display: block;
  font-family: var(--tipo-seca);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 0.18rem;
}

.tll-paso {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem 1.2rem;
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: var(--filete-grosor) solid var(--filete);
  font-family: var(--tipo-seca);
  font-size: 0.9rem;
}
.tll-paso a { text-decoration: none; border-bottom: 1px solid var(--filete); }
.tll-paso a:hover { border-bottom-color: var(--jade); }
.tll-paso__quieto { color: var(--tinta-suave); }

/* =========================================================================
   12. Colofón (pie de página)
   ========================================================================= */

.tll-colofon {
  margin-top: calc(var(--respiro) * 1.5);
  border-top: 2px solid var(--tinta);
  padding: 1.7rem 0 3.2rem;
  font-family: var(--tipo-seca);
  font-size: 0.92rem;
  color: var(--tinta-suave);
}
.tll-colofon__nombre {
  font-family: var(--tipo-titular);
  font-size: 1.15rem;
  color: var(--tinta);
  margin-bottom: 0.5rem;
}
.tll-colofon p { margin-bottom: 0.9rem; max-width: var(--medida); }
.tll-colofon ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.05rem;
}
.tll-colofon a { color: var(--tinta-suave); text-decoration: none; border-bottom: 1px solid var(--filete); }
.tll-colofon a:hover { color: var(--jade); border-bottom-color: var(--jade); }
.tll-nota-pie { font-size: 0.8rem; letter-spacing: 0.06em; }

/* =========================================================================
   13. Impresión
   ========================================================================= */

@media print {
  :root { --cal: #ffffff; --cal-honda: #f2f2f2; --tinta: #000000; --jade: #000000; }
  .tll-brujula, .tll-seguir, .tll-paso, .tll-salto, .tll-cintillo { display: none; }
  .tll-bastidor { width: auto; padding-left: 0; }
  .tll-ladillo::before, .tll-ficha__fecha { position: static; text-align: left; }
  .tll-fuera { margin-left: 0; }
  .tll-capitular::first-letter { background: none; color: #000000; }
  a { text-decoration: none; }
}