:root {
  --green-950:#09271d;
  --green-900:#0f3426;
  --green-800:#174a34;
  --green-700:#266844;
  --green-600:#3d8c59;
  --green-500:#5ca66e;
  --cream:#f4f2e9;
  --paper:#f8f7f1;
  --ink:#102b20;
  --muted:#6e786f;
  --sold:#ed4b16;
  --available:#579967;
  --line:rgba(17,48,35,.12);
  --shadow:0 28px 80px rgba(17,43,31,.16);
}

#lp-loteo,#lp-loteo *{box-sizing:border-box}
#lp-loteo{
  width:100vw;
  max-width:none;
  min-height:100svh;
  margin:0 0 0 calc(50% - 50vw);
  padding:0;
  overflow:hidden;
  font-family:"Poppins",sans-serif;
  color:var(--ink);
  background:transparent;
}

#lp-loteo button{font:inherit}

.plano-ui{
  width:100%;
  height:100svh;
  min-height:760px;
  margin:0;
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 330px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.sidebar{
  position:relative;
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:20px 12px;
  color:white;
  background:
    radial-gradient(circle at 50% 0%,rgba(71,129,85,.34),transparent 30%),
    linear-gradient(180deg,var(--green-950),#071d16);
}

.logo-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(139,209,153,.28);
  border-radius:18px;
  font-size:29px;
  box-shadow:inset 0 0 24px rgba(94,171,110,.09);
}

.tool{
  width:64px;
  min-height:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:rgba(255,255,255,.76);
  border:0;
  border-radius:18px;
  background:transparent;
  cursor:pointer;
  transition:.22s ease;
}

.tool:hover,.tool.active{
  color:white;
  background:linear-gradient(145deg,rgba(69,139,84,.66),rgba(29,83,51,.78));
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}

.tool .ico{font-size:22px;line-height:1}
.tool small{font-size:10px}

.sidebar-separator{
  width:42px;
  height:1px;
  background:rgba(255,255,255,.12);
}

.map-area{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  background:transparent;
}

.map-header{
  position:absolute;
  z-index:20;
  top:14px;
  left:18px;
  right:18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  pointer-events:none;
}

.title-block{pointer-events:auto}
.title-block h1{
  margin:0;
  font-size:clamp(25px,2vw,38px);
  line-height:1;
  letter-spacing:-.035em;
}
.title-block p{
  margin:8px 0 0;
  color:var(--green-700);
  font-size:15px;
}

.top-controls{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px;
  border:1px solid rgba(20,50,36,.08);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 16px 36px rgba(22,48,35,.13);
}

.filter-btn,.zoom-btn{
  border:0;
  cursor:pointer;
  color:var(--ink);
  background:transparent;
  transition:.2s ease;
}

.filter-btn{
  min-height:42px;
  padding:0 17px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
}
.filter-btn:hover{background:rgba(31,99,60,.08)}
.filter-btn.active{
  color:white;
  background:linear-gradient(135deg,var(--green-800),var(--green-600));
  box-shadow:0 9px 20px rgba(22,89,53,.24);
}

.control-divider{
  width:1px;
  height:25px;
  margin:0 4px;
  background:rgba(20,50,36,.12);
}
.zoom-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:20px;
}
.zoom-btn:hover{color:white;background:var(--green-800)}

.viewport{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  cursor:default;
  touch-action:none;
  background:transparent;
}


.stage{
  width:100%;
  height:100%;
  transform:none!important;
  background:transparent;
}

