/* ============================================================
   GRUPO XIOON — Capa de identidad: "El plano."
   ------------------------------------------------------------
   Xioon vende lotes. El activo visual que nadie le puede copiar
   es su propio plano: la retícula, las cotas, las etiquetas de
   manzana y el código de color de estado comercial.
   Esta capa convierte ese lenguaje en la voz de la marca.

   Va DESPUÉS de base.css/home.css: solo añade y pisa lo justo.
   Para revertir: quitar el <link> de identidad.css. Nada más.
   ============================================================ */

:root{
  /* Voz tipográfica: Zilla Slab para titulares, Archivo para
     interfaz y cuerpo.
     Antes acá estaba Fraunces. Se cambió el 2026-10-09 después de
     auditar la identidad con la skill brand-identity, que la tiene
     fichada como default de IA: aparece en el 24% de las caras
     display que proponen los modelos. Mejoraba mucho el sitio, pero
     era la cara que la máquina elige sola.
     Zilla Slab se eligió por el encargo, no por gusto: el slab serif
     viene de los planos de ingeniería y los títulos de propiedad, que
     es literalmente lo que vende Xioon; y trae cifras tabulares
     (tnum), que importan porque esta web es números en columna —
     176 lotes, 143–364 m², $29,250. Auditada para español: PASS. */
  --display: "Zilla Slab", "Archivo", Georgia, serif;

  /* Tinta del plano: el azul de los planos de obra, más frío que
     --navy, para líneas de construcción y cotas. */
  --tinta:      rgba(21,37,61,.14);
  --tinta-2:    rgba(21,37,61,.07);
  --tinta-clara: rgba(245,241,232,.18);

  /* Paso de la retícula. Mismo módulo en toda la web: la grilla
     se reconoce de una sección a otra. */
  --modulo: 34px;
}

/* ============================================================
   1. TIPOGRAFÍA — el contraste que faltaba
   ============================================================ */

/* Medido en la auditoría: con solo .h-display/.h1/.h2, Fraunces
   alcanzaba 3 elementos contra 136 de Archivo. La voz no se oía.
   Se extiende a las etiquetas h1-h3 reales y a .h3, que es donde
   viven los títulos de tarjeta y de bloque. */
h1,h2,h3,.h-display,.h1,.h2,.h3{
  font-family:var(--display);
  /* Fraunces ajusta por tamaño óptico; a 7rem quiero el corte
     fino de display, no el de texto. */
  font-optical-sizing:auto;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  /* Fraunces monta más que Archivo: el -.036em de base la
     apelmazaba. */
  letter-spacing:-.018em;
}
.h-display{font-variant-numeric:tabular-nums;line-height:.9}
.h1{line-height:.94}

/* ============================================================
   1b. ESCALA DE CARTEL
   ------------------------------------------------------------
   El sistema venía tibio: .h1 llegaba a 4.6rem y .h-display a
   7.2rem, con el texto de apoyo casi del mismo peso visual. Todo
   convivía en paz y nada mandaba.
   Un titular es un cartel, no un párrafo grande. Se sube la escala
   y, sobre todo, se BAJA el texto de apoyo: la fuerza no viene de
   agrandar todo, viene de la distancia entre lo grande y lo chico.
   ============================================================ */

/* El factor en vw va moderado a propósito: a 8vw el titular de
   pilares se partía en seis líneas a anchos medios y dejaba de ser
   cartel para ser muro. El tope alto se conserva — en pantalla
   grande pega igual — pero el crecimiento intermedio se frena.
   text-wrap:balance reparte las líneas en vez de dejar una palabra
   suelta al final. */
/* Segunda calibración. La primera subió el tope pero bajó el factor
   en vw (5.6 contra los 6 originales), así que a anchos normales
   los titulares quedaron MÁS CHICOS que antes: la escala solo se
   notaba arriba de 1180px. Ahora sube el factor también, que es lo
   que se ve en pantalla real. El reparto de líneas lo sostiene
   text-wrap:balance, que no estaba cuando el titular se partió en
   seis. */
/* El mínimo va bajo a propósito: a 375px el 10.5vw da 39px, pero un
   mínimo de 3.6rem (57.6px) lo pisaba y "CONDOMINIO SACHACA" no
   entraba — 20px de desborde con el titular cortado. El tope alto es
   el que manda en pantalla grande, que es donde se ve el cartel. */
/* ------------------------------------------------------------------
   UN TAMANO POR CLASE
   ------------------------------------------------------------------
   Medido antes de este cambio, en UNA sola pagina a 1440px:

     .h1  ->  102.4 / 64.0 / 48.8 / 48.1 px
     .h2  ->   59.2 / 45.9 px

   La misma clase en cuatro tamanos, y un .h2 de 59px por encima de un
   .h1 de 48.8px: la jerarquia visual contradecia a la semantica. Pasaba
   porque el tamano iba atado al ancho del CONTENEDOR (el termino cqi):
   un titulo en columna salia chico y el mismo titulo en banda ancha
   salia enorme, sin que su rango en la pagina tuviera nada que ver.

   Ahora el tamano solo depende de la pantalla, asi que una clase tiene
   un tamano y se puede confiar en el. Lo que hace que entre en columna
   no es achicarlo sobre la marcha, es que el tope sea sensato: 56px en
   vez de 102px. A 56px el nombre mas largo de la pagina ("frecuentes.",
   "conglomerado") ocupa ~310-336px y la columna mas angosta mide 382px.
   ------------------------------------------------------------------ */
/* El tamano sale de la escala con nombre (--t-* en base.css), que ya
   cambia sola en cada parada de pantalla. Aqui solo se dice QUE paso le
   toca a cada nivel; el cuanto vive en un unico sitio.

   El interletrado y el interlineado si se ajustan por parada, y eso es
   a proposito: a 40px una letra necesita menos apretado y mas aire
   entre lineas que a 86px. Ese ajuste es lo que separa una tipografia
   mirada de una escalada por regla de tres. */
.h-display{font-size:var(--t-display);line-height:.92;letter-spacing:-.028em}
.h1       {font-size:var(--t-1);      line-height:.96;letter-spacing:-.022em}
.h2       {font-size:var(--t-2);      line-height:1;  letter-spacing:-.016em}

@media (min-width:600px){
  .h-display{line-height:.88;letter-spacing:-.03em}
  .h1       {line-height:.92;letter-spacing:-.026em}
  .h2       {line-height:.96;letter-spacing:-.02em}
}
@media (min-width:1200px){
  .h-display{line-height:.86;letter-spacing:-.032em}
  .h1       {line-height:.9; letter-spacing:-.026em}
  .h2       {line-height:.94;letter-spacing:-.022em}
}
.h-display,.h1,.h2{text-wrap:balance}

