/* ============================================================================
   CAPA DE MARCA — Siebe Residences sobre la plataforma Urbatrix
   ============================================================================

   Qué es: la capa «lujo» de Bahía Mar (urbatrix-bahia-mar/clon-lujo, la que
   Derick ya tiene en producción en landmass.urbatrix.com) adaptada a Siebe.
   Se carga DESPUÉS de todo el CSS del sitio (al final del <body>) y cambia la
   marca sin tocar la estructura de Urbatrix.

   Lo que toca (encargo de Miguel y Samuel, 19 oct 2026):
     · el hero: slider propio con los renders de Siebe y, al bajar, la página
       sube por encima del hero como una hoja (la «Hoja» de Bahía Mar);
     · las tarjetas de las unidades: paleta, tipografía e iconografía de Siebe;
     · la ficha (popup) y el registro: los de Bahía Mar, con la marca de Siebe.
   Lo que NO toca: el header y el footer, que son los de Urbatrix y son iguales
   en todos los proyectos. Ni una regla de esta hoja entra en <nav> ni en
   .fg-footer (salvo el apilado del footer sobre el hero fijo, que no cambia
   cómo se ve).

   Siebe es un solo desarrollo: no hay tipologías (las 5 bandas de Bahía Mar),
   el hero lleva directamente a las tarjetas.

   De dónde sale el lenguaje: sieberesidences.com (la landing de GHL):
   Cormorant Garamond en mayúsculas espaciadas para los títulos, Poppins para
   todo lo demás, grises fríos (#F5F6F6, #E9EBEB, #4D5959, #2E3636) y botones
   planos en #191919 con esquinas de 7 px. Más corporativo que Bahía Mar:
   esquinas casi rectas y sin decoración.

   Mapa:
     0. Tokens de marca         5. Tarjetas de las unidades
     1. Tipografía              6. Estados: reservada y vendida
     2. Hero                    7. Ficha de la unidad (popup)
     3. La Hoja (hero → lista)  8. Registro: comprador o broker
     4. Filtros y vistas        9. Foco y movimiento reducido
   ========================================================================== */

/* ── 0. TOKENS DE MARCA ───────────────────────────────────────────────────
   Lo único que cambia de una promotora a otra. Valores de sieberesidences.com
   (variables del tema de la landing y estilos calculados, 19 oct). */
:root{
  /* Color */
  --lx-ink:      #191919;               /* botones y acciones */
  --lx-text:     #2E3636;               /* títulos y cifras */
  --lx-body:     #4D5959;               /* texto (el de la landing): 6,9:1 sobre el papel */
  --lx-faint:    #5F6A6A;               /* etiquetas pequeñas: 5,2:1 sobre el papel */
  --lx-paper:    #F5F6F6;               /* fondo de página */
  --lx-surface:  #FFFFFF;               /* tarjetas y paneles */
  --lx-mist:     #E9EBEB;               /* bloques y huecos de foto */
  --lx-deep:     #2E3636;               /* superficies oscuras */
  --lx-line:     rgba(46,54,54,.16);    /* filetes */
  --lx-hair:     rgba(46,54,54,.09);
  --lx-on-dark:  #F5F6F6;
  --lx-ok:       #5B7B6B;               /* «disponible»: el verde gris de la landing, sin semáforo */
  --lx-reserved: #8A6A43;               /* bronce apagado */
  --lx-sold:     #6E7878;               /* gris */

  /* Tipografía */
  --lx-font-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --lx-font-ui:      'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --lx-track-display: .12em;            /* títulos en mayúsculas, como la landing */
  --lx-track-eyebrow: .22em;
  --lx-track-button:  .16em;

  /* Forma: la landing usa 7 px en todo. */
  --lx-radius-lg: 12px;                 /* ficha y registro (lo que flota) */
  --lx-radius:    10px;                 /* tarjetas */
  --lx-radius-sm: 7px;                  /* botones y recuadros */
  --lx-radius-xs: 4px;                  /* miniaturas y chips */
  --lx-shadow:    0 1px 2px rgba(25,25,25,.04), 0 16px 36px -22px rgba(25,25,25,.28);

  /* Ritmo (los de Bahía Mar) */
  --lx-ease:     cubic-bezier(.76,0,.24,1);
  --lx-ease-out: cubic-bezier(.25,1,.5,1);
  --lx-dur-s: .4s;
  --lx-dur-m: .8s;
  --lx-dur-l: 1.2s;
}

/* ── 1. TIPOGRAFÍA ────────────────────────────────────────────────────────
   Solo en lo que es de la capa: la lista de unidades, la ficha, el registro y
   el hero. El header y el footer se quedan con la letra de Urbatrix. El
   sitio escribe la fuente en línea (style="") en muchos sitios: de ahí el
   !important. Los iconos de PrimeIcons van en <i class="pi"> y no se tocan. */
/* :where() para que el ámbito no sume especificidad: si no, el id de la lista
   ganaría a las reglas de Cormorant de más abajo. */
:where(#main-unit-reserve-list, #moreInfoModal, .lx-reg, .lx-hero, .ps-acc, .ps-teaser),
:where(#main-unit-reserve-list, #moreInfoModal, .lx-reg, .lx-hero) :is(button,input,select,textarea,span,div,p,a,label,td,th,li,b,strong,small,em,h1,h2,h3,h4,h5,h6,sup,dt,dd){
  font-family: var(--lx-font-ui) !important;
}
#main-unit-reserve-list, #moreInfoModal, .lx-reg{
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "lnum";
}
::selection{ background: var(--lx-text); color: var(--lx-paper); }

/* ── 2. HERO (lujo.js → hero) ─────────────────────────────────────────────
   Como en Bahía Mar: fuera la escena del sitio (cielo + «SIEBE» gigante +
   render recortado, que a 390 px se salía por los lados) y en su lugar un
   slider propio a sangre dentro del mismo .fg-stage, con el telón diagonal,
   8 s por imagen. La marca, pequeña y abajo a la izquierda. */
