/* ==========================================================================
   MP360 · Nuevo Alisos — capa externa
   --------------------------------------------------------------------------
   Fase 1: wrapper + CTA principal. La navbar completa, cards, cotizador,
   plano propio, filtros y leyenda llegan en fases siguientes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Design system (tokens del proyecto)

   Color usage guideline:
   Neutral ~60% dominante · Primary ~30% soporte · Secondary ~10% acento
   Heuristica, no una cuota de pixeles. Colores de sistema y media excluidos.
   -------------------------------------------------------------------------- */
:root {

  --white: #FFFFFF;

  /* Tipografia unica del sistema. */
  --font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Neutral */
  --neutral-50: #FEFEFE;
  --neutral-100: #F5F5F5;
  --neutral-200: #E8E8E8;
  --neutral-300: #D4D4D4;
  --neutral-400: #B6B6B6;
  --neutral-500: #939393;
  --neutral-600: #717171;
  --neutral-700: #545454;
  --neutral-800: #393939;
  --neutral-900: #232323;
  --neutral-950: #151515;

  /* Primary */
  --primary-50: #FFF3E7;
  --primary-100: #FFE0C3;
  --primary-200: #FFC385;
  --primary-300: #F9A032;
  --primary-400: #DD8700;
  --primary-500: #BB7100;
  --primary-600: #985B00;
  --primary-700: #784700;
  --primary-800: #593300;
  --primary-900: #3D2200;
  --primary-950: #281400;

  /* Secondary */
  --secondary-50: #F1FBD9;
  --secondary-100: #E2F4B6;
  --secondary-200: #CCE682;
  --secondary-300: #B3D342;
  --secondary-400: #96B500;
  --secondary-500: #7C9600;
  --secondary-600: #627700;
  --secondary-700: #4B5C00;
  --secondary-800: #374300;
  --secondary-900: #242D00;
  --secondary-950: #161D00;

  /* Info */
  --info-50: #F0F6FF;
  --info-100: #DBE9FF;
  --info-200: #BAD4FF;
  --info-300: #93BCFF;
  --info-400: #659FFF;
  --info-500: #3B82F6;
  --info-600: #2166D3;
  --info-700: #0F4DAD;
  --info-800: #043784;
  --info-900: #02245D;
  --info-950: #001640;

  /* Success */
  --success-50: #EAFAEF;
  --success-100: #D4F0DD;
  --success-200: #B2DEC1;
  --success-300: #8EC8A4;
  --success-400: #6AAE85;
  --success-500: #4E956C;
  --success-600: #367B54;
  --success-700: #246140;
  --success-800: #16482D;
  --success-900: #0C311D;
  --success-950: #041F11;

  /* Warning */
  --warning-50: #FFF2EC;
  --warning-100: #FFE1D2;
  --warning-200: #FFC3A6;
  --warning-300: #FF9F6D;
  --warning-400: #F97316;
  --warning-500: #D45E00;
  --warning-600: #AC4B00;
  --warning-700: #873900;
  --warning-800: #652900;
  --warning-900: #461A00;
  --warning-950: #2E0F00;

  /* Danger */
  --danger-50: #FFF2F0;
  --danger-100: #FFDFDC;
  --danger-200: #FFC1BB;
  --danger-300: #FF9E96;
  --danger-400: #FF6F68;
  --danger-500: #EF4444;
  --danger-600: #CA212A;
  --danger-700: #A30017;
  --danger-800: #78000E;
  --danger-900: #540006;
  --danger-950: #380003;

  /* Magic */
  --magic-50: #F7F2FF;
  --magic-100: #EEE2FF;
  --magic-200: #DEC6FF;
  --magic-300: #CDA6FF;
  --magic-400: #BB7EFF;
  --magic-500: #A855F7;
  --magic-600: #8B37D4;
  --magic-700: #6F21AE;
  --magic-800: #521184;
  --magic-900: #38085D;
  --magic-950: #250240;

  /* Background */
  --background-canvas: var(--neutral-50);
  --background-surface: var(--white);
  --background-inverse: var(--neutral-900);
  --background-neutral: var(--neutral-50);
  --background-neutral-hover: var(--neutral-100);
  --background-neutral-active: var(--neutral-300);
  --background-neutral-selected: var(--neutral-200);
  --background-primary: var(--primary-600);
  --background-primary-subtle: var(--primary-50);
  --background-primary-hover: var(--primary-700);
  --background-primary-active: var(--primary-900);
  --background-primary-selected: var(--primary-800);
  --background-primary-disabled: var(--primary-200);
  --background-secondary: var(--secondary-600);
  --background-secondary-subtle: var(--secondary-50);
  --background-secondary-hover: var(--secondary-700);
  --background-secondary-active: var(--secondary-900);
  --background-secondary-selected: var(--secondary-800);
  --background-secondary-disabled: var(--secondary-200);
  --background-info: var(--info-600);
  --background-info-subtle: var(--info-50);
  --background-info-hover: var(--info-700);
  --background-info-active: var(--info-900);
  --background-info-selected: var(--info-800);
  --background-info-disabled: var(--info-200);
  --background-success: var(--success-600);
  --background-success-subtle: var(--success-50);
  --background-success-hover: var(--success-700);
  --background-success-active: var(--success-900);
  --background-success-selected: var(--success-800);
  --background-success-disabled: var(--success-200);
  --background-warning: var(--warning-600);
  --background-warning-subtle: var(--warning-50);
  --background-warning-hover: var(--warning-700);
  --background-warning-active: var(--warning-900);
  --background-warning-selected: var(--warning-800);
  --background-warning-disabled: var(--warning-200);
  --background-danger: var(--danger-600);
  --background-danger-subtle: var(--danger-50);
  --background-danger-hover: var(--danger-700);
  --background-danger-active: var(--danger-900);
  --background-danger-selected: var(--danger-800);
  --background-danger-disabled: var(--danger-200);
  --background-magic: var(--magic-600);
  --background-magic-subtle: var(--magic-50);
  --background-magic-hover: var(--magic-700);
  --background-magic-active: var(--magic-900);
  --background-magic-selected: var(--magic-800);
  --background-magic-disabled: var(--magic-200);

  /* Border */
  --border-default: var(--neutral-100);
  --border-primary: var(--primary-600);
  --border-secondary: var(--secondary-600);
  --border-info: var(--info-600);
  --border-success: var(--success-600);
  --border-warning: var(--warning-600);
  --border-danger: var(--danger-600);
  --border-magic: var(--magic-600);

  /* Text */
  --text-body: var(--neutral-800);
  --text-subtle: var(--neutral-500);
  --text-disabled: var(--neutral-300);
  --text-inverse: var(--neutral-50);
  --text-primary: var(--primary-600);
  --text-on-primary: var(--primary-50);
  --text-on-primary-subtle: var(--primary-700);
  --text-secondary: var(--secondary-600);
  --text-on-secondary: var(--secondary-50);
  --text-on-secondary-subtle: var(--secondary-700);
  --text-info: var(--info-600);
  --text-on-info: var(--info-50);
  --text-on-info-subtle: var(--info-700);
  --text-success: var(--success-600);
  --text-on-success: var(--success-50);
  --text-on-success-subtle: var(--success-700);
  --text-warning: var(--warning-600);
  --text-on-warning: var(--warning-50);
  --text-on-warning-subtle: var(--warning-700);
  --text-danger: var(--danger-600);
  --text-on-danger: var(--danger-50);
  --text-on-danger-subtle: var(--danger-700);
  --text-magic: var(--magic-600);
  --text-on-magic: var(--magic-50);
  --text-on-magic-subtle: var(--magic-700);

  /* ---- Shape · MP360 Design System v4.1 (base 12px, perfil soft) ----------
     Escala estructural. No hay un rounded global: cada componente consume el
     alias semantico de su categoria. `full` y `circle` son formas especiales,
     opt-in por categoria, y no son el escalon siguiente de la escala. */
  --radius-none: 0px;
  --radius-compact: 10px;
  --radius-control: 12px;
  --radius-container: 18px;
  --radius-prominent: 24px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Formas especiales, opt-in por categoria. Nunca globales. */
  --radius-badge: var(--radius-control);
  --radius-navbar: var(--radius-control);
  --radius-primary-cta: var(--radius-control);
  --radius-pill: var(--radius-badge); /* compatibilidad v3 */

  /* Recetas por componente: la superficie exterior lleva mas radio que la
     superficie anidada. */
  --radius-tooltip: var(--radius-compact);
  --radius-micro-surface: var(--radius-compact);
  --radius-button: var(--radius-control);
  --radius-input: var(--radius-control);
  --radius-segmented: var(--radius-control);
  --radius-inner-surface: var(--radius-container);
  --radius-alert: var(--radius-container);
  --radius-card: var(--radius-prominent);
  --radius-modal: var(--radius-prominent);
  --radius-bottom-sheet: var(--radius-prominent);
  --radius-icon-button: var(--radius-circle);
  --radius-divider: var(--radius-none);
  --radius-data-row: var(--radius-none);
  --radius-table-surface: var(--radius-none);

  /* Contorno anidado: solo cuando la forma interior sigue la MISMA esquina que
     su contenedor. Estas tres entradas se re-declaran en el scope de cada
     composicion; un componente independiente conserva su propio token y no
     usa este calculo. El `max()` impide radios negativos cuando el gap supera
     al radio exterior. */
  --radius-nested-outer: var(--radius-prominent);
  --radius-nested-gap: 8px;
  --radius-nested-min: var(--radius-compact);
  --radius-nested-calculated: max(var(--radius-nested-min), calc(var(--radius-nested-outer) - var(--radius-nested-gap)));

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---- Motion ------------------------------------------------------------
     Unica fuente de duraciones y curvas del sistema MP360. El
     `button_component` de Corevia conserva su motion original y no consume
     estos tokens. */
  --mo-fast: 180ms;      /* hover, chips, recalculo de cifras */
  --mo-base: 300ms;      /* cambio de contenido, despliegue */
  --mo-surface: 420ms;   /* apertura de una superficie completa */
  --mo-sheet: 460ms;     /* apertura de la hoja inferior en movil */
  --mo-exit: 240ms;      /* toda salida */
  --mo-in: cubic-bezier(0.22, 1, 0.36, 1);
  --mo-out: cubic-bezier(0.4, 0, 1, 1);
  --mo-move: cubic-bezier(0.4, 0, 0.2, 1);
  --mo-stagger: 55ms;    /* intervalo entre bloques de una cascada */
  --mo-shift: 8px;       /* desplazamiento maximo de entrada */
  --mo-scale: 0.985;     /* escala inicial, solo en la card */
}

/* Movimiento reducido: se neutralizan los tokens y con eso desaparecen
   cascada, desplazamiento y escala sin tocar una regla de componente. Nada
   queda temporalmente invisible. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-fast: 1ms;
    --mo-base: 1ms;
    --mo-surface: 1ms;
    --mo-sheet: 1ms;
    --mo-exit: 1ms;
    --mo-stagger: 0ms;
    --mo-shift: 0px;
    --mo-scale: 1;
  }
}

/* --------------------------------------------------------------------------
   2 · Identidad Nuevo Alisos
   Muestreado de MATERIAL NITO/SCRENSHOOTS/Elementos de la interfaz.png
   (pildora CTA y barra superior de la referencia aprobada).
   -------------------------------------------------------------------------- */
:root {
  --na-orange: #F58327;
  --na-orange-hover: #E0741B;
  --na-surface-dark: #0D0D0D;
  --na-surface-dark-alpha: rgba(13, 13, 13, 0.82);
  --na-ink-on-orange: var(--neutral-950); /* 8.0:1 sobre --na-orange */
  --na-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.28);

  /* ---- Superficies comerciales claras ------------------------------------
     La ficha de lote y la disponibilidad viven sobre el panorama en el
     off-white del design system, no en una superficie oscura. Tinta, lineas y
     color de accion se derivan de las escalas exportadas: no hay ningun
     hexadecimal propio aca. */
  --na-paper: var(--neutral-50);
  --na-ink: var(--neutral-950);
  --na-ink-soft: var(--neutral-700);
  /* Hairlines: separan sin dibujar una caja. */
  --na-line: rgba(21, 21, 21, 0.1);
  --na-line-strong: rgba(21, 21, 21, 0.2);
  --na-paper-hover: rgba(21, 21, 21, 0.05);
  --na-paper-active: rgba(21, 21, 21, 0.09);
  /* Accion sobre papel: el naranja de marca no llega a 4.5:1 como texto, asi
     que los enlaces y disparadores usan el mismo tono en su version 600 del
     sistema -5.4:1 sobre el papel-. El naranja de marca sigue siendo del CTA. */
  --na-action: var(--primary-600);
  --na-shadow-paper: 0 10px 32px rgba(13, 13, 13, 0.26);

  /* Superficie del wipe entre panoramas: el naranja de marca. Sobre el, el
     logo va en su version blanca, que mide 2.4:1 -la misma relacion de marca
     ya aceptada para el CTA- pero a un tamano grafico grande, no de texto. */
  --na-transition-surface: var(--na-orange);

  /* Cursor de la experiencia. Vector aprobado, sin redibujar. La punta de la
     flecha esta en (11, 8) del viewBox de 32. */
  --na-cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.542%208.85804C10.5421%207.37993%2012.2605%206.56833%2013.4023%207.50648L21.5039%2014.1637L21.6152%2014.2623C22.7052%2015.3105%2022.0171%2017.2056%2020.458%2017.2633L18.8164%2017.3239L20.7891%2021.5485L20.876%2021.7623C21.226%2022.7677%2020.8183%2023.8863%2019.9043%2024.4313L19.7012%2024.5387C18.5749%2025.064%2017.2362%2024.5764%2016.7109%2023.4508L14.7363%2019.2194L13.5986%2020.4977C12.563%2021.6607%2010.6656%2020.989%2010.5479%2019.483L10.542%2019.3346V8.85804ZM11.542%2019.3346C11.5422%2020.0237%2012.3932%2020.3474%2012.8516%2019.8327L15%2017.4196L17.6172%2023.028C17.9091%2023.6535%2018.6528%2023.9242%2019.2783%2023.6325C19.9037%2023.3405%2020.1745%2022.5968%2019.8828%2021.9713L17.2734%2016.3805L20.4209%2016.2643C21.1108%2016.2388%2021.4025%2015.3744%2020.8691%2014.9362L12.7676%208.27894C12.2782%207.87692%2011.5421%208.22473%2011.542%208.85804V19.3346Z%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23c0%29%22%2F%3E%3Cpath%20d%3D%22M11.542%208.85819C11.542%208.22475%2012.2782%207.87693%2012.7676%208.27908L20.8691%2014.9363C21.4025%2015.3746%2021.1108%2016.239%2020.4209%2016.2644L17.2734%2016.3806L19.8828%2021.9715C20.1745%2022.597%2019.9037%2023.3407%2019.2783%2023.6326C18.6528%2023.9243%2017.9091%2023.6536%2017.6172%2023.0281L15%2017.4197L12.8516%2019.8328C12.3932%2020.3475%2011.5422%2020.0239%2011.542%2019.3348V8.85819Z%22%20fill%3D%22%23040404%22%2F%3E%3Cdefs%3E%3Cfilter%20id%3D%22c0%22%20x%3D%229.542%22%20y%3D%227.105%22%20width%3D%2213.604%22%20height%3D%2219.645%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%20dy%3D%221%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.5%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.25%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_188_428%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_188_428%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") 11 8, default;
}

