/* ==========================================================================
   PAGINA DE CADA OBJETO (galerias/<grupo>/<id>/index.html, dev/paginas_seo.py)
   Reutiliza los colores de galerias.css.
   ========================================================================== */
.pg-cab, .pg-main { max-width: 1100px; margin: 0 auto; padding: 18px 18px 0; }
.pg-migas { font-size: 13px; color: var(--tenue); margin-bottom: 10px; }
.pg-migas a { color: var(--tenue); text-decoration: none; }
.pg-migas a:hover { color: var(--acento); }
.pg h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); }
.pg-tipo { margin: 4px 0 10px; color: var(--acento); font-weight: 700; }
.pg-lead { margin: 0; max-width: 820px; color: #d6dcea; font-size: 16px; line-height: 1.6; }
.pg-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.pg-btn { display: inline-block; padding: 10px 16px; border-radius: 22px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 14px; }
.pg-btn:hover { border-color: var(--acento); }
.pg-prim { background: var(--acento); color: #1a1206; border-color: var(--acento); }
.pg h2 { font-size: 20px; margin: 26px 0 10px; }
.pg-ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; max-width: 720px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.pg-ficha dt { color: var(--tenue); }
.pg-ficha dd { margin: 0; }
.pg-nota { margin: 0 0 12px; font-size: 13px; font-style: italic; color: #b9a8ff; }
.pg-rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pg-rejilla figure { margin: 0; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.pg-rejilla img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #05080f; }
.pg-rejilla figcaption { padding: 8px 10px 10px; font-size: 12.5px; color: var(--tenue); line-height: 1.4; }
.pg-vecinos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-vecinos a { display: inline-block; padding: 6px 12px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-size: 14px; }
.pg-vecinos a:hover { border-color: var(--acento); }
/* indice estatico al pie de galerias.html */
.gl-indice { max-width: 1100px; margin: 10px auto 0; padding: 0 18px; }
.gl-indice h2 { font-size: 15px; margin: 18px 0 8px; color: var(--tenue); }
.gl-indice ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
@media (max-width: 640px) {
  .pg-rejilla { grid-template-columns: 1fr; }
  .pg-ficha dl { grid-template-columns: 1fr; gap: 2px; }
  .pg-ficha dd { margin-bottom: 6px; }
}