.cat-cabecera { padding: clamp(4rem,10vh,7rem) var(--margen) 3rem; max-width: var(--ancho-max); margin-inline: auto; }
.cat-cabecera h1 { font-size: var(--display-l); margin: .6rem 0 1rem; }
.cat-intro { max-width: 60ch; color: var(--tinta-tenue); font-size: var(--texto-m); }
.cat-intro code { font-family: var(--tipo-mono); color: var(--acento-texto); font-size: .85em; }
.cat-pie { padding: 3rem var(--margen) 5rem; max-width: var(--ancho-max); margin-inline: auto; }
.cat-pie p { max-width: 70ch; line-height: 1.8; }

.rotulo {
  max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--margen) .75rem;
  font-family: var(--tipo-mono); font-size: var(--etiqueta);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-tenue);
}
.pista {
  max-width: var(--ancho-max); margin: 0 auto 5rem;
  padding: 1rem var(--margen) 0; color: var(--tinta-tenue); font-size: var(--texto-s);
  border-top: 1px solid var(--linea-tenue);
}

.escena-flip {
  position: relative;
  width: 100%; height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}
.galeria { position: relative; width: 100%; height: 100%; }
.pieza {
  position: relative; overflow: hidden;
  border-radius: var(--radio); background: var(--fondo-alto);
  flex: none;
}
.pieza > .dentro {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}
.leyenda {
  position: absolute; z-index: 20;
  font-family: var(--tipo-display); font-weight: 600;
  letter-spacing: var(--apretado); line-height: 1.1;
  color: var(--tinta); pointer-events: none;
}
.leyenda em { font-style: normal; color: var(--acento-texto); }

.galeria--fila {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 2vw, 2rem);
  --alto: 22vh;
}
.galeria--fila .pieza { width: auto; aspect-ratio: 2/3; height: var(--alto); }
.galeria--fila .pieza--m  { height: calc(var(--alto) * 1.35); }
.galeria--fila .pieza--l  { height: calc(var(--alto) * 2.1); }
.galeria--fila .pieza--xl { height: calc(var(--alto) * 2.9); z-index: 10; }
.cambia.galeria--fila .pieza--m,
.cambia.galeria--fila .pieza--l,
.cambia.galeria--fila .pieza--xl { height: var(--alto); }
.galeria--fila .leyenda {
  left: 0; bottom: -46vh; width: 100%; padding: 0 var(--margen);
  font-size: clamp(1.6rem, 4vw, 3rem); opacity: 0; text-align: center;
}
.cambia.galeria--fila .leyenda { bottom: 12%; opacity: 1; }

.galeria--converge {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1vw; padding: 6vh 2vw;
}
.galeria--converge .pieza { aspect-ratio: 1; width: 100%; height: auto; filter: brightness(.55) saturate(.5); }
.cambia.galeria--converge { grid-template-columns: 1fr min(340px, 62vw) 1fr; grid-template-rows: 1fr 58vh 1fr; gap: 0; padding: 0; }
.cambia.galeria--converge .pieza { grid-area: 2 / 2 / 3 / 3; aspect-ratio: auto; width: 100%; height: 100%; filter: brightness(1) saturate(1); }
.galeria--converge .p1  { grid-area: 1 / 1; }
.galeria--converge .p2  { grid-area: 1 / 3; }
.galeria--converge .p3  { grid-area: 1 / 6; }
.galeria--converge .p4  { grid-area: 1 / 9; }
.galeria--converge .p5  { grid-area: 2 / 2; }
.galeria--converge .p6  { grid-area: 2 / 5; }
.galeria--converge .p7  { grid-area: 2 / 8; }
.galeria--converge .p8  { grid-area: 2 / 10; }
.galeria--converge .p9  { grid-area: 3 / 1; }
.galeria--converge .p10 { grid-area: 3 / 4; }
.galeria--converge .p11 { grid-area: 3 / 7; }
.galeria--converge .p12 { grid-area: 4 / 2; }
.galeria--converge .p13 { grid-area: 4 / 6; }
.galeria--converge .p14 { grid-area: 4 / 9; }

.galeria--converge .leyenda {
  left: 0; bottom: 6%; width: 100%; text-align: center;
  padding-inline: var(--margen);
  font-size: clamp(1.7rem, 5vw, 4rem); opacity: 0;
}
.cambia.galeria--converge .leyenda { opacity: 1; }

.galeria--baraja {
  display: grid; grid-template-columns: repeat(6, 1fr);
  align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem);
  padding-inline: var(--margen);
}
.galeria--baraja .pieza { width: 100%; aspect-ratio: 3/4; border-radius: 6px; z-index: 1; }

.galeria--baraja .pieza:nth-child(1) { z-index: 6; }
.galeria--baraja .pieza:nth-child(2) { z-index: 5; }
.galeria--baraja .pieza:nth-child(3) { z-index: 4; }
.galeria--baraja .pieza:nth-child(4) { z-index: 3; }
.galeria--baraja .pieza:nth-child(5) { z-index: 2; }

.cambia.galeria--baraja {
  grid-template-columns: min(30vw, 360px);
  justify-content: center; align-content: center;
}
.cambia.galeria--baraja .pieza { grid-area: 1 / 1 / 2 / 2; }
.cambia.galeria--baraja .pieza:nth-child(2) { transform: scale(.965); filter: brightness(.72); }
.cambia.galeria--baraja .pieza:nth-child(3) { transform: scale(.93);  filter: brightness(.56); }
.cambia.galeria--baraja .pieza:nth-child(4) { transform: scale(.895); filter: brightness(.42); }
.cambia.galeria--baraja .pieza:nth-child(5) { transform: scale(.86);  filter: brightness(.3); }
.cambia.galeria--baraja .pieza:nth-child(6) { transform: scale(.825); filter: brightness(.2); }

.galeria--baraja .leyenda {
  left: 100vw; bottom: 8%; width: 100vw; text-align: center;
  padding-inline: var(--margen); opacity: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.3;
}
.cambia.galeria--baraja .leyenda { left: 0; opacity: 1; }

.galeria--bento {
  display: grid; gap: 1vh;
  grid-template-columns: repeat(3, 30vw);
  grid-template-rows: repeat(4, 21vh);
  justify-content: center; align-content: center;
}
.cambia.galeria--bento {
  grid-template-columns: repeat(3, 100vw);
  grid-template-rows: repeat(4, 48vh);
  gap: 12vh;
}
.galeria--bento .pieza:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.galeria--bento .pieza:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.galeria--bento .pieza:nth-child(3) { grid-area: 2 / 2 / 4 / 3; }
.galeria--bento .pieza:nth-child(4) { grid-area: 1 / 3 / 3 / 4; }
.galeria--bento .pieza:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
.galeria--bento .pieza:nth-child(6) { grid-area: 3 / 3 / 5 / 4; }
.galeria--bento .pieza:nth-child(7) { grid-area: 4 / 1 / 5 / 2; }
.galeria--bento .pieza:nth-child(8) { grid-area: 4 / 2 / 5 / 3; }
.galeria--bento .leyenda {
  left: 50%; top: 50%; margin: 100vh 0 0 -50vw; width: 100vw;
  text-align: center; font-size: clamp(2rem, 8vw, 6rem);
}
.cambia.galeria--bento .leyenda { margin-top: -50vh; }

.sin-movimiento .escena-flip { height: auto; padding-block: 3rem; }
.sin-movimiento .galeria {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: none !important;
  gap: .6rem !important; padding: 0 var(--margen) !important; width: 100% !important;
}
.sin-movimiento .pieza {
  grid-area: auto !important; aspect-ratio: 4/3 !important;
  width: 100% !important; height: auto !important;
  transform: none !important; filter: none !important; z-index: auto !important;
}
.sin-movimiento .leyenda {
  position: static !important; transform: none !important;
  opacity: 1 !important; margin: 1.2rem 0 0 !important;
  grid-column: 1 / -1; text-align: left !important;
  font-size: clamp(1.4rem, 5vw, 2rem) !important;
  width: auto !important; padding: 0 !important;
  left: auto !important; bottom: auto !important; top: auto !important;
}