/* Quadro "Monte sua viagem" (o mesmo da página inicial), para as páginas das estações (01/11/2026).
   Copiado do estilo da página inicial (index.html e style-neutra.css); se mudar lá, mudar aqui também. */
.planner { padding: 0; position: relative; z-index: 6; margin-top: -128px; }
.planner .container { max-width: 1260px; }
.planner-card {
  /* 15/10/2026: um pouco fumê (translúcido, deixa ver a foto de fundo bem de leve) */
  background: rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border-radius: 16px; padding: 26px 30px 22px;
  box-shadow: 0 26px 60px rgba(16,60,70,0.20); border-top: 3px solid var(--gold);
}
.planner-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.planner-head .section-label { margin: 0; }
.planner-head h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: var(--t-sec,30px);
  color: var(--teal-deep); line-height: 1.15; margin: 4px 0 0;
}
.planner-head h2 em { font-style: normal; color: var(--gold); }
.planner-form {
  display: grid; gap: 14px; align-items: end;
  grid-template-columns: 1.3fr 1.5fr 1fr 1fr auto;
}
.planner-field label {
  display: block; font-size: var(--t-pq,14px); letter-spacing: normal; text-transform: none;
  color: var(--teal-mid); font-weight: 600; margin-bottom: 7px;
}
.planner-field select {
  width: 100%; height: 50px; padding: 0 36px 0 14px; border: 1px solid var(--gray-light); border-radius: 8px;
  background: var(--off-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a96e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-family: 'Jost', sans-serif; font-size: var(--t-pq,14px); font-weight: 400; color: var(--charcoal);
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .2s ease;
}
.planner-field select:hover, .planner-field select:focus { border-color: var(--gold); outline: none; }
.planner-form .btn { height: 50px; padding: 0 28px; white-space: nowrap; }
.planner-field select:has(option[value=""]:checked) { color: #5f5f5f; }
.planner-field select option { color: var(--charcoal); }
.planner-field.is-missing select { border-color: #a94a42; background-color: #fbeceb; }
.planner-err { margin: 14px 0 0; color: #a94a42; font-size: var(--t-pq,14px); }
.lista-numeros { z-index: 700; }

/* lista de adultos e crianças no computador: mais baixa, com rolagem */
.lista-numeros { position: absolute; z-index: 60; max-height: 236px; overflow-y: auto; background: var(--white); border: 1px solid var(--gold); border-radius: 8px; box-shadow: 0 14px 34px rgba(16,60,70,0.18); padding: 4px 0; }
.lista-numeros button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 14px; font-family: 'Jost', sans-serif; font-size: var(--t-pq,14px); color: var(--charcoal); cursor: pointer; }
.lista-numeros button:hover { background: #F8F6F2; }
.lista-numeros button.sel { background: var(--teal-deep); color: #fff; }
.planner-note {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--gray-light); list-style: none; font-size: var(--t-pq,14px); color: var(--gray);
}
.planner-note li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 9px; vertical-align: middle; }
.planner-ages { grid-column: 1 / -1; order: 2; padding-top: 4px; }
.planner-form .btn { order: 1; }
.planner-ages-t { font-size: var(--t-pq,14px); color: var(--charcoal); font-weight: 600; margin: 0 0 10px; }
.planner-ages-t em { font-style: normal; font-weight: 400; color: var(--gray); }
.planner-ages-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 14px; }
.planner-ages-g label { display: block; font-size: var(--t-pq,14px); letter-spacing: normal; text-transform: none; color: var(--teal-mid); font-weight: 600; }
.planner-ages-g select { margin-top: 6px; width: 100%; height: 46px; padding: 0 30px 0 12px; border: 1px solid var(--gray-light); border-radius: 8px; font-family: 'Jost', sans-serif; font-size: var(--t-pq,14px); color: var(--charcoal); -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--off-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a96e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.planner-ages-g select:has(option[value=""]:checked) { color: #5f5f5f; }
.planner-ages-g select:focus { border-color: var(--gold); outline: none; }
.planner-ages-g label.is-missing select { border-color: #a94a42; background-color: #fbeceb; }
@media (max-width: 1000px) {
  .planner-form { grid-template-columns: repeat(4, 1fr); }
  .planner-field { grid-column: span 2; }
  .planner-form .btn { grid-column: 1 / -1; order: 3; }
  .planner-ages { order: 2; }
}
@media (max-width: 600px) {
  .planner-form { grid-template-columns: 1fr 1fr; }
  .planner-field { grid-column: span 1; }
  .planner-field--vila, .planner-field--mes { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero.hero--planner { padding: 92px 20px 120px; }
  .hero--planner p.lead { font-size: var(--t-txt,17px); line-height: 1.6; }
  .planner { margin-top: -76px; }
  .planner-card { padding: 22px 18px 18px; }
}
.planner-field label { font-size: var(--t-pq,14px); color: var(--teal-deep); font-weight: 600; letter-spacing: normal; }
.planner-head h2 em { color: #004E5D; }
/* 19/10/2026 (Nayara): idades logo abaixo do campo Crianças, na mesma coluna, uma embaixo da outra; na caixa só o número */
.planner-ages { grid-column: 4 / 5; padding-top: 0; margin-top: -4px; }
.planner-ages-t { display: none; }
.planner-ages-g { grid-template-columns: 1fr; gap: 10px; }
.planner-ages-g label { font-size: var(--t-pq,14px); letter-spacing: normal; }
.planner-ages-g select { margin-top: 4px; height: 50px; font-size: var(--t-pq,14px); padding: 0 36px 0 14px; background-position: right 14px center; background-size: auto; }   /* igual ao campo Crianças */
@media (max-width: 1000px) { .planner-ages { grid-column: 3 / 5; } }
@media (max-width: 600px) { .planner-ages { grid-column: 2 / 3; } }
/* 28/10/2026: quadro sem o mês (as datas são escolhidas no gerador); Adultos e Crianças com − e +, como no gerador; fita com o "a partir de" */
@media (max-width: 1000px) { .planner-field--vila, .planner-field--datas { grid-column: 1 / -1; } }
.pl-datas { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 50px; padding: 0 14px; border: 1px solid #DCD3C4; border-radius: 8px; background: #fff; color: var(--charcoal); font: 400 var(--t-pq,14px) 'Jost', sans-serif; text-align: left; cursor: pointer; }
.pl-datas .ph { color: #9aa5a8; }
html body .pl-datas { font-size: 17px; }   /* mesmo tamanho da lista da Estação */
.pl-datas svg { flex: none; color: #006E83; }
.pl-datas.cheio { color: var(--teal-deep); font-weight: 500; }
.planner-field.is-missing .pl-datas { border-color: #a94a42; background-color: #fbeceb; }
/* calendário da página inicial: caixa pequena no meio da tela (as mesmas datas livres do gerador) */
/* calendário da página inicial: colado ao campo, no modelo da Performance (as mesmas datas livres do gerador) */
.pl-cal { position: fixed; z-index: 900; box-sizing: border-box; max-width: calc(100vw - 16px); padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #e6eaee; box-shadow: 0 18px 44px rgba(16,40,60,.18); color: var(--charcoal); animation: plCalEntra .18s ease-out; }
.pl-cal[hidden] { display: none; }
@keyframes plCalEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pl-cal-in { font-family: 'Jost', sans-serif; }
.pl-cal-topo { display: none; }
.pl-cal-mes { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.pl-cal-mes b { font: 600 20px 'Jost', sans-serif; color: var(--teal-deep); text-transform: capitalize; letter-spacing: -.2px; }
.pl-cal-seta { width: 44px; height: 44px; border: 1.5px solid #dfe4e8; border-radius: 50%; background: #fff; color: var(--teal-deep); font-size: 20px; cursor: pointer; }
.pl-cal-seta:disabled { opacity: .35; cursor: default; }
.pl-cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.pl-cal-grade .sem { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #6b7880; text-align: center; padding-bottom: 4px; }
.pl-cal-grade .dia { position: relative; height: 40px; border: 1.5px solid transparent; border-radius: 12px; background: #f2f4f6; font: 600 16px 'Jost', sans-serif; color: var(--teal-deep); padding: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.pl-cal-grade .dia.vazio { visibility: hidden; }
.pl-cal-grade .dia.alta { background: #fdf6e6; border-color: #EDE7DC; }
.pl-cal-grade .dia:disabled { background: #f7f8f9; color: #c3cad0; cursor: default; }
.pl-cal-grade .dia.sem-vaga::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: #c3cad0; }
.pl-cal-grade .dia.sem-vaga { color: transparent; }
.pl-cal-grade .dia.saida-ok { border-color: #006E83; background: #F8F6F2; color: #004E5D; }
.pl-cal-grade .dia.ini, .pl-cal-grade .dia.fim { background: #006E83; border-color: #006E83; color: #fff; }
.pl-cal-grade .dia.meio { background: #EFE9DE; border-color: transparent; color: #004E5D; }
.pl-cal-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 10px; padding: 9px 8px; border-radius: 14px; background: #f4f6f8; font-size: 11px; color: var(--charcoal); }
.pl-cal-leg span { white-space: nowrap; }
.pl-cal-leg i { display: inline-block; width: 18px; height: 10px; border-radius: 5px; margin-right: 5px; vertical-align: middle; border: 1px solid #d9dde0; background: #f2f4f6; }
.pl-cal-leg .l-alta { background: #fdf6e6; border-color: #EDE7DC; } .pl-cal-leg .l-suas { background: #006E83; border-color: #006E83; }
.pl-cal-dica { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #F8F6F2; font-size: 12.5px; color: var(--charcoal); line-height: 1.4; }
.pl-cal-dica b { color: #004E5D; }
@media (max-width: 370px) { .pl-cal { padding: 10px; } .pl-cal-grade { gap: 4px; } .pl-cal-grade .dia { font-size: 14px; border-radius: 10px; } }
/* título do quadro centralizado */
.planner-head { justify-content: center; text-align: center; }
html body .planner-head h2 { text-align: center; }
.pl-rot { display: block; font-size: var(--t-pq,14px); color: var(--teal-deep); font-weight: 600; margin-bottom: 7px; }
.pl-cont { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 6px; border: 1px solid #DCD3C4; border-radius: 8px; background: #fff; }
.pl-cont button { width: 38px; height: 38px; border: 1px solid #DCD3C4; border-radius: 50%; background: #fff; color: var(--teal-deep); font: 500 20px/1 'Jost', sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; -webkit-tap-highlight-color: transparent; }
.pl-cont button:disabled { opacity: .35; cursor: default; }
.pl-cont button:not(:disabled):active { background: #F8F6F2; }
.pl-cont output { min-width: 28px; text-align: center; font: 500 17px 'Jost', sans-serif; color: var(--charcoal); }
.pl-cont output.zero { color: #9aa5a8; }
.fita.pl-fita { overflow: hidden; margin: 12px 0 0; padding: 0 4px; border-radius: 999px; height: 32px; line-height: 30px; font: 400 13px 'Jost', sans-serif; white-space: nowrap; color: #004E5D; background: rgba(19,135,156,.07); border: 1px solid rgba(19,135,156,.28); }
.pl-fita .fita-janela { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.pl-fita .fita-trilho { display: inline-flex; animation: fitaPassa 38s linear infinite; }
.pl-fita .fita-item { padding-right: 28px; }
.pl-fita .fita-item b { font-weight: 700; font-size: 15px; letter-spacing: -.2px; background: linear-gradient(100deg,#006E83 0%,#006E83 35%,#006E83 50%,#006E83 65%,#006E83 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fitaBrilho 2.6s ease-in-out infinite; }
.pl-fita .fita-item i { font-style: normal; color: #006E83; opacity: .6; padding: 0 4px; }
@keyframes fitaPassa { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fitaBrilho { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pl-fita .fita-trilho, .pl-fita .fita-item b { animation: none; } .pl-fita .fita-item b { color: #006E83; } }
/* 28/10/2026: o "a partir de" virou uma linha fixa e discreta (sem fita, movimento nem brilho) */
html body .fita.pl-fita { display: block; width: auto; min-width: 0; height: auto; margin: 10px 0 0; padding: 0; border: 0; background: none; border-radius: 0; text-align: center; white-space: normal; line-height: 1.4; font-size: 14px; color: #4a5a60; overflow: visible; }
html body .pl-fita .fita-item { padding: 0; }
@media (max-width: 420px) { html body .fita.pl-fita { font-size: 13px; letter-spacing: -.1px; } }
html body .pl-fita .fita-item b { font-weight: 600; font-size: inherit; letter-spacing: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #006E83; animation: none; }
.planner-head > div { display: grid; justify-items: stretch; min-width: 0; width: 100%; }   /* 28/10/2026: etiqueta e fita da largura dos campos de baixo */
html body .planner-head .planner-aviso { display: flex !important; width: 100%; box-sizing: border-box; justify-content: center; }
@media (min-width: 761px) { html body .planner-head .planner-aviso { display: inline-flex !important; width: auto; justify-self: center; } }   /* 28/10/2026: no computador, o selo do tamanho da frase (como no Booking) */
.fita.pl-fita { width: 0; min-width: 100%; box-sizing: border-box; display: flex; align-items: center; line-height: 1; }
.pl-fita .fita-janela { line-height: 1.2; padding-top: 1px; }
.planner-form select{background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%23e8f6f8'/%3E%3Cpath d='M9.5 12.5l5.5 5.5 5.5-5.5' fill='none' stroke='%231a6b7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:calc(100% - 10px) 50%!important;background-size:30px 30px!important;padding-right:52px!important;-webkit-appearance:none;appearance:none;cursor:pointer}
@media (max-width:760px){html body .planner-form .planner-ages{grid-column:1 / -1!important;width:auto}html body .planner-form .planner-ages-g{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 16px!important}html body .planner-form .planner-ages-g label{min-width:0}html body .planner-form .planner-ages-g select{width:100%;min-width:0}}
/* 27/10/2026: no quadro "Monte sua viagem" da página inicial, a mesma etiqueta do gerador: ⚡ Orçamento ultra simples, em poucos cliques */
.planner-aviso{display:inline-flex;align-items:center;gap:10px;margin:12px 0 0;padding:6px 16px 6px 6px;border-radius:999px;background:#F8F6F2;border:1.5px solid #DCD3C4;color:#004E5D;font:600 15px/1.3 'Jost',sans-serif;max-width:100%;box-sizing:border-box}
.planner-aviso .raio{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:#006E83;color:#ffd23f;font-size:16px;line-height:1;box-shadow:0 3px 10px rgba(19,135,156,.35)}
@media (max-width:560px){.planner-aviso{white-space:nowrap;font-size:14px;gap:8px;padding:5px 14px 5px 5px}.planner-aviso .raio{width:28px;height:28px;font-size:15px}}
@media (max-width:370px){.planner-aviso{font-size:13px;gap:6px;padding-right:10px}.planner-aviso .raio{width:24px;height:24px;font-size:13px}}
@media (max-width:350px){.planner-aviso{white-space:normal}}
@media (max-width:420px){.planner-aviso{font-size:13px;gap:6px;padding:4px 10px 4px 4px}.planner-aviso .raio{width:24px;height:24px;font-size:13px}}
@media (max-width:380px){.planner-aviso{white-space:normal}}
.pl-cal-sem { display: block; width: 100%; min-height: 48px; margin-top: 10px; border: 1.5px dashed #006E83; border-radius: 12px; background: #fff; color: #006E83; font: 600 15px 'Jost', sans-serif; cursor: pointer; }   /* 01/11/2026: "Ainda não sei as datas" */
.pl-cal-sem:hover, .pl-cal-sem:focus-visible { background: #F8F6F2; }