/* ============================================================
   Julio Torales · sitio personal

   La estructura es una barra lateral fija en azul petróleo y, a
   su derecha, una sucesión de pliegos numerados en dos columnas:
   el título de la sección queda anclado en la columna izquierda
   mientras su contenido pasa por la derecha.

   Esa barra es la que resuelve la proporción de color que pidió
   Julio (70 % claro, 20 % petróleo, 8 % teal, 2 % dorado): el
   petróleo está presente en toda la altura de cada página sin
   teñir el área de lectura, que se mantiene en blanco cálido.

   Tipografía: serif para todo lo que se lee (títulos, títulos de
   artículo, cifras) y sans solo para la navegación, los rótulos y
   los metadatos. Es al revés de lo habitual y es lo que le da el
   aire de revista académica en vez de sitio institucional.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  --deep:       #123B4A;
  --deep-2:     #0C2B36;
  --deep-3:     #1B4E60;
  --teal:       #247B7B;
  --teal-deep:  #1B5E5E;
  --teal-soft:  rgba(36, 123, 123, .10);
  --gold:       #C79A4B;
  --gold-2:     #E0BC7E;
  --gold-soft:  rgba(199, 154, 75, .18);

  --paper:      #FAFAF8;
  --paper-2:    #EEF3F1;
  --ink:        #202628;
  --ink-2:      #3A4448;
  --soft:       #667276;
  --rule:       #DCE3E1;
  --rule-soft:  #E9EEEC;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Charter, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rail: 260px;
  --pad: clamp(24px, 4.2vw, 76px);
  --col: 168px;            /* columna del título en cada pliego */

  --s1: 8px;  --s2: 14px; --s3: 22px; --s4: 34px;
  --s5: 52px; --s6: 80px; --s7: 118px;

  --focus: 0 0 0 3px rgba(36, 123, 123, .38);

  color-scheme: light;
}

/* El sitio se compromete con el fondo claro. La paleta está elegida para
   papel, y en modo oscuro el dorado sobre petróleo pierde el contraste que le
   da sentido. Se declara color-scheme para que el navegador dibuje también los
   controles y las barras de scroll en claro. */

/* ---------- 2. 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; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0; font-weight: 600; line-height: 1.16;
  letter-spacing: -.014em; text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--deep); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 0; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Rótulo pequeño en sans, el único lugar donde el sitio usa versalitas. */
.label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); margin: 0;
}
.label-teal { color: var(--teal); }
.label-soft { color: var(--soft); }

/* ---------- 3. Barra lateral ---------- */

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 50;
  background: var(--deep); color: #fff;
  display: flex; flex-direction: column;
  padding: var(--s5) var(--s4);
  overflow-y: auto;
}

.rail-brand { text-decoration: none; color: inherit; display: block; }
.rail-brand .n {
  display: block;
  font-family: var(--sans); font-size: 19px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.24; color: #fff;
}
.rail-brand .p {
  display: block; white-space: nowrap;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-top: 10px;
}
.rail-brand:hover .n { color: var(--gold-2); }

.rail-rule { height: 1px; background: var(--gold); margin: var(--s4) 0; width: 46px; }

.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-size: 14px;
  color: rgba(255, 255, 255, .76); text-decoration: none;
  padding: 7px 0;
}
.rail-nav a .i {
  font-family: var(--mono); font-size: 10.5px;
  color: rgba(255, 255, 255, .38); flex: none;
}
.rail-nav a:hover { color: #fff; }
.rail-nav a:hover .i { color: var(--gold); }
.rail-nav a[aria-current="true"] { color: var(--gold-2); }
.rail-nav a[aria-current="true"] .i { color: var(--gold); }

.rail-foot { margin-top: auto; padding-top: var(--s5); }
.rail-lang {
  display: flex; gap: 7px; align-items: center;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; color: rgba(255, 255, 255, .45);
  margin-bottom: var(--s3);
}
.rail-lang [aria-current="true"] { color: #fff; }
.rail-lang a { color: rgba(255, 255, 255, .45); text-decoration: none; }
.rail-lang a:hover { color: var(--gold-2); }

.rail-meta { display: flex; flex-direction: column; gap: 5px; }
.rail-meta a, .rail-meta span {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.45;
  color: rgba(255, 255, 255, .5); text-decoration: none;
}
.rail-meta a:hover { color: var(--gold-2); }

.rail-toggle { display: none; }

/* ---------- 4. Área de lectura ---------- */

.page { margin-left: var(--rail); }
.inner { max-width: 1080px; padding: 0 var(--pad); }

/* ---------- 5. Portada ---------- */

/* El retrato va contenido y del lado derecho, en una placa de poco más de
   trescientos píxeles. Probado a sangre y a media pantalla resultaba invasivo,
   y además obligaba a ampliar el archivo más allá de su resolución. Acá se
   muestra por debajo de su tamaño real, así que se ve nítido. */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 22vw, 272px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(48px, 6vw, 92px) var(--pad);
  max-width: 1240px;
}
.cover-img { position: relative; }
/* El archivo ya viene recortado a 4:5, así que no hace falta ni aspect-ratio ni
   object-fit. Declararlos junto con los atributos width y height del HTML hacía
   que el navegador resolviera mal la altura y la foto saliera enorme. */
.cover-img img { width: 100%; height: auto; background: var(--paper-2); }
/* Filete dorado al pie del retrato. */
.cover-img::after {
  content: ""; display: block; height: 3px; background: var(--gold);
}

.cover-text { min-width: 0; }
.cover-kicker { margin-bottom: var(--s4); max-width: 34ch; line-height: 1.9; }

/* El nombre en serif, no en sans mayúsculas. Es lo que hace que la portada se
   lea como la tapa de una revista y no como el encabezado de un currículum. */
.cover h1 {
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 600; line-height: 1; letter-spacing: -.028em;
  color: var(--deep);
}
.cover h1 .apellido { display: block; color: var(--teal-deep); }
.cover .post {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-top: var(--s3);
  white-space: nowrap;   /* que "PhD" no caiga solo a la línea siguiente */
}
.cover .rol {
  font-family: var(--sans); font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: .04em; color: var(--soft);
  margin-top: var(--s2);
}
.cover .bio {
  font-size: 17.5px; color: var(--ink-2);
  max-width: 52ch; margin-top: var(--s4);
}

/* Las cifras van en la portada, en una tira fina, en vez de ocupar una banda
   de color propia. */
.tally {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--rule);
}
.tally div { min-width: 0; }
.tally .n {
  font-size: 29px; font-weight: 600; line-height: 1; color: var(--deep);
}
.tally .n sup { font-size: .5em; color: var(--gold); top: -.65em; }
.tally .l {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--soft); margin-top: 7px;
}
.tally .gold .n { color: var(--gold); }

@media (max-width: 860px) {
  .cover { grid-template-columns: 1fr; gap: var(--s5); }
  .cover-img { max-width: 220px; order: -1; }
}

/* ---------- 6. Pliegos ---------- */

/* Cada sección es un pliego: a la izquierda el número y el título, que quedan
   anclados mientras el contenido de la derecha pasa de largo. */
.spread {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s7) var(--pad);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 0;
  max-width: 1240px;
}
.spread-head { position: sticky; top: var(--s5); align-self: start; }
.spread-head .i {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold);
  letter-spacing: .1em; display: block; margin-bottom: var(--s2);
}
.spread-head h2 {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--deep);
  line-height: 1.45;
}
.spread-body > .lead {
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.36; color: var(--deep);
  max-width: 30ch; margin-bottom: var(--s5); text-wrap: balance;
}
.spread-body > .intro {
  font-family: var(--sans); font-size: 15.5px; color: var(--soft);
  max-width: 62ch; margin-bottom: var(--s5);
}

@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s6) var(--pad); }
  .spread-head { position: static; }
}

/* ---------- 7. Líneas de investigación ---------- */

.lines-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.line-item { background: var(--paper); padding: var(--s4) var(--s3); }
.line-item .k { font-family: var(--mono); font-size: 11px; color: var(--teal); }
.line-item h3 { font-size: 20px; color: var(--deep); margin: var(--s2) 0 var(--s2); }
.line-item p { font-family: var(--sans); font-size: 14.5px; color: var(--soft); line-height: 1.55; }

