/* ===========================================================================
   FICHA DEL TERRENO FRENTE AL MAR

   Esta pagina usa la hoja de la ficha tecnica de los lotes (ficha-tecnica.css)
   tal cual. Aqui va SOLO lo que esa ficha no trae: una fotografia en lugar del
   croquis, y una direccion larga que no cabe en una linea. Se carga despues.
   =========================================================================== */

/* La figura es una fotografia, no el dibujo vectorial que llevan los lotes
   (.cq). Mismo marco y mismo tope de ancho, para que la pagina conserve su
   ritmo. */
.cqfig img{
  display:block;width:100%;max-width:920px;height:auto;
  background:var(--paper);border:1px solid var(--rule)
}
.cqfig figcaption{
  max-width:920px;margin:9px 0 0;font-size:14px;color:var(--soft);font-weight:300
}

/* La direccion del video es una URL de ochenta caracteres: sin permiso para
   partirse, empuja la pagina de lado en el movil. */
.vid-url{word-break:break-all}

/* El contacto cierra la ficha. No es un capitulo, asi que no lleva numero ni
   entrada en el indice. */
.contacto{margin-top:8px}

/* ===========================================================================
   USO DE SUELO · el marco normativo de la landing de los lotes

   Copia de "Que se puede construir" (land-playa-destiladeros.css): las tres
   cifras, la tabla de huella construible y la lamina con las diez unidades de
   ocupacion y el volumen de altura. Sobre navy, como alli. Va acotado a .zona
   para no tocar nada de la ficha de los lotes, que comparte hoja con esta.
   =========================================================================== */
.zona{
  background:var(--navy);color:#e6e2da;
  padding:clamp(28px,4vw,52px) clamp(22px,3.5vw,48px);margin:8px 0 26px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact
}
.zona .grid3{display:grid;gap:26px}
@media(min-width:760px){
  .zona .grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px clamp(32px,4vw,56px)}
}
.zona .fact{max-width:34ch}
.zona .fact .k{display:block;font-family:"Jost";font-weight:200;font-size:2.1rem;
  color:var(--gold);line-height:1.05}
.zona .fact h3{margin:8px 0 0;font-size:1.2rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--cream)}
.zona .fact p{margin:5px 0 0;font-size:.93rem;color:#a9b8c8;max-width:32ch}

.zone-wrap{display:grid;gap:38px;margin-top:44px;align-items:start}
@media(min-width:940px){.zone-wrap{grid-template-columns:1fr 1fr;gap:46px}}

/* La tabla, con la misma gramatica que en la landing y la tinta invertida. */
.zona .tw{background:none;max-width:none;margin:0}
.zona table{width:100%}
.zona thead th{color:#a9b8c8;border-bottom:1px solid var(--gold)}
.zona th,.zona td{border-bottom:1px solid rgba(250,247,242,.16)}
.zona tbody tr:last-child td{border-bottom:0}
.zona td.n,.zona td.clave,.zona td.lote{color:var(--cream)}
.zona td.apoyo{color:#8ea0b4}
.zona td.clave{font-weight:400}
.zona td.lote{font-weight:400;letter-spacing:1.4px}

/* La lamina vive sobre el navy, sin caja. */
.scale{display:flex;flex-direction:column;gap:14px;margin:0}
.scale figcaption{color:#a9b8c8;font-size:.78rem;max-width:52ch}
.scale figcaption em{font-style:normal;color:var(--gold);letter-spacing:.4px}
.marco{display:block;width:100%;height:auto}
.mk-rot{font-family:"Jost";font-weight:400;font-size:11px;letter-spacing:2.6px;fill:var(--gold)}
.mk-cifra{font-family:"Jost";font-weight:300;font-size:17px;fill:var(--cream);letter-spacing:.3px}
.mk-pie{font-family:"Jost";font-weight:400;font-size:10px;letter-spacing:2px;fill:#a9b8c8}
.mk-caja{fill:none;stroke:rgba(250,247,242,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-lleno{fill:rgba(250,247,242,.14);stroke:none}
.mk-cota-t{font-family:"Jost";font-weight:400;font-size:10px;letter-spacing:2px;fill:#a9b8c8}
.mk-si{fill:var(--gold);stroke:none}
.mk-no{fill:none;stroke:rgba(250,247,242,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-tope{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.mk-suelo{stroke:rgba(250,247,242,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-cota{stroke:var(--gold);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}

/* Las cifras no se parten: "USD 660,000" en dos lineas deja de leerse como una
   sola cantidad. Los rotulos de columna si pueden bajar de linea. */
.tw-lotes td.n,.zona td{white-space:nowrap}

/* En el movil la tabla del marco normativo no cabe con el relleno y el espaciado
   de escritorio: la ultima columna quedaba cortada ("1,2"). Se aprietan los dos
   y el rotulo vuelve a poder partirse en dos lineas. */
@media (max-width:560px){
  .zona table{font-size:13px}
  .zona th,.zona td{padding:10px 6px}
  .zona thead th{font-size:10px;letter-spacing:.08em;white-space:normal}
  .zona td.lote{letter-spacing:0}
}