/* MP360 · Jacarandá — Announcement bar + navbar externo + menú responsive
 *
 * Portes literales desde WEB1-CGMWTAUGUST2025-LISTO/terrene:
 *   src/components/TopBar/TopBar.css            -> .top-bar (composición mobile)
 *   src/components/MenuBtn/MenuBtn.css          -> .menu-toggle y su morfología
 *   src/components/Nav/Nav.css                  -> .menu, .menu-wrapper, .link, .split-line
 *   src/components/AnimatedButton/AnimatedButton.css -> .btn, .circle, .icon, .button-text
 *
 * Adaptaciones, todas señaladas en su lugar:
 *   - paleta y radios: Design System de Jacarandá (nada de crema/negro de Terrene);
 *   - .menu-toggle deja de anclarse abajo al centro y pasa al slot derecho del
 *     TopBar, que es donde la referencia coloca `Reserve` (pedido explícito);
 *   - el overlay no detiene Lenis: este MP360 no scrollea. Se bloquea el gesto
 *     del panorama, que es el equivalente real acá.
 */

#mp360-nav {
  /* ---- Design System Jacarandá: primitivos usados ---- */
  --white: #FFFFFF;
  --neutral-950: #151515;
  --neutral-50: #FEFEFE;
  --neutral-400: #B6B6B6;
  --neutral-300: #D4D4D4;

  --primary-50: #F3F4FF;
  --primary-600: #5D59C6;
  --primary-700: #4742A1;
  --primary-800: #332F7B;
  /* Faltaba, y `.menu-wrapper` lo usaba: sin declararlo, `var(--primary-900)`
     no resolvia y el panel del menu quedaba transparente sobre el velo. La
     superficie interior que el recurso dibuja dentro del overlay —el "card"
     con radio— no existia. Mismo valor que ya declara mp360-intro.css. */
  --primary-900: #221E56;
  --primary-950: #15123C;

  --secondary-600: #A16455;   /* --background-secondary */
  --secondary-700: #7F4B3E;   /* --background-secondary-hover: variante fuerte */
  --secondary-800: #5E3429;

  /* ---- Shape tokens (Design System, base 8px · perfil balanced) ---- */
  --radius-none: 0px;
  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-container: 12px;
  --radius-prominent: 16px;
  --radius-circle: 50%;

  /* recetas por componente */
  --radius-button: var(--radius-control);
  --radius-navbar: var(--radius-control);
  --radius-primary-cta: var(--radius-control);
  --radius-micro-surface: var(--radius-compact);
  --radius-icon-button: var(--radius-circle);   /* sólo para icon-buttons reales */
  --radius-modal: var(--radius-prominent);
  /* contorno anidado: bloque del ícono dentro del control, 2.4px de aire */
  --radius-control-inner: var(--radius-compact);

  /* ---- Medidas de la barra ---- */
  --ann-h: 32px;
  --bar-h: 72px;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  font-family: "Manrope", sans-serif;
  /* La capa sólo recibe puntero en sus propios controles: el panorama se
     sigue arrastrando en todo lo demás. */
  pointer-events: none;
}

#mp360-nav[hidden] { display: none !important; }

#mp360-nav *,
#mp360-nav *::before,
#mp360-nav *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */

/* Superficie clara: la franja informa, no compite. El violeta queda para la
   CTA primaria y para los estados activos de selección.
   Contraste #151515 sobre #FEFEFE: 18.1:1. */
/* La franja informa; no compite con el recorrido. Es baja, de una sola linea,
   y se reconoce por un detalle: el punto violeta del sistema a la izquierda
   del mensaje. Antes pasaba desapercibida porque era texto gris centrado sin
   ninguna marca.

   El alto de la mascara sale de la MISMA variable que el interlineado del
   mensaje, no de un valor suelto: era eso lo que dejaba dos mensajes
   parcialmente visibles cuando el line-box del dispositivo era mas alto que
   los 1.05rem que estaban escritos a mano. */
#mp360-nav .mp360-ann {
  --ann-linea: 1.25rem;
  position: relative;
  background: var(--neutral-50);
  color: var(--neutral-950);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  padding: 0 1rem;
  padding-top: env(safe-area-inset-top, 0);
  /* El alto lo manda el contenido, con un minimo. Asi el mensaje nunca queda
     cortado por una altura fija que no le alcanza. */
  min-height: calc(var(--ann-h) + env(safe-area-inset-top, 0));
}

