:root {
  --ci-navy: #0D2235;
  --ci-blue: #1457D6;
  --ci-gold: #E0B84F;
  --ci-gold-hi: #F4DA84;
  --ci-ice: #D8DCFF;
  --ci-blue-light: #4F8FFF;
  --ci-blue-glow: #7BB2FF;
  --ci-blue-ice: #C7DCFF;
  --ci-ivory: #F0F4FF;
  --ci-bg-deep: #06080F;
  --ci-bg-mid: #080B18;
  --glass-border: rgba(216,220,255,.25);
  --glass-shadow: rgba(0,0,0,.35);
  --muted: rgba(240,244,255,.60);
  --textD: rgba(255,255,255,.92);
  --textD-muted: rgba(255,255,255,.70);
  --fd: 'Plus Jakarta Sans', system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --radius: 18px;
  --panel: rgba(6, 8, 15, 0.74);
  --text: var(--ci-ivory);
}

* { box-sizing: border-box; }

html,
body,
#appShell,
#viewer {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--ci-bg-deep);
  color: var(--text);
  font-family: var(--fb);
}

#appShell {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 28%, rgba(20, 87, 214, .28), transparent 40%),
    linear-gradient(160deg, #07152a 0%, var(--ci-bg-deep) 68%);
}

#viewer {
  opacity: 0;
  transition: opacity .45s ease;
  will-change: transform, opacity;
}

#viewer .pnlm-render-container,
#viewer .pnlm-dragfix {
  will-change: transform;
}

body.is-ready #viewer {
  opacity: 1;
}

#viewerLoader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(6, 8, 15, .86), rgba(6, 8, 15, .70)),
    radial-gradient(circle at 50% 38%, rgba(20, 87, 214, .26), transparent 42%);
  color: var(--ci-ivory);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  visibility: hidden;
}

body.is-loading #viewerLoader,
body.is-load-error #viewerLoader {
  opacity: 1;
  visibility: visible;
}

#viewerLoader img {
  width: 58px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(123, 178, 255, .22));
}

#viewerLoader strong {
  color: var(--ci-gold-hi);
  font: 800 13px/1.15 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#viewerLoader span {
  max-width: 260px;
  color: rgba(240, 244, 255, .68);
  font-size: 12px;
  line-height: 1.35;
}

#sceneLoader {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 58;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-width: min(280px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 10px 13px;
  border: 1px solid rgba(224, 184, 79, .34);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(8, 18, 32, .92), rgba(7, 12, 22, .88));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .36), 0 0 22px rgba(123, 178, 255, .14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  visibility: hidden;
}

body.is-scene-loading:not(.is-loading) #sceneLoader {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  visibility: visible;
}

#sceneLoader strong {
  color: var(--ci-gold-hi);
  font: 800 11px/1.1 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#sceneLoader span:last-child {
  grid-column: 2;
  color: rgba(240, 244, 255, .74);
  font-size: 11px;
  line-height: 1.2;
}

.scene-loader__pulse {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(244, 218, 132, .24);
  border-top-color: var(--ci-gold-hi);
  border-radius: 50%;
  animation: ci-scene-loader-spin .78s linear infinite;
}

@keyframes ci-scene-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
body.is-loading #viewerLoader::after {
  content: "";
  width: 92px;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ci-gold-hi), var(--ci-blue-glow), transparent);
  animation: ci-load-scan 1.25s ease-in-out infinite;
}

@keyframes ci-load-scan {
  0%, 100% {
    opacity: .35;
    transform: scaleX(.62);
  }
  50% {
    opacity: .95;
    transform: scaleX(1);
  }
}

body.is-loading #brandPanel,
body.is-loading #infoPanel,
body.is-loading #traceOverlay,
body.is-loading #traceLabels,
body.is-loading #legalDisclaimer,
body.is-loading #viewer .pnlm-controls-container {
  opacity: 0;
  pointer-events: none;
}

body.is-ready #brandPanel,
body.is-ready #traceOverlay,
body.is-ready #traceLabels,
body.is-ready #legalDisclaimer,
body.is-ready #viewer .pnlm-controls-container {
  opacity: 1;
  transition: opacity .3s ease .12s;
}

#viewer .pnlm-load-box {
  display: none !important;
}

#viewer .pnlm-controls-container {
  top: auto;
  right: 18px;
  bottom: 90px;
  left: auto;
  z-index: 24;
}

#viewer .pnlm-zoom-controls {
  border: 1px solid rgba(144,196,255,.20);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(10,26,46,.78), rgba(3,6,14,.68));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.34);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

#viewer .pnlm-zoom-in,
#viewer .pnlm-zoom-out {
  background-color: transparent;
}

#brandPanel {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(104px, max-content) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: 48px;
  padding: 8px 10px;
  transform: translateX(-50%);
  background: linear-gradient(160deg, rgba(10,26,46,.78), rgba(3,6,14,.68));
  border: 1px solid rgba(144,196,255,.20);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.34),
    0 0 22px rgba(47,102,203,.12);
}

