/* ===================================================================
   Mapa interactivo del directorio. Lo comparten la demo web y el tótem:
   este archivo se enlaza en Avatar/index.html y build_totem.py lo incrusta
   dentro del index.html del tótem. Un solo sitio que tocar.

   Todo el dibujo es SVG generado por mapa.js. No hay ninguna imagen: así el
   plano se ve nítido a 1080×1920, se recolorea con las variables de marca y,
   sobre todo, la ruta se puede trazar de verdad en vez de simularse encima
   de una foto.
   =================================================================== */

.mapa{
  position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#171122 0%,#100C18 100%);
  border:1px solid rgba(255,255,255,.10);
  opacity:0;transform:scale(.965) translateY(14px);
  transition:opacity .42s cubic-bezier(.2,.7,.3,1), transform .42s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.mapa.on{opacity:1;transform:none}

.mapa svg{display:block;width:100%;height:auto}

/* --------------------------- cabecera --------------------------- */
.mapa-cab{
  position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:14px 18px;
  background:linear-gradient(180deg,rgba(13,10,18,.92) 0%,rgba(13,10,18,0) 100%);
}
.mapa-sitio{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#A69DB3}
.mapa-nivel{
  font-size:13px;font-weight:800;letter-spacing:.14em;color:#fff;
  padding:7px 15px;border-radius:99px;
  background:linear-gradient(135deg,#D73D59 0%,#854788 100%);
  transition:transform .3s cubic-bezier(.2,1.6,.4,1);
}
.mapa-nivel.salta{transform:scale(1.18)}

/* --------------------------- los pasos -------------------------- */
.mapa-pasos{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:8px;
  padding:16px 18px;
  background:linear-gradient(0deg,rgba(13,10,18,.94) 0%,rgba(13,10,18,0) 100%);
}
.mapa-paso{
  flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.3;color:#7C7188;
  padding:9px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  transition:color .3s, border-color .3s, background .3s, transform .3s;
}
.mapa-paso.viva{
  color:#F5F2F8;border-color:rgba(215,61,89,.55);background:rgba(215,61,89,.13);
  transform:translateY(-3px);
}
.mapa-paso.hecha{color:#A69DB3;border-color:rgba(255,255,255,.12)}

/* ---------------------------- el plano -------------------------- */
.m-edificio{fill:#1C1526;stroke:rgba(255,255,255,.09);stroke-width:2}
.m-pasillo {fill:rgba(255,255,255,.045)}
.m-local   {fill:#241C31;stroke:rgba(255,255,255,.07);stroke-width:1.5;
            opacity:0;transform-box:fill-box;transform-origin:center;
            animation:mLocal .42s cubic-bezier(.2,.9,.3,1) forwards}
.m-local.tenue{fill:#1F1829}
.m-rotulo{fill:#8F849D;font:600 13px 'Montserrat',system-ui,sans-serif;
          text-anchor:middle;dominant-baseline:middle;opacity:0;
          animation:mTexto .42s ease forwards}
.m-rotulo.tenue{fill:#5D5468;font-size:12px}
.m-icono{fill:#6E6479}
@keyframes mLocal{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes mTexto{to{opacity:1}}

/* el local de destino, encendido */
.m-local.destino{
  fill:rgba(215,61,89,.20);stroke:#D73D59;stroke-width:2.5;
  animation:mLocal .42s cubic-bezier(.2,.9,.3,1) forwards, mLatir 2s 1s ease-in-out infinite;
}
.m-rotulo.destino{fill:#F5F2F8;font-weight:800}
@keyframes mLatir{0%,100%{stroke-opacity:1}50%{stroke-opacity:.42}}

.m-servicio{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.10);stroke-width:1.5}
.m-servicio-t{fill:#6E6479;font:700 9.5px 'Montserrat',system-ui,sans-serif;
              text-anchor:middle;dominant-baseline:middle;letter-spacing:.08em}
.m-puerta{fill:#854788}
.m-puerta-t{fill:#8F849D;font:700 10px 'Montserrat',system-ui,sans-serif;text-anchor:middle}

/* --------------------------- «estás aquí» ----------------------- */
.m-aqui-halo{fill:#D73D59;opacity:.28;transform-box:fill-box;transform-origin:center;
             animation:mPulso 2.1s ease-out infinite}
.m-aqui-pt{fill:#fff;stroke:#D73D59;stroke-width:4}
.m-aqui-t{fill:#F5F2F8;font:800 12px 'Montserrat',system-ui,sans-serif;text-anchor:middle}
@keyframes mPulso{0%{transform:scale(.6);opacity:.5}70%{transform:scale(2.5);opacity:0}100%{opacity:0}}

/* ----------------------------- la ruta -------------------------- */
/* Se traza sola: la línea entera está dibujada pero oculta con un guion tan
   largo como ella misma, y lo que se anima es el desplazamiento del guion. */
.m-ruta-base{fill:none;stroke:rgba(255,255,255,.07);stroke-width:11;stroke-linecap:round;
             stroke-linejoin:round}
.m-ruta{fill:none;stroke:url(#mGrad);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;
        filter:url(#mGlow)}
.m-cabeza{fill:#fff;filter:url(#mGlow);opacity:0}
.m-cabeza.on{opacity:1}

/* --------------------------- el destino ------------------------- */
.m-pin{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.m-pin.cae{animation:mPin .62s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes mPin{
  0%{opacity:0;transform:translateY(-46px) scale(.7)}
  60%{opacity:1;transform:translateY(0) scale(1.12)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.m-pin-cuerpo{fill:#D73D59;stroke:#fff;stroke-width:2.5}
.m-pin-ojo{fill:#fff}

/* --------------------- el salto de nivel ------------------------ */
/* Cuando la ruta cambia de piso, el plano entero se va y entra el siguiente.
   Es el momento que hace entender que el sitio tiene varios niveles. */
.m-piso{transition:opacity .34s ease, transform .34s ease}
.m-piso.sale{opacity:0;transform:translateY(-26px) scale(.97)}
.m-piso.entra{opacity:0;transform:translateY(26px) scale(.97)}

.m-flecha-sube{opacity:0}
.m-flecha-sube.on{animation:mSube 1.05s ease-out 2}
@keyframes mSube{
  0%{opacity:0;transform:translateY(10px)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(-16px)}
}