/* Galeria da sede. Depende de tokens.css e site.css.
   Abertura com as fotos se revezando; vídeo numa película de cinema; fotos penduradas como numa exposição,
   com moldura, passe-partout, vidro, plaquinha de latão e luminária que acende quando o quadro aparece. */

/* ——— abertura ——— */
.gal-heroi { position: relative; display: grid; align-items: end; min-height: min(84svh, 940px); overflow: clip; isolation: isolate; background: var(--noite); }
.gal-heroi.sem-fotos { min-height: 0; }
.heroi-fotos { position: absolute; inset: 0; z-index: -2; }
.heroi-foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.heroi-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 9s linear; }
.heroi-foto:nth-child(even) img { transform-origin: 30% 40%; }
.heroi-foto:nth-child(odd) img { transform-origin: 70% 60%; }
.heroi-foto.ativa { opacity: 1; }
.heroi-foto.ativa img { transform: scale(1.02); }
.heroi-veu { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, var(--noite) 3%, rgb(6 20 13 / .86) 30%, rgb(6 20 13 / .3) 64%, rgb(6 20 13 / .62) 100%),
  radial-gradient(90% 70% at 80% 30%, rgb(6 20 13 / 0), rgb(6 20 13 / .55)); }
.heroi-veu::before { content: ''; position: absolute; inset: 0; background-image: var(--grao-claro); opacity: .6; }
.heroi-veu::after { content: ''; position: absolute; inset: 0; background: #0b5a35; mix-blend-mode: color; opacity: .32; }
.heroi-grade { width: 100%; padding-block: calc(var(--secao) * 1.1) var(--e-6); row-gap: var(--e-4); }
.gal-heroi.sem-fotos .heroi-grade { padding-bottom: var(--e-5); }
.gal-heroi .titulo { font-size: clamp(3.6rem, 13vw, 10.5rem); line-height: .9; text-shadow: 0 2px 40px rgb(6 20 13 / .6); }
.gal-heroi .titulo .linha { display: block; white-space: nowrap; }
.gal-heroi .titulo { margin-bottom: .2em; }
.gal-heroi .apoio { color: var(--papel); }
.heroi-legenda { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 1.4em; color: var(--papel-2); }
.heroi-barra { flex: none; width: 56px; height: 1px; background: var(--filete-forte); overflow: hidden; }
.heroi-barra i { display: block; height: 100%; background: var(--ouro); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .heroi-barra i { animation: barra 6s linear infinite; } }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 1024px) {
  .gal-heroi .cabeca { grid-column: 1 / span 8; grid-template-columns: minmax(0, 1fr); }
  .gal-heroi .cabeca > * { grid-column: 1 / -1; }
  .heroi-legenda { grid-column: 9 / span 4; flex-direction: column; align-items: flex-end; gap: 12px; align-self: end; text-align: right; }
}

