/* MP360 · Ayres de Cardales — «Ubicación» (tanda 5)
 *
 * Port de FeaturesHero (Advisora: webflow.css .section_features-hero 1.2fr/1fr
 * gap .75rem, .features-hero_left-content radio 1.5rem y padding
 * 3rem 2rem 3rem 3.62rem, .features-hero_content-wrap 34rem, header gap 1rem,
 * text-6xl 60/1.2, .featues-hero_visual radio 1.5rem con clip + AyresPreviewStyle:
 * iframe absoluto a sangre, gap de content-wrap 40 px). Adaptado a modal MP360,
 * tipografías y paleta del proyecto.
 *
 * Contrato responsive
 *   Tarea: saber dónde está el proyecto y abrir la ruta en Google Maps.
 *   Imprescindible: título · dirección · orientación (2 bloques) · CTA · cerrar · mapa.
 *   El cierre vive anclado al contenedor exterior del modal (mp360-ub__dialogo),
 *   esquina superior derecha del CONJUNTO (no del panel de texto ni del iframe
 *   ni de su documento interno). En el embed `output=embed` de Google Maps esa
 *   franja queda libre de controles nativos (tipo de mapa, Street View, zoom,
 *   atribución), que se ubican abajo; igual se mantiene apartado del borde para
 *   no interferir. En mobile apilado sigue en la esquina superior derecha de
 *   toda la superficie (cae sobre el panel de texto, que va arriba).
 *   Desktop / tablet horizontal (> 899 px): texto 1.2fr | mapa 1fr, alto útil.
 *   Tablet vertical (≤ 899 px, alto > 500): texto arriba, mapa abajo (mín.
 *     260 px); un único scroll del diálogo si el alto no alcanza.
 *   Mobile vertical (≤ 767 px): igual, casi pantalla completa con safe areas,
 *     texto centrado (Advisora ≤ 767).
 *   Mobile horizontal (alto ≤ 500): texto | mapa en dos columnas; solo el
 *     texto scrollea si hace falta.
 *   Compatibilidad: BLOCK (velo). Capa 50 en #mp360-root (visible en fullscreen).
 */

.mp360-root .mp360-ub {
  --ub-gutter: clamp(16px, 3vw, 40px);
  --ub-ancho: 1400px;
  --ub-alto: 800px;
  --ub-radio: 1.5rem;
  --ub-fondo: var(--neutral-200);
  --ub-panel: var(--neutral-100);
  --ub-titulo: var(--primary-900);
  --ub-texto: var(--neutral-700);

  position: absolute;
  left: 0;
  right: 0;
  top: var(--mp360-vv-top, 0px);
  height: var(--mp360-vv-h, 100%);
  z-index: 50;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding:
    max(var(--ub-gutter), env(safe-area-inset-top, 0px))
    max(var(--ub-gutter), env(safe-area-inset-right, 0px))
    max(var(--ub-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--ub-gutter), env(safe-area-inset-left, 0px));
  container-type: size;
  font-family: var(--mp360-font-ui);
  color: var(--ub-texto);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.mp360-ub[hidden] { display: none !important; }
.mp360-ub[data-estado="cerrando"] { pointer-events: none; }

.mp360-ub__velo {
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 33, 0.8);
  touch-action: none;
}

/* ---------------- section_features-hero ---------------- */

.mp360-ub__dialogo {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.75rem;
  width: min(100cqw, var(--ub-ancho));
  height: min(100cqh, var(--ub-alto));
  padding: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius-modal);
  background: var(--ub-fondo);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.55);
  outline: none;
}

/* ---------------- features-hero_left-content ---------------- */

.mp360-ub__izq {
  position: relative;
  min-height: 0;
  display: flex;
  border-radius: var(--ub-radio);
  background: var(--ub-panel);
  overflow: hidden;
}

.mp360-ub__izq-scroll {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  padding: 3rem 2rem 3rem 3.62rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mp360-ub__content-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  max-width: 34rem;
}

.mp360-ub__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mp360-ub__titulo {
  margin: 0;
  font-family: var(--mp360-font-display);
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: var(--ub-titulo);
  text-wrap: balance;
}

