/* Galeria independente: preserva o design aprovado do restante do site. */
.obras { background: #101010; border-block: 1px solid #ffffff0d; }
.obras-intro { max-width: 680px; margin: 16px auto 0; color: #bdbdbd; line-height: 1.8; }
.obras-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 24px; }
.obra-card { margin: 0; grid-column: span 2; min-width: 0; background: #171717; border: 1px solid #ffffff17; border-radius: 14px; overflow: hidden; }
.obra-destaque { grid-column: span 3; }
.obra-abrir { display: block; position: relative; text-decoration: none; background: #0a0a0a; }
.obra-abrir img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; }
.obra-ampliar { position: absolute; top: 12px; right: 12px; color: #fff; background: #090909cf; border: 1px solid #ffffff40; border-radius: 6px; padding: 5px 10px; font-size: 12px; }
.obra-card figcaption { padding: 22px; }
.obra-etapa { color: #f36560; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 600; }
.obra-card h3 { font-size: 20px; line-height: 1.3; margin: 8px 0; color: #fff; }
.obra-card p { font-size: 14px; line-height: 1.75; color: #bdbdbd; }
.obra-abrir:hover .obra-ampliar { background: #b91f1b; }
.obras-rodape { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.obras-rodape p { color: #aaa; font-size: 12px; }
.obras-rodape a { display: inline-flex; text-align: center; }
.obra-dialog:not([open]) { display: none; }
.obra-dialog { margin: auto; width: min(1100px,94vw); max-width: 94vw; max-height: 94vh; max-height: 94dvh; padding: 0; overflow: auto; color: #fff; background: #111; border: 1px solid #ffffff30; border-radius: 14px; }
.obra-dialog::backdrop { background: #000d; }
.obra-dialog-conteudo { padding: 18px; }
.obra-dialog-topo, .obra-dialog-navegacao { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.obra-dialog-topo { margin-bottom: 12px; }
.obra-dialog-topo p { color: #bdbdbd; font: 14px Outfit,system-ui,sans-serif; }
.obra-dialog button { font: 14px Outfit,system-ui,sans-serif; color: #fff; background: #252525; border: 1px solid #ffffff26; border-radius: 7px; padding: 10px 16px; min-height: 44px; }
.obra-dialog button:hover { background: #b91f1b; }
.obra-dialog-imagem { display: block; width: 100%; height: auto; max-height: 64vh; max-height: 64dvh; object-fit: contain; background: #090909; }
.obra-dialog-legenda { margin: 14px 0; font-family: Outfit,system-ui,sans-serif; }
.obra-dialog-legenda h2 { font-size: 21px; line-height: 1.3; }
.obra-dialog-legenda p { color: #bdbdbd; font-size: 14px; margin-top: 5px; }
.obra-abrir:focus-visible, .obra-dialog button:focus-visible { outline: 3px solid #ff8078; outline-offset: -3px; }
@media (min-width:769px) and (max-width:1000px) { .nav-links { gap: 16px; } .nav-links a { font-size: 14px; } }
@media (max-width:900px) {
  .obras-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .obra-card, .obra-destaque { grid-column: span 1; }
  .obra-card:last-child { grid-column: 1 / -1; max-width: 550px; width: 100%; justify-self: center; }
}
@media (max-width:600px) {
  .obras-grid { grid-template-columns: minmax(0,1fr); }
  .obra-card figcaption { padding: 18px; }
  .obras-rodape { align-items: stretch; flex-direction: column; }
  .obras-rodape a { justify-content: center; }
  .obra-dialog-conteudo { padding: 12px; }
  .obra-dialog-imagem { max-height: 55vh; max-height: 55dvh; }
}