.masterplan-svg{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.masterplan-svg text,
.masterplan-svg tspan{
  font-family:"Poppins",sans-serif!important;
  font-weight:700!important;
  text-rendering:geometricPrecision;
}

.masterplan-svg .lote{
  cursor:pointer;
  outline:none;
  transition:opacity .2s ease,filter .2s ease;
}

.masterplan-svg .lote polygon,
.masterplan-svg .lote path{
  vector-effect:non-scaling-stroke;
  transition:fill .24s ease,opacity .24s ease;
}

.masterplan-svg .lote[data-state="disponible"] polygon,
.masterplan-svg .lote[data-state="disponible"] path{
  fill:rgba(81,151,96,.18)!important;
}

.masterplan-svg .lote[data-state="vendido"] polygon,
.masterplan-svg .lote[data-state="vendido"] path{
  fill:rgba(220,94,51,.16)!important;
}

.masterplan-svg .lote[data-state="disponible"]:hover polygon,
.masterplan-svg .lote[data-state="disponible"]:hover path,
.masterplan-svg .lote[data-state="disponible"]:focus-visible polygon,
.masterplan-svg .lote[data-state="disponible"]:focus-visible path{
  fill:rgba(58,166,91,.58)!important;
  filter:drop-shadow(0 0 5px rgba(70,225,115,.28));
}

.masterplan-svg .lote[data-state="vendido"]:hover polygon,
.masterplan-svg .lote[data-state="vendido"]:hover path{
  fill:rgba(238,75,22,.34)!important;
}

.masterplan-svg .lote.hidden{
  opacity:.08;
  pointer-events:none;
}

.legend{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:18px;
  display:flex;
  gap:22px;
  padding:10px 18px;
  border:1px solid rgba(20,50,36,.1);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 28px rgba(18,47,34,.12);
  transform:translateX(-50%);
}

.legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
}
.dot{width:10px;height:10px;border-radius:50%}
.dot.available{background:var(--available)}
.dot.sold{background:var(--sold)}

.detail-panel{
  position:relative;
  z-index:25;
  margin:0;
  padding:22px;
  align-self:stretch;
  overflow:auto;
  color:white;
  border:1px solid rgba(115,178,126,.24);
  border-radius:0;
  background:
    radial-gradient(circle at 90% 0%,rgba(63,132,79,.20),transparent 30%),
    linear-gradient(180deg,#0c2f22,#071e17);
  box-shadow:0 24px 54px rgba(7,31,23,.27);
}

.panel-kicker{
  margin:0 0 6px;
  color:#8fcd8a;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.panel-head h2{
  margin:0;
  font-size:30px;
  letter-spacing:-.04em;
}

.panel-status{
  padding:9px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#26703f,#4b9d58);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}

.panel-status.vendido{background:#b54626}

.panel-photo{
  width:100%;
  height:175px;
  margin-top:18px;
  overflow:hidden;
  border-radius:17px;
  background:
    linear-gradient(to top,rgba(6,29,21,.22),transparent),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80") center/cover;
}

.panel-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.panel-stat{
  padding:0 0 17px;
}
.panel-stat+ .panel-stat{
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.13);
}
.panel-stat small{
  display:block;
  color:#9fb7aa;
  font-size:9px;
  text-transform:uppercase;
}
.panel-stat strong{
  display:block;
  margin-top:5px;
  font-size:18px;
}

.panel-list{
  display:grid;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.panel-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#d8e2dc;
  font-size:11px;
}
.panel-row span:first-child{color:#96aa9f}
.panel-row strong{text-align:right}

.features{
  display:grid;
  gap:9px;
  padding:17px 0;
}
.feature{
  display:flex;
  align-items:center;
  gap:9px;
  color:#e1e9e4;
  font-size:10px;
}
.feature i{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  font-style:normal;
}

.cta{
  width:100%;
  min-height:52px;
  border:0;
  border-radius:15px;
  color:white;
  background:linear-gradient(135deg,#347c43,#57a65d);
  box-shadow:0 12px 28px rgba(38,128,68,.24);
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.07)}
.cta:disabled{opacity:.48;cursor:not-allowed;transform:none}

.help{
  margin:14px 0 0;
  color:#9bb0a3;
  text-align:center;
  font-size:10px;
}

/* Tarjeta flotante */
.hover-card{
  position:fixed;
  z-index:9999;
  width:min(315px,calc(100vw - 24px));
  border-radius:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px) scale(.97);
  filter:drop-shadow(0 22px 42px rgba(9,34,24,.28));
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .28s;
}

.hover-card.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}

.hover-card::before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-2;
  border-radius:28px;
  background:rgba(76,182,98,.18);
  filter:blur(18px);
  opacity:.38;
}

