/* Seção: Suítes (filtros + carrossel de cards) */
.suites { padding: 150px 0 110px; background: var(--fundo, #fff) }
.suites.fundo-escuro h2 { color: #fff }
.suites-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px }
.filters .chip { background: var(--areia) }
.filters .chip.on { background: var(--petroleo); color: #fff }
.suite { width: 330px; border-radius: 28px; overflow: hidden; background: #fff; border: 1.5px solid var(--linha); display: flex; flex-direction: column; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, box-shadow .4s, opacity .4s; will-change: transform }
.suite:hover { box-shadow: 0 6px 14px rgba(38, 70, 81, .12) }
.suite.off { display: none }
.suite figure { margin: 0; height: 220px; overflow: hidden; background: var(--areia) }
.suite figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); -webkit-user-drag: none }
.suite:hover figure img { transform: scale(1.07) }
.suite-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.suite-meta { display: flex; flex-wrap: wrap; gap: 6px }
.tag { font-size: 12.5px; font-weight: 700; color: var(--petroleo); background: #E3F8F4; border-radius: 999px; padding: 3px 10px }
.tag.cap { background: #FFF0D2 }
.suite p { font-size: 15px; line-height: 1.5 }
.suite .more { margin-top: auto; font-family: var(--display); font-weight: 600; color: var(--petroleo); font-size: 15.5px; display: inline-flex; gap: 8px; align-items: center; padding-top: 6px }
.suite .more svg { width: 18px; height: 18px; transition: transform .35s var(--ease) }
.suite:hover .more svg { transform: translateX(5px) }


/* Mobile */
@container page (max-width: 760px) {
  .suites { padding: 80px 0 64px }
  .suite { width: 270px }
  .suite figure { height: 170px }
}