/* ============================================================
   Movita — design system único (landing + app)
   Paleta: azul #00A8E8 · navy #0B2A3A · lima #C8F23A
           cinza #5E7B8A · cinza claro #E1E9EE
   Mobile-first. Breakpoint principal: 768px.
   ============================================================ */

:root {
  --azul: #00A8E8;
  --azul-hover: #0093cc;
  --azul-texto: #006E99;      /* azul escuro o bastante para texto em fundo claro (AA) */
  --navy: #0B2A3A;
  --navy-claro: #0d4463;      /* tom médio do gradiente navy→azul dos sheets escuros */
  --azul-profundo: #0079ad;   /* ponta azul do gradiente navy→azul dos sheets escuros */
  --lima: #C8F23A;
  --lima-hover: #b5e21f;
  --branco: #FFFFFF;
  --cinza: #5E7B8A;
  --cinza-claro: #E1E9EE;
  --fundo: #F4F8FA;
  --vermelho: #C5221F;
  --verde: #1E7E34;
  --raio: 14px;
  --raio-g: 20px;
  --raio-sheet: 26px;         /* cantos dos sheets (painel do ponto e popup do QR) */
  --sombra: 0 4px 18px rgba(11, 42, 58, 0.10);
  --sombra-alta: 0 10px 34px rgba(11, 42, 58, 0.18);
  --sombra-sheet: 0 -12px 44px rgba(11, 42, 58, 0.35); /* sombra pra cima dos sheets */
  --altura-nav-mobile: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--fundo);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
p  { margin: 0 0 12px; }

a { color: var(--azul-texto); }

img, svg { vertical-align: middle; }

.oculto { display: none !important; }

/* Foco visível em tudo que é interativo (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* ---------- Botões (mínimo 52px de altura, dedo com sol na cara) ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--raio);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:active { transform: scale(0.98); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }

.botao-primario { background: var(--azul); color: var(--navy); }
.botao-primario:hover { background: var(--azul-hover); }

.botao-navy { background: var(--navy); color: var(--branco); }
.botao-navy:hover { background: #143c52; }

.botao-lima { background: var(--lima); color: var(--navy); }
.botao-lima:hover { background: var(--lima-hover); }

.botao-contorno {
  background: var(--branco);
  color: var(--navy);
  border: 2px solid var(--cinza-claro);
}
.botao-contorno:hover { border-color: var(--cinza); }

.botao-perigo { background: var(--vermelho); color: var(--branco); }
.botao-perigo:hover { background: #a51b18; }

.botao-largo { width: 100%; }

.botao-texto {
  background: none;
  border: 0;
  color: var(--azul-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 8px;
  text-decoration: underline;
}
/* Botão-texto desabilitado (ex.: aguardando uma ação terminar) */
.botao-texto:disabled {
  color: var(--cinza);
  text-decoration: none;
  cursor: default;
}

/* ---------- Formulários ---------- */

.campo { margin-bottom: 16px; text-align: left; }
.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.campo input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  color: var(--navy);
  background: var(--branco);
  border: 2px solid var(--cinza-claro);
  border-radius: 12px;
}
.campo input:focus {
  outline: none;
  border-color: var(--azul);
}
.campo .dica { font-size: 0.85rem; color: var(--cinza); margin: 6px 0 0; }

.msg-erro {
  background: #FCE8E6;
  color: var(--vermelho);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.95rem;
  margin: 12px 0;
}
.msg-ok {
  background: #E6F4EA;
  color: var(--verde);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.95rem;
  margin: 12px 0;
}
.msg-aviso {
  background: #E5F7FE;
  color: var(--navy);
  border-left: 4px solid var(--azul);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin: 12px 0;
}

/* ============================================================
   LANDING (index.html)
   ============================================================ */

.landing { background: var(--branco); }

.miolo { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-claro);
}
.site-topo .miolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 12px;
}
.logo-movita {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 1.35rem;
}
.logo-movita svg { width: 44px; height: 28px; color: var(--azul); }
.acoes-topo { display: flex; gap: 10px; }
.acoes-topo .botao { min-height: 46px; padding: 8px 18px; }
.acoes-topo .so-desktop { display: none; }

/* Hero */
.hero { padding: 40px 0 48px; }
.hero .miolo {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}
.hero-texto { text-align: center; max-width: 560px; }
.hero-texto h1 { font-size: 2.1rem; font-weight: 800; }
.hero-texto .destaque { color: var(--azul-texto); }
.hero-texto p { font-size: 1.1rem; color: var(--cinza); margin-bottom: 24px; }
/* Menção discreta de preço no hero (única na landing) */
.hero-texto .hero-preco { font-size: 0.95rem; margin: -12px 0 24px; }
.hero-texto .hero-preco strong { color: var(--azul-texto); font-weight: 700; }
.hero-botoes { display: flex; flex-direction: column; gap: 12px; }
.hero-figura { width: min(420px, 88vw); }
.hero-figura img { width: 100%; height: auto; }

/* Faixa "continue seu cadastro" */
.banner-continuar {
  background: var(--navy);
  color: var(--branco);
  padding: 14px 0;
}
.banner-continuar .miolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.banner-continuar .botao { min-height: 44px; }

/* Seções da landing */
.secao { padding: 48px 0; }
.secao-alt { background: var(--fundo); }
.secao h2 { text-align: center; font-size: 1.6rem; margin-bottom: 8px; }
.secao .subtitulo {
  text-align: center;
  color: var(--cinza);
  max-width: 540px;
  margin: 0 auto 32px;
}

/* Como funciona: 3 passos */
.passos-grade { display: grid; gap: 16px; }
.passo-cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio-g);
  padding: 24px;
}
.passo-cartao .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.passo-cartao svg.icone { width: 40px; height: 40px; color: var(--azul-texto); float: right; }
.passo-cartao h3 { margin-bottom: 6px; }
.passo-cartao p { color: var(--cinza); margin: 0; }

/* Pontos */
.pontos-grade { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
.ponto-cartao {
  display: flex;
  gap: 14px;
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio-g);
  padding: 20px;
  align-items: flex-start;
}
.ponto-cartao .alfinete {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ponto-cartao .alfinete svg { width: 26px; height: 17px; color: var(--navy); }
.ponto-cartao h3 { margin-bottom: 2px; }
.ponto-cartao p { color: var(--cinza); margin: 0; font-size: 0.95rem; }

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; }
.faq details {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio);
  margin-bottom: 10px;
  padding: 0 18px;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 54px;
  display: flex;
  align-items: center;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; color: var(--azul-texto); }
.faq details[open] summary::after { content: '–'; }
.faq details p { color: var(--cinza); padding-bottom: 16px; margin: 0; }

/* Rodapé */
.site-rodape {
  background: var(--navy);
  color: var(--cinza-claro);
  padding: 36px 0;
  font-size: 0.95rem;
}
.site-rodape .miolo { display: grid; gap: 18px; }
.site-rodape .logo-movita { color: var(--branco); }
.site-rodape a { color: var(--branco); }
.site-rodape .creditos { color: var(--cinza); font-size: 0.85rem; }

