/* Galería de cursos realizados: mosaico y visor ampliado.
   Lo usan index.html (adelanto, sección #galeria) y galeria.html (galería completa por curso).
   Cada página define las variables --navy-dark, --gold, --gold-light y --ease. */
.galeria-section { background: var(--navy-dark) }
.galeria-section .section-header h2 { color: white }
.galeria-section .section-header p { color: rgba(255,255,255,0.72); max-width: 560px; margin: 0 auto }
.galeria-cursos { display: grid; gap: 64px }
.galeria-curso { min-width: 0 }
.galeria-curso-head { text-align: center; margin-bottom: 24px }
.galeria-curso-head :is(h2, h3) { font-family: 'Playfair Display', serif; font-size: 22px; line-height: 1.3; color: white; max-width: 760px; margin: 0 auto 8px }
.galeria-curso-head p { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.6; color: var(--gold-light); text-wrap: balance }
/* Filas justificadas: cada foto declara su proporción en --r (ancho / alto) y ninguna se recorta */
.galeria-fotos { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px }
.galeria-foto { flex: var(--r) 1 calc(var(--r) * 230px); max-width: calc(var(--r) * 320px); position: relative; aspect-ratio: var(--r); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.06) }
.galeria-foto span { position: absolute; left: 10px; bottom: 10px; padding: 5px 11px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy-dark); background: var(--gold); border-radius: 999px; pointer-events: none }
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease) }
@media (hover: hover) and (pointer: fine) { .galeria-foto:hover img { transform: scale(1.04) } }
.galeria-foto:focus-visible { outline-offset: -2px } /* hacia adentro: la tira del celular recortaría un borde exterior */
@media (max-width: 700px) {
  /* En el celular cada curso es una tira que se desliza hacia el lado */
  .galeria-fotos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent }
  .galeria-foto { flex: 0 0 auto; height: 250px; max-width: none; scroll-snap-align: start }
}
html:has(.galeria-visor[open]) { overflow: hidden }
.galeria-visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: 16px; border: 0; background: rgba(13,21,36,0.97); flex-direction: column; align-items: center; gap: 12px; touch-action: pan-y pinch-zoom; overscroll-behavior: contain }
.galeria-visor[open] { display: flex; animation: galeria-visor-abre 0.3s var(--ease) }
@keyframes galeria-visor-abre { from { opacity: 0 } }
.galeria-visor::backdrop { background: none }
.galeria-visor figure { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size }
.galeria-visor img { max-width: 100%; max-height: 100%; height: min(100cqh, 100cqw / var(--r)); width: auto; max-width: none; aspect-ratio: var(--r); border-radius: 6px; background: rgba(255,255,255,0.06); user-select: none }
.galeria-visor-pie { min-height: 42px; max-width: 640px; font-size: 14px; line-height: 1.5; text-align: center; color: rgba(255,255,255,0.85) }
.galeria-visor-pie b { margin-right: 8px; color: var(--gold-light); font-variant-numeric: tabular-nums }
.galeria-visor button { position: absolute; border: 0; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(22,34,56,0.78); color: white; transition: background 0.25s var(--ease), color 0.25s var(--ease) }
.galeria-visor button:hover { background: var(--gold); color: var(--navy-dark) }
.galeria-visor-cerrar { top: 16px; right: 16px }
.galeria-visor-ant, .galeria-visor-sig { top: calc(50% - 24px) }
.galeria-visor-ant { left: 16px }
.galeria-visor-sig { right: 16px }