/* ARENZA · Mapa vectorial (lámina de arquitecto). Lo pinta assets/js/mapa.js en cada [data-mapa].
   Temas: data-theme="paper" (crema, por defecto) · data-theme="night" (navy). Todo color sale de las variables --m-*. */

[data-mapa], [data-mapa-card] {
  /* tema paper */
  --m-bg: #F8F2E8;
  --m-ink: #102136;
  --m-gold: #A98B62;
  --m-gold-ink: #7A5F3D;
  --m-mute: #5D5A54;
  --m-r: rgba(16, 33, 54, .17);           /* calles */
  --m-t: rgba(16, 33, 54, .25);           /* terciarias */
  --m-p: rgba(16, 33, 54, .33);           /* primarias / secundarias */
  --m-a: rgba(16, 33, 54, .5);            /* avenidas principales */
  --m-hl: #A98B62;                        /* calle de la propiedad */
  --m-park: rgba(169, 139, 98, .12);
  --m-park-dot: rgba(169, 139, 98, .46);
  --m-water: rgba(16, 33, 54, .045);
  --m-water-line: rgba(16, 33, 54, .3);
  --m-label: rgba(16, 33, 54, .82);
  --m-label-2: rgba(93, 90, 84, .9);
  --m-street: #5D5A54;
  --m-halo: #F8F2E8;
  --m-frame: rgba(169, 139, 98, .5);
  --m-dot: #A98B62;
  --m-office: #102136;
  --m-office-line: #F8F2E8;
  --m-card-bg: #FBF8F2;
  --m-card-ink: #102136;
  --m-card-mute: #5D5A54;
  --m-card-line: rgba(169, 139, 98, .55);
  --m-card-shadow: 0 34px 70px -34px rgba(16, 33, 54, .42);
  /* grosores (px de pantalla) */
  --m-w-r: .5;
  --m-w-t: .65;
  --m-w-p: .8;
  --m-w-a: 1.05;
  --m-w-hl: 2.4;
  --m-ease: cubic-bezier(.16, 1, .3, 1);
}
[data-mapa] {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  overflow: hidden;
  background: var(--m-bg);
  color: var(--m-ink);
  isolation: isolate;
  font-family: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
[data-mapa][data-theme="night"], [data-mapa-card][data-theme="night"] {
  --m-bg: #081827;
  --m-ink: #F8F2E8;
  --m-gold: #C9A978;
  --m-gold-ink: #C9A978;
  --m-mute: rgba(248, 242, 232, .62);
  --m-r: rgba(248, 242, 232, .08);
  --m-t: rgba(248, 242, 232, .12);
  --m-p: rgba(248, 242, 232, .16);
  --m-a: rgba(248, 242, 232, .3);
  --m-hl: #C9A978;
  --m-park: rgba(201, 169, 120, .085);
  --m-park-dot: rgba(201, 169, 120, .3);
  --m-water: rgba(248, 242, 232, .03);
  --m-water-line: rgba(248, 242, 232, .2);
  --m-label: rgba(248, 242, 232, .8);
  --m-label-2: rgba(248, 242, 232, .5);
  --m-street: rgba(248, 242, 232, .56);
  --m-halo: #081827;
  --m-frame: rgba(201, 169, 120, .32);
  --m-dot: #C9A978;
  --m-office: #1B314C;
  --m-office-line: #C9A978;
  --m-card-bg: #102136;
  --m-card-ink: #F8F2E8;
  --m-card-mute: rgba(248, 242, 232, .72);
  --m-card-line: rgba(201, 169, 120, .42);
  --m-card-shadow: 0 34px 70px -30px rgba(0, 0, 0, .55);
}
@media (max-width: 559px) {
  [data-mapa] { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------------- lámina */
.mapa__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* las calles se disuelven en el papel hacia el marco y no lo cruzan: fuera del filete (--m-inset) no hay nada.
     Con un degradado (sin mover el SVG) los marcadores siguen donde estaban */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--m-inset), #000 calc(var(--m-inset) + 7%), #000 calc(93% - var(--m-inset)), transparent calc(100% - var(--m-inset))), linear-gradient(180deg, transparent 0, transparent var(--m-inset), #000 calc(var(--m-inset) + 7%), #000 calc(93% - var(--m-inset)), transparent calc(100% - var(--m-inset)));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, transparent var(--m-inset), #000 calc(var(--m-inset) + 7%), #000 calc(93% - var(--m-inset)), transparent calc(100% - var(--m-inset))), linear-gradient(180deg, transparent 0, transparent var(--m-inset), #000 calc(var(--m-inset) + 7%), #000 calc(93% - var(--m-inset)), transparent calc(100% - var(--m-inset)));
  mask-composite: intersect;
}
.mapa__svg path { vector-effect: none; }
.m-r, .m-t, .m-p, .m-a { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-r { stroke: var(--m-r); stroke-width: calc(var(--u, 1) * var(--m-w-r) * 1px); }
.m-t { stroke: var(--m-t); stroke-width: calc(var(--u, 1) * var(--m-w-t) * 1px); }
.m-p { stroke: var(--m-p); stroke-width: calc(var(--u, 1) * var(--m-w-p) * 1px); }
.m-a { stroke: var(--m-a); stroke-width: calc(var(--u, 1) * var(--m-w-a) * 1px); }
.m-hl {
  fill: none;
  stroke: var(--m-hl);
  stroke-width: calc(var(--u, 1) * var(--m-w-hl) * 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .6s ease;
}
.m-hl.is-on { opacity: .85; }
/* franja invisible sobre la calle de cada propiedad (solo con ratón: la crea mapa.js) */
.m-hit {
  fill: none;
  stroke: transparent;
  stroke-width: calc(var(--u, 1) * 18px);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}
.m-park { fill: var(--m-park); }
.m-park-dot { fill: var(--m-park-dot); }
.m-w { fill: var(--m-water); stroke: var(--m-water-line); stroke-width: calc(var(--u, 1) * .55px); }
.m-hatch { stroke: var(--m-water-line); stroke-width: calc(var(--u, 1) * .45px); fill: none; }
.m-st {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--u, 1) * 12.5px);
  letter-spacing: .035em;
  fill: var(--m-street);
  stroke: var(--m-halo);
  stroke-width: calc(var(--u, 1) * 3.2px);
  stroke-linejoin: round;
  paint-order: stroke;
}
.mapa--s .m-streets { display: none; }

.mapa__layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* deja pasar el ratón a las calles */
a.mapa__pin { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  a.mapa__pin .mapa__tag { pointer-events: auto; }   /* el nombre de la calle también responde como el punto */
}
[data-mapa] { --m-inset: 14px; }
.mapa--s { --m-inset: 9px; }
.mapa__frame {
  position: absolute;
  inset: var(--m-inset);
  border: 1px solid var(--m-frame);
  pointer-events: none;
  z-index: 3;
}

/* ---------------------------------------------------------------- barrios */
.mapa__b {
  position: absolute;
  transform: translate(calc(-50% + var(--dx, 0px)), -50%);
  padding-left: .3em;                       /* compensa el tracking del último carácter */
  font: 500 11px/1 'Switzer', system-ui, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--m-label);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 2px var(--m-halo), 0 0 4px var(--m-halo), 0 0 8px var(--m-halo);
  transition: opacity .5s ease;
}
.mapa__b--2 { font-size: 9.5px; letter-spacing: .26em; padding-left: .26em; color: var(--m-label-2); }
.mapa__b--park { color: var(--m-gold-ink); letter-spacing: .42em; padding-left: .42em; }
.mapa__b.is-out, .mapa--s .mapa__b--2 { display: none; }
.mapa__b.is-hidden { opacity: 0 !important; }
.mapa--l .mapa__b--1 { font-size: 12px; }
.mapa--s .mapa__b--1 { font-size: 9.5px; letter-spacing: .22em; padding-left: .22em; }
.mapa--s .mapa__b--park { letter-spacing: .34em; padding-left: .34em; }

