/* Galeria de fotos — identidade PB-01 Sal de Prata (renalabs)
   Sem cor de destaque: hierarquia só por peso, tamanho e cinza. A única cor é a de erro. */

:root, [data-tema="claro"] {
  --bg: #F4F4F2;
  --bg2: #E6E6E3;
  --sup: #FCFCFB;
  --linha: #C4C4C1;
  --tx: #111111;
  --tx2: #636362;
  --acc: #0A0A0A;
  --acc-tinta: #FFFFFF;
  --sec: #BABAB8;
  --erro: #B3261E;
  --vidro: rgba(244, 244, 242, .92);
  --sombra: 0 12px 40px rgba(0, 0, 0, .14);
  color-scheme: light;
}
[data-tema="escuro"] {
  --bg: #0A0A0A;
  --bg2: #141414;
  --sup: #1C1C1C;
  --linha: #373737;
  --tx: #EDEDED;
  --tx2: #9B9B9B;
  --acc: #F5F5F5;
  --acc-tinta: #0A0A0A;
  --sec: #4F4F4F;
  --erro: #F2857C;
  --vidro: rgba(10, 10, 10, .9);
  --sombra: 0 12px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Variações de tipografia ----------
   --ft  título (marca e capa)      --fa  assinatura/rótulos em caixa-alta
   --fu  interface (botões, listas) */
[data-fonte="1"] { --ft: "Montserrat", sans-serif; --ft-peso: 300; --ft-track: .02em; --ft-esc: 1;
  --fa: "Quattrocento", serif; --fa-track: .12em; --fa-esc: 1;
  --fu: "Montserrat", sans-serif; --capa-caixa: uppercase; --capa-track: .06em; }
[data-fonte="2"] { --ft: "Libre Caslon Display", serif; --ft-peso: 400; --ft-track: -.01em; --ft-esc: 1.22;
  --fa: "Courier Prime", monospace; --fa-track: .14em; --fa-esc: 1;
  --fu: "Libre Caslon Text", serif; --capa-caixa: none; --capa-track: -.01em; }
[data-fonte="3"] { --ft: "Libre Caslon Display", serif; --ft-peso: 400; --ft-track: -.01em; --ft-esc: 1.22;
  --fa: "Montserrat", sans-serif; --fa-track: .24em; --fa-esc: .92;
  --fu: "Montserrat", sans-serif; --capa-caixa: none; --capa-track: -.01em; }
[data-fonte="4"] { --ft: "Cormorant Garamond", serif; --ft-peso: 300; --ft-track: .01em; --ft-esc: 1.3;
  --fa: "Montserrat", sans-serif; --fa-track: .24em; --fa-esc: .92;
  --fu: "Montserrat", sans-serif; --capa-caixa: none; --capa-track: .01em; }
[data-fonte="5"] { --ft: "Jost", sans-serif; --ft-peso: 300; --ft-track: .03em; --ft-esc: 1.05;
  --fa: "Libre Caslon Text", serif; --fa-track: .16em; --fa-esc: 1;
  --fu: "Jost", sans-serif; --capa-caixa: uppercase; --capa-track: .12em; }
[data-fonte="6"] { --ft: "Raleway", sans-serif; --ft-peso: 200; --ft-track: .04em; --ft-esc: 1.05;
  --fa: "Quattrocento", serif; --fa-track: .12em; --fa-esc: 1;
  --fu: "Raleway", sans-serif; --capa-caixa: uppercase; --capa-track: .1em; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--fu);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
body.travado { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 1px solid var(--acc); outline-offset: 2px; }
.ic-svg { display: inline-flex; width: 20px; height: 20px; }
.ic-svg svg { width: 100%; height: 100%; }

/* ---------- Capa ---------- */
.capa {
  position: relative;
  height: 62vh; height: 62svh;   /* entre 1/2 e 2/3 da tela: corta menos a foto */
  min-height: 340px;
  overflow: hidden;
  background: #0A0A0A;
}
.capa-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 6s ease-out;
}
.capa-img.ok { opacity: 1; transform: scale(1); }
.capa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.55) 100%);
}
.capa-txt {
  position: absolute; left: 0; right: 0; bottom: 11%;
  z-index: 1;
  text-align: center;
  color: #F5F5F5;
  padding: 0 24px;
}
.capa-titulo {
  margin: 0;
  font-family: var(--ft);
  font-weight: var(--ft-peso);
  font-size: calc(clamp(32px, 5.2vw, 58px) * var(--ft-esc));
  letter-spacing: var(--capa-track);
  text-transform: var(--capa-caixa);
  line-height: 1.1;
}
.capa-sub {
  margin: 12px 0 26px;
  font-family: var(--fa);
  font-size: calc(12px * var(--fa-esc));
  letter-spacing: var(--fa-track);
  text-transform: uppercase;
  opacity: .85;
}
.capa-ver {
  font-family: var(--fa);
  font-size: calc(11px * var(--fa-esc));
  letter-spacing: var(--fa-track);
  text-transform: uppercase;
  padding: 13px 30px;
  border: 1px solid rgba(245,245,245,.75);
  color: #F5F5F5;
  transition: background .25s, color .25s;
}
.capa-ver:hover { background: #F5F5F5; color: #0A0A0A; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  height: 68px;
  padding: 0 24px;
  background: var(--vidro);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.topo.rolado { border-bottom-color: var(--linha); }
.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--tx); min-width: 0; }
.marca-titulo {
  font-family: var(--ft);
  font-weight: var(--ft-peso);
  font-size: calc(19px * var(--ft-esc));
  letter-spacing: var(--ft-track);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marca-assina {
  margin-top: 3px;
  font-family: var(--fa);
  font-size: calc(10px * var(--fa-esc));
  letter-spacing: var(--fa-track);
  text-transform: uppercase;
  color: var(--tx2);
}
.secoes { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.secoes::-webkit-scrollbar { display: none; }
.secoes a {
  font-size: 13px; color: var(--tx2); text-decoration: none; white-space: nowrap;
  padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.secoes a:hover, .secoes a.ativo { color: var(--tx); }
.secoes a.ativo { border-bottom-color: var(--tx); }
.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.ic {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  color: var(--tx);
  transition: opacity .2s;
}
.ic:hover { opacity: .65; }
.ic[aria-pressed="true"] svg path { fill: currentColor; }
.badge {
  position: absolute; top: 2px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 10px; line-height: 16px; text-align: center;
  background: var(--acc); color: var(--acc-tinta); border-radius: 8px;
}

/* Barra "Download XX imagens selecionadas" */
.dl { position: relative; display: flex; align-items: stretch; border: 1px solid var(--linha); height: 38px; }
.dl-resumo {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 14px;
  font-size: 13px; white-space: nowrap;
  transition: background .2s;
}
.dl-resumo:hover { background: var(--bg2); }
.dl-resumo b { font-weight: 600; }
.dl-seta { width: 14px; height: 14px; transition: transform .25s; color: var(--tx2); }
.dl-resumo[aria-expanded="true"] .dl-seta { transform: rotate(180deg); }
.dl-baixar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  background: var(--acc); color: var(--acc-tinta);
  font-size: 12px; letter-spacing: .04em;
  transition: opacity .2s;
}
.dl-baixar .ic-svg { width: 16px; height: 16px; }
.dl-baixar:disabled { background: var(--bg2); color: var(--tx2); }
.dl-baixar:not(:disabled):hover { opacity: .85; }

.dl-painel {
  position: absolute; top: calc(100% + 8px); right: -1px;
  width: 420px; max-width: calc(100vw - 24px);
  background: var(--sup);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  max-height: min(70vh, 640px);
  animation: surgir .18s ease-out;
}
@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } }
.dl-cab { padding: 12px 14px 10px; border-bottom: 1px solid var(--linha); }
.dl-abas { display: flex; gap: 18px; margin-bottom: 10px; }
.dl-aba { font-size: 13px; color: var(--tx2); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.dl-aba.ativo { color: var(--tx); border-bottom-color: var(--tx); }
.dl-aba span { font-size: 11px; }
.dl-rapidos { display: flex; gap: 14px; flex-wrap: wrap; }
.dl-rapidos button { font-size: 12px; color: var(--tx2); text-decoration: underline; text-underline-offset: 3px; }
.dl-rapidos button:hover { color: var(--tx); }
.dl-lista { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.dl-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px;
  cursor: pointer;
}
.dl-linha:hover { background: var(--bg2); }
.dl-linha img { width: 56px; height: 40px; object-fit: cover; flex: none; background: var(--bg2); }
.dl-nome { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-nome small { display: block; font-size: 11px; color: var(--tx2); }
.dl-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linha); }
.dl-total { font-size: 12px; color: var(--tx2); }
.dl-pe-baixar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--acc); color: var(--acc-tinta); font-size: 13px;
}
.dl-pe-baixar .ic-svg { width: 16px; height: 16px; }
.dl-pe-baixar:disabled { background: var(--bg2); color: var(--tx2); }
.dl-progresso { padding: 0 14px 12px; font-size: 12px; color: var(--tx2); }
.dl-barra { height: 2px; background: var(--bg2); margin-bottom: 6px; }
.dl-barra i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .2s; }

