/* ==========================================================================
   LAYOUT — cabeçalho, menu em tela cheia, busca e rodapé

   Como na referência: uma única faixa de cabeçalho, com o menu em botão
   "hambúrguer" à esquerda (também no desktop), o logotipo centralizado e,
   à direita, a busca e o botão de contato. A navegação vive num painel de
   tela cheia, aberto pelo hambúrguer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabeçalho principal
   -------------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--media);
}

.cabecalho.rolado {
  box-shadow: 0 1px 16px rgba(17, 17, 17, 0.07);
}

/* Fio dourado no alto da página: primeira aparição da cor da marca. */
.cabecalho::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--ouro);
}

/* --------------------------------------------------------------------------
   1b. Cabeçalho escuro (página inicial)

   O logotipo é desenhado sobre preto. Na página inicial, cabeçalho e primeira
   seção formam um bloco escuro contínuo, o que emenda o fundo do logotipo com
   o da página. Nas páginas internas o cabeçalho segue claro.
   -------------------------------------------------------------------------- */

.cabecalho--escuro {
  background: var(--escuro);
  border-bottom-color: var(--escuro-linha);
}

.cabecalho--escuro.rolado {
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.45);
}

.cabecalho--escuro .acao-cabecalho {
  color: var(--sobre-escuro);
  border-color: var(--escuro-linha);
}

.cabecalho--escuro .acao-cabecalho:hover {
  border-color: var(--ouro);
  color: var(--ouro-claro);
}

/* A marca fica centralizada na faixa. As ações das pontas são posicionadas
   por cima, fora do fluxo, para que a largura de nenhuma delas empurre o
   logotipo para fora do centro da tela. */
.cabecalho__interno {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--container);
  min-height: var(--altura-cabecalho);
  margin-inline: auto;
  padding: 14px var(--pad-x);
}

/* Marca */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* O logotipo é uma peça larga (2,71:1). A altura é que comanda: a largura
   sai da proporção, por isso `width: auto`. */
.marca__logo {
  display: block;
  width: auto;
  height: 68px;
  flex-shrink: 0;
}

/* Telas muito estreitas: a esta altura o logotipo encostaria no botão do
   menu, que fica ancorado na borda. */
@media (max-width: 359px) {
  .marca__logo {
    height: 52px;
  }
}

@media (min-width: 600px) {
  .marca__logo {
    height: 84px;
  }
}

@media (min-width: 1080px) {
  .marca__logo {
    height: 100px;
  }
}

/* Etiqueta ao lado do logotipo (usada no painel: "Painel"). */
.marca__etiqueta {
  padding-left: 12px;
  border-left: 1px solid var(--linha);
  font-size: 0.6875rem;
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Ações das pontas do cabeçalho
   -------------------------------------------------------------------------- */

/* Botões quadrados de ícone: hambúrguer à esquerda, busca à direita. */
.acao-cabecalho {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--tinta);
  border: 1px solid var(--linha);
  transition: border-color var(--rapida), color var(--rapida), background-color var(--rapida);
}

.acao-cabecalho:hover {
  border-color: var(--ouro);
  color: var(--ouro-tinta);
}

.acao-cabecalho svg {
  width: 19px;
  height: 19px;
}

/* Grupo da esquerda: o hambúrguer e, a partir do tablet, a palavra "Menu" —
   como na referência, para que o ícone não fique sozinho e ambíguo. */