/* ---------------------------------------------------------------- marcadores */
.mapa__pin {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  z-index: 2;
  transition: opacity .4s ease;
}
.mapa__pin.is-active, .mapa__pin:focus-visible { z-index: 4; }
.mapa__pin.is-out { display: none; }
.mapa__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--m-dot);
  box-shadow: 0 0 0 1.5px var(--m-bg);
  transition: transform .35s var(--m-ease), opacity .6s ease;
}
.mapa__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 1px solid var(--m-dot);
  opacity: .32;
  transform: scale(.72);
  animation: mapa-respira 6.4s cubic-bezier(.45, 0, .55, 1) var(--b, 0s) infinite;
}
@keyframes mapa-respira {
  0%, 100% { transform: scale(.62); opacity: .14; }
  50% { transform: scale(1.18); opacity: .5; }
}
.mapa__pin:hover .mapa__dot, .mapa__pin.is-active .mapa__dot, .mapa__pin:focus-visible .mapa__dot { transform: scale(1.3); }
.mapa__pin:focus-visible .mapa__dot { outline: 2px solid var(--m-gold-ink); outline-offset: 6px; }
.mapa__pin.is-focus .mapa__dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.mapa__pin.is-focus .mapa__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.mapa--focus .mapa__pin:not(.is-focus):not(.mapa__pin--office) { opacity: .42; }
.mapa--focus .mapa__pin:hover, .mapa--focus .mapa__pin:focus-visible, .mapa--focus .mapa__pin.is-active { opacity: 1 !important; }