/* --------------------------------------------------------------------------
   2b · Cursor custom · solo desktop con puntero fino
   Cursor CSS nativo por Data URI: no hay elemento que siga al mouse, ni
   listeners de movimiento, ni rAF. En tactil no se declara nada.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Cursor de toda la experiencia, incluidas las superficies que el player
     marca con `grab`/`grabbing` mientras se arrastra el panorama. */
  html.mp360-cursor,
  html.mp360-cursor * {
    cursor: var(--na-cursor);
  }

  /* Donde se escribe, el cursor de texto sigue siendo la informacion correcta. */
  html.mp360-cursor input,
  html.mp360-cursor textarea,
  html.mp360-cursor select,
  html.mp360-cursor [contenteditable="true"] {
    cursor: text;
  }

  /* Donde se selecciona texto, el cursor del sistema sigue siendo la
     informacion correcta. */
  html.mp360-cursor ::selection {
    cursor: text;
  }
}

/* --------------------------------------------------------------------------
   3 · Estructura del wrapper
   -------------------------------------------------------------------------- */
/* Corevia hereda el border-box global de Webflow; el wrapper lo repone para
   que las reglas trasladadas resuelvan los mismos tamanos computados. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Los controles no heredan la familia del documento por defecto, y el
   `button_component` de Corevia declara la suya por variable: las dos rutas
   terminan en la misma autoridad. */
button,
input,
select,
textarea,
.button_component,
.button-text {
  font-family: var(--font-sans);
}

/* Sin pesos ni cursivas simuladas: si un peso de Figtree no llego, se usa el
   real mas cercano en lugar de engordar el trazo. */
.mp360,
.mp360 button,
.mp360 input,
.mp360 select,
.mp360 textarea {
  font-synthesis: none;
}

/* Cifras comparables -cuotas, precios, porcentajes- con ancho fijo. */
.mp360-tip__cuotas,
.mp360-legend__count,
.mp360-legend__band,
.mp360-lotfilter__plan,
.mp360-lot__fact dd,
.mp360-lot__value,
.mp360-lot__amount,
.mp360-lot__support dd,
.mp360-lot__input {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3b . Iconografia
   Un unico sprite Nucleo `ui` outline 18 en el documento y una unica clase de
   normalizacion. Cada icono hereda `currentColor` de su boton y el grosor de
   la variable del bundle; ningun componente declara su propio tamano.
   -------------------------------------------------------------------------- */
.mp360-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mp360-icon {
  --nucleo-stroke-width: 1.5;
  flex: none;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--na-surface-dark);
  font-family: var(--font-sans);
  color: var(--text-inverse);
  -webkit-text-size-adjust: 100%;
}

.mp360 {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Arrastrar la camara no debe seleccionar el texto de la interfaz. */
  user-select: none;
  -webkit-user-select: none;
}

/* En pantalla completa entra el documento entero, no el iframe: el panorama
   sigue de fondo y la interfaz MP360 queda encima. */
html:fullscreen,
html:fullscreen body {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}

html:fullscreen::backdrop { background: var(--na-surface-dark); }

/* El panorama es el contenido principal: ocupa todo y no se comprime. */
.mp360__tour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Capa MP360: no captura eventos salvo en sus propios controles, para no
   robarle drag ni clic al tour. */
.mp360__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.mp360__ui > * {
  pointer-events: auto;
}

/* Mientras el tour muestra su intro/precarga a pantalla completa, la capa
   MP360 se retira: no hay dos superficies compitiendo por el mismo espacio. */
.mp360__ui {
  opacity: 1;
  transform: none;
  transition: opacity var(--mo-surface) var(--mo-in),
              transform var(--mo-surface) var(--mo-in),
              visibility 0s linear 0s;
}

.mp360__ui.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--mo-exit) var(--mo-out),
              transform var(--mo-exit) var(--mo-out),
              visibility 0s linear var(--mo-exit);
}

/* Vuelta a escena. La capa no reaparece entera de un golpe: cada control
   entra en su turno, de arriba hacia abajo, con el mismo `mp360-rise` que ya
   usan la ficha y los filtros. El orden lo fija `--row`. */
.mp360__ui.is-entering > * {
  animation: mp360-rise var(--mo-surface) var(--mo-in) both;
  animation-delay: calc(var(--row, 0) * var(--mo-stagger));
}

.mp360__ui .navbar { --row: 0; }
.mp360__ui .nav-panel { --row: 0; }
.mp360__ui .mp360-back { --row: 1; }
.mp360__ui .mp360-legend,
.mp360__ui .mp360-lotfilter { --row: 2; }
.mp360__ui .mp360-scenes { --row: 3; }
.mp360__ui .mp360-plano { --row: 4; }

/* Cascada de bloques compartida. La usan la vuelta de la capa MP360, el
   panel de filtros y la ficha de lote: un unico keyframe para las tres. */
@keyframes mp360-rise {
  from { opacity: 0; transform: translateY(var(--mo-shift)); }
  to   { opacity: 1; transform: none; }
}

/* Entrada de superficie completa -panel/tarjeta-: funde, sube y crece desde
   una escala minima. La comparten la ficha de lote y el panel de filtros. */
@keyframes mp360-card-in {
  from { opacity: 0; transform: translateY(var(--mo-shift)) scale(var(--mo-scale)); }
  to   { opacity: 1; transform: none; }
}

/* Entrada de hoja inferior: sube desde el borde, sin escala. La usa la ficha
   de lote en su modo movil. */
@keyframes mp360-sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360__ui {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   4 * Navegacion
   El navbar y el menu compacto son el port de Corevia:
   ver assets/css/corevia-navbar.css. Aca no se duplica ninguna de sus reglas.
   -------------------------------------------------------------------------- */

/* Unica excepcion: el shape del CTA principal. El design system no habilita
   pill para esta categoria, y `button_component` es la clase compartida entre
   el CTA de la card, el de la navbar y "Volver a lotes": corregir la fuente
   compartida es lo que mantiene una sola familia de forma. Solo cambia el
   radio; estructura, colores y motion de Corevia quedan intactos. */
.button_component { border-radius: var(--radius-primary-cta); }

/* --------------------------------------------------------------------------
   5 . Tooltip de lote (solo desktop)
   Ficha comercial: que lote es, si esta disponible y cual es su propuesta de
   compra. El fondo es el color del plan del lote, oscurecido lo minimo que
   necesita el texto blanco. Sin plan resuelto, superficie neutral oscura.
   -------------------------------------------------------------------------- */
.mp360-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  min-width: 196px;
  max-width: 300px;
  padding: var(--space-4);
  border-radius: var(--radius-tooltip);
  background: var(--mp360-tip-surface, var(--na-surface-dark-alpha));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--na-shadow-floating);
  color: var(--white);
  font-family: var(--font-sans);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp360-tip[hidden] { display: none; }

.mp360-tip.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.mp360-tip p {
  margin: 0;
  color: var(--white);
}

/* Identidad y estado son una sola relacion: se leen juntos, muy cerca. */
.mp360-tip__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.mp360-tip__id {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
}

/* Un lote reservado no tiene plan comercial, asi que su tooltip toma el color
   del estado: la misma autoridad que pinta el hotspot y la leyenda. */
.mp360-tip[data-status="reserved"] {
  background: var(--lot-status-reserved-surface, var(--na-surface-dark-alpha));
}

.mp360-tip[data-status="reserved"] .mp360-tip__status {
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
}

/* El estado se comunica por texto, no reemplazando el color del plan. */
.mp360-tip__status {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-badge);
  background: rgba(255, 255, 255, 0.18);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* La cuota es otro grupo de informacion: salto mayor, no un renglon mas.
   Se escribe con el tipo incluido para ganarle al reset de margenes de arriba. */
.mp360-tip p.mp360-tip__cuotas {
  margin-top: var(--space-4);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.mp360-tip__cuotas[hidden] { display: none; }

/* Sin hover fino no hay tooltip propio, en ningun caso. */
@media (hover: none), (pointer: coarse), (max-width: 1179px) {
  .mp360-tip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-tip { transition: none; }
}

/* --------------------------------------------------------------------------
   6 . Dock de vistas . centro inferior
   Navegacion dual: arriba dos areas de seleccion equivalentes -una por
   categoria, cada una con su cantidad de vistas-; abajo, la navegacion del
   recorrido con flechas y progreso segmentado. Se lee como un control de
   recorrido, no como pestanas sobre una barra.
   `--mp360-scenes-lift` lo levanta cuando el plano del tour ocupa el borde.
   -------------------------------------------------------------------------- */
.mp360-scenes {
  --mp360-scenes-lift: 0px;
  /* Borde izquierdo del espacio disponible. Vale 0 salvo que la ficha de lote
     ocupe la columna izquierda: ahi el dock se centra en lo que queda. */
  --mp360-scenes-guard: 0px;
  position: absolute;
  left: calc(var(--mp360-scenes-guard) + (100% - var(--mp360-scenes-guard)) / 2);
  bottom: calc(var(--space-6) + var(--mp360-scenes-lift) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: max-content;
  min-width: 280px;
  max-width: min(560px, calc(100vw - var(--space-8)));
  padding: var(--space-2);
  border-radius: var(--radius-container);
  background: var(--na-surface-dark-alpha);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--na-shadow-floating);
  font-family: var(--font-sans);
  transition: bottom var(--mo-base) var(--mo-move);
}

.mp360-scenes[hidden] { display: none; }

/* --- Nivel 1: areas de seleccion ----------------------------------------- */
/* Columnas iguales: las dos categorias pesan lo mismo. `auto-columns` deja
   que una tercera categoria del export entre sin tocar el CSS. */
.mp360-scenes__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

.mp360-scenes__tabs[hidden] { display: none; }

.mp360-scenes__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-compact);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.68);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move),
              color var(--mo-fast) var(--mo-move);
}

.mp360-scenes__group:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
}

.mp360-scenes__group:active { transform: scale(0.99); }

.mp360-scenes__group:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* La categoria activa se invierte: es la unica superficie clara del dock, asi
   que no hace falta acento de color para saber donde se esta. */
.mp360-scenes__group[aria-selected="true"] {
  background: var(--white);
  color: var(--na-ink);
}

.mp360-scenes__group-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mp360-scenes__group-meta {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* --- Nivel 2: navegacion del grupo activo -------------------------------- */
.mp360-scenes__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mp360-scenes__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move),
              color var(--mo-fast) var(--mo-move);
}

.mp360-scenes__arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.mp360-scenes__arrow:active { background: rgba(255, 255, 255, 0.2); transform: scale(0.94); }

.mp360-scenes__arrow:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.mp360-scenes__arrow .mp360-icon { width: 16px; height: 16px; }

.mp360-scenes__steps {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp360-scenes__steps li { display: flex; flex: 1; min-width: 0; }

/* Indicador de posicion, no control: se navega con las flechas y con las dos
   areas de categoria. El minimo de ancho existe para que la barra se lea como
   tramos y no como una linea partida. */
.mp360-scenes__step {
  display: block;
  flex: 1;
  height: 3px;
  min-width: 20px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-scenes__step[data-on="true"] { background: var(--na-orange); }

/* El cambio de panorama se acusa con un pulso corto sobre el progreso: aclara
   que cambio el contenido sin animar todo el dock. Reusa `mp360-rise`, la
   misma entrada corta que ya usan las demas superficies. */
.mp360-scenes__steps.is-entering { animation: mp360-rise var(--mo-base) var(--mo-in); }

@media (max-width: 1179px) {
  .mp360-scenes {
    bottom: calc(var(--space-4) + var(--mp360-scenes-lift) + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - var(--space-6));
  }
}

/* En el ancho mas chico se baja la densidad tipografica antes que el target:
   las dos areas siguen lado a lado y con el mismo alto. */
@media (max-width: 379px) {
  .mp360-scenes { min-width: 0; }
  .mp360-scenes__group { padding: var(--space-2); }
  .mp360-scenes__group-label { font-size: 12.5px; }
  .mp360-scenes__group-meta { font-size: 12px; }
  .mp360-scenes__step { min-width: 6px; }
}

/* En horizontal el alto es el recurso escaso: las areas pasan a una linea, con
   la cantidad de vistas al lado del nombre en vez de debajo. */
@media (max-height: 480px) and (orientation: landscape) {
  .mp360-scenes {
    bottom: calc(var(--space-2) + var(--mp360-scenes-lift) + env(safe-area-inset-bottom, 0px));
  }
  .mp360-scenes__group {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-scenes,
  .mp360-scenes__group,
  .mp360-scenes__arrow,
  .mp360-scenes__step { transition: none; }
  .mp360-scenes__steps.is-entering { animation: none; }
}

/* --------------------------------------------------------------------------
   6b . Aviso de las vistas a pie
   Nota contextual, no ventana: sin fondo de bloqueo, sin trampa de foco y sin
   `pointer-events` fuera de la card, para que el recorrido siga operable.
   -------------------------------------------------------------------------- */
.mp360-note {
  /* Esquina inferior izquierda. Arriba a la izquierda chocaba con el boton
     nativo "Volver al inicio" del export, que no se toca. `--mp360-note-lift`
     lo escribe `Note.place()` para subir por encima de la disponibilidad
     cuando comparten carril: la colision se resuelve por posicion, no por
     `z-index`. */
  --mp360-note-lift: 0px;
  position: absolute;
  bottom: calc(var(--space-6) + var(--mp360-note-lift) + env(safe-area-inset-bottom, 0px));
  left: calc(var(--space-6) + env(safe-area-inset-left, 0px));
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: min(320px, calc(100vw - var(--space-12)));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-alert);
  background: var(--na-surface-dark-alpha);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--na-shadow-floating);
  color: var(--white);
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--mo-exit) var(--mo-out),
              transform var(--mo-exit) var(--mo-out),
              bottom var(--mo-base) var(--mo-move);
}