.hover-card-inner{
  position:relative;
  z-index:2;
  padding:19px;
  border:1px solid rgba(34,92,56,.16);
  border-radius:22px;
  background:rgba(250,251,247,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.card-glow-svg{
  position:absolute;
  inset:-3px;
  z-index:4;
  width:calc(100% + 6px);
  height:calc(100% + 6px);
  overflow:visible;
  pointer-events:none;
}

.card-glow-base{
  fill:none;
  stroke:rgba(88,182,105,.20);
  stroke-width:1.2;
}

.card-glow-line{
  fill:none;
  stroke:url(#cardGlowGradient);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:58 942;
  stroke-dashoffset:0;
  filter:url(#cardGlowBlur);
  opacity:0;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.card-kicker{
  margin:0 0 4px;
  color:#4e765e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hover-card h3{
  margin:0;
  font-size:25px;
  letter-spacing:-.04em;
}
.card-state{
  padding:8px 10px;
  border-radius:999px;
  color:white;
  background:var(--available);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}
.card-state.vendido{background:var(--sold)}

.card-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px;
}
.card-summary div{
  padding:11px;
  border-radius:13px;
  background:#f0f3ed;
}
.card-summary small{
  display:block;
  color:#7a847c;
  font-size:8px;
  text-transform:uppercase;
}
.card-summary strong{
  display:block;
  margin-top:4px;
  font-size:12px;
}

.card-lines{
  display:grid;
  gap:8px;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--line);
}
.card-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:10px;
}
.card-line span{color:#718077}
.card-line strong{text-align:right}

@media(max-width:1250px){
  .plano-ui{grid-template-columns:75px minmax(0,1fr) 320px}
  .sidebar{padding-inline:7px}
  .tool{width:58px}
}

@media(max-width:980px){
  body{padding:0}
  .plano-ui{
    min-height:100vh;
    grid-template-columns:1fr;
    border-radius:0;
  }
  .sidebar{display:none}
  .detail-panel{
    margin:0;
    border-radius:0;
  }
  .viewport{height:72vh;min-height:560px}
  .map-header{top:12px;left:14px;right:14px}
  .title-block{display:none}
}

@media(max-width:680px){
  .top-controls{
    max-width:100%;
    overflow:auto;
    border-radius:18px;
  }
  .filter-btn{padding:0 11px;white-space:nowrap}
  .viewport{height:64vh;min-height:500px}
  .legend{bottom:10px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hover-card.is-visible{opacity:1!important;visibility:visible!important;transform:none!important}
}


}

.hover-card-inner{
  z-index:2;
}

.panel-photo{
  transition:opacity .22s ease, transform .35s ease;
}

.panel-photo.is-changing{
  opacity:.18;
  transform:scale(.985);
}


/* Border glow: un destello recorre el perímetro de la tarjeta */
.hover-card{
  isolation:isolate;
}

.hover-card-glow-svg{
  position:absolute;
  inset:-4px;
  z-index:5;
  width:calc(100% + 8px);
  height:calc(100% + 8px);
  overflow:visible;
  pointer-events:none;
}

.hover-card-glow-base{
  fill:none;
  stroke:rgba(44,130,77,.22);
  stroke-width:1.25;
}

.hover-card-glow-line{
  fill:none;
  stroke:url(#hoverGlowGradient);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:72 928;
  stroke-dashoffset:0;
  opacity:0;
  filter:url(#hoverGlowBlur);
}

.hover-card.is-visible .hover-card-glow-line{
  opacity:1;
  animation:hoverBorderTravel 1.55s linear infinite;
}

@keyframes hoverBorderTravel{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:-1000; }
}

/* Ajustes para módulo Código de Divi */
#lp-loteo{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:visible;
  isolation:isolate;
}

#lp-loteo .plano-ui{
  width:100%;
  min-height:820px;
}

#lp-loteo .viewport{
  min-height:720px;
}

/* Evita el espacio inferior que Divi puede agregar a elementos inline */
#lp-loteo svg{
  vertical-align:middle;
}

/* Recomendado para secciones Divi fullwidth */
.et_pb_code_inner:has(#lp-loteo){
  width:100%;
}

#lp-loteo .lp-map-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#28533c;
  font-family:"Poppins",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  background:
    radial-gradient(circle at 50% 40%,rgba(85,155,103,.12),transparent 32%),
    #edf0e9;
}

#lp-loteo .lp-map-loading::after{
  content:"";
  width:34px;
  height:34px;
  margin-left:12px;
  border:3px solid rgba(46,107,68,.17);
  border-top-color:#3f9b5c;
  border-radius:50%;
  animation:lpLoaderSpin .8s linear infinite;
}

