/* =========================================================================
   VisiteNE — folha do portal.
   Só o que os tokens e o kit de componentes não cobrem: topo, menu, rodapé,
   abertura, mapa de escolha e as peças próprias das telas.

   Regras herdadas do guia e que esta folha respeita à letra:
   · o dourado significa conquista, e nada além disso;
   · motion: 120 ms toque · 180 ms painel · 240 ms modal · curva --ease;
     a única animação longa é a do carimbo (420 ms, uma vez);
   · alvo de toque ≥ 44 px, inclusive nos itens de menu;
   · a conquista pendente não é dourada e não é torta;
   · nenhum valor de espaço fora da base 4.
   ========================================================================= */

/* ---- Topo ------------------------------------------------------------- */
.vne-topo {
  background: var(--superficie-marca);
  color: var(--texto-sobre-marca);
  border-bottom: 3px solid var(--ouro-500);
  position: sticky; top: 0; z-index: 1030;
}
.vne-topo a { color: var(--texto-sobre-marca); text-decoration: none; }

/* O lockup horizontal usa os ARQUIVOS da marca — a palavra nunca é
   recomposta em fonte. Largura mínima do wordmark: 120 px (regra do guia);
   abaixo disso, em tela estreita, sobrevive só o símbolo. */
.vne-marca {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
}
.vne-marca-palavra { width: 132px; height: auto; }
@media (max-width: 420px) { .vne-marca-palavra { display: none; } }

.vne-menu {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.vne-menu a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 12px;
  border-radius: var(--raio); font-size: 15px;
  opacity: .88;
  transition: background 120ms var(--ease), opacity 120ms var(--ease);
}
.vne-menu a:hover { background: rgba(255,255,255,.10); opacity: 1; }
.vne-menu a.ativo { background: rgba(255,255,255,.16); opacity: 1; font-weight: 600; }

.vne-topo .vne-btn--sutil { color: var(--texto-sobre-marca); }
.vne-topo .vne-btn--sutil:hover { background: rgba(255,255,255,.12); }
.vne-topo .vne-btn--secundario {
  background: rgba(255,255,255,.10); color: var(--texto-sobre-marca);
  border-color: rgba(255,255,255,.30);
}
.vne-topo .vne-btn--secundario:hover { background: rgba(255,255,255,.18); }

/* O convite de cadastro é claro, não dourado: dourado é conquista, e criar
   conta ainda não é uma. Branco sobre o navy é o par de maior contraste
   que o topo tem (13,4:1). */
.vne-btn--convite,
.vne-topo .vne-btn--convite {
  background: #fff; color: var(--azul-800); border-color: #fff; font-weight: 700;
}
.vne-btn--convite:hover,
.vne-topo .vne-btn--convite:hover { background: var(--n-100); border-color: var(--n-100); color: var(--azul-900); }

/* ---- Seletor de horizonte --------------------------------------------- */
.vne-escopo {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--pill); padding: 2px 6px 2px 12px;
  min-height: 44px;
}
.vne-escopo .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.vne-escopo select {
  background: transparent; color: inherit; border: 0; font-size: 14px; font-weight: 600;
  padding: 8px 6px; border-radius: var(--raio); min-height: 40px;
}
.vne-escopo select option { color: var(--texto); background: var(--superficie); }

/* ---- Tarja do ambiente de ensaio -------------------------------------- */
/* Terracota, nunca dourada: o dourado da marca significa conquista, e a
   tarja é um aviso. Listras para não passar por faixa decorativa. */
.vne-tarja-ensaio {
  background: repeating-linear-gradient(135deg,
    var(--atencao) 0 18px, #8A3608 18px 36px);
  color: #fff; text-align: center; padding: 8px 12px;
  font-size: 14px; font-weight: 600;
}
.vne-tarja-ensaio a { color: #fff; text-underline-offset: 2px; }

/* ---- Rodapé ----------------------------------------------------------- */
.vne-rodape { background: var(--azul-950); color: #DCE3F0; margin-top: auto; }
.vne-rodape a { color: #BFD0F0; }
.vne-rodape-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ouro-300); }
.vne-rodape-lista { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.vne-rodape-lista li { margin-bottom: 4px; }
.vne-rodape-nota { font-size: 13px; color: #A9B6D0; }
.vne-rodape hr { border-color: rgba(255,255,255,.14); }

/* =========================================================================
   Abertura: a marca, e depois o mapa.
   Dura no máximo 2 s e sai com clique, Esc ou o botão pular. O símbolo NÃO
   gira — a rosa dos ventos aponta para o norte real, e girada ela mente.
   Quem tem "reduzir movimento" ligado nunca a vê.
   ========================================================================= */
.vne-abertura {
  position: fixed; inset: 0; z-index: 2000;
  background: radial-gradient(circle at 50% 42%, var(--azul-700), var(--azul-950) 72%);
  display: grid; place-items: center; text-align: center;
  transition: opacity 240ms var(--ease), visibility 240ms;
}
.vne-abertura[hidden] { opacity: 0; visibility: hidden; display: grid; pointer-events: none; }
.vne-abertura-miolo { max-width: 560px; padding: 24px; }
.vne-abertura img.simbolo {
  width: min(46vw, 230px); height: auto;
  opacity: 0; transform: scale(.9);
  animation: vne-surge 700ms var(--ease) 100ms forwards;
}
.vne-abertura img.palavra {
  width: min(64vw, 320px); height: auto; margin-top: 16px;
  opacity: 0; transform: translateY(10px);
  animation: vne-sobe 500ms var(--ease) 700ms forwards;
}
.vne-abertura .slogan {
  margin-top: 16px; color: var(--ouro-300); font-family: var(--f-marca);
  font-size: clamp(16px, 3.6vw, 22px); opacity: 0; transform: translateY(8px);
  animation: vne-sobe 500ms var(--ease) 1100ms forwards;
}
.vne-abertura .pular {
  margin-top: 24px; font-size: 13px; color: #9FB2D8; background: none; border: 0;
  min-height: 44px; min-width: 44px; padding: 8px 16px; cursor: pointer;
  border-radius: var(--raio);
}
.vne-abertura .pular:hover { background: rgba(255,255,255,.08); }
@keyframes vne-surge { to { opacity: 1; transform: scale(1); } }
@keyframes vne-sobe  { to { opacity: 1; transform: translateY(0); } }

/* ---- Mapa de escolha do estado ---------------------------------------- */
.vne-mapa-escolha { max-width: 560px; margin-inline: auto; }
.vne-mapa-escolha svg { width: 100%; height: auto; display: block; }
.vne-mapa-escolha .uf {
  fill: var(--ouro-500); stroke: var(--azul-800); stroke-width: 2.2;
  stroke-linejoin: round; cursor: pointer;
  transition: fill 120ms var(--ease);
}
.vne-mapa-escolha .uf:hover,
.vne-mapa-escolha .uf:focus-visible { fill: var(--ouro-300); outline: none; }
/* Estado sem inventário nesta base: território desenhado, nada dentro.
   O cinza não é decoração — é a informação de que não há ponto ali. */
.vne-mapa-escolha .uf[data-inventario="ausente"] {
  fill: var(--n-300); stroke: var(--n-500);
}
.vne-mapa-escolha .uf[data-inventario="ausente"]:hover { fill: var(--n-200); }
.vne-mapa-escolha .uf[aria-current="true"] { fill: var(--ouro-200); stroke-width: 3.4; }

.vne-mapa-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  font-size: 13px; color: var(--texto-suave); margin-top: 8px;
}
.vne-mapa-legenda i {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  vertical-align: -2px; margin-right: 6px; border: 1px solid var(--borda-forte);
}

/* ---- Hero da home ------------------------------------------------------ */
.vne-hero {
  background: var(--superficie-marca);
  color: var(--texto-sobre-marca);
  border-radius: var(--raio-xl);
  padding: clamp(24px, 5vw, 48px);
  position: relative; overflow: hidden;
}
.vne-hero::after {
  /* O símbolo como marca d'água: disco da cor do fundo, só anel e rosa. */
  content: ""; position: absolute; right: -60px; top: 50%;
  width: 340px; height: 340px; transform: translateY(-50%);
  background: url('/marca/visitene-simbolo.png') center/contain no-repeat;
  opacity: .16; pointer-events: none;
}
.vne-hero h1 {
  font-family: var(--f-marca); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(26px, 4.6vw, 42px); line-height: 1.12; margin: 0 0 8px;
  max-width: 22ch; position: relative; z-index: 1;
}
.vne-hero .sub {
  color: #C9D4EA; font-size: clamp(15px, 2vw, 17px); max-width: 52ch;
  margin: 0 0 20px; position: relative; z-index: 1;
}
.vne-hero .busca { position: relative; z-index: 2; max-width: 640px; }
.vne-hero input {
  min-height: 52px; font-size: 16px;
  border: 0; border-radius: var(--raio-lg);
}
.vne-hero .nota { font-size: 13px; color: #A9B6D0; margin: 8px 0 0; position: relative; z-index: 1; }

/* Autocomplete — a lista de sugestões da busca */
.vne-sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-lg);
  overflow: hidden; max-height: 330px; overflow-y: auto;
}
.vne-sugestoes:empty { display: none; }
.vne-sugestoes button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 14px; border: 0; background: none;
  text-align: left; font: inherit; font-size: 14px; color: var(--texto);
  cursor: pointer;
}
.vne-sugestoes button:hover,
.vne-sugestoes button:focus-visible { background: var(--acento-fraco); outline: none; }
.vne-sugestoes .meta { color: var(--texto-fraco); font-size: 12.5px; margin-left: auto; white-space: nowrap; }

/* Chips de categoria rápidos */
.vne-cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vne-cat-chips a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--pill); text-decoration: none; color: var(--texto);
  font-size: 14px; font-weight: 500;
  transition: border-color 120ms var(--ease), background 120ms var(--ease),
              transform 120ms var(--ease);
}
.vne-cat-chips a:hover {
  border-color: var(--acento); background: var(--acento-fraco);
  transform: translateY(-1px);
}