.mp360-note[hidden] { display: none; }

/* Mientras no esta visible no puede recibir el puntero: con `opacity: 0` la
   tarjeta seguia interceptando el arrastre del recorrido detras de ella, y con
   el aviso suspendido -menu abierto- esa ventana dejo de ser un instante. */
.mp360-note:not(.is-visible) { pointer-events: none; }

.mp360-note.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--mo-base) var(--mo-in), transform var(--mo-base) var(--mo-in);
}

/* --- Variante de estado --------------------------------------------------
   Misma pieza, otra tarea: responde a un lote reservado y a un fallo de datos.
   Se ancla donde apareceria la card, que es adonde va la vista despues de
   tocar un lote, y nunca convive con ella. */
.mp360-note--status {
  top: calc(96px + env(safe-area-inset-top, 0px));
  /* `bottom` viene de `.mp360-note`, que ancla abajo a la izquierda. Con las
     dos orillas fijadas la tarjeta dejaba de medir lo que mide su texto y se
     estiraba a lo alto del viewport -680px en 1280x800-, asi que el aviso se
     veia como una columna. Aca manda el borde superior. */
  bottom: auto;
  left: auto;
  right: calc(var(--space-6) + env(safe-area-inset-right, 0px));
  z-index: 44;
  max-width: min(320px, calc(100vw - var(--space-12)));
  /* Pertenece al sistema de disponibilidad: misma superficie clara que la
     ficha y la leyenda, no la superficie oscura del aviso del recorrido. */
  border-radius: var(--radius-alert);
  background: var(--na-paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--na-shadow-paper);
  color: var(--na-ink);
}

.mp360-note--status .mp360-note__title { color: var(--na-ink); }
.mp360-note--status .mp360-note__text { color: var(--na-ink-soft); }
.mp360-note__close::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.mp360-note--status .mp360-note__close { color: var(--na-ink-soft); }
.mp360-note--status .mp360-note__close:hover { background: var(--na-paper-hover); color: var(--na-ink); }
.mp360-note--status .mp360-note__close:focus-visible { outline-color: var(--na-ink); }

.mp360-note--status .mp360-note__action {
  border-color: var(--na-line-strong);
  border-radius: var(--radius-button);
  color: var(--na-action);
}

.mp360-note--status .mp360-note__action:hover { background: var(--na-paper-hover); }
.mp360-note--status .mp360-note__action:focus-visible { outline-color: var(--na-ink); }

/* El estado no depende del color: la palabra siempre esta escrita. */
.mp360-note--status[data-state="reserved"] {
  border-left: 3px solid var(--lot-status-reserved, var(--neutral-500));
}

.mp360-note--status[data-state="error"] {
  border-left: 3px solid var(--danger-500);
}

.mp360-note__action {
  align-self: flex-start;
  min-height: 44px;
  margin-top: var(--space-1);
  padding: 0 var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-note__action[hidden] { display: none; }
.mp360-note__action:hover { background: rgba(255, 255, 255, 0.1); }

.mp360-note__action:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.mp360-note__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mp360-note__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.mp360-note__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--neutral-300);
}

/* El chip visible mide 28 para que el aviso siga siendo compacto, pero el area
   sensible llega a 44 por un pseudo-elemento centrado: cumple el minimo tactil
   sin agrandar la superficie ni desplazar el texto. */
/* La cruz vive en la esquina superior derecha del aviso, a la altura del
   titulo: es el lugar convencional y el unico que no compite con la lectura.

   Lo que se ve mide 28 y lo que se toca mide 44. Con el boton de 44 el icono
   se centraba dentro de esa caja y terminaba a media altura de una tarjeta de
   62: la caja estaba en la esquina, el icono no. El area tactil la agranda el
   pseudoelemento -8px por lado-, asi el objetivo sigue completo sin arrastrar
   al icono al centro. */
.mp360-note__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: none;
  width: 28px;
  height: 28px;
  /* `auto` a la izquierda la ancla al borde derecho: si no, la cruz sigue al
     final del texto y en una tarjeta ancha queda flotando en el medio. */
  margin: -4px -10px 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon-button);
  background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move), color var(--mo-fast) var(--mo-move);
}

.mp360-note__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.mp360-note__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.mp360-note__close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* En pantallas chicas el aviso se abre a los gutters, sin invadir el centro
   del panorama. Sigue anclado abajo a la izquierda. */
@media (max-width: 767px) {
  .mp360-note {
    bottom: calc(var(--space-4) + var(--mp360-note-lift) + env(safe-area-inset-bottom, 0px));
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    max-width: none;
  }
  /* La variante de estado se ancla arriba: hereda el `bottom` de la regla de
     arriba y, con las dos orillas fijas, se estiraba a lo alto de la pantalla
     -343x555 en un telefono de 667-. */
  .mp360-note--status { max-width: none; bottom: auto; }
}

/* En apaisado el aviso vuelve a ser una tarjeta de esquina. De ancho completo
   -como en vertical- cruzaria el selector y el plano, y elevarlo por encima de
   los dos no entra en 360px de alto: acotarlo lo deja convivir en el hueco
   libre de la izquierda sin tapar nada ni desaparecer. */
@media (max-height: 480px) and (orientation: landscape) {
  .mp360-note {
    right: auto;
    max-width: 170px;
    padding: var(--space-2) var(--space-3);
  }

  /* La variante de estado no es esa tarjeta de esquina: vive arriba a la
     derecha. Con `right: auto` heredado quedaba angosta -170px-, se estiraba a
     298 de alto, se salia de la pantalla y cruzaba la leyenda. */
  .mp360-note--status {
    left: auto;
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    max-width: min(320px, calc(100vw - var(--space-12)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-note,
  .mp360-note__close { transition: none; }
}

/* --------------------------------------------------------------------------
   7 · Curved Wipe Transition · Osmo Supply
   CSS del recurso, sin reinterpretar. Lo unico agregado es el encuadre del
   logo, porque el asset aprobado de Nuevo Alisos es una imagen y no un SVG.
   -------------------------------------------------------------------------- */
.transition {
  z-index: 100;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}

.transition__panel {
  color: var(--na-transition-surface);
  background-color: currentColor;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
}

.transition__panel-top {
  transform-origin: bottom;
  flex-flow: column;
  align-items: center;
  width: 100%;
  height: 0%;
  display: flex;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  overflow: hidden;
}

.transition__panel-bottom {
  transform-origin: top;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 0%;
  display: flex;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  overflow: hidden;
}

.transition__panel-circle {
  aspect-ratio: auto;
  background-color: currentColor;
  border-radius: 50%;
  width: 125%;
  height: 500%;
  position: absolute;
}

.transition__logo {
  color: #f4f4f4;
  opacity: 0;
  /* El recurso usaba 11em. El logo de Nuevo Alisos es el protagonista del
     wipe: escala con el viewport y sigue siendo prominente en movil sin
     invadir el panel. */
  width: clamp(200px, 26vw, 440px);
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .transition__logo { width: min(62vw, 320px); }
}

/* Encuadre del logo raster: sin fondo, sin deformacion y sin recorte. */
.transition__logo img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

/* --------------------------------------------------------------------------
   8 . Volver a Etapa 3
   Instancia del `button_component` de Corevia: la estructura, las dos capas de
   texto y su motion vienen de `corevia-navbar.css`. Aca solo se posiciona.
   -------------------------------------------------------------------------- */
/* Volver es una accion secundaria de navegacion, no la accion comercial de la
   pantalla. Dejo de heredar el `button_component` naranja: con el mismo peso
   que "Contactar un asesor" competia con el CTA y con la seleccion de lote.
   Toma la superficie oscura translucida del dock del selector, que es el
   lenguaje de los controles de recorrido, y conserva los 44px de target. */
.mp360-back {
  position: absolute;
  top: calc(96px + env(safe-area-inset-top, 0px));
  left: calc(var(--space-6) + env(safe-area-inset-left, 0px));
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  /* Mismo color, forma y peso que la accion principal del proyecto: volver a
     los lotes es la salida del recorrido de una vista, no un control de
     apoyo. El motion -el rodado de la etiqueta- lo aporta `.mp360-cta`. */
  border-radius: var(--radius-compact);
  background: var(--na-orange);
  color: var(--na-paper);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mp360-back__label { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .mp360-back:hover { background: var(--na-orange-hover); }
}

.mp360-back:active { transform: scale(0.98); }
.mp360-back:focus-visible { outline: 2px solid var(--na-ink); outline-offset: 3px; }

.mp360-back[hidden] { display: none; }

/* Con el aviso de vistas a pie abierto, el boton baja para no pisarlo. */
.mp360-back.is-below-note { top: calc(184px + env(safe-area-inset-top, 0px)); }

@media (max-width: 767px) {
  .mp360-back {
    top: calc(88px + env(safe-area-inset-top, 0px));
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
  }
  .mp360-back.is-below-note { top: calc(180px + env(safe-area-inset-top, 0px)); }
}

@media (max-height: 480px) and (orientation: landscape) {
  .mp360-back { top: calc(92px + env(safe-area-inset-top, 0px)); }
  .mp360-back.is-below-note { top: calc(174px + env(safe-area-inset-top, 0px)); }
}

/* --------------------------------------------------------------------------
   9 . Disponibilidad y filtros . inferior izquierda

   Tres niveles, no tres superficies:

     resumen                siempre visible, compacto
     "Ver planes y valores" divulgacion informativa dentro de la misma tarjeta
     "Filtrar"              accion, que abre su propio panel

   Consultar y filtrar dejan de estar mezclados. La tarjeta y el panel comparten
   el mismo carril y nunca se ven a la vez: el panel reemplaza al resumen.

   Shape: las dos son superficies flotantes -`card`-; sus acciones son
   `button`, y las filas de plan no llevan radio propio -`data-row`- porque no
   son cajas: son filas dentro de la misma superficie.
   -------------------------------------------------------------------------- */
.mp360-legend,
.mp360-lotfilter {
  --mp360-legend-lift: 0px;
  position: absolute;
  left: calc(var(--space-6) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--space-6) + var(--mp360-legend-lift) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: min(304px, calc(100vw - 2 * var(--space-6)));
  max-height: calc(100vh - 148px);
  border-radius: var(--radius-card);
  background: var(--na-paper);
  box-shadow: var(--na-shadow-paper);
  color: var(--na-ink);
  font-family: var(--font-sans);
  transition: bottom var(--mo-base) var(--mo-move);
}

.mp360-legend {
  display: flex;
  flex-direction: column;
  /* El scroll vive en la tarjeta y no en el bloque desplegable: si el recorte
     del disclosure tambien scrolleara, su fila `1fr` no tendria alto que
     repartir y la apertura quedaria en cero. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}

.mp360-legend[hidden],
.mp360-lotfilter[hidden] { display: none; }
.mp360-legend p { margin: 0; }

/* --- Resumen ------------------------------------------------------------- */
.mp360-legend__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp360-legend__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--na-ink-soft);
}

.mp360-legend__count {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* El aro no es decorativo: sin el, los planes claros desaparecen contra el
   papel y el azul contra cualquier fondo. */
.mp360-legend__swatch {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: var(--radius-circle);
  background: var(--swatch, var(--neutral-500));
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.32);
}

/* Los estados no disponibles cierran la tarjeta, detras de una hairline: son
   estados del lote, no alternativas de financiacion mas. Cada uno va con su
   palabra, nunca solo con el color.

   Envuelve porque son uno o dos segun el inventario del dia: con «Reservado» y
   «Vendido» juntos, en la tarjeta angosta de apaisado el segundo baja de linea
   en vez de recortarse. */
.mp360-legend__reserved {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3) !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--na-line);
  font-size: 13px;
  line-height: 1.25;
  color: var(--na-ink-soft);
}

.mp360-legend__reserved[hidden] { display: none; }

/* El color de cada estado lo escribe el JS desde `MP360LotTheme.statuses`, que
   es la misma fuente con la que se pintan los hotspots del plano: asi la
   referencia y el lote no pueden decir cosas distintas. Antes el rojo de
   reservado estaba escrito aca y solo servia para ese unico estado. */
.mp360-legend__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mp360-legend__active {
  margin-top: var(--space-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--na-action);
}

.mp360-legend__active[hidden] { display: none; }

/* --- Acciones ------------------------------------------------------------ */
.mp360-legend__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.mp360-legend__filter:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: 2px;
}

.mp360-legend__filter {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--na-line-strong);
  border-radius: var(--radius-button);
  background: none;
  color: var(--na-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move),
              border-color var(--mo-fast) var(--mo-move);
}

.mp360-legend__filter:hover { background: var(--na-paper-hover); }
.mp360-legend__filter:active { background: var(--na-paper-active); }

/* Con un filtro puesto el boton deja de ser una accion disponible y pasa a ser
   un estado: es lo unico que avisa que no se estan viendo todos los lotes. */
.mp360-legend__filter[data-active="true"] {
  border-color: var(--na-action);
  color: var(--na-action);
}

.mp360-legend__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-badge);
  background: var(--na-action);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp360-legend__filter-badge[hidden] { display: none; }

/* --- Planes y valores: siempre a la vista -------------------------------- */
.mp360-legend__bands {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* Una fila por plan: color, cuotas y cuota inicial. Nada mas. */
.mp360-legend__band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 0;
  border-radius: var(--radius-data-row);
  font-size: 13px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.mp360-legend__band + .mp360-legend__band { border-top: 1px solid var(--na-line); }

.mp360-legend.is-entering .mp360-legend__band {
  animation: mp360-rise var(--mo-base) var(--mo-in) both;
  animation-delay: calc(var(--row, 0) * var(--mo-stagger));
}

/* --- Panel de filtros ---------------------------------------------------- */
.mp360-lotfilter {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mp360-lotfilter__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--na-line);
  border-radius: var(--radius-divider);
}

/* Tipografia a la escala del sistema. Estaba en 15 / 13.5 / 12.5 / 13, que no
   son valores de la escala, y dejaba la etiqueta de cada cuota -el dato que la
   persona compara- por debajo del tamano de un texto secundario. */
.mp360-lotfilter__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mp360-lotfilter__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon-button);
  background: none;
  color: var(--na-ink);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-lotfilter__close:hover { background: var(--na-paper-hover); }

