/* fuentes: inicio — lo escribe scripts/fuentes.py */
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/assets/fuentes/bodoni-moda-400-500-italica-latin.f5aa26e5.woff2') format('woff2'); 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: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fuentes/bodoni-moda-400-600-latin.8d8cd4aa.woff2') format('woff2'); 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: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fuentes/instrument-sans-400-600-latin.adbdfd9a.woff2') format('woff2'); 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: 'Bodoni Moda Respaldo'; src: local('Georgia'); size-adjust: 98.1%; ascent-override: 114.7%; descent-override: 40.8%; line-gap-override: 0.0%; }
@font-face { font-family: 'Instrument Sans Respaldo'; src: local('Arial'); size-adjust: 100.6%; ascent-override: 96.4%; descent-override: 24.9%; line-gap-override: 0.0%; }
/* fuentes: fin */

/* sitio.css — Academia Costarricense de Ciencias Genealógicas.
   Contrato (fase 1, .webs/estado.md): imprenta de libro de arte — Bodoni en caja baja, papel,
   tinta, oro heráldico solo en filetes, radio 0, sin sombras. Gesto firma: la línea genealógica,
   un filete dorado que baja y se ramifica con nodos en los años. */

:root {
  --alto-cabecera: 4.5rem;

  /* Color — con su rol. El oro claro nunca va como texto sobre papel (2,6:1). */
  --papel: #ffffff;          /* fondo dominante */
  --papel-2: #f4f4f1;        /* secciones alternas: gris papel, neutro (no crema) */
  --tinta: #14110d;          /* texto, bandas oscuras, botón principal */
  --tinta-2: #1f1b16;        /* superficie sobre la banda de tinta */
  --piedra: #5e5a52;         /* texto secundario sobre papel (6,9:1) */
  --piedra-clara: #b9b3a7;   /* texto secundario sobre tinta */
  --oro: #bc9c5c;            /* SOLO filetes, nodos y bordes */
  --oro-claro: #d4b97e;      /* años y enlaces sobre tinta (9,9:1) */
  --oro-tinta: #7d5f27;      /* enlaces y años sobre papel (5,9:1) */
  --filete: #dcd8cf;         /* divisores neutros sobre papel */
  --filete-oscuro: #3a342b;  /* divisores sobre tinta */
  --papel-suave: #e4dfd5;    /* texto de lectura sobre tinta y sobre foto (13:1) */
  --marcador: #767167;       /* placeholder de formularios (4,6:1) */

  /* Tipo */
  --f-display: 'Bodoni Moda', 'Bodoni Moda Respaldo', Georgia, serif;
  --f-texto: 'Instrument Sans', 'Instrument Sans Respaldo', Arial, sans-serif;
  --t-mini: .8125rem;
  --t-chico: .9375rem;
  --t-texto: 1.0625rem;
  --t-entrada: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
  --t-h3: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --t-h2: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  --t-ano: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Espacio */
  --margen: clamp(1rem, .5rem + 3vw, 3rem);
  --ancho: 78rem;
  --seccion: clamp(5rem, 3.5rem + 6vw, 9rem);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

html { background: var(--papel); }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
  font-optical-sizing: auto;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--oro-tinta); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* Rótulo: la línea de metadatos, como el colofón de un libro. */
.rotulo {
  font-family: var(--f-texto);
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--piedra);
  margin: 0 0 1.25rem;
}
/* Años y cifras: Bodoni itálica. Es su único uso (contrato: no es "una palabra en color"). */
.ano { font-family: var(--f-display); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* ── Botones: fantasma con borde; el principal en tinta. Radio 0. ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .875rem 1.5rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: 500 var(--t-chico)/1.2 var(--f-texto);
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 0;
  transition: background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva);
}
.boton:hover { text-decoration: none; background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton--principal { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton--principal:hover { background: transparent; color: var(--tinta); }
.sobre-tinta .boton { color: var(--papel); }
.sobre-tinta .boton:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.sobre-tinta .boton--principal { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.sobre-tinta .boton--principal:hover { background: transparent; color: var(--papel); }
.flecha {
  display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
  background: currentColor; -webkit-mask: url("/assets/img/flecha.svg") center / contain no-repeat; mask: url("/assets/img/flecha.svg") center / contain no-repeat;
  transition: translate .25s var(--curva);
}
.flecha--externa { -webkit-mask-image: url("/assets/img/flecha-externa.svg"); mask-image: url("/assets/img/flecha-externa.svg"); }
.flecha--atras { rotate: 180deg; margin-right: .5rem; }
a:hover .flecha--atras { translate: -.25rem 0; }
a:hover .flecha, .boton:hover .flecha { translate: .25rem 0; }

.enlace-filete {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  color: inherit; text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--oro);
}
.enlace-filete:hover { border-bottom-width: 2px; }
.sobre-tinta .enlace-filete { color: var(--papel); }

/* ── Cabecera fija: transparente sobre la foto, papel al bajar ── */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 800;
  height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--margen);
  color: var(--papel);
  transition: background-color .3s var(--curva), color .3s var(--curva), box-shadow .3s var(--curva);
}
.cabecera::before {
  content: ""; position: absolute; inset: 0 0 -2rem; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(20, 17, 13, .82) 0%, rgba(20, 17, 13, .6) 60%, rgba(20, 17, 13, 0) 100%);
  transition: opacity .3s var(--curva);
}
.cabecera--solida { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 0 var(--filete); }
.cabecera--solida::before { opacity: 0; }
.cabecera-marca { display: flex; align-items: center; gap: .875rem; color: inherit; text-decoration: none; min-height: 44px; }
.cabecera-marca img { height: 3rem; width: auto; }
.cabecera-marca-texto { display: flex; flex-direction: column; gap: .3rem; line-height: 1.15; }
.cabecera-marca-texto b { font: 500 1.25rem/1 var(--f-display); letter-spacing: .06em; }
.cabecera-marca-texto span { font-size: .75rem; letter-spacing: .01em; opacity: .9; }
@media (max-width: 559px) { .cabecera-marca-texto span { display: none; } }

.menu-boton {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .5rem .25rem .5rem .75rem;
  background: none; border: 0; color: inherit;
  font: 500 var(--t-chico)/1 var(--f-texto); letter-spacing: .04em;
}
.menu-boton-icono, .menu-boton-icono::before, .menu-boton-icono::after {
  display: block; width: 1.5rem; height: 1px; background: currentColor;
  transition: translate .3s var(--curva), rotate .3s var(--curva), background-color .2s;
}
.menu-boton-icono { position: relative; order: 2; }
.menu-boton-icono::before, .menu-boton-icono::after { content: ""; position: absolute; left: 0; }
.menu-boton-icono::before { translate: 0 -7px; }
.menu-boton-icono::after { translate: 0 7px; }
.menu-abierto .menu-boton { color: var(--papel); }
.menu-abierto .menu-boton-icono { background: transparent; }
.menu-abierto .menu-boton-icono::before { translate: 0; rotate: 45deg; }
.menu-abierto .menu-boton-icono::after { translate: 0; rotate: -45deg; }

