/* =========================================================
   Marquee / Infinite scroll carousel
   ========================================================= */
.marquee-section{
  width:100%;
  background:#f8f7ec;
/*  padding:10px 0;*/
  overflow:hidden;            /* esconde as bordas do loop infinito */
  font-family:'Montserrat',system-ui,sans-serif;
  border-top: 10px solid #f8f7ec;
}

.marquee{
  position:relative;
  width:100%;
}

.marquee-track{
  display:flex;
  align-items:center;
  gap:1px;                    /* precisa bater com GAP no marquee.js */
  will-change:transform;
  cursor:grab;
  touch-action:pan-y;         /* permite scroll vertical da página, arrasto horizontal é nosso */
}
.marquee-track:active{ cursor:grabbing; }
.marquee-track img{
  user-select:none;
  -webkit-user-drag:none;
}

/* slot de 320x320 — imagens maiores aparecem centralizadas (overflow visível) */
.marquee-item{
  flex:0 0 320px;
  width:320px;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
}
.marquee-item img{
  width:480px;
  height:320px;
  flex:none;                 /* tamanho original 480x320; o slot 320x320 corta o excedente */
  display:block;
  max-width:none;              /* impede o encolhimento pela largura do slot */
  transition:transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease, box-shadow .45s ease;
}

/* hover sutil indicando que é clicável */
.marquee-item:hover img{
  transform:scale(1.05);
  filter:brightness(1.08);
  box-shadow:0 16px 46px rgba(0,0,0,.55);
}

/* setas laterais — aparecem no hover do carrossel */
.marquee-arrow{
  position:absolute;
  top:0;
  bottom:0;
  width:84px;
  border:none;
  cursor:pointer;
  z-index:5;
  opacity:0;
  transition:opacity .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:34px;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.marquee:hover .marquee-arrow{ opacity:1; }
.marquee-arrow:active{ color:#f5c518; }
.marquee-arrow--left{
  left:0;
  background:linear-gradient(90deg, rgba(13,15,20,.9), rgba(13,15,20,0));
}
.marquee-arrow--right{
  right:0;
  background:linear-gradient(270deg, rgba(13,15,20,.9), rgba(13,15,20,0));
}

/* ---------- lightbox coverflow ---------- */
.mq-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:9999;
}
.mq-lightbox.open{ opacity:1; pointer-events:auto; }

.mq-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.mq-img{
  position:absolute;
  top:50%;
  left:50%;
  max-height:92vh;
  max-width:96vw;        /* mesmo limite para todas -> lateral e central têm o mesmo tamanho final */
  box-shadow:0 22px 90px rgba(0,0,0,.6);
  will-change:transform, opacity, filter;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter .5s ease;
  -webkit-user-drag:none;
  user-select:none;
}
/* foto principal — grande e nítida (efeito de "zoom" em relação às laterais) */
.mq-cur{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  z-index:3;
  cursor:grab;
}
.mq-cur:active{ cursor:grabbing; }
/* fatias laterais — menores, apagadas e clicáveis */
.mq-side{
  opacity:.4;
  filter:brightness(.6);
  z-index:2;
  cursor:pointer;
}
.mq-side:hover{ opacity:.62; filter:brightness(.78); }
.mq-prev-img{ transform:translate(calc(-50% - 50vw),-50%) scale(.62); }
.mq-next-img{ transform:translate(calc(-50% + 50vw),-50%) scale(.62); }

.mq-close,
.mq-nav{
  position:absolute;
  color:#fff;
  background:none;
  border:none;
  cursor:pointer;
  line-height:1;
  z-index:6;
  font-family:'Montserrat',system-ui,sans-serif;
}
.mq-close{ top:22px; right:30px; font-size:42px; }
.mq-nav{ top:50%; transform:translateY(-50%); font-size:50px; padding:16px 24px; opacity:.85; }
.mq-nav:hover{ opacity:1; }
.mq-prev{ left:14px; }
.mq-next{ right:14px; }

@media (max-width:520px){
  .marquee-item{ flex:0 0 220px; width:220px; height:220px; }
  .marquee-item img{ width:480px; height:320px; }
}
@media (max-width:450px){
  .marquee-item{ flex:0 0 100vw; width:100vw; height:auto; aspect-ratio:3/2; }
  .marquee-item img{ width:100%; height:100%; object-fit:cover; }
}


/* ---------- spinner de carregamento do lightbox ---------- */
.mq-spin{
  position:absolute;
  top:50%;
  left:50%;
  width:52px;
  height:52px;
  margin:0;
  border:4px solid rgba(255,255,255,.22);
  border-top-color:#fff;
  border-radius:50%;
  z-index:1;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:mq-spin .9s linear infinite;
  transition:opacity .2s ease;
}
.mq-spin.show{ opacity:1; }
@keyframes mq-spin{ from{ transform:translate(-50%,-50%) rotate(0); } to{ transform:translate(-50%,-50%) rotate(360deg); } }