/* Círculo de seleção (mosaico, lista e tela cheia) */
.circ {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background .15s, border-color .15s, color .15s;
}
.circ .ic-svg { width: 14px; height: 14px; opacity: 0; transition: opacity .15s; }
[aria-pressed="true"] > .circ, .marcada .circ { background: var(--acc); border-color: var(--acc); color: var(--acc-tinta); }
[aria-pressed="true"] > .circ .ic-svg, .marcada .circ .ic-svg { opacity: 1; }
.dl-linha .circ { color: var(--linha); }

/* ---------- Mosaico ---------- */
.galeria { padding: 8px 24px 40px; }
.secao { margin-bottom: 36px; scroll-margin-top: 84px; }
.secao-titulo {
  margin: 28px 0 16px;
  font-family: var(--fa);
  font-weight: 400;
  font-size: calc(11px * var(--fa-esc));
  letter-spacing: var(--fa-track);
  text-transform: uppercase;
  color: var(--tx2);
}
.mosaico { position: relative; }
.item {
  position: absolute; margin: 0;
  overflow: hidden; cursor: zoom-in;
  background: var(--bg2);
}
.item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.75,.25,1);
}
.item img.ok { opacity: 1; }
.item:hover img { transform: scale(1.015); }
.item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%, transparent 62%, rgba(0,0,0,.38) 100%);
  opacity: 0; transition: opacity .25s;
}
.item:hover::after, .item.marcada::after { opacity: 1; }
.item.marcada::after { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%); }
.item.marcada { outline: 2px solid var(--acc); outline-offset: -2px; }
.item-sel {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  color: #fff; opacity: 0; transition: opacity .2s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.item:hover .item-sel, .item.marcada .item-sel { opacity: 1; }
.item.marcada .circ { background: #fff; border-color: #fff; color: #0A0A0A; }
.item-acoes {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  display: flex; gap: 2px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.item:hover .item-acoes { opacity: 1; transform: none; }
.item-acoes .ic { color: #fff; width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.item-acoes .ic-svg { width: 19px; height: 19px; }
.item-fav {
  position: absolute; left: 10px; bottom: 9px; z-index: 2;
  width: 16px; height: 16px; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition: opacity .2s;
}
.item-fav svg path { fill: currentColor; }
.item:hover .item-fav { opacity: 0; }
/* Vídeo no mosaico: play no centro e duração no canto */
.item-play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,.9); border-radius: 50%;
  background: rgba(0,0,0,.28); color: #fff; pointer-events: none;
}
.item-play svg { width: 22px; height: 22px; margin-left: 3px; }
.item-dur {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  font: 11px/1 var(--fa); letter-spacing: .06em; color: #fff;
  padding: 4px 6px; background: rgba(0,0,0,.4); pointer-events: none;
}
.vazio { text-align: center; color: var(--tx2); padding: 60px 24px; }

.rodape {
  padding: 40px 24px 56px; text-align: center;
  font-family: var(--fa); font-size: calc(10px * var(--fa-esc));
  letter-spacing: var(--fa-track); text-transform: uppercase; color: var(--tx2);
}

/* ---------- Tela cheia ---------- */
.lb { position: fixed; inset: 0; z-index: 70; touch-action: none; overflow: hidden; }
.lb-img:not(.lb-video) { cursor: zoom-in; }
.lb.com-zoom .lb-img { cursor: grab; }
.lb.com-zoom .lb-img:active { cursor: grabbing; }
.lb.com-zoom .lb-seta { opacity: 0 !important; pointer-events: none; }
.lb.com-zoom .lb-topo { background: var(--vidro); }
.lb-fundo { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity .35s; }
.lb.aberto .lb-fundo { opacity: 1; }
.lb-img {
  position: absolute; display: block;
  transform-origin: 0 0;
  user-select: none; -webkit-user-drag: none;
  transition: opacity .18s;
}
.lb-img.trocando { opacity: 0; }
.lb-img.oculta { visibility: hidden; }
.lb-video { background: #000; object-fit: contain; }
.lb-topo, .lb-rodape, .lb-seta { opacity: 0; transition: opacity .3s .1s; }
.lb.aberto .lb-topo, .lb.aberto .lb-rodape, .lb.aberto .lb-seta { opacity: 1; }
.lb-topo {
  position: absolute; top: 0; left: 0; right: 0; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 24px;
}
.lb-cont { font-size: 12px; color: var(--tx2); letter-spacing: .06em; }
.lb-acoes { display: flex; gap: 2px; align-items: center; }
.lb-acoes .ic-svg { width: 21px; height: 21px; }
.lb-sel .circ { width: 22px; height: 22px; }
.lb-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx);
}
.lb-seta .ic-svg { width: 30px; height: 30px; }
.lb-seta:hover { opacity: .6 !important; }
.lb-seta[hidden] { display: none; }
.lb-ant { left: 8px; }
.lb-prox { right: 8px; }
.lb-rodape {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--tx2); letter-spacing: .04em;
}

