/* ==========================================================================
   MARCA — DR. JOSÉ AUGUSTO | NUTRIÇÃO INTEGRATIVA
   Recria o linkbio antigo (WordPress/Elementor): hero em foto com o título
   em arte e o mouse animado, faixa dourada, seção de links sobre fundo
   marinho (título + logo, cards em arte 2 + 1 + 2) e rodapé azul.
   Medidas copiadas do Elementor: hero 818 / 714 / 625 px, conteúdo 1140 px,
   quebras em 1024 e 767 px.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------
   O fundo repete o "cover / top center" do original, mas calculado sobre a
   altura do hero (e não da camada do parallax, que é mais alta): a largura
   da foto é max(100%, altura x proporção). A arte do desktop foi estendida
   embaixo com o mesmo tom, para o parallax não revelar borda.             */
.hero {
  --hero-h: 818px;
  --hero-prop: 1920 / 1099;
  --mouse: 57px;                    /* lottie do original: 5% de 1140   */
  min-height: var(--hero-h);
  padding: 0 0 30px;
  justify-content: flex-end;
  gap: 26px;
}
.hero__bg {
  inset: 0 0 -40% 0;
  background:
    var(--hero-img) center top / max(100%, calc(var(--hero-h) * var(--hero-prop))) auto no-repeat,
    var(--hero-base);
}
.hero__inner { width: 100%; max-width: 1140px; }
.hero__titulo img {
  display: block;
  width: 43%;
  height: auto;
  margin: 0 auto;
}

/* Mouse animado (substitui a animação Lottie do original) */
.mouse {
  position: relative;
  width: var(--mouse);
  height: var(--mouse);
  display: grid;
  place-items: center;
}
.mouse__corpo {
  position: relative;
  width: 62%;
  height: 92%;
  border: max(2px, calc(var(--mouse) * .055)) solid #ffffff;
  border-radius: 999px;
  transform: translateY(-9%);       /* mesma altura do lottie original */
}
.mouse__ponto {
  position: absolute;
  left: 50%;
  top: 30%;
  width: calc(var(--mouse) * .11);
  height: calc(var(--mouse) * .11);
  margin-left: calc(var(--mouse) * -.055);
  border-radius: 50%;
  background: #ffffff;
  transform: scale(0);
  animation: mousePonto 2.6s cubic-bezier(.3,.7,.2,1) infinite;
}
@keyframes mousePonto {
  0%, 20%  { transform: translateY(0) scale(0); }
  30%      { transform: translateY(0) scale(1.15); }
  36%, 45% { transform: translateY(0) scale(1); }
  70%      { transform: translateY(calc(var(--mouse) * .36)) scale(1); }
  78%,100% { transform: translateY(calc(var(--mouse) * .36)) scale(0); }
}

/* ---- Faixa dourada ------------------------------------------------------ */
.faixa {
  flex-shrink: 0;
  padding: 10px;
  background: #d2bd63 url("../assets/faixa-dourada.webp") center / cover no-repeat;
  text-align: center;
}
.faixa p {
  color: #434343;
  font-size: 18px;
  line-height: 1;
}

/* ---- Seção de links ----------------------------------------------------- */
.links {
  padding: 60px 10px;
  background: #020c22 url("../assets/fundo-links.webp") center / cover no-repeat;
}
.links__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.links__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.links__titulo img { display: block; width: 326px; height: auto; }
.links__logo       { display: block; width: 64px;  height: auto; }

/* Cards em arte: 2 colunas, Threads ocupando a linha inteira */
.cards {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px 20px;
  padding: 10px;
  margin: 0;
}
.card--largo { grid-column: 1 / -1; }
.card {
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.card img { height: auto; }
.card:hover img { transform: none; }        /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-6px);              /* o mesmo -6px do original */
  box-shadow: none;
}
.card.is-visible:active,
.card:active { transform: translateY(-2px); }

/* entrada como no original: da esquerda / da direita */
.cards .card.reveal--esq { transform: translateX(-40px); }
.cards .card.reveal--dir { transform: translateX(40px); }
.cards .card.reveal--esq.is-visible,
.cards .card.reveal--dir.is-visible { transform: none; }
.cards .card.reveal--esq.is-visible:hover,
.cards .card.reveal--dir.is-visible:hover { transform: translateY(-6px); }
.cards .card:nth-child(5).reveal { transition-delay: .15s; }

/* ---- Rodapé ------------------------------------------------------------- */
.footer { padding: 10px; }
.footer small {
  display: block;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}

/* ---- Tablet (Elementor: até 1024 px) ----------------------------------- */
@media (max-width: 1024px) {
  .hero { --hero-h: 714px; --mouse: 8vw; }
  .hero__titulo img { width: 55%; }
}

/* ---- Celular (Elementor: até 767 px) ----------------------------------- */
@media (max-width: 767px) {
  .hero {
    --hero-h: 625px;
    --hero-prop: 1080 / 1703;
    --mouse: 12vw;
    padding-bottom: 30px;
    gap: 15px;
  }
  .hero__bg {
    background:
      var(--hero-img-mobile) center top / max(100%, calc(var(--hero-h) * var(--hero-prop))) auto no-repeat,
      var(--hero-base);
  }
  .hero__titulo img { width: 81%; }

  .faixa p { font-size: 14px; }

  .links__topo {
    flex-direction: column;
    justify-content: center;
    gap: 23px;
  }
  .links__logo { order: -1; width: 50px; }
  .links__titulo img { width: min(315px, 90%); margin: 0 auto; }
  .links__titulo { width: 100%; }

  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }

  .footer small { font-size: 14px; }
}

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