/* ============================================================
   Camada de acabamento — profundidade, movimento e mobile.

   Vai depois da folha original e nunca a reescreve: só acrescenta
   sombra, transição e correção de escala. Se esta folha for removida,
   o site volta exatamente ao que era, sem quebrar.
   ============================================================ */

:root{
  /* Sombras em marrom quente, não em preto. O site é assentado sobre
     bege e amarelo; sombra preta sobre fundo quente lê como sujeira,
     não como profundidade. */
  --sombra-1: 0 1px 2px rgba(72,48,12,.06), 0 4px 10px rgba(72,48,12,.07);
  --sombra-2: 0 2px 5px rgba(72,48,12,.08), 0 12px 26px rgba(72,48,12,.12);
  --sombra-3: 0 8px 16px rgba(72,48,12,.12), 0 24px 52px rgba(72,48,12,.18);
  /* Sobre fundo preto a lógica inverte: o que dá relevo é luz, não sombra. */
  --anel-claro: inset 0 0 0 1px rgba(255,255,230,.08);
  --anel-escuro: inset 0 0 0 1px rgba(72,48,12,.08);
  /* Desaceleração no fim: o elemento chega, não freia bruscamente. */
  --mola: cubic-bezier(.2,.7,.3,1);
}

/* ---------- 1. Profundidade ---------- */

.bando-card,
.evento-card,
.board,
.benefit-item,
.plan-card,
.polaroid,
.collage-item{
  box-shadow: var(--sombra-2);
  transition: transform .38s var(--mola), box-shadow .38s var(--mola);
}

/* Os cartões do cardápio são pretos sobre bege: sem um anel de luz na
   borda eles viram recortes chapados, com a silhueta se perdendo. */
.bando-card{ box-shadow: var(--sombra-2), var(--anel-claro); }
.board,
.evento-card,
.benefit-item{ box-shadow: var(--sombra-2), var(--anel-escuro); }

/* A foto dentro do cartão encosta no texto sem separação. Um degradê
   curto no pé dela cria a aresta que faltava. */
.bando-card-photo-inner{ position:relative; }
.bando-card-photo-inner::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(0,0,0,.42), transparent);
  pointer-events:none;
}

/* As seções são faixas de cor sólida encostadas umas nas outras, e é daí que
   vem a sensação de documento. Uma pluma escura curta na emenda faz cada
   seção parecer apoiada sobre a anterior.

   Tentei antes um brilho branco radial e foi pior: sobre o laranja e o lilás
   ele lavava a cor. Sombra interna funciona em qualquer fundo porque escurece
   o que já está lá em vez de somar branco por cima. */
.section{
  position:relative;
  box-shadow: inset 0 14px 22px -18px rgba(0,0,0,.30);
}

/* ---------- 2. Movimento ---------- */

@media (hover:hover){
  .bando-card:hover,
  .evento-card:hover,
  .plan-card:hover,
  .benefit-item:hover{ transform:translateY(-6px); box-shadow:var(--sombra-3); }

  .polaroid:hover,
  .collage-item:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--sombra-3); }

  /* O corte já é overflow:hidden, então a foto cresce dentro da moldura
     em vez de empurrar o layout. */
  .bando-card-photo img,
  .collage-item img,
  .evento-card img{ transition:transform .6s var(--mola); }
  .bando-card:hover .bando-card-photo img,
  .collage-item:hover img,
  .evento-card:hover img{ transform:scale(1.06); }

  .board-row{ transition:background-color .25s ease; }
  .board-row:hover{ background:rgba(0,0,0,.035); }

  .btn:hover{ transform:translateY(-2px); box-shadow:var(--sombra-2); }
}

.btn{ transition:transform .22s var(--mola), box-shadow .22s var(--mola), opacity .22s ease; }
.btn:active{ transform:translateY(0) scale(.97); }

/* A barra ganha fundo só depois que sai do topo. Parada sobre o hero ela
   competiria com a foto. */
.nav{ transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.nav.nav--fixada{
  background:rgba(20,16,8,.72);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}

/* ---------- 3. Entrada por rolagem ---------- */

[data-revela]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--mola), transform .7s var(--mola);
  transition-delay:var(--atraso, 0ms);
}
[data-revela].revelado{ opacity:1; transform:none; }

/* Se o JS não rodar, o conteúdo não pode ficar invisível. A classe é posta
   pelo próprio script, então sem ele nada é escondido — mas esta salvaguarda
   cobre o caso de o observer falhar depois de marcar os elementos. */
.sem-js [data-revela]{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  [data-revela]{ opacity:1; transform:none; }
}

/* ---------- 4. Mobile ---------- */

@media (max-width: 640px){
  /* A folha original foi escrita para a prévia em escala reduzida: título
     de cartão em 10,5px e descrição em 9px. No celular isso é ilegível. */
  .bando-card-body h3{ font-size:15px; margin-bottom:5px; }
  .bando-card-desc{ font-size:12.5px; line-height:1.4; margin-bottom:8px; }
  .bando-card-body .price{ font-size:14px; }
  .bando-card-body{ padding:8px 14px 16px; }
  .bando-card-photo{ height:150px; }

  /* 44px é o mínimo confortável para o dedo; os botões estavam em 42 e os
     links do rodapé em 21. */
  .btn{ min-height:44px; padding:14px 26px; }
  .btn-sm{ min-height:44px; }
  .footer-col span,
  .footer-col a{ display:inline-block; padding:9px 0; }

  .section-title{ font-size:clamp(28px,8.4vw,40px); line-height:1.05; }
  .section{ padding-top:52px; padding-bottom:52px; }
  .board-row{ padding:13px 16px; gap:8px; }
  .board-time-group{ justify-content:flex-start; }

  /* O deslocamento vertical fica menor: em tela pequena, 22px de curso
     atrasa a leitura sem acrescentar nada. */
  [data-revela]{ transform:translateY(14px); }
}