/* Sin JS: el menú es una fila de enlaces en la cabecera. */
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.menu a { color: inherit; text-decoration: none; font-size: var(--t-chico); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--oro); }
html:not(.js) .cabecera { position: absolute; height: auto; min-height: var(--alto-cabecera); flex-wrap: wrap; padding-block: .5rem; }

/* Con JS, abierto: hoja de tinta. Índice en Bodoni con filetes. */
.js .menu.abierto {
  background: var(--tinta); color: var(--papel);
  padding: calc(var(--alto-cabecera) + 2rem) var(--margen) 3rem;
  border-left: 1px solid var(--filete-oscuro);
}
.js .menu.abierto ul { flex-direction: column; gap: 0; }
.js .menu.abierto li { border-top: 1px solid var(--filete-oscuro); }
.js .menu.abierto li:last-child { border-bottom: 1px solid var(--filete-oscuro); }
.js .menu.abierto a {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 1rem 0; min-height: 3.5rem;
  font: 400 clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem)/1.1 var(--f-display);
}
.js .menu.abierto a::after {
  content: ""; width: 1.25rem; height: 1.25rem; background: var(--oro-claro);
  -webkit-mask: url("/assets/img/flecha.svg") center / contain no-repeat; mask: url("/assets/img/flecha.svg") center / contain no-repeat;
  opacity: 0; translate: -.5rem 0; transition: opacity .2s, translate .25s var(--curva);
}
.js .menu.abierto a:hover::after, .js .menu.abierto a:focus-visible::after { opacity: 1; translate: 0; }
/* Página actual: nodo dorado + itálica (no solo color). */
.js .menu.abierto a[aria-current="page"] { font-style: italic; text-decoration: none; justify-content: flex-start; }
.js .menu.abierto a[aria-current="page"]::before {
  content: ""; width: .5rem; height: .5rem; background: var(--oro);
  rotate: 45deg; margin-right: 1rem; flex: none;
}

/* ── Hero ── */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-content: end;
  color: var(--papel);
  background: var(--tinta);
  padding: calc(var(--alto-cabecera) + 3rem) var(--margen) clamp(1.5rem, 3vw, 2.5rem);
  overflow: clip;
}
.hero picture, .banner picture { position: absolute; inset: 0; z-index: -2; }
.hero-foto, .banner-foto { width: 100%; height: 100%; object-fit: cover; }
.hero::before, .banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 17, 13, .94) 0%, rgba(20, 17, 13, .88) 30%, rgba(20, 17, 13, .55) 55%, rgba(20, 17, 13, .12) 80%, rgba(20, 17, 13, 0) 100%),
    linear-gradient(180deg, rgba(20, 17, 13, 0) 42%, rgba(20, 17, 13, .78) 66%, rgba(20, 17, 13, .93) 80%, var(--tinta) 100%);
}
@media (max-width: 767px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(20, 17, 13, .62) 0%, rgba(20, 17, 13, .78) 20%, rgba(20, 17, 13, .9) 42%, var(--tinta) 64%);
  }
}
.hero-cuerpo { width: min(100%, var(--ancho)); margin-inline: auto; }
.hero-texto { max-width: 46rem; }
.hero .rotulo { color: var(--oro-claro); }
.hero h1 { font-size: var(--t-h1); line-height: .98; margin-bottom: 1.5rem; }
.hero h1 { max-width: 13ch; }
.hero-entrada { font-size: var(--t-entrada); line-height: 1.55; max-width: 36rem; color: var(--papel-suave); margin-bottom: 0; }

