.cu-ubic {
  --verde: #2e4a44;
  --verde-gris: #6b7a73;
  --acento: #b5643c;
  --crema: #f5efe5;
  --filete: #2e4a4424;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Avenir, "Helvetica Neue", Arial, sans-serif;
  --curva-salida: cubic-bezier(.16, 1, .3, 1);
  box-sizing: border-box;
  width: 100%;
  max-width: 1248px;
  font-family: var(--sans);
  color: var(--verde);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
}

.cu-ubic *, .cu-ubic :before {
  box-sizing: border-box;
}

.cu-ubic .ini-segmentos {
  margin-bottom: 20px;
}

.cu-ubic .ini-segmentos svg {
  flex: none;
}

.cu-ubic .ini-ubicacion__cuerpo {
  align-items: start;
}

.cu-ubic .ini-destinos__lista li {
  margin: 0;
}

.cu-ubic .cu-enlaces {
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  display: flex;
}

.cu-ubic .cu-enlaces a {
  color: var(--verde);
  font: 500 13px var(--sans);
  box-shadow: inset 0 0 0 1px var(--filete);
  background: #fff;
  border-radius: 10px;
  padding: 9px 16px;
  text-decoration: none;
}

.cu-ubic .ini-nota {
  color: var(--verde-gris);
  font-size: 12.5px;
  margin-top: 18px !important;
}

.cu-ubic .ini-segmentos {
  background: #2e4a4412;
  border-radius: 12px;
  gap: 2px;
  margin-bottom: 22px;
  padding: 4px;
  display: inline-flex;
}

.cu-ubic .ini-segmentos button {
  font: 500 14px/1 var(--sans);
  color: #4b5d57;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  transition: background-color .3s, color .3s, box-shadow .3s;
  display: inline-flex;
}

.cu-ubic .ini-segmentos [aria-selected="true"] {
  color: var(--verde);
  background: #fff;
  box-shadow: 0 1px 2px #1c2b271a, 0 6px 16px -10px #1c2b2766;
}

.cu-ubic .ini-ubicacion__cuerpo {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: clamp(20px, 4vw, 64px);
  display: grid;
}

.cu-ubic .ini-ubicacion__cuerpo[hidden] {
  display: none;
}

.cu-ubic .ini-destinos__lista[data-destinos] {
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  display: grid;
}

@media (width <= 680px) {
  .cu-ubic .ini-destinos__lista[data-destinos] {
    grid-template-columns: 1fr;
  }
}

.cu-ubic .ini-filtros {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  display: flex;
}

.cu-ubic .ini-filtros button {
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  color: #4b5d57;
  background: #2e4a440f;
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  transition: background-color .25s, color .25s;
}

.cu-ubic .ini-filtros button:hover {
  background: #2e4a441f;
}

.cu-ubic .ini-filtros button {
  color: #4b5d57 !important;
}

