/* Calendario de disponibilidade das casas */
.vv-cal{
  --cal-linha: var(--hairline, rgba(58,46,35,.16));
  --cal-suave: var(--ink-soft, #745C3F);
  margin-top: 30px;
  border: 1px solid var(--cal-linha);
  background: var(--cream, #F7F2ED);
  padding: clamp(18px, 2.4vw, 28px);
}
/* estadia minima por periodo, no topo do calendario (29/10/2026) */
.vv-cal-regras{ margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid var(--cal-linha) }
.vv-cal-regras-titulo{ margin:0 0 12px; font-family: var(--serif); font-size:18px; color: var(--ink) }
.vv-cal-regras-lista{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap:6px;
  margin:0; padding:0; list-style:none;
}
.vv-cal-regras-lista li{
  display:flex; flex-direction:column; gap:1px; padding:7px 10px;
  background:#FFFFFF; border:1px solid var(--cal-linha);
}
.vv-cal-regras-lista span{ font-size:11.5px; line-height:1.25; color: var(--cal-suave) }
.vv-cal-regras-lista b{ font-size:15px; font-weight:500; color: var(--ink); font-variant-numeric: lining-nums }
.vv-cal-regras-nota{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color: var(--cal-suave) }
.vv-cal-min{ font-weight:600 }
.vv-cal-original{ color: var(--cal-suave); text-decoration-thickness:1px }
.vv-cal-pacotes-titulo{ margin-top:18px }
/* uma faixa so, que arrasta para o lado: o calendario continua perto do topo */
.vv-cal-pacotes{
  display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.vv-cal-pacote{
  flex:0 0 auto; scroll-snap-align:start; min-width:132px;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:7px 10px; text-align:start;
  background:#FFFFFF; border:1px solid var(--cal-linha); color: var(--ink); cursor:pointer; font: inherit;
  transition: border-color .2s ease;
}
.vv-cal-pacote b{ font-size:14px; font-weight:500; font-variant-numeric: lining-nums tabular-nums; white-space:nowrap }
.vv-cal-pacote span{ font-size:11.5px; line-height:1.25; color: var(--cal-suave); white-space:nowrap }
.vv-cal-pacote em{ display:none; font-style:normal; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--cal-suave) }
.vv-cal-pacote.is-off{ cursor:default; background:transparent }
.vv-cal-pacote.is-off b{ color: rgba(116,92,63,.55); text-decoration: line-through; text-decoration-thickness:1px }
.vv-cal-pacote.is-off em{ display:block }
.vv-cal-pacote:hover:not(:disabled){ border-color: var(--ink) }
.vv-cal-pacote:focus-visible{ outline:2px solid var(--terra, #C66522); outline-offset:2px }

.vv-cal-nav{ display:flex; align-items:center; gap:14px; margin-bottom: 18px }
/* o mes ja aparece em cada bloco; aqui fica so para leitor de tela */
.vv-cal-titulo{
  flex:1; margin:0; height:1px; width:1px; overflow:hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.vv-cal-seta{
  width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--cal-linha);
  background:transparent; color: var(--ink); cursor:pointer; transition: border-color .2s ease, color .2s ease;
}
.vv-cal-seta:hover:not(:disabled){ border-color: var(--terra, #C66522); color: var(--terra-text, #984A0F) }
.vv-cal-seta:disabled{ opacity:.3; cursor:default }
.vv-cal-seta:focus-visible{ outline:2px solid var(--terra, #C66522); outline-offset:2px }

.vv-cal-meses{ display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px) }
.vv-cal-mes-nome{
  margin:0 0 10px; font-family: var(--serif); font-size:18px;
}
.vv-cal-mes-nome::first-letter{ text-transform: uppercase }
.vv-cal-grade{ display:grid; grid-template-columns: repeat(7, 1fr); gap:3px }
.vv-cal-vazio{ aspect-ratio:1 }
.vv-cal-dia{
  aspect-ratio:1; display:grid; place-items:center; border:0; background:transparent;
  font-family: var(--sans); font-size:14px; font-weight:400; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); cursor:pointer;
  transition: background-color .18s ease, color .18s ease;
}
.vv-cal-dia:hover:not(:disabled){ background: rgba(198,101,34,.12) }
.vv-cal-dia:focus-visible{ outline:2px solid var(--terra, #C66522); outline-offset:-2px }
.vv-cal-dia.is-off{
  color: rgba(116, 92, 63, .55);
  cursor:default; text-decoration: line-through; text-decoration-thickness:1px;
}
.vv-cal-dia.is-entrada, .vv-cal-dia.is-saida{ background: var(--terra, #C66522); color:#F7F2ED }
.vv-cal-dia.is-meio{ background: rgba(198,101,34,.16) }
/* dia sem entrada dentro da estadia escolhida faz parte dela: não fica riscado */
.vv-cal-dia.is-meio.is-off{ text-decoration:none; color: var(--ink) }

.vv-cal-rodape{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--cal-linha);
}
.vv-cal-resumo{ margin:0; flex:1; min-width:180px; font-size:14px; color: var(--ink) }
.vv-cal-acoes{ display:flex; flex-wrap:wrap; gap:10px }
.vv-cal-nota{ margin:14px 0 0; font-size:12px; color: var(--cal-suave) }

/* Pacotes de feriado como bilhetes de viagem (29/10/2026): foto do tema com as datas em números grandes,
   picote, canhoto com as noites e o "Saiba mais", que abre o painel de reserva do site. */
.vv-pacotes{ --bil-fundo:#FFFFFF; --bil-papel: var(--cream, #F7F2ED); --bil-tinta: var(--ink, #232320); margin-top:40px }
.vv-bil-trilho{
  display:grid; grid-auto-flow:column; grid-auto-columns: max(280px, calc((100% - 40px) / 3.25)); gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; padding:2px;
  overflow-anchor:none;
}
.vv-bil-trilho::-webkit-scrollbar{ display:none }
.vv-bil{
  scroll-snap-align:start; display:flex; flex-direction:column; background: var(--bil-papel); cursor:pointer;
  opacity:0; transform: translateY(18px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms);
}
.vv-pacotes.is-visto .vv-bil{ opacity:1; transform:none }
.vv-bil.is-off{ cursor:default }
.vv-bil-foto{ position:relative; aspect-ratio: 4 / 5; overflow:hidden; background:#2A2622; color:#FFFFFF }
.vv-bil-foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.vv-bil:not(.is-off):hover .vv-bil-foto img{ transform: scale(1.05) }
.vv-bil-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(18,16,14,.80) 0%, rgba(18,16,14,.20) 42%, rgba(18,16,14,0) 62%),
    linear-gradient(to bottom, rgba(18,16,14,.38) 0%, rgba(18,16,14,0) 26%);
}
/* hierarquia pedida em 29/10: o nome da data é o maior texto do bilhete; as datas vêm logo abaixo, nítidas */
.vv-bil-legenda{ position:absolute; z-index:1; inset-inline-start:22px; inset-inline-end:22px; bottom:22px }
.vv-bil-nome{
  margin:0; font-family: var(--serif); font-weight:400; color:#FFFFFF;
  font-size: clamp(38px, 3.6vw, 52px); line-height:1.02; letter-spacing:-.01em; text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0,0,0,.25);
}
.vv-bil-quando{
  margin:12px 0 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color: rgba(255,255,255,.92);
}
.vv-bil-dia b{ font-size:20px; letter-spacing:.02em; font-weight:500; font-variant-numeric: lining-nums tabular-nums }
.vv-bil-seta{ font-size:16px; font-weight:300; opacity:.8; letter-spacing:0 }
[dir="rtl"] .vv-bil-seta{ transform: scaleX(-1) }
.vv-bil-credito{
  position:absolute; z-index:1; inset-inline-end:14px; top:14px; font-size:10px; letter-spacing:.06em;
  color: rgba(255,255,255,.78);
}
/* carimbo de passaporte para o pacote que já tem noite reservada */
.vv-bil-carimbo{
  display:none; position:absolute; z-index:2; top:42%; left:50%; transform: translate(-50%, -50%) rotate(-11deg);
  padding:11px 20px; border:2px solid rgba(255,255,255,.92); outline:1px solid rgba(255,255,255,.5); outline-offset:4px;
  font-size:14px; letter-spacing:.3em; text-transform:uppercase; font-weight:500; color:#FFFFFF; white-space:nowrap;
  backface-visibility:hidden; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased;
}
/* picote: linha tracejada com dois recortes da cor da página nas bordas */
.vv-bil-picote{ position:relative; height:0; margin:0 16px; border-top:1.5px dashed rgba(58,46,35,.26) }
.vv-bil-picote::before, .vv-bil-picote::after{
  content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background: var(--bil-fundo);
}
.vv-bil-picote::before{ left:-27px }
.vv-bil-picote::after{ right:-27px }
.vv-bil-canhoto{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:74px; padding:16px 22px 18px }
.vv-bil-noites{ margin:0; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft, #745C3F) }
.vv-bil-mais{
  display:inline-flex; align-items:center; gap:10px; padding:4px 0; border:0; background:none; cursor:pointer;
  font: inherit; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color: var(--bil-tinta);
  background-image: linear-gradient(currentColor, currentColor); background-repeat:no-repeat;
  background-size: 0% 1px; background-position: 0 100%; transition: background-size .45s cubic-bezier(.2,.7,.2,1);
}
.vv-bil-mais svg{ transition: transform .45s cubic-bezier(.2,.7,.2,1) }
.vv-bil:hover .vv-bil-mais{ background-size: 100% 1px }
.vv-bil:hover .vv-bil-mais svg{ transform: translateX(4px) }
[dir="rtl"] .vv-bil-mais svg{ transform: scaleX(-1) }
.vv-bil-mais:focus-visible{ outline:2px solid var(--terra, #C66522); outline-offset:4px }
.vv-bil-reservado{ display:none; margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft, #745C3F) }
.vv-bil.is-off .vv-bil-foto img{ filter: grayscale(1) brightness(.8) }
.vv-bil.is-off .vv-bil-carimbo, .vv-bil.is-off .vv-bil-reservado{ display:block }
.vv-bil-rodape{ display:flex; align-items:center; gap:10px; margin-top:24px }
.vv-bil-trilha{ flex:1; height:1px; position:relative; overflow:hidden; background: rgba(58,46,35,.16); margin-inline-end:14px }
.vv-bil-trilha span{ position:absolute; top:0; bottom:0; left:0; background: var(--bil-tinta); transition: transform .15s linear }
@media (prefers-reduced-motion: reduce){
  .vv-bil{ opacity:1; transform:none; transition:none }
  .vv-bil-foto img, .vv-bil-mais, .vv-bil-mais svg{ transition:none }
}

@media (max-width: 720px){
  .vv-bil-trilho{ grid-auto-columns: 84%; gap:14px }
  .vv-cal-meses{ grid-template-columns: 1fr }
  .vv-cal-acoes{ width:100%; }
  .vv-cal-acoes .btn{ flex:1; justify-content:center }
}
@media (prefers-reduced-motion: reduce){
  .vv-cal-dia, .vv-cal-seta{ transition:none }
}

/* botão "Pacotes" ao lado do "Reservar" no alto da página (29/10/2026) */
.hero-cta .btn + .btn{ margin-inline-start: 10px }