/* Seção: Lazer (abas + carrossel de experiências + chips da estrutura) */
.lazer { padding: 90px 0 110px; background: var(--fundo, #fff) }
.lazer.fundo-escuro h2 { color: #fff }
.lazer-head { display: flex; justify-content: space-between; align-items: end; gap: 40px }
.tabs { display: flex; gap: 6px; background: var(--areia); padding: 6px; border-radius: 999px }
.tab { height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--display); font-weight: 500; font-size: 15.5px; color: var(--petroleo); display: flex; align-items: center; gap: 8px; border: 0; background: transparent; transition: background .35s, color .35s }
.tab:hover { background: rgba(255, 255, 255, .7) }
.tab[aria-selected=true] { background: var(--petroleo); color: #fff }
.panel[hidden] { display: none }
.xp { width: 400px; height: 500px; border-radius: 30px; overflow: hidden; position: relative; background: var(--areia); transition: transform .5s var(--ease) }
.xp:nth-child(odd) { border-radius: 30px 90px 30px 30px }
.xp img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); -webkit-user-drag: none; user-select: none }
.xp:hover img { transform: scale(1.07) }
.xp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 54, 64, 0) 38%, rgba(29, 54, 64, .55) 62%, rgba(29, 54, 64, .9)); pointer-events: none }
.xp-cap { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 2; color: #fff }
.xp-cap b { display: block; font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.15; transition: transform .5s var(--ease) }
.xp-cap span { display: block; font-size: 15px; line-height: 1.5; opacity: .92; margin-top: 8px; max-width: 300px; transition: transform .5s var(--ease) }
.xp:hover .xp-cap b, .xp:hover .xp-cap span { transform: translateY(-4px) }
.xp .badge { position: absolute; left: 22px; top: 22px; 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 }
.all-list { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px }
.all-list .chip { background: var(--areia) }

/* Mobile */
@container page (max-width: 760px) {
  .lazer { padding: 80px 0 64px }
  .lazer-head { flex-direction: column; align-items: flex-start; gap: 22px }
  .tabs { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 4px }
  .tab { flex: 1 1 auto; justify-content: center; height: 38px; padding: 0 10px; font-size: 13.5px; white-space: nowrap }
  .xp { width: 280px; height: 380px }
  .xp-cap { left: 22px; right: 22px; bottom: 22px }
  .xp-cap b { font-size: 20px }
  .xp-cap span { font-size: 14px }
}