/* =========================================================
   HEADER FIX — carregue este arquivo DEPOIS de style.css e
   animations.css. Ele sobrescreve apenas topbar/header/menu
   mobile para deixá-los fixos, com esconde/mostra no scroll,
   e corrige a posição do dropdown mobile.
   ========================================================= */

:root{
  /* valores de fallback — o JS (header-scroll.js) atualiza estes
     dois com a altura real, então funciona em qualquer tela */
  --topbar-h: 40px;
  --header-h: 84px;
}

/* compensa o espaço que topbar+header (agora fixos) deixariam de ocupar */
body{
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

/* âncoras internas (#historia, #orcamento) não ficam escondidas
   atrás da header fixa quando o usuário clica em um link do menu */
section[id]{
  scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 18px);
}


/* ---------- Pré-header (topbar) — agora fixa, no topo de tudo ---------- */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:90;
  transition: transform .45s cubic-bezier(.16,.84,.44,1);
  /* a borda original era pensada pra rolar junto com a página;
     fixa, ela virava uma linha "grudada" na tela — removida */
  border-bottom:none;
}

/* o painel do mapa vira um dropdown flutuante, sem empurrar a header */
.topbar__map{
  position:absolute;
  top:100%; left:0; right:0;
  max-height:0; overflow:hidden;
  background:var(--black);
  border-bottom:1px solid var(--line);
  border-radius:0 0 16px 16px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  transition:max-height var(--slow) var(--ease);
  z-index:1;
}
.topbar__map.is-open{ max-height:320px; }


/* ---------- Header — fixa logo abaixo da topbar ---------- */
.header{
  position:fixed;
  top:var(--topbar-h);
  left:0; right:0;
  z-index:85;
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    backdrop-filter var(--fast) var(--ease),
    padding var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    transform .45s cubic-bezier(.16,.84,.44,1);
  /* mesma razão da topbar: essa borda virava uma linha dura e
     "flutuante" sobre o conteúdo quando a header ficou fixa */
  border-bottom:none;
}

/* header já ganha profundidade suficiente com o blur + escurecimento
   do fundo (.is-scrolled acima) — nada de sombra/linha extra aqui */

/* estado "recolhido": topbar + header sobem e somem juntas ao
   descer a página; reaparecem no lugar certo ao subir */
body.hide-topheader .topbar,
body.hide-topheader .header{
  transform: translateY(-110%);
}
/* se o menu mobile estiver aberto, o JS não aplica hide-topheader —
   isso aqui é só uma garantia extra caso aconteça */
body.hide-topheader .mobile-nav.is-open,
body.hide-topheader .mobile-nav-backdrop.is-open{
  transform:none;
}


/* ---------- Menu mobile — corrigido para abrir ABAIXO da header,
   com um respiro extra, flutuando como um cartão premium ---------- */
.mobile-nav{
  position:fixed;
  top: calc(var(--topbar-h) + var(--header-h) + 12px);
  left:12px; right:12px;
  z-index:60;
  background:rgba(10,10,11,.97);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-radius:20px;
  border:1px solid transparent;
  max-height:0; overflow:hidden;
  /* visibility:hidden garante que o navegador não renderize NADA
     (nem o backdrop-filter) enquanto o menu está fechado — é isso
     que evita o vazamento da linha, algo que opacity/max-height
     sozinhos não conseguem evitar com backdrop-filter */
  visibility:hidden;
  transition:
    max-height .5s var(--ease),
    box-shadow .5s var(--ease),
    border-color .3s var(--ease),
    top .3s var(--ease),
    visibility 0s linear .5s;
}
.mobile-nav.is-open{
  max-height:520px;
  border-color:var(--line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  visibility:visible;
  transition:
    max-height .5s var(--ease),
    box-shadow .5s var(--ease),
    border-color .3s var(--ease),
    top .3s var(--ease),
    visibility 0s linear 0s;
}

.mobile-nav-backdrop{
  z-index:55;
  visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.mobile-nav-backdrop.is-open{
  visibility:visible;
  transition:opacity .4s var(--ease), visibility 0s linear 0s;
}

.wa-float{ z-index:50; }


/* ---------- Hero — compensa a altura da header fixa para
   continuar ocupando a tela cheia, como antes ---------- */
.hero{
  min-height: calc(100svh - var(--topbar-h) - var(--header-h));
}

@media (max-width:920px){
  .mobile-nav{ left:10px; right:10px; }
}


/* ============================================================
   VITRINE — LIGHTBOX (corrige o tamanho da foto real)
   O .lightbox__ph original era pensado só pra um placeholder de
   proporção fixa (4:5). Fotos reais vêm em proporções variadas
   (retrato, paisagem, quadrada...) e sem isso aqui a imagem
   "explode" e ocupa a tela inteira. Essas regras fazem a foto
   caber inteira dentro de um tamanho máximo, sem cortar nada,
   mantendo a proporção original, sempre centralizada.
============================================================ */
.lightbox__frame{
  max-width: 620px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.lightbox__ph{
  aspect-ratio: unset;
  width: auto;
  height: auto;
  max-height: 65vh;
  padding: 0;
  overflow: hidden;
  margin: 0 auto;
  background: none;
  border: none;
  flex-shrink: 1;
  min-height: 0;
}

.lightbox__ph img,
img[data-lightbox-img]{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg,#161618,#0a0a0b);
}

/* enquanto um item ainda não tem foto real (sem data-image), a
   imagem fica sem src — evita colapsar pra 0x0 */
img[data-lightbox-img]:not([src]){
  display: none;
}

.lightbox__meta{ flex-shrink: 0; }

@media (max-width:600px){
  .lightbox{ padding: 20px; }
  .lightbox__frame{ max-height: 92vh; }
  .lightbox__ph,
  .lightbox__ph img,
  img[data-lightbox-img]{
    max-height: 55vh;
  }
}