#lp-loteo .lp-map-error{
  padding:24px;
  color:#a83d25;
  text-align:center;
  font-weight:700;
}

@keyframes lpLoaderSpin{
  to{transform:rotate(360deg)}
}


/* Divi: eliminar límites de sección/fila/columna para lograr pantalla completa */
.et_pb_section:has(#lp-loteo),
.et_pb_row:has(#lp-loteo),
.et_pb_column:has(#lp-loteo),
.et_pb_code:has(#lp-loteo),
.et_pb_code_inner:has(#lp-loteo){
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
.et_pb_section:has(#lp-loteo){overflow:visible!important}
body:has(#lp-loteo){overflow-x:hidden}

@supports not selector(:has(*)){
  #lp-loteo{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }
}

@media(max-width:980px){
  #lp-loteo{min-height:auto}
  .plano-ui{height:auto;min-height:100svh}
  .map-area{height:72svh;min-height:560px}
  .viewport{height:100%}
}

/* =========================================================
   CORRECCIÓN FINAL: PLANO COMPLETO, CENTRADO Y SIN ZOOM
   ========================================================= */
#lp-loteo{
  width:100vw!important;
  max-width:none!important;
  min-height:100svh!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  overflow:hidden!important;
}

#lp-loteo .plano-ui{
  width:100%!important;
  height:100svh!important;
  min-height:760px!important;
  grid-template-columns:78px minmax(0,1fr) 330px!important;
}

#lp-loteo .map-area{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}

#lp-loteo .viewport{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}

#lp-loteo .stage{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  padding:96px 28px 54px!important;
  transform:none!important;
  overflow:hidden!important;
}

#lp-loteo .masterplan-svg{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  flex:0 1 auto!important;
}

#lp-loteo .map-header{
  top:14px!important;
  left:18px!important;
  right:18px!important;
}

#lp-loteo .legend{
  bottom:14px!important;
}

@media(max-width:1250px){
  #lp-loteo .plano-ui{
    grid-template-columns:72px minmax(0,1fr) 300px!important;
  }
  #lp-loteo .stage{
    padding:92px 18px 50px!important;
  }
}

@media(max-width:980px){
  #lp-loteo{
    width:100%!important;
    margin:0!important;
    min-height:auto!important;
  }
  #lp-loteo .plano-ui{
    height:auto!important;
    min-height:100svh!important;
    grid-template-columns:1fr!important;
  }
  #lp-loteo .map-area{
    height:72svh!important;
    min-height:560px!important;
  }
  #lp-loteo .stage{
    padding:78px 12px 48px!important;
  }
}

.panel-status.is-empty{display:none}


/* ===== AJUSTES PREMIUM V2 ===== */
#lp-loteo{
  --map-content-inset:clamp(24px,4.2vw,72px);
}

.plano-ui{
  height:min(900px,calc(100svh - 28px));
  min-height:680px;
  grid-template-columns:68px minmax(0,1fr) 310px;
}

.sidebar{
  gap:14px;
  padding:16px 8px;
}

.logo-mark{
  width:50px;
  height:50px;
  border-radius:16px;
  font-size:25px;
}

.tool{
  width:54px;
  min-height:60px;
  border-radius:16px;
}

.tool .ico{font-size:19px}
.tool small{font-size:9px}

.map-header{
  top:18px;
  left:var(--map-content-inset);
  right:var(--map-content-inset);
  align-items:flex-start;
}

.title-block h1{
  font-size:clamp(27px,2.2vw,40px);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.055em;
  color:#102b20;
  text-wrap:balance;
}

.title-block p{
  margin-top:9px;
  font-size:13px;
  font-weight:600;
}

.top-controls{
  padding:6px;
  gap:3px;
  border-radius:999px;
  transform:scale(.92);
  transform-origin:top right;
}

.filter-btn{
  min-height:38px;
  padding:0 14px;
  font-size:11px;
  font-weight:700;
}

.viewport{
  padding:
    clamp(82px,9vh,112px)
    var(--map-content-inset)
    clamp(32px,4vh,48px);
}

.stage{
  display:grid;
  place-items:center;
}

