#geo-sec {
  --geo-ink: #1c2b33;
  --geo-muted: #6f7a86;
  --geo-accent: #4da3ff;
  --geo-accent-dark: #01204c;
  --geo-soft: #f7fafc;
  --geo-panel: #fff;
  --geo-ring: #e4ebf2;
  --geo-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  --geo-radius: 18px;
  font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
  color: var(--geo-ink);
  background: linear-gradient(180deg, #ffffff, #f7fafc);
  padding: clamp(20px, 4vw, 40px) clamp(12px, 3vw, 20px);
}

#geo-sec .geo__head{max-width:1100px;margin:0 auto 18px}
#geo-sec .geo__title{
  margin:0 0 6px; letter-spacing:-.2px;
  background:linear-gradient(90deg,var(--geo-accent),var(--geo-accent-dark) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900; font-size:clamp(28px,4.6vw,44px);
}
#geo-sec .geo__sub{margin:0 0 12px;color:var(--geo-muted);font-size:clamp(14px,1.6vw,16px)}
#geo-sec .geo__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:700px}
#geo-sec .kpi{background:var(--geo-panel);border:1px solid var(--geo-ring);border-radius:12px;padding:10px 12px;box-shadow:0 4px 12px rgba(0,0,0,.04);text-align:center}
#geo-sec .kpi span{font-weight:800;font-size:clamp(18px,2.6vw,24px);display:block}
#geo-sec .kpi small{color:var(--geo-muted);font-size:12px}
#geo-sec .geo__actions{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap}
#geo-sec .btn{border:1.2px solid var(--geo-accent);background:var(--geo-accent);color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
#geo-sec .btn:hover{transform:translateY(-1px);box-shadow:var(--geo-shadow)}
#geo-sec .geo__note{color:var(--geo-muted);margin:2px 0 0;font-size:13px}

#geo-sec .geo__stage{
  position:relative; max-width:1100px; margin:16px auto 0;
  border-radius:var(--geo-radius); background:var(--geo-panel);
  border:1px solid var(--geo-ring); box-shadow:var(--geo-shadow);
}
#geo-sec .geo__canvas{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:inherit; padding:clamp(8px,1.8vw,16px);
  box-sizing:border-box;
}
@media (max-width:680px){ #geo-sec .geo__canvas{aspect-ratio:4/3} }

#geo-sec .geo__bg{ position:absolute; inset:0; width:100%; height:100%; color:#0f1a2a; }
#geo-sec .geo__route{ position:absolute; inset:0; width:100%; height:100%; color:var(--geo-accent-dark); }

/* Capa FX al frente */
#geo-sec .geo__fx{ position:absolute; inset:0; pointer-events:none; z-index:9; }

/* POIs y camión con z-index claros */
#geo-sec .truck{position:absolute; translate:-50% -50%; display:grid; place-items:center; gap:6px; z-index:2;}
#geo-sec .poi--photo{ z-index:3; }
#geo-sec .poi{position:absolute; translate:-50% -50%; display:grid; place-items:center; text-align:center}
#geo-sec .poi__dot{width:14px;height:14px;border-radius:999px;background:#0fbf5f;box-shadow:0 0 0 4px rgba(15,191,95,.18)}
#geo-sec .poi__label{margin-top:6px;padding:2px 8px;font-size:11px;border:1px solid var(--geo-ring);border-radius:999px;background:#fff;color:#17324a}
#geo-sec .poi--photo .poi__card{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  width:clamp(90px,16vw,140px); padding:6px; border:1px solid var(--geo-ring);
  background:#fff; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.10)
}
#geo-sec .poi--photo .poi__card::after{
  content:""; position:absolute; left:50%; top:100%; width:10px; height:10px; background:#fff;
  border-left:1px solid var(--geo-ring); border-bottom:1px solid var(--geo-ring);
  transform:translate(-50%,0) rotate(45deg)
}
#geo-sec .poi--photo img{display:block;width:100%;height:auto;border-radius:6px}
#geo-sec .poi--photo .poi__caption{display:block;margin-top:4px;font-size:11px;color:#17324a;text-align:center}

/* Camión */
#geo-sec .truck__body{width:clamp(40px, 9vw, 92px); height:auto; display:block; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));}
#geo-sec .truck__badge{font-size:12px; padding:2px 8px; border-radius:10px; background:#fff; border:1px dashed var(--geo-ring); color:var(--geo-accent-dark);}
#geo-sec .truck__badge[data-state="far"]{border-color:#ff3b3b;color:#c22727;background:#fff5f5}
#geo-sec .truck__badge[data-state="near"]{border-color:#10b981;color:#065f46;background:#ecfdf5}
#geo-sec .truck__badge[data-state="far"]::before{content:"❌";margin-right:6px}
#geo-sec .truck__badge[data-state="near"]::before{content:"✅";margin-right:6px}

/* Brillos mejorados */
#geo-sec .spark{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle, #fff 0%, #ffe27a 50%, rgba(255,226,122,0) 72%);
  opacity:0; transform: scale(.6);
  animation: sparkPop var(--t,900ms) ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(255,215,0,.7));
  mix-blend-mode: screen;
}
@keyframes sparkPop{
  0%{ opacity:0; transform: translate(0,0) scale(.4); }
  12%{
    opacity:1;
    transform: translate(calc(var(--dx) * 0.3 * 1px), calc(var(--dy) * 0.3 * 1px)) scale(1);
  }
  100%{
    opacity:0;
    transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(.6);
  }
}

/* “Venta realizada” más grande y al frente */
#geo-sec .sale{
  position:absolute; translate:-50% -50%;
  padding:.6rem 1rem;
  font-weight:900;
  font-size:16px;
  letter-spacing:.4px;
  color:#063b2a;
  background:#ecfdf5;
  border:1px solid #10b981;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0; transform-origin:center;
  animation: salePop 1500ms ease-out forwards;
  z-index:10;
}
@keyframes salePop{
  0%{ transform: translate(-50%,-50%) scale(.8); opacity:0; }
  30%{ transform: translate(-50%,-62%) scale(1); opacity:1; }
  70%{ transform: translate(-50%,-66%) scale(1); opacity:1; }
  100%{ transform: translate(-50%,-66%) scale(1); opacity:0; }
}