* {
      font-family: 'Open Sans', 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: 'Open Sans', 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: 'Open Sans', 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: 'Open Sans', 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: #2b2b1a;                        inherits: true; }
    @property --brand-soft    { syntax: '<color>'; initial-value: rgba(43, 43, 26, 0.10);       inherits: true; }
    @property --brand-soft-2  { syntax: '<color>'; initial-value: rgba(43, 43, 26, 0.08);       inherits: true; }
    @property --brand-soft-3  { syntax: '<color>'; initial-value: rgba(43, 43, 26, 0.18);       inherits: true; }
    @property --brand-ring    { syntax: '<color>'; initial-value: rgba(43, 43, 26, 0.45);       inherits: true; }
    @property --brand-overlay { syntax: '<color>'; initial-value: rgba(43, 43, 26, 0.78);       inherits: true; }

    :root {
      --brand:         #2b2b1a;
      --brand-soft:    rgba(43, 43, 26, 0.10);
      --brand-soft-2:  rgba(43, 43, 26, 0.08);
      --brand-soft-3:  rgba(43, 43, 26, 0.18);
      --brand-ring:    rgba(43, 43, 26, 0.45);
      --brand-overlay: rgba(43, 43, 26, 0.78);
      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 / 620;
      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%);
    }
    /* Siebe no tiene recorte del edificio como Naviva/LIV: el render del
       estudio es una foto completa, así que su capa cubre todo el escenario
       en vez de apoyarse abajo, y el rótulo pasa por encima con un velo para
       que siga leyéndose. */
    /* Antes de que entre el render, el escenario mostraba el celeste de
       relleno y la capa de cielo de Makai: un azul que no pega nada con el
       atardecer de Siebe. Estos tonos salen de muestrear el propio render
       (esquinas de cielo: #EAAC6B y #F8B96B a la izquierda, #B28B74 a la
       derecha), así que el fondo previo y la foto son el mismo cielo. */
    .fg-hero[data-active="siebe"] {
      background: linear-gradient(105deg, #f3b46e 0%, #e2a274 45%, #b98d72 100%);
    }
    .fg-hero[data-active="siebe"] .fg-hero-sky {
      display: none;
    }

    .fg-hero-building[data-project="siebe"] {
      top: 0;
      bottom: 0;
      height: 100%;
      object-fit: cover;
      object-position: center 62%;
      z-index: 2;
    }
    /* Va en ::before y no en ::after: ese ya está ocupado por el difuminado
       blanco del borde inferior, que es de altura 6%. Reusarlo hacía que este
       velo heredara esa altura y se pintara sólo en los 52px de arriba, con
       un corte seco a todo lo ancho, y de paso se comía el difuminado. */
    .fg-hero[data-active="siebe"]::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(30,28,26,0.42) 0%, rgba(30,28,26,0.10) 42%, rgba(30,28,26,0.30) 100%);
    }
    .fg-hero[data-active="siebe"] .fg-hero-text[data-project="siebe"] {
      z-index: 4;
      /* El degradado de base va teñido con el celeste del cielo de Makai y al
         37% de opacidad; sobre el render de atardecer de Siebe el rótulo se
         perdía. Mismo truco (degradado recortado al texto, sin blend-mode),
         pero en el crema de marca y bastante más sólido. */
      background: linear-gradient(to bottom,
        rgba(241,237,233,0.92) 30%,
        rgba(241,237,233,0.55) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: none;
      filter: drop-shadow(0 4px 24px rgba(30,28,26,0.40));
    }

    .fg-hero-text {
      position: absolute;
      left: 0;
      right: 0;
      top: 20%;
      z-index: 2;
      display: none;
      text-align: center;
      font-family: 'Lora', Georgia, serif;
      font-weight: 700;
      font-size: clamp(80px, 22vw, 300px);
      line-height: 1;
      letter-spacing: 0.2em;
      /* El degradado va teñido con el celeste real del cielo (rgb(133,211,255))
         en vez de blanco puro. Antes esto era blanco + mix-blend-mode:luminosity,
         que sobre un texto de hasta 300px obliga a releer el fondo y mezclar
         píxel por píxel en CADA frame: con la entrada de 1.6s y el translateX
         de 0.8s del slider encima, era la causa principal del tirón. El tinte
         llega al mismo resultado porque la fuente era acromática. */
      background: linear-gradient(to bottom,
        rgba(226,243,255,0.52) 37.79%,
        rgba(226,243,255,0.10) 86.925%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      opacity: 0;
      transform: translateY(-180%);
    }
    /* Active project: visible + entrance animation */
    .fg-hero[data-active="siebe"]  .fg-hero-text[data-project="siebe"],
    .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="siebe"]  .fg-hero-building[data-project="siebe"],
    .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="siebe"]  .fg-hero-text[data-project="siebe"]: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="siebe"]  .fg-hero-building[data-project="siebe"]: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 — MOBILE: the 1366/620 ratio collapses the height on narrow
       screens and squishes the building. Give it a proper portrait height. */
    @media (max-width: 768px) {
      .fg-hero {
        aspect-ratio: auto;
        height: 52vh;
        min-height: 380px;
        max-height: 560px;
      }
      /* 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;
      }
      /* Building enlarged and horizontally centered (margin keeps the entrance
         translateY animation intact, since it only touches transform). */
      .fg-hero-building {
        width: 200%;
        left: 50%;
        margin-left: -100%;
        right: auto;
        bottom: 0;
      }
      .fg-hero-text {
        top: 30%;
        font-size: clamp(64px, 28vw, 200px);
        /* Compensate the trailing letter-spacing so the word reads centered */
        text-indent: 0.2em;
      }
    }

    @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 / 620;
    }
    @media (max-width: 768px) {
      .fg-stage.has-slider { aspect-ratio: auto; height: 52vh; min-height: 380px; max-height: 560px; }
    }

    /* 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) — sits below the toggle, aligned with the cards grid */
    .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, #2b2b1a);
      color: var(--brand, #2b2b1a);
      background: #fff;
      box-shadow: 0 0 0 1px var(--brand, #2b2b1a) inset;
    }
    .fg-filter-btn.is-active:hover { background: #fff; border-color: var(--brand, #2b2b1a); }
    .fg-filter-btn.is-active .fg-caret { color: var(--brand, #2b2b1a); }

    /* 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, #2b2b1a);
      box-shadow: 0 0 0 1px var(--brand, #2b2b1a) inset;
    }
    .fg-search.is-active input { color: var(--brand, #2b2b1a); }
    .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 — outer slate container with 2 pills + floating map-pin button */
    .fg-toggle-container {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 8px;
      background: #f2f5f8;
      border: 1px solid #eaecf0;
      border-radius: 100px;
    }
    .fg-toggle {
      display: inline-flex;
      align-items: stretch;
      gap: 6px;
      position: relative;
      background: transparent;
      border: 0;
      padding: 0;
      box-shadow: none;
    }
    .fg-toggle-bg-active {
      position: absolute;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%),
        var(--brand, rgb(43, 43, 26));
      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);
      box-shadow: var(--brand-toggle-shadow,
        0 55px 16px 0 rgba(43,43,26,0.01),
        0 36px 14px 0 rgba(43,43,26,0.05),
        0 20px 12px 0 rgba(43,43,26,0.16),
        0 9px 9px  0 rgba(43,43,26,0.27),
        0 2px 5px  0 rgba(43,43,26,0.31));
      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, #2b2b1a); }
    .fg-toggle button:not(.active) svg { color: #7b7b7b; transition: color 0.22s ease; }
    .fg-toggle button:not(.active):hover svg { color: var(--brand, #2b2b1a); }

    /* 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;
    }
    .fg-toggle-bar {
      display: flex;
      justify-content: center;
      padding: 28px 24px 16px;
      padding-top: 0px;
      background: #f2f5f8;
    }
    
    .fg-toggle-container {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    /* Floating round map-pin button — sits inside container next to toggle */
    .fg-location-button {
      background: transparent;
      border-radius: 100px;
      padding: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .fg-location-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      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(43, 43, 26, 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, #2b2b1a); transition: color 0.6s ease; }
    .fg-location-btn.active {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%),
        var(--brand, rgb(43, 43, 26));
      border: none;
      box-shadow: var(--brand-toggle-shadow,
        0 55px 16px 0 rgba(43,43,26,0.01),
        0 36px 14px 0 rgba(43,43,26,0.05),
        0 20px 12px 0 rgba(43,43,26,0.16),
        0 9px 9px  0 rgba(43,43,26,0.27),
        0 2px 5px  0 rgba(43,43,26,0.31));
    }
    .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(43,43,26,0.10));
      color: var(--brand, #2b2b1a);
    }
    .fg-project-empty-title {
      margin: 0 0 10px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: var(--brand, #2b2b1a);
    }
    .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, #2b2b1a);
    }
    .fg-project-empty-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      background: var(--brand, #2b2b1a);
      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; }
    }
    
    .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: #2b2b1a;
      background: rgba(43, 43, 26, 0.05);
    }
    
    .fg-social-icon svg {
      width: 20px;
      height: 20px;
      color: #5c5c5c;
      transition: color 0.2s ease;
    }
    
    .fg-social-icon:hover svg {
      color: #2b2b1a;
    }

    /* 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; }
    }

    /* ============================================
       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, #f1ede9) !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 — Siebe v2.1 spec */
    .fg-card {
      --status-color: var(--brand);
      --status-soft: rgba(43, 43, 26, 0.10);
      --status-bg-faint: rgba(43, 43, 26, 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: 26px 12px 12px;
      /* Difuminado que muere hacia arriba: así el rótulo se apoya en la foto
         en vez de quedar como una barra pegada encima. El dorado chillón de
         antes (#ffc93c sobre azul oscuro) venía de otro proyecto y no pega con
         la paleta del brandbook. */
      background: linear-gradient(to top,
        rgba(30, 28, 26, 0.80) 0%,
        rgba(30, 28, 26, 0.45) 55%,
        rgba(30, 28, 26, 0) 100%);
      /* 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: 1.1px;
      color: #f1ede9;
      text-shadow: 0 1px 6px rgba(30, 28, 26, 0.55);
      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: #2b2b1a; }
    .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, #2b2b1a);
      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: #2b2b1a; 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: #2b2b1a;
      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, #2b2b1a 0%, #3f3f28 100%);
      border-color: rgba(255,255,255,0.12);
      box-shadow:
        0 9px 9px 0 rgba(43,43,26,0.18),
        0 2px 5px 0 rgba(43,43,26,0.28);
      transform: translateY(-1px);
    }
    .fg-chip-floor.is-active:hover {
      transform: translateY(-2px);
      box-shadow:
        0 12px 16px 0 rgba(43,43,26,0.22),
        0 2px 5px 0 rgba(43,43,26,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 #e8e4dc;
      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: #f5f2ec; }
    .fg-plan-piso-option.is-active .fg-plan-piso-option-name { color: #2b2b1a; }
    .fg-plan-piso-option.is-active .fg-plan-piso-option-count {
      background: #2b2b1a;
      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: #2b2b1a;                  /* siebe 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: #2b2b1a; }

    /* === 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: #e6e2d6;
        box-shadow: 0 0 0 3px rgba(43,43,26,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 #e8e4dc;
      }
      .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 { 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;
      grid-template-columns: 468px 1fr;
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }

    /* === 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: #2b2b1a;
      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: #868269;
      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: #3f3f28; }
    .mt-projected-row .future { font-weight: 600; font-size: 16px; color: #1daf61; }
    .mt-projected-row .hint { font-size: 10px; color: #3f3f28; }
    .mt-projected-row svg { color: #3f3f28; }

    .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, #2b2b1a, #3f3f28);
      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: #2b2b1a; }

    .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, #2b2b1a);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      box-shadow: 0 0 0 1px var(--brand, #2b2b1a), 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, #2b2b1a); }
    .mt-tab.is-fav svg { fill: var(--brand, #2b2b1a); stroke: var(--brand, #2b2b1a); }
    .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;
    }
    .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;
    }
    .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 #2b2b1a;
    }
    .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: 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: wrap; }
      .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;
  }
}