:root{
      --gap:12px;
      --thumb-height:150px;
      --bg: #0f1724;
      --card:#0f1724;
      --accent:#0ea5a3;
    }
    body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:#f6f7fb; color:#111}
    .container{max-width:1100px;margin:32px auto;padding:0 16px; text-align: center;}
    h1{font-size:20px;margin:0 0 18px}

    /* Grid: 4 por fila. Responsivo */
    .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
    @media (max-width:1000px){.gallery{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:420px){.gallery{grid-template-columns:1fr}}

    .item{position:relative;overflow:hidden;border-radius:8px;background:#ddd;cursor:pointer}
    .item img{width:100%;height:var(--thumb-height);object-fit:cover;display:block;transition:transform .35s ease, filter .35s ease}
    .item:hover img{transform:scale(1.04);filter:brightness(.95)}

    .caption{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.45);color:#fff;padding:6px 8px;border-radius:6px;font-size:13px}

    /* Lightbox modal */
    .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);z-index:9999;padding:28px}
    .lightbox.open{display:flex}
    .lb-content{position:relative;max-width:1100px;width:100%;max-height:90vh;display:flex;align-items:center;justify-content:center}
    .lb-img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

    .lb-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:12px}
    .btn{background:rgba(0,0,0,.45);color:#fff;border:none;padding:10px;border-radius:50%;width:44px;height:44px;display:inline-grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
    .btn:active{transform:scale(.98)}
    .close-btn{position:absolute;top:12px;right:12px;background:transparent;border:none;color:#fff;font-size:28px;cursor:pointer}

    .lb-footer{position:absolute;left:0;right:0;bottom:8px;color:#fff;text-align:center;font-size:14px}

    /* small arrow icons via CSS */
    .icon{font-size:18px;line-height:0}

    /* keyboard hint */
    .hint{position:absolute;left:12px;top:12px;color:rgba(255,255,255,.8);font-size:13px}

    /* accessible focus */
    .btn:focus,.item:focus{outline:3px solid rgba(14,165,163,.18);outline-offset:4px}