:root{
  --bg:#0b0d12;
  --panel: rgba(15,20,34,.82);
  --text:#eef1ff;
  --muted:#a9b1d6;
  --line: rgba(255,255,255,.12);
  --radius: 18px;

  /* cores pins + clusters (BTL) */
  --pin-stay:#095594;   /* 🛏 Dormir */
  --pin-eat:#ED2935;    /* 🍴 Comer */
  --pin-visit:#aa8800;  /* 📍 Visitar */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

.topbar{
  position:fixed; inset:0 0 auto 0;
  height:64px;
  display:flex; align-items:center; justify-content:flex-start;
  gap:14px;
  padding:0 16px;
  background: rgba(11,13,18,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:1000;
}
.topbar .actions{margin-left:auto;}

.brand{color:var(--text); text-decoration:none; font-weight:750}
.actions{display:flex; gap:10px; align-items:center}
.action{
  color:var(--text); text-decoration:none;
  padding:9px 12px; border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
}
.action:hover{background: rgba(255,255,255,.10)}

.stage{
  height:100vh;
  padding-top:64px;
  position:relative;
  overflow:hidden;
}

.panel{
  position:relative;
  z-index:2;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
}

.heroCard{
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.heroCard h1{margin:0 0 6px; font-size: 34px; line-height:1.1}
.heroCard p{margin:0; color:var(--muted); font-size: 16px; line-height:1.45}

.tiles{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.tile{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 90px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration:none;
  font-weight: 750;
  letter-spacing:.2px;
  cursor:pointer;
}
.tile:hover{background: rgba(255,255,255,.10)}

/* ===== Leaflet map ===== */
#map{
  position:absolute;
  inset:64px 0 0 0; /* abaixo da topbar */
}

/* legenda em cima do mapa */
.legend{
  position:absolute;
  left:18px; bottom:18px;
  max-width: 520px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  z-index:1200;
}
.legend h2{margin:0 0 6px; font-size: 22px}
.legend p{margin:0; color:var(--muted)}

/* pin custom para Leaflet (divIcon) */
.pinIcon{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.20);
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.pinIcon::after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid rgba(255,255,255,.92);
}

/* variações por categoria */
.pin--dormir .pinIcon{ background: var(--pin-stay); }
.pin--comer .pinIcon{ background: var(--pin-eat); }
.pin--visitar .pinIcon{ background: var(--pin-visit); }

.pinGlyph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.pinSvg{
  width: 18px;
  height: 18px;
  fill: #fff;
}

/* ===== clusters (MarkerCluster) com cores por categoria ===== */
.marker-cluster.cluster--sleep{
  background-color: rgba(9,85,148,.35);
}
.marker-cluster.cluster--sleep div{
  background-color: var(--pin-stay);
}

.marker-cluster.cluster--eat{
  background-color: rgba(237,41,53,.35);
}
.marker-cluster.cluster--eat div{
  background-color: var(--pin-eat);
}

.marker-cluster.cluster--visit{
  background-color: rgba(0,135,226,.35);
}
.marker-cluster.cluster--visit div{
  background-color: var(--pin-visit);
}

.marker-cluster.cluster--mix{
  background-color: rgba(255,255,255,.18);
}
.marker-cluster.cluster--mix div{
  background-color: rgba(255,255,255,.28);
}

.marker-cluster span{ color:#fff; font-weight: 800; }

/* tooltip do nome (mostra ao hover/toque; fica permanente só com zoom alto) */
.leaflet-tooltip.pinTooltip{
  background: rgba(15,20,34,.92);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 650;
  padding: 6px 8px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.leaflet-tooltip.pinTooltip::before{ display:none; }

/* modal */
.modal::backdrop{background: rgba(0,0,0,.55)}
.modal{
  border:1px solid var(--line);
  border-radius: 18px;
  padding:0;
  background: rgba(15,20,34,.96);
  color:var(--text);
  max-width: 760px;
  width: calc(100% - 22px);
  max-height: 90vh;
  overflow: hidden;
}
.modalInner{
  padding:16px;
  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.modalX{
  position:absolute;
  top:10px;
  right:12px;
  width:38px;
  height:38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}
.modalX:hover{ background: rgba(255,255,255,.12); }
.modalInner h3{margin:0 0 10px}
.kv{display:grid; grid-template-columns: 140px 1fr; gap:8px 12px}
.k{color:var(--muted)}
.v a{color:var(--text)}
.btnRow{margin-top:14px; display:flex; gap:10px; justify-content:flex-end}
.btn{
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{background: rgba(255,255,255,.12)}

@media (max-width: 860px){
  .tiles{grid-template-columns: 1fr}
  .kv{grid-template-columns: 1fr}
}


.placeImg{
  width:100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin: 10px 0 14px;
  display:none;
}

/* pin com label (opção 1) */
.pinWrap{
  position: relative;
  transform: translate(-50%, -100%);
}
.pinLabel{
  position:absolute;
  left: 50%;
  top: -10px;
  transform: translateX(18px);
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(15,20,34,.92);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (max-width: 860px){
  .pinLabel{ font-size: 12px; padding: 6px 7px; }
}


.brandWrap{ min-width: 0; }
  .actions--home{ display:none; } /* em ecrãs pequenos, usamos chips/CTAs */
}


/* ===== HOME (clean v2) ===== */
.home{
  background:#f6f7fb;
  color:#0b0d12;
}
.homeTop{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(10,12,16,.08);
}
.homeTop__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.homeBrand{
  text-decoration:none;
  font-weight: 900;
  letter-spacing: -0.3px;
  color:#0b0d12;
  font-size: 16px;
}
.homeLogosSm{
  height: 44px;
  width: auto;
  display:block;
}

.homeWrap{ min-height: calc(100vh - 64px); }

.hero{
  padding: 54px 18px 34px;
}
.hero__inner{
  max-width: 920px;
  margin: 0 auto;
  text-align:center;
}
.hero__kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.03);
  color: rgba(10,12,16,.70);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .8px;
}
.hero__title{
  margin: 16px 0 10px;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.8px;
}
.hero__subtitle{
  margin: 0 auto;
  max-width: 720px;
  color: rgba(10,12,16,.70);
  font-size: 18px;
  line-height: 1.55;
}

.hero__actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(10,12,16,.10);
  font-weight: 850;
  color:#0b0d12;
  background: rgba(255,255,255,.70);
  box-shadow: 0 8px 18px rgba(10,12,16,.06);
}
.btn--primary{
  background:#0b0d12;
  color:#fff;
  border-color: rgba(10,12,16,.16);
}
.btn--primary:hover{ background:#121521; }
.btn--soft:hover{ background: rgba(255,255,255,.95); }

.hero__ctaRow{ margin-top: 12px; }
.linkCta{
  color:#0b0d12;
  text-decoration:none;
  font-weight: 850;
  border-bottom: 2px solid rgba(10,12,16,.25);
  padding-bottom: 2px;
}
.linkCta:hover{ border-bottom-color: rgba(10,12,16,.55); }

.section{
  padding: 0 18px 24px;
}
.section__inner{
  max-width: 920px;
  margin: 0 auto;
}

.accordion{
  border-radius: 18px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 26px rgba(10,12,16,.06);
  overflow:hidden;
}
.accordion__summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
}
.accordion__summary::-webkit-details-marker{ display:none; }
.accordion__hint{
  font-weight: 800;
  font-size: 12px;
  color: rgba(10,12,16,.55);
}
.accordion__content{
  padding: 0 16px 16px;
  color: rgba(10,12,16,.75);
  line-height: 1.75;
  font-size: 16px;
}
.accordion__content p{ margin: 10px 0; }
.accent{
  font-weight: 800;
  color: rgba(10,12,16,.90);
}

.homeFooterClean{
  text-align:center;
  padding: 18px 18px 26px;
  color: rgba(10,12,16,.55);
  font-size: 13px;
}

@media (max-width: 520px){
  .homeLogosSm{ height: 38px; }
  .btn{ width: 100%; max-width: 360px; text-align:center; }
}


/* ===== Destaques (home) ===== */
.highlightsHeader{
  margin: 18px 0 10px;
}
.highlightsTitle{
  margin:0;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.highlightsSubtitle{
  margin: 4px 0 0;
  color: rgba(10,12,16,.62);
  font-size: 14px;
  line-height: 1.4;
}

.homeHighlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.hlCard{
  text-decoration:none;
  border-radius: 18px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 26px rgba(10,12,16,.06);
  padding: 14px;
  color:#0b0d12;
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.hlCard:hover{
  background: rgba(255,255,255,.98);
  transform: translateY(-1px);
}
.hlTag{
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,12,16,.04);
  border: 1px solid rgba(10,12,16,.08);
  font-weight: 850;
  font-size: 12px;
  color: rgba(10,12,16,.70);
}
.hlName{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 16px;
  margin-top: 2px;
}
.hlMeta{
  color: rgba(10,12,16,.66);
  font-size: 13px;
  line-height: 1.4;
}
.hlAction{
  margin-top: auto;
  font-weight: 900;
  color: rgba(10,12,16,.85);
  font-size: 13px;
}

@media (max-width: 920px){
  .homeHighlights{ grid-template-columns: 1fr; }
}


/* ===== HOMEPAGE CLEAN + MAP INDEX ===== */
.home{
  background:#f6f7fb;
  color:#0b0d12;
}
.homeTop{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(10,12,16,.08);
}
.homeTop__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.homeBrand{
  text-decoration:none;
  font-weight: 950;
  letter-spacing: -0.3px;
  color:#0b0d12;
}
.homeLogos{
  height: 44px;
  width: auto;
  display:block;
}

.homeMain{ min-height: 100vh; }
.homeHero{ padding: 56px 18px 10px; }
.homeHero__inner{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
}
.homeKicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.03);
  color: rgba(10,12,16,.70);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .8px;
}
.homeTitle{
  margin: 16px 0 10px;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.8px;
}
.homeSubtitle{
  margin: 0 auto;
  max-width: 760px;
  color: rgba(10,12,16,.70);
  font-size: 18px;
  line-height: 1.55;
}

.homePrimary{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btnP{
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(10,12,16,.10);
  font-weight: 950;
  color:#0b0d12;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(10,12,16,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btnP:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 36px rgba(10,12,16,.10);
}
.btnP--dark{
  background:#0b0d12;
  color:#fff;
  border-color: rgba(10,12,16,.16);
}
.btnP--dark:hover{ background:#121521; }

.homeMicro{ margin-top: 10px; }
.microLink{
  color:#0b0d12;
  text-decoration:none;
  font-weight: 950;
  border-bottom: 2px solid rgba(10,12,16,.20);
  padding-bottom: 2px;
}
.microLink:hover{ border-bottom-color: rgba(10,12,16,.55); }

.homeSection{ padding: 14px 18px 18px; }
.homeSection__inner{ max-width: 980px; margin: 0 auto; display:grid; gap: 12px; }

.accordion{
  border-radius: 18px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(10,12,16,.06);
  overflow:hidden;
}
.accordion__summary{
  list-style:none;
  cursor:pointer;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 950;
}
.accordion__summary::-webkit-details-marker{ display:none; }
.accordion__hint{ font-weight: 900; font-size: 12px; color: rgba(10,12,16,.55); }
.accordion__content{
  padding: 0 16px 16px;
  color: rgba(10,12,16,.74);
  line-height: 1.75;
  font-size: 16px;
}
.accent{ font-weight: 950; color: rgba(10,12,16,.90); }

.mapIndexGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.subAcc{
  border-radius: 16px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.02);
  overflow:hidden;
}
.subAcc__summary{
  list-style:none;
  cursor:pointer;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
}
.subAcc__summary::-webkit-details-marker{ display:none; }

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(10,12,16,.12);
  background: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 950;
  color: rgba(10,12,16,.75);
}

.placeList{
  margin: 0;
  padding: 8px 8px 10px;
  list-style: none;
  display:grid;
  gap: 6px;
  max-height: 340px;
  overflow:auto;
}
.placeItem{ margin:0; }
.placeLink{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,12,16,.08);
  color:#0b0d12;
  font-weight: 850;
  font-size: 13px;
}
.placeLink:hover{ background: rgba(255,255,255,.98); }
.chev{
  color: rgba(10,12,16,.55);
  font-weight: 950;
}

.smallNote{
  margin: 10px 0 0;
  color: rgba(10,12,16,.58);
  font-size: 13px;
}

.homeFooter{
  text-align:center;
  padding: 18px 18px 26px;
  color: rgba(10,12,16,.55);
  font-size: 13px;
}

@media (max-width: 980px){
  .mapIndexGrid{ grid-template-columns: 1fr; }
  .placeList{ max-height: 260px; }
}


/* ===== HOME BACKGROUND (não tudo branco) ===== */
.home{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(0,180,160,.10) 0%, rgba(246,247,251,0) 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(60,120,255,.10) 0%, rgba(246,247,251,0) 60%),
    #f6f7fb;
}