/* Pestañas del hero: un índice con filetes, todas a la vista. */
.hero-pestanas { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero-pestanas ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  position: relative;
}
.hero-pestanas ul::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: rgba(188, 156, 92, .55); transform-origin: left; }
@media (max-width: 899px) { .hero-pestanas ul::before { display: none; } }
.hero-pestanas li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-pestanas a {
  position: relative;
  display: flex; flex-direction: column; gap: .35rem;
  height: 100%; padding: 1.1rem 1.25rem 1.25rem;
  color: var(--papel); text-decoration: none;
  transition: background-color .25s var(--curva);
}
.hero-pestanas a:hover { background: rgba(255, 255, 255, .04); }
.hero-pestanas li:first-child a { padding-left: 0; }
.hero-pestanas a::before {
  content: ""; position: absolute; top: -1px; left: 1.25rem; width: 2.5rem; height: 2px; background: var(--oro);
  transform-origin: left; transition: transform .35s var(--curva);
}
.hero-pestanas li:first-child a::before { left: 0; }
.hero-pestanas a:hover::before, .hero-pestanas a:focus-visible::before { transform: scaleX(3); }
.hero-pestanas b { font: 400 1.375rem/1.15 var(--f-display); }
.hero-pestanas span { font-size: var(--t-mini); color: var(--papel-suave); line-height: 1.4; }
@media (max-width: 899px) {
  .hero-pestanas ul { grid-template-columns: 1fr; border-top: 0; }
  .hero-pestanas li + li { border-left: 0; }
  .hero-pestanas li { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-pestanas li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .hero-pestanas a, .hero-pestanas li:first-child a {
    padding: .85rem 0; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 3.25rem;
  }
  .hero-pestanas a::before { display: none; }
  .hero-pestanas a::after {
    content: ""; width: 1.25rem; height: 1.25rem; flex: none; align-self: center; background: var(--oro-claro);
    -webkit-mask: url("/assets/img/flecha.svg") center / contain no-repeat; mask: url("/assets/img/flecha.svg") center / contain no-repeat;
  }
  .hero-pestanas span { display: none; }
}

.hero-invitacion {
  display: inline-flex; flex-direction: column; align-items: center; gap: .75rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0; justify-self: center;
  color: var(--piedra-clara); text-decoration: none; font-size: var(--t-mini); letter-spacing: .08em;
  min-height: 44px; position: relative;
}
.hero-invitacion::after { content: ""; width: 1px; height: 3rem; background: linear-gradient(var(--oro), rgba(188, 156, 92, 0)); }
.hero-invitacion:hover { color: var(--papel); }

/* ── Banner de página interior ── */
.banner {
  position: relative; isolation: isolate; overflow: clip;
  min-height: clamp(26rem, 62svh, 40rem);
  display: grid; align-content: end;
  padding: calc(var(--alto-cabecera) + 3rem) var(--margen) clamp(2.5rem, 5vw, 4.5rem);
  color: var(--papel); background: var(--tinta);
}
.banner::before {
  background:
    linear-gradient(90deg, rgba(20, 17, 13, .94) 0%, rgba(20, 17, 13, .88) 36%, rgba(20, 17, 13, .55) 66%, rgba(20, 17, 13, .1) 100%),
    linear-gradient(180deg, rgba(20, 17, 13, 0) 50%, rgba(20, 17, 13, .55) 100%);
}
@media (max-width: 767px) {
  .banner::before { background: linear-gradient(180deg, rgba(20, 17, 13, .5) 0%, rgba(20, 17, 13, .86) 40%, rgba(20, 17, 13, .96) 100%); }
}
.banner-cuerpo { width: min(100%, var(--ancho)); margin-inline: auto; }
.banner .rotulo { color: var(--oro-claro); }
.banner h1 { font-size: var(--t-h1); max-width: 16ch; }
.banner p { max-width: 38rem; margin-top: 1.25rem; font-size: var(--t-entrada); color: var(--papel-suave); }

/* ── Secciones ── */
.seccion { padding-block: var(--seccion); }
.seccion--alterna { background: var(--papel-2); }
.sobre-tinta { background: var(--tinta); color: var(--papel); }
.sobre-tinta .rotulo { color: var(--piedra-clara); }
.sobre-tinta :where(a:not(.boton, .enlace-filete)) { color: var(--oro-claro); }
.encabezado { display: grid; gap: 1.5rem; align-content: start; margin-bottom: clamp(3rem, 6vw, 5rem); max-width: 50rem; }
.encabezado .rotulo { margin: 0; }
.encabezado p { font-size: var(--t-entrada); color: var(--piedra); margin: 0; }
.sobre-tinta .encabezado p { color: var(--piedra-clara); }

/* ── Nosotros: la línea genealógica ── */
.nosotros { padding-top: clamp(3rem, 6vw, 5rem); }
.linaje { list-style: none; margin: 0; padding: 0; position: relative; }
.linaje::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: .3125rem; width: 1px;
  background: linear-gradient(var(--oro) 0 calc(100% - 6rem), rgba(188, 156, 92, 0));
  transform-origin: top;
}
.generacion {
  position: relative;
  display: grid; gap: 1.5rem 3rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 clamp(4rem, 8vw, 7rem) 2.5rem;
}
.generacion::before {
  content: ""; position: absolute; left: 0; top: .9rem;
  width: .625rem; height: .625rem; rotate: 45deg;
  background: var(--oro); border: 1px solid var(--oro);
}
.generacion::after {
  content: ""; position: absolute; left: .75rem; top: 1.2rem; width: 1.25rem; height: 1px; background: var(--oro);
}
.generacion-ano { font-size: var(--t-ano); line-height: .9; color: var(--oro-claro); margin: 0; }
.generacion-ano small {
  display: block; font: 500 var(--t-mini)/1.4 var(--f-texto); font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: var(--piedra-clara); margin-top: 1.5rem;
}
.generacion h3, .generacion h4 { font: 400 var(--t-h3)/1.15 var(--f-display); margin: 0 0 1rem; }
.generacion-texto p { color: var(--papel-suave); max-width: 34rem; }
.lamina { margin: 0; }
.lamina img { width: 100%; height: auto; aspect-ratio: var(--proporcion, 4 / 3); object-fit: cover; background: var(--tinta-2); }
.lamina figcaption { margin-top: .75rem; font: italic 400 var(--t-chico)/1.4 var(--f-display); color: var(--piedra-clara); }
.lamina figcaption .credito { font: 400 .75rem/1.4 var(--f-texto); display: block; margin-top: .75rem; }
@media (min-width: 900px) {
  .linaje::before { left: calc(22% - .3125rem); }
  .generacion { grid-template-columns: 22% minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem 3.5rem; padding-left: 0; align-items: start; }
  .generacion::before { left: calc(22% - .625rem); top: 1.4rem; }
  .generacion::after { left: calc(22% - 3.5rem); top: 1.72rem; width: 2.75rem; }
  .generacion-ano { text-align: right; padding-right: 4.5rem; }
  .generacion-texto { padding-top: 1.25rem; }
  .generacion { padding-bottom: clamp(4rem, 6vw, 6rem); }
  .generacion:nth-child(even) .lamina { --proporcion: 4 / 5; width: 66%; justify-self: end; }
  .generacion:nth-child(odd) .lamina { width: 92%; }
}
.nosotros-cierre { padding-left: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
@media (min-width: 900px) { .nosotros-cierre { padding-left: calc(22% + 3.5rem); } }

/* ── Ficha de la institución: una tabla de colofón ── */
.ficha { margin: 0; border-top: 1px solid var(--tinta); }
.ficha-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--filete); }
.ficha dt { font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--piedra); padding-top: .4rem; }
.ficha dd { margin: 0; font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.3 var(--f-display); }
@media (min-width: 768px) { .ficha-fila { grid-template-columns: 13rem minmax(0, 1fr); } }
.nota { font-size: var(--t-chico); color: var(--piedra); margin-top: 1.5rem; }
.dos-columnas { display: grid; gap: 3rem; }
@media (min-width: 960px) { .dos-columnas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; } }

/* ── Publicaciones ── */
.estante { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.libro { display: grid; gap: 1rem; align-content: start; }
.libro-portada { margin: 0; background: var(--papel-2); padding: 1.5rem; display: grid; place-items: center; aspect-ratio: 3 / 4; }
.libro-portada img { max-height: 100%; width: auto; object-fit: contain; }
.libro h3 { font-size: 1.375rem; }
.libro p { font-size: var(--t-chico); color: var(--piedra); margin: 0; }
.libro .ano { color: var(--oro-tinta); font-size: 1.125rem; }
.lista-filete { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.lista-filete > li { display: grid; gap: .5rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--filete); }
@media (min-width: 768px) { .lista-filete > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lista-filete h3 { font-size: var(--t-h3); }
.lista-filete p { color: var(--piedra); margin: 0; }
.sobre-tinta .lista-filete { border-top-color: var(--oro); }
.sobre-tinta .lista-filete > li { border-bottom-color: var(--filete-oscuro); }
.sobre-tinta .lista-filete p { color: var(--piedra-clara); }

/* ── Llamado a la comunidad ── */
.llamado { display: grid; gap: 2rem; align-items: end; }
.llamado h2 { max-width: 16ch; }
.llamado p { color: var(--piedra-clara); max-width: 34rem; font-size: var(--t-entrada); }
.llamado-acciones { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 900px) { .llamado { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ── Pie ── */
.pie { background: var(--tinta); color: var(--piedra-clara); padding: clamp(3.5rem, 6vw, 5rem) var(--margen) 2rem; border-top: 1px solid var(--filete-oscuro); }
.pie-cuerpo { width: min(100%, var(--ancho)); margin-inline: auto; display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .pie-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); } }
.pie-marca { display: flex; gap: 1rem; align-items: center; color: var(--papel); }
.pie-marca img { height: 4.5rem; width: auto; }
.pie-marca b { display: block; font: 400 1.375rem/1.15 var(--f-display); }
.pie-titulo { font: 600 var(--t-mini)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--piedra-clara); margin: 0 0 .75rem; }
.pie nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pie nav a { color: var(--papel); text-decoration: none; justify-content: flex-start; }
.pie nav a:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.pie address { font-style: normal; }
.pie a { color: var(--oro-claro); }
.pie-legal {
  width: min(100%, var(--ancho)); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--filete-oscuro);
  font-size: var(--t-mini); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
}

