@charset "utf-8";

/* ==========================================================================
   Variáveis Globais
   ========================================================================== */
:root {
  --cor0: #001B40;
  --cor1: #0056B3;
  --cor2: #007BFF;
  --cor3: #AD2D01;
  --cor4: #F24405;
  --cor5: #f35b04;
  --cor6: #f5f7fa;
  --cor6-alt: #f0f2f5;
  --cor7: #31393c;
  --branco: #fff;
  --preto: #000;
  --texto-principal: #1a1a1a;
  --texto-suave: #333;
  --fundo-transparente-claro: rgba(255, 255, 255, 0.13);
  --sombra-leve: rgba(0, 0, 0, 0.15);
  --sombra-media: rgba(0, 0, 0, 0.3);
  --divisoria: none;
}

/* ==========================================================================
   Estilos Gerais
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  margin-top: 80px;
  padding: 0;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--texto-suave);
  background-color: var(--fundo-transparente-claro);
  overflow-x: hidden;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
}

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

a {
  color: var(--cor2);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--branco);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  color: var(--cor1);
  line-height: 1.2;
  margin-bottom: 0.75em;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

p, li, label, input, textarea, button {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ==========================================================================
   Header e Navegação
   ========================================================================== */
   header {
    display: flex;
    justify-content: flex-end; /* Alinha o menu e os itens à direita no desktop */
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2em;
    background: rgba(223, 223, 223, 0.459);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    transition: 0.3s ease;
  }
  
  header.scrolled {
    background: var(--cor0); 
  }

/* Esconde o botão de orçamento móvel no desktop */
.cta-mobile {
  display: none;
  /* Garante que o botão móvel tenha os mesmos estilos do CTA padrão */
  background: var(--cor4);
  color: var(--branco);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  transition: 0.3s, 0.3s, 0.3s;
}

.cta-mobile:hover {
  background: #006618;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--sombra-media);
}

/* Estilos para o botão de orçamento no desktop */
.cta-desktop {
  background: var(--cor4);
  color: var(--branco);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  transition: 0.3s, 0.3s, 0.3s;
  /* Visível por padrão no desktop */
  display: block; 
}

.cta-desktop:hover {
  background: #006618;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--sombra-media);
}

#menu-toggle {
  display: none; /* Escondido por padrão no desktop */
  background: none;
  border: none;
  cursor: pointer;
  /* Essencial: z-index maior para o toggle ficar acima do menu */
  z-index: 1001; 
  /* Adicionado position: relative para ser o contexto de posicionamento */
  position: relative; 
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background: var(--cor1);
  /* Definido position: absolute para as linhas do hamburger para a animação do 'X' */
  position: absolute; 
  left: 0; /* Garante que a linha comece na esquerda do toggle */
  transition: transform 0.3s ease, opacity 0.1s ease;
}

/* Mantém as transformações do hamburger para a animação do toggle */
.hamburger:nth-child(1) {
  top: 0; 
}

.hamburger:nth-child(2) {
  top: 8px; 
}

.hamburger:nth-child(3) {
  top: 16px; 
}

/* Transforma o hamburger em um 'X' */
#menu-toggle.active .hamburger:nth-child(1) {
  top: 8px; /* Centraliza a primeira linha para o 'X' */
  transform: rotate(45deg);
}

#menu-toggle.active .hamburger:nth-child(2) {
  opacity: 0; /* Esconde a linha do meio */
}

#menu-toggle.active .hamburger:nth-child(3) {
  top: 8px; /* Centraliza a terceira linha para o 'X' */
  transform: rotate(-45deg);
}

header.scrolled .hamburger {
  background: var(--branco);
}

nav#top-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0;
  background: transparent;
  margin: 0 auto;
}

nav#top-menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav#top-menu li {
  padding: 0.5rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

nav#top-menu li a {
  color: var(--cor1); 
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease; 
}

nav#top-menu li::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: var(--cor1); 
  transition: width 0.3s ease, left 0.3s ease, right 0.3s ease;
  z-index: 0;
}

