/* ==========================================================================
   MARCA — SURYA SUSHI
   Recria o linkbio antigo (WordPress/Elementor): um único fundo (ondas
   japonesas, do azul-noite ao azul royal) cobrindo a página toda, logo +
   título em arte e 5 cards em arte PNG numa coluna.
   Medidas do Elementor: padding 60/10/80, gap 107 (desktop), 80 (tablet),
   55 (celular); cards com 45px entre si (20px no celular).
   ========================================================================== */

/* ---- Fundo que cobre logo + cards (como o container do Elementor) ------ */
.surya {
  flex: 1 0 auto;
  width: 100%;
  padding: 60px 10px 80px;
  background: #01060c url("../assets/fundo.webp") center top / cover no-repeat;
}

/* ---- Hero: sem foto, só logo e título --------------------------------- */
.hero {
  padding: 10px 10px;
  overflow: visible;
}
.hero__bg { display: none; }
.hero__inner { width: 100%; max-width: var(--maxw); }

.hero__logo {
  width: 10%;                      /* 112px dentro dos 1120 do original */
  max-width: none;
  height: auto;
  margin: 0 auto 20px;
}
.hero__title { line-height: 0; }
.hero__titulo {
  display: block;
  width: 53%;
  max-width: 899px;
  height: auto;
  margin: 0 auto;
}

/* ---- Cards em arte, uma coluna ----------------------------------------- */
.page { max-width: var(--maxw); }

.cards {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 45px;
  margin: 107px 0 0;
  padding: 10px 48px;               /* largura útil 1024, como no original */
}
.card {
  width: 60%;
  border-radius: 0;
  overflow: visible;               /* a arte do pedido tem o celular "saindo" */
  box-shadow: none;
  background: transparent;
}
.card img {
  height: auto;
  object-fit: contain;
  transition: filter .35s cubic-bezier(.22,1,.36,1);
}
.card:hover img { transform: none; }        /* arte com texto: sem zoom */
.card.is-visible:hover,
.card:hover {
  transform: translateY(-5px);
  box-shadow: none;
}
.card:hover img {
  filter: drop-shadow(0 16px 22px rgba(var(--sombra-rgb), .55)) brightness(1.04);
}
.cards .card:nth-child(5).reveal { transition-delay: .45s; }

/* ---- Rodapé discreto, no azul da marca --------------------------------- */
.footer { background: var(--grad-rodape); }

/* ---- Tablet (Elementor: até 1024px) ------------------------------------ */
@media (max-width: 1024px) {
  .hero__titulo { width: 66%; }
  .cards { margin-top: 80px; padding: 10px; }
  .card { width: 89%; }
}

/* ---- Celular (Elementor: até 767px) ------------------------------------ */
@media (max-width: 767px) {
  .surya {
    background-image: url("../assets/fundo-mobile.webp");
  }
  .hero { padding: 0 10px; }
  .hero__logo {
    width: 23%;                      /* igual ao original: 23% x 96px */
    height: 96px;
  }
  .hero__titulo { width: 100%; }
  .cards {
    margin-top: 55px;
    gap: 20px;
    padding: 0;
  }
  .card { width: 100%; }
}

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