@media all and (max-width: 47.9375em) {
  /* 767 / 16 */
  html {
    font-size: 43.75%;
  }

  h2 {
    font-size: 4.78rem;
  }

  .cabecalho {
    background-color: var(--s-branco-transp2);
    position: sticky;
    z-index: 9999;
    top: 0;
    left: 0;

    & .nav {
      & .hamburger {
        display: block;
        z-index: 1;
      }

      & .nav-list {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--s-branco-transp1);
        clip-path: circle(100px at 90% -15%);
        transition: clip-path 0.3s ease-out, opacity 0.3s ease-out; /* Tempo de transição ajustado */

        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rem;

        pointer-events: none;

        & a {
          font-size: 24px;
          opacity: 0;
          transition: opacity 0.3s ease-out; /* Tempo de transição ajustado para a opacidade */
        }

        & li:nth-child(1) a {
          transition: opacity 0.3s ease-out 0.2s;
        }

        & li:nth-child(2) a {
          transition: opacity 0.3s ease-out 0.4s;
        }

        & li:nth-child(3) a {
          transition: opacity 0.3s ease-out 0.6s;
        }
      }
    }

    & .nav.active .nav-list {
      clip-path: circle(1500px at 90% -15%);
      pointer-events: all;

      & a {
        opacity: 1;
      }
    }

    & .nav.active .hamburger {
      position: fixed;
      top: 26px;
      right: 16px;
      border-top-color: transparent;

      &::before {
        transform: rotate(135deg);
      }

      &::after {
        transform: rotate(-135deg);
        top: -7px;
      }
    }
  }

  .hero {
    & .conteudo {
      align-self: center;
      justify-content: center;
      padding: 5rem 2rem;
      width: 100%;
      justify-content: space-between;

      & svg {
        width: 6rem;
        height: 6rem;
      }

      .botao {
        padding: 1rem 3rem;
      }

      & .contatos {
        align-items: center;
      }
    }

    & .container-imagens {
      height: 80rem;
    }
  }

  .servicos-destaques {
    & .container {
      & h2 {
        text-align: start;
      }
      & .servico {
        height: 80rem;
        flex-flow: column;
      }
    }
  }

  .resultados {
    & .antes-depois {
      & .bloco {
        max-width: 39rem;
      }
    }
  }

  .rodape {
    background-color: var(--s-vinho-escuro);
    & .container {
      flex-flow: column;
      align-items: start;
      justify-content: space-evenly;

      & .copyright,
      & .endereco,
      & .links-nav,
      & .rede-sociais {
        align-items: start;
        gap: 2rem;
      }

      & .links-nav,
      & .rede-sociais {
        flex-flow: row;
      }

      & .copyright,
      &.endereco {
        flex: 0;
      }

      & .links-nav {
        order: 4;
      }
    }
  }
}