Tela: Viagem Detalhes

Passeios agrupados por dia — 2 sugestões por dia de Viator + Tiqets, sem repetição entre dias.

Flag emoji + nome da cidade + row de pills (datas, duração). Sticky Day Pill ao rolar.

app/viagem-detalhes — Headerflag 36px | cityName 32px Semibold | pills row | sticky day pill

🗼Paris

10–17 jan

7 dias

5 passeios

Header

eventDia 1

Sticky Day Pill

Propriedade	Valor	Descrição
`flag.fontSize`	`36px`	Emoji, lineHeight 36
`cityName.fontSize`	`32px`	Semibold, white
`pill.bg`	`rgba(255,255,255,0.10)`
`pill.paddingH`	`16px`
`pill.paddingV`	`12px`
`pill.borderRadius`	`999px`	Pill perfeito
`pill.fontSize`	`14px`	Semibold, white
`stickyPill.icon`	`event 18px`
`stickyPill.fontSize`	`16px`	Semibold, white

// app/viagem-detalhes.tsx — Header
cityName: {
  fontSize: 32, fontFamily: Semibold, color: colors.white,
},
pill: {
  backgroundColor: "rgba(255,255,255,0.10)",
  paddingHorizontal: 16, paddingVertical: 12,
  borderRadius: 999,
},
pillText: {
  fontSize: 14, fontFamily: Semibold, color: colors.white,
},

ProductCard (diferenças vs ViatorHighlightCard)

O ProductCard usado em viagem-detalhes é uma variante do ViatorHighlightCard. A maioria dos tokens é igual — as diferenças estão listadas abaixo.

Propriedade	ViatorHighlightCard	ProductCard (viagem-detalhes)
`price.fontSize`	`16px`	`19px`
`priceSubtitle.fontSize`	`14px`	`13px`
`favorite.bg (inactive)`	`colors.dark60`	`rgba(17,30,48,0.45)`
`favorite.iconSize`	`20px`	`22px`

Day Sections

Cada dia é uma seção com header "Dia N" e lista de 2 ProductCards. Gap de 32px entre dias.

Propriedade	Valor	Descrição
`daySection.gap`	`32px`	spacing.xl entre dias
`daySection.paddingH`	`16px`	spacing.md
`cards per day`	`2`	Viator + Tiqets sem repetição
`emptyIcon`	`explore_off 28px white60`
`emptyText.fontSize`	`14px`	Medium, white60
`emptyText`	`Sem sugestões para este dia`

app/viagem-detalhes — EmptyDayStateexplore_off 28px + texto 14px Medium white60

explore_offSem sugestões para este dia

Empty State

// app/viagem-detalhes.tsx — day sections
daySectionGap: {
  gap: spacing.xl,   // 32 entre dias
},
dayContent: {
  paddingHorizontal: spacing.md,  // 16
},
emptyDayContainer: {
  alignItems: 'center', gap: 8, paddingVertical: 24,
},
emptyDayText: {
  fontSize: 14, fontFamily: Medium, color: colors.white60,
},