/* ============================================================
   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. */
.h-display{font-size:clamp(2.6rem,min(10.5vw,14cqi),9rem);line-height:.86;letter-spacing:-.032em}
.h1{font-size:clamp(2.3rem,min(7.2vw,12.6cqi),6.4rem);line-height:.9;letter-spacing:-.026em}
.h2{font-size:clamp(1.95rem,min(4.6vw,9.4cqi),3.7rem);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.
   ------------------------------------------------------------------ */
.sec__head,
.mq-about2__text,
.faq-wrap > div,
.cta > div,
.split > *,
.proyecto-hero__txt{container-type:inline-size}

/* 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:clamp(1rem,1.15vw,1.12rem);
  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}


/* ============================================================
   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-size:.74rem;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. RETÍCULA DE PLANO — textura con significado
   ------------------------------------------------------------
   Líneas finas al módulo, no puntitos. Se lee como papel de
   plano, y es el mismo trazado que el masterplan real.
   ============================================================ */

.sec.tono,.sec--plano{
  position:relative;
  background-image:
    linear-gradient(var(--tinta-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--tinta-2) 1px,transparent 1px);
  background-size:var(--modulo) var(--modulo);
  background-position:center top;
}
/* Cada 5 módulos, una línea más marcada: así lee como plano
   acotado y no como papel cuadriculado de cuaderno. */
.sec.tono::before,.sec--plano::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--tinta) 1px,transparent 1px),
    linear-gradient(90deg,var(--tinta) 1px,transparent 1px);
  background-size:calc(var(--modulo) * 5) calc(var(--modulo) * 5);
  background-position:center top;
  /* Se desvanece hacia los bordes para que no compita con el
     texto ni corte en seco. */
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 100%);
}
.sec.tono > *,.sec--plano > *{position:relative;z-index:1}

/* ============================================================
   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}
.pilar:hover{box-shadow:none}
.pilar__n{
  display:block;
  font-family:var(--display);
  font-variant-numeric:tabular-nums;
  font-size:2.6rem;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:3.1rem;font-weight:700;letter-spacing:-.02em;
  color:var(--gold);
}
.mq-about2__stat .stat__l{
  font-family:var(--mono);
  font-size:.68rem;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.
   ============================================================ */

.nav__links > a:not(.btn){
  font-family:var(--mono);
  font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;
}
.nav__links a:not(.btn)::after{height:3px;background:var(--gold);bottom:-6px}

/* 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;
  background:rgba(21,37,61,.52);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
/* 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:1rem;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.9rem;font-weight:700;line-height:1;
  color:var(--navy);letter-spacing:-.02em;
}
.proy__dato b.proy__dato--sp{font-size:1.25rem;color:var(--ink-2)}
.proy__dato span{
  display:block;margin-top:5px;
  font-family:var(--mono);
  font-size:.66rem;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-size:.72rem;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}
}