.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#EDD101;--e-global-color-text:#FFFFFF;--e-global-color-accent:#F2F2F2;--e-global-color-ba84a19:#0094E4;--e-global-color-1426355:#EDD101;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==============================
   VARIÁVEIS - AJUSTE AQUI
============================== */
:root {
  --spacing-x: -50px;
  --spacing-y: 30px;
  --rotation: 15deg;
  --hover-lift: -30px;
  --hover-scale: 1.08;
  --blur-amount: 5px;
  --transition-speed: 0.8s;
  --desktop-image-width: 270px;

  /* Overlay */
  --overlay-radius: 18px;
  --overlay-padding: 18px;
  --overlay-bg: rgba(10, 10, 10, 0.82);
  --overlay-border: rgba(255, 255, 255, 0.12);
  --overlay-text: #ffffff;
}

/* ==============================
   CONTAINER PAI
============================== */
.gallery-container {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

/* ==============================
   CADA CARD (imagem + overlay)
============================== */
.gallery-card{
  position: relative !important;
  flex-shrink: 0 !important;
  width: var(--desktop-image-width) !important;
  max-width: var(--desktop-image-width) !important;
  cursor: pointer;
  z-index: 1;
  transition: all var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* garante que a imagem ocupe o card */
.gallery-card .elementor-widget-image img{
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 16px; /* opcional */
}

/* ==============================
   OVERLAY (CONTÊINER QUE "ABRE")
============================== */
.gallery-overlay{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  bottom: 12px !important;
  width: calc(100% - 24px) !important;

  opacity: 0 !important;
  pointer-events: none !important;

  background: var(--overlay-bg) !important;
  color: var(--overlay-text) !important;
  border: 1px solid var(--overlay-border) !important;
  border-radius: var(--overlay-radius) !important;
  padding: var(--overlay-padding) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: all 0.35s ease !important;
}

/* Abre no hover do card */
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover .gallery-overlay{
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0px) !important;
  }
}

/* ==============================
   EFEITO DE BLUR NOS OUTROS
============================== */
@media (hover: hover) and (pointer: fine) {
  .gallery-container:hover .gallery-card {
    filter: blur(var(--blur-amount)) brightness(0.6) !important;
    opacity: 0.5 !important;
  }

  .gallery-container:hover .gallery-card:hover {
    filter: brightness(1.1) blur(0px) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale)) rotate(0deg) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ==============================
   POSIÇÕES (mantém o seu stack)
============================== */
.snap-hover1 {
  transform: translate(calc(var(--spacing-x) * -1), var(--spacing-y)) rotate(calc(var(--rotation) * -1)) !important;
}
.gallery-container:hover .snap-hover1:hover {
  transform: translate(calc(var(--spacing-x) * -1), 0px) rotate(0deg) scale(var(--hover-scale)) !important;
}

.snap-hover2 {
  transform: translate(calc(var(--spacing-x) * -0.5), calc(var(--spacing-y) * 0.5)) rotate(calc(var(--rotation) * -0.5)) !important;
}
.gallery-container:hover .snap-hover2:hover {
  transform: translate(calc(var(--spacing-x) * -0.5), calc(var(--hover-lift) * 0.5)) rotate(0deg) scale(var(--hover-scale)) !important;
}

.snap-hover3 {
  transform: translate(0px, 0px) rotate(0deg) !important;
  z-index: 2;
}
.gallery-container:hover .snap-hover3:hover {
  transform: translate(0px, var(--hover-lift)) rotate(0deg) scale(var(--hover-scale)) !important;
}

.snap-hover4 {
  transform: translate(calc(var(--spacing-x) * 0.5), calc(var(--spacing-y) * 0.5)) rotate(calc(var(--rotation) * 0.5)) !important;
}
.gallery-container:hover .snap-hover4:hover {
  transform: translate(calc(var(--spacing-x) * 0.5), calc(var(--hover-lift) * 0.5)) rotate(0deg) scale(var(--hover-scale)) !important;
}

.snap-hover5 {
  transform: translate(var(--spacing-x), var(--spacing-y)) rotate(var(--rotation)) !important;
}
.gallery-container:hover .snap-hover5:hover {
  transform: translate(var(--spacing-x), 0px) rotate(0deg) scale(var(--hover-scale)) !important;
}

/* ==============================
   TABLET
============================== */
@media (max-width: 1024px) and (min-width: 641px) {
  :root {
    --spacing-x: -30px;
    --spacing-y: 20px;
    --rotation: 12deg;
    --desktop-image-width: 160px;
  }
}

/* ==============================
   MOBILE - carrossel + overlay visível
============================== */
@media (max-width: 640px) {
  .gallery-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 20px !important;
    padding: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  .gallery-container::-webkit-scrollbar { display: none; }
  .gallery-container { -ms-overflow-style: none; scrollbar-width: none; }

  .gallery-card {
    flex: 0 0 auto !important;
    width: 250px !important;
    max-width: 250px !important;
    scroll-snap-align: center !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .snap-hover1,.snap-hover2,.snap-hover3,.snap-hover4,.snap-hover5{
    transform: none !important;
    position: relative !important;
  }

  /* no mobile, deixa o overlay sempre aparecendo (sem hover) */
  .gallery-overlay{
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0px) !important;
  }

  .gallery-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }
}

@media (max-width: 480px) {
  .gallery-container { gap: 15px !important; padding: 15px !important; }
  .gallery-card { width: 200px !important; max-width: 200px !important; }
}/* End custom CSS */