#brandPanel img {
  width: 44px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(123,178,255,.20));
}

.brand-panel__text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-panel__text strong {
  color: var(--ci-gold-hi);
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-panel__text span {
  color: var(--textD-muted);
  font-size: 10px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-panel__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#hudWhatsapp {
  padding: 5px 9px;
  border: 1px solid rgba(88,232,143,.34);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(49,218,114,.94), rgba(31,185,92,.88));
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

#hudBack,
.home-link {
  padding: 5px 9px;
  border: 1px solid rgba(144,196,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(240,244,255,.90);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.home-link:hover,
#hudBack:hover {
  border-color: rgba(244,218,132,.46);
  color: #fff;
}

#hudBack[hidden] {
  display: none;
}

#hudWhatsapp[hidden] {
  display: none;
}

#hudFullscreen {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(144,196,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(240,244,255,.90);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#hudFullscreen:hover {
  border-color: rgba(244,218,132,.46);
  color: var(--ci-gold-hi);
}

.fullscreen-icon {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
}

.fullscreen-icon::before,
.fullscreen-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-color: currentColor;
  border-style: solid;
  pointer-events: none;
}

.fullscreen-icon::before {
  border-width: 2px 0 0 2px;
}

.fullscreen-icon::after {
  border-width: 0 2px 2px 0;
}

#hudFullscreen.is-fullscreen .fullscreen-icon {
  transform: scale(.86);
}

#hudFullscreen.is-fullscreen .fullscreen-icon::before {
  inset: 0 auto auto 0;
  width: 7px;
  height: 7px;
  border-width: 0 2px 2px 0;
}

#hudFullscreen.is-fullscreen .fullscreen-icon::after {
  inset: auto 0 0 auto;
  width: 7px;
  height: 7px;
  border-width: 2px 0 0 2px;
}

#appShell:fullscreen,
#appShell:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: var(--ci-bg-deep);
}

#infoPanel {
  position: fixed;
  top: 50%;
  left: 18px;
  z-index: 30;
  width: min(340px, calc(100vw - 32px));
  transform: translate(-14px, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 22px;
  background: linear-gradient(160deg, rgba(10,26,46,.92), rgba(3,6,14,.90));
  border: 1px solid rgba(144,196,255,.20);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 60px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(47, 102, 203, .12);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  overflow: hidden;
}

#infoPanel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

#infoPanel.info-panel--anchored {
  left: 18px;
  top: 18px;
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility 0s linear .12s;
}

#infoPanel.info-panel--anchored.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

#infoPanel.info-panel--anchored.is-positioning,
#infoPanel.info-panel--anchored.is-positioning.active {
  opacity: 0;
  transition: none;
}

#infoPanel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(159,232,255,.45) 24%, rgba(255,255,255,.76) 50%, rgba(221,186,104,.42) 76%, transparent);
  pointer-events: none;
}

#closeInfo {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

#infoPanel h2 {
  margin: 0 0 16px;
  color: var(--ci-gold-hi);
  font-family: var(--fd);
  font-size: 1.2rem;
  line-height: 1.15;
}

#infoPanel.info-panel--compact {
  width: min(300px, calc(100vw - 32px));
}

.info-panel__meta {
  margin: -8px 0 12px;
  color: rgba(159, 232, 255, .78);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

#infoPanel dl { display: grid; grid-template-columns: 92px 1fr; gap: 8px; margin: 0 0 14px; }
#infoPanel dt { color: rgba(159,232,255,.65); }
#infoPanel dd { margin: 0; }
#infoMeta[hidden],
#infoDetails[hidden],
#infoPanel dt[hidden],
#infoPanel dd[hidden] { display: none !important; }
#infoDescription { margin: 0 0 14px; line-height: 1.45; opacity: .88; }
#infoDescription:empty { display: none; }

#markerAction,
#hudWhatsapp {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

#markerAction {
  width: 100%;
  border: 1px solid rgba(224, 184, 79, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244,218,132,.95), rgba(224,184,79,.86));
  color: #10233a;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 0 18px rgba(224,184,79,.18);
}

#markerAction[hidden] {
  display: none;
}



#viewer .pnlm-hotspot-base,
#viewer .ci-marker-anchor {
  z-index: 8 !important;
}

.ci-marker-anchor {
  width: 1px !important;
  height: 1px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: auto !important;
}

.ci-marker {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(var(--marker-scale, 1));
  transform-origin: 50% 50%;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

body.is-embedded .ci-marker[data-marker-id="volver-hub-ci-360"] {
  display: none !important;
}

.ci-marker--premium {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: default;
  isolation: isolate;
  pointer-events: auto;
}

.ci-marker--premium::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--marker-post-height, 72px));
  width: 1.5px;
  height: var(--marker-post-height, 72px);
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244,218,132,.72), rgba(123,178,255,.46) 64%, rgba(255,255,255,.08));
  box-shadow: 0 0 8px rgba(244,218,132,.20), 0 0 14px rgba(123,178,255,.14);
  opacity: .72;
  z-index: 0;
  pointer-events: none;
}

