/* ==========================================================
   PROJETOS — o salão de arcos (abre por cima da página)
   Referência: transição em névoa, salão branco com arcos,
   borboletas de papel e grade curvada de projetos.
   ========================================================== */

.salao {
  position: fixed; inset: 0; z-index: 70;
  overflow-y: auto; overscroll-behavior: contain;
  color: #16214F;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.salao.is-aberto { opacity: 1; visibility: visible; transition: opacity .9s ease .25s, visibility 0s; }
.salao[hidden] { display: none; }

/* fundo: o salão, levemente maior para poder acompanhar o mouse */
.salao__fundo { position: fixed; inset: -4%; z-index: -3; overflow: hidden; }
.salao__fundo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) scale(calc(1.06 + var(--zoom, 0)));
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
.salao:not(.is-aberto) .salao__fundo img { --zoom: .12; }
.salao__borboletas { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; pointer-events: none; }
.salao__nevoa {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 28%, rgba(255, 255, 255, .62), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%, rgba(234, 236, 250, .55));
}

.salao__topo {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter, 32px);
  background: rgba(246, 247, 253, .55);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.salao__topo .brand__name { color: #16214F; }
.salao__fechar {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(22, 33, 79, .14);
  background: rgba(255, 255, 255, .7); color: #16214F; font: 600 14px/1 var(--font-body, sans-serif);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .3s, transform .3s;
}
.salao__fechar:hover { background: #fff; transform: translateY(-1px); }
.salao__fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.salao__conteudo { max-width: 1120px; margin: 0 auto; padding: 4vh var(--gutter, 32px) 14vh; text-align: center; }
.salao__titulo { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: #16214F; }
.salao__titulo .serifa { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.08em; }
.salao__sub { margin: 16px auto 0; max-width: 520px; color: #4C5880; font-size: 15.5px; }

.salao__filtros { margin-top: 26px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.filtro {
  border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  background: transparent; color: #4C5880; font: 600 13px/1 var(--font-body, sans-serif);
  transition: background-color .3s, color .3s;
}
.filtro sup { font-size: 9px; margin-left: 2px; opacity: .7; }
.filtro:hover { color: #16214F; }
.filtro.is-ativo { background: #16214F; color: #fff; }

/* grade de 2 colunas, curvada como a parede de um cilindro (o JS ajusta a curva) */
.salao__grade { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 26px; perspective: 1500px; text-align: left; }
.obra {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; text-align: left;
  transform: rotateY(var(--cy, 0deg)) rotateX(var(--cx, 0deg)) translateZ(var(--cz, 0px)) scale(var(--ce, 1));
  transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
  opacity: 0;
}
.salao.is-aberto .obra { opacity: 1; }
.obra.is-oculta { display: none; }
.obra__img {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px;
  background: #0A1636; box-shadow: 0 30px 60px -34px rgba(22, 33, 79, .55);
}
.obra__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.obra:hover .obra__img img { transform: scale(1.04); }
/* carrossel: três slides inteiros, abertos em leque */
.obra__img--carrossel { display: flex; align-items: center; justify-content: center; background: radial-gradient(80% 90% at 50% 40%, #1D4BA8, #0B1A42 75%); }
.obra__img--carrossel img {
  position: relative; flex: none; width: auto; height: 72%; aspect-ratio: 4 / 5; object-fit: cover;
  margin: 0 -5%; border-radius: 4px; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .7);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.obra__img--carrossel img:nth-child(1) { transform: rotate(-7deg) translate(-4%, 4%); }
.obra__img--carrossel img:nth-child(2) { z-index: 2; transform: translateY(-3%) scale(1.04); }
.obra__img--carrossel img:nth-child(3) { transform: rotate(7deg) translate(4%, 4%); }
.obra:hover .obra__img--carrossel img:nth-child(1) { transform: rotate(-11deg) translate(-14%, 5%); }
.obra:hover .obra__img--carrossel img:nth-child(2) { transform: translateY(-6%) scale(1.08); }
.obra:hover .obra__img--carrossel img:nth-child(3) { transform: rotate(11deg) translate(14%, 5%); }
.obra__rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 2px 10px; border-bottom: 1px solid rgba(22, 33, 79, .55); }
.obra__texto strong { display: block; font: 600 14.5px/1.3 var(--font-body, sans-serif); color: #16214F; }
.obra__texto small { display: block; margin-top: 2px; font-size: 13px; color: #4C5880; }
.obra__seta { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: #16214F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.obra:hover .obra__seta { transform: translate(2px, 2px); }

.salao__cta { margin-top: 12vh; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.salao__cta p { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -0.04em; color: #16214F; }
.salao__cta .serifa { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }

/* ---------- visor de carrossel ---------- */
.visor { width: min(1100px, 94vw); padding: 0; border: 0; border-radius: 22px; background: #F7F6FC; color: #16214F; overflow: hidden; }
.visor::backdrop { background: rgba(240, 240, 250, .7); backdrop-filter: blur(8px); }
.visor__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px; border-bottom: 1px solid rgba(22, 33, 79, .1); }
.visor__slides { display: flex; gap: 14px; padding: 22px 26px; overflow-x: auto; scroll-snap-type: x mandatory; }
.visor__slides img { flex: 0 0 auto; width: min(320px, 70vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; scroll-snap-align: start; box-shadow: 0 20px 40px -24px rgba(22, 33, 79, .5); }
.visor__link { display: block; padding: 0 26px 24px; font-weight: 600; font-size: 14px; color: #2B57D6; text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================
   TRANSIÇÃO: a cena clareia em névoa antes de abrir os projetos
   ========================================================== */
.portal {
  position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 55%, #fff 0%, rgba(245, 246, 253, .96) 45%, rgba(236, 238, 250, .9) 100%);
  transition: opacity .7s ease;
}
html.indo-projetos .portal { opacity: 1; }
html.indo-projetos .hero__conteudo { transform: scale(1.06) translateY(-10px); filter: blur(6px); opacity: 0; }
.hero__conteudo { transition: transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s ease, opacity .7s ease; }
html.no-salao .portal { opacity: 0; transition-duration: 1.1s; }

/* ==========================================================
   CURSOR: um anel que persegue a seta
   ========================================================== */
.cursor-anel {
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  width: 30px; height: 18px; margin: -9px 0 0 -15px; border-radius: 50%;
  border: 1.4px solid rgba(22, 33, 79, .55);
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) rotate(var(--r, -14deg)) scale(var(--s, 1));
  transition: width .35s cubic-bezier(.16, 1, .3, 1), height .35s, margin .35s, border-color .3s, background-color .3s;
  mix-blend-mode: normal;
}
.cursor-anel.is-sobre { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(43, 87, 214, .7); background: rgba(43, 87, 214, .08); }
html.submerso-total .cursor-anel { border-color: rgba(230, 236, 255, .7); }
@media (hover: none), (pointer: coarse) { .cursor-anel { display: none; } }

/* ==========================================================
   TOPO no estilo da referência: título fino, centralizado
   ========================================================== */
.hero--cena .hero__title { font-weight: 500; letter-spacing: -0.05em; }
.hero--cena .linha--serif { font-weight: 400; }
.hero__title.com-lente { filter: url(#lente); }
.lente-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 760px) {
  .salao__grade { grid-template-columns: 1fr; gap: 34px; }
  .salao__titulo { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .obra, .salao__fundo img { transition: none; transform: none; }
  .portal { display: none; }
}

/* ==========================================================
   GRADE EM WEBGL (js/salao-gl.js): as imagens são desenhadas
   na tela com a lente; o HTML fica só para o clique e o texto
   ========================================================== */
.salao__fundo { z-index: -4; }
.salao__nevoa { z-index: -3; }
.salao__gl { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; pointer-events: none; }
.salao__borboletas { z-index: -1; }
.salao.com-gl .obra { transform: none; }
.salao.com-gl .obra__img { background: transparent; box-shadow: none; }
.salao.com-gl .obra__img > img { opacity: 0; }
.salao.com-gl .obra__rodape { will-change: transform; }