/* ============================================================
   VERÃO TOUR · MAPA — "o litoral visto de cima"
   Direção: cinematográfico noturno · vidro sobre satélite
   Fraunces (display) + Bricolage Grotesque (UI)
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url("fonts/fraunces/fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage';
  src: url("fonts/bricolage/bricolage-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("fonts/montserrat/montserrat-latin.woff2?v=1") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url("fonts/montserrat/montserrat-italic-latin.woff2?v=1") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --abismo: #050d14;
  --profundo: #081722;
  --vidro: rgba(9, 22, 32, 0.72);
  --vidro-2: rgba(13, 30, 43, 0.6);
  --borda: rgba(255, 255, 255, 0.09);
  --borda-viva: rgba(255, 255, 255, 0.18);
  --espuma: #eef6f9;
  --névoa: rgba(238, 246, 249, 0.82);
  --névoa-2: rgba(238, 246, 249, 0.55);
  --sol: #ffb25e;
  --coral: #ff6b4a;
  --laranja-cta: #ef7d2e;
  --verde-wa: #22c55e;
  --raio: 24px;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
.seo-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-anim *, .no-anim *::before, .no-anim *::after { animation: none !important; transition: none !important; }
/* Após o boot, remove animações de entrada (evita ficarem presas se a aba carregar em 2º plano) */
.booted .panel, .booted .brand, .booted .topnav, .booted .tour-card, .booted .mk-photo { animation: none; }
.grain { animation:none !important; }
.tour-card { content-visibility:auto; contain-intrinsic-size: 240px; }
.nav-pill, .tab, .f-chip, .panel-toggle, .panel-mobile-restore, .scroll-top { min-height:44px; min-width:44px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Mantém o botão lateral posicionado do lado de fora na borda direita do painel aberto. */
@media (min-width: 1025px) {
  .panel-toggle:not(.is-closed) {
    left: calc(100% - 1px) !important;
  }
  .panel.is-hidden {
    transform: translateX(calc(-100% - 24px)) !important;
    opacity: 1 !important;
  }
}
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background: var(--abismo);
  color: var(--espuma);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sol); color: var(--abismo); }

/* Scrollbar fina laranja */
.panel-view::-webkit-scrollbar { width: 4px; }
.panel-view::-webkit-scrollbar-thumb { background: #ff9a3c; border-radius: 999px; }
.panel-view { scrollbar-width: thin; scrollbar-color: #ff9a3c transparent; }

/* ===== Splash ===== */
.splash {
  position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(90% 90% at 50% 20%, #0c2233 0%, var(--abismo) 70%);
  display: grid; place-items: center;
  transition: opacity 0.5s var(--easing), visibility 0.5s;
}
.splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.splash-logo {
  display: block;
  width: min(180px, 48vw);
  height: auto;
  max-height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 0 60px rgba(255, 178, 94, 0.35));
  animation: splashRise 1.2s var(--easing) both;
}
.splash-line {
  width: min(260px, 70vw); height: 5px; border-radius:999px; background: rgba(255,255,255,.12); border:1px solid rgba(255,178,94,.28);
  overflow: hidden; margin-top: 10px;
  animation: splashRise 1.2s 0.4s var(--easing) both;
}
.splash-line span {
  display: block; height: 100%; width: 0;
  border-radius:inherit;
  background: linear-gradient(90deg, #ff8a3d, #ffd09b);
  animation: splashProgress .8s ease-out forwards;
}
.splash-status {
  color: #b8cbd3; font-size: .67rem; font-weight: 700;
  letter-spacing: .04em; text-transform:none; text-align:center; max-width:300px; line-height:1.4;
  animation: splashRise 1.2s .55s var(--easing) both;
}
@keyframes splashRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
@keyframes splashProgress { from { width:0; } to { width:100%; } }

/* ===== Mapa + atmosfera ===== */
#map { position: fixed; inset: 0; z-index: 1; background: var(--abismo); }
.map-grade {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,13,20,.82) 0%, rgba(5,13,20,.25) 34%, transparent 55%),
    linear-gradient(180deg, rgba(5,13,20,.6) 0%, transparent 18%, transparent 78%, rgba(5,13,20,.55) 100%);
}
.grain {
  position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grainShift 9s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0);} 20% { transform: translate(-2%,3%);} 40% { transform: translate(3%,-2%);}
  60% { transform: translate(-3%,-3%);} 80% { transform: translate(2%,2%);}
}
.leaflet-container { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
.leaflet-control-zoom { display: none; }
.leaflet-control-attribution {
  background: rgba(5,13,20,.55) !important; color: rgba(238,246,249,.4) !important;
  font-size: 9px !important; backdrop-filter: blur(6px);
}
.leaflet-control-attribution a { color: rgba(238,246,249,.55) !important; }

/* ===== Topbar ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px; pointer-events: none;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Linha inferior da topbar: 1px em degradê azul escuro. Feita como camada
     de fundo porque border-bottom não aceita gradiente. */
  background:
    linear-gradient(90deg,
      rgba(23,45,78,0) 0%,
      rgba(28,58,100,.8) 12%,
      rgba(45,96,158,1) 50%,
      rgba(28,58,100,.8) 88%,
      rgba(23,45,78,0) 100%) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(3,13,21,.97) 0%, rgba(5,22,35,.94) 58%, rgba(7,27,42,.78) 82%, rgba(7,27,42,0) 100%);
  border-bottom: 0;
  box-shadow: 0 12px 28px rgba(2,12,20,.2);
}
.topbar > * { position: relative; z-index: 1; }
.topbar > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: 13px;
  flex-shrink: 0;
  animation: fadeDown 1s 0.2s var(--easing) both;
  transition: transform 0.3s var(--easing);
  cursor: pointer;
}
.brand:hover {
  transform: scale(1.03);
}
.brand img {
  width: 215px;
  height: 48px;
  max-width: 38vw;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.5));
  transition: transform 0.35s var(--easing), filter 0.35s var(--easing);
}
.brand:hover img {
  filter: drop-shadow(0 4px 22px rgba(255, 178, 94, 0.5));
  transform: rotate(-3deg);
}
.brand-txt { line-height: 1.2; }
.brand-txt strong {
  display: block; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.02rem; font-weight: 620; letter-spacing: 0.01em;
}
.brand-txt span {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--névoa-2);
}
.topnav { display: flex; gap: 10px; animation: fadeDown 1s 0.35s var(--easing) both; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--vidro); backdrop-filter: blur(18px);
  border: 1px solid var(--borda); border-radius: 999px;
  color: var(--espuma); text-decoration: none; cursor: pointer;
  font: 650 0.8rem "Bricolage", sans-serif; letter-spacing: 0.02em;
  padding: 11px 18px;
  transition: border-color 0.25s, transform 0.25s var(--easing), background 0.25s;
}
.nav-pill:hover { border-color: var(--borda-viva); transform: translateY(-2px); }
/* Contorno neutro e fino para manter todas as opções visualmente alinhadas. */
.topnav .nav-pill { border: 1px solid rgba(148, 163, 184, 0.32); }
.topnav .nav-pill:hover { border-color: rgba(203, 213, 225, 0.72); }
.nav-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sol);
  box-shadow: 0 0 10px var(--sol);
}
.nav-cta { border-color: rgba(34,197,94,.35); color: #d9ffe8; }
.nav-cta:hover { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.6); }
.nav-cta svg { color: var(--verde-wa); }
.nav-tide { border-color: rgba(56,189,248,.3); color: #7dd3fc; }
.nav-tide:hover { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.6); box-shadow: 0 0 16px rgba(56,189,248,.15); }
.nav-tide svg { color: #38bdf8; }
/* --- Transfer (Amarelo Dourado) --- */
.nav-transfer { border-color: rgba(250,204,21,.35); color: #fde68a; }
.nav-transfer:hover { background: rgba(250,204,21,.12); border-color: rgba(250,204,21,.65); box-shadow: 0 0 16px rgba(250,204,21,.2); }
.nav-transfer svg { color: #facc15; }
.nav-agencias { border-color: rgba(251,191,36,.35); color: #fde68a; }
.nav-agencias:hover { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.7); box-shadow: 0 0 16px rgba(251,191,36,.2); }
.nav-agencias svg { color: #fbbf24; }
.agencias-directory { position:relative; width:100%; max-width:100%; min-width:0; max-height:86vh; overflow-x:hidden; overflow-y:auto; padding:72px 22px 24px; border:1px solid rgba(251,191,36,.35); border-radius:24px; background:linear-gradient(180deg,#081b27,#030b12); box-shadow:0 24px 60px rgba(0,0,0,.85); }
.agencias-directory .modal-back { position:absolute; top:18px; left:18px; }
.agencias-directory .modal-close { position:absolute; top:16px; right:16px; width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(3,13,21,.78); color:#fff; font:800 1.05rem/1 "Bricolage",sans-serif; cursor:pointer; box-shadow:0 5px 16px rgba(0,0,0,.35); transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.agencias-directory .modal-close:hover, .agencias-directory .modal-close:focus-visible { border-color:#ffb25e; background:rgba(255,159,67,.16); transform:scale(1.04); }
.agencias-directory-head { padding:0 4px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.agencias-directory-logo { display:block; width:min(180px,58%); height:auto; max-height:62px; object-fit:contain; margin:0 auto 14px; filter:drop-shadow(0 4px 12px rgba(255,159,67,.2)); }
.agencias-directory-head > span { color:#ffb25e; font:800 .68rem "Bricolage",sans-serif; letter-spacing:.16em; }
.agencias-directory-head h2 { margin:7px 0 3px; color:#fff; font:800 clamp(1.35rem,3vw,1.9rem) "Fraunces",serif; }
.agencias-directory-head p { margin:0; color:#a9bbc5; font-size:.76rem; line-height:1.45; max-width:520px; }
.agencias-directory-list { display:grid; width:100%; min-width:0; gap:10px; margin-top:16px; }
.agencia-directory-card { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; width:100%; padding:12px; border:1px solid rgba(56,189,248,.24); border-radius:16px; background:linear-gradient(100deg,rgba(5,22,32,.98),rgba(10,43,57,.72)); color:#fff; text-align:left; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.agencia-directory-card:hover,.agencia-directory-card:focus-visible { transform:translateY(-2px); border-color:#ffb25e; background:linear-gradient(100deg,rgba(12,42,55,.98),rgba(20,63,77,.76)); }
.agencia-directory-card > img { width:58px; height:58px; flex:0 0 58px; aspect-ratio:1 / 1; border-radius:10px; object-fit:contain; object-position:center; padding:4px; border:1px solid rgba(255,178,94,.5); background:#fff; }
.agencia-directory-copy { display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden; }
.agencia-directory-copy b { font-size:.86rem; line-height:1.2; overflow-wrap:anywhere; }.agencia-directory-copy small { color:#fbbf24; font-size:.64rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }.agencia-directory-copy em { overflow:hidden; color:#a9bbc5; font-size:.66rem; font-style:normal; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }.agencia-directory-arrow { margin-left:0; color:#ffb25e; font-size:1.7rem; line-height:1; }
@media (max-width:560px) {
  .agencias-directory { width:100%; max-width:100%; padding:78px 10px 16px; border-radius:20px; }
  .agencias-directory-head { padding-inline:2px; }
  .agencias-directory-head p { max-width:none; font-size:.68rem; line-height:1.35; }
  .agencias-directory-list { margin-top:14px; gap:9px; }
  .agencia-directory-card { grid-template-columns:58px minmax(0,1fr) auto; gap:10px; padding:10px; border-radius:14px; }
  .agencia-directory-card > img { width:58px; height:58px; flex-basis:58px; padding:3px; border-radius:9px; }
  .agencia-directory-copy b { font-size:.82rem; }
  .agencia-directory-copy small { font-size:.6rem; }
  .agencia-directory-copy em { display:-webkit-box; font-size:.6rem; line-height:1.25; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .agencia-directory-arrow { font-size:1.45rem; }
}

/* Diretório de agências: o conteúdo precisa caber no modal em celulares
   estreitos, sem criar uma terceira coluna que empurre o texto para fora. */
@media (max-width:560px) {
  .agencias-directory,
  .agencias-directory-list,
  .agencia-directory-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .agencia-directory-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .agencia-directory-card > img {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .agencia-directory-copy {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .agencia-directory-copy b,
  .agencia-directory-copy small,
  .agencia-directory-copy em {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .agencia-directory-copy em {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    text-overflow: clip !important;
  }

  .agencia-directory-arrow {
    display: none !important;
  }
}
/* Espaçamento discreto entre as ações circulares no cabeçalho mobile. */
@media (max-width: 1024px) {
  .topnav { gap: 8px !important; }
}

/* --- Fotografia (Texto Branco & Ícone Azul Negrito) --- */
.nav-photo { border-color: rgba(255, 255, 255, 0.35); color: #ffffff; font-weight: 700; }
.nav-photo svg { color: #38bdf8; stroke-width: 2.85px; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5)); }
.nav-photo:hover { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.65); box-shadow: 0 0 16px rgba(56, 189, 248, 0.25); }
.nav-fotografia { border-color: rgba(255, 255, 255, 0.35); color: #ffffff; font-weight: 800; }
.nav-fotografia svg { color: #38bdf8; stroke-width: 2.85px; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5)); }
.nav-fotografia:hover { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.65); box-shadow: 0 0 16px rgba(56, 189, 248, 0.25); }

/* --- Login (Traçado Laranja no Desktop & Fundo Laranja no Mobile) --- */
.nav-login { 
  border: 1.5px solid var(--sol) !important; 
  color: #ffffff !important; 
  font-weight: 800; 
  text-decoration: none; 
  background: rgba(244, 119, 39, 0.08);
}
.nav-login svg { color: var(--sol); stroke-width: 2.5px; filter: drop-shadow(0 0 4px rgba(244, 119, 39, 0.5)); }
.nav-login:hover { background: rgba(244, 119, 39, 0.22) !important; border-color: var(--sol) !important; box-shadow: 0 0 16px rgba(244, 119, 39, 0.35); }

.mobile-menu-whatsapp-btn,
.mobile-menu-login-btn {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.mobile-menu-whatsapp-btn {
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
}

.mobile-menu-login-btn {
  background: linear-gradient(135deg, #f47727, #d95300) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(244, 119, 39, 0.45) !important;
}
.mobile-menu-login-btn svg {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .nav-login {
    background: linear-gradient(135deg, #f47727, #d95300) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(244, 119, 39, 0.4);
  }
  .nav-login svg {
    color: #ffffff !important;
    filter: none;
  }
}

/* --- Seja Parceiro (Teal / Ciano) --- */
.nav-parceiro { border-color: rgba(20,184,166,.35); color: #99f6e4; }
.nav-parceiro:hover { background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.65); box-shadow: 0 0 16px rgba(20,184,166,.2); }
.nav-parceiro svg { color: #2dd4bf; }

/* --- Cancelamento (Rosa) --- */
.nav-cancel { border-color: rgba(244,114,182,.35); color: #fbcfe8; }
.nav-cancel:hover { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.65); box-shadow: 0 0 16px rgba(244,114,182,.2); }
.nav-cancel svg { color: #f472b6; }
.nav-cancel-icon { width:24px; height:24px; flex:0 0 24px; object-fit:contain; border-radius:50%; display:block; }
.menu-cancel-icon { width:30px; height:30px; flex:0 0 30px; object-fit:contain; border-radius:50%; display:block; }

/* --- Quem Somos (Laranja) --- */
.nav-about { border-color: rgba(255,159,67,.35); color: #fff; }
.nav-about:hover { background: rgba(255,159,67,.12); border-color: rgba(255,159,67,.65); box-shadow: 0 0 16px rgba(255,159,67,.2); }
.nav-about svg, .nav-about img { color: #ff9f43; }
.nav-about img { width:18px; height:18px; object-fit:contain; border-radius:50%; border:1px solid rgba(255,159,67,.58); background:#06141f; }

/* --- Explorar (Esmeralda) --- */
.nav-explore { border-color: rgba(52,211,153,.35); color: #a7f3d0; }
.nav-explore:hover { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.65); box-shadow: 0 0 16px rgba(52,211,153,.2); }
.nav-explore svg { color: #34d399; }

/* --- Tickets (Índigo) --- */
.nav-tickets { border-color: rgba(129,140,248,.35); color: #c7d2fe; }
.nav-tickets:hover { background: rgba(129,140,248,.12); border-color: rgba(129,140,248,.65); box-shadow: 0 0 16px rgba(129,140,248,.2); }
.nav-tickets svg { color: #818cf8; }

/* --- Live (Vermelho pulsante) --- */
.nav-live {
  border: 1.5px solid rgba(239, 68, 68, 0.65) !important;
  color: #ff6b5f !important;
  background: rgba(40, 12, 14, 0.8) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
  position: relative;
  overflow: visible;
  animation: liveGlow 1.8s ease-in-out infinite;
}
.nav-live:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.95) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55) !important;
  transform: translateY(-2px);
}
.nav-live svg { color: #ff6b5f !important; }
.nav-live .pill-txt { color: #ff6b5f !important; font-weight: 800 !important; letter-spacing: 0.05em; }
.nav-live .live-badge { display: none; }
/* O botão LIVE leva para os stories do Instagram, então usa o ícone do Instagram
   também no desktop (no mobile já era assim). A cor vem de `.nav-live svg`. */
.live-broadcast-icon,
.live-mobile-label { display: none; }
.live-instagram-icon { width: 15px; height: 15px; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-18px); } }

#btnMobileMenu {
  display: none;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  background: rgba(7, 24, 32, 0.75);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
#btnMobileMenu:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}
/* Botões exclusivos do mobile (WhatsApp): ocultos no desktop. */
.mobile-only { display: none; }

/* ===== Painel ===== */
.panel {
  position: fixed; z-index: 50;
  top: 92px; left: 26px; bottom: 0 !important;
  width: min(408px, calc(100vw - 52px));
  background: var(--vidro);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: none;
  border-bottom: none !important;
  border-radius: var(--raio) var(--raio) 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.6s var(--easing), opacity 0.4s;
  animation: panelIn 1.1s 0.45s var(--easing) backwards;
}
/* Borda em gradiente perfeita que acompanha todas as curvas e telas */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit !important;
  padding: 1.5px !important;
  background: linear-gradient(135deg, var(--sol), var(--coral));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 100;
}
@keyframes panelIn { from { opacity: 0; transform: translateX(-60px); } }
.panel.is-hidden { transform: translateX(calc(-100% - 60px)); opacity: 0; }
.panel-drag-handle { display: none; }

.panel-view {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
.panel-view.is-active { display: flex; }

/* Indica, sem texto, que ainda existe conteúdo abaixo no painel ativo. */
.panel-scroll-cue {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 16px;
  display: flex;
  align-items: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.panel-scroll-cue.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.scroll-cue-mouse {
  position: relative;
  display: block;
  width: 22px;
  height: 34px;
  border: 3px solid #ff9f43;
  border-radius: 14px;
  box-shadow: 0 5px 0 2px #061a2a, 0 8px 12px rgba(2, 15, 27, .72);
}
.scroll-cue-mouse i {
  display: block;
  width: 4px;
  height: 9px;
  margin: 6px auto 0;
  border-radius: 4px;
  background: #ff9f43;
  animation: panelMouseWheel 2.4s ease-in-out infinite;
}
@keyframes panelMouseWheel {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(6px); opacity: 1; }
}

.panel-head { padding: 24px 28px 10px; }
.panel-head-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.hero-title-group h1 {
  margin-top: 0 !important;
}

.hero-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.trust-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  background: rgba(22, 33, 46, 0.45);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 178, 94, 0.22);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: default;
  user-select: none;
}

.trust-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 154, 60, 0.55);
  background: linear-gradient(135deg, rgba(255, 178, 94, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow: 0 6px 20px rgba(255, 154, 60, 0.2);
}

.trust-badge-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.trust-badge:hover .trust-badge-icon {
  transform: scale(1.1);
}

.trust-shield {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.trust-zap {
  background: rgba(255, 154, 60, 0.16);
  color: #ff9a3c;
  border: 1px solid rgba(255, 154, 60, 0.3);
}

.trust-whats {
  background: rgba(37, 211, 102, 0.16);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.3);
}

.trust-star {
  background: rgba(234, 179, 8, 0.16);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.trust-badge-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trust-badge-content strong {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.trust-badge-content span {
  font-size: 0.59rem;
  color: rgba(235, 240, 243, 0.65);
  white-space: nowrap;
  margin-top: 1px;
  font-weight: 450;
}

.trust-badge-whats {
  animation: trustPulse 4s ease-in-out infinite;
}

@keyframes trustPulse {
  0%, 100% { border-color: rgba(37, 211, 102, 0.25); }
  50% { border-color: rgba(37, 211, 102, 0.6); box-shadow: 0 0 12px rgba(37, 211, 102, 0.22); }
}

@media (max-width: 580px) {
  .panel-head-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .trust-badge {
    padding: 6px 8px;
  }
}

.eyebrow {
  font-size: 0.62rem; font-weight: 750; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--sol);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,178,94,.4), transparent); }
.panel-head h1 {
  margin-top: 14px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 2.3rem; font-weight: 480; line-height: 1.04;
  letter-spacing: -0.015em;
}
.panel-head h1 em {
  font-style: italic; font-weight: 380;
  background: linear-gradient(100deg, var(--sol), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.18em; /* evita corte do "?" em itálico */
}
.lede { margin-top: 14px; font-size: 0.84rem; font-weight: 420; line-height: 1.65; color: var(--névoa); }

/* ===== Cards de passeio ===== */
.tour-list { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 24px; }
.tour-card {
  position: relative; height: 128px;
  border-radius: 18px; overflow: hidden; cursor: pointer;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  border: 1.2px solid rgba(185, 196, 201, 0.78);
  animation: cardIn 0.9s var(--easing) both;
  transition: transform 0.45s var(--easing), border-color 0.3s, box-shadow 0.45s;
  isolation: isolate;
}
.tour-card:nth-child(1) { animation-delay: 0.65s; }
.tour-card:nth-child(2) { animation-delay: 0.75s; }
.tour-card:nth-child(3) { animation-delay: 0.85s; }
.tour-card:nth-child(4) { animation-delay: 0.95s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px); } }
.tour-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 0.9s var(--easing), filter 0.5s;
  filter: saturate(0.92) brightness(0.9);
}
.tour-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(78deg, rgba(4,12,18,.92) 22%, rgba(4,12,18,.55) 55%, rgba(4,12,18,.12) 100%);
  transition: opacity 0.4s;
}
.tour-card:hover { transform: translateY(-4px); border-color: var(--borda-viva); box-shadow: 0 24px 50px -18px rgba(0,0,0,.75); }
.tour-card:hover img { transform: scale(1.07); filter: saturate(1.08) brightness(1); }
.tour-card-body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 16px 96px 16px 20px; gap: 4px;
}
.tour-card-tag {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sol);
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 9px rgba(0,0,0,.72);
}
.tour-card h3 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.34rem; font-weight: 520;
  letter-spacing: -0.01em; line-height: 1.1;
}
.tour-card-meta { font-size: 0.72rem; font-weight: 500; color: var(--névoa); }
.tour-card-price {
  position: absolute; right: 16px; bottom: 14px;
  font-size: 0.68rem; color: var(--névoa); text-align: left; line-height: 1.3;
}
.tour-card-price strong {
  display: block; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.5rem !important; font-weight: 800 !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: none !important;
  background-clip: initial !important;
  filter: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 10px rgba(0, 0, 0, 0.85) !important;
}
.tour-card-arrow {
  position: absolute; right: 16px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--borda-viva);
  display: grid; place-items: center;
  background: rgba(5,13,20,.4); backdrop-filter: blur(6px);
  transition: background 0.3s, transform 0.45s var(--easing);
}
.tour-card:hover .tour-card-arrow { background: var(--sol); color: var(--abismo); transform: rotate(45deg); }

/* ===== Experimento opcional: ?teste=layout ===== */
.layout-test-trust { display: none; }
.layout-test .layout-test-trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 2px 22px -4px; padding: 9px 12px;
  border: 1px solid rgba(50, 210, 128, .24); border-radius: 10px;
  background: linear-gradient(90deg, rgba(24, 146, 89, .16), rgba(10, 37, 47, .35));
  color: #c9f8dd; font-size: .62rem; font-weight: 750; letter-spacing: .02em;
}
.layout-test .layout-test-trust i { width: 3px; height: 3px; border-radius: 50%; background: var(--sol); }
.layout-test .tour-card-test-badge {
  position: absolute; z-index: 4; left: 14px; bottom: 12px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(4, 18, 26, .82); border: 1px solid rgba(255, 178, 94, .48);
  color: var(--sol); font-size: .54rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.layout-test .tour-card-body { padding-bottom: 34px; }
.layout-test .tour-card-price { color: #dce9ee; font-weight: 700; }
.layout-test .tour-card-price strong { color: #fff; font-size: 1.38rem; }
@media (max-width: 680px) {
  .layout-test .tour-list { gap: 11px; padding: 14px 22px 72px; }
  .layout-test .tour-card { height: 116px; }
  .layout-test .tour-card h3 { font-size: 1.18rem; }
  .layout-test .tour-card-body { padding: 13px 92px 31px 17px; }
}

/* ===== Ajustes finos para celulares estreitos (Poco/Xiaomi e similares) ===== */
@media (max-width: 520px) {
  .modal-wrap {
    align-items: center;
    padding: 8px;
  }

  .modal,
  .modal.modal-wide {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 20px;
  }

  /* Os modais de menu/transferência/fotografia têm um container inline. */
  #modalBox.modal-wide > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 20px !important;
  }

  #modalBox.modal-wide > div > .modal-bd {
    min-height: 0;
    max-height: calc(100dvh - 238px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #modalBox.modal-wide > div > div[style*="overflow-y:auto"] {
    min-height: 0;
    max-height: calc(100dvh - 178px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #modalBox .mobile-menu-hd {
    padding: 8px 10px 12px !important;
  }

  #modalBox .mobile-menu-logo {
    width: min(180px, 54vw) !important;
    max-height: 60px !important;
    margin: 8px auto 6px !important;
  }

  #modalBox .mobile-menu-hd h3 {
    font-size: clamp(1.08rem, 4.8vw, 1.35rem) !important;
    line-height: 1.12;
  }

  #modalBox .mobile-menu-hd small {
    font-size: .7rem !important;
  }

  #modalBox .mobile-menu-shell {
    padding: 16px 10px !important;
  }

  #modalBox .mobile-menu-shell > .modal-bd {
    padding: 10px 2px 14px !important;
  }

  #modalBox .menu-option {
    min-height: 54px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  #modalBox .menu-option > span,
  #modalBox .menu-option > img {
    width: 34px !important;
    height: 34px !important;
  }

  #modalBox .menu-option span[style*="font-weight:750"] {
    font-size: .82rem !important;
    line-height: 1.15;
  }

  #modalBox .menu-option small {
    font-size: .67rem !important;
    line-height: 1.2;
  }

  #modalBox .modal-actions {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  #modalBox .modal-actions > button,
  #modalBox .modal-actions > div > button,
  #modalBox .modal-actions > div > a {
    min-width: 0;
    font-size: .76rem !important;
  }

  /* Transferência: o mapa e os pontos diminuem sem quebrar os nomes. */
  #modalBox .transfer-card-opt {
    gap: 9px !important;
    padding: 10px !important;
  }

  #modalBox .transfer-card-opt img {
    width: 48px !important;
    height: 48px !important;
  }

  #modalBox .transfer-card-opt strong {
    font-size: .8rem !important;
    line-height: 1.15;
  }

  #modalBox .transfer-card-opt span {
    font-size: .66rem !important;
    line-height: 1.2;
  }

  #modalBox .transfer-card-opt > div:last-child span:first-child {
    font-size: .9rem !important;
  }

  #modalBox .modal-back {
    max-width: 112px;
    white-space: nowrap;
    overflow: hidden;
  }

  #modalBox .fotografia-hero-banner {
    height: 300px !important;
    background-position: center center !important;
  }
}

@media (max-width: 390px) {
  .modal-wrap {
    padding: 5px;
  }

  .modal,
  .modal.modal-wide,
  #modalBox.modal-wide > div {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    border-radius: 17px !important;
  }

  #modalBox.modal-wide > div > .modal-bd {
    max-height: calc(100dvh - 222px) !important;
  }

  #modalBox .menu-option {
    padding: 9px 10px !important;
  }

  #modalBox .menu-option small {
    font-size: .63rem !important;
  }

  #modalBox .modal-actions > div {
    gap: 7px !important;
  }
}

.panel-foot {
  margin-top: auto; padding: 14px 22px 12px;
  border-top: 1px solid var(--borda);
  font-size: 0.7rem; font-weight: 500; color: var(--névoa-2);
}
.panel-foot-main { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde-wa); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 2s infinite;
}
.foot-lock {
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; flex:0 0 27px;
  border:2px solid rgba(34,197,94,.78); border-radius:50%;
  background:rgba(34,197,94,.12); color:#48ed8b;
  box-shadow:0 0 0 0 rgba(34,197,94,.35);
  animation: footLockPulse 4.8s ease-in-out infinite;
}
.foot-lock svg { display:block; }
.panel-foot-copy { color:#fff; font-size:.82rem; font-weight:850; letter-spacing:.01em; white-space:nowrap; }
.panel-foot-company { display:inline-flex; align-items:center; gap:7px; margin-left:0; justify-self:end; min-width:0; color:#dcecf2; }
.panel-foot-company img { width:34px; height:34px; object-fit:contain; border-radius:50%; border:1px solid rgba(255,178,94,.42); background:#06141f; }
.panel-foot-cadastur { display:inline-flex; align-items:center; justify-content:center; justify-self:center; flex:0 0 auto; margin:0; border-radius:8px; opacity:.94; transition:opacity .2s ease, transform .2s ease, filter .2s ease; }
.panel-foot-cadastur img { display:block; width:116px; height:84px; object-fit:contain; }
.panel-foot-cadastur:hover, .panel-foot-cadastur:focus-visible { opacity:1; transform:translateY(-1px) scale(1.04); filter:drop-shadow(0 0 7px rgba(255,159,67,.35)); }
.panel-foot-company span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.panel-foot-company b { font-size:.68rem; font-weight:850; white-space:nowrap; }
.panel-foot-company small { color:#9fb4bf; font-size:.58rem; white-space:nowrap; }
.panel-foot-bottom { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:7px; }
.panel-foot-copyright { display:block; text-align:center; color:rgba(159,180,191,.7); font-size:.56rem; letter-spacing:.02em; }
@keyframes footLockPulse {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.3); }
  50% { transform:scale(1.08); box-shadow:0 0 0 6px rgba(34,197,94,0); }
}
@media (max-width: 560px) {
  .panel-foot { padding-left:12px; padding-right:12px; }
  .panel-foot-copy { font-size:.72rem; }
  .panel-foot-main { gap:6px; }
  .panel-foot-cadastur { margin:0; }
  .panel-foot-cadastur img { width:84px; height:62px; }
  .panel-foot-company { gap:5px; margin-left:0; }
  .panel-foot-company img { width:29px; height:29px; }
  .panel-foot-company b { font-size:.56rem; }
  .panel-foot-company small { font-size:.5rem; }
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }

/* ===== Detalhe ===== */
.detail-hero { position: relative; height: 240px; overflow: hidden; flex-shrink: 0; z-index: 2; }
.detail-hero img {
  width: 100%; height: calc(100% + 4px); object-fit: cover;
  margin-top: -2px;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: kenburns 16s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.detail-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(5,13,20,.6) 0%, transparent 28%, transparent 50%, rgba(7,19,30,.85) 75%, #07131d 100%);
  pointer-events: none;
}
.detail-back {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(120deg, var(--sol), var(--coral)); backdrop-filter: blur(12px);
  border: none; border-radius: 999px;
  color: #0a1822; cursor: pointer;
  font: 800 0.8rem "Bricolage", sans-serif;
  box-shadow: 0 8px 20px -6px rgba(255,107,74,.55);
  padding: 9px 16px 9px 12px;
  transition: filter 0.25s, transform 0.25s, box-shadow 0.25s;
}
.detail-back:hover { filter: brightness(1.08); transform: translateX(-2px); box-shadow: 0 12px 26px -6px rgba(255,107,74,.7); }
.detail-hero-txt { position: absolute; left: 24px; right: 24px; bottom: 14px; z-index: 4; }
.detail-hero-txt .tour-card-tag { text-shadow: 0 1px 2px rgba(0,0,0,.98), 0 2px 10px rgba(0,0,0,.82); }
.detail-hero-txt h2 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.9rem; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.05; margin-top: 4px;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}
.boat-hero-subtitle {
  margin: 5px 0 0;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
.boat-hero-description {
  display: -webkit-box;
  max-width: calc(100% - 112px);
  margin: 4px 0 0;
  overflow: hidden;
  color: rgba(245,251,253,.96);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.28;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.boat-hero-price {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 16px;
  display: grid;
  justify-items: end;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 12px rgba(0,0,0,.95);
}
.boat-hero-price strong {
  margin-top: 3px;
  color: var(--espuma);
  font: 850 1.38rem/1 "Fraunces", serif;
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 12px rgba(0,0,0,.95);
}
.boat-photo-strip {
  display:flex; gap:9px; padding:12px 22px 2px; overflow-x:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,178,94,.65) transparent;
}
.boat-photo-strip::-webkit-scrollbar { height:5px; }
.boat-photo-strip::-webkit-scrollbar-thumb { background:rgba(255,178,94,.65); border-radius:999px; }
.boat-gallery-thumb {
  width:100px; height:68px; padding:0; flex:0 0 auto; overflow:hidden; cursor:pointer;
  border:2px solid transparent; border-radius:11px; background:#071923; opacity:.7;
  transition:opacity .2s, transform .2s, border-color .2s;
}
.boat-gallery-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.boat-gallery-thumb:hover { opacity:1; transform:translateY(-2px); }
.boat-gallery-thumb.is-active { opacity:1; border-color:var(--sol); box-shadow:0 0 0 2px rgba(255,178,94,.17); }
.vehicle-selector { margin-bottom:4px; }
.vehicle-note { display:block; margin:7px 0 14px; color:var(--sol); font-size:.68rem; font-weight:700; line-height:1.4; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px 0; }
.detail-chips span {
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.03em;
  padding: 7px 13px; border-radius: 999px;
  background: var(--vidro-2); border: 1px solid var(--borda);
  color: var(--névoa);
}
.detail-chips span b { color: var(--espuma); font-weight: 750; }
.detail-info { padding: 14px 26px 0; font-size: 0.83rem; font-weight: 420; line-height: 1.7; color: var(--névoa); }

.gallery { display: flex; gap: 9px; padding: 16px 22px 6px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img {
  width: 118px; height: 80px; object-fit: cover; border-radius: 12px;
  cursor: zoom-in; flex-shrink: 0;
  border: 1px solid var(--borda);
  filter: brightness(0.85);
  transition: filter 0.3s, transform 0.4s var(--easing), border-color 0.3s;
}
.gallery img:hover { filter: brightness(1.05); transform: scale(1.04); border-color: var(--borda-viva); }

.ag-title {
  padding: 22px 26px 2px;
  font-size: 0.62rem; font-weight: 750; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--sol);
  display: flex; align-items: center; gap: 10px;
}
.ag-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,178,94,.4), transparent); }
/* Parágrafo único sob "Agências parceiras". Antes eram dois blocos com recuos
   diferentes (o segundo mantinha 26px enquanto este caía para 18/14px no
   celular), o que deixava o texto visivelmente desalinhado. */
