/* ==========================================================================
   MARCA — PHARMALAB MANIPULAÇÕES
   Recria o linkbio antigo (WordPress/Elementor): hero com a fachada ao fundo,
   "Seja Bem-Vindo(a)" em texto + botão branco; seção com fundo de hexágonos,
   3 cards em arte PNG, chamada final com botão e faixa de rodapé ciano.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---- Hero ------------------------------------------------------------- */
.hero {
  min-height: 767px;
  padding: 20px;
  justify-content: center;
}
/* Sem folga no fundo: o corte da foto fica igual ao original. O parallax
   desce a camada, e a faixa que abre no topo fica sempre acima da tela.   */
.hero__bg { inset: 0; }
.hero__inner {
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__title {
  font-size: 76px;
  line-height: 1;
  letter-spacing: -3.6px;
  color: #0097b3;
}
.hero__title span {
  display: block;
  margin-top: 3px;
  font-size: 55px;
  color: rgba(0, 151, 179, .42);
}

/* ---- Botões (Elementor) ----------------------------------------------- */
.botao {
  display: block;
  padding: 26px 10px;
  font-family: var(--fonte-corpo);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.botao:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(var(--sombra-rgb), .14);
}
.botao--branco {
  width: 353px;
  margin-top: 30px;
  background: #ffffff;
  color: #242424;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px 45px 5px 45px;
}
.botao--claro {
  width: 347px;
  background: linear-gradient(230deg, #ffffff 0%, #d4efff 100%);
  color: #666666;
  font-size: 16px;
  font-weight: 600;
  border-radius: 38px;
}

/* ---- Seção dos links: fundo de hexágonos ------------------------------ */
.page { max-width: none; }

.links {
  background: #cdebf0 url("../assets/fundo-links.webp") center / cover no-repeat;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 90px;
}

.cards {
  width: 100%;
  max-width: 1120px;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 20px;
}
.card {
  width: 70%;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.card img { height: auto; }
.card:hover img { transform: none; }        /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-10px);
  box-shadow: none;
}

/* ---- Chamada final ---------------------------------------------------- */
.chamada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.chamada__titulo {
  width: 414px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -3.6px;
  color: #494f59;
}
.chamada__titulo span { color: #05a7c3; }

/* ---- Rodapé ----------------------------------------------------------- */
.footer { padding: 10px 20px; }
.footer small {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao { transition: none; }
  .botao:hover { transform: none; }
}

/* ---- Tablet ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero { min-height: 417px; }
  .chamada__titulo { width: 57%; }
  .botao--claro { width: 44%; }
}

/* ---- Celular ---------------------------------------------------------- */
@media (max-width: 767px) {
  .hero {
    min-height: 582px;
    padding: 54px 10px 20px;
    justify-content: flex-start;
  }
  .hero__bg {
    background:
      var(--hero-img-mobile) center bottom / cover no-repeat,
      var(--hero-base);
  }
  .hero__title span { font-size: 45px; }
  .botao--branco { width: 91%; }

  .card { width: 100%; }

  .chamada__titulo {
    width: 100%;
    font-size: 33px;
    letter-spacing: -0.6px;
  }
  .botao--claro { width: 100%; }
}
