/* ==========================================================================
   MP360 · Jacarandá — Ubicación y recorridos

   Deliberadamente simple: título y mapa. Sin párrafos promocionales, sin
   estadísticas, sin fullscreen propio y sin controles inventados — los del
   mapa son los de Google.

   El armazón (velo, diálogo, cierre, transición) es el compartido de
   mp360-superficie.css. Acá vive sólo lo propio de esta superficie.
   ========================================================================== */

.mp360-surface--mapa .mp360-surface__body {
  display: flex;
  flex-direction: column;
}

/* La banda del título y la cruz comparten EJE y MARGEN.

   La banda mide el alto del botón más su aire, y el título se centra en ella;
   la cruz se centra en el mismo alto. Así los dos quedan sobre la misma línea
   óptica en vez de que la cruz caiga más abajo.

   Horizontalmente los dos usan el mismo inset (`--sf-pad`): el título desde el
   borde izquierdo, la cruz desde el derecho. Antes el título arrancaba a 32px
   y la cruz cerraba a 12px, y esa asimetría es lo que se leía como "el texto
   más a la izquierda". */
.mp360-mapa__head {
  --mapa-banda: calc(var(--sf-cierre) + 1.5rem);   /* 44 + 24 = 68px */

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--mapa-banda);
  padding: 0.5rem var(--sf-pad);
  padding-right: calc(var(--sf-pad) + var(--sf-cierre) + 1rem);
  border-bottom: 1px solid var(--sf-borde);
  background: var(--sf-blanco);
}

.mp360-surface--mapa .mp360-surface__close {
  top: calc((var(--sf-cierre) + 1.5rem) / 2);
  right: var(--sf-pad);
  transform: translateY(-50%);
  /* La banda ya lo separa del mapa: no necesita sombra para leerse. */
  box-shadow: none;
}

.mp360-mapa__title {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);   /* 17 → 22px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--sf-tinta);
  text-wrap: balance;
}

/* El mapa ocupa el área principal y llega a los bordes del panel: es el
   contenido, no una ilustración. */
.mp360-mapa__frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
  background: #E8E8E8;
}

/* Móvil vertical: la superficie es casi completa y el mapa se queda con casi
   todo el alto. El título baja un escalón para no comerle área útil. */
@media (max-width: 599.98px) {
  .mp360-mapa__head {
    --mapa-banda: calc(var(--sf-cierre) + 1rem);   /* 44 + 16 = 60px */
    padding: 0.375rem 1rem;
    padding-right: calc(1rem + var(--sf-cierre) + 0.75rem);
  }
  .mp360-surface--mapa .mp360-surface__close {
    top: calc((var(--sf-cierre) + 1rem) / 2);
    right: 1rem;
  }
  .mp360-mapa__title { font-size: 1rem; }
}

/* Apaisado corto: el alto es el recurso escaso. El título se compacta pero no
   desaparece — es lo que dice a dónde lleva el recorrido. */
@media (orientation: landscape) and (max-height: 480px) {
  .mp360-mapa__head {
    --mapa-banda: calc(var(--sf-cierre) + 0.75rem);   /* 44 + 12 = 56px */
    padding: 0.25rem 0.875rem;
    padding-right: calc(0.875rem + var(--sf-cierre) + 0.625rem);
  }
  .mp360-surface--mapa .mp360-surface__close {
    top: calc((var(--sf-cierre) + 0.75rem) / 2);
    right: 0.875rem;
  }
  .mp360-mapa__title { font-size: 0.9375rem; }
}