/* ===== HOME MAP SECTION ===== */
.homeMapSection{
  padding: 0 18px 18px;
}
.homeMapInner{
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(10,12,16,.06);
  overflow:hidden;
}
.homeMapHeader{
  padding: 14px 14px 10px;
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(10,12,16,.08);
}
.homeMapTitle{ margin:0; font-size: 16px; font-weight: 950; }
.homeMapSub{ margin:4px 0 0; color: rgba(10,12,16,.60); font-size: 13px; line-height: 1.35; }

.homeMapTabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tabBtn{
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.03);
  color: rgba(10,12,16,.80);
  font-weight: 900;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
}
.tabBtn:hover{ background: rgba(10,12,16,.06); }
.tabBtn--active{
  background: #0b0d12;
  color: #fff;
  border-color: rgba(10,12,16,.16);
}

.homeMap{
  height: 420px;
  width: 100%;
}
.homeMapCtas{
  padding: 12px 14px 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(10,12,16,.08);
}

/* Leaflet no card */
.homeMap .leaflet-container{
  background: #e9ecf5;
}
.homeMap .leaflet-control-attribution{
  font-size: 10px;
}

/* ===== Route planner (home map) ===== */
.routeCtrl{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(10,12,16,.10);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 10px 22px rgba(10,12,16,.14);
}
.routeCtrl__label{
  font-size: 11px;
  font-weight: 950;
  color: rgba(10,12,16,.70);
  margin: 0 0 6px;
}