/* ---- Peças de tela ---------------------------------------------------- */
.vne-estado-cartao {
  border: 1px solid var(--borda); border-radius: var(--raio-lg);
  background: var(--superficie); padding: 14px; height: 100%;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease),
              transform 120ms var(--ease);
  display: block; text-decoration: none; color: inherit;
}
.vne-estado-cartao:hover { border-color: var(--acento); box-shadow: var(--sombra); transform: translateY(-2px); }
.vne-estado-cartao .sigla {
  font-family: var(--f-marca); font-size: 26px; line-height: 1; color: var(--acento);
}

.vne-cartao {
  border: 1px solid var(--borda); border-radius: var(--raio-lg);
  background: var(--superficie); overflow: hidden; height: 100%;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease),
              transform 120ms var(--ease);
}
a.vne-cartao:hover { border-color: var(--acento); box-shadow: var(--sombra); transform: translateY(-2px); }
.vne-cartao img.capa {
  width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover;
  background: var(--superficie-alt); display: block;
}
.vne-cartao .corpo { padding: 12px 14px; }
.vne-cartao h3 { font-size: 17px; margin: 0 0 4px; }
.vne-cartao .meta { font-size: 13px; color: var(--texto-suave); }

.vne-numero { font-family: var(--f-dado); font-variant-numeric: tabular-nums; font-size: 30px; line-height: 1.1; color: var(--acento); }
.vne-numero-rotulo { font-size: 13px; color: var(--texto-suave); }

.vne-mapa { height: 62vh; min-height: 380px; border-radius: var(--raio-lg); border: 1px solid var(--borda); }
.vne-mapa-alto { height: 74vh; }

/* Lista-espelho do Atlas: o mapa nunca é a única via. Tudo o que um pin
   alcança, a lista alcança — com as mesmas ações. */
.vne-atlas-lista { max-height: 74vh; overflow-y: auto; }
.vne-atlas-lista .item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 10px;
  border: 0; border-bottom: 1px solid var(--borda); background: none;
  text-align: left; font: inherit; font-size: 14px; color: var(--texto);
  cursor: pointer; text-decoration: none;
  transition: background 120ms var(--ease);
}
.vne-atlas-lista .item:hover,
.vne-atlas-lista .item:focus-visible { background: var(--acento-fraco); outline: none; }
.vne-atlas-lista .item .meta { color: var(--texto-fraco); font-size: 12.5px; margin-left: auto; white-space: nowrap; }

.vne-perna {
  font-family: var(--f-dado); font-size: 12px; color: var(--texto-fraco);
  border-left: 2px dashed var(--borda-forte); margin-left: 15px; padding: 6px 0 6px 18px;
}
.vne-perna[data-excede="1"] { color: var(--atencao); border-color: var(--atencao); font-weight: 600; }

.vne-parada { display: flex; gap: 12px; align-items: flex-start; }
.vne-parada .ordem {
  width: 32px; height: 32px; border-radius: var(--pill); flex: none;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  font-family: var(--f-dado); font-size: 14px;
}

/* ---- Passaporte -------------------------------------------------------- */
/* O caderno de carimbos: canvas gerado por selo-ne.js, o mesmo desenho do
   aplicativo. Cada carimbo entra torto — a matriz é reta, a impressão é que
   entorta — e a inclinação é determinística por carimbo. */