.ci-marker--premium::before {
  content: none;
}

.ci-marker__halo {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,218,132,.30), rgba(123,178,255,.10) 46%, transparent 68%);
  animation: ci-marker-halo 1.8s ease-in-out infinite;
}

.ci-marker__inner {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(13,34,53,.96), rgba(4,6,14,.92)),
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 38%);
  background-size: cover, auto;
  background-position: center;
  color: var(--ci-gold-hi);
  font: 800 13px var(--fd);
  letter-spacing: .08em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 7px 18px rgba(0,0,0,.48);
  animation: ci-marker-pulse-gold 1.55s ease-in-out infinite;
  cursor: pointer;
  pointer-events: auto;
}

.ci-marker__logo {
  display: block;
  width: 84%;
  height: 76%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.ci-marker__inner--blue {
  color: var(--ci-blue-ice);
  animation-name: ci-marker-pulse-blue;
}

.ci-marker--dot {
  --marker-color: var(--ci-blue);
  width: 34px;
  height: 34px;
  display: flex;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 900 9px/1 var(--fd);
  cursor: pointer;
  box-shadow: none;
}

.ci-marker--dot::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: 2px solid rgba(255,255,255,.92);
  background: var(--marker-color);
  box-shadow: 0 0 10px var(--marker-color), 0 0 22px rgba(123,178,255,.30);
  pointer-events: none;
}

.ci-marker__badge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.72);
  letter-spacing: 0;
  white-space: nowrap;
}

.ci-marker--shape-circle::before {
  border-radius: 50%;
}

.ci-marker--shape-diamond::before {
  border-radius: 5px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.ci-marker--shape-hex::before {
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.ci-marker--shape-pin::before {
  inset: 2px 4px 6px 4px;
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
}

.ci-marker--shape-pin .ci-marker__badge {
  font-size: 9px;
}

.ci-marker-callout {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  pointer-events: none;
  transform: translate(var(--callout-offset-x, 0px), calc(-50% + var(--callout-offset-y, 0px)));
}

.ci-marker-callout--right {
  left: calc(100% + 8px);
}

.ci-marker-callout--left {
  right: calc(100% + 8px);
  flex-direction: row-reverse;
}

.ci-marker-callout--top,
.ci-marker-callout--bottom {
  left: 50%;
  flex-direction: column;
  transform: translate(calc(-50% + var(--callout-offset-x, 0px)), var(--callout-offset-y, 0px));
}

.ci-marker-callout--top {
  top: auto;
  bottom: calc(100% + 8px);
}

.ci-marker-callout--bottom {
  top: calc(100% + 8px);
}

.ci-marker-callout__line {
  width: var(--callout-line-length, 42px);
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244,218,132,.95), rgba(123,178,255,.72));
  box-shadow: 0 0 10px rgba(244,218,132,.42), 0 0 18px rgba(123,178,255,.24);
}

.ci-marker-callout--left .ci-marker-callout__line {
  background: linear-gradient(90deg, rgba(123,178,255,.72), rgba(244,218,132,.95));
}

.ci-marker-callout--top .ci-marker-callout__line,
.ci-marker-callout--bottom .ci-marker-callout__line {
  width: 1.5px;
  height: var(--callout-line-length, 34px);
  background: linear-gradient(180deg, rgba(244,218,132,.95), rgba(123,178,255,.72));
}

.ci-marker-callout--top .ci-marker-callout__line {
  order: 2;
}

.ci-marker-callout--top .ci-marker-callout__box {
  order: 1;
  text-align: center;
}

.ci-marker--premium.ci-marker--callout-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: visible;
  transform: translate(-50%, calc(-100% - var(--marker-post-height, 72px))) scale(var(--marker-scale, 1));
  transform-origin: 50% calc(100% + var(--marker-post-height, 72px));
}