.masterplan-svg{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  overflow:visible;
}

.detail-panel{
  padding:18px;
  font-size:.94em;
}

.panel-head h2{
  font-size:27px;
  font-weight:800;
}

.panel-photo{
  height:150px;
}

.panel-stats{
  margin-top:15px;
}

.panel-stat strong{
  font-size:16px;
}

.panel-list{
  gap:9px;
  padding:14px 0;
}

.features{
  gap:7px;
  padding:13px 0;
}

.feature{
  font-size:9px;
}

.cta{
  min-height:48px;
}

/* Estado seleccionado persistente */
.masterplan-svg .lote.active polygon,
.masterplan-svg .lote.active path{
  fill:rgba(53,151,84,.54)!important;
  filter:drop-shadow(0 0 7px rgba(75,230,117,.32));
}

/* UI añadida dentro del SVG */
.lot-ui-overlay{
  opacity:1;
  transition:opacity .2s ease;
}

.lot-ui-overlay.hidden{
  opacity:.06;
}

.lot-number-badge,
.lot-price-badge{
  transform-box:fill-box;
  transform-origin:center;
}

.lot-number-halo{
  fill:rgba(108,255,139,.12);
  stroke:rgba(154,255,175,.44);
  stroke-width:1;
  opacity:.65;
}

.lot-number-circle{
  fill:rgba(11,48,34,.94);
  stroke:rgba(255,255,255,.9);
  stroke-width:1.7;
  filter:drop-shadow(0 4px 6px rgba(8,38,26,.25));
}

.lot-number-text{
  fill:#fff;
  font-family:"Poppins",sans-serif!important;
  font-size:13px;
  font-weight:800!important;
  letter-spacing:.02em;
}

.lot-price-bg{
  fill:rgba(255,255,255,.90);
  stroke:rgba(30,104,60,.18);
  stroke-width:1;
  filter:drop-shadow(0 5px 7px rgba(15,64,40,.13));
}

.lot-price-text{
  fill:#16713c;
  font-family:"Poppins",sans-serif!important;
  font-size:12px;
  font-weight:800!important;
  letter-spacing:-.015em;
}

.lot-price-shine{
  fill:rgba(186,255,202,.55);
  opacity:0;
}

/* Animaciones premium sin alterar la posición de las etiquetas SVG */
.original-price-label{
  display:none!important;
}

.lot-number-badge,
.lot-price-badge{
  opacity:1!important;
  visibility:visible!important;
}

.lot-number-circle{
  animation:lotCircleBreath 2.8s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}

.lot-number-halo{
  animation:lotHaloAlways 2.2s ease-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}

.lot-price-bg{
  animation:lotPriceBreath 3.2s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}

.lot-ui-overlay.is-hovering .lot-number-circle{
  animation:lotCircleHover .72s cubic-bezier(.2,.8,.2,1) both;
}

.lot-ui-overlay.is-hovering .lot-number-halo{
  animation:lotHaloHover 1.05s ease-out infinite;
}

.lot-ui-overlay.is-hovering .lot-price-bg{
  animation:lotPriceHover .7s cubic-bezier(.2,.8,.2,1) both;
}

.lot-ui-overlay.is-hovering .lot-price-shine{
  opacity:1;
  animation:lotPriceShine 1.25s ease-in-out infinite;
}

@keyframes lotCircleBreath{
  0%,100%{transform:scale(1);filter:drop-shadow(0 4px 6px rgba(8,38,26,.25))}
  50%{transform:scale(1.035);filter:drop-shadow(0 5px 9px rgba(44,180,88,.36))}
}

@keyframes lotHaloAlways{
  0%{opacity:.38;transform:scale(.92)}
  65%{opacity:.08;transform:scale(1.28)}
  100%{opacity:0;transform:scale(1.38)}
}

@keyframes lotCircleHover{
  0%{transform:scale(1)}
  55%{transform:scale(1.12)}
  100%{transform:scale(1.07)}
}

@keyframes lotHaloHover{
  0%{opacity:.72;transform:scale(.88)}
  70%{opacity:.06;transform:scale(1.52)}
  100%{opacity:0;transform:scale(1.62)}
}

@keyframes lotPriceBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.018)}
}

