/* public/css/fm/route-mapa-da-mina.css
 *
 * Rota /mapa-da-mina reconstruída (fatia 3). React-pura sobre PageShell. Reúne:
 *  (1) hero escuro (espelha route-hub.css);
 *  (2) layout do mapa+sidebar portado do skin (femtov1.webflow.css), tokens→literais;
 *  (3) bloco .mm-* (produto próprio do mapa) migrado de injectStyles() do módulo.
 * O Mapa da Mina é produto próprio: a UI .mm-* fica como está (paridade, sem redesign).
 */

/* —— (1) hero escuro (imagem + scrim) full-screen —— */
.fm-mina-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fm-white);
  border-radius: var(--fm-radius-screen) var(--fm-radius-screen) 0 0;
  padding: var(--fm-space-16) var(--fm-space-6);
}
.fm-mina-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.fm-mina-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1, 18, 34, 0.55), rgba(1, 18, 34, 0.85));
}
.fm-mina-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fm-space-4);
  max-width: 46rem;
}
.fm-mina-hero-inner .fm-display {
  color: var(--fm-white);
}
/* —— (1b) intro: section branca que SOBREPÕE o hero (overlap = -radius), como o hub.
   Título + parágrafo + 3 stats. —— */
.fm-mina-intro {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--fm-radius-screen));
  background: var(--fm-white);
  border-top-left-radius: var(--fm-radius-screen);
  border-top-right-radius: var(--fm-radius-screen);
  padding: var(--fm-space-24) var(--fm-space-6) var(--fm-space-16);
  text-align: center;
}
.fm-mina-intro-inner {
  box-sizing: border-box;
  max-width: var(--fm-max-width);
  margin: 0 auto;
}
.fm-mina-intro-title {
  margin: 0 auto;
  max-width: 52rem;
  font-family: var(--fm-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  color: var(--fm-navy);
}
.fm-mina-intro-sub {
  margin: var(--fm-space-6) auto 0;
  max-width: 46rem;
  color: var(--fm-gray-500);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.fm-mina-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--fm-space-4);
  margin-top: var(--fm-space-16);
}
.fm-mina-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fm-space-1);
  background: var(--fm-surface);
  border-radius: var(--fm-radius-lg);
  padding: var(--fm-space-12);
}
.fm-mina-stat-num {
  font-family: var(--fm-font-display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fm-navy);
}
.fm-mina-stat-label {
  font-family: var(--fm-font-body);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--fm-navy);
}
.fm-mina-stat-sub {
  font-family: var(--fm-font-body);
  font-size: 0.95rem;
  color: var(--fm-gray-300);
}
@media (max-width: 767px) {
  .fm-mina-stats { grid-template-columns: 1fr; }
}

/* —— (2) section do mapa: continua o painel branco da intro (sem novo overlap) —— */
.fm-mina-section {
  position: relative;
  z-index: 1;
  background: var(--fm-white);
  padding: 0 var(--fm-space-6) var(--fm-space-24);
}
.container_map {
  box-sizing: border-box;
  max-width: var(--fm-max-width);
  margin: 0 auto;
  z-index: 1;
  position: relative;
}