.mp360-lotfilter__close:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: -2px;
}

.mp360-lotfilter__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.mp360-lotfilter__plans {
  display: flex;
  flex-direction: column;
}

/* Fila de seleccion: la etiqueta entera es el objetivo, con la casilla nativa
   adentro. No es un chip ni una caja: es una fila de una lista.

   Una sola reticula para todas las filas, incluida "Todas las cuotas":
   cuatro columnas fijas -casilla, punto, etiqueta flexible, conteo- centradas
   sobre el mismo eje. La fila del estado base reserva la columna del punto
   aunque no lo pinte; asi las cuatro columnas arrancan en el mismo x en todas
   las filas y ninguna necesita una correccion propia. */
.mp360-lotfilter__plan {
  display: grid;
  grid-template-columns: 18px 12px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-data-row);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-lotfilter__plan:hover { background: var(--na-paper-hover); }
.mp360-lotfilter__plan + .mp360-lotfilter__plan { border-top: 1px solid var(--na-line); }

/* El estado base no es un plan. Se separa del grupo con un margen en la propia
   fila -no con padding de la fila siguiente, que descentraba su contenido- y
   deja su columna de color vacia. */
.mp360-lotfilter__plan--all .mp360-lotfilter__plan-label { font-weight: 600; }
.mp360-lotfilter__plan--all { margin-bottom: var(--space-2); }
.mp360-lotfilter__plan--all + .mp360-lotfilter__plan { border-top: 0; }

/* La opcion elegida no se distingue solo por la casilla. */
.mp360-lotfilter__plan[data-on="true"] { background: var(--na-paper-hover); }
.mp360-lotfilter__plan[data-on="true"] .mp360-lotfilter__plan-label { font-weight: 600; }

.mp360-lotfilter__plan input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--na-action);
  cursor: pointer;
}

.mp360-lotfilter__plan:focus-within {
  outline: 2px solid var(--na-ink);
  outline-offset: -2px;
}

/* `line-height` explicito: sin el, cada fila hereda un alto de linea distinto
   segun su contenido y el texto deja de compartir eje con la casilla. */
.mp360-lotfilter__plan-label {
  min-width: 0;
  font-size: 16px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.mp360-lotfilter__plan-count {
  justify-self: end;
  font-size: 14px;
  line-height: 20px;
  color: var(--na-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Cada pieza tiene su columna declarada: asi el eje de las etiquetas y el de
   los conteos es el mismo en todas las filas sin depender de que exista un
   elemento en el medio. */
.mp360-lotfilter__plan .mp360-legend__swatch { grid-column: 2; justify-self: center; }
.mp360-lotfilter__plan-label { grid-column: 3; }
.mp360-lotfilter__plan-count { grid-column: 4; }

/* El estado base no es un plan: no tiene punto y su etiqueta ocupa tambien esa
   columna en vez de dejar un hueco de 20px que se leia como una pieza que
   falta. Y no viste el fondo de "elegido": estar sin filtrar no puede tener la
   misma senal visual que tener un filtro puesto. */
.mp360-lotfilter__plan--all .mp360-lotfilter__plan-label { grid-column: 2 / 4; }
.mp360-lotfilter__plan--all[data-on="true"] { background: none; }

.mp360-lotfilter__empty {
  margin: var(--space-2) var(--space-2) 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--na-ink-soft);
}

.mp360-lotfilter__empty[hidden] { display: none; }

/* Solo aparece cuando hay una seleccion que restablecer. */
.mp360-lotfilter__foot[hidden] { display: none; }

.mp360-lotfilter__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--na-line);
  border-radius: var(--radius-divider);
}

.mp360-lotfilter__clear {
  flex: none;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background: none;
  color: var(--na-action);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mp360-lotfilter__clear:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: 2px;
}

/* Entrada de las dos superficies: fade con desplazamiento minimo y cascada
   breve en las filas. */
.mp360-lotfilter.is-entering { animation: mp360-rise var(--mo-surface) var(--mo-in) both; }

.mp360-lotfilter.is-entering .mp360-lotfilter__plan {
  animation: mp360-rise var(--mo-base) var(--mo-in) both;
  animation-delay: calc(var(--row, 0) * var(--mo-stagger));
}

@media (max-width: 1179px) {
  .mp360-legend,
  .mp360-lotfilter {
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    bottom: calc(var(--space-4) + var(--mp360-legend-lift) + env(safe-area-inset-bottom, 0px));
    width: min(288px, calc(100vw - 2 * var(--space-4)));
  }
}

/* En telefono la tarjeta conserva un ancho acotado: el carril inferior lo
   comparte con el selector y el plano, y una tarjeta a todo lo ancho obligaba
   a apilar las tres superficies hasta salirse del viewport. */
@media (max-width: 767px) {
  .mp360-legend,
  .mp360-lotfilter {
    width: min(288px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 132px);
  }
  .mp360-legend__count { font-size: 17px; }
}

/* Viewport corto en vertical -320x568 y similares-. Con la disponibilidad
   elevada por encima del selector, el alto util cae por debajo de lo que pide
   la tarjeta completa. Se acorta el ritmo, que es densidad, en vez de abrir
   scroll o esconder planes, que serian perdida de informacion. */
@media (max-height: 640px) and (orientation: portrait) {
  .mp360-legend__band { padding: 4px 0; }
  .mp360-legend__bands { margin-top: 4px; }
  .mp360-legend__count { font-size: 17px; }
  .mp360-legend__reserved {
    margin-top: var(--space-2) !important;
    padding-top: var(--space-2);
  }
  .mp360-legend__actions { margin-top: var(--space-3); }
}

@media (max-height: 480px) and (orientation: landscape) {
  /* En apaisado el alto util del carril izquierdo es de unos 200px y el
     selector ocupa el centro. La tarjeta completa -cabecera, cinco planes,
     reservado y accion- pide 206 y ademas se cruza con el selector, asi que
     tendria que elevarse hasta meterse debajo del navbar.

     Se cambia la composicion, no la densidad: la disponibilidad queda como
     resumen comercial angosto -cuantos lotes hay, que significa el rojo y como
     filtrar- y el detalle por cuota se lee en el panel de filtros, que ya
     lista cada plan con su color y su conteo. Al ser mas angosta que el borde
     izquierdo del selector, no necesita elevarse y no le tapa nada. */
  .mp360-legend {
    right: auto;
    bottom: calc(var(--space-2) + var(--mp360-legend-lift) + env(safe-area-inset-bottom, 0px));
    /* Termina antes del borde izquierdo del selector centrado, con aire real
       entre las dos: asi no necesita elevarse y ninguna tapa a la otra. */
    width: 152px;
    max-height: calc(100dvh - 112px);
    padding: var(--space-3);
  }

  .mp360-legend__bands { display: none; }
  .mp360-legend__eyebrow { font-size: 12px; }
  .mp360-legend__count { font-size: 16px; }
  .mp360-legend__reserved {
    margin-top: var(--space-2) !important;
    padding-top: var(--space-2);
    gap: var(--space-2);
    font-size: 12px;
  }
  .mp360-legend__actions { margin-top: var(--space-2); }

  /* El filtro es la superficie que trae el detalle: en apaisado toma el carril
     entero y reparte las cuotas en dos columnas, porque seis filas de 44 no
     entran en 360px de alto. */
  .mp360-lotfilter {
    right: auto;
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    width: min(680px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 104px);
  }

  .mp360-lotfilter:not([hidden]) ~ .mp360-scenes,
  .mp360-lotfilter:not([hidden]) ~ .mp360-plano { display: none; }

  /* Tres columnas: seis filas de 44px no entran en 360px de alto, y con dos
     columnas tampoco. El ancho sobra en apaisado, asi que el detalle se
     reparte a lo ancho en vez de recortarse o scrollear. */
  .mp360-lotfilter__plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-3);
  }

  .mp360-lotfilter__plan--all { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10 . Ficha del lote

   Conserva la logica visual del panel de Atniily -superficie clara flotante,
   bloques separados por hairlines, datos tecnicos compactos, densidad
   editorial- pero se organiza por la decision real: como pagar.

   Jerarquia en tres niveles perceptibles, no en una escala plana:

     1 . `Lote 13`            26px / 650   identidad de la unidad
     2 . el importe           34px / 650   el dato comercial que manda
     3 . todo lo demas        16 / 14 / 12 titulos, valores, labels, auxiliar

   Los labels no van en mayusculas ni con tracking: se distinguen por tamaño
   y contraste, no por deformacion. El unico color de enfasis es el CTA.
   -------------------------------------------------------------------------- */
.mp360-lot {
  /* Dos tiempos propios para el cambio de estado interno. La escala global
     arranca en 180ms, pensada para hover y chips; un intercambio en dos
     fases con ese piso se siente lento. Se apagan con el resto del motion. */

  position: absolute;
  /* Anclada arriba, no centrada: la columna izquierda la comparte con la
     disponibilidad, y centrarla hacia depender la separacion entre las dos del
     alto del contenido. Apiladas desde el techo, el aire es el mismo siempre. */
  top: calc(84px + var(--space-4) + env(safe-area-inset-top, 0px));
  left: calc(var(--space-6) + env(safe-area-inset-left, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: 356px;
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-5, 20px);
  overflow: clip;
  border-radius: var(--radius-card);
  background: var(--na-paper);
  box-shadow: var(--na-shadow-paper);
  color: var(--na-ink);
  font-family: var(--font-sans);

  opacity: 1;
  transition: opacity var(--mo-exit) var(--mo-out), transform var(--mo-exit) var(--mo-out);
}

.mp360-lot[hidden] { display: none; }

/* El dialogo recibe el foco al abrir para que la lectura empiece adentro, pero
   no es un control: el indicador visible pertenece a los botones y campos que
   tiene dentro. Nadie llega aca con el teclado -`tabindex="-1"`-, asi que no
   se pierde ninguna señal. */
.mp360-lot:focus { outline: none; }
/* Reset de margenes del navegador dentro de la ficha. Va con `:where()` a
   proposito: sin el, `.mp360-lot p` (0,1,1) le gana a cualquier clase de
   componente (0,1,0) y anula TODO el ritmo vertical de la ficha, sin avisar.
   Con `:where()` la regla pesa (0,1,0) y cada bloque puede fijar su aire. */
.mp360-lot :where(p, h2, dl, dd, dt) { margin: 0; }

/* Salida proporcional a la entrada: se retira hacia su ancla, sin rebote. */
.mp360-lot.is-leaving {
  opacity: 0;
  transform: translateX(calc(var(--mo-shift) * -2));
  pointer-events: none;
}

/* --- 1 . Cabecera: identidad, estado y salida ----------------------------- */
.mp360-lot__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Reserva explicita del area tocable del cierre, en los dos ejes: sin el
     `min-height` la caja de 44px del boton sangraba sobre la primera fila de
     datos en los anchos donde el titulo baja de tamaño. */
  min-height: 44px;
  padding-right: 44px;
}

.mp360-lot__title {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--na-ink);
}

/* El estado se lee por la palabra y por su tinte, y no compite ni con el
   lote ni con el importe: es el elemento mas chico de la ficha. */
.mp360-lot__chip {
  flex: none;
  align-self: center;
  padding: 3px 8px;
  border: 1px solid var(--na-line);
  border-radius: 7px;
  background: var(--na-paper);
  color: var(--na-ink-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mp360-lot__chip[data-state="available"] { border-color: var(--success-200); background: var(--background-success-subtle); color: var(--success-700); }
.mp360-lot__chip:not([data-state="available"]) { border-color: var(--danger-200); background: var(--danger-50); color: var(--danger-700); }

/* Compacto a la vista, 44x44 tocable: sobresale con margenes negativos para
   no abrir un hueco en la cabecera ni invadir el titulo. */
.mp360-lot__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-compact);
  background: none;
  color: var(--na-ink-soft);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move), color var(--mo-fast) var(--mo-move);
}

.mp360-lot__close:hover { background: var(--na-paper-hover); color: var(--na-ink); }
.mp360-lot__close:focus-visible { outline: 2px solid var(--na-ink); outline-offset: -2px; }

/* --- Los tres datos de la unidad ------------------------------------------
   Densidad de tabla tecnica sin ser una tabla: tres columnas separadas por
   hairlines dentro de una sola superficie. */
.mp360-lot__facts {
  display: grid;
  /* Proporciones con piso: la franja usa el ancho util completo de la ficha y
     ninguna columna puede caer por debajo de lo que necesita su dato. Ubicacion
     se lleva la parte mayor porque es el valor mas largo, y Etapa la menor
     porque siempre es un digito. Sin `gap`: el aire lo da el padding de cada
     celda, que es lo que deja los separadores sobre el limite de columna con
     el mismo espacio a los dos lados. */
  grid-template-columns: minmax(82px, 0.9fr) minmax(124px, 1.4fr) minmax(58px, 0.7fr);
  margin-top: var(--space-4);
  padding: 6px 0;
  border-top: 1px solid var(--na-line);
  border-bottom: 1px solid var(--na-line);
}

/* Cada celda ocupa su columna entera: por eso el separador puede ser su borde
   izquierdo y cae sobre el limite, con el mismo padding a los dos lados.

   Dentro de la celda, label y valor son una unidad: comparten una sola regla
   de alineacion y no se reparten hacia bordes opuestos. Superficie abre la
   franja alineada a la izquierda; Ubicacion y Etapa se centran en su columna.
   Alinear el valor de Etapa a la derecha lo separaba visualmente de su
   etiqueta, que es justo lo que un bloque de metadata no puede hacer. */
.mp360-lot__fact {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  padding: 0 var(--space-3);
}

.mp360-lot__fact + .mp360-lot__fact { border-left: 1px solid var(--na-line); }

/* Las tres se centran en su columna. Superficie estaba a la izquierda y, como
   su etiqueta es mas ancha que su valor, el numero parecia corrido: compartian
   borde izquierdo pero no eje visual. Centradas, cada dato se lee como un
   bloque y la franja queda pareja. */
.mp360-lot__fact--superficie,
.mp360-lot__fact--ubicacion,
.mp360-lot__fact--etapa {
  justify-items: center;
  text-align: center;
}

.mp360-lot__fact--superficie { padding-left: 0; }
.mp360-lot__fact--etapa { padding-right: 0; }

.mp360-lot__fact dt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--na-ink-soft);
}

.mp360-lot__fact dt .mp360-icon { width: 14px; height: 14px; opacity: 0.85; }