/* ——— filtro de álbuns (só aparece com mais de um) ——— */
.gal-filtros-faixa { padding-block: var(--e-4); border-bottom: 1px solid var(--filete); }
.gal-filtros { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.gal-filtros button { min-height: 44px; padding: 0 16px; border: 1px solid var(--filete-forte); background: none; color: var(--papel-2); cursor: pointer; font: 500 var(--t-meta)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.gal-filtros button span { margin-left: 6px; color: var(--ouro); }
.gal-filtros button[aria-pressed="true"] { background: var(--papel); color: var(--noite); }
.gal-filtros button[aria-pressed="true"] span { color: var(--ouro-tinta); }

/* ——— cinema: o vídeo numa película ——— */
.gal-cinema { position: relative; overflow: clip; isolation: isolate; padding-block: var(--secao); background: #030906; border-block: 1px solid var(--filete); }
.cinema-luz { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(46% 42% at 50% 34%, rgb(255 236 190 / .13), rgb(255 236 190 / 0) 70%),
  linear-gradient(160deg, rgb(255 236 190 / 0) 25%, rgb(255 236 190 / .045) 38%, rgb(255 236 190 / 0) 52%); }
.cinema-poeira { position: absolute; inset: 4% 8% 40%; z-index: -1; pointer-events: none; }
.cinema-poeira i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: rgb(255 240 210 / .55); }
@media (prefers-reduced-motion: no-preference) {
  .cinema-poeira i { animation: poeira var(--d) ease-in-out var(--a) infinite alternate; }
  @keyframes poeira { to { transform: translate(22px, -30px); opacity: .1; } }
}
.cinema-grade { row-gap: var(--e-6); align-items: center; }
.cinema-filme { grid-column: 1 / -1; }
.cinema-texto { grid-column: 1 / -1; display: grid; gap: var(--e-4); justify-items: start; }
.cinema-texto .titulo { font-size: var(--t-1); }
.cinema-texto .titulo em { font-weight: 600; }
.cinema-ficha { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--papel-2); }
.cinema-ficha span + span::before { content: '·'; margin-right: 18px; color: var(--ouro); }

.pelicula {
  --b: clamp(26px, 3.2vw, 38px); --q: clamp(22px, 3vw, 34px); --base: #2a261d; --furo: #020504;
  position: relative; display: grid; grid-template-columns: var(--b) minmax(0, 1fr) var(--b); grid-template-rows: var(--q) auto var(--q); row-gap: 7px;
  width: min(100%, calc((72svh - 2 * var(--q) - 28px) * var(--ar) + 2 * var(--b)));
  margin: 0 auto; padding-block: 7px;
  background: linear-gradient(90deg, #14120d, var(--base) 16%, #332e23 50%, var(--base) 84%, #14120d);
  box-shadow: 0 0 0 1px rgb(239 232 214 / .08), 0 50px 90px -30px rgb(0 0 0 / .95), 0 0 140px -30px rgb(255 236 190 / .22);
  transform: rotate(-2.2deg);
  transition: transform 1.2s var(--curva), box-shadow 1.2s var(--curva);
}
.pelicula.tocando { transform: none; box-shadow: 0 0 0 1px rgb(239 232 214 / .12), 0 50px 90px -30px rgb(0 0 0 / .95), 0 0 180px -20px rgb(255 236 190 / .32); }
.pelicula-borda { grid-row: 1 / -1; position: relative; margin-block: -7px; overflow: hidden; }
.pelicula-borda.esq { grid-column: 1; }
.pelicula-borda.dir { grid-column: 3; }
.pelicula-borda::before { /* furos da película */
  content: ''; position: absolute; top: 0; bottom: 0; width: 36%;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, var(--furo) 7px 19px, transparent 19px 26px);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .03);
}
.pelicula-borda.esq::before { right: 12%; }
.pelicula-borda.dir::before { left: 12%; }
.pelicula-marca { position: absolute; top: 0; writing-mode: vertical-rl; white-space: nowrap; font: 500 8px/1 var(--f-mono); letter-spacing: .22em; color: rgb(214 160 70 / .8); }
.esq .pelicula-marca { left: 3px; rotate: 180deg; }
.dir .pelicula-marca { right: 3px; }
.pelicula-vizinho { grid-column: 2; background: #000 center / cover no-repeat; opacity: .42; filter: saturate(.5) brightness(.8); }
.pelicula-vizinho.antes { grid-row: 1; background-position: center 78%; }
.pelicula-vizinho.depois { grid-row: 3; background-position: center 22%; }
@media (prefers-reduced-motion: no-preference) {
  .pelicula.tocando .pelicula-borda::before { animation: furos .55s linear infinite; }
  .pelicula.tocando .pelicula-marca { animation: marca 8s linear infinite; }
  @keyframes furos { to { background-position: 0 26px; } }
  @keyframes marca { to { translate: 0 25%; } }
}
.gal-video-tela { grid-column: 2; grid-row: 2; position: relative; background: #000; }
.gal-video-tela video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); background: #000; }
.gal-play { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 12px; width: 100%; padding: 14px; border: 0; background: linear-gradient(to top, rgb(6 20 13 / .8), rgb(6 20 13 / 0) 42%); color: var(--papel); cursor: pointer; font: 500 var(--t-meta)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.gal-play[hidden] { display: none; }
.gal-play-icone { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border: 1px solid rgb(239 232 214 / .75); background: rgb(6 20 13 / .6); transition: transform .4s var(--curva), background-color .4s var(--curva); }
.gal-play-icone::before { content: ''; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--papel); }
.gal-play:hover .gal-play-icone, .gal-play:focus-visible .gal-play-icone { transform: scale(1.06); background: var(--palmeiras); }
.gal-play:focus-visible { outline: 2px solid var(--papel); outline-offset: -6px; }
.gal-play-texto { padding-bottom: 4px; }
@media (min-width: 1024px) {
  .cinema-luz { background:
    radial-gradient(34% 52% at 27% 50%, rgb(255 236 190 / .14), rgb(255 236 190 / 0) 70%),
    linear-gradient(115deg, rgb(255 236 190 / 0) 12%, rgb(255 236 190 / .05) 26%, rgb(255 236 190 / 0) 40%); }
  .cinema-poeira { inset: 8% 52% 8% 4%; }
  .cinema-filme { grid-column: 1 / span 5; }
  .cinema-texto { grid-column: 7 / span 6; }
}

/* ——— salas: as fotos penduradas ——— */
.gal-sala { position: relative; overflow: clip; isolation: isolate; padding-block: var(--secao); background-color: #0A1F15; background-image: radial-gradient(70% 40% at 50% 0%, rgb(255 236 190 / .05), rgb(255 236 190 / 0) 70%), var(--grao-claro); }
.gal-sala::before { /* cimalha: o friso dourado no alto da parede */
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--secao) * .42); height: 10px; z-index: -1;
  border-block: 1px solid rgb(201 160 58 / .38); background: linear-gradient(rgb(201 160 58 / .1), rgb(0 0 0 / .25));
}
.gal-sala::after { /* rodapé da parede */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--secao) * .4); z-index: -1;
  border-top: 1px solid rgb(201 160 58 / .3); background: linear-gradient(rgb(0 0 0 / .28), rgb(0 0 0 / .45));
}
.sala-topo { grid-column: 1 / -1; display: grid; gap: var(--e-3); margin-bottom: var(--e-7); }
.sala-topo .titulo { font-size: var(--t-1); }
.sala-dica { color: var(--papel-2); }
@media (hover: hover) { .sala-dica { display: none; } }