.cabecalho__esquerda {
  position: absolute;
  top: 50%;
  left: var(--pad-x);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cabecalho__rotulo-menu {
  display: none;
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.cabecalho--escuro .cabecalho__rotulo-menu {
  color: var(--sobre-escuro-suave);
}

@media (min-width: 760px) {
  .cabecalho__rotulo-menu {
    display: block;
  }
}

.cabecalho__direita {
  position: absolute;
  top: 50%;
  right: var(--pad-x);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Abaixo de 768px o botão de contato encostaria no logotipo, que agora é
   grande e centralizado. Some do cabeçalho, mas o contato continua a um
   toque: o WhatsApp flutuante fica visível em todas as telas, e o menu traz
   telefone, WhatsApp e e-mail. */
.cabecalho__direita .botao {
  display: none;
}

@media (min-width: 768px) {
  .cabecalho__direita .botao {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   3. Botão do menu (hambúrguer)
   -------------------------------------------------------------------------- */

.alternador__barras {
  display: grid;
  gap: 5px;
  width: 19px;
}

.alternador__barras span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--media), opacity var(--rapida);
}

.alternador.aberto .alternador__barras span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.alternador.aberto .alternador__barras span:nth-child(2) {
  opacity: 0;
}
.alternador.aberto .alternador__barras span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. Menu em gaveta

   Painel escuro que desce colado à esquerda, abaixo do cabeçalho, deixando a
   página à mostra ao lado — como na referência. Vale em todas as larguras;
   no celular ocupa a tela inteira, porque ali não há "ao lado".
   -------------------------------------------------------------------------- */

/* O véu escurece a página atrás e fecha o menu ao ser clicado. */
.menu-veu {
  position: fixed;
  inset: 0;
  top: var(--altura-cabecalho);
  z-index: calc(var(--z-menu) - 1);
  background: rgba(9, 9, 9, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--media), visibility var(--media);
}

.menu-veu.aberto {
  opacity: 1;
  visibility: visible;
}

/* Valor de partida, válido com a página no topo; o JavaScript reposiciona
   conforme a base real do cabeçalho ao abrir o menu. */
.menu-tela {
  position: fixed;
  left: 0;
  top: var(--altura-cabecalho);
  bottom: 0;
  z-index: var(--z-menu);
  width: min(100%, 400px);
  padding: var(--gap-item) 0 var(--gap-bloco);
  background: var(--escuro);
  color: var(--sobre-escuro);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-16px);
  transition: opacity var(--rapida), transform var(--media), visibility var(--rapida);
}

.menu-tela.aberto {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* A gaveta não vai até o rodapé quando a lista é curta: a altura acompanha o
   conteúdo, como na referência, em vez de deixar uma faixa preta vazia. */
@media (min-width: 620px) {
  .menu-tela {
    bottom: auto;
    max-height: calc(100vh - var(--altura-cabecalho));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

.menu-tela__lista {
  display: flex;
  flex-direction: column;
}

.menu-tela__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px var(--pad-x);
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sobre-escuro);
  transition: background-color var(--rapida), color var(--rapida);
}

.menu-tela__link:hover,
.menu-tela__link:focus-visible {
  background: rgba(201, 162, 39, 0.14);
  color: var(--ouro-claro);
}

.menu-tela__link.ativo {
  color: var(--ouro-claro);
}

/* Faixa dourada marcando o item da página aberta. */
.menu-tela__link.ativo::before {
  content: '';
  position: absolute;
  left: 0;
  width: 3px;
  height: 22px;
  background: var(--ouro);
}

.menu-tela__item {
  position: relative;
}

/* ---- Item com submenu ---- */

.menu-tela__seta {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ouro);
  transition: transform var(--media);
}

.menu-tela__item.aberto .menu-tela__seta {
  transform: rotate(90deg);
}

.menu-tela__sub {
  display: none;
  flex-direction: column;
  padding-bottom: 10px;
  background: rgba(0, 0, 0, 0.35);
}

.menu-tela__item.aberto .menu-tela__sub {
  display: flex;
}

.menu-tela__sub a {
  padding: 11px var(--pad-x) 11px calc(var(--pad-x) + 18px);
  font-size: var(--t-mini);
  letter-spacing: 0.06em;
  color: var(--sobre-escuro-suave);
  border-left: 2px solid transparent;
  transition: color var(--rapida), border-color var(--rapida);
}

.menu-tela__sub a:hover {
  color: var(--sobre-escuro);
  border-left-color: var(--ouro);
}

/* ---- Rodapé da gaveta: área restrita ---- */

.menu-tela__rodape {
  margin-top: var(--gap-menor);
  padding-top: var(--gap-menor);
  border-top: 1px solid var(--escuro-linha);
}

.menu-tela__rodape a {
  display: block;
  padding: 13px var(--pad-x);
  font-size: var(--t-rotulo);
  color: var(--sobre-escuro-suave);
  transition: background-color var(--rapida), color var(--rapida);
}

.menu-tela__rodape a:hover {
  background: rgba(201, 162, 39, 0.14);
  color: var(--ouro-claro);
}

/* --------------------------------------------------------------------------
   5. Busca

   O painel desce do cabeçalho, ocupando a largura toda. Os resultados são
   montados em JavaScript a partir de um índice das páginas somado aos
   artigos do blog, buscados na API.
   -------------------------------------------------------------------------- */

.busca {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--altura-cabecalho);
  z-index: var(--z-menu);
  max-height: calc(100vh - var(--altura-cabecalho));
  padding: var(--gap-bloco) var(--pad-x);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--rapida), transform var(--media), visibility var(--rapida);
}

