/* ==========================================================================
   Freitas, Mendes e Magalhães Advogados
   Base: reset, variáveis, tipografia e componentes compartilhados.
   ========================================================================== */

:root {
  /* Paleta extraída da página original */
  --verde: #525945;
  --verde-escuro: #393f2f;
  --dourado: #c8ac84;
  --bege: #efede1;
  --cinza-claro: #dfdfdf;
  --whatsapp: #3dc307;
  --branco: #fff;

  --fonte-titulo: "Montserrat", sans-serif;
  --fonte-texto: "Open Sans", sans-serif;

  /* Largura do miolo de conteúdo, igual à da página original */
  --container: 960px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
figure {
  margin: 0;
}

body {
  font-family: var(--fonte-texto);
  font-weight: 400;
  color: var(--verde-escuro);
  background: var(--bege);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Estrutura de seção

   Cada seção tem uma imagem de fundo com uma camada de cor por cima
   (o original chama de "sobreposição"). A opacidade dessa camada muda
   por seção e é definida em cada página.
   -------------------------------------------------------------------------- */

.secao {
  position: relative;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.secao__veu {
  position: absolute;
  inset: 0;
}

.container {
  position: relative;
  width: var(--container);
  margin: 0 auto;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--fonte-texto);
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

.botao--dourado {
  background-color: var(--dourado);
  color: var(--verde-escuro);
}

.botao--dourado:hover,
.botao--dourado:active {
  background-color: var(--bege);
  color: var(--verde-escuro);
}

.botao--whatsapp {
  background-color: var(--whatsapp);
  color: var(--branco);
}

.botao--whatsapp:hover,
.botao--whatsapp:active {
  background-color: #34a706;
}

/* --------------------------------------------------------------------------
   Botão flutuante de WhatsApp
   Replicado do código original da página.
   -------------------------------------------------------------------------- */

.zap-flutuante {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: #00c800;
  animation: zap-pulso 3s infinite;
  z-index: 99999;
  transition: background-color 1s;
}

.zap-flutuante:hover {
  background-color: #009600;
}

.zap-flutuante__icone {
  width: 48px;
  height: 48px;
  transform: scale(0.6) translate(20%, 20%);
  fill: var(--branco);
  pointer-events: none;
}

@keyframes zap-pulso {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 1);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 200, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 0);
  }
}

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

/* --------------------------------------------------------------------------
   Telas estreitas: layout em coluna única.

   O original trocava para o layout de celular só abaixo de 800px, o que deixava
   a faixa entre 800px e 960px com barra de rolagem lateral. Aqui a troca
   acontece em 1000px, então nenhuma largura de tela fica quebrada.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  :root {
    --container: 360px;
  }

  .container {
    width: 100%;
    max-width: 360px;
    padding: 0 17px;
  }

  .zap-flutuante {
    right: 20px;
    bottom: 20px;
  }
}