/* Galería completa - Grupo IMPACTOS */

.galeria-page { background:#111; color:#fff; }

/* Presentación */
.galeria-hero { padding:70px 20px 50px; text-align:center; background:radial-gradient(circle at center top,#303030 0,#171717 45%,#0d0d0d 100%); }
.galeria-hero .container { max-width:900px; }
.galeria-eyebrow { margin-bottom:15px; color:#e2c044; font-size:.8rem; font-weight:700; letter-spacing:.25em; }
.galeria-hero h1 { margin-bottom:20px; font-size:clamp(2.2rem,5vw,4.5rem); font-weight:700; line-height:1; }
.galeria-intro { max-width:760px; margin:0 auto; color:#ccc; font-size:clamp(1rem,2vw,1.2rem); line-height:1.7; }
.galeria-linea { width:70px; height:3px; margin:30px auto 18px; background:#e2c044; }
.galeria-contador { margin:0; color:#888; font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; }

/* Mosaico */
.galeria-archivo { padding:8px; background:#090909; }
.galeria-masonry { column-count:4; column-gap:8px; }
.galeria-foto { position:relative; display:inline-block; width:100%; margin:0 0 8px; overflow:hidden; background:#222; break-inside:avoid; }
.galeria-foto a { position:relative; display:block; color:#fff; text-decoration:none; overflow:hidden; }
.galeria-foto img { display:block; width:100%; height:auto; transition:transform .5s ease,filter .5s ease; }
.galeria-foto:hover img { transform:scale(1.04); filter:brightness(.6); }

/* Información sobre fotografía */
.galeria-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; opacity:0; background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.9)); transition:opacity .35s ease; }
.galeria-foto:hover .galeria-overlay { opacity:1; }
.galeria-lupa { position:absolute; top:18px; right:18px; display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.galeria-nombre { font-size:.95rem; font-weight:600; line-height:1.25; text-shadow:0 1px 3px #000; }
.galeria-anio { margin-top:4px; color:#e2c044; font-size:.8rem; font-weight:bold; }

/* Pie de la galería */
.galeria-regreso { padding:65px 20px; background:#171717; }
.galeria-regreso p { margin-bottom:22px; font-size:1.3rem; }

/* Visor */
.galeria-visor { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:25px 80px; background:rgba(0,0,0,.96); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility .3s ease; }
.galeria-visor.activo { opacity:1; visibility:visible; pointer-events:auto; }

.visor-contenido { display:flex; width:100%; height:100%; align-items:center; justify-content:center; flex-direction:column; }
.visor-contenido img { display:block; max-width:100%; max-height:calc(100vh - 100px); object-fit:contain; opacity:0; transform:scale(.985); transition:opacity .3s ease,transform .4s ease; box-shadow:0 5px 40px rgba(0,0,0,.8); }
.visor-contenido img.visible { opacity:1; transform:scale(1); }

.visor-info { display:flex; width:100%; max-width:1200px; justify-content:space-between; gap:20px; padding-top:12px; color:#bbb; font-size:.85rem; }
#visorTitulo { color:#fff; }
#visorPosicion { white-space:nowrap; color:#e2c044; }

/* Navegación superior */
.visor-superior { position:absolute; top:20px; left:25px; z-index:3; display:flex; align-items:center; gap:10px; }
.visor-home,.visor-volver { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid rgba(255,255,255,.25); border-radius:20px; color:#fff; background:rgba(255,255,255,.07); text-decoration:none; font-size:.85rem; transition:background .25s ease,border-color .25s ease; }
.visor-home:hover,.visor-volver:hover { color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }

/* Botones del visor */
.visor-cerrar,.visor-nav { position:absolute; z-index:3; border:0; color:#fff; background:transparent; cursor:pointer; transition:opacity .2s ease,transform .2s ease; }
.visor-cerrar:hover,.visor-nav:hover { opacity:.7; }
.visor-cerrar { top:20px; right:25px; font-size:2rem; }
.visor-cerrar:hover { transform:scale(1.1); }

.visor-nav { top:50%; display:flex; width:55px; height:75px; align-items:center; justify-content:center; transform:translateY(-50%); border-radius:8px; font-size:2.3rem; }
.visor-nav:hover { transform:translateY(-50%) scale(1.08); background:rgba(255,255,255,.06); }
.visor-anterior { left:15px; }
.visor-siguiente { right:15px; }

/* Tablet */
@media (max-width:991.98px) {
    .galeria-hero { padding:50px 20px 40px; }
    .galeria-masonry { column-count:3; }
    .galeria-visor { padding:65px 60px 20px; }
}

/* Celular */
@media (max-width:767.98px) {
    .galeria-hero { padding:40px 18px 35px; }
    .galeria-eyebrow { font-size:.7rem; letter-spacing:.16em; }
    .galeria-masonry { column-count:2; column-gap:5px; }
    .galeria-archivo { padding:5px; }
    .galeria-foto { margin-bottom:5px; }
    .galeria-overlay { opacity:1; padding:10px; background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.75)); }
    .galeria-nombre,.galeria-anio,.galeria-lupa { display:none; }
    .galeria-regreso { padding:45px 15px; }

    .galeria-visor { padding:65px 10px 25px; }
    .visor-contenido img { max-height:calc(100vh - 145px); }
    .visor-info { padding:10px 5px 0; font-size:.75rem; }

    .visor-superior { top:14px; left:12px; gap:6px; }
    .visor-home,.visor-volver { padding:7px 9px; font-size:.75rem; }
    .visor-cerrar { top:13px; right:15px; font-size:1.7rem; }

    .visor-nav { width:44px; height:65px; font-size:1.6rem; background:rgba(0,0,0,.4); }
    .visor-anterior { left:0; }
    .visor-siguiente { right:0; }
}

/* Celulares pequeños */
@media (max-width:420px) {
    .galeria-hero h1 { font-size:2rem; }
    .galeria-intro { font-size:.95rem; }
    .galeria-regreso .btn { display:block; width:100%; margin:8px 0!important; }
    .visor-home span,.visor-volver span { display:none; }
    .visor-home,.visor-volver { width:36px; height:36px; justify-content:center; padding:0; border-radius:50%; }
}