/* ------------------------------------------------------------------
   POR QUE cqi Y NO SOLO vw
   ------------------------------------------------------------------
   Medido en produccion a 1440px: el titular salia a 102px (7.2vw)
   pero vivia en columnas de 371-403px. Resultado: "excelenc/ia.",
   "Pregunt/as frecuentes", un titular de 8 lineas y 737px de alto, y
   50px de desborde horizontal. El tamano estaba atado a la ventana y
   el hueco real era la columna.

   min(vw, cqi) resuelve las dos cosas: nunca mas grande de lo que
   permite la pantalla, y nunca mas grande de lo que permite SU
   columna. Si no hay contenedor declarado, cqi cae al ancho del
   viewport, asi que la cuenta vuelve sola al valor de antes: ningun
   titular de los que ya entraban cambia de tamano.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   CUIDADO CON container-type
   ------------------------------------------------------------------
   container-type:inline-size aplica contain:inline-size, que significa
   "el ancho de esta caja NO puede depender de su contenido". Si ademas
   nada externo se lo fija, el ancho resuelto es CERO.

   Medido en telefono a 375px: .mq-about2__text salia con 0px de ancho y
   su titular con 0 de ancho y 1084 de alto — estaba partiendo una letra
   por linea. En pantalla se veia como una franja en blanco enorme.

   Esto lo introduje yo al atar el tamano del titular al contenedor, y
   ahora que el tamano ya no depende del contenedor, la declaracion solo
   hace falta donde de verdad hay columnas. Por debajo de 900px el
   diseno apila y no se consulta ningun contenedor.
   ------------------------------------------------------------------ */
@media (min-width:900px){
  .sec__head,
  .mq-about2__text,
  .faq-wrap > div,
  .cta > div,
  .split > *,
  .proyecto-hero__txt{container-type:inline-size}
}

/* El contenedor ya NO decide el tamano; queda como valvula de UN paso.
   El umbral esta medido, no elegido a ojo: la palabra mas larga de la
   portada ("conglomerado") ocupa 415px a 56px de cuerpo, y la columna
   mas angosta mide 382px. Por debajo de 420px de columna, entonces, el
   titular baja un paso entero de la escala — 56 -> 40 -> 31 — en vez de
   encogerse un porcentaje suelto. Asi solo existen dos tamanos
   posibles, los dos de la escala, y el que toca se nota como "cabe en
   su columna", no como un descuido. */
/* Solo donde HAY columnas. Medido en telefono: a 375px la unica
   columna de la pagina mide 331px, se colaba por este guarda y bajaba
   el titular a 24px cuando la parada de telefono ya manda 31. Es decir,
   la pagina entera se tomaba a si misma por una columna estrecha y se
   encogia dos veces. Por debajo de 900px el diseno ya apila en una sola
   columna y la parada de pantalla hace sola el trabajo. */
@media (min-width:900px){
  @container (max-width:420px){
    .h-display{font-size:var(--t-1)}
    .h1{font-size:var(--t-2)}
    .h2{font-size:var(--t-3)}
  }
}

/* El corte a mitad de palabra deja de ser la regla y pasa a ser la
   valvula de escape: solo en telefono, donde un nombre de proyecto
   largo no tiene a donde ir. */
@media (max-width:620px){.h-display,.h1,.h2{overflow-wrap:break-word}}

/* El apoyo se achica y se acota: 46 caracteres por línea en vez de
   60. Menos ancho obliga a leerlo como pie de foto, no como bloque
   que compite con el titular. */
.lead{
  font-size:var(--ui-xl);   /* paso de la escala, no 1.15vw = 16,56 */
  max-width:46ch;
  font-weight:450;
  color:var(--ink-2);
}
.sec__head .lead{margin-top:18px}

/* ============================================================
   1b-bis. LA MEDIDA VA AL PARRAFO, NO AL BLOQUE
   ------------------------------------------------------------
   .sec__head tenia max-width:44ch, que son ~400px. Es la medida
   justa para leer un parrafo, y la horma equivocada para un
   titular de 100px: lo partia en 4 u 8 lineas. Ahora el bloque
   ocupa la caja entera y cada hijo lleva su propia medida, que
   es como se componen los titulares de verdad: el titular se
   mide en caracteres de SU tamano, no en los del cuerpo.
   ============================================================ */
.sec__head{max-width:none}
.sec__head > .lead,
.sec__head > .p{max-width:48ch}
.sec__head > .h1{max-width:17ch}
.sec__head > .h2{max-width:20ch}

/* ------------------------------------------------------------------
   EL SALTO DE LINEA SE CALCULA, NO SE ESCRIBE
   ------------------------------------------------------------------
   Nueve de los once titulares de la portada llevaban un <br> puesto a
   mano. Un salto a mano se eligio para UN tamano de letra y UN ancho de
   columna: en cuanto cambia cualquiera de los dos, parte donde no debe.
   Medido: "Un conglomerado peruano<br>" forzaba 23 caracteres en una
   columna de 382px y desbordaba 33px.

   Ahora el apilado sale de dos reglas, no de la mano: un tope de ~18
   caracteres por linea (la medida larga de un titular de cartel) y
   text-wrap:balance, que reparte las lineas parejas. Se sigue viendo
   apilado, que era la intencion — pero se apila solo, a cualquier
   tamano y en cualquier columna.
   ------------------------------------------------------------------ */
.h1,.h2{max-width:18ch}
.h-display{max-width:20ch}
/* centrado: con max-width el bloque se iria a la izquierda */
[style*="text-align:center"] > .h1,
[style*="text-align:center"] > .h2,
.tx-c > .h1,.tx-c > .h2,
.cta > div > .h1,.cta > div > .h2{margin-inline:auto}


/* ============================================================
   1c. RITMO: QUE LAS SECCIONES NO RESPIREN IGUAL
   ------------------------------------------------------------
   Las bandas navy eran del mismo alto que las claras, así que la
   página avanzaba a un solo pulso. Ahora las navy son cámaras
   grandes y oscuras, y las claras van más apretadas. El contraste
   de ritmo es lo que hace que una web se sienta compuesta.
   ============================================================ */

.band{padding-block:clamp(72px,9vw,132px)}
/* Estas dos las declaraba home.css y esta capa se las pisaba sin
   querer (misma especificidad, carga despues). Se repiten aca para
   que la capa siga siendo reversible de un solo archivo. */
.band--edit{padding-block:clamp(56px,8vw,104px)}
.band--equipo{padding-block:clamp(48px,7vw,80px)}
.sec.tono{padding-block:clamp(56px,7vw,92px)}

/* ============================================================
   1d. A SANGRE
   ------------------------------------------------------------
   Todo vivía dentro de la misma caja de 1120px centrada — el gesto
   más reconocible de plantilla. Las bandas navy ahora ocupan el
   ancho completo de verdad y el titular de sección se sale un poco
   del cajón por la izquierda, para que el bloque no se lea como un
   rectángulo más.
   ============================================================ */

@media (min-width:1180px){
  .sec__head > .h1,
  .sec__head > .h2{margin-left:-54px}
  .sec__head::before{left:-72px}
}

/* El punto final de los titulares es parte de la marca
   ("Juntos a la excelencia."). Que pese y que sea oro. */
.h-display,.h1{position:relative}

/* ============================================================
   2. ETIQUETA DE MANZANA — reemplaza la píldora genérica
   ------------------------------------------------------------
   .idx era una píldora con borde. Ahora es una acotación de
   plano: escuadra a la izquierda, numeración monoespaciada.
   ============================================================ */