#mp360-nav .mp360-ann[hidden] { display: none !important; }

#mp360-nav .mp360-ann__viewport {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, max-content);
  align-items: center;
  height: var(--ann-linea);
  overflow: hidden;
}

#mp360-nav .mp360-ann__msg {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: var(--ann-linea);
  letter-spacing: 0.01em;
  color: var(--neutral-950);
  /* Una sola linea siempre. Si un mensaje creciera, se recorta con elipsis en
     vez de envolverse y romper la franja. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  will-change: transform;
}

/* ==========================================================================
   Navbar desktop
   ========================================================================== */

#mp360-nav .mp360-bar {
  position: relative;
  /* Tres zonas de verdad: los laterales miden lo mismo (`1fr`) y el centro
     ocupa lo que necesita. El grupo de navegacion queda centrado respecto del
     VIEWPORT, no del hueco que dejan los lados. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  height: var(--bar-h);
  padding: 0 2rem;
  /* Fondo negro sólido del Design System, no translúcido: la barra tiene que
     leerse sobre cualquier panorama. */
  background: var(--neutral-950);
  pointer-events: auto;
}

/* El logo es un control real: vuelve a la vista de lotes. Se declara como
   <button> para que lo alcance el teclado y lo anuncie un lector; acá sólo se
   le quita la apariencia de botón, no su comportamiento. */
#mp360-nav .mp360-bar__logo,
#mp360-nav .top-bar .top-bar-logo {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#mp360-nav .mp360-bar__logo:focus-visible,
#mp360-nav .top-bar .top-bar-logo:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: var(--radius-micro-surface);
}

#mp360-nav .mp360-bar__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#mp360-nav .mp360-bar__logo img {
  display: block;
  height: 46px;
  width: auto;
}

#mp360-nav .mp360-bar__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.22);
}

/* Zonas laterales: cada una agrupa lo suyo y se apoya en su borde. */
#mp360-nav .mp360-bar__zona {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

#mp360-nav .mp360-bar__zona--izq { justify-self: start; }
#mp360-nav .mp360-bar__zona--der { justify-self: end; }

#mp360-nav .mp360-bar__items {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  /* Sin `margin: auto`: el centrado lo resuelve la rejilla. */
}

/* --- ítem de navegación: dos capas dentro de una máscara --- */

#mp360-nav .mp360-navitem {
  position: relative;
  display: block;
  background: none;
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  color: var(--white);
  font-family: "Manrope", sans-serif;
  /* DESIGN.md §5: 0.9375rem = 15px no está en la escala. */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

#mp360-nav .mp360-navitem__mask {
  position: relative;
  display: block;
  overflow: hidden;         /* la máscara: el label nunca sale de su renglón */
  height: 1.15em;
}

#mp360-nav .mp360-navitem__layer {
  display: block;
  will-change: transform;
  /* Familia de motion del ZIP: hover del botón principal. */
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.076, 1);
}

/* la segunda copia espera exactamente un renglón por debajo */
#mp360-nav .mp360-navitem__layer--in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
}

#mp360-nav .mp360-navitem:hover .mp360-navitem__layer--out,
#mp360-nav .mp360-navitem:focus-visible .mp360-navitem__layer--out {
  transform: translateY(-100%);
}

#mp360-nav .mp360-navitem:hover .mp360-navitem__layer--in,
#mp360-nav .mp360-navitem:focus-visible .mp360-navitem__layer--in {
  transform: translateY(0%);
}

#mp360-nav .mp360-navitem:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: var(--radius-micro-surface);
}

/* ==========================================================================
   CTA del navbar
   Mismo componente que el de la entrada: assets/css/mp360-cta.css.
   Acá sólo cambian color, ancho, texto, ícono y acción.
   ========================================================================== */

/* Los íconos de la barra no se desplazan en hover: el ícono nombra la acción
   y moverlo sólo lo acerca al rótulo. La capa sigue expandiéndose con el
   mismo recorrido y easing del componente. Mismo criterio que "Volver a lotes". */
#mp360-nav .btn:hover .icon,
#mp360-nav .btn:focus-visible .icon { transform: none; }

/* La variante primaria se mudó a assets/css/mp360-cta.css, junto al resto del
   componente: la usan la barra y la ficha de lote con las mismas reglas. Los
   valores no cambiaron. */

