/* ==========================================================================
   Componente header — cabeçalho e menu
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabeçalho e menu
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--carrara);
  border-bottom: 1px solid var(--fio);
}

.cabecalho__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
}

.cabecalho__logo {
  display: block;
}

.logo {
  display: block;
  width: 150px;
  height: auto;
  transition: opacity 0.2s;
}

/* Logo: sem animação nem efeito — o manual não permite sombra, brilho ou distorção */
.cabecalho__logo:hover .logo {
  opacity: 0.85;
}

.menu__lista {
  list-style: none;
}

.menu__lista a {
  color: var(--nero);
  text-decoration: none;
}

/* Página atual em SemiBold (o destaque do cabeçalho é só o "Pedir orçamento", em vermelho) */
.menu__lista a:hover {
  color: var(--pedra);
}

.menu__lista a[aria-current="page"] {
  font-weight: var(--peso-semibold);
}

/* A única ação do cabeçalho: link em Vermelho Gramim, SemiBold */
.menu__cta {
  font-weight: var(--peso-semibold);
  color: var(--vermelho);
  text-decoration: none;
}

.menu__cta:hover {
  color: var(--vermelho-oxido);
}

/* Botão do menu (celular) */
.menu-botao {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: -0.75rem;
  border: 0;
  background: none;
  color: var(--nero);
  cursor: pointer;
}

.menu-botao__linhas,
.menu-botao__linhas::before,
.menu-botao__linhas::after {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s, opacity 0.2s;
}

.menu-botao__linhas {
  position: relative;
}

.menu-botao__linhas::before,
.menu-botao__linhas::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-botao__linhas::before { top: -7px; }
.menu-botao__linhas::after { top: 7px; }

.menu-botao[aria-expanded="true"] .menu-botao__linhas { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__linhas::before { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__linhas::after { transform: translateY(-7px) rotate(-45deg); }

/* Menu no celular e tablet: painel que abre abaixo do cabeçalho */
@media (max-width: 1199.98px) {
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 1rem 1rem 2rem;
    background: var(--carrara);
    border-bottom: 1px solid var(--fio);
  }

  .menu.esta-aberto {
    display: block;
  }

  .menu__lista a {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--fio);
    font-size: 1.125rem;
  }

  .menu__cta {
    display: block;
    margin-top: 1.5rem;
    font-size: 1.125rem;
  }
}

/* Menu no computador: horizontal */
@media (min-width: 1200px) {
  .menu-botao {
    display: none;
  }

  .menu {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }

  .menu__lista {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
  }

  .menu__cta {
    font-size: 0.875rem;
  }
}