/* ==========================================================================
   MARCA — NALIATI'S | LANCHES NO PÃO DE ALHO
   Recria o linkbio antigo (WordPress/Elementor): uma única seção com o fundo
   de chamas em "cover" (ancorado no canto superior esquerdo) cobrindo tudo,
   o título em arte no topo e 3 cards em arte numa coluna.
   Medidas do Elementor: padding 122px em cima e embaixo; distância título →
   cards 200px (desktop), 100px (tablet) e 106px (celular); 45px entre os
   cards (20px no celular).
   ========================================================================== */

/* ---- Palco: o fundo cobre título + cards ------------------------------ */
.palco {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-base);
}
/* Mesma camada de parallax do modelo (js/main.js), só que no palco inteiro.
   Como ela anda mais devagar que o scroll, a folga fica sempre acima da tela:
   não precisa de sobra, e o enquadramento inicial fica igual ao original.   */
.palco .hero__bg {
  inset: 0;
  background: var(--hero-img) 0 0 / cover no-repeat, var(--hero-base);
}

/* ---- Título em arte --------------------------------------------------- */
.hero {
  padding: 132px 20px 0;
  overflow: visible;
  isolation: auto;
}
.hero__logo {
  width: var(--hero-logo);
  max-width: 100%;
  margin: 0 auto;
}

/* ---- Cards em arte, uma coluna ---------------------------------------- */
.page { flex: 1 0 auto; }

.cards {
  grid-template-columns: 1fr;
  gap: 45px;
  width: min(614px, 100%);
  margin: 200px auto 0;
  padding: 0 0 132px;
}
.card {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}
.card img { height: auto; object-fit: contain; }
/* arte com texto e com o celular "saindo" do card: sem zoom e sem caixa de
   sombra; o brilho acompanha o contorno da arte (drop-shadow).            */
.card:hover img { transform: none; }
.card.is-visible:hover,
.card:hover {
  transform: translateY(-6px);
  box-shadow: none;
  filter: drop-shadow(0 14px 26px rgba(var(--acao-rgb), .22));
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              filter .35s cubic-bezier(.22,1,.36,1);
}
.card.is-visible:active,
.card:active { transform: translateY(-2px); }

/* ---- Rodapé discreto (o original não tinha) --------------------------- */
.footer small { color: var(--texto-suave); font-weight: 400; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .card.is-visible:hover { transform: none; }
}

/* ---- Tablet (Elementor: até 1024px) ----------------------------------- */
@media (max-width: 1024px) {
  .hero__logo { width: calc((100vw - 40px) * .66); }
  .cards {
    width: calc((100vw - 40px) * .89);
    margin-top: 100px;
  }
}

/* ---- Celular (Elementor: até 767px) ----------------------------------- */
@media (max-width: 767px) {
  .palco .hero__bg {
    background: var(--hero-img-mobile) 0 0 / cover no-repeat, var(--hero-base);
  }
  .hero { padding: 122px 20px 0; }
  .hero__logo { width: 100%; max-width: 100%; }
  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
    width: auto;
    margin: 106px 10px 0;
    padding-bottom: 122px;
  }
}