/* La variante secundaria se mudó a assets/css/mp360-cta.css, junto al resto
   del componente: la usan la barra y el pie del proyector con las mismas
   reglas. Los valores no cambiaron. */

/* Mismo componente; sólo cambia la escala de contexto.
   En la barra el CTA es un control persistente entre etiquetas de 14px: con el
   bloque de 3rem quedaba en 53px de alto y pesaba más que toda la navegación.
   Con 2.5rem el control mide 44.8px, que es el target mínimo de DESIGN.md §7
   (44x44) y lo deja apenas por encima de los ítems, no dominándolos.
   El CTA del hero conserva la escala del componente (3rem / 53px): ahí es la
   única acción de la pantalla y DESIGN.md recomienda 48px o más. */
#mp360-nav .mp360-bar .btn {
  --btn-circle: 2.5rem;
  --btn-icon: 1.25rem;
}

/* ==========================================================================
   TopBar mobile — TopBar.css portado
   ========================================================================== */

#mp360-nav .top-bar {
  position: relative;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--neutral-950);
  pointer-events: auto;
}

#mp360-nav .top-bar .top-bar-logo {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* La referencia usa un símbolo cuadrado de 2rem. Jacarandá tiene un logotipo
   horizontal: se conserva el asset oficial y se fija por altura. */
#mp360-nav .top-bar .top-bar-logo img {
  display: block;
  height: 34px;
  width: auto;
}

@media (max-width: 1000px) {
  #mp360-nav .top-bar { padding: 0.5rem 1.5rem; }
}

/* ==========================================================================
   MenuBtn — MenuBtn.css portado
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dos controles iconograficos del TopBar

   Misma familia, mismo tamano, mismo radio y una separacion breve y constante.
   44x44 es el objetivo tactil minimo de DESIGN.md §7, y es tambien el tamano
   del cierre de las superficies: los tres controles de icono del producto
   miden lo mismo.
   -------------------------------------------------------------------------- */
#mp360-nav .top-bar-acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;              /* 8px: contiguos, no pegados */
  flex: 0 0 auto;
}

#mp360-nav .menu-toggle,
#mp360-nav .mp360-navicon {
  position: relative;
  width: 2.75rem;           /* 44px */
  height: 2.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);   /* 8px, el mismo de los cierres */
  cursor: pointer;
  transition: background-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
              transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* El de menu conserva el violeta primario y la morfologia del recurso. */
#mp360-nav .menu-toggle {
  bottom: auto;
  left: auto;
  transform: none;
  background: var(--primary-700);
  transform-origin: center;
}

#mp360-nav .menu-toggle:active,
#mp360-nav .mp360-navicon:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  #mp360-nav .menu-toggle:hover { background: var(--primary-800); }
  #mp360-nav .mp360-navicon--wa:hover { background: var(--secondary-700); }
}

/* WhatsApp: el secundario aprobado del sistema, el mismo del CTA "Hablá con
   un asesor". No se introduce un verde generico que no pertenece a la paleta
   de Jacarandá. */
#mp360-nav .mp360-navicon--wa {
  background: var(--secondary-600);
  color: var(--white);
}

#mp360-nav .mp360-navicon__icon { width: 1.25rem; height: 1.25rem; display: block; }
#mp360-nav .mp360-navicon__icon svg { display: block; width: 100%; height: 100%; }

#mp360-nav .mp360-navicon:focus-visible,

/* El bloque del icono ya no es una capa dentro de una pastilla: es el propio
   control. Se conserva como caja de la hamburguesa para no tocar su
   morfologia portada. */
#mp360-nav .menu-toggle-icon {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  /* La referencia lo hace circular (100%). Se alinea al mismo contorno anidado
     que el bloque del ícono de las CTA para que la capa tenga una sola lógica
     de forma. Se revierte cambiando este único token. */
  border-radius: inherit;
  background-color: transparent;
  z-index: 10;
  overflow: hidden;
}

#mp360-nav .hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#mp360-nav .menu-toggle:hover .hamburger,
#mp360-nav .menu-toggle.opened .hamburger { opacity: 1; }

#mp360-nav .menu-bar {
  position: absolute;
  width: 15px;
  height: 1.5px;
  background: var(--white);
  transition-property: transform;
  transition: all 250ms ease-out;
}

#mp360-nav .menu-bar[data-position="top"] { transform: translateY(-3px); }
#mp360-nav .menu-bar[data-position="bottom"] { transform: translateY(3px); }

