/* Roberti — seção Obras.
   Visor, não grade. A foto aérea é o produto, então ela ocupa o palco; a lista
   de obras à direita é a navegação, agrupada por cidade. Trocar de obra troca o
   palco no lugar -- sem abrir outra tela, porque o detalhe É a seção.
   Fundo escuro de propósito: os galpões são claros contra céu, e sobre a tinta
   da marca eles viram o assunto em vez de disputar com o papel.

   Cor e tipografia vêm de marca.css. Esta folha não declara nenhuma. */
@import url("marca.css");

* { box-sizing: border-box; }

.obras {
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--fonte-texto);
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
}
.obras-interno {
  max-width: var(--largura-max); margin: 0 auto;
  position: relative;   /* o conteúdo fica acima do padrão de fundo */
}

/* ---------- cabeçalho ---------- */
.obras-topo {
  display: block;
  padding-bottom: clamp(20px, 2.6vw, 34px);
  margin-bottom: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--papel-12);
}
.obras-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: 11.5px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--claro); margin: 0 0 16px;
}
.obras-titulo {
  font-family: var(--fonte-titulo); font-weight: 300;
  font-size: clamp(28px, 4.6vw, 58px);
  line-height: 1.03; letter-spacing: -.02em; margin: 0; max-width: 24ch;
}
.obras-titulo b { font-weight: 400; }

/* ---------- visor: palco + lista ---------- */
.visor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(248px, 22vw, 326px);
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
}

.palco { margin: 0; }
.palco-quadro {
  position: relative; overflow: hidden;
  /* altura pelo viewport, nao por proporcao: com aspect-ratio a tira de midias
     caia abaixo da dobra em tela de 1000px -- e ela e o que deixa ver mais da obra */
  height: clamp(330px, 52vh, 620px); background: var(--tinta-fundo);
  cursor: zoom-in;
  border-left: 3px solid var(--claro);   /* o pilar do vão */
}
.palco-quadro > img, .palco-quadro > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.palco-quadro > img { animation: entrar .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes entrar { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

.palco-sombra {
  position: absolute; inset: auto 0 0 0; height: 64%;
  background: linear-gradient(180deg, #1b1b3700, #1b1b37db 60%, var(--tinta));
  pointer-events: none;
}
.palco-texto {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(18px, 2.6vw, 36px);
  pointer-events: none;
}
.palco-nome {
  font-family: var(--fonte-titulo); font-weight: 300;
  font-size: clamp(26px, 3.9vw, 50px); line-height: 1; letter-spacing: -.02em;
  margin: 0 0 9px;
}
.palco-linha {
  font-size: clamp(13px, 1.05vw, 15.5px); color: var(--papel-70); margin: 0; max-width: 62ch;
}
.palco-linha em { font-style: normal; color: var(--claro); }

/* tira de mídias da obra atual */
.tira {
  display: flex; gap: 6px; margin-top: 6px; overflow-x: auto;
  scrollbar-width: thin; padding-bottom: 4px;
}
.tira button {
  appearance: none; padding: 0; border: 0; background: var(--tinta-fundo);
  flex: 0 0 clamp(86px, 8.6vw, 124px); aspect-ratio: 4 / 3;
  cursor: pointer; position: relative; overflow: hidden;
  opacity: .46; transition: opacity .2s;
}
.tira button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tira button:hover { opacity: .82; }
.tira button[aria-current="true"] { opacity: 1; }
.tira button[aria-current="true"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--claro);
}
.tira .marca-video {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 20px; text-shadow: 0 1px 6px #000a; pointer-events: none;
}

/* ---------- lista de obras, agrupada por cidade ---------- */
.lista {
  border-top: 1px solid var(--papel-12);
  max-height: clamp(400px, 60vh, 720px);
  overflow-y: auto;
}
.lista-cidade {
  font-family: var(--fonte-titulo); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--claro);
  padding: 17px 2px 7px; margin: 0;
  position: sticky; top: 0; background: var(--tinta);
}
.lista-cidade span { color: var(--papel-55); margin-left: 6px; }
.lista-item {
  appearance: none; width: 100%; text-align: left; background: none;
  border: 0; border-top: 1px solid var(--papel-12);
  padding: 11px 2px 11px 14px; cursor: pointer; color: var(--papel-70);
  font: inherit; position: relative; transition: color .18s; display: block;
}
.lista-item:hover { color: var(--papel); }
.lista-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--degrade); transform: scaleY(0); transform-origin: center;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.lista-item[aria-current="true"] { color: var(--papel); }
.lista-item[aria-current="true"]::before { transform: scaleY(1); }
.lista-nome {
  display: block; font-family: var(--fonte-titulo); font-size: 15px; letter-spacing: -.004em;
}
.lista-midias {
  display: block; font-family: var(--fonte-titulo); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--papel-55); margin-top: 3px;
}
.lista-item:focus-visible, .tira button:focus-visible {
  outline: 2px solid var(--claro); outline-offset: 2px;
}

@media (max-width: 940px) {
  .visor { grid-template-columns: 1fr; }
  .lista { max-height: 330px; }
  }
@media (prefers-reduced-motion: reduce) {
  .palco-quadro > img { animation: none; }
  .lista-item::before { transition: none; }
}

/* ---------- ampliar: a mesma linguagem, só sem moldura ----------
   Pedido do Gustavo: clicar na foto e ver grande. Mantém a tinta, a fonte de título e o
   ciano da marca para não parecer outra tela -- é o mesmo visor sem o recorte. */
.ampliar {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: #16162ef7; backdrop-filter: blur(8px);
  place-items: center;
}
.ampliar.aberta { display: grid; }
.ampliar-palco {
  max-width: 94vw; max-height: 86vh;
  display: grid; place-items: center;
}
.ampliar-palco img, .ampliar-palco video {
  max-width: 94vw; max-height: 86vh;
  width: auto; height: auto; object-fit: contain; display: block;
  border-left: 3px solid var(--claro);
}
.ampliar-legenda {
  position: fixed; left: 0; right: 0; bottom: 22px;
  text-align: center; font-family: var(--fonte-titulo); font-size: 13px;
  letter-spacing: .04em; color: var(--papel-70); pointer-events: none;
}
.ampliar-legenda b { color: var(--papel); font-weight: 400; margin-right: 10px; }
.ampliar-legenda em { font-style: normal; color: var(--claro); }
.ampliar-fechar, .ampliar-passo {
  position: fixed; appearance: none; cursor: pointer;
  background: #eff0f21f; border: 1px solid var(--papel-12); color: var(--papel);
  font-family: var(--fonte-titulo); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; border-radius: 999px; padding: 10px 18px;
  transition: background .18s;
}
.ampliar-fechar:hover, .ampliar-passo:hover { background: #eff0f233; }
.ampliar-fechar { top: 20px; right: 22px; }
.ampliar-passo { top: 50%; transform: translateY(-50%); padding: 14px 16px; font-size: 16px; }
.ampliar-passo.ant { left: 18px; }
.ampliar-passo.pro { right: 18px; }
.ampliar-passo[hidden] { display: none; }
.ampliar-fechar:focus-visible, .ampliar-passo:focus-visible {
  outline: 2px solid var(--claro); outline-offset: 2px;
}
@media (max-width: 640px) {
  .ampliar-passo { top: auto; bottom: 62px; transform: none; }
}