/* ==========================================================================
   MARCA — THAIS
   Recria o linkbio antigo (WordPress/Elementor): hero em foto de ponta a
   ponta com o "Seja Bem Vindo(a)" na própria arte, dois cards em arte PNG
   (versão larga no desktop, versão própria no celular) sobre fundo rosa e
   faixa grafite no rodapé.
   ========================================================================== */

/* ---- Hero: altura = proporção da arte (1920x779), sem conteúdo por cima -- */
.hero {
  min-height: calc(100vw * 779 / 1920);
  padding: 0;
}
.hero__bg { inset: 0; }              /* sem folga: a arte não pode ser ampliada */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Cards em arte, uma coluna, largura total -------------------------- */
.cards {
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 10px;
}
.card {
  border-radius: 0;                  /* os cantos arredondados já estão na arte */
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.card img,
.card picture { display: block; width: 100%; height: auto; }
.card:hover img { transform: none; } /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-5px);       /* igual ao hover do original */
  box-shadow: none;
}
.card.is-visible:active,
.card:active { transform: translateY(-2px); }

/* entrada vindo da esquerda, como o fadeInLeft do original */
.cards .card.reveal { transform: translateX(-40px); }
.cards .card.reveal.is-visible { transform: none; }
.cards .card.reveal.is-visible:hover { transform: translateY(-5px); }

/* ---- Rodapé: faixa grafite, Poppins 600 15px --------------------------- */
.footer { padding: 10px; }
.footer small {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
}

/* ---- Celular (mesmo corte do Elementor: 767px) ------------------------- */
@media (max-width: 767px) {
  .hero { min-height: calc(100vw * 1021 / 1062); padding: 0; }
  .hero__bg {
    background:
      var(--hero-overlay),
      var(--hero-img-mobile) center / cover no-repeat,
      var(--hero-base);
  }
  .cards { margin-top: 0; }
}

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