/* ===========================================================
   Tipografías alojadas en el propio sitio.
   No dependen de Google Fonts: cargan más rápido, funcionan sin
   conexión a terceros y no envían datos de los visitantes fuera.
   =========================================================== */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url('../assets/fuentes/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:100 900;
  font-display:swap; src:url('../assets/fuentes/fraunces-italic.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('../assets/fuentes/garamond.woff2') format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:400 800;
  font-display:swap; src:url('../assets/fuentes/garamond-italic.woff2') format('woff2');
}

/* ===========================================================
   Sociedad Bolivariana de Panamá
   Sistema visual "de archivo". Escala editorial calibrada
   contra sociedades pares: Royal Society (1660), Society of
   Antiquaries of London (1707), American Philosophical
   Society (1743), Massachusetts Historical Society (1791).
   Paleta extraída del escudo oficial.
   =========================================================== */

:root{
  --verde: #14472a;
  --verde-oscuro: #0b2a19;
  --rojo: #ab1f22;
  --rojo-vivo: #d72226;
  --dorado: #b6892f;
  --dorado-claro: #dcb96a;
  --gris: #7c8177;
  --tinta: #241d12;
  --tinta-suave: #4a4327;
  --pergamino: #f4efdf;
  --pergamino-2: #ece3c8;
  --pergamino-borde: #cbb98a;
  --blanco: #fffdf6;

  --f-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --f-cuerpo: 'EB Garamond', Georgia, serif;

  --max-width: 1180px;
  --medida: 68ch;

  /* --- Escala tipográfica única (razón ~1.28, fluida) ---
     Un solo juego de tamaños para todo el sitio. Ningún bloque
     define tamaños propios: todos toman de aquí. --t-min es el
     suelo de legibilidad; por debajo no baja ningún texto. */
  --t-1: clamp(30px, 2.472vw + 20.36px, 52px);   /* titular del home             */
  --t-2: clamp(26px, 1.573vw + 19.87px, 40px);   /* titular de página, enunciado */
  --t-3: clamp(22px, 1.011vw + 18.06px, 31px);   /* h2                           */
  --t-4: clamp(19px, 0.562vw + 16.81px, 24px);   /* h3, cifras, citas breves     */
  --t-5: clamp(17.6px, 0.157vw + 16.99px, 19px); /* entradilla                   */
  --t-cuerpo: clamp(16.4px, 0.112vw + 15.96px, 17.4px);
  --t-6: 16px;                          /* secundario                   */
  --t-7: 14.5px;                        /* rótulos en versalitas        */
  --t-min: 13px;                        /* crédito, colofón: mínimo     */

  /* --- Ritmo vertical único ---
     Todas las variables crecen entre 390 px y 1280 px de ancho, así
     las proporciones entre pasos se mantienen a cualquier tamaño de
     pantalla en vez de abrirse en los anchos intermedios. */
  --ritmo-mayor: clamp(60px, 4.045vw + 44.22px, 96px);
  --ritmo-menor: clamp(42px, 2.247vw + 33.24px, 62px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: var(--pergamino);
  line-height:1.62;
}

/* textura de papel muy sutil */
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
a{ color: var(--rojo); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width: var(--max-width); margin:0 auto; padding:0 32px; position:relative; z-index:1; }
.container--angosto{ max-width:820px; }

h1,h2,h3,h4{ font-family: var(--f-display); color: var(--verde-oscuro); line-height:1.14; margin-top:0; font-weight:700; }

/* --- Reparto de líneas ---
   Los titulares y los bloques centrados se equilibran (balance): así
   ninguno termina en un renglón de un cuarto de ancho. Los párrafos
   corridos usan pretty, que evita la última línea huérfana sin tocar
   el resto del bloque. */
h1,h2,h3,h4,
blockquote, .lead, .rotulo, .enunciado{ text-wrap:balance; }
p, li{ text-wrap:pretty; }
.tagline, .pie, .nota, .copy, .colofon-direccion,
.fuente, .fuente-doc, .leyenda, .aparte, .signatura,
.section-head p, .encabezado p, .cabecera-indice p,
.acceso-catalogo .encabezado p, .nota-fondo p{ text-wrap:balance; }
h2{ font-size: var(--t-3); letter-spacing:-.006em; }
h3{ font-size: var(--t-4); }
p{ margin:0 0 20px; max-width: var(--medida); }


.section{ padding: var(--ritmo-mayor) 0; position:relative; z-index:1; }
.section--corta{ padding: var(--ritmo-menor) 0; }
.section--apertura{ padding: var(--ritmo-menor) 0; }
.section--pergamino2{ background: var(--pergamino-2); }
.section-head{ max-width:640px; margin:0 auto clamp(40px,5vw,64px); text-align:center; }
.section-head p{ color: var(--tinta-suave); margin-left:auto; margin-right:auto; }

.fecha{
  font-family: var(--f-cuerpo); font-style:italic; font-size: var(--t-6);
  color: var(--gris); margin:0 0 10px; max-width:none;
}

/* ---------- Ornamento ---------- */
.fleuron{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 0 auto 28px; width: 220px; }
.fleuron::before, .fleuron::after{ content:''; flex:1; height:1px; background: var(--pergamino-borde); }
.fleuron span{
  width:9px; height:9px; background: var(--dorado); transform: rotate(45deg);
  outline: 1px solid var(--pergamino-borde); outline-offset:5px;
}
.fleuron--oscuro::before,.fleuron--oscuro::after{ background: rgba(255,255,255,.28); }
.fleuron--oscuro span{ outline-color: rgba(255,255,255,.28); background: var(--dorado-claro); }

/* ---------- Botones ---------- */
.btn{
  font-family: var(--f-cuerpo); font-weight:600; font-size: var(--t-5);
  font-variant:small-caps; letter-spacing:.06em;
  padding:15px 30px; display:inline-block; cursor:pointer;
  border:1px solid transparent; border-radius:2px;
  transition: all .2s ease;
}
.btn:hover{ text-decoration:none; }
.btn--primario{ background: var(--rojo); color:var(--blanco); }
.btn--primario:hover{ background: var(--verde-oscuro); }
.btn--linea{ border-color: var(--verde-oscuro); color: var(--verde-oscuro); }
.btn--linea:hover{ background: var(--verde-oscuro); color:#fff; }
.btn--linea-clara{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn--linea-clara:hover{ background: rgba(255,255,255,.14); }

/* enlace editorial con filete (patrón APS) */
.enlace-filete{
  font-family: var(--f-cuerpo); font-size: var(--t-6); font-weight:600;
  font-variant:small-caps; letter-spacing:.06em;
  display:inline-block; padding:15px 0 9px;
  border-bottom:1px solid currentColor;
}
.enlace-filete:hover{ text-decoration:none; color: var(--verde-oscuro); }

/* ---------- Barra de utilidad + Header ---------- */
.utility-bar{ background: var(--verde-oscuro); }
.utility-bar .container{
  display:flex; justify-content:flex-end; align-items:center;
  gap:4px 22px; flex-wrap:wrap; padding-top:2px; padding-bottom:2px;
}
.utility-bar a.destacado{
  color: var(--dorado-claro); margin-right:auto;
  display:inline-flex; align-items:center; gap:8px;
}
.utility-bar a.destacado::before{
  content:''; width:13px; height:13px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1a6 6 0 104.2 10.2l3.3 3.3 1.4-1.4-3.3-3.3A6 6 0 007 1zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1a6 6 0 104.2 10.2l3.3 3.3 1.4-1.4-3.3-3.3A6 6 0 007 1zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.utility-bar a.destacado:hover{ color:#fff; }
@media (max-width:980px){ .utility-bar a.destacado{ margin-right:0; } }
.utility-bar a{
  font-family: var(--f-cuerpo); font-size: var(--t-6); font-weight:500;
  font-variant:small-caps; letter-spacing:.055em;
  color: rgba(244,239,223,.75);
  padding:13px 0; display:inline-block;   /* área de toque */
}
.utility-bar a:hover{ color: var(--dorado-claro); text-decoration:none; }
.utility-bar a.activo{ color: var(--dorado-claro); }

.site-header{
  position:sticky; top:0; z-index:60;
  background: var(--pergamino);
  border-bottom:1px solid var(--pergamino-borde);
}
.site-header::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: linear-gradient(90deg, transparent, var(--dorado) 20%, var(--dorado) 80%, transparent);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.brand{ display:flex; align-items:center; gap:15px; color: var(--verde-oscuro); text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand:hover .brand-text strong{ color: var(--rojo); transition:color .15s ease; }
.brand img{ width:54px; height:54px; }
.brand-text{ line-height:1.2; }
.brand-text strong{ display:block; font-size: var(--t-6); font-family: var(--f-display); letter-spacing:.005em; }
.brand-text span{ font-family: var(--f-cuerpo); font-size: var(--t-7); font-variant:small-caps; letter-spacing:.07em; color: var(--gris); }

.nav{ display:flex; align-items:baseline; gap:34px; font-family: var(--f-display); }
.nav a{
  color: var(--verde-oscuro); font-size: var(--t-6); font-weight:600;
  letter-spacing:.004em; position:relative; padding-bottom:7px;
}
@media (max-width:980px){ .nav a{ padding:9px 0 8px; width:100%; } }
.nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--rojo); transition: right .2s ease; }
.nav a:hover{ text-decoration:none; color: var(--rojo); }
.nav a:hover::after{ right:0; }
.nav a.activo{ color: var(--rojo); }
.nav a.activo::after{ right:0; }
.nav-toggle{ display:none; background:none; border:1px solid var(--verde-oscuro); color:var(--verde-oscuro); font-size:20px; padding:6px 10px; cursor:pointer; }

@media (max-width:980px){
  /* En pantalla estrecha la barra de utilidad se partía en tres
     líneas y consumía 107 px antes del contenido. Se conserva solo
     el acceso al catálogo; lo demás ya está en el menú y el colofón. */
  .utility-bar .container{ justify-content:center; gap:0; }
  .utility-bar a{ display:none; }
  .utility-bar a.destacado{ display:inline-flex; margin-right:0; }
  .site-header .container{ height:76px; }
  .brand img{ width:46px; height:46px; }
  .brand{ gap:12px; }
  .brand-text strong{ font-size: var(--t-6); }
  .nav{
    position:absolute; top:76px; left:0; right:0; background: var(--pergamino);
    flex-direction:column; align-items:stretch; padding:8px 32px 22px; gap:2px;
    display:none; border-bottom:2px solid var(--dorado);
    box-shadow:0 14px 24px rgba(11,42,25,.14);
  }
  .nav.abierto{ display:flex; }
  .nav-toggle{ display:block; padding:9px 13px; }
}
@media (max-width:420px){
  .site-header .container{ height:72px; padding:0 20px; }
  .brand img{ width:44px; height:44px; }
  .brand-text span{ font-size: var(--t-min); letter-spacing:.06em; }
  .container{ padding:0 20px; }
  .nav{ top:72px; padding-left:20px; padding-right:20px; }
}

/* ---------- Cabecera corrida ---------- */
.running-head{ background: var(--pergamino-2); border-bottom:1px solid var(--pergamino-borde); padding:7px 0; }
.breadcrumb{
  font-family:var(--f-cuerpo); font-size: var(--t-6); font-variant:small-caps; letter-spacing:.04em;
  color:#6b6449; margin:0; max-width:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color:#6b6449; padding:11px 0; display:inline-block; }
.breadcrumb a:hover{ color: var(--rojo); }
.breadcrumb .sep{ color: var(--dorado); }
.breadcrumb .corto{ display:none; }
@media (max-width:620px){
  /* el nombre completo obligaba a partir la miga en dos líneas */
  .breadcrumb .largo{ display:none; }
  .breadcrumb .corto{ display:inline; }
}

/* ===========================================================
   DECLARACIÓN — misión de la Sociedad junto al retrato del
   Libertador. Dos columnas: el texto a la izquierda, alineado a
   bandera, y el óleo enmarcado a la derecha. La alternancia sigue
   en los pliegos siguientes (lámina izquierda, luego derecha).
   =========================================================== */
.declaracion{ padding: var(--ritmo-mayor) 0; }
.declaracion-rejilla{
  display:grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(40px, 5vw, 78px); align-items:center;
}
.declaracion-texto{ max-width:34em; }
.declaracion h1, .declaracion .enunciado{
  font-family: var(--f-display); font-weight:700;
  font-size: var(--t-2); line-height:1.16; letter-spacing:-.012em;
  color: var(--verde-oscuro); max-width:20ch; margin:0 0 26px;
  text-wrap:balance;
}
.declaracion .glosa{
  font-size: var(--t-5); color: var(--tinta-suave);
  max-width:52ch; margin:0 0 8px; text-wrap:pretty;
}

/* ---------- Óleo enmarcado ---------- */
.oleo{ margin:0; }
.oleo-marco{
  position:relative; background: var(--verde-oscuro);
  padding:14px; border:1px solid var(--dorado);
  box-shadow: 0 20px 48px rgba(20,71,42,.20);
}
.oleo-marco::before, .oleo-marco::after{
  content:''; position:absolute; width:26px; height:26px;
  border:2px solid var(--dorado-claro); pointer-events:none; z-index:2;
}
.oleo-marco::before{ top:6px; left:6px; border-right:none; border-bottom:none; }
.oleo-marco::after{ bottom:6px; right:6px; border-left:none; border-top:none; }

.oleo-lienzo{ position:relative; aspect-ratio: 4/5; overflow:hidden; background:#0a2416; }
.oleo-foto{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mientras no exista la reproducción, el marcador va en flujo:
   así el recuadro crece si el texto no cabe en la proporción. */
.oleo-vacio{
  position:relative; min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:30px;
  background-image: repeating-linear-gradient(90deg, rgba(214,178,90,.05) 0 1px, transparent 1px 34px);
}
.oleo-vacio .marca{
  width:76px; height:76px; border-radius:50%;
  background: var(--pergamino); border:1px solid var(--dorado);
  display:flex; align-items:center; justify-content:center; padding:9px; opacity:.4;
}
.oleo-vacio .marca img{ width:100%; height:auto; }
.oleo-vacio .rotulo{
  font-family: var(--f-display); font-style:italic; font-size: var(--t-4);
  color: var(--dorado-claro); max-width:16ch; margin:0; line-height:1.35; text-wrap:balance;
}
.oleo-vacio .nota{
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em;
  font-variant:small-caps; color: rgba(244,239,223,.5);
  margin:0; max-width:30ch; line-height:1.6; text-wrap:balance;
}

.oleo figcaption{
  display:block; margin-top:13px; padding-top:12px;
  border-top:1px solid var(--pergamino-borde);
}
.oleo figcaption .leyenda{
  display:block; font-family: var(--f-cuerpo); font-size: var(--t-6);
  color: var(--tinta-suave); text-wrap:balance;
}
.oleo figcaption .credito{
  display:block; margin-top:4px;
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.04em;
  font-variant:small-caps; color: var(--gris); text-wrap:balance;
}

@media (max-width:900px){
  .declaracion-rejilla{ grid-template-columns:1fr; gap:44px; }
  .declaracion-texto{ max-width:none; }
  .oleo-marco{ max-width:420px; margin:0 auto; }
  .oleo figcaption{ max-width:420px; margin-left:auto; margin-right:auto; }
}

/* ===========================================================
   PLIEGO — bloque editorial a sangre, alternado (patrón APS)
   =========================================================== */
.pliego{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.pliego--invertido .pliego-lamina{ order:2; }
.pliego-texto{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,6vw,82px) clamp(28px,5.4vw,76px);
}
.pliego-texto h2{ margin-bottom:20px; max-width:15ch; }
.pliego-texto p{ color: var(--tinta-suave); font-size: var(--t-cuerpo); max-width:46ch; }
.pliego--oscuro{ background: var(--verde-oscuro); }
.pliego--oscuro h2{ color:#fff; }
.pliego--oscuro p{ color: rgba(244,239,223,.82); }
.pliego--oscuro .enlace-filete{ color: var(--dorado-claro); }
.pliego--oscuro .enlace-filete:hover{ color:#fff; }
@media (max-width:900px){
  .pliego{ grid-template-columns:1fr; }
  .pliego--invertido .pliego-lamina{ order:0; }
  .pliego-texto{ padding:56px 32px; }
}

/* ---------- LÁMINA: marco de archivo, listo para foto real ---------- */
/* La lámina crece si el pie no cabe: antes el marcador iba en
   posición absoluta y a anchos intermedios quedaba recortado. */
.pliego-lamina{ position:relative; min-height:440px; background: var(--pergamino-2); overflow:hidden; display:flex; }
/* Solo la fotografía de la lámina se estira a sangre. Sin el
   combinador de hijo directo, la regla alcanzaba también al emblema
   del marcador y lo sacaba de su disco: aparecía a 546 px. */
.pliego-lamina > img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.lamina-vacia{
  position:relative; flex:1 1 auto; margin:26px;
  border:1px solid var(--pergamino-borde);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px; gap:14px;
}
.lamina-vacia::before, .lamina-vacia::after{
  content:''; position:absolute; width:22px; height:22px; border:1.5px solid var(--dorado);
}
.lamina-vacia::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.lamina-vacia::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.lamina-vacia .marca-disco{
  width:96px; height:96px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; padding:10px; opacity:.5;
}
.lamina-vacia .marca-disco{ position:relative; }
.lamina-vacia .marca-disco img{ position:static; width:100%; height:auto; }
.pliego--oscuro .lamina-vacia .marca-disco,
.pieza-marco .lamina-vacia .marca-disco{ background: var(--pergamino); opacity:.34; }
.lamina-vacia .pie{
  font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em; font-variant:small-caps;
  color: var(--gris); max-width:30ch; line-height:1.6;
}
.pliego--oscuro .pliego-lamina{ background:#0a2416; }
.pliego--oscuro .lamina-vacia{ border-color: rgba(220,185,106,.3); }
.pliego--oscuro .lamina-vacia .pie{ color: rgba(244,239,223,.5); }


/* ===========================================================
   RETRATO INSTITUCIONAL — fotografía solemne del cuerpo de la Sociedad
   Marco de lámina de archivo, listo para recibir la fotografía.
   Para colocarla: sustituir el bloque .retrato-vacio por
     <img class="retrato-foto" src="assets/miembros.jpg" alt="...">
   =========================================================== */
.retrato{ background: var(--pergamino-2); padding: var(--ritmo-mayor) 0; }
.retrato .encabezado{ text-align:center; max-width:640px; margin:0 auto var(--ritmo-menor); }
.retrato .encabezado p{ color: var(--tinta-suave); margin:0 auto; }

.retrato-marco{
  position:relative; max-width:1040px; margin:0 auto;
  background: var(--verde-oscuro);
  padding:18px;
  border:1px solid var(--dorado);
  box-shadow: 0 18px 46px rgba(20,71,42,.18);
}
/* Mientras no haya fotografía, el marco no debe ocupar 602 px de
   vacío: se reduce. Al colocar la imagen recupera el ancho completo. */
.retrato-marco--vacio{ max-width:720px; }
.retrato-marco::before, .retrato-marco::after,
.retrato-marco > i::before, .retrato-marco > i::after{
  content:''; position:absolute; width:30px; height:30px;
  border:2px solid var(--dorado-claro); pointer-events:none; z-index:2;
}
.retrato-marco::before{ top:7px; left:7px; border-right:none; border-bottom:none; }
.retrato-marco::after{ bottom:7px; right:7px; border-left:none; border-top:none; }
.retrato-marco > i::before{ top:7px; right:7px; border-left:none; border-bottom:none; }
.retrato-marco > i::after{ bottom:7px; left:7px; border-right:none; border-top:none; }

.retrato-lienzo{ position:relative; aspect-ratio: 16/9; overflow:hidden; background:#0a2416; }
.retrato-marco--vacio .retrato-lienzo{ overflow:visible; }
.retrato-foto{ width:100%; height:100%; object-fit:cover; display:block; }

/* En flujo normal, no absoluto: en pantalla estrecha el texto del
   marcador desbordaba el recuadro y quedaba cortado. Así la caja
   respeta el 16:9 como mínimo y crece si el texto lo necesita. */
.retrato-vacio{
  position:relative; min-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px; padding:34px;
  background-image: repeating-linear-gradient(90deg, rgba(214,178,90,.05) 0 1px, transparent 1px 38px);
}
.retrato-vacio .marca{
  width:84px; height:84px; border-radius:50%;
  background: var(--pergamino); border:1px solid var(--dorado);
  display:flex; align-items:center; justify-content:center; padding:11px; opacity:.42;
}
.retrato-vacio .marca img{ width:100%; height:auto; }
.retrato-vacio .rotulo{
  font-family: var(--f-display); font-style:italic; font-size: var(--t-4);
  color: var(--dorado-claro); max-width:24ch; margin:0; line-height:1.35; text-wrap:balance;
}
.retrato-vacio .nota{
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em; font-variant:small-caps;
  color: rgba(244,239,223,.5); margin:0; max-width:52ch; line-height:1.6; text-wrap:balance;
}

.retrato-pie{
  max-width:1040px; margin:20px auto 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:28px;
  border-top:1px solid var(--pergamino-borde); padding-top:13px;
}
.retrato-marco--vacio + .retrato-pie{ max-width:720px; }
.retrato-pie .leyenda{
  font-family: var(--f-cuerpo); font-size: var(--t-6); color: var(--tinta-suave);
  margin:0; max-width:62ch; flex:1 1 auto;
}
.retrato-pie .credito{
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em; font-variant:small-caps;
  color: var(--gris); flex:0 0 auto; text-align:right;
}
@media (max-width:760px){
  .retrato{ padding: var(--ritmo-mayor) 0; }
  .retrato-lienzo{ aspect-ratio: 4/3; }
  .retrato-pie{ flex-direction:column; gap:8px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background: var(--verde-oscuro); color: var(--pergamino);
  padding: var(--ritmo-mayor) 0 0; overflow:hidden; border-bottom: 6px double var(--dorado);
}
.hero-marca-agua{
  position:absolute; right:-14%; top:-18%;
  width:58%; max-width:600px; height:auto; opacity:.04;
  filter: grayscale(1) brightness(2.6);
  pointer-events:none;
}
.hero .container{ position:relative; }
.hero h1{
  color: var(--blanco); font-size: var(--t-1);
  max-width:26ch; margin-bottom:0; letter-spacing:-.016em; line-height:1.12;
}
.hero h1 em{ font-style:italic; color: var(--dorado-claro); }
.hero .fila-inferior{ display:grid; grid-template-columns: 1fr auto; gap:48px; align-items:end; margin-top:clamp(26px,4vw,44px); }
.hero p.lead{
  font-size: var(--t-5); line-height:1.6; color: rgba(244,239,223,.86);
  max-width:52ch; margin-bottom:28px; padding-left:26px; border-left:2px solid var(--dorado);
}
.hero .acciones{ padding-left:26px; }

/* El emblema lleva letras negras: sobre fondo oscuro va montado en disco claro.
   No se altera el emblema, solo su soporte. */
.sello{ text-align:center; margin-bottom:-6px; }
.disco{
  width:210px; height:210px; border-radius:50%;
  background: var(--pergamino);
  border:2px solid var(--dorado);
  box-shadow: 0 0 0 6px rgba(182,137,47,.20);
  display:flex; align-items:center; justify-content:center;
  padding:18px; margin:0 auto;
}
.disco img{ width:100%; height:auto; }
@media (max-width:900px){ .disco{ width:170px; height:170px; padding:14px; margin:0; } }

.hero-cifras{ display:flex; margin-top:clamp(34px,5vw,60px); border-top:1px solid rgba(220,185,106,.28); }
.hito{ flex:1; padding:24px 8% 26px 0; border-right:1px solid rgba(220,185,106,.2); }
.hito:last-child{ border-right:none; padding-right:0; }
.hito .cifra{ font-family: var(--f-display); font-size: var(--t-4); color: var(--dorado-claro); font-weight:700; }
.hito .etiqueta{ font-family: var(--f-cuerpo); font-size: var(--t-7); font-variant:small-caps; letter-spacing:.04em;
  color: rgba(244,239,223,.7); margin-top:6px; line-height:1.35; }

@media (max-width:900px){
  .hero .fila-inferior{ grid-template-columns:1fr; }
  .hero h1 em{ margin-left:0; }
  .hero p.lead, .hero .acciones{ padding-left:0; border-left:none; }
  .hero-marca-agua{ display:none; }
  .sello{ text-align:left; margin-top:24px; }
  .sello-centro{ margin-left:0; }
}
@media (max-width:640px){
  .hero-cifras{ flex-wrap:wrap; }
  .hito{ flex:0 0 50%; border-right:none; padding:16px 12px 16px 0; }
}

/* ---------- Historia: manuscrito vertical ---------- */
/* El año iba de marca de agua gigante detrás del titular, pensado
   para la antigua rejilla de dos columnas. Ahora encabeza el bloque
   como una fecha de portada. */
.apertura{ position:relative; margin-bottom:24px; display:flex; flex-direction:column; }
.apertura .fondo-anio{
  order:-1; font-family: var(--f-display); font-weight:700;
  font-size: var(--t-4); letter-spacing:.22em; color: var(--dorado);
  line-height:1; margin-bottom:14px; user-select:none;
}
.apertura h1{ position:relative; font-size: var(--t-2); max-width:18ch; }
.apertura p.lead{ position:relative; font-size: var(--t-5); color: var(--tinta-suave); max-width:56ch; margin:16px 0 0; }

/* Capitular solo en el primer párrafo del cuerpo. Sin el combinador
   de hijo directo alcanzaba también a la entradilla y salían dos. */
.section--apertura > .container > p:first-of-type::first-letter{
  font-family: var(--f-display); font-size:2.9em; font-weight:700; float:left;
  line-height:.78; padding:6px 11px 0 0; color: var(--rojo);
}
.manuscrito{ list-style:none; margin:0; padding:0; border-left:2px solid var(--pergamino-borde); }
.manuscrito li{ position:relative; padding:4px 0 42px 44px; }
.manuscrito li:last-child{ padding-bottom:0; }
.manuscrito .placa{
  position:absolute; left:-24px; top:0; width:48px; height:54px;
  background: var(--verde-oscuro);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  display:flex; align-items:center; justify-content:center;
  color: var(--dorado-claro); font-family:var(--f-cuerpo); font-size: var(--t-min); font-weight:700;
  border:1px solid var(--dorado);
}
.manuscrito .anio{ font-family: var(--f-display); color: var(--rojo); font-weight:700; font-size: var(--t-4); margin-bottom:6px; }
.manuscrito p{ margin:0; font-size: var(--t-cuerpo); color:#3a341f; }

/* Antecedentes: hechos anteriores a la fundación, en tono atenuado
   para no confundir la prehistoria con los actos de la Sociedad. */
/* El numeral de los antecedentes quedaba ilegible: gris claro sobre
   pergamino y sin fondo. Se conserva atenuado pero visible. */
.manuscrito li.antecedente .placa{
  background: var(--pergamino-2); border:1px solid var(--pergamino-borde);
  color: var(--tinta-suave); font-size: var(--t-7);
}
.manuscrito li.antecedente .anio{ color: var(--gris); }
.manuscrito li.antecedente p{ color:#6b6449; }
.manuscrito .rotulo-tramo{
  display:block; font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em;
  font-variant:small-caps; color: var(--dorado); margin-bottom:2px;
}
.manuscrito li.antecedente .rotulo-tramo{ color: var(--gris); }
@media (max-width:640px){
  /* La placa del año colgaba 24 px a la izquierda de la línea y con
     el margen del móvil quedaba fuera de la pantalla. Aquí la
     cronología se alinea al borde del texto. */
  .manuscrito{ margin-left:24px; }
  .manuscrito li{ padding-left:38px; }
  .manuscrito .placa{ left:-22px; width:42px; height:48px; }
}

/* ---------- Pensamiento de Bolívar ----------
   La cita es la pieza mayor del bloque: por encima del h2, que
   actúa de entrada. La medida es lo que estaba roto: 25ch a 24px
   convertía una cita de sesenta palabras en una columna de once
   líneas. Con 40ch cae en cinco o seis. */
.pensamiento{ position:relative; padding: var(--ritmo-mayor) 0; text-align:center; }
.pensamiento .contenido{ position:relative; max-width:860px; margin:0 auto; }
.pensamiento .fleuron{ margin-bottom:26px; }

.pensamiento h2{
  text-align:center; font-size: var(--t-4); font-weight:600;
  color: var(--tinta-suave); margin-bottom:22px;
}
.pensamiento blockquote{
  margin:0 auto 26px; font-family: var(--f-display); font-style:italic;
  font-size: var(--t-3); color: var(--verde-oscuro);
  line-height:1.38; max-width:40ch; text-wrap:balance;
}
.pensamiento .autor{
  font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.08em;
  font-variant:small-caps; color: var(--rojo); font-weight:700;
}
.pensamiento .fuente-doc{
  font-family:var(--f-cuerpo); font-size: var(--t-6); font-style:italic;
  color: var(--gris); margin-top:5px;
}

/* Inscripción: no es un botón, no lleva caja cerrada. */
.pensamiento .cumplido{
  margin:34px auto 0; display:block; max-width:62ch; text-wrap:balance;
  font-family:var(--f-cuerpo); font-size: var(--t-6); letter-spacing:.03em;
  font-variant:small-caps; color: var(--tinta-suave);
  border-top:1px solid var(--pergamino-borde);
  padding:15px 0 0;
}
.pensamiento .cumplido strong{ color: var(--rojo); }

/* Segunda cita: un escalón por debajo de la primera. */
.pensamiento-secundaria{ margin-top: var(--ritmo-menor); padding-top: var(--ritmo-menor); border-top:1px solid var(--pergamino-borde); }
.pensamiento-secundaria blockquote{ font-size: var(--t-4); color: var(--tinta-suave); max-width:46ch; }
.pensamiento-secundaria .nota{
  font-family:var(--f-cuerpo); font-size: var(--t-6); color: var(--gris);
  max-width:56ch; margin:20px auto 0; line-height:1.7;
}

/* ---------- Placa enmarcada (Salón Bolívar) ---------- */
.placa-marco{
  position:relative; background: var(--verde-oscuro);
  background-image: repeating-linear-gradient(90deg, rgba(214,178,90,.05) 0 1px, transparent 1px 34px);
  color: var(--pergamino); padding:72px;
  border:1px solid var(--dorado); outline: 6px solid var(--verde-oscuro); outline-offset: -14px;
}
.placa-marco::before, .placa-marco::after,
.placa-esquinas i::before, .placa-esquinas i::after{ content:''; position:absolute; width:26px; height:26px; border: 2px solid var(--dorado-claro); }
.placa-marco::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.placa-marco::after{ bottom:8px; right:8px; border-left:none; border-top:none; }
.placa-esquinas i::before{ top:8px; right:8px; border-left:none; border-bottom:none; }
.placa-esquinas i::after{ bottom:8px; left:8px; border-right:none; border-top:none; }
.placa-marco .interior{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.placa-marco h1{ color: var(--blanco); font-size: var(--t-2); margin-bottom:18px; }
.placa-marco p{ color: rgba(244,239,223,.85); font-size: var(--t-cuerpo); }
.registro{ border-top:1px solid rgba(220,185,106,.35); padding:0; margin:0; }
.registro li{ list-style:none; display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid rgba(220,185,106,.2); font-family:var(--f-cuerpo); font-size: var(--t-6); }
.registro li span:first-child{ color: var(--dorado-claro); font-variant:small-caps; letter-spacing:.06em; font-size: var(--t-7); }
.registro li strong{ text-align:right; font-family:var(--f-display); font-weight:700; font-size: var(--t-6); color:#fff; }
@media (max-width:900px){ .placa-marco{ padding:36px; } .placa-marco .interior{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:560px){
  .placa-marco{ padding:26px; outline-offset:-10px; }
  .registro li{ flex-direction:column; gap:3px; padding:13px 0; }
  .registro li strong{ text-align:left; }
}

/* ---------- Datos de visita ---------- */
.datos-visita{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--pergamino-borde); }
.dato{ padding:32px 32px 32px 0; border-right:1px solid var(--pergamino-borde); }
.dato:last-child{ border-right:none; }
.dato h3{ font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em; font-variant:small-caps; color: var(--rojo); margin-bottom:8px; }
.dato p{ margin:0; font-size: var(--t-cuerpo); color: var(--tinta-suave); }
@media (max-width:760px){ .datos-visita{ grid-template-columns:1fr; } .dato{ border-right:none; border-bottom:1px solid var(--pergamino-borde); padding-right:0; } }

/* ---------- Cabecera de página ---------- */
.cabecera-indice{ max-width:760px; margin:0 auto clamp(40px,5vw,60px); }
.cabecera-indice h1{ font-size: var(--t-2); margin-bottom:13px; }
.cabecera-indice p{ color: var(--tinta-suave); max-width:56ch; margin:0; }
.cabecera-indice:only-child{ margin-bottom:0; }

/* ---------- Índice editorial ---------- */
.indice{ max-width:900px; margin:0 auto; }
.indice-item{ display:grid; grid-template-columns: 90px 1fr; gap:30px; padding:36px 0; border-bottom:1px solid var(--pergamino-borde); align-items:baseline; }
.indice-item:first-child{ border-top:1px solid var(--pergamino-borde); }
.indice-item .num{ font-family: var(--f-display); font-size: var(--t-3); color: var(--dorado); font-weight:700; }
.indice-item h2{ font-size: var(--t-4); margin-bottom:8px; }
.indice-item .rubro{ font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.06em; font-variant:small-caps; color: var(--rojo); display:block; margin-bottom:8px; }
.indice-item p{ color: var(--tinta-suave); margin:0; font-size: var(--t-cuerpo); }

/* ===========================================================
   ACCESO AL CATÁLOGO — pasarela al sistema Koha
   =========================================================== */
.acceso-catalogo{
  background: var(--verde-oscuro);
  background-image: repeating-linear-gradient(90deg, rgba(214,178,90,.045) 0 1px, transparent 1px 36px);
  color: var(--pergamino);
  border-top:6px double var(--dorado); border-bottom:6px double var(--dorado);
  padding: var(--ritmo-mayor) 0;
}
.acceso-catalogo .encabezado{ text-align:center; max-width:660px; margin:0 auto 34px; }
.acceso-catalogo h1,
.acceso-catalogo h2{ color:#fff; margin-bottom:14px; font-size: var(--t-2); }

/* La consulta del catálogo abre la página: el bloque oscuro va
   inmediatamente bajo la miga de pan y lleva el título de la sección.
   La descripción del fondo queda después, como nota editorial. */
.acceso-catalogo--portada{ border-top:none; }
.nota-fondo{ padding: var(--ritmo-menor) 0; text-align:center; }
.nota-fondo .fleuron{ margin-bottom:22px; }
.nota-fondo p{
  font-size: var(--t-5); color: var(--tinta-suave);
  max-width:62ch; margin:0 auto;
}
.acceso-catalogo .encabezado p{ color: rgba(244,239,223,.84); margin:0 auto; }

.buscador{
  max-width:760px; margin:0 auto;
  display:grid; grid-template-columns: auto 1fr auto; gap:0;
  background: var(--pergamino); border:2px solid var(--dorado);
  padding:6px; align-items:stretch;
}
.buscador select,
.buscador input[type="text"]{
  font-family: var(--f-cuerpo); font-size: var(--t-cuerpo); color: var(--tinta);
  background:transparent; border:none; padding:15px 16px; min-width:0;
}
.buscador select{
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.06em; font-variant:small-caps;
  color: var(--verde-oscuro); border-right:1px solid var(--pergamino-borde);
  cursor:pointer; appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0h10L5 7z' fill='%23b6892f'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.buscador input[type="text"]::placeholder{ color:#9a927a; font-style:italic; }
.buscador input:focus, .buscador select:focus{ outline:2px solid var(--rojo); outline-offset:-2px; }
.buscador button{
  font-family: var(--f-cuerpo); font-weight:600; font-size: var(--t-6);
  letter-spacing:.07em; font-variant:small-caps;
  background: var(--rojo); color: var(--blanco);
  border:none; padding:16px 28px; cursor:pointer; transition: background .2s ease;
  white-space:nowrap;
}
.buscador button:hover{ background: var(--verde-oscuro); }
@media (max-width:640px){
  .buscador{ grid-template-columns:1fr; gap:4px; }
  .buscador select{ border-right:none; border-bottom:1px solid var(--pergamino-borde); }
  .buscador button{ padding:16px; }
}

.acceso-pie{
  text-align:center; margin-top:26px; max-width:none;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:8px 22px;
}
.acceso-pie a{ color: var(--dorado-claro); }
.acceso-pie a:hover{ color:#fff; }
.acceso-pie .aparte{
  font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.06em; font-variant:small-caps;
  color: rgba(244,239,223,.5);
}

/* ===========================================================
   PIEZA DE ARCHIVO — destacado del acervo
   =========================================================== */
.pieza{
  background: var(--verde-oscuro); color: var(--pergamino);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0; align-items:stretch;
  border-top:6px double var(--dorado); border-bottom:6px double var(--dorado);
}
.pieza-marco{ position:relative; min-height:400px; background:#0a2416; display:flex; }
.pieza-texto{ padding: var(--ritmo-mayor) clamp(32px,5vw,72px); display:flex; flex-direction:column; justify-content:center; }
.pieza-texto h2{ color:#fff; margin-bottom:18px; max-width:16ch; }
.pieza-texto p{ color: rgba(244,239,223,.84); font-size: var(--t-cuerpo); }
.pieza-texto .signatura{
  font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em; font-variant:small-caps;
  color: var(--dorado-claro); border-top:1px solid rgba(220,185,106,.3); padding-top:18px; margin-top:12px;
}
@media (max-width:900px){ .pieza{ grid-template-columns:1fr; } .pieza-texto{ padding:48px 32px; } }

/* ===========================================================
   GALERÍA DE RETRATOS — junta directiva
   Un muro de cuadros al modo de las salas de retratos de la Royal
   Society o la American Philosophical Society: marco dorado,
   lienzo vertical y cartela debajo con el nombre y el cargo.
   =========================================================== */
.galeria{ background: var(--pergamino-2); padding: var(--ritmo-mayor) 0;
  border-top:1px solid var(--pergamino-borde); border-bottom:1px solid var(--pergamino-borde); }
/* Cuando la galería abre la página lleva el h1 y no necesita
   filete superior: ya lo pone la cabecera corrida. */
.galeria--portada{ border-top:none; }
.galeria h1{ font-size: var(--t-2); margin-bottom:14px; }
.galeria .encabezado{ text-align:center; max-width:640px; margin:0 auto var(--ritmo-menor); }
.galeria .encabezado p{ color: var(--tinta-suave); margin:0 auto; }

.galeria-muro{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 300px));
  justify-content:center; gap: clamp(34px, 4vw, 58px) clamp(28px, 3.4vw, 52px);
}

.cuadro{ margin:0; }
.cuadro-marco{
  position:relative; background: var(--verde-oscuro);
  padding:11px; border:1px solid var(--dorado);
  box-shadow: 0 14px 34px rgba(20,71,42,.20);
}
/* Escuadras en las cuatro esquinas del marco */
.cuadro-marco::before, .cuadro-marco::after{
  content:''; position:absolute; width:19px; height:19px;
  border:2px solid var(--dorado-claro); pointer-events:none; z-index:2;
}
.cuadro-marco::before{ top:5px; left:5px; border-right:none; border-bottom:none; }
.cuadro-marco::after{ bottom:5px; right:5px; border-left:none; border-top:none; }

.cuadro-lienzo{ position:relative; aspect-ratio: 4/5; overflow:hidden; background:#0a2416;
  outline:1px solid rgba(220,185,106,.32); outline-offset:-1px; }
.cuadro-foto{ width:100%; height:100%; object-fit:cover; display:block; }

.cuadro-vacio{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background-image: repeating-linear-gradient(90deg, rgba(214,178,90,.05) 0 1px, transparent 1px 30px);
}
.cuadro-vacio .marca{
  position:relative; width:62px; height:62px; border-radius:50%;
  background: var(--pergamino); border:1px solid var(--dorado);
  display:flex; align-items:center; justify-content:center; padding:7px; opacity:.34;
}
.cuadro-vacio .marca img{ position:static; width:100%; height:auto; }
.cuadro-vacio .iniciales{
  font-family: var(--f-display); font-weight:700; font-size: var(--t-3);
  color: rgba(220,185,106,.55); letter-spacing:.06em;
}

/* Cartela: la placa del museo bajo el cuadro */
.cartela{
  text-align:center; margin:14px 0 0; padding:11px 4px 0;
  border-top:1px solid var(--pergamino-borde);
}
.cartela strong{
  display:block; font-family: var(--f-display); font-weight:700;
  font-size: var(--t-6); color: var(--verde-oscuro); line-height:1.28; text-wrap:balance;
}
.cartela span{
  display:block; margin-top:4px;
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em;
  font-variant:small-caps; color: var(--rojo);
}

.galeria-nota{
  text-align:center; margin: var(--ritmo-menor) auto 0; max-width:56ch;
  font-family: var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.04em;
  font-variant:small-caps; color: var(--gris); text-wrap:balance;
}

/* ---------- Cronología ---------- */
.cronologia .encabezado{ text-align:center; max-width:600px; margin:0 auto var(--ritmo-menor); }
.cronologia .encabezado p{ color: var(--tinta-suave); margin:0 auto; }

/* ---------- Proclama ---------- */
.proclama{
  position:relative; background: var(--rojo);
  background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 55%);
  color: var(--blanco); text-align:center; padding: var(--ritmo-mayor) 32px;
  border-top:6px double var(--dorado-claro); border-bottom:6px double var(--dorado-claro);
}
.proclama h1.cita{
  font-family: var(--f-display); font-style:italic; font-weight:700; color:#fff;
  font-size: var(--t-4); max-width:23ch; margin:0 auto 22px; line-height:1.36;
}
.proclama .cita::before{ content:'“'; }
.proclama .cita::after{ content:'”'; }
.proclama .fuente{ font-family:var(--f-cuerpo); font-size: var(--t-7); letter-spacing:.05em; font-variant:small-caps; color: rgba(255,255,255,.78); margin:0 auto; max-width:none; }

/* ---------- Footer: colofón ---------- */
.site-footer{ background: var(--verde-oscuro); color: rgba(244,239,223,.78); padding: var(--ritmo-mayor) 0 28px; position:relative; }
.site-footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:6px; background: repeating-linear-gradient(90deg, var(--dorado) 0 18px, transparent 18px 30px); }
.colofon{ text-align:center; max-width:660px; margin:0 auto; }
.colofon-marca{
  width:96px; height:96px; margin:0 auto 22px; border-radius:50%;
  background: var(--pergamino); border:1px solid var(--dorado);
  display:flex; align-items:center; justify-content:center; padding:9px;
}
.colofon-marca img{ width:100%; height:auto; }
.colofon strong{ display:block; font-family: var(--f-display); color:#fff; font-size: var(--t-4); margin-bottom:8px; }
.colofon .tagline{ font-size: var(--t-6); line-height:1.75; color: rgba(244,239,223,.75); margin:0 auto 34px; max-width:52ch; }
.colofon-nav{
  display:flex; flex-wrap:wrap; justify-content:center; row-gap:8px;
  font-family: var(--f-cuerpo); font-variant: small-caps; font-size: var(--t-6);
  margin-bottom:32px; border-top:1px solid rgba(220,185,106,.25); border-bottom:1px solid rgba(220,185,106,.25);
  padding:16px 0;
}
.colofon-nav a{ color: rgba(244,239,223,.85); padding:9px 16px; border-right:1px solid rgba(220,185,106,.25); }
.colofon-nav a:last-child{ border-right:none; }
.colofon-nav a:hover{ color:#fff; text-decoration:none; }
.colofon-direccion{ font-family:var(--f-cuerpo); font-size: var(--t-6); line-height:1.75; color: rgba(244,239,223,.6); margin:0 auto 28px; max-width:none; }
.redes{ display:flex; gap:12px; justify-content:center; margin-bottom:32px; }
.redes a{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(220,185,106,.4);
  display:flex; align-items:center; justify-content:center; color: var(--dorado-claro);
  font-family:var(--f-cuerpo); font-size: var(--t-7); font-weight:700;
}
.redes a:hover{ background: var(--rojo-vivo); border-color: var(--rojo-vivo); color:#fff; text-decoration:none; }
.copy{ text-align:center; font-family:var(--f-cuerpo); font-size: var(--t-min); letter-spacing:.03em; color: rgba(244,239,223,.5); padding-top:24px; border-top:1px solid rgba(220,185,106,.15); max-width:none; }