#mp360-nav .menu-toggle.opened .menu-bar[data-position="top"] {
  transform: translateY(0) rotate(45deg) scaleX(1.05);
}

#mp360-nav .menu-toggle.opened .menu-bar[data-position="bottom"] {
  transform: translateY(0) rotate(-45deg) scaleX(1.05);
}

#mp360-nav .menu-toggle:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* ==========================================================================
   Menú overlay — Nav.css portado
   ========================================================================== */

#mp360-nav .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* Alto UTIL real publicado por el anfitrion (ver `publicarViewport` en
     mp360.js). `100dvh` queda de respaldo para cuando no haya
     `visualViewport`. Con `100svh` el panel terminaba por debajo del borde
     visible en iOS y el ultimo renglon del bloque institucional se cortaba. */
  height: var(--mp360-vv-h, 100dvh);
  clip-path: circle(0% at 50% 50%);
  background-color: var(--primary-950);
  overflow: hidden;
  padding: 1rem;
  z-index: 100;
  pointer-events: none;
}

#mp360-nav .menu-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  /* EL MENU NO SCROLLEA. Es una regla del proyecto, no una preferencia: un
     menu de navegacion tiene que mostrar todos sus destinos de una vez.
     Cuando el alto util no alcanza, lo que cede es la ESCALA de la
     composicion —ver las clases `mp360-vv--corto` mas abajo—, nunca el
     acceso al contenido. */
  overflow: hidden;
  background-color: var(--primary-900);
  /* referencia: 2rem. El Design System define --radius-prominent para una
     superficie de este tamaño; el radio lo manda el DS, no la plantilla. */
  border-radius: var(--radius-modal);
  padding-top: calc(var(--ann-h) + env(safe-area-inset-top, 0));
}

#mp360-nav .menu .col {
  position: relative;
  display: flex;
}

/* --------------------------------------------------------------------------
   Reparto del alto — Nav.css

   El wrapper es una columna con `space-between`, y las dos zonas se reparten
   el alto en la proporcion del recurso: destinos 3, grupo secundario 2.

   Antes todo vivia dentro de `col-1` con `justify-content: center`: los cuatro
   destinos y las dos CTA quedaban apilados en un bloque en el medio de la
   pantalla, con dos vacios simetricos arriba y abajo. Esa es la composicion
   que no representaba al recurso.
   -------------------------------------------------------------------------- */
#mp360-nav .menu .col-1 {
  flex: 3;
  padding: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#mp360-nav .menu .col-2 {
  flex: 2;
  padding: 2rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1.5rem;
}

/* Nav.css no separa los destinos con `gap`: el aire lo da el propio
   `line-height` del titulo. Se conserva. */
#mp360-nav .menu .links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Grupo secundario — `.socials` de Nav.css

   En el recurso son los bloques de contacto; en Jacarandá son las dos
   acciones, que es el contenido secundario real de este menu. La geometria es
   la del recurso: `.socials` en fila con sub-columnas, y por debajo de 1000px
   en columna al ancho completo y alineado a la izquierda.

   Lo unico que NO se porta es el `padding-bottom: 10rem` del recurso: alli
   existe para esquivar el boton de menu, que Terrene ancla abajo al centro.
   Aca el boton vive en el TopBar, arriba: ese padding solo dejaria un vacio.
   -------------------------------------------------------------------------- */
#mp360-nav .menu .socials {
  width: 100%;
  display: flex;
  gap: 2em;
  flex: 0 0 auto;
}

#mp360-nav .menu .socials .sub-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
}

#mp360-nav .menu .socials .btn { margin: 0; }

#mp360-nav .menu .link {
  position: relative;
  pointer-events: auto;
}

#mp360-nav .menu .link a,
#mp360-nav .menu .link button {
  display: block;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* CAUSA DEL RECORTE DE LA "G" DE AGOSTINI

   `.split-line` lleva `overflow: hidden` —es la mascara que hace la
   revelacion— y su alto es el del line-box. Con `line-height: 1.2` sobre
   Manrope a 36px el line-box mide 43.2px y el descendente de la G se sale por
   abajo: la mascara lo corta.

   Se sube el line-box hasta contener la tipografia completa. No se toca el
   tamano ni el peso, y la mascara sigue siendo la del recurso. */