/* etiqueta «N.º 01 · Ponzano», con filete de llamada */
.mapa__tag {
  position: absolute;
  top: 50%;
  left: calc(50% + 8px);
  transform: translateY(-50%);
  padding-left: 14px;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}
.mapa__tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--m-gold);
  opacity: .75;
}
.mapa__pin.is-l .mapa__tag { left: auto; right: calc(50% + 8px); padding: 0 14px 0 0; }
.mapa__pin.is-l .mapa__tag::before { left: auto; right: 0; }
.mapa__pin.is-t .mapa__tag, .mapa__pin.is-b .mapa__tag { left: 50%; padding: 0; transform: translateX(-50%); }
.mapa__pin.is-t .mapa__tag { top: auto; bottom: calc(50% + 9px); }
.mapa__pin.is-b .mapa__tag { top: calc(50% + 10px); }
.mapa__pin.is-t .mapa__tag::before, .mapa__pin.is-b .mapa__tag::before { display: none; }
.mapa__pin.is-focus.is-t .mapa__tag { bottom: calc(50% + 12px); }
.mapa__pin.is-focus.is-b .mapa__tag { top: calc(50% + 13px); }
.mapa__tag-in {
  display: inline-flex;
  align-items: baseline;
  gap: .42em;
  text-shadow: 0 0 2px var(--m-halo), 0 0 4px var(--m-halo), 0 0 9px var(--m-halo);
  transition: transform .9s var(--m-ease), opacity .7s ease;
}
.mapa__no {
  font: 500 10px/1 'Switzer', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-gold-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.mapa__sep { color: var(--m-gold); font-family: 'Switzer', system-ui, sans-serif; font-size: 10px; }
.mapa__name {
  font: italic 500 16px/1 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  color: var(--m-ink);
  letter-spacing: .005em;
}
.mapa__pin.is-focus .mapa__name { font-size: 22px; font-style: normal; font-weight: 400; }
.mapa__pin.is-focus .mapa__no { font-size: 10.5px; }
.mapa--s .mapa__nro, .mapa--s .mapa__pin:not(.is-focus) .mapa__sep, .mapa--s .mapa__pin:not(.is-focus) .mapa__name { display: none; }
.mapa--s .mapa__pin.is-focus .mapa__name { font-size: 19px; }
.mapa--s .mapa__tag { padding-left: 10px; }
.mapa--s .mapa__tag::before { width: 7px; }
.mapa--s .mapa__pin.is-l .mapa__tag { padding: 0 10px 0 0; }

/* oficina: rombo navy */
.mapa__rombo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--m-office);
  box-shadow: 0 0 0 1px var(--m-office-line);
  transform: rotate(45deg);
  transition: transform .6s var(--m-ease), opacity .6s ease;
}
.mapa__pin--office { z-index: 1; cursor: default; }
.mapa__pin--office .mapa__tag::before { background: var(--m-ink); opacity: .45; }
.mapa__wm {
  font: 600 11.5px/1 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  letter-spacing: .22em;
  color: var(--m-ink);
}
.mapa__addr {
  font: 500 9.5px/1 'Switzer', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-mute);
}
.mapa--s .mapa__pin--office .mapa__sep, .mapa--s .mapa__addr { display: none; }