/* ── Mapa ── */
.mapa-marco { position: relative; }
.mapa { aspect-ratio: 4 / 3; background: var(--papel-2); border: 1px solid var(--filete); }
.mapa iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: grayscale(.6) contrast(1.05); }
.mapa-enlace { margin-top: 1rem; }
.mapa-enlace::before { content: ""; position: absolute; inset: 0; }

::selection { background: var(--oro-claro); color: var(--tinta); }
:focus-visible { outline-color: var(--oro-tinta); }
.sobre-tinta :focus-visible, .hero :focus-visible, .banner :focus-visible, .pie :focus-visible, .menu.abierto :focus-visible { outline-color: var(--oro-claro); }

/* ── Comunidad: acceso con Google ── */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.acceso-rejilla { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .acceso-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; } }
.acceso-intro h2 { margin-bottom: 1.5rem; }
.acceso-intro > p:not(.rotulo) { color: var(--piedra); font-size: var(--t-entrada); }
.acceso-puntos { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.acceso-puntos li { padding: .9rem 0 .9rem 1.5rem; border-bottom: 1px solid var(--filete); position: relative; font-size: var(--t-chico); }
.acceso-puntos li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: .4rem; height: .4rem; background: var(--oro); rotate: 45deg; }
.acceso { position: relative; border: 1px solid var(--tinta); padding: clamp(1.5rem, 4vw, 3rem); background: var(--papel); }
.acceso::before { content: ""; position: absolute; top: -1px; left: -1px; width: 4rem; height: 3px; background: var(--oro); }
.acceso:not([data-estado="cargando"]) .acceso-cargando { display: none; }
.acceso-cargando p { color: var(--piedra); }
.acceso-ayuda { color: var(--piedra); }
.acceso-boton-google { min-height: 44px; margin-top: 1.25rem; }
.acceso-perfil { display: flex; gap: 1.25rem; align-items: center; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--filete); }
.acceso-perfil img { width: 4rem; height: 4rem; object-fit: cover; flex: none; border: 1px solid var(--oro); }
.acceso-perfil h3 { font-size: var(--t-h3); }
.acceso-cuenta { color: var(--piedra); font-size: var(--t-chico); margin: .35rem 0 0; overflow-wrap: anywhere; }
.formulario { display: grid; gap: 1.5rem; }
.formulario .rotulo { margin: 0; }
.campo { display: grid; gap: .5rem; }
.campo label { font-weight: 500; font-size: var(--t-chico); }
.campo input, .campo textarea {
  width: 100%; padding: .75rem 0; min-height: 44px;
  border: 0; border-bottom: 1px solid var(--piedra); border-radius: 0; background: transparent;
}
.campo textarea { resize: vertical; border: 1px solid var(--piedra); padding: .75rem; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 2px; border-color: var(--tinta); }
.campo ::placeholder { color: var(--marcador); }
.formulario-acciones { display: flex; flex-wrap: wrap; gap: 1rem; }
.formulario-estado { min-height: 1.6em; color: var(--oro-tinta); font-size: var(--t-chico); margin: 0; }

/* ── Ex libris: el escudo real (multicolor, JPEG sobre blanco) va sobre una placa de papel con
   filete dorado. No se recolorea ni se recorta: la placa es lo que lo deja leerse sobre la foto. ── */
.exlibris { display: inline-grid; place-items: center; background: var(--papel); padding: .25rem .375rem; box-shadow: inset 0 0 0 1px var(--oro); flex: none; }
.exlibris img { height: 2.5rem; width: auto; }
.cabecera-marca img { height: 2.5rem; }
.exlibris--grande { padding: .5rem .625rem; }
.exlibris--grande img, .pie-marca .exlibris--grande img { height: 4rem; }
.pie-marca { align-items: flex-start; }
.pie-marca b { margin-bottom: .35rem; }

.metadato { font: 500 var(--t-mini)/1.4 var(--f-texto); letter-spacing: .08em; color: var(--oro-tinta) !important; margin-top: .5rem !important; font-variant-numeric: tabular-nums; }
.lista-filete > li > div { display: grid; gap: .25rem; }
.lista-filete--libros > li { grid-template-columns: 1fr !important; }
.lamina--clara figcaption { color: var(--piedra); }
.lamina--clara img { background: var(--papel-2); }
.seccion--alterna .dos-columnas .encabezado { margin-bottom: 2.5rem; }

/* El ancla #contenido empieza debajo de la cabecera fija (WCAG 2.4.11); la foto del hero y del
   banner sube por detrás con margen negativo. flow-root evita que los márgenes se fundan. */
main { display: flow-root; margin-top: var(--alto-cabecera); }
main > .hero:first-child, main > .banner:first-child { margin-top: calc(-1 * var(--alto-cabecera)); }
html:not(.js) main { margin-top: 0; }
html:not(.js) main > .hero:first-child, html:not(.js) main > .banner:first-child { margin-top: 0; }
.banner--corto { min-height: clamp(22rem, 50svh, 32rem); }
.ficha dd a { display: inline-block; padding-block: .4rem; min-height: 44px; overflow-wrap: anywhere; }