#mp360-nav .menu .link h2 {
  text-decoration: none;
  color: var(--neutral-300);
  font-family: "Manrope", sans-serif;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  pointer-events: auto;
  transition: color 0.3s ease-out;
}

#mp360-nav .menu .link a:hover h2,
#mp360-nav .menu .link button:hover h2,
#mp360-nav .menu .link button:focus-visible h2 { color: var(--white); }

#mp360-nav .menu .link button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: var(--radius-micro-surface);
}

/* Variante de Nav.css por debajo de 1000px: el grupo secundario pasa a
   columna, ocupa todo el ancho y se alinea a la izquierda. */
@media (max-width: 1000px) {
  #mp360-nav .menu .col-2 {
    flex-direction: column;
    align-items: flex-start;
    /* El recurso apoya el grupo secundario contra el borde inferior de su
       columna (`.sub-col { justify-content: flex-end }`). Con seis destinos su
       `col-1` queda casi llena y esa intencion se lee sola; con los cuatro de
       Jacarandá hay que declararla, o el aire sobrante se parte en dos huecos
       —uno dentro de `col-1` y otro debajo de las CTA— en vez de leerse como
       la separacion deliberada entre los dos grupos. */
    justify-content: flex-end;
  }

  #mp360-nav .menu .socials {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;                  /* la separacion la da `sub-col + sub-col` */
  }

  #mp360-nav .menu .socials .sub-col { flex: 0 0 auto; width: 100%; }

  /* Aire inferior seguro: el ultimo renglon no puede quedar contra el borde
     del panel ni debajo de la barra del navegador. */
  #mp360-nav .menu .col-2 {
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem));
  }
}

/* --------------------------------------------------------------------------
   Cierre global del menu

   Mismo patron que el cierre de las superficies (mp360-superficie.css): mismo
   tamano, mismo radio, misma esquina, mismo objetivo tactil. Vive DENTRO del
   overlay porque el boton del TopBar queda tapado por el.
   -------------------------------------------------------------------------- */
#mp360-nav .menu-close {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(21, 21, 21, 0.10);
  /* El MISMO cierre que las demas superficies: cuadrado redondeado de 8px.
     En el scope de #mp360-nav la receta `--radius-icon-button` vale el
     circulo, que es para icon-buttons reales; este control es el cierre de un
     modal y ya existe uno en uso en mp360-superficie.css. Se iguala a ese en
     vez de inventar una segunda forma. */
  border-radius: var(--radius-control);
  color: var(--neutral-950);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.3s var(--mp360-ease-ui, ease),
              border-color 0.3s var(--mp360-ease-ui, ease);
}

@media (hover: hover) and (pointer: fine) {
  #mp360-nav .menu-close:hover {
    background: var(--primary-50);
    border-color: var(--primary-700);
  }
}

#mp360-nav .menu-close:active { background: var(--primary-50); }

#mp360-nav .menu-close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

#mp360-nav .menu-close__icon { width: 1.125rem; height: 1.125rem; display: block; }
#mp360-nav .menu-close__icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Acciones comerciales dentro del menu

   Van en `col-2`, encima de la zona institucional. Ancho completo de su
   columna para que no dependan del largo del rotulo, y `flex: 0 0 auto` para
   que no deformen el bloque de contacto de abajo.
   -------------------------------------------------------------------------- */
#mp360-nav .menu .menu-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  flex: 0 0 auto;
}

#mp360-nav .menu .menu-acciones .btn { margin: 0; width: 100%; }

/* --------------------------------------------------------------------------
   Zona institucional — `.menu-meta` de Nav.css

   El recurso la esconde por debajo de 1000px (`.menu-commissions`). Aca NO se
   puede: este menu SOLO existe por debajo de 1130px, asi que esconderla seria
   no tenerla nunca. Es tambien lo que pidio el proyecto explicitamente.

   Los datos salen de `360/locale/es.txt`, que es lo que la experiencia ya
   publica. El domicilio y el correo no se inventaron.
   -------------------------------------------------------------------------- */
/* Separacion entre el rotulo del bloque y sus valores, y entre los dos
   bloques. Antes los dos grupos se leian como una sola lista corrida. */
#mp360-nav .menu .socials .sub-col + .sub-col { margin-top: 1.25rem; }

#mp360-nav .menu .menu-meta { color: var(--neutral-300); }

#mp360-nav .menu .socials .sub-col p {
  position: relative;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Primer parrafo del bloque: es el rotulo del grupo, no un dato. */
