:root{
    --bg:#10141a;
    --panel-0: rgba(16,20,26,0.92);
    --panel-2: rgba(16,20,26,0);
    --text:#f2ede4;
    --text-muted:#b9b0a1;
    --gold:#c9a86a;
    --clay:#2f8f92;
    --water:#5f95a3;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;padding:0;background:var(--bg);overflow:hidden;
    font-family:'Work Sans', sans-serif; color:var(--text);}

  /* ================= LOADING SCREEN — logo se llena de agua ================= */
  #loadScreen{position:fixed;inset:0;z-index:80;background:var(--bg);
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
    transition:opacity .6s ease;}
  #loadScreen.hidden{opacity:0;pointer-events:none;}
  #loadScreen svg{width:230px;height:auto;}
  #waterFill{transform:translateY(190px);animation:fillRise 2.6s cubic-bezier(.45,0,.4,1) forwards;}
  @keyframes fillRise{ to{ transform:translateY(0); } }
  .wave{animation:waveShift 1.8s linear infinite;}
  .wave.w2{animation-duration:2.5s;opacity:.55;}
  @keyframes waveShift{ from{transform:translateX(0);} to{transform:translateX(-31px);} }
  #loadScreen p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);}
  #loadPct{font-family:'Fraunces',serif;font-size:13px;color:var(--gold);letter-spacing:.08em;}

  /* ================= PANTALLA: ACTIVAR SONIDO ================= */
  #soundPrompt{position:fixed;inset:0;z-index:75;background:var(--bg);
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;
    transition:opacity .5s ease;padding:24px;text-align:center;}
  #soundPrompt.hidden{opacity:0;pointer-events:none;}
  #soundPrompt .crest-tree{width:56px;height:auto;}
  #soundPrompt .crest-tree use{fill:var(--gold);}
  #soundPrompt h2{font-family:'Fraunces',serif;font-weight:500;font-size:20px;letter-spacing:.03em;
    color:var(--text);margin:4px 0 0;}
  #soundPrompt p{font-size:12px;letter-spacing:.06em;color:var(--text-muted);max-width:320px;margin:0;}
  .sound-choices{display:flex;gap:14px;margin-top:8px;}
  .sound-choices button{all:unset;cursor:pointer;padding:12px 26px;border-radius:26px;
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
    transition:transform .15s ease,background .2s ease;}
  .sound-choices button:active{transform:scale(.95);}
  #soundYes{background:var(--clay);color:#fff;}
  #soundYes:hover{background:#256f72;}
  #soundNo{background:none;border:1px solid rgba(201,168,106,.4);color:var(--text-muted);}
  #soundNo:hover{color:var(--text);border-color:var(--gold);}

  /* ================= CIELO + PLANETA PEQUEÑO ================= */
  #skyScene{position:fixed;inset:0;z-index:5;overflow:hidden;
    background:linear-gradient(180deg,#154a86 0%,#2775b8 28%,#4f9bd8 52%,#a9d4f2 82%,#e9f5fd 100%);}
  #skyScene .cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(20px);}
  #skyScene .cloud1{width:280px;height:96px;top:9%;left:24%;transform:rotate(-9deg);}
  #skyScene .cloud2{width:170px;height:64px;top:15%;left:31%;opacity:.55;}
  #skyScene .cloud3{width:120px;height:46px;top:20%;left:22%;opacity:.4;}
  #skyScene .sun-glow{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
    width:38vw;height:38vw;max-width:420px;max-height:420px;border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 38%, transparent 70%);
    filter:blur(4px);}

  .planet-wrap{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
    width:clamp(260px,34vw,520px);height:clamp(260px,34vw,520px);z-index:6;
    transition:transform .2s ease;}
  .planet-halo{position:absolute;inset:-13%;border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.18) 55%, transparent 76%);
    filter:blur(9px);pointer-events:none;}
  #planetCanvas{position:relative;width:100%;height:100%;border-radius:50%;display:block;
    cursor:grab;touch-action:none;
    box-shadow:inset 0 -14px 34px rgba(0,0,0,.4), inset 0 10px 22px rgba(255,255,255,.3), 0 0 46px rgba(255,255,255,.45);}
  #planetCanvas.dragging{cursor:grabbing;}
  .planet-marker{display:none;}

  .pano-btn{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
    z-index:8;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;
    background:none;border:none;}
  .pano-btn .circle{width:78px;height:78px;border-radius:50%;background:rgba(47,143,146,.92);
    border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
    animation:panoPulse 3s ease-in-out infinite;transition:transform .25s ease,background .25s ease;}
  .pano-btn:hover .circle{transform:scale(1.07);background:var(--clay);}
  .pano-btn svg{width:28px;height:28px;color:#fff;}
  .pano-btn .pano-label{font-family:'Fraunces',serif;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text);background:var(--panel-0);padding:7px 18px;
    border-radius:20px;border:1px solid rgba(201,168,106,.35);white-space:nowrap;}
  @keyframes panoPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,143,146,.5);}
    50%{box-shadow:0 0 0 18px rgba(47,143,146,0);}}

  /* ================= VISOR 360° NAVEGABLE (arrastrar a los lados) ================= */
  #panoView{position:fixed;inset:0;z-index:11;background:#000;overflow:hidden;display:none;touch-action:none;}
  #panoView.active{display:block;}
  #panoTrack{position:absolute;top:0;left:0;height:100%;display:flex;cursor:grab;touch-action:none;}
  #panoView.dragging #panoTrack{cursor:grabbing;}
  .pano-tile{height:100%;width:auto;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;flex-shrink:0;}

  /* ============ VISOR 360° ESFÉRICO (WebGL, mira en todas direcciones) — solo cardinales ============ */
  #sphereView{position:fixed;inset:0;z-index:11;background:#060d0d;display:none;}
  #sphereView.active{display:block;}
  #sphereGL{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none;}
  #sphereView.dragging #sphereGL{cursor:grabbing;}
  #sphereView .wave-btn{left:0;top:0;transition:opacity .15s ease;}
  #sphereView:not(.mode-centro) .sph-dir-btn{display:none;}
  #sphereView .sph-dir-btn{transform:translate(-50%,-50%) scale(.65);}
  #sphereView.mode-centro #sphereToAerialBtn{display:none;}
  #panoView .scene-hint, #sphereView .scene-hint{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);z-index:61;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
    background:var(--panel-0);padding:6px 16px;border-radius:20px;border:1px solid rgba(201,168,106,.25);
    opacity:1;transition:opacity .5s ease;pointer-events:none;}
  #panoView .scene-hint.faded, #sphereView .scene-hint.faded{opacity:0;}

  .wave-btn{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:62;
    display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;
    background:none;border:none;}
  .wave-circle{position:relative;width:64px;height:64px;border-radius:50%;
    background:rgba(47,143,146,.92);border:2px solid var(--gold);display:flex;
    align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;}
  .wave-btn:hover .wave-circle{transform:scale(1.07);background:var(--clay);}
  .wave-btn svg{width:24px;height:24px;color:#fff;position:relative;z-index:1;}
  .wave-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);
    animation:waveRipple 2.4s ease-out infinite;}
  .wave-ring.ring2{animation-delay:1.2s;}
  @keyframes waveRipple{0%{transform:scale(1);opacity:.8;}100%{transform:scale(2.2);opacity:0;}}
  .wave-label{font-family:'Fraunces',serif;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text);background:var(--panel-0);padding:6px 16px;
    border-radius:18px;border:1px solid rgba(201,168,106,.3);white-space:nowrap;}


  .brand-logo{width:210px;height:auto;flex-shrink:0;fill:var(--gold);}

  /* ================= SIDEBAR ================= */
  #sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;z-index:20;
    background:var(--panel-0);
    padding:40px 32px 34px;display:flex;flex-direction:column;
    transition:transform .45s cubic-bezier(.65,0,.35,1);}
  #sidebar.collapsed{transform:translateX(-100%);}
  .brand{display:flex;align-items:center;gap:16px;}
  .brand-text .eyebrow{font-family:'Fraunces',serif;font-size:12px;letter-spacing:.32em;
    text-transform:uppercase;color:var(--text-muted);font-weight:300;}
  .brand-text .name{font-family:'Fraunces',serif;font-size:23px;letter-spacing:.1em;
    text-transform:uppercase;font-weight:500;color:var(--text);margin-top:3px;}
  .rule{height:1px;width:100%;background:linear-gradient(90deg,var(--gold),transparent);
    opacity:.5;margin:28px 0 6px;}

  nav#sceneNav{display:flex;flex-direction:column;gap:2px;margin-top:14px;}
  .nav-item{all:unset;cursor:pointer;font-family:'Work Sans',sans-serif;font-weight:600;
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
    padding:10px 2px;transition:color .25s ease;}
  .nav-item:hover{color:var(--text);}
  .nav-item.active{color:var(--text);}
  .nav-accent{margin-top:auto;width:42px;height:2px;background:var(--gold);opacity:.6;}

  /* ================= NAV / CONTROLS ================= */
  #navCluster{position:fixed;bottom:26px;left:24px;z-index:30;display:flex;gap:12px;}
  .round-btn{width:46px;height:46px;border-radius:50%;background:var(--panel-0);
    border:1px solid rgba(201,168,106,.3);color:var(--text);display:flex;align-items:center;
    justify-content:center;cursor:pointer;transition:border-color .25s,transform .15s,opacity .2s;}
  .round-btn:hover{border-color:var(--gold);}
  .round-btn:active{transform:scale(.92);}
  .round-btn svg{width:18px;height:18px;}
  .round-btn.off{opacity:.45;}
  .overlay-hidden{display:none !important;}
  #backBtn{display:none;}
  #controls{position:fixed;top:26px;right:26px;z-index:20;display:flex;flex-direction:column;gap:12px;}

  /* ================= COMPASS ================= */
  #compass{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:20;
    width:60px;height:60px;display:flex;align-items:center;justify-content:center;}
  #compass .ring{position:absolute;inset:0;border-radius:50%;background:var(--panel-0);
    border:1px solid rgba(201,168,106,.3);}
  #compass svg{position:relative;width:32px;height:32px;transition:transform .08s linear;}
  #compass .heading{position:absolute;bottom:-18px;font-size:9px;letter-spacing:.2em;
    color:var(--text-muted);text-transform:uppercase;}

  /* ================= NARRATION ================= */
  #narrationBar{position:fixed;left:50%;top:28px;transform:translateX(-50%);z-index:15;
    display:flex;align-items:center;gap:12px;background:var(--panel-0);
    border:1px solid rgba(201,168,106,.3);padding:9px 20px 9px 9px;border-radius:32px;
    max-width:min(64vw,440px);}
  #narrationBar .playPause{width:34px;height:34px;border-radius:50%;background:var(--clay);
    border:none;color:var(--text);display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;}
  #narrationBar .playPause svg{width:14px;height:14px;}
  #narrationBar .label{font-size:12px;letter-spacing:.05em;color:var(--text-muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #narrationBar .bar{width:76px;height:2px;background:rgba(255,255,255,.15);position:relative;
    border-radius:2px;overflow:hidden;flex-shrink:0;margin-top:4px;}
  #narrationBar .bar i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--gold);}

  /* ================= FLAT AERIAL SCENE (mapa/plano real, lotes trazados) ================= */
  #flatScene{position:fixed;inset:0;z-index:10;display:none;background:var(--bg);overflow:hidden;}
  #flatScene.active{display:block;}
  #lotsOverlay{position:absolute;inset:0;width:100%;height:100%;
    transform-origin:0 0;cursor:grab;touch-action:none;}
  #flatScene.panning #lotsOverlay{cursor:grabbing;}

  .lot-shape path,.lot-shape rect,.lot-shape polygon{
    fill:rgba(142,165,139,0);stroke:rgba(255,255,255,.65);stroke-width:.9;
    vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:auto;
    transition:fill .15s ease;}
  .lot-shape:hover path,.lot-shape:hover rect,.lot-shape:hover polygon{
    fill:rgba(142,165,139,.55);}
  .lot-shape.special path,.lot-shape.special rect,.lot-shape.special polygon{
    stroke:rgba(201,168,106,.8);}
  .lot-shape.special:hover path,.lot-shape.special:hover rect,.lot-shape.special:hover polygon{
    fill:rgba(201,168,106,.5);}

  /* Colores según estado (vienen de la hoja de Google Sheets conectada) */
  .lot-shape.estado-reservado path,.lot-shape.estado-reservado rect,.lot-shape.estado-reservado polygon{
    fill:rgba(230,126,34,.4);stroke:rgba(230,126,34,.9);}
  .lot-shape.estado-reservado:hover path,.lot-shape.estado-reservado:hover rect,.lot-shape.estado-reservado:hover polygon{
    fill:rgba(230,126,34,.65);}
  .lot-shape.estado-vendido path,.lot-shape.estado-vendido rect,.lot-shape.estado-vendido polygon{
    fill:rgba(192,57,43,.45);stroke:rgba(192,57,43,.9);}
  .lot-shape.estado-vendido:hover path,.lot-shape.estado-vendido:hover rect,.lot-shape.estado-vendido:hover polygon{
    fill:rgba(192,57,43,.7);}

  .lot-num{font-size:9px;font-weight:600;fill:#fff;text-anchor:middle;pointer-events:none;
    font-family:'Work Sans',sans-serif;paint-order:stroke;stroke:rgba(16,20,26,.75);stroke-width:2.2;}
  .lot-mz{font-size:5.5px;fill:#f2ede4;text-anchor:middle;pointer-events:none;
    font-family:'Work Sans',sans-serif;letter-spacing:.02em;
    paint-order:stroke;stroke:rgba(16,20,26,.75);stroke-width:1.6;}
  .lot-special-label{font-size:7px;font-weight:600;fill:var(--gold);text-anchor:middle;
    pointer-events:none;font-family:'Fraunces',serif;paint-order:stroke;
    stroke:rgba(16,20,26,.8);stroke-width:2;}

  /* ================= PANEL DE INFO DEL LOTE ================= */
  #lotInfo{position:fixed;right:24px;top:50%;transform:translateY(-50%) translateX(24px);
    z-index:30;width:260px;background:var(--panel-0);border:1px solid rgba(201,168,106,.3);
    padding:24px 22px;opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;}
  #lotInfo.open{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0);}
  #lotInfo .close{position:absolute;top:12px;right:12px;background:none;border:none;
    color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;}
  #lotInfo .eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
  #lotInfo h3{font-family:'Fraunces',serif;font-weight:500;font-size:21px;margin:6px 0 12px;}
  #lotInfo .row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);
    padding:7px 0;border-top:1px solid rgba(255,255,255,.08);}
  #lotInfo .row span:last-child{color:var(--text);}
  .lot-whatsapp{display:flex;align-items:center;justify-content:center;gap:9px;
    margin-top:16px;padding:11px;background:#25D366;color:#0b1a10;text-decoration:none;
    font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    border-radius:8px;transition:background .2s ease;}
  .lot-whatsapp:hover{background:#1ebe5a;}
  .lot-whatsapp svg{width:17px;height:17px;flex-shrink:0;}
  .sphere-cta{position:fixed;bottom:132px;right:26px;z-index:70;
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:#25D366;color:#0b1a10;
    text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:background .2s ease,transform .2s ease;}
  .sphere-cta:hover{background:#1ebe5a;transform:scale(1.06);}
  .sphere-cta svg{width:24px;height:24px;flex-shrink:0;}
  .sphere-cta .cta-tooltip{position:absolute;right:64px;top:50%;transform:translateY(-50%);
    background:var(--panel-0);color:var(--text);padding:9px 15px;border-radius:8px;
    font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:none;white-space:nowrap;
    border:1px solid rgba(201,168,106,.3);opacity:0;pointer-events:none;transition:opacity .35s ease;}
  .sphere-cta.show-tip .cta-tooltip{opacity:1;}
  /* Botones de dirección: fijos en pantalla, a los lados del mapa — no
     forman parte del SVG, así que no se mueven, no giran ni se recortan
     con el zoom/arrastre del mapa interactivo. */
  /* Botones de dirección: fijos en pantalla, a los lados del mapa — no
     forman parte del SVG, así que no se mueven, no giran ni se recortan
     con el zoom/arrastre del mapa interactivo. */
  .cardinal-btn-svg{cursor:pointer;pointer-events:auto;}
  .cardinal-btn-svg circle{fill:var(--panel-0);stroke:var(--gold);stroke-width:2.4;
    vector-effect:non-scaling-stroke;transition:fill .2s ease,stroke .2s ease;}
  .cardinal-btn-svg:hover circle{stroke:var(--clay);fill:rgba(47,143,146,.5);}
  .cardinal-btn-svg path{pointer-events:none;}
  .cardinal-label-svg{font-size:14px;letter-spacing:.03em;text-transform:uppercase;
    text-anchor:middle;fill:var(--text-muted);font-family:'Work Sans',sans-serif;
    pointer-events:none;paint-order:stroke;stroke:rgba(16,20,26,.85);stroke-width:5;}

  /* ================= LOGO GRUPO LERK (esquina inferior derecha) ================= */
  #lerkLogo{position:fixed;bottom:22px;right:26px;z-index:20;width:118px;opacity:.92;
    pointer-events:none;}
  #lerkLogo svg{width:100%;height:auto;display:block;}
  #lerkLogo .cls-1{fill:#f2ede4;}

  /* ================= TOAST ================= */
  #toast{position:fixed;top:26px;left:50%;transform:translateX(-50%) translateY(-140%);
    z-index:70;background:var(--clay);color:#fff;padding:10px 20px;border-radius:22px;
    font-size:12px;letter-spacing:.06em;transition:transform .35s ease;}
  #toast.show{transform:translateX(-50%) translateY(0);}

  /* ================= TRANSICIÓN DE ACERCAMIENTO (zoom) ================= */
  @keyframes zoomOutCentered{ to{ transform:translate(-50%,-50%) scale(1.6); opacity:0; } }
  @keyframes zoomInCentered{ from{ transform:translate(-50%,-50%) scale(0.6); opacity:0;} to{ transform:translate(-50%,-50%) scale(1); opacity:1;} }
  .zoom-out-centered{ animation:zoomOutCentered .28s ease forwards; }
  .zoom-in-centered{ animation:zoomInCentered .48s ease forwards; }
  @keyframes zoomOutFull{ to{ transform:scale(1.45); opacity:0; } }
  @keyframes zoomInFull{ from{ transform:scale(0.7); opacity:0;} to{ transform:scale(1); opacity:1;} }
  .zoom-out-full{ animation:zoomOutFull .28s ease forwards; }
  .zoom-in-full{ animation:zoomInFull .48s ease forwards; }

  @media (max-width:720px){
    #sidebar{width:80vw;}
    #narrationBar{max-width:80vw;}

    #lerkLogo{width:84px;}
    .sphere-cta{bottom:100px;right:16px;width:46px;height:46px;}
  }