/* Sección «el directorio»: el mapa de la colonia y los negocios cerca. Cada página pone sus colores en --mp-*. */
.mapa{position:relative;padding:60px var(--g) 40px}
.mp-c{position:relative;z-index:3;min-width:0}
.mp-k{font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;color:var(--mp-ac-texto)}
.mapa h2{margin-top:8px;font-size:clamp(42px,13.6vw,100px);max-width:15ch}
.mapa h2 em{font-style:normal;color:var(--mp-ac-texto)}
.mp-p{max-width:40ch;margin-top:12px}
.mp-es{position:relative;display:grid;place-items:center;margin-top:26px}
.mp-plano{display:none}
.mp-burbuja{display:none}

.mp-tel{position:relative;z-index:2;width:min(72vw,300px);aspect-ratio:9/18.6;padding:3.4%;border-radius:34px;background:var(--mp-marco);box-shadow:0 0 0 2px var(--mp-orilla),0 40px 70px -30px rgba(0,0,0,.7)}
.mp-pant{container-type:inline-size;position:relative;width:100%;height:100%;overflow:hidden;border-radius:26px;background:var(--mp-tierra)}
.mp-mapa{position:absolute;left:0;top:0;width:220%;aspect-ratio:1;will-change:transform}
.mp-mapa.tocado{transition:transform .4s cubic-bezier(.3,.8,.3,1)}
.mp-mapa>svg,.mp-plano>svg{display:block;width:100%;height:100%;max-width:none}
.mp-s{fill:var(--mp-tierra)}
.mp-pq{fill:var(--mp-parque)}
.mp-cc{fill:none;stroke:var(--mp-calle);stroke-width:13}
.mp-av{fill:none;stroke:var(--mp-avenida);stroke-width:26;stroke-linecap:round}
.mp-t{fill:var(--mp-txt);font:600 15px/1 var(--mp-letra);letter-spacing:.02em}

