/* ============================================================================
   AJUSTES RESPONSIVE sobre la capa de marca
   ============================================================================
   Se carga justo detrás de public/lujo/lujo.css. La capa viene tal cual del
   repo de Samuel y se deja así para poder seguir trayendo sus cambios; lo que
   hay que corregirle de tamaños va aquí, con #moreInfoModal delante para ganar
   a sus !important sin depender del orden.

   Anchos revisados: 320, 375, 390, 414, 480, 768, 1024 (vertical y
   horizontal), 1280, 1440, 1600 y 1920.
   ========================================================================== */

/* Alto de la ficha a dos columnas: contra el overlay (fijo a pantalla
   completa, con su relleno), no en vh. En Bahía Mar la capa escala la página
   con `zoom` desde 1800 px, el vh se escala con ella y la ficha medía 980 px
   en una pantalla de 900: se perdían la cabecera y los botones. Un porcentaje
   del overlay no depende del zoom. Va antes del bloque de tablet: allí la
   ficha apilada tiene que ganarle. */

@media (min-width: 901px){
  #moreInfoModal .mt-shell{ height: min(860px, 100%) !important; max-height: 100% !important; }
}
/* ── Ficha de la unidad en tablet ─────────────────────────────────────────
   La capa fija las dos columnas (440 px de ficha + galería) a cualquier ancho
   y pisa el apilado que style.css ya hacía por debajo de 900 px. En un iPad
   (768, y el Pro en vertical, 1024 × 1366) la galería se quedaba en ~210 px:
   la barra «Agregar a la lista · Aviso legal · Compartir · Descargar» partía
   en dos líneas y «Descargar» se iba fuera.

   En tablet vertical va apilada, como en el móvil: la foto arriba a todo lo
   ancho, la ficha debajo y los dos botones fijos al pie; el conjunto hace
   scroll de una pieza. */
@media (min-width: 601px) and (max-width: 900px),
       (min-width: 601px) and (max-width: 1180px) and (orientation: portrait){
  #moreInfoModal.mt-overlay{ padding: 24px; }
  #moreInfoModal .mt-shell{
    max-width: 820px !important;
    height: auto !important;
    max-height: calc(100dvh - 48px) !important;
  }
  #moreInfoModal .mt-body{
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #moreInfoModal .mt-right{ order: -1; flex: none; min-height: 0; }
  #moreInfoModal .mt-gallery{ flex: none; height: min(60vw, 540px); min-height: 0; }
  #moreInfoModal .mt-left{
    flex: none; min-height: 0;
    border-right: 0 !important;
  }
  #moreInfoModal .mt-left-inner{ flex: none; overflow: visible; padding: 32px 40px 28px !important; }
  #moreInfoModal .mt-cta-row{
    position: sticky; bottom: 0; z-index: 5;
    padding: 14px 40px !important;
    box-shadow: 0 -10px 24px -18px rgba(25,25,25,.35);
  }
  #moreInfoModal .mt-thumbs{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #moreInfoModal .mt-thumbs::-webkit-scrollbar{ display: none; }
}

/* A dos columnas en pantallas justas (portátil pequeño, iPad en horizontal):
   ficha algo más estrecha para que la galería conserve sitio, y las pestañas
   en una sola línea. */
@media (min-width: 901px) and (max-width: 1280px){
  #moreInfoModal .mt-body{ grid-template-columns: minmax(360px, 400px) minmax(0, 1fr) !important; }
  #moreInfoModal .mt-left-inner{ padding: 28px 28px 24px !important; }
  #moreInfoModal .mt-cta-row{ padding: 14px 28px !important; }
  #moreInfoModal .mt-cta-row > button{ padding: 0 10px !important; letter-spacing: .1em !important; white-space: nowrap; }
}
@media (min-width: 601px){
  #moreInfoModal .mt-tab{ white-space: nowrap; min-width: 0; }
  #moreInfoModal .mt-tab > span{ overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 601px) and (max-width: 1280px){
  #moreInfoModal .mt-tab{ letter-spacing: .1em !important; padding-inline: 8px !important; }
}

/* Pantalla baja (portátil a 1280 × 720, tablet en horizontal): menos margen,
   para que la ficha use el alto que hay. */
@media (min-width: 901px) and (max-height: 760px){
  #moreInfoModal.mt-overlay{ padding: 12px; }
  #moreInfoModal .mt-shell{ height: 100% !important; }
}

/* ── Cuadrícula / Lista + mapa a 320 px ───────────────────────────────────
   La fila mide 336 px y se salía 8 px por cada lado. Solo por debajo de
   360 px: menos hueco y menos relleno; el diseño de la píldora no cambia. */