nav#top-menu li:hover::before {
  width: 100%;
  left: 0;
  right: 0;
}

header.scrolled nav#top-menu li a {
  color: var(--branco); 
}

header.scrolled nav#top-menu li::before {
  background-color: var(--branco); 
}

nav#top-menu li:hover {
  border-radius: 50px;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* Media Queries - Header e Navegação */
@media (max-width: 992px) {
  nav#top-menu {
    padding: 0.5rem;
  }
}

@media (max-width: 768px) {
  body{
    margin-top: 68px;
   }

  header {
    padding: 1.8rem;
    background-color: rgba(236, 236, 236, 0.548);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Inverte a ordem: botão à esquerda, menu toggle à direita */
    justify-content: space-between; 
    padding: 1rem 1.5rem; /* Ajusta o padding para melhor espaçamento */
    /* Z-index para garantir que o header e seus filhos interativos fiquem acima do blur */
    z-index: 1002; 
    /* Força um novo contexto de empilhamento para o header */
    transform: translateZ(0); 
    /* Adicionado para garantir interatividade no header mesmo com blur no body */
    pointer-events: auto; 
  }

  header.scrolled {
    background: var(--cor0);
  }

  /* Esconde o botão de orçamento desktop no mobile */
  .cta-desktop {
    display: none;
  }

  /* Torna o botão de orçamento móvel visível no mobile */
  .cta-mobile {
    display: block; /* Exibe o botão */
    order: 1; /* Posiciona-o à esquerda */
    font-size: 0.85rem; /* Ajusta o tamanho da fonte para mobile */
    padding: 0.6rem 1.2rem; /* Ajusta o padding para mobile */
  }

  #menu-toggle {
    display: block; /* Exibe o toggle no mobile */
    position: relative; /* Pai para as barras */
    order: 2; /* Posiciona-o à direita, depois do CTA móvel */
    top: auto; 
    right: auto;
    width: 30px;
    height: 20px; 
    padding: 0;
    /* Z-index para garantir que o toggle fique acima do menu, ainda mais alto */
    z-index: 1004; /* Aumentado para garantir prioridade de clique */
    /* Força um novo contexto de empilhamento para o toggle */
    transform: translateZ(0); 
    /* Adicionado para garantir interatividade no toggle */
    pointer-events: auto; 
  }

  /* Adiciona transição de filtro para as seções de conteúdo */
  #hero, #brand-carousel, main, footer {
    transition: filter 0.3s ease-in-out;
    /* Garante que esses elementos criem um novo contexto de empilhamento para o blur */
    transform: translateZ(0); 
  }

  /* Aplica o desfoque no conteúdo principal quando o menu está aberto */
  body.menu-open #hero,
  body.menu-open #brand-carousel,
  body.menu-open main,
  body.menu-open footer {
    filter: blur(5px); /* Aplica o desfoque */
    /* *** APENAS AQUI pointer-events: none; para o conteúdo desfocado *** */
    pointer-events: none; 
  }

  nav#top-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Esconde o menu de navegação em mobile */
    width: 70%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.671);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 30px 0 0 30px;
    flex-direction: column;
    align-items: center;
    padding-top: 4rem;
    gap: 1.5rem;
    transition: right 0.3s ease;
    /* Z-index para garantir que o menu fique acima do blur, mas abaixo do toggle */
    z-index: 1003; 
    /* Força um novo contexto de empilhamento para o menu */
    transform: translateZ(0); 
    /* Adicionado para garantir interatividade no menu */
    pointer-events: auto; 
  }

  nav#top-menu.active {
    right: 0;
  }

  nav#top-menu ul {
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    align-items: center;
    padding: 0;
  }

  nav#top-menu li {
    padding: 0.5rem 1rem;
    position: relative;
    overflow: hidden;
    width: auto;
    text-align: center;
  }

  nav#top-menu li a {
    color: var(--branco);
    display: block;
  }

  nav#top-menu li::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--cor2);
    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease;
  }

  nav#top-menu li:hover::before {
    width: 100%;
    left: 0;
    right: 0;
  }

  header.scrolled nav#top-menu li a {
    color: var(--branco);
  }

  header.scrolled nav#top-menu li::before {
    background-color: var(--branco);
  }
}