.idx{
  border:0;border-radius:0;
  padding:0 0 0 2px;
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);font-weight:700;letter-spacing:.14em;
  color:var(--ink-3);
  align-items:center;gap:10px;
}
.idx::before{
  content:"";
  width:26px;height:10px;flex:none;
  /* Escuadra: dos trazos en ángulo, como la marca de cota de un
     plano. */
  border-left:2px solid var(--gold-d);
  border-bottom:2px solid var(--gold-d);
}
.band .idx{color:var(--on-navy-2);border:0}
.band .idx::before{border-color:var(--gold)}
.idx--gold{background:none;color:var(--gold-d);border:0;padding:0 0 0 2px}

/* ============================================================
   3. EL PLANO REAL COMO FONDO
   ------------------------------------------------------------
   Antes aquí había papel cuadriculado. Lo usa medio internet y no
   identifica a nadie: dice "le pusimos un patrón", no "esto es
   Grupo Xioon".

   Ahora el fondo es la geometría REAL de la lotización de Mareva:
   los 177 polígonos que dibuja el plano interactivo, sacados de
   data.js y convertidos a trazo (assets/img/plano-trazo.svg,
   20 KB). Es lo único de esta web que un competidor no puede
   copiar, porque es su terreno.

   Va a opacidad muy baja y con máscara: marca de agua bajo el
   papel, nunca algo que compita con el texto.
   ============================================================ */

.sec.tono,.sec--plano{
  position:relative;
  background-image:none;
}
.sec.tono::before,.sec--plano::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("../img/plano-trazo.svg");
  background-repeat:no-repeat;
  background-size:min(1100px,118%) auto;
  background-position:88% 42%;
  opacity:.085;
  /* Se desvanece hacia los bordes para que no compita con el
     texto ni corte en seco. */
  -webkit-mask-image:radial-gradient(ellipse 72% 78% at 80% 45%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 78% at 80% 45%,#000 30%,transparent 100%);
}
.sec.tono > *,.sec--plano > *{position:relative;z-index:1}

/* ============================================================
   EL FONDO ES EL PLANO
   ------------------------------------------------------------
   Antes todo el sitio llevaba una trama de puntos de 1,2px repetida
   cada 28px y fija al viewport. Quitada: una trama uniforme y diminuta
   no dice nada de quien la usa, es relleno para que el fondo no este
   vacio. Es el fondo por defecto de cualquier plantilla.

   Lo que si dice algo de Grupo Xioon es el plano. Venden lotes; su
   material nativo es el trazo catastral, y plano-trazo.svg son las 177
   parcelas REALES de Mareva sacadas de data.js, no un dibujo decorativo.

   La diferencia entre azulejo y motivo: el azulejo se repite igual en
   todas partes; el motivo aparece donde toca y nunca dos veces igual.
   Cada banda muestra una ZONA distinta del mismo plano y a distinta
   escala, asi que al bajar se lee como un plano grande pasando por
   detras — no como un fondo pegado.

   Opacidad entre .05 y .075: por debajo del umbral en que compite con
   el texto. Se mide despues, no se supone.
   ============================================================ */
.sec:not(.tono):not(.sec--plano),
.band{position:relative}

.sec:not(.tono):not(.sec--plano)::after,
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("../img/plano-trazo.svg");
  background-repeat:no-repeat;
  /* .055 se leia: en banda alta y fondo claro se distinguian las
     parcelas y competian con el titular. Un motivo se nota, no se lee. */
  opacity:.032;
}
.sec:not(.tono):not(.sec--plano) > *,
.band > *{position:relative;z-index:1}

/* Cada banda, por otra zona del mismo plano.

   Con tres variantes se repetian cada tres bandas y volvia a leerse
   como patron. Son SEIS: recorren el plano de izquierda a derecha y de
   arriba abajo, alternando escala entre 0,8x y 1,3x. Al bajar por la
   pagina se recorre el dibujo, que es justo la sensacion que no da un
   azulejo. */