/* ---------------------------------------------------------------- tarjeta */
.mapa__card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 340px;
  background: var(--m-card-bg);
  color: var(--m-card-ink);
  border: 1px solid var(--m-card-line);
  border-radius: 2px;
  box-shadow: var(--m-card-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .28s ease, transform .5s var(--m-ease), visibility 0s linear .3s;
  -webkit-user-select: text;
  user-select: text;
}
.mapa__card.is-below { transform: translateY(-8px); }
.mapa__card.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .32s ease, transform .55s var(--m-ease), visibility 0s;
}
/* foto 4:3 (29-10, ronda 2: «fotos más grandes»; 328 px de ancho en escritorio). Cada foto se pide y decodifica
   aparte (mapa.js) y no se enseña hasta estar entera; debajo, el fondo de la caja */
.mapa__card-img { position: relative; display: block; margin: 6px 6px 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--m-park); }
.mapa__card-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.mapa__card-img img:not(.is-ready) { visibility: hidden; }
.mapa__card-body { display: block; padding: 16px 18px 18px; }
.mapa__card-n, .mapa__card-t, .mapa__card-meta { display: block; }
.mapa__card-n {
  font: 500 10px/1.3 'Switzer', system-ui, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--m-gold-ink);
}
.mapa__card .mapa__sep { margin: 0 .5em; font-size: inherit; }
.mapa__card-t {
  margin-top: 8px;
  font: 400 30px/1 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  letter-spacing: -.01em;
}
.mapa__card-meta {
  margin-top: 9px;
  font: 400 13px/1.35 'Switzer', system-ui, sans-serif;
  color: var(--m-card-mute);
  font-variant-numeric: lining-nums;
}
.mapa__card-price { color: var(--m-card-ink); font-weight: 500; }
.mapa__card-a {
  position: relative;
  display: inline-block;
  margin-top: 13px;
  padding: 4px 0 5px;
  font: 500 10.5px/1 'Switzer', system-ui, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--m-card-ink);
  text-decoration: none;
}
.mapa__card-a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--m-gold);
  transform: scaleX(.32);
  transform-origin: left;
  transition: transform .45s var(--m-ease);
}
.mapa__card-a:hover::after, .mapa__card-a:focus-visible::after { transform: scaleX(1); }
.mapa__card-a:focus-visible { outline: 2px solid var(--m-gold-ink); outline-offset: 4px; }
/* móvil: la tarjeta se acopla abajo (o arriba si el punto está en la mitad de abajo), con la foto panorámica (3:1) a
   todo su ancho. Mide menos de medio plano (≈ 190 px en un plano de 350 × 438), así nunca tapa su punto. «Ver la
   ficha» va en la primera línea, a la derecha, y los créditos de OSM sobre la foto (la escala y los créditos del
   plano se ocultan mientras está abierta). En la panorámica el encuadre de ponzano-01 se acerca desde la derecha
   (--crop-zoom, mapa.js): escala fija, sin animar */