@media (max-width: 480px) {
  header {
    padding: 1rem 1rem; /* Ajusta ainda mais o padding para telas menores */
  }

  .cta-mobile {
    font-size: 0.75rem; /* Tamanho de fonte menor para telas muito pequenas */
    padding: 0.5rem 1rem; /* Padding menor */
  }
}

@media (max-width: 360px) {
  #menu-toggle {
    /* Mantém a posição estática, ajusta o espaçamento via propriedades flexbox no header */
    top: auto; /* Remove top/right explícito */
    right: auto;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
#hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  max-height: 700px;
  background-image: url('../img/fachada.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  padding-top: 4rem;
  box-sizing: border-box;
  text-align: center;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.753);
  z-index: 1;
}

#hero .overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  color: var(--branco);
  max-width: 1000px;
  width: 100%;
}

#hero .overlay img {
  width: 30%;
  max-width: 250px; 
  height: auto;
  margin-bottom: 1rem;
}

#hero .overlay-text {
  flex: 1;
  min-width: 0;
}

#hero .overlay-text h1 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--branco);
  margin-bottom: 1rem;
}

#hero .overlay-text p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: #e0e0e0;
  white-space: normal;
}

/* Media Queries - Hero */
@media (max-width: 768px) {
  #hero {
    min-height: 50vh;
    padding: 1.5rem;
  }

  #hero .overlay {
    flex-direction: column;
  }

  #hero .overlay img {
    width: 50%;
    max-width: 280px; 
  }

  #hero .overlay-text h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  #hero .overlay-text h1 span {
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  }

  #hero .overlay-text p {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  }
}

@media (max-width: 480px) {
  #hero .overlay-text h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  #hero .overlay-text h1 span {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  }

  #hero .overlay-text p {
    font-size: clamp(0.85rem, 2vw, 1rem);
  }
}

@media (max-width: 360px) {
  #hero .overlay-text p {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Carrossel de Marcas
   ========================================================================== */
#brand-carousel {
  padding: 2rem 0;
  overflow: hidden; /* Garante que apenas uma linha de imagens seja visível */
  background-color: var(--branco);
  border-bottom: 1px solid #eee;
  white-space: nowrap; /* Impede que as imagens quebrem para a próxima linha */
  position: relative;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.brand-track {
  display: flex; /* Alterado de inline-block para flex */
  width: max-content; /* Permite que o conteúdo determine a largura */
  animation: scroll-left 25s linear infinite; /* Aumentado para 25s por padrão */
}

.brand-logo {
  height: 60px; /* Altura padronizada para os logotipos das marcas */
  width: auto; /* Mantém a proporção da imagem */
  margin: 0 40px; /* Espaçamento entre os logotipos */
  flex-shrink: 0; /* Impede que os logos encolham */
  vertical-align: middle; /* Alinha os logos verticalmente no meio */
  filter: grayscale(100%); /* Opcional: Deixa os logos em tons de cinza */
  opacity: 0.7; /* Opcional: Reduz a opacidade */
  transition: filter 0.3s ease, opacity 0.3s ease; /* Transição suave para hover */
}

.brand-logo:hover {
  filter: grayscale(0%); /* Opcional: Colore o logo ao passar o mouse */
  opacity: 1; /* Opcional: Opacidade total ao passar o mouse */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%); /* Rola metade da largura do track para efeito infinito */
  }
}

/* Pausa a animação ao passar o mouse */
.brand-track:hover {
  animation-play-state: paused;
}

/* Media Queries para Carrossel de Marcas */
@media (max-width: 768px) {
  .brand-logo {
    height: 45px; /* Reduzido um pouco mais para telas médias */
    margin: 0 15px; /* Reduzido a margem para mais logos caberem */
  }
  .brand-track {
    animation-duration: 40s; /* Aumentado para 40s para rolagem mais lenta e suave */
  }
}

