/* Galerías de fotos reales (29-sep-2026) · Mario: fotos de alumnos en clase y del taller.
   Dos bloques: "Así se aprende aquí" (gente y enseñanza) y "Nuestro taller" (bancos de práctica).
   Mosaico con CSS grid: la primera foto manda y las demás la acompañan; en móvil todo a una columna. */

.galeria{margin-top:28px}
.galeria .eyebrow{color:var(--muted)}
.galeria h2{font-size:32px;margin:0 0 10px}
.galeria>p{color:var(--muted);font-size:15px;max-width:720px;margin:0 0 22px}

/* dense: rellena los huecos que dejan las fotos anchas/altas en vez de dejar blancos. */
.gal-mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:12px}
/* El taller son 5 fotos: a 3 columnas, con la primera ancha, la retícula cierra exacta. */
.galeria.taller .gal-mosaico{grid-template-columns:repeat(3,1fr)}
.gal-foto{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.gal-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* La foto destacada ocupa dos columnas y dos filas: es la que cuenta la historia. */
.gal-foto.ancha{grid-column:span 2}
.gal-foto.alta{grid-row:span 2}
.gal-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;
  background:linear-gradient(transparent,rgba(4,22,45,.88));color:#fff;font-size:13.5px;font-weight:600;line-height:1.35}

/* Bloque del taller: fondo oscuro para que el equipo metálico resalte. */
.galeria.taller{padding:36px;border-radius:14px;background:var(--navy);border-top:3px solid var(--blue)}
.galeria.taller .eyebrow{color:#a8c7ee}
.galeria.taller h2{color:#fff}
.galeria.taller>p{color:#c8d9ed}
.galeria.taller .gal-foto{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}

@media (max-width:900px){
  .gal-mosaico{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal-foto.alta{grid-row:auto}
  .galeria h2{font-size:27px}
}
@media (max-width:560px){
  .gal-mosaico{grid-template-columns:1fr}
  .gal-foto.ancha{grid-column:auto}
  .galeria.taller{padding:26px 20px}
}