/* ── Publicaciones: índice de categorías y categoría vacía ── */
.lista-categorias > li { display: block; padding: 0; }
.categoria {
  position: relative; display: grid; gap: .35rem 2rem; align-items: baseline;
  padding: 1.75rem 3rem 1.75rem 0; color: inherit; text-decoration: none;
}
@media (min-width: 768px) { .categoria { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.categoria h3 { transition: translate .3s var(--curva); }
.categoria-ir { position: absolute; right: 0; top: 50%; translate: 0 -50%; color: var(--oro-tinta); width: 1.5rem; height: 1.5rem; transition: translate .3s var(--curva); }
.categoria::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--curva); }
.categoria:hover::before, .categoria:focus-visible::before { transform: scaleX(1); }
.categoria:hover h3 { translate: .5rem 0; }
.categoria:hover .categoria-ir { translate: .35rem -50%; }
.banner .rotulo a { color: inherit; text-decoration-color: var(--oro); }
.estante:empty { display: none; }
.vacio { border: 1px solid var(--filete); border-top: 3px solid var(--oro); padding: clamp(1.75rem, 4vw, 3rem); max-width: 46rem; }
.vacio-titulo { font: 400 var(--t-h3)/1.2 var(--f-display); margin-bottom: .75rem; }
.vacio > p:not(.vacio-titulo) { color: var(--piedra); }
.vacio-otras { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.vacio-otras a { display: inline-flex; align-items: center; min-height: 44px; }
.estante:not(:empty) + .vacio { display: none; }
.lamina--documento { margin-top: 3rem; }

/* Registro: publicaciones del catálogo, numeradas */
.registro-cuenta { font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--piedra); margin: 0 0 1.5rem; }
.categoria-cuenta { display: block; margin-top: .35rem; font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-tinta); }
.registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); border-top: 1px solid var(--tinta); }
.registro > li { border-bottom: 1px solid var(--filete); }
.registro-enlace { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1rem; padding: 1.1rem 0; min-height: 44px; color: inherit; text-decoration: none; }
.registro-numero { font: 400 clamp(1.75rem, 1.5rem + .8vw, 2.25rem)/1 var(--f-display); color: var(--oro-tinta); min-width: 2.5ch; font-variant-numeric: lining-nums; }
.registro-titulo { font-weight: 500; line-height: 1.35; }
.registro-enlace .flecha { width: 1rem; height: 1rem; color: var(--oro-tinta); align-self: center; transition: translate .3s var(--curva); }
.registro-enlace::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--curva); }
a.registro-enlace:hover::after, a.registro-enlace:focus-visible::after { transform: scaleX(1); }
a.registro-enlace:hover .flecha { translate: .2rem -.2rem; }
.registro-enlace--sin .registro-titulo { color: var(--piedra); }
.registro-nota { font-size: var(--t-mini); color: var(--piedra); white-space: nowrap; }
.registro-detalle { margin: -.5rem 0 1rem; font-size: var(--t-chico); color: var(--piedra); }
.registro-grupo { font-size: var(--t-h3); margin: 3rem 0 1rem; }
.registro-grupo:first-of-type { margin-top: 0; }

/* Paneles, volver y superficies del navegador */
.panel-titulo { font: 400 var(--t-h3)/1.2 var(--f-display); margin-bottom: .75rem; }
.volver { margin: 0 0 1.25rem; }
.volver a { display: inline-flex; align-items: center; min-height: 44px; color: var(--oro-claro); text-decoration: none; font-size: var(--t-chico); font-weight: 500; }
.volver a:hover { color: var(--papel); }
html { scrollbar-color: var(--piedra) var(--papel-2); caret-color: var(--oro-tinta); }

/* ══ Movimiento (fase 3) ══════════════════════════════════════════════════════
   Contexto marketing institucional · personalidad Premium · curva firma --salida.
   Momentos (700 ms): el titular del hero se asienta como tinta; la línea genealógica de
   Nosotros se dibuja con el scroll. Contenido (420 ms): filetes que se trazan, filas que
   aparecen sin desplazarse. Quieto: banners con un fundido. Todo dentro de no-preference;
   el estado por defecto es el final (sin JS o con movimiento reducido se ve completo). */
:root { --salida: cubic-bezier(.23, 1, .32, 1); --salida-suave: cubic-bezier(.165, .84, .44, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* Momento 1 · hero, al cargar */
  .hero h1 { animation: tinta 900ms var(--salida) 100ms both; }
  .hero-entrada { animation: aparece 700ms var(--salida-suave) 380ms both; }
  .hero-pestanas ul::before { animation: traza-x 700ms var(--salida) 520ms both; }
  .hero-pestanas li { animation: aparece 420ms var(--salida-suave) both; }
  .hero-pestanas li:nth-child(1) { animation-delay: 640ms; }
  .hero-pestanas li:nth-child(2) { animation-delay: 700ms; }
  .hero-pestanas li:nth-child(3) { animation-delay: 760ms; }
  .hero-pestanas li:nth-child(4) { animation-delay: 820ms; }
  .hero-pestanas li:nth-child(5) { animation-delay: 880ms; }
  .hero-invitacion { animation: aparece 600ms var(--salida-suave) 1100ms both; }
  .hero-invitacion::after { transform-origin: top; animation: traza-y 900ms var(--salida) 1200ms both; }

  /* Quieto · banners de las páginas interiores */
  .banner-cuerpo { animation: aparece 400ms var(--salida-suave) 60ms both; }

  /* Hovers solo con puntero fino; presión en botones */
  .boton:active { scale: .97; }
  .boton { transition: background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva), scale .12s var(--curva); }
}