.sec:nth-of-type(6n+1)::after,.band:nth-of-type(6n+1)::after{
  background-size:min(900px,96%) auto;   background-position:-10% 14%;
  -webkit-mask-image:radial-gradient(ellipse 58% 84% at 6% 28%,#000 18%,transparent 72%);
          mask-image:radial-gradient(ellipse 58% 84% at 6% 28%,#000 18%,transparent 72%);
}
.sec:nth-of-type(6n+2)::after,.band:nth-of-type(6n+2)::after{
  background-size:min(1250px,126%) auto; background-position:106% 72%;
  -webkit-mask-image:radial-gradient(ellipse 64% 78% at 95% 66%,#000 20%,transparent 72%);
          mask-image:radial-gradient(ellipse 64% 78% at 95% 66%,#000 20%,transparent 72%);
}
.sec:nth-of-type(6n+3)::after,.band:nth-of-type(6n+3)::after{
  background-size:min(760px,80%) auto;   background-position:46% -18%;
  -webkit-mask-image:radial-gradient(ellipse 80% 56% at 48% 2%,#000 14%,transparent 72%);
          mask-image:radial-gradient(ellipse 80% 56% at 48% 2%,#000 14%,transparent 72%);
}
.sec:nth-of-type(6n+4)::after,.band:nth-of-type(6n+4)::after{
  background-size:min(1100px,112%) auto; background-position:-14% 88%;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 4% 82%,#000 16%,transparent 72%);
          mask-image:radial-gradient(ellipse 62% 70% at 4% 82%,#000 16%,transparent 72%);
}
.sec:nth-of-type(6n+5)::after,.band:nth-of-type(6n+5)::after{
  background-size:min(840px,88%) auto;   background-position:112% 10%;
  -webkit-mask-image:radial-gradient(ellipse 56% 74% at 98% 16%,#000 16%,transparent 72%);
          mask-image:radial-gradient(ellipse 56% 74% at 98% 16%,#000 16%,transparent 72%);
}
.sec:nth-of-type(6n)::after,.band:nth-of-type(6n)::after{
  background-size:min(1320px,132%) auto; background-position:52% 112%;
  -webkit-mask-image:radial-gradient(ellipse 76% 60% at 50% 98%,#000 14%,transparent 72%);
          mask-image:radial-gradient(ellipse 76% 60% at 50% 98%,#000 14%,transparent 72%);
}

/* Sobre fondo oscuro el trazo tiene que ser claro, no oscuro. */
.sec--navy::after,.band--navy::after,.band--gold::after{
  filter:invert(1) brightness(2); opacity:.07;
}

/* El hero lleva video: ahi no entra nada mas. */
.hero-video::after,.mq-hero::after{content:none}

/* En telefono el plano se sale de escala y solo ensucia. */
@media (max-width:700px){
  .sec:not(.tono):not(.sec--plano)::after,
  .band::after{opacity:.038;background-size:min(620px,150%) auto}
}

/* ============================================================
   4. CÓDIGO DE ESTADO — la firma de la marca
   ------------------------------------------------------------
   Verde disponible / dorado separado / rojo vendido ya son
   tokens del producto. Sacados del plano a la web, son una
   marca que ningún competidor tiene.
   ============================================================ */

/* Va como ::after del encabezado para no tocar los 19 HTML y para
   que no quede una clase declarada que nadie usa. */
.sec__head::after{
  content:"";display:block;
  width:108px;height:5px;margin-top:22px;
  background:linear-gradient(90deg,
    var(--st-disponible) 0 33.33%,
    var(--st-separado)   33.33% 66.66%,
    var(--st-vendido)    66.66% 100%);
}
.band .sec__head::after{box-shadow:0 0 0 1px rgba(245,241,232,.3)}

/* ============================================================
   5. MARCAS DE CORTE en los encabezados de sección
   ------------------------------------------------------------
   La escuadra superior izquierda que ya aparece en el hero,
   convertida en sistema: toda sección arranca acotada.
   ============================================================ */

.sec__head{position:relative}
.sec__head::before{
  content:"";position:absolute;
  left:-18px;top:-14px;width:12px;height:12px;
  border-left:2px solid var(--gold);
  border-top:2px solid var(--gold);
  opacity:.85;
}
@media (max-width:900px){.sec__head::before{display:none}}

/* ============================================================
   5b. EL PATRÓN DE MARCA, DOMADO
   ------------------------------------------------------------
   La pila de cuadrados del brandboard estaba a opacity .5 y
   38vw arrancando en la esquina superior izquierda — justo
   donde van los titulares de las bandas navy. El texto se leía
   encima de los cuadros. No lo quito (es del brandboard): lo
   bajo de opacidad y lo corro a la esquina para que sea remate
   y no ruido.
   ============================================================ */

/* El recorte es obligatorio: al correr el patrón a -34px/-28px para
   sacarlo de debajo del titular, se salía del viewport y producía
   28px de scroll horizontal (medidos). La banda lo recorta. */
.band{overflow:hidden}
.band::before{
  opacity:.16;
  width:min(224px,26vw);
}
.band--corner-tl::before{left:-34px;top:-26px}
.band--corner-br::before{right:-28px;bottom:-22px}
@media (max-width:760px){.band::before{opacity:.1}}

/* ============================================================
   5c. LOS PILARES: DE TARJETAS A ÍNDICE DE PLANO
   ------------------------------------------------------------
   Medido contra la lista de patrones de IA: tres tarjetas
   idénticas en rejilla de 3 columnas, cada una con número,
   título en negrita y dos líneas de texto. Es el layout más
   reconocible de web generada por IA.
   Mismo contenido, otro objeto: una leyenda de plano. Sin caja,
   numeración grande acotada, y las tres entradas escalonadas
   para que la fila deje de leerse como plantilla simétrica.
   ============================================================ */

#pilares .grid.g-3{align-items:start}
.pilar{
  background:none;border:0;box-shadow:none;border-radius:0;
  padding:22px 0 0;
  border-top:2px solid var(--navy);
}
/* El escalonado rompe la simetría de plantilla. Las rotaciones
   que traía (-1.2deg / 1.2deg) hacían "tarjetas de papel": fuera. */
/* El escalonado va en margin, no en transform: `.js .rv.in` tiene
   tres clases de especificidad y pisaba cualquier transform que
   pusiera aquí, así que las tres entradas quedaban alineadas. */
.pilar:nth-child(2){margin-top:26px}
.pilar:nth-child(3){margin-top:52px}
/* Con cuatro entradas la cuarta vuelve a 0 y el escalonado se parte en
   dos filas que no riman. Con cuatro, todas a la misma altura: una
   retícula pareja se lee intencionada; una diagonal interrumpida, no. */
.grid:has(> .pilar:nth-child(4)) > .pilar{margin-top:0}
.pilar:hover{box-shadow:none}
.pilar__n{
  display:block;
  font-family:var(--display);
  font-variant-numeric:tabular-nums;
  font-size:2.5rem;font-weight:700;line-height:1;
  color:var(--gold-d);
  margin-bottom:10px;
}
.pilar:hover .pilar__n{transform:none}
.pilar .h3{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:700}
/* La línea superior se tiñe al pasar por encima: el único
   movimiento, y dice "esto es una entrada del índice". */
.pilar{transition:border-color .25s ease}
.pilar:hover{border-top-color:var(--gold)}
@media (max-width:860px){
  .pilar:nth-child(2),.pilar:nth-child(3){margin-top:0}
}

/* ============================================================
   5e. LAS CIFRAS: DE TARJETAS CON ICONITO A CUADRO DE DATOS
   ------------------------------------------------------------
   Eran tres tarjetas apiladas, cada una con un icono dentro de
   una cajita de color. El icono no aporta nada: el dato es el
   número. Es el patrón "iconos en círculos de color como
   decoración" de la lista de slop, y encima compite con la cifra.
   Ahora es el cuadro de datos de un plano: la cifra enorme en
   Fraunces, el rótulo monoespaciado debajo, filetes entre
   entradas. El icono se va.
   ============================================================ */

.mq-about2__stats{gap:0;border-top:1px solid var(--line-navy)}
.mq-about2__stat{
  background:none;border:0;box-shadow:none;border-radius:0;
  padding:16px 0;
  border-bottom:1px solid var(--line-navy);
  align-items:baseline;gap:0;
}
.mq-about2__stat:hover{transform:none;box-shadow:none}
.mq-about2__ic{display:none}
.mq-about2__stat .stat__v{
  font-family:var(--display);
  font-variant-numeric:tabular-nums;
  font-size:2.5rem;font-weight:700;letter-spacing:-.02em;  /* paso de la escala, no 3.1rem = 49,6 */
  color:var(--gold);
}
.mq-about2__stat .stat__l{
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy-2);margin-top:6px;
}

/* ============================================================
   5f. EL NAV, ACOTADO
   ------------------------------------------------------------
   Era una barra de enlaces con subrayado al pasar: la misma de
   cualquier plantilla. El subrayado pasa a ser la cota del
   sistema (trazo dorado grueso, alineado al borde inferior) y
   los enlaces toman el tratamiento monoespaciado del plano.
   ============================================================ */

/* Archivo en versalitas necesita más aire entre letras que la mono
   —en la mono el hueco ya venía dentro de cada carácter— y un cuerpo
   algo menor para que "ACCESO ASESORES" no empuje a los botones. */
.nav__links > a:not(.btn){
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.11em;
  text-transform:uppercase;
}
.nav__links a:not(.btn)::after{height:3px;background:var(--gold);bottom:-6px}

/* "Proyectos" es un <button> con menu, no un <a>, asi que se quedaba
   fuera del selector de arriba: en index.html salia en minusculas y a
   otro cuerpo que sus vecinos. Venia desparejo de antes. */
.nav__drop-btn{
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.11em;
  text-transform:uppercase;
}

/* CONTRASTE — bug real en 13 páginas.
   `.nav__links a` (0,1,1) le gana a `.btn--solid` (0,1,0), así que el
   botón "Cotizador" tomaba --ink-2 (#46536a) sobre fondo --navy:
   1.98:1 medido, contra el 4.5:1 que pide WCAG AA. Se leía como una
   mancha. Se devuelve el color propio de cada botón. */
.nav__links a.btn--solid{color:var(--bone)}
.nav__links a.btn--gold{color:#231603}
.nav__links a.btn--ghost{color:var(--navy)}
.nav--on-dark:not(.is-scrolled) .nav__links a.btn--solid{color:var(--bone)}

/* Leyenda del plano: la muestra y el texto compartían color via
   currentColor, así que "Separado" quedaba en dorado sobre blanco
   (2.06:1) y "Disponible" en verde (3.37:1). La muestra conserva el
   color exacto del plano — es lo que el cliente compara contra el
   mapa — y el texto pasa a navy. */
.lgd{color:var(--ink)}
.lgd::before{background:var(--sw);opacity:1}
.lgd--disponible{--sw:var(--st-disponible)}
.lgd--separado{--sw:var(--st-separado)}
.lgd--vendido{--sw:var(--st-vendido)}
.lgd--parque{--sw:#4f8f75}

/* Píldoras de estado sobre fondo claro: el verde de "Disponible"
   daba 3.37:1 medido, bajo el 4.5:1 de AA para texto chico. Se
   oscurece el texto; el color sigue leyéndose como verde y sigue
   casando con el plano. */
.pill--disponible{color:#1f6e43}

/* Botones secundarios sobre la foto del hero de proyecto.
   Venían con borde y texto crema y nada detrás: sobre una foto de
   tono medio se leían como botones deshabilitados (1.13:1 medido
   contra el fondo claro de reserva). Se les pone un respaldo navy
   translúcido: el contraste queda garantizado sobre cualquier foto
   y de paso se distinguen del botón principal, que es el dorado. */
.proyecto-hero .btn--lg:not(.btn--gold){
  background:rgba(21,37,61,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-color:rgba(245,241,232,.75) !important;
  color:var(--bone) !important;
}
.proyecto-hero .btn--lg:not(.btn--gold):hover{
  background:rgba(21,37,61,.85);
  border-color:var(--gold) !important;
  color:var(--gold-l) !important;
}

/* ============================================================
   5d. EL RIEL FLOTANTE, EN LA MARCA DE XIOON
   ------------------------------------------------------------
   Venía con los colores de cada red: verde WhatsApp, azul
   Facebook, degradado Instagram. Tres marcas ajenas pegadas
   encima de la de Xioon, en círculos de 50px — el widget más
   genérico que existe, y lo primero que ve el visitante en la
   esquina.
   Ahora son fichas navy con el radio del sistema; la red se
   reconoce por su icono, no por el color prestado. El oro
   aparece solo al pasar por encima.
   ============================================================ */

.xioon-fab-stack{gap:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-hard-sm)}
.xioon-fab{
  width:46px;height:46px;border-radius:0;
  background:var(--navy);color:var(--bone);
  border:0;border-top:1px solid rgba(245,241,232,.14);
  box-shadow:none;
}
.xioon-fab-stack .xioon-fab:last-child{border-top:0}
.xioon-fab--wa,.xioon-fab--fb,.xioon-fab--ig{background:var(--navy)}
.xioon-fab:hover{transform:none;background:var(--gold);color:#231603;box-shadow:none}
.xioon-fab svg{width:21px;height:21px}
@media (max-width:480px){.xioon-fab{width:42px;height:42px}}

/* El avatar del bot venía escalado 1.7 y se salía 34px por la
   derecha: era el resto del desborde horizontal en teléfono. */
.xioon-chat-btn{overflow:hidden}

/* ============================================================
   5g. ENCUADRE DEL HERO DE MAREVA
   ------------------------------------------------------------
   La única foto de playa disponible (mareva-lote.jpg) tiene una
   lona morada enorme tapando el lote en el centro. El morado es
   el color que más delata una web generada por IA y además pelea
   con el navy y el oro de la marca.
   Se sube el encuadre al tercio superior: queda mar, rompiente y
   línea de costa, que es lo que vende, y la lona sale de cuadro.
   Pendiente real: una foto de verdad del terreno en Mejía.
   ============================================================ */

body[data-slug="mareva"] .proyecto-hero{
  background-position:center 16%;
}

/* ------------------------------------------------------------
   DUOTONO DE MARCA EN LAS PORTADAS DE PROYECTO
   ------------------------------------------------------------
   Recortar la lona morada no alcanzó: seguía asomando, y el morado
   es a la vez el color que más delata una web hecha por IA y el que
   más pelea con el navy y el oro.
   En vez de pelear con cada foto, se tiñen todas: mix-blend-mode
   color conserva la luminosidad (el mar sigue leyéndose como mar,
   la arena como arena) y reemplaza el matiz por el navy de la
   marca. La lona desaparece como objeto de color y queda como una
   forma más del terreno.
   Beneficio secundario: las tres portadas (Mareva, Sachaca, Terra
   Verde) pasan a verse de la misma familia aunque las fotos sean
   de calidades distintas. Eso es lo que hace que una marca se vea
   intencional y no improvisada.

   OJO: solo donde la portada es una FOTO. Terra Verde y Sachaca usan
   su propio plano como portada, y ese plano lleva una leyenda de
   colores (verde disponible / dorado separado / rojo vendido) que el
   duotono volvía gris: se perdía la información. */

body[data-slug="mareva"] .proyecto-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--navy);
  mix-blend-mode:color;
}

/* Portadas que son un plano: el dibujo traía tanto detalle y tanto
   texto propio ("PLANIMETRÍA LOTIZACIÓN", la leyenda, los números de
   manzana) que competía con el titular. Se empuja a textura: velo
   navy más denso y desenfoque suave. El plano se sigue reconociendo,
   pero el que manda es el nombre del proyecto. */
body[data-slug="terra-verde"] .proyecto-hero::after,
body[data-slug="sachaca"] .proyecto-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Antes: .52 y 3px. Medido en producción, se seguía leyendo
     "PLANIMETRÍA LOTIZACIÓN" y toda la leyenda, compitiendo con el
     nombre del proyecto. Un velo a medias deja el peor de los dos
     mundos: ni se lee el plano ni manda el titular.
     Ahora el plano es textura y punto: velo denso en degradado —más
     cerrado abajo, donde van las cifras y los botones— y desenfoque
     real. La trama de lotes se sigue reconociendo de lejos, que es
     lo que aporta; el texto impreso ya no. */
  background:linear-gradient(180deg,
    rgba(21,37,61,.72) 0%,
    rgba(21,37,61,.80) 45%,
    rgba(21,37,61,.90) 100%);
  backdrop-filter:blur(7px) saturate(.55);
  -webkit-backdrop-filter:blur(7px) saturate(.55);
}
/* Un respiro de oro en el borde inferior: liga la foto con la banda
   de datos que viene debajo y evita el corte plano. */
.proyecto-hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,
    var(--st-disponible) 0 33.33%,
    var(--st-separado)   33.33% 66.66%,
    var(--st-vendido)    66.66% 100%);
}

/* ============================================================
   5h. TARJETAS DE PROYECTO: UNA ACCIÓN, UN DATO
   ------------------------------------------------------------
   Era el punto más genérico del sitio y encima el comercial: una
   rejilla de tarjetas blancas con tres botones del mismo peso que
   se partían en dos líneas. Quien entraba tenía que decidir entre
   "Ver el proyecto", "Plano" y "Cotizar" antes de saber nada.
   Ahora manda un solo botón dorado; plano y cotizador quedan como
   enlaces con la cota de la marca. Y el dato de inventario se lee
   como ficha de plano: cifra grande, rótulo monoespaciado.
   ============================================================ */

/* El nombre y la píldora de estado se posicionan los dos en absolute
   sobre la foto, cada uno pegado a su borde: con un nombre largo
   ("Condominio Sachaca") se montaban y el nombre quedaba cortado.
   Se bajan a una fila: el nombre manda y el estado lo acompaña, sin
   que ninguno dependa del ancho del otro. */
.proy__ph{display:flex;align-items:flex-start;gap:10px;padding:16px}
.proy__ph > .proy__label,
.proy__ph > .proy__estado{position:static;flex:none}
.proy__ph > .proy__label{font-size:var(--ui-lg);margin-right:auto;min-width:0}
.proy__ph > .proy__loc--tag{position:absolute;left:16px;bottom:16px}

.proy__ficha{
  display:flex;gap:26px;flex-wrap:wrap;
  padding-block:14px;margin-top:2px;
  border-top:1px solid var(--line);
}
.proy__dato b{
  display:block;
  font-family:var(--display);
  font-variant-numeric:tabular-nums;
  font-size:1.9375rem;font-weight:700;line-height:1;
  color:var(--navy);letter-spacing:-.02em;
}
.proy__dato b.proy__dato--sp{font-size:var(--ui-xl);color:var(--ink-2)}
.proy__dato span{
  display:block;margin-top:5px;
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.proy__cta{align-items:center;gap:16px;margin-top:4px}
.proy__link{
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
  padding-bottom:3px;border-bottom:2px solid var(--line-2);
  transition:color .18s ease, border-color .18s ease;
}
.proy__link:hover{color:var(--navy);border-bottom-color:var(--gold)}

/* ============================================================
   5i. LA FIRMA: EL SCROLL ES LA LEYENDA DEL PLANO
   ------------------------------------------------------------
   Faltaba el gesto que se recuerda. La barra de progreso venía con
   el degradado dorado genérico — la misma que tiene medio internet.
   Ahora lleva los tres colores del estado comercial, en el mismo
   orden que la leyenda del plano: verde disponible, dorado separado,
   rojo vendido.
   Funciona como firma porque no es decoración prestada: es el
   inventario de Xioon convertido en marca. Mientras bajas por la
   web, vas "recorriendo" la barra de estados de un lote. Ningún
   competidor lo puede copiar sin copiar el negocio.
   El canal queda visible al 14% para que se lea como una regla
   graduada y no como una barra a medio llenar.
   ============================================================ */

.scrollbar{
  height:4px;
  /* Canal tenue: se lee como regla graduada, no como barra vacía. */
  background:rgba(21,37,61,.1);
}
.scrollbar__fill{
  /* El degradado se fija al ancho de la ventana, no al del relleno:
     así cada color se queda en su tramo y el scroll lo va
     descubriendo, igual que se recorre la leyenda de un plano.
     Si se escalara con el relleno, los tres colores aparecerían de
     golpe desde el primer píxel y el gesto se perdería. */
  background:linear-gradient(90deg,
    var(--st-disponible) 0 33.33%,
    var(--st-separado)   33.33% 66.66%,
    var(--st-vendido)    66.66% 100%);
  background-size:100vw 100%;
  background-repeat:no-repeat;
  box-shadow:none;
  border-right:2px solid var(--navy);
}

/* ------------------------------------------------------------
   Detalles de oficio que el sistema no tenía.
   ------------------------------------------------------------ */

::selection{background:var(--gold);color:#231603}
::-moz-selection{background:var(--gold);color:#231603}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ============================================================
   1e. QUE NADA SE SALGA EN TELÉFONO
   ------------------------------------------------------------
   Con los titulares a escala de cartel hay que asegurar el resto.
   Medido a 375px: los botones con texto largo ("Nuestra historia,
   misión y visión") iban con white-space:nowrap y se salían 9px, y
   el avatar del bot venía escalado 1.7.
   ============================================================ */

@media (max-width:760px){
  .btn{white-space:normal;text-align:center;max-width:100%}
  .btn--lg{padding-inline:18px}
}
.xioon-chat-btn{overflow:hidden}
.xioon-chat-btn__avatar{max-width:100%}

/* ============================================================
   6. NAV OPACO
   ------------------------------------------------------------
   Estaba a rgba(255,255,255,.92): el contenido se transparentaba
   por debajo y la barra se veía sucia al hacer scroll. Opaca
   cuando ya hay scroll; sobre el hero sigue traslúcida a
   propósito.
   ============================================================ */

.nav{background:#fff}
.nav--on-dark:not(.is-scrolled){background:linear-gradient(180deg,rgba(15,26,44,.62) 0%,rgba(15,26,44,.3) 70%,rgba(15,26,44,0) 100%)}
.nav.is-scrolled{border-bottom-color:var(--navy)}

/* ============================================================
   7. BOTONES — menos pastilla, más sello
   ============================================================ */

.btn{letter-spacing:.01em}
.btn--solid,.btn--gold{position:relative;overflow:hidden}
/* Barrido de luz al pasar el mouse: una sola animación en toda
   la web, siempre la misma. */
.btn--solid::after,.btn--gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.btn--solid:hover::after,.btn--gold:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){
  .btn--solid::after,.btn--gold::after{display:none}
}

/* ============================================================
   ENLACE CALLADO
   ------------------------------------------------------------
   Para la accion secundaria que no compite con la principal.
   Antes iba como segundo boton del mismo tamaño, y dos bloques
   iguales uno encima del otro leen como formulario: obligan a
   elegir entre dos cosas que no estan al mismo nivel.
   La flecha se desplaza en el hover; el subrayado nace del texto,
   no de una caja.
   ============================================================ */
.enlace-callado{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--line-2);
  transition:color .2s,border-color .2s;
}
.enlace-callado span{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.enlace-callado:hover{color:var(--gold-d);border-color:var(--gold-d)}
.enlace-callado:hover span{transform:translateX(4px)}
.enlace-callado:focus-visible{outline:2px solid var(--gold-d);outline-offset:4px}

/* En teléfono el trazo del plano queda detrás de todo el texto y
   resta más de lo que suma: se baja casi a nada. */
@media (max-width:760px){
  .sec.tono::before,.sec--plano::before{opacity:.05;background-size:150% auto;background-position:60% 30%}
}

/* ============================================================
   PORTADA DE PROYECTO: UNA ACCIÓN PRINCIPAL
   ------------------------------------------------------------
   Había cuatro botones del mismo peso en fila (Agendar cita, Ver el
   plano interactivo, Cotizar, Tour 360°). Cuatro acciones iguales no
   son cuatro opciones: son ninguna, porque nada indica por dónde
   empezar. Se queda una sólida y las demás bajan a enlace sobre el
   fondo oscuro, que es lo que son.
   ============================================================ */
.proyecto-hero .hero__cta,
.proyecto-hero__cta{align-items:center;gap:14px 22px;flex-wrap:wrap}

.proyecto-hero .btn--lg:not(.btn--gold){
  background:transparent;
  border:0;
  padding-inline:0;
  color:rgba(245,241,232,.86);
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(245,241,232,.3);
  border-radius:0;
  padding-bottom:4px;
  transition:color .2s,border-color .2s;
}
.proyecto-hero .btn--lg:not(.btn--gold):hover{
  background:transparent;
  color:var(--gold-l);
  border-bottom-color:var(--gold-l);
  transform:none;
}

/* ============================================================
   PORTADAS DE PLANO: ENCUADRE QUE DEJA LA LEYENDA FUERA
   ------------------------------------------------------------
   El velo denso no bastó, y la razón es geométrica: el hero es una
   banda ancha y baja (~2,2:1) y el plano es casi cuadrado (1,41:1).
   Con background-size:cover la imagen se ajusta POR ANCHO, así que
   el ancho completo del plano entra siempre en cuadro — incluida la
   columna donde vive el recuadro de leyenda. Mover
   background-position en horizontal no hace nada mientras se vea
   todo el ancho.

   Por eso aquí se amplía el fondo por encima de cover y se encuadra
   la zona de lotes. La leyenda y el banner quedan literalmente fuera
   del recorte, no tapados: no hay velo que se les pueda escapar.
   Los porcentajes salen de dónde está la trama útil en cada plano.
   ============================================================ */

body[data-slug="terra-verde"] .proyecto-hero{
  /* Leyenda arriba a la derecha, banner arriba al centro:
     se encuadra abajo a la izquierda. */
  background-size:190% auto;
  background-position:12% 88%;
}
body[data-slug="sachaca"] .proyecto-hero{
  /* Leyenda arriba al centro y tira de miniaturas de amenidades
     abajo: se encuadra la banda media, hacia la izquierda. */
  background-size:185% auto;
  background-position:18% 46%;
}

/* En teléfono la banda es mucho más alta en proporción: se afloja el
   acercamiento para que no quede un primerísimo plano de dos lotes. */
@media (max-width:760px){
  body[data-slug="terra-verde"] .proyecto-hero{background-size:260% auto;background-position:20% 85%}
  body[data-slug="sachaca"] .proyecto-hero{background-size:250% auto;background-position:22% 48%}
}

/* ============================================================
   TEXTO SOBRE FOTO: APOYO, NO SOMBRA
   ------------------------------------------------------------
   Medido en producción: .proy__loc ("CERRO COLORADO", "SACHACA",
   "MEJÍA") salía en oro claro a 12px directamente sobre la foto de
   la tarjeta — 1,13 de contraste, cuando AA pide 4,5. Lo mismo la
   bajada de la sección.

   Una sombra de texto no arregla esto: tapa el problema en las
   fotos oscuras y no hace nada en las claras. Lo que funciona es un
   apoyo de verdad bajo el texto, que garantiza el fondo pase lo que
   pase en la imagen.
   ============================================================ */
.proy__ov{
  position:relative;
}
.proy__ov::before{
  content:"";position:absolute;inset:-6px -10px -10px;z-index:-1;
  /* El mínimo NO puede bajar de .68: con hueso encima y una foto
     blanca detrás, .68 da 5,7:1 y .62 se queda justo en el filo de
     4,5. Un degradado que arranque en 0 deja el texto de arriba sin
     garantía ninguna — por eso empieza ya opaco. */
  background:linear-gradient(180deg,
    rgba(10,18,31,.68) 0%,
    rgba(10,18,31,.80) 45%,
    rgba(10,18,31,.90) 100%);
  border-radius:inherit;
  pointer-events:none;
}
.proy__loc{
  /* El oro claro sobre foto no llega nunca: se sube al hueso, que
     sobre un fondo oscuro sí cumple con holgura. El oro se reserva
     para las cifras, donde tiene fondo propio. */
  color:var(--bone);
}

/* ============================================================
   TARJETA DE PROYECTO: UNA INSIGNIA, NO TRES
   ------------------------------------------------------------
   Sobre la miniatura iban el nombre, el distrito y el estado, los
   tres como pastillas. En 300px eso se lee como ruido y encima se
   pisaban: la de ubicación tenía top y bottom definidos a la vez
   por dos reglas distintas, así que al darle fondo se estiró a
   153px de alto y tapó el nombre.

   Ahora sobre la foto va solo el nombre. Distrito y estado bajan al
   pie, sobre fondo sólido, donde el contraste está garantizado sin
   trucos y hay sitio para leerlos.
   ============================================================ */
.proy__sitio{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:2px;
  border-bottom:1px solid var(--line);
}
.proy__sitio .proy__loc{
  color:var(--ink-3);
  font-family:var(--mono);font-weight:700;
  font-size:var(--ui-sm);letter-spacing:.12em;
}
.proy__sitio .pill{flex:none}

/* ============================================================
   AJUSTES ÓPTICOS
   ------------------------------------------------------------
   Tener una escala hace que la tipografía sea coherente. Lo que
   hace que se vea DISEÑADA es lo que viene después, y que casi
   nunca se hace:

   1. El interletraje no es una constante. Una misma fuente a 100px
      necesita menos aire que a 14px — a tamaño grande los huecos
      entre letras crecen con el cuerpo y el texto se deshilacha.
      Por eso los titulares cierran y las versalitas abren.

   2. La interlínea tampoco. A 100px, 1,4 de interlínea abre un
      abismo entre renglones; a 16px, 1,1 los pega. Baja según sube
      el cuerpo.

   3. Las cifras alineadas en columna piden ancho fijo; las que van
      dentro de una frase, no — ahí el ancho fijo deja huecos.
   ============================================================ */

/* Interlínea por tamaño, no por elemento. */
.h-display{line-height:.86}
.h1{line-height:.92}
.h2{line-height:.98}
.h3,.h4{line-height:1.18}
.p,p,li{line-height:1.62}
.lead{line-height:1.5}

/* Interletraje óptico: cierra al crecer, abre al encoger. */
.h-display{letter-spacing:-.034em}
.h1{letter-spacing:-.028em}
.h2{letter-spacing:-.021em}
.h3{letter-spacing:-.014em}
.h4{letter-spacing:-.008em}
.p,p,li,.lead{letter-spacing:0}

/* Las versalitas chicas necesitan lo contrario: sin aire se
   amontonan y dejan de leerse como etiqueta. */
.idx,.enlace-callado,.fundador__pie,.proy__sitio .proy__loc{letter-spacing:.12em}

/* Cifras: ancho fijo solo donde se comparan en vertical. */
.proy__dato b,.dispo__leyenda b,.stat__v,.kpi-puntaje__n,
.proyecto-stats b,.dispo__cifra{font-variant-numeric:tabular-nums}
/* Dentro de una frase el ancho fijo deja huecos: ahí, proporcional. */
.p,p,.lead{font-variant-numeric:proportional-nums}

/* Párrafos: que la última línea no quede con una palabra sola.
   balance iguala renglones y sirve para titulares; pretty está
   pensado justo para el final de un párrafo largo. */
.p,p,.lead{text-wrap:pretty}


/* Pie de la tarjeta de disponibilidad: el boton manda, el enlace
   acompana. Alineados por la base para que el enlace no flote. */
.dispo__pie{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px;
}
.dispo__pie .enlace-callado{white-space:nowrap}


/* El .lead sobre video seguia en el gris azulado de fondo claro porque
   esta hoja carga DESPUES de home.css y su regla generica de .lead
   ganaba. Medido tras el primer intento: 3,24 cuando AA pide 4,5. Sobre
   oscuro el texto va en hueso; recalculado da 5,5. (Misma colision de
   orden que con la entradilla a 16,56: si la correccion va en la hoja
   de abajo, no sirve.) */
.nosotros-hero__txt .lead,
.nosotros-hero__txt .p,
.nosotros-hero .lead{color:var(--bone)}


/* El parrafo de las portadas de proyecto usaba --on-navy-2 (169,182,201),
   un token pensado para azul SOLIDO, donde da 7,63. Sobre foto con velo
   parcial se quedaba en 4,03 (AA pide 4,5). Sobre oscuro va el hueso,
   como en el resto del sitio. El color estaba ademas escrito en el
   marcado, asi que ninguna regla CSS podia corregirlo: se quito de ahi. */
.proyecto-hero .lead,
.proyecto-hero .p{color:var(--bone)}


/* Los cuadritos de esquina se retiraron en base.css: nueve rectangulos
   redondeados que no decian nada y que ademas competian con el trazo
   del plano, que ya recorre estas mismas bandas. Un motivo por marca.
   Aqui se recoge el hueco que reservaban. */
.band--corner-tl::before,
.band--corner-br::before{content:none}


/* ==================================================================
   PORTADA — el inventario manda
   ------------------------------------------------------------------
   Antes: tres videos rotando cada 7s con un titular distinto cada vez,
   y el que mandaba en pantalla era una persona caminando. El terreno,
   que es lo que se vende, quedaba detras. El dato que decide una visita
   —cuantos quedan— estaba a un scroll de distancia.

   Ahora: el video del dron (el unico que ensena terreno) y delante el
   estado real de los tres proyectos, en el primer golpe de vista.

   El velo va al 0,74 donde cae el texto. No es un numero a ojo: con el
   hueso (245,241,232) sobre el peor caso posible —un fotograma blanco—
   da 5,5 de contraste, y AA pide 4,5 para texto normal.
   ================================================================== */
.portada{
  position:relative;
  min-height:clamp(520px,74vh,680px);
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--navy);
  padding-block:clamp(84px,9vh,112px) clamp(26px,3.4vh,40px);
}
.portada__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;
  /* hero.mp4 trae dos marcas de agua quemadas en la franja de arriba:
     el logo a la izquierda y una firma de edicion a la derecha. Se
     escala y se baja el encuadre para dejarlas fuera de cuadro. */
  transform:scale(1.34) translateY(9%);
  transform-origin:50% 50%;
}
.portada__velo{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(21,37,61,.62) 0%, rgba(21,37,61,.74) 42%, rgba(21,37,61,.92) 100%),
    linear-gradient(90deg, rgba(21,37,61,.55) 0%, rgba(21,37,61,.12) 62%, rgba(21,37,61,.35) 100%);
}
.portada__in{position:relative;z-index:1;width:100%}

.portada__txt{max-width:min(640px,58vw)}   /* px, no ch: ver nota */
.portada__ojo{color:var(--gold-l)}
.portada__tit{
  /* Sin tope propio: lo gobierna el ancho de .portada__txt. Un tope en
     ch aqui se resolveria contra 56px y daria una medida enorme. */
  color:var(--bone);margin:12px 0 0;max-width:none;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.portada__bajada{
  color:var(--bone);margin-top:13px;max-width:44ch;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.portada__cta{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(18px,2.4vh,26px);
}
.portada__link{color:var(--gold-l)}
.portada__link:hover{color:var(--bone)}

/* ---- la tira de inventario ---- */
.portada__inv{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(24px,3.4vh,38px);
  background:rgba(245,241,232,.16);
  border-top:1px solid rgba(245,241,232,.16);
}
.portada__p{
  background:rgba(21,37,61,.55);
  backdrop-filter:blur(3px);
  padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.portada__p:hover{background:rgba(21,37,61,.78)}
.portada__p-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.portada__p-nom{
  font-family:var(--display);font-weight:600;
  font-size:var(--t-3);line-height:1.1;color:var(--bone);
}
.portada__p-loc{
  font-family:var(--mono);font-weight:700;font-size:var(--ui-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-2);
  white-space:nowrap;
}
.portada__barra{display:flex;height:10px;overflow:hidden;background:rgba(245,241,232,.16)}
.portada__barra i{display:block;height:100%;width:var(--w)}
.portada__barra i[data-e="disponible"]{background:var(--st-disponible)}
.portada__barra i[data-e="separado"]{background:var(--st-separado)}
.portada__barra i[data-e="vendido"]{background:var(--st-vendido)}
.portada__p-pie{
  display:flex;align-items:baseline;gap:7px;
  font-family:var(--mono);font-size:var(--ui-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-2);
}
.portada__p-pie b{
  font-family:var(--display);font-size:var(--t-3);font-weight:700;
  letter-spacing:-.01em;color:var(--bone);
  font-variant-numeric:tabular-nums;
}
/* Un proyecto recien abierto no se anuncia con escasez: se anuncia
   como lo que es. El color lo dice sin texto extra. */
.portada__p--nuevo .portada__p-pie b{color:var(--gold-l)}

/* Tablet: medido a 768x812 la portada salia a 811px y la tira de
   inventario caia justo por debajo del pliegue. Un pixel de diferencia,
   pero el sentido de esta portada es que el estado se vea sin scroll.
   Se recortan los huecos verticales en esta franja. */
@media (min-width:601px) and (max-width:1023px){
  .portada{padding-block:clamp(74px,8vh,92px) 20px;min-height:0}
  .portada__inv{margin-top:20px}
  .portada__cta{margin-top:16px}
  .portada__txt{max-width:min(560px,78vw)}
}

@media (min-width:601px) and (max-width:860px){
  /* Tres columnas siguen cabiendo: el nombre baja un paso y la ficha
     se aprieta, en vez de apilar y pasarse de alto. */
  .portada__p{padding:12px 13px 14px;gap:8px}
  .portada__p-nom{font-size:var(--t-4,1.0625rem);line-height:1.15}
  .portada__p-loc{font-size:var(--ui-xs)}
  .portada__barra{height:8px}
}
@media (max-width:600px){
  .portada__inv{grid-template-columns:1fr;gap:1px}
  .portada__p{padding:13px 16px 15px}
  .portada__txt{max-width:none}
}
@media (max-width:600px){
  /* Medido a 375x812: con min-height atado al viewport la portada salia
     a 815px —el 100% de la pantalla— y la TERCERA tarjeta del inventario
     quedaba cortada por la mitad. Un hero que llena la pantalla empuja
     el resto de la pagina fuera del primer golpe de vista, y una tarjeta
     cortada se lee como fallo, no como "hay mas abajo".
     En telefono la portada mide segun su contenido. */
  .portada{min-height:0;padding-block:clamp(76px,11vh,104px) 26px}
  .portada__video{transform:scale(1.62) translateY(8%)}
  .portada__tit{max-width:none}
  .portada__bajada{max-width:none}
  /* Las fichas se aprietan: tres en pantalla valen mas que dos grandes
     y media cortada. */
  .portada__p{padding:11px 14px 13px;gap:7px}
  .portada__barra{height:8px}
  .portada__inv{margin-top:26px}
}