.routeCtrl__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.routeCtrl__chev{
  font-size: 14px;
  opacity: .65;
  transition: transform .18s ease;
}
.routeCtrl.isCollapsed .routeCtrl__chev{
  transform: rotate(-90deg);
}

@media (max-width: 520px){
  .routeCtrl{ padding: 10px 12px; }
  .routeCtrl__label{ margin: 0; }
  .routeCtrl.isCollapsed .routeCtrl__content{ display:none; }
  .routeCtrl__content{ margin-top: 10px; }
}
.routeCtrl__row{ display:flex; gap:6px; }
.routeCtrl__section{ margin-top: 8px; }
.routeCtrl__hint{
  font-size: 11px;
  font-weight: 950;
  color: rgba(10,12,16,.58);
  margin: 0 0 6px;
}
.routeCtrl__row--choices{ flex-wrap: wrap; }
.routeChoiceBtn{
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.02);
  color: rgba(10,12,16,.82);
  font-weight: 900;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.routeChoiceBtn:hover{ background: rgba(10,12,16,.06); }
.routeChoiceBtn.isActive{
  background: rgba(10,12,16,.10);
  border-color: rgba(10,12,16,.18);
}
.routeMeta{
  padding: 6px 0 8px;
}
.routeMeta__line{
  font-size: 12px;
  color: rgba(10,12,16,.70);
  font-weight: 850;
  margin: 0 0 6px;
}
.routeMeta__stay{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(10,12,16,.14);
}
.routeMeta__stayTitle{
  font-size: 12px;
  font-weight: 950;
  color: rgba(10,12,16,.75);
  margin-bottom: 6px;
}
.routeMeta__stayRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(10,12,16,.10);
}
.routeMeta__stayRow:last-child{ border-bottom: 0; }
.routeMeta__stayName{
  font-size: 12px;
  font-weight: 900;
  color: rgba(10,12,16,.86);
}
.routeMeta__stayRow button{
  border: 1px solid rgba(10,12,16,.12);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
}
.routeMeta__stayRow button:hover{ background: rgba(10,12,16,.04); }

.routeBtn{
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.03);
  color: rgba(10,12,16,.86);
  font-weight: 950;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  white-space: nowrap;
}
.routeBtn:hover{ background: rgba(10,12,16,.06); }
.routeBtn.isActive{
  background: #0b0d12;
  color:#fff;
  border-color: rgba(10,12,16,.16);
}

