/* ------------------------------------------------------------------ *
 * mtnzarriba.com
 *
 * Un libro de memorias familiar, no una web corporativa: una columna,
 * márgenes anchos, papel cálido y fotos sepia dentro del texto.
 * ------------------------------------------------------------------ */

/* Source Serif 4 (SIL OFL 1.1), subconjunto latino, variable en peso.
   Autoalojada a propósito: sin Google Fonts, sin RGPD y sin depender de que
   un CDN siga en pie dentro de quince años. Dos ficheros, 71 KB en total. */
@font-face {
  font-family: 'Source Serif';
  src: url('/fonts/source-serif-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif';
  src: url('/fonts/source-serif-var-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papel: #FBF8F3;
  --papel-hondo: #F3EDE3;
  --tinta: #2A2622;
  --tinta-suave: #6A6157;
  --acento: #8A5A3B;
  --acento-claro: #A87551;
  --linea: #E2D9CB;

  --serif: 'Source Serif', Georgia, 'Times New Roman', serif;
  --radio: 3px;

  /* Margen lateral. Crece con la pantalla —en un monitor grande, el texto
     pegado al borde se lee peor que con aire— pero se queda en 1.4rem en el
     móvil, donde no sobra ni un píxel. */
  --margen: clamp(1.4rem, 4vw, 5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #171513;
    --papel-hondo: #211E1A;
    --tinta: #E8E1D6;
    --tinta-suave: #A79C8C;
    --acento: #D19B72;
    --acento-claro: #E0B48F;
    --linea: #38322B;
  }
  /* Las fotos escaneadas de 2006 deslumbran sobre fondo oscuro. */
  img { filter: brightness(0.92); }
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.19rem;
  line-height: 1.65;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Los dos contenedores usan ya todo el ancho de la pantalla, con su margen.
   El tope de 34rem que había aquí era el que hacía que el sitio pareciera una
   web de móvil estirada en un monitor. */
.envoltorio,
.envoltorio-ancho { margin-inline: auto; padding-inline: var(--margen); }
main { padding-block: 2.5rem 4rem; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: var(--radio); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: var(--papel);
  padding: 0.6rem 1rem; z-index: 10; border-radius: 0 0 var(--radio) 0;
}
.saltar:focus { left: 0; top: 0; }

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

/* --- Cabecera ------------------------------------------------------ */

.cabecera {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  padding-block: 1rem;
}
.cabecera .envoltorio {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  align-items: baseline; justify-content: space-between;
}
.marca { text-decoration: none; color: inherit; line-height: 1.2; }
.marca-nombre { display: block; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; }
.marca-firma {
  display: block; font-size: 0.76rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tinta-suave);
}

.nav-lista { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; }
.nav-lista a {
  text-decoration: none; color: var(--tinta-suave);
  font-size: 0.95rem; padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
}
.nav-lista a:hover { color: var(--acento); }
.nav-lista a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }

.nav-menu {
  display: none;
  font: inherit; font-size: 0.95rem;
  background: none; border: 1px solid var(--linea); color: var(--tinta);
  padding: 0.3rem 0.8rem; border-radius: var(--radio); cursor: pointer;
}

@media (max-width: 46rem) {
  .cabecera .envoltorio { align-items: center; }
  .nav-menu { display: block; }
  .nav-lista { display: none; width: 100%; flex-direction: column; gap: 0; padding-top: 0.6rem; }
  .nav-lista.abierto { display: flex; }
  .nav-lista a { padding-block: 0.5rem; border-bottom: 1px solid var(--linea); }
  nav { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
}

/* --- Titulares ----------------------------------------------------- */

h1, h2, h3 { font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.7rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin: 2.8rem 0 0.9rem; }
h3 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }

.titular { margin-bottom: 2.2rem; }
.migas { font-size: 0.9rem; color: var(--tinta-suave); margin: 0 0 0.7rem; }
.migas a { color: var(--tinta-suave); }
.titular .migas { margin: 0.9rem 0 0; }
.firma { color: var(--tinta-suave); font-style: italic; margin: 0; }
.entradilla { font-size: 1.1rem; color: var(--tinta-suave); margin-top: -1rem; margin-bottom: 2.4rem; }
.apunte { font-size: 0.92rem; color: var(--tinta-suave); }

/* --- Prosa --------------------------------------------------------- */

.prosa p { margin: 0 0 1.35rem; }
.prosa p:first-of-type::first-letter { /* sin capitulares: distraen en textos cortos */ }

blockquote.verso {
  margin: 2rem 0 2rem 1.5rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--linea);
  font-style: italic;
  color: var(--tinta);
  line-height: 1.9;
}