.ag-sub {
  padding: 8px 26px 10px;
  max-width: 62ch;
  font-size: 0.76rem;
  color: var(--névoa-2);
  line-height: 1.55;
  text-wrap: pretty;
}

.ag-card {
  position: relative;
  margin: 10px 22px 0; padding: 16px 18px;
  background: var(--vidro-2);
  border: 1.5px solid rgba(255, 178, 94, 0.45) !important; border-radius: 18px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 16px -3px rgba(255, 178, 94, 0.2);
  animation: cardIn 0.7s var(--easing) both;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ag-card:hover {
  border-color: var(--sol) !important;
  box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.6), 0 0 22px -2px rgba(255, 178, 94, 0.35);
}

/* Numeração no canto superior direito: mostra que aquela agência é uma entre
   várias. Só aparece quando há mais de uma opção para o mesmo passeio. */
.ag-opcao {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid rgba(255, 178, 94, 0.55);
  border-radius: 999px;
  background: rgba(255, 178, 94, 0.12);
  color: var(--sol);
  font: 800 0.62rem/1 "Bricolage", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* Reserva a faixa do selo para o nome e o endereço da agência não correrem
   por baixo dele. Só recua quando o selo existe. */
.ag-opcao ~ .ag-head .ag-head-txt { padding-right: 92px; }
@media (max-width: 380px) {
  .ag-opcao { top: 10px; right: 10px; padding: 3px 8px; font-size: 0.56rem; }
  .ag-opcao ~ .ag-head .ag-head-txt { padding-right: 76px; }
}

/* Traço laranja entre uma agência e a seguinte. Sem ele, os cartões se fundem no
   fundo escuro e o visitante não percebe que a lista continua abaixo. */
.ag-card + .ag-card { margin-top: 22px; position: relative; }
.ag-card + .ag-card::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: -12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 178, 94, 0.75), transparent);
}
.ag-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ag-avatar {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  font: 620 0.95rem "Fraunces", serif; color: var(--abismo);
  background: linear-gradient(135deg, var(--sol), var(--coral));
  box-shadow: 0 8px 20px -6px rgba(255, 122, 74, 0.45);
}
.ag-head-txt { flex: 1; min-width: 0; }
.ag-head-txt h4 {
  font-size: 0.94rem; font-weight: 700; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.badge-check {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8fe6ff; background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px; padding: 2px 8px;
}
.ag-head-txt small { font-size: 0.7rem; font-weight: 500; color: var(--névoa-2); }
.ag-rating { text-align: right; line-height: 1.25; white-space: nowrap; }
.ag-rating b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.05rem; font-weight: 620; color: var(--sol); }
.ag-rating small { display: block; font-size: 0.62rem; color: var(--névoa-2); }
.ag-bio { margin-top: 10px; font-size: 0.77rem; font-weight: 420; line-height: 1.6; color: var(--névoa); }

.offer {
  margin-top: 12px; padding: 13px 15px;
  border: 1px solid var(--borda); border-radius: 14px;
  background: rgba(5, 13, 20, 0.45);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color 0.3s;
}
.offer:hover { border-color: rgba(255, 178, 94, 0.35); }
.offer-cover {
  width:68px; height:68px; flex:0 0 68px; overflow:hidden;
  border-radius:11px; border:1px solid rgba(255,178,94,.35);
  background:linear-gradient(145deg, rgba(255,178,94,.16), rgba(7,25,34,.8));
}
.offer-cover img { width:100%; height:100%; display:block; object-fit:cover; }
/* A miniatura da oferta abre o detalhe do passeio ao ser clicada. */
.offer-cover.is-clickable { padding:0; cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.offer-cover.is-clickable:hover { transform:scale(1.05); border-color:var(--sol); box-shadow:0 6px 18px rgba(255,178,94,.28); }
.offer-cover.is-clickable:focus-visible { outline:2px solid var(--sol); outline-offset:2px; }
.offer-txt { min-width:0; flex:1 1 auto; padding-right: 20px; }
.offer-txt strong { font-size: 0.86rem; font-weight: 750; display: block; line-height: 1.3; color: #fff; word-break: normal; overflow-wrap: anywhere; }
.offer-txt small { display: block; margin-top: 4px; font-size: 0.68rem; color: var(--névoa-2); line-height: 1.45; }
.offer-summary-3lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip;
  font-size: 0.74rem;
  line-height: 1.34;
  color: rgba(220, 235, 245, 0.78);
  margin-top: 5px;
  padding-right: 14px;
  word-break: normal;
  overflow-wrap: break-word;
}
.offer-includes { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 12px; margin:6px 0 0; padding:0; list-style:none; }
.offer-includes li { display:flex; align-items:flex-start; gap:5px; min-width:0; color:var(--névoa); font-size:.67rem; font-weight:700; line-height:1.25; }
.offer-includes li svg { flex:0 0 auto; color:var(--verde-wa); margin-top:1px; }
.offer-side { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.offer-quadriciclo .offer-side { transform: translateY(5px); }
.offer-price {
  color: var(--espuma); line-height: 1.05; text-align: right;
}
.catamara-card .tour-card-body { padding-right: 132px; }
.catamara-card .tour-card-meta { max-width: 205px; line-height: 1.3; }
.catamara-capacity {
  position:absolute; right:14px; bottom:15px; min-width:104px; text-align:right;
  color:var(--sol); font-size:.62rem; font-weight:800; line-height:1.05; text-transform:uppercase;
}
.catamara-capacity span { display:block; margin-bottom:3px; }
.catamara-capacity strong { display:block; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size:1.7rem; font-weight:800; color:var(--espuma); white-space:nowrap; line-height:.95; }
.catamara-capacity small { margin-left:3px; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size:.56rem; font-weight:800; color:var(--névoa); text-transform:lowercase; }
.offer-price small { display:block; margin-bottom:3px; font-size:0.6rem; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; color:#ffffff !important; font-weight:800; letter-spacing:.03em; text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,0.8); white-space:nowrap; }
.offer-price strong { display:block; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size:1.34rem; font-weight:620; white-space:nowrap; }
.offer-buy {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
  margin-top: 6px;
  border: 1.5px solid var(--sol); cursor: pointer; border-radius: 999px;
  background: #071b2a;
  color: #fff !important;
  font: 800 0.74rem "Bricolage", sans-serif; letter-spacing: 0.02em;
  min-height: 36px;
  padding: 8px 16px;
  box-shadow: 0 7px 18px -10px rgba(255, 178, 94, 0.7);
  transition: transform 0.3s var(--easing), box-shadow 0.3s;
}
.offer-buy:hover { transform: translateY(-2px) scale(1.03); background:#0a2638; border-color:#ffc27a; box-shadow: 0 10px 24px -8px rgba(255, 178, 94, 0.8); }

/* Navegação: tipografia única. */
.topnav .nav-pill,
.topnav .nav-pill .pill-txt {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.topnav .nav-pill .pill-txt { font-weight: 750; }

/* Galeria com botões de navegação e scroll suave por toque */
.gallery-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin: 6px 0;
  width: 100%;
}
.gallery {
  display: flex; gap: 9px; padding: 10px 36px 6px;
  overflow-x: auto; scrollbar-width: none; flex: 1;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(7, 24, 32, 0.92); backdrop-filter: blur(10px);
  color: #fff; font-size: 1rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  pointer-events: auto !important;
  user-select: none;
}
.gallery-arrow:hover {
  background: rgba(2, 132, 199, 0.95);
  border-color: #38bdf8;
  color: #fff;
  transform: translateY(-50%) scale(1.12);
}
.gallery-arrow.prev { left: 4px; }
.gallery-arrow.next { right: 4px; }
@media (max-width:420px) {
  .offer {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px;
  }
  .offer-cover { width:56px; height:56px; flex-basis:56px; border-radius:10px; }
  .offer-txt { min-width:0; width:100%; }
  .offer-txt strong { font-size:.79rem; word-break: normal; overflow-wrap: break-word; }
  .offer-includes { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 8px; }
  .offer-includes li { font-size:.64rem; }
  .offer-side {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: right;
  }
  .offer-quadriciclo .offer-side { margin-top: 5px; transform: none; }
  .offer-price { min-width:0; }
  .offer-buy { margin-top:0; white-space:nowrap; }
}

/* ===== Agência: composição desktop responsiva =====
   Mantém o desenho compacto do mobile e dá espaço real ao conteúdo em telas grandes. */
@media (min-width: 1025px) {
  .panel {
    width: min(500px, calc(100vw - 52px));
  }

  .panel-toggle:not(.is-closed) {
    left: calc(100% - 1px) !important;
  }

  #viewDetail .ag-card {
    margin-inline: 18px;
    padding: 18px 20px;
  }

  #viewDetail .ag-bio {
    max-width: 62ch;
    font-size: .8rem;
    line-height: 1.55;
  }

  #viewDetail .ag-card .offer {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) 124px;
    align-items: center;
    gap: 15px;
    padding: 15px 16px;
  }

  #viewDetail .ag-card .offer-cover {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
  }

  #viewDetail .ag-card .offer-txt {
    min-width: 0;
  }

  #viewDetail .ag-card .offer-txt strong {
    font-size: .96rem;
    line-height: 1.24;
  }

  #viewDetail .ag-card .inclui {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 14px;
    margin-top: 8px;
  }

  #viewDetail .ag-card .inclui li {
    min-width: 0;
    font-size: .72rem;
    line-height: 1.28;
  }

  #viewDetail .ag-card .offer-side {
    width: 124px;
    min-width: 124px;
    align-items: flex-end;
  }

  #viewDetail .ag-card .offer-price strong {
    font-size: 1.46rem;
  }

  #viewDetail .ag-card .offer-buy {
    min-width: 100px;
    padding-inline: 15px;
  }
}

@media (min-width: 1025px) and (max-width: 1150px) {
  .panel {
    width: min(460px, calc(100vw - 52px));
  }

  .panel-toggle:not(.is-closed) {
    left: calc(100% - 1px) !important;
  }

  #viewDetail .ag-card .offer {
    grid-template-columns: 72px minmax(0, 1fr) 112px;
    gap: 11px;
    padding-inline: 12px;
  }

  #viewDetail .ag-card .offer-cover {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }

  #viewDetail .ag-card .offer-side {
    width: 112px;
    min-width: 112px;
  }
}

/* ===== Toggle painel ===== */
.panel-toggle {
  position: absolute !important; z-index: 99 !important;
  top: 50% !important; left: calc(100% + 20px) !important; right: auto !important; transform: translateY(-50%) !important;
  width: 38px !important; height: 54px !important;
  border: 1.5px solid #ff9a3c !important;
  border-radius: 14px !important;
  background: rgba(7, 19, 30, 0.94) !important; backdrop-filter: blur(26px) saturate(1.3);
  color: #ff9a3c !important; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 154, 60, 0.25) !important;
  transition: color 0.25s, background 0.25s, box-shadow 0.25s, left 0.3s;
}
.panel-toggle { color: var(--sol) !important; }
.panel-toggle:hover {
  background: rgba(16, 36, 54, 0.98) !important;
  box-shadow: 0 6px 24px rgba(255, 154, 60, 0.5) !important;
  color: #ffffff !important;
}
.panel-toggle.is-closed {
  left: calc(100% + 20px) !important; right: auto !important;
  border: 1.5px solid #ff9a3c !important;
  border-radius: 14px !important;
}
.panel-toggle.is-closed svg { transform: rotate(180deg); }
.panel-toggle svg { transition: transform 0.4s var(--easing); }
.panel-mobile-restore { display: none; }
/* A página principal usa apenas as categorias e os cards; busca e filtros ficam ocultos. */
.panel-head .search-box,
.panel-head #filterRow { display: none !important; }

/* ===== Marcadores: passeios (foto circular) ===== */
.mk { position: relative; width: 64px; height: 64px; cursor: pointer; }
.mk-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 178, 94, 0.6);
  animation: ringPulse 2.6s var(--easing) infinite;
}
@keyframes ringPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.75); opacity: 0; }
}
.mk-photo {
  position: absolute; inset: 6px; border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.75);
  transition: transform 0.4s var(--easing), border-color 0.3s;
  animation: mkIn 0.8s var(--easing) both;
}
@keyframes mkIn { from { opacity: 0; transform: scale(0.3); } }
.mk-photo img { width: 100%; height: 100%; object-fit: cover; }
.mk:hover .mk-photo { transform: scale(1.12); border-color: var(--sol); }
.mk.is-sel .mk-photo { border-color: var(--sol); box-shadow: 0 0 0 4px rgba(255,178,94,.25), 0 12px 30px -8px rgba(0,0,0,.75); }
.mk-label {
  position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font: 700 0.66rem "Bricolage", sans-serif; letter-spacing: 0.04em;
  color: var(--espuma);
  background: rgba(5, 13, 20, 0.72); backdrop-filter: blur(8px);
  border: 1px solid var(--borda);
  padding: 4px 11px; border-radius: 999px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* ===== Marcadores: agências ===== */
.mk-ag {
  display: flex; align-items: center; gap: 8px;
  width: max-content;
  background: rgba(5, 13, 20, 0.78); backdrop-filter: blur(14px);
  border: 1px solid var(--borda-viva);
  border-radius: 999px; padding: 6px 14px 6px 7px;
  font: 650 0.72rem "Bricolage", sans-serif;
  color: var(--espuma);
  white-space: nowrap;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  animation: agIn 0.6s var(--easing) both;
  transition: border-color 0.25s, transform 0.25s var(--easing);
}
.mk-ag:hover { border-color: var(--sol); transform: translateY(-2px); }
@keyframes agIn { from { opacity: 0; transform: translateY(14px) scale(0.85); } }
.mk-ag i {
  width: 24px; height: 24px; border-radius: 50%; font-style: normal;
  background: linear-gradient(135deg, var(--sol), var(--coral));
  color: var(--abismo);
  display: grid; place-items: center;
  font-size: 0.56rem; font-weight: 800;
}
.mk-ag em { font-style: normal; color: var(--sol); font-weight: 800; }

/* Popup */
.leaflet-popup-content-wrapper {
  background: rgba(9, 22, 32, 0.92) !important;
  backdrop-filter: blur(20px);
  color: var(--espuma) !important;
  border: 1px solid var(--borda-viva);
  border-radius: 18px !important;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85) !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.leaflet-popup-tip { background: rgba(9, 22, 32, 0.92) !important; border: 1px solid var(--borda-viva); }
.leaflet-popup-content { margin: 16px 18px !important; }
.leaflet-popup-close-button { color: var(--névoa) !important; }
.poi-photo {
  width:100%; height:110px; object-fit:cover; border-radius:8px;
  margin-bottom:8px; display:block; background:#071923;
}
.poi-photo-fallback {
  height:110px; margin-bottom:8px; border-radius:8px; display:grid; place-items:center;
  border:1px dashed rgba(255,178,94,.45); color:#ffb25e; background:linear-gradient(135deg,#0a2230,#071923);
  font:800 .7rem "Bricolage",sans-serif; letter-spacing:.03em;
}
.pp h4 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.05rem; font-weight: 560; display: flex; gap: 7px; align-items: center; }
.pp p { font-size: 0.74rem; color: var(--névoa); margin: 6px 0 10px; line-height: 1.55; }
.pp button {
  border: none; cursor: pointer; border-radius: 999px; padding: 9px 16px;
  background: var(--laranja-cta);
  color: #fff; font: 800 0.72rem "Bricolage", sans-serif;
}

/* ===== Modal / Ticket ===== */
.modal-wrap {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3, 8, 13, 0.7); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; padding: 22px;
}
.modal-wrap.is-open { display: flex; }
.modal {
  position: relative;
  width: min(440px, 100%);
  background: linear-gradient(170deg, #0d2130, #081522);
  border: 1px solid var(--borda-viva);
  border-radius: 26px;
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden auto; max-height: 92vh;
  animation: modalIn 0.55s var(--easing) both;
}

.modal-drag-handle {
  display: none !important;
}
.modal-drag-handle:hover,
.modal-drag-handle.is-dragging {
  background: linear-gradient(90deg, #ffc107, #ff9800);
  opacity: 1;
  width: 58px;
  height: 6px;
  cursor: grabbing;
}

/* Botão de retorno único e consistente em todas as opções do menu. */
#modalBox button[onclick*="abrirMobileMenu"] {
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  font: 750 .78rem "Bricolage", sans-serif !important;
  box-shadow: none !important;
  white-space: nowrap;
}
#modalBox button[onclick*="abrirMobileMenu"]:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* Mesmo padrão visual para qualquer botão de retorno das telas do menu. */
#modalBox .modal-back,
#modalBox button[onclick*="abrirMobileMenu"] {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  font: 750 .78rem/1 "Bricolage", sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: none !important;
  white-space: nowrap;
}
#modalBox .modal-back:hover,
#modalBox button[onclick*="abrirMobileMenu"]:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* Reserva espaço para retornos posicionados no topo, evitando sobreposição. */
#modalBox > div:has(> button[onclick*="abrirMobileMenu"][style*="position:absolute"]) {
  padding-top: 64px !important;
}
#modalBox > .modal-hd:has(> .modal-back) {
  padding-top: 56px !important;
}
#modalBox > .modal-hd.tide-modal-hd {
  padding-top: 18px !important;
}

/* O mapa de cobertura é apenas informativo: sem rota animada ou área clicável. */
#modalBox .transfer-coverage-map {
  min-height: 210px !important;
}
#modalBox .transfer-coverage-route {
  display: none !important;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(46px) scale(0.94); } }
