/* ============================================================
   EDUKA · 04 · galería
   Tres carriles infinitos con velocidades distintas; el del medio
   va al revés. Las fotos las inyecta js/galeria.js desde el
   manifiesto, en 4 copias, y el keyframe corre exactamente 1/4.
   ============================================================ */

.galeria{background:var(--verde);color:var(--crema);padding:clamp(70px,10vw,130px) 0 clamp(80px,11vw,150px);overflow:hidden}

.gal-head{padding:0 var(--pad);margin-bottom:clamp(36px,5vw,64px)}
.gal-title{font-size:clamp(34px,4.4vw,62px);color:var(--crema-alta);font-style:italic}

.lane{overflow:hidden;margin-bottom:clamp(12px,1.4vw,20px)}
.lane-track{display:flex;width:max-content}
@keyframes laneSlide{to{transform:translateX(-25%)}}
.lane-1 .lane-track{animation:laneSlide 46s linear infinite}
.lane-2 .lane-track{animation:laneSlide 62s linear infinite reverse}
.lane-3 .lane-track{animation:laneSlide 36s linear infinite}

.lane figure{margin:0 clamp(12px,1.4vw,20px) 0 0;position:relative;flex:0 0 auto;cursor:zoom-in}
.lane figure:focus-visible{outline:1px solid var(--fuego);outline-offset:3px}
.lane img{height:clamp(180px,26vw,300px);width:auto;object-fit:cover;filter:saturate(.94)}
.lane figcaption{
  position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crema-alta);opacity:0;transition:opacity .4s ease;
  background:rgba(44,53,39,.6);padding:5px 9px;
}
.lane figure:hover figcaption{opacity:1}

@media (max-width:600px){
  .lane img{height:180px}
}