/* ==========================================================================
   7Bens Consórcios — estrutura compartilhada: cabeçalho, menu lateral,
   rodapé, botão do WhatsApp e fundo escurecido
   ========================================================================== */

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: absolute;
  top: 0;
  z-index: 7;
  display: block;
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .32);
  transition: top .3s;
}

.cabecalho .menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cabecalho .logo {
  width: 240px;
  height: auto;
}

.cabecalho .logo img {
  width: 100%;
}

.cabecalho .lista {
  display: flex;
}

.cabecalho .lista-item {
  margin-right: 6rem;
}

.cabecalho .lista-item:last-child {
  margin-right: 0;
}

.cabecalho .lista-item-link {
  color: #000;
  font-size: 1.5rem;
}

.cabecalho .lista-item-link:hover {
  color: var(--ouro);
}

/* ---------- Botão do menu (mobile) ---------- */
.toggle {
  position: fixed;
  top: 1.5rem;
  right: 4rem;
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem 3.5rem;
  color: #fff;
  background: var(--ouro);
  border-radius: 50px;
  outline: none;
  font-size: 1.5rem;
}

.toggle .texto-menu {
  margin-right: .75rem;
}

.toggle span,
.toggle span::before,
.toggle span::after {
  background-color: #fff;
}

.toggle span {
  position: relative;
  width: 1.75rem;
  height: 2px;
}

.toggle span::before,
.toggle span::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
}

.toggle span::before {
  top: 8px;
}

.toggle span::after {
  top: -8px;
}

.toggle:hover {
  color: var(--ouro);
}

.toggle:hover span,
.toggle:hover span::before,
.toggle:hover span::after {
  background-color: var(--ouro);
}

/* ---------- Menu lateral ---------- */
.menu-lateral {
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 100;
  width: 100%;
  height: 100%;
  visibility: hidden;
  transition: 500ms;
}

.menu-lateral.ativo {
  right: 0;
  visibility: visible;
  transition: 300ms;
}

.menu-lateral .nav-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 600px;
  height: 100%;
  margin-left: auto;
  padding-top: 7rem;
  padding-right: 8rem;
  background: var(--escuro);
}

.menu-lateral .item-menu {
  margin-bottom: 2.5rem;
  color: #fff;
  font-size: 1.875rem;
}

.menu-lateral .item-menu:last-child {
  margin-bottom: 0;
}

.menu-lateral .item-menu:hover {
  color: var(--ouro);
}

.menu-lateral .btn-fecha-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rem;
  color: var(--ouro);
  font-size: 1.375rem;
  transition: .3s;
}

.menu-lateral .btn-fecha-menu svg {
  width: 25px;
  height: 25px;
  margin-left: 25px;
  stroke: var(--ouro);
}

.menu-lateral .btn-fecha-menu:hover {
  opacity: .7;
}

.backdrop {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .32);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  will-change: opacity;
}

.backdrop.is-active {
  z-index: 99;
  opacity: 1;
  visibility: visible;
}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #fff;
  background-color: #25d366;
  border-radius: 50px;
  box-shadow: 1px 1px 2px #888;
}

.whatsapp svg {
  width: 27px;
  height: 27px;
  margin-top: 2px;
  fill: currentColor;
}

/* ---------- Rodapé ---------- */
.rodape {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: var(--escuro);
  border-bottom: 6px solid var(--ouro);
}

.subrodape {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  margin-bottom: 4rem;
  background-color: var(--ouro);
}

.rodape-menu .lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.rodape-menu .lista-item img {
  width: 340px;
  height: auto;
}

.rodape-menu .lista-item-link {
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
}

.rodape-menu .lista-item-link:hover {
  color: var(--escuro);
}

.rodape .grid {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: 7.5rem;
}

.redes-item {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
}

.redes-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  height: 60px;
  margin-right: 1.5rem;
  background: var(--ouro);
  border: 1px solid var(--ouro);
  border-radius: 7px;
  transition: 300ms;
}

.redes-item-icon svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  transition: 300ms;
}

.redes-item-icon:hover svg {
  transform: scale(1.1);
}

.redes-item-descricao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
}

.redes-item-descricao p,
.redes-item-descricao a {
  line-height: 1.5;
}

.redes-item-descricao a {
  color: #fff;
}

.redes-item-descricao a:hover {
  text-decoration: underline;
}

.redes-item-descricao strong {
  margin-right: 6px;
  font-weight: 700;
}

.redes-item-descricao .telefone {
  font-size: 24px;
}

.redes-item-descricao .endereco-destaque {
  font-size: 12px;
}

.informacoes {
  position: relative;
  height: 100%;
  color: #fff;
}

.rodape-descritivo-sociais {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 120px);
}