#mp360-nav .menu .menu-meta p:nth-child(1) {
  color: var(--neutral-500, #939393);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  font-weight: 600;
}

#mp360-nav .menu .menu-meta a {
  color: var(--neutral-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 212, 212, 0.32);
  transition: color 0.3s var(--mp360-ease-ui, ease),
              border-color 0.3s var(--mp360-ease-ui, ease);
}

#mp360-nav .menu .menu-meta a:hover,
#mp360-nav .menu .menu-meta a:focus-visible {
  color: var(--white);
  border-color: var(--white);
}

#mp360-nav .menu .menu-meta a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* máscara de SplitText — Nav.css */
#mp360-nav .split-line {
  overflow: hidden;
  will-change: transform;
  pointer-events: auto;
}

#mp360-nav .menu .btn { pointer-events: auto; }

/* ==========================================================================
   Contrato responsive
   Desktop: barra completa. Por debajo del breakpoint los ítems dejan de
   respirar y la composición pasa a TopBar + overlay. El valor sale de medir
   el ancho real del contenido, no de una lista de dispositivos.
   ========================================================================== */

#mp360-nav .top-bar,
#mp360-nav .menu { display: none; }

/* --------------------------------------------------------------------------
   ESCRITORIO COMPACTO — de 1024 a 1197.98px

   El breakpoint estaba en 1198 y eso dejaba a cualquier notebook de 13" o 14"
   con el menu hamburguesa teniendo espacio de sobra. La causa NO era falta de
   ancho: era el modelo de columnas.

   Medido a 1280: izquierda 361px, centro 364, derecha 216. Suman 941. Pero
   `1fr auto 1fr` obliga a que las dos columnas laterales midan lo MISMO, asi
   que la barra le reserva 402 a cada lado y desperdicia los 145px que la
   derecha no usa. El requisito real pasaba de 941 a 2x361 + 364 = 1086, y con
   paddings y gaps trepaba a ~1150: por eso colisionaba cerca de 1198.

   Acá cada zona toma su ancho natural y el sobrante va al carril del centro,
   que sigue centrando su grupo dentro de ese carril. El centrado exacto
   respecto del viewport se conserva de 1198 para arriba, que es la
   composicion aprobada y no se toca.

   Lo que cede es AIRE, nunca tipografia ni objetivo tactil:
     padding lateral   32 -> 20     separacion entre zonas  24 -> 20
     entre items       40 -> 24     aire del rotulo del CTA 20 -> 16
   Con esos valores el contenido pide 973px y a 1024 sobran 51.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1197.98px) {
  #mp360-nav .mp360-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    padding: 0 1.25rem;
  }

  /* El grupo sigue centrado, ahora dentro del carril que le queda. */
  #mp360-nav .mp360-bar__items {
    gap: 1.5rem;
    justify-content: center;
  }

  /* Aire a los lados del rotulo del CTA, no su cuerpo tipografico. */
  #mp360-nav .mp360-bar .btn { --btn-gap: 1rem; }

  /* El separador entre el logo y el CTA pierde margen, no presencia. */
  #mp360-nav .mp360-bar__divider { margin-inline: 0.75rem; }
}

/* Breakpoint derivado del contenido, no de una lista de dispositivos.

   1024px es el ancho por debajo del cual la barra completa deja de entrar:
   el contenido de la variante compacta pide 973px y por debajo de 1024 el aire
   restante cae por debajo de lo que el sistema considera separacion entre
   grupos. Coincide ademas con el ancho de una tablet apaisada, que a partir de
   ahi recibe la navegacion completa.

   No se detecta sistema, marca ni pulgadas: sólo el ancho CSS disponible. */
@media (max-width: 1023.98px) {
  #mp360-nav .mp360-bar { display: none; }
  #mp360-nav .top-bar { display: flex; }
  #mp360-nav .menu { display: block; }
}

/* Altura reducida (móvil apaisado): la franja superior no puede comerse el
   panorama. Se compacta y el overlay recupera aire. */