.mp-yo{position:absolute;width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw;border-radius:50%;background:#2F7BFF;border:.8cqw solid #fff;box-shadow:0 0 0 3.4cqw rgba(47,123,255,.2)}
.mp-mini{position:absolute;width:6.4cqw;height:6.4cqw;margin:-6.4cqw 0 0 -3.2cqw;border:.5cqw solid #fff;border-radius:50% 50% 50% 0;background:var(--mp-ac);opacity:.92;transform:rotate(-45deg);transform-origin:50% 100%;box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.5)}
.mp-pn{position:absolute;display:grid;place-items:center;width:13cqw;height:13cqw;margin:-13cqw 0 0 -6.5cqw;padding:0;border:.7cqw solid #fff;border-radius:50% 50% 50% 0;background:var(--mp-ac);color:var(--mp-ac-t);font:800 3.5cqw/1 var(--mp-letra);letter-spacing:-.02em;cursor:pointer;transform:rotate(-45deg);transform-origin:50% 100%;box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.2,1.3,.4,1),background .2s;-webkit-tap-highlight-color:transparent}
.mp-pn b{display:block;font-weight:800;transform:rotate(45deg)}
.mp-pn.on{z-index:2;background:var(--mp-sel);color:#fff;transform:rotate(-45deg) scale(1.34)}
.mp-pn.tuyo{background:var(--mp-tuyo);color:var(--mp-tuyo-t);font-size:3.6cqw}
.mp-mapa>.mp-pn:not(.on){opacity:.96}
.mp-pn.tuyo.on{background:var(--mp-tuyo);color:var(--mp-tuyo-t);transform:rotate(-45deg) scale(1.55)}

.mp-bus{position:absolute;z-index:2;left:4cqw;right:4cqw;top:7cqw;display:flex;align-items:center;gap:2.6cqw;min-height:12cqw;padding:0 4cqw;border-radius:6cqw;background:var(--mp-hoja);color:var(--mp-hoja-t);font-size:4.6cqw;font-weight:600;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.5)}
.mp-bus svg{width:4.8cqw;height:4.8cqw;flex:none}
.mp-fil{position:absolute;z-index:2;left:4cqw;top:21.5cqw;display:flex;gap:2cqw}
.mp-fil span{padding:2cqw 3.6cqw;border-radius:5cqw;background:var(--mp-hoja);color:var(--mp-hoja-t);font-size:4cqw;font-weight:700;box-shadow:0 1cqw 3cqw -1cqw rgba(0,0,0,.5)}
.mp-fil span:first-child{background:var(--mp-ac);color:var(--mp-ac-t)}

.mp-hoja{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:3.4cqw 4.4cqw 5cqw;border-radius:7cqw 7cqw 0 0;background:var(--mp-hoja);color:var(--mp-hoja-t);box-shadow:0 -3cqw 7cqw -3cqw rgba(0,0,0,.45)}
.mp-hoja::before{content:"";display:block;width:11cqw;height:1.2cqw;margin:0 auto 3cqw;border-radius:1cqw;background:var(--mp-txt);opacity:.45}
.mp-tit{display:block;margin-bottom:2.6cqw;font-size:4.2cqw;font-weight:700;opacity:.7}
.mp-fi{position:relative;display:grid;grid-template-columns:23cqw minmax(0,1fr);gap:3.4cqw;align-items:center;transition:opacity .18s}
.mp-fi.cambia{opacity:0}
.mp-fi img{width:23cqw;height:23cqw;border-radius:4.6cqw;object-fit:cover;object-position:50% 18%;background:var(--mp-marco)}
.mp-fi small{display:block;font-size:3.9cqw;font-weight:700;opacity:.65}
.mp-fi b{display:block;margin:.5cqw 0 .9cqw;padding-right:15cqw;font:800 6cqw/1.05 var(--mp-letra);letter-spacing:-.03em}
.mp-fi span{display:block;font-size:4cqw;line-height:1.2}
.mp-des{position:absolute;right:0;top:-1cqw;display:grid;place-items:center;width:15cqw;height:15cqw;border-radius:50%;background:var(--mp-sel);border:.5cqw solid #fff;color:#fff;font:800 4.2cqw/1 var(--mp-letra);font-style:normal;letter-spacing:-.02em}
.mp-fi.tuyo .mp-des{background:var(--mp-ac);color:var(--mp-ac-t)}
.mp-puntos{display:flex;justify-content:center;gap:1.6cqw;margin-top:3cqw}
.mp-puntos i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--mp-txt);opacity:.35;transition:opacity .2s}
.mp-puntos i.on{opacity:1;background:var(--mp-sel)}

/* ---------- Con movimiento: la sección se queda fija y el dedo mueve el mapa ---------- */
.d3 .mapa,.mov .mapa{height:360svh;padding:0}
.d3 .mp-fija,.mov .mp-fija{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:calc(70px + env(safe-area-inset-top)) var(--g) 18px}
.d3 .mapa h2,.mov .mapa h2{font-size:clamp(34px,min(12vw,6.6svh),84px)}
.d3 .mp-p,.mov .mp-p{margin-top:6px;font-size:15.5px;line-height:1.35}
.d3 .mp-es,.mov .mp-es{margin-top:12px;min-height:0;perspective:1100px}
.d3 .mp-tel,.mov .mp-tel{width:auto;height:min(100%,calc(100svh - 270px));will-change:transform}
.d3 .mp-plano,.mov .mp-plano{display:block;position:absolute;z-index:1;left:50%;top:50%;width:min(165vw,150svh);aspect-ratio:1;margin:calc(min(165vw,150svh)/-2) 0 0 calc(min(165vw,150svh)/-2);transform-style:preserve-3d;will-change:transform;pointer-events:none;--mp-tierra:transparent;--mp-parque:transparent}
.d3 .mp-es::after,.mov .mp-es::after{content:"";position:absolute;z-index:1;inset:-30% -60%;background:radial-gradient(farthest-side,transparent 40%,var(--mp-fondo) 92%);pointer-events:none}
.d3 .mp-burbuja,.mov .mp-burbuja{display:flex;position:absolute;z-index:3;left:50%;bottom:30%;align-items:center;gap:6px;width:max-content;padding:6px 14px 6px 6px;border-radius:99px;background:var(--mp-tuyo);color:var(--mp-tuyo-t);font-weight:800;font-size:14px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 14px 26px -12px #000;opacity:0;transform:translate(-50%,16px) scale(.8);transition:opacity .22s,transform .3s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.mp-burbuja img{width:40px;height:auto}
.mp-burbuja.on{opacity:1!important;transform:translate(-50%,0)!important}

@media (min-width:900px){
 .mp-es{margin-top:0}
 .mapa{display:block}
 .d3 .mp-fija,.mov .mp-fija{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr;align-items:center;gap:30px;padding:70px var(--g) 30px}
 .d3 .mapa h2,.mov .mapa h2{font-size:clamp(60px,min(6.2vw,11svh),96px)}
 .d3 .mp-p,.mov .mp-p{margin-top:16px;font-size:18px;line-height:1.5}
 .d3 .mp-es,.mov .mp-es{height:100%;margin-top:0}
 .d3 .mp-tel,.mov .mp-tel{height:min(84svh,740px)}
 .d3 .mp-plano,.mov .mp-plano{width:min(58vw,120svh);margin:calc(min(58vw,120svh)/-2) 0 0 calc(min(58vw,120svh)/-2)}
 .d3 .mp-burbuja,.mov .mp-burbuja{bottom:36%;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.mp-mapa.tocado,.mp-pn,.mp-fi{transition:none}}