/* Galeria e o visualizador de mídia — ver galeria.js. Tokens do index.html. */

/* ---------- a seção -------------------------------------------------------------------------------- */
.g-seg { display:flex; gap:2px; padding:2px; border-radius:10px; background:rgba(2,5,12,.38); border:1px solid var(--vidro-brd); }
.g-seg-b {
  border:1px solid transparent; background:none; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600;
  padding:6px 11px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.g-seg-b:hover { color:var(--text); }
.g-seg-b.on { color:var(--text); background:var(--vidro-leve); border-color:var(--vidro-brd); box-shadow:var(--vidro-topo); }
.g-seg-b:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.g-pad { padding:14px 18px 40px; display:flex; flex-direction:column; gap:18px; }
.g-dia { display:flex; flex-direction:column; gap:8px; }
.g-dia-rot { margin:0; font-size:10.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.g-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.g-item {
  position:relative; aspect-ratio:1; padding:0; overflow:hidden; cursor:zoom-in; border-radius:12px;
  border:1px solid var(--vidro-brd); background:rgba(255,255,255,.035); color:#fff; font:inherit; min-width:0;
  transition:border-color .15s, transform .15s;
}
.g-item.video { cursor:pointer; }
.g-item:hover { border-color:rgba(56,189,248,.55); }
.g-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.g-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
.g-semcapa { position:absolute; inset:0; background:linear-gradient(135deg, rgba(124,92,255,.25), rgba(56,189,248,.12)); }
.g-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:3px; font-size:15px;
  background:rgba(4,8,16,.55); border:1px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.g-dur {
  position:absolute; right:6px; top:6px; padding:1px 6px; border-radius:6px; font-size:11px; font-weight:650;
  background:rgba(4,8,16,.7); font-variant-numeric:tabular-nums;
}
.g-pe {
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:5px; padding:16px 6px 6px; min-width:0;
  background:linear-gradient(transparent, rgba(2,5,12,.82));
}
.g-selo { flex:none; padding:1px 6px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.02em; background:rgba(4,8,16,.6); border:1px solid rgba(255,255,255,.18); }
.g-selo.o-voce { color:#bfe9ff; border-color:rgba(56,189,248,.5); }
.g-selo.o-claude { color:#ffd9b0; border-color:rgba(245,181,68,.5); }
.g-selo.o-estudio { color:#d9ceff; border-color:rgba(167,150,255,.55); }
.g-proj { flex:1; min-width:0; font-size:11px; color:rgba(255,255,255,.82); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-mais { display:flex; justify-content:center; }
.g-erro { text-align:center; }
.g-vazio p { max-width:44ch; line-height:1.5; }

@media (max-width:860px) {
  .g-pad { padding:12px 10px 32px; gap:14px; }
  .g-grade { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:6px; }
  .g-seg-b { padding:6px 9px; font-size:12px; }
  .g-play { width:34px; height:34px; font-size:13px; }
  .g-proj { display:none; }
}

/* ---------- o visualizador ------------------------------------------------------------------------- */
/* Acima das seções e dos diálogos (60), abaixo do aviso (70): um erro de "Baixar" aparece por cima. */
.vz {
  position:fixed; inset:0; z-index:66; display:flex; flex-direction:column; background:rgba(1,3,8,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:vz-entra .16s ease-out; color:#fff;
}
@keyframes vz-entra { from { opacity:0; } }
.vz-topo {
  flex:none; display:flex; align-items:center; gap:10px; padding:10px 12px 10px 18px; min-height:58px;
  background:linear-gradient(rgba(1,3,8,.9), rgba(1,3,8,.55)); z-index:2;
}
.vz-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vz-nome { font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vz-linha2 { display:flex; gap:10px; min-width:0; font-size:12px; color:rgba(226,232,240,.68); }
.vz-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vz-conta { flex:none; font-variant-numeric:tabular-nums; }
.vz-conta:empty { display:none; }
.vz-acoes, .vz-conf { flex:none; display:flex; align-items:center; gap:6px; }
.vz-acoes[hidden], .vz-conf[hidden] { display:none; }
.vz-conf span { font-size:13px; font-weight:600; margin-right:2px; }
.vz-btn { min-height:34px; padding:6px 12px; }
.vz-btn[hidden] { display:none; }
.vz-x {
  flex:none; width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:#fff; font-size:16px; cursor:pointer;
}
.vz-x:hover { background:rgba(255,255,255,.14); }
.vz-x:focus-visible, .vz-seta:focus-visible, .vz-zoom:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.vz-palco { position:relative; flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.vz-palco.imagem { touch-action:none; cursor:zoom-in; user-select:none; -webkit-user-select:none; }
.vz-palco.imagem.ampliada { cursor:grab; }
.vz-palco.imagem.ampliada:active { cursor:grabbing; }
.vz-img { position:absolute; transform-origin:0 0; max-width:none; -webkit-user-drag:none; will-change:transform; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.vz-video { max-width:calc(100% - 24px); max-height:calc(100% - 24px); border-radius:10px; background:#000; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.vz-giro {
  width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:var(--accent);
  animation:vz-gira .8s linear infinite;
}
@keyframes vz-gira { to { transform:rotate(360deg); } }
.vz-falha { color:rgba(226,232,240,.75); font-size:14px; }

.vz-seta {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:64px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:rgba(1,3,8,.5); color:#fff; font-size:30px; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vz-seta:hover { background:rgba(255,255,255,.12); }
.vz-seta.ant { left:12px; }
.vz-seta.prox { right:12px; }
.vz-seta[hidden] { display:none; }
.vz-zoom {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(1,3,8,.7); color:#fff; font:inherit; font-size:12px; font-weight:650;
  font-variant-numeric:tabular-nums; cursor:pointer;
}
.vz-zoom[hidden] { display:none; }

@media (max-width:860px) {
  .vz-topo { flex-wrap:wrap; padding:8px 8px 8px 12px; gap:8px; }
  .vz-info { flex-basis:calc(100% - 50px); order:1; }
  .vz-x { order:2; }
  .vz-acoes, .vz-conf { order:3; flex-basis:100%; }
  .vz-conf span { flex:1; }
  /* no toque, troca-se deslizando: as setas só atrapalham a imagem */
  .vz-seta { width:36px; height:52px; font-size:24px; top:auto; bottom:14px; transform:none; }
  .vz-video { max-width:100%; max-height:100%; border-radius:0; }
  /* no vídeo, as setas embaixo cobririam os controles do player: sobem pro meio */
  .vz.com-video .vz-seta { top:50%; bottom:auto; transform:translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { .vz { animation:none; } .vz-giro { animation-duration:2s; } }

/* o título não some atrás do filtro: sem espaço, o filtro desce pra linha de baixo */
.sec-quadro[data-secao="galeria"] .sec-topo h1 { flex:1 0 auto; }
@media (max-width:860px) {
  .sec-quadro[data-secao="galeria"] .sec-acoes { flex:1 1 100%; justify-content:space-between; }
}