.atlas {
  --atlas-paper: oklch(.981 .008 250);
  --atlas-card: #fff;
  --atlas-ink: oklch(.248 .055 264);
  --atlas-muted: oklch(.451 .041 260);
  --atlas-line: oklch(.89 .019 257);
  --atlas-control: oklch(.682 .041 258);
  --atlas-action: #2346d6;
  --atlas-action-text: #fff;
  --atlas-ground: #e6ecf3;
  --atlas-marker: #152449;
  --atlas-marker-text: #fff;
  --atlas-selected: #2346d6;
  --atlas-selected-text: #fff;
  --atlas-compass-tip: #2b57f3;
  --atlas-bearing: -55deg;
  --atlas-shadow: 0 6px 22px #18213d26;
  --focus: #2346d6;
  min-width: 0;
  color: var(--atlas-ink);
}
[data-app="vispera"] .atlas {
  --atlas-paper: #10192c;
  --atlas-card: #18243b;
  --atlas-ink: #fff6e7;
  --atlas-muted: #c1c9db;
  --atlas-line: #364361;
  --atlas-control: #67738d;
  --atlas-action: #ffd18a;
  --atlas-action-text: #151e31;
  --atlas-ground: #18243a;
  --atlas-marker: #213458;
  --atlas-marker-text: #fff6e7;
  --atlas-selected: #ffd18a;
  --atlas-selected-text: #151e31;
  --atlas-compass-tip: #ffd18a;
  --atlas-bearing: 5deg;
  --atlas-shadow: 0 6px 22px #070e1db3;
  --focus: #ffd18a;
}
.atlas :is(p,h2,h3) { margin: 0; }
.atlas-header { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding-bottom: 12px; }
.atlas-header #map-title {
  font: 800 clamp(1.6rem, 3vw, 2.7rem)/1.05 Hanken, sans-serif;
  letter-spacing: -.055em;
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.atlas-overline { display: flex; align-items: center; gap: 5px; color: var(--atlas-muted); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.atlas-overline .icon { width: 15px; height: 15px; }
.atlas-disclaimer { color: var(--atlas-muted); font-size: .81rem; }
.atlas-expand, .atlas-exit, .atlas-directions, .atlas-clear {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: inherit; font-size: .84rem; font-weight: 800; text-underline-offset: .22em;
}
.atlas-exit, .atlas-directions {
  flex: none; padding: 0 12px; border: 1px solid var(--atlas-control); border-radius: 99px;
  background: var(--atlas-card); text-decoration: none;
}
.atlas-exit .icon, .atlas-expand .icon, .atlas-directions .icon { width: 15px; height: 15px; }
.atlas-exit:hover, .atlas-directions:hover { text-decoration: underline; }
.atlas-exit, .atlas-filters, .atlas-index, .atlas-map-top { display: none; }
.atlas-filters { position: relative; z-index: 3; }
.atlas-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; position: relative; }
.atlas-search {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
  min-height: 52px; padding: 4px 5px 4px 13px;
  border: 1px solid var(--atlas-control); border-radius: 16px;
  color: var(--atlas-muted); background: var(--atlas-card);
}
.atlas-search input {
  width: 100%; min-height: 44px; padding: 0 9px; border: 0;
  color: var(--atlas-ink); background: transparent; font-size: 1rem;
}
.atlas-search input::placeholder { color: var(--atlas-muted); opacity: 1; }
.atlas-search input:focus { outline: none; }
.atlas-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.atlas-search button {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
  color: var(--atlas-action-text); background: var(--atlas-action); cursor: pointer;
}
.atlas-suggestions {
  position: absolute; z-index: 5; top: calc(100% + 7px); inset-inline: 0;
  padding: 4px; margin: 0; list-style: none; max-height: min(60vh, 310px); overflow: auto;
  border: 1px solid var(--atlas-control); border-radius: 14px;
  color: var(--atlas-ink); background: var(--atlas-card); box-shadow: var(--atlas-shadow);
}
.atlas-suggestions a {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; align-items: center;
  min-height: 54px; padding: 5px 7px; border-radius: 9px; color: inherit; text-decoration: none;
}
.atlas-suggestions a:is(:hover,:focus-visible) { background: var(--atlas-paper); }
.atlas-suggestions a:focus-visible { outline-offset: -2px; }
.atlas-suggestions img, .atlas-suggestion-no-photo { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--atlas-paper); }
.atlas-suggestions strong, .atlas-suggestions small { display: block; overflow-wrap: anywhere; line-height: 1.22; }
.atlas-suggestions strong { font-size: .88rem; }
.atlas-suggestions small { color: var(--atlas-muted); font-size: .76rem; }
.atlas-suggestions b { font-size: .84rem; white-space: nowrap; }
.atlas :is(.atlas-filter-menu,.atlas-discover) > summary { list-style: none; cursor: pointer; }
.atlas :is(.atlas-filter-menu,.atlas-discover) > summary::-webkit-details-marker { display: none; }
.atlas-filter-menu > summary {
  display: grid; place-items: center; width: 54px; height: 54px;
  border: 1px solid var(--atlas-control); border-radius: 16px; background: var(--atlas-card);
}
.atlas-filter-menu:is([open],[data-filtered]) > summary { color: var(--atlas-action-text); background: var(--atlas-action); border-color: var(--atlas-action); }
.atlas-facets {
  display: grid; gap: 9px; position: absolute; z-index: 5; inset: calc(100% + 7px) 0 auto auto;
  width: min(276px, 100%); padding: 13px;
  border: 1px solid var(--atlas-control); border-radius: 16px; background: var(--atlas-card); box-shadow: var(--atlas-shadow);
}
.atlas-facets > label:first-child { font-size: .84rem; font-weight: 800; }
.atlas-facets :is(select,.atlas-offers) {
  min-height: 44px; min-width: 0; max-width: 100%; padding: 0 10px;
  border: 1px solid var(--atlas-control); border-radius: 10px;
  background: var(--atlas-card); color: var(--atlas-ink); font-size: .84rem; font-weight: 730; cursor: pointer;
}
.atlas-facets #atlas-category {
  appearance: none;
  padding-inline-end: 29px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 10px) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
