*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #0f0f0f;
      --surface: #1a1a1a;
      --border:  #2c2c2c;
      --accent:  #c9a96e;
      --accent2: #e8d5b0;
      --text:    #f0ece4;
      --muted:   #888;
      --radius:  6px;
      --gap:     14px;
    }

    .galeria { background-color: #eee; }

    /* ── GALERIA ─────────────────────────────────── */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      grid-auto-rows: 140px;
      gap: var(--gap);
      max-width: 1440px;
      margin: 0 auto;
    }

    /* Masonry: cada 3º item fica mais alto */


    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      cursor: pointer;
      background: var(--surface);
      /* moldura sutil */
      box-shadow: 0 0 0 1px var(--border);
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .55s cubic-bezier(.25,.46,.45,.94),
      filter .45s ease;
      filter: brightness(.88) saturate(.95);
    }
    .gallery-item:hover img {
      transform: scale(1.08);
      filter: brightness(1.04) saturate(1.05);
    }

    /* Overlay ao hover */
    .overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.12) 55%,
        transparent 100%);
      opacity: 0;
      transition: opacity .35s ease;
      display: flex;
      align-items: flex-end;
      padding: 18px;
    }
    .gallery-item:hover .overlay { opacity: 1; }

    .overlay-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .overlay-icon {
      width: 34px; height: 34px;
      border: 1px solid rgba(255,255,255,.45);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .overlay-text strong {
      display: block;
      font-size: 13px;
      color: #fff;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }
    .overlay-text small {
      font-size: 11px;
      color: rgba(255,255,255,.55);
      letter-spacing: .5px;
    }

    /* Número da foto */
    .num-badge {
      position: absolute;
      top: 10px; left: 10px;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(201,169,110,.35);
      color: var(--accent);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1px;
      padding: 3px 9px;
      border-radius: 100px;
    }

    /* ── LIGHTBOX ────────────────────────────────── */
    #lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.96);
      backdrop-filter: blur(14px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }
    #lightbox.open {
      opacity: 1;
      pointer-events: all;
    }

    .lb-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      max-width: 92vw;
    }

    #lb-img {
      max-width: 88vw;
      max-height: 78vh;
      width: auto; height: auto;
      border-radius: 4px;
      box-shadow: 0 28px 72px rgba(0,0,0,.85);
      transform: scale(.93);
      transition: transform .38s cubic-bezier(.34,1.56,.64,1);
      display: block;
    }
    #lightbox.open #lb-img { transform: scale(1); }

    /* Barra inferior do lightbox */
    .lb-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    #lb-title {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 400;
    }
    #lb-sub {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 1px;
    }
    #lb-counter {
      font-size: 11px;
      color: #555;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    /* Botão fechar */
    #lb-close {
      position: fixed;
      top: 22px; right: 22px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      z-index: 10000;
    }
    #lb-close:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.4);
    }

    /* Setas de navegação */
    .lb-arrow {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.15);
      color: #fff;
      width: 52px; height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      z-index: 10000;
    }
    .lb-arrow:hover {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.38);
    }
    #lb-prev { left: 18px; }
    #lb-next { right: 18px; }

    /* ── RESPONSIVO ──────────────────────────────── */
    @media (max-width: 600px) {
      .gallery { grid-auto-rows: 150px; gap: 10px; }
      .lb-arrow { display: none; }
    }