/* Seção: Agenda e pacotes */
.agenda { background: var(--fundo, var(--areia)); padding: 150px 0 160px }
.agenda.fundo-escuro h2, .agenda.fundo-escuro .lead { color: #fff }
.poster { position: relative; width: 270px; border-radius: 26px; overflow: hidden; background: #fff; transition: transform .5s var(--ease), box-shadow .5s }
.poster:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 8px 18px rgba(38, 70, 81, .12) }
.poster img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; -webkit-user-drag: none }
.poster div { padding: 14px 18px 18px }
.poster b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--petroleo); display: block; line-height: 1.25 }
.poster span { font-size: 14px }
.poster .badge { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--laranja); color: var(--petroleo); font-family: var(--display); font-weight: 600; font-size: 13px; border-radius: 999px; padding: 5px 12px }

/* Pacotes (clicáveis) */
.packs { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.pack { position: relative; overflow: hidden; border-radius: 36px 36px 36px 90px; padding: 38px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; background: var(--fundo); color: var(--petroleo); transition: transform .5s var(--ease) }
.pack:nth-child(even) { border-radius: 36px 90px 36px 36px }
.pack:hover { transform: translateY(-6px) }
.pack.fundo-escuro, .pack.fundo-escuro h3 { color: #fff }
.pack h3 { font-size: 28px; margin-bottom: 10px }
.pack p { font-size: 16px; max-width: 380px }
.pack .from { margin-top: 16px; font-size: 15px }
.pack .from b { font-family: var(--display); font-size: 28px; font-weight: 600 }
.pack .ring { position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .08); pointer-events: none }
.pack.fundo-claro .ring { border-color: rgba(255, 255, 255, .22) }

/* Mobile */
@container page (max-width: 760px) {
  .agenda { padding: 80px 0 100px }
  .poster { width: 260px }
  .packs { grid-template-columns: 1fr }
  .pack { grid-template-columns: 1fr; padding: 30px; border-radius: 30px 30px 30px 70px }
  .pack h3 { font-size: 24px }
}