/* ---------- 8. Trabajo destacado ---------- */

.featured { background: var(--paper-2); padding: var(--s4); border-left: 3px solid var(--gold); }
.featured a { text-decoration: none; color: inherit; display: block; }
.featured a:hover h3 { color: var(--teal-deep); }
.featured h3 { font-size: clamp(20px, 2.2vw, 25px); color: var(--deep); margin: var(--s2) 0; max-width: 42ch; }
.featured .au {
  font-family: var(--sans); font-size: 13px; color: var(--soft);
  margin-bottom: var(--s2); text-wrap: pretty;
}
.featured .au b { color: var(--ink-2); font-weight: 600; }
.featured .src { font-family: var(--sans); font-size: 14px; color: var(--soft); }
.featured .src b { color: var(--ink-2); font-weight: 600; }
.featured .doi {
  display: inline-block; margin-top: var(--s2);
  font-family: var(--mono); font-size: 11px; color: var(--teal);
}

/* ---------- 9. Referencias ---------- */

/* Las publicaciones, los libros y los capítulos se componen como la sección de
   referencias de un artículo: sangría francesa, el número en el margen, y la
   cita corrida en un solo párrafo. Es la forma en que un investigador ya lee
   una lista de trabajos, y evita la retícula de columnas que convierte
   cualquier listado en una tabla.

   Cada parte va en su propio renglón, en el orden en que uno las busca: quién
   firma, qué publicó, dónde salió. El número queda posicionado en el margen
   para que los tres renglones se alineen contra un mismo borde. */
.refs { border-top: 2px solid var(--deep); }
.refs > li {
  position: relative;
  padding: var(--s3) 0 var(--s3) 4.4em;
  border-bottom: 1px solid var(--rule-soft);
}

/* El número vive en el margen, fuera del flujo, para que las tres líneas de la
   cita queden alineadas contra un mismo borde izquierdo. */
.refs .i {
  position: absolute; left: 0; top: calc(var(--s3) + 4px);
  font-family: var(--mono); font-size: 11px; color: var(--gold);
}

/* Orden de lectura: quién, qué, dónde. Cada uno en su renglón. */
.refs .au {
  display: block;
  font-family: var(--sans); font-size: 13px; color: var(--soft);
  line-height: 1.5; text-wrap: pretty;
}
.refs .au b { color: var(--ink-2); font-weight: 600; }
.refs .ti {
  display: block; margin: 5px 0 6px;
  font-size: 17.5px; line-height: 1.34; color: var(--deep);
  text-decoration: none; text-wrap: pretty;
}
.refs a.ti:hover { color: var(--teal-deep); text-decoration: underline; }
.refs .src {
  display: block;
  font-family: var(--sans); font-size: 13px; color: var(--soft);
}
.refs .src i { color: var(--teal-deep); font-style: italic; }
.refs .doi {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 10.5px; color: var(--soft);
}
.refs mark { background: var(--gold-soft); color: inherit; }

.flag {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--deep); background: var(--gold-soft);
  border: 1px solid var(--gold); padding: 1px 6px;
}

/* La vista previa de la portada no lleva número ni sangría: son cinco y el
   número sobraría. */
/* La vista previa de la portada usa exactamente el mismo formato, sin el
   número, porque son cinco y numerarlos no aporta nada. */
.refs-recent { border-top: 1px solid var(--rule); margin-top: var(--s4); }
.refs-recent > li { padding-left: 0; }

@media (max-width: 620px) {
  .refs > li { padding-left: 0; padding-top: var(--s4); }
  .refs .i { top: var(--s3); }
}

/* ---------- 10. Controles ---------- */

.toolbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 250, 248, .93);
  backdrop-filter: saturate(1.6) blur(10px);
  padding: var(--s3) 0 var(--s2);
  margin-bottom: var(--s2);
}
.search { position: relative; max-width: 440px; }
.search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none;
  stroke: var(--soft); stroke-width: 1.7; stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%; font-family: var(--sans); font-size: 15px;
  padding: 11px 14px 11px 39px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
}
.search input::placeholder { color: var(--soft); }
.search input:focus { border-color: var(--teal); }

.filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s2); }
.chip {
  font-family: var(--mono); font-size: 11px;
  background: none; color: var(--soft);
  border: 1px solid var(--rule); padding: 5px 9px; cursor: pointer;
}
.chip:hover { border-color: var(--teal); color: var(--teal-deep); }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }

.result-count {
  font-family: var(--sans); font-size: 13px; color: var(--soft);
  padding: var(--s2) 0; letter-spacing: .02em;
}
.result-count b { color: var(--deep); font-weight: 600; }

.live-badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--sans); font-size: 12px; color: var(--soft);
  white-space: nowrap;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); flex: none; }
.live-badge[data-state="loading"] .live-dot { background: var(--gold); animation: pulse 1.1s infinite; }
.live-badge[data-state="ok"] .live-dot { background: var(--teal); }
.live-badge[data-state="offline"] .live-dot { background: #B8843C; }
@keyframes pulse { 50% { opacity: .25; } }

.empty { padding: var(--s5) 0; color: var(--soft); }

.more-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.btn {
  font-family: var(--sans); font-size: 14px; letter-spacing: .02em;
  background: var(--deep); color: #fff;
  border: 1px solid var(--deep); padding: 11px 22px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--deep-2); border-color: var(--deep-2); color: #fff; }
.btn-quiet { background: none; color: var(--deep); border-color: var(--rule); }
.btn-quiet:hover { background: none; border-color: var(--teal); color: var(--teal-deep); }

/* ---------- 11. Libros ---------- */

.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: var(--s5) var(--s4); }
/* Las tapas no comparten proporción: la mayoría son A4 (1:1.41), una es más
   alta y otra más baja. La caja usa la proporción del grupo y contiene la
   imagen en lugar de recortarla, porque recortar una tapa le come el título o
   el pie de imprenta. Lo que sobra queda en el gris del fondo. */