#homeMap{ position: relative; }

.routePanel{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 500;
  max-width: 460px;
  /* importante: o painel vive dentro do container do mapa (que pode ser baixo no mobile).
     Limitamos a altura ao próprio mapa e fazemos o scroll apenas no corpo,
     para nunca "cortar" conteúdo nem perder o botão de fechar. */
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(10,12,16,.10);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(10,12,16,.18);
  padding: 10px 12px 12px;
}
.routePanel[hidden]{ display:none !important; }
.routePanel__head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.routePanel__actions{ display:flex; align-items:center; gap:8px; }
.routePanel__regen{
  border: 1px solid rgba(10,12,16,.12);
  background: rgba(10,12,16,.04);
  color: rgba(10,12,16,.86);
  font-weight: 950;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.routePanel__regen:hover{ background: rgba(10,12,16,.08); }
.routePanel__title{ font-weight: 1000; font-size: 14px; }
.routePanel__sub{ margin-top: 2px; color: rgba(10,12,16,.62); font-size: 12px; font-weight: 800; }
.routePanel__close{
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 2px 6px;
  cursor:pointer;
  color: rgba(10,12,16,.70);
}
.routePanel__body{
  margin-top: 8px;
  /* deixa o header sempre visível (X / Gerar outra sugestão) */
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}



.routeDay{ padding-top: 8px; border-top: 1px solid rgba(10,12,16,.08); }
.routeDay:first-child{ border-top: 0; padding-top: 0; }
.routeDay h4{ margin: 0 0 6px; font-size: 12px; font-weight: 950; color: rgba(10,12,16,.75); }
.routeItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 6px 0; border-bottom: 1px dashed rgba(10,12,16,.10); }
.routeItem:last-child{ border-bottom: 0; }
.routeItem__name{ font-size: 12px; font-weight: 850; color: rgba(10,12,16,.86); }
.routeItem button{
  border: 1px solid rgba(10,12,16,.12);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
}
.routeItem button:hover{ background: rgba(10,12,16,.04); }

@media (max-width: 720px){
  .routeCtrl__row{ flex-wrap: wrap; }
  .routeBtn{ padding: 9px 12px; }
  .routePanel{ max-width: none; }
}

/* pins com label (reaproveita os estilos do mapa) */
.pinWrap{ position: relative; transform: translate(-50%, -100%); }
.pinLabel{
  position:absolute;
  left: 50%;
  top: -10px;
  transform: translateX(18px);
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(15,20,34,.92);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 750;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* responsivo */
@media (max-width: 720px){
  .homeMapHeader{ align-items:flex-start; flex-direction: column; }
  .homeMap{ height: 360px; }
}


/* ===== Category topbar refinements ===== */
body[data-page="category"]{
  background: var(--bg);
}
.topbarLogos{
  height: 34px;
  width: auto;
  opacity: .95;
}
@media (max-width: 760px){
  .topbarLogos{ display:none; }
}

.action.isActive{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* Legend (help) controls */
.legend{
  padding-right: 44px;
}
.legendClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.legendClose:hover{ background: rgba(255,255,255,.10); }

.legendShow{
  position:absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15,20,34,.82);
  color: var(--text);
  font-weight: 950;
  cursor:pointer;
  display:none;
}
.legendShow:hover{ background: rgba(255,255,255,.08); }

.legend--hidden{
  display:none;
}
.legend--hidden + .legendShow{
  display:block;
}


/* ===== OVERRIDES (BTL clean) ===== */
:root{
  --accent: #3C9532;      /* green */
  --accentSoft: rgba(10,165,164,.14);
  --accentSoft2: rgba(10,165,164,.20);
  --ink: #0b0d12;
}

/* barras a branco (home + categorias) */
.homeTop,
.topbar{
  background: #ffffff !important;
  color: var(--ink);
  border-bottom: 1px solid rgba(10,12,16,.10);
}
.topbar .brand,
.homeBrand{
  color: var(--ink) !important;
}

/* botões da barra do mapa (segunda imagem) com outra cor */
.actions .action{
  background: var(--accentSoft);
  border: 1px solid rgba(10,12,16,.10);
  color: rgba(10,12,16,.86);
}
.actions .action:hover{
  background: var(--accentSoft2);
}
.actions .action.active,
.actions .action.is-active,
.actions .action--active{
  background: var(--accent);
  color: #ffffff;
  border-color: rgba(10,12,16,.12);
}


/* ===== Modal: descrição + galeria ===== */
.placeDesc{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.80);
  line-height: 1.55;
  font-size: 14px;
}
.gallery{
  display:none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 10px;
}
.galleryImg{
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(10,12,16,.10);
  cursor: pointer;
  transition: transform .12s ease;
}
.galleryImg:hover{
  transform: translateY(-1px);
}

@media (max-width: 720px){
  .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .galleryImg{ height: 120px; }
}

/* Lightbox simples */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(10,12,16,.72);
  display:none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.lightbox.isOpen{ display:flex; }