.vne-caderno {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.vne-caderno figure { margin: 0; text-align: center; }
.vne-caderno canvas { width: 100%; max-width: 170px; height: auto; }
.vne-caderno figcaption { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }

/* A única animação longa do sistema: o carimbo caindo sobre o passaporte.
   420 ms, uma vez, sem repetição — é o momento de recompensa do produto. */
@keyframes vne-carimbada {
  0%   { opacity: 0; transform: scale(1.6); }
  62%  { opacity: 1; transform: scale(.94); }
  80%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.vne-caderno .novo canvas { animation: vne-carimbada 420ms var(--ease) 1; }

/* A ficha por estado. Obtido = areia, dourado e torto, como carimbo que é.
   Pendente = reto e neutro: a conquista pendente não é dourada e não é
   torta — essa diferença visual é o produto inteiro numa imagem. */
.vne-uf-tile {
  border-radius: var(--pill); aspect-ratio: 1;
  display: grid; place-items: center; text-align: center; padding: 10px;
}
.vne-uf-tile[data-estado="obtido"] {
  border: 2px solid var(--ouro-700); background: var(--ouro-50);
  transform: rotate(-4deg);
}
.vne-uf-tile[data-estado="obtido"] .uf { color: var(--ouro-700); }
.vne-uf-tile[data-estado="pendente"] {
  border: 2px dashed var(--n-300); background: transparent; transform: none;
}
.vne-uf-tile[data-estado="pendente"] .uf { color: var(--texto-fraco); }
.vne-uf-tile .uf { font-family: var(--f-marca); font-size: 24px; line-height: 1; }
.vne-uf-tile .lugar { font-size: 11px; color: var(--texto-suave); }

.vne-conquista { border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: 14px; height: 100%; }
.vne-conquista[data-estado="concluida"] { border-color: var(--ouro-500); background: var(--ouro-50); }
.vne-conquista .barra { height: 6px; background: var(--superficie-alt); border-radius: var(--pill); overflow: hidden; }
.vne-conquista .barra i { display: block; height: 100%; background: var(--ouro-500); }

.vne-secao-titulo { font-family: var(--f-marca); font-size: 22px; margin: 0 0 2px; }
.vne-secao-sub { color: var(--texto-suave); font-size: 14px; margin: 0 0 14px; }

/* ---- Esqueleto de carregamento ----------------------------------------- */
.vne-esqueleto {
  background: linear-gradient(90deg, var(--superficie-alt) 25%,
    var(--superficie) 50%, var(--superficie-alt) 75%);
  background-size: 200% 100%;
  animation: vne-brilho 1.2s ease-in-out infinite;
  border-radius: var(--raio);
}
@keyframes vne-brilho { to { background-position: -200% 0; } }

/* ---- Reduzir movimento ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vne-abertura { display: none; }
  .vne-abertura img, .vne-abertura .slogan { animation: none; opacity: 1; transform: none; }
  .vne-caderno .novo canvas { animation: none; }
  .vne-esqueleto { animation: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* =========================================================================
   Transição de página: a splash em versão curta.

   A abertura completa (2 s) pertence à primeira visita. Entre telas, a marca
   aparece como transição rápida — fade de 180 ms na saída, ~350 ms de
   permanência na chegada, 300 ms para sair — o suficiente para dar ritmo à
   navegação sem virar pedágio. O símbolo NÃO gira aqui pelo mesmo motivo de
   sempre: a rosa dos ventos aponta para o norte real.

   O véu vive num pseudo-elemento do <html>, controlado por classes que o
   vne.js aplica: .vne-saindo (clique em link interno) e .vne-chegando
   (primeiro paint da página seguinte, marcada via sessionStorage por um
   script inline no <head> — antes do primeiro frame, para não piscar).
   ========================================================================= */
html.vne-saindo::before,
html.vne-chegando::before {
  content: "";
  position: fixed; inset: 0; z-index: 4000;
  background:
    url('/marca/visitene-simbolo.png') center calc(50% - 52px) / 132px auto no-repeat,
    url('/marca/visitene-wordmark.png') center calc(50% + 56px) / 188px auto no-repeat,
    radial-gradient(circle at 50% 42%, var(--azul-700), var(--azul-950) 72%);
}
html.vne-saindo::before {
  opacity: 0;
  animation: vne-veu-entra 180ms var(--ease) forwards;
}
html.vne-chegando::before { opacity: 1; }
html.vne-chegando.vne-transicao-fim::before {
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
@keyframes vne-veu-entra { to { opacity: 1; } }

/* A chegada congela a rolagem por um instante para o conteúdo não "andar"
   por baixo do véu enquanto ele sai. */
html.vne-chegando:not(.vne-transicao-fim) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.vne-saindo::before,
  html.vne-chegando::before { display: none; }
}

/* =========================================================================
   Atlas — a estrutura do Atlas do VisitePB, adaptada ao recorte regional:
   filtros no topo, painel de abas à esquerda, mapa grande à direita.
   ========================================================================= */
.vne-atlas-mapa {
  height: 74vh; min-height: 420px;
  border-radius: var(--raio-lg); border: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
}
.vne-atlas-painel { overflow: hidden; }
.vne-atlas-abas { max-height: calc(74vh - 44px); overflow-y: auto; }
.vne-atlas-abas .vne-atlas-lista { max-height: none; }

/* As pílulas das abas, no cromo da casa — nunca o azul do Bootstrap. */
.vne-atlas-painel .nav-pills .nav-link {
  color: var(--texto-suave); border-radius: var(--raio);
  min-height: 34px; font-weight: 600;
}
.vne-atlas-painel .nav-pills .nav-link:hover { background: var(--acento-fraco); color: var(--acento); }
.vne-atlas-painel .nav-pills .nav-link.active { background: var(--azul-800); color: #fff; }

/* O popup do Leaflet fala a mesma tipografia do resto do portal. */
.leaflet-popup-content { font-family: var(--f-ui); }
.leaflet-container a { color: var(--azul-700); }

/* =========================================================================
   Polimento global — microinterações e profundidade.
   Nada aqui muda estrutura: só dá resposta tátil ao toque e leve elevação
   às superfícies, dentro dos 120 ms da regra de motion.
   ========================================================================= */
.vne-painel { box-shadow: var(--sombra-sm); }

.vne-hero {
  background: linear-gradient(135deg, var(--azul-700) 0%, var(--azul-800) 45%, var(--azul-950) 100%);
}

.vne-btn {
  transition: background 120ms var(--ease), border-color 120ms var(--ease),
              color 120ms var(--ease), transform 120ms var(--ease),
              box-shadow 120ms var(--ease);
}
.vne-btn--primario:hover,
.vne-btn--convite:hover,
.vne-btn--carimbo:hover { transform: translateY(-1px); box-shadow: var(--sombra-sm); }
.vne-btn:active { transform: translateY(0); }

/* Sobre o navy do topo, o anel de foco azul não contrasta — vira dourado. */
.vne-topo :where(a, button, input, select, [tabindex]):focus-visible,
.vne-rodape :where(a, button):focus-visible { outline-color: var(--ouro-400); }

.vne-tabela tbody tr { transition: background 120ms var(--ease); }

/* =========================================================================
   Hero em duas metades.

   Esquerda: fixa, azul, com o convite e a busca — é onde a pessoa AGE, e
   nada que se mexe pode estar sob o cursor dela. Direita: as mesmas fotos
   de "Para conhecer", passando devagar, cada quadro com nome e UF (foto sem
   lugar é cartão-postal, não informação). Em tela estreita as fotos vão
   para cima e o texto para baixo, porque a busca deve ficar ao alcance do
   polegar.
   ========================================================================= */
.vne-hero--duplo {
  display: grid;
  /* A metade das fotos vale 0,75 da metade do texto: a imagem ficou 25%
     menor sem deixar de ser fluida — as duas colunas continuam em fracao,
     entao tudo acompanha a largura da pagina. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 3.5vw, 40px);
}
/* A marca d'água do símbolo sai daqui: com foto ao lado, ela vira ruído. */
.vne-hero--duplo::after { display: none; }
.vne-hero--duplo .lado-texto { min-width: 0; }
.vne-hero--duplo .busca { max-width: none; }

.vne-hero--duplo .lado-fotos {
  position: relative;
  /* Teto em vw para a foto nunca crescer alem do que a pagina comporta, e
     largura de 100% para encolher junto com a coluna. */
  width: 100%;
  max-width: min(100%, 42vw);
  margin-inline-start: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--azul-950);
  box-shadow: var(--sombra-lg);
}
.vne-hero--duplo .quadro {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 900ms var(--ease);
}
.vne-hero--duplo .quadro.ativo { opacity: 1; }
.vne-hero--duplo .quadro img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* A legenda precisa de contraste sobre foto de qualquer cor: o degradê é o
   que garante o texto legível sem escurecer a imagem inteira. */
.vne-hero--duplo .quadro figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(9,22,50,.92), rgba(9,22,50,0));
  color: #fff; font-size: 14px;
}
.vne-hero--duplo .quadro figcaption .nome { font-weight: 700; }
.vne-hero--duplo .quadro figcaption .lugar { color: #C9D4EA; font-size: 13px; }
.vne-hero--duplo .quadro figcaption .vne-origem .sigla {
  background: var(--ouro-500); color: var(--azul-950);
}

@media (max-width: 860px) {
  .vne-hero--duplo { grid-template-columns: 1fr; }
  /* Empilhado, a foto volta a ocupar a largura toda: o limite de 42vw so
     faz sentido enquanto ela divide a linha com o texto. */
  .vne-hero--duplo .lado-fotos { order: -1; aspect-ratio: 16 / 9; max-width: 100%; }
}
/* Sem movimento: fica o primeiro quadro, e só. */
@media (prefers-reduced-motion: reduce) {
  .vne-hero--duplo .quadro { transition: none; }
}

/* =========================================================================
   Montador de roteiro — a tela onde a viagem é desenhada.

   O formulário vira um passo a passo com trilho vertical, pela mesma razão
   por que o resultado vira linha do tempo: as duas metades da tela contam a
   mesma história (uma sequência de lugares), e a forma deve dizer isso antes
   de qualquer texto.

   Regras do guia que esta seção honra:
   · estado selecionado é AZUL — o dourado significa conquista, e escolher
     um filtro não é uma;
   · alvo de toque ≥ 44 px em tudo que é clicável de primeira classe;
   · motion nos 120 ms de toque / 240 ms de entrada, com a curva --ease;
     quem pediu "reduzir movimento" já é atendido pelo bloqueio global.
   ========================================================================= */

/* ---- As abas Sugerir / Montar eu mesmo -------------------------------- */
.vne-abas .nav-link {
  color: var(--texto-suave); border-radius: var(--raio);
  font-weight: 600; min-height: 44px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.vne-abas .nav-link:hover { background: var(--acento-fraco); color: var(--acento); }
.vne-abas .nav-link.active { background: var(--azul-800); color: #fff; }

/* ---- O passo a passo com trilho ---------------------------------------- */
.vne-passos { display: flex; flex-direction: column; }
.vne-passo { position: relative; padding: 0 0 22px 44px; }
.vne-passo::before {
  content: ""; position: absolute; left: 15px; top: 38px; bottom: -2px;
  width: 2px; background: var(--borda);
}
.vne-passo:last-of-type { padding-bottom: 6px; }
.vne-passo:last-of-type::before { content: none; }
.vne-passo > .num {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie-alt); color: var(--texto-suave);
  border: 1px solid var(--borda-forte);
  font-family: var(--f-dado); font-size: 14px; font-weight: 600;
  transition: background 120ms var(--ease), color 120ms var(--ease),
              border-color 120ms var(--ease);
}
/* O passo cumprido fica azul — feito, não premiado. */
.vne-passo[data-completo="1"] > .num {
  background: var(--azul-800); border-color: var(--azul-800); color: #fff;
}
.vne-passo > h3 {
  font-family: var(--f-marca); font-size: 17px; margin: 5px 0 6px;
  letter-spacing: -.01em;
}
.vne-passo .vne-secao-sub { margin-bottom: 10px; }

/* ---- Cartões de rádio (transporte) ------------------------------------- */
/* O rádio escondido sob o cartão inteiro: o cartão É o alvo, e o foco de
   teclado reaparece no contorno via :has(). */
.vne-cartoes-radio {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.vne-cartao-radio {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie); cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease),
              box-shadow 120ms var(--ease);
}
.vne-cartao-radio input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
}
.vne-cartao-radio .icone { font-size: 20px; line-height: 1.2; }
.vne-cartao-radio .rotulo { font-size: 14px; font-weight: 600; }
.vne-cartao-radio .meta { font-size: 12px; color: var(--texto-fraco); font-family: var(--f-dado); }
.vne-cartao-radio:hover { border-color: var(--acento); }
.vne-cartao-radio:has(input:checked) {
  border-color: var(--acento); background: var(--acento-fraco);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.vne-cartao-radio:has(input:checked) .meta { color: var(--acento); }
.vne-cartao-radio:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }

/* ---- Chips que se escolhem (interesses, estados) ------------------------ */
/* A falha que esta variante corrige: o chip marcado era indistinguível do
   desmarcado — a caixa nativa minúscula era o único indício. Agora o estado
   é o próprio chip: marcado fica azul, e o sinal de confirmação diz o mesmo
   sem depender de cor. */
.vne-chip--escolha {
  position: relative; cursor: pointer; user-select: none;
  min-height: 44px; padding: 8px 14px;
  transition: background 120ms var(--ease), border-color 120ms var(--ease),
              color 120ms var(--ease), transform 120ms var(--ease);
}
.vne-chip--escolha::before { content: none; }
.vne-chip--escolha input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
}
.vne-chip--escolha:hover { border-color: var(--acento); }
.vne-chip--escolha:active { transform: scale(.97); }
.vne-chip--escolha:has(input:checked) {
  background: var(--azul-800); border-color: var(--azul-800); color: #fff;
}
.vne-chip--escolha:has(input:checked)::before {
  content: "✓"; display: inline; width: auto; height: auto;
  background: none; border-radius: 0; font-size: 12px;
}
.vne-chip--escolha:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
.vne-chip--escolha:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.vne-chip--escolha:has(input:disabled):active { transform: none; }