.modal-hd { padding: 24px 28px 16px; border-bottom: 1px solid var(--borda); }
.reserva-modal .modal-hd { position:relative; padding-top:46px; }
.reserva-modal {
  display: flex; flex-direction: column;
  max-height: min(88svh, 780px);
  overflow: hidden;
  background: linear-gradient(165deg, #102a3c 0%, #081725 47%, #06111b 100%);
}
.reserva-modal .modal-hd {
  flex: 0 0 auto; z-index: 2;
  background: linear-gradient(135deg, rgba(13, 39, 57, .98), rgba(8, 23, 36, .98));
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
.reserva-modal .modal-hd::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 178, 94, .75), rgba(255, 178, 94, .12) 60%, transparent);
}
.reserva-modal .modal-bd {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  padding: 20px 22px 30px 28px;
  scrollbar-width: thin; scrollbar-color: #ff9a3c transparent;
  -webkit-overflow-scrolling: touch;
}
.reserva-modal .modal-bd::-webkit-scrollbar { width: 4px; }
.reserva-modal .modal-bd::-webkit-scrollbar-track { background: transparent; }
.reserva-modal .modal-bd::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff9a3c, #ff7a18); border-radius: 999px; }
.reserva-modal .modal-bd::-webkit-scrollbar-thumb:hover { background: #ffb25e; }
.reserva-modal .modal-back {
  position:absolute; top:12px; left:16px; display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px; border:0; border-radius:8px; background:transparent; color:var(--espuma);
  font:800 .66rem "Bricolage",sans-serif; cursor:pointer; opacity:.88;
}
.reserva-modal .modal-back:first-letter { font-size:1.25rem; line-height:.7; }
.reserva-modal .modal-back:hover { color:var(--sol); background:rgba(255,178,94,.09); opacity:1; }
.modal-hd .eyebrow { margin-bottom: 8px; }
.modal-hd h3 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.modal-hd small { display: block; margin-top: 5px; font-size: 0.76rem; color: var(--névoa); }
.mobile-menu-logo { display: block; width: 98px; height: auto; max-height: 42px; object-fit: contain; object-position: left center; margin: -4px 0 8px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.modal-hd-logo { display: block; width: 120px; max-width: 140px; height: auto; max-height: 42px; object-fit: contain; object-position: center; margin: 0 auto 10px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.tide-calendar { margin: 12px 0 14px; padding: 10px 12px 9px; background: rgba(5,13,20,.35); border: 1px solid var(--borda); border-radius: 14px; }
.tide-region-note { display:inline-flex; width:fit-content; max-width:100%; align-items:center; gap:9px; margin-top:6px; padding:8px 14px; border:1px solid rgba(255,178,94,.28); border-radius:999px; background:linear-gradient(105deg,rgba(12,35,47,.9),rgba(5,15,22,.94)); color:#fff; }
.tide-region-icon { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border:1px solid rgba(255,178,94,.55); border-radius:50%; color:#ffb25e; background:rgba(255,159,67,.09); }
.tide-region-icon svg { color:#fff; stroke:#fff; }
.tide-region-note span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tide-region-note b { color:#ffb25e; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.tide-region-note strong { color:#fff; font-size:.7rem; line-height:1.3; }
/* A visualização principal exibe apenas o gráfico e os resultados da maré. */
.modal-wide .tide-nav,
.modal-wide .tide-ideal { display: none !important; }
.tide-cal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--espuma); text-transform:capitalize; font-size:.82rem; }
.tide-cal-arrow { width:28px; height:28px; border:1px solid var(--borda-viva); border-radius:50%; background:transparent; color:var(--espuma); font-size:1.2rem; cursor:pointer; }
.tide-cal-arrow:hover { color:var(--sol); border-color:var(--sol); }
.tide-cal-week, .tide-cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.tide-cal-week { margin-top:10px; color:var(--névoa-2); font-size:.52rem; font-weight:800; letter-spacing:.08em; text-align:center; }
.tide-cal-grid { margin-top:5px; }
.tide-cal-day, .tide-cal-empty { min-height:30px; border-radius:8px; }
.tide-cal-day { position:relative; border:1px solid transparent; background:rgba(255,255,255,.025); color:var(--névoa); cursor:pointer; font:700 .68rem "Bricolage",sans-serif; }
.tide-cal-day:hover { border-color:var(--borda-viva); color:var(--espuma); }
.tide-cal-day.is-selected { background:var(--sol); color:var(--abismo); border-color:var(--sol); box-shadow:0 0 12px rgba(255,178,94,.35); }
.tide-cal-day.is-disabled { opacity:.25; cursor:not-allowed; }
.tide-cal-day i, .tide-cal-note i { display:block; width:4px; height:4px; margin:2px auto 0; border-radius:50%; background:#38bdf8; }
.tide-cal-note { display:flex; align-items:center; gap:5px; margin-top:8px; color:var(--névoa-2); font-size:.58rem; }
.modal-bd { padding: 18px 28px 26px; }
.modal-bd label {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 6px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: #ffffff;
}
/* Ícone que acompanha o título de cada campo do checkout. */
.modal-bd label > svg { flex: 0 0 auto; color: var(--sol); opacity: 0.95; }
.modal-bd label.cancel-confirm { letter-spacing: normal; text-transform: none; }
.modal-bd input, .modal-bd select {
  width: 100%; padding: 13px 16px;
  background: rgba(5, 13, 20, 0.6);
  border: 1px solid var(--borda); border-radius: 13px;
  font: 600 0.9rem "Bricolage", sans-serif; color: var(--espuma);
  outline: none; transition: border-color 0.25s;
  color-scheme: dark;
}
.modal-bd input:focus, .modal-bd select:focus { border-color: var(--sol); }
.date-picker-field { position:relative; }
.date-native { position:absolute; width:1px !important; height:1px; opacity:0; pointer-events:none; }
.date-picker-trigger { width:100%; min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; background:rgba(5,13,20,.72); border:2px solid var(--sol); border-radius:13px; color:var(--espuma); font:700 .9rem "Bricolage",sans-serif; cursor:pointer; text-align:left; box-shadow:0 0 0 3px rgba(255,178,94,.08); }
.date-picker-trigger:hover, .date-picker-trigger[aria-expanded="true"] { border-color:#ffc27a; box-shadow:0 0 0 4px rgba(255,178,94,.14); }
.date-picker-trigger svg { color:var(--sol); flex:0 0 auto; }
.modal-bd input[type="date"] {
  accent-color: var(--sol);
  color-scheme: dark;
}
.modal-bd input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  opacity: 1;
  cursor: pointer;
  filter: invert(69%) sepia(86%) saturate(1120%) hue-rotate(337deg) brightness(104%) contrast(102%);
}
.date-picker-popover { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px); padding:12px; border:1px solid rgba(255,178,94,.45); border-radius:15px; background:linear-gradient(160deg,#102734,#07131e); box-shadow:0 18px 40px rgba(0,0,0,.45); }
/* No checkout o calendário entra no fluxo do formulário: assim o modal rola até
   ele e o mês aparece inteiro, sem ficar cortado pela borda da janela. */
.reserva-modal .date-picker-popover {
  position: static;
  margin-top: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.date-picker-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--espuma); }
.date-picker-head strong { font-size:.78rem; text-transform:capitalize; color:var(--sol); }
.date-picker-head button { width:30px; height:30px; border:1px solid var(--borda); border-radius:9px; background:rgba(255,255,255,.04); color:var(--espuma); font-size:1.25rem; cursor:pointer; }
.date-picker-head button:hover { border-color:var(--sol); color:var(--sol); }
.date-picker-week, .date-picker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; text-align:center; }
.date-picker-week { margin:12px 0 6px; color:var(--névoa-2); font-size:.58rem; font-weight:800; text-transform:uppercase; }
.date-day { min-height:31px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--espuma); font:700 .7rem "Bricolage",sans-serif; cursor:pointer; }
button.date-day:hover:not(:disabled), .date-day.is-selected { background:var(--sol); color:var(--abismo); border-color:var(--sol); }
.date-day:disabled { color:rgba(255,255,255,.24); cursor:not-allowed; }
.date-day.is-empty { pointer-events:none; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.t-mode-btn {
  transition: all 0.25s ease;
}
.t-mode-btn.is-on {
  border-color: var(--sol) !important;
  background: rgba(255, 154, 60, 0.15) !important;
  color: var(--sol) !important;
  box-shadow: 0 0 12px rgba(255, 154, 60, 0.2);
}

.btn-ghost, .btn-solid {
  flex: 1; padding: 14px; border-radius: 999px; cursor: pointer;
  font: 800 0.82rem "Bricolage", sans-serif; letter-spacing: 0.02em;
  transition: transform 0.3s var(--easing), filter 0.25s;
}
.btn-ghost { background: none; border: 1px solid var(--borda-viva); color: var(--névoa); }
.btn-ghost:hover { border-color: var(--espuma); color: var(--espuma); }
.btn-solid {
  border: none;
  background: var(--laranja-cta);
  /* Mantém o degradê, mas aumenta a leitura sobre a faixa laranja. */
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(3,17,28,.5);
  -webkit-text-stroke: .12px rgba(3,17,28,.28);
  box-shadow: 0 14px 32px -10px rgba(255, 107, 74, 0.6);
}
.btn-solid:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-wa { background: linear-gradient(120deg, #34d97b, #16a34a); box-shadow: 0 14px 32px -10px rgba(34, 197, 94, 0.5); }

/* Opções do menu móvel: bordas e cores sem halo/sombra colorida. */
.menu-option,
.menu-option:hover { box-shadow: none; }

/* Boarding pass */
.ticket {
  position: relative; margin-top: 6px;
  background: linear-gradient(155deg, #f8f4ec, #efe6d6);
  color: #16242e;
  border-radius: 18px; overflow: hidden;
}
.ticket-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px 12px;
}
.ticket-top img { width: 118px; height: 22px; object-fit: contain; object-position: left center; }
.ticket-code {
  font: 800 0.78rem "Bricolage", monospace; letter-spacing: 0.16em;
  color: #b3541e;
}
.ticket-main { padding: 2px 20px 14px; }
.ticket-main h4 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.35rem; font-weight: 560; letter-spacing: -0.01em;
}
.ticket-main > small { font-size: 0.68rem; font-weight: 650; color: #6b7a84; letter-spacing: 0.06em; text-transform: uppercase; }
.ticket-rows { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.ticket-rows small {
  display: block; font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: #93a1aa;
}
.ticket-rows b { font-size: 0.86rem; font-weight: 750; }
.ticket-cut {
  position: relative; border-top: 2px dashed rgba(22, 36, 46, 0.25);
  margin: 4px 0 0;
}
.ticket-cut::before, .ticket-cut::after {
  content: ""; position: absolute; top: -11px; width: 22px; height: 22px;
  border-radius: 50%; background: #0b1b28;
}
.ticket-cut::before { left: -12px; }
.ticket-cut::after { right: -12px; }
.ticket-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 16px; gap: 14px;
}
.ticket-total small { display: block; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #93a1aa; }
.ticket-total b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.5rem; font-weight: 620; color: #b3541e; }
.ticket-checkin { display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid rgba(10,125,63,.22); border-radius:10px; background:rgba(34,197,94,.08); color:#35674c; font-size:.61rem; line-height:1.25; white-space:nowrap; }
.ticket-checkin svg { color:#0a7d3f; flex:0 0 auto; }
.ticket-checkin b { color:#0a7d3f; font-size:.66rem; }
.ticket-directions { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border:1px solid rgba(255,178,94,.55); border-radius:13px; background:linear-gradient(90deg, rgba(255,178,94,.13), rgba(8,29,41,.22)); color:var(--sol); text-decoration:none; box-shadow:0 10px 22px -18px rgba(255,178,94,.65); transition:transform .2s var(--easing), background .2s; }
.ticket-directions:hover { transform:translateY(-2px); background:rgba(255,178,94,.19); }
.ticket-directions > svg:first-child { flex:0 0 auto; }
.ticket-directions span { display:flex; flex:1; flex-direction:column; min-width:0; }
.ticket-directions small { color:var(--névoa-2); font-size:.58rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.ticket-directions b { margin-top:2px; color:var(--espuma); font-size:.84rem; }
.ticket-directions em { overflow:hidden; margin-top:2px; color:var(--névoa); font-size:.62rem; font-style:normal; white-space:nowrap; text-overflow:ellipsis; }
.ticket-directions > svg:last-child { color:var(--sol); flex:0 0 auto; }
.ticket-qr { display: grid; grid-template-columns: repeat(9, 6px); gap: 1.5px; }
.ticket-qr i { width: 6px; height: 6px; background: #16242e; border-radius: 1px; }
.ticket-qr i.o { background: transparent; }
.ticket-note { margin-top: 12px; text-align: center; font-size: 0.66rem; color: var(--névoa-2); line-height: 1.5; }

/* ===== Lightbox ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 8, 13, 0.94); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 88vh; border-radius: 16px;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8);
  animation: modalIn 0.4s var(--easing) both;
}

/* ===== v5: abas de navegação ===== */
.tab-row {
  display: flex; gap: 2px; margin-top: 16px;
  padding: 4px; border-radius: 999px;
  background: rgba(5, 13, 20, 0.75);
  border: 1.5px solid var(--sol) !important;
  box-shadow: 0 0 14px rgba(255, 178, 94, 0.25);
}
.tab {
  flex: 1; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 800 0.82rem "Bricolage", sans-serif; letter-spacing: 0.02em;
  color: var(--sol); padding: 9px 4px; border-radius: 999px;
  transition: all 0.3s var(--easing); white-space: nowrap;
}
.tab svg { flex-shrink: 0; opacity: 1; color: var(--sol); stroke: var(--sol); }
.tab:hover { color: #fff; }
.tab:hover svg { color: #fff; stroke: #fff; }
.tab.is-on {
  background: var(--sol);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(255, 107, 74, 0.5);
}
.tab.is-on svg { color: #fff; stroke: #fff; }
.oferta-card .card-buy {
  position: absolute; right: 16px; bottom: 12px; z-index: 3;
  padding: 8px 15px; font-size: 0.68rem;
}
.oferta-card .tour-card-price { bottom: 52px; }
.oferta-card .tour-card-body { padding-right: 118px; }

.search-box {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(5, 13, 20, 0.5);
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 10px 16px; color: var(--névoa-2);
  transition: border-color 0.25s;
}
.search-box:focus-within { border-color: var(--sol); color: var(--sol); }
.search-box input {
  flex: 1; background: none; border: none; outline: none;
  font: 600 0.84rem "Bricolage", sans-serif; color: var(--espuma);
}
.search-box input::placeholder { color: var(--névoa-2); }

.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.f-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--borda); border-radius: 999px;
  color: var(--névoa); cursor: pointer;
  font: 650 0.68rem "Bricolage", sans-serif;
  padding: 6px 13px;
  transition: all 0.25s;
}
.f-chip:hover { border-color: var(--borda-viva); color: var(--espuma); }
.f-chip.is-on { background: var(--sol); border-color: var(--sol); color: var(--abismo); }

/* Contorno fino para separar melhor as opções no painel */
.tab-row { border: none; }
.tab { border: none; }
.tab.is-on { border-color: rgba(225, 231, 233, 0.92); }
.search-box { border-color: rgba(177, 188, 193, 0.72); }
.f-chip { border-color: rgba(177, 188, 193, 0.68); }
.empty-msg { padding: 26px 10px; text-align: center; font-size: 0.8rem; color: var(--névoa-2); line-height: 1.6; }

/* Aba sem conteúdo cadastrado (ex.: Pacotes, enquanto não há pacotes montados). */
.aba-vazia {
  margin: 14px 22px;
  padding: 34px 22px;
  text-align: center;
  border: 1.5px dashed rgba(255, 178, 94, 0.42);
  border-radius: 18px;
  background: var(--vidro-2);
  color: var(--névoa-2);
}
.aba-vazia svg { color: var(--sol); opacity: 0.85; margin-bottom: 10px; }
.aba-vazia h3 { margin: 0 0 6px; font-size: 1rem; color: #fff; }
.aba-vazia p { margin: 0 auto 18px; max-width: 34ch; font-size: 0.82rem; line-height: 1.6; }
.aba-vazia .btn-solid { display: inline-flex; width: auto; padding: 11px 22px; border-radius: 999px; }
.catalog-empty {
  min-height: 210px; display: grid; place-content: center; gap: 8px;
  padding: 26px 24px; text-align: center; border: 1px dashed rgba(255,178,94,.42);
  border-radius: 18px; background: rgba(6,20,30,.58); color: var(--névoa);
}
.catalog-empty > span { color: var(--sol); display: inline-flex; justify-content: center; }
.catalog-empty h3 { margin: 0; color: var(--espuma); font: 750 1rem "Bricolage", sans-serif; }
.catalog-empty p { margin: 0; max-width: 280px; font-size: .78rem; line-height: 1.5; color: var(--névoa-2); }
.catalog-empty.compact { min-height: 150px; margin: 18px 0; }
.boat-route-options {
  margin-top: 18px; padding: 16px; border: 1px solid rgba(255,178,94,.28);
  border-radius: 16px; background: rgba(255,178,94,.045);
}
.boat-route-options > h3 { margin: 7px 0 3px; color: var(--espuma); font: 750 1rem "Bricolage", sans-serif; }
.boat-route-options > p { margin: 0 0 12px; color: var(--névoa-2); font-size: .76rem; line-height: 1.45; }
.boat-route-options > div { display: grid; gap: 8px; }
.boat-route-choice {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; padding: 10px 14px; border: 1px solid var(--borda-viva); border-radius: 12px;
  background: rgba(5,13,20,.38); color: var(--espuma); text-align: left; cursor: pointer;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; transition: border-color .2s, background .2s, transform .2s;
}
.boat-route-choice:hover { border-color: var(--sol); background: rgba(255,178,94,.09); transform: translateY(-1px); }
.boat-route-choice.is-selected { border-color: var(--sol); background: rgba(255,178,94,.14); box-shadow: inset 0 0 0 1px rgba(255,178,94,.22); }
.boat-route-choice.is-selected::after { content: none !important; display: none !important; }
.boat-route-choice .boat-route-info, .boat-route-choice > span { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.boat-route-choice b { font-size: .84rem; color: var(--espuma); line-height: 1.25; }
.boat-route-choice small { color: var(--névoa-2); font-size: .68rem; line-height: 1.2; }
.boat-route-choice .boat-route-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; flex-shrink: 0; margin-left: auto; text-align: right; }
.boat-route-choice strong, .boat-route-choice .boat-route-price { color: var(--sol); font-size: 1rem; font-weight: 800; white-space: nowrap !important; text-align: right !important; flex-shrink: 0; }
.boat-route-choice .boat-route-tag { display: none; color: var(--sol); font-size: .61rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; text-align: right; white-space: nowrap; }
.boat-route-choice.is-selected .boat-route-tag { display: block; }
.boat-price-box .btn-pay:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  border-color: rgba(255, 122, 0, 0.4) !important;
  background: #071520 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}
.boat-price-box { display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center !important; gap:12px !important; }
.boat-reserve-actions { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0; }
.boat-reserve-actions button { border-radius:999px; transition:all 0.2s ease; }
.boat-reserve-actions .btn-pay {
  width: 165px;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 850;
  border: 1.5px solid var(--sol) !important;
  background: rgba(6, 19, 28, 0.95) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(244, 119, 39, 0.25);
  cursor: pointer;
}
.boat-reserve-actions .btn-pay:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(244, 119, 39, 0.18) !important;
  box-shadow: 0 6px 22px rgba(244, 119, 39, 0.45);
}
.boat-reserve-actions .btn-pay:disabled {
  background: #071520 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}
.boat-reserve-actions .btn-wa-line {
  width: 165px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff !important;
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.boat-reserve-actions .btn-wa-line svg {
  color: #ffffff !important;
  fill: currentColor;
}
.boat-reserve-actions .btn-wa-line:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.5);
}
.boat-reserve-actions .btn-wa-line:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Página individual dos pacotes do Lup Beach Club. */
.lup-offer-hero.image-unavailable {
  background:
    radial-gradient(circle at 78% 16%, rgba(255,178,94,.2), transparent 32%),
    linear-gradient(145deg, #102a36, #071922 68%);
}
.lup-offer-hero.image-unavailable::before {
  content: "LUP BEACH CLUB";
  position:absolute; right:20px; top:22px; z-index:2;
  color:rgba(255,255,255,.12); font:800 .62rem "Bricolage",sans-serif;
  letter-spacing:.22em;
}
.lup-offer-layout { display:grid; gap:16px; padding:14px 22px 26px; }
.lup-offer-layout .detail-chips { padding:0; }
.lup-offer-layout .detail-info {
  padding: 0;
  margin: 0;
  white-space: pre-line;
  /* Regra: descrição compacta, limitada a 4 linhas em qualquer passeio. */
  font-size: clamp(0.86rem, 1.15vw, 0.94rem);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* CTA de WhatsApp logo abaixo das miniaturas da galeria. */
.offer-wa-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 12px 26px 2px;
  padding: 12px 18px;
  border-radius: 13px;
  background: linear-gradient(135deg, #25d366, #1ebe57);
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.offer-wa-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42); filter: brightness(1.05); }
.offer-wa-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Caixa informativa de Local de Encontro (mesma largura, margens e cantos do botão WhatsApp) */
.offer-meeting-point {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin: 8px 26px 12px;
  padding: 11px 16px;
  border-radius: 13px;
  background: rgba(255, 159, 67, 0.1);
  border: 1px solid rgba(255, 159, 67, 0.35);
  color: #ffb25e;
  font-size: 0.86rem;
  font-weight: 700;
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .offer-wa-cta { margin: 10px 16px 2px; font-size: 0.85rem; padding: 11px 14px; }
  .offer-meeting-point { margin: 8px 16px 10px; padding: 10px 14px; font-size: 0.82rem; }
}
.lup-package-info {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(255,178,94,.3);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,178,94,.09), rgba(5,19,29,.3));
}
.lup-package-info h3 { margin: 7px 0 13px; color: var(--espuma); font: 800 1.12rem/1.2 "Bricolage", sans-serif; }
.lup-package-info ul { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px; margin:0; padding:0; list-style:none; }
.lup-package-info li { display:flex; align-items:flex-start; gap:8px; color:var(--espuma); font-size:.84rem; font-weight:750; line-height:1.35; }
.lup-package-info li svg { color:var(--verde-wa); }
.lup-package-price { display:grid; grid-template-columns:minmax(0,1fr) 146px; align-items:center; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.lup-package-price small { display:block; color:var(--névoa-2); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.lup-package-price strong { display:block; margin-top:4px; color:var(--espuma); font:850 1.55rem/1 "Fraunces", serif; }
.lup-package-price strong .price-cents { display:inline; margin-left:1px; font-size:.42em; line-height:1; vertical-align:baseline; position:relative; top:-.02em; }
.lup-package-price .btn-pay { width:auto; min-width:124px; flex:none; padding:13px 26px; font-size:.88rem; white-space:nowrap; }
@media (max-width: 680px) {
  .lup-offer-hero { height:180px; }
  .lup-offer-layout { padding:14px 18px 24px; gap:14px; }
  .lup-package-info { padding:16px; }
}
@media (max-width: 420px) {
  .lup-package-price { grid-template-columns:minmax(0,1fr) 132px; gap:10px; }
  .lup-package-price .btn-pay { padding:12px 22px; font-size:.84rem; }
  .lup-package-info ul { gap:9px 12px; }
  .lup-package-info li { font-size:.78rem; }
}

/* Marketplace de transfer: cards organizados por imagem, informação e ação. */
#modalBox .transfer-market-shell {
  background: linear-gradient(155deg, #071b2a 0%, #061017 48%, #07131d 100%) !important;
  border-color: rgba(56,189,248,.36) !important;
}
#modalBox .transfer-market-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
#modalBox .transfer-market-trust span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 10px;
  background: rgba(14,47,65,.52);
  color: #9edfff;
  font-size: .62rem;
  text-align: center;
}
#modalBox .transfer-market-trust svg { color: #38bdf8; }
#modalBox .transfer-market-section > div:first-child span {
  color: #ffb25e !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
}
#modalBox .transfer-market-section > div:first-child div { background: rgba(255,178,94,.2) !important; }
#modalBox .transfer-market-section .transfer-card-opt {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 86px;
  padding: 12px !important;
  border: 1px solid rgba(56,189,248,.2) !important;
  border-radius: 16px !important;
  background: linear-gradient(105deg, rgba(11,35,49,.96), rgba(5,18,28,.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
#modalBox .transfer-market-section .transfer-card-opt:hover {
  transform: translateY(-2px);
  border-color: rgba(255,178,94,.62) !important;
  background: linear-gradient(105deg, rgba(14,48,66,.98), rgba(7,25,37,.98)) !important;
}
#modalBox .transfer-market-section .transfer-card-opt img {
  width: 88px !important;
  height: 66px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,178,94,.34) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.28);
}
#modalBox .transfer-market-section .transfer-card-opt > div:nth-child(2) { min-width: 0; }
#modalBox .transfer-market-section .transfer-card-opt > div:nth-child(2) strong {
  color: #f8fbfd !important;
  font-size: .91rem !important;
  line-height: 1.25;
}
#modalBox .transfer-market-section .transfer-card-opt > div:nth-child(2) span {
  display: block;
  margin-top: 5px;
  color: #9fb1be !important;
  font-size: .68rem !important;
  line-height: 1.35;
}
#modalBox .transfer-market-section .transfer-card-opt > div:last-child {
  min-width: 94px;
  text-align: right !important;
}
#modalBox .transfer-market-section .transfer-card-opt > div:last-child span:first-child {
  color: #ffbd72 !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.18rem !important;
  line-height: 1;
}
#modalBox .transfer-market-section .transfer-card-opt > div:last-child span:last-child {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(255,178,94,.4);
  border-radius: 999px;
  color: #ffd09b !important;
  font-size: .58rem !important;
  font-weight: 800;
}
@media (max-width: 560px) {
  #modalBox .transfer-market-trust { gap: 5px; }
  #modalBox .transfer-market-trust span { font-size: .54rem; padding: 5px 4px; }
  #modalBox .transfer-market-section .transfer-card-opt {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0;
  }
  #modalBox .transfer-market-section .transfer-card-opt img { width:68px !important; height:58px !important; }
  #modalBox .transfer-market-section .transfer-card-opt > div:last-child {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
  }
  #modalBox .transfer-market-section .transfer-card-opt > div:last-child span:last-child { margin-top:0; }
}
@media (max-width: 390px) {
  .boat-price-box { grid-template-columns:1fr; }
  .boat-reserve-actions { justify-items:stretch; }
  .boat-reserve-actions .btn-pay, .boat-reserve-actions .btn-wa-line { width:100%; }
}

/* Reserva e pagamento: contraste e controles consistentes.
   Sem o combinador ">" para continuar valendo dentro de .reserva-steps. */
.modal-bd label:not(.cancel-confirm) {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.modal-bd input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  transform: scale(1.28);
  filter: invert(73%) sepia(66%) saturate(760%) hue-rotate(338deg) brightness(105%) contrast(101%);
}
.modal-hd-with-back { position:relative; padding-top:46px; }
.modal-hd-with-back .modal-back {
  position:absolute; top:12px; left:16px; display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px; border:0; border-radius:8px; background:transparent; color:var(--espuma);
  font:800 .66rem "Bricolage",sans-serif; cursor:pointer; opacity:.88;
}
.modal-hd-with-back .modal-back:first-letter { font-size:1.25rem; line-height:.7; }
.modal-hd-with-back .modal-back:hover { color:var(--sol); background:rgba(255,178,94,.09); opacity:1; }
.modal-back svg { flex: 0 0 auto; }
.modal-back > span { font-size: .72rem; }
#modalBox .link-cancel[onclick*="abrirTicket"] { display:none !important; }

.hero-act svg { fill: none; stroke: currentColor; stroke-width: 2; }
.hero-actions { position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; gap: 8px; }
.hero-act {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borda-viva);
  background: rgba(5,13,20,.5); backdrop-filter: blur(12px);
  color: var(--espuma); cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.25s;
}
.hero-act:hover { background: rgba(5,13,20,.8); transform: scale(1.08); }

/* ===== v3: melhor preço, vagas ===== */
.offer { position: relative; }
.offer.is-best { border-color: rgba(255, 178, 94, 0.5); background: rgba(255, 178, 94, 0.06); }
.best-badge {
  position: absolute; top: -9px; left: 12px;
  font-size: 0.54rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(120deg, var(--sol), var(--coral));
  color: var(--abismo); border-radius: 999px; padding: 3px 10px;
}
.offer-vagas { color: var(--verde-wa) !important; font-weight: 700 !important; }
.offer-vagas.is-low { color: var(--sol) !important; }
.offer-vagas.is-out { color: var(--coral) !important; }

/* ===== v3: reviews ===== */
.reviews-toggle {
  margin-top: 12px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font: 700 0.68rem "Bricolage", sans-serif; letter-spacing: 0.06em;
  color: var(--névoa-2); padding: 6px;
  transition: color 0.25s;
}
.reviews-toggle:hover { color: var(--sol); }
.reviews-toggle.is-open svg { transform: rotate(180deg); }
.reviews-toggle svg { transition: transform 0.3s; }
.reviews { display: none; }
.reviews.is-open { display: block; animation: cardIn 0.4s var(--easing); }
.review { padding: 10px 4px; border-top: 1px solid var(--borda); }
.review-hd { display: flex; justify-content: space-between; font-size: 0.72rem; }
.review-hd b { color: var(--espuma); }
.review-hd span { color: var(--sol); letter-spacing: 0.1em; font-size: 0.66rem; }
.review p { margin-top: 4px; font-size: 0.74rem; line-height: 1.55; color: var(--névoa); }

/* ===== v3: CTA fixo no detalhe ===== */
.sticky-cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px;
  background: linear-gradient(180deg, transparent, rgba(5, 13, 20, 0.92) 30%);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borda);
}
#viewDetail.is-active ~ .sticky-cta, #viewDetail.is-active .sticky-cta { display: flex; }
.sticky-cta-txt small { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--névoa-2); }
.sticky-cta-txt b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.3rem; font-weight: 620; }
.sticky-btn { flex: 0 1 auto; padding: 13px 22px; }

/* ===== v3: carteira ===== */
.wallet-count {
  min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--coral); color: #fff;
  font-size: 0.6rem; font-weight: 800;
  display: inline-grid; place-items: center; padding: 0 5px;
}
.wallet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px; margin-top: 10px;
  background: rgba(5, 13, 20, 0.5);
  border: 1px solid var(--borda); border-radius: 14px;
  cursor: pointer; transition: border-color 0.25s;
}
.wallet-item:hover { border-color: var(--sol); }
.wallet-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.wallet-txt { flex: 1; min-width: 0; }
.wallet-txt b { font-size: 0.86rem; display: block; }
.wallet-txt small { font-size: 0.7rem; color: var(--névoa-2); }
.wallet-item .ticket-code { font-size: 0.62rem; }

/* ===== v3: disponibilidade na reserva ===== */
.disp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.disp {
  font-size: 0.7rem; font-weight: 750;
  color: var(--verde-wa);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 999px; padding: 6px 13px;
}
.disp.is-low { color: var(--sol); background: rgba(255,178,94,.1); border-color: rgba(255,178,94,.35); }
.disp.is-out { color: var(--coral); background: rgba(255,107,74,.1); border-color: rgba(255,107,74,.35); }
.disp-wx { color: var(--espuma); background: rgba(255,255,255,.06); border-color: var(--borda-viva); }
.btn-solid:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ===== v7: checklist de inclusos + voltar ao topo ===== */
.inclui {
  list-style: none; margin: 7px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 4px;
}
.offer-catamara .inclui { grid-template-columns: 1fr; row-gap: 5px; }
.inclui li {
  font-size: 0.7rem; font-weight: 550; color: var(--névoa);
  display: flex; align-items: baseline; gap: 5px; line-height: 1.35;
}
.inclui li svg { color: var(--verde-wa); flex: 0 0 auto; }
.inclui li::before {
  content: ""; flex-shrink: 0; width: 12px; height: 12px; margin-top: 2px;
  background: var(--verde-wa);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.scroll-top {
  position: absolute; left: 16px; right: auto; bottom: 16px; z-index: 12;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--sol);
  background: rgba(9, 22, 32, 0.85); backdrop-filter: blur(14px);
  color: var(--sol); cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all 0.35s var(--easing);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.7);
}
.scroll-top.is-vis { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { border-color: var(--sol); color: var(--sol); transform: translateY(-2px); }

/* ===== v8: regras de cancelamento ===== */
.cancel-rules { display: flex; flex-direction: column; gap: 9px; }
.cancel-rule {
  padding: 12px 15px; border-radius: 13px;
  background: rgba(5, 13, 20, 0.5);
  border: 1px solid var(--borda);
  border-left-width: 3px;
}
.cancel-rule b { display: block; font-size: 0.82rem; font-weight: 750; }
.cancel-rule span { display: block; margin-top: 3px; font-size: 0.74rem; line-height: 1.55; color: var(--névoa); }
.cancel-rule.is-ok { border-left-color: var(--verde-wa); }
.cancel-rule.is-ok b { color: #7ee2a8; }
.cancel-rule.is-mid { border-left-color: var(--sol); }
.cancel-rule.is-mid b { color: var(--sol); }
.cancel-rule.is-no { border-left-color: var(--coral); }
.cancel-rule.is-no b { color: #ff9b82; }
.cancel-rule.is-white,
.cancel-rule.is-transfer,
.cancel-rule:not([class*="is-"]) { border-left-color: #ffffff !important; }
.cancel-rule.is-white b,
.cancel-rule.is-transfer b,
.cancel-rule:not([class*="is-"]) b { color: #ffffff; }

/* ===== v6: transfer privativo ===== */
.lbl-opc { color: var(--névoa-2); font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.transfer-opts { display: flex; flex-direction: column; gap: 8px; }
.t-opt {
  text-align: left; cursor: pointer;
  background: rgba(5, 13, 20, 0.6);
  border: 1px solid var(--borda); border-radius: 13px;
  padding: 11px 15px; color: var(--espuma);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  transition: border-color 0.25s, background 0.25s;
}
.t-opt:hover { border-color: var(--borda-viva); }
.t-opt.is-on {
  border-color: var(--sol);
  background: rgba(255, 178, 94, 0.08);
  box-shadow: 0 0 0 1px var(--sol) inset;
}
.t-opt b { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 750; }
.t-opt b svg { width: 20px !important; height: 20px !important; color: var(--sol); }
.t-opt small { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--névoa-2); }
.transfer-pickup {
  margin-top: 12px; padding: 14px;
  border: 1px solid rgba(255, 178, 94, 0.35); border-radius: 13px;
  background: rgba(255, 178, 94, 0.06);
}
.transfer-pickup[hidden] { display: none; }
.transfer-pickup-head { display: flex; align-items: center; gap: 7px; color: var(--sol); font-size: 0.78rem; font-weight: 800; }
.transfer-pickup-head svg { color: var(--sol); }
.transfer-pickup p { margin: 5px 0 12px; color: var(--névoa-2); font-size: 0.68rem; line-height: 1.45; }
.transfer-pickup label { display: block; margin: 10px 0 5px; font-size: 0.66rem; color: var(--névoa); letter-spacing: 0.04em; }
.transfer-pickup label b { color: var(--sol); }
.transfer-pickup input { width: 100%; box-sizing: border-box; }
.modal-bd .cancel-confirm {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px;
  margin: 16px 0 12px; padding: 11px 12px;
  border: 1px solid var(--borda); border-radius: 11px;
  background: rgba(5, 13, 20, 0.38); color: var(--névoa-2);
  font-size: 0.68rem; line-height: 1.45; letter-spacing: 0; text-transform: none;
}
.modal-bd .cancel-confirm input { width: 17px; height: 17px; min-height: 17px; margin: 1px 0 0; padding: 0; border-radius: 4px; accent-color: var(--sol); }
.modal-bd .cancel-confirm span { display: block; min-width: 0; }
.cancel-confirm a { color: var(--sol); font-weight: 800; text-decoration: underline; }
.total-preview {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 12px 16px;
  background: rgba(255, 178, 94, 0.07);
  border: 1px dashed rgba(255, 178, 94, 0.4); border-radius: 13px;
}
.total-preview span { font-size: 0.72rem; color: var(--névoa); }
.total-preview b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.15rem; font-weight: 650; color: var(--sol); white-space: nowrap; }

/* Resumo de pagamento: total acima do sinal, com destaque para o valor cobrado. */
.total-preview { display:block; }
.total-preview-info { min-width:0; }
.total-preview-info > span { display:block; font-size:.72rem; color:var(--névoa); line-height:1.35; }
.total-preview-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:7px; }
.total-preview-row small { color:var(--névoa-2); font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.total-preview-row strong { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size:1.2rem; font-weight:700; color:var(--espuma); white-space:nowrap; }
.total-preview-row.sinal { margin-top:3px; padding-top:7px; border-top:1px solid rgba(255,178,94,.18); }
.total-preview-row.sinal small { color:var(--sol); }
.total-preview-row.sinal b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size:1.5rem; line-height:1; font-weight:800; color:var(--sol); white-space:nowrap; text-shadow:0 0 16px rgba(255,178,94,.28); }

/* Campo de Cupom: botão menor e laranja */
.coupon-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.coupon-row input { flex: 1; min-width: 0; }
#applyCoupon.coupon-apply, .coupon-apply {
  flex: 0 0 auto;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  background: var(--sol) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0 !important;
  border-radius: 10px !important;
  font: 800 0.8rem "Bricolage", system-ui, sans-serif !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(244, 119, 39, 0.28);
  transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}
#applyCoupon.coupon-apply:hover, .coupon-apply:hover {
  background: #ffc27a !important;
  box-shadow: 0 4px 14px rgba(255, 178, 94, 0.45);
  transform: translateY(-1px);
}
#applyCoupon.coupon-apply:active, .coupon-apply:active {
  transform: translateY(0);
}

/* ===== v3: toasts ===== */
.toasts {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 250; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: rgba(9, 22, 32, 0.94); backdrop-filter: blur(16px);
  border: 1px solid var(--borda-viva); border-radius: 999px;
  color: var(--espuma);
  font: 650 0.78rem "Bricolage", sans-serif;
  padding: 11px 20px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8);
  animation: toastIn 0.5s var(--easing) both;
}
.toast.is-out { animation: toastOut 0.5s var(--easing) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(24px) scale(0.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px) scale(0.94); } }
.toast-ic {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(120deg, var(--sol), var(--coral));
  color: var(--abismo); font-size: 0.7rem; font-weight: 800;
  display: grid; place-items: center;
}

/* ===== v3: rota animada ===== */
.route-line { animation: dashFlow 1.4s linear infinite; filter: drop-shadow(0 0 6px rgba(255,178,94,.5)); }
@keyframes dashFlow { to { stroke-dashoffset: -20; } }

/* ===== v3: lightbox nav ===== */
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--borda-viva);
  background: rgba(5,13,20,.6); backdrop-filter: blur(10px);
  color: var(--espuma); font-size: 1.5rem; cursor: pointer;
  display: grid; place-items: center; z-index: 5;
  transition: background 0.25s, transform 0.25s;
}
.lb-nav:hover { background: rgba(5,13,20,.9); }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }

/* ===== v3: skeleton / fade-in de imagens ===== */
.tour-card img, .gallery img, .wallet-item img {
  background: linear-gradient(110deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.tour-card img { opacity: 0; transition: opacity 0.5s ease; }
.tour-card img.loaded { opacity: 1; animation: none; }
.gallery img { opacity: 0.001; transition: opacity 0.5s ease, filter 0.3s, transform 0.4s var(--easing), border-color 0.3s; }
.gallery img.loaded { opacity: 1; animation: none; }

/* ===== v3: pill clima / tour ===== */
.nav-wx { font-size: 0.9rem; }
#btnTour.is-on { background: var(--sol); color: var(--abismo); border-color: var(--sol); }
.tour-ic { flex-shrink: 0; }

/* ===== v4: tábua de marés ===== */
.modal.modal-wide { width: min(760px, 100%); }

/* Correção final de largura: esta regra vem depois do padrão desktop para não cortar o modal no mobile. */
@media (max-width: 520px) {
  .modal-wrap {
    width: 100vw;
    max-width: 100vw;
    padding: 8px !important;
    overflow: hidden;
  }

  .modal.modal-wide,
  #modalBox.modal-wide {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #modalBox.modal-wide > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-height: 88vh !important;
  }
}

#modalBox > div {
  max-height: 88vh;
  box-sizing: border-box;
}

