/* =========================================================================
   modelo.css : página de detalle de un modelo de casa.
   Se carga después de base.css y reutiliza sus tokens y utilidades.
   ========================================================================= */

/* ------------------------------------------------------------- portada */

.mhero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.mhero__media { position: absolute; inset: 0; z-index: -2; }
.mhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* las fotografías vienen en retrato con mucho cielo arriba: el recorte se
     ancla al 55%, que es donde queda la arquitectura en las seis */
  object-position: center 55%;
  animation: mheroIn 2s var(--ease) both;
}
@keyframes mheroIn {
  from { transform: scale(1.07); opacity: 0.35; }
  to   { transform: scale(1); opacity: 1; }
}
.mhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 13, 12, 0.7) 0%, rgba(13, 13, 12, 0.12) 40%, rgba(13, 13, 12, 0.9) 100%);
}
.mhero__inner {
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vh, 5rem);
  color: #fff;
}

/* migas: dicen dónde está el visitante dentro del catálogo */
.crumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.6rem;
}
.crumbs a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.crumbs a:hover { border-bottom-color: currentColor; }
.crumbs i { font-size: 0.9rem; opacity: 0.6; }

.mhero h1 { color: #fff; font-size: clamp(2.4rem, 1.9rem + 2.6vw, 4.2rem); }
.mhero h1 em { font-style: normal; font-weight: 500; color: var(--gold); }
.mhero__sub {
  margin-top: 1.4rem;
  max-width: 52ch;
  font-size: var(--step-1u);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.mhero__actions { display: flex; gap: 0.9rem; margin-top: 2.2rem; flex-wrap: wrap; }

/* ---------------------------------------------------- ficha de programa */

.spec {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.spec__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec__item {
  position: relative;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: background 0.6s var(--ease);
}
.spec__item:first-child { border-left: 0; }
.spec__item i { font-size: 1.5rem; color: var(--accent-text); line-height: 1; }
.spec__item::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .spec__item:hover { background: var(--surface-2); }
  .spec__item:hover::after { transform: scaleX(1); }
}
.spec__item .figure__value { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }

.spec__note {
  border-top: 1px solid var(--line);
  padding-block: 1.1rem;
  font-size: 0.88rem;
  color: var(--muted);
}

@media (max-width: 780px) {
  .spec__grid { grid-template-columns: repeat(2, 1fr); }
  .spec__item:nth-child(3) { border-left: 0; }
  .spec__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  /* El degradado de escritorio se aclara hasta 0.12 en su franja central
     porque allí, con el hero apaisado, no hay texto. En vertical el titular y
     las migas caen justo ahí: medidas sobre las seis fotografías daban 1,9:1
     en las migas y 2,2:1 en el titular del 310. Este perfil oscurece la zona
     media —la que ocupa el texto— y deja el cielo de la parte alta. */
  .mhero::after {
    background: linear-gradient(
      180deg,
      rgba(13, 13, 12, 0.78) 0%,
      rgba(13, 13, 12, 0.46) 18%,
      rgba(13, 13, 12, 0.78) 42%,
      rgba(13, 13, 12, 0.90) 72%,
      rgba(13, 13, 12, 0.96) 100%
    );
  }
  /* las migas iban a 72% de opacidad, que sobre fotografía resta contraste */
  .crumbs { color: rgba(255, 255, 255, 0.92); }

  /* Los dos botones comparten la fila, igual que en la portada del home, en
     vez de ocupar una pantalla entera apilados. */
  .mhero__actions { flex-wrap: nowrap; gap: 0.6rem; }
  .mhero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    --btn-pad: 0.95rem 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }

  /* "4 + 1 de servicio" ocupa dos renglones y empujaba su etiqueta más abajo
     que las de al lado, dejando la fila descuadrada. Anclando las etiquetas al
     pie de la celda —todas de igual alto dentro de la fila— vuelven a
     alinearse, quepa el valor en una línea o en dos. */
  .spec__item { gap: 0.9rem; padding: 1.75rem 1.1rem; }
  .spec__item .figure__value { font-size: clamp(1.35rem, 5.6vw, 1.8rem); }
  .spec__item .figure__note { margin-top: auto; padding-top: 0.35rem; font-size: 0.78rem; }
}

/* --------------------------------------------------------- galería */

.gal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.gal__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.gal__item {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
  grid-column: span 3;
}
/* la primera imagen manda: ocupa el ancho completo */
.gal__item:first-child { grid-column: span 6; aspect-ratio: 21 / 9; }
.gal__grid[data-n="3"] .gal__item:nth-child(n + 2) { grid-column: span 3; }
.gal__grid[data-n="2"] .gal__item:nth-child(2) { grid-column: span 6; aspect-ratio: 21 / 9; }
.gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.gal__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
@media (hover: hover) { .gal__item:hover img { transform: scale(1.05); } }

@media (max-width: 780px) {
  .gal__grid { grid-template-columns: 1fr; }
  .gal__item, .gal__item:first-child { grid-column: span 1; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------- plantas */

.plan { background: var(--surface); }
.plan__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.plan__copy h2 { margin-bottom: 1.4rem; }
/* Los planos son PNG con fondo transparente: se apoyan sobre la superficie de
   la sección, con las líneas en claro y los rótulos en dorado. */
.plan__sheet {
  position: relative;
  background: var(--surface-2);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.plan__sheet + .plan__sheet { margin-top: 1px; }
/* Los planos vienen en tamaños distintos: el nivel 2 del Colonial 192 mide
   405px y estirarlo al ancho de la columna lo pixela. Se muestran a su tamaño
   real como techo, centrados, y solo se reducen si no caben. */
.plan__sheet img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-inline: auto;
}
.plan__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 900px) { .plan__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- terminaciones */

.term__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.term__grid ul { list-style: none; margin: 0; padding: 0; }
.term__grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  line-height: 1.5;
}
.term__grid li i { color: var(--accent-text); font-size: 1.1rem; margin-top: 0.2rem; flex: none; }

/* ------------------------------------------------- otros modelos */

.others { background: var(--surface); }
.others__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.others__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1.5rem;
}

/* ------------------------------------------------------------ cierre */

.close__inner {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}
.close__inner h2 { margin-bottom: 1.2rem; }
.close__actions { display: flex; gap: 0.9rem; justify-content: center; margin-top: 2.2rem; flex-wrap: wrap; }

/* =========================================================================
   Master plan y Partners. Comparten la portada compacta de arriba.
   ========================================================================= */

/* portada breve: estas páginas no necesitan una imagen a pantalla completa */
.phead {
  padding-block: clamp(7rem, 12vw, 10rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.phead h1 { max-width: 18ch; }
.phead .lede { margin-top: 1.5rem; max-width: 56ch; }

/* --------------------------------------------------------- el plano */

.plano {
  position: relative;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
}
.plano img { width: 100%; height: auto; display: block; }
.plano::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(23, 21, 15, 0.14);
}
.plano__zoom {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  /* en móvil el WhatsApp flotante ocupa esa misma esquina y lo dejaba
     inalcanzable: el botón se pasa al lado izquierdo del plano */
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: rgba(13, 13, 12, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.2rem;
}
.plano__pie { margin-top: 1rem; font-size: 0.84rem; color: var(--muted); }

/* El plano es muy alargado —1600x4590—, así que encajarlo entero en pantalla
   lo reducía a 276px de ancho incluso en un monitor: los números de sitio,
   que son el dato que se viene a buscar, quedaban ilegibles. El visor lo
   muestra a un ancho aprovechable y se recorre en vertical. */
dialog.lightbox {
  border: 0;
  padding: 0;
  width: min(1100px, 94vw);
  max-width: 94vw;
  height: 92vh;
  max-height: 92vh;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.lightbox::backdrop { background: rgba(8, 8, 7, 0.94); }
dialog.lightbox img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  background: #fff;
}
dialog.lightbox button {
  /* fijo al viewport: el visor se desplaza y el cierre debe quedarse */
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  background: rgba(13, 13, 12, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
}

/* -------------------------------------------- tabla de disponibilidad */

.filtros {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.filtros button {
  padding: 0.6rem 1.15rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.filtros button:hover { border-color: var(--accent-text); }
.filtros button[aria-pressed="true"] { background: var(--accent-text); border-color: var(--accent-text); color: #14120d; }
.filtros__sep { width: 1px; height: 26px; background: var(--line); margin-inline: 0.5rem; }

/* 142 filas medían casi 8.000px y ahogaban la página: la tabla scrollea
   dentro de su propio marco, con el encabezado fijo arriba */
.tabla-wrap {
  overflow: auto;
  max-height: min(70vh, 720px);
  border: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.tabla-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.tabla-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); }
table.lotes { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.92rem; }
table.lotes th, table.lotes td { text-align: left; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--line); }
table.lotes th {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  background: var(--surface);
  position: sticky;
  top: 0;
}
table.lotes td { font-variant-numeric: tabular-nums; }

/* En móvil la tabla pedía 480px dentro de una columna de 345 y obligaba a
   desplazarla de lado para ver el estado de cada sitio, que es justamente el
   dato que se viene a mirar. Con menos relleno y un cuerpo algo menor las
   cuatro columnas entran completas. */
@media (max-width: 560px) {
  table.lotes { min-width: 0; font-size: 0.84rem; }
  table.lotes th, table.lotes td { padding: 0.7rem 0.45rem; }
  table.lotes th:first-child, table.lotes td:first-child { padding-left: 0.8rem; }
  table.lotes th:last-child, table.lotes td:last-child { padding-right: 0.8rem; }
  table.lotes th { font-size: 0.66rem; letter-spacing: 0.03em; }
  .estado { padding: 0.15rem 0.4rem; font-size: 0.68rem; letter-spacing: 0.02em; }
}
/* En pantallas de 360px el relleno lateral de las celdas se comía los 22px que
   faltaban para que las cuatro columnas entraran sin desplazamiento lateral. */
@media (max-width: 400px) {
  table.lotes { font-size: 0.8rem; }
  table.lotes th, table.lotes td { padding: 0.65rem 0.3rem; }
  table.lotes th:first-child, table.lotes td:first-child { padding-left: 0.55rem; }
  table.lotes th:last-child, table.lotes td:last-child { padding-right: 0.55rem; }
  table.lotes th { letter-spacing: 0; }
}
table.lotes tbody tr { transition: background 0.3s var(--ease); }
@media (hover: hover) { table.lotes tbody tr:hover { background: var(--surface-2); } }
table.lotes tr[hidden] { display: none; }
.lote-id { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; }

.estado {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 1px currentColor;
}
.estado--libre { color: var(--accent-text); }
.estado--vendido { color: var(--muted); }

.conteo { margin-top: 1.25rem; font-size: 0.88rem; color: var(--muted); }
.vacio { padding: 2.5rem 1.15rem; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ partners */

.socios + .socios { margin-top: clamp(3rem, 6vw, 4.5rem); }
.socios__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.socios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.socio {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: background 0.6s var(--ease);
}
.socio::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .socio:hover { background: var(--surface-2); }
  .socio:hover::after { transform: scaleX(1); }
}
.socio h3 { font-size: 1.15rem; }
.socio__persona { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.75rem; }
.socio__dato {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  padding-block: 0.3rem;
  word-break: break-word;
}
.socio__dato i { color: var(--accent-text); font-size: 1.05rem; flex: none; }
.socio__dato a { border-bottom: 1px solid transparent; }
.socio__dato a:hover { border-bottom-color: var(--accent-text); }

/* Teléfonos y correos de los profesionales: en móvil son el destino de la
   página y se tocan con el dedo, así que el enlace crece hasta una zona
   sensible cómoda en lugar de quedarse en la altura de su línea de texto. */
@media (max-width: 640px) {
  .socio__dato { padding-block: 0; align-items: flex-start; }
  .socio__dato a { display: inline-block; padding-block: 0.6rem; }
  .socio__dato i { margin-top: 0.65rem; }
}

/* ------------------------------------------------- resumen por sector */

.sectores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.sector {
  background: var(--surface);
  border: 0;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  text-align: left;
  cursor: pointer;
  color: var(--paper);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  transition: background 0.5s var(--ease);
}
.sector::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  .sector:hover { background: var(--surface-2); }
  .sector:hover::after { transform: scaleX(1); }
}
.sector[aria-current="true"] { background: var(--surface-2); }
.sector[aria-current="true"]::after { transform: scaleX(1); }
.sector__id {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.sector .figure__value { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.sector__rango {
  margin-top: 0.6rem;
  font-size: 0.84rem;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}


/* la tira de interiores del brochure es panorámica: ocupa el ancho completo */
.gal__item--tira { grid-column: span 6 !important; aspect-ratio: 2 / 1 !important; }
@media (max-width: 780px) { .gal__item--tira { grid-column: span 1 !important; } }

/* ------------------------------------------------ ajustes móviles del plano */

@media (max-width: 640px) {
  /* El botón de ampliar caía justo bajo el WhatsApp flotante, que lo tapaba
     por completo: se muda a la esquina izquierda, libre en toda la página. */
  .plano__zoom { right: auto; left: 1rem; }

  /* En la tabla, la superficie y su unidad no deben separarse en dos
     renglones: "1.076,98" arriba y "m²" abajo se leía como dos datos. */
  table.lotes td:nth-child(2) { white-space: nowrap; }
}

/* El plano mide 1600x4590 y el visor lo encajaba entero en pantalla: en un
   móvil eso es un 15% de su tamaño, con los números de sitio ilegibles —
   justo lo que se viene a mirar. Aquí se muestra a tamaño natural y el visor
   se recorre con el dedo, que es como se lee un plano en papel. */
@media (max-width: 640px) {
  dialog.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  dialog.lightbox img {
    max-width: none;
    max-height: none;
    width: 1600px;
    height: auto;
    object-fit: none;
  }
  /* el cierre no se va con el desplazamiento del plano */
  dialog.lightbox button { position: fixed; top: 0.75rem; right: 0.75rem; }
}

/* Variante de tres datos, la que usa "Agendar visita". Antes venía escrita en
   un style inline del generador, que por especificidad ganaba a cualquier
   media query: en móvil quedaban tres columnas de 120px y el teléfono se
   partía en tres renglones. */
.spec__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .spec__grid--3 { grid-template-columns: 1fr; }
  .spec__grid--3 .spec__item { border-left: 0; }
  .spec__grid--3 .spec__item + .spec__item { border-top: 1px solid var(--line); }
  /* con una sola columna la etiqueta ya no necesita bajar al pie de la celda */
  .spec__grid--3 .spec__item .figure__note { margin-top: 0; }
  /* el enlace de WhatsApp vive dentro de esa etiqueta y se quedaba en 15px
     de alto: aquí gana la zona sensible que necesita un dedo */
  .spec__grid--3 .spec__item a { display: inline-block; padding-block: 0.6rem; }
}