/* layout mapa+sidebar — portado de femtov1.webflow.css (var(--white)→#fff etc.) */
.map_component {
  border-radius: 2rem;
  justify-content: space-between;
  width: 100%;
  height: 500px;
  display: flex;
  position: relative;
}
@media screen and (min-width: 1280px) { .map_component { height: 600px; } }
@media screen and (min-width: 1440px) { .map_component { height: 800px; } }
.mapbox_wrapper {
  background-color: #eff0f1;
  border-radius: 2rem;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sidebar__wrapper {
  z-index: 10;
  height: 100%;
  padding: 1rem;
  position: absolute;
  inset: 0 0 0 auto;
}
.sidebar {
  gap: 1rem;
  background-color: #fff;
  border-radius: 1.5rem;
  flex-flow: column;
  width: 350px;
  height: 100%;
  padding: 1rem;
  display: flex;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 479px) {
  .sidebar { max-width: 220px; padding: 0.5rem; }
}
/* sidebar = coluna flex: só a LISTA rola; cabeçalho/busca/barra/CTA ficam fixos
   (sem isso a lista de 119 empurra o .mm-cta pra fora do sidebar overflow:hidden). */
.sidebar .maps-locations-wrapper { flex: 1 1 auto; min-height: 0; }
.sidebar .mapa-sidebar-head-container,
.sidebar .mm-search,
.sidebar .mm-bar,
.sidebar .mm-cta { flex: 0 0 auto; }

/* —— (3) UI do mapa (.mm-*) — migrado de injectStyles() —— */
.mm-left{position:absolute;top:24px;left:24px;z-index:6;width:280px;max-width:calc(100% - 48px);max-height:calc(100vh - 80px);display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(1,18,34,.18);overflow:hidden;font-family:"Nunito Sans",sans-serif}
.mm-left__head{display:flex;align-items:center;padding:12px 14px 10px;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:#011222;font-weight:700;flex:none}
.mm-left__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:8px;border-radius:9px;background:#178398;color:#fff;font-family:"Nunito Sans",sans-serif;font-weight:700;font-size:10px;line-height:1;letter-spacing:0;text-transform:none}
.mm-acc{border-top:1px solid rgba(1,18,34,.08)}
.mm-acc__head{display:flex;align-items:center;width:100%;border:none;background:none;cursor:pointer;padding:9px 14px;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:rgba(1,18,34,.62);font-weight:600;flex:none;transition:color .12s}
.mm-acc__head:hover,.mm-acc:not(.is-collapsed) .mm-acc__head{color:#011222}
.mm-acc__head>span:first-child{flex:1;text-align:left}
.mm-acc__head:after{content:"▾";color:#178398;transition:transform .15s;margin-left:8px}
.mm-acc.is-collapsed .mm-acc__head:after{transform:rotate(-90deg)}
.mm-acc__sel{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#178398;color:#fff;font-family:"Nunito Sans",sans-serif;font-weight:700;font-size:10px;line-height:1;letter-spacing:0;text-transform:none}
.mm-acc__body{padding:2px 14px 11px}
.mm-acc__search{width:100%;box-sizing:border-box;border:1px solid rgba(1,18,34,.16);border-radius:8px;padding:6px 9px;font-size:12px;font-family:"Nunito Sans",sans-serif;margin-bottom:8px}
.mm-acc__search:focus{outline:none;border-color:#178398}
.mm-acc__chips{display:flex;flex-wrap:wrap;gap:7px;max-height:230px;overflow-y:auto;overflow-x:hidden}
.mm-acc__chips::-webkit-scrollbar{width:8px}
.mm-acc__chips::-webkit-scrollbar-thumb{background:rgba(1,18,34,.16);border-radius:8px}
.mm-acc.is-collapsed .mm-acc__body{display:none}
.mm-acc__body::-webkit-scrollbar{width:8px}
.mm-acc__body::-webkit-scrollbar-thumb{background:rgba(1,18,34,.16);border-radius:8px}
.mm-chips{display:flex;flex-wrap:wrap;gap:7px}
.mm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(1,18,34,.16);background:#fff;color:#011222;border-radius:999px;padding:5px 11px;font-size:12px;line-height:1;white-space:nowrap;cursor:pointer;transition:all .12s}
.mm-chip:hover{border-color:#178398}
.mm-chip__count{font-size:10px;font-weight:700;color:rgba(1,18,34,.5);background:rgba(1,18,34,.06);border-radius:6px;padding:1px 5px}
.mm-chip--on{background:#011222;color:#fff;border-color:#011222}.mm-chip--on .mm-chip__count{color:#fff;background:rgba(255,255,255,.22)}
.mm-clear{padding:10px 14px;font-size:12px;color:#178398;background:none;border:none;border-top:1px solid rgba(1,18,34,.08);cursor:pointer;text-align:left;flex:none}.mm-clear:hover{text-decoration:underline}
.sidebar__wrapper{padding:12px}
.sidebar{gap:9px}
.mapa-sidebar-head-container{display:block;margin-bottom:0}
.mapa-sidebar-head-container .text-size-small{font-size:13px;line-height:1.3;margin-top:2px}
.mm-bar{padding:0 2px 6px;border-bottom:1px solid rgba(1,18,34,.08);margin:0}
.mm-bar__count{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:rgba(1,18,34,.65)}
.mm-bar__active{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mm-active{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#011222;border:1px solid rgba(1,18,34,.14);border-radius:999px;padding:4px 5px 4px 11px;font-size:12px;line-height:1;font-family:"Nunito Sans",sans-serif;cursor:pointer;transition:border-color .12s}
.mm-active:hover{border-color:#178398}
.mm-active__x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(1,18,34,.1);color:rgba(1,18,34,.55);font-size:9px;line-height:1;flex:none}
.mm-active:hover .mm-active__x{background:#178398;color:#fff}
.maps-locations-item{cursor:pointer;transition:background .12s,box-shadow .12s;border-radius:10px;margin:0 0 2px}
.maps-locations-item:hover,.maps-locations-item.mm-hover{background:rgba(23,131,152,.07)}
.maps-locations-item.mm-item--active{background:rgba(23,131,152,.13);box-shadow:inset 3px 0 0 #178398}
/* ---- refino da sidenav (cards da lista) ---- */
.maps-locations-list,.maps-locations-wrapper{overflow-x:hidden!important;overflow-y:auto!important}
.sidebar__location-card{display:flex;gap:10px;align-items:center;padding:6px 8px}
.location-image-wrapper{width:78px;height:62px;flex:none;border-radius:10px;overflow:hidden}
.sidebar__location-img{width:100%;height:100%;object-fit:cover}
.sidebar__location-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sidebar__location-title{font-family:Oswald,sans-serif;font-size:15px;font-weight:600;color:#011222;line-height:1.15;letter-spacing:.01em}
.sidebar__location-company{font-size:12px;color:#178398;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__location-address{font-size:12px;color:rgba(1,18,34,.56);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapa-sidebar-head-container .heading-4{font-family:Oswald,sans-serif;letter-spacing:.01em;line-height:1.08;margin:0}
.maps-locations-list::-webkit-scrollbar,.maps-locations-wrapper::-webkit-scrollbar{width:8px}
.maps-locations-list::-webkit-scrollbar-thumb,.maps-locations-wrapper::-webkit-scrollbar-thumb{background:rgba(1,18,34,.16);border-radius:8px}
.maps-locations-list::-webkit-scrollbar-thumb:hover,.maps-locations-wrapper::-webkit-scrollbar-thumb:hover{background:rgba(1,18,34,.3)}
.mapboxgl-popup-content{padding:0;border-radius:14px;overflow:hidden;box-shadow:0 12px 36px rgba(1,18,34,.32);font-family:"Nunito Sans",sans-serif;width:260px}
.mapboxgl-popup-close-button{width:28px;height:28px;top:8px;right:8px;font-size:18px;line-height:26px;color:#fff;background:rgba(1,18,34,.5);border-radius:50%;transition:background .12s}
.mapboxgl-popup-close-button:hover{background:rgba(1,18,34,.8);color:#fff}
.mm-pop__img{width:100%;height:148px;object-fit:cover;display:block}
.mm-pop__body{padding:12px 14px 14px}
.mm-pop__title{font-family:Oswald,sans-serif;font-size:17px;font-weight:600;color:#011222;line-height:1.15;margin-bottom:5px}
.mm-pop__meta{font-size:12px;color:#178398;font-weight:600;margin-bottom:6px}
.mm-pop__addr{font-size:12px;color:#011222;opacity:.7;display:flex;gap:5px;align-items:flex-start}
.mm-pop__360{margin-top:11px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#011222;color:#fff;border:none;border-radius:999px;padding:9px 12px;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;cursor:pointer;transition:background .12s}
.mm-pop__360 svg{stroke:#fff;width:14px;height:14px}
.mm-pop__360:hover{background:#178398}
.mm-pop__360.is-spinning{background:#c0453e}
.mm-pop__360.is-spinning:hover{background:#a83a34}
.mm-hovpop{pointer-events:none}
.mm-hovpop .mapboxgl-popup-content{padding:6px 11px 6px 7px;border-radius:10px;box-shadow:0 6px 22px rgba(1,18,34,.28);display:flex;align-items:center;gap:9px;width:auto;max-width:230px}
.mm-hov__thumb{width:40px;height:40px;border-radius:7px;object-fit:cover;flex:none}
.mm-hov__name{font-family:Oswald,sans-serif;font-size:13px;color:#011222;font-weight:600;line-height:1.1}
.mm-hov__co{font-size:11px;color:#178398;margin-top:1px}
.mapa-controls{position:absolute!important;top:auto!important;bottom:42px!important;left:24px!important;right:auto!important;z-index:6;background:#fff;border-radius:12px;box-shadow:0 6px 22px rgba(1,18,34,.2);overflow:hidden;display:inline-flex;flex-direction:column;gap:0;padding:0}
.mapa-controls .button-zoom-in{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:0;box-shadow:none;border-bottom:1px solid rgba(1,18,34,.09);cursor:pointer;transition:background .12s;margin:0}
.mapa-controls .button-zoom-in:last-child{border-bottom:none}
.mapa-controls .button-zoom-in:hover{background:rgba(23,131,152,.1)}
.mapa-controls .button-zoom-in img{width:17px;height:17px}
.mapa-controls .mm-ctrl svg{width:18px;height:18px}
.mapa-controls .button-zoom-in.is-on{background:rgba(23,131,152,.16)}
.mm-tip{position:absolute;z-index:9;background:#011222;color:#fff;font-family:"Nunito Sans",sans-serif;font-size:12px;line-height:1;white-space:nowrap;padding:7px 11px;border-radius:7px;box-shadow:0 4px 16px rgba(1,18,34,.28);transform:translateY(-50%) translateX(-4px);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.mm-tip--show{opacity:1;transform:translateY(-50%) translateX(0)}
.mm-tip:before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-right-color:#011222}
.mm-3d{font-family:Oswald,sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;color:#011222}
.mm-3d.is-on{color:#178398}
@keyframes mm-pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(23,131,152,.6)}50%{box-shadow:inset 0 0 0 3px rgba(23,131,152,.6)}}
.mm-3d.mm-pulse{animation:mm-pulse 1.5s ease-in-out infinite}
.mm-hint{position:absolute;z-index:8;background:#011222;color:#fff;font-family:"Nunito Sans",sans-serif;font-size:12px;line-height:1.3;padding:8px 12px;border-radius:9px;box-shadow:0 6px 22px rgba(1,18,34,.3);white-space:nowrap;opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .3s,transform .3s}
.mm-hint--show{opacity:1;transform:translateX(0)}
.mm-hint:before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-right-color:#011222}
.mm-hint strong{color:#20b9d6}
.mm-bar__count strong{color:#178398;font-weight:700}
.mm-search{width:100%;box-sizing:border-box;border:1px solid rgba(1,18,34,.16);border-radius:10px;padding:8px 12px;font-size:13px;font-family:"Nunito Sans",sans-serif;margin:0;color:#011222}
.mm-search:focus{outline:none;border-color:#178398}
.mm-search::placeholder{color:rgba(1,18,34,.45)}
.mm-cta{padding:11px 14px;border-top:1px solid rgba(1,18,34,.08);background:#fff}
.mm-cta__txt{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:#011222;font-weight:600;margin-bottom:8px;line-height:1.2}
.mm-cta__btn{display:block;text-align:center;background:#011222;color:#fff;border-radius:999px;padding:9px 14px;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:12px;text-decoration:none}
.mm-cta__btn:hover{background:#178398}
.button-zoom-in.is-loading{opacity:.5}
.mm-stylemenu{position:absolute;z-index:7;display:none;background:#fff;border-radius:10px;box-shadow:0 6px 22px rgba(1,18,34,.22);overflow:hidden;min-width:128px}
.mm-stylemenu.is-open{display:block}
.mm-stylemenu__opt{display:block;width:100%;text-align:left;border:none;background:#fff;cursor:pointer;padding:9px 14px;font-family:"Nunito Sans",sans-serif;font-size:13px;color:#011222}
.mm-stylemenu__opt:hover{background:rgba(23,131,152,.1)}
.mm-stylemenu__opt.is-on{color:#178398;font-weight:700}
.map_component:fullscreen{width:100vw;height:100vh}
.map_component:fullscreen .mapbox_wrapper,.map_component:fullscreen #map{width:100%;height:100%}