@media (max-width: 390px) {
  .modal.modal-wide,
  #modalBox.modal-wide {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
  }
}
.photo-gallery-modal { width: min(1180px, calc(100vw - 28px)); height: min(820px, calc(100dvh - 28px)); padding:0; overflow:hidden; background:#071922; }
.photo-modal-head { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 20px; background:#06151d; border-bottom:1px solid rgba(190,205,210,.22); color:var(--espuma); font:700 .76rem Bricolage,system-ui,sans-serif; letter-spacing:.04em; }
.photo-modal-close { width:28px; height:28px; border:1px solid rgba(190,205,210,.32); border-radius:50%; background:transparent; color:var(--névoa); font-size:1.2rem; cursor:pointer; line-height:1; }
.photo-modal-close:hover { border-color:var(--sol); color:var(--sol); }
.photo-gallery-frame { display:block; width:100%; height:calc(100% - 46px); min-height:0; border:0; background:#071922; }
@media(max-width:700px){.photo-gallery-modal{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:14px}.photo-modal-head{height:42px;padding-left:14px}.photo-gallery-frame{height:calc(100% - 42px)}}
.tide-bd { padding-top: 14px; }
.tide-date { display: flex; align-items: center; gap: 12px; }
.tide-date > b {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.05rem; font-weight: 560;
  text-transform: capitalize; letter-spacing: 0.01em;
}
.tide-ideal {
  display: block; width: 100%; text-align: center;
  margin: 0 0 12px; padding: 10px 16px;
  border-radius: 12px; cursor: pointer;
  background: rgba(255, 178, 94, 0.07);
  border: 1px dashed rgba(255, 178, 94, 0.4);
  color: var(--névoa);
  font: 600 0.76rem "Bricolage", sans-serif; line-height: 1.5;
  transition: border-color 0.25s, background 0.25s;
}
.tide-ideal b { color: var(--sol); font-weight: 800; }
.tide-ideal:hover { border-color: var(--sol); background: rgba(255, 178, 94, 0.12); }
.tide-ideal.is-on {
  cursor: default;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.tide-ideal.is-on b { color: var(--verde-wa); }
.tide-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.tide-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borda-viva); background: rgba(5,13,20,.5);
  color: var(--espuma); font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.25s;
}
.tide-arrow:hover:not(:disabled) { border-color: var(--sol); color: var(--sol); }
.tide-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.tide-hoje {
  border: 1px solid var(--borda-viva); background: none; border-radius: 999px;
  color: var(--névoa); font: 700 0.74rem "Bricolage", sans-serif;
  padding: 8px 18px; cursor: pointer; transition: all 0.25s;
}
.tide-hoje:hover { color: var(--espuma); }
.tide-hoje.is-on { background: var(--sol); border-color: var(--sol); color: var(--abismo); }

.tide-chart-wrap {
  background: rgba(5, 13, 20, 0.55);
  border: 1px solid var(--borda); border-radius: 16px;
  padding: 10px 6px 10px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sol) #07131e;
}
.tide-chart-wrap::-webkit-scrollbar { height: 10px; }
.tide-chart-wrap::-webkit-scrollbar-track {
  background: #07131e;
  border: 2px solid rgba(255,255,255,.06);
  border-radius: 999px;
}
.tide-chart-wrap::-webkit-scrollbar-thumb {
  min-width: 54px;
  background: linear-gradient(90deg, var(--sol), var(--coral));
  border: 2px solid #07131e;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,178,94,.38);
}
.tide-chart-wrap::-webkit-scrollbar-thumb:hover { background: var(--sol); }
@media (max-width: 700px) {
  /* O filtro SVG de granulação é somente decorativo e pesa na GPU de celulares. */
  .grain { display: none; }
}
.tide-svg { width: 100%; min-width: 980px; height: auto; display: block; }
.td-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.td-grid-h { stroke-dasharray: 3 5; stroke: rgba(255, 255, 255, 0.07); }
.td-m { fill: rgba(238, 246, 249, 0.7); font: 800 10px "Bricolage", sans-serif; text-anchor: end; }
.td-day { fill: var(--sol); font: 800 11px "Bricolage", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; }
.td-day-div { stroke: rgba(255, 178, 94, 0.25); stroke-width: 1; stroke-dasharray: 4 6; }
.td-curve { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.45)); stroke-linecap: round; }
.td-area { animation: tideRise 1.2s var(--easing) both; transform-origin: bottom; }
@keyframes tideRise { from { transform: scaleY(0); } }
.td-dot { stroke-width: 2; }
.td-dot.is-hi { fill: #38bdf8; stroke: #041019; }
.td-dot.is-lo { fill: var(--coral); stroke: #041019; }
.td-time { font: 900 13px "Bricolage", sans-serif; text-anchor: middle; }
.td-time.is-hi { fill: #93e2ff; }
.td-time.is-lo { fill: #ffa58f; }
.td-alt { fill: rgba(238, 246, 249, 0.85); font: 700 10px "Bricolage", sans-serif; text-anchor: middle; }
.td-now { stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 2 4; }
.td-now-dot {
  fill: var(--coral); stroke: #fff; stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(255, 107, 74, 0.8));
  animation: nowPulse 1.8s ease-in-out infinite;
}
@keyframes nowPulse { 50% { r: 8; } }

.tide-status { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tide-status > div {
  flex: 1; min-width: 125px;
  background: rgba(13, 30, 43, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px;
  padding: 11px 13px; line-height: 1.35;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.tide-status small { display: block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(238, 246, 249, 0.75); margin-bottom: 4px; }
.tide-status b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.25rem; font-weight: 650; }
.tide-now .is-up { display: block; font-size: 0.68rem; font-weight: 800; color: var(--verde-wa); }
.tide-now .is-down { display: block; font-size: 0.68rem; font-weight: 800; color: var(--coral); }
.tide-next span { display: block; font-size: 0.68rem; color: var(--névoa); }
.tide-dica span { font-size: 0.7rem; color: var(--névoa); line-height: 1.45; display: block; }
.tide-dica b { font-size: 0.7rem; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; color: #7dd3fc; }

/* ===== v10: POIs, barquinho, chips, QR, idiomas, TV, onboarding ===== */
:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; border-radius: 4px; }

.mk-poi {
  display: flex; align-items: center; gap: 5px; width: max-content;
  pointer-events: none; opacity: 0.9;
}
.mk-poi-interactive {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.mk-poi-interactive span {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-poi-interactive:hover span {
  border-color: var(--sol) !important;
  background: rgba(5, 13, 20, 0.95) !important;
  transform: scale(1.15) translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(255, 178, 94, 0.4);
}
.mk-poi-interactive em {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-poi-interactive:hover em {
  color: var(--sol) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 178, 94, 0.5) !important;
  transform: translateX(1px);
}
.mk-poi span {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(5, 13, 20, 0.75); border: 1px solid var(--borda-viva);
  display: grid; place-items: center; font-size: 0.65rem;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.7);
}
.mk-poi em {
  font: 650 0.6rem "Bricolage", sans-serif; font-style: normal;
  color: rgba(238, 246, 249, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0,0,0,.8);
  line-height: 1.15; /* permite rótulo em duas linhas (ex.: Embarque / Ilha 01) */
}

.mk-poi-beach span {
  background: rgba(8, 48, 74, 0.85) !important;
  border: 1.5px solid #22d3ee !important;
  color: #22d3ee !important;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.45);
}
.mk-poi-beach em {
  font-weight: 750 !important;
  color: #e0f7fa !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1) !important;
}
.mk-poi-beach:hover span {
  border-color: var(--sol) !important;
  color: var(--sol) !important;
  box-shadow: 0 0 12px rgba(255, 178, 94, 0.6);
}
.mk-poi-beach:hover em {
  color: var(--sol) !important;
}

.mk-boat {
  font-size: 1.15rem; line-height: 30px; text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.chip-link {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 7px 13px; border-radius: 999px; text-decoration: none;
  background: rgba(255, 178, 94, 0.1); border: 1px solid rgba(255, 178, 94, 0.4);
  color: var(--sol); transition: background 0.25s;
}
.chip-link:hover { background: rgba(255, 178, 94, 0.2); }
.chip-hoje {
  font-size: 0.68rem; font-weight: 650;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.3);
  color: #a8dfff;
}

.ticket-qr-real { width: 112px; height: 112px; background: #fff; padding: 5px; border-radius: 6px; }
.ticket-qr-real svg { width: 100%; height: 100%; display: block; }
.note-link { color: var(--sol); text-decoration: none; font-weight: 700; }
.note-link:hover { text-decoration: underline; }

.cadastur { height: 22px; margin-left: auto; opacity: 0.8; filter: grayscale(0.2); }
.langs { display: flex; gap: 3px; }
.lang {
  border: 1px solid transparent; background: none; cursor: pointer;
  font: 800 0.62rem "Bricolage", sans-serif; letter-spacing: 0.06em;
  color: var(--névoa-2); padding: 4px 7px; border-radius: 7px;
  transition: all 0.2s;
}
.lang:hover { color: var(--espuma); }
.lang.is-on { color: var(--sol); border-color: rgba(255, 178, 94, 0.4); }

.onboard-tip {
  position: fixed; z-index: 90;
  left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(6, 17, 26, 0.96); backdrop-filter: blur(16px);
  border: 1.5px solid var(--sol); border-radius: 999px;
  color: #ffffff !important; cursor: pointer;
  font: 800 0.92rem "Bricolage", sans-serif;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  text-align: center !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(255, 178, 94, 0.18);
  animation: toastIn 0.6s var(--easing) both, tipFloat 2.4s 1s ease-in-out infinite;
}
.onboard-tip span {
  color: #ffffff !important;
  font-weight: 800;
  text-align: center;
}
.onboard-tip svg {
  color: var(--sol);
  flex-shrink: 0;
}
@keyframes tipFloat { 50% { transform: translateX(-50%) translateY(-6px); } }
.onboard-tip[hidden] { display: none; }

/* Modo TV (vitrine ?tv) */
body.tv .panel, body.tv .panel-toggle, body.tv .topnav, body.tv .toasts { display: none !important; }
.tv-overlay {
  position: fixed; right: 30px; bottom: 30px; z-index: 95;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(9, 22, 32, 0.9); backdrop-filter: blur(18px);
  border: 1px solid var(--borda-viva); border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
}
.tv-overlay[hidden] { display: none; }
.tv-overlay img { height: 52px; }
.tv-qr { width: 120px; height: 120px; background: #fff; border-radius: 10px; padding: 6px; }
.tv-qr svg { width: 100%; height: 100%; display: block; }
.tv-overlay p { font: 650 0.72rem "Bricolage", sans-serif; color: var(--névoa); max-width: 150px; text-align: center; line-height: 1.4; }

/* ===== v11: pagamento (Mercado Pago) + ticket com status ===== */
.pay-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.btn-pay, .btn-wa-line {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px; border-radius: 999px; cursor: pointer;
  font: 800 0.86rem "Bricolage", sans-serif; letter-spacing: 0.02em;
  transition: transform 0.3s var(--easing), filter 0.25s;
}
.btn-pay { border: none; background:var(--laranja-cta); color:#fff; font-weight:800; text-shadow:0 1px 3px rgba(3,17,28,.5); -webkit-text-stroke:.12px rgba(3,17,28,.28); box-shadow: 0 14px 32px -10px rgba(255, 107, 74, 0.6); }
.btn-pay:hover { transform: translateY(-2px); filter: brightness(1.08); }

.btn-pill-dark-outline {
  background: #071520 !important;
  border: 1.5px solid #ff7a00 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: "Bricolage", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 122, 0, 0.15) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.btn-pill-dark-outline:hover {
  background: #0c1e2d !important;
  border-color: #ff9429 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.35) !important;
}
.btn-pill-dark-outline:active {
  transform: translateY(0) scale(0.98) !important;
}
.btn-wa-line { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.4); color: #7ee2a8; }
.btn-wa-line:hover { background: rgba(34, 197, 94, 0.18); }
.link-cancel { display: block; margin: 6px auto 0; background: none; border: none; cursor: pointer; color: var(--névoa-2); font: 650 0.76rem "Bricolage", sans-serif; padding: 6px; }
.link-cancel:hover { color: var(--espuma); }

.pay-demo {
  font-size: 0.72rem; line-height: 1.5; color: #ffd9a8;
  background: rgba(255, 178, 94, 0.09); border: 1px dashed rgba(255, 178, 94, 0.4);
  border-radius: 11px; padding: 10px 13px; margin-bottom: 14px;
}
.pag-opts { display: flex; gap: 8px; margin-bottom: 4px; }
.pag-opt {
  flex: 1; text-align: left; cursor: pointer;
  background: rgba(5, 13, 20, 0.6); border: 1px solid var(--borda); border-radius: 13px;
  padding: 11px 14px; color: var(--espuma); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  transition: border-color 0.25s, background 0.25s;
}
.pag-opt:hover { border-color: var(--borda-viva); }
.pag-opt.is-on { border-color: var(--sol); background: rgba(255, 178, 94, 0.08); box-shadow: 0 0 0 1px var(--sol) inset; }
/* Cores por forma de pagamento: verde = paga tudo agora, amarelo = sinal de 50%. */
.pag-opt-integral b { color: #34d399; }
.pag-opt-integral.is-on { border-color: #34d399; background: rgba(52, 211, 153, 0.1); box-shadow: 0 0 0 1px #34d399 inset, 0 0 16px rgba(52, 211, 153, 0.18); }
.pag-opt-integral:hover { border-color: rgba(52, 211, 153, 0.6); }
.pag-opt-sinal b { color: #fbbf24; }
.pag-opt-sinal.is-on { border-color: #fbbf24; background: rgba(251, 191, 36, 0.1); box-shadow: 0 0 0 1px #fbbf24 inset, 0 0 16px rgba(251, 191, 36, 0.18); }
.pag-opt-sinal:hover { border-color: rgba(251, 191, 36, 0.6); }

/* Card de lancha na marina: 4 inclusos em 2 colunas (2 à esquerda, 2 à direita)
   e o bloco de valor + "Ver detalhes" ancorado no canto inferior direito. */
.boat-duracao {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; padding: 3px 8px;
  border-radius: 999px; border: 1px solid rgba(255, 178, 94, 0.3);
  background: rgba(255, 178, 94, 0.09); color: var(--sol);
  font-size: 0.66rem; font-weight: 750;
}
.boat-offer {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.boat-inclui {
  flex: 1; min-width: 0; list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.boat-inclui li {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 700; color: #ffffff !important; line-height: 1.25;
  white-space: nowrap;
}
.boat-inclui li span { color: #ffffff !important; font-weight: 700; }
.boat-inclui li svg { flex: 0 0 auto; color: #34d399; }
.boat-offer-side { flex: 0 0 auto; text-align: right; align-self: flex-end; }
.boat-offer-side .offer-price { font-size: 1.1rem; font-weight: 800; color: var(--espuma); white-space: nowrap; }
.boat-offer-side .offer-price small { font-size: 0.65rem; color: var(--névoa-2); font-weight: 400; }
.boat-offer-side .offer-buy { margin-top: 5px; }
@media (max-width: 560px) {
  .boat-offer { flex-direction: column; align-items: stretch; }
  .boat-offer-side { text-align: right; }
}

/* Etapas do checkout: só aparecem depois que o horário é escolhido. */
.time-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; padding: 10px 13px;
  border: 1px dashed rgba(255, 178, 94, 0.4); border-radius: 12px;
  background: rgba(255, 178, 94, 0.06);
  color: var(--sol); font-size: 0.78rem; font-weight: 650;
}
.time-hint svg { flex: 0 0 auto; }
.reserva-steps[hidden] { display: none; }
.reserva-steps.is-revealing { animation: reservaStepsIn 0.32s ease both; }
@keyframes reservaStepsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pag-opt b { display: block; font-size: 0.82rem; font-weight: 750; }
.pag-opt small { display: block; margin-top: 2px; font-size: 0.66rem; color: var(--névoa-2); }
.pay-sinal {
  font-size: 0.72rem; color: var(--névoa); text-align: center;
  margin: -8px 0 14px; padding: 8px 12px;
  background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 11px;
}
.pay-sinal b { color: #a8dfff; }
.pix-comprovante {
  display: block; text-align: center; margin-top: 10px;
  font-size: 0.74rem; font-weight: 700; color: var(--verde-wa); text-decoration: none;
}
.pix-comprovante:hover { text-decoration: underline; }
.tk-status.is-sinal { color: #0369a1; background: rgba(56, 189, 248, 0.18); margin-left: 6px; }
.tk-sinal-note { display: block; font-size: 0.56rem; font-weight: 700; color: #93a1aa; margin-top: 2px; letter-spacing: 0.02em; }
.pay-demo b { color: var(--sol); }
.pay-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: 14px; margin-bottom: 16px;
  background: rgba(5, 13, 20, 0.5); border: 1px solid var(--borda);
}
.pay-total span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--névoa-2); }
.pay-total b { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 1.6rem; font-weight: 640; color: var(--sol); }
.pay-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.pay-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: 13px; cursor: pointer;
  background: rgba(5, 13, 20, 0.5); border: 1px solid var(--borda);
  color: var(--névoa); font: 750 0.78rem "Bricolage", sans-serif;
  transition: all 0.25s;
}
.pay-tab:hover { border-color: var(--borda-viva); color: var(--espuma); }
.pay-tab.is-on { border-color: var(--sol); color: var(--sol); background: rgba(255, 178, 94, 0.08); }

.pix-box { text-align: center; }
.pix-qr {
  width: 190px; height: 190px; margin: 0 auto; padding: 12px;
  background: #fff; border-radius: 16px;
}
.pix-qr svg { width: 100%; height: 100%; display: block; }
.pix-qr img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pix-loading { height: 100%; display: grid; place-items: center; padding: 20px; text-align: center; color: #24303a; font: 800 0.76rem "Bricolage", sans-serif; }
.pix-inst { font-size: 0.76rem; color: var(--névoa); margin: 14px 4px 10px; line-height: 1.5; }
.pix-copy { display: flex; gap: 8px; }
.pix-copy input {
  flex: 1; min-width: 0; padding: 11px 13px; font-size: 0.72rem;
  background: rgba(5, 13, 20, 0.6); border: 1px solid var(--borda); border-radius: 11px;
  color: var(--névoa); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; outline: none;
}
.pix-copy button {
  border: none; cursor: pointer; border-radius: 11px; padding: 0 16px;
  background: rgba(255, 178, 94, 0.14); color: var(--sol);
  font: 800 0.74rem "Bricolage", sans-serif;
}
.btn-pix-check { width: 100%; margin-top: 14px; border: none; cursor: pointer; padding: 14px; border-radius: 999px; background:var(--laranja-cta); color:#fff; font: 800 0.84rem "Bricolage", sans-serif; }
.btn-pix-check:hover { filter: brightness(1.08); }
.btn-pix-check:disabled { opacity: 0.5; cursor: wait; }

.card-box { text-align: center; }
.card-mp {
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 14px 16px; border-radius: 14px; margin-bottom: 16px;
  background: rgba(5, 13, 20, 0.5); border: 1px solid var(--borda);
}
.card-mp img { height: 40px; flex-shrink: 0; }
.card-mp p { font-size: 0.76rem; line-height: 1.55; color: var(--névoa); }
.card-mp b { color: var(--sol); }
.card-box .btn-solid { width: 100%; }
.card-box .btn-solid:disabled { opacity: 0.5; cursor: wait; }
.pay-safe { font-size: 0.68rem; color: var(--névoa-2); margin-top: 12px; }
.stripe-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  padding: 15px;
  border-radius: 16px;
  text-align: left;
  border: 1px solid rgba(255, 159, 67, 0.34);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 159, 67, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(5, 13, 20, 0.88), rgba(8, 28, 40, 0.72));
}
.stripe-preview-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.stripe-kicker {
  color: var(--sol);
  font: 900 0.62rem "Bricolage", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stripe-preview-copy strong {
  color: #fff;
  font: 900 0.95rem "Bricolage", sans-serif;
}
.stripe-preview-copy small {
  color: var(--névoa);
  font-size: 0.72rem;
  line-height: 1.45;
}
.btn-stripe-checkout {
  width: auto !important;
  min-width: 190px;
  padding-inline: 18px;
  border: 1px solid rgba(255, 159, 67, 0.72) !important;
  background: linear-gradient(135deg, #101923, #172536) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.stripe-preview[data-ready="true"] {
  border-color: rgba(34, 197, 94, 0.46);
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(5, 13, 20, 0.9), rgba(7, 34, 30, 0.76));
}
.stripe-preview[data-ready="true"] .btn-stripe-checkout {
  border-color: rgba(34, 197, 94, 0.75) !important;
  background: linear-gradient(135deg, #0d1f18, #123e2c) !important;
}
.stripe-preview[data-ready="false"] .btn-stripe-checkout {
  opacity: 0.76;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .stripe-preview {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .btn-stripe-checkout {
    width: 100% !important;
    min-width: 0;
  }
}

/* Ticket: status e QR bloqueado */
.ticket.is-pending { filter: saturate(0.9); }
.ticket-status-row { margin-bottom: 6px; }
.tk-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.tk-status.is-paid { color: #0a7d3f; background: rgba(34, 197, 94, 0.16); }
.tk-status.is-sinal { color: #8a5600; background: rgba(245, 158, 11, 0.24); }
.tk-status.is-pend { color: #b3541e; background: rgba(255, 178, 94, 0.2); }
.qr-locked { position: relative; }
.qr-locked .ticket-qr-real { filter: blur(5px); opacity: 0.5; }
.qr-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-size: 1.1rem;
}
.qr-lock span { font: 800 0.5rem "Bricolage", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #16242e; text-align: center; max-width: 74px; line-height: 1.2; }
.wallet-status { display: inline-block; margin-top: 3px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; }
.wallet-status.is-paid { color: var(--verde-wa); }
.wallet-status.is-pend { color: var(--sol); }

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
  /* No mobile, os nomes ficam sob os ícones para facilitar a descoberta das ações. */
  .topnav { align-items: flex-start; padding-bottom: 16px; }
  #waMobile, #btnLive, #btnWallet, #btnTour, #btnMobileMenu { overflow: visible !important; }
  #waMobile::after, #btnLive::after, #btnWallet::after, #btnTour::after, #btnMobileMenu::after {
    position: absolute; top: calc(100% + 4px); left: 50%;
    transform: translateX(-50%); white-space: nowrap;
    pointer-events: none; content: "";
    color: currentColor; font: 800 .46rem/1 "Bricolage", sans-serif;
    letter-spacing: .02em; text-shadow: 0 1px 5px rgba(0,0,0,.9);
  }
  #waMobile::after { content: "WhatsApp"; }
  #btnLive::after { content: "LIVE"; }
  #btnWallet::after { content: "Tickets"; }
  #btnTour::after { content: "Tour Guiado"; }
  #btnMobileMenu::after { content: "Menu"; }

  .brand-txt { display: none; }
  .topbar { padding: max(6px, env(safe-area-inset-top, 0px)) 14px 10px !important; gap: 12px; }
  .brand { margin-right: auto; padding-right: 8px; margin-top: -3px !important; }
  .brand img { height: 30px; width: auto; max-width: 105px; object-fit: contain; flex-shrink: 0; }
  .topnav { gap: 6px; align-items: center; }
  .nav-pill { padding: 8px 10px; font-size: 0.72rem; }
  .nav-pill .pill-txt { display: none !important; }
  .topnav > * { display: none !important; }

  /* Botões secundários no mobile (Live, Explorar, Tickets, WhatsApp) com tamanho reduzido */
  #waMobile, #btnLive, #btnWallet, #btnTour {
    display: inline-flex !important;
    width: 35px !important; height: 35px !important;
    border-radius: 50% !important;
    align-items: center; justify-content: center;
    padding: 0;
    background: rgba(7,24,32,.82);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    position: relative;
    flex-shrink: 0;
  }

  /* Botão de Menu Principal mantido com tamanho padrão em destaque */
  #btnMobileMenu {
    display: inline-flex !important;
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    align-items: center; justify-content: center;
    padding: 0;
    background: rgba(7, 24, 32, 0.88) !important;
    border: 2px solid #0284c7 !important;
    color: #38bdf8 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(2, 132, 199, 0.22) !important;
    flex-shrink: 0;
  }
  #btnMobileMenu:hover {
    border-color: #38bdf8 !important;
    color: #7dd3fc !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.4) !important;
  }
  #waMobile, #waTop { color: #25d366 !important; border-color: rgba(37,211,102,0.45) !important; background: rgba(37,211,102,0.12) !important; }
  #waMobile:hover, #waTop:hover { border-color: #25d366 !important; background: rgba(37,211,102,0.22) !important; box-shadow: 0 0 14px rgba(37,211,102,0.4) !important; }
  
  .wallet-count { display: none !important; }
  
  #btnWallet.has-tickets {
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.7) !important;
    background: rgba(34, 197, 94, 0.15) !important;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.5) !important;
    animation: ticketPulse 2s ease-in-out infinite;
  }
  @keyframes ticketPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); transform: scale(1); }
    50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.75); transform: scale(1.05); }
  }

  /* Explorar selecionado no mobile: fundo laranja + ícone escuro visível */
  #btnTour.is-on {
    background: var(--sol) !important;
    border-color: var(--sol) !important;
    color: var(--abismo) !important;
    box-shadow: 0 0 14px rgba(255,178,94,.55) !important;
  }
  #btnTour.is-on svg {
    color: var(--abismo) !important;
    stroke: var(--abismo) !important;
    fill: var(--abismo) !important;
  }

  /* Botão LIVE (Instagram ao vivo): tons vermelhos + pulso */
  /* Botão LIVE (Instagram ao vivo): tons vermelhos + pulso */
  #btnLive {
    border: 1.6px solid rgba(255,59,48,.7);
    color: #ff6b5f;
    background: rgba(40,12,14,.85);
    overflow: visible;
    animation: liveGlow 1.8s ease-in-out infinite;
  }
  #btnLive .live-ring {
    position: absolute; inset: -3px; border-radius: 999px;
    border: 2px solid rgba(255,59,48,.8);
    animation: livePulse 1.8s ease-out infinite;
    pointer-events: none;
  }
  #btnLive .live-broadcast-icon { display: none; }
  #btnLive .live-instagram-icon { display: block; color: #ff4d45; }
  #btnLive .live-mobile-label {
    display: inline-flex;
    position: absolute;
    top: -7px;
    right: -8px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(120deg, #ff3b30, #ff6b5f);
    font: 900 .46rem/1 "Bricolage", sans-serif;
    letter-spacing: .04em;
    box-shadow: 0 2px 8px rgba(255,59,48,.5);
  }
  #btnLive .live-badge {
    position: absolute; top: -4px; right: -8px;
    font: 800 .5rem "Bricolage", sans-serif; letter-spacing: .06em;
    color: #fff; background: linear-gradient(120deg,#ff3b30,#ff6b5f);
    padding: 2px 5px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255,59,48,.6);
    display: inline-flex; align-items: center; gap: 3px;
  }
  #btnLive .live-badge::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 4px #fff;
    animation: liveBlink 1s steps(1) infinite;
  }
  @keyframes liveGlow { 0%,100% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 10px rgba(255,59,48,.35); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 20px rgba(255,59,48,.65); } }
  @keyframes livePulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes liveBlink { 0% { opacity: 1; } 50% { opacity: .2; } }

/* Rótulos compactos sob os ícones da barra mobile. */
@media (max-width: 1024px) {
  .topnav { align-items: flex-start !important; padding-bottom: 16px; }
  #waMobile, #btnLive, #btnWallet, #btnTour, #btnMobileMenu { position: relative; overflow: visible !important; }
  #waMobile::after, #btnLive::after, #btnWallet::after, #btnTour::after, #btnMobileMenu::after {
    position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; pointer-events: none; color: currentColor;
    font: 800 .46rem/1 "Bricolage", sans-serif; letter-spacing: .02em;
    text-shadow: 0 1px 5px rgba(0,0,0,.9);
  }
  #waMobile::after { content: "WhatsApp"; }
  #btnLive::after { content: "LIVE"; }
  #btnWallet::after { content: "Tickets"; }
  #btnTour::after { content: "Tour Guiado"; }
  #btnMobileMenu::after { content: "Menu"; }
  .panel-foot { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap:6px; padding-left:12px; padding-right:12px; }
  .panel-foot-cadastur { justify-self:center; margin:0; }
  .panel-foot-cadastur img { width:82px; height:62px; }
  .panel-foot-company { justify-self:end; margin-left:0; }
}

  /* Header do Menu Modal: Sombra Preta Menor na Logomarca */
  .mobile-menu-hd {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 10px !important;
  }
  /* Botão de voltar continua visível e no topo-esquerdo também no mobile (só o do menu, que tem X, fica oculto) */
  .btn-menu-back { display: none !important; }
  .modal-back {
    display: inline-flex !important;
    top: 12px !important; left: 12px !important;
    padding: 7px 12px 7px 10px !important;
    z-index: 20 !important;
  }
  .mobile-menu-logo {
    width: min(200px, 58vw) !important;
    height: auto !important;
    max-height: 72px !important;
    object-fit: contain;
    margin: 14px auto 8px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    animation: logoZoomPulse 6s ease-in-out infinite !important;
  }
  @keyframes logoZoomPulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    }
    50% {
      transform: scale(1.06);
      filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
    }
  }

  /* Opções do Menu Modal: Background Padronizado estilo Política de Cancelamento e Texto Branco Alinhado */
  .menu-option {
    min-height: 56px !important;
    border-radius: 16px !important;
    padding: 13px 18px !important;
    background: rgba(9, 22, 32, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 750 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  }
  /* Coluna de texto (título + descrição) precisa poder encolher e quebrar linha */
  .menu-option > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .menu-option span {
    color: #ffffff !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
  .menu-option small {
    display: block;
    white-space: normal !important;
    overflow-wrap: break-word;
    line-height: 1.3;
  }
  .menu-option:hover {
    background: rgba(13, 30, 43, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) !important;
  }
  
  .panel {
    position: fixed;
    top: auto; left: 12px; right: 12px; bottom: 0 !important;
    width: auto; height: min(66vh, 760px); max-height: calc(100dvh - 20px);
    transform: translateY(0);
    transition: transform 0.4s var(--easing), opacity 0.4s;
    background: var(--vidro) !important;
    backdrop-filter: blur(26px) saturate(1.3) !important;
    border: 1px solid rgba(255, 154, 60, 0.35) !important;
    border-bottom: none !important;
    outline: none !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 10px 40px rgba(255, 107, 74, 0.12), 0 40px 90px -30px rgba(0, 0, 0, 0.8) !important;
  }

  /* Scale down circular tour markers on mobile */
  .mk { width: 44px !important; height: 44px !important; }
  .mk-photo { inset: 4px !important; border-width: 1.5px !important; }
  .mk-label { font-size: 0.58rem !important; padding: 2px 7px !important; }
  .panel.is-expanded {
    transform: translateY(0) !important;
    /* Deixa espaço no topo para a logomarca/menu — nunca sobe atrás deles. */
    height: calc(100dvh - 92px) !important;
    max-height: calc(100dvh - 92px) !important;
  }
  .panel.is-collapsed {
    transform: translateY(0) !important;
  }
  .panel.is-hidden {
    transform: translateY(calc(100% + 20px)) !important;
    opacity: 0;
  }
  
  .panel-drag-handle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 24px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 40;
    margin-top: 2px;
    overflow: visible;
  }
  .panel-drag-handle::before {
    content: "";
    position: absolute;
    left: 18px; right: 18px; top: 11px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,178,94,.75) 15%, #ff9f43 50%, rgba(255,178,94,.75) 85%, transparent);
    box-shadow: 0 0 8px rgba(255,132,68,.4);
  }
  .panel-head {
    touch-action: auto !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .panel-head-hero {
    touch-action: auto !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .detail-hero {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: auto !important;
    user-select: none;
  }
  .detail-back {
    z-index: 999999 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .panel-drag-handle span {
    display: block;
    position: relative;
    width: 52px;
    height: 24px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: transform .2s var(--easing), filter .2s var(--easing);
  }
  .panel-drag-handle span i {
    position: relative;
    display: block;
    width: 32px;
    height: 21px;
    margin: -4px auto 0;
    border: 0;
    background: #ff9f43;
    clip-path: polygon(0 0, 50% 68%, 100% 0, 100% 30%, 50% 100%, 0 30%);
    animation: none;
    filter: none;
    transition: filter .18s ease, opacity .18s ease, background-color .18s ease;
  }
  .panel-drag-handle span i::after {
    content: none;
  }
  .panel-drag-handle span i:nth-child(2) { animation-delay: .16s; opacity: .86; }
  .panel-drag-handle span i:nth-child(3) { animation-delay: .32s; opacity: .7; }
  .panel-drag-handle:hover span i,
  .panel-drag-handle:focus-visible span i {
    background: #ffb15f;
    filter: drop-shadow(0 0 5px rgba(255, 159, 67, .72));
  }
  .panel-drag-handle:active span i {
    background: #d97720;
    filter: none;
    opacity: .78;
  }
  @keyframes panelChevronFloat {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(3px); }
  }
  .panel-drag-handle b {
    display: block;
    position: absolute;
    right: 16px;
    top: 5px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
  }
  .panel-drag-handle:active {
    cursor: grabbing;
  }
  .panel-drag-handle:hover span, .panel-drag-handle:active span {
    transform: none;
    filter: none;
  }
  .panel-drag-handle:focus-visible { outline: none; }
  .panel-drag-handle:focus-visible span { filter: none; }
  
  .panel-toggle { display: none; }
  .panel-mobile-restore {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    transform: translateX(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: linear-gradient(135deg, #ef7d2e 0%, #ff9f43 100%);
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.84rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(239, 125, 46, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(14px);
    touch-action: manipulation;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .panel-mobile-restore span {
    color: #ffffff;
    font-weight: 850;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .panel-mobile-restore svg {
    color: #ffffff;
    stroke: #ffffff;
    width: 16px;
    height: 16px;
    stroke-width: 2.8px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  }
  .panel:not(.is-hidden) ~ .panel-mobile-restore,
  .panel-mobile-restore:not(.is-visible) { display: none !important; }
  .panel.is-hidden ~ .panel-mobile-restore.is-visible { display: inline-flex !important; }
  .panel-drag-handle b { pointer-events: none; }

  .panel-view { min-height:0; height:100%; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; padding-bottom:env(safe-area-inset-bottom, 12px); }
  .tour-list { flex:0 0 auto; padding-bottom:72px; }
  .panel-foot { flex-shrink:0; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
  /* Estilização Responsiva das Abas (.tab-row e .tab) sem cortes no mobile */
  .tab-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(4, 15, 24, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    border: 1.5px solid var(--sol) !important;
    border-radius: 999px !important;
    padding: 5px !important;
    margin-top: 14px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 178, 94, 0.25) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    gap: 3px !important;
  }
  .tab-row::-webkit-scrollbar { display: none !important; }
  .tab {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 8px 3px !important;
    border-radius: 999px !important;
    border: none !important;
    background: transparent !important;
    color: var(--sol) !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(0.72rem, 3.1vw, 0.85rem) !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  /* Ícone e título das abas em branco também no mobile. As estrelas seguem
     laranja pela regra .tab .tab-estrelas, mais adiante nesta folha. */
  .tab:not(.is-on) {
    color: #fff !important;
  }
  .tab:not(.is-on) span {
    color: #fff !important;
    font-weight: 800 !important;
  }
  .tab:not(.is-on) svg {
    color: #fff !important;
    stroke: #fff !important;
  }
  .tab svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: var(--sol) !important;
    stroke: var(--sol) !important;
    transition: transform 0.25s, color 0.25s, stroke 0.25s, fill 0.25s !important;
  }
  .tab:hover:not(.is-on) {
    color: #ffffff !important;
    background: rgba(255, 178, 94, 0.15) !important;
  }
  .tab:hover:not(.is-on) svg {
    transform: translateY(-1px) scale(1.1) !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* Estado SELECIONADO: Fundo Laranja Vibrante + Texto e Ícone em BRANCO */
  .tab.is-on {
    background: linear-gradient(135deg, #ef7d2e 0%, #ffb25e 100%) !important;
    color: #ffffff !important;
    font-weight: 850 !important;
    box-shadow: 0 4px 16px rgba(239, 125, 46, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
  .tab.is-on span {
    color: #ffffff !important;
    font-weight: 850 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  }
  .tab.is-on svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    transform: scale(1.12) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) !important;
  }
  .panel-head h1 { font-size: 1.85rem; }
  .detail-hero { height: 190px; }
  .map-grade { background: linear-gradient(180deg, rgba(5,13,20,.65) 0%, transparent 20%, transparent 45%, rgba(5,13,20,.7) 100%); }
  
  .link-cancel {
    display: block;
    margin: 12px auto 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    cursor: pointer;
    color: var(--espuma);
    font: 800 0.8rem "Bricolage", sans-serif;
    padding: 10px 24px;
    text-align: center;
    width: 100%;
    transition: all 0.25s;
  }
  .link-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
  }
}

/* ===== Marinas & Barcos ===== */
.mk-marina {
  display: flex; align-items: center; gap: 5px; width: max-content;
  pointer-events: auto !important; cursor: pointer !important;
}
.mk-marina span {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(8, 23, 34, 0.9); border: 1.5px solid #38bdf8;
  display: grid; place-items: center; color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-marina em {
  font: 750 0.65rem "Bricolage", sans-serif; font-style: normal;
  color: #eef6f9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-marina:hover span {
  border-color: var(--sol) !important;
  color: var(--sol) !important;
  transform: scale(1.15) translateY(-1px);
  box-shadow: 0 0 16px rgba(255, 178, 94, 0.65);
}
.mk-marina:hover em {
  color: var(--sol) !important;
  transform: translateX(1px);
}

.marina-dock-glow {
  stroke-dasharray: 6 6;
  animation: dockPulse 4s linear infinite;
}
@keyframes dockPulse {
  0% { stroke-dashoffset: 0; fill-opacity: 0.12; }
  50% { fill-opacity: 0.22; }
  100% { stroke-dashoffset: 24; fill-opacity: 0.12; }
}

/* Colored icons with circular background for Tides and Explore */
#btnTide svg, #btnTour svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 3px;
  border-radius: 50%;
  box-sizing: border-box;
}
#btnTide svg {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
}
#btnTour svg {
  color: var(--sol) !important;
  background: rgba(255, 178, 94, 0.15) !important;
}
#btnTour.is-on svg {
  color: #061017 !important;
  fill: #061017 !important;
  stroke: #061017 !important;
  background: rgba(6, 16, 23, 0.08) !important;
}

/* Custom Pax Selector Grid Styles */
.pax-selector-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,178,94,.55) transparent;
  gap: 8px;
  /* Reserva espaço para o indicador lateral e mantém a barra afastada dos números. */
  margin: 6px 12px 16px 0;
  padding: 0 28px 18px 0;
  scroll-padding-right: 28px;
}
.pax-selector-grid::-webkit-scrollbar { height: 4px; }
.pax-selector-grid::-webkit-scrollbar-thumb { background: rgba(255,178,94,.55); border-radius: 99px; }

/* ===== Cards expansíveis de passageiros (checkout) ===== */
.pax-cards { display: block; margin: 8px 0 6px; }
.pax-card {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(9,22,32,.55);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.pax-card.is-open { border-color: rgba(255,178,94,.5); background: rgba(255,178,94,.05); }
.pax-card-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 15px;
  background: none; border: none; cursor: pointer;
  text-align: left; color: var(--espuma);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.pax-card-ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,178,94,.14); color: var(--sol);
  border: 1.5px solid rgba(255,178,94,.4);
}
.pax-card.is-open .pax-card-ic { background: rgba(255,178,94,.22); }
.pax-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pax-card-title { font-size: 1rem; font-weight: 700; letter-spacing: .01em; color: #fff; text-transform: none; }
.pax-card-rule { font-size: .74rem; font-weight: 500; color: var(--névoa-2); text-transform: none; letter-spacing: 0; }
.pax-card-qty {
  flex: none; min-width: 30px; height: 30px; padding: 0 9px;
  display: grid; place-items: center;
  border-radius: 999px; font-weight: 800; font-size: .92rem;
  background: var(--sol); color: var(--abismo);
  transition: background .2s, color .2s;
}
.pax-card-qty.is-zero { background: rgba(255,255,255,.08); color: var(--névoa-2); }
.pax-card-chevron { flex: none; color: var(--névoa-2); display: inline-flex; transition: transform .25s var(--easing), color .2s; }
.pax-card.is-open .pax-card-chevron { transform: rotate(180deg); color: var(--sol); }
.pax-card-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s var(--easing), opacity .25s;
}
.pax-card.is-open .pax-card-body { max-height: 150px; opacity: 1; }
.pax-card-body .pax-selector-grid { margin: 0 !important; padding: 4px 24px 14px 16px !important; }
@media (max-width: 560px) {
  .pax-card-head { padding: 12px 13px; gap: 10px; }
  .pax-card-ic { width: 34px; height: 34px; }
  .pax-card-title { font-size: .94rem; }
  .pax-card-rule { font-size: .7rem; }
}
.package-note {
  display:flex; align-items:flex-start; gap:9px; margin:10px 0 14px; padding:11px 12px;
  border:1px solid rgba(255,178,94,.32); border-radius:12px; background:rgba(255,178,94,.08); color:var(--sol);
}
.package-note > svg { flex:none; margin-top:2px; }
.package-note b { display:block; font-size:.75rem; }
.package-note span { display:block; margin-top:2px; color:var(--névoa); font-size:.68rem; line-height:1.4; }
.pax-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.03);
  color: var(--espuma);
  font: 700 0.85rem "Bricolage", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pax-btn:hover {
  border-color: var(--borda-viva);
  background: rgba(255, 255, 255, 0.07);
}
.pax-btn.is-on {
  background: var(--sol);
  color: var(--abismo);
  border-color: var(--sol);
  box-shadow: 0 0 10px rgba(255, 178, 94, 0.4);
}