/* ---- A faixa do raio ---------------------------------------------------- */
/* O trecho até o valor fica pintado: a posição no intervalo se lê de
   relance, sem procurar o polegar do controle. */
.vne-faixa input[type="range"] {
  --pct: 50%;
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer;
}
.vne-faixa input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--pill);
  background: linear-gradient(to right, var(--acento) var(--pct), var(--borda-forte) var(--pct));
}
.vne-faixa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; background: var(--superficie);
  border: 3px solid var(--acento); box-shadow: var(--sombra-sm);
  transition: transform 120ms var(--ease);
}
.vne-faixa input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.vne-faixa input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--pill); background: var(--borda-forte);
}
.vne-faixa input[type="range"]::-moz-range-progress {
  height: 6px; border-radius: var(--pill); background: var(--acento);
}
.vne-faixa input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--acento);
  box-shadow: var(--sombra-sm);
}
.vne-faixa .valor {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.vne-faixa output {
  font-family: var(--f-dado); font-variant-numeric: tabular-nums;
  font-size: 22px; color: var(--acento);
}

/* Atalhos de raio */
.vne-predef { display: flex; flex-wrap: wrap; gap: 6px; }
.vne-predef button {
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-suave); border-radius: var(--pill);
  min-height: 44px; padding: 6px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease),
              color 120ms var(--ease);
}
.vne-predef button:hover { border-color: var(--acento); color: var(--acento); }
.vne-predef button.ativo {
  background: var(--acento-fraco); border-color: var(--acento); color: var(--acento);
}

/* ---- Partida confirmada ------------------------------------------------- */
/* Escolher a partida É o passo decisivo, e a resposta precisa ter o mesmo
   peso: um cartão de confirmação, não uma nota cinza. */
.vne-partida-ok {
  display: none; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--sucesso); background: var(--sucesso-fraco);
  border-radius: var(--raio); font-size: 14px; color: var(--texto);
}
.vne-partida-ok[data-ativa="1"] { display: flex; }
.vne-partida-ok .onde { font-weight: 700; }
.vne-partida-ok .trocar {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--acento); font: inherit; font-size: 13px; font-weight: 600;
  min-height: 44px; padding: 0 8px; border-radius: var(--raio-sm);
}
.vne-partida-ok .trocar:hover { background: var(--acento-fraco); }

/* ---- Lista de sugestões da busca ---------------------------------------- */
.vne-lista-sugestoes {
  display: flex; flex-direction: column;
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra-sm); background: var(--superficie);
}
.vne-lista-sugestoes:empty { display: none; }
.vne-lista-sugestoes button {
  border: 0; border-bottom: 1px solid var(--borda);
  background: var(--superficie); text-align: left;
  min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 14px; color: var(--texto); cursor: pointer;
  transition: background 120ms var(--ease);
}
.vne-lista-sugestoes button:last-child { border-bottom: 0; }
.vne-lista-sugestoes button:hover,
.vne-lista-sugestoes button:focus-visible { background: var(--acento-fraco); }
.vne-lista-sugestoes .lugar { color: var(--texto-fraco); font-size: 12.5px; display: block; }

/* ---- A linha do tempo do trajeto ---------------------------------------- */
/* O resultado e a lista manual usam a mesma peça: nós numerados sobre um
   trilho, com a distância da perna escrita NO trilho — que é onde ela
   acontece. */
.vne-trajeto { list-style: none; margin: 12px 0 0; padding: 0; position: relative; }
.vne-trajeto::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--azul-200);
}
.vne-trajeto .parada {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 8px 0 8px 46px; min-height: 48px;
}
.vne-trajeto .parada .no {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--azul-800); color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-dado); font-size: 14px;
  border: 3px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--azul-200);
}
.vne-trajeto .parada .foto {
  width: 56px; height: 56px; flex: none; object-fit: cover;
  border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie-alt);
}
.vne-trajeto .parada .corpo { min-width: 0; }
.vne-trajeto .parada .corpo strong { display: block; font-size: 15px; }
.vne-trajeto .parada .corpo .meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--texto-suave);
}
.vne-trajeto .perna {
  position: relative; padding: 3px 0 3px 46px;
  font-family: var(--f-dado); font-size: 12px; color: var(--texto-fraco);
}
.vne-trajeto .perna::before {
  content: "↓"; position: absolute; left: 10px;
  color: var(--azul-300); font-size: 11px;
}
/* Perna acima do raio: o número muda de cor E ganha peso — quem não
   distingue matiz distingue o negrito. */