.lightboxInner{
  position: relative;
  max-width: 1100px;
  width: 100%;
}
.lightboxImg{
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 16px;
  background: #0b0d12;
  border: 1px solid rgba(255,255,255,.10);
}
.lightboxClose{
  position:absolute;
  top: -12px;
  right: -12px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.lightboxClose:hover{ background: rgba(255,255,255,.16); }


/* ===== COLOR UPDATE (ACI green) ===== */
:root{ --accent: #3C9532; --accentSoft: rgba(60,149,50,.14); --accentSoft2: rgba(60,149,50,.22); }

.actions .action{
  background: var(--accentSoft) !important;
}
.actions .action:hover{
  background: var(--accentSoft2) !important;
}
.actions .action.active,
.actions .action.is-active,
.actions .action--active{
  background: var(--accent) !important;
  color:#fff !important;
}

/* botões na home (se existirem) */
.btnP--dark,
.btn--primary,
.cta--primary{
  background: var(--accent) !important;
}
.btnP--dark:hover,
.btn--primary:hover,
.cta--primary:hover{
  filter: brightness(0.95);
}

/* tabs na home com mapa (se existirem) */
.tabBtn--active{
  background: var(--accent) !important;
  color:#fff !important;
}


/* HEADER sempre acima do Leaflet */
header,
.topbar,
.navbar {
  position: sticky;      /* ou fixed, se preferires */
  top: 0;
  z-index: 3000;         /* acima do Leaflet */
  background: #fff;      /* garante que tapa o mapa por baixo */
}

/* Leaflet mais “baixo” na pilha */
.leaflet-container,
.leaflet-pane,
.leaflet-top,
.leaflet-bottom,
.leaflet-control {
  z-index: 1 !important;
}


/* Topbar (logo + botões) — responsivo e acima do mapa (Leaflet) */

.homeTop{
  position: sticky;
  top: 0;
  z-index: 10000; /* acima do Leaflet */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.homeTop__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.homeBrand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.homeBrand__img{
  height: 42px;
  width: auto;
  display: block;
}

@media (max-width: 520px){
  .homeTop__inner{ padding: 8px 12px; }
  .homeBrand__img{ height: 34px; }
}

/* Leaflet: garante que o header fica sempre por cima */
.leaflet-container{ z-index: 1; }
.leaflet-pane{ z-index: 1; }
.leaflet-control{ z-index: 2; }




/* Topbar acima do Leaflet (evita o mapa por cima do logo) */
.topbar{
  z-index: 5000; /* maior que os controlos do Leaflet */
}

/* Garante que o mapa fica “abaixo” da barra */
#map,
.leaflet-container{
  z-index: 0;
}

/* Logo */
.brand--logo{
  display:flex;
  align-items:center;
  min-width: 0;
}
.brand__img{
  height: 42px;
  width: auto;
  display:block;
}

/* Responsivo */
@media (max-width: 760px){
  .topbar{ padding: 10px 12px; height:auto; gap:10px; }
  .actions{ gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .action{ padding:8px 10px; border-radius:12px; font-size:14px; }
  .brand__img{ height: 36px; }
}


/* =========================================================
   TOPBAR + AÇÕES — MOBILE / TABLET
   ========================================================= */

/* Base (desktop) — se já tens, deixa; isto só garante flex correto */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Navegação (botões) */
.actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botões */
.action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;      /* evita partir texto */
  line-height:1;
}

/* ---------- TABLET (<= 1024px) ---------- */
@media (max-width: 1024px){
  .topbar{
    padding: 10px 14px;
  }

  .brand__img{
    height: 38px; /* logo ligeiramente menor */
  }

  .actions{
    gap: 8px;
    flex-wrap: wrap;       /* permite 2 linhas se preciso */
    justify-content: flex-end;
  }

  .action{
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 14px;
  }
}

/* ---------- MOBILE (<= 760px) ---------- */
@media (max-width: 760px){
  .topbar{
    flex-direction: column;     /* logo em cima, botões em baixo */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }

  .brand--logo{
    width: 100%;
  }

  .brand__img{
    height: 34px;
  }

  .actions{
    width: 100%;
    display:grid;               /* grelha com 2 colunas */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .action{
    width: 100%;
    padding: 10px 10px;
    font-size: 14px;
    border-radius: 14px;
  }

  /* se houver 3 botões, o último ocupa a linha toda (fica bonito) */
  .actions .action:last-child{
    grid-column: 1 / -1;
  }
}

/* ---------- MOBILE PEQUENO (<= 380px) ---------- */
@media (max-width: 380px){
  .brand__img{ height: 30px; }
  .action{ font-size: 13px; padding: 9px 10px; }
}


/* ===== TOPBAR (MAPA) - cores verdes dos botões (só nesta página) ===== */
body[data-page="category"] .topbar{
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(10,12,16,.10);
  z-index: 3000; /* garante que fica SEMPRE por cima do Leaflet */
}


/* Apanha <a> e <button> dentro da topbar */
body[data-page="category"] .topbar .actions a,
body[data-page="category"] .topbar .actions button{
  background: #e8f4e8;
  border: 1px solid #3c9532;
  color: #3c9532;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: none;
}

body[data-page="category"] .topbar .actions a:hover,
body[data-page="category"] .topbar .actions button:hover{
  background: #dff0df;
  border-color: #bfe0bf;
}

/* Responsivo: em mobile os botões não rebentam o layout */
@media (max-width: 640px){
  body[data-page="category"] .topbar{
    height: auto;
    padding: 10px 12px;
  }
  body[data-page="category"] .topbar .actions{
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  /* sem botão extra */
}

/* ===== Home route panel: ajustes finos para mobile/tablet ===== */
@media (max-width: 520px){
  .homeMap{ height: 320px; }
  .routeCtrl{ max-width: calc(100% - 18px); }
  .routePanel{
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 16px;
  }
  .routePanel__body{ -webkit-overflow-scrolling: touch; }
  .routePanel__regen{ padding: 8px 10px; }
  .routePanel__close{ font-size: 26px; }
}

@media (min-width: 521px) and (max-width: 900px){
  .homeMap{ height: 360px; }
  .routePanel__body{ -webkit-overflow-scrolling: touch; }
}



/* LIGHTBOX overlay: centrado sempre */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lightbox.isOpen{
  display: flex;
}

/* caixa */
.lightboxInner{
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* imagem */
.lightboxImg{
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 16px;
  background: #0b1020;
}

/* fechar */
.lightboxClose{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  background: rgba(255,255,255,.9);
}

/* setas */
.lightboxNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  background: rgba(255,255,255,.9);
  display: grid;
  place-items: center;
}

.lightboxPrev{ left: 10px; }
.lightboxNext{ right: 10px; }

/* MOBILE/TABLET */
@media (max-width: 768px){
  .lightboxInner{ max-width: 100%; }
  .lightboxNav{ width: 42px; height: 42px; font-size: 30px; }
  .lightboxClose{ width: 42px; height: 42px; font-size: 26px; }
}



/* AI ASSISTANT */

.aiFab{
  position:fixed; right:16px; bottom:16px;
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--line);
  background: rgba(15,20,34,.92);
  color:var(--text);
  padding:12px 14px;
  border-radius:999px;
  cursor:pointer;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-width: 92vw;
  white-space: nowrap;
}
.aiFabDot{width:10px;height:10px;border-radius:50%; background:#4ade80;}
.aiFabTxt{font-weight:700; letter-spacing:.2px;}
.aiPanel{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  z-index: 9998;
  overscroll-behavior: contain;
}
.aiPanel.isOpen{display:block;}

/* Bloqueia o scroll da página quando o Guia está aberto */
body.assistantOpen{
  overflow:hidden;
  height:100vh;
  touch-action:none;
}
.aiPanelInner{
  position:absolute; right:16px; bottom:76px;
  width:min(420px, calc(100vw - 32px));
  max-height:min(78vh, 680px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background: rgba(15,20,34,.96);
  border-radius: 18px;
  box-shadow: 0 14px 50px rgba(0,0,0,.45);
  color: var(--text);

  /* animação suave (sem quebrar transforms do responsive) */
  --aiEnterY: 10px;
  opacity:0;
  transform: translateY(var(--aiEnterY));
  transition: opacity .18s ease, transform .18s ease;
}
.aiPanel.isOpen .aiPanelInner{opacity:1; --aiEnterY: 0px;}
.aiTop{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  background: rgba(15,20,34,.985);
  backdrop-filter: blur(8px);
}
.aiTitleWrap{display:flex; flex-direction:column; gap:2px; min-width:0;}
.aiTitle{font-weight:900; color: rgba(255,255,255,.98); letter-spacing:.2px; line-height:1.05;}
.aiSubtitle{display:none !important;}
.aiClose{
  border:0; background:transparent; color:var(--text);
  font-size:26px; line-height:1;
  cursor:pointer;
}

/* micro-interações */
.aiSend, .chip, .pill, .aiTab{
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.aiSend:active, .chip:active, .pill:active, .aiTab:active{transform: scale(.98);}
.chip:hover, .pill:hover, .aiTab:hover{background: rgba(255,255,255,.10);}
.aiHelp{padding:10px 14px 0; color:var(--muted); font-size:14px;}
.aiChips{display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px 6px;}
.chip{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
}
.aiForm{display:flex; gap:10px; padding:10px 14px 14px;}
.aiInput{
  flex:1;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
.aiSend{
  border:1px solid var(--line);
  background: rgba(255,255,255,.12);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.aiOut{padding:0 14px 14px;}
.aiNote{color:var(--muted); font-size:13px; margin:0 0 10px;}
.aiEmpty{color:var(--muted); font-size:14px; padding:10px 0;}
.aiGrid{display:grid; gap:10px;}
.aiCard{
  display:block;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  border-radius:14px;
  padding:12px;
  text-decoration:none;
  color:var(--text);
}
.aiCardTitle{font-weight:800; margin:0 0 4px;}
.aiCardMeta{color:var(--muted); font-size:12.5px; margin-bottom:6px;}
.aiCardAddr{color:var(--text); opacity:.9; font-size:13px; margin-bottom:6px;}
.aiCardDesc{color:var(--muted); font-size:13px; line-height:1.35;}
.aiCardCta{margin-top:10px; font-weight:800; font-size:13px;}
.aiFoot{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.aiFoot a{color:var(--text); text-decoration:underline;}
.aiSep{opacity:.55;}

/* --- Assistente: Tabs + Roteiro --- */
.aiTopRight{display:flex; align-items:center; gap:10px;}
.aiTabs{display:flex; gap:6px; padding:0; margin:0;}
.aiTab{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:800;
}
.aiTab.isActive{background: rgba(255,255,255,.14);}
.aiBody{
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 12px;
  padding-bottom: 12px;
}

.aiRow{padding:10px 14px 0;}
.aiRow:last-child{padding-bottom:14px;}
.aiLbl{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
.aiSelect{
  width:100%;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}

/* -------- Assistente: layout premium (mobile/tablet) -------- */
@media (max-width: 980px){
  /* tablet: centra o modal para ficar mais "app" */
  .aiPanelInner{
    left:50%; top:50%; right:auto; bottom:auto;
    transform: translate(-50%,-50%) translateY(var(--aiEnterY));
    width: min(520px, calc(100vw - 32px));
    max-height: min(78vh, 720px);
  }
}

@media (max-width: 560px){
  /* mobile: bottom sheet */
  .aiPanelInner{
    left:0; right:0; bottom:0; top:auto;
    transform: translateY(var(--aiEnterY));
    width: 100vw;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
  }
  /* handle do bottom-sheet */
  .aiTop{position:sticky;}
  .aiTop:before{
    content:"";
    position:absolute;
    left:50%;
    top:8px;
    transform: translateX(-50%);
    width:42px;
    height:4px;
    border-radius:999px;
    background: rgba(255,255,255,.22);
  }
  .aiForm{flex-direction:column;}
  .aiSend{width:100%;}
  .aiTop{padding:12px 14px 10px;}
  .aiHelp{font-size:13.5px;}
}

/* Melhor contraste nas pills (inclui duração e interesses) */
.pill{color: rgba(255,255,255,.92);}
.pill.isOn{background: rgba(74,222,128,.18); border-color: rgba(74,222,128,.30);}
.aiPills{display:flex; flex-wrap:wrap; gap:8px;}
.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
}
.pill.isOn{background: rgba(74,222,128,.14);} /* leve, mantém a paleta */

.aiRow2{display:flex; gap:10px; flex-wrap:wrap;}
.aiChk{display:flex; align-items:center; gap:8px; color:var(--text); opacity:.9; font-size:13px;}
.aiChk input{accent-color:#4ade80;}

.aiRouteOut{padding:0 14px 14px;}
.aiRouteBlock{margin-top:10px;}
.aiRouteH{font-weight:900; margin:12px 0 8px;}


/* Language switcher (header-aligned, responsive) */
.langSwitch{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.langBtn{border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.86);color:#111;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.08);user-select:none;}
.langBtn:hover{transform:translateY(-1px);}
.langBtn.active{background:#111;color:#fff;border-color:rgba(0,0,0,.35);}
@media (max-width:560px){
  .langBtn{padding:6px 8px;font-size:11px;}
}

/* Positioning in headers */
.homeTop__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;}
@media (max-width:520px){
  .langBtn{padding:7px 9px;font-size:11px;}
  .langSwitch{gap:6px;top:10px;right:10px;}
}


/* --- Language switch: responsive & non-overlapping --- */
.langSwitch{
  display:flex;
  gap:8px;
  align-items:center;
}
.langBtn{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:700;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.langBtn.active{
  background:#111;
  color:#fff;
  border-color:#111;
}
@media (max-width: 640px){
  .langSwitch{ gap:6px; }
  .langBtn{ padding:7px 9px; font-size:12px; }
  nav .langSwitch{ margin-left:8px; }
}


/* Marketplace teaser (homepage) */
.marketTeaser{
  margin: 16px 0 0;
  padding: 18px;
  border-radius: 22px;
  background: rgba(31,122,58,.06);
  border: 1px solid rgba(10,12,16,.08);
}
.marketTeaser__inner{
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.marketTeaser__title{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  color:#0b0d12;
}
.marketTeaser__text{
  margin: 0;
  color: rgba(10,12,16,.72);
  max-width: 56ch;
}
.btnP--market{
  border-color: rgba(31,122,58,.35);
  color: #1f7a3a;
}
.btnP--market:hover{
  background: rgba(255,255,255,.98);
}

@media (max-width: 520px){
  .marketTeaser{ padding: 14px; border-radius: 18px; }
  .marketTeaser__inner{ gap: 10px; }
  .marketTeaser__text{ max-width: 100%; }
}


/* Ecosystem Paiva Digital */
.ecosystem{
  margin: 26px 0 12px;
  padding: 34px 16px;
}
.ecosystem__inner{
  max-width: 980px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
}
.ecosystem__title{
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.15;
  text-align: center;
}
.ecosystem__subtitle{
  margin: 0 auto 16px;
  max-width: 720px;
  opacity: .85;
  text-align: center;
}
.ecosystem__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.ecosystem__card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.ecosystem__h{
  margin: 0 0 8px;
  font-size: 16px;
}
.ecosystem__p{
  margin: 0 0 12px;
  opacity: .9;
}

/* Social icons (Marketplace card) */
.ecosystem__social{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.socialBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #1f7a33;
  background: rgba(31,122,51,0.06);
  border: 1px solid rgba(31,122,51,0.18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.socialBtn:hover{
  transform: translateY(-1px);
  background: rgba(31,122,51,0.10);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}

.socialBtn svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.ecosystem__stores{
  display: flex;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.ecosystem__store{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 54px;
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}

.ecosystem__store:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}

.ecosystem__store img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.10));
}

/* Ajuste visual para badges (padding interno difere entre Apple/Google) */
.ecosystem__store img{ transform-origin: center; }
.ecosystem__store--google img{ transform: scale(1.06); }
.ecosystem__store--apple img{ transform: scale(0.90); }
.ecosystem__qrWrap{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.ecosystem__qr{
  display: grid;
  place-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px;
}
.ecosystem__qr img{
  width: 112px;
  height: 112px;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}
.ecosystem__qrLabel{
  font-size: 12px;
  opacity: .8;
}
.ecosystem__qrHint{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .75;
}

/* Mobile smart toggle (QR shown on demand) */
.ecosystem__qrToggle{
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(31,122,51,0.35);
  background: rgba(31,122,51,0.06);
  color: #1f7a33;
  font-weight: 700;
  cursor: pointer;
}
.ecosystem__qrToggle:active{ transform: translateY(1px); }

@media (max-width: 900px){
  .ecosystem__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .ecosystem{ padding: 18px 12px; }
  .ecosystem__inner{ padding: 18px 14px; }
  .ecosystem__qrToggle{ display: inline-flex; align-items: center; justify-content: center; width: 100%; }
  .ecosystem__qrWrap{ display: none; }
  .ecosystem__qrWrap.is-open{ display: grid; }
  .ecosystem__stores{ gap: 10px; }
  .ecosystem__store{ width: 168px; height: 52px; }
}

.ecosystem__title{
  color: #1f7a33;
  font-weight: 800;
}



/* Voice guide button (modal) */
.voiceSlot{ margin: 10px 0 6px; }
.voiceBtn{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #1f7a33;
  background: rgba(31,122,51,0.08);
  color: #1f7a33;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.voiceBtn:hover{
  background: #1f7a33;
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.voiceBtn.playing{ background: #1f7a33; color: #fff; }


/* garantir alinhamento */
.homePrimary .btnP{
  display:inline-flex;
  align-items:center;
}

/* bolinha base (não depende de spans no HTML) */
.homePrimary .btnP::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  margin-right:10px;
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.12);
  flex:0 0 12px;
}

/* cores por categoria (pelo href) */
.homePrimary .btnP[href*="cat=visitar"]::before{ background:#aa8800; } /* Visitar */
.homePrimary .btnP[href*="cat=comer"]::before{  background:#ED2935; } /* Comer */
.homePrimary .btnP[href*="cat=dormir"]::before{ background:#095594; } /* Dormir */


/* --- Carro animado na rota (Leaflet) --- */
.routeCarIcon{
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  pointer-events: none;
}

.routeCarInner{
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.30));
  transform-origin: 50% 50%;
  will-change: transform;
}



/* Botão pequeno para reabrir quando o painel está escondido */
.routePeekBtn{
  position:absolute;
  left: 12px;
  bottom: 12px;
  z-index: 600;
  border: 1px solid rgba(10,12,16,.12);
  background: rgba(255,255,255,.96);
  color: rgba(10,12,16,.86);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 12px;
  box-shadow: 0 14px 34px rgba(10,12,16,.18);
  cursor: pointer;
}
.routePeekBtn:hover{ background: rgba(255,255,255,.99); }

/* ===== PWA install hint (iOS) ===== */
.pwaHint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(255,255,255,.92);
  color: rgba(10,12,16,.78);
  font-weight: 850;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(10,12,16,.06);
}
.pwaHint strong{ color: rgba(10,12,16,.92); }

/* ===== PWA iOS popup (toast/modal leve) ===== */
.pwaPopup{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  z-index: 12000;
  pointer-events: none;
}
.pwaPopup.isOpen{ display:flex; }

.pwaPopupCard{
  position: relative;
  pointer-events: auto;
  width: min(520px, calc(100vw - 32px));
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 14px 44px 14px 14px;
  color: #0b0d12;
  backdrop-filter: blur(8px);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.pwaPopup.isOpen .pwaPopupCard{ transform: translateY(0); opacity: 1; }

.pwaPopupTitle{ font-weight: 950; font-size: 14px; margin: 0 0 4px; }
.pwaPopupText{ font-size: 13px; line-height: 1.35; color: rgba(10,12,16,.80); }

.pwaPopupClose{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: rgba(10,12,16,.80);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pwaPopupClose:hover{ background: rgba(0,0,0,.08); }

@media (max-width: 560px){
  .pwaPopup{ padding: 12px; }
  .pwaPopupCard{ border-radius: 16px; padding-right: 44px; }
}
@media (max-width: 520px){
  .pwaHint{ width: 100%; max-width: 360px; margin-left:auto; margin-right:auto; text-align:center; }
}







/* ===== Eventos emblemáticos (homepage) ===== */
.eventsActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin: 10px 0 12px;
}

.eventsGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 340px;
  overflow:auto;
  padding-right: 4px;
}

.eventItem{
  width:100%;
  text-align:left;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(10,12,16,.08);
  background: rgba(255,255,255,.92);
  color:#0b0d12;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(10,12,16,.04);
}
.eventItem:hover{
  background: rgba(255,255,255,.98);
}


.eventThumb{
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.02);
}

.eventMain{ flex: 1; min-width: 0; }
.eventTitle, .eventDesc, .eventMeta{ display:block; }
.eventTitle{ font-weight: 950; }
.eventDesc{ margin-top: 2px; }
.eventMeta{ margin-top: 6px; }
.eventMonth{ font-weight: 850; }

.modal.eventMode .kv{ display:none; }
.modal.eventMode .gallery{ display:grid; }


.eventBadge{
  align-self:flex-start;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,12,16,.10);
  background: rgba(10,12,16,.03);
  font-weight: 950;
  font-size: 12px;
  color: rgba(10,12,16,.70);
  white-space: nowrap;
  margin-bottom: 2px;
}

.eventMain{
  flex:1;
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}
.eventTitle{
  font-weight: 950;
  font-size: 14px;
  line-height: 1.25;
}
.eventDesc{
  font-size: 13px;
  color: rgba(10,12,16,.72);
  line-height: 1.35;
}
.eventMeta{
  font-size: 12px;
  color: rgba(10,12,16,.55);
  font-weight: 850;
}

.eventMore{
  flex:0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(10,12,16,.04);
  border: 1px solid rgba(10,12,16,.08);
  color: rgba(10,12,16,.65);
  font-weight: 950;
}

@media (max-width: 980px){
  .eventsGrid{ max-height: 280px; }
}

@media (max-width: 520px){
  .eventItem{ padding: 12px 10px; }
  .eventMore{ width: 32px; height: 32px; }
}


/* ===== Eventos (modal): imagem com altura definida (Opção A) ===== */
.modal.eventMode .gallery{
  display:grid;
  grid-template-columns: 1fr;
}
.modal.eventMode .gallery img,
.modal.eventMode .gallery .eventHeroImg{
  width: 100%;
  height: clamp(220px, 42vh, 420px);
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  display:block;
}

/* Mobile: ajusta altura da imagem e mantém tudo dentro do ecrã */
@media (max-width: 680px){
  .modal{
    max-height: 92vh;
  }
  .modalInner{
    max-height: 92vh;
  }
  .modal.eventMode .gallery img,
  .modal.eventMode .gallery .eventHeroImg{
    height: clamp(180px, 32vh, 300px);
    border-radius: 12px;
  }
}