/* ==========================================================================
   MARCA — JUSSARA | HIPNOSE CLÍNICA
   Recria o linkbio antigo (WordPress/Elementor): hero em foto com o título
   em arte à esquerda, corpo creme com 2 cards em arte, título em arte e
   grade de 6 vídeos de depoimento (3 + 3 no desktop, 1 por linha no celular).
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------
   Desktop: 1072px de altura, título centrado na vertical, alinhado à
   esquerda da caixa de 1140px. Tablet/celular: foto vertical, título no topo. */
.hero {
  min-height: 1072px;
  padding: 10px;
  justify-content: center;
  align-items: stretch;
  text-align: left;
}
/* O .hero__bg é 20% mais alto que o hero (folga do parallax). Para a foto
   não sair mais "zoom" que no original, ela ocupa a altura do hero (83,34%
   da camada) ou a largura toda, o que for maior (foto 3840x1914).          */
.hero__bg { background-size: auto max(83.34%, calc(100vw * 1914 / 3840)); }

.hero__inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
.hero__title { line-height: 0; }
.hero__logo {
  width: var(--hero-logo);
  max-width: 100%;
  margin: 0;
}
.hero__logo--mobile { display: none; }

/* ---- Corpo: fundo creme com textura ------------------------------------ */
.conteudo {
  max-width: none;
  background: var(--bg) url("../assets/fundo-conteudo.webp") center / cover no-repeat;
  padding: 60px 20px 70px;
}

/* ---- Cards em arte, uma coluna ----------------------------------------- */
.cards {
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
.card {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.card img { height: auto; }
.card:hover img { transform: none; }        /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-8px);               /* igual ao hover do original */
  box-shadow: none;
}
.card.is-visible:active,
.card:active { transform: translateY(-4px); }

/* ---- Depoimentos -------------------------------------------------------- */
.depoimentos { margin-top: 100px; }

.depoimentos__titulo {
  display: flex;
  justify-content: center;
  line-height: 0;
  margin-bottom: 30px;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.depoimentos__titulo.is-visible:hover,
.depoimentos__titulo:hover { transform: translateY(-8px); }
.depoimentos__titulo img { width: 364px; max-width: 100%; height: auto; }

.depoimentos__grade {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.depoimentos__linha {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.depoimento {
  width: 30%;
  max-width: 330px;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--superficie);
  line-height: 0;
}
.depoimento video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: contain;
  background: var(--superficie);
}
.depoimentos__linha .depoimento:nth-child(2).reveal { transition-delay: .1s; }
.depoimentos__linha .depoimento:nth-child(3).reveal { transition-delay: .2s; }

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

@media (prefers-reduced-motion: reduce) {
  .depoimentos__titulo { transition: none; }
  .depoimentos__titulo:hover { transform: none; }
}

/* ---- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero {
    justify-content: flex-start;
    padding: 50px 10px;
  }
  .hero__bg {
    background:
      var(--hero-overlay),
      var(--hero-img-mobile) center / cover no-repeat,
      var(--hero-base);
  }
  .hero__logo--desktop { display: none; }
  .hero__logo--mobile  { display: block; width: 423px; }
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 767px) {
  .hero {
    min-height: 864px;
    padding: 50px 10px 10px;
  }
  .hero__bg {
    background:
      var(--hero-overlay),
      var(--hero-img-mobile) center bottom / cover no-repeat,
      var(--hero-base);
  }
  .hero__logo--mobile { width: 88%; margin: 0 auto; }

  .conteudo { padding: 60px 20px 70px; }
  .cards { margin-top: 0; }
  .depoimentos { margin-top: 59px; }
  .depoimentos__titulo img { width: 73%; }

  .depoimentos__grade { padding: 0 10px; }
  .depoimentos__linha { flex-direction: column; align-items: center; }
  .depoimento { width: 100%; max-width: 100%; }

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