/* ==========================================================================
   MARCA — MARIA FLOR SELECT
   Recria o linkbio antigo (WordPress/Elementor): fundo turquesa bordado
   cobrindo a página toda, logo oval no topo, o card do Grupo VIP como
   primeira opção, dois cards em arte lado a lado e a arte "Faça uma parceria".
   No celular tudo vira uma coluna só.
   ========================================================================== */

/* ---- Fundo bordado: cobre hero + cards (o rodapé fica fora) ------------ */
.fundo {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg) url("../assets/fundo.webp") center / cover no-repeat;
}

/* ---- Hero: só o logo, sem foto ----------------------------------------- */
.hero {
  padding: 115px 10px 0;
  overflow: visible;
}
.hero__bg { display: none; }
.hero__title { line-height: 0; }
.hero__logo {
  width: min(568px, calc(min(100vw - 20px, 1140px) * .42));
  max-width: none;
  margin: 0 auto;
}

/* ---- Linhas de cards --------------------------------------------------- */
.linha {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 10px;
}
.linha--vip   { margin-top: 135px; }
.linha--cards { margin-top: 41px; }
.linha--extras {
  margin-top: 41px;
  align-items: center;
  padding-bottom: 90px;
}

/* Card em arte PNG com fundo transparente: sem moldura, sem sombra */
.card {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  transition: transform .3s ease;
}
.card img { height: auto; }
.card:hover img { transform: none; }          /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-10px);                /* igual ao hover do antigo */
  box-shadow: none;
  transition: transform .3s ease;
}
.card.is-visible:active,
.card:active { transform: translateY(-6px); }

.card--foto { flex: 0 1 487px; }
.card--vip  { flex: 0 1 611px; }
.parceria   { flex: 0 1 469px; }
.parceria .card {
  width: 74%;
  margin: 0 auto;
}

/* ---- Entradas: logo em fade, cards pelos lados e de baixo (como no antigo) */
.hero__inner.reveal:not(.is-visible) { transform: none; }
.reveal--esq:not(.is-visible) { transform: translateX(-60px); }
.reveal--dir:not(.is-visible) { transform: translateX(60px); }
.reveal--dir.reveal { transition-delay: .1s; }

/* ---- Rodapé ameixa ----------------------------------------------------- */
.footer { padding: 10px; }
.footer small {
  display: block;
  font-size: 14px;
  line-height: 14px;
}

/* ---- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero__logo { width: min(568px, calc((100vw - 20px) * .65)); }
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 767px) {
  .fundo { background-image: url("../assets/fundo-mobile.webp"); }

  .hero { padding-top: 70px; }
  .hero__logo,
  .hero .hero__logo { width: calc((100vw - 20px) * .89); max-width: none; }

  .linha {
    flex-direction: column;
    align-items: stretch;
    gap: 19px;
    padding: 0 20px;
  }
  .linha--vip    { margin-top: 80px; }
  .linha--cards  { margin-top: 19px; }
  .linha--extras { gap: 20px; padding-bottom: 80px; }
  .card--foto, .card--vip, .parceria { flex: none; }
  .parceria .card { width: 84%; }

  .reveal--esq:not(.is-visible),
  .reveal--dir:not(.is-visible) { transform: translateX(0) translateY(28px); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.is-visible:hover, .card:hover { transition: none; transform: none; }
  .reveal--esq:not(.is-visible),
  .reveal--dir:not(.is-visible) { transform: none; }
}