/* ---------- Overlay de auth/cadastro ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 42, 58, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.overlay-caixa {
  position: relative;
  background: var(--branco);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  padding: 28px 22px 32px;
  box-shadow: var(--sombra-alta);
}
.overlay-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--fundo);
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

/* Barra de progresso do cadastro (4 passos) */
.progresso {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  gap: 4px;
}
.progresso li {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cinza);
}
.progresso li .bolinha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: var(--cinza-claro);
  color: var(--cinza);
  font-weight: 700;
}
.progresso li.ativo .bolinha { background: var(--azul); color: var(--navy); }
.progresso li.ativo { color: var(--navy); }
.progresso li.feito .bolinha { background: var(--lima); color: var(--navy); }
.progresso li.feito { color: var(--navy); }

.tela-cadastro h2 { font-size: 1.35rem; margin-bottom: 4px; }
.tela-cadastro .porque { color: var(--cinza); margin-bottom: 20px; }

.caixa-verificacao {
  text-align: center;
  background: var(--fundo);
  border-radius: var(--raio-g);
  padding: 24px 18px;
  margin: 16px 0;
}
.caixa-verificacao .pulso {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulsar 1.6s ease-in-out infinite;
}
.caixa-verificacao .pulso svg { width: 34px; height: 22px; color: var(--navy); }
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 232, 0.45); }
  50% { box-shadow: 0 0 0 16px rgba(0, 168, 232, 0); }
}

.tudo-certo { text-align: center; padding: 8px 0; }
.tudo-certo .selo-ok {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--lima);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tudo-certo .selo-ok svg { width: 36px; height: 36px; color: var(--navy); }

/* ---------- Modal da verificação facial (iframe do Didit) ---------- */
/* Mobile-first: tela cheia, o iframe ocupa toda a altura útil.
   A animação de entrada é desligada pelo bloco prefers-reduced-motion global. */

.modal-verificacao {
  position: fixed;
  inset: 0;
  z-index: 300; /* acima do overlay de cadastro (200) */
  background: var(--navy);
  display: flex;
  justify-content: center;
}
.modal-verificacao-caixa {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--navy);
  animation: subir-modal 0.25s ease;
}
@keyframes subir-modal {
  from { transform: translateY(24px); opacity: 0; }
}
.modal-verificacao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px 18px;
  color: var(--branco);
}
.modal-verificacao-topo .titulo { font-weight: 600; }
.modal-verificacao-fechar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--branco);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.modal-verificacao-aba {
  text-align: center;
  color: var(--cinza-claro);
  font-size: 0.85rem;
  padding: 4px 16px 10px;
}
.modal-verificacao iframe {
  flex: 1; /* toda a altura que sobra (a 390px o iframe domina a tela) */
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  background: var(--branco);
}

/* ============================================================
   APP (app.html)
   ============================================================ */

.pagina-app {
  background: var(--fundo);
  min-height: 100vh;
  /* espaço para a navegação fixa de baixo no mobile */
  padding-bottom: calc(var(--altura-nav-mobile) + env(safe-area-inset-bottom, 0px));
}

.app-topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-claro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 16px;
}
.app-topo .logo-movita { font-size: 1.15rem; }
.app-topo .logo-movita svg { width: 36px; height: 23px; }

/* Navegação desktop (escondida no mobile) */
.nav-desktop { display: none; gap: 6px; }
.nav-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--cinza);
  font-weight: 600;
}
.nav-desktop a svg { width: 20px; height: 20px; }
.nav-desktop a.ativo { background: var(--navy); color: var(--branco); }
.nav-desktop a:hover:not(.ativo) { background: var(--fundo); color: var(--navy); }

/* Navegação inferior fixa (mobile) */
.nav-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  background: var(--branco);
  border-top: 1px solid var(--cinza-claro);
  height: calc(var(--altura-nav-mobile) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-mobile a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--cinza);
  font-size: 0.72rem;
  font-weight: 600;
}
.nav-mobile a svg { width: 24px; height: 24px; }
.nav-mobile a.ativo { color: var(--azul-texto); }

/* Barra persistente de passeio ativo */
.barra-passeio {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--altura-nav-mobile) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy);
  color: var(--branco);
  border: 0;
  border-radius: var(--raio);
  padding: 12px 16px;
  box-shadow: var(--sombra-alta);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: calc(100% - 24px);
}
.barra-passeio .ponto-verde {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lima);
  animation: pulsar-leve 1.6s ease-in-out infinite;
}
@keyframes pulsar-leve {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.barra-passeio .info { flex: 1; }
.barra-passeio .info strong { display: block; font-size: 0.95rem; }
.barra-passeio .info span { font-size: 0.82rem; color: var(--cinza-claro); }
.barra-passeio .seta { font-weight: 700; color: var(--lima); }

/* ---------- Tela do mapa ---------- */

/* No mobile o mapa ocupa a tela inteira (menos a tab bar): o topo branco some
   e vira pills flutuantes — nada de faixa cobrindo os controles do mapa. */
.tela-mapa {
  position: relative;
  height: calc(100vh - var(--altura-nav-mobile) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - var(--altura-nav-mobile) - env(safe-area-inset-bottom, 0px));
}
#mapa { width: 100%; height: 100%; }

@media (max-width: 767px) {
  .pagina-app.mapa-ativa .app-topo { display: none; }
}

/* Pills flutuantes sobre o mapa: logo à esquerda, status à direita */
.mapa-pills {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none; /* o mapa continua arrastável no vão entre as pills */
}
.pill-mapa {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 16px rgba(11, 42, 58, 0.16);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.pill-logo { font-weight: 700; font-size: 1.05rem; }
.pill-logo svg { width: 34px; height: 21px; color: var(--azul); }
.pill-status { font-weight: 600; font-size: 0.85rem; }
.pill-status .bolinha-livre {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 3px rgba(200, 242, 58, 0.4);
}

/* Marcador de ponto parceiro no mapa (elemento HTML do MapLibre).
   É um <button>: área de toque generosa (56×64px) e acessível. */
.marcador-movita {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 56px;
  height: 64px;
  display: block;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.marcador-movita .pino {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  background: var(--azul);
  border: 3px solid var(--branco);
  border-radius: 50%;
  /* sombra com o tom do azul: o pino salta aos olhos sobre o fundo claro */
  box-shadow: 0 6px 16px rgba(0, 168, 232, 0.45), 0 2px 6px rgba(11, 42, 58, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}
.marcador-movita:hover .pino,
.marcador-movita:focus-visible .pino { transform: scale(1.07); }
.marcador-movita:active .pino { transform: scale(0.94); }
.marcador-movita .pino svg { width: 30px; height: 19px; color: var(--branco); }
.marcador-movita .contagem {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lima);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--branco);
}
.marcador-movita .ponta {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--azul);
}

/* Controles do MapLibre no estilo Movita (localizar + zoom, canto inferior-direito,
   acima da tab bar — o container do mapa já desconta nav e safe-area) */
.maplibregl-ctrl-bottom-right { right: 8px; bottom: 10px; }
.maplibregl-ctrl-bottom-left { left: 4px; bottom: 4px; }
/* Com a barra de passeio ativa visível, os controles sobem pra não ficarem embaixo */
.com-barra .maplibregl-ctrl-bottom-right { bottom: 86px; }
.maplibregl-ctrl-group {
  border-radius: 12px !important;
  box-shadow: var(--sombra) !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button {
  width: 44px !important;
  height: 44px !important;
}
.maplibregl-ctrl-attrib { font-size: 0.72rem; }

/* Balão da dica pós-cadastro (aponta pro primeiro ponto do mapa) */
.maplibregl-popup.dica-ponto { z-index: 85; }
.dica-ponto .maplibregl-popup-content {
  background: var(--navy);
  color: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 16px;
  font-family: inherit;
}
.dica-ponto .maplibregl-popup-content p {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
}
.dica-ponto .maplibregl-popup-content .botao { min-height: 44px; }
.dica-ponto.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--navy); }
.dica-ponto.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--navy); }

