/* MP360 · Ayres de Cardales — «Dónde estoy» (tanda 5)
 *
 * Port de FeaturesOverview (Advisora: webflow.css .section_overview,
 * .header.is-centered, .overview_card, .overview_card-visual/-content/-header +
 * AyresPreviewStyle) con una sola imagen. Valores de referencia conservados:
 * radio 1.5rem de visual, padding 3.62rem / 3rem, gap de header 1.5rem, gap de
 * bloques 40 px, contenido max 35rem con padding-left 5rem, card-header 20 px,
 * títulos text-5xl (48/1.16) y text-3xl (36/1.11). Adaptado: tipografías y
 * paleta del proyecto, modal MP360.
 *
 * Contrato responsive
 *   Tarea: entender qué ofrece el mapa del barrio y abrirlo.
 *   Imprescindible: título · explicación · CTA · cerrar. Apoyo: plano.
 *   Scroll: uno solo (.mp360-de__scroll) y solo si el alto no alcanza.
 *   Desktop / tablet horizontal (> 899 px): plano cuadrado a la izquierda,
 *     dimensionado por el menor entre medio ancho y alto útil (unidades de
 *     contenedor de la capa); texto + CTA a la derecha.
 *   Tablet vertical (≤ 899 px, alto > 500): apilado centrado (Advisora ≤ 767).
 *   Mobile vertical (≤ 767 px): superficie breve sin scroll; título,
 *     explicación y CTA. La imagen y el desarrollo ampliado quedan fuera.
 *   Mobile horizontal (alto ≤ 500): plano a la izquierda del alto útil, texto a
 *     la derecha; cierre fijo.
 *   Compatibilidad: BLOCK (velo). Capa 50 en #mp360-root (visible en fullscreen).
 */

.mp360-root .mp360-de {
  --de-gutter: clamp(16px, 3vw, 40px);
  --de-ancho: 1180px;
  --de-pad-x: 3.62rem;
  --de-pad-y: 3rem;
  --de-gap: 1.5rem;
  --de-header-h: 7rem;                       /* título + gap + bajada (1 línea) */
  --de-radio-visual: 1.5rem;
  --de-ratio: 1.4295;                        /* plano-satelital-lotes.png: 1145 / 801 */
  --de-fondo: var(--neutral-100);
  --de-titulo: var(--primary-900);
  --de-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(--de-gutter), env(safe-area-inset-top, 0px))
    max(var(--de-gutter), env(safe-area-inset-right, 0px))
    max(var(--de-gutter), env(safe-area-inset-bottom, 0px))
    max(var(--de-gutter), env(safe-area-inset-left, 0px));
  container-type: size;
  font-family: var(--mp360-font-ui);
  color: var(--de-texto);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

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

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

/* ---------------- panel (section_overview) ---------------- */

.mp360-de__dialogo {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100cqw, var(--de-ancho));
  max-height: 100cqh;
  overflow: hidden;
  border-radius: var(--radius-modal);
  background: var(--de-fondo);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.55);
  outline: none;
}

.mp360-de__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.mp360-de__scroll {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--de-gap);
  padding: var(--de-pad-y) var(--de-pad-x);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ---------------- header.is-centered ---------------- */

.mp360-de__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 3rem;                      /* reserva lateral del cierre */
  text-align: center;
}

.mp360-de__titulo,
.mp360-de__subtitulo {
  margin: 0;
  font-family: var(--mp360-font-display);
  font-weight: 500;
  color: var(--de-titulo);
  text-wrap: balance;
}

.mp360-de__titulo {
  font-size: 3rem;
  line-height: 1.16;
  letter-spacing: -0.06em;
}

.mp360-de__bajada {
  max-width: 40.625rem;                      /* 650 px (preview) */
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: var(--mp360-ui-tracking);
  text-wrap: pretty;
}

/* ---------------- overview_card ---------------- */

.mp360-de__card {
  --de-visual: max(15rem, min(
    calc((min(100cqw, var(--de-ancho)) - 2 * var(--de-pad-x)) / 2),
    calc((100cqh - 2 * var(--de-pad-y) - var(--de-header-h) - var(--de-gap)) * var(--de-ratio))
  ));
  display: grid;
  grid-template-columns: var(--de-visual) minmax(0, 1fr);
  align-items: center;
}

.mp360-de__visual {
  position: relative;
  width: var(--de-visual);
  aspect-ratio: var(--de-ratio);
  overflow: clip;
  border-radius: var(--de-radio-visual);
  background: var(--white);                  /* .plan-image: contain sobre blanco (guarda ante redondeos) */
}