.mapa--s .mapa__card {
  left: 10px !important;
  right: 10px;
  top: auto;
  bottom: 10px;
  width: auto;
}
.mapa--s .mapa__card.is-top { top: 10px !important; bottom: auto; transform: translateY(-8px); }
.mapa--s .mapa__card.is-open { transform: none; }
.mapa--s .mapa__card-img { aspect-ratio: 3 / 1; }
.mapa--s .mapa__card-img img { scale: var(--crop-zoom, 1); transform-origin: var(--crop-o, 50% 50%); }
.mapa--s .mapa__card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 9px 12px 10px; }
.mapa--s .mapa__card-n { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mapa--s .mapa__card-a { grid-column: 2; grid-row: 1; margin: -12px 0; padding: 12px 0 4px; }
.mapa--s .mapa__card-a::after { bottom: 0; }
.mapa--s .mapa__card-t { grid-column: 1 / -1; font-size: 22px; margin-top: 4px; }
.mapa--s .mapa__card-meta { grid-column: 1 / -1; margin-top: 5px; font-size: 12.5px; }

/* tarjeta en el flujo (data-card-host; la portada en móvil): debajo del plano, siempre abierta (cambia de casa al
   tocar otro punto), foto 4:3 a todo el ancho. Su alto está reservado desde el primer pintado (::before: foto +
   cuerpo de alto fijo), así nada se mueve al rellenarla */
[data-mapa-card] { display: grid; }
[data-mapa-card]::before { content: ""; grid-area: 1 / 1; padding-top: calc((100% - 14px) * .75 + 142px); }
.mapa__card.is-host {
  grid-area: 1 / 1; align-self: start;
  position: relative; left: auto; top: auto; z-index: auto; width: auto;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none;
  box-shadow: none;
}
.mapa__card.is-host .mapa__card-body { height: 134px; overflow: hidden; padding: 15px 16px 0; }
.mapa__card.is-host :is(.mapa__card-n, .mapa__card-t, .mapa__card-meta) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa__card.is-host .mapa__card-t { font-size: 28px; margin-top: 7px; }
.mapa__card.is-host .mapa__card-meta { margin-top: 8px; }
.mapa__card.is-host .mapa__card-a { margin-top: 10px; padding: 8px 0 6px; }
.mapa__card.is-host .mapa__card-osm { display: none; }

/* ---------------------------------------------------------------- leyenda y créditos */
.mapa__legend {
  position: absolute;
  left: 28px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  font: 500 9px/1 'Switzer', system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--m-label-2);
  pointer-events: none;
}
.mapa__north { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 12px; letter-spacing: 0; color: var(--m-gold-ink); }
.mapa__north i { display: block; width: 0; height: 0; border: 3px solid transparent; border-bottom: 9px solid var(--m-gold); border-top: 0; }
.mapa__scale { display: flex; flex-direction: column; gap: 5px; }
.mapa__scale i { display: block; height: 4px; border: 1px solid currentColor; border-top: 0; opacity: .8; }
.mapa__scale b { font-weight: 500; }
.mapa__attr {
  position: absolute;
  right: 26px;
  bottom: 24px;
  z-index: 3;
  margin: 0;
  font: 400 9px/1 'Switzer', system-ui, sans-serif;
  letter-spacing: .03em;
  color: var(--m-label-2);
}
.mapa__attr a { color: inherit; text-decoration: none; }
.mapa__attr a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mapa__attr a:focus-visible { outline: 2px solid var(--m-gold-ink); outline-offset: 3px; }
.mapa--s .mapa__legend { left: 18px; bottom: 17px; gap: 12px; }
.mapa--s .mapa__attr { right: 16px; bottom: 16px; font-size: 8.5px; }
.mapa.has-card.mapa--s .mapa__legend, .mapa.has-card.mapa--s .mapa__attr,
.mapa.is-autocard.mapa--s .mapa__legend, .mapa.is-autocard.mapa--s .mapa__attr { opacity: 0; }
/* con la tarjeta acoplada encima de los créditos (móvil), los créditos van en la propia tarjeta (ODbL) */
.mapa__card-osm { display: none; }
.mapa--s .mapa__card-osm { display: block; position: absolute; z-index: 1; right: 0; bottom: 0; margin: 0; padding: 3px 6px 3px 7px; background: var(--m-card-bg); font: 400 8px/1 'Switzer', system-ui, sans-serif; letter-spacing: .03em; color: var(--m-card-mute); }

/* ---------------------------------------------------------------- zona aproximada (data-area, fichas)
   Un velo dorado muy suave bajo las calles, un núcleo algo más denso y un anillo fino discontinuo encima: se lee
   «por aquí», nunca «aquí». Sin punto, sin calle en dorado. El rótulo va en el borde superior del anillo. */
