.cabecalho {
  padding-inline: 16px;

  & .nav {
    color: var(--s-vermelho);
    max-width: 140rem;
    height: 10rem;
    margin-inline: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    & a {
      color: inherit;
      border-bottom: 2px solid transparent;
      transition: border-bottom 0.5s;

      &:link,
      &:visited {
        color: inherit;
      }

      &:hover {
        border-bottom: 2px solid var(--s-vermelho);
      }
    }

    & .hamburger {
      display: none;
      border: none;
      background: none;
      border-top: 3px solid var(--s-vermelho);
      cursor: pointer;

      &::after,
      &::before {
        content: " ";
        display: block;
        width: 30px;
        height: 3px;
        background: var(--s-vermelho);
        margin-top: 5px;
        position: relative;
        transition: 0.3s;
      }
    }

    & .nav-list {
      display: flex;
      gap: 32px;
      list-style: none;

      & a {
        font-size: 18px;
        padding-block: 16px;
      }
    }
  }
}

.logo {
  font-size: 6.8rem;
}

.hero {
  & .conteudo,
  & .conteudo .contatos {
    display: flex;
    flex-flow: column;
  }

  & .conteudo,
  & .carrossel-botao {
    position: absolute;
  }

  & .conteudo {
    color: var(--s-branco);
    z-index: 3; /* Mantém o conteúdo abaixo do carrossel */
    right: 0;
    height: 100%;
    width: 35rem;
    justify-content: space-evenly;
    pointer-events: none; /* Impede que a div capture eventos de clique/toque */

    & .contatos {
      pointer-events: all;
      text-align: center;
      align-items: start;
      gap: 2rem;
    }
  }

  img {
    object-position: center top;
  }
}

.carrossel {
  position: relative;

  & .carrossel-botao {
    position: absolute;
    display: flex;
    flex-flow: column;
    cursor: pointer;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    transition: fill 0.3s ease;

    &.botao-esquerda,
    &.botao-direita {
      top: 50%;
      z-index: 2;
      transform: translateY(-50%);
    }

    &.botao-esquerda {
      left: 0;
      transform: translate(-5%, -5%);
    }

    &.botao-direita {
      right: 0;
      transform: translate(5%, -5%);
    }

    &:hover {
      fill: var(--s-vinho);
    }

    svg {
      fill: white;
      width: 6rem;
      height: 6rem;
    }
  }

  .container-imagens {
    width: 100%;
    height: 70rem;
    overflow: hidden;
    overflow-x: hidden; /* Desativa o scroll horizontal */
    position: relative;
    z-index: 1; /* Garante que o carrossel fique acima do conteúdo */
    cursor: grab;
  }

  .container-imagens .carrosel-imagens {
    display: flex;
    transition: transform 0.7s ease-in-out;
    width: 100%;
    height: 100%;
    will-change: transform;
  }

  .carrossel-imagem {
    min-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}

.rede-sociais {
  display: flex;
  gap: 2rem;

  & :hover {
    transition: transform, fill 0.3s;
    transform: scale(1.02);
    fill: var(--p-verde);
  }
}

.servicos-destaques {
  background-color: var(--p-bege);

  & .container,
  & .servico,
  & .overlay,
  & .detalhes {
    display: flex;
  }

  & .servico,
  & .overlay,
  & .detalhes {
    align-items: center;
    justify-content: center;
  }

  & .container,
  & .overlay,
  & .detalhes {
    flex-flow: column;
  }

  & h2,
  & .text {
    text-align: start;
  }

  & .imagem-container,
  & .text {
    position: relative;
  }

  & .imagem-container,
  & .detalhes {
    flex: 1;
  }

  & img,
  & .overlay {
    transition: opacity 0.5s ease;
  }

  & .container {
    gap: 1rem;

    & h2 {
      margin: 0rem 0rem 2rem 0rem;
    }

    & .servico {
      background-color: var(--s-branco);
      height: 40rem;

      & .imagem-container {
        width: 100%;
        height: 40rem;

        &:hover img {
          opacity: 0.3;
        }

        &:hover .overlay {
          opacity: 1;
        }

        & .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--s-vinho-transp);
          opacity: 0;

          & .text {
            font-style: italic;
            background-color: var(--s-branco-transp2);
            padding: 20px;

            & .aspas-inicio {
              left: -0.1rem;
            }
          }
        }
      }
      & .detalhes {
        gap: 2rem;
      }
    }
  }
}