.cu-ubic .ini-destinos__lista {
  border-top: 1px solid var(--filete);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cu-ubic .ini-destinos__lista li {
  border-bottom: 1px solid var(--filete);
  border-radius: 8px;
  outline: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 -10px;
  padding: 12px 10px;
  transition: background-color .25s;
  display: flex;
}

.cu-ubic .ini-destinos__lista li.activo, .cu-ubic .ini-destinos__lista li:focus-visible {
  background: #b5643c14;
}

.cu-ubic .ini-destinos__lista li.fuera {
  display: none;
}

.cu-ubic .ini-destino__nombre {
  color: var(--verde);
  gap: 2px;
  font-size: 15.5px;
  display: grid;
}

.cu-ubic .ini-destino__nombre small {
  color: var(--verde-gris);
  font-size: 12px;
}

.cu-ubic .ini-destinos__lista b {
  font-family: var(--serif);
  color: var(--verde);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 26px;
  font-weight: 400;
}

.cu-ubic .ini-destinos__lista b small {
  font-family: var(--sans);
  color: var(--verde-gris);
  font-size: 12px;
}

.cu-ubic .ini-destinos__lista li.activo b {
  color: var(--acento);
}

.cu-ubic .ini-mapa {
  box-shadow: inset 0 0 0 1px var(--filete);
  background: #fbf8f2;
  border-radius: 16px;
  overflow: hidden;
}

.cu-ubic .ini-mapa svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (width <= 900px) {
  .cu-ubic .ini-vivienda__dos, .cu-ubic .ini-ubicacion__cuerpo, .cu-ubic .ini-contacto__dentro {
    grid-template-columns: 1fr;
  }
}

@media (width <= 680px) {
  .cu-ubic .ini-segmentos {
    display: flex;
  }

  .cu-ubic .ini-segmentos button {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    font-size: 13px;
  }
}

.cu-ubic .ini-mapa--ciudad svg {
  max-height: none;
}

.cu-ubic .mc-fondo {
  fill: #fbf8f2;
}

.cu-ubic .mc-parque {
  fill: #d9e4d2;
}

.cu-ubic .mc-calle, .cu-ubic .mc-avenida, .cu-ubic .mc-via-rapida {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cu-ubic .mc-calle {
  stroke: #ebe4d8;
  stroke-width: 5px;
}

.cu-ubic .mc-avenida {
  stroke: #ddd3c2;
  stroke-width: 9px;
}

.cu-ubic .mc-via-rapida {
  stroke: #cdbfa6;
  stroke-width: 14px;
}

.cu-ubic .mc-rotulo {
  font: 500 25px var(--sans);
  fill: #6f7f78;
  letter-spacing: .03em;
  paint-order: stroke;
  stroke: #fbf8f2;
  stroke-width: 8px;
  stroke-linejoin: round;
}

.cu-ubic .mc-rutas path {
  fill: none;
  stroke: var(--acento);
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .3s;
}

.cu-ubic .mc-rutas path.activo {
  opacity: .9;
}

.cu-ubic .mc-destino {
  cursor: default;
  transition: opacity .3s;
}

.cu-ubic .mc-destino circle, .cu-ubic .mc-destino path {
  fill: var(--verde);
  stroke: #fff;
  stroke-width: 3px;
  transition: fill .3s, r .3s var(--curva-salida);
}

.cu-ubic .mc-destino text {
  paint-order: stroke;
  stroke: #fbf8f2;
  stroke-width: 8px;
  stroke-linejoin: round;
}

.cu-ubic .mc-nombre {
  font: 600 29px var(--sans);
  fill: var(--verde);
}

.cu-ubic .mc-dato {
  font: 500 24px var(--sans);
  fill: #5d6f68;
  font-variant-numeric: tabular-nums;
}

.cu-ubic .mc-destino.activo circle, .cu-ubic .mc-destino.activo path {
  fill: var(--acento);
  r: 15px;
}

.cu-ubic .mc-destino.activo .mc-dato {
  fill: var(--acento);
  font-weight: 600;
}

.cu-ubic .ini-mapa.con-activo .mc-destino:not(.activo) {
  opacity: .35;
}

.cu-ubic .mc-destino.fuera {
  opacity: .1 !important;
}

.cu-ubic .mc-destino--oculto text {
  opacity: 0;
  transition: opacity .25s;
}

.cu-ubic .mc-destino--oculto circle {
  fill: #8f9c95;
}

.cu-ubic .mc-destino--oculto.activo text {
  opacity: 1;
}

.cu-ubic .mc-torre circle:first-child {
  fill: #b5643c33;
}

.cu-ubic .mc-torre circle:last-child {
  fill: var(--acento);
  stroke: #fff;
  stroke-width: 3px;
}

.cu-ubic .mc-torre text {
  font: 400 40px var(--serif);
  fill: var(--verde);
  paint-order: stroke;
  stroke: #fbf8f2;
  stroke-width: 6px;
}

.cu-ubic .mc-norte path {
  fill: var(--verde);
}

.cu-ubic .mc-norte text, .cu-ubic .mc-escala text {
  font: 600 24px var(--sans);
  fill: var(--verde);
}

.cu-ubic .mc-escala path {
  stroke: var(--verde);
  stroke-width: 2px;
  fill: none;
}

.cu-ubic .mc-credito {
  font: 400 20px var(--sans);
  fill: #8a8f85;
}

.cu-ubic .ini-destinos__lista li[data-nombre] {
  cursor: default;
}

@media (width <= 680px) {
  .cu-ubic .ini-mapa--ciudad {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: 72svh;
    overflow: auto;
  }

  .cu-ubic .ini-mapa--ciudad svg {
    width: 900px;
    max-width: none;
  }
}

.cu-ubic .ini-cercano {
  gap: 10px;
  margin: 0 0 28px;
  display: grid;
}

.cu-ubic .ini-cercano figcaption {
  color: #4b5d57;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  display: flex;
}

.cu-ubic .ini-cercano figcaption b {
  font-family: var(--serif);
  color: var(--verde);
  font-size: 20px;
  font-weight: 400;
}

.cu-ubic .ini-mapa--cerca svg {
  width: 100%;
  height: auto;
  display: block;
}

.cu-ubic .mk-fondo {
  fill: #f1ebe0;
}

.cu-ubic .mk-parque {
  fill: #d6e2cd;
}

.cu-ubic .mk-edificio {
  fill: #e4dccf;
  stroke: #d8cfbf;
  stroke-width: .8px;
}

.cu-ubic .mk-borde, .cu-ubic .mk-calle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cu-ubic .mk-borde {
  stroke: #d5cbbb;
}

.cu-ubic .mk-calle {
  stroke: #fffdf8;
}

.cu-ubic .mk-calle--primary, .cu-ubic .mk-calle--secondary {
  stroke: #fbf3e4;
}

.cu-ubic .mk-camellon {
  fill: #c9d9bf;
  stroke: #b9cdb0;
  stroke-width: 1px;
}

.cu-ubic .mk-anillo {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2px;
  stroke-dasharray: 6 7;
  opacity: .7;
}

.cu-ubic .mk-anillo-texto {
  font: 600 17px var(--sans);
  fill: var(--acento);
  letter-spacing: .04em;
  paint-order: stroke;
  stroke: #f1ebe0;
  stroke-width: 5px;
}

.cu-ubic .mk-rotulo {
  font: 500 14.5px var(--sans);
  fill: #6c7a73;
  letter-spacing: .12em;
  paint-order: stroke;
  stroke: #fffdf8;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.cu-ubic .mk-rotulo--grande {
  fill: var(--verde);
  letter-spacing: .16em;
  stroke: #c9d9bf;
  font-size: 19px;
  font-weight: 600;
}

.cu-ubic .mk-torre rect {
  fill: var(--verde);
  stroke: #fff;
  stroke-width: 3px;
}

.cu-ubic .mk-torre text {
  font: 400 30px var(--serif);
  fill: var(--verde);
  paint-order: stroke;
  stroke: #f1ebe0;
  stroke-width: 7px;
}

.cu-ubic .mk-torre .mk-torre-sub {
  font: 500 15px var(--sans);
  fill: #5d6f68;
  letter-spacing: .08em;
}

.cu-ubic .mk-norte path {
  fill: var(--verde);
}

.cu-ubic .mk-norte text, .cu-ubic .mk-escala text {
  font: 600 16px var(--sans);
  fill: var(--verde);
}

.cu-ubic .mk-escala path {
  stroke: var(--verde);
  stroke-width: 2px;
  fill: none;
}

.cu-ubic .mk-credito {
  font: 400 13px var(--sans);
  fill: #8a8f85;
}

@media (width <= 680px) {
  .cu-ubic .ini-mapa--cerca {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }

  .cu-ubic .ini-mapa--cerca svg {
    width: 820px;
    max-width: none;
  }
}

a.cu-logo {
  display: contents;
}

a.cu-logo img {
  cursor: pointer;
  transition: opacity .3s;
}

a.cu-logo:hover img, a.cu-logo:focus-visible img {
  opacity: .7;
}

.cu-ubic button {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--sans);
}

.cu-ubic .ini-segmentos button {
  color: #4b5d57 !important;
}

.cu-ubic .ini-segmentos button svg {
  color: inherit;
}

.cu-ubic .ini-segmentos [aria-selected="true"] {
  color: var(--verde) !important;
}

.cu-ubic .ini-filtros button {
  color: #4b5d57;
  background: #2e4a4412;
  color: #4b5d57 !important;
}

.cu-ubic .ini-filtros [aria-pressed="true"] {
  background: var(--verde);
  color: var(--crema) !important;
}

.cu-ubic .lg-pin {
  cursor: default;
  transition: opacity .3s;
}

.cu-ubic .lg-pin circle {
  transition: r .25s var(--curva-salida), fill .25s;
}

.cu-ubic .lg-pin.activo circle {
  r: 19px;
  fill: var(--acento);
}

.cu-ubic .ini-mapa.con-activo .lg-pin:not(.activo) {
  opacity: .35;
}

.cu-ubic .lg-pin.fuera {
  opacity: .1 !important;
}

.cu-ubic .ini-mapa--barrio svg {
  width: 100%;
  height: auto;
  display: block;
}

.cu-ubic .cu-lugares {
  display: block;
}

.cu-ubic .cu-lugares li {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.cu-ubic .cu-lugares li.fuera {
  display: none;
}

.cu-ubic .cu-num {
  background: var(--verde);
  color: #fff;
  width: 26px;
  height: 26px;
  font: 600 12px var(--sans);
  border-radius: 50%;
  place-items: center;
  display: inline-grid;
}

.cu-ubic .cu-lugares li.activo .cu-num {
  background: var(--acento);
}

.cu-ubic .cu-var {
  font: italic 400 13px var(--serif);
  color: var(--verde-gris);
}

@media (width <= 680px) {
  .cu-ubic .ini-mapa--barrio {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }

  .cu-ubic .ini-mapa--barrio svg {
    width: 900px;
    max-width: none;
  }
}

.cu-ubic .ini-ubicacion__cuerpo[data-modo-ver="barrio"] {
  grid-template-columns: minmax(0, 1fr);
}

.cu-ubic .cu-lugares {
  columns: 2;
  column-gap: 28px;
}

.cu-ubic .cu-lugares li {
  break-inside: avoid;
}

@media (width <= 900px) {
  .cu-ubic .cu-lugares {
    columns: 1;
  }
}

@media (width <= 680px) {
  .cu-ubic :is(.ini-mapa--ciudad, .ini-mapa--cerca, .ini-mapa--barrio) {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    max-height: none;
    overflow: auto hidden;
  }
}
