/* ===== GALERÍA + LIGHTBOX ===== */
:root{
  --orange-soft:#fff1e6; /* para eyebrow opcional */
}
.galeria-wrap{ background:var(--page); padding:40px 20px 15px; text-align:center; }
.galeria-header{ max-width:1120px; margin:0 auto 40px; }
.galeria-eyebrow{
  display:inline-block; background:var(--orange-soft); color:var(--orange);
  padding:6px 14px; border-radius:999px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.9rem;
}
.galeria-header h1, .galeria-title{
  margin:18px 0 8px; font-weight:800; color:#000; font-size:clamp(28px, 3.6vw, 40px); line-height:1.2;
}
.galeria-header p, .galeria-subtitle{
  max-width:720px; margin:0 auto; color:var(--ui-soft); font-size:1.05rem; line-height:1.6;
}

/* Grid */
.galeria-grid{
  max-width:1120px; margin:24px auto 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
}

/* Thumbs */
.galeria-grid .thumb{
  position:relative; display:block; overflow:hidden; border-radius:16px; background:var(--surface);
  box-shadow:0 8px 24px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.05);
  transition:transform .35s ease, box-shadow .35s ease;
}
.galeria-grid .thumb:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.galeria-grid .thumb img{
  width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .6s ease;
}
.galeria-grid .thumb:hover img{ transform:scale(1.06); }
.galeria-grid .thumb:focus{ outline:3px solid var(--orange); outline-offset:2px; }

/* Altura fija alternativa */
.thumb img{
  width:100%; height:200px; object-fit:cover;
  border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease; border:2px solid transparent;
}
.thumb img:hover{ transform:scale(1.03); box-shadow:0 10px 26px rgba(0,0,0,.12); border-color:rgba(245,124,0,.4); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(10,14,16,.9); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; }
.lightbox:target{ display:flex; }
.lightbox img{
  max-width:min(92vw,1400px); max-height:84vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
}

/* Controles */
.lightbox .close, .lightbox .nav{
  position:fixed; display:flex; align-items:center; justify-content:center; border:none; text-decoration:none; cursor:pointer; z-index:10000;
  transition:.25s; background:rgba(255,255,255,.07); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:10px; color:#fff; border:1px solid rgba(255,255,255,.15);
}
.lightbox .close{ top:20px; right:24px; width:38px; height:38px; opacity:.95; }
.lightbox .close::before, .lightbox .close::after{
  content:""; position:absolute; width:16px; height:2px; background:#fff; border-radius:1px; top:50%; left:50%; transform-origin:center;
}
.lightbox .close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.lightbox .close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.lightbox .close:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); transform:scale(1.08); }

.lightbox .nav{ top:50%; transform:translateY(-50%); width:46px; height:60px; border-radius:10px; font-size:0; opacity:.9; }
.lightbox .prev{ left:18px; } .lightbox .next{ right:18px; }
.lightbox .nav::before{
  content:""; width:12px; height:12px; border:2px solid #fff; border-top:none; border-right:none; transform:rotate(45deg); display:block; transition:.2s;
}
.lightbox .next::before{ transform:rotate(-135deg); }
.lightbox .nav:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); transform:translateY(-50%) scale(1.08); }
.lightbox .nav:hover::before{ border-color:var(--orange); }

/* Móvil */
@media (max-width:768px){
  .lightbox .close{ top:14px; right:14px; width:34px; height:34px; }
  .lightbox .nav{ width:40px; height:50px; }
  .lightbox .prev{ left:10px; } .lightbox .next{ right:10px; }
  .lightbox .nav::before{ width:10px; height:10px; }
}
