/* ==========================================================================
   MOVIL-TECH ROMA — mapa.css
   Fondo de corrientes (canvas) + controles del mapa: vistas, cómo llegar y
   las fotos del local.
   ========================================================================== */

/* ---------------------------------------------- fondo vivo por detrás ---- */
html{ background:var(--bg); }
body{ background:transparent; }
/* el lienzo va detrás de TODO: z-index negativo. Para que se vea, ni el body
   ni el body del catálogo pueden tener fondo propio (el color vive en html). */
#bgFlow{ position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
body.catPage{ background:transparent; }
#mtrPre{ z-index:900; }
.fxBar{ z-index:200; }

/* --------------------------------------------- el iframe llena la tarjeta -
   plus.css le puso position:relative al contenedor: con altura automática el
   height:100% del iframe se cae a los 150px por defecto. Se fija la altura y
   el iframe se ancla. */
.mapCard__map{ height:420px; }
.mapCard__map #mapIframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:860px){ .mapCard__map{ height:260px; } }

/* ------------------------------------------------------ vistas del mapa -- */
.mtrVistas{
  position:absolute; z-index:7; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:5px; padding:5px; border-radius:999px;
  background:rgba(255,255,255,.94); border:1px solid var(--linea-2);
  box-shadow:0 10px 24px rgba(11,42,90,.16);
}
.mtrVistas button{
  border:0; cursor:pointer; font:inherit; font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#5A6274;
  padding:8px 13px; border-radius:999px; background:none;
  transition:transform 160ms cubic-bezier(.23,1,.32,1), background-color .2s ease, color .2s ease;
}
.mtrVistas button:active{ transform:scale(.97); }
.mtrVistas button.is-on{ background:var(--azul); color:#fff; }
@media (hover:hover) and (pointer:fine){
  .mtrVistas button:not(.is-on):hover{ color:var(--azul); background:#F1F6FF; }
}

.mtrIr{
  position:absolute; z-index:7; right:12px; top:12px;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.94);
  border:1px solid var(--linea-2); color:var(--tinta);
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(11,42,90,.14);
  transition:transform 160ms cubic-bezier(.23,1,.32,1), box-shadow .2s ease;
}
.mtrIr svg{ width:14px; height:14px; color:var(--azul); }
.mtrIr:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .mtrIr:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,42,90,.2); }
}

/* ------------------------------------------------------ fotos del local -- */
.mtrLocal{
  position:absolute; inset:0; z-index:6; background:#0A1220;
  opacity:0; pointer-events:none; transition:opacity .35s cubic-bezier(.23,1,.32,1);
}
.mtrLocal.is-on{ opacity:1; pointer-events:auto; }
.mtrLocal img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtrLocal__nav{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; pointer-events:none;
}
.mtrLocal__nav button{
  pointer-events:auto; width:38px; height:38px; border-radius:50%; cursor:pointer; border:0;
  background:rgba(255,255,255,.92); color:var(--tinta); font-size:17px; line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  transition:transform 160ms cubic-bezier(.23,1,.32,1);
}
.mtrLocal__nav button:active{ transform:scale(.94); }
.mtrLocal__tag{
  position:absolute; left:12px; top:12px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; background:rgba(10,18,32,.74);
  color:#EAF2FF; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.mtrLocal__vacio{
  position:absolute; inset:0; margin:0; padding:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; color:#C8D8F2; font-size:12.5px; line-height:1.6; max-width:none;
}
.mtrLocal__vacio b{ color:#8FC2FF; }

@media (max-width:640px){
  .mtrVistas{ bottom:56px; }
  .mtrVistas button{ padding:7px 10px; font-size:10px; }
  .mtrIr{ font-size:10px; padding:7px 11px; }
}