/* ============================================================
   GALERIA DE FOTOS
   ============================================================ */
#fotos {
  background:
    radial-gradient(55% 55% at 100% 10%, rgba(140,200,235,.24), transparent 70%),
    radial-gradient(50% 55% at 0% 100%, rgba(60,140,240,.34), transparent 70%),
    linear-gradient(180deg, var(--azul-1) 0%, #12233a 100%);
}
#fotos::before { top: 30%; right: 20%; background: radial-gradient(circle, rgba(140,200,235,.22) 0%, transparent 60%); }

.albuns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 22px; }

/* card com fotos empilhadas que se abrem no hover */
.album {
  position: relative; display: block; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--tinta); text-align: left; isolation: isolate;
}
.album__cover, .album__stack img {
  position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(140,200,235,.22); background: #0c1626;
}
.album__cover { z-index: 1; transition: transform .5s var(--ease), box-shadow .4s; box-shadow: 0 24px 40px -24px rgba(0,0,0,.8); }
.album__cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: transform .8s var(--ease), filter .4s; }
.album__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,10,18,.92) 0%, rgba(6,10,18,0) 55%); }
.album__stack img {
  width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.6);
  transform-origin: 50% 100%; transition: transform .55s var(--ease), filter .4s;
}
.album__stack img:nth-child(1) { transform: rotate(-3deg) translate(-4px, 4px); }
.album__stack img:nth-child(2) { transform: rotate(3deg) translate(4px, 6px); }
.album:hover .album__cover, .album:focus-visible .album__cover { transform: translateY(-8px); box-shadow: 0 34px 60px -26px rgba(60,140,240,.6); }
.album:hover .album__cover img { transform: scale(1.05); filter: brightness(.95); }
.album:hover .album__stack img:nth-child(1) { transform: rotate(-9deg) translate(-22px, 0); filter: brightness(.8); }
.album:hover .album__stack img:nth-child(2) { transform: rotate(8deg) translate(22px, 2px); filter: brightness(.8); }

.album__count {
  position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: var(--r-sm); background: var(--pilula); color: var(--sobre-pilula);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .5s var(--ease);
}
.album__count svg { width: 15px; height: 15px; }
.album__meta { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 4px; transition: transform .5s var(--ease); }
.album__meta b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: .92; text-transform: uppercase; }
.album__meta small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.album:hover .album__count, .album:hover .album__meta { transform: translateY(-8px); }

/* ---------- visualizador ---------- */
.lb {
  position: fixed; inset: 0; z-index: 110; display: grid; grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(60% 60% at 50% 110%, rgba(60,140,240,.25), transparent 70%),
    rgba(4, 7, 12, .97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: spFade .3s ease both;
}
.lb[hidden] { display: none; }
.lb__top { display: flex; align-items: center; gap: 16px; padding: 14px clamp(12px, 3vw, 28px); }
.lb__info { min-width: 0; }
.lb__info b { display: block; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1; text-transform: uppercase; }
.lb__info small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.lb__count { margin-left: auto; font-family: var(--display); font-size: 22px; letter-spacing: .08em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.lb__stage { position: relative; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 0 clamp(8px, 7vw, 96px); touch-action: pan-y; user-select: none; }
.lb__img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
  transition: opacity .3s ease, transform .4s var(--ease);
  -webkit-user-drag: none;
}
.lb__img.is-swapping { opacity: 0; transform: scale(.985); }
.lb__loader {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--laranja); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.lb.is-loading .lb__loader { opacity: 1; animation: spSpin .8s linear infinite; }

.lb__nav {
  position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--tinta);
  background: rgba(8,14,24,.7); border: 1px solid rgba(140,200,235,.3); backdrop-filter: blur(8px);
  transition: background .2s, color .2s, transform .2s;
}
.lb__nav svg { width: 24px; height: 24px; }
.lb__nav:hover { background: var(--tinta); color: var(--fundo); }
.lb__nav:active { transform: scale(.92); }
.lb__nav--prev { left: clamp(8px, 2vw, 28px); }
.lb__nav--next { right: clamp(8px, 2vw, 28px); }
.lb__nav[hidden] { display: none; }

.lb__thumbs {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px clamp(12px, 3vw, 28px) 18px;
  justify-content: safe center; scrollbar-width: none;
}
.lb__thumbs::-webkit-scrollbar { display: none; }
.lb__thumb {
  flex: none; width: 84px; aspect-ratio: 3 / 2; padding: 0; border-radius: 9px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #0c1626; opacity: .5; transition: opacity .2s, border-color .2s;
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: .85; }
.lb__thumb.is-current { opacity: 1; border-color: var(--laranja); }

@media (max-width: 620px) {
  .albuns { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .album__meta { left: 12px; right: 12px; bottom: 12px; }
  .album__meta b { font-size: 21px; }
  .album__count { top: 10px; left: 10px; padding: 4px 8px 4px 6px; font-size: 9px; }
  .lb__nav { display: none; }
  .lb__stage { padding: 0 8px; }
  .lb__info b { font-size: 22px; }
  .lb__thumb { width: 64px; }
}