@keyframes lotPriceHover{
  0%{transform:scale(1)}
  100%{transform:scale(1.045)}
}

@keyframes lotPriceShine{
  0%{transform:translateX(-55px);opacity:0}
  25%{opacity:.65}
  70%{opacity:.25}
  100%{transform:translateX(120px);opacity:0}
}

@media(max-width:1200px){
  .plano-ui{
    grid-template-columns:60px minmax(0,1fr) 280px;
    min-height:650px;
  }

  #lp-loteo{--map-content-inset:clamp(18px,3vw,40px)}

  .detail-panel{padding:15px}
  .panel-photo{height:130px}
  .features{display:none}
}

@media(max-width:980px){
  .plano-ui{
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
  }

  .map-area{
    min-height:68svh;
  }

  .viewport{
    min-height:560px;
    padding:92px 16px 28px;
  }

  .map-header{
    left:16px;
    right:16px;
  }

  .title-block{
    display:block;
  }

  .title-block h1{
    font-size:clamp(24px,6vw,34px);
  }

  .top-controls{
    transform:scale(.86);
  }

  .detail-panel{
    min-height:auto;
    border-radius:0 0 22px 22px;
  }
}

@media(max-width:680px){
  .map-header{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    padding:16px 14px 8px;
    display:grid;
    gap:12px;
  }

  .top-controls{
    width:max-content;
    max-width:100%;
    transform:none;
    overflow:auto;
  }

  .viewport{
    height:58svh;
    min-height:440px;
    padding:8px 8px 24px;
  }

  .legend{
    bottom:8px;
  }

  .lot-number-text{font-size:11px}
  .lot-price-text{font-size:10px}
}


/* Corrección de estabilidad para círculos y precios */
.lot-ui-overlay{
  display:block!important;
  pointer-events:none!important;
}

.lot-number-badge,
.lot-price-badge{
  display:block!important;
}

.masterplan-svg .lot-ui-overlay.hidden{
  opacity:.06!important;
}


/* ===== ENCUADRE AUTOMÁTICO DEL SVG ===== */
.stage{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}

.masterplan-svg{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:block!important;
  object-fit:contain!important;
  transform:none!important;
}

.viewport{
  overflow:hidden!important;
}


/* ===== V5: ENCUADRE BASADO EXCLUSIVAMENTE EN LOS LOTES ===== */
.viewport{
  padding:
    clamp(78px,8vh,96px)
    clamp(18px,2.5vw,42px)
    clamp(18px,2.5vh,30px)!important;
}

.stage{
  min-width:0!important;
  min-height:0!important;
}

.masterplan-svg{
  contain:layout paint;
}

@media(max-width:980px){
  .viewport{
    padding:88px 12px 18px!important;
  }
}

@media(max-width:680px){
  .viewport{
    padding:8px 6px 18px!important;
  }
}


/* ===== V6: MENOS AIRE LATERAL Y ETIQUETAS VENDIDAS ===== */
.plano-ui{
  grid-template-columns:60px minmax(0,1fr) 286px!important;
}

.map-header{
  left:clamp(16px,2vw,30px)!important;
  right:clamp(16px,2vw,30px)!important;
}

.viewport{
  padding:
    clamp(72px,7.5vh,88px)
    clamp(8px,1vw,18px)
    clamp(12px,2vh,22px)!important;
}

.detail-panel{
  margin:8px 8px 8px 0!important;
  padding:16px!important;
}

.sidebar{
  padding-inline:6px!important;
}

.tool{
  width:48px!important;
}

.masterplan-svg{
  width:100%!important;
  height:100%!important;
}

.lot-price-badge.is-sold .lot-price-bg{
  fill:rgba(237,75,22,.95);
  stroke:rgba(255,255,255,.55);
  stroke-width:1.2;
  filter:drop-shadow(0 6px 9px rgba(185,57,20,.28));
  animation:soldBadgeBreath 2.5s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}

.lot-price-badge.is-sold .lot-price-text{
  fill:#fff;
  font-weight:800!important;
  letter-spacing:.035em;
}

.lot-price-badge.is-sold .lot-price-shine{
  fill:rgba(255,255,255,.42);
  opacity:.35;
  animation:soldBadgeShine 1.7s ease-in-out infinite;
}

