/* ==========================================================================
   MARCA — LUIGI SORVETES | PIUMHI-MG
   Recria o linkbio antigo (WordPress/Elementor): uma única arte de fundo
   (ondas amarelo/azul) cobrindo a página, título em arte, 4 cards em PNG
   (2 largos + 2 lado a lado) e esteira contínua de fotos, borda a borda.
   Medidas copiadas do Elementor: padding 156/80/10, gap 100 entre blocos,
   cards em 56% da largura, 5 fotos por tela (3 no tablet, 2 no celular).
   ========================================================================== */

/* ---- Fundo único da página -------------------------------------------- */
.fundo {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 156px 10px 80px;
  background: var(--bg) url("../assets/fundo.webp") 0 0 / cover no-repeat;
}

/* ---- Hero: só o título em arte (sem foto, sem parallax) ---------------- */
.hero {
  width: min(506px, 100%);
  padding: 0;
  overflow: visible;
}
.hero__bg { display: none; }
.hero__inner { width: 100%; }
.hero__title { line-height: 0; font-size: 0; }
.hero__logo {
  width: 88%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* ---- Corpo -------------------------------------------------------------- */
.page {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

/* ---- Cards em arte ------------------------------------------------------ */
.cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 56%;
  margin: 0;
  padding: 10px;
}
.cards__dupla {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
}
.cards__dupla .card { flex: 1 1 0; }

.card {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}
.card img { height: auto; }
.card:hover img { transform: none; }         /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-8px);               /* o mesmo -8px do original */
  box-shadow: none;
}
.card.is-visible:active,
.card:active { transform: translateY(-3px); }

.cards__dupla .card:nth-child(1).reveal { transition-delay: .25s; }
.cards__dupla .card:nth-child(2).reveal { transition-delay: .35s; }

/* ---- Carrossel: esteira borda a borda, setas por cima, pontos embaixo --- */
.vitrine {
  position: relative;
  width: 100%;
  padding: 0;
}
.trilho {
  gap: .01px;               /* sem espaço entre fotos (0 faria o JS usar 16) */
  padding: 0;
}
.slide {
  width: 20%;               /* 5 fotos por tela */
  border-radius: 0;
  background: none;
  scroll-snap-align: start;
}
.slide__foto { aspect-ratio: 387 / 580; }

.vitrine__setas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 36px;             /* altura da faixa dos pontos */
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  pointer-events: none;
}
.vitrine__setas button {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 0;
  background: none;
  color: rgba(238, 238, 238, .9);
  transition: color .2s ease, transform .2s ease;
}
.vitrine__setas button:hover {
  background: none;
  color: #ffffff;
  transform: scale(1.15);
}
.vitrine__setas svg { width: 20px; height: 20px; }

.pontos {
  gap: 12px;
  margin: 0;
  padding: 19px 0 11px;
}
.pontos button {
  width: 6px;
  height: 6px;
  background: #000000;
  opacity: .2;
  transition: opacity .2s ease;
}
.pontos button[aria-current="true"] {
  background: #000000;
  opacity: 1;
  transform: none;
}

/* ---- Rodapé discreto, na mesma cor do fim do fundo --------------------- */
.footer { padding: 12px 20px 16px; }
.footer small { color: rgba(255, 255, 255, .55); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .card.is-visible:hover { transform: none; }
  .vitrine__setas button { transition: none; }
}

/* ---- Tablet (Elementor: 768 a 1024) ------------------------------------ */
@media (max-width: 1024px) {
  .fundo { gap: 50px; padding-top: 180px; }
  .page { gap: 50px; }
  .cards { width: 90%; }
  .slide { width: calc(100% / 3); }
}

/* ---- Celular (Elementor: até 767) --------------------------------------- */
@media (max-width: 767px) {
  .fundo {
    padding-top: 130px;
    background-image: url("../assets/fundo-mobile.webp");
  }
  .hero__logo { width: 87%; }

  .cards {
    width: 100%;
    padding: 0;
    gap: 40px;
  }
  .cards__dupla .card { flex: none; width: 45%; }

  .slide { width: 50%; }
}