/* ============================================================
   LAYOUT.CSS — Estrutura macro da página
   ------------------------------------------------------------
   Define a barra de navegação superior, o espaçamento padrão
   entre seções e o rodapé. Estes três blocos formam o
   "esqueleto" de layout reutilizado por todas as páginas.
   ============================================================ */


/* ------------------------------------------------------------
   1) NAV — Barra fixa no topo
   Fica sobre o hero (z-index 100), com fundo em gradiente
   preto que se dissolve para baixo. Contém logo + links + CTA.
   ------------------------------------------------------------ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(6,8,10,.96) 0%, transparent 100%);
}

/* Logo: imagem com altura fixa e leve glow dourado */
.logo-wrap {
  display: flex;
  align-items: center;
}
.logo-wrap img {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(200,132,10,.4));
}

/* Links de navegação centrais */
.nav-links {
  display: flex;
  gap: 44px;
  list-style: none;
}
.nav-links a {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover {
  color: var(--goldlight);
}

/* Botão "Orçamento" à direita */
.nav-btn {
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 10px 22px;
  cursor: none;
  transition: all .22s;
}
.nav-btn:hover {
  background: var(--gold);
  color: var(--black);
}


/* ------------------------------------------------------------
   2) SECTION BASE
   Espaçamento vertical generoso (130px) por padrão para dar o
   ritmo "editorial" do site. Sobrescrito por seções como
   .showreel-section que removem o padding superior.
   ------------------------------------------------------------ */
section {
  padding: 130px 60px;
}


/* ------------------------------------------------------------
   3) FOOTER
   Grid de 4 colunas: branding + 3 listas (Serviços, Loja, Contato).
   A barra inferior (.foot-bottom) aparece DEPOIS do </footer>
   no HTML, separada visualmente por uma linha dourada sutil.
   ------------------------------------------------------------ */
footer {
  padding: 68px 60px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
}
.fb p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 20px;
  max-width: 300px;
  font-style: italic;
}
.fc-t {
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 22px;
}
.fc-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-links a {
  font-size: .9rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  font-style: italic;
}
.fc-links a:hover {
  color: var(--goldlight);
}

/* Barra inferior de copyright + certificações */
.foot-bottom {
  padding: 22px 60px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.foot-bottom span {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--muted);
}
.foot-bottom a {
  color: var(--gold);
  text-decoration: none;
}