@media (max-width: 480px) {
  .brand-logo {
    height: 30px; /* Reduzido para 30px para telas muito pequenas */
    margin: 0 8px; /* Reduzido ainda mais a margem */
  }
  .brand-track {
    animation-duration: 60s; /* Aumentado significativamente para 60s para garantir a fluidez */
  }
}


/* ==========================================================================
   Sobre
   ========================================================================== */
#sobre {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background-color: rgba(185, 185, 185, 0.034);
  border-radius: 15px;
  border-bottom: var(--divisoria);
  box-shadow: 2px 3px 5px 2px var(--sombra-leve);
  color: var(--texto-suave);
  font-size: 1.25em;
  text-align: center;
}

#sobre h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--cor1);
}

#sobre figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

#sobre figure > img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  object-fit: contain;
}

#sobre figcaption h2 {
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

#sobre .decorativa {
  width: 40px;
  border: none;
  border-top: 4px solid #fff;
  margin: 0.5rem 0 1.5rem;
}

#sobre figcaption p {
  margin-bottom: 0.5em;
  padding: 20px;
  line-height: 1.6;
  text-align: left;
  text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.11);
}

#sobre .cta {
  background: var(--cor0);
  color: var(--branco);
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: bold;
  box-shadow: 0 4px 6px var(--sombra-leve);
  transition: 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}

#sobre .cta:hover {
  background: var(--cor1);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--sombra-media);
}

/* Media Queries - Sobre */
@media (max-width: 768px) {
  #sobre {
    padding: 1.5rem;
  }

  #sobre figure {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  #sobre figure > img {
    max-width: 45%;
  }
}

@media (max-width: 480px) {
  #sobre {
    padding: 1rem;
  }

  #sobre figure {
    gap: 0.75rem;
  }

  #sobre figure > img {
    max-width: 55%;
  }
}

/* ==========================================================================
   Loja (Carrossel)
   ========================================================================== */
#loja {
  padding: 2rem;
  background: transparent;
  text-align: center;
  margin-bottom: 2em;
}

#loja .carousel {
  background-color: rgba(85, 85, 85, 0.034);
  box-shadow: 2px 3px 5px 2px var(--sombra-leve);
  padding: 25px;
  border-radius: 15px;
  min-height: 250px;
  position: relative;
  overflow: hidden; 
}

#loja h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--cor1);
  margin-bottom: 0.2em;
}

#loja p {
  font-size: 1.3em;
  color: var(--texto-suave);
  padding: 1em;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.267);
}

.carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.slides-wrapper {
  width: 100%;
  min-height: 200px;
  overflow: hidden; 
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slides li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px; /* O espaçamento estabelecido */
}

/* REMOVIDO: width: 200px; daqui para que o JS controle a largura */
.slide { 
  flex-shrink: 0;
}

.slides img {
  width: 100%; /* Garante que a imagem preencha a largura definida pelo JS */
  height: auto;
  border-radius: 8px;
}

.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: var(--branco);
  border: none;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  cursor: pointer;
  z-index: 20;
  transition: 0.3s;
}

.carousel button:hover {
  background: rgba(0, 0, 0, 0.6);
}

.carousel .prev {
  left: 0;
}

.carousel .next {
  right: 0;
}

/* Media Queries - Loja */
@media (max-width: 900px) {
  .carousel {
    overflow: hidden;
  }

  .slides-wrapper {
    overflow: hidden;
  }

  .slides li {
    flex: 0 0 auto; /* Mantido para flexbox */
    margin: 0 8px; /* Mantido o espaçamento */
  }

  /* REMOVIDO: width: 100%; daqui, o JS define a largura */
  .slide {
    flex-shrink: 0;
  }

  .slides img {
    /* width: 100%; - Já está no estilo geral, não precisa repetir aqui */
    max-width: 300px; /* Se desejar um limite máximo para imagens */
  }
}