.m-area__f { fill: rgba(169, 139, 98, .13); stroke: none; }
.m-area__f2 { fill: rgba(169, 139, 98, .1); stroke: none; }
.m-area__r { fill: none; stroke: var(--m-gold); stroke-width: calc(var(--u, 1) * 1.1px); stroke-dasharray: calc(var(--u, 1) * 5px) calc(var(--u, 1) * 4px); opacity: .9; }
[data-theme="night"] .m-area__f { fill: rgba(201, 169, 120, .12); }
[data-theme="night"] .m-area__f2 { fill: rgba(201, 169, 120, .09); }
.mapa__area-tag {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  padding: 7px 11px 6px 12px; background: var(--m-bg); border: 1px solid var(--m-card-line);
  font: 500 10px/1 'Switzer', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: var(--m-gold-ink); white-space: nowrap; pointer-events: none;
}
.mapa--s .mapa__area-tag { font-size: 9px; letter-spacing: .16em; padding: 6px 9px 5px 10px; }
.mapa.is-pre .mapa__area-tag { opacity: 0; }
.mapa.is-in .m-area-f { transition: opacity .9s ease .25s; }
.mapa.is-in .m-area-r { transition: opacity .8s ease .45s; }
.mapa.is-in .mapa__area-tag { transition: opacity .6s ease .6s; }

/* ---------------------------------------------------------------- entrada (solo si hay movimiento) */
.mapa.is-pre .m-g, .mapa.is-pre .mapa__b, .mapa.is-pre .mapa__legend, .mapa.is-pre .mapa__attr { opacity: 0; }
.mapa.is-pre .mapa__dot, .mapa.is-pre .mapa__rombo { opacity: 0; transform: scale(.3); }
.mapa.is-pre .mapa__ring, .mapa.is-off .mapa__ring { animation-play-state: paused; }
.mapa.is-pre .mapa__ring { opacity: 0; }
.mapa.is-pre .mapa__tag-in { opacity: 0; transform: translateY(6px); }
.mapa.is-pre .mapa__tag::before { opacity: 0; }
/* todo en ≤ 1,5 s (29-10, ronda 2; antes ~3,9 s y la tarjeta esperaba al final): avenidas y calles en dos tiempos,
   parques, barrios y rótulos, y los marcadores uno a uno desde 0,3 s (el último acaba a 1,46 s) */
.mapa.is-in:not(.is-done) .mapa__tag::before { transition: opacity .6s ease calc(.4s + var(--i, 0) * .06s); }
.mapa.is-in .m-parks, .mapa.is-in .m-water { transition: opacity .9s ease .3s; }
.mapa.is-in .m-roads-r, .mapa.is-in .m-roads-t { transition: opacity 1s ease .15s; }
/* avenidas y calles principales: funden en dos tiempos (sin trazos animados) */
.mapa.is-in .m-roads-a { transition: opacity .8s ease 0s; }
.mapa.is-in .m-roads-p { transition: opacity .9s ease .08s; }
.mapa.is-in .m-hls { transition: opacity .7s ease .5s; }
.mapa__name { font-variant-numeric: lining-nums; }
.mapa.is-in .m-streets { transition: opacity .7s ease .7s; }
.mapa.is-in .mapa__b { transition: opacity .7s ease calc(.45s + var(--d, 0s)); }
.mapa.is-in .mapa__legend, .mapa.is-in .mapa__attr { transition: opacity .6s ease .8s; }
.mapa.is-in:not(.is-done) .mapa__dot, .mapa.is-in:not(.is-done) .mapa__rombo { transition: transform .7s var(--m-ease) calc(.3s + var(--i, 0) * .06s), opacity .45s ease calc(.3s + var(--i, 0) * .06s); }
.mapa.is-in:not(.is-done) .mapa__tag-in { transition: transform .7s var(--m-ease) calc(.4s + var(--i, 0) * .06s), opacity .55s ease calc(.4s + var(--i, 0) * .06s); }
.mapa__pin--office .mapa__rombo { transform: rotate(45deg); }
.mapa.is-pre .mapa__pin--office .mapa__rombo { transform: rotate(45deg) scale(.3); }

@media (prefers-reduced-motion: reduce) {
  .mapa__ring { animation: none; opacity: .3; transform: none; }
  .mapa *, .mapa *::before, .mapa *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}