.mp360-lot__fact dd {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--na-ink);
  overflow-wrap: anywhere;
}

/* --- 2 . La decision de pago ----------------------------------------------- */
.mp360-lot__pay { margin-top: var(--space-6); }
.mp360-lot__pay[hidden] { display: none; }

/* Titulo de seccion: segundo nivel, sin mayusculas ni tracking. */
.mp360-lot__section {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--na-ink);
}

/* Dentro del grupo "Formas de pago": el titulo y su control van juntos. */
.mp360-lot__seg {
  display: grid;
  margin-top: var(--space-3);
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--na-line);
  border-radius: var(--radius-control);
  background: var(--na-paper-hover);
}

.mp360-lot__segbtn {
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--na-ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move),
              color var(--mo-fast) var(--mo-move),
              box-shadow var(--mo-fast) var(--mo-move);
}

/* La opcion elegida no se distingue solo por color: cambia superficie, peso
   y contorno, y ademas lo dice `aria-checked`. */
.mp360-lot__segbtn[aria-checked="true"] {
  background: var(--na-paper);
  color: var(--na-ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--na-line-strong);
}

.mp360-lot__segbtn:focus-visible { outline: 2px solid var(--na-ink); outline-offset: 1px; }

/* --- 3 . El bloque que cambia de estado ------------------------------------
   `min-height` sostiene el alto de los dos estados que se alternan mas
   seguido -contado y financiacion- para que el segmentado no haga saltar la
   ficha. Los dos pasos de la proyeccion pueden crecer por encima. */
.mp360-lot__step {
  margin-top: var(--space-4);
  /* El alto lo escribe el JS con la medida real de cada estado: reservar el
     del mas alto dejaba aire muerto en los demas, y no reservarlo hacia
     saltar la ficha al cambiar de forma de pago. */
  overflow: hidden;
  /* Mismo token que usa el sistema para el alto de un reemplazo: si el gesto
     cambia, cambia en un solo lugar. */
  transition: height var(--mo-base) var(--mo-in);
}

.mp360-lot__pane { display: flex; flex-direction: column; }
.mp360-lot__pane[hidden] { display: none; }

/* Fallback por alto real, nunca por breakpoint: `Card.medirScroll()` pone el
   atributo solo cuando el contenido no entra -320x568, apaisado corto o
   teclado abierto-. En un telefono alto el atributo no aparece y la ficha
   conserva exactamente la composicion aprobada, sin barra a la vista.
   Cabecera, datos y segmentado quedan fuera de la region que scrollea. */
.mp360-lot[data-scroll="true"] .mp360-lot__step {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Sin `min-height: 0` un item flex no baja de su alto de contenido y la
     region nunca llegaria a scrollear. */
  min-height: 0;
  flex: 1 1 auto;
}


/* Label de tercer nivel: tamaño y contraste, sin mayusculas. */
.mp360-lot__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--na-ink-soft);
}

/* El dato comercial dominante. Se lee antes que cualquier label, y el aire
   que lo rodea es lo que lo separa del resto del resumen. */
.mp360-lot__amount {
  margin-top: var(--space-3);
  font-size: 34px;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--na-ink);
}

/* --- Contado: descuento y ahorro ------------------------------------------
   Tres bloques con aire entre si, no una pila apretada:

     [ Pago al contado ................ 20% de descuento ]   <- contexto
     $19.520.000                                             <- el dato
     Ahorras $4.880.000                                      <- el beneficio

   La fila superior reune el que y el cuanto conviene en una sola linea. El
   importe queda solo, que es lo que lo vuelve el ancla. El ahorro cierra con
   mas aire todavia: apoya la decision, no compite con el precio. */
.mp360-lot__valor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 24px;
}

.mp360-lot__badge {
  flex: none;
  margin-top: 0;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--na-orange);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.mp360-lot__badge[hidden] { display: none; }

/* El ahorro es el segundo beneficio, no una nota al pie: va en su propia
   superficie, con el verde suave del proyecto. Sigue por debajo del precio en
   tamano y peso, asi que no le disputa el protagonismo. */
.mp360-lot__aside {
  align-self: flex-start;
  /* Mas aire que el que separa el importe de su contexto: el ahorro es otro
     nivel de lectura, no una segunda linea del precio. */
  margin-top: var(--space-4);
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--background-success-subtle);
  color: var(--success-800);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.mp360-lot__aside[hidden] { display: none; }

/* --- Resultado de la proyeccion -------------------------------------------
   Una superficie de ancho completo: el porcentaje manda, la barra le da
   proporcion y la lectura en pesos la explica sin emitir ningun juicio. */
/* Una secuencia, no una pila de bloques sueltos: porcentaje, su unidad, la
   barra, la explicacion y el estado. Todo al mismo eje izquierdo y con un
   unico ritmo, que lo fija el `gap` del contenedor. */
.mp360-lot__result {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-compact);
  background: var(--na-paper-hover);
}

/* El porcentaje y su unidad son una sola lectura: van juntos, sin el salto
   del resto de la secuencia. */
.mp360-lot__result .mp360-lot__amount { margin-top: 0; }
.mp360-lot__result .mp360-lot__help { margin-top: calc(-1 * var(--space-3) + 2px); }

.mp360-lot__bar {
  position: relative;
  height: 8px;
  margin-top: 0;
  border-radius: var(--radius-full);
  background: var(--na-line-strong);
  overflow: hidden;
}

.mp360-lot__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--na-orange);
  transition: width var(--mo-base) var(--mo-in);
}



/* Titular del tramo de la proyeccion.

   Ocupa el lugar que tenia la explicacion por cada $10.000, retirada del
   producto. Su texto sale de `MP360Projection.impactState`, el mismo modulo
   que lee el proyector del menu, y es lo que comunica el significado a quien
   no distingue el color. */
.mp360-lot__state {
  margin-top: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--estado-ink, var(--na-ink));
  text-wrap: pretty;
}

.mp360-lot__state:empty { display: none; }

/* --------------------------------------------------------------------------
   Estados de la proyeccion

   Los tramos, sus umbrales y sus titulares viven en `mp360-projection.js`, el
   mismo modulo que consulta el proyector del menu. Aca estan solo los colores,
   y llevan a proposito los mismos nombres de token que usa
   `assets/components/cotiza.html`: el `id` del tramo es el contrato entre las
   dos superficies, asi que `data-estado="alta"` se ve igual en las dos.

   Antes esta ficha pintaba dos estados propios -favorable o neutro- decididos
   por una comparacion distinta de la del menu. Una proporcion del 36,6% salia
   exigente alla y como una tarjeta gris sin significado aca.

   Son tokens propios de la proyeccion: el verde de un tramo bajo no es el de
   «Disponible» -alli el verde dice que el lote esta libre, aca dice que
   proporcion ocupa la cuota- y el rojo no es el de «Reservado», que ya
   significa otra cosa en el plano.
   -------------------------------------------------------------------------- */
.mp360-lot__result {
  --proy-baja-surface: #E4F4EA;
  --proy-baja-accent:  #2F7D53;
  --proy-baja-ink:     #16482D;

  --proy-moderada-surface: #EAF1FB;
  --proy-moderada-accent:  #2166D3;
  --proy-moderada-ink:     #043784;

  --proy-alta-surface: #FFF2EC;
  --proy-alta-accent:  #D45E00;
  --proy-alta-ink:     #873900;

  --proy-muy-alta-surface: #FFF2F0;
  --proy-muy-alta-accent:  #CA212A;
  --proy-muy-alta-ink:     #A30017;
}

/* Un solo atributo enciende superficie, acento y tinta del tramo. */
.mp360-lot__result[data-estado="baja"] {
  --estado-surface: var(--proy-baja-surface);
  --estado-accent: var(--proy-baja-accent);
  --estado-ink: var(--proy-baja-ink);
}
.mp360-lot__result[data-estado="moderada"] {
  --estado-surface: var(--proy-moderada-surface);
  --estado-accent: var(--proy-moderada-accent);
  --estado-ink: var(--proy-moderada-ink);
}
.mp360-lot__result[data-estado="alta"] {
  --estado-surface: var(--proy-alta-surface);
  --estado-accent: var(--proy-alta-accent);
  --estado-ink: var(--proy-alta-ink);
}
.mp360-lot__result[data-estado="muy-alta"] {
  --estado-surface: var(--proy-muy-alta-surface);
  --estado-accent: var(--proy-muy-alta-accent);
  --estado-ink: var(--proy-muy-alta-ink);
}

.mp360-lot__result[data-estado] {
  background: var(--estado-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--estado-accent) 24%, transparent);
}

.mp360-lot__result[data-estado] .mp360-lot__amount,
.mp360-lot__result[data-estado] .mp360-lot__help,
.mp360-lot__result[data-estado] .mp360-lot__state { color: var(--estado-ink); }

.mp360-lot__result[data-estado] .mp360-lot__bar { background: color-mix(in srgb, var(--estado-accent) 18%, transparent); }
.mp360-lot__result[data-estado] .mp360-lot__bar-fill { background: var(--estado-accent); }


/* Fila de resumen financiero: etiqueta a la izquierda, importe a la derecha.
   Las dos filas usan el mismo patron; lo unico que cambia es el peso del
   importe. `min-width: 0` en la etiqueta permite que baje de linea en anchos
   chicos sin empujar al valor fuera de la card: no hace falta `nowrap`. */
.mp360-lot__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--na-line);
}

.mp360-lot__row .mp360-lot__label { min-width: 0; }
.mp360-lot__row .mp360-lot__value { flex: none; }

/* La fila de la cuota cierra el resumen: sin hairline debajo y con el importe
   en el peso dominante, pero todavia en su fila y junto a su etiqueta. */
.mp360-lot__row--principal {
  align-items: center;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Calificado con la fila: `.mp360-lot__value` se declara mas abajo y, con la
   misma especificidad, le ganaba por orden de aparicion. */
.mp360-lot__row .mp360-lot__value--fuerte {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mp360-lot__value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--na-ink);
}

.mp360-lot__help {
  margin-top: var(--space-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--na-ink-soft);
}

/* --- Campo de ingreso ------------------------------------------------------ */
.mp360-lot__field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--na-line-strong);
  border-radius: var(--radius-input);
  background: var(--na-paper);
  transition: border-color var(--mo-fast) var(--mo-move), box-shadow var(--mo-fast) var(--mo-move);
}

.mp360-lot__field:focus-within { border-color: var(--na-ink); box-shadow: inset 0 0 0 1px var(--na-ink); }
.mp360-lot__field.is-error { border-color: var(--danger-600); }

.mp360-lot__prefix { flex: none; font-size: 16px; font-weight: 500; color: var(--na-ink-soft); }