@media (max-width: 600px) {
  .slides li {
    /* flex: 0 0 100%; - Removido pois o JS controlará a largura */
    margin: 0 8px; /* Mantido o espaçamento */
  }
}

/* ==========================================================================
   Produtos
   ========================================================================== */
#produtos {
  padding: 3rem 1rem;
  background: transparent;
  color: var(--texto-suave);
  text-align: center;
}

#produtos h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--cor1);
  margin-bottom: 2rem;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  list-style: none;
}

.product-list li {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 1.5rem;
  width: 300px;
  box-shadow: 0 2px 4px var(--sombra-leve);
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-list li:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 12px var(--sombra-media);
}

.product-list img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.product-list h3 {
  margin-bottom: 0.5rem;
  color: var(--texto-suave);
}

.product-list p {
  font-family: 'Montserrat', sans-serif;
  color: var(--texto-suave);
}

.product-list a {
  display: inline-block;
  margin-top: 1rem;
  background: var(--cor1);
  color: var(--branco);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  box-shadow: 0 3px 5px var(--sombra-leve);
  transition: 0.3s, color 0.3s;
}

.product-list a:hover {
  background: var(--cor2);
}

/* Media Queries - Produtos */
@media (max-width: 992px) {
  .product-list li {
    width: 45%;
  }
}

@media (max-width: 768px) {
  .product-list li {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .product-list li {
    width: 100%;
  }
}

/* ==========================================================================
   Feedback
   ========================================================================== */
   #feedback-carousel {
    padding: 3rem 1rem;
    background: transparent;
    text-align: center;
  }
  
  #feedback-carousel h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--cor1);
    margin-bottom: 2rem;
  }
  
  .feedback-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .feedback-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .feedback-item {
    width: 100%;
    flex-shrink: 0;
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }
  
  .feedback-card {
    background: var(--branco);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1.5rem;
  }
  
  .feedback-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }

  .feedback-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--texto-suave);
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  
  .feedback-rating {
    font-size: 1.2rem;
    color: #ffd700; 
    margin-bottom: 1rem;
  }
  
  .feedback-card footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor4);
  }
  
  .feedback-prev,
  .feedback-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--cor1);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
  }
  
  .feedback-prev:hover,
  .feedback-next:hover {
    color: var(--cor2);
  }
  
  .feedback-prev {
    left: 0;
  }
  
  .feedback-next {
    right: 0;
  }
  
  /* Media Queries - Feedback */
  @media (max-width: 768px) {
    #feedback-carousel h2 {
      font-size: clamp(1.5rem, 3.5vw, 1.75rem);
    }
  
    .feedback-card {
      padding: 1.5rem;
    }
  
    .feedback-card p {
      font-size: 1rem;
    }
  
    .feedback-prev,
    .feedback-next {
      font-size: 1.5rem;
    }
  }
  
  @media (max-width: 576px) {
    .feedback-card {
      padding: 1rem;
    }
  
    .feedback-card p {
    font-size: 0.9rem;
  }
  
    .feedback-prev,
    .feedback-next {
      font-size: 1.2rem;
    }
  
    .feedback-prev {
      left: -0.5rem;
    }
  
    .feedback-next {
      right: -0.5rem;
    }
  }

/* ==========================================================================
   Contato
   ========================================================================== */
#contato {
  padding: 4rem 1rem;
  color: var(--texto-suave);
}

#contato h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--cor1);
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 1.8em;
}

.contato-conteudo {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start; /* Alterado de 'stretch' para 'flex-start' */
  flex-wrap: wrap;
}

.contato-conteudo form,
.contato-conteudo .meios {
  flex: 1 1 300px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cor6);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px var(--sombra-leve);
}

.contato-conteudo form {
  height: 100%;
  max-width: 600px;
  margin: 0 auto 2rem;
  font-weight: bold;
  background-color: var(--cor6-alt);
  padding-bottom: 1em;
}

#contato form {
  margin-bottom: 0;
}

#contato label {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cor1);
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

#contato input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 5px;
}