.vne-trajeto .perna[data-excede="1"] { color: var(--atencao); font-weight: 700; }

/* Ações da parada no modo manual */
.vne-trajeto .acoes { margin-left: auto; display: flex; gap: 4px; flex: none; }
.vne-trajeto .acoes button {
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--texto-suave);
  font-size: 14px; cursor: pointer;
  transition: border-color 120ms var(--ease), color 120ms var(--ease),
              background 120ms var(--ease);
}
.vne-trajeto .acoes button:hover { border-color: var(--acento); color: var(--acento); }
.vne-trajeto .acoes button.perigo:hover {
  border-color: var(--perigo); color: var(--perigo); background: var(--perigo-fraco);
}

/* ---- Botão em progresso -------------------------------------------------- */
.vne-girar {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: vne-gira .7s linear infinite;
}
@keyframes vne-gira { to { transform: rotate(360deg); } }

/* ---- O resultado chega, não aparece -------------------------------------- */
#resultado { scroll-margin-top: 90px; }
#resultado:not([hidden]) { animation: vne-chega 240ms var(--ease); }
@keyframes vne-chega {
  from { opacity: 0; transform: translateY(10px); }
}

/* Dicas sob o mapa, enquanto ainda não há roteiro */
.vne-mapa-dicas {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px;
  font-size: 13px; color: var(--texto-suave);
}
.vne-mapa-dicas span { display: inline-flex; align-items: center; gap: 6px; }

/* O mesmo estado por um segundo caminho: a classe .marcado, sincronizada por
   JS a cada mudança. O :has() cobre os navegadores novos; a classe cobre os
   que ainda não o têm — e um Chromium visto em campo que casa o seletor mas
   não repinta quando o checked muda depois do primeiro paint. */
.vne-chip--escolha.marcado {
  background: var(--azul-800); border-color: var(--azul-800); color: #fff;
}
.vne-chip--escolha.marcado::before {
  content: "✓"; display: inline; width: auto; height: auto;
  background: none; border-radius: 0; font-size: 12px;
}
.vne-cartao-radio.marcado {
  border-color: var(--acento); background: var(--acento-fraco);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.vne-cartao-radio.marcado .meta { color: var(--acento); }

/* =========================================================================
   Painel da secretaria estadual — o somatório dos municípios.

   Duas peças novas mandam aqui: o PLACAR (números que respondem às perguntas
   da secretaria) e o RECORTE ATIVO (a faixa que diz, em palavras, o que está
   sendo somado). A segunda existe porque um painel que muda de número sem
   dizer por quê é um painel em que ninguém confia.
   ========================================================================= */

/* ---- O placar ---------------------------------------------------------- */
.vne-placar {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.vne-placar .item {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: 16px;
  box-shadow: var(--sombra-sm);
}
.vne-placar .vne-numero { font-size: 28px; }
.vne-placar .vne-numero .sufixo { font-size: 18px; color: var(--texto-fraco); }
.vne-placar .vne-numero-rotulo { line-height: 1.3; }

/* ---- A faixa do recorte ativo ------------------------------------------ */
.vne-recorte-ativo {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--raio);
  background: var(--acento-fraco); border: 1px solid var(--azul-200);
  font-size: 14px;
}
.vne-recorte-ativo .rotulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-fraco);
}
.vne-recorte-ativo strong { font-family: var(--f-marca); font-size: 17px; color: var(--acento); }
.vne-recorte-ativo .detalhe { color: var(--texto-suave); }
/* Recorte estreito muda a cor da faixa: a diferença entre «o estado inteiro»
   e «um município» precisa ser vista antes de ser lida. */
.vne-recorte-ativo[data-tipo="municipio"] {
  background: var(--ouro-50); border-color: var(--ouro-300);
}
.vne-recorte-ativo[data-tipo="municipio"] strong { color: var(--ouro-800); }
.vne-recorte-ativo[data-tipo="regiao"] {
  background: var(--atencao-fraco); border-color: var(--atencao);
}
.vne-recorte-ativo[data-tipo="regiao"] strong { color: var(--atencao); }

/* ---- Cartões dos temas -------------------------------------------------- */
.vne-tema-cartao {
  border-left: 4px solid var(--tema-cor, var(--acento));
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease),
              transform 120ms var(--ease);
}
.vne-tema-cartao:hover {
  box-shadow: var(--sombra); transform: translateY(-2px);
  border-color: var(--tema-cor, var(--acento));
}
.vne-tema-cartao .vne-numero { color: var(--tema-cor, var(--acento)); }

/* ---- Capa do painel temático -------------------------------------------- */
.vne-tema-capa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: clamp(16px, 3vw, 26px);
  border-radius: var(--raio-lg);
  background: linear-gradient(135deg, var(--azul-800), var(--azul-950));
  border-left: 6px solid var(--tema-cor, var(--ouro-500));
  color: #fff;
}
.vne-tema-capa .vne-secao-titulo { color: #fff; }
.vne-tema-capa .vne-btn--secundario {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35);
}
.vne-tema-capa .vne-btn--secundario:hover { background: rgba(255,255,255,.2); }

/* ---- Barra de composição ------------------------------------------------ */
.vne-barra {
  height: 6px; border-radius: var(--pill);
  background: var(--superficie-alt); overflow: hidden; margin: 4px 0 3px;
}
.vne-barra i { display: block; height: 100%; border-radius: var(--pill); }

/* ---- Filtro de recorte --------------------------------------------------- */
.vne-filtro-recorte { padding: 16px; }
.vne-filtro-recorte select:disabled { opacity: .5; cursor: not-allowed; }

/* Tabela larga rola dentro do próprio painel — a página nunca rola de lado. */
.vne-tabela-rolagem { overflow-x: auto; max-height: 60vh; overflow-y: auto; }
.vne-tabela-rolagem thead th {
  position: sticky; top: 0; z-index: 1;
}

/* ---- Convite de localização ---------------------------------------------
   Uma barra discreta no rodapé da janela, não um diálogo: ela informa e
   oferece, mas não interrompe. Some com «agora não» e não volta na sessão. */
.vne-convite-geo {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1040;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 720px; margin-inline: auto;
  padding: 12px 16px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda-forte); border-left: 4px solid var(--acento);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-lg);
  font-size: 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.vne-convite-geo[data-aberta="1"] { opacity: 1; transform: translateY(0); }
.vne-convite-geo .icone { font-size: 20px; flex: none; }
.vne-convite-geo .texto { flex: 1 1 260px; line-height: 1.45; }
.vne-convite-geo .dispensar {
  border: 0; background: none; cursor: pointer;
  color: var(--texto-fraco); font: inherit; font-size: 13px;
  min-height: 44px; padding: 0 10px; border-radius: var(--raio-sm);
}
.vne-convite-geo .dispensar:hover { background: var(--superficie-alt); color: var(--texto); }
@media (prefers-reduced-motion: reduce) {
  .vne-convite-geo { transition: none; opacity: 1; transform: none; }
}

/* ---- Cartões e linhas que abrem a lista --------------------------------
   Todo número do painel é uma porta. O ponteiro, a elevação no hover e o
   "ver a lista →" existem para dizer isso antes do clique — número que
   parece estático não convida ninguém a conferir. */