.fg-stage.lx-hero-on > .hs-track,
.fg-stage.lx-hero-on > .hs-slider-nav{ visibility: hidden !important; }
.fg-stage.lx-hero-on{ overflow: hidden; background: var(--lx-deep); }
@media (min-width: 901px){
  .fg-stage.lx-hero-on{ aspect-ratio: auto !important; height: clamp(480px, 42vw, 720px) !important; }
}
@media (max-width: 900px){
  .fg-stage.lx-hero-on{ aspect-ratio: auto !important; height: clamp(420px, 64vh, 560px) !important; }
}
.lx-hero{ position: absolute; inset: 0; z-index: 3; overflow: hidden; background: var(--lx-deep); }
.lx-hero-capas{ position: absolute; inset: 0; display: grid; }
.lx-telon-capa{ grid-area: 1 / 1; margin: 0; overflow: hidden; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
.lx-telon-capa.is-activa{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 2; }
.lx-telon-capa.is-saliendo{ z-index: 1; animation: lx-telon-sale var(--lx-telon) both; }
.lx-telon-capa.is-entrando{ animation: lx-telon-entra var(--lx-telon) both; }
.lx-telon-capa img{ width: 100%; height: 100%; object-fit: cover; display: block; object-position: var(--lx-foco, 50% 50%); }
.lx-telon-capa.is-entrando img{ animation: lx-telon-foto-entra var(--lx-telon) both; }
.lx-telon-capa.is-saliendo img{ animation: lx-telon-foto-sale var(--lx-telon) both; }
/* Acercamiento casi imperceptible mientras la imagen está en pantalla. */
.lx-telon-capa.is-activa:not(.is-entrando) img{ animation: lx-acerca 9s linear both; }
@keyframes lx-acerca{ from{ transform: scale(1); } to{ transform: scale(1.04); } }

/* El telón: el de la landing de Bahía Mar (mismos polígonos y curva). */
@keyframes lx-telon-entra{
  from{ clip-path: polygon(100% 0%, 100% 0%, 101% 100%, 125% 100%); }
  to  { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes lx-telon-sale{
  from{ clip-path: polygon(0% 0%, 100% 0%, 125% 100%, 0% 100%); }
  to  { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
}
@keyframes lx-telon-foto-entra{ from{ transform: scale(1.5) translateX(25%); } to{ transform: none; } }
@keyframes lx-telon-foto-sale { from{ transform: none; } to{ transform: scale(1.5) translateX(-25%); } }
:root{ --lx-telon: 1.2s cubic-bezier(.75,0,.25,1); }

/* Velo: arriba, lo justo para que el header blanco no se pierda en un cielo
   claro; abajo, para que el pie se lea sobre cualquier render. */
.lx-hero::before,
.lx-hero::after{ content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.lx-hero::before{ top: 0; height: 28%; background: linear-gradient(to bottom, rgba(25,25,25,.30), rgba(25,25,25,0)); }
.lx-hero::after{ bottom: 0; height: 55%; background: linear-gradient(to top, rgba(25,25,25,.66), rgba(25,25,25,0)); }

.lx-hero-pie{
  position: absolute; z-index: 4;
  left: clamp(24px, 5vw, 80px); bottom: clamp(30px, 4.6vw, 68px);
  color: var(--lx-on-dark);
}
.lx-hero-logo{ display: block; width: clamp(104px, 9vw, 150px); height: auto; margin-bottom: 20px; }
.lx-hero-sub{
  margin: 0; font-size: clamp(10px, .78vw, 12px) !important; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; opacity: .9;
}
.lx-hero-titulo{
  margin: 10px 0 0; max-width: 24ch;
  font-family: var(--lx-font-display) !important; font-weight: 500;
  font-size: clamp(22px, 2vw, 34px); line-height: 1.15;
  letter-spacing: .06em; text-transform: uppercase;
}
.lx-hero-ir{
  margin-top: 24px; padding: 0 0 6px; border: 0; background: none; cursor: pointer;
  border-bottom: 1px solid rgba(245,246,246,.7); color: var(--lx-on-dark);
  font-size: 11px !important; font-weight: 500; letter-spacing: var(--lx-track-button); text-transform: uppercase;
  transition: opacity var(--lx-dur-s) var(--lx-ease-out);
}
.lx-hero-ir:hover{ opacity: .7; }
.lx-hero-ir:focus-visible{ outline: 1px solid var(--lx-on-dark); outline-offset: 4px; }

.lx-hero-indice{
  position: absolute; z-index: 4; right: clamp(24px, 5vw, 80px); bottom: clamp(34px, 4.8vw, 72px);
  display: flex; align-items: center; gap: 4px;
}
.lx-hero-indice button{
  border: 0; background: none; cursor: pointer; padding: 6px 7px;
  color: rgba(245,246,246,.6); font-size: 11px !important; font-weight: 500; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; transition: color var(--lx-dur-s) var(--lx-ease-out);
}
.lx-hero-indice button[aria-pressed="true"], .lx-hero-indice button:hover{ color: var(--lx-on-dark); }
.lx-hero-indice button:focus-visible{ outline: 1px solid var(--lx-on-dark); outline-offset: 2px; }
.lx-hero-linea{ order: -1; width: 64px; height: 1px; margin-right: 12px; background: rgba(245,246,246,.3); overflow: hidden; }
.lx-hero-linea i{ display: block; height: 100%; background: var(--lx-on-dark); transform-origin: 0 50%; transform: scaleX(0); }
.lx-hero-linea i.is-corriendo{ animation: lx-progreso 8s linear forwards; }
@keyframes lx-progreso{ to{ transform: scaleX(1); } }
.lx-hero-sombra{ position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #111; opacity: 0; }
@media (max-width: 768px){
  /* En móvil el índice no cabe junto al pie: queda solo la línea de
     progreso, arriba a la derecha del pie. */
  .lx-hero-indice{ bottom: auto; top: calc(var(--lx-cabecera, 76px) + 18px); }
  .lx-hero-indice button{ display: none; }
  .lx-hero-linea{ width: 44px; margin: 0; }
  .lx-hero-sub{ letter-spacing: .2em; line-height: 1.7; }
  .lx-hero-titulo{ max-width: 20ch; font-size: 21px; }
  .lx-hero-logo{ width: 92px; margin-bottom: 16px; }
  .lx-hero-ir{ margin-top: 18px; }
}

/* ── 3. LA HOJA: DEL HERO A LAS UNIDADES ──────────────────────────────────
   La transición 1 de Bahía Mar (la que se eligió allí): el hero se queda
   fijo y la lista sube encima como una hoja, con el borde superior curvo;
   el hero se oscurece un poco al quedar debajo. lujo.js solo escribe --lx-p
   (0 → 1 según lo bajado sobre el alto del hero).
   El footer y la barra Grid/List se apilan por encima del hero fijo (z-index)
   sin cambiar cómo se ven. */
.lx-hoja .fg-hero-spacer{ display: none !important; }
.lx-hoja .fg-stage{ position: sticky !important; top: 0; z-index: 0; }
.lx-hoja #main-unit-reserve-list{
  position: relative; z-index: 3;
  margin-top: calc(-1 * var(--lx-curva, 28px)) !important;
  padding-top: var(--lx-curva, 28px);
  border-radius: var(--lx-curva, 28px) var(--lx-curva, 28px) 0 0;
  background: var(--lx-paper) !important;
  box-shadow: 0 -26px 50px -30px rgba(25,25,25,.55);
}
.lx-hoja .fg-footer{ position: relative; z-index: 2; }
.lx-hoja .lx-hero-sombra{ opacity: calc(var(--lx-p, 0) * .55); }
.lx-hoja .lx-hero-capas{ transform: scale(calc(1 + var(--lx-p, 0) * .05)); transform-origin: 50% 40%; }
.lx-hoja .lx-hero-pie,
.lx-hoja .lx-hero-indice{ opacity: calc(1 - var(--lx-p, 0) * 1.8); transform: translateY(calc(var(--lx-p, 0) * -24px)); }
@media (max-width: 900px){ html.lx-hoja{ --lx-curva: 22px; } }
@media (prefers-reduced-motion: reduce){
  /* Sin nada ligado al scroll, pero sin corte seco: la hoja curva solapa el hero. */
  .lx-hoja .fg-stage{ position: relative !important; }
  .lx-hero-sombra{ display: none; }
}
/* El pie no queda debajo de lo fijo (barra Grid/List, WhatsApp): reserva
   abajo lo que ocupen (lujo.js → hueco). Solo espacio, no aspecto. */
.fg-footer{ padding-bottom: calc(var(--lx-pie-hueco, 0px) + 8px) !important; }

/* ── 4. FILTROS Y VISTAS ──────────────────────────────────────────────────
   Misma barra y mismos controles; solo la paleta y la letra de Siebe. */
/* Sin caja alrededor de los filtros (Samuel, 19 oct): cada control va suelto,
   como en el original. Solo el contador lleva su píldora. */
.fg-filter-bar > .fg-pill-matches{
  background: var(--lx-surface) !important;
  box-shadow: 0 0 0 1px var(--lx-hair), 0 10px 30px -24px rgba(25,25,25,.35) !important;
  border-radius: var(--lx-radius-sm) !important;
}
.fg-filter-bar .fg-filter-btn,
.fg-filter-bar .fg-search input,
.fg-filter-bar .fg-pill-matches{
  font-weight: 400 !important; color: var(--lx-text) !important; letter-spacing: .02em;
}
.fg-filter-bar .fg-filter-btn{ border-radius: var(--lx-radius-sm) !important; }
.fg-filter-bar .fg-search{ background: rgba(46,54,54,.05) !important; border-radius: var(--lx-radius-sm) !important; }
/* Grid / List: la píldora redondeada del original, sin fondo propio encima
   (Samuel, 19 oct: el fondo nuevo salía con bordes rectos). Solo cambia el
   color del activo. */
.fg-toggle button span{ font-weight: 400 !important; letter-spacing: .04em; }
.fg-toggle-bg-active{ background: var(--lx-ink) !important; box-shadow: none !important; }
.fg-location-btn{ color: var(--lx-ink) !important; }

/* Botón flotante de WhatsApp: en la tinta de la marca en vez del verde
   saturado, que era lo más llamativo de la pantalla. Mismo botón. */
.fg-wa-float button{
  background: var(--lx-ink) !important;
  box-shadow: 0 12px 30px -14px rgba(25,25,25,.6) !important;
}
.fg-wa-float button svg, .fg-wa-float button svg *{ fill: var(--lx-paper) !important; }

/* Vistas Lista y Planta: la misma paleta, sin tocar su estructura. */
.fg-list-table, .fg-list-table th, .fg-list-table td{ color: var(--lx-text); }
.fg-list-table th{ font-weight: 500 !important; letter-spacing: .14em; color: var(--lx-faint) !important; }
.fg-list-table .price{ color: var(--lx-text) !important; font-weight: 400 !important; font-variant-numeric: tabular-nums; }
.fg-list-status{ background: transparent !important; color: var(--lx-text) !important; font-weight: 500 !important; letter-spacing: .12em !important; font-size: 10px !important; padding-left: 0 !important; }
.fg-list-status::before{ background: var(--lx-ok) !important; }
.fg-list-status.reserved::before{ background: var(--lx-reserved) !important; }
.fg-list-status.sold::before{ background: var(--lx-sold) !important; }
.fg-list-info-btn, .fg-list-cta{
  height: 32px; border-radius: var(--lx-radius-sm) !important; box-shadow: none !important;
  font-size: 10px !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase;
}
.fg-list-info-btn{ background: transparent !important; border: 1px solid var(--lx-line) !important; color: var(--lx-ink) !important; }
.fg-list-cta{ background: var(--lx-ink) !important; border: 1px solid var(--lx-ink) !important; color: #fff !important; }

/* ── 5. TARJETAS DE LAS UNIDADES ──────────────────────────────────────────
   Misma tarjeta y mismo grid que Urbatrix. Lo que cambia, con la estructura
   que se aprobó en Bahía Mar (las maquetas de Miguel):
   · foto a sangre arriba, con el estado en un chip; el corazón, solo icono;
   · «Residence» pequeño y el número grande en Cormorant; debajo,
     «1 bedroom · 1st floor»;
   · precio y $/m² en una fila, «Reserve from $5,000» debajo;
   · las medidas con icono y etiqueta (la iconografía de la marca: trazo
     fino, en el gris de la landing), en vez de seis iconos sin nombre;
   · dos botones planos de 7 px, como los de la landing.
   Los bloques nuevos (.lx-chips, .lx-specs, .lx-reserva, .lx-unidad) los
   inserta lujo.js; .fg-stats, el banner y el texto del corazón se ocultan. */
#main-unit-reserve-list{ background: var(--lx-paper) !important; }
.fg-units-grid{ gap: 26px 22px !important; align-items: stretch !important; }
/* Misma altura en toda la fila y los botones siempre abajo. */
.fg-units-grid > .fg-card{ height: 100%; }
.fg-units-grid > .fg-card .fg-card-inner{ flex: 1 1 auto; display: flex !important; flex-direction: column !important; }
.fg-units-grid > .fg-card .fg-card-body{ flex: 1 1 auto; display: flex !important; flex-direction: column !important; }
.fg-units-grid > .fg-card .fg-card-actions{ margin-top: auto !important; padding-top: 20px; }
.fg-units-grid > .fg-card,
.fg-units-grid > .fg-card .fg-card-inner{
  background: var(--lx-surface) !important;
  border-radius: var(--lx-radius) !important;
}
.fg-units-grid > .fg-card{
  box-shadow: 0 0 0 1px var(--lx-hair) !important;
  transition: box-shadow var(--lx-dur-m) var(--lx-ease-out) !important;
  transform: none !important;
}
@media (hover:hover){
  .fg-units-grid > .fg-card:hover{ box-shadow: 0 0 0 1px var(--lx-line), var(--lx-shadow) !important; }
}
.fg-units-grid > .fg-card .fg-card-inner{ padding: 0 !important; gap: 0 !important; }
.fg-units-grid > .fg-card .fg-card-img{
  height: auto !important; aspect-ratio: 4 / 3;
  border-radius: var(--lx-radius) var(--lx-radius) 0 0 !important;
  background: var(--lx-mist) !important;
}
.fg-units-grid > .fg-card .fg-card-img > img{
  transition: transform 1.4s var(--lx-ease-out), filter var(--lx-dur-m) var(--lx-ease-out), opacity .6s var(--lx-ease-out) !important;
}
.fg-units-grid > .fg-card .fg-card-img > img.lx-img-espera{ opacity: 0 !important; }
@media (hover:hover){
  .fg-units-grid > .fg-card:hover .fg-card-img > img{ transform: scale(1.03); }
}
.fg-units-grid > .fg-card .fg-reserve-banner,
.fg-units-grid > .fg-card .fg-stats,
.fg-units-grid > .fg-card .fg-card-body::before,
.fg-units-grid > .fg-card .fg-sold-badge,
.fg-units-grid > .fg-card .fg-card-status-strip,
.fg-units-grid > .fg-card .fg-card-status-overlay,
.fg-units-grid > .fg-card .fg-add-to-list .text{ display: none !important; }
.fg-units-grid > .fg-card .fg-card-img::after,
.fg-units-grid > .fg-card .fg-card-img::before{ content: none !important; }

/* Corazón: círculo blanco, solo icono. */
.fg-units-grid > .fg-card .fg-chip-row{ padding: 14px !important; justify-content: flex-end !important; }
.fg-units-grid > .fg-card .fg-chip-row > span:empty{ display: none; }
.fg-units-grid > .fg-card .fg-add-to-list{
  width: 36px !important; height: 36px !important; padding: 0 !important;
  justify-content: center !important;
  border-radius: 50% !important; border: 0 !important;
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fg-units-grid > .fg-card .fg-add-to-list .heart svg{ color: var(--lx-ink) !important; width: 16px; height: 16px; }

.lx-chips{
  position: absolute; z-index: 6; left: 14px; top: 14px;
  display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 70px);
}
.lx-chip{
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 10px;
  border-radius: var(--lx-radius-xs);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--lx-text);
  font-size: 9.5px !important; font-weight: 500 !important;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.lx-chip--available::before,
.lx-chip--reserved::before,
.lx-chip--sold::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lx-ok); }
.lx-chip--reserved::before{ background: var(--lx-reserved); }
.lx-chip--sold::before{ background: var(--lx-sold); }

.fg-units-grid > .fg-card .fg-card-body{
  position: relative; gap: 0 !important;
  padding: 22px 24px 22px !important;
}
.fg-units-grid > .fg-card .fg-card-title-row{ margin-top: 0 !important; }
.fg-units-grid > .fg-card .fg-card-title-row .name{
  display: flex; align-items: baseline; gap: 10px;
  color: var(--lx-text) !important;
}
.lx-unidad{
  font-size: 10px; font-weight: 500; letter-spacing: var(--lx-track-eyebrow); text-transform: uppercase;
  color: var(--lx-faint);
}
.lx-num{
  font-family: var(--lx-font-display) !important;
  font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: .04em;
  font-variant-numeric: lining-nums;
  color: var(--lx-text);
}
.fg-units-grid > .fg-card .fg-card-subtitle{
  margin-top: 6px;
  font-weight: 400 !important; font-size: 13px !important; line-height: 1.5 !important;
  color: var(--lx-body) !important;
}
.fg-units-grid > .fg-card .fg-card-divider{ background: var(--lx-line) !important; margin: 16px 0 14px !important; }
.fg-units-grid > .fg-card .fg-card-price{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.fg-units-grid > .fg-card .fg-card-price .price{
  font-weight: 300 !important; font-size: 25px !important;
  letter-spacing: .005em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lx-text) !important;
  text-decoration: none !important;
}
.fg-units-grid > .fg-card .fg-card-price .sqft{
  font-size: 12px !important; font-weight: 400 !important; color: var(--lx-body) !important;
}
.lx-reserva{ margin-top: 4px; font-size: 12px; letter-spacing: .02em; color: var(--lx-body); }

/* Medidas con icono: cuatro columnas iguales separadas por filetes. */
.lx-specs{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--lx-line);
}
/* Centradas en su columna (Samuel, 19 oct). */
.lx-specs > div{ display: grid; justify-items: center; text-align: center; gap: 2px; padding: 0 4px; min-width: 0; }
.lx-specs > div + div{ border-left: 1px solid var(--lx-hair); }
.lx-specs svg{
  width: 20px; height: 20px; margin-bottom: 6px;
  fill: none; stroke: var(--lx-body); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.lx-specs dt{
  font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lx-faint); white-space: nowrap;
}
.lx-specs dd{
  margin: 0; font-size: 14.5px; font-weight: 400; color: var(--lx-text);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.lx-specs dd small{ font-size: 11px; color: var(--lx-body); margin-left: 1px; }

/* Botones: los de la landing (planos, 7 px, mayúsculas espaciadas). */
.fg-units-grid > .fg-card .fg-card-actions{ gap: 12px !important; }
.fg-units-grid > .fg-card .fg-card-buttons{
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important;
}
.lx-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0 !important; min-height: 46px; padding: 8px 12px !important;
  border-radius: var(--lx-radius-sm) !important;
  background: transparent !important; color: var(--lx-ink) !important;
  border: 1px solid var(--lx-ink) !important;
  box-shadow: none !important; filter: none !important; cursor: pointer;
  font-size: 10px !important; font-weight: 500 !important; line-height: 1.35;
  letter-spacing: .1em !important; text-transform: uppercase; text-align: center; white-space: normal;
  transition: background-color var(--lx-dur-m) var(--lx-ease), color var(--lx-dur-m) var(--lx-ease), border-color var(--lx-dur-m) var(--lx-ease) !important;
}
.lx-btn:hover{ background: var(--lx-ink) !important; color: #fff !important; }
.lx-btn--lleno{ background: var(--lx-ink) !important; color: #fff !important; }
.lx-btn--lleno:hover{ background: var(--lx-deep) !important; border-color: var(--lx-deep) !important; }
.lx-enlace{
  padding: 6px 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  border-bottom: 1px solid currentColor !important; color: var(--lx-ink) !important; cursor: pointer;
  transition: opacity var(--lx-dur-s) var(--lx-ease-out) !important;
}
.lx-enlace:hover{ opacity: .6; }
.fg-units-grid > .fg-card .fg-card-availability{
  justify-content: center !important; text-align: center;
  font-size: 11.5px !important; font-weight: 400 !important;
  color: var(--lx-body) !important;
}
.fg-units-grid > .fg-card .fg-card-availability .dot{
  background: var(--lx-ok) !important; box-shadow: none !important; animation: none !important;
}

/* ── 6. ESTADOS: RESERVADA Y VENDIDA ──────────────────────────────────────
   Como en Bahía Mar: sin rojo ni desenfoque. Hoy las 18 están disponibles;
   esto entra solo cuando el admin de Urbatrix marque alguna. */
.fg-units-grid > .fg-card[data-lx-estado="reserved"] .fg-card-img > img{ filter: saturate(.55) !important; opacity: 1 !important; }
.fg-units-grid > .fg-card[data-lx-estado="reserved"] .fg-card-price .price{ color: var(--lx-body) !important; }
.fg-units-grid > .fg-card[data-lx-estado="sold"] .fg-card-img > img{ filter: grayscale(1) contrast(.92) brightness(1.04) !important; }
.fg-units-grid > .fg-card[data-lx-estado="sold"] .fg-card-price,
.fg-units-grid > .fg-card[data-lx-estado="sold"] .fg-card-divider{ display: none !important; }
.fg-units-grid > .fg-card[data-lx-estado="sold"] .lx-num,
.fg-units-grid > .fg-card[data-lx-estado="sold"] .lx-specs dd{ color: var(--lx-body) !important; }
.fg-units-grid > .fg-card:is([data-lx-estado="sold"],[data-lx-estado="reserved"]) .fg-card-availability{ visibility: hidden !important; }
.fg-units-grid > .fg-card[data-lx-estado="sold"] .lx-btn--lleno{ background: var(--lx-sold) !important; border-color: var(--lx-sold) !important; }
.fg-units-grid > .fg-card[data-lx-estado="reserved"] .lx-btn--lleno{ background: var(--lx-reserved) !important; border-color: var(--lx-reserved) !important; }
.fg-units-grid > .fg-card:is(.is-reserved,.is-sold,.is-pending){ box-shadow: 0 0 0 1px var(--lx-hair) !important; }
.lx-sello{
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 12px 26px; border: 1px solid rgba(255,255,255,.85); border-radius: var(--lx-radius-sm);
  color: #fff; background: rgba(25,25,25,.3);
  font-family: var(--lx-font-display) !important; font-size: 24px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
}

/* ── 7. FICHA DE LA UNIDAD (popup #moreInfoModal) ─────────────────────────
   La última versión de la de Bahía Mar: misma estructura y contenido, con la
   letra y los colores de Siebe.
   · Izquierda, solo lo de la unidad (lo pinta lujo.js en .lx-ficha): tipo y
     planta, nombre, precio con el selector de moneda del sitio, $/m²
     interior, las condiciones de reserva en un recuadro, el simulador de
     pagos de Urbatrix (que sí es de la unidad) y los datos con etiqueta.
   · Fuera, porque no son datos de la unidad: «Unlock $20,000 Discount»,
     «12% below Aruba avg.», «$450/m²» y los textos fijos.
   · Derecha: fotos, descargar, aviso legal, compartir, guardar y WhatsApp,
     como están; la galería pasa sola cada 6 s con fundido. */
.mt-overlay .mt-backdrop{ background: rgba(25,25,25,.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mt-shell{
  max-width: 1320px !important;
  height: min(860px, calc(100vh - 48px)) !important;
  background: var(--lx-paper) !important;
  border: 0 !important;
  border-radius: var(--lx-radius-lg) !important;
  box-shadow: 0 50px 120px -50px rgba(25,25,25,.75) !important;
}
.mt-header{
  background: #fff !important;
  border-bottom: 1px solid var(--lx-hair) !important;
  padding-inline: 24px !important;
}
.mt-header-unit{ font-weight: 400 !important; letter-spacing: .1em; color: var(--lx-body) !important; font-size: 12px !important; text-transform: uppercase; }
#modalStatusBadge{
  background: transparent !important; color: var(--lx-text) !important;
  border: 1px solid var(--lx-line) !important; border-radius: var(--lx-radius-xs) !important;
  font-size: 10px !important; font-weight: 500 !important; letter-spacing: .14em !important;
}
#modalStatusBadge .dot{ background: var(--lx-ok) !important; box-shadow: none !important; }
#moreInfoModal[data-lx-estado="reserved"] #modalStatusBadge .dot{ background: var(--lx-reserved) !important; }
#moreInfoModal[data-lx-estado="sold"] #modalStatusBadge .dot{ background: var(--lx-sold) !important; }
.mt-header-right > .mt-pill-soft{ display: none !important; }
.mt-pill-wa{
  background: transparent !important; color: var(--lx-ink) !important;
  border: 1px solid var(--lx-line) !important; border-radius: var(--lx-radius-sm) !important;
  font-size: 11px !important; font-weight: 400 !important; letter-spacing: .04em;
  transition: border-color var(--lx-dur-s) var(--lx-ease-out) !important;
}
.mt-pill-wa:hover{ border-color: var(--lx-ink) !important; }
.mt-pill-wa svg{ color: var(--lx-ink) !important; fill: var(--lx-ink) !important; }
.mt-close{ background: transparent !important; border: 1px solid var(--lx-line) !important; color: var(--lx-ink) !important; border-radius: var(--lx-radius-sm) !important; }

.mt-body{ grid-template-columns: minmax(380px, 440px) minmax(0, 1fr) !important; }
.mt-left{ background: #fff !important; border-right: 1px solid var(--lx-hair) !important; }
.mt-peopleview{ display: none !important; }
.mt-left-inner{ padding: 34px 36px 28px !important; }
/* Todo lo del original menos la ficha nueva (el simulador lo mete lujo.js
   dentro de la ficha). Con el id delante para ganar a las reglas del propio
   Blade, que hacen sitio al simulador con #moreInfoModal. */
#moreInfoModal .mt-left-inner > :not(.lx-ficha){ display: none !important; }

.lx-eyebrow{
  margin: 0 0 12px; font-size: 10.5px !important; font-weight: 500;
  letter-spacing: var(--lx-track-eyebrow); text-transform: uppercase; color: var(--lx-faint);
}
.lx-ficha-nombre{
  margin: 0; font-family: var(--lx-font-display) !important; font-weight: 500;
  font-size: 26px; line-height: 1.08; letter-spacing: var(--lx-track-display);
  text-transform: uppercase; color: var(--lx-text);
  font-variant-numeric: lining-nums;
}
.lx-ficha-precio{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; }
.lx-ficha-precio #modalPrice{
  font-weight: 300 !important; font-size: 34px !important; letter-spacing: .005em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--lx-text) !important;
}
.lx-ficha-vendida{ font-family: var(--lx-font-display) !important; font-size: 30px; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-sold); }
.lx-ficha-precio .mt-currency-toggle{ gap: 2px !important; background: none !important; }
.lx-ficha-precio .mt-currency-toggle button{
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 4px 6px !important; font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .1em; color: var(--lx-faint) !important; border-radius: 0 !important;
}
.lx-ficha-precio .mt-currency-toggle button.active{ color: var(--lx-ink) !important; box-shadow: inset 0 -1px 0 var(--lx-ink) !important; }
.lx-ficha-ppm{ margin: 6px 0 0; font-size: 13px; color: var(--lx-body); }
.lx-ficha-reserva{
  margin-top: 24px; padding: 16px 18px;
  border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm);
  background: var(--lx-paper);
}
.lx-ficha-reserva .lx-eyebrow{ display: block; margin-bottom: 6px; }
.lx-ficha-reserva p{ margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lx-ficha-reserva b{ font-weight: 500; font-size: 16px; color: var(--lx-text); }
.lx-ficha-reserva span{ font-size: 13.5px; color: var(--lx-body); }
.lx-ficha-desc{ margin: 26px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--lx-text); }
.lx-ficha-sub{ margin-top: 30px !important; }
.lx-ficha-datos{ margin: 0; display: grid; grid-template-columns: 1fr; }
.lx-ficha-datos > div{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--lx-hair); }
.lx-ficha-datos dt{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lx-body); }
.lx-ficha-datos dt svg{ width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--lx-body); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lx-ficha-datos dd{ margin: 0; font-size: 13.5px; font-weight: 500; color: var(--lx-text); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums; }

/* El simulador de pagos de Urbatrix, dentro de la ficha y con su paleta. */
.lx-ficha-plan{ margin-top: 14px; }
.lx-ficha-plan .ps-teaser{
  display: flex !important; margin-top: 0 !important;
  border: 1px solid var(--lx-line) !important; border-radius: var(--lx-radius-sm) !important; background: #fff !important;
}
.lx-ficha-plan .ps-teaser:hover{ border-color: var(--lx-ink) !important; }
.lx-ficha-plan .ps-teaser-ic{ background: var(--lx-ink) !important; border-radius: var(--lx-radius-xs) !important; }
.lx-ficha-plan .ps-teaser-v{ color: var(--lx-text) !important; font-weight: 500 !important; }
.lx-ficha-plan :is(.ps-teaser-k, .ps-teaser-v small, .ps-s, .ps-disc){ color: var(--lx-body) !important; }
.lx-ficha-plan .ps-teaser-go{ color: var(--lx-ink) !important; font-weight: 500 !important; letter-spacing: .04em; }
.lx-ficha-plan .ps-acc{ display: block !important; border-color: var(--lx-line) !important; border-radius: var(--lx-radius-sm) !important; }
.lx-ficha-plan :is(.ps-hd-v, .ps-v, .ps-break-v){ color: var(--lx-text) !important; }
.lx-ficha-plan .ps-hd-t svg, .lx-ficha-plan .ps-chev{ stroke: var(--lx-ink) !important; }
.lx-ficha-plan input[type="range"]{ accent-color: var(--lx-ink); }

/* Barra de acciones */
.mt-cta-row{ background: #fff !important; border-top: 1px solid var(--lx-hair) !important; padding: 16px 36px !important; gap: 10px !important; }
.mt-cta-row > button{
  flex: 1; height: 48px !important; padding: 0 16px !important;
  border-radius: var(--lx-radius-sm) !important; box-shadow: none !important; filter: none !important;
  font-size: 11px !important; font-weight: 500 !important; letter-spacing: var(--lx-track-button) !important; text-transform: uppercase;
  transition: background-color var(--lx-dur-m) var(--lx-ease), color var(--lx-dur-m) var(--lx-ease) !important;
}
.mt-cta-row .mt-btn-secondary{ background: transparent !important; border: 1px solid var(--lx-ink) !important; color: var(--lx-ink) !important; }
.mt-cta-row .mt-btn-secondary:hover:not(:disabled){ background: var(--lx-ink) !important; color: #fff !important; }
.mt-cta-row .mt-btn-primary{ background: var(--lx-ink) !important; border: 1px solid var(--lx-ink) !important; color: #fff !important; }
.mt-cta-row .mt-btn-primary:hover{ background: var(--lx-deep) !important; }
.mt-cta-row .mt-btn-primary svg{ width: 15px; height: 15px; }
.mt-cta-row .mt-btn-secondary:disabled{ opacity: .5 !important; }
#moreInfoModal:is([data-lx-estado="reserved"],[data-lx-estado="sold"]) #modalReserveBtn{ display: none !important; }

/* Derecha: pestañas, selector propiedad/amenidades y galería */
.mt-right{ background: var(--lx-paper) !important; }
.mt-tabs{ background: var(--lx-paper) !important; border-bottom: 1px solid var(--lx-hair) !important; }
.mt-tab{ font-weight: 500 !important; font-size: 10px !important; letter-spacing: .16em !important; color: var(--lx-body) !important; padding-block: 13px !important; }
.mt-tab:hover{ color: var(--lx-ink) !important; }
.mt-tab-middle{ border-color: var(--lx-hair) !important; }
/* Property / Amenities / Plans: en una píldora sobre la foto, arriba a la
   izquierda (lujo.js mueve #mtCatToggle dentro de .mt-gallery). */
.mt-gallery > .mt-cat-toggle{
  position: absolute !important; top: 14px; left: 14px; z-index: 4;
  margin: 0 !important; padding: 0 !important; background: transparent !important;
}
.mt-cat-pill{
  flex: 0 0 auto !important; display: inline-flex !important; gap: 2px !important; padding: 4px !important;
  background: rgba(255,255,255,.86) !important; border: 0 !important; border-radius: var(--lx-radius-sm) !important;
  box-shadow: 0 6px 20px -10px rgba(25,25,25,.45) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mt-cat-btn{
  flex: 0 0 auto !important; background: transparent !important; box-shadow: none !important;
  border-radius: var(--lx-radius-xs) !important;
  padding: 8px 14px !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .14em !important;
  color: var(--lx-body) !important;
  transition: background-color var(--lx-dur-s) var(--lx-ease-out), color var(--lx-dur-s) var(--lx-ease-out) !important;
}
.mt-cat-btn:not(.active):not(:disabled):hover{ color: var(--lx-ink) !important; }
.mt-cat-btn.active{ background: var(--lx-ink) !important; color: #fff !important; }
@media (max-width: 600px){
  .mt-gallery > .mt-cat-toggle{ top: 10px; left: 10px; }
  .mt-cat-btn{ padding: 7px 10px !important; font-size: 9.5px !important; letter-spacing: .12em !important; }
}
.mt-cat-swap{ display: none !important; }
.mt-gallery{ background: var(--lx-mist) !important; }
.mt-gallery-img{ transition: opacity var(--lx-dur-s) var(--lx-ease-out); }
.lx-velo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; z-index: 1;
  opacity: 1; transition: opacity 1.1s var(--lx-ease);
}
.lx-velo.is-plan{ object-fit: contain; background: #fff; }
.lx-velo.is-fuera{ opacity: 0; }
.lx-velo:not([src]), .lx-velo[src=""]{ display: none; }
.mt-arrow, .mt-zoom-hint, .mt-counter{ z-index: 3 !important; }
.mt-arrow{
  background: rgba(255,255,255,.86) !important; color: var(--lx-ink) !important;
  border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--lx-dur-s) var(--lx-ease-out) !important;
}
.mt-gallery:hover .mt-arrow, .mt-arrow:focus-visible{ opacity: 1; }
@media (hover:none){ .mt-arrow{ opacity: 1; } }
.mt-zoom-hint{ background: rgba(255,255,255,.86) !important; color: var(--lx-ink) !important; box-shadow: none !important; }
.mt-counter{
  background: rgba(25,25,25,.5) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 400 !important; letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.lx-progreso{
  position: absolute; left: 0; bottom: 0; z-index: 3; height: 1px; width: 100%;
  background: rgba(255,255,255,.95); transform-origin: 0 50%; transform: scaleX(0);
}
.lx-progreso.is-corriendo{ animation: lx-progreso 6s linear forwards; }
.mt-gallery.is-pausada .lx-progreso{ animation-play-state: paused; }
.mt-thumbs{ background: var(--lx-paper) !important; gap: 6px !important; padding: 10px 14px !important; }
.mt-thumb{ border-radius: var(--lx-radius-xs) !important; opacity: .55; transition: opacity var(--lx-dur-s) var(--lx-ease-out) !important; border: 0 !important; box-shadow: none !important; }
.mt-thumb:hover, .mt-thumb.active, .mt-thumb.is-active{ opacity: 1; }
.mt-thumb.active, .mt-thumb.is-active{ box-shadow: inset 0 0 0 1px var(--lx-ink), 0 0 0 1px var(--lx-ink) !important; }
.iz-overlay{ background: rgba(25,25,25,.94) !important; }
/* Ficha en móvil: la cabecera no cabe entera; se quedan la unidad, el estado,
   WhatsApp y cerrar. */
@media (max-width: 600px){
  .mt-header-logo, .mt-header-dot{ display: none !important; }
  .mt-header{ padding-inline: 14px !important; }
  .mt-left-inner{ padding: 26px 22px 22px !important; }
  .lx-ficha-nombre{ font-size: 22px; }
  .mt-cta-row{ padding: 12px 16px !important; }
}

/* ── 8. REGISTRO: COMPRADOR O BROKER ──────────────────────────────────────
   El de Bahía Mar. Sustituye al popup «Welcome to Siebe Residences» y a las
   redirecciones a /login del anónimo. Ver lujo.js → registro. */
.lx-sin-scroll, .lx-sin-scroll body{ overflow: hidden !important; }
.guest-modal{ display: none !important; }            /* lo sustituye .lx-reg */
.lx-reg{
  position: fixed; inset: 0; z-index: 10050;
  display: grid; place-items: center;
  visibility: hidden; opacity: 0;
  transition: opacity var(--lx-dur-m) var(--lx-ease-out), visibility 0s var(--lx-dur-m);
}
.lx-reg.is-open{ visibility: visible; opacity: 1; transition: opacity var(--lx-dur-m) var(--lx-ease-out); }
.lx-reg-fondo{ position: absolute; inset: 0; background: rgba(25,25,25,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lx-reg-caja{
  position: relative; width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow: auto;
  padding: 52px 52px 42px;
  background: #fff; color: var(--lx-text);
  border-radius: var(--lx-radius-lg);
  box-shadow: 0 40px 90px -40px rgba(25,25,25,.7);
  transform: translateY(12px);
  transition: transform var(--lx-dur-l) var(--lx-ease-out);
}
.lx-reg.is-open .lx-reg-caja{ transform: none; }
.lx-reg-marca{ display: block; width: 92px; height: auto; margin-bottom: 26px; }
.lx-reg-cerrar{
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--lx-ink);
}
.lx-reg-titulo{
  margin: 0; font-family: var(--lx-font-display) !important; font-weight: 500;
  font-size: 40px; line-height: 1.05; letter-spacing: var(--lx-track-display); text-transform: uppercase;
}
.lx-reg-intro{ margin: 18px 0 30px; font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--lx-body); }
.lx-reg-opciones{ display: grid; gap: 10px; }
.lx-reg-opcion{
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  padding: 18px 20px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm);
  background: var(--lx-paper); color: var(--lx-text);
  transition: border-color var(--lx-dur-s) var(--lx-ease-out), background-color var(--lx-dur-s) var(--lx-ease-out);
}
.lx-reg-opcion:hover, .lx-reg-opcion:focus-visible{ border-color: var(--lx-ink); background: #fff; }
.lx-reg-opcion b{ font-family: var(--lx-font-display) !important; font-weight: 500; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.lx-reg-opcion span{ font-size: 13px; color: var(--lx-body); }
.lx-reg-ya{ display: inline-block; margin-top: 26px; font-size: 11px; font-weight: 500; letter-spacing: var(--lx-track-button); text-transform: uppercase; text-decoration: none; }
.lx-reg-volver{
  margin: -22px 0 18px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 11px; font-weight: 500; letter-spacing: var(--lx-track-button); text-transform: uppercase; color: var(--lx-faint);
}
.lx-reg-campos{ display: grid; gap: 16px; margin-bottom: 28px; }
.lx-campo{ display: grid; gap: 6px; }
.lx-campo span{ font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lx-faint); }
.lx-campo input{
  height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--lx-line);
  background: transparent; color: var(--lx-text); font-size: 16px; outline: none;
  transition: border-color var(--lx-dur-s) var(--lx-ease-out);
}
.lx-campo input:focus{ border-bottom-color: var(--lx-ink); }
.lx-reg-enviar{ width: 100%; min-height: 50px; font-size: 11px !important; letter-spacing: var(--lx-track-button) !important; }
@media (max-width: 560px){
  .lx-reg-caja{ padding: 44px 24px 30px; }
  .lx-reg-titulo{ font-size: 32px; }
}

/* ── 9. FOCO Y MOVIMIENTO REDUCIDO ────────────────────────────────────────
   Anillo fino en la tinta de la marca, solo con teclado. Con
   prefers-reduced-motion: sin telón, fundidos, acercamientos ni autoplay
   (este último lo corta lujo.js). */
.lx-btn:focus-visible, .lx-enlace:focus-visible, .lx-reg-opcion:focus-visible,
.mt-cta-row > button:focus-visible, .mt-tab:focus-visible, .mt-cat-btn:focus-visible,
.fg-add-to-list:focus-visible, .lx-reg-cerrar:focus-visible{
  outline: 1px solid var(--lx-ink) !important; outline-offset: 3px !important;
}
.fg-units-grid > .fg-card.lx-entra{
  animation: lx-card-entra .6s cubic-bezier(.25,1,.5,1) both;
  animation-delay: calc(var(--lx-i, 0) * 55ms + 60ms);
}
@keyframes lx-card-entra{ from{ opacity: 0; transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce){
  .lx-telon-capa, .lx-telon-capa img{ animation: none !important; }
  .lx-hero-linea{ display: none !important; }
  .fg-units-grid > .fg-card .fg-card-img > img,
  .lx-velo, .lx-reg, .lx-reg-caja, .lx-btn{ transition: none !important; }
  .fg-units-grid > .fg-card:hover .fg-card-img > img{ transform: none !important; }
  .fg-units-grid > .fg-card .fg-card-img > img.lx-img-espera{ opacity: 1 !important; }
  .fg-units-grid > .fg-card.lx-entra{ animation: none !important; }
  .lx-progreso{ display: none !important; }
}