.elementor-5653 .elementor-element.elementor-element-267fbba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-21b92f0 */<style>
/* ============================================
   GALERIA ELEMENTOR - CONFIGURAÇÕES GLOBAIS
   ============================================ */

/* Container principal - define altura para scroll */
.gallery-elementor-unique {
  position: relative;
  width: 100%;
}

/* Track com posição fixa apenas quando necessário */
.gallery-elementor-unique .gallery-track-unique {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  gap: 0.25rem;
  padding: 0.25rem;
  will-change: transform;
  z-index: 1;
}

.gallery-elementor-unique .card-unique {
  height: 400px;
  overflow: hidden;
  position: relative;
}

.gallery-elementor-unique .card-image-wrapper-unique {
  height: 135%;
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.gallery-elementor-unique .card-image-wrapper-unique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   MODO EDITOR ELEMENTOR - Estático
   ============================================ */
body.elementor-editor-active .gallery-elementor-unique .gallery-track-unique {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
}

body.elementor-editor-active .gallery-elementor-unique .card-unique {
  height: 300px;
}

body.elementor-editor-active .gallery-elementor-unique .card-image-wrapper-unique {
  position: relative;
  height: 100%;
}

/* ============================================
   1. DESKTOP - Telas modernas (padrão)
   ============================================ */
@media screen and (min-width: 1025px) {
  .gallery-elementor-unique .gallery-track-unique {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   2. TABLET RETRATO
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .gallery-elementor-unique .gallery-track-unique {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-elementor-unique .card-unique {
    height: 350px;
  }
}

/* ============================================
   3. MOBILE PAISAGEM
   ============================================ */
@media screen and (min-width: 551px) and (max-width: 767px) {
  .gallery-elementor-unique .gallery-track-unique {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-elementor-unique .card-unique {
    height: 280px;
  }
}

/* ============================================
   4. MOBILE RETRATO
   ============================================ */
@media screen and (max-width: 550px) {
  .gallery-elementor-unique .gallery-track-unique {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .gallery-elementor-unique .card-unique {
    height: 350px;
  }
}
</style>

<script>
/* ============================================
   GALERIA ELEMENTOR - JAVASCRIPT
   ============================================ */

(function() {
  'use strict';
  
  // Verifica se está no editor do Elementor
  const isEditor = document.body.classList.contains('elementor-editor-active');
  
  // Se estiver no editor, não executa nada
  if (isEditor) {
    console.log('Galeria Elementor: Modo editor - efeitos desativados');
    return;
  }
  
  function initGallery() {
    const gallery = document.querySelector('.gallery-elementor-unique');
    const track = document.querySelector('.gallery-track-unique');
    const cards = document.querySelectorAll('.card-unique');
    
    if (!gallery || !track || cards.length === 0) return;
    
    const easing = 0.05;
    let startY = 0;
    let endY = 0;
    let raf = null;
    
    const lerp = (start, end, t) => start * (1 - t) + end * t;
    
    function updateScroll() {
      startY = lerp(startY, endY, easing);
      
      // Define altura do container para permitir scroll da página
      const trackHeight = track.scrollHeight || track.clientHeight;
      gallery.style.height = trackHeight + 'px';
      
      // Move o track inteiro baseado no scroll
      track.style.transform = 'translateY(' + startY + 'px)';
      
      // Aplica parallax em cada imagem
      activateParallax();
      
      // Continua animação enquanto houver diferença
      if (Math.abs(startY - endY) > 0.5) {
        raf = requestAnimationFrame(updateScroll);
      } else {
        cancelAnimationFrame(raf);
        raf = null;
      }
    }
    
    function startScroll() {
      endY = window.scrollY;
      if (!raf) {
        raf = requestAnimationFrame(updateScroll);
      }
    }
    
    function parallax(card) {
      const wrapper = card.querySelector('.card-image-wrapper-unique');
      if (!wrapper) return;
      
      const cardHeight = card.offsetHeight;
      const wrapperHeight = wrapper.offsetHeight;
      const diff = cardHeight - wrapperHeight;
      
      const rect = card.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      
      // Calcula progresso do card na viewport
      const progress = rect.top / windowHeight;
      const yPos = diff * progress;
      
      wrapper.style.transform = 'translateY(' + yPos + 'px)';
    }
    
    const activateParallax = () => cards.forEach(parallax);
    
    // Inicialização
    function init() {
      // Força cálculo inicial da altura
      const trackHeight = track.scrollHeight || track.clientHeight;
      gallery.style.height = trackHeight + 'px';
      
      activateParallax();
      startScroll();
    }
    
    // Event listeners
    window.addEventListener('load', init, false);
    window.addEventListener('scroll', startScroll, false);
    window.addEventListener('resize', function() {
      const trackHeight = track.scrollHeight || track.clientHeight;
      gallery.style.height = trackHeight + 'px';
      updateScroll();
    }, false);
  }
  
  // Inicializa quando DOM estiver pronto
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initGallery);
  } else {
    initGallery();
  }
  
})();
</script>/* End custom CSS */