/* ==========================================================================
   MARCA — DELÍCIAS DA BETH
   Recria o linkbio antigo (WordPress/Elementor): fundo em degradê atrás de
   tudo, caixa marrom com o nome e o logo, blocos "título + botão" ao lado de
   artes em PNG (dois deles em caixas creme) e faixa creme no rodapé.
   ========================================================================== */

/* ---- Fundo em degradê atrás de todo o conteúdo ------------------------- */
.fundo {
  flex: 1 0 auto;
  padding: 60px 20px 80px;
  background: var(--bg) url("../assets/fundo.webp") left top / cover no-repeat;
}

/* ---- Hero: caixa marrom (sem foto) ------------------------------------ */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  text-align: left;
}
.hero__bg { display: none; }

.hero__caixa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  padding: 20px;
  border-radius: var(--raio);
  background: var(--hero-base);
}
.hero__texto { padding-left: clamp(20px, 9vw, 127px); }

.hero__title {
  font-size: inherit;
  line-height: 1;
  color: var(--hero-texto);
}
.hero__pre {
  display: block;
  font-size: 32px;
  line-height: 32px;
  font-style: italic;
  font-weight: 300;
}
.hero__nome {
  display: block;
  margin-top: -12px;
  font-size: 110px;
  line-height: 110px;
  font-weight: 600;
}
.hero__marca { display: flex; justify-content: center; }
.hero__logo {
  width: var(--hero-logo);
  max-width: 100%;
  margin: 0;
}

/* ---- Botões (pílula) --------------------------------------------------- */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 339px;
  max-width: 100%;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1),
              filter .3s ease;
}
.botao svg { width: 14px; height: 14px; flex-shrink: 0; }
.botao--claro  { background: #ece3c6; color: #4c4c4c; }
.botao--escuro { background: var(--acao); color: var(--contraste); }
.botao--hero   { width: 258px; margin-top: 8px; }
.botao:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(var(--sombra-rgb), .28);
  filter: brightness(1.05);
}
.botao:active { transform: translateY(-1px); }

/* ---- Blocos título + botão + arte -------------------------------------- */
.bloco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.bloco__texto { position: relative; top: -6px; padding: 0 20px; }  /* o Elementor deixava o texto 6px acima do centro */
.bloco__arte  { display: flex; justify-content: center; }
.bloco__arte img {
  width: 387px;
  max-width: 100%;
  height: auto;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.bloco__arte:hover img { transform: translateY(-6px) scale(1.02); }

.bloco__titulo {
  margin-bottom: 24px;
  font-size: 78px;
  line-height: 59px;
  font-weight: 600;
  color: var(--contraste);
}

/* Blocos soltos sobre o degradê: título branco */
.bloco--solto { margin: 140px 0; }
.bloco--retire { margin-bottom: 0; }
.bloco--retire .bloco__titulo { font-size: 65px; }

/* Blocos em caixa creme: arte à esquerda, título marrom, botão escuro */
.bloco--caixa {
  padding: 20px;
  border-radius: var(--raio);
  background: #ece3c6;
}
.bloco--caixa .bloco__texto { padding-right: 0; }
.bloco--caixa .bloco__titulo { color: var(--texto); }
.bloco--caixa .bloco__arte img { width: 345px; }
.bloco--pascoa { margin-top: 120px; }
.bloco--pascoa .bloco__titulo { font-size: 70px; }

/* stagger: texto e arte entram um depois do outro */
.bloco .reveal:nth-child(2),
.hero__caixa .reveal:nth-child(2) { transition-delay: .12s; }

/* ---- Rodapé: faixa creme, sem texto (igual ao original) ---------------- */
.footer {
  min-height: 83px;
  padding: 0;
}

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

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 767px) {
  .fundo {
    padding: 60px 10px 69px;
    background-image: url("../assets/fundo-mobile.webp");
  }

  .hero__caixa {
    grid-template-columns: 1fr;
    padding: 34px 20px 44px;
    text-align: center;
  }
  .hero__texto { padding: 0; }
  .hero__pre   { font-size: 21px; line-height: 21px; }
  .hero__nome  { font-size: 90px; line-height: 90px; }
  .botao--hero { width: 291px; margin: 8px auto 0; }
  .hero__marca { margin-top: 30px; }
  .hero__logo  { width: var(--hero-logo-mobile); }

  .bloco { grid-template-columns: 1fr; text-align: center; }
  .bloco__texto { top: 0; padding: 0; }
  .bloco__titulo {
    font-size: 50px;
    line-height: 40px;
  }
  .botao { width: 100%; }

  .bloco--solto { margin: 78px 10px 90px; }
  .bloco--solto .bloco__arte { margin-top: 40px; }
  .bloco--solto .bloco__arte img { width: 350px; }
  .bloco--retire { margin-bottom: 0; }
  .bloco--retire .bloco__titulo { font-size: 50px; }
  .bloco--retire .bloco__arte img { width: 256px; }

  .bloco--caixa { padding: 40px 20px; }
  .bloco--caixa .bloco__arte img { width: 330px; }
  .bloco--caixa .bloco__texto { margin-top: 28px; }
  .bloco--caixa .bloco__titulo { line-height: 59px; }
  .bloco--pascoa { margin-top: 80px; }
  .bloco--pascoa .bloco__titulo { font-size: 50px; line-height: 50px; }
}