/* ===========================================================================
   eco-map3d.css — mapa 3D interativo do Brasil (js/eco-map3d.js)
   Autossuficiente: serve revendas.html e global.html. Não depende de tokens.
   Fix de LEITURA: tooltip com fundo SÓLIDO (alto contraste) + zoom separa os
   pontos aglomerados do Sudeste — antes se sobrepunham e ficavam ilegíveis.
   =========================================================================== */
.eco-map3d{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;min-height:360px;margin:0 auto;
  min-width:0;touch-action:pan-y;cursor:grab}

/* ---- variante LARGA (revendas.html) --------------------------------------
   Sérgio (16/07): "colocar o mapa no widget inteiro, não num quadrado que
   limita a potência desse recurso". Quando o mapa é o CONTEÚDO do painel (e não
   uma coluna ao lado de um card), ele ocupa o painel todo. A câmera é
   PerspectiveCamera(fov 38 VERTICAL) a distância fixa: então quem manda no
   tamanho do Brasil na tela é a ALTURA. Por isso a variante cresce em altura
   (svh, com teto) — largura extra só dá respiro lateral p/ arrastar/girar. */
.eco-map3d--wide{max-width:none;aspect-ratio:auto;height:clamp(420px,62svh,660px);min-height:420px}
.eco-map3d.is-grabbing{cursor:grabbing}
.eco-map3d.is-hover{cursor:pointer}
.eco-map3d-canvas{position:absolute;inset:0;display:block}

/* fallback (imagem) enquanto não há WebGL / motor ativo */
.eco-map3d-fallback{width:100%;max-width:360px;height:auto;display:block;margin:auto}
.eco-map3d.is-3d .eco-map3d-fallback{display:none}

/* ---- tooltip: vidro LEGÍVEL (fundo sólido escuro + blur) ------------------- */
.eco-map3d-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;
  transform:translate(16px,-50%) scale(.96);opacity:0;min-width:190px;max-width:270px;
  padding:14px 17px;border-radius:16px;
  background:rgba(9,38,29,.92);
  border:1px solid rgba(169,207,91,.55);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .18s ease,transform .18s ease}
.eco-map3d-tip.on{opacity:1;transform:translate(16px,-50%) scale(1)}
/* miniatura no hover (board: "pins para abrir imagens e descritivos") */
.eco-map3d-tip-img{display:block;width:100%;height:74px;object-fit:cover;border-radius:9px;margin-bottom:9px}
.eco-map3d-tip-city{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:1.4px;text-transform:uppercase;color:#C7EE86}
.eco-map3d-tip-list{list-style:none;margin:9px 0 0;padding:0}
.eco-map3d-tip-list li{font-size:14px;line-height:1.45;color:#fff;font-weight:500}
.eco-map3d-tip-list li+li{margin-top:5px}
.eco-map3d-tip-list li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#A9CF5B;margin-right:8px;vertical-align:middle}
.eco-map3d-tip-cta{display:block;margin-top:11px;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:#C7EE86}
.eco-map3d-tip-badge{display:inline-block;margin-top:11px;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:#0a2a1e;background:#C7EE86;padding:3px 9px;border-radius:100px}

/* ---- controles de zoom ---------------------------------------------------- */
.eco-map3d-ctrls{position:absolute;right:12px;bottom:12px;z-index:7;display:flex;flex-direction:column;gap:7px}
.eco-map3d-btn{width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.22);
  background:rgba(9,38,29,.72);color:#EAFFD0;font-size:19px;font-weight:700;line-height:1;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.6);transition:transform .18s ease,background .18s ease,border-color .18s}
.eco-map3d-btn:hover{background:rgba(114,159,40,.55);border-color:rgba(199,238,134,.8);transform:translateY(-1px)}
.eco-map3d-btn:active{transform:translateY(0) scale(.94)}
.eco-map3d-btn:focus-visible{outline:2px solid #C7EE86;outline-offset:2px}

/* ---- dica (some depois do 1º zoom) --------------------------------------- */
.eco-map3d-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;pointer-events:none;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;color:rgba(255,255,255,.86);white-space:nowrap;
  padding:6px 13px;border-radius:100px;background:rgba(9,38,29,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:opacity .3s ease}
.eco-map3d.is-zoomed .eco-map3d-hint{opacity:0}

/* legenda opcional sob o mapa (reutilizada do global) ----------------------- */
.eco-map3d-cap{display:block;max-width:440px;margin:14px auto 0;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.78);text-align:center}
.eco-map3d-cap b{color:#fff;font-weight:700;white-space:nowrap}
.eco-map3d-cap a{color:#C7EE86;font-weight:700;text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(169,207,91,.45)}
.eco-map3d-cap a:hover{border-bottom-color:#C7EE86}
.eco-map3d-dot{display:inline-block;vertical-align:middle;width:9px;height:9px;border-radius:50%;
  margin-right:7px;background:#C7EE86;box-shadow:0 0 10px 2px rgba(169,207,91,.85)}

@media (max-width:900px){
  /* 🔴 11/08/2026 — ESTA LINHA ERA O BUG DE CELULAR (Henrique: "no cel ainda faltam
     alguns ajustes"). `min-height` + `aspect-ratio:1/1` TRANSFERE a altura mínima
     para uma LARGURA mínima: o box passava a ter min-content de 320px. Como a
     coluna do grid era `1fr` (= minmax(auto,1fr), piso no min-content), o track
     virava 320px fixos dentro de um painel de 256px — e o painel tem
     `overflow:hidden` por causa do círculo decorativo, então em vez de rolar, o
     conteúdo era COMIDO: título, legenda e parágrafo cortados no meio da palavra.
     Medido em 320/360/375/390/412px; só ≥430px escapava.
     Correção: `min-height:0`. O culpado era a ALTURA MÍNIMA, não o aspect-ratio —
     sem piso de altura não há o que transferir, e o `aspect-ratio:1/1` da regra
     base segue mandando: o box continua QUADRADO (só menor), que é o enquadramento
     para o qual a câmera do three foi calibrada. Tentei antes `height:min(78vw,…)`
     com `aspect-ratio:auto` e ficou RETRATO (256×281) — a câmera tem fov vertical
     fixo, então box mais alto que largo corta o Brasil nas laterais. */
  .eco-map3d{max-width:380px;min-height:0}
  .eco-map3d--wide{max-width:none;height:clamp(360px,58svh,520px);min-height:360px}
  .eco-map3d-hint{font-size:10.5px}
}
@media (max-width:560px){
  .eco-map3d--wide{height:clamp(320px,52svh,430px);min-height:320px}
  /* 11/08/2026 — a dica no celular tinha DOIS defeitos, vistos no print de 360px:
     (1) `white-space:nowrap` num box de ~256px = pílula mais larga que o mapa,
         cortada pelo painel; (2) centrada em `bottom:12px`, batia de frente nos
         botões +/−/↻ (que ficam em right:12/bottom:12). No desktop sobra largura e
         nada disso aparece — é defeito exclusivo de tela estreita.
     Fica na BASE À ESQUERDA: sai da frente da coluna de botões (que é à direita) e
     não sobe para o topo, onde o header fixo passa por cima quando a seção entra na
     tela — tentei o topo primeiro e o print mostrou a 1ª linha da pílula escondida
     atrás do header. `max-width` reserva a faixa dos botões. */
  .eco-map3d-hint{left:12px;bottom:12px;transform:none;white-space:normal;text-align:left;
    max-width:calc(100% - 74px);line-height:1.3;padding:5px 11px}
}
@media (prefers-reduced-motion:reduce){
  .eco-map3d-tip{transition:none}
}