/* ==========================================================================
   MARCA — PARIS BRONZE (subdomínio novare)
   Recria o linkbio antigo (WordPress/Elementor): hero com foto desfocada,
   logo, linha branca e título em arte; abaixo, fundo pêssego com 4 botões
   em arte (uma linha no desktop, 2x2 no celular) e 2 cards em arte.
   Medidas tiradas do Elementor: caixa de 1140px, 140/120px de respiro no
   desktop e 70/50px no celular.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------- */
.hero {
  padding: 140px 10px;
}
.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero__logo {
  width: 15%;
  max-width: none;
  height: auto;
  margin: 0;
}
.hero__linha {
  display: block;
  width: 32%;
  height: 2.1px;
  margin: 5px 0;
  background: var(--hero-linha);
}
.hero__title { line-height: 0; width: 53%; }
.hero__titulo { display: block; width: 100%; height: auto; }

/* ---- Área dos links: fundo pêssego com "Pele dourada" ao pé ------------ */
.links {
  flex: 1 0 auto;
  padding: 120px 10px;
  background: var(--bg) url("../assets/fundo-links.webp") center bottom / cover no-repeat;
}
.links__inner {
  width: 64%;
  max-width: calc(var(--maxw) * .64);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Botões em arte ---------------------------------------------------- */
.botoes {
  display: flex;
  gap: 20px;
}
.botao {
  flex: 1 1 0;
  display: block;
  line-height: 0;
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              filter .3s ease, opacity .7s cubic-bezier(.22,1,.36,1);
}
.botao img { width: 100%; height: auto; display: block; }
.botao.is-visible:hover,
.botao:hover {
  transform: translateY(-3px);
  filter: brightness(1.08) drop-shadow(0 8px 14px rgba(var(--sombra-rgb), .25));
}
.botoes .botao:nth-child(1).reveal { transition-delay: .05s; }
.botoes .botao:nth-child(2).reveal { transition-delay: .12s; }
.botoes .botao:nth-child(3).reveal { transition-delay: .19s; }
.botoes .botao:nth-child(4).reveal { transition-delay: .26s; }

/* ---- Cards em arte, uma coluna ----------------------------------------- */
.cards {
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.card {
  border-radius: var(--raio);
  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(-4px);
  box-shadow: 0 16px 30px rgba(var(--sombra-rgb), .22);
}

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

/* ---- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero__title { width: 77%; }
  .links__inner { width: 87%; max-width: none; }
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 767px) {
  .hero { padding: 70px 10px; }
  .hero__inner { gap: 6px; }
  .hero__logo { width: 24%; height: 76px; }  /* o original achata o logo assim */
  .hero__linha { width: 41%; }
  .hero__title { width: 100%; }

  .links {
    padding: 50px 10px;
    background-image: url("../assets/fundo-links-mobile.webp");
  }
  .links__inner { width: 100%; }
  .botoes { flex-wrap: wrap; justify-content: center; }
  .botao { flex: 0 0 45%; }
}

/* anula o ajuste de logo do núcleo no celular */
@media (max-width: 560px) {
  .hero { padding-bottom: 70px; }
  .hero__logo { max-width: none; }
}