/* PRECURSORES.CSS — galería de precursores de la Independencia (usa variables de portada.css) */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px}
.filtro{font:600 .85rem var(--cuerpo);border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);padding:8px 15px;border-radius:999px;cursor:pointer;transition:var(--tr)}
.filtro:hover{border-color:var(--rojo);color:var(--rojo)}
.filtro[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:#fff}
.filtro .n{opacity:.6;font-weight:500;margin-left:4px}
.buscar{margin-left:auto;flex:1 1 220px;max-width:320px;position:relative}
.buscar input{width:100%;font:500 .92rem var(--cuerpo);padding:9px 14px 9px 38px;border:1px solid var(--linea);border-radius:999px;background:var(--blanco);color:var(--tinta)}
.buscar input:focus{outline:2px solid var(--rojo);outline-offset:1px;border-color:transparent}
.buscar svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--suave);stroke-width:2}
.contador{font-size:.85rem;color:var(--suave);margin:-8px 0 18px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.pieza{margin:0;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;transition:var(--tr)}
.pieza:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:#d9c9c9}
.pieza[hidden]{display:none}
.pieza .abrir{all:unset;display:block;cursor:zoom-in;position:relative;aspect-ratio:3/4;background:#1d1d1d;overflow:hidden}
.pieza .abrir:focus-visible{outline:3px solid var(--rojo);outline-offset:-3px}
.pieza .abrir img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;transition:transform .35s ease}
.pieza:hover .abrir img{transform:scale(1.05)}
.pieza .abrir::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(to right,var(--rojo) 0 60%,var(--negro) 60% 100%)}
.pieza .lupa{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(20,20,20,.62);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--tr)}
.pieza .lupa svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2}
.pieza:hover .lupa,.pieza .abrir:focus-visible .lupa{opacity:1}
.pieza figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pieza .etq{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rojo)}
.pieza h3{font-size:.98rem;margin:0}
.pieza .bio{margin-top:auto;padding-top:6px;font-size:.78rem;font-weight:700;color:var(--tinta);text-transform:uppercase;letter-spacing:.05em}
.pieza .bio:hover{color:var(--rojo)}
.vacio{display:none;text-align:center;color:var(--suave);padding:40px 0}
.vacio.visible{display:block}
/* Tarjetas de biografías */
.lista-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:22px}
.ficha-link{display:flex;gap:14px;align-items:center;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:10px;color:var(--tinta);transition:var(--tr)}
.ficha-link:hover{border-color:var(--rojo);transform:translateY(-2px);box-shadow:var(--sombra)}
.ficha-link img{width:58px;height:72px;object-fit:cover;object-position:center 20%;border-radius:var(--radio-s);flex:none}
.ficha-link strong{display:block;font-family:var(--display);font-size:.98rem;line-height:1.2}
.ficha-link span{display:block;font-size:.8rem;color:var(--suave);line-height:1.35;margin-top:3px}
/* Ficha biográfica */
.ficha{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start}
.ficha-lado{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px}
.ficha-lado .abrir{all:unset;display:block;cursor:zoom-in;border-radius:var(--radio);overflow:hidden;background:#1d1d1d;border-top:5px solid var(--rojo);box-shadow:var(--sombra)}
.ficha-lado .abrir:focus-visible{outline:3px solid var(--rojo)}
.ficha-lado .abrir img{width:100%;height:auto;display:block}
.ficha-lado .miniaturas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ficha-lado .miniaturas .abrir{border-top-width:3px;aspect-ratio:3/4}
.ficha-lado .miniaturas img{height:100%;object-fit:cover;object-position:center 20%}
.ficha-lado .nota{font-size:.8rem;color:var(--suave);margin:0}
.ficha-texto{max-width:760px}
.ficha-texto p{margin:0 0 1.05em}
.ficha-texto h2{margin-top:1.4em;font-size:1.3rem}
.ficha-texto .autor{font-size:.85rem;color:var(--suave);font-style:italic}
.ficha-texto .biblio{font-size:.85rem;color:var(--texto);border-left:3px solid var(--linea);padding-left:14px}
.ficha-texto .antigua{background:var(--blanco);border:1px solid var(--linea);border-left:4px solid var(--rojo);border-radius:var(--radio-s);padding:12px 16px;font-size:.88rem;margin:0 0 22px}
.ficha-texto .dialogo{padding-left:14px;border-left:2px solid var(--linea);font-style:italic}
.nav-fichas{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--linea)}
.nav-fichas a{font-weight:700;color:var(--tinta);font-size:.92rem}
.nav-fichas a:hover{color:var(--rojo)}
.nav-fichas small{display:block;font-weight:500;color:var(--suave);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.relacionados{margin-top:26px;padding:16px 18px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio)}
.relacionados h3{font-size:.95rem;margin-bottom:6px}
.relacionados a{display:inline-block;margin:2px 14px 2px 0;font-size:.9rem}
@media(max-width:820px){.ficha{grid-template-columns:1fr;gap:24px}.ficha-lado{position:static;max-width:380px}.buscar{margin-left:0;max-width:none}}
@media(max-width:520px){.galeria{grid-template-columns:repeat(2,1fr);gap:10px}.pieza figcaption{padding:9px 10px 11px}.pieza h3{font-size:.86rem}}
/* Visor con zoom */
.visor{position:fixed;inset:0;z-index:9999;background:rgba(12,12,12,.985);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;color:#eee}
.visor.activo{opacity:1;visibility:visible}
.visor-barra{display:flex;align-items:center;gap:8px;padding:12px 14px}
.visor-cuenta{font:600 .85rem var(--cuerpo);color:#aaa;margin-right:auto;padding-left:6px}
.visor button{border:0;background:rgba(255,255,255,.1);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--tr)}
.visor button:hover{background:var(--rojo)}
.visor button:focus-visible{outline:2px solid #fff}
.visor button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
.visor-escena{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none}
.visor-escena img{max-width:none;max-height:none;border-top:5px solid var(--rojo);border-radius:6px;box-shadow:0 24px 60px -12px rgba(0,0,0,.8);transform-origin:center center;transition:transform .25s ease;cursor:zoom-in;will-change:transform}
.visor-escena.zoom img{cursor:grab}
.visor-escena.arrastrando img{cursor:grabbing;transition:none}
.visor .prev,.visor .sig{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;z-index:2}
.visor .prev{left:14px}.visor .sig{right:14px}
.visor-pie{padding:12px 20px 18px;text-align:center;max-width:900px;margin:0 auto}
.visor-pie strong{display:block;font-family:var(--display);font-size:1.08rem;color:#fff}
.visor-pie span{display:block;font-size:.86rem;color:#b9b9b9;margin-top:3px}
.visor-pie a{display:inline-block;margin-top:8px;color:#fff;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--rojo)}
@media(max-width:600px){.visor .prev,.visor .sig{top:auto;bottom:6px;transform:none;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.visor,.visor-escena img,.pieza,.pieza .abrir img{transition:none}}
.hero-int p.vida{font-size:.92rem;color:#a3a3a3;margin-top:8px;letter-spacing:.01em}
.visor [hidden]{display:none!important}

/* Mosaico de fotografías */
.galeria.mosaico{display:block;columns:270px;column-gap:16px}
.galeria.mosaico .pieza{break-inside:avoid;margin:0 0 16px;display:flex}
.galeria.mosaico .pieza .abrir{aspect-ratio:auto;background:#eee}
.galeria.mosaico .pieza .abrir img{height:auto;object-fit:contain}
.galeria.mosaico .pieza:hover .abrir img{transform:scale(1.03)}
.galeria.mosaico .pieza h3{font-size:.86rem;font-weight:600;line-height:1.35;font-family:var(--cuerpo);color:var(--tinta)}
.intro-galeria{max-width:840px;margin:0 0 26px}
.intro-galeria p{margin:0 0 .9em}
.credito{font-size:.85rem;color:var(--suave);margin-top:26px}
@media(max-width:520px){.galeria.mosaico{columns:2;column-gap:10px}.galeria.mosaico .pieza{margin-bottom:10px}}