/* Menu de download de vídeo (Original / Tamanho médio) */
.menu-dl {
  position: fixed; z-index: 90; min-width: 240px;
  background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra);
  display: flex; flex-direction: column; padding: 4px 0;
}
.menu-dl button { text-align: left; padding: 9px 14px; font-size: 13px; }
.menu-dl button:hover { background: var(--bg2); }
.dl-videos { font-size: 12px; color: var(--tx2); display: flex; align-items: center; gap: 6px; }
.dl-videos select { font: inherit; color: var(--tx); background: var(--bg); border: 1px solid var(--linha); padding: 3px 4px; }
.dl-pe { flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  background: var(--acc); color: var(--acc-tinta);
  font-size: 13px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Painel de prévia (só no protótipo) ---------- */
.previa {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  font-family: system-ui, sans-serif; font-size: 12px;
  background: var(--sup); color: var(--tx);
  border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.previa-alca { display: block; width: 100%; padding: 8px 12px; text-align: left; font-weight: 600; font-family: inherit; }
.previa-corpo { display: grid; gap: 8px; padding: 0 12px 12px; }
.previa.fechada .previa-corpo { display: none; }
.previa label { display: grid; gap: 3px; color: var(--tx2); }
.previa select { font: inherit; padding: 4px; background: var(--bg); color: var(--tx); border: 1px solid var(--linha); }

/* ---------- Telas pequenas ---------- */
@media (max-width: 860px) {
  .secoes { display: none; }
}
@media (max-width: 640px) {
  .capa { height: 55svh; }
  .topo { height: 58px; padding: 0 12px 0 16px; gap: 12px; }
  .marca-titulo { font-size: calc(16px * var(--ft-esc)); }
  .galeria { padding: 4px 4px 32px; }
  .secao-titulo { margin: 22px 12px 12px; }
  .dl-longo, .dl-baixar-txt { display: none; }
  .dl-resumo { padding: 0 8px 0 10px; gap: 6px; }
  .dl-baixar { padding: 0 10px; }
  .dl-painel { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; max-width: none; }
  .lb-seta { display: none; }
  .lb-topo { padding: 0 4px 0 14px; }
  .lb-acoes .ic { width: 36px; }
  .previa { left: 8px; bottom: 8px; }
}
/* Telas de toque: o círculo de seleção fica sempre visível */
@media (hover: none) {
  .item-sel { opacity: .9; }
  .item::after { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 26%); }
  .item-acoes { display: none; }
  .item:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}