:root{ --gap: 16px; }
    body{ font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:#0f172a; color:#e6eef8; }
    .wrap{ max-width:1200px; margin:40px auto; padding:0 16px; }
    h1{ text-align:center; margin-bottom:20px; font-size:1.6rem; }

    /* Grid 4 columnas responsiva */
    .gallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--gap); }
    @media (max-width:1100px){ .gallery{ grid-template-columns: repeat(3,1fr); } }
    @media (max-width:760px){ .gallery{ grid-template-columns: repeat(2,1fr); } }
    @media (max-width:420px){ .gallery{ grid-template-columns: 1fr; } }

    .item{ position:relative; overflow:hidden; border-radius:12px; background:#081022; height:220px; display:block; }
    .item .media{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .9s cubic-bezier(.2,.9,.3,1); will-change:transform; }
    .item:hover .media{ transform:scale(1.06) translateY(-6px); }

    /* overlay */
    .item .overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px; background:linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%); }
    .caption{ font-size:0.95rem; }

    /* small caption pill */
    .pill{ background:rgba(255,255,255,0.08); padding:6px 8px; border-radius:999px; font-size:0.8rem; backdrop-filter:blur(4px); }

    /* subtle parallax helper - the element that will move */
    .parallax{ transform:translate3d(0,0,0); }

    /* controls */
    .controls{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
    .btn{ background:#0b1220; color:#cde3ff; border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px; cursor:pointer; }
    .credits{ text-align:center; margin-top:14px; opacity:0.7; font-size:0.85rem; }