.parede { grid-column: 1 / -1; display: grid; row-gap: var(--e-6); padding-top: var(--e-3); }
.quadro-foto { position: relative; display: grid; justify-items: center; width: 95%; margin: 0; }
.quadro-foto:nth-child(odd) { justify-self: start; }
.quadro-foto:nth-child(even) { justify-self: end; }
.js .quadro-foto { opacity: 0; translate: 0 40px; transition: opacity 1.1s var(--curva) var(--atraso, 0s), translate 1.1s var(--curva) var(--atraso, 0s); }
.js .quadro-foto.acesa { opacity: 1; translate: none; }

/* luminária de quadro: acende quando a foto entra na tela */
.luminaria { position: absolute; z-index: 4; top: -22px; left: 50%; width: 34%; min-width: 84px; height: 10px; translate: -50% 0; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #f3e1a0, #b08a2e 55%, #6b4f12); box-shadow: 0 4px 8px rgb(0 0 0 / .55); }
.luminaria::before { content: ''; position: absolute; left: 50%; bottom: calc(100% - 2px); width: 3px; height: 15px; translate: -50% 0; background: linear-gradient(90deg, #6b4f12, #d9b85c, #6b4f12); }
.luminaria::after { content: ''; position: absolute; left: 7%; right: 7%; top: 100%; height: 2px; background: #fff6dc; box-shadow: 0 0 12px 3px rgb(255 236 190 / .8); opacity: 0; }
.quadro-foto::before { /* a luz lavando a moldura e o alto da foto */
  content: ''; position: absolute; z-index: 3; left: -10%; right: -10%; top: -12px; height: 78%; pointer-events: none; opacity: 0;
  background: conic-gradient(at 50% -40%, rgb(255 238 200 / 0) 148deg, rgb(255 238 200 / .3) 166deg 194deg, rgb(255 238 200 / 0) 212deg);
  -webkit-mask-image: linear-gradient(#000 0, rgb(0 0 0 / .6) 40%, transparent 100%); mask-image: linear-gradient(#000 0, rgb(0 0 0 / .6) 40%, transparent 100%);
  mix-blend-mode: screen;
}
.quadro-foto::after { /* a luz batendo na parede atrás */
  content: ''; position: absolute; z-index: -1; left: -22%; right: -22%; top: -140px; bottom: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(255 238 200 / .12), rgb(255 238 200 / 0) 100%);
}
.acesa .luminaria::after, .quadro-foto.acesa::before, .quadro-foto.acesa::after { animation: acende 1.3s var(--atraso, 0s) both; }
@keyframes acende { 0% { opacity: 0; } 9% { opacity: .9; } 13% { opacity: .1; } 21% { opacity: 1; } 25% { opacity: .35; } 34%, 100% { opacity: 1; } }

/* moldura: chanfro em 45 graus pelas bordas coloridas, filete interno e sombra na parede */
.moldura {
  --borda: clamp(12px, 1.6vw, 22px);
  position: relative; z-index: 1; display: block; width: 100%; padding: var(--borda); border: 0; color: inherit; cursor: zoom-in;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sobe, 0px));
  transition: transform .6s var(--curva), box-shadow .6s var(--curva);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 42px 70px -28px rgb(0 0 0 / .92), 0 16px 26px -14px rgb(0 0 0 / .75);
}
.moldura::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: var(--borda) solid; border-color: rgb(255 250 230 / .3) rgb(0 0 0 / .24) rgb(0 0 0 / .42) rgb(255 250 230 / .13); }
.moldura::after { content: ''; position: absolute; inset: calc(var(--borda) - 4px); z-index: 1; pointer-events: none; border: 1px solid var(--filete-moldura, rgb(255 236 180 / .6)); box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
.moldura:hover, .moldura:focus-visible { --sobe: -6px; box-shadow: 0 0 0 1px rgb(0 0 0 / .65), 0 64px 90px -30px rgb(0 0 0 / .96), 0 24px 34px -16px rgb(0 0 0 / .8); }
.moldura:focus-visible { outline: 2px solid var(--papel); outline-offset: 8px; }
.passe { position: relative; display: block; padding: clamp(16px, 3.4vw, 46px); background-color: #EAE3CF; background-image: var(--grao-escuro); box-shadow: inset 2px 3px 9px rgb(0 0 0 / .42), inset 0 0 0 1px rgb(0 0 0 / .25); }
.janela { position: relative; display: block; overflow: hidden; background: var(--cor, var(--mata)); box-shadow: 0 0 0 1px rgb(0 0 0 / .28), 0 0 0 3px #FBF8EF, 0 0 0 4px rgb(0 0 0 / .14); }
.janela img { display: block; width: 100%; height: auto; transition: transform 1.4s var(--curva); }
.moldura:hover .janela img { transform: scale(1.025); }
.vidro { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / .16) 47%, rgb(255 255 255 / 0) 58%) no-repeat; background-size: 260% 100%; background-position: 110% 0; transition: background-position 1.4s var(--curva); }
.vidro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 42%); }
.moldura:hover .vidro, .moldura:focus-visible .vidro { background-position: -10% 0; }
@media (prefers-reduced-motion: no-preference) {
  .acesa .vidro { animation: reflexo 1.8s var(--curva) calc(var(--atraso, 0s) + .5s) both; }
  @keyframes reflexo { from { background-position: 110% 0; } to { background-position: -10% 0; } }
}