a.item {
  display: block; text-decoration: none; color: inherit;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease),
              transform 120ms var(--ease);
}
a.item:hover {
  border-color: var(--acento); box-shadow: var(--sombra); transform: translateY(-2px);
}
a.item:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.vne-placar .abrir {
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--acento);
  opacity: 0; transform: translateY(-2px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
}
a.item:hover .abrir, a.item:focus-visible .abrir { opacity: 1; transform: translateY(0); }
/* Sem hover (toque), o convite fica sempre visível: no celular não existe
   estado intermediário entre "não toquei" e "abri". */
@media (hover: none) {
  .vne-placar .abrir { opacity: 1; transform: none; }
}

.vne-linha-clicavel { transition: background 120ms var(--ease); border-radius: var(--raio-sm); }
.vne-linha-clicavel:hover { background: var(--acento-fraco); }
.vne-linha-clicavel:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Números dentro de tabela viram links sem perder o alinhamento tabular. */
.vne-tabela td.num a { text-decoration: none; color: var(--acento); font-weight: 600; }
.vne-tabela td.num a:hover { text-decoration: underline; }

/* =======================================================================
   PAINEL DA SECRETARIA — criar rota e administrar a equipe
   =======================================================================

   Duas telas que fazem a secretaria sair da posicao de espectadora: ate aqui
   ela so podia publicar o que outra pessoa montou, e so podia criar uma
   credencial que via tudo. Ambas escrevem no portal publico, e o desenho
   trata as duas com o peso disso — nada de acao destrutiva a um clique de
   distancia, nada de permissao concedida sem a pessoa ler o que ela abre.
   ----------------------------------------------------------------------- */

/* ---- Cabeca de tela com acao principal a direita ----------------------- */
.vne-editor-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.vne-editor-cabeca > div:first-child { max-width: 68ch; }
.vne-editor-cabeca__estado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.vne-voltar {
  display: inline-block; margin-bottom: 4px;
  font-size: 13px; font-weight: 600; color: var(--texto-fraco); text-decoration: none;
}
.vne-voltar:hover { color: var(--acento); }

.vne-linha-meta { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }
.vne-opcional {
  font-size: 11px; font-weight: 500; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .04em; margin-left: 4px;
}

/* ---- Abas de origem (rotas da secretaria x de visitantes) -------------- */
.vne-abas-origem { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vne-abas-origem a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); color: var(--texto-suave);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color 120ms var(--ease), color 120ms var(--ease), background 120ms var(--ease);
}
.vne-abas-origem a:hover { border-color: var(--borda-forte); color: var(--texto); }
.vne-abas-origem a.ativa { border-color: var(--acento); color: var(--acento); background: var(--acento-fraco); }
.vne-abas-origem .vne-abas__conta {
  font-variant-numeric: tabular-nums; font-size: 12px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--superficie-alt); color: var(--texto-fraco);
}
.vne-abas-origem a.ativa .vne-abas__conta { background: var(--acento); color: #fff; }

/* ---- Coluna que acompanha a rolagem ------------------------------------ */
/* A lista de paradas cresce; a busca e o mapa nao podem sair de vista junto
   com ela. Abaixo de lg as colunas empilham e o grude perde sentido. */
@media (min-width: 992px) {
  .vne-grudado { position: sticky; top: 16px; }
}

/* ---- Campo com sufixo (km) -------------------------------------------- */
.vne-campo-sufixo { position: relative; }
.vne-campo-sufixo > span {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--texto-fraco); pointer-events: none;
}
.vne-campo-sufixo > input { padding-right: 36px; }

/* ---- Resumo vivo da rota ----------------------------------------------- */
.vne-resumo-rota {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--texto-suave);
}
.vne-resumo-rota strong {
  font-variant-numeric: tabular-nums; color: var(--texto); font-size: 15px;
}

/* ---- A lista de paradas do editor -------------------------------------- */
.vne-trajeto--editor { list-style: none; margin: 0; padding: 0; }

.vne-parada-editor {
  position: relative;
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 12px; align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}
.vne-parada-editor:last-child { border-bottom: 0; }

.vne-parada-num {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul-800); color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vne-parada-editor.excedida .vne-parada-num { background: var(--atencao); }

.vne-parada-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vne-parada-corpo > strong { font-size: 15px; line-height: 1.3; }
.vne-parada-onde { font-size: 13px; color: var(--texto-suave); }
.vne-perna { font-size: 12px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.vne-perna.alerta { color: var(--atencao); font-weight: 600; }

.vne-parada-acoes { display: flex; gap: 4px; }
.vne-parada-acoes button {
  width: 34px; height: 34px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-suave); font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color 120ms var(--ease), color 120ms var(--ease);
}
.vne-parada-acoes button:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.vne-parada-acoes button[data-acao="remover"]:hover { border-color: var(--perigo); color: var(--perigo); }
.vne-parada-acoes button:disabled { opacity: .35; cursor: default; }
.vne-parada-acoes button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---- Estado vazio ------------------------------------------------------ */
.vne-vazio {
  margin: 0; padding: 18px;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie-alt);
  font-size: 14px; color: var(--texto-suave);
}
.vne-vazio--erro {
  border-color: var(--perigo); border-style: solid;
  background: var(--perigo-fraco); color: var(--perigo); font-weight: 600;
}

/* ---- Busca de pontos --------------------------------------------------- */
.vne-escopo-busca { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.vne-resultados { margin-top: 12px; max-height: 360px; overflow-y: auto; }
.vne-resultado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--borda);
}
.vne-resultado:last-child { border-bottom: 0; }
.vne-resultado > div { display: flex; flex-direction: column; min-width: 0; }
.vne-resultado strong { font-size: 14px; line-height: 1.3; }
.vne-resultado span { font-size: 12px; color: var(--texto-fraco); }
.vne-resultado .vne-btn { flex-shrink: 0; }
.vne-ja-esta { font-size: 12px; color: var(--sucesso); font-weight: 600; flex-shrink: 0; }
.vne-buscando { margin: 12px 0 0; font-size: 13px; color: var(--texto-fraco); }

/* ---- Mapa do editor ---------------------------------------------------- */
.vne-mapa-editor {
  height: 320px; border-radius: var(--raio);
  border: 1px solid var(--borda); overflow: hidden;
}
.vne-alfinete { background: none; border: 0; }
.vne-alfinete > span {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azul-800); color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font: 700 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ---- Barra de acao ----------------------------------------------------- */
/* Grudada no rodape porque a lista de paradas fica longa: rolar ate o fim
   para achar "salvar" e a forma mais comum de perder trabalho num editor. */
.vne-barra-acao {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-top: 4px;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 -2px 12px rgba(12,22,50,.08);
}
.vne-publicar { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.vne-publicar input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.vne-publicar span { display: flex; flex-direction: column; }
.vne-publicar strong { font-size: 14px; }
.vne-publicar small { font-size: 12px; color: var(--texto-fraco); }

/* =======================================================================
   EQUIPE — permissoes e a senha que aparece uma vez
   ======================================================================= */

.vne-senha-nova {
  margin-bottom: 16px; padding: 16px;
  border: 1px solid var(--sucesso); border-left-width: 4px;
  border-radius: var(--raio); background: var(--sucesso-fraco);
}
.vne-senha-nova__cabeca { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.vne-senha-nova__cabeca strong { font-size: 15px; }
.vne-senha-nova__cabeca span { font-size: 13px; color: var(--texto-suave); }
.vne-senha-nova__dados {
  display: flex; gap: 24px; flex-wrap: wrap; margin: 0 0 12px;
}
.vne-senha-nova__dados dt {
  font-size: 11px; font-weight: 600; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .04em;
}
.vne-senha-nova__dados dd { margin: 2px 0 0; font-size: 14px; }
.vne-senha-valor {
  font-size: 17px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px; border-radius: var(--raio-sm);
  background: var(--superficie); border: 1px solid var(--borda);
  /* Selecionavel de proposito: quem nao usa o botao copia a mao. */
  user-select: all;
}

.vne-pessoa {
  padding: 16px 0; border-bottom: 1px solid var(--borda);
}
.vne-pessoa:last-child { border-bottom: 0; padding-bottom: 0; }
.vne-pessoa.bloqueada { opacity: .62; }
.vne-pessoa__cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.vne-pessoa__cabeca > div:first-child { display: flex; flex-direction: column; }
.vne-pessoa__cabeca strong { font-size: 16px; }
.vne-pessoa__papel { font-size: 12px; color: var(--texto-fraco); }
.vne-pessoa__nota {
  margin: 0; padding: 12px; border-radius: var(--raio);
  background: var(--superficie-alt);
  font-size: 13px; color: var(--texto-suave);
}
.vne-pessoa__acoes { margin-top: 12px; }
.vne-pessoa__rodape {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda);
}

/* ---- A grade de permissoes --------------------------------------------- */
.vne-permissoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px; border: 0; padding: 0; margin: 0;
}
.vne-permissoes--compacta { grid-template-columns: 1fr; }
.vne-permissoes > legend {
  float: left; width: 100%; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .04em;
}
.vne-permissoes[disabled] { opacity: .7; }

