/* ============================================================
   plano-section.css — Sección "Plano del complejo" en la one-page
   Bubble con el plano + hotspots clickeables.
============================================================ */

.plano-sec { background: var(--c-cream); }
.plano-sec__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center;
}
.plano-sec__info .body-lg { color: var(--c-mid); margin: 1rem 0 1.6rem; max-width: 46ch; }

.plano-sec__leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: var(--s4); }
.plano-sec__leyenda span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--c-gris); }
.plano-sec__leyenda i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* Bubble */
.plano-sec__bubble {
  position: relative; max-width: 430px; margin: 0 auto; justify-self: center;
  background: #fff; border-radius: 26px; padding: 12px;
  box-shadow: var(--depth-4, 0 24px 48px rgba(0,0,0,0.14));
}
.plano-sec__bubble::before {
  content: ''; position: absolute; inset: 0; border-radius: 26px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); pointer-events: none;
}
.plano-sec__img { width: 100%; display: block; border-radius: 16px; }
.plano-sec__pins { position: absolute; inset: 12px; pointer-events: none; }

.ps-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 9px;
  border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto; padding: 0;
  transition: transform 0.16s ease;
}
.ps-pin span { font-size: 14px; line-height: 1; color: #fff; }
.ps-pin:hover { transform: translate(-50%, -50%) scale(1.22); z-index: 5; }

@media (max-width: 860px) {
  .plano-sec__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .plano-sec__bubble { max-width: 360px; }
}