.mp360-de__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mp360-de__contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  max-width: 35rem;
  padding-left: 5rem;
}

.mp360-de__card-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mp360-de__subtitulo {
  font-size: 2.25rem;
  line-height: 1.11;
  letter-spacing: -0.06em;
}

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

.mp360-de__acciones { display: flex; }

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

@media (max-width: 991px) {
  .mp360-root .mp360-de { --de-pad-x: 2.25rem; --de-header-h: 6.5rem; --de-radio-visual: 1rem; --de-gap: 1.25rem; }
  .mp360-de__header { gap: 1rem; }
  .mp360-de__contenido { gap: 2rem; padding-left: 2rem; }
  .mp360-de__card-header { gap: 1rem; }
  .mp360-de__titulo { font-size: 2.5rem; }
  .mp360-de__subtitulo { font-size: 1.875rem; }
}

/* ---------------- apilado (Advisora ≤ 767, aplicado desde 899) ---------------- */

@media (max-width: 899px) and (min-height: 501px) {
  .mp360-root .mp360-de { --de-gap: 1.25rem; }
  .mp360-de__card {
    --de-visual: min(calc(100cqw - 2 * var(--de-pad-x)), max(13.75rem, calc((100cqh - 30rem) * var(--de-ratio))));
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  .mp360-de__contenido {
    align-items: center;
    gap: 1.5rem;
    max-width: 35rem;
    padding-left: 0;
  }
  .mp360-de__acciones { justify-content: center; }
}

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

@media (max-width: 767px) and (min-height: 501px) {
  .mp360-root .mp360-de {
    --de-gutter: 8px;
    --de-pad-x: 1rem;
    --de-pad-y: 2rem;
    --de-gap: 1.5rem;
    --de-radio-visual: 0.75rem;
  }
  .mp360-de__dialogo { width: min(100cqw, 34rem); border-radius: 1.25rem; }
  .mp360-de__cerrar { top: 0.75rem; right: 0.75rem; }
  .mp360-de__scroll { overflow: hidden; }
  .mp360-de__header { gap: 0.75rem; padding-inline: 1.5rem; }
  .mp360-de__titulo { font-size: 2rem; line-height: 1.15; }
  .mp360-de__bajada { max-width: 28ch; font-size: 1rem; line-height: 1.5; }
  .mp360-de__card { display: block; text-align: center; }
  .mp360-de__visual,
  .mp360-de__card-header { display: none; }
  .mp360-de__contenido { display: block; max-width: none; padding: 0; }
  .mp360-de__acciones { justify-content: center; }
}

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

@media (max-height: 500px) and (orientation: landscape) {
  .mp360-root .mp360-de {
    --de-gutter: 8px;
    --de-pad-x: 1rem;
    --de-pad-y: 1rem;
    --de-radio-visual: 0.75rem;
  }
  .mp360-de__dialogo { width: 100cqw; height: 100cqh; border-radius: 1.25rem; }
  .mp360-de__cerrar { top: 0.625rem; right: 0.625rem; }
  /* Plano a la izquierda en todo el alto; header y contenido a la derecha.
     --de-visual-h es el alto disponible; el ancho real de la imagen sale de
     multiplicarlo por --de-ratio (plano apaisado), tope 55cqw para no invadir
     el texto. */
  .mp360-de__scroll {
    display: grid;
    grid-template-columns: var(--de-visual-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
    row-gap: 1rem;
    --de-visual-h: min(calc(100cqh - 2 * var(--de-pad-y)), 46cqw);
    --de-visual-w: min(calc(var(--de-visual-h) * var(--de-ratio)), 55cqw);
  }
  .mp360-de__card { display: contents; }
  .mp360-de__visual { grid-column: 1; grid-row: 1 / span 2; width: var(--de-visual-w); align-self: start; }
  .mp360-de__header { grid-column: 2; grid-row: 1; align-items: flex-start; gap: 0.5rem; padding-inline: 0 3.25rem; text-align: left; }
  .mp360-de__contenido { grid-column: 2; grid-row: 2; align-self: start; justify-content: flex-start; gap: 1rem; padding-left: 0; }
  .mp360-de__titulo { font-size: 1.75rem; }
  .mp360-de__bajada { font-size: 1rem; line-height: 1.45; }
  .mp360-de__card-header { gap: 0.5rem; }
  .mp360-de__subtitulo { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.03em; }
  .mp360-de__texto { font-size: 0.9375rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-de__scroll { scroll-behavior: auto; }
}