.ci-marker--premium.ci-marker--callout-top .ci-marker__halo {
  display: none;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker__inner {
  position: relative;
  left: auto;
  bottom: auto;
  width: 58px;
  height: 46px;
  transform: none;
  cursor: pointer;
  pointer-events: auto;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top {
  left: 50%;
  top: auto;
  bottom: calc(100% + 6px);
  gap: 0;
  align-items: center;
  transform: translate(calc(-50% + var(--callout-offset-x, 0px)), var(--callout-offset-y, 0px));
  z-index: 2;
  pointer-events: auto;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__box {
  cursor: pointer;
  pointer-events: auto;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top::before {
  content: none;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__box {
  min-width: 190px;
  max-width: min(300px, 72vw);
  margin-bottom: 0;
  padding: 10px 13px;
  border-radius: 10px;
  border-color: rgba(244, 218, 132, .42);
  background: linear-gradient(160deg, rgba(3, 8, 17, .99), rgba(7, 18, 31, .97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 14px 30px rgba(0,0,0,.52);
  position: relative;
  z-index: 3;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__line {
  position: static;
  height: var(--callout-line-length, 10px);
  margin-top: 0;
  opacity: .72;
  transform: none;
  z-index: 0;
}

.ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__box {
  order: 1;
}


.ci-marker-callout--bottom .ci-marker-callout__box {
  text-align: center;
}

.ci-marker-callout__box {
  min-width: 132px;
  max-width: none;
  width: max-content;
  padding: 7px 9px;
  border: 1px solid rgba(216,220,255,.20);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(10,26,46,.82), rgba(3,6,14,.72));
  color: var(--ci-ivory);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.34);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.ci-marker-callout__box strong {
  display: block;
  white-space: normal;
  color: #ffe28a;
  font: 800 14px/1.2 var(--fd);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .85);
}

.ci-marker-callout__box em {
  display: block;
  margin-top: 5px;
  white-space: normal;
  color: rgba(250, 253, 255, .94);
  font: 700 14px/1.25 var(--fb);
  font-style: normal;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .80);
}

@keyframes ci-marker-pulse-gold {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255,255,255,.46)) drop-shadow(0 0 8px rgba(224,184,79,.18));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(244,218,132,.64)) drop-shadow(0 0 18px rgba(224,184,79,.30));
  }
}

@keyframes ci-marker-pulse-blue {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255,255,255,.82)) drop-shadow(0 0 10px rgba(123,178,255,.22));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(199,220,255,.98)) drop-shadow(0 0 30px rgba(20,87,214,.58));
  }
}

@keyframes ci-marker-halo {
  0%, 100% {
    opacity: .42;
    transform: scale(.72);
  }
  50% {
    opacity: .95;
    transform: scale(1.34);
  }
}

@keyframes ci-marker-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 8px var(--marker-color), 0 0 0 rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 16px var(--marker-color), 0 0 24px rgba(255,255,255,.24);
  }
}

.hotspot-lot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--ci-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(20, 87, 214, .95);
}

.callout {
  position: relative;
  width: 0;
  height: 0;
  pointer-events: none;
}

.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: -58px;
  width: 1px;
  height: 58px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 12px rgba(0,0,0,.8);
}

.callout::after {
  content: "";
  position: absolute;
  left: 0;
  top: -58px;
  width: 76px;
  height: 1px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 12px rgba(0,0,0,.8);
}

.calloutText {
  position: absolute;
  left: 8px;
  top: -78px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}

.calloutText small { display: block; opacity: .78; }

#traceOverlay,
#traceLabels {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 14;
}

.trace-shape {
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 3px rgba(244, 218, 132, .34))
    drop-shadow(0 0 9px rgba(123, 178, 255, .58))
    drop-shadow(0 8px 18px rgba(0, 0, 0, .42));
}

.trace-polygon {
  fill-opacity: 1;
  animation: ci-terrain-glow-pulse 4.6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 5px rgba(244, 218, 132, .24))
    drop-shadow(0 0 9px rgba(123, 178, 255, .42))
    drop-shadow(0 0 18px rgba(20, 87, 214, .22))
    drop-shadow(0 8px 18px rgba(0, 0, 0, .38));
}

.trace-polyline {
  stroke-dasharray: 8 7;
}

@keyframes ci-terrain-glow-pulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 4px rgba(244, 218, 132, .18))
      drop-shadow(0 0 7px rgba(123, 178, 255, .34))
      drop-shadow(0 0 14px rgba(20, 87, 214, .16))
      drop-shadow(0 8px 18px rgba(0, 0, 0, .36));
  }

  50% {
    filter:
      drop-shadow(0 0 7px rgba(244, 218, 132, .30))
      drop-shadow(0 0 12px rgba(123, 178, 255, .56))
      drop-shadow(0 0 28px rgba(20, 87, 214, .32))
      drop-shadow(0 8px 18px rgba(0, 0, 0, .40));
  }
}

@media (prefers-reduced-motion: reduce) {
  .trace-polygon {
    animation: none;
  }
}

.trace-vertex {
  opacity: .42;
  stroke: rgba(255, 255, 255, .62);
  stroke-width: .9px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(123, 178, 255, .35));
}

.trace-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  min-width: 150px;
  max-width: none;
  width: max-content;
  padding: 9px 11px;
  background: rgba(13, 34, 53, .76);
  border: 1px solid rgba(216, 220, 255, .25);
  border-radius: 14px;
  color: var(--ci-ivory);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

.trace-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .82);
}

.trace-label strong {
  display: block;
  white-space: nowrap;
  color: var(--ci-gold-hi);
  font-family: var(--fd);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trace-label span {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  color: rgba(230, 240, 255, .78);
  font-size: 11px;
  line-height: 1.35;
}


.trace-callout-line {
  stroke-dasharray: none;
}

.trace-callout-box {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 160px;
  max-width: none;
  width: max-content;
  padding: 10px 12px;
  background: rgba(13, 34, 53, .84);
  border: 1px solid rgba(216, 220, 255, .25);
  border-radius: 14px;
  color: var(--ci-ivory);
  text-align: center;
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42), 0 0 20px rgba(20, 87, 214, .24);
  backdrop-filter: blur(10px);
}

