/* mapa.css — maqueta estática del mapa. El marcado y el CSS quedan listos para montar un mapa real
   en .mapa__fondo; los pines son radios nativos: se recorren con flechas y abren su tarjeta al marcarse. */
.mapa__cabecera { text-align: center; margin-bottom: var(--esp-7); }
.mapa__lienzo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-xl);
  background: var(--kv-bruma);
  box-shadow: var(--sombra-1);
}
.mapa__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.mapa__punto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
}
.mapa__pin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  justify-content: flex-end;
  cursor: pointer;
}
.mapa__marca {
  width: 30px;
  height: 38px;
  color: var(--kv-lavanda);
  filter: drop-shadow(0 4px 6px rgba(34, 28, 51, .18));
  transition: transform var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva);
  transform-origin: 50% 100%;
  border-radius: 50%;
}
.mapa__marca svg { width: 100%; height: 100%; }
.mapa__pin:hover .mapa__marca { transform: translateY(-2px) scale(1.06); }
.mapa__nombre {
  position: absolute;
  left: calc(100% - var(--esp-1));
  bottom: var(--esp-3);
  white-space: nowrap;
  padding: 2px var(--esp-2);
  border-radius: var(--radio-sm);
  background: var(--kv-lino-velo);
  color: var(--kv-tinta-suave);
  font-size: var(--txt-xs);
  font-weight: 600;
}
/* Pin seleccionado: más grande, lavanda profunda y con halo */
.mapa__punto:has(.mapa__radio:checked) .mapa__marca {
  color: var(--kv-lavanda-profunda);
  transform: scale(1.18);
}
.mapa__punto:has(.mapa__radio:checked) .mapa__nombre { color: var(--kv-tinta); }
.mapa__punto:has(.mapa__radio:focus-visible) .mapa__marca { box-shadow: var(--anillo-foco); }
.mapa__punto:has(.mapa__radio:checked) { z-index: 3; }

.mapa__tarjeta {
  display: none;
  position: absolute;
  bottom: calc(100% + var(--esp-2));
  left: 50%;
  width: 232px;
  transform: translateX(-50%);
  grid-template-columns: 64px 1fr;
  gap: var(--esp-3);
  align-items: center;
  padding: var(--esp-3);
  border-radius: var(--radio-md);
  background: var(--kv-nube);
  box-shadow: var(--sombra-2);
  text-align: left;
}
.mapa__punto:has(.mapa__radio:checked) .mapa__tarjeta {
  display: grid;
  animation: mapa-aparece var(--mov-medio) var(--curva);
}
@keyframes mapa-aparece { from { opacity: 0; } }
/* Cerca de los bordes la tarjeta se pega al lado contrario para no salirse del lienzo */
.mapa__punto--izquierda .mapa__tarjeta { left: 0; transform: none; }
.mapa__punto--derecha .mapa__tarjeta { left: auto; right: 0; transform: none; }
.mapa__punto--abajo .mapa__tarjeta { bottom: auto; top: calc(100% + var(--esp-1)); }

.mapa__tarjeta-foto { width: 64px; height: 80px; object-fit: cover; border-radius: var(--radio-sm); background: var(--kv-bruma); }
.mapa__tarjeta-texto { display: grid; gap: 2px; min-width: 0; }
.mapa__tarjeta-nombre { font-family: var(--fuente-serif); font-size: var(--txt-base); color: var(--kv-tinta); }
.mapa__tarjeta-precio { font-size: var(--txt-sm); font-weight: 600; color: var(--kv-tinta-suave); font-variant-numeric: tabular-nums; }
.mapa__tarjeta-enlace { font-size: var(--txt-xs); font-weight: 600; margin-top: var(--esp-1); }

.mapa__leyenda {
  margin-top: var(--esp-3);
  text-align: center;
  font-size: var(--txt-xs);
  color: var(--kv-tinta-tenue);
}

@media (min-width: 900px) {
  .mapa__lienzo { aspect-ratio: 2 / 1; }
  .mapa__marca { width: 34px; height: 44px; }
}


/* ===== Mapa real de inicio (Leaflet) ===== */
.mapa__lienzo--real { overflow: hidden; }
.mapa__lienzo--real.leaflet-container { font-family: var(--fuente-sans); background: var(--kv-bruma); }
.mapa__lienzo--sin-mapa::after { content: ''; }
/* Los mosaicos de OSM son chillones: se apagan para que el mapa se sienta de la casa */
.mapa__lienzo--real .leaflet-tile-pane { filter: saturate(.45) contrast(.9) brightness(1.05); }
.mapa__pin-real { color: var(--kv-lavanda-profunda); filter: drop-shadow(0 4px 6px rgba(34, 28, 51, .22)); }
.mapa__pin-real svg { width: 30px; height: 38px; display: block; }
.leaflet-popup-content-wrapper { border-radius: var(--radio-md); box-shadow: var(--sombra-2); padding: 0; }
.leaflet-popup-content { margin: var(--esp-3); }
.leaflet-popup-tip { box-shadow: none; }
.mapa__popup { display: grid; grid-template-columns: 64px 1fr; gap: var(--esp-3); align-items: center; min-width: 200px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--kv-tinta-tenue); }
.leaflet-control-attribution { font-size: 10px; background: var(--kv-lino-velo); }
.leaflet-bar a { color: var(--kv-tinta); }

/* ===== Mapa de la ficha: fachada + Google incrustado ===== */
.mapa-ficha { display: grid; gap: var(--esp-4); }
.mapa-ficha__fachada,
.mapa-ficha__iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radio-xl);
  background: var(--kv-bruma);
}
.mapa-ficha__fachada {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--esp-4);
  padding: var(--esp-6);
  text-align: center;
  /* Curvas suaves de fondo, como la maqueta: dice «mapa» sin cargar nada */
  background-image: repeating-linear-gradient(170deg, transparent 0 46px, var(--kv-perla) 46px 47px);
}
.mapa-ficha__direccion { font-weight: 600; color: var(--kv-tinta); }
.mapa-ficha__aviso { font-size: var(--txt-xs); color: var(--kv-tinta-tenue); }
.mapa-ficha__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
@media (min-width: 600px) { .mapa-ficha__fachada, .mapa-ficha__iframe { aspect-ratio: 16 / 9; } }