/* Seletor de horário do encontro no checkout (2 opções fixas por enquanto). */
.time-selector { display: flex; gap: 10px; margin: 4px 0 14px; }
.time-selector .time-btn {
  flex: 1; min-height: 46px; border-radius: 12px;
  border: 1.5px solid rgba(255, 178, 94, 0.25);
  background: rgba(255, 178, 94, 0.06); color: var(--nevoa, #e9edf5);
  font: 700 0.98rem/1 Inter, sans-serif; letter-spacing: 0.02em;
  cursor: pointer; transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.time-selector .time-btn:hover { border-color: var(--sol, #ffb25e); transform: translateY(-1px); }
.time-selector .time-btn.is-on {
  background: var(--sol, #ffb25e); color: var(--abismo, #0f172a);
  border-color: var(--sol, #ffb25e); box-shadow: 0 0 12px rgba(255, 178, 94, 0.45);
}
@media (max-width: 560px) { .time-selector .time-btn { min-height: 44px; font-size: 0.92rem; } }

/* Weather Forecast Tabs */
.wx-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--borda);
}
.wx-tab {
  flex: 1;
  border: none;
  background: none;
  color: var(--névoa-2);
  padding: 8px;
  border-radius: 6px;
  font: 700 0.72rem 'Bricolage', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.wx-tab.is-on {
  background: var(--sol);
  color: var(--abismo);
}

/* Red Cancel Icon badge in topbar */
#btnCancel svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  box-sizing: border-box;
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

.panel-head h1 em {
  font-style: normal !important;
  font-weight: 850 !important;
}

/* Fine orange divider between R$ and price value */
.p-divider {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: #ff8525; /* high-contrast bright orange */
  margin: 0 5px;
  vertical-align: middle;
}

/* Sombra atrás (drop shadow) para destacar o preço sobre a imagem */
.tour-card-price strong {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.95);
}

/* Título semântico para mecanismos de busca e leitores de tela. */
.seo-title {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;
}

/* Roteiro visual do catamarã no mapa */
.cat-route-line { animation: cat-route-flow 1.4s linear infinite; }
@keyframes cat-route-flow { to { stroke-dashoffset: -20; } }
.cat-route-stop {
  display:grid; grid-template-columns:26px auto; grid-template-rows:18px 14px;
  align-items:center; gap:0 6px; min-width:128px; padding:5px 8px 5px 5px;
  border:1px solid rgba(255,178,94,.78); border-radius:12px;
  background:rgba(5,19,29,.94); box-shadow:0 8px 20px rgba(0,0,0,.35);
  color:#f7fbfc; font:700 .64rem "Bricolage",sans-serif;
}
.cat-route-stop b {
  grid-row:1 / span 2; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:#ffb25e; color:#071923; font-size:.72rem;
}
.cat-route-stop span { white-space:nowrap; }
.cat-route-stop small { color:#ffb25e; font-size:.56rem; font-weight:700; }

/* ===== Mascote Interativo (Estilo POU) ===== */
.mascot-modal {
  padding: 0 !important;
  overflow: hidden !important;
  background: #04141e !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(2, 132, 199, 0.25) !important;
}
.mascot-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 82vh;
  background: radial-gradient(circle at 50% 30%, #073b54 0%, #051e2c 70%, #03111a 100%);
  position: relative;
}
.mascot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(5, 19, 29, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.mascot-title {
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.mascot-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 10px;
  position: relative;
  overflow: hidden;
}

/* Balão de fala do mascote */
.mascot-bubble {
  position: relative;
  background: rgba(13, 38, 54, 0.9);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 18px;
  padding: 12px 18px;
  max-width: 320px;
  text-align: center;
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(56, 189, 248, 0.2);
  margin-bottom: 16px;
  backdrop-filter: blur(12px);
  animation: floatBubble 3s ease-in-out infinite;
}
.mascot-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: rgba(13, 38, 54, 0.9) transparent;
  display: block;
  width: 0;
}
@keyframes floatBubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Mascote e Pedestal */
.mascot-character-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  padding-bottom: 10px;
}
.mascot-img {
  max-height: min(260px, 35vh);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}
.mascot-character-wrap:hover .mascot-img {
  transform: scale(1.04);
}
.mascot-bounce {
  animation: mascotTapBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes mascotTapBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.15) rotate(-3deg); }
  70% { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.mascot-pedestal {
  width: 180px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.4) 0%, rgba(2, 132, 199, 0.15) 50%, transparent 80%);
  margin-top: -15px;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

/* Controles de poses POU */
.mascot-controls {
  display: flex;
  gap: 8px;
  padding: 14px 16px 18px;
  background: rgba(5, 19, 29, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) transparent;
}
.mascot-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 38, 54, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d1e5f0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.mascot-btn span { font-size: 1rem; }
.mascot-btn:hover {
  background: rgba(2, 132, 199, 0.3);
  border-color: rgba(56, 189, 248, 0.5);
  color: #fff;
  transform: translateY(-2px);
}
.mascot-btn.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.5);
}

/* ---------- Custom System Orange Scrollbar ---------- */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #ff9a3c transparent !important;
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 999px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9a3c, #ff7a18) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(255, 154, 60, 0.4) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffb25e, #ff8a2b) !important;
  box-shadow: 0 0 12px rgba(255, 154, 60, 0.7) !important;
}

::-webkit-scrollbar-thumb:active {
  background: #f97316 !important;
}

/* ---------- Transfer Option Card Hover Effect ---------- */
.transfer-card-opt {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.transfer-card-opt:hover, .transfer-card-opt:active {
  background: rgba(249, 115, 22, 0.18) !important;
  border-color: rgba(249, 115, 22, 0.6) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.25);
}

/* Padrão único para todos os botões que retornam à página anterior. */
.page-back,
#modalBox .page-back,
.detail-back.page-back {
  min-width: 86px !important;
  width: auto !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid rgba(148, 163, 174, .48) !important;
  border-radius: 999px !important;
  background: #102433 !important;
  color: #fff !important;
  font: 800 .78rem/1 "Bricolage", sans-serif !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  backdrop-filter: none !important;
}
.page-back svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  stroke: currentColor !important;
}
.page-back > span { font: inherit !important; }
.page-back:hover {
  background: #173247 !important;
  border-color: rgba(203, 213, 225, .68) !important;
  color: #fff !important;
  transform: translateX(-2px);
}

/* Mantém o rótulo e o valor legíveis sem criar uma caixa sobre a fotografia. */
.tour-card-price {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  font-weight: 800;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 1),
    0 4px 8px rgba(0, 0, 0, .98),
    0 7px 16px rgba(2, 12, 20, .95);
}
.tour-card-price strong {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: none !important;
  background-clip: initial !important;
  filter: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 4px 10px rgba(0, 0, 0, 0.85) !important;
}

/* Navegação desktop compacta: mantém todas as ações dentro de notebooks comuns. */
@media (min-width: 1025px) and (max-width: 1600px) {
  .topbar { padding-inline: 18px; gap: 14px; }
  .brand img { width: 112px; height: 34px; }
  .topnav { gap: 6px; }
  .nav-pill { gap: 6px; padding: 9px 11px; font-size: .72rem; }
}
@media (min-width: 1025px) and (max-width: 1400px) {
  #btnLive .pill-txt,
  #btnWallet .pill-txt,
  #waTop .pill-txt { display: none; }
  #btnLive,
  #btnWallet,
  #waTop { width: 44px; padding-inline: 0; justify-content: center; }
}

/* Em zoom distante, reduz colisões; os nomes reaparecem ao aproximar ou apontar. */
.map-labels-dense .mk-poi em {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-3px);
}
.map-labels-dense .mk-poi:hover em,
.map-labels-dense .mk-poi:focus-within em {
  max-width: 180px;
  opacity: 1;
  overflow: visible;
  transform: none;
}

/* O aviso de rolagem fica sobre a área neutra da foto, entre título e preço. */
.panel-scroll-cue,
.panel-scroll-cue.is-visible {
  left: 50%;
  right: auto;
  bottom: 18px;
  transform: translateX(-50%);
}

@media (max-width: 1024px) {
  .onboard-tip {
    top: 92px;
    bottom: auto;
    max-width: calc(100vw - 40px);
    padding: 10px 16px;
    font-size: .72rem;
    animation: toastIn .35s var(--easing) both;
  }
}

/* Área de toque mínima para controles circulares de fechamento. */
button[aria-label="Fechar"],
.photo-modal-close,
.lightbox-close {
  min-width: 44px !important;
  min-height: 44px !important;
}
/* Menu e navegação: ações claras, sem duplicar o botão Fechar do topo. */
.mobile-menu-secondary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.mobile-menu-privacy-link,
.mobile-menu-policies-link {
  min-height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 800 .82rem/1 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.mobile-menu-privacy-link {
  padding-inline: 18px;
  color: #d9e4ec;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}
.mobile-menu-policies-link {
  padding-inline: 18px;
  color: #ffd09b;
  border: 1px solid rgba(255,159,67,.42);
  background: rgba(255,159,67,.08);
}
.mobile-menu-policies-link svg { color: #ff9f43; }

/* Stories é um atalho permanente, não um indicador falso de transmissão ao vivo. */
#btnLive,
#btnLive .live-ring {
  animation: none !important;
}

#btnLive .live-badge::before {
  display: none !important;
}

#btnLive .live-badge {
  letter-spacing: .04em;
}

@media (max-width: 430px) {
  .mobile-menu-secondary-actions { grid-template-columns: 1fr; }
}
.about-faq,
.privacy-shell {
  color: #e2e8f0;
}