.rodape-descritivo-texto {
  margin-bottom: 15px;
  font-weight: 300;
  line-height: 1.6;
  font-size: 1rem;
}

.rodape-lgpd {
  margin-bottom: 2.5rem;
  font-size: .6875rem;
}

.rodape-lgpd strong {
  font-weight: 700;
}

.rodape-lgpd a {
  color: #fff;
}

.rodape-sociais {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.rodape-subtitulo {
  margin-bottom: 1.5rem;
  color: var(--ouro);
  font-weight: 700;
  font-size: 1.25rem;
}

.rede {
  display: flex;
}

.rede-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-right: 1.5rem;
  border: 1px solid #fff;
  border-radius: 7px;
  transition: 300ms;
}

.rede-item:last-child {
  margin-right: 0;
}

.rede-item svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  transition: 300ms;
}

.rede-item:hover {
  background: var(--ouro);
  border-color: var(--ouro);
}

.rede-item:hover svg {
  transform: scale(1.1);
}

.logos-parceiros {
  position: absolute;
  right: 0;
  bottom: 15px;
  width: 60%;
  border-radius: 15px;
  height: auto;
}

.rodape-dados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  margin-top: 4rem;
  border-top: .125rem solid var(--ouro);
}

.rodape-dados-cnpj {
  color: #fff;
  font-size: .6875rem;
}

/* ---------- Ajustes por largura ---------- */
@media (max-width: 1681px) {
  .cabecalho .logo {
    width: 200px;
  }

  .cabecalho .lista-item {
    margin-right: 4rem;
  }

  .rodape-menu .lista-item-link {
    font-size: 1.125rem;
  }

  .redes-item {
    margin-bottom: 1.5rem;
  }

  .redes-item-icon {
    margin-right: 1rem;
  }

  .redes-item-descricao {
    font-size: .875rem;
  }

  .rodape-descritivo-texto {
    font-size: .875rem;
  }

  .rede-item {
    width: 44px;
    height: 44px;
    margin-right: 1.25rem;
  }

  .rede-item svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 1441px) {
  .cabecalho {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .cabecalho .logo {
    width: 150px;
  }

  .cabecalho .lista-item-link {
    font-size: 1rem;
  }

  .menu-lateral .nav-menu {
    width: 440px;
    padding-top: 4rem;
  }

  .menu-lateral .item-menu {
    margin-bottom: 2rem;
    font-size: 1.25rem;
  }

  .subrodape {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .rodape-menu .lista-item-link {
    font-size: 1rem;
  }

  .rodape-subtitulo {
    margin-bottom: 1rem;
    font-size: .875rem;
  }

  .redes-item {
    margin-bottom: .75rem;
  }

  .redes-item-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-right: .5rem;
  }

  .redes-item-icon svg {
    width: 16px;
    height: 16px;
  }

  .redes-item-descricao {
    font-size: .6875rem;
  }

  .rodape-descritivo-sociais {
    height: calc(100% - 76px);
  }

  .rodape-descritivo-texto {
    font-size: .6875rem;
  }
}

@media (max-width: 1281px) {
  .cabecalho .lista-item-link {
    font-size: .875rem;
  }
}

@media (max-width: 1025px) {
  .cabecalho .logo {
    width: 120px;
  }

  .cabecalho .lista-item {
    margin: 0 .75rem;
  }

  .cabecalho .lista-item:last-child {
    margin-right: 0;
  }

  .cabecalho .lista-item-link {
    font-size: .75rem;
  }

  .rodape-menu .lista-item-link {
    font-size: .875rem;
  }

  .rodape .grid {
    grid-gap: 3.5rem;
  }

  .rodape-subtitulo {
    font-size: .75rem;
  }

  .redes-item-descricao {
    font-size: .5625rem;
  }

  .rodape-descritivo-texto {
    font-size: .5625rem;
  }
}

@media (max-width: 979px) {
  .toggle {
    top: 2rem;
    right: 1.5rem;
    padding: 0;
    background: transparent;
  }

  .toggle .texto-menu {
    display: none;
  }

  .toggle span,
  .toggle span::before,
  .toggle span::after {
    background: #333;
  }

  .toggle:hover span,
  .toggle:hover span::before,
  .toggle:hover span::after {
    background-color: var(--ouro);
  }

  .rodape-menu .lista-item:not(:first-child) {
    display: none;
  }

  .rodape .grid {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }
}

@media (max-width: 978px) {
  .toggle {
    display: flex;
    top: 1.625rem;
    padding: 12px;
  }

  .cabecalho {
    position: fixed;
    padding-bottom: .5rem;
    box-shadow: none;
  }

  .cabecalho .lista {
    display: none;
  }
}

@media (max-width: 768px) {
  .rodape-sociais {
    flex-direction: column;
    align-items: flex-start;
  }
}