.trace-callout-box strong {
  display: block;
  white-space: nowrap;
  color: var(--ci-gold-hi);
  font-family: var(--fd);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.trace-callout-box span {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  color: rgba(230, 240, 255, .78);
  font-size: 11px;
  line-height: 1.35;
}
.trace-callout-box--compact {
  min-width: 0;
  padding: 5px 7px 6px;
  border-radius: 8px;
  background: rgba(13, 34, 53, .72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34), 0 0 12px rgba(123, 178, 255, .16);
  backdrop-filter: blur(6px);
}

.trace-callout-box--compact strong {
  font-size: 9px;
  letter-spacing: .04em;
}

.trace-callout-box--compact span {
  font-size: 9px;
  margin-top: 2px;
}

.trace-floating-label,
.trace-measure-label {
  position: absolute;
  pointer-events: none;
  color: var(--ci-ivory);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

.trace-floating-label {
  transform: translate(-50%, -50%);
  min-width: 120px;
  max-width: none;
  width: max-content;
  padding: 8px 10px;
  background: rgba(13, 34, 53, .74);
  border: 1px solid rgba(216, 220, 255, .22);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .36);
  backdrop-filter: blur(8px);
}

.trace-floating-label strong {
  display: block;
  white-space: nowrap;
  color: var(--ci-gold-hi);
  font-family: var(--fd);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.trace-floating-label span {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  color: rgba(230, 240, 255, .78);
  font-size: 11px;
  line-height: 1.35;
}

.trace-measure-label {
  transform: translate(-50%, -50%);
  min-width: 54px;
  white-space: nowrap;
  padding: 5px 9px 6px;
  background: rgba(13, 34, 53, .88);
  border: 1px solid rgba(224, 184, 79, .62);
  border-radius: 999px;
  color: var(--ci-gold-hi);
  font: 800 11px var(--fd);
  letter-spacing: .04em;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38), 0 0 18px rgba(224, 184, 79, .18);
}

.trace-measure-label--blue,
.trace-callout-box--blue {
  border-color: rgba(123, 178, 255, .48);
}

.trace-measure-label--blue {
  color: var(--ci-blue-ice);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38), 0 0 18px rgba(123, 178, 255, .22);
}

.trace-callout-box--gold,
.trace-measure-label--gold {
  border-color: rgba(244, 218, 132, .68);
}

#legalDisclaimer {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 22;
  max-width: min(520px, calc(100vw - 36px));
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  line-height: 1.35;
  backdrop-filter: blur(8px);
  pointer-events: none;
}


.dev-mode-toggle,
body.mode-client 

@media (max-width: 720px) {
  #legalDisclaimer {
    left: 12px;
    right: 96px;
    bottom: 12px;
    max-width: none;
    padding: 7px 9px;
    border-radius: 16px;
    font-size: 10px;
    line-height: 1.25;
  }

  }

@media (max-width: 420px) {
  #brandPanel {
    left: 10px;
    right: 10px;
    width: auto;
    transform: none;
  }

  .brand-panel__text {
    max-width: none;
  }

  #hudBack,
  #hudMap,
  #hudWhatsapp {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #infoPanel,
  #infoPanel.info-panel--anchored {
    bottom: 64px !important;
    max-height: min(58vh, 380px);
    padding: 16px;
  }

  #legalDisclaimer {
    right: 86px;
    font-size: 9px;
  }
}

.trace-anchor-hotspot {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


#hudMap {
  padding: 5px 9px;
  border: 1px solid rgba(224, 184, 79, .42);
  border-radius: 999px;
  background: rgba(224, 184, 79, .12);
  color: var(--ci-gold-hi);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#hudMap[hidden] {
  display: none;
}

.city-map-panel {
  position: fixed;
  right: 18px;
  top: 84px;
  z-index: 34;
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100vh - 112px);
  display: none;
  grid-template-rows: auto minmax(220px, 42vh) auto;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(160deg, rgba(10,26,46,.92), rgba(3,6,14,.90));
  border: 1px solid rgba(144,196,255,.20);
  border-radius: var(--radius);
  color: var(--ci-ivory);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 60px rgba(0, 0, 0, .45), 0 0 28px rgba(47, 102, 203, .12);
}

.city-map-panel.active {
  display: grid;
}

.city-map-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.city-map-panel__head strong {
  display: block;
  color: var(--ci-gold-hi);
  font: 800 13px/1.15 var(--fd);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.city-map-panel__head span {
  display: block;
  margin-top: 4px;
  color: rgba(240,244,255,.68);
  font-size: 11px;
}

#closeCityMap {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}

#cityMapFrame {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.34);
}