.lot-ui-overlay.is-hovering .lot-price-badge.is-sold .lot-price-bg{
  animation:soldBadgeHover .72s cubic-bezier(.2,.8,.2,1) both;
}

.lot-ui-overlay.is-hovering .lot-price-badge.is-sold .lot-price-shine{
  animation:soldBadgeShine 1.05s ease-in-out infinite;
}

@keyframes soldBadgeBreath{
  0%,100%{transform:scale(1);filter:drop-shadow(0 6px 9px rgba(185,57,20,.28))}
  50%{transform:scale(1.025);filter:drop-shadow(0 7px 13px rgba(237,75,22,.42))}
}

@keyframes soldBadgeHover{
  0%{transform:scale(1)}
  60%{transform:scale(1.08)}
  100%{transform:scale(1.05)}
}

@keyframes soldBadgeShine{
  0%{transform:translateX(-48px);opacity:0}
  30%{opacity:.65}
  100%{transform:translateX(105px);opacity:0}
}

@media(max-width:1200px){
  .plano-ui{
    grid-template-columns:54px minmax(0,1fr) 260px!important;
  }
  .detail-panel{
    padding:14px!important;
  }
}

@media(max-width:980px){
  .plano-ui{
    grid-template-columns:1fr!important;
  }
  .viewport{
    padding:82px 8px 14px!important;
  }
}


/* ===== V7: TARJETA EN EL ESPACIO BLANCO LATERAL ===== */
.map-area{
  position:relative!important;
}

/* Reserva una columna lateral para la tarjeta, sin tapar el plano */
.lp-card-lateral .viewport{
  padding-left:clamp(280px,20vw,340px)!important;
}

/* Posición fija dentro del área central */
.lp-card-lateral .hover-card{
  position:absolute!important;
  z-index:35!important;
  top:clamp(118px,14vh,154px)!important;
  left:clamp(18px,2vw,30px)!important;
  width:clamp(238px,18vw,288px)!important;
  min-width:0!important;
  max-width:288px!important;
  transform:translateY(10px) scale(.985)!important;
  pointer-events:none!important;
}

.lp-card-lateral .hover-card.is-visible{
  transform:translateY(0) scale(1)!important;
}

.lp-card-lateral .hover-card-inner{
  padding:17px!important;
}

.lp-card-lateral .hover-card h3{
  font-size:23px!important;
}

.lp-card-lateral .card-summary{
  margin-top:13px!important;
}

.lp-card-lateral .card-lines{
  gap:7px!important;
  margin-top:12px!important;
  padding-top:12px!important;
}

/* Pantallas medianas */
@media(max-width:1350px){
  .lp-card-lateral .viewport{
    padding-left:238px!important;
  }

  .lp-card-lateral .hover-card{
    left:14px!important;
    width:210px!important;
  }

  .lp-card-lateral .hover-card-inner{
    padding:14px!important;
  }

  .lp-card-lateral .hover-card h3{
    font-size:20px!important;
  }

  .lp-card-lateral .card-lines{
    font-size:9px!important;
  }
}

/* Tablet: tarjeta en una banda superior reservada */
@media(max-width:980px){
  .lp-card-lateral .viewport{
    padding-left:12px!important;
    padding-top:250px!important;
  }

  .lp-card-lateral .hover-card{
    top:82px!important;
    left:50%!important;
    width:min(520px,calc(100% - 32px))!important;
    max-width:520px!important;
    transform:translate(-50%,10px) scale(.985)!important;
  }

  .lp-card-lateral .hover-card.is-visible{
    transform:translate(-50%,0) scale(1)!important;
  }

  .lp-card-lateral .hover-card-inner{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:12px;
  }

  .lp-card-lateral .card-summary{
    margin-top:0!important;
  }

  .lp-card-lateral .card-lines{
    grid-column:1 / -1;
  }
}

/* Móvil */
@media(max-width:680px){
  .lp-card-lateral .viewport{
    padding:204px 6px 18px!important;
  }

  .lp-card-lateral .hover-card{
    top:124px!important;
    width:calc(100% - 20px)!important;
  }

  .lp-card-lateral .hover-card-inner{
    display:block;
    padding:14px!important;
  }

  .lp-card-lateral .card-lines{
    display:none!important;
  }
}