.vne-permissao {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie);
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.vne-permissao:hover { border-color: var(--borda-forte); }
.vne-permissao input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
.vne-permissao__corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vne-permissao__corpo strong { font-size: 14px; line-height: 1.3; }
.vne-permissao__corpo small { font-size: 12px; color: var(--texto-fraco); line-height: 1.35; }

/* Marcada: a borda e o fundo mudam. `:has()` cobre o caso normal; a classe
   `.marcada`, que o script mantem em dia, cobre navegador sem suporte. */
.vne-permissao.marcada,
.vne-permissao:has(input:checked) {
  border-color: var(--acento); background: var(--acento-fraco);
}
.vne-permissao:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Sensivel: mexe em decisao, contrato ou credencial. O aviso e visual E
   textual — cor sozinha nao e informacao para quem nao a distingue. */
.vne-permissao.sensivel.marcada,
.vne-permissao.sensivel:has(input:checked) {
  border-color: var(--atencao); background: var(--atencao-fraco);
}
.vne-permissao__selo {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--atencao-fraco); color: var(--atencao);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
}

.vne-permissao input:disabled { cursor: default; }
.vne-permissoes[disabled] .vne-permissao { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .vne-abas-origem a, .vne-parada-acoes button, .vne-permissao { transition: none; }
}

/* =======================================================================
   O MAPA DO EDITOR DE ROTAS
   =======================================================================

   Deixou de ser ilustracao do que ja foi escolhido e passou a ser a segunda
   porta de entrada: quem esta desenhando um percurso precisa ver o que existe
   ENTRE uma parada e a seguinte, e essa pergunta a busca por texto nao
   responde.
   ----------------------------------------------------------------------- */

.vne-mapa-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.vne-mapa-botoes .vne-btn { padding: 6px 10px; font-size: 12px; min-height: 34px; }

.vne-grupos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.vne-mapa-envelope { position: relative; }

.vne-mapa-editor {
  height: 420px; border-radius: var(--raio);
  border: 1px solid var(--borda); overflow: hidden;
}

/* O selo conta o que o mapa esta mostrando e o que ele CORTOU. Um mapa que
   reduz 2.000 pontos a 400 em silencio ensina a confiar numa cobertura que
   nao existe. */
.vne-mapa-selo {
  position: absolute; left: 10px; bottom: 10px; z-index: 500;
  max-width: calc(100% - 20px);
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); border: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-suave);
  box-shadow: 0 1px 4px rgba(12,22,50,.12);
  pointer-events: none;
}
.vne-mapa-selo:empty { display: none; }

/* ---- Ampliar: o mapa toma a tela --------------------------------------
   Sobreposicao em vez de crescer na coluna: a coluna tem 5/12 da largura, e
   um mapa de trabalho precisa de mais que isso. A lista de paradas continua
   viva atras e se atualiza sozinha — o que se adiciona aqui ja esta la
   quando a sobreposicao fecha. */
.vne-painel-mapa--amplo {
  position: fixed; inset: 12px; z-index: 1050;
  margin: 0; overflow: auto;
  box-shadow: 0 12px 48px rgba(12,22,50,.28);
}
.vne-painel-mapa--amplo .vne-mapa-editor { height: calc(100vh - 190px); min-height: 320px; }
.vne-painel-mapa--amplo .vne-mapa-dicas { display: none; }

/* ---- Alfinete de candidato -------------------------------------------- */
.vne-alfinete-cand { background: none; border: 0; }
.vne-alfinete-cand > span {
  display: block; width: 14px; height: 14px; margin: 1px;
  border-radius: 50%;
  background: var(--azul-400); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform 120ms var(--ease), background 120ms var(--ease);
}
/* Com foto tem mais chance de virar parada publicavel: a moldura dourada e
   uma pista de qualidade, nao de categoria. */
.vne-alfinete-cand.com-foto > span { background: var(--ouro-500); }
.vne-alfinete-cand:hover > span { transform: scale(1.35); }

/* Ja esta na rota: para de se oferecer. */
.vne-alfinete-cand.na-rota > span {
  background: var(--azul-900);
  box-shadow: 0 0 0 3px rgba(48,97,199,.35), 0 1px 3px rgba(0,0,0,.3);
}

/* ---- Balao do ponto ---------------------------------------------------- */
.vne-balao { display: flex; flex-direction: column; gap: 3px; }
.vne-balao > strong { font-size: 14px; line-height: 1.3; }
.vne-balao__onde { font-size: 12px; color: var(--texto-suave); }
.vne-balao__cat { font-size: 12px; color: var(--texto-fraco); }
.vne-balao .vne-btn { margin-top: 8px; width: 100%; justify-content: center; }

/* O Leaflet impoe a propria tipografia no balao; sem isto o texto do popup
   destoa do resto do painel. */
.leaflet-popup-content { margin: 12px 14px; font-family: inherit; }

.vne-resultado__acoes { display: flex; gap: 6px; flex-shrink: 0; }
.vne-resultado__acoes .vne-btn { padding: 6px 10px; font-size: 12px; min-height: 34px; }

@media (prefers-reduced-motion: reduce) {
  .vne-alfinete-cand > span { transition: none; }
}

/* =======================================================================
   GESTAO TERRITORIAL
   =======================================================================

   O painel conta; esta area acompanha. E onde "401 registros de economia
   solidaria em Patos" deixa de ser numero e vira 401 fichas com responsavel,
   situacao e o que a secretaria sabe e nao publica.

   Uma regra visual atravessa tudo: o que e INTERNO se anuncia. Campo interno
   tem borda tracejada e selo; painel interno tem fundo proprio. Quem digita
   precisa saber o que sai daqui sem ter de lembrar de uma regra.
   ----------------------------------------------------------------------- */

/* ---- Os cartoes de dominio -------------------------------------------- */
.vne-gestao-grade {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.vne-dominio {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; background: var(--superficie);
  border: 1px solid var(--borda); border-top: 3px solid var(--cor, var(--acento));
  border-radius: var(--raio);
}
.vne-dominio > header { display: flex; gap: 12px; align-items: flex-start; }
.vne-dominio__icone { font-size: 26px; line-height: 1; }
.vne-dominio h2 { margin: 0; font-size: 17px; }
.vne-dominio header p { margin: 2px 0 0; font-size: 13px; color: var(--texto-suave); }

.vne-progresso { display: flex; align-items: center; gap: 10px; }
.vne-progresso__trilho {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--superficie-alt); overflow: hidden;
}
.vne-progresso__feito {
  display: block; height: 100%; border-radius: 999px;
  background: var(--cor, var(--acento));
  transition: width 300ms var(--ease);
}
.vne-progresso__num {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--texto-suave); min-width: 48px; text-align: right;
}