.city-map-points {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.city-map-point {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(216,220,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

.city-map-point strong,
.city-map-point span,
.city-map-point small {
  display: block;
}

.city-map-point strong {
  color: var(--ci-gold-hi);
  font: 800 12px/1.15 var(--fd);
}

.city-map-point span {
  margin-top: 3px;
  color: rgba(240,244,255,.76);
  font-size: 11px;
}

.city-map-point small {
  margin-top: 3px;
  color: rgba(159,232,255,.72);
  font-size: 10px;
}

.city-map-point button {
  border: 1px solid rgba(224,184,79,.50);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(244,218,132,.95), rgba(224,184,79,.86));
  color: #10233a;
  cursor: pointer;
  font: 800 11px/1 var(--fd);
  padding: 8px 10px;
}

.city-map-empty {
  color: rgba(240,244,255,.72);
  font-size: 12px;
}

@media (max-width: 720px) {
  .city-map-panel {
    left: 12px;
    right: 12px;
    top: 78px;
    width: auto;
    max-height: calc(100vh - 100px);
  }
}

@media (max-width: 720px) {
  #hudBack,
  #hudMap,
  #hudWhatsapp {
    padding: 5px 7px;
    font-size: 9px;
  }
}

@media (max-width: 720px) {
  body.is-embedded #brandPanel {
    top: 8px;
    max-width: calc(100vw - 18px);
  }

  body.is-embedded #infoPanel:not(.info-panel--property),
  body.is-embedded #infoPanel.info-panel--anchored:not(.info-panel--property) {
    display: none !important;
  }

  body.is-embedded #legalDisclaimer {
    display: none;
  }

  body.is-embedded #appShell:fullscreen #legalDisclaimer,
  body.is-embedded #appShell:-webkit-full-screen #legalDisclaimer {
    display: block;
  }

  body.is-embedded .trace-label {
    min-width: 76px;
    max-width: none;
    padding: 4px 6px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
    transform: translate(-50%, calc(-100% - 9px));
  }

  body.is-embedded .trace-label::after {
    bottom: -10px;
    height: 10px;
  }

  body.is-embedded .trace-label strong,
  body.is-embedded .trace-callout-box strong,
  body.is-embedded .trace-floating-label strong,
  body.is-embedded .ci-marker-callout__box strong {
  display: block;
  white-space: normal;
  color: #ffe28a;
  font: 800 14px/1.2 var(--fd);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .85);
}

  body.is-embedded .trace-label span,
  body.is-embedded .trace-callout-box span,
  body.is-embedded .trace-floating-label span,
  body.is-embedded .ci-marker-callout__box em {
  display: block;
  margin-top: 5px;
  white-space: normal;
  color: rgba(250, 253, 255, .94);
  font: 700 14px/1.25 var(--fb);
  font-style: normal;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .80);
}

  body.is-embedded .trace-callout-box,
  body.is-embedded .trace-floating-label,
  body.is-embedded .ci-marker-callout__box {
    min-width: 72px;
    max-width: none;
    padding: 4px 6px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .32);
  }

  body.is-embedded .trace-measure-label {
    min-width: 34px;
    padding: 3px 5px;
    font-size: 7px;
  }

  body.is-embedded .ci-marker-callout__line {
    width: 20px;
  }
}
/* Deploy hotfix: refined mobile 360 labels */
@media (max-width: 720px) {
  .ci-marker {
    --marker-scale: .62;
    --marker-post-height: 28px;
  }

  .ci-marker--premium {
    --marker-scale: .58;
  }

  .ci-marker__halo {
    width: 23px;
    height: 23px;
    background: rgba(13, 34, 53, .62);
    border-color: rgba(224, 184, 79, .62);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 16px rgba(0,0,0,.28);
  }

  .ci-marker__inner {
    width: 15px;
    height: 15px;
    background: rgba(13, 34, 53, .82);
  }

  .ci-marker__logo {
    width: 13px;
    height: 13px;
  }

  .ci-marker__badge {
    min-width: 18px;
    height: 14px;
    padding: 0 3px;
    font-size: 6px;
    line-height: 1;
    letter-spacing: 0;
  }

  .ci-marker-callout__box,
  .trace-callout-box {
    width: max-content;
    max-width: min(112px, 30vw);
    min-width: 0;
    padding: 4px 7px 5px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(17,55,87,.86), rgba(10,31,49,.84));
    border: 1px solid rgba(148, 188, 225, .38);
    box-shadow: 0 8px 18px rgba(0,0,0,.24);
    overflow: hidden;
  }

  .ci-marker-callout__box strong,
  .trace-callout-box strong {
    display: block;
    max-width: 100%;
    color: #f5d36f;
    font-size: 6.7px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  .ci-marker-callout__box em,
  .trace-callout-box span {
    display: none;
  }

  .ci-marker-callout__line,
  .trace-callout-line {
    opacity: .32;
    width: 10px;
    background: linear-gradient(90deg, rgba(224,184,79,.65), rgba(123,178,255,.25));
  }

  .ci-marker-callout--top .ci-marker-callout__line,
  .ci-marker-callout--bottom .ci-marker-callout__line {
    height: 10px;
  }

  .ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top {
  left: 50%;
  top: auto;
  bottom: calc(100% + 6px);
  gap: 0;
  align-items: center;
  transform: translate(calc(-50% + var(--callout-offset-x, 0px)), var(--callout-offset-y, 0px));
  z-index: 2;
  pointer-events: auto;
}

  .ci-marker--city-context .ci-marker-callout__box,
  .ci-marker--poi .ci-marker-callout__box,
  .ci-marker--zone-hub .ci-marker-callout__box,
  .ci-marker--navigation .ci-marker-callout__box,
  .trace-callout-box {
    max-width: min(96px, 26vw);
    padding: 3px 6px 4px;
    border-color: rgba(148,188,225,.28);
    background: linear-gradient(180deg, rgba(18,66,104,.78), rgba(12,42,66,.76));
  }

  .ci-marker--city-context .ci-marker-callout__box strong,
  .ci-marker--poi .ci-marker-callout__box strong,
  .ci-marker--zone-hub .ci-marker-callout__box strong,
  .ci-marker--navigation .ci-marker-callout__box strong,
  .trace-callout-box strong {
    font-size: 5.8px;
    line-height: 1.05;
    color: rgba(255, 226, 135, .95);
  }

  #legalDisclaimer {
    max-width: calc(100vw - 28px);
    font-size: 9px;
    line-height: 1.25;
    padding: 7px 10px;
    border-radius: 11px;
    background: rgba(13, 34, 53, .72);
  }
}