.policies-shell {
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px 22px 22px;
  color: #e2e8f0;
  background: linear-gradient(165deg, #102a3c 0%, #081725 48%, #06111b 100%);
  border: 1px solid rgba(255,159,67,.38);
  border-radius: 22px;
}
.policies-topbar { display:flex; align-items:center; justify-content:space-between; min-height:38px; }
.policies-topbar .modal-back { display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 14px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.06); color:#fff; font-size:.78rem; font-weight:800; cursor:pointer; }
.policies-close { width:34px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:1.15rem; cursor:pointer; }
.policies-header { padding:18px 4px 16px; border-bottom:1px solid rgba(255,159,67,.22); }
.policies-logo { display:block; width:132px; height:auto; object-fit:contain; margin:0 auto 14px; }
.policies-header span { color:#ff9f43; font-size:.7rem; font-weight:850; letter-spacing:.16em; }
.policies-header h3 { display:flex; align-items:center; gap:10px; margin:7px 0 5px; color:#fff; font:700 1.78rem/1.08 Fraunces,serif; }
.policies-title-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; border:1px solid rgba(255,178,94,.55); border-radius:10px; background:rgba(255,178,94,.1); color:#ffb25e; }
.policies-title-icon svg { display:block; }
.policies-header p { margin:0; color:#b6c4ce; font-size:.86rem; }
.policies-content { display:grid; gap:12px; padding-top:18px; }
.policies-content article { padding:16px 17px; border:1px solid rgba(255,255,255,.13); border-radius:15px; background:rgba(255,255,255,.045); }
.policies-content h4 { display:flex; align-items:center; gap:13px; margin:0 0 9px; color:#ffc27a; font-size:1rem; font-weight:900; line-height:1.25; text-transform:capitalize; letter-spacing:.01em; text-shadow:0 1px 8px rgba(255,159,67,.18); }
.policies-content h4 svg { flex:0 0 auto; color:#ffb25e; }
.policies-content p { margin:0; color:#d0dbe2; font-size:.86rem; line-height:1.58; }
.policies-note { margin:18px 0 0; padding:13px 15px; border-radius:13px; background:rgba(255,159,67,.1); color:#f0f5f7; font-size:.8rem; line-height:1.5; }

@media (max-width: 540px) {
  .policies-shell { padding:18px 16px 20px; }
  .policies-header h3 { font-size:1.58rem; }
  .policies-content article { padding:15px; }
  .policies-content p { font-size:.84rem; }
}

.about-faq {
  padding: 15px;
  border: 1px solid rgba(255,159,67,.3);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

.about-faq h4,
.privacy-content h4 {
  margin: 0 0 10px;
  color: #fff;
}

.about-faq details {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 10px 0;
}

.about-faq summary {
  cursor: pointer;
  font-weight: 750;
}

.about-faq p,
.privacy-content p,
.privacy-content li {
  color: #bdcad4;
  font-size: .82rem;
  line-height: 1.55;
}

.privacy-shell {
  position: relative;
  max-height: 88vh;
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(255,159,67,.45);
  border-radius: 24px;
  background: #061017;
  box-shadow: 0 24px 60px rgba(0,0,0,.85);
}

.privacy-shell > button[aria-label="Fechar"] {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: #030b10;
  color: #fff;
  font-size: 1.25rem;
}

.privacy-shell header { margin: 64px 0 20px; }
.privacy-shell header span { color: #ff9f43; font-size: .72rem; font-weight: 850; letter-spacing: .16em; }
.privacy-shell header h3 { margin: 6px 0 0; font: 700 1.5rem/1.1 Fraunces,serif; color: #fff; }
.privacy-content { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.035); }
.privacy-content a { color: #ffb25e; }
.privacy-content small { display: block; margin-top: 16px; color: #8fa1af; }

.pix-fallback-note {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(34,197,94,.38);
  border-radius: 12px;
  background: rgba(34,197,94,.08);
  color: #e8fff2;
  font-size: .7rem;
  line-height: 1.45;
  text-align: center;
}

/* Resposta do botão "Já Paguei": diz por que o ticket ainda não foi liberado. */
.pix-check-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .72rem;
  line-height: 1.45;
  text-align: center;
}
.pix-check-note.is-wait {
  border: 1px solid rgba(255,178,94,.42);
  background: rgba(255,178,94,.1);
  color: #ffe6c9;
}
.pix-check-note.is-erro {
  border: 1px solid rgba(239,68,68,.42);
  background: rgba(239,68,68,.1);
  color: #ffdcdc;
}
.pix-check-note[hidden] { display: none; }

.mobile-menu-whatsapp-btn {
  flex: 0 0 auto !important;
  min-height: 46px !important;
  max-height: 48px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}

@media (max-width: 640px) {
  #modalBox .mobile-menu-shell .mobile-menu-whatsapp-btn {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    align-self: stretch !important;
  }
}
.transfer-coverage-map::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 30% 12% 20%;
  border: 1px solid rgba(56,189,248,.75);
  border-radius: 48% 52% 46% 54%;
  background: rgba(14,165,233,.1);
  box-shadow: 0 0 22px rgba(14,165,233,.16) inset;
  transform: rotate(-7deg);
}

.transfer-coverage-zone {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(0,8,13,.54);
  color: #7dd3fc;
  text-align: center;
  font-size: .7rem;
  font-weight: 800;
}

.transfer-coverage-zone i {
  width: 22px;
  height: 1px;
  background: rgba(125,211,252,.65);
}

/* Mapa de cobertura limpo: mantém somente a cartografia e a área demarcada. */
#modalBox .transfer-coverage-map {
  min-height: 176px;
  padding: 0 !important;
}
#modalBox .transfer-coverage-map > div[style*="z-index:1"] {
  display: none !important;
}
#modalBox .transfer-coverage-map > div[style*="z-index:2"],
#modalBox .transfer-coverage-map .transfer-coverage-zone,
#modalBox .transfer-coverage-map > p {
  display: none !important;
}
#modalBox .transfer-coverage-map::after { display:none !important; content:none !important; }
.transfer-map-label { background:transparent; border:0; }
.transfer-map-label span {
  display:inline-block;
  padding:4px 8px;
  border:1px solid rgba(56,189,248,.72);
  border-radius:999px;
  background:rgba(4,20,31,.9);
  color:#dff7ff;
  font:800 .62rem "Bricolage",sans-serif;
  line-height:1.1;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.transfer-map-label .transfer-map-pin {
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 2px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14,165,233,.28), 0 2px 8px rgba(0,0,0,.65);
}
.transfer-market-shell > div[style*="overflow-y:auto"] {
  padding: 4px 6px 8px 0;
}
.transfer-market-section {
  padding: 14px;
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,38,52,.88), rgba(3,13,21,.96));
}
.transfer-market-section + .transfer-market-section { margin-top: 12px; }
.transfer-market-section .transfer-card-opt {
  border-color: rgba(56,189,248,.3) !important;
  background: linear-gradient(100deg, rgba(4,19,29,.98), rgba(7,31,43,.88)) !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.transfer-market-section .transfer-card-opt:hover,
.transfer-market-section .transfer-card-opt:focus-within {
  border-color: rgba(56,189,248,.78) !important;
  background: linear-gradient(100deg, rgba(8,35,48,.98), rgba(6,55,73,.9)) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 18px rgba(14,165,233,.12);
  transform: translateY(-1px);
}
.transfer-detail-gallery { background: #020a10; }
.transfer-detail-thumbs {
  display: flex;
  gap: 8px;
  margin: -8px 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.transfer-detail-thumb {
  width: 64px;
  height: 48px;
  flex: 0 0 64px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  overflow: hidden;
  background: #071923;
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.transfer-detail-thumb:hover,
.transfer-detail-thumb.is-active { opacity: 1; border-color: #ff9f43; transform: translateY(-1px); }
.transfer-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.transfer-detail-action {
  flex: 1;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .86rem;
  font-weight: 850;
}
.transfer-detail-includes {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(56,189,248,.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,38,52,.86), rgba(3,13,21,.96));
}
.transfer-detail-includes-title {
  display: block;
  margin-bottom: 12px;
  color: #ffad5c;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.transfer-detail-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.transfer-detail-include-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.3;
}
.transfer-detail-include-item svg { flex: 0 0 17px; }
@media (max-width: 560px) {
  .transfer-detail-includes-grid { grid-template-columns: 1fr; gap: 10px; }
  .transfer-detail-include-item { font-size: .84rem; }
  .transfer-detail-action { min-height: 44px; font-size: .78rem; }
}
@media (max-width: 560px) {
  .transfer-market-section { padding: 10px; }
  .transfer-market-section .transfer-card-opt { gap: 9px !important; padding: 10px !important; }
  .transfer-market-section .transfer-card-opt img { width: 58px !important; height: 54px !important; }
  .transfer-market-section .transfer-card-opt > div:nth-child(2) strong { font-size: .78rem !important; }
  .transfer-market-section .transfer-card-opt > div:nth-child(2) span { font-size: .62rem !important; }
  .transfer-market-section .transfer-card-opt > div:last-child span:first-child { font-size: .9rem !important; }
}
.transfer-coverage-map .leaflet-control-attribution {
  padding: 1px 4px;
  color: rgba(220,238,247,.7);
  background: rgba(2,10,16,.62);
  font-size: 8px;
}
.transfer-coverage-map .leaflet-control-attribution a { color: #9bdcf3; }

@media (max-width: 430px) {
  .transfer-coverage-zone { gap: 5px; font-size: .62rem; }
  .transfer-coverage-zone i { width: 10px; }
}
.catalog-price-note {
  box-sizing: border-box;
  width: 100%;
  margin: -4px 0 12px;
  padding: 0 26px;
  color: #8fa1af;
  font-size: .68rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Fotografia: banner compacto, foto selecionada e miniaturas. */
#modalBox.fotografia-modal .fotografia-hero-banner {
  height: 248px !important;
  background-position: center 38% !important;
}

.fotografia-galeria {
  display: grid;
  gap: 9px;
  padding: 16px 20px 0;
}

.fotografia-preview {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(255,178,94,.42);
  border-radius: 17px;
  background: #020b11;
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
}

.fotografia-preview-open {
  display: block;
  width: 100%;
  height: 210px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.fotografia-preview-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020b11;
  transition: opacity .18s ease, transform .25s ease;
}

.fotografia-preview-open:hover img { transform: scale(1.015); }

.fotografia-preview-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(3,13,20,.82);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.fotografia-preview-nav.is-prev { left: 10px; }
.fotografia-preview-nav.is-next { right: 10px; }
.fotografia-preview-nav:hover { color: var(--sol); border-color: var(--sol); }
.fotografia-thumbs-label,
.fotografia-carousel-controls { display:none !important; }
.fotografia-preview-nav.is-prev span { display: none; }

.fotografia-preview-count {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(3,13,20,.82);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
}

.fotografia-thumbs-label {
  color: var(--névoa-2);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#fotoCarrosselTrack .fotografia-thumb {
  opacity: .68;
  outline: none;
}

#fotoCarrosselTrack .fotografia-thumb.is-active {
  opacity: 1;
  border-color: var(--sol) !important;
  box-shadow: 0 0 0 2px rgba(255,159,67,.2), 0 8px 18px rgba(0,0,0,.35);
}

.fotografia-modal button[onclick*="scrollFotoCarrossel"] svg { stroke: #ff9f43 !important; }

.destino-galeria { padding: 12px 20px 0; }
.destino-galeria-heading { display:flex; align-items:center; gap:10px; margin-bottom:9px; color:#ffb25e; font-size:.72rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.destino-galeria-heading i { flex:1; height:1px; background:linear-gradient(90deg, rgba(255,159,67,.45), transparent); }
.destino-galeria-row { display:flex; align-items:center; gap:8px; }
.destino-galeria-track { display:flex; gap:9px; min-width:0; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; padding:2px; }
.destino-galeria-track::-webkit-scrollbar { display:none; }
.destino-galeria-thumb { flex:0 0 116px; height:78px; padding:0; overflow:hidden; border:1px solid rgba(255,159,67,.42); border-radius:11px; background:#061017; cursor:pointer; }
.destino-galeria-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease, filter .25s ease; }
.destino-galeria-thumb:hover img, .destino-galeria-thumb:focus-visible img { transform:scale(1.06); filter:brightness(1.12); }
.destino-galeria-arrow { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:1px solid rgba(255,159,67,.65); border-radius:50%; background:rgba(2,12,20,.9); color:#ff9f43; cursor:pointer; }
.destino-galeria-arrow:hover { background:rgba(255,159,67,.14); color:#ffd09b; }

/* Quem Somos: respiro seguro entre controles, marca e banner. */
@media (max-width: 540px) {
  /* A logomarca saiu de dentro desta barra (agora fica centralizada logo
     abaixo), então o espaço que era reservado para ela virou buraco. */
  .quem-somos-topbar {
    min-height: 44px !important;
    margin-bottom: 6px !important;
  }

  .quem-somos-content {
    gap: 18px !important;
  }

  .quem-somos-content > div:first-child {
    margin-top: 4px;
  }
}

@media (max-width: 390px) {
  #modalBox.fotografia-modal .fotografia-hero-banner {
    height: 230px !important;
    background-position: center 36% !important;
  }

  .fotografia-galeria { padding: 13px 12px 0; }
  .fotografia-preview,
  .fotografia-preview-open { min-height: 188px; height: 188px; }

  .quem-somos-topbar {
    min-height: 44px !important;
    margin-bottom: 6px !important;
  }
}

/* Alça mobile sem seta: apenas uma linha laranja com brilho em movimento. */
@media (max-width: 1024px) {
  .panel-drag-handle {
    isolation: isolate;
    overflow: visible;
  }

  .panel-drag-handle span,
  .panel-drag-handle b {
    display: none !important;
  }

  .panel-drag-handle .panel-minimize-button {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 80;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid #ff9f43;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(14, 30, 44, 0.96), rgba(6, 16, 24, 0.96));
    backdrop-filter: blur(12px);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(255, 159, 67, 0.4), 0 4px 16px rgba(0, 0, 0, 0.7);
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .panel-drag-handle .panel-minimize-button:hover,
  .panel-drag-handle .panel-minimize-button:active,
  .panel-drag-handle .panel-minimize-button:focus-visible {
    background: linear-gradient(135deg, #ff9f43, #ff7a29);
    border-color: #ffffff;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 159, 67, 0.7), 0 6px 20px rgba(0, 0, 0, 0.8);
    outline: none;
  }

  .panel-drag-handle::before {
    z-index: 2;
    top: 7px;
    height: 9px;
    border-radius: 0;
    background: linear-gradient(90deg, #ff9f43 0%, #ff9f43 100%);
    clip-path: polygon(0 36%, 42% 36%, 47% 12%, 53% 12%, 58% 36%, 100% 36%, 100% 64%, 58% 64%, 53% 88%, 47% 88%, 42% 64%, 0 64%);
    box-shadow: none;
    animation: none;
  }

  .panel-drag-handle::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 16px;
    border: 1.5px solid rgba(61, 184, 220, .65);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 208, 155, .72) 0%, rgba(255, 159, 67, .28) 34%, rgba(16, 86, 112, .16) 52%, transparent 74%);
    transform: translate(-50%, -50%) scale(.35);
    opacity: 0;
    pointer-events: none;
    animation: panelWaterDrop 5.2s ease-out infinite;
  }
}

@keyframes panelMinimizeBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-drag-handle .panel-minimize-button { animation: none; }
}

@keyframes panelHandleShimmer {
  0%, 100% { background-position: 100% 50%; opacity: .76; }
  50% { background-position: 0 50%; opacity: 1; }
}

@keyframes panelWaterDrop {
  0%, 18% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  28% { opacity: .72; }
  68% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-drag-handle::before,
  .panel-drag-handle::after { animation: none !important; }
}

/* Menu: brilho radial no ícone + linha laranja progressiva ao interagir. */
.menu-option {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 43px 50%, rgba(255,159,67,.16) 0, rgba(255,159,67,.06) 24px, transparent 48px),
    rgba(9,22,32,.65) !important;
}
.menu-option::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translateY(-50%) scale(.82);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,159,67,.16), rgba(255,159,67,.05) 38%, transparent 72%);
  opacity: .72;
  transition: transform .35s ease, opacity .35s ease;
}
.menu-option::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ff9f43 24%, #ffd09b 50%, #ff9f43 76%, transparent);
  transform: scaleX(1);
  transform-origin: center center;
  opacity: .78;
  animation: menuFixedLinePulse 4.8s ease-in-out infinite;
}
.menu-option > * { position: relative; z-index: 1; }
.menu-option:hover::before,
.menu-option:focus-visible::before,
.menu-option:active::before { transform: translateY(-50%) scale(1.18); opacity: 1; }
.menu-option:hover::after,
.menu-option:focus-visible::after,
.menu-option:active::after { transform: scaleX(1); }

/* Seis fundos de comparação: cada opção recebe uma identidade visual própria. */
.mobile-menu-shell .modal-bd > .menu-option:nth-of-type(1) {
  background: radial-gradient(circle at 92% 50%, rgba(14,165,233,.34), transparent 42%), linear-gradient(110deg, #06141f, #071b2a 58%, #092c40) !important;
  border-color: rgba(56,189,248,.34) !important;
}
.mobile-menu-shell .modal-bd > .menu-option:nth-of-type(2) {
  background: radial-gradient(circle at 92% 25%, rgba(245,158,11,.25), transparent 38%), linear-gradient(110deg, #382a16, #1f1c18 54%, #111820) !important;
  border-color: rgba(255,178,94,.38) !important;
}
.mobile-menu-shell .modal-bd > .menu-option:nth-of-type(3) {
  background: radial-gradient(circle at 10% 85%, rgba(236,72,153,.27), transparent 40%), linear-gradient(115deg, #32172c, #211629 55%, #101a26) !important;
  border-color: rgba(236,72,153,.38) !important;
}
.mobile-menu-shell .modal-bd > .menu-option:nth-of-type(4) {
  background: radial-gradient(circle at 90% 50%, rgba(16,185,129,.24), transparent 40%), linear-gradient(110deg, #0c302e, #102522 58%, #071923) !important;
  border-color: rgba(52,211,153,.34) !important;
}
.mobile-menu-shell .modal-bd > .menu-option:nth-of-type(5) {
  background: radial-gradient(circle at 12% 50%, rgba(239,68,68,.22), transparent 40%), linear-gradient(110deg, #351d28, #211a26 58%, #101923) !important;
  border-color: rgba(239,68,68,.36) !important;
}
.mobile-menu-shell .modal-bd > .menu-option:nth-of-type(6) {
  background: radial-gradient(circle at 88% 50%, rgba(255,255,255,.18), transparent 28%), linear-gradient(110deg, #293541, #172530 52%, #0b1721) !important;
  border-color: rgba(226,232,240,.3) !important;
}

/* Fundo padrão aprovado para todas as opções do menu. */
.mobile-menu-shell .modal-bd > .menu-option {
  background: radial-gradient(circle at 92% 50%, rgba(14,165,233,.34), transparent 42%), linear-gradient(110deg, #06141f, #071b2a 58%, #092c40) !important;
  border-color: rgba(56,189,248,.34) !important;
}

/* Força o mesmo acabamento azul mesmo sobre as variações anteriores. */
#modalBox .mobile-menu-shell .modal-bd > .menu-option:nth-of-type(1),
#modalBox .mobile-menu-shell .modal-bd > .menu-option:nth-of-type(2),
#modalBox .mobile-menu-shell .modal-bd > .menu-option:nth-of-type(3),
#modalBox .mobile-menu-shell .modal-bd > .menu-option:nth-of-type(4),
#modalBox .mobile-menu-shell .modal-bd > .menu-option:nth-of-type(5),
#modalBox .mobile-menu-shell .modal-bd > .menu-option:nth-of-type(6) {
  background: radial-gradient(circle at 92% 50%, rgba(14,165,233,.34), transparent 42%), linear-gradient(110deg, #06141f, #071b2a 58%, #092c40) !important;
  border-color: rgba(56,189,248,.34) !important;
}

/* Efeito fixo azul nas opções do menu, substituindo o destaque laranja. */
#modalBox .mobile-menu-shell .modal-bd > .menu-option,
#modalBox .mobile-menu-shell .modal-bd > .menu-option:hover {
  background: radial-gradient(circle at 43px 50%, rgba(14,165,233,.2), rgba(14,165,233,.06) 25px, transparent 52px), linear-gradient(110deg, #06141f, #071b2a 58%, #092c40) !important;
  border-color: rgba(56,189,248,.34) !important;
}
#modalBox .mobile-menu-shell .modal-bd > .menu-option::before {
  background: radial-gradient(circle, rgba(14,165,233,.2), rgba(14,165,233,.06) 38%, transparent 72%) !important;
}
#modalBox .mobile-menu-shell .modal-bd > .menu-option::after {
  height: 1px !important;
  bottom: 5px !important;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,.75) 24%, #38bdf8 50%, rgba(14,165,233,.75) 76%, transparent) !important;
}
#modalBox .mobile-menu-shell .modal-bd > .menu-option,
#modalBox .mobile-menu-shell .modal-bd > .menu-option:hover {
  background: linear-gradient(108deg, #02080d 0%, #06131c 48%, #02080d 100%) !important;
  color: #f2f7fa !important;
}
#modalBox .mobile-menu-shell .modal-bd > .menu-option:hover,
#modalBox .mobile-menu-shell .modal-bd > .menu-option:focus-visible,
#modalBox .mobile-menu-shell .modal-bd > .menu-option:active {
  animation: menuWaterWobble 1.8s ease-in-out infinite;
  background: radial-gradient(ellipse at 50% 48%, rgba(27,104,132,.18), transparent 58%), linear-gradient(108deg, #02080d 0%, #081b25 50%, #02080d 100%) !important;
}
#modalBox .mobile-menu-shell .modal-bd > .menu-option::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(35,146,177,.16), transparent 66%) !important;
}
@keyframes menuWaterWobble {
  0%, 100% { transform: translateX(0) scaleY(1); }
  25% { transform: translateX(.7px) scaleY(1.012); }
  50% { transform: translateX(-.7px) scaleY(.992); }
  75% { transform: translateX(.45px) scaleY(1.008); }
}
@media (prefers-reduced-motion: reduce) {
  #modalBox .mobile-menu-shell .modal-bd > .menu-option:hover,
  #modalBox .mobile-menu-shell .modal-bd > .menu-option:focus-visible,
  #modalBox .mobile-menu-shell .modal-bd > .menu-option:active { animation: none; }
}

@keyframes menuFixedLinePulse {
  0%, 100% { opacity: .58; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.3); }
}

/* Acabamento final do menu: escuro mesmo no estado normal. */
#modalBox.modal .mobile-menu-shell .modal-bd > .menu-option,
#modalBox.modal .mobile-menu-shell .modal-bd > .menu-option:hover {
  background: linear-gradient(90deg, #010509 0%, #061019 50%, #010509 100%) !important;
  border-color: rgba(31,104,130,.62) !important;
}
#modalBox.modal .mobile-menu-shell .modal-bd > .menu-option:hover,
#modalBox.modal .mobile-menu-shell .modal-bd > .menu-option:focus-visible,
#modalBox.modal .mobile-menu-shell .modal-bd > .menu-option:active {
  background: radial-gradient(ellipse at 50% 50%, rgba(25,104,132,.16), transparent 60%), linear-gradient(90deg, #010509 0%, #071923 50%, #010509 100%) !important;
}

#btnLive { animation: liveGlow 1.8s ease-in-out infinite !important; }
#btnLive .live-ring { animation: livePulse 1.8s ease-out infinite !important; }
#btnLive .live-badge::before { display:block !important; }

@media (prefers-reduced-motion: reduce) {
  .menu-option::before,
  .menu-option::after { transition: none; animation: none; opacity: .82; }
}

/* A alça mantém somente o botão de minimizar; linha e pulso removidos. */
@media (max-width: 1024px) {
  .panel-drag-handle::before,
  .panel-drag-handle::after { display: none !important; content: none !important; }


}

/* ===== Baú Surpresa do Verãozinho ===== */
.nav-prize {
  position: relative;
  overflow: hidden;
  color: #ffe4b5;
  border-color: rgba(255, 159, 67, .48) !important;
  background: linear-gradient(135deg, rgba(54, 27, 10, .9), rgba(12, 23, 31, .9));
  box-shadow: inset 0 0 16px rgba(255, 126, 36, .06), 0 5px 18px rgba(0, 0, 0, .22);
}
.nav-prize::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 197, 116, .16) 48%, transparent 72%);
  transform: translateX(-115%);
  transition: transform .7s ease;
}
.nav-prize:hover {
  color: #fff;
  border-color: #ffad52 !important;
  background: linear-gradient(135deg, rgba(94, 43, 12, .94), rgba(17, 29, 37, .94));
  box-shadow: 0 0 18px rgba(255, 126, 36, .26);
}
.nav-prize:hover::after { transform: translateX(115%); }
.nav-prize .pill-txt { position: relative; z-index: 1; font-weight: 800; }
.mascot-face-icon,
.mobile-mascot-face {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff8ec;
  border: 2px solid #ff9f43;
  box-shadow: 0 0 0 2px rgba(255, 159, 67, .12), 0 0 13px rgba(255, 126, 36, .26);
}
.mascot-face-icon { width: 27px; height: 27px; z-index: 1; }
.mascot-face-icon img,
.mobile-mascot-face img,
.squirrel-mascot-medallion img {
  position: absolute;
  max-width: none;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}
.mascot-face-icon img { width: 58px; top: -4px; }
.mobile-mascot-face { width: 38px; height: 38px; }
.mobile-mascot-face img { width: 80px; top: -5px; }
.menu-prize-option { position: relative; padding-right: 70px !important; }
.menu-prize-tag {
  position: absolute;
  right: 13px;
  width: auto !important;
  height: auto !important;
  padding: 4px 7px;
  border: 1px solid rgba(255, 159, 67, .62);
  border-radius: 999px;
  color: #ffc47d !important;
  background: rgba(255, 126, 36, .09);
  font-size: .56rem !important;
  font-weight: 900;
  letter-spacing: .08em;
}
#modalBox .menu-prize-option > .menu-prize-tag {
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
}

.prize-modal {
  width: min(680px, 100%);
  overflow: hidden;
  background: #050e15;
  border-color: rgba(255, 159, 67, .62);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .88), 0 0 28px rgba(255, 126, 36, .12);
}
.squirrel-game {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  max-height: 92dvh;
  overflow: hidden auto;
  padding: 20px 24px 25px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 126, 36, .16), transparent 30%),
    radial-gradient(circle at 88% 52%, rgba(251, 191, 36, .09), transparent 33%),
    linear-gradient(155deg, #0a1b26 0%, #061018 48%, #03090e 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 159, 67, .65) #07131b;
}
.squirrel-game::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .24;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.squirrel-game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 8px;
}
.squirrel-game-close {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(2, 8, 12, .72);
  color: #fff;
  font: 400 1.25rem/1 sans-serif;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
.squirrel-game-close:hover { border-color: #ff9f43; color: #ffb25e; transform: rotate(5deg); }
.squirrel-game-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 2px 0 16px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 159, 67, .22);
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(255, 126, 36, .09), rgba(5, 14, 21, .68) 48%, rgba(255,255,255,.025));
}
.squirrel-mascot-medallion {
  position: relative;
  width: 108px;
  height: 108px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff8ed;
  border: 3px solid #ff9f43;
  box-shadow: 0 0 0 5px rgba(255,159,67,.09), 0 12px 30px rgba(0,0,0,.35);
}
.squirrel-mascot-medallion img { width: 215px; top: -12px; }
.squirrel-game-hero span {
  display: block;
  margin-bottom: 5px;
  color: #ffad52;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .2em;
}
.squirrel-game-hero h3 {
  margin: 0;
  color: #fff;
  font: 750 clamp(1.55rem, 4vw, 2.25rem)/1.04 "Fraunces", serif;
  letter-spacing: -.02em;
  text-shadow: 0 5px 18px rgba(0,0,0,.62);
}
.squirrel-game-hero p {
  max-width: 430px;
  margin: 7px 0 0;
  color: #b9c7d1;
  font-size: .8rem;
  line-height: 1.4;
}
.squirrel-game-status {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 5px 12px;
}
.squirrel-game-status span {
  color: #ffc47d;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.squirrel-game-status i { height: 1px; background: linear-gradient(90deg, rgba(255,159,67,.6), transparent); }
.squirrel-game-status small { color: #778994; font-size: .62rem; }
.squirrel-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: 18px 12px 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  background: radial-gradient(ellipse at center bottom, rgba(255,126,36,.12), transparent 67%), rgba(0,0,0,.2);
}
.squirrel-box {
  position: relative;
  min-width: 0;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 3px 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  overflow: visible;
  perspective: 420px;
}
.squirrel-box:disabled { cursor: default; }
.squirrel-box-glow {
  position: absolute;
  left: 50%;
  bottom: 25px;
  width: 105px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,159,67,.3), transparent 68%);
  opacity: .42;
  transform: translateX(-50%) scale(.86);
  transition: opacity .25s ease, transform .25s ease;
  filter: blur(7px);
}
.squirrel-box:hover .squirrel-box-glow { opacity: .9; transform: translateX(-50%) scale(1.08); }
.squirrel-box-lid,
.squirrel-box-body {
  position: relative;
  z-index: 2;
  display: block;
  border: 2px solid #ffbd64;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,220,154,.55) 48% 52%, transparent 54%),
    linear-gradient(150deg, #c8481e, #ff8a34 47%, #9d2f13);
  box-shadow: inset 0 0 0 3px rgba(80,24,8,.32), 0 8px 17px rgba(0,0,0,.42);
}
.squirrel-box-lid {
  width: min(112px, 84%);
  height: 30px;
  margin-bottom: -3px;
  border-radius: 12px 12px 5px 5px;
  transform-origin: 15% 100%;
  transition: transform .48s cubic-bezier(.2,.9,.25,1.25);
}
.squirrel-box-body {
  width: min(101px, 76%);
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 5px 5px 12px 12px;
}
.squirrel-box-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 24px;
  height: 31px;
  border: 2px solid #ffd08a;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(#7b280f, #b43c18);
  transform: translateX(-50%);
}
.squirrel-box-body b {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  color: #fff4d4;
  font: 900 1.05rem/1 "Bricolage", sans-serif;
  text-shadow: 0 2px 5px rgba(0,0,0,.7);
}
.squirrel-box > small {
  z-index: 2;
  margin-top: 8px;
  color: #aebdc7;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.squirrel-box:hover:not(:disabled) { transform: translateY(-3px); }
.squirrel-box.is-opening { animation: squirrelBoxShake .58s ease both; }
.squirrel-box.is-opening .squirrel-box-lid,
.squirrel-box.is-miss .squirrel-box-lid,
.squirrel-box.is-win .squirrel-box-lid { transform: translate(-7px, -13px) rotate(-11deg); }
.squirrel-box.is-miss { filter: saturate(.42); opacity: .72; }
.squirrel-box.is-miss .squirrel-box-body b { font-size: .62rem; letter-spacing: .05em; }
.squirrel-box.is-win { animation: squirrelJackpot .72s ease both; }
.squirrel-box.is-win .squirrel-box-glow {
  opacity: 1;
  transform: translateX(-50%) scale(1.55);
  background: radial-gradient(circle, rgba(250,204,21,.72), rgba(34,197,94,.25) 38%, transparent 70%);
}
.squirrel-box.is-win .squirrel-box-body,
.squirrel-box.is-win .squirrel-box-lid {
  border-color: #ffe29a;
  background: linear-gradient(145deg, #ffb333, #ff772f 56%, #c83d18);
}
.squirrel-box.is-win .squirrel-box-body b { color: #fff; font-size: 1.45rem; }
.squirrel-game.has-winner .squirrel-box:not(.is-win) { opacity: .38; filter: grayscale(.45); }
.squirrel-game-result { min-height: 69px; margin-top: 12px; }
.squirrel-message {
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(3,10,15,.6);
}
.squirrel-message b { color: #fff; font-size: .84rem; white-space: nowrap; }
.squirrel-message span { color: #9fb0ba; font-size: .74rem; line-height: 1.35; }
.squirrel-message.is-near { border-color: rgba(255,159,67,.36); background: rgba(78,35,10,.22); }
.squirrel-message.is-near b { color: #ffb25e; }
.squirrel-prize-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 16px;
  padding: 16px 18px;
  border: 1px solid rgba(34,197,94,.52);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(11,74,47,.5), rgba(4,20,22,.86) 64%);
  box-shadow: 0 10px 32px rgba(0,0,0,.28), inset 0 0 25px rgba(34,197,94,.05);
}
.squirrel-prize-kicker { grid-column: 1; color: #6ee7a7; font-size: .61rem; font-weight: 900; letter-spacing: .14em; }
.squirrel-prize-card > strong { grid-column: 1; color: #fff; font: 750 1.35rem/1.1 "Fraunces", serif; }
.squirrel-prize-card > p { grid-column: 1; margin: 2px 0 5px; color: #b8cac5; font-size: .72rem; line-height: 1.35; }
.squirrel-coupon-row { grid-column: 1; display: flex; align-items: stretch; width: min(290px, 100%); }
.squirrel-coupon-row code {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border: 1px dashed rgba(255,196,125,.7);
  border-radius: 10px 0 0 10px;
  background: rgba(0,0,0,.26);
  color: #ffd08e;
  font: 900 .82rem/1 "Bricolage", sans-serif;
  letter-spacing: .08em;
}
.squirrel-coupon-row button,
.squirrel-use-prize {
  border: 1px solid #ff9f43;
  background: linear-gradient(135deg, #ffad52, #ff6b35);
  color: #061017;
  font: 900 .72rem/1 "Bricolage", sans-serif;
  cursor: pointer;
}
.squirrel-coupon-row button { padding: 0 13px; border-radius: 0 10px 10px 0; }
.squirrel-use-prize {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  min-width: 146px;
  min-height: 43px;
  padding: 10px 15px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,107,53,.22);
}
.squirrel-prize-card > small { grid-column: 1 / -1; color: #82958f; font-size: .59rem; margin-top: 3px; }
.squirrel-confetti { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.squirrel-confetti i {
  position: absolute;
  left: var(--x);
  top: -14px;
  width: 7px;
  height: 13px;
  border-radius: 2px;
  background: var(--c);
  transform: rotate(var(--r));
  animation: squirrelConfettiFall 2.25s var(--d) cubic-bezier(.2,.7,.28,1) both;
}

@keyframes squirrelBoxShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-7px) rotate(-3deg); }
  40% { transform: translateX(7px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(4px) rotate(2deg); }
}
@keyframes squirrelJackpot {
  0% { transform: scale(.92); }
  48% { transform: scale(1.12) translateY(-7px); }
  100% { transform: scale(1) translateY(-3px); }
}
@keyframes squirrelConfettiFall {
  0% { opacity: 0; transform: translateY(-10px) rotate(var(--r)); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(610px) rotate(calc(var(--r) + 520deg)); }
}

/* Botão principal do menu no mobile: degradê laranja solicitado. */
@media (max-width: 1024px) {
  #btnMobileMenu {
    background: linear-gradient(145deg, #ffb75f 0%, #ff963f 42%, #f56b2a 100%) !important;
    border: 2px solid #ffd08e !important;
    color: #07131b !important;
    box-shadow: 0 7px 19px rgba(0,0,0,.42), 0 0 0 3px rgba(255,126,36,.18), 0 0 16px rgba(255,126,36,.34) !important;
  }
  #btnMobileMenu:hover,
  #btnMobileMenu:focus-visible {
    background: linear-gradient(145deg, #ffc878 0%, #ffa44f 43%, #ff7130 100%) !important;
    border-color: #ffe0af !important;
    color: #02080d !important;
    box-shadow: 0 8px 21px rgba(0,0,0,.48), 0 0 0 3px rgba(255,159,67,.24), 0 0 20px rgba(255,126,36,.48) !important;
  }
  #btnMobileMenu svg { stroke-width: 3; }
}

@media (min-width: 1025px) and (max-width: 1400px) {
  #btnPrize { width: 44px; padding-inline: 0; justify-content: center; }
  #btnPrize .pill-txt { display: none; }
}

@media (max-width: 520px) {
  .prize-modal { max-height: calc(100dvh - 16px) !important; }
  .squirrel-game { max-height: calc(100dvh - 16px); padding: 14px 13px 16px; }
  .squirrel-game-topbar { margin-bottom: 5px; }
  .squirrel-game-hero { grid-template-columns: 76px minmax(0, 1fr); gap: 11px; padding: 12px; margin-bottom: 11px; border-radius: 18px; }
  .squirrel-mascot-medallion { width: 72px; height: 72px; border-width: 2px; }
  .squirrel-mascot-medallion img { width: 145px; top: -8px; }
  .squirrel-game-hero span { margin-bottom: 3px; font-size: .53rem; letter-spacing: .14em; }
  .squirrel-game-hero h3 { font-size: clamp(1.18rem, 6vw, 1.55rem); }
  .squirrel-game-hero p { margin-top: 4px; font-size: .66rem; }
  .squirrel-game-status { grid-template-columns: auto 1fr; gap: 7px; margin: 0 2px 8px; }
  .squirrel-game-status span { font-size: .58rem; }
  .squirrel-game-status small { display: none; }
  .squirrel-boxes { gap: 4px; padding: 12px 3px 10px; border-radius: 17px; }
  .squirrel-box { min-height: 113px; padding-inline: 0; }
  .squirrel-box-lid { width: min(86px, 86%); height: 24px; }
  .squirrel-box-body { width: min(78px, 78%); height: 56px; }
  .squirrel-box-body::before { width: 20px; height: 26px; }
  .squirrel-box-body b { margin-top: 20px; font-size: .88rem; }
  .squirrel-box > small { margin-top: 6px; font-size: .52rem; letter-spacing: .08em; }
  .squirrel-box-glow { width: 76px; height: 58px; bottom: 21px; }
  .squirrel-game-result { min-height: 60px; margin-top: 9px; }
  .squirrel-message { min-height: 57px; padding: 10px 11px; gap: 8px; }
  .squirrel-message b { font-size: .74rem; }
  .squirrel-message span { font-size: .64rem; }
  .squirrel-prize-card { grid-template-columns: 1fr; gap: 4px; padding: 13px; }
  .squirrel-prize-card > strong { font-size: 1.15rem; }
  .squirrel-prize-card > p { font-size: .66rem; }
  .squirrel-coupon-row { width: 100%; }
  .squirrel-use-prize { grid-column: 1; grid-row: auto; width: 100%; min-height: 40px; margin-top: 4px; }
  .squirrel-prize-card > small { grid-column: 1; }
  .menu-prize-tag { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .squirrel-box,
  .squirrel-box-lid,
  .squirrel-confetti i,
  .nav-prize::after { animation: none !important; transition: none !important; }
}

/* Baú Surpresa mantido no código para reativação futura, mas temporariamente fora da interface. */
.feature-disabled-bau { display: none !important; }

/* ===== Menu desktop: padrão cromático solicitado ===== */
@media (min-width: 1025px) {
  #btnTide {
    color: #7dd3fc !important;
    border-color: #38bdf8 !important;
  }
  #btnTide svg { color: #38bdf8 !important; }

  #btnTransfer {
    color: #fff !important;
    border-color: rgba(255,255,255,.68) !important;
  }
  #btnTransfer svg { color: #fff !important; }

  #btnParceiro {
    color: #99f6e4 !important;
    border-color: currentColor !important;
  }
  #btnParceiro svg { color: currentColor !important; }

  #btnLive {
    color: #ff6b5f !important;
    border: 1.6px solid #ff4d45 !important;
    background: rgba(40, 12, 14, .85) !important;
    box-shadow: 0 0 13px rgba(255, 77, 69, .25) !important;
    animation: liveGlow 1.8s ease-in-out infinite !important;
  }
  #btnLive svg,
  #btnLive .pill-txt { color: #ff6b5f !important; }
  #btnLive .live-ring { display: none !important; }

  #btnTour {
    color: #facc15 !important;
    border-color: currentColor !important;
  }
  #btnTour svg {
    color: #facc15 !important;
    background: rgba(250,204,21,.12) !important;
  }

  #btnWallet {
    position: relative;
    color: #c4b5fd !important;
    border-color: currentColor !important;
  }
  #btnWallet svg { color: #c4b5fd !important; }
  #btnWallet .wallet-count {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 3;
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-grid !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.8);
    background: #fff;
    color: #101827;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
  }

  #btnCancel {
    color: #ff6969 !important;
    border-color: currentColor !important;
  }
  #btnCancel svg { color: #ff6969 !important; }

  #btnQuemSomos {
    color: #fff !important;
    border-color: currentColor !important;
  }
  #btnQuemSomos img { border-color: rgba(255,255,255,.7); }

  #waTop {
    color: #fff !important;
    border-color: #25d366 !important;
  }
  #waTop svg { color: #25d366 !important; }

}

/* LIVE desktop segue o mesmo acabamento do botão LIVE mobile. */
@media (min-width: 1025px) {
  #btnLive:hover,
  #btnLive:focus-visible {
    color: #fff !important;
    border-color: #ff6b5f !important;
    background: rgba(93, 19, 24, .9) !important;
    box-shadow: 0 0 18px rgba(255, 77, 69, .5) !important;
    transform: translateY(-1px);
  }
  #btnLive:hover svg,
  #btnLive:hover .pill-txt,
  #btnLive:focus-visible svg,
  #btnLive:focus-visible .pill-txt { color: #fff !important; }
}