.busca.aberta {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.busca__interno {
  max-width: var(--container-texto);
  margin-inline: auto;
}

.busca__campo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ouro);
}

.busca__campo svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ouro-tinta);
}

.busca__campo input {
  flex: 1;
  min-width: 0;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

.busca__campo input::placeholder {
  color: var(--tinta-tenue);
  font-weight: var(--peso-normal);
}

.busca__fechar {
  flex-shrink: 0;
  padding: 6px;
  font-size: var(--t-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  transition: color var(--rapida);
}

.busca__fechar:hover {
  color: var(--tinta);
}

.busca__dica,
.busca__contagem {
  margin-top: 12px;
  font-size: var(--t-mini);
  color: var(--tinta-tenue);
}

.busca__resultados {
  display: flex;
  flex-direction: column;
  margin-top: var(--gap-item);
}

.busca__item {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
  transition: padding-left var(--media);
}

.busca__item:hover {
  padding-left: 8px;
}

.busca__tipo {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: var(--peso-medio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ouro-tinta);
}

.busca__titulo {
  display: block;
  font-size: var(--t-h3);
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

.busca__resumo {
  display: block;
  margin-top: 4px;
  font-size: var(--t-rotulo);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.busca__item mark {
  background: var(--ouro-veu);
  color: inherit;
  font-weight: var(--peso-medio);
}

/* --------------------------------------------------------------------------
   6. Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  background: var(--escuro);
  border-top: 3px solid var(--ouro);
  color: var(--sobre-escuro-suave);
  padding: var(--pad-y) var(--pad-x) 0;
}

.rodape__interno {
  display: flex;
  flex-direction: column;
  gap: var(--gap-bloco);
  max-width: var(--container);
  margin-inline: auto;
}

.rodape__topo {
  display: grid;
  gap: var(--gap-bloco);
}

@media (min-width: 900px) {
  .rodape__topo {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--gap-item);
  }
}

/* No rodapé escuro entra a versão branca do logotipo, um pouco maior por
   ser o fecho da página. */
.rodape .marca__logo {
  height: 48px;
}

.rodape__sobre {
  max-width: 38ch;
  margin-top: var(--gap-menor);
  font-size: var(--t-rotulo);
  line-height: 1.7;
}

.rodape__coluna h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--gap-menor);
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ouro-claro);
}

.rodape__coluna h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ouro-borda);
}

.rodape__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rodape__lista a {
  font-size: var(--t-rotulo);
  transition: color var(--rapida), padding-left var(--rapida);
}

.rodape__lista a:hover {
  color: var(--sobre-escuro);
  padding-left: 5px;
}

.rodape__contato {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
  font-size: var(--t-rotulo);
}

.rodape__contato strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1.125rem;
  font-weight: var(--peso-medio);
  color: var(--sobre-escuro);
}

.rodape__contato a:hover {
  color: var(--ouro-claro);
}

.rodape__endereco {
  font-style: normal;
  line-height: 1.7;
}

.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-menor);
  padding-block: var(--gap-item);
  border-top: 1px solid var(--escuro-linha);
  font-size: var(--t-mini);
  color: #8a8781;
}

.rodape__legal a:hover {
  color: var(--ouro-claro);
}