/* Seção: All inclusive (um dia no resort) */
.ai { padding: 130px 0 110px; background: var(--fundo, #fff) }
.ai.fundo-escuro, .ai.fundo-escuro h2 { color: #fff }
.ai-top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end }

/* Linha do dia: o sol avança conforme a rolagem (--p de 0 a 1, via JS) */
.day { margin-top: 56px }
.day-line { position: relative; height: 56px; margin: 0 6px 10px }
.day-line::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; border-top: 2px dashed #CFD8DB }
.day-line span { position: absolute; top: 0; font-family: var(--display); font-weight: 600; color: var(--petroleo); font-size: 15px; background: var(--fundo, #fff); padding: 0 8px }
.ai.fundo-escuro .day-line span { color: #fff }
.day-line .t0 { left: -6px }
.day-line .t1 { right: -6px }
.day-sun { position: absolute; top: 8px; left: calc(var(--p, 0) * (100% - 40px)); width: 40px; height: 40px; color: var(--laranja); transition: left .15s linear }
.day-sun svg { width: 40px; height: 40px }

/* Cards */
.day-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.slot { padding: 30px 30px 34px; position: relative; min-height: 320px; background: var(--fundo); color: var(--texto); transition: transform .5s var(--ease), box-shadow .5s }
.slot:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(38, 70, 81, .14) }
.slot:nth-child(3n+1) { border-radius: 40px 24px 24px 56px }
.slot:nth-child(3n+2) { border-radius: 24px 48px 24px 24px }
.slot:nth-child(3n+3) { border-radius: 24px 24px 56px 40px }
.slot.fundo-escuro { color: #fff }
.slot.fundo-escuro h3 { color: #fff }
.slot li svg { color: var(--petroleo) }
.slot.fundo-escuro li svg { color: var(--sol) }
.slot-time { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--petroleo); display: inline-flex; background: #fff; border-radius: 999px; padding: 5px 14px; margin-bottom: 20px }
.slot h3 { font-size: 26px; margin: 0 120px 14px 0 }
.slot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 16.5px }
.slot li { display: flex; gap: 10px; align-items: flex-start }
.slot li svg { width: 20px; height: 20px; flex: none; margin-top: 4px }
.js .slot li svg { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .7s var(--ease) .3s }
.js .slot li:nth-child(2) svg { transition-delay: .45s }
.js .slot li:nth-child(3) svg { transition-delay: .6s }
.js .slot li:nth-child(4) svg { transition-delay: .75s }
.js .slot li:nth-child(n+5) svg { transition-delay: .9s }
.js .slot.in li svg { stroke-dashoffset: 0 }
.slot img { position: absolute; right: 26px; top: 26px; width: 108px; height: 108px; object-fit: cover; border-radius: 50%; border: 5px solid #fff; transition: transform .6s var(--ease) }
.slot:hover img { transform: rotate(-6deg) scale(1.06) }
.slot:not(:has(img)) h3 { margin-right: 0 }

/* Mobile */
@container page (max-width: 760px) {
  .ai { padding: 80px 0 64px }
  .ai-top { grid-template-columns: 1fr; gap: 14px }
  .day { margin-top: 30px }
  .day-line { display: none }
  .day-track { grid-template-columns: 1fr; gap: 12px }
  .slot { min-height: 0; padding: 24px 22px }
  .slot img { width: 86px; height: 86px; right: 16px; top: 16px }
  .slot h3 { font-size: 23px; margin-right: 96px }
}