/* Galería dividida: texto e imagen fija al costado (obras a la izquierda, colaboraciones
   a la derecha). Sin JavaScript queda la galería original de miniaturas. */

.am-dividida #gallery { display: none !important; }
.am-dividida p:has(> #openGallery) { display: none; }

.am-split img { display: block; cursor: pointer; user-select: none; -webkit-user-drag: none; }
.am-cap { font-size: 16px; line-height: 1.25; margin-top: 6px; color: #000; }

.am-split-main { display: flex; flex-direction: column; min-width: 0; }
.am-split-pila { position: relative; }
.am-split-pila img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.am-split-pila img.is-active { opacity: 1; }
.am-split-thumbs { display: grid; gap: 6px; align-content: start; }
.am-split-thumbs img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .15s; }
.am-split-thumbs img:hover, .am-split-thumbs img.is-active { opacity: 1; }

@media screen and (min-width: 769px) {
    .am-split-wrap { display: flex; align-items: flex-start; gap: 20px; }
    .am-split-texto { flex: 1 1 auto; min-width: 0; }
    /* top y height los fija el script según dónde arranca el contenido */
    .am-split { flex: 0 0 50vw; position: sticky; display: flex; gap: 6px; }
    .am-split-main { flex: 1 1 auto; }
    .am-split-pila { flex: 1 1 auto; min-height: 0; }
    .am-split-thumbs { flex: 0 0 auto; }
    /* imagen pegada a la columna de miniaturas: sin espacio en blanco entre ambas */
    .am-split-pila img { object-position: right top; }
    .am-split-main .am-cap { text-align: right; }

    /* obras: imagen a la izquierda, con las miniaturas contra el borde */
    .am-split-izq { flex-direction: row-reverse; }
    .am-split-izq .am-split { flex-direction: row-reverse; }
    .am-split-izq .am-split-pila img { object-position: left top; }
    .am-split-izq .am-split-main .am-cap { text-align: left; }
}
@media screen and (max-width: 768px) {
    .am-split-wrap { display: flex; flex-direction: column; }
    .am-split { order: -1; display: flex; flex-direction: column; gap: 6px; margin: 10px 0 20px; }
    .am-split-pila { height: 60vh; }
    .am-split-pila img { object-position: center top; }
    .am-split-thumbs { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
    .am-split-thumbs img { aspect-ratio: 1; }
}