/* ==========================================================================
   MARCA — KASSIA E JUNIOR | CONVITE DE CASAMENTO
   Recria o convite antigo (WordPress/Elementor). Todos os textos são arte
   (PNG → WebP), montados nas mesmas proporções do original:
   hero em colagem de fotos, caixa da data, Local | Presentes, esteira de
   fotos e bloco final com mensagem, dress code e confirmação.
   Medidas: desktop = container de 1140px do Elementor; celular ≤ 767px.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------
   A frase "Baseado em uma história real..." está desenhada no fundo e os
   nomes ficam logo abaixo dela: por isso o fundo NÃO tem parallax (ele
   deslocaria a frase para cima dos nomes).                                  */
.hero {
  min-height: 1251px;
  padding: 10px;
  justify-content: flex-end;
}
.hero__bg {
  inset: 0;
  background: var(--hero-img) center top / cover no-repeat, var(--hero-base);
  transform: none !important;
  will-change: auto;
}
.hero__inner {
  width: 100%;
  max-width: 1140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.hero__title { width: 100%; font-size: 0; line-height: 0; }
.hero__title picture { display: contents; }
.hero__nomes { display: block; width: 54%; height: auto; margin: 0 auto; }

.hero__versiculo {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.versiculo { display: block; width: 51%; height: auto; }
.ornamento { display: block; width: 27%; height: auto; }

.musica { display: none; }

/* ---- Data -------------------------------------------------------------- */
.data {
  margin-top: 20px;                       /* faixa branca do original */
  padding: 60px 10px;
  display: flex;
  justify-content: center;
  background: url("../assets/data-fundo.webp") center / cover no-repeat;
}
.data__caixa {
  width: calc(min(1140px, 100%) * .87);
  min-height: 358px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: url("../assets/data-caixa.webp") center / cover no-repeat;
}
.data__caixa picture { display: contents; }
.data__contando { display: block; width: 47%; height: auto; }
.data__dia      { display: block; width: 39%; height: auto; }

/* ---- Local | Presentes ------------------------------------------------- */
.infos {
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px 10px;
  display: grid;
  grid-template-columns: 1fr 10.5% 1fr;
}
.infos__col,
.infos__divisor {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.infos__texto { display: block; width: 84%; height: auto; }
.infos .botao { width: 57%; }
.infos__divisor-v { display: block; width: 36px; height: auto; }
.infos__divisor-h { display: none; }

/* ---- Botões em arte (pílulas) ------------------------------------------ */
.botao {
  display: block;
  line-height: 0;
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              filter .3s ease;
}
.botao img { display: block; width: 100%; height: auto; }
.botao.is-visible:hover,
.botao:hover {
  transform: translateY(-5px);
  filter: brightness(1.04);
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              filter .3s ease;
}

/* ---- Esteira de fotos -------------------------------------------------- */
.vitrine {
  padding: 60px 0 8px;
  background: linear-gradient(180deg, #ffffff 0%, #adcae8 100%);
}
.trilho { gap: 5px; padding: 0; }
.slide {
  width: calc((100% - 15px) / 4);         /* 4 fotos por tela */
  border-radius: 0;
  background: transparent;
}
.slide__foto { aspect-ratio: 470 / 707; }

/* ---- Final: mensagem, dress code, confirmação -------------------------- */
.final {
  padding: 80px 10px 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  background: url("../assets/final-fundo.webp") center bottom / cover no-repeat;
}
.final__bloco {
  width: 100%;
  max-width: 1140px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.final__dizer    { display: block; width: 38%; height: auto; }
.final__dress    { display: block; width: 23%; height: auto; }
.final__confirme { display: block; width: 39%; height: auto; }
.botao--final    { width: 27%; }
.final__rodape {
  width: 100%;
  max-width: 1140px;
  line-height: 0;
  display: flex;
  justify-content: center;
}
.final__rodape img { display: block; width: 22%; height: auto; }

/* ---- Tablet (≤ 1024px, como no Elementor) ------------------------------ */
@media (max-width: 1024px) {
  .versiculo { width: 78%; }
  .infos__texto { width: 100%; }
  .infos .botao { width: 78%; }
  .infos__divisor-v { width: 73%; max-width: 36px; }
  .final { gap: 60px; }
  .final__dizer    { width: 53%; }
  .final__dress    { width: 30%; }
  .final__confirme { width: 57%; }
  .botao--final    { width: 36%; }
}

/* ---- Celular (≤ 767px) ------------------------------------------------- */
@media (max-width: 767px) {
  .hero { min-height: 842px; }
  .hero__bg {
    background: var(--hero-img-mobile) center top / cover no-repeat, var(--hero-base);
  }
  .hero__inner { gap: 31px; }
  .hero__nomes { width: 79%; }
  .hero__versiculo { padding: 0; }
  .versiculo { width: 100%; }
  .ornamento { width: 45%; }

  .data { padding: 30px 10px; }
  .data__caixa {
    width: 100%;
    background-image: url("../assets/data-caixa-mobile.webp");
  }
  .data__contando { width: 60%; }
  .data__dia      { width: 83%; }

  .infos {
    padding: 30px 10px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .infos__texto { width: 99%; }
  .infos .botao { width: 78%; }
  .infos__divisor-v { display: none; }
  .infos__divisor-h { display: block; width: 100%; height: auto; }

  .vitrine { padding: 30px 0 6px; }
  .slide { width: calc((100% - 5px) / 2); }   /* 2 fotos por tela */

  .final {
    padding: 30px 10px 34px;
    gap: 60px;
    background-image: url("../assets/final-fundo-mobile.webp");
  }
  .final__dizer    { width: 95%; }
  .final__dress    { width: 59%; }
  .final__confirme { width: 100%; }
  .botao--final    { width: 78%; }
  .final__rodape img { width: 57%; }
}

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

/* ==========================================================================
   SUBPÁGINA — LISTA DE PRESENTES (lista-de-presentes/index.html)
   Fundo azul-gelo, cards brancos de 3 em 3 (a última linha com 2, em 60%
   da largura), foto com cantos de 10px, título, preço e botão em degradê.
   ========================================================================== */
.pagina-lista { background: #f2f7ff; }

.presentes {
  width: 100%;
  padding: 60px 10px 0;
  font-family: "Montserrat", sans-serif;
  letter-spacing: -.1px;
}
.presentes__linha {
  max-width: 1140px;
  margin: 0 auto 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.presentes__linha--dupla {
  max-width: calc(60vw - 20px);
  grid-template-columns: repeat(2, 1fr);
}

.presente {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 30px 20px;
  border-radius: 15px;
  background: #ffffff;
}
.presente.is-visible:hover,
.presente:hover {
  transform: scale(1.01);
  transition: transform .3s ease;
}
.presente__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.presente__titulo,
.presente__desc,
.presente__preco {
  line-height: 1;
  color: #494949;
}
.presente__titulo { font-size: 18px; font-weight: 600; }
.presente__desc   { font-size: 16px; font-weight: 500; }
.presente__preco  { font-size: 19px; font-weight: 500; color: #6d6d6d; }

.presente__botao {
  display: block;
  padding: 15px 0;
  border-radius: 15px;
  background: linear-gradient(130deg, #adcae8 0%, #89aad7 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), filter .3s ease;
}
.presente__botao:hover {
  transform: translateY(-10px);
  filter: brightness(1.04);
}

@media (max-width: 1024px) {
  .presente { padding: 20px 10px; }
  .presente__titulo,
  .presente__preco { font-size: 14px; }
  .presente__botao { font-size: 12px; }
}

@media (max-width: 767px) {
  .presentes { padding-top: 35px; }
  .presentes__linha,
  .presentes__linha--dupla {
    max-width: none;
    grid-template-columns: 1fr;
    margin-bottom: 18px;
  }
  .presente__titulo { font-size: 18px; }
  .presente__desc   { font-size: 18px; }
  .presente__preco  { font-size: 16px; }
  .presente__botao  { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .presente:hover, .presente.is-visible:hover, .presente__botao:hover { transform: none; }
}