figure { margin: 2.6rem 0; }
figure img { border-radius: var(--radio); margin-inline: auto; }
figcaption {
  margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.5;
  color: var(--tinta-suave); text-align: center;
}
figure.grupo {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
figure.grupo figcaption { grid-column: 1 / -1; }

/* --- Inicio -------------------------------------------------------- */

.inicio main { padding-top: 0; }

.memorial {
  background: var(--papel-hondo);
  border-bottom: 1px solid var(--linea);
  padding-block: 3.5rem;
  margin-bottom: 3rem;
}
.memorial-caja {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;
}
/* min-width:0 para que el bloque de texto pueda encoger por debajo de su base
   de 18rem. Sin él, en un móvil de 390px el texto no cabe junto al retrato,
   no cede, y el nombre se sale de la pantalla. */
.memorial-caja > div { flex: 1 1 18rem; min-width: 0; }
.memorial h1 { margin-bottom: 0.3rem; }
/* img.retrato, no ".retrato img": la clase la lleva el propio <img> (build.mjs
   se la pasa a img() en cls). Con el selector de descendiente esta regla no
   casaba con nada y el retrato de la portada salía a su tamaño real —400 px,
   más ancho que un móvil— en cuanto se le quitó el tope al contenedor. */
img.retrato, .memorial picture img {
  width: 11rem; max-width: 100%; border-radius: 50%;
  filter: sepia(0.28) contrast(1.02);
  border: 3px solid var(--papel);
  box-shadow: 0 2px 14px rgb(42 38 34 / 0.16);
}
.fechas { color: var(--tinta-suave); font-style: italic; margin: 0 0 1rem; }
.lema { margin: 0; max-width: 30rem; }

.nota-luto {
  margin: 0 0 3rem;
  padding: 1.8rem 1.9rem;
  background: var(--papel-hondo);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.nota-luto p { margin: 0 0 1rem; }
.nota-luto p:last-child { margin-bottom: 0; }
.nota-luto footer {
  margin-top: 1.2rem; font-size: 0.92rem;
  color: var(--tinta-suave); font-style: italic;
}

.ideario p { margin: 0 0 1.2rem; }

.tarjetas {
  display: grid; gap: 1rem; margin: 3.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.tarjeta {
  display: block; text-decoration: none; color: inherit;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  transition: border-color 0.15s, background 0.15s;
}
.tarjeta:hover { border-color: var(--acento); background: var(--papel-hondo); }
.tarjeta h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--acento); }
.tarjeta p { margin: 0; font-size: 0.93rem; color: var(--tinta-suave); line-height: 1.5; }

.cronologia { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.cronologia li {
  display: grid; gap: 0.2rem 1.4rem;
  grid-template-columns: 6.5rem 1fr;
  padding-block: 1rem;
  border-top: 1px solid var(--linea);
}
.cronologia time {
  font-size: 0.88rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; padding-top: 0.22rem;
}
.cronologia p { margin: 0; }
@media (max-width: 34rem) {
  .cronologia li { grid-template-columns: 1fr; }
}

/* --- Índices ------------------------------------------------------- */

.lista-personas, .lista-relatos { list-style: none; padding: 0; margin: 0; }
.lista-personas li, .lista-relatos li {
  padding-block: 0.75rem; border-top: 1px solid var(--linea);
}
.lista-relatos a { display: inline-block; }
.lista-relatos .autor {
  display: block; font-size: 0.88rem; color: var(--tinta-suave); font-style: italic;
}
.lista-arboles {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; gap: 0.15rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  font-size: 0.95rem;
}
.lista-arboles li { padding-block: 0.28rem; }

/* --- Cuadros y álbum ----------------------------------------------- */

/* Estas listas llevan también .envoltorio-ancho, así que el margen lateral lo
   pone esa clase; aquí solo hay que anular la sangría propia del <ul>. Poner
   padding:0 a secas se cargaba el margen y las fotos de los extremos quedaban
   pegadas al borde de la ventana. */
.rejilla, .album {
  list-style: none; margin: 2.5rem auto 0;
  padding-block: 0; padding-inline: var(--margen);
}
.rejilla {
  display: grid; gap: 1.8rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}
.rejilla a { text-decoration: none; color: inherit; display: block; }
.rejilla img {
  border-radius: var(--radio);
  box-shadow: 0 1px 8px rgb(42 38 34 / 0.13);
  transition: transform 0.18s;
}
.rejilla a:hover img { transform: translateY(-3px); }
.pie-obra {
  display: block; margin-top: 0.6rem;
  font-size: 0.92rem; line-height: 1.35; color: var(--tinta-suave);
}
.rejilla a:hover .pie-obra { color: var(--acento); }

.album {
  display: grid; gap: 2.4rem 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.album figure { margin: 0; }
.album figcaption { text-align: left; }
.album figcaption strong { display: block; color: var(--tinta); font-weight: 600; }
.album figcaption span { display: block; margin-top: 0.2rem; }

.obra { text-align: center; }
.obra h1 { margin-bottom: 1.5rem; }
.obra .migas { text-align: left; }
.obra picture img { margin-inline: auto; border-radius: var(--radio); box-shadow: 0 2px 18px rgb(42 38 34 / 0.16); }
.comentario {
  margin: 1.8rem auto 0; max-width: 30rem;
  font-style: italic; font-size: 1.08rem;
}
.paso {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-top: 3.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
  font-size: 0.92rem; text-align: left;
}
.paso .siguiente { text-align: right; }

/* --- Árbol genealógico ---------------------------------------------- */

/* Los seis troncos: la entrada al árbol. Misma caja que .tarjeta, con
   sitio para la pareja y el recuento. */
.rejilla-troncos {
  display: grid; gap: 1rem; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.tronco {
  display: block; text-decoration: none; color: inherit;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  transition: border-color 0.15s, background 0.15s;
}
.tronco:hover { border-color: var(--acento); background: var(--papel-hondo); }
.tronco h3 { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--acento); }
.tronco-alias { font-weight: 400; font-size: 0.88rem; color: var(--tinta-suave); }
.tronco-pareja { margin: 0 0 0.5rem; font-size: 0.95rem; }
.tronco-texto { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); line-height: 1.5; }
.tronco-cuenta {
  margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.descarga-arbol {
  margin: 2.8rem 0 0; padding: 1.4rem 1.5rem;
  background: var(--papel-hondo);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.descarga-arbol h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.descarga-arbol p { margin: 0; font-size: 0.95rem; }

/* Índice alfabético. Es la navegación de verdad: quien llega busca un nombre. */
.indice-arbol .letra h3 {
  margin: 2rem 0 0.2rem; font-size: 1rem; color: var(--acento);
  border-bottom: 1px solid var(--linea); padding-bottom: 0.3rem;
}
.indice-arbol .lista-arboles { margin-top: 0.6rem; }
.anios {
  font-size: 0.82rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.buscador { margin: 1.6rem 0 0; }
.buscador label { display: block; font-size: 0.9rem; color: var(--tinta-suave); }
.buscador input {
  font: inherit; font-size: 1rem;
  width: 100%; max-width: 24rem; margin-top: 0.35rem;
  padding: 0.5rem 0.7rem;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
.buscador input:focus-visible { border-color: var(--acento); }
.buscador-cuenta {
  margin: 0.4rem 0 0; min-height: 1.4rem;
  font-size: 0.88rem; color: var(--tinta-suave); font-style: italic;
}

/* Ficha de una persona. */
.apodo { margin: 0 0 0.3rem; font-style: italic; color: var(--tinta-suave); }
.linaje {
  margin: 0 0 2rem; padding: 0.9rem 1.1rem;
  background: var(--papel-hondo); border-radius: var(--radio);
  font-size: 0.92rem; line-height: 1.7; color: var(--tinta-suave);
}
.linaje strong { color: var(--tinta); font-weight: 600; }

.parentela h2 { font-size: 1.15rem; margin: 2.2rem 0 0.5rem; }
/* En columnas: son nombres cortos, no prosa. A todo el ancho de un monitor cada
   hermano se llevaba una fila entera con un filete de 1400 px debajo, que es
   justo el aire vacío que hacía parecer esto una web de móvil estirada. El ancho
   de columna manda sobre el número, así que en el móvil sale una sola. */
.lista-parentela {
  list-style: none; padding: 0; margin: 0;
  columns: 22rem; column-gap: 2.5rem;
}
/* break-inside para que una fila no se parta entre el pie de una columna y la
   cabeza de la siguiente, que deja el nombre arriba y su filete abajo. */
.lista-parentela li {
  padding-block: 0.4rem; border-top: 1px solid var(--linea);
  break-inside: avoid;
}
.parentela .apunte { margin: 0.8rem 0 0; font-style: italic; }

.procedencia { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.procedencia .apunte { margin: 0; }

/* El diagrama. Decorativo pero útil: lo mismo está en el texto de debajo.
   Quien tuvo once hijos —los hay— da un diagrama de casi 2000 px: metido a la
   fuerza en un móvil, los nombres quedan en dos píxeles y no se lee ninguno.
   Así que se le pone un ancho mínimo y, si no cabe, se arrastra de lado. */
/* El ancho concreto lo pone build.mjs en el atributo width, en rem: solo allí
   se sabe cuánto mide cada diagrama. Encogerlo hasta que quepa NO vale en
   general: el de once hijos mide 1992 unidades, y metido en los 345 px de un
   móvil sale a escala 0.17 —los nombres quedan en un cuerpo de 2 px, ilegibles—.
   Por eso el que no cabe se arrastra de lado.

   Pero con el sitio a todo el ancho hay un hueco de ~1390 px, y ahí ese mismo
   diagrama sí entra bien: encogerlo lo deja al 70%, que se lee de sobra, y
   evita un arrastre lateral que no tiene ningún indicio visible —sobresalía por
   la derecha y el primer hijo parecía, sin más, cortado por la izquierda—.
   Así que encoge, pero con suelo, y el suelo es `max(62rem, 100%)`: nunca baja
   de 62rem —por debajo el cuerpo del texto no llega a 9 px— pero tampoco estira
   al que ya era pequeño, porque el atributo width del SVG sigue mandando como
   tope. El de once hijos entra entero en un monitor y se arrastra en el móvil;
   el de cuatro se queda en su tamaño en los dos.
   Ojo con min-width a secas: infla los diagramas pequeños hasta el suelo (el de
   Emiliano pasaba de 42.8rem a 62rem, con los nombres a 18 px y arrastre lateral
   en el móvil sin ninguna necesidad). height:auto conserva la proporción. */
.diagrama { margin: 0 0 2.4rem; overflow-x: auto; }
.diagrama svg {
  display: block; overflow: visible;
  max-width: max(62rem, 100%); height: auto;
}
.diagrama .caja { fill: var(--papel-hondo); stroke: var(--linea); stroke-width: 1; }
.diagrama .caja-yo { fill: var(--papel); stroke: var(--acento); stroke-width: 2; }
/* Cada caja que no eres tú es un enlace a esa persona. El nombre va en el color
   de los enlaces del sitio para que se vea que se puede pulsar, pero sin subrayar:
   en una caja de 184px el subrayado se come el poco aire que hay, y el recuadro
   ya delimita la zona sensible. Al pasar por encima se aclara la caja entera, que
   es la pista de que lo pulsable es todo el globo y no solo las letras. */
.diagrama .caja-enlace { cursor: pointer; }
.diagrama .caja-enlace .caja-nombre { fill: var(--acento); }
.diagrama .caja-enlace:hover .caja { fill: var(--papel); stroke: var(--acento); }
.diagrama .caja-enlace:hover .caja-nombre { fill: var(--tinta); }
/* El foco del teclado se pinta sobre el <rect>, no sobre el <a>: en SVG el
   contorno del enlace envuelve la caja de texto, y salía un cerco descuadrado. */
.diagrama .caja-enlace:focus { outline: none; }
.diagrama .caja-enlace:focus-visible .caja { stroke: var(--acento); stroke-width: 3; }

.diagrama .rama { fill: none; stroke: var(--linea); stroke-width: 1.5; }
/* La doble raya de la unión consanguínea. Va un poco más marcada que el resto
   de trazos porque es la única línea del diagrama que dice algo que no está
   escrito en ningún otro sitio de la página. */
.diagrama .rama-consanguinea { stroke: var(--tinta-suave); }
/* La barra del fallecido. Fina y en gris: tiene que leerse como una marca
   sobre el símbolo, no como un tachón sobre el nombre. */
.diagrama .caja-finado { stroke: var(--tinta-suave); stroke-width: 1.25; fill: none; }
.diagrama text { text-anchor: middle; fill: var(--tinta); font-family: var(--serif); }
.diagrama .caja-nombre { font-size: 13px; }
.diagrama .caja-anios { font-size: 11px; fill: var(--tinta-suave); }

/* La leyenda del diagrama: qué quiere decir cada forma. Va debajo, pequeña y
   en una línea, porque la simbología se entiende sola en cuanto se sabe —y
   quien no la sepa no debería tener que buscarla fuera del sitio. */
.diagrama-leyenda {
  margin: -1.8rem 0 2.4rem; font-size: 0.82rem; color: var(--tinta-suave);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center;
}
.diagrama-leyenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.diagrama-leyenda svg { flex: none; }
.diagrama-leyenda .caja { fill: var(--papel-hondo); stroke: var(--linea); stroke-width: 1; }
.diagrama-leyenda .caja-finado { stroke: var(--tinta-suave); stroke-width: 1.25; fill: none; }
.diagrama-leyenda .rama { fill: none; stroke: var(--tinta-suave); stroke-width: 1.5; }

/* --- Libro de visitas ---------------------------------------------- */

.libro { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.libro li { padding-block: 1.8rem; border-top: 1px solid var(--linea); }
.libro blockquote { margin: 0; font-style: italic; }
.libro blockquote p { margin: 0 0 0.8rem; }
.libro footer { margin-top: 0.8rem; font-size: 0.9rem; color: var(--tinta-suave); }

/* --- Pie ----------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--linea);
  background: var(--papel-hondo);
  padding-block: 2.5rem;
  font-size: 0.92rem; color: var(--tinta-suave);
}
.pie p { margin: 0 0 0.6rem; }
.pie-enlaces { margin-bottom: 0; }

/* --- Impresión ------------------------------------------------------ */

@media print {
  /* El diagrama y el buscador no se imprimen: uno se sale del papel y el otro
     no hace nada sin ratón. Lo que dicen está en el texto de la misma página. */
  .cabecera, .pie, .paso, .saltar, .tarjetas, .diagrama, .buscador { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  figure { break-inside: avoid; }
}