@keyframes tinta { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes traza-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes traza-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nodo { from { background-color: var(--tinta); } to { background-color: var(--oro); } }
@keyframes paralaje { from { transform: translateY(-3%) scale(1.07); } to { transform: translateY(3%) scale(1.07); } }

.lamina picture { display: block; overflow: clip; }
.ficha, .lista-filete { position: relative; }
.ficha::before, .lista-filete::before { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: inherit; }

@media (prefers-reduced-motion: no-preference) {
  /* Momento 2 · Nosotros, atado al scroll (navegadores con animation-timeline) */
  html.sd .linaje { view-timeline: --linaje block; }
  html.sd .linaje::before { transform-origin: top; animation: traza-y linear both; animation-timeline: --linaje; animation-range: cover 8% cover 72%; }
  html.sd .generacion::before { animation: nodo linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
  html.sd .generacion::after { transform-origin: left; animation: traza-x linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
  html.sd .lamina picture img { animation: paralaje linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

  /* Contenido: los filetes superiores se trazan con el scroll. El texto no se funde atado al
     scroll: a medio fundir en el borde de la pantalla sería texto sin contraste en reposo. */
  html.sd .ficha, html.sd .lista-filete { border-top-color: transparent; view-timeline: --filete block; }
  html.sd .ficha::before, html.sd .lista-filete::before { background: var(--tinta); transform-origin: left; animation: traza-x linear both; animation-timeline: --filete; animation-range: entry 20% entry 100%; }
  html.sd .sobre-tinta .lista-filete::before { background: var(--oro); }

  /* Respaldo IntersectionObserver: mismo relato, disparado una vez */
  .io .generacion[data-revela] { transition: opacity 700ms var(--salida-suave); }
  .io .generacion:not(.visible)::before { background-color: var(--tinta); }
  .io .generacion::before { transition: background-color 700ms var(--salida-suave) 200ms; }
  .io .generacion::after { transform-origin: left; transition: transform 700ms var(--salida) 150ms; }
  .io .generacion:not(.visible)::after { transform: scaleX(0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  html.sd .generacion::after, .io .generacion::after { transform-origin: right; }
}

/* ── Fotos de Nosotros: salen de la línea genealógica y se revelan (de tinta a imagen) ──
   Atado al scroll con animation-timeline; respaldo IntersectionObserver por .visible.
   Solo transform y opacity (la capa de tinta es un pseudo-elemento, no un filtro). */
.lamina picture { position: relative; }
.lamina picture::after { content: ""; position: absolute; inset: 0; background: var(--tinta); opacity: 0; pointer-events: none; }
@keyframes foto-rama { from { transform: translateX(-9%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes revelado { from { opacity: .9; } to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.sd .generacion .lamina picture { animation: foto-rama linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  html.sd .generacion .lamina picture::after { animation: revelado linear both; animation-timeline: view(); animation-range: entry 15% cover 48%; }

  .io .generacion .lamina picture { transition: transform 900ms var(--salida) 150ms, opacity 700ms var(--salida-suave) 150ms; }
  .io .generacion .lamina picture::after { transition: opacity 1100ms var(--salida-suave) 350ms; }
  .io .generacion:not(.visible) .lamina picture { transform: translateX(-9%); opacity: 0; }
  .io .generacion:not(.visible) .lamina picture::after { opacity: .9; }
}

/* ══ Menú horizontal (desde 1240 px): arriba a la derecha, filete dorado que se traza ══ */
@media (min-width: 1240px) {
  .js .menu-boton { display: none; }
  .js .menu, .js .menu.abierto, html:not(.js) .menu {
    display: block; position: static; inset: auto; width: auto; overflow: visible;
    background: none; color: inherit; padding: 0; border: 0;
  }
  .menu ul, .js .menu.abierto ul { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .125rem; }
  .js .menu.abierto li, .js .menu.abierto li:last-child { border: 0; }
  .menu li:has(> a[data-nav="inicio"]) { display: none; }
  .menu a, .js .menu.abierto a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; width: auto;
    padding: .5rem .7rem; font: 500 .9375rem/1 var(--f-texto); letter-spacing: .01em;
    color: inherit; text-decoration: none; border: 0;
  }
  .menu a::after, .js .menu.abierto a::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .45rem; width: auto; height: 1px;
    background: var(--oro); opacity: 1; translate: none; -webkit-mask: none; mask: none;
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva);
  }
  .menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
  .menu a[aria-current="page"], .js .menu.abierto a[aria-current="page"] { font-style: normal; text-decoration: none; justify-content: center; }
  .menu a[aria-current="page"]::before, .js .menu.abierto a[aria-current="page"]::before { content: none; }
  .menu a[aria-current="page"]::after { transform: scaleX(1); height: 2px; }
  .menu-destacado { margin-left: .75rem; }
  .menu .menu-destacado a { border: 1px solid currentColor; padding: .5rem 1.1rem; transition: background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva); }
  .menu .menu-destacado a::after { content: none; }
  .menu .menu-destacado a:hover, .menu .menu-destacado a[aria-current="page"] { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
}

/* ══ Nosotros: índice, escudo, académicos y genealogistas ══ */
.indice-seccion ul {
  list-style: none; margin: 0 0 clamp(3.5rem, 7vw, 5.5rem); padding: .25rem 0;
  display: flex; flex-wrap: wrap; gap: 0 2rem;
  border-top: 1px solid var(--filete-oscuro); border-bottom: 1px solid var(--filete-oscuro);
}
.indice-seccion a { display: inline-flex; align-items: center; min-height: 44px; color: var(--papel-suave); text-decoration: none; font-size: var(--t-chico); font-weight: 500; }
.sobre-tinta .indice-seccion a:hover { color: var(--oro-claro); text-decoration: underline; text-decoration-color: var(--oro); }
.subtitulo-seccion { font: 400 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1.1 var(--f-display); margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.escudo, .academicos, .genealogistas { padding-top: clamp(4rem, 8vw, 7rem); margin-top: clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--filete-oscuro); }
.escudo { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .escudo { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5rem; } }
.escudo-figura { margin: 0; display: grid; place-items: center; padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid var(--filete-oscuro); background: var(--tinta-2); }
.exlibris--escudo { padding: 1.25rem 1.5rem; }
.exlibris--escudo img, .cabecera-marca .exlibris--escudo img { height: auto; width: 188px; max-width: 100%; }
.escudo-texto p { color: var(--papel-suave); max-width: 40rem; }
.blason { margin: 1.75rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 1px solid var(--oro); }
.blason p { font: italic 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.5 var(--f-display); color: var(--papel); }
.academicos h4 { font: 600 var(--t-mini)/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); margin: 0 0 1rem; }
.academicos-juntas { display: grid; gap: 1rem 3rem; }
@media (min-width: 768px) { .academicos-juntas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .academicos-juntas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cargos { margin: 0 0 2.5rem; border-top: 1px solid var(--filete-oscuro); }
.cargos div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--filete-oscuro); }
.cargos dt { color: var(--piedra-clara); font-size: var(--t-chico); }
.cargos dd { margin: 0; color: var(--papel); }
.sillas { margin-top: 3rem; }
.sillas-nota { color: var(--piedra-clara); font-size: var(--t-chico); margin: 0 0 1.25rem; }
.lista-sillas { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 3rem; border-top: 1px solid var(--filete-oscuro); }
@media (min-width: 600px) { .lista-sillas { columns: 2; } }
@media (min-width: 1000px) { .lista-sillas { columns: 3; } }
.lista-sillas li { break-inside: avoid; display: flex; gap: .875rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--filete-oscuro); color: var(--papel-suave); }
.lista-sillas li::before { content: attr(value); flex: none; min-width: 1.75rem; text-align: right; font: italic 400 1.0625rem/1 var(--f-display); color: var(--oro-claro); }
.lista-sillas .ano { color: var(--piedra-clara); }
.genealogistas-intro { color: var(--papel-suave); max-width: 46rem; margin-bottom: 2.5rem; font-size: var(--t-entrada); }
.retratos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 4rem; }
@media (min-width: 900px) { .retratos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.retrato { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid var(--filete-oscuro); align-items: start; }
.retrato img { width: 5.5rem; height: 5.5rem; object-fit: cover; border: 1px solid var(--oro); background: var(--tinta-2); }
.retrato h4 { font: 400 1.375rem/1.2 var(--f-display); margin: 0 0 .6rem; }
.retrato h4 .ano { display: block; font-size: 1rem; color: var(--oro-claro); margin-top: .3rem; }
.retrato p { color: var(--papel-suave); font-size: var(--t-chico); margin: 0; }

/* ══ Sitios de interés ══ */
.indice-sitios ul { list-style: none; margin: 0; padding: 1rem 0; display: flex; flex-wrap: wrap; gap: 0 2rem; border-bottom: 1px solid var(--filete); }
.indice-sitios a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: var(--t-chico); text-decoration: none; }
.indice-sitios a:hover { text-decoration: underline; }
.seccion--sitios { padding-block: clamp(3.5rem, 6vw, 6rem); }
.grupo-titulo { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sitios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.sitio { display: grid; gap: .75rem 3rem; padding: 2rem 0; border-bottom: 1px solid var(--filete); }
@media (min-width: 960px) { .sitio { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); } }
.sitio h3 { font: 400 var(--t-h3)/1.2 var(--f-display); }
.sitio > p { color: var(--piedra); margin: 0; }
.sitio-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; align-content: start; }
.sitio-enlaces li { display: flex; align-items: center; min-height: 44px; }
.sitio-enlaces a { display: inline; padding-block: .6rem; font-weight: 500; font-size: var(--t-chico); text-decoration: none; }
.sitio-enlaces a .flecha { margin-left: .4rem; }
.sitio-enlaces a:hover { text-decoration: underline; }

/* ── Texto legal: medida de lectura y jerarquía tranquila ── */
.texto-legal { max-width: 44rem; }
.texto-legal h3 { font: 400 var(--t-h3)/1.2 var(--f-display); margin: 2.5rem 0 .75rem; }
.texto-legal h3:first-of-type { margin-top: 0; }
.texto-legal p { color: var(--piedra); }
.texto-legal strong { color: var(--tinta); font-weight: 600; }
.pie-legal a { color: var(--piedra-clara); }

/* ── Cuenta: «Iniciar sesión» y «Registrarse» (cabecera, todas las páginas) ── */
.menu-cuenta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.menu-cuenta a {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px;
  padding: .55rem 1.1rem; font: 500 .9375rem/1 var(--f-texto); text-decoration: none; color: inherit;
  border: 1px solid currentColor; transition: background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva);
}
.menu-cuenta .cuenta-entrar { border-color: transparent; padding-inline: .7rem; }
.menu-cuenta .cuenta-entrar:hover { border-color: currentColor; }
.menu-cuenta .cuenta-registro:hover { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.menu-cuenta .cuenta-usuario { border-color: var(--oro); }
.menu-cuenta .cuenta-usuario img { width: 1.75rem; height: 1.75rem; object-fit: cover; border: 1px solid var(--oro); }
.menu-cuenta [hidden] { display: none !important; }
/* Sin JS el menú es una fila en la cabecera: la cuenta va al final. */
html:not(.js) .menu { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
/* Hoja móvil abierta: los dos botones al pie, grandes y a todo el ancho. */
.js .menu.abierto .menu-cuenta { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.js .menu.abierto .menu-cuenta a { min-height: 3.25rem; width: auto; padding: .875rem 1rem; justify-content: center; font: 500 1rem/1.2 var(--f-texto); }
.js .menu.abierto .menu-cuenta .cuenta-entrar { border-color: currentColor; }
.js .menu.abierto .menu-cuenta .cuenta-registro { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.js .menu.abierto .menu-cuenta .cuenta-usuario { grid-column: 1 / -1; }
.js .menu.abierto .menu-cuenta a::after, .js .menu.abierto .menu-cuenta a::before { content: none; }
@media (max-width: 1239px) { .js .menu:not(.abierto) .menu-cuenta { display: none; } }
@media (min-width: 1240px) {
  .js .menu, .js .menu.abierto, html:not(.js) .menu { display: flex; align-items: center; gap: 1rem; }
  .js .menu.abierto .menu-cuenta { margin-top: 0; display: flex; }
  .menu-cuenta { flex-wrap: nowrap; gap: .5rem; padding-left: 1rem; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); }
  .menu-cuenta a::after { content: none; }
}
@media (min-width: 1240px) and (max-width: 1439px) { .cabecera-marca-texto span { display: none; } }

.acceso-opcion + .acceso-opcion { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--filete); }
.acceso-opcion--elegida { position: relative; }
.acceso-opcion--elegida::before { content: ""; position: absolute; left: calc(-1 * clamp(1.5rem, 4vw, 3rem)); top: 0; bottom: 0; width: 2px; background: var(--oro); }
.acceso-opcion + .acceso-opcion.acceso-opcion--elegida::before { top: 2rem; }

/* ── Acceso con correo (enlace mágico y registro) ── */
.form-correo { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-correo-o { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--piedra); font-size: var(--t-mini); letter-spacing: .02em; }
.form-correo-o::before, .form-correo-o::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
.form-correo .boton { justify-self: start; }
.form-correo .boton:disabled { opacity: .6; cursor: progress; }
.form-correo-estado { margin: 0; min-height: 1.2em; font-size: var(--t-chico); }
.form-correo-estado--ok { color: var(--tinta); padding: .875rem 1rem; border-left: 1px solid var(--oro); background: var(--papel-2); }
.form-correo-estado--error, .campo-error { color: #9b2c1f; }
.campo-error { margin: .25rem 0 0; font-size: var(--t-chico); }
.campo input[aria-invalid="true"] { border-bottom-color: #9b2c1f; }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Cuenta de la Academia: contraseña en lugar de enlace por correo */
.acceso-panel[data-tiene="si"] [data-solo="no"], .acceso-panel[data-tiene="no"] [data-solo="si"] { display: none; }
.campo-usuario { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.acceso-enlaces { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; }
.enlace-boton { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-chico); font-weight: 500; color: var(--oro-tinta); text-decoration: underline; text-decoration-color: var(--filete); text-underline-offset: .25em; }
.enlace-boton:hover { text-decoration-color: currentColor; }
.enlace-boton:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 2px; }
.casilla { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: var(--t-chico); cursor: pointer; }
.casilla input { accent-color: var(--tinta); width: 1.125rem; height: 1.125rem; }

/* ── Cuenta de la Academia: enlace a Administración (solo si la sesión trae admin) ── */
.menu-cuenta .cuenta-admin { border-color: transparent; padding-inline: .7rem; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: .3em; }
.menu-cuenta .cuenta-admin:hover, .menu-cuenta .cuenta-admin[aria-current="page"] { border-color: var(--oro); text-decoration: none; }
.js .menu.abierto .menu-cuenta .cuenta-admin { grid-column: 1 / -1; border-color: var(--oro); text-decoration: none; }

/* ── Ficha de una publicación: portada (1.ª página), descripción y descarga ── */
.ficha-pub { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 860px) { .ficha-pub { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; } }
.ficha-pub-portada { margin: 0; background: var(--papel-2); padding: clamp(1rem, 3vw, 2rem); display: grid; place-items: center; aspect-ratio: 3 / 4; max-width: 30rem; box-shadow: inset 0 0 0 1px var(--filete); }
.ficha-pub-portada img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; background: var(--papel); box-shadow: 0 1px 2px rgb(20 17 13 / .08), 0 12px 32px -12px rgb(20 17 13 / .28); }
.ficha-pub-sin { font: 400 clamp(4rem, 3rem + 6vw, 8rem)/1 var(--f-display); color: var(--oro-tinta); }
.ficha-pub-texto { display: grid; gap: 1.75rem; align-content: start; max-width: 40rem; }
.ficha-pub-texto .registro-cuenta { margin: 0; color: var(--oro-tinta); }
.ficha-pub-descripcion { font-size: var(--t-entrada); }
.ficha-pub-descripcion p { margin: 0 0 1em; }
.ficha-pub-descripcion p:last-child { margin-bottom: 0; }
.ficha-pub-datos { margin: 0; border-top: 1px solid var(--tinta); }
.ficha-pub-datos > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--filete); }
.ficha-pub-datos dt { font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--piedra); padding-top: .2rem; }
.ficha-pub-datos dd { margin: 0; }
.ficha-pub-acciones, .ficha-pub-texto .nota { margin: 0; }