.book-cover {
  position: relative; aspect-ratio: 1 / 1.45;
  background: var(--paper-2);
  margin-bottom: var(--s3);
}
.book-cover img {
  width: 100%; height: 100%; object-fit: contain;
}
.book-cover .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: var(--s3);
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft);
}
.book .yr { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.book h3 { font-size: 18px; color: var(--deep); margin: 6px 0 var(--s1); }
.book .au, .book .meta {
  font-family: var(--sans); font-size: 12.5px; color: var(--soft);
}
.book .meta { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.book .sinopsis { font-size: 15px; color: var(--ink-2); margin-top: var(--s2); }

/* ---------- 12. Liderazgo, trayectoria ---------- */

.split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 4vw, 64px); align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.block { margin-top: var(--s5); }
.block:first-child { margin-top: 0; }
.block > .label { margin-bottom: var(--s3); }

.editorial { border-top: 1px solid var(--rule); }
.editorial li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.editorial .jn { font-size: 16.5px; color: var(--deep); min-width: 0; }
.editorial .ro {
  font-family: var(--sans); font-size: 11.5px; color: var(--teal-deep);
  text-align: right; white-space: nowrap; flex: none;
}
.editorial li.destacado .jn { font-weight: 600; }
.editorial li.destacado .ro { color: var(--gold); font-weight: 600; }
.editorial .nota { font-family: var(--sans); font-size: 12px; color: var(--soft); margin-top: 3px; }

/* Las revistas van como texto corrido, separadas por comas, con la cantidad de
   revisiones en volado. Encajonar sesenta nombres en píldoras convierte la
   sección en una nube de etiquetas, que es justo lo contrario de lo que se
   busca. */
.journals { font-size: 16.5px; line-height: 1.75; color: var(--deep); }
.journals span { white-space: nowrap; }
.journals sup {
  font-family: var(--mono); font-size: 9.5px; color: var(--teal);
  vertical-align: super; margin-left: 2px;
}
.journals .sep { color: var(--soft); }

/* Los idiomas sí son pocos, y van en línea con el nivel en volado. */
.inline-list { font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.inline-list span { white-space: nowrap; }
.inline-list em { color: var(--soft); font-style: normal; font-size: 12.5px; }

.note {
  font-family: var(--sans); font-size: 13.5px; color: var(--soft);
  margin-top: var(--s3); padding-left: var(--s3); border-left: 2px solid var(--gold);
}

.prose p + p { margin-top: var(--s3); }
.prose p { color: var(--ink-2); max-width: 62ch; }

/* Cargos y formación como un índice con línea de puntos: el puesto a la
   izquierda, los años a la derecha, y los puntos uniéndolos. Es la convención
   del índice de un libro, y deja los años alineados sin necesidad de una
   columna fija que obligue a cortar los títulos largos. */
.timeline { border-top: 2px solid var(--deep); }
.tl-item { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.tl-row { display: flex; align-items: baseline; gap: 10px; }
.tl-row h4 {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--deep); letter-spacing: -.01em; line-height: 1.3;
  flex: 0 1 auto;
}
.tl-dots {
  flex: 1 1 auto; min-width: 18px;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-4px);
}
.tl-row .yr {
  flex: none;
  font-family: var(--mono); font-size: 11.5px; color: var(--teal);
}
.tl-item .where, .tl-item .detail {
  font-family: var(--sans); font-size: 13.5px; color: var(--soft); margin-top: 5px;
}
.tl-item .detail { font-style: italic; }

@media (max-width: 560px) {
  .tl-row { flex-wrap: wrap; }
  .tl-dots { display: none; }
  .tl-row .yr { width: 100%; order: -1; margin-bottom: 3px; }
}

/* ---------- 13. Contacto y pie ---------- */

.contact-mail {
  font-size: clamp(22px, 2.8vw, 32px); color: var(--deep);
  text-decoration: none; border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.contact-mail:hover { color: var(--teal-deep); border-bottom-color: var(--teal); }
.contact-note {
  font-family: var(--sans); font-size: 14.5px; color: var(--soft);
  margin-top: var(--s3); max-width: 42ch;
}

/* Los perfiles como fichas en rejilla: el nombre del servicio arriba en
   versalitas y el identificador debajo. Puestos en filas con el valor alineado
   a la derecha se leían como una tabla de precios. */
.profile-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.profile-links a {
  display: block; background: var(--paper); padding: var(--s3);
  text-decoration: none; color: var(--deep);
}
.profile-links a:hover { background: var(--paper-2); }
.profile-links .k {
  display: block;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 7px;
}
.profile-links .v {
  display: block;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  word-break: break-all;
}
.profile-links a:hover .v { color: var(--teal-deep); }

.page-foot {
  padding: var(--s5) var(--pad);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
  font-family: var(--sans); font-size: 12.5px; color: var(--soft);
}
.page-foot a { color: var(--soft); text-decoration: none; margin-left: auto; }
.page-foot a:hover { color: var(--teal-deep); }

/* ---------- 14. Barra lateral en pantallas chicas ---------- */

@media (max-width: 1000px) {
  .rail {
    position: sticky; inset: 0 0 auto 0; width: auto; height: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: var(--s2) var(--pad); gap: var(--s3);
    overflow: visible;
  }
  .rail-brand .n { font-size: 14px; }
  .rail-brand .p { display: none; }
  .rail-rule { display: none; }
  .rail-nav {
    order: 4; width: 100%; display: none;
    padding-bottom: var(--s2); gap: 0;
  }
  .rail-nav[data-open="true"] { display: flex; }
  .rail-nav a {
    padding: 11px 0; font-size: 15.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .rail-foot { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: var(--s3); }
  .rail-lang { margin: 0; }
  .rail-meta { display: none; }
  .rail-toggle {
    display: block; order: 3;
    font-family: var(--sans); font-size: 11.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    background: none; border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; padding: 7px 12px; cursor: pointer;
  }
  .page { margin-left: 0; }
  .spread { scroll-margin-top: 62px; }
}

/* ---------- 15. Aparición al desplazar ---------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 16. Impresión ---------- */

@media print {
  .rail, .toolbar, .more-row, .live-badge, .page-foot { display: none; }
  .page { margin-left: 0; }
  body { font-size: 11pt; background: #fff; }
  .cover { display: block; min-height: 0; }
  .cover-img { display: none; }
  .spread { display: block; padding: 12pt 0; }
  a { color: var(--ink); text-decoration: none; }
}