/* Galería: salas de museo con fondo oscuro */

.pagina-galeria { background: #14100d; color: var(--blanco); }
.pagina-galeria .encabezado { background: rgba(20, 16, 13, 0.92); border-bottom-color: rgba(255, 250, 240, 0.12); }
.pagina-galeria .marca, .pagina-galeria .navegacion a { color: var(--blanco); }
.pagina-galeria .marca small { color: #cbbfae; }
.pagina-galeria .navegacion a:hover { background: rgba(255, 250, 240, 0.1); color: var(--blanco); }
.pagina-galeria .navegacion a[aria-current="page"] { background: var(--cempasuchil); color: var(--tinta); }
.pagina-galeria .menu-boton { background: var(--cempasuchil); color: var(--tinta); }
@media (max-width: 62.5em) {
  .pagina-galeria .navegacion { background: #14100d; border-bottom-color: rgba(255, 250, 240, 0.12); }
}
.pagina-galeria a { color: var(--cempasuchil); }
.pagina-galeria :focus-visible { outline-color: var(--cempasuchil); }

/* Entrada */
.galeria-entrada { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.galeria-entrada .antetitulo { color: var(--cempasuchil); }
.galeria-entrada h1 { font-size: clamp(2.6rem, 7vw, 4.75rem); margin-bottom: 0.3em; }
.galeria-entrada p:not(.antetitulo) { max-width: 44rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #e2d7c6; }
.galeria-entrada p.indicacion { font-size: 0.92rem; color: #cbbfae; }
.galeria-cifras { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.galeria-cifras li { color: #cbbfae; font-size: 0.95rem; }
.galeria-cifras strong { display: block; font-family: var(--fuente-titulos); font-size: 2rem; color: var(--blanco); line-height: 1.1; }
@media (min-width: 900px) {
  .galeria-entrada .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2.5rem, 6vw, 5rem); align-items: end; }
  .galeria-entrada .contenedor > * { grid-column: 1; }
  .galeria-entrada .galeria-cifras {
    grid-column: 2; grid-row: 1 / span 4; align-self: end; flex-direction: column; gap: 1.1rem;
    margin: 0 0 0.4rem; padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid rgba(255, 250, 240, 0.16);
  }
}

/* Mosaico de destacadas */
.mosaico {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(7rem, 13vw, 11rem); grid-auto-flow: dense;
}
.mosaico li { min-width: 0; }
.mosaico li:nth-child(5n + 1) { grid-row: span 2; }
.mosaico li:nth-child(7n + 3) { grid-column: span 2; grid-row: span 2; }
.mosaico a { display: block; height: 100%; overflow: hidden; border-radius: 6px; background: #221b16; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; filter: saturate(1.05); }
.mosaico a:hover img { transform: scale(1.06); filter: saturate(1.2); }
.mosaico a:focus-visible { position: relative; z-index: 1; outline-offset: 2px; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 8rem; }
  .mosaico li:nth-child(7n + 3) { grid-column: span 2; }
}

/* Navegación entre salas */
.salas-nav {
  position: sticky; top: 4rem; z-index: 20;
  background: rgba(20, 16, 13, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 250, 240, 0.1);
}
.salas-nav ul {
  list-style: none; margin: 0 0 0 -0.4rem; padding: 0.6rem 3rem 0.6rem 0.4rem; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin;
  /* Se desvanece a la derecha: hay más salas al deslizar */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}
.salas-nav a {
  display: block; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  color: var(--blanco); border: 1.5px solid rgba(255, 250, 240, 0.25); border-radius: 999px; padding: 0.4rem 0.95rem;
}
.salas-nav a:hover { background: rgba(255, 250, 240, 0.1); color: var(--blanco); }
.salas-nav a[aria-current] { background: var(--cempasuchil); border-color: var(--cempasuchil); color: var(--tinta); }
/* --alto-barras: hasta dónde llegan el encabezado y la barra de salas. js/sitio.js pone la medida exacta; estos valores son
   para cuando no corre */
html:has(.pagina-galeria) { --alto-barras: 8rem; scroll-padding-top: var(--alto-barras); }
/* En computadora caben todas las salas: la barra usa todo el ancho y las salas se acomodan en una o dos filas */
@media (min-width: 1000px) {
  .salas-nav .contenedor { width: calc(100% - 2 * var(--margen)); }
  .salas-nav ul { flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-left: 0; padding: 0.6rem 0; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
  .salas-nav a { font-size: 0.88rem; padding: 0.35rem 0.75rem; }
  html:has(.pagina-galeria) { --alto-barras: 10.5rem; }
}
@media (min-width: 1400px) { html:has(.pagina-galeria) { --alto-barras: 8rem; } }  /* de aquí en adelante, una sola fila */

/* Salas */
.sala { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid rgba(255, 250, 240, 0.08); }
.sala-encabezado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 3rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
@media (max-width: 820px) { .sala-encabezado { grid-template-columns: minmax(0, 1fr); } }
.sala-encabezado h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.sala-encabezado .sala-sub { margin: 0.4rem 0 0; color: var(--cempasuchil); font-family: var(--fuente-titulos); font-style: italic; font-size: 1.15rem; }
.sala-encabezado .sala-texto { margin: 0; color: #e2d7c6; }
.sala-texto > p { margin: 0 0 0.9em; }
.sala-texto > p:last-child { margin-bottom: 0; }
.sala-numero { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #a89a87; margin-bottom: 0.5rem; }

.subsala { margin-top: clamp(2rem, 4vw, 3rem); }
.subsala:first-of-type { margin-top: 0; }
.subsala-titulo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.15rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255, 250, 240, 0.12); padding-bottom: 0.5rem; }
.subsala-titulo h3 { margin: 0; font-size: 1.5rem; }
.subsala-titulo span { color: #a89a87; font-size: 0.95rem; }

/* Subsalas de pocas piezas, lado a lado */
.subsalas-fila { margin-top: clamp(2rem, 4vw, 3rem); }
.subsalas-fila > .subsala:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .subsalas-fila { display: flex; align-items: flex-start; gap: clamp(1.25rem, 2.5vw, 2rem); }
  .subsalas-fila > .subsala { flex: var(--n) 1 0; min-width: 0; margin-top: 0; }
  .subsalas-fila .muro { column-width: auto; column-count: var(--n); }
}

/* Muro de piezas: columnas que respetan la forma de cada foto */
.muro { column-width: 15rem; column-gap: clamp(0.9rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .muro { column-width: 9.5rem; column-gap: 0.75rem; } }
.pieza { break-inside: avoid; margin: 0 0 clamp(1.1rem, 2.5vw, 1.75rem); }
.pieza figure { margin: 0; }
.pieza a { display: block; position: relative; border-radius: 8px; overflow: hidden; background: #221b16; box-shadow: 0 0 0 1px rgba(255, 250, 240, 0.14), 0 10px 30px rgba(0, 0, 0, 0.45); }
.pieza img { width: 100%; height: auto; transition: transform 0.5s ease; }
.pieza a:hover img { transform: scale(1.03); }
.pieza-vistas {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  background: rgba(20, 16, 13, 0.8); color: var(--blanco); font-size: 0.8rem; font-weight: 700;
  border-radius: 999px; padding: 0.2rem 0.6rem;
}
.pieza figcaption { padding: 0.6rem 0.1rem 0; font-size: 0.98rem; line-height: 1.35; }
.pieza figcaption strong { display: block; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.08rem; color: var(--blanco); }
.pieza figcaption span { color: #b9ac99; font-size: 0.9rem; }

/* Visor: tira de vistas de una misma pieza */
.visor-vistas { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.visor-vistas button { padding: 0; width: 3.25rem; height: 3.25rem; border-radius: 6px; overflow: hidden; border: 2px solid transparent; opacity: 0.7; }
.visor-vistas button[aria-pressed="true"] { border-color: var(--cempasuchil); opacity: 1; }
.visor-vistas img { width: 100%; height: 100%; object-fit: cover; }

.galeria-cierre { padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; border-top: 1px solid rgba(255, 250, 240, 0.08); }
.galeria-cierre p { color: #e2d7c6; max-width: 40rem; margin: 0 auto 1.5rem; }

/* Muestra de la galería en la página principal */
.muestra-galeria .mosaico { margin-bottom: 1.75rem; }

/* Desfile: las máscaras avanzan como la cuadrilla de la danza */
.desfile {
  overflow: hidden; padding: 0.5rem 0 clamp(2rem, 4vw, 3rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.desfile-pistas { display: flex; width: max-content; animation: desfile 90s linear infinite; }
.desfile:hover .desfile-pistas, .desfile.pausado .desfile-pistas { animation-play-state: paused; }
/* Con el teclado el desfile se detiene y se recorre deslizando hasta la máscara enfocada */
.desfile.detenido .desfile-pistas { animation: none; }
.desfile-control { display: flex; justify-content: flex-end; margin-top: -0.5rem; }
.desfile-pausa {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  color: var(--blanco); background: transparent; border: 1.5px solid rgba(255, 250, 240, 0.3); border-radius: 999px; padding: 0.35rem 0.9rem;
}
.desfile-pausa:hover { background: rgba(255, 250, 240, 0.1); }
.desfile-pista { display: flex; align-items: flex-end; gap: clamp(1.5rem, 3vw, 2.75rem); padding: 1.5rem clamp(1.5rem, 3vw, 2.75rem) 0 0; margin: 0; list-style: none; }
.desfile a { display: block; border-radius: 8px; }
.desfile img {
  height: clamp(9rem, 22vw, 17rem); width: auto; max-width: none;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.65));
  transition: transform 0.4s ease;
}
.desfile a:hover img, .desfile a:focus-visible img, .desfile-pista[aria-hidden] li:hover img { transform: translateY(-10px) scale(1.04); }
/* la copia del bucle no tiene enlaces, pero al tocarla abre la misma máscara (js/sitio.js) */
.desfile-pista[aria-hidden] li { cursor: pointer; }
@keyframes desfile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .desfile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .desfile-pistas { animation: none; }
  .desfile-pista { padding-left: clamp(1.5rem, 3vw, 2.75rem); }
  .desfile-pista[aria-hidden="true"] { display: none; }
  .desfile-control { display: none; }
}

/* Botones dentro de fondos oscuros: el color de enlace no debe ganarle al del botón */
.seccion-oscura .boton-principal, .pagina-galeria .boton-principal { color: var(--blanco); }
.seccion-oscura .boton-principal:hover, .pagina-galeria .boton-principal:hover { color: var(--blanco); }

/* Portada de cada sala: la foto se acerca al hacer scroll (js/portadas.js). --recorrido: cuántas pantallas dura */
.zoom { --recorrido: 1; position: relative; border-top: 1px solid rgba(255, 250, 240, 0.08); }
.zoom-escena { --alto-escena: 100svh; position: relative; min-height: var(--alto-escena); overflow: hidden; display: grid; place-items: center; }
.zoom-caja {
  position: relative; z-index: 1;
  width: min(100%, calc((var(--alto-escena) - 13rem) * 0.75)); aspect-ratio: 3 / 4; align-self: start;
  transform-origin: 50% 50%; will-change: transform;
}
/* la sombra se compensa una sola vez (--k, --radio-sombra al medir): en cada cuadro solo cambia su opacidad */
.zoom-caja::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radio-sombra, 0);
  box-shadow: 0 0 0 calc(1px * var(--k, 1)) rgba(255, 250, 240, 0.16), 0 calc(24px * var(--k, 1)) calc(48px * var(--k, 1)) rgba(0, 0, 0, 0.5);
  opacity: var(--sombra, 0); will-change: opacity;
}
.zoom-foto { position: relative; margin: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radio-caja, 0); background: #2a211b; }
.zoom-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--foco, 42%); transform-origin: 50% var(--foco, 42%);
  will-change: transform; color: #e9dfcf; font-size: 0.95rem;
}
.zoom-texto {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-height: 100%; overflow: hidden;
  padding: 2.5rem var(--margen) max(1.5rem, env(safe-area-inset-bottom)); color: var(--blanco);
}
.zoom-texto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--texto, 1);
  background: linear-gradient(rgba(20, 16, 13, 0), rgba(20, 16, 13, 0.9) 2.5rem, #14100d 5rem);
}
.zoom-texto .sala-numero { display: block; margin-bottom: 0.3rem; }
.zoom-texto .zoom-nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.12; margin: 0 0 0.3em; color: var(--blanco); max-width: none; }
.zoom-texto p { margin: 0; max-width: 32rem; color: #e2d7c6; font-size: 1.08rem; }
.zoom-texto .sala-sub { margin: 0.1rem 0 0; color: var(--cempasuchil); font-family: var(--fuente-titulos); font-style: italic; font-size: 1.2rem; }
/* en teléfonos, a todo el ancho y con el alto limitado (la foto se recorta un poco con object-fit); el texto va justo
   debajo de la foto. Va después de las reglas base de .zoom-texto para ganarles */
@media (max-aspect-ratio: 1 / 1) and (max-width: 600px) {
  .zoom-escena { --alto-foto: min(calc(100vw * 4 / 3), calc(var(--alto-escena) - 13rem)); }
  .zoom-caja { width: 100%; aspect-ratio: auto; height: var(--alto-foto); }
  .zoom-texto { top: var(--alto-foto); bottom: auto; padding-top: 1.25rem; }
  .zoom-texto::before { display: none; }
}
/* pantallas bajitas (teléfono acostado, zoom grande): el nombre y el subtítulo más chicos para que quepan */
@media (max-height: 500px) {
  .zoom-texto .zoom-nombre { font-size: 1.5rem; }
  .zoom-texto .sala-sub { font-size: 1rem; }
}
/* Debajo de la portada, la sala solo muestra su párrafo: el número, el título y el subtítulo ya están en la portada
   (el título sigue ahí para los lectores de pantalla) */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zoom + .sala { padding-top: clamp(1.75rem, 4vw, 3rem); border-top: 0; }
.zoom + .sala .sala-encabezado { display: block; }
.zoom + .sala .sala-texto { max-width: 46rem; font-size: 1.08rem; }
.zoom-pista {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: max(1.25rem, env(safe-area-inset-bottom)); margin: 0;
  text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #cbbfae; pointer-events: none;
}
.zoom-pista::after { content: ""; display: block; width: 1px; height: 2rem; margin: 0.5rem auto 0; background: currentColor; }
@media (max-height: 500px) { .zoom-pista { display: none; } }
@media (min-aspect-ratio: 1 / 1) {
  .zoom-escena { grid-template-columns: auto minmax(0, 30rem); justify-content: center; column-gap: clamp(2rem, 5vw, 5rem); padding-inline: var(--margen); }
  .zoom-caja { width: auto; height: min(var(--alto-escena), 60vw); align-self: center; }
  /* el relleno absorbe los 16px con que sube el texto (sin desborde falso) y deja ver el anillo de foco */
  .zoom-texto { position: relative; max-height: var(--alto-escena); padding: 1rem var(--margen) 1rem 0.5rem; margin-left: -0.5rem; }
  .zoom-texto::before { display: none; }
}
@media (min-aspect-ratio: 3 / 2) { .zoom-caja { height: var(--alto-escena); } }
.zoom-activo .zoom { height: calc((1 + var(--recorrido)) * 100vh); height: calc((1 + var(--recorrido)) * 100svh); }
.zoom-activo .zoom-escena { position: sticky; top: 0; height: 100vh; height: var(--alto-escena); }
.zoom-activo .zoom-texto > * { opacity: 0; pointer-events: none; will-change: opacity, transform; }
.zoom-activo .zoom-texto::before { opacity: var(--texto, 0); }
html:not(.zoom-activo) .zoom-pista { display: none; }
/* Con «reducir movimiento» las barras no se esconden: la portada cabe debajo de ellas y, en teléfonos, la foto conserva
   su marco 3:4 en lugar de recortarse */
html:not(.zoom-activo) .zoom-escena { --alto-escena: calc(100svh - var(--alto-barras, 8rem)); }
@media (max-aspect-ratio: 1 / 1) and (max-width: 600px) {
  html:not(.zoom-activo) .zoom-caja { width: auto; aspect-ratio: 3 / 4; }
}
/* mientras una escena está fija se esconden el encabezado y la barra de salas; solo el foco del teclado los retiene */
.zoom-activo .encabezado, .zoom-activo .salas-nav { transition: transform 0.3s ease; }
.zoom-activo .encabezado:focus-within, .zoom-activo .salas-nav:focus-within { transition: none; }
.zoom-fijo .encabezado:not(:has(:focus-visible)) { transform: translateY(-100%); }
.zoom-fijo .salas-nav:not(:has(:focus-visible)) { transform: translateY(calc(-100% - 4rem)); }
/* Con el foco en el encabezado o en la barra (fijos arriba), sin scroll-padding: el navegador no mueve la página en cada Tab
   ni la regresa con Shift+Tab a una barra escondida */
html:has(.encabezado:focus-within, .salas-nav:focus-within) { scroll-padding-top: 0; }