.mp360-lot__input {
  min-width: 0;
  flex: 1;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--na-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mp360-lot__input:focus { outline: none; }
.mp360-lot__input::placeholder { font-weight: 400; color: var(--neutral-400); }

.mp360-lot__error {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.35;
  color: var(--danger-700);
}

.mp360-lot__error[hidden] { display: none; }

/* --- Datos de apoyo del resultado ------------------------------------------ */
.mp360-lot__support {
  /* Dos columnas: los dos datos de apoyo entran lado a lado y el bloque ocupa
     la mitad de alto sin perder ninguna etiqueta. Cada par queda con su label
     arriba y su valor debajo, sobre el mismo eje. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--na-line);
}

.mp360-lot__support > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp360-lot__support dt { font-size: 13px; font-weight: 500; color: var(--na-ink-soft); }
.mp360-lot__support dd { font-size: 15px; font-weight: 600; color: var(--na-ink); }

/* --- Acciones --------------------------------------------------------------
   Una sola accion principal por estado. La secundaria es texto: no compite
   por superficie ni por color. */
/* El CTA de la ficha es la accion primaria del proyecto y usa el motion del
   `button_component` aprobado -el de "Contactar un asesor"-: dos capas de
   texto que ruedan dentro de un contenedor recortado, mismo easing y misma
   duracion, mas la escala del original. Solo cambian forma y color, que son
   los del sistema de la ficha; el gesto es el mismo componente. */
.mp360-lot__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  /* Salto de grupo: el CTA cierra la ficha y no pertenece al resumen que lo
     precede. */
  margin-top: var(--space-6);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-compact);
  background: var(--na-orange);
  color: var(--na-paper);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* El rodado de la etiqueta es el motion del boton principal del proyecto. Lo
   comparten la accion de la ficha y `Volver a lotes`: misma accion visual
   para el mismo peso jerarquico. La curva es la del `button_component`
   aprobado y no se toca. */
.mp360-lot__cta .button-content,
.mp360-back .button-content {
  display: block;
  position: relative;
  overflow: clip;
  line-height: 1.2;
}

.mp360-lot__cta .button-text,
.mp360-back .button-text {
  display: block;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* La capa de abajo espera fuera del recorte y ocupa el lugar de la de arriba
   cuando esta se va: por eso se superpone en vez de apilarse. */
.mp360-lot__cta .button-text.is-bottom,
.mp360-back .button-text.is-bottom {
  position: absolute;
  inset: 0;
  transform: translateY(120%);
}

.mp360-lot__cta:focus-visible { outline: 2px solid var(--na-ink); outline-offset: 3px; }

.mp360-lot__cta:hover,
.mp360-lot__cta:focus-visible { transform: scale(0.9); }

.mp360-lot__cta:hover .button-text:not(.is-bottom),
.mp360-lot__cta:focus-visible .button-text:not(.is-bottom),
.mp360-back:hover .button-text:not(.is-bottom),
.mp360-back:focus-visible .button-text:not(.is-bottom) { transform: translateY(-120%); }

.mp360-lot__cta:hover .button-text.is-bottom,
.mp360-lot__cta:focus-visible .button-text.is-bottom,
.mp360-back:hover .button-text.is-bottom,
.mp360-back:focus-visible .button-text.is-bottom { transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .mp360-lot__cta:hover { background: var(--na-orange-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-lot__cta,
  .mp360-lot__cta .button-text { transition: none; }
  .mp360-lot__cta:hover,
  .mp360-lot__cta:focus-visible { transform: none; }
}

.mp360-lot__back {
  align-self: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-compact);
  background: none;
  color: var(--na-ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--mo-fast) var(--mo-move);
}

.mp360-lot__back:hover { color: var(--na-ink); }
.mp360-lot__back:focus-visible { outline: 2px solid var(--na-ink); outline-offset: 2px; }

/* --- Motion ----------------------------------------------------------------
   Apertura: el panel entra y sus cuatro bloques lo siguen en cascada corta.
   Cambio de estado interno: el bloque sale hacia arriba y el siguiente entra
   desde abajo. El movimiento explica que cambio el contenido, no decora. */
.mp360-lot.is-entering { animation: mp360-card-in var(--mo-surface) var(--mo-in) both; }

.mp360-lot.is-entering > * {
  animation: mp360-rise var(--mo-surface) var(--mo-in) both;
  animation-delay: calc(var(--mo-stagger) + var(--row, 0) * var(--mo-stagger));
}

/* El cambio de paso lo anima el sistema -`.mo-replace.is-out/.is-in` sobre los
   paneles-. La ficha tenia ademas su propia salida sobre la caja: dos gestos
   superpuestos de 130 y 180ms sobre elementos anidados, con la caja terminando
   antes que su contenido. Ese 130 era el mismo numero del temporizador que ya
   se retiro del JS. Una sola declaracion, en un solo lugar. */

/* --- Tablet: el panel se acerca al borde ----------------------------------- */
@media (max-width: 991px) {
  .mp360-lot { left: calc(var(--space-4) + env(safe-area-inset-left, 0px)); }
}

/* --- Movil: hoja al pie, donde llega el pulgar -----------------------------
   El alto util se calcula con `dvh` y descontando safe areas: nunca contra
   `100vh` a ciegas. `max-height` es un techo, no un alto fijo. */
@media (max-width: 767px) {
  .mp360-lot {
    top: auto;
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    left: var(--space-3);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: var(--space-4);
    border-radius: var(--radius-container);
    transform: none;
  }

  .mp360-lot.is-entering { animation-name: mp360-sheet-in; animation-duration: var(--mo-sheet); }
  .mp360-lot.is-leaving { transform: translateY(12px); }

  .mp360-lot__title { font-size: 24px; }
  .mp360-lot__segbtn { min-height: 44px; }
  .mp360-lot__close { top: var(--space-2); right: var(--space-2); }
}

/* --- Muy angosto: el layout se transforma antes de achicar targets ---------
   Los tres datos pasan de tres columnas a filas etiqueta/valor: es la misma
   informacion sin comprimir la tipografia por debajo de lo legible. */
@media (max-width: 479px) {
  .mp360-lot__facts { grid-template-columns: 1fr; gap: 8px; padding: var(--space-3) 0; }
  /* Apilados dejan de ser columnas: vuelven a ser filas etiqueta/valor y
     recuperan una sola alineacion. Las de la version en tres columnas -centro
     y derecha- no valen aca y se anulan explicitamente. */
  .mp360-lot__fact,
  .mp360-lot__fact--superficie,
  .mp360-lot__fact--ubicacion,
  .mp360-lot__fact--etapa {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    align-items: baseline;
    text-align: left;
    gap: var(--space-2);
    padding: 0;
    border-left: 0;
  }
  .mp360-lot__fact dd { margin-top: 0; }
  .mp360-lot__step { min-height: 0; }
}

/* --- Altura corta -y teclado abierto en movil------------------------------
   Con poca altura util la ficha comprime su ritmo vertical y la cifra baja
   un escalon, antes que recortar contenido o abrir scroll. */
@media (max-height: 620px) {
  .mp360-lot { padding: var(--space-4); }
  .mp360-lot__title { font-size: 22px; }
  .mp360-lot__facts { margin-top: var(--space-3); padding: 8px 0; }
  .mp360-lot__pay { margin-top: var(--space-4); }
  .mp360-lot__step { min-height: 0; margin-top: var(--space-3); }
  .mp360-lot__amount { font-size: 30px; }
  .mp360-lot__cta { min-height: 44px; margin-top: var(--space-3); }
  .mp360-lot__help { font-size: 13px; }
}

/* --- Apaisado de telefono: dos columnas -----------------------------------
   Entre el navbar y el borde inferior quedan unos 264px y la ficha en una
   sola columna necesita 326: se cortaba contenido. En vez de comprimir
   tipografia o targets, el layout se transforma: identidad y datos a la
   izquierda, decision y contenido a la derecha, separados por una hairline.
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .mp360-lot {
    top: auto;
    right: auto;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    width: min(680px, calc(100vw - var(--space-6)));
    max-width: none;
    max-height: calc(100dvh - 96px);
    padding: var(--space-3);
    border-radius: var(--radius-container);
    transform: none;

    display: grid;
    /* La columna de contenido pesa mas: es la que tiene que resolver titulo,
       campo, error y acciones sin partir cada linea en dos. */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-3);
    align-items: start;
  }

  .mp360-lot.is-entering { animation-name: mp360-sheet-in; animation-duration: var(--mo-sheet); }
  .mp360-lot.is-leaving { transform: translateY(10px); }

  .mp360-lot__head { grid-column: 1; grid-row: 1; padding-right: 0; }

  /* En media columna los tres datos no entran lado a lado -"Manzana 188"
     partia en dos lineas-: pasan a filas etiqueta/valor, como en movil
     angosto. La columna izquierda sigue siendo la mas corta de las dos. */
  .mp360-lot__facts {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: var(--space-3);
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mp360-lot__fact,
  .mp360-lot__fact--superficie,
  .mp360-lot__fact--ubicacion,
  .mp360-lot__fact--etapa {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    align-items: baseline;
    text-align: left;
    gap: var(--space-2);
    padding: 0;
    border-left: 0;
  }

  .mp360-lot__fact dd { margin-top: 0; }

  /* La columna derecha reserva su propia gutter para el cierre. */
  .mp360-lot__pay {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding-left: var(--space-4);
    padding-right: 44px;
    border-left: 1px solid var(--na-line);
  }

  .mp360-lot__step {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--space-3);
    padding-left: var(--space-4);
    border-left: 1px solid var(--na-line);
  }

  /* Sin el segmentado, el contenido toma la columna entera. */
  .mp360-lot__pay[hidden] + .mp360-lot__step { grid-row: 1 / span 2; margin-top: 0; padding-right: 44px; }

  /* El titulo de la seccion sale de la vista pero no del arbol: sigue siendo
     el nombre accesible del grupo de opciones, que ya se leen solas. */
  .mp360-lot__pay .mp360-lot__section {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mp360-lot__seg { margin-top: 0; }
  .mp360-lot__amount { font-size: 28px; }
  .mp360-lot__title { font-size: 22px; }

  /* Los dos pasos de la proyeccion son los mas altos: aca la accion principal
     y la secundaria comparten renglon en vez de apilarse. Ninguna pierde su
     target de 44px y el paso entra entero sin recortar el mensaje de error. */
  /* `:not([hidden])` no es adorno: `display: grid` con la misma especificidad
     que `.mp360-lot__pane[hidden]` le ganaba por orden y dejaba dos pasos
     visibles a la vez. */
  .mp360-lot__pane[data-step="ingreso"]:not([hidden]),
  .mp360-lot__pane[data-step="resultado"]:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .mp360-lot__pane[data-step="ingreso"] > *,
  .mp360-lot__pane[data-step="resultado"] > * { grid-column: 1 / -1; }

  .mp360-lot__pane[data-step="ingreso"] > .mp360-lot__cta,
  .mp360-lot__pane[data-step="resultado"] > .mp360-lot__cta { grid-column: 1; }

  .mp360-lot__pane[data-step="ingreso"] > .mp360-lot__back,
  .mp360-lot__pane[data-step="resultado"] > .mp360-lot__back {
    grid-column: 2;
    align-self: center;
    margin-top: var(--space-4);
  }

  /* El resultado no entra apilado en media ficha: la superficie de proyeccion
     ocupa una columna y el resumen de apoyo con sus acciones la otra. Se usa
     el aire que la columna izquierda dejaba vacio en vez de recortar el texto
     o abrir scroll. */
  .mp360-lot__result { padding: var(--space-3); }
  .mp360-lot__state { margin-top: var(--space-2); font-size: 13px; }
  .mp360-lot__result .mp360-lot__amount { font-size: 26px; }

  /* En 360px de alto no entran resultado, resumen de apoyo y acciones. Cede el
     resumen: la cuota y el ingreso acaban de verse en el paso anterior y en el
     campo que la persona completo, mientras que el porcentaje, la proporcion y
     el CTA no tienen otro lugar donde leerse. */
  .mp360-lot__pane[data-step="resultado"] .mp360-lot__support { display: none; }
}

/* La ficha y la disponibilidad comparten la columna izquierda. Juntas a
   tamaño completo no entran con aire en una pantalla de 768 de alto -427 + 334
   contra 648 utiles-, asi que mientras la ficha esta abierta la disponibilidad
   pasa a su forma corta: cuantos lotes hay, que significa el rojo y como
   filtrar. El detalle por cuota sigue disponible a un toque, en el panel de
   filtros, que lista cada plan con su color y su conteo.

   No se oculta ninguna de las dos: se apilan y la secundaria cede altura. */
/* Sin alto para las dos: la secundaria se retira y vuelve al cerrar la ficha.
   Lo decide `Legend.place()` midiendo, no un breakpoint. */
.mp360-legend[data-cede="true"],
.mp360-lotfilter[data-cede="true"] { display: none; }

html.mp360-lot-open .mp360-legend .mp360-legend__bands,
.mp360-legend.is-compacta .mp360-legend__bands { display: none; }

html.mp360-lot-open .mp360-legend .mp360-legend__reserved,
.mp360-legend.is-compacta .mp360-legend__reserved {
  margin-top: var(--space-3) !important;
}

/* Con la ficha al pie no queda carril libre: tambien se retiran selector y
   plano, que ademas quedarian debajo y sin uso. El JS les aplica `inert`. */
@media (max-width: 767px) {
  html.mp360-lot-open .mp360-scenes,
  html.mp360-lot-open .mp360-plano { display: none; }

  /* El filtro es una decision con foco: en telefono toma el carril entero.
     Compartirlo con el selector deja las seis filas -de 44px, que no se
     achican- sin alto y abriria scroll dentro del panel. */
  .mp360-lotfilter:not([hidden]) ~ .mp360-scenes { display: none; }
}

/* --------------------------------------------------------------------------
   11b . Banners de marca . bienvenida y servicios

   El componente vive en su propio documento y ocupa la superficie entera: lo
   que se estiliza aca es el marco, nunca su contenido. Ni un token ni una
   regla de MP360 cruzan al iframe, y ninguna del componente sale.
   -------------------------------------------------------------------------- */
.mp360-banner {
  position: absolute;
  inset: 0;
  z-index: 60;
  /* Velo, no fondo. El recorrido sigue viendose y moviendose detras de la
     card; el desenfoque le saca detalle para que el foco quede en el banner
     sin tapar lo que pasa atras. */
  background: rgba(13, 13, 13, 0.5);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  /* Solo `opacity`. El `backdrop-filter` no cambia de valor en ningun estado,
     asi que declararlo transicionable no anima nada y deja al compositor
     vigilando en cada cuadro una propiedad cara que esta quieta. */
  transition: opacity var(--mo-surface) var(--mo-out);
}

/* Salida coordinada: el componente anima su contenido y su card desde su
   propio documento, y el velo se va con el. El desmontaje espera a las dos.

   Desde el primer cuadro de la salida el velo deja de recibir el puntero: es
   una capa a pantalla completa sobre el recorrido, y con `opacity: 0` seguia
   interceptando arrastre y zoom aunque ya no se viera. Ese era el bloqueo. */
.mp360-banner.is-closing {
  opacity: 0;
  pointer-events: none;
}

/* El marco no anima. El componente trae su propia entrada y es la que hay que
   respetar; un fade del contenedor no aportaba nada y, si no llegaba a correr,
   dejaba una pantalla completa en negro. */
.mp360-banner[hidden] {
  display: none;
  pointer-events: none;
}

/* La ficha de proyecto trae su propio velo con desenfoque dentro del
   componente: el marco no puede sumar un segundo. */
.mp360-banner--proyecto {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* El componente ya resuelve su propio responsive: el marco no le impone nada
   mas que el area disponible. */
.mp360-banner__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cierre propio del marco: el componente de servicios no trae ninguno, y una
   superficie temporal sin salida visible seria un antipatron. La bienvenida no
   lo lleva porque su propio CTA es la salida. */
.mp360-banner__close {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon-button);
  background: var(--na-paper);
  box-shadow: var(--na-shadow-paper);
  color: var(--na-ink);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-banner__close:hover { background: var(--white); }

.mp360-banner__close:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   11c . Galeria de imagenes . componente Osmos

   El slider mide su alto contra el marco -su CSS declara `height: 100vh`- asi
   que la card es el propio iframe: dentro del componente no hay ninguna
   superficie intermedia y su layout queda exactamente como fue entregado.
   -------------------------------------------------------------------------- */
.mp360-banner--galeria {
  display: grid;
  place-items: center;
  padding: clamp(var(--space-6), 6vh, var(--space-12)) var(--space-4);
}

.mp360-banner--galeria .mp360-banner__frame {
  width: min(1180px, 86vw);
  height: min(720px, 76vh);
  /* Nunca por encima del area que deja el padding: es lo que mantiene la cruz
     de cierre del marco fuera de la card en cualquier viewport. */
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-modal);
  /* La foto llega al borde de la card: se recorta con su curva en vez de
     asomar en las esquinas. */
  overflow: hidden;
  background: var(--na-surface-dark);
  box-shadow: var(--na-shadow-paper);
}

/* Apaisado corto: el alto es el recurso escaso y la card se queda con casi
   todo, sin dejar de respetar la cruz de cierre del marco. */
@media (orientation: landscape) and (max-height: 520px) {
  /* El costado derecho reserva el ancho de la cruz mas su aire: en apaisado
     la card llega casi al borde y no puede quedar debajo del boton. */
  .mp360-banner--galeria { padding: var(--space-3) 76px; }
  .mp360-banner--galeria .mp360-banner__frame { height: min(720px, 86vh); }
}

/* --------------------------------------------------------------------------
   11d . Distancias a puntos de interes

   Una ficha deliberadamente simple: el nombre del destino, el recorrido en
   Google Maps y la cruz. Sin CTA, sin leyendas y sin repetir la distancia
   fuera del mapa: el dato ya lo da el propio recorrido.
   -------------------------------------------------------------------------- */
.mp360-banner--mapa {
  display: grid;
  place-items: center;
  padding: clamp(var(--space-4), 5vh, var(--space-8)) var(--space-4);
}

.mp360-mapa {
  display: flex;
  flex-direction: column;
  width: min(1040px, 88vw);
  height: min(660px, 80vh);
  max-width: 100%;
  max-height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-modal);
  background: var(--na-paper);
  box-shadow: var(--na-shadow-paper);
}