/* ── Administración ── */
.admin-pagina { padding: calc(var(--alto-cabecera) + clamp(2.5rem, 5vw, 4.5rem)) 0 var(--seccion); }
.admin-cabeza { display: grid; gap: .75rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--tinta); }
.admin-cabeza h1 { font-size: var(--t-h2); margin: 0; }
.admin-cabeza .registro-cuenta, .admin-quien { margin: 0; }
.admin-quien { color: var(--piedra); font-size: var(--t-chico); }
.admin-aviso { border: 1px solid var(--filete); border-top: 3px solid var(--oro); padding: clamp(1.75rem, 4vw, 3rem); max-width: 46rem; display: grid; gap: 1rem; justify-items: start; }
.admin-aviso h2 { font-size: var(--t-h3); margin: 0; }
.admin-aviso p { color: var(--piedra); margin: 0; }
.admin { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) {
  .admin { grid-template-columns: 19rem minmax(0, 1fr); gap: 4rem; }
  .admin-secciones { position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); }
}
.admin-col-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.25rem; }
.admin-col-cabeza h2 { font-size: var(--t-h3); margin: 0; }
.admin-col-cabeza p { margin: .35rem 0 0; color: var(--piedra); font-size: var(--t-chico); max-width: 44rem; }
.admin-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.boton--peligro { color: #9b2c1f; border-color: currentColor; }
.boton--peligro:hover { background: #9b2c1f; border-color: #9b2c1f; color: var(--papel); }
.admin-lista-sec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.admin-lista-sec li { border-bottom: 1px solid var(--filete); }
.admin-lista-sec button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; min-height: 44px; padding: .85rem .75rem .85rem 0; font-weight: 500; transition: color .2s var(--curva); }
.admin-lista-sec button span { font-size: var(--t-mini); color: var(--piedra); font-variant-numeric: tabular-nums; }
.admin-lista-sec button:hover { color: var(--oro-tinta); }
/* Sección activa: un nodo dorado, como los de la línea genealógica. */
.admin-lista-sec button[aria-current="true"] { color: var(--tinta); }
.admin-lista-sec button[aria-current="true"]::after { content: ""; position: absolute; right: 2.25rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; background: var(--oro); }
.admin-lista-sec button:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 2px; }
.admin-buscar { margin-bottom: 1rem; max-width: 26rem; }
.admin-lista-pub { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.admin-lista-pub > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .25rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--filete); }
.admin-pub-mini { grid-row: span 2; width: 3rem; aspect-ratio: 3 / 4; background: var(--papel-2); display: grid; place-items: center; overflow: hidden; font: 400 1.125rem/1 var(--f-display); color: var(--oro-tinta); box-shadow: inset 0 0 0 1px var(--filete); }
.admin-pub-mini img { width: 100%; height: 100%; object-fit: cover; }
.admin-pub-texto { min-width: 0; }
.admin-pub-texto b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.admin-pub-texto small { display: block; color: var(--piedra); font-size: var(--t-mini); margin-top: .2rem; }
.admin-pub-botones { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.admin-pub-botones a, .admin-pub-botones button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--t-chico); font-weight: 500; color: var(--oro-tinta); text-decoration: underline; text-decoration-color: var(--filete); text-underline-offset: .25em; }
.admin-pub-botones a:hover, .admin-pub-botones button:hover { text-decoration-color: currentColor; }
.admin-pub-botones .borrar { color: #9b2c1f; }
.admin-pub-botones :focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 2px; }
@media (min-width: 700px) {
  .admin-lista-pub > li { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .admin-pub-mini { grid-row: auto; }
}
.admin-vacio { color: var(--piedra); padding: 1.5rem 0; margin: 0; }
.admin-estado { min-height: 1.6em; margin: 0 0 1rem; font-size: var(--t-chico); color: var(--oro-tinta); }

.admin-dialogo { width: min(100% - 2rem, 44rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-top: 3px solid var(--oro); background: var(--papel); color: var(--tinta); box-shadow: 0 24px 64px -16px rgb(20 17 13 / .45); }
.admin-dialogo::backdrop { background: rgb(20 17 13 / .55); }
.admin-dialogo form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.admin-dialogo h2 { font-size: var(--t-h3); margin: 0; }
.admin-dialogo form > p { margin: 0; color: var(--piedra); }
.admin-fila { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .admin-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.campo select { width: 100%; min-height: 44px; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--piedra); border-radius: 0; background: transparent; font: inherit; color: inherit; }
.campo select:focus-visible { outline: 2px solid var(--oro-tinta); outline-offset: 2px; }
.campo-ayuda { font-size: var(--t-mini); color: var(--piedra); margin: 0; }
.campo input[type="file"] { border: 1px dashed var(--piedra); padding: .75rem; cursor: pointer; }
.admin-origen { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.admin-origen legend { font-weight: 500; font-size: var(--t-chico); margin-bottom: .25rem; padding: 0; }
.admin-origen label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.admin-origen input { accent-color: var(--tinta); width: 1.125rem; height: 1.125rem; }
.admin-portada { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.admin-portada-vista { width: 6rem; aspect-ratio: 3 / 4; background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--filete); display: grid; place-items: center; overflow: hidden; font-size: var(--t-mini); color: var(--piedra); text-align: center; padding: .25rem; }
.admin-portada-vista img { width: 100%; height: 100%; object-fit: contain; background: var(--papel); }
.admin-progreso { width: 100%; height: 3px; appearance: none; border: 0; background: var(--filete); }
.admin-progreso::-webkit-progress-bar { background: var(--filete); }
.admin-progreso::-webkit-progress-value { background: var(--oro-tinta); }
.admin-progreso::-moz-progress-bar { background: var(--oro-tinta); }
[data-tipo="error"] { color: #9b2c1f !important; }
@media (prefers-reduced-motion: no-preference) {
  .admin-dialogo[open] { animation: dialogo-entra .28s var(--curva); }
  .admin-dialogo[open]::backdrop { animation: velo-entra .28s ease-out; }
}
@keyframes dialogo-entra { from { opacity: 0; translate: 0 .75rem; } }
@keyframes velo-entra { from { opacity: 0; } }