/* 29/10/2026 · AJUSTES DO SITE (vale em todas as páginas). As cores voltaram às antigas do site a pedido da Nayara (29/10);
   aqui ficam só as mudanças de arrumação e funcionamento: barra "Monte sua viagem" no estilo Booking, botões, gerador, idades, etc.
   A versão com as cores "Neve e madeira" está guardada em documentos/historico/tema-cores-neve-e-madeira-2026-10-29.css. */
:root { --az: #006E83; }


/* bolinha verde "online" na foto da Nayara: pulsa devagar para mostrar que ela está disponível */
@keyframes online-pulso { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.65); } 70% { box-shadow: 0 0 0 9px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
html:root #ajudaBtn .on, html:root .barra-cel .bc-ajuda::after, html:root .bc-ajuda::after { animation: online-pulso 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { html:root #ajudaBtn .on, html:root .barra-cel .bc-ajuda::after, html:root .bc-ajuda::after { animation: none; } }

/* 29/10/2026 · no computador, o "Monte sua viagem" no estilo do Booking: título à esquerda e uma barra fina, com o nome de cada campo dentro da caixa */
@media (min-width: 1000px) {
  html:root .planner-head, html:root .planner-head > div { text-align: left !important; justify-items: start !important; align-items: flex-start !important; }
  html:root .planner-head h2 { text-align: left !important; margin-left: 0 !important; }
  html:root body .planner-head .planner-aviso { display: inline-flex !important; width: auto !important; justify-self: start !important; margin-left: 0 !important; }
  html:root .planner-form { display: flex !important; align-items: stretch !important; gap: 4px !important; padding: 4px !important; background: var(--az) !important; border-radius: 12px !important; margin-top: 18px !important; }
  html:root .planner-form .planner-field { flex: 1 1 0; min-width: 0; position: relative; display: flex !important; flex-direction: column; justify-content: center; gap: 0 !important;
    background: #fff !important; border-radius: 9px !important; padding: 6px 14px 6px !important; margin: 0 !important; }
  html:root .planner-form .planner-field--vila { flex: 1.3 1 0; } html:root .planner-form .planner-field--datas { flex: 1.5 1 0; }
  html:root .planner-form .planner-field label, html:root .planner-form .planner-field .pl-rot { font-size: 13px !important; font-weight: 500 !important; color: #2A2A2A !important; margin: 0 !important; line-height: 1.2 !important; }
  html:root .planner-form select, html:root .planner-form .pl-datas { height: 30px !important; min-height: 0 !important; border: 0 !important; padding: 0 !important; background-color: transparent !important; font-size: 16px !important; box-shadow: none !important; }
  html:root .planner-form .pl-datas svg { width: 20px; height: 20px; }
  html:root .planner-form .pl-cont { height: 30px !important; min-height: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; justify-content: space-between; }
  html:root .planner-form .pl-cont button { width: 28px !important; height: 28px !important; min-width: 0 !important; font-size: 18px !important; }
  html:root .planner-form .pl-cont output { font-size: 16px !important; }
  html:root .planner-form > .btn { flex: 0 0 auto; align-self: stretch; height: auto !important; min-height: 56px; padding: 0 26px !important; border-radius: 9px !important; background: #006E83 !important; color: #fff !important; border: 0 !important; font-size: 17px !important; opacity: 1 !important; }
  html:root .planner-form .planner-ages { flex-basis: 100%; }
  html:root .planner-note { justify-content: flex-start !important; }
}

/* 29/10/2026: na foto da Nayara, só a bolinha verde se mexe (sem o halo dourado pulsando em volta da foto) */
html:root #ajudaBtn::before { animation: none !important; opacity: 0 !important; }
html:root .barra-cel .bc-ajuda, html:root .bc-ajuda { animation: none !important; }
/* no computador, a frase das datas não quebra em duas linhas na barra do "Monte sua viagem" */
@media (min-width: 1000px) { html:root .planner-form .pl-datas span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } html:root .planner-form .pl-datas { gap: 8px; } }
/* 29/10/2026: barra ainda mais fina (pedido da Nayara) */
@media (min-width: 1000px) {
  html:root .planner-form { padding: 3px !important; gap: 3px !important; border-radius: 10px !important; margin-top: 14px !important; }
  html:root .planner-form .planner-field { padding: 3px 12px 4px !important; border-radius: 8px !important; }
  html:root .planner-form .planner-field label, html:root .planner-form .planner-field .pl-rot { font-size: 12px !important; }
  html:root .planner-form select, html:root .planner-form .pl-datas, html:root .planner-form .pl-cont { height: 24px !important; font-size: 15px !important; }
  html:root .planner-form .pl-cont button { width: 24px !important; height: 24px !important; font-size: 16px !important; }
  html:root .planner-form > .btn { min-height: 46px !important; padding: 0 22px !important; border-radius: 8px !important; font-size: 16px !important; }
  html:root .planner-card { padding-top: 22px !important; padding-bottom: 14px !important; }
  html:root .planner-head h2 { margin-bottom: 6px !important; }
}
/* 29/10/2026: quadro mais esticado para os lados e mais baixo (título e selo na mesma linha) */
@media (min-width: 1000px) {
  html:root .planner > .container { max-width: min(1380px, 94vw) !important; padding-left: 0 !important; padding-right: 0 !important; }
  html:root body .planner-head > div { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 18px !important; width: 100%; }
  html:root .planner-head h2 { font-size: 28px !important; line-height: 1.1 !important; margin: 0 !important; }
  html:root body .planner-head .planner-aviso { margin: 0 !important; }
  html:root .planner-card { padding: 16px 22px 10px !important; }
  html:root .planner-form { margin-top: 12px !important; }
  html:root .planner-note { margin-top: 8px !important; padding-top: 0 !important; border-top: 0 !important; }
}

/* 29/10/2026 · EFEITO DOS BOTÕES em todas as páginas (o mesmo do "Ver datas e preços"):
   ao passar o mouse ou focar, o botão fica azul-escuro sólido com letra branca; ao clicar, afunda de leve. Nada fosco, nada de sombra. */
html:root .btn, html:root button.btn, html:root .capa-bolhas a, html:root .cupom-copiar, html:root .vit-filtros button, html:root .planner-form > .btn,
html:root .perfil-card .btn, html:root .mobile-menu a.menu-cta, html:root .barra-topo .bt-monte {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease !important; }
html:root .btn:hover, html:root .btn:focus-visible, html:root .capa-bolhas a:hover, html:root .capa-bolhas a:focus-visible,
html:root .cupom-copiar:hover, html:root .cupom-copiar:focus-visible, html:root .vit-filtros button:hover,
html:root .planner-form > .btn:hover, html:root .planner-form > .btn:focus-visible, html:root .perfil-card .btn:hover,
html:root .mobile-menu a.menu-cta:hover, html:root .barra-topo .bt-monte:hover, html:root .barra-topo .bt-monte:focus-visible {
  background: #004E5D !important; color: #fff !important; border-color: #004E5D !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; }
html:root .btn:hover *, html:root .capa-bolhas a:hover *, html:root .planner-form > .btn:hover * { color: #fff !important; }
html:root .btn:active, html:root .capa-bolhas a:active, html:root .cupom-copiar:active, html:root .vit-filtros button:active,
html:root .planner-form > .btn:active, html:root .barra-topo .bt-monte:active { transform: scale(.97) !important; background: #004E5D !important; color: #fff !important; }
/* o topo azul: o botão branco do menu fica azul-escuro ao passar o mouse */
html:root #siteHeader .btn-gold:hover, html:root #siteHeader .btn-gold:focus-visible { background: #004E5D !important; color: #fff !important; border-color: #fff !important; }
@media (prefers-reduced-motion: reduce) { html:root .btn:active, html:root .capa-bolhas a:active, html:root .planner-form > .btn:active { transform: none !important; } }

/* 29/10/2026 · gerador: os botões de ação ("Escolher", "Ver quartos", "Continuar", "Enviar") sólidos no azul do logo, sem ficar apagados,
   e com o mesmo efeito do site ao passar o mouse (azul-escuro) e ao clicar (afunda de leve) */
html:root body #gerador .btn[data-escolher]:not(.sel-ok):not(.x):not(.y):not(.z), html:root body .gerador .btn[data-ver-hotel]:not(.x):not(.y):not(.z),
html:root body .det .btn[data-quarto]:not(.sel-ok):not(.x):not(.y):not(.z), html:root body .gerador .barra #avancar:not(.x):not(.y),
html:root body .gerador .ok-serv:not(.x):not(.y):not(.z), html:root body .gerador #btnEnviar:not(.x):not(.y), html:root body .gerador .btn.ouro:not(.x) {
  background: var(--az) !important; border-color: var(--az) !important; color: #fff !important; opacity: 1 !important; filter: none !important;
  transition: background-color .2s ease, transform .12s ease !important; }
html:root body #gerador .btn[data-escolher]:not(.sel-ok):hover:not(.x):not(.y):not(.z), html:root body .gerador .btn[data-ver-hotel]:hover:not(.x):not(.y):not(.z),
html:root body .det .btn[data-quarto]:not(.sel-ok):hover:not(.x):not(.y):not(.z), html:root body .gerador .barra #avancar:hover:not(.x):not(.y),
html:root body .gerador .ok-serv:hover:not(.x):not(.y):not(.z), html:root body .gerador #btnEnviar:hover:not(.x):not(.y), html:root body .gerador .btn.ouro:hover:not(.x) {
  background: #004E5D !important; border-color: #004E5D !important; }
html:root body .gerador .btn:active:not(.x) { transform: scale(.97) !important; }

/* 29/10/2026 · resumo final do gerador, no computador: "Valor total da viagem" (com o pedido) à esquerda e "O que está incluído" à direita */
@media (min-width: 920px) {
  html:root body .gerador .resumo { grid-template-columns: calc(100% * 1.1 / 2.1 - 10px) minmax(0,1fr) !important; }
  html:root body .gerador .resumo > .total { order: -1; }
}

/* 29/10/2026 · barra de baixo do gerador: sem o resumo curto ("Les Arcs · 09/01 → 16/01 · 10 pessoas") e com o Voltar ao lado do Continuar */
html:root body .gerador .barra .resumo-curto { display: none !important; }
html:root body .gerador .barra .botoes:not(.x) { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 10px !important; width: 100%; max-width: 640px; margin: 0 auto; }
html:root body .gerador .barra #avancar:not(.x):not(.y) { order: 2 !important; flex: 1 1 auto !important; }
html:root body .gerador .barra #voltar:not(.x):not(.y) { order: 1 !important; flex: 0 0 auto !important; align-self: stretch !important; min-width: 120px;
  background: #fff !important; color: var(--az) !important; border: 1.5px solid var(--az) !important; border-radius: 10px !important; font-weight: 600 !important; text-decoration: none !important; }
html:root body .gerador .barra #voltar:hover:not(.x):not(.y) { background: #004E5D !important; color: #fff !important; border-color: #004E5D !important; }
html:root body .gerador .barra #voltar::before { content: '‹ '; }
html:root body .gerador .barra #voltar:not(.x):not(.y) { height: auto !important; min-height: 48px !important; padding: 0 20px !important; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { html:root body .gerador .barra #voltar:not(.x):not(.y) { min-width: 96px; padding: 0 14px !important; } }
html:root body .gerador .barra #voltar[hidden] { display: none !important; }


/* 29/10/2026: no computador, o quadro "Monte sua viagem" fica ~30% sobre a foto e o resto abaixo */
@media (min-width: 1000px) { html:root #monte-sua-viagem { margin-top: -52px !important; position: relative; z-index: 3; } }

/* 29/10/2026: o selo "⚡ Orçamento ultra simples" volta para baixo do título "Monte sua viagem para a neve" (no computador, à esquerda) */
@media (min-width: 1000px) {
  html:root body .planner-head > div { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}
/* celular pequeno: as caixinhas de vantagens não passam da tela */
@media (max-width: 420px) { html:root .trust-item { padding: 16px 10px !important; min-width: 0 !important; } html:root .trust-grid { min-width: 0; } }
/* 29/10/2026: título, selo e barra começam na mesma linha da esquerda, e menos espaço entre o selo e a barra */
@media (min-width: 1000px) {
  html:root .planner-card { padding: 18px 28px 12px !important; }
  html:root .planner-head { margin: 0 !important; padding: 0 !important; }
  html:root .planner-head h2, html:root body .planner-head .planner-aviso, html:root .planner-form, html:root .planner-note { margin-left: 0 !important; padding-left: 0; }
  html:root body .planner-head .planner-aviso { padding-left: 6px !important; }
  html:root .planner-form { margin-top: 12px !important; }
  html:root .planner-note { margin-top: 8px !important; }
}
/* 29/10/2026: no celular e no tablet, o "Montar minha viagem" no mesmo padrão do computador (azul cheio, não apagado) e um pouco menor */
@media (max-width: 999px) {
  html:root .planner-form > .btn, html:root .planner-form > .btn:disabled { background: var(--az) !important; color: #fff !important; border: 0 !important; opacity: 1 !important; filter: none !important;
    min-height: 48px !important; height: auto !important; padding: 12px 20px !important; font-size: 16px !important; border-radius: 10px !important; }
  html:root .planner-form > .btn:hover, html:root .planner-form > .btn:focus-visible { background: #004E5D !important; }
}
/* 29/10/2026: o título "Monte sua viagem para a neve" começa na mesma linha do texto dentro das caixas (Estação, Datas…) */
@media (min-width: 1000px) { html:root .planner-head h2 { padding-left: 15px !important; } }
/* 29/10/2026: com criança, a idade de cada criança aparece numa linha embaixo da barra (sem apertar os campos); − e + mais perto do número */
@media (min-width: 1000px) {
  html:root .planner-form { flex-wrap: wrap !important; }
  html:root .planner-form .planner-field, html:root .planner-form > .btn { flex-shrink: 0; }
  html:root .planner-form .planner-field--vila { flex: 1.3 1 0 !important; } html:root .planner-form .planner-field--datas { flex: 1.5 1 0 !important; }
  html:root .planner-form .planner-field--cont { flex: 1 1 0 !important; }
  html:root .planner-form .planner-ages { flex: 0 0 100% !important; order: 10; background: #fff !important; border-radius: 8px !important; padding: 10px 14px !important; margin: 0 !important; box-sizing: border-box; }
  html:root .planner-form .planner-ages:not([hidden]) { display: block !important; }
}
html:root .planner-form .pl-cont { justify-content: center !important; gap: 18px !important; }
/* 29/10/2026 (correção): título e selo começam rente à borda da barra azul (sem recuo) e o título em negrito */
@media (min-width: 1000px) {
  html:root .planner-head h2 { padding-left: 0 !important; }
  html:root body .planner-head .planner-aviso { padding-left: 0 !important; }
}
html:root .planner-head h2 { font-weight: 700 !important; }
/* 29/10/2026: idades das crianças num quadrinho que abre logo abaixo do campo "Crianças" (o JS põe a posição e a largura) */
@media (min-width: 1000px) {
  html:root .planner-form { position: relative !important; }
  html:root .planner-form .planner-ages { position: absolute !important; top: calc(100% + 6px) !important; z-index: 20; flex: none !important; order: 0;
    background: #fff !important; border: 1.5px solid var(--az) !important; border-radius: 10px !important; padding: 10px 12px 12px !important; box-sizing: border-box; }
  html:root .planner-form .planner-ages-t { font-size: 12px !important; margin: 0 0 6px !important; color: #2A2A2A !important; }
  html:root .planner-form .planner-ages-g { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
  html:root .planner-form .planner-ages-g label { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px !important; margin: 0 !important; }
  html:root .planner-form .planner-ages-g select { width: 110px !important; height: 34px !important; min-height: 0 !important; padding: 0 10px !important; border: 1px solid #DCD3C4 !important; border-radius: 8px !important; }
}
/* 29/10/2026: título "Monte sua viagem para a neve" maior no computador */
@media (min-width: 1000px) { html:root .planner-head h2 { font-size: 36px !important; line-height: 1.1 !important; } }
/* 29/10/2026: título "Monte sua viagem para a neve" maior em todas as telas (celular 31 px, tablet 35 px, computador 40 px) */
html:root .planner-head h2 { font-size: 31px !important; line-height: 1.12 !important; }
@media (min-width: 600px) { html:root .planner-head h2 { font-size: 35px !important; } }
@media (min-width: 1000px) { html:root .planner-head h2 { font-size: 40px !important; } }
@media (max-width: 350px) { html:root .planner-head h2 { font-size: 28px !important; } }
@media (max-width: 420px) { html:root .planner-form .pl-cont { gap: 6px !important; } }
/* 29/10/2026: telas médias (tablet, janela menor): os atalhos Hospedagem / Aulas / Ski pass / Transfer em 2 por linha, centralizados, como no celular */
@media (min-width: 561px) and (max-width: 760px) {
  html:root #topo .capa-bolhas { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; justify-content: center !important;
    width: min(520px, calc(100% - 72px)) !important; max-width: none; left: 0 !important; right: 0 !important; margin: 0 auto !important; }
  html:root #topo .capa-bolhas li, html:root #topo .capa-bolhas a { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* 29/10/2026 · celular: "Monte sua viagem para a neve" numa linha só e o quadro mais curto (menos espaços) */
@media (max-width: 760px) {
  html:root .planner-head h2 { font-size: clamp(21px, 6.4vw, 30px) !important; white-space: nowrap !important; margin: 0 0 6px !important; }
  html:root .planner-card { padding: 18px 18px 12px !important; }
  html:root body .planner-head .planner-aviso { margin: 0 auto 12px !important; }
  html:root .planner-head { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  html:root .planner-form { gap: 10px !important; row-gap: 10px !important; }
  html:root .planner-form .planner-field { margin: 0 !important; gap: 4px !important; }
  html:root .planner-form .planner-field label, html:root .planner-form .planner-field .pl-rot { margin: 0 0 4px !important; }
  html:root .planner-form select, html:root .planner-form .pl-datas, html:root .planner-form .pl-cont { min-height: 48px !important; height: 48px !important; }
  html:root .planner-note { margin-top: 10px !important; padding-top: 10px !important; }
}
/* 29/10/2026: − e + de Adultos e Crianças sem o círculo em volta (só o sinal), na página de entrada e no gerador */
html:root .planner-form .pl-cont button, html:root body .gerador .pq-cont button, html:root .mini-planner .pl-cont button {
  border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--az) !important; font-size: 22px !important; font-weight: 600 !important; }
html:root .planner-form .pl-cont button:disabled, html:root body .gerador .pq-cont button:disabled { color: #b9c7cb !important; }
html:root .planner-form .pl-cont button:hover:not(:disabled), html:root body .gerador .pq-cont button:hover:not(:disabled) { background: #F8F6F2 !important; border-radius: 8px !important; }
/* 29/10/2026: no computador a frase do orçamento começa à esquerda, logo abaixo do título, e acompanha o título em qualquer tela */
@media (min-width: 1000px) { html:root body .planner-head .planner-aviso { justify-self: start !important; align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } }
/* 29/10/2026: no computador, a barra sem a moldura azul atrás: cada campo é uma caixa simples (como no celular) e o botão no padrão dos outros */
@media (min-width: 1000px) {
  html:root .planner-form { background: transparent !important; padding: 0 !important; gap: 8px !important; border-radius: 0 !important; }
  html:root .planner-form .planner-field { border: 1.5px solid #DCD3C4 !important; border-radius: 10px !important; background: #fff !important; }
  html:root .planner-form .planner-field:focus-within { border-color: var(--az) !important; }
  html:root .planner-form > .btn { border-radius: 10px !important; background: var(--az) !important; }
  html:root .planner-form .planner-ages { border-color: #DCD3C4 !important; }
}
/* 29/10/2026: caixinha do "Orçamento ultra simples" mais fina, do tamanho da bolinha do raio (a bolinha encosta em cima e embaixo) */
html:root body .planner-aviso, html:root body .aviso-topo { padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 2px !important; line-height: 1.2 !important; min-height: 0 !important; }

/* 29/10/2026 (TESTE no Mac): topo no azul do logo com letras brancas; caixas do "Monte sua viagem" no mesmo azul, textos brancos; botão azul-escuro */
html:root #siteHeader, html:root #siteHeader.scrolled, html:root #siteHeader.solid { background: #006E83 !important; border-bottom: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:root body #siteHeader::before { background: #006E83 !important; }
html:root #siteHeader .brand-name, html:root #siteHeader .nav-links a, html:root #siteHeader .troca-idioma .idioma-atual { color: #fff !important; }
html:root #siteHeader .brand-name span { color: #F8F6F2 !important; }   /* 31/10 (Nayara): marfim, sem azul-bebê */
html:root #siteHeader .nav-links a:hover, html:root #siteHeader .nav-links a.active { color: #fff !important; text-decoration: none !important; }
html:root #siteHeader .nav-links a::after { display: none !important; }   /* 31/10/2026 (Nayara): menu sem sublinhado; ao passar o mouse fica só o efeito na palavra */
html:root #siteHeader .hamburger span { background: #fff !important; }
html:root #siteHeader .btn-gold { background: #fff !important; color: #006E83 !important; border-color: #fff !important; }
@media (max-width: 420px) { html:root body .planner-aviso { padding-right: 10px !important; gap: 6px !important; letter-spacing: -.1px; } html:root body .planner-aviso .raio { width: 26px !important; height: 26px !important; font-size: 14px !important; } }
@media (min-width: 360px) and (max-width: 999px) { html:root body .planner-head .planner-aviso { white-space: nowrap !important; width: auto !important; max-width: 100%; justify-self: center !important; display: inline-flex !important; } }

/* 30/10/2026 · paleta "azul do logo + preto": letras e títulos em preto; o azul do logo fica para o topo, os botões e os links; faixas no bege */
html:root .gerador h1, html:root .gerador h2, html:root .card .corpo h3, html:root .cal-titulo, html:root .gerador .montamos h3, html:root .panel h2, html:root .how3 h2, html:root .planner-head h2, html:root body .planner .planner-head h2, html:root body .gerador-topo h1 { color: #1A1A1A !important; }
html:root footer { background: #004E5D !important; }
html:root .mini-planner .btn-gold, html:root .mini-planner-form .btn-gold { background: #006E83 !important; color: #fff !important; border-color: #006E83 !important; }
html:root .mini-planner .btn-gold:hover, html:root .mini-planner-form .btn-gold:hover { background: #004E5D !important; }

/* 30/10/2026 · SITE MAIS NATURAL (menos "cara de IA"), inspirado nas agências de esqui de luxo:
   sem ícones decorativos, sem selo com raio, sem bolhas na capa, um botão só flutuando de cada lado */
html:root .stat-icon, html:root .feature-icon, html:root .service-icon { display: none !important; }
html:root .capa-bolhas { display: none !important; }   /* 30/10: sem as bolhas, o quadro "Monte sua viagem" sobe até a ponta dos esquis (o script da capa usa a altura delas = 0) */
html:root .instagram-float, html:root .barra-cel .bc-insta { display: none !important; }   /* o Instagram fica no menu e no rodapé */
html:root .aviso-topo, html:root body .planner-head .planner-aviso { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #2A2A2A !important; font-weight: 400 !important; }
html:root .aviso-topo .raio { display: none !important; }

/* Por que viajar com a Encantos de Neve: a foto da Nayara de um lado, os motivos do outro, sem ícones */
html:root .porque { background: #F8F6F2 !important; padding: 88px 0; }
.porque-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.porque-foto { margin: 0; position: sticky; top: 110px; }
.porque-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 4px; display: block; }
.porque-foto figcaption { margin-top: 10px; font-size: 14px; color: #2A2A2A; }
.porque-txt .section-title { margin-bottom: 28px; }
.porque-lista { margin: 0; display: grid; gap: 0; }
.porque-lista > div { padding: 18px 0; border-top: 1px solid #DCD3C4; }
.porque-lista > div:last-child { border-bottom: 1px solid #DCD3C4; }
.porque-lista dt { font-weight: 600; color: #1A1A1A; font-size: 18px; margin-bottom: 4px; }
.porque-lista dd { margin: 0; color: #2A2A2A; font-size: 17px; line-height: 1.6; }
.porque-link { display: inline-block; margin-top: 24px; color: #006E83; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.porque-link:hover { color: #004E5D; }
@media (max-width: 860px) {
  html:root .porque { padding: 56px 0; }
  .porque-grade { grid-template-columns: 1fr; gap: 28px; }
  .porque-foto { position: static; max-width: 420px; }
  .porque-foto img { aspect-ratio: 1 / 1; }
}

/* 30/10/2026 · 1º PASSO DO GERADOR e quadro "Monte sua viagem" da página inicial, no estilo das agências profissionais:
   frase que tranquiliza, bloco branco limpo, nomes dos campos em preto, "sem datas" como link, Continuar logo abaixo, uma linha de confiança */
html:root .aviso-topo, html:root body .planner-head .planner-aviso { white-space: normal !important; font-size: 16px !important; line-height: 1.5 !important; max-width: 640px; text-wrap: balance; }
html:root .confianca-linha { margin: 14px 0 0; font-size: 14px; color: #2A2A2A; line-height: 1.5; }
html:root .planner-card .confianca-linha { text-align: left; }
html:root .planner-field label, html:root .planner-field .pl-rot, html:root body .gerador .campo, html:root body .gerador .pq-rot, html:root body .gerador .rot-campo { color: #1A1A1A !important; }
html:root .planner-card { border-top: 0 !important; }
html:root .planner-card::before { display: none !important; }

/* gerador, 1º passo */
html:root body.ger-passo1 .gerador .topo-whats { display: none !important; }
html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) { background: #fff !important; border: 1px solid #DCD3C4 !important; border-top: 1px solid #DCD3C4 !important; box-shadow: none !important; border-radius: 12px !important; }
html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario)::before { display: none !important; }
/* 29/10/2026: "Ainda sem datas?" voltou a ser botão (branco, borda azul), para quem vem do anúncio só querendo ver um exemplo */
html:root body.ger-passo1 .gerador .btn-semana-ex { background: #fff !important; border: 1.5px solid #006E83 !important; color: #006E83 !important; font-weight: 600 !important; border-radius: 10px !important; min-height: 46px !important; width: 100% !important; text-decoration: none !important; white-space: normal !important; }
html:root body.ger-passo1 .gerador .confianca-linha { grid-column: 1 / -1; }
/* o Continuar fica logo abaixo do bloco, e não preso no rodapé da tela */
html:root body.ger-passo1 .gerador .barra { position: static !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html:root body.ger-passo1 .gerador .barra .resumo-curto { display: none !important; }
html:root body.ger-passo1 .gerador .barra .botoes { width: 100%; justify-content: flex-end; }
@media (max-width: 999px) { html:root body.ger-passo1 .gerador .barra .botoes { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } html:root body.ger-passo1 .gerador .barra #avancar:not(.x):not(.y):not(.z) { width: 100% !important; flex: 1 1 100% !important; } }
/* estação escolhida: foto pequena e uma frase */
.est-escolhida { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding-top: 14px; border-top: 1px solid #EDE7DC; }
.est-escolhida img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.est-escolhida b { color: #1A1A1A; font-size: 16px; }
.est-escolhida .muted { color: #2A2A2A; font-size: 14px; }
.est-escolhida p { margin: 2px 0 0; color: #2A2A2A; font-size: 15px; line-height: 1.45; }
/* no computador, os quatro campos numa linha só, como na página inicial */
@media (min-width: 1000px) {
  html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) { display: grid !important; grid-template-columns: 1.3fr 1.5fr 1fr 1fr; gap: 14px 12px; align-items: end; }
  html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) > .grade.g2, html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) > .pessoas-duas { display: contents !important; }
  html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) .idades, html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) .btn-semana-ex { grid-column: 1 / -1; }
  html:root body.ger-passo1 .gerador .barra .wrap { max-width: 1080px; }
  html:root body.ger-passo1 .gerador .barra .botoes { max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; display: flex !important; justify-content: flex-end !important; }
  html:root body.ger-passo1 .gerador .barra #avancar:not(.x):not(.y):not(.z) { width: auto !important; min-width: 240px !important; flex: 0 0 auto !important; padding-left: 40px !important; padding-right: 40px !important; }
}
/* etapas: no celular, só "Etapa 1 de 5 · Sua viagem" com uma barrinha de progresso */
@media (max-width: 760px) {
  html:root .gerador .etapas { display: block !important; position: relative; padding-bottom: 10px !important; overflow: visible !important; }
  html:root .gerador .etapas button:not([aria-current]) { display: none !important; }
  html:root .gerador .etapas button[aria-current] { display: inline-flex !important; gap: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; color: #1A1A1A !important; font-size: 15px !important; }
  html:root .gerador .etapas button[aria-current] .n { all: unset; font-weight: 400; color: #2A2A2A; }
  html:root .gerador .etapas button[aria-current] .n::before { content: "Etapa "; }
  html:root .gerador .etapas button[aria-current] .n::after { content: " de 5 · "; }
  html:root .gerador .etapas button[aria-current] .txt { font-weight: 600; display: inline !important; }
  html:root .gerador .etapas::before, html:root .gerador .etapas::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; }
  html:root .gerador .etapas::before { right: 0; background: #EDE7DC; }
  html:root .gerador .etapas::after { width: 20%; background: #006E83; }
  html:root .gerador .etapas:has(button:nth-child(2)[aria-current])::after { width: 40%; }
  html:root .gerador .etapas:has(button:nth-child(3)[aria-current])::after { width: 60%; }
  html:root .gerador .etapas:has(button:nth-child(4)[aria-current])::after { width: 80%; }
  html:root .gerador .etapas:has(button:nth-child(5)[aria-current])::after { width: 100%; }
}
html:root body .gerador-topo .aviso-topo { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
@media (max-width: 760px) { html:root .gerador .etapas button[aria-current] .n::after { content: " de 5 ·\00a0"; } }

/* 30/10/2026 · gerador sem verde (só o WhatsApp continua verde, que é a cor dele) e caixas sem a faixa azul em cima, em todas as etapas */
html:root body .gerador .cartao, html:root body .gerador .bloco { border: 1px solid #DCD3C4 !important; border-top: 1px solid #DCD3C4 !important; box-shadow: none !important; }
html:root body .gerador .cartao::before, html:root body .gerador .bloco::before { display: none !important; }

/* 30/10/2026 · leitura mais firme (comparando com a Ski Solutions): textos quase pretos e títulos em Cormorant mais encorpado */
html:root .section-title, html:root .gerador-topo h1, html:root .planner-head h2, html:root .page-hero h1, html:root .hero h1 { font-weight: 600 !important; }
html:root .perfil-txt h3, html:root .service-card h3, html:root .dest-card h3 { font-size: 22px !important; font-weight: 700 !important; }
html:root .perfil-txt p, html:root .section-sub, html:root .porque-lista dd, html:root .service-card p { color: #2A2A2A !important; }
/* sem o ícone, os cartões voltam a ser uma coluna só (no celular eram uma grade ícone + texto e as letras se misturavam) */
html:root .service-card { display: block !important; }
html:root .feature-item, html:root .stat-item { grid-template-columns: 1fr !important; }

/* 30/10/2026 · rodapé: pagamento seguro e formas de pagamento, discreto (sem logos coloridos) */
.footer-pagamento { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 18px 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.18); }
.footer-pagamento .fp-seguro { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 500; }
.footer-pagamento .fp-marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-pagamento .fp-marcas span { display: inline-block; padding: 4px 10px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
@media (max-width: 600px) { .footer-pagamento { justify-content: flex-start; } }
/* "Pagamento seguro" no fim do orçamento (resumo do gerador) */
html:root .gerador .pag-seguro { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #EDE7DC; }
html:root .gerador .pag-seguro .ps-tit { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #1A1A1A; font-size: 15px; }
html:root .gerador .pag-seguro .ps-tit svg { color: #006E83; }
html:root .gerador .pag-seguro .ps-marcas { display: flex; flex-wrap: wrap; gap: 6px; }
html:root .gerador .pag-seguro .ps-marcas span { padding: 3px 9px; border: 1px solid #DCD3C4; border-radius: 6px; background: #fff; color: #1A1A1A; font-size: 13px; font-weight: 600; }
html:root .footer-pagamento .fp-marcas img, html:root .gerador .pag-seguro .ps-marcas img { width: 48px; height: 32px; display: block; border-radius: 4px; }
html:root .footer-pagamento .fp-marcas { gap: 6px; align-items: center; }
html:root .gerador .pag-seguro { margin: 14px 0; padding: 14px 0; border-top: 1px solid #EDE7DC; border-bottom: 1px solid #EDE7DC; }
html:root .gerador .pag-seguro .ps-txt { margin: 0; font-size: 14px; color: #2A2A2A; }

/* 30/10/2026 · "Montamos a viagem com você": WhatsApp e e-mail no mesmo padrão (mesmo tamanho e formato; o e-mail como o Voltar: branco com borda azul) */
html:root .gerador .botoes-montamos { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px !important; }
html:root .gerador .botoes-montamos .btn { flex: 1 1 200px; max-width: 280px; min-height: 52px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; padding: 12px 20px !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; text-decoration: none; }
html:root .gerador .botoes-montamos .btn:not(.sec) { background: #006E83 !important; color: #fff !important; border: 1.5px solid #006E83 !important; }
html:root .gerador .botoes-montamos .btn.sec { background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; }
@media (max-width: 560px) { html:root .gerador .botoes-montamos .btn { flex-basis: 100%; max-width: none; } }
/* mesmo padrão sempre: botão principal azul cheio; botão secundário branco com borda azul (Voltar, Alterar, Enviar e-mail, Montar a viagem…) */
html:root body .gerador .btn.sec:not(.x) { background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; box-shadow: none !important; border-radius: 10px !important; }
html:root body .gerador .btn.sec:not(.x):hover { background: #F8F6F2 !important; }
html:root body .btn-teal:not(.x) { background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; box-shadow: none !important; border-radius: 10px !important; }
html:root body .btn-teal:not(.x):hover { background: #F8F6F2 !important; }

/* 30/10/2026 · botões menores e lado a lado no "Montamos a viagem com você" (também no celular) */
html:root .gerador .botoes-montamos { flex-wrap: nowrap !important; }
html:root .gerador .botoes-montamos .btn { flex: 0 1 auto !important; max-width: none !important; min-height: 42px !important; padding: 9px 18px !important; font-size: 15px !important; white-space: nowrap; }
@media (max-width: 560px) { html:root .gerador .botoes-montamos .btn { flex: 1 1 0 !important; padding: 9px 10px !important; font-size: 14px !important; } }

/* abas Todas / Apartamentos / Chalés / Hotéis: no mesmo estilo dos botões, só que menores (escolhida = azul cheio; as outras = branco com borda azul) */
html:root .gerador .abas-tipo { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; background: none !important; border: 0 !important; padding: 0 !important; }
html:root .gerador .abas-tipo button { border-radius: 8px !important; min-height: 36px; padding: 6px 14px !important; font-size: 14px !important; font-weight: 600 !important; background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; box-shadow: none !important; }
html:root .gerador .abas-tipo button[aria-pressed="true"] { background: #006E83 !important; color: #fff !important; }

/* 30/10/2026 · "Monte sua viagem" maior e a frase "Orçamento em poucos cliques, com o preço na hora." em destaque (azul do logo, mais forte) */
html:root body .planner .planner-head h2, html:root body .gerador-topo h1 { font-size: 38px !important; line-height: 1.08 !important; white-space: normal !important; }
@media (min-width: 600px) { html:root body .planner .planner-head h2, html:root body .gerador-topo h1 { font-size: 42px !important; } }
@media (min-width: 1000px) { html:root body .planner .planner-head h2, html:root body .gerador-topo h1 { font-size: 46px !important; } }
@media (max-width: 350px) { html:root body .planner .planner-head h2, html:root body .gerador-topo h1 { font-size: 32px !important; } }
html:root body .planner-head .planner-aviso, html:root body .gerador-topo .aviso-topo { color: #006E83 !important; font-weight: 600 !important; font-size: 18px !important; line-height: 1.4 !important; max-width: none !important; text-wrap: pretty; margin-top: 6px !important; }
@media (min-width: 1000px) { html:root body .planner-head .planner-aviso, html:root body .gerador-topo .aviso-topo { font-size: 19px !important; } }
html:root .aviso-topo .nq { display: inline-block; }   /* a frase quebra só depois da vírgula */

/* 30/10/2026 · todas as caixas de preenchimento com a mesma borda (cinza neutro, nada de bege/dourado): estação, datas, adultos, crianças, idades e o formulário do pedido */
html:root body .planner-form select, html:root body .planner-form .pl-datas, html:root body .planner-form .pl-cont, html:root body .planner-ages select,
html:root body .gerador select, html:root body .gerador .campo-datas, html:root body .gerador .pq-cont, html:root body .gerador input[type=text], html:root body .gerador input[type=email], html:root body .gerador input[type=tel], html:root body .gerador textarea,
html:root body .mini-planner select, html:root body .mini-planner .pl-datas, html:root body .mini-planner .pl-cont { border: 1px solid #CDD3D6 !important; border-radius: 8px !important; box-shadow: none !important; }
html:root body .planner-form .planner-field { border-color: #CDD3D6 !important; }
/* a frase do Monte sua viagem: bloco normal, quebra só depois da vírgula */
html:root body .planner-head .planner-aviso, html:root body .gerador-topo .aviso-topo { display: block !important; text-align: center !important; }
@media (min-width: 1000px) { html:root body .planner-head .planner-aviso { text-align: left !important; } }

/* 30/10/2026 · todas as escolhas do gerador no mesmo padrão dos botões (cantos de 8 px; não escolhida = branco com borda azul; escolhida = azul cheio):
   Quem vai esquiar / Quem vai ter aula (Todos, Ninguém, Escolher quem), Ida e volta, Incluir / Não incluir e as outras opções em pílula */
html:root body .gerador .qf3-op, html:root body .gerador .qf2-ops button, html:root body .gerador .seg button, html:root body .gerador .incluir-btns .btn, html:root body .gerador .chip, html:root body .gerador .op-pill {
  border-radius: 8px !important; background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; box-shadow: none !important; font-weight: 600 !important; }
html:root body .gerador .qf3-op.on, html:root body .gerador .qf2-ops button.on, html:root body .gerador .qf2-ops button[aria-pressed="true"], html:root body .gerador .seg button.on, html:root body .gerador .seg button[aria-pressed="true"],
html:root body .gerador .incluir-btns .btn.escolhido, html:root body .gerador .incluir-btns .btn.nao-escolhido, html:root body .gerador .incluir-btns .btn[aria-pressed="true"] { background: #006E83 !important; color: #fff !important; }
/* −/+ dos dias de ski pass: sem círculo, como Adultos e Crianças */
html:root body .gerador .cont button { border: 0 !important; background: none !important; color: #006E83 !important; box-shadow: none !important; font-weight: 700 !important; font-size: 22px !important; }
html:root body .gerador .cont button:disabled { color: #B8C0C4 !important; }
html:root body .gerador .cont { border: 1px solid #CDD3D6; border-radius: 8px; padding: 2px 6px; }
/* caixas do gerador com a mesma borda cinza das caixas de preenchimento (sem bege) */
html:root body .gerador .cartao, html:root body .gerador .bloco { border-color: #CDD3D6 !important; }

/* 30/10/2026 · sem setinhas: os links "Ver opções", "Conheça quem somos", "Ver modelos"… viram botões pequenos (branco com borda azul), iguais aos outros botões */
html:root body .card-link, html:root body .porque-link { display: inline-flex !important; align-items: center; justify-content: center; margin-top: 14px !important; padding: 8px 16px !important; min-height: 38px; border: 1.5px solid #006E83 !important; border-radius: 8px !important; background: #fff !important; color: #006E83 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; letter-spacing: normal !important; }
html:root body a:hover > .card-link, html:root body .porque-link:hover { background: #006E83 !important; color: #fff !important; }
html:root body .dc-arrow { display: none !important; }
/* "0 alunos", "2 pessoas": é só informação, não é botão — texto simples */
html:root body .gerador .qtd-serv { border: 0 !important; background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #2A2A2A !important; font-weight: 500 !important; font-size: 14px !important; }

/* 30/10/2026 · menos caixas: moldura só no que se preenche ou se clica. Informação vira texto simples */
html:root body .gerador .serv-resumo { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 !important; border-radius: 0 !important; }
html:root body .gerador .lembrete-pagar { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
html:root body .gerador .vazio:not(.montamos) { border: 0 !important; background: none !important; box-shadow: none !important; }
html:root body .gerador .aviso, html:root body .gerador .aviso-info, html:root body .gerador .nota-box { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* 30/10/2026 · o mesmo efeito em TODOS os botões ao passar o mouse ou tocar:
   botão branco com borda azul → fica azul cheio com letra branca; botão azul → fica no azul mais escuro do logo */
html:root body .gerador .btn.sec:not(.x):hover, html:root body .gerador .btn.sec:not(.x):active,
html:root body .btn-teal:not(.x):hover, html:root body .btn-teal:not(.x):active,
html:root body a:hover > .card-link, html:root body a:active > .card-link, html:root body .card-link:hover,
html:root body .porque-link:hover, html:root body .porque-link:active,
html:root body .gerador .abas-tipo button:hover, html:root body .gerador .abas-tipo button:active,
html:root body .gerador .qf3-op:hover, html:root body .gerador .qf3-op:active,
html:root body .gerador .qf2-ops button:hover, html:root body .gerador .seg button:hover, html:root body .gerador .seg button:active,
html:root body .gerador .incluir-btns .btn:hover, html:root body .gerador .incluir-btns .btn:active,
html:root body .gerador .botoes-montamos .btn.sec:hover, html:root body .gerador .botoes-montamos .btn.sec:active,
html:root body .gerador .barra #voltar:hover, html:root body .gerador .barra #voltar:active {
  background: #006E83 !important; color: #fff !important; border-color: #006E83 !important; }
html:root body .btn:not(.sec):not(.btn-teal):not(.btn-outline):hover, html:root body .btn:not(.sec):not(.btn-teal):not(.btn-outline):active,
html:root body .gerador .barra #avancar:hover, html:root body .gerador .barra #avancar:active,
html:root body .gerador .botoes-montamos .btn:not(.sec):hover, html:root body .gerador .botoes-montamos .btn:not(.sec):active,
html:root body .gerador .abas-tipo button[aria-pressed="true"]:hover, html:root body .gerador .qf3-op.on:hover {
  background: #004E5D !important; color: #fff !important; border-color: #004E5D !important; }
html:root body .btn, html:root body .card-link, html:root body .porque-link, html:root body .gerador .qf3-op, html:root body .gerador .abas-tipo button, html:root body .gerador .seg button, html:root body .gerador .incluir-btns .btn {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease !important; }
html:root body .btn:active, html:root body .card-link:active, html:root body .gerador .qf3-op:active, html:root body .gerador .abas-tipo button:active { transform: scale(.97); }
@media (hover: none) { html:root body .btn, html:root body .gerador button { -webkit-tap-highlight-color: transparent; } }

/* 30/10/2026 · ESCALA DE LETRAS (padrão das agências de referência). Computador / celular:
   capa 52/36 · títulos de seção 40/30 · títulos de caixa 24/21 · texto 18/17 · botões 16 · letras pequenas 14 (nunca < 13) */
html:root { --t-capa: 52px; --t-sec: 40px; --t-sub: 24px; --t-txt: 18px; --t-pq: 14px; }
@media (max-width: 999px) { html:root { --t-capa: 44px; --t-sec: 34px; --t-sub: 22px; --t-txt: 17px; } }
@media (max-width: 560px) { html:root { --t-capa: 36px; --t-sec: 30px; --t-sub: 21px; --t-txt: 17px; } }
/* capa e topo das páginas */
html:root body .hero h1, html:root body .page-hero h1 { font-size: var(--t-capa) !important; line-height: 1.1 !important; }
/* títulos de seção (eram do tamanho da capa) */
html:root body .section-title, html:root body .gerador h2, html:root body .gerador .cab h2 { font-size: var(--t-sec) !important; line-height: 1.15 !important; }
/* títulos de caixa */
html:root body .perfil-txt h3, html:root body .service-card h3, html:root body .dest-card h3, html:root body .porque-lista dt, html:root body .gerador h3, html:root body .card .corpo h3, html:root body .feature-item h4, html:root body .trust-item h4 { font-size: var(--t-sub) !important; line-height: 1.25 !important; }
html:root body .porque-lista dt { font-size: 19px !important; }
/* texto corrido: 18/17 px, entrelinha 1,6 e no máximo ~70 letras por linha */
html:root body p, html:root body li, html:root body dd { line-height: 1.6; }
html:root body .section-sub, html:root body .perfil-txt p, html:root body .service-card p, html:root body .porque-lista dd, html:root body .feature-item p, html:root body .hero p.lead, html:root body .page-hero p.lead, html:root body .container > p, html:root body article p { font-size: var(--t-txt) !important; line-height: 1.6 !important; }
html:root body .section-sub, html:root body .container > p, html:root body article p { max-width: 70ch; }
html:root body .center .section-sub, html:root body .section-sub[style*="margin:0 auto"] { margin-left: auto !important; margin-right: auto !important; }
/* botões: 16 px em todos */
html:root body .btn, html:root body .card-link, html:root body .porque-link, html:root body .gerador .btn, html:root body .gerador .barra .btn, html:root body .gerador .qf3-op, html:root body .gerador .seg button, html:root body .gerador .incluir-btns .btn, html:root body .planner-form button[type=submit] { font-size: 16px !important; }
html:root body .gerador .abas-tipo button { font-size: 15px !important; }
/* letras pequenas nunca abaixo de 13 px */
html:root body small, html:root body .small, html:root body .legenda, html:root body .footer-legal, html:root body .confianca-linha { font-size: max(13px, 0.875rem) !important; }
html:root body .btn, html:root body .card-link, html:root body .porque-link { white-space: nowrap; }   /* botão nunca quebra em duas linhas */
html:root body .barra-cel .bc-monte { white-space: nowrap; }  @media (max-width: 360px) { html:root body .barra-cel .bc-monte { font-size: 15px !important; } html:root body .barra-cel .bc-seta { display: none !important; } }

/* 30/10/2026 · celular: quadro "Monte sua viagem" mais compacto, título e frase à esquerda, menos espaço até "Qual é a sua viagem?" */
@media (max-width: 999px) {
  html:root body .planner .planner-head, html:root body .planner .planner-head > div { text-align: left !important; justify-items: start !important; align-items: flex-start !important; }
  html:root body .planner .planner-head h2 { text-align: left !important; margin: 0 !important; }
  html:root body .planner-head .planner-aviso { text-align: left !important; margin: 4px 0 0 !important; justify-self: start !important; }
  html:root body .planner-card { padding-top: 20px !important; padding-bottom: 18px !important; }
  html:root body .planner-form { margin-top: 12px !important; }
  html:root body .planner-form .planner-field label, html:root body .planner-form .pl-rot { margin-bottom: 4px !important; }
  html:root body .planner .confianca-linha { margin-top: 10px !important; }
  html:root body section.planner { padding-bottom: 8px !important; margin-bottom: 0 !important; }
  html:root body #perfis { padding-top: 28px !important; }
}
/* 30/10/2026 · celular: quadro ainda mais compacto (menos espaço entre título, frase, rótulos e campos) */
@media (max-width: 999px) {
  html:root body .planner .planner-head, html:root body .planner .planner-head > div { gap: 0 !important; row-gap: 0 !important; }
  html:root body .planner-card { padding: 16px 16px 14px !important; }
  html:root body .planner-form { gap: 8px !important; row-gap: 8px !important; margin-top: 10px !important; }
  html:root body .planner-form .planner-field { gap: 3px !important; }
  html:root body .planner-form .planner-field label, html:root body .planner-form .pl-rot { margin: 0 0 3px !important; line-height: 1.2 !important; }
  html:root body .planner-form select, html:root body .planner-form .pl-datas, html:root body .planner-form .pl-cont { height: 44px !important; min-height: 44px !important; }
  html:root body .planner-form button[type=submit] { min-height: 46px !important; height: 46px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html:root body .planner .confianca-linha { margin-top: 8px !important; }
}

/* 30/10/2026 · GERADOR: topo compacto ("de trabalho", como Booking/Club Med na hora de reservar):
   sem o espaço vazio, título menor e à esquerda, a frase logo embaixo, as etapas logo depois e a caixa compacta */
html:root body .gerador-topo { padding-top: calc(var(--hdr, 76px) + 10px) !important; padding-bottom: 0 !important; }
html:root body .gerador-topo .dentro { max-width: 1080px; margin: 0 auto; padding: 0 16px 8px !important; text-align: left !important; }
html:root body .gerador-topo h1 { font-size: 38px !important; line-height: 1.08 !important; text-align: left !important; margin: 0 !important; }   /* mesmo tamanho do quadro da página inicial */
html:root body .gerador-topo .aviso-topo { text-align: left !important; margin: 2px 0 0 !important; }
@media (min-width: 600px) { html:root body .gerador-topo h1 { font-size: 42px !important; } } @media (min-width: 1000px) { html:root body .gerador-topo h1 { font-size: 46px !important; } html:root body .gerador-topo .dentro { padding-bottom: 12px !important; } }
html:root body .gerador #app { padding-top: 14px !important; padding-bottom: 20px !important; }
html:root body.ger-passo1 .gerador #app .passo > .cartao.grade:not(#calendario) { padding: 16px !important; gap: 10px !important; }
html:root body.ger-passo1 .gerador .grade.g2 { gap: 10px !important; }
html:root body.ger-passo1 .gerador .campo, html:root body.ger-passo1 .gerador .pq-campo { gap: 3px !important; }
html:root body.ger-passo1 .gerador select[data-destino], html:root body.ger-passo1 .gerador .campo-datas, html:root body.ger-passo1 .gerador .pq-cont { min-height: 44px !important; height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html:root body.ger-passo1 .gerador .pessoas-duas { gap: 10px !important; }
.est-escolhida { padding-top: 10px !important; gap: 12px !important; }
.est-escolhida img { width: 72px !important; height: 54px !important; }
.est-escolhida p { font-size: 15px !important; }
html:root body.ger-passo1 .gerador .confianca-linha { margin-top: 4px !important; }
html:root body.ger-passo1 .gerador .barra .wrap { padding-top: 0 !important; }

/* RODAPÉ compacto (menos espaço sobrando) */
html:root body footer, html:root body .site-footer { padding: 28px 0 16px !important; }
html:root body .footer-top { gap: 18px !important; padding-bottom: 16px !important; }
html:root body .footer-top p { margin: 8px 0 0 !important; }
html:root body .footer-logo { max-height: 44px; width: auto; }
html:root body .footer-col h5 { margin: 0 0 8px !important; }
html:root body .footer-col li { margin: 0 0 4px !important; line-height: 1.35 !important; }
html:root body .footer-col li a { padding: 2px 0 !important; display: inline-block; }
html:root body .footer-bottom { padding-top: 12px !important; gap: 4px !important; }
html:root body .footer-legal { gap: 2px 12px !important; line-height: 1.45 !important; }
html:root body .gerador-topo .dentro { justify-items: start !important; }
html:root body .footer-col ul { row-gap: 2px !important; gap: 2px 16px !important; }
html:root body .footer-col li { margin: 0 !important; }
html:root body .footer-col li a { padding: 3px 0 !important; }

/* 30/10/2026 · botões das hospedagens e dos hotéis no mesmo modelo dos outros:
   ação principal (Ver quartos, Escolher, Escolher este quarto) = azul cheio, cantos de 10 px, 46 px de altura;
   Ver detalhes = branco com borda azul; opções de refeição e tarifa = como Todos/Ninguém (branco com borda azul; escolhida = azul cheio) */
html:root body .gerador .card .acoes .btn, html:root body .gerador .quarto .btn, html:root body #dlg .quarto .btn {
  border-radius: 10px !important; min-height: 46px !important; height: auto !important; padding: 10px 18px !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; }
html:root body .gerador .card .acoes .btn[data-ver-hotel], html:root body .gerador .card .acoes .btn[data-escolher], html:root body .gerador .quarto .btn, html:root body #dlg .quarto .btn {
  background: #006E83 !important; color: #fff !important; border: 1.5px solid #006E83 !important; }
html:root body .gerador .card .acoes .btn[data-ver] { background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; }
html:root body .gerador .card .acoes .btn[data-ver]:hover, html:root body .gerador .card .acoes .btn[data-ver]:active { background: #006E83 !important; color: #fff !important; }
html:root body .gerador .card .acoes .btn[data-ver-hotel]:hover, html:root body .gerador .card .acoes .btn[data-escolher]:hover, html:root body .gerador .quarto .btn:hover, html:root body #dlg .quarto .btn:hover,
html:root body .gerador .card .acoes .btn[data-ver-hotel]:active, html:root body .gerador .card .acoes .btn[data-escolher]:active, html:root body #dlg .quarto .btn:active { background: #004E5D !important; border-color: #004E5D !important; }
html:root body #dlg .opts button, html:root body .gerador .opts button { border-radius: 8px !important; background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; font-weight: 600 !important; font-size: 15px !important; min-height: 38px !important; padding: 6px 12px !important; box-shadow: none !important; }
html:root body #dlg .opts button[aria-pressed="true"], html:root body .gerador .opts button[aria-pressed="true"], html:root body #dlg .opts button:hover, html:root body #dlg .opts button:active { background: #006E83 !important; color: #fff !important; }
html:root body #dlg .fechar { border-radius: 8px !important; }
/* "Ver quartos" e "Escolher": mesmo canto dos outros botões e sem setinha */
html:root body .gerador .card .acoes .btn[data-ver-hotel]:not(.x):not(.y):not(.z):not(.w), html:root body #gerador .card .acoes .btn[data-escolher]:not(.x):not(.y):not(.z):not(.w),
html:root body .gerador .card .acoes .btn[data-ver]:not(.x):not(.y):not(.z):not(.w), html:root body .gerador .btn[data-escolher]:not(.x):not(.y):not(.z):not(.w) { border-radius: 10px !important; box-shadow: none !important; }
html:root body .gerador .btn[data-ver-hotel]::after, html:root body .gerador .btn[data-escolher]::after, html:root body .gerador .barra #avancar::after, html:root body .gerador .se-botoes .btn[data-ir]::after { content: none !important; display: none !important; }

/* 30/10/2026 · "Montar minha viagem" (página inicial) e "Continuar" (1º passo do gerador): do tamanho dos outros botões, não da largura toda */
@media (max-width: 999px) {
  html:root body .planner-form button[type=submit] { width: auto !important; min-width: 220px; align-self: center; justify-self: center; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important; grid-column: 1 / -1; }
  html:root body.ger-passo1 .gerador .barra #avancar:not(.x):not(.y):not(.z) { width: auto !important; flex: 0 0 auto !important; min-width: 200px !important; padding-left: 28px !important; padding-right: 28px !important; }
  html:root body.ger-passo1 .gerador .barra .botoes { justify-content: flex-end !important; }
}

/* 30/10/2026 · "Como funciona" claro (bege, letras escuras) para não emendar no rodapé azul */
html:root body .how { background: #F8F6F2 !important; color: #1A1A1A !important; }
html:root body .how .section-title { color: #1A1A1A !important; }
html:root body .how .section-sub, html:root body .how p { color: #2A2A2A !important; }
html:root body .how h3, html:root body .how h4 { color: #1A1A1A !important; }
html:root body .how .step-num { color: #006E83 !important; border-color: #006E83 !important; }
html:root body .how .step { border-color: #DCD3C4 !important; }

/* 30/10/2026 · Voltar e Continuar em TODAS as etapas: com espaço da caixa de cima e do tamanho do texto (não da largura toda) */
html:root body .gerador .barra { margin-top: 18px !important; }
html:root body .gerador .barra .botoes { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
html:root body .gerador .barra #voltar:not(.x):not(.y):not(.z), html:root body .gerador .barra #avancar:not(.x):not(.y):not(.z) {
  width: auto !important; flex: 0 0 auto !important; min-width: 0 !important; min-height: 46px !important; height: 46px !important; padding: 0 24px !important; font-size: 16px !important; border-radius: 10px !important; }
html:root body .gerador .barra #avancar:not(.x):not(.y):not(.z) { margin-left: auto !important; }
html:root body.ger-passo1 .gerador .barra #avancar:not(.x):not(.y):not(.z) { min-width: 0 !important; }
/* "Alterar" e botões pequenos dentro das caixas */
html:root body .gerador .serv-resumo .btn, html:root body .gerador .vinda .btn { min-height: 38px !important; height: 38px !important; padding: 0 14px !important; font-size: 15px !important; }

/* 30/10/2026 (a pedido): "Montar minha viagem" (página inicial) e o "Continuar" do 1º passo do gerador voltam a ser grandes, na largura toda, e o Continuar fica mais perto da caixa */
@media (max-width: 999px) {
  html:root body .planner-form button[type=submit] { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; justify-self: stretch !important; align-self: stretch !important; padding-left: 20px !important; padding-right: 20px !important; }
}
html:root body.ger-passo1 .gerador .barra { margin-top: 12px !important; }
html:root body.ger-passo1 .gerador .barra .botoes { justify-content: center !important; }
html:root body.ger-passo1 .gerador .barra #avancar:not(.x):not(.y):not(.z) { width: 100% !important; flex: 1 1 100% !important; max-width: 560px; margin: 0 auto !important; height: 52px !important; min-height: 52px !important; font-size: 17px !important; }
@media (min-width: 1000px) { html:root body.ger-passo1 .gerador .barra .botoes { justify-content: flex-end !important; } html:root body.ger-passo1 .gerador .barra #avancar:not(.x):not(.y):not(.z) { width: auto !important; flex: 0 0 auto !important; min-width: 260px !important; margin: 0 !important; } }
html:root body.ger-passo1 .gerador #app { padding-bottom: 0 !important; }   /* o Continuar logo abaixo da caixa */
/* campo que falta no quadro "Monte sua viagem": só a borda da caixa em vermelho (e o aviso embaixo) */
html:root body .planner-field.is-missing select, html:root body .planner-field.is-missing .pl-datas, html:root body .planner-field.is-missing .pl-cont { border-color: #A94A42 !important; box-shadow: 0 0 0 1px #A94A42 !important; }

/* 30/10/2026 · O MESMO DESTAQUE em tudo o que falta preencher (modelo aprovado pela Nayara: caixa rosinha, borda rosa suave, sem vermelho forte).
   Vale para a página inicial, a barrinha das outras páginas e todas as etapas do gerador */
html:root body .planner-field.is-missing select, html:root body .planner-field.is-missing .pl-datas, html:root body .planner-field.is-missing .pl-cont,
html:root body .mini-planner select.falta,
html:root body .gerador select.falta, html:root body .gerador .campo-datas.falta, html:root body .gerador .pq-campo.falta .pq-cont,
html:root body .gerador input.falta, html:root body .gerador textarea.falta, html:root body .gerador .idades select.falta, html:root body .gerador .aula-campos select.falta,
html:root body .gerador .falta-campo, html:root body .gerador .qf3-perg.falta {
  background-color: #FBECEB !important; border-color: #E5B5B0 !important; box-shadow: none !important; }
html:root body .gerador .qf3-perg.falta { border: 1px solid #E5B5B0 !important; border-radius: 10px !important; padding: 10px !important; }
html:root body .gerador .qf3-perg.falta .qf3-op { background: #fff !important; }
html:root body .gerador .bloco.falta, html:root body .gerador .cartao.serv.falta, html:root body .gerador .serv.falta, html:root body .gerador [data-falta-confirmar] {
  border-color: #E5B5B0 !important; box-shadow: 0 0 0 1px #E5B5B0 !important; background-color: #FFF8F7 !important; }
html:root body .trilho-lado { display: none !important; }   /* 30/10/2026: sem a linha embaixo das miniaturas das fotos (Ver detalhes / Ver quartos) */

/* 30/10/2026 · UM MODELO SÓ para as escolhas: "Incluir / Não incluir" (transfer, aulas…) igual a "Todos / Ninguém / Escolher quem" — vivo, sem ficar apagado */
html:root body .gerador .incluir-btns { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
html:root body .gerador .incluir-btns .btn:not(.x):not(.y) { opacity: 1 !important; filter: none !important; min-height: 44px !important; height: auto !important; padding: 8px 16px !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important;
  background: #fff !important; color: #006E83 !important; border: 1.5px solid #006E83 !important; box-shadow: none !important; }
html:root body .gerador .incluir-btns .btn.escolhido:not(.x):not(.y), html:root body .gerador .incluir-btns .btn.nao-escolhido:not(.x):not(.y), html:root body .gerador .incluir-btns .btn[aria-pressed="true"]:not(.x):not(.y) { background: #006E83 !important; color: #fff !important; }
@media (max-width: 560px) { html:root body .gerador .incluir-btns .btn:not(.x):not(.y) { flex: 1 1 0 !important; } }

/* no celular o "passar o mouse" não existe: depois do toque o botão volta à cor normal (antes o Voltar ficava preso no azul escuro) */
@media (hover: none) {
  html:root body .gerador .barra #voltar:hover:not(:active), html:root body .gerador .btn.sec:not(.x):hover:not(:active):not(.escolhido):not(.nao-escolhido):not([aria-pressed="true"]),
  html:root body .btn-teal:not(.x):hover:not(:active), html:root body a:hover:not(:active) > .card-link, html:root body .porque-link:hover:not(:active),
  html:root body .gerador .qf3-op:not(.on):hover:not(:active), html:root body .gerador .abas-tipo button[aria-pressed="false"]:hover:not(:active),
  html:root body .gerador .seg button:not(.on):not([aria-pressed="true"]):hover:not(:active), html:root body .gerador .incluir-btns .btn:not(.escolhido):not(.nao-escolhido):not([aria-pressed="true"]):hover:not(:active),
  html:root body #dlg .opts button:not([aria-pressed="true"]):hover:not(:active), html:root body .gerador .card .acoes .btn[data-ver]:hover:not(:active), html:root body .gerador .botoes-montamos .btn.sec:hover:not(:active) {
    background: #fff !important; color: #006E83 !important; border-color: #006E83 !important; }
  html:root body .gerador .barra #avancar:hover:not(:active), html:root body .btn:not(.sec):not(.btn-teal):not(.btn-outline):hover:not(:active) { background-color: #006E83 !important; border-color: #006E83 !important; }
}
html:root body #gerador .incluir-btns .btn:not(.x):not(.y):not(.z) { opacity: 1 !important; filter: none !important; }
html:root body #gerador .incluir-btns .btn.apagado:not(.x):not(.y):not(.z) { opacity: 1 !important; }

/* 30/10/2026 · o destaque rosinha não mexe em nada do lugar: a pergunta já tem sempre o mesmo espaço e a borda (transparente); quando falta, só muda a cor */
html:root body .gerador .qf3-perg { border: 1px solid transparent !important; border-radius: 10px !important; padding: 10px !important; margin: -10px !important; }
html:root body .gerador .qf3-perg.falta { border-color: #E5B5B0 !important; padding: 10px !important; margin: -10px !important; }
/* Voltar e Continuar: mais perto da caixa e um pouco maiores */
html:root body .gerador #app { padding-bottom: 0 !important; }
html:root body .gerador .barra { margin-top: 14px !important; }
html:root body .gerador .barra #voltar:not(.x):not(.y):not(.z), html:root body .gerador .barra #avancar:not(.x):not(.y):not(.z) { height: 50px !important; min-height: 50px !important; padding: 0 28px !important; font-size: 17px !important; }
html:root body .gerador .motivo-avancar { margin-top: 10px !important; }
/* 30/10/2026 · nenhum botão com sublinhado (ex.: "Ver detalhes") */
html:root body .btn, html:root body .btn *, html:root body .gerador button, html:root body .gerador button *, html:root body .card-link, html:root body .porque-link { text-decoration: none !important; }
html:root body .gerador .btn::after, html:root body .gerador .btn::before { border-bottom: 0 !important; }

/* 30/10/2026 · barra do celular com o botão único de contato: "Monte sua viagem" ocupa o espaço e o botão redondo fica à direita */
@media (max-width: 760px) {
  html:root body .barra-cel { display: grid !important; grid-template-columns: 1fr auto !important; gap: 10px !important; }
  html:root body .barra-cel .bc-monte { grid-column: 1 !important; width: auto !important; max-width: none !important; justify-self: stretch !important; }
  html:root body .barra-cel .bc-contato { grid-column: 2 !important; }
  html:root body .barra-cel.sem-monte { grid-template-columns: 1fr auto !important; }
  html:root body .barra-cel.sem-monte .bc-contato { grid-column: 2 !important; }
}

/* 30/10/2026 · celular: no começo da página a barra de baixo fica só com o botão de contato; o "Monte sua viagem" aparece ao rolar, subindo suave */
@media (max-width: 760px) {
  html:root body .barra-cel .bc-monte { transition: opacity .35s ease, transform .35s ease; }
  html:root body.com-barra-cel .barra-cel.cedo { background: transparent !important; border-top-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; pointer-events: none; }
  html:root body.com-barra-cel .barra-cel.cedo > * { pointer-events: auto; }
  html:root body.com-barra-cel .barra-cel.cedo .bc-monte, html:root body.com-barra-cel .barra-cel.sem-monte .bc-monte { visibility: visible !important; opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none !important; }
}
/* 30/10/2026 · botão de contato (foto/WhatsApp/Instagram) um pouco maior */
@media (max-width: 760px) { html:root body .barra-cel .bc-contato { width: 56px !important; height: 56px !important; } }
html:root body #ajudaBtn { width: 68px !important; height: 68px !important; }
html:root body #ajudaBtn .bal { right: 80px !important; }
html:root body #contatoMenu { bottom: 102px !important; }
html:root body.com-barra-cel #contatoMenu { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
/* 30/10/2026 · o brilho que passa no "Monte sua viagem" (celular) só passa duas vezes e para */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { html:root body .barra-cel .bc-monte::before { animation-iteration-count: 2 !important; animation-fill-mode: forwards !important; } }
/* o brilho começa quando o botão aparece (depois de rolar), e não ao abrir a página */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html:root body .barra-cel.cedo .bc-monte::before, html:root body .barra-cel.sem-monte .bc-monte::before { animation: none !important; }
  html:root body .barra-cel:not(.cedo):not(.sem-monte) .bc-monte::before { animation: brilhoNeve 4.5s ease-in-out .4s 2 forwards !important; }
}
/* 30/10/2026 (a pedido): SEM o brilho passando no "Monte sua viagem" — o destaque fica pela cor cheia do botão */
html:root body .barra-cel .bc-monte::before, html:root body .barra-cel:not(.cedo):not(.sem-monte) .bc-monte::before { animation: none !important; display: none !important; content: none !important; }
/* 30/10/2026 · computador: no quadro "Monte sua viagem" cada campo é UMA caixa só (o nome dentro dela); sem caixa dentro de caixa */
@media (min-width: 1000px) {
  html:root body .planner-form select, html:root body .planner-form .pl-datas, html:root body .planner-form .pl-cont,
  html:root body .mini-planner select, html:root body .mini-planner .pl-datas, html:root body .mini-planner .pl-cont {
    border: 0 !important; box-shadow: none !important; background-color: transparent !important; border-radius: 0 !important; height: auto !important; min-height: 0 !important; }
  html:root body .planner-form .planner-field { border: 1px solid #CDD3D6 !important; border-radius: 10px !important; background: #fff !important; }
  html:root body .planner-field.is-missing { background-color: #FBECEB !important; border-color: #E5B5B0 !important; }
  html:root body .planner-field.is-missing select, html:root body .planner-field.is-missing .pl-datas, html:root body .planner-field.is-missing .pl-cont { background-color: transparent !important; }
}
/* barrinha "Monte sua viagem" (computador): setinha azul em todos os campos, igual ao resto do site */
html:root body .mini-planner select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23006E83' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 34px !important; color: #1A1A1A !important; }
/* 30/10/2026 · barrinha "Monte sua viagem" das outras páginas (computador): cada campo dentro da sua caixinha, como no quadro da página inicial */
@media (min-width: 1000px) {
  html:root body .mini-planner .mini-planner-form select { border: 1px solid #CDD3D6 !important; border-radius: 8px !important; background-color: #fff !important; height: 42px !important; min-height: 42px !important; padding-left: 12px !important; }
  html:root body .mini-planner .mini-planner-form select:hover { border-color: #006E83 !important; }
  html:root body .mini-planner .mini-planner-form select.falta { background-color: #FBECEB !important; border-color: #E5B5B0 !important; }
}
html:root body .mini-planner .fv-datas { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 42px; padding: 0 12px; border: 1px solid #CDD3D6; border-radius: 8px; background: #fff; color: #5C5C5C; font: inherit; font-size: 14px; cursor: pointer; min-width: 190px; }
html:root body .mini-planner .fv-datas:hover { border-color: #006E83; }
/* calendário aberto pela barrinha (páginas internas): largura confortável, mesmo sendo o campo estreito */
html:root body .mini-planner ~ .pl-cal, html:root body .pl-cal { min-width: 340px; }
html:root body .mini-planner .fv-datas .ph { color: #5C5C5C; }
html:root body .mini-planner .fv-datas span:not(.ph) { color: #006E83; font-weight: 600; }
/* barrinha "Monte sua viagem" (computador): as idades das crianças abrem numa caixinha logo embaixo do campo Crianças */
@media (min-width: 761px) {
  html:root body .mini-planner .mini-planner-form { position: relative; }
  html:root body .mini-planner .mini-idades { position: absolute !important; top: calc(100% + 6px) !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; z-index: 5;
    background: #fff; border: 1px solid #CDD3D6; border-radius: 10px; box-shadow: 0 12px 28px rgba(20,40,48,.16); padding: 10px 12px; gap: 8px !important; box-sizing: border-box; }
  html:root body .mini-planner .mini-idades label { color: #1A1A1A !important; font-weight: 600; }
  html:root body .mini-planner .mini-idades select { height: 38px !important; border: 1px solid #CDD3D6 !important; border-radius: 8px !important; background-color: #fff !important; }
}

/* 30/10/2026 · calendário "Datas da viagem" também nas páginas internas (barrinha Monte sua viagem): o mesmo estilo do quadro da página inicial */
.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; }
.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; }
}
@keyframes plCalEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html:root body .pl-cal { z-index: 1000; }
html:root body .mini-planner .fv-datas { min-width: 250px !important; white-space: nowrap; }
html:root body .mini-planner .fv-datas span { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
/* "Datas da viagem" da barrinha das páginas internas: dentro da sua caixinha, igual aos outros campos */
@media (min-width: 761px) { html:root body .mini-planner .mini-planner-form .fv-datas.pl-datas { border: 1px solid #CDD3D6 !important; border-radius: 8px !important; background-color: #fff !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; } html:root body .mini-planner .mini-planner-form .fv-datas.pl-datas:hover { border-color: #006E83 !important; } }
/* datas escolhidas: mesma letra, cor e tamanho dos outros campos (Les Arcs, Adultos…) */
html:root body .pl-datas.cheio #plDatasTxt, html:root body .pl-datas #plDatasTxt:not(.ph) { color: #1A1A1A !important; font-weight: 400 !important; font-family: inherit !important; }
html:root body .mini-planner .fv-datas #plDatasTxt { font-size: 14px !important; }

/* 30/10/2026 · celular sem "zoom" sozinho:
   1) toque duplo não dá zoom (o zoom de pinça com dois dedos continua funcionando, para quem precisa);
   2) campos com letra de 16 px no celular — abaixo disso o iPhone dá zoom ao tocar no campo (ex.: idade das crianças) */
html, body { touch-action: manipulation; }
a, button, select, input, textarea, label, [role="button"], .btn { touch-action: manipulation; }
@media (max-width: 760px) {
  html:root body select, html:root body input:not([type="checkbox"]):not([type="radio"]), html:root body textarea { font-size: 16px !important; }
}
html:root body .mini-planner .mini-idades[hidden], html:root body .mini-planner .mini-idades:empty { display: none !important; }   /* 30/10/2026: a caixinha das idades só aparece quando há criança */

/* 30/10/2026 · balão "Oi! Posso ajudar?" no mesmo estilo das caixinhas do site: branco, borda fina cinza, cantos de 10 px, letra preta, uma pontinha discreta (sem as bolinhas de "pensamento") */
html:root body #ajudaBtn .bal:not(.x), html:root body .barra-cel .bc-bal:not(.x) {
  background: #fff !important; color: #1A1A1A !important; border: 1px solid #CDD3D6 !important; border-radius: 10px !important; box-shadow: 0 8px 22px rgba(20,40,48,.16) !important;
  font-family: "Jost", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; padding: 8px 12px !important; white-space: nowrap; }
html:root body #ajudaBtn .bal::before, html:root body .barra-cel .bc-bal::before { content: none !important; display: none !important; }
html:root body #ajudaBtn .bal::after, html:root body .barra-cel .bc-bal::after { content: "" !important; position: absolute !important; width: 10px !important; height: 10px !important; background: #fff !important; border: 1px solid #CDD3D6 !important; border-radius: 0 !important; border-left: 0 !important; border-bottom: 0 !important; }
/* computador e gerador: o balão fica EM CIMA do botão (29/10/2026, pedido da Nayara; antes ficava ao lado), com a pontinha para baixo */
html:root body #ajudaBtn .bal:not(.x) { top: auto !important; bottom: calc(100% + 12px) !important; right: 0 !important; left: auto !important; transform: translateY(6px) !important; }
html:root body #ajudaBtn.fala .bal:not(.x), html:root body #ajudaBtn:hover .bal:not(.x) { transform: translateY(0) !important; }
html:root body #ajudaBtn .bal::after { right: 24px !important; bottom: -6px !important; top: auto !important; left: auto !important; transform: rotate(135deg) !important; }
/* celular (barra de baixo): o balão fica logo acima do botão redondo, com a pontinha para baixo */
html:root body .barra-cel .bc-bal:not(.x) { bottom: calc(100% + 10px) !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; left: auto !important; }
html:root body .barra-cel .bc-bal::after { right: 22px !important; bottom: -6px !important; top: auto !important; left: auto !important; transform: rotate(135deg) !important; }

/* 29/10/2026 · CUPOM DA O'RENTEES (página Roupa de esqui) mais destacado: a Nayara achou que passava despercebido.
   Caixa azul-clara com borda azul cheia, código grande em etiqueta branca e "Copiar" como botão principal (azul cheio). */
html:root body .cupom-caixa { background: #F8F6F2 !important; border: 2px solid #006E83 !important; border-radius: 14px !important; padding: 14px 14px 14px 20px !important; gap: 14px !important; }
html:root body .cupom-caixa span { font-size: 15px !important; font-weight: 600 !important; color: #004E5D !important; }
html:root body .cupom-caixa b { font-size: 24px !important; letter-spacing: .12em !important; color: #004E5D !important; background: #fff !important; padding: 4px 14px !important; border: 1.5px dashed #006E83 !important; border-radius: 8px !important; }
html:root body .cupom-copiar { background: #006E83 !important; color: #fff !important; border: 1px solid #006E83 !important; font-weight: 600 !important; padding: 9px 22px !important; }

/* 29/10/2026 (pedido da Nayara): o calendário da página inicial e das outras páginas (.pl-cal) com a MESMA aparência do calendário do gerador:
   dia indisponível com o número claro e um risco fino (no lugar do "×"), mês em preto, legenda com o símbolo em cima do texto, letras de 14px. */
html:root body .pl-cal-mes b { color: #1A1A1A !important; }
html:root body .pl-cal-grade .dia.alta { background: #FFFAF0 !important; border-color: #EDE7DC !important; }
html:root body .pl-cal-grade .dia.sem-vaga { color: #b9c2c5 !important; font-weight: 400 !important; }
html:root body .pl-cal-grade .dia.sem-vaga::after { content: "" !important; inset: auto !important; left: 50% !important; top: 50% !important; width: 12.5px !important; height: 1.5px !important; background: #b3bec1 !important; transform: translate(-50%, -50%) rotate(-45deg) !important; display: block !important; font-size: 0 !important; }
html:root body .pl-cal-leg { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 6px !important; padding: 9px 12px !important; font-size: 14px !important; color: #1A1A1A !important; }
html:root body .pl-cal-leg span { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; }
html:root body .pl-cal-leg i { margin: 0 !important; width: 18px !important; height: 10px !important; border-radius: 5px !important; border: 1.5px solid #DCD3C4 !important; background: #fff !important; }
html:root body .pl-cal-leg i.l-alta { background: #FFFAF0 !important; border-color: #EDE7DC !important; }
html:root body .pl-cal-leg i.l-suas { background: #006E83 !important; border-color: #006E83 !important; }
html:root body .pl-cal-dica { font-size: 14px !important; line-height: 1.45 !important; padding: 10px 12px !important; border-left: 3px solid #006E83 !important; }
/* 29/10/2026: no calendário do gerador, o dia indisponível fica só com UM risquinho (como o da página inicial), não com um X */
html body #gerador .cal-area .cal .dia.sem-vaga[disabled]::before { display: none !important; }

/* 30/10/2026 · MENU DO CELULAR: em telas mais baixas (iPhone com a barra do Safari aberta) os itens encolhiam e o botão "Monte sua viagem"
   virava uma linha, com os ícones cortados embaixo. Agora nada encolhe (o menu rola se precisar), os links ficam um pouco mais juntos
   em telas baixas e, com o menu aberto, a foto/balão de contato e a barra de baixo somem (o menu já tem WhatsApp e Instagram). */
html:root body .mobile-menu > * { flex-shrink: 0 !important; }
@media (max-height: 760px) { html:root body .mobile-menu > a:not(.menu-cta) { padding-top: 11px !important; padding-bottom: 11px !important; } }
html:root body.menu-open #ajudaBtn, html:root body.menu-open #contatoMenu, html:root body.menu-open .barra-cel { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
@media (max-height: 700px) { html:root body .mobile-menu > a:not(.menu-cta) { padding-top: 7px !important; padding-bottom: 7px !important; } }

/* 30/10/2026 · ETAPA 1B · página inicial: os 4 serviços com foto grande (sem caixa, sem sombra), cards das estações mais leves,
   mais respiro entre as seções. Transições lentas e suaves (nada de supetão). */
html:root body .srv-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
html:root body .srv-foto { display: flex; flex-direction: column; color: #1A1A1A; text-decoration: none !important; }
html:root body .srv-img { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5; background: #EDE7DC; }
html:root body .srv-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
html:root body .srv-foto:hover .srv-img img { transform: scale(1.04); }
html:root body .srv-foto h3 { margin: 18px 0 6px; font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 26px !important; font-weight: 600 !important; color: #1A1A1A !important; }
html:root body .srv-foto p { margin: 0; font-size: 16px !important; line-height: 1.55; color: #2A2A2A !important; }   /* mesmo cinza-escuro dos outros textos do site */
/* 30/10/2026 (Nayara): sem sublinhado fixo (parecia antigo); a linha fina aparece devagar só ao passar o mouse */
html:root body .srv-mais { position: relative; align-self: flex-start; margin-top: 12px; font-weight: 600; font-size: 15px; color: #006E83; text-decoration: none !important; transition: color .3s ease; }
html:root body .srv-mais::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
html:root body .srv-foto:hover .srv-mais::after { transform: scaleX(1); }
@media (hover: none) { html:root body .srv-foto:hover .srv-mais::after { transform: scaleX(0); } }
html:root body .srv-foto:hover .srv-mais { color: #004E5D; }
@media (max-width: 1000px) { html:root body .srv-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; } }
@media (max-width: 560px) { html:root body .srv-fotos { grid-template-columns: 1fr; gap: 36px; } html:root body .srv-img { aspect-ratio: 4 / 3; } }
@media (hover: none) { html:root body .srv-foto:hover .srv-img img { transform: none; } }
/* estações: sombra quase só uma linha, cantos iguais ao resto */
html:root body #destinos .dest-card { box-shadow: 0 1px 2px rgba(20,40,48,.06), 0 6px 18px rgba(20,40,48,.06) !important; border-radius: 12px !important; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease !important; }
html:root body #destinos .dest-card:hover { transform: translateY(-2px) !important; box-shadow: 0 2px 4px rgba(20,40,48,.08), 0 12px 26px rgba(20,40,48,.08) !important; }
/* mais respiro entre as seções da página inicial */
html:root body #perfis, html:root body #sobre, html:root body #servicos, html:root body #destinos, html:root body #como-funciona { padding-top: clamp(72px, 9vw, 120px) !important; padding-bottom: clamp(72px, 9vw, 120px) !important; }
/* rodapé (1B): continua compacto, mas mais organizado: 3 colunas alinhadas, navegação em duas colunas,
   e uma linha fina embaixo com a parte legal em letra clara e discreta */
@media (min-width: 900px) {
  html:root body .footer-top { display: grid !important; grid-template-columns: 1.3fr 1.5fr 1fr !important; gap: 48px !important; align-items: start; padding-bottom: 22px !important; }
  html:root body .footer-col ul { display: grid !important; grid-template-columns: repeat(2, max-content); column-gap: 40px !important; }
  html:root body .footer-col:last-child ul { grid-template-columns: 1fr; }
}
html:root body footer { padding-top: 40px !important; }
html:root body .footer-top > div:first-child p { max-width: 30ch; color: rgba(255,255,255,.82) !important; }
html:root body .footer-col h5 { font-family: 'Jost', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; }
html:root body .footer-col li, html:root body .footer-col li a { color: rgba(255,255,255,.82) !important; transition: color .3s ease; }
html:root body .footer-col li a:hover { color: #fff !important; }
html:root body .footer-bottom { border-top: 1px solid rgba(255,255,255,.14) !important; padding-top: 16px !important; }
html:root body .footer-legal, html:root body .footer-legal span, html:root body .footer-legal a { color: rgba(255,255,255,.62) !important; font-size: 13px !important; }
html:root body .footer-legal a:hover { color: #fff !important; }
/* 30/10/2026 (1B) · "Qual é a sua viagem?": foto em pé no card inteiro, título e frase por cima com véu suave; no celular desliza de lado */
html:root body .perfis-trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
html:root body .perfil-foto { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #1b2a30; color: #fff; text-decoration: none !important; }
html:root body .perfil-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
html:root body .perfil-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,30,0) 40%, rgba(8,24,30,.45) 66%, rgba(8,24,30,.82) 100%); pointer-events: none; }
html:root body .perfil-sobre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; }
html:root body .perfil-sobre h3 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 30px !important; font-weight: 600 !important; line-height: 1.1; color: #fff !important; }
html:root body .perfil-frase { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); }
/* 30/10/2026 (Nayara): "Montar esta viagem" com cara de clicável: botão pequeno branco com letra azul (o azul continua sendo "dá para clicar") */
html:root body .perfil-link { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 10px; background: #fff; color: #006E83; font-weight: 600; font-size: 15px; transition: background-color .3s ease, color .3s ease; }
html:root body .perfil-foto:hover .perfil-link { background: #004E5D; color: #fff; }
html:root body .perfil-foto:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  html:root body .perfis-trilho { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * max(16px, 4vw)); margin-right: calc(-1 * max(16px, 4vw)); padding: 0 max(16px, 4vw) 4px; scroll-padding-left: max(16px, 4vw); }
  html:root body .perfis-trilho::-webkit-scrollbar { display: none; }
  html:root body .perfil-foto { flex: 0 0 min(84vw, 360px); max-width: none; scroll-snap-align: center; transform-origin: center center; will-change: transform; }
  /* a roda: o primeiro e o último card também podem ficar no meio */
  html:root body .perfis-trilho { padding-left: calc((100vw - min(84vw, 360px)) / 2) !important; padding-right: calc((100vw - min(84vw, 360px)) / 2) !important; scroll-padding-left: 0 !important; gap: 4px !important; }
}
@media (hover: none) { html:root body .perfil-foto:hover img { transform: none; } html:root body .perfil-foto:hover .perfil-link { background: #fff; color: #006E83; } }
/* no celular, o card que está à vista (ao deslizar) aproxima devagar, como o efeito do mouse no computador */
html:root body .perfil-foto.a-vista img { transform: scale(1.06); transition-duration: 2.2s; }
/* ao encostar o dedo no card (celular): a foto aproxima e o botão "Montar esta viagem" fica azul-escuro, como quando se aperta um botão */
html:root body .perfil-foto:active img, html:root body .srv-foto:active .srv-img img { transform: scale(1.06); transition-duration: .6s; }
html:root body .perfil-foto:active .perfil-link { background: #004E5D !important; color: #fff !important; transform: scale(.97); }
/* 30/10/2026 (Nayara): "Onde trabalhamos" no celular com o mesmo efeito de roda dos perfis (desliza de lado, o do meio fica maior) */
@media (max-width: 900px) {
  html:root body #destinos .dest-grid { display: flex !important; gap: 4px !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: calc(-1 * max(16px, 4vw)); margin-right: calc(-1 * max(16px, 4vw)); padding: 6px calc((100vw - min(84vw, 360px)) / 2) 10px !important; }
  html:root body #destinos .dest-grid::-webkit-scrollbar { display: none; }
  html:root body #destinos .dest-card { flex: 0 0 min(84vw, 360px); aspect-ratio: 4 / 5 !important; scroll-snap-align: center; transform-origin: center center; will-change: transform; transition: box-shadow .6s ease !important; }
  html:root body #destinos .dest-card img { transition: transform 2.2s cubic-bezier(.2,.7,.2,1) !important; }
  html:root body #destinos .dest-card.a-vista img { transform: scale(1.06); }
  html:root body #destinos .dest-card:active img { transform: scale(1.06); transition-duration: .6s !important; }
}
/* nomes das estações no mesmo tamanho dos títulos dos perfis */
html:root body #destinos .dest-card h4 { font-size: 28px !important; line-height: 1.1; margin-bottom: 6px; }
html:root body #destinos .dest-card p { font-size: 15px !important; }

/* 30/10/2026 (Nayara): no menu, ao passar o mouse o nome cresce um pouquinho (zoom suave) em vez de sublinhar; a linha fica só na página em que a pessoa está */
html:root #siteHeader .nav-links a { display: inline-block; transform-origin: center; transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s ease !important; }
html:root #siteHeader .nav-links a:hover { transform: scale(1.12); }
html:root #siteHeader .nav-links a:hover:not(.active)::after { width: 0 !important; }
@media (prefers-reduced-motion: reduce) { html:root #siteHeader .nav-links a:hover { transform: none; } }
/* 30/10/2026: com "Como funciona" no menu, um espaço um pouco menor entre os itens para a barra continuar cabendo em telas de 1280 */
@media (min-width: 1024px) and (max-width: 1439px) { html:root #siteHeader .nav-links { gap: 13px !important; } }
@media (min-width: 1440px) { html:root #siteHeader .nav-links { gap: 15px !important; } }

/* 30/10/2026 (Nayara): computador com tela menor — os nomes do menu ficam numa 2ª linha embaixo do logo, em vez do botão de três risquinhos */
@media (min-width: 900px) {
  html:root #siteHeader.menu-2linhas { flex-wrap: wrap; row-gap: 6px; }
  html:root #siteHeader.menu-2linhas nav { display: block !important; order: 3; width: 100%; }
  html:root #siteHeader.menu-2linhas .nav-links { display: flex !important; justify-content: center; flex-wrap: nowrap; gap: 15px !important; margin: 0; padding: 4px 0 2px; }
  html:root #siteHeader.menu-2linhas .nav-cta { margin-left: auto !important; }
  html:root #siteHeader.menu-2linhas .hamburger { display: none !important; }
}
/* 30/10/2026 (Nayara): com o menu numa linha só, os nomes ficam encostados à direita, perto do idioma (não sobra aquele espaço vazio entre "Contato" e a bandeirinha) */
@media (min-width: 1024px) {
  html:root #siteHeader:not(.menu-2linhas):not(.menu-compacto) nav { margin-left: auto; margin-right: 26px; }
  html:root #siteHeader:not(.menu-2linhas):not(.menu-compacto) .nav-cta { margin-left: 0 !important; }
}
/* 30/10/2026: o nome "Encantos de Neve" nunca quebra em duas linhas; se o menu não couber ao lado, ele se recolhe (js/main.js mede com o nome inteiro) */
html:root #siteHeader .brand { flex-shrink: 0; }
html:root #siteHeader .brand-name { white-space: nowrap; }
html:root #siteHeader nav { min-width: 0; }

/* 30/10/2026 (Nayara) · menu do celular: continua abrindo de lado (vidro azul), só com letras mais delicadas e fáceis de ler;
   itens um pouco mais baixos para WhatsApp, Instagram e idioma aparecerem inteiros no fim */
@media (max-width: 760px) {
  html:root body .mobile-menu { width: min(258px, 70vw) !important; padding: calc(22px + env(safe-area-inset-top, 0px)) 20px calc(22px + env(safe-area-inset-bottom, 0px)) !important; }
  html:root body .mobile-menu a.drawer-brand { padding-bottom: 16px !important; margin-bottom: 6px !important; }
  html:root body .mobile-menu > a:not(.drawer-brand):not(.btn) { font-family: 'Jost', sans-serif !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: .3px !important;
    color: rgba(255,255,255,.94) !important; padding: 13px 0 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
  html:root body .mobile-menu > a.menu-ativo:not(.drawer-brand):not(.btn) { color: #fff !important; font-weight: 600 !important; }
  html:root body .mobile-menu > a.menu-ativo:not(.drawer-brand):not(.btn)::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: #19B7C7; vertical-align: middle; }
  html:root body .mobile-menu a.menu-cta { margin-top: 18px !important; }
  html:root body .mobile-menu .menu-icones { margin-top: 14px !important; }
}
/* celulares de tela mais baixa (iPhone SE, mini): itens mais juntinhos para caber tudo sem rolar */
@media (max-width: 760px) and (max-height: 760px) { html:root body .mobile-menu > a:not(.drawer-brand):not(.btn) { padding: 9px 0 !important; } html:root body .mobile-menu a.menu-cta { margin-top: 14px !important; } }
@media (max-width: 760px) and (max-height: 690px) { html:root body .mobile-menu > a:not(.drawer-brand):not(.btn) { padding: 7px 0 !important; font-size: 16px !important; } html:root body .mobile-menu a.drawer-brand { padding-bottom: 10px !important; } html:root body .mobile-menu a.menu-cta { margin-top: 10px !important; } html:root body .mobile-menu .menu-icones { margin-top: 10px !important; } }
/* menu mais fino: nome da marca e ícones um pouco menores para caber */
@media (max-width: 760px) {
  html:root body .mobile-menu .drawer-brand-name { font-size: 18px !important; }
  html:root body .mobile-menu a.drawer-brand img { width: 34px !important; height: 34px !important; }
  html:root body .mobile-menu a.drawer-brand { padding-right: 44px !important; gap: 10px !important; }
  html:root body .mobile-menu .close-btn { width: 34px !important; height: 34px !important; right: 14px !important; }
  html:root body .mobile-menu a.menu-cta { min-height: 46px; padding: 12px 14px !important; font-size: 15px !important; }
  html:root body .mobile-menu .menu-icones { gap: 10px !important; }
  html:root body .mobile-menu .menu-icones a.btn { width: 44px !important; height: 44px !important; }
}
/* 30/10/2026 (Nayara): ao passar o dedo (ou o mouse) por cima, o nome vem para a frente, em 3D, a partir de onde está */
html:root body .mobile-menu { perspective: 700px; }
html:root body .mobile-menu > a:not(.drawer-brand):not(.btn) { transform-origin: left center; will-change: transform;
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1), color .3s ease, text-shadow .45s ease !important; }
html:root body .mobile-menu.open > a:not(.drawer-brand):not(.btn):hover,
html:root body .mobile-menu.open > a.em-cima:not(.drawer-brand):not(.btn) {
  transform: translate3d(6px, 0, 34px) scale(1.06) !important; color: #fff !important; text-shadow: 0 6px 16px rgba(0,30,40,.45); transition-delay: 0s !important; }
@media (max-width: 760px) { html:root body .mobile-menu a.menu-cta { min-height: 0 !important; padding: 9px 14px !important; line-height: 1.2 !important; } }
@media (max-width: 760px) { html:root body .mobile-menu a.menu-cta { height: 38px !important; padding: 0 14px !important; } }
@media (max-width: 760px) { html:root body .mobile-menu a.menu-cta { width: auto !important; align-self: center !important; padding: 0 24px !important; margin-left: auto !important; margin-right: auto !important; } }
/* a linha de baixo (WhatsApp, Instagram, idioma) com a mesma largura e a mesma altura do "Monte sua viagem" */
@media (max-width: 760px) {
  html:root body .mobile-menu a.menu-cta { width: 184px !important; padding: 0 !important; }
  html:root body .mobile-menu .menu-icones { width: 184px !important; margin-left: auto !important; margin-right: auto !important; justify-content: space-between !important; gap: 0 !important; }
  html:root body .mobile-menu .menu-icones a.btn { width: 38px !important; height: 38px !important; }
  html:root body .mobile-menu .menu-icones a.btn svg { width: 17px !important; height: 17px !important; }
  html:root body .mobile-menu .menu-icones .troca-idioma .idioma-atual { height: 38px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 14px !important; }
  html:root body .mobile-menu .menu-icones.sem-idioma { justify-content: center !important; gap: 14px !important; }   /* 31/10: páginas sem inglês (Dicas): os 2 ícones juntos no meio */
}
/* 30/10/2026 (Nayara): o menu todo mais fino, da largura dos nomes; botão e ícones alinhados com os nomes, ocupando a mesma largura */
@media (max-width: 760px) {
  html:root body .mobile-menu { width: min(226px, 64vw) !important; padding-left: 18px !important; padding-right: 18px !important; }
  html:root body .mobile-menu .drawer-brand-name { font-size: 16.5px !important; }
  html:root body .mobile-menu .drawer-brand-name span { font-size: 12.5px !important; }
  html:root body .mobile-menu a.drawer-brand img { width: 30px !important; height: 30px !important; }
  html:root body .mobile-menu a.drawer-brand { padding-right: 36px !important; gap: 8px !important; }
  html:root body .mobile-menu .close-btn { width: 30px !important; height: 30px !important; right: 10px !important; font-size: 18px !important; }
  html:root body .mobile-menu a.menu-cta { width: 100% !important; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; font-size: 14.5px !important; }
  html:root body .mobile-menu .menu-icones { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  html:root body .mobile-menu .menu-icones a.btn { width: 36px !important; height: 36px !important; }
  html:root body .mobile-menu .menu-icones .troca-idioma .idioma-atual { height: 36px !important; padding: 0 10px !important; }
}

/* 30/10/2026 (Nayara) · botão flutuante "Monte sua viagem" no celular: fino, do tamanho do texto, azul do logo, ao lado da foto; barra sem faixa branca */
@media (max-width: 760px) {
  html:root body.com-barra-cel .barra-cel { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 10px !important;
    background: transparent !important; border-top-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; pointer-events: none; }
  html:root body.com-barra-cel .barra-cel > * { pointer-events: auto; }
  html:root body .barra-cel .bc-monte { flex: none !important; width: auto !important; height: 42px !important; padding: 0 16px 0 20px !important; gap: 8px !important; border-radius: 999px !important;
    background: #006E83 !important; border: 0 !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: 0 6px 18px rgba(0,50,62,.28) !important; }
  html:root body .barra-cel .bc-monte .bc-seta { display: inline-flex !important; order: 2; width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; color: #fff !important; }
  html:root body .barra-cel .bc-monte .bc-seta svg { width: 15px; height: 15px; }
  html:root body.com-barra-cel { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 760px) { html:root body .barra-cel .bc-monte .bc-seta { display: none !important; } html:root body .barra-cel .bc-monte { padding: 0 20px !important; } }
/* 31/10/2026: no rodapé em inglês a frase "Encantos de Neve is Portuguese for…" não quebrava e a página deslizava para o lado no celular */
html:root body footer .footer-nome, html:root body footer .footer-top p { white-space: normal !important; overflow-wrap: break-word; max-width: 100%; }

/* 01/11/2026 (Nayara): no calendário, a chegada e a saída escolhidas ficam sempre azuis com o número branco, também em dia de alta temporada
   (a regra da alta temporada acima é forte e deixava o número branco sobre o creme) */
html:root body .pl-cal-grade .dia.alta.ini, html:root body .pl-cal-grade .dia.alta.fim { background: #006E83 !important; border-color: #006E83 !important; color: #fff !important; }
html:root body .pl-cal-grade .dia.alta.meio { background: #EFE9DE !important; border-color: transparent !important; color: #004E5D !important; }
html:root body .pl-cal-grade .dia.alta.saida-ok { border-color: #006E83 !important; color: #004E5D !important; }

/* 02/11/2026 (Nayara, desenho "Module Monte sua viagem"): Adultos e Crianças num campo só ("Viajantes"), que abre um painel
   (celular: sobe de baixo; computador: logo abaixo do campo). Os seletores longos vencem as regras do quadro no computador, acima. */
.pl-viaj { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 14px; border: 1px solid #DCD3C4; border-radius: 8px; background: #fff; font: 500 17px 'Jost', sans-serif; color: #1A1F22; cursor: pointer; text-align: left; }
.pl-viaj svg { flex: none; color: #006E83; }
.pl-viaj-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-field--viaj { position: relative; }
.planner-field--viaj.is-missing .pl-viaj { border-color: #a94a42; background: #fbeceb; }
html.pl-viaj-trava, html.pl-viaj-trava body { overflow: hidden; }
.pl-viaj-fundo { position: fixed; inset: 0; z-index: 2147483000; background: rgba(14,24,30,.55); }
.pl-viaj-painel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001; background: #fff; border-radius: 24px 24px 0 0; padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); max-height: 86vh; overflow-y: auto; box-shadow: 0 -10px 30px rgba(14,24,30,.18); text-align: left; color: #1A1F22; }
.pl-viaj-alca { width: 40px; height: 5px; border-radius: 3px; background: #D5DCDF; margin: 0 auto 10px; }
.pl-viaj-cab { display: flex; align-items: center; justify-content: space-between; }
html:root body .pl-viaj-cab h3 { margin: 0; font: 600 28px/1.1 'Cormorant Garamond', Georgia, serif; color: #1A1F22; }
.pl-viaj-x { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1A1F22; border-radius: 50%; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-field { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid #E6EBED !important; box-shadow: none !important; flex: none !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-rot { font: 500 17px/1.3 'Jost', sans-serif !important; color: #1A1F22 !important; margin: 0 !important; }
.pl-viaj-painel .pl-sub { display: block; font-size: 14px; font-weight: 400; color: #5E6A70; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-cont { gap: 14px; height: auto !important; border: 0 !important; padding: 0 !important; background: transparent !important; flex: none; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-cont button { width: 44px !important; height: 44px !important; border: 1px solid #DCD3C4 !important; color: #1a6b7a !important; font-size: 22px !important; background: #fff !important; }   /* 03/11/2026: mesma cor das bolinhas do site */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-cont button:disabled { opacity: .35; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-cont output { font-size: 18px !important; min-width: 22px; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages { position: static !important; left: auto !important; width: auto !important; margin: 0 !important; padding: 12px 0 0 !important; grid-column: auto !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-t { display: block !important; margin: 0 0 8px !important; font-size: 14px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; background: #F3F5F6; border-radius: 12px; padding: 8px 8px 8px 16px !important; margin: 0 !important; font: 400 15px 'Jost', sans-serif !important; color: #1A1F22 !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g select { width: 120px !important; flex: none; height: 40px !important; margin: 0 !important; border: 1px solid #D5DCDF !important; border-radius: 10px !important; background-color: #fff !important; padding: 0 30px 0 12px !important; font-size: 15px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label.is-missing select { border-color: #a94a42 !important; background-color: #fbeceb !important; }
.pl-viaj-ok { width: 100%; margin-top: 18px; height: 56px; border: 0; border-radius: 12px; background: #006E83; color: #fff; font: 600 18px 'Jost', sans-serif; cursor: pointer; }
.pl-viaj-ok:hover { background: #005C6E; }
@media (min-width: 1000px) {
  .pl-viaj-fundo { background: transparent; }
  .pl-viaj-painel { position: absolute; left: 0; right: auto; top: calc(100% + 10px); bottom: auto; width: 380px; border-radius: 16px; padding: 6px 20px 20px; max-height: none; overflow: visible; box-shadow: 0 14px 36px rgba(14,24,30,.22); }
  .pl-viaj-alca { display: none; }
  html:root .planner-form .pl-viaj { height: 30px !important; border: 0 !important; padding: 0 !important; background: transparent !important; font-size: 16px !important; gap: 8px; }
  html:root .planner-form .planner-field--viaj { flex: 1.3 1 0; }
}
@media (max-width: 999px) { html:root body .planner-form .planner-field--viaj { grid-column: 1 / -1 !important; width: 100%; } }   /* celular: "Viajantes" na largura toda, como Estação e Datas */
/* 02/11/2026 (Nayara): no painel "Viajantes", sem o "(até 4 anos não paga ski pass)" e a idade de cada criança com − e + */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-t { display: none !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages { padding-top: 14px !important; }
.pl-idade { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F3F5F6; border-radius: 12px; padding: 8px 8px 8px 16px; font: 400 16px 'Jost', sans-serif; color: #1A1F22; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-idade output { min-width: 66px !important; text-align: center; font-size: 16px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-idade .pl-cont { gap: 8px; }
.pl-idade.is-missing { background: #fbeceb; box-shadow: inset 0 0 0 1px #a94a42; }
/* 02/11/2026 (Nayara): todas as bolinhas − e + do painel na mesma coluna (a do número tem a mesma largura em todas as linhas) */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-cont { gap: 10px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-cont output { min-width: 70px !important; width: 70px; text-align: center; }
.pl-idade { background: transparent; border-radius: 0; padding: 8px 0 8px 14px; border-left: 3px solid #E6EBED; }
.pl-idade.is-missing { background: #fbeceb; border-left-color: #a94a42; box-shadow: none; }
/* 02/11/2026 (Nayara): crianças em duas colunas; toque no cartão abre todas as idades (< 1 a 12) logo abaixo da linha */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
.pl-kid { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 56px; padding: 8px 12px; border: 1px solid #D5DCDF; border-radius: 12px; background: #fff; font: 400 13px 'Jost', sans-serif; color: #5E6A70; cursor: pointer; text-align: left; }
.pl-kid b { font-weight: 500; font-size: 16px; color: #A3ADB1; }
.pl-kid.feito b { color: #1A1F22; }
.pl-kid.ativo { border: 2px solid #006E83; padding: 7px 11px; }
.pl-kid.is-missing { border-color: #a94a42; background: #fbeceb; }
.pl-kid.is-missing b { color: #a94a42; }
.pl-escolha { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; background: #F3F5F6; border-radius: 12px; padding: 8px; }
.pl-escolha button { height: 40px; border-radius: 20px; border: 1px solid #D5DCDF; background: #fff; font: 500 15px 'Jost', sans-serif; color: #1A1F22; cursor: pointer; padding: 0; }
.pl-escolha button.on, .pl-escolha button:active { background: #006E83; border-color: #006E83; color: #fff; }
/* 02/11/2026 (Nayara): com muitas crianças o painel não cresce: o título fica em cima, o "Confirmar" embaixo e o meio rola */
.pl-viaj-painel { display: flex; flex-direction: column; max-height: 78vh; max-height: 78dvh; overflow: hidden; }
.pl-viaj-alca, .pl-viaj-cab, .pl-viaj-ok { flex: none; }
.pl-viaj-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
@media (min-width: 1000px) { .pl-viaj-painel { max-height: min(70vh, 560px); overflow: hidden; } }
/* 02/11/2026 (Nayara): quadro da idade de cada criança, com as idades uma embaixo da outra (rola); a grade de antes saiu */
.pl-viaj-painel { position: fixed; }
@media (min-width: 1000px) { .pl-viaj-painel { position: absolute; } }
.pl-roda { position: absolute; inset: 0; z-index: 5; background: #fff; display: flex; flex-direction: column; padding: 14px max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-radius: inherit; }
.pl-roda-cab { display: flex; align-items: center; justify-content: space-between; flex: none; margin-bottom: 8px; }
html:root body .pl-roda-cab h3 { margin: 0; font: 600 26px/1.1 'Cormorant Garamond', Georgia, serif; color: #1A1F22; }
.pl-roda-x { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1A1F22; border-radius: 50%; }
.pl-roda-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.pl-roda-lista button { flex: none; scroll-snap-align: center; height: 52px; border: 1px solid #E6EBED; border-radius: 12px; background: #fff; font: 500 18px 'Jost', sans-serif; color: #1A1F22; cursor: pointer; }
.pl-roda-lista button:hover { border-color: #006E83; }
.pl-roda-lista button.on { background: #006E83; border-color: #006E83; color: #fff; }
html:root body .pl-roda-cab h3, html:root body .pl-viaj-cab h3 { font-variant-numeric: lining-nums; }   /* "1" e não "I" na Cormorant */
/* 03/11/2026 (Nayara): a idade abre numa lista pequena logo embaixo do cartão (botões pequenos, rola), sem tomar o painel todo */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g { position: relative; }
.pl-roda { position: absolute; inset: auto; z-index: 6; background: #fff; border: 1px solid #D5DCDF; border-radius: 12px; padding: 6px; box-shadow: 0 10px 24px rgba(14,24,30,.18); display: block; }
.pl-roda-lista { max-height: 164px; overflow-y: auto; gap: 4px; padding: 0; scroll-snap-type: y proximity; }
.pl-roda-lista button { height: 36px; border-radius: 8px; font-size: 15px; border-color: transparent; background: #F3F5F6; }
.pl-roda-lista button.on { background: #006E83; color: #fff; }
.pl-viaj-painel[hidden], .pl-viaj-fundo[hidden] { display: none !important; }   /* 03/11/2026: o painel só aparece ao tocar em "Viajantes" */
@media (max-width: 999px) { .pl-viaj-painel { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: 20px; padding-right: 20px; padding-bottom: 18px; box-shadow: 0 12px 36px rgba(14,24,30,.28); max-height: 74vh; max-height: 74dvh; } }   /* 03/11/2026: solto do fundo, como o quadro */
/* 03/11/2026 (Nayara): no painel, a idade de cada criança é o campo "Idade" do site (lista curta que rola), duas crianças por linha */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label { display: block !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; font: 600 14px/1.3 'Jost', sans-serif !important; color: #006E83 !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g select { display: block; width: 100% !important; height: 50px !important; margin-top: 6px !important; border: 1px solid #DCD3C4 !important; border-radius: 8px !important; padding: 0 40px 0 14px !important; font-size: 17px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label.is-missing select { border-color: #a94a42 !important; background-color: #fbeceb !important; }
html:root body .pl-viaj-painel .lista-numeros { z-index: 10; }
/* 03/11/2026 (Nayara): a setinha do campo "Idade" no painel segue o padrão do site (azul num círculo claro), não dourada */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g 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: 48px !important; -webkit-appearance: none; appearance: none; }
html:root body .pl-viaj-painel .lista-numeros.para-cima { box-shadow: 0 -10px 24px rgba(14,24,30,.16); }

/* 03/11/2026: lista da idade por cima do painel; seta do campo Viajantes igual à dos outros campos */
.lista-numeros.no-painel { z-index: 2147483002 !important; }
html:root .planner-form .pl-viaj .pl-viaj-seta { flex: none; width: 30px; height: 30px; }
@media (min-width: 1000px) { html:root .planner-form .pl-viaj .pl-viaj-seta { width: 24px; height: 24px; } }
/* 03/11/2026 (Nayara): campos e rótulos do "Viajantes" e das idades com as mesmas cores e medidas dos outros campos do quadro (Estação, Datas) */
html:root body .planner-form .pl-viaj { border-color: #CDD3D6 !important; color: #1A1A1A !important; font-weight: 400 !important; }
@media (max-width: 999px) { html:root body .planner-form .pl-viaj { height: 44px !important; } }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label { color: #1A1A1A !important; font-weight: 600 !important; font-size: 14px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g select { border-color: #CDD3D6 !important; height: 44px !important; color: #1A1A1A !important; font-size: 16px !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g select:has(option[value=""]:checked) { color: #9aa5a8 !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .pl-rot { color: #1A1A1A !important; }
@media (hover: none) { .pl-viaj-painel select[id^="qAge"] { pointer-events: none; } }   /* 03/11/2026: também na página Estações, o toque na idade só abre a nossa lista */
/* 03/11/2026 (Nayara): com a lista aberta, a setinha do campo vira para cima; fechou, volta para baixo */
html:root body .planner-form select[aria-expanded="true"], html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g select[aria-expanded="true"] { 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 17.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; }
/* 03/11/2026 (Nayara): Confirmar sem a idade: o campo fica na cor de atenção, com o aviso embaixo */
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label.is-missing select { border-color: #a94a42 !important; background-color: #fbeceb !important; }
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g label.is-missing { color: #a94a42 !important; }
.pl-viaj-aviso { margin: 10px 0 0; font-size: 14px; color: #a94a42; }
.pl-viaj-aviso[hidden] { display: none; }
/* 03/11/2026 (Nayara): as setinhas e o calendário do quadro no mesmo alinhamento (centro a 25px da borda direita, como em Estação) */
@media (max-width: 999px) {
  html:root body .planner-form .pl-viaj { padding-right: 10px !important; }
  html:root body .planner-form .pl-datas { padding-right: 13px !important; }
}
html:root body .pl-viaj-painel.pl-viaj-painel.pl-viaj-painel .planner-ages-g select { background-position: calc(100% - 6px) 50% !important; }   /* 03/11/2026: seta da idade na mesma linha das bolinhas + e do × */
@media (min-width: 1000px) {   /* 03/11/2026: no computador, setas e calendário do mesmo tamanho (24px) e na mesma distância da borda */
  html:root body .planner-form .planner-field > select { background-size: 24px 24px !important; background-position: 100% 50% !important; padding-right: 30px !important; }
  html:root body .planner-form .pl-datas svg { width: 24px !important; height: 24px !important; }
}
html:root body .pl-cal-leg { display: flex !important; justify-content: center !important; gap: 22px !important; } html:root body .pl-cal-leg span { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 7px !important; }   /* 03/11/2026: só Alta e Baixa temporada, lado a lado e centradas */
/* 03/11/2026 (Nayara): legenda do calendário maior e com mais destaque (quadradinhos no formato dos dias) */
html:root body .pl-cal-leg { font-size: 14px !important; font-weight: 500; padding: 10px 12px !important; gap: 26px !important; }
html:root body .pl-cal-leg i { width: 26px !important; height: 22px !important; border-radius: 7px !important; margin-right: 2px !important; border-width: 1.5px !important; }
html:root body .pl-cal-leg i.l-alta.l-alta { background: #FFF3DC !important; border-color: #C9A96E !important; }
html:root body .pl-cal-leg span:not(:has(.l-alta)) i { background: #eef1f3 !important; border-color: #b9c3c8 !important; }
html:root body .pl-cal-leg { background: transparent !important; padding: 6px 0 !important; }   /* 03/11/2026 (Nayara): legenda sem o fundo cinza */
/* 03/11/2026 (Nayara): alta temporada igual no calendário e na legenda (o mesmo bege com contorno dourado do calendário do gerador) */
html:root body .pl-cal-grade .dia.alta:not(:disabled):not(.ini):not(.fim):not(.meio):not(.saida-ok) { background: #FBF0DC !important; border-color: #C9A96E !important; }
html:root body .pl-cal-leg i.l-alta.l-alta { background: #FBF0DC !important; border-color: #C9A96E !important; }
/* 03/11/2026 (Nayara): o interior da alta temporada com um bege só, igual nos dias do calendário e no quadradinho da legenda */
html:root body .pl-cal-grade .dia.alta:not(.ini):not(.fim):not(.meio):not(.saida-ok), html:root body .pl-cal-leg i.l-alta.l-alta { background: #FBF0DC !important; }
/* 03/11/2026 (Nayara): sem contorno dourado nos dias de alta temporada (só o bege por dentro); a legenda acompanha */
html:root body .pl-cal-grade .dia.alta.alta:not(.ini):not(.fim):not(.meio):not(.saida-ok) { border-color: transparent !important; }
html:root body .pl-cal-leg i.l-alta.l-alta { border-color: #E9DCC2 !important; }
/* 03/11/2026 (Nayara): com o calendário, uma lista ou o painel "Viajantes" abertos, somem todos os botões flutuantes
   (Instagram, WhatsApp, a foto da Nayara e o "Monte sua viagem" de cima); voltam quando fecha */
html body.lista-aberta #nb, html body.lista-aberta #nbTopo, html body.lista-aberta .nb-foto, html body.lista-aberta .nb-pilha,
html.pl-viaj-trava body #nb, html.pl-viaj-trava body #nbTopo, html.pl-viaj-trava body .nb-foto, html.pl-viaj-trava body .nb-pilha,
html.pl-viaj-trava body .whatsapp-float, html.pl-viaj-trava body .instagram-float { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; }
html body.lista-aberta .whatsapp-float, html body.lista-aberta .instagram-float, html body.lista-aberta #ajudaBtn, html body.lista-aberta .barra-cel, html body.lista-aberta #nb, html body.lista-aberta .nb-foto { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; }   /* 03/11/2026: some na hora, sem esmaecer */