.mp360-mapa__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-1) var(--space-1) var(--space-3) var(--space-3);
}

.mp360-mapa__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--na-ink);
}

.mp360-mapa__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon-button);
  background: transparent;
  color: var(--na-ink);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-mapa__close:hover { background: var(--na-paper-hover); }
.mp360-mapa__close:active { background: var(--na-paper-active); }

.mp360-mapa__close:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: 2px;
}

/* Contorno concentrico real: el mapa se apoya dentro de la card con 12px de
   aire, asi que su curva es la de la card menos ese aire. La formula se
   reescribe en este ambito porque en `:root` ya quedo resuelta con otros
   valores. */
.mp360-mapa__body {
  --radius-nested-outer: var(--radius-modal);
  --radius-nested-gap: var(--space-3);
  --radius-nested-calculated: max(var(--radius-nested-min), calc(var(--radius-nested-outer) - var(--radius-nested-gap)));
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-nested-calculated);
  overflow: hidden;
  background: var(--neutral-200);
}

.mp360-mapa__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   11e . Motion de las dos superficies propias

   A diferencia de los componentes de marca, estas dos las dibuja MP360, asi
   que la entrada y la salida son suyas: el velo funde y la superficie sube un
   poco con una escala minima. La animacion no lleva `fill` y `.is-closing` la
   apaga, para que la salida quede en manos de la transicion y nunca se pise
   con la entrada.
   -------------------------------------------------------------------------- */
@keyframes mp360-velo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mp360-superficie-in {
  from { opacity: 0; transform: translateY(var(--mo-shift, 8px)) scale(var(--mo-scale, 0.985)); }
  to   { opacity: 1; transform: none; }
}

.mp360-banner--mapa,
.mp360-banner--galeria {
  animation: mp360-velo-in var(--mo-surface) var(--mo-out);
}

/* El banner institucional resuelve su propia cascada adentro; lo que le falta
   es que el velo entre con ella y no de golpe. Solo el velo: la card, el
   titulo, los logos y las cifras los anima el componente. */
.mp360-banner--agostini {
  animation: mp360-velo-in var(--mo-surface) var(--mo-out);
}

.mp360-banner--agostini.is-closing { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .mp360-banner--agostini { animation: none; }
}

.mp360-banner--mapa .mp360-mapa,
.mp360-banner--galeria .mp360-banner__frame {
  animation: mp360-superficie-in var(--mo-surface) var(--mo-in);
  transition: opacity var(--mo-exit) var(--mo-out),
              transform var(--mo-exit) var(--mo-out);
}

.mp360-banner--mapa.is-closing,
.mp360-banner--galeria.is-closing { animation: none; }

.mp360-banner--mapa.is-closing .mp360-mapa,
.mp360-banner--galeria.is-closing .mp360-banner__frame {
  animation: none;
  opacity: 0;
  transform: translateY(var(--mo-shift, 8px)) scale(var(--mo-scale, 0.985));
}

@media (prefers-reduced-motion: reduce) {
  .mp360-banner--mapa,
  .mp360-banner--galeria,
  .mp360-banner--mapa .mp360-mapa,
  .mp360-banner--galeria .mp360-banner__frame { animation: none; }
}

/* Con un banner abierto la capa MP360 se retira entera: es una superficie que
   subordina al recorrido, no que convive con el. */
/* El cierre de Servicios y de Agostini es del marco: sus componentes no
   traen uno y una superficie temporal sin salida visible es un antipatron.
   Bienvenida no lo lleva porque su propio CTA es la salida. */

/* La capa MP360 no se oculta desde aca: con un banner abierto la retira
   `watchUiVisibility` con `.is-hidden`, que ya lleva su salida y su vuelta en
   cascada. Duplicarlo con `display: none` era lo que la hacia desaparecer y
   reaparecer en seco. */
html.mp360-banner-open .mp360-lot,
html.mp360-banner-open .mp360-tip,
html.mp360-banner-open .mp360-note { display: none; }

/* --------------------------------------------------------------------------
   12 . Plano interactivo . inferior derecha
   Una sola superficie, siempre a la vista. Sin ampliar, sin zoom y sin paneo:
   el trazado entra completo por proporcion y los puntos responden al cursor
   donde estan.

   El SVG viene en capas -manzanas, figuras destacadas y linework-, y el color
   de cada una se decide aca. La capa de interaccion va siempre por encima.
   -------------------------------------------------------------------------- */
.mp360-plano {
  --mp360-plano-lift: 0px;
  --mp360-plano-ratio: 2.487;

  /* Superficie del plano. Blanco calido, no blanco digital. */
  --mp360-plano-paper: #FBFAF8;
  --mp360-plano-block: #F1EEE9;
  --mp360-plano-feature: #E8E3DA;
  /* Un unico grosor y un unico color para todo el linework. */
  --mp360-plano-ink: #4F4B46;
  --mp360-plano-stroke: 1.2px;

  /* Acentos de etapa, tomados de las escalas del sistema. */
  --na-stage-1: var(--info-600);
  --na-stage-2: var(--secondary-500);
  --na-stage-3: var(--magic-600);

  position: absolute;
  right: calc(var(--space-6) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-6) + var(--mp360-plano-lift) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: clamp(300px, 26vw, 380px);
  padding: var(--space-4) var(--space-4) var(--space-3);
  /* Los marcadores del extremo asoman sobre el padding: nada se corta, y la
     tarjeta sigue conteniendo todo dentro de su radio. */
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-container);
  background: var(--mp360-plano-paper);
  box-shadow: 0 12px 32px rgba(13, 13, 13, 0.24);
  font-family: var(--font-sans);
  transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp360-plano[hidden] { display: none; }

/* --- Superficie del trazado ---------------------------------------------- */
.mp360-plano__map {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--mp360-plano-ratio);
}

/* El cono se recorta al borde del plano. Los marcadores viven fuera de este
   lienzo, asi que un punto del extremo conserva su aro y su halo completos. */
.mp360-plano__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mp360-plano__trace {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--mp360-plano-ink);
}

.mp360-plano__trace svg { display: block; width: 100%; height: 100%; }

/* Manzanas y lotes: superficie, no contorno. La circulacion queda como vacio,
   que es lo que separa una manzana de la siguiente. */
.mp360-plano__trace .mp360-plano__manzanas path { fill: var(--mp360-plano-block); }
.mp360-plano__trace .mp360-plano__destacadas path { fill: var(--mp360-plano-feature); }