/* Políticas ocupam o antigo espaço de Reserva Segura no rodapé do painel. */
.panel-foot-policies {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ff9f43;
  cursor: pointer;
  font: 800 .72rem/1 "Bricolage", sans-serif;
  transition: color .22s ease, transform .22s ease;
}
.panel-foot-policies:hover,
.panel-foot-policies:focus-visible {
  border: 0;
  background: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.panel-foot-policies svg { width:19px; height:19px; color:#fff; flex: 0 0 auto; }
.panel-foot-policies .panel-foot-copy { color:#fff; font-size: .78rem; }
.mobile-menu-secondary-actions:has(> :only-child) { grid-template-columns: 1fr; }

.price-cents {
  display: inline-block !important;
  margin-left: 1px !important;
  font-size: .52em !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  position: relative !important;
  top: -0.15em !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* O valor e os centavos formam uma única unidade visual: nunca separar o ",00". */
.tour-card-price strong,
.offer-price strong,
.boat-hero-price strong,
.lup-package-price strong,
.transfer-card-price,
.total-preview-row strong,
.total-preview-row.sinal b {
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
.fotografia-thumbs-label {
  color: #ffb25e;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fotografia-carousel-controls { padding-top: 10px !important; }
#fotoCarrosselTrack {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
  overflow: visible !important;
  padding: 4px 0 !important;
}
#fotoCarrosselTrack .fotografia-thumb {
  width: auto !important;
  height: 116px !important;
  border-color: rgba(56,189,248,.32) !important;
}
#fotoCarrosselTrack .fotografia-thumb.is-active,
#fotoCarrosselTrack .fotografia-thumb:hover,
#fotoCarrosselTrack .fotografia-thumb:focus-visible {
  border-color: #ffb25e !important;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(0,0,0,.28), 0 0 0 2px rgba(255,178,94,.14);
}
.fotografia-purchase-section { display: none !important; }
@media (max-width: 560px) {
  #fotoCarrosselTrack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fotoCarrosselTrack .fotografia-thumb { height: 104px !important; }
}
.transfer-price {
  display: block;
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800;
  font-size: .98rem;
  line-height: 1;
}

/* O contador deve continuar visível também no botão circular mobile. */
@media (max-width: 1024px) {
  #btnWallet { position: relative; }
  #btnWallet .wallet-count {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 4;
    display: inline-grid !important;
    min-width: 16px;
    width: 16px;
    height: 16px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: #fff;
    color: #101827;
    font-size: .56rem;
    font-weight: 900;
  }
}

/* Rodapé final: três colunas equilibradas e copyright separado. */
.panel-foot-main { min-height:54px; }
.panel-foot-policies {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; border-radius:0; background:transparent;
  color:#fff !important; font:900 .7rem/1 "Bricolage",sans-serif;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.panel-foot-policies:hover, .panel-foot-policies:focus-visible {
  border:0; background:transparent; color:#ffb25e !important; transform:translateY(-1px);
}
.panel-foot-cadastur { justify-self:center; margin:0 !important; }
.panel-foot-cadastur img { width:112px; height:66px; object-fit:contain; }
.panel-foot-company { justify-self:end; margin-left:0 !important; }
@media (max-width:560px) {
  .panel-foot-main { min-height:48px; gap:5px; }
  .panel-foot-bottom { gap:9px; flex-wrap:wrap; }
  .panel-foot-policies { font-size:.65rem; }
  .panel-foot-cadastur img { width:82px; height:58px; }
  .panel-foot-company img { width:28px; height:28px; }
  .panel-foot-company b { font-size:.54rem; }
  .panel-foot-company small { font-size:.48rem; }
  .panel-foot-copyright { font-size:.5rem; }
}

/* Rodapé centralizado e legível em telas estreitas. */
.panel-foot-main {
  display:flex; align-items:center; justify-content:center; gap:clamp(24px, 7vw, 52px);
  min-height:72px;
}
.panel-foot-cadastur { flex:0 0 auto; }
.panel-foot-cadastur img { width:132px; height:78px; }
.panel-foot-company { flex:0 0 auto; }
.panel-foot-company img { width:40px; height:40px; }
.panel-foot-company b { font-size:.74rem; }
.panel-foot-company small { font-size:.62rem; }
.panel-foot-bottom { margin-top:8px; }
@media (max-width:560px) {
  .panel-foot-main { gap:18px; min-height:64px; }
  .panel-foot-cadastur img { width:112px; height:68px; }
  .panel-foot-company { gap:6px; }
  .panel-foot-company img { width:36px; height:36px; }
  .panel-foot-company b { font-size:.64rem; }
  .panel-foot-company small { font-size:.55rem; }
  .panel-foot-bottom { margin-top:7px; }
}

/* Transfer Privado: hero, cobertura e marketplace visual. */
#modalBox .transfer-market-shell {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  width:min(760px, 100%); max-height:90vh; padding:18px 20px 20px;
  border:1px solid rgba(56,189,248,.38); border-radius:24px;
  background:linear-gradient(155deg,#071b2a,#030b12 64%); box-shadow:0 24px 60px rgba(0,0,0,.85);
}
.transfer-page-back, .transfer-page-close { position:absolute; z-index:3; cursor:pointer; }
.transfer-page-back { top:16px; left:18px; display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 14px; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(7,24,34,.78); color:#fff; font:800 .76rem/1 "Bricolage",sans-serif; }
.transfer-page-close { top:16px; right:18px; width:38px; height:38px; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(3,13,21,.82); color:#fff; font:800 1.05rem/1 "Bricolage",sans-serif; }
.transfer-page-back:hover, .transfer-page-close:hover { border-color:#ffb25e; background:rgba(255,178,94,.14); }
.transfer-market-hero { position:relative; min-height:206px; margin:42px 0 14px; overflow:hidden; border:1px solid rgba(56,189,248,.28); border-radius:18px; background:#05121d; isolation:isolate; }
.transfer-market-hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(3,13,21,.98) 0%,rgba(3,13,21,.72) 35%,rgba(3,13,21,.04) 78%),linear-gradient(0deg,rgba(3,13,21,.52),transparent 44%); pointer-events:none; }
.transfer-market-hero img { display:block; width:100%; height:100%; min-height:206px; object-fit:cover; object-position:center 58%; background:#071722; }
.transfer-market-hero-copy { position:absolute; z-index:2; left:22px; bottom:20px; max-width:54%; }
.transfer-market-hero-copy > span { color:#ffb25e; font:850 .66rem/1 "Bricolage",sans-serif; letter-spacing:.17em; }
.transfer-market-hero-copy h3 { margin:7px 0 5px; color:#fff; font:800 clamp(1.35rem,3vw,2rem)/1.02 "Fraunces",serif; }
.transfer-market-hero-copy p { margin:0; color:#d5e4ea; font-size:.74rem; line-height:1.4; }
.transfer-market-scroll { overflow-y:auto; min-height:0; padding:0 4px 4px 0; scrollbar-width:thin; }
.transfer-coverage-note { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:11px 13px; border:1px solid rgba(56,189,248,.28); border-radius:13px; background:linear-gradient(100deg,rgba(7,35,50,.96),rgba(5,20,30,.9)); color:#fff; }
.transfer-coverage-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid rgba(56,189,248,.75); border-radius:50%; color:#38bdf8; font-size:1.25rem; }
.transfer-coverage-note b { display:block; color:#fff; font-size:.75rem; }
.transfer-coverage-note small { display:block; margin-top:2px; color:#9edfff; font-size:.64rem; }
.transfer-market-section { margin:0 0 16px; padding:13px; border:1px solid rgba(56,189,248,.24); border-radius:17px; background:linear-gradient(135deg,rgba(10,34,47,.9),rgba(3,13,21,.96)); }
.transfer-market-section-vans { margin-bottom:4px; }
.transfer-section-heading { display:flex; align-items:center; gap:8px; margin:0 0 11px; }
.transfer-section-heading span { color:#ffb25e; font:850 .68rem/1 "Bricolage",sans-serif; letter-spacing:.15em; }
.transfer-section-heading i { height:1px; flex:1; background:rgba(255,178,94,.22); }
.transfer-market-grid { display:grid; gap:10px; }
.transfer-market-card { position:relative; display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:13px; width:100%; min-height:102px; padding:12px; border:1px solid rgba(56,189,248,.3); border-radius:16px; background:linear-gradient(105deg,rgba(4,19,29,.98),rgba(7,31,43,.88)); color:#fff; text-align:left; cursor:pointer; transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.transfer-market-card:hover, .transfer-market-card:focus-visible { transform:translateY(-2px); border-color:#ffb25e; background:linear-gradient(105deg,rgba(9,38,51,.98),rgba(5,20,30,.98)); box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 15px rgba(56,189,248,.12); }
.transfer-card-image { position:relative; display:block; width:92px; height:76px; overflow:hidden; border:1px solid rgba(255,178,94,.4); border-radius:13px; background:#06141f; }
.transfer-card-image img { display:block; width:100%; height:100%; object-fit:cover; }
.transfer-card-image small { position:absolute; right:5px; bottom:5px; padding:3px 5px; border-radius:999px; background:rgba(3,13,21,.86); color:#fff; font-size:.48rem; font-weight:800; }
.transfer-card-copy { display:flex; min-width:0; flex-direction:column; gap:4px; }
.transfer-card-copy strong { color:#f8fbfd; font-size:.91rem; line-height:1.18; }
.transfer-card-copy em { color:#9fb1be; font-size:.68rem; font-style:normal; line-height:1.35; }
.transfer-card-link { align-self:flex-start; margin-top:2px; padding:4px 8px; border:1px solid rgba(255,178,94,.42); border-radius:999px; color:#ffd09b; font-size:.57rem; font-weight:800; }
.transfer-card-price { align-self:end; display:flex; min-width:118px; flex-direction:column; align-items:flex-end; gap:4px; padding-bottom:2px; color:#ffbd72; text-align:right; white-space:nowrap; }
.transfer-card-capacity { color:#d9e6ec; font:850 .58rem/1.1 "Bricolage",sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.transfer-card-price > strong { color:#ffbd72; font:850 1.52rem/1 "Fraunces",serif; }
.transfer-card-price .price-cents { font-size:.48em; }
.transfer-booking-modal { position:relative; max-height:min(88svh,780px); overflow:hidden; background:linear-gradient(165deg,#102a3c 0%,#081725 47%,#06111b 100%); }
.transfer-booking-modal .modal-hd { padding-top:46px; }
.transfer-booking-modal .modal-bd { overflow-y:auto; }
.transfer-booking-submit { width:100%; min-height:48px; margin-top:18px; justify-content:center; }
/* Evita que o contêiner base do modal apareça branco entre o painel e seu conteúdo. */
#modalBox { background:linear-gradient(170deg,#0d2130,#081522) !important; }
#modalBox > div:first-child { background-color:#071722 !important; }
@media (max-width:560px) {
  #modalBox .transfer-market-shell { padding:14px 12px 14px; border-radius:20px; }
  .transfer-market-hero { min-height:184px; margin-top:43px; }
  .transfer-market-hero img { min-height:184px; }
  .transfer-market-hero-copy { left:15px; bottom:16px; max-width:72%; }
  .transfer-market-hero-copy h3 { font-size:1.35rem; }
  .transfer-market-hero-copy p { font-size:.65rem; }
  .transfer-market-section { padding:10px; }
  .transfer-market-card { grid-template-columns:78px minmax(0,1fr) auto; gap:9px; min-height:94px; padding:9px; }
  .transfer-card-image { width:78px; height:68px; }
  .transfer-card-copy strong { font-size:.78rem; }
  .transfer-card-copy em { font-size:.59rem; }
  .transfer-card-link { font-size:.51rem; }
  .transfer-card-price { min-width:92px; gap:3px; }
  .transfer-card-capacity { font-size:.5rem; }
  .transfer-card-price > strong { font-size:1.2rem; }
  .transfer-section-heading span { font-size:.59rem; letter-spacing:.11em; }
}

/* Acabamento final do Transfer seguindo a paleta escura e laranja da Verão Tour. */
#modalBox .transfer-market-shell {
  border-color:rgba(255,178,94,.38) !important;
  background:linear-gradient(155deg,#071722 0%,#050d14 58%,#07131d 100%) !important;
}
.transfer-market-hero { border-color:rgba(255,178,94,.28); }
.transfer-market-hero-copy > span,
.transfer-section-heading span { color:#ff9f43; }
.transfer-market-hero-copy h3 { max-width:520px; }
.transfer-market-hero-copy p { max-width:530px; font-size:.78rem; }
.transfer-coverage-note {
  min-height:70px; border-color:rgba(255,178,94,.32);
  background:linear-gradient(105deg,rgba(20,29,34,.98),rgba(5,14,20,.98));
}
.transfer-coverage-icon {
  position:relative; width:40px; height:40px; flex-basis:40px;
  border-color:#ff9f43; color:#ffb25e;
  background:rgba(255,159,67,.08);
  box-shadow:0 0 0 4px rgba(255,159,67,.08);
}
.transfer-coverage-icon svg { position:relative; z-index:2; width:20px; height:20px; }
.transfer-coverage-icon::before,
.transfer-coverage-icon::after {
  content:""; position:absolute; inset:-5px; border:1px solid rgba(255,159,67,.48); border-radius:50%;
  animation:coverageRipple 3.8s ease-out infinite; pointer-events:none;
}
.transfer-coverage-icon::after { animation-delay:1.9s; }
@keyframes coverageRipple { 0% { transform:scale(.65); opacity:.8; } 100% { transform:scale(1.6); opacity:0; } }
.transfer-coverage-note b { font-size:.9rem; color:#fff; }
.transfer-coverage-note small { margin-top:5px; color:#e2e8eb; font-size:.82rem; line-height:1.45; }
.transfer-coverage-cities { color:#ffd166; font-weight:900; }
.transfer-market-section { border-color:rgba(255,178,94,.22); background:linear-gradient(135deg,rgba(15,29,37,.94),rgba(4,12,18,.98)); }
.transfer-section-heading i { background:rgba(255,159,67,.25); }
.transfer-market-card { border-color:rgba(255,255,255,.14); background:linear-gradient(105deg,rgba(7,19,27,.98),rgba(5,14,20,.98)); }
.transfer-market-card:hover, .transfer-market-card:focus-visible { border-color:#ff9f43; background:linear-gradient(105deg,rgba(27,31,32,.98),rgba(7,18,24,.98)); box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 15px rgba(255,159,67,.12); }
.transfer-card-image { border-color:rgba(255,178,94,.34); }
.transfer-card-link { border-color:rgba(255,178,94,.42); color:#ffbd72; }
.transfer-card-price { color:#ffb25e; }
@media (max-width:560px) {
  .transfer-coverage-note { align-items:flex-start; min-height:78px; padding:12px; }
  .transfer-coverage-note b { font-size:.8rem; }
  .transfer-coverage-note small { font-size:.74rem; }
  .transfer-market-hero-copy p { font-size:.67rem; }
}

/* Cards de agência: em mobile/tablet o preço fica abaixo do conteúdo.
   Isso evita que a coluna do título seja comprimida e quebre uma palavra
   em uma letra por linha em telas estreitas. */
@media (max-width:1024px) {
  /* Ofertas dentro do perfil da agência: a linha nunca pode ser comprimida
     pela coluna de preço em telas estreitas. */
  #detailBody .offers-list {
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  #detailBody .offers-list > .agencia-offer {
    display:grid !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    align-items:start !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #detailBody .offers-list > .agencia-offer .offer-cover {
    width:68px !important;
    height:68px !important;
    flex:0 0 68px !important;
  }
  #detailBody .offers-list > .agencia-offer .offer-txt {
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:none !important;
  }
  #detailBody .offers-list > .agencia-offer .offer-txt > span,
  #detailBody .offers-list > .agencia-offer .offer-txt > strong,
  #detailBody .offers-list > .agencia-offer .offer-txt > small {
    max-width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
  #detailBody .offers-list > .agencia-offer .offer-side {
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    flex:none !important;
    text-align:right !important;
    transform:none !important;
  }
  #detailBody .offers-list > .agencia-offer .offer-price {
    min-width:0 !important;
    white-space:normal !important;
  }
  #detailBody .offers-list > .agencia-offer .offer-buy {
    margin-top:0 !important;
    white-space:nowrap !important;
  }

  #viewDetail .ag-card .offer {
    display:grid !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    align-items:start;
    gap:12px;
    padding:14px 16px !important;
    box-sizing:border-box !important;
  }
  #viewDetail .ag-card .offer-cover {
    width:68px;
    height:68px;
    flex:0 0 68px;
  }
  #viewDetail .ag-card .offer-txt {
    width:100%;
    min-width:0;
  }
  #viewDetail .ag-card .offer-txt strong {
    font-size:.86rem;
    line-height:1.25;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  #viewDetail .ag-card .offer-side {
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding-right:6px !important;
    box-sizing:border-box !important;
    text-align:right;
    transform:none;
  }
  #viewDetail .ag-card .offer-price { min-width:0; }
  #viewDetail .ag-card .offer-buy {
    margin-top:0;
    margin-right:4px !important;
    flex-shrink:0 !important;
    white-space:nowrap;
  }

  /* Perfil individual da agência: este card tem estilos inline no markup. */
  #viewDetail .offers-list .offer {
    display:grid !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    align-items:start !important;
    gap:12px !important;
    padding:14px 16px !important;
    box-sizing:border-box !important;
  }
  #viewDetail .offers-list .offer .offer-cover {
    width:68px;
    height:68px;
    flex:0 0 68px;
  }
  #viewDetail .offers-list .offer .offer-txt {
    width:100%;
    min-width:0;
  }
  #viewDetail .offers-list .offer .offer-txt strong {
    min-width:0;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  #viewDetail .offers-list .offer .offer-side {
    grid-column:1 / -1;
    width:100% !important;
    min-width:0;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center !important;
    gap:10px;
    padding-right:6px !important;
    box-sizing:border-box !important;
    text-align:right;
    transform:none;
  }
  #viewDetail .offers-list .offer .offer-buy {
    margin-top:0 !important;
    margin-right:4px !important;
    flex-shrink:0 !important;
    white-space:nowrap;
  }
}

/* Catálogo de transporte privativo por passeio. */
.transfer-ride-intro { margin:-3px 0 13px; color:#c8d6df; font-size:.82rem; line-height:1.45; }
.transfer-ride-card { grid-template-columns:104px minmax(0,1fr) auto; min-height:112px; }
.transfer-ride-card .transfer-card-image { width:104px; height:86px; }
.transfer-consult-price { max-width:92px; color:#ffd09b; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size:.72rem; line-height:1.15; text-align:right; white-space:normal; }
.transfer-ride-detail { position:relative; display:flex; flex-direction:column; max-height:88vh; overflow:hidden; padding:24px 22px 18px; border:1px solid rgba(255,178,94,.38); border-radius:24px; background:linear-gradient(155deg,#071722,#050d14 58%,#07131d); box-shadow:0 24px 60px rgba(0,0,0,.85); }
.transfer-ride-detail-head { padding:36px 0 16px; text-align:center; }
.transfer-ride-detail-head span { color:#ff9f43; font:850 .68rem/1 "Bricolage",sans-serif; letter-spacing:.16em; }
.transfer-ride-detail-head h3 { margin:8px 0 4px; color:#fff; font:800 clamp(1.45rem,3vw,2rem)/1.05 "Fraunces",serif; }
.transfer-ride-detail-head p { margin:0; color:#aebfca; font-size:.82rem; line-height:1.4; }
.transfer-ride-detail-scroll { min-height:0; overflow-y:auto; padding-right:4px; }
.transfer-ride-gallery { overflow:hidden; border:1px solid rgba(56,189,248,.3); border-radius:18px; background:#020a10; }
.transfer-ride-gallery > img { display:block; width:100%; height:220px; object-fit:cover; }
.transfer-ride-thumbs { display:flex; gap:8px; padding:10px; overflow-x:auto; }
.transfer-ride-thumbs button { width:68px; height:48px; flex:0 0 68px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:#071923; opacity:.72; cursor:pointer; }
.transfer-ride-thumbs button.is-active { border-color:#ff9f43; opacity:1; }
.transfer-ride-thumbs img { width:100%; height:100%; object-fit:cover; }
.transfer-ride-description { margin:16px 0; color:#d7e4ec; font-size:.94rem; line-height:1.6; }
.transfer-ride-includes { margin-bottom:14px; padding:15px; border:1px solid rgba(56,189,248,.24); border-radius:16px; background:linear-gradient(135deg,rgba(13,38,52,.86),rgba(3,13,21,.96)); }
.transfer-ride-includes > strong { display:block; margin-bottom:11px; color:#ffad5c; font-size:.76rem; letter-spacing:.1em; }
.transfer-ride-includes > div { display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; }
.transfer-ride-includes span { display:flex; align-items:center; gap:7px; color:#f8fafc; font-size:.84rem; font-weight:750; }
.transfer-ride-includes svg { color:#34d399; }
.transfer-ride-consult { display:flex; flex-direction:column; align-items:center; margin-bottom:16px; padding:12px; border:1px solid rgba(255,178,94,.26); border-radius:14px; background:rgba(255,159,67,.06); text-align:center; }
.transfer-ride-consult span { color:#ffad5c; font-size:.66rem; font-weight:850; letter-spacing:.12em; }
.transfer-ride-consult b { margin:4px 0; color:#fff; font:800 1.35rem/1 "Fraunces",serif; }
.transfer-ride-consult small { color:#aebfca; font-size:.7rem; }
.transfer-ride-actions { display:flex; flex-shrink:0; }
.transfer-ride-actions button { width:100%; min-height:46px; justify-content:center; gap:7px; font-size:.86rem; }
.transfer-action-icon { width:22px; height:22px; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
@media (max-width:560px) {
  .transfer-ride-card { grid-template-columns:76px minmax(0,1fr) auto; min-height:96px; }
  .transfer-ride-card .transfer-card-image { width:76px; height:68px; }
  .transfer-consult-price { max-width:70px; font-size:.62rem; }
  .transfer-ride-detail { padding:14px 12px 14px; border-radius:20px; }
  .transfer-ride-detail-head { padding-top:35px; }
  .transfer-ride-gallery > img { height:180px; }
  .transfer-ride-includes > div { grid-template-columns:1fr; gap:9px; }
  .transfer-ride-includes span { font-size:.8rem; }
}

/* Contorno fixo da opção Agências na navegação desktop. */
@media (min-width:1025px) {
  #btnAgencias { color:#fde68a !important; border-color:#fbbf24 !important; }
  #btnAgencias svg { color:#fbbf24 !important; }
}

/* Cabeçalho mobile responsivo: logo maior sem comprimir os controles. */
@media (max-width:1024px) {
  .topbar {
    display:flex; align-items:center; gap:clamp(6px, 2vw, 12px);
    padding: max(6px, env(safe-area-inset-top, 0px)) clamp(8px, 2.8vw, 16px) 10px !important;
  }
  .brand { flex:0 1 clamp(82px, 22vw, 125px); width:clamp(82px, 22vw, 125px); min-width:0; margin-right:auto; padding-right:0; margin-top:-3px !important; }
  .brand img { display:block; width:100%; height:auto; max-width:none; max-height:35px; object-fit:contain; object-position:left center; }
  .topnav { flex:0 0 auto; min-width:0; gap:clamp(4px, 1.5vw, 8px); }
  #waMobile, #btnLive, #btnWallet, #btnTour { width:36px !important; height:36px !important; min-width:44px !important; min-height:44px !important; display:inline-flex; align-items:center; justify-content:center; }
  #btnMobileMenu { width:43px !important; height:43px !important; min-width:44px !important; min-height:44px !important; display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width:400px) {
  .topbar { padding-inline:7px; gap:5px; }
  .brand { flex-basis:88px; width:88px; }
  .topnav { gap:3px; }
  #waMobile, #btnLive, #btnWallet, #btnTour { width:36px !important; height:36px !important; min-width:44px !important; min-height:44px !important; }
  #btnMobileMenu { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; }
  #waMobile::after, #btnLive::after, #btnWallet::after, #btnTour::after, #btnMobileMenu::after { font-size:.4rem; }
}

/* Navegação de serviços: moldura e texto brancos; cada ícone mantém sua cor.
   Todos os botões usam o mesmo traçado e fundo do botão Fotografia. */
#btnTide, #btnTransfer, #btnAgencias, #btnParceiro, #btnLive, #btnTour, #btnWallet, #btnCancel {
  color:#fff !important;
  border-color:rgba(148,163,184,.32) !important;
  background:rgba(9,22,32,.72) !important;
}
#btnTide svg { color:#38bdf8 !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(56,189,248,.75)); }
#btnTransfer svg { color:#facc15 !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(250,204,21,.62)); }

#btnAgencias svg { color:#fbbf24 !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(251,191,36,.68)); }
#btnParceiro svg { color:#2dd4bf !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(45,212,191,.65)); }
#btnLive svg { color:#ff6b5f !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(255,107,95,.72)); }
#btnLive { border-color:#ff4d45 !important; }
#btnLive .pill-txt { color:#fff !important; }
#btnTour svg { color:#facc15 !important; fill:#facc15 !important; stroke:#facc15 !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(250,204,21,.68)); }
#btnWallet svg { color:#c4b5fd !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(196,181,253,.7)); }
#btnCancel svg { color:#ff6969 !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(255,105,105,.72)); }
#btnCancel .nav-cancel-icon { width:26px; height:26px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(255,70,70,.55)); }
/* Traçado igual ao das demais opções da barra. */
#btnTide, #btnTide:hover, #btnLive, #btnLive:hover { border-color: rgba(148,163,184,.32) !important; }

@media (max-width:1024px) {
  /* Tickets fica visível na head também no mobile (pedido do cliente). */
  #btnWallet { display:inline-flex !important; color:#c4b5fd !important; border-color:rgba(196,181,253,.7) !important; background:rgba(196,181,253,.12) !important; }
  #btnWallet svg { color:#c4b5fd !important; }
  #btnTour { color:#facc15 !important; border-color:rgba(250,204,21,.7) !important; }
  #btnTour svg, #btnTour .pill-txt { color:#facc15 !important; fill:#facc15 !important; stroke:#facc15 !important; }
  #btnTour.is-on { background:rgba(250,204,21,.14) !important; color:#facc15 !important; border-color:#facc15 !important; box-shadow:0 0 14px rgba(250,204,21,.35) !important; }
  #btnTour.is-on svg { color:#facc15 !important; fill:#facc15 !important; stroke:#facc15 !important; }
  .topnav { justify-content:center; gap:clamp(6px, 2vw, 10px); }
}

/* Marés: contorno e texto neutros com o azul reservado ao ícone. */
#btnTide, #btnTide:hover { color:#fff !important; border-color:rgba(148,163,184,.32) !important; }
#btnWallet .wallet-count[hidden] { display:none !important; }
#btnTide svg { color:#38bdf8 !important; stroke:#38bdf8 !important; }

/* Ícone de cobertura: marcador mais legível com pulso de localização. */
.transfer-coverage-icon {
  width:46px; height:46px; flex-basis:46px;
  border:1.5px solid #ff9f43; border-radius:50%;
  background:radial-gradient(circle at center,rgba(255,159,67,.2) 0 22%,rgba(255,159,67,.06) 23% 52%,rgba(3,13,21,.92) 53%);
  box-shadow:0 0 0 4px rgba(255,159,67,.08),0 0 18px rgba(255,159,67,.22);
}
.transfer-coverage-icon svg { width:23px; height:23px; color:#ffb25e; filter:drop-shadow(0 0 4px rgba(255,159,67,.6)); }
.transfer-coverage-icon svg { color:#fff; stroke:#fff; }
.transfer-coverage-icon i { position:absolute; z-index:1; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,159,67,.35),0 0 10px rgba(255,159,67,.9); animation:coveragePinPulse 2.6s ease-in-out infinite; }
.transfer-coverage-icon::before, .transfer-coverage-icon::after { border-color:rgba(255,178,94,.6); }
@keyframes coveragePinPulse { 0%,100% { transform:scale(.8); opacity:.75; } 50% { transform:scale(1.18); opacity:1; } }

@media (max-width:560px) {
  .transfer-market-hero-copy h3 {
    max-width:100%;
    font-size:clamp(1.16rem, 7.2vw, 1.65rem);
    line-height:1.06;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}
/* Acessibilidade: foco visível e respeito à preferência de movimento reduzido. */
:focus-visible {
  outline: 2px solid #ff9a3d;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   FOTOGRAFIA VERAO TOUR - equipe + galeria autoral
   Abertura em mosaico deslizante, cards de fotografo com filtro e galeria
   masonry com lightbox. Segue o dark + laranja do sistema.
   ============================================================================ */
.fx-modal { padding: 0 !important; background: transparent !important; border: 0 !important; }
.fx-shell {
  position: relative; display: flex; flex-direction: column;
  max-height: 88vh; overflow: hidden;
  border-radius: 24px; border: 1px solid rgba(255, 159, 67, 0.42);
  background: #061017; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
}
.fx-topbar {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(6, 16, 23, 0.92); backdrop-filter: blur(10px);
}
.fx-logo { max-height: 40px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(255, 159, 67, 0.35)); }
.fx-close {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.6);
  color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.fx-close:hover { background: rgba(255, 159, 67, 0.2); border-color: var(--sol); }
.fx-login-lock {
  border-color: rgba(255, 107, 0, 0.45);
  background: rgba(255, 107, 0, 0.14);
}
.fx-login-lock:hover {
  background: rgba(255, 107, 0, 0.28);
  border-color: #FF6B00;
  box-shadow: 0 0 14px rgba(255, 107, 0, 0.45);
}
.fx-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Bloco A: abertura ---------- */
.fx-hero { position: relative; overflow: hidden; min-height: 260px; display: grid; }
.fx-hero-track {
  position: absolute; inset: 0; display: flex; gap: 6px; width: max-content;
  animation: fxDrift 46s linear infinite;
}
.fx-hero-track img { width: 220px; height: 100%; object-fit: cover; opacity: 0.88; flex: 0 0 auto; }
@keyframes fxDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fx-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,23,.10) 0%, rgba(6,16,23,.65) 50%, #061017 100%); }
.fx-hero-txt { position: relative; z-index: 2; align-self: end; padding: 30px 26px 24px; }
.fx-eyebrow { display: block; color: var(--sol); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.fx-hero-txt h2 { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.12; color: #fff; margin: 8px 0 6px; }
.fx-hero-txt p { margin: 0 0 12px; color: #cbd5e1; font-size: 0.87rem; }
.fx-badge {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 159, 67, 0.45); background: rgba(255, 159, 67, 0.12);
  color: var(--sol); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em;
}

/* ---------- Revelacao ao rolar ---------- */
.fx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.fx-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-hero-track { animation: none; }
}

.fx-section-head { padding: 26px 26px 12px; }
.fx-section-head h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.32rem; color: #fff; margin: 6px 0 4px; }
.fx-section-head p { margin: 0; color: #94a3b8; font-size: 0.82rem; }

/* ---------- Bloco B: equipe ---------- */
.fx-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 26px; }
.fx-member {
  display: flex; flex-direction: column; gap: 0; text-align: left; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, 0.03); cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fx-member:hover { transform: translateY(-4px); border-color: rgba(255, 159, 67, 0.6); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.fx-member.is-on { border-color: var(--sol); box-shadow: 0 0 0 1px var(--sol) inset, 0 14px 34px rgba(255, 159, 67, 0.22); }
.fx-member:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }
.fx-member-photo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0a1a24; }
.fx-member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.fx-member:hover .fx-member-photo img { transform: scale(1.06); }
.fx-member-photo em {
  position: absolute; left: 10px; bottom: 10px; font-style: normal;
  padding: 4px 10px; border-radius: 999px; background: rgba(6, 16, 23, 0.82);
  border: 1px solid rgba(255, 159, 67, 0.4); color: var(--sol);
  font-size: 0.66rem; font-weight: 800; backdrop-filter: blur(6px);
}
.fx-member-info { display: block; padding: 13px 14px 15px; }
.fx-member-info strong { display: block; color: #fff; font-size: 0.98rem; }
.fx-member-info small { display: block; color: var(--sol); font-size: 0.71rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; margin: 3px 0 7px; }
.fx-member-bio { display: block; color: #b8c4d4; font-size: 0.76rem; line-height: 1.5; }
.fx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.fx-tags i {
  font-style: normal; padding: 3px 8px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #93a3b8; font-size: 0.65rem; font-weight: 650;
}

/* ---------- Bloco C: galeria ---------- */
.fx-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 26px 14px; }
.fx-filters button {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  color: #b8c4d4; font-size: 0.76rem; font-weight: 700;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.fx-filters button:hover { border-color: rgba(255, 159, 67, 0.5); color: #fff; }
.fx-filters button.is-on { background: var(--sol); border-color: var(--sol); color: #06131c; }
.fx-masonry { columns: 3; column-gap: 12px; padding: 0 26px 8px; transition: opacity .18s ease; }
.fx-item {
  position: relative; break-inside: avoid; margin: 0 0 12px; padding: 0;
  border-radius: 14px; overflow: hidden; cursor: zoom-in;
  border: 1px solid rgba(255, 255, 255, 0.08); background: #0a1a24;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .5s ease;
}
.fx-item:hover { transform: translateY(-3px); border-color: var(--sol); box-shadow: 0 12px 30px rgba(255, 159, 67, 0.22); }
.fx-item:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }
.fx-item img { width: 100%; height: auto; display: block; }
.fx-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 11px;
  background: linear-gradient(180deg, transparent, rgba(6, 16, 23, 0.94));
  transform: translateY(102%); transition: transform .26s ease;
}
.fx-item:hover figcaption, .fx-item:focus-visible figcaption { transform: none; }
.fx-item figcaption strong { display: block; color: #fff; font-size: 0.82rem; }
.fx-item figcaption span { display: block; color: #b8c4d4; font-size: 0.7rem; margin-top: 2px; }

/* ---------- Encerramento ---------- */
.fx-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 12px 26px 26px; padding: 20px;
  border-radius: 18px; border: 1px solid rgba(255, 159, 67, 0.35);
  background: linear-gradient(135deg, rgba(255, 159, 67, 0.14), rgba(6, 16, 23, 0.9));
}
.fx-cta strong { display: block; color: #fff; font-size: 1.02rem; }
.fx-cta p { margin: 5px 0 0; color: #cbd5e1; font-size: 0.8rem; max-width: 52ch; line-height: 1.5; }
.fx-cta a {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 13px 20px; border-radius: 13px; text-decoration: none;
  background: linear-gradient(135deg, #25d366, #1ebe57); color: #fff;
  font-weight: 800; font-size: 0.88rem; text-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.3); transition: transform .16s ease, box-shadow .16s ease;
}
.fx-cta a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); }

/* ---------- Lightbox ---------- */
#fxLightbox {
  position: fixed; inset: 0; z-index: 3000; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 20px; background: rgba(3, 8, 12, 0.94); backdrop-filter: blur(6px); cursor: zoom-out;
}
.fx-lb-fig { margin: 0; justify-self: center; text-align: center; cursor: default; max-width: min(1100px, 92vw); }
.fx-lb-fig img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.fx-lb-fig figcaption { margin-top: 12px; color: #fff; }
.fx-lb-fig figcaption strong { font-size: 1rem; }
.fx-lb-fig figcaption span { display: block; color: #b8c4d4; font-size: 0.78rem; margin-top: 3px; }
.fx-lb-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.55);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.fx-lb-nav {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.55);
  color: #fff; font-size: 1.7rem; line-height: 1; display: grid; place-items: center;
}
.fx-lb-nav:hover, .fx-lb-close:hover { background: var(--sol); color: #06131c; border-color: var(--sol); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) { .fx-masonry { columns: 2; } }
@media (max-width: 560px) {
  .fx-hero { min-height: 210px; }
  .fx-hero-txt { padding: 22px 16px 18px; }
  .fx-section-head { padding: 20px 16px 10px; }
  .fx-team-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px;
  }
  .fx-member { scroll-snap-align: start; }
  .fx-filters { padding: 4px 16px 12px; flex-wrap: nowrap; overflow-x: auto; }
  .fx-filters button { flex: 0 0 auto; }
  .fx-masonry { columns: 2 !important; column-gap: 8px !important; padding: 0 12px 8px !important; }
  .fx-item { margin-bottom: 8px !important; }
  .fx-cta { margin: 10px 16px 20px; padding: 16px; }
  .fx-cta a { width: 100%; justify-content: center; }
  #fxLightbox { grid-template-columns: 1fr; padding: 12px; }
  .fx-lb-nav { position: absolute; bottom: 18px; }
  .fx-lb-nav.prev { left: 20px; }
  .fx-lb-nav.next { right: 20px; }
}

/* ---------- Fotografia: como funciona + acesso da equipe ---------- */
.fx-info { margin: 0 26px 18px; padding: 22px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); }
.fx-info h4 { margin: 0 0 16px; font-family: "Fraunces", Georgia, serif; font-size: 1.12rem; color: #fff; }
.fx-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fx-info-grid > div { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 13px; background: rgba(6, 16, 23, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); }
.fx-info-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sol); color: #06131c; font-size: 0.76rem; font-weight: 900; margin-bottom: 4px; }
.fx-info-grid strong { color: #fff; font-size: 0.86rem; }
.fx-info-grid small { color: #b8c4d4; font-size: 0.75rem; line-height: 1.45; }
.fx-info-notas { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; }
.fx-info-notas li { position: relative; padding-left: 20px; color: #cbd5e1; font-size: 0.79rem; line-height: 1.5; }
.fx-info-notas li::before { content: "✓"; position: absolute; left: 0; color: #34d399; font-weight: 900; }

.fx-login {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 0 26px 26px; padding: 20px 22px;
  border-radius: 18px; border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(6, 16, 23, 0.92));
}
.fx-login-txt { min-width: 0; }
.fx-login-txt .fx-eyebrow { color: #d8b4fe; }
.fx-login-txt strong { display: block; color: #fff; font-size: 1.02rem; margin: 6px 0 4px; }
.fx-login-txt p { margin: 0; color: #cbd5e1; font-size: 0.8rem; max-width: 54ch; line-height: 1.5; }
.fx-login-btn {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 14px 22px; border-radius: 13px; text-decoration: none;
  background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff;
  font-weight: 800; font-size: 0.9rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.38);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.fx-login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(168, 85, 247, 0.55); filter: brightness(1.08); }
.fx-login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) { .fx-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .fx-info { margin: 0 16px 14px; padding: 16px; }
  .fx-info-grid { grid-template-columns: 1fr; }
  .fx-login { margin: 0 16px 20px; padding: 16px; }
  .fx-login-btn { width: 100%; justify-content: center; }
}

/* ---------- Fotografia no mobile ----------
   Fica dentro do menu completo (botão ☰), e não na barra superior. */
@media (max-width: 1024px) {
  #btnFotografia { display: none !important; }
}

/* ============================================================
   Cards da lista: nome e descrição nunca encostam no preço
   ============================================================
   Antes o preço era position:absolute e o corpo do card apenas
   "reservava" 96px de padding à direita. Preço com 4 dígitos
   (R$ 3.600,00) passa desses 96px e entra por baixo do texto.
   Agora as duas partes são colunas de um flex: o preço ocupa a
   largura que precisar e o texto recebe o resto — não há como
   se sobreporem, com qualquer valor.
   ============================================================ */
.tour-card { display: flex; align-items: stretch; }

.tour-card-body {
  flex: 1 1 auto;
  min-width: 0;                      /* deixa o texto encolher em vez de vazar */
  padding-right: 18px !important;    /* respiro garantido antes do preço */
  padding-bottom: 16px !important;
}
.tour-card-body > * { min-width: 0; }
.tour-card h3 {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-card-meta {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tour-card-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tour-card-price {
  position: static !important;
  flex: 0 0 auto;
  /* Ancorado no canto inferior direito, não no meio da lateral. */
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-end;
  padding: 16px 16px 14px 10px !important;
  text-align: right;
  white-space: nowrap;               /* o valor nunca quebra no meio */
}
.tour-card-price strong { white-space: nowrap; }

/* Os ajustes antigos existiam só para contornar o preço absoluto. */
.oferta-card .tour-card-body,
.catamara-card .tour-card-body { padding-right: 12px !important; }
.catamara-card .tour-card-meta { max-width: none; }

@media (max-width: 520px) {
  .tour-card-price { padding: 14px 13px 14px 0 !important; }
  .tour-card-price strong { font-size: 1.25rem !important; }
  .tour-card-body { padding-left: 15px !important; }
}

/* Estrelas de porte sob o rótulo das abas de barco. Especificidade alta de
   propósito: `.tab svg` é redefinido com !important no styles.css e de novo no
   responsive-system.css (que carrega depois), e engoliria o tamanho das estrelas. */
.tab { flex-wrap: wrap; }
.tab .tab-estrelas {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: -2px;
  line-height: 1;
  color: var(--sol);
}
.tab .tab-estrelas svg {
  width: 9px !important;
  height: 9px !important;
  opacity: 0.95;
  display: block !important;
}
.tab.is-on .tab-estrelas { color: #fff; }
@media (max-width: 380px) {
  .tab .tab-estrelas { gap: 1px; margin-top: -1px; }
  .tab .tab-estrelas svg { width: 7px !important; height: 7px !important; }
}

/* Aba com duas linhas de texto ("Aluguel" sobre "Catamarã"). O flex-basis força
   a quebra, então o ícone fica sozinho na primeira linha nos dois layouts. */
.tab .tab-duas-linhas {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.12;
}
.tab .tab-kicker {
  font-size: 0.84em;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: inherit;
}

/* Desktop: as estrelas saem do fluxo para não empurrarem a linha do ícone +
   rótulo para cima — assim todas as abas leem na mesma linha de "Passeios".
   No mobile a aba é coluna e o empilhamento natural já funciona. */
@media (min-width: 1025px) {
  .tab { position: relative; min-height: 54px; }
  .tab .tab-estrelas {
    position: absolute;
    left: 0; right: 0; bottom: 5px;
    margin-top: 0;
  }
}

/* Mobile: cada botão redondo do topo ganha o traçado na cor do próprio ícone,
   como o WhatsApp já tinha. O traço é do botão (não do anel animado do LIVE),
   então continua visível durante a pulsação. */
@media (max-width: 1024px) {
  #btnLive {
    border-color: rgba(255, 107, 95, 0.6) !important;
    background: rgba(255, 107, 95, 0.12) !important;
  }
  #btnTour {
    border-color: rgba(250, 204, 21, 0.6) !important;
    background: rgba(250, 204, 21, 0.12) !important;
  }
  #btnWallet {
    border-color: rgba(196, 181, 253, 0.6) !important;
    background: rgba(196, 181, 253, 0.12) !important;
  }
  #waMobile {
    border-color: rgba(37, 211, 102, 0.6) !important;
    background: rgba(37, 211, 102, 0.12) !important;
  }
}

/* Tickets no mobile: quando há tickets salvos, o botão ficava verde e pulsando.
   Passa a usar o roxo do próprio ícone no traço e no rótulo, sem animação. */
@media (max-width: 1024px) {
  #btnWallet.has-tickets {
    color: #c4b5fd !important;
    border-color: rgba(196, 181, 253, 0.7) !important;
    background: rgba(196, 181, 253, 0.14) !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
  }
  #btnWallet.has-tickets svg { color: #c4b5fd !important; }
}

/* Ícones de navio das abas de barco: são preenchidos, mas `.tab svg` força
   stroke laranja — sem isso os contornos ficariam duplicados. A onda continua
   sendo traço. */
/* Prefixo #tabRow de propósito: a regra ".tab.is-on svg" do bloco mobile zera o
   preenchimento com !important, e sem mais especificidade o navio da aba ATIVA
   ficava sem fill — sumia, sobrando só um risco fino. */
#tabRow .tab .tab-icone-navio { fill: currentColor !important; stroke: none !important; }
#tabRow .tab .tab-icone-navio path { fill: currentColor !important; stroke: none !important; }
#tabRow .tab .tab-icone-navio .onda {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* Ícone e rótulo das abas em branco; as estrelas seguem no laranja da marca. */
.tab { color: #fff; }
.tab svg { color: #fff; stroke: #fff; }
/* As estrelas precisam de !important: no mobile a regra .tab:not(.is-on) svg
   pinta tudo de branco com !important e levaria as estrelas junto. */
.tab:not(.is-on) .tab-estrelas { color: var(--sol) !important; }
.tab:not(.is-on) .tab-estrelas svg { color: var(--sol) !important; fill: var(--sol) !important; stroke: none !important; }
.tab.is-on .tab-estrelas { color: #ffffff !important; }
.tab.is-on .tab-estrelas svg { color: #ffffff !important; fill: #ffffff !important; stroke: none !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) !important; }

/* Tour guiado: a capa cresce devagar enquanto o passeio está em foco, dando
   movimento antes de trocar para o próximo. Some junto com o tour. */
.detail-hero img.tour-capa-zoom {
  animation: tourCapaZoom 5.2s ease-out both;
  transform-origin: center 55%;
}
@keyframes tourCapaZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-hero img.tour-capa-zoom { animation: none; transform: none; }
}

/* Dica na alça do painel: sem ela, o visitante não descobre que o mapa está
   atrás. Fica logo abaixo da linha laranja e some depois que a pessoa arrasta
   uma vez (a classe é retirada pelo app.js). */
@media (min-width: 1025px) {
  .panel-drag-handle {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .panel-drag-handle {
    position: relative;
    width: 100%;
    height: 24px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    user-select: none;
    background: transparent;
    z-index: 10 !important;
    margin-top: 2px;
    margin-bottom: -2px;
    pointer-events: none !important;
  }
}

.panel-drag-bar {
  position: relative !important;
  display: block !important;
  top: -3px !important;
  left: 0 !important;
  transform: none !important;
  width: 60px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff9a3c, #ff7a18) !important;
  border: 0 !important;
  box-shadow: 0 0 10px rgba(255, 154, 60, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}

.panel-drag-handle:hover .panel-drag-bar,
.panel-drag-handle:active .panel-drag-bar {
  transform: translateY(-3px) scaleX(1.15) scaleY(1.25) !important;
  background: linear-gradient(90deg, #ffb25e, #ff8a2b) !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(255, 154, 60, 0.9), 0 3px 8px rgba(0, 0, 0, 0.45) !important;
}

.panel-drag-bar svg {
  display: block !important;
}

/* ===== Botões de Voltar Laranja com Texto Branco no Mobile ===== */
.modal-back,
.detail-back,
.transfer-page-back,
.page-back,
.back,
a.back,
button.modal-back,
button.detail-back,
button[onclick*="voltarPaginaAnterior"],
button[onclick*="voltar"],
.panel-close-btn,
#btnClosePanel {
  z-index: 999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

@media (max-width: 1024px) {
  .modal-back,
  .detail-back,
  .transfer-page-back,
  .page-back,
  .back,
  a.back,
  button.modal-back,
  button.detail-back,
  button[onclick*="voltarPaginaAnterior"],
  button[onclick*="voltar"] {
    background: #ff9a3c !important;
    background: linear-gradient(135deg, #ff9a3c, #ff7a18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(255, 122, 24, 0.45) !important;
    padding: 7px 15px 7px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  }

  .modal-back svg,
  .detail-back svg,
  .transfer-page-back svg,
  .page-back svg,
  .back svg,
  a.back svg,
  button[onclick*="voltarPaginaAnterior"] svg,
  button[onclick*="voltar"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
  }

  .modal-back span,
  .detail-back span,
  .transfer-page-back span,
  .page-back span,
  .back span,
  a.back span,
  button[onclick*="voltarPaginaAnterior"] span,
  button[onclick*="voltar"] span {
    color: #ffffff !important;
    font-weight: 800 !important;
  }
}

/* Em telas estreitas o selo "Opção N de M" sai de cima do cabeçalho e ganha
   linha própria: sobrepondo, ele obrigava a reservar 92px e o endereço da
   agência quebrava em três linhas. */
@media (max-width: 540px) {
  .ag-card .ag-opcao {
    position: static;
    display: block;
    width: fit-content;
    margin: 0 0 9px auto;
  }
  .ag-card .ag-opcao ~ .ag-head .ag-head-txt { padding-right: 0; }
}

/* Toque no celular: o Android pinta um retângulo azulado sobre o que foi
   tocado, e um toque rápido em botão com texto ainda podia iniciar seleção,
   deixando outro retângulo azul. Os dois somem aqui.
   O anel de foco continua existindo em :focus-visible (teclado), logo abaixo. */
a, button, [role="button"], .tab, .nav-pill, .menu-option, .tour-card,
.ag-card, .offer-cover, .modal-back, .detail-back, .panel-drag-handle {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button, [role="button"], .tab, .nav-pill, .modal-back, .detail-back {
  -webkit-user-select: none;
  user-select: none;
}
/* Reforça que o realce visível de foco é o laranja da marca, nunca o azul do
   navegador — inclusive quando o clique deixa o elemento focado. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; border-radius: 4px; }

/* ===== Otimizações Mobile Globais ===== */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Impede auto-zoom irritante do iOS Safari ao clicar em inputs */
  input, select, textarea,
  .field input, .field select, .field textarea,
  .modal-bd input, .modal-bd select, .modal-bd textarea {
    font-size: 16px !important;
  }

  /* Área segura para barras de navegação mobile e gestos */
  .modal-wrap {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-menu-shell {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ===== Ajuste Mobile: Botão "Opções" Laranja e Afastamento do Leaflet ===== */
@media (max-width: 1024px) {
  /* Botão "Opções": Fundo laranja vibrante com texto branco e negrito */
  .panel-mobile-restore {
    position: fixed !important;
    z-index: 70 !important;
    left: 50% !important;
    bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: linear-gradient(135deg, #ef7d2e 0%, #ff9f43 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 8px 24px rgba(239, 125, 46, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(14px) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  }

  .panel-mobile-restore span {
    color: #ffffff !important;
    font-weight: 850 !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  .panel-mobile-restore svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.8px !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
  }

  .panel-mobile-restore:hover,
  .panel-mobile-restore:active {
    background: linear-gradient(135deg, #ff8a3d 0%, #ffb25e 100%) !important;
    transform: translateX(-50%) translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(239, 125, 46, 0.7), 0 6px 16px rgba(0, 0, 0, 0.45) !important;
  }

  /* Atribuição do Leaflet no canto inferior direito: mantido afastado do botão central "Opções" */
  .leaflet-bottom.leaflet-right,
  .leaflet-control-attribution {
    bottom: 2px !important;
    right: 4px !important;
    font-size: 0.54rem !important;
    line-height: 1.15 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: rgba(5, 13, 20, 0.78) !important;
    color: rgba(238, 246, 249, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    max-width: 40vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 60 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .leaflet-control-attribution a {
    color: rgba(238, 246, 249, 0.7) !important;
    text-decoration: none !important;
  }
}



/* ============================================================
   VERÃO TOUR · CAMADA RESPONSIVA CONSOLIDADA
   Esta folha é carregada por último e estabiliza o legado sem
   depender da ordem das antigas correções espalhadas em styles.css.
   ============================================================ */

html,
body {
  width: 100%;
  max-width: 100%;
  overscroll-behavior: none;
}

body,
.topbar,
.panel,
.panel-view,
#detailBody,
.modal,
#modalBox,
.agencias-directory,
.agencias-directory-list,
.agencia-directory-card,
.ag-card,
.offers-list,
.offer,
.offer-txt,
.offer-side {
  min-width: 0;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

.panel-view,
.modal,
.agencias-directory {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Perfil de agência: elimina os estilos inline que comprimiam o texto. */
.ag-contact-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 22px 0;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 13px;
  background: rgba(34, 197, 94, .08);
}

.ag-contact-box > span {
  min-width: 0;
  color: rgba(238, 246, 249, .82);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

.ag-contact-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9px;
  background: #22c55e;
  color: #fff;
  font-size: .75rem;
  font-weight: 850;
  cursor: pointer;
}

.ag-offers-title { margin-top: 20px; }

.offers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: auto;
  margin: 10px 22px 0;
}

.offers-list .agencia-offer {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(7, 22, 31, .82);
}

.offers-list .offer-category {
  display: block;
  margin-bottom: 3px;
  color: #ffb25e;
  font-size: .62rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.offers-list .offer-txt > strong,
.offers-list .offer-txt > small,
.offers-list .offer-category {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.offers-list .offer-txt > strong {
  color: #fff;
  font-size: .9rem;
  line-height: 1.22;
}

.offers-list .offer-txt > small {
  color: rgba(238, 246, 249, .66);
  font-size: .7rem;
  line-height: 1.38;
}

.offers-list .offer-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.offers-list .offer-price {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 850;
  white-space: nowrap;
}

.offers-list .offer-buy {
  margin-top: 6px;
  padding: 8px 14px;
  font-size: .74rem;
  white-space: nowrap;
}

/* Diretório de parceiros: textos sempre ficam dentro do cartão. */
.agencias-directory { overflow-x: clip; }
.agencia-directory-card { overflow: hidden; }
.agencia-directory-copy { width: 100%; }
.agencia-directory-copy b,
.agencia-directory-copy small,
.agencia-directory-copy em {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Modais e formulários nunca ultrapassam a janela. */
.modal-wrap { max-width: 100vw; }
.modal,
.modal.modal-wide {
  width: min(760px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}
.modal-hd,
.modal-bd { min-width: 0; }
.modal-bd input,
.modal-bd select,
.modal-bd textarea { width: 100%; }

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
  .panel {
    width: clamp(430px, 31vw, 520px);
    max-width: calc(100vw - 52px);
  }

  .panel-head { padding-inline: clamp(24px, 2vw, 30px); }
  .tour-list { padding-inline: clamp(20px, 1.8vw, 26px); }

  #viewDetail .ag-card,
  #viewDetail .offers-list,
  #viewDetail .ag-contact-box {
    margin-inline: 22px;
  }

  #viewDetail .ag-card .offer,
  #viewDetail .offers-list .offer {
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }
}

@media (min-width: 1025px) and (max-width: 1320px) {
  .topbar { gap: 8px; padding-inline: 14px; }
  .brand img { width: 94px; }
  .topnav { gap: 3px; }
  .topnav .nav-pill { gap: 5px; padding: 8px 9px; font-size: .68rem; }
  #btnLive,
  #btnWallet,
  #waTop { width: 42px; padding-inline: 0; justify-content: center; }
  #btnLive .pill-txt,
  #btnWallet .pill-txt,
  #waTop .pill-txt { display: none; }
}

/* ---------- Tablet e mobile ---------- */
@media (max-width: 1024px) {
  .topbar {
    min-height: 82px;
    padding: max(12px, env(safe-area-inset-top, 0px)) clamp(8px, 2vw, 16px) 17px;
    gap: clamp(5px, 1.4vw, 10px);
  }

  /* A largura do .brand é o que define o tamanho do logo (a imagem usa 100%).
     O header tem folga vertical de sobra, então aproveitamos o espaço livre
     até o menu em vez de deixar a marca miúda. */
  .brand {
    flex: 0 1 clamp(112px, 31vw, 158px);
    width: clamp(112px, 31vw, 158px);
    margin-right: auto;
    padding: 0;
  }

  .brand img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: 54px;
    object-position: left center;
  }

  .topnav {
    flex: 0 0 auto;
    align-items: flex-start !important;
    justify-content: flex-end;
    gap: clamp(4px, 1.5vw, 9px) !important;
    padding-bottom: 15px;
  }

  #waMobile,
  #btnLive,
  #btnTour {
    width: clamp(34px, 8.6vw, 40px) !important;
    height: clamp(34px, 8.6vw, 40px) !important;
  }

  #btnMobileMenu {
    width: clamp(40px, 10.4vw, 47px) !important;
    height: clamp(40px, 10.4vw, 47px) !important;
  }

  .panel {
    top: auto;
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    left: 20px;
    width: min(560px, calc(100vw - 40px));
    height: min(74dvh, 780px);
    max-height: calc(100dvh - 98px);
  }

  .panel.is-expanded {
    height: calc(100dvh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
  }

  .panel-view,
  #detailBody { width: 100%; max-width: 100%; }

  .panel-head { padding: 24px 22px 10px; }
  .panel-head h1 { font-size: clamp(1.72rem, 5.3vw, 2.15rem); }
  .tour-list { padding: 18px 20px 74px; }

  .ag-card,
  .ag-contact-box,
  .offers-list {
    margin-inline: 16px;
  }

  .ag-title,
  .ag-sub { padding-inline: 18px; }

  .offers-list .agencia-offer,
  #viewDetail .ag-card .offer,
  #detailBody .offers-list > .agencia-offer {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .offers-list .offer-side,
  #viewDetail .ag-card .offer-side,
  #detailBody .offers-list > .agencia-offer .offer-side {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: right !important;
  }

  .agencia-directory-card {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }
  .agencia-directory-arrow { display: none; }
  .agencia-directory-copy em {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* ---------- Celulares ---------- */
@media (max-width: 600px) {
  .panel {
    right: 8px;
    bottom: max(7px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    width: auto;
    height: min(70dvh, 720px);
    max-height: calc(100dvh - 92px);
    border-radius: 20px 20px 0 0;
    border-top: 2px solid var(--sol) !important;
  }

  .panel.is-expanded {
    height: calc(100dvh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
  }

  .panel-head { padding: 20px 16px 8px; }
  .panel-head h1 { margin-top: 10px; }
  .eyebrow { letter-spacing: .22em; }
  .tour-list { gap: 11px; padding: 15px 14px 68px; }
  .tour-card { width: 100%; height: clamp(116px, 31vw, 132px); }
  .tour-card-body { padding-left: 16px; }
  .tour-card h3 { font-size: clamp(1.12rem, 5.1vw, 1.35rem); }

  .detail-hero { height: clamp(178px, 48vw, 220px); }
  .detail-hero-txt { right: 16px; left: 16px; }
  .detail-hero-txt h2 { font-size: clamp(1.45rem, 7vw, 2rem); }
  .detail-info { padding-inline: 18px; font-size: .8rem; }
  .gallery { padding-inline: 34px; }

  .ag-card,
  .ag-contact-box,
  .offers-list {
    margin-inline: 12px;
  }

  .ag-card { padding: 14px; }
  .ag-bio { font-size: .74rem; }
  .ag-contact-box { align-items: stretch; padding: 11px 12px; }
  .ag-contact-box > span { font-size: .7rem; }

  .ag-title,
  .ag-sub { padding-inline: 14px; }

  .modal-wrap { padding: 6px; }
  .modal,
  .modal.modal-wide {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px;
  }
  .modal-hd { padding: 58px 18px 14px; }
  .modal-bd { padding: 16px 18px 22px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > * { flex: 1 1 150px; }

  .agencias-directory { padding: 74px 10px 14px; }
  .agencias-directory-head { padding-inline: 6px; }
  .agencias-directory-card { padding: 10px; }
}

/* ---------- Celulares estreitos ---------- */
@media (max-width: 390px) {
  .topbar { padding-inline: 6px; gap: 3px; }
  .brand { flex-basis: 118px; width: 118px; }
  .topnav { gap: 3px !important; }
  #waMobile,
  #btnLive,
  #btnTour { width: 36px !important; height: 36px !important; min-width: 44px !important; min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
  #btnMobileMenu { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
  #waMobile::after,
  #btnLive::after,
  #btnTour::after,
  #btnMobileMenu::after { font-size: .38rem !important; }

  .panel { right: 5px; left: 5px; width: auto; }
  .panel-head { padding-inline: 13px; }
  .tab-row { gap: 1px !important; padding: 4px !important; }
  .tab { gap: 3px !important; padding-inline: 1px !important; font-size: .58rem !important; }
  .tab svg { width: 15px !important; height: 15px !important; }

  .tour-list { padding-inline: 11px; }
  .tour-card-body { padding-right: 82px; }
  .tour-card-price { right: 11px; }

  .ag-card,
  .ag-contact-box,
  .offers-list { margin-inline: 9px; }
  .ag-contact-box { flex-direction: column; }
  .ag-contact-button { width: 100%; }

  .offers-list .agencia-offer,
  #viewDetail .ag-card .offer,
  #detailBody .offers-list > .agencia-offer {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  .offers-list .offer-cover,
  #viewDetail .ag-card .offer-cover,
  #detailBody .offers-list > .agencia-offer .offer-cover {
    width: 60px !important;
    height: 60px !important;
    flex-basis: 60px !important;
  }
  .offers-list .offer-txt > strong { font-size: .8rem; }
  .offers-list .offer-txt > small { font-size: .64rem; }
  .offers-list .offer-buy { padding-inline: 12px; }

  .agencia-directory-card { grid-template-columns: 48px minmax(0, 1fr) !important; gap: 8px !important; }
  .agencia-directory-card > img { width: 48px !important; height: 48px !important; }
  .agencia-directory-copy b { font-size: .78rem; }
  .agencia-directory-copy small,
  .agencia-directory-copy em { font-size: .58rem; }
}

/* Alturas pequenas em modo paisagem. */
@media (max-height: 540px) and (orientation: landscape) {
  .topbar { min-height: 62px; padding-block: 7px 12px; }
  .panel {
    top: 68px;
    bottom: 7px;
    left: 8px;
    width: min(520px, calc(100vw - 16px));
    height: auto;
    max-height: none;
  }
  .panel.is-expanded { height: auto !important; max-height: none !important; }
  .modal,
  .modal.modal-wide { max-height: calc(100dvh - 10px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-view { scroll-behavior: auto; }
}

/* ---------- Componentes que antes herdavam larguras rígidas ---------- */
.ticket-checkin,
.boat-route-choice strong,
.transfer-card-price,
.lup-package-price strong {
  word-break: normal;
  overflow-wrap: normal;
}

.detail-chips,
.ticket-rows,
.transfer-market-grid,
.transfer-ride-includes > div,
.panel-footer-main,
.panel-footer-bottom {
  min-width: 0;
}

@media (max-width: 600px) {
  .ticket-checkin {
    white-space: normal;
  }

  .ticket-rows {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .boat-route-choice {
    min-width: 0;
  }

  .boat-route-choice strong {
    white-space: normal;
    text-align: right;
  }

  .detail-chips {
    padding-inline: 16px;
  }

  .detail-chips > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .lup-package-price {
    grid-template-columns: minmax(0, 1fr) minmax(116px, 38%);
  }

  /* A terceira coluna do transfer era a principal causa de compressão. */
  .transfer-market-card,
  .transfer-ride-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    align-items: center;
  }

  .transfer-market-card .transfer-card-image,
  .transfer-ride-card .transfer-card-image {
    width: 82px !important;
    height: 72px !important;
  }

  .transfer-market-card .transfer-card-price,
  .transfer-ride-card .transfer-card-price,
  .transfer-market-card .transfer-consult-price,
  .transfer-ride-card .transfer-consult-price {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 2px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
    white-space: normal;
  }

  .transfer-card-price > strong {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .transfer-market-hero-copy {
    right: 15px;
    max-width: none;
  }

  .transfer-market-hero-copy h3,
  .transfer-market-hero-copy p {
    max-width: min(72%, 330px);
  }
}

@media (max-width: 390px) {
  .ticket-rows,
  .transfer-ride-includes > div {
    grid-template-columns: 1fr;
  }

  .lup-package-price {
    grid-template-columns: 1fr;
  }

  .lup-package-price .btn-pay {
    width: 100%;
  }

  .transfer-market-card,
  .transfer-ride-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .transfer-market-card .transfer-card-image,
  .transfer-ride-card .transfer-card-image {
    width: 70px !important;
    height: 64px !important;
  }

  .transfer-card-copy strong {
    font-size: .77rem;
  }

  .transfer-card-copy em {
    font-size: .59rem;
  }

  .transfer-market-hero-copy h3,
  .transfer-market-hero-copy p {
    max-width: 76%;
  }

  .panel-footer-main,
  .panel-footer-bottom {
    gap: 8px;
  }

  .panel-footer-main img,
  .panel-footer-bottom img {
    max-width: 92px;
  }
}

@media (max-width: 340px) {
  .brand { flex-basis: 88px; width: 88px; }
  #waMobile,
  #btnLive,
  #btnTour { width: 30px !important; height: 30px !important; }
  #btnMobileMenu { width: 36px !important; height: 36px !important; }
  .panel { right: 3px; left: 3px; }
  .panel-head { padding-inline: 11px; }
  .tour-list { padding-inline: 8px; }
  .modal-bd { padding-inline: 14px; }
}

/* Touch & Safe-area optimizations for mobile */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  input, select, textarea {
    font-size: 16px !important;
  }
  .topbar {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }
  .modal-wrap {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* O botão 'X' não deve aparecer na versão Desktop, apenas no Mobile */
.panel-close-btn {
  display: none !important;
}

/* Regras Mobile para o botão 'X' */
@media (max-width: 768px) {
  .panel-close-btn {
    display: flex !important;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 150;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid #ff9a3c !important;
    border-radius: 50%;
    background: rgba(7, 19, 30, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ff9a3c !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .panel-close-btn svg {
    width: 15px;
    height: 15px;
    stroke: #ff9a3c !important;
    stroke-width: 2.8;
  }

  .panel-close-btn:hover,
  .panel-close-btn:active,
  .panel-close-btn:focus-visible {
    background: rgba(255, 154, 60, 0.2) !important;
    border-color: #ffb25e !important;
    color: #ffb25e !important;
    transform: scale(1.06);
    outline: none !important;
    box-shadow: 0 2px 10px rgba(255, 154, 60, 0.35);
  }

  .panel-close-btn:hover svg,
  .panel-close-btn:active svg,
  .panel-close-btn:focus-visible svg {
    stroke: #ffb25e !important;
  }
}

/* ===== Botão Lateral no Desktop para Ocultar/Exibir Painel ===== */
@media (min-width: 1025px) {
  .panel {
    --panel-left-offset: 26px;
    --panel-toggle-width: 38px;
    overflow: visible !important;
  }

  /* O controle fica externamente colado à borda direita do painel.
     Ao fechar, o painel translada para a esquerda deixando o botão visível na borda 0 da tela. */
  .panel.is-hidden {
    transform: translateX(calc(-100% - var(--panel-left-offset) + 1px)) !important;
    opacity: 1 !important;
    pointer-events: none;
  }

  .panel.is-hidden .panel-toggle {
    pointer-events: auto;
  }

  .panel-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    z-index: 99 !important;
    top: 50% !important;
    left: calc(100% + 20px) !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 54px !important;
    border: 1.5px solid #ff9a3c !important;
    border-radius: 14px !important;
    background: rgba(7, 19, 30, 0.94) !important;
    backdrop-filter: blur(26px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.3) !important;
    color: #ff9a3c !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 154, 60, 0.25) !important;
    transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease, left 0.3s ease !important;
  }

  .panel-toggle.is-closed {
    left: calc(100% + 20px) !important;
    right: auto !important;
    top: 50% !important;
    border: 1.5px solid #ff9a3c !important;
    border-radius: 14px !important;
  }

  .panel-toggle.is-closed svg {
    transform: rotate(180deg) !important;
  }

  .panel-toggle svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #ff9a3c !important;
    stroke-width: 2.8 !important;
    transition: transform 0.4s ease !important;
  }

  .panel-toggle:hover {
    background: rgba(16, 36, 54, 0.98) !important;
    box-shadow: 6px 0 24px rgba(255, 154, 60, 0.5) !important;
    color: #ffffff !important;
  }

  .panel-toggle:hover svg {
    stroke: #ffffff !important;
  }
}

@media (max-width: 1024px) {
  .panel-toggle {
    display: none !important;
  }
}


#parcAgSubmit:disabled,
#parcBarcoSubmit:disabled {
  cursor: not-allowed !important;
  opacity: .42 !important;
  filter: saturate(.55) !important;
  box-shadow: none !important;
}


/* A reserva de transfer ocupa o modal inteiro; não deixa o container-base
   criar uma faixa clara acima do formulário. */
#modalBox.transfer-booking-host {
  display: flex !important;
  width: min(860px, 100%) !important;
  max-width: min(860px, 100%) !important;
  height: min(92svh, 780px) !important;
  max-height: min(92svh, 780px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #071722 !important;
  border: 1px solid rgba(255,178,94,.34) !important;
}

#modalBox.transfer-booking-host > .transfer-booking-modal {
  width: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(165deg,#102a3c 0%,#081725 47%,#06111b 100%) !important;
}

#modalBox.transfer-booking-host > .transfer-booking-modal > .modal-hd {
  padding: 64px 28px 16px !important;
  background: linear-gradient(135deg,rgba(13,39,57,.98),rgba(8,23,36,.98)) !important;
}

#modalBox.transfer-booking-host > .transfer-booking-modal > .modal-bd {
  min-height: 0 !important;
  padding: 20px 22px 30px 28px !important;
  overflow-y: auto !important;
}

#modalBox.transfer-booking-host .modal-back {
  top: 16px !important;
  left: 18px !important;
  z-index: 20 !important;
}

@media (max-width: 520px) {
  #modalBox.transfer-booking-host {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  #modalBox.transfer-booking-host > .transfer-booking-modal > .modal-hd {
    padding: 62px 16px 14px !important;
  }

  #modalBox.transfer-booking-host > .transfer-booking-modal > .modal-bd {
    padding: 16px 16px 24px !important;
  }
}


/* ===== Dica "Arraste para ver o mapa" =====
   Reposta na vistoria de 03/08/2026: o JS que marca a dica como vista
   (marcarDicaDoMapaVista / classe dica-vista) já existia, mas o texto nunca
   chegou a ser publicado. Só no mobile, onde o painel realmente cobre o mapa. */
.panel-dica-mapa { display: none; }

@media (max-width: 900px) {
  .panel-dica-mapa {
    position: absolute;
    /* Dentro do painel: acima do puxador ela seria cortada pelo overflow.
       Fica na mesma linha do "Bem-Vindos", à direita, sem encostar no texto. */
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(20, 22, 32, 0.72);
    border: 1px solid rgba(255, 154, 60, 0.42);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 30;
    animation: dicaMapaPulso 2.6s ease-in-out infinite;
  }
  .panel-dica-mapa svg { color: #ff9f43; }

  /* Depois que a pessoa aprende o gesto, a dica não volta mais. */
  .panel-drag-handle.dica-vista .panel-dica-mapa { display: none; }

  /* Com o painel fechado o mapa já está à vista — a dica perde o sentido. */
  #panel.is-hidden .panel-dica-mapa,
  #panel.is-collapsed .panel-dica-mapa { display: none; }
}

@keyframes dicaMapaPulso {
  0%, 100% { opacity: 0.78; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-dica-mapa { animation: none; }
}

/* ===== Validação do CPF no checkout =====
   Reposto na vistoria de 03/08/2026: o JS (ligarCampoCpf) já marcava o campo e
   escrevia o aviso, mas .campo-aviso / .is-valido / .is-invalido não tinham
   estilo nenhum — o erro aparecia como texto solto, sem destaque. */
.campo-aviso {
  display: block;
  margin: -6px 0 10px;
  color: #ff8b7a;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}
.campo-aviso[hidden] { display: none; }

#rCpf.is-invalido {
  border-color: #ff6b52 !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 82, 0.18) !important;
}
#rCpf.is-valido {
  border-color: #3ddc84 !important;
  box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.16) !important;
}

/* Alinhamento: Valor na esquerda e botão Reservar na direita */
.lup-package-price {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 16px !important;
}
.lup-package-price > div:first-child {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  padding-right: 0 !important;
}
.lup-package-price > div:first-child small {
  display: block !important;
  text-align: left !important;
}
.lup-package-price > div:first-child strong {
  display: inline-flex !important;
  align-items: baseline !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.offer-price {
  text-align: left !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}
.offer-price small, .offer-price strong {
  text-align: left !important;
}

/* Botões de Reserva: fundo laranja, fonte destacada e dimensões mais compactas */
.btn-pay,
.sticky-btn,
.offer-buy {
  background: #df6e20 !important;
  color: #ffffff !important;
  border: 1.5px solid #df6e20 !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.02em !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 10px rgba(223, 110, 32, 0.32) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 100px !important;
  height: auto !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.btn-pay:hover,
.sticky-btn:hover,
.offer-buy:hover {
  background: #c25c1a !important;
  border-color: #c25c1a !important;
  color: #ffffff !important;
  box-shadow: 0 5px 15px rgba(194, 92, 26, 0.42) !important;
  transform: translateY(-1.5px) !important;
}

.btn-pay:active,
.sticky-btn:active,
.offer-buy:active {
  transform: translateY(0) !important;
}

/* Quando especificado estilo de fonte laranja sobre fundo de destaque */
.btn-pay-orange-font {
  background: rgba(255, 154, 60, 0.15) !important;
  color: #ff9a3c !important;
  border: 1.5px solid #ff9a3c !important;
  box-shadow: 0 4px 14px rgba(255, 154, 60, 0.2) !important;
}

@media (max-width: 600px) {
  .lup-package-price {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .btn-pay {
    width: auto !important;
    padding: 13px 26px !important;
    font-size: 0.88rem !important;
    min-width: 124px !important;
  }
}

/* Estilo dedicado para o botão do WhatsApp da modal de checkout */
.btn-wa-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
}

.btn-wa-line svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

/* Posiciona o valor (POR PESSOA / R$ 100) empilhado diretamente acima do botão de reserva nos cards de oferta */
.offer-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  text-align: right !important;
}

.offer-side .offer-price {
  text-align: right !important;
  margin: 0 !important;
}

.offer-side .offer-price small,
.offer-side .offer-price strong {
  text-align: right !important;
}

.offer-side .offer-buy {
  margin-top: 0 !important;
}

/* Remoção definitiva da linha laranja inferior abaixo do rodapé */
.panel,
.panel-foot {
  border-bottom: 0 !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  border-bottom-style: none !important;
}