/* Responsividade */

  /* MOBILE FIRST - Estilos específicos para mobile (até 501px) */
  @media (max-width: 501px) {
    /* Estilização da imagem rotativa do produto - MOBILE */
    #produto-rotativo {
      max-width: 100vw;
      max-height: 60vh;
      width: auto;
      height: auto;
      /* Removido min-height e min-width para evitar redimensionamento não proporcional */
      object-fit: contain;
      object-position: center bottom;
      transition: opacity 0.7s;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) translateZ(0);
      pointer-events: auto !important;
      cursor: pointer !important;
      z-index: 10 !important;
      display: block;
      /* Propriedades para renderização nítida - MOBILE */
      image-rendering: -webkit-optimize-contrast;
      image-rendering: -moz-crisp-edges;
      image-rendering: auto; /* Renderização padrão otimizada (não pixelated) */
      -ms-interpolation-mode: bicubic; /* IE: renderização de alta qualidade */
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      /* Força renderização nítida */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  /* Quando for tablet/desktop (mínimo 502px), mostra a versão larga */
  @media (min-width: 502px) {

    /* Container do cabeçalho principal */
    .areHeader {
    position: relative; /* cria contexto de posição */
    width: 100%;
    height: 100vh; /* ocupa a tela cheia */
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borda inferior sutil para separação visual */
    }

    /* Esconde o logo padrão na versão desktop */
    .logo{
        display: none; /* Não exibe o elemento */
    }

    /* Estiliza a imagem da logo branca */
    .logoBranca {
        display: flex !important; /* Garante que o container da logo branca seja exibido */
        align-items: center;
        justify-content: center;
        width: 350px; /* Aumentado para acomodar logo maior */
        height: 150px; /* Aumentado para acomodar logo maior */
    }
    .logoBranca img {
        margin-left: 50px;
        margin-top: 60vh;
        z-index: 1000;
        width: 100%;
        height: auto;
        background-size: cover;
        display: block;
        max-width: 250px; /* Aumentado para logo maior */
        max-height: 150px; /* Aumentado para logo maior */
        object-fit: contain;
        /* background-color: orange; */
    }


    /* Estilização do texto principal do cabeçalho */
    .headPunch {
      
      /* background-color: palevioletred; */
      position: relative; /* Fixa no topo da tela */
      top: 0; /* nunca deixa o título sair da área visível */
      margin-top: clamp(2px, 1vh, 12px);
      left: 0;
      width: 100vw; /* Ocupa toda a largura da viewport */
      z-index: 99999; /* Fica acima de todos os outros elementos */
      flex: 1 1 0; /* Permite que o elemento cresça e encolha conforme necessário */
      color: rgb(255, 255, 255); /* Cor do texto (amarelo claro) */
      padding: 0 16px; /* Espaçamento horizontal interno */
      height: auto; /* Altura automática */
      font-size: clamp(18px, 3.5vw, 34px); /* Tamanho responsivo da fonte */
      text-align: center; /* Centraliza o texto */
      text-shadow: /* Sombreamento para dar destaque ao texto */
        -0.1px -0.1px 0 #3e3e3e,
         0.1px -0.1px 0 #3a3a3a,
        -1px  1px 0 #000000,
         0.1px  0.1px 0 #000000;
      font-family: 'Montserrat', 'Roboto', 'Inter', Arial, sans-serif; /* Fonte em negrito */
      font-weight: bold; /* Peso da fonte em negrito */
      box-sizing: border-box;
    }

    /* Imagem de fundo do cabeçalho */
    .bgImage {
      background-image: url(../image/BannerTop/Academia.png); /* Define a imagem de fundo */
      background-size: cover; /* Faz a imagem cobrir todo o container */
    }

    /* Estilização da imagem rotativa do produto - TABLET/DESKTOP */
    #produto-rotativo {
      max-width: 100vw; /* Largura máxima igual à viewport */
      max-height: 100vh; /* Altura máxima igual à viewport */
      min-height: 70vh !important; /* Altura mínima para garantir tamanho consistente */
      min-width: 400px !important; /* Largura mínima para garantir tamanho consistente */
      object-fit: contain; /* Garante que a imagem seja totalmente visível sem distorção */
      object-position: center bottom; /* Posiciona a imagem no centro e na parte inferior */
      transition: opacity 0.7s; /* Suaviza a transição de opacidade */
      position: absolute; /* Posiciona absolutamente dentro do container pai */
      left: 50%; /* Centraliza horizontalmente */
      bottom: 0; /* Alinha à base do container */
      /* top: auto; Remove qualquer valor anterior de 'top' */
      transform: translateX(-65%) translateZ(0); /* Ajusta para centralizar e força aceleração de hardware */
      pointer-events: auto !important; /* Permite interação com o mouse */
      cursor: pointer !important; /* Cursor de link ao passar o mouse */
      z-index: 10 !important; /* Fica acima do conteúdo mas abaixo do menu fixo */
      display: block; /* Garante que o elemento seja exibido como bloco */
      /* Propriedade para garantir renderização nítida das imagens */
      image-rendering: -webkit-optimize-contrast; /* Chrome/Safari: renderização nítida */
      image-rendering: auto; /* Renderização padrão otimizada */
      -ms-interpolation-mode: bicubic; /* IE: renderização de alta qualidade */
      backface-visibility: hidden; /* Evita problemas de renderização 3D */
      -webkit-backface-visibility: hidden; /* Chrome/Safari: evita problemas de renderização 3D */
      will-change: transform; /* Otimiza performance da transformação */
    }

    

    /* Container de conteúdo de fundo */
    .bgContent {
      /* background-color: aqua; */ /* Comentado: cor de fundo de teste */
      width: 100%; /* Ocupa toda a largura disponível */
    }

    /* Menu de navegação do cabeçalho */
    .menu-eclipse {
      display: flex; /* Usa flexbox para organizar os botões */
      flex-direction: column; /* Organiza os botões em coluna */
      align-items: flex-end; /* Alinha os botões à direita */
      position: relative;
      z-index: 101; /* Acima do overlay do banner (z-index: 100) */
      justify-content: center; /* Centraliza verticalmente */
      gap: 14px; /* Espaçamento entre os botões reduzido */
      margin-right: 80px; /* Margem à direita para afastar do limite */
      margin-top: 2vh; /* Margem superior reduzida */
      margin-bottom: 0; /* Sem margem inferior */
      z-index: 1000; /* Garante que fique acima de outros elementos */
      position: relative; /* Permite posicionamento relativo de elementos filhos */
      background-color: transparent; /* Fundo transparente */
      min-width: 160px; /* Largura mínima do menu */
    }

    
/* Estilo Premium para Menu Desktop - Especificidade aumentada para sobrescrever style.css */
.menu-eclipse button {
    width: auto !important; /* Largura automática para acomodar textos longos */
    min-width: 180px !important; /* Largura mínima */
    max-width: 220px !important; /* Largura máxima para textos longos como "LIFESTYLE & RESULTADOS" */
    padding: 8px 16px !important; /* Padding reduzido */
    border: 2px solid #f7fe9f !important;
    border-radius: 15px;
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important; /* Fonte reduzida */
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer;
    transition: border-color 0.2s, color 0.3s ease, transform 1.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease !important;
    outline: none;
    position: relative;
    overflow: hidden; /* Contém o efeito de brilho dentro do botão */
    white-space: nowrap; /* Mantém o texto em uma linha */
}

/* Animação de brilho que passa pelos botões */
.menu-eclipse button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.3), 
        rgba(255, 215, 0, 0.5), 
        rgba(255, 215, 0, 0.3), 
        transparent
    );
    z-index: 0;
    animation: brilhoPassante 3s ease-in-out infinite;
    border-radius: 15px; /* Mantém o brilho dentro das bordas arredondadas */
}