/* --------------------------------------------------------------------------
   Altura reducida — apaisado

   Apilar las dos zonas pedia 535px de contenido en 328px de caja: el
   `overflow: hidden` del overlay dejaba las CTA y el bloque de contacto fuera
   de alcance, sin scroll y sin aviso.

   Con esta altura sobra ANCHO, asi que las dos columnas vuelven a ponerse
   lado a lado —que es lo que hace el recurso por encima de 1000px— y el alto
   necesario cae a la mitad. El scroll del wrapper queda como ultima red, no
   como solucion.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 560px) {
  #mp360-nav .menu-wrapper {
    flex-direction: row;
    gap: 1rem;
  }

  #mp360-nav .menu .col-1 { flex: 1.2; justify-content: center; }
  #mp360-nav .menu .col-2 {
    flex: 1;
    justify-content: center;
    gap: 1rem;
    /* aire para que el cierre no se apoye sobre el contenido */
    padding-right: calc(2.75rem + 1.5rem);
  }

  #mp360-nav .menu .socials { flex-direction: row; gap: 1.25rem; }
  #mp360-nav .menu .socials .sub-col { gap: 0.25rem; }
}

@media (max-height: 460px) {
  #mp360-nav { --ann-h: 26px; }
  #mp360-nav .mp360-ann__msg { font-size: 0.75rem; }
  #mp360-nav .top-bar { padding: 0.375rem 1rem; }
  #mp360-nav .top-bar .top-bar-logo img { height: 26px; }
  /* Los dos controles conservan su objetivo tactil: en altura reducida lo que
     cede es el aire de la barra, no el target. */
  #mp360-nav .menu .link h2 { font-size: 1.375rem; }
  #mp360-nav .menu .col-1 { padding: 0.75rem 1.5rem; }
  #mp360-nav .menu .col-2 { padding: 0.75rem 1.5rem; }
  #mp360-nav .menu .socials .sub-col { gap: 0.5rem; }
  #mp360-nav .menu .menu-meta p:nth-child(1) { margin-bottom: 0.25rem; }
  #mp360-nav .menu .socials .sub-col p { font-size: 0.75rem; }
}

/* Alturas cortas en VERTICAL (telefonos chicos): no hay ancho para dos
   columnas, asi que el wrapper se queda con el unico scroll deliberado. */
/* --------------------------------------------------------------------------
   ALTURA UTIL REDUCIDA — la composicion se compacta, nunca scrollea

   Las clases las publica el anfitrion desde `visualViewport` (ver
   `publicarViewport` en mp360.js), no una media query: `@media (max-height)`
   mide el viewport de layout, y en iOS ese es mas alto que el que el usuario
   ve. Reaccionar al de layout dejaba el ultimo renglon fuera.

   Lo que cede es la escala del titular y el aire; los cuatro destinos, las dos
   acciones y los datos de contacto siguen todos a la vista.
   -------------------------------------------------------------------------- */
.mp360-vv--corto #mp360-nav .menu-wrapper { gap: 1rem; }
.mp360-vv--corto #mp360-nav .menu .col-1 { padding: 1.5rem 2rem 0; }
.mp360-vv--corto #mp360-nav .menu .col-2 { padding: 0 2rem 1.5rem; gap: 1rem; }
.mp360-vv--corto #mp360-nav .menu .link h2 { font-size: 1.875rem; }
.mp360-vv--corto #mp360-nav .menu .socials .sub-col + .sub-col { margin-top: 0.875rem; }
.mp360-vv--corto #mp360-nav .menu .menu-acciones { gap: 0.5rem; }

.mp360-vv--muy-corto #mp360-nav .menu-wrapper { gap: 0.75rem; }
.mp360-vv--muy-corto #mp360-nav .menu .col-1 { padding: 1.25rem 1.5rem 0; }
.mp360-vv--muy-corto #mp360-nav .menu .col-2 { padding: 0 1.5rem 1.25rem; gap: 0.75rem; }
.mp360-vv--muy-corto #mp360-nav .menu .link h2 { font-size: 1.625rem; }
.mp360-vv--muy-corto #mp360-nav .menu .socials .sub-col p { font-size: 0.75rem; }
.mp360-vv--muy-corto #mp360-nav .menu .socials .sub-col + .sub-col { margin-top: 0.625rem; }
.mp360-vv--muy-corto #mp360-nav .menu .menu-meta p:nth-child(1) { margin-bottom: 0.25rem; }

/* El menú abierto bloquea el gesto del panorama. */
#mp360-nav.mp360-nav--menu-open .menu { pointer-events: auto; }

/* ==========================================================================
   prefers-reduced-motion — pedido explícito para la announcement bar
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #mp360-nav .mp360-ann__msg { transition: none !important; }
  #mp360-nav .mp360-navitem__layer { transition: none; }
}