input#nome::placeholder,
input#email::placeholder,
textarea#mensagem::placeholder {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #888;
}

textarea#mensagem {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  line-height: 1.5;
  border: 2px solid #ccc;
  border-radius: 8px;
  resize: vertical;
  margin-bottom: 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea#mensagem:focus {
  border-color: #0066cc;
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.3);
  outline: none;
}

#contato button {
  background: var(--cor4);
  color: var(--branco);
  padding: 0.75rem;
  border: none;
  border-radius: 30px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 6px var(--sombra-leve);
  align-self: flex-start;
  transition: 0.3s, transform 0.3s, box-shadow 0.3s;
}

#contato button:hover {
  background: darkgreen;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--sombra-media);
}

article.meios {
  margin-bottom: 0;
}

#contatos {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

#contatos li {
  margin-bottom: 1rem;
  color: var(--cor0);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Endereço */
address {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: var(--texto-suave);
  background-color: rgba(185, 185, 185, 0.034);
  padding: 2rem;
  border-radius: 10px;
  border-bottom: var(--divisoria);
  box-shadow: 2px 3px 5px 2px var(--sombra-leve);
}

address a {
  color: var(--cor2);
  font-weight: bold;
}

address iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 10px;
  margin-top: 1rem;
}

/* Media Queries - Contato */
@media (max-width: 768px) {
  .contato-conteudo {
    flex-direction: column;
  }

  .product-list,
  #contato form,
  address {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 600px) {
  textarea#mensagem {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background-color: var(--cor0);
  padding: 1rem;
  border-radius: 10px 10px 0 0;
  text-align: center;
  color: var(--branco);
}

footer p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  margin-top: 1rem;
  color: var(--branco);
}

footer .social {
  list-style: none;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

footer .social img {
  height: 3em;
}

/* ==========================================================================
   Social Media
   ========================================================================== */
.social-media {
  display: inline-flex;
}

.social-media .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 100;
  margin: 0 20px;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-media .icon a span {
  position: relative;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor1);
  border-radius: 50%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.103);
  transition: 0.3s ease;
}

.social-media .icon a span i {
  font-size: 36px;
  color: var(--preto);
}

.social-media .icon:hover a span i {
  color: var(--branco);
}

.social-media .icon .tooltip {
  background-color: #d2dae2;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.103);
  color: var(--branco);
  font-size: 20px;
  padding: 10px 18px;
  border-radius: 25px;
  position: absolute;
  top: -70px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-media .icon .tooltip::before {
  position: absolute;
  content: '';
  height: 15px;
  width: 15px;
  bottom: -8px;
  background-color: #d2dae2;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.social-media .icon:hover span,
.social-media .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.404);
}

.social-media .instagram:hover a span,
.social-media .instagram:hover .tooltip,
.social-media .instagram:hover .tooltip::before {
  background-image: linear-gradient(to right, #f9ce34, #ee2a7b, #6228d7);
}

.social-media .whatsapp:hover a span,
.social-media .whatsapp:hover .tooltip,
.social-media .whatsapp:hover .tooltip::before {
  background-color: #25d366;
}

.meios #contatos :hover a {
  color: var(--cor5);

}

/* ==========================================================================
   Responsividade Geral
   ========================================================================== */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
  }

  h2 {
    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
  }

  h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  }

  p, li, a, label, input, textarea, button {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
  }

  h2 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
  }

  h3 {
    font-size: clamp(1rem, 2vw, 1.25rem);
  }

  p, li, a, label, input, textarea, button {
    font-size: 0.9rem;
  }
}

/* Regras para aplicar o desfoque quando o menu está aberto */
/* Mover essa parte para o final do CSS garante que ela tenha prioridade. */
body.menu-open #hero,
body.menu-open #brand-carousel,
body.menu-open main,
body.menu-open footer {
  filter: blur(5px); /* Aplica o desfoque */
  /* Removido pointer-events: none; daqui. */
  /* Adicionado transform: translateZ(0); para garantir contexto de empilhamento */
  transform: translateZ(0); 
}