/* Toast: aviso passageiro no rodapé (ex.: localização negada) */
.toast-movita {
  position: fixed;
  left: 50%;
  bottom: calc(var(--altura-nav-mobile) + env(safe-area-inset-bottom, 0px) + 18px);
  transform: translate(-50%, 8px);
  z-index: 300;
  max-width: min(92vw, 420px);
  background: var(--navy);
  color: var(--branco);
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast-movita.visivel { opacity: 1; transform: translate(-50%, 0); }

/* Banner discreto no topo: sem conexão, as cargas essenciais re-tentando */
.banner-conexao {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  width: max-content; /* left:50% encolhe a caixa; sem isso o texto quebra à toa */
  max-width: min(92vw, 420px);
  background: rgba(11, 42, 58, 0.92);
  color: var(--branco);
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

/* Fundo escurecido leve atrás do sheet (tocar fora fecha o painel) */
.painel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 94; /* abaixo do sheet (95) e da nav mobile (100) */
  background: rgba(11, 42, 58, 0.32);
  animation: surgir-backdrop 0.3s ease;
}
@keyframes surgir-backdrop {
  from { opacity: 0; }
}

/* Painel do ponto (bottom sheet premium no mobile) */
.painel-ponto {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--altura-nav-mobile) + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  background: var(--branco);
  border-radius: var(--raio-sheet) var(--raio-sheet) 0 0;
  box-shadow: var(--sombra-sheet);
  padding: 4px 20px 26px;
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.22s ease; /* volta com suavidade após o arrasto */
  /* slide-up com spring sutil (a curva passa de leve do ponto final) */
  animation: subir-sheet 0.45s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.painel-ponto.arrastando { transition: none; animation: none; }
@keyframes subir-sheet {
  from { transform: translateY(100%); }
}

/* Alça de arrastar: área de toque generosa, barrinha desenhada no meio */
.painel-ponto .pegador {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin-bottom: 4px;
  touch-action: none; /* o arrasto da alça não rola a lista */
  cursor: grab;
}
.painel-ponto .pegador::before {
  content: '';
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--cinza-claro);
}

.painel-ponto .cabecalho-ponto {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.painel-ponto .textos-ponto { min-width: 0; }
.painel-ponto h2 { margin-bottom: 2px; font-size: 1.35rem; }
.painel-ponto .endereco { color: var(--cinza); font-size: 0.92rem; margin-bottom: 4px; }
.painel-ponto .descricao { color: var(--cinza); font-size: 0.92rem; margin-bottom: 0; }
.painel-ponto .fechar-painel {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--fundo);
  color: var(--navy);
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
}

/* X dos fechamentos em SVG (regra do projeto: ícone nunca é emoji/caractere) */
.painel-ponto .fechar-painel svg,
.modal-foto-fechar svg,
.onboarding-fechar svg { width: 18px; height: 18px; }

/* Badge lima: "N motos livres" */
.selo-motos {
  display: inline-block;
  background: var(--lima);
  color: var(--navy);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.selo-motos.vazio { background: var(--cinza-claro); color: var(--cinza); }

/* Cards horizontais das motos: ilustração, código grande, botão azul */
.lista-motos { list-style: none; padding: 0; margin: 18px 0 0; }
.lista-motos li {
  display: flex;
  flex-wrap: wrap; /* em telas bem estreitas o botão desce pra linha de baixo */
  align-items: center;
  gap: 14px;
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(11, 42, 58, 0.06);
}
.lista-motos .icone-moto {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E5F7FE, #F4F8FA);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lista-motos .icone-moto img { width: 46px; height: 32px; }
.lista-motos .codigo { flex: 1; min-width: 88px; }
.lista-motos .codigo strong { display: block; font-size: 1.2rem; font-weight: 700; }
.lista-motos .codigo span { display: block; font-size: 0.82rem; color: var(--cinza); }
.lista-motos .codigo .preco-moto {
  color: var(--azul-texto);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 2px;
}
.lista-motos .botao-destravar {
  min-height: 52px;
  padding: 10px 22px;
  border-radius: 999px;
}
.botao-destravar:active { transform: scale(0.94); background: var(--azul-hover); }

/* Moto que veio do QR code: borda azul + badge "sua moto do QR" */
.lista-motos li.destaque-qr {
  border: 2px solid var(--azul);
  box-shadow: 0 4px 16px rgba(0, 168, 232, 0.22);
}
.lista-motos .codigo .badge-qr {
  display: inline-block;
  width: fit-content;
  background: var(--azul);
  color: var(--navy);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.sem-motos { color: var(--cinza); text-align: center; padding: 16px 0; }

/* Badge discreto no cabeçalho do sheet: ponto aberto a partir do QR */
.badge-qr-ponto {
  display: inline-block;
  background: var(--fundo);
  color: var(--azul-texto);
  border: 1px solid var(--azul);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* Pergunta em destaque no topo do sheet: "Você escaneou a Movita 1 — bora destravar?" */
.pergunta-scan {
  background: var(--navy);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 16px;
  margin-top: 12px;
}
.pergunta-scan p { font-weight: 600; margin: 0 0 12px; }
.pergunta-scan .botoes { display: flex; gap: 10px; }
.pergunta-scan .botoes .botao { flex: 1; min-height: 48px; padding-left: 10px; padding-right: 10px; }

/* Aviso didático dentro do painel (falta login/verificação/saldo) */
.aviso-destravar {
  background: var(--fundo);
  border: 2px solid var(--azul);
  border-radius: var(--raio);
  padding: 16px;
  margin-top: 14px;
}
.aviso-destravar p { font-weight: 600; margin-bottom: 12px; }

/* Nota de cobrança no rodapé do sheet: como o saldo é descontado */
.nota-cobranca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--fundo);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0 0;
  color: var(--cinza);
  font-size: 0.85rem;
  line-height: 1.55;
}
.nota-cobranca svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--azul-texto);
}
.nota-cobranca strong { color: var(--navy); }
.nota-devolucao { margin-top: 8px; }

/* ---------- Telas com conteúdo em coluna (carteira, perfil, passeio) ---------- */