[data-app="vispera"] .atlas-facets select { color-scheme: dark; }
.atlas-offers { display: inline-flex; align-items: center; gap: 6px; }
.atlas-offers:has(:checked) { background: var(--atlas-action); color: var(--atlas-action-text); }
.atlas-offers input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--atlas-action); }
.atlas-filter-apply {
  min-height: 44px; border: 0; border-radius: 10px; color: var(--atlas-action-text);
  background: var(--atlas-action); font-weight: 800; cursor: pointer;
}
.atlas-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--atlas-muted); font-size: .83rem; font-weight: 750; }
.atlas-clear { overflow-wrap: anywhere; }
.atlas-board { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--atlas-line); border-radius: 18px; background: var(--atlas-ground); }
.atlas-canvas { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.atlas-canvas:focus-visible { outline-offset: -4px; }
.atlas-canvas .map-svg { display: block; width: 100%; height: 100%; user-select: none; }
.atlas-canvas .map-pin { -webkit-tap-highlight-color: transparent; cursor: pointer; }
.atlas .pin-hitbox { fill: transparent; }
.atlas .pin-anchor { fill: var(--atlas-selected); stroke: var(--atlas-marker-text); stroke-width: 2; opacity: 0; }
.atlas .pin-shape { fill: var(--atlas-marker); stroke: var(--atlas-marker-text); stroke-width: 1.6; filter: drop-shadow(0 2px 3px #22152160); }
.atlas .map-pin text { fill: var(--atlas-marker-text); font: 800 14px Hanken, sans-serif; pointer-events: none; }
.atlas .map-pin:is(:hover,:focus-visible) .pin-shape { stroke-width: 2.7; }
.atlas .map-pin:is([aria-current], .atlas-canvas:not(.is-ready) :target) .pin-shape { fill: var(--atlas-selected); stroke: var(--atlas-marker-text); stroke-width: 2.3; }
.atlas .map-pin:is([aria-current], .atlas-canvas:not(.is-ready) :target) .pin-anchor { opacity: 1; }
.atlas .map-pin:is([aria-current], .atlas-canvas:not(.is-ready) :target) text { fill: var(--atlas-selected-text); }
.atlas .map-pin:focus-visible { outline: none; }
.atlas .map-pin:focus-visible .pin-hitbox { stroke: var(--focus); stroke-width: 2; }
.atlas-canvas.is-pannable { cursor: grab; }
.atlas-canvas.is-dragging, .atlas-canvas.is-dragging .map-pin { cursor: grabbing; }
.atlas-canvas.is-zoomed { touch-action: none; }
.atlas-map-top, .atlas-tools { position: absolute; inset-inline: 16px; z-index: 1; align-items: start; justify-content: space-between; gap: 8px; pointer-events: none; }
.atlas-map-top { top: 16px; }
.atlas-map-top a, .atlas-tools :is(a,button) { pointer-events: auto; }
.atlas-map-key, .atlas-directions, .atlas-legend, .atlas-zoom {
  color: var(--atlas-ink); background: var(--atlas-card); box-shadow: var(--atlas-shadow);
}
.atlas-map-key {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px;
  border: 1px solid var(--atlas-line); border-radius: 99px; font-size: .83rem; font-weight: 800;
}
.atlas-map-key .icon { width: 16px; height: 16px; }
.atlas-tools { bottom: 16px; display: flex; align-items: end; }
.atlas-legend { padding: 3px 7px; border-radius: 8px; font-size: .7rem; line-height: 1.2; }
.atlas-legend p { font-weight: 800; }
.atlas-legend a { display: inline-flex; align-items: center; min-height: 24px; color: var(--atlas-muted); text-underline-offset: 2px; }
.atlas-zoom { display: grid; flex: none; margin-left: auto; overflow: hidden; border: 1px solid var(--atlas-control); border-radius: 16px; }
.atlas-zoom button, .atlas-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  color: var(--atlas-ink); background: var(--atlas-card); cursor: pointer;
}
.atlas-zoom button:focus-visible { outline-offset: -4px; }
.atlas-zoom button + button { border-top: 1px solid var(--atlas-line); }
.atlas-zoom button:not([aria-disabled="true"]):hover, .atlas-close:hover { color: var(--atlas-action); }
.atlas-zoom button[aria-disabled="true"] { color: var(--atlas-muted); cursor: default; }
.atlas-compass { transform: rotate(var(--atlas-bearing)); }
.atlas-index { min-width: 0; }
.atlas-discover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 6px; }
.atlas-discover-head strong { font-size: 1.14rem; font-weight: 800; letter-spacing: -.025em; }
.atlas-discover-head span { display: inline-flex; align-items: center; gap: 5px; color: var(--atlas-muted); font-size: .78rem; font-weight: 750; }
.atlas-discover-head .icon { width: 15px; height: 15px; transform: rotate(90deg); }
.atlas-discover[open] .atlas-discover-head .icon { transform: rotate(-90deg); }
.atlas-products { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.atlas-index-link {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 66px;
  padding: 6px; border: 1px solid var(--atlas-line); border-radius: 12px; color: inherit;
  background: var(--atlas-card); text-decoration: none;
}
.atlas-index-link:is(:hover,[aria-current]) { border-color: var(--atlas-control); }
.atlas-index-media { position: relative; display: grid; place-items: center; min-height: 53px; overflow: hidden; border-radius: 8px; background: var(--atlas-paper); }
.atlas-index-media img { width: 100%; height: 56px; object-fit: cover; }
.atlas-index-number {
  position: absolute; inset: auto auto 4px 4px; min-width: 24px; padding: 2px 5px; border-radius: 5px;
  color: var(--atlas-marker-text); background: var(--atlas-marker); font-size: .75rem; font-weight: 800; text-align: center;
}
.atlas-index-copy :is(strong,small,b) { display: block; overflow-wrap: anywhere; line-height: 1.22; }
.atlas-index-copy small { margin-top: 3px; color: var(--atlas-muted); font-size: .79rem; }
.atlas-index-copy b { margin-top: 4px; font-size: .87rem; }
.atlas-index-link > .icon { width: 16px; }
.atlas-preview {
  position: relative; display: grid; gap: 12px;
  padding: 12px; border: 1px solid var(--atlas-line); border-radius: 18px; background: var(--atlas-card);
  animation: atlas-reveal 160ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes atlas-reveal { from { opacity: .35; transform: translateY(5px); } }
.atlas-preview img { width: 100%; height: clamp(110px,19dvh,195px); border-radius: 10px; object-fit: cover; }
.atlas-close { position: absolute; top: 17px; right: 17px; border-radius: 99px; box-shadow: var(--atlas-shadow); }
.atlas-preview:has(img[hidden]) .atlas-preview-copy { padding-right: 51px; }
.atlas-preview-copy { min-width: 0; overflow-wrap: anywhere; }
.atlas-preview-copy p { color: var(--atlas-muted); font-size: .88rem; line-height: 1.25; }
.atlas-preview-copy [data-map-number] { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.atlas-preview-copy strong { display: block; margin-block: 4px; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.028em; }
.atlas-preview-action { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.atlas-preview-action b { font-size: 1.16rem; font-variant-numeric: tabular-nums; }
.atlas-preview-action a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  margin-left: auto; padding: 4px 13px; border-radius: 12px; color: var(--atlas-action-text);
  background: var(--atlas-action); text-decoration: none; font-size: .91rem; font-weight: 800;
}
.atlas-preview-action a:hover, .atlas-search button:hover { filter: brightness(1.12); }
.atlas-preview-action .icon { width: 16px; }
.atlas-preview-browse {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 5px; border-top: 1px solid var(--atlas-line); color: var(--atlas-muted); font-size: .78rem;
}
.atlas-preview-browse button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 3px;
  border: 0; color: var(--atlas-ink); background: transparent; font-size: .82rem; font-weight: 800; cursor: pointer;
}
.atlas-preview-browse button[aria-disabled="true"] { color: var(--atlas-muted); cursor: default; }
.atlas-preview-browse .icon { width: 15px; }
.atlas-preview-browse button:first-child .icon { transform: rotate(180deg); }
.atlas-empty { padding: 14px; border: 1px solid var(--atlas-line); border-radius: 12px; background: var(--atlas-card); }
.atlas-empty p { margin-block: 4px; color: var(--atlas-muted); font-size: .9rem; }
.plaza-workspace .atlas { position: sticky; top: 86px; padding: 12px; border-radius: 18px; background: var(--atlas-paper); }
.plaza-workspace .atlas #map-title { font-size: 1.6rem; }
.atlas:not(:has(.atlas-body)) .atlas-expand { display: none; }

/* The hash is also the entry point for shared links and browsers without scripts. */
body:has(#explorar[data-view="plano"], #plano:target, #plano .map-pin:target) {
  :is(.plaza-hero, .plaza-visit, .plaza-footer, .plaza-explore-head, .plaza-catalogue-note, .plaza-filters,
      .vp-poster, .vp-market-context, .vp-participate, .vp-footer, .vp-section-header, .vp-filters, #puestos, .atlas-expand) { display: none; }
  #contenido > .shell { width: 100%; padding: 0; }
  #explorar { margin: 0; padding: 0; }
  :is(.plaza-workspace, .vp-plan, .atlas-body) { display: contents; }
  #plano {
    position: static; display: grid; grid-template-columns: clamp(295px,26vw,384px) minmax(0,1fr);
    grid-template-rows: auto auto minmax(0,1fr); gap: 0; height: calc(100dvh - 65px - env(safe-area-inset-top));
    min-height: 500px; padding: 0; border-radius: 0; background: var(--atlas-paper);
  }
  .atlas-header, .atlas-filters { padding: 17px 20px 0; }
  .atlas-header #map-title { font-size: clamp(2rem,3vw,2.6rem); }
  .atlas-filters { display: block; }
  .atlas-exit { display: inline-flex; }
  .atlas-board { grid-column: 2; grid-row: 1 / 4; border: 0; border-radius: 0; }
  .atlas-canvas { aspect-ratio: auto; width: 100%; height: 100%; }
  .atlas-canvas.is-ready { touch-action: none; }
  .atlas-map-top { display: flex; }
  .atlas-index { display: block; overflow: auto; padding: 18px 20px; }
  .atlas-index:has(.atlas-preview:not([hidden])) .atlas-discover { display: none; }
}
@media (min-width: 801px) {
  .atlas-products li:first-child .atlas-index-link { grid-template-columns: minmax(0, 1fr) 16px; }
  .atlas-products li:first-child .atlas-index-media { grid-column: 1 / -1; }
  .atlas-products li:first-child img { height: clamp(95px,16dvh,155px); }
  .atlas-products li:first-child .atlas-index-copy { padding: 2px 2px 4px; }
}
@media (max-width: 800px) {
  body:has(#explorar[data-view="plano"], #plano:target, #plano .map-pin:target) {
    .app-top { position: static; border: 0; padding: 0; }
    .app-top-inner { min-height: 0; }
    :is(.app-brand, .app-account) { display: none; }
    #plano {
      grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto 1fr; height: auto;
      min-height: calc(100dvh - var(--app-nav-height,64px) - env(safe-area-inset-bottom));
    }
    .atlas-header, .atlas-filters { padding: 8px 14px 0; }
    .atlas-header { align-items: center; padding-top: max(10px, env(safe-area-inset-top)); }
    .atlas-header #map-title { font-size: 1.6rem; margin-block: 0 2px; }
    .atlas-overline { display: none; }
    .atlas-board { grid-column: 1; grid-row: auto; margin-top: 10px; }
    .atlas-canvas { height: clamp(230px, calc(100dvh - 315px), 108vw); }
    #plano:has(.atlas-discover:not([open])):not(:has(.atlas-preview:not([hidden]))) .atlas-canvas {
      height: clamp(260px, calc(100dvh - 246px), 580px);
    }
    .atlas-map-top, .atlas-tools { inset-inline: 10px; }
    .atlas-map-top { top: 10px; }
    .atlas-tools { bottom: 22px; }
    .atlas-map-key { display: none; }
    .atlas-directions { justify-content: center; margin-left: auto; width: 44px; padding: 0; }
    .atlas-directions span { display: none; }
    .atlas-index {
      position: relative; z-index: 2; margin-top: -12px; padding: 5px 14px 14px;
      border: 1px solid var(--atlas-line); border-radius: 20px 20px 0 0;
      background: var(--atlas-paper); box-shadow: 0 -4px 18px #0d183820;
    }
  }
  .atlas-products { display: flex; overflow-x: auto; gap: 8px; padding: 4px; margin: -4px; scroll-snap-type: x proximity; }
  .atlas-products li { flex: 0 0 min(43vw, 190px); min-width: 0; scroll-snap-align: start; }
  .atlas-zoom { grid-auto-flow: column; }
  .atlas-zoom button + button { border-top: 0; border-left: 1px solid var(--atlas-line); }
  .atlas-index-link { grid-template-columns: minmax(0,1fr); gap: 6px; height: 100%; align-content: start; }
  .atlas-index-media img { height: 84px; }
  .atlas-index-link > .icon { display: none; }
  .atlas-preview { grid-template-columns: 87px minmax(0, 1fr); gap: 5px 11px; margin-top: 5px; padding: 10px; }
  .atlas-preview img { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 94px; max-height: 124px; }
  .atlas-preview:has(img[hidden]) { grid-template-columns: minmax(0,1fr); }
  .atlas-preview-copy { padding-right: 39px; }
  .atlas-preview-copy strong { font-size: 1.08rem; }
  .atlas-close { top: 4px; right: 4px; box-shadow: none; }
}
@media (max-width: 370px) {
  .atlas-index-media img { height: 64px; }
  .atlas-overline span { display: none; }
  .atlas-preview { grid-template-columns: 63px minmax(0,1fr); }
  .atlas-preview-action b { font-size: .97rem; }
  .atlas-preview-action a { padding-inline: 8px; }
  .atlas-preview-action .icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-preview { animation: none; }
}
