/* ============================================================
   PRAXITAL · EL CUADERNO — hoja impresa / PDF
   ------------------------------------------------------------
   Se carga con  <link rel="stylesheet" href="assets/print.css"
   media="print">, así que NADA de aquí afecta a la pantalla: el
   navegador solo aplica esta hoja al imprimir o al "Guardar como PDF".

   Qué hace: convierte el artículo en un documento de una columna,
   sobre papel blanco, con cabecera de marca, tipografía en puntos y
   cortes de página cuidados. Se va todo lo que no es el texto:
   navegación, compartir, suscripción, comentarios, pie del sitio.

   Honestidad sobre el alcance: el PDF lo genera el navegador, no el
   servidor. La numeración de páginas la pone el propio navegador en
   su cabecera/pie (Chrome no admite contadores en @page), y las
   tramas de color solo se imprimen si el visitante deja activada la
   opción "Gráficos de fondo". Por eso aquí los acentos son líneas y
   texto, no rellenos: el documento se ve igual de bien sin ellos.
   ============================================================ */

@page {
  size: A4;
  margin: 22mm 26mm;      /* deja una columna de ~158 mm: unos 85 caracteres */
}

/* ---- 1. Paleta: siempre tinta sobre papel, venga del tema que venga ----
   Van con !important porque theme-light.css declara estas mismas
   variables en html[data-theme="light"], que es más específico. La
   importancia gana a la especificidad; la especificidad sola, no. */
html,
html[data-theme="light"],
html[data-theme="dark"] {
  --ink: #FFFFFF !important;
  --ink-2: #FFFFFF !important;
  --ink-3: #FFFFFF !important;
  --paper: #101414 !important;         /* tinta principal */
  --paper-dim: #55635F !important;     /* secundaria */
  --line: rgba(16,20,20,.20) !important;
  --line-soft: rgba(16,20,20,.10) !important;
  --line-cyan: rgba(30,140,138,.55) !important;
  --line-must: rgba(180,125,25,.55) !important;
  --cyan: #1A7E7C !important;          /* cian de marca, oscurecido para papel */
  --mustard: #A5761F !important;       /* mostaza de marca, oscurecida */
}

html { scroll-behavior: auto !important; }

body {
  background: #FFFFFF !important;
  color: var(--paper) !important;
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 10.5pt !important;
  line-height: 1.62 !important;
  -webkit-font-smoothing: auto;
}
/* las dos capas de textura y degradado del sitio: fuera */
body::before, body::after { display: none !important; }

.wrap {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- 2. Lo que no viaja al papel ---- */
nav,
.progress,
.nav-toggle,
.lang,
.tema-btn,
.art-mark,                 /* la marca ya va en la cabecera de la hoja */
.art-byline .share,
.btn-pdf,
.share-wide,
.inline-sub,
.interact,
.comments,
.prompt,
.more,
.sec-gap,
.divisor,
footer,
.nl-scroll,
[data-share] {
  display: none !important;
}

/* ---- 3. Cabecera y colofón: solo existen sobre papel ----
   En el HTML llevan el atributo `hidden`, así que la pantalla nunca los
   muestra aunque esta hoja no llegue a cargar. Aquí se revierte. */
.solo-impresion[hidden] { display: block !important; }

/* Ojo con el selector: `.solo-impresion[hidden]` de arriba también lleva
   !important y es más específico, así que para que la cabecera sea una
   fila hay que igualar esa especificidad. Con `.hoja-cabeza` a secas
   ganaba el display:block y el nombre del sitio caía bajo el logo. */
.hoja-cabeza[hidden] {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12mm;
  padding-bottom: 4mm;
  margin-bottom: 9mm;
  border-bottom: .5pt solid var(--line);
}
.hoja-cabeza img {
  width: 46mm;
  height: auto;
  display: block;
}
.hoja-cabeza .hoja-sitio {
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5pt;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  padding-bottom: 1mm;
}

.hoja-pie {
  margin-top: 12mm;
  padding-top: 4mm;
  border-top: .5pt solid var(--line);
  break-inside: avoid;
  page-break-inside: avoid;
}
.hoja-pie b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 10pt;
  display: block;
  margin-bottom: 1.5mm;
}
.hoja-pie .hoja-url {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5pt;
  color: var(--cyan);
  word-break: break-all;
  margin-bottom: 3mm;
}
.hoja-pie p {
  font-size: 8pt !important;
  line-height: 1.5 !important;
  color: var(--paper-dim) !important;
  margin: 0 0 1mm !important;
}

/* ---- 4. Cabecera del artículo ---- */
.art-hero { padding: 0 !important; }
.crumb { display: none !important; }

.art-cat {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 7.5pt !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
  margin-bottom: 4mm !important;
}
.art-cat .dot { display: none !important; }

.art-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 25pt !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
  margin: 0 0 5mm !important;
  break-after: avoid;
  page-break-after: avoid;
}
.art-sub {
  font-size: 12pt !important;
  line-height: 1.5 !important;
  color: var(--paper-dim) !important;
  margin: 0 0 6mm !important;
  break-after: avoid;
  page-break-after: avoid;
}

/* La firma se queda, pero sin el retrato ni los botones: en papel el
   dato útil es quién escribe, cuándo y cuánto se tarda en leerlo. */