@media (max-width: 420px) {
  .ci-marker {
    --marker-scale: .54;
  }

  .ci-marker-callout__box,
  .trace-callout-box {
    max-width: min(86px, 24vw);
    padding: 3px 5px 4px;
  }

  .ci-marker-callout__box strong,
  .trace-callout-box strong {
    font-size: 5.4px;
  }

  .ci-marker--city-context .ci-marker-callout__box,
  .ci-marker--poi .ci-marker-callout__box,
  .ci-marker--zone-hub .ci-marker-callout__box,
  .ci-marker--navigation .ci-marker-callout__box {
    max-width: min(78px, 22vw);
  }
}
/* Deploy hotfix: terrain trace labels are secondary on mobile */
@media (max-width: 720px) {
  .trace-floating-label {
    width: max-content;
    max-width: min(112px, 30vw);
    min-width: 0;
    padding: 4px 7px 5px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(17,55,87,.74), rgba(10,31,49,.72));
    border-color: rgba(148,188,225,.26);
    box-shadow: 0 6px 14px rgba(0,0,0,.20);
  }

  .trace-floating-label strong {
    display: block;
    max-width: 100%;
    font-size: 5.8px;
    line-height: 1.05;
    letter-spacing: 0;
    color: rgba(255,226,135,.92);
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .trace-floating-label span {
    display: none;
  }

  .trace-callout-box {
    max-width: min(92px, 24vw) !important;
    padding: 3px 6px 4px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(18,66,104,.72), rgba(12,42,66,.70)) !important;
    border-color: rgba(148,188,225,.24) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.20) !important;
  }

  .trace-callout-box strong {
    font-size: 5.5px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    color: rgba(255,226,135,.92) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .trace-callout-box span {
    display: none !important;
  }

  .trace-callout-line {
    opacity: .24 !important;
  }
}

@media (max-width: 420px) {
  .trace-floating-label {
    max-width: min(88px, 25vw);
    padding: 3px 5px;
  }

  .trace-floating-label strong {
    font-size: 5px;
  }

  .trace-callout-box {
    max-width: min(76px, 21vw) !important;
    padding: 3px 5px !important;
  }

  .trace-callout-box strong {
    font-size: 5px !important;
  }
}
/* Mobile premium markers */
@media (max-width: 720px) {
  .ci-marker--premium,
  .ci-marker--premium.ci-marker--callout-top {
    width: 36px;
    height: 36px;
    --marker-scale: 1;
    --marker-post-height: 22px;
  }

  .ci-marker--premium::after {
    height: 22px;
    bottom: -22px;
    opacity: .38;
  }

  .ci-marker--premium .ci-marker__halo,
  .ci-marker--premium.ci-marker--callout-top .ci-marker__halo {
    display: none;
  }

  .ci-marker--premium .ci-marker__inner,
  .ci-marker--premium.ci-marker--callout-top .ci-marker__inner {
    width: 34px;
    height: 29px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.74);
    background: linear-gradient(160deg, rgba(13,34,53,.96), rgba(6,15,26,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 13px rgba(0,0,0,.38);
  }

  .ci-marker--premium .ci-marker__logo,
  .ci-marker--premium.ci-marker--callout-top .ci-marker__logo {
    width: 27px;
    height: 22px;
    max-width: 84%;
    max-height: 80%;
  }

  .ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translate(calc(-50% + var(--callout-offset-x, 0px)), var(--callout-offset-y, 0px));
    z-index: 4;
  }

  .ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__line {
    height: var(--callout-line-length, 10px);
    opacity: .44;
  }

  .ci-marker--premium .ci-marker-callout__box,
  .ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__box {
    min-width: 190px;
    max-width: min(300px, 74vw);
    padding: 10px 13px;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(3, 8, 17, .99), rgba(7, 18, 31, .97));
    border: 1px solid rgba(244, 218, 132, .42);
    box-shadow: 0 14px 30px rgba(0,0,0,.52);
  }

  .ci-marker--premium .ci-marker-callout__box strong,
  .ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__box strong {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ci-marker--premium .ci-marker-callout__box em,
  .ci-marker--premium.ci-marker--callout-top .ci-marker-callout--top .ci-marker-callout__box em {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .ci-marker--premium,
  .ci-marker--premium.ci-marker--callout-top {
    width: 34px;
    height: 34px;
  }

  .ci-marker--premium .ci-marker__inner,
  .ci-marker--premium.ci-marker--callout-top .ci-marker__inner {
    width: 32px;
    height: 27px;
  }

  .ci-marker--premium .ci-marker__logo,
  .ci-marker--premium.ci-marker--callout-top .ci-marker__logo {
    width: 25px;
    height: 20px;
  }
}
/* Deploy hotfix: reduce terrain signs and restore terrain callouts on phone */
@media (max-width: 720px) {
  .trace-label,
  .trace-floating-label {
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(92px, 24vw) !important;
    padding: 3px 5px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(13,34,53,.72), rgba(7,18,31,.66)) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
    transform: translate(-50%, calc(-100% - 7px)) !important;
  }

  .trace-label::after {
    bottom: -7px !important;
    height: 7px !important;
    opacity: .45 !important;
  }

  .trace-label strong,
  .trace-floating-label strong {
    font-size: 5.5px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .trace-label span,
  .trace-floating-label span {
    display: none !important;
  }

  .trace-callout-box {
    display: block !important;
    max-width: min(84px, 23vw) !important;
    padding: 3px 5px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, rgba(18,66,104,.66), rgba(12,42,66,.62)) !important;
    border-color: rgba(148,188,225,.22) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.18) !important;
  }

  .trace-callout-box strong {
    font-size: 4.8px !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  .trace-callout-box span {
    display: none !important;
  }

  .trace-callout-line {
    display: block !important;
    opacity: .22 !important;
  }
}

