/*
 | Muro de fotos del equipo.
 |
 | Llevaba parallax por columnas y se quitó. La razón no fue el efecto en sí:
 | para que las columnas tuvieran recorrido había que meterlas en una ventana
 | de alto fijo, y eso cortaba las fotos a media altura. Se veían techos y
 | pisos en vez de gente, y cada foto quedaba rebanada en un punto distinto
 | según dónde estuviera el scroll. Un muro de fotos existe para que se vean
 | las fotos; el movimiento no valía ese precio.
 |
 | Ahora es una rejilla por columnas de CSS: cada imagen se ve completa, el
 | alto de la sección lo deciden las fotos y no al revés, y no hay nada que
 | calcular en cada cuadro.
 */

.galeria {
    position: relative;
    /* Rompe el ancho del texto y llega casi al borde de la página. */
    width: min(100vw - 36px, 1240px);
    margin: 34px auto 0;
    margin-left: 50%;
    transform: translateX(-50%);

    /*
     | Alto fijo, con las columnas más largas que él.
     |
     | Es lo que da el recorrido al parallax: las columnas sobresalen por
     | arriba y por abajo y se mueven dentro de esta ventana. El tamaño está
     | elegido para que se vean tres fotos de alto y la sección no se coma la
     | página, que era el problema de la primera versión.
     */
    height: clamp(520px, 66vh, 760px);
    overflow: hidden;

    /* Arriba y abajo se funde con el fondo, para que no se vea el corte. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

/*
 | Columnas de CSS en vez de rejilla.
 |
 | Las fotos tienen proporciones distintas —retratos apaisados, verticales de
 | oficina— y `grid` las obligaría a una altura común, que es justo lo que
 | volvía a recortarlas. Con columnas, cada una conserva su forma y el flujo
 | acomoda el resto.
 */
/*
 | Rejilla de tres columnas reales, no `column-count`.
 |
 | El parallax mueve cada columna por separado, y con columnas de CSS no hay
 | un elemento al que aplicarle el transform: son cajas que el navegador arma
 | solo. Cada columna es aquí un div propio.
 */
.galeria__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
}

.galeria__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* El navegador sabe que esto se va a mover: lo pone en su propia capa. */
    will-change: transform;
}

/* La del centro arranca más abajo: rompe la línea recta de arriba. */
.galeria__col--2 { margin-top: 38px; }

.galeria figure { margin: 0; }

.galeria img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12);

    /*
     | Entran ligeramente apagadas y suben al señalarlas.
     |
     | Son de años y cámaras distintas; bajar un punto el brillo las empareja y
     | evita que la más clara se lleve la mirada. El realce convierte el muro en
     | algo que se recorre, no sólo que se mira.
     */
    filter: brightness(.9) saturate(.95);
    transition: filter .3s ease, transform .3s cubic-bezier(.23, 1, .32, 1);
}

.galeria figure:hover img {
    filter: brightness(1.04) saturate(1.05);
    transform: scale(1.012);
}

.galeria__pie {
    margin-top: 18px;
    font-size: 13px;
    color: var(--slate);
}

@media (max-width: 860px) {
    .galeria { width: calc(100vw - 32px); height: clamp(400px, 54vh, 540px); }
    .galeria__cols { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .galeria__col { gap: 10px; }
    .galeria__col--3 { display: none; }
    .galeria__col--2 { margin-top: 26px; }
}

@media (max-width: 460px) {
    .galeria img { border-radius: 10px; }
}

/*
 | Sin movimiento: se suelta el alto y se ven las doce completas.
 |
 | Quitar sólo la animación dejaría las columnas cortadas por el alto fijo y
 | media galería invisible, sin manera de llegar a ella.
 */
@media (prefers-reduced-motion: reduce) {
    .galeria {
        height: auto;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .galeria__col { transform: none !important; will-change: auto; }
    .galeria__col--2 { margin-top: 0; }
    .galeria__col--3 { display: flex; }
    .galeria img { transition: none; }
    .galeria figure:hover img { transform: none; }
}