.tela-coluna { max-width: 560px; margin: 0 auto; padding: 24px 20px 40px; }
.tela-coluna h1 { font-size: 1.5rem; margin-bottom: 18px; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: var(--raio-g);
  padding: 20px;
  margin-bottom: 18px;
}

/* Carteira */
.cartao-saldo {
  background: var(--navy);
  color: var(--branco);
  border-radius: var(--raio-g);
  padding: 24px 20px;
  margin-bottom: 22px;
}
.cartao-saldo .rotulo { color: var(--cinza-claro); font-size: 0.9rem; }
.cartao-saldo .valor { font-size: 2.6rem; font-weight: 800; line-height: 1.2; }
/* Linha discreta durante o passeio: parte do saldo já está em uso */
.cartao-saldo .saldo-em-uso {
  margin: 6px 0 0;
  color: var(--cinza-claro);
  font-size: 0.85rem;
  line-height: 1.4;
}

.valores-rapidos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-valor {
  flex: 1;
  min-width: 104px;
  min-height: 52px;
  padding: 8px 10px;
  border: 2px solid var(--cinza-claro);
  border-radius: var(--raio);
  background: var(--branco);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
}
.chip-valor.escolhido { border-color: var(--azul); background: #E5F7FE; }

.abas { display: flex; gap: 8px; margin: 18px 0 14px; }
.aba {
  flex: 1;
  min-height: 48px;
  border: 2px solid var(--cinza-claro);
  border-radius: var(--raio);
  background: var(--branco);
  font: inherit;
  font-weight: 600;
  color: var(--cinza);
  cursor: pointer;
}
.aba.ativa { border-color: var(--navy); background: var(--navy); color: var(--branco); }

/* Pagamento expresso (botão oficial Apple Pay / Google Pay da Stripe) */
.area-expresso { margin: 4px 0; }
.divisor-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cinza);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 14px;
}
.divisor-ou::before,
.divisor-ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cinza-claro);
}
.nota-expresso { color: var(--cinza); font-size: 0.85rem; margin: 2px 0 8px; }

/* Contador regressivo do Pix (30 minutos) */
.pix-timer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--cinza);
  font-weight: 600;
}
.pix-timer strong {
  font-size: 1.8rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pix-timer.acabando strong { color: var(--vermelho); }
.pix-expirado { text-align: center; padding: 10px 0 4px; }
.pix-expirado p { font-weight: 600; color: var(--vermelho); }

.area-pix { text-align: center; }
.area-pix .qr {
  width: 240px;
  height: 240px;
  border-radius: var(--raio);
  border: 2px solid var(--cinza-claro);
  margin: 12px auto;
  display: block;
}
.aguardando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--cinza);
  font-weight: 600;
  margin-top: 10px;
}
.aguardando .bolinha-pulso {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--azul);
  animation: pulsar-leve 1.2s ease-in-out infinite;
}

#elemento-pagamento { margin: 14px 0; }

/* Perfil */
.linha-perfil {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cinza-claro);
}
.linha-perfil:last-child { border-bottom: 0; }
.linha-perfil .rotulo { color: var(--cinza); font-size: 0.9rem; }
.linha-perfil .valor { font-weight: 600; text-align: right; }

