/* ==========================================================================
   50-site-layer.css — camada do SITE. Carregada por último, depois das 9 folhas
   do design system.

   POR QUE ISTO EXISTE
   Os dois bundles Tailwind em css/ são builds já compiladas: cada uma contém
   apenas as classes que a sua página de origem usava. Não há passo de build
   aqui, então uma classe Tailwind perfeitamente válida que nenhuma das duas
   páginas usou simplesmente NÃO EXISTE — e falha em silêncio, sem erro no
   console. Foi o que aconteceu com sm:block / sm:hidden: o logotipo do
   cabeçalho ficava escondido em qualquer largura de tela.

   COMO USAR
   Ao acrescentar markup, rode a auditoria de classes. Toda classe que ela
   apontar como ausente entra aqui, com o MESMO nome e o MESMO valor da escala
   do Tailwind — assim o markup continua legível para quem conhece o framework.
   Nunca invente valor: consulte a escala.
   ========================================================================== */

/* --- display responsivo -------------------------------------------------
   Faltavam as duas. Sem sm:block, o `hidden` do lockup vencia em toda
   largura; sem sm:hidden, o monograma nunca saía. Resultado: o cabeçalho
   mostrava sempre o monograma pequeno, nunca o lockup. */
@media (min-width: 640px) {
  .sm\:block  { display: block }
  .sm\:hidden { display: none }
}

/* --- espaçamento --------------------------------------------------------- */
/* O cabeçalho é compacto no mobile e cresce a partir de sm. A ORDEM aqui
   importa: pb-5 vem depois de py-3, senão o padding vertical sobrescreveria o
   inferior. É a mesma ordem que o Tailwind emite. */
@media (min-width: 640px) {
  .sm\:py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .sm\:pb-5  { padding-bottom: 1.25rem }
  .sm\:mb-12 { margin-bottom: 3rem }
}
@media (min-width: 1024px) {
  .lg\:gap-10 { gap: 2.5rem }
}
.pb-7  { padding-bottom: 1.75rem }
.pb-10 { padding-bottom: 2.5rem }

/* --- hero colagem (3 cartas) ---------------------------------------------
   No mobile, a carta 3 ancorada em bottom:% ficava longe do par — perdia a
   colagem. Sobe ela com top:% e reduz a altura da cena. Desktop inalterado. */
@media (max-width: 639px) {
  /* Parallax nas cartas: sem a transição de 500ms do kit (parecia atrasado).
     No mobile só flutuação CSS — toque livre para scroll. */
  .ds-hero-collage .ds-layer {
    transition: none;
    will-change: auto;
  }

  /* mais respiro acima das cartas; menos vão até a faixa */
  .ds-hero-grid {
    gap: 3.25rem;
    padding-bottom: 1.75rem;
  }
  .ds-hero-marquee { padding-top: 0 }
  .ds-hero-collage { min-height: 296px !important }
  .ds-hero-card-1  { top: 0 !important; left: 6% !important; width: 58% !important }
  .ds-hero-card-2  { top: 17% !important; right: -1% !important; width: 42% !important }
  .ds-hero-card-3  {
    bottom: auto !important;
    top: 45% !important;
    left: 2% !important;
    width: 36% !important;
  }
}

/* space-y-3.5: o Tailwind aplica margem no irmão seguinte, não padding no
   item. Sem esta regra os itens da lista de oferta ficavam colados. */
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem }