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

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

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

.cabecalho__logo {
  display: block;
}

.logo {
  display: block;
  width: 200px; /* tamanho mínimo da versão horizontal no manual */
  height: auto;
  overflow: visible; /* as linhas da moldura saem um pouco para fora no hover */
}

/* --- Interação do logo: as quatro linhas de cota da moldura -----------------
   1. Ao abrir o site, as linhas se desenham a partir do centro (uma vez por visita;
      a classe .logo-visto no <html> é posta pelo script logo depois do <svg>).
   2. Com o mouse em cima, a moldura "se abre": as linhas se afastam um pouco. */
.logo__linha {
  transform-box: fill-box;
  transform-origin: center;
  transition: translate 0.3s ease-out;
}

.logo__linha--topo,
.logo__linha--base {
  animation: logo-desenha-h 0.7s ease-out both;
}

.logo__linha--esquerda,
.logo__linha--direita {
  animation: logo-desenha-v 0.7s ease-out 0.15s both;
}

@keyframes logo-desenha-h {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes logo-desenha-v {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

.logo-visto .logo__linha {
  animation: none;
}

.cabecalho__logo:hover .logo__linha--topo,
.cabecalho__logo:focus-visible .logo__linha--topo { translate: 0 -14px; }
.cabecalho__logo:hover .logo__linha--base,
.cabecalho__logo:focus-visible .logo__linha--base { translate: 0 14px; }
.cabecalho__logo:hover .logo__linha--esquerda,
.cabecalho__logo:focus-visible .logo__linha--esquerda { translate: -14px 0; }
.cabecalho__logo:hover .logo__linha--direita,
.cabecalho__logo:focus-visible .logo__linha--direita { translate: 14px 0; }

@media (prefers-reduced-motion: reduce) {
  .logo__linha {
    animation: none;
    transition: none;
  }
}

.menu__lista {
  list-style: none;
}

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

.menu__lista a:hover,
.menu__lista a[aria-current="page"] {
  color: var(--azul-ros);
}

/* 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(--azul-ros);
  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(--branco);
    border-bottom: 1px solid var(--azul-nevoa);
  }

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

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

  .menu__cta {
    width: 100%;
    margin-top: 1.5rem;
  }
}

/* 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.9375rem;
  }
}