/* Variantes de visualización de imágenes (prueba para elegir diseño).
   Se activan con body.am-var-N; la 0 es el diseño original. */

.am-var-activa #gallery { display: none !important; }
.am-var-activa p:has(> #openGallery) { display: none; }
.am-var-activa #galeria { display: block !important; }

.am-var { position: relative; margin: 10px 0 20px; }
.am-var 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-num { font-size: 16px; }

/* ---------- selector (toast) ---------- */
.am-toast {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    z-index: 900; display: flex; align-items: center; gap: 4px;
    max-width: calc(100vw - 32px); overflow-x: auto; white-space: nowrap;
    background: #fff; border: 1px solid #000; padding: 6px 8px;
    font-family: 'SuisseNeueLight', serif; font-size: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.am-toast span { padding: 0 6px 0 2px; }
.am-toast button {
    font: inherit; color: #000; background: transparent; border: 0;
    padding: 3px 7px; cursor: pointer;
}
.am-toast button:hover, .am-toast button[aria-pressed="true"] { background-color: #ffdcc1; }
body:has(.am-toast) { padding-bottom: 70px; }

/* ---------- 1 · collage ---------- */
.am-var-1-root { width: 100%; }
.am-var-1-root figure { position: absolute; margin: 0; transition: transform .25s ease; }
.am-var-1-root figure:hover { z-index: 800 !important; transform: scale(1.03); }
.am-var-1-root img { width: 100%; height: auto; }

/* ---------- tiras (2 · escalonada, 3 · tira, 5 · foco) ---------- */
/* scroll horizontal nativo siempre (táctil, trackpad) con la barra oculta */
.am-viewport {
    position: relative; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.am-viewport::-webkit-scrollbar { display: none; }
.am-track { position: relative; display: flex; width: max-content; box-sizing: content-box; }
.am-track figure { flex: 0 0 auto; margin: 0; position: relative; }
.am-track img { width: 100%; object-fit: cover; }

/* transiciones lentas y suaves para los cambios de tamaño */
.am-track figure { transition: width .9s cubic-bezier(.25, .1, .25, 1); }
.am-track img { transition: height .9s cubic-bezier(.25, .1, .25, 1), opacity .6s ease; }
.am-cap { transition: opacity .6s ease; }
.am-sin-transicion * { transition: none !important; }

/* 2 · escalonada: botones anterior / siguiente */
.am-var-2-root .am-track { align-items: flex-start; }
.am-var-2-root .am-track figure .am-cap { opacity: .45; }
.am-var-2-root .am-track figure.is-foco .am-cap { opacity: 1; }
.am-nav { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 16px; }
.am-nav button { background: transparent; border: 0; padding: 4px 6px; cursor: pointer; line-height: 0; }
.am-nav button:hover { background-color: #ffdcc1; }
.am-contador { min-width: 4.5em; text-align: center; }

/* 3 · tira: avance automático */
.am-var-3-root .am-track { align-items: flex-end; }

/* 5 · foco: sin cambios de tamaño; se atenúan las que no están destacadas */
.am-var-5-root .am-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.am-var-5-root .am-track { align-items: center; }
.am-atenuar .am-track img { opacity: .4; }
.am-atenuar .am-track figure.is-foco img { opacity: 1; }
.am-var-5-root .am-foco-cap { min-height: 3.9em; max-width: 520px; font-size: 16px; line-height: 1.3; margin-bottom: 10px; }

/* ---------- 4 · dividida ---------- */
/* el menú y el submenú quedan a todo el ancho; la división empieza en el contenido */
.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; }
    .am-var-4-root {
        flex: 0 0 50vw; position: sticky; top: 10px; height: calc(100vh - 20px);
        margin: 0; display: flex; gap: 6px;
    }
    .am-split-main { flex: 1 1 auto; }
    .am-split-pila { flex: 1 1 auto; min-height: 0; }
    /* 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; }
    .am-split-thumbs { flex: 0 0 auto; }
}
@media screen and (max-width: 768px) {
    .am-split-wrap { display: flex; flex-direction: column; }
    .am-var-4-root { 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; }
}