.mp360-plano__trace .mp360-plano__trazado {
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-width: var(--mp360-plano-stroke);
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* --- Cono de orientacion ------------------------------------------------- */
.mp360-plano__cone {
  position: absolute;
  width: 21.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 1;
}

.mp360-plano__cone[hidden] { display: none; }
.mp360-plano__cone svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mp360-plano__cone path { fill: var(--na-orange); fill-opacity: 0.42; }

/* --- Marcadores ---------------------------------------------------------- */
.mp360-plano__points {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* El marcador dibujado sigue midiendo 36 para que el plano no se sature, y el
   area sensible llega a 44 por un pseudo-elemento centrado. */
.mp360-plano__point {
  --pin: 20px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--white);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

/* Circulo naranja limpio: es un acceso a una vista, no un vertice del plano. */
.mp360-plano__pin {
  display: block;
  width: var(--pin);
  height: var(--pin);
  border: 2px solid var(--white);
  border-radius: var(--radius-circle);
  background: var(--na-orange);
  box-shadow: 0 1px 3px rgba(13, 13, 13, 0.22);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* El activo crece y suma anillo: no depende solo del color. */
.mp360-plano__point::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.mp360-plano__point.is-active { --pin: 26px; z-index: 3; }

.mp360-plano__point.is-active .mp360-plano__pin {
  box-shadow: 0 0 0 4px rgba(245, 131, 39, 0.32), 0 2px 6px rgba(13, 13, 13, 0.28);
}

.mp360-plano__point:hover,
.mp360-plano__point:focus-visible { z-index: 4; }

.mp360-plano__point:hover .mp360-plano__pin,
.mp360-plano__point:focus-visible .mp360-plano__pin { transform: scale(1.16); }

.mp360-plano__point:focus-visible { outline: none; }
.mp360-plano__point:focus-visible .mp360-plano__pin { box-shadow: 0 0 0 3px var(--neutral-900); }

/* --- Etapas -------------------------------------------------------------- */
.mp360-plano__point[data-stage] { --stage: var(--na-stage-1); }
.mp360-plano__point[data-stage="2"] { --stage: var(--na-stage-2); }
.mp360-plano__point[data-stage="3"] { --stage: var(--na-stage-3); }

/* Las etapas no llevan aro ni halo de color: su circulo es el mismo naranja que
   el resto. Se reconocen por el numero de la insignia y por su label al pasar
   el cursor. */

.mp360-plano__badge {
  position: absolute;
  top: calc(50% - var(--pin) / 2 - 5px);
  left: calc(50% + var(--pin) / 2 - 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--white);
  border-radius: var(--radius-circle);
  background: var(--stage);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* La etapa se reconoce siempre por el aro y el numero. El label completo solo
   aparece con el cursor, para no cargar el plano. */
.mp360-plano__stage {
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: calc(50% + var(--pin) / 2 + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--stage);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

/* --- Tooltip del punto: aparece con el cursor, sin ampliar nada ----------- */
.mp360-plano__name {
  position: absolute;
  left: 50%;
  bottom: calc(50% + var(--pin) / 2 + 8px);
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--neutral-900);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp360-plano__point:hover .mp360-plano__name,
.mp360-plano__point:focus-visible .mp360-plano__name,
.mp360-plano__point:hover .mp360-plano__stage,
.mp360-plano__point:focus-visible .mp360-plano__stage { opacity: 1; }

/* Cerca de un borde, label y tooltip se acomodan para no salirse. */
.mp360-plano__point[data-edge~="abajo"] .mp360-plano__stage {
  top: auto;
  bottom: calc(50% + var(--pin) / 2 + 7px);
}
.mp360-plano__point[data-edge~="abajo"] .mp360-plano__name {
  bottom: auto;
  top: calc(50% + var(--pin) / 2 + 8px);
}
.mp360-plano__point[data-edge~="arriba"] .mp360-plano__name {
  bottom: auto;
  top: calc(50% + var(--pin) / 2 + 8px);
}
.mp360-plano__point[data-edge~="izquierda"] .mp360-plano__stage,
.mp360-plano__point[data-edge~="izquierda"] .mp360-plano__name { left: 0; transform: none; }
.mp360-plano__point[data-edge~="derecha"] .mp360-plano__stage,
.mp360-plano__point[data-edge~="derecha"] .mp360-plano__name { left: auto; right: 0; transform: none; }

/* Con el label de etapa abajo, el tooltip no se le encima. */
.mp360-plano__point[data-stage][data-edge~="abajo"] .mp360-plano__name {
  top: calc(50% + var(--pin) / 2 + 7px);
}

.mp360-plano__hint {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--neutral-500);
}

@media (max-width: 1179px) {
  .mp360-plano {
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-4) + var(--mp360-plano-lift) + env(safe-area-inset-bottom, 0px));
    width: clamp(260px, 31vw, 286px);
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
  .mp360-plano__hint { font-size: 12px; }
}

/* En telefono el plano usa el ancho disponible. Si el carril inferior no le
   alcanza, `place()` lo eleva por encima del selector y de disponibilidad. */
/* El plano NO existe en mobile. No es que se oculte: no monta, no reserva
   alto, no recibe foco y no intercepta el puntero. El apagado vive en dos
   capas a proposito -el modulo no lo monta y el CSS lo retira del layout-
   porque una sola de las dos deja el componente prohibido a un fallo de
   distancia: si el JS no corre, el CSS lo sostiene, y al reves.

   Por eso tampoco quedan aca medidas mobile para sus piezas: un componente
   que no existe en un viewport no puede tener estilos para ese viewport. */
@media (max-width: 767px), (max-height: 480px) and (orientation: landscape) {
  .mp360-plano { display: none; }
}

/* El plano es la via de navegacion redundante: el selector ya lleva a todas
   las vistas. Cuando el carril no le deja alto con aire real, cede en vez de
   montarse sobre disponibilidad o salirse por arriba. Lo decide `place()`
   midiendo, no un breakpoint. */
.mp360-plano[data-cede="true"] { display: none; }

@media (max-height: 480px) and (orientation: landscape) {
  .mp360-plano { left: auto; width: 300px; padding: var(--space-2); }
  .mp360-plano__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-plano,
  .mp360-plano__pin,
  .mp360-plano__stage,
  .mp360-plano__name { transition: none; }
  .mp360-plano__point:hover .mp360-plano__pin,
  .mp360-plano__point:focus-visible .mp360-plano__pin { transform: none; }
}

/* --------------------------------------------------------------------------
   11 . Precarga de marca
   CSS trasladado de la animacion aprobada. Los colores y radios pasan a
   consumir los tokens del sistema; la composicion y el motion no cambian.
   -------------------------------------------------------------------------- */
html.is-preloading,
html.is-preloading body { overflow: hidden; }

.mp360-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-sans);
}

.mp360-preloader__final,
.mp360-preloader__intro {
  position: absolute;
  inset: 0;
  min-height: 100svh;
  overflow: hidden;
  will-change: clip-path;
}

.mp360-preloader__final {
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-8);
  background: var(--neutral-100);
  color: var(--neutral-950);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.mp360-preloader__intro {
  z-index: 2;
  background: var(--neutral-950);
  color: var(--neutral-100);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.mp360-preloader__progress {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 6px;
  background: var(--na-orange);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.mp360-preloader__images {
  position: absolute;
  top: 45%;
  left: 50%;
  width: clamp(19rem, 27vw, 25rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  border-radius: var(--radius-container);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  will-change: clip-path;
}

.mp360-preloader__image {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  will-change: clip-path;
}

.mp360-preloader__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.8);
  will-change: transform;
}

.mp360-preloader__title-wrap {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 60%;
  width: min(94vw, 1600px);
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mp360-preloader__title,
.mp360-preloader__final-title {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.065em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.mp360-preloader__title {
  color: var(--neutral-100);
  font-size: clamp(3.25rem, 8vw, 9rem);
  opacity: 0;
}

.mp360-preloader__final-title {
  max-width: 1500px;
  color: var(--neutral-950);
  font-size: clamp(2.5rem, 6.4vw, 7.5rem);
}

/* Las mascaras recortan la animacion, pero necesitan aire alrededor del glifo:
   con Figtree 800 las ascendentes y descendentes se salen de la caja de linea y
   quedarian cortadas. El margen negativo compensa el padding, asi que la
   composicion no se mueve. */
.mp360-preloader .char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .12em .08em .18em;
  margin: -.12em -.08em -.18em;
}

.mp360-preloader .char { display: inline-block; will-change: transform; }

/* Solo las mascaras recortan: los contenedores dejan pasar el glifo. */
.mp360-preloader__title-wrap,
.mp360-preloader__title,
.mp360-preloader__final-title { overflow: visible; }

@media (max-width: 700px) {
  .mp360-preloader__images { top: 43%; width: min(76vw, 21rem); border-radius: var(--radius-control); }
  .mp360-preloader__title-wrap { top: 61%; width: 90vw; }
  .mp360-preloader__title { font-size: clamp(2.4rem, 13vw, 5rem); letter-spacing: -0.055em; }
  .mp360-preloader__final { padding: var(--space-6); }
  .mp360-preloader__final-title {
    max-width: 92vw;
    font-size: clamp(2.1rem, 11vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-preloader__image img { transform: none; }
}

@media (max-width: 360px) {
  .mp360-preloader__title { font-size: clamp(2rem, 12.5vw, 2.9rem); }
  .mp360-preloader__final-title { font-size: clamp(1.85rem, 10.5vw, 2.7rem); }
  .mp360-preloader__title-wrap { padding-inline: var(--space-4); }
}


/* ==========================================================================
   F2 . Carril inferior en mobile
   --------------------------------------------------------------------------
   El panorama es el contenido principal. En un telefono las tres superficies
   persistentes tapaban el 59% del viewport, asi que el plano deja de existir
   -lo resuelve `mp360-plano.js`, no un `display:none`- y las otras dos pasan
   a franjas de 56px. El detalle que antes estaba siempre a la vista se abre
   bajo demanda, cada intencion en su propia superficie:

     tocar la disponibilidad  ->  Planes y valores   (informativo)
     tocar "Filtrar"          ->  Filtros            (seleccion de cuotas)

   Nunca las dos a la vez, y ninguna convive con la ficha de lote.
   ========================================================================== */

/* Piezas que solo existen en mobile: fuera de el no ocupan lugar. */
.mp360-legend__resumen,
.mp360-legend__close,
.mp360-scenes__actual,
.mp360-scenes__vistas { display: none; }

@media (max-width: 767px), (max-height: 480px) and (orientation: landscape) {

  /* --- Disponibilidad . franja compacta persistente ---------------------- */
  .mp360-legend[data-modo="compacta"] {
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    width: auto;
    min-height: 56px;
    max-height: none;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    overflow: visible;
  }

  /* El detalle no se dibuja en esta forma: vive en la hoja de valores. */
  .mp360-legend[data-modo="compacta"] .mp360-legend__head,
  .mp360-legend[data-modo="compacta"] .mp360-legend__bands,
  .mp360-legend[data-modo="compacta"] .mp360-legend__reserved,
  .mp360-legend[data-modo="compacta"] .mp360-legend__active { display: none; }

  .mp360-legend[data-modo="compacta"] .mp360-legend__resumen {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mp360-legend[data-modo="compacta"] .mp360-legend__actions {
    margin: 0;
    flex: none;
  }

  .mp360-legend[data-modo="compacta"] .mp360-legend__filter {
    width: auto;
    min-height: 44px;
    padding: 0 var(--space-4);
  }

  /* --- Disponibilidad . hoja de planes y valores ------------------------- */
  .mp360-legend[data-modo="valores"] {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: min(80dvh, calc(100dvh - 16px));
    /* `--space-6`, que es lo que define la escala. Estuvo escrito como
       `--space-5`, que no existe: un `var()` sin valor invalida la declaracion
       entera, la hoja quedaba sin padding y el titulo se cortaba contra el
       borde izquierdo de la pantalla. */
    padding: var(--space-6) var(--space-6)
             calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .mp360-legend[data-modo="valores"] .mp360-legend__resumen,
  .mp360-legend[data-modo="valores"] .mp360-legend__actions { display: none; }
  .mp360-legend[data-modo="valores"] .mp360-legend__close { display: grid; }
  .mp360-legend[data-modo="valores"] .mp360-legend__band { min-height: 44px; }

  /* --- Filtros . hoja de seleccion --------------------------------------- */
  .mp360-lotfilter[data-modo="sheet"] {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: min(80dvh, calc(100dvh - 16px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .mp360-lotfilter[data-modo="sheet"] .mp360-lotfilter__plan { min-height: 48px; }

  /* --- Selector de vistas . control compacto ----------------------------- */
  .mp360-scenes[data-modo="compacto"],
  .mp360-scenes[data-modo="lista"] {
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    padding: var(--space-1);
  }

  /* Los dos grupos siguen a la vista: son la eleccion real -altura o pie- y
     se resuelven en un toque. Lo que desaparece es la lista de panoramas: en
     el telefono se recorre con las flechas, no entrando a una segunda
     superficie que tapa el recorrido para elegir de una lista.

     Segmentado de dos columnas iguales que ocupa todo el ancho: son categorias
     mutuamente excluyentes, no dos botones que midan lo que diga su texto. Con
     `display: flex` -que es lo que habia aca- cada uno tomaba su ancho de
     contenido y quedaba un vacio muerto a la derecha. */
  .mp360-scenes[data-modo="compacto"] .mp360-scenes__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  /* Mismo alto, mismo ancho y el mismo reparto interno en los dos: el titulo
     arriba y el conteo debajo, sin que uno parezca una tarjeta y el otro un
     resto. */
  .mp360-scenes[data-modo="compacto"] .mp360-scenes__group {
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }

  /* El inactivo baja el enfasis pero sigue legible sobre el vidrio oscuro. */
  .mp360-scenes[data-modo="compacto"] .mp360-scenes__group[aria-selected="false"] {
    color: rgba(255, 255, 255, 0.78);
  }
  .mp360-scenes[data-modo="compacto"] .mp360-scenes__steps,
  .mp360-scenes[data-modo="lista"] .mp360-scenes__steps { display: none; }

  /* Sin lista, el nombre de la vista es un rotulo: informa, no invita. */
  .mp360-scenes[data-modo="compacto"] .mp360-scenes__actual { cursor: default; }
  .mp360-scenes[data-modo="compacto"] .mp360-scenes__actual-chevron { display: none; }

  .mp360-scenes[data-modo="compacto"] .mp360-scenes__actual,
  .mp360-scenes[data-modo="lista"] .mp360-scenes__actual { display: flex; }

  .mp360-scenes[data-modo="compacto"] .mp360-scenes__nav,
  .mp360-scenes[data-modo="lista"] .mp360-scenes__nav {
    min-height: 48px;
    gap: var(--space-1);
  }

  /* --- Selector de vistas . lista del grupo activo ------------------------ */
  .mp360-scenes[data-modo="lista"] .mp360-scenes__vistas { display: grid; }
  /* La lista se dibuja porque el selector esta en modo lista; al cerrarlo, ese
     modo cambia en el mismo momento en que la salida empieza. Sin esta regla la
     lista pasaba a `display: none` en el primer cuadro y la salida no llegaba a
     verse nunca: lo que se va sigue ocupando su lugar hasta que termina. */
  .mp360-scenes .mp360-scenes__vistas.mo-exit { display: grid; }
  .mp360-scenes[data-modo="lista"] .mp360-scenes__actual .mp360-scenes__actual-chevron { rotate: 180deg; }
}

/* --------------------------------------------------------------------------
   Piezas nuevas . forma
   -------------------------------------------------------------------------- */

/* Resumen tactil de la franja: conteo a la izquierda, colores a la derecha.
   Los puntos son referencia cromatica, no controles; el nombre accesible lo
   da el conteo y el detalle esta a un toque. */
.mp360-legend__resumen {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mp360-legend__resumen-count {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--na-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp360-legend__dots {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.mp360-legend__dots .mp360-legend__swatch { width: 8px; height: 8px; }

.mp360-legend__resumen:focus-visible {
  outline: 2px solid var(--na-ink);
  outline-offset: 3px;
  border-radius: var(--radius-compact);
}

/* Cabecera de la hoja: el titulo a la izquierda y el cierre reservando su
   lugar en el layout, no encima del texto. */
.mp360-legend__head { align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.mp360-legend__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mp360-legend__close {
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: none;
  color: var(--na-ink-soft);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move), color var(--mo-fast) var(--mo-move);
}

.mp360-legend__close:hover { background: var(--na-paper-hover); color: var(--na-ink); }
.mp360-legend__close:focus-visible { outline: 2px solid var(--na-ink); outline-offset: 2px; }

/* Vista actual del selector compacto. El nombre puede truncar; la posicion y
   el chevron no, porque son los que dicen que hay mas y donde estamos. */
.mp360-scenes__actual {
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-compact);
  background: none;
  font: inherit;
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--mo-fast) var(--mo-move);
}

.mp360-scenes__actual:hover { background: rgba(255, 255, 255, 0.12); }
.mp360-scenes__actual:active { transform: scale(0.99); }
.mp360-scenes__actual:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.mp360-scenes__actual-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.mp360-scenes__actual-pos {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.66);
  font-variant-numeric: tabular-nums;
}

.mp360-scenes__actual-chevron {
  flex: none;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.66);
  transition: rotate var(--mo-fast) var(--mo-move);
}

/* Lista del grupo activo. Dos columnas -tres si hay ancho- para que entre sin
   scroll: en apaisado el alto es el recurso escaso. */
.mp360-scenes__vistas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  padding: 0;
  max-height: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.mp360-scenes__vistas[hidden] { display: none; }

@media (min-width: 600px) {
  .mp360-scenes__vistas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mp360-scenes__vista {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-compact);
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background-color var(--mo-fast) var(--mo-move), color var(--mo-fast) var(--mo-move);
}

.mp360-scenes__vista:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.mp360-scenes__vista:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }

.mp360-scenes__vista[aria-current="location"] {
  background: var(--white);
  color: var(--na-ink);
  font-weight: 600;
}

/* En apaisado el filtro reparte sus seis celdas -"Todas las cuotas" mas los
   cinco planes- en dos columnas por tres filas, con el estado base al final.
   Con una sola columna la hoja pedia 440px sobre los 288 disponibles. */
@media (max-height: 480px) and (orientation: landscape) {
  .mp360-lotfilter[data-modo="sheet"] .mp360-lotfilter__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-3);
  }

  .mp360-lotfilter[data-modo="sheet"] .mp360-lotfilter__plan { min-height: 44px; order: 0; }
  /* Como sexta celda, no como fila entera: con `grid-column: 1 / -1` -que la
     hoja hereda del bloque de apaisado de mas arriba- la grilla pasaba a
     cuatro filas y dejaba un hueco al lado del quinto plan. */
  .mp360-lotfilter[data-modo="sheet"] .mp360-lotfilter__plan--all {
    order: 1;
    grid-column: auto;
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Anchos chicos . la franja cede por orden de importancia
   --------------------------------------------------------------------------
   El conteo es el dato; los colores son una referencia que ya vive completa
   en "Planes y valores", a un toque; la etiqueta del boton es prescindible
   porque el icono de embudo tiene nombre accesible. En ese orden se retiran,
   sin bajar de 12px ni de 44px de target y sin truncar nunca el conteo.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .mp360-legend[data-modo="compacta"] .mp360-legend__dots { display: none; }
}

@media (max-width: 360px) {
  .mp360-legend[data-modo="compacta"] .mp360-legend__filter-label { display: none; }
  .mp360-legend[data-modo="compacta"] .mp360-legend__filter {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Apaisado corto . una sola linea inferior
   --------------------------------------------------------------------------
   Apiladas, las dos franjas se comian el 31% de un viewport de 360px de alto.
   Puestas lado a lado ocupan una sola linea: la disponibilidad a la izquierda
   y el selector a la derecha, con aire real entre las dos. Al no compartir
   franja horizontal, `Legend.place()` ya no necesita elevar ninguna.
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .mp360-legend[data-modo="compacta"] {
    right: auto;
    /* El reparto lo decide el contenido, no una mitad simetrica: la franja
       necesita mas ancho porque lleva conteo, seis colores y un boton, y el
       selector se arregla con menos. A 44% "40 lotes disponibles" truncaba.

       Se reparte con `left`/`right`, no con dos anchos porcentuales: sumar
       54% y 46% no descuenta el aire del medio y las dos cajas se pisaban por
       8px. Cada una cede medio hueco y el aire queda garantizado por
       construccion. */
    right: calc(46% + var(--space-2));
    width: auto;
    min-height: 48px;
    bottom: calc(var(--space-2) + var(--mp360-legend-lift, 0px) + env(safe-area-inset-bottom, 0px));
    padding-left: var(--space-3);
    gap: var(--space-2);
  }

  .mp360-legend[data-modo="compacta"] .mp360-legend__resumen-count { font-size: 14px; }
  .mp360-legend[data-modo="compacta"] .mp360-legend__filter { padding: 0 var(--space-3); }

  .mp360-scenes[data-modo="compacto"],
  .mp360-scenes[data-modo="lista"] {
    left: calc(54% + var(--space-2));
    width: auto;
    bottom: calc(var(--space-2) + var(--mp360-scenes-lift, 0px) + env(safe-area-inset-bottom, 0px));
  }

  .mp360-scenes[data-modo="compacto"] .mp360-scenes__nav,
  .mp360-scenes[data-modo="lista"] .mp360-scenes__nav { min-height: 44px; }

  /* La hoja de valores y la lista de vistas siguen siendo superficies a
     pantalla: no comparten la linea, la reemplazan. */
  .mp360-legend[data-modo="valores"] {
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - 16px);
  }

  .mp360-legend[data-modo="valores"] .mp360-legend__bands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }

  .mp360-scenes[data-modo="lista"] .mp360-scenes__vistas { max-height: 40dvh; }
}


/* --------------------------------------------------------------------------
   F3 . Mapa de distancias en telefono
   El `min(1040px, 88vw)` dejaba la card pegada a los bordes en anchos chicos
   y sin margen visible contra el velo. Se le da el mismo margen que al resto
   de las superficies del proyecto.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mp360-mapa {
    width: min(1040px, calc(100vw - 2 * var(--space-4)));
    height: min(660px, calc(100dvh - 2 * var(--space-6)));
  }
}