*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f3f3f3;color:#222}
header{text-align:center;padding:35px 20px;background:#222;color:white}
header h1{margin:0;font-size:36px}
main{max-width:1200px;margin:auto;padding:30px 20px}
.ano{margin-bottom:55px}
.ano h2{font-size:30px;border-left:6px solid #222;padding-left:12px;margin-bottom:18px}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.galeria img{width:100%;height:230px;object-fit:cover;border-radius:12px;cursor:pointer;background:#ddd;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .2s}
.galeria img:hover{transform:scale(1.03)}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);justify-content:center;align-items:center;overflow:hidden;z-index:10}
.modal img{max-width:90%;max-height:90%;cursor:grab;user-select:none}
#fechar{position:fixed;top:15px;right:28px;color:white;font-size:46px;cursor:pointer;z-index:20}
.nav{position:fixed;top:50%;transform:translateY(-50%);font-size:42px;background:rgba(255,255,255,.2);color:white;border:none;padding:14px 18px;cursor:pointer;border-radius:50%;z-index:20}
#anterior{left:20px}
#proxima{right:20px}
@media(max-width:600px){
header h1{font-size:28px}
.ano h2{font-size:24px}
.galeria{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.galeria img{height:170px}
}