.feedbacks {
  & .container,
  & .text,
  & .aspas,
  & .carrossel {
    display: flex;
    flex-flow: row wrap;
  }

  & .text,
  & .aspas,
  & .carrossel {
    align-items: center;
    justify-content: center;
    border: 1px solid var(--s-vinho-escuro);
    padding: 1rem;
    flex: 1;
  }

  & .container {
    margin: 10rem 0rem 10rem 0rem;
    height: 50rem;
    gap: 2rem;
    font-style: italic;

    & .aspas {
      background-color: var(--s-vinho-escuro);

      & svg {
        width: 10rem;
        height: 10rem;
        fill: var(--s-branco);
      }
    }

    & .carrossel-botao {
      & svg {
        fill: var(--s-vermelho);
      }
    }
  }

  & .container-feedbacks {
    width: 40rem;
    overflow: hidden;
    overflow-x: hidden; /* Desativa o scroll horizontal */
    position: relative;
    z-index: 1; /* Garante que o carrossel fique acima do conteúdo */
    cursor: grab;

    & .carrosel-feedbacks {
      display: flex;
      transition: transform 0.7s ease-in-out;
      width: 100%;
      height: 100%;
      will-change: transform;

      & .carrossel-feedback {
        padding: 4rem;
        min-width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        overflow: hidden;
        gap: 4rem;
        text-align: start;

        & p {
          position: relative;
        }
      }
    }
  }
}

.resultados {
  background-color: var(--p-bege);

  & .antes-depois,
  & .bloco {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
    overflow: hidden;
  }

  & .bloco,
  & img {
    position: relative;
  }

  & .antes-depois {
    margin-top: 5rem;
    width: 100%;
    gap: 1rem;

    & .bloco {
      max-width: 49rem;
      border-radius: 1rem;
      transition: transform 0.7s;
      height: auto;
      cursor: pointer;

      &:hover {
        transform: scale(1.06);
      }

      &:hover .overlay {
        opacity: 1;
      }

      & .overlay {
        position: absolute;
        opacity: 0;
      }
    }
  }
}

.social {
  & .container,
  & .nossas-redes,
  & .animacao {
    display: flex;
  }

  & .insta-phone {
    max-width: 40rem;
  }

  & .rede-sociais,
  & .animacao {
    align-items: center;
    justify-content: center;
  }

  & .container {
    color: var(--s-vermelho);
    flex-flow: column;
    align-items: center;
    justify-content: center;

    & .nossas-redes {
      flex-flow: row;
      text-align: center;

      & .rede-sociais {
        flex-flow: column wrap;

        & img {
          max-width: 5rem;
        }
      }
    }

    & img {
      object-fit: contain;
    }
  }

  & .logo {
    max-width: 60rem;
    min-width: 10rem;
  }

  & .gif {
    max-width: 15rem;
    min-width: 5rem;
  }
}

.rodape {
  background-color: var(--s-vinho-escuro);
  & .container {
    margin-top: 5rem;
    margin-bottom: 5rem;
    height: auto;
    color: var(--s-branco);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;

    & a {
      color: inherit;
    }

    & svg {
      fill: var(--s-branco);
    }

    & .liftam,
    & .endereco,
    & .links-nav,
    & .rede-sociais {
      flex: 1;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      gap: 4rem;
    }

    & .endereco,
    & .liftam {
      align-items: start;
    }

    & .copyright a,
    & .links-nav,
    & .endereco a {
      text-decoration: underline;
    }

    & .liftam {
      flex: 2;
    }
  }
}