@media (max-width: 359px){
  .fg-toggle-container{ gap: 8px; }
  .fg-toggle{ gap: 2px; }
  .fg-toggle button{ min-width: 0; padding: 10px 12px; font-size: 15px; }
}

/* ── Buscador del filtro en escritorio ────────────────────────────────────
   Mide 132 px fijos y con la letra de la capa el placeholder se quedaba en
   «No. de unid». Donde la fila tiene sitio, el ancho justo para leerlo. */
@media (min-width: 1180px){
  .fg-filter-bar .fg-search{ width: 164px; }
}

/* ── «Filtros» en el iPhone ───────────────────────────────────────────────
   Con la letra que pinta Safari la palabra no cabía en el botón y se leía
   «Filtro». El botón nunca más estrecho que su texto; cede el buscador. */
@media (max-width: 768px){
  .fg-filter-bar .fg-filters-mobile-trigger{ flex: 0 0 auto; min-width: max-content; }
  .fg-filter-bar .fg-search{ min-width: 0; }
}

/* ── Ficha de la unidad en móvil estrecho (Z Fold plegado, 344 px) ─────────
   «Agregar a la lista · Aviso legal · Compartir · Descargar» no cabía en una
   línea y «Descargar» quedaba fuera de la pantalla (Miguel, 26 oct). Por
   debajo de 420 px: cuatro columnas iguales con el icono encima del texto. */
@media (max-width: 420px){
  #moreInfoModal .mt-tabs{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #moreInfoModal .mt-tab{
    flex-direction: column !important; justify-content: center; gap: 4px !important;
    min-width: 0; padding: 9px 3px !important;
    font-size: 9px !important; letter-spacing: .06em !important; line-height: 1.2 !important;
    white-space: normal !important; text-align: center;
  }
  #moreInfoModal .mt-tab > span{ white-space: normal; }
}

/* ── Ficha de la unidad en horizontal con poca altura ─────────────────────
   Móvil girado (iPhone 844 × 390, Z Fold plegado 882 × 344): caía en el
   apilado de tablet y la galería, de 60vw de alto, llenaba toda la pantalla;
   no se veían ni los datos ni los botones. Con menos de 560 px de alto, dos
   columnas como en escritorio: la ficha con su scroll y los botones al pie. */
@media (min-width: 601px) and (max-height: 560px) and (orientation: landscape){
  #moreInfoModal.mt-overlay{ padding: 8px !important; }
  #moreInfoModal .mt-shell{ max-width: none !important; height: calc(100dvh - 16px) !important; max-height: none !important; }
  #moreInfoModal .mt-body{
    display: grid !important; grid-template-columns: minmax(280px, 44%) minmax(0, 1fr) !important;
    overflow: hidden !important; min-height: 0;
  }
  #moreInfoModal .mt-right{ order: 0 !important; min-height: 0; display: flex; flex-direction: column; }
  #moreInfoModal .mt-gallery{ flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
  #moreInfoModal .mt-thumbs{ display: none !important; }
  #moreInfoModal .mt-left{ min-height: 0; overflow: hidden; display: flex !important; flex-direction: column; }
  #moreInfoModal .mt-left-inner{ flex: 1 1 auto !important; min-height: 0; overflow-y: auto !important; padding: 16px 20px !important; }
  #moreInfoModal .mt-cta-row{ position: static !important; padding: 10px 14px !important; gap: 8px !important; box-shadow: none !important; }
  #moreInfoModal .mt-cta-row > button{
    flex: 1 1 0 !important; min-width: 0 !important; height: 44px !important; padding: 0 8px !important;
    font-size: 10px !important; letter-spacing: .08em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
/* Y si además es estrecho (móvil pequeño girado, 667 × 375): los botones en
   dos líneas en vez de cortados, y la barra de acciones con el icono encima. */
@media (min-width: 601px) and (max-width: 760px) and (max-height: 560px) and (orientation: landscape){
  #moreInfoModal .mt-cta-row > button{ white-space: normal !important; line-height: 1.15 !important; text-overflow: clip; }
  #moreInfoModal .mt-tabs{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #moreInfoModal .mt-tab{
    flex-direction: column !important; justify-content: center; gap: 3px !important;
    padding: 7px 3px !important; font-size: 9px !important; letter-spacing: .06em !important;
    line-height: 1.2 !important; white-space: normal !important; text-align: center;
  }
  #moreInfoModal .mt-tab > span{ white-space: normal; }
}