/* três molduras que se alternam na parede */
.estilo-ouro .moldura { --borda: clamp(14px, 2vw, 28px); background:
  repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 1px, rgb(0 0 0 / 0) 1px 4px),
  linear-gradient(135deg, #6b4f12, #c9a03a 14%, #f4e2a0 27%, #b08a2e 42%, #e9cf7a 58%, #8d6b1f 74%, #d9b85c 88%, #6b4f12); }
.estilo-ouro .passe { box-shadow: 0 0 0 2px #5c430f, 0 0 0 3px rgb(255 236 180 / .55), inset 2px 3px 9px rgb(0 0 0 / .42), inset 0 0 0 1px rgb(0 0 0 / .25); }
.estilo-noite .moldura { --borda: clamp(9px, 1.1vw, 13px); --filete-moldura: rgb(201 160 58 / .75); background: linear-gradient(135deg, #3a3933, #0b0b0a 34%, #1e1d1a 58%, #020202 84%, #2c2b27); }
.estilo-noite .passe { padding: max(20px, 8%); }
.estilo-verde .moldura { --borda: clamp(10px, 1.3vw, 16px); background:
  repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 1px, rgb(0 0 0 / 0) 1px 4px),
  linear-gradient(135deg, #8d6b1f, #e9cf7a 22%, #b08a2e 46%, #f4e2a0 64%, #8d6b1f 86%, #c9a03a); }
.estilo-verde .passe { background-color: #0B3A22; background-image: radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 60%), var(--grao-escuro); }
.estilo-verde .janela { box-shadow: 0 0 0 1px #000, 0 0 0 4px #c9a03a, 0 0 0 5px #5c430f, 0 6px 16px rgb(0 0 0 / .5); }

/* plaquinha de latão com a legenda */
.placa { position: relative; max-width: min(92%, 30rem); margin-top: 20px; padding: 10px 26px; text-align: center; color: #1f1503;
  background: linear-gradient(180deg, #f6e6ad, #d6b45a 62%, #b8923a);
  box-shadow: inset 0 1px 0 rgb(255 250 225 / .8), inset 0 -1px 0 rgb(60 40 6 / .55), 0 0 0 1px rgb(60 40 6 / .5), 0 8px 14px -6px rgb(0 0 0 / .7);
  font: italic 600 clamp(.95rem, 1.15vw, 1.0625rem)/1.3 var(--f-display); font-variation-settings: var(--opsz-display); text-shadow: 0 1px 0 rgb(255 245 210 / .55); }
.placa::before, .placa::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #6b4f12 70%); box-shadow: 0 1px 0 rgb(255 250 225 / .5); }
.placa::before { left: 9px; }
.placa::after { right: 9px; }

@media (min-width: 640px) and (max-width: 1023px) {
  .parede { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--calha); row-gap: var(--e-7); }
  .quadro-foto { width: 100%; }
  .quadro-foto:nth-child(even) { margin-top: var(--e-7); }
}
@media (min-width: 1024px) {
  .parede { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); row-gap: var(--e-7); align-items: start; padding-top: var(--e-4); }
  .quadro-foto { width: 100%; grid-column: var(--ini) / span var(--sp); }
  .quadro-foto:nth-child(4n+1) { --ini: 1; --sp: 7; }
  .quadro-foto:nth-child(4n+2) { --ini: 9; --sp: 4; margin-top: var(--e-7); }
  .quadro-foto:nth-child(4n+3) { --ini: 2; --sp: 5; }
  .quadro-foto:nth-child(4n+4) { --ini: 7; --sp: 6; margin-top: var(--e-6); }
  .quadro-foto.retrato { --sp: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .js .quadro-foto { opacity: 1; translate: none; }
  .luminaria::after, .quadro-foto::before, .quadro-foto::after { opacity: 1; animation: none; }
  .moldura { transform: none; }
  .pelicula { transform: none; }
}

.gal-corpo { padding-top: var(--e-6); }
.gal-vazio { grid-column: 1 / -1; display: grid; gap: var(--e-3); }
.gal-vazio .dica { color: var(--papel-2); }
.gal-pauta { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--calha); margin-top: var(--e-3); }

.gal-pe .grade { row-gap: var(--e-4); }
.gal-acoes { grid-column: 1 / -1; }

/* foto ampliada, com moldura fina de ouro */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(6 20 13 / .97); color: var(--papel); }
.lightbox::backdrop { background: rgb(6 20 13 / .9); }
.lightbox[open] { display: grid; place-items: center; }
.lb-figura { display: grid; justify-items: center; gap: 14px; max-width: min(92vw, 1600px); margin: 0; }
.lb-moldura { display: block; padding: 8px; background: linear-gradient(135deg, #6b4f12, #e9cf7a 25%, #b08a2e 50%, #f4e2a0 70%, #8d6b1f); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .9); }
.lb-figura img { display: block; width: auto; height: auto; max-width: calc(92vw - 16px); max-height: calc(78dvh - 16px); object-fit: contain; }
.lb-figura figcaption { display: flex; justify-content: space-between; gap: 16px; width: 100%; font-size: .9375rem; color: var(--papel-2); }
.lb-legenda { font: italic 500 1.0625rem/1.35 var(--f-display); color: var(--papel); font-variation-settings: var(--opsz-display); }
.lb-botao { position: absolute; min-width: 52px; min-height: 52px; border: 1px solid var(--filete-forte); background: rgb(6 20 13 / .6); color: var(--papel); cursor: pointer; font: 400 1.25rem/1 var(--f-mono); }
.lb-botao:hover { border-color: var(--papel); }
.lb-anterior { left: 16px; top: 50%; translate: 0 -50%; }
.lb-proxima { right: 16px; top: 50%; translate: 0 -50%; }
.lb-fechar { top: 16px; right: 16px; padding: 0 16px; font: 500 var(--t-meta)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 639px) { .lb-anterior, .lb-proxima { top: auto; bottom: 16px; translate: none; } }