/* ══════════════════════════════════════════════════════════
   TOKENS DE MARCA · THE VIEW BOQUETE
   ══════════════════════════════════════════════════════════ */
:root {
  --tvb-main:       #25463F;
  --tvb-secondary:  #F7CA77;
  --tvb-lightgreen: #277C6A;
  --tvb-gold:       #C8A96E;
  --tvb-offwhite:   #EFEFEF;
  --tvb-surface:    #FFFFFF;
  --tvb-border:     #D8D8D0;
  --tvb-text:       #1A2A24;
  --tvb-text-muted: #5E6E68;
  --tvb-text-muted-light: #B4C3BD;

  --st-avail:              #277C6A;
  --st-avail-stroke:       #ffffff;
  --st-sold:               #7d7d7d;
  --st-sold-stroke:        #ffffff;
  --st-immediate:          #3AAB8E;
  --st-immediate-stroke:   #ffffff;
  --st-construction:       #D97333;
  --st-construction-stroke:#ffffff;
  --st-green-area:         #2F4A44;
  --st-green-area-stroke:  #ffffff;
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #FFFFFF; }
.sep-section *, .sep-section *::before, .sep-section *::after,
.modal-ov *,    .modal-ov *::before,    .modal-ov *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sep-section {
  position: relative;
  font-family: 'Inter', Arial, sans-serif;
  background: #FFFFFF;
  color: var(--tvb-text);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.street {
  fill: #eaeaea;           /* gris claro para la base de calles */
  stroke: none;
  pointer-events: none;    /* no son interactivas, solo decorativas */
}

.street-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  fill: #25463F;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2.5px;
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  text-transform: uppercase;
}

.map-wrap { position: absolute; inset: 0; z-index: 1; background: #FFFFFF; overflow: hidden; }
.svg-outer { width: 100%; height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch;
             cursor: grab; touch-action: none; user-select: none; }
.svg-outer.dragging { cursor: grabbing; }
.svg-outer svg { display: block; width: 100%; height: 100%;
                 transition: transform .25s cubic-bezier(.22,1,.36,1); transform-origin: 0 0; }

.block { fill: #fff; stroke: none; pointer-events: none; }
.green-area { fill: var(--st-green-area); stroke: var(--st-green-area-stroke); stroke-width: .5; pointer-events: none; }
.extra-area { stroke-width: .8; pointer-events: none; opacity: .92; }
.extra-area-label {
  fill: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.lp { cursor: pointer; stroke-width: .5; transition: fill .16s ease, filter .16s ease, opacity .18s ease; }
.lp.avail        { fill: var(--st-avail);        stroke: var(--st-avail-stroke); }
.lp.avail:hover  { fill: var(--tvb-gold);         stroke: #ffffff; }
.lp.sold         { fill: var(--st-sold);          stroke: var(--st-sold-stroke);         cursor: not-allowed; }
.lp.immediate    { fill: var(--st-immediate);     stroke: var(--st-immediate-stroke); }
.lp.immediate:hover { fill: var(--tvb-gold);      stroke: #ffffff; }
.lp.construction { fill: var(--st-construction);  stroke: var(--st-construction-stroke); cursor: not-allowed; }
.lp.greenarea    { fill: var(--st-green-area);    stroke: var(--st-green-area-stroke);   cursor: not-allowed; }
.lp.sel {
  fill: var(--tvb-secondary) !important;
  stroke: #ffffff !important;
  stroke-width: .5 !important;
  filter: drop-shadow(0 0 7px rgba(247,202,119,.65));
}
.lp.dimmed { opacity: .18; cursor: default !important; }
.ll.dimmed { opacity: .18; }

.ll { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
      fill: #fff; pointer-events: none; text-anchor: middle; dominant-baseline: middle;
      letter-spacing: .3px; transition: opacity .18s ease; }
.ll.muted { fill: rgba(255,255,255,.55); }
.ll-area { font-family: 'Barlow Condensed', sans-serif; font-size: 7px; font-weight: 500;
           fill: rgba(255,255,255,.8); letter-spacing: .2px; }
.ll-area.muted { fill: rgba(255,255,255,.4); }

.overlay-wrap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.overlay-content {
    position: relative;
  width: 100%; pointer-events: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(216, 216, 208, 0.5);
  box-shadow: 0 6px 24px rgba(37, 70, 63, 0.08);
  padding: 15px 36px;
  max-height: 720px; overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease,
              padding .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.overlay-content:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(logos/logo-white-theviewboquete-mountains.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .1;
    max-width: 1280px;
}
.overlay-wrap.collapsed .overlay-content {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
  transform: translateY(-6px); border-bottom-color: transparent;
}

.sep-header { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 10px; margin: 0 auto 10px; flex-wrap: wrap; max-width: 1280px; width: 100%; }
.sep-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; font-weight: 600;
               letter-spacing: 3px; text-transform: uppercase; color: var(--tvb-lightgreen);
               margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.sep-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 2px;
                       background: var(--tvb-gold); flex-shrink: 0; }
.sep-title { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 700;
             text-transform: uppercase; letter-spacing: 1px; color: var(--tvb-main); line-height: 1.05; }
.overlay-content.dark {
    background: rgb(37 70 63 / 86%);
    border-bottom: 1px solid rgb(75 123 110 / 64%);
}
.overlay-content.dark .sep-eyebrow { color: var(--tvb-gold); }
.overlay-content.dark .sep-title { color: white; }
.overlay-content.dark .sep-sub { color: var(--tvb-text-muted-light); }
.overlay-content.dark .leg-item { background: rgb(255 255 255 / 10%); color: white; border: 1px solid rgb(255 255 255 / 25%); }
.overlay-content.dark .leg-item:hover { background: rgb(200 169 110 / 10%); border-color: var(--tvb-gold);  }
.overlay-content.dark .leg-item.active { background: var(--tvb-offwhite); border-color: var(--tvb-offwhite); color: var(--tvb-main); }
.overlay-content.dark .leg-item.active .leg-dot { box-shadow: none; }
.overlay-content.dark .leg-dot { width: 11px; height: 11px; border-radius: 50%; border: solid 1px white; flex-shrink: 0; transition: box-shadow .18s; }
.overlay-content.dark .leg-all .leg-dot { background: var(--tvb-gold); }
.overlay-content.dark .plan-bar-label { color: var(--tvb-text-muted-light); }
.overlay-content.dark .plan-bar-label strong { color: var(--tvb-gold); }

.sep-title em { color: var(--tvb-gold); font-style: normal; }
.sep-sub { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400;
           color: var(--tvb-text-muted); margin-top: 6px; line-height: 1.5; max-width: 100%; }

.legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.leg-item { display: inline-flex; align-items: center; gap: 8px; background: var(--tvb-surface);
            border: 1px solid var(--tvb-border); padding: 7px 14px; border-radius: 100px;
            /*font-family: 'Barlow Condensed', sans-serif;*/ font-size: 11px; font-weight: 600;
            /*letter-spacing: 1px;*/ text-transform: uppercase; color: var(--tvb-main);
            white-space: nowrap; cursor: pointer; user-select: none;
            transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.leg-item:hover { border-color: var(--tvb-gold); transform: translateY(-1px); }
.leg-item.active { background: var(--tvb-main); border-color: var(--tvb-main); color: #fff; }
.leg-item.active .leg-dot { box-shadow: 0 0 0 2px rgba(247,202,119,.55); }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: box-shadow .18s; }
/*.leg-all { background: var(--tvb-main); color: #fff; border-color: var(--tvb-main); }*/
.leg-all .leg-dot { background: var(--tvb-gold); }

.plan-bar { display: flex; justify-content: space-between; align-items: center;
            gap: 16px; margin: 12px auto 0; flex-wrap: wrap; max-width: 1280px; width: 100%; }
.plan-bar-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; letter-spacing: 2px;
                  text-transform: uppercase; color: var(--tvb-text-muted); }
.plan-bar-label strong { color: var(--tvb-main); font-weight: 700; }
.zoom-ctrl { display: inline-flex; align-items: center; background: var(--tvb-surface);
             border: 1px solid var(--tvb-border); border-radius: 100px; padding: 4px; gap: 4px;
             box-shadow: 0 2px 8px rgba(37,70,63,.04); }
.zoom-btn { width: 34px; height: 34px; border: none; background: transparent; border-radius: 50%;
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
            color: var(--tvb-main); transition: background .15s, color .15s, transform .15s; }
.zoom-btn:hover { background: var(--tvb-gold); color: #fff; }
.zoom-btn:active { transform: scale(.92); }
.zoom-btn svg { width: 16px; height: 16px; }
.zoom-divider { width: 1px; height: 22px; background: var(--tvb-border); }
.zoom-readout { /*font-family: 'Barlow Condensed', sans-serif;*/ font-weight: 700; font-size: 13px;
                color: var(--tvb-main); padding: 0 10px; min-width: 50px; text-align: center; letter-spacing: 1px; }

/*.toggle-tab { pointer-events: none; padding: 10px 0 0; display: flex; justify-content: center; width: 100%; }*/

@media only screen and (max-width: 630px) {
    .leg-item { font-size: 9px; }
}

.toggle-tab {
  pointer-events: none;
  padding: 10px 16px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
}



/*.toggle-tab {
  pointer-events: auto;
  padding: 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: static;
}*/

.toggle-tab .zoom-ctrl {
  pointer-events: auto;
  position: static;
  flex: none;
}
.toggle-btn { pointer-events: auto; flex: none;; align-items: center; gap: 8px;
              background: var(--tvb-main); color: #fff; border: none; padding: 9px 20px;
              border-radius: 100px; font-family: 'Inter', sans-serif;
              font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
              cursor: pointer; box-shadow: 0 4px 16px rgba(37, 70, 63, .28), 0 0 0 1px rgba(247,202,119,.18);
              transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.toggle-btn:hover { background: var(--tvb-lightgreen); transform: translateY(-1px);
                    box-shadow: 0 6px 20px rgba(37, 70, 63, .35), 0 0 0 2px rgba(247,202,119,.3); }
.toggle-btn:active { transform: translateY(0) scale(.98); }
.toggle-icon { transform: translateY(2px) rotate(0deg); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.overlay-wrap.collapsed .toggle-icon { transform: translateY(2px) rotate(180deg); }

.lot-panel {
  display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 15; width: calc(100% - 32px); max-width: 760px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(216, 216, 208, 0.6); border-left: 4px solid var(--tvb-gold);
  border-radius: 10px; padding: 18px 24px; align-items: center; gap: 20px; flex-wrap: wrap;
  animation: panelIn .32s cubic-bezier(.22,1,.36,1); box-shadow: 0 12px 36px rgba(37,70,63,.18);
}
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.lp-close { position: absolute; top: 8px; right: 10px; background: transparent; border: none;
            color: var(--tvb-text-muted); cursor: pointer; font-size: 16px;
            width: 26px; height: 26px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background .15s, color .15s, transform .15s; }
.lp-close:hover { background: var(--tvb-offwhite); color: var(--tvb-main); transform: rotate(90deg); }
.lp-num { font-family: 'Barlow Condensed', sans-serif; font-size: 44px; font-weight: 700;
          color: var(--tvb-main); line-height: 1; letter-spacing: -1px; min-width: 70px; flex-shrink: 0; }
.lp-div { width: 1px; height: 48px; background: var(--tvb-border); flex-shrink: 0; }
.lp-info { flex: 1; min-width: 180px; }
.lp-tag { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
          font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; padding: 4px 13px;
          border-radius: 100px; margin-bottom: 6px; }
.lp-tag.avail        { background: rgba(39,124,106,.12);  color: var(--tvb-lightgreen); }
.lp-tag.immediate    { background: rgba(58,171,142,.14);  color: #23856B; }
.lp-tag.sold         { background: rgba(178,185,180,.22); color: #6C7570; }
.lp-tag.construction { background: rgba(217,115,51,.14);  color: #B85A20; }
.lp-tag.greenarea    { background: rgba(47,74,68,.14);    color: #1F3530; }
.lp-info h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600;
              text-transform: uppercase; letter-spacing: .5px; color: var(--tvb-main); margin-bottom: 2px; }
.lp-info p { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--tvb-text-muted); font-weight: 400; }

/* Modelos disponibles (panel lateral y modal) */
.lp-models, .modal-models { margin-top: 10px; }
.lp-models:empty, .modal-models:empty { display: none; }
.modal-models { margin: -6px 0 22px; }
.models-heading {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tvb-text-muted); margin-bottom: 6px; font-weight: 600;
}
.models-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.model-chip {
  display: inline-block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  background: rgba(39,124,106,.10); color: var(--tvb-lightgreen);
  padding: 4px 10px; border-radius: 100px; line-height: 1.4;
  border: none;
}
button.model-chip { cursor: default; }
button.model-chip.selectable {
  cursor: pointer; padding: 7px 14px; font-size: 13px;
  border: 1.5px solid rgba(39,124,106,.20); transition: .15s;
}
button.model-chip.selectable:hover {
  background: rgba(39,124,106,.18); border-color: var(--tvb-lightgreen);
}
button.model-chip.selectable.active {
  background: var(--tvb-lightgreen); color: #fff; border-color: var(--tvb-lightgreen);
  box-shadow: 0 2px 8px rgba(39,124,106,.25);
}
.models-empty {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--tvb-text-muted);
  font-style: italic;
}
.model-prices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px;
  animation: fadePrices .2s ease;
}
@keyframes fadePrices { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.model-prices .mp-row.total .s-value { color: var(--tvb-lightgreen); }
.model-prices .price-empty {
  font-size: 14px; font-weight: 500; color: var(--tvb-text-muted); font-style: italic;
}
.lp-wa { display: inline-flex; align-items: center; gap: 9px; background: #25D366;
         color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
         padding: 12px 22px; border-radius: 100px; border: none; cursor: pointer;
         text-decoration: none; white-space: nowrap;
         transition: background .2s, transform .2s, box-shadow .2s;
         box-shadow: 0 4px 14px rgba(37,211,102,.26); }
.lp-wa:hover { background: #1EBF5A; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,211,102,.34); }

.modal-ov { display: none; position: fixed; inset: 0; background: rgba(37,70,63,.72);
            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 999;
            align-items: center; justify-content: center; padding: 20px; }
.modal-ov.open { display: flex; }
.modal-card { background: var(--tvb-surface); border-radius: 12px; max-width: 400px; width: 100%;
              overflow: hidden; position: relative; animation: modalIn .26s cubic-bezier(.22,1,.36,1);
              box-shadow: 0 24px 60px rgba(0,0,0,.22); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); }
                     to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { background: var(--tvb-main); padding: 30px 28px 24px;
              border-bottom: 3px solid var(--tvb-gold); position: relative; }
.modal-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600;
                 letter-spacing: 2.5px; text-transform: uppercase; color: rgba(247,202,119,.7); margin-bottom: 6px; }
.modal-num { font-family: 'Barlow Condensed', sans-serif; font-size: 62px; font-weight: 700;
             color: #fff; line-height: 1; letter-spacing: -1px; margin-bottom: 12px; }
.modal-tag { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
             font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
             padding: 5px 14px; border-radius: 100px; }
.modal-tag.avail        { background: var(--tvb-secondary); color: var(--tvb-main); }
.modal-tag.immediate    { background: #3AAB8E;              color: #fff; }
.modal-tag.sold         { background: #B2B9B4;              color: #fff; }
.modal-tag.construction { background: #D97333;              color: #fff; }
.modal-tag.greenarea    { background: #2F4A44;              color: var(--tvb-gold); }
.modal-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.1);
               border: 1px solid rgba(247,202,119,.3); border-radius: 50%;
               width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
               cursor: pointer; color: rgba(255,255,255,.8); font-size: 14px;
               transition: background .18s, color .18s, transform .18s; }
.modal-close:hover { background: var(--tvb-secondary); color: var(--tvb-main);
                     border-color: var(--tvb-secondary); transform: rotate(90deg); }
.modal-body { padding: 24px 28px 28px; background: var(--tvb-offwhite); }
.modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.modal-stat { background: var(--tvb-surface); border-radius: 8px; padding: 14px 16px;
              border-bottom: 2px solid var(--tvb-gold); }
.modal-stat .s-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
                       letter-spacing: 1.5px; text-transform: uppercase; color: var(--tvb-text-muted); margin-bottom: 5px; }
.modal-stat .s-value { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700;
                       color: var(--tvb-main); line-height: 1.1; }
.modal-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
             background: #25D366; color: #fff; font-family: 'Inter', sans-serif; font-weight: 700;
             font-size: 16px; padding: 15px; border-radius: 100px; border: none; cursor: pointer;
             text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s;
             box-shadow: 0 4px 16px rgba(37,211,102,.28); }
.modal-cta:hover { background: #1EBF5A; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.36); }
.modal-note { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--tvb-text-muted);
              text-align: center; line-height: 1.55; margin-top: 14px; }
.modal-note strong { color: var(--tvb-main); font-weight: 600; }

@media (max-width: 768px) {
  .overlay-content { padding: 18px 18px 14px; }
  .sep-header     { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
  .sep-title      { font-size: 20px; }
  .sep-sub        { font-size: 13.5px; }
  .plan-bar       { flex-direction: column; align-items: flex-start; gap: 10px; }
  .plan-bar-label { font-size: 11px; }
  .lot-panel      { padding: 16px 18px; gap: 14px; bottom: 14px; width: calc(100% - 20px); }
  .lp-num         { font-size: 36px; min-width: 56px; }
  .lp-div         { display: none; }
  .lp-wa          { width: 100%; justify-content: center; font-size: 14px; padding: 11px 18px; }
  .modal-num      { font-size: 50px; }
  .modal-head     { padding: 24px 22px 20px; }
  .modal-body     { padding: 20px 22px 24px; }
  .toggle-btn     { font-size: 11.5px; padding: 8px 16px; }
}