.art-byline {
  display: block !important;
  padding: 3mm 0 !important;
  border-top: .5pt solid var(--line) !important;
  border-bottom: .5pt solid var(--line) !important;
  margin-bottom: 8mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.art-byline .av { display: none !important; }
.art-byline .who b {
  font-size: 10pt !important;
  font-weight: 600 !important;
}
.art-byline .who span {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 7.5pt !important;
  color: var(--paper-dim) !important;
  margin-top: .8mm !important;
}

/* ---- 5. Portada ---- */
.art-figure { margin: 0 0 8mm !important; break-inside: avoid; page-break-inside: avoid; }
/* En pantalla el marco es una caja fija de 16:9 con fondo oscuro. En papel
   eso dejaba una banda muerta bajo la foto, porque la portada es 1200×630
   (más apaisada que 16:9). Aquí el marco se ajusta a la imagen. */
.art-figure .frame {
  border: .5pt solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  overflow: hidden;
}
.art-figure img {
  width: 100% !important;
  height: auto !important;
  max-height: 95mm !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}
.art-figure .ph { display: none !important; }
figcaption {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 7.5pt !important;
  color: var(--paper-dim) !important;
  margin-top: 2mm !important;
  text-align: left !important;
}

/* ---- 5b. Vídeo incrustado ----
   En papel un vídeo no se pulsa. Se queda el fotograma como ilustración,
   se van el velo y el botón de play (que en un documento impreso serían
   una mentira), y sale la dirección para poder teclearla. */
.art-video { margin: 8mm 0 !important; break-inside: avoid; page-break-inside: avoid; }
.art-video .marco {
  aspect-ratio: auto !important;
  border: .5pt solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}
.art-video .velo,
.art-video .play { display: none !important; }
.art-video img { height: auto !important; max-height: 72mm !important; }
.art-video .pie {
  /* La familia va explícita porque este pie ES un <figcaption>, y la regla
     general de figcaption de más arriba lo pondría en monoespaciada: bien
     para un pie de foto de una línea, ilegible para tres. */
  font-family: "Hanken Grotesk", system-ui, sans-serif !important;
  font-size: 8.5pt !important;
  line-height: 1.5 !important;
  color: var(--paper-dim) !important;
  margin-top: 2mm !important;
  text-align: left !important;
}
.art-video .kick {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 7pt !important;
  color: var(--cyan) !important;
}
.enlace-video[hidden] {
  display: block !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5pt;
  color: var(--cyan);
  margin-top: 1.5mm;
}

/* ---- 6. Cuerpo ---- */
.art-content { padding: 0 !important; }
.art-content p,
.art-content li {
  font-size: 10.5pt !important;
  line-height: 1.62 !important;
  color: var(--paper) !important;
  orphans: 3;
  widows: 3;
}
.art-content p { margin: 0 0 3.6mm !important; }
.art-content h2,
.art-content h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--paper) !important;
  break-after: avoid;
  page-break-after: avoid;
  break-inside: avoid;
}
.art-content h2 { font-size: 14.5pt !important; margin: 8mm 0 3mm !important; }
.art-content h3 { font-size: 12pt !important; margin: 6mm 0 2.5mm !important; }
.art-content ul,
.art-content ol { margin: 0 0 4mm 6mm !important; }
.art-content li { margin-bottom: 1.5mm !important; }
.art-content strong { font-weight: 600 !important; }

.art-content blockquote {
  font-family: "Fraunces", Georgia, serif !important;
  font-style: italic !important;
  font-size: 12.5pt !important;
  line-height: 1.45 !important;
  color: var(--paper) !important;
  border-left: 1.5pt solid var(--cyan) !important;
  padding: 1mm 0 1mm 5mm !important;
  margin: 6mm 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* El destacado pierde el relleno de color (que muchos navegadores no
   imprimen) y se queda con una regla lateral, que sí sale siempre. */
.art-content .pull {
  background: none !important;
  border: 0 !important;
  border-left: 1.5pt solid var(--cyan) !important;
  border-radius: 0 !important;
  padding: 0 0 0 5mm !important;
  margin: 6mm 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.art-content .pull .lbl {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 7pt !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
  margin-bottom: 1.5mm !important;
}

/* Los enlaces del cuerpo llevan su destino detrás: en papel, un enlace
   sin URL es una palabra subrayada que no lleva a ninguna parte. Solo
   los absolutos — los internos no dicen nada fuera del sitio. */
.art-content a.inline {
  color: var(--paper) !important;
  border-bottom: .5pt solid var(--line-cyan) !important;
  text-decoration: none !important;
}
.art-content a.inline[href^="http"]::after {
  content: " (" attr(href) ")";
  font-family: "JetBrains Mono", monospace;
  font-size: 7.5pt;
  color: var(--paper-dim);
  word-break: break-all;
}

/* ---- 7. Para llevarte ---- */
.takeaway {
  background: none !important;
  border: 0 !important;
  border-top: .5pt solid var(--line) !important;
  border-left: 1.5pt solid var(--mustard) !important;
  border-radius: 0 !important;
  padding: 4mm 0 0 5mm !important;
  margin: 8mm 0 0 !important;
  max-width: none !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.takeaway .lbl {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 7pt !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--mustard) !important;
  margin-bottom: 2mm !important;
}
.takeaway .lbl .bar { display: none !important; }
.takeaway h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 12pt !important;
  margin-bottom: 3mm !important;
}
.takeaway li {
  font-size: 10pt !important;
  line-height: 1.55 !important;
  color: var(--paper) !important;
  padding-left: 5mm !important;
  margin-bottom: 2mm !important;
}
.takeaway li::before { color: var(--mustard) !important; }

/* ---- 8. Detalles finales ---- */
/* Nada de animaciones ni de elementos pegados al viewport en papel. */
*, *::before, *::after {
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
[style*="position:fixed"], .bgmedia { display: none !important; }