@keyframes brilhoPassante {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.menu-eclipse button:hover::before,
.menu-eclipse button:focus::before {
    animation: brilhoPassanteRapido 0.6s ease-in-out;
}

@keyframes brilhoPassanteRapido {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.menu-eclipse button span {
    position: relative;
    z-index: 1;
}

.menu-eclipse button:hover,
.menu-eclipse button:focus {
    border-color: #EBC447 !important;
    color: #FFD700 !important;
    transform: scale(1.3) translateX(-25px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2) !important;
}

.nossaHistoria {
  
 
  max-width: 90%;              /* Define a largura máxima do container para 90% */
  margin: 5vh auto 10vh auto;    /* Centraliza horizontalmente e posiciona a partir de 60% da altura da viewport */
 
}

.bannerDeserto
{
  display: flex;
  justify-content: center;
}

.bannerDeserto img
{
    margin-top: 10vh;
    width: auto;
    height: 90vh;
    margin-bottom: 10vh;
}

/* Ajustes do banner para aparelhos pequenos */
@media (max-width: 501px) {
    .bannerDeserto {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    .bannerDeserto img {
        margin-top: 20px !important;
        width: 100% !important;
        height: auto !important;
        max-height: 85vh !important;
        margin-bottom: 60px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

@media (max-width: 360px) {
    .bannerDeserto img {
        margin-top: 15px !important;
        margin-bottom: 50px !important;
        max-height: 80vh !important;
    }
}

@media (max-width: 320px) {
    .bannerDeserto img {
        margin-top: 10px !important;
        margin-bottom: 45px !important;
        max-height: 75vh !important;
    }
}

/* =========================================== */
/* RESPONSIVIDADE - SEÇÃO DE PRODUTOS NETFLIX */
/* =========================================== */

/* Desktop: Carrossel Horizontal - 2 produtos visíveis */
@media (min-width: 992px) {
  .produto-card {
    padding: 2rem;
    width: 600px;
    min-width: 600px;
  }

  .produto-imagem-container {
    height: 320px;
  }

  .produto-nome {
    font-size: 1.75rem;
  }
}

/* Tablet: Carrossel Horizontal */
@media (min-width: 769px) and (max-width: 991px) {
  .produto-card {
    width: 280px;
    min-width: 280px;
  }

  .produto-imagem-container {
    height: 300px;
  }

  /* Banner Top (Tablet) - +10% de altura */
  .areHeader {
    height: 110vh !important;
  }
}

/* iPad mini / tablets em 768px (portrait) - aumentar um pouco mais o banner
   para aparecer só um "peek" da seção seguinte (Quem Somos) */
@media (min-width: 768px) and (max-width: 991px) {
  .areHeader {
    height: 120vh !important;
  }
}


/* .tabelaProdutos image-rendering: 
{
  width: 100%;
} */



/* instagram Chamada */

.instagram-chamada
  {
    height: 100vh;
    margin-top: 60px; /* Aumenta o espaçamento superior no desktop */
  }

.instagram-chamada-conteudoImg {
  width: 100%;       /* ou um valor fixo */
  height: 100%;     /* defina uma altura */
  background-image: url(../image/imgInstagrama.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent; /* remove o fundo branco */
}


/* Area de Depoimentos - Testimonials - Cases */

/* Seção principal de depoimentos - container geral */
.testimonials-section {
  position: relative; /* Posicionamento relativo para elementos filhos absolutos */
  min-height: 100vh; /* Altura mínima de 100% da viewport */
  background: url('../image/Old-Turbex-Desk.png') center/cover; /* Imagem de fundo centralizada */
  display: flex; /* Layout flexbox */
  align-items: end; /* Alinha itens no final (parte inferior) */
  justify-content: center; /* Centraliza horizontalmente */
  overflow: hidden; /* Esconde conteúdo que ultrapassa os limites */
}

/* Overlay de fundo para efeitos visuais */
.background-overlay {
  position: absolute; /* Posicionamento absoluto */
  top: 0; /* Posição no topo */
  left: 0; /* Posição à esquerda */
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  z-index: 1; /* Camada de profundidade */
}



/* Efeito de holofote decorativo */
.spotlight {
  position: absolute; /* Posicionamento absoluto */
  width: 300px; /* Largura do holofote */
  height: 300px; /* Altura do holofote */
  background: radial-gradient(ellipse at center, rgba(255, 255, 0, 0.3) 0%, transparent 70%); /* Gradiente radial amarelo */
  z-index: 5; /* Camada de profundidade baixa para não interferir nos cards */
}

/* Holofote posicionado à esquerda */
.spotlight-left {
  top: -50px; /* Posição acima do container */
  left: -100px; /* Posição à esquerda do container */
  transform: rotate(-15deg); /* Rotação de -15 graus */
  display: none;
}

/* Holofote posicionado à direita */
.spotlight-right {
  top: -50px; /* Posição acima do container */
  right: 25%; /* Posição à direita do container */
  transform: rotate(15deg); /* Rotação de 15 graus */
}

/* Container do conteúdo principal */
.content {
  position: relative; /* Posicionamento relativo */
  z-index: 2; /* Camada acima dos elementos de fundo */
  text-align: center; /* Alinhamento central do texto */
  width: 100%; /* Largura total */
  max-width: 1200px; /* Largura máxima */
  padding: 2rem; /* Espaçamento interno */
}

/* Título da seção */
.section-title {
  position: absolute; /* Posicionamento absoluto */
  top: 2rem; /* Posição no topo */
  left: 50%; /* Centraliza horizontalmente */
  transform: translateX(-50%); /* Ajuste fino para centralização */
  color: white; /* Cor branca do texto */
  font-size: 3rem; /* Tamanho grande da fonte */
  font-weight: 700; /* Peso da fonte pesado */
  margin: 0; /* Remove margens padrão */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra do texto */
  letter-spacing: 0.1rem; /* Espaçamento entre letras */
  width: 100%; /* Largura total */
  text-align: center; /* Centraliza o texto */
  z-index: 10; /* Fica acima de outros elementos */
  padding: 0 2rem; /* Padding lateral */
}

/* Título dos testimonials fora da seção */
.testimonials-title {
  position: relative; /* Posicionamento relativo */
  top: auto; /* Remove posicionamento absoluto */
  left: auto; /* Remove posicionamento absoluto */
  transform: none; /* Remove transformação */
  font-size: 3rem; /* Tamanho grande da fonte */
  color: #000; /* Cor preta do texto */
  margin: 3rem 0; /* Margem vertical */
  font-weight: bold; /* Peso da fonte pesado */
  text-transform: uppercase; /* Texto em maiúsculas */
  text-shadow: none; /* Remove sombra */
  letter-spacing: 0.05em; /* Espaçamento entre letras */
  text-align: center; /* Centraliza o texto */
  width: 100%; /* Largura total */
  z-index: auto; /* Z-index automático */
  padding: 0 2rem; /* Padding lateral */
  background: transparent; /* Fundo transparente */
  font-family: 'Montserrat', 'Roboto', 'Inter', Arial, sans-serif; /* Fonte sem serifa igual aos títulos dos produtos */
}

/* Container do carrossel de depoimentos */
.testimonials-carousel {
  position: relative; /* Posicionamento relativo */
  width: 100vw; /* Expande até as margens da tela */
  margin-left: calc(-50vw + 50%); /* Quebra o limite do container pai e expande */
  overflow: visible; /* hidem esconde - porem deixei visible o conteúdo que ultrapassa os limites */
}

/* Container interno do carrossel */
.carousel-container {
  position: relative; /* Posicionamento relativo */
  width: 100%; /* Largura total */
  height: 400px; /* Altura fixa */
  overflow: hidden; /* Esconde cards que estão fora da viewport */
  z-index: 10; /* Garante que fique acima dos elementos de fundo */
}

/* Trilha do carrossel com animação */
.carousel-track {
  display: flex; /* Layout flexbox */
  position: absolute; /* Posicionamento absoluto */
  left: 0; /* Posição à esquerda */
  top: 0; /* Posição no topo */
  height: 100%; /* Altura total */
  width: max-content; /* Garante que o track tenha largura suficiente para todos os 16 cards */
  animation: scrollInfinite 40s linear infinite; /* Animação usando porcentagem relativa (-50%) */
  will-change: transform; /* Otimização de performance */
  z-index: 15; /* Garante que fique acima dos elementos de fundo */
}

/* Card individual de depoimento */
.testimonial-card {
  flex: 0 0 350px; /* Largura fixa sem crescimento */
  height: 350px; /* Altura fixa */
  margin: 0 20px; /* Margem horizontal */
  background: rgba(255, 255, 255, 0.12); /* Aumentada transparência de 0.223 para 0.12 */
  border-radius: 20px; /* Bordas arredondadas */
  padding: 2rem; /* Espaçamento interno */
  display: flex; /* Layout flexbox */
  flex-direction: column; /* Direção vertical */
  align-items: center; /* Alinhamento central */
  text-align: center; /* Texto centralizado */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Sombra do card */
  backdrop-filter: blur(3px); /* Efeito de desfoque no fundo */
  border: 1px solid rgba(0, 0, 0, 0.15); /* Borda mais transparente */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
  z-index: 20; /* Garante que fique acima dos elementos de fundo */
  position: relative; /* Permite posicionamento relativo */
  opacity: 1; /* Garante que seja visível */
  visibility: visible; /* Garante que seja visível */
}

/* Efeito hover no card de depoimento */
.testimonial-card:hover {
  transform: translateY(-10px); /* Move o card para cima */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Sombra mais intensa */
  background: rgba(255, 255, 255, 0.25); /* Aumentada transparência no hover de 0.594 para 0.25 */
}

/* Container da foto de perfil */
.profile-pic {
  width: 80px; /* Largura da foto */
  height: 80px; /* Altura da foto */
  border-radius: 50%; /* Formato circular */
  overflow: hidden; /* Esconde partes que ultrapassam */
  margin-bottom: 1rem; /* Margem inferior */
  border: 3px solid #FFD700; /* Borda dourada */
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3); /* Sombra dourada */
}

/* Imagem dentro da foto de perfil */
.profile-pic img {
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  object-fit: cover; /* Preenche o container mantendo proporção */
}

/* Nome do cliente */
.client-name {
  color: #000000; /* Cor escura do texto */
  font-size: 1.5rem; /* Tamanho da fonte */
  font-weight: 700; /* Peso da fonte pesado */
  margin-bottom: 1rem; /* Margem inferior */
  text-shadow: none; /* Remove sombra do texto */
}

/* Texto do depoimento */
.testimonial-text {
  color: #000000; /* Cor cinza do texto */
  font-size: 1rem; /* Tamanho da fonte */
  line-height: 1.6; /* Altura da linha */
  margin-bottom: 1.5rem; /* Margem inferior */
  flex-grow: 1; /* Cresce para preencher espaço */
  display: -webkit-box; /* Layout de caixa webkit */
  -webkit-line-clamp: 4; /* Limita a 4 linhas */
  line-clamp: 4; /* Propriedade padrão */
  -webkit-box-orient: vertical; /* Orientação vertical */
  overflow: hidden; /* Esconde texto que ultrapassa */
}

/* Container das estrelas de avaliação */
.rating {
  display: flex; /* Layout flexbox */
  gap: 5px; /* Espaçamento entre estrelas */
  justify-content: center; /* Centraliza as estrelas */
}

/* Estrela individual */
.star {
  color: #FFD700; /* Cor dourada */
  font-size: 1.2rem; /* Tamanho da fonte */
  text-shadow: 0 0 10px rgba(15, 13, 2, 0.5);/* Sombra brilhante */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);/* Sombra mais intensa */
}

/* ============================================
   ESTILO LIFESTYLE & RESULTADOS
   ============================================ */

/* Ajuste do card quando contém estrutura lifestyle */
.testimonial-card:has(.lifestyle-img-container) {
  padding: 0;
  align-items: stretch;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Container da Imagem dentro do Card */
.lifestyle-img-container {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 20px; /* Arredonda todo o card */
  margin-bottom: 0;
}

/* A Imagem em si */
.lifestyle-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que preencha sem distorcer */
  transition: transform 0.5s ease;
  border-radius: 20px; /* Bordas arredondadas */
}

/* Efeito Zoom Suave no Hover */
.testimonial-card:hover .lifestyle-img {
  transform: scale(1.1);
}

/* Ajuste do Texto abaixo da imagem */
.lifestyle-content {
  padding: 20px;
  background: rgba(255, 255, 255, 0.05); /* Fundo sutil para o texto */
  border-radius: 0 0 20px 20px; /* Arredonda embaixo, seguindo o border-radius do card */
  text-align: left; /* Texto alinhado à esquerda fica mais moderno */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lifestyle-title {
  color: #FFD700;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.lifestyle-text {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  margin-bottom: 10px;
}

.lifestyle-role {
  color: #FFD700;
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
  margin-top: 8px;
  opacity: 0.9;
}

@keyframes scrollInfinite {
  0% {
      /* Começa com o primeiro card original encostado na esquerda */
      transform: translateX(0);
  }
  100% {
      /* Move exatamente metade da trilha (o tamanho dos 8 cards originais) */
      /* Quando chega aqui, o card 1 do clone está na posição exata onde o card 1 original começou */
      transform: translateX(-50%);
  }
}

/* Pausa a animação no hover */
.carousel-container:hover .carousel-track {
  animation-play-state: paused;
}





/* Ajuste de margens para área de ícones - MOBILE */
@media (max-width: 768px) {
    .areaIcones {
        margin-left: 20px !important;
        margin-right: 20px !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    
    .areaIcones > div {
        gap: 24px !important; /* Reduz o gap entre os ícones no mobile */
    }
}

/* Ajustes para área de ícones em aparelhos pequenos (até 501px) */
@media (max-width: 501px) {
    .areaIcones {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .areaIcones > div {
        gap: 10px !important;
        flex-wrap: nowrap !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }
    
    .areaIcones > div > div {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        padding: 0 2px !important;
    }
    
    .areaIcones > div > div span {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    .areaIcones > div > div i {
        font-size: 2rem !important;
        margin-top: 0 !important;
        display: block !important;
    }
}

/* Ajustes para área de ícones em aparelhos muito pequenos (até 360px) */
@media (max-width: 360px) {
    .areaIcones {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    .areaIcones > div {
        gap: 6px !important;
        padding: 0 2px !important;
    }
    
    .areaIcones > div > div {
        padding: 0 1px !important;
    }
    
    .areaIcones > div > div span {
        font-size: 0.6rem !important;
        line-height: 1.1 !important;
        padding: 0 !important;
        margin-bottom: 6px !important;
    }
    
    .areaIcones > div > div i {
        font-size: 1.6rem !important;
        margin-top: 0 !important;
    }
}

/* Ajustes para área de ícones em aparelhos extremamente pequenos (até 320px) */
@media (max-width: 320px) {
    .areaIcones > div {
        gap: 4px !important;
        padding: 0 1px !important;
    }
    
    .areaIcones > div > div span {
        font-size: 0.55rem !important;
        margin-bottom: 4px !important;
    }
    
    .areaIcones > div > div i {
        font-size: 1.4rem !important;
    }
}

/* =========================================== */
/* RESPONSIVIDADE - SEÇÃO SOBRE (MOBILE) */
/* =========================================== */

/* Ajustes para aparelhos pequenos (até 501px) */
@media (max-width: 501px) {
    /* Seção Nossa História */
    .nossaHistoria {
        max-width: 92% !important;
        margin: 3vh auto 3vh auto !important;
        padding: 18px !important;
        padding-bottom: 50px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }
    
    .nossaHistoria h2 {
        font-size: 1.3rem !important;
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
        letter-spacing: 0.8px !important;
        line-height: 1.2 !important;
    }
    
    .nossaHistoria p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    /* Seção Nosso Compromisso */
    .nossoCompromisso {
        max-width: 92% !important;
        margin: 3vh auto 3vh auto !important;
        padding: 18px !important;
        padding-bottom: 50px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    .nossoCompromisso h2 {
        font-size: 1.3rem !important;
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
        letter-spacing: 0.8px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
    
    .nossoCompromisso p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    /* Container da seção sobre */
    .areaSobre {
        padding: 15px 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        min-height: auto !important;
        box-sizing: border-box !important;
    }
}

/* Ajustes para aparelhos muito pequenos (até 360px) */
@media (max-width: 360px) {
    .nossaHistoria,
    .nossoCompromisso {
        max-width: 98% !important;
        padding: 14px !important;
        padding-bottom: 45px !important;
        font-size: 0.8rem !important;
    }
    
    .nossaHistoria h2,
    .nossoCompromisso h2 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
        letter-spacing: 0.5px !important;
    }
    
    .nossaHistoria p,
    .nossoCompromisso p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
}

/* Ajustes para aparelhos extremamente pequenos (até 320px) */
@media (max-width: 320px) {
    .nossaHistoria,
    .nossoCompromisso {
        max-width: 99% !important;
        padding: 12px !important;
        padding-bottom: 40px !important;
        font-size: 0.75rem !important;
    }
    
    .nossaHistoria h2,
    .nossoCompromisso h2 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
        letter-spacing: 0.3px !important;
    }
    
    .nossaHistoria p,
    .nossoCompromisso p {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .areaIcones > div > div span {
        font-size: 0.6rem !important;
    }
    
    .areaIcones > div > div i {
        font-size: 1.5rem !important;
    }
}

  }

/* =========================================== */
/* MENU LATERAL FIXO - NAVEGAÇÃO AO ROLAR */
/* =========================================== */

.menu-lateral-fixo {
    position: fixed;
    left: -60px; /* Escondido por padrão - apenas ícones visíveis */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000; /* Acima do overlay do banner (z-index: 100) */
    background: rgba(0, 0, 0, 0.65); /* Mais transparente */
    backdrop-filter: blur(10px);
    border-radius: 0 20px 20px 0;
    padding: 15px 8px;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease, overflow 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    border-right: 2px solid rgba(255, 215, 0, 0.3);
    width: 60px; /* Largura compacta - apenas ícones */
    overflow: hidden; /* Esconde texto quando fechado */
    cursor: pointer; /* Indica que é clicável no mobile */
}

.menu-lateral-fixo.visible {
    left: 0;
}

/* Expandir menu lateral no hover */
.menu-lateral-fixo:hover {
    left: 0;
    width: 300px; /* Largura expandida - mostra todos os textos sem cortar, incluindo "Lifestyle & Resultados" */
    overflow: visible; /* Permite que o texto seja totalmente visível */
}

.menu-lateral-fixo ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espaçamento aumentado entre linhas */
}

.menu-lateral-fixo li {
    margin: 0;
}

.menu-lateral-fixo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 14px; /* Padding aumentado */
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* Contém o efeito de brilho dentro do botão */
    font-size: 0.95rem; /* Fonte aumentada */
    font-weight: 600;
    font-family: 'Montserrat', 'Roboto', 'Inter', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: normal; /* Permite quebra de linha para textos longos */
    line-height: 1.4; /* Espaçamento entre linhas aumentado */
    word-wrap: break-word; /* Quebra palavras longas se necessário */
}

.menu-lateral-fixo a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.2), 
        rgba(255, 215, 0, 0.4), 
        rgba(255, 215, 0, 0.2), 
        transparent
    );
    transition: left 0.5s ease;
    z-index: 0;
    border-radius: 12px; /* Mantém o efeito dentro das bordas arredondadas */
}

.menu-lateral-fixo a:hover::before,
.menu-lateral-fixo a.active::before {
    left: 100%;
}

.menu-lateral-fixo a i {
    font-size: 1.4rem; /* Ícone aumentado */
    width: 28px;
    min-width: 28px;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #FFD700;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.menu-lateral-fixo a span {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Mostrar texto quando menu expandir */
.menu-lateral-fixo:hover a span {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.menu-lateral-fixo a:hover,
.menu-lateral-fixo a.active {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    overflow: hidden; /* Garante que o efeito fique contido no hover também */
    border-radius: 12px; /* Mantém as bordas arredondadas */
}

.menu-lateral-fixo a:hover i,
.menu-lateral-fixo a.active i {
    color: #FFD700;
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* Ajustes para mobile - Menu lateral completamente oculto por padrão */
/* IMPORTANTE: max-width: 501px para não afetar tablets (502px+) */
@media (max-width: 501px) {
    .menu-lateral-fixo {
        width: 50px; /* Largura apenas para ícones */
        padding: 8px 4px; /* Padding reduzido */
        left: -100%; /* Completamente escondido por padrão */
        opacity: 0;
        pointer-events: none;
        transition: left 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    }
    
    /* Mostrar apenas quando rolar para cima - APENAS ÍCONES, SEM TEXTOS */
    .menu-lateral-fixo.visible.scroll-up {
        left: 0;
        opacity: 1;
        pointer-events: auto;
        width: 50px; /* Largura apenas para ícones - menu compacto */
    }
    
    .menu-lateral-fixo ul {
        gap: 6px; /* Espaçamento reduzido entre ícones */
    }
    
    .menu-lateral-fixo a {
        padding: 8px; /* Padding reduzido - apenas para centralizar ícone */
        justify-content: center; /* Centraliza ícone */
        align-items: center; /* Centraliza verticalmente */
        min-width: 40px; /* Largura mínima para área de toque */
        min-height: 40px; /* Altura mínima para área de toque */
    }
    
    .menu-lateral-fixo a i {
        font-size: 1.3rem; /* Tamanho do ícone */
        width: auto; /* Remove largura fixa */
        min-width: auto;
        margin: 0; /* Remove margens */
    }
    
    /* SEMPRE esconder texto no mobile - apenas ícones */
    .menu-lateral-fixo a span {
        display: none !important;
    }
    
    /* Desabilitar hover que expande o menu no mobile */
    .menu-lateral-fixo:hover {
        width: 50px !important; /* Mantém largura compacta no hover */
        overflow: hidden !important; /* Garante que não expanda */
    }
    
    /* Ajustar z-index para não tampar conteúdo */
    .menu-lateral-fixo {
        z-index: 100; /* Menor z-index para não tampar */
    }
    
    /* ========================================== */
    /* SEÇÃO INSTAGRAM - AJUSTES PARA MOBILE      */
    /* ========================================== */
    
    /* Remover espaços em branco do topo e bottom - apenas imagem */
    .instagram-chamada {
        margin-top: 0 !important; /* Remove margem superior */
        margin-bottom: 0 !important; /* Remove margem inferior */
        padding: 0 !important; /* Remove padding */
        height: auto !important; /* Altura automática baseada no conteúdo */
    }
    
    /* Container - ajustar espaçamentos para exibir título e botão */
    .instagram-chamada-conteudo {
        height: auto !important; /* Altura automática */
        padding: 1.5rem 1rem !important; /* Padding para espaçamento (menor no mobile) */
        margin: 0 !important; /* Remove margens */
        gap: 1rem !important; /* Espaçamento entre elementos (menor no mobile) */
        display: flex !important; /* Flex para alinhar elementos */
        flex-direction: column !important; /* Elementos em coluna */
        justify-content: center !important; /* Centraliza verticalmente */
        align-items: center !important; /* Centraliza horizontalmente */
    }
    
    /* Mostrar título e botão na versão mobile */
    .instagram-chamada-conteudo h2 {
        display: block !important; /* Mostra o título */
        margin: 0 0 0.75rem 0 !important; /* Espaçamento abaixo do título */
        font-size: clamp(1.2rem, 4vw, 1.8rem) !important; /* Tamanho responsivo */
    }
    
    .instagram-chamada-conteudo .btn-instagram {
        display: inline-block !important; /* Mostra o botão */
        margin: 0.75rem 0 0 0 !important; /* Espaçamento acima do botão */
    }
    
    /* Imagem ocupando 100% da largura sem espaços */
    .instagram-chamada-conteudoImg {
        background-image: url(../image/imgInstagrama.png) !important;
        background-size: 100% auto !important; /* Largura 100%, altura automática para manter proporção */
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-color: transparent !important; /* Remove cor de fundo */
        width: 100% !important; /* Largura total */
        height: auto !important; /* Altura automática baseada na proporção da imagem */
        min-height: 40vh !important; /* Altura mínima para garantir visibilidade (menor no mobile) */
        margin: 0 !important; /* Remove margens */
        padding: 0 !important; /* Remove padding */
        display: block !important;
        max-width: 100% !important; /* Garante que não ultrapasse a largura */
    }
}

/* Ajuste de margem esquerda para título "Linha Creatina" no Desktop */
@media (min-width: 502px) {
    /* Ajustar seção de produtos para não ficar atrás do menu lateral */
    .produtos-section {
        padding-left: 80px; /* Espaço para o menu lateral fixo (60px + margem) */
    }
    
    .produtos-row-wrapper {
        position: relative;
        padding-left: 0; /* Remove padding extra se houver */
    }
    
    .btn-nav {
        z-index: 10001 !important; /* Acima do menu lateral fixo (z-index: 10000) */
    }
    
    .categoria-titulo {
        padding-left: 4rem; /* Aumenta a margem esquerda do título */
    }
}

/* ====================================================== */
/* 📱 ÁREA EXCLUSIVA PARA TABLET                          */
/* Intervalo: Maior que Mobile (501px) e Menor que PC (1024px) */
/* ====================================================== */

@media screen and (min-width: 502px) and (max-width: 1024px) {

    /* ========================================== */
    /* HEADER - AJUSTES PARA TABLET               */
    /* ========================================== */
    
    /* 0. Ajustar altura do banner top para tablet */
    .areHeader {
        height: 80.5vh !important; /* Aumentado de 70vh para 80.5vh (+15%) */
        min-height: 80.5vh !important;
    }
    
    /* 1. Menu Eclipse - Mudar para linha e posicionar no topo */
    .menu-eclipse {
        flex-direction: row !important; /* Muda de coluna para linha */
        justify-content: center !important; /* Centraliza os botões */
        align-items: center !important;
        flex-wrap: wrap !important; /* Permite quebrar em duas linhas se necessário */
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 0 20px !important;
        gap: 8px !important; /* Espaçamento entre botões */
    }
    
    .menu-eclipse button {
        min-width: 120px !important; /* Largura mínima reduzida */
        max-width: 150px !important; /* Largura máxima */
        padding: 6px 12px !important; /* Padding reduzido */
        font-size: 0.7rem !important; /* Fonte menor */
        letter-spacing: 1px !important;
        position: relative !important;
        z-index: 1 !important; /* Garante que cada botão tenha sua própria camada */
        transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    /* Animação apenas vertical e mais sutil para tablet */
    .menu-eclipse button:hover,
    .menu-eclipse button:focus {
        transform: translateY(-3px) scale(1.05) !important; /* Apenas movimento vertical, scale reduzido */
        border-color: #EBC447 !important;
        color: #FFD700 !important;
        box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3) !important; /* Sombra mais sutil */
        z-index: 2 !important; /* Eleva o botão no hover para não ser sobreposto */
    }
    
    /* Desabilitar animação de brilho passante em tablet para evitar sobreposição */
    .menu-eclipse button::before {
        display: none !important; /* Remove o efeito de brilho que pode causar sobreposição */
    }
    
    /* 2. Título HeadPunch - Remover deslocamento negativo e ajustar posição */
    .headPunch {
        top: 0 !important; /* Remove o top: -15vh */
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 0 40px !important;
        position: relative !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .headPunch h2 {
        font-size: clamp(1.5rem, 3vw, 2rem) !important; /* Tamanho responsivo */
        line-height: 1.3 !important;
    }
    
    /* 3. Logo Branca - Centralizar e ajustar tamanho */
    .logoBranca {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }
    
    .logoBranca img {
        margin-left: 0 !important;
        margin-top: 0 !important;
        max-width: 180px !important; /* Tamanho ajustado para tablet */
        max-height: 90px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        position: relative !important;
    }
    
    /* 4. Imagem do Produto Rotativo - Aumentar tamanho e centralizar */
    #produto-rotativo {
        max-width: 85vw !important; /* Aumenta a largura aproveitando melhor o tablet */
        width: auto !important;
        max-height: 80vh !important; /* Aumenta a altura */
        min-width: 400px !important;
        min-height: 500px !important;
        position: absolute !important;
        left: 50% !important; /* Centraliza horizontalmente */
        bottom: 0 !important; /* Alinha ao bottom da imagem de background */
        transform: translateX(-50%) translateZ(0) !important; /* Centraliza perfeitamente */
        object-fit: contain !important;
        object-position: center bottom !important;
    }
    
    /* Garantir que o container do produto também esteja alinhado */
    .produtos-slider {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important; /* Alinha ao bottom */
    }
    
    /* ========================================== */
    /* SEÇÃO SOBRE - AJUSTES PARA TABLET          */
    /* ========================================== */
    
    /* Card "Quem Somos" - Aparecer imediatamente sem esperar scroll */
    #animar-historia {
        opacity: 1 !important; /* Força visibilidade imediata */
        transform: translateY(0) !important; /* Remove deslocamento inicial */
    }
    
    .nossaHistoria {
        margin: 2vh auto 3vh auto !important; /* Ajusta margem para aparecer logo após header */
        padding-bottom: 80px !important; /* Aumenta padding-bottom para evitar corte no iPad Mini */
        opacity: 1 !important; /* Garante que está visível */
        transform: translateY(0) !important; /* Remove qualquer transformação */
        animation: none !important; /* Desabilita animações CSS que possam interferir */
        min-height: auto !important; /* Remove altura mínima que pode causar corte */
        overflow: visible !important; /* Garante que conteúdo não seja cortado */
    }
    
    /* Ajuste específico para iPad Mini (altura menor) */
    @media screen and (min-width: 502px) and (max-width: 1024px) and (max-height: 1024px) {
        .nossaHistoria {
            padding-bottom: 100px !important; /* Padding extra para iPad Mini */
            margin-bottom: 4vh !important; /* Margem inferior aumentada */
        }
        
        .nossoCompromisso {
            padding-bottom: 80px !important; /* Padding extra para evitar corte */
            margin-bottom: 4vh !important; /* Margem inferior aumentada */
        }
        
        /* Garantir que a seção sobre tenha espaço suficiente */
        .areaSobre {
            padding-bottom: 2rem !important; /* Espaço extra na parte inferior */
            min-height: auto !important;
        }
        
        /* Corrigir gap na margem direita - remover limitações de largura */
        body, html {
            padding-right: 0 !important;
            margin-right: 0 !important;
            overflow-x: hidden !important; /* Evita scroll horizontal */
            width: 100% !important;
            max-width: 100vw !important;
        }
        
        /* Garantir que containers ocupem 100% da largura */
        .produtos-section {
            max-width: 95% !important; /* Aumenta de 90% para 95% no iPad Mini */
            padding-right: 0 !important;
            margin-right: 0 !important;
        }
        
        .produtos-container,
        .produtos-row-wrapper {
            max-width: 100% !important;
            padding-right: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
        }
        
        /* Cards de produtos - ajustar para ocupar melhor o espaço */
        .produto-card {
            max-width: 48vw !important; /* Ajusta para não criar gap */
        }
        
        /* Garantir que imagens ocupem toda largura disponível */
        .produto-imagem-container,
        .produto-imagem-container img {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Ajustar linha de produtos para não criar gap */
        .produtos-row {
            padding-right: 0 !important;
            margin-right: 0 !important;
            width: 100% !important;
        }
        
        /* ========================================== */
        /* MENU LATERAL - AJUSTES ESPECÍFICOS IPAD MINI */
        /* ========================================== */
        
        /* Garantir que o menu lateral seja totalmente funcional no iPad Mini */
        .menu-lateral-fixo {
            pointer-events: auto !important; /* Garante que o menu seja interativo */
            z-index: 1000 !important; /* Z-index alto para ficar acima de tudo */
            position: fixed !important; /* Garante posição fixa */
            display: block !important; /* Garante que está visível */
            visibility: visible !important; /* Garante visibilidade */
            opacity: 1 !important; /* Garante opacidade total */
        }
        
        /* Garantir que os links sejam clicáveis no iPad Mini */
        .menu-lateral-fixo a {
            pointer-events: auto !important; /* Garante que os links sejam clicáveis */
            cursor: pointer !important; /* Mostra cursor de ponteiro */
            z-index: 10 !important; /* Z-index alto para os links */
            position: relative !important; /* Cria contexto de posicionamento */
            touch-action: manipulation !important; /* Otimiza toque no iPad */
            -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3) !important; /* Highlight ao tocar */
            display: flex !important; /* Garante layout flex */
            width: 100% !important; /* Largura total para área de clique maior */
            min-height: 50px !important; /* Altura mínima maior para facilitar toque */
        }
        
        /* Garantir que ícones e textos não bloqueiem os cliques */
        .menu-lateral-fixo a i,
        .menu-lateral-fixo a span {
            pointer-events: none !important; /* Desabilita pointer-events nos filhos */
        }
        
        /* Garantir que o menu esteja visível e clicável */
        .menu-lateral-fixo.visible {
            pointer-events: auto !important;
            z-index: 1000 !important;
            left: 0 !important; /* Garante que está totalmente visível */
        }
    }
    
    /* Manter animação de scroll apenas para "Nosso Compromisso" */
    /* O card "Nosso Compromisso" (#animar-compromisso) mantém as animações de scroll normais */
    
    /* ========================================== */
    /* MENU LATERAL FIXO - AJUSTES PARA TABLET    */
    /* ========================================== */
    
    /* Reduzir largura do menu lateral para não tampar conteúdo */
    /* IMPORTANTE: Sobrescreve todas as regras de mobile com !important */
    .menu-lateral-fixo {
        width: 45px !important; /* Largura reduzida quando fechado (era 60px) */
        padding: 12px 6px !important; /* Padding reduzido */
        left: -45px !important; /* Posição inicial - mostra parcialmente os ícones */
        opacity: 1 !important; /* Garante que está visível - SOBRESCREVE opacity: 0 do mobile */
        pointer-events: auto !important; /* Permite interação - SOBRESCREVE pointer-events: none do mobile */
        z-index: 100 !important; /* Z-index adequado para tablet */
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease, overflow 0.3s ease !important;
        position: fixed !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 0 20px 20px 0 !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5) !important;
        border-right: 2px solid rgba(255, 215, 0, 0.3) !important;
        overflow: hidden !important;
        cursor: pointer !important;
        display: block !important; /* Garante que está visível */
    }
    
    /* Menu lateral visível quando tem a classe .visible - mostra completamente */
    .menu-lateral-fixo.visible {
        left: 0 !important; /* Mostra completamente quando visível */
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Reduzir largura quando expandido no hover */
    .menu-lateral-fixo:hover {
        left: 0 !important; /* Garante que aparece no hover */
        width: 200px !important; /* Largura reduzida de 300px para 200px */
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Garantir que o menu apareça sempre no tablet - mesmo sem .visible */
    /* Mostrar parcialmente os ícones sempre (left: -45px mostra parte dos ícones) */
    .menu-lateral-fixo:not(.visible):not(:hover) {
        left: -45px !important; /* Mostra parcialmente os ícones mesmo sem .visible */
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
    }
    
    /* Garantir que mesmo quando parcialmente visível, os links sejam clicáveis */
    .menu-lateral-fixo:not(.visible):not(:hover) a {
        pointer-events: auto !important; /* Links clicáveis mesmo quando menu está parcialmente visível */
    }
    
    /* Ajustar tamanho dos ícones e textos para caber na largura reduzida */
    .menu-lateral-fixo a {
        padding: 10px 8px !important; /* Padding reduzido */
        font-size: 0.85rem !important; /* Fonte um pouco menor */
    }
    
    .menu-lateral-fixo a i {
        font-size: 1.2rem !important; /* Ícone um pouco menor */
        width: 24px !important;
        min-width: 24px !important;
    }
    
    .menu-lateral-fixo a span {
        font-size: 0.85rem !important; /* Texto um pouco menor */
        display: block !important; /* Força a exibição do texto */
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
    
    /* Mostrar texto quando menu estiver visível ou no hover */
    .menu-lateral-fixo.visible a span,
    .menu-lateral-fixo:hover a span {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    /* Garantir que os links sejam clicáveis no tablet */
    .menu-lateral-fixo a {
        pointer-events: auto !important; /* Garante que os links sejam clicáveis */
        cursor: pointer !important; /* Mostra cursor de ponteiro */
        z-index: 10 !important; /* Garante que fique acima de outros elementos */
        position: relative !important; /* Cria contexto de posicionamento */
        user-select: none !important; /* Previne seleção de texto ao clicar */
        -webkit-tap-highlight-color: transparent !important; /* Remove highlight no mobile/tablet */
    }
    
    /* Garantir que o link pai receba o clique, não os filhos */
    .menu-lateral-fixo a i,
    .menu-lateral-fixo a span {
        pointer-events: none !important; /* Desabilita pointer-events nos filhos para que o clique seja no link pai */
    }
    
    /* Garantir que o menu esteja totalmente visível e clicável quando expandido */
    .menu-lateral-fixo.visible,
    .menu-lateral-fixo:hover {
        pointer-events: auto !important; /* Garante que o menu inteiro seja clicável */
    }
    
    /* Garantir que os links funcionem mesmo quando o menu está parcialmente visível */
    .menu-lateral-fixo a.nav-link {
        display: flex !important; /* Mantém layout flex */
        align-items: center !important;
        width: 100% !important; /* Largura total para área de clique maior */
        min-height: 44px !important; /* Altura mínima para facilitar clique no tablet */
    }
    
    /* Reduzir espaçamento entre itens */
    .menu-lateral-fixo ul {
        gap: 12px !important; /* Gap reduzido de 16px */
    }
    
    /* ========================================== */
    /* BANNER DESERTO - AJUSTES PARA TABLET       */
    /* ========================================== */
    
    /* Banner deserto - 100% da largura sem cortar laterais */
    .bannerDeserto {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: -50px !important; /* Margem negativa para reduzir espaço */
    }
    
    .bannerDeserto img {
        width: 100% !important; /* Ocupa 100% da largura */
        max-width: 100% !important; /* Garante que não ultrapasse */
        height: auto !important; /* Mantém proporção */
        object-fit: contain !important; /* Não corta a imagem */
        object-position: center !important; /* Centraliza a imagem */
        margin-top: 2rem !important;
        margin-bottom: 0 !important; /* Remove margem inferior para reduzir lacuna */
        display: block !important;
    }
    
    /* ========================================== */
    /* SEÇÃO PRODUTOS - AJUSTES PARA TABLET       */
    /* ========================================== */
    
    /* Seção de produtos - Aparecer imediatamente sem esperar scroll */
    #produtos {
        opacity: 1 !important; /* Força visibilidade imediata */
        transform: translateY(0) !important; /* Remove deslocamento inicial da animação */
    }
    
    .produtos-section {
        margin-top: 0 !important; /* Remove margem negativa que pode estar causando problema */
        padding-top: 1rem !important; /* Padding superior reduzido */
        padding-bottom: 2rem !important;
        position: relative !important;
        z-index: 1 !important; /* Garante que apareça sobre o banner se necessário */
        opacity: 1 !important; /* Força visibilidade */
        transform: translateY(0) !important; /* Remove qualquer transformação */
        animation: none !important; /* Desabilita animações CSS */
    }
    
    /* Garantir que o título e conteúdo apareçam */
    .produtos-titulo,
    .produtos-container,
    .categoria-produtos {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Ajustar o separador antes da seção de produtos */
    .bannerDeserto + div {
        margin-bottom: 0 !important; /* Remove margem do separador */
    }
    
    /* Reduzir margem inferior do banner para aproximar da seção de produtos */
    .bannerDeserto {
        margin-bottom: -20px !important; /* Ajusta para aproximar mais */
    }
    
    /* ========================================== */
    /* CARDS DE PRODUTOS - AJUSTES PARA TABLET    */
    /* ========================================== */
    
    /* Alinhar seção de produtos com os cards "Quem Somos" e "Nosso Compromisso" */
    .produtos-section {
        padding-left: 0 !important; /* Remove padding-left do desktop */
        padding-right: 0 !important;
        max-width: 90% !important; /* Mesma largura máxima dos cards "Quem Somos" */
        margin: 0 auto !important; /* Centraliza igual aos outros cards */
        width: 100% !important; /* Garante largura total */
        box-sizing: border-box !important;
    }
    
    .produtos-container {
        max-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Aumentar largura dos cards de produtos para aproveitar melhor a tela do tablet */
    .produto-card {
        width: 50vw !important; /* Aumenta de 45vw para 50vw */
        min-width: 50vw !important;
        max-width: 500px !important; /* Limite máximo para não ficar muito grande */
        padding: 1.75rem !important; /* Padding um pouco maior */
        box-sizing: border-box !important;
    }
    
    /* Ajustar container de imagem do produto */
    .produto-imagem-container {
        height: 280px !important; /* Altura ajustada para tablet */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Garantir que imagens dentro dos cards ocupem toda largura */
    .produto-imagem-container img {
        width: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Ajustar tamanho do nome do produto */
    .produto-nome {
        font-size: 1.5rem !important; /* Tamanho de fonte ajustado */
    }
    
    /* Ajustar padding da linha de produtos - alinhar com os cards acima */
    .produtos-row {
        padding: 0 !important; /* Remove padding lateral para alinhar */
        gap: 20px !important; /* Espaçamento entre cards */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ajustar wrapper da linha de produtos */
    .produtos-row-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Garantir que botões de navegação não criem gap */
    .btn-nav {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Garantir que toda a seção ocupe largura total sem gaps */
    section {
        padding-right: 0 !important;
        margin-right: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Ajustar título da categoria para alinhar */
    .categoria-titulo {
        padding-left: 0 !important; /* Remove padding-left para alinhar */
        padding-right: 0 !important;
        text-align: left !important;
        max-width: 90% !important; /* Mesma largura dos cards acima */
        margin: 0 auto 1.5rem auto !important; /* Centraliza igual */
    }
    
    /* Ajustar título principal da seção */
    .produtos-titulo {
        max-width: 90% !important; /* Mesma largura dos cards acima */
        margin: 0 auto 2rem auto !important; /* Centraliza igual */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* ========================================== */
    /* SEÇÃO ESTILO - AJUSTES PARA TABLET         */
    /* ========================================== */
    
    /* Imagem de background - usar bgDepoimentos.png da mesma forma que mobile */
    .testimonials-section {
        background-image: url('../image/bgDepoimentos.png') !important; /* Usa imagem do mobile */
        background-size: cover !important; /* Mesma configuração do mobile */
        background-position: center center !important; /* Mesma configuração do mobile */
        background-repeat: no-repeat !important; /* Mesma configuração do mobile */
        min-height: 80vh !important; /* Mesma altura mínima do mobile */
        width: 100% !important;
        padding: 2rem 1rem !important; /* Mesmo padding do mobile */
        align-items: center !important; /* Mesmo alinhamento do mobile */
    }
    
    /* ========================================== */
    /* SEÇÃO INSTAGRAM - AJUSTES PARA TABLET      */
    /* ========================================== */
    
    /* Remover espaços em branco do topo e bottom - apenas imagem */
    .instagram-chamada {
        margin-top: 0 !important; /* Remove margem superior */
        margin-bottom: 0 !important; /* Remove margem inferior */
        padding: 0 !important; /* Remove padding */
        height: auto !important; /* Altura automática baseada no conteúdo */
    }
    
    /* Container - ajustar espaçamentos para exibir título e botão */
    .instagram-chamada-conteudo {
        height: auto !important; /* Altura automática */
        padding: 2rem 1rem !important; /* Padding para espaçamento */
        margin: 0 !important; /* Remove margens */
        gap: 1.5rem !important; /* Espaçamento entre elementos */
        display: flex !important; /* Flex para alinhar elementos */
        flex-direction: column !important; /* Elementos em coluna */
        justify-content: center !important; /* Centraliza verticalmente */
        align-items: center !important; /* Centraliza horizontalmente */
    }
    
    /* Mostrar título e botão na versão tablet */
    .instagram-chamada-conteudo h2 {
        display: block !important; /* Mostra o título */
        margin: 0 0 1rem 0 !important; /* Espaçamento abaixo do título */
    }
    
    .instagram-chamada-conteudo .btn-instagram {
        display: inline-block !important; /* Mostra o botão */
        margin: 1rem 0 0 0 !important; /* Espaçamento acima do botão */
    }
    
    /* Imagem ocupando 100% da largura sem espaços */
    .instagram-chamada-conteudoImg {
        background-image: url(../image/imgInstagrama.png) !important;
        background-size: 100% auto !important; /* Largura 100%, altura automática para manter proporção */
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-color: transparent !important; /* Remove cor de fundo */
        width: 100% !important; /* Largura total */
        height: auto !important; /* Altura automática baseada na proporção da imagem */
        min-height: 50vh !important; /* Altura mínima para garantir visibilidade */
        margin: 0 !important; /* Remove margens */
        padding: 0 !important; /* Remove padding */
        display: block !important;
        max-width: 100% !important; /* Garante que não ultrapasse a largura */
    }
    
    /* ========================================== */
    /* SEÇÃO DISTRIBUIDOR - AJUSTES PARA TABLET   */
    /* ========================================== */
    
    /* Container - mudar de grid 2 colunas para 1 coluna (textos em cima, imagem embaixo) */
    #representante .biz-container {
        grid-template-columns: 1fr !important; /* Uma coluna apenas */
        gap: 3rem !important; /* Espaçamento entre textos e imagem */
        max-width: 90% !important; /* Mesma largura dos outros cards */
    }
    
    /* Conteúdo de texto - ocupar largura total */
    #representante .biz-content {
        width: 100% !important;
        text-align: center !important; /* Centraliza textos */
    }
    
    /* Área da imagem - ocupar largura total e mostrar imagem completa */
    #representante .biz-image-area {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 2rem !important; /* Espaçamento acima da imagem */
    }
    
    /* Imagem - largura total e mostrar completa */
    #representante .biz-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* Altura automática para mostrar imagem completa */
        min-height: 400px !important; /* Altura mínima */
        object-fit: contain !important; /* Mostra imagem completa sem cortar */
        object-position: center !important; /* Centraliza a imagem */
    }
    
    /* Picture - ajustar para largura total */
    #representante .biz-picture {
        width: 100% !important;
        height: auto !important;
    }
    
   

}

    /* ========================================== */
    /* SEÇÃO ESTILO - AJUSTES PARA DESKTOP        */
    /* ========================================== */
    @media screen and (min-width: 1025px) {
    /* Título do banner mais próximo do topo no desktop */
    .headPunch {
        position: absolute !important;
        top: clamp(20px, 3vh, 40px) !important; /* Espaçamento confortável do topo */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
        z-index: 99999 !important;
    }
    
    /* Reduzir altura da seção para 80% da tela */
    .testimonials-section {
        min-height: 80vh !important; /* Reduzido de 100vh para 80vh (80% da tela) */
        height: 80vh !important; /* Altura fixa de 80% da viewport */
        background-size: 120% auto !important; /* Aumenta largura para 120% para mostrar mais da imagem */
        background-position: center center !important; /* Mantém centralizado */
        background-repeat: no-repeat !important;
        justify-content: center !important; /* Centraliza conteúdo horizontalmente */
        align-items: center !important; /* Centraliza conteúdo verticalmente */
    }
    
    /* Centralizar container de conteúdo */
    .testimonials-section .content {
        max-width: 100% !important; /* permite aproximar da lateral no desktop */
        margin: 0 auto !important; /* Centraliza o container */
        padding: 2rem 1rem !important; /* menos margem lateral */
    }
    
    /* Centralizar carrossel de cards */
    .testimonials-carousel {
        width: 100% !important; /* Largura total do container pai */
        margin-left: 0 !important; /* Remove margem que expande para fora */
        max-width: 100% !important; /* ocupa mais a tela */
        margin: 0 auto !important; /* Centraliza o carrossel */
        padding-left: 1rem !important; /* aproxima das laterais */
        padding-right: 1rem !important;
    }
    
    /* Ajustar container do carrossel para centralizar */
    .carousel-container {
        margin: 0 auto !important; /* Centraliza o container */
        max-width: 100% !important;
    }
    
    /* ========================================== */
    /* SEÇÃO INSTAGRAM - AJUSTES PARA DESKTOP     */
    /* ========================================== */
    
    /* Reduz altura geral da seção para a imagem não ocupar a tela toda */
    .instagram-chamada {
        height: auto !important;
    }

    .instagram-chamada-conteudo {
        height: auto !important;
    }

    /* Usar imgInstagramaDesk.png na versão desktop */
    .instagram-chamada-conteudoImg {
        background-image: url(../image/imgInstagramaDesk.png) !important; /* Imagem específica para desktop */
        background-size: contain !important; /* nunca corta: mantém a imagem inteira */
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-color: transparent !important; /* Remove cor de fundo */
        width: 100% !important;
        aspect-ratio: 16 / 9; /* mantém proporção em telas muito largas sem cortar */
        height: auto !important;
        max-height: 520px !important; /* limita em telas grandes */
    }
    
}

/* ========================================== */
/* FOOTER - DESKTOP/TABLET (do zero)          */
/* ========================================== */
@media (min-width: 769px) {
    .site-footer {
        background: #050505;
        color: #ffffff;
        /* mais respiro nas laterais no desktop */
        padding: 3rem 4rem 1.5rem 4rem;
        font-family: 'Montserrat', 'Roboto', 'Inter', Arial, sans-serif;
    }

    .site-footer .footer-container {
        /* aproveita melhor telas largas sem "esticar" demais */
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        /* 3 colunas no desktop (Institucional oculto) */
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        gap: 2rem;
        align-items: start;
        justify-items: center; /* centraliza as colunas no grid */
    }

    .site-footer .footer-col.brand-col {
        padding-right: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .site-footer .footer-logo {
        display: block;
        width: 220px;
        max-width: 100%;
        height: auto;
        margin: 0 auto 1rem auto; /* centraliza a logo */
    }

    .site-footer .footer-slogan {
        margin: 0 auto 1.25rem auto; /* centraliza o texto */
        max-width: 36ch;
        font-size: 0.95rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.78);
        text-align: center; /* garante alinhamento central do texto */
    }

    .site-footer .social-links {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
    }

    .site-footer .social-links a {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
        transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .site-footer .social-links a:hover {
        border-color: rgba(255, 215, 0, 0.55);
        color: #FFD700;
        transform: translateY(-1px);
    }

    /* Esconde o bloco mobile no desktop */
    .site-footer .footer-social-mobile {
        display: none;
    }

    /* Ocultar coluna "Institucional" no desktop */
    .site-footer .footer-col.links-col.institucional-col {
        display: none;
    }

    /* Centraliza conteúdo das colunas de links/contato */
    .site-footer .footer-col.links-col,
    .site-footer .footer-col.contact-col {
        text-align: center;
    }

    .site-footer .footer-col h4 {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #ffffff;
    }

    .site-footer .footer-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        align-items: center;
    }

    .site-footer .footer-col ul li {
        margin: 0;
    }

    .site-footer .footer-col ul li a {
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
        font-size: 0.95rem;
        line-height: 1.35;
        transition: color 0.2s ease;
    }

    .site-footer .footer-col ul li a:hover {
        color: #FFD700;
    }

    .site-footer .footer-col.contact-col .contact-list {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.95rem;
        line-height: 1.4;
        gap: 0.6rem;
    }

    .site-footer .footer-col.contact-col .contact-list li a {
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: color 0.2s ease;
        cursor: pointer;
    }

    .site-footer .footer-col.contact-col .contact-list li a:hover {
        color: #FFD700;
    }

    .site-footer .footer-col.contact-col .contact-list li i {
        color: #FFD700;
        margin-right: 0.5rem;
    }

    .site-footer .footer-col.contact-col .btn-footer-zap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        background: #25D366;
        color: #06130b;
        font-weight: 700;
        text-decoration: none;
        width: fit-content;
        box-shadow: 0 10px 24px rgba(37, 211, 102, 0.25);
        transition: transform 0.2s ease, filter 0.2s ease;
    }

    .site-footer .footer-col.contact-col .btn-footer-zap:hover {
        transform: translateY(-1px);
        filter: brightness(1.02);
    }

    .site-footer .footer-bottom {
        max-width: 1200px;
        margin: 2.25rem auto 0 auto;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .site-footer .footer-bottom p {
        margin: 0;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.68);
    }

    /* Botão flutuante (WhatsApp) também aparece no desktop */
}