* {
      font-family: 'Montserrat', Helvetica, Arial, sans-serif;
      box-sizing: border-box;
    }

    body {
      background-color: #84d1fe;
      margin: 0;
      padding: 0;
    }

    .grid-template-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min-content, 20rem));
      gap: 2rem;
      justify-content: center;
      align-items: start;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: rgb(102, 123, 106);
      box-shadow: 0 0 0 2px rgba(102, 123, 106, 0.2);
    }

    button {
      font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    }

    /* ====== MENU DROPDOWN ====== */
    .menu-dropdown-container {
      position: absolute;
      z-index: 3000;
      right: 20px;
      top: calc(100% + 8px);
      /* Aparece 8px debajo del contenedor padre */
      transform-origin: right top;
      display: none;
      /* hidden by default */
    }

    .menu-dropdown-container.menu-open {
      display: block;
    }

    /* Profile dropdown específico */
    #profileDropdown.menu-dropdown-container {
      position: absolute;
      top: calc(100% + 16px);
      right: 0;
      width: 320px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
      padding: 6px;
      border-radius: 18px;
      background: white;
      box-shadow: 0px 20px 20px -10px rgba(23,23,23,0.04),0px 10px 10px -5px rgba(23,23,23,0.04),0px 6px 6px -3px rgba(23,23,23,0.04),0px 3px 3px -1.5px rgba(23,23,23,0.04),0px 1px 1px -0.5px rgba(23,23,23,0.04),0px 0px 0px 1px rgba(23,23,23,0.08);
      z-index: 3001;
      visibility: hidden;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #profileDropdown.menu-dropdown-container.menu-open {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    /* Hover effects para menu items */
    #profileDropdown .menu-item , #profileDropdown .logout-item {
      transition: all 0.2s ease;
      cursor: pointer;
    }

    #profileDropdown .menu-item:hover, #profileDropdown .logout-item:hover {
      background: #f8fafc !important;
      transform: translateX(2px);
    }



    /* Logout especial */
    #profileDropdown .logout-item:hover {
      background: #fef2f2 !important;
    }

    #profileDropdown .logout-item:hover svg {
      color: #dc2626 !important;
    }

    #profileDropdown .logout-item:hover > div:last-child,
    #profileDropdown .logout-item:hover div[style*="color:#dc2626"] {
      color: #dc2626 !important;
    }

    /* Hover effect para botón hamburguesa */
    button[onclick="toggleMenu()"] {
      transition: all 0.2s ease;
    }

    button[onclick="toggleMenu()"]:hover {
      background: #f8fafc !important;
      transform: scale(1.05);
    }

    button[onclick="toggleMenu()"] span span {
      transition: all 0.3s ease !important;
    }

    button[onclick="toggleMenu()"]:hover span span {
      background: #64748b !important;
      width: 20px !important;
      right: 0 !important;
    }

    /* Animación para cambio de idioma */
    #lang-indicator {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #lang-es, #lang-en {
      transition: all 0.3s ease !important;
    }

    #lang-es svg, #lang-en svg {
      transition: all 0.3s ease !important;
    }

    #lang-es span, #lang-en span {
      transition: all 0.3s ease !important;
    }

    #profileDropdown.menu-dropdown-container::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0px -1px 1px -0.5px rgba(23,23,23,0.06);
    }

    /* Sobreescribir estilos para profile dropdown */
    #profileDropdown .menu-dropdown-content {
      padding: 0;
      border-radius: 0;
      width: 100%;
      overflow-y: visible;
      background-color: transparent;
      box-shadow: none;
      color: inherit;
      font-family: inherit;
    }

    #profileDropdown .menu-dropdown-content ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: left;
    }

    .menu-dropdown-content {
      padding: 0.5rem 0.25rem;
      border-radius: 0.25rem;
      width: 14rem;
      overflow-y: auto;
      background-color: rgb(239, 235, 230);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
      color: rgb(98, 84, 65);
      font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    }

    .menu-dropdown-content ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;
      font-weight: 600;
    }

    .menu-dropdown-content li {
      margin-bottom: 0.1rem;
    }

    .menu-dropdown-content li a,
    .menu-dropdown-content li button {
      display: block;
      width: 100%;
      height: 1.75rem;
      line-height: 1.75rem;
      padding: 0 0.15rem;
      border-radius: 0.2rem;
      text-decoration: none;
      color: rgb(98, 84, 65);
      font-weight: 600;
      font-size: 0.8rem;
      font-family: 'Montserrat', Helvetica, Arial, sans-serif;
      background: transparent;
      border: none;
      cursor: pointer;
      box-sizing: border-box;
      transition: background-color 0.15s, color 0.15s;
    }

    .menu-dropdown-content li a:hover,
    .menu-dropdown-content li button:hover {
      background-color: rgb(128, 111, 86);
      color: white;
    }

    /* ====== PROJECT SELECTOR (logo dropdown) ====== */
    .logo-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 28px;
      background: var(--brand-soft-2);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.2s ease;
    }
    .logo-trigger:hover {
      background: var(--brand-soft-3);
    }
    .logo-trigger .chevron-icon {
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .logo-trigger.is-open .chevron-icon {
      transform: rotate(180deg);
    }

    .project-selector {
      position: absolute;
      left: 0;
      top: calc(100% + 12px);
      z-index: 3000;
      display: flex;
      gap: 8px;
      padding: 8px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow:
        0 5px 5px rgba(0, 0, 0, 0.03),
        0 18px 9px rgba(0, 0, 0, 0.03),
        0 41px 12.5px rgba(0, 0, 0, 0.02),
        0 73px 14.5px rgba(0, 0, 0, 0.01);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(-50px) translateY(-10px) scale(0.94);
      transform-origin: top left;
      transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.4s;
    }
    .project-selector.projects-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0) translateY(0) scale(1);
      transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
    }

    .project-card {
      position: relative;
      width: 175.587px;
      height: 252px;
      border: none;
      padding: 0;
      margin: 0;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      background: #f6f5f3;
      transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.32s ease,
        box-shadow 0.32s ease;
      opacity: 0;
      transform: translateY(8px);
    }
    .project-selector.projects-open .project-card {
      opacity: 1;
      transform: translateY(0);
      transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay, 0s),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--card-delay, 0s),
        filter 0.32s ease,
        box-shadow 0.32s ease;
    }
    .project-card:nth-child(1) { --card-delay: 0.05s; }
    .project-card:nth-child(2) { --card-delay: 0.1s; }
    .project-card:nth-child(3) { --card-delay: 0.15s; }

    .project-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
    .project-card:not(.active) {
      filter: grayscale(1) brightness(0.86) contrast(0.95);
    }
    .project-card:not(.active):hover {
      filter: grayscale(0.25) brightness(0.96);
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }
    .project-card.active {
      cursor: default;
      box-shadow: 0 0 0 2px var(--brand-ring);
    }

    /* Mobile responsive */
    @media only screen and (max-width: 600px) {
      .menu-dropdown-container {
        right: 0;
        left: 0;
        width: auto;
      }
      .menu-dropdown-content {
        width: 100%;
      }
      .project-selector {
        left: 50%;
        transform: translateX(calc(-50% - 30px)) translateY(-10px) scale(0.94);
        transform-origin: top center;
      }
      .project-selector.projects-open {
        transform: translateX(-50%) translateY(0) scale(1);
      }
      .project-card {
        width: 110px;
        height: 158px;
      }
    }

    @keyframes advisorPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.85; transform: scale(1.02); }
    }
    @keyframes advisorDot {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
      50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    }
    .advisor-live { animation: advisorPulse 2.4s ease-in-out infinite; }
    .advisor-dot { animation: advisorDot 1.6s ease-in-out infinite; }
    .live-viewers { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

    /* ============================================
       FIGMA DESIGN — HERO, FILTERS, UNITS, TOGGLE
       ============================================ */

    /* BRAND COLOR (per active project) — overridden via JS on project switch */
    @property --brand         { syntax: '<color>'; initial-value: #074540;                        inherits: true; }
    @property --brand-soft    { syntax: '<color>'; initial-value: rgba(7, 69, 64, 0.10);       inherits: true; }
    @property --brand-soft-2  { syntax: '<color>'; initial-value: rgba(7, 69, 64, 0.08);       inherits: true; }
    @property --brand-soft-3  { syntax: '<color>'; initial-value: rgba(7, 69, 64, 0.18);       inherits: true; }
    @property --brand-ring    { syntax: '<color>'; initial-value: rgba(7, 69, 64, 0.45);       inherits: true; }
    @property --brand-overlay { syntax: '<color>'; initial-value: rgba(7, 69, 64, 0.78);       inherits: true; }

    :root {
      --brand:         #074540;
      --brand-soft:    rgba(7, 69, 64, 0.10);
      --brand-soft-2:  rgba(7, 69, 64, 0.08);
      --brand-soft-3:  rgba(7, 69, 64, 0.18);
      --brand-ring:    rgba(7, 69, 64, 0.45);
      --brand-overlay: rgba(7, 69, 64, 0.78);
      /* Separación de la píldora Grid/Lista/Plano al borde inferior cuando
         flota (ver .fg-toggle-bar.is-floating). */
      --fg-float-gap: 24px;
      transition:
        --brand         0.9s ease,
        --brand-soft    0.9s ease,
        --brand-soft-2  0.9s ease,
        --brand-soft-3  0.9s ease,
        --brand-ring    0.9s ease,
        --brand-overlay 0.9s ease;
    }

    /* Logo transition animations */
    .logo-img {
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .logo-img.switching {
      opacity: 0;
      transform: scale(0.95) translateY(-2px);
    }

    /* Logo section for smooth movement */
    .logo-section {
      transition: gap 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Logo container smooth width transition */
    .logo-container {
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                  margin-right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      width: auto;
      min-width: 60px;
      max-width: 180px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    /* Button smooth position adjustment */
    .logo-trigger {
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  margin-left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Button animation when switching projects */
    .logo-trigger.switching {
      animation: buttonSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes buttonSlide {
      0% {
        transform: translateX(0) scale(1);
      }
      25% {
        transform: translateX(-3px) scale(0.95);
      }
      50% {
        transform: translateX(3px) scale(1.05);
      }
      75% {
        transform: translateX(-2px) scale(0.98);
      }
      100% {
        transform: translateX(0) scale(1);
      }
    }

    /* Button hover effect enhancement */
    .logo-trigger:hover:not(.switching) {
      animation: buttonPulse 2s ease-in-out infinite;
    }

    @keyframes buttonPulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    /* Fallback for browsers without @property: explicit transitions on consumers */
    @supports not (background: rgb(from white r g b)) {
      .logo-trigger,
      .logo-trigger svg,
      .fg-toggle button,
      .fg-btn-info,
      .fg-btn-cta,
      .project-card,
      .fg-card-availability,
      .fg-card-price .price,
      .fg-card-price .reserve,
      .fg-card-status-overlay,
      .fg-hero-text {
        transition: background-color 0.6s ease, background 0.6s ease, color 0.6s ease,
                    fill 0.6s ease, stroke 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease;
      }
    }

    /* HERO — layered composition (sky | text | building | clouds) */
    .fg-hero {
      position: relative;
      width: 100%;
      aspect-ratio: 1366 / 670;
      overflow: hidden;
      background: #cfe7f5; /* fallback sky tone in case image not yet loaded */
      isolation: isolate;
    }
    .fg-hero-layer {
      position: absolute;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
    .fg-hero-sky {
      top: 0;
      z-index: 1;
    }
    .fg-hero-building {
      position: absolute;
      left: 0;
      width: 100%;
      height: auto;
      bottom: -4%;
      z-index: 3;
      display: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      opacity: 0;
      transform: translateY(105%);
    }
    /* Wordmark del hero: marca pequeña encima del nombre grande del lugar.

       ⚠️ EL TAMAÑO DEL NOMBRE NO SALE DE AQUÍ: lo escribe fitHeroWordmark()
       (script al final de home.blade.php) para que la palabra ocupe siempre la
       misma fracción del encuadre y quede centrada, mida lo que mida — "LAS
       TERRENAS", "NAVIVA" o "LIV". Antes era `clamp(80px, 22vw, 260px)` con
       `nowrap`: con once letras y 0.2em de tracking la palabra medía casi el
       doble del ancho de la ventana y se salía por los dos lados. El recorte
       no era una decisión de diseño, era el sobrante. El `font-size` de abajo
       es sólo la semilla del primer frame (y lo que queda si el JS no corre).

       Ya no hay `mix-blend-mode` ni `will-change` acá: el blend costaba una
       relectura del fondo por frame y el matiz que aportaba ahora viene puesto
       directo en el color del degradado de .fg-hero-word. */
    .fg-hero-text {
      position: absolute;
      left: 0;
      right: 0;
      top: 19%;
      z-index: 2;
      display: none;
      text-align: center;
      padding-inline: 4vw;
      font-family: 'Antonio', sans-serif;
      font-weight: 700;
      font-size: 150px;
      line-height: 0.94;
      /* Acá vivía mix-blend-mode: luminosity. Sobre un texto de 150px obliga a
         releer el fondo y mezclar píxel por píxel en CADA frame, y con la
         entrada de 1.6s más el translateX de 0.8s del slider encima era la
         causa principal del tirón. El matiz que aportaba el blend ahora viene
         puesto en el color del degradado de .fg-hero-word. */
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transform: translateY(-180%);
    }
    /* La palabra grande. El degradado de relleno vive aquí y no en el
       contenedor: recortado contra los dos trozos a la vez, la rampa se
       repartía entre marca y nombre y la marca salía casi opaca.

       `inline-block` y no `block`: tiene que ajustarse al texto para que
       fitHeroWordmark() pueda medirlo. En block ocupa todo el ancho del
       contenedor y la medida devuelve el encuadre, no la palabra. */
    .fg-hero-word {
      display: inline-block;
      letter-spacing: 0.2em;
      /* El tracking se añade DETRÁS de la última letra. Sin descontarlo la
         palabra se apoya medio espacio a la derecha del centro óptico — es la
         razón de ser del viejo `text-indent: 0.2em` del media query de móvil. */
      margin-right: -0.2em;
      background: linear-gradient(to bottom,
        rgba(230,245,255,0.78) 0%,
        rgba(230,245,255,0.64) 48%,
        rgba(230,245,255,0.32) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
    }
    /* Marca pequeña encima del nombre grande (p. ej. "BAHÍA MAR"). Tamaño
       propio, NO relativo al nombre: atado a un `em` del nombre crecía hasta
       competir con él. */
    .fg-hero-sub {
      display: block;
      font-family: 'Antonio', sans-serif;
      font-weight: 600;
      font-size: clamp(11px, 1.05vw, 17px);
      line-height: 1;
      letter-spacing: 0.42em;
      margin-right: -0.42em;   /* mismo centrado óptico que la palabra */
      margin-bottom: 1.05em;
      color: rgba(255, 255, 255, 0.80);
      -webkit-text-fill-color: rgba(255, 255, 255, 0.80);
      background: none;
      white-space: nowrap;
    }
    /* Active project: visible + entrance animation */
    .fg-hero[data-active="makai"]  .fg-hero-text[data-project="makai"],
    .fg-hero[data-active="naviva"] .fg-hero-text[data-project="naviva"],
    .fg-hero[data-active="liv"]    .fg-hero-text[data-project="liv"],
    .fg-hero-text.is-exiting {
      display: block !important;
    }
    .fg-hero[data-active="makai"]  .fg-hero-building[data-project="makai"],
    .fg-hero[data-active="naviva"] .fg-hero-building[data-project="naviva"],
    .fg-hero[data-active="liv"]    .fg-hero-building[data-project="liv"],
    .fg-hero-building.is-exiting {
      display: block !important;
    }
    .fg-hero[data-active="makai"]  .fg-hero-text[data-project="makai"]:not(.is-exiting),
    .fg-hero[data-active="naviva"] .fg-hero-text[data-project="naviva"]:not(.is-exiting),
    .fg-hero[data-active="liv"]    .fg-hero-text[data-project="liv"]:not(.is-exiting) {
      animation: hero-text-enter 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
    }
    .fg-hero[data-active="makai"]  .fg-hero-building[data-project="makai"]:not(.is-exiting),
    .fg-hero[data-active="naviva"] .fg-hero-building[data-project="naviva"]:not(.is-exiting),
    .fg-hero[data-active="liv"]    .fg-hero-building[data-project="liv"]:not(.is-exiting) {
      animation: hero-building-enter 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
    }
    /* Exit: prev active sliding down */
    .fg-hero-text.is-exiting,
    .fg-hero-building.is-exiting {
      animation: hero-exit-down 0.7s cubic-bezier(0.55, 0, 0.85, 0) forwards !important;
    }
    .fg-hero::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 6%;
      background: linear-gradient(to top,
        #ffffff 0%,
        rgba(255,255,255,0.92) 35%,
        rgba(255,255,255,0.45) 70%,
        rgba(255,255,255,0) 100%);
      pointer-events: none;
      z-index: 5;
    }
    .fg-hero-spacer {
      height: 4%;
      margin-top:-10px;
      background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%);
    }
    #main-unit-reserve-list{
      margin-top: -10px;
    }

    /* HERO — MÓVIL/TABLET: con 1366/670 el encuadre se queda en una franja de
       nada en pantallas estrechas y aplasta la villa. Se le da un alto de
       retrato propio.

       El alto vive en --hero-h porque de él cuelgan DOS cosas que tienen que
       ir a la par: el encuadre (que en el carrusel lo fija .fg-stage, no
       .fg-hero) y el ancho de la villa. */
    @media (max-width: 768px) {
      :root {
        --hero-h: clamp(360px, 54vh, 560px);
        /* En vw y no en %, aunque el hero ocupe el ancho de la ventana: así es
           una longitud de verdad y la puede usar también .fg-hero-text, donde
           un % se resolvería contra el ALTO y no contra el ancho. */
        --hero-building-w: clamp(100vw, var(--hero-h) * 1.85, 138vw);
      }
      .fg-hero {
        aspect-ratio: auto;
        height: var(--hero-h);
      }
      /* Fill the whole hero with the sky so there's no seam above the building */
      .fg-hero-sky {
        top: 0;
        height: 100%;
        object-fit: cover;
      }
      /* La villa se escala contra el ALTO del encuadre, no contra el ancho de
         la ventana. Con el viejo `width:200%` el factor era el mismo a 360px
         que a 768px: en un iPad se comía el hero entero —sin cielo, sin
         wordmark, y la villa recortada por el centro—. Atado al alto, cada
         tamaño amplía lo que necesita para llenar su encuadre.

         El 138% es el tope: pasado ahí la casa deja de leerse como casa y
         queda un muro de cristal a sangre (el `width:200%` de antes recortaba
         el 50%). En un móvil —encuadre muy vertical— manda el tope y la villa
         se apoya entera en el horizonte; en una tablet manda el alto.

         El centrado va por `margin-left` y no por `transform`: el transform es
         de la animación de entrada (translateY) y pisarlo la rompe. */
      .fg-hero-building {
        width: var(--hero-building-w);
        left: 50%;
        margin-left: calc(var(--hero-building-w) / -2);
        right: auto;
        bottom: 0;
      }
      /* El tamaño del nombre lo pone fitHeroWordmark(); aquí sólo la posición
         y un tracking de marca más corto, que a 11px 0.42em ya es un renglón
         suelto en vez de una palabra.

         Se ancla ABAJO y no arriba: el nombre tiene que apoyarse en la línea
         del tejado, y esa línea se mueve con el ancho de la villa (64% del
         alto en un móvil, 43% en una tablet). Con un `top` en % había que
         elegir cuál de los dos quedaba bien. La villa mide 3.25 de ancho por 1
         de alto; dividir por 3.32 en vez de por 3.25 deja el nombre justo
         posado en el tejado, igual que en escritorio. */
      .fg-hero-text {
        top: auto;
        bottom: calc(var(--hero-building-w) / 3.32);
        padding-inline: 4vw;
      }
      .fg-hero-sub {
        letter-spacing: 0.34em;
        margin-right: -0.34em;
        margin-bottom: 0.95em;
      }
    }

    @keyframes hero-text-enter {
      0%   { transform: translateY(-180%); opacity: 0; }
      60%  { opacity: 1; }
      100% { transform: translateY(0);     opacity: 1; }
    }
    @keyframes hero-building-enter {
      0%   { transform: translateY(105%); opacity: 0; }
      40%  { opacity: 1; }
      100% { transform: translateY(0);    opacity: 1; }
    }
    @keyframes hero-exit-down {
      0%   { transform: translateY(0);    opacity: 1; }
      100% { transform: translateY(140%); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fg-hero-text,
      .fg-hero-building { animation: none !important; opacity: 1; transform: none; }
    }

    /* ░░░ HERO SLIDER ░░░
       Carrusel HORIZONTAL: el hero es la celda #0 y las imágenes del admin
       (Configuración → Slider de portada) son las celdas siguientes. El "track"
       se desplaza lateralmente con translateX para cambiar de slide. El indicador
       es una "píldora" de cristal esmerilado cuyo segmento activo se va rellenando
       marcando el tiempo hasta el próximo cambio. */
    .fg-stage { position: relative; }
    /* Con slider, la etapa fija el encuadre (mismo aspect-ratio que el hero, SIN
       max-height para que el ancho sea siempre 100%) y recorta el track que se
       desborda lateralmente. */
    .fg-stage.has-slider {
      overflow: hidden;
      aspect-ratio: 1366 / 670;
    }
    @media (max-width: 768px) {
      /* Mismo alto que .fg-hero (ver --hero-h): la etapa recorta el hero, así
         que si los dos no miden igual la villa se corta a media pared. */
      .fg-stage.has-slider { aspect-ratio: auto; height: var(--hero-h); }
    }

    /* Track horizontal: fila de celdas a 100% de ancho cada una. */
    .fg-stage.has-slider .hs-track {
      display: flex;
      height: 100%;
      transform: translateX(0);
      transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1) !important;
      will-change: transform;
    }
    .fg-stage.has-slider .hs-cell {
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    /* El hero llena su celda (la etapa ya tiene el mismo aspect-ratio). */
    .fg-stage.has-slider .hs-cell-hero .fg-hero {
      height: 100%;
      aspect-ratio: auto;
    }
    .hs-cell-img {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-color: #e6edf2; /* fallback hasta que carga la imagen */
    }
    /* Difuminación blanca inferior en las celdas de imagen — igual que el hero
       (.fg-hero::after), para que la slide se funda con el contenido de abajo. */
    .hs-cell-img::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 8%;
      background: linear-gradient(to top,
        #ffffff 0%,
        rgba(255,255,255,0.92) 35%,
        rgba(255,255,255,0.45) 70%,
        rgba(255,255,255,0) 100%);
      pointer-events: none;
    }

    /* Píldora de cristal esmerilado con segmentos — vive en la etapa (sobre el
       track) para verse siempre, en cualquier slide. */
    .hs-slider-nav {
      position: absolute;
      left: 50%;
      bottom: 6%;
      transform: translateX(-50%);
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 18px;
      border-radius: 999px;
      background: rgba(120, 124, 130, 0.34);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    }
    @media (max-width: 768px) { .hs-slider-nav { bottom: 5%; gap: 9px; padding: 9px 14px; } }

    .hs-pill-seg {
      position: relative;
      width: 9px;
      height: 9px;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.45);
      cursor: pointer;
      overflow: hidden;
      transition: width .45s cubic-bezier(0.22, 1, 0.36, 1), background .3s ease;
    }
    .hs-pill-seg:hover { background: rgba(255, 255, 255, 0.7); }
    .hs-pill-seg.is-active {
      width: 46px;
      background: rgba(255, 255, 255, 0.4);
    }
    @media (max-width: 768px) { .hs-pill-seg.is-active { width: 38px; } }

    .hs-pill-fill {
      position: absolute;
      inset: 0;
      width: 100%;
      border-radius: 999px;
      background: #ffffff;
      /* Se rellena con transform:scaleX (compuesto por la GPU) en lugar de
         animar width, que forzaría layout+repaint en cada frame. */
      transform: scaleX(0);
      transform-origin: left center;
    }
    .hs-pill-seg.is-active .hs-pill-fill {
      animation: hs-fill var(--hs-duration, 5s) linear forwards;
    }
    @keyframes hs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Nota: NO se desactiva la transición del track bajo prefers-reduced-motion,
       porque el deslizamiento lateral del carrusel es parte intencional del diseño. */

    /* FILTER BAR (v2) — encabeza la lista, alineada con la cuadrícula.
       Scrollea con la página (NO es sticky). */
    .fg-filter-bar {
      background: #f2f5f8;
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 1760px;
      margin: 0 auto;
      padding: 8px 24px 20px;
      position: relative;
      z-index: 30;
    }
    .fg-filter-bar > .fg-filters-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
      flex-wrap: wrap;
    }
    .fg-search {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 132px;
      background: #ffffff;
      border: 1px solid #ebebeb;
      border-radius: 10px;
      padding: 8px 8px 8px 10px;
      box-shadow: 0 1px 2px rgba(10,13,20,0.03);
      height: 36px;
      box-sizing: border-box;
    }
    .fg-search svg { flex-shrink: 0; }
    .fg-search input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      color: #5c5c5c;
      letter-spacing: -0.084px;
    }
    .fg-search input::placeholder { color: #a3a3a3; }
    /* Anula el recuadro de foco global (input:focus { box-shadow }) que dibujaba
       un cuadrado gris dentro de la caja redondeada del buscador de unidad. */
    .fg-search input:focus { box-shadow: none; border: 0; outline: 0; }

    .fg-filter-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 8px 8px 12px;
      background: #ffffff;
      border: 1px solid #ebebeb;
      border-radius: 10px;
      box-shadow: 0 1px 2px rgba(10,13,20,0.03);
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #5c5c5c;
      letter-spacing: -0.084px;
      cursor: pointer;
      white-space: nowrap;
      height: 36px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .fg-filter-btn:hover { background: #fafafa; border-color: #d4d4d4; }
    .fg-filter-btn .fg-caret { width: 20px; height: 20px; color: #5c5c5c; flex-shrink: 0; }
    /* Active filter — corporate border + text so it's obvious a filter is set */
    .fg-filter-btn.is-active {
      border-color: var(--brand, #074540);
      color: var(--brand, #074540);
      background: #fff;
      box-shadow: 0 0 0 1px var(--brand, #074540) inset;
    }
    .fg-filter-btn.is-active:hover { background: #fff; border-color: var(--brand, #074540); }
    .fg-filter-btn.is-active .fg-caret { color: var(--brand, #074540); }

    /* Header language toggle (ES / EN) */
    .lang-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      height: 34px;
      background: #f2f5f8;
      border-radius: 9999px;
      position: relative;
    }
    .lang-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 28px;
      padding: 0 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 9999px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.3px;
      color: #717784;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .lang-btn:hover { color: #525866; }
    .lang-btn.is-active {
      background: #2f2f37;
      color: #ffffff;
    }
    .lang-btn.is-active:hover { color: #ffffff; }

    /* Header currency dropdown items */
    .hcur-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 8px 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #374151;
      letter-spacing: -0.084px;
      transition: background-color 0.15s ease;
    }
    .hcur-item:hover { background: #f2f5f8; }
    .hcur-item .hcur-sym { color: #9ca3af; font-weight: 500; }
    /* Active search box (Unit No.) */
    .fg-search.is-active {
      border-color: var(--brand, #074540);
      box-shadow: 0 0 0 1px var(--brand, #074540) inset;
    }
    .fg-search.is-active input { color: var(--brand, #074540); }
    .fg-filter-icon {
      width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 8px;
      background: #ffffff;
      border: 1px solid #ebebeb;
      border-radius: 10px;
      box-shadow: 0 1px 2px rgba(10,13,20,0.03);
      cursor: pointer;
      color: #5c5c5c;
      flex-shrink: 0;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .fg-filter-icon:hover { background: #fafafa; border-color: #d4d4d4; }

    .fg-pill-matches {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #ebebeb;
      border-radius: 10px;
      box-shadow: 0 1px 2px rgba(10,13,20,0.03);
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 14px;
      color: var(--brand);
      cursor: pointer; white-space: nowrap; height: 36px;
      flex-shrink: 0;
    }

    /* FILTERS — desktop defaults: the group is transparent and the mobile-only
       sheet chrome (trigger, backdrop, header, footer) is hidden. */
    .fg-filters-group { display: contents; }
    .fg-filters-mobile-trigger,
    .fg-filters-backdrop,
    .fg-filters-sheet-head,
    .fg-filters-sheet-apply { display: none; }

    /* GRID/LIST TOGGLE — dos piezas SUELTAS, no una caja que las envuelva:
       la píldora blanca (Grid + List, con el activo en verde) y, separado por
       el hueco, el botón redondo del mapa flotando a su costado.
       El contenedor es solo la fila que las separa: sin fondo ni borde, o
       volvería a leerse como un único bloque gris con el mapa metido dentro. */
    .fg-toggle-container {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    /* La píldora: es ella la que lleva fondo, radio y sombra. Sin borde — en
       el diseño se despega por la sombra, no por una línea. Ojo: el `padding`
       es lo que mete la barra verde hacia dentro, y positionToggleBg() la
       coloca midiendo el botón (offsetLeft/offsetTop), así que el relleno se
       respeta solo sin tener que repetir el número en el JS. */
    .fg-toggle {
      display: inline-flex;
      align-items: stretch;
      gap: 6px;
      position: relative;
      background: #ffffff;
      border: 0;
      padding: 8px;
      border-radius: 100px;
      box-shadow: 0 6px 20px rgba(10, 13, 20, 0.10);
    }
    .fg-toggle-bg-active {
      position: absolute;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%),
        #074540;
      height: 44px;
      left: 0;
      top: 0;
      width: 90px; /* fallback antes de que el JS lo mida; sobrescrito por positionToggleBg() */
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      /* Contenida: la píldora blanca solo la separa 8px del borde, así que una
         sombra grande se sale por el canto redondeado y lo emborrona. Va corta
         y en verde de marca, para que se lea apoyada y no flotando aparte. */
      box-shadow:
        0 2px 6px -1px rgba(7, 69, 64, 0.30),
        0 1px 2px 0 rgba(7, 69, 64, 0.20);
      transition:
        left 0.32s cubic-bezier(0.22,1,0.36,1),
        width 0.32s cubic-bezier(0.22,1,0.36,1),
        opacity 0.22s ease,
        transform 0.32s cubic-bezier(0.22,1,0.36,1),
        background 0.6s ease,
        box-shadow 0.6s ease;
      z-index: 1;
      pointer-events: none;
      opacity: 1;
      transform: scale(1);
    }
    /* When Plano is active, neither Grid nor List should look selected — fade the bar out */
    .fg-toggle.plan-active .fg-toggle-bg-active {
      opacity: 0;
      transform: scale(0.85);
    }
    .fg-toggle button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: auto;
      min-width: 90px;
      white-space: nowrap;
      height: 44px;
      padding: 10px 16px;
      border: none;
      border-radius: 100px;
      background: transparent;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #7b7b7b;
      letter-spacing: -0.176px;
      cursor: pointer;
      transition: color 0.22s ease;
      position: relative;
      z-index: 2;
      line-height: 24px;
    }
    /* Only show "active" colors when Plan is NOT active. With .plan-active the bar is hidden so neither button should look selected. */
    .fg-toggle:not(.plan-active) button.active {
      color: #ffffff;
      font-weight: 500;
    }
    .fg-toggle:not(.plan-active) button.active svg { color: #ffffff; }
    .fg-toggle.plan-active button { color: #7b7b7b; }
    .fg-toggle.plan-active button svg { color: #7b7b7b; }
    .fg-toggle button:not(.active):hover { color: var(--brand, #074540); }
    .fg-toggle button:not(.active) svg { color: #7b7b7b; transition: color 0.22s ease; }
    .fg-toggle button:not(.active):hover svg { color: var(--brand, #074540); }

    /* La posición/ancho de la barra activa la calcula positionToggleBg() en JS
       midiendo el botón activo, así funciona con cualquier idioma o longitud de texto. */

    /* List view styles */
    .fg-units-grid.list-view {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    
    .fg-units-grid.list-view .fg-card {
      display: flex;
      flex-direction: row;
      height: auto;
      min-height: 200px;
    }
    
    .fg-units-grid.list-view .fg-card img {
      width: 280px;
      height: 200px;
      object-fit: cover;
    }
    
    .fg-units-grid.list-view .fg-card-content {
      flex: 1;
      padding: 20px;
    }
    /* Grid/List/Plano — sube con la página desde su sitio natural (debajo de
       los filtros) y, en cuanto la píldora llega a la línea flotante (24px del
       borde inferior), se queda ahí fija sobre el contenido. Se engancha justo
       donde estaba: no hay salto ni aparición brusca. El hueco lo conserva
       .fg-toggle-spacer. Sólo la píldora captura clics: la barra es
       transparente. */
    .fg-toggle-bar {
      display: flex;
      justify-content: center;
      padding: 28px 24px 16px;
      padding-top: 0px;
      background: transparent;
      position: relative;
      z-index: 28;
      pointer-events: none;
    }
    /* Los clics los capturan las dos piezas, NO la fila que las contiene: el
       hueco entre la píldora y el mapa deja pasar el ratón a las tarjetas. */
    .fg-toggle-bar .fg-toggle,
    .fg-toggle-bar .fg-location-button { pointer-events: auto; }

    /* Reserva el alto de la barra mientras ésta flota (lo fija el JS). */
    .fg-toggle-spacer { height: 0; }

    /* Distancia de la píldora al borde inferior. La lee el JS (vía .fg-float-probe)
       para saber exactamente dónde engancharla. */
    .fg-toggle-bar.is-floating,
    .fg-float-probe {
      bottom: calc(var(--fg-float-gap, 24px) + env(safe-area-inset-bottom, 0px));
    }
    .fg-toggle-bar.is-floating {
      position: fixed;
      left: 0;
      right: 0;
      padding: 0;
      z-index: 90;   /* por encima de lo que sigue al listado, debajo del nav */
    }
    /* Sonda invisible: su borde inferior marca la línea de enganche resuelta
       por el navegador (incluye safe-area y el media query de móvil). */
    .fg-float-probe {
      position: fixed;
      left: 0;
      width: 0;
      height: 0;
      visibility: hidden;
      pointer-events: none;
    }
    /* Flotando sobre las tarjetas necesita más contraste y elevación. Va en
       cada pieza por separado —ya no hay caja común— para que las dos suban
       igual y el hueco entre ellas siga siendo hueco de verdad. */
    .fg-toggle,
    .fg-location-button {
      transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    }
    .fg-toggle-bar.is-floating .fg-toggle,
    .fg-toggle-bar.is-floating .fg-location-button {
      background: rgba(255, 255, 255, 0.92);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      box-shadow:
        0 18px 40px -12px rgba(10, 13, 20, 0.28),
        0 4px 12px rgba(10, 13, 20, 0.10);
    }
    /* Con el bottom-sheet de filtros abierto la píldora estorba (y vive fuera
       de su stacking context): se retira. El botón de WhatsApp igual — se
       queda encima del "Ver resultados" del sheet, y subirle el z-index al
       sheet no sirve porque el FAB está en otro contexto de apilamiento. */
    body.filters-sheet-open .fg-toggle-bar.is-floating,
    body.filters-sheet-open .fg-wa-float {
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    }
    .fg-wa-float { transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; }
    /* En pantallas estrechas la píldora centrada chocaría con el botón
       flotante de WhatsApp (56px, abajo a la derecha): se sube por encima. */
    @media (max-width: 480px) {
      :root { --fg-float-gap: 92px; }
    }

    /* Botón redondo del mapa — pieza suelta, al costado de la píldora.
       Mismo relleno (8px) y mismo alto de pieza interior (44px) que la
       píldora, así los dos círculos exteriores miden igual y la fila queda
       a ras arriba y abajo. Si tocas uno, toca el otro. */
    .fg-location-button {
      background: #ffffff;
      border: 0;
      box-shadow: 0 6px 20px rgba(10, 13, 20, 0.10);
      border-radius: 100px;
      padding: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .fg-location-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 6px;
      border: none;
      border-radius: 100px;
      background: transparent;
      cursor: pointer;
      transition: background-color 0.6s ease;
    }
    .fg-location-btn:hover { background: var(--brand-soft, rgba(7, 69, 64, 0.08)); }
    .fg-icon-location {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
    }
    .fg-icon-location svg { color: var(--brand, #074540); transition: color 0.6s ease; }
    .fg-location-btn.active {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%),
        #074540;
      border: none;
      /* Misma sombra corta que la píldora verde (.fg-toggle-bg-active): las dos
         piezas están igual de metidas en su blanco, así que se apoyan igual. */
      box-shadow:
        0 2px 6px -1px rgba(7, 69, 64, 0.30),
        0 1px 2px 0 rgba(7, 69, 64, 0.20);
    }
    .fg-location-btn.active .fg-icon-location svg { color: #ffffff; }
    
    .fg-icon-grid,
    .fg-icon-list,
    .fg-icon-plan {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      overflow: hidden;
    }

    /* Empty-state — projects without units (Naviva, Liv) */
    .fg-project-empty { display: none; }
    body[data-active-project="naviva"] .fg-project-empty,
    body[data-active-project="liv"] .fg-project-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 64px 24px;
      min-height: 60vh;
    }
    body[data-active-project="naviva"] #main-unit-reserve-list .fg-toggle-bar,
    body[data-active-project="naviva"] #main-unit-reserve-list .fg-filter-bar,
    body[data-active-project="naviva"] #main-unit-reserve-list .fg-units-grid,
    body[data-active-project="naviva"] #main-unit-reserve-list .fg-list-wrap,
    body[data-active-project="naviva"] #main-unit-reserve-list .fg-plan-wrap,
    body[data-active-project="liv"]    #main-unit-reserve-list .fg-toggle-bar,
    body[data-active-project="liv"]    #main-unit-reserve-list .fg-filter-bar,
    body[data-active-project="liv"]    #main-unit-reserve-list .fg-units-grid,
    body[data-active-project="liv"]    #main-unit-reserve-list .fg-list-wrap,
    body[data-active-project="liv"]    #main-unit-reserve-list .fg-plan-wrap {
      display: none !important;
    }
    .fg-project-empty-card {
      max-width: 520px;
      width: 100%;
      background: #ffffff;
      border: 1px solid #ebebeb;
      border-radius: 24px;
      padding: 40px 32px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(10,13,20,0.04);
      font-family: 'Poppins', sans-serif;
    }
    .fg-project-empty-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--brand-soft, rgba(7,69,64,0.10));
      color: var(--brand, #074540);
    }
    .fg-project-empty-title {
      margin: 0 0 10px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: var(--brand, #074540);
    }
    .fg-project-empty-text {
      margin: 0 0 24px;
      font-size: 14px;
      line-height: 1.6;
      color: #5c5c5c;
    }
    .fg-project-empty-text span[data-empty-project-name] {
      font-weight: 600;
      color: var(--brand, #074540);
    }
    .fg-project-empty-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      background: var(--brand, #074540);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.6s ease, transform 0.15s ease;
    }
    .fg-project-empty-cta:hover { transform: translateY(-1px); }

    /* FOOTER */
    .fg-footer {
      background: #ffffff;
      border-top: 1px solid #ebebeb;
      padding: 12px 20px;
      width: 100%;
    }
    
    .fg-footer-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1318px;
      max-width: 100%;
      margin: 0 auto;
    }
    
    .fg-footer-logo {
      width: 160px;
      height: 30.171px;
      position: relative;
      flex-shrink: 0;
    }
    
    .fg-footer-copyright {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: #a3a3a3;
      line-height: 20px;
      letter-spacing: -0.084px;
      text-align: center;
      flex: 1;
      padding: 0 24px;
    }
    .fg-footer-copyright p { margin: 0; }
    @media (max-width: 700px) {
      .fg-footer-content { flex-direction: column; gap: 12px; width: 100%; }
      .fg-footer-copyright { text-align: center; padding: 0; }
      .fg-footer-social { width: auto; justify-content: center; }
      /* El pie es lo último que se ve y encima de él flotan la píldora
         Grid/Lista y el botón de WhatsApp. Sin este colchón, al llegar al
         final del scroll el copyright y los iconos sociales quedan DEBAJO de
         los dos botones y no hay forma de bajar más.

         Se mide desde --fg-float-gap (la línea donde engancha la píldora, que
         en móvil estrecho sube a 92px para esquivar el WhatsApp) más el alto
         de la propia píldora: así el colchón sigue a la píldora en vez de ser
         un número suelto que se queda corto cuando aquélla se mueve. */
      .fg-footer { padding-bottom: calc(var(--fg-float-gap, 24px) + 76px + env(safe-area-inset-bottom, 0px)); }
    }
    
    .fg-footer-social {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: flex-end;
      width: 160px;
      flex-shrink: 0;
    }
    
    .fg-social-icon {
      border: 1px solid #ebebeb;
      border-radius: 96px;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    
    .fg-social-icon:hover {
      border-color: #074540;
      background: rgba(7, 69, 64, 0.05);
    }
    
    .fg-social-icon svg {
      width: 20px;
      height: 20px;
      color: #5c5c5c;
      transition: color 0.2s ease;
    }
    
    .fg-social-icon:hover svg {
      color: #074540;
    }

    /* UNIT CARD */
    .fg-units-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      padding: 0 24px 64px 24px;
      max-width: 1760px;
      margin: 0 auto;
      align-items: start;
    }
    @media (min-width: 1600px) {
      .fg-units-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    @media (max-width: 1280px) {
      .fg-units-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .fg-units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .fg-units-grid { grid-template-columns: 1fr; }
    }

    /* El bloque central del nav —unidades vendidas, usuarios en línea y el
       contador eco— NO encoge: sus tres líneas van con `white-space:nowrap`,
       así que el `flex:0 1 auto` no puede recortarlo y por debajo de ~1100px
       se cuela por debajo del selector de moneda. Se retira en ese tramo y
       vuelve en cuanto hay sitio; a partir de 768px ya lo escondía la regla de
       móvil de aquí abajo, esto sólo cubre el hueco tablet/portátil pequeño. */
    @media (max-width: 1100px) {
      .nav-center { display: none !important; }
    }

    /* ============================================
       NAVBAR — MOBILE (leave only the essentials)
       ============================================ */
    /* Tablet: fuera el selector de moneda y el conmutador de idioma. A este
       ancho la cabecera no da de si y se comia el contador de unidades
       (Kary, 21 oct). Los dos siguen estando en el menu desplegable. */
    @media (max-width: 1100px) {
      .nav-hide-tablet { display: none !important; }
    }

    @media (max-width: 768px) {
      /* Hide currency selector, language toggle, saved counter, online-users
         line, the units-sold count and the avatar label — keep only logo,
         project switch, avatar and the hamburger. */
      .nav-hide-mobile,
      .nav-online,
      .nav-center { display: none !important; }

      /* Tighten the bar: logo + project switch on the left, avatar + menu on
         the right. The pill is a flex item inside the centered <nav>; without
         min-width:0 it keeps its max-content width and overflows the viewport,
         pushing the avatar + hamburger off-screen to the right. */
      nav { padding: 12px 10px 8px !important; box-sizing: border-box; }
      nav > div {
        gap: 8px !important;
        padding: 6px 8px 6px 10px !important;
        justify-content: space-between !important;
        min-width: 0 !important;
        box-sizing: border-box;
      }

      .logo-section { min-width: 0 !important; max-width: none !important; flex: 0 1 auto; gap: 6px !important; }
      .logo-img { max-width: 130px !important; }

      /* The project-switch chevron — give it a clearly tappable pill so it
         doesn't read as "missing" next to the logo. */
      .logo-trigger {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9999px !important;
        flex-shrink: 0;
      }

      /* Right cluster: avatar + hamburger, both always visible and tappable. */
      nav > div > div:last-child { gap: 8px !important; flex-shrink: 0; }
      nav > div > div:last-child > button[onclick*="toggleMenu"] {
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        background: var(--brand-soft-2, #e8f0ef) !important;
        flex-shrink: 0;
      }

      /* PROFILE / MENU DROPDOWN — on mobile the 320px panel is anchored to the
         avatar near the right edge, so it spills off-screen. Pin it to the
         viewport with side margins (full-width, centered) and let it scroll. */
      #profileDropdown.menu-dropdown-container {
        position: fixed !important;
        top: 74px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: 360px;
        margin: 0 auto;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        transform: translateY(-8px) !important;
      }
      #profileDropdown.menu-dropdown-container.menu-open {
        transform: translateY(0) !important;
      }
      /* The fixed-width language toggle inside the menu must fit the panel. */
      #profileDropdown div[style*="width:308px"] { width: 100% !important; }
      #profileDropdown #lang-indicator { display: none; }

      /* PROJECT SELECTOR — same problem: the cards row is anchored to the logo
         on the left and spills off the right edge. Pin it to the viewport,
         centered, and size the 3 cards to fit the row. */
      .project-selector {
        position: fixed !important;
        top: 74px !important;
        left: 12px !important;
        right: 12px !important;
        width: fit-content;
        justify-content: center;
        box-sizing: border-box;
        transform: translateY(-8px) scale(0.96) !important;
        transform-origin: top center;
      }
      .project-selector.projects-open {
        transform: translateY(0) scale(1) !important;
      }
      .project-card {
        flex: 1 1 0;
        width: auto !important;
        max-width: 112px;
        height: 158px !important;
      }
    }

    /* Very small phones — shrink the logo a touch more */
    @media (max-width: 380px) {
      .logo-img { max-width: 104px !important; }
    }
    /* CARD — v2.1 spec */
    .fg-card {
      --status-color: var(--brand);
      --status-soft: rgba(7, 69, 64, 0.10);
      --status-bg-faint: rgba(7, 69, 64, 0.04);
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-inline: auto;
      background: #ffffff;
      border-radius: 28px;
      overflow: hidden;
      isolation: isolate;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .fg-card-inner {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 6px 6px 0 6px;
      background: #ffffff;
      border-radius: 28px;
      z-index: 2;
    }
    .fg-card-img {
      position: relative;
      height: 300px;
      border-radius: 24px;
      overflow: hidden;
      background: white;
      flex-shrink: 0;
    }
    .fg-card-img > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* cover: llena todo el marco sin deformar (recorta por los lados) */
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .fg-card-img-noimage {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      color: #848484; font-family: 'Poppins', sans-serif; font-size: 12px;
    }
    /* Top row: status badge (left) + ADD TO LIST (right) */
    .fg-chip-row {
      position: absolute;
      top: 0; left: 0; right: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 8px;
      z-index: 5;
    }
    .fg-add-to-list {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 10px 8px 8px;
      border: solid 1px #e0e0e0;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.44);
      border-radius: 100px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      flex-shrink: 0;
      font-family: 'Poppins', sans-serif;
      transition: background 0.2s ease;
    }
    .fg-add-to-list:hover { background: rgba(255, 255, 255, 0.85); }
    .fg-add-to-list .heart {
      width: 20px; height: 20px;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .fg-add-to-list .heart svg { color: #5c5c5c; }
    .fg-add-to-list .text {
      display: flex; flex-direction: column; gap: 2px;
      align-items: flex-start; line-height: 1;
    }
    .fg-add-to-list .text .label {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 12px;
      line-height: 1;
      color: #5c5c5c;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .fg-add-to-list .text .meta {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 10px;
      line-height: 1;
      color: #a3a3a3;
    }

    /* When favorited: hide text, show only heart icon with animation */
    .fg-add-to-list.is-fav .text {
      display: none;
    }

    /* Spanish: always show only a circle with the heart icon (no text) */
    .fg-add-to-list.icon-only .text {
      display: none;
    }
    .fg-add-to-list.icon-only {
      padding: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
          border: solid 1px #e0e0e0;
      justify-content: center;
      align-items: center;
    }
    .fg-add-to-list.icon-only .heart {
      width: 14px;
      height: 14px;
    }
    .fg-add-to-list.icon-only .heart svg {
      width: 14px;
      height: 14px;
    }
    .fg-add-to-list.is-fav {
      padding: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      background: #e74c3c;
      border-color: #e74c3c;
    }
    .fg-add-to-list.is-fav .heart {
      width: 14px;
      height: 14px;
    }
    .fg-add-to-list.is-fav .heart svg {
      width: 14px;
      height: 14px;
    }

    /* Heart pop animation when toggled */
    @keyframes heart-pop {
      0%   { transform: scale(1); }
      25%  { transform: scale(1.35); }
      50%  { transform: scale(0.9); }
      75%  { transform: scale(1.15); }
      100% { transform: scale(1); }
    }
    .fg-add-to-list.is-fav .heart svg {
      animation: heart-pop 0.4s ease;
    }
    .fg-add-to-list .heart svg {
      transition: color 0.2s ease;
    }
    .fg-add-to-list.is-fav .heart svg {
      color: #fff;
    }
    .fg-add-to-list.is-fav {
      background: #e74c3c;
      border-color: #e74c3c;
    }
    /* Status badge (HIGH DEMAND / PENDING / 2ND CHANCE) — top-left of image */
    .fg-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px 4px 4px;
      border-radius: 100px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 10px;
      line-height: 20px;
      letter-spacing: 0.8px;
      color: #ffffff;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .fg-status-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
    .fg-status-badge.high-demand { background: #fa7319; }
    .fg-status-badge.pending     { background: #f59e0b; }
    .fg-status-badge.second      { background: #5b8def; }
    .fg-status-badge.sold        { background: #e2534e; }
    .fg-status-badge.reserved    { background: #dc2626; }
    /* Gold "RESERVE FROM $5000" banner at bottom of image */
    .fg-reserve-banner {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      padding: 6px 10px;
      background: rgb(255 255 255 / 50%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      /* mismo redondeo inferior que el marco de la imagen (.fg-card-img) */
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.96px;
      color: #ffffff;
      text-transform: uppercase;
    }
    /* Bottom status strip (HIGH DEMAND / PENDING / 2ND CHANCE / SOLD card) */
    .fg-card-status-strip {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 34px 12px 6px 12px;
      margin-top: -28px;
      border-bottom-left-radius: 28px;
      border-bottom-right-radius: 28px;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 11px;
      line-height: 20px;
    }
    .fg-card-status-strip svg { width: 16px; height: 16px; flex-shrink: 0; }
    .fg-card-status-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: auto; cursor: not-allowed;
      border-radius: 24px;
      overflow: hidden;
    }
    
    /* SOLD BADGE */
    .fg-card-status-overlay.sold {
      background: rgba(226, 83, 78, 0.12) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
    }
    
    .sold-badge {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) rotate(-8deg) !important;
      height: 90px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #e2534e !important;
      border: 1px solid rgba(255, 255, 255, 0.24) !important;
      border-radius: 32px !important;
      padding: 20px !important;
    }
    
    .sold-badge-content span {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 700 !important;
      font-size: 32px !important;
      color: white !important;
      letter-spacing: 6.4px !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }
    
    /* RESERVED BADGE */
    .fg-card-status-overlay.reserved {
      background: rgba(160, 160, 160, 0.12) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
    }
    
    .reserved-badge {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) rotate(-8deg) !important;
      height: 90px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #6b7280 !important;
      border: 1px solid rgba(255, 255, 255, 0.24) !important;
      border-radius: 32px !important;
      padding: 20px !important;
    }
    
    .reserved-badge-content span {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 700 !important;
      font-size: 32px !important;
      color: white !important;
      letter-spacing: 6.4px !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }
    
    /* PENDING BADGE */
    .fg-card-status-overlay.pending {
      background: rgba(160, 160, 160, 0.12) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
    }
    
    .pending-badge {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) rotate(-8deg) !important;
      height: 90px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #6b7280 !important;
      border: 1px solid rgba(255, 255, 255, 0.24) !important;
      border-radius: 32px !important;
      padding: 20px !important;
    }
    
    .pending-badge-content span {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 700 !important;
      font-size: 32px !important;
      color: white !important;
      letter-spacing: 6.4px !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }
    
    /* Other status badges */
    .fg-card-status-overlay:not(.sold):not(.reserved):not(.pending) span {
      color: white; 
      font-family: 'Inter', sans-serif;
      font-size: 1.5rem; 
      font-weight: 700; 
      letter-spacing: 0.15em;
    }

    .fg-card-body {
      display: flex; flex-direction: column;
      gap: 16px;
      padding: 8px;
      width: 100%;
    }
    .fg-card-head {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
    }
    .fg-card-title-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }
    .fg-card-title-row .name {
      font-family: 'Poppins', sans-serif;
      font-weight: 600; font-size: 18px;
      color: #5c5c5c; line-height: 24px;
      white-space: nowrap;
    }
    .fg-card-title-row .roi {
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: 12px;
      color: #1fc16b; line-height: 24px;
      white-space: nowrap;
    }
    .fg-card-title-row .furnished {
      font-family: 'Poppins', sans-serif;
      font-weight: 600; font-size: 11px;
      color: #8a6d3b;
      background: #faf3e6;
      border: 1px solid #ecd9b0;
      border-radius: 999px;
      padding: 2px 10px;
      line-height: 18px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .fg-card-subtitle {
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 12px;
      color: #a3a3a3; line-height: 24px;
    }
    .fg-card-divider {
      width: 100%;
      height: 1px;
      background: #ebebeb;
      margin: 4px 0;
    }
    .fg-card-price {
      display: flex; align-items: flex-end; gap: 4px;
    }
    .fg-card-price .price {
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: 24px;
      color: var(--status-color, var(--brand));
      line-height: 24px;
      white-space: nowrap;
    }
    .fg-card-price .sqft {
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 12px;
      color: #a3a3a3; line-height: 24px;
    }
    /* Discount pill — gold themed */
    .fg-discount {
      display: inline-flex;
      align-items: center; justify-content: center;
      padding: 8px;
      background: rgba(205, 150, 0, 0.08);
      border: 1px solid rgba(205, 150, 0, 0.12);
      border-radius: 6px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700; font-size: 10px;
      color: #cd9600;
      cursor: pointer;
      line-height: 1.2;
      text-align: center;
    }

    .fg-stats {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 12px;
      border: 1px solid #f2f5f8;
      border-radius: 12px;
    }
    .fg-stat {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 2px;
      flex: 1 0 0;
      min-width: 0;
      padding: 8px 0;
    }
    .fg-stat svg { width: 22px; height: 22px; color: #848484; }
    .fg-stat .v {
      font-family: 'Poppins', sans-serif;
      font-weight: 600; font-size: 10px;
      color: #848484; line-height: 24px; letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .fg-stat .v sup {
      font-size: 6.45px; vertical-align: super; line-height: 1;
    }
    .fg-stat .u {
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 8px;
      color: #848484; line-height: 1;
    }
    .fg-stat-divider {
      width: 1px;
      height: 48px;
      background: #ebebeb;
      flex-shrink: 0;
    }

    .fg-card-actions {
      display: flex; flex-direction: column; gap: 12px;
    }
    .fg-card-buttons {
      display: flex;
      align-items: stretch;
      gap: 8px;
    }
    .fg-btn-info {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center; justify-content: center;
      padding: 10px;
      background: #f2f5f8;
      border: none;
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 14px;
      color: #717784;
      letter-spacing: -0.084px;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .fg-btn-info:hover { background: #e7eaef; }
    .fg-btn-cta {
      flex: 1 1 0;
      min-width: 0;
      display: inline-flex;
      align-items: center; justify-content: center;
      gap: 4px;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%),
        var(--status-color, var(--brand));
      box-shadow:
        0 1px 2px rgba(14,18,27,0.24),
        0 0 0 1px var(--status-color, var(--brand));
      transition: filter 0.2s ease;
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 14px;
      color: #ffffff;
      letter-spacing: -0.084px;
      cursor: pointer;
    }
    .fg-btn-cta:hover { filter: brightness(1.05); }
    .fg-btn-cta svg { width: 20px; height: 20px; flex-shrink: 0; color: #ffffff; }
    .fg-card-availability {
      display: flex; align-items: center; justify-content: center;
      gap: 8px;
      padding-bottom: 4px;
      font-family: 'Poppins', sans-serif;
      font-weight: 500; font-size: 10px;
      color: #1fc16b;
      letter-spacing: 0.2px;
      line-height: 20px;
    }
    .fg-card-availability .dot {
      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
      background: #1fc16b; box-shadow: 0 0 6px rgba(31,193,107,0.6);
      animation: advisorDot 1.6s ease-in-out infinite;
    }

    /* === STATUS VARIANTS (rings only for active states; SOLD uses overlay) === */
    .fg-card.is-high-demand {
      --status-color: #fa7319;
      --status-soft: #ffe6d5;
      --status-text: #b75310;
      box-shadow: 0 0 0 3px #ffe6d5, 0 1px 2px rgba(10,13,20,0.03);
    }
    .fg-card.is-high-demand .fg-card-status-strip { background: #ffe6d5; color: #b75310; }
    .fg-card.is-pending {
      --status-color: #f59e0b;
      --status-soft: #fef3c7;
      --status-text: #92400e;
      box-shadow: 0 0 0 3px #fef3c7, 0 1px 2px rgba(10,13,20,0.03);
    }
    .fg-card.is-pending .fg-card-status-strip { background: #fef3c7; color: #92400e; }
    .fg-card.is-second-chance {
      --status-color: #5b8def;
      --status-soft: #dbeafe;
      --status-text: #1e40af;
      box-shadow: 0 0 0 3px #dbeafe, 0 1px 2px rgba(10,13,20,0.03);
    }
    .fg-card.is-second-chance .fg-card-status-strip { background: #dbeafe; color: #1e40af; }

    /* Reserved card (with countdown) */
    .fg-card.is-reserved {
      --status-color: #fb3748;
      --status-soft: #ffd5d8;
      --status-text: #ad1f2b;
      box-shadow: 0 0 0 3px #ffd5d8, 0 1px 2px rgba(10,13,20,0.03);
    }
    .fg-card.is-reserved .fg-card-status-strip { background: #ffd5d8; color: #ad1f2b; }

    /* Status strip dot — bullet that prefixes the message */
    .fg-card-status-strip .fg-card-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: currentColor;
      flex-shrink: 0;
      display: inline-block;
    }
    /* Countdown number inline */
    .fg-card-status-strip .fg-countdown {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    /* === SOLD card — proper Figma design === */
    .fg-card.is-sold {
      --status-color: var(--brand);
      box-shadow: 0 1px 2px rgba(10,13,20,0.03);
    }
    .fg-card.is-sold .fg-card-img::after {
      content: "";
      position: absolute; inset: 0;
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 4;
      pointer-events: none;
      border-radius: 24px;
    }
    .fg-card.is-sold .fg-sold-badge {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) rotate(-8deg);
      padding: 16px;
      background: #262626;
      border: 2px solid #ffffff;
      border-radius: 32px;
      z-index: 5;
      pointer-events: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .fg-card.is-sold .fg-sold-badge span {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 32px;
      color: #ffffff;
      letter-spacing: 6.4px;
      line-height: 20px;
      white-space: nowrap;
    }
    .fg-card.is-sold .fg-card-price .price { text-decoration: line-through; }
    .fg-card.is-sold .fg-card-title-row .roi,
    .fg-card.is-sold .fg-card-title-row .furnished { opacity: 0; pointer-events: none; }
    /* SOLD bottom — single full-width slate button + red note */
    .fg-card.is-sold .fg-card-buttons {
      width: 100%;
    }
    .fg-card.is-sold .fg-card-buttons .fg-btn-cta { display: none; }
    .fg-card.is-sold .fg-card-buttons .fg-btn-info {
      flex: 1 1 0;
      width: 100%;
      background: #f2f5f8;
      border: 1px solid #eaecf0;
      color: #717784;
      cursor: not-allowed;
    }
    .fg-card.is-sold .fg-btn-info-similar {
      flex: 1 1 0;
      width: 100%;
      background: #f2f5f8;
      border: 1px solid #eaecf0;
      color: #717784;
      padding: 10px;
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.084px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease;
    }
    .fg-card.is-sold .fg-btn-info-similar:hover { background: #e7eaef; }
    .fg-card.is-sold .fg-card-availability { color: #e2534e; }
    .fg-card.is-sold .fg-card-availability .dot {
      background: #e2534e;
      box-shadow: 0 0 6px rgba(226, 83, 78, 0.6);
      animation: none;
    }

    .fg-card.is-reserved .fg-card-img > img { filter: grayscale(20%); opacity: 0.85; }

    /* === LIST VIEW — proper table layout === */
    .fg-list-wrap {
      width: 100%;
      max-width: 1760px;
      margin: 0 auto;
      padding: 0 24px 64px;
    }
    .fg-list-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 0;
      flex-wrap: wrap;
    }
    .fg-list-search {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #eaecf0;
      border-radius: 10px;
      width: 240px;
      max-width: 100%;
      cursor: text;
      -webkit-tap-highlight-color: transparent;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .fg-list-search:focus-within {
      border-color: #c7d2fe;
      box-shadow: 0 0 0 3px rgba(91,141,239,0.12);
    }
    .fg-list-search input {
      flex: 1;
      border: 0;
      outline: 0;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #5c5c5c;
      background: transparent;
      min-width: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .fg-list-search input::placeholder { color: #a3a3a3; }
    /* Anula el recuadro de foco global (input:focus { box-shadow }) que dibuja
       un cuadrado gris dentro de la caja redondeada. */
    .fg-list-search input:focus {
      box-shadow: none;
      border: 0;
      outline: 0;
    }
    /* Hide the browser's native search "X" so we can use our own. */
    .fg-list-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
    .fg-list-search .fg-list-search-clear {
      display: none;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #eef1f5;
      color: #5c5c5c;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .fg-list-search .fg-list-search-clear:hover { background: #e2534e; color: #fff; }
    .fg-list-search.has-value .fg-list-search-clear { display: inline-flex; }
    .fg-list-tabs {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px;
      background: #f2f5f8;
      border: 1px solid #eaecf0;
      border-radius: 100px;
    }
    .fg-list-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 0;
      border-radius: 100px;
      background: transparent;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #5c5c5c;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .fg-list-tab .badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 22px; height: 18px;
      padding: 0 6px;
      background: #e7eaef;
      border-radius: 100px;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 600;
      color: #5c5c5c;
    }
    .fg-list-tab.active {
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      font-weight: 600;
    }
    .fg-list-tab[data-tab="available"].active { color: #1fc16b; }
    .fg-list-tab[data-tab="available"].active .badge { background: #d1fae5; color: #047857; }
    .fg-list-tab[data-tab="pending"].active { color: #f59e0b; }
    .fg-list-tab[data-tab="pending"].active .badge { background: #fef3c7; color: #92400e; }
    .fg-list-tab[data-tab="second"].active { color: #5b8def; }
    .fg-list-tab[data-tab="second"].active .badge { background: #dbeafe; color: #1e40af; }
    .fg-list-tab[data-tab="sold"].active { color: #e2534e; }
    .fg-list-tab[data-tab="sold"].active .badge { background: #fee2e2; color: #991b1b; }
    .fg-list-toolbar .fg-pill-matches { margin-left: auto; }

    .fg-list-table {
      width: 100%;
      background: #ffffff;
      border: 1px solid #eaecf0;
      border-radius: 16px;
      overflow: hidden;
      border-collapse: collapse;
    }
    .fg-list-table thead {
      background: #ffffff;
      border-bottom: 1px solid #eaecf0;
    }
    .fg-list-table th {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 600;
      color: #717784;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-align: left;
      padding: 14px 12px;
      white-space: nowrap;
    }
    .fg-list-table tbody tr {
      border-bottom: 1px solid #f2f5f8;
      transition: background 0.15s ease;
    }
    .fg-list-table tbody tr:last-child { border-bottom: 0; }
    .fg-list-table tbody tr:hover { background: #fafbfc; }
    .fg-list-table td {
      padding: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #5c5c5c;
      vertical-align: middle;
    }
    .fg-list-table tr.is-sold td { color: #a3a3a3; }
    .fg-list-table tr.is-sold .price { text-decoration: line-through; }
    .fg-list-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 100px;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .fg-list-status::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: currentColor;
    }
    .fg-list-status.available { background: #d1fae5; color: #047857; }
    .fg-list-status.hot       { background: #ffe6d5; color: #b75310; }
    .fg-list-status.reserved  { background: #fee2e2; color: #991b1b; }
    .fg-list-status.second    { background: #dbeafe; color: #1e40af; }
    .fg-list-status.sold      { background: #f2f5f8; color: #717784; }
    .fg-list-status.pending   { background: #fef3c7; color: #92400e; }
    .fg-list-table .price {
      font-weight: 700;
      color: var(--row-color, #1fc16b);
      white-space: nowrap;
    }
    .fg-list-table .price-meta {
      display: block;
      font-weight: 500;
      font-size: 11px;
      color: #a3a3a3;
      margin-top: 2px;
    }
    .fg-list-table tr.row-available .price { color: #1fc16b; }
    .fg-list-table tr.row-hot       .price { color: #fa7319; }
    .fg-list-table tr.row-reserved  .price { color: #e2534e; }
    .fg-list-table tr.row-second    .price { color: #5b8def; }
    .fg-list-table tr.row-sold      .price { color: #a3a3a3; }
    .fg-list-table tr.row-pending   .price { color: #f59e0b; }
    .fg-list-table .roi {
      font-weight: 600;
      color: #1fc16b;
    }
    .fg-list-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
    }
    .fg-list-icon-btn {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent;
      border: 0;
      border-radius: 8px;
      color: #5c5c5c;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .fg-list-icon-btn:hover { background: #f2f5f8; color: #074540; }
    .fg-list-info-btn {
      padding: 6px 12px;
      background: transparent;
      border: 1px solid #eaecf0;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: #5c5c5c;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .fg-list-info-btn:hover { background: #f2f5f8; }
    .fg-list-cta {
      padding: 6px 12px;
      border: 0;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      cursor: pointer;
      background: var(--brand, #074540);
      transition: filter 0.15s ease;
      white-space: nowrap;
    }
    .fg-list-cta:hover { filter: brightness(1.05); }
    .fg-list-table tr.row-available .fg-list-cta { background: var(--brand); }
    .fg-list-table tr.row-hot       .fg-list-cta { background: var(--brand); }
    .fg-list-table tr.row-reserved  .fg-list-cta { background: var(--brand); }
    .fg-list-table tr.row-second    .fg-list-cta { background: var(--brand); }
    .fg-list-table tr.row-pending   .fg-list-cta { background: var(--brand); }
    .fg-list-table tr.row-sold      .fg-list-cta { background: #c7cdd6; cursor: not-allowed; }

    /* ============================================
       LIST VIEW — MOBILE (all columns, horizontal scroll, sticky CTA)
       ============================================ */
    @media (max-width: 768px) {
      .fg-list-wrap { padding: 0 12px 48px; }

      /* Toolbar: search full width, tabs scroll horizontally, share full width */
      .fg-list-toolbar { gap: 10px; padding: 12px 0; }
      .fg-list-search { width: 100%; order: 1; }
      .fg-list-tabs {
        order: 2;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 14px;
      }
      .fg-list-tabs::-webkit-scrollbar { display: none; }
      .fg-list-tab { flex: 0 0 auto; white-space: nowrap; }
      .fg-list-toolbar .fg-pill-matches { order: 3; width: 100%; margin-left: 0; justify-content: center; }

      /* Show every column and let the table scroll sideways inside its wrapper. */
      .fg-list-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #eaecf0;
        border-radius: 12px;
        background: #fff;
      }
      .fg-list-table {
        border: 0;
        border-radius: 0;
        overflow: visible;  /* must NOT be hidden, or the sticky CTA cell loses its scroll context */
        min-width: 720px;   /* keeps columns at a readable width while scrolling */
      }
      .fg-list-table th, .fg-list-table td {
        padding: 12px 10px;
        white-space: nowrap;
      }
      .fg-list-table th { font-size: 10px; }
      .fg-list-table td { font-size: 12px; }
      .fg-list-cta { padding: 6px 10px; font-size: 11px; }

      /* Pin the action column (Book Video Call) so it stays in view while the
         rest of the row scrolls horizontally. */
      .fg-list-table th:last-child,
      .fg-list-table td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        background: #fff;
        box-shadow: -8px 0 12px -8px rgba(16, 24, 40, 0.18);
      }
      .fg-list-table tbody tr:hover td:last-child { background: #fafbfc; }
      .fg-list-table tr.is-sold td:last-child     { background: #fbfbfc; }
      /* Keep only the "Book Video Call" CTA in the pinned column. */
      .fg-list-actions { gap: 6px; justify-content: flex-end; }
      .fg-list-info-btn,
      .fg-list-icon-btn { display: none; }

      .fg-list-pagination { padding: 14px 4px; flex-wrap: wrap; gap: 8px; }
    }

    .fg-list-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 4px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #5c5c5c;
    }
    .fg-list-pages {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .fg-list-page {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; border-radius: 8px;
      background: transparent;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #5c5c5c;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .fg-list-page:hover { background: #f2f5f8; }
    .fg-list-page.active {
      background: #074540; color: #ffffff;
      font-weight: 600;
    }

    /* View switcher (grid is default) — smooth crossfade between grid / list / plan */
    .fg-units-grid,
    .fg-list-wrap,
    .fg-plan-wrap {
        transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
    }
    .fg-list-wrap,
    .fg-plan-wrap {
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        position: absolute;
        left: -99999px;
        top: 0;
    }
    body[data-view="grid"] .fg-units-grid { opacity: 1; transform: none; }

    /* Filter bar is exclusive to Grid view (hidden in List / Plan) */
    body[data-view="grid"] .fg-filter-bar[data-grid-only] { display: flex; }
    body[data-view="list"] .fg-filter-bar[data-grid-only],
    body[data-view="plan"] .fg-filter-bar[data-grid-only] { display: none !important; }

    body[data-view="list"] .fg-units-grid { opacity: 0; transform: translateY(6px); pointer-events: none; position: absolute; left: -99999px; }
    body[data-view="list"] .fg-list-wrap {
        opacity: 1; transform: none; pointer-events: auto;
        position: static; left: auto;
        display: block !important;
    }

    body[data-view="plan"] .fg-units-grid { opacity: 0; transform: translateY(6px); pointer-events: none; position: absolute; left: -99999px; }
    body[data-view="plan"] .fg-plan-wrap {
        opacity: 1; transform: none; pointer-events: auto;
        position: static; left: auto;
        display: block !important;
    }
    .fg-plan-wrap {
      display: none;
      width: 100%;
      max-width: 1760px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .fg-plan-board {
      background: #ffffff;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      overflow: hidden;
      border-radius: 24px;
    }

    /* === chips-filters (Figma 193:6017) === */
    .fg-plan-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 20px;
      width: 100%;
      flex-wrap: wrap;
    }
    .fg-plan-chips {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    /* chip-floor — matches the green map-marker aesthetic (rounded, gradient, soft shadow) */
    .fg-chip-floor {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 12px 8px 10px;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid #e2e6ea;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      box-shadow: 0 1px 2px rgba(16,24,40,0.04);
      transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s cubic-bezier(0.22,1,0.36,1),
        box-shadow 0.2s ease;
    }
    .fg-chip-floor:hover {
      background: #f2f5f8;
      border-color: #cfd6dd;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(16,24,40,0.08);
    }
    .fg-chip-left {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .fg-chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #074540;
      flex-shrink: 0;
      transition: background 0.2s ease;
    }
    .fg-chip-text {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 13px;
      line-height: 22px;
      color: #2b303b;
      letter-spacing: -0.06px;
    }
    .fg-chip-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 999px;
      background: #eef1f5;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 11px;
      line-height: 18px;
      color: #5c5c5c;
      letter-spacing: -0.06px;
      min-width: 22px;
      transition: background 0.2s ease, color 0.2s ease;
    }
    /* chip-floor — ACTIVE: green pill matching the map markers */
    .fg-chip-floor.is-active {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%),
        linear-gradient(90deg, #074540 0%, #053330 100%);
      border-color: rgba(255,255,255,0.12);
      box-shadow:
        0 9px 9px 0 rgba(7,69,64,0.18),
        0 2px 5px 0 rgba(7,69,64,0.28);
      transform: translateY(-1px);
    }
    .fg-chip-floor.is-active:hover {
      transform: translateY(-2px);
      box-shadow:
        0 12px 16px 0 rgba(7,69,64,0.22),
        0 2px 5px 0 rgba(7,69,64,0.32);
    }
    .fg-chip-floor.is-active .fg-chip-dot { background: #ffffff; }
    .fg-chip-floor.is-active .fg-chip-text { color: #ffffff; }
    .fg-chip-floor.is-active .fg-chip-count {
      background: rgba(255,255,255,0.18);
      color: #ffffff;
    }

    /* Selector de piso (dropdown propio HTML/CSS) — solo el pill "PISO X" es el
       disparador. En desktop se usan los chips, así que la flechita y el menú
       quedan ocultos y el pill se ve como banda normal. */
    .fg-plan-piso-picker {
      position: relative;
      display: inline-flex;
    }
    .fg-plan-piso-trigger {
      gap: 6px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
    }
    .fg-plan-piso-caret {
      display: none;             /* solo mobile */
      transition: transform 0.2s ease;
    }
    .fg-plan-piso-picker.is-open .fg-plan-piso-caret {
      transform: rotate(180deg);
    }
    /* Menú desplegable — oculto por defecto, se muestra en mobile al abrir. */
    .fg-plan-piso-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 210px;
      margin: 0;
      padding: 6px;
      list-style: none;
      background: #ffffff;
      border: 1px solid #e7eee9;
      border-radius: 16px;
      box-shadow: 0 14px 30px rgba(16,24,40,0.16);
      z-index: 40;
    }
    .fg-plan-piso-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      transition: background 0.15s ease;
    }
    .fg-plan-piso-option:hover { background: #f2f5f8; }
    .fg-plan-piso-option-name {
      font-weight: 600;
      font-size: 13px;
      color: #2b303b;
      letter-spacing: -0.06px;
      white-space: nowrap;
    }
    .fg-plan-piso-option-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      padding: 2px 8px;
      border-radius: 999px;
      background: #eef1f5;
      font-weight: 700;
      font-size: 11px;
      color: #5c5c5c;
    }
    .fg-plan-piso-option.is-active { background: #f1f6f1; }
    .fg-plan-piso-option.is-active .fg-plan-piso-option-name { color: #074540; }
    .fg-plan-piso-option.is-active .fg-plan-piso-option-count {
      background: #074540;
      color: #ffffff;
    }

    /* PISO 1 · 6 UNIDADES DISPONIBLES (Figma 193:6028) */
    .fg-plan-piso {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f2f5f8;             /* neutral/slate/100 */
      border-radius: 100px;
      padding: 2px 4px 2px 2px;
      overflow: hidden;
    }
    .fg-plan-piso-left {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;             /* bg/white-0 */
      border: 1px solid #f2f5f8;
      padding: 12px;
      border-radius: 100px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 12px;
      line-height: 20px;
      color: #074540;                  /* brand green */
      letter-spacing: 0.96px;
      white-space: nowrap;
    }
    .fg-plan-piso-right {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
      color: #5c5c5c;                  /* text/sub-600 */
      letter-spacing: 0.96px;
      white-space: nowrap;
    }

    /* === Map canvas (Figma 193:6600 — ContainerMap 1366×769) === */
    .fg-plan-canvas {
      position: relative;
      width: 100%;
      aspect-ratio: 1366 / 769;
      background: #ffffff;
      overflow: hidden;
      user-select: none;
    }
    /* Stage = transform target for pan/zoom. On desktop it just fills the
       canvas (no transform); on mobile JS drives translate()/scale(). */
    .fg-plan-stage {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform-origin: 0 0;
      will-change: transform;
    }
    .fg-plan-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      pointer-events: none;
    }

    /* === Zoom controls (shown on the pannable mobile map) === */
    .fg-plan-zoom {
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 6;
      display: none;            /* desktop: hidden, map isn't pannable */
      flex-direction: column;
      gap: 8px;
    }
    .fg-plan-zoom-btn {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid rgba(16,24,40,0.08);
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #2b303b;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(16,24,40,0.12);
      transition: transform 0.12s ease, background 0.15s ease;
    }
    .fg-plan-zoom-btn:active { transform: scale(0.92); background: #f2f5f8; }
    .fg-plan-zoom-reset { color: #074540; }

    /* === Drag hint pill === */
    .fg-plan-hint {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      z-index: 6;
      display: none;            /* shown only on mobile, JS fades it out */
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(43,48,59,0.86);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 6px 20px rgba(16,24,40,0.22);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .fg-plan-hint.is-visible { opacity: 1; }

    /* === Hotspot markers — Figma 72×72 at exact x/y of 1366×769 frame === */
    .fg-plan-marker {
      position: absolute;
      /* Figma viewBox 99×134; the marker visual ~74px tall (rest is shadow space).
         Width 99/1366 ≈ 7.2% */
      width: clamp(72px, 7.2vw, 99px);
      aspect-ratio: 99 / 134;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
      z-index: 2;
      /* Anchor the CIRCLE CENTER on the unit coord.
         Circle is at y=38.48/134 = 28.7% in viewBox → translate(-50%, -28.7%). */
      transform: translate(-50%, -28.7%);
      transform-origin: 50% 28.7%;
    }
    .fg-plan-marker:hover {
      z-index: 10;
      transform: translate(-50%, -28.7%) translateY(-3px) scale(1.05);
    }

    .fg-plan-marker-bubble {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      color: white;
      font-family: 'Poppins', sans-serif;
    }
    .fg-plan-marker-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .fg-plan-marker-text {
      position: absolute;
      /* Circle center in viewBox 99×134: 49.24/99 ≈ 49.7%,  38.48/134 ≈ 28.7% */
      left: 49.7%;
      top: 28.7%;
      transform: translate(-50%, -50%);
      width: 58%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      pointer-events: none;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    }
    .fg-plan-marker-price {
      font-weight: 700;
      font-size: clamp(12px, 1.15vw, 16px);
      letter-spacing: -0.02em;
      line-height: 1.05;
    }
    .fg-plan-marker-sqft {
      font-weight: 500;
      font-size: clamp(8px, 0.78vw, 11px);
      letter-spacing: 0;
      line-height: 1;
      opacity: 0.92;
    }
    .fg-plan-marker-fire {
      position: absolute;
      /* Sits on top-right of the ribbon — top corner of the circle area */
      top: 4%;
      right: 6%;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #2b1d10;
      border: 2px solid #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #f59e0b;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .fg-plan-marker.is-sold .fg-plan-marker-text { text-decoration: line-through; opacity: 0.9; }

    @media (max-width: 900px) {
      .fg-plan-wrap { padding: 0; }
      .fg-plan-label { font-size: 10px; letter-spacing: 0.18em; }
      .fg-plan-compass svg { width: 56px; height: 56px; }
    }

    /* ===========================================================
       MOBILE MAP — pannable / zoomable viewport (≤760px)
       The canvas becomes a fixed-height viewport; the stage is
       scaled up by JS so markers are large & legible, and the user
       drags / pinches to explore it like a real map.
       =========================================================== */
    @media (max-width: 760px) {
      .fg-plan-board {
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16,24,40,0.04);
        border: 1px solid #eef1f4;
      }

      /* --- Polished filters / floor selector --- */
      .fg-plan-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 14px 12px;
      }
      /* En mobile los pisos se eligen desde un <select>, no desde chips. */
      .fg-plan-chips {
        display: none;
      }
      /* En mobile el pill "PISO X" es el disparador: muestra la flechita y, al
         abrir, despliega el menú propio. */
      .fg-plan-piso-caret {
        display: inline-flex;
        align-items: center;
      }
      .fg-plan-piso-picker.is-open .fg-plan-piso-menu {
        display: block;
        animation: fgPisoMenuIn 0.16s ease;
      }
      .fg-plan-piso-picker.is-open .fg-plan-piso-trigger {
        border-color: #cfe0d4;
        box-shadow: 0 0 0 3px rgba(7,69,64,0.14);
      }
      @keyframes fgPisoMenuIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .fg-chip-floor {
        justify-content: space-between;
        min-width: 0;
        min-height: 38px;
        padding: 7px 11px;
        font-size: 12.5px;
      }
      .fg-chip-left { min-width: 0; }
      .fg-chip-text {
        font-size: 12.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .fg-chip-count { flex-shrink: 0; }

      /* PISO label spans full width as a clean banner. Solo el pill izquierdo
         (el trigger) es interactivo; el contador derecho es texto normal. */
      .fg-plan-piso {
        align-self: stretch;
        justify-content: space-between;
        gap: 8px;
        padding: 4px;
        background: #f6f8f5;
        border: 1px solid #e7eee9;
      }
      .fg-plan-piso-left {
        padding: 9px 14px;
        font-size: 11.5px;
        letter-spacing: 0.6px;
      }
      .fg-plan-piso-right {
        padding: 9px 12px 9px 4px;
        font-size: 11px;
        letter-spacing: 0.4px;
      }

      /* --- The pannable map viewport --- */
      .fg-plan-canvas {
        aspect-ratio: auto;
        height: 64vh;
        max-height: 560px;
        min-height: 380px;
        border-radius: 16px;
        margin: 0 14px 14px;
        width: auto;
        background: #f3f6f2;
        touch-action: none;          /* JS owns the gestures */
        cursor: grab;
        box-shadow: inset 0 0 0 1px rgba(16,24,40,0.05);
      }
      .fg-plan-canvas.is-grabbing { cursor: grabbing; }

      /* Stage no longer stretches to fill — it keeps the true map ratio so
         marker percentages stay accurate while JS translates/scales it. A
         base width wider than the viewport means the default "cover" zoom is
         gentle, so markers spread out and stay legible (instead of cramming
         the whole plan into ~360px the way the unscaled view did). */
      .fg-plan-stage {
        inset: auto;
        top: 0;
        left: 0;
        width: min(820px, 220vw);
        height: auto;
        aspect-ratio: 1366 / 769;
        touch-action: none;
        transition: transform 0.18s cubic-bezier(0.22,1,0.36,1);
      }
      .fg-plan-stage.is-dragging { transition: none; }

      .fg-plan-marker { width: clamp(80px, 11vw, 92px); }
      .fg-plan-marker-price { font-size: 13px; }
      .fg-plan-marker-sqft { font-size: 9px; }

      .fg-plan-zoom { display: flex; }
      .fg-plan-hint { display: flex; }
    }

    @media (max-width: 900px) {
      .fg-toggle-bar:not(.is-floating) { padding: 20px 16px 12px; }
      .fg-filter-bar { padding: 4px 16px 16px; gap: 8px; }
      .fg-units-grid { padding: 0 16px 32px 16px; gap: 12px; }
      .fg-stat svg { width: 18px; height: 18px; }
      .fg-card-title-row .name { font-size: 16px; }
      .fg-card-price .price { font-size: 20px; }
    }

    /* ============================================
       FILTERS — MOBILE BOTTOM-SHEET
       ============================================ */
    @media (max-width: 768px) {
      .fg-filter-bar {
        flex-wrap: wrap;
        gap: 10px;
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: clip;
      }
      .fg-filter-bar > .fg-filters-left {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }
      .fg-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        box-sizing: border-box;
      }

      /* The "Filtros" trigger button */
      .fg-filters-mobile-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 36px;
        padding: 0 16px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(10,13,20,0.03);
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: var(--brand);
        white-space: nowrap;
        cursor: pointer;
      }
      .fg-filters-mobile-trigger svg { color: var(--brand); flex-shrink: 0; }

      .fg-pill-matches {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
      }

      /* Backdrop */
      .fg-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(15, 18, 27, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
      }
      .fg-filters-backdrop.is-open { opacity: 1; visibility: visible; }

      /* The sheet itself */
      .fg-filters-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1205;
        max-height: 84vh;
        overflow-y: auto;
        padding: 8px 18px 24px;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -10px 34px rgba(15,18,27,0.18);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform .34s cubic-bezier(.22,1,.36,1), visibility .34s;
      }
      .fg-filters-group.is-open { transform: translateY(0); visibility: visible; }

      /* Drag-handle look + header */
      .fg-filters-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        margin: 0 -18px 4px;
        padding: 14px 18px 10px;
        background: #fff;
        border-bottom: 1px solid #f2f5f8;
        z-index: 2;
      }
      .fg-filters-sheet-head::before {
        content: "";
        position: absolute;
        top: 6px; left: 50%;
        width: 40px; height: 4px;
        transform: translateX(-50%);
        background: #e5e7eb;
        border-radius: 999px;
      }
      .fg-filters-sheet-head > span {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #171717;
      }
      .fg-filters-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: 999px;
        border: none;
        background: #f2f5f8;
        color: #5c5c5c;
        cursor: pointer;
      }

      /* Each filter occupies a full-width row inside the sheet */
      .fg-filters-group > div[style*="position:relative"] { width: 100%; }
      .fg-filters-group .fg-filter-btn {
        width: 100%;
        justify-content: space-between;
        height: 44px;
      }
      /* Dropdowns open inline (not absolutely positioned) inside the sheet.
         Display is still driven by toggleFilterDropdown's inline style. */
      .fg-filters-group .filter-dropdown {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 4px 4px 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-top: 2px;
        background: #f9fafb !important;
        border-radius: 10px !important;
      }

      .fg-filter-icon { width: 100%; border-radius: 10px; gap: 8px; }
      .fg-filter-icon::after {
        content: "Restablecer filtros";
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #5c5c5c;
      }

      .fg-filters-sheet-apply {
        display: block;
        width: 100%;
        margin-top: 4px;
        padding: 13px;
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
      }
    }

    /* ===========================================================
       MODAL TIPOLOGIA — Unit Info Modal (Figma 220:20041)
       =========================================================== */
    .mt-overlay {
      position: fixed;
      inset: 0;
      z-index: 1104;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow: auto;
      font-family: 'Poppins', sans-serif;
    }
    .mt-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 18, 27, 0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .mt-shell {
      position: relative;
      width: 100%;
      max-width: 1100px;
      background: #f2f5f8;
      border: 1px solid #eaecf0;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(10, 13, 20, 0.35);
      display: flex;
      flex-direction: column;
      /* Fixed height — modal stays the same size regardless of image/content.
         The left panel (.mt-left-inner) scrolls internally when content is long. */
      height: min(760px, calc(100vh - 48px));
      max-height: calc(100vh - 48px);
    }
    .mt-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      background: #ffffff;
      border-bottom: 1px solid #eaecf0;
      flex-shrink: 0;
    }
    .mt-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .mt-header-logo {
      height: 24px;
      width: auto;
      object-fit: contain;
      flex-shrink: 0;
    }
    .mt-header-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #c5c8cf;
    }
    .mt-header-unit {
      font-weight: 600;
      font-size: 14px;
      color: #5c5c5c;
      white-space: nowrap;
    }
    .mt-badge-available {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px 4px 6px;
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: #5c5c5c;
      letter-spacing: 0.02em;
    }
    .mt-badge-available .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1fc16b;
    }
    .mt-badge-reserved {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px 4px 6px;
      background: #fde2e1;
      border: 1px solid #fde2e1;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: #b91c1c;
      letter-spacing: 0.02em;
    }
    .mt-badge-reserved .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #e2534e;
    }
    .mt-header-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .mt-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 10px;
      color: #5c5c5c;
      border: 1px solid #eaecf0;
      background: #fff;
      letter-spacing: 0.02em;
    }
    .mt-pill b { font-weight: 600; }
    .mt-pill-soft { background: #fff; }
    .mt-pill-wa {
      background: #f2f5f8;
      border-color: #eaecf0;
      color: #5c5c5c;
      cursor: pointer;
    }
    .mt-pill-wa svg { color: #25d366; }
    .mt-close {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #ebebeb;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #5c5c5c;
      transition: all 0.15s ease;
    }
    .mt-close:hover { background: #f2f5f8; color: #171717; }

    .mt-body {
      display: grid;
      /* minmax(0, 1fr) y no 1fr: un ítem de grid tiene min-width:auto, y la
         tira de miniaturas (todas en fila) le daba a la columna un ancho
         intrínseco enorme que ensanchaba el modal entero. */
      grid-template-columns: 468px minmax(0, 1fr);
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }
    .mt-right  { min-width: 0; max-width: 100%; }
    .mt-thumbs { min-width: 0; max-width: 100%; width: 100%; }

    /* === LEFT === */
    .mt-left {
      background: #fff;
      border-right: 1px solid #eaecf0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      position: relative;
    }
    .mt-peopleview {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #fff3eb;
      border-bottom: 1px solid #ffe6d5;
      color: #b75310;
      font-size: 10px;
      letter-spacing: 0.02em;
      flex-shrink: 0;
    }
    .mt-peopleview b { font-weight: 600; }
    .mt-left-inner {
      padding: 18px 20px 16px;
      overflow-y: auto;
      flex: 1;
      min-height: 0;
    }
    .mt-discount-chip {
      display: inline-block;
      padding: 7px 10px;
      background: rgba(205, 150, 0, 0.08);
      border: 1px solid rgba(205, 150, 0, 0.16);
      color: #cd9600;
      font-weight: 700;
      font-size: 11px;
      border-radius: 6px;
      margin-bottom: 16px;
    }
    .mt-price-block {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mt-price-row {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mt-price {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 32px;
      color: #074540;
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .mt-currency-toggle {
      display: inline-flex;
      gap: 2px;
      align-items: center;
    }
    .mt-currency-toggle button {
      padding: 4px 8px;
      border-radius: 4px;
      font-family: 'Poppins', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      cursor: pointer;
      background: #fff;
      border: 1px solid #eaecf0;
      color: #a3a3a3;
      transition: all 0.15s ease;
    }
    .mt-currency-toggle button:hover { color: #5c5c5c; }
    .mt-currency-toggle button.active {
      background: #eaecf0;
      border-color: transparent;
      color: #171717;
    }
    .mt-price-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      flex-wrap: wrap;
    }
    .mt-price-meta .muted { color: #a3a3a3; font-weight: 500; }
    .mt-price-meta .success {
      color: #1fc16b;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .mt-price-meta .warning { color: #cd9600; font-weight: 600; }
    .mt-price-meta .sep {
      width: 3px;
      height: 3px;
      background: #c5c8cf;
      border-radius: 50%;
    }
    .mt-desc {
      margin: 16px 0 12px;
      font-weight: 500;
      font-size: 12px;
      color: #a3a3a3;
      letter-spacing: 0.01em;
    }
    .mt-stats-rows {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mt-stats-row {
      display: flex;
      gap: 8px;
    }
    .mt-stats-row .mt-stat-box {
      flex: 1 1 0;
      min-width: 0;
    }
    .mt-stat-box {
      background: #fff;
      border: 1px solid #eaecf0;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .mt-stat-box .value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 6px;
      font-weight: 600;
      font-size: 14px;
      color: #525866;
      letter-spacing: 0.02em;
    }
    .mt-stat-box .value svg {
      width: 18px;
      height: 18px;
      color: #525866;
    }
    .mt-stat-box .label {
      background: #f2f5f8;
      border-top: 1px solid #eaecf0;
      padding: 5px 4px;
      text-align: center;
      font-size: 9px;
      font-weight: 600;
      color: #99a0ae;
      letter-spacing: 0.06em;
    }
    .mt-divider {
      height: 1px;
      background: #ebebeb;
      margin: 18px 0;
    }
    .mt-buyer-toggle {
      display: flex;
      width: 100%;
      background: #f1f5f9;
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
      margin-bottom: 18px;
    }
    .mt-buyer-toggle button {
      flex: 1;
      padding: 9px 10px;
      border-radius: 999px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 13.5px;
      color: #64748b;
      letter-spacing: 0.01em;
      transition: all 0.2s ease;
    }
    .mt-buyer-toggle button.active {
      background: #fff;
      color: #111827;
      box-shadow: 0 1px 3px rgba(16, 32, 61, 0.14);
    }
    .mt-fin-table {
      border: 1px solid #eaecf0;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 16px;
    }
    .mt-fin-table .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid #eaecf0;
    }
    .mt-fin-table .row:last-child { border-bottom: none; }
    .mt-fin-table .cell {
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-right: 1px solid #eaecf0;
    }
    .mt-fin-table .cell:last-child { border-right: none; }
    .mt-fin-table .k {
      font-size: 9px;
      font-weight: 500;
      color: #a3a3a3;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .mt-fin-table .v {
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      font-size: 14px;
      color: #525866;
    }
    .mt-fin-table .v b {
      font-weight: 600;
      font-size: 15px;
    }
    .mt-fin-table .v i {
      font-style: normal;
      font-size: 9px;
      color: #a3a3a3;
    }
    .mt-fin-table .v.success { color: #1fc16b; }
    .mt-fin-table .v.success b { color: #1fc16b; }
    .mt-fin-table .v.success i { opacity: 0.64; color: inherit; }

    .mt-projected {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      margin-top: 16px;
      background: rgba(31, 193, 107, 0.08);
      border: 1px solid rgba(31, 193, 107, 0.16);
      border-radius: 12px;
    }
    .mt-projected-icon {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #1daf61;
      flex-shrink: 0;
    }
    .mt-projected-label {
      margin: 0 0 4px 0;
      font-weight: 600;
      font-size: 9px;
      color: #658b77;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .mt-projected-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .mt-projected-row .now { font-weight: 600; font-size: 13px; color: #4d7460; }
    .mt-projected-row .future { font-weight: 600; font-size: 16px; color: #1daf61; }
    .mt-projected-row .hint { font-size: 10px; color: #4d7460; }
    .mt-projected-row svg { color: #4d7460; }

    .mt-compare {
      display: flex;
      gap: 8px;
      padding: 12px;
      margin-top: 8px;
      background: rgba(31, 193, 107, 0.08);
      border: 1px solid rgba(31, 193, 107, 0.16);
      border-radius: 12px;
      font-size: 11px;
      color: #1daf61;
      font-weight: 500;
      line-height: 1.5;
    }
    .mt-compare b { font-weight: 700; }
    .mt-compare .bullet {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1daf61;
      flex-shrink: 0;
      margin-top: 5px;
    }

    /* Buyer-mode visibility — controlled by `.living-mode` class on `.mt-shell`.
       Only hide the "wrong" side; the visible side keeps its natural display
       so individual rows that JS marked `style="display:none"` (no data) stay hidden. */
    .mt-shell:not(.living-mode) .mt-living-only { display: none; }
    .mt-shell.living-mode .mt-investment-only { display: none; }

    /* ── Ficha blocks (Para inversión / Para vivir) ─────────────────── */
    .mt-block {
      border: 1px solid #eef1f5;
      background: #f8fafc;
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 10px;
    }
    .mt-block--green { background: #f0fdf4; border-color: #dcfce7; }
    .mt-block--gold  { background: #fbf7ef; border-color: #efe6d3; }
    .mt-b-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
    .mt-b-ic {
      flex: none; width: 30px; height: 30px; border-radius: 9px;
      background: #fff; border: 1px solid #eef1f5;
      display: grid; place-items: center; color: #64748b;
    }
    .mt-block--green .mt-b-ic { color: #15803d; border-color: #dcfce7; }
    .mt-block--gold  .mt-b-ic { color: #8a6a2e; border-color: #efe6d3; }
    .mt-b-ic svg { width: 16px; height: 16px; }
    .mt-eyebrow {
      font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: #94a3b8;
    }
    .mt-b-value {
      font-size: 16px; font-weight: 600; color: #111827; letter-spacing: -.01em;
    }
    .mt-b-value .accent { color: #15803d; }
    .mt-b-value .unit { font-size: 13px; font-weight: 500; color: #64748b; }
    .mt-block--gold .mt-b-value { color: #8a6a2e; font-size: 15px; }
    .mt-b-body { font-size: 12.5px; color: #64748b; margin-top: 5px; }
    .mt-b-micro { font-size: 10.5px; color: #94a3b8; font-style: italic; margin-top: 7px; line-height: 1.45; }
    .mt-vrow {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 10px; padding: 7px 0;
    }
    .mt-vrow + .mt-vrow { border-top: 1px dashed #dcfce7; }
    .mt-vrow .k {
      font-size: 11px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: #15803d; opacity: .85;
    }
    .mt-vrow .v { font-size: 14px; font-weight: 600; color: #111827; text-align: right; }
    .mt-vrow .v .arrow { color: #15803d; margin: 0 4px; }
    .mt-vrow .v .hint { font-size: 11px; color: #15803d; font-weight: 500; }
    .mt-chips, .mt-calm { display: flex; flex-wrap: wrap; gap: 7px; }
    .mt-chip {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12.5px; font-weight: 600; color: #111827;
      background: #fff; border: 1px solid #eef1f5; border-radius: 999px; padding: 6px 11px;
    }
    .mt-chip svg { width: 13px; height: 13px; color: #64748b; }
    .mt-calm span {
      font-size: 12.5px; font-weight: 600; color: #1f2937;
      background: #fff; border: 1px solid #eef1f5; border-radius: 999px; padding: 6px 11px;
    }

    /* Living extras (amenities) */
    .mt-living-extras {
      display: block;
      margin-top: 8px;
    }
    .mt-living-row {
      font-size: 12px;
      color: #2b303b;
    }
    .mt-amenities-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .mt-amenity-card {
      background: #fff;
      border: 1px solid #eef1f5;
      border-radius: 11px;
      padding: 9px 11px;
    }
    .mt-amenity-top {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mt-amenity-name {
      font-size: 13px;
      font-weight: 600;
      color: #111827;
    }
    .mt-amenity-ben {
      font-size: 10.5px;
      color: #64748b;
      margin-top: 3px;
      padding-left: 23px;
      line-height: 1.35;
    }
    .mt-amenity-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      color: #64748b;
      flex-shrink: 0;
    }
    .mt-amenity-ico svg {
      width: 15px;
      height: 15px;
    }
    @media (max-width: 520px) {
      .mt-amenities-grid { grid-template-columns: 1fr; }
    }

    /* Total Monthly Cost — Living-mode highlight (mirrors Net Return on Investment side) */
    .mt-fin-table .cell.cell-total {
      background: #fff8ec;
      border-color: #f6dca5;
    }
    .mt-fin-table .cell.cell-total .k { color: #b67a06; font-weight: 600; }
    .mt-fin-table .cell.cell-total .v.warning { color: #e16614; }
    .mt-fin-table .cell.cell-total .v.warning b { font-weight: 800; }

    /* Longform description (used both for investment and living modes) */
    .mt-section-text {
      margin: 8px 0 0 0;
      padding: 12px;
      background: #f5f7fa;
      border: 1px solid #eaecf0;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.55;
      color: #2b303b;
      white-space: pre-line;
    }
    .mt-living-note {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      margin-top: 18px;
      background: #fff8ec;
      border-color: #f6dca5;
      color: #e16614;
      font-weight: 600;
    }
    .mt-living-note::before {
      content: "";
      width: 6px;
      height: 6px;
      margin-top: 6px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }
    .mt-section-label {
      margin: 0 0 8px 0;
      font-weight: 500;
      font-size: 10px;
      color: #a3a3a3;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .mt-fancy-row {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }
    .mt-fancy-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 10px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #ebebeb;
      box-shadow: 0 1px 3px rgba(14, 18, 27, 0.12);
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 11px;
      color: #5c5c5c;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .mt-fancy-btn:hover { background: #fafbfc; }
    .mt-fancy-btn svg { color: #5c5c5c; }

    .mt-advisor {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px;
      border: 1px solid #eaecf0;
      border-radius: 12px;
    }
    .mt-advisor-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .mt-avatar {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(135deg, #074540, #4d7460);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .mt-avatar-letter {
      color: white;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
    }
    .mt-avatar-status {
      position: absolute;
      bottom: 0;
      right: -2px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #1fc16b;
      border: 2px solid #fff;
    }
    .mt-advisor-name {
      font-weight: 500;
      font-size: 13px;
      color: #5c5c5c;
      margin-bottom: 2px;
    }
    .mt-advisor-status {
      font-weight: 500;
      font-size: 10px;
      color: #1fc16b;
      letter-spacing: 0.02em;
    }
    .mt-advisor-chat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid transparent;
      box-shadow: 0 1px 3px rgba(14, 18, 27, 0.12);
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 10px;
      color: #a3a3a3;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .mt-advisor-chat:hover { color: #074540; }

    .mt-cta-row {
      flex-shrink: 0;
      display: flex;
      gap: 10px;
      padding: 12px 20px;
      background: #fff;
      border-top: 1px solid #eaecf0;
    }
    .mt-btn-secondary {
      padding: 8px 14px;
      background: #fff;
      border: 1px solid #ebebeb;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(14, 18, 27, 0.12);
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #5c5c5c;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .mt-btn-secondary:hover { background: #f2f5f8; }
    .mt-btn-primary {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), var(--brand, #074540);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      box-shadow: 0 0 0 1px var(--brand, #074540), 0 1px 2px rgba(14, 18, 27, 0.24);
      color: white;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.18s ease;
    }
    .mt-btn-primary:hover { filter: brightness(1.06); }

    /* === RIGHT (gallery) === */
    .mt-right {
      display: flex;
      flex-direction: column;
      background: #f2f5f8;
      min-height: 0;
    }
    .mt-tabs {
      display: flex;
      background: #fff;
      border-bottom: 1px solid #eaecf0;
      flex-shrink: 0;
    }
    .mt-tab {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 10px 14px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 10px;
      color: #717784;
      letter-spacing: 0.06em;
      transition: all 0.15s ease;
    }
    .mt-tab:hover { color: #2b303b; }
    /* Saved state for the modal "ADD TO LIST" toggle */
    .mt-tab.is-fav { color: var(--brand, #074540); }
    .mt-tab.is-fav svg { fill: var(--brand, #074540); stroke: var(--brand, #074540); }
    .mt-tab-middle {
      border-left: 1px solid #eaecf0;
      border-right: 1px solid #eaecf0;
    }
    .mt-gallery {
      position: relative;
      flex: 1;
      background: #f2f5f8;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 360px;
    }
    .mt-gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Planos: lámina completa sobre blanco, sin recortar el cajetín ni el dibujo. */
    .mt-gallery-img.is-plan { object-fit: contain; background: #fff; }
    .mt-thumb.is-plan img   { object-fit: contain; background: #fff; }
    .mt-dim-toggle {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0;
      background: #eaecf0;
      border-radius: 96px;
      padding: 2px;
      box-shadow: 0 1px 2px rgba(10, 13, 20, 0.06);
    }
    .mt-dim-toggle button {
      padding: 4px 14px;
      border-radius: 96px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0.02em;
      color: #99a0ae;
      transition: all 0.15s ease;
    }
    .mt-dim-toggle button.active {
      background: white;
      color: #2b303b;
      box-shadow: 0 3px 3px -1.5px rgba(23, 23, 23, 0.06);
    }
    .mt-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #ebebeb;
      box-shadow: 0 1px 2px rgba(10, 13, 20, 0.03);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #5c5c5c;
      transition: all 0.15s ease;
    }
    .mt-arrow:hover { background: #fafbfc; color: #171717; }
    .mt-arrow-left { left: 16px; }
    .mt-arrow-right { right: 16px; }
    .mt-counter {
      position: absolute;
      bottom: 16px;
      right: 16px;
      padding: 6px 10px;
      background: #fff;
      border: 1px solid #eaecf0;
      border-radius: 100px;
      font-weight: 600;
      font-size: 10px;
      color: #525866;
      letter-spacing: 0.04em;
    }
    .mt-thumbs {
      display: flex;
      gap: 6px;
      padding: 8px 16px;
      background: #eaecf0;
      border-top: 1px solid rgba(23, 23, 23, 0.04);
      flex-shrink: 0;
      /* Una unidad puede traer 19 imágenes: la tira se desplaza en horizontal
         y el JS centra la activa. Barra oculta, el scroll sigue funcionando. */
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .mt-thumbs::-webkit-scrollbar { display: none; }
    .mt-thumbs .mt-thumb { flex: 0 0 auto; scroll-snap-align: center; }
    .mt-thumb {
      width: 86px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #eaecf0;
      background: #fff;
      cursor: pointer;
      padding: 0;
      transition: all 0.15s ease;
    }
    .mt-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mt-thumb.active {
      border: 2px solid #074540;
    }
    .mt-thumb:hover { transform: translateY(-1px); }

    @media (max-width: 900px) {
      .mt-overlay { padding: 12px; }
      /* Stacked layout — let the whole modal scroll instead of forcing a fixed height */
      .mt-shell { height: auto; max-height: calc(100vh - 24px); }
      .mt-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
      .mt-left { border-right: none; border-bottom: 1px solid #eaecf0; }
      .mt-right { min-height: 380px; }
      .mt-header { flex-wrap: wrap; }
      .mt-header-right { flex-wrap: wrap; gap: 6px; }
      .mt-pill-soft { display: none; }
      .mt-stats-row { flex-wrap: wrap; }
      .mt-stats-row .mt-stat-box { flex: 1 1 calc(33% - 8px); min-width: 80px; }
      .mt-thumb { width: 64px; height: 44px; }
    }

    /* === Phones: unit modal === */
    @media (max-width: 600px) {
      /* Looks like a modal (margins + rounded corners), not a full-screen page */
      .mt-overlay { padding: 12px; align-items: center; }
      .mt-shell {
        height: auto;
        max-height: calc(100dvh - 24px);
        max-width: none;
        border: 1px solid #eaecf0;
        border-radius: 16px;
      }
      /* Header — keep it tight and let the unit label truncate */
      .mt-header { padding: 8px 12px; gap: 8px; }
      .mt-header-left { gap: 8px; flex: 1; }
      .mt-header-unit {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      .mt-header-logo { height: 20px; }
      /* WhatsApp pill becomes icon-only to save room */
      .mt-pill-wa { padding: 6px; }
      .mt-pill-wa span { display: none; }
      .mt-close { flex-shrink: 0; }

      /* Body scrolls as ONE unit — no nested scroll, so the image scrolls
         away with the content instead of staying pinned ("sticky"). */
      .mt-body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .mt-left-inner {
        padding: 14px 14px 12px;
        overflow: visible;
        flex: none;
      }
      /* Image/gallery panel sits at the TOP and scrolls with the page */
      .mt-right { order: -1; }
      .mt-gallery-img { width: 100%; height: auto; max-height: none; object-fit: contain; }

      /* CTA row — buttons stack so labels never clip, and stay pinned to the
         bottom of the modal while the content scrolls behind them. */
      .mt-cta-row {
        flex-direction: row;
        gap: 8px;
        padding: 12px 14px;
        position: sticky;
        bottom: 0;
        z-index: 5;
        box-shadow: 0 -4px 12px rgba(14, 18, 27, 0.06);
      }
      .mt-btn-secondary,
      .mt-btn-primary { flex: 1 1 0; width: auto; min-width: 0; padding: 11px 10px; }

      /* Gallery / tabs / thumbs */
      .mt-right {     min-height: auto; }
      /* height auto + no clipping so the whole image shows (never cropped) */
      .mt-gallery { flex: none; min-height: 0; height: auto; overflow: visible; }
      .mt-tab { padding: 9px 6px; font-size: 9px; }
      .mt-tab span,
      .mt-tab { letter-spacing: 0.03em; }
      .mt-thumbs { flex-wrap: nowrap; }
      .mt-thumb { width: 56px; height: 40px; }
    }


/* ── Evitar auto-zoom de iOS al enfocar inputs en móvil ──
   iOS Safari hace zoom cuando el campo enfocado tiene font-size < 16px.
   Forzar 16px en los campos en pantallas táctiles lo desactiva sin
   bloquear el pinch-zoom del usuario. */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}