.mp360-ub__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp360-ub__texto {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: var(--mp360-ui-tracking);
  text-wrap: pretty;
}

.mp360-ub__acciones { display: inline-flex; }

/* ---------------- featues-hero_visual ---------------- */

.mp360-ub__visual {
  position: relative;
  min-height: 0;
  overflow: clip;
  border-radius: var(--ub-radio);
  background: var(--neutral-300);            /* mientras carga el mapa */
}

.mp360-ub__mapa {
  position: absolute;
  inset: 0;
}

.mp360-ub__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------- cierre: anclado al CONJUNTO, no al panel ni al iframe ----- *
 * Esquina superior derecha del mp360-ub__dialogo completo. Cae sobre la franja
 * superior del mapa, que el embed `output=embed` deja libre de controles
 * nativos (tipo de mapa/zoom/Street View/atribución viven abajo). Se separa
 * del borde real del iframe con margen para no interferir con esos controles
 * si el usuario hace fullscreen del embed. */
.mp360-ub__cerrar {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
}

/* ---------------- desktop reducido / tablet (Advisora ≤ 991) ---------------- */

/* En modal la columna de texto es más angosta que la página de Advisora: a
   60 px el título pasaba a 3 líneas por debajo de ~1200 px. */
@media (max-width: 1199px) {
  .mp360-ub__titulo { font-size: 3rem; }
}

@media (max-width: 991px) {
  .mp360-root .mp360-ub { --ub-radio: 1.25rem; }
  .mp360-ub__izq-scroll { padding: 2.5rem 2.25rem; }
}

/* ---------------- apilado: texto arriba, mapa abajo ---------------- */

@media (max-width: 899px) and (min-height: 501px) {
  .mp360-ub__dialogo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(10rem, 1fr);
    height: 100cqh;
    max-height: 100cqh;
    overflow: hidden;
  }
  /* top: reserva para el cierre, que en este layout apilado cae sobre la
     esquina superior derecha del panel de texto (va arriba del mapa). */
  .mp360-ub__izq-scroll { overflow: visible; padding: 3.25rem 2.25rem 2.25rem; }
  .mp360-ub__content-wrap { gap: 2rem; }
}

/* ---------------- mobile vertical ---------------- */

@media (max-width: 767px) and (min-height: 501px) {
  .mp360-root .mp360-ub { --ub-gutter: 8px; --ub-radio: 1rem; }
  .mp360-ub__dialogo { gap: 0.75rem; padding: 0.5rem; border-radius: 1.25rem; }
  .mp360-ub__cerrar { top: 0.625rem; right: 0.625rem; }
  /* top: reserva para el cierre (esquina superior derecha de toda la
     superficie; el texto va arriba en este layout apilado). */
  .mp360-ub__izq-scroll { padding: 3rem 1rem 1.25rem; text-align: center; }
  .mp360-ub__content-wrap { align-items: center; gap: 1rem; }
  .mp360-ub__header { align-items: center; gap: 0.625rem; }
  .mp360-ub__titulo { font-size: 1.875rem; line-height: 1.15; padding-inline: 1.75rem; }
  .mp360-ub__texto { font-size: 0.9375rem; line-height: 1.45; }
}

/* ---------------- mobile horizontal / alto reducido ---------------- */

@media (max-height: 500px) and (orientation: landscape) {
  .mp360-root .mp360-ub { --ub-gutter: 8px; --ub-radio: 1rem; }
  .mp360-ub__dialogo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100cqw;
    height: 100cqh;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 1.25rem;
  }
  /* El cierre cae sobre la esquina superior derecha del CONJUNTO, es decir
     sobre el panel del mapa (columna derecha) en este layout de dos columnas:
     el panel de texto ya no necesita reserva a la derecha. */
  .mp360-ub__cerrar { top: 0.5rem; right: 0.5rem; }
  .mp360-ub__izq-scroll { align-items: safe center; padding: 0.75rem 1.25rem; }
  .mp360-ub__content-wrap { gap: 1rem; }
  .mp360-ub__header { gap: 0.5rem; }
  .mp360-ub__titulo { font-size: 1.75rem; }
  .mp360-ub__texto { font-size: 0.9375rem; line-height: 1.45; }
}