.vne-dominio__numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0;
}
.vne-dominio__numeros > a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px; border-radius: var(--raio-sm);
  text-decoration: none; color: inherit;
}
.vne-dominio__numeros dt {
  font-size: 11px; color: var(--texto-fraco); font-weight: 500;
}
.vne-dominio__numeros dd {
  margin: 0; font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
/* "A mapear" e a fila de trabalho: e o numero que a pessoa procura ao abrir. */
.vne-dominio__numeros a.destaque dd { color: var(--atencao); }

.vne-dominio > footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

.vne-nota-privacidade p {
  font-size: 13px; color: var(--texto-suave); line-height: 1.55;
}
.vne-nota-privacidade p + p { margin-top: 8px; }

/* ---- Placar do dominio ------------------------------------------------- */
.vne-placar--gestao { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- Filtro largo ------------------------------------------------------ */
.vne-filtro-gestao .vne-campo label { font-size: 12px; }

/* ---- A lista de itens -------------------------------------------------- */
.vne-itens { display: flex; flex-direction: column; }

.vne-item-gestao {
  display: grid; grid-template-columns: 6px 1fr auto;
  gap: 12px; align-items: center;
  padding: 11px 8px; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: inherit;
  transition: background 120ms var(--ease);
}
.vne-item-gestao:last-child { border-bottom: 0; }
.vne-item-gestao:hover { background: var(--acento-fraco); }
.vne-item-gestao:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

/* A marca lateral e a leitura de relance: sem ficha, aberta, verificada. */
.vne-item-gestao__marca {
  align-self: stretch; border-radius: 3px; background: var(--borda-forte);
}
.vne-item-gestao[data-estado="sem"] .vne-item-gestao__marca { background: var(--n-300); }
.vne-item-gestao[data-estado="rascunho"] .vne-item-gestao__marca { background: var(--ouro-500); }
.vne-item-gestao[data-estado="verificada"] .vne-item-gestao__marca { background: var(--sucesso); }

.vne-item-gestao__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vne-item-gestao__corpo > strong { font-size: 15px; line-height: 1.3; }
.vne-item-gestao__corpo .onde { font-size: 13px; color: var(--texto-suave); }
.vne-item-gestao__corpo .marcas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }

/* A linha deixou de ser um link inteiro: o corpo abre a ficha, e ao lado
   ficam as duas decisoes de triagem. Um link envolvendo um formulario seria
   HTML invalido, e um botao dentro de link nao recebe o clique. */
.vne-item-gestao__corpo { text-decoration: none; color: inherit; }
.vne-item-gestao__corpo:hover > strong { color: var(--acento); }
.vne-item-gestao__corpo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.vne-item-gestao__acao { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.vne-item-gestao__acao .vne-btn { padding: 6px 10px; font-size: 12px; min-height: 34px; }
/* "Nao e daqui" e reversivel e nada destrutivo — mas tambem nao deve competir
   com "abrir a ficha", que e a acao que a pessoa veio fazer. */
.vne-item-gestao__acao form .vne-btn { opacity: .75; }
.vne-item-gestao:hover .vne-item-gestao__acao form .vne-btn,
.vne-item-gestao__acao form .vne-btn:focus-visible { opacity: 1; }

@media (max-width: 575px) {
  .vne-item-gestao { grid-template-columns: 6px 1fr; }
  .vne-item-gestao__acao { grid-column: 2; margin-top: 6px; }
}

.vne-selo[data-estado="interno"] { background: var(--ia-fundo); color: var(--ia-texto); }
.vne-selo[data-estado="fora"] { background: var(--superficie-alt); color: var(--texto-fraco); }

/* ---- Mapa da gestao ---------------------------------------------------- */
.vne-legenda-mapa {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 12px; color: var(--texto-suave);
}
.vne-legenda-mapa i {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle; border: 1px solid #fff;
}
.vne-legenda-mapa i[data-estado="verificada"] { background: var(--sucesso); }
.vne-legenda-mapa i[data-estado="rascunho"]   { background: var(--ouro-500); }
.vne-legenda-mapa i[data-estado="sem"]        { background: var(--n-400); }

.vne-pino-gestao { background: none; border: 0; }
.vne-pino-gestao > span {
  display: block; width: 14px; height: 14px; margin: 1px;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  background: var(--n-400);
}
.vne-pino-gestao > span[data-estado="verificada"] { background: var(--sucesso); }
.vne-pino-gestao > span[data-estado="rascunho"]   { background: var(--ouro-500); }

.vne-mapa-ficha {
  height: 300px; border-radius: var(--raio);
  border: 1px solid var(--borda); overflow: hidden;
}

/* ---- A ficha: o que e interno se anuncia ------------------------------- */
.vne-campo--interno > label { color: var(--ia-texto); }
.vne-campo--interno input,
.vne-campo--interno select,
.vne-campo--interno textarea {
  border-style: dashed; border-color: var(--ia-texto);
  background: color-mix(in srgb, var(--ia-fundo) 35%, var(--superficie));
}
/* Reserva para navegador sem color-mix: o fundo lilas puro ja distingue. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .vne-campo--interno input,
  .vne-campo--interno select,
  .vne-campo--interno textarea { background: var(--ia-fundo); }
}

.vne-painel--interno {
  border-left: 3px solid var(--ia-texto);
  background: color-mix(in srgb, var(--ia-fundo) 22%, var(--superficie));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .vne-painel--interno { background: var(--ia-fundo); }
}

.vne-multi { display: flex; gap: 6px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .vne-progresso__feito, .vne-item-gestao, .vne-item-gestao__acao { transition: none; }
}

/* =======================================================================
   ENTRAR COM O GOOGLE + DOCUMENTOS LEGAIS
   ======================================================================= */

/* ---- O separador "ou" -------------------------------------------------- */
.vne-ou {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  color: var(--texto-fraco); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.vne-ou::before, .vne-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--borda);
}

/* ---- O botao do Google ------------------------------------------------
   Fundo branco, borda cinza, logotipo colorido: e o guia de identidade do
   Google, e ele nao e opcional — um botao fora do padrao pode ser recusado
   na revisao da tela de consentimento. Por isso as cores aqui sao literais
   e nao usam os tokens do portal: elas pertencem ao Google, nao a nos. */
.vne-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 10px 16px;
  background: #FFFFFF; color: #1F1F1F;
  border: 1px solid #DADCE0; border-radius: var(--raio);
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease),
              box-shadow 120ms var(--ease);
}
.vne-btn-google:hover {
  background: #F8F9FA; border-color: #D2D5D9;
  box-shadow: 0 1px 3px rgba(60,64,67,.16);
  color: #1F1F1F;
}
.vne-btn-google:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.vne-btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* O botao mantem o fundo branco no tema escuro: o logotipo colorido do
   Google foi desenhado para fundo claro e perde contraste sobre escuro. */

.vne-nota-aceite {
  margin: 10px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--texto-fraco);
}
.vne-nota-aceite a { color: var(--acento); }

/* ---- Termos e politica ------------------------------------------------- */
.vne-legal { max-width: 78ch; }
.vne-legal h2 {
  margin-top: 28px; padding-top: 4px;
  font-size: 17px; font-weight: 700; color: var(--texto);
}
.vne-legal p, .vne-legal li {
  font-size: 15px; line-height: 1.65; color: var(--texto-suave);
}
.vne-legal ul { padding-left: 20px; }
.vne-legal li { margin-bottom: 8px; }
.vne-legal strong { color: var(--texto); }
.vne-legal a { color: var(--acento); }

/* A ressalva do consumidor nao pode passar como letra miuda: ela e o que
   torna a clausula de foro valida. */
.vne-legal__nota {
  padding: 12px 14px; border-left: 3px solid var(--atencao);
  background: var(--atencao-fraco); border-radius: var(--raio-sm);
  font-size: 14px !important;
}

.vne-legal__rodape {
  font-size: 12px; color: var(--texto-fraco);
}

@media (prefers-reduced-motion: reduce) {
  .vne-btn-google { transition: none; }
}