@media (max-width: 420px) {
  .trace-label,
  .trace-floating-label {
    max-width: min(76px, 20vw) !important;
    padding: 2px 4px !important;
  }

  .trace-label strong,
  .trace-floating-label strong {
    font-size: 4.6px !important;
  }

  .trace-callout-box {
    max-width: min(72px, 20vw) !important;
    padding: 2px 4px 3px !important;
  }

  .trace-callout-box strong {
    font-size: 4.3px !important;
  }
}
/* Universal mobile trace system */
@media (max-width: 720px) {
  .trace-label {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 86px !important;
    padding: 3px 5px !important;
    border-radius: 7px !important;
    transform: translate(-50%, calc(-100% - 6px)) !important;
  }

  .trace-label::after {
    bottom: -6px !important;
    height: 6px !important;
  }

  .trace-label strong {
    font-size: 5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .trace-label span {
    display: none !important;
  }

  .trace-callout-box,
  .trace-callout-line {
    display: block !important;
  }
}
/* Mobile-only terrain sign system: desktop keeps full-size labels */
@media (max-width: 720px) {
  .trace-label,
  .trace-floating-label,
  #traceLabels .trace-label,
  #traceLabels .trace-floating-label {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 96px !important;
    padding: 3px 5px !important;
    border-radius: 7px !important;
    transform: translate(-50%, calc(-100% - 6px)) !important;
  }

  .trace-label::after,
  #traceLabels .trace-label::after {
    bottom: -6px !important;
    height: 6px !important;
    opacity: .45 !important;
  }

  .trace-label strong,
  .trace-floating-label strong,
  #traceLabels .trace-label strong,
  #traceLabels .trace-floating-label strong {
    font-size: 5.5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .trace-label span,
  .trace-floating-label span,
  #traceLabels .trace-label span,
  #traceLabels .trace-floating-label span {
    display: block !important;
    margin-top: 1px !important;
    font-size: 4.8px !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .trace-callout-box,
  .trace-callout-line {
    display: block !important;
  }
}
/* Visual contrast: navy glass + controlled cyan glow, no size changes */
.trace-label,
.trace-floating-label,
.trace-callout-box {
  background:
    linear-gradient(180deg, rgba(20,87,214,.14), rgba(7,18,31,.84)),
    rgba(8, 24, 42, .86) !important;
  border-color: rgba(0, 229, 255, .34) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 229, 255, .16),
    0 0 14px rgba(0, 124, 255, .22) !important;
}

.trace-label::before,
.trace-floating-label::before,
.trace-callout-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,229,255,.16), transparent 36%),
    radial-gradient(circle at 82% 100%, rgba(20,87,214,.18), transparent 42%);
  pointer-events: none;
}

.trace-label strong,
.trace-floating-label strong,
.trace-callout-box strong {
  position: relative;
  z-index: 1;
  color: rgba(255, 226, 135, .98) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .78) !important;
}

.trace-label span,
.trace-floating-label span,
.trace-callout-box span {
  position: relative;
  z-index: 1;
  color: rgba(245, 250, 255, .86) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .76) !important;
}