.selo-status {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.85rem;
  font-weight: 700;
}
.selo-status.aprovado { background: #E6F4EA; color: var(--verde); }
.selo-status.pendente { background: #FEF7E0; color: #7a5d00; }
.selo-status.reprovado { background: #FCE8E6; color: var(--vermelho); }

/* Histórico de transações da carteira */
.lista-transacoes { list-style: none; margin: 0; padding: 0; }
.lista-transacoes li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cinza-claro);
}
.lista-transacoes li:last-child { border-bottom: 0; }
.lista-transacoes .info { display: flex; flex-direction: column; }
.lista-transacoes .data { color: var(--cinza); font-size: 0.85rem; }
.lista-transacoes .valor { font-weight: 700; white-space: nowrap; }
.lista-transacoes .valor.credito { color: var(--verde); }
.lista-transacoes .valor.debito { color: var(--navy); }
.lista-transacoes .vazio { color: var(--cinza); border-bottom: 0; }

/* Passeio */
.cartao-passeio { text-align: center; }
.cartao-passeio .tempo { font-size: 3rem; font-weight: 800; line-height: 1.15; }
.cartao-passeio .custo { font-size: 1.3rem; font-weight: 700; color: var(--azul-texto); }
.cartao-passeio .rotulo { color: var(--cinza); font-size: 0.9rem; }
.cartao-passeio .tarifa-minuto { color: var(--azul-texto); }

/* Moto pausada: o cartão inteiro muda de cara (navy + lima) pra ninguém ter dúvida */
.cartao-passeio.pausada {
  background: var(--navy);
  border: 2px solid var(--navy-claro);
  color: var(--branco);
}
.cartao-passeio.pausada .rotulo { color: var(--cinza-claro); }
.cartao-passeio.pausada .custo,
.cartao-passeio.pausada .tarifa-minuto { color: var(--lima); }
.cartao-passeio.pausada .saldo-disponivel { background: var(--navy-claro); }

/* Aviso da pausa (navy com detalhe lima): cobrando 1/3, moto travada até retomar */
.aviso-pausada {
  background: var(--navy);
  border-left: 4px solid var(--lima);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 12px 0;
}

/* Pausar/Retomar e Encerrar lado a lado */
.botoes-passeio { display: flex; gap: 10px; }
.botoes-passeio .botao { flex: 1; padding-left: 10px; padding-right: 10px; }

/* Barra persistente com a moto pausada: a bolinha fica branca e parada */
.barra-passeio.pausada .ponto-verde { background: var(--branco); animation: none; }

/* Barra persistente em violação: bolinha vermelha e borda de alerta */
.barra-passeio.violacao { border: 2px solid var(--vermelho); }
.barra-passeio.violacao .ponto-verde { background: var(--vermelho); }
.barra-passeio.violacao .seta { color: var(--branco); }

/* ---------- Cartão de violação (fora da área / sem saldo) ---------- */
/* Três estados inconfundíveis: bloqueada (vermelho, pede a janela),
   janela (navy, contagem regressiva grande em lima) e suporte (vermelho, sem saída). */

.cartao-violacao {
  border-radius: var(--raio-g);
  padding: 18px;
  margin-bottom: 14px;
}
.cartao-violacao .cabeca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cartao-violacao .cabeca svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.cartao-violacao .cabeca p {
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}
.cartao-violacao.bloqueada,
.cartao-violacao.suporte {
  background: #FCE8E6;
  border: 2px solid var(--vermelho);
  color: var(--vermelho);
}
.cartao-violacao.janela {
  background: var(--navy);
  border: 2px solid var(--navy-claro);
  color: var(--branco);
}
.cartao-violacao.janela .contagem strong { color: var(--lima); }
.cartao-violacao .contagem {
  text-align: center;
  margin: 10px 0 2px;
}
.cartao-violacao .contagem .rotulo {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}
.cartao-violacao .contagem strong {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cartao-violacao .botoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.cartao-violacao .botoes:empty { display: none; }

.resumo-passeio .linha-perfil .valor { font-size: 1.05rem; }

/* ============================================================
   Desktop (≥ 768px)
   ============================================================ */

@media (min-width: 768px) {
  h1 { font-size: 2.3rem; }

  .acoes-topo .so-desktop { display: inline-flex; }

  .hero { padding: 72px 0; }
  .hero .miolo {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .hero-texto { text-align: left; }
  .hero-texto h1 { font-size: 2.7rem; }
  .hero-botoes { flex-direction: row; }

  .secao { padding: 64px 0; }
  .passos-grade { grid-template-columns: repeat(3, 1fr); }

  .site-rodape .miolo {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* Overlay vira modal centralizado */
  .overlay { align-items: center; padding: 24px; }
  .overlay-caixa { border-radius: var(--raio-g); padding: 32px 30px 36px; }

  /* Verificação facial vira uma janela centralizada (proporção de celular) */
  .modal-verificacao {
    background: rgba(11, 42, 58, 0.75);
    align-items: center;
    padding: 24px;
  }
  .modal-verificacao-caixa {
    max-width: 460px;
    height: min(760px, 92vh);
    border-radius: var(--raio-g);
    overflow: hidden;
    box-shadow: var(--sombra-alta);
  }
  .modal-verificacao iframe { border-radius: 0; } /* a caixa já recorta os cantos */

  /* App: nav no topo, sem nav de baixo */
  .pagina-app { padding-bottom: 0; }
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
  .app-topo { min-height: 68px; padding: 0 24px; }

  .tela-mapa { height: calc(100vh - 68px); }

  /* No desktop o topo com a navegação continua; só a pill do logo é redundante */
  .pill-logo { display: none; }
  .mapa-pills { left: auto; right: 16px; top: 16px; }

  /* Painel do ponto vira cartão lateral flutuante sobre o mapa (sem backdrop) */
  .painel-backdrop { display: none !important; }
  .painel-ponto {
    left: 24px;
    right: auto;
    top: 92px;
    bottom: auto;
    width: 400px;
    max-height: calc(100vh - 130px);
    border-radius: var(--raio-g);
    padding: 22px 22px 24px;
    box-shadow: var(--sombra-alta);
    animation: surgir-cartao 0.3s ease;
  }
  .painel-ponto .pegador { display: none; }

  .barra-passeio {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 380px;
  }
  /* No desktop a barra de passeio fica no canto: os controles sobem mais */
  .com-barra .maplibregl-ctrl-bottom-right { bottom: 100px; }

  .tela-coluna { padding: 40px 24px 64px; }
}

@keyframes surgir-cartao {
  from { transform: translateY(12px); opacity: 0; }
}

/* ============================================================
   POPUP DO QR (landing — rotas /m/<codigo> e /p/<slug>)
   Bottom sheet no mobile, cartão assimétrico no desktop.
   Nada de card branco genérico: fundo navy→azul em diagonal,
   pássaro gigante cortando a borda e a scooter escapando do quadro.
   ============================================================ */

.scan-popup {
  position: fixed;
  inset: 0;
  z-index: 150; /* acima do topo (50), abaixo do overlay de auth (200) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.scan-popup-veu {
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 58, 0.55);
  animation: surgir-backdrop 0.3s ease;
}

.scan-popup-cartao {
  position: relative;
  width: 100%;
  max-width: 500px;
  border-radius: var(--raio-sheet) var(--raio-sheet) 0 0; /* mesmo raio do painel do ponto */
  padding: 24px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  /* overflow visível: a scooter escapa pra fora do quadro */
  animation: subir-sheet 0.45s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* Camada de fundo separada: ela (e só ela) recorta o pássaro na borda */
.scan-popup-arte {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(126deg, var(--navy) 8%, var(--navy-claro) 58%, var(--azul-profundo) 115%);
  box-shadow: var(--sombra-sheet);
}
.scan-popup-arte .passaro-gigante {
  position: absolute;
  left: -74px;
  bottom: -52px;
  width: 320px;
  height: 200px;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(-10deg);
}

/* A scooter sai do quadro: metade dela flutua acima do sheet */
.scan-popup-scooter {
  position: absolute;
  top: -58px;
  right: -14px;
  width: 210px;
  height: auto;
  transform: rotate(-5deg);
  filter: drop-shadow(0 10px 18px rgba(11, 42, 58, 0.35));
  pointer-events: none;
}

.scan-popup-fechar {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 44px;  /* área de toque padrão do site (44×44) */
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--branco);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.scan-popup-fechar:hover { background: rgba(255, 255, 255, 0.26); }

.scan-popup-conteudo {
  position: relative; /* acima da camada de arte */
  color: var(--branco);
  padding-top: 40px; /* respiro pro botão fechar e pra scooter */
}

/* Chip lima com o código do QR, levemente torto de propósito */
.scan-popup-chip {
  display: inline-block;
  background: var(--lima);
  color: var(--navy);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transform: rotate(-2deg);
  margin-bottom: 10px;
}

.scan-popup-titulo {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 6px;
  max-width: calc(100% - 120px); /* não entra embaixo da scooter */
}
.scan-popup-titulo .nome { color: var(--lima); }

.scan-popup-onde {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin: 0 0 16px;
}

/* Preço: dupla min/h + linha da pausa, num painel translúcido */
.scan-popup-preco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.scan-popup-preco strong { font-size: 1.15rem; font-weight: 700; }
.scan-popup-preco span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); font-weight: 600; }

/* A promessa: destaque com barra lima (a gente já sabe qual moto é a tua) */
.scan-popup-promessa {
  border-left: 4px solid var(--lima);
  background: rgba(200, 242, 58, 0.1);
  border-radius: 0 12px 12px 0;
  padding: 12px 14px;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 18px;
}

.scan-popup-conteudo .botao-lima { margin-bottom: 10px; }

/* Botão secundário sobre fundo escuro (contorno translúcido) */
.botao-fantasma {
  background: transparent;
  color: var(--branco);
  border: 2px solid rgba(255, 255, 255, 0.5); /* ≥3:1 de contraste sobre o fundo escuro */
}
.botao-fantasma:hover { border-color: var(--branco); background: rgba(255, 255, 255, 0.08); }

/* Mini-popup do QR inválido: cartãozinho navy no rodapé */
.scan-mini {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 150;
  width: min(92vw, 400px);
  background: var(--navy);
  color: var(--branco);
  border-radius: 18px;
  box-shadow: var(--sombra-alta);
  padding: 18px 20px;
  animation: subir-mini 0.35s ease;
}
@keyframes subir-mini {
  from { transform: translate(-50%, 16px); opacity: 0; }
}
.scan-mini-titulo { font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; }
.scan-mini-texto { color: var(--cinza-claro); font-size: 0.9rem; margin: 0 0 12px; }
.scan-mini .botao { min-height: 46px; width: 100%; }

/* Desktop: o popup vira cartão assimétrico centralizado */
@media (min-width: 768px) {
  .scan-popup { align-items: center; padding: 32px; }
  .scan-popup-cartao {
    max-width: 520px;
    border-radius: 32px 32px 32px 10px; /* canto "quebrado" de propósito */
    padding: 30px 34px 32px;
    /* Modal centralizado: entra como cartão (o subir-sheet vem de fora da tela) */
    animation: surgir-cartao 0.3s ease;
  }
  .scan-popup-scooter { top: -64px; right: -34px; width: 240px; }
  .scan-popup-arte .passaro-gigante { width: 380px; height: 238px; left: -90px; bottom: -66px; }
  .scan-popup-titulo { font-size: 2rem; }
}

/* Viewport baixa (ex.: celular deitado): o cartão rola por dentro e a scooter
   decorativa sai de cena — sem cortar o título nem o botão de fechar. */
@media (max-height: 600px) {
  .scan-popup-cartao { max-height: 100dvh; overflow-y: auto; }
  .scan-popup-scooter { display: none; }
}

/* ============================================================
   SALDO DISPONÍVEL EM TEMPO REAL (tela do passeio)
   ============================================================ */

/* Trava a rolagem do fundo enquanto um modal de tela cheia está aberto */
body.sem-rolagem { overflow: hidden; }

.saldo-disponivel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--navy);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 12px 18px;
  margin-top: 16px;
  text-align: left;
}
.saldo-disponivel .rotulo-sd {
  color: var(--cinza-claro);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}
.saldo-disponivel strong {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--lima);
  font-variant-numeric: tabular-nums; /* o número desce sem "dançar" */
  white-space: nowrap;
}
/* Menos de ~15 min de saldo na tarifa atual: âmbar suave (estado de alerta).
   Menos de ~5 min: vermelho pulsando. */
.saldo-disponivel.baixo strong { color: #F4D06F; }
.saldo-disponivel.acabando strong { color: #FF8A80; animation: pulsar-leve 1.2s ease-in-out infinite; }

/* ============================================================
   ENCERRAMENTO: aviso de devolução + modal da foto
   ============================================================ */

/* Cartão: "leve a moto de volta ao ponto" / "sem sinal de GPS" (navy + lima) */
.cartao-devolucao {
  background: var(--navy);
  border: 2px solid var(--navy-claro);
  color: var(--branco);
  border-radius: var(--raio-g);
  padding: 16px;
  margin: 12px 0;
  animation: surgir-cartao 0.3s ease;
}
.cartao-devolucao svg {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
  color: var(--lima);
}
.cartao-devolucao p { font-weight: 700; line-height: 1.45; margin: 0 0 12px; }
.cartao-devolucao .botao { min-height: 48px; }

/* Modal da foto: veu escuro + cartão central */
.modal-foto {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-foto-veu {
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 58, 0.6);
  animation: surgir-backdrop 0.3s ease;
}
.modal-foto-caixa {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--branco);
  border-radius: var(--raio-sheet) var(--raio-sheet) 0 0;
  box-shadow: var(--sombra-sheet);
  padding: 24px 22px calc(26px + env(safe-area-inset-bottom, 0px));
  animation: subir-sheet 0.45s cubic-bezier(0.22, 1.2, 0.36, 1);
  outline: none;
}
.modal-foto-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--fundo);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.modal-foto-selo {
  display: inline-block;
  background: var(--lima);
  color: var(--navy);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.modal-foto-caixa h2 { font-size: 1.3rem; margin-bottom: 6px; padding-right: 40px; }
.modal-foto-sub { color: var(--cinza); margin-bottom: 18px; }
.foto-preview {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: cover;
  border-radius: var(--raio);
  border: 2px solid var(--cinza-claro);
  margin-bottom: 14px;
  animation: surgir-cartao 0.3s ease;
}
.modal-foto-botoes { display: flex; gap: 10px; }
.modal-foto-botoes .botao { flex: 1; padding-left: 10px; padding-right: 10px; }

@media (min-width: 768px) {
  .modal-foto { align-items: center; padding: 24px; }
  .modal-foto-caixa { border-radius: var(--raio-g); animation: surgir-cartao 0.3s ease; }
}

/* ============================================================
   ONBOARDING — 3 cartões antes de destravar
   ============================================================ */

.onboarding {
  position: fixed;
  inset: 0;
  z-index: 210; /* acima do sheet do ponto (95) e da nav (100) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.onboarding-veu {
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 58, 0.6);
  animation: surgir-backdrop 0.3s ease;
}
.onboarding-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  background: var(--branco);
  border-radius: var(--raio-sheet) var(--raio-sheet) 0 0;
  box-shadow: var(--sombra-sheet);
  animation: subir-sheet 0.45s cubic-bezier(0.22, 1.2, 0.36, 1);
  outline: none;
}
.onboarding-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--fundo);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.onboarding-fechar:hover { background: var(--cinza-claro); }

/* Trilho horizontal com scroll-snap: arrastar no toque, setas no rodapé */
.onboarding-trilho {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: inherit;
}
.onboarding-trilho::-webkit-scrollbar { display: none; }

.onboarding-card {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* um cartão por gesto, sem pular etapa */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 8px;
}
.onboarding-card h2 { font-size: 1.35rem; margin-bottom: 12px; padding-right: 44px; }
.onboarding-selo {
  display: inline-block;
  background: var(--fundo);
  color: var(--azul-texto);
  border: 1px solid var(--cinza-claro);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.onboarding-texto { color: var(--cinza); font-size: 0.95rem; line-height: 1.55; }
.onboarding-texto strong { color: var(--navy); }
.onboarding-alerta {
  background: var(--navy);
  border-left: 4px solid var(--lima);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 12px 0 16px;
}
.onboarding-alerta strong { color: var(--lima); }

/* Destaque navy/lima do card 2: devolução no mesmo ponto (regra do encerramento) */
.onboarding-destaque {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--navy);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin: 12px 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}
.onboarding-destaque svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--lima);
}
.onboarding-destaque p { margin: 0; }
.onboarding-destaque strong { color: var(--lima); }

/* Rodapé: seta ‹ · bolinhas · seta › */
.onboarding-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cinza-claro);
}
.onboarding-seta {
  width: 48px;
  height: 48px;
  border: 2px solid var(--cinza-claro);
  border-radius: 50%;
  background: var(--branco);
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.onboarding-seta:hover:not(:disabled) { border-color: var(--azul); }
.onboarding-seta:disabled { opacity: 0.35; cursor: default; }
.onboarding-bolinhas { display: flex; gap: 0; }
.onboarding-bolinhas button {
  /* Alvo de toque de 26px; o visual segue a bolinha de 10px (content-box) */
  width: 26px;
  height: 26px;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--cinza-claro);
  background-clip: content-box;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.onboarding-bolinhas button[aria-current="true"] {
  width: 42px; /* bolinha visível de 26px, como antes */
  background: var(--azul);
  background-clip: content-box;
}

/* ---------- Card 1: cena da scooter animada ---------- */

.cena-scooter {
  background: linear-gradient(160deg, #E5F7FE 0%, #F4F8FA 80%);
  border-radius: var(--raio-g);
  padding: 8px 6px 0;
  margin-bottom: 14px;
}
.cena-scooter svg { width: 100%; height: auto; display: block; }

/* Grupos animados: origem do transform no próprio desenho (fill-box) */
#sv-descanso, #sv-freio, #sv-mao, #sv-giro { transform-box: fill-box; }
#sv-descanso { transform-origin: 100% 0; }   /* pivô = topo do descanso */
#sv-freio { transform-origin: 0 100%; }      /* base do manete */
#sv-mao { transform-origin: 50% 50%; }
#sv-giro { transform-origin: 50% 50%; opacity: 0; }
#sv-vento line { opacity: 0; }
.cena-scooter .anel { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

/* Passo 1: descanso sobe (e volta, em loop, pra mostrar o gesto) */
.cena-scooter.passo-1 #sv-descanso { animation: recolher-descanso 1.8s ease-in-out infinite alternate; }
.cena-scooter.passo-1 .anel-1 { animation: pulsar-anel 1.5s ease-out infinite; }
@keyframes recolher-descanso {
  0%, 20% { transform: rotate(0deg); }
  80%, 100% { transform: rotate(75deg); }
}

/* Passo 2: mão aperta o manete do freio */
.cena-scooter.passo-2 #sv-freio { animation: apertar-freio 1.2s ease-in-out infinite; }
.cena-scooter.passo-2 #sv-mao { animation: apertar-mao 1.2s ease-in-out infinite; }
.cena-scooter.passo-2 .anel-2 { animation: pulsar-anel 1.5s ease-out infinite; }
@keyframes apertar-freio {
  0%, 100% { transform: rotate(0deg); }
  40%, 60% { transform: rotate(9deg); }
}
@keyframes apertar-mao {
  0%, 100% { transform: translate(0, 0); }
  40%, 60% { transform: translate(1.5px, -2.5px); }
}

/* Passo 3: punho gira (seta aparece) e o vento sopra */
.cena-scooter.passo-3 #sv-giro { animation: girar-punho 1.4s ease-in-out infinite; }
.cena-scooter.passo-3 #sv-mao { animation: girar-mao 1.4s ease-in-out infinite; }
.cena-scooter.passo-3 .anel-3 { animation: pulsar-anel 1.5s ease-out infinite; }
.cena-scooter.passo-3 #sv-vento line { animation: soprar 1.1s ease-in-out infinite; }
.cena-scooter.passo-3 #sv-vento line:nth-child(2) { animation-delay: 0.2s; }
.cena-scooter.passo-3 #sv-vento line:nth-child(3) { animation-delay: 0.4s; }
@keyframes girar-punho {
  0%, 15% { opacity: 0; transform: rotate(-16deg); }
  45%, 75% { opacity: 1; transform: rotate(10deg); }
  100% { opacity: 0; transform: rotate(10deg); }
}
@keyframes girar-mao {
  0%, 15% { transform: rotate(0deg); }
  45%, 100% { transform: rotate(8deg); }
}
@keyframes soprar {
  0% { opacity: 0; transform: translateX(10px); }
  45% { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(-14px); }
}
@keyframes pulsar-anel {
  0% { opacity: 0.9; transform: scale(0.55); }
  85%, 100% { opacity: 0; transform: scale(1.35); }
}

/* Sem animação (prefers-reduced-motion): o anel do passo ativo fica aceso e
   parado — a indicação do gesto não some com as animações zeradas. */
@media (prefers-reduced-motion: reduce) {
  .cena-scooter.passo-1 .anel-1,
  .cena-scooter.passo-2 .anel-2,
  .cena-scooter.passo-3 .anel-3 {
    opacity: 0.9;
    animation: none;
    transform: scale(0.85);
  }
}

/* Rótulos "freio esquerdo" / "punho direito" na cena (freio e punho ficam
   colados no desenho) — visíveis só no passo ativo */
.cena-scooter .sv-rotulo {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  fill: var(--navy);
  stroke: #FFFFFF;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cena-scooter.passo-2 .sv-rotulo-2,
.cena-scooter.passo-3 .sv-rotulo-3 { opacity: 1; }

/* Lista de passos do card 1 (tocar num passo mostra o gesto na cena) */
.passos-moto { list-style: none; margin: 0; padding: 0; }
.passos-moto li { margin-bottom: 8px; }
.passos-moto button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--branco);
  border: 2px solid var(--cinza-claro);
  border-radius: var(--raio);
  padding: 10px 14px;
  font: inherit;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.passos-moto li.ativo button { border-color: var(--azul); background: #E5F7FE; }
.passos-moto .num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cinza-claro);
  color: var(--cinza);
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}
.passos-moto li.ativo .num { background: var(--lima); color: var(--navy); }
.passos-moto .texto strong { display: block; font-size: 0.95rem; }
.passos-moto .texto span { display: block; font-size: 0.83rem; color: var(--cinza); line-height: 1.4; }

/* ---------- Card 2: mini-mapa da zona ---------- */

.mini-mapa-caixa {
  position: relative;
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 1px solid var(--cinza-claro);
  margin-bottom: 14px;
  background: #E5F7FE;
}
#mini-mapa { width: 100%; height: 240px; }
.mini-mapa-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cinza);
  font-weight: 600;
  padding: 20px;
  margin: 0;
}
/* Pontinho de ponto parceiro dentro do mini-mapa */
.mini-pino {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--azul);
  border: 3px solid var(--branco);
  box-shadow: 0 2px 8px rgba(11, 42, 58, 0.35);
}

/* ---------- Card 3: tarifas + medidor de saldo ---------- */

.tarifas-onboarding { display: flex; gap: 10px; margin-bottom: 14px; }
.tarifas-onboarding .tarifa {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #E5F7FE;
  border: 2px solid var(--azul);
  border-radius: var(--raio);
  padding: 12px 8px;
  text-align: center;
}
.tarifas-onboarding .tarifa svg { width: 22px; height: 22px; color: var(--azul-texto); }
.tarifas-onboarding .tarifa strong { font-size: 1.1rem; font-weight: 800; color: var(--navy); white-space: nowrap; }
.tarifas-onboarding .tarifa span { font-size: 0.8rem; color: var(--cinza); font-weight: 600; }
.tarifas-onboarding .tarifa.pausada { background: var(--navy); border-color: var(--navy); }
.tarifas-onboarding .tarifa.pausada svg { color: var(--lima); }
.tarifas-onboarding .tarifa.pausada strong { color: var(--branco); }
.tarifas-onboarding .tarifa.pausada span { color: var(--cinza-claro); }

.medidor-saldo { margin-bottom: 14px; }
.medidor-titulo {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--cinza);
  margin-bottom: 6px;
}
.medidor-pista {
  height: 14px;
  border-radius: 999px;
  background: var(--cinza-claro);
  overflow: hidden;
}
.medidor-nivel {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), var(--lima));
  animation: drenar-saldo 6s ease-in-out infinite;
}
@keyframes drenar-saldo {
  0%, 8% { width: 100%; }
  88%, 100% { width: 10%; }
}

/* ---------- Card 4: cena da devolução (estacionar + foto) ----------

   O SVG é desenhado já no MOMENTO FINAL (scooter parada no ponto, descanso
   baixo, celular erguido): as animações só "rebobinam" cada grupo pro início
   do ciclo. Com prefers-reduced-motion, tudo fica parado no momento final. */

.cena-devolucao {
  background: linear-gradient(160deg, #E5F7FE 0%, #F4F8FA 80%);
  border-radius: var(--raio-g);
  padding: 8px 6px 0;
  margin-bottom: 14px;
}
.cena-devolucao svg { width: 100%; height: auto; display: block; }

#dv-viagem, #dv-pessoa, #dv-descanso, #dv-braco, #dv-anel-foco { transform-box: fill-box; }
#dv-descanso { transform-origin: 100% 0; }  /* pivô = topo do descanso */
#dv-pessoa { transform-origin: 50% 100%; }
#dv-braco { transform-origin: 11% 90%; }    /* ombro da pessoa */
#dv-anel-foco { transform-origin: 50% 50%; }

/* Ciclo único de 7s: chegar → descer → descanso → foto (flash) → recomeça */
#dv-viagem { animation: dv-chegar 7s ease-in-out infinite; }
#dv-vento line { opacity: 0; animation: dv-soprar 7s ease-in-out infinite; }
#dv-pessoa { animation: dv-descer 7s ease-in-out infinite; }
#dv-descanso { animation: dv-baixar-descanso 7s ease-in-out infinite; }
#dv-braco { animation: dv-levantar-celular 7s ease-in-out infinite; }
#dv-anel-foco { opacity: 0; animation: dv-anel-foco 7s ease-out infinite; }
#dv-flash { opacity: 0; animation: dv-flash 7s ease-out infinite; }

/* Momento 1: a scooter desliza até a vaga do ponto e para (fade suave no
   fim do ciclo pra recomeçar sem "teleporte") */
@keyframes dv-chegar {
  0% { transform: translateX(-150px); opacity: 0; }
  6% { opacity: 1; }
  26%, 92% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes dv-soprar {
  0%, 4% { opacity: 0; transform: translateX(8px); }
  10%, 18% { opacity: 0.8; }
  26%, 100% { opacity: 0; transform: translateX(-10px); }
}

/* Momento 2: a pessoa desce da scooter e o descanso baixa */
@keyframes dv-descer {
  0%, 30% { transform: translate(80px, -34px); }
  44%, 100% { transform: translate(0, 0); }
}
@keyframes dv-baixar-descanso {
  0%, 34% { transform: rotate(70deg); }
  48%, 100% { transform: rotate(0deg); }
}

/* Momento 3: o celular sobe e a foto sai (anel de foco + flash sutil) */
@keyframes dv-levantar-celular {
  0%, 50% { transform: rotate(58deg); }
  62%, 100% { transform: rotate(0deg); }
}
@keyframes dv-anel-foco {
  0%, 64% { opacity: 0; transform: scale(0.6); }
  72% { opacity: 0.9; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(1.25); }
}
@keyframes dv-flash {
  0%, 66% { opacity: 0; }
  70%, 76% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

/* Sem animação (prefers-reduced-motion): momento final digno — scooter
   estacionada no ponto, descanso baixo, celular erguido e anel de foco aceso */
@media (prefers-reduced-motion: reduce) {
  #dv-viagem, #dv-vento line, #dv-pessoa, #dv-descanso, #dv-braco,
  #dv-anel-foco, #dv-flash { animation: none; }
  #dv-anel-foco { opacity: 0.9; transform: scale(0.9); }
  #dv-flash { opacity: 0; }
}

/* Desktop: o onboarding vira um modal centralizado */
@media (min-width: 768px) {
  .onboarding { align-items: center; padding: 24px; }
  .onboarding-caixa {
    border-radius: var(--raio-g);
    max-height: min(720px, calc(100vh - 48px));
    animation: surgir-cartao 0.3s ease;
  }
  #mini-mapa { height: 280px; }
}

/* ============================================================
   MAPA VIVO DO PASSEIO — sua posição + trajeto de volta à base
   ============================================================ */

.mapa-passeio-caixa {
  position: relative;
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 1px solid var(--cinza-claro);
  box-shadow: var(--sombra);
  background: #E5F7FE;
  margin-bottom: 14px;
}
#mapa-passeio { width: 100%; height: min(46vh, 340px); min-height: 230px; }

/* Chip discreto sobre o mapa: buscando GPS / permissão negada */
.mapa-passeio-status {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 12px rgba(11, 42, 58, 0.14);
  color: var(--cinza);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}
.mapa-passeio-status .bolinha-pulso {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--azul);
  animation: pulsar-leve 1.2s ease-in-out infinite;
}
/* Com o banner da devolução visível, o banner manda no topo do mapa */
.mapa-passeio-caixa.com-banner .mapa-passeio-status { display: none; }

/* Botão flutuante "Voltar à base?" (saldo pros últimos ~20 min) */
.botao-rota-base {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--branco);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sombra-alta);
  -webkit-tap-highlight-color: transparent;
}
.botao-rota-base svg { flex: none; width: 18px; height: 18px; color: var(--lima); }
.botao-rota-base:active { transform: translateX(-50%) scale(0.97); }
.botao-rota-base.ativa {
  background: var(--branco);
  color: var(--navy);
  border: 2px solid var(--navy);
}
.botao-rota-base.ativa svg { color: var(--azul-texto); }

/* Banner da janela de devolução (sem saldo): trajeto automático + contagem.
   Navy sobre o mapa, contagem em lima. */
.banner-volta-base {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 6;
  background: var(--navy);
  border: 0;
  color: var(--branco);
  border-radius: var(--raio);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(11, 42, 58, 0.35);
}
.banner-volta-base strong { display: block; }
.banner-volta-base span { font-variant-numeric: tabular-nums; color: var(--lima); }
/* Sem posição do usuário: o próprio banner explica a falta do trajeto
   (o chip .mapa-passeio-status fica escondido pelo .com-banner) */
.banner-volta-base .nota-gps {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cinza-claro);
}

/* Marcador do usuário: ponto azul "você" numa scooter, girando pro rumo */
.marcador-usuario { width: 56px; height: 56px; pointer-events: none; }
.marcador-usuario svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(11, 42, 58, 0.35));
}

/* Pino da base ("Ponto Movita") no mapa do passeio */
.marcador-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.marcador-base .nome {
  background: var(--navy);
  color: var(--branco);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 42, 58, 0.25);
}
.marcador-base .pino {
  position: relative;
  width: 42px;
  height: 42px;
  background: var(--azul);
  border: 3px solid var(--branco);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 168, 232, 0.45), 0 2px 6px rgba(11, 42, 58, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px; /* espaço da ponta: a ponta encosta na coordenada */
}
.marcador-base .pino svg { width: 24px; height: 15px; color: var(--branco); }
.marcador-base .pino .ponta {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--azul);
}

@media (min-width: 768px) {
  #mapa-passeio { height: 360px; }
}