/* ============================================================
   Galeria — grade assimétrica de cartões arredondados
   ============================================================ */
.galeria{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:dense;
  gap:clamp(12px,1.5vw,20px);
}

/* --- item --- */
.item{
  position:relative;
  grid-column:span 4;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--raio-g);
  background:var(--uva-leve);
  box-shadow:var(--sombra-p);
  cursor:pointer;
  opacity:0;
  transform:translateY(40px) scale(.96);
  transition:opacity .8s var(--ease),transform .8s var(--ease-pulo),box-shadow .5s var(--ease);
}
.item.visivel{opacity:1;transform:none}
.item.visivel:hover{
  transform:translateY(-8px);
  box-shadow:var(--sombra-g);
}
.item.oculto{display:none}
.item.larga{grid-column:span 8;aspect-ratio:16/11}
.item.alta{grid-column:span 4;aspect-ratio:2/3}

/* --- foto em cor cheia, com zoom no hover --- */
.item img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.01);
  filter:saturate(1.08);
  transition:transform 1.1s var(--ease),filter .8s var(--ease);
}
.item:hover img{transform:scale(1.07);filter:saturate(1.18) contrast(1.03)}

/* --- véu que garante a leitura da legenda --- */
.item::before{
  content:"";
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:linear-gradient(to top,rgba(23,18,50,.88) 0%,rgba(23,18,50,.24) 42%,transparent 66%);
  opacity:.26;
  transition:opacity .6s var(--ease);
}
.item:hover::before{opacity:1}

/* --- tinta colorida que entra por cima --- */
.item .borda{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
  background:var(--grad-quente);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .6s var(--ease);
}
.item:hover .borda{opacity:.75}

/* --- legenda --- */
.legenda{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(18px,2vw,26px);
  transform:translateY(12px);
  opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease-pulo);
}
.item:hover .legenda{opacity:1;transform:none}
.legenda small{
  display:inline-block;
  margin-bottom:10px;
  padding:5px 12px;
  border-radius:var(--pilula);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinta);
  background:#fff;
}
.legenda h4{
  font-family:var(--display);
  font-weight:800;
  font-size:1.5rem;
  line-height:1.12;
  letter-spacing:-.03em;
  color:#fff;
}

/* --- indicador de ampliar --- */
.lupa{
  position:absolute;top:18px;right:18px;z-index:4;
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  color:#fff;
  font-size:1rem;
  background:var(--grad-quente);
  box-shadow:var(--sombra-m);
  opacity:0;
  transform:scale(.5) rotate(-40deg);
  transition:.5s var(--ease-pulo);
}
.item:hover .lupa{opacity:1;transform:none}

@media(max-width:900px){
  .item,.item.alta{grid-column:span 6}
  .item.larga{grid-column:span 12}
}
@media(max-width:560px){
  .item,.item.alta,.item.larga{grid-column:span 12;aspect-ratio:4/5}
  /* no toque não há hover: a legenda fica sempre visível */
  .legenda{opacity:1;transform:none}
  .item::before{opacity:1}
  .lupa{opacity:1;transform:none}
}