/* ==========================================================================
   PÁGINA — Proyectos
   ========================================================================== */

.galeria { padding-top: clamp(2.5rem, 2rem + 2.8vw, 4rem); }

.galeria__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4) var(--e-6);
  padding-bottom: var(--e-5);
  margin-bottom: var(--e-7);
  border-bottom: 1px solid var(--borde);
}

/* ==================================================================== FILTRO */

.filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.filtro__boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--gris-500);
  box-shadow: inset 0 0 0 1px var(--gris-200);
  transition: color var(--d-rapido) var(--ease-out),
              box-shadow var(--d-rapido) var(--ease-out),
              background-color var(--d-rapido) var(--ease-out),
              transform var(--d-pulso) var(--ease-out);
}

.filtro__boton:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .filtro__boton:hover { color: var(--gris-900); box-shadow: inset 0 0 0 1px var(--borde-fuerte); }
}

.filtro__boton[aria-pressed='true'] {
  color: var(--gris-900);
  background: var(--naranja-500);
  box-shadow: inset 0 0 0 1px var(--naranja-500);
}

.filtro__cuenta {
  font-family: var(--fuente-cota);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gris-500);
  font-variant-numeric: tabular-nums;
}
/* La jerarquía entre etiqueta y cuenta la dan el cuerpo y el tamaño;
   bajar la opacidad dejaba la cifra en 3.6:1 sobre el naranja. */
.filtro__boton[aria-pressed='true'] .filtro__cuenta { color: var(--gris-900); }

/* =================================================================== REJILLA
   Tres columnas con la segunda desplazada: el ritmo se rompe sin perder
   la alineación de la retícula. */

.galeria__rejilla {
  display: grid;
  gap: clamp(var(--e-5), 3vw, var(--e-7)) clamp(var(--e-5), 2.4vw, var(--e-6));
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .galeria__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .galeria__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria__rejilla > .obra:nth-child(3n + 2) { transform: translateY(var(--e-7)); }
}

.galeria__rejilla .obra__marco { --chaflan: 16px; }
.galeria__rejilla .obra__nota { max-width: 32ch; }

/* El escalonado se reinicia cada tres piezas para que la cascada no se
   alargue indefinidamente en una galería larga. */
.galeria__rejilla > *:nth-child(3n + 1) { --revelar-retraso: 0ms; }
.galeria__rejilla > *:nth-child(3n + 2) { --revelar-retraso: 50ms; }
.galeria__rejilla > *:nth-child(3n + 3) { --revelar-retraso: 100ms; }

@media (prefers-reduced-motion